:root{--board-light-x:36%;--board-light-y:24%;--bead-light-x:36%;--bead-light-y:24%;--app-bg:#111417;--app-wash:none;--app-fg:#eef3f8;--button-bg:#d8b25f;--button-bg-hover:#efc773;--button-fg:#081011;--control-bg:#ffffff0f;--control-border:#eef3f82e;--control-fg:#eef3f8;--control-option-bg:#fff;--control-option-fg:#111417;--disabled-bg:#eef3f81a;--disabled-fg:#eef3f86b;--label-fg:#aeb9c1;--panel-bg:#080a0cf0;--panel-bg-soft:#080a0cb8;--panel-border:#eef3f829;--popover-bg:#090c0ef5;--popover-copy:#d6dde2;--score-shadow:transparent;--overlay-bg:#05070994;--selected-bg:#247466d1;--selected-fg:#f7fbfb;color:var(--app-fg);background:var(--app-bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:root[data-appearance=light]{--app-bg:#f3f6f4;--app-wash:none;--app-fg:#172125;--button-bg:#bd8e28;--button-bg-hover:#d7a83d;--button-fg:#111417;--control-bg:#ffffffd1;--control-border:#1721252e;--control-fg:#172125;--control-option-bg:#fff;--control-option-fg:#172125;--disabled-bg:#1721251a;--disabled-fg:#1721256b;--label-fg:#536069;--panel-bg:#fffffff0;--panel-bg-soft:#ffffffb8;--panel-border:#17212524;--popover-bg:#fffffff7;--popover-copy:#38464d;--score-shadow:#32383a2e;--overlay-bg:#e1e8e694;--selected-bg:#167465e0;--selected-fg:#f7fbfb}*{box-sizing:border-box}html,body{width:100%;min-width:320px;height:100%;margin:0;overflow:hidden}body{min-height:100svh;color:var(--app-fg);background:var(--app-bg)}#root{height:100svh;min-height:0}button,input,select{font:inherit}.app-shell{height:100svh;min-height:0;color:var(--app-fg);background:var(--app-bg);perspective:1200px;grid-template-rows:minmax(0,1fr);gap:clamp(6px,1.2svh,14px);padding:clamp(8px,1.5svh,18px);display:grid;position:relative;overflow:hidden}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.settings-toggle{z-index:20;background:#d8b25feb;min-height:34px;padding:0 12px;position:fixed;bottom:10px;right:10px;box-shadow:0 10px 24px #00000052}.is-hidden-action{visibility:hidden;pointer-events:none}.score-hud{z-index:20;pointer-events:none;grid-template-columns:minmax(0,1fr) auto;gap:6px;width:min(100% - 16px,178px);display:inline-grid;position:fixed;top:8px;left:8px}.score-hud>div{min-height:30px;box-shadow:none;text-shadow:0 1px 3px #0000006b;background:0 0;border:0;border-radius:8px;align-items:baseline;gap:5px;padding:4px 7px;display:flex}.score-hud .label{font-size:.62rem;display:inline}.score-hud strong{margin-top:0;font-size:clamp(.98rem,3.6vw,1.18rem);display:inline}.status-strip{grid-template-columns:minmax(112px,140px) minmax(112px,140px) minmax(160px,190px);place-self:start center;gap:8px;display:grid}.status-strip>div,.control-panel{border:1px solid var(--panel-border);background:var(--panel-bg-soft);box-shadow:0 14px 32px var(--score-shadow);border-radius:8px}.status-strip>div{min-height:54px;padding:8px 10px}.label{color:var(--label-fg);letter-spacing:0;text-transform:uppercase;font-size:.72rem;font-weight:700;display:block}strong{text-overflow:ellipsis;max-width:100%;margin-top:4px;font-size:clamp(1.35rem,3vw,2.1rem);line-height:1;display:block;overflow:hidden}input,select{border:1px solid var(--control-border);color:#111417;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#fff;border-radius:6px;width:100%;height:32px;margin-top:5px;font-weight:800}select option{color:#111417;background:#fff}select:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #54c7b8b8}.inline-control{grid-template-columns:minmax(0,1fr) 44px;align-items:end;gap:6px;display:grid}.inline-control select{min-width:0}.seed-control{grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:6px;display:grid}.seed-control input{min-width:0}.icon-button{border-radius:6px;place-items:center;width:44px;min-height:32px;margin-top:5px;padding:0;line-height:1;display:grid}.game-board-shell{place-self:stretch center;place-items:center;width:min(100%,380px);min-height:0;display:grid;position:relative}.number-board-overlay{z-index:3;pointer-events:none;width:min(86%,300px);position:absolute;top:-18px;left:50%;transform:translate(-50%)}.number-board-header{z-index:4;pointer-events:auto;justify-content:end;align-items:end;gap:12px;display:flex;position:absolute;top:0;right:0}.number-board-header strong{font-size:clamp(1.2rem,2.6vw,1.8rem)}.number-board{gap:4px;display:grid;position:relative}.number-cell{z-index:1;aspect-ratio:1;color:#0000;min-width:0;text-shadow:none;pointer-events:none;background:0 0;border:1px solid #0000;border-radius:50%;place-items:center;font-size:clamp(.9rem,4vw,1.2rem);font-weight:800;line-height:1;transition:opacity .14s,transform .14s,background-color .14s,border-color .14s;display:grid;position:relative}.number-cell.is-highlighted{color:#0000;text-shadow:none;background:0 0;border-color:#0000;transform:translateY(-2px)scale(1.06)}.number-cell.is-removed{opacity:.18;transform:scale(.56)}.instructions-backdrop{z-index:50;background:var(--overlay-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);place-items:center;padding:16px;display:grid;position:fixed;inset:0}.instructions-popover{border:1px solid var(--panel-border);width:min(100%,300px);color:var(--app-fg);background:var(--popover-bg);border-radius:8px;padding:13px;box-shadow:0 24px 58px #00000085}.instructions-popover h1{letter-spacing:0;margin:0 0 7px;font-size:clamp(1.08rem,4.4vw,1.32rem);line-height:1.1}.instructions-popover p{color:var(--popover-copy);margin:0 0 8px;font-size:.86rem;line-height:1.34}.instructions-popover button{justify-content:center;width:100%;margin-top:4px}.soroban-canvas{background:var(--app-bg);cursor:grab;touch-action:none;border:0;place-self:center;min-width:300px;max-width:none;min-height:620px}.soroban-canvas:active{cursor:grabbing}.soroban-board{--column-w:clamp(74px, 5.55vw, 82px);--bead-w:clamp(46px, 5.5vw, 66px);--bead-h:clamp(33px, 4vw, 44px);--slot-gap:clamp(31px, 3.8vw, 42px);--upper-h:calc(var(--slot-gap) * 2 + 12px);--lower-h:calc(var(--slot-gap) * 7 + 10px);--beam-h:clamp(18px, 2.4vw, 26px);--rod-w:4px;--frame-w:clamp(15px, 2vw, 24px);--inner-pad:clamp(12px, 2vw, 22px);grid-template-columns:repeat(var(--columns), var(--column-w));width:max-content;max-width:none;min-height:calc(var(--upper-h) + var(--beam-h) + var(--lower-h));padding:calc(var(--frame-w) + var(--inner-pad));touch-action:none;transform-origin:bottom;transform-style:preserve-3d;background:0 0;border:0;border-radius:10px;place-self:center;margin:0 auto;display:grid;position:relative;overflow:auto hidden;transform:rotateX(11deg)rotate(-.8deg);box-shadow:inset 0 2px #ffe5ad33,inset 0 -4px #2d180c6b,inset 3px 0 #ffe5ad14,inset -3px 0 #00000040,0 6px #3f2415,0 28px 50px #0000006b}.soroban-board:before{z-index:0;content:"";pointer-events:none;background:0 0;border-radius:12px;position:absolute;inset:0;transform:translateZ(-10px);box-shadow:inset 0 0 0 1px #ffe4ac1a,0 5px #3b2112,0 26px 46px #00000070}.frame-piece{z-index:5;background:radial-gradient(circle at var(--board-light-x) var(--board-light-y), #ffe5b047, transparent 34%), linear-gradient(180deg, #ffde9e24, #210f0747), url(/soroban-game/textures/walnut.png), #6f3f1d;background-blend-mode:screen, multiply, normal, normal;pointer-events:none;background-repeat:no-repeat;background-size:auto,auto,100% 100%,auto;position:absolute;box-shadow:inset 0 2px #ffe2ab24,inset 0 -4px #0000004d}.frame-top{height:var(--frame-w);clip-path:polygon(0 0, 100% 0, calc(100% - var(--frame-w)) 100%, var(--frame-w) 100%);top:0;left:0;right:0}.frame-bottom{height:var(--frame-w);clip-path:polygon(var(--frame-w) 0, calc(100% - var(--frame-w)) 0, 100% 100%, 0 100%);bottom:0;left:0;right:0}.frame-left{width:var(--frame-w);clip-path:polygon(0 0, 100% var(--frame-w), 100% calc(100% - var(--frame-w)), 0 100%);top:0;bottom:0;left:0}.frame-right{width:var(--frame-w);clip-path:polygon(0 var(--frame-w), 100% 0, 100% 100%, 0 calc(100% - var(--frame-w)));top:0;bottom:0;right:0}.rod-column{z-index:3;min-width:var(--bead-w);grid-template-rows:var(--upper-h) var(--beam-h) var(--lower-h);justify-items:center;display:grid;position:relative}.rod{z-index:1;top:calc((var(--frame-w) + var(--inner-pad)) * -.78);bottom:calc((var(--frame-w) + var(--inner-pad)) * -.78);left:calc(50% - var(--rod-w) / 2);width:var(--rod-w);background:linear-gradient(90deg,#ffffff57,#0000 42%),#aeb7b1;border-radius:999px;position:absolute;box-shadow:inset -1px 0 #00000047,1px 0 2px #0000003d}.upper-area,.lower-area{width:100%;position:relative}.beam-marker{width:100%;height:var(--beam-h)}.reckoning-bar{top:calc(var(--frame-w) + var(--inner-pad) + var(--upper-h));right:calc(var(--frame-w) + var(--inner-pad));left:calc(var(--frame-w) + var(--inner-pad));z-index:4;height:var(--beam-h);grid-template-columns:repeat(var(--columns), var(--column-w));background:radial-gradient(circle at var(--board-light-x) var(--board-light-y), #ffe2a52e, transparent 38%), linear-gradient(180deg, #ffe19d2e, transparent 34%, #0000003d), url(/soroban-game/textures/walnut.png), #5d3318;background-repeat:no-repeat;background-size:auto,auto,100% 100%,auto;place-items:center;display:grid;position:absolute;box-shadow:inset 0 2px #ffe6ab33,inset 0 -3px #00000061,0 3px 5px #00000047}.reckoning-bar:before{inset:0 calc(var(--inner-pad) * -1);z-index:-1;background:inherit;box-shadow:inherit;content:"";background-repeat:no-repeat;position:absolute}.place-dot{background:radial-gradient(circle at calc(var(--board-light-x) - 8%) calc(var(--board-light-y) - 8%), #ffffe7e6, transparent 24%), radial-gradient(circle at 68% 70%, #532f088c, transparent 42%), url(/soroban-game/textures/brass.png), linear-gradient(180deg, #ffe28a, #b97618);background-blend-mode:screen, multiply, soft-light, normal;background-size:auto,auto,80px 80px,auto;border-radius:50%;width:9px;height:9px;position:relative;box-shadow:inset 0 1px 1px #fffad2cc,inset 0 -2px 2px #46280880,0 1px 2px #00000047}.bead{z-index:3;width:var(--bead-w);height:var(--bead-h);color:#0000;background:radial-gradient(ellipse at var(--bead-light-x) var(--bead-light-y), #ffebae6b, transparent 30%), linear-gradient(180deg, #ffe5a042, #1609031f 49%, #00000057 52%, #ffda8a14 100%), radial-gradient(ellipse at 50% 50%, #ffd48657, transparent 16%, #00000026 48%, #00000061 100%), url(/soroban-game/textures/walnut.png), linear-gradient(180deg, #b87538, #74401d 62%, #4c2512);background-blend-mode:screen, multiply, multiply, soft-light, normal;cursor:grab;touch-action:none;background-size:auto,auto,auto,100% 100%,auto;border:1px solid #1e120aad;border-radius:8px;padding:0;transition:top .13s cubic-bezier(.2,.7,.16,1),transform .13s cubic-bezier(.2,.7,.16,1),background .1s;position:absolute;left:50%;transform:translate(-50%);box-shadow:inset 0 5px 8px #fff5cc3d,inset 7px 0 9px #ffe5a117,inset -8px 0 10px #0000003d,inset 0 -7px 9px #00000047,0 5px 8px #00000052;-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M60 2 C67 2 109 33 117 48 C109 63 67 94 60 94 C53 94 11 63 3 48 C11 33 53 2 60 2 Z'/%3E%3C/svg%3E") 50%/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M60 2 C67 2 109 33 117 48 C109 63 67 94 60 94 C53 94 11 63 3 48 C11 33 53 2 60 2 Z'/%3E%3C/svg%3E") 50%/100% 100% no-repeat}.bead:before{border-radius:inherit;background:radial-gradient(ellipse at var(--bead-light-x) var(--bead-light-y), #ffeebe75, #ffeebe29 20%, transparent 38%), radial-gradient(ellipse at calc(var(--bead-light-x) + 34%) calc(var(--bead-light-y) + 46%), #0000003d, transparent 58%);content:"";mix-blend-mode:screen;opacity:.84;pointer-events:none;position:absolute;inset:0}.bead:after{border-radius:inherit;content:"";pointer-events:none;background:linear-gradient(#ffecb22e,#0000 43%,#ffe5a62e 49%,#00000057 52%,#0000 58%,#00000047),radial-gradient(#ffe6a238,#0000 18%,#00000024 44%,#0000 64%);position:absolute;inset:0}.bead:active{cursor:grabbing}.bead.is-grabbed,.bead.is-drag-preview{z-index:5}.bead.is-drag-preview{transition:none}.bead:focus-visible{outline-offset:2px;outline:3px solid #54c7b8}.bead.upper,.bead.lower{top:calc(2px + var(--slot) * var(--slot-gap))}.bead.is-active{background:radial-gradient(ellipse at var(--bead-light-x) var(--bead-light-y), #92ffe542, transparent 40%), linear-gradient(180deg, #6be8c529, #021a171f 49%, #00000052 52%, #71f1cf14 100%), radial-gradient(ellipse at 50% 50%, #6be8c529, transparent 18%, #021e1b4d 56%, #021e1b6b 100%), url(/soroban-game/textures/walnut.png), linear-gradient(180deg, #24947f, #0f5b50 62%, #07342f);background-blend-mode:screen, overlay, multiply, soft-light, normal;background-size:auto,auto,auto,100% 100%,auto}.bead.lower.is-place-bead{background:radial-gradient(ellipse at var(--bead-light-x) var(--bead-light-y), #c5d5d652, transparent 36%), linear-gradient(180deg, #c4d0d224, #0104051f 49%, #0000006b 52%, #707e8014 100%), radial-gradient(ellipse at 50% 50%, #5a686b38, transparent 18%, #0508096b 56%, #0000008a 100%), url(/soroban-game/textures/walnut.png), linear-gradient(180deg, #252c2c, #0d1112 62%, #020303);background-blend-mode:screen, overlay, multiply, soft-light, normal;background-size:auto,auto,auto,100% 100%,auto}.bead.lower.is-place-bead.is-active{background:radial-gradient(ellipse at var(--bead-light-x) var(--bead-light-y), #d2e1e157, transparent 36%), linear-gradient(180deg, #becdce29, #0104051f 49%, #0000006b 52%, #69767814 100%), radial-gradient(ellipse at 50% 50%, #55656638, transparent 18%, #05080970 56%, #0000008f 100%), url(/soroban-game/textures/walnut.png), linear-gradient(180deg, #202829, #0a0e0f 62%, #010202);background-blend-mode:screen, overlay, multiply, luminosity, normal;background-size:auto,auto,auto,100% 100%,auto}.settings-panel{z-index:30;border:1px solid var(--panel-border);width:min(520px,100%);max-height:calc(100svh - 20px);color:var(--app-fg);background:var(--panel-bg);border-radius:8px;margin:0 auto;padding:10px;position:fixed;bottom:10px;left:10px;right:10px;overflow:auto;box-shadow:0 18px 44px #00000085}.settings-panel header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;display:flex}.settings-panel h1{letter-spacing:0;margin:0;font-size:clamp(1.12rem,4vw,1.45rem);line-height:1.15}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px;display:grid}.settings-field-mode,.settings-field-seed{grid-column:1/-1}.settings-actions{margin-bottom:8px}.actions{flex-wrap:wrap;gap:8px;display:flex}.segmented-control{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:5px;display:grid}.segmented-control button{color:var(--control-fg);background:var(--control-bg);box-shadow:inset 0 0 0 1px var(--control-border);justify-content:center}.segmented-control button.is-selected{color:var(--selected-fg);background:var(--selected-bg);box-shadow:none}button,.button-link{min-height:34px;color:var(--button-fg);background:var(--button-bg);cursor:pointer;border:0;border-radius:8px;align-items:center;padding:0 14px;font-weight:800;text-decoration:none;display:inline-flex}button:hover,.button-link:hover{background:var(--button-bg-hover)}button:disabled{color:var(--disabled-fg);background:var(--disabled-bg);cursor:not-allowed}.column-controls{grid-template-columns:repeat(auto-fit,minmax(32px,1fr));gap:6px;display:grid}.column-value{border:1px solid var(--panel-border);min-width:0;min-height:30px;color:var(--selected-fg);background:var(--selected-bg);border-radius:6px;place-items:center;font-weight:800;display:grid}@media (width<=640px){.app-shell{grid-template-rows:minmax(0,1fr)}.status-strip{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.status-strip>div{min-height:50px;padding:7px 8px}.game-board-shell{width:100%}.number-board-overlay{width:min(80%,280px);top:-18px}.soroban-board{--column-w:64px;--bead-w:44px;--bead-h:34px;--slot-gap:32px;transform:rotateX(8deg)}.settings-panel header{display:block}.settings-panel h1{margin-bottom:8px}.settings-grid{grid-template-columns:minmax(0,1fr)}.actions{width:100%}.actions button,.actions .button-link{flex:1;justify-content:center}}