@import url("./game-release.css");

/* Shared game-page shell; game-specific board and state styles stay local. */
body[data-game-layout] { --game-toolbar-ink: var(--accent); min-width: 0; }
html:not([data-color-mode="dark"]) body[data-game-layout][data-theme="whatdas"] { --game-toolbar-ink: #4354a5; }

html[data-color-mode="dark"] body[data-game-layout] {
  --game-masthead-image: url("./backgrounds/shop-masthead.webp");
  --game-masthead-softness: 0.1;
  --game-masthead-glow-strength: 0.82;
  --game-panel-fill: linear-gradient(145deg, #162c49, #0d1b32 65%, #1a2044);
  --game-panel-border: linear-gradient(135deg, #48c8ee, #5276ae 45%, #a784dc);
  --paper: #101f38;
  --canvas: #0c1b35;
  --line: #405a82;
  position: relative;
  isolation: isolate;
  background-color: var(--canvas);
  background-image:
    linear-gradient(rgb(12 27 53 / var(--game-masthead-softness)), rgb(12 27 53 / var(--game-masthead-softness))),
    var(--game-masthead-image);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

html[data-color-mode="dark"] body[data-game-layout][data-theme="zeroin"] {
  --game-masthead-glow-strength: 0.2;
  --game-panel-fill: linear-gradient(145deg, #10293d, #0a192b 65%, #10243a);
  --game-panel-border: linear-gradient(135deg, #43cbdc, #305878 50%, #4b83a6);
  --canvas: #03101f;
  --paper: #0c1d30;
  --line: #34566e;
  --accent: #73d6ec;
  --accent-soft: #16364a;
  background-image: radial-gradient(ellipse at 50% 0, rgb(29 111 139 / 20%), transparent 72%);
  background-size: 100% 42.857vw;
}

html[data-color-mode="dark"] body[data-game-layout][data-theme="whatdas"] {
  --game-masthead-image: none;
  --game-masthead-glow-strength: 0;
  --game-panel-fill: linear-gradient(145deg, #172f59, #101d42 58%, #30224f);
  --game-panel-border: linear-gradient(135deg, #568fff, #4968c1 50%, #ad7aff);
  --canvas: #0b1530;
  --paper: #111f40;
  --line: #465b91;
  --accent: #91baff;
  --accent-soft: #252b55;
  background-image:
    radial-gradient(ellipse at 18% 0, rgb(75 132 255 / 18%), transparent 58%),
    radial-gradient(ellipse at 82% 8%, rgb(167 112 255 / 16%), transparent 56%);
  background-size: 100% 48vw;
}

html[data-color-mode="dark"] body[data-game-layout][data-theme="one-lie"] {
  --game-masthead-image: none;
  --game-masthead-glow-strength: 0;
  --game-panel-fill: none;
  --canvas: #20172e;
  --paper: #30233f;
  --line: #70558e;
  --ink: #f3ebfc;
  --muted: #c4b1d6;
  --accent: #cda8f4;
  --accent-soft: #49315e;
  background-image: radial-gradient(ellipse at 50% 0, rgb(174 117 228 / 13%), transparent 72%);
  background-size: 100% 48vw;
}

html[data-color-mode="dark"] body[data-game-layout][data-theme="trickshot"] {
  --game-masthead-image: none;
  --game-masthead-glow-strength: 0;
  --game-panel-fill: linear-gradient(145deg, #39261c, #21150f 65%, #302019);
  --game-panel-border: linear-gradient(135deg, #df8865, #9a5137 50%, #e5a579);
  --canvas: #1c120e;
  --paper: #2b1d16;
  --line: #6f4937;
  --ink: #f4e5db;
  --muted: #c6aa98;
  --accent: #df8865;
  --accent-soft: #422c25;
  background-image: radial-gradient(ellipse at 50% 0, rgb(188 94 44 / 22%), transparent 72%);
  background-size: 100% 48vw;
}

html[data-color-mode="dark"] body[data-game-layout][data-theme="tippy"] {
  --game-masthead-image: none;
  --game-masthead-glow-strength: 0;
  --game-panel-fill: linear-gradient(145deg, #392b3d, #281d2e 65%, #42303b);
  --game-panel-border: linear-gradient(135deg, #8edbc3, #ad8cc4 50%, #ffad87);
  --canvas: #211724;
  --paper: #302335;
  --line: #6d5271;
  --ink: #f1e9ef;
  --muted: #c8b5c8;
  --accent: #9ce0c4;
  --accent-soft: #3c3541;
  background-image: radial-gradient(ellipse at 50% 0, rgb(178 157 235 / 10%), transparent 72%);
  background-size: 100% 48vw;
}

html[data-color-mode="dark"] body[data-game-layout][data-theme="shoo"] {
  --game-masthead-image: none;
  --game-masthead-glow-strength: 0;
  --game-panel-fill: linear-gradient(145deg, #353a2d, #25291f 65%, #343127);
  --game-panel-border: linear-gradient(135deg, #a6baa0, #66765b 50%, #d9b875);
  --canvas: #1c2119;
  --paper: #2a3025;
  --line: #59634d;
  --ink: #f1eedf;
  --muted: #bbbfa9;
  --accent: #d9b875;
  --accent-soft: #3d4030;
  background-image: radial-gradient(ellipse at 50% 0, rgb(166 186 160 / 10%), transparent 72%);
  background-size: 100% 48vw;
}

html[data-color-mode="dark"] body[data-game-layout][data-theme="sumthing"] {
  --game-masthead-image: none;
  --game-masthead-glow-strength: 0;
  --game-panel-fill: none;
  --canvas: #211b16;
  --paper: #30271f;
  --line: #756044;
  --ink: #f5eddb;
  --muted: #c4b397;
  --accent: #e7c780;
  --accent-soft: #443622;
  background-image: radial-gradient(ellipse at 50% 0, rgb(231 199 128 / 9%), transparent 72%);
  background-size: 100% 48vw;
}

html[data-color-mode="dark"] body[data-game-layout][data-theme="ontarget"] {
  --game-masthead-image: none;
  --game-masthead-glow-strength: 0;
  --game-panel-fill: linear-gradient(145deg, #1d2852, #0b193b 65%, #302052);
  --game-panel-border: linear-gradient(135deg, #9095ff, #b974ec 50%, #ed8ed8);
  --canvas: #0b1227;
  --paper: #111f40;
  --line: #4a4b80;
  --accent: #c5a0ff;
  --accent-soft: #322650;
  background-image: radial-gradient(ellipse at 50% 0, rgb(198 173 255 / 16%), transparent 72%);
  background-size: 100% 48vw;
}

body[data-game-layout]::before {
  position: absolute;
  z-index: -1;
  inset: 17vw 0 0;
  background-image: radial-gradient(rgb(130 191 255 / 28%) .75px, transparent .75px);
  background-size: 18px 18px;
  mask-image: radial-gradient(ellipse 160% 300px at 50% 0, transparent 0%, #000 100%);
  content: "";
  pointer-events: none;
}

body[data-game-layout][data-theme="zeroin"]::before {
  top: 38vw;
  mask-image: linear-gradient(transparent, #000 180px);
}

body[data-game-layout][data-theme="whatdas"]::before {
  inset: 0;
  mask-image: linear-gradient(transparent calc(100% - 240px), #000);
}

body[data-game-layout][data-theme="one-lie"]::before {
  inset: 0;
  background-image: radial-gradient(rgb(205 168 244 / 22%) .75px, transparent .75px);
  mask-image: linear-gradient(transparent calc(100% - 240px), #000);
}

body[data-game-layout][data-theme="trickshot"]::before {
  inset: 0;
  background-image: radial-gradient(rgb(206 112 80 / 28%) .75px, transparent .75px);
  mask-image: linear-gradient(transparent calc(100% - 240px), #000);
}

body[data-game-layout][data-theme="tippy"]::before {
  inset: 0;
  mask-image: linear-gradient(transparent calc(100% - 240px), #000);
}

body[data-game-layout][data-theme="shoo"]::before {
  inset: 0;
  background-image: radial-gradient(rgb(217 184 117 / 22%) .75px, transparent .75px);
  mask-image: linear-gradient(transparent calc(100% - 240px), #000);
}

body[data-game-layout][data-theme="sumthing"]::before {
  inset: 0;
  background-image: radial-gradient(rgb(231 199 128 / 22%) .75px, transparent .75px);
  mask-image: linear-gradient(transparent calc(100% - 240px), #000);
}

body[data-game-layout][data-theme="ontarget"]::before {
  inset: 0;
  mask-image: linear-gradient(transparent calc(100% - 240px), #000);
}

body[data-game-layout]::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 280px at 36% 14%, rgb(12 24 43 / var(--game-masthead-glow-strength)), transparent),
    radial-gradient(ellipse 100% 180px at 50% 42%, rgb(12 24 43 / var(--game-masthead-glow-strength)), transparent);
  content: "";
  pointer-events: none;
}

[data-game-layout] .page-shell { width: min(1320px, calc(100% - 48px)); }

[data-game-layout] .site-header {
  width: min(1240px, 100%);
  margin-inline: auto;
}

[data-game-layout] .site-brand,
[data-game-layout] .hub-link { text-shadow: 0 2px 14px rgb(3 9 20 / 45%); }
[data-game-layout] .site-mark { filter: drop-shadow(0 0 10px rgb(130 191 255 / 36%)); }

[data-game-layout] .game-shell {
  width: 100%;
  max-width: none;
}

[data-game-layout] .app-heading {
  display: flex;
  min-height: 208px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 28px 12px;
  text-align: center;
  text-shadow: 0 2px 18px #061124;
}

[data-game-layout] .app-heading .app-eyebrow {
  margin: 0 0 10px;
  color: #b6d6f7;
  font-size: 12px;
  letter-spacing: .12em;
}

[data-game-layout] .game-title-row,
[data-game-layout] .title-row {
  justify-content: center;
  gap: 18px;
}

[data-game-layout] .app-heading h1 {
  font: 800 clamp(38px, 4.5vw, 64px)/1.05 var(--font-display);
  letter-spacing: .035em;
}

[data-game-layout] .app-heading img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgb(75 192 255 / 25%));
}

[data-game-layout][data-theme="shoo"] .app-heading img {
  filter: drop-shadow(0 0 16px rgb(166 186 160 / 25%));
}

[data-game-layout][data-theme="sumthing"] .app-heading img {
  filter: drop-shadow(0 0 16px rgb(231 199 128 / 25%));
}

[data-game-layout][data-theme="one-lie"] .app-heading img {
  filter: drop-shadow(0 0 16px rgb(205 168 244 / 25%));
}

[data-game-layout] .app-heading .game-description {
  max-width: 720px;
  margin: 12px 0 0;
  color: #d3e2f5;
  font-size: 14px;
  line-height: 1.6;
}

[data-game-layout] .game-engagement {
  max-width: 100%;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  background: rgb(12 27 53 / 85%);
  text-shadow: none;
}

[data-game-layout] .game-engagement-like { min-height: 28px; }
[data-game-layout] .game-engagement-status:empty { display: none; }
[data-game-layout] .game-engagement-controls { width: auto; }
body[data-game-layout] :is(.site-header-actions > .button, .site-header-actions .account-widget-toggle, .game-engagement, .game-engagement-like, .game-session-utilities > .account-control, .game-utility-actions > .account-control) {
  border-color: var(--line);
  background: var(--paper);
  color: var(--game-toolbar-ink);
}
body[data-game-layout] .game-engagement-stat strong { color: var(--game-toolbar-ink); }
body[data-game-layout] .site-audio-toggle { color: var(--game-toolbar-ink); }
body[data-game-layout] :is(.site-header-actions > .button, .site-header-actions .account-widget-toggle, .game-engagement-like, .game-session-utilities > .account-control, .game-utility-actions > .account-control):hover:not(:disabled),
body[data-game-layout] .game-engagement-like[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--game-toolbar-ink);
}

[data-game-layout] :is(.game-session-utilities, .game-utility-actions) { align-items: center; flex-wrap: wrap; }
[data-game-layout] :is(.game-session-utilities, .game-utility-actions) > .game-engagement { display: flex; flex: 0 1 auto; flex-flow: row wrap; justify-content: center; gap: 8px; margin: 0; padding: 3px 8px; font-size: 11px; }
[data-game-layout] :is(.game-session-utilities, .game-utility-actions) .game-engagement-totals,
[data-game-layout] :is(.game-session-utilities, .game-utility-actions) .game-engagement-stat,
[data-game-layout] :is(.game-session-utilities, .game-utility-actions) .game-engagement-controls { gap: 6px; }
[data-game-layout] :is(.game-session-utilities, .game-utility-actions) .game-engagement-controls { width: auto; }
[data-game-layout] :is(.game-session-utilities, .game-utility-actions) .game-engagement-like { min-height: 26px; padding: 3px 8px; font-size: 11px; }

.game-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr);
  align-items: start;
  gap: 20px;
}

.game-primary, .game-sidebar { display: grid; min-width: 0; gap: 16px; }

[data-game-layout] .game-play-panel,
[data-game-layout] .game-quick-guide,
[data-game-layout] .game-sidebar > .daily-leaderboard,
[data-game-layout] .game-more,
[data-game-layout] .game-primary > .range-note {
  min-width: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 22px;
  background:
    var(--game-panel-fill) padding-box,
    var(--game-panel-border) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), 0 12px 32px rgb(0 0 0 / 18%);
}

.game-panel-title {
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  font: 750 20px/1.3 var(--font-display);
}

[data-game-layout] .game-play-panel > .game-controls,
[data-game-layout] .game-play-panel > .controls {
  margin-top: 0;
}

[data-game-layout] .game-play-panel > .mode-tabs { margin-bottom: 12px; }

[data-game-layout] .mode-tabs,
[data-game-layout] .difficulty-tabs {
  max-width: 100%;
  flex-wrap: wrap;
  background: rgb(8 21 45 / 50%);
}

[data-game-layout] .game-play-panel > .difficulty-tabs { margin: 0 0 12px; }

[data-game-layout] .mode-tab[aria-pressed="true"],
[data-game-layout] .difficulty-tab[aria-pressed="true"] {
  background: linear-gradient(180deg, #91d6ff, #39bdf0);
  color: #081b30;
  box-shadow: 0 0 12px rgb(57 189 240 / 18%);
}

[data-game-layout] .stage,
[data-game-layout] .orbit-stage,
[data-game-layout] .courtyard {
  margin-inline: auto;
}

[data-game-layout] .game-quick-guide h2,
[data-game-layout] .game-sidebar .daily-leaderboard h2 {
  margin: 0;
  font: 750 20px/1.3 var(--font-display);
}

.game-quick-guide ol {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: game-step;
}

.game-quick-guide li {
  position: relative;
  min-height: 25px;
  padding-left: 36px;
  color: #d3e2f5;
  font-size: 13px;
  line-height: 1.55;
  counter-increment: game-step;
}

.game-quick-guide li::before {
  position: absolute;
  left: 0;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #9fbaff, #6580d8);
  color: #081b30;
  font-weight: 900;
  content: counter(game-step);
}

.game-recommendations { display: grid; gap: 10px; }
[data-game-layout] .game-recommendations {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
[data-game-layout] main > .game-recommendations {
  grid-column: auto;
  grid-row: auto;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  width: 100%;
  margin-top: 28px;
}
[data-game-layout] main > .game-recommendations h2 { grid-column: 1 / -1; }
@media (max-width: 600px) {
  [data-game-layout] main > .game-recommendations { grid-template-columns: minmax(0, 1fr); }
}
.game-recommendations h2 { margin: 0 0 4px; font: 750 20px/1.3 var(--font-display); }
[data-game-layout] .game-recommendations a {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 0;
  padding: 12px;
  background: none;
  color: var(--ink);
  text-decoration: none;
}
.game-recommendations a:hover { color: var(--accent); }
.game-recommendations a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.game-recommendations img { width: 40px; height: 40px; flex: none; object-fit: contain; }
.game-recommendations span { min-width: 0; overflow-wrap: anywhere; }
.game-recommendations strong { display: block; font: 750 15px/1.3 var(--font-display); }
.game-recommendations small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }

[data-game-layout] .game-more { padding: 0; }
[data-game-layout] main > .game-more { width: min(820px, 100%); margin: 28px auto 0; }
.game-more > summary {
  border-radius: inherit;
  padding: 16px 20px;
  font: 700 16px/1.4 var(--font-display);
  cursor: pointer;
}
.game-more > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

[data-game-layout] .game-more .game-guide {
  max-width: none;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 16px 16px;
  padding: 18px 20px;
  background: transparent;
  font-size: 13px;
  line-height: 1.65;
}

[data-game-layout] .game-more .game-guide h2 { font: 700 18px/1.3 var(--font-display); }
[data-game-layout] .game-more .game-guide h3 { font-size: 15px; }
[data-game-layout] .game-more .game-guide a { color: var(--accent); }
[data-game-layout] .game-sidebar .daily-leaderboard { padding: 18px; }
[data-game-layout] .game-sidebar .leaderboard-heading { gap: 8px; }
[data-game-layout] .game-sidebar .leaderboard-note { font-size: 11px; }
[data-game-layout] .game-sidebar .leaderboard-table-wrap { max-height: 420px; }
[data-game-layout] .game-primary > .range-note { max-width: none; padding: 16px; }
[data-game-layout] .temperature-scale-key { grid-template-columns: repeat(7, minmax(0, 1fr)); }
[data-game-layout] .site-footer { width: min(1320px, calc(100% - 64px)); }

[data-theme="zeroin"] .game-play-panel { container: zeroin-board / inline-size; }
[data-game-layout] .game-play-layout {
  grid-template-columns: minmax(245px, 1fr) minmax(0, 1fr);
  overflow: visible;
}
[data-game-layout] .attempt-row {
  min-height: 46px;
  grid-template-columns: repeat(3, 44px) minmax(80px, 1fr);
  gap: 6px;
}
[data-game-layout] .digit-cell { width: 44px; font-size: 21px; }
[data-game-layout] .thermal-radar { overflow: visible; }
[data-game-layout] .thermal-radar-graphic { width: 100%; max-width: 420px; }
.game-hint-key { padding: 0 20px 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.game-hint-key strong { color: var(--ink); }

@container zeroin-board (max-width: 480px) {
  [data-game-layout] .game-play-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  [data-game-layout] .thermal-radar { width: 180px; margin-inline: auto; grid-column: 1; grid-row: 2; }
}

@media (max-width: 1000px) {
  .game-workspace { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 16px; }
  [data-game-layout] .game-play-panel { padding: 18px; }
  [data-game-layout] .temperature-scale-key { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .game-workspace { grid-template-columns: minmax(0, 1fr); }
  [data-game-layout] .app-heading { min-height: 190px; }
  [data-game-layout] .game-play-panel { padding: 20px; }
  [data-game-layout] .site-footer { width: calc(100% - 40px); }
}

@media (max-width: 520px) {
  [data-game-layout] .page-shell { width: calc(100% - 28px); }
  [data-game-layout] .site-nav { border-bottom-color: rgb(130 191 255 / 22%); }
  [data-game-layout] .app-heading { min-height: 180px; padding: 24px 0; }
  [data-game-layout] .app-heading img { width: 48px; height: 48px; }
  [data-game-layout] .game-title-row, [data-game-layout] .title-row { gap: 10px; }
  [data-game-layout] .app-heading .app-eyebrow { font-size: 10px; }
  [data-game-layout] .app-heading .game-description { font-size: 12px; }
  [data-game-layout] .game-engagement { gap: 8px; padding: 5px 10px; }
  [data-game-layout] .game-engagement-totals, [data-game-layout] .game-engagement-stat { gap: 6px; }
  [data-game-layout] .game-play-panel, [data-game-layout] .game-quick-guide { padding: 16px; }
  [data-game-layout] .game-primary > .range-note { flex-direction: column; gap: 10px; }
  [data-game-layout] .temperature-scale { width: 100%; }
  [data-game-layout] .site-footer { width: calc(100% - 24px); }
}

@media (max-width: 360px) {
  [data-game-layout] .attempt-row { grid-template-columns: repeat(3, 38px) minmax(70px, 1fr); gap: 5px; }
  [data-game-layout] .digit-cell { width: 38px; font-size: 19px; }
  [data-game-layout] .app-heading h1 { font-size: 32px; }
}
body[data-game-layout] [class$="-cog-companion"]:not([data-positioned]) { visibility: hidden; transition: none; }
html[data-game-loading="pending"] body[data-game-layout] [class$="-cog-companion"] { transition: none; }