@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

@font-face {
  font-family: "Game Of Squids";
  src:
    url("/assets/Game%20Of%20Squids.otf") format("opentype"),
    url("/assets/Game%20Of%20Squids.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Retro Pixel Thick";
  src: url("/static/fonts/retro-pixel-thick.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Retro Pixel Cute Mono";
  src: url("/static/fonts/retro-pixel-cute-mono.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

:root {
  --font-ui: "Press Start 2P", monospace;
  --font-arcade: "Press Start 2P", monospace;
  --bg: #120914;
  --surface: #bdb7b3;
  --surface-2: #847d78;
  --border: #403934;
  --primary: #e91e8c;
  --primary-h: #ff4db8;
  --cyan: #47d8ff;
  --danger: #ff5f6d;
  --success: #9dff7a;
  --warning: #ffd05a;
  --text: #fdf4cf;
  --muted: #c7bc9f;
  --radius: 0px;

  --bg-grid: rgba(255, 216, 125, 0.06);
  --cabinet: var(--surface);
  --cabinet-light: #ece5de;
  --cabinet-dark: var(--surface-2);
  --cabinet-deep: #625c57;
  --outline: #000;
  --outline-soft: #655d56;
  --pixel-highlight: rgba(255, 255, 255, 0.26);
  --bezel: #0f0a08;
  --bezel-light: #433730;
  --screen-bg: #090302;
  --screen-glow: rgba(233, 30, 140, 0.2);
  --accent-pink: var(--primary);
  --accent-rose: #ff6dbb;
  --accent-cyan: var(--cyan);
  --accent-green: var(--success);
  --accent-yellow: var(--warning);
  --shadow: rgba(0, 0, 0, 0.36);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 0;
  font-family: "Press Start 2P", system-ui, monospace;
  color: var(--text);
  background:
    radial-gradient(
      ellipse at 20% 35%,
      rgba(233, 30, 140, 0.14) 0%,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 80% 18%,
      rgba(255, 77, 184, 0.08) 0%,
      transparent 52%
    ),
    linear-gradient(to right, rgba(255, 216, 125, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 216, 125, 0.04) 1px, transparent 1px),
    radial-gradient(
      circle at 50% 0%,
      rgba(255, 107, 187, 0.08) 0%,
      transparent 42%
    ),
    linear-gradient(180deg, #20101d 0%, #180d18 28%, #120911 58%, #090609 100%);
  background-size:
    auto,
    auto,
    28px 28px,
    28px 28px,
    auto,
    auto,
    auto;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

.screen {
  position: relative;
  min-height: 100vh;
  padding: 32px 28px 40px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(255, 92, 184, 0.08) 0%,
      transparent 34%
    ),
    radial-gradient(
      circle at 50% 85%,
      rgba(120, 22, 74, 0.12) 0%,
      transparent 42%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.035) 0 2px,
      rgba(0, 0, 0, 0) 2px 6px
    ),
    linear-gradient(180deg, #180d16 0%, #120913 38%, #0d070e 68%, #070507 100%);
  border: 4px solid var(--outline);
  box-shadow:
    inset 0 0 0 4px var(--bezel-light),
    inset 0 0 0 10px var(--bezel),
    inset 0 0 0 14px #000;
}

.screen-full {
  width: 100%;
  border: 0;
  box-shadow: none;
}

.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 15% 16%,
      rgba(255, 255, 255, 0.9) 0 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 84% 18%,
      rgba(255, 77, 184, 0.8) 0 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 70% 35%,
      rgba(255, 255, 255, 0.82) 0 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 28% 42%,
      rgba(233, 30, 140, 0.86) 0 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 18% 72%,
      rgba(255, 255, 255, 0.75) 0 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 86% 70%,
      rgba(71, 216, 255, 0.85) 0 1px,
      transparent 1px
    );
  background-size:
    96px 96px,
    118px 118px,
    140px 140px,
    104px 104px,
    128px 128px,
    160px 160px;
  opacity: 0.9;
  pointer-events: none;
}

.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.09) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px
  );
  opacity: 0.45;
  pointer-events: none;
}

.screen-full::before {
  background:
    radial-gradient(
      circle at 15% 16%,
      rgba(255, 255, 255, 0.9) 0 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 84% 18%,
      rgba(255, 77, 184, 0.8) 0 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 70% 35%,
      rgba(255, 255, 255, 0.82) 0 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 28% 42%,
      rgba(233, 30, 140, 0.86) 0 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 18% 72%,
      rgba(255, 255, 255, 0.75) 0 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 86% 70%,
      rgba(71, 216, 255, 0.85) 0 1px,
      transparent 1px
    );
  background-size:
    96px 96px,
    118px 118px,
    140px 140px,
    104px 104px,
    128px 128px,
    160px 160px;
}

.content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 86px auto 0;
  text-align: center;
}

.bottom-scene {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  pointer-events: none;
}

.heads-inline {
  position: relative;
  inset: auto;
  margin: 36px auto 5px;
}

.app-scene {
  opacity: 0.24;
  filter: saturate(0.85) brightness(0.9);
}

.guard-line {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: clamp(28px, 7vw, 84px);
  padding: 0 24px;
}

.pixel-guard {
  position: relative;
  width: 104px;
  height: 104px;
  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.45));
  animation: guardBob 1.8s steps(2, end) infinite;
}

.pixel-guard:nth-child(2) {
  animation-delay: 0.35s;
}

.pixel-guard:nth-child(3) {
  animation-delay: 0.7s;
}

.sprite-guard {
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  image-rendering: pixelated;
}

.sprite-circle {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABfElEQVR4AeyUMU4DMRBFHS6RK0CBRENDBQX0nAhxAQquQwESEg0dDZSUIHGH4Gfpr9glzvxZQbdoP97xjOc/T6LslXl/m3psqrqVf7IAzfTx4qZMVa1brq6pJwOwkenXx3uZSrnqDkhdvMcFaOYy3dZaOUBq3oZwAAbz2rhcvtx2RR6QDIQDQN8mzPePT0tP5Fth4l8EMNye5hir9+vTXZG0R566zBQiAPUerRgfnJwXiXhUkAgsAG7F7eiLGca8S8TsE1NHPVMgjhQCuI0io14+BOgd/Kv9NMDPcQuC8bOvOLOmAWiOGaYSMftzZAO8PT8UJBNMJe2RR4qd1Qbg240w6Ik8coxVYwFcrc+G22Mg0UTvrMTAUc+7IwvAaTS3JgJY8aNytD4s3Irb7TIiTx31nKu1q6qdTwTA4V8QGCGSrFLWnPMOAHUjCIy2KXNzmiIXgNoGcf15X3pyx04zKQPAGT7TSNTZygLYjd3CBWCZwDKBZQL/PoHoB+kbAAD//xVa6gkAAAAGSURBVAMAc3n1QfzYUz0AAAAASUVORK5CYII=");
}

.sprite-triangle {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABeklEQVR4AeyUPU4DMRCFHS6RK0CBRAM1aeg5EeICFFwoSHTQ0UBJmUi5QzKfJa8mzjp+s1K6jfbFPzOe940T7VWa9tnbsVq2FX+iANn08+kt1TLrHLMx9EQA9sV0t/lPtUrM3AGxQXtUgGxeTMdKlxggFpchFIDB3Aqn55/3pogDEoFQAKibhfn1/WNqiXhODHz1AIbuKY6xr/37tfbLDEZe5BZ6AEcGfoH5zcMqMfr96FwCoKu6+5YReeRzC60cv98FGCtE13RPIUbWzKeoCzClaORMGIBu6dqbsGbf76nzMEAxw9CLfdXU58kAf98fCXEYs1rsE0fMVckA/LsRBi0RR6o5eRLAy3I1dI9BEQXKnJE1cOQzVyQBKIWm5vQAFrxU7pa3ia7o7pwRcfLI55zlLkxnnx4Ah08gMEIEGYui5pxXAMg7gsBoTJHOKYpUAHIzxOt2nVpSr51iRREAzvCb9kSerCiAXFhNnAHmG5hvYL6Bi99A74V0AAAA//8OjUEAAAAABklEQVQDAIi+9UE5X0JeAAAAAElFTkSuQmCC");
}

.sprite-square {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABW0lEQVR4AeyUPU4DMRCFJ1wiV4ACiQZq0tBzIsQFKLhQkOigo4GSMpFyh2Q+S44Sx47frJIi0kZ+We3OeN43sz9XNuy39m2l/FJ8RQGS6efTm5Vy6xTzY2hFANbZdLX4t1I55u6A+EFbKkAyz6a10jkGiMdlCAVga+6F7fnnvSnigEQgFADqJmF+ff9oLRFPiYG/HsC2e4pj/Ps1t5aIkxeZQg+g2svNw8xKVROFixIAXdGdUC/dHvKZgpLfBVALKWa1nC5AbdMpr10mQO0tGDoVeQJ/3x+Gyqd/95w4isDIALwFCIOWiKOTA7xMZ6l7CmOQVTsHjnxiiuQJKMWG5PQAJnxU7qa3Rld0d8yEOHnks89zJ66jqwfA5gMIjBBBjllRc/YrAOTtQWBUU6RziiIVgNwE8bqcW0vq2CmWFQFgD/e0J/JkRQHkwmriCDBOYJzAOIGzT6D3QdoAAAD//w1J0Y0AAAAGSURBVAMAOzX1Qdv4V0sAAAAASUVORK5CYII=");
}

.pixel-hud {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 4;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  --hud-gap: 10px;
}

.hud-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.48rem;
  line-height: 1.4;
  color: #ffe6f3;
  background: linear-gradient(
    180deg,
    rgba(162, 44, 104, 0.96) 0%,
    rgba(104, 21, 64, 0.96) 100%
  );
  border: 3px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.32);
  font-family: "Press Start 2P", monospace;
  text-transform: uppercase;
  text-decoration: none;
}

.hud-rules {
  cursor: pointer;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 8px 14px;
  font-size: 0.56rem;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff2fb;
  background: linear-gradient(180deg, #ff72c5 0%, #e91e8c 100%);
  border: 3px solid var(--outline);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
}

.game-logo {
  margin: 0 0 22px;
  font-family: "Game Of Squids", "Press Start 2P", sans-serif;
  font-size: clamp(2.1rem, 10vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff5cb8;
  text-shadow:
    4px 0 0 #000,
    -4px 0 0 #000,
    0 4px 0 #000,
    0 -4px 0 #000,
    6px 6px 0 #8f0f56,
    10px 10px 0 rgba(0, 0, 0, 0.52);
  animation: logoPulse 2.2s steps(2, end) infinite;
}

.screen-banner {
  margin: 0 0 16px;
  font-size: 0.54rem;
  line-height: 1.7;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffd3ea;
}

.squid-symbols {
  font-size: 1.45rem;
  line-height: 1.35;
  letter-spacing: 0.52em;
  color: #ff62b9;
  opacity: 0.98;
  margin-bottom: 1.4rem;
  padding-left: 0.52em;
  display: block;
  text-shadow: 2px 2px 0 #000;
  animation: blinkArcade 1.2s steps(2, end) infinite;
}

.game-tagline {
  margin: 0 0 12px;
  color: #fff5ce;
  letter-spacing: 0.14rem;
  font-size: 0.74rem;
  line-height: 1.8;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  border-right: 0;
  width: auto;
  max-width: 100%;
  animation: taglineGlow 2.6s ease-in-out infinite alternate;
}

.game-tagline.typewriter {
  letter-spacing: 0.08rem;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  max-width: 100%;
  border-right: 2px solid rgba(255, 77, 184, 0.9);
  animation:
    taglineTypeDynamic 2.4s steps(31, end) forwards,
    caretBlink 0.85s steps(2, end) infinite,
    taglineGlow 2.6s ease-in-out infinite alternate;
}

.game-tagline.typewriter-short {
  animation:
    taglineTypeShort 1.4s steps(14, end) forwards,
    caretBlink 0.85s steps(2, end) infinite,
    taglineGlow 2.6s ease-in-out infinite alternate;
}

.subtitle {
  margin: 0 0 28px;
  font-size: 0.58rem;
  line-height: 1.9;
  color: var(--muted);
}

.loading-card {
  width: min(100%, 420px);
  margin: 0 auto 22px;
  padding: 14px 16px 12px;
  text-align: left;
  background: linear-gradient(
    180deg,
    rgba(255, 138, 209, 0.22) 0%,
    rgba(150, 62, 114, 0.3) 100%
  );
  border: 3px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.34);
}

.loading-label-row,
.loading-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.48rem;
  line-height: 1.6;
  text-transform: uppercase;
}

.loading-label-row {
  color: #ffe9a8;
  margin-bottom: 10px;
}

.loading-track {
  height: 22px;
  padding: 3px;
  margin-bottom: 10px;
  background: #341721;
  border: 3px solid #000;
}

.loading-fill {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(
    to right,
    #f6b07f 0 14px,
    #f6b07f 14px 18px,
    #f184b0 18px 32px
  );
  background-size: 32px 100%;
  box-shadow:
    inset 0 0 0 2px rgba(255, 247, 196, 0.4),
    inset 0 -2px 0 rgba(143, 87, 18, 0.28);
  animation:
    loadingProgress 2.6s steps(22, end) forwards,
    loadingShift 1s steps(4, end) 3,
    loadingScroll 0.9s linear 3;
}

.loading-fill::after {
  content: "";
  position: absolute;
  right: -24px;
  top: 50%;
  width: 80px;
  height: 80px;
  transform: translateY(-50%);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABLElEQVR4AexUuwrCQBBcLW38AbVXa0FsLEWwsPFb7BTtbP0NGwtBBBsbEazVPvoDNpYqE9iwSe6OuyAI4YRxH7e3MxlCivTnnxfgHfAOeAfy4cBxXvokP6iqXnIGdWYHQMDAIs45omeDTAJAUm80idHsjUkCfRtyzDgLYHJcBorVAUIM6EEQZmMHisJZgNwBIlm3hrOolHnUVCROAviJQAwk953XU3oGpxD7ZY8q9S4Fq37qBZX3rAWAvDN5FeRlXf64HcIjjmGh+bMWoCJ/3zfEkPvx5Kg5ItfBWkByAYhlj+tyrU0MOFAbbY2uOQuAE5fdgm7XSwroS2BWilTlzgJ4CS9HZOAMuYzITcgkQEei6/9cgGmh61kmB1xJTPNegHfAO5B/B0zfAJx9AQAA///QIKaMAAAABklEQVQDACWDfkFymrTFAAAAAElFTkSuQmCC");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.4));
}

.loading-meta {
  color: #f7cf7f;
}

.preview-auth-form {
  margin: 18px auto 20px;
  max-width: 320px;
  display: grid;
  gap: 10px;
}

.preview-auth-label {
  font-family: "Press Start 2P", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  color: #ffd8ed;
  text-transform: uppercase;
  text-align: left;
}

#preview-secret-key {
  width: 100%;
  height: 42px;
  padding: 0 10px;
  border: 3px solid #000;
  background: linear-gradient(180deg, #2c1627 0%, #170d16 100%);
  color: #ffe8f5;
  font-family: "Press Start 2P", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  outline: none;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.45),
    3px 3px 0 #000;
  border-radius: 0;
}

#preview-secret-key::placeholder {
  color: color-mix(in srgb, var(--muted) 86%, black);
}

#preview-secret-key:focus {
  border-color: #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.52),
    0 0 0 2px rgba(233, 30, 140, 0.58),
    3px 3px 0 #000;
}

.preview-auth-btn {
  position: relative;
  height: 40px;
  border: 3px solid #000;
  background: linear-gradient(180deg, #ff62b9 0%, #e91e8c 100%);
  color: #fff2fb;
  font-family: "Press Start 2P", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    4px 4px 0 rgba(0, 0, 0, 0.45);
  border-radius: 0;
}

.preview-auth-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.28);
}

.preview-auth-btn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  pointer-events: none;
}

/* control deck */
@keyframes logoPulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08);
  }
}

@keyframes blinkArcade {
  0%,
  49% {
    opacity: 0.9;
  }
  50%,
  100% {
    opacity: 0.45;
  }
}

@keyframes taglineGlow {
  0% {
    color: #ffedbf;
    text-shadow:
      2px 2px 0 #000,
      0 0 0 rgba(255, 77, 184, 0);
  }
  100% {
    color: #ffffff;
    text-shadow:
      2px 2px 0 #000,
      0 0 8px rgba(255, 77, 184, 0.45);
  }
}

@keyframes taglineType {
  from {
    width: 0;
  }
  to {
    width: calc(31ch + 2rem);
  }
}

@keyframes taglineTypeDynamic {
  from {
    width: 0;
  }
  to {
    width: var(--typewriter-width, calc(31ch + 2rem));
  }
}

@keyframes taglineTypeShort {
  from {
    width: 0;
  }
  to {
    width: calc(14ch + 1rem);
  }
}

@keyframes caretBlink {
  0%,
  49% {
    border-right-color: rgba(255, 77, 184, 0.9);
  }
  50%,
  100% {
    border-right-color: transparent;
  }
}

@keyframes loadingShift {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes loadingScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 32px 0;
  }
}

@keyframes loadingProgress {
  from {
    width: 0;
  }
  to {
    width: 87%;
  }
}

@keyframes guardBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-logo,
  .pixel-guard,
  .squid-symbols,
  .game-tagline,
  .game-tagline.typewriter {
    animation: none;
  }
}

@media (max-width: 640px) {
  body {
    padding: 0;
  }

  .screen {
    min-height: 100vh;
    padding: 24px 16px 28px;
  }

  .eyebrow {
    font-size: 0.48rem;
    margin-bottom: 16px;
  }

  .game-logo {
    font-size: clamp(1.8rem, 12vw, 3.1rem);
  }

  .squid-symbols {
    font-size: 1rem;
    letter-spacing: 0.32rem;
    padding-left: 0.32rem;
  }

  .content {
    margin-top: 74px;
  }

  .screen-banner,
  .game-tagline,
  .subtitle {
    font-size: 0.52rem;
    line-height: 1.8;
  }

  .game-tagline.typewriter {
    white-space: normal;
    width: auto;
    border-right: 0;
    animation: taglineGlow 2.8s ease-in-out infinite alternate;
  }

  .preview-auth-form {
    max-width: 250px;
    margin-top: 20px;
    gap: 8px;
  }

  .pixel-hud,
  .loading-label-row,
  .loading-meta {
    font-size: 0.42rem;
  }

  .loading-card {
    padding: 12px;
  }

  .preview-auth-label {
    font-size: 0.44rem;
  }

  #preview-secret-key {
    height: 36px;
    font-size: 0.46rem;
  }

  .preview-auth-btn {
    height: 34px;
    font-size: 0.46rem;
  }

  .guard-line {
    gap: 16px;
    padding: 0 10px;
  }

  .pixel-guard {
    width: 68px;
    height: 68px;
  }
}

/* shared app compatibility */
.app-shell {
  padding: 0;
}

.app-content {
  position: relative;
  z-index: 2;
  padding: 28px;
}

body:has(.topnav) #app {
  padding-top: 56px;
}

body.play-page .app-content,
body.host-page .app-content {
  padding-bottom: 92px;
}

body.play-page .app-content {
  padding-bottom: 28px;
}

body.login-preview .app-shell {
  padding: 0;
}

body.login-preview #app {
  padding-top: 0;
}

body.login-preview .app-content {
  position: static;
  padding: 0;
}

.topnav {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  font-size: 0.48rem;
}

.topnav-name,
.topnav-logout {
  color: #ffd8ed;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
}

.topnav-logout:hover {
  color: #fff2fb;
  filter: brightness(1.08);
}

.topbar-center {
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

.center-wrap,
.panel {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 24px;
}

.hidden {
  display: none !important;
}

.card {
  width: min(100%, 1040px);
  padding: 24px 22px 26px;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(
      180deg,
      rgba(255, 95, 180, 0.08) 0%,
      rgba(11, 4, 9, 0.06) 100%
    ),
    linear-gradient(to bottom, #1a0b13 0 24%, #11070d 24% 70%, #060304 70% 100%);
  background-size:
    28px 28px,
    28px 28px,
    auto,
    auto;
  border: 4px solid #000;
  box-shadow:
    inset 0 0 0 4px #433730,
    inset 0 0 0 10px #0f0a08,
    inset 0 0 0 14px #000,
    8px 8px 0 rgba(0, 0, 0, 0.4);
}

.card.wide {
  max-width: 1100px;
}

.join-card,
.auth-card {
  max-width: 640px;
  text-align: center;
}

.card > .eyebrow:first-child {
  margin-bottom: 18px;
}

.auth-card .game-logo {
  margin-bottom: 16px;
}

h2 {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.6;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}

h3 {
  margin: 0 0 12px;
  font-size: 0.64rem;
  line-height: 1.6;
  text-transform: uppercase;
  color: #ffd8ed;
  text-shadow: 2px 2px 0 #000;
}

.hint,
.config-summary,
.legend,
.contract-desc,
.contract-result-desc {
  color: var(--muted);
  font-size: 0.54rem;
  line-height: 1.8;
}

.two-col,
.btn-row,
.room-header,
.round-header,
.picking-layout,
.contracts-split,
.bot-add,
.score-banner {
  display: flex;
  gap: 18px;
}

.two-col,
.picking-layout,
.contracts-split {
  align-items: flex-start;
}

.two-col {
  justify-content: space-between;
}

.two-col > * {
  flex: 1;
  min-width: 0;
}

.contracts-split,
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.contracts-half,
.picking-main {
  flex: 1;
  min-width: 0;
}

.btn-row,
.room-header,
.round-header,
.score-banner {
  justify-content: space-between;
  align-items: center;
}

.roster {
  list-style: none;
  display: grid;
  gap: 10px;
  padding: 0;
}

.roster li,
.contract-card,
.contract-results-section,
.pick-counter,
.progress-bar-wrap,
.modal-box {
  background: linear-gradient(180deg, #24151f 0%, #160d14 100%);
  border: 3px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

.roster li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  font-size: 0.52rem;
}

.roster li.me {
  border-color: var(--primary);
  box-shadow:
    0 0 0 1px #000,
    3px 3px 0 #000,
    0 0 10px rgba(233, 30, 140, 0.28);
}

.remove-bot {
  border: 2px solid #000;
  background: linear-gradient(180deg, #ff8c97 0%, #ff5f6d 100%);
  color: #fff2fb;
  font-family: "Press Start 2P", monospace;
  font-size: 0.48rem;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.remove-bot:hover {
  filter: brightness(1.08);
}

.bot-add {
  margin-top: 10px;
  align-items: stretch;
}

.bot-add input {
  flex: 1;
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 0.48rem;
  color: #fff2fb;
  background: linear-gradient(180deg, #ff72c5 0%, #e91e8c 100%);
  border: 3px solid #000;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

.room-code {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1.5rem, 7vw, 2.6rem);
  color: #ff62b9;
  text-shadow:
    3px 0 0 #000,
    -3px 0 0 #000,
    0 3px 0 #000,
    0 -3px 0 #000,
    5px 5px 0 rgba(0, 0, 0, 0.45);
}

.leaderboard,
.round-plan {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.5rem;
}

.leaderboard th,
.leaderboard td,
.round-plan th,
.round-plan td {
  padding: 10px 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}

.leaderboard th,
.round-plan th {
  color: #ffd8ed;
  text-transform: uppercase;
}

.leaderboard tr.me td {
  color: #ffe9f6;
}

.leaderboard tr.me td:first-child,
.leaderboard tr.me td:nth-child(2) {
  color: #ff7ac8;
}

.round-plan {
  margin-bottom: 16px;
}

.round-leaderboard-section {
  margin-top: 1.5rem;
}

.sortable {
  cursor: pointer;
  user-select: none;
}

.sortable:hover {
  color: #ff62b9;
}

.sortable.active {
  color: #ff62b9;
}

.sort-arrow {
  font-size: 0.4rem;
  margin-left: 2px;
}

.practice-row td {
  color: #f6d08a;
}

.round-plan,
.leaderboard,
.contract-results-section,
.score-banner,
.picking-layout,
.two-col {
  margin-top: 12px;
}

.contract-card {
  padding: 12px;
  margin-bottom: 10px;
}

.contract-name {
  font-family: "Press Start 2P", monospace;
  font-size: 0.56rem;
  margin-bottom: 6px;
}

.contract-pricing,
.contracts-half-label,
.progress-text,
.pick-counter,
label,
input,
button {
  font-family: "Press Start 2P", monospace;
}

.contract-pricing {
  font-size: 0.5rem;
  margin-top: 8px;
}

.contract-price {
  color: var(--danger);
}

.contract-payout,
.win {
  color: var(--success);
}

.loss {
  color: var(--danger);
}

.contract-card.purchased {
  border-color: var(--primary);
  background: linear-gradient(
    180deg,
    rgba(255, 77, 184, 0.16) 0%,
    rgba(233, 30, 140, 0.08) 100%
  );
  box-shadow:
    0 0 0 1px #000,
    3px 3px 0 #000,
    0 0 10px rgba(233, 30, 140, 0.25);
}

.contract-result-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.contract-result-name {
  flex: 1;
}

.contract-result-row {
  padding: 8px 10px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  margin-top: 8px;
  background: linear-gradient(180deg, #24151f 0%, #160d14 100%);
}

.practice-tag,
.double-tag {
  display: inline-block;
  border: 1px solid transparent;
  font-family: "Press Start 2P", monospace;
  font-size: 0.5rem;
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.practice-tag {
  background: rgba(245, 166, 35, 0.16);
  color: var(--warning);
  border-color: rgba(245, 166, 35, 0.45);
}

.double-tag {
  background: rgba(255, 77, 184, 0.14);
  color: var(--primary-h);
  border-color: rgba(255, 77, 184, 0.35);
}

.contracts-col,
.contracts-scroll,
.modal-body {
  overflow-y: auto;
}

.contracts-col,
.contracts-scroll {
  max-height: 360px;
  padding-right: 6px;
}

.contracts-col::-webkit-scrollbar,
.contracts-scroll::-webkit-scrollbar {
  width: 6px;
}

.contracts-col::-webkit-scrollbar-track,
.contracts-scroll::-webkit-scrollbar-track {
  background: #24151f;
}

.contracts-col::-webkit-scrollbar-thumb,
.contracts-scroll::-webkit-scrollbar-thumb {
  background: var(--primary);
}

.contracts-sticky-label {
  position: static;
  background: linear-gradient(180deg, #160d14 0%, rgba(22, 13, 20, 0.2) 100%);
  padding-bottom: 8px;
}

.progress-text,
.pick-counter {
  font-size: 0.52rem;
}

.progress-bar-wrap {
  height: 18px;
  padding: 3px;
  margin: 12px 0 18px;
  background: #341721;
}

.progress-bar {
  height: 100%;
  background: repeating-linear-gradient(
    to right,
    #f6b07f 0 14px,
    #f6b07f 14px 18px,
    #f184b0 18px 32px
  );
  box-shadow:
    inset 0 0 0 2px rgba(255, 247, 196, 0.4),
    inset 0 -2px 0 rgba(143, 87, 18, 0.28);
}

.grid-wrap {
  display: inline-block;
}

.game-grid {
  display: grid;
  gap: 5px;
}

.cell {
  width: 68px;
  height: 68px;
  background: linear-gradient(180deg, #24151f 0%, #160d14 100%);
  border: 3px solid #000;
  position: relative;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28);
}

.cell.selected {
  border-color: var(--primary);
  background: linear-gradient(
    180deg,
    rgba(255, 77, 184, 0.34) 0%,
    rgba(233, 30, 140, 0.22) 100%
  );
}

.cell:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.28),
    0 0 0 1px #000,
    0 0 10px rgba(233, 30, 140, 0.35);
}

.cell.submitted {
  cursor: default;
}

body.play-page #results-panel .grid-wrap .cell.submitted,
body.past-rounds-page .grid-wrap .cell.submitted {
  --pick-heat-alpha: calc(0.14 + (var(--pick-heat, 0) * 0.48));
  --pick-heat-glow: calc(0.08 + (var(--pick-heat, 0) * 0.18));
  background:
    linear-gradient(
      180deg,
      rgba(255, 180, 213, var(--pick-heat-alpha)) 0%,
      rgba(255, 92, 184, calc(var(--pick-heat-alpha) * 0.92)) 45%,
      rgba(93, 22, 66, calc(0.62 + (var(--pick-heat, 0) * 0.16))) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 238, calc(0.06 + (var(--pick-heat, 0) * 0.18))),
    inset 0 -3px 0 rgba(0, 0, 0, 0.28),
    0 0 10px rgba(255, 107, 191, var(--pick-heat-glow));
}

.cell.green {
  border-color: var(--primary);
  background: rgba(255, 92, 184, 0.2);
}

body.play-page #results-panel .grid-wrap .cell.green,
body.past-rounds-page .grid-wrap .cell.green {
  background:
    linear-gradient(
      180deg,
      rgba(255, 180, 213, var(--pick-heat-alpha)) 0%,
      rgba(255, 92, 184, calc(var(--pick-heat-alpha) * 0.92)) 45%,
      rgba(93, 22, 66, calc(0.62 + (var(--pick-heat, 0) * 0.16))) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 238, calc(0.06 + (var(--pick-heat, 0) * 0.18))),
    inset 0 -3px 0 rgba(0, 0, 0, 0.28),
    0 0 0 1px #000,
    0 0 12px rgba(127, 255, 130, 0.22);
}

.cell.orange {
  border-color: var(--warning);
  background: rgba(245, 166, 35, 0.18);
}

.cell.red {
  border-color: var(--danger);
  background: rgba(224, 82, 82, 0.18);
}

.cell.grey {
  background: #1e2130;
}

.cell .cell-val {
  font-family: "Retro Pixel Thick", "Press Start 2P", monospace;
  font-size: 1.3rem;
  display: block;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -62%);
  text-shadow: 1px 1px 0 #000;
}

.cell .cell-pickers {
  font-family: "Retro Pixel Cute Mono", "Press Start 2P", monospace;
  font-size: 1rem;
  display: block;
  line-height: 1;
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #b894a3;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-top: 10px;
}

.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.swatch.green {
  background: rgba(255, 92, 184, 0.5);
  border-color: var(--primary);
}

.swatch.orange {
  background: rgba(245, 166, 35, 0.5);
  border-color: var(--warning);
}

.swatch.red {
  background: rgba(224, 82, 82, 0.5);
  border-color: var(--danger);
}

.swatch.grey {
  background: #1e2130;
}

.btn {
  display: inline-block;
  padding: 12px 16px;
  border: 3px solid #000;
  background: linear-gradient(180deg, #ff62b9 0%, #e91e8c 100%);
  color: #fff2fb;
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    4px 4px 0 rgba(0, 0, 0, 0.45);
}

.btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.28);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

.btn.secondary {
  background: linear-gradient(180deg, #4a2d47 0%, #2a1627 100%);
}

.btn.danger {
  background: linear-gradient(180deg, #ff8c97 0%, #ff5f6d 100%);
}

.btn.sm {
  padding: 10px 12px;
  font-size: 0.48rem;
}

.btn.large {
  width: 100%;
}

.error {
  margin: 14px 0;
  padding: 10px 12px;
  background: rgba(224, 82, 82, 0.18);
  border: 3px solid var(--danger);
  color: #ffd3d7;
  font-size: 0.5rem;
  line-height: 1.8;
}

.error-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 14px 28px;
  background: linear-gradient(180deg, rgba(180, 40, 40, 0.95) 0%, rgba(80, 10, 10, 0.98) 100%);
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 180, 180, 0.15),
    6px 6px 0 rgba(0, 0, 0, 0.4);
  color: #ffd3d7;
  font-family: var(--ff-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-align: center;
  animation: toast-in 0.3s ease-out;
}

.error-toast.hidden {
  display: none;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.preview-auth-form,
form {
  margin: 18px auto 20px;
  max-width: 420px;
  display: grid;
  gap: 10px;
}

body.login-preview .preview-auth-form {
  max-width: 320px;
}

body.login-preview .content {
  max-width: 620px;
  margin: 86px auto 0;
}

.card.wide form,
.bot-add {
  max-width: none;
}

.preview-auth-label,
form label {
  font-family: "Press Start 2P", monospace;
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  color: #ffd8ed;
  text-transform: uppercase;
  text-align: left;
}

.preview-auth-input,
input[type="text"],
input[type="number"],
input[type="password"] {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 3px solid #000;
  background: linear-gradient(180deg, #2c1627 0%, #170d16 100%);
  color: #ffe8f5;
  font-family: "Press Start 2P", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  outline: none;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.45),
    3px 3px 0 #000;
}

.preview-auth-btn,
form button[type="submit"].preview-auth-btn {
  position: relative;
  min-height: 40px;
}

.leaderboard-pill {
  position: absolute;
  top: 28px;
  left: calc(28px + 2 * 100px + 2 * var(--hud-gap));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--hud-gap);
}

.pixel-hud .leaderboard-pill,
.pixel-hud .pixel-hud-extra {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  display: flex;
  align-items: center;
  gap: var(--hud-gap);
}

.leaderboard-pill button,
.leaderboard-pill a {
  cursor: pointer;
}

.leaderboard-pill a {
  text-decoration: none;
  color: #ffe6f3;
  background: linear-gradient(
    180deg,
    rgba(162, 44, 104, 0.96) 0%,
    rgba(104, 21, 64, 0.96) 100%
  );
}

.leaderboard-pill button:hover,
.leaderboard-pill a:hover {
  filter: brightness(1.08);
}

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.modal-box {
  position: relative;
  width: min(92vw, 960px);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
}

.modal-header h2 {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #ffe8f5;
}

.modal-body {
  padding: 12px 14px;
}

.btn-close {
  background: none;
  border: 0;
  color: #ffd8ed;
  cursor: pointer;
  font-family: "Press Start 2P", monospace;
  font-size: 0.7rem;
  line-height: 1;
}

body.modal-open {
  overflow: hidden;
}

#rules-modal .modal-box {
  width: min(92vw, 960px);
}

.rules-modal-body {
  overflow: auto;
  padding: 12px 14px;
}

.rules-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  padding: 0 14px;
}

.rules-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 8px 14px;
  font-family: "Press Start 2P", monospace;
  font-size: 0.48rem;
  color: rgba(255, 234, 245, 0.45);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.rules-tab:hover {
  color: #ffeaf5;
}

.rules-tab.active {
  color: #ff62b9;
  border-bottom-color: #ff62b9;
}

.rules-tab-panel {
  display: none;
}

.rules-tab-panel.active {
  display: block;
}

.rules-placeholder {
  color: rgba(255, 234, 245, 0.4);
  font-size: 0.52rem;
  font-style: italic;
  text-align: center;
  padding: 32px 0;
}

.rules-list {
  margin: 0;
  padding-left: 1.6rem;
  display: grid;
  gap: 16px;
  color: #ffeaf5;
  font-size: 0.56rem;
  line-height: 2;
}

.rules-list li::marker {
  color: #ff62b9;
}

.rules-formula {
  color: #fff2b8;
}

@media (max-width: 900px) {
  .two-col,
  .picking-layout,
  .room-header,
  .round-header,
  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .contracts-split,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .contracts-col {
    max-height: none;
  }

  .app-scene {
    opacity: 0.18;
  }

  #rules-modal .modal-box {
    width: min(94vw, 640px);
  }

  .rules-modal-body {
    padding: 16px;
  }

  .rules-tab {
    font-size: 0.42rem;
    padding: 6px 10px;
  }

  .rules-list {
    gap: 14px;
    font-size: 0.52rem;
    line-height: 1.9;
  }
}

@media (max-width: 640px) {
  .app-shell {
    padding: 0;
  }

  .center-wrap,
  .panel {
    padding: 0 0 18px;
  }

  .app-content {
    padding: 14px;
  }

  .topnav {
    top: 14px;
    right: 14px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: calc(100vw - 28px);
  }

  .leaderboard-pill {
    top: 14px;
    left: calc(14px + 2 * 100px + 2 * var(--hud-gap));
  }

  .pixel-hud .leaderboard-pill,
  .pixel-hud .pixel-hud-extra {
    top: auto;
    left: auto;
  }

  .pixel-hud {
    top: 14px;
    left: 14px;
  }

  .topbar-center {
    top: 14px;
  }

  body.play-page .app-content,
  body.host-page .app-content {
    padding-bottom: 36px;
  }

  .app-scene {
    display: none;
  }

  .card {
    padding: 18px 16px 20px;
  }

  .btn,
  input[type="text"],
  input[type="number"],
  input[type="password"] {
    font-size: 0.46rem;
  }

  .leaderboard,
  .round-plan,
  .roster li,
  .hint,
  .contract-desc {
    font-size: 0.44rem;
  }
}

/* play page tuning */

body.play-page .panel {
  min-height: calc(100vh - 140px);
  align-items: flex-start;
  padding-top: 65px;
}

body.play-page .screen::before,
body.play-page .screen-full::before {
  display: none;
}

body.play-page .card {
  width: min(100%, 1180px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.play-page #waiting-panel {
  display: grid;
  place-items: center;
}

body.play-page #waiting-panel .waiting-screen {
  width: min(100%, 720px);
  margin: 0 auto;
  text-align: center;
}

body.play-page #lobby-panel {
  display: grid;
  place-items: center;
}

body.play-page #lobby-panel .lobby-screen {
  width: min(100%, 920px);
  margin: 0 auto;
  text-align: center;
}

body.play-page .card.wide {
  max-width: 1180px;
}

body.play-page .eyebrow {
  display: none;
}

body.play-page .game-logo {
  display: none;
}

body.play-page #waiting-panel .game-logo {
  display: block;
}

body.play-page #lobby-panel .game-logo {
  display: block;
}

body.play-page .play-topbar-logo {
  font-family: "Game Of Squids", "Press Start 2P", sans-serif;
  font-size: clamp(1.25rem, 3.4vw, 2.15rem);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ff5cb8;
  text-shadow:
    2px 0 0 #000,
    -2px 0 0 #000,
    0 2px 0 #000,
    0 -2px 0 #000,
    4px 4px 0 rgba(143, 15, 86, 0.75);
}

body.play-page.post-round-waiting .topbar-center {
  display: none;
}

body.play-page .card.wide {
  display: grid;
  align-content: start;
}

body.play-page .game-tagline {
  margin-bottom: 14px;
}

body.play-page .subtitle {
  margin-bottom: 22px;
}

body.play-page #waiting-panel .game-tagline {
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: 0.06rem;
  margin-bottom: 12px;
}

body.play-page #lobby-panel .game-tagline {
  font-size: clamp(0.84rem, 2vw, 1.1rem);
  line-height: 1.5;
  letter-spacing: 0.08rem;
  margin-bottom: 10px;
}

body.play-page #waiting-panel .subtitle {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

body.play-page #lobby-panel .subtitle {
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

body.play-page #waiting-panel .waiting-results-link {
  display: inline-flex;
  min-width: 250px;
  margin: 0 auto 22px;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  text-align: center;
}

body.play-page #waiting-panel .loading-card {
  margin-top: 0;
  margin-bottom: 0;
}

body.play-page #lobby-name-display {
  margin-bottom: 22px;
}

body.play-page .squid-symbols {
  display: block;
  margin: 0 auto 1.4rem;
}

body.play-page #lobby-panel .eyebrow,
body.play-page #picking-panel .eyebrow,
body.play-page #results-panel .eyebrow,
body.play-page #finished-panel .eyebrow {
  display: none;
}

body.play-page #lobby-panel .game-logo,
body.play-page #picking-panel .game-logo,
body.play-page #results-panel .game-logo,
body.play-page #finished-panel .game-logo {
  margin-bottom: 20px;
}

body.play-page #lobby-panel .squid-symbols,
body.play-page #picking-panel .squid-symbols,
body.play-page #results-panel .squid-symbols,
body.play-page #finished-panel .squid-symbols {
  margin: 14px auto 0;
}

body.play-page #lobby-panel .squid-symbols {
  margin: 0 auto 1.3rem;
}

body.play-page .lobby-roster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: min(100%, 760px);
  margin: 0 auto;
}

body.play-page .lobby-roster-panel {
  min-height: 260px;
  padding: 16px 16px 14px;
  text-align: left;
  background: linear-gradient(
    180deg,
    rgba(255, 138, 209, 0.18) 0%,
    rgba(86, 22, 56, 0.36) 100%
  );
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    4px 4px 0 rgba(0, 0, 0, 0.32);
}

body.play-page .lobby-roster-panel .contracts-half-label {
  display: inline-block;
  min-width: 0;
  margin-bottom: 14px;
}

body.play-page .lobby-roster-panel .roster {
  min-height: 0;
  max-height: 210px;
  overflow: auto;
  padding: 0;
  padding-right: 6px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    linear-gradient(
      180deg,
      rgba(37, 14, 31, 0.96) 0%,
      rgba(15, 7, 12, 0.98) 100%
    );
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 217, 237, 0.08),
    4px 4px 0 rgba(0, 0, 0, 0.26);
}

body.play-page .lobby-roster-panel .roster li {
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  padding: 11px 14px;
  font-size: 0.5rem;
}

body.play-page .lobby-roster-panel .roster li:last-child {
  border-bottom: 0;
}

body.play-page .lobby-roster-panel .roster li.me {
  color: #ffe9f6;
  background: linear-gradient(
    180deg,
    rgba(255, 102, 189, 0.08) 0%,
    rgba(52, 16, 39, 0.45) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 122, 200, 0.22);
}

body.play-page .lobby-roster-panel .roster li.me span:first-child {
  color: #ff7ac8;
}

@media (max-width: 900px) {
  body.play-page .lobby-roster-grid {
    grid-template-columns: 1fr;
    width: min(100%, 520px);
  }

  body.play-page .lobby-roster-panel {
    min-height: 0;
  }
}

body.play-page .round-header {
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 3px solid rgba(255, 130, 201, 0.18);
}

body.play-page .pick-counter,
body.play-page .score-banner,
body.play-page .pixel-hud .hud-pill,
body.play-page .topnav .hud-pill,
body.play-page .leaderboard-pill button,
body.play-page .leaderboard-pill a {
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.12),
    4px 4px 0 rgba(0, 0, 0, 0.35);
}

body.play-page .pick-counter {
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #f1c8dc;
  min-width: 0;
  font-size: 0.54rem;
  text-align: left;
}

body.play-page .grid-wrap .pick-counter {
  margin-left: 10px;
}

body.play-page .picking-layout,
body.play-page .two-col {
  margin-top: 20px;
}

body.play-page .picking-layout {
  display: grid;
  grid-template-columns: max-content minmax(560px, 1fr);
  align-items: stretch;
  gap: 14px;
  width: 100%;
}

body.play-page #picking-panel {
  --pick-panel-height: 420px;
}

body.play-page .picking-main {
  display: flex;
  align-self: stretch;
  width: max-content;
  min-width: 0;
}

body.play-page .contracts-col,
body.play-page .contracts-half,
body.play-page .grid-wrap,
body.play-page .leaderboard,
body.play-page #contract-results-list,
body.play-page .score-banner {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    linear-gradient(
      180deg,
      rgba(57, 19, 41, 0.92) 0%,
      rgba(19, 8, 15, 0.96) 100%
    );
  border: 4px solid #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 217, 237, 0.12),
    6px 6px 0 rgba(0, 0, 0, 0.28);
}

body.play-page .grid-wrap,
body.play-page .contracts-col,
body.play-page #contract-results-list {
  padding: 16px;
}

body.play-page #picking-panel .grid-wrap,
body.play-page #picking-panel .contracts-col {
  min-height: var(--pick-panel-height);
}

body.play-page .contracts-half {
  padding: 14px;
}

body.play-page .contracts-col {
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025) 0%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    linear-gradient(180deg, #2d1325 0%, #180910 100%);
}

body.play-page .hide-picks-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

body.play-page .hide-picks-row .btn {
  min-width: 170px;
}

body.play-page .hide-picks-row-picking,
body.play-page .hide-picks-row-results {
  width: 100%;
}

body.play-page .contracts-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

body.play-page .contracts-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

body.play-page .leaderboard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.35;
}

body.play-page .grid-wrap,
body.play-page .leaderboard {
  position: relative;
}

body.play-page #contract-results-section {
  position: relative;
}

body.play-page .contracts-col::before,
body.play-page .grid-wrap::before {
  display: none;
}

body.play-page.hide-picks #picking-panel .grid-wrap::after,
body.play-page.hide-picks #picking-panel .contracts-col::after,
body.play-page.hide-picks #results-panel .grid-wrap::after,
body.play-page.hide-picks #results-panel #contract-results-section::after {
  content: "PRIVATE VIEW";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    linear-gradient(
      180deg,
      rgba(28, 10, 23, 0.94) 0%,
      rgba(14, 6, 11, 0.97) 100%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.03) 0 2px,
      transparent 2px 6px
    );
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 212, 236, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.35);
  color: #ffe6f3;
  font-family: "Press Start 2P", monospace;
  font-size: 0.66rem;
  line-height: 1.8;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 #000,
    0 0 10px rgba(255, 92, 184, 0.24);
  z-index: 8;
}

body.play-page.hide-picks #picking-panel .grid-wrap > *,
body.play-page.hide-picks #picking-panel .contracts-col > *,
body.play-page.hide-picks #results-panel .grid-wrap > *,
body.play-page.hide-picks #results-panel #contract-results-section > * {
  visibility: hidden;
}

body.play-page.hide-picks #picking-panel .grid-wrap::after,
body.play-page.hide-picks #picking-panel .contracts-col::after,
body.play-page.hide-picks #results-panel .grid-wrap::after,
body.play-page.hide-picks #results-panel #contract-results-section::after {
  visibility: visible;
}

body.play-page .grid-wrap {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: auto;
}

body.play-page .contracts-sticky-label,
body.play-page .contracts-half-label {
  color: #ffe6f3;
  text-shadow: 2px 2px 0 #000;
}

body.play-page .contracts-sticky-label {
  margin-bottom: 16px;
  display: inline-block;
  padding: 8px 10px 6px;
  background: linear-gradient(
    180deg,
    rgba(255, 111, 196, 0.16) 0%,
    rgba(65, 18, 44, 0.92) 100%
  );
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 222, 240, 0.08),
    4px 4px 0 rgba(0, 0, 0, 0.22);
}

body.play-page .contracts-half {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 10px;
}

body.play-page .contracts-half-label {
  margin-bottom: 0;
  color: #fff3fa;
  padding: 6px 8px 4px;
  background: rgba(255, 112, 197, 0.08);
  border: 2px solid rgba(0, 0, 0, 0.85);
}

body.play-page .score-banner {
  margin: 18px 0 20px;
  padding: 12px 14px;
  justify-content: space-between;
  gap: 14px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 206, 115, 0.08) 0%,
      rgba(255, 92, 184, 0.08) 100%
    ),
    linear-gradient(
      180deg,
      rgba(45, 16, 34, 0.96) 0%,
      rgba(18, 8, 14, 0.98) 100%
    );
}

body.play-page .leaderboard {
  overflow: hidden;
}

body.play-page .roster {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    linear-gradient(
      180deg,
      rgba(37, 14, 31, 0.96) 0%,
      rgba(15, 7, 12, 0.98) 100%
    );
  border: 4px solid #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 217, 237, 0.12),
    6px 6px 0 rgba(0, 0, 0, 0.24);
}

body.play-page .roster li {
  background: linear-gradient(
    180deg,
    rgba(255, 102, 189, 0.1) 0%,
    rgba(39, 16, 31, 0.9) 100%
  );
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 217, 237, 0.08),
    4px 4px 0 rgba(0, 0, 0, 0.26);
}

body.play-page .contract-category-label {
  font-family: var(--ff-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 220, 240, 0.5);
  padding: 6px 2px 2px;
  margin-top: 6px;
}

body.play-page .contract-category-label:first-child {
  margin-top: 0;
}

body.play-page .contract-card {
  padding: 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 102, 189, 0.14) 0%,
    rgba(42, 15, 31, 0.96) 100%
  );
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 217, 237, 0.1),
    4px 4px 0 rgba(0, 0, 0, 0.3);
}

body.play-page .contract-pricing {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

body.play-page .contract-buy,
body.play-page .contract-cancel {
  margin-top: 12px;
  min-width: 110px;
}

body.play-page .btn,
body.play-page .btn.secondary,
body.play-page .btn.danger {
  background: linear-gradient(
    180deg,
    rgba(162, 44, 104, 0.96) 0%,
    rgba(104, 21, 64, 0.96) 100%
  );
}

body.play-page .contract-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

body.play-page .contract-card.purchased {
  background: linear-gradient(
    180deg,
    rgba(255, 112, 197, 0.26) 0%,
    rgba(57, 18, 41, 0.96) 100%
  );
}

body.play-page .contract-name {
  color: #fff1f8;
  text-shadow: 2px 2px 0 #000;
  line-height: 1.5;
}

body.play-page .contract-desc,
body.play-page .contract-pricing,
body.play-page .contract-result-desc,
body.play-page .hint,
body.play-page .legend {
  color: #f1c8dc;
}

body.play-page .leaderboard {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025) 0%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    linear-gradient(180deg, #2a1221 0%, #13070e 100%);
}

body.play-page .leaderboard th {
  color: #fff0f8;
  background: rgba(255, 90, 180, 0.12);
}

body.play-page .leaderboard td {
  color: #f6dcea;
}

body.play-page .leaderboard tr:last-child td {
  border-bottom: 0;
}

body.play-page .leaderboard tr.me td {
  background: rgba(255, 102, 189, 0.08);
}

body.play-page #results-panel .score-banner {
  display: flex;
  width: auto;
  margin: 12px 0 18px;
  padding: 0;
  gap: 18px;
  justify-content: flex-start;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.play-page #results-panel .score-banner span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #f0d7e4;
  font-size: 0.62rem;
}

body.play-page #results-panel .score-banner strong {
  color: #ff72c5;
  font-size: 0.72rem;
  text-shadow:
    1px 1px 0 #000,
    0 0 8px rgba(255, 114, 197, 0.18);
}

body.play-page .results-layout {
  display: grid;
  gap: 18px;
  margin-top: 12px;
}

body.past-rounds-page .past-rounds-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}

body.past-rounds-page .past-rounds-picker {
  position: relative;
  display: inline-block;
}

body.past-rounds-page .past-round-trigger {
  min-width: 240px;
  min-height: 48px;
  padding: 12px 54px 12px 14px;
  color: #fff2fb;
  background-image:
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAiElEQVR4AeyVSwqAMAxErb3/kUvlLbJr0UmQbkYI+WFmeAu9r8OPDZiACZiACcgE5hjzLZSvu2yA4633tgv2SsgGEIbASoQ5+9VuN5MNcAgRxKgj6JlH/zWnDHAcMUSpyfTUaqQNIIRoRZwbJQMcwAQ5G2UDWeF4zwZMwARMwARM4HcC8dPZ5QcAAP//ECGsHwAAAAZJREFUAwBDyEBBUd1lRgAAAABJRU5ErkJggg=="),
    linear-gradient(
      180deg,
      rgba(162, 44, 104, 0.96) 0%,
      rgba(104, 21, 64, 0.96) 100%
    );
  background-repeat: no-repeat;
  background-size:
    45px 45px,
    100% 100%;
  background-position:
    calc(100% - 4px) calc(50% + 2px),
    0 0;
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 217, 237, 0.14),
    4px 4px 0 rgba(0, 0, 0, 0.24);
  font-family: "Press Start 2P", monospace;
  font-size: 0.54rem;
  line-height: 1.2;
  text-align: left;
  image-rendering: pixelated;
  cursor: pointer;
}

body.past-rounds-page .past-round-trigger:focus {
  outline: none;
  border-color: #ff7ac8;
  box-shadow:
    inset 0 0 0 2px rgba(255, 217, 237, 0.14),
    4px 4px 0 rgba(0, 0, 0, 0.24),
    0 0 0 2px rgba(255, 122, 200, 0.22);
}

body.past-rounds-page .past-round-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  z-index: 8;
  padding: 8px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    linear-gradient(
      180deg,
      rgba(57, 19, 41, 0.96) 0%,
      rgba(19, 8, 15, 0.98) 100%
    );
  border: 4px solid #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 217, 237, 0.12),
    6px 6px 0 rgba(0, 0, 0, 0.28);
}

body.past-rounds-page .past-round-option {
  width: 100%;
  padding: 12px 14px;
  margin: 0;
  color: #ffeef8;
  background: transparent;
  border: 0;
  font-family: "Press Start 2P", monospace;
  font-size: 0.5rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

body.past-rounds-page .past-round-option + .past-round-option {
  margin-top: 6px;
}

body.past-rounds-page .past-round-option:hover,
body.past-rounds-page .past-round-option.active {
  background: linear-gradient(
    180deg,
    rgba(255, 112, 197, 0.24) 0%,
    rgba(81, 22, 52, 0.92) 100%
  );
  box-shadow: inset 0 0 0 2px rgba(255, 217, 237, 0.1);
}

body.past-rounds-page .empty-rounds-card {
  max-width: 720px;
  margin: 18px auto 0;
  padding: 24px 22px 26px;
  text-align: center;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    radial-gradient(
      circle at 50% 0%,
      rgba(255, 84, 180, 0.12) 0%,
      transparent 48%
    ),
    linear-gradient(
      180deg,
      rgba(255, 95, 180, 0.06) 0%,
      rgba(11, 4, 9, 0.08) 100%
    ),
    linear-gradient(180deg, #160a12 0%, #10070d 60%, #070306 100%);
  background-size:
    32px 32px,
    32px 32px,
    auto,
    auto,
    auto;
  border: 4px solid #000;
  box-shadow:
    inset 0 0 0 4px #433730,
    inset 0 0 0 10px #0f0a08,
    inset 0 0 0 14px #000,
    8px 8px 0 rgba(0, 0, 0, 0.4);
}

body.play-page .results-top {
  display: grid;
  gap: 14px;
  align-content: start;
}

body.play-page .results-leaderboard {
  display: grid;
  gap: 8px;
}

body.play-page .results-grid-area {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  width: 100%;
}

body.play-page #results-panel {
  --results-grid-panel-height: 430px;
}

body.play-page .results-grid-area > div {
  display: flex;
}

body.play-page .results-contracts {
  align-self: stretch;
  width: 100%;
  min-height: 0;
}

body.play-page #contract-results-section {
  margin-top: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: var(--results-grid-panel-height);
  min-height: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    linear-gradient(
      180deg,
      rgba(57, 19, 41, 0.92) 0%,
      rgba(19, 8, 15, 0.96) 100%
    );
  border: 4px solid #000;
  box-shadow:
    inset 0 0 0 2px rgba(255, 217, 237, 0.12),
    6px 6px 0 rgba(0, 0, 0, 0.28);
  max-width: none;
}

body.play-page #contract-results-section h3 {
  margin-bottom: 12px;
  width: max-content;
}

body.play-page #contract-results-list {
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.play-page #contract-results-section .hide-picks-row {
  margin-top: 14px;
}

body.play-page #contract-results-list::-webkit-scrollbar {
  width: 6px;
}

body.play-page #contract-results-list::-webkit-scrollbar-track {
  background: rgba(31, 10, 23, 0.9);
}

body.play-page #contract-results-list::-webkit-scrollbar-thumb {
  background: var(--primary);
}

body.play-page #results-panel .grid-wrap {
  height: var(--results-grid-panel-height);
  overflow: hidden;
}

body.play-page .contract-result-row {
  margin-top: 8px;
  padding: 8px 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 156, 216, 0.18) 0%,
    rgba(72, 29, 53, 0.88) 100%
  );
  border: 2px solid #000;
  box-shadow:
    inset 0 0 0 1px rgba(255, 237, 246, 0.08),
    2px 2px 0 rgba(0, 0, 0, 0.12);
}

body.play-page .contract-result-row.result-win {
  background: linear-gradient(
    180deg,
    rgba(184, 255, 114, 0.22) 0%,
    rgba(53, 95, 28, 0.78) 100%
  );
  border-color: #4d8f2e;
}

body.play-page .contract-result-row.result-loss {
  background: linear-gradient(
    180deg,
    rgba(255, 149, 170, 0.22) 0%,
    rgba(112, 34, 49, 0.82) 100%
  );
  border-color: #a63d52;
}

body.play-page .contract-result-row.result-unpicked {
  background: linear-gradient(
    180deg,
    rgba(214, 206, 212, 0.18) 0%,
    rgba(92, 78, 87, 0.84) 100%
  );
  border-color: rgba(173, 156, 165, 0.65);
}

body.play-page .contract-result-header {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

body.play-page .contract-result-name {
  color: #fff2fa;
  font-size: 0.52rem;
  flex: 1 1 180px;
  margin-right: 0;
}

body.play-page .contract-result-desc,
body.play-page #contract-results-section .hint,
body.play-page #most-picked-label {
  color: #f1c8dc;
}

body.play-page .contract-result-pnl {
  margin-left: auto;
  font-size: 0.58rem;
  line-height: 1;
  text-shadow: 1px 1px 0 #000;
}

body.play-page .contract-result-row.result-win .contract-result-pnl {
  color: #c8ff8d;
}

body.play-page .contract-result-row.result-loss .contract-result-pnl {
  color: #ff9fb2;
}

body.play-page .contract-result-row.result-unpicked .contract-result-name,
body.play-page .contract-result-row.result-unpicked .contract-result-desc {
  color: #cdb7c1;
}

body.play-page .contract-result-pnl.neutral {
  color: #d9cad1;
  opacity: 0.95;
}

body.past-rounds-page #past-rounds-panel {
  --results-grid-panel-height: 430px;
}

body.past-rounds-page #contract-results-section {
  height: var(--results-grid-panel-height);
}

body.past-rounds-page #contract-results-list {
  overflow: auto;
}

body.play-page .grid-wrap {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025) 0%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    linear-gradient(180deg, #27111f 0%, #12070d 100%);
}

body.play-page .game-grid {
  gap: 8px;
}

body.play-page .cell {
  width: 72px;
  height: 72px;
  background: linear-gradient(
    180deg,
    rgba(255, 110, 191, 0.1) 0%,
    rgba(34, 13, 27, 0.96) 100%
  );
  box-shadow:
    inset 0 0 0 2px rgba(255, 217, 237, 0.08),
    inset 0 -3px 0 rgba(0, 0, 0, 0.24),
    3px 3px 0 rgba(0, 0, 0, 0.28);
  transition:
    transform 120ms steps(2, end),
    border-color 120ms steps(2, end),
    box-shadow 120ms steps(2, end);
}

body.play-page .cell .cell-val {
  font-family: "Retro Pixel Thick", "Press Start 2P", monospace;
  color: #fff2fb;
  text-shadow:
    1px 1px 0 #000,
    0 0 8px rgba(255, 168, 218, 0.14);
}

body.play-page .cell .cell-pickers {
  font-family: "Retro Pixel Cute Mono", "Press Start 2P", monospace;
  color: #ffe2ef;
  font-size: 0.7rem;
  text-shadow: 1px 1px 0 #000;
}

body.play-page #results-panel .grid-wrap .cell .cell-pickers,
body.play-page #results-panel .grid-wrap .cell .cell-val {
  color: #fff7fc;
}

body.play-page #results-panel .grid-wrap .cell .cell-pickers {
  margin-top: 4px;
  font-size: 0.44rem;
  letter-spacing: 0.03em;
  color: #ffd36e;
  text-shadow:
    1px 1px 0 #000,
    0 0 6px rgba(255, 211, 110, 0.18);
}

body.play-page #results-panel .legend,
body.play-page #results-panel .hint,
body.play-page #results-panel #most-picked-label,
body.play-page #results-panel .contract-result-desc {
  color: #ffe3f0;
}

body.play-page .btn.large {
  max-width: 420px;
  margin: 22px auto 0;
}

body.play-page .pick-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 12px;
  margin-top: 22px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body.play-page .pick-actions .btn {
  margin: 0;
}

body.play-page .pick-actions-main {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

body.play-page .pick-actions #submit-btn {
  flex: 0 0 auto;
  width: 320px;
  max-width: none;
}

body.play-page .pick-actions #change-picks-btn {
  flex: 0 0 auto;
  width: 220px;
  max-width: none;
}

body.play-page .pick-actions .hide-picks-btn-inline {
  grid-column: 3;
  justify-self: end;
  width: 160px;
  min-width: 160px;
  max-width: none;
}

body.play-page #waiting-panel .card,
body.play-page #lobby-panel .card,
body.play-page #results-panel .card,
body.play-page #finished-panel .card {
  row-gap: 6px;
}

body.play-page #submitted-notice,
body.play-page #change-picks-btn {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

body.play-page #submitted-notice {
  max-width: none;
  white-space: nowrap;
}

@media (max-width: 900px) {
  body.play-page .picking-layout {
    grid-template-columns: 1fr;
  }

  body.play-page .contracts-col {
    max-width: none;
  }

  body.play-page .contracts-split {
    grid-template-columns: 1fr;
  }

  body.play-page #picking-panel .grid-wrap,
  body.play-page #picking-panel .contracts-col {
    min-height: 0;
  }

  body.play-page .results-layout,
  body.play-page .results-grid-area {
    grid-template-columns: 1fr;
  }

  body.past-rounds-page .past-rounds-header {
    flex-direction: column;
    align-items: flex-start;
  }

  body.past-rounds-page .past-round-trigger {
    min-width: 0;
    width: 100%;
  }

  body.play-page .pick-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  body.play-page .pick-actions-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  body.play-page .pick-actions .hide-picks-btn-inline {
    width: 100%;
    min-width: 0;
    justify-self: auto;
  }

  body.play-page .hide-picks-row-picking,
  body.play-page .hide-picks-row-results {
    justify-content: center;
  }

  body.play-page .pick-actions #submit-btn,
  body.play-page .pick-actions #change-picks-btn {
    flex: none;
    width: min(100%, 420px);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  body.play-page .panel {
    min-height: auto;
    padding-top: 58px;
  }

  body.play-page .card {
    padding: 18px 14px 20px;
  }

  body.play-page .play-topbar-logo {
    font-size: clamp(1.02rem, 5vw, 1.45rem);
  }

  body.play-page .score-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Round deadline timer ────────────────────────────────────────────────── */
.round-deadline {
  font-family: "Press Start 2P", monospace;
  font-size: 0.55rem;
  color: var(--accent-pink, #ff82c9);
  letter-spacing: 0.5px;
}

.round-deadline.deadline-expired {
  color: #ff4444;
  animation: blink-deadline 1s step-end infinite;
}

@keyframes blink-deadline {
  50% { opacity: 0.3; }
}

/* ── Host deadline input ─────────────────────────────────────────────────── */
.start-round-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.deadline-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.deadline-input {
  font-size: 0.6rem;
  padding: 0.4rem 0.6rem;
  background: var(--card-bg, #1a0f16);
  border: 2px solid var(--border, #3a2535);
  color: var(--text, #e8d5dc);
  border-radius: 4px;
}