.ff-page{--ff-ink:#24443e;--ff-paper:#f4f0e5;--ff-line:#d6d7c5;--ff-accent:#236554;color:var(--ink);max-width:1100px;margin:auto}.ff-intro{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:16px 0 28px}.ff-intro .eyebrow{display:block;margin-top:24px}.ff-intro h1{font-size:clamp(42px,7vw,76px);letter-spacing:-.065em;line-height:1.05;margin:8px 0 12px}.ff-intro h1 span{color:var(--ff-accent)}.ff-intro p{color:var(--muted);margin:0}.ff-direction{display:flex;align-items:center;gap:18px;color:var(--ff-accent)}.ff-direction b{font-size:100px;line-height:1}.ff-direction span{font-size:11px;letter-spacing:.13em;line-height:1.8;font-weight:800}.ff-workspace{display:grid;grid-template-columns:minmax(0,660px) minmax(240px,1fr);gap:32px;align-items:start}.ff-stage{background:var(--ff-paper);border:1px solid var(--ff-line);padding:20px;border-radius:20px;color:var(--ff-ink)}.ff-board-top{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.08em;font-weight:800;margin-bottom:14px}.ff-board{position:relative;aspect-ratio:1;background:#dadfce;border:6px solid #c4cebb;border-radius:12px;box-shadow:inset 0 2px 9px #173f3420;touch-action:none;overflow:hidden;user-select:none}.ff-stone{position:absolute;width:10%;height:10%;padding:5px;border:0;background:transparent;cursor:grab;display:grid;place-items:center;outline-offset:-3px;-webkit-tap-highlight-color:transparent}.ff-stone:focus-visible{outline:3px solid var(--ff-ink);z-index:3;border-radius:8px}.ff-gem{height:100%;width:100%;max-width:48px;max-height:48px;display:grid;place-items:center;background:var(--gem);color:#fff;font-size:clamp(12px,2.2vw,24px);border-radius:50%;box-shadow:inset 0 -4px 0 #0002,inset 0 3px 0 #fff3,0 2px 2px #15352a20;transition:filter .12s,outline .12s;line-height:1}.ff-stone[data-kind="0"]{--gem:#cb5241}.ff-stone[data-kind="1"]{--gem:#287aac}.ff-stone[data-kind="2"]{--gem:#328467}.ff-stone[data-kind="3"]{--gem:#b47717}.ff-stone[data-kind="4"]{--gem:#88549d}.ff-stone.selected .ff-gem,.ff-stone.target .ff-gem{outline:3px solid #fff;outline-offset:1px;filter:brightness(1.1)}.ff-stone.selected{z-index:2;cursor:grabbing}.ff-board[aria-busy="true"] .ff-stone{cursor:wait}.ff-start-panel{padding:24px 8px 8px;text-align:center}.ff-start-panel h2{font-size:25px;margin:0 0 10px;letter-spacing:-.035em}.ff-start-panel p{font-size:14px;line-height:1.6;max-width:410px;margin:0 auto 18px}.ff-status{font-size:13px;line-height:1.6;margin:14px 2px 0;min-height:42px}.ff-dashboard{padding:24px 0 0}.ff-score{margin:16px 0 22px}.ff-score span,.ff-record span{display:block;font-size:12px;color:var(--muted)}.ff-score strong{font-size:56px;line-height:1.2;letter-spacing:-.05em;font-variant-numeric:tabular-nums}.ff-meters{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.ff-meters span{font-size:12px;color:var(--muted);display:block}.ff-meters b{font-size:26px;display:block;margin-top:6px}.ff-progress{margin:20px 0}.ff-progress span{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);gap:10px}.ff-progress progress{width:100%;height:6px;margin-top:10px;accent-color:var(--ff-accent);border:0}.ff-record{padding:0 0 18px}.ff-record strong{display:block;font-size:28px;letter-spacing:-.025em}.ff-record small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.ff-dashboard>.button{width:100%;margin-bottom:10px}.ff-guide{padding-top:12px;margin-top:12px;border-top:1px solid var(--line)}.ff-guide h2{font-size:18px;letter-spacing:-.035em}.ff-guide ol{list-style:none;padding:0;counter-reset:steps}.ff-guide li{font-size:13px;line-height:1.6;padding-left:28px;position:relative;margin:14px 0;counter-increment:steps;color:var(--muted)}.ff-guide li:before{content:counter(steps);position:absolute;left:0;color:var(--ff-accent);font-weight:800}.ff-guide li b{display:block;color:var(--ink)}.ff-guide p,.ff-mode{font-size:12px;color:var(--muted);line-height:1.6}.ff-result{margin:32px 0;padding:26px;border:1px solid var(--line);border-radius:16px;display:flex;justify-content:space-between;gap:24px;align-items:center}.ff-result h2{font-size:28px;margin:8px 0}.ff-result p{font-size:14px;color:var(--muted);line-height:1.6}.ff-result>div:last-child{display:grid;text-align:center;min-width:150px;font-size:12px;color:var(--muted)}.ff-result strong{font-size:48px;color:var(--ink)}.ff-help{font-size:13px;line-height:1.7;color:var(--muted);margin:28px 0}.ff-help summary{cursor:pointer;font-weight:700;color:var(--ink)}.ff-library-art{background:#e8ecdf;height:174px;margin:-1px -1px 22px;position:relative;overflow:hidden;padding:24px;color:#24443e;display:flex;align-items:center;gap:16px}.ff-library-art>div{display:grid;grid-template-columns:repeat(3,26px);gap:4px;transform:rotate(-8deg)}.ff-library-art i{font-style:normal;height:26px;display:grid;place-items:center;color:#fff;border-radius:50%;background:#287aac;font-size:15px}.ff-library-art i:nth-child(3n){background:#cb5241}.ff-library-art i:nth-child(3n + 2){background:#328467}.ff-library-art>b{font-size:64px;line-height:1}.ff-library-art>span{font-size:10px;font-weight:800;letter-spacing:.1em;line-height:1.6}.ff-page [hidden]{display:none!important}[data-theme="dark"] .ff-page{--ff-ink:#edf1df;--ff-paper:#25352d;--ff-line:#415349;--ff-accent:#9ad6b8}[data-theme="dark"] .ff-board{background:#17271e;border-color:#3b4e40}[data-theme="dark"] .ff-library-art{background:#25352d;color:#d8e5cd}@media(max-width:800px){.ff-workspace{grid-template-columns:minmax(0,1fr);gap:12px;max-width:620px;margin:auto}.ff-intro{margin-bottom:20px}.ff-direction b{font-size:66px}.ff-direction span{display:none}.ff-dashboard{padding-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.ff-dashboard>.eyebrow,.ff-guide,.ff-mode{grid-column:1/-1}.ff-score{margin:0}.ff-score strong{font-size:38px}.ff-meters{padding:8px 0}.ff-meters b{font-size:22px}.ff-progress{margin:0;align-self:center}.ff-record{padding:0}.ff-guide{margin:0}.ff-guide ol{display:flex;gap:14px}.ff-guide li{flex:1;padding-left:20px;font-size:12px}.ff-stage{padding:12px}.ff-stone{padding:3px}.ff-result{padding:18px}.ff-result h2{font-size:23px}}@media(max-width:420px){.ff-intro .eyebrow{margin-top:16px}.ff-intro h1{font-size:46px}.ff-intro p{font-size:13px;max-width:220px;line-height:1.5}.ff-direction b{font-size:55px}.ff-stage{padding:9px}.ff-board{border-width:4px}.ff-stone{padding:2px}.ff-gem{font-size:13px;box-shadow:inset 0 -2px 0 #0002,inset 0 2px 0 #fff3}.ff-guide ol{display:block}.ff-result{display:block}.ff-result>div:last-child{margin-top:18px;text-align:left}.ff-board-top{font-size:9px}.ff-score strong{font-size:34px}}@media(prefers-reduced-motion:reduce){.ff-gem{transition:none}}
.ff-stage{position:relative}.ff-preview .ff-stone{opacity:.22;pointer-events:none}.ff-start-panel{position:absolute;top:23%;left:8%;right:8%;padding:24px;background:var(--ff-paper);border:1px solid var(--ff-line);border-radius:16px;box-shadow:0 8px 32px #17271e18}.ff-start-panel .button{white-space:normal}@media(max-width:420px){.ff-start-panel{top:18%;left:5%;right:5%;padding:16px}.ff-start-panel h2{font-size:22px}.ff-start-panel p{font-size:12px;margin-bottom:12px}}
.ff-board.ff-dragging,.ff-board.ff-dragging .ff-stone{cursor:grabbing}.ff-stone.dragging,.ff-stone.swapping{z-index:5;will-change:transform}.ff-stone.target{z-index:4;will-change:transform}.ff-stone.dragging .ff-gem{transform:scale(1.1);outline:3px solid #fff;outline-offset:1px;box-shadow:inset 0 -3px 0 #0002,inset 0 3px 0 #fff3,0 6px 12px #17352a45}.ff-gem{transition:transform 75ms ease-out,filter 75ms,outline 75ms}.ff-hit{position:absolute;transform:translate(-50%,-50%);z-index:8;pointer-events:none;font-size:22px;font-weight:800;line-height:1;white-space:nowrap;padding:8px 12px;border-radius:12px;color:var(--ff-ink);background:var(--ff-paper);border:1px solid var(--ff-line);box-shadow:0 4px 14px #17352a30;animation:ff-hit-pop 520ms ease-out both}@keyframes ff-hit-pop{0%{opacity:0;transform:translate(-50%,-20%) scale(.8)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.08)}60%{opacity:1}100%{opacity:0;transform:translate(-50%,-120%) scale(1)}}@media(prefers-reduced-motion:reduce){.ff-gem{transition:none}.ff-stone.dragging .ff-gem{transform:none}}

.ff-board-frame{position:relative}.ff-end-panel{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:18px;background:#17352a80;border-radius:12px}.ff-end-card{width:min(100%,340px);padding:28px 22px;text-align:center;background:var(--ff-paper);color:var(--ff-ink);border:1px solid var(--ff-line);border-radius:18px;box-shadow:0 12px 36px #142c2540}.ff-end-card h2{font-size:36px;line-height:1.1;letter-spacing:-.045em;margin:0 0 12px}.ff-end-card>p{font-size:14px;line-height:1.5;margin:0}.ff-end-card .ff-end-score{margin:18px 0 22px}.ff-end-score strong{display:block;font-size:52px;line-height:1.1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.ff-end-score span{display:block;font-size:12px;margin-top:5px}.ff-end-card .button{width:100%;touch-action:manipulation}@media(max-width:420px){.ff-end-panel{padding:14px}.ff-end-card{padding:18px 14px;border-radius:14px}.ff-end-card h2{font-size:28px;margin-bottom:8px}.ff-end-card>p{font-size:12px}.ff-end-card .ff-end-score{margin:12px 0 16px}.ff-end-score strong{font-size:38px}}

/* Compact play layout. */

.ff-mode-picker{margin-bottom:18px}.ff-mode-picker label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}.ff-mode-picker select{width:100%;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}.ff-mode-picker select:focus-visible{outline:2px solid var(--ff-accent);outline-offset:3px}.ff-mode-picker small,.ff-mode-picker p{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin:6px 0 0}.ff-mode-picker select:disabled{cursor:wait;opacity:.65}

.ff-workspace{grid-template-columns:minmax(0,min(60svh,620px)) minmax(220px,1fr);gap:26px;max-width:980px;margin:auto}.ff-stage{padding:12px}.ff-board-top{margin-bottom:8px}.ff-status{min-height:0;margin:10px 0 0;font-size:12px}.ff-dashboard{padding-top:12px}.ff-score{margin:10px 0 16px}.ff-score strong{font-size:44px}.ff-mode{font-size:11px}.ff-guide{border:0;margin:0;padding:0}.ff-guide ol{display:block}.ff-guide li{font-size:14px}.ff-library-art{height:76px;margin:0 0 16px;padding:10px;width:100%}.ff-library-art>div{grid-template-columns:repeat(3,16px);gap:3px}.ff-library-art i{height:16px;font-size:10px}.ff-library-art>b{font-size:40px}
@media(max-width:800px){.ff-workspace{grid-template-columns:1fr;max-width:560px}.ff-stage{width:min(100%,calc(100svh - 230px));margin:auto;min-width:min(100%,280px)}.ff-dashboard{grid-template-columns:1fr 1fr;padding:8px 0;gap:8px 20px}.ff-dashboard>.eyebrow{display:none}.ff-score strong{font-size:30px}.ff-score{margin:0}}