* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#0d1422; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { overscroll-behavior:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#gameShell { position:fixed; inset:0; overflow:hidden; background:#101827; }
#game { width:100%; height:100%; display:block; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

#hud { position:absolute; inset:0; pointer-events:none; color:white; text-shadow:0 2px 8px rgba(0,0,0,.65); }
#score { position:absolute; left:max(14px,env(safe-area-inset-left)); top:max(12px,env(safe-area-inset-top)); font-size:clamp(24px,4vw,42px); line-height:1; font-weight:900; letter-spacing:.02em; }
#combo { position:absolute; left:max(14px,env(safe-area-inset-left)); top:calc(max(12px,env(safe-area-inset-top)) + 46px); font-size:clamp(13px,2vw,20px); font-weight:800; min-height:1.2em; }
.hudBtn { pointer-events:auto; position:absolute; top:max(10px,env(safe-area-inset-top)); width:42px; height:42px; border:0; border-radius:50%; color:white; background:rgba(10,18,30,.48); backdrop-filter:blur(6px); font-size:20px; font-weight:800; }
#muteBtn { right:calc(max(10px,env(safe-area-inset-right)) + 50px); }
#pauseBtn { right:max(10px,env(safe-area-inset-right)); }
.hudBtn:active { transform:scale(.94); }

.overlay { position:absolute; inset:0; display:grid; place-items:center; z-index:20; background:rgba(5,10,18,.38); backdrop-filter:blur(4px); }
.overlay.hidden { display:none; }
.panel { min-width:min(92vw,540px); padding:28px 32px; border-radius:24px; text-align:center; color:white; background:rgba(15,25,42,.88); border:1px solid rgba(255,255,255,.12); box-shadow:0 20px 60px rgba(0,0,0,.34); }
.panel.compact { min-width:min(84vw,330px); }
.panel h1,.panel h2 { margin:0 0 16px; line-height:1; }
.panel h1 { font-size:clamp(34px,7vw,64px); letter-spacing:.025em; }
.panel h2 { font-size:clamp(28px,6vw,42px); }
.panel p { margin:0 0 20px; opacity:.9; font-weight:700; line-height:1.6; }
.panel button { min-width:120px; padding:12px 20px; border:0; border-radius:999px; background:#8be14c; color:#10220a; font:inherit; font-weight:900; font-size:18px; box-shadow:0 8px 22px rgba(0,0,0,.2); }
.panel button:active { transform:translateY(1px) scale(.98); }
.panelActions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.panel button.secondary { background:rgba(255,255,255,.14); color:white; border:1px solid rgba(255,255,255,.18); box-shadow:none; }
.finalScore { font-size:clamp(42px,10vw,72px); font-weight:950; line-height:1; margin:8px 0 8px; }
.bestScore { font-size:14px; opacity:.72; min-height:1.3em; margin-bottom:18px; }


#touchHint { display:none; }
@media (any-pointer:coarse) {
  #desktopHint { display:none; }
  #touchHint { display:block; }
  #score { top:max(10px,env(safe-area-inset-top)); }
}
@media (max-height:480px) {
  .panel { padding:20px 24px; }
  .panel p { margin-bottom:14px; }
}


/* v0.6.1 scoring/report polish */
#debugStatus { position:absolute; right:max(14px,env(safe-area-inset-right)); top:60px; padding:5px 9px; border-radius:10px; background:rgba(6,15,28,.66); font:800 11px/1.2 ui-monospace,monospace; letter-spacing:.04em; opacity:0; }
#debugStatus.show { opacity:1; }
.tinyHint { font-size:.78em; opacity:.7; }
.reportPanel { width:min(94vw,720px); max-height:92vh; overflow:auto; touch-action:pan-y; -webkit-overflow-scrolling:touch; text-align:left; padding:24px 28px 22px; }
.reportPanel h2 { text-align:center; margin-bottom:10px; }
.reportKicker { text-align:center; font-size:12px; font-weight:950; letter-spacing:.18em; opacity:.66; margin-bottom:6px; }
.reportScoreRow { display:flex; align-items:end; justify-content:center; gap:28px; margin-bottom:14px; text-align:center; }
.reportLabel { display:block; text-transform:uppercase; font-size:11px; font-weight:900; letter-spacing:.12em; opacity:.66; }
.reportScoreRow .finalScore { margin:4px 0 0; }
.reportScoreRow .bestScore { margin:0 0 8px; min-width:130px; }
.runReport { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; margin:12px 0 14px; }
.reportStat { display:flex; justify-content:space-between; gap:12px; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.07); font-weight:750; }
.reportStat b { font-variant-numeric:tabular-nums; white-space:nowrap; }
.reportStat.wide { grid-column:1/-1; }
.careerReport { margin:8px 0 18px; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.16); font-size:12px; line-height:1.55; opacity:.86; }
.reportPanel > button { display:block; margin:0 auto; }
@media (max-width:560px){ .runReport{grid-template-columns:1fr;} .reportStat.wide{grid-column:auto;} .reportScoreRow{gap:12px;} .reportPanel{padding:20px 18px;} }

/* v0.6.4 live run metrics + prominent incident metrics */
#runMetrics { position:absolute; left:max(14px,env(safe-area-inset-left)); top:calc(max(12px,env(safe-area-inset-top)) + 43px); display:flex; gap:12px; align-items:center; font-size:clamp(10px,1.45vw,14px); font-weight:900; letter-spacing:.08em; }
#runMetrics span { display:flex; gap:5px; align-items:baseline; padding:4px 7px; border-radius:8px; background:rgba(9,18,31,.36); backdrop-filter:blur(4px); }
#runMetrics b { font-size:1.12em; letter-spacing:0; font-variant-numeric:tabular-nums; }
#combo { top:calc(max(12px,env(safe-area-inset-top)) + 76px); }
.reportScoreRow { align-items:stretch; gap:10px; }
.heroMetric { flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); }
.heroMetric.scoreMetric { flex:1.25 1 0; background:rgba(139,225,76,.12); }
.heroValue { margin-top:8px; font-size:clamp(28px,6vw,48px); line-height:1; font-weight:950; font-variant-numeric:tabular-nums; }
.heroMetric .bestScore { margin:6px 0 0; min-height:0; }
@media (max-width:560px){ #runMetrics{gap:5px;flex-direction:column;align-items:flex-start;top:calc(max(10px,env(safe-area-inset-top)) + 38px);} #runMetrics span{padding:2px 5px;} #combo{top:calc(max(10px,env(safe-area-inset-top)) + 88px);} .reportScoreRow{display:grid;grid-template-columns:1fr 1fr;} .heroMetric.scoreMetric{grid-column:1/-1;} }

/* Chemisode Games + global score integration */
.gamesLink{display:inline-flex;align-items:center;justify-content:center;margin-top:12px;color:#d9edff;text-decoration:none;font-weight:900;font-size:13px}.gamesLink:hover{text-decoration:underline}.globalBoard{margin:14px 0 16px;padding:12px;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.09)}.globalBoardHead{display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.1em}.miniGlobalButton{min-width:34px!important;padding:6px 9px!important;font-size:14px!important;background:rgba(255,255,255,.12)!important;color:#fff!important;box-shadow:none!important}.catGlobalScores{display:grid;gap:5px;margin:9px 0}.catScoreRow{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border-radius:9px;background:rgba(255,255,255,.06);font-size:12px}.catScoreRow b{font-variant-numeric:tabular-nums}.catScoreStatus{min-height:18px;margin:7px 0;font-size:11px;opacity:.8}.reportBottomActions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}.reportBottomActions .gamesLink{margin-top:0}.scoreModal{z-index:35}.scoreModalPanel{width:min(92vw,430px)}.catNameSlots{display:flex;justify-content:center;gap:8px;margin:14px 0}.catNameSlot{display:grid;gap:4px;place-items:center;padding:5px;border-radius:12px;border:2px solid transparent}.catNameSlot.active{border-color:#8be14c;background:rgba(139,225,76,.08)}.catNameSlot button{min-width:48px!important;padding:5px!important;font-size:14px!important;background:rgba(255,255,255,.12)!important;color:#fff!important;box-shadow:none!important}.catNameValue{display:grid;place-items:center;width:50px;height:54px;border-radius:10px;background:#fff;color:#12200d;font:950 30px/1 ui-monospace,monospace}.catTurnstileWrap{display:grid;place-items:center;gap:6px;margin:10px 0;font-size:11px;opacity:.9}.catNameWarning{min-height:18px;font-size:12px;color:#ffd4d4}.globalBoard>button{margin-top:4px;font-size:14px;padding:9px 14px}.globalBoard>button:disabled{opacity:.5}.scoreModalPanel p{font-size:13px;line-height:1.45}@media(max-width:560px){.catNameSlots{gap:4px}.catNameSlot button{min-width:42px!important}.catNameValue{width:44px;height:48px;font-size:26px}.globalBoard{padding:10px}.catScoreRow{font-size:11px}}


/* Chemisode Games v2026.08.16.2 navigation + touch controls */
img,canvas,button,a{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.pauseGamesLink{display:flex;margin:12px auto 0;width:max-content}
.desktop-games-banner{display:none}
.mobileControls{display:none;position:absolute;z-index:16;inset:0;pointer-events:none}
.touchControl{pointer-events:auto;display:grid;place-items:center;align-content:center;gap:1px;border:1px solid rgba(255,255,255,.30);background:rgba(8,18,31,.58);color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.28);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);font:950 28px/1 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;touch-action:none;-webkit-tap-highlight-color:transparent}
.touchControl.pressed,.touchControl:active{transform:scale(.94);background:rgba(139,225,76,.78);color:#10220a;border-color:rgba(255,255,255,.70)}
.controlIcon{display:block;line-height:.95}.controlLabel{display:block;font-size:10px;line-height:1;letter-spacing:.08em}
.moveControls,.actionControls{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:10px;pointer-events:none}
.moveControls{left:max(16px,env(safe-area-inset-left))}.actionControls{right:max(16px,env(safe-area-inset-right))}
.moveControl{width:clamp(64px,18vw,76px);height:clamp(64px,18vw,76px);border-radius:22px;font-size:34px}
.pawControl{width:clamp(62px,17vw,70px);height:clamp(62px,17vw,70px);border-radius:50%;font-size:25px}
.jumpControl{width:clamp(74px,20vw,84px);height:clamp(74px,20vw,84px);border-radius:50%;font-size:28px;background:rgba(77,143,255,.68)}
.dropControl{display:none;position:absolute;left:50%;bottom:max(22px,calc(env(safe-area-inset-bottom) + 22px));transform:translateX(-50%);width:62px;height:52px;border-radius:18px;font-size:20px;background:rgba(255,255,255,.18)}
.dropControl.show{display:grid}.dropControl.show.pressed,.dropControl.show:active{transform:translateX(-50%) scale(.94)}
@media (min-width:901px) and (pointer:fine){
  .desktop-games-banner{position:fixed;z-index:60;top:8px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 11px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(9,18,31,.76);box-shadow:0 4px 14px rgba(0,0,0,.24);backdrop-filter:blur(8px);color:#fff;text-decoration:none;font:900 11px/1.1 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .desktop-games-banner:hover,.desktop-games-banner:focus-visible{background:#fff;color:#13233a;outline:none}
}
@media (any-pointer:coarse){
  .mobileControls.visible{display:block}
  #touchHint{font-size:13px;line-height:1.45;margin-bottom:16px}
  .pauseGamesLink{font-size:13px}
}
@media (any-pointer:coarse) and (orientation:landscape), (any-pointer:coarse) and (max-height:520px){
  .moveControls,.actionControls{bottom:max(10px,env(safe-area-inset-bottom));gap:8px}
  .moveControls{left:max(10px,env(safe-area-inset-left))}.actionControls{right:max(10px,env(safe-area-inset-right))}
  .moveControl{width:62px;height:62px;border-radius:19px;font-size:31px}
  .pawControl{width:58px;height:58px;font-size:22px}.jumpControl{width:68px;height:68px;font-size:25px}
  .dropControl{bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px));width:58px;height:48px}
  .controlLabel{font-size:9px}
}