@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;900&family=Noto+Serif+SC:wght@700;900&display=swap');

:root{--ink:#f5ead8;--muted:#9da9aa;--gold:#e7b75d;--teal:#0f817d;--panel:rgba(9,22,29,.82);--line:rgba(222,186,116,.19)}
*{box-sizing:border-box}html{min-height:100%;background:#07121a}body{margin:0;min-height:100vh;color:var(--ink);font-family:"Noto Sans SC",sans-serif;background:linear-gradient(180deg,rgba(3,12,18,.36),#07121a 92%),url("assets/saloon-bg.png") center top/cover fixed no-repeat;overflow-x:hidden}
button{font:inherit;color:inherit}.grain{position:fixed;inset:0;pointer-events:none;opacity:.055;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.topbar{height:88px;padding:0 clamp(24px,5vw,84px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(4,12,17,.72),transparent)}
.brand{color:inherit;text-decoration:none;display:flex;gap:13px;align-items:center;font-family:"Noto Serif SC",serif;font-weight:900;font-size:21px;letter-spacing:.09em}.brand small{display:block;color:var(--gold);font:600 9px "Noto Sans SC";letter-spacing:.24em;margin-bottom:2px}.brand-mark{width:39px;height:45px;display:grid;place-items:center;color:#07161c;background:var(--gold);clip-path:polygon(50% 0,100% 42%,82% 100%,18% 100%,0 42%);font-size:22px}
.top-actions{display:flex;gap:10px}.top-actions button,.hint-button{background:rgba(10,25,32,.65);border:1px solid var(--line);border-radius:8px;cursor:pointer}.icon-button{width:42px;height:42px}.text-button{height:42px;padding:0 20px}
main{max-width:1500px;margin:auto;padding:44px clamp(22px,5vw,72px) 22px}.hero-copy{display:flex;align-items:flex-end;justify-content:space-between;max-width:1280px;margin:0 auto 34px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.28em;color:var(--gold);margin:0 0 12px}.hero-copy h1{font:900 clamp(38px,4.4vw,68px)/1.02 "Noto Serif SC",serif;letter-spacing:.02em;margin:0}.hero-copy h1 em{font-style:normal;color:var(--gold)}.intro{max-width:410px;color:#b9c2bf;font-size:14px;line-height:1.9;margin:0 0 7px}
.game-layout{display:grid;grid-template-columns:220px minmax(390px,650px) 235px;gap:24px;align-items:start;justify-content:center}.panel{background:linear-gradient(145deg,rgba(12,32,39,.94),rgba(7,20,27,.9));border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.04);border-radius:12px}.score-card{padding:24px}.label{font-size:12px;color:var(--muted);letter-spacing:.12em}.score{font:700 42px/1.3 "Noto Serif SC",serif;color:#fff}.score-change{height:20px;color:var(--gold);font-size:12px}.stat-row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:17px 0;padding:17px 0;gap:12px}.stat-row div+div{border-left:1px solid var(--line);padding-left:15px}.stat-row span,.stat-row strong{display:block}.stat-row span{font-size:10px;color:var(--muted);margin-bottom:5px}.stat-row strong{font:700 22px "Noto Serif SC";color:var(--gold)}.goal>div:first-child{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.progress{height:4px;background:#24343a;margin-top:9px;border-radius:9px;overflow:hidden}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--teal),#55c6b5);transition:.5s}.status-line{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:11px;color:#c5ceca}.status-line i{width:6px;height:6px;background:#50cab2;border-radius:50%;box-shadow:0 0 9px #50cab2}
.board-wrap{position:relative}.board-heading{height:45px;display:flex;justify-content:space-between;align-items:flex-start}.board-heading>div{display:flex;gap:13px;align-items:baseline}.board-heading span{font-size:11px;color:var(--gold);letter-spacing:.13em}.board-heading strong{font-size:10px;color:var(--muted);font-weight:500}.hint-button{padding:7px 12px;font-size:11px}.hint-button span{color:var(--gold)}
.board{--size:8;display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));grid-template-rows:repeat(var(--size),minmax(0,1fr));aspect-ratio:1;padding:10px;gap:7px;border:1px solid rgba(232,191,112,.33);border-radius:15px;background:radial-gradient(circle at 50% 40%,rgba(18,76,76,.58),rgba(5,23,29,.95));box-shadow:0 25px 65px rgba(0,0,0,.43),inset 0 0 50px rgba(0,0,0,.35);touch-action:none;overflow:hidden}.cell{position:relative;display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;border:0;background:rgba(0,0,0,.16);border-radius:11px;cursor:pointer;padding:0;transition:transform .18s,opacity .22s,filter .22s}.cell::after{content:"";position:absolute;inset:2px;border-radius:9px;border:1px solid rgba(255,255,255,.13);pointer-events:none}.cell:hover{transform:translateY(-2px);filter:brightness(1.12)}.cell.selected{outline:2px solid #ffe29a;outline-offset:2px;z-index:2;transform:scale(1.04)}.cell.empty{visibility:hidden}.gem{width:69%;aspect-ratio:1;display:grid;place-items:center;position:relative;flex:none;filter:drop-shadow(0 5px 5px rgba(0,0,0,.36));transition:.2s}.gem::before{content:"";position:absolute;inset:0;background:var(--c);clip-path:polygon(50% 0,91% 25%,100% 65%,69% 100%,29% 100%,0 64%,9% 24%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.13)}.gem::after{content:"";position:absolute;width:38%;height:23%;top:14%;left:24%;background:rgba(255,255,255,.3);clip-path:polygon(0 0,100% 20%,65% 100%,10% 80%)}.gem span{position:relative;z-index:2;color:white;font-size:clamp(11px,2vw,21px);text-shadow:0 2px 3px #000;font-weight:900}.cell.removing{animation:remove .38s forwards}.cell.hint{animation:hint 1s ease 2}.cell.invalid{animation:shake .35s}.combo-pop{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);pointer-events:none;font:900 44px "Noto Serif SC";color:#ffe6a7;text-shadow:0 3px 0 #8e3d28,0 8px 24px #000;opacity:0;z-index:5}.combo-pop.show{animation:combo .8s}
.side-stack{display:grid;gap:14px}.hand-card,.powers-card{padding:18px}.panel-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600}.panel-title b{font-size:9px;color:var(--muted);font-weight:500}.hand{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:16px 0}.hand-slot{aspect-ratio:.72;border:1px dashed rgba(232,191,112,.25);border-radius:6px;display:grid;place-items:center;color:#607176;font:700 13px serif;background:rgba(0,0,0,.12)}.hand-slot.filled{border-style:solid;background:var(--c);color:white;box-shadow:inset 0 0 14px rgba(255,255,255,.18)}.hand-name{padding-top:13px;border-top:1px solid var(--line)}.hand-name span,.hand-name small{display:block}.hand-name span{color:var(--gold);font:700 15px "Noto Serif SC"}.hand-name small{color:var(--muted);font-size:9px;margin-top:4px}.powers{display:grid;grid-template-columns:1fr;gap:7px;margin-top:15px}.powers div{display:flex;align-items:center;gap:9px;color:#b5bfbd;font-size:10px}.powers i{position:relative;font-style:normal;flex:0 0 29px;width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;color:var(--gold);font-weight:800}.powers i sup{position:absolute;right:2px;top:1px;color:#7f918f;font:600 7px sans-serif}.powers span,.powers strong,.powers small{display:block}.powers strong{color:#d7dedb;font-size:10px}.powers small{color:#7f908f;font-size:8px;margin-top:1px}.new-game,.dialog-start{border:0;border-radius:8px;background:linear-gradient(135deg,#dfab51,#f0c873);color:#172126;font-weight:800;cursor:pointer;padding:14px 18px;box-shadow:0 8px 22px rgba(190,123,44,.18)}.new-game{display:flex;justify-content:space-between}.new-game:hover,.dialog-start:hover{filter:brightness(1.1)}
.ranking-card{padding:18px}.ranking-card ol{list-style:none;padding:0;margin:13px 0 0;max-height:220px;overflow:auto}.ranking-card li{display:grid;grid-template-columns:22px 1fr auto;gap:7px;align-items:center;padding:7px 0;border-top:1px solid rgba(222,186,116,.1);font-size:10px}.ranking-card li span:first-child{color:var(--gold);font-family:serif}.ranking-card li strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.ranking-card li em{font-style:normal;color:#d5b36d}.ranking-card .ranking-empty{display:block;color:var(--muted);text-align:center}.live-dot{display:inline-block;width:5px;height:5px;margin-right:4px;border-radius:50%;background:#4dd5aa;box-shadow:0 0 7px #4dd5aa}.player-name{display:block;text-align:left;color:var(--muted);font-size:11px;margin:18px 0 10px}.player-name input{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid var(--line);border-radius:7px;background:#06141b;color:var(--ink);outline:none}.player-name input:focus{border-color:var(--gold)}.submit-score{width:100%;padding:12px;border:1px solid var(--gold);border-radius:8px;color:var(--gold);background:transparent;font-weight:700;cursor:pointer}.submit-score:disabled{opacity:.45;cursor:default}.result-dialog .dialog-start{margin-top:10px}
footer{max-width:1128px;margin:25px auto 0;display:flex;align-items:center;gap:14px;color:#778687;font-size:9px;letter-spacing:.08em}footer i{width:3px;height:3px;border-radius:50%;background:#788}.footer-note{margin-left:auto}
dialog{width:min(680px,calc(100% - 28px));border:1px solid rgba(232,191,112,.35);border-radius:16px;padding:34px;color:var(--ink);background:#091b23;box-shadow:0 35px 90px #000}dialog::backdrop{background:rgba(1,7,10,.8);backdrop-filter:blur(6px)}dialog h2{font:900 34px "Noto Serif SC";margin:0 0 25px}.dialog-close{position:absolute;right:18px;top:14px;background:transparent;border:0;font-size:28px;color:#839194;cursor:pointer}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:21px}.rules-grid article{display:flex;gap:13px}.rules-grid article>b{color:var(--gold);font:700 12px serif}.rules-grid h3{font-size:14px;margin:0 0 6px}.rules-grid p{font-size:11px;color:#9eacaa;line-height:1.7;margin:0}.dialog-start{margin-top:28px;width:100%}.result-dialog{text-align:center}.final-score{font:900 64px "Noto Serif SC";color:var(--gold)}.result-dialog>p:not(.eyebrow){color:#aeb9b7}
@keyframes remove{50%{transform:scale(1.18);filter:brightness(2)}100%{transform:scale(0);opacity:0}}@keyframes hint{50%{box-shadow:0 0 0 3px var(--gold);transform:scale(1.06)}}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}@keyframes combo{20%{opacity:1;transform:translate(-50%,-50%) scale(1.16)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(.9)}}
@media(max-width:1020px){.game-layout{grid-template-columns:minmax(380px,620px) 230px}.score-card{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px;align-items:center}.score-card .stat-row{margin:0}.score-card .status-line{display:none}.goal{padding-right:10px}}
@media(max-width:720px){.topbar{height:70px;padding:0 17px}.brand{font-size:16px}.brand-mark{width:31px;height:36px}.text-button{display:none}main{padding:28px 14px 18px}.hero-copy{display:block;margin-bottom:20px}.hero-copy h1{font-size:38px}.intro{font-size:12px;margin-top:14px}.game-layout{display:flex;flex-direction:column;gap:16px}.board-wrap{width:100%;order:1}.score-card{width:100%;order:0;grid-template-columns:1fr 1fr;padding:15px 18px}.score-card .goal{display:none}.score{font-size:31px}.stat-row{padding:10px 0;border-top:0}.side-stack{width:100%;order:2;grid-template-columns:1fr 1fr}.ranking-card,.new-game{grid-column:1/-1}.new-game{grid-column:1/-1}.board{gap:4px;padding:7px}.hand-card,.powers-card{padding:14px}.powers{gap:7px}.rules-grid{grid-template-columns:1fr}footer{display:none}dialog{padding:27px 22px}}

.left-stack{display:grid;gap:14px}
.resolution-flow{min-height:39px;margin:-5px 0 9px;padding:7px 10px;display:flex;align-items:flex-start;gap:10px;border-left:2px solid var(--gold);background:rgba(4,17,23,.72);font-size:9px}
.flow-label{flex:none;color:#839291!important;letter-spacing:.08em!important;padding-top:3px}
.resolution-flow>div{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.resolution-flow i{font-style:normal;color:#718082;padding-top:3px}
.flow-step{padding:3px 7px;border-radius:4px;background:rgba(231,183,93,.12);color:#e3c27f;animation:flowIn .3s}
.flow-step::after{content:"›";margin-left:8px;color:#647475}.flow-step:last-child::after{display:none}
.cell.triggering{z-index:4;animation:trigger 1s infinite}.cell.affected{animation:affected .55s}
@keyframes trigger{50%{box-shadow:0 0 0 4px #fff1aa,0 0 24px var(--gold);transform:scale(1.09)}}
@keyframes affected{40%{background:rgba(255,210,101,.48);filter:brightness(1.8)}}
@keyframes flowIn{from{opacity:0;transform:translateX(-7px)}}
@media(max-width:1020px) and (min-width:721px){.left-stack{grid-column:1/-1;grid-template-columns:1fr 240px}.left-stack .score-card{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px;align-items:center}.left-stack .score-card .stat-row{margin:0}}
@media(max-width:720px){.left-stack{width:100%;order:0;grid-template-columns:1fr}.left-stack .score-card{order:0}.left-stack .ranking-card{order:1}.resolution-flow{overflow-x:auto;flex-wrap:nowrap}.resolution-flow>div{flex-wrap:nowrap}.flow-step{white-space:nowrap}}

/* 特殊效果直接绘制在棋盘上；同一轮演出结束前不触发重力。 */
.cell[class*="effect-"]{z-index:4;visibility:visible!important;overflow:visible;opacity:1;box-shadow:0 0 0 4px #fff1aa,0 0 28px var(--gold);animation:effectPulse .46s}
.cell.effect-1::before,.cell.effect-3::before{content:"";position:absolute;z-index:5;left:-800%;width:1700%;height:5px;background:#ffe8a1;box-shadow:0 0 15px #e7b75d}
.cell.effect-2::before,.cell.effect-3::after{content:"";position:absolute;z-index:5;top:-800%;height:1700%;width:5px;background:#ffe8a1;box-shadow:0 0 15px #e7b75d}
.cell.effect-4::before,.cell.effect-5::before,.cell.effect-6::before{content:"";position:absolute;inset:-25%;z-index:5;border:3px solid #ffe8a1;border-radius:50%;box-shadow:0 0 25px #e7b75d;animation:effectRing .46s}
@keyframes effectPulse{50%{transform:scale(1.12);filter:brightness(2)}}@keyframes effectRing{to{inset:-160%;opacity:0}}

/* 日间模式 */
html[data-theme="light"]{background:#ead7b8}
html[data-theme="light"] body{--ink:#30271e;--muted:#766a5c;--gold:#9b611c;--teal:#187b76;--panel:rgba(255,248,231,.9);--line:rgba(104,69,34,.2);background:linear-gradient(180deg,rgba(255,235,193,.44),rgba(236,215,179,.9) 92%),url("assets/saloon-bg.png") center top/cover fixed no-repeat}
html[data-theme="light"] .grain{opacity:.025}
html[data-theme="light"] .topbar{background:linear-gradient(180deg,rgba(255,244,218,.82),rgba(255,244,218,.25));border-bottom-color:rgba(79,52,27,.14)}
html[data-theme="light"] .brand-mark{color:#fff4dc;background:#9b611c}
html[data-theme="light"] .top-actions button,html[data-theme="light"] .hint-button{background:rgba(255,249,235,.76);border-color:rgba(91,59,28,.22)}
html[data-theme="light"] .intro{color:#554c42}
html[data-theme="light"] .panel{background:linear-gradient(145deg,rgba(255,250,238,.95),rgba(239,225,198,.92));box-shadow:0 18px 45px rgba(75,48,20,.16),inset 0 1px rgba(255,255,255,.75)}
html[data-theme="light"] .score{color:#2d251e}
html[data-theme="light"] .stat-row{border-color:rgba(104,69,34,.18)}
html[data-theme="light"] .status-line,html[data-theme="light"] .powers div,html[data-theme="light"] .powers strong{color:#514a42}
html[data-theme="light"] .powers small{color:#857665}
html[data-theme="light"] .board{background:radial-gradient(circle at 50% 40%,rgba(40,125,116,.72),rgba(16,70,70,.95));border-color:rgba(115,72,24,.38);box-shadow:0 22px 55px rgba(68,43,19,.25),inset 0 0 45px rgba(5,39,42,.3)}
html[data-theme="light"] .board-heading strong,html[data-theme="light"] footer{color:#655b50}
html[data-theme="light"] dialog{color:#30271e;background:#f8edd8;box-shadow:0 35px 90px rgba(57,34,13,.4)}
html[data-theme="light"] dialog::backdrop{background:rgba(72,52,30,.52)}
html[data-theme="light"] .rules-grid p,html[data-theme="light"] .result-dialog>p:not(.eyebrow){color:#655b50}
html[data-theme="light"] .player-name input{background:#fffaf0;color:#30271e;border-color:rgba(104,69,34,.25)}