:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#101114;--panel:#171a20;--panel-2:#1e222b;--text:#e6e8ee;--muted:#9aa3b2;--line:#343a46;--cell:#20252f;--cell-hover:#2d3441;--tile:#d7dde8;--tile-ink:#171a20;--accent:#6ee7b7;--danger:#ff5370;--shadow:0 18px 50px #00000059;background:var(--bg);color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{touch-action:manipulation;background:radial-gradient(circle at 30% -20%, #6ee7b71f, transparent 38rem), linear-gradient(180deg, #11141a 0%, var(--bg) 34rem);min-width:320px;min-height:100svh;margin:0}button,input,select,textarea{font:inherit}button{border:1px solid var(--line);color:var(--text);background:var(--panel-2);cursor:pointer;border-radius:7px;min-height:38px}button:hover{border-color:#596274}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}h1,h2,p{margin:0}h1{font-size:32px;font-weight:760;line-height:1}h2{color:var(--text);font-size:14px;font-weight:720}label{color:var(--muted);gap:7px;font-size:13px;display:grid}input,select,textarea{border:1px solid var(--line);width:100%;color:var(--text);background:#11141a;border-radius:7px;font-size:16px}input,select{min-height:36px;padding:0 10px}textarea{resize:vertical;min-height:132px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.45}.screen{min-height:100svh;padding:36px}.home-screen{align-content:center;justify-items:center;gap:34px;display:grid}.home-screen h1{font-size:54px}.home-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;width:min(760px,100%);display:grid}.home-action{min-height:180px;font-size:28px;font-weight:820}.level-screen{align-content:start;gap:26px;display:grid}.screen-head{align-items:center;gap:18px;display:flex}.screen-head>button{padding:0 14px}.level-list{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;display:grid}.level-card{text-align:left;align-content:start;justify-items:start;gap:8px;min-height:160px;padding:16px;display:grid}.import-level-card{background:#141b1b;border-color:#6ee7b7b8}.level-title{width:100%;color:var(--text);justify-content:space-between;align-items:center;gap:10px;font-size:19px;font-weight:820;display:flex}.level-check{color:#0f1411;background:var(--accent);border-radius:999px;flex:none;place-items:center;width:26px;height:26px;font-size:16px;display:inline-grid}.level-meta,.empty-badges{color:var(--muted);font-size:13px}.empty-levels{color:var(--muted)}.level-badges{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.mini-rule-badge{min-width:28px;height:26px;color:var(--text);border:2px solid var(--accent);background:#12151b;border-radius:999px;place-items:center;padding:0 7px;font-size:11px;font-weight:850;display:inline-grid}.mini-rule-badge svg{width:20px;height:20px}.mini-badge-arrow{stroke:var(--text);stroke-width:2px;stroke-linecap:round}.mini-rule-badge.domino{border-radius:6px}.shell{grid-template-columns:300px minmax(0,1fr);min-height:100svh;display:grid}.shell.play-shell{grid-template-columns:1fr}.shell.play-shell .panel,.shell.play-shell .editor-toggle{display:none}.shell.play-shell .workspace{padding-top:64px}.play-nav{z-index:35;pointer-events:none;grid-template-columns:minmax(88px,1fr) minmax(0,auto) minmax(88px,1fr);align-items:start;gap:12px;display:grid;position:fixed;top:14px;left:14px;right:14px}.play-nav button{pointer-events:all;box-shadow:var(--shadow);padding:0 14px}.play-nav #play-back{justify-self:start}.play-nav #next-puzzle{justify-self:end}.play-title{text-align:center;pointer-events:none;min-width:0;max-width:min(560px,46vw);padding:4px 12px 7px}.play-title h1{overflow-wrap:anywhere;text-shadow:0 2px 12px #000000b8;font-size:24px;line-height:1.12}.editor-toggle,.mobile-editor-bar{display:none}.panel{border-right:1px solid var(--line);background:#171a20f5;flex-direction:column;gap:24px;height:100svh;padding:24px;display:flex;position:sticky;top:0;overflow:auto}.editor-head{gap:16px;display:grid;position:relative}.editor-head button{justify-self:start;padding:0 14px}.editor-close{display:none}.eyebrow{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px;font-size:12px;font-weight:800}.control-group{gap:12px;display:grid}.number-stepper{grid-template-columns:minmax(0,1fr) 36px 36px;gap:6px;display:grid}.number-stepper button{min-height:36px;padding:0;font-size:15px;font-weight:850;line-height:1}.segmented{border:1px solid var(--line);background:#11141a;border-radius:8px;grid-template-columns:repeat(3,1fr);padding:3px;display:grid}.segmented button{min-height:34px;color:var(--muted);background:0 0;border:0;border-radius:5px}.segmented button.active{color:var(--text);background:#28313d}.shift-grid{grid-template-columns:repeat(3,1fr);gap:7px;display:grid}.primary{background:var(--accent);color:#062018;border-color:#0000;font-weight:780}.status{min-height:58px;color:var(--muted);border:1px solid var(--line);background:#11141a;border-radius:8px;margin-top:auto;padding:12px;font-size:13px;line-height:1.35}.workspace{align-content:start;gap:12px;min-width:0;padding:28px;display:grid}.puzzle-description{max-width:min(760px,100%);color:var(--muted);text-align:center;justify-self:center;font-size:14px;line-height:1.45}.board-wrap{border-bottom:1px solid var(--line);place-items:center;min-height:520px;padding-bottom:12px;display:grid;position:relative;overflow:auto}#board{touch-action:none;width:100%;height:auto}#board *{touch-action:none}#board.domino-mode .regions,#board.domino-mode .region-badges{pointer-events:none}.hole-cell{fill:#0000;stroke:#0000;stroke-width:2px;pointer-events:none}#board.hole-mode .hole-cell{fill:#0000;stroke:#6ee7b747;stroke-dasharray:5 6;pointer-events:all;cursor:pointer}.cell{fill:var(--cell);stroke:#3d4654;stroke-width:2px;cursor:pointer;transition:fill .14s,stroke .14s}.cell:hover,.cell.drawing{fill:var(--cell-hover);stroke:var(--accent)}#board.solution-complete .cell{stroke:#34d399;stroke-width:3px;filter:drop-shadow(0 0 7px #34d3998c)}.region-fill{opacity:.24;pointer-events:none}.region-edge{stroke-width:4px;stroke-dasharray:3 7;stroke-linecap:round;pointer-events:none}.region-badge{cursor:pointer}.region-badge circle,.region-badge rect{fill:#12151b;stroke:currentColor;stroke-width:2px;filter:drop-shadow(0 6px 10px #00000052)}.region-badge.invalid circle,.region-badge.invalid rect{fill:var(--danger);stroke:#ff9aad}.region-badge text{fill:var(--text);text-anchor:middle;pointer-events:none;font-size:11px;font-weight:850}.region-badge .badge-arrow{stroke:var(--text);stroke-width:2px;stroke-linecap:round;pointer-events:none}.region-badge.invalid text{fill:#fff}.region-badge.invalid .badge-arrow{stroke:#fff}.domino-half{fill:var(--tile);stroke:#f7f9fca6;stroke-width:1px;cursor:pointer;transition:transform .18s,opacity .16s}.domino-bridge{stroke:var(--tile);stroke-width:30px;stroke-linecap:round;pointer-events:none}.domino-hit-bridge{stroke:#0000;stroke-width:34px;stroke-linecap:round;cursor:pointer;pointer-events:stroke}.board-domino.hovering{opacity:.72}.pip,.bank-pip{fill:var(--tile-ink);pointer-events:none;transition:cx .18s,cy .18s,transform .18s}.drag-ghost{z-index:20;pointer-events:none;filter:drop-shadow(0 18px 24px #0000006b);will-change:transform;width:164px;height:152px;position:fixed;top:0;left:0}.drag-ghost svg{width:100%;height:100%;display:block;overflow:visible}.drag-ghost[hidden]{display:none}.bank-shell{gap:12px;display:grid}.bank-head{justify-content:space-between;align-items:center;gap:16px;display:flex}.bank-head span{color:var(--muted);font-size:13px}.bank-actions{flex-wrap:wrap;gap:10px;display:flex}.bank-actions button{padding:0 12px}.help-button{width:38px;min-width:38px;margin-left:auto;padding:0;font-weight:850}.bank{touch-action:manipulation;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;display:grid}.bank-domino{aspect-ratio:1.66;touch-action:none;background:#151922;border-radius:8px;min-height:0;padding:0;transition:opacity .16s,transform .16s,border-color .16s}.bank-domino svg{width:100%;height:100%;display:block;overflow:visible}.bank-tile{fill:var(--tile);stroke:#f7f9fc;stroke-width:1.5px}.bank-half,.pip-cluster{transition:transform .18s}.bank-domino.used{opacity:.33}.popover{z-index:10;background:var(--panel);border:1px solid var(--line);width:min(220px,100vw - 24px);max-height:calc(100svh - 24px);box-shadow:var(--shadow);border-radius:8px;gap:10px;padding:12px;display:grid;position:fixed;overflow:auto}.popover[hidden]{display:none}.toast{z-index:40;min-width:min(280px,100vw - 32px);color:var(--text);box-shadow:var(--shadow);text-align:center;background:#12151bf5;border:1px solid #e6e8ee29;border-radius:8px;padding:12px 16px;font-weight:780;position:fixed;bottom:22px;left:50%;transform:translate(-50%)}.toast[data-tone=complete]{color:#baf7dc;border-color:#34d399a6}.toast[data-tone=invalid]{color:#ffd4dc;border-color:#ff5370a6}.toast[hidden]{display:none}.modal{z-index:60;background:#06080cad;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.modal-panel{background:var(--panel);border:1px solid var(--line);width:min(680px,100%);max-height:min(760px,100svh - 36px);box-shadow:var(--shadow);border-radius:8px;padding:18px;overflow:auto}.modal-head{justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.modal-head h1{font-size:24px}.modal-head button{width:38px;min-width:38px;padding:0;font-size:22px;line-height:1}.modal-textarea{min-height:180px;margin-top:7px}.modal-actions{justify-content:end;gap:10px;margin-top:14px;display:flex}.modal-error{color:#ffd4dc;margin-top:10px;font-size:13px;line-height:1.4}.modal-actions button{padding:0 14px}.tutorial-rules{gap:10px;display:grid}.tutorial-rule{background:#12151b;border:1px solid #e6e8ee1a;border-radius:8px;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:12px;padding:10px;display:grid}.tutorial-rule .mini-rule-badge{justify-self:center}.tutorial-rule h2{text-transform:capitalize;margin-bottom:4px}.tutorial-rule p{color:var(--muted);font-size:13px;line-height:1.4}.rule-list{gap:10px;display:grid}.rule-row{grid-template-columns:minmax(0,1fr) 82px;align-items:end;gap:8px;display:grid}.rule-row+.rule-row{border-top:1px solid var(--line);padding-top:10px}.rule-row label:first-child{grid-column:1/-1}.rule-row button{color:#ffd4dc;background:#ff53701f;border-color:#ff537073;min-height:36px;padding:0 8px}.rule-row button:disabled{opacity:.45;cursor:default}#delete-region{color:#ffd4dc;background:#ff53701f;border-color:#ff537073}@media (width<=860px){.shell{grid-template-columns:1fr}.editor-toggle{background:var(--accent);color:#062018;height:36px;min-height:36px;box-shadow:var(--shadow);border-color:#0000;place-items:center;padding:0 13px;font-weight:780;display:inline-grid}.mobile-editor-bar{z-index:30;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:8px;display:grid;position:fixed;top:10px;left:10px;right:10px}.mobile-editor-bar.hidden-while-open{display:none}.mobile-mode-switcher{min-width:0;height:36px;box-shadow:var(--shadow)}.mobile-mode-switcher button{height:100%;min-height:0;padding:0 6px;font-size:12px}.editor-close{justify-content:center;align-items:center;width:34px;height:34px;min-height:34px;padding:0;font-size:22px;line-height:0;display:flex;position:absolute;top:0;right:0}.panel{z-index:25;width:min(300px,100vw - 32px);height:100svh;box-shadow:var(--shadow);border-bottom:0;border-right:0;transition:transform .18s;position:fixed;inset:0 auto 0 0;transform:translate(-100%)}.shell.editor-open .panel{transform:translate(0)}.workspace{gap:10px;padding:56px 12px 14px}.shell.play-shell .workspace{padding-top:60px}.play-nav{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;top:10px;left:10px;right:10px}.play-nav button{min-height:34px;padding:0 10px;font-size:13px}.play-title{max-width:none;padding:2px 4px}.play-title h1{font-size:17px;line-height:1.15}.puzzle-description{font-size:13px}.board-wrap{min-height:300px;padding-bottom:8px}.bank{grid-template-columns:repeat(var(--bank-columns,7), minmax(0, 1fr));gap:4px}.bank-domino{border-radius:6px}}
