*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#030201;touch-action:none;
  font-family:'Courier New',Courier,monospace;user-select:none;-webkit-user-select:none}
#cv{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none}

#hud{position:fixed;top:0;left:0;right:0;display:flex;align-items:flex-start;
  justify-content:space-between;gap:8px;
  padding:env(safe-area-inset-top,8px) 12px 8px;
  background:linear-gradient(to bottom,rgba(2,1,0,.93),transparent);
  pointer-events:none;z-index:20}
#hud-left{display:flex;flex-direction:column;gap:4px;pointer-events:auto}
#title{color:#d4900a;font-size:12px;letter-spacing:7px;text-shadow:0 0 16px #d4900a55}
#hud-btns{display:flex;gap:6px}
.hb{width:34px;height:28px;border-radius:3px;background:rgba(12,7,3,.92);
  border:1px solid #3a2408;color:#a07030;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;touch-action:manipulation;pointer-events:auto;transition:background .1s}
.hb:active,.hb:hover{background:#6a3010;color:#ffc060}
#score{display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:none}
.sc{display:flex;align-items:center;gap:5px;font-size:11px;letter-spacing:1px;font-weight:bold}
.sc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

#pauseInd{display:none;position:fixed;top:42px;left:50%;transform:translateX(-50%);
  color:#d4900a;font-size:11px;letter-spacing:6px;font-family:'Courier New',monospace;
  text-shadow:0 0 12px #d4900a88;pointer-events:none;z-index:25;opacity:.8}
#pauseInd.show{display:block}

#zoom{position:fixed;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 130px);
  display:flex;flex-direction:column;gap:6px;z-index:20}
.zb{width:40px;height:40px;border-radius:4px;background:rgba(12,7,3,.92);border:1px solid #3a2408;
  color:#a07030;font-size:20px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;touch-action:manipulation;transition:background .1s}
.zb:active,.zb:hover{background:#6a3010;color:#ffc060}
.zb.sm{font-size:10px}

#csheet{position:fixed;left:0;right:0;bottom:0;
  transform:translateY(100%);transition:transform .22s cubic-bezier(.22,1,.36,1);
  background:rgba(6,4,1,.98);border-top:1px solid #3a2406;z-index:30;
  padding:10px 14px calc(env(safe-area-inset-bottom,0px) + 14px)}
#csheet.open{transform:translateY(0)}
#csheet-lbl{color:#a07848;font-size:10px;letter-spacing:2px;margin-bottom:9px;text-align:center}
#csheet-btns{display:grid;grid-template-columns:repeat(4,1fr) 44px;gap:8px}
.cb{background:#0c0804;border:1px solid #5a3410;color:#d4900a;padding:12px 4px;border-radius:3px;
  cursor:pointer;font-family:'Courier New',monospace;font-size:14px;letter-spacing:1px;
  text-align:center;touch-action:manipulation;min-height:44px;transition:background .1s,color .1s}
.cb:active{background:#d4900a;color:#030201}
.cb.active{background:#3a1e04;border-color:#d4900a;color:#ffd070;box-shadow:0 0 8px #d4900a55}
.cb-x{border-color:#2a1006;color:#805030;font-size:18px}
.cb-x:active{background:#3a1806;color:#d4900a}

#rsheet{position:fixed;left:0;right:0;bottom:0;
  transform:translateY(100%);transition:transform .22s cubic-bezier(.22,1,.36,1);
  background:rgba(2,4,1,.98);border-top:1px solid #204808;z-index:31;
  padding:14px 18px calc(env(safe-area-inset-bottom,0px) + 14px)}
#rsheet.open{transform:translateY(0)}
#rsheet-title{color:#c8e020;font-size:10px;letter-spacing:4px;text-align:center;margin-bottom:2px}
#rsheet-sub{color:#78a838;font-size:9px;letter-spacing:2px;text-align:center;margin-bottom:12px}
.sl-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sl-lbl{color:#a0d048;font-size:10px;letter-spacing:2px;min-width:72px}
.sl-val{color:#c8e020;font-size:20px;font-weight:bold;min-width:28px;text-align:right}
#wslider{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:3px;
  outline:none;cursor:pointer;touch-action:manipulation}
#wslider::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;
  background:#c8e020;border:2px solid #020401;cursor:pointer;box-shadow:0 0 10px #c8e02099}
#wslider::-moz-range-thumb{width:30px;height:30px;border-radius:50%;
  background:#c8e020;border:2px solid #020401;cursor:pointer}
#rsheet-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:12px}
.rst{background:#050e02;border:1px solid #1a4008;border-radius:2px;padding:6px 2px;text-align:center}
.rst-v{color:#a0d020;font-size:15px;font-weight:bold;display:block}
.rst-l{color:#5a8028;font-size:7px;letter-spacing:1.5px;display:block;margin-top:1px}
#rsheet-btns{display:flex;gap:8px}
#rsheet-close{flex:1;background:#050e02;border:1px solid #1a4008;color:#90b848;
  padding:11px;cursor:pointer;font-family:'Courier New',monospace;font-size:11px;
  letter-spacing:2px;border-radius:2px;touch-action:manipulation;min-height:44px}
#rsheet-close:active{background:#507018;color:#020401}

#hint{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 80px);
  transform:translateX(-50%);background:rgba(6,4,1,.84);border:1px solid #2a1806;
  color:#907040;font-size:9px;letter-spacing:2px;padding:5px 12px;
  white-space:nowrap;pointer-events:none;border-radius:2px;z-index:10;transition:opacity .35s}
#hint.hide{opacity:0}

#ov{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);
  align-items:center;justify-content:center;flex-direction:column;gap:14px}
#ov h2{font-size:clamp(22px,6vw,40px);letter-spacing:7px}
#ov p{color:#a07840;letter-spacing:3px;font-size:11px;margin-top:2px}
#ov button{background:#0e0904;border:1px solid #6a4018;color:#a07030;
  padding:14px 36px;cursor:pointer;margin-top:8px;min-height:48px;border-radius:2px;
  font-family:'Courier New',monospace;font-size:14px;letter-spacing:2px;touch-action:manipulation}
#ov button:active{background:#a07030;color:#030201}

/* ═══ MENU ═══ */
#menu{position:fixed;inset:0;z-index:200;
  display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:max(env(safe-area-inset-top,20px),20px) 0 30px;
  background:radial-gradient(ellipse at center,#0c0803 0%,#020101 100%)}
#menu.hidden{display:none}
#menu-inner{max-width:400px;width:88%;display:flex;flex-direction:column;align-items:center;gap:16px;margin:auto}

.diff-toggle{display:flex;align-items:center;gap:8px;padding:5px 10px;width:100%;
  background:rgba(12,7,3,.5);border:1px solid #1a0f06;border-radius:3px;cursor:pointer;touch-action:manipulation}
.diff-toggle .dt-label{color:#b08050;font-size:9px;letter-spacing:1.5px;flex:1}
.diff-toggle .dt-sw{width:32px;height:18px;border-radius:9px;background:#1a0a04;border:1px solid #2a1806;
  position:relative;transition:background .15s;flex-shrink:0}
.diff-toggle .dt-sw::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;
  border-radius:50%;background:#3a2010;transition:all .15s}
.diff-toggle.on .dt-sw{background:#3a1e04;border-color:#d4900a}
.diff-toggle.on .dt-sw::after{left:16px;background:#d4900a}
.diff-toggle.on .dt-label{color:#d4a050}

.sl-menu-row{display:flex;align-items:center;gap:8px;padding:5px 10px;width:100%;
  background:rgba(12,7,3,.5);border:1px solid #1a0f06;border-radius:3px}
.sl-menu-row .sm-lbl{color:#b08050;font-size:9px;letter-spacing:1.5px;flex:1;min-width:80px}
.sl-menu-row .sm-val{color:#d4900a;font-size:13px;font-weight:bold;min-width:36px;text-align:right}
.mslider{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:2px;
  background:#1a0a04;outline:none;cursor:pointer;touch-action:manipulation}
.mslider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:#d4900a;border:2px solid #030201;cursor:pointer}
.mslider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:#d4900a;border:2px solid #030201;cursor:pointer}
#menu-title{color:#d4900a;font-size:clamp(20px,5vw,34px);letter-spacing:10px;
  text-shadow:0 0 30px #d4900a44;text-align:center}
#menu-sub{color:#806030;font-size:8px;letter-spacing:5px;margin-top:-12px}
.menu-section{width:100%;display:flex;flex-direction:column;gap:6px}
.menu-label{color:#a07040;font-size:8px;letter-spacing:3px;margin-bottom:2px}

.player-row{display:flex;align-items:center;gap:8px;padding:7px 10px;
  background:rgba(12,7,3,.6);border:1px solid #1a0f06;border-radius:3px}
.pr-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.pr-name{color:#b08050;font-size:11px;letter-spacing:2px;min-width:32px}
.pr-styles{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}

.sb{background:#0c0804;border:1px solid #2a1806;color:#a07840;
  padding:4px 7px;border-radius:2px;cursor:pointer;font-family:'Courier New',monospace;
  font-size:8px;letter-spacing:1px;touch-action:manipulation;transition:all .12s;white-space:nowrap}
.sb:hover{border-color:#5a3410}
.sb.active{background:#3a1e04;border-color:#d4900a;color:#ffd070;box-shadow:0 0 6px #d4900a22}
.sb.off-active{background:#0a0402;border-color:#3a1808;color:#5a2818;box-shadow:none}

#start-btn{background:#0e0904;border:2px solid #d4900a;color:#d4900a;
  padding:14px 44px;cursor:pointer;border-radius:3px;margin-top:6px;
  font-family:'Courier New',monospace;font-size:15px;letter-spacing:5px;
  touch-action:manipulation;transition:all .15s;text-shadow:0 0 12px #d4900a55}
#start-btn:hover{background:#1a0e04;box-shadow:0 0 20px #d4900a33}
#start-btn:active{background:#d4900a;color:#030201}