@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap');

:root { --ink:#f6f2e9; --muted:#a7a49f; --line:rgba(255,255,255,.12); --card:rgba(255,255,255,.055); --accent:#ef9c5a; --tile:min(15.2vh, 10.8vw); }
* { box-sizing:border-box; }
body { margin:0; min-width:760px; min-height:100vh; overflow:hidden; background:#141517; color:var(--ink); font-family:Outfit, system-ui, sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 72% 22%,#352820 0,transparent 28%),radial-gradient(circle at 15% 85%,#1d2c2e 0,transparent 32%); opacity:.85; }
.app-shell { position:relative; height:100vh; display:flex; flex-direction:column; padding:20px clamp(22px,3.5vw,58px) 24px; }
.topbar { height:52px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:16px; flex-shrink:0; }
.topbar-logo-button { width:330px; height:81px; padding:0; border:0; background:transparent; cursor:pointer; text-align:left; }
.topbar-logo { width:330px; height:81px; object-fit:contain; object-position:left center; pointer-events:none; }
.topbar .brand { display:none; }
.brand { font-weight:600; letter-spacing:.15em; font-size:13px; display:flex; align-items:center; gap:9px; }.brand-mark { color:var(--accent); font-size:21px; }
.status { font-family:'DM Mono',monospace; color:#ddd7cd; font-size:13px; letter-spacing:.08em; }.dot { color:var(--accent); margin:0 10px; }
.actions { display:flex; gap:8px; align-items:center; }.button,.icon-button { border:1px solid transparent; border-radius:8px; color:#191817; background:#f3eee5; font:500 12px Outfit,sans-serif; padding:9px 12px; cursor:pointer; transition:transform .16s,background .16s; }.button:hover,.icon-button:hover { transform:translateY(-1px); }.button.ghost { background:transparent; border-color:var(--line); color:var(--ink); }.icon-button { font-size:21px; line-height:15px; padding:8px 10px; } .verify-result { color:var(--accent); font-size:11px; white-space:nowrap; } #image-input { display:none; }
.game-layout { display:grid; grid-template-columns:minmax(470px, 1.34fr) 10px minmax(330px,.9fr); gap:clamp(6px,.8vw,14px); flex:1; min-height:0; padding-top:20px; }
.layout-splitter { width:10px; min-width:10px; height:100%; cursor:col-resize; border-radius:5px; background:transparent; position:relative; z-index:30; touch-action:none; }
.layout-splitter::after { content:""; position:absolute; inset:0 4px; border-radius:3px; background:rgba(255,255,255,.2); opacity:.5; transition:opacity .15s,background .15s; }
.layout-splitter:hover::after,.layout-splitter:focus-visible::after,.layout-splitter.dragging::after { opacity:1; background:var(--accent); }
.layout-splitter::after { content:""; position:absolute; inset:0 4px; border-radius:3px; background:rgba(239,156,90,.35); opacity:.35; transition:opacity .15s,background .15s; }
.layout-splitter:hover::after,.layout-splitter:focus-visible::after,.layout-splitter.dragging::after { opacity:1; background:var(--accent); }
.board-panel,.pieces-panel { display:flex; flex-direction:column; min-height:0; }.board-panel { position:relative; }.pieces-panel { padding-left:clamp(20px,3vw,48px); }.panel-heading { color:var(--muted); display:flex; align-items:center; justify-content:space-between; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:17px; }.panel-heading small { font-family:'DM Mono',monospace; letter-spacing:.04em; font-size:10px; text-transform:none; }
.board-panel { overflow:hidden; }
.pieces-panel { position:relative; padding-left:0; }
.reference-image { position:absolute; top:35px; left:4px; width:260px; height:auto; aspect-ratio:auto; object-fit:contain; border:1px solid rgba(255,255,255,.3); border-radius:4px; box-shadow:0 5px 16px rgba(0,0,0,.24); }
.leaderboard { position:absolute; top:430px; left:4px; width:260px; padding:10px 9px; border:1px solid var(--line); border-radius:8px; background:rgba(31,32,34,.72); color:var(--muted); font-size:12px; }
.leaderboard h2 { margin:0 0 7px; color:var(--accent); font-size:12px; letter-spacing:.04em; }
.leaderboard p { margin:0; line-height:1.45; }
.leaderboard ol { margin:0; padding-left:17px; }
.leaderboard li { display:flex; justify-content:space-between; gap:5px; padding:2px 0; white-space:nowrap; }
.leaderboard li b { color:#fff4de; font-family:'DM Mono',monospace; font-weight:500; }
.size-control { position:absolute; z-index:5; top:2px; left:4px; display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; white-space:nowrap; }
.size-control input { width:78px; accent-color:var(--accent); cursor:pointer; }
.size-control output { min-width:32px; color:var(--accent); font-family:'DM Mono',monospace; }
.board-size-control { position:absolute; top:2px; left:288px; }
.pieces-heading { justify-content:flex-start; gap:10px; margin-bottom:17px; }
.pieces-heading .tray-size-control { position:static; margin:0 0 0 2px; }
.board { position:relative; width:calc(var(--tile) * var(--cols, 4)); height:calc(var(--tile) * var(--rows, 5)); aspect-ratio:calc(var(--cols, 4) / var(--rows, 5)); margin:5px 0 auto clamp(280px,20vw,300px); display:grid; grid-template-columns:repeat(var(--cols, 4),1fr); grid-template-rows:repeat(var(--rows, 5),1fr); border:1px solid rgba(255,255,255,.28); border-radius:5px; overflow:visible; box-shadow:0 22px 50px rgba(0,0,0,.25); }
.board-panel,.pieces-panel { touch-action:none; }
.board-panel.panning,.pieces-panel.panning { cursor:grabbing; }
.slot { position:relative; border:1px dashed rgba(255,255,255,.17); background:rgba(255,255,255,.025); }.slot::after { content:"+"; color:rgba(255,255,255,.18); font-size:14px; position:absolute; inset:0; display:grid; place-items:center; }.slot.filled { border-color:transparent; }.slot.filled::after { display:none; }
.tray { position:relative; flex:1; min-height:360px; border-radius:14px; border:1px solid var(--line); background:var(--card); overflow:visible; }.tray::after { content:"DRAG · DROP · ROTATE"; position:absolute; bottom:16px; left:20px; color:rgba(255,255,255,.18); letter-spacing:.16em; font:10px 'DM Mono',monospace; pointer-events:none; }
.piece { position:absolute; width:var(--tile); aspect-ratio:1; border:0; border-radius:0; background:transparent !important; cursor:grab; touch-action:none; filter:drop-shadow(0 2px 1px rgba(255,255,255,.38)) drop-shadow(0 7px 13px rgba(0,0,0,.32)); transition:left .18s ease,top .18s ease,transform .2s ease,box-shadow .2s,filter .2s; user-select:none; z-index:1; overflow:visible; }.piece-svg { position:absolute; left:-14%; top:-14%; width:128%; height:128%; display:block; overflow:visible; pointer-events:none; }.piece:hover,.piece.selected,.piece:focus-visible { filter:drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 0 var(--accent)) drop-shadow(0 10px 22px rgba(0,0,0,.48)); box-shadow:0 0 0 3px var(--accent),0 10px 22px rgba(0,0,0,.48); outline:none; z-index:10; }.piece.dragging { cursor:grabbing; transition:none; z-index:99999 !important; filter:drop-shadow(0 17px 10px rgba(0,0,0,.55)); }.piece.placed { position:absolute; border:0; border-radius:0; cursor:grab; z-index:2; }.piece.locked { pointer-events:none; cursor:default; box-shadow:none; filter:drop-shadow(0 1px 1px rgba(255,255,255,.36)); z-index:3; }.piece.wrong { animation:shake .32s linear; } @keyframes shake { 25%{translate:-5px 0} 75%{translate:5px 0} }
.slot.hint { outline:3px solid var(--accent); outline-offset:-3px; z-index:4; }.completion { position:absolute; inset:0; display:grid; place-content:start center; padding-top:20px; text-align:center; pointer-events:none; border-radius:6px; z-index:20; }.completion[hidden] { display:none; }.celebration-card { display:grid; gap:4px; padding:10px 20px; border-radius:12px; background:rgba(19,18,16,.76); box-shadow:0 8px 30px rgba(0,0,0,.32); }.completion strong { font-size:34px; letter-spacing:.06em; color:#fff4de; }.completion span { color:var(--accent); }.confetti { position:absolute; inset:0; overflow:hidden; }.confetti i { position:absolute; top:-18px; left:var(--x); width:8px; height:14px; background:var(--c); border-radius:2px; animation:fall var(--d) ease-in forwards; transform:rotate(var(--r)); } @keyframes fall { to { translate:25px 570px; rotate:540deg; opacity:0; } }
@media (max-width:900px) { :root { --tile:min(13.8vh, 11vw); }.app-shell { padding-inline:20px; }.game-layout { gap:8px; }.pieces-panel { padding-left:20px; }.status { display:none; }.board { margin-left:275px; } }

.stage-map-logo { display:block; width:min(360px,55vw); height:auto; margin:0 auto 18px; }
.custom-puzzle-card { display:grid; place-content:center; gap:10px; text-align:center; background:rgba(239,156,90,.12); border:1px dashed var(--accent); color:var(--ink); }
.custom-puzzle-wrap { position:relative; min-height:300px; }
.custom-puzzle-wrap .custom-puzzle-card { width:100%; height:100%; }
.custom-puzzle-delete { position:absolute; top:12px; right:12px; z-index:2; padding:7px 10px; border:1px solid rgba(255,255,255,.25); border-radius:7px; background:rgba(18,19,21,.82); color:var(--ink); cursor:pointer; }
.custom-puzzle-delete:hover:not(:disabled) { border-color:#ef6f63; color:#ffaaa3; }
.custom-puzzle-delete:disabled { opacity:.55; cursor:wait; }
.custom-puzzle-card strong { font-size:20px; color:var(--accent); }.custom-puzzle-card span { font-size:13px; color:var(--muted); }
.custom-drop { padding:18px; border:1px dashed var(--accent); border-radius:8px; text-align:center; color:var(--muted); }.custom-drop.active { background:rgba(239,156,90,.16); color:var(--accent); }
.custom-layouts { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.layout-choice { padding:9px; border:1px solid var(--line); border-radius:7px; background:#151618; color:var(--muted); cursor:pointer; }.layout-choice.selected { border-color:var(--accent); color:var(--accent); }
.custom-puzzle-modal { position:fixed; inset:0; z-index:100001; display:grid; place-items:center; background:rgba(10,11,12,.82); padding:20px; }.custom-puzzle-dialog { width:min(520px,95vw); display:grid; gap:14px; padding:24px; border:1px solid var(--line); border-radius:14px; background:#202124; box-shadow:0 20px 70px rgba(0,0,0,.55); }.custom-puzzle-dialog h2 { margin:0; }.custom-puzzle-dialog label { display:grid; gap:6px; color:var(--muted); }.custom-puzzle-dialog input { padding:10px; border:1px solid var(--line); border-radius:7px; background:#151618; color:var(--ink); }.custom-preview { min-height:180px; border-radius:8px; background:center/contain no-repeat rgba(0,0,0,.2); }.custom-recommendation { color:var(--accent); margin:0; }.custom-actions { display:flex; justify-content:flex-end; gap:8px; }
.map-card h1,.map-copy { text-align:center; }
/* image chooser */
.image-choice { position:relative; min-height:145px; border:1px solid var(--line); border-radius:12px; background:#202225 center / cover no-repeat; cursor:pointer; transition:transform .2s,border-color .2s; overflow:hidden; }
.image-choice::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,10,12,.7),transparent 55%); pointer-events:none; }
.image-choice span { position:absolute; z-index:1; left:12px; bottom:10px; color:#fff; font:12px 'DM Mono',monospace; letter-spacing:.1em; }
.image-choice:disabled { cursor:not-allowed; filter:grayscale(.8); opacity:.42; }
.image-choice b { position:absolute; z-index:2; right:10px; top:10px; padding:4px 6px; border-radius:5px; color:#fff; background:rgba(0,0,0,.62); font-size:10px; font-weight:500; }
.image-best { position:absolute; right:14px; bottom:10px; z-index:2; max-width:calc(100% - 70px); overflow:hidden; color:#fff4de; background:rgba(0,0,0,.58); border-radius:5px; padding:4px 6px; font:10px 'DM Mono',monospace; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.image-choice:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.gallery-back { grid-column:1 / -1; justify-self:start; }
.completion .button { pointer-events:auto; margin-top:8px; }
.score-time { font-size:18px; color:#fff4de!important; }.score-board { margin-top:6px; color:#d8d1c8; font-size:13px; text-align:left; }.score-board ol { margin:6px 0 0; padding-left:22px; }.score-board li { display:flex; justify-content:space-between; gap:24px; padding:2px 0; }
.tray::after { content:"DRAG · DROP · ROTATE"; }
.panel-heading small { font-size:12px; }
.leaderboard li { font-size:11px; }
.stage-map { position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:30px; overflow:auto; background:radial-gradient(circle at 30% 10%,rgba(89,126,120,.25),transparent 32%),rgba(16,17,19,.97); }
.stage-map[hidden] { display:none; }
.map-card { width:min(1040px,94vw); }
.map-card h1 { margin:8px 0 6px; font-size:clamp(32px,5vw,58px); letter-spacing:-.04em; }
.map-copy { margin:0 0 30px; color:var(--muted); }
.stage-list { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stage-button { position:relative; min-height:300px; overflow:hidden; border:1px solid var(--line); border-radius:16px; padding:16px; color:var(--ink); text-align:left; background:#202225 center / cover no-repeat; cursor:pointer; isolation:isolate; transition:transform .2s,border-color .2s; }
.stage-button::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(8,10,12,.92),transparent 70%); }
.stage-button:hover:not(:disabled) { transform:translateY(-6px); border-color:var(--accent); }
.stage-button:disabled { cursor:not-allowed; filter:grayscale(1); opacity:.42; }
.stage-number { position:absolute; top:16px; left:16px; display:block; color:#fff; font:700 22px Outfit,sans-serif; letter-spacing:.02em; text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8); }
.stage-name { position:absolute; bottom:38px; left:16px; font-size:24px; font-weight:600; }
.stage-detail { position:absolute; bottom:17px; left:16px; color:#d6d0c7; font:11px 'DM Mono',monospace; }
.stage-lock { position:absolute; right:14px; top:14px; padding:6px 8px; border-radius:6px; background:rgba(0,0,0,.55); font-size:13px; }
@media (max-width:800px) { .stage-list { grid-template-columns:repeat(2,1fr); }.stage-button { min-height:220px; } }

/* Keep the zoomed/panned puzzle inside its own viewport. */
.board-viewport { position:absolute; z-index:0; top:35px; bottom:0; left:288px; right:0; display:grid; place-items:center; overflow:hidden; background:rgba(20,22,24,.76); border:1px solid rgba(255,255,255,.28); border-radius:5px; box-shadow:0 22px 50px rgba(0,0,0,.25); }
.board-viewport > .board { margin:0 !important; border:0; box-shadow:none; }
.tray-viewport { position:relative; flex:1; min-height:360px; overflow:hidden; border-radius:14px; border:1px solid var(--line); background:var(--card); }
.tray-viewport > .tray { position:absolute; inset:0; width:100%; height:100%; overflow:visible; border:0; background:transparent; }
.reference-size-control { position:absolute; top:365px; left:4px; z-index:5; display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; white-space:nowrap; }
.reference-size-control input { width:78px; accent-color:var(--accent); cursor:pointer; }
.reference-size-control output { min-width:32px; color:var(--accent); font-family:'DM Mono',monospace; }
.zoom-help { position:absolute; top:4px; left:clamp(360px,28vw,560px); z-index:5; color:var(--muted); font:11px 'DM Mono',monospace; white-space:nowrap; }
.board-panel > .panel-heading small { position:absolute; top:0; right:4px; z-index:5; text-align:right; white-space:nowrap; }
.zoom-help { top:20px; left:auto; right:4px; }
.file-picker { display:flex; align-items:center; gap:8px; }
.file-picker .custom-file { display:none; }
.custom-file-button { padding:8px 10px; }
.custom-file-name { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.zoom-help:hover { color:var(--ink); border-color:var(--accent); background:rgba(239,156,90,.14); }
.first-place-message { display:grid; gap:2px; margin:-2px -8px 6px; padding:8px 10px; border:1px solid rgba(255,209,102,.55); border-radius:10px; background:linear-gradient(135deg,rgba(239,156,90,.28),rgba(255,209,102,.14)); box-shadow:0 0 22px rgba(255,160,64,.28); }
.first-place-message strong { font-size:24px; color:#ffd166; }
.first-place-message span { color:#fff4de; font-weight:600; }
.completion.first-place .celebration-card { box-shadow:0 0 42px rgba(255,160,64,.55),0 8px 30px rgba(0,0,0,.32); }
.confetti.big-confetti i { width:11px; height:20px; border-radius:3px; animation-duration:calc(var(--d) * 1.15); box-shadow:0 0 5px rgba(255,255,255,.28); }