:root {
  --paper: #f2e8d5;
  --paper-light: #fffaf0;
  --ink: #20211e;
  --muted: #777065;
  --red: #b83a2d;
  --red-dark: #8f291f;
  --gold: #c99a42;
  --line: rgba(42, 37, 30, 0.15);
  --shadow: 0 18px 50px rgba(54, 39, 24, 0.12);
  font-family: ui-rounded, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  color: var(--ink);
  background: #d9cfbd;
  font-synthesis: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; overscroll-behavior: none; }
body { background: #d9cfbd; }
button, input { font: inherit; }
button { color: inherit; }

.app-shell {
  width: min(100%, 460px);
  min-height: 100dvh;
  margin: 0 auto;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.6), transparent 32%),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(70,55,38,.018) 5px),
    var(--paper);
  box-shadow: 0 0 70px rgba(28,23,16,.2);
  position: relative;
  overflow: hidden;
}
.app-shell::after { content:""; position:fixed; z-index:190; inset:0; max-width:460px; margin:0 auto; background:var(--paper); opacity:0; pointer-events:none; }
.app-shell.screen-changing::after { animation:screen-soft-cut .52s ease both; }
@keyframes screen-soft-cut { 0% { opacity:0 } 36% { opacity:.78 } 100% { opacity:0 } }

.screen {
  display: none;
  min-height: 100dvh;
  padding: calc(14px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom));
  position: relative;
  animation: page-in .38s ease both;
}
.screen.active { display: flex; flex-direction: column; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } }

.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 50px; gap: 12px; }
.world-power-alert { position: relative; z-index: 8; margin: 8px -22px 0; padding: 9px 22px 10px 78px; overflow: hidden; border-block: 3px solid var(--ink); background: var(--lime, #c4ff46); box-shadow: 0 5px 0 rgba(32,33,30,.12); animation: world-alert-in .48s cubic-bezier(.2,.8,.2,1) both; }
.world-power-alert::before { content:"⚡"; position:absolute; left:24px; top:50%; color:var(--red); font-size:38px; transform:translateY(-50%) rotate(-8deg); text-shadow:2px 2px 0 white; }
.world-power-alert span, .world-power-alert strong, .world-power-alert small { display:block; }
.world-power-alert span { font-size:7px; font-weight:950; letter-spacing:.18em; }.world-power-alert strong { font-family:Impact,"Arial Black",sans-serif; font-size:15px; line-height:1.05; }.world-power-alert small { margin-top:2px; overflow:hidden; font-size:8px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
@keyframes world-alert-in { from { opacity:0; transform:translateY(-14px) } }
.brand-mark {
  display: grid; place-items: center; width: 43px; height: 43px;
  border: 2px solid var(--red); color: var(--red); font-family: serif; font-weight: 900;
  font-size: 28px; transform: rotate(-3deg); border-radius: 3px;
}
.brand-mark.small { width: 34px; height: 34px; font-size: 21px; }
.icon-button {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.35); font-size: 24px; cursor: pointer;
}
.icon-button:active { transform: scale(.94); }
.profile-chip { border: 1px solid var(--line); background: rgba(255,255,255,.38); min-height: 42px; padding: 5px 10px 5px 6px; display: flex; align-items: center; gap: 7px; border-radius: 24px; cursor: pointer; }
.profile-chip span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: serif; font-weight: 900; }
.profile-chip strong { font-size: 11px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display:flex; align-items:center; gap:5px; min-width:0; }
.cloud-save-chip { min-height:36px; padding:4px 8px; border:2px solid var(--ink); border-radius:999px; background:var(--lime, #c4ff46); color:var(--ink); display:flex; align-items:center; gap:4px; font-size:9px; font-weight:950; cursor:pointer; box-shadow:2px 3px 0 rgba(32,33,30,.16); }
.cloud-save-chip.synced { background:var(--paper-light); border-color:rgba(32,33,30,.38); box-shadow:none; }
.cloud-save-chip.syncing { animation:cloud-chip-pulse .8s ease infinite alternate; }
@keyframes cloud-chip-pulse { to { transform:translateY(-2px); filter:brightness(1.12); } }
.chapter-label { font-size: 11px; letter-spacing: .18em; color: var(--muted); font-weight: 800; text-transform: uppercase; }

.hero-art { height: 41vh; min-height: 300px; max-height: 390px; position: relative; margin: 2vh -8px 0; }
.hero-art svg { width: 100%; height: 100%; overflow: visible; position: relative; z-index: 2; filter: drop-shadow(0 14px 9px rgba(61,42,22,.12)); }
.hero-brush, .hero-weapon, .hero-shield { fill: none; stroke: var(--ink); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.hero-weapon { stroke: var(--red); stroke-width: 11; }
.hero-shield { stroke-width: 10; fill: rgba(255,250,240,.78); }
.sun { position: absolute; width: 178px; height: 178px; border-radius: 50%; background: rgba(184,58,45,.14); left: 50%; top: 45%; transform: translate(-50%,-50%); }
.sun::after { content: ""; position: absolute; inset: 21px; border: 1px solid rgba(184,58,45,.2); border-radius: 50%; }
.ink-spark { position: absolute; color: var(--red); z-index: 3; font-size: 20px; }
.spark-one { top: 24%; left: 17%; }.spark-two { right: 12%; bottom: 17%; font-size: 27px; }
.home-copy { text-align: center; margin-top: -9px; }
.eyebrow { color: var(--red); font-size: 11px; font-weight: 900; letter-spacing: .18em; margin: 0 0 7px; text-transform: uppercase; }
.home-copy h1 { font-family: "AppleMyungjo", serif; font-size: clamp(43px, 12vw, 58px); line-height: 1; margin: 0; letter-spacing: -.08em; }
.home-copy > p:last-child { color: var(--muted); line-height: 1.62; margin: 14px 0 0; font-size: 15px; }
.home-deck-card { width: 100%; margin-top: 14px; padding: 9px 10px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.38); box-shadow: 0 7px 18px rgba(47,35,20,.06); cursor: pointer; text-align: left; }
.home-deck-card:active { transform: translateY(1px); }
.home-deck-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.home-deck-heading span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .14em; }.home-deck-heading strong { color: var(--red); font-size: 8px; }
.home-deck-profiles { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.home-deck-avatar { position: relative; min-width: 0; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper-light); box-shadow: 2px 2px 0 rgba(32,33,30,.13); }
.home-deck-avatar svg { width: 118%; height: 118%; display: block; }.home-deck-avatar b { position: absolute; left: 1px; bottom: 0; min-width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 7px; }
.home-deck-avatar.empty { border-style: dashed; border-color: rgba(32,33,30,.3); color: var(--muted); font-family: serif; font-size: 21px; box-shadow: none; }.home-deck-avatar.empty b { background: rgba(32,33,30,.55); }
.bottom-actions { margin-top: auto; display: grid; gap: 10px; padding-top: 22px; }
button { touch-action: manipulation; }
.hidden { display: none !important; }
.primary-button, .secondary-button {
  min-height: 57px; border-radius: 6px; border: 1px solid transparent; padding: 0 20px;
  font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 14px;
}
.primary-button { background: var(--ink); color: var(--paper-light); box-shadow: 0 9px 0 rgba(32,33,30,.09); }
.primary-button span:last-child { font-size: 20px; }
.primary-button:active { transform: translateY(2px); box-shadow: 0 5px 0 rgba(32,33,30,.09); }
.primary-button:disabled { opacity: .35; }
.secondary-button { background: rgba(255,255,255,.34); border-color: var(--line); }
.primary-button > span:first-child, .challenge-home-button > span:first-child { display: grid; gap: 2px; text-align: left; }
.primary-button > span:first-child small, .challenge-home-button small { font-size: 9px; font-weight: 700; opacity: .72; letter-spacing: 0; }
.challenge-home-button { min-height: 62px; padding: 0 20px; border: 3px solid var(--ink); border-radius: 15px 10px 16px 11px; background: var(--red); color: white; box-shadow: 6px 7px 0 var(--ink); display: flex; align-items: center; justify-content: center; gap: 16px; font-weight: 900; cursor: pointer; }
.challenge-home-button:active { transform: translate(3px,3px); box-shadow: 3px 4px 0 var(--ink); }
.count-badge { min-width: 25px; height: 25px; padding: 0 7px; border-radius: 13px; background: var(--red); color: white; display: inline-grid; place-items: center; font-size: 12px; }
.fortress-home-button { border-color: rgba(184,58,45,.35); color: var(--red-dark); }
.lineup-badge { background: rgba(184,58,45,.1); border: 1px solid rgba(184,58,45,.25); padding: 5px 8px; border-radius: 14px; font-size: 11px; }
.text-button { border: 0; background: transparent; color: var(--muted); min-height: 34px; font-size: 10px; font-weight: 800; cursor: pointer; }
.home-utility-actions { display: flex; justify-content: center; gap: 14px; }

.daily-league-hero { display: grid; grid-template-columns: 1.25fr .8fr .8fr; gap: 7px; margin: 12px 0 3px; }
.daily-league-hero > div { min-width: 0; min-height: 82px; padding: 10px; border: 3px solid var(--ink); border-radius: 14px 10px 16px 11px; background: white; box-shadow: 4px 5px 0 var(--ink); display: flex; flex-direction: column; justify-content: center; }
.daily-league-hero span, .daily-league-hero small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.daily-league-hero > div:first-child strong { color: var(--red); font-family: serif; font-size: 20px; }
.daily-league-hero .league-score, .daily-league-hero .league-limit { text-align: center; align-items: center; }
.daily-league-hero .league-score > strong { font-size: 20px; color: var(--purple-dark, #4d3fd0); }
.daily-league-hero .league-limit > strong { font-size: 18px; }
.league-deck-sync-note { margin: 0 0 9px; padding: 8px 10px; border: 2px dashed rgba(108,92,255,.45); border-radius: 10px; background: rgba(108,92,255,.08); color: var(--purple-dark, #4d3fd0); font-size: 9px; font-weight: 900; line-height: 1.45; }
.league-picker-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 1px 7px; font-size: 10px; }
.league-picker-heading span { min-width: 42px; padding: 4px 7px; border: 2px solid var(--ink); border-radius: 999px; background: var(--lime, #c4ff46); text-align: center; font-weight: 950; }
.league-lineup-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; max-height: 250px; overflow-y: auto; padding: 2px 3px 5px 2px; }
.league-picker-fighter { position: relative; min-width: 0; padding: 0; border: 2px solid rgba(32,33,30,.28); border-radius: 10px; background: rgba(255,255,255,.72); overflow: hidden; color: var(--ink); cursor: pointer; opacity: .68; }
.league-picker-fighter svg { width: 100%; height: auto; display: block; }
.league-picker-fighter strong { display: block; padding: 0 3px 1px; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.league-picker-fighter small { display: block; padding: 0 3px 5px; color: var(--muted); font-size: 6px; }
.league-picker-fighter.selected { border: 3px solid var(--purple, #6c5cff); background: rgba(196,255,70,.25); box-shadow: 2px 3px 0 var(--ink); opacity: 1; }
.league-picker-slot { position: absolute; top: 4px; left: 4px; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--ink); border-radius: 999px; background: var(--lime, #c4ff46); display: grid; place-items: center; font-size: 9px; font-weight: 950; z-index: 2; }
.league-team-preview { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.league-team-member { min-width: 0; border: 2px solid var(--ink); border-radius: 10px; background: white; overflow: hidden; text-align: center; box-shadow: 2px 3px 0 var(--ink); }
.league-team-member svg { width: 100%; height: auto; display: block; }
.league-team-member strong { display: block; padding: 0 3px 6px; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-round-rule { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 10px; }
.tag-round-rule b { padding: 4px 6px; border: 2px solid var(--ink); border-radius: 999px; background: var(--lime, #c4ff46); font-size: 9px; }
.tag-round-rule i { color: var(--red); font-style: normal; font-weight: 900; }
.league-empty { padding: 20px 12px; border: 2px dashed rgba(32,33,30,.35); text-align: center; color: var(--muted); font-size: 11px; line-height: 1.6; }
.league-empty strong { display: block; margin-bottom: 10px; color: var(--ink); }
.league-empty .primary-button { width: 100%; min-height: 48px; }
.league-rule { margin: 0 0 9px; padding: 8px 10px; background: rgba(196,255,70,.28); border: 1px solid rgba(32,33,30,.28); font-size: 9px; font-weight: 800; }
.league-rivals { display: grid; gap: 9px; }
.league-rival { display: grid; grid-template-columns: 1fr 82px; gap: 8px; align-items: center; padding: 9px; border: 3px solid var(--ink); border-radius: 13px; background: white; box-shadow: 4px 4px 0 var(--ink); }
.league-rival-team { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.league-rival-team span { min-width: 0; border-radius: 8px; background: var(--paper); overflow: hidden; }
.league-rival-team svg { width: 100%; height: auto; display: block; }
.league-rival-copy { min-width: 0; display: grid; gap: 3px; }
.league-rival-copy span { color: var(--muted); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.league-rival-copy strong { font-family: serif; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.league-rival-copy small { color: var(--red); font-size: 9px; font-weight: 900; }
.league-rival button { min-height: 48px; padding: 4px; border: 2px solid var(--ink); border-radius: 9px; background: var(--purple, #6c5cff); color: white; font-size: 10px; font-weight: 900; }
.league-rival button:disabled { background: rgba(32,33,30,.12); color: var(--muted); border-color: rgba(32,33,30,.3); }
.league-standings { border: 3px solid var(--ink); border-radius: 13px; overflow: hidden; background: white; margin-bottom: 80px; }
.league-standing { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 10px; }
.league-standing:last-child { border-bottom: 0; }
.league-standing.mine { background: rgba(196,255,70,.32); }
.league-standing > b { color: var(--red); font-size: 14px; }
.league-standing span { display: grid; gap: 1px; }
.league-standing span small { color: var(--muted); font-size: 8px; }
.league-standing > strong { font-size: 12px; }
.tag-fighter-group { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }
.tag-fighter-group svg { width: 74%; height: auto; min-width: 0; }
.tag-fighter-group.two svg { width: 58%; margin: 0 -8%; }
.tag-fighter-group.two svg:first-child { transform: translateY(6%) rotate(-4deg); }
.tag-fighter-group.two svg:last-child { transform: translateY(-2%) rotate(4deg); }
.tag-fighter-group.two.turn-active svg { opacity: .42; filter: grayscale(.35); transition: opacity .2s ease, filter .2s ease; }
.tag-fighter-group.two.turn-active svg.tag-active { opacity: 1; filter: drop-shadow(0 0 8px rgba(196,255,70,.9)); animation: tag-turn-pop .42s ease; }
@keyframes tag-turn-pop { from { filter: drop-shadow(0 0 14px rgba(196,255,70,1)) brightness(1.3); } to { filter: drop-shadow(0 0 8px rgba(196,255,70,.9)) brightness(1); } }
.tag-score-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.tag-score-breakdown span { padding: 7px 3px; border: 2px solid var(--ink); border-radius: 8px; background: white; text-align: center; font-size: 8px; font-weight: 900; }
.tag-score-breakdown b { display: block; color: var(--purple-dark, #4d3fd0); font-size: 14px; }
.sound-toggle { position: fixed; z-index: 90; right: max(12px, calc((100vw - 460px) / 2 + 12px)); bottom: calc(74px + env(safe-area-inset-bottom)); width: 43px; height: 43px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: rgba(255,250,240,.94); box-shadow: 4px 4px 0 rgba(32,33,30,.16); cursor: pointer; font-size: 18px; }
.round-intro { position: fixed; inset: 0; z-index: 180; width: min(100%, 460px); height: 100dvh; min-height: 100svh; margin: 0 auto; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); background: rgba(20,18,17,.68); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility .18s ease; }
.round-intro.show { opacity: 1; visibility: visible; }
.round-intro-card { width: min(88vw, 360px); padding: 24px 18px 20px; border: 4px solid var(--ink); border-radius: 18px 12px 20px 13px; background: var(--paper-light); box-shadow: 10px 12px 0 var(--red); text-align: center; transform: scale(.78) rotate(-2deg); opacity: 0; }
.round-intro.show .round-intro-card { animation: round-card-in 1.28s cubic-bezier(.2,.8,.2,1) both; }
.round-intro-card span, .round-intro-card small { display: block; color: var(--muted); font-size: 10px; font-weight: 950; letter-spacing: .18em; }
.round-intro-card strong { display: block; margin: 5px 0 7px; color: var(--purple-dark, #4d3fd0); font-family: Impact, "Arial Black", sans-serif; font-size: clamp(44px, 15vw, 70px); line-height: .95; letter-spacing: -.04em; text-shadow: 3px 3px 0 var(--lime, #c4ff46); }
@keyframes round-card-in { 0% { opacity: 0; transform: scale(.68) rotate(-5deg); } 18%, 72% { opacity: 1; transform: scale(1) rotate(-1deg); } 100% { opacity: 0; transform: scale(1.08) rotate(1deg); } }
.sound-toggle:active { transform: translateY(2px); box-shadow: 2px 2px 0 rgba(32,33,30,.16); }
.sound-toggle.muted { opacity: .62; }

.onboarding-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: end center; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s ease; }
.onboarding-modal.open { visibility: visible; opacity: 1; }
.onboarding-backdrop { position: absolute; inset: 0; background: rgba(22,20,18,.58); backdrop-filter: blur(3px); }
.onboarding-card { position: relative; width: min(100%, 460px); min-height: 520px; padding: 18px 22px calc(22px + env(safe-area-inset-bottom)); background: var(--paper-light); border-radius: 24px 24px 0 0; box-shadow: 0 -22px 70px rgba(16,14,12,.3); transform: translateY(32px); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.onboarding-modal.open .onboarding-card { transform: translateY(0); }
.onboarding-header { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.onboarding-close { width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(32,33,30,.07); font-size: 24px; cursor: pointer; }
.onboarding-visual { width: 138px; height: 138px; margin: 13px auto 18px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 46% 54% 49% 51% / 53% 42% 58% 47%; background: rgba(108,92,255,.12); color: var(--red); font-family: serif; font-size: 64px; font-weight: 900; transform: rotate(-3deg); box-shadow: 10px 10px 0 rgba(32,33,30,.07); }
.onboarding-visual[data-step="1"] { background: rgba(184,58,45,.12); }
.onboarding-visual[data-step="2"] { background: rgba(47,111,143,.13); }
.onboarding-visual[data-step="3"] { background: rgba(201,154,66,.16); }
.onboarding-copy { min-height: 150px; text-align: center; }
.onboarding-copy h2 { margin: 0 0 12px; font-family: "AppleMyungjo", serif; font-size: 30px; line-height: 1.15; }
.onboarding-copy > p:last-child { max-width: 350px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.65; }
.onboarding-dots { display: flex; justify-content: center; gap: 7px; margin: 8px 0 20px; }
.onboarding-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(32,33,30,.18); cursor: pointer; }
.onboarding-dots button.active { width: 25px; border-radius: 8px; background: var(--red); }
.onboarding-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.onboarding-actions > div { display: flex; gap: 8px; }
.onboarding-nav { min-height: 50px; padding-inline: 16px; }
.onboarding-nav.primary-button { min-width: 120px; }
body.modal-open { overflow: hidden; }

.step-pills { display: flex; gap: 6px; }
.step-pills span { width: 25px; height: 5px; border-radius: 4px; background: rgba(32,33,30,.14); }
.step-pills span.done { background: var(--ink); }.step-pills span.current { background: var(--red); width: 38px; }
.ink-counter { font-size: 11px; font-weight: 900; padding: 7px 10px; border-radius: 20px; border: 1px solid var(--line); }
.draw-copy { text-align: center; padding: 18px 0 15px; }
.draw-copy h2 { font-family: "AppleMyungjo", serif; font-size: 29px; margin: 0 0 8px; }
.draw-copy > p:last-child { font-size: 13px; color: var(--muted); margin: 0; }
.draw-guide { border: 1px solid var(--line); background: rgba(255,255,255,.42); padding: 10px; margin-bottom: 10px; }
.guide-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; }
.guide-heading strong { font-size: 11px; color: var(--red-dark); }.guide-heading span { font-size: 9px; color: var(--muted); letter-spacing: .1em; }
.guide-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.guide-option { min-width: 0; display: grid; gap: 5px; padding: 5px; border: 1px solid rgba(32,33,30,.12); background: rgba(255,253,247,.72); }
.guide-example-canvas { display: block; width: 100%; height: 46px; background: rgba(32,33,30,.035); border-bottom: 1px dashed rgba(32,33,30,.14); }
.guide-option > div { min-width: 0; display: grid; gap: 1px; text-align: center; }
.guide-option span { overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.guide-option strong { overflow: hidden; font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.guide-option small { overflow: hidden; color: var(--red-dark); font-size: 8px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.guide-tip { margin: 8px 0 0; padding-top: 7px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 9px; line-height: 1.45; }
.ink-budget { margin: -2px 0 9px; }.ink-budget > div:first-child { display: flex; justify-content: space-between; font-size: 10px; }.ink-budget > div:first-child span { font-variant-numeric: tabular-nums; color: var(--red); font-weight: 900; }.ink-track { height: 7px; border: 1px solid var(--ink); padding: 1px; margin-top: 4px; }.ink-track span { display: block; width: 0; height: 100%; background: var(--red); transition: width .12s; }.ink-budget small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.canvas-frame {
  --anchor-x: 77%; --anchor-y: 48%;
  aspect-ratio: .96; max-height: 43vh; width: 100%; position: relative; background: rgba(255,253,247,.75);
  border: 1px solid rgba(68,52,34,.16); border-radius: 4px; box-shadow: var(--shadow); overflow: hidden;
}
.canvas-frame::before {
  content: ""; position: absolute; inset: 16px; border: 1px dashed rgba(66,52,36,.13); pointer-events: none;
}
#draw-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; position: relative; z-index: 2; }
.drawing-zones { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: 34% 32% 34%; pointer-events: none; }
.draw-zone { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 12px; color: rgba(32,33,30,.34); background: rgba(32,33,30,.025); border-right: 2px dashed rgba(32,33,30,.15); transition: background .18s ease, color .18s ease, opacity .18s ease; opacity: .36; }
.draw-zone:last-child { border-right: 0; }
.draw-zone b { font-size: 10px; letter-spacing: .06em; }
.draw-zone small { margin-top: 2px; font-size: 8px; font-weight: 900; }
.canvas-frame[data-part="shield"] .zone-shield { opacity: 1; color: #245d78; background: rgba(71,199,255,.18); }
.canvas-frame[data-part="armor"] .zone-armor { opacity: 1; color: #8b5b00; background: rgba(255,200,61,.2); }
.canvas-frame[data-part="weapon"] .zone-weapon { opacity: 1; color: #b73625; background: rgba(255,91,69,.17); }
.canvas-frame.zone-nudge { animation: zone-nudge .26s ease-in-out 2; }
@keyframes zone-nudge { 50% { transform: translateX(4px); } }
.base-body-guide { display: none; }
.canvas-frame[data-part="shield"] { --anchor-x: 23%; --anchor-y: 48%; }
.canvas-frame[data-part="armor"] { --anchor-x: 50%; --anchor-y: 27%; }
.canvas-placeholder { position: absolute; z-index: 3; left: var(--anchor-x); top: var(--anchor-y); width: 112px; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: rgba(62,52,40,.62); font-size: 11px; font-weight: 800; pointer-events: none; }
.canvas-placeholder.hidden { opacity: 0; }
.gesture-dot { width: 18px; height: 18px; border: 2px solid rgba(184,58,45,.65); border-radius: 50%; box-shadow: 0 0 0 9px rgba(184,58,45,.08); animation: breathe 1.5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.2); } }
.paper-corner { width: 22px; height: 22px; border-color: var(--red); border-style: solid; position: absolute; z-index: 3; pointer-events: none; }
.corner-a { left: 9px; top: 9px; border-width: 2px 0 0 2px; }.corner-b { right: 9px; bottom: 9px; border-width: 0 2px 2px 0; }
.draw-status { text-align: center; font-size: 12px; color: var(--muted); min-height: 18px; padding-top: 11px; }
.draw-actions { grid-template-columns: 1fr 1.8fr; }

.fighter-reveal { height: min(39vh, 340px); position: relative; display: grid; place-items: center; margin: 5px 0 2px; }
#fighter-preview { width: min(82%, 300px); height: 100%; position: relative; z-index: 2; filter: drop-shadow(0 16px 8px rgba(43,32,20,.11)); }
.reveal-rays { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: repeating-conic-gradient(from 4deg, rgba(184,58,45,.1) 0 8deg, transparent 8deg 18deg); mask: radial-gradient(circle, transparent 0 31%, #000 32%); }
.reveal-copy { text-align: center; }
.name-input { border: 0; border-bottom: 2px solid var(--ink); background: transparent; text-align: center; font-family: "AppleMyungjo", serif; font-size: 30px; font-weight: 900; width: min(86%, 310px); padding: 3px 8px 7px; outline: none; }
.name-input:focus { border-color: var(--red); }
.luna-analysis { margin: 12px auto 0; max-width: 360px; border: 2px solid var(--ink); background: rgba(255,255,255,.55); padding: 11px 12px; display: grid; gap: 4px; text-align: left; box-shadow: 4px 4px 0 rgba(32,33,30,.12); }
.luna-analysis > span { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.luna-analysis > strong { font-family: "AppleMyungjo", serif; font-size: 18px; }
.luna-analysis .power-number { color: var(--red); font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1; }
.luna-analysis.appraisal-rough { background:rgba(225,220,210,.72); box-shadow:4px 4px 0 #777; }
.luna-analysis.appraisal-solid { background:rgba(196,255,70,.18); box-shadow:4px 4px 0 #8dbb35; }
.luna-analysis.appraisal-epic { background:rgba(108,92,255,.16); box-shadow:5px 5px 0 var(--purple); animation:appraisal-pop .4s ease-out both; }
.luna-analysis.appraisal-legendary { background:linear-gradient(135deg,rgba(255,225,112,.5),rgba(255,255,255,.68)); box-shadow:6px 6px 0 #d39a26; animation:appraisal-pop .52s cubic-bezier(.2,.85,.2,1) both; }
.luna-analysis.appraisal-extremely { color:white; border-color:var(--ink); background:linear-gradient(120deg,#171717,#6c5cff 48%,#ff5b45); box-shadow:7px 8px 0 var(--lime); animation:appraisal-extremely .72s cubic-bezier(.2,.9,.2,1) both; }
.luna-analysis.appraisal-extremely > span,.luna-analysis.appraisal-extremely .power-number { color:var(--lime); }
.luna-analysis.appraisal-extremely .luna-score-grid i { background:rgba(255,255,255,.13); }
@keyframes appraisal-pop { from { opacity:.25; transform:scale(.94) rotate(-1deg) } }
@keyframes appraisal-extremely { 0% { opacity:0; transform:scale(.82) rotate(-3deg); filter:brightness(2) } 60% { transform:scale(1.04) rotate(1deg) } }
.power-celebration { margin:10px auto 0; padding:11px 12px; border:3px solid var(--ink); border-radius:12px 8px 13px 9px; background:var(--lime,#c4ff46); box-shadow:5px 6px 0 var(--red); text-align:center; animation:power-record-pop .55s cubic-bezier(.2,.85,.2,1) both; }
.power-celebration span,.power-celebration strong,.power-celebration small{display:block}.power-celebration span{font-size:8px;font-weight:950;letter-spacing:.16em}.power-celebration strong{margin:3px 0;font-family:Impact,"Arial Black",sans-serif;font-size:22px}.power-celebration small{font-size:8px;font-weight:800}
@keyframes power-record-pop { from { opacity:0; transform:scale(.72) rotate(-4deg) } 70% { transform:scale(1.05) rotate(1deg) } }
.luna-analysis .luna-score-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 5px; }
.luna-analysis .luna-score-grid i { font-style: normal; display: grid; gap: 2px; text-align: center; padding: 5px 1px; background: rgba(32,33,30,.06); font-size: 8px; }
.luna-analysis .luna-score-grid b { font-size: 12px; }
.luna-analysis.loading { border-style: dashed; animation: luna-pulse 1.2s ease-in-out infinite; }
.luna-loading-track { height: 6px; margin-top: 7px; overflow: hidden; border-radius: 6px; background: rgba(32,33,30,.1); }
.luna-loading-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width .35s ease; position: relative; }
.luna-loading-track i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(120deg, transparent 0 8px, rgba(255,255,255,.42) 9px 13px); animation: luna-stripes .65s linear infinite; }
@keyframes luna-stripes { to { transform: translateX(14px); } }
.luna-analysis.error { border-color: var(--red); }
.luna-analysis button { border: 1px solid var(--ink); background: var(--paper-light); padding: 8px; font-weight: 900; }
@keyframes luna-pulse { 50% { opacity: .55; } }
.trait-list { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.signature-skill { display:grid; grid-template-columns:48px 1fr; gap:9px; align-items:center; margin:10px 0; padding:10px; border:3px solid var(--ink); border-radius:14px; background:linear-gradient(135deg,rgba(108,92,255,.16),rgba(196,255,70,.2)); box-shadow:3px 3px 0 var(--ink); text-align:left; }
.signature-skill.hidden { display:none; }
.signature-skill > b { display:grid; place-items:center; width:48px; height:48px; border:2px solid var(--ink); border-radius:50%; background:var(--paper-light); font-size:27px; }
.signature-skill div { min-width:0; }.signature-skill span { display:block; font-size:9px; font-weight:900; letter-spacing:.08em; color:var(--purple-dark); }.signature-skill strong { display:block; margin:2px 0; font-size:15px; }.signature-skill small { display:block; font-size:10px; line-height:1.35; color:var(--muted); }.signature-skill em { display:block; margin-top:3px; font-style:normal; font-size:10px; font-weight:900; color:var(--red-dark); }
.trait-chip { border: 1px solid var(--line); background: rgba(255,255,255,.42); padding: 7px 10px; border-radius: 18px; font-size: 12px; font-weight: 800; }
.trait-chip:first-child { background: var(--red); color: white; border-color: var(--red); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 13px; }
.stat-cell { border: 1px solid var(--line); background: rgba(255,255,255,.38); padding: 7px 3px; display: grid; gap: 2px; text-align: center; }
.stat-cell span { color: var(--muted); font-size: 9px; }
.stat-cell strong { font-family: serif; font-size: 13px; }
.stat-cell i { display: block; height: 4px; margin: 3px 4px 0; background: rgba(32,33,30,.12); overflow: hidden; }.stat-cell i em { display: block; height: 100%; background: var(--red); }
.stat-origin { margin: 7px auto 0; color: var(--muted); font-size: 10px; line-height: 1.45; max-width: 360px; }
.monster-meta-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }.monster-meta-fields label { display: grid; gap: 4px; text-align: left; color: var(--muted); font-size: 9px; }.monster-meta-fields select, .monster-meta-fields input { min-height: 38px; border: 1px solid var(--line); background: var(--paper-light); padding: 0 8px; }.monster-meta-fields .monster-hint-field { grid-column: 1 / -1; }
.micro-copy { color: var(--muted); text-align: center; font-size: 10px; margin: 4px 0 0; }

.battle-topbar > div:nth-child(2) { display: grid; text-align: center; gap: 1px; }
.battle-topbar strong { font-size: 14px; }
.win-counter { display: flex; align-items: center; gap: 6px; font-size: 12px; }.win-counter span { color: var(--muted); }.win-counter strong { font-size: 20px; color: var(--red); }
.enemy-card { display: flex; align-items: center; gap: 10px; padding: 8px 0 7px; }
.enemy-card h2 { margin: 0 0 1px; font-family: Impact, "Arial Black", sans-serif; font-size: 16px; line-height: 1; letter-spacing: .01em; }.enemy-card p:last-child { max-width: 280px; margin: 0; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.enemy-card .eyebrow { margin-bottom: 2px; font-size: 7px; }
.enemy-seal { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border: 2px solid var(--red); color: var(--red); font-family: Impact, "Arial Black", sans-serif; font-size: 16px; font-weight: 900; transform: rotate(-3deg); }
.duel-dashboard { position: relative; z-index: 12; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.health-block > div:first-child { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; margin-bottom: 4px; }
.health-block > div:first-child span { color: var(--muted); font-variant-numeric: tabular-nums; }
.health-track { height: 13px; border: 2px solid var(--ink); padding: 1px; background: rgba(255,255,255,.65); box-shadow: 2px 2px 0 rgba(32,33,30,.14); }
.health-track span { display: block; height: 100%; width: 100%; background: var(--ink); transition: width .45s ease; }
.enemy-health .health-track span { background: var(--red); }
.battle-loadouts { position: relative; z-index: 12; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 0 6px; }
.battle-loadout { min-width: 0; padding: 7px 8px; border: 2px solid var(--ink); border-radius: 9px 7px 10px 8px; background: rgba(255,250,240,.94); box-shadow: 2px 3px 0 rgba(32,33,30,.18); }
.battle-loadout.rival { text-align: right; }
.battle-loadout > span { display: block; color: var(--red); font-size: 7px; font-weight: 950; letter-spacing: .12em; }
.battle-loadout strong, .battle-loadout small, .battle-loadout b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-loadout strong { margin-top: 1px; font-size: 9px; }
.battle-loadout small { margin-top: 2px; color: var(--muted); font-size: 7px; font-weight: 800; }
.battle-loadout b { margin-top: 3px; color: var(--purple-dark, #4d3fd0); font-size: 8px; }
.signature-meter { display:grid; grid-template-columns:1fr auto; align-items:center; gap:5px; margin-top:5px; }.signature-meter > i { height:7px; overflow:hidden; border:1px solid var(--ink); border-radius:999px; background:rgba(32,33,30,.11); }.signature-meter > i > em { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--purple),#b64cff,var(--red)); transition:width .3s ease; }.signature-meter > small { margin:0; color:var(--ink); font-size:6px; font-weight:950; }.signature-meter.ready > i { box-shadow:0 0 0 2px var(--lime),0 0 12px var(--purple); animation:meter-ready .55s ease-in-out infinite alternate; }.signature-meter.ready > small { color:var(--red); }.enemy-meter > i > em { margin-left:auto; background:linear-gradient(90deg,var(--red),#ff975c); }
@keyframes meter-ready { to { transform:scaleY(1.32); filter:brightness(1.25) } }
.power-gap-badge { position: absolute; z-index: 3; left: 50%; top: 50%; min-width: 78px; padding: 4px 6px; border: 2px solid var(--ink); border-radius: 9px; background: var(--lime); color: var(--ink); font-size: 7px; font-weight: 950; text-align: center; transform: translate(-50%,-50%) rotate(-2deg); box-shadow: 2px 2px 0 var(--ink); }
.power-gap-badge small { display:block; margin-top:1px; font-size:6px; line-height:1; opacity:.76; }
.power-gap-badge.rival { background: #ff685c; color: white; }.power-gap-badge.even { background: white; }
.matchup-card { min-height: 28px; display: flex; align-items: center; gap: 7px; margin-bottom: 6px; padding: 5px 8px; overflow: hidden; border: 0; border-radius: 8px; background: var(--ink); color: white; }
.matchup-card strong { flex: 0 0 auto; padding: 2px 6px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 8px; }
.matchup-card p { min-width: 0; margin: 0; overflow: hidden; color: white; font-size: 8px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.matchup-rows { display: none; }
.arena { height: clamp(300px, 47vh, 430px); min-height: 300px; margin: 0 -22px; position: relative; overflow: hidden; border-block: 4px solid var(--ink); background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(192,154,91,.12)); box-shadow: inset 0 12px 20px rgba(255,255,255,.16), inset 0 -18px 28px rgba(20,18,17,.12); isolation: isolate; }
.battle-act-banner { position:absolute; z-index:24; left:50%; top:12%; display:grid; place-items:center; min-width:150px; padding:7px 16px 8px; color:white; background:var(--ink); border:3px solid white; box-shadow:5px 6px 0 var(--purple); opacity:0; pointer-events:none; transform:translate(-50%,-18px) scale(.72) rotate(-2deg); }.battle-act-banner span { color:var(--lime); font-size:8px; font-weight:950; letter-spacing:.18em; }.battle-act-banner strong { font-family:Impact,"Arial Black",sans-serif; font-size:21px; line-height:1; }.battle-act-banner.show { animation:act-banner .9s cubic-bezier(.2,.8,.2,1) both; }.battle-act-banner.act-2 { box-shadow:5px 6px 0 var(--red); transform:translate(-50%,-18px) scale(.72) rotate(2deg); }.battle-act-banner.act-3 { color:var(--ink); background:var(--lime); border-color:var(--ink); box-shadow:7px 8px 0 var(--red); }.battle-act-banner.act-3 span { color:var(--red); }
@keyframes act-banner { 0% { opacity:0; transform:translate(-50%,-20px) scale(.5) rotate(-5deg) } 20%,68% { opacity:1; transform:translate(-50%,0) scale(1.04) rotate(-1deg) } 100% { opacity:0; transform:translate(-50%,-10px) scale(1.12) rotate(2deg) } }
.signature-stroke { position:absolute; z-index:20; inset:0; display:none; overflow:hidden; pointer-events:none; }.signature-stroke.show { display:block; animation:signature-freeze .98s ease both; }.signature-stroke::before { content:""; position:absolute; inset:0; background:rgba(15,12,22,.7); animation:signature-dark .98s ease both; }.signature-stroke svg { position:absolute; z-index:1; inset:-8%; width:116%; height:116%; overflow:visible; filter:drop-shadow(0 0 7px white) drop-shadow(0 0 14px var(--purple)); }.signature-stroke.side-enemy svg { transform:scaleX(-1); filter:drop-shadow(0 0 7px white) drop-shadow(0 0 14px var(--red)); }.signature-stroke path { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }.signature-main { stroke:var(--lime); stroke-width:5; stroke-dasharray:620; stroke-dashoffset:620; animation:signature-draw .78s cubic-bezier(.2,.8,.2,1) forwards; }.side-enemy .signature-main { stroke:#ff685c; }.signature-echo { stroke:white; stroke-width:12; opacity:.3; stroke-dasharray:36 14; animation:signature-echo .7s ease-out both; }.signature-stroke > span { position:absolute; z-index:3; left:50%; bottom:12%; max-width:90%; padding:8px 14px; color:white; background:var(--ink); border:3px solid white; font-family:Impact,"Arial Black",sans-serif; font-size:clamp(21px,7vw,34px); line-height:1; white-space:nowrap; transform:translateX(-50%) rotate(-2deg); animation:signature-title .88s ease both; }.shape-loop .signature-main { stroke-width:7; }.shape-loop svg { animation:signature-loop .9s ease both; }.shape-zigzag .signature-main { stroke:#ffe45a; }.shape-zigzag svg { animation:signature-zap .18s steps(2,end) 4; }.shape-dense .signature-echo { stroke-width:16; opacity:.45; }.shape-dense svg { animation:signature-barrage .8s ease both; }.shape-straight .signature-main { stroke-width:9; }.shape-straight svg { animation:signature-cut .85s ease both; }.shape-spiral svg { animation:signature-spiral .9s ease both; }
@keyframes signature-freeze { 0%,100% { opacity:0 } 8%,84% { opacity:1 } } @keyframes signature-dark { 0%,100% { opacity:0 } 15%,78% { opacity:1 } } @keyframes signature-draw { 12% { stroke-dashoffset:620 } 70%,100% { stroke-dashoffset:0 } } @keyframes signature-echo { from { stroke-dashoffset:180; opacity:0 } 45% { opacity:.42 } to { stroke-dashoffset:0; opacity:0 } } @keyframes signature-title { 0%,18% { opacity:0; transform:translate(-50%,20px) scale(.55) rotate(-7deg) } 42%,78% { opacity:1; transform:translate(-50%,0) scale(1.08) rotate(-2deg) } 100% { opacity:0; transform:translate(-50%,-12px) scale(1.18) rotate(2deg) } }
@keyframes signature-loop { 50% { transform:scale(1.14) rotate(8deg) } } @keyframes signature-zap { 50% { translate:5px -3px; filter:brightness(2) drop-shadow(0 0 18px #ffe45a) } } @keyframes signature-barrage { 45% { transform:scale(1.08); filter:drop-shadow(12px 0 0 rgba(255,255,255,.35)) drop-shadow(-12px 0 0 rgba(196,255,70,.4)) } } @keyframes signature-cut { 48% { transform:scale(1.35) skewX(-8deg) } } @keyframes signature-spiral { 60% { transform:scale(1.2) rotate(22deg) } }
.arena-sky { position: absolute; width: 185px; height: 185px; border-radius: 50%; background: rgba(184,58,45,.09); left: 50%; top: 46%; transform: translate(-50%,-50%); }
.ground-line { position: absolute; left: 4%; right: 4%; bottom: 11%; height: 7px; background: var(--ink); border-radius: 50%; opacity: .75; box-shadow: 0 9px 0 rgba(32,33,30,.12); }
.combatant { position: absolute; width: 47%; height: 82%; bottom: 11%; display: grid; place-items: end center; z-index: 3; transform-origin: center bottom; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .25s, filter .25s; }
.combatant.player { left: 0; }.combatant.enemy { right: 0; }
.combatant.player svg { width: 100%; height: 100%; }
.combatant.enemy svg { width: 100%; height: 100%; transform: scaleX(-1); filter: grayscale(.2) contrast(1.05); }
.action-label { position: absolute; top: 4%; z-index: 12; max-width: 62%; padding: 7px 11px; border: 3px solid var(--ink); border-radius: 7px; background: var(--lime); box-shadow: 4px 5px 0 var(--ink); font-size: 12px; font-weight: 950; opacity: 0; transform: translateY(-14px) rotate(-2deg); transition: transform .16s, opacity .16s; }.action-label.active { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1.03); }.player-action { left: 4%; }.enemy-action { right: 4%; border-color: var(--ink); background: #ff685c; color: white; text-align: right; transform: translateY(-14px) rotate(2deg); }.enemy-action.active { transform: translateY(0) rotate(2deg) scale(1.03); }
.damage-pop { position: absolute; top: 32%; z-index: 16; color: white; font-family: Impact, "Arial Black", sans-serif; font-size: clamp(44px, 15vw, 72px); font-weight: 950; line-height: .9; white-space: nowrap; opacity: 0; -webkit-text-stroke: 3px var(--ink); text-shadow: 5px 6px 0 var(--red); pointer-events: none; }.player-damage { left: 8%; }.enemy-damage { right: 8%; }.damage-pop.show { animation: damage-pop .72s cubic-bezier(.15,.8,.2,1) both; }
.damage-pop.guard { color: #b9edff; text-shadow: 5px 6px 0 #2f6f8f; }.damage-pop.dodge { color: var(--lime); text-shadow: 5px 6px 0 #318f82; }.damage-pop.critical { color: #ffe45a; font-size: clamp(52px, 17vw, 82px); text-shadow: 6px 7px 0 var(--red); }
@keyframes damage-pop { 0% { opacity:0; transform:translateY(22px) scale(.2) rotate(-7deg) } 24%,58% { opacity:1; transform:translateY(0) scale(1.12) rotate(-3deg) } 100% { opacity:0; transform:translateY(-42px) scale(.88) rotate(3deg) } }
.versus-mark { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); color: rgba(32,33,30,.14); font-family: serif; font-size: 48px; font-weight: 900; z-index: 1; }
.arena.fight .player { transform: translateX(43px) rotate(4deg); }.arena.fight .enemy { transform: translateX(-43px) rotate(-6deg); }
.arena.fight.style-range .player { transform: translateX(8px) rotate(-4deg); }.arena.fight.style-range .impact { left: 66%; }.arena.fight.style-ambush .player { transform: translateX(78px) rotate(8deg); transition-duration: .2s; }.arena.fight.style-defense .player { transform: translateX(18px) scale(1.04); }.arena.fight.style-heavy .player { transform: translateX(47px) rotate(10deg) scale(1.06); }
.arena.fight.enemy-dodge .enemy { transform: translate(18px,-12px) rotate(-9deg); transition-duration: .2s; }.arena.fight.player-dodge .player { transform: translate(-18px,-12px) rotate(8deg); transition-duration: .2s; }
.arena.fight.enemy-guard .enemy { transform: translateX(-18px) scale(1.08); }.arena.fight.player-guard .player { transform: translateX(18px) scale(1.08); }
.arena.fight.enemy-critical .impact, .arena.fight.player-critical .impact { font-size: 42px; color: var(--ink); }
.arena.player-wins .enemy { transform: translate(40px,25px) rotate(32deg); opacity: .34; }.arena.player-wins .player { transform: translateX(60px) rotate(-3deg); }
.arena.player-loses .player { transform: translate(-30px,25px) rotate(-30deg); opacity: .36; }.arena.player-loses .enemy { transform: translateX(-60px) rotate(3deg); }
.impact { position: absolute; display: none; left: 50%; top: 36%; z-index: 14; max-width: 80%; color: white; font-family: Impact, "Arial Black", sans-serif; font-size: clamp(48px, 17vw, 82px); font-weight: 950; line-height: .82; text-align: center; text-transform: uppercase; -webkit-text-stroke: 3px var(--ink); text-shadow: 6px 7px 0 var(--red); transform: translate(-50%,-50%) rotate(-8deg); }
.arena.fight .impact { display: block; animation: impact .62s .12s both; }
@keyframes impact { 0% { opacity:0; transform:translate(-50%,-50%) scale(.15) rotate(-12deg) } 38%,68% { opacity:1; transform:translate(-50%,-50%) scale(1.12) rotate(-5deg) } 100% { opacity:0; transform:translate(-50%,-58%) scale(1.25) rotate(2deg) } }
.impact-ring { position: absolute; z-index: 9; left: 50%; top: 48%; width: 40px; height: 40px; border: 9px solid white; border-radius: 50%; opacity: 0; transform: translate(-50%,-50%) scale(.2); pointer-events: none; }
.arena.fight.impact-now .impact-ring { animation: impact-ring .42s ease-out both; }
@keyframes impact-ring { 0% { opacity:1; transform:translate(-50%,-50%) scale(.2) } 100% { opacity:0; transform:translate(-50%,-50%) scale(6) } }
.arena.fight.impact-now::before { content:""; position:absolute; inset:0; z-index:8; background:white; opacity:0; pointer-events:none; animation:impact-flash .24s ease-out both; }
@keyframes impact-flash { 0%,18% { opacity:.8 } 100% { opacity:0 } }
.arena.fight.impact-now.outcome-hit, .arena.fight.impact-now.outcome-guard { animation:arena-shake .28s linear both; }
.arena.fight.impact-now.outcome-critical { animation:arena-shake-hard .4s linear both; }
@keyframes arena-shake { 0%,100% { transform:translate(0) } 25% { transform:translate(-4px,2px) } 50% { transform:translate(4px,-2px) } 75% { transform:translate(-2px,-1px) } }
@keyframes arena-shake-hard { 0%,100% { transform:translate(0) } 15% { transform:translate(-8px,4px) } 30% { transform:translate(8px,-5px) } 45% { transform:translate(-6px,-3px) } 60% { transform:translate(5px,3px) } 78% { transform:translate(-3px,1px) } }

/* Stage scenery: lightweight CSS landscapes that rotate every five rivals. */
.arena-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.arena.biome-coast { background: linear-gradient(#9edcf0 0 52%, #58b9d2 53% 67%, #e4c685 68%); }
.biome-coast .arena-sky { width: 58px; height: 58px; left: 77%; top: 24%; background: #ffd75d; }
.biome-coast .arena-scene i { position: absolute; left: -8%; width: 116%; height: 20px; border-top: 4px solid rgba(255,255,255,.8); border-radius: 50%; top: 57%; }
.biome-coast .arena-scene i:nth-child(2) { top: 64%; left: -18%; }.biome-coast .arena-scene i:nth-child(3) { display: none; }
.arena.biome-mountain { background: linear-gradient(#d8e9ee 0 66%, #91aa76 67%); }
.biome-mountain .arena-sky { width: 64px; height: 64px; left: 21%; top: 25%; background: #fff3b1; }
.biome-mountain .arena-scene i { position: absolute; bottom: 17%; width: 54%; height: 58%; background: #79918b; clip-path: polygon(50% 0,100% 100%,0 100%); }
.biome-mountain .arena-scene i:nth-child(1) { left: -8%; }.biome-mountain .arena-scene i:nth-child(2) { right: -7%; width: 64%; height: 72%; background: #5e7771; }.biome-mountain .arena-scene i:nth-child(3) { left: 34%; width: 36%; height: 40%; background: #9aad91; }
.arena.biome-river { background: linear-gradient(#cceaf0 0 54%, #8cba72 55% 67%, #5db8cf 68% 84%, #92bd73 85%); }
.biome-river .arena-sky { width: 72px; height: 72px; left: 72%; top: 24%; background: #fff2aa; }
.biome-river .arena-scene i { position: absolute; top: 70%; width: 30%; height: 3px; background: rgba(255,255,255,.8); border-radius: 50%; }.biome-river .arena-scene i:nth-child(1) { left: 7%; }.biome-river .arena-scene i:nth-child(2) { left: 44%; top: 77%; }.biome-river .arena-scene i:nth-child(3) { right: 3%; top: 72%; }
.arena.biome-night { background: radial-gradient(circle at 18% 22%, #fff 0 2px, transparent 3px), radial-gradient(circle at 72% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 88% 13%, #fff 0 2px, transparent 3px), linear-gradient(#16233e 0 68%, #354c42 69%); }
.biome-night .arena-sky { width: 54px; height: 54px; left: 74%; top: 26%; background: #fff2b8; box-shadow: -16px 0 0 #16233e; }
.biome-night .arena-scene i { position: absolute; bottom: 17%; width: 34%; height: 35%; background: #243a36; clip-path: polygon(50% 0,100% 100%,0 100%); }.biome-night .arena-scene i:nth-child(1) { left: -4%; }.biome-night .arena-scene i:nth-child(2) { right: -3%; }.biome-night .arena-scene i:nth-child(3) { left: 34%; height: 24%; }
.biome-night .action-label { background: rgba(255,250,240,.94); }
.arena.biome-forest { background: linear-gradient(#b9ddd0 0 65%, #668f58 66%); }
.biome-forest .arena-sky { width:52px; height:52px; left:76%; top:20%; background:#f7d875; }
.biome-forest .arena-scene i { position:absolute; bottom:15%; width:20%; height:60%; background:#355e45; clip-path:polygon(44% 0,62% 0,66% 42%,100% 66%,64% 62%,72% 100%,31% 100%,39% 61%,0 68%,35% 42%); }
.biome-forest .arena-scene i:nth-child(1){left:2%}.biome-forest .arena-scene i:nth-child(2){right:3%;height:72%}.biome-forest .arena-scene i:nth-child(3){left:42%;height:48%;opacity:.5}
.arena.biome-snow { background: linear-gradient(#bad9ee 0 62%, #eef8fb 63%); }
.biome-snow .arena-sky { width:48px;height:48px;left:20%;top:22%;background:#fff7cf; }
.biome-snow .arena-scene i { position:absolute; bottom:16%; width:55%; height:44%; background:#d8edf5; clip-path:polygon(50% 0,100% 100%,0 100%); }
.biome-snow .arena-scene i:nth-child(1){left:-9%}.biome-snow .arena-scene i:nth-child(2){right:-7%;height:58%;background:#c5e1ed}.biome-snow .arena-scene i:nth-child(3){left:35%;width:34%;height:30%;background:white}
.arena.biome-volcano { background: linear-gradient(#6d3440 0 60%, #3c2a2b 61%); }
.biome-volcano .arena-sky { width:62px;height:62px;left:76%;top:22%;background:#ff6b38;box-shadow:0 0 28px #ffad45; }
.biome-volcano .arena-scene i { position:absolute; bottom:15%; width:55%; height:58%; background:#392629; clip-path:polygon(50% 0,100% 100%,0 100%); }
.biome-volcano .arena-scene i:nth-child(1){left:-10%}.biome-volcano .arena-scene i:nth-child(2){right:-9%;height:72%}.biome-volcano .arena-scene i:nth-child(3){left:46%;bottom:12%;width:8%;height:45%;background:#ff6b38;clip-path:none;box-shadow:0 0 15px #ffad45}
.arena.biome-city { background: linear-gradient(#f2c9b8 0 61%, #7b8490 62%); }
.biome-city .arena-sky { width:52px;height:52px;left:20%;top:20%;background:#ffe56b; }
.biome-city .arena-scene i { position:absolute; bottom:16%; width:25%; height:52%; background:#4d5360; box-shadow:inset 10px 0 rgba(255,255,255,.08); }
.biome-city .arena-scene i:nth-child(1){left:1%}.biome-city .arena-scene i:nth-child(2){right:2%;height:68%;width:31%}.biome-city .arena-scene i:nth-child(3){left:38%;height:38%;background:#68717a}
.arena[class*="biome-"] .ground-line { background: rgba(32,33,30,.72); z-index: 1; }

/* A single lead action per turn makes each combat style readable at a glance. */
.arena.fight .player, .arena.fight .enemy { transform: none; }
.battle-effect { position: absolute; z-index: 6; left: 50%; top: 46%; color: var(--red); font-size: 42px; font-weight: 900; opacity: 0; pointer-events: none; text-shadow: 2px 2px var(--paper-light); }
.arena.fight.lead-player.action-melee .player { animation: melee-player .7s ease both; }
.arena.fight.lead-enemy.action-melee .enemy { animation: melee-enemy .7s ease both; }
@keyframes melee-player { 0%,100% { transform:translateX(0) rotate(0) } 55% { transform:translateX(72px) rotate(9deg) } }
@keyframes melee-enemy { 0%,100% { transform:translateX(0) rotate(0) } 55% { transform:translateX(-72px) rotate(-9deg) } }
.arena.fight.action-range .battle-effect { opacity: 1; animation: shot-player .62s ease-in both; }
.arena.fight.action-range .battle-effect.side-enemy { animation-name: shot-enemy; }
@keyframes shot-player { from { left:27%; transform:scale(.6) } to { left:72%; transform:scale(1.25) } }
@keyframes shot-enemy { from { left:72%; transform:scale(.6) rotate(180deg) } to { left:27%; transform:scale(1.25) rotate(180deg) } }
.arena.fight.lead-player.action-ambush .player { animation: ambush-player .7s steps(2,end) both; }
.arena.fight.lead-enemy.action-ambush .enemy { animation: ambush-enemy .7s steps(2,end) both; }
@keyframes ambush-player { 0% { opacity:1 } 35% { opacity:0; transform:translateX(-22px) } 55% { opacity:.25; transform:translateX(92px) } 100% { opacity:1; transform:translateX(58px) } }
@keyframes ambush-enemy { 0% { opacity:1 } 35% { opacity:0; transform:translateX(22px) } 55% { opacity:.25; transform:translateX(-92px) } 100% { opacity:1; transform:translateX(-58px) } }
.arena.fight.action-defense .battle-effect { opacity: 1; color: #2f6f8f; font-size: 86px; top: 32%; animation: guard-ring .65s ease-out both; }
.arena.fight.action-defense .battle-effect.side-player { left: 23%; }.arena.fight.action-defense .battle-effect.side-enemy { left: 69%; }
@keyframes guard-ring { from { transform:scale(.25); opacity:0 } 45% { opacity:1 } to { transform:scale(1.1); opacity:.2 } }
.arena.fight.lead-player.action-heavy .player { animation: heavy-player .82s cubic-bezier(.2,.8,.2,1) both; }
.arena.fight.lead-enemy.action-heavy .enemy { animation: heavy-enemy .82s cubic-bezier(.2,.8,.2,1) both; }
@keyframes heavy-player { 0% { transform:translateY(0) rotate(0) } 35% { transform:translate(-8px,-25px) rotate(-12deg) } 70%,100% { transform:translate(63px,5px) rotate(16deg) } }
@keyframes heavy-enemy { 0% { transform:translateY(0) rotate(0) } 35% { transform:translate(8px,-25px) rotate(12deg) } 70%,100% { transform:translate(-63px,5px) rotate(-16deg) } }
.arena.fight.action-magic .battle-effect { opacity: 1; font-size: 58px; animation: magic-player .78s ease-in-out both; }
.arena.fight.action-magic .battle-effect.side-enemy { animation-name: magic-enemy; }
@keyframes magic-player { 0% { left:27%; transform:scale(.2) rotate(0) } 45% { transform:scale(1.5) rotate(180deg) } 100% { left:70%; transform:scale(.7) rotate(360deg) } }
@keyframes magic-enemy { 0% { left:72%; transform:scale(.2) rotate(0) } 45% { transform:scale(1.5) rotate(-180deg) } 100% { left:28%; transform:scale(.7) rotate(-360deg) } }
.arena.fight.skill-active .battle-effect { opacity:1; font-size:54px; }
.arena.fight.skill-ranged .battle-effect { animation:skill-shot-player .75s ease-in-out both; }.arena.fight.skill-ranged .battle-effect.side-enemy { animation-name:skill-shot-enemy; }
.arena.fight.skill-self .battle-effect { animation:skill-self .75s ease-out both; }.arena.fight.skill-self .battle-effect.side-player { left:27%; }.arena.fight.skill-self .battle-effect.side-enemy { left:72%; }
.arena.fight.skill-melee.lead-player .player { animation:skill-melee-player .75s cubic-bezier(.2,.8,.2,1) both; }.arena.fight.skill-melee.lead-enemy .enemy { animation:skill-melee-enemy .75s cubic-bezier(.2,.8,.2,1) both; }
@keyframes skill-shot-player { from { left:26%; transform:scale(.35) rotate(-20deg) } 55% { transform:scale(1.45) rotate(12deg) } to { left:72%; transform:scale(.8) } }
@keyframes skill-shot-enemy { from { left:72%; transform:scale(.35) rotate(20deg) } 55% { transform:scale(1.45) rotate(-12deg) } to { left:27%; transform:scale(.8) } }
@keyframes skill-self { from { transform:scale(.25); opacity:0 } 50% { transform:scale(1.5); opacity:1 } to { transform:scale(.9); opacity:.25 } }
@keyframes skill-melee-player { 0%,100% { transform:translateX(0) } 45% { transform:translate(28px,-18px) rotate(-9deg) } 70% { transform:translateX(78px) rotate(13deg) } }
@keyframes skill-melee-enemy { 0%,100% { transform:translateX(0) } 45% { transform:translate(-28px,-18px) rotate(9deg) } 70% { transform:translateX(-78px) rotate(-13deg) } }
.arena.fight::after { content:""; position:absolute; inset:-20%; z-index:2; opacity:.18; pointer-events:none; background:repeating-linear-gradient(105deg, transparent 0 26px, rgba(255,255,255,.9) 27px 31px, transparent 32px 46px); transform:translateX(-30%); animation:speed-lines .52s ease-out both; }
.arena.fight.lead-enemy::after { transform:translateX(30%) scaleX(-1); }
@keyframes speed-lines { from { opacity:0; translate:-18% 0 } 45% { opacity:.28 } to { opacity:0; translate:18% 0 } }
.arena.fight.impact-now.target-enemy.outcome-hit .enemy { animation:recoil-enemy .38s ease-out both; }
.arena.fight.impact-now.target-player.outcome-hit .player { animation:recoil-player .38s ease-out both; }
.arena.fight.impact-now.target-enemy.outcome-critical .enemy { animation:recoil-enemy-hard .48s ease-out both; filter:brightness(1.8) saturate(1.5); }
.arena.fight.impact-now.target-player.outcome-critical .player { animation:recoil-player-hard .48s ease-out both; filter:brightness(1.8) saturate(1.5); }
@keyframes recoil-enemy { 35% { transform:translate(24px,-7px) rotate(12deg) } }
@keyframes recoil-player { 35% { transform:translate(-24px,-7px) rotate(-12deg) } }
@keyframes recoil-enemy-hard { 30% { transform:translate(46px,-20px) rotate(24deg) scale(.92) } 70% { transform:translate(20px,0) rotate(10deg) } }
@keyframes recoil-player-hard { 30% { transform:translate(-46px,-20px) rotate(-24deg) scale(.92) } 70% { transform:translate(-20px,0) rotate(-10deg) } }
.turn-report { position: fixed; z-index: 125; left: 50%; bottom: calc(70px + env(safe-area-inset-bottom)); width: min(calc(100vw - 24px), 430px); padding: 0 10px; pointer-events: none; transform: translateX(-50%); transition: opacity .18s ease, transform .18s ease; }
.turn-report.hidden { display: none; }
.turn-chat-stack { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 10px; border: 3px solid var(--ink); border-radius: 12px; background: rgba(255,250,240,.97); box-shadow: 5px 6px 0 rgba(32,33,30,.34); animation: turn-chat-in .18s ease both; }
.turn-chat-turn { flex: 0 0 auto; padding: 4px 6px; border-radius: 5px; background: var(--ink); color: white; font-size: 8px; font-weight: 950; }
.turn-chat-action { min-width: 0; overflow: hidden; font-size: 11px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.turn-chat-result { flex: 0 0 auto; color: var(--red); font-family: Impact, "Arial Black", sans-serif; font-size: 20px; letter-spacing: .02em; }.turn-chat-result.dodge { color:#318f82; }.turn-chat-result.guard { color:#2f6f8f; }.turn-chat-result.critical { color:var(--red); }
.turn-chat-edge { flex: 0 0 auto; padding: 3px 6px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 7px; font-weight: 950; }
.turn-report.fading { opacity: 0; transform: translate(-50%, -8px); }
@keyframes turn-chat-in { from { opacity:0; transform:translateY(14px) } }
.auto-battle-panel { min-height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 5px; font-size: 10px; }.auto-battle-panel.hidden { display: none; }.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1s infinite; }@keyframes pulse { 50% { opacity:.25; transform:scale(.65) } }
.result-panel { position: fixed; inset: 0; z-index: 170; width: min(100%, 460px); height: 100dvh; min-height: 100svh; margin: 0 auto; display: grid; place-items: center; padding: calc(22px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom)); }
.result-panel.hidden { display: none; }
.result-backdrop { position: absolute; inset: 0; background: rgba(20,18,17,.72); backdrop-filter: blur(4px); }
.result-card { position: relative; width: min(100%, 390px); max-height: min(78vh, 560px); overflow-y: auto; padding: 22px 20px 20px; border: 4px solid var(--ink); border-radius: 18px 12px 20px 13px; background: var(--paper-light); box-shadow: 10px 12px 0 var(--purple, #6c5cff); animation: result-card-in .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes result-card-in { from { opacity:0; transform:translateY(24px) scale(.88) rotate(-2deg) } to { opacity:1; transform:none } }
.result-stamp { float: right; border: 3px double var(--red); color: var(--red); padding: 6px; font-family: serif; font-weight: 900; font-size: 18px; transform: rotate(-6deg); }
.result-stamp.loss { color: var(--ink); border-color: var(--ink); }.result-card h3 { font-family: serif; font-size: 21px; margin: 0 62px 7px 0; }
#result-explanation { clear: both; margin: 14px 0 16px; }
.result-reasons { display: grid; gap: 9px; }
.result-reason { padding: 12px; border: 2px solid var(--ink); background: rgba(196,255,70,.34); }
.result-reason strong { color: var(--ink); font-size: 14px; line-height: 1.35; }
.result-final-hit { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:var(--ink); color:white; }
.result-final-hit span { min-width:0; overflow:hidden; font-size:10px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }.result-final-hit b { flex:0 0 auto; color:var(--lime); font-family:Impact,"Arial Black",sans-serif; font-size:22px; }
.result-card .primary-button { width: 100%; min-height: 49px; }

#summary-screen { text-align: center; }
.summary-medal { margin: 28px auto 13px; width: 76px; height: 76px; display: grid; place-items: center; border: 4px double var(--red); color: var(--red); font-family: serif; font-size: 37px; font-weight: 900; transform: rotate(-4deg); }
#summary-title { font-family: serif; font-size: 32px; margin: 0; }
.summary-fighter { height: min(34vh, 270px); display: grid; place-items: center; }.summary-fighter svg { width: 230px; height: 230px; }
.record-row { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--line); padding: 13px 0; }
.record-row > div { display: grid; gap: 3px; border-right: 1px solid var(--line); }.record-row > div:last-child { border: 0; }.record-row strong { font-family: serif; font-size: 22px; }.record-row span { color: var(--muted); font-size: 10px; }
.summary-line { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 14px 8px 0; }
.account-save-card { margin:14px 0 0; padding:13px 14px; border:3px solid var(--ink); border-radius:14px 10px 16px 11px; background:var(--lime, #c4ff46); box-shadow:5px 6px 0 var(--ink); display:grid; gap:4px; text-align:left; }
.account-save-card > span { color:var(--purple-dark, #4d3fd0); font-size:8px; font-weight:950; letter-spacing:.12em; }
.account-save-card > strong { font-family:serif; font-size:18px; }
.account-save-card > p { margin:0 0 6px; color:var(--ink); font-size:10px; line-height:1.45; }
.account-save-card > button { width:100%; min-height:40px; border:2px solid var(--ink); background:var(--purple, #6c5cff); color:white; }
.account-save-card.synced { background:rgba(255,255,255,.42); box-shadow:3px 4px 0 rgba(32,33,30,.16); }
.account-save-card.synced > button { background:var(--paper-light); color:var(--ink); }

.account-modal { position:fixed; inset:0; z-index:130; display:none; place-items:end center; }
.account-modal[aria-hidden="false"] { display:grid; }
.account-modal-backdrop { position:absolute; inset:0; background:rgba(24,22,30,.58); backdrop-filter:blur(4px); }
.account-modal-card { position:relative; width:min(100%, 430px); max-height:calc(100dvh - 32px); overflow:auto; padding:20px 18px max(22px, env(safe-area-inset-bottom)); border:3px solid var(--ink); border-radius:24px 24px 0 0; background:var(--paper-light, #fffdf6); box-shadow:0 -8px 0 rgba(32,33,30,.22); animation:account-sheet-in .22s ease-out; }
@keyframes account-sheet-in { from { transform:translateY(24px); opacity:.25; } }
.account-modal-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.account-modal-card header span { color:var(--purple-dark, #4d3fd0); font-size:8px; font-weight:950; letter-spacing:.14em; }
.account-modal-card h2 { margin:3px 0 0; font-family:serif; font-size:22px; }
.account-modal-card header button { width:34px; height:34px; flex:none; border:2px solid var(--ink); border-radius:50%; background:white; font-size:22px; font-weight:900; }
.account-modal-card > p { margin:12px 0 16px; color:#53534e; font-size:11px; line-height:1.55; }
.account-provider-list { display:grid; gap:10px; }
.account-provider-heading { display:block; margin:14px 0 7px; color:#74746d; font-size:8px; font-weight:900; letter-spacing:.08em; }
.account-provider { width:100%; min-height:48px; padding:8px 12px; border:2px solid var(--ink); border-radius:12px; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:8px; text-align:left; box-shadow:3px 4px 0 var(--ink); }
.account-provider i { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:950; }
.account-provider strong { font-size:12px; }
.account-provider small { font-size:8px; opacity:.62; }
.account-provider.kakao { background:#fee500; color:#191919; }
.account-provider.kakao i { background:#191919; color:#fee500; }
.account-provider.apple { background:#050505; color:white; }
.account-provider.apple i { background:white; color:#050505; font-size:10px; }
.account-provider:disabled { filter:grayscale(1); opacity:.48; box-shadow:none; }
.account-google-slot { min-height:48px; display:grid; place-items:center; overflow:hidden; border-radius:12px; }
.account-google-slot > div { width:100% !important; }
.account-google-slot iframe { width:100% !important; }
.account-signed-in { padding:18px 10px; display:grid; justify-items:center; gap:5px; border:2px dashed rgba(32,33,30,.35); border-radius:14px; }
.account-signed-in.hidden { display:none; }
.account-avatar { width:54px; height:54px; overflow:hidden; border:3px solid var(--ink); border-radius:50%; display:grid; place-items:center; background:var(--lime, #c4ff46); font-size:22px; font-weight:950; }
.account-avatar img { width:100%; height:100%; object-fit:cover; }
.account-signed-in > strong { margin-top:5px; font-size:14px; }
.account-signed-in > span, .account-signed-in > small { color:#6e6e68; font-size:9px; }
.account-signed-in .secondary-button { width:100%; margin-top:10px; }
.account-privacy-note { display:block; margin-top:14px; color:#77776f; font-size:8px; line-height:1.45; text-align:center; }

#archive-screen .topbar > div { text-align: center; }.archive-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 11px; padding: 20px 0 40px; overflow-y: auto; }
.archive-overview { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.3); display: flex; align-items: center; justify-content: space-between; }
.archive-overview > div { display: grid; gap: 2px; }.archive-overview strong { font-family: serif; font-size: 19px; }.archive-overview span { color: var(--muted); font-size: 9px; }
.small-button { border: 1px solid var(--line); background: var(--paper-light); padding: 8px 10px; font-size: 10px; font-weight: 900; border-radius: 4px; cursor: pointer; }
.archive-card { border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.37); padding: 10px; text-align: left; box-shadow: 0 8px 18px rgba(47,35,20,.05); }
.archive-card.active-fighter { border-color: rgba(184,58,45,.55); box-shadow: inset 0 3px var(--red), 0 8px 18px rgba(47,35,20,.05); }
.archive-card.inactive-fighter svg { opacity: .43; filter: grayscale(1); }
.archive-card svg { width: 100%; height: 135px; display: block; background: rgba(255,250,240,.45); }.archive-card h3 { margin: 9px 0 3px; font-family: serif; font-size: 16px; }.archive-card p { margin: 0; color: var(--muted); font-size: 10px; }.archive-card .record-tag { color: var(--red); font-weight: 900; float: right; }
.archive-skill { display:block; margin:5px 0 8px; font-size:10px; font-weight:900; color:var(--purple-dark); }
.fighter-toggle { width: 100%; margin-top: 10px; min-height: 34px; border: 1px solid var(--line); background: rgba(255,255,255,.42); font-size: 9px; font-weight: 900; cursor: pointer; }
.active-fighter .fighter-toggle { background: var(--ink); color: var(--paper); }
.archive-empty { margin: auto 0; text-align: center; }.archive-empty.hidden { display: none; }.empty-scroll { width: 80px; height: 100px; margin: 0 auto 17px; border: 2px solid var(--line); display: grid; place-items: center; font-family: serif; font-size: 42px; color: var(--muted); }.archive-empty h3 { font-family: serif; }.archive-empty p { color: var(--muted); font-size: 13px; }.archive-empty .primary-button { margin: 22px auto 0; }

#fortress-screen { overflow-y: auto; }
#fortress-screen .topbar > div { text-align: center; } #fortress-title { font-family: serif; margin: 2px 0 0; font-size: 20px; }
.lord-card { margin-top: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.3); padding: 12px; }
.lord-card label { font-size: 10px; font-weight: 900; }.lord-card > div { display: flex; margin-top: 6px; }.lord-card input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--paper-light); padding: 10px; outline: none; }.lord-card button { border: 0; background: var(--ink); color: var(--paper); padding: 0 14px; font-size: 10px; font-weight: 900; }.lord-card p { color: var(--muted); font-size: 9px; line-height: 1.5; margin: 8px 0 0; }
.rank-card { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 11px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.tier-emblem { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 4px double var(--gold); color: #8f6826; font-family: serif; font-size: 23px; font-weight: 900; background: rgba(201,154,66,.12); }.rank-card span { font-size: 9px; color: var(--muted); }.rank-card h3 { margin: 2px 0; font-family: serif; }.rank-card p { margin: 0; font-size: 10px; color: var(--muted); }.rank-limit { text-align: right; display: grid; gap: 2px; }.rank-limit strong { color: var(--red); font-size: 16px; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin: 17px 0 8px; }.section-title h3 { margin: 2px 0 0; font-family: serif; font-size: 18px; }.lineup-help { margin: 0 0 10px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.fortress-lineup { display: grid; gap: 7px; }.lineup-slot { min-height: 64px; border: 1px solid var(--line); background: rgba(255,255,255,.3); display: grid; grid-template-columns: 25px 60px 1fr; align-items: center; padding: 4px 9px 4px 4px; }.lineup-slot > span { font-family: serif; color: var(--red); font-weight: 900; text-align: center; }.lineup-slot svg { width: 58px; height: 58px; }.lineup-slot > div:last-child { display: grid; gap: 3px; min-width: 0; }.lineup-slot strong { font-family: serif; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.lineup-slot small { color: var(--muted); font-size: 9px; }.empty-fighter { width: 44px; height: 44px; display: grid; place-items: center; border: 1px dashed var(--line); color: var(--muted); font-family: serif; font-size: 22px; }
.defense-section { padding-bottom: 40px; }.small-button:disabled { opacity: .4; }.defense-log { display: grid; gap: 7px; }.empty-defense { border: 1px dashed var(--line); color: var(--muted); text-align: center; padding: 24px 10px; font-size: 10px; line-height: 1.6; }.defense-entry { display: grid; grid-template-columns: 57px 1fr 30px; gap: 9px; align-items: start; padding: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.3); }.defense-entry > span { font-size: 9px; font-weight: 900; color: var(--red); }.defense-entry.loss > span { color: var(--ink); }.defense-entry strong { font-size: 11px; }.defense-entry p { margin: 3px 0 0; font-size: 9px; color: var(--muted); line-height: 1.45; }.defense-entry b { font-size: 12px; color: var(--red); text-align: right; }.defense-entry.loss b { color: var(--ink); }

#admin-screen { overflow-y: auto; } #admin-screen .topbar > div { text-align: center; } #admin-title { margin: 2px 0 0; font-family: serif; font-size: 20px; }
.admin-notice { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--gold); background: rgba(201,154,66,.1); color: var(--muted); font-size: 9px; line-height: 1.5; }.admin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }.admin-actions .primary-button { grid-column: 1 / -1; min-height: 49px; }.import-button { display: grid; place-items: center; }.import-button input { display: none; }.admin-section { padding-bottom: 8px; }.admin-section select { border: 1px solid var(--line); background: var(--paper-light); min-height: 34px; padding: 0 7px; font-size: 9px; }.admin-stage-lineup { display: grid; gap: 5px; }.admin-stage-slot { display: grid; grid-template-columns: 24px 54px 1fr 30px; align-items: center; min-height: 58px; border: 1px solid var(--line); background: rgba(255,255,255,.3); padding: 3px 5px; }.admin-stage-slot > b { color: var(--red); font-family: serif; }.admin-stage-slot svg { width: 52px; height: 52px; }.admin-stage-slot > span { display: grid; gap: 2px; }.admin-stage-slot small { color: var(--muted); font-size: 8px; }.admin-stage-slot button { border: 0; background: transparent; font-size: 17px; }.admin-stage-slot.empty { grid-template-columns: 24px 1fr; color: var(--muted); font-size: 9px; min-height: 42px; }.monster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.monster-card { border: 1px solid var(--line); background: rgba(255,255,255,.34); padding: 8px; }.monster-card svg { width: 100%; height: 120px; }.monster-card > div:nth-child(2) { display: grid; gap: 3px; }.monster-card span { color: var(--gold); font-size: 10px; letter-spacing: 1px; }.monster-card strong { font-family: serif; font-size: 13px; }.monster-card small { color: var(--muted); font-size: 8px; line-height: 1.4; }.monster-card-actions { display: grid; gap: 4px; margin-top: 8px; }.monster-card-actions button { min-height: 31px; border: 1px solid var(--line); background: var(--paper-light); font-size: 8px; font-weight: 800; }.monster-card-actions button:last-child { color: var(--red); background: transparent; }.monster-card-actions button:disabled { opacity: .35; }
.builtin-monster-card { grid-column: 1 / -1; display: grid; grid-template-columns: 104px 1fr; gap: 8px; align-items: center; }.builtin-monster-card > svg { width: 104px; height: 104px; grid-row: 1 / span 2; }.builtin-monster-card > div:nth-child(2) { align-self: end; }.builtin-monster-card span i { margin-left: 4px; padding: 2px 4px; background: rgba(184,58,45,.12); color: var(--red); font-style: normal; font-size: 7px; }
.builtin-actions { grid-column: 2; grid-template-columns: repeat(2,1fr); margin-top: 0; }.builtin-actions button:last-child { color: var(--ink); background: var(--paper-light); }.builtin-actions .reset-button { color: var(--red); background: transparent; }
.builtin-edit-form { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 9px; border: 1px solid var(--gold); background: rgba(255,250,240,.72); }.builtin-edit-form label { display: grid; gap: 3px; color: var(--muted); font-size: 8px; }.builtin-edit-form label.wide { grid-column: 1 / -1; }.builtin-edit-form input, .builtin-edit-form select { width: 100%; min-width: 0; min-height: 35px; padding: 0 7px; border: 1px solid var(--line); background: white; font-size: 9px; }.builtin-edit-form > button { min-height: 34px; border: 1px solid var(--ink); background: var(--ink); color: white; font-size: 8px; font-weight: 900; }.builtin-edit-form > button:last-child { background: transparent; color: var(--ink); }

.analytics-summary { display:grid; gap:9px; }.analytics-loading { padding:22px 10px; border:1px dashed var(--line); color:var(--muted); text-align:center; font-size:10px; }
.analytics-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }.analytics-metric { padding:10px 6px; border:2px solid var(--ink); background:var(--lime); text-align:center; box-shadow:3px 3px 0 var(--ink); }.analytics-metric:nth-child(2) { background:#fff; }.analytics-metric:nth-child(3) { background:rgba(108,92,255,.18); }.analytics-metric span { display:block; font-size:7px; font-weight:950; }.analytics-metric strong { display:block; margin-top:3px; font-family:Impact,"Arial Black",sans-serif; font-size:21px; }
.analytics-funnel { display:grid; gap:4px; }.analytics-funnel-row { display:grid; grid-template-columns:94px 1fr 30px; align-items:center; gap:6px; font-size:8px; }.analytics-funnel-row i { height:9px; border:1px solid var(--ink); background:#fff; overflow:hidden; }.analytics-funnel-row i b { display:block; height:100%; min-width:2px; background:var(--purple); }.analytics-funnel-row > b { text-align:right; }
.analytics-days { width:100%; border-collapse:collapse; font-size:8px; }.analytics-days th,.analytics-days td { padding:6px 4px; border-bottom:1px solid var(--line); text-align:right; }.analytics-days th:first-child,.analytics-days td:first-child { text-align:left; }
.analytics-open-link { color:var(--ink); text-decoration:none; }.analytics-refresh-button { width:100%; margin-top:7px; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%,18px); background: var(--ink); color: white; padding: 10px 16px; border-radius: 22px; opacity: 0; pointer-events: none; transition: .25s; font-size: 12px; white-space: nowrap; }.toast.show { opacity: 1; transform: translate(-50%,0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-height: 720px) {
  .hero-art { height: 33vh; min-height: 235px; }
  .home-copy > p:last-child { display: none; }
  .home-deck-card { margin-top: 8px; padding-block: 7px; }.home-deck-heading { margin-bottom: 5px; }
  .canvas-frame { max-height: 44vh; }
  .draw-copy { padding: 8px 0 10px; }
  .fighter-reveal { height: 32vh; }
  .arena { height: 30vh; }
  .onboarding-card { min-height: 0; padding-top: 12px; }
  .onboarding-visual { width: 94px; height: 94px; margin: 4px auto 10px; font-size: 44px; }
  .onboarding-copy { min-height: 122px; }
  .onboarding-copy h2 { font-size: 25px; }
  .onboarding-copy > p:last-child { font-size: 12px; }
  .onboarding-dots { margin: 5px 0 10px; }
}

@media (min-width: 461px) { body { padding: 18px 0; }.app-shell, .screen { min-height: calc(100dvh - 36px); }.app-shell { border-radius: 22px; }.screen { min-height: calc(100dvh - 36px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }