*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#060610;--sf:#0e0e22;--cd:#14142e;--bd:#222248;--bd2:#2e2e58;--t1:#e4e4f8;--t2:#9898c0;--t3:#5e5e88;--ac:#4ade80;--cy:#22d3ee;--pk:#f472b6}
body{font-family:'Silkscreen',monospace;background:var(--bg);color:var(--t1);height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;user-select:none;-webkit-user-select:none}

.top{display:flex;flex-direction:column;padding:4px 8px;background:var(--sf);border-bottom:2px solid var(--bd);z-index:50;gap:2px;flex-shrink:0}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.top-main{min-height:22px}
.logo{display:flex;align-items:center;gap:6px;flex-shrink:0}
.logo-i{font-size:14px;animation:fl 3s ease-in-out infinite}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.logo h1{font-family:'Press Start 2P',monospace;font-size:9px;background:linear-gradient(90deg,#4ade80,#22d3ee,#a78bfa,#f472b6);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:grd 4s linear infinite}
@keyframes grd{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.nfo{display:flex;gap:8px;align-items:center;font-size:8px;color:var(--t3);flex-shrink:0}.nfo span{display:flex;align-items:center;gap:2px;white-space:nowrap}
.st{font-family:'JetBrains Mono',monospace;color:var(--t2);font-weight:700;font-size:9px}

/* ─── Flat scrollable control bar ─── */
.ctrls{display:flex;gap:3px;align-items:center;flex:1;padding:2px 0;position:relative}
.ctrls-scroll{display:flex;gap:3px;align-items:center;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:24px 0 2px;margin-top:-24px;flex:1}
.ctrls-scroll::-webkit-scrollbar{display:none}
.btn{padding:3px 7px;border:2px solid var(--bd);background:var(--cd);color:var(--t2);font-family:'Silkscreen',monospace;font-size:8px;cursor:pointer;transition:all .15s;white-space:nowrap;border-radius:3px;position:relative;flex-shrink:0}
.btn:hover{border-color:var(--ac);color:var(--ac)}.btn:active{transform:scale(.95)}.btn.on{border-color:var(--ac);color:var(--ac);background:#4ade8012}
.btn.scanning{border-color:var(--cy);color:var(--cy);animation:pul 1s infinite}
@keyframes pul{0%,100%{opacity:1}50%{opacity:.5}}
.btn .tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:4px 8px;background:var(--cd);border:1px solid var(--bd2);border-radius:4px;font-size:7px;color:var(--t2);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:999;font-family:'JetBrains Mono',monospace}
.btn:hover .tip{opacity:1}

.vp{flex:1;position:relative;overflow:hidden;cursor:grab;background:var(--bg)}
.vp.dragging{cursor:grabbing}
.vp canvas{display:block}
.game-tt{position:fixed;padding:6px 10px;background:var(--cd);border:1px solid var(--bd2);border-radius:5px;pointer-events:none;z-index:200;white-space:nowrap;box-shadow:0 4px 16px #000a;font-family:'JetBrains Mono',monospace}
.game-tt .tt-name{font-size:9px;font-weight:700;color:var(--t1);margin-bottom:2px;font-family:'Silkscreen',monospace}
.game-tt .tt-sub{font-size:8px;color:var(--t2)}.game-tt .tt-hint{font-size:6px;color:var(--t3);margin-top:3px}

.tick{background:var(--sf);border-top:2px solid var(--bd);padding:4px 10px;font-size:9px;color:var(--t2);display:flex;align-items:center;gap:8px;min-height:24px;z-index:50;flex-shrink:0}
.tick-lbl{color:var(--ac);font-family:'Press Start 2P',monospace;font-size:5px;white-space:nowrap}
.tick-txt{font-family:'JetBrains Mono',monospace;font-size:9px;animation:ts .4s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
@keyframes ts{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

.ipanel{position:fixed;right:8px;top:60px;width:320px;max-height:calc(100vh - 95px);max-height:calc(100dvh - 95px);overflow-y:auto;background:var(--sf);border:2px solid var(--bd);border-radius:6px;z-index:200;animation:pi .25s ease;box-shadow:0 12px 48px #000a;display:none}
.ipanel.open{display:block}
@keyframes pi{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
.ipanel-x{position:absolute;top:6px;right:6px;width:20px;height:20px;border:1px solid var(--bd);background:var(--cd);color:var(--t3);cursor:pointer;font-size:9px;display:flex;align-items:center;justify-content:center;border-radius:3px;z-index:10}
.ipanel-x:hover{border-color:#ef4444;color:#ef4444}
.ipanel-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:6px 6px 0 0}
.ipanel-av{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
.ipanel-name{font-family:'Press Start 2P',monospace;font-size:9px;line-height:1.3}
.ipanel-sub{font-size:8px;margin-top:2px}
.ipanel-badge{padding:2px 6px;border-radius:4px;font-size:7px;font-weight:700;white-space:nowrap}
.ipanel-act{display:flex;align-items:center;gap:6px;margin:6px 14px;padding:5px 8px;background:var(--cd);border-left:3px solid var(--ac);border-radius:0 4px 4px 0;font-size:8px}
.ipanel-act-text{color:var(--t2);font-family:'JetBrains Mono',monospace;font-style:italic}
.ipanel-tabs{display:flex;margin:6px 14px 0;border-bottom:2px solid var(--bd)}
.ipanel-tab{flex:1;padding:6px;border:none;background:none;color:var(--t3);font-family:'Silkscreen',monospace;font-size:8px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.ipanel-tab:hover{color:var(--t2)}.ipanel-tab.active{color:var(--ac);border-bottom-color:var(--ac)}
.ipanel-desc{font-size:9px;color:var(--t2);line-height:1.6;margin:8px 14px;padding:6px 8px;background:var(--cd);border-radius:4px;border:1px solid var(--bd);font-family:'JetBrains Mono',monospace}
.ipanel-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 14px 10px}
.ipanel-stat{padding:6px 8px;background:var(--cd);border:1px solid var(--bd);border-radius:4px}
.ipanel-lbl{display:block;font-size:6px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.ipanel-val{font-size:9px;color:var(--t1);font-family:'JetBrains Mono',monospace}
.bench-row{margin:0 14px 8px}.bench-hdr{display:flex;justify-content:space-between;margin-bottom:2px}
.bench-name{font-size:8px;color:var(--t2);font-family:'JetBrains Mono',monospace}
.bench-score{font-size:10px;font-family:'JetBrains Mono',monospace;font-weight:700}
.bench-bg{height:6px;background:var(--bd);border-radius:3px;overflow:hidden}.bench-fill{height:100%;border-radius:3px;transition:width .6s}
.bench-desc{font-size:6px;color:var(--t3);margin-top:1px}

.ov{position:fixed;inset:0;background:#000e;z-index:300;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.ov.open{display:flex}
.ov-pan{background:var(--sf);border:2px solid var(--bd);border-radius:6px;padding:16px;width:540px;max-width:94vw;max-height:85vh;max-height:85dvh;overflow-y:auto;animation:pi .25s ease;position:relative}
.ov-title{font-family:'Press Start 2P',monospace;font-size:9px;margin-bottom:14px;text-align:center;color:var(--ac)}
.pop-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.pop-card{padding:6px 8px;background:var(--cd);border:1px solid var(--bd);border-radius:4px;cursor:pointer;transition:all .15s;display:flex;gap:6px;align-items:center}
.pop-card:hover{border-color:var(--ac);transform:translateY(-1px)}
.bench-table{width:100%;border-collapse:collapse;font-size:8px;font-family:'JetBrains Mono',monospace}
.bench-table th{padding:4px 6px;background:var(--cd);border:1px solid var(--bd);font-size:6px;color:var(--t3);text-transform:uppercase;white-space:nowrap;position:sticky;top:0;z-index:3}
.bench-table td{padding:4px 6px;border:1px solid var(--bd);text-align:center;white-space:nowrap}.bench-table tr:hover td{background:var(--cd)}.bench-table td:first-child{text-align:left}

.toasts{position:fixed;top:55px;left:50%;transform:translateX(-50%);z-index:250;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.toast{background:linear-gradient(135deg,#ff69b418,#22d3ee18);border:2px solid var(--pk);border-radius:4px;padding:6px 14px;font-size:8px;color:var(--t1);text-align:center;animation:ti .5s ease;white-space:nowrap;font-family:'JetBrains Mono',monospace;backdrop-filter:blur(8px)}
@keyframes ti{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
.slog{position:fixed;left:8px;bottom:36px;width:320px;max-height:180px;overflow-y:auto;background:var(--sf);border:2px solid var(--bd);border-radius:6px;padding:8px 10px;z-index:200;font-family:'JetBrains Mono',monospace;font-size:8px;display:none}.slog.open{display:block}
.slog-t{font-family:'Press Start 2P',monospace;font-size:6px;color:var(--cy);margin-bottom:6px}
.slog-e{padding:2px 0;color:var(--t2);border-bottom:1px solid var(--bd);line-height:1.5}.slog-tm{color:var(--t3);margin-right:4px}
.sel-input{width:100%;padding:6px 8px;background:var(--cd);border:2px solid var(--bd);color:var(--t1);font-family:'JetBrains Mono',monospace;font-size:10px;border-radius:4px;outline:none;margin-top:4px}
.sel-input:focus{border-color:var(--ac)}
.sel-select{padding:5px 7px;background:var(--cd);border:2px solid var(--bd);color:var(--t1);font-family:'Silkscreen',monospace;font-size:8px;border-radius:4px;outline:none;cursor:pointer;width:100%}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}

/* ═══ LANDING ═══ */
#gameWrap{display:none;flex-direction:column;height:100vh;height:100dvh}
#gameWrap.active{display:flex}
#landing{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;transition:opacity .8s,transform .8s}
#landing.exit{opacity:0;transform:scale(1.05);pointer-events:none}
.land-bg{position:absolute;inset:0;overflow:hidden}
.land-star{position:absolute;background:#fff;border-radius:50%;animation:tw 2s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.85}}
.land-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15;animation:lglow 6s ease-in-out infinite alternate}
@keyframes lglow{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.2) translate(20px,-10px)}}
.land-glow.g1{width:300px;height:300px;background:#4ade80;top:-80px;left:-80px}
.land-glow.g2{width:280px;height:280px;background:#22d3ee;bottom:-60px;right:-60px;animation-delay:-3s}
.land-glow.g3{width:220px;height:220px;background:#a78bfa;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-1.5s}
.land-content{position:relative;z-index:2;text-align:center;max-width:580px;padding:0 20px;animation:landIn 1s ease .2s both}
@keyframes landIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.land-emoji{font-size:48px;margin-bottom:12px;animation:fl 3s ease-in-out infinite}
.land-title{font-family:'Press Start 2P',monospace;font-size:22px;line-height:1.3;margin-bottom:10px;background:linear-gradient(90deg,#4ade80,#22d3ee,#a78bfa,#f472b6);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:grd 4s linear infinite}
.land-sub{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--t2);line-height:1.7;margin-bottom:24px}
.land-sub span{color:var(--ac)}
.land-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;animation:landIn 1s ease .6s both}
.land-enter{padding:12px 28px;font-family:'Press Start 2P',monospace;font-size:11px;background:linear-gradient(135deg,#4ade80,#22d3ee);color:#060610;border:none;border-radius:8px;cursor:pointer;transition:all .2s;box-shadow:0 0 30px #4ade8044}
.land-enter:hover{transform:translateY(-2px) scale(1.03)}.land-enter:active{transform:scale(.97)}
.land-how{padding:12px 22px;font-family:'Silkscreen',monospace;font-size:10px;background:transparent;color:var(--t2);border:2px solid var(--bd2);border-radius:8px;cursor:pointer;transition:all .2s}
.land-how:hover{border-color:var(--t2);color:var(--t1)}
.land-footer{animation:landIn 1s ease .9s both;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-size:8px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.land-footer span{display:flex;align-items:center;gap:3px}
.land-skyline{position:absolute;bottom:0;left:0;right:0;height:100px;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:6px;opacity:.12}
.land-bld{background:#ffffff12;border-radius:3px 3px 0 0;border:1px solid #ffffff08;border-bottom:none}
#instrOv{position:fixed;inset:0;z-index:10000;background:#000d;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
#instrOv.open{display:flex}
.instr-pan{background:var(--sf);border:2px solid var(--bd);border-radius:10px;padding:20px;width:520px;max-width:94vw;max-height:85vh;max-height:85dvh;overflow-y:auto;animation:pi .3s ease;position:relative}
.instr-title{font-family:'Press Start 2P',monospace;font-size:11px;text-align:center;margin-bottom:16px;background:linear-gradient(90deg,#4ade80,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.instr-section{margin-bottom:14px}
.instr-h{font-family:'Silkscreen',monospace;font-size:10px;color:var(--ac);margin-bottom:6px}
.instr-p{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--t2);line-height:1.7}
.instr-p b{color:var(--t1)}
.instr-close{position:absolute;top:10px;right:10px;width:24px;height:24px;border:2px solid var(--bd);background:var(--cd);color:var(--t3);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;border-radius:4px}
.instr-close:hover{border-color:#ef4444;color:#ef4444}
.instr-got{display:block;margin:14px auto 0;padding:10px 28px;font-family:'Press Start 2P',monospace;font-size:9px;background:linear-gradient(135deg,#4ade80,#22d3ee);color:#060610;border:none;border-radius:6px;cursor:pointer}

/* ═══ RESPONSIVE ═══ */
/* Phone portrait */
@media(max-width:600px){
  .top{padding:3px 6px}
  .logo h1{font-size:7px}
  .nfo{font-size:7px;gap:4px}
  .nfo .st{font-size:8px}
  .btn{padding:2px 5px;font-size:7px}
  .ipanel{right:0;left:0;top:auto;bottom:30px;width:100%;max-height:50vh;border-radius:6px 6px 0 0;border-bottom:none}
  .ov-pan{width:100vw;max-width:100vw;max-height:92vh;border-radius:8px 8px 0 0;padding:12px}
  .slog{left:0;right:0;width:auto;bottom:30px;border-radius:6px 6px 0 0}
  .land-title{font-size:16px}.land-sub{font-size:10px}.land-emoji{font-size:36px}
  .land-footer{font-size:7px;gap:6px}
  .pop-grid{grid-template-columns:1fr}
  .bench-table{font-size:7px}.bench-table th,.bench-table td{padding:3px 4px}
  .tick{padding:3px 8px;min-height:20px}.tick-txt{font-size:8px}
  .toasts{width:92vw}.toast{font-size:7px;white-space:normal}
}
/* Phone landscape */
@media(max-height:500px){
  .top{padding:2px 6px;gap:1px}
  .top-main{min-height:16px}
  .logo-i{font-size:10px}.logo h1{font-size:6px}
  .nfo{font-size:6px}.nfo .st{font-size:7px}
  .btn{padding:2px 4px;font-size:6px}
  .ctrls{gap:2px}
  .tick{padding:2px 6px;min-height:16px}.tick-lbl{font-size:4px}.tick-txt{font-size:7px}
  .ipanel{top:40px;max-height:calc(100vh - 60px);width:280px}
  .ov-pan{max-height:92vh;padding:10px}
}
/* Tablet */
@media(min-width:601px) and (max-width:1024px){
  .btn{padding:3px 6px;font-size:8px}
}