:root{color-scheme:light;--paper:#f6f5ed;--card:#fffdf6;--ink:#22372d;--mute:#59675b;--green:#244b3b;--line:#dedfd2;--accent:#9b472f;--sage:#e5ebe0}
*{box-sizing:border-box} [hidden]{display:none!important} body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 system-ui,sans-serif} h1,h2,h3,p{margin:0} h1,h2,h3{line-height:1.12} h1,h2{font-family:Georgia,serif;font-weight:normal} a{color:inherit;text-decoration:none} button,input,select{font:inherit} button{cursor:pointer} button:disabled{cursor:default} :focus-visible{outline:3px solid #ab552f;outline-offset:3px}
.wrap{width:min(1220px,calc(100% - 64px));margin-inline:auto}.top{border-bottom:1px solid var(--line)}.bar{height:72px;display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{display:flex;align-items:center;font:bold 30px Georgia,serif;letter-spacing:-1.4px}.brand-icon{display:grid;grid-template-columns:repeat(2,7px);gap:2px;padding:7px;background:var(--green);border-radius:7px;margin-right:9px;transform:rotate(-8deg)}.brand-icon i{height:7px;background:#f7efda;border-radius:1px}.brand-icon i:last-child{opacity:.35}.period{color:var(--accent)} nav{display:flex;gap:24px;align-items:center;font-weight:650;font-size:13px}nav a[aria-current]{color:var(--accent)}nav a:last-child{border:1px solid var(--line);padding:7px 12px;border-radius:8px}
.intro{padding:42px 0 32px;border-bottom:1px solid var(--line);margin-bottom:28px}.eyebrow,.section-label,.badge{font-size:11px;font-weight:800;letter-spacing:.13em}.eyebrow{color:var(--accent);display:flex;gap:8px;align-items:center}.eyebrow b{width:7px;height:7px;background:var(--accent);transform:rotate(45deg);display:inline-block}.intro h1{font-size:clamp(49px,7vw,93px);letter-spacing:-.065em;margin:7px 0 8px}.intro h1 em{color:var(--green);font-weight:normal}.intro p,.panel p,.how p{color:var(--mute)}
.layout{display:grid;grid-template-columns:minmax(176px,215px) minmax(0,1fr) minmax(200px,252px);gap:24px;align-items:start}.section-label{color:var(--accent);display:flex;align-items:center;gap:7px;margin-bottom:9px}.section-label span{width:17px;height:1px;background:currentColor}.left h2,.achievements h2{font-size:29px;margin-bottom:14px}.levels{display:grid;gap:8px}.level{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;text-align:left;gap:9px;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px;color:var(--ink)}.level img{width:42px;height:42px;object-fit:cover;border-radius:5px}.level strong,.level small{display:block}.level strong{font-size:13px}.level small{color:var(--mute);font-size:11px}.level:disabled{opacity:.62}.level.active{background:var(--green);color:white;border-color:var(--green)}.level.active small{color:#d9e6d8}.level-mark{font-size:12px;font-weight:bold}.how{margin-top:18px;padding:14px;background:var(--sage);border-radius:10px}.how h3,.panel h3{font-size:15px}.how p,.panel p{font-size:13px;margin-top:7px}
.game{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--card)}.game-head,.panel-head,.controls{display:flex;align-items:center;justify-content:space-between;gap:10px}.game-head{margin-bottom:13px}.game-head h2{font-size:clamp(22px,3vw,38px)}.stats{display:flex;gap:7px}.stats div{min-width:52px;text-align:center;background:var(--sage);padding:5px 7px;border-radius:7px}.stats strong,.stats small{display:block}.stats strong{font-variant-numeric:tabular-nums}.stats small{font-size:9px;letter-spacing:.08em;font-weight:750;color:var(--mute)}.board-frame{position:relative;border-radius:9px;overflow:hidden;background:#263f35}.board{display:grid;aspect-ratio:1;gap:2px;background:#1c322a;grid-template-columns:repeat(var(--n,3),1fr);grid-template-rows:repeat(var(--n,3),1fr)}.tile{border:0;min-width:0;padding:0;position:relative;background-repeat:no-repeat;background-color:#355448;color:white;text-align:left;touch-action:manipulation}.tile:hover:not(:disabled){filter:brightness(1.15)}.tile:focus-visible{outline-offset:-4px;z-index:1}.tile span{position:absolute;top:5px;left:5px;background:#132d24e8;color:white;border-radius:4px;padding:1px 6px;font-size:11px;font-weight:bold}.tile.blank{background:#263f35}.hide-numbers .tile span{display:none}.cover{position:absolute;inset:0;display:grid;place-items:center;background:#14291d30}.primary,.secondary{border:1px solid transparent;border-radius:8px;padding:8px 13px;font-size:13px;font-weight:750}.primary{background:var(--green);color:white}.cover .primary{background:#fff9e8;color:var(--green);padding:13px 20px;box-shadow:0 4px 24px #13271c66}.secondary{background:var(--card);border-color:var(--line);color:var(--ink)}.controls{margin-top:12px}.controls label{font-size:13px;display:flex;align-items:center;gap:5px}.controls input{accent-color:var(--green)}.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px}.reference img{width:100%;aspect-ratio:1.23;object-fit:cover;object-position:center;display:block;margin-top:11px;border-radius:7px}.badge{background:var(--sage);border-radius:4px;padding:4px 5px;font-size:8px;white-space:nowrap}.ranking{margin-top:11px;scroll-margin:18px}.ranking ol{padding:0;margin:10px 0 0;list-style:none}.ranking li{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:12px}.ranking li strong{overflow-wrap:anywhere}.ranking li span{white-space:nowrap;color:var(--mute)}.ranking li.empty{color:var(--mute)}.status{color:var(--accent);font-size:13px;margin-top:6px}.status:empty{display:none}.finish{margin-top:12px}.finish label,.admin-form label{display:grid;gap:5px;margin:12px 0;font-weight:650}.finish input,.admin-form input,.admin-form select{min-width:0;width:100%;padding:8px;border:1px solid var(--line);border-radius:6px;background:white;color:var(--ink)}.achievements{border-top:1px solid var(--line);margin-top:28px;padding:22px 0 34px}.awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:10px}.awards img{width:100%;aspect-ratio:1.4;object-fit:cover;border-radius:7px}.awards figure{margin:0}.awards figcaption{overflow-wrap:anywhere;font-size:13px}.awards p{color:var(--mute)}.admin-form{padding:19px;max-width:520px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0 30px}.admin-form h2{margin-bottom:14px}.admin-form small{color:var(--mute)}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:16px 0;font-size:11px;font-weight:750;letter-spacing:.09em;color:var(--mute)}footer span{text-transform:none;letter-spacing:0}
@media(max-width:950px){.wrap{width:min(860px,calc(100% - 36px))}.layout{grid-template-columns:175px minmax(0,1fr);gap:16px}.right{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:10px}.right>.section-label{grid-column:1/-1;margin:0}.ranking{margin:0}}
@media(max-width:620px){.wrap{width:calc(100% - 26px)}.bar{height:59px}.brand{font-size:24px}nav{gap:9px;font-size:12px}nav a:last-child{padding:5px 7px}.intro{padding:25px 0 19px;margin-bottom:17px}.layout,.admin-grid{grid-template-columns:1fr}.right{grid-column:1}.levels{grid-template-columns:1fr 1fr}.level{grid-template-columns:30px minmax(0,1fr) auto;gap:5px}.level img{width:30px;height:30px}.how{margin-top:9px}.game{padding:10px}}

/* Arcade surfaces and controls */
:root{color-scheme:dark;--paper:#0a1020;--card:#121b30;--ink:#ecf4ff;--mute:#a0afc9;--green:#8affcd;--line:#2b3c58;--accent:#78eec1;--sage:#1c2a43}
body{min-height:100vh;background:radial-gradient(ellipse at 55% -18%,#263b69 0,transparent 54%),var(--paper)}
h1,h2{font-family:system-ui,sans-serif;font-weight:800;letter-spacing:-.045em}.top{background:#0a1124dc}.bar{height:63px}.brand{font:850 25px system-ui,sans-serif;letter-spacing:-.055em}.brand-icon{background:#8affcd;box-shadow:0 0 17px #56ffc35b}.brand-icon i{background:#132137}.period{color:var(--green)}nav a:hover{color:var(--green)}
.intro{position:relative;padding:23px 0 22px;margin-bottom:22px}.intro h1{font-size:clamp(38px,6vw,68px);text-transform:uppercase;letter-spacing:-.05em;margin:4px 0}.intro h1 em{font-style:normal;font-weight:800;text-shadow:0 0 24px #6effbb52}.intro p{font-size:14px}.section-label{color:#98b2df;letter-spacing:.14em}.eyebrow b{box-shadow:0 0 12px #75ffc6}
.layout{grid-template-columns:minmax(170px,213px) minmax(0,600px) minmax(185px,245px);justify-content:center;gap:20px}.level,.panel,.game,.how{background:linear-gradient(160deg,#192642,var(--card) 65%);border:1px solid var(--line);box-shadow:0 8px 18px #02071635}.level.active{border-color:#72eab4;background:linear-gradient(125deg,#234347,#12293b);color:var(--ink);box-shadow:inset 3px 0 #8affcd,0 0 17px #5eeab331}.level.active small{color:#b1dcd1}.level:hover:not(:disabled){border-color:var(--green)}.level:disabled{opacity:.66}.how h3,.panel h3{color:#f1f7ff}.badge{color:#a8c2ec}.stats div{border:1px solid #30425e;background:#0c162b;min-width:57px}.stats strong{font-size:19px;line-height:1.1;color:var(--green)}.stats small{margin-top:4px}.game-head h2{font-size:clamp(20px,3vw,31px)}
.board-frame{isolation:isolate;padding:5px;background:#081022;border:1px solid #344e72;box-shadow:0 0 30px #1f79b437,inset 0 0 18px #000;border-radius:11px}.board{border-radius:6px;overflow:hidden;background:#0b1427;gap:3px}.tile{border-radius:2px;box-shadow:inset 0 0 0 1px #dce9ff36,inset 0 -4px 0 #030b2450;transition:filter .15s;}.tile span{background:#080e22e8;color:#eaf8ff}.tile.blank{box-shadow:inset 0 0 0 1px #2c3e5c;background:radial-gradient(#192740,#0b1326)}.cover{background:linear-gradient(0deg,#080f24b0,#09112657);backdrop-filter:blur(1px)}.start-card{display:grid;justify-items:center;gap:12px;padding:22px 26px;background:#101a31e9;border:1px solid #6a9aac;border-radius:13px;box-shadow:0 12px 40px #020612a8}.primary,.cover .primary{color:#092016;background:linear-gradient(140deg,#b2ffde,#69e2ae);box-shadow:0 3px 0 #398a67,0 4px 18px #80ffc334;transition:filter .15s,transform .15s}.primary:hover,.secondary:hover{filter:brightness(1.15)}.primary:active{transform:translateY(2px)}.secondary{color:var(--ink);background:#1a2944}.toggles{display:flex;align-items:center;gap:10px}.toggles button{padding:6px 8px}.reference img{aspect-ratio:1.4}.finish{border-color:#66dbac;background:linear-gradient(140deg,#1a453e,#142039 60%)}.finish h3{font-size:24px;margin-top:6px}.next{margin-top:10px}.finish input,.admin-form input,.admin-form select{background:#0b1429}.board-frame.victory{border-color:#8affcd;box-shadow:0 0 30px #5ff4b279}.board-frame.victory .board{gap:0}.board-frame.victory .tile{border-radius:0;box-shadow:none}.board-frame.victory .tile span{display:none}
@media(max-width:950px){.layout{grid-template-columns:175px minmax(0,1fr)}}
@media(max-width:620px){.layout{grid-template-columns:1fr}.intro{padding:18px 0}.game-head h2{font-size:20px}}

.board-hint{font-size:12px;color:var(--mute);margin:-3px 0 8px;min-height:1.5em}
.tile.movable{box-shadow:inset 0 0 0 2px #a3ffd9,inset 0 0 10px #4bffb54d}
.tile.movable:hover{filter:brightness(1.18)}
.board:has(.movable) .tile:not(.blank):not(.movable){cursor:default}
@media(min-width:951px) and (max-height:900px){.layout{grid-template-columns:minmax(170px,213px) minmax(0,clamp(350px,calc(100svh - 350px),560px)) minmax(185px,245px)}.intro{padding:16px 0 14px;margin-bottom:16px}.intro h1{font-size:clamp(36px,6vh,58px)}}

#theme{color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 7px;font-size:12px;font-weight:650}
@media(max-width:420px){.bar{height:auto;min-height:59px;flex-wrap:wrap;padding-block:9px;gap:6px}.bar nav{gap:8px;flex-wrap:wrap}}
:root[data-theme="brown"]{--paper:#211610;--card:#33231a;--ink:#fff2e4;--mute:#e2c6ad;--green:#ffc68d;--line:#785844;--accent:#ffd2a3;--sage:#493325}
[data-theme="brown"] body{background:radial-gradient(ellipse at 55% -18%,#62412d 0,transparent 58%),var(--paper)}
[data-theme="brown"] :is(.top,.stats div,.board-frame,.board,.finish input,.admin-form input,.admin-form select){background:#271a13;border-color:var(--line)}
[data-theme="brown"] :is(.level,.panel,.game,.how){background:linear-gradient(160deg,#473126,var(--card) 68%)}
[data-theme="brown"] .level.active{background:#543722;border-color:#ffc68d;box-shadow:inset 3px 0 #ffc68d}
[data-theme="brown"] :is(.level.active small,.section-label,.badge){color:var(--mute)}
[data-theme="brown"] .brand-icon{background:#ffc68d;box-shadow:0 0 16px #e7a56565}
[data-theme="brown"] .brand-icon i{background:#352116}
[data-theme="brown"] .intro h1 em{color:var(--green);text-shadow:0 0 24px #ed9a5457}
[data-theme="brown"] .eyebrow b{box-shadow:0 0 12px #ed9a54}
[data-theme="brown"] :is(.primary,.cover .primary){color:#321b0f;background:linear-gradient(140deg,#ffe2c3,#ffc68d);box-shadow:0 3px 0 #9a6139}
[data-theme="brown"] .secondary{background:#523725}
[data-theme="brown"] .cover{background:linear-gradient(0deg,#21130cb8,#27170d57)}
[data-theme="brown"] .start-card{background:#302118f2;border-color:#a77b5c}
[data-theme="brown"] .tile.blank{background:radial-gradient(#553929,#25180f);box-shadow:inset 0 0 0 1px #846451}
[data-theme="brown"] .tile span{background:#281a12eb;color:#fff2e4}
[data-theme="brown"] .tile.movable{box-shadow:inset 0 0 0 2px #ffd2a3,inset 0 0 10px #ffc68d70}
[data-theme="brown"] :is(.finish,.board-frame.victory){border-color:var(--green);box-shadow:0 0 24px #ffc68d42}
[data-theme="brown"] :focus-visible{outline-color:#ffd2a3}

.player-dialog{color:var(--ink);width:min(440px,calc(100% - 32px));max-height:calc(100% - 32px);padding:22px}
.player-dialog::backdrop{background:#08070cbd}
.player-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
.finish button{margin-top:12px}

html.playing,html.playing body{overflow:hidden;overscroll-behavior:none}
.game-focus{position:fixed;inset:0;margin:auto;width:min(calc(100% - 20px),clamp(290px,calc(100dvh - 178px),600px));max-width:none;max-height:calc(100dvh - 12px);border:0;padding:0;border-radius:16px;background:var(--card);color:var(--ink);overscroll-behavior:contain}
.game-focus::backdrop{background:#07090deb}
.game-focus .game{padding:10px}
.game-focus .controls{flex-wrap:wrap;justify-content:flex-start;gap:6px}
.game-focus .controls .secondary{padding:5px 7px}
.game-focus .toggles{margin-inline-start:auto;gap:6px}
#preview-toggle{display:none}
.game-focus #preview-toggle{display:inline-block}
.focus-preview{position:absolute;inset:5px;display:block;padding:0;border:0;background:var(--card);z-index:3}
.focus-preview img{width:100%;height:100%;display:block;object-fit:cover}

@media(min-width:951px){.layout>.game{grid-area:1/2}.layout>.left{grid-area:1/1}.layout>.right{grid-area:1/3}}
@media(min-width:621px) and (max-width:950px){.layout>.game{grid-area:1/2}.layout>.left{grid-area:1/1}.layout>.right{grid-area:2/2}}

/* Give navigation and game actions clear boundaries and touch targets. */
.bar nav{gap:8px}
.bar nav a,.bar nav a:last-child,#theme{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 13px;border:1px solid var(--line);border-radius:9px;background:var(--sage);color:var(--ink);font-size:14px;font-weight:750;white-space:nowrap}
.bar nav a:hover,.bar nav a:focus-visible{border-color:var(--green);color:var(--green)}
.bar nav a[aria-current="page"]{border-color:var(--green);background:var(--green);color:#18120e}
:is(.controls,.player-actions,.finish,.admin-form) :is(.primary,.secondary),.controls label,.next{min-height:44px;padding:8px 11px;font-size:14px}
.controls,.controls .toggles,.game-focus .controls{flex-wrap:wrap;gap:8px}
.controls .secondary,.game-focus .controls .secondary,.player-actions .secondary{border-color:var(--line);padding:8px 11px;font-size:14px}
.controls label{border:1px solid var(--line);border-radius:8px;background:var(--sage)}
.controls label input{margin:0}
.level{min-height:54px}
@media(max-width:620px){.bar{height:auto;min-height:63px;flex-wrap:wrap;padding-block:9px}.bar nav{flex-wrap:wrap}.bar nav a,.bar nav a:last-child,#theme{padding-inline:9px}.game-focus .toggles{margin-inline-start:0}}

.crop{min-width:0;margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:8px}
.crop legend{padding:0 5px;font-weight:750}
.crop canvas{display:block;width:100%;height:auto;border-radius:6px;background:var(--paper)}
.crop label{gap:2px;font-size:13px}
.crop input[type=range]{padding:0;accent-color:var(--green);min-height:24px}
#upload button:disabled{opacity:.55}

.puzzle-pictures img{aspect-ratio:1}
.puzzle-pictures button{margin-top:6px}
.reward-heading{margin-top:22px}