:root{
  --ink:#fff4d8; --dim:#d9b8e8; --accent:#38b6d8; --panel:rgba(16,10,28,.72);
  --edge:rgba(255,244,216,.24); --focus:#8ff0ff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#120a24;color:var(--ink);
  font-family:"Arial Rounded MT Bold","Trebuchet MS",Verdana,system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#stage{position:relative;width:100%;height:100%}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}

/* HUD */
#hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:10px;
  padding:12px clamp(10px,2vw,22px);pointer-events:none;z-index:5}
.hud-link,.hud-block,.hud-actions button{
  background:var(--panel);border:2px solid var(--edge);border-radius:14px;
  color:var(--ink);font-weight:900}
.hud-link{padding:9px 13px;font-size:13px;text-decoration:none;letter-spacing:.04em;pointer-events:auto}
.hud-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.hud-block{display:flex;flex-direction:column;align-items:center;padding:7px 14px;min-width:74px}
.hud-label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hud-value{font-size:21px;line-height:1.05}
.hud-combo{opacity:.35;transition:opacity .18s ease, transform .18s ease;transform:scale(.94)}
.hud-combo.active{opacity:1;transform:scale(1)}
#comboBox{border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.hud-actions{margin-left:auto;display:flex;gap:8px;pointer-events:auto}
.hud-actions button{width:42px;height:42px;display:grid;place-items:center;cursor:pointer}
.hud-actions button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* overlay */
#overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;
  width:min(560px,92vw);text-align:center;background:rgba(14,8,26,.86);
  border:3px solid var(--edge);border-radius:28px;padding:30px 26px 24px;
  box-shadow:0 18px 60px rgba(0,0,0,.6)}
#overlay.hidden{display:none}
#ovTitle{margin:0;font-size:clamp(44px,9vw,84px);line-height:.85;letter-spacing:.02em;
  text-shadow:5px 5px 0 rgba(56,182,216,.35),10px 10px 0 rgba(0,0,0,.35)}
#ovTag{margin:14px 0 0;color:#f3ddbb;font-weight:700;font-size:clamp(15px,2.4vw,19px);line-height:1.3}
#ovBody{margin:14px 0 0;color:var(--dim);font-weight:700;line-height:1.45;font-size:15px;white-space:pre-line}
#ovBtn{margin-top:20px;border:3px solid rgba(0,0,0,.5);border-radius:18px;cursor:pointer;
  background:linear-gradient(var(--accent),#1c7291);color:#fff;padding:13px 34px 15px;
  font-family:inherit;font-size:23px;font-weight:900;letter-spacing:.03em;
  box-shadow:0 6px 0 rgba(0,0,0,.5)}
#ovBtn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
#ovHint{margin:14px 0 0;color:var(--dim);font-weight:700;font-size:13.5px}

/* in-game back affordance (bottom corner, thumb-reachable) */
#hubBackBtn{position:absolute;bottom:calc(12px + env(safe-area-inset-bottom));left:12px;z-index:5;
  padding:9px 13px;font-size:13px;text-decoration:none;font-weight:900;
  background:var(--panel);border:2px solid var(--edge);border-radius:14px;color:var(--ink)}
#hubBackBtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

@media(max-width:520px){
  .hud-block{min-width:58px;padding:5px 9px}
  .hud-value{font-size:17px}
  #hubBackBtn{display:none} /* the HUD link stays reachable at the top */
}