:root{color-scheme:dark;--bg: #0d1310;--screen-top: #1b2620;--screen-bottom: #141c18;--screen-border: rgba(255, 255, 255, .07);--board-bg: rgba(0, 0, 0, .2);--board-border: rgba(255, 255, 255, .045);--stick: #ecd7a4;--stick-shadow: rgba(0, 0, 0, .38);--head: #b9553c;--head-hi: #d0805e;--held: #f3bc63;--held-head: #d9713f;--ghost: rgba(236, 215, 164, .15);--ghost-legal: rgba(230, 179, 78, .72);--op: #63725f;--text: #e7e1d4;--muted: #8b9b8e;--faint: #7f8f82;--rule: #6f7f72;--primary: #e6b34e;--primary-text: #241a08;--success: #a9dcb6}*{box-sizing:border-box}html,body{margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{min-height:100vh;background:radial-gradient(1200px 620px at 50% -12%,#17221d 0%,var(--bg) 58%);color:var(--text);-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased}.app{max-width:900px;margin:24px auto;width:calc(100% - 32px);padding:30px 34px 26px;background:linear-gradient(180deg,var(--screen-top),var(--screen-bottom));border:1px solid var(--screen-border);border-radius:20px;display:flex;flex-direction:column;gap:24px}.head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.title{margin:0;font-size:1.1rem;font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:8px}.sub{margin:6px 0 0;font-size:.74rem;color:var(--muted)}.level{display:flex;align-items:center;gap:2px;background:#ffffff0b;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:3px;flex:none}.chev{appearance:none;border:0;background:transparent;color:#7d8d80;font:inherit;font-size:.95rem;line-height:1;padding:6px 9px;border-radius:999px;cursor:pointer}.chev:hover:not(:disabled){color:var(--text);background:#ffffff0f}.chev:disabled{opacity:.25;cursor:default}.cur{background:var(--primary);color:var(--primary-text);font-size:.76rem;font-weight:600;border-radius:999px;padding:5px 14px;white-space:nowrap}.board{background:var(--board-bg);border:1px solid var(--board-border);border-radius:16px;padding:26px 18px;touch-action:manipulation}.board svg{width:100%;height:auto;display:block;overflow:visible}.board svg .st,.board svg .sh,.board svg .hd,.board svg .hd2,.board svg .slot,.board svg .op,.board svg .held,.board svg .heldhd,.board svg .cell-hint{pointer-events:none}.sh{fill:none;stroke:var(--stick-shadow);stroke-width:10;stroke-linecap:round;transform:translateY(2px)}.st{fill:none;stroke:var(--stick);stroke-width:9;stroke-linecap:round;transition:opacity .2s ease}.st.hint{stroke:#ffc463;filter:drop-shadow(0 0 6px rgba(255,180,70,.85));animation:breathe 1.2s ease-in-out infinite}.hd{fill:var(--head);transition:opacity .2s ease}.hd2{fill:var(--head-hi);transition:opacity .2s ease}.held{fill:none;stroke:var(--held);stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}.heldhd{fill:var(--held-head)}.op{fill:none;stroke:var(--op);stroke-width:8;stroke-linecap:round}.slot{fill:none;stroke:var(--ghost);stroke-width:6;stroke-linecap:round;stroke-dasharray:2 8}.slot.origin{stroke:#ecd7a41a}.slot.legal{stroke:var(--ghost-legal);stroke-width:8;stroke-dasharray:4 6;animation:breathe 1.4s ease-in-out infinite}.hit{fill:none;stroke:transparent;stroke-width:26;stroke-linecap:round;pointer-events:stroke;cursor:pointer}.cell-hint{fill:#e6b34e12;stroke:#e6b34e8c;stroke-width:2;stroke-dasharray:6 8;animation:breathe 1.6s ease-in-out infinite}.win .st{stroke:#b9dfc0}.win .hd{fill:#7fae8c}.win .hd2{fill:#a9cdb1}.win .sh{stroke:#78c89638}.board.shake{animation:shake .32s ease-in-out}.note{text-align:center;font-size:.72rem;color:var(--faint);margin:-8px 0 0}.status{text-align:center;font-size:.86rem;color:#d6cfbd;min-height:1.4em;margin:-6px 0 0}.status.ok{color:var(--success)}.status.bad{color:#e8a08a}.controls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.btn{font:inherit;font-size:.8rem;padding:9px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.13);color:#c9c2b2;background:transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.btn:hover:not(:disabled){border-color:#ffffff42;color:var(--text)}.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-text);font-weight:600}.btn.primary:hover:not(:disabled){background:#f0c063;border-color:#f0c063;color:var(--primary-text)}.btn:disabled{opacity:.45;cursor:default}.rule{text-align:center;font-size:.7rem;color:var(--rule);margin:-8px 0 0}.foot{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:-4px}.link{appearance:none;border:0;background:transparent;font:inherit;font-size:.72rem;color:var(--faint);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#7f8f8266;cursor:pointer;padding:2px}.link:hover{color:var(--muted)}.total{font-size:.72rem;color:var(--faint);opacity:.85;white-space:nowrap}.rules{display:grid;gap:8px;margin-top:-8px;padding:14px 16px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:#00000029;font-size:.76rem;color:var(--muted);line-height:1.5}.rules b{color:#d6cfbd;font-weight:600}.rules[hidden]{display:none}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}@keyframes breathe{0%,to{opacity:1}50%{opacity:.45}}@media (max-width: 640px){.app{margin:8px auto;width:calc(100% - 16px);padding:20px 14px 18px;border-radius:16px;gap:18px}.title{font-size:1rem}.board{padding:10px 2px}.btn{padding:9px 18px}.rule{font-size:.64rem}.note{font-size:.68rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.board.shake{animation:none}}
