:root{color-scheme:dark;--grid-size:5;--fragment-scale:500%;--picture-ratio:1639 / 2048;--bg:#102938;--line:#365564;--ink:#eff6f5;--muted:#bbd0d5;--gold:#f2bc72;--mint:#a9e0d9}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse at 10% 0,#214f60 0,transparent 55%),var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100svh}
button,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px;z-index:2}
main{max-width:760px;margin:auto;padding:26px 28px 22px}header{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:18px}.brand{display:flex;align-items:center;gap:12px}h1{font-size:26px;letter-spacing:-.8px;margin:0;font-weight:650}.brand-icon{font-size:34px;color:var(--gold)}.brand-copy{min-width:0}.tagline{margin:3px 0 0;font-size:13px;color:var(--muted);letter-spacing:.15px}header>#restart{margin-left:auto;flex-shrink:0}
.quiet{border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);padding:10px 14px;font-size:14px;min-height:44px}.quiet:hover{border-color:var(--mint);color:white}.quiet:disabled{opacity:.45}
.intro{display:flex;gap:18px;align-items:center;justify-content:space-between;margin-bottom:14px;min-height:48px}.intro p{margin:0;max-width:560px}.tag{white-space:nowrap;color:var(--muted);font-size:14px}
.picture-panel{max-width:440px;margin:auto}.section-head{display:flex;min-height:38px;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}h2{font-size:16px;font-weight:550;margin:0}.section-head>span{font-size:14px;color:var(--gold)}
.board{display:grid;grid-template-columns:repeat(var(--grid-size),minmax(0,1fr));grid-template-rows:repeat(var(--grid-size),minmax(0,1fr));aspect-ratio:var(--picture-ratio);border:1px solid #4c6976;border-radius:12px;overflow:hidden;background:#0c2230;box-shadow:0 16px 50px #04151f55}
.cell{min-width:0;min-height:0;border:0;padding:0;position:relative;border-radius:4px;color:var(--muted);transition:box-shadow .15s;box-shadow:inset 0 0 0 2px #0c2230;background-origin:border-box;background-clip:border-box;user-select:none;-webkit-user-select:none}
.cell.hidden{background:repeating-linear-gradient(45deg,transparent,transparent 7px,#ffffff05 7px,#ffffff05 8px),#244c5b}.cell.hidden:not(:disabled):hover{box-shadow:inset 0 0 0 2px var(--mint)}
.cell .motif{display:block;font-size:26px;transform:translateY(-4px);line-height:1;color:#aac8cd}.cell .number{position:absolute;bottom:5px;left:8px;font-size:12px;color:#b6cbd1}
.cell.available::after{content:"";position:absolute;inset:5px;border:2px dashed var(--gold);border-radius:3px;pointer-events:none}.cell.selected,.cell.filled{background-size:var(--fragment-scale) var(--fragment-scale);background-repeat:no-repeat}.cell.selected{touch-action:none;cursor:grab;box-shadow:inset 0 0 0 3px var(--gold)}.cell.filled{cursor:default}.cell.selected::after{display:none}
.board.choosing .cell.hidden:disabled{opacity:.55}.cell.drop-target{box-shadow:inset 0 0 0 4px var(--mint)}.cell.selected.drop-target{box-shadow:inset 0 0 0 4px var(--mint)}.cell.drag-source{opacity:.35}.cell.wrong{animation:shake .3s;box-shadow:inset 0 0 0 3px #ff9b87}
.board.complete .cell{border-radius:0;box-shadow:none}.board.complete{border:0}
.drag-ghost{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);background-size:var(--fragment-scale) var(--fragment-scale);background-repeat:no-repeat;border-radius:5px;box-shadow:0 12px 36px #0009,inset 0 0 0 3px var(--gold);opacity:.95}
.progress-track{height:3px;margin-top:14px;background:#2e4b58;border-radius:5px;overflow:hidden}#progress-bar{height:100%;width:0;background:var(--gold);transition:width .3s}.selection-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}.feedback{min-height:64px;padding-top:10px;color:var(--muted);font-size:14px}.feedback.success{color:var(--mint)}.feedback.error{color:#ffb3a0}
.rules{max-width:560px;margin:14px auto 0;border-top:1px solid var(--line);color:var(--muted);padding-top:14px;font-size:14px}.rules summary{cursor:pointer;width:fit-content;padding:4px 0}.rules ol{padding-left:22px}.rules li{margin:8px 0}
dialog{color:var(--ink);background:#183b4a;border:1px solid #51717c;border-radius:18px;padding:28px;max-width:min(440px,calc(100vw - 32px));box-shadow:0 25px 90px #00182280}dialog::backdrop{background:#051a28b8;backdrop-filter:blur(5px)}dialog h2{font-size:25px}dialog p{color:var(--muted)}.dialog-actions{display:flex;gap:12px;flex-wrap:wrap}.primary{background:var(--gold);color:#18303b;border:0;border-radius:10px;min-height:46px;padding:11px 18px;font-weight:600}.win-icon{display:block;color:var(--gold);font-size:42px;margin-bottom:12px}#win-dialog{text-align:center}#win-stats{font-size:14px}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media(max-width:650px){main{padding:15px 16px 22px;max-width:440px}header{margin-bottom:12px}h1{font-size:23px}.brand{gap:7px}.brand-icon{font-size:29px}.quiet{padding:8px 10px;font-size:14px}.intro{display:block;margin-bottom:10px;min-height:48px}.intro p{font-size:16px}.tag{display:none}.picture-panel{max-width:360px}.board{border-radius:10px}.feedback{min-height:58px}.selection-actions{gap:8px}.progress-track{margin-top:10px}.rules{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.level-bar{max-width:440px;margin:0 auto 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--gold);font-size:14px}.timer-box{display:flex;flex-direction:column;align-items:flex-end}.timer-box #timer-hint{font-size:12px;color:var(--muted)}#timer{font-size:26px;line-height:1.3;font-variant-numeric:tabular-nums;font-weight:650}#timer.urgent{color:#ffb3a0}#win-dialog .dialog-actions{justify-content:center}

.cell.preview-card,.preview-face{background-size:var(--fragment-scale) var(--fragment-scale);background-repeat:no-repeat}.board.preview .cell{border-radius:0;box-shadow:none}.preview-face{position:absolute;inset:0;pointer-events:none;opacity:0}.turn-over{animation:turn-card .5s ease-in-out}.turn-over .preview-face{animation:hide-preview .5s steps(1,end)}
@keyframes turn-card{0%{transform:perspective(600px) rotateY(0)}50%{transform:perspective(600px) rotateY(90deg)}100%{transform:perspective(600px) rotateY(0)}}
@keyframes hide-preview{0%{opacity:1}50%,100%{opacity:0}}