/* Hyperstition Engine — game page. Layers on top of style.css. */

.game-body{min-height:100vh}
.nav .here{color:var(--pink)}

.game-main{max-width:1240px;margin:0 auto;padding:28px 16px 0}

.game-head{text-align:center;margin-bottom:24px}
.game-head h1{font-size:clamp(26px,5.2vw,58px);line-height:1}
.tagline{color:var(--dim);margin-top:12px;font-size:14px}

.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.stage-col{min-width:0}

/* ---- HUD ---- */
.hud{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.hud-item{border:1px solid var(--line);background:var(--bg2);padding:8px 10px;min-width:0}
.hud-item label{display:block;color:var(--dim);font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-item b{font-family:var(--display);font-size:21px;line-height:1.3;display:block}
.hud-charge b{color:var(--pink)}
.integrity{display:flex;gap:6px;margin-top:7px}
.integrity i{width:16px;height:16px;border:2px solid var(--line);display:block}
.integrity i.on{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px var(--cyan)}

/* ---- stage ---- */
.stage-wrap{position:relative;border:1px solid var(--line);background:#000;line-height:0}
#stage{display:block;width:100%;max-width:900px;aspect-ratio:3/2;height:auto;margin:0 auto;touch-action:manipulation}

.overlay{position:absolute;inset:0;display:grid;place-content:center;gap:14px;text-align:center;
  background:rgba(0,0,0,.9);padding:24px;line-height:1.6}
/* display:grid above outranks the UA's [hidden]{display:none}, so a hidden
   overlay would still cover the stage and swallow clicks. Restore it. */
.overlay[hidden]{display:none}
.overlay h2{font-family:var(--display);font-size:clamp(20px,3.4vw,34px)}
.overlay p{font-size:14px;color:var(--dim);max-width:46ch;margin:0 auto}
.overlay .null{color:#ff2b4d}
.overlay .hint{font-size:12px}
.overlay .btn{justify-self:center}
kbd{border:1px solid var(--line);background:#000;padding:2px 7px;margin:0 2px;font-size:11px;color:var(--fg)}

.gameover h2{color:var(--pink)}
.go-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;margin:4px 0}
.go-stats div{border:1px solid var(--line);padding:8px}
.go-stats label{display:block;color:var(--dim);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.go-stats b{font-family:var(--display);font-size:19px}
.go-stats b.seed{font-family:var(--mono);font-size:13px;color:var(--dim);letter-spacing:.08em}
.go-stats .lost b{color:#ff2b4d}

.submit-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.submit-row input{background:#000;border:1px solid var(--line);color:var(--fg);font-family:var(--mono);
  padding:10px 12px;font-size:13px;min-width:190px}
.submit-row input:focus{outline:none;border-color:var(--cyan)}
.submit-msg{font-size:12px;color:var(--cyan);min-height:1.2em}

/* ---- controls ---- */
.lane-pads{display:none;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.lane-pads button{background:var(--bg2);border:1px solid var(--line);color:var(--fg);
  font-family:var(--display);font-weight:800;font-size:17px;padding:20px 0;cursor:pointer;touch-action:manipulation}
.lane-pads button:active{background:var(--pink);color:#000;border-color:var(--pink)}

.control-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:12px;align-items:stretch}
.bank-btn{display:block;width:100%;text-align:center}
.mute-btn{white-space:nowrap}
.bank-btn span{font-family:var(--mono);font-weight:400;font-size:11px;opacity:.7}
.bank-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:4px 4px 0 var(--line);border-color:var(--line);background:var(--line);color:var(--dim)}

/* ---- side panels ---- */
.side-col{display:grid;gap:14px;position:sticky;top:76px}
.panel{border:1px solid var(--line);background:var(--bg2);padding:16px}
.panel h3{font-family:var(--display);font-size:14px;color:var(--cyan);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.panel p{font-size:13px;margin-bottom:9px;color:#c9c9d4}
.panel p:last-child{margin-bottom:0}
.score-table{width:100%;font-size:12px}
.score-table th{width:auto;font-weight:400;color:var(--dim);padding:6px 0}
.score-table td{text-align:right;padding:6px 0;color:var(--fg)}

.board{list-style:none;counter-reset:none;font-size:13px}
.board li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);align-items:baseline}
.board li:last-child{border-bottom:none}
.board .rank{color:var(--pink);font-weight:700;flex:0 0 2.4ch}
.board .who{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .pts{color:var(--cyan);font-weight:700}
.board .empty{color:var(--dim);font-size:12px;display:block}

/* ---- earn ---- */
.earn{border-top:1px solid var(--line);margin-top:48px;padding:40px 0}
.earn h2{font-family:var(--display);font-size:clamp(22px,3.4vw,34px);margin-bottom:22px}
.earn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.earn-grid div{border:1px solid var(--line);background:var(--bg2);padding:18px}
.earn-grid h3{font-family:var(--display);font-size:14px;color:var(--cyan);margin-bottom:8px}
.earn-grid p{font-size:13px;color:#c9c9d4}
.earn-note{margin-top:20px;font-size:12px;color:var(--dim);max-width:76ch;line-height:1.7}

@media (max-width:1040px){
  .game-layout{grid-template-columns:minmax(0,1fr)}
  .side-col{position:static}
}
@media (max-width:760px){
  .hud{grid-template-columns:repeat(3,1fr)}
  .lane-pads{display:grid}
  .game-main{padding-top:18px}
  .overlay p{font-size:13px}
}
@media (hover:none){
  .lane-pads{display:grid}
}

/* ---- beat and state effects ---- */
.flash{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none;
  font-family:var(--display);font-weight:800;font-size:clamp(18px,3.2vw,34px);color:#fff;text-align:center;padding:0 24px;
  text-shadow:-3px 0 var(--pink),3px 0 var(--cyan);opacity:0;transition:opacity .15s}
.flash.show{opacity:1;animation:flashout .9s forwards}
@keyframes flashout{0%{opacity:1;transform:scale(1)}60%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1.08)}}
body.critical .stage-wrap{box-shadow:inset 0 0 80px rgba(255,43,77,.35);border-color:#ff2b4d}
body.critical .hud-item:last-child{border-color:#ff2b4d}

/* ---- phase 2: zones, fragments, run card ---- */
.banner{position:absolute;left:0;right:0;top:14%;text-align:center;pointer-events:none;
  font-family:var(--display);font-weight:800;font-size:clamp(14px,2.4vw,22px);letter-spacing:.18em;color:var(--cyan);
  text-shadow:0 0 18px var(--cyan);opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}
.banner.show{opacity:1;transform:none}
.offer h2{color:var(--cyan)}
.offer-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0;max-width:760px}
.offer-card{background:#000;border:1px solid var(--line);color:var(--fg);text-align:left;padding:14px;cursor:pointer;
  font-family:var(--mono);line-height:1.5;transition:.15s;position:relative}
.offer-card:hover,.offer-card:focus{border-color:var(--pink);transform:translateY(-2px);outline:none}
.offer-card .key{position:absolute;top:8px;right:10px;font-size:11px;color:var(--pink);border:1px solid var(--pink);padding:1px 6px}
.offer-card b{display:block;font-family:var(--display);font-size:13px;color:var(--cyan);margin-bottom:6px;padding-right:30px}
.offer-card p{font-size:12px;color:#c9c9d4;margin:0;max-width:none}
.run-card{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:760px;margin:2px 0 4px}
.run-card div{border:1px solid var(--line);padding:8px;text-align:left}
.run-card label{display:block;color:var(--dim);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.run-card b{font-family:var(--mono);font-size:12px;color:var(--fg)}
.lane-pads .fifth{display:none}
.lane-pads.five{grid-template-columns:repeat(5,1fr)}
.lane-pads.five .fifth{display:block}
.lane-pads.three{grid-template-columns:repeat(3,1fr)}
.lane-pads.three [data-lane="3"]{display:none}
@media (max-width:760px){
  .offer-list,.run-card{grid-template-columns:1fr}
  .offer-card{padding:10px}
}

/* ---- phase 3: daily, ghost, profile ---- */
.start-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.daily-hint code{color:var(--cyan)}
.daily-hint b{color:var(--fg)}
.ghost-line{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#ff2b4d;margin-bottom:8px;text-align:right}
.ghost-line.ahead{color:var(--cyan)}
.ghost-line[hidden]{display:none}
body.daily .stage-wrap{border-color:var(--cyan)}
.profile-link{display:inline-block;font-size:12px;color:var(--cyan);letter-spacing:.08em}
.profile-link[hidden]{display:none}

/* ---- phase 4 ---- */
.meltdown-note{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
body.meltdown-hour .meltdown-note{color:var(--pink)}
body.meltdown-hour .nav{border-bottom-color:var(--pink)}
#share-btn{margin-top:6px}
#share-btn[hidden]{display:none}

/* ---- phase 5: duel ---- */
.duel-line{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#ff2b4d;margin-bottom:8px;text-align:right}
#duel-board .who{font-size:12px}
#duel-board .pts{font-size:12px;color:var(--cyan)}

/* Handle field help and the live policy message. */
.handle-help{grid-column:1/-1;font-size:11px;color:var(--dim);line-height:1.6;margin-top:6px}
.submit-row input:invalid{border-color:var(--pink)}

/* Visible only to assistive technology. Not display:none, which would remove it
   from the accessibility tree along with everything else. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Controls reference. Collapsed by default so it does not crowd the stage, but
   present on the page rather than only on the start overlay. */
.controls{border:1px solid var(--line);background:var(--bg2);margin-bottom:14px}
.controls > summary{cursor:pointer;padding:10px 14px;font-size:12px;letter-spacing:.14em;color:var(--dim);list-style:none}
.controls > summary::-webkit-details-marker{display:none}
.controls > summary::before{content:"◢ ";color:var(--cyan);font-size:9px}
.controls[open] > summary{color:var(--cyan);border-bottom:1px solid var(--line)}
.keymap{padding:14px;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:13px}
.keymap dt{color:var(--cyan);white-space:nowrap}
.keymap dd{color:#cfcfd8;line-height:1.65}
.keymap kbd{display:inline-block;border:1px solid var(--line);border-bottom-width:2px;padding:1px 6px;
  font-family:var(--mono);font-size:11px;background:#000;color:var(--fg);margin-right:2px}
.keymap a{color:var(--cyan);border-bottom:1px solid var(--line)}
@media (max-width:560px){.keymap{grid-template-columns:1fr;gap:4px 0}.keymap dd{margin-bottom:10px}}