/* Game and replay interfaces share the site's ink-blue / copper identity. */
:root { --play-paper:#f3f7f7; --play-ink:#142b38; --play-muted:#4e6974; --play-line:#cad9dc; --play-accent:#205e76; --play-copper:#a66d31; --play-surface:#e7f0f1; --play-ui:"Segoe UI","Microsoft YaHei",system-ui,sans-serif; --play-display:"Iowan Old Style","Palatino Linotype","Songti SC",Georgia,serif; }
:root[data-theme="dark"] { --play-paper:#102530; --play-ink:#e5eef0; --play-muted:#a8c0c8; --play-line:#365560; --play-accent:#98d5e5; --play-copper:#e7b37b; --play-surface:#183642; }
@media(prefers-color-scheme:dark) { :root:not([data-theme]) { --play-paper:#102530; --play-ink:#e5eef0; --play-muted:#a8c0c8; --play-line:#365560; --play-accent:#98d5e5; --play-copper:#e7b37b; --play-surface:#183642; } }
:root[data-theme][data-theme-page="serpent"],:root[data-theme][data-theme-page="replay"] { --bg:var(--play-paper); --bg-deep:var(--play-surface); --fg:var(--play-ink); --fg-dim:var(--play-muted); --fg-faint:var(--play-line); --dim:var(--play-muted); --line:var(--play-line); --accent:var(--play-copper); --accent-bright:var(--play-accent); }
.sp-play-page { background:radial-gradient(ellipse at 50% 45%,var(--play-surface),var(--play-paper) 65%); padding:1.1rem; }
.sp-play-page .stage { max-width:580px; gap:1rem; }
.sp-play-page .stage > header { padding:0 0 .85rem; border-bottom:1px solid var(--play-line); align-items:center; }
.sp-play-page .site-home { color:var(--play-ink); font:600 1.5rem var(--play-display); letter-spacing:-.04em; }
.sp-play-page .title { font:.83rem var(--play-ui); color:var(--play-muted); opacity:1; }
.sp-play-page .back { font:.75rem var(--play-ui); }
.sp-play-page .mute-btn { width:28px; height:28px; }
.sp-play-page .hud { max-width:480px; padding:0; }
.sp-play-page .hud-label { color:var(--play-muted); font:.62rem var(--play-ui); letter-spacing:.05em; }
.sp-play-page .hud-value { color:var(--play-ink); font:500 1.65rem/1.4 var(--play-display); }
.sp-play-page .canvas-wrap { max-width:min(480px,calc(100dvh - 270px)); }
.sp-play-page #game { border-radius:5px; border-color:var(--play-line); box-shadow:0 12px 35px #1025300d; }
.sp-play-page .overlay { border-radius:5px; padding:1.5rem; }
.sp-play-page .overlay-title { font:500 clamp(2rem,5vw,3.3rem)/1.2 var(--play-display); letter-spacing:-.045em; font-style:normal; }
.sp-play-page .overlay-sub { font:.83rem/1.85 var(--play-ui); margin-top:.4rem; }
.sp-play-page .overlay-prompt { border:1px solid var(--play-line); border-radius:3px; padding:.55rem 1.6rem; background:var(--play-ink); color:var(--play-paper); font:.75rem var(--play-ui); margin-top:1rem; }
.sp-play-page .legend { font-family:var(--play-ui); font-size:.62rem; line-height:1.7; }
.sp-play-page .footer-hint { font:.65rem/1.7 var(--play-ui); color:var(--play-muted); }
.game-bottom-nav { display:flex; justify-content:center; gap:1rem; color:var(--play-line); font:.68rem var(--play-ui); }
.game-bottom-nav a { text-decoration:none; color:var(--play-accent); }
.sp-play-page :is(a,button):focus-visible { outline:2px solid var(--play-accent); outline-offset:4px; }
.sp-replays .wrap { width:min(100% - 5rem,1240px); max-width:none; padding:3.5rem 0 5rem; }
.sp-replays .wrap > p:first-child { font:.72rem/1.8 var(--play-ui); color:var(--play-muted); margin:0 0 2rem; }
.sp-replays .wrap > p:first-child a { color:var(--play-muted); border:0; }
.replay-intro { position:relative; padding:0 0 1rem; }
.replay-eyebrow { color:var(--play-accent); font:.75rem var(--play-ui); margin:0 0 1.2rem; }
.sp-replays h1 { margin:0 0 1rem; max-width:760px; font:500 clamp(2.8rem,5vw,4.7rem)/1.35 var(--play-display); letter-spacing:-.05em; }
.replay-subtitle { color:var(--play-muted); font:italic 1.2rem var(--play-display); }
.sp-replays .legend { border:0; border-left:2px solid var(--play-copper); background:var(--play-surface); color:var(--play-muted); border-radius:0 4px 4px 0; padding:1.1rem 1.4rem; margin:2rem 0; }
.sp-replays .legend p { margin:0; font-size:.86rem; }
.sp-replays .legend strong { color:var(--play-ink); }
.sp-replays .grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; margin-top:2rem; }
.sp-replays .card { display:flex; flex-direction:column; padding:1.4rem; border:1px solid var(--play-line); background:transparent; border-radius:4px; box-shadow:none; transition:background .3s,border-color .3s; }
.sp-replays .card:hover { background:var(--play-surface); border-color:var(--play-accent); }
.sp-replays .card[hidden],.replay-filters[hidden] { display:none; }
.replay-card__top { display:flex; justify-content:space-between; gap:.75rem; font:.65rem/1.5 var(--play-ui); color:var(--play-muted); margin-bottom:1.7rem; }
.replay-category { border-left:2px solid var(--play-accent); padding-left:.5rem; }
.sp-replays .caution .replay-category { border-color:var(--play-copper); }
.sp-replays .appendix .replay-category { border-color:var(--play-line); }
.sp-replays .card h2 { margin:0; font:500 1.4rem/1.4 var(--play-display); color:var(--play-ink); overflow-wrap:anywhere; }
.sp-replays .card .score { flex-shrink:0; color:var(--play-accent); font:500 1.35rem/1.3 var(--play-display); text-align:right; }
.sp-replays .score small { display:block; color:var(--play-muted); font:.55rem var(--play-ui); margin-bottom:.3rem; }
.sp-replays .card .note { font-size:.85rem; color:var(--play-muted); margin:1.2rem 0 1.6rem; }
.sp-replays .actions { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin:auto 0 0; padding-top:1rem; border-top:1px solid var(--play-line); }
.sp-replays .actions a { color:var(--play-accent); font:.69rem var(--play-ui); border:0; margin:0; }
.replay-filters { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; padding:1rem 0; border-block:1px solid var(--play-line); }
.replay-filters button { border:1px solid transparent; background:transparent; color:var(--play-muted); padding:.55rem .85rem; border-radius:3px; font:.75rem var(--play-ui); cursor:pointer; }
.replay-filters button[aria-pressed="true"] { border-color:var(--play-line); background:var(--play-surface); color:var(--play-accent); }
.replay-filters > span { margin-left:auto; color:var(--play-muted); font:.7rem var(--play-ui); }
.sp-player-page { min-height:100dvh; background:var(--play-paper); color:var(--play-ink); }
.sp-player-page .wrap { max-width:660px; padding:2rem 2rem 3rem; }
.sp-player-page .player-back { color:var(--play-accent); font:.75rem var(--play-ui); margin-bottom:1.7rem; }
.sp-player-page header { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; border-top:1px solid var(--play-line); padding-top:1.3rem; }
.sp-player-page .strategy-name { font:500 1.85rem/1.3 var(--play-display); margin-right:auto; }
.sp-player-page .meta { width:100%; font:.72rem/1.7 var(--play-ui); color:var(--play-muted); order:3; margin:0; }
.sp-player-page .canvas-frame { border-radius:4px; overflow:hidden; border-color:var(--play-line); }
.sp-player-page .stats { background:var(--play-surface); border:1px solid var(--play-line); border-radius:4px; padding:.8rem .7rem; margin:1rem 0; font:.72rem var(--play-ui); gap:.5rem; flex-wrap:wrap; }
.sp-player-page .stats b { font-weight:600; }
.sp-player-page .controls { flex-wrap:wrap; gap:.5rem; }
.sp-player-page button { min-width:38px; min-height:36px; background:transparent; color:var(--play-ink); border:1px solid var(--play-line); border-radius:3px; cursor:pointer; font:.75rem var(--play-ui); }
.sp-player-page button:is(.primary,.on) { background:var(--play-ink); color:var(--play-paper); border-color:var(--play-ink); }
.sp-player-page .speeds { display:flex; gap:.35rem; }
.sp-player-page .progress-frame { margin-top:1.2rem; }
.sp-player-page input[type="range"] { accent-color:var(--play-accent); }
.sp-player-page :is(button,input,a):focus-visible { outline:2px solid var(--play-accent); outline-offset:3px; }
.sp-player-page .error { color:var(--play-copper); }
html.embed .sp-player-page .sp-theme-toggle { display:none; }
html.embed .sp-player-page .wrap { max-width:100%; padding:.75rem; }
html.embed .sp-player-page header { padding-top:0; border:0; }
@media(max-width:1000px) {
  .sp-replays .wrap { width:calc(100% - 3rem); }
  .sp-replays .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .sp-replays .wrap { width:calc(100% - 2.4rem); padding-top:2.5rem; }
  .sp-replays .grid { grid-template-columns:1fr; }
  .replay-filters { gap:.25rem; }
  .replay-filters button { font-size:.68rem; padding:.55rem .65rem; }
  .replay-filters > span { width:100%; margin:.6rem 0 0; }
  .sp-play-page .stage { gap:.75rem; }
  .sp-play-page .canvas-wrap { max-width:min(480px,calc(100dvh - 245px)); }
  .sp-play-page .hud-value { font-size:1.5rem; }
  .sp-play-page .stage > header { padding-bottom:.65rem; }
  .sp-play-page .legend { gap:.3rem .8rem; font-size:.55rem; }
  .sp-play-page .overlay-title { font-size:2.4rem; }
  .sp-play-page .overlay-sub { font-size:.76rem; }
  .sp-play-page .overlay-prompt { margin-top:.4rem; }
  .sp-player-page .wrap { padding:1.5rem 1.2rem 2rem; }
  .sp-player-page .strategy-name { font-size:1.6rem; }
  .sp-player-page .stats { font-size:.64rem; }
  .sp-player-page .speeds { width:100%; justify-content:space-between; margin-left:0; }
}
@media(max-height:520px) and (orientation:landscape) {
  .sp-play-page .stage { display:grid; grid-template-columns:minmax(200px,1fr) minmax(160px,.7fr); align-items:center; gap:.5rem 1.5rem; max-width:740px; }
  .sp-play-page .stage > header { grid-column:1 / -1; }
  .sp-play-page .canvas-wrap { grid-column:1; grid-row:2 / 6; max-width:calc(100dvh - 95px); justify-self:center; }
  .sp-play-page .hud,.sp-play-page .legend,.sp-play-page .footer-hint,.game-bottom-nav { grid-column:2; }
  .sp-play-page .overlay-title { font-size:1.5rem; }
  .sp-play-page .overlay-sub { font-size:.65rem; }
}
@media(prefers-reduced-motion:reduce) { .sp-replays *, .sp-play-page *, .sp-player-page * { transition:none!important; animation:none!important; } }