:root {
  --bg: #10172f;
  --ink: #17213d;
  --yellow: #ffd84d;
  --blue: #4f7cff;
  --blue-dark: #2856df;
  --orange: #ff7d3f;
  --pink: #ff4f98;
  --purple: #895cf6;
  --green: #2bd69b;
  --red: #ff5364;
  --white: #fff;
  --line: rgba(255,255,255,.15);
  --shadow: 0 24px 70px rgba(3,7,24,.34);
  --radius: 26px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: #fff;
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  letter-spacing: -.035em;
  background:
    radial-gradient(circle at 8% 0%, #304c9c 0, transparent 28%),
    radial-gradient(circle at 88% 10%, #6e2f88 0, transparent 25%),
    linear-gradient(160deg, var(--bg), #171335 62%, #10172f);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.arcade-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.arcade-bg i { position: absolute; width: 170px; height: 170px; border: 26px solid rgba(255,255,255,.035); border-radius: 40px; transform: rotate(24deg); }
.arcade-bg i:nth-child(1) { left: -70px; top: 18%; }
.arcade-bg i:nth-child(2) { right: -60px; top: 5%; border-radius: 50%; }
.arcade-bg i:nth-child(3) { right: 12%; bottom: -80px; }
.arcade-bg i:nth-child(4) { left: 35%; top: -130px; border-radius: 50%; }
.app { position: relative; width: min(1160px,100%); margin: auto; padding: 14px 16px 60px; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 12px 0; background: linear-gradient(180deg,rgba(16,23,47,.98),rgba(16,23,47,.76),transparent); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 15px; background: linear-gradient(135deg,var(--yellow),var(--orange)); color: #19213a; font-weight: 1000; box-shadow: 0 0 0 6px rgba(255,216,77,.11); }
.brand b { display: block; font-size: 1rem; letter-spacing: .04em; }
.brand small { display: block; color: rgba(255,255,255,.55); font-size: .72rem; }
.ghost-btn, .secondary { border: 1px solid var(--line); background: rgba(255,255,255,.07); color: #fff; border-radius: 16px; font-weight: 900; padding: 11px 15px; }
.screen { animation: enter .32s ease; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero { padding: 36px 0 26px; }
.arcade-hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 28px; }
.badge-row { display: flex; gap: 7px; flex-wrap: wrap; }
.game-badge, .eyebrow, .round-badge, .step-label, .mini-sticker { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 11px; font-weight: 950; font-size: .75rem; letter-spacing: .055em; }
.game-badge.yellow { background: var(--yellow); color: #202745; }
.game-badge.blue { background: var(--blue); }
.game-badge.pink { background: var(--pink); }
.eyebrow, .round-badge { margin-top: 14px; border: 1px solid rgba(255,216,77,.35); color: var(--yellow); background: rgba(255,216,77,.08); }
h1,h2,h3,p { margin-top: 0; }
.hero h1 { font-size: clamp(3.3rem,8vw,6.6rem); line-height: .9; letter-spacing: -.09em; margin: 20px 0 18px; }
.hero h1 span { color: var(--yellow); text-shadow: 5px 5px 0 rgba(79,124,255,.5); }
.hero-copy { max-width: 700px; color: rgba(255,255,255,.75); font-size: 1.08rem; line-height: 1.7; word-break: keep-all; }
.hero-rule { display: inline-flex; gap: 12px; align-items: center; margin-top: 10px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.06); }
.hero-rule b { color: var(--yellow); }
.hero-visual { position: relative; min-height: 310px; }
.floating-card { position: absolute; width: 185px; height: 235px; border-radius: 28px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow); border: 4px solid #fff; transform: rotate(-9deg); }
.floating-card small, .floating-card span { font-weight: 950; }
.floating-card strong { font-size: 5rem; line-height: 1; }
.card-a { left: 4%; top: 18px; background: linear-gradient(145deg,var(--blue),#765bff); }
.card-b { right: 3%; bottom: 8px; background: linear-gradient(145deg,var(--orange),var(--pink)); transform: rotate(9deg); }
.versus, .setup-versus { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--yellow); color: #1b2240; font-size: 1.8rem; font-weight: 1000; border: 6px solid #fff; box-shadow: var(--shadow); z-index: 4; }
.versus { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-6deg); }
.setup-arena { display: grid; grid-template-columns: 1fr 76px 1fr; gap: 14px; align-items: center; }
.team-setup, .battle-settings { border-radius: var(--radius); background: #fff; color: var(--ink); box-shadow: var(--shadow); padding: 22px; }
.team-setup.blue { border-top: 10px solid var(--blue); }
.team-setup.orange { border-top: 10px solid var(--orange); }
.team-header, .section-title, .screen-head, .target-head, .final-team-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.step-label { padding: 6px 9px; background: #e8edff; color: #3053b7; }
.orange .step-label { background: #fff0e8; color: #bd4c20; }
.mini-sticker { background: var(--blue); color: #fff; transform: rotate(4deg); }
.orange-sticker { background: var(--orange); }
.team-name-input { width: 100%; margin-top: 9px; border: 0; border-bottom: 3px solid #dfe5f4; background: transparent; color: var(--ink); font-weight: 1000; font-size: clamp(1.4rem,3vw,2.1rem); outline: none; }
.member-counter { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 12px; margin: 22px 0 8px; }
.member-counter button { height: 56px; border: 0; border-radius: 18px; background: #edf1fc; color: #27385f; font-size: 1.8rem; font-weight: 1000; }
.member-counter div { text-align: center; }
.member-counter strong { font-size: 4rem; line-height: .8; }
.member-counter small { margin-left: 6px; color: #6c7893; font-weight: 900; }
.member-editor { margin-top: 14px; border-top: 1px solid #e5e9f2; padding-top: 12px; }
.member-editor summary { display: flex; justify-content: space-between; cursor: pointer; color: #526079; font-weight: 900; }
.member-editor summary span { color: #8a96ad; font-size: .78rem; }
.names { display: grid; gap: 9px; margin-top: 14px; }
.name-row { display: grid; grid-template-columns: 36px 1fr; gap: 9px; align-items: center; }
.name-row span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #edf1ff; color: #3156b8; font-weight: 1000; }
.orange .name-row span { background: #fff0e9; color: #c64e20; }
.name-row input, .field select { width: 100%; min-height: 46px; border: 1px solid #dce2ef; border-radius: 14px; background: #fff; color: var(--ink); padding: 0 13px; outline: none; }
.battle-settings { margin-top: 18px; }
.section-title h2 { margin: 8px 0 0; font-size: clamp(1.6rem,3vw,2.3rem); letter-spacing: -.065em; }
.setting-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field > label { display: block; margin-bottom: 8px; font-size: .86rem; color: #58657f; font-weight: 950; }
.choice-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; }
.choice label { display: grid; place-items: center; min-height: 66px; border: 2px solid #e1e6f1; border-radius: 17px; text-align: center; font-weight: 950; background: #fff; cursor: pointer; }
.choice label small { display: block; color: #7c879e; font-size: .72rem; }
.choice input:checked + label { border-color: var(--purple); background: #f0ebff; color: #5931bc; box-shadow: 0 8px 20px rgba(139,92,246,.15); }
.primary { width: 100%; min-height: 56px; border: 0; border-radius: 18px; background: linear-gradient(135deg,var(--yellow),#ffb638); color: #18213d; font-weight: 1000; font-size: 1.05rem; box-shadow: 0 14px 30px rgba(255,190,50,.2); }
.mega-btn { margin-top: 18px; min-height: 68px; font-size: 1.18rem; }
.resume { width: 100%; margin-top: 10px; color: var(--ink); border-color: #dbe1ef; background: #f6f8fc; }
.footer-note { text-align: center; color: rgba(255,255,255,.52); font-size: .78rem; line-height: 1.6; margin-top: 24px; }
.screen-head { align-items: center; margin: 18px 0 20px; }
.screen-head h1 { font-size: clamp(2.3rem,5vw,4rem); letter-spacing: -.08em; margin: 10px 0 6px; }
.screen-head p { color: rgba(255,255,255,.65); }
.deal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.role-card { min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.role-card.team-a { background: linear-gradient(145deg,#285be5,#7d5bff); }
.role-card.team-b { background: linear-gradient(145deg,#e85a24,#ff4e93); }
.role-top { display: flex; align-items: center; gap: 10px; }
.role-icon { font-size: 2rem; }
.role-label { font-size: .8rem; font-weight: 1000; letter-spacing: .08em; }
.role-card h3 { font-size: clamp(2rem,4vw,3.5rem); letter-spacing: -.075em; margin: 16px 0 8px; }
.role-card p { color: rgba(255,255,255,.78); line-height: 1.55; }
.role-button { width: 100%; min-height: 54px; background: rgba(255,255,255,.17); }
.hint-strip { margin-top: 14px; border: 1px solid rgba(255,216,77,.3); background: rgba(255,216,77,.09); border-radius: 17px; padding: 14px 16px; color: #fff2b8; }
.battle-header { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 12px; align-items: center; margin: 18px 0 14px; }
.team-score { border-radius: 22px; padding: 14px 18px; text-align: center; border: 2px solid rgba(255,255,255,.15); opacity: .62; transition: .2s; }
.team-score.active { opacity: 1; transform: translateY(-2px); box-shadow: var(--shadow); }
.blue-score { background: linear-gradient(135deg,#245ce1,#6b5cff); }
.orange-score { background: linear-gradient(135deg,#e55a21,#ff4f90); }
.team-score small, .team-score span { display: block; color: rgba(255,255,255,.75); font-weight: 850; }
.team-score strong { font-size: 2rem; }
.battle-vs { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--yellow); color: #202741; font-weight: 1000; border: 5px solid #fff; }
.turn-stage { border-radius: 28px; background: rgba(255,255,255,.07); border: 1px solid var(--line); padding: 18px; }
.turn-topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bonus-track { display: flex; align-items: center; gap: 12px; }
.bonus-track > span { color: var(--yellow); font-weight: 1000; }
.bonus-track > div { display: flex; gap: 7px; }
.bonus-dot { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: rgba(255,255,255,.1); font-weight: 950; }
.bonus-dot.done { background: var(--green); color: #052e22; }
.battle-mode { color: rgba(255,255,255,.55); font-size: .78rem; font-weight: 900; }
.turn-spotlight { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; border-radius: 23px; background: linear-gradient(135deg,#244dd2,#765aff); }
.turn-spotlight.orange-turn { background: linear-gradient(135deg,#d95020,#ff4e91); }
.turn-kicker { font-size: .75rem; font-weight: 1000; letter-spacing: .12em; color: var(--yellow); }
.turn-side { font-size: clamp(2.1rem,5vw,4.2rem); font-weight: 1000; letter-spacing: -.08em; }
.turn-spotlight p { margin: 5px 0 0; color: rgba(255,255,255,.75); }
.timer-wrap { text-align: center; }
.timer-wrap > span { font-size: .7rem; font-weight: 950; }
.timer { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #111a36; border: 7px solid rgba(255,255,255,.18); font-size: 1.8rem; font-weight: 1000; color: var(--yellow); }
.timer.urgent { background: var(--red); color: #fff; animation: pulse .6s infinite alternate; }
@keyframes pulse { to { transform: scale(1.06); } }
.actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 12px; }
.action-btn { min-height: 118px; border: 0; border-radius: 22px; padding: 14px; text-align: left; color: #fff; box-shadow: 0 10px 22px rgba(0,0,0,.18); transition: .18s; }
.action-btn:hover:not(:disabled) { transform: translateY(-3px); }
.action-btn:disabled { opacity: .38; cursor: not-allowed; }
.action-btn.clue { background: linear-gradient(145deg,#2773e9,#4c96ff); }
.action-btn.question { background: linear-gradient(145deg,#7648dc,#a160ff); }
.action-btn.guess { background: linear-gradient(145deg,#ef5a22,#ff8d3f); }
.action-btn.chance { background: linear-gradient(145deg,#d8a10e,#ffd84d); color: #1b2542; }
.action-icon { display: block; font-size: 2rem; }
.action-btn b { display: block; margin: 7px 0 4px; font-size: 1.14rem; }
.action-btn small { opacity: .78; line-height: 1.35; }
.target-panel { margin-top: 15px; border-radius: 25px; padding: 18px; background: linear-gradient(145deg,rgba(65,96,210,.24),rgba(255,255,255,.06)); border: 1px solid rgba(95,135,255,.35); }
.target-panel.orange-view { background: linear-gradient(145deg,rgba(223,87,35,.24),rgba(255,255,255,.06)); border-color: rgba(255,126,68,.35); }
.target-head h2 { font-size: clamp(1.45rem,3vw,2.2rem); margin: 4px 0; }
.target-head small { color: rgba(255,255,255,.58); font-weight: 950; }
.target-head > span { padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.1); font-weight: 950; }
.target-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; margin-top: 14px; }
.target-card { min-height: 165px; border-radius: 20px; padding: 14px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.24); }
.target-card.has-hints { border-style: solid; border-color: var(--yellow); background: rgba(255,216,77,.09); }
.target-number { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.1); font-weight: 950; }
.target-card small { color: rgba(255,255,255,.65); }
.target-card strong { font-size: 1.08rem; margin: 7px 0 4px; }
.target-card p { margin: 0 0 8px; color: rgba(255,255,255,.58); font-size: .78rem; }
.target-card em { color: #66728b; font-style: normal; font-size: .78rem; }
.target-card.revealed { background: #fff; color: var(--ink); border-style: solid; border-color: #fff; }
.target-card.revealed small { color: #66728b; }
.hint-list { display: grid; gap: 5px; }
.hint-chip { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff7c3; font-size: .72rem; line-height: 1.25; }
.hint-chip b { color: var(--yellow); flex: 0 0 auto; }
.info-drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.info-drawer { border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.06); padding: 13px; }
.info-drawer summary { cursor: pointer; font-weight: 950; }
.question-bank { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.question-chip { border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.06); color: #fff; padding: 8px 10px; }
.log { display: grid; gap: 7px; margin-top: 12px; max-height: 220px; overflow: auto; }
.log-item { padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: .84rem; }
.log-item b { color: var(--yellow); }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(4,8,25,.84); backdrop-filter: blur(12px); }
.modal-card { width: min(700px,100%); max-height: 92vh; overflow: auto; border-radius: 29px; background: linear-gradient(155deg,#1c2a55,#11172f); border: 1px solid var(--line); box-shadow: 0 34px 100px rgba(0,0,0,.55); padding: 22px; }
.modal-card.light { background: #fff; color: var(--ink); }
.modal-head { display: flex; justify-content: space-between; gap: 10px; }
.modal-head h2 { font-size: clamp(1.8rem,4vw,2.8rem); letter-spacing: -.07em; margin: 8px 0; }
.close { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: #fff; font-size: 1.2rem; }
.light .close { color: var(--ink); border-color: #dfe4ee; }
.secret-card-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 14px 0; }
.secret-team-title { display: flex; justify-content: space-between; padding: 12px 14px; border-radius: 15px; color: #fff; }
.secret-team-title.a { background: var(--blue); }
.secret-team-title.b { background: var(--orange); }
.secret-card { background: #fff; color: var(--ink); border-radius: 18px; padding: 14px; border-top: 7px solid var(--blue); }
.secret-card.b { border-color: var(--orange); }
.secret-card small { color: #68738a; }
.secret-card h3 { font-size: 1.35rem; margin: 9px 0; }
.secret-card p { color: #536079; font-size: .84rem; line-height: 1.45; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { border-radius: 999px; padding: 6px 8px; background: #eef2ff; color: #3155b2; font-size: .74rem; font-weight: 850; }
.action-detail, .guess-grid { display: grid; gap: 13px; margin: 14px 0; }
.action-rule, .risk-banner { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.08); line-height: 1.55; }
.action-rule p { margin: 6px 0 0; color: rgba(255,255,255,.68); }
.risk-banner { background: #fff1e7; color: #a4451c; }
.feedback-card { width: min(540px,100%); position: relative; overflow: hidden; border-radius: 34px; padding: 34px; text-align: center; background: #fff; color: var(--ink); box-shadow: 0 36px 110px rgba(0,0,0,.55); }
.feedback-card.correct { border: 8px solid var(--green); }
.feedback-card.wrong { border: 8px solid var(--red); }
.feedback-icon { display: grid; place-items: center; width: 92px; height: 92px; margin: auto; border-radius: 50%; font-size: 3.4rem; font-weight: 1000; color: #fff; }
.correct .feedback-icon { background: var(--green); }
.wrong .feedback-icon { background: var(--red); }
.feedback-kicker { display: block; margin-top: 16px; font-weight: 1000; letter-spacing: .1em; color: #65708b; }
.feedback-card h2 { font-size: clamp(2.8rem,8vw,5rem); letter-spacing: -.09em; margin: 8px 0; }
.feedback-card p { color: #59657e; line-height: 1.6; }
.feedback-button { width: 100%; min-height: 56px; border: 0; border-radius: 17px; color: #fff; font-weight: 1000; }
.correct .feedback-button { background: var(--green); color: #073126; }
.wrong .feedback-button { background: var(--red); }
.feedback-particles i { position: absolute; width: 12px; height: 28px; background: var(--yellow); transform: rotate(28deg); }
.feedback-particles i:nth-child(1) { left: 8%; top: 12%; }
.feedback-particles i:nth-child(2) { right: 10%; top: 18%; background: var(--blue); }
.feedback-particles i:nth-child(3) { left: 18%; bottom: 12%; background: var(--pink); }
.feedback-particles i:nth-child(4) { right: 18%; bottom: 8%; background: var(--orange); }
.feedback-particles i:nth-child(5) { left: 50%; top: 4%; background: var(--green); }
.bonus-card { background: linear-gradient(150deg,#604100,#17204b); border: 2px solid rgba(255,216,77,.45); }
.bonus-banner { display: flex; justify-content: space-between; align-items: center; color: var(--yellow); font-weight: 1000; letter-spacing: .08em; }
.bonus-banner span { font-size: .75rem; color: #fff1a7; }
.bonus-type { color: #fff2a7; font-weight: 950; }
.bonus-timer { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--yellow); color: #212844; font-size: 1.6rem; font-weight: 1000; }
.bonus-question { font-size: clamp(1.8rem,5vw,3.4rem); font-weight: 1000; letter-spacing: -.065em; margin: 20px 0; text-align: center; }
.bonus-question small { display: block; margin-top: 10px; color: rgba(255,255,255,.58); font-size: .35em; }
.bonus-big, .bonus-highlight { color: var(--yellow); }
.bonus-tags { color: #d9c9ff; }
.bonus-prompt { color: #fff; }
.bonus-options { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.bonus-option, .answer-box { padding: 13px; border-radius: 14px; background: rgba(255,255,255,.08); font-weight: 850; }
.bonus-option b { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px; border-radius: 9px; background: rgba(255,255,255,.12); color: var(--yellow); }
.answer-box { margin: 10px 0; background: rgba(43,214,155,.15); color: #caffef; }
.reveal-btn { width: 100%; margin: 12px 0; }
.bonus-award { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.bonus-award button { min-height: 52px; border: 0; border-radius: 14px; font-weight: 950; }
.bonus-award .team { background: var(--blue); color: #fff; }
.bonus-award .agent { background: var(--orange); color: #fff; }
.bonus-award .none { background: #e6eaf2; color: #26314b; }
.hint-card { background: linear-gradient(155deg,#432575,#17204b); border: 2px solid rgba(255,216,77,.45); }
.hint-reward-title { text-align: center; }
.hint-reward-title > span { color: var(--yellow); font-weight: 1000; letter-spacing: .1em; }
.hint-reward-title h2 { font-size: clamp(2rem,5vw,3.5rem); letter-spacing: -.075em; margin: 10px 0 6px; }
.hint-reward-title p { color: rgba(255,255,255,.68); }
.hint-target-field { margin-top: 18px; }
.hint-target-field label { color: #fff; }
.hint-choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 14px; }
.hint-choice { min-height: 170px; border: 2px solid rgba(255,255,255,.16); border-radius: 22px; background: rgba(255,255,255,.08); color: #fff; padding: 16px; text-align: left; transition: .18s; }
.hint-choice:hover { transform: translateY(-4px); border-color: var(--yellow); background: rgba(255,216,77,.12); }
.hint-choice span { display: block; font-size: 2.4rem; }
.hint-choice b { display: block; margin: 12px 0 6px; font-size: 1.15rem; }
.hint-choice small { color: rgba(255,255,255,.62); line-height: 1.45; }
.hint-save-note { margin: 14px 0 0; color: #fff2af; text-align: center; font-size: .8rem; }
.result-hero { text-align: center; padding: 32px 0; }
.result-hero .trophy { font-size: 5rem; }
.result-hero h1 { font-size: clamp(3rem,8vw,6rem); letter-spacing: -.09em; margin: 12px 0; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.final-team { background: #fff; color: var(--ink); border-radius: 24px; padding: 20px; box-shadow: var(--shadow); }
.final-team.a { border-top: 9px solid var(--blue); }
.final-team.b { border-top: 9px solid var(--orange); }
.final-team-head span { font-size: 2.4rem; }
.final-team-head h2 { margin: 3px 0; font-size: 1.8rem; }
.final-card-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 14px; }
.final-card { padding: 12px; border-radius: 15px; background: #f4f6fb; }
.final-card small, .final-card span { display: block; color: #6d7890; }
.final-card strong { display: block; margin: 5px 0; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.result-actions .secondary { width: 100%; min-height: 56px; }
@media (max-width: 900px) {
  .arcade-hero { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .setup-arena { grid-template-columns: 1fr; }
  .setup-versus { margin: -3px auto; }
  .setting-columns { grid-template-columns: 1fr; }
  .actions { grid-template-columns: 1fr 1fr; }
  .info-drawer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .app { padding-left: 11px; padding-right: 11px; }
  .hero h1 { font-size: clamp(3.4rem,17vw,5.2rem); }
  .choice-row { grid-template-columns: 1fr; }
  .deal-grid, .result-grid, .secret-card-grid { grid-template-columns: 1fr; }
  .screen-head { align-items: flex-start; flex-direction: column; }
  .team-score { padding: 11px 8px; }
  .team-score strong { font-size: 1.35rem; }
  .team-score small { font-size: .7rem; }
  .team-score span { font-size: .65rem; }
  .turn-spotlight { align-items: flex-start; }
  .timer { width: 68px; height: 68px; }
  .actions { grid-template-columns: 1fr 1fr; }
  .action-btn { min-height: 105px; }
  .target-cards { grid-template-columns: repeat(2,1fr); }
  .target-card { min-height: 150px; }
  .bonus-options, .bonus-award, .hint-choice-grid { grid-template-columns: 1fr; }
  .modal-card { padding: 17px; }
  .result-actions { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .actions { grid-template-columns: 1fr; }
  .battle-header { gap: 6px; }
  .target-cards { grid-template-columns: 1fr; }
}