:root {
  --ink:#2f3542; --text:#2f3542; --bg:#74c9ff; --paper:#fff; --card-bg:#fff;
  --blue:#328bff; --red:#ff5868; --gold:#ffe263; --muted:#64738c;
  font-family:'Zen Maru Gothic','Noto Sans KR',sans-serif; color:var(--ink);
}
* { box-sizing:border-box; }
body { display:block; padding:0; margin:0; background:radial-gradient(circle at 12% 5%,#fff9 0 4%,transparent 4.3%),radial-gradient(circle at 90% 15%,#fff7 0 7%,transparent 7.3%),linear-gradient(#6bbcff,#b4f0ff 65%,#c8efb4); min-height:100dvh; }
button,input,select { font:inherit; font-weight:900; }
button,a { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #0863da; outline-offset:3px; }
button:active:not(:disabled) { transform:translateY(3px); }
[hidden] { display:none!important; }
.svg-library { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.app-container { width:calc(100% - 24px); max-width:440px; margin:0 auto; }
.masthead { display:flex; justify-content:space-between; align-items:center; padding:12px 0; gap:6px; }
.back-link { font-size:11px; font-weight:900; color:var(--ink); text-decoration:none; white-space:nowrap; }
.header-tools { display:flex; gap:5px; align-items:center; }
.header-tools select,.header-tools button { font-size:10px; border:2px solid var(--ink); border-radius:12px; padding:8px 6px; background:#fff; color:var(--ink); min-height:36px; box-shadow:0 3px 0 var(--ink); }
.capture-button[aria-pressed=true] { background:var(--gold); }
.main-card { margin:0 0 25px; padding:24px 16px; background:#fff; border:4px solid var(--ink); border-radius:34px; box-shadow:0 9px 0 var(--ink); overflow:hidden; text-align:center; }
.title-row { display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 13px; }
.eyebrow { font-size:11px; font-weight:900; color:var(--muted); margin:0 0 5px; }
h1 { font-size:clamp(23px,6vw,29px); line-height:1.2; font-weight:900; margin:0; letter-spacing:0; }
.brand-crown { width:39px; height:39px; border-radius:10px; object-fit:cover; box-shadow:0 3px 0 #2f354226; flex-shrink:0; }
.hero-copy h2 { font-size:15px; font-weight:900; margin:0 0 12px; color:var(--muted); }
.hero-copy p { display:none; }
.hero-map { position:relative; width:100%; aspect-ratio:1; overflow:hidden; border:4px solid var(--ink); border-radius:24px; box-shadow:0 6px 0 var(--ink); background:#449eff; }
.hero-map>img { display:block; width:100%; height:100%; object-fit:cover; }
.cover-logo { position:absolute; bottom:7%; left:0; right:0; display:flex; flex-direction:column; align-items:center; line-height:.88; font-family:Outfit,sans-serif; font-weight:900; font-style:italic; transform:rotate(-5deg); color:#ffe357; -webkit-text-stroke:2px #563620; paint-order:stroke fill; text-shadow:0 4px 0 #b76e13,0 7px 0 #2f3542; pointer-events:none; }
.cover-logo span { font-size:28px; letter-spacing:.12em; }
.cover-logo strong { font-size:59px; letter-spacing:-.04em; }
.cover-badge { position:absolute; top:10px; right:10px; padding:4px 10px; border:3px solid var(--ink); border-radius:20px; color:var(--ink); background:var(--gold); font-family:Outfit,sans-serif; font-size:17px; font-weight:900; transform:rotate(6deg); }
.intro-strip { display:flex; justify-content:center; gap:5px; margin:20px 0 15px; }
.intro-strip span { font-size:10px; font-weight:900; background:#e9f5ff; color:#356196; border-radius:8px; padding:5px 7px; }
.start-actions { display:grid; gap:11px; }
.start-actions label { font-size:11px; text-align:left; font-weight:900; margin-bottom:-7px; color:var(--muted); }
input { width:100%; border:3px solid #d6deed; background:#f5f8ff; padding:10px 12px; border-radius:12px; font-size:16px; color:var(--ink); }
.primary,.secondary { display:flex; width:100%; min-height:58px; align-items:center; justify-content:center; gap:10px; padding:12px; text-decoration:none; border:3px solid var(--ink); border-radius:18px; font-size:18px; font-weight:900; line-height:1.3; box-shadow:0 6px 0 var(--ink); transition:transform .1s; }
.primary { background:linear-gradient(#ffe675,#ffc942); color:var(--ink); }
#start { background:linear-gradient(#53e479,#28be64); color:#fff; font-size:21px; text-shadow:0 2px 0 #1b975c; }
#start>span:last-child { display:none; }
.secondary { background:#edf6ff; color:#356294; box-shadow:0 4px 0 var(--ink); font-size:15px; }
.primary:disabled { background:#d3dfed; color:#62758e; text-shadow:none; box-shadow:0 3px 0 #8895aa; border-color:#8895aa; }
.fine { font-size:11px; font-weight:700; color:var(--muted); text-align:center; line-height:1.7; margin:8px 0 0; }
.waiting { padding:30px 4px; min-height:420px; }
.waiting-crown svg { width:64px; height:55px; color:#ffc533; filter:drop-shadow(0 3px 0 #b07d20); animation:float 2s ease-in-out infinite; }
.waiting h2 { font-size:21px; margin:20px 0 8px; font-weight:900; }
.matching-faces { display:flex; justify-content:center; align-items:center; gap:20px; margin:20px 0; }
.matching-faces .portrait { width:85px; height:85px; border-width:4px; }
.matching-faces b { font-family:Outfit,sans-serif; font-size:37px; color:#ffcf42; -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; transform:rotate(-10deg); }
#wait-time { font-size:38px; font-family:Outfit,sans-serif; font-weight:900; }
.waiting .secondary { margin-top:25px; }
#battle { scroll-margin-top:10px; position:relative; }
.broadcast-strip { display:flex; justify-content:space-between; align-items:center; padding:0 1px 9px; color:#55759a; font-family:Outfit,sans-serif; font-size:11px; font-weight:900; }
.broadcast-strip small { font-size:9px; padding-left:5px; color:#8497af; }
.broadcast-strip button { display:none; background:#fff; color:var(--ink); font-size:10px; border:2px solid var(--ink); border-radius:8px; padding:3px 8px; }
.scoreboard { display:grid; grid-template-columns:1fr 78px 1fr; gap:7px; align-items:center; padding:0 0 11px; }
.fighter { position:relative; background:linear-gradient(#e2f5ff,#b6dfff); border:3px solid var(--ink); border-radius:16px; padding:7px 3px 5px; box-shadow:0 4px 0 var(--ink); min-width:0; }
.fighter.enemy { background:linear-gradient(#ffe9e9,#ffc0c8); }
.portrait { background-image:url('assets/cover.webp'); background-size:310%; border:2px solid var(--ink); border-radius:50%; display:block; }
.portrait.blue { background-position:8% 60%; background-color:#3f9af8; }
.portrait.red { background-position:92% 59%; background-color:#ff7b62; }
.fighter>.portrait { width:39px; height:39px; position:absolute; top:-5px; left:5px; }
.fighter.enemy>.portrait { left:auto; right:5px; }
#your-name,#enemy-name { display:block; font-size:10px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding-left:43px; line-height:22px; text-align:left; font-weight:900; }
#enemy-name { padding-left:0; padding-right:43px; text-align:right; }
.fighter>div:not(.crown-track) { display:flex; justify-content:center; gap:5px; align-items:center; }
.fighter>div>svg { width:23px; height:21px; color:#ffc339; stroke:#ae7623; stroke-width:1px; }
.fighter strong { font-size:30px; font-weight:900; line-height:1.1; font-family:Outfit,sans-serif; }
.crown-track { display:flex; justify-content:center; gap:3px; margin-top:2px; }
.crown-track svg { width:17px!important; height:15px!important; opacity:.22; color:#6984a0!important; stroke:none!important; }
.crown-track svg.earned { opacity:1; color:#f2b323!important; filter:drop-shadow(0 1px 0 #93602a); }
.round-box { border:3px solid var(--ink); background:var(--gold); border-radius:15px; box-shadow:0 4px 0 var(--ink); padding:4px 0; }
.round-box>span { display:block; font-family:Outfit,sans-serif; font-size:10px; font-weight:900; white-space:nowrap; }
.round-box>strong { display:block; font-family:Outfit,sans-serif; font-size:39px; line-height:1; font-weight:900; font-variant-numeric:tabular-nums; }
.round-box>small { font-size:9px; font-weight:900; display:block; }
.round-box.urgent { background:#ffaca1; color:#923d40; }
.readiness { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 0 6px; }
.ready-card { display:flex; align-items:center; justify-content:center; gap:5px; padding:8px 5px; background:#edf4ff; border:2px solid #a8bfdf; border-radius:10px; font-size:11px; color:#567092; transition:background .2s; }
.ready-card>span { font-size:10px; font-weight:900; }
.ready-card strong { font-size:12px; font-weight:900; }
.ready-card i { width:7px; height:7px; border-radius:50%; background:#8ba1bf; animation:think 1.1s ease-in-out infinite; }
.ready-card.is-ready { background:#c9ffd8; border-color:#289957; color:#1b7e46; }
.ready-card.is-ready i { animation:none; border-radius:0; background:none; width:10px; height:6px; border-left:3px solid #168142; border-bottom:3px solid #168142; transform:rotate(-45deg); margin-top:-3px; }
.enemy-status { display:flex; align-items:center; justify-content:space-between; gap:5px; padding:0 3px; font-size:10px; font-weight:900; color:#7b8ba1; }
.enemy-status strong { margin-right:auto; color:#cf5262; }
.concealed-tip { font-size:9px; }
.instruction { font-size:14px; font-weight:900; color:#344662; line-height:1.4; min-height:33px; display:grid; place-items:center; margin:7px 0; }
.battlefield { --scene-height:304px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; position:relative; isolation:isolate; border:3px solid var(--ink); border-radius:20px; padding:9px 5px 6px; background:#76cbf5 url('assets/arena.webp') center 40%/100% 100% no-repeat; overflow:hidden; box-shadow:0 5px 0 var(--ink); }
.fort { position:relative; min-width:0; height:var(--scene-height); display:flex; flex-direction:column; align-items:center; padding:0; }
.fort-title { font-size:11px; font-weight:900; background:#fffffff2; border:2px solid var(--ink); border-radius:8px; padding:3px 5px; box-shadow:0 2px 0 #2f35425c; line-height:1; }
.enemy-order { position:absolute; top:33px; font-size:24px; font-family:Outfit,sans-serif; font-weight:900; background:#ff6072; color:#fff; min-width:40px; height:36px; border:3px solid var(--ink); border-radius:11px; display:grid; place-items:center; box-shadow:0 3px 0 #86394d; z-index:4; }
.fort-art { position:absolute; top:69px; height:132px; width:105%; color:#4595ff; filter:drop-shadow(0 4px 0 #22385544); z-index:2; }
.fort[data-result=lose] .fort-art { color:#ff5c68; }
.troop-line { position:absolute; display:flex; align-items:center; justify-content:center; width:100%; pointer-events:none; }
.troop-line svg { width:25px; height:30px; flex-shrink:0; filter:drop-shadow(0 2px 0 #2d42664f); }
.enemy-troops { top:62px; z-index:1; color:#ff6175; }
.your-troops { bottom:75px; z-index:3; color:#328bff; }
.enemy-troops svg { opacity:0; }
.lane-result { position:absolute; top:158px; z-index:5; font-size:13px; font-weight:900; color:#fff; -webkit-text-stroke:3px #176fbf; paint-order:stroke fill; transform:rotate(-6deg); white-space:nowrap; }
.fort[data-result=lose] .lane-result { -webkit-text-stroke-color:#9c2c45; }
.fort[data-result=draw] .lane-result { -webkit-text-stroke-color:#61687a; }
.allocation { display:grid; grid-template-columns:1fr 1fr; width:100%; position:absolute; bottom:0; background:#eef8ff; border:2px solid var(--ink); border-radius:12px; overflow:hidden; box-shadow:0 3px 0 #2f3542; z-index:5; }
.allocation output { grid-column:1/3; grid-row:1; font-family:Outfit,sans-serif; font-size:25px; font-weight:900; line-height:1.1; padding:3px 0; color:#196ace; }
.allocation button { min-height:44px; min-width:0; padding:0; font-size:25px; font-weight:900; border:0; border-top:2px solid #b6cde6; background:#d9edff; color:#216ccc; line-height:1; }
.allocation button:last-child { border-left:2px solid #b6cde6; background:#3c95ff; color:white; }
.allocation button:disabled { opacity:.55; }
.reserve { display:flex; justify-content:space-between; align-items:center; background:#fff5c2; border:2px solid var(--ink); border-radius:12px; padding:5px 10px; margin:13px 0 10px; gap:7px; }
.reserve>div { display:flex; align-items:center; flex-wrap:wrap; gap:3px 8px; text-align:left; }
.reserve span { font-size:12px; font-weight:900; }
.reserve strong { font-size:27px; font-weight:900; font-family:Outfit,sans-serif; color:#bc741b; line-height:1; }
.reserve small { font-size:9px; color:#8d804b; width:100%; font-weight:700; }
.text-button { border:0; background:transparent; text-decoration:underline; text-underline-offset:3px; font-size:11px; font-weight:900; color:#78869b; padding:8px 0; white-space:nowrap; }
#commit { min-height:52px; font-size:18px; border-radius:14px; }
#round-tip { font-size:10px; margin-top:12px; }
.history-panel { border-top:2px dashed #d8e0ed; margin-top:17px; text-align:left; }
.history-panel summary { font-size:12px; font-weight:900; cursor:pointer; padding:12px 0; }
.history-panel ol { list-style:none; margin:0; padding:0; }
.history-panel li { display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid #e5eaf3; font-size:11px; }
.history-panel li span:last-child { margin-left:auto; font-weight:900; }
.leave { display:block; margin:8px auto 0; }
.battle-fx { position:absolute; inset:0; overflow:hidden; z-index:8; pointer-events:none; }
.battle-fx i { position:absolute; width:10px; height:10px; border-radius:2px; left:50%; top:45%; background:var(--particle-color); animation:confetti .85s cubic-bezier(.1,.7,.3,1) both; }
.battle-splash { position:absolute; inset:0; pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:10; opacity:0; transform:scale(.5); }
.battle-splash svg { width:70px; height:64px; color:#ffd83d; filter:drop-shadow(0 4px 0 #865626); }
.battle-splash strong { font-size:clamp(25px,8vw,40px); font-family:Outfit,'Zen Maru Gothic','Noto Sans KR',sans-serif; font-weight:900; color:#fff453; -webkit-text-stroke:5px var(--ink); paint-order:stroke fill; text-shadow:0 5px 0 var(--ink); transform:rotate(-6deg); line-height:1.4; }
.battle-splash>span { font-size:13px; background:#fff; border:3px solid var(--ink); padding:4px 13px; border-radius:10px; margin-top:7px; font-weight:900; }
.battle-splash.lose strong { color:#ffaca7; }
.battle-splash.draw strong { color:#e4faff; }
.battle-splash.active { animation:splash 2.4s cubic-bezier(.16,.8,.2,1) .75s both; }
.battlefield.revealing .enemy-order { animation:reveal .45s cubic-bezier(.16,.8,.2,1) both; }
.battlefield.revealing .fort[data-lane="1"] .enemy-order { animation-delay:.22s; }
.battlefield.revealing .fort[data-lane="2"] .enemy-order { animation-delay:.44s; }
.battlefield.revealing .enemy-troops svg { animation:charge-down .65s ease-out both; }
.battlefield.revealing .your-troops svg { animation:charge-up .65s ease-out both; }
.battlefield.revealing .fort-art { animation:castle-hit .55s ease-out .35s both; }
.battlefield.revealing .lane-result { animation:reveal .5s ease-out .55s both; }
.allocation output.bump { animation:reveal .2s ease-out; }
.result { position:relative; padding:22px 0 5px; background:radial-gradient(ellipse at 50% 20%,#fff4a5,transparent 64%); }
.result-crown { width:110px; height:96px; color:#ffcf37; filter:drop-shadow(0 5px 0 #a86f24); margin-bottom:15px; animation:float 2s ease-in-out infinite; }
.result h2 { font-size:clamp(27px,7vw,38px); font-weight:900; margin:8px 0; color:#f5b420; -webkit-text-stroke:2px #624826; paint-order:stroke fill; }
#final-score { font-family:Outfit,sans-serif; font-size:56px; font-weight:900; line-height:1.3; }
#result-detail { font-size:13px; font-weight:700; color:var(--muted); line-height:1.7; }
.result-history { display:flex; justify-content:center; gap:7px; margin:20px 0 24px; }
.result-history span { width:42px; height:42px; border-radius:50%; background:#eaf1fb; border:3px solid var(--ink); display:grid; place-items:center; font-weight:900; font-size:12px; }
.result-history .win { background:#87dcff; }.result-history .lose { background:#ff9eaf; }
.result>.secondary { margin-top:14px; }
.error { border:2px solid #bf4861; border-radius:14px; background:#ffe0e5; padding:12px; font-size:12px; color:#873447; margin-top:17px; font-weight:700; }
.error button { display:block; margin:8px auto 0; border:0; color:inherit; background:none; text-decoration:underline; padding:7px; }
.guide { background:#fff; padding:25px 18px; border:4px solid var(--ink); border-radius:30px; box-shadow:0 7px 0 var(--ink); margin:24px 0; }
.guide h2 { font-size:20px; line-height:1.5; margin:0 0 16px; font-weight:900; text-align:center; }
.guide>.eyebrow { text-align:center; }
.rules { padding:0; margin:0; list-style:none; }
.rules li { display:grid; grid-template-columns:32px 1fr; gap:10px; padding:15px 0; border-top:2px dashed #d9e0ed; }
.rules li>span { width:29px; height:29px; border-radius:9px; display:grid; place-items:center; font-size:12px; font-weight:900; background:var(--gold); border:2px solid var(--ink); }
.rules h3 { font-size:14px; font-weight:900; margin:0 0 5px; }
.rules p { font-size:12px; line-height:1.8; color:var(--muted); margin:0; font-weight:700; }
.device-record { display:flex; justify-content:space-between; gap:8px; border-top:2px dashed #d9e0ed; margin-top:20px; padding-top:15px; font-size:12px; font-weight:900; }
.app-container #hubAccountCardGame.hub-account-card { background:#fff!important; border:2px solid #d9e0ed; border-radius:22px; padding:15px!important; margin:20px 0 0!important; }
.app-container #hubAccountCardGame .hub-account-label { color:var(--ink)!important; font-size:12px!important; }
footer { display:flex; justify-content:space-between; font-size:10px; font-weight:900; padding:0 4px 22px; color:#57708a; }
.record-mode.is-battle .masthead,.record-mode.is-battle .title-row,.record-mode.is-battle .guide,.record-mode.is-battle #hubAccountCardGame,.record-mode.is-battle footer { display:none!important; }
.record-mode.is-battle .app-container { width:100%; max-width:480px; }
.record-mode.is-battle .main-card { border:0; border-radius:0; padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom)); margin:0; box-shadow:none; background:linear-gradient(#e6f7ff,#fff); min-height:100svh; }
.record-mode.is-battle #battle { display:flex; flex-direction:column; }
.record-mode.is-battle .broadcast-strip { font-size:13px; }
.record-mode.is-battle .broadcast-strip button { display:block; }
.record-mode.is-battle .history-panel,.record-mode.is-battle .leave { display:none; }
.record-mode.is-battle .battlefield { --scene-height:clamp(260px,38svh,340px); }
.record-mode.is-battle .fort-art { top:24%; height:46%; }
.record-mode.is-battle .lane-result { top:51%; }
.record-mode.is-battle .broadcast-strip small { color:#52739b; }
@keyframes float { 50% { transform:translateY(-6px) rotate(3deg); } }
@keyframes think { 50% { opacity:.3; transform:scale(.65); } }
@keyframes reveal { 0% { opacity:0; transform:scale(.3) translateY(-12px); } 65% { opacity:1; transform:scale(1.22); } 100% { opacity:1; transform:scale(1); } }
@keyframes castle-hit { 25% { transform:translateX(-3px) rotate(-3deg); } 50% { transform:translateX(3px) rotate(3deg); } 100% { transform:none; } }
@keyframes charge-up { 0% { transform:translateY(7px); } 55% { transform:translateY(-30px) scale(1.1); } 100% { transform:translateY(0); } }
@keyframes charge-down { 0% { opacity:0; transform:translateY(-8px); } 45% { opacity:1; transform:translateY(12px); } 100% { opacity:0; transform:translateY(25px); } }
@keyframes splash { 0% { opacity:0; transform:scale(.3) rotate(-12deg); } 15%,75% { opacity:1; transform:scale(1) rotate(0); } 100% { opacity:0; transform:scale(1.1) translateY(-20px); } }
@keyframes confetti { 0% { transform:translate(0,0) rotate(0); opacity:1; } 100% { transform:translate(var(--dx),var(--dy)) rotate(var(--spin)); opacity:0; } }
@media(max-width:360px) {
  .app-container { width:calc(100% - 16px); }.main-card { padding:18px 8px; border-radius:27px; }.back-link { display:none; }.masthead { justify-content:center; }.battlefield { gap:2px; padding-inline:2px; --scene-height:290px; }.fort-title { font-size:10px; padding-inline:4px; }.scoreboard { grid-template-columns:1fr 70px 1fr; gap:5px; }.ready-card { gap:3px; padding-inline:3px; }.ready-card strong { font-size:11px; }.cover-logo strong { font-size:50px; }.fighter>.portrait { width:32px; height:32px; }#your-name { padding-left:34px; }#enemy-name { padding-right:34px; }.fort-art { height:120px; }.allocation output { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .battle-splash.active { opacity:1; transform:none; }.battle-fx { display:none; }
}