@import"https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap";:root{--ink: #11468C;--ink-hover: #0D3672;--ink-deep: #07254E;--paper-page: #FAFBFC;--paper-card: #F4F6F9;--paper-nested: #ECEFF3;--paper-white: #FFFFFF;--graphite-strong: #1A1E26;--graphite-body: #2C323C;--graphite-muted: #5E646E;--graphite-rgb: 26, 30, 38;--rule: #E4E8EE;--rule-heavy: #D4DAE3;--bg-cream: var(--paper-page);--panel-bg: var(--paper-white);--text-dark: var(--graphite-strong);--text-muted: var(--graphite-muted);--primary-color: var(--ink);--primary-hover: var(--ink-hover);--border-light: var(--rule);--color-alpha: #e6a23e;--color-beta: #7d8bd4;--color-gamma: #4eb89c;--alpha-text: #9c6a12;--beta-text: #505ea5;--gamma-text: #1f7d66;--font-main: "Noto Sans KR", system-ui, -apple-system, sans-serif;--font-display: "Noto Sans KR", system-ui, -apple-system, sans-serif;--font-mono: "Noto Sans KR", system-ui, -apple-system, sans-serif;--radius-btn: 4px;--radius-input: 4px;--radius-card: 8px;--radius-lg: 12px;--radius-pill: 999px;--shadow-soft: 0 4px 12px -2px rgba(17, 70, 140, .08);--shadow-card: 0 4px 12px -2px rgba(17, 70, 140, .06);--shadow-active: 0 4px 12px -2px rgba(17, 70, 140, .12);--eyebrow-tracking: .08em}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--paper-page);color:var(--graphite-body);font-family:var(--font-main);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:20px 10px}#root{width:100%;max-width:480px;min-height:80vh;display:flex;flex-direction:column}.container{width:100%;background:var(--paper-card);border-radius:var(--radius-card);padding:28px 20px;border:1px solid var(--rule);display:flex;flex-direction:column;align-items:center;animation:fadeIn .42s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}h1{font-family:var(--font-display);font-size:2.05rem;font-weight:600;color:var(--graphite-strong);margin-bottom:8px;text-align:center;letter-spacing:-.01em;line-height:1.2}.tagline{font-size:.9375rem;color:var(--graphite-muted);text-align:center;margin-bottom:30px;line-height:1.55}.section-title{font-size:1.05rem;font-weight:600;color:var(--graphite-strong);margin-bottom:16px;align-self:flex-start;width:100%;letter-spacing:-.01em}.btn{width:100%;padding:14px 16px;background-color:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:var(--radius-btn);font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s ease-out,border-color .2s ease-out,transform .2s ease-out;display:flex;justify-content:center;align-items:center;gap:8px;font-family:var(--font-main)}.btn:hover:not(:disabled){background-color:var(--ink-hover);border-color:var(--ink-hover)}.btn:active:not(:disabled){transform:translateY(1px);background-color:var(--ink-deep);border-color:var(--ink-deep)}.btn:disabled{background-color:var(--paper-nested);border-color:var(--rule);color:var(--graphite-muted);cursor:not-allowed;opacity:.7}.btn-secondary{background-color:var(--paper-white);color:var(--graphite-body);border:1px solid var(--rule-heavy)}.btn-secondary:hover:not(:disabled){background-color:var(--paper-white);border-color:var(--ink);color:var(--ink);transform:none}.btn-secondary:active:not(:disabled){background-color:var(--paper-nested);transform:translateY(1px)}.btn-secondary:disabled{background-color:var(--paper-card)}.btn-danger{background-color:#b0473d;border-color:#b0473d}.btn-danger:hover:not(:disabled){background-color:#9b3c33;border-color:#9b3c33}.btn-danger:active:not(:disabled){background-color:#87332b;border-color:#87332b}.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;margin-bottom:24px}.draft-locked{opacity:.3;filter:grayscale(.7);pointer-events:none}.draft-tutorial-banner{width:100%;background:#11468c0f;border:1px solid var(--rule);border-radius:var(--radius-card);padding:12px 14px;margin-bottom:16px;font-size:.9rem;color:var(--graphite-body);line-height:1.5}.tutorial-poke{border-radius:var(--radius-card);animation:tutorial-poke-pulse 1.1s ease-in-out infinite}@keyframes tutorial-poke-pulse{0%,to{box-shadow:0 0 #7d8bd400}50%{box-shadow:0 0 0 5px #7d8bd480}}.card{background:var(--paper-white);border:1px solid var(--rule);border-radius:var(--radius-card);padding:12px;position:relative;cursor:pointer;transition:border-color .2s ease-out,transform .2s ease-out;display:flex;flex-direction:column;justify-content:space-between;min-height:100px}.card:hover{transform:translateY(-2px);border-color:var(--ink)}.card.selected{border-color:var(--color-alpha);background-color:#f6a8210a}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.card-id{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--graphite-strong);letter-spacing:.02em}.badge{font-family:var(--font-mono);font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:var(--eyebrow-tracking)}.badge-a{background:#f6a82126;color:#9c6a12}.badge-b{background:#7d8bd426;color:#505ea5}.badge-c{background:#46c2a526;color:#23856d}.card-body{display:flex;flex-direction:column;gap:6px}.action-chip{display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:600;padding:4px 8px;border-radius:var(--radius-btn);border:1px solid currentColor;background-color:var(--paper-white);white-space:nowrap}.arrange-list{display:flex;flex-direction:column;gap:10px;width:100%;margin-bottom:24px}.arrange-item{display:flex;align-items:center;background:var(--paper-white);border:1px solid var(--rule);border-radius:var(--radius-card);padding:10px 14px;gap:12px}.arrange-num{font-family:var(--font-mono);font-size:1.05rem;font-weight:600;color:var(--ink);width:24px}.arrange-card-info{flex-grow:1;display:flex;align-items:center;gap:10px}.arrange-card-id{font-family:var(--font-mono);font-size:.82rem;font-weight:600;min-width:60px}.arrange-chips,.arrange-controls{display:flex;gap:4px}.btn-arrow{background:var(--paper-white);border:1px solid var(--rule-heavy);color:var(--graphite-body);font-size:.8rem;width:28px;height:28px;border-radius:var(--radius-btn);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out}.btn-arrow:hover{background-color:var(--ink);color:#fff;border-color:var(--ink)}.btn-arrow:disabled{opacity:.3;cursor:not-allowed}.battle-screen{display:flex;flex-direction:column;overflow:hidden}.battle-topbar{flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:8px}.battle-topbar .section-title{grid-column:2;margin:0;width:auto;white-space:nowrap;text-align:center}.battle-log-btn{grid-column:3;justify-self:start;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--rule);border-radius:var(--radius-btn, 8px);background:var(--paper-white);color:var(--text-muted);font-size:.82rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.battle-log-btn:hover{background:var(--paper-nested);color:var(--text-dark);border-color:var(--rule-heavy, var(--rule))}.battle-res{position:absolute;top:4px;z-index:2;pointer-events:none}.battle-res-me{left:4px}.battle-res-op{right:4px}.battle-res-bank{left:50%;transform:translate(-50%)}.battle-res-cluster{display:flex;gap:10px;padding:4px 9px;border-radius:10px;border:1.5px solid var(--rule);background:var(--paper-white);box-shadow:0 1px 2px rgba(var(--graphite-rgb),.06)}.battle-res-cluster.me{border-color:var(--color-beta);background:color-mix(in srgb,var(--color-beta) 8%,var(--paper-white))}.battle-res-cluster.op{border-color:var(--color-alpha);background:color-mix(in srgb,var(--color-alpha) 8%,var(--paper-white))}.battle-res-cluster.shared{border-color:var(--rule-heavy, var(--rule))}.battle-res-cell{display:flex;flex-direction:column;align-items:center;line-height:1;gap:2px}.battle-res-num{font-size:.74rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-dark)}.battle-scoreboard{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 16px;margin-bottom:8px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}.bs-side{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:72px}.bs-label{font-size:.72rem;font-weight:600;color:var(--text-muted)}.bs-side.bs-me .bs-label{color:var(--beta-text)}.bs-side.bs-op .bs-label{color:var(--alpha-text)}.bs-vp{display:inline-flex;align-items:center;gap:4px;font-size:1.6rem;font-weight:900;font-variant-numeric:tabular-nums;color:var(--graphite-strong)}.bs-meta{display:flex;align-items:center;gap:16px}.bs-meta-item{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-muted)}.battle-screen .battle-gears{position:relative;flex:1 1 auto;min-height:140px;display:flex;align-items:center;justify-content:center;margin:0}.battle-gears .gears-svg{width:100%;height:100%;max-width:600px}.battle-controls{flex:0 0 auto;display:flex;gap:8px;width:100%;margin-top:8px}.battle-controls .btn{min-height:48px}.battle-result-btn{flex:0 0 auto;width:100%;min-height:48px;margin-top:8px}.battle-detail-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(var(--graphite-rgb),.42);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}.battle-detail-modal{background:var(--paper-white);border-radius:var(--radius-card);padding:16px;width:100%;max-width:460px;max-height:84dvh;overflow-y:auto;box-shadow:0 8px 24px rgba(var(--graphite-rgb),.16)}.battle-detail-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.net-battle-footer{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px}.net-battle-status{font-size:.9rem;color:var(--text-dark);text-align:center}.net-battle-substatus{font-size:.82rem;color:var(--text-muted)}.net-battle-winner{font-weight:700;font-size:1.15rem;text-align:center}.net-battle-leave{width:100%;min-height:48px;margin-top:4px}.battle-detail-head h3{margin:0;font-size:1rem;white-space:nowrap}.battle-detail-head .btn{flex:0 0 auto;width:auto;padding:6px 14px;font-size:.85rem}.battle-status-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;margin-top:16px}.status-panel{background:var(--paper-white);border:1px solid var(--rule);border-radius:var(--radius-card);padding:10px 12px;display:flex;flex-direction:column}.status-panel.me .panel-header{color:var(--beta-text)}.status-panel.op .panel-header{color:var(--alpha-text)}.panel-header{font-family:var(--font-mono);font-size:.7rem;color:var(--graphite-muted);font-weight:600;text-transform:uppercase;letter-spacing:var(--eyebrow-tracking);margin-bottom:6px}.vp-display{font-family:var(--font-mono);font-size:1.45rem;font-weight:900;color:var(--graphite-strong)}.inventory-row{display:flex;gap:8px;margin-top:6px}.inv-badge{font-size:.75rem;font-weight:600;padding:2px 6px;border-radius:6px;color:#fff}.inv-badge.alpha{background-color:var(--color-alpha)}.inv-badge.beta{background-color:var(--color-beta)}.inv-badge.gamma{background-color:var(--color-gamma)}.rondel-container{width:100%;display:flex;justify-content:center;margin:16px 0;position:relative}.rondel-svg{width:100%;max-width:230px;height:auto}.rondel-center-text{font-family:var(--font-main);text-anchor:middle;dominant-baseline:middle}.rondel-cell-pair{cursor:pointer}.rondel-cell-pair path{transition:fill .2s ease,stroke-width .2s ease}.shared-counters{width:100%;display:flex;justify-content:space-around;background:var(--paper-white);border:1px solid var(--rule);border-radius:var(--radius-card);padding:12px;margin-bottom:16px}.counter-item{display:flex;flex-direction:column;align-items:center}.counter-label{font-family:var(--font-mono);font-size:.68rem;color:var(--graphite-muted);font-weight:600;text-transform:uppercase;letter-spacing:var(--eyebrow-tracking);margin-bottom:4px}.counter-value{font-family:var(--font-mono);font-size:1.2rem;font-weight:600;color:var(--graphite-strong)}.event-feed-container{width:100%;border:1px solid var(--rule);border-radius:var(--radius-card);background:var(--paper-nested);padding:12px;margin-bottom:20px;height:clamp(160px,38vh,440px);overflow-y:auto;display:flex;flex-direction:column;gap:6px}.event-row{font-size:.8rem;line-height:1.4;padding:4px 8px;border-radius:var(--radius-btn);background:var(--paper-white);animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.event-row.me{color:#505ea5}.event-row.op{color:#9c6a12}.event-row.fizzle{opacity:.7}.event-row.evaporated{color:#c0344a}.replay-textarea{width:100%;height:80px;font-family:var(--font-mono);font-size:.75rem;border:1px solid var(--rule-heavy);border-radius:var(--radius-input);padding:8px;background-color:var(--paper-nested);color:var(--graphite-body);resize:none;margin-top:10px;margin-bottom:20px}.seed-box{background:var(--paper-nested);border:1px solid var(--rule);border-radius:var(--radius-input);padding:8px 12px;font-family:var(--font-mono);font-size:.82rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--eyebrow-tracking);color:var(--graphite-muted);margin-bottom:24px}.seed-box span{color:var(--graphite-strong);font-family:var(--font-mono);text-transform:none;letter-spacing:0}.card-face-redesign{background:transparent;border:none;box-shadow:none;min-height:0;padding:4px;position:relative;transition:transform .2s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;align-items:center;gap:6px}.card-face-redesign:hover{transform:scale(1.05)}.card-face-redesign.selected .character-art-placeholder,.card-face-redesign.selected .creature-img{box-shadow:0 0 12px #f6a821cc,0 0 0 2.5px var(--color-alpha);border-color:var(--color-alpha)}.card-face-redesign.selected{transform:scale(1.04);filter:drop-shadow(0 6px 14px rgba(246,168,33,.35))}.card-face-redesign.selected-mulligan .character-art-placeholder,.card-face-redesign.selected-mulligan .creature-img{box-shadow:0 0 12px #ef4444cc,0 0 0 2.5px #ef4444;border-color:#ef4444}.creature-art{width:72px;height:72px;display:flex;justify-content:center;align-items:center}.creature-img{width:100%;height:100%;object-fit:contain;display:block;border-radius:50%;background:transparent;border:none}.character-art-placeholder{width:100%;height:100%;border-radius:50%;background:transparent;display:flex;justify-content:center;align-items:center;position:relative;border:none;transition:all .2s ease}.character-art-placeholder svg{width:80%;height:80%}.creature-effects{background-color:var(--paper-nested);border:1px solid var(--rule);border-radius:var(--radius-card);padding:4px 6px;display:flex;flex-direction:column;gap:3px;width:fit-content;align-items:center;justify-content:center}.slot-chip{display:flex;align-items:center;justify-content:center;gap:3px;padding:0;background:transparent!important;border:none!important;white-space:nowrap}.effect-badge-pop{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,calc(-100% - 12px))}.effect-badge-pop .creature-effects{background-color:var(--paper-white);box-shadow:0 6px 18px -4px #11468c40}.slot-chip .exchange-icon{color:var(--text-muted);opacity:.8}.meshed-gears-container{position:static;width:100%;display:flex;justify-content:center;align-items:center;background:var(--paper-nested);border-radius:var(--radius-lg);padding:clamp(4px,1.5vw,10px);margin:clamp(8px,2vw,15px) 0;border:1px solid var(--rule);overflow:hidden}.gears-svg{width:100%;max-width:440px;height:auto;max-height:min(46vh,360px)}.gear-rim{transition:transform .4s cubic-bezier(.25,.8,.25,1);transform-origin:center}.gear-tooth{stroke-width:2px}.player-gear .gear-tooth{stroke:var(--color-beta);fill:#7d8bd426}.opponent-gear .gear-tooth{stroke:var(--color-alpha);fill:#f6a82126}.active-zone-glow{animation:pulseGlow 2s infinite ease-in-out}@keyframes pulseGlow{0%,to{opacity:.6;r:70px}50%{opacity:.9;r:76px}}.gear-text{font-weight:700;fill:var(--text-dark);font-family:var(--font-main);pointer-events:none}.num-pos{color:#d64545!important;font-weight:900}.num-neg{color:#3b6fd4!important;font-weight:900}.interactive-gear-svg{width:100%;max-width:220px;height:auto;margin:20px 0}.interactive-slot{cursor:pointer;transition:all .2s ease}.interactive-slot:hover circle{fill:#11468c14;stroke:var(--ink-hover)}.interactive-slot.selected circle{fill:#7d8bd426;stroke:var(--color-beta);stroke-dasharray:4,4}.interactive-slot.filled circle{fill:#fff;stroke:var(--color-beta)}.arrange-hand-container{width:100%;margin-top:15px;margin-bottom:25px}.hand-title{font-size:.9rem;font-weight:600;color:var(--text-muted);margin-bottom:8px}.hand-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.hand-card-wrapper{cursor:pointer;position:relative;transition:transform .2s ease}.hand-card-wrapper:hover{transform:translateY(-2px)}.hand-card-wrapper.selected .character-art-placeholder,.hand-card-wrapper.selected .creature-img{box-shadow:0 0 12px #7d8bd4cc,0 0 0 2.5px var(--color-beta);border-color:var(--color-beta)}.hand-card-wrapper.placed{opacity:.4;cursor:not-allowed}.interactive-slot.tutorial-target circle{stroke:#e3b341;stroke-width:3;filter:drop-shadow(0 0 4px rgba(227,179,65,.9));animation:arrange-target-pulse 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes arrange-target-pulse{0%,to{opacity:.5}50%{opacity:1}}.placement-screen{max-width:100%;--cw: 120px;display:flex;flex-direction:column;overflow:hidden}@media (min-width: 720px){.placement-screen{--cw: 150px}}.placement-topbar{order:0;flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}.placement-topbar .section-title{margin:0;width:auto;flex:0 1 auto;white-space:nowrap}.placement-status{display:inline-flex;align-items:baseline;gap:16px}.placement-round{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-muted)}.placement-timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--text-dark)}.placement-timer.urgent{color:#d92d3a}.placement-opp-hint{font-size:.82rem;color:var(--text-muted)}.placement-gears{order:1;flex:1 1 auto;min-height:130px;display:flex;align-items:center;justify-content:center;margin:0;padding:8px}.placement-gears .gears-svg{width:100%;height:100%;max-width:560px}.placement-side{display:contents}.placement-side-title{display:none}.team-archetype-counter{order:2;flex:0 0 auto;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;margin:8px 0}.tac-item{display:inline-flex;align-items:center;gap:6px;color:var(--text-dark)}.tac-name{font-size:.86rem}.tac-count{font-weight:700;font-variant-numeric:tabular-nums}.effect-badge-archetype{font-weight:700;font-size:.82rem;margin-bottom:4px;color:var(--text-dark)}.placement-hand{order:3;flex:0 0 auto}.placement-hand .hand-title{margin:0 0 8px;text-align:center;font-size:.95rem;color:var(--text-muted)}.placement-carousel-wrap{position:relative;display:flex;align-items:center;gap:8px}.placement-carousel{display:flex;gap:8px;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:16px calc(50% - var(--cw) / 2);scrollbar-width:none}.placement-carousel::-webkit-scrollbar{display:none}.carousel-card{flex:0 0 var(--cw);width:var(--cw);scroll-snap-align:center;transform:scale(.8);opacity:.45;transition:transform .2s ease,opacity .2s ease;cursor:pointer}.carousel-card.is-center{transform:scale(1.08);opacity:1}.carousel-card.is-center.draft-locked{opacity:.6}.carousel-arrow{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);background:var(--paper-white);color:var(--text-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s ease}.carousel-arrow:hover{background:var(--paper-nested)}@media (max-width: 719px){.carousel-arrow{display:none}}.placement-confirm{order:4;flex:0 0 auto;width:100%;max-width:420px;min-height:48px;margin:16px auto 0}@media (min-width: 900px){.placement-screen{display:grid;grid-template-columns:minmax(0,1fr) clamp(248px,26%,320px);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top      top" "gears    side" "carousel carousel";column-gap:32px;row-gap:16px}.placement-topbar{grid-area:top}.placement-gears{grid-area:gears}.placement-gears .gears-svg{max-width:680px}.placement-hand{grid-area:carousel}.placement-side{display:flex;flex-direction:column;justify-content:center;grid-area:side;gap:16px}.placement-side-title{display:block;font-weight:700;font-size:.95rem;color:var(--text-dark);padding-bottom:8px;border-bottom:1px solid var(--rule)}.team-archetype-counter{flex-direction:column;align-items:stretch;gap:12px;margin:0}.tac-item{width:100%;gap:8px}.tac-name{margin-right:auto}.placement-confirm{margin:8px 0 0;max-width:none}}#root:has(.battle-screen){max-width:860px}.battle-screen{max-width:860px}.battle-cols{width:100%;display:flex;flex-direction:column;gap:0}@media (min-width: 760px){.battle-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}}body{padding:clamp(8px,2vw,24px) 10px}.container{padding:clamp(18px,3vw,28px) clamp(14px,2.5vw,22px);border-radius:var(--radius-card)}#root{transition:max-width .3s ease}#root:has(.draft-screen),#root:has(.reveal-screen){max-width:960px}#root:has(.arrange-screen){max-width:820px}#root:has(.placement-screen){max-width:1120px}#root:has(.tutorial-screen){max-width:900px}.draft-screen .card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(8px,1.5vw,14px)}.reveal-screen .reveal-card-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.arrange-screen .hand-cards-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}@media (min-width: 760px){.reveal-screen .reveal-split-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px}}.arrange-gears{position:relative;margin:8px 0 14px}.arrange-gear-hint{position:absolute;right:10px;bottom:8px;max-width:calc(100% - 20px);font-size:.62rem;color:var(--text-muted);opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.arrange-predict-note{font-size:.74rem;color:var(--text-muted);margin:0 0 8px;line-height:1.35}.arrange-fields{width:100%;display:flex;flex-direction:column;gap:18px;margin-bottom:22px}.arrange-field .hand-title{margin-bottom:8px}@media (min-width: 720px){.arrange-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}}.arrange-gear-legend{width:100%;max-width:460px;margin:2px auto 16px;font-size:.78rem;color:var(--text-muted)}.arrange-gear-legend-title{font-weight:700;color:var(--text-dark);margin-bottom:5px}.arrange-gear-legend ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.arrange-gear-legend li{display:flex;align-items:center;gap:6px}.arrange-gear-legend .lg-ico{display:inline-flex;align-items:center;gap:1px;flex-shrink:0}.title-screen h1{font-size:clamp(1.8rem,6vw,2.6rem)}.result-screen .replay-textarea{width:100%;margin-left:auto;margin-right:auto}.result-screen>div[style*="display: flex"]{flex-wrap:wrap!important;gap:12px!important}img,svg{max-width:100%}#root{min-width:0}.app-shell{width:100%;display:flex;flex-direction:column}.app-shell .container{font-size:calc(1rem * var(--ui-scale, 1))}.view-wipe{width:100%;animation:viewWipe .32s ease-out}@keyframes viewWipe{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}.main-menu-screen{text-align:center}.menu-logo{margin:24px 0 16px;display:flex;justify-content:center}.menu-buttons{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:8px}.menu-badge-soon{margin-left:8px;font-family:var(--font-mono);font-size:.65rem;font-weight:600;padding:2px 8px;border-radius:var(--radius-pill);background:var(--paper-nested);color:var(--graphite-muted);text-transform:uppercase;letter-spacing:var(--eyebrow-tracking)}.settings-screen{align-items:stretch}.settings-group{width:100%;background:var(--paper-white);border:1px solid var(--rule);border-radius:var(--radius-card);padding:14px;margin-bottom:16px;display:flex;flex-direction:column;gap:8px}.settings-group-title{font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--graphite-muted);text-transform:uppercase;letter-spacing:var(--eyebrow-tracking);margin-bottom:4px}.settings-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:10px 12px;background:var(--paper-nested);border:1px solid var(--rule);border-radius:var(--radius-input);cursor:pointer;font-family:var(--font-main);text-align:left;transition:border-color .2s ease-out,background .2s ease-out}.settings-toggle:hover{border-color:var(--ink)}.settings-toggle-text{display:flex;flex-direction:column;gap:2px}.settings-toggle-label{font-size:.95rem;font-weight:600;color:var(--text-dark)}.settings-toggle-hint{font-size:.75rem;color:var(--text-muted)}.settings-switch{flex-shrink:0;width:46px;height:26px;border-radius:var(--radius-pill);background:var(--rule-heavy);position:relative;transition:background .2s ease-out}.settings-toggle.on .settings-switch{background:var(--color-gamma)}.settings-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(var(--graphite-rgb),.2);transition:transform .2s ease}.settings-toggle.on .settings-knob{transform:translate(20px)}.settings-scale-row{display:flex;gap:8px;flex-wrap:wrap}.settings-scale-btn{flex:1;min-width:64px;min-height:44px;padding:10px;border-radius:var(--radius-btn);border:1px solid var(--rule-heavy);background:var(--paper-white);color:var(--graphite-body);font-family:var(--font-main);font-weight:600;cursor:pointer;transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out}.settings-scale-btn:hover{border-color:var(--ink)}.settings-scale-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}.card-face-redesign.flip .creature-art{animation:cardFlip .36s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d}@keyframes cardFlip{0%{transform:rotateY(0) scale(1)}45%{transform:rotateY(90deg) scale(1.06)}55%{transform:rotateY(-90deg) scale(1.06)}to{transform:rotateY(0) scale(1)}}.score-pop{position:absolute;left:50%;top:-2px;transform:translate(-50%);font-size:1rem;font-weight:900;pointer-events:none;white-space:nowrap;text-shadow:0 1px 2px rgba(255,255,255,.8);animation:scorePop .9s ease-out forwards}@keyframes scorePop{0%{opacity:0;transform:translate(-50%,4px) scale(.8)}20%{opacity:1;transform:translate(-50%,-10px) scale(1.1)}to{opacity:0;transform:translate(-50%,-34px) scale(1)}}.btn{min-height:48px}.btn-arrow{min-width:44px;min-height:44px}@media (max-width: 768px){.menu-buttons{gap:10px}.settings-scale-btn{flex-basis:calc(50% - 4px)}}@media (max-width: 480px){.container{border-radius:var(--radius-card)}.menu-buttons .btn{font-size:1rem}.settings-toggle-hint{font-size:.72rem}.battle-screen .btn{font-size:.95rem}}@media (max-width: 520px){.battle-status-grid{grid-template-columns:1fr}}@media (max-width: 600px){.shared-counters{padding:10px 8px}.counter-value{font-size:1.1rem}}@media (max-width: 380px){.draft-screen .card-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}.reveal-screen .reveal-card-grid{grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:6px}.arrange-screen .hand-cards-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}.container{padding:14px 10px}}@media (prefers-reduced-motion: reduce){.view-wipe,.card-face-redesign.flip .creature-art,.score-pop,.active-zone-glow,.coach-target,.coachmark-panel,.tutorial-score-pop,.tutorial-center-arrow.pulse,.tutorial-center-trophy.pulse{animation:none!important}}.tutorial-interactive{min-height:70vh}.battle-beat-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#14100a8c;display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}.battle-beat-modal{background:var(--paper-white);border:1px solid var(--rule);border-radius:var(--radius-card);padding:20px;width:100%;max-width:360px;text-align:center;box-shadow:0 16px 48px rgba(var(--graphite-rgb),.28)}.battle-beat-modal .beat-step{font-size:.78rem;color:var(--text-muted);margin-bottom:6px}.battle-beat-modal .beat-headline{font-size:1.12rem;font-weight:900;line-height:1.4;margin-bottom:12px}.battle-beat-modal .beat-card{display:flex;justify-content:center;margin-bottom:12px}.battle-beat-modal .beat-details{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--graphite-body)}.battle-beat-modal .beat-details li{display:inline-flex;align-items:center;justify-content:center;gap:4px}.battle-beat-modal .beat-breakdown{background:var(--paper-nested, #f7f3ec);border:1px solid var(--rule);border-radius:var(--radius-card);padding:10px 12px;margin-bottom:12px;text-align:left}.battle-beat-modal .beat-breakdown-title{font-size:.78rem;font-weight:700;color:var(--text-muted);margin-bottom:6px}.battle-beat-modal .beat-breakdown-row{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;padding:2px 0}.battle-beat-modal .beat-breakdown-row span:last-child{font-weight:900}.battle-beat-modal .beat-breakdown-row.total{margin-top:4px;padding-top:6px;border-top:1px solid var(--rule);font-weight:900}.battle-beat-modal .beat-score{font-size:1.02rem;font-weight:900;margin-bottom:16px;color:var(--text-dark)}.battle-beat-modal .beat-actions{display:flex;flex-direction:column;gap:8px}.tutorial-layout{width:100%;display:flex;flex-direction:column;gap:18px;align-items:stretch}.tutorial-demo-pane,.tutorial-coach-pane{width:100%;min-width:0}@media (min-width: 720px){.tutorial-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;align-items:start}.tutorial-coach-pane{position:sticky;top:12px}}.tutorial-anchor{border-radius:var(--radius-lg)}.coach-target{border-radius:var(--radius-card);outline:3px solid #e3b341;outline-offset:4px;box-shadow:0 0 16px 4px #e3b34173;animation:coachTarget 1.6s ease-in-out infinite}@keyframes coachTarget{0%,to{box-shadow:0 0 12px 3px #e3b34161}50%{box-shadow:0 0 24px 7px #e3b341a8}}.tutorial-stage{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px}.tutorial-stage-center{justify-content:center;min-height:240px}.tutorial-goal-art{display:flex;justify-content:center;align-items:center;margin:8px 0}.tutorial-flow-steps{display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:12px 5px;width:100%}.tutorial-flow-node{display:flex;flex-direction:column;align-items:center;gap:7px;width:90px;padding:11px 6px;background:var(--paper-card);border:1px solid var(--rule);border-radius:10px}.tutorial-flow-badge{position:relative;width:44px;height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.tutorial-flow-num{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:var(--primary-color);color:#fff;font-size:.62rem;font-weight:800;display:flex;align-items:center;justify-content:center}.tutorial-flow-title{font-weight:700;font-size:.88rem;color:var(--text-dark)}.tutorial-flow-desc{font-size:.7rem;color:var(--text-muted);text-align:center;line-height:1.3;white-space:nowrap}.tutorial-flow-arrow{display:flex;align-self:center;color:var(--rule-heavy);flex-shrink:0}.tutorial-hint{font-size:.9rem;color:var(--text-muted);line-height:1.5;text-align:center}.tutorial-hint-lg{font-size:1.05rem;font-weight:600;color:var(--text-dark)}.tutorial-mini-gears{margin:8px 0 4px}.tutorial-mini-gears .gears-svg{max-width:none;max-height:min(48vh,360px)}.tutorial-active-zone-glow{animation:tutorialZonePulse 2.4s infinite ease-in-out}@keyframes tutorialZonePulse{0%,to{opacity:.7}50%{opacity:1}}.tutorial-active-char-ring{animation:tutorialCharRing 1.3s ease-in-out infinite}@keyframes tutorialCharRing{0%,to{opacity:.55}50%{opacity:1}}.tutorial-produce-rise{animation:tutorialRise 1.2s ease-out forwards;transform-box:fill-box;transform-origin:center}@keyframes tutorialRise{0%{opacity:0;transform:translateY(8px) scale(.6)}20%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-46px) scale(1)}}.tutorial-score-rise{animation:tutorialScoreRise 1.5s ease-out forwards;transform-box:fill-box;transform-origin:center}@keyframes tutorialScoreRise{0%{opacity:0;transform:translateY(10px) scale(.5)}18%{opacity:1;transform:translateY(0) scale(1.2)}40%{transform:translateY(-6px) scale(1)}to{opacity:0;transform:translateY(-62px) scale(1)}}.tutorial-acquire-float{animation:tutorialAcquire 1.7s ease-out infinite;transform-box:fill-box;transform-origin:center}@keyframes tutorialAcquire{0%{opacity:0;transform:translateY(8px) scale(.7)}25%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-28px) scale(1)}}.tutorial-arrow-bloom{animation:tutorialArrowBloom .7s ease-in-out infinite}@keyframes tutorialArrowBloom{0%,to{opacity:.78}50%{opacity:1}}.tutorial-score-pop{animation:tutorialScorePop 2s ease-out;transform-box:fill-box;transform-origin:center}@keyframes tutorialScorePop{0%{opacity:0;transform:translateY(10px) scale(.7)}20%{opacity:1;transform:translateY(0) scale(1.1)}40%{opacity:1;transform:translateY(-2px) scale(1)}to{opacity:0;transform:translateY(-16px) scale(1)}}.tutorial-center-arrow.pulse,.tutorial-center-trophy.pulse{animation:centerPulse 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes centerPulse{0%,to{opacity:.85}50%{opacity:1}}.tutorial-turn-btn{display:inline-flex;align-items:center;gap:8px}.tutorial-cause-strip{display:flex;align-items:stretch;justify-content:center;gap:8px;width:100%;flex-wrap:nowrap}.tutorial-cause-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--paper-white);border:1px solid var(--rule);border-radius:var(--radius-card);padding:8px 6px;opacity:.55;transition:opacity .3s ease,border-color .3s ease}.tutorial-cause-step.done{opacity:1;border-color:var(--color-beta)}.tutorial-cause-cap{font-size:.78rem;font-weight:700;color:var(--graphite-strong)}.tutorial-cause-card{width:72px;pointer-events:none}.tutorial-cause-make{display:inline-flex;align-items:center;gap:3px;font-size:.72rem;font-weight:600;color:var(--text-muted);text-align:center}.tutorial-cause-sep{align-self:center;font-size:1.1rem;color:var(--text-muted)}.tutorial-tray-wrap{width:100%}.tutorial-panel{width:100%;background:var(--paper-white);border:1px solid var(--rule);border-radius:var(--radius-card);padding:14px;display:flex;flex-direction:column;gap:8px;align-items:center}.tutorial-budget-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}.tutorial-budget-chip{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.95rem;color:var(--graphite-body);background:var(--paper-nested);border:1px solid var(--rule);border-radius:var(--radius-pill);padding:8px 14px}.tutorial-formula{font-size:1.05rem;font-weight:600;color:var(--graphite-strong);text-align:center}.tutorial-cell-legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.tutorial-cell-tag{font-weight:700;font-size:.9rem}.tutorial-resource-row{display:flex;gap:10px;width:100%;justify-content:center;flex-wrap:wrap}.tutorial-resource-card{flex:1;min-width:92px;background:var(--paper-white);border:1.5px solid var(--rule);border-radius:var(--radius-card);padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:6px}.tutorial-resource-name{font-weight:600;font-size:.85rem;color:var(--graphite-strong)}.tutorial-resource-use{font-size:.78rem;color:var(--graphite-muted)}.tutorial-slot-examples{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%}.tutorial-slot-example{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--paper-white);border:1px solid var(--rule);border-radius:var(--radius-card);padding:10px 12px;min-width:84px}.tutorial-slot-label{font-size:.75rem;font-weight:600;color:var(--graphite-muted)}.tutorial-fizzle{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}.tutorial-fizzle-card{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--paper-white);border:1px solid var(--rule);border-radius:var(--radius-card);padding:12px 14px}.tutorial-fizzle-order{font-size:.72rem;font-weight:700;color:var(--text-muted)}.tutorial-fizzle-arrow{font-size:1.3rem;color:var(--text-muted)}.tutorial-fizzle-tag{font-size:.72rem;font-weight:700;border-radius:999px;padding:3px 8px}.tutorial-fizzle-tag.bad{color:#b91c1c;background:#e0556b1f}.tutorial-fizzle-tag.good{color:#15803d;background:#46c2a524}.tutorial-tryit{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.tutorial-tryit-hand{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.tutorial-tryit-hand .hand-card-wrapper{width:84px;cursor:pointer;transition:transform .15s ease,opacity .15s ease}.tutorial-tryit-hand .hand-card-wrapper.selected{transform:translateY(-6px);filter:drop-shadow(0 6px 12px rgba(125,139,212,.3))}.tutorial-tryit-hand .hand-card-wrapper.placed{opacity:.35;pointer-events:none}.coachmark-panel{width:100%;background:var(--paper-white);border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:0 8px 24px -14px #07254e38;padding:18px;display:flex;flex-direction:column;gap:4px;animation:coachFade .28s ease-out}@keyframes coachFade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.coachmark-progress{font-family:var(--font-mono);font-size:.68rem;font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:var(--eyebrow-tracking);margin-bottom:8px}.coachmark-body{font-size:.92rem;line-height:1.55;color:var(--graphite-body)}.coachmark-body strong{color:var(--ink);font-weight:600}.coachmark-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}.coachmark-skip{background:none;border:none;color:var(--text-muted);font-size:.82rem;font-family:var(--font-main);cursor:pointer;padding:8px;min-height:44px;text-decoration:underline}.coachmark-skip:hover{color:var(--text-dark)}.coachmark-nav{display:flex;gap:8px}.coachmark-btn{width:auto;min-height:44px;padding:10px 18px;font-size:.95rem}.coachmark-action{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}.tutorial-use-action{display:flex;flex-direction:column;align-items:center;gap:8px}.tutorial-use-action .tutorial-hint{margin:0}.tutorial-use-card{width:92px}@media (max-width: 480px){.coachmark-panel{padding:14px}.coachmark-btn{padding:10px 14px;font-size:.9rem}}.resource-tray{width:100%;display:flex;flex-direction:column;gap:8px;background:var(--paper-nested);border:1px solid var(--rule);border-radius:var(--radius-card);padding:12px 14px}.resource-tray.compact{padding:8px 10px;gap:6px}.resource-tray-title{font-family:var(--font-mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--eyebrow-tracking);color:var(--graphite-muted);display:flex;align-items:center;gap:6px}.resource-tray-slots{display:flex;gap:8px;width:100%}.resource-slot{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;background:var(--paper-white);border:1px solid var(--rule);border-radius:var(--radius-btn);position:relative;transition:border-color .2s ease-out,background .2s ease-out}.resource-slot-count{font-family:var(--font-mono);font-size:1.2rem;font-weight:600;color:var(--graphite-strong);line-height:1}.resource-tray.compact .resource-slot{padding:6px 4px}.resource-tray.compact .resource-slot-count{font-size:1rem}.resource-slot.fizzle{border-color:#e0556b;background:#e0556b14;animation:resourceFizzle .6s ease-in-out}.resource-slot-missing-tag{position:absolute;top:-8px;right:-6px;font-size:.6rem;font-weight:800;color:#fff;background:#e0556b;border-radius:999px;padding:2px 6px;white-space:nowrap;box-shadow:0 2px 6px #e0556b66;animation:resourceTagPop .6s ease-in-out}@keyframes resourceFizzle{0%,to{transform:translate(0)}15%{transform:translate(-4px)}30%{transform:translate(4px)}45%{transform:translate(-3px)}60%{transform:translate(3px)}75%{transform:translate(-1px)}}@keyframes resourceTagPop{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.resource-slot.fizzle,.resource-slot-missing-tag{animation:none!important}}.site-footer{max-width:480px;margin:0 auto;padding:20px 24px 28px;text-align:center;border-top:1px solid var(--rule);color:var(--graphite-muted)}.site-footer-brand{margin:0;font-size:.85rem;font-weight:800;letter-spacing:.02em;color:var(--graphite-body)}.site-footer-desc{margin:4px 0 0;font-size:.72rem;line-height:1.55}.site-footer-copy{margin:6px 0 0;font-size:.7rem;opacity:.85}.settings-lang-row{display:flex;flex-wrap:wrap;gap:8px}.settings-lang-row .settings-scale-btn{flex:0 1 auto}.app-control{position:fixed;top:10px;z-index:60;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:var(--paper-white);color:var(--graphite-body);border:1px solid var(--rule);border-radius:var(--radius-pill);box-shadow:var(--shadow-soft);cursor:pointer}.app-control:hover{color:var(--ink);border-color:var(--rule-heavy)}.app-control--back{left:10px}.app-control--gear{right:10px}.settings-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:16px;background:#07254e47;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);overflow-y:auto}.settings-modal-backdrop .settings-screen{max-width:420px;width:100%;margin:auto;box-shadow:var(--shadow-card)}.confirm-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;background:#07254e52;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.confirm-modal{width:100%;max-width:360px;background:var(--paper-card);border:1px solid var(--rule);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:22px 20px 18px;animation:fadeIn .22s ease-out}.confirm-modal-message{color:var(--graphite-body);font-size:.95rem;line-height:1.55;text-align:center;margin-bottom:20px}.confirm-modal-actions{display:flex;gap:10px}.confirm-modal-actions .btn{flex:1}.main-menu-screen,.story-map-screen{background-image:url(/bg-celestial.png);background-size:cover;background-position:center;background-repeat:no-repeat}.star{color:var(--rule-heavy);font-size:.95rem;line-height:1}.star.on{color:var(--color-alpha)}.story-map-screen{text-align:center}.story-map-title{margin-bottom:4px;font-weight:900;color:var(--graphite-strong)}.btn-back{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;background:none;border:none;color:var(--graphite-muted);font:inherit;font-weight:600;cursor:pointer;padding:10px 8px;margin-bottom:4px}.btn-back:hover{color:var(--ink)}.story-chapter{width:100%;margin-top:22px}.story-chapter-title{font-size:.95rem;font-weight:800;color:var(--graphite-strong);text-align:left;padding-bottom:8px;margin-bottom:14px;border-bottom:1px solid var(--rule)}.story-stage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.story-stage-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px 12px;background:var(--paper-card);border:1px solid var(--rule);border-radius:var(--radius-card);cursor:pointer;text-align:center;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}.story-stage-card:not(:disabled):hover{box-shadow:var(--shadow-soft);transform:translateY(-2px);border-color:var(--rule-heavy)}.story-stage-card.locked{opacity:.55;cursor:not-allowed}.story-stage-card.cleared{border-color:var(--color-gamma)}.story-stage-index{position:absolute;top:6px;left:8px;font-size:.72rem;font-weight:800;color:var(--graphite-muted)}.story-stage-portrait{position:relative;width:88px;height:88px;display:flex;align-items:center;justify-content:center;background:var(--paper-nested);border-radius:var(--radius-card);overflow:hidden}.story-stage-lock{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:#eceff399}.story-stage-name{font-size:.9rem;font-weight:700;color:var(--graphite-strong)}.story-stage-diff{font-size:.72rem;color:var(--graphite-muted)}.story-stage-stars{min-height:1rem}.story-custom-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid var(--rule);border-radius:999px;background:var(--paper-white);color:var(--text-muted);font-size:.8rem;font-weight:600;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.story-custom-btn:hover{background:var(--paper-nested);color:var(--text-dark);border-color:var(--rule-heavy, var(--rule))}.story-custom-btn--floating{position:absolute;top:10px;right:10px;z-index:3;color:var(--graphite-strong);background:#ffffff80;backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);border-color:#ffffff8c;box-shadow:0 2px 8px rgba(var(--graphite-rgb),.16)}.story-custom-btn--floating:hover{background:#ffffffb3;color:var(--ink);border-color:#ffffffb3}.custom-panel{max-width:560px;max-height:88vh;overflow-y:auto;text-align:left}.custom-panel h2{text-align:center}.custom-loaded{font-size:.82rem;font-weight:700;color:var(--graphite-muted);margin:0 0 8px}.custom-textarea{width:100%;height:200px;font-family:var(--font-mono);font-size:.78rem;line-height:1.45;padding:10px;border:1px solid var(--rule-heavy);border-radius:var(--radius-input);background:var(--paper-white);color:var(--graphite-body);resize:vertical;white-space:pre;overflow-wrap:normal;overflow-x:auto}.custom-actions{display:flex;gap:10px;margin:10px 0}.custom-actions .btn{flex:1}.custom-preview{margin:6px 0 12px;padding:10px 12px;background:var(--paper-nested);border:1px solid var(--rule);border-radius:var(--radius-card)}.custom-ok{margin:0;font-weight:700;color:var(--gamma-text)}.custom-none{margin:0;font-weight:700;color:#ef4444}.custom-err-head{margin:8px 0 4px;font-size:.82rem;font-weight:700;color:#ef4444}.custom-err-list{margin:0;padding-left:18px}.custom-err-list li{font-family:var(--font-mono);font-size:.76rem;line-height:1.5;color:var(--graphite-body)}.creature-portrait{max-width:100%;max-height:100%;object-fit:contain}.creature-portrait--fallback{width:70%;height:70%;opacity:.8}.story-intro-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:#07254e47;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.story-intro{max-width:380px;text-align:center;animation:story-intro-pop .18s ease-out}@keyframes story-intro-pop{0%{transform:translateY(8px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.story-intro-portrait{width:132px;height:132px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;background:var(--paper-nested);border-radius:var(--radius-lg);overflow:hidden}.story-intro-head{margin-bottom:8px}.story-intro-stage{display:block;font-size:.78rem;font-weight:700;letter-spacing:var(--eyebrow-tracking);color:var(--graphite-muted)}.story-intro-boss{margin:2px 0 0;font-size:1.4rem;font-weight:900;color:var(--graphite-strong)}.story-intro-taunt{font-style:italic;color:var(--graphite-body);margin:0 0 14px}.story-intro-row{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:8px 0;border-top:1px solid var(--rule)}.story-intro-label{flex:0 0 64px;font-size:.78rem;font-weight:700;color:var(--graphite-muted);padding-top:2px}.story-intro-objective{font-weight:700;color:var(--graphite-strong)}.mod-flags{display:flex;flex-direction:column;gap:8px;width:100%}.mod-flag{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}.mod-flag-label{flex:0 0 auto;font-size:.74rem;font-weight:700;color:var(--ink);background:#11468c14;border-radius:var(--radius-pill);padding:2px 9px;white-space:nowrap}.mod-flag-desc{flex:1 1 180px;font-size:.82rem;line-height:1.4;color:var(--graphite-body)}.modifier-empty{margin:0;font-size:.82rem;color:var(--graphite-muted)}.stage-banner{width:100%;max-width:760px;margin:0 auto 12px;padding:10px 14px;background:var(--paper-card);border:1px solid var(--rule);border-radius:var(--radius-card);display:flex;flex-direction:column;gap:8px}.stage-banner-tab{display:flex;align-items:center;gap:5px;width:fit-content;margin:0 auto 10px;padding:4px 16px;font-size:.78rem;font-weight:700;color:var(--graphite-muted);background:var(--paper-card);border:1px solid var(--rule);border-top:none;border-radius:0 0 var(--radius-pill) var(--radius-pill);cursor:pointer}.stage-banner-tab:hover{color:var(--ink);background:var(--paper-nested)}.stage-banner-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}.stage-banner-toggle{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:none;border-radius:var(--radius-btn);color:var(--graphite-muted);cursor:pointer}.stage-banner-toggle:hover{background:var(--paper-nested);color:var(--ink)}.stage-banner-name{font-size:.92rem;font-weight:800;color:var(--graphite-strong)}.stage-banner-objective{font-size:.85rem;color:var(--graphite-body)}.stage-banner-tag{font-size:.72rem;font-weight:700;color:var(--graphite-muted);margin-right:5px}.shared-bank-panel{width:100%;padding:10px 12px;background:var(--paper-card);border:1px solid var(--rule);border-radius:var(--radius-card);margin-bottom:12px}.shared-bank-hint{margin:6px 0 0;font-size:.74rem;line-height:1.35;color:var(--graphite-muted)}.story-result-banner{width:100%;text-align:center;margin-bottom:18px}.story-result-stars .star{font-size:1.7rem}.story-result-hint{font-size:.9rem;font-weight:600;color:var(--graphite-muted)}.story-result-boss{font-style:italic;color:var(--graphite-body);margin:10px 0 0}.snake-board{position:relative;width:100%;max-width:460px;margin:8px auto 28px}.snake-path{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0}.snake-road{fill:none;stroke:#d8c7a4;stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.snake-road-center{fill:none;stroke:#fbf6ea;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 13}.snake-node{position:absolute;transform:translate(-50%,-50%);z-index:1;width:104px;display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:none;padding:0;cursor:pointer}.snake-node[disabled]{cursor:default}.snake-node-index{position:absolute;top:-6px;left:calc(50% - 36px);z-index:2;width:22px;height:22px;border-radius:50%;background:var(--ink, #11468c);color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center}.snake-node.locked .snake-node-index{background:var(--rule-heavy, #b9b2a6)}.snake-node-portrait{position:relative;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--paper-white);border:3px solid var(--rule);box-shadow:0 2px 5px rgba(var(--graphite-rgb),.12);transition:transform .15s ease,border-color .15s ease}.snake-node-portrait>*{width:100%;height:100%;object-fit:cover}.snake-node:not([disabled]):hover .snake-node-portrait{transform:translateY(-2px);border-color:var(--ink, #11468c)}.snake-node.cleared .snake-node-portrait{border-color:#e3b341}.snake-node.locked .snake-node-portrait{filter:grayscale(.65)}.snake-node-lock{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#f5f3eeb8;font-size:1.4rem}.snake-node-name{font-size:.8rem;font-weight:700;color:var(--text-dark);text-align:center;line-height:1.2;max-width:104px}.snake-node.locked .snake-node-name{color:var(--text-muted);font-weight:600}.snake-node-stars{font-size:.7rem;letter-spacing:1px}.snake-node-stars .star{color:var(--rule-heavy, #cdc6ba)}.snake-node-stars .star.on{color:#e3b341}.story-trail{position:relative;width:100%;max-width:460px;margin:10px auto 28px;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--rule),0 2px 12px rgba(var(--graphite-rgb),.08);background-image:linear-gradient(#faf8f229,#faf8f229),url(/story/journey-map.png),linear-gradient(to bottom,#d9e7c8,#d9e7c8 22%,#e6dcc2 26%,#e6dcc2 48%,#cfe0cb 52%,#cfe0cb 72%,#243056 88%,#1a2143);background-size:100% 100%,cover,100% 100%;background-position:center;background-repeat:no-repeat}.story-chapter-banner{position:absolute;transform:translateY(-50%);z-index:2;padding:4px 14px;border-radius:999px;background:#ffffff80;backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);border:1px solid rgba(255,255,255,.55);font-weight:800;font-size:.88rem;line-height:1.25;text-align:center;color:var(--graphite-strong);word-break:keep-all;box-shadow:0 2px 8px rgba(var(--graphite-rgb),.16)}