/* Mini Game — Swiss-poster HUD. Bone / ink / warm-gray / signal red. */
:root {
  --bone: #EDE8DF;
  --ink: #141414;
  --gray: #9F988C;
  --red: #E63324;
  --paper: #F7F4EE;
  --backdrop: #F4F1EA;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--backdrop);
  font-family: "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;
}
#stage { position: fixed; inset: 0; touch-action: none; isolation: isolate; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* condensed poster type helper */
.cond, .plate, .gp-word, .ft-word, .ti-word, .cp-word, .pp-word, .stamp, #divPlate, #tut, #restageBand span {
  font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase;
}

/* ------------------------------------------------- HUD */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.plate {
  background: var(--ink); color: var(--paper);
  padding: 6px 10px 5px; font-size: 17px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
#clockPlate { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; }
#heatWrap { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; display: flex; align-items: center; gap: 7px; }
#heatBar { width: 86px; height: 5px; background: rgba(20,20,20,.14); overflow: hidden; }
#heatBar i { display: block; height: 100%; width: 0%; background: var(--red); transition: width .12s linear; }
#heatPlate { min-width: 46px; text-align: center; }
#heatPlate.hot { background: var(--red); }
#divPlate {
  position: absolute; top: max(12px, calc(env(safe-area-inset-top) + 2px)); left: 50%; transform: translateX(-50%) scaleX(.78);
  color: var(--ink); opacity: .52; font-size: 12px; letter-spacing: .14em; white-space: nowrap;
}

/* fading TOP tutorial band */
#tut {
  position: absolute; top: max(42px, calc(env(safe-area-inset-top) + 32px)); left: 50%;
  transform: translateX(-50%);
  background: var(--paper); color: var(--ink);
  border-top: 3px solid var(--ink);
  padding: 7px 14px 6px; font-size: 14px; letter-spacing: .03em; white-space: nowrap;
  opacity: 0; transition: opacity .25s linear; max-width: 94vw;
}
#tut.out { transition: opacity .4s linear; }
#tut.on { opacity: 1; }
@media (max-width: 480px) { #tut { font-size: 12px; } }

/* stamps (flair toasts) */
#stamps { position: absolute; left: 50%; top: 31%; width: 0; }
.stamp {
  position: absolute; transform: translate(-50%, -50%);
  background: var(--ink); color: var(--paper);
  padding: 8px 14px 7px; font-size: 22px; white-space: nowrap;
  animation: slam .38s steps(2, end) both;
}
.stamp b { color: var(--red); font-weight: 900; margin-left: 8px; }
.stamp.gray { background: var(--gray); color: var(--paper); }
.stamp.red { background: var(--red); }
.stamp.fade { opacity: 0; transition: opacity .25s linear; }
@keyframes slam { 0% { transform: translate(-50%,-50%) scale(2.1); } 100% { transform: translate(-50%,-50%) scale(1); } }

/* placement climb glyph */
#glyph {
  position: absolute; left: 50%; bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px));
  transform: translateX(-50%); width: 148px; display: none;
}
#glyph.on { display: block; }
#glyph svg { width: 100%; height: auto; display: block; }

/* HUD buttons — MUST be pointer-events:auto (touch fall-through trap) */
.hbtn {
  position: absolute; bottom: max(12px, env(safe-area-inset-bottom));
  width: 56px; height: 44px; pointer-events: auto; cursor: pointer;
  background: var(--ink); color: var(--paper); border: none;
  font: 900 13px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: .06em;
}
.hbtn:active { background: var(--red); }
.hbtn.off { background: var(--gray); }
#mute { right: 12px; }
#pauseBtn { left: 12px; }

/* ------------------------------------------------- posters */
#posters { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.poster { position: absolute; inset: 0; visibility: hidden; }
.poster.show { visibility: visible; }

#invert { position: absolute; inset: 0; background: #fff; mix-blend-mode: difference; visibility: hidden; }
#invert.show { visibility: visible; }

#goalPoster { background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gp-word { color: var(--ink); font-size: min(31vw, 34vh); line-height: .86; transform: scaleX(.74); }
.gp-under { width: min(72vw, 460px); height: min(3.4vh, 22px); background: var(--red); margin-top: 2vh; }
.gp-pay { margin-top: 3vh; color: var(--ink); font-weight: 900; font-size: min(6.4vw, 34px); letter-spacing: .02em; }
.gp-pay b { color: var(--red); }

#silhouette { background: var(--paper); }
#silCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sil-cap {
  position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%) scaleX(.78);
  color: var(--ink); font-weight: 900; font-size: 15px; letter-spacing: .22em; white-space: nowrap;
}

#concedePoster { background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cp-word { color: var(--gray); font-size: min(16vw, 15vh); transform: scaleX(.74); }
.cp-burn { margin-top: 2.6vh; background: var(--ink); color: var(--paper); font-weight: 900; padding: 9px 16px 8px; font-size: min(5.4vw, 26px); }

#restageBand {
  position: absolute; left: 0; right: 0; top: 44%; height: 12%; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; z-index: 41;
}
#restageBand.show { visibility: visible; animation: bandSweep 1.1s steps(3, end) both; }
#restageBand span { color: var(--paper); font-size: min(9vw, 44px); letter-spacing: .06em; transform: scaleX(.78); white-space: nowrap; }
#restageBand span b { color: var(--red); }
@keyframes bandSweep { 0% { clip-path: inset(0 100% 0 0); } 55% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); } }

#ftPoster { background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vh; pointer-events: none; }
#ftPoster.show { pointer-events: auto; }
.ft-word { color: var(--ink); font-size: min(13vw, 9vh); transform: scaleX(.74); }
.ft-line { display: flex; align-items: baseline; gap: 18px; }
.ft-score { color: var(--ink); font-weight: 900; font-size: min(22vw, 16vh); line-height: 1; letter-spacing: -.02em; }
.ft-verdict { color: var(--red); font-weight: 900; font-size: min(8vw, 5.4vh); }
.ft-verdict.gray { color: var(--gray); }
.ft-div { color: var(--gray); font-weight: 900; letter-spacing: .3em; font-size: min(4vw, 15px); }
.ft-stats {
  display: grid; grid-template-columns: repeat(3, auto); gap: 1vh 5vw;
  color: var(--ink); font-weight: 900; font-size: min(3.6vw, 15px); text-align: center;
  margin-top: 1vh;
}
.ft-stats i { display: block; font-style: normal; color: var(--gray); font-size: .72em; letter-spacing: .18em; }
.ft-total { margin-top: 1.6vh; text-align: center; }
.ft-total label { display: block; color: var(--gray); font-weight: 900; letter-spacing: .34em; font-size: min(3.4vw, 13px); }
.ft-total b { color: var(--ink); font-size: min(15vw, 11vh); line-height: 1.02; font-variant-numeric: tabular-nums; }
.ft-under { width: 100%; height: 6px; background: var(--red); margin-top: 4px; }
.ft-best { color: var(--gray); font-weight: 900; font-size: min(3.6vw, 14px); letter-spacing: .2em; min-height: 1em; }
#rematch {
  margin-top: 1.8vh; pointer-events: auto; cursor: pointer;
  background: var(--ink); color: var(--paper); border: none;
  font: 900 min(5.6vw, 24px)/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: .1em;
  padding: 16px 44px 14px;
}
#rematch:active { background: var(--red); }

#pausePlate { background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; }
#pausePlate.show { pointer-events: auto; }
.pp-word { color: var(--paper); font-size: min(19vw, 13vh); transform: scaleX(.74); }
.pp-sub { color: var(--gray); font-weight: 900; letter-spacing: .3em; font-size: min(3.8vw, 15px); }

/* title splash — the first frame IS the poster (auto-fades; never blocks) */
#title { background: var(--bone); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .45s linear; }
#title.fade { opacity: 0; }
.ti-word { color: var(--ink); font-size: min(30vw, 21vh); line-height: .84; text-align: center; transform: scaleX(.74); }
.ti-under { width: min(64vw, 380px); height: min(3vh, 18px); background: var(--red); margin-top: 2.4vh; }
.ti-sub { margin-top: 2.6vh; color: var(--gray); font-weight: 900; letter-spacing: .3em; font-size: min(3.8vw, 16px); }
.ti-tap { margin-top: 5vh; color: var(--ink); font-weight: 900; letter-spacing: .24em; font-size: min(4.2vw, 17px); animation: tapPulse 1.1s steps(2, end) infinite; }
@keyframes tapPulse { 0% { opacity: 1; } 50% { opacity: .25; } 100% { opacity: 1; } }

/* cover mode: the title becomes the poster masthead over the live scene */
#title.cover { background: transparent; justify-content: flex-start; padding-top: 2.4vh; opacity: 1; }
#title.cover .ti-word { font-size: 19vh; line-height: 0.8; }
#title.cover .ti-under { width: 34vh; height: 2.4vh; margin-top: 1.6vh; }
#title.cover .ti-sub { display: none; }
#title.cover .ti-tap { display: none; }

/* paper grain (set by JS to a generated noise tile) */
#grain { position: absolute; inset: 0; z-index: 60; pointer-events: none; mix-blend-mode: multiply; opacity: .05; }

#loader { position: absolute; inset: 0; z-index: 70; background: var(--bone); display: flex; align-items: center; justify-content: center; }
.ld-word { font-weight: 900; color: var(--ink); font-size: 8vw; letter-spacing: .06em; transform: scaleX(.74); }