@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900;1000&display=swap";:root{color-scheme:dark;font-family:Nunito,Arial Rounded MT Bold,Trebuchet MS,Segoe UI,sans-serif;--color-ink: #fff7df;--color-muted: #c8c7ff;--color-bg: #08072a;--color-panel: rgba(16, 16, 62, .72);--color-panel-strong: rgba(35, 23, 93, .82);--color-line: rgba(156, 185, 255, .28);--color-accent: #ffd33f;--color-accent-2: #6fd7ff;--color-danger: #ff6a55;--shadow-soft: 0 24px 80px rgba(0, 0, 0, .36);--radius-sm: 8px;--radius-md: 14px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px}*{box-sizing:border-box}html{min-height:100%;background:var(--color-bg)}body{min-width:320px;min-height:100vh;margin:0;color:var(--color-ink);background:radial-gradient(circle at 50% 16%,rgba(255,72,219,.18),transparent 18rem),linear-gradient(180deg,#08072a0a,#08072a38),url(/backgrounds/main-bg.png) center / cover fixed,var(--color-bg)}button{font:inherit;-webkit-tap-highlight-color:transparent}button,a,[role=button]{-webkit-tap-highlight-color:transparent}button:focus{outline:none}button:focus-visible{outline:3px solid rgba(111,215,255,.72);outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.52}.appShell{display:grid;min-height:100vh;padding:max(var(--space-4),env(safe-area-inset-top)) var(--space-4) max(var(--space-5),env(safe-area-inset-bottom));place-items:start center}.appShell--scenario{background:linear-gradient(180deg,#08072a2e,#08072a57),url(/backgrounds/scenario-bg.png) center / cover fixed,var(--color-bg)}.appShell--roll{background:linear-gradient(180deg,#08072a0a,#08072a1f),url(/backgrounds/roll-bg.png) center / cover fixed,var(--color-bg)}.phoneFrame{width:min(100%,430px);min-height:calc(100vh - var(--space-6));padding:var(--space-4) 0 var(--space-5);border:0;border-radius:0;background:transparent;box-shadow:none}.hero{padding:0}.eyebrow,.sectionLabel{margin:0 0 var(--space-2);color:var(--color-accent-2);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.brandLogo{display:block;width:min(100%,19.25rem);height:auto;margin:0 auto;filter:drop-shadow(0 18px 26px rgba(16,4,58,.38))}.heroText{max-width:21.5rem;margin:var(--space-3) auto 0;color:var(--color-accent);font-size:.92rem;font-weight:900;line-height:1.28;text-align:center;text-shadow:0 2px 0 rgba(29,12,91,.82),0 0 12px rgba(255,76,224,.34),0 0 18px rgba(91,216,255,.18)}.statusPanel,.collectionPreview{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4);border:1px solid rgba(120,163,255,.38);border-radius:18px;background:linear-gradient(135deg,#23175dd1,#090e3dbd),#0c0a30b8;box-shadow:inset 0 1px #ffffff24,0 18px 44px #04061e57,0 0 28px #6fd7ff1a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.collectionPreview{width:100%;margin-top:var(--space-3);color:inherit;text-align:left;cursor:pointer}.statusPanel h2,.collectionPreview h2{margin:0;font-size:1.1rem;letter-spacing:0}.sectionHero{margin:var(--space-5) 0 var(--space-4)}.sectionHero h1{margin:0;color:var(--color-ink);font-size:2.1rem;line-height:1;letter-spacing:0;text-shadow:0 2px 0 rgba(76,48,154,.72),0 0 18px rgba(111,215,255,.28)}.dayBadge{flex:0 0 auto;padding:8px 11px;border:1px solid rgba(255,211,63,.62);border-radius:999px;color:var(--color-accent);font-size:.72rem;font-weight:800;background:#ffd33f1a;box-shadow:0 0 20px #ffd33f24}.panelCopy{margin:var(--space-2) 0 0;color:var(--color-muted);font-size:.9rem;line-height:1.35}.cooldownNotice{margin:calc(var(--space-6) + 20px) 0 calc(var(--space-6) + 10px);padding:var(--space-4) var(--space-5);border:2px solid rgba(111,215,255,.58);border-radius:24px;color:#fff7dfe6;background:linear-gradient(180deg,#3d259ab8,#0c12529e);box-shadow:inset 0 2px #ffffff2e,inset 0 -5px #060a3652,0 0 0 3px #ff4bdd1f,0 14px 32px #04061e42,0 0 30px #6fd7ff29;font-size:1rem;font-weight:850;line-height:1.42;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.skillsGrid{display:grid;gap:var(--space-3);margin:var(--space-4) 0 0}.skillsScreenGrid{margin-top:0}.skillCard{display:grid;grid-template-columns:4.35rem minmax(0,1fr);align-items:center;gap:var(--space-3);padding:var(--space-4);border:2px solid transparent;border-radius:26px;background:linear-gradient(180deg,#271575db,#09104cd1) padding-box,linear-gradient(135deg,#ff58e6a3,#5bd8ffa8) border-box;box-shadow:inset 0 3px #ffffff24,inset 0 -6px #050a3647,0 12px 24px #04061e47,0 0 16px #5bd8ff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.skillIcon{width:4.35rem;height:4.35rem;object-fit:contain}.skillBody{min-width:0}.skillHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}.skillHeader h3{margin:0;font-size:1rem;letter-spacing:0}.skillHeader strong{color:var(--color-accent);font-size:.92rem}.skillTrack{height:8px;margin:var(--space-3) 0;overflow:hidden;border-radius:999px;background:#070a32b8;box-shadow:inset 0 1px 4px #00000061}.skillTrack span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff5be7,#ffd33f,#5bd8ff);box-shadow:0 0 12px #ff5be770}.skillCard p{margin:0;color:var(--color-muted);font-size:.88rem;line-height:1.4}.primaryAction{position:relative;width:100%;min-height:72px;margin:var(--space-4) 0 calc(var(--space-6) + 10px);border:3px solid #ff5be7;border-radius:28px;color:#26124b;background:linear-gradient(180deg,#fff482,#ffd744 38%,#ffaf24 72%,#f28618);box-shadow:inset 0 5px #ffffff8f,inset 0 -10px #9c42003d,inset 0 0 0 2px #fff49b8f,0 4px #5023b0b8,0 15px 26px #04061e61,0 0 0 2px #59ccff52,0 0 24px #ff46e047;font-size:1.34rem;font-weight:1000;letter-spacing:0;text-transform:uppercase;text-shadow:0 2px 0 rgba(255,255,255,.28);cursor:pointer;isolation:isolate;overflow:visible}.primaryAction:before{content:"";position:absolute;inset:8px 18px auto;height:14px;border-radius:999px;background:linear-gradient(90deg,#ffffff75,#ffffff14);pointer-events:none}.ghostButton{width:fit-content;min-height:42px;padding:0 var(--space-4);border:2px solid rgba(111,215,255,.56);border-radius:999px;color:var(--color-ink);background:linear-gradient(180deg,#392092b8,#0b114ead);box-shadow:inset 0 2px #ffffff24,0 6px #1f1e7080,0 0 18px #6fd7ff24;font-weight:900;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.iconBackButton{display:grid;width:3rem;height:3rem;min-height:0;place-items:center;padding:0;border:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.iconBackButton img{width:2.8rem;height:2.8rem;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(4,6,30,.32))}.iconBackButton span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.screenHeader{display:grid;grid-template-columns:3rem minmax(0,1fr);align-items:center;gap:var(--space-3);min-height:3.5rem}.screenHeader h1{margin:0;color:var(--color-accent);font-size:1.62rem;font-weight:1000;line-height:1.1;letter-spacing:0;text-shadow:0 2px 0 rgba(26,12,84,.72),0 0 14px rgba(255,211,63,.28),0 0 16px rgba(91,216,255,.12)}.screenHeader--compact h1{font-size:1.38rem}.primaryAction:active{transform:translateY(3px);box-shadow:inset 0 4px #ffffff80,inset 0 -8px #9c420038,inset 0 0 0 2px #fff49b80,0 2px #5023b0b3,0 14px 22px #04061e4d,0 0 0 2px #59ccff47,0 0 18px #ff46e03d}.topAction{margin-top:calc(var(--space-6) + 20px)}.hubGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:0}.hubTile{position:relative;display:grid;min-height:156px;place-items:center;align-content:center;gap:var(--space-3);padding:var(--space-4) var(--space-3);border:2px solid transparent;border-radius:28px;color:var(--color-ink);background:linear-gradient(180deg,#271575e6,#09104cdb) padding-box,linear-gradient(135deg,#ff58e6,#8c62ff 44%,#5bd8ff) border-box;box-shadow:inset 0 3px #ffffff2e,inset 0 -8px #050a3657,0 7px #201e789e,0 16px 28px #04061e4d,0 0 16px #ff4ade33,0 0 20px #5bd8ff24;text-align:center;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:visible}.hubTile:before{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;z-index:-1;border-radius:32px;background:linear-gradient(135deg,#ff52e6d1,#5bd8ffad);filter:blur(8px);opacity:.34}.hubTile:after{content:none}.hubTile:hover{transform:translateY(-1px)}.hubTile:active{transform:translateY(3px);box-shadow:inset 0 3px #ffffff29,inset 0 -6px #050a364d,0 5px #201e78ad,0 14px 28px #04061e4d,0 0 22px #ff4ade52,0 0 28px #5bd8ff33}.hubTile:nth-child(1){background:radial-gradient(circle at 50% 18%,rgba(255,77,224,.22),transparent 4.6rem),linear-gradient(180deg,#301584eb,#09104cdb) padding-box,linear-gradient(135deg,#ff58e6,#986cff 42%,#5bd8ff) border-box}.hubTile:nth-child(2){background:radial-gradient(circle at 50% 18%,rgba(255,214,65,.18),transparent 4.6rem),linear-gradient(180deg,#2a1c7eeb,#09104cdb) padding-box,linear-gradient(135deg,#5bd8ff,#9b69ff 48%,#ff58e6) border-box}.hubTileIcon{display:block;width:4.75rem;height:4.75rem;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.28)) drop-shadow(0 0 10px rgba(255,86,223,.12))}.hubTile:first-child .hubTileIcon{transform:translate(4px)}.hubTile strong{display:block;font-size:1.08rem;font-weight:1000;line-height:1;text-align:center;text-shadow:0 2px 0 rgba(26,12,84,.8),0 0 16px rgba(111,215,255,.26);text-transform:uppercase}.hubIconStack{position:relative;display:block;height:52px}.hubIconStack img{position:absolute;width:3.1rem;height:3.1rem;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28))}.hubIconStack img:nth-child(1){left:-.2rem;top:.3rem}.hubIconStack img:nth-child(2){left:1.45rem;top:-.1rem}.hubIconStack img:nth-child(3){left:3rem;top:.45rem}.posterRow{display:grid;grid-template-columns:repeat(3,28px);gap:6px}.posterRow span{width:28px;height:42px;border:1px solid var(--color-line);border-radius:5px;background:linear-gradient(160deg,rgba(240,180,79,.7),transparent 55%),var(--color-panel-strong)}.screenStack{display:grid;gap:var(--space-4)}.compactHeader h2,.scenarioCard h2,.resultPanel h2,.rollScreen h2{margin:0;letter-spacing:0}.compactHeader h2{color:var(--color-ink);font-size:2rem;line-height:1;text-shadow:0 2px 0 rgba(26,12,84,.8),0 0 18px rgba(255,76,224,.22)}.scenarioCard,.resultPanel,.deltaPanel{position:relative;padding:var(--space-5);border:2px solid transparent;border-radius:28px;background:linear-gradient(180deg,#271575e6,#09104cd6) padding-box,linear-gradient(135deg,#ff58e6b8,#5bd8ffb8) border-box;box-shadow:inset 0 3px #ffffff24,inset 0 -7px #050a3647,0 14px 28px #04061e4d,0 0 18px #ff4ade29,0 0 20px #5bd8ff1f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.scenarioCard p:last-child,.resultPanel p:last-child{margin:var(--space-4) 0 0;color:var(--color-ink);font-size:1.05rem;line-height:1.48}.scenarioImageWrap{position:relative}.scenarioImage{display:block;width:100%;aspect-ratio:16 / 10;border:2px solid rgba(111,215,255,.28);border-radius:22px;object-fit:cover;object-position:center;box-shadow:0 12px 26px #04061e57,0 0 20px #5bd8ff1a}.choiceList{display:grid;gap:var(--space-4)}.choicePrompt{margin:var(--space-1) 0 var(--space-2);color:var(--color-accent);font-size:1.18rem;font-weight:1000;text-align:center;text-shadow:0 2px 0 rgba(26,12,84,.82),0 0 14px rgba(255,76,224,.28),0 0 18px rgba(91,216,255,.16)}.choiceButton{position:relative;z-index:0;display:block;width:100%;min-height:132px;padding:40px var(--space-5) 42px;border:0;border-radius:0;color:var(--color-ink);background:transparent;box-shadow:none;text-align:left;cursor:pointer;isolation:isolate;overflow:visible}.choiceBubble{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;filter:drop-shadow(0 8px 0 rgba(31,30,112,.46)) drop-shadow(0 16px 18px rgba(4,6,30,.26)) drop-shadow(0 0 14px rgba(255,74,222,.18)) drop-shadow(0 0 14px rgba(91,216,255,.12));pointer-events:none}.choiceSkillIcon{position:absolute;top:10px;left:44px;z-index:1;width:2.65rem;height:2.65rem;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 8px rgba(3,4,32,.42))}.choiceText{position:relative;display:block;z-index:1;min-width:0;max-width:none;line-height:1.4;padding:0}.rollScreen{display:grid;min-height:64vh;align-content:center;justify-items:center;gap:var(--space-4);text-align:center}.rollTitle,.rollScreen h2{color:var(--color-accent);font-size:1.55rem;font-weight:1000;text-shadow:0 2px 0 rgba(26,12,84,.8),0 0 16px rgba(255,76,224,.26)}.rollTitle{margin:0;line-height:1.12}.rollScreen>p:last-child{margin:0;padding:8px 14px;border-radius:999px;color:var(--color-accent);background:#0b104b94;box-shadow:inset 0 1px #ffffff24,0 0 18px #5bd8ff1f;font-weight:900}.rollPrompt{display:grid;max-width:320px;justify-items:center;gap:var(--space-3);margin-top:-4px}.rollPrompt p{margin:0;color:var(--color-ink);font-size:1rem;font-weight:900;line-height:1.32;text-shadow:0 2px 0 rgba(26,12,84,.72),0 0 14px rgba(91,216,255,.18)}.rollPrompt p+p{color:var(--color-muted);font-size:.88rem;font-weight:800}.compactMotionButton{min-height:42px;padding:10px 16px;font-size:.92rem}.rollResultScreen{display:grid;gap:var(--space-4)}.rollResultScreen .rollScreen{min-height:380px}.diceStage{position:relative;display:grid;width:100%;max-width:100%;aspect-ratio:356 / 286;height:auto;place-items:center;perspective:720px;overflow:visible}.diceStage--criticalSuccess{animation:diceStageCriticalWin .76s cubic-bezier(.16,.88,.22,1.18) 1}.diceStage--fail{animation:diceStageMisfire .42s cubic-bezier(.28,.78,.38,1.22) 1}.diceStage--criticalFail{animation:diceStageCriticalFail .7s cubic-bezier(.28,.78,.38,1.22) 1}.rollDcMark{position:absolute;right:8%;top:12%;z-index:4;display:inline-grid;width:104px;height:122px;grid-template-rows:28px 42px;align-content:center;justify-items:center;box-sizing:border-box;padding:10px 0 20px;color:#ffe66deb;background:transparent;filter:drop-shadow(0 0 16px rgba(255,230,109,.32)) drop-shadow(0 10px 18px rgba(0,0,0,.22));pointer-events:none;transform:scale(.78);transform-origin:center}.rollDcMark:before,.rollDcMark:after{position:absolute;content:"";clip-path:polygon(50% 1%,90% 16%,93% 21%,86% 74%,82% 81%,54% 98%,46% 98%,18% 81%,14% 74%,7% 21%,10% 16%)}.rollDcMark:before{top:0;right:0;bottom:0;left:0;z-index:0;background:linear-gradient(180deg,#ffef8bfa,#ffc13edb)}.rollDcMark:after{top:4px;right:4px;bottom:4px;left:4px;z-index:1;background:linear-gradient(180deg,#ffe66d38,#5bd8ff14),#0b104bd1}.rollDcMark span{position:relative;z-index:2;align-self:end;font-size:.82rem;font-weight:1000;letter-spacing:0}.rollDcMark strong{position:relative;z-index:2;align-self:start;font-size:2.25rem;line-height:1;text-shadow:0 2px 0 rgba(26,12,84,.78)}.outcomeBurst{position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;pointer-events:none;overflow:visible}.combatTrail,.combatStrike,.dcShield,.shieldImpact,.shieldSpark,.reboundShard,.criticalFlash{position:absolute;left:50%;top:50%}.combatTrail{z-index:1;width:190px;height:12px;border-radius:999px;opacity:0;background:linear-gradient(90deg,transparent,rgba(91,216,255,.36),rgba(255,230,109,.82),transparent);filter:blur(1px) drop-shadow(0 0 14px rgba(255,230,109,.32));transform:translate(-148px,-50%) rotate(-24deg) scaleX(.2);animation:combatTrailStrike 2.65s cubic-bezier(.16,.86,.2,1) 1}.outcomeBurst--fail .combatTrail,.outcomeBurst--criticalFail .combatTrail{background:linear-gradient(90deg,transparent,rgba(255,91,116,.3),rgba(255,170,188,.74),transparent);animation-name:combatTrailRebound}.combatStrike{z-index:3;display:inline-grid;position:absolute;width:72px;height:72px;place-items:center;border:3px solid rgba(255,230,109,.9);border-radius:50%;color:#ffe66d;background:radial-gradient(circle at 50% 42%,#ffe66d3d,#5bd8ff24 56%,#0b104be0 72%),#0b104bd1;box-shadow:inset 0 0 18px #ffe66d33,0 0 22px #ffe66d57;font-size:1.45rem;font-weight:1000;line-height:1;opacity:0;overflow:visible;text-shadow:0 2px 0 rgba(26,12,84,.8);transform:translate(-152px,-50%) scale(.72);animation:combatStrikeHit 2.65s cubic-bezier(.14,.9,.2,1) 1}.combatStrikeValue{position:relative;z-index:2}.combatStrikePiece{position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;z-index:1;border:3px solid rgba(255,91,116,.78);border-radius:50%;background:radial-gradient(circle at 50% 42%,#ff5b7438,#ffaabc14 56%,#0b104be6 72%),#0b104bdb;box-shadow:inset 0 0 18px #ff5b7424,0 0 22px #ff5b7447;opacity:0}.combatStrikePiece--left{clip-path:polygon(0 0,55% 0,43% 18%,56% 34%,42% 50%,55% 68%,44% 100%,0 100%)}.combatStrikePiece--right{clip-path:polygon(45% 0,100% 0,100% 100%,56% 100%,68% 68%,55% 50%,69% 34%,56% 18%)}.outcomeBurst--fail .combatStrike,.outcomeBurst--criticalFail .combatStrike{border-color:#ff5b74c7;color:#ff9aae;background:radial-gradient(circle at 50% 42%,#ff5b7438,#ffaabc14 56%,#0b104be6 72%),#0b104bdb;box-shadow:inset 0 0 18px #ff5b7424,0 0 22px #ff5b7447;animation-name:combatStrikeBounce}.outcomeBurst--fail .combatStrikePiece,.outcomeBurst--criticalFail .combatStrikePiece{opacity:0}.outcomeBurst--fail .combatStrikePiece--left,.outcomeBurst--criticalFail .combatStrikePiece--left{animation:combatStrikeShardLeft 2.65s cubic-bezier(.14,.9,.2,1) 1}.outcomeBurst--fail .combatStrikePiece--right,.outcomeBurst--criticalFail .combatStrikePiece--right{animation:combatStrikeShardRight 2.65s cubic-bezier(.14,.9,.2,1) 1}.outcomeBurst--fail .combatStrikeValue,.outcomeBurst--criticalFail .combatStrikeValue{animation:combatStrikeValueBreak 2.65s ease-out 1}.dcShield{z-index:2;display:inline-grid;right:8%;left:auto;top:12%;width:104px;height:122px;grid-template-rows:28px 42px;align-content:center;justify-items:center;box-sizing:border-box;padding:10px 0 20px;color:#ffe66df2;background:transparent;filter:drop-shadow(0 0 16px rgba(255,230,109,.32)) drop-shadow(0 10px 18px rgba(0,0,0,.22));opacity:0;overflow:visible;transform:scale(.78);transform-origin:center;animation:dcShieldEnter 2.85s ease-out 1}.dcShield:before,.dcShield:after{position:absolute;content:"";clip-path:polygon(50% 1%,90% 16%,93% 21%,86% 74%,82% 81%,54% 98%,46% 98%,18% 81%,14% 74%,7% 21%,10% 16%)}.dcShield:before{top:0;right:0;bottom:0;left:0;z-index:0;background:linear-gradient(180deg,#ffef8bfa,#ffc13edb)}.dcShield:after{top:4px;right:4px;bottom:4px;left:4px;z-index:1;background:linear-gradient(180deg,#ffe66d38,#5bd8ff14),#0b104bd1}.dcShieldPiece{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:linear-gradient(180deg,#ffe66d3d,#5bd8ff14),#0b104bc2;filter:drop-shadow(1px 0 0 rgba(255,230,109,.82)) drop-shadow(-1px 0 0 rgba(255,230,109,.82)) drop-shadow(0 1px 0 rgba(255,230,109,.82)) drop-shadow(0 -1px 0 rgba(255,230,109,.82));clip-path:polygon(50% 1%,90% 16%,93% 21%,86% 74%,82% 81%,54% 98%,46% 98%,18% 81%,14% 74%,7% 21%,10% 16%);opacity:0}.dcShieldPiece--left{clip-path:polygon(50% 0,52% 15%,44% 30%,54% 48%,43% 65%,50% 100%,14% 76%,6% 18%)}.dcShieldPiece--right{clip-path:polygon(50% 0,94% 18%,86% 76%,50% 100%,57% 65%,46% 48%,56% 30%,48% 15%)}.dcShieldLabel{position:relative;z-index:2;align-self:end;font-size:.82rem;font-weight:1000;letter-spacing:0}.dcShield strong{position:relative;z-index:2;align-self:start;font-size:2.25rem;line-height:1;text-shadow:0 2px 0 rgba(26,12,84,.78)}.outcomeBurst--success .dcShield,.outcomeBurst--criticalSuccess .dcShield{background:transparent;clip-path:none;animation-name:dcShieldBreak}.outcomeBurst--success .dcShield:before,.outcomeBurst--criticalSuccess .dcShield:before,.outcomeBurst--success .dcShield:after,.outcomeBurst--criticalSuccess .dcShield:after{display:none}.outcomeBurst--success .dcShieldPiece,.outcomeBurst--criticalSuccess .dcShieldPiece{opacity:1}.outcomeBurst--success .dcShieldPiece--left,.outcomeBurst--criticalSuccess .dcShieldPiece--left{animation:dcShieldPieceLeft 2.85s ease-out 1}.outcomeBurst--success .dcShieldPiece--right,.outcomeBurst--criticalSuccess .dcShieldPiece--right{animation:dcShieldPieceRight 2.85s ease-out 1}.outcomeBurst--success .dcShieldLabel,.outcomeBurst--criticalSuccess .dcShieldLabel,.outcomeBurst--success .dcShield strong,.outcomeBurst--criticalSuccess .dcShield strong{animation:dcShieldTextBreak 2.85s ease-out 1}.outcomeBurst--fail .dcShield,.outcomeBurst--criticalFail .dcShield{color:#ff91a6f5;filter:drop-shadow(0 0 16px rgba(255,91,116,.26)) drop-shadow(0 10px 18px rgba(0,0,0,.22));animation-name:dcShieldHold}.outcomeBurst--fail .dcShield:before,.outcomeBurst--criticalFail .dcShield:before{background:linear-gradient(180deg,#ff91a6f5,#ff3f5fd6)}.outcomeBurst--fail .dcShield:after,.outcomeBurst--criticalFail .dcShield:after{background:linear-gradient(180deg,#ff5b7438,#1a0c5429),#0b104bd6}.shieldImpact{z-index:4;width:118px;aspect-ratio:1;border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(255,244,160,.78),rgba(255,230,109,.26) 32%,transparent 68%);transform:translate(86px,-84px) scale(.2)}.outcomeBurst--success .shieldImpact,.outcomeBurst--criticalSuccess .shieldImpact{animation:shieldImpactWin 1.55s ease-out .82s 1}.outcomeBurst--fail .shieldImpact,.outcomeBurst--criticalFail .shieldImpact{background:radial-gradient(circle,rgba(255,91,116,.62),rgba(26,12,84,.28) 36%,transparent 68%);animation:shieldImpactFail 1.5s ease-out .82s 1}.shieldSpark,.reboundShard{--spark-angle: calc(var(--effect-index) * 38deg - 118deg);z-index:3;width:54px;height:4px;border-radius:999px;opacity:0;transform-origin:left center}.shieldSpark{background:linear-gradient(90deg,#ffe66d00,#ffe66dfa,#5bd8ff00);box-shadow:0 0 12px #ffe66d6b;transform:translate(86px,-84px) rotate(var(--spark-angle)) scaleX(.2);animation:shieldSparkFly 1.46s ease-out .98s 1;animation-delay:calc(.98s + var(--effect-index) * 58ms)}.reboundShard{background:linear-gradient(90deg,#ff5b7400,#ff5b74f5,#1a0c5400);box-shadow:0 0 12px #ff5b7452;transform:translate(82px,-82px) rotate(var(--spark-angle)) scaleX(.2);animation:reboundShardFly 1.44s ease-out .98s 1;animation-delay:calc(.98s + var(--effect-index) * 62ms)}.outcomeBurst--criticalSuccess .shieldSpark{width:72px;height:5px}.outcomeBurst--criticalFail .reboundShard{width:68px;height:5px}.criticalFlash{z-index:1;width:118%;aspect-ratio:1;border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(255,244,160,.72),rgba(255,230,109,.36) 26%,rgba(91,216,255,.16) 52%,transparent 76%);transform:translate(-50%,-50%) scale(.58);animation:criticalFlashWin 1.08s ease-out 1}.outcomeBurst--criticalFail .criticalFlash{background:radial-gradient(circle,rgba(255,56,92,.72),rgba(255,91,116,.32) 28%,rgba(26,12,84,.24) 52%,transparent 76%);animation-name:criticalFlashFail}.d20CanvasMount{position:relative;z-index:2;display:grid;width:100%;aspect-ratio:356 / 286;place-items:center}@keyframes criticalFlashWin{0%{opacity:0;transform:translate(-50%,-50%) scale(.58)}24%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}@keyframes combatTrailStrike{0%{opacity:0;transform:translate(-164px,-28px) rotate(-24deg) scaleX(.16)}16%,74%{opacity:1}to{opacity:0;transform:translate(54px,-86px) rotate(-24deg) scaleX(1)}}@keyframes combatTrailRebound{0%{opacity:0;transform:translate(-164px,-28px) rotate(-24deg) scaleX(.16)}18%,72%{opacity:.9}to{opacity:0;transform:translate(-72px,-98px) rotate(-24deg) scaleX(.72)}}@keyframes combatStrikeHit{0%{opacity:0;transform:translate(-168px,-50%) scale(.62)}16%{opacity:1}66%{opacity:1;transform:translate(74px,-94px) scale(1.12)}78%{opacity:1;transform:translate(90px,-102px) scale(.98)}to{opacity:0;transform:translate(98px,-104px) scale(.84)}}@keyframes combatStrikeBounce{0%{opacity:0;border-color:#ff5b74c7;background:radial-gradient(circle at 50% 42%,#ff5b7438,#ffaabc14 56%,#0b104be6 72%),#0b104bdb;transform:translate(-168px,-50%) scale(.62)}16%{opacity:1}60%{opacity:1;transform:translate(70px,-92px) scale(1.02)}78%{opacity:1;border-color:#ff5b74c7;background:radial-gradient(circle at 50% 42%,#ff5b7438,#ffaabc14 56%,#0b104be6 72%),#0b104bdb;transform:translate(-48px,-78%) scale(.86) rotate(-14deg)}80%{opacity:1;border-color:transparent;background:transparent;transform:translate(-48px,-78%) scale(.86) rotate(-14deg)}to{opacity:0;border-color:transparent;background:transparent;transform:translate(-112px,-112%) scale(.64) rotate(-24deg)}}@keyframes dcShieldEnter{0%{opacity:0;transform:scale(.72)}14%,88%{opacity:1}to{opacity:0;transform:scale(.92)}}@keyframes dcShieldBreak{0%{opacity:0;transform:scale(.72)}14%,62%{opacity:1;transform:scale(1)}78%{opacity:1;transform:scale(1.16) rotate(4deg);filter:drop-shadow(0 0 28px rgba(255,230,109,.5)) drop-shadow(0 10px 18px rgba(0,0,0,.22))}to{opacity:0;transform:scale(1.34) rotate(12deg)}}@keyframes dcShieldPieceLeft{0%{opacity:0;transform:translate(0) rotate(0)}14%,62%{opacity:1;transform:translate(0) rotate(0)}78%{opacity:1;transform:translate(-10px,2px) rotate(-8deg)}to{opacity:0;transform:translate(-42px,18px) rotate(-34deg)}}@keyframes dcShieldPieceRight{0%{opacity:0;transform:translate(0) rotate(0)}14%,62%{opacity:1;transform:translate(0) rotate(0)}78%{opacity:1;transform:translate(10px,-2px) rotate(8deg)}to{opacity:0;transform:translate(42px,-16px) rotate(34deg)}}@keyframes dcShieldTextBreak{0%,58%{opacity:1;transform:translateY(0) scale(1)}72%{opacity:.72;transform:translateY(-2px) scale(1.08)}to{opacity:0;transform:translateY(-12px) scale(.84)}}@keyframes dcShieldHold{0%{opacity:0;transform:scale(.72)}14%,74%{opacity:1;transform:scale(1)}86%{opacity:1;transform:scale(1.06) rotate(-3deg)}to{opacity:0;transform:scale(.92)}}@keyframes combatStrikeShardLeft{0%,78%{opacity:0;transform:translate(0) rotate(0)}80%{opacity:1;transform:translate(0) rotate(0)}88%{opacity:1;transform:translate(-10px,5px) rotate(-12deg)}to{opacity:0;transform:translate(-46px,26px) rotate(-44deg)}}@keyframes combatStrikeShardRight{0%,78%{opacity:0;transform:translate(0) rotate(0)}80%{opacity:1;transform:translate(0) rotate(0)}88%{opacity:1;transform:translate(10px,-5px) rotate(12deg)}to{opacity:0;transform:translate(46px,-26px) rotate(44deg)}}@keyframes combatStrikeValueBreak{0%,76%{opacity:1;transform:scale(1)}88%{opacity:.8;transform:scale(1.14) rotate(-4deg)}to{opacity:0;transform:scale(.62) rotate(-18deg)}}@keyframes shieldImpactWin{0%{opacity:0;transform:translate(86px,-84px) scale(.2)}26%{opacity:1}to{opacity:0;transform:translate(86px,-84px) scale(1.22)}}@keyframes shieldImpactFail{0%{opacity:0;transform:translate(86px,-84px) scale(.28)}20%{opacity:.92}to{opacity:0;transform:translate(62px,-84px) scale(.94)}}@keyframes shieldSparkFly{0%{opacity:0;transform:translate(86px,-84px) rotate(var(--spark-angle)) scaleX(.2)}18%,54%{opacity:1}to{opacity:0;transform:translate(86px,-84px) rotate(var(--spark-angle)) translate(112px) scaleX(1)}}@keyframes reboundShardFly{0%{opacity:0;transform:translate(82px,-82px) rotate(var(--spark-angle)) scaleX(.2)}16%,52%{opacity:1}to{opacity:0;transform:translate(20px,-102px) rotate(var(--spark-angle)) translate(-104px) scaleX(.86)}}@keyframes criticalFlashFail{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}18%{opacity:.95}to{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}@keyframes diceStageMisfire{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}62%{transform:translate(-3px)}82%{transform:translate(2px)}}@keyframes diceStageCriticalWin{0%,to{transform:scale(1)}34%{transform:scale(1.075)}62%{transform:scale(.985)}}@keyframes diceStageCriticalFail{0%,to{transform:translate(0) scale(1)}16%{transform:translate(-7px) scale(1.02)}32%{transform:translate(7px) scale(1.02)}50%{transform:translate(-5px) scale(.99)}68%{transform:translate(4px) scale(1.01)}}.d20CanvasMount canvas{width:100%;height:100%;display:block}.cssD20Scene{--d20-face-width: 100px;--d20-face-height: 86.6px;--d20-radius: 70.6px;position:relative;z-index:2;display:grid;width:260px;height:220px;place-items:center;perspective:860px}.cssD20{position:relative;width:150px;height:150px;transform-style:preserve-3d;transform-origin:50% 54%}.cssD20Settled{transform:rotateX(-18deg) rotateY(-24deg) rotate(4deg)}.cssD20Rolling{animation:cssD20Roll 3s cubic-bezier(.22,.75,.2,1) forwards}.cssD20Face{position:absolute;top:50%;left:50%;width:var(--d20-face-width);height:var(--d20-face-height);margin-top:calc(var(--d20-face-height) / -2);margin-left:calc(var(--d20-face-width) / -2);clip-path:polygon(50% 0,100% 100%,0 100%);transform-origin:50% 66.6%;background:linear-gradient(150deg,#fffffff5,#c1c4c8eb 48%,#5b5e65f2),#d9d9d9;box-shadow:inset 0 0 0 1px #1414146b,inset 0 -20px 28px #0003;backface-visibility:hidden}.cssD20Face:after{position:absolute;top:8px;right:9px;bottom:12px;left:9px;clip-path:inherit;border:1px solid rgba(12,12,12,.18);content:""}.cssD20Face span{position:absolute;top:64%;left:50%;z-index:2;color:#111111e0;font-family:Georgia,Times New Roman,serif;font-size:1.35rem;font-weight:900;transform:translate(-50%,-50%)}.cssD20Result{position:absolute;top:50%;left:50%;display:grid;width:78px;height:62px;place-items:center;border-radius:16px;color:#111;background:#ffffffbd;box-shadow:0 12px 28px #0000002e;font-family:Georgia,Times New Roman,serif;font-size:3rem;font-weight:900;opacity:1;transform:translate(-50%,-50%) translateZ(120px)}.cssD20Rolling .cssD20Result{opacity:0}@keyframes cssD20Roll{0%{transform:translate3d(-58px,-6px,0) rotateX(52deg) rotateY(-38deg) rotate(0)}24%{transform:translate3d(-24px,-34px,28px) rotateX(144deg) rotateY(96deg) rotate(82deg)}52%{transform:translate3d(40px,-12px,12px) rotateX(236deg) rotateY(178deg) rotate(142deg)}76%{transform:translate3d(10px,4px,0) rotateX(306deg) rotateY(248deg) rotate(184deg)}to{transform:translateZ(0) rotateX(342deg) rotateY(336deg) rotate(364deg)}}@keyframes diceShadowRoll{0%{opacity:.22;transform:translate(-74px) scale(.7)}25%{opacity:.12;transform:translate(-28px) scale(.48)}52%{opacity:.32;transform:translate(38px) scale(.84)}to{opacity:.48;transform:translate(0) scale(.96)}}.resultPanel.success{background:linear-gradient(180deg,#18567ec2,#0a1252db) padding-box,linear-gradient(135deg,#5bd8ff,#ff5be7) border-box}.resultPanel.fail{background:linear-gradient(180deg,#551f69c2,#0a1252db) padding-box,linear-gradient(135deg,#ff5be7,#ffd33f) border-box}.deltaPanel{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.deltaPanel span{color:var(--color-muted)}.deltaPanel .levelDelta span{color:var(--color-accent)}.deltaPanel strong{color:var(--color-accent);font-size:1.4rem}.levelDelta{display:inline-flex;align-items:center;gap:6px}.levelDelta img{width:1.25rem;height:1.25rem;object-fit:contain;transform:translateY(1px)}.rewardUnlock,.rewardDetail{display:grid;gap:var(--space-3);width:100%;padding:var(--space-5);border:2px solid transparent;border-radius:28px;background:linear-gradient(180deg,#271575e6,#09104cd6) padding-box,linear-gradient(135deg,#ff58e6b8,#5bd8ffb8) border-box;box-shadow:inset 0 3px #ffffff24,inset 0 -7px #050a3647,0 14px 28px #04061e4d,0 0 18px #ff4ade29;color:var(--color-ink);text-align:left}.dcBadge{position:absolute;bottom:14px;left:50%;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid rgba(255,211,63,.46);border-radius:999px;background:linear-gradient(180deg,#ffd33f2e,#ff5be71f),#0a0e44b8;box-shadow:inset 0 1px #ffffff29,0 0 16px #ffd33f2e;transform:translate(-50%)}.dcBadge span{color:var(--color-accent-2);font-size:1rem;font-weight:1000;line-height:1}.dcBadge strong{color:var(--color-accent);font-size:1rem;line-height:1}.rewardUnlock{cursor:pointer}.rewardUnlockList{display:grid;gap:var(--space-4)}.rewardUnlock img,.rewardDetail img{width:100%;height:auto;border-radius:var(--radius-sm);background:transparent;display:block}.rewardImageFallback{width:100%;border-radius:var(--radius-sm);object-fit:contain;background:#19171299}.rewardUnlock img,.rewardDetail img{max-height:none}.rewardImageFallback-large,.rewardImageFallback-detail{display:grid;min-height:260px;place-items:center;padding:var(--space-5);border:1px dashed var(--color-line)}.rewardImageFallback-detail{min-height:52vh}.rewardImageFallback span{color:var(--color-muted);font-weight:900;letter-spacing:.08em;text-align:center;text-transform:uppercase}.rewardUnlock h3,.rewardUnlock p,.rewardDetail h2,.rewardDetail p{margin:0}.rewardUnlock div,.rewardDetail div{display:grid;gap:var(--space-2)}.rewardUnlock p,.rewardDetail p{color:var(--color-muted);line-height:1.45}.rewardTile span{font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.filterBar{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}.filterBar button{min-height:38px;border:2px solid rgba(111,215,255,.38);border-radius:999px;color:var(--color-muted);background:#0b104b85;box-shadow:inset 0 1px #ffffff1a;font-weight:900;cursor:pointer}.filterBar button.active{color:#241044;border-color:#ff5be7;background:linear-gradient(180deg,#fff174,#ffaf24);box-shadow:inset 0 2px #ffffff80,0 0 14px #ff5be747;font-weight:900}.rewardGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.rewardTile{position:relative;display:grid;min-height:168px;align-content:end;padding:var(--space-3);overflow:hidden;border:2px solid rgba(111,215,255,.38);border-radius:20px;color:var(--color-ink);text-align:left;cursor:pointer;box-shadow:0 10px 22px #04061e47,0 0 14px #5bd8ff14}.rewardTile:after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:linear-gradient(180deg,transparent 25%,rgba(25,23,18,.82));content:""}.rewardTile img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.rewardTile .rewardImageFallback{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;width:100%;height:100%;place-items:center;padding:var(--space-3);border-radius:0;background:linear-gradient(135deg,rgba(102,209,192,.22),transparent),#272219f2}.rewardTile span{position:relative;z-index:2}.rewardTile.locked{color:var(--color-muted);background:repeating-linear-gradient(135deg,rgba(247,239,225,.06) 0 8px,transparent 8px 16px),#272219bf}.emptyState{padding:var(--space-5);border:2px solid rgba(111,215,255,.38);border-radius:26px;background:#0b104b94;box-shadow:inset 0 2px #ffffff1f,0 0 18px #5bd8ff1f}.emptyState h3,.emptyState p{margin:0}.emptyState p{margin-top:var(--space-2);color:var(--color-muted);line-height:1.45}.loadingState{display:grid;align-content:center}.devTools{display:grid;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-3);border:1px dashed rgba(255,106,85,.55);border-radius:var(--radius-sm);background:#ff6a5514}.devTools p{margin:0;color:var(--color-danger);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.devTools div{display:grid;grid-template-columns:1fr;gap:var(--space-2)}.devTools button{min-height:38px;border:1px solid rgba(255,106,85,.42);border-radius:var(--radius-sm);color:var(--color-ink);background:#1917126b;cursor:pointer}.devExportField{width:100%;min-height:180px;padding:var(--space-3);border:1px solid rgba(255,106,85,.42);border-radius:var(--radius-sm);color:var(--color-ink);background:#191712b8;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.72rem;line-height:1.45;resize:vertical}.calibrationScreen{display:grid;gap:var(--space-4)}.calibrationSelect{display:grid;gap:var(--space-2);color:var(--color-muted);font-size:.82rem;font-weight:800}.calibrationSelect select{min-height:44px;padding:0 var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-sm);color:var(--color-ink);background:var(--color-panel);font:inherit}.calibrationDiceStage{justify-self:center}.calibrationControls{display:grid;gap:var(--space-2)}.calibrationControls h3{margin:var(--space-3) 0 var(--space-1);color:var(--color-accent-2);font-size:.74rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.calibrationRow{display:grid;grid-template-columns:1fr auto auto;gap:var(--space-2);align-items:center;padding:var(--space-2);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:#f7efe10a}.calibrationRow span{color:var(--color-muted);font-size:.82rem;font-weight:800}.calibrationRow button{min-width:62px;min-height:36px;border:1px solid var(--color-line);border-radius:var(--radius-sm);color:var(--color-ink);background:#f7efe10f}.calibrationHint{margin:0;color:var(--color-muted);line-height:1.5}.compactCalibrationSelect{padding:var(--space-2);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:#f7efe10a}@media (max-width: 370px){.phoneFrame{padding:var(--space-4);border-radius:22px}.statusPanel,.collectionPreview{align-items:flex-start;flex-direction:column}.filterBar{grid-template-columns:repeat(2,1fr)}}