:root,[data-theme=classic]{--font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;--bg: #f6f1e7;--surface: #fffdf8;--text: #2b2b2b;--muted: #7a746a;--border: #e3dccd;--accent: #7b5ea7;--accent-text: #ffffff;--cell-bg: #ebe3d3;--cell-inactive: #d9d1c0;--domino-bg: #ffffff;--domino-border: #2b2b2b;--pip: #2b2b2b;--wash-opacity: .4;--ok: #3a9d5d;--bad: #d64545;--region-0-fill: #f6c6d6;--region-0-stroke: #c2507a;--region-1-fill: #bfe3dd;--region-1-stroke: #2f8f80;--region-2-fill: #fbd8b0;--region-2-stroke: #c8742a;--region-3-fill: #d8cdf0;--region-3-stroke: #7357b5;--region-4-fill: #cfe6b8;--region-4-stroke: #5c9230;--region-5-fill: #bcd6f2;--region-5-stroke: #3a6fb0;--region-6-fill: #f4e6a6;--region-6-stroke: #a88a10;--region-7-fill: #e6c9b8;--region-7-stroke: #96583a}[data-theme=midnight]{--bg: #16181d;--surface: #1f232a;--text: #ece8e1;--muted: #9a958c;--border: #31363f;--accent: #b59cf0;--accent-text: #16181d;--cell-bg: #2b3038;--cell-inactive: #252930;--domino-bg: #f2efe8;--domino-border: #0d0e10;--pip: #16181d;--wash-opacity: .3;--ok: #5fcf88;--bad: #ff6b6b;--region-0-fill: #5a2f42;--region-0-stroke: #f08cb4;--region-1-fill: #234a45;--region-1-stroke: #6fd6c4;--region-2-fill: #5a3d1f;--region-2-stroke: #f5ac62;--region-3-fill: #3b3159;--region-3-stroke: #b59cf0;--region-4-fill: #344a24;--region-4-stroke: #9ed36b;--region-5-fill: #23395a;--region-5-stroke: #7fb2f0;--region-6-fill: #514718;--region-6-stroke: #ecd25c;--region-7-fill: #4d3326;--region-7-stroke: #d99a78}[data-theme=seaside]{--bg: #eaf3f6;--surface: #ffffff;--text: #1d3340;--muted: #5f7884;--border: #cfe0e7;--accent: #1f7a99;--accent-text: #ffffff;--cell-bg: #d8e7ec;--cell-inactive: #cddde3;--domino-bg: #fffef9;--domino-border: #1d3340;--pip: #1d3340;--wash-opacity: .4;--ok: #2c9a6a;--bad: #d2493f;--region-0-fill: #ffd3c9;--region-0-stroke: #d0573c;--region-1-fill: #b9ecea;--region-1-stroke: #1c918c;--region-2-fill: #ffe6a8;--region-2-stroke: #c49112;--region-3-fill: #cfd8ff;--region-3-stroke: #4b5fc4;--region-4-fill: #d2efc2;--region-4-stroke: #4b9a2c;--region-5-fill: #a9d8f0;--region-5-stroke: #1f7a99;--region-6-fill: #f6cbe8;--region-6-stroke: #b04a92;--region-7-fill: #e0d6c8;--region-7-stroke: #8a6d47}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}.app{max-width:1100px;margin:0 auto;padding:0 16px 48px}.top{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);margin-bottom:20px}.logo{display:flex;gap:10px;align-items:center;font-weight:800;font-size:1.15rem;color:var(--text);text-decoration:none}.theme-pick{display:flex;gap:8px;align-items:center}h1{font-size:2.2rem;margin:0 0 6px;letter-spacing:-.02em}h2{margin:0 0 8px}h3{margin:0 0 12px;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.muted{color:var(--muted)}.small{font-size:.85rem}.error{color:var(--bad)}.ok{color:var(--ok);font-weight:700}.warn{color:#c8742a;font-weight:700}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row.spread{justify-content:space-between}.row+.row,.row+p,label+.row,.check+.row{margin-top:10px}.btn{border:2px solid var(--text);background:var(--text);color:var(--bg);border-radius:999px;padding:7px 16px;font-weight:700;cursor:pointer;transition:transform .08s ease,opacity .15s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:disabled{opacity:.4;cursor:default}.btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}.btn.ghost:hover:not(:disabled){border-color:var(--text)}.btn.danger{color:var(--bad)}.btn.tool.on{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.btn.tool:not(.on){background:transparent;color:var(--text);border-color:var(--border)}input,select{background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:6px 10px}input[type=number]{width:72px}label{display:inline-flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted)}label.check,label.radio{flex-direction:row;align-items:flex-start;gap:8px;color:var(--text);margin-top:8px}label.radio span{display:block}.radio-list{display:flex;flex-direction:column}.panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px}.panel-stack{display:flex;flex-direction:column;gap:14px}.pill{margin-left:8px;font-size:.72rem;padding:2px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;font-weight:800;background:var(--cell-bg)}.pill.easy{background:var(--region-4-fill);color:var(--region-4-stroke)}.pill.medium{background:var(--region-2-fill);color:var(--region-2-stroke)}.pill.hard{background:var(--region-0-fill);color:var(--region-0-stroke)}.pill.expert{background:var(--region-3-stroke);color:var(--surface)}.pill.rachel{background:var(--text);color:var(--bg)}.hero{text-align:center;padding:18px 0 28px}.quick{display:grid;grid-template-columns:repeat(5,minmax(0,160px));gap:14px;justify-content:center;margin-top:22px}.quick-card{border:2px solid var(--border);border-radius:18px;padding:22px 12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:center;transition:transform .1s ease}.quick-card:hover:not(:disabled){transform:translateY(-2px)}.quick-card.easy{background:var(--region-4-fill);border-color:var(--region-4-stroke)}.quick-card.medium{background:var(--region-2-fill);border-color:var(--region-2-stroke)}.quick-card.hard{background:var(--region-0-fill);border-color:var(--region-0-stroke)}.quick-card.expert{background:var(--region-3-fill);border-color:var(--region-3-stroke)}.quick-card.rachel{background:var(--text);border-color:var(--text);color:var(--bg)}.quick-card.rachel .muted{color:var(--bg)}.quick-card .muted{color:var(--text);opacity:.7}.quick-label{font-weight:800;font-size:1.3rem;text-transform:capitalize}.library{list-style:none;padding:0;margin:0}.library li{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--border)}.board{display:block;width:100%;height:auto;touch-action:none;-webkit-user-select:none;user-select:none;overflow:visible}.board-wrap{max-width:min(560px,100%);margin:0 auto}.cell-inactive{fill:none;stroke:var(--cell-inactive);stroke-width:3;stroke-dasharray:6 8}.cell-highlight{fill:var(--bad);opacity:.22;pointer-events:none}.play-bar{display:flex;align-items:center;gap:12px;justify-content:space-between}.play-title{display:flex;align-items:center;flex:1;justify-content:center;font-size:1.1rem}.timer{font-variant-numeric:tabular-nums;font-weight:700;min-width:56px;text-align:right}.play-actions{display:flex;gap:8px;justify-content:center;margin:12px 0 8px;flex-wrap:wrap}.play-area{display:flex;flex-direction:column;align-items:center;gap:18px}.play-area .board-wrap{width:100%}.tray{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:640px;padding:12px;border-radius:18px;background:var(--surface);border:1px solid var(--border)}.tray-slot{width:84px;height:84px;display:grid;place-items:center}.tray-domino{cursor:grab;touch-action:none;transition:transform .12s ease}.tray-domino:hover{transform:scale(1.05)}.tray-domino.h svg{width:80px;height:40px;display:block}.tray-domino.v svg{width:40px;height:80px;display:block}.hint{text-align:center;color:var(--muted);font-size:.85rem;margin:6px 0 0}.drag-ghost{position:fixed;pointer-events:none;z-index:50;filter:drop-shadow(0 8px 12px rgb(0 0 0 / .25))}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:700;z-index:60}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:grid;place-items:center;z-index:70;padding:16px}.modal{background:var(--surface);border-radius:22px;padding:28px;text-align:center;max-width:360px;width:100%;animation:pop .25s ease}.modal .row{justify-content:center}@keyframes pop{0%{transform:scale(.9);opacity:0}}.title-input{flex:1;max-width:360px;font-weight:700;font-size:1.05rem;text-align:center}.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;margin-top:16px;align-items:start}.tools{display:flex;gap:8px;justify-content:center;margin-bottom:10px;flex-wrap:wrap}.editor-board .board{cursor:crosshair}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{border:2px solid;border-radius:999px;padding:3px 12px;font-weight:800;cursor:pointer;color:#222}.chip.on{outline:3px solid var(--text);outline-offset:1px}.chip.new{background:transparent;border:2px dashed var(--border);color:var(--text)}.region-editor{margin-top:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}.seg{display:inline-flex;border:1.5px solid var(--border);border-radius:12px;overflow:hidden}.seg button{background:transparent;border:0;padding:6px 13px;font-weight:800;cursor:pointer;border-right:1px solid var(--border)}.seg button:last-child{border-right:0}.seg button.on{background:var(--accent);color:var(--accent-text)}.swatches{display:flex;gap:6px}.swatch{width:24px;height:24px;border-radius:50%;border:2px solid;cursor:pointer;padding:0}.swatch.on{outline:2px solid var(--text);outline-offset:2px}.mini-tray{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}.mini-domino{font-family:ui-monospace,monospace;font-size:.8rem;background:var(--domino-bg);color:var(--pip);border:1.5px solid var(--domino-border);border-radius:6px;padding:1px 6px}.spinner{width:16px;height:16px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 860px){.editor-grid{grid-template-columns:minmax(0,1fr)}.quick{grid-template-columns:repeat(3,minmax(0,180px))}}@media (max-width: 520px){.quick{grid-template-columns:repeat(2,minmax(0,1fr))}.tray-slot{width:64px;height:64px}.tray-domino.h svg{width:60px;height:30px}.tray-domino.v svg{width:30px;height:60px}h1{font-size:1.7rem}}.extras{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}.extras summary{cursor:pointer;font-weight:700}.extras-toggle{justify-content:center;margin-top:16px}.seg{flex-wrap:wrap}.legend{max-width:640px;width:100%;font-size:.9rem}.legend summary{cursor:pointer;font-weight:700;text-align:center;color:var(--muted)}.legend ul{margin:8px 0 0;padding-left:20px;line-height:1.6}.snapshots{width:100%;max-width:640px}.snapshots h4{margin:0 0 8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center}.snapshot-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.snapshot{width:128px;display:flex;flex-direction:column;gap:4px}.snapshot-board{padding:4px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;transition:border-color .15s,transform .1s}.snapshot-board:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}.snapshot-board:disabled{cursor:default;opacity:.6}.snapshot-board .board{pointer-events:none}.snapshot-meta{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--muted)}.snapshot-delete{border:0;background:none;color:var(--muted);font-size:1rem;line-height:1;cursor:pointer;padding:0 4px}.snapshot-delete:hover{color:var(--bad)}.center{justify-content:center;text-align:center}.duel-entry{margin-top:18px}.duel-start{max-width:520px;margin:0 auto}.duel-start .panel>*+*{margin-top:12px}.code-input{width:110px;text-transform:uppercase;letter-spacing:.2em;font-weight:800}.duel{display:flex;flex-direction:column;gap:14px}.duel-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.duel-title{font-weight:800}.duel-code{font-family:ui-monospace,monospace;letter-spacing:.15em;background:var(--cell-bg);border-radius:8px;padding:2px 8px}.duel-code.big{display:inline-block;font-size:2.4rem;padding:6px 18px;margin:4px 0 10px}.duel-score{font-weight:700;font-variant-numeric:tabular-nums}.duel-notice{margin:0;text-align:center;color:var(--muted)}.duel-lobby{display:flex;flex-direction:column;gap:16px;max-width:560px;width:100%;margin:0 auto}.duel-invite{text-align:center}.duel-link{font-size:.8rem;word-break:break-all;color:var(--muted)}.duel-players{display:grid;grid-template-columns:1fr 1fr;gap:12px}.duel-player{border:1px solid var(--border);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}.duel-countdown{font-size:7rem;font-weight:800;text-align:center;padding:60px 0;animation:pop .25s ease}.duel-opponent{display:flex;align-items:center;gap:10px;max-width:560px;width:100%;margin:0 auto;font-weight:700}.duel-progress{flex:1;height:10px;border-radius:999px;background:var(--cell-bg);overflow:hidden}.duel-progress>div{height:100%;background:var(--accent);transition:width .3s ease}.duel-result{position:fixed;inset:auto 0 24px 0;display:flex;justify-content:center;z-index:70;padding:0 16px;pointer-events:none}.duel-result .modal{pointer-events:auto;box-shadow:0 12px 40px #00000040}@media (max-width: 520px){.duel-players{grid-template-columns:1fr}}.duel-player .pill{align-self:flex-start;margin:0}.duel-reactions{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.duel-reactions button{width:42px;height:42px;font-size:1.35rem;line-height:1;cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:999px;transition:transform .1s ease}.duel-reactions button:hover{transform:translateY(-2px) scale(1.08)}.duel-reactions button:active{transform:scale(.92)}.reaction-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:80;overflow:hidden}.reaction{position:absolute;bottom:110px;font-size:2.8rem;line-height:1;display:flex;flex-direction:column;align-items:center;gap:4px;animation:float-up 2.6s ease-out forwards}.reaction span{font-size:.75rem;font-weight:800;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:1px 8px}.reaction.opp span{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}@keyframes float-up{0%{transform:translateY(24px) scale(.6);opacity:0}12%{transform:translateY(0) scale(1.15);opacity:1}70%{opacity:1}to{transform:translateY(-280px) scale(1);opacity:0}}@media (prefers-reduced-motion: reduce){.reaction{animation:fade-out 2.6s ease forwards}@keyframes fade-out{0%,70%{opacity:1}to{opacity:0}}}
