:root {
  --ink: #181817;
  --paper: #f4f0e7;
  --paper-deep: #e6dfd2;
  --red: #e54838;
  --red-dark: #b92f25;
  --teal: #11a5a5;
  --teal-dark: #087b7c;
  --yellow: #f2c94c;
  --muted: #77736b;
  --line: #cfc7b9;
}
[hidden] { display: none !important; }

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; color: var(--ink); background: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
button { font: inherit; }
button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.game-shell { min-height: 100vh; min-height: 100dvh; background-color: var(--paper); background-image: radial-gradient(#cbc3b5 0.8px, transparent 0.8px); background-size: 18px 18px; }
.topbar { min-height: calc(72px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(clamp(18px, 4vw, 64px), env(safe-area-inset-right)) 0 max(clamp(18px, 4vw, 64px), env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; color: #fff; background: var(--ink); border-bottom: 5px solid var(--yellow); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { border-radius: 9px; }
.brand strong { display: block; font-size: 20px; }
.brand span { display: block; margin-top: 2px; color: #a9a7a1; font-size: 11px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.economy-bar { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 5px 3px 9px; color: #fff; background: #2a2926; border: 1px solid #59564f; border-radius: 4px; font-size: 10px; font-weight: 900; }
.shop-button { min-height: 26px; padding: 0 8px; color: var(--ink); background: var(--yellow); border: 1px solid var(--yellow); border-radius: 3px; cursor: pointer; font-size: 10px; font-weight: 900; }
.icon-button { width: 38px; height: 38px; border: 1px solid #494846; border-radius: 6px; color: #fff; background: #282827; cursor: pointer; font-weight: 800; font-size: 19px; }
.icon-button:hover { background: #3b3a38; }
main { width: min(1440px, 100%); margin: 0 auto; padding: 20px max(clamp(14px, 3vw, 42px), env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(clamp(14px, 3vw, 42px), env(safe-area-inset-left)); }
.turn-banner { min-height: 64px; display: flex; align-items: center; gap: 13px; padding: 10px 16px; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--red); box-shadow: 0 3px 0 rgba(24,24,23,.08); }
.turn-banner small { display: block; color: var(--muted); font-size: 10px; font-weight: 700; }
.turn-banner strong { display: block; margin-top: 2px; font-size: 15px; }
.turn-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 6px rgba(229,72,56,.14); }
.round-tag { margin-left: auto; padding: 7px 10px; color: #fff; background: var(--ink); border-radius: 4px; font-size: 12px; font-weight: 700; }
.arena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; margin-top: 18px; }
.player-panel, .center-stage { min-width: 0; }
.player-panel { position: relative; padding: 22px; background: #ebe5da; border: 2px solid #bfb7aa; box-shadow: 5px 5px 0 #c7bfb2; transition: transform .2s, border-color .2s, background .2s; overflow: hidden; }
.player-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: #aaa; }
.player-panel.active { transform: translateY(-3px); background: #fffdfa; }
.player-one.active { border-color: var(--red); box-shadow: 5px 5px 0 rgba(229,72,56,.3); }
.player-two.active { border-color: var(--teal); box-shadow: 5px 5px 0 rgba(17,165,165,.3); }
.player-one::before { background: var(--red); }
.player-two::before { background: var(--teal); }
.player-heading { display: flex; gap: 11px; align-items: center; min-width: 0; }
.player-heading > div:first-of-type { min-width: 0; }
.player-badge { display: grid; place-items: center; width: 43px; height: 43px; padding: 0; color: #fff; background: var(--red); border-radius: 50%; border: 3px solid var(--ink); font: inherit; font-weight: 900; cursor: pointer; }
.player-avatar:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.player-badge.avatar-action, .team-player-avatar.avatar-action { cursor: pointer; outline: 3px solid var(--yellow); outline-offset: 3px; animation: targetPulse 1.1s ease-in-out infinite; }
.player-two .player-badge { background: var(--teal); }
.player-heading h2 { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; }
.status-copy { margin: 2px 0 0; color: var(--red); font-size: 11px; font-weight: 700; }
.player-two .status-copy { color: var(--teal-dark); }
.item-counts { margin-left: auto; display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 58%; min-width: 0; }
.shield-count, .super-count, .revive-count, .reflect-count, .sky-count, .rage-count, .qian-count, .blood-count { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--line); background: #fff; border-radius: 4px; }
.shield-count span { color: #188ac7; }
.sky-count span { color: #4b76c6; }
.revive-count span { color: var(--red); }
.reflect-count span { color: #8f42a8; font-weight: 900; }
.rage-count span { color: #c15b2f; font-weight: 900; }
.qian-count span { color: #4b76c6; font-weight: 900; }
.blood-count span { color: #b33a4a; font-weight: 900; }
.health-row { margin-top: 22px; }
.health-label { display: flex; justify-content: space-between; align-items: baseline; }
.health-label span { color: var(--muted); font-size: 11px; font-weight: 700; }
.health-label strong { font-size: 28px; }
.health-label strong::after { content: " HP"; color: var(--muted); font-size: 10px; }
.health-track { height: 12px; margin-top: 7px; background: #d3cec5; border: 2px solid var(--ink); overflow: hidden; }
.health-fill { height: 100%; width: 100%; background: var(--red); transition: width .45s, background .3s; }
.player-two .health-fill { background: var(--teal); }
.hand-label { margin-top: 24px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(80px, 1fr)); gap: 14px; margin-top: 9px; }
.number-card { position: relative; display: grid; place-items: center; min-height: 164px; border: 3px solid var(--ink); border-radius: 7px; color: var(--ink); background: #fff; box-shadow: 5px 6px 0 var(--ink); cursor: pointer; transition: transform .16s, box-shadow .16s, background .16s; }
.number-card::before, .number-card::after { content: attr(data-value); position: absolute; left: 9px; top: 6px; font-size: 16px; font-weight: 900; }
.number-card::after { inset: auto 9px 6px auto; transform: rotate(180deg); }
.number-card strong { font-family: Arial, sans-serif; font-size: clamp(58px, 6vw, 82px); line-height: 1; }
.number-card em { display: none; position: absolute; right: 8px; bottom: 7px; padding: 3px 5px; border: 1px solid var(--red-dark); border-radius: 3px; color: #fff; background: var(--red-dark); font-size: 10px; font-style: normal; font-weight: 900; }
.number-card.zero-spent { background: #e2ddd4; }
.number-card.zero-spent em { display: block; }
.number-card:not(:disabled):hover { transform: translate(-2px,-3px); box-shadow: 7px 9px 0 var(--ink); background: #fff9d9; }
.number-card.selected { transform: translateY(-7px); background: var(--yellow); box-shadow: 5px 11px 0 var(--ink); }
.number-card:disabled { cursor: default; opacity: .72; }
.player-panel.active .number-card.selectable { opacity: 1; }
.number-card.targetable { animation: targetPulse 1.2s infinite; opacity: 1; }
.number-card.card-style-breeze, .team-card.card-style-breeze, .shop-card-preview.card-style-breeze { color: #145c5c; background: linear-gradient(145deg, #e5fffa, #b8eee4); border-color: #2c9f98; box-shadow: 5px 6px 0 #13736f; }
.number-card.card-style-breeze::before, .number-card.card-style-breeze::after { color: #2c9f98; }
.number-card.card-style-breeze.selected { color: #123f3f; background: #8fe0d4; box-shadow: 5px 11px 0 #13736f; }
.number-card.card-style-breeze:not(:disabled):hover { background: #d5fff8; }
.number-card.card-style-dragon, .team-card.card-style-dragon, .shop-card-preview.card-style-dragon { color: #5a3600; background: linear-gradient(145deg, #fff7c7 0%, #f2c14e 46%, #b36a00 100%); border-color: #d89c23; box-shadow: 5px 6px 0 #7a4900; }
.number-card.card-style-dragon::before, .number-card.card-style-dragon::after { color: #8f5b00; }
.number-card.card-style-dragon.selected { color: #432500; background: #ffd970; box-shadow: 5px 11px 0 #7a4900; }
.number-card.card-style-dragon:not(:disabled):hover { background: #ffe9a6; }
.number-card.card-style-sword, .team-card.card-style-sword, .shop-card-preview.card-style-sword { color: #dce9ff; background: linear-gradient(145deg, #1d3153 0%, #101a2d 58%, #070b14 100%); border-color: #6e99d4; box-shadow: 5px 6px 0 #263e68; }
.number-card.card-style-sword::before, .number-card.card-style-sword::after { color: #9fc8ff; }
.number-card.card-style-sword.selected { color: #fff; background: #2c4c7f; box-shadow: 5px 11px 0 #263e68; }
.number-card.card-style-sword:not(:disabled):hover { background: #355b94; }
.card-review-button { min-height: 26px; padding: 0 9px; color: #fff; background: #5e3a9e; border: 1px solid #b791ff; border-radius: 3px; cursor: pointer; font-size: 10px; font-weight: 900; }
.card-review-button:hover { background: #7650bb; }
.card-review-backdrop { z-index: 94; }
.card-review-modal { width: min(760px, 100%); max-height: min(820px, calc(100dvh - 24px)); overflow: auto; color: var(--ink); background: #f8f6f1; border: 4px solid var(--ink); box-shadow: 10px 10px 0 #5e3a9e; }
.card-review-note { margin: 8px 20px 16px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.card-review-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 0 20px 6px; }
.card-review-item { min-width: 0; padding: 9px; background: #fff; border: 2px solid #ded8cf; }
.card-review-preview { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border: 3px solid #181817; border-radius: 8px; box-shadow: 4px 5px 0 #181817; }
.card-review-preview::before, .card-review-preview::after { content: ""; position: absolute; pointer-events: none; }
.card-review-preview > strong { position: relative; z-index: 1; font: 900 clamp(38px, 5vw, 62px) / 1 Arial, sans-serif; }
.card-review-corner, .card-review-mark { position: absolute; z-index: 2; font: 900 11px / 1 Arial, sans-serif; }
.card-review-corner { top: 7px; left: 8px; }
.card-review-mark { right: 8px; bottom: 7px; }
.card-review-copy { margin-top: 9px; }
.card-review-copy strong { display: block; font-size: 12px; }
.card-review-copy p { min-height: 44px; margin: 4px 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.card-review-copy small { color: #6a3da8; font-size: 9px; font-weight: 900; }
.card-review-status { margin: 6px 20px 16px; }
.effect-review-backdrop { z-index: 121; }
.effect-review-modal { width: min(980px, 100%); max-height: min(860px, calc(100dvh - 20px)); overflow: auto; color: var(--ink); background: #f8f6f1; border: 4px solid var(--ink); box-shadow: 10px 10px 0 #e54838; }
.effect-review-note { margin: 8px 20px 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.effect-review-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 20px 8px; }
.effect-review-item { min-width: 0; padding: 8px; background: #fff; border: 2px solid #ded8cf; }
.effect-review-preview, .shop-effect-preview { --effect-hue: 190; position: relative; display: grid; place-items: center; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 35%, hsl(var(--effect-hue) 100% 78% / .9) 0 7%, transparent 8%), linear-gradient(145deg, hsl(var(--effect-hue) 70% 22%), #15151f 60%, hsl(calc(var(--effect-hue) + 55) 75% 30%)); border: 2px solid hsl(var(--effect-hue) 85% 65%); box-shadow: inset 0 0 22px hsl(var(--effect-hue) 100% 60% / .28); }
.effect-review-preview { aspect-ratio: 1.45; }
.effect-review-preview::before, .shop-effect-preview::before { content: attr(data-symbol); position: absolute; inset: 9px; display: grid; place-items: center; border: 1px solid hsl(var(--effect-hue) 100% 78% / .62); border-radius: 50%; color: #fff; font: 900 17px/1 Arial, sans-serif; letter-spacing: 1px; text-shadow: 0 0 9px hsl(var(--effect-hue) 100% 75%); transform: rotate(-7deg); }
.effect-review-preview::after, .shop-effect-preview::after { content: ""; position: absolute; inset: -25%; background: repeating-conic-gradient(from 12deg, transparent 0 19deg, hsl(var(--effect-hue) 100% 80% / .2) 20deg 23deg, transparent 24deg 39deg); animation: effectPreviewSpin 4s linear infinite; }
.effect-review-glyph { position: relative; z-index: 1; color: hsl(var(--effect-hue) 100% 82%); font-size: 25px; text-shadow: 0 0 11px hsl(var(--effect-hue) 100% 70%); animation: effectPreviewPulse 1.3s ease-in-out infinite; }
.effect-review-copy { margin-top: 7px; }.effect-review-copy strong { display: block; font-size: 10px; line-height: 1.25; }.effect-review-copy p { min-height: 28px; margin: 4px 0; color: var(--muted); font-size: 8px; line-height: 1.35; }.effect-review-copy small { color: #a23b35; font-size: 8px; font-weight: 900; }
@keyframes effectPreviewSpin { to { transform: rotate(360deg); } }
@keyframes effectPreviewPulse { 50% { transform: scale(1.22); opacity: .72; } }
.effect-review-button { color: #fff; background: #a23b35; border-color: #f09b83; }
.effect-review-button:hover { background: #c04c40; }
.shin-character { position: absolute; z-index: 2; left: 50%; bottom: 8%; width: 56px; height: 68px; transform: translateX(-50%); filter: drop-shadow(3px 4px 0 rgba(24,24,24,.28)); }
.shin-character::before { content: ""; position: absolute; left: 9px; top: 3px; width: 38px; height: 39px; border: 2px solid #24151a; border-radius: 48% 44% 42% 50%; background: #f4b993; box-shadow: inset 0 -5px 0 rgba(211,104,79,.18); }
.shin-character::after { content: ""; position: absolute; left: 5px; bottom: 0; width: 46px; height: 32px; border: 2px solid #24151a; border-radius: 48% 48% 12px 12px; background: #f35245; }
.shin-character .shin-hair { position: absolute; z-index: 3; left: 7px; top: 0; width: 42px; height: 16px; border: 2px solid #24151a; border-bottom: 0; border-radius: 80% 40% 0 0; background: #24151a; transform: rotate(-6deg); }
.shin-character .shin-brow { position: absolute; z-index: 4; left: 15px; top: 23px; width: 26px; height: 5px; border-radius: 50%; background: #24151a; transform: rotate(-7deg); box-shadow: 0 10px 0 -1px #24151a; }
.shin-character .shin-hand { position: absolute; z-index: 4; right: -4px; bottom: 11px; width: 14px; height: 14px; border: 2px solid #24151a; border-radius: 50%; background: #f4b993; }
.shin-character-red { transform: translateX(-50%) rotate(-5deg); }
.shin-character-red::after { background: #f35245; }
.shin-character-sun { transform: translateX(-50%) rotate(5deg); }
.shin-character-sun::after { background: #f2c94c; }
.shin-character-sun .shin-hand { right: -10px; bottom: 27px; }
.shin-character-crayon { transform: translateX(-50%) scale(1.05); }
.shin-character-crayon::after { background: linear-gradient(90deg, #f35245 0 33%, #f2c94c 34% 66%, #2c9ee8 67%); }
.shin-character-kasukabe { transform: translateX(-50%) rotate(-2deg); }
.shin-character-kasukabe::after { background: #66c6a2; }
.shin-character-kasukabe .shin-hand { right: auto; left: -8px; bottom: 19px; }
.shin-character-shiro { transform: translateX(-58%) scale(.92); }
.shin-character-shiro::after { background: #6c315e; }
.shin-character-shiro::before { box-shadow: 24px 21px 0 -12px #fff; }
.shin-character-shiro .shin-hand { right: -12px; bottom: 7px; background: #fff; }
.card-review-preview.card-style-candidate-celestial { color: #fff; background: radial-gradient(circle at 20% 16%, #86ffff 0 2%, transparent 3%), radial-gradient(circle at 78% 28%, #fff1a4 0 2%, transparent 3%), conic-gradient(from 220deg at 50% 50%, #101642, #4b2b91, #142d63, #101642); border-color: #f5ce66; box-shadow: 4px 5px 0 #49378f, inset 0 0 26px rgba(111,231,255,.45); }
.card-review-preview.card-style-candidate-celestial::before { inset: 11%; border: 2px solid rgba(149,240,255,.75); border-radius: 50%; box-shadow: 0 0 0 7px rgba(245,206,102,.22), 0 0 18px #5de7ff; }
.card-review-preview.card-style-candidate-celestial::after { inset: 0; background: repeating-conic-gradient(from 15deg, transparent 0 17deg, rgba(255,255,255,.08) 18deg 19deg); }
.card-review-preview.card-style-candidate-jade { color: #f9fff2; background: linear-gradient(135deg, #064c43, #13a47c 48%, #68d5a4 49%, #0a5f4e); border-color: #f3bf68; box-shadow: 4px 5px 0 #06453f, inset 0 0 0 4px rgba(228,255,210,.2); }
.card-review-preview.card-style-candidate-jade::before { inset: 10%; transform: rotate(45deg); border: 2px solid rgba(242,255,214,.7); box-shadow: inset 0 0 18px rgba(255,255,255,.35), 0 0 0 5px rgba(239,117,82,.28); }
.card-review-preview.card-style-candidate-jade::after { inset: 0; background: linear-gradient(155deg, transparent 40%, rgba(255,255,255,.26) 41% 43%, transparent 44%); }
.card-review-preview.card-style-candidate-flame { color: #fff4d6; background: radial-gradient(ellipse at 50% 95%, #ffd166 0 13%, #ed6c24 28%, transparent 48%), linear-gradient(145deg, #7b101c, #2b0d18 72%, #07070b); border-color: #ffbb42; box-shadow: 4px 5px 0 #4a101c, inset 0 -18px 25px rgba(255,89,26,.32); }
.card-review-preview.card-style-candidate-flame::before { inset: 7% 14%; border: 2px solid #f05b3d; clip-path: polygon(50% 0, 100% 25%, 82% 100%, 18% 100%, 0 25%); box-shadow: 0 0 16px #ff772f; }
.card-review-preview.card-style-candidate-flame::after { inset: 0; background: repeating-linear-gradient(120deg, transparent 0 16px, rgba(255,180,54,.12) 17px 20px); }
.card-review-preview.card-style-candidate-neon { color: #f8f4ff; background: #0b0b16; border-color: #ff4edb; box-shadow: 4px 5px 0 #261452, inset 0 0 18px rgba(0,245,255,.3); }
.card-review-preview.card-style-candidate-neon::before { inset: 8%; border: 2px solid #00f5ff; transform: skewY(-12deg); box-shadow: 0 0 0 5px rgba(255,78,219,.25), 0 0 14px #00f5ff; }
.card-review-preview.card-style-candidate-neon::after { inset: 0; background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(255,78,219,.16) 11px 12px), linear-gradient(115deg, transparent 35%, rgba(0,245,255,.2) 36% 39%, transparent 40%); }
.card-review-preview.card-style-candidate-tide { color: #06364c; background: linear-gradient(155deg, #b8fbff, #46c4e7 45%, #126aab 46%, #0c386e); border-color: #dffcff; box-shadow: 4px 5px 0 #0b456e, inset 0 0 18px rgba(255,255,255,.48); }
.card-review-preview.card-style-candidate-tide::before { inset: 11% 6%; border: 2px solid rgba(255,255,255,.78); border-radius: 50% 50% 44% 56%; transform: rotate(-18deg); box-shadow: 0 0 0 7px rgba(255,127,89,.25), 0 0 14px rgba(255,255,255,.75); }
.card-review-preview.card-style-candidate-tide::after { inset: 0; background: repeating-linear-gradient(165deg, transparent 0 14px, rgba(255,255,255,.25) 15px 17px, transparent 18px 28px); }
.number-card.card-style-candidate-celestial, .team-card.card-style-candidate-celestial, .shop-card-preview.card-style-candidate-celestial { color: #fff; background: radial-gradient(circle at 20% 16%, #86ffff 0 2%, transparent 3%), radial-gradient(circle at 78% 28%, #fff1a4 0 2%, transparent 3%), conic-gradient(from 220deg at 50% 50%, #101642, #4b2b91, #142d63, #101642); border-color: #f5ce66; box-shadow: 5px 6px 0 #49378f, inset 0 0 26px rgba(111,231,255,.45); }
.number-card.card-style-candidate-jade, .team-card.card-style-candidate-jade, .shop-card-preview.card-style-candidate-jade { color: #f9fff2; background: linear-gradient(135deg, #064c43, #13a47c 48%, #68d5a4 49%, #0a5f4e); border-color: #f3bf68; box-shadow: 5px 6px 0 #06453f, inset 0 0 0 4px rgba(228,255,210,.2); }
.number-card.card-style-candidate-flame, .team-card.card-style-candidate-flame, .shop-card-preview.card-style-candidate-flame { color: #fff4d6; background: radial-gradient(ellipse at 50% 95%, #ffd166 0 13%, #ed6c24 28%, transparent 48%), linear-gradient(145deg, #7b101c, #2b0d18 72%, #07070b); border-color: #ffbb42; box-shadow: 5px 6px 0 #4a101c, inset 0 -18px 25px rgba(255,89,26,.32); }
.number-card.card-style-candidate-neon, .team-card.card-style-candidate-neon, .shop-card-preview.card-style-candidate-neon { color: #f8f4ff; background: #0b0b16; border-color: #ff4edb; box-shadow: 5px 6px 0 #261452, inset 0 0 18px rgba(0,245,255,.3); }
.number-card.card-style-candidate-tide, .team-card.card-style-candidate-tide, .shop-card-preview.card-style-candidate-tide { color: #06364c; background: linear-gradient(155deg, #b8fbff, #46c4e7 45%, #126aab 46%, #0c386e); border-color: #dffcff; box-shadow: 5px 6px 0 #0b456e, inset 0 0 18px rgba(255,255,255,.48); }
.number-card.card-style-candidate-celestial::before, .number-card.card-style-candidate-celestial::after, .team-card.card-style-candidate-celestial::before, .team-card.card-style-candidate-celestial::after { color: #fff1a4; }
.number-card.card-style-candidate-jade::before, .number-card.card-style-candidate-jade::after, .team-card.card-style-candidate-jade::before, .team-card.card-style-candidate-jade::after { color: #e4ffd2; }
.number-card.card-style-candidate-flame::before, .number-card.card-style-candidate-flame::after, .team-card.card-style-candidate-flame::before, .team-card.card-style-candidate-flame::after { color: #ffd166; }
.number-card.card-style-candidate-neon::before, .number-card.card-style-candidate-neon::after, .team-card.card-style-candidate-neon::before, .team-card.card-style-candidate-neon::after { color: #00f5ff; }
.number-card.card-style-candidate-tide::before, .number-card.card-style-candidate-tide::after, .team-card.card-style-candidate-tide::before, .team-card.card-style-candidate-tide::after { color: #fff; }
.card-review-preview.card-style-shin-red, .number-card.card-style-shin-red, .team-card.card-style-shin-red, .shop-card-preview.card-style-shin-red { color: #24151a; background: linear-gradient(155deg, #ffeb57 0 17%, #f35245 18% 58%, #2c9ee8 59% 77%, #fff3ba 78%); border-color: #24151a; box-shadow: 5px 6px 0 #e53b35; }
.card-review-preview.card-style-shin-red::before { inset: 8%; border: 3px solid #24151a; border-radius: 12px 38px 10px 30px; transform: rotate(-7deg); box-shadow: 7px 6px 0 rgba(255,255,255,.5); }
.card-review-preview.card-style-shin-red::after { inset: 0; background: repeating-linear-gradient(162deg, transparent 0 17px, rgba(36,21,26,.18) 18px 20px); }
.card-review-preview.card-style-shin-sun, .number-card.card-style-shin-sun, .team-card.card-style-shin-sun, .shop-card-preview.card-style-shin-sun { color: #3d3b14; background: radial-gradient(circle at 76% 20%, #fff 0 7%, transparent 8%), radial-gradient(circle at 50% 45%, #ffcf40 0 22%, transparent 23%), linear-gradient(180deg, #72d8f1 0 55%, #72bf58 56% 77%, #f0d15b 78%); border-color: #f3a928; box-shadow: 5px 6px 0 #6f9f47; }
.card-review-preview.card-style-shin-sun::before { inset: 5% 8%; border: 3px dashed #fff4a8; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,183,49,.35); }
.card-review-preview.card-style-shin-sun::after { inset: 0; background: repeating-conic-gradient(from 0deg at 78% 20%, transparent 0 11deg, rgba(255,226,87,.32) 12deg 15deg); }
.card-review-preview.card-style-shin-crayon, .number-card.card-style-shin-crayon, .team-card.card-style-shin-crayon, .shop-card-preview.card-style-shin-crayon { color: #2a2540; background: #fff8dc; border-color: #2a2540; background-image: linear-gradient(90deg, transparent 0 12px, rgba(241,96,92,.35) 13px 15px, transparent 16px), repeating-linear-gradient(12deg, transparent 0 19px, rgba(73,166,207,.22) 20px 22px); box-shadow: 5px 6px 0 #ef7b68; }
.card-review-preview.card-style-shin-crayon::before { inset: 10%; border: 4px solid #ef7b68; border-radius: 40% 12% 33% 18%; transform: rotate(5deg); }
.card-review-preview.card-style-shin-crayon::after { inset: 0; background: linear-gradient(35deg, transparent 45%, rgba(109,201,92,.42) 46% 51%, transparent 52%), linear-gradient(140deg, transparent 43%, rgba(99,131,223,.32) 44% 49%, transparent 50%); }
.card-review-preview.card-style-shin-kasukabe, .number-card.card-style-shin-kasukabe, .team-card.card-style-shin-kasukabe, .shop-card-preview.card-style-shin-kasukabe { color: #143c55; background: linear-gradient(165deg, #baf5ff 0 38%, #f7f0c7 39% 55%, #66c6a2 56% 100%); border-color: #1b5772; box-shadow: 5px 6px 0 #2c806c; }
.card-review-preview.card-style-shin-kasukabe::before { inset: 12% 6% 18%; border: 3px solid #1b5772; clip-path: polygon(0 34%, 25% 0, 72% 0, 100% 34%, 100% 100%, 0 100%); background: rgba(255,255,255,.25); }
.card-review-preview.card-style-shin-kasukabe::after { inset: 0; background: repeating-linear-gradient(175deg, transparent 0 23px, rgba(27,87,114,.17) 24px 26px); }
.card-review-preview.card-style-shin-shiro, .number-card.card-style-shin-shiro, .team-card.card-style-shin-shiro, .shop-card-preview.card-style-shin-shiro { color: #f9f7ff; background: radial-gradient(circle at 50% 58%, #fff 0 8%, transparent 9%), radial-gradient(circle at 72% 24%, #fff 0 2%, transparent 3%), linear-gradient(145deg, #262046, #121126 64%, #6c315e); border-color: #f0c04c; box-shadow: 5px 6px 0 #52274f, inset 0 0 20px rgba(240,192,76,.28); }
.card-review-preview.card-style-shin-shiro::before { inset: 9%; border: 2px solid #f0c04c; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,255,255,.12); }
.card-review-preview.card-style-shin-shiro::after { content: "🐾"; inset: auto 10px 7px auto; color: #fff; font-size: 24px; }
/* Reworked original anime-inspired card faces: bold silhouettes, sticker
   shapes, speed lines and high-saturation dopamine colors. */
.card-review-preview.card-style-shin-red, .number-card.card-style-shin-red, .team-card.card-style-shin-red, .shop-card-preview.card-style-shin-red { color: #fff8ef; background-color: #ff4d6d; background-image: linear-gradient(135deg, transparent 0 22%, rgba(255,205,70,.95) 23% 33%, transparent 34%), repeating-linear-gradient(162deg, rgba(35,19,77,.88) 0 5px, transparent 5px 18px), linear-gradient(155deg, #ff4d6d 0 43%, #ff8c42 44% 67%, #38c6ff 68%); border-color: #23164d; box-shadow: 5px 6px 0 #23164d, inset 0 0 0 3px rgba(255,255,255,.22); }
.card-review-preview.card-style-shin-red::before { inset: 12% 9% 19%; border: 3px solid #fff6a8; border-radius: 48% 18% 42% 18%; background: rgba(255,79,109,.34); transform: rotate(-8deg); box-shadow: 7px 7px 0 rgba(35,22,77,.45); }
.card-review-preview.card-style-shin-red::after { inset: 0; background: radial-gradient(circle at 76% 18%, #fff6a8 0 6%, transparent 7%), repeating-linear-gradient(158deg, transparent 0 13px, rgba(255,255,255,.3) 14px 16px, transparent 17px 29px); }
.card-review-preview.card-style-shin-sun, .number-card.card-style-shin-sun, .team-card.card-style-shin-sun, .shop-card-preview.card-style-shin-sun { color: #3b1d5b; background-color: #ff7ad9; background-image: radial-gradient(circle at 76% 18%, #fff 0 3%, transparent 4%), radial-gradient(circle at 20% 75%, #7bffcf 0 7%, transparent 8%), conic-gradient(from 14deg at 72% 23%, transparent 0 8deg, rgba(255,246,137,.9) 9deg 14deg, transparent 15deg 28deg), linear-gradient(145deg, #ff7ad9 0 39%, #8de9ff 40% 72%, #8065ff 73%); border-color: #3b1d5b; box-shadow: 5px 6px 0 #3b1d5b, inset 0 0 0 3px rgba(255,255,255,.36); }
.card-review-preview.card-style-shin-sun::before { inset: 13%; border: 3px dotted #fff6a8; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,94,190,.34), 0 0 20px rgba(255,255,255,.8); }
.card-review-preview.card-style-shin-sun::after { inset: 0; background: repeating-conic-gradient(from 8deg at 76% 18%, transparent 0 9deg, rgba(255,246,137,.45) 10deg 14deg, transparent 15deg 25deg); }
.card-review-preview.card-style-shin-crayon, .number-card.card-style-shin-crayon, .team-card.card-style-shin-crayon, .shop-card-preview.card-style-shin-crayon { color: #2a1749; background-color: #fff5a8; background-image: linear-gradient(18deg, transparent 0 34%, rgba(255,83,147,.75) 35% 44%, transparent 45%), linear-gradient(154deg, transparent 0 42%, rgba(49,207,255,.82) 43% 53%, transparent 54%), repeating-linear-gradient(6deg, #fff5a8 0 14px, #d7ff70 15px 29px); border-color: #2a1749; box-shadow: 5px 6px 0 #2a1749, inset 0 0 0 3px rgba(255,255,255,.48); }
.card-review-preview.card-style-shin-crayon::before { inset: 10% 12% 17%; border: 4px solid #ff5393; border-radius: 38% 16% 28% 22%; transform: rotate(6deg); box-shadow: 8px 8px 0 rgba(42,23,73,.3); }
.card-review-preview.card-style-shin-crayon::after { inset: 0; background: radial-gradient(circle at 24% 21%, #2fd5ff 0 5%, transparent 6%), radial-gradient(circle at 77% 76%, #ff5393 0 4%, transparent 5%), repeating-linear-gradient(12deg, transparent 0 20px, rgba(42,23,73,.15) 21px 23px); }
.card-review-preview.card-style-shin-kasukabe, .number-card.card-style-shin-kasukabe, .team-card.card-style-shin-kasukabe, .shop-card-preview.card-style-shin-kasukabe { color: #f8f5ff; background-color: #30206b; background-image: linear-gradient(90deg, transparent 0 16px, rgba(54,245,218,.32) 17px 19px, transparent 20px 32px), linear-gradient(0deg, transparent 0 17px, rgba(255,69,186,.3) 18px 20px, transparent 21px 35px), linear-gradient(145deg, #30206b, #6b39cf 48%, #1cbee1 49% 100%); border-color: #8bfff0; box-shadow: 5px 6px 0 #24164f, inset 0 0 22px rgba(255,69,186,.28); }
.card-review-preview.card-style-shin-kasukabe::before { inset: 11% 8% 19%; border: 3px solid #8bfff0; clip-path: polygon(0 24%, 24% 0, 78% 0, 100% 24%, 100% 100%, 0 100%); background: rgba(54,245,218,.18); box-shadow: 0 0 0 5px rgba(255,69,186,.25); }
.card-review-preview.card-style-shin-kasukabe::after { inset: 0; background: repeating-linear-gradient(170deg, transparent 0 20px, rgba(139,255,240,.22) 21px 23px); }
.card-review-preview.card-style-shin-shiro, .number-card.card-style-shin-shiro, .team-card.card-style-shin-shiro, .shop-card-preview.card-style-shin-shiro { color: #fff9ff; background-color: #35205f; background-image: radial-gradient(circle at 76% 20%, #fff9bf 0 12%, transparent 13%), radial-gradient(circle at 18% 72%, #7dffd4 0 5%, transparent 6%), radial-gradient(circle at 54% 32%, #ff7ccf 0 3%, transparent 4%), linear-gradient(145deg, #1a143c, #583a91 55%, #ec5cac); border-color: #ffe77a; box-shadow: 5px 6px 0 #1d1239, inset 0 0 24px rgba(255,231,122,.28); }
.card-review-preview.card-style-shin-shiro::before { inset: 14%; border: 3px solid #ffe77a; border-radius: 50%; box-shadow: 0 0 0 5px rgba(125,255,212,.25), 0 0 19px rgba(255,231,122,.75); }
.card-review-preview.card-style-shin-shiro::after { content: "✦"; inset: auto 10px 6px auto; color: #fff; font-size: 25px; text-shadow: 0 0 9px #ff7ccf; }
.number-card.card-style-shin-red::before, .number-card.card-style-shin-red::after { color: #fff6a8; }
.number-card.card-style-shin-sun::before, .number-card.card-style-shin-sun::after { color: #fff; }
.number-card.card-style-shin-crayon::before, .number-card.card-style-shin-crayon::after { color: #2a1749; }
.number-card.card-style-shin-kasukabe::before, .number-card.card-style-shin-kasukabe::after { color: #8bfff0; }
.number-card.card-style-shin-shiro::before, .number-card.card-style-shin-shiro::after { color: #ffe77a; }
/* Five distinct mascot silhouettes for the review cards. */
.card-review-preview .shin-character { width: 62px; height: 74px; filter: drop-shadow(4px 5px 0 rgba(35,22,77,.36)); }
.card-review-preview .shin-character::before { left: 8px; top: 3px; width: 44px; height: 42px; border: 3px solid #23164d; border-radius: 46% 54% 42% 58%; background: #ffd1b5; box-shadow: inset -5px -6px 0 rgba(255,113,143,.22); }
.card-review-preview .shin-character::after { left: 4px; bottom: 0; width: 52px; height: 35px; border: 3px solid #23164d; border-radius: 45% 45% 16px 16px; background: #ff4d6d; clip-path: polygon(10% 0,90% 0,100% 100%,0 100%); }
.card-review-preview .shin-character .shin-hair { left: 5px; top: -1px; width: 49px; height: 22px; border: 3px solid #23164d; border-bottom: 0; border-radius: 60% 45% 0 0; background: #5427a6; clip-path: polygon(0 100%,8% 35%,23% 55%,34% 4%,47% 55%,61% 0,74% 56%,91% 26%,100% 100%); transform: rotate(-5deg); }
.card-review-preview .shin-character .shin-brow { left: 15px; top: 26px; width: 9px; height: 5px; border-radius: 5px; background: #23164d; transform: rotate(-14deg); box-shadow: 19px 5px 0 #23164d; }
.card-review-preview .shin-character .shin-hand { right: -8px; bottom: 13px; width: 16px; height: 16px; border: 3px solid #23164d; background: #ffd1b5; }
.card-review-preview .shin-character-sun::before { background: #f1c8ff; border-radius: 50%; }
.card-review-preview .shin-character-sun::after { background: #ffcf4d; clip-path: polygon(16% 0,84% 0,100% 22%,82% 100%,18% 100%,0 22%); }
.card-review-preview .shin-character-sun .shin-hair { background: #ff3f9f; clip-path: polygon(0 100%,12% 33%,30% 51%,47% 0,63% 51%,83% 20%,100% 100%); }
.card-review-preview .shin-character-sun .shin-hand { right: -13px; bottom: 32px; background: #f1c8ff; }
.card-review-preview .shin-character-crayon::before { background: #b9f5ff; border-radius: 38% 62% 48% 52%; }
.card-review-preview .shin-character-crayon::after { background: linear-gradient(90deg, #ff5393 0 33%, #ffcf4d 34% 66%, #4de3a2 67%); clip-path: polygon(0 12%,100% 0,90% 100%,10% 90%); }
.card-review-preview .shin-character-crayon .shin-hair { background: #21a9d9; clip-path: polygon(0 100%,5% 42%,22% 55%,34% 0,48% 58%,67% 19%,79% 57%,100% 36%,100% 100%); }
.card-review-preview .shin-character-crayon .shin-hand { left: -10px; right: auto; background: #b9f5ff; }
.card-review-preview .shin-character-kasukabe::before { background: #b6fff0; border-radius: 30% 30% 48% 48%; }
.card-review-preview .shin-character-kasukabe::after { background: #6c43da; border-radius: 12px; clip-path: polygon(0 0,100% 0,88% 100%,12% 100%); }
.card-review-preview .shin-character-kasukabe .shin-hair { background: #ff4db8; clip-path: polygon(0 100%,0 17%,25% 0,50% 18%,76% 0,100% 17%,100% 100%); }
.card-review-preview .shin-character-kasukabe .shin-hand { background: #b6fff0; }
.card-review-preview .shin-character-shiro::before { background: #e8d9ff; border-radius: 52% 48% 46% 54%; box-shadow: 23px 22px 0 -13px #fff; }
.card-review-preview .shin-character-shiro::after { background: #8f56cf; border-radius: 50% 50% 17px 17px; clip-path: polygon(0 18%,18% 0,82% 0,100% 18%,92% 100%,8% 100%); }
.card-review-preview .shin-character-shiro .shin-hair { background: #33205f; clip-path: polygon(0 100%,15% 11%,32% 40%,52% 0,70% 39%,90% 10%,100% 100%); }
.card-review-preview .shin-character-shiro .shin-hand { right: -13px; background: #fff; }
@keyframes targetPulse { 50% { box-shadow: 5px 6px 0 var(--ink), 0 0 0 5px rgba(242,201,76,.55); } }
.number-card:not(:disabled):hover, .number-card:not(:disabled):focus-visible,
.team-card:not(:disabled):hover, .team-card:not(:disabled):focus-visible {
  filter: brightness(.76) saturate(1.08) contrast(1.18);
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-color: #111;
  box-shadow: 0 0 0 5px var(--yellow), 7px 9px 0 #111;
  text-shadow: 0 2px 0 #111, 0 0 8px rgba(255,255,255,.7);
}
.number-card.selected:not(:disabled):hover, .number-card.selected:not(:disabled):focus-visible,
.team-card.selected:not(:disabled):hover, .team-card.selected:not(:disabled):focus-visible {
  filter: brightness(1.04) contrast(1.08);
  outline-color: #fff;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 0 0 5px #111, 5px 11px 0 #111;
  text-shadow: none;
}
.combo-preview { min-height: 34px; margin-top: 18px; padding: 9px; color: var(--muted); background: rgba(255,255,255,.65); border-left: 3px solid #aaa; font-size: 11px; line-height: 1.4; }
.combo-preview.hot { color: var(--ink); border-color: var(--yellow); font-weight: 800; }
.center-stage { display: flex; flex-direction: column; align-items: center; padding: 0 4px; }
.versus { display: grid; place-items: center; width: 58px; height: 36px; color: #fff; background: var(--ink); clip-path: polygon(10% 0,100% 0,90% 100%,0 100%); font-family: Arial,sans-serif; font-weight: 900; font-style: italic; }
.selection-well { width: 100%; min-height: 114px; margin-top: 13px; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; color: #fff; background: #2a2927; border: 2px solid #090909; box-shadow: inset 0 0 0 1px #4a4844; }
.pick-slot, .result-slot { min-width: 0; height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #66625d; border-radius: 5px; }
.pick-slot span, .result-slot strong { font-size: 30px; line-height: 1; }
.pick-slot small, .result-slot small { margin-top: 7px; color: #aaa7a0; font-size: 9px; text-align: center; }
.pick-slot.filled { color: var(--yellow); border-style: solid; border-color: var(--yellow); }
.plus, .equals { color: #aaa; font-weight: 900; }
.result-slot { color: var(--yellow); background: #171716; }
.action-hint { min-height: 20px; margin: 10px 0; color: var(--muted); font-size: 12px; text-align: center; }
.move-preview { width: 100%; margin: 0 0 12px; border: 2px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--yellow); animation: previewEnter .18s ease-out; }
.move-preview[hidden], .coach-panel[hidden] { display: none; }
.move-preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 11px; color: #fff; background: var(--ink); }
.move-preview-heading span { color: var(--yellow); font-size: 10px; font-weight: 900; }
.move-preview-heading strong { font-size: 11px; text-align: right; }
.move-preview-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 9px; }
.move-preview-option { min-height: 102px; display: flex; flex-direction: column; align-items: stretch; padding: 9px; border: 2px solid var(--line); border-radius: 4px; color: var(--ink); background: #f9f6f0; cursor: pointer; text-align: left; transition: transform .15s, border-color .15s, box-shadow .15s; }
.move-preview-option:not(:disabled):hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.move-preview-option:disabled { cursor: not-allowed; opacity: .58; }
.move-preview-option.special { border-color: var(--red); background: #fff2e5; }
.move-preview-option.guided-route-target { position: relative; outline: 3px solid var(--yellow); outline-offset: 3px; animation: guidedUiPulse 1s infinite; }
.move-preview-option.guided-route-target::after { content: "➜"; position: absolute; left: -34px; top: 50%; color: var(--yellow); font-size: 22px; font-weight: 900; line-height: 1; text-shadow: 2px 2px 0 var(--ink); transform: translateY(-50%); pointer-events: none; }
.move-preview-route { color: var(--muted); font-size: 9px; font-weight: 800; }
.move-preview-sum { display: flex; align-items: baseline; gap: 4px; margin: 6px 0; font-family: Arial, sans-serif; font-size: 14px; font-weight: 900; }
.move-preview-sum strong { display: inline-grid; place-items: center; min-width: 24px; height: 24px; color: var(--ink); background: var(--yellow); font-size: 16px; }
.move-preview-effect { margin: auto 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.move-preview-option.special .move-preview-effect { color: var(--red-dark); font-weight: 900; }
.sky-prompt { width: 100%; margin: 0 0 12px; padding: 11px 12px; display: grid; gap: 10px; border: 2px solid #4b76c6; background: #eef5ff; box-shadow: 4px 4px 0 #4b76c6; animation: previewEnter .18s ease-out; }
.sky-prompt[hidden] { display: none; }
.sky-prompt-copy span, .sky-prompt-copy strong, .sky-prompt-copy small { display: block; }
.sky-prompt-copy span { color: #3159a4; font-size: 10px; font-weight: 900; }
.sky-prompt-copy strong { margin-top: 4px; font-size: 13px; }
.sky-prompt-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.sky-prompt-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.sky-prompt-actions .primary-button, .sky-prompt-actions .secondary-button { margin: 0; padding: 10px; font-size: 11px; }
.sky-prompt-actions .primary-button { color: #fff; background: #3159a4; box-shadow: 3px 3px 0 var(--ink); }
.sky-prompt-actions .secondary-button { background: #fff; }
.coach-panel { width: 100%; margin: 0 0 12px; padding: 11px 12px; border-left: 5px solid var(--teal); color: var(--ink); background: #e5f7f5; box-shadow: 0 2px 0 rgba(8,123,124,.18); }
.coach-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--teal-dark); font-size: 10px; font-weight: 900; }
.coach-heading button { padding: 3px 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
.coach-heading button:hover { color: var(--red-dark); text-decoration: underline; }
.coach-panel > strong { display: block; margin-top: 5px; font-size: 13px; }
.coach-panel p { margin: 4px 0; font-size: 11px; line-height: 1.55; }
.coach-panel small { color: var(--teal-dark); font-size: 10px; font-weight: 800; }
.coach-skill-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--teal-dark); font-size: 9px; font-weight: 900; }
.coach-skill-heading b { color: var(--ink); font-size: 9px; }
.coach-skill-catalog { display: flex; flex-wrap: wrap; gap: 3px; max-height: 48px; overflow: auto; margin-top: 5px; }
.coach-skill-catalog span { display: inline-grid; place-items: center; min-width: 27px; min-height: 18px; padding: 0 3px; color: var(--muted); background: #d5e6e3; border: 1px solid #a5c8c2; font: 900 8px/1 Arial, sans-serif; }
.coach-skill-catalog span.seen { color: #fff; background: var(--teal-dark); border-color: var(--teal-dark); }
.coach-skill-catalog span.target { color: var(--ink); background: var(--yellow); border-color: var(--ink); }
@keyframes previewEnter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.motion-action { width: 100%; min-height: 54px; margin: 16px 0 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; padding: 8px 11px; border: 2px solid var(--ink); border-radius: 5px; color: var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; text-align: left; }
.motion-action[hidden] { display: none; }
.motion-action span { font-weight: 900; }.motion-action strong { grid-row: 1 / 3; grid-column: 2; font-size: 18px; }.motion-action small { color: #6b5716; font-size: 9px; }
.motion-action:hover { background: #ffe178; }
.battle-log-wrap { width: 100%; flex: 1; min-height: 225px; padding: 14px; background: #fffdfa; border: 1px solid var(--line); }
.log-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 900; }
.log-heading button { border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; }
.battle-log { max-height: 230px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.battle-log li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid #ebe6dc; font-size: 11px; line-height: 1.45; }
.battle-log li::before { content: attr(data-round); display: grid; place-items: center; width: 22px; height: 22px; color: #fff; background: var(--ink); border-radius: 50%; font-size: 9px; font-weight: 800; }
.battle-log li:first-child { font-weight: 700; }
.backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(10,10,10,.55); }
.rules-drawer { position: fixed; z-index: 21; inset: 0 0 0 auto; width: min(440px, 92vw); padding: 26px; overflow: auto; color: #fff; background: #20201f; border-left: 5px solid var(--yellow); transform: translateX(105%); transition: transform .25s ease; }
.rules-drawer.open { transform: translateX(0); }
.drawer-header { display: flex; justify-content: space-between; align-items: start; }
.drawer-header small { color: var(--yellow); font-size: 10px; font-weight: 900; }
.drawer-header h2 { margin: 5px 0 0; font-size: 28px; }
.rules-intro { color: #c1bdb4; font-size: 13px; line-height: 1.75; }
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.rule-item { display: flex; align-items: center; gap: 9px; padding: 9px; background: #2d2c2a; border: 1px solid #464440; }
.rule-combo { display: grid; place-items: center; flex: 0 0 35px; height: 35px; color: var(--ink); background: var(--yellow); border-radius: 4px; font-weight: 900; }
.rule-item strong { display: block; font-size: 12px; }
.rule-item span { display: block; margin-top: 2px; color: #aaa7a0; font-size: 10px; }
.rule-note { display: grid; gap: 4px; margin-top: 18px; padding: 13px; color: #fff; background: #116b7d; border-left: 4px solid #5bd0e8; }
.rule-note span { font-size: 11px; line-height: 1.5; }
.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(20,20,19,.82); }
.modal-backdrop[hidden], .backdrop[hidden] { display: none; }
.result-modal { width: min(420px,100%); padding: 34px; text-align: center; background: var(--paper); border: 4px solid var(--ink); box-shadow: 9px 9px 0 var(--yellow); }
.winner-mark { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 18px; color: #fff; background: var(--red); border-radius: 50%; border: 4px solid var(--ink); font-size: 32px; font-weight: 900; }
.result-modal small { color: var(--muted); font-weight: 800; }
.result-modal h1 { margin: 7px 0; font-size: 32px; }
.result-modal p { color: var(--muted); font-size: 13px; }
.primary-button { width: 100%; margin-top: 18px; padding: 13px; border: 2px solid var(--ink); border-radius: 5px; color: #fff; background: var(--ink); box-shadow: 4px 4px 0 var(--yellow); cursor: pointer; font-weight: 800; }
.account-button { display: inline-flex; align-items: center; gap: 6px; height: 38px; max-width: 150px; padding: 0 10px 0 6px; overflow: hidden; border: 1px solid #59564f; border-radius: 4px; color: #fff; background: #2a2926; cursor: pointer; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.account-button:hover { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }
.account-manage-button { height: 30px; padding: 0 9px; border: 1px solid var(--yellow); border-radius: 4px; color: var(--yellow); background: #2a2926; cursor: pointer; font-size: 10px; font-weight: 900; }
.account-manage-button:hover { color: var(--ink); background: var(--yellow); }
.account-inline-manage-button { margin-top: 4px; border-color: var(--yellow); color: var(--yellow); }
.account-mark { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; color: var(--ink); background: var(--yellow); border-radius: 50%; font-size: 11px; font-weight: 900; }
.account-backdrop { z-index: 90; }
.account-modal { width: min(400px, 100%); padding: 0; overflow: hidden; color: var(--ink); background: var(--paper); border: 4px solid var(--ink); box-shadow: 9px 9px 0 var(--teal); }
.account-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 15px; color: #fff; background: var(--ink); }
.account-header small { color: var(--yellow); font-size: 9px; font-weight: 900; }
.account-header h1 { margin: 4px 0 0; font-size: 25px; }
.account-header .icon-button { color: #fff; border-color: #5d5952; background: transparent; }
.account-header .icon-button:hover { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }
.auth-signed-out { padding: 20px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--ink); }
.auth-tabs button { padding: 10px; border: 0; color: var(--muted); background: #fff; cursor: pointer; font-size: 12px; font-weight: 900; }
.auth-tabs button.selected { color: #fff; background: var(--ink); }
#authForm { display: grid; gap: 13px; margin-top: 19px; }
#authForm label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 900; }
#authForm input { width: 100%; min-height: 43px; padding: 0 11px; border: 2px solid var(--line); border-radius: 4px; color: var(--ink); background: #fff; font: inherit; outline: none; }
#authForm input:focus { border-color: var(--teal); box-shadow: 3px 3px 0 rgba(17,165,165,.2); }
#authForm .primary-button { margin-top: 3px; }
.auth-status { min-height: 17px; margin: -2px 0 0; color: var(--red-dark); font-size: 10px; font-weight: 800; line-height: 1.4; }
.auth-status.success { color: var(--teal-dark); }
.auth-signed-in { display: grid; justify-items: center; gap: 7px; padding: 29px 20px 24px; text-align: center; }
.account-avatar { display: grid; place-items: center; width: 70px; height: 70px; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 4px 4px 0 var(--red); font-size: 21px; font-weight: 900; }
.auth-signed-in strong { margin-top: 8px; font-size: 20px; overflow-wrap: anywhere; }
.auth-signed-in > span { color: var(--muted); font-size: 11px; }
.auth-signed-in .secondary-button { width: 100%; margin-top: 14px; }
.account-manage-backdrop { z-index: 95; }
.account-manage-modal { width: min(620px, 100%); max-height: min(760px, calc(100dvh - 24px)); overflow: hidden; color: var(--ink); background: var(--paper); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--teal); }
.account-manage-body { max-height: min(620px, calc(100dvh - 118px)); overflow: auto; padding: 18px 20px 22px; }
.account-manage-note { margin: 0 0 12px; color: var(--muted); font-size: 11px; }
.account-manage-list { display: grid; gap: 8px; }
.account-manage-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(120px, .8fr) minmax(90px, .6fr); gap: 10px; align-items: center; padding: 11px 12px; border: 2px solid var(--line); background: #fff; }
.account-manage-row strong { overflow-wrap: anywhere; font-size: 13px; }
.account-manage-row span { color: var(--muted); font-size: 10px; }
.account-manage-row b { color: var(--teal-dark); font-size: 11px; text-align: right; }
.account-manage-empty { padding: 15px; color: var(--muted); border: 1px dashed var(--line); font-size: 11px; }
.setup-tutorial-button { display: block; margin: 13px auto 0; padding: 6px 10px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
.setup-tutorial-button:hover { color: var(--red); text-decoration: underline; }
.setup-account-button { display: block; margin: 4px auto 0; padding: 6px 10px; border: 0; color: var(--teal-dark); background: transparent; cursor: pointer; font-size: 10px; font-weight: 900; }
.setup-account-button:hover { color: var(--red); text-decoration: underline; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
.result-actions #returnLobby { grid-column: 1 / -1; }
.result-actions .primary-button { margin-top: 0; }
.shop-backdrop { z-index: 92; }
.shop-modal { width: min(620px, 100%); max-height: min(760px, calc(100dvh - 24px)); overflow: auto; color: var(--ink); background: var(--paper); border: 4px solid var(--ink); box-shadow: 9px 9px 0 var(--teal); }
.shop-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 20px 0; }
.shop-balance-row strong { color: var(--teal-dark); font-size: 16px; }
.shop-balance-row .secondary-button { padding: 8px 10px; font-size: 10px; }
.shop-note { margin: 8px 20px 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.shop-items { display: grid; gap: 10px; padding: 0 20px 4px; }
.shop-section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 6px 0 1px; color: var(--ink); font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.shop-section-label small { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: 0; }
.effect-shop-label { margin-top: 15px; padding-top: 10px; border-top: 2px dashed var(--line); }
.shop-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; background: #fff; border: 2px solid var(--line); }
.shop-item.equipped { border-color: var(--teal); box-shadow: 3px 3px 0 rgba(17,165,165,.2); }
.shop-card-preview { display: grid; place-items: center; aspect-ratio: 3 / 4; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.shop-card-preview strong { font-size: 30px; }.shop-card-preview span { font-size: 9px; }
.shop-effect-preview { aspect-ratio: 3 / 2; }
.shop-effect-preview span { position: relative; z-index: 1; color: hsl(var(--effect-hue) 100% 82%); font-size: 22px; text-shadow: 0 0 9px hsl(var(--effect-hue) 100% 70%); }
.shop-item-copy { min-width: 0; }.shop-item-copy strong { font-size: 13px; }.shop-item-copy p { margin: 4px 0; color: var(--muted); font-size: 10px; line-height: 1.4; }.shop-item-copy small { color: var(--teal-dark); font-size: 9px; font-weight: 900; }
.shop-action { padding: 8px 9px; white-space: nowrap; font-size: 10px; }
.shop-status { margin: 8px 20px 18px; }
.secondary-button { padding: 13px; border: 2px solid var(--ink); border-radius: 5px; color: var(--ink); background: #fff; cursor: pointer; font-weight: 800; }
.replay-controls { position: fixed; z-index: 70; left: 50%; bottom: 18px; width: min(520px, calc(100% - 24px)); min-height: 62px; display: grid; grid-template-columns: 1fr repeat(3, 42px) auto; align-items: center; gap: 7px; padding: 9px 12px; color: #fff; background: var(--ink); border: 2px solid var(--yellow); box-shadow: 5px 5px 0 var(--red); transform: translateX(-50%); }
.replay-controls[hidden] { display: none; }.replay-controls small, .replay-controls strong { display: block; }.replay-controls small { color: var(--yellow); font-size: 8px; }.replay-controls strong { margin-top: 2px; font-size: 12px; }
.replay-controls button { height: 38px; border: 1px solid #5b5954; border-radius: 4px; color: #fff; background: #302f2d; cursor: pointer; font-weight: 900; }.replay-controls button:last-child { padding: 0 10px; color: var(--ink); background: var(--yellow); }
.setup-backdrop { z-index: 50; background: rgba(20,20,19,.9); }
.modal-back-button { align-self: flex-start; width: auto; margin: 0 0 14px; padding: 7px 10px; border: 2px solid var(--ink); border-radius: 4px; color: var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--yellow); cursor: pointer; font-size: 11px; font-weight: 900; }
.modal-back-button:hover { background: var(--yellow); }
.modal-back-button-dark { color: #fff; background: #2b2a28; border-color: #77736b; box-shadow: 3px 3px 0 var(--red); }
.modal-back-button-dark:hover { color: var(--ink); border-color: var(--yellow); }
.setup-modal { width: min(680px, 100%); max-height: calc(100vh - 32px); padding: 28px; overflow: auto; background: var(--paper); border: 4px solid var(--ink); box-shadow: 9px 9px 0 var(--yellow); }
.setup-brand { display: flex; align-items: center; gap: 14px; }
.setup-brand img { border-radius: 10px; }
.setup-brand small { color: var(--red); font-size: 10px; font-weight: 900; }
.setup-brand h1 { margin: 3px 0 0; font-size: 28px; }
.mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.mode-option { min-height: 76px; padding: 13px; text-align: left; border: 2px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; cursor: pointer; }
.mode-option strong, .mode-option span { display: block; }
.mode-option .mode-lock { float: right; min-width: 24px; min-height: 24px; margin: -3px -2px 2px 8px; font-size: 13px; }
.mode-option.locked { color: var(--muted); border-style: dashed; background: #f1ece4; cursor: not-allowed; }
.mode-option.locked .lock-requirement { display: block; }
.mode-option.locked > span:not(.mode-lock) { color: var(--muted); }
.mode-option strong { font-size: 15px; }
.mode-option span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.mode-option.selected { border-color: var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.ai-mode-section { margin-top: 20px; }
.ai-mode-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ai-mode-option { min-height: 64px; padding: 11px; text-align: left; border: 2px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; cursor: pointer; }
.ai-mode-option strong, .ai-mode-option span { display: block; }
.ai-mode-option strong { font-size: 14px; }
.ai-mode-option span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.ai-mode-option.selected { color: #fff; border-color: var(--ink); background: var(--ink); box-shadow: 3px 3px 0 var(--yellow); }
.ai-mode-option.selected span { color: var(--yellow); }
.difficulty-section { margin-top: 20px; }
.section-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 11px; font-weight: 900; }
.section-label small { color: var(--muted); }
.difficulty-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.difficulty-option { min-height: 58px; padding: 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: #fff; cursor: pointer; text-align: center; }
.difficulty-option strong, .difficulty-option span { display: block; }
.difficulty-option strong { font-size: 13px; }
.difficulty-option span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.difficulty-option.selected { color: #fff; background: var(--ink); border-color: var(--ink); }
.difficulty-option.selected span { color: var(--yellow); }
.difficulty-option.challenge { border-color: var(--red); }
.difficulty-option.challenge.selected { background: var(--red-dark); }
.difficulty-detail { min-height: 34px; margin: 10px 0 0; padding: 9px 11px; color: var(--muted); background: #e8e2d7; border-left: 3px solid var(--teal); font-size: 10px; line-height: 1.55; }
.rank-section { margin-top: 20px; padding: 16px; border: 2px solid var(--ink); background: #fff; }
.rank-header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.rank-header small, .rank-header strong { display: block; }
.rank-header small { color: var(--red); font-size: 9px; font-weight: 900; }
.rank-header strong { margin-top: 3px; font-size: 22px; }
.rank-header > span { padding: 5px 8px; color: #fff; background: var(--ink); font-size: 10px; font-weight: 900; }
.rank-progress { height: 8px; margin: 12px 0; overflow: hidden; background: #ded8cc; border: 1px solid var(--ink); }
.rank-progress i { display: block; width: 0; height: 100%; background: var(--yellow); transition: width .25s ease; }
.rank-road { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rank-road span { min-width: 0; padding: 6px 2px; overflow: hidden; color: var(--muted); background: #e8e2d7; font-size: 8px; font-weight: 900; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.rank-road span.current { color: #fff; background: var(--red-dark); }
.rank-road span.future { opacity: .48; }
.rank-rule { margin-top: 12px; padding: 11px; border-left: 4px solid var(--teal); background: #f1eee7; }
.rank-rule strong { font-size: 12px; }
.rank-rule p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.rank-note { margin: 9px 0 0; color: var(--red); font-size: 9px; font-weight: 800; }
.online-section { margin-top: 20px; padding: 15px; border: 2px solid var(--ink); background: #fff; }
.online-room-actions { display: grid; grid-template-columns: auto minmax(150px, 1fr) auto; align-items: end; gap: 8px; }
.online-room-actions .secondary-button { padding: 10px 12px; }
.online-room-code { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 900; }
.online-room-code input { min-width: 0; padding: 10px; border: 2px solid var(--line); border-radius: 4px; color: var(--ink); background: #faf8f2; font: inherit; letter-spacing: .14em; text-transform: uppercase; }
.online-status { min-height: 28px; margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.online-status.success { color: var(--teal); font-weight: 900; }
.online-status.error { color: var(--red); font-weight: 900; }
.online-endpoint { display: block; color: var(--muted); font-size: 8px; word-break: break-all; }
.start-button { margin-top: 20px; }
.ai-thinking .turn-dot { background: var(--teal); box-shadow: 0 0 0 6px rgba(17,165,165,.14); animation: targetPulse 1.2s infinite; }
.guess-backdrop { z-index: 55; background: rgba(20,20,19,.94); }
.guess-modal { position: relative; width: min(540px, 100%); min-height: min(590px, calc(100vh - 24px)); max-height: calc(100vh - 24px); padding: 28px; text-align: center; color: #fff; background: #20201f; border: 3px solid var(--yellow); box-shadow: 8px 8px 0 var(--red); overflow: auto; }
.guess-kicker { color: var(--yellow); font-size: 9px; font-weight: 900; }
.guess-modal h1 { margin: 4px 0 0; font-size: 30px; }
.guess-modal > p { min-height: 38px; margin: 8px auto 2px; color: #c4c0b8; font-size: 12px; line-height: 1.55; }
.orbit-board { position: relative; width: min(390px, 78vw, calc(100vh - 200px)); aspect-ratio: 1; margin: 5px auto 10px; border: 2px solid #5d5952; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 40px, rgba(255,255,255,.04) 41px 42px); }
.orbit-board::before, .orbit-board::after { content: ""; position: absolute; left: 50%; top: 50%; background: #4e4a44; transform: translate(-50%,-50%); }
.orbit-board::before { width: 88%; height: 1px; }
.orbit-board::after { width: 1px; height: 88%; }
.orbit-node { position: absolute; z-index: 2; left: 50%; top: 50%; width: 38px; height: 38px; padding: 0; border: 2px solid #6a665e; border-radius: 50%; color: #fff; background: #2d2c2a; cursor: pointer; font-weight: 900; transform: translate(-50%,-50%) rotate(calc(var(--i) * 30deg)) translateY(calc(min(168px, 34vw, calc((100vh - 250px) / 2)) * -1)) rotate(calc(var(--i) * -30deg)); }
.orbit-node:hover { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }
.orbit-node.p1 { color: #fff; background: var(--red); border-color: #ff8c80; }
.orbit-node.p2 { color: #fff; background: var(--teal); border-color: #68dddd; }
.orbit-node.p1.p2 { background: linear-gradient(135deg, var(--red) 0 50%, var(--teal) 50% 100%); }
.orbit-node.pulse { color: var(--ink); background: var(--yellow); border-color: #fff; box-shadow: 0 0 0 7px rgba(242,201,76,.22); }
.orbit-core { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: 104px; height: 104px; color: var(--yellow); background: var(--ink); border: 2px solid var(--yellow); border-radius: 50%; transform: translate(-50%,-50%); }
.orbit-core span { align-self: end; font-size: 9px; }
.orbit-core strong { align-self: start; font-size: 37px; line-height: 1; }
.guess-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; color: #aaa7a0; font-size: 9px; }
.guess-legend span { display: flex; align-items: center; gap: 5px; }
.guess-legend i { width: 9px; height: 9px; border-radius: 50%; }
.legend-p1 { background: var(--red); }.legend-p2 { background: var(--teal); }.legend-pulse { background: var(--yellow); }
.pass-screen { position: absolute; z-index: 10; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; background: #20201f; }
.pass-screen[hidden] { display: none; }
.pass-screen strong { font-size: 26px; }.pass-screen span { margin-top: 7px; color: #aaa7a0; font-size: 12px; }.pass-screen button { width: min(300px,100%); }
.exit-backdrop { z-index: 60; }
.confirm-modal { width: min(420px,100%); padding: 30px; text-align: center; background: var(--paper); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--red); }
.confirm-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; color: #fff; background: var(--red); border-radius: 50%; font-size: 26px; font-weight: 900; }
.confirm-modal small { color: var(--red); font-weight: 900; }.confirm-modal h1 { margin: 6px 0; font-size: 24px; }.confirm-modal p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.confirm-actions button { padding: 12px; border: 2px solid var(--ink); border-radius: 4px; background: #fff; cursor: pointer; font-weight: 800; }
.confirm-actions .danger-button { color: #fff; background: var(--red-dark); border-color: var(--red-dark); }
.loop-reset-backdrop { z-index: 75; background: rgba(11,24,29,.9); }
.loop-reset-modal { width: min(465px, 100%); padding: 0 0 24px; color: var(--ink); background: var(--paper); border: 4px solid var(--ink); box-shadow: 9px 9px 0 var(--teal); text-align: center; }
.loop-reset-modal > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 17px; color: #fff; background: var(--ink); font-size: 10px; font-weight: 900; }
.loop-reset-modal > header span { color: var(--yellow); }.loop-reset-modal > header strong { font-size: 11px; }
.loop-reset-mark { display: grid; place-items: center; width: 76px; height: 76px; margin: 22px auto 12px; color: #fff; background: var(--teal-dark); border: 4px solid var(--ink); border-radius: 50%; box-shadow: 4px 4px 0 var(--yellow); font: 900 46px/1 Arial, sans-serif; }
.loop-reset-modal h1 { margin: 0; font-size: 27px; }.loop-reset-modal > p { margin: 8px 26px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.loop-reset-choice { margin: 18px 22px 0; padding: 14px; background: #e2f4f2; border: 2px solid var(--teal-dark); text-align: left; }
.loop-reset-choice small { display: block; color: var(--teal-dark); font-size: 11px; font-weight: 900; }
.loop-reset-digits { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.loop-reset-digit { min-height: 44px; padding: 0; border: 2px solid var(--ink); border-radius: 4px; color: var(--ink); background: #fff; box-shadow: 2px 2px 0 var(--ink); cursor: pointer; font: 900 20px/1 Arial, sans-serif; }
.loop-reset-digit:hover, .loop-reset-digit:focus-visible { color: var(--ink); background: var(--yellow); outline: 3px solid rgba(17,165,165,.35); outline-offset: 2px; }
.loop-reset-note { padding-top: 10px; border-top: 1px solid var(--line); }
.loop-reset-copy { min-height: 40px; }
.loop-reset-draw { display: grid; justify-items: center; gap: 7px; margin: 14px 22px 0; padding: 12px; color: #fff; background: #252523; border: 2px solid var(--yellow); }
.loop-reset-draw[hidden] { display: none; }.loop-reset-draw small { color: var(--yellow); font-size: 10px; font-weight: 900; }.loop-reset-wheel { position: relative; width: 126px; height: 126px; display: grid; place-items: center; border: 5px solid var(--yellow); border-radius: 50%; background: conic-gradient(#e54838 0 14.285%, #f2c94c 14.285% 28.57%, #11a5a5 28.57% 42.855%, #e54838 42.855% 57.14%, #f2c94c 57.14% 71.425%, #11a5a5 71.425% 85.71%, #e54838 85.71%); box-shadow: 0 0 0 5px var(--ink), 0 0 24px rgba(242,201,76,.6); }
.loop-reset-wheel::before { content: ""; position: absolute; inset: 19px; border-radius: 50%; background: var(--ink); border: 2px solid var(--yellow); }.loop-reset-wheel strong { position: relative; z-index: 1; color: #fff; font: 900 34px/1 Arial, sans-serif; }.loop-reset-pointer { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid var(--red); filter: drop-shadow(0 1px 0 var(--ink)); }
@keyframes loopWheelSpin { from { transform: rotate(-35deg) scale(.7); } to { transform: rotate(720deg) scale(1); } }
.loop-reset-wheel.loop-wheel-spin { animation: loopWheelSpin 1.15s cubic-bezier(.16,.72,.2,1) both; }
.tutorial-backdrop { z-index: 80; background: rgba(16,16,15,.94); }
.tutorial-modal { width: min(820px,100%); max-height: calc(100vh - 28px); display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; overflow: hidden; color: var(--ink); background: var(--paper); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--yellow); }
.tutorial-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 22px 13px; background: var(--ink); color: #fff; }
.tutorial-header div { display: flex; align-items: center; gap: 10px; }
.tutorial-header small { color: var(--yellow); font-size: 9px; font-weight: 900; }
.tutorial-header strong { font-size: 11px; }
.tutorial-header button { padding: 7px 9px; border: 1px solid #65625d; border-radius: 4px; color: #fff; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
.tutorial-header button:hover { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }
.tutorial-progress { display: grid; grid-template-columns: repeat(9,1fr); gap: 4px; padding: 10px 22px 0; }
.tutorial-progress i { height: 5px; background: #d5cec1; }
.tutorial-progress i.done { background: var(--red); }.tutorial-progress i.current { background: var(--yellow); }
.tutorial-content { min-height: 0; padding: 22px; overflow: auto; }
.tutorial-kicker { color: var(--red); font-size: 10px; font-weight: 900; }
.tutorial-content h1 { margin: 5px 0 8px; font-size: 30px; letter-spacing: 0; }
.tutorial-lead { max-width: 680px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.tutorial-band { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 20px; border: 1px solid var(--line); background: var(--line); }
.tutorial-band > div { min-width: 0; padding: 14px; background: #fff; }
.tutorial-band b, .tutorial-band span { display: block; }
.tutorial-band b { font-size: 16px; }.tutorial-band span { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.tutorial-demo { margin-top: 20px; padding: 18px; color: #fff; background: #252523; border-left: 5px solid var(--yellow); }
.tutorial-equation { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tutorial-equation b { display: grid; place-items: center; width: 58px; height: 68px; color: var(--ink); background: #fff; border: 3px solid var(--yellow); font-size: 29px; }
.tutorial-equation i { color: var(--yellow); font-style: normal; font-size: 22px; font-weight: 900; }
.tutorial-demo p { margin: 12px 0 0; color: #c8c4bb; font-size: 11px; line-height: 1.65; text-align: center; }
.tutorial-list { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: lesson; }
.tutorial-list li { position: relative; min-height: 37px; padding: 9px 8px 9px 42px; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.55; }
.tutorial-list li::before { counter-increment: lesson; content: counter(lesson); position: absolute; left: 7px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; color: #fff; background: var(--red); border-radius: 50%; font-size: 9px; font-weight: 900; }
.tutorial-skill-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 18px; margin-top: 16px; }
.tutorial-skill { display: grid; grid-template-columns: 40px 82px 1fr; align-items: center; gap: 8px; min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tutorial-skill b { display: grid; place-items: center; height: 32px; color: var(--ink); background: var(--yellow); font-size: 12px; }
.tutorial-skill strong { font-size: 11px; }.tutorial-skill span { min-width: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.tutorial-skill-lab { margin-top: 18px; }
.tutorial-skill-lab-progress { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 800; }
.tutorial-skill-lab-progress strong { color: var(--teal-dark); font-size: 10px; }
.tutorial-skill-focus { display: grid; grid-template-columns: 94px 1fr; gap: 16px; align-items: center; margin-top: 12px; padding: 16px; border: 2px solid var(--ink); background: #fff; box-shadow: 5px 5px 0 var(--yellow); }
.tutorial-skill-focus-code { display: grid; place-items: center; min-height: 78px; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); font-family: Arial, sans-serif; font-size: 30px; font-weight: 900; }
.tutorial-skill-focus-copy span { color: var(--red); font-size: 10px; font-weight: 900; }
.tutorial-skill-focus-copy h2 { margin: 4px 0; font-size: 22px; }
.tutorial-skill-focus-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.tutorial-skill-example { display: grid; gap: 4px; margin-top: 14px; padding: 12px 14px; color: #fff; background: #252523; border-left: 4px solid var(--teal); }
.tutorial-skill-example small { color: #8be4e4; font-size: 9px; font-weight: 900; }
.tutorial-skill-example strong { font-size: 13px; }
.tutorial-skill-example span { color: #c8c4bb; font-size: 10px; line-height: 1.45; }
.tutorial-skill-lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; max-height: min(52vh, 560px); overflow: auto; margin-top: 14px; padding-right: 4px; }
.tutorial-skill-lab-row { display: grid; grid-template-columns: 38px 72px 1fr; align-items: center; gap: 7px; min-width: 0; padding: 7px 0; border-bottom: 1px solid var(--line); }
.tutorial-skill-lab-row.focus { padding-left: 6px; border-left: 4px solid var(--teal); background: #e8f7f5; }
.tutorial-skill-lab-row b { display: grid; place-items: center; min-height: 27px; color: var(--ink); background: var(--yellow); font: 900 11px/1 Arial, sans-serif; }
.tutorial-skill-lab-row strong { font-size: 10px; }.tutorial-skill-lab-row span { min-width: 0; color: var(--muted); font-size: 8px; line-height: 1.35; }
.tutorial-skill-rail { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; margin-top: 15px; }
.tutorial-skill-rail i { height: 7px; background: #d5cec1; }
.tutorial-skill-rail i.done { background: var(--teal); }.tutorial-skill-rail i.current { background: var(--red); }
.tutorial-skill-next { margin-top: 14px; }
.primary-button:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.tutorial-callout { margin-top: 18px; padding: 13px 15px; color: #fff; background: var(--teal-dark); border-left: 5px solid #5bd0e8; font-size: 11px; line-height: 1.65; }
.tutorial-ranks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 18px; }
.tutorial-ranks span { padding: 7px 10px; color: #fff; background: var(--ink); font-size: 10px; font-weight: 900; }
.tutorial-ranks span.locked { color: var(--muted); background: #ddd6ca; }
.tutorial-actions { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 14px 22px 20px; border-top: 1px solid var(--line); background: #ebe5da; }
.tutorial-actions .primary-button { margin: 0; }.tutorial-actions .secondary-button[hidden] { display: block; visibility: hidden; }
.guided-skill-backdrop { z-index: 85; background: rgba(16,16,15,.88); }
.guided-skill-modal { width: min(480px, 100%); padding: 0 0 20px; overflow: hidden; color: var(--ink); background: var(--paper); border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--teal); }
.guided-skill-modal > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 17px; color: #fff; background: var(--ink); }
.guided-skill-modal > header .modal-back-button { order: -1; margin: 0; padding: 5px 7px; font-size: 9px; }
.guided-skill-modal > header span { color: var(--yellow); font-size: 10px; font-weight: 900; }.guided-skill-modal > header strong { font-size: 11px; }
.guided-skill-code { display: grid; place-items: center; width: 94px; height: 84px; margin: 20px auto 10px; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); font-family: Arial, sans-serif; font-size: 35px; font-weight: 900; box-shadow: 4px 4px 0 var(--ink); }
.guided-skill-category { margin: 0; color: var(--red); font-size: 10px; font-weight: 900; text-align: center; }
.guided-skill-modal h1 { margin: 5px 20px; font-size: 27px; text-align: center; }
.guided-skill-description { margin: 0 24px; color: var(--muted); font-size: 13px; line-height: 1.65; text-align: center; }
.guided-skill-path { margin: 16px 20px 0; padding: 12px; color: #fff; background: #252523; border-left: 4px solid var(--teal); font-size: 12px; line-height: 1.55; }
.guided-skill-compact { display: flex; gap: 8px; align-items: start; margin: 14px 20px 0; color: var(--muted); font-size: 10px; line-height: 1.45; cursor: pointer; }
.guided-skill-compact input { flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--teal-dark); }
.guided-skill-modal .primary-button { width: calc(100% - 40px); margin: 16px 20px 0; }
.tutorial-target-card { position: relative; z-index: 4; outline: 5px solid var(--yellow); outline-offset: 4px; animation: tutorialTargetPulse 1s infinite; }
.tutorial-target-card::after { content: "↓"; position: absolute; left: 50%; top: -42px; color: var(--yellow); font-size: 30px; font-weight: 900; line-height: 1; text-shadow: 2px 2px 0 var(--ink); transform: translateX(-50%); pointer-events: none; }
.tutorial-target-source { outline-color: var(--teal); }
.guided-ui-target { position: relative; z-index: 3; outline: 4px solid var(--yellow); outline-offset: 4px; box-shadow: 0 0 0 8px rgba(240, 190, 56, .2), 0 8px 0 rgba(20, 20, 19, .25); animation: guidedUiPulse 1s infinite; }
.guided-ui-target::after { content: "▼"; position: absolute; left: 50%; top: -39px; color: var(--yellow); font-size: 24px; font-weight: 900; line-height: 1; text-shadow: 2px 2px 0 var(--ink); transform: translateX(-50%); pointer-events: none; }
@keyframes tutorialTargetPulse { 50% { outline-offset: 8px; filter: brightness(1.08); } }
@keyframes guidedUiPulse { 50% { outline-offset: 7px; filter: brightness(1.08); } }
@media (max-width: 640px) { .guided-ui-target::after { left: 50%; top: -33px; transform: translateX(-50%); content: "▼"; } }
.effect-toast { position: fixed; z-index: 40; left: 50%; top: 90px; padding: 11px 18px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-weight: 900; transform: translate(-50%,-30px); opacity: 0; pointer-events: none; transition: .22s; }
.effect-toast.show { transform: translate(-50%,0); opacity: 1; }
.effect-stage { position: fixed; z-index: 39; inset: 0; overflow: hidden; pointer-events: none; }
.vfx { position: absolute; left: var(--x); top: var(--y); pointer-events: none; }
.vfx-projectile { width: 58px; height: 8px; transform: translate(-50%,-50%) rotate(var(--angle)); animation: projectileFly .62s cubic-bezier(.2,.8,.25,1) var(--delay,0ms) both; }
.vfx-projectile::before { content: ""; position: absolute; inset: 2px 8px 2px 0; background: var(--vfx-color,#282827); box-shadow: 0 1px 0 #fff; }
.vfx-projectile.arrow::after { content: ""; position: absolute; right: 0; top: -4px; border-left: 13px solid var(--vfx-color,#282827); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.vfx-projectile.arrow i { position: absolute; left: -8px; top: -4px; width: 13px; height: 13px; border-left: 3px solid var(--vfx-color,#282827); transform: rotate(45deg); }
.vfx-projectile.bullet { width: 26px; height: 7px; border-radius: 50% 5px 5px 50%; background: var(--yellow); box-shadow: -16px 0 10px var(--red), 0 0 6px #fff; }
.vfx-projectile.bullet::before { display: none; }
@keyframes projectileFly { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--angle)) scale(.6); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--angle)) scale(1.05); } }
.vfx-impact { width: 36px; height: 36px; transform: translate(-50%,-50%); animation: impactBurst .48s ease-out both; }
.vfx-impact::before, .vfx-impact::after { content: ""; position: absolute; inset: 15px -12px; background: var(--vfx-color,var(--red)); box-shadow: 0 0 12px var(--vfx-color,var(--red)); transform: rotate(45deg); }
.vfx-impact::after { transform: rotate(-45deg); }
@keyframes impactBurst { from { opacity: 1; transform: translate(-50%,-50%) scale(.25) rotate(0); } to { opacity: 0; transform: translate(-50%,-50%) scale(2.3) rotate(45deg); } }
.vfx-ring { width: 52px; height: 52px; border: 5px solid var(--vfx-color,var(--teal)); border-radius: 50%; box-shadow: 0 0 18px var(--vfx-color,var(--teal)), inset 0 0 12px var(--vfx-color,var(--teal)); transform: translate(-50%,-50%); animation: ringPulse .85s ease-out both; }
.vfx-ring::before { content: attr(data-symbol); position: absolute; inset: 50% auto auto 50%; color: var(--vfx-color,var(--teal)); font-size: 32px; font-weight: 900; text-shadow: 0 2px #fff; transform: translate(-50%,-50%); }
@keyframes ringPulse { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.25); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.4); } }
.vfx-lightning { width: 8px; height: var(--distance); background: #f7e35a; box-shadow: 0 0 8px #fff, 0 0 18px #39bfe8; transform-origin: 50% 0; transform: translate(-50%,0) rotate(var(--beam-angle)) skewX(-12deg); clip-path: polygon(35% 0,100% 0,55% 42%,95% 42%,15% 100%,42% 55%,0 55%); animation: lightningFlash .58s steps(2,end) both; }
@keyframes lightningFlash { 0%,35%,70% { opacity: 0; } 15%,50%,85% { opacity: 1; } 100% { opacity: 0; } }
.vfx-hammer { width: 64px; height: 26px; color: #fff; background: var(--ink); border: 4px solid var(--yellow); box-shadow: 0 0 18px var(--red); transform-origin: 100% 50%; animation: hammerDrop .65s ease-in both; }
.vfx-hammer.small { width: 44px; height: 20px; border-width: 3px; }
.vfx-hammer.heavy { width: 82px; height: 34px; border-width: 6px; }
.vfx-hammer::after { content: ""; position: absolute; right: -42px; top: 8px; width: 44px; height: 8px; background: var(--ink); }
@keyframes hammerDrop { 0% { opacity: 0; transform: translate(-90px,-100px) rotate(-55deg) scale(.7); } 55% { opacity: 1; } 80% { transform: translate(-50%,-50%) rotate(18deg) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(8deg) scale(.9); } }
.vfx-claw { width: 92px; height: 92px; transform: translate(-50%,-50%) rotate(-18deg); animation: clawStrike .62s ease-out both; }
.vfx-claw i { position: absolute; left: 0; width: 100%; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px #fff; transform: skewX(-35deg); }
.vfx-claw i:nth-child(1) { top: 18px; }.vfx-claw i:nth-child(2) { top: 42px; }.vfx-claw i:nth-child(3) { top: 66px; }
@keyframes clawStrike { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 25% { opacity: 1; } 75% { clip-path: inset(0 0 0 0); } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(-18deg) scale(1.25); } }
.vfx-hook { width: 76px; height: 76px; border: 9px solid var(--yellow); border-top-color: transparent; border-left-color: transparent; border-radius: 50%; filter: drop-shadow(0 0 8px var(--red)); transform: translate(-50%,-50%); animation: hookSpin .8s ease-in both; }
.vfx-hook::after { content: ""; position: absolute; right: -13px; bottom: -6px; border-left: 17px solid var(--yellow); border-top: 10px solid transparent; border-bottom: 10px solid transparent; transform: rotate(35deg); }
@keyframes hookSpin { 0% { opacity: 0; transform: translate(-140px,-100px) rotate(-180deg) scale(.5); } 55% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(210deg) scale(1.3); } }
.vfx-explosion { width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 8px var(--yellow), 0 0 0 18px var(--red), 0 0 45px 25px var(--red); transform: translate(-50%,-50%); animation: explosionBloom .72s ease-out both; }
.vfx-explosion::before, .vfx-explosion::after { content: ""; position: absolute; inset: -55px 14px; background: var(--yellow); transform: rotate(45deg); }
.vfx-explosion::after { transform: rotate(-45deg); }
@keyframes explosionBloom { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.1) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.6) rotate(45deg); } }
.vfx-shield { width: 82px; height: 94px; border: 7px solid #5bd0e8; border-radius: 44% 44% 55% 55% / 30% 30% 70% 70%; background: rgba(91,208,232,.16); box-shadow: 0 0 24px #188ac7, inset 0 0 18px #188ac7; transform: translate(-50%,-50%); animation: shieldReady .82s ease-out both; }
@keyframes shieldReady { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.45); } }
.vfx-shard { width: 15px; height: 22px; background: #75ddf0; border: 2px solid #fff; clip-path: polygon(50% 0,100% 35%,68% 100%,0 70%); transform: translate(-50%,-50%); animation: shardBreak .7s ease-out both; }
@keyframes shardBreak { to { opacity: 0; transform: translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) rotate(var(--spin)); } }
.vfx-revive { width: 70px; height: 100px; border: 5px solid var(--yellow); border-radius: 50%; box-shadow: 0 0 25px #fff, 0 0 45px var(--yellow); transform: translate(-50%,-50%); animation: reviveRise 1.1s ease-out both; }
.vfx-revive::before, .vfx-revive::after { content: ""; position: absolute; left: 50%; top: 50%; width: 58px; height: 10px; background: #fff; box-shadow: 0 0 15px var(--yellow); transform: translate(-50%,-50%); }
.vfx-revive::after { transform: translate(-50%,-50%) rotate(90deg); }
@keyframes reviveRise { 0% { opacity: 0; transform: translate(-50%,30%) scale(.35); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-80%) scale(1.5); } }
.vfx-swap { height: 8px; width: var(--distance); background: linear-gradient(90deg,var(--red),#fff,var(--teal)); box-shadow: 0 0 18px #fff; transform-origin: 0 50%; transform: translateY(-50%) rotate(var(--angle)); animation: swapBeam .8s ease-in-out both; }
@keyframes swapBeam { 0%,100% { opacity: 0; filter: hue-rotate(0deg); } 30%,70% { opacity: 1; } 100% { filter: hue-rotate(180deg); } }
.vfx-combo-badge { min-width: 96px; min-height: 34px; padding: 7px 12px; color: #fff; background: rgba(19,20,31,.96); background: linear-gradient(135deg, rgba(19,20,31,.96), color-mix(in srgb, var(--vfx-color) 72%, #13141f)); border: 2px solid var(--vfx-color); border-radius: 999px; box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 7px 18px rgba(0,0,0,.28); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vfx-color) 22%, transparent), 0 7px 18px rgba(0,0,0,.28); transform: translate(-50%,-50%); animation: comboBadgeIn .9s cubic-bezier(.2,.8,.25,1) both; }
.vfx-combo-badge::before { content: attr(data-symbol); position: relative; z-index: 1; display: block; font-size: 13px; font-weight: 900; letter-spacing: .04em; text-align: center; text-shadow: 0 1px 8px var(--vfx-color); white-space: nowrap; }
.vfx-combo-badge::after { content: ""; position: absolute; inset: -7px; border: 1px solid var(--vfx-color); border-radius: inherit; opacity: .6; animation: comboBadgeRing .9s ease-out both; }
.vfx[class*="effect-style-"] { filter: hue-rotate(calc(var(--effect-hue, 190) * 1deg)) saturate(1.22) drop-shadow(0 0 6px hsl(var(--effect-hue, 190) 100% 68% / .58)); }
.vfx.effect-style-01 { animation-timing-function: steps(5, end); }.vfx.effect-style-02 { mix-blend-mode: screen; }.vfx.effect-style-03 { transform-origin: 30% 70%; }.vfx.effect-style-04 { animation-timing-function: cubic-bezier(.1,.85,.2,1); }.vfx.effect-style-05 { filter: hue-rotate(calc(var(--effect-hue, 190) * 1deg)) saturate(1.5) drop-shadow(0 0 10px hsl(var(--effect-hue, 190) 100% 72% / .7)); }.vfx.effect-style-06 { opacity: .92; }.vfx.effect-style-07 { mix-blend-mode: lighten; }.vfx.effect-style-08 { transform-origin: 70% 30%; }.vfx.effect-style-09 { animation-timing-function: ease-in-out; }.vfx.effect-style-10 { filter: hue-rotate(calc(var(--effect-hue, 190) * 1deg)) saturate(1.35) contrast(1.12); }.vfx.effect-style-11 { opacity: .86; }
.vfx[class*="effect-skill-"] { filter: saturate(1.58) drop-shadow(0 0 8px var(--aura-color, #fff)); }
.vfx-style-aura { position: absolute; z-index: 3; inset: -14px; border: 3px solid var(--aura-color, #fff); border-radius: 48% 52% 44% 56%; background: radial-gradient(circle, var(--aura-color, #fff) 0 4%, transparent 5% 58%, color-mix(in srgb, var(--aura-color, #fff) 24%, transparent) 59% 62%, transparent 63%); box-shadow: 0 0 10px var(--aura-color, #fff), inset 0 0 8px var(--aura-color, #fff); opacity: .88; pointer-events: none; animation: skillAuraPop .72s ease-out both; }
.vfx-style-aura::before { content: attr(data-symbol); position: absolute; left: 50%; top: -11px; color: var(--aura-color, #fff); font: 900 9px/1 Arial, sans-serif; text-shadow: 0 0 6px var(--aura-color, #fff); transform: translateX(-50%); }
@keyframes skillAuraPop { 0% { opacity: 0; transform: scale(.35) rotate(-20deg); } 35% { opacity: .94; } 100% { opacity: 0; transform: scale(1.42) rotate(24deg); } }
.vfx.effect-skill-11, .vfx-style-aura.effect-skill-11 { --aura-color: #ff3f8e; --aura-tilt: -18deg; }
.vfx.effect-skill-22, .vfx-style-aura.effect-skill-22 { --aura-color: #29e58f; --aura-tilt: 12deg; }
.vfx.effect-skill-33, .vfx-style-aura.effect-skill-33 { --aura-color: #ff5964; --aura-tilt: -7deg; }
.vfx.effect-skill-40, .vfx-style-aura.effect-skill-40 { --aura-color: #ffb21f; --aura-tilt: 24deg; }
.vfx.effect-skill-43, .vfx-style-aura.effect-skill-43 { --aura-color: #ff254f; --aura-tilt: -25deg; }
.vfx.effect-skill-44, .vfx-style-aura.effect-skill-44 { --aura-color: #b06cff; --aura-tilt: 30deg; }
.vfx.effect-skill-54, .vfx-style-aura.effect-skill-54 { --aura-color: #31e6b1; --aura-tilt: -12deg; }
.vfx.effect-skill-15, .vfx-style-aura.effect-skill-15 { --aura-color: #ff7b45; --aura-tilt: 17deg; }
.vfx.effect-skill-25, .vfx-style-aura.effect-skill-25 { --aura-color: #ff5dc8; --aura-tilt: -31deg; }
.vfx.effect-skill-35, .vfx-style-aura.effect-skill-35 { --aura-color: #8d7bff; --aura-tilt: 8deg; }
.vfx.effect-skill-16, .vfx-style-aura.effect-skill-16 { --aura-color: #ffde49; --aura-tilt: -8deg; }
.vfx.effect-skill-26, .vfx-style-aura.effect-skill-26 { --aura-color: #43c9ff; --aura-tilt: 22deg; }
.vfx.effect-skill-36, .vfx-style-aura.effect-skill-36 { --aura-color: #db59ff; --aura-tilt: -18deg; }
.vfx.effect-skill-71, .vfx-style-aura.effect-skill-71 { --aura-color: #e9f05b; --aura-tilt: 5deg; }
.vfx.effect-skill-66, .vfx-style-aura.effect-skill-66 { --aura-color: #ff9d28; --aura-tilt: -26deg; }
.vfx.effect-skill-67, .vfx-style-aura.effect-skill-67 { --aura-color: #42f4ff; --aura-tilt: 14deg; }
.vfx.effect-skill-70, .vfx-style-aura.effect-skill-70 { --aura-color: #6da4ff; --aura-tilt: -13deg; }
.vfx.effect-skill-77, .vfx-style-aura.effect-skill-77 { --aura-color: #f7ee5c; --aura-tilt: 36deg; }
.vfx.effect-skill-18, .vfx-style-aura.effect-skill-18 { --aura-color: #ffbd52; --aura-tilt: -34deg; }
.vfx.effect-skill-28, .vfx-style-aura.effect-skill-28 { --aura-color: #68ee8d; --aura-tilt: 20deg; }
.vfx.effect-skill-38, .vfx-style-aura.effect-skill-38 { --aura-color: #b3ff4d; --aura-tilt: -9deg; }
.vfx.effect-skill-68, .vfx-style-aura.effect-skill-68 { --aura-color: #4ce9e1; --aura-tilt: 27deg; }
.vfx.effect-skill-78, .vfx-style-aura.effect-skill-78 { --aura-color: #ff6eac; --aura-tilt: -19deg; }
.vfx.effect-skill-80, .vfx-style-aura.effect-skill-80 { --aura-color: #ff634e; --aura-tilt: 10deg; }
.vfx.effect-skill-84, .vfx-style-aura.effect-skill-84 { --aura-color: #51ddcc; --aura-tilt: -28deg; }
.vfx.effect-skill-88, .vfx-style-aura.effect-skill-88 { --aura-color: #54d6ff; --aura-tilt: 16deg; }
.vfx.effect-skill-91, .vfx-style-aura.effect-skill-91 { --aura-color: #ff4e72; --aura-tilt: -6deg; }
.vfx.effect-skill-96, .vfx-style-aura.effect-skill-96 { --aura-color: #d36cff; --aura-tilt: 32deg; }
.vfx.effect-skill-99, .vfx-style-aura.effect-skill-99 { --aura-color: #ffc844; --aura-tilt: -22deg; }
.vfx.effect-skill-00, .vfx-style-aura.effect-skill-00 { --aura-color: #ff3b3b; --aura-tilt: 4deg; }
.vfx.effect-skill-10, .vfx-style-aura.effect-skill-10 { --aura-color: #9b8cff; --aura-tilt: -32deg; }
.vfx.effect-skill-50, .vfx-style-aura.effect-skill-50 { --aura-color: #ee456e; --aura-tilt: 18deg; }
.vfx.effect-skill-42, .vfx-style-aura.effect-skill-42 { --aura-color: #ff7d39; --aura-tilt: -16deg; }
.vfx.effect-skill-55, .vfx-style-aura.effect-skill-55 { --aura-color: #6affbf; --aura-tilt: 29deg; }
.vfx.effect-skill-90, .vfx-style-aura.effect-skill-90 { --aura-color: #ff527d; --aura-tilt: -11deg; }
.vfx.effect-skill-98, .vfx-style-aura.effect-skill-98 { --aura-color: #d27cff; --aura-tilt: 7deg; }
@keyframes comboBadgeIn { 0% { opacity: 0; transform: translate(-50%,-40%) scale(.55) rotate(-5deg); } 18% { opacity: 1; } 72% { opacity: 1; transform: translate(-50%,-50%) scale(1.03) rotate(0); } 100% { opacity: 0; transform: translate(-50%,-68%) scale(.92); } }
@keyframes comboBadgeRing { 0% { opacity: .8; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.45); } }
.vfx-projectile { filter: drop-shadow(0 0 5px var(--vfx-color,#282827)); }
.vfx-ring { background: radial-gradient(circle, rgba(255,255,255,.28), transparent 62%); }
.vfx-impact { filter: drop-shadow(0 0 7px var(--vfx-color,var(--red))); }
.vfx-hammer { filter: drop-shadow(0 0 8px var(--yellow)); }
.vfx-explosion { filter: saturate(1.25); }
.vfx-screen-flash { position: fixed; inset: 0; background: var(--vfx-color,#fff); mix-blend-mode: screen; animation: screenFlash .42s ease-out both; }
@keyframes screenFlash { from { opacity: .48; } to { opacity: 0; } }
.shake { animation: shake .34s; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .vfx { animation-duration: .01ms !important; animation-delay: 0ms !important; }
}

@media (max-width: 980px) and (orientation: portrait) {
  .arena { grid-template-columns: 1fr 1fr; }
  .center-stage { grid-column: 1 / -1; grid-row: 2; }
  .battle-log-wrap { min-height: 170px; }
  .battle-log { max-height: 140px; }
}
@media (max-width: 640px) and (orientation: portrait) {
  .topbar { height: 62px; padding: 0 12px; }
  .brand img { width: 36px; height: 36px; }
  .brand strong { font-size: 16px; }
  .brand span { display: none; }
  .icon-button { width: 34px; height: 34px; }
  .account-button { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .economy-bar { padding: 2px; gap: 2px; font-size: 8px; }.economy-bar > span { display: none; }.shop-button { min-height: 26px; padding: 0 5px; font-size: 8px; }
  .account-button > span:last-child { display: none; }
  .tutorial-modal { max-height: calc(100vh - 14px); }
  .tutorial-header { padding: 14px 13px 10px; }.tutorial-progress { padding: 8px 13px 0; }
  .tutorial-content { padding: 16px 13px; }.tutorial-content h1 { font-size: 23px; }
  .tutorial-band { grid-template-columns: 1fr; }.tutorial-skill-list { grid-template-columns: 1fr; }
  .tutorial-skill-focus { grid-template-columns: 70px 1fr; gap: 11px; padding: 11px; }.tutorial-skill-focus h2 { font-size: 18px; }
  .tutorial-skill-rail { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .guided-skill-modal { max-height: calc(100vh - 26px); overflow: auto; }.guided-skill-code { width: 78px; height: 70px; margin-top: 15px; font-size: 28px; }
  .move-preview-options { grid-template-columns: 1fr; }
  .tutorial-actions { grid-template-columns: 92px 1fr; padding: 11px 13px 14px; }
  main { padding: 12px 10px 20px; }
  .turn-banner { min-height: 58px; }
  .turn-banner strong { max-width: 190px; font-size: 12px; }
  .arena { display: flex; flex-direction: column; gap: 12px; }
  .player-panel { padding: 16px; }
  .player-panel.active { order: -2; }
  .center-stage { order: -1; }
  .player-heading h2 { font-size: 17px; }
  .health-row { margin-top: 12px; }
  .health-label strong { font-size: 22px; }
  .hand-label { margin-top: 13px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .number-card { min-height: 116px; }
  .number-card strong { font-size: 58px; }
  .combo-preview { margin-top: 13px; }
  .selection-well { min-height: 96px; margin-top: 8px; }
  .pick-slot, .result-slot { height: 64px; }
  .battle-log-wrap { min-height: 150px; }
  .rules-grid { grid-template-columns: 1fr; }
  .setup-modal { padding: 20px; }
  .setup-brand h1 { font-size: 23px; }
  .mode-switch { grid-template-columns: 1fr; }
  .mode-option { min-height: 62px; }
  .ai-mode-switch { grid-template-columns: 1fr; }
  .difficulty-list { grid-template-columns: repeat(2, 1fr); }
  .rank-section { padding: 12px; }
  .rank-road { grid-template-columns: repeat(4, 1fr); }
  .online-room-actions { grid-template-columns: 1fr; }
  .item-counts { gap: 3px; }.shield-count, .revive-count, .reflect-count, .sky-count, .rage-count, .qian-count, .blood-count { padding: 4px 5px; }
  .replay-controls { grid-template-columns: 1fr repeat(3, 36px); }.replay-controls button:last-child { grid-column: 1 / -1; }
  .guess-modal { min-height: min(540px, calc(100vh - 20px)); padding: 20px 12px; }
  .orbit-board { width: min(340px, 86vw, calc(100vh - 190px)); }
  .orbit-node { width: 34px; height: 34px; transform: translate(-50%,-50%) rotate(calc(var(--i) * 30deg)) translateY(calc(min(146px, 37vw, calc((100vh - 235px) / 2)) * -1)) rotate(calc(var(--i) * -30deg)); }
}

/* Landscape phones keep the complete duel board on one row without horizontal scrolling. */
@media (orientation: landscape) and (max-width: 950px), (orientation: landscape) and (max-height: 600px) {
  body { min-width: 0; }
  .topbar { min-height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); border-bottom-width: 3px; }
  .brand { gap: 7px; }
  .brand img { width: 30px; height: 30px; }
  .brand strong { font-size: 15px; }
  .brand span { display: none; }
  .top-actions { gap: 4px; }
  .icon-button, .account-button { width: 30px; height: 30px; min-width: 30px; padding: 0; font-size: 14px; }
  .account-button { justify-content: center; }
  .account-manage-button { width: 30px; padding: 0; overflow: hidden; font-size: 0; }
  .account-manage-button::before { content: "管"; font-size: 10px; }
  .account-button > span:last-child { display: none; }
  .account-mark { flex-basis: 20px; width: 20px; height: 20px; font-size: 9px; }

  main { padding: 7px max(8px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .turn-banner { min-height: 40px; gap: 7px; padding: 5px 9px; border-left-width: 4px; }
  .turn-dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(229,72,56,.14); }
  .turn-banner small { display: none; }
  .turn-banner strong { font-size: 10px; line-height: 1.25; }
  .round-tag { padding: 4px 6px; font-size: 9px; white-space: nowrap; }

  .arena { grid-template-columns: minmax(0, .9fr) minmax(176px, 1.05fr) minmax(0, .9fr); gap: 8px; margin-top: 8px; align-items: start; }
  .player-panel { padding: 10px; border-width: 1px; box-shadow: 3px 3px 0 #c7bfb2; }
  .player-panel::before { height: 4px; }
  .player-panel.active { transform: translateY(-1px); }
  .player-one.active, .player-two.active { box-shadow: 3px 3px 0 rgba(229,72,56,.3); }
  .player-two.active { box-shadow: 3px 3px 0 rgba(17,165,165,.3); }
  .player-heading { gap: 5px; }
  .player-badge { width: 27px; height: 27px; border-width: 2px; font-size: 9px; }
  .player-heading h2 { font-size: 13px; white-space: nowrap; }
  .status-copy { display: none; }
  .item-counts { gap: 2px; }
  .shield-count, .revive-count, .reflect-count, .sky-count, .rage-count, .qian-count, .blood-count { gap: 2px; padding: 2px 3px; border-width: 1px; font-size: 8px; }
  .health-row { margin-top: 9px; }
  .health-label span { font-size: 8px; }
  .health-label strong { font-size: 18px; }
  .health-label strong::after { font-size: 7px; }
  .health-track { height: 8px; margin-top: 3px; border-width: 1px; }
  .hand-label { margin-top: 9px; font-size: 8px; letter-spacing: .5px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 5px; }
  .number-card { min-height: 76px; border-width: 2px; border-radius: 4px; box-shadow: 3px 3px 0 var(--ink); }
  .number-card::before, .number-card::after { inset: 3px auto auto 4px; font-size: 9px; }
  .number-card::after { inset: auto 4px 3px auto; }
  .number-card strong { font-size: clamp(34px, 8vh, 50px); }
  .number-card em { right: 3px; bottom: 2px; padding: 1px 2px; font-size: 6px; }
  .number-card.selected { transform: translateY(-3px); box-shadow: 3px 6px 0 var(--ink); }
  .combo-preview { min-height: 24px; margin-top: 9px; padding: 5px; border-left-width: 2px; font-size: 8px; line-height: 1.35; overflow-wrap: anywhere; }
  .motion-action { min-height: 38px; margin-top: 8px; padding: 5px 7px; border-width: 1px; box-shadow: 2px 2px 0 var(--ink); font-size: 9px; }
  .motion-action strong { font-size: 12px; }.motion-action small { font-size: 7px; }

  .center-stage { padding: 0; }
  .versus { width: 38px; height: 24px; font-size: 10px; }
  .selection-well { min-height: 66px; margin-top: 6px; padding: 6px; gap: 2px; border-width: 1px; }
  .pick-slot, .result-slot { height: 50px; border-radius: 3px; }
  .pick-slot span, .result-slot strong { font-size: 21px; }
  .pick-slot small, .result-slot small { margin-top: 3px; font-size: 7px; line-height: 1.2; overflow-wrap: anywhere; }
  .plus, .equals { font-size: 11px; }
  .action-hint { min-height: 14px; margin: 5px 0; font-size: 9px; line-height: 1.3; }
  .move-preview { margin-bottom: 7px; border-width: 1px; box-shadow: 2px 2px 0 var(--yellow); }
  .move-preview-heading { gap: 5px; padding: 5px 6px; }
  .move-preview-heading span, .move-preview-heading strong { font-size: 8px; }
  .move-preview-options { gap: 4px; padding: 5px; }
  .move-preview-option { min-height: 68px; padding: 5px; border-width: 1px; }
  .move-preview-route, .move-preview-effect { font-size: 7px; }
  .move-preview-sum { margin: 3px 0; font-size: 10px; }.move-preview-sum strong { min-width: 17px; height: 17px; font-size: 11px; }
  .coach-panel { margin-bottom: 7px; padding: 7px; border-left-width: 3px; }.coach-heading, .coach-heading button, .coach-panel small { font-size: 8px; }.coach-panel > strong { margin-top: 3px; font-size: 10px; }.coach-panel p { margin: 2px 0; font-size: 8px; line-height: 1.35; }
  .battle-log-wrap { min-height: 82px; padding: 7px; }.log-heading { padding-bottom: 4px; font-size: 9px; }.log-heading button { font-size: 8px; }.battle-log { max-height: 88px; }.battle-log li { grid-template-columns: 17px 1fr; gap: 4px; padding: 4px 0; font-size: 8px; line-height: 1.3; }.battle-log li::before { width: 15px; height: 15px; font-size: 7px; }

  .modal-backdrop { padding: 8px; }
  .setup-modal, .result-modal, .account-modal, .shop-modal, .tutorial-modal, .guided-skill-modal, .confirm-modal, .guess-modal, .loop-reset-modal { max-height: calc(100dvh - 16px); overflow: auto; }
  .rules-drawer { width: min(440px, 92vw); padding: 15px; }
  .rules-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.rule-item { gap: 5px; padding: 5px; }.rule-combo { flex-basis: 26px; height: 26px; font-size: 9px; }.rule-item strong { font-size: 9px; }.rule-item span { font-size: 7px; }
  .replay-controls { bottom: max(7px, env(safe-area-inset-bottom)); padding: 6px; gap: 4px; }.replay-controls button { min-height: 28px; padding: 4px 7px; font-size: 9px; }
  .loop-reset-modal { padding-bottom: 14px; }.loop-reset-mark { width: 58px; height: 58px; margin: 14px auto 8px; font-size: 36px; }.loop-reset-modal h1 { font-size: 22px; }.loop-reset-modal > p { margin: 6px 16px 0; font-size: 10px; }.loop-reset-choice { margin: 13px 14px 0; padding: 10px; }.loop-reset-digits { gap: 4px; margin-top: 8px; }.loop-reset-digit { min-height: 34px; font-size: 16px; }.loop-reset-draw { margin: 10px 14px 0; padding: 8px; }.loop-reset-wheel { width: 92px; height: 92px; }.loop-reset-wheel strong { font-size: 27px; }
  .shop-item { grid-template-columns: 62px minmax(0, 1fr); }.shop-action { grid-column: 2; justify-self: start; }.shop-balance-row { padding-left: 14px; padding-right: 14px; }.shop-note, .shop-items, .shop-status { margin-left: 14px; margin-right: 14px; padding-left: 0; padding-right: 0; }
}

@media (orientation: landscape) and (max-width: 520px) {
  .arena { grid-template-columns: minmax(0, .86fr) minmax(144px, 1fr) minmax(0, .86fr); gap: 5px; }
  .player-panel { padding: 8px; }
  .item-counts { display: flex; flex-wrap: wrap; gap: 2px; max-width: 78px; }
  .item-counts > div:not(.rage-count):not(.qian-count):not(.blood-count):not(.sky-count) { display: none; }
  .player-heading h2 { font-size: 11px; }
  .cards { gap: 5px; }
  .number-card { min-height: 70px; }
  .number-card strong { font-size: clamp(30px, 9vh, 42px); }
  .selection-well { padding: 4px; }
}

.team-rules-note { display: grid; gap: 5px; }
.team-rules-note strong { color: var(--ink); font-size: 10px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Team battle room and the six-player local board. */
.team-setup-backdrop { z-index: 60; padding: 0; }
.team-setup-modal { width: min(1120px, 100%); min-height: 100dvh; max-height: 100dvh; padding: clamp(20px, 4vw, 48px); overflow: auto; color: var(--ink); background: var(--paper); }
.team-setup-modal > .modal-back-button, .battle-mode-modal > .modal-back-button { width: max-content; margin-left: 0; margin-right: auto; }
.guess-modal > .modal-back-button, .result-modal > .modal-back-button { display: block; margin-left: 0; margin-right: auto; }
.team-room-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 15px; border-bottom: 3px solid var(--ink); }
.team-room-heading small { display: block; color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: 1.5px; }
.team-room-heading h1 { margin: 5px 0 0; font-size: clamp(28px, 5vw, 48px); }
.team-room-heading > span { padding: 8px 10px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); font-size: 11px; font-weight: 900; }
.team-room-copy { max-width: 760px; margin: 16px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.team-opening-note { max-width: 760px; margin: -6px 0 16px; padding: 8px 10px; color: var(--teal-dark); background: #e4f5f2; border-left: 3px solid var(--teal-dark); font-size: 11px; font-weight: 800; }
.team-difficulty-section { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 760px; margin: 0 0 18px; padding: 10px 12px; color: var(--ink); background: #fff; border: 2px solid var(--ink); }
.team-difficulty-section strong, .team-difficulty-section small { display: block; }.team-difficulty-section strong { font-size: 12px; }.team-difficulty-section small { margin-top: 3px; color: var(--muted); font-size: 9px; }.team-difficulty-section select { min-height: 36px; padding: 5px 9px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); font-weight: 900; }
.team-room-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.team-seat { position: relative; min-height: 150px; display: grid; place-items: center; padding: 12px; color: var(--ink); background: #fffdfa; border: 3px dashed var(--line); cursor: pointer; text-align: center; }
.team-seat.team-a { border-color: var(--teal-dark); }.team-seat.team-b { border-color: var(--red-dark); }
.team-seat:hover, .team-seat:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; transform: translateY(-2px); }
.team-seat .seat-index { position: absolute; left: 9px; top: 8px; font-size: 10px; font-weight: 900; }
.team-seat .seat-plus { font-size: 42px; line-height: 1; color: var(--muted); }.team-seat .seat-role { display: block; margin-top: 5px; font-size: 11px; font-weight: 900; }.team-seat .seat-owner { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.team-seat.occupied { border-style: solid; box-shadow: 4px 4px 0 var(--ink); }.team-seat.occupied .seat-plus { font-size: 24px; color: var(--red); }.team-seat.team-a.occupied { background: #e4f5f2; }.team-seat.team-b.occupied { background: #fff0ed; }
.team-seat-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 14px; background: #fff; border: 2px solid var(--ink); }.team-seat-choice > div { display: flex; flex-wrap: wrap; gap: 7px; }
.team-role-button { min-height: 38px; padding: 7px 12px; border: 2px solid var(--ink); color: var(--ink); background: var(--yellow); cursor: pointer; font-weight: 900; }.team-role-button.remove { background: #fff; color: var(--red-dark); }
.team-room-status { min-height: 24px; margin-top: 14px; color: var(--teal-dark); font-size: 12px; font-weight: 900; }
.team-setup-modal .start-button { max-width: 420px; }.team-setup-modal .setup-tutorial-button { margin-top: 10px; }
.team-arena { padding: 16px clamp(10px, 3vw, 36px) 24px; }.team-turn-banner { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 10px 15px; background: #fffdfa; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--yellow); }.team-turn-banner > div { flex: 1; }.team-turn-banner small { display: block; color: var(--muted); font-size: 9px; font-weight: 900; }.team-turn-banner strong { display: block; margin-top: 3px; font-size: 15px; }.team-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .85fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; align-items: start; }.team-side { min-width: 0; padding: 12px; background: #fffdfa; border: 2px solid var(--ink); }.team-side-a { box-shadow: 5px 5px 0 var(--teal); }.team-side-b { box-shadow: 5px 5px 0 var(--red); }.team-side > header { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; border-bottom: 2px solid var(--line); }.team-side > header > span { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--teal-dark); border: 2px solid var(--ink); font-weight: 900; }.team-side-b > header > span { background: var(--red-dark); }.team-side > header strong { font-size: 15px; }.team-side > header small { margin-left: auto; color: var(--muted); font-size: 9px; font-weight: 900; }.team-player { margin-top: 10px; padding: 9px; border: 1px solid var(--line); background: #fff; }.team-player.active { border: 3px solid var(--yellow); box-shadow: 3px 3px 0 var(--ink); }.team-player.dead { opacity: .43; filter: grayscale(.8); }.team-player-head { display: flex; align-items: center; gap: 6px; }.team-player-head strong { font-size: 11px; }.team-player-head small { margin-left: auto; color: var(--muted); font-size: 8px; }.team-player-health { display: flex; justify-content: space-between; align-items: baseline; margin-top: 7px; font-size: 8px; color: var(--muted); }.team-player-health b { color: var(--ink); font-size: 16px; }.team-player-track { height: 5px; margin-top: 3px; background: var(--paper-deep); }.team-player-track i { display: block; height: 100%; background: var(--teal-dark); }.team-side-b .team-player-track i { background: var(--red-dark); }.team-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }.team-card { min-height: 58px; padding: 0; color: var(--ink); background: #fff; border: 2px solid var(--ink); cursor: pointer; font-weight: 900; }.team-card strong { display: block; font-size: 25px; }.team-card small { display: block; font-size: 7px; }.team-card:disabled { cursor: default; opacity: .55; }.team-card.selectable { background: #fff4bf; }.team-card.targetable { background: #d9f2ef; }.team-card.selected { background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); }.team-card.zero-spent { background: #ece8df; }.team-card.zero-spent small { color: var(--red); }.team-center { min-width: 0; }.team-center .versus { margin: 0 auto; }.team-picks { display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr; gap: 5px; align-items: center; margin-top: 10px; padding: 8px; background: #fffdfa; border: 2px solid var(--ink); }.team-picks > div { min-height: 56px; display: grid; place-items: center; align-content: center; background: var(--paper); border: 1px solid var(--line); }.team-picks b { font-size: 23px; }.team-picks small { margin-top: 2px; color: var(--muted); font-size: 7px; text-align: center; }.team-picks > span { text-align: center; font-weight: 900; }.team-center > p { min-height: 31px; margin: 8px 0; color: var(--muted); font-size: 10px; line-height: 1.45; text-align: center; }.team-rules-note { padding: 8px; color: var(--teal-dark); background: #e4f5f2; border-left: 3px solid var(--teal-dark); font-size: 9px; line-height: 1.5; }.team-log-wrap { margin-top: 10px; min-height: 160px; }.team-log-wrap .battle-log { max-height: 230px; }
.team-choice-prompt { grid-column: 1 / -1; width: min(560px, 100%); justify-self: center; display: grid; gap: 9px; padding: 11px 13px; border: 2px solid var(--red-dark); background: #fff4ed; box-shadow: 4px 4px 0 var(--ink); }.team-choice-prompt[hidden] { display: none; }.team-choice-copy span, .team-choice-copy strong, .team-choice-copy small { display: block; }.team-choice-copy span { color: var(--red-dark); font-size: 9px; font-weight: 900; }.team-choice-copy strong { margin-top: 3px; font-size: 13px; }.team-choice-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }.team-choice-options { display: flex; flex-wrap: wrap; gap: 6px; }.team-choice-option { min-height: 32px; padding: 6px 9px; color: var(--ink); background: #fff; border: 2px solid var(--ink); cursor: pointer; font-size: 10px; font-weight: 900; }.team-choice-option:hover, .team-choice-option:focus-visible { background: var(--yellow); }.team-choice-option.skip { color: var(--muted); }
.battle-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 16px; }.battle-mode-option { min-height: 82px; padding: 13px; color: var(--ink); background: #fff; border: 3px solid var(--line); cursor: pointer; text-align: left; }.battle-mode-option strong, .battle-mode-option span { display: block; }.battle-mode-option strong { font-size: 17px; }.battle-mode-option span { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }.battle-mode-option.selected { color: #fff; background: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--yellow); }.battle-mode-option.selected span { color: var(--yellow); }
@media (max-width: 780px) { .team-room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.team-layout { grid-template-columns: 1fr 1.05fr 1fr; gap: 6px; }.team-side { padding: 7px; }.team-side > header strong { font-size: 11px; }.team-side > header small { font-size: 7px; }.team-player { padding: 6px; }.team-player-head strong { font-size: 9px; }.team-card { min-height: 48px; }.team-card strong { font-size: 21px; }.team-picks { gap: 2px; padding: 5px; }.team-picks b { font-size: 18px; } }

.team-player-items { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; color: var(--muted); font-size: 7px; }
.team-player-items span { padding: 2px 4px; border: 1px solid var(--line); background: #fffdfa; }
.team-player-head { min-width: 0; }
.team-player-avatar { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: #fff; background: var(--teal-dark); border: 2px solid var(--ink); border-radius: 50%; cursor: default; font: 900 10px/1 Arial, sans-serif; }
.team-side-b .team-player-avatar { background: var(--red-dark); }
.team-player-avatar:disabled { opacity: .7; }
.team-player-avatar.avatar-target { color: var(--ink); background: var(--yellow); border-color: var(--red-dark); box-shadow: 0 0 0 4px rgba(242,201,76,.35); }
.team-player-avatar:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.team-player-identity { min-width: 0; display: grid; gap: 2px; }
.team-player-identity strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.team-player-identity small { color: var(--muted); font-size: 8px; }
.team-player-items span.team-binding { color: var(--red-dark); border-color: var(--red); background: #fff0ed; }.team-player-items span.team-ready { color: var(--teal-dark); border-color: var(--teal); background: #e4f5f2; }
.team-rules-notice-backdrop { z-index: 80; padding: 14px; }.team-rules-notice { width: min(620px, 100%); max-height: calc(100dvh - 28px); overflow: auto; padding: clamp(22px, 5vw, 42px); color: var(--ink); background: var(--paper); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--yellow); }.team-rules-notice .notice-kicker { color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: 1.5px; }.team-rules-notice h1 { margin: 8px 0 12px; font-size: clamp(25px, 5vw, 40px); }.team-rules-notice p { color: var(--muted); font-size: 12px; line-height: 1.6; }.team-rules-notice ul { margin: 16px 0 22px; padding-left: 20px; color: var(--ink); font-size: 11px; line-height: 1.7; }.team-rules-notice li + li { margin-top: 5px; }
@media (max-width: 520px) { .team-setup-modal { padding: 16px 10px; }.team-room-heading h1 { font-size: 28px; }.team-room-copy { font-size: 10px; }.team-room-grid { gap: 6px; }.team-seat { min-height: 100px; padding: 6px; }.team-seat .seat-plus { font-size: 30px; }.team-seat .seat-index { left: 5px; top: 5px; font-size: 8px; }.team-seat-choice { align-items: flex-start; flex-direction: column; }.team-layout { grid-template-columns: 1fr; }.team-center { grid-row: 1; }.team-side-a { grid-row: 2; }.team-side-b { grid-row: 3; }.team-turn-banner strong { font-size: 11px; }.battle-mode-option { min-height: 70px; padding: 9px; }.battle-mode-option strong { font-size: 13px; }.battle-mode-option span { font-size: 8px; } }

/* Entry and mode selection are deliberate full-screen stages. */
.battle-mode-backdrop { z-index: 70; padding: 0; }
.battle-mode-modal { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 6vw, 80px); color: var(--ink); background: var(--paper); }
.battle-mode-modal > * { width: min(940px, 100%); margin-left: auto; margin-right: auto; }
.shop-backdrop { z-index: 115; }
.card-review-backdrop { z-index: 120; }
.effect-review-backdrop { z-index: 121; }
.battle-mode-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 14px; color: var(--muted); font-size: 10px; font-weight: 900; }
.battle-mode-tools #battleModeGoldBalance { padding-left: 8px; border-left: 1px solid var(--line); }
.battle-mode-tools .shop-button { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 760px) {
  .card-review-button { width: 30px; padding: 0; overflow: hidden; font-size: 0; }
  .card-review-button::before { content: "审"; font-size: 10px; }
  .effect-review-button::before { content: "效"; }
  .card-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding-left: 14px; padding-right: 14px; }
  .effect-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-left: 14px; padding-right: 14px; }
  .effect-review-note, .effect-review-status { margin-left: 14px; margin-right: 14px; }
  .card-review-note, .card-review-status { margin-left: 14px; margin-right: 14px; }
  .card-review-copy p { min-height: 0; }
}
.battle-mode-copy { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.battle-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.battle-mode-card { min-height: 210px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(20px, 4vw, 40px); color: var(--ink); background: #fff; border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--yellow); cursor: pointer; text-align: left; }
.battle-mode-card:hover, .battle-mode-card:focus-visible { color: #fff; background: var(--ink); outline: 0; transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--red); }
.battle-mode-card strong { font-size: clamp(24px, 4vw, 36px); }
.mode-lock { display: inline-grid; place-items: center; align-self: flex-end; min-width: 34px; min-height: 34px; margin: -6px -4px 8px auto; color: var(--red-dark); background: #f4e7d7; border: 2px solid currentColor; border-radius: 50%; font-size: 18px; }
.lock-requirement { display: none; margin-top: 8px; color: var(--red-dark); font-size: 10px; font-weight: 900; }
.battle-mode-card span { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.battle-mode-card > .mode-lock { margin: -6px -4px 8px auto; color: var(--red-dark); font-size: 18px; line-height: 1; }
.battle-mode-card:hover span, .battle-mode-card:focus-visible span { color: #ddd; }
.battle-mode-card b { margin-top: 24px; color: var(--teal-dark); font-size: 11px; }
.battle-mode-card.locked { color: var(--muted); border-style: dashed; box-shadow: 5px 5px 0 #c8c1b6; }.battle-mode-card.locked:hover, .battle-mode-card.locked:focus-visible { color: var(--ink); background: #fff; transform: none; box-shadow: 5px 5px 0 #c8c1b6; }.battle-mode-card.locked b { color: var(--red-dark); }.battle-mode-card.locked:hover span, .battle-mode-card.locked:focus-visible span { color: var(--muted); }
.battle-mode-card:hover b, .battle-mode-card:focus-visible b { color: var(--yellow); }
.account-backdrop.entry-gate { z-index: 90; padding: 0; }
.account-backdrop.entry-gate .account-modal { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 0; box-shadow: none; }
.account-backdrop.entry-gate .account-header, .account-backdrop.entry-gate .auth-signed-out, .account-backdrop.entry-gate .auth-signed-in { width: min(560px, calc(100% - 32px)); }
.account-backdrop.entry-gate .account-header { border: 4px solid var(--ink); border-bottom: 0; }
.account-backdrop.entry-gate .auth-signed-out, .account-backdrop.entry-gate .auth-signed-in { padding: 24px; border: 4px solid var(--ink); border-top: 0; background: var(--paper); }
.guest-entry-button { width: 100%; margin-top: 10px; padding: 11px; color: var(--teal-dark); background: #e4f5f2; border: 2px solid var(--teal-dark); cursor: pointer; font-weight: 900; }
.guest-entry-button:hover { color: var(--ink); background: var(--yellow); border-color: var(--ink); }
.entry-continue-button { margin-top: 14px; }
.setup-backdrop { padding: 0; }
.setup-backdrop .setup-modal { width: 100%; max-width: none; min-height: 100dvh; max-height: 100dvh; padding: clamp(24px, 5vw, 64px); border: 0; box-shadow: none; }

/* Keep every team card readable and use the same visual language as duel cards. */
.team-card { position: relative; min-height: 92px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 4px; border: 3px solid var(--ink); border-radius: 5px; background: #fff; box-shadow: 4px 5px 0 var(--ink); }
.team-card::before, .team-card::after { content: attr(data-value); position: absolute; left: 5px; top: 3px; font-size: 10px; font-weight: 900; }
.team-card::after { inset: auto 5px 3px auto; transform: rotate(180deg); }
.team-card strong { font-family: Arial, sans-serif; font-size: clamp(30px, 4vw, 46px); line-height: 1; }
.team-card small { color: var(--muted); font-size: 8px; }
.team-card.selectable { background: #fff4bf; }
.team-card.targetable { background: #d9f2ef; }
.team-card.selected { transform: translateY(-4px); box-shadow: 4px 8px 0 var(--ink); }
.team-card:disabled { opacity: .7; }
.team-card.zero-spent { background: #ece8df; }
.team-card.zero-spent small { color: var(--red); }

@media (max-width: 950px) and (orientation: landscape) {
  .battle-mode-modal { padding: 18px 28px; }
  .battle-mode-grid { gap: 10px; margin-top: 14px; }
  .battle-mode-card { min-height: 140px; padding: 16px; }
  .battle-mode-card strong { font-size: 24px; }
  .battle-mode-card span { margin-top: 7px; font-size: 10px; }
  .battle-mode-card b { margin-top: 11px; font-size: 9px; }
  .team-arena { padding: 7px 9px 10px; }
  .team-turn-banner { min-height: 36px; padding: 5px 8px; }
  .team-turn-banner strong { font-size: 11px; }
  .team-layout { gap: 5px; margin-top: 6px; }
  .team-side { padding: 5px; }
  .team-side > div[id^="teamPlayers"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .team-side > header { padding-bottom: 4px; }
  .team-side > header > span { width: 22px; height: 22px; font-size: 10px; }
  .team-side > header strong { font-size: 10px; }
  .team-side > header small { font-size: 7px; }
  .team-player { min-width: 0; margin-top: 4px; padding: 4px; }
  .team-player-head strong { min-width: 0; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .team-player-head small, .team-player-health, .team-player-track, .team-combo { font-size: 6px; }
  .team-player-health { margin-top: 2px; }
  .team-player-health b { font-size: 11px; }
  .team-cards { gap: 3px; margin-top: 3px; }
  .team-card { min-height: 48px; border-width: 2px; box-shadow: 2px 3px 0 var(--ink); }
  .team-card strong { font-size: clamp(22px, 6vh, 34px); }
  .team-card small { font-size: 6px; }
  .team-card::before, .team-card::after { font-size: 7px; }
  .team-combo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .team-picks { margin-top: 5px; padding: 4px; min-height: 42px; }
  .team-picks > div { min-height: 39px; }
  .team-picks b { font-size: 17px; }
  .team-picks small, .team-center > p, .team-rules-note { font-size: 7px; }
  .team-rules-note { padding: 4px; }
  .team-log-wrap { margin-top: 4px; min-height: 60px; padding: 4px; }
  .team-log-wrap .battle-log { max-height: 64px; }
  .team-log-wrap .battle-log li { padding: 2px 0; font-size: 6px; }
}

@media (max-width: 520px) {
  .battle-mode-grid { grid-template-columns: 1fr; gap: 12px; }
  .battle-mode-card { min-height: 145px; }
  .account-backdrop.entry-gate .account-header, .account-backdrop.entry-gate .auth-signed-out, .account-backdrop.entry-gate .auth-signed-in { width: calc(100% - 20px); }
  .account-backdrop.entry-gate .auth-signed-out, .account-backdrop.entry-gate .auth-signed-in { padding: 16px; }
}

/* Action controls stay under the relevant hand so choices never compete with
   the battlefield centre or cover target portraits. */
.team-action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); }
.team-action-note { flex: 1 1 100%; color: var(--teal-dark); font-size: 8px; font-weight: 900; line-height: 1.35; }
.team-action-button { min-height: 30px; padding: 5px 7px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; font-size: 8px; font-weight: 900; line-height: 1.15; }
.team-action-button:hover, .team-action-button:focus-visible { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--red-dark); outline: 0; }
.team-action-button.secondary { color: var(--muted); background: #fff; }
.team-action-button.danger { color: #fff; background: var(--red-dark); }
.team-action-button.motion { color: var(--ink); background: #d9f2ef; }
.team-player-avatar.avatar-target { animation: portrait-target-pulse .85s ease-in-out infinite alternate; }
@keyframes portrait-target-pulse { from { transform: scale(1); } to { transform: scale(1.08); } }

@media (max-width: 950px) and (orientation: landscape) {
  .team-action-bar { gap: 3px; margin-top: 4px; padding-top: 4px; }
  .team-action-note { font-size: 6px; }
  .team-action-button { min-height: 23px; padding: 3px 4px; border-width: 1px; box-shadow: 1px 1px 0 var(--ink); font-size: 6px; }
}
.history-button { min-height: 26px; padding: 0 8px; color: var(--ink); background: #fff; border: 1px solid var(--ink); border-radius: 3px; cursor: pointer; font-size: 10px; font-weight: 900; }
.history-button:hover, .history-button:focus-visible { color: #fff; background: var(--teal); }
.history-backdrop { z-index: 160 !important; }
.history-modal { width: min(620px, 100%); max-height: min(760px, calc(100dvh - 24px)); overflow: auto; color: var(--ink); background: var(--paper); border: 4px solid var(--ink); box-shadow: 9px 9px 0 var(--teal); }
.history-filters { display: flex; gap: 8px; padding: 14px 20px 0; }
.history-filters button { flex: 1; min-height: 36px; padding: 7px 10px; color: var(--muted); background: #fff; border: 2px solid var(--line); cursor: pointer; font-size: 11px; font-weight: 900; }
.history-filters button.selected { color: #fff; background: var(--teal); border-color: var(--teal); }
.history-summary { margin: 12px 20px; color: var(--muted); font-size: 11px; font-weight: 800; }
.history-list { display: grid; gap: 8px; padding: 0 20px 18px; }
.history-entry { display: grid; grid-template-columns: minmax(112px, .7fr) minmax(0, 1.3fr); gap: 12px; align-items: center; padding: 11px 12px; background: #fff; border: 2px solid var(--line); }
.history-entry.is-win { border-left: 5px solid #11a56b; }.history-entry.is-loss { border-left: 5px solid #d85353; }
.history-result { display: grid; gap: 3px; }.history-result strong { font-size: 13px; }.history-entry.is-win .history-result strong { color: #087b50; }.history-entry.is-loss .history-result strong { color: #b83333; }.history-result small { color: var(--muted); font-size: 9px; }
.history-entry-main { display: grid; grid-template-columns: auto auto; gap: 4px 12px; align-items: baseline; }.history-entry-main strong { color: var(--teal-dark); font-size: 14px; }.history-entry-main span { color: #aa6a00; font-size: 11px; font-weight: 900; }.history-entry-main small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; line-height: 1.45; }
.history-empty { margin: 20px; padding: 24px 12px; color: var(--muted); text-align: center; border: 2px dashed var(--line); font-size: 12px; }

/* Shop panels keep card faces and skill VFX visually separate. */
.shop-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 20px 12px; padding: 4px; background: #ebe5da; border: 2px solid var(--ink); }
.shop-tabs button { min-height: 38px; color: var(--muted); background: #fff; border: 2px solid transparent; cursor: pointer; font-size: 11px; font-weight: 900; }
.shop-tabs button.selected { color: #fff; background: var(--ink); border-color: var(--yellow); box-shadow: 3px 3px 0 var(--teal); }
.shop-section-panel { display: grid; gap: 9px; }
.shop-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 10px; color: #fff; background: var(--ink); border-left: 4px solid var(--yellow); }
.shop-section-heading strong { font-size: 13px; }.shop-section-heading small { color: #d6f4ed; font-size: 9px; }
.shop-section-items { display: grid; gap: 10px; }
.review-section-title { margin: 18px 20px 10px; padding: 9px 11px; color: #fff; background: var(--ink); border-left: 4px solid var(--yellow); font-size: 13px; }
.dora-review-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* The same mascot layer is inserted into live cards and review/shop cards. */
.number-card .shin-character, .team-card .shin-character { width: 34px; height: 40px; bottom: 8px; opacity: .62; transform: translateX(-50%) scale(.68); transform-origin: 50% 100%; pointer-events: none; }
.number-card .shin-character::before, .team-card .shin-character::before { left: 6px; top: 2px; width: 27px; height: 25px; border-width: 2px; }
.number-card .shin-character::after, .team-card .shin-character::after { left: 3px; width: 32px; height: 21px; border-width: 2px; }
.number-card .shin-character .shin-hair, .team-card .shin-character .shin-hair { left: 4px; width: 29px; height: 12px; border-width: 2px; }
.number-card .shin-character .shin-brow, .team-card .shin-character .shin-brow { left: 10px; top: 16px; width: 18px; height: 3px; box-shadow: 0 6px 0 -1px #24151a; }
.number-card .shin-character .shin-hand, .team-card .shin-character .shin-hand { right: -2px; bottom: 7px; width: 10px; height: 10px; border-width: 2px; }
.number-card > strong, .team-card > strong { position: relative; z-index: 5; }
.number-card .card-review-corner, .number-card .card-review-mark, .team-card .card-review-corner, .team-card .card-review-mark { z-index: 6; font-size: 7px; }

/* Five review-only Doraemon-inspired card faces. */
.dora-card-preview { color: #102347; background: #8de9ff; border-color: #102347; box-shadow: 4px 5px 0 #102347, inset 0 0 0 4px rgba(255,255,255,.35); }
.dora-card-preview::before { inset: 8%; border: 3px solid rgba(16,35,71,.76); border-radius: 44% 56% 48% 52%; box-shadow: 0 0 0 6px rgba(255,255,255,.35), 0 0 20px rgba(21,181,225,.75); }
.dora-card-preview::after { inset: -10%; background: repeating-conic-gradient(from 14deg, transparent 0 18deg, rgba(255,255,255,.24) 19deg 23deg, transparent 24deg 40deg); animation: doraOrbit 5s linear infinite; }
.card-style-dora-pocket { background: linear-gradient(145deg, #39c4f4 0 40%, #eaf9ff 41% 59%, #ff5b72 60% 100%); }
.card-style-dora-copter { background: linear-gradient(155deg, #b9fff0 0 35%, #60d7f5 36% 67%, #3258be 68%); }
.card-style-dora-bell { background: radial-gradient(circle at 50% 58%, #ffdb55 0 17%, transparent 18%), linear-gradient(145deg, #1e3b8f, #4f8cff 55%, #8de9ff); }
.card-style-dora-time { background: conic-gradient(from 30deg, #523bb7, #64d9ff, #ee76c6, #523bb7); }
.card-style-dora-moon { color: #512349; background: radial-gradient(circle at 50% 27%, #fff2a8 0 14%, transparent 15%), linear-gradient(155deg, #1d326d, #8b55c4 56%, #ff9d7a); }
.dora-motif { position: absolute; z-index: 3; left: 50%; top: 37%; width: 68px; height: 66px; transform: translate(-50%, -50%); filter: drop-shadow(3px 4px 0 rgba(16,35,71,.25)); }
.dora-motif::before { content: ""; position: absolute; left: 7px; top: 7px; width: 54px; height: 50px; border: 4px solid #102347; border-radius: 50%; background: #39c4f4; }
.dora-motif::after { content: ""; position: absolute; left: 27px; top: 42px; width: 14px; height: 10px; border: 3px solid #102347; border-radius: 50%; background: #ffdb55; }
.dora-motif i, .dora-motif b { position: absolute; z-index: 2; display: block; }
.dora-motif i::before, .dora-motif i::after { content: ""; position: absolute; width: 7px; height: 11px; border-radius: 50%; background: #102347; }
.dora-motif i::before { left: -20px; top: 21px; }.dora-motif i::after { left: 20px; top: 21px; }
.dora-motif b { left: 14px; top: 34px; width: 40px; height: 4px; background: #eaf9ff; border-radius: 4px; }
.dora-motif-copter::before { border-radius: 44% 44% 52% 52%; }.dora-motif-copter::after { left: 29px; top: -3px; width: 9px; height: 25px; border: 3px solid #102347; border-radius: 50%; background: #ffdb55; transform: rotate(-16deg); }
.dora-motif-bell::before { background: #5c79db; }.dora-motif-bell::after { background: #ffdb55; box-shadow: 0 0 0 6px rgba(255,219,85,.3); }
.dora-motif-gear::before { border-radius: 18%; background: #64d9ff; box-shadow: inset 0 0 0 9px #523bb7; }.dora-motif-gear::after { border-radius: 0; background: #ee76c6; transform: rotate(45deg); }
.dora-motif-cake::before { background: #8b55c4; }.dora-motif-cake::after { background: #ff9d7a; border-radius: 50% 50% 35% 35%; }
@keyframes doraOrbit { to { transform: rotate(360deg); } }

/* New star-gate VFX are shown as an in-game mini-arena inside review. */
.effect-v2-review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.effect-in-game-preview { display: grid; gap: 5px; }
.effect-in-game-preview > small { color: #a23b35; font-size: 8px; font-weight: 900; text-align: center; }
.preview-arena { --effect-hue: 190; position: relative; display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: center; min-height: 104px; overflow: hidden; padding: 10px 7px; color: #fff; background: radial-gradient(circle at 50% 50%, hsl(var(--effect-hue) 100% 72% / .22), transparent 46%), linear-gradient(145deg, #151b3a, #29205b 52%, #111827); border: 2px solid hsl(var(--effect-hue) 100% 73%); box-shadow: inset 0 0 24px hsl(var(--effect-hue) 100% 63% / .4); }
.preview-arena::before { content: attr(data-symbol); position: absolute; left: 50%; top: 50%; width: 59px; height: 59px; display: grid; place-items: center; border: 2px solid hsl(var(--effect-hue) 100% 78% / .85); border-radius: 50%; color: #fff; font: 900 14px/1 Arial,sans-serif; transform: translate(-50%,-50%); box-shadow: 0 0 0 5px hsl(var(--effect-hue) 100% 70% / .12), 0 0 18px hsl(var(--effect-hue) 100% 72% / .7); animation: starGatePulse 1.4s ease-in-out infinite; }
.preview-arena::after { content: ""; position: absolute; inset: -40%; background: repeating-conic-gradient(from 20deg, transparent 0 18deg, hsl(var(--effect-hue) 100% 80% / .2) 19deg 23deg, transparent 24deg 39deg); animation: starGateSpin 4s linear infinite; pointer-events: none; }
.preview-actor, .preview-target { position: relative; z-index: 2; display: grid; place-items: center; width: 27px; height: 27px; margin: auto; color: #102347; background: #8de9ff; border: 2px solid #fff; border-radius: 50%; font: 900 8px/1 Arial,sans-serif; }
.preview-target { color: #fff; background: #e54872; }
.preview-beam { position: relative; z-index: 2; height: 4px; background: linear-gradient(90deg, transparent, hsl(var(--effect-hue) 100% 80%), transparent); box-shadow: 0 0 14px hsl(var(--effect-hue) 100% 72%); animation: starGateBeam 1.05s ease-in-out infinite; }
.preview-arena > b { position: absolute; z-index: 3; right: 7px; bottom: 5px; color: #fff; font: 900 9px/1 Arial,sans-serif; text-shadow: 0 0 7px hsl(var(--effect-hue) 100% 75%); }
@keyframes starGateSpin { to { transform: rotate(360deg); } }
@keyframes starGatePulse { 50% { transform: translate(-50%,-50%) scale(1.18); opacity: .78; } }
@keyframes starGateBeam { 0%,100% { opacity: .25; transform: scaleX(.35); } 50% { opacity: 1; transform: scaleX(1); } }

@media (max-width: 720px) {
  .dora-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .effect-v2-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-tabs { margin-left: 14px; margin-right: 14px; }
}