:root {
  --gold: #ffd15d;
  --purple: #bb45ff;
  --bg: #07040d;
  --panel: rgba(20, 9, 37, .92);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 50% 16%, rgba(124, 32, 190, .24), transparent 36%),
    radial-gradient(circle at 10% 82%, rgba(255, 199, 72, .08), transparent 27%),
    linear-gradient(180deg, #050309, #100719);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, select { font: inherit; }
.app { min-height: 100vh; padding: 16px clamp(12px, 2vw, 26px) 12px; }
.game-header {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  align-items: center;
  max-width: 1260px;
  margin: 0 auto 4px;
}
.title { width: min(620px, 66vw); justify-self: center; }
.exit-button, .mode-badge {
  min-height: 40px;
  border: 1px solid rgba(185, 70, 255, .52);
  border-radius: 999px;
  color: #f4eafd;
  background: rgba(20, 9, 37, .86);
  box-shadow: inset 0 0 18px rgba(112, 25, 170, .15);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.exit-button { padding: 0 16px; cursor: pointer; }
.mode-badge { display: grid; place-items: center; padding: 0 12px; }
.layout {
  display: grid;
  grid-template-columns: minmax(205px, 270px) minmax(320px, 590px) minmax(205px, 270px);
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
  max-width: 1260px;
  margin: 0 auto;
}
.panel {
  padding: 18px;
  background: var(--panel);
  border: 1px solid rgba(185, 70, 255, .52);
  border-radius: 18px;
  box-shadow: inset 0 0 30px rgba(112, 25, 170, .18), 0 18px 44px rgba(0,0,0,.22);
}
.panel h2 { margin: 0 0 18px; color: var(--gold); letter-spacing: .08em; font-size: 1rem; }
.panel label { display: grid; gap: 8px; font-size: .72rem; color: #cdbddd; letter-spacing: .08em; font-weight: 800; }
select, .panel button {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid #7e38ad;
  color: #fff;
  background: #1b0b2c;
}
.panel button { margin-top: 10px; cursor: pointer; font-weight: 900; letter-spacing: .04em; }
.panel button:hover:not(:disabled) { border-color: #d79aff; filter: brightness(1.12); }
.panel button:disabled { opacity: .42; cursor: default; }
.status {
  margin: 16px 0;
  padding: 12px;
  text-align: center;
  color: var(--gold);
  border: 1px solid #6e2c98;
  border-radius: 10px;
  background: rgba(7, 2, 15, .56);
  font-weight: 950;
  letter-spacing: .08em;
}
.status[data-state="won"] { box-shadow: 0 0 22px rgba(255, 209, 93, .18); }
.score { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.score div { display: grid; gap: 5px; }
.score span { color: #bfaecf; font-size: .68rem; }
.score strong { font-size: 1.6rem; }
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(68vw, 590px);
  aspect-ratio: 1;
  gap: 8px;
  padding: 18px;
  border-radius: 28px;
  filter: drop-shadow(0 0 22px rgba(169, 50, 255, .38));
}
.cell {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.cell:hover:not(:disabled) { transform: translateY(-2px) scale(1.015); filter: brightness(1.18); }
.cell:disabled { cursor: default; }
.cell-frame, .mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.mark {
  inset: 13%;
  width: 74%;
  height: 74%;
  animation: pop .18s cubic-bezier(.2,.85,.35,1.25);
}
.cell.win .mark { filter: brightness(1.3) drop-shadow(0 0 14px var(--purple)); }
dl { margin: 0; }
dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(183, 100, 226, .1); }
dt { color: #c9b5d9; }
dd { margin: 0; font-weight: 850; text-align: right; }
.game-note { max-width: 900px; margin: 10px auto 0; color: #8f7ca1; text-align: center; font-size: .72rem; }
@keyframes pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 920px) {
  .app { padding-top: 8px; }
  .game-header { grid-template-columns: 92px 1fr 92px; }
  .exit-button, .mode-badge { min-height: 34px; padding: 0 8px; font-size: .58rem; }
  .title { width: min(500px, 62vw); }
  .layout { grid-template-columns: 1fr 1fr; max-width: 680px; }
  .board { grid-column: 1 / -1; width: min(92vw, 520px); justify-self: center; order: -1; }
  .side { min-width: 0; }
}
@media (max-width: 580px) {
  .app { padding: 6px 8px 12px; }
  .game-header { grid-template-columns: 72px 1fr 72px; }
  .exit-button { font-size: 0; }
  .exit-button::after { content: "←"; font-size: 1rem; }
  .mode-badge { font-size: .48rem; }
  .title { width: 58vw; }
  .layout { grid-template-columns: 1fr; gap: 8px; }
  .board { width: min(96vw, 430px); padding: 8px; gap: 4px; }
  .panel { width: min(96vw, 430px); justify-self: center; padding: 12px; }
  .control-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-items: center; }
  .control-panel h2 { grid-column: 1 / -1; margin-bottom: 0; }
  .control-panel .status { margin: 0; }
  .control-panel .score { grid-column: 1 / -1; }
  .info-panel dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .game-note { margin-top: 6px; font-size: .62rem; }
}

/* v0.6.1 — compact portrait action visibility.
   Series controls remain scrollable, but compact screens now reserve less of
   the first viewport for decoration and expose the action panel sooner. */
@media(max-width:580px) and (max-height:700px){
  .app{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .title{max-height:52px}
  .board{width:min(78vw,300px);padding:6px;gap:3px;border-radius:20px}
  .panel{padding:9px 10px}
  .panel h2{margin-bottom:8px}
  .control-panel{gap:6px 8px}
  .control-panel .status{padding:8px}
  .info-panel{display:grid;grid-template-columns:1fr 1fr;gap:7px 8px}
  .info-panel h2,.info-panel dl{grid-column:1/-1}
  .info-panel dl{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
  .info-panel button{min-height:42px;margin-top:0}
}

/* v0.6.1 compact-screen follow-up: expose the series controls without a
   misleading dead end on short portrait phones. */
@media(max-width:580px) and (max-height:700px){
  .board{width:min(70vw,270px)}
  .panel{padding:8px 9px}
  .info-panel button{padding:9px 8px}
}

@media(max-width:580px) and (max-height:700px){
  .app{width:100%;overflow-x:clip}
  .board{width:min(62vw,225px)}
  .panel{max-width:100%}
  .info-panel button{min-height:42px;padding:7px 6px;font-size:.78rem}
}