@font-face { font-family: "Libre Clarendon"; src: url("../fonts/fonts/LibreClarendonNormal-42Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Clarendon"; src: url("../fonts/fonts/LibreClarendonNormal-68Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Clarendon"; src: url("../fonts/fonts/LibreClarendonNormal-110Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Clarendon"; src: url("../fonts/fonts/LibreClarendonNormal-162Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Clarendon"; src: url("../fonts/fonts/LibreClarendonNormal-212Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/fonts/Lexend-Medium.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../brand-kit/fonts/Lexend-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }

:root {
  --hud-text: #fff;
  --accent: #ec8722;
  --ink: #141414;
  --cream: #f4f1ea;
  --mark: rgba(236, 135, 34, 0.38);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #0c0c0e;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#viewport { position: absolute; inset: 0 0 64px 0; display: flex; align-items: center; justify-content: center; }
#stage {
  width: 1920px; height: 1080px; flex: none;
  position: relative; overflow: hidden;
  transform-origin: center center;
  background: var(--accent);
}
body.bare #viewport { inset: 0; }
body.bare .player-controls { display: none; }
body.export #stage { transform: none !important; position: absolute; left: 0; top: 0; }

.player-controls {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: #1b1b1e; border-top: 1px solid #2c2c30;
  color: #d6d6da; font-size: 13px; font-variant-numeric: tabular-nums;
}
.player-controls button {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: 1px solid #3a3a40; background: #26262b; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.player-controls input { flex: 1; accent-color: #eda220; cursor: pointer; }
.player-controls span { min-width: 132px; text-align: right; color: #9a9aa2; }

.stage-bg, .stage-doodles, .stage-grain, .stage-world, .stage-hud {
  position: absolute; inset: 0; pointer-events: none;
}
.stage-doodles img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; }
.stage-grain {
  opacity: 0.3;
  mix-blend-mode: multiply;
  background-image: var(--grain);
  background-size: 300px 300px;
}
.stage-rig { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }

.sticker {
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
}

.hud-kicker {
  font-family: Lexend, sans-serif; font-weight: 500;
  font-size: 26px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hud-text);
}
.hud-title {
  position: relative;
  font-family: "Libre Clarendon", Georgia, serif; font-weight: 700;
  font-size: 92px; line-height: 1.02; letter-spacing: -0.01em;
  color: var(--hud-text);
}
.hud-word { display: inline-block; }

.keypad {
  position: absolute; left: 50%; bottom: 84px;
  display: flex; gap: 24px; align-items: flex-end;
  transform-origin: 50% 100%;
}
.key {
  position: relative;
  width: 124px; height: 118px;
  border-radius: 22px;
  color: var(--ink);
  font-family: Lexend, -apple-system, sans-serif;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 0 var(--depth, 12px) 0 var(--ink);
}
.key.wide { width: 164px; }
.key .sym { font-size: 46px; line-height: 1; font-weight: 500; }
.key .lbl { font-size: 17px; line-height: 1; color: rgba(20, 20, 20, 0.6); letter-spacing: 0.04em; }
.key.hot { background: var(--ink); color: var(--cream); }
.key.hot .lbl { color: rgba(244, 241, 234, 0.7); }

.burst { position: absolute; left: 50%; top: 50%; overflow: visible; pointer-events: none; }
.burst line { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }

.cursor { position: absolute; left: 0; top: 0; z-index: 60; pointer-events: none; transform-origin: 6px 3px; }

.hud-pill {
  position: absolute; display: flex; align-items: center; gap: 16px;
  padding: 14px 28px 14px 20px; border-radius: 999px;
  background: var(--cream); color: var(--ink);
  font-family: Lexend, sans-serif; font-size: 30px; font-weight: 500; white-space: nowrap;
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
}
.hud-pill .muted { color: rgba(20, 20, 20, 0.55); }

.scribble { position: absolute; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.morph { position: absolute; left: 0; top: 0; pointer-events: none; }
.morph .tok { position: absolute; left: 0; top: 0; white-space: pre; border-radius: 0.12em; background-repeat: no-repeat; }
.morph .sel { position: absolute; background: rgba(56, 132, 255, 0.24); border-radius: 3px; }
.morph .hl { position: absolute; left: -3px; border-radius: 0.12em; }
.morph .tok.out { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: transparent; }
.measure { position: absolute; left: -99999px; top: 0; visibility: hidden; white-space: pre-wrap; }

.intro { position: absolute; left: 130px; top: 318px; width: 640px; }
.intro .hud-kicker { margin-bottom: 26px; display: flex; align-items: center; gap: 14px; }
.intro .hud-kicker i { width: 12px; height: 12px; border-radius: 50%; background: var(--hud-text); display: block; }
.stakes { left: 110px; top: 96px; display: none; }
.stakes .live { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2.5px solid var(--ink); }
.chip { left: 50%; bottom: 96px; display: none; }
.chip .ck { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); border: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.clickfx { position: absolute; width: 0; height: 0; z-index: 61; }

.endcard {
  position: absolute; left: 50%; top: 50%; width: 1340px; margin-left: -670px;
  padding: 62px 76px 66px; border-radius: 36px;
  background: var(--cream); color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 16px 16px 0 var(--ink);
  font-family: Lexend, sans-serif;
  display: none;
}
.endcard .act { display: inline-flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 500; margin-bottom: 26px; }
.endcard .act i { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); border: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.endcard h2 { position: relative; font-family: "Libre Clarendon", Georgia, serif; font-weight: 700; font-size: 84px; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 40px; }
.endcard .ba { display: grid; grid-template-columns: 136px 1fr; row-gap: 18px; align-items: baseline; margin-bottom: 44px; }
.endcard .ba .lab { font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; color: #8b8579; font-weight: 500; }
.endcard .ba .txt { position: relative; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; font-size: 46px; line-height: 1.3; }
.endcard .ba .txt span { display: inline-block; border-radius: 0.12em; background-repeat: no-repeat; }
.endcard .ba .before { color: #6f6a60; }
.endcard .ba .before .err { text-decoration: underline wavy #e5484d; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.endcard .howto { display: flex; align-items: center; gap: 22px; font-size: 26px; color: #3c3a35; }
.endcard .howto .keys { display: flex; gap: 14px; }
.endcard .howto .key { width: 92px; height: 86px; border-radius: 19px; gap: 6px; }
.endcard .howto .key.wide { width: 120px; }
.endcard .howto .key .sym { font-size: 34px; }
.endcard .howto .key .lbl { font-size: 13px; }
.endcard .howto .or { margin-left: auto; font-size: 22px; color: #8b8579; display: flex; align-items: center; gap: 10px; }
.mk { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: 10px; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); font-size: 17px; box-shadow: 0 4px 0 var(--ink); }
.mk b { font-weight: 500; font-size: 20px; }

.is-inpage .endcard h2 { display: none; }
.is-inpage .endcard .act { margin-bottom: 34px; }
.is-inpage .endcard .ba { margin-bottom: 52px; row-gap: 22px; }
.is-inpage .endcard .ba .txt { font-size: 56px; }
.is-inpage.is-portrait .endcard .ba .txt { font-size: 50px; }
.is-portrait .stakes { left: 50%; top: 110px; font-size: 34px; }
.is-portrait .intro { left: 90px; top: 11%; width: 900px; }
.is-portrait .hud-kicker { font-size: 30px; }
.is-portrait .hud-title { font-size: 116px; }
.is-portrait .chip { font-size: 36px; bottom: 120px; }
.is-portrait .keypad { bottom: 110px; }
.is-portrait .endcard { width: 960px; margin-left: -480px; padding: 64px 64px 70px; }
.is-portrait .endcard h2 { font-size: 80px; }
.is-portrait .endcard .ba { grid-template-columns: 1fr; row-gap: 6px; }
.is-portrait .endcard .ba .lab { margin-top: 14px; }
.is-portrait .endcard .howto { flex-wrap: wrap; row-gap: 30px; }
.is-portrait .endcard .howto .or { margin-left: 0; width: 100%; font-size: 24px; }