[hidden]{display:none!important}.star-wallet{display:flex;gap:8px;align-items:center;padding:9px 16px;background:#fff2c7;color:#9a661c;border:1px solid #e7d093;border-radius:999px;font-size:17px;box-shadow:0 3px 0 #e5dab6}.star-wallet b{font-size:14px}.mode-nav{display:flex;gap:8px;align-items:center;margin:0 0 22px;padding:7px;background:#e0ead7;border-radius:16px}.mode-nav button{border:0;background:transparent;padding:12px 24px;border-radius:11px;color:#748571;font-weight:900}.mode-nav button[aria-pressed=true]{color:#315d43;background:#fffef5;box-shadow:0 3px 6px #28543614}.mode-nav button:disabled{opacity:.5;cursor:not-allowed}.mode-nav>span{margin-left:auto;padding-right:16px;font-size:12px;color:#678367;font-weight:750}
.arena{--arena-bg:#1f4150;position:relative;isolation:isolate;overflow:clip;height:550px;border-radius:26px;background:#121f32;border:1px solid #476769;box-shadow:0 10px 0 #b9cbb2,0 20px 50px #23433518;color:#f3ffee;container-type:inline-size}.arena-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 75%,#245552 0,transparent 55%),radial-gradient(ellipse at 83% 35%,#433b76 0,transparent 52%),linear-gradient(#101a30,#1e3d4c);z-index:-5}.arena-sky:after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#e2fbe7 1px,transparent 2px),radial-gradient(circle,#cdbbfc 1px,transparent 2px);background-size:137px 127px,223px 153px;background-position:10px 10px,54px 33px;opacity:.5;animation:sky-drift 18s linear infinite}.arena-moon{position:absolute;left:45%;top:9%;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6f7c3,#bbd8b373 66%,transparent 70%);box-shadow:0 0 100px 50px #9bdac016;opacity:.6;z-index:-3}.arena-forest{position:absolute;inset:5% -10% 12%;opacity:.5;background:repeating-linear-gradient(84deg,transparent 0 9%,#071f2c 10% 11%,transparent 13% 22%);clip-path:polygon(0 100%,0 10%,12% 30%,16% 0,23% 35%,35% 5%,40% 52%,52% 18%,61% 44%,72% 0,80% 29%,90% 9%,100% 0,100% 100%);z-index:-2}.arena-ground{position:absolute;left:-20%;right:-20%;height:50%;bottom:-24%;border-radius:50%;background:radial-gradient(ellipse,#5a858777,#1b394d 65%);border-top:2px solid #86e0cc55;box-shadow:0 -40px 80px #84d7c016;z-index:-1}.arena-platform{position:absolute;bottom:16%;width:32%;height:8%;border-radius:50%;border:1px solid #9af3bb3b;box-shadow:0 0 26px #72e7a331,inset 0 0 28px #6dda9633;background:#0d202f45;z-index:0}.platform-left{left:8%}.platform-right{right:8%;border-color:#c9a4ff55;box-shadow:0 0 26px #ad85ff22,inset 0 0 28px #ad85ff22}
.fighter{position:absolute;bottom:16%;width:33%;max-width:355px;aspect-ratio:1;z-index:3}.fighter-player{left:7%}.fighter-enemy{right:7%}.fighter-motion,.fighter-facing{width:100%;height:100%;transform-origin:50% 88%}.fighter .fighter-sprite{width:100%;height:100%;max-height:none;filter:drop-shadow(0 12px 6px #0005);animation:fighter-breathe 3.2s ease-in-out infinite;transform-origin:50% 83%}.fighter .fighter-sprite.is-acting{animation:none!important}.fighter-enemy .fighter-sprite{animation-delay:-1s}.battle-caption{position:absolute;bottom:21px;left:10px;right:10px;text-align:center;z-index:12;font-size:12px;color:#c5dfd6;font-weight:750;letter-spacing:.02em}.arena-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:15;display:grid;gap:15px;justify-items:center;min-width:235px}.battle-banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:20;text-align:center;white-space:nowrap;pointer-events:none;opacity:0}.skill-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:23;display:grid;justify-items:center;gap:4px;pointer-events:none;text-align:center;white-space:nowrap;opacity:0}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10}.fx-label{position:absolute;z-index:22;pointer-events:none;font-size:33px;font-weight:950;color:#ffefad;text-shadow:0 3px 0 #263746,0 0 15px #ffc95b66;white-space:nowrap}.fx-label.blocked{color:#a7fff0;font-size:22px}.fx-label.care{font-size:28px;text-shadow:0 2px 8px #30523b44;color:#c6659c}.fx-shield{position:absolute;width:230px;aspect-ratio:1;border:3px solid var(--fx-color);border-radius:50%;background:radial-gradient(circle,transparent 45%,#b5f8f126 80%);box-shadow:inset 0 0 40px var(--fx-color),0 0 35px #bcffed44;pointer-events:none;z-index:8}.fx-slash{position:absolute;height:70px;border-top:7px solid var(--fx-color);border-radius:50%;filter:drop-shadow(0 0 8px var(--fx-color));pointer-events:none;z-index:11}.star-fly{position:fixed;z-index:1000;pointer-events:none;font-size:28px;color:#ffdf70;text-shadow:0 0 15px #ffeaae}.sleep-tint{position:absolute;inset:0;background:#30375b3d;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s}.stage.sleeping .sleep-tint{opacity:1}
.raster-pet.pet-cloud{background-image:url('assets/dokbi-dukbi-master.png');animation:cloud-hover 4s ease-in-out infinite}.raster-pet.pet-cloud:is(.pose-play,.pose-eat,.pose-train,.pose-run,.pose-jump,.pose-sleep){background-image:url('assets/dokbi-dukbi-poses.png');clip-path:none}.raster-pet.pet-cloud.pose-play{animation:mantis-play .65s ease-in-out infinite alternate}.raster-pet.pet-cloud.pose-eat{animation:mantis-eat .55s ease-in-out infinite alternate}.raster-pet.pet-cloud.pose-train{animation:mantis-train 1s ease-in-out infinite alternate}.raster-pet.pet-cloud.pose-run{animation:mantis-run .4s ease-in-out infinite alternate}.raster-pet.pet-cloud.pose-jump{animation:mantis-jump 1.25s ease-in-out infinite}.raster-pet.pet-cloud.pose-sleep{animation:mantis-sleep 3s ease-in-out infinite}.stage[data-pet=cloud]{min-height:565px}.stage[data-pet=cloud] .stage-art{inset:40px 0 78px}
.fx-shield.big{width:340px;border-width:5px}.fighter-ghost{position:absolute;inset:0;pointer-events:none;opacity:0;filter:brightness(1.9) saturate(.3)}.fx-shield.big{width:210px}.arena-world{position:absolute;inset:0;z-index:0}.fighter-motion>.fighter-facing{position:relative}.fighter img.fighter-sprite{position:absolute;display:block;max-width:none;max-height:none;user-select:none;-webkit-user-drag:none;pointer-events:none;transform-origin:50% 88%}.fighter:not([data-pose=idle]) .fighter-sprite{animation:none}.fighter[data-pose=lose] .fighter-sprite{animation:fighter-rest 1.6s ease-in-out infinite}.fighter-placeholder{position:absolute;left:28%;right:28%;bottom:10%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffffff2a,transparent 68%);font-size:0;color:transparent}.stage-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:9}.stage-dim{position:absolute;inset:0;background:#040a14;opacity:0;pointer-events:none;z-index:2}.stage-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:24}.cutin-band{position:absolute;left:0;right:0;top:30%;height:40%;z-index:21;overflow:hidden;pointer-events:none;background:#0b1830;border-block:3px solid #fff3c0;box-shadow:0 0 40px #ffe79a66;transform:translateX(-100%)}.cutin-band img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}.cutin-band{border-block-width:2px}.gauge-track i{transition:width .3s cubic-bezier(.16,1,.3,1)}.arena.intro .battle-hud{opacity:0}.arena.intro .hp-track i,.arena.intro .gauge-track i{width:0!important}.roster-debug{position:fixed;left:10px;bottom:10px;z-index:900;margin:0;padding:5px 10px;border-radius:8px;background:#7a3b2ad9;color:#fff;font-size:11px;font-weight:900;pointer-events:none}.arena.waiting .battle-hud,.arena.waiting .fighter{visibility:hidden}
@keyframes sky-drift{to{transform:translateY(-25px)}}@keyframes fighter-breathe{50%{transform:translateY(-5px) scale(1.015,.993)}}@keyframes cloud-hover{50%{transform:translateY(-9px) rotate(1.5deg)}}@keyframes gauge-shine{to{background-position:0 0,-200% 0}}@keyframes fighter-rest{50%{transform:scaleY(.98)}}
@media(max-width:760px){.arena{height:470px}.fighter{width:37%;bottom:21%}.fighter-player{left:3%}.fighter-enemy{right:3%}.platform-left{left:5%}.platform-right{right:5%}.arena-platform{bottom:20%}.arena-start{top:67%}.mode-nav button{padding:11px 16px}.mode-nav>span{font-size:10px}.fx-shield{width:150px}}
@media(max-width:540px){.star-wallet{padding:7px 10px;font-size:14px}.topbar-right{gap:6px}.day-pill{display:none}.mode-nav>span{display:none}.mode-nav button{flex:1}.arena{height:430px;border-radius:20px}.arena-moon{width:70px;height:70px;top:30%;left:41%}.fighter{width:43%;bottom:26%}.fighter-player{left:0}.fighter-enemy{right:0}.arena-platform{bottom:25%;width:43%}.platform-left{left:0}.platform-right{right:0}.arena-start{top:79%;gap:10px}.arena-start>span{display:none}.battle-caption{bottom:15px;font-size:11px;padding:0 12px}.fx-label{font-size:25px}.stage[data-pet=cloud]{min-height:440px}.stage[data-pet=cloud] .stage-art{inset:48px 0 77px}.fx-shield.big{width:210px}.skill-banner{width:92%;white-space:normal}.cutin-band{border-block-width:2px}}
/* ── 배틀 UI v1 (ds/specs/battle-ui-style.md 3·4·5장): 크림 패널·둥근 입체 버튼·상대 말풍선·나무 결과 보드. 무대 레이어는 위 규칙 그대로 ── */
/* 아이콘(5장): JS가 글자를 넣는 자리·배지는 CSS mask/배경 데이터 URI */
#battle-view{font-family:var(--ui-font);--ic-attack:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h12M12 6.5l5.5 5.5-5.5 5.5M3 7.5h3M3 16.5h3'/%3E%3C/svg%3E");--ic-guard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l7 2.8v5.2c0 4.4-2.9 7.6-7 9-4.1-1.4-7-4.6-7-9V6.3z'/%3E%3C/svg%3E");--ic-evade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8.5A7 7 0 1 0 19 13M18 4v4.5h-4.5'/%3E%3C/svg%3E");--ic-special:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' d='M12 2.5c.8 5.2 3.3 7.7 9.5 9.5-6.2 1.8-8.7 4.3-9.5 9.5-.8-5.2-3.3-7.7-9.5-9.5 6.2-1.8 8.7-4.3 9.5-9.5z'/%3E%3C/svg%3E");--ic-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' d='M12 20.5s-7.5-4.6-7.5-10.3A4.2 4.2 0 0 1 12 7.6a4.2 4.2 0 0 1 7.5 2.6c0 5.7-7.5 10.3-7.5 10.3z'/%3E%3C/svg%3E");--ic-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4M6 4.5h11l-2.5 4 2.5 4H6'/%3E%3C/svg%3E");--ic-graze:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath fill='%23000' d='M12 4a8 8 0 0 1 0 16z'/%3E%3C/svg%3E");--ic-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E");--ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");--ic-rest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8h7l-7 8h7'/%3E%3C/svg%3E");--ic-sound-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E");--ic-sound-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M16 9.5l5 5M21 9.5l-5 5'/%3E%3C/svg%3E");--ic-courage:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' fill-rule='evenodd' stroke='none' d='M13 2.5c.5 3 4.5 5 4.5 10.5a5.5 5.5 0 0 1-11 0c0-2.6 1.3-4.4 2.6-5.6.1 1.6.7 2.8 1.7 3.4C10 7.6 11 5 13 2.5zM12 20a2.5 2.5 0 0 0 2.5-2.5c0-1.8-1.4-2.6-2-4-.9 1.2-3 2.3-3 4A2.5 2.5 0 0 0 12 20z'/%3E%3C/svg%3E");--ic-trust:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='12' r='4.5'/%3E%3Ccircle cx='15' cy='12' r='4.5'/%3E%3C/svg%3E");--ic-curious:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5'/%3E%3Cpath d='M14.5 14.5l5 5'/%3E%3C/svg%3E");--ic-calm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' d='M15.5 3.5a8.5 8.5 0 1 0 5 12.8A7 7 0 0 1 15.5 3.5z'/%3E%3C/svg%3E");--ic-joy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5V5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8'/%3E%3C/svg%3E");--bd-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");--bd-bang:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2618' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5v7M12 17.5v.01'/%3E%3C/svg%3E");--bd-z:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5f7a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8h7l-7 8h7'/%3E%3C/svg%3E");}
#battle-view button:focus-visible{outline:3px solid var(--ui-ink-strong);outline-offset:3px}
.arena button:focus-visible{outline-color:var(--ui-sun)}
.arena .result-board button:focus-visible{outline-color:var(--ui-ink-strong)}
/* 단차 공식(2-3): box-shadow 0 var(--step) 0 var(--step-c). 누름 +2px·단차 2px(80ms), 뗌 120ms, 올라옴 −2px·단차 6px(hover 기기만) */
.roster-cell,.skill-buttons button,#start-battle,.result-actions button,.battle-mute{--step:var(--ui-step);transition:transform var(--ui-t-release) var(--ui-ease-out),box-shadow var(--ui-t-release) var(--ui-ease-out),background-color var(--ui-t-release)}
.roster-cell:not(:disabled):active,.skill-buttons button:not(:disabled):active,#start-battle:not(:disabled):active,.result-actions button:not(:disabled):active{transform:translateY(var(--ui-step-press));--step:var(--ui-step-press);transition-duration:var(--ui-t-press)}
@media(hover:hover){.roster-cell:not(:disabled):hover,.skill-buttons button:not(:disabled):hover,#start-battle:not(:disabled):hover,.result-actions button:not(:disabled):hover{transform:translateY(-2px);--step:var(--ui-step-hover)}}
@keyframes ui-pop{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes ui-fade{from{opacity:0}}

/* 3-2 대진 제목 리본 */
.battle-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin:8px 2px 20px}
.battle-heading{flex:0 1 auto;min-width:0;max-width:100%;display:grid;justify-items:start;gap:10px;isolation:isolate}
.battle-heading .eyebrow{margin:0;padding:4px 10px;border-radius:var(--ui-r-pill);background:var(--ui-leaf-tint);color:var(--ui-leaf-deep);font-size:12px;font-weight:800;letter-spacing:.04em}
.battle-heading h2{position:relative;margin:0 14px 10px;padding:8px 22px;max-width:calc(100% - 28px);background:linear-gradient(#fff4d1,#ffe9a8);border:3px solid var(--ui-line-strong);border-radius:12px;box-shadow:0 4px 0 var(--ui-sun-step);color:var(--ui-ink-strong);font-size:26px;font-weight:900;line-height:1.25;letter-spacing:-.02em;word-break:keep-all}
.battle-heading h2::before,.battle-heading h2::after{content:"";position:absolute;top:3px;bottom:-9px;width:18px;left:-19px;z-index:-1;background:#f5d77e;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%)}
.battle-heading h2::after{left:auto;right:-19px;transform:scaleX(-1)}

/* 3-1 선택 줄: 줄 이름표·선택 카드·추천 배지 */
.roster-picker{flex:1 1 780px;min-width:0;display:grid;gap:10px}
.roster-row{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:10px;min-width:0}
.roster-label{justify-self:start;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--ui-r-pill);background:var(--ui-mine);color:#fff;font-size:13px;font-weight:900;white-space:nowrap}
#roster-foe-label{background:var(--ui-foe)}
.roster-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;min-width:0;padding-top:8px}
.roster-cell{--step-c:var(--ui-step-color);position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:10px;row-gap:3px;align-items:center;align-content:center;min-height:72px;min-width:0;padding:8px 10px 8px 8px;border:2px solid var(--ui-line);background:var(--ui-panel);border-radius:var(--ui-r-card);color:var(--ui-ink);text-align:left;box-shadow:0 var(--step) 0 var(--step-c);margin-bottom:4px}
.roster-thumb{grid-row:1/4;width:48px;height:48px;border-radius:14px;border:2px solid #fff;overflow:hidden;background:var(--ui-panel-sunk)}
.roster-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.55)}
.roster-name{font-size:15px;font-weight:900;line-height:1.2;letter-spacing:-.02em;color:var(--ui-ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.roster-mind{justify-self:start;display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px;border-radius:var(--ui-r-pill);background:color-mix(in srgb,var(--mind) 24%,#fff);border:2px solid var(--mind);color:var(--ui-ink-strong);font-size:12px;font-weight:800;line-height:1;white-space:nowrap}
.roster-role{font-size:12px;line-height:1.3;color:var(--ui-ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.roster-cell[aria-checked=true]{border:3px solid var(--ui-mine-edge);background:var(--ui-mine-tint);--step-c:var(--ui-mine-step);padding:7px 9px 7px 7px}
#roster-foe .roster-cell[aria-checked=true]{border-color:var(--ui-foe-edge);background:var(--ui-foe-tint);--step-c:var(--ui-foe-step)}
.roster-cell[aria-checked=true]::before{content:"";position:absolute;top:-11px;left:-11px;z-index:1;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:var(--ui-mine) var(--bd-check) center/14px no-repeat}
#roster-foe .roster-cell[aria-checked=true]::before{background-color:var(--ui-foe)}
.roster-cell:disabled{cursor:not-allowed;opacity:.7;--step:2px}
.roster-cell.self{opacity:.45;filter:grayscale(.7);border:2px dashed var(--ui-off-line);--step:0px;padding:8px 10px 8px 8px}
.roster-tag{position:absolute;top:-19px;right:6px;z-index:1;display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 8px;border-radius:var(--ui-r-pill);background:var(--ui-sun);border:2px solid #fff;box-shadow:0 2px 0 var(--ui-sun-step);color:var(--ui-ink-strong);font-size:12px;font-weight:900;line-height:1;rotate:-3deg;animation:ui-pop var(--ui-t-pop) var(--ui-ease-out)}
.roster-tag::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:var(--ic-flag) center/contain no-repeat;mask:var(--ic-flag) center/contain no-repeat}
/* 마음 아이콘(칩 앞 12px). data-mind 없거나 5색 밖 마음은 점 */
.roster-mind::before,.trait-chip::before{content:"";flex:none;width:12px;height:12px;background:currentColor;-webkit-mask:var(--mi,radial-gradient(circle,#000 0 3px,transparent 3.5px)) center/contain no-repeat;mask:var(--mi,radial-gradient(circle,#000 0 3px,transparent 3.5px)) center/contain no-repeat}
[data-mind="용기"]{--mi:var(--ic-courage)}[data-mind="신뢰"]{--mi:var(--ic-trust)}[data-mind="호기심"]{--mi:var(--ic-curious)}[data-mind="평온"]{--mi:var(--ic-calm)}[data-mind="기쁨"]{--mi:var(--ic-joy)}

/* 3-3 HUD 카드: 불투명 크림 + 흰 테두리(무대 위) + 편 안쪽 링 */
.battle-hud{position:absolute;left:24px;right:24px;top:20px;display:grid;grid-template-columns:1fr 96px 1fr;gap:12px;z-index:12;pointer-events:none}
.hp-card{--side:var(--ui-mine);--side-edge:var(--ui-mine-edge);min-width:0;padding:12px 16px;background:var(--ui-panel-hud);border:3px solid var(--ui-rim);border-radius:20px;box-shadow:inset 0 0 0 2px var(--side-edge),0 4px 0 var(--ui-step-color),var(--ui-soft-stage);color:var(--ui-ink);transition:border-color .3s}
.enemy-hud{--side:var(--ui-foe);--side-edge:var(--ui-foe-edge)}
.hp-card.first{border-color:var(--ui-sun)}
.arena:not(.intro) .hp-card{animation:ui-pop var(--ui-t-pop) var(--ui-ease-out)}
.hud-top{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:22px}
.side-label{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--ui-r-pill);background:var(--side);color:#fff;font-size:12px;font-weight:900;letter-spacing:.02em;white-space:nowrap}
.first-badge{display:inline-flex;align-items:center;gap:2px;height:22px;padding:0 8px;border-radius:var(--ui-r-pill);background:var(--ui-sun);box-shadow:0 2px 0 var(--ui-sun-step);color:var(--ui-ink-strong);font-size:12px;font-weight:900;white-space:nowrap}
.first-badge svg{width:12px;height:12px;flex:none}
.hud-name{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:6px 0 6px}
.hp-card strong{min-width:0;font-size:18px;font-weight:900;line-height:1.2;letter-spacing:-.02em;color:var(--ui-ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-name span{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:13px;font-weight:800;color:var(--ui-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hud-name span::before{content:"";width:14px;height:14px;background:var(--mind-trust);-webkit-mask:var(--ic-heart) center/contain no-repeat;mask:var(--ic-heart) center/contain no-repeat}
/* 3-4 HP 바: 단계색(data-level) + 윗면 광택, 홈 테두리는 채움 위 겹 */
.hp-track{position:relative;height:12px;border-radius:var(--ui-r-pill);background:var(--ui-panel-sunk);overflow:hidden;--hp:var(--ui-hp-high)}
.hp-track[data-level=mid]{--hp:var(--ui-hp-mid)}.hp-track[data-level=low]{--hp:var(--ui-hp-low)}
.hp-track::after,.gauge-track::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--ui-line);pointer-events:none}
.hp-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(#ffffff66 0 38%,transparent 38%),var(--hp);transition:width .6s var(--ui-ease-bar),background-color .3s}
.hp-track:not([aria-valuenow="0"]) i{min-width:6px}
.arena.intro .hp-track i{min-width:0}
/* 3-5 별가루 바: 25·50·75% 눈금 */
.gauge-row{position:relative;display:flex;align-items:center;gap:6px;margin-top:8px}
.gauge-icon{display:grid;place-items:center;flex:none;color:var(--ui-star-deep)}
.gauge-icon svg{display:block;width:16px;height:16px;fill:none}
.gauge-row.full .gauge-icon svg{fill:var(--ui-star)}
.gauge-track{position:relative;flex:1;min-width:0;height:10px;border-radius:var(--ui-r-pill);background:var(--ui-panel-sunk);overflow:hidden}
.gauge-track::after{background:linear-gradient(90deg,transparent calc(25% - 1px),var(--ui-line) 0 calc(25% + 1px),transparent 0 calc(50% - 1px),var(--ui-line) 0 calc(50% + 1px),transparent 0 calc(75% - 1px),var(--ui-line) 0 calc(75% + 1px),transparent 0)}
.gauge-track i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(#ffffff66 0 38%,transparent 38%),linear-gradient(90deg,var(--ui-star),var(--ui-star-hi))}
.gauge-value{flex:none;font-size:13px;font-weight:800;color:var(--ui-star-deep);white-space:nowrap;font-variant-numeric:tabular-nums}
.gauge-row.full .gauge-track{box-shadow:0 0 0 3px #f5b82e55}
.gauge-row.full .gauge-track::after{box-shadow:inset 0 0 0 2px var(--ui-star)}
.gauge-row.full .gauge-track i{background:linear-gradient(#ffffff66 0 38%,transparent 38%),linear-gradient(90deg,var(--ui-star),var(--ui-star-hi),var(--ui-star));background-size:100% 100%,200% 100%;animation:gauge-shine 1.1s linear infinite}
.gauge-row.full .gauge-value{padding:1px 8px;border-radius:var(--ui-r-pill);background:var(--ui-star);color:var(--ui-ink-strong)}
.gauge-row.flash .gauge-track{animation:gauge-ring .3s ease-in-out 2}
@keyframes gauge-ring{50%{box-shadow:0 0 0 4px var(--ui-star-hi)}}
/* 특성 칩(--mind)·상태 칩 */
.chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;min-height:22px}
.trait-chip,.state-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;height:22px;padding:0 8px;border-radius:var(--ui-r-pill);border:2px solid var(--ui-line);background:var(--ui-panel-sunk);color:var(--ui-ink-soft);font-size:13px;font-weight:800;line-height:1;white-space:nowrap;overflow:hidden}
.trait-chip.on{background:color-mix(in srgb,var(--mind,var(--ui-sun)) 28%,#fff);border-color:var(--mind,var(--ui-sun));color:var(--ui-ink-strong)}
.trait-chip.flash{animation:chip-pop var(--ui-t-pop) var(--ui-ease-out);box-shadow:0 0 0 4px color-mix(in srgb,var(--mind,var(--ui-sun)) 40%,transparent)}
@keyframes chip-pop{50%{scale:1.12}}
.state-chip{background:var(--ui-sky-tint);border-color:var(--ui-sky);color:var(--ui-sky-deep)}
.state-chip::before{content:"";flex:none;width:12px;height:12px;background:currentColor;-webkit-mask:var(--ic-rest) center/contain no-repeat;mask:var(--ic-rest) center/contain no-repeat}
/* 3-6 라운드 알약 · 3-14 음소거 */
.hud-center{display:grid;justify-items:center;align-content:start;gap:8px;padding-top:10px}
.round-label{display:grid;place-items:center;min-width:56px;height:28px;padding:0 10px;border-radius:var(--ui-r-pill);background:var(--ui-panel-hud);border:3px solid var(--ui-rim);box-shadow:0 3px 0 var(--ui-step-color);color:var(--ui-ink-strong);font-size:13px;font-weight:900;letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.battle-mute{--step:3px;pointer-events:auto;position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:3px solid var(--ui-rim);background:var(--ui-panel-hud);box-shadow:0 var(--step) 0 var(--ui-step-color);color:var(--ui-ink-strong);font-size:0;line-height:1;cursor:pointer}
.battle-mute::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--ic-sound-on) center/22px no-repeat;mask:var(--ic-sound-on) center/22px no-repeat}
.battle-mute.off{background:var(--ui-off);color:var(--ui-ink-off)}
.battle-mute.off::before{-webkit-mask-image:var(--ic-sound-off);mask-image:var(--ic-sound-off)}
.battle-mute:active{transform:translateY(2px);--step:1px;transition-duration:var(--ui-t-press)}

/* 3-10 시작 버튼·VS 알약 */
.arena-start>span{padding:6px 14px;border-radius:var(--ui-r-pill);background:var(--ui-panel-hud);border:3px solid var(--ui-rim);box-shadow:var(--ui-soft-stage);color:var(--ui-ink-strong);font-size:13px;font-weight:800}
.arena-start b{display:inline-block;margin:0 6px;padding:1px 8px;border-radius:var(--ui-r-pill);background:var(--ui-sun);color:var(--ui-ink-strong);font-weight:900}
#start-battle{--step:5px;--step-c:var(--ui-sun-step);min-height:60px;padding:0 32px;border:3px solid var(--ui-rim);border-radius:var(--ui-r-pill);background:linear-gradient(#ffe37a,var(--ui-sun));box-shadow:0 var(--step) 0 var(--step-c),var(--ui-soft-stage);color:var(--ui-ink-strong);font-size:20px;font-weight:900}
#start-battle i{font-style:normal;padding-left:10px}
#start-battle:disabled{--step:2px;--step-c:var(--ui-off-line);background:var(--ui-off);color:var(--ui-ink-off);cursor:not-allowed}
#start-battle[aria-busy=true]{cursor:progress}
.arena-start small{font-size:13px;font-weight:700;color:#fffbe6;text-shadow:0 2px 5px #071a23}

/* 3-11 배너·기술 이름: 크림 채움 + 진한 외곽선 + 아래 단차 */
.battle-banner,.skill-banner strong{color:#fffbe6;font-weight:900;letter-spacing:-.02em;-webkit-text-stroke:6px var(--ui-ink-strong);paint-order:stroke fill;text-shadow:0 5px 0 var(--ui-ink-strong)}
.battle-banner{font-size:clamp(28px,5vw,48px)}
.battle-banner[data-kind=win]{color:var(--ui-sun)}
.battle-banner[data-kind=try]{color:#bfe6f7}
.skill-banner strong{font-size:clamp(30px,5.5vw,56px);line-height:1.15}
.skill-banner small{padding:3px 12px;border-radius:var(--ui-r-pill);background:var(--ui-panel-hud);border:2px solid var(--ui-rim);color:var(--ui-ink-strong);font-size:14px;font-weight:800}
/* 3-12 떠오르는 라벨(무대 안만. 돌보기 화면 라벨은 위 기본 규칙) */
.arena .fx-label{font-size:34px;font-weight:900;color:#fffbe6;-webkit-text-stroke:4px var(--ui-ink-strong);paint-order:stroke fill;text-shadow:0 3px 0 var(--ui-ink-strong)}
.arena .fx-label.big{font-size:54px;color:var(--ui-star-hi)}
.arena .fx-label.blocked{font-size:24px;color:#bfe6f7}
.arena .fx-label.gauge{font-size:16px;color:var(--ui-star)}
.arena .fx-label.gauge.full{font-size:18px;color:var(--ui-star-hi)}
.arena .fx-label.trait{font-size:18px;color:#fff3c4}
.arena .fx-label.heal{font-size:22px;color:#b8f5a8}
.arena .fx-label.rest{font-size:18px;color:#d8defe}
.arena .fx-label.note{font-size:13px;color:#fffbe6;-webkit-text-stroke:0;text-shadow:none;padding:3px 10px;border-radius:var(--ui-r-pill);background:#3a2618cc}

/* 3-15 명령 판 */
.battle-controls{margin-top:24px;padding:20px;background:var(--ui-panel);border:3px solid var(--ui-line);border-radius:24px;box-shadow:0 5px 0 var(--ui-step-color);color:var(--ui-ink)}
/* 3-7 다음 행동 말풍선: 꼬리는 상대 쪽(오른쪽 위). 안내 상태(의도 아이콘 숨김)는 꼬리 없음 */
.turn-info{--tip:var(--ui-foe-edge);--fill:#fff;position:relative;display:flex;align-items:center;gap:12px;width:min(640px,100%);min-height:64px;margin:16px 0 16px auto;padding:12px 16px;background:var(--fill);border:3px solid var(--tip);border-radius:var(--ui-r-panel);box-shadow:0 4px 0 var(--ui-foe-step);transform-origin:82% -16px}
.turn-info::before,.turn-info::after{content:"";position:absolute;bottom:100%;clip-path:polygon(0 100%,100% 100%,85% 0)}
.turn-info::before{right:18%;width:22px;height:19px;background:var(--tip)}
.turn-info::after{right:calc(18% + 3px);width:15px;height:13px;background:var(--fill)}
.turn-info>div{min-width:0}
.turn-info .eyebrow{display:flex;align-items:center;gap:6px;margin:0 0 2px;color:var(--ui-foe);font-size:12px;font-weight:800;letter-spacing:.04em}
.turn-info p{margin:0;font-size:16px;font-weight:800;line-height:1.4;color:var(--ui-ink-strong);word-break:keep-all}
.intent-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--ui-foe-tint);border:2px solid var(--ui-foe-edge);color:var(--ui-foe);font-size:18px;font-weight:900;line-height:1}
.intent-icon[data-action]{font-size:0}
.intent-icon[data-action]::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--ia) center/contain no-repeat;mask:var(--ia) center/contain no-repeat}
.intent-icon[data-action=attack]{--ia:var(--ic-attack)}.intent-icon[data-action=guard]{--ia:var(--ic-guard)}.intent-icon[data-action=evade]{--ia:var(--ic-evade)}.intent-icon[data-action=special]{--ia:var(--ic-special)}
.turn-info:not(:has(#intent-icon:not([hidden]))){--tip:var(--ui-line);box-shadow:0 4px 0 var(--ui-step-color)}
.turn-info:not(:has(#intent-icon:not([hidden])))::before,.turn-info:not(:has(#intent-icon:not([hidden])))::after{display:none}
.turn-info:not(:has(#intent-icon:not([hidden]))) .eyebrow{color:var(--ui-ink-soft)}
/* 말풍선 등장: 의도 아이콘이 바뀔 때만(행동별 이름이 달라 바뀌면 다시 재생) */
.turn-info:has(#intent-icon[data-action=attack]:not([hidden])){animation:bubble-a var(--ui-t-pop) var(--ui-ease-out)}
.turn-info:has(#intent-icon[data-action=guard]:not([hidden])){animation:bubble-g var(--ui-t-pop) var(--ui-ease-out)}
.turn-info:has(#intent-icon[data-action=evade]:not([hidden])){animation:bubble-e var(--ui-t-pop) var(--ui-ease-out)}
.turn-info:has(#intent-icon[data-action=special]:not([hidden])){animation:bubble-s var(--ui-t-pop) var(--ui-ease-out)}
@keyframes bubble-a{0%{transform:translateY(6px) scale(.85);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:none}}
@keyframes bubble-g{0%{transform:translateY(6px) scale(.85);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:none}}
@keyframes bubble-e{0%{transform:translateY(6px) scale(.85);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:none}}
@keyframes bubble-s{0%{transform:translateY(6px) scale(.85);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:none}}
/* 경고(상대 별가루 가득): 주황, 들어올 때 팝 1회, 깜빡임 없음 */
.turn-info.warn{--tip:var(--ui-warn);--fill:var(--ui-warn-tint);box-shadow:0 4px 0 var(--ui-warn-step)}
.turn-info.warn:has(#intent-icon[data-action]:not([hidden])){animation:ui-pop var(--ui-t-pop) var(--ui-ease-out)}
.turn-info.warn p{color:var(--ui-warn-deep)}
.turn-info.warn .intent-icon{background:var(--ui-warn);border-color:var(--ui-warn);color:var(--ui-ink-strong)}
.turn-info.warn .eyebrow{color:var(--ui-warn-deep)}
.turn-info.warn .eyebrow::after{content:"";width:18px;height:18px;border-radius:50%;background:var(--ui-warn) var(--bd-bang) center/12px no-repeat}

/* 3-8 명령 버튼 4개: 아이콘 원 · 이름 · 설명, 아래 단차 */
.skill-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.skill-buttons button{--c:var(--ui-leaf);--c-step:var(--ui-leaf-step);--c-deep:var(--ui-leaf-deep);--c-tint:var(--ui-leaf-tint);--step-c:var(--c-step);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;align-content:center;column-gap:12px;row-gap:2px;min-width:0;min-height:76px;margin-bottom:4px;padding:12px 14px;border:3px solid var(--c);border-radius:var(--ui-r-card);background:var(--c-tint);box-shadow:0 var(--step) 0 var(--step-c);color:var(--c-deep);text-align:left}
.skill-buttons button[data-command=guard]{--c:var(--ui-sky);--c-step:var(--ui-sky-step);--c-deep:var(--ui-sky-deep);--c-tint:var(--ui-sky-tint)}
.skill-buttons button[data-command=evade]{--c:var(--ui-sun);--c-step:var(--ui-sun-step);--c-deep:var(--ui-sun-deep);--c-tint:var(--ui-sun-tint)}
.skill-buttons button[data-command=special]{--c:var(--ui-berry);--c-step:var(--ui-berry-step);--c-deep:var(--ui-berry-deep);--c-tint:var(--ui-berry-tint)}
.skill-icon{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:3px solid var(--c);color:var(--c-deep)}
.skill-icon svg{display:block;width:24px;height:24px}
.skill-buttons strong{grid-column:2;min-width:0;font-size:17px;font-weight:900;line-height:1.2;letter-spacing:-.02em;word-break:keep-all}
.skill-buttons small{grid-column:2;min-width:0;min-height:18px;font-size:13px;font-weight:700;line-height:1.35;color:var(--ui-ink-soft);word-break:keep-all;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
/* 비활성: 불투명도 1, 끈 색·평평한 단차 */
.skill-buttons button:disabled{--c:var(--ui-off-line);--step:2px;--step-c:var(--ui-off-line);background:var(--ui-off);color:var(--ui-ink-off);cursor:not-allowed}
.skill-buttons button:disabled .skill-icon{color:var(--ui-ink-off)}
/* 쉬는 중(피하기): 점선 하늘 테두리 + Z 배지 */
.skill-buttons button[data-preview=resting]{border:2px dashed var(--ui-sky);padding:13px 15px}
.skill-buttons button[data-preview=resting]::after{content:"";position:absolute;top:-10px;right:-10px;width:22px;height:22px;border-radius:50%;border:2px solid var(--ui-sky);background:var(--ui-sky-tint) var(--bd-z) center/13px no-repeat}
/* 필살기 준비: 금빛 테두리·아이콘 원 + 빛 호흡 */
.skill-buttons button.ready{border-color:var(--ui-star);--step-c:var(--ui-sun-step)}
.skill-buttons button.ready .skill-icon{background:var(--ui-star);border-color:var(--ui-star);color:var(--ui-ink-strong)}
.skill-buttons button.ready small{font-weight:900;color:var(--ui-berry-deep)}
.skill-buttons button.ready::before{content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 4px #f5b82e55;animation:ready-breath 1.6s ease-in-out infinite}
@keyframes ready-breath{50%{box-shadow:0 0 18px 6px #f5b82e66}}
/* 방어 권유(상대 별가루 가득): 주황 테두리 + 점선 링 + ! 배지 + 1.03배 호흡 */
.skill-buttons button.guard-hint{border-color:var(--ui-warn);outline:3px dashed var(--ui-warn);outline-offset:3px;animation:guard-breath 1s ease-in-out infinite}
.skill-buttons button.guard-hint::after{content:"";position:absolute;top:-10px;right:-10px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:var(--ui-warn) var(--bd-bang) center/14px no-repeat}
@keyframes guard-breath{50%{scale:1.03}}
/* 3-9 회피 미리보기: 앞 기호 + 색(data-preview) */
#evade-note::before{content:"";display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-1px;background:currentColor;-webkit-mask:var(--pv) center/contain no-repeat;mask:var(--pv) center/contain no-repeat}
[data-preview=dodge] #evade-note{color:var(--ui-leaf-deep);--pv:var(--ic-check)}
[data-preview=graze] #evade-note{color:var(--ui-sun-deep);--pv:var(--ic-graze)}
[data-preview=miss] #evade-note{color:var(--ui-warn-deep);--pv:var(--ic-warn)}
[data-preview=resting] #evade-note{--pv:var(--ic-rest)}
[data-preview=idle] #evade-note::before,.skill-buttons button:not([data-preview]) #evade-note::before{display:none}
.skill-buttons button:disabled #evade-note{color:var(--ui-ink-off)}
/* 안내 줄·그만하기 */
.battle-footnote{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;min-height:44px}
#battle-log{font-size:13px;font-weight:700;color:var(--ui-ink-soft);word-break:keep-all}
#abandon-battle{flex:none;min-height:44px;padding:0 16px;border-radius:var(--ui-r-pill);border:2px solid var(--ui-line);background:transparent;color:var(--ui-ink-soft);font-size:13px;font-weight:800;white-space:nowrap}
@media(hover:hover){#abandon-battle:hover{background:var(--ui-panel-sunk)}}

/* 3-13 결과 보드: 나무 틀(그라데이션) + 공책 종이 + 압정 + 별 스탬프 */
.battle-result{position:absolute;z-index:30;inset:0;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:28px 16px 16px;background:var(--ui-stage-dim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-align:center}
.result-board{--frame:10px;position:relative;width:min(540px,calc(100% - 32px));margin:auto;padding:30px 24px 24px;border:var(--frame) solid transparent;border-radius:26px;background:repeating-linear-gradient(transparent 0 31px,var(--ui-paper-line) 31px 33px) padding-box,linear-gradient(var(--ui-paper),var(--ui-paper)) padding-box,repeating-linear-gradient(90deg,var(--ui-wood) 0 18px,var(--ui-wood-grain) 18px 22px) border-box;box-shadow:inset 0 0 0 2px #fff,0 6px 0 var(--ui-wood-deep),var(--ui-soft-stage);color:var(--ui-ink)}
.result-board::before,.result-board::after{content:"";position:absolute;top:calc(var(--frame) / -2 - 7px);left:12px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 20%,var(--ui-leaf) 22%);box-shadow:0 2px 0 #0003}
.result-board::after{left:auto;right:12px;background:radial-gradient(circle at 35% 35%,#fff 0 20%,var(--ui-sky) 22%)}
.battle-result:not([hidden]) .result-board{animation:ui-pop var(--ui-t-pop) var(--ui-ease-out)}
#result-kicker{position:absolute;left:50%;top:calc(var(--frame) * -1);transform:translate(-50%,-50%);margin:0;padding:6px 16px;border-radius:var(--ui-r-pill);background:var(--ui-sun);box-shadow:0 3px 0 var(--ui-sun-step);color:var(--ui-ink-strong);font-size:12px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.battle-result[data-result=try] #result-kicker{background:var(--ui-sky);box-shadow:0 3px 0 var(--ui-sky-step)}
#result-title{margin:0 0 10px;font-size:30px;font-weight:900;line-height:1.2;letter-spacing:-.02em;color:var(--ui-ink-strong);word-break:keep-all}
.result-stars{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:4px 0 14px}
.result-stars:empty{display:none}
.result-stars span{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ui-sun-tint);border:3px solid var(--ui-star);color:var(--ui-star);font-size:32px;line-height:1;-webkit-text-stroke:2px var(--ui-star-deep);paint-order:stroke fill;transform:rotate(-6deg)}
.result-stars span:nth-child(even){transform:rotate(4deg)}
.result-stars span::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--ui-star);opacity:0;animation:stamp-ring 260ms 180ms ease-out forwards}
@keyframes stamp-ring{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.35);opacity:0}}
#result-copy{margin:0 auto;max-width:420px;font-size:15px;font-weight:700;line-height:1.6;color:var(--ui-ink);white-space:pre-line;word-break:keep-all}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.result-actions button{--step-c:var(--ui-sun-step);min-width:160px;min-height:52px;padding:0 24px;border:3px solid var(--ui-rim);border-radius:var(--ui-r-pill);background:linear-gradient(#ffe37a,var(--ui-sun));box-shadow:0 var(--step) 0 var(--step-c);color:var(--ui-ink-strong);font-size:17px;font-weight:900}
.result-actions button.other{--step-c:var(--ui-sky-step);background:#cfe9fb}
.result-actions button:disabled{--step:2px;--step-c:var(--ui-off-line);background:var(--ui-off);color:var(--ui-ink-off);cursor:not-allowed}

/* 541~760px: 선택 줄 가로 스크롤, 명령 2×2(아이콘 유지) */
@media(max-width:1100px){.roster-picker{flex-basis:100%}}
@media(max-width:760px){
.battle-header{align-items:stretch}
.roster-picker{flex:none;width:100%}
.roster-row{grid-template-columns:minmax(0,1fr);gap:4px}
.roster-cells{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:12px;gap:8px;padding:20px 4px 6px 12px;scrollbar-width:thin}
.roster-cell{flex:0 0 156px;min-height:68px;scroll-snap-align:start}
.battle-hud{left:14px;right:14px;gap:10px;grid-template-columns:1fr 44px 1fr}
.round-label{min-width:44px;height:24px;padding:0 6px;font-size:11px}
.battle-controls{padding:16px}
.skill-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
/* 375(540px 이하) */
@media(max-width:540px){
.battle-heading h2{font-size:21px;margin:0 10px 10px;max-width:calc(100% - 20px);padding:6px 16px}
.battle-heading h2::before,.battle-heading h2::after{width:12px;left:-13px}
.battle-heading h2::after{left:auto;right:-13px}
.roster-label{font-size:12px}
.roster-cell{grid-template-columns:44px minmax(0,1fr);column-gap:8px}
.roster-thumb{width:44px;height:44px}
.roster-name{font-size:14px}
.roster-mind{font-size:11px;height:18px;padding:0 6px}
.roster-role{font-size:11px}
.battle-hud{top:12px;left:10px;right:10px;gap:6px;grid-template-columns:1fr 44px 1fr}
.hp-card{padding:8px 10px;border-radius:16px}
.hud-top{min-height:20px;gap:4px}
.side-label{height:18px;padding:0 6px;font-size:11px}
.first-badge{height:20px;padding:0 6px;font-size:11px}
.hud-name{display:block;margin:4px 0 5px}
.hp-card strong{display:block;font-size:14px}
.hud-name span{font-size:12px;margin-top:1px}
.hud-name span::before{width:12px;height:12px}
.hp-track{height:10px}
.gauge-row{gap:4px;margin-top:6px}
.gauge-icon svg{width:14px;height:14px}
.gauge-track{height:8px}
.gauge-value{font-size:11px}
.gauge-row.full .gauge-value{position:absolute;right:0;top:50%;transform:translateY(-50%);padding:1px 6px}
.chip-row{gap:4px;margin-top:6px;min-height:20px}
.trait-chip,.state-chip{height:auto;min-height:20px;padding:2px 6px;gap:3px;border-radius:10px;font-size:11px;line-height:1.15;white-space:normal;word-break:keep-all}
.hud-center{padding-top:4px;gap:6px}
.arena-start small{font-size:12px}
#start-battle{--step:4px;min-height:52px;padding:0 28px;font-size:17px}
.battle-banner{font-size:28px;white-space:normal;width:90%}
.skill-banner strong{font-size:30px}
.skill-banner small{font-size:12px}
.arena .fx-label{font-size:26px}
.arena .fx-label.big{font-size:40px}
.arena .fx-label.blocked{font-size:18px}
.arena .fx-label.gauge{font-size:13px}
.arena .fx-label.gauge.full{font-size:14px}
.arena .fx-label.trait{font-size:15px}
.arena .fx-label.heal{font-size:18px}
.arena .fx-label.rest{font-size:14px}
.arena .fx-label.note{font-size:12px}
.battle-controls{padding:14px;border-radius:18px}
.turn-info{width:100%;min-height:56px;padding:10px 12px;gap:10px;border-radius:16px;transform-origin:calc(100% - 36px) -16px}
.turn-info::before{right:28px}
.turn-info::after{right:31px}
.turn-info p{font-size:14px}
.intent-icon{width:30px;height:30px}
.intent-icon[data-action]::before{width:17px;height:17px}
.skill-buttons{gap:8px}
.skill-buttons button{grid-template-rows:auto 1fr;align-content:start;column-gap:8px;row-gap:6px;min-height:84px;padding:10px;border-radius:14px}
.skill-buttons button[data-preview=resting]{padding:11px}
.skill-icon{grid-row:auto;width:36px;height:36px}
.skill-icon svg{width:20px;height:20px}
.skill-buttons strong{font-size:15px}
.skill-buttons small{grid-column:1/3;min-height:34px;font-size:12px;line-height:1.4}
#battle-log{font-size:12px}
.battle-result{padding:24px 10px 10px}
.result-board{--frame:8px;width:calc(100% - 20px);padding:26px 16px 16px;border-radius:20px}
#result-title{font-size:23px}
.result-stars{gap:6px}
.result-stars span{width:44px;height:44px;font-size:26px}
#result-copy{font-size:14px}
.result-actions button{flex:1 1 120px;min-width:0;min-height:48px;padding:0 14px;font-size:15px}
}
/* 움직임 줄이기(4장): 이동·크기 변화·반복을 끄고 불투명도(120ms 이하)·색·링·배지만 */
@media(prefers-reduced-motion:reduce){.arena *,.raster-pet,.skill-buttons button,.skill-buttons button::before,.result-stars span::after,.roster-tag,.turn-info,.trait-chip{animation:none!important}
.hp-track i,.gauge-track i,.battle-hud{transition:none}
.sleep-tint{transition:none}
.roster-cell,.skill-buttons button,#start-battle,.result-actions button,.battle-mute{transition:box-shadow var(--ui-t-press),background-color var(--ui-t-press)}
.roster-cell:not(:disabled):is(:hover,:active),.skill-buttons button:not(:disabled):is(:hover,:active),#start-battle:not(:disabled):is(:hover,:active),.result-actions button:not(:disabled):is(:hover,:active),.battle-mute:active{transform:none}
.roster-cell:not(:disabled):hover,.skill-buttons button:not(:disabled):hover,#start-battle:not(:disabled):hover,.result-actions button:not(:disabled):hover{--step:var(--ui-step)}
.skill-buttons button.ready::before{box-shadow:0 0 0 4px #f5b82e66}
.arena:not(.intro) .hp-card,.arena .battle-result:not([hidden]) .result-board,#battle-view .roster-tag{animation:ui-fade 120ms ease-out!important}
.turn-info:has(#intent-icon[data-action=attack]:not([hidden])){animation:fade-a 120ms ease-out!important}.turn-info:has(#intent-icon[data-action=guard]:not([hidden])){animation:fade-g 120ms ease-out!important}.turn-info:has(#intent-icon[data-action=evade]:not([hidden])){animation:fade-e 120ms ease-out!important}.turn-info:has(#intent-icon[data-action=special]:not([hidden])){animation:fade-s 120ms ease-out!important}
}
@keyframes fade-a{from{opacity:0}}@keyframes fade-g{from{opacity:0}}@keyframes fade-e{from{opacity:0}}@keyframes fade-s{from{opacity:0}}

/* 공통 기술 비교 링크의 무대. 본편 기본 레이아웃에는 적용하지 않는다. */
.fx-review-mode{margin:0;padding:0;min-height:0}.fx-review-mode .app-shell{margin:0;padding:0;max-width:none}.fx-review-mode .topbar,.fx-review-mode .intro,.fx-review-mode .mode-nav,.fx-review-mode .battle-header,.fx-review-mode .battle-controls,.fx-review-mode footer,.fx-review-mode .battle-hud,.fx-review-mode .battle-banner{display:none}.fx-review-mode .dashboard{display:block;padding:0;margin:0}.fx-review-mode .arena{height:420px;border:0;border-radius:0;margin:0;box-shadow:none}.fx-review-mode .fighter{width:240px;height:240px;max-width:none;top:calc(75% - 211.2px);bottom:auto;transform:translateX(-50%)}.fx-review-mode .fighter-player{left:25%}.fx-review-mode .fighter-enemy{left:75%;right:auto}.fx-review-mode .fighter-sprite{animation:none!important}.fx-review-mode .arena-platform{display:none}
/* 되찾기 배틀: 규칙 모듈이 준 사다리 상태를 그대로 표시 */
.battle-mode-picker{display:flex;gap:12px;margin:12px 0 24px}.battle-mode-picker button{flex:1;min-height:64px;padding:12px;border:2px solid var(--ui-line);border-radius:16px;background:var(--ui-panel);color:var(--ui-ink-strong);font-size:17px;font-weight:900;box-shadow:0 4px 0 var(--ui-step-color)}.battle-mode-picker button small{display:block;font-size:12px;font-weight:700;margin-top:5px}.battle-mode-picker button[aria-pressed=true]{background:var(--ui-mine-tint);border-color:var(--ui-mine-edge)}.battle-mode-picker button:disabled{opacity:.65;cursor:not-allowed}
.recover-picker{border:2px solid var(--ui-line);border-radius:20px;padding:18px;background:#f8f1de}.recover-heading{display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:space-between}.recover-heading h3{margin:0;font-size:19px}.recover-heading span{font-size:13px;font-weight:800;color:#46566a}.recover-ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}.recover-ladder .roster-cell{padding-top:28px}.ladder-mark{position:absolute;top:3px;left:10px;color:#946414;font-weight:900}.recover-ladder [data-locked=true] .roster-thumb img{filter:brightness(0);opacity:.6}.recover-ladder [data-locked=true]{background:#e0e2e6;border-style:dashed;opacity:1}.recover-ladder [data-step-state=cleared]{border-color:#a9b867}.recover-picker h4{margin:16px 0 0;font-size:14px}.recover-picker h4 small{display:block;margin-top:5px;font-weight:600;color:#53606f}#recover-notice{font-size:14px;color:#446234;font-weight:800;margin:12px 0 0}#recover-notice:empty{display:none}
.gnul-tier{flex:none;font-size:11px;line-height:1.3;border-radius:12px;padding:3px 7px;background:#d9edce;color:#2f5127;white-space:nowrap}.gnul-tier[data-tier=대장]{background:#eadcf8;color:#653588}.gnul-tier[data-tier=보스]{background:#25283a;color:#ffe48a;border:1px solid #d5af59}.gnul-signature{display:flex;gap:7px;align-items:center;margin:9px 0;font-size:11px;font-weight:800;color:#545a66}.gnul-signature i{width:12px;height:12px;border-radius:50%;background:var(--signature);box-shadow:0 0 9px 3px color-mix(in srgb,var(--signature) 50%,transparent)}.gnul-signature[hidden],.gauge-row[hidden],.recover-picker[hidden],#practice-picker[hidden],.gnul-tier[hidden]{display:none!important}.arena[data-mode=recover]{--arena-bg:#26364b;background-color:var(--arena-bg)}
@media(max-width:600px){.battle-mode-picker{gap:8px}.battle-mode-picker button{font-size:15px;padding:10px 6px}.battle-mode-picker button small{font-size:10px}.recover-picker{padding:12px}.recover-ladder{gap:8px}.recover-ladder .roster-cell{display:flex;flex-direction:column;text-align:center;padding:26px 4px 8px;gap:5px}.recover-ladder .roster-thumb{width:48px;height:48px}.recover-ladder .roster-name{font-size:12px;max-width:100%}.recover-ladder .roster-role{white-space:normal;font-size:10px}.recover-ladder .roster-mind{font-size:10px;padding:0 3px}.gnul-tier{font-size:9px;padding:2px 4px}.enemy-hud .hud-name{flex-wrap:wrap;gap:4px}.gnul-signature{font-size:9px}}
@media(prefers-reduced-motion:reduce){.battle-mode-picker button{transition:none}.gnul-signature i{animation:none}}
.fx-review-mode .battle-mode-picker,.fx-review-mode .mode-support{display:none}
.arena[data-ending=calm] .gnul-signature{color:#576d40}.arena[data-ending=calm] .gnul-signature i{background:#fff3b0;box-shadow:0 0 12px 3px #ffe8aa}
.roster-picker{grid-template-columns:minmax(0,1fr)}.recover-picker{min-width:0}

.recover-balance{margin:0 2px 12px;font-size:12px;line-height:1.6;color:#52694e}