:root{color-scheme:dark;--ink:#f9f2de;--soft:#c2d5c8;--edge:#547a70;--gold:#ffd78b;--panel:#122b30;--leaf:#8ee0ba}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#071c24;color:var(--ink);font:16px/1.6 system-ui,"Noto Sans TC",sans-serif;overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffe59e;outline-offset:3px}a{color:#ffdc99}a:hover{color:white}[hidden]{display:none!important}.fx{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 20% 12%,#25655b77,transparent 36%),radial-gradient(ellipse at 82% 72%,#28436688,transparent 38%),repeating-linear-gradient(130deg,transparent 0 80px,#caeeb908 81px 83px,transparent 84px 160px);z-index:-1}.shell{max-width:1280px;margin:auto;padding:0 20px}.top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 0}.brand{font-weight:900;text-decoration:none;color:var(--gold);letter-spacing:.04em}.top-actions{display:flex;gap:8px;flex-wrap:wrap}.top button{background:#163b42;color:#fff1cf;border:1px solid #6ba595;border-radius:20px;padding:7px 12px}.intro{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:40px;align-items:center;min-height:min(760px,85vh)}.intro-art{min-height:490px;overflow:hidden;position:relative;border:1px solid #6a987a;border-radius:28px;background:radial-gradient(circle at 50% 28%,#347a75 0,#143d4c 35%,#101d36 70%,#0d1826 100%);box-shadow:0 25px 80px #0009,inset 0 0 80px #b1df8128}.intro-art:before,.intro-art:after{content:"✦";position:absolute;color:#ffe29c;top:14%;left:17%;font-size:32px;animation:twinkle 3s infinite alternate}.intro-art:after{top:24%;left:77%;font-size:22px;animation-delay:1.2s}.moon{position:absolute;left:50%;top:18%;width:180px;height:180px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff7d4,#edca82 60%,#a17e42);box-shadow:0 0 85px #ffe3a287}.art-row{position:absolute;inset:auto 2% 19%;display:flex;align-items:end;justify-content:center;gap:5px}.art-row span{display:grid;place-items:center;width:18%;height:115px;border:2px solid #d8c890;border-radius:60px 60px 22px 22px;background:linear-gradient(#547a72,#142c36);font-size:clamp(30px,4.8vw,64px);box-shadow:0 15px 26px #0009;animation:bob 2.5s ease-in-out infinite}.art-row span:nth-child(even){height:138px;animation-delay:.4s}.art-row span:nth-child(3){height:155px;animation-delay:.8s}.art-row small{font-size:12px;line-height:1;color:#fff5d4;font-weight:800;padding-bottom:8px}.art-gate{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:16px;background:linear-gradient(90deg,#4d3b32,#927042,#4d3b32);font-weight:900;letter-spacing:.16em;color:#fff5cb}.eyebrow{color:var(--gold);font-size:.84rem;font-weight:800;letter-spacing:.08em}.intro h1{font-size:clamp(3.3rem,7vw,6rem);line-height:1.12;margin:12px 0 25px;letter-spacing:.05em;text-shadow:0 7px 30px #000}.intro-copy>p:not(.eyebrow){font-size:1.14rem;color:#e8f4dc;max-width:540px}.intro-rules{display:grid;gap:10px;margin:22px 0 30px}.intro-rules span{padding:10px 14px;border-left:3px solid var(--gold);background:#16383a;border-radius:5px}.primary,.skill{border:0;border-radius:16px;padding:13px 25px;color:#1b2426;background:linear-gradient(135deg,#ffda88,#f6ac62);font-weight:900;box-shadow:0 5px 0 #8c5e41}.primary:hover,.skill:hover{filter:brightness(1.12);transform:translateY(-2px)}.alt{display:inline-block;margin-left:16px}.play{padding-bottom:24px}.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0}.hud>div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:11px 15px;background:#143039;border:1px solid #597d76;border-radius:13px}.hud strong{font-size:1.2rem;color:var(--gold)}meter{width:100%;height:14px;accent-color:#8fe4aa}.message{min-height:38px;color:#ffe6ad;font-weight:750;text-align:center}.battle{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,340px);gap:18px}.arena{position:relative;min-height:570px;border:2px solid #8ba97d;border-radius:22px;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#31706966,transparent 65%),repeating-linear-gradient(90deg,#14353a 0 calc(33.333% - 2px),#62877a calc(33.333% - 2px) 33.333%);box-shadow:inset 0 0 45px #00131d,0 18px 50px #0008}.arena:before{content:"";position:absolute;inset:10% 0 0;pointer-events:none;background:repeating-linear-gradient(0deg,#c8eebb08 0 1px,transparent 1px 34px)}.lane-names{position:absolute;top:10px;left:0;right:0;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;color:#e0f0d0;font-weight:800}.enemies{position:absolute;inset:45px 0 210px;pointer-events:none}.enemy{position:absolute;width:30%;max-width:160px;min-height:54px;text-align:center;border-radius:14px;border:2px solid #e7aa90;background:linear-gradient(#633a42,#392532);color:#fff4e8;box-shadow:0 5px 16px #0009;transform:translate(-50%,-50%);font-size:.8rem;font-weight:850;transition:top .12s linear}.enemy .icon{font-size:1.35rem;margin-right:4px}.enemy .bar{height:5px;background:#120d18;border-radius:5px;margin:2px 8px 5px;overflow:hidden}.enemy .bar i{display:block;height:100%;background:#ffcc8a}.enemy.boss{border-color:#ffdb7d;background:#6c3c3f;box-shadow:0 0 15px #ffa64799}.gate{position:absolute;bottom:205px;left:0;right:0;text-align:center;color:var(--gold);font-size:.8rem;font-weight:900;letter-spacing:.1em}.board{position:absolute;bottom:13px;left:10px;right:10px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,58px);gap:7px}.slot{border:1px dashed #9fc7b7;border-radius:12px;background:#0c252bbb;color:#fff;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;font-size:.74rem;line-height:1.1}.slot strong{font-size:1.25rem}.slot small{display:block;color:#f9e9bd}.slot.filled{border-style:solid;border-color:#e5d09d;background:linear-gradient(130deg,#306268,#17404c);box-shadow:0 4px 12px #0007}.slot.picked{outline:3px solid #ffde8b;outline-offset:-3px}.slot.front{box-shadow:inset 0 0 0 1px #f6cb62}.slot:active,.card:active{transform:scale(.96)}.command{border:1px solid #739986;border-radius:20px;background:#0f2930ee;padding:15px}.command h2{margin:0 0 3px;color:#ffe0a2}.hint{font-size:.82rem;margin:0 0 12px;color:#d6e6d8}.cards{display:grid;gap:7px}.card{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid #779c8d;background:#24454a;color:#fff5dc;border-radius:12px;padding:7px 9px;min-height:58px}.card.picked{border-color:#ffdc8d;background:#506348;box-shadow:0 0 0 2px #f6c85d}.card .symbol{font-size:1.7rem}.card b{display:block;font-size:.88rem}.card small{display:block;font-size:.68rem;color:#d8e9dc}.card .cost{font-weight:900;color:#ffd482}.card:disabled{opacity:.5;cursor:not-allowed}.selected{margin:10px 0;color:#ffe0a5;font-weight:800;min-height:26px}.skill{width:100%;display:grid;place-items:center;font-size:1.05rem}.skill small{font-size:.7rem}.skill:disabled{opacity:.55;cursor:not-allowed;transform:none}.tips{margin-top:15px;padding:10px 12px;background:#1b3d42;border-radius:10px;font-size:.8rem}.tips p{margin:4px 0 0;color:#d4e4d8}.sheet{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:15px;background:#061016d9}.sheet-card{width:min(95vw,500px);max-height:90vh;overflow:auto;border:2px solid #e5c879;border-radius:24px;padding:28px;background:linear-gradient(145deg,#21464a,#11252e);box-shadow:0 30px 70px #000}.sheet-card h2{font-size:2rem;margin:5px 0}.sheet-card p{color:#e5f1dc}.sheet-card button,.sheet-card a{margin:7px 8px 0 0}.sheet-card button.secondary{background:#28494d;color:white;border:1px solid #91b4a2;border-radius:15px;padding:13px 20px}.sheet-card a{display:inline-block}footer{padding:24px 0 30px;color:#d6e7d9;font-size:.8rem;text-align:center}footer a{margin:0 2px}@keyframes bob{50%{transform:translateY(-12px)}}@keyframes twinkle{to{opacity:.25;transform:scale(.7)}}@media(max-width:800px){.intro{grid-template-columns:1fr;gap:20px;padding-bottom:35px}.intro-art{min-height:315px}.art-row{bottom:18%}.art-row span,.art-row span:nth-child(even),.art-row span:nth-child(3){height:100px}.moon{width:130px;height:130px}.battle{grid-template-columns:1fr}.command{order:-1}.cards{grid-template-columns:repeat(5,minmax(0,1fr))}.card{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1px;padding:6px 2px;min-height:92px}.card b{font-size:.73rem}.card small{display:none}.card .cost{font-size:.72rem}.hud{grid-template-columns:repeat(3,minmax(0,1fr))}.hud>div{padding:6px;font-size:.75rem}.arena{min-height:520px}.board{grid-template-rows:repeat(3,54px)}.gate{bottom:195px}}@media(max-width:520px){.shell{padding:0 10px}.top{align-items:flex-start}.brand{font-size:.82rem}.top button{font-size:.73rem;padding:6px}.intro h1{font-size:3.4rem}.intro-art{min-height:290px}.alt{display:block;margin:16px 0 0}.hud{grid-template-columns:1fr 1fr}.hud>div:first-child{grid-column:1/-1}.arena{min-height:510px}.enemy{min-height:50px;font-size:.71rem}.slot{font-size:.64rem}.slot strong{font-size:1rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}