@import"https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&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: #767D89;--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: #f6a821;--color-beta: #7d8bd4;--color-gamma: #46c2a5;--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;justify-content:center;align-items:flex-start;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%;border-left:3px solid var(--ink);padding-left:10px;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)}.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;margin-bottom:24px}.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-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(--color-beta)}.status-panel.op .panel-header{color:var(--color-alpha)}.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:600;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(240px,48vh,560px);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);border-left:3px solid var(--rule-heavy);animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-5px)}to{opacity:1;transform:translate(0)}}.event-row.me{border-left-color:var(--color-beta)}.event-row.op{border-left-color:var(--color-alpha)}.event-row.fizzle{border-left-color:#cbd5e1;opacity:.7}.event-row.evaporated{border-left-color:#f43f5e}.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}.num-neg{color:#3b6fd4!important}.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}.reveal-split-panels{display:flex;flex-direction:column;gap:16px;width:100%;margin-bottom:24px}.reveal-panel{background:var(--paper-white);border:1px solid var(--rule);border-radius:var(--radius-card);padding:16px 12px}.reveal-panel-title{font-size:.95rem;font-weight:600;color:var(--graphite-strong);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}.reveal-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.reveal-card-wrapper{position:relative}.reveal-badge{position:absolute;top:-6px;right:-2px;font-size:.65rem;font-weight:700;padding:2px 5px;border-radius:4px;z-index:10;color:#fff;box-shadow:0 2px 6px #0000001a}.reveal-badge.public{background-color:var(--color-gamma)}.reveal-badge.hidden{background-color:var(--text-muted)}.reveal-card-back{background:var(--paper-nested);border:1px solid var(--rule-heavy);border-radius:var(--radius-card);height:110px;width:100%;display:flex;justify-content:center;align-items:center;color:var(--graphite-muted);font-family:var(--font-mono);font-size:1.6rem;font-weight:600}.mulligan-card{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.mulligan-card:hover{transform:translateY(-2px)}.mulligan-card.selected-mulligan:after{content:"교체 대상";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);background:#ef4444;color:#fff;font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:4px;white-space:nowrap}#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(.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}.hidden-zone{width:100%;margin-top:8px;margin-bottom:18px;padding:16px 14px;background:var(--ink-deep);border-radius:var(--radius-card);border-top:3px solid var(--ink)}.hidden-zone-title{color:var(--paper-page);font-weight:600;font-size:.9rem;margin-bottom:12px;display:flex;align-items:center;gap:8px}.hidden-zone .creature-art .character-art-placeholder{background:transparent}.hidden-zone-empty{color:#9aa6b8;font-size:.85rem;text-align:center;padding:18px 0}.clickable-card{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.clickable-card:hover{transform:translateY(-2px)}.card-face-redesign.hidden-card{background:var(--paper-nested);border:1px solid var(--rule-heavy);border-radius:var(--radius-card);padding:8px;box-shadow:none;transition:border-color .2s ease-out,box-shadow .2s ease-out}.card-face-redesign.hidden-card .character-art-placeholder{background:transparent;border-color:transparent}.card-face-redesign.hidden-card .character-art-placeholder svg path{stroke:var(--graphite-muted)}.card-face-redesign.hidden-card .creature-effects{background-color:var(--paper-white);border-color:var(--rule)}.card-face-redesign.hidden-card .slot-chip{opacity:.9}.card-face-redesign.hidden-card.selected-mulligan,.reveal-card-wrapper.selected-mulligan-hidden .card-face-redesign.hidden-card{border-color:var(--color-alpha)!important;box-shadow:0 0 16px #f6a821e6,0 0 0 2.5px var(--color-alpha)!important}.mulligan-card.selected-mulligan-hidden:after{background:var(--color-alpha)!important}.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 #0003;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:800;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}.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-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}@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}}