/* ═══════════════════════════════════════════════
   Onnen.Games — css/style.css
   ═══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#09090a;--bg2:#0e0e10;--bg3:#141416;--bg4:#1a1a1d;
  --text:#ece8de;--dim:#807b6f;--dim2:#585550;
  --amber:#d4952b;--amber-l:#eaad40;--amber-dim:rgba(212,149,43,.07);--amber-glow:rgba(212,149,43,.12);
  --red:#c44035;--red-dim:rgba(196,64,53,.07);
  --border:rgba(236,232,222,.05);--border-h:rgba(212,149,43,.22);
  --r:8px;--r2:12px;
  --ease:cubic-bezier(.25,.46,.45,.94);--ease-out:cubic-bezier(0,0,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --sidebar:200px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;overflow-x:hidden}
::selection{background:var(--amber);color:var(--bg)}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--amber);border-radius:3px}
.fr-t,.en-t{display:none}

/* ═══════ ANIMATED BACKGROUND ═══════ */
.bg-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.03;will-change:transform;animation:orb 25s ease-in-out infinite alternate}
.bg-orb.o1{width:50vw;height:50vw;max-width:600px;max-height:600px;background:#d4952b;top:-10%;left:-8%;animation-duration:22s}
.bg-orb.o2{width:40vw;height:40vw;max-width:500px;max-height:500px;background:#e86a30;bottom:-8%;right:-6%;animation-delay:-9s;animation-duration:28s}
.bg-orb.o3{width:30vw;height:30vw;max-width:400px;max-height:400px;background:#eaad40;top:45%;left:45%;animation-delay:-16s;animation-duration:32s}
@keyframes orb{
  0%{transform:translate(0,0) scale(1)}25%{transform:translate(30px,-20px) scale(1.08)}
  50%{transform:translate(-15px,35px) scale(.92)}75%{transform:translate(20px,10px) scale(1.04)}
  100%{transform:translate(-10px,-15px) scale(.97)}
}
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.015;
  background-image:linear-gradient(rgba(212,149,43,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(212,149,43,.3) 1px,transparent 1px);
  background-size:70px 70px}
.bg-particles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-p{position:absolute;width:2px;height:2px;background:var(--amber);border-radius:50%;opacity:0;animation:particle 8s linear infinite}
@keyframes particle{0%{opacity:0;transform:translateY(100vh) scale(0)}10%{opacity:.15}90%{opacity:.15}100%{opacity:0;transform:translateY(-10vh) scale(1)}}

/* ═══════ NAV ═══════ */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:52px;padding:0 24px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid transparent;transition:background .35s,border-color .35s}
nav.sc{background:rgba(9,9,10,.95);backdrop-filter:blur(14px);border-bottom-color:var(--border)}
.nav-left{position:absolute;left:24px;display:flex;align-items:center}
.nav-search{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:8px 14px;transition:border-color .3s,box-shadow .3s;width:260px}
.nav-search:focus-within{border-color:var(--amber);box-shadow:0 0 12px rgba(212,149,43,.1)}
.nav-search svg{width:14px;height:14px;color:var(--dim);flex-shrink:0}
.nav-search input{background:none;border:none;outline:none;color:var(--text);font-family:'Inter',sans-serif;font-size:13px;width:100%;font-weight:400}
.nav-search input::placeholder{color:var(--dim);font-style:italic}
.nav-title{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:var(--text);text-decoration:none}
.nav-title .dot{color:var(--amber)}
.nav-right{position:absolute;right:24px;display:flex;align-items:center;gap:8px}
.nav-stat{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--dim);letter-spacing:.06em}
.nav-stat b{color:var(--amber)}
.lang{display:flex;border:1px solid var(--border);border-radius:100px;overflow:hidden}
.lb{font-family:'JetBrains Mono',monospace;font-size:8px;padding:3px 8px;border:none;background:none;color:var(--dim);cursor:pointer;transition:all .15s}
.lb.on{background:var(--amber);color:var(--bg);font-weight:500}

/* ═══════ LAYOUT ═══════ */
.main{display:flex;min-height:100vh;padding-top:52px;position:relative;z-index:1}

/* ═══════ SIDEBAR ═══════ */
.sidebar{width:var(--sidebar);flex-shrink:0;position:sticky;top:48px;height:calc(100vh - 52px);overflow-y:auto;padding:20px 16px;border-right:1px solid var(--border);scrollbar-width:none;display:flex;flex-direction:column}
.sidebar::-webkit-scrollbar{display:none}
.sb-label{font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim2);margin-bottom:6px;padding-left:8px}
.filter-list{display:flex;flex-direction:column;gap:1px;margin-bottom:16px}
.filter-item{display:flex;align-items:center;justify-content:space-between;padding:7px 8px;border-radius:var(--r);background:none;border:none;color:var(--dim);font-family:'Inter',sans-serif;font-size:12px;cursor:pointer;transition:all .15s;width:100%;text-align:left}
.filter-item:hover{background:rgba(236,232,222,.03);color:var(--text)}
.filter-item.active{background:var(--amber-dim);color:var(--amber);font-weight:500}
.fi-count{font-family:'JetBrains Mono',monospace;font-size:8px;opacity:.4}
.filter-item.active .fi-count{opacity:.8}
.sb-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.sb-stat{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);padding:2px 0}
.sb-stat b{color:var(--text);font-weight:500}

/* ═══════ CONTENT ═══════ */
.content{flex:1;min-width:0}
.hero{padding:24px 28px 16px;border-bottom:1px solid var(--border)}
.hero-eye{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:5px;opacity:0;animation:fadeUp .5s var(--ease-out) .1s forwards}
.hero-h{font-family:'Playfair Display',serif;font-size:clamp(26px,4vw,48px);font-weight:800;line-height:.92;opacity:0;animation:fadeUp .6s var(--ease-out) .15s forwards}
.hero-h em{font-style:italic;color:var(--amber)}
.hero-p{max-width:380px;margin-top:6px;font-size:12px;line-height:1.55;color:var(--dim);font-weight:300;opacity:0;animation:fadeUp .6s var(--ease-out) .25s forwards}
.hero-p strong{color:var(--text);font-weight:500}
.hero-rule{height:2px;background:var(--amber);width:28px;margin-top:10px;opacity:0;animation:fadeUp .4s var(--ease-out) .35s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ═══════ MOODBOARD GRID — dense packing ═══════ */
.grid-wrap{padding:16px 28px 80px}
.moodboard{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;grid-auto-flow:dense;gap:10px}
.game-card.sz-w{grid-column:span 2}
.game-card.sz-t{grid-row:span 2}
.game-card.sz-b{grid-column:span 2;grid-row:span 2}

/* ═══════ GAME CARD ═══════ */
.game-card{border-radius:var(--r2);border:1px solid var(--border);background:var(--bg2);overflow:hidden;display:flex;flex-direction:column;position:relative;cursor:pointer;
  opacity:0;transform:translateY(14px) scale(.97);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),border-color .3s,box-shadow .4s}
.game-card.visible{opacity:1;transform:translateY(0) scale(1)}
.game-card:hover{border-color:var(--border-h);box-shadow:0 6px 35px var(--amber-glow),0 18px 45px rgba(0,0,0,.45);transform:translateY(-3px) scale(1.01)!important;z-index:10}
.game-card:nth-child(1){transition-delay:.02s}.game-card:nth-child(2){transition-delay:.06s}
.game-card:nth-child(3){transition-delay:.10s}.game-card:nth-child(4){transition-delay:.14s}
.game-card:nth-child(5){transition-delay:.18s}.game-card:nth-child(6){transition-delay:.22s}
.game-card:nth-child(7){transition-delay:.26s}.game-card:nth-child(8){transition-delay:.30s}
.game-card:nth-child(9){transition-delay:.34s}.game-card:nth-child(10){transition-delay:.38s}
.game-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--amber),var(--amber-l));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);z-index:6}
.game-card:hover::after{transform:scaleX(1)}
.gc-vis{flex:1;min-height:0;position:relative;overflow:hidden}
.gc-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s var(--ease)}
.game-card:hover .gc-bg{transform:scale(1.05)}
.gc-vis::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,10,0) 10%,rgba(9,9,10,.6) 80%,rgba(9,9,10,.92) 100%);z-index:1;pointer-events:none}
.gc-vis::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(110deg,transparent 40%,rgba(212,149,43,.05) 50%,transparent 60%);opacity:0;transition:opacity .2s}
.game-card:hover .gc-vis::before{opacity:1;animation:shimmer 1s ease forwards}
@keyframes shimmer{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.gc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(212,149,43,.08);border:1.5px solid rgba(212,149,43,.3);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:all .3s var(--spring)}
.gc-play svg{width:12px;height:12px;fill:var(--amber);margin-left:2px}
.game-card:hover .gc-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.gc-badge{position:absolute;top:7px;z-index:3;font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:4px;backdrop-filter:blur(4px)}
.gc-badge.left{left:7px;background:rgba(9,9,10,.65);color:var(--dim)}
.gc-badge.right{right:7px;background:rgba(196,64,53,.1);border:1px solid rgba(196,64,53,.2);color:var(--red)}
.gc-body{padding:6px 10px 4px;flex-shrink:0}
.gc-meta{display:flex;align-items:center;gap:5px;margin-bottom:2px}
.gc-type{font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);font-weight:500}
.gc-dot{width:2px;height:2px;border-radius:50%;background:var(--dim2)}
.gc-pl{font-family:'JetBrains Mono',monospace;font-size:7px;color:var(--dim)}
.gc-title{font-family:'Playfair Display',serif;font-size:14px;font-weight:700;line-height:1.15;margin-bottom:1px}
.gc-desc{font-size:10px;color:var(--dim);line-height:1.4;font-weight:300;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gc-foot{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;border-top:1px solid var(--border);flex-shrink:0}
.gc-stats{display:flex;gap:8px}
.gc-st{font-family:'JetBrains Mono',monospace;font-size:7px;color:var(--dim);display:flex;align-items:center;gap:2px}
.gc-st svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.8}
.gc-st.hot{color:var(--amber)}
.gc-acts{display:flex;gap:5px;align-items:center}
.gc-like{width:30px;height:30px;border-radius:7px;border:1.5px solid rgba(212,149,43,.2);display:flex;align-items:center;justify-content:center;color:var(--dim);background:rgba(212,149,43,.04);cursor:pointer;transition:all .2s var(--spring);padding:0;z-index:4;position:relative}
.gc-like svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;transition:all .2s var(--spring)}
.gc-like:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-dim);transform:scale(1.1)}
.gc-like.on{border-color:var(--amber);color:var(--amber);background:var(--amber-dim);box-shadow:0 0 10px rgba(212,149,43,.15)}
.gc-like.on svg{fill:var(--amber);stroke:var(--amber)}
.gc-like.pop svg{animation:pop .35s var(--spring)}
.gc-fav{width:30px;height:30px;border-radius:7px;border:1.5px solid rgba(196,64,53,.15);display:flex;align-items:center;justify-content:center;color:var(--dim);background:rgba(196,64,53,.04);cursor:pointer;transition:all .2s var(--spring);padding:0;z-index:4;position:relative}
.gc-fav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;transition:all .2s var(--spring)}
.gc-fav:hover{border-color:var(--red);color:var(--red);background:var(--red-dim);transform:scale(1.1)}
.gc-fav.on{border-color:var(--red);color:var(--red);background:var(--red-dim);box-shadow:0 0 10px rgba(196,64,53,.15)}
.gc-fav.on svg{fill:var(--red);stroke:var(--red)}
.gc-fav.pop svg{animation:pop .35s var(--spring)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.gc-like.pop::after,.gc-fav.pop::after{content:'';position:absolute;inset:-4px;border-radius:9px;border:1.5px solid currentColor;opacity:0;animation:ring .4s ease-out}
@keyframes ring{0%{transform:scale(.5);opacity:.6}100%{transform:scale(1.4);opacity:0}}
.gc-arr{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--dim);transition:all .2s var(--spring)}
.game-card:hover .gc-arr{background:var(--amber);border-color:var(--amber);color:var(--bg);transform:rotate(-45deg)}
.gc-arr svg{width:10px;height:10px}

/* ═══════ AGE GATE ═══════ */
.age-gate{position:fixed;inset:0;z-index:6000;background:rgba(9,9,10,.97);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.age-gate.open{opacity:1;pointer-events:all}
.ag-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:36px;text-align:center;max-width:320px;width:90%;transform:scale(.88);transition:transform .35s var(--spring)}
.age-gate.open .ag-box{transform:scale(1)}
.ag-icon{width:44px;height:44px;border-radius:50%;border:2px solid var(--red);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.ag-icon svg{width:20px;height:20px;fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round}
.ag-name{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--amber);letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:8px}
.ag-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;margin-bottom:3px}
.ag-sub{font-size:11px;color:var(--dim);line-height:1.45;margin-bottom:18px}
.ag-actions{display:flex;gap:12px;justify-content:center}
.ag-btn{width:46px;height:46px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;background:none;cursor:pointer;transition:all .2s var(--spring)}
.ag-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ag-btn.yes{color:var(--amber);border-color:rgba(212,149,43,.2)}
.ag-btn.yes:hover{background:var(--amber);color:var(--bg);border-color:var(--amber);transform:scale(1.08)}
.ag-btn.no{color:var(--red);border-color:rgba(196,64,53,.2)}
.ag-btn.no:hover{background:var(--red);color:var(--bg);border-color:var(--red);transform:scale(1.08)}

/* ═══════ GAME MODAL — normal cursor for WebGL ═══════ */
.game-modal{position:fixed;inset:0;z-index:7000;background:rgba(9,9,10,.98);backdrop-filter:blur(18px);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;
  cursor:auto!important}
.game-modal *{cursor:auto!important}
.game-modal .gm-x{cursor:pointer!important}
.game-modal.open{opacity:1;pointer-events:all}
.gm-head{display:flex;align-items:center;justify-content:space-between;width:min(94vw,1080px);margin-bottom:6px}
.game-modal.portrait .gm-head{width:min(45vh,400px)}
.gm-t{font-family:'Playfair Display',serif;font-size:13px;font-weight:600;color:var(--amber)}
.gm-x{width:36px;height:36px;border-radius:8px;border:1px solid rgba(212,149,43,.3);background:rgba(212,149,43,.06);color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 0 12px rgba(212,149,43,.08);flex-shrink:0}
.gm-x:hover{background:var(--amber);color:var(--bg);border-color:var(--amber);transform:rotate(90deg) scale(1.08);box-shadow:0 0 20px rgba(212,149,43,.25)}
.gm-frame{width:min(94vw,1080px);aspect-ratio:16/9;border-radius:var(--r2);overflow:hidden;border:1px solid var(--border);background:var(--bg3);position:relative}
/* ── Portrait mode (set per game in admin) ── */
.game-modal.portrait .gm-frame{aspect-ratio:9/16;width:min(45vh,400px);max-height:85vh}
.gm-frame iframe{width:100%;height:100%;border:none}
.gm-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px}
.gm-ph .mono{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.1em;color:var(--amber);text-transform:uppercase}
.gm-ph .ttl{font-family:'Playfair Display',serif;font-size:clamp(18px,3vw,32px);font-weight:700;color:var(--text);opacity:.18}
.gm-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--bg3);z-index:2;transition:opacity .35s}
.gm-loader.done{opacity:0;pointer-events:none}
/* ── Mobile portrait screen ── */
@media(max-width:768px){
  .game-modal{justify-content:flex-start;padding:0}
  .game-modal.open{display:flex}
  .gm-head{width:100%;margin-bottom:0;padding:10px 14px;background:rgba(9,9,10,.96);border-bottom:1px solid var(--border);flex-shrink:0;position:relative;z-index:3}
  .gm-t{font-size:12px}
  .gm-x{width:40px;height:40px;font-size:18px;border-radius:10px;border:1px solid rgba(212,149,43,.35);background:rgba(212,149,43,.1);color:var(--amber);box-shadow:0 0 16px rgba(212,149,43,.12)}
  .gm-x:active{background:var(--amber);color:var(--bg);transform:scale(.9)}
  /* Landscape game on portrait phone: centered with side margins, not edge-to-edge */
  .gm-frame{width:calc(100% - 24px);aspect-ratio:16/9;max-height:calc(100dvh - 80px);border-radius:8px;border:1px solid var(--border);margin:auto}
  /* Portrait game on portrait phone: fullscreen */
  .game-modal.portrait .gm-frame{flex:1;max-height:none;margin:0;width:100%;aspect-ratio:auto;border-radius:0;border:none}
}
/* ── Mobile landscape screen (phone turned sideways) ── */
@media(max-width:768px) and (orientation:landscape){
  .game-modal{padding:env(safe-area-inset-top,60px) env(safe-area-inset-right,20px) env(safe-area-inset-bottom,60px) env(safe-area-inset-left,20px)}
  .gm-head{padding:6px 12px}
  /* Landscape game on landscape phone: slight margins so browser chrome doesn't clip */
  .gm-frame{width:60%;max-height:calc(92dvh - 40px - env(safe-area-inset-top,100px) - env(safe-area-inset-bottom,100px));aspect-ratio:9/9;border-radius:6px;margin:auto;}
  /* Portrait game on landscape phone: constrained by height */
  .game-modal.portrait .gm-frame{flex:none;width:auto;height:calc(92dvh - 40px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));aspect-ratio:9/16;max-height:none;border-radius:6px;margin:auto;align-self:center}
}

/* ═══════ EMPTY ═══════ */
.empty{display:none;flex-direction:column;align-items:center;padding:50px 16px;text-align:center;gap:6px}
.empty.show{display:flex}
.empty h3{font-family:'Playfair Display',serif;font-size:16px;font-weight:500;color:var(--dim)}

/* ═══════ FOOTER ═══════ */
footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.ft-c{font-family:'JetBrains Mono',monospace;font-size:7px;color:var(--dim2)}
.ft-l{font-family:'Playfair Display',serif;font-size:13px;font-weight:700;color:var(--text);text-decoration:none}
.ft-l .dot{color:var(--amber)}
.ft-port{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;transition:all .2s}
.ft-port:hover{color:var(--amber);border-bottom-color:var(--amber)}

/* ═══════ FAB ═══════ */
.fab{display:none;position:fixed;z-index:2000;width:50px;height:50px;border-radius:50%;background:var(--amber);color:var(--bg);border:none;cursor:grab;
  box-shadow:0 4px 20px var(--amber-glow),0 2px 10px rgba(0,0,0,.4);align-items:center;justify-content:center;touch-action:none;user-select:none;
  transition:left .4s var(--spring),top .4s var(--spring),border-radius .3s,box-shadow .3s}
.fab.dragging{cursor:grabbing;border-radius:38%;box-shadow:0 8px 30px var(--amber-glow);transition:border-radius .2s,box-shadow .2s!important}
.fab .fab-bars,.fab .fab-x{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:opacity .25s,transform .25s}
.fab .fab-bars span{display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px}
.fab .fab-x{opacity:0;transform:rotate(-45deg) scale(.7)}
.fab.open .fab-bars{opacity:0;transform:rotate(45deg) scale(.7)}
.fab.open .fab-x{opacity:1;transform:rotate(0) scale(1)}
.fab .fab-x span:nth-child(1){position:absolute;width:16px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.fab .fab-x span:nth-child(2){position:absolute;width:16px;height:1.5px;background:currentColor;transform:rotate(-45deg)}
.mob-drawer{display:none;position:fixed;z-index:1500;background:rgba(9,9,10,.96);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r2);padding:14px;width:190px;max-height:70vh;overflow-y:auto;opacity:0;pointer-events:none;transform:scale(.85);transition:all .3s var(--spring)}
.mob-drawer.open{opacity:1;pointer-events:all;transform:scale(1)}
.mob-drawer .md-label{font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim2);margin-bottom:5px}
.md-list{display:flex;flex-direction:column;gap:1px}
.md-item{display:flex;align-items:center;justify-content:space-between;padding:9px 8px;border-radius:var(--r);background:none;border:none;color:var(--dim);font-family:'Inter',sans-serif;font-size:13px;cursor:pointer;transition:all .15s;width:100%;text-align:left}
.md-item:active{background:rgba(236,232,222,.04);color:var(--text)}
.md-item.active{background:var(--amber-dim);color:var(--amber);font-weight:500}
.md-count{font-family:'JetBrains Mono',monospace;font-size:8px;opacity:.4}
.md-item.active .md-count{opacity:.8}

/* ═══════ RESPONSIVE ═══════ */
@media(max-width:1000px){
  :root{--sidebar:0px}
  .sidebar{display:none}.fab{display:flex}.mob-drawer{display:block}
  nav{padding:0 14px}.nav-left{left:14px}.nav-right{right:14px}
  .nav-search{width:180px}
  .hero{padding:18px 16px 12px}
  .grid-wrap{padding:12px 12px 80px}
  .moodboard{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;gap:8px}
  .game-card.sz-b{grid-row:span 1}
  footer{padding:12px 14px}
}
@media(max-width:600px){
  nav{height:48px}.nav-title{font-size:14px}
  .nav-search{width:110px;padding:6px 10px}.nav-search input{font-size:11px}
  .nav-search svg{width:12px;height:12px}
  .nav-stat{display:none}
  .hero{padding:12px 12px 10px}.hero-h{font-size:clamp(22px,7vw,30px)}.hero-p{font-size:10.5px}
  .grid-wrap{padding:8px 8px 80px}
  .moodboard{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;gap:6px}
  .gc-body{padding:4px 7px 3px}.gc-title{font-size:11.5px}
  .gc-desc{font-size:8px;-webkit-line-clamp:1}
  .gc-meta{margin-bottom:1px}.gc-type,.gc-pl{font-size:6px}
  .gc-foot{padding:4px 7px}.gc-st{font-size:6px}.gc-st svg{width:7px;height:7px}
  .gc-like,.gc-fav{width:24px;height:24px;border-radius:5px}
  .gc-like svg,.gc-fav svg{width:12px;height:12px}
  .gc-arr{width:20px;height:20px;border-radius:5px}.gc-arr svg{width:8px;height:8px}
  .gc-badge{font-size:5px;padding:1.5px 4px;top:5px}
  .gc-play{width:26px;height:26px}.gc-play svg{width:9px;height:9px}
  footer{flex-direction:column;gap:4px;text-align:center;padding:10px}
}