:root{--bg:#eaf7f0;--panel:hsla(0,0%,100%,.9);--panel-2:hsla(0,0%,100%,.62);--board:#fcfefd;--text:#223f36;--muted:#70877d;--line:rgba(98,143,119,.18);--accent:#3fa96d;--accent-2:#91ddb1;--food:#f27f62;--bonus:#e9b94d;--rare:#8ea8ee;--grid:rgba(63,169,109,.12);--board-edge:rgba(63,169,109,.32);--key-down:rgba(119,220,158,.2);--overlay:hsla(0,0%,100%,.66);--shadow:0 18px 50px rgba(78,123,98,.14);--switch-off:#dbe4dd;--switch-knob:#fff;--glow-a:rgba(119,220,158,.24);--glow-b:rgba(126,189,240,.15)}*{box-sizing:border-box}body,html{margin:0;min-height:100%}body{background:radial-gradient(circle at 12% 8%,var(--glow-a),transparent 30%),radial-gradient(circle at 90% 14%,var(--glow-b),transparent 28%),var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}button{color:inherit;cursor:pointer;font:inherit}button,canvas{-webkit-tap-highlight-color:transparent}.app{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 372px;height:100svh;margin:0 auto;max-width:1500px;overflow:hidden;padding:16px}.card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:var(--panel);border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:26px;box-shadow:var(--shadow)}.stage{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 96%,transparent),color-mix(in srgb,var(--panel) 88%,var(--panel-2)));display:grid;gap:12px;grid-template-rows:auto minmax(0,1fr) auto auto;min-height:0;min-width:0;overflow:hidden;padding:16px}.stage-top{align-items:flex-start;display:flex;gap:16px;justify-content:space-between}.eyebrow{align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;color:var(--muted);display:inline-flex;font-size:12px;min-height:28px;padding:0 11px}.headline h1{font-size:clamp(30px,3vw,42px);letter-spacing:-.055em;line-height:1;margin:10px 0 6px}.headline p{color:var(--muted);font-size:14px;line-height:1.6;margin:0;max-width:720px}.top-stats{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(86px,1fr));min-width:280px}.score-card,.top-stat{background:color-mix(in srgb,var(--panel) 80%,var(--panel-2));border:1px solid var(--line);border-radius:16px;padding:10px 12px}.score-card span,.top-stat span{color:var(--muted);display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.score-card strong,.top-stat strong{display:block;font-size:18px;letter-spacing:-.03em;margin-top:5px}.board-shell{aspect-ratio:1/1;background:transparent;border:0;margin:auto;overflow:visible;padding:0;position:relative;width:min(100%,calc(100svh - 286px),930px)}canvas{background:linear-gradient(180deg,color-mix(in srgb,var(--board) 96%,#fff),var(--board));border-radius:0;box-shadow:none;display:block;height:100%;outline:none;touch-action:none;width:100%}.overlay{background:color-mix(in srgb,var(--overlay) 92%,transparent);border-radius:0;display:grid;inset:0;opacity:0;place-items:center;pointer-events:none;position:absolute;text-align:center;transition:opacity .18s ease}.overlay.show{opacity:1;pointer-events:auto}.overlay-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 34px rgba(0,0,0,.08);padding:22px;width:min(360px,calc(100% - 24px))}.overlay-card .tag{align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;color:var(--muted);display:inline-flex;font-size:12px;justify-content:center;min-height:30px;padding:0 12px}.overlay-card h2{font-size:28px;letter-spacing:-.04em;line-height:1;margin:12px 0 8px}.overlay-card p{color:var(--muted);font-size:14px;line-height:1.7;margin:0}.kbd-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-top:2px}.kbd{background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--muted);display:grid;font-size:12px;height:30px;min-width:34px;padding:0 10px;place-items:center;transition:background .12s ease,border-color .12s ease,transform .12s ease,color .12s ease}.kbd.down{background:var(--key-down);border-color:var(--accent);color:var(--text);transform:translateY(1px)}.mobile-pad{display:none;gap:8px;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px);height:112px;justify-content:center;margin:0 auto;width:156px}.pad-btn{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.06);color:var(--text);font-size:18px}.pad-btn:active{background:var(--key-down);border-color:var(--accent);transform:translateY(1px)}.pad-up{grid-column:2;grid-row:1}.pad-left{grid-column:1;grid-row:2}.pad-down{grid-column:2;grid-row:2}.pad-right{grid-column:3;grid-row:2}.sidebar{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;padding:12px;scrollbar-width:thin}.side-title{padding:2px 2px 0}.side-title h2{font-size:24px;letter-spacing:-.045em;line-height:1;margin:0}.side-title p{color:var(--muted);font-size:13px;line-height:1.55;margin:7px 0 0}.section{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 68%,var(--panel-2)),var(--panel-2));border:1px solid color-mix(in srgb,var(--line) 76%,transparent);border-radius:20px;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 30%,transparent);padding:14px}.section-title{align-items:baseline;display:flex;gap:10px;justify-content:space-between;margin-bottom:10px}.section-title b{align-items:center;display:inline-flex;font-size:14px;gap:7px}.section-title b:before{background:var(--accent);border-radius:999px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);content:"";height:7px;width:7px}.section-title span{color:var(--muted);font-size:12px}.grid{display:grid;gap:8px}.cols-2{grid-template-columns:1fr 1fr}.cols-3{grid-template-columns:1fr 1fr 1fr}.cols-4{grid-template-columns:repeat(4,1fr)}.btn,.seg,.theme-btn{background:var(--panel);border:1px solid var(--line);border-radius:14px;min-height:42px;padding:0 12px;position:relative;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease}.seg{min-height:56px;padding:10px;text-align:left}.btn:hover,.seg:hover,.theme-btn:hover{border-color:var(--accent);transform:translateY(-1px)}.btn:active,.seg:active,.theme-btn:active{transform:translateY(0) scale(.985)}.btn.primary{background:var(--text);border-color:var(--text);color:var(--panel)}.btn.active,.seg.active,.theme-btn.active{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 88%,var(--accent) 8%),var(--panel));border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent)}.seg b{display:block;font-size:14px;line-height:1.2}.seg small{color:var(--muted);display:block;font-size:11px;line-height:1.35;margin-top:4px}.theme-btn{align-items:center;display:flex;gap:9px;justify-content:flex-start}.swatch{background:var(--swatch);border:1px solid rgba(0,0,0,.08);border-radius:50%;flex:none;height:18px;width:18px}.score-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}.toggle{align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;cursor:pointer;display:flex;gap:12px;justify-content:space-between;padding:12px;text-align:left;transition:border-color .14s ease,background .14s ease,transform .14s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.toggle+.toggle{margin-top:8px}.toggle:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line))}.toggle:active{transform:scale(.992)}.toggle b{display:block;font-size:14px}.toggle small{color:var(--muted);display:block;font-size:11px;line-height:1.4;margin-top:4px}.switch{background:var(--switch-off);border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:999px;flex:none;height:26px;position:relative;transition:background .16s ease,box-shadow .16s ease,border-color .16s ease;width:46px}.switch:after{background:var(--switch-knob);border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.18);content:"";height:18px;left:3px;position:absolute;top:3px;transition:left .16s ease;width:18px}.toggle.on .switch{background:var(--accent);border-color:color-mix(in srgb,var(--accent) 75%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}.toggle.on .switch:after{left:23px}.legend,.rule-list{display:grid;gap:8px;margin-top:10px}.legend-item{align-items:center;color:var(--muted);display:flex;font-size:12px;gap:9px;line-height:1.35}.dot{border-radius:50%;flex:none;height:12px;width:12px}.dot.normal{background:var(--food)}.dot.bonus{background:var(--bonus)}.dot.rare{background:var(--rare)}.hint{border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:12px;line-height:1.7}.hint,.rule-card{background:var(--panel);padding:12px}.rule-card{border:1px solid var(--line);border-radius:14px}.rule-card b{color:var(--text);display:block;font-size:14px}.guide-body,.rule-card p{color:var(--muted);font-size:12px;line-height:1.65}.rule-card p{margin:5px 0 0}.guide-body{font-size:13px;line-height:1.75}.guide-body p{margin:0}.guide-body p+p{margin-top:8px}.zen-exit{background:var(--panel);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);color:var(--text);display:none;min-height:40px;padding:0 14px;position:fixed;right:16px;top:16px;z-index:50}body[data-view=zen] .zen-exit{align-items:center;display:inline-flex;justify-content:center}body[data-view=focus] .headline,body[data-view=focus] .top-stats{display:none}body[data-view=focus] .board-shell{width:min(100%,calc(100svh - 154px),980px)}body[data-view=zen] .sidebar{display:none}body[data-view=zen] .app{grid-template-columns:1fr;max-width:1080px;place-items:center}body[data-view=zen] .stage{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;border:0;box-shadow:none;grid-template-rows:minmax(0,1fr);padding:0;width:100%}body[data-view=zen] .kbd-row,body[data-view=zen] .mobile-pad,body[data-view=zen] .stage-top{display:none}body[data-view=zen] .board-shell{background:transparent;border:0;box-shadow:none;filter:none;padding:0;width:min(100%,94svh,980px)}body[data-view=zen] .overlay,body[data-view=zen] canvas{-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;box-shadow:none;filter:none}.spacer{height:8px}.spacer-large{height:10px}html[dir=rtl] body{direction:rtl;font-family:Tahoma,Arial,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}html[dir=rtl] .app{direction:ltr;grid-template-columns:minmax(0,1fr) 372px}html[dir=rtl] .board-shell,html[dir=rtl] .kbd-row,html[dir=rtl] .mobile-pad,html[dir=rtl] .stage,html[dir=rtl] canvas{direction:ltr}html[dir=rtl] .guide-body,html[dir=rtl] .headline,html[dir=rtl] .overlay-card,html[dir=rtl] .rule-card,html[dir=rtl] .section,html[dir=rtl] .seg,html[dir=rtl] .side-title,html[dir=rtl] .sidebar,html[dir=rtl] .theme-btn,html[dir=rtl] .toggle,html[dir=rtl] .top-stat{direction:rtl;text-align:right}html[dir=rtl] .legend-item,html[dir=rtl] .theme-btn{justify-content:flex-start}html[dir=rtl] .section-title,html[dir=rtl] .toggle{direction:rtl}html[dir=rtl] .section-title b{flex-direction:row}html[dir=rtl] .headline h1,html[dir=rtl] .overlay-card h2,html[dir=rtl] .score-card span,html[dir=rtl] .score-card strong,html[dir=rtl] .section-title span,html[dir=rtl] .side-title h2,html[dir=rtl] .top-stat span,html[dir=rtl] .top-stat strong{letter-spacing:0;text-transform:none}html[dir=rtl] .zen-exit{left:16px;right:auto}@media (max-width:1120px){body{overflow:auto}.app{grid-template-columns:1fr;height:auto;min-height:100svh}.app,.sidebar{overflow:visible}.board-shell{width:min(100%,920px)}html[dir=rtl] .app{grid-template-columns:1fr}html[dir=rtl] .sidebar,html[dir=rtl] .stage{grid-column:auto}}@media (max-width:760px){.app{gap:10px;padding:10px}.stage{grid-template-rows:auto minmax(0,1fr) auto;padding:12px}.stage-top{flex-direction:column;gap:10px}.top-stats{grid-template-columns:1fr 1fr 1fr;min-width:0;width:100%}.board-shell{width:min(100%,78svh,920px)}.kbd-row{display:none}.mobile-pad{display:grid}.cols-4{grid-template-columns:1fr 1fr}.cols-2,.cols-3{grid-template-columns:1fr}}@media (max-width:430px){.headline h1{font-size:30px}.headline p{font-size:13px}.top-stat{padding:9px}.section{padding:12px}}