:root {
  color-scheme: dark;
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --navy-950: #041225;
  --navy-900: #071d3a;
  --navy-800: #0b2a50;
  --blue-500: #1768dc;
  --blue-600: #0e50b7;
  --red: #ff4b3f;
  --yellow: #ffc234;
  --white: #f8fbff;
  --muted: #9eb3cb;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy-950); }
body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--white);
  background: radial-gradient(circle at 50% 28%, #0d3765 0, var(--navy-900) 42%, var(--navy-950) 100%);
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid white; outline-offset: 3px; }

.app-shell { width: min(100% - 32px, 780px); min-height: 100dvh; margin: 0 auto; padding: 22px 0 20px; display: flex; flex-direction: column; }
.app-header { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { border-radius: 50%; filter: drop-shadow(0 5px 8px #0008); }
h1 { margin: 0; font-size: clamp(1.55rem, 5vw, 2.3rem); letter-spacing: -0.045em; line-height: 1; }
h1 span { color: var(--yellow); }
.icon-button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #52749a; border-radius: 50%; background: linear-gradient(#123c69, #071c38); box-shadow: 0 5px 10px #0006, inset 0 1px #ffffff25; cursor: pointer; }
.icon-button svg { width: 25px; fill: currentColor; }

.scoreboard { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 24px; margin: 25px 0 18px; }
.player-card, .turn-status { min-height: 80px; border: 1px solid #315d89; border-radius: 18px; background: linear-gradient(145deg, #0c315b, #061b35); box-shadow: 0 9px 15px #0005, inset 0 1px #ffffff17; }
.player-card { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; opacity: .65; transition: opacity .2s, transform .2s, border-color .2s; }
.player-card.active { opacity: 1; transform: translateY(-2px); }
.player-one.active { border-color: var(--red); }
.player-two.active { border-color: var(--yellow); }
.player-card div { display: grid; text-align: center; }
.player-card span:not(.mini-disc) { font-size: .74rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.player-one span:not(.mini-disc) { color: var(--red); }
.player-two span:not(.mini-disc) { color: var(--yellow); }
.player-card strong { font-size: 1.75rem; line-height: 1; }
.mini-disc { width: 44px; aspect-ratio: 1; flex: 0 0 auto; border-radius: 50%; box-shadow: inset 0 -6px 0 #0003, inset 0 3px 0 #fff5, 0 4px 5px #0008; }
.player-one .mini-disc { background: var(--red); }
.player-two .mini-disc { background: var(--yellow); }
.turn-status { display: grid; place-content: center; justify-items: center; border: 2px solid var(--red); text-align: center; text-transform: uppercase; transition: border-color .2s; }
.turn-status[data-player="2"] { border-color: var(--yellow); }
.turn-status strong { font-size: 1.15rem; letter-spacing: .02em; }
.turn-arrow { width: 0; height: 0; margin-top: 8px; border: 8px solid transparent; border-top-color: var(--red); border-bottom: 0; }
.turn-status[data-player="2"] .turn-arrow { border-top-color: var(--yellow); }
.turn-status[data-player="draw"] .turn-arrow { display: none; }

.game-area { margin: auto 0; padding: 10px 0; }
.board { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: .48fr repeat(6, 1fr); gap: clamp(5px, 1.1vw, 10px); width: 100%; aspect-ratio: 7 / 6.45; padding: clamp(9px, 2vw, 17px); border: 1px solid #67a6ff; border-radius: 22px; background: linear-gradient(145deg, #2376ec, #0b4cb1); box-shadow: 0 18px 25px #0007, inset 0 2px #ffffff55, inset 0 -4px #001b6455; }
.drop-target { min-width: 0; border: 0; border-radius: 50%; background: #082d5e; box-shadow: inset 0 2px 3px #0008, 0 1px #ffffff35; cursor: pointer; }
.drop-target span { display: block; width: 0; height: 0; margin: auto; border: clamp(6px, 1.3vw, 10px) solid transparent; border-top-color: #2d7de2; border-bottom: 0; transform: translateY(2px); transition: border-color .15s, transform .15s; }
.drop-target:hover span, .drop-target:focus-visible span { border-top-color: var(--white); transform: translateY(4px); }
.board.locked .drop-target { cursor: default; opacity: .4; }
.cell { position: relative; aspect-ratio: 1; border-radius: 50%; background: #031a34; box-shadow: inset 0 6px 9px #000c, 0 2px 1px #ffffff3b; overflow: hidden; }
.cell::after { content: ""; position: absolute; inset: 5%; border-radius: inherit; transform: translateY(-145%); transition: transform 330ms cubic-bezier(.2,.8,.2,1); box-shadow: inset 0 -10px 0 #0002, inset 0 5px 0 #ffffff55, 0 3px 4px #000a; }
.cell.player-1::after { background: var(--red); transform: translateY(0); }
.cell.player-2::after { background: var(--yellow); transform: translateY(0); }
.cell.winner::after { animation: winner-pulse .75s ease-in-out infinite alternate; box-shadow: 0 0 0 4px white, 0 0 24px #fff, inset 0 -10px #0002, inset 0 5px #fff5; }
@keyframes winner-pulse { to { transform: scale(.84); } }

.actions { display: flex; justify-content: center; gap: 28px; margin: 20px 0 0; }
.action-button { min-width: 175px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid #315d89; border-radius: 13px; background: linear-gradient(#103b69, #082241); box-shadow: 0 7px 10px #0005, inset 0 1px #ffffff20; font-size: 1rem; font-weight: 800; cursor: pointer; transition: transform .15s, filter .15s; }
.action-button.primary { border-color: #4287d1; }
.action-button:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-2px); }
.action-button:active:not(:disabled) { transform: translateY(1px); }
.action-button:disabled { opacity: .4; cursor: not-allowed; }
.action-button svg { width: 22px; fill: currentColor; }
.keyboard-hint { margin: 13px 0 0; color: var(--muted); text-align: center; font-size: .75rem; }
kbd { margin: 0 2px; padding: 1px 4px; border: 1px solid #52749a; border-radius: 4px; background: #0b2a50; font: inherit; }

@media (max-width: 600px) {
  .app-shell { width: min(100% - 20px, 480px); padding: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom)); }
  .brand { gap: 8px; }
  .brand img { width: 39px; height: 39px; }
  .icon-button { width: 40px; height: 40px; }
  .scoreboard { gap: 7px; margin: 18px 0 10px; }
  .player-card, .turn-status { min-height: 65px; border-radius: 13px; }
  .player-card { gap: 7px; padding: 7px 4px; }
  .mini-disc { width: clamp(24px, 8vw, 36px); }
  .player-card span:not(.mini-disc) { font-size: .58rem; }
  .player-card strong { font-size: 1.35rem; }
  .turn-status strong { font-size: clamp(.72rem, 3.2vw, .95rem); }
  .game-area { margin: clamp(14px, 3vh, 24px) 0 0; padding: 0; }
  .board { border-radius: 13px; }
  .actions { gap: 10px; margin-top: auto; padding-top: 16px; }
  .action-button { min-width: 0; flex: 1; min-height: 49px; }
  .keyboard-hint { display: none; }
}

@media (max-height: 720px) and (min-width: 601px) {
  .app-shell { width: min(100% - 32px, 610px); padding-block: 12px; }
  .scoreboard { margin-block: 12px 5px; }
  .player-card, .turn-status { min-height: 60px; }
  .mini-disc { width: 34px; }
  .game-area { padding: 4px 0; }
  .actions { margin-top: 8px; }
  .keyboard-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}