:root{ --yellow:#FEE440; --black:#000; }
html,body{background:var(--yellow);color:#000;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.view{padding:12px 12px 88px}

/* Header noir */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;background:#000;border-bottom:2px solid var(--yellow);padding:8px 12px;color:#fff}
.topbar.hidden{display:none}
.topbar .center{display:flex;align-items:center;gap:10px}
.topbar .logo{width:28px;height:28px;border-radius:6px;border:2px solid var(--yellow)}
.topbar h1{font-size:1rem;margin:0;font-weight:800}.topbar .lite{color:var(--yellow)}
.icon-btn{background:#000;border:2px solid var(--yellow);color:#fff;border-radius:10px;padding:6px 10px;font-weight:800}

/* Menu burger */
.menu-drop{position:fixed;top:56px;right:12px;background:#0d0d0d;color:#fff;border:2px solid #222;border-radius:16px;padding:12px;box-shadow:0 10px 24px rgba(0,0,0,.2);min-width:260px;z-index:50}
.menu-drop .close{position:absolute;top:6px;right:8px;border:none;background:transparent;color:#fff;font-size:16px}
.menu-drop[hidden]{display:none}

/* Nav bas */
.bottomnav{position:fixed;left:0;right:0;bottom:0;background:#000;border-top:2px solid var(--yellow);display:grid;grid-template-columns:repeat(4,1fr);z-index:30}
.bottomnav.hidden{display:none}
.navbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 6px;color:#fff;background:#000;border:none;border-right:1px solid #111;font-weight:800}
.navbtn:last-child{border-right:none}.navbtn span{font-size:.75rem;margin-top:2px}.navbtn.active{background:#111;color:var(--yellow)}

/* Pages : une seule visible */
.page{display:none}
.page.active{display:block}

/* On cache d’anciens systèmes d’onglets éventuels */
.tabs, .tabbar, .tabs-nav, .tabs-header, .tab-header, .nav-tabs { display:none !important; }

/* Cartes style SERVD (titre noir/jaune + body jaune/noir) */
.card{background:#fff;border:2px solid #222;border-radius:16px;padding:14px;color:#000;box-shadow:0 10px 24px rgba(0,0,0,.2);margin-bottom:12px}
.hand-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.card-tile{border:2px solid #111;border-radius:14px;overflow:hidden;background:#fff}
.card-tile .tile-title{background:#000;color:#FEE440;padding:10px 12px;font-weight:800}
.card-tile .tile-body{background:#FEE440;color:#000;padding:10px 12px;min-height:110px}
.card-tile .tile-actions{display:flex;gap:8px;padding:10px 12px;background:#fff}
.btn{background:#000;color:#FEE440;border:2px solid #000;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer}
.btn.outline{background:transparent;color:#000;border-color:#000}.btn.tiny{padding:4px 8px;font-size:.85rem}

/* Scoreboard */
.score-card .score-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed #ccc;padding-bottom:6px;margin-bottom:8px}
.score-card .score-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.score-card .divider{padding:10px 12px;border:2px solid #111;border-radius:10px}
.player .name{font-weight:800}.player .pts{font-size:1.8rem;color:#000;font-weight:900}

/* Flux & Récompenses */
.plays{display:grid;gap:10px}
.play{border:2px solid #111;border-radius:12px;background:#fff;overflow:hidden}
.play .head{display:flex;justify-content:space-between;background:#000;color:#FEE440;padding:8px 10px;font-weight:800}
.play .body{background:#FEE440;color:#000;padding:10px 12px}
.play .meta{padding:8px 10px;display:flex;gap:8px;align-items:center;justify-content:space-between}
.play .actions{display:flex;gap:8px}

.rewards-grid{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
.rewards-grid img{width:100%;height:110px;object-fit:cover;border:2px solid #222;border-radius:12px}
@media(min-width:768px){.rewards-grid{grid-template-columns:repeat(5,1fr)}.rewards-grid img{height:140px}}

.hint{color:#333}
.auth-card{background:#fff;border:2px dashed #111;border-radius:16px;padding:16px;margin:24px 12px}
.auth-card h2{margin:0 0 12px 0}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap{gap:8px}.between{justify-content:space-between}.center{justify-content:center}.end{justify-content:flex-end}.full{width:100%}
.input{flex:1;border:2px solid #111;border-radius:10px;padding:10px 12px;font-weight:700}
.hidden{display:none !important}