/* App-informed palette and chrome; uniform tiles replace the checkerboard. */
@font-face { font-family: 'Permanent Marker'; src: url('/assets/Images/knights-tour/PermanentMarker-Regular.ttf') format('truetype'); font-display: swap; }
:root { color-scheme: dark; --fg:#fff; --accent:#ffeb3b; --muted:#ffffff55; --selection:#2196f3; }
* { box-sizing:border-box; }
html { min-height:100%; }
body { margin:0; color:var(--fg); background:linear-gradient(#000b,#000b),url('/assets/Images/knights-tour/background.jpg') center/cover fixed,#121212; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.wrap { min-height:calc(100svh - 60px); }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; background:#0003; }
header h1 { margin:0; font:clamp(20px,3vw,30px) 'Permanent Marker',cursive; }
.studio-back { color:#fff; font-size:14px; font-weight:600; text-decoration:none; }
.actions,.puzzle-actions { display:flex; gap:8px; flex-wrap:wrap; }
button { font:inherit; cursor:pointer; touch-action:manipulation; }
.icon-btn { background:#ffffff16; color:#fff; border:1px solid #ffffff66; border-radius:12px; padding:10px 14px; min-height:44px; }
button:hover { background-color:#ffffff2e; }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible,a:focus-visible { outline:3px solid #ffeb3b; outline-offset:3px; }
.content { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:center; gap:40px; max-width:1100px; margin:0 auto; padding:32px 24px; }
.board-outer { display:grid; gap:18px; justify-items:center; min-width:0; }
.board { width:100%; max-width:min(650px,max(320px,calc(100svh - 340px))); aspect-ratio:1; border:4px solid #fff; border-radius:12px; overflow:hidden; background:#0008; position:relative; animation:board-in 500ms ease-in both; }
.grid { display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(6,1fr); height:100%; width:100%; }
.cell { display:grid; place-items:center; border:0; border-right:1px solid #ffffff25; border-bottom:1px solid #ffffff25; border-radius:0; padding:0; background:#ffffff15; color:#fff; font-size:clamp(17px,4vw,30px); font-weight:600; position:relative; }
.cell:nth-child(6n) {border-right:0;} .cell:nth-child(n+31) {border-bottom:0;}
.cell.user { color:var(--accent); }
.cell.legal { background:#2196f34d; }
.cell.legal::after { content:''; position:absolute; bottom:8%; width:5px; height:5px; border-radius:50%; background:#90caf9; }
.cell.selected { box-shadow:inset 0 0 0 3px var(--selection); z-index:1; }
.cell.invalid::before { content:'!'; position:absolute; top:3%; right:7%; font-size:12px; color:#ffc2b1; }
.cell.invalid { box-shadow:inset 0 0 0 2px #d98e79; }
.cell.selected.invalid { box-shadow:inset 0 0 0 3px var(--selection),inset 0 0 0 5px #d98e79; }
.cell:focus-visible { outline:3px solid #ffeb3b; outline-offset:-5px; z-index:2; }
.cell-number { animation:number-in 900ms ease-in both; animation-delay:calc(500ms + var(--reveal)); }
.side { display:grid; gap:18px; min-width:0; }
.pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:300px; width:100%; margin:auto; }
.pad button { aspect-ratio:1; padding:0; border-radius:50%; background:#ffffff26; color:#fff; border:1px solid #ffffff55; font-size:clamp(26px,3vw,40px); font-weight:600; }
.pad button:hover { background:#ffffff40; }
.cta-btn { color:#fff; background:#0005; border:1px solid #ffffff99; padding:14px; min-height:48px; border-radius:12px; font-weight:600; }
.puzzle-actions { justify-content:center; }
#skipRoute[hidden] {display:none;}
.board-help { margin:0; color:#ffffffcf; font-size:14px; line-height:1.6; max-width:550px; text-align:center; }
#gameStatus { min-height:42px; margin:0; text-align:center; font-size:14px; line-height:1.5; color:#fff; }
#route { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#routeLine { fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.8; }
.footer { color:#ffffffa6; font-size:12px; text-align:center; padding:12px 24px 24px; line-height:1.8; }
.footer a { color:#ffffffcf; }
dialog.overlay { border:0; padding:16px; margin:auto; width:min(96vw,600px); max-height:94dvh; background:transparent; color:#fff; overflow:auto; }
dialog.overlay:not([open]) { display:none; }
dialog.overlay::backdrop { background:#000b; }
.modal { background:#171d19; border:1px solid #ffffff66; border-radius:16px; padding:24px; }
.modal h2 { margin:0 0 12px; font-size:22px; }
.modal p,#tutText { color:#ffffffcf; line-height:1.6; }
.modal .actions { justify-content:flex-end; margin-top:16px; }
.dl-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.tut-grid { display:grid; grid-template-columns:repeat(5,44px); grid-auto-rows:44px; gap:1px; justify-content:center; margin:20px auto; }
.tut-cell { color:#fff; background:#ffffff15; border:1px solid #ffffff25; border-radius:4px; font-size:18px; font-weight:600; }
.tut-cell:disabled { opacity:1; }
.tut-cell.t-hl { background:#2196f34d; box-shadow:inset 0 0 0 2px #2196f3; }
canvas#confetti { position:fixed; inset:0; pointer-events:none; z-index:15; }
@keyframes board-in { from {opacity:0;} to {opacity:1;} }
@keyframes number-in { from {opacity:0;} to {opacity:1;} }
@media(max-width:879px) {
 header { padding:12px 16px; gap:8px; } header h1 { font-size:22px; }
 .content { grid-template-columns:1fr; gap:14px; padding:12px 16px; max-width:510px; }
 .board-outer { gap:12px; } .board {max-width:min(100%,max(272px,38svh));} .side { gap:10px; }
 .pad { max-width:190px; gap:8px; } .pad button {font-size:32px;}
 .cta-btn { max-width:340px; width:100%; margin:auto; }
 .board-help { display:none; } .footer { max-width:500px; margin:auto; }
}
@media(max-width:359px) { header { flex-wrap:wrap; } header h1 {font-size:20px;} .content {padding:16px 12px;} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }