:root {
  --ink: #061c34;
  --paper: #eef7fb;
  --baby-blue: #9edcf5;
  --blue: #287fba;
  --red: #e60012;
  --line: 2px solid var(--ink);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.92), transparent 28%),
    repeating-linear-gradient(0deg, rgba(6,28,52,.018) 0 1px, transparent 1px 4px),
    var(--paper);
  color: var(--ink);
  font-family: "Montserrat", system-ui, sans-serif;
  overflow-x: hidden;
}

button { color: inherit; font: inherit; }

.game-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(620px, 1fr);
}

.masthead {
  min-height: 126px;
  padding: 20px clamp(18px, 3vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: var(--line);
  background: rgba(238,247,251,.9);
  backdrop-filter: blur(14px);
  position: relative;
  z-index: 5;
}

.wordmark-kicker {
  display: block;
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 4px 4px;
}

.wordmark h1 {
  margin: 0;
  font: 400 clamp(58px, 7vw, 94px)/.7 "League Gothic", Impact, sans-serif;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.wordmark h1 span { color: var(--blue); }

.game-back {
  color: var(--ink);
  border-color: var(--ink);
  background: rgba(255,255,255,.72);
}

.game-back:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--baby-blue);
}

.control-cluster { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.mode-switch { display: flex; border: var(--line); border-radius: 999px; padding: 4px; background: #fff; box-shadow: 5px 5px 0 var(--ink); }

.mode-button,
.reset-button,
.help-button,
.end-round-button {
  border: 0;
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.mode-button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: transparent;
}

.mode-button span { font: 500 9px/1 "DM Mono", monospace; display: block; }
.mode-button.active { background: var(--ink); color: #fff; }
.mode-button:hover,
.reset-button:hover { transform: translateY(-2px); }

.reset-button {
  min-height: 54px;
  padding: 0 19px;
  border: var(--line);
  border-radius: 3px;
  background: var(--baby-blue);
  box-shadow: 5px 5px 0 var(--ink);
}

.help-button {
  width: 48px;
  height: 48px;
  border: var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 20px;
}

.playfield { position: relative; min-height: 620px; overflow: hidden; isolation: isolate; }

.playfield::before,
.playfield::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: var(--line);
  pointer-events: none;
}

.playfield::before { width: 110px; height: 110px; border-radius: 50%; background: var(--blue); top: 12%; left: -52px; }
.playfield::after { width: 90px; height: 90px; background: var(--red); transform: rotate(17deg); right: -46px; top: 28%; }

#gameCanvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#gameCanvas.dragging { cursor: grabbing; }

.score-strip {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 12px;
  border: var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: 4px 4px 0 var(--ink);
  font: 500 11px/1 "DM Mono", monospace;
  text-transform: uppercase;
}

.score-strip > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.score-strip strong { font-size: 15px; }
.x-dot,.o-dot { width: 10px; height: 10px; display: inline-block; border-radius: 50%; }
.x-dot { background: var(--red); }.o-dot { background: var(--blue); }
.round-label { opacity: .52; }

.status-card {
  position: absolute;
  z-index: 3;
  left: clamp(14px, 3vw, 42px);
  top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 290px;
  padding: 11px 14px;
  border: var(--line);
  background: var(--baby-blue);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-1deg);
}

.status-card p { margin: 0; font: 700 11px/1.35 "DM Mono", monospace; text-transform: uppercase; }
.status-light { width: 11px; height: 11px; flex: 0 0 auto; border: 2px solid var(--ink); border-radius: 50%; background: var(--red); }
.status-light.o-turn { background: var(--blue); }
.status-light.cpu { background: var(--blue); animation: statusBlink 500ms steps(2,end) infinite; }
.status-light.done { background: var(--ink); }

.instruction {
  position: absolute;
  z-index: 3;
  right: clamp(14px, 3vw, 42px);
  top: 22px;
  display: flex;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(6,28,52,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  font: 700 11px/1 "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.instruction span { border-bottom: 2px solid currentColor; padding-bottom: 4px; }

.end-round-button {
  position: absolute;
  z-index: 6;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-1deg);
  min-height: 58px;
  padding: 0 24px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: var(--baby-blue);
  box-shadow: 7px 7px 0 var(--ink);
}

.end-round-button:hover { transform:translate(-50%,-54%) rotate(-1deg); }

.toss-help-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
}

.toss-help-modal[hidden] { display:none; }
.toss-help-backdrop { position:absolute; inset:0; background:rgba(6,28,52,.72); backdrop-filter:blur(6px); }
.toss-help-card { position:relative; width:min(560px,100%); padding:34px; border:3px solid var(--ink); border-radius:18px; background:var(--paper); box-shadow:12px 14px 0 rgba(0,0,0,.28); }
.toss-help-card h2 { margin:8px 0 20px; font:400 64px/.85 "League Gothic",Impact,sans-serif; text-transform:uppercase; }
.toss-help-card ol { padding-left:22px; }
.toss-help-card li,.toss-help-card p { font-size:15px; line-height:1.6; }
.toss-help-close { position:absolute; top:14px; right:14px; width:42px; height:42px; border:0; border-radius:50%; background:var(--ink); color:#fff; font-size:25px; cursor:pointer; }
body.toss-modal-open { overflow:hidden; }

.load-error {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
  max-width: 420px;
  padding: 22px;
  border: var(--line);
  background: var(--red);
  color: white;
  font-weight: 800;
  text-align: center;
}

@keyframes statusBlink { 50% { opacity: .25; transform: scale(.75); } }

@media (min-width: 1100px) {
  .score-strip {
    top: 18px;
    gap: 28px;
    padding: 12px 19px;
    border-width: 3px;
    font-size: 14px;
  }

  .score-strip strong { font-size: 20px; }
  .x-dot,.o-dot { width: 13px; height: 13px; }

  .status-card {
    top: 22px;
    max-width: 390px;
    gap: 13px;
    padding: 15px 19px;
    border-width: 3px;
  }

  .status-card p { font-size: 13px; }
  .status-light { width: 14px; height: 14px; }
}

@media (max-width: 820px) {
  .masthead { align-items: flex-start; min-height: 154px; }
  .control-cluster { max-width: 330px; }
  .status-card { top: 70px; }
}

@media (max-width: 600px) {
  .game-shell { min-height:100svh; grid-template-rows:auto minmax(520px,1fr); }
  .masthead { padding:12px 14px; display:grid; min-height:142px; gap:10px; }
  .wordmark-kicker { font-size:8px; }
  .wordmark h1 { font-size:52px; }
  .game-title-line { gap:8px; }
  .game-back { width:32px; height:32px; font-size:25px; }
  .control-cluster { justify-content:space-between; max-width:none; flex-wrap:nowrap; gap:8px; }
  .mode-button { min-height:38px; padding-inline:10px; font-size:13px; }
  .mode-switch { box-shadow:3px 3px 0 var(--ink); }
  .help-button { width:42px; height:42px; flex:0 0 auto; box-shadow:3px 3px 0 var(--ink); }
  .reset-button { min-height:44px; padding-inline:12px; font-size:12px; box-shadow:3px 3px 0 var(--ink); }
  .playfield { min-height:520px; }
  .score-strip { top:8px; }
  .status-card { top:58px; left:50%; transform:translateX(-50%) rotate(-1deg); width:min(340px,calc(100% - 24px)); }
  .instruction { left:50%; right:auto; top:calc(var(--bin-top, 370px) - 46px); transform:translateX(-50%); width:max-content; max-width:calc(100% - 20px); gap:8px; padding:8px 10px; font-size:10px; }
  .end-round-button { min-height:52px; padding-inline:18px; }
  .toss-help-card { padding:28px 22px 24px; }
  .toss-help-card h2 { font-size:54px; }
}

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