/* Round 4 design. All sizes are Figma pixels on the 1080x1920 frame; #stage is scaled to the screen. */
:root {
  --font: "NYTFranklin", Arial, sans-serif;
  --font-serif: "NYTKarnak", Georgia, serif;
  --font-keys: "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  --ink: #000000;
  --ink-soft: #121212;
  --paper: #FFFFFF;

  --tile: #EFEFE6;
  --tile-selected: #5A594E;
  --mistake: #5A594E;
  --navbar-rule: #A3A3A7;

  --yellow: #F9DF6D;         /* straightforward */
  --green: #A0C35A;          /* easy */
  --blue: #B0C4EF;           /* medium */
  --purple: #BA81C5;         /* tricky */
  --highlight: #BFEEFF;      /* leaderboard "you" row */

  --ss-navy: #000533;        /* State Street background */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body {
  width: 100%; height: 100%; overflow: hidden; background: #000;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; overscroll-behavior: none;
}
body { font-family: var(--font); cursor: default; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; outline: none; }

#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1080px; height: 1920px; overflow: hidden;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
}

.screen { position: absolute; inset: 0; display: none; background: #fff; color: #000; }
.screen.active { display: block; }
/* Light-blue fade at the bottom of every DealBook-styled screen */
.screen::before {
  content: ""; position: absolute; left: 0; top: 870px; width: 1080px; height: 1050px; opacity: .7;
  background: linear-gradient(to bottom, #FFFFFF 33.2%, #E1EEF2 76%, #B8E8F7 100%);
  pointer-events: none;
}
.screen > * { z-index: 1; }

.abs { position: absolute; }
.center { text-align: center; }
.w-full { left: 0; width: 1080px; white-space: nowrap; }
.serif { font-family: var(--font-serif); }

/* ---------- shared pieces ---------- */
.pill {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 75px; white-space: nowrap;
}
.pill.black { background: #000; color: #fff; }
.pill.outline { border: 2.758px solid #000; color: #000; }
.pill.big { font-weight: 600; font-size: 43.3px; }
.pill.std { font-weight: 700; font-size: 41.37px; border-radius: 60.68px; }

.back { position: absolute; display: flex; align-items: flex-start; }
.back svg { width: 23px; height: 46px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.back.text { gap: 25.5px; padding: 0 40px 30px 0; }
.back.text svg { width: 19.6px; height: 39.1px; stroke-width: 5.1; }
.back.text span { font-size: 45.43px; line-height: 43px; margin-top: 2px; white-space: nowrap; }
.back.icon { width: 90px; height: 100px; }

.badge { position: absolute; left: 468px; width: 143px; height: 143px; }

/* ---------- Home ---------- */
#home-lockup { left: 243px; top: 172px; width: 593px; height: 411px; }
#home-sub { left: 178px; top: 616px; width: 724px; font-family: var(--font-serif); font-weight: 500; font-size: 64px; line-height: 75px; color: var(--ink-soft); }
#home-fastest { top: 836px; font-weight: 600; font-size: 48px; line-height: 58px; }
#home-table { left: 130.1px; top: 938px; width: 820.1px; }
#home-table .row { position: relative; height: 83.5px; border-bottom: 1.75px solid #000; font-size: 42.05px; }
#home-table .row:last-child { border-bottom: 0; }
#home-table .row > * { position: absolute; top: 21px; line-height: 1; white-space: nowrap; }
#home-table .rank { left: -1.5px; width: 53px; text-align: center; font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; }
#home-table .name { left: 110.7px; top: 18px; }
#home-table .time { left: 698px; width: 121.2px; text-align: center; }
#home-play, #howto-start { left: 352px; top: 1612px; width: 375px; height: 128px; }

/* ---------- How to play ---------- */
#howto-back { left: 86px; top: 69px; }
#howto-back span { font-weight: 600; }
#howto-title { top: 159px; font-family: var(--font-serif); font-weight: 500; font-size: 96px; line-height: 109px; }
#howto .h { position: absolute; left: 96px; width: 800px; font-weight: 600; font-size: 44.89px; line-height: 56px; }
#howto .txt { position: absolute; left: 96px; font-size: 37.41px; line-height: 54.24px; }
#howto .li { position: absolute; left: 99px; padding-left: 60px; font-size: 40px; line-height: 54.24px; }
#howto .li::before { content: ""; position: absolute; left: 22px; top: 21px; width: 13px; height: 13px; border-radius: 50%; background: #000; }
#howto .sw { position: absolute; left: 400px; width: 51px; height: 52px; border-radius: 4.71px; }
#howto .legend { position: absolute; left: 475px; font-size: 32px; line-height: 42.62px; white-space: nowrap; }
#howto-arrow { position: absolute; left: 477px; top: 1381px; width: 12px; height: 101px; }

/* ---------- Game (DealBook) ---------- */
#navbar { position: absolute; left: 0; top: 0; width: 1080px; height: 171px; border-bottom: 4px solid var(--navbar-rule); }
#game-back { left: 63px; top: 59px; }
#nav-dealbook { left: 340px; top: 55px; width: 380px; height: 70px; }
#nav-ss { display: none; }
#timer { left: 898px; top: 42px; font-weight: 500; font-size: 62.2px; line-height: 52.7px; white-space: nowrap; }
#timer-label { left: 906px; top: 103px; font-weight: 500; font-size: 23.4px; line-height: 21px; white-space: nowrap; }
#disclaimer { display: none; }
#prompt { top: 258px; font-size: 48px; line-height: 58px; }

#board {
  position: absolute; left: 34px; top: 350px; width: 1011.1px;
  display: grid; grid-template-columns: repeat(4, 237.1px); grid-auto-rows: 235.1px;
  column-gap: 21.57px; row-gap: 24.5px;
}
.tile {
  position: relative; background: var(--tile); color: #000;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 700; font-size: 47px; line-height: 1.12;
  text-transform: uppercase; white-space: nowrap; padding: 0 6px;
  transition: background-color .12s ease, color .12s ease;
}
.tile span { display: block; }
.tile.selected { background: var(--tile-selected); color: #fff; }

.solved {
  grid-column: 1 / -1; align-self: center; justify-self: center;
  width: 1002px; height: 233px; color: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-transform: uppercase; text-align: center; padding-top: 66px;
}
.solved .cat { font-weight: 700; font-size: 43px; line-height: 50px; white-space: nowrap; }
.solved .words { font-size: 43px; line-height: 51px; letter-spacing: 0.01em; white-space: nowrap; }
.lvl-0 { background: var(--yellow); }
.lvl-1 { background: var(--green); }
.lvl-2 { background: var(--blue); }
.lvl-3 { background: var(--purple); }

#mistakes { position: absolute; left: 227px; top: 1420px; height: 47px; color: var(--mistake); }
#mistakes-label { position: absolute; left: 0; top: 0; font-size: 39.53px; line-height: 47px; white-space: nowrap; }
#mistakes .dot { position: absolute; top: 0; width: 39.5px; height: 39.5px; border-radius: 50%; background: currentColor; transition: transform .3s ease, opacity .3s ease; }
#mistakes .dot.gone { transform: scale(0); opacity: 0; }

.ctl { top: 1523.9px; height: 121.4px; font-weight: 600; font-size: 41.37px; border-radius: 60.68px; border: 2.758px solid #000; color: #000; transition: background-color .12s ease, color .12s ease; }
.ctl.primary { background: #000; color: #fff; }
#btn-shuffle { left: 141px; width: 221.6px; }
#btn-deselect { left: 386px; width: 305.2px; }
#btn-submit { left: 715px; width: 224.3px; }
#btn-view-results { left: 338px; top: 1503px; width: 392px; height: 121px; }

#toast {
  position: absolute; top: 155px; left: 50%; height: 92px; padding: 0 39.5px;
  transform: translateX(-50%); background: #000; color: #fff; border-radius: 10px;
  display: flex; align-items: center; font-weight: 600; font-size: 39.1px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 10;
}
#toast.show { opacity: 1; }

/* ---------- Game (State Street) ---------- */
#game.ss { background: var(--ss-navy); color: #fff; }
#game.ss::before { display: none; }
#game.ss #navbar { left: 78px; width: 922px; height: 182px; border-bottom: 2px solid #fff; }
#game.ss #game-back { left: -23px; top: 73px; }
#game.ss #game-back svg { height: 50.2px; }
#game.ss #nav-dealbook { display: none; }
#game.ss #nav-ss { display: block; }
#nav-ss-logo { left: 291px; top: 59.1px; width: 155.4px; height: 69.7px; }
#nav-ss-etf { left: 455.2px; top: 40px; width: 151.8px; height: 107px; }
#game.ss #timer { left: 796px; top: 49px; font-size: 59.8px; line-height: 55px; }
#game.ss #timer-label { left: 799px; top: 110px; font-size: 22.5px; line-height: 29px; }
#game.ss #disclaimer { display: block; left: 164px; top: 263px; width: 753px; font-weight: 500; font-size: 36px; line-height: 43px; }
#game.ss #prompt { top: 462px; font-weight: 700; font-size: 51.3px; line-height: 62px; }
#game.ss #board { top: 551px; }
#game.ss #mistakes { top: 1617px; color: #fff; }
#game.ss .ctl { top: 1712.8px; height: 103.2px; border-color: #fff; color: #fff; }
#game.ss .ctl.primary { background: #fff; color: #000; }
#game.ss #btn-shuffle { left: 152px; width: 215.5px; }
#game.ss #btn-deselect { left: 390px; width: 296.8px; }
#game.ss #btn-submit { left: 710px; width: 218.1px; }
#game.ss #btn-view-results { top: 1648px; border-color: #fff; color: #fff; }
#game.ss #toast { top: 162px; background: #fff; color: #000; }

/* ---------- Results ---------- */
#res-title { font-family: var(--font-serif); font-weight: 700; font-size: 96px; line-height: 115px; }
#res-sub { top: 721px; font-family: var(--font-serif); font-weight: 500; font-size: 48px; line-height: 58px; }
#results .rule { position: absolute; left: 190px; width: 695px; border-top: 1.64px solid #000; }
#results .stat { position: absolute; width: 300px; text-align: center; letter-spacing: -0.02em; white-space: nowrap; }
#results .stat .v { display: block; font-size: 70.83px; line-height: 85px; }
#results .stat .l { display: block; font-size: 40px; line-height: 48px; margin-top: -11px; }
#stat-time { left: 220px; }
#stat-mistakes { left: 574.5px; }
#btn-add-name { left: 154px; top: 1493px; width: 768px; height: 121px; }
#btn-skip { left: 389px; top: 1655px; width: 297px; height: 121px; }
#btn-play-again { left: 391px; top: 1486px; width: 297px; height: 128.5px; }
#results.win .loss-only, #results.loss .win-only { display: none; }

/* ---------- Name entry ---------- */
#name-back { left: 79px; top: 97px; }
#name-title { top: 411px; font-family: var(--font-serif); font-weight: 600; font-size: 78.47px; line-height: 99px; }
#name-field { left: 105px; top: 525px; width: 870.4px; height: 106.3px; border-radius: 18.33px; background: #fff; border: 3px solid #000; }
#name-value { position: absolute; left: 27px; top: 10px; font-size: 64px; line-height: 58px; white-space: pre; }
#name-caret { display: inline-block; width: 3px; height: 58px; margin-left: 4px; vertical-align: -8px; background: #000; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
#name-hint { top: 671px; font-weight: 600; font-size: 40px; letter-spacing: -0.01em; line-height: 47px; }
#keyboard { position: absolute; left: 0; top: 0; }
.key {
  position: absolute; height: 98.98px; border-radius: 11.51px; background: #646464; color: #fff;
  box-shadow: 0 2.3px 0 rgba(0, 0, 0, .3);
  font-family: var(--font-keys); font-weight: 300; font-size: 55.24px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding-bottom: 4px;
}
.key:active { background: #3F3F3F; }
.key.img { background: none; box-shadow: none; padding: 0; border-radius: 0; display: block; }
.key.img img { display: block; width: 100%; }
.key.img:active { opacity: .7; }
.key.shift.off img { opacity: .55; }
#name-submit { left: 359px; top: 1229px; width: 362.6px; height: 119.5px; border-radius: 59.9px; font-weight: 600; font-size: 40.9px; }
#name-submit:disabled { opacity: .35; }

/* ---------- Leaderboard ---------- */
#lb-back { left: 84px; top: 95px; }
#lb-title { top: 323px; font-family: var(--font-serif); font-weight: 700; font-size: 96px; line-height: 99px; }
#lb-sub { top: 433px; font-family: var(--font-serif); font-weight: 500; font-size: 61px; line-height: 67px; }
#lb-table { left: 152px; top: 559.2px; width: 776.1px; }
#lb-table .row { position: relative; height: 100.25px; border-bottom: 2.29px solid #000; font-size: 48px; }
#lb-table .row:last-child { border-bottom: 0; }
#lb-table .row.me { background: var(--highlight); }
#lb-table .row > * { position: absolute; top: 26px; line-height: 51px; white-space: nowrap; }
#lb-table .rank { left: 1px; min-width: 64.6px; text-align: center; font-family: var(--font-serif); font-weight: 600; }
#lb-table .name { left: 137.2px; }
#lb-table .time { left: 661px; width: 98px; text-align: center; letter-spacing: -0.01em; }
#lb-play { left: 372px; top: 1627px; width: 336.3px; height: 110.9px; border-radius: 55.6px; font-weight: 700; font-size: 37.91px; }

/* Animations (NYT-style) */
@keyframes jump { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes shake {
  0%,100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); }
  60% { transform: translateX(-8px); } 80% { transform: translateX(8px); }
}
@keyframes pop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.jump { animation: jump .28s ease-in-out; }
.shake { animation: shake .4s ease-in-out; }
.pop { animation: pop .35s ease-out; }
.rank, #lb-sub { font-variant-numeric: lining-nums; }

/* ---------- Exit confirmation (not in Figma; uses the design's existing styles) ---------- */
#exit-confirm { position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, .55); color: #000; }
#exit-confirm .card { position: absolute; left: 140px; top: 640px; width: 800px; height: 600px; background: #fff; border-radius: 18.33px; text-align: center; }
#exit-confirm h2 { margin-top: 70px; font-family: var(--font-serif); font-weight: 700; font-size: 72px; line-height: 86px; }
#exit-confirm p { margin-top: 12px; font-size: 40px; line-height: 54px; }
#exit-confirm .pill { left: 200px; width: 400px; height: 121px; }
#exit-stay { top: 290px; }
#exit-leave { top: 435px; }