/* Page-specific styles; the shared site palette and controls come from tracker.css. */
:root{color-scheme:light;--blue:#659fe0;--red:#ffa294;--yellow:#ffe08a;--paper:#fff4da}
.site-header>a:last-child{font-size:14px;text-underline-offset:4px}
.intro,.shell{max-width:1080px;margin:8px auto 0}
.shell{max-width:960px}
.intro-slide,.game{background:#81d8ef;border:3px solid var(--ink);box-shadow:inset 2px 2px #c4f3ff,inset -2px -2px #2e8bb3,6px 6px var(--ink)}
.intro-slide{text-align:center;padding:24px}
.intro-title{font:900 clamp(22px,3vw,30px)/1.3 Arial,"Segoe UI",sans-serif;letter-spacing:-.4px;margin:0 0 20px}
.intro-image{display:block;width:min(100%,calc((100svh - 280px)*1.64375));height:auto;aspect-ratio:1315/800;object-fit:contain;margin:auto;border:3px solid var(--ink)}
.intro-button{display:flex;width:fit-content;min-width:145px;max-width:100%;margin:22px auto 0}
.shell>h1{font-size:38px;margin:0 0 24px}
.game{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:28px;align-items:start;direction:ltr;padding:22px}
.play-area,.controls{direction:rtl;min-width:0}
.board-heading{display:flex;align-items:center;min-height:47px;margin:0 0 16px;font-size:16px}
.target{display:flex;align-items:center;gap:10px}
.target-dot{display:inline-block;width:18px;height:18px;flex-shrink:0;background:var(--target);border:2px solid var(--ink);box-shadow:2px 2px var(--ink)}
.board-frame{border:3px solid var(--ink);padding:8px;background:#183b59;box-shadow:inset 2px 2px #0d243b,3px 3px var(--ink)}
.board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;direction:ltr}
.tile{display:block;min-width:0;padding:0;aspect-ratio:1;border:1px solid #11264099;border-radius:0;background:var(--tile);box-shadow:inset 2px 2px #ffffff60,inset -2px -2px #11264035;touch-action:manipulation;transition:filter .12s}
.tile[data-color=B]{--tile:var(--blue)}.tile[data-color=R]{--tile:var(--red)}.tile[data-color=Y]{--tile:var(--yellow)}.tile[data-color=G]{--tile:var(--green)}
.tile.region{filter:brightness(1.12);box-shadow:inset 0 0 0 2px #fff4da}
.tile:focus-visible{outline:3px solid var(--paper);outline-offset:1px;position:relative;z-index:1}
.tile.blocked{display:grid;place-items:center;background:#254e67;color:#a5edff;border-color:#112640;box-shadow:inset 2px 2px #44718b,inset -2px -2px #112640;font:900 20px "Courier New",monospace;cursor:default}
.tile.blocked:before{content:'×'}
.board.is-over .tile{cursor:default}
.board.is-won .tile{box-shadow:inset 2px 2px #ffffff60,inset -2px -2px #11264035}
.controls{display:flex;flex-direction:column}
.stage-picker{margin-bottom:20px}
.stage-picker select{background:#a5edff;font-size:14px;padding:10px;direction:rtl;box-shadow:inset 2px 2px #65adc3}
select option:disabled{color:#526b7a}
.moves-label{font-size:14px;margin:0}
.moves{margin:3px 0 8px}
.moves strong{font:900 46px/1 "Courier New",monospace;font-variant-numeric:tabular-nums}
.move-dots{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.move-dots i{display:block;width:20px;height:7px;background:var(--ink)}
.move-dots i.used{background:#5091aa}
.palette{display:grid;gap:10px;margin:0;padding:0;border:0}
.palette legend{font-size:14px;margin:0 0 10px;padding:0}
.color{display:flex;align-items:center;gap:12px;width:100%;min-height:51px;padding:8px 11px;text-align:start;background:var(--paper);border:2px solid var(--ink);border-radius:0;box-shadow:inset 2px 2px #fffaf0,inset -2px -2px #b9a588,3px 3px var(--ink);font-size:15px;font-weight:800}
.color:hover:not(:disabled){filter:brightness(1.05)}
.color[aria-pressed=true]{background:#c2f5d5;box-shadow:inset 3px 3px #4f9e7e,1px 1px var(--ink);transform:translate(2px,2px)}
.swatch{width:27px;height:27px;flex-shrink:0;background:var(--swatch);border:2px solid var(--ink);box-shadow:inset 2px 2px #ffffff60,inset -2px -2px #11264035}
.color-name{flex:1}
kbd{font:700 12px "Courier New",monospace;color:var(--muted);border:1px solid #254e6760;padding:1px 5px}
.reset,.next{width:100%;font-size:14px;padding:10px;margin-top:20px}
.next{margin-top:12px}
.reset-icon{font-size:20px;line-height:1;margin-inline-end:6px}
.result{font-size:14px;line-height:1.6;background:var(--paper);border:2px solid var(--ink);padding:12px;margin-top:20px;box-shadow:3px 3px var(--ink)}
.result:empty{display:none}
.result strong{display:block;font-size:21px;font-weight:900;margin-bottom:4px}
.progress-line,.saving-warning{font-size:12px;line-height:1.6;margin:18px 0 0}
.saving-warning{background:var(--amber);border:2px solid var(--ink);padding:8px}
dialog{width:min(490px,calc(100% - 36px));max-height:90svh;overflow:auto;border:3px solid var(--ink);border-radius:0;padding:30px;background:var(--paper);color:var(--ink);text-align:center;box-shadow:8px 8px var(--ink)}
dialog::backdrop{background:#112640b0}
dialog h2{font-size:32px;margin:12px 0}
dialog p{font-size:18px;margin:0 0 22px}
.celebration{display:block;font-size:40px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
@media(max-width:800px){
  .game{grid-template-columns:minmax(0,1fr);gap:24px;max-width:700px;margin:auto;padding:18px}
  .controls{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .stage-picker{grid-column:1/-1;margin-bottom:16px}
  .move-section{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-bottom:18px}
  .moves{margin:0}.moves strong{font-size:30px}.move-dots{margin:0}
  .palette{grid-column:1/-1;grid-template-columns:repeat(var(--palette-count,4),minmax(0,1fr));gap:10px}
  .palette legend{margin-bottom:10px}
  .color{flex-direction:column;gap:7px;padding:10px 5px;font-size:13px;min-height:78px}
  .color-name{flex:none}.color kbd{display:none}
  .result,.progress-line,.saving-warning{grid-column:1/-1}
}
@media(max-width:500px){
  body{padding-inline:13px}
  .site-header{padding-block:23px;gap:12px}.site-header>a:last-child{font-size:12px}
  .intro-slide{padding:18px 12px;box-shadow:4px 4px var(--ink)}
  .intro-title{font-size:23px;margin-bottom:18px}
  .intro-image{width:100%}
  .intro-button{font-size:14px;padding-inline:16px}
  .shell>h1{font-size:30px;margin-bottom:20px}
  .game{padding:12px;gap:22px;box-shadow:4px 4px var(--ink)}
  .board-heading{font-size:13px;min-height:30px;margin-bottom:12px}
  .board-frame{padding:4px}.board{gap:2px}
  .tile{box-shadow:inset 1px 1px #ffffff60,inset -1px -1px #11264035}
  .moves-label{font-size:13px}.move-section{gap:10px;flex-wrap:wrap}
  .move-dots{gap:5px}.move-dots i{width:15px;height:6px}
  .palette{gap:8px}.swatch{width:25px;height:25px}
  .reset,.next{font-size:12px;padding:9px 6px;gap:5px}
}