:root{--paper:#f5ead6;--paper-edge:#e6d2ae;--panel:#fffaf1;--panel-2:#f8ecd8;--ink:#3b2b20;--ink-soft:#85705c;--stroke:#3b2b20;--faint:#3b2b2033;--accent:#e0704a;--accent-ink:#fff8ef;--select:#ffd36b;--hover:#fff0cf;--ok:#5c9a57;--danger:#cf5140;--backdrop:#281a0e73;--grain-opacity:.55;--tint-0:#ffe2cf;--tint-1:#dcefd8;--tint-2:#d9e7f7;--tint-3:#f8dcea;--tint-4:#fff0b8;--tint-5:#e6ddf8;--tint-6:#d3eeea;--tint-7:#f6e0c6;--font-display:"Fraunces", "Iowan Old Style", Georgia, serif;--font-body:"Nunito", ui-rounded, system-ui, "Segoe UI", sans-serif;--cell:88px;--gap:8px;--piece:clamp(56px, 16vw, 78px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#1d1a25;--paper-edge:#14121a;--panel:#2c2836;--panel-2:#25212e;--ink:#f1e5cf;--ink-soft:#a99985;--stroke:#0d0b12;--faint:#f1e5cf2e;--accent:#f08a5d;--accent-ink:#1d1a25;--select:#b8892a;--hover:#3a3345;--ok:#74b86b;--danger:#ec6a55;--backdrop:#05040899;--grain-opacity:.25;--tint-0:#5b3c2f;--tint-1:#33503a;--tint-2:#2f4561;--tint-3:#5a3451;--tint-4:#5b4c22;--tint-5:#46395f;--tint-6:#2b5351;--tint-7:#5a4430;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--paper:#1d1a25;--paper-edge:#14121a;--panel:#2c2836;--panel-2:#25212e;--ink:#f1e5cf;--ink-soft:#a99985;--stroke:#0d0b12;--faint:#f1e5cf2e;--accent:#f08a5d;--accent-ink:#1d1a25;--select:#b8892a;--hover:#3a3345;--ok:#74b86b;--danger:#ec6a55;--backdrop:#05040899;--grain-opacity:.25;--tint-0:#5b3c2f;--tint-1:#33503a;--tint-2:#2f4561;--tint-3:#5a3451;--tint-4:#5b4c22;--tint-5:#46395f;--tint-6:#2b5351;--tint-7:#5a4430;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{height:100%}body{color:var(--ink);background:var(--paper);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;font-weight:600}body:before{content:"";pointer-events:none;z-index:-1;opacity:var(--grain-opacity);background:radial-gradient(120% 90% at 50% 0%, transparent 55%, var(--paper-edge) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.app{flex-direction:column;height:100dvh;display:flex}.main{flex:1;min-height:0;display:flex}.topbar{padding-block:6px;padding-inline:max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));border-bottom:2px dashed var(--faint);grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;display:grid}.topbar-side{gap:2px;display:flex}.topbar-side.end{justify-content:flex-end}.brand{font-family:var(--font-display);letter-spacing:.01em;white-space:nowrap;align-items:center;gap:8px;font-size:clamp(22px,5.5vw,30px);font-weight:800;display:flex}.brand-mark{color:var(--accent);font-size:.7em}.icon-btn{cursor:pointer;background:0 0;border:2px solid #0000;border-radius:12px;place-items:center;width:40px;height:40px;transition:background .15s,border-color .15s;display:grid}.icon-btn:hover{background:var(--panel);border-color:var(--faint)}.stage{width:100%;max-width:1120px;min-height:0;padding-block:10px max(12px, env(safe-area-inset-bottom));flex-direction:column;flex:1;gap:10px;margin-inline:auto;padding-inline:16px;display:flex}.chapter{text-align:center}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);justify-content:center;align-items:center;gap:10px;margin:0;font-size:11px;font-weight:900;display:flex}.difficulty{align-items:center;gap:3px;display:inline-flex}.difficulty i{border:1.5px solid var(--ink-soft);border-radius:50%;width:8px;height:8px}.difficulty i.on{background:var(--accent);border-color:var(--accent)}.difficulty i:last-of-type{margin-right:3px}.chapter h1{font-family:var(--font-display);margin:2px 0 0;font-size:clamp(22px,5vw,32px);font-weight:800;line-height:1.1}.subtitle{max-width:52ch;color:var(--ink-soft);text-wrap:balance;margin:4px auto 0;font-size:14px}.play{flex-direction:column;flex:1;gap:12px;min-height:0;display:flex}.board-wrap{flex:1 1 0;place-items:center;min-height:160px;display:grid}.board{grid-template-columns:calc(var(--cell) * .72) repeat(var(--cols), var(--cell));grid-template-rows:calc(var(--cell) * .72) repeat(var(--rows), var(--cell));gap:var(--gap);display:grid}.board.shake{animation:.45s shake}.corner{color:var(--faint);font-size:calc(var(--cell) * .22);place-items:center;display:grid}.word{background:var(--panel-2);border:2.5px solid var(--stroke);min-width:0;box-shadow:0 3px 0 var(--stroke);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:4px;display:flex;position:relative}.word--col:before{content:"";background:color-mix(in srgb, var(--select) 55%, transparent);border-radius:2px;width:38%;height:11px;position:absolute;top:-7px;left:50%;transform:translate(-50%)rotate(-3deg)}.word-icon{font-size:calc(var(--cell) * .28);line-height:1}.word-label{max-width:100%;font-size:calc(clamp(8px, calc(var(--cell) * .115), 13px) * var(--fit,1));text-align:center;text-transform:uppercase;letter-spacing:.02em;overflow-wrap:normal;font-weight:900;line-height:1.05}.count{background:var(--panel);border:2px solid var(--stroke);z-index:2;border-radius:11px;place-items:center;min-width:22px;height:22px;padding:0 5px;font-size:12px;font-weight:900;transition:background .2s,color .2s,transform .2s;display:grid;position:absolute;top:-9px;right:-9px}.count[data-state=ok]{background:var(--ok);color:#fff}.count[data-state=over]{background:var(--danger);color:#fff;transform:scale(1.12)}.cell{background:var(--panel);border:3px solid var(--stroke);box-shadow:inset 0 0 0 4px var(--panel), inset 0 0 0 5.5px var(--faint), 0 4px 0 var(--stroke);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,transform .15s;position:relative}.cell:hover,.cell.is-hover{background:var(--hover);box-shadow:inset 0 0 0 4px var(--hover), inset 0 0 0 5.5px var(--faint), 0 4px 0 var(--stroke)}.cell.is-hover{transform:translateY(-3px)scale(1.03)}.board.has-selection .cell:not(.has-piece),.board.is-dragging .cell:not(.has-piece){border-style:dashed}.board.is-notes .cell{background-image:repeating-linear-gradient(-45deg, transparent 0 9px, var(--faint) 9px 10px)}.cell-pair{font-size:calc(var(--cell) * .19);opacity:.22;filter:grayscale(.7);pointer-events:none;justify-content:center;align-items:center;gap:2px;display:flex;position:absolute;inset:0}.cell-notes{font-size:calc(var(--cell) * .16);pointer-events:none;flex-wrap:wrap;gap:1px 3px;line-height:1;display:flex;position:absolute;inset:6px 7px auto}.cell-notes:not(:empty)+.cell-slot,.cell-notes:not(:empty){z-index:1}.cell:has(.cell-notes:not(:empty)) .cell-pair{opacity:.1}.cell-slot{display:grid;position:absolute;inset:5px}.cell.has-piece .cell-pair,.cell.has-piece .cell-notes{display:none}.cell.celebrate{animation:celebrate .6s cubic-bezier(.3, 1.6, .5, 1) var(--delay,0s) both}.piece{width:var(--piece);height:var(--piece);transform-origin:0 0;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;outline-offset:2px;position:relative}.piece-card{background:var(--tint,var(--panel));border:2.5px solid var(--stroke);width:100%;height:100%;box-shadow:0 3px 0 var(--stroke);transform:rotate(var(--tilt,0deg));border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:4px;transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s,background .2s;display:flex;overflow:hidden}.piece[data-tint="0"]{--tint:var(--tint-0)}.piece[data-tint="1"]{--tint:var(--tint-1)}.piece[data-tint="2"]{--tint:var(--tint-2)}.piece[data-tint="3"]{--tint:var(--tint-3)}.piece[data-tint="4"]{--tint:var(--tint-4)}.piece[data-tint="5"]{--tint:var(--tint-5)}.piece[data-tint="6"]{--tint:var(--tint-6)}.piece[data-tint="7"]{--tint:var(--tint-7)}@media (hover:hover){.piece:hover .piece-card{box-shadow:0 5px 0 var(--stroke);transform:rotate(0)translateY(-2px)}}.piece.is-selected .piece-card{background:var(--select);box-shadow:0 7px 0 var(--stroke);animation:1.3s ease-in-out infinite bob;transform:rotate(0)translateY(-4px)scale(1.05)}.piece.is-lifted{opacity:.25}.piece.pop .piece-card{animation:.42s cubic-bezier(.3,1.7,.5,1) pop}.piece.nudge .piece-card{animation:.7s ease-in-out 2 nudge}.piece-icon{font-size:calc(var(--piece) * .42);line-height:1}img.piece-icon,img.word-icon,img.mini,img.note{object-fit:contain;width:1em;height:1em}.piece-label{max-width:100%;font-size:calc(clamp(8px, calc(var(--piece) * .13), 11px) * var(--fit,1));text-align:center;text-transform:uppercase;letter-spacing:.01em;overflow-wrap:break-word;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;flex-shrink:0;font-weight:900;line-height:1.05;display:-webkit-box;overflow:hidden}.piece-icon{flex-shrink:1;min-height:0}.cell-slot .piece{width:100%;height:100%}.cell-slot .piece-card{box-shadow:0 2px 0 var(--stroke);border-width:2px;border-radius:10px;transform:none}.cell-slot .piece-icon{font-size:calc(var(--cell) * .4)}.cell-slot .piece-label{font-size:calc(clamp(8px, calc(var(--cell) * .11), 13px) * var(--fit,1))}.ghost{z-index:100;pointer-events:none;position:fixed;top:0;left:0}.ghost .piece-card{box-shadow:0 16px 24px #00000040, 0 4px 0 var(--stroke);transform:rotate(-5deg)scale(1.1)}.tray-panel{border:2.5px dashed var(--faint);background:color-mix(in srgb, var(--panel) 45%, transparent);border-radius:18px;flex:none;max-height:40dvh;padding:8px 10px 12px;overflow:auto}.tray-head{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);justify-content:space-between;margin-bottom:8px;padding-inline:4px;font-size:11px;font-weight:900;display:flex}.tray{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.slot{width:var(--piece);height:var(--piece);position:relative}.slot.is-empty:before{content:"";border:2px dashed var(--faint);border-radius:12px;position:absolute;inset:5px}.actions{flex:none;justify-content:center;gap:8px;display:flex}.btn{border:2.5px solid var(--stroke);background:var(--panel);height:46px;box-shadow:0 3px 0 var(--stroke);cursor:pointer;border-radius:14px;justify-content:center;align-items:center;gap:6px;padding:0 16px;font-size:15px;font-weight:900;transition:transform 80ms,box-shadow 80ms,background .15s;display:inline-flex}.btn:active:not(:disabled){box-shadow:0 0 0 var(--stroke);transform:translateY(3px)}.btn:disabled{opacity:.4;cursor:default}.btn[aria-pressed=true]{background:var(--select)}.btn--primary{background:var(--accent);color:var(--accent-ink)}.btn--primary.is-ready{animation:1.6s ease-in-out infinite ready}.btn--ghost{box-shadow:none;background:0 0;border-color:#0000}@media (width<=560px){.actions{gap:6px}.btn{padding:0 12px}.actions .btn:not(.btn--primary) .btn-label{display:none}}@media (width>=860px) and (aspect-ratio>=5/4){.stage{--piece:76px}.play{flex-direction:row;align-items:stretch}.board-wrap{min-width:0}.tray-panel{align-self:center;width:300px;max-height:none;padding:12px 14px 16px}}.toast{z-index:300;background:var(--ink);max-width:calc(100vw - 32px);color:var(--paper);text-align:center;opacity:0;pointer-events:none;border-radius:12px;padding:10px 16px;font-size:14px;font-weight:800;transition:opacity .2s,transform .2s;position:fixed;top:62px;left:50%;transform:translate(-50%,-8px)}.toast.is-visible{opacity:1;transform:translate(-50%)}.modal{border:3px solid var(--stroke);background:var(--panel);width:min(460px,100vw - 32px);max-height:calc(100dvh - 48px);color:var(--ink);box-shadow:0 8px 0 var(--stroke);border-radius:20px;padding:0}.modal[open]{animation:.28s cubic-bezier(.3,1.4,.5,1) modal-in}.modal::backdrop{background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-inner{padding:20px 22px 22px;position:relative}.modal-close{position:absolute;top:10px;right:10px}.modal h2{font-family:var(--font-display);margin:0 40px 12px 0;font-size:24px;font-weight:800}.modal-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px;display:flex}.help p,.help li{line-height:1.45}.help ul{margin:12px 0 0;padding-left:20px}.help li+li{margin-top:6px}.example{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:14px 0;display:flex}.ex-word,.ex-piece{border:2.5px solid var(--stroke);background:var(--panel-2);width:78px;height:70px;box-shadow:0 3px 0 var(--stroke);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;display:flex}.ex-piece{background:var(--select);transform:rotate(-3deg)}.ex-icon{font-size:28px;line-height:1.1}.ex-label{text-transform:uppercase;font-size:10px;font-weight:900}.ex-op{font-family:var(--font-display);color:var(--ink-soft);font-size:24px;font-weight:800}.chapters{gap:10px;margin:0;padding:0;list-style:none;display:grid}.chapter-card{text-align:left;border:2.5px solid var(--stroke);background:var(--panel-2);width:100%;box-shadow:0 3px 0 var(--stroke);cursor:pointer;border-radius:14px;grid-template-rows:auto auto;grid-template-columns:36px 1fr auto;align-items:center;column-gap:12px;padding:10px 14px;transition:transform .12s;display:grid}.chapter-card:hover{transform:translateY(-2px)}.chapter-card.is-current{background:var(--hover)}.chapter-num{border:2px solid var(--stroke);background:var(--panel);width:36px;height:36px;font-family:var(--font-display);border-radius:50%;grid-row:span 2;place-items:center;font-weight:800;display:grid}.chapter-card.is-done .chapter-num{background:var(--ok);color:#fff}.chapter-title{font-weight:900}.chapter-meta{color:var(--ink-soft);grid-column:2;font-size:12px}.chapter-icons{letter-spacing:2px;grid-area:1/3/span 2;font-size:20px}.hint ol{margin:0;padding-left:20px}.hint li{color:var(--ink-soft);line-height:1.45}.hint li+li{margin-top:8px}.hint li.is-key{color:var(--ink);font-weight:800}.hint-meta{color:var(--ink-soft);margin:14px 0 0;font-size:12px}.win{text-align:center}.win-art{justify-content:center;gap:6px;font-size:34px;display:flex}.win-icon{animation:.5s cubic-bezier(.3,1.7,.5,1) both bounce-in;display:inline-block}.win-icon:nth-child(2){animation-delay:60ms}.win-icon:nth-child(3){animation-delay:.12s}.win-icon:nth-child(4){animation-delay:.18s}.win-icon:nth-child(5){animation-delay:.24s}.stats{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;display:grid}.stat{background:var(--panel-2);border-radius:12px;flex-direction:column;padding:10px 4px;display:flex}.stat strong{font-family:var(--font-display);font-size:26px;font-weight:800}.stat span{color:var(--ink-soft);font-size:12px}.modal--win .modal-actions{justify-content:center}.particle{z-index:250;pointer-events:none;font-size:26px;position:fixed}.empty{color:var(--ink-soft);margin:auto}@keyframes pop{0%{transform:scale(.78)}60%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes bob{0%,to{transform:rotate(0)translateY(-4px)scale(1.05)}50%{transform:rotate(0)translateY(-8px)scale(1.05)}}@keyframes nudge{0%,to{transform:rotate(0)}20%{transform:rotate(-9deg)scale(1.08)}40%{transform:rotate(8deg)scale(1.08)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(7px)}60%{transform:translate(-5px)}80%{transform:translate(3px)}}@keyframes celebrate{0%{transform:translateY(0)rotate(0)}45%{transform:translateY(-14px)rotate(-3deg)scale(1.06)}to{transform:translateY(0)rotate(0)}}@keyframes ready{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes modal-in{0%{opacity:0;transform:translateY(16px)scale(.96)}to{opacity:1;transform:none}}@keyframes bounce-in{0%{opacity:0;transform:translateY(14px)scale(.5)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}