.puzzle-body{--muted: #596577;--accent: color-mix(in srgb, var(--primary) 75%, #000);--error: #b91c1c;--line: color-mix(in srgb, var(--text) 60%, var(--card))}html[data-theme=dark] .puzzle-body{--muted: #b4c4d8;--accent: color-mix(in srgb, var(--primary) 45%, #fff);--error: #fca5a5}.puzzle-body .topbar{min-height:60px}.puzzle-body .topbar a{flex-shrink:0}.puzzle-body .topbar small{font-size:.75rem}.puzzle-page{max-width:940px}.puzzle-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}.puzzle-heading span{color:var(--accent)}.puzzle-heading h1{margin:6px 0}.puzzle-setup{display:flex;align-items:end;gap:8px;flex-shrink:0}.puzzle-setup label{display:grid;gap:6px;font-size:.8rem;font-weight:700}.puzzle-setup select{max-width:210px;min-height:44px;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font:inherit}.puzzle-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 auto 18px;max-width:640px;text-align:center}@media(min-width:640px){.puzzle-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}.puzzle-stats dt{color:var(--muted);font-size:.8rem}.puzzle-stats dd{margin:5px 0 0;font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}.puzzle-body .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--card)}.puzzle-body .btn:disabled{opacity:.45;cursor:not-allowed}.puzzle-body .btn[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--primary) 14%,var(--card))}.puzzle-toolbar,.puzzle-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0}.puzzle-toolbar .btn{min-width:90px}.puzzle-status{min-height:2.8em;color:var(--text);line-height:1.6;font-size:.88rem}.puzzle-help,.puzzle-records,.puzzle-footer{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);font-size:.82rem;line-height:1.7}.puzzle-help summary,.puzzle-records summary{cursor:pointer;font-weight:800;min-height:36px}.puzzle-help p,.puzzle-records p,.puzzle-records li,.puzzle-footer p{margin:5px 0;color:var(--muted)}.puzzle-records ol{margin:8px 0 0;padding-left:1.25em}.puzzle-footer .save-error{color:var(--error)}.puzzle-dialog{width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid var(--border);border-radius:18px;background:var(--card);color:var(--text)}.puzzle-dialog::backdrop{background:#0f172a99}.puzzle-dialog h2{margin-top:0}.puzzle-dialog p{color:var(--muted);line-height:1.65}.puzzle-dialog .puzzle-actions{justify-content:start}.tangram-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;align-items:start}.tangram-stage{width:100%;max-height:500px;min-height:260px;border:1px solid var(--border);border-radius:14px;background:var(--card);touch-action:none}.tangram-target{fill:color-mix(in srgb,var(--text) 16%,var(--card));stroke:none}.tangram-stage.show-guides .tangram-target{stroke:var(--muted);stroke-width:.018;stroke-dasharray:.07 .05}.tangram-piece{stroke:#172033;stroke-width:.025;cursor:grab}.tangram-piece.selected{stroke:var(--accent);stroke-width:.07}.tangram-preview{fill:color-mix(in srgb,var(--primary) 30%,transparent);stroke:var(--accent);stroke-width:.025;stroke-dasharray:.07 .05;pointer-events:none}.tangram-preview.hinting{fill:color-mix(in srgb,var(--primary) 42%,transparent);stroke-width:.05}.tangram-tray{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tangram-tray .btn{padding:6px;font-size:.72rem;touch-action:none}.tangram-tray-icon{position:relative;display:block}.tangram-tray svg{display:block;width:100%;height:50px}.tangram-tray .placed{color:var(--muted);background:color-mix(in srgb,var(--text) 8%,var(--card));border-color:color-mix(in srgb,var(--text) 28%,var(--border));border-style:dashed}.tangram-tray .placed svg{opacity:.22;filter:grayscale(1)}.tangram-tray-used{position:absolute;inset:0;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--card) 62%,transparent);color:var(--text);font-size:.72rem;font-weight:800;letter-spacing:.08em;pointer-events:none}.tangram-tray .btn.hinting{border-style:dashed;box-shadow:0 0 0 2px var(--accent)}.tangram-tray-name{display:block}.tangram-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.tangram-options .btn{padding:5px;font-size:.8rem}.tangram-label{margin:10px 0;font-size:.82rem;color:var(--muted)}.memory-board{--memory-cols: 4;display:grid;grid-template-columns:repeat(var(--memory-cols),minmax(0,1fr));gap:12px;max-width:560px;margin:auto}.memory-card{aspect-ratio:1.05;min-width:0;min-height:62px;display:grid;place-items:center;border:2px solid var(--border);border-radius:14px;background:var(--accent);color:var(--card);font:inherit;font-size:1.8rem;font-weight:800;cursor:pointer;transition:background-color .2s,color .2s,transform .2s}.memory-card.revealed{background:var(--card);color:var(--accent);border-color:var(--memory-face, var(--accent));transform:translateY(-1px)}.memory-card.hinting{border-style:dashed;box-shadow:0 0 0 2px var(--accent)}.memory-card.matched{background:color-mix(in srgb,var(--memory-face, var(--primary)) 14%,var(--card));color:var(--accent);border-style:dashed}.memory-card svg{width:58%;height:58%;pointer-events:none}.memory-card.math-card{font-size:clamp(.95rem,2.8vw,1.5rem)}.memory-card.hanzi-card{font-size:clamp(1.7rem,4.5vw,2.2rem)}.memory-card.pinyin-card{font-size:clamp(.95rem,2.6vw,1.35rem);letter-spacing:.02em;white-space:nowrap}.memory-card.word-card{font-size:clamp(1.25rem,3.4vw,1.75rem);white-space:nowrap}.memory-turns{text-align:center;color:var(--muted);font-size:.85rem}.calc-howto{margin:0 0 14px;color:var(--muted);font-size:.88rem;line-height:1.65}.calc-layout{display:grid;grid-template-columns:minmax(0,440px) 210px;justify-content:center;gap:24px}.calc-grid{display:grid;grid-template-columns:repeat(var(--size, 3),minmax(0,1fr));grid-template-rows:repeat(var(--size, 3),minmax(0,1fr));aspect-ratio:1;border:3px solid var(--line);background:var(--card)}.calc-row{display:contents}.calc-cell{position:relative;display:grid;place-items:center;min-width:0;border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:0;color:var(--accent);font:inherit;font-size:clamp(1.4rem,4vw,2rem);background:transparent;cursor:pointer}.calc-cell.cage-tone-0{background:color-mix(in srgb,#2563eb 9%,var(--card))}.calc-cell.cage-tone-1{background:color-mix(in srgb,#0d9488 9%,var(--card))}.calc-cell.cage-tone-2{background:color-mix(in srgb,#d97706 9%,var(--card))}.calc-cell.cage-tone-3{background:color-mix(in srgb,#7c3aed 9%,var(--card))}.calc-cell.cage-tone-4{background:color-mix(in srgb,#db2777 9%,var(--card))}.calc-cell.cage-tone-5{background:color-mix(in srgb,#0284c7 9%,var(--card))}.calc-cell.cage-right{border-right:3px solid var(--line)}.calc-cell.cage-bottom{border-bottom:3px solid var(--line)}.calc-cell.given{color:var(--text);font-weight:800}.calc-cell.cage-active{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--primary) 50%,var(--line))}.calc-cell[aria-selected=true]{background:color-mix(in srgb,var(--primary) 18%,var(--card));box-shadow:inset 0 0 0 3px var(--accent)}.calc-cell.hinting{z-index:1;box-shadow:0 0 0 3px var(--accent)}.calc-cell.conflict{color:var(--error)}.calc-cell.conflict:after{content:"!";position:absolute;bottom:4px;right:5px;font-size:.8rem}.cage-target{position:absolute;left:5px;top:4px;color:var(--text);font-size:clamp(.68rem,2vw,.85rem);font-weight:700}.calc-combos{margin:0 0 8px;min-height:1.4em;color:var(--text);font-size:.88rem;font-weight:700;line-height:1.55}.calc-notes{display:grid;grid-template-columns:repeat(2,1fr);width:65%;height:60%;margin-top:16%;color:var(--text);font-size:.82rem}.calc-notes span{display:grid;place-items:center}.puzzle-page:has(.flow-board),#gameArea:has(.flow-board){min-width:0}#gameArea:has(.flow-board){max-width:100%;overflow-x:auto}.flow-board{--size: 5;--gap: 2px;display:grid;grid-template-columns:repeat(var(--size),minmax(44px,1fr));width:min(100%,28rem);min-width:calc(var(--size) * 44px + (var(--size) - 1) * var(--gap) + 10px);margin:0 auto;aspect-ratio:1;gap:var(--gap);padding:2px;border:3px solid var(--line);background:var(--line);touch-action:none;user-select:none}.flow-row{display:contents}.flow-cell{position:relative;min-width:0;background:var(--card);cursor:pointer}.flow-cell[aria-selected=true]{box-shadow:inset 0 0 0 3px var(--flow, var(--accent));z-index:1}.flow-cell.hinting{z-index:2;box-shadow:inset 0 0 0 3px var(--flow, var(--accent)),0 0 0 3px var(--accent)}.flow-cell.flow-blocked{outline:3px solid var(--error);outline-offset:-3px}.flow-cell.needs-fill:after{content:"";position:absolute;inset:4px;border:2px dashed var(--muted);pointer-events:none}.flow-cell.filled{background:color-mix(in srgb,var(--flow) 18%,var(--card))}.flow-cell.connected{background:color-mix(in srgb,var(--flow) 28%,var(--card))}.flow-cell .pipe{position:absolute;background:var(--flow);pointer-events:none}.flow-cell .pipe.n{left:34%;right:34%;top:calc(var(--gap) * -1);height:calc(50% + var(--gap))}.flow-cell .pipe.s{left:34%;right:34%;bottom:calc(var(--gap) * -1);height:calc(50% + var(--gap))}.flow-cell .pipe.e{top:34%;bottom:34%;right:calc(var(--gap) * -1);width:calc(50% + var(--gap))}.flow-cell .pipe.w{top:34%;bottom:34%;left:calc(var(--gap) * -1);width:calc(50% + var(--gap))}.flow-cell .dot{position:absolute;display:grid;place-items:center;border-radius:50%;background:var(--flow);z-index:1;pointer-events:none}.flow-mark{color:var(--ink, #172033);font-size:clamp(.65rem,2.4vw,.95rem);font-weight:800;line-height:1;text-shadow:0 0 2px #fff,0 0 2px #fff}.ink-light .flow-mark{text-shadow:0 0 2px #172033,0 0 2px #172033}.flow-current{display:flex;align-items:center;gap:8px;min-width:0;margin:0;color:var(--text);font-weight:700}.flow-swatch{display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:var(--flow)}.flow-cell.endpoint .dot{inset:18%;box-shadow:0 0 0 2px color-mix(in srgb,#fff 78%,var(--flow))}.flow-options{max-width:28rem;margin:12px auto 0;align-items:center;flex-wrap:wrap}.flow-options .flow-current,.flow-options .btn{flex:1 1 8rem}.calc-keypad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.calc-keypad .btn{font-size:1.4rem;min-height:55px}.calc-options{display:flex;gap:8px;margin-top:12px}.calc-options .btn{flex:1;padding:8px}html[data-high-contrast] .puzzle-body{--border: var(--line)}@media(max-width:700px){.puzzle-heading{display:block}.puzzle-setup{margin-top:14px}.tangram-layout,.calc-layout{grid-template-columns:minmax(0,1fr);gap:12px;max-width:480px;margin:auto}.calc-howto{max-width:480px;margin:0 auto 12px}.tangram-tray{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.tangram-tray svg{height:38px}.tangram-tray-name{display:none}.tangram-options{grid-template-columns:repeat(4,minmax(0,1fr))}.calc-keypad{grid-template-columns:repeat(var(--size, 3),minmax(0,1fr))}}@media(max-width:480px){.puzzle-body .topbar{min-height:52px;gap:8px;font-size:.82rem}.puzzle-body .topbar small{display:none}.puzzle-page{padding-top:16px}.puzzle-heading h1{font-size:1.6rem}.puzzle-heading p{font-size:.85rem}.puzzle-setup select{max-width:190px}.puzzle-toolbar{gap:6px}.puzzle-toolbar .btn{min-width:80px;padding-inline:12px}.memory-board{gap:7px}.memory-card{font-size:1.5rem;border-radius:10px}.puzzle-page:has(.flow-board) .puzzle-heading p,.puzzle-page:has(.flow-board) .calc-howto{display:none}}
