:root{--gold:#f4c66b;--muted:#a4bac9}body{font-family:system-ui,"Noto Sans TC",sans-serif}button,input{font:inherit}.logo .t1{font-size:clamp(24px,3.1vw,43px);letter-spacing:.02em}.logo .t2{font:11px monospace;letter-spacing:3px;color:#8bbfd4}.box{border-radius:18px;background:linear-gradient(145deg,#142639f5,#091727f5);border:1px solid #6bb7c533;box-shadow:0 20px 80px #020a1740}.menu-item{border-radius:9px}.menu-item.play{background:linear-gradient(105deg,#1b716b,#27576b)}.menu-left{min-width:310px}.d-evolution{position:fixed;inset:0;background:#030b1d;z-index:10000}.d-evolution canvas{width:100%;height:100%;display:block}.d-evo-title{position:absolute;top:7%;left:0;width:100%;text-align:center;color:#e7f8ff;pointer-events:none}.d-evo-title small{font:12px monospace;letter-spacing:6px;color:#7acde7}.d-evo-title h1{font-size:clamp(28px,4vw,52px);letter-spacing:.25em;margin:10px}.d-evo-title p{color:#c2e9f7}.d-evo-skip{position:absolute;right:24px;bottom:24px}.d-preview{font-size:12px;margin-top:8px}#d-run-ribbon{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);padding:6px 14px;border:1px solid #86c9dd45;border-radius:20px;background:#051528c7;color:#d5efff;font-size:11px;pointer-events:none;white-space:nowrap;z-index:5}.d-rank-table{width:100%;border-collapse:collapse;font-size:13px}.d-rank-table th,.d-rank-table td{padding:12px 10px;border-bottom:1px solid #a3cfff20;text-align:left}.d-rank-table th{color:#95b6c8}.d-rank-scroll{overflow:auto;max-height:55vh}#d-code{text-transform:uppercase;letter-spacing:.3em}#d-create,#d-join{margin:14px 0;width:100%}.credits-line{font-size:10px;opacity:.8}.login-tag{line-height:1.8}.stage{image-rendering:auto}.d-note{color:#8baabd;font-size:12px;line-height:1.7}@media(max-height:600px){.d-run-ribbon{bottom:4px} .d-evo-title{top:2%} .logo .t1{font-size:23px}}

/* Fullscreen evolution: animation only, music stays in the background. */
.d-evolution{display:block;overflow:hidden;color:#e6f5ff;background:#020813}.d-evo-scene{position:relative;width:100%;height:100dvh;overflow:hidden}.d-evo-scene canvas{width:100%;height:100%}.d-evo-title{top:6%;padding:0 18px;box-sizing:border-box}.d-evo-title small{letter-spacing:4px;font-size:11px}.d-evo-title h1{font-size:clamp(25px,4vw,48px);letter-spacing:.15em;margin:10px}.d-evo-title p{font-size:13px}.d-evo-skip{position:absolute;right:24px;bottom:43px;padding:10px 18px;font-size:13px;background:#071727cc;border:1px solid #a9dcff55;z-index:2}.d-evo-progress{position:absolute;bottom:27px;left:24px;right:24px;height:2px;background:#ffffff18}.d-evo-progress i{display:block;height:100%;background:#c4f5ff;box-shadow:0 0 10px #7adeff;width:0}.d-evolution button:focus-visible{outline:2px solid #f4d48e;outline-offset:4px}
@media(max-width:600px){.d-evo-title{top:9%}.d-evo-title h1{font-size:28px}.d-evo-title p{font-size:12px}.d-evo-skip{top:12px;right:12px;bottom:auto;padding:7px 11px;font-size:11px}.d-evo-progress{left:14px;right:14px}}
/* A bounded collection view: never render hundreds of animation canvases. */
.d-dex-intro{font-size:12px;line-height:1.7;color:#a2bbce}.d-dex-search{display:flex;gap:8px;margin-bottom:10px}.d-dex-search input{flex:1;min-width:0}.d-dex-search select{max-width:150px}.d-dex-pager{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 0 3px;font-size:12px;color:#a6c3d6}.d-dex-cell{font:inherit;color:inherit;position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;gap:4px;padding:24px 6px 10px!important}.d-dex-cell.on{border-color:#f4c66b;box-shadow:inset 0 0 0 1px #f4c66b}.d-dex-cell small{font-size:10px;color:#8caac1}.d-dex-cell b{font-size:12px;line-height:1.4;max-width:100%;overflow-wrap:anywhere}.d-owned{position:absolute;top:6px;right:6px;font-size:9px;color:#8397a9}.d-owned.yes{color:#b8e8cc}#scr-dex .d-dex-cell .d-dex-art{display:block;width:100%;max-width:110px;height:92px;object-fit:contain;background:transparent;image-rendering:auto}.d-detail-art{display:block;width:100%;max-width:220px;height:190px;object-fit:contain;margin:0 auto 12px;background:transparent;image-rendering:auto}.d-original-name{font:10px monospace;color:#92acbd}.d-stage{color:#c2dce9;font-size:11px}.d-signature{padding:12px;margin-top:10px;background:#040f1d66;border:1px solid #80b6ce25;border-radius:10px}.d-signature small{display:block;color:#8eaabd;font-size:10px;letter-spacing:2px}.d-signature b{display:block;color:#f4d48e;font-size:15px;margin:5px 0}.d-signature p{font-size:12px;line-height:1.8;color:#a7c2d5;margin:0}.d-evo-path,.d-collect-note{font-size:12px;line-height:1.8;color:#b3d2e5}#dex-detail>#dex-preview,#dex-detail>#dex-pick,#dex-detail>#dex-summon{width:100%;margin-top:8px}#dex-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
@media(max-width:650px){.d-dex-search{flex-direction:column}.d-dex-search select{max-width:100%}.d-dex-pager{flex-wrap:wrap;justify-content:center}#dex-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.d-detail-art{height:140px}.d-dex-cell{padding:24px 4px 8px!important}.d-dex-art{height:72px}.d-dex-intro{font-size:10px}#dex-detail .btn{position:static;order:initial}.d-signature{padding:8px}.d-dex-cell b{font-size:11px}}

/* Cinematic version: unobtrusive stage label; characters and cuts lead. */
.d-evo-scene canvas{image-rendering:auto}.d-evo-title{top:26px;text-align:left;padding:0 30px;opacity:.82}.d-evo-title small{font-size:9px;letter-spacing:3px}.d-evo-title h1{font-size:18px;letter-spacing:.12em;margin:6px 0}.d-evo-title p{font-size:11px;margin:0;color:#a9e8dc}.d-evolution[data-shot="call"] .d-evo-title,.d-evolution[data-shot="details"] .d-evo-title,.d-evolution[data-shot="hero"] .d-evo-title{opacity:0}.d-evo-skip{bottom:31px;right:22px;opacity:.75}.d-evo-progress{bottom:14px;height:2px}.d-evo-progress i{background:#a7ffdc;box-shadow:0 0 8px #a7ffdc}
@media(max-width:600px){.d-evo-title{top:65px;padding:0 18px}.d-evo-title h1{font-size:16px}.d-evo-title small{font-size:8px}.d-evo-title p{font-size:10px}.d-evo-skip{top:12px;right:12px;bottom:auto}}

/* Friends are a light DOM list; no additional animated canvases or battle-loop work. */
.d-social-box{width:min(920px,96vw);max-height:calc(100dvh - 90px);overflow:auto}.d-social-box h2{margin:4px 0 18px}.d-social-kicker{font:10px monospace;letter-spacing:2px;color:#7accc1}.d-social-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr);gap:24px}.d-social-main{min-width:0}.d-my-profile{display:flex;align-items:center;justify-content:space-between;gap:12px}.d-my-profile small{display:block;color:var(--muted);font-size:12px}.d-my-profile strong{display:block;font-size:21px;overflow-wrap:anywhere;margin-top:3px}.d-friend-code{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;margin:10px 0 16px;border-top:1px solid #a3cfff20;border-bottom:1px solid #a3cfff20}.d-friend-code>span{font-size:12px;color:var(--muted)}.d-friend-code code{font:16px monospace;letter-spacing:2px;color:#f4d48e;user-select:all}.d-friend-code .btn{margin-left:auto}.d-social-box label,.d-nick-box label{display:block;font-size:12px;color:#bed4e0}.d-social-box .field,.d-nick-box .field{width:100%;box-sizing:border-box;margin-top:7px}.d-social-box form.row{align-items:flex-end}.d-social-box form.row label{min-width:100px}.d-social-box #d-friend-code{text-transform:uppercase}.d-friend-heading h3{font-size:14px;margin:12px 0}.d-friend-card{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #a3cfff18}.d-friend-card img{width:48px;height:48px;object-fit:contain}.d-friend-card b{display:block;font-size:14px;overflow-wrap:anywhere}.d-friend-card small{display:block;font-size:10px;color:#8baabd;margin-top:4px}.d-friend-card .grow{min-width:0}.d-friend-card .d-online{color:#81dfb7}.d-friends-empty{font-size:13px;line-height:1.8;color:#93b2c6;padding:18px 0}.d-coop-panel{background:#05132380;border:1px solid #67b6c329;border-radius:13px;padding:18px;align-self:start}.d-coop-panel h3{font-size:24px;margin:6px 0 12px}.d-coop-panel .sub{font-size:12px;line-height:1.8}.d-social-divider{border-top:1px solid #a3cfff20;padding:15px 0;font-size:11px;color:#8baabd}.d-nick-box{width:min(440px,94vw)}#scr-nick{z-index:120}#user-pill[role=button]{cursor:pointer}#user-pill:focus-visible{outline:2px solid #f4c66b;outline-offset:3px}
@media(max-width:700px){.d-social-layout{grid-template-columns:1fr}.d-social-box{padding:16px}.d-friend-card{flex-wrap:wrap}.d-friend-card>.row{margin-left:58px}.d-social-box form.row{flex-wrap:wrap}.d-social-box form.row>.btn{flex:1}.d-friend-code code{font-size:14px}.d-my-profile strong{font-size:18px}}@media(max-height:550px){.d-social-box{max-height:calc(100dvh - 65px)}.d-social-box h2{margin-bottom:10px}}

.d-room-invitation{border:1px solid #eac56866;border-radius:10px;background:#eac56810;padding:12px;margin:10px 0}.d-room-invitation p{margin:0 0 10px;overflow-wrap:anywhere}.d-room-invitation small{display:block;color:#a9bdcf;margin-bottom:10px}.d-friend-card>.row{justify-content:flex-end}.invite-pop{border-color:#eac568;overflow-wrap:anywhere}#d-room-invites h3{font-size:14px;color:#f4d48e}

/* Compact skill reference and run-only passive state. */
.d-skillbook{border:1px solid #385365;border-radius:10px;margin:10px 0;background:#071722;text-align:left}.d-skillbook summary{padding:12px;cursor:pointer;color:#c5e9f5;font-weight:700}.d-skill-note{padding:0 12px;font-size:12px;color:#9db4c2;line-height:1.7}.d-skill-entry{padding:12px;border-top:1px solid #243c4b;display:grid;gap:6px}.d-skill-entry small{color:#9db4c2;font-size:11px}.d-skill-entry p{font-size:12px;line-height:1.7;margin:0;color:#d1dfe8}.d-skill-entry span{font-size:11px;line-height:1.7;color:#93acbe}.d-passive-list{text-align:left;margin:14px 0;background:#081a27;border:1px solid #345566;border-radius:10px;padding:12px;max-height:220px;overflow:auto}.d-passive-list h3{font-size:14px;margin:0 0 10px}.d-passive-list p{font-size:12px;line-height:1.6;margin:6px 0;color:#adc2d2}.d-passive-row+.d-passive-row{border-top:1px solid #2a4352;padding-top:8px;margin-top:8px}.d-passive-card{border-color:#9ddfc2!important}.d-passive-card .tag-chip{background:#99dabb!important;color:#0b2429}

#d-fusion-panel{position:fixed;z-index:22;right:16px;bottom:110px;width:min(290px,calc(100vw - 24px));padding:16px;border:1px solid #6bb7bf;background:linear-gradient(145deg,#0a2437f7,#0a1623f5);box-shadow:0 8px 28px #0007;border-radius:16px;display:grid;gap:10px;color:#e1f6ff}#d-fusion-panel small{color:#8eddd8;font:700 10px monospace;letter-spacing:1.5px}#d-fusion-panel>span{font-size:12px;color:#b1cbd8;line-height:1.6}#d-fusion-panel .btn{width:100%;margin:3px 0}#d-fusion-panel .d-fusion-heal{background:linear-gradient(#c1ffd6,#3fc583);border-color:#e8fff0;color:#103d29;font-size:16px}#d-fusion-panel kbd{background:#123a28;color:#b9ffd2;border:none}.d-dice-row{display:flex;gap:16px;justify-content:center}.d-dice-row>div{display:grid;text-align:center;gap:4px}.d-dice-row span{font-size:12px}.d-dice-row b{font:64px system-ui;color:#f5f8ff;line-height:1}.d-dice-row.rolling b{animation:diceRoll .2s infinite alternate}@keyframes diceRoll{to{transform:rotate(18deg) translateY(-7px)}}
.d-fusion-cinema{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse,#173653,#030b18 75%);color:#e6faff;pointer-events:none}.d-fusion-cinema small{letter-spacing:7px;font:12px monospace;color:#9be5ff;z-index:2}.d-fusion-cinema h1{font-size:clamp(32px,6vw,60px);letter-spacing:.2em;z-index:2;margin:18px}.d-fusion-cinema canvas{height:min(50vh,440px);max-width:80vw;object-fit:contain;filter:drop-shadow(0 0 20px #a5dcff);animation:fusionReveal 2.8s both;z-index:2}.d-fusion-cinema strong{font-size:28px;letter-spacing:.2em;z-index:2}.d-fusion-cinema p{color:#a9cede;z-index:2}.d-fusion-beam{position:absolute;top:-25%;height:150%;width:20%;filter:blur(18px);transform:rotate(25deg);animation:fusionMerge 2.8s both}.d-fusion-beam.left{background:linear-gradient(transparent,#ffad65,transparent);left:15%;--merge:35vw}.d-fusion-beam.right{background:linear-gradient(transparent,#83dbff,transparent);right:15%;--merge:-35vw}.d-fusion-flare{position:absolute;inset:0;background:radial-gradient(#ffffff,#a6e6ff50,transparent 65%);animation:fusionFlash 2.8s both}@keyframes fusionMerge{0%{opacity:.3}55%{transform:translateX(var(--merge)) rotate(25deg);opacity:1}100%{transform:translateX(var(--merge));opacity:0}}@keyframes fusionReveal{0%,35%{opacity:0;transform:scale(.5);filter:brightness(4)}65%{opacity:1;filter:brightness(2)}100%{transform:scale(1);filter:drop-shadow(0 0 20px #a5dcff)}}@keyframes fusionFlash{0%,40%{opacity:0}58%{opacity:1}100%{opacity:0}}@media(max-width:600px){#d-fusion-panel{right:10px;bottom:90px;width:230px;padding:12px;font-size:13px}}@media(prefers-reduced-motion:reduce){.d-fusion-cinema *,.d-dice-row.rolling b{animation:none!important}}
