/* 격투 대전(fighter) PC 배치와 공통 모양. 모바일 배치는 game-shell.css의 fighter 구역이 덮어쓴다.
   경기장 그림은 fighter.js가 캔버스에 그리고, 여기서는 HUD(체력·히트 게이지·분노·시간), 캐릭터 선택, 조작 버튼만 꾸민다. 색은 theme.css 토큰을 쓴다. */
#fighter-play-area{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px;width:100%;min-width:0;min-height:0}
#fighter-play-area[hidden]{display:none!important}
.fighter-active #fighter-play-area{flex:1 1 auto;align-self:stretch}
.fighter-active #game{width:100%;min-width:0;min-height:0}
.fighter-active .panel.grow{max-width:none}
.fighter-active #game>.game-head :is(#timer,#scores){display:none}
.fighter-active #game>.game-head{justify-content:flex-end}

/* HUD: [1P 이름·캐릭터·라운드 / 체력 / 히트] [시간] [2P …] */
.fighter-hud{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;min-width:0;padding:10px 14px;border:1px solid var(--hair-2);border-radius:14px;background:var(--ink-1)}
.fighter-side{display:grid;gap:5px;min-width:0;--fighter-hp:100%;--fighter-heat:0%}
.fighter-side[data-seat="1"]{direction:rtl}
.fighter-side[data-seat="1"] .fighter-name>*{direction:ltr}
.fighter-name{display:flex;align-items:center;gap:8px;min-width:0}
.fighter-name em{flex:0 0 auto;padding:1px 6px;border-radius:5px;background:var(--fighter-color);color:var(--ink-0);font:900 11px/1.4 Inter,system-ui,sans-serif;font-style:normal}
.fighter-name b{min-width:0;overflow:hidden;color:var(--text-1);font-size:15px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.fighter-char{flex:0 1 auto;min-width:0;overflow:hidden;color:var(--text-2);font-size:12px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.fighter-rage{display:none;flex:0 0 auto;padding:1px 6px;border-radius:5px;background:var(--red);color:#fff;font:900 11px/1.4 Inter,system-ui,sans-serif;letter-spacing:.06em;animation:fighter-rage .7s ease-in-out infinite alternate}
.fighter-side.rage .fighter-rage{display:inline-block}
@keyframes fighter-rage{from{box-shadow:0 0 0 #ff5c7200;transform:scale(1)}to{box-shadow:0 0 14px #ff5c72cc;transform:scale(1.08)}}
.fighter-pips{display:flex;flex:0 0 auto;gap:4px;margin-inline-start:auto}
.fighter-pips i{display:block;width:12px;height:12px;border:2px solid var(--gold);border-radius:3px;background:transparent;transform:rotate(45deg)}
.fighter-pips i.won{background:var(--gold);box-shadow:0 0 10px #ffcf5a99}
.fighter-hp{position:relative;height:18px;overflow:hidden;border:1px solid #ffffff2e;border-radius:4px;background:#0a0a0e;box-shadow:inset 0 2px 6px #000a;transform:skewX(-12deg)}
.fighter-side[data-seat="1"] .fighter-hp{transform:skewX(12deg)}
.fighter-hp i{position:absolute;top:0;bottom:0;inset-inline-start:0;width:var(--fighter-hp)}
/* 지연 막대: 깎인 만큼 흰 띠가 잠깐 남았다가 따라 줄어든다. */
.fighter-hp .trail{background:#fff5e8;transition:width .5s cubic-bezier(.4,0,.2,1) .32s}
.fighter-hp .fill{background:linear-gradient(180deg,#fff7 0,#fff0 45%),linear-gradient(90deg,var(--fighter-color),color-mix(in srgb,var(--fighter-color) 70%,#fff));transition:width .08s linear}
.fighter-side.low .fighter-hp .fill{background:linear-gradient(180deg,#fff7 0,#fff0 45%),var(--red);animation:fighter-low .6s steps(2) infinite}
@keyframes fighter-low{50%{filter:brightness(1.5)}}
/* 히트 게이지: 차면 빛이 지나가고, 히트 상태에서는 남은 시간만큼 줄어든다. */
.fighter-heat{position:relative;display:flex;align-items:center;gap:8px;height:14px}
.fighter-heat i{position:relative;flex:0 1 64%;height:8px;overflow:hidden;border-radius:4px;background:#ffffff14}
.fighter-heat i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--fighter-heat);border-radius:inherit;background:linear-gradient(90deg,#ff8a3d,var(--gold));transition:width .15s}
.fighter-side[data-seat="1"] .fighter-heat i::after{inset:0 0 0 auto}
.fighter-heat i::before{content:"";position:absolute;z-index:1;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(90deg,#fff0,#fffc,#fff0);opacity:0}
.fighter-side.heat-full .fighter-heat i::before{opacity:1;animation:fighter-shine 1.1s linear infinite}
.fighter-side.heat-full .fighter-heat i,.fighter-side.heat-on .fighter-heat i{box-shadow:0 0 12px #ff9a3dcc}
@keyframes fighter-shine{to{left:110%}}
.fighter-heat span{flex:0 0 auto;color:var(--text-3);font:800 11px/1 Inter,"Pretendard Variable",Pretendard,system-ui,sans-serif;direction:ltr}
.fighter-side.heat-full .fighter-heat span,.fighter-side.heat-on .fighter-heat span{color:var(--gold)}
.fighter-clock{display:grid;justify-items:center;min-width:68px;padding:2px 8px;border:1px solid var(--hair-2);border-radius:10px;background:var(--ink-2)}
.fighter-clock b{color:var(--text-1);font:900 30px/1.05 Inter,ui-monospace,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.fighter-clock small{color:var(--text-2);font:800 11px/1.3 Inter,system-ui,sans-serif;letter-spacing:.06em;white-space:nowrap}
.fighter-clock.urgent b{color:var(--red);animation:fighter-low .5s steps(2) infinite}

.fighter-stage{position:relative;min-width:0;min-height:300px;overflow:hidden;border:1px solid var(--hair-2);border-radius:14px;background:var(--ink-0);touch-action:none}
#fighter-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0}
.fighter-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fighter-watch-badge{position:absolute;top:10px;left:50%;padding:4px 12px;border:1px solid var(--hair-2);border-radius:999px;background:color-mix(in srgb,var(--ink-0) 82%,transparent);color:var(--text-2);font-size:12px;font-weight:800;transform:translateX(-50%);pointer-events:none}
.fighter-watch-badge[hidden]{display:none}

.fighter-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:0;color:var(--text-2);font-size:12px}
.fighter-keys kbd{display:inline-block;min-width:20px;margin:0 2px;padding:1px 5px;border:1px solid var(--hair-2);border-bottom-width:2px;border-radius:5px;background:var(--ink-3);color:var(--text-1);font:800 11px/1.5 Inter,ui-monospace,system-ui,sans-serif;text-align:center}
.fighter-touch .fighter-keys,#fighter-play-area.fighter-spectating .fighter-keys{display:none}
.fighter-pad{display:none}
.fighter-touch .fighter-pad{display:flex}
#fighter-play-area.fighter-spectating .fighter-pad{display:none!important}

/* 터치 조작: 왼쪽 방향 패드, 오른쪽 3×2 버튼(위 줄 히트·필살·분노, 아래 줄 막기·펀치·킥) */
.fighter-pad{align-items:flex-end;justify-content:space-between;gap:12px;padding:4px 6px;--fighter-dir:52px;--fighter-btn:58px}
.fighter-dpad{position:relative;display:grid;grid-template-columns:repeat(3,var(--fighter-dir));grid-template-rows:repeat(3,var(--fighter-dir));flex:0 0 auto;border-radius:50%;background:radial-gradient(circle,#ffffff10 0,#ffffff06 60%,transparent 72%);touch-action:none;-webkit-user-select:none;user-select:none}
.fighter-dpad span{display:grid;place-items:center;border:1px solid var(--hair-2);border-radius:12px;background:var(--ink-3);color:var(--text-2);font-size:18px;pointer-events:none;transition:background .06s,transform .06s}
.fighter-dpad .up{grid-area:1/2}.fighter-dpad .left{grid-area:2/1}.fighter-dpad .right{grid-area:2/3}.fighter-dpad .down{grid-area:3/2}
.fighter-dpad>i{grid-area:2/2;place-self:center;width:46%;height:46%;border-radius:50%;background:var(--ink-2);pointer-events:none}
.fighter-dpad span.pressed{background:var(--violet);color:#fff;transform:scale(.94)}
.fighter-actions{display:grid;grid-template-columns:repeat(3,var(--fighter-btn));grid-template-rows:max(44px,calc(var(--fighter-btn)*.8)) var(--fighter-btn);gap:8px;flex:0 0 auto}
.fighter-btn{display:grid;place-content:center;gap:1px;min-width:0;min-height:0;margin:0;padding:0;border:1px solid var(--hair-2);border-radius:50%;background:var(--ink-3);color:var(--text-1);touch-action:none;-webkit-user-select:none;user-select:none;transition:transform .05s,background .05s,opacity .15s}
.fighter-btn b{font-size:15px;font-weight:900;line-height:1.1}
.fighter-btn small{color:var(--text-3);font-size:11px;font-weight:800}
.fighter-btn.punch{border-color:#ff5c7280;box-shadow:inset 0 0 0 2px #ff5c7240}
.fighter-btn.kick{border-color:#ffcf5a80;box-shadow:inset 0 0 0 2px #ffcf5a40}
.fighter-btn.guard{border-color:#3fc8ff80}
.fighter-btn.special{border-color:var(--violet);background:#7c6cff24}
/* 게이지 버튼은 쓸 수 있을 때만 밝아진다(눌러도 서버가 조건을 다시 확인한다). */
.fighter-btn.heat,.fighter-btn.super{border-radius:14px;opacity:.5}
.heat-ready .fighter-btn.heat{opacity:1;border-color:var(--gold);background:#ffcf5a33;box-shadow:0 0 16px #ffb02e99;animation:fighter-rage .8s ease-in-out infinite alternate}
.heat-on .fighter-btn.special{border-color:var(--gold);background:#ff9a3d40;box-shadow:0 0 18px #ff9a3dcc}
.rage-ready .fighter-btn.super{opacity:1;border-color:var(--red);background:#ff5c7240;box-shadow:0 0 16px #ff5c72aa;animation:fighter-rage .7s ease-in-out infinite alternate}
.fighter-btn.pressed{background:var(--violet);color:#fff;transform:scale(.92)}
.fighter-btn.punch.pressed{background:var(--red)}
.fighter-touch .fighter-btn small{display:none}

/* 캐릭터 선택: 경기장 자리를 덮는다. [제목·시간] / 6장 카드 / [두 사람의 선택 · 무작위 · 확정] */
.fighter-select{position:absolute;z-index:6;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:12px;border-radius:14px;background:radial-gradient(120% 70% at 50% 0,#7c6cff26,transparent 60%),var(--ink-0)}
.fighter-select[hidden]{display:none}
.fighter-select-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fighter-select-head b{color:var(--text-1);font-size:18px;font-weight:900}
.fighter-select-timer{padding:4px 12px;border:1px solid var(--hair-2);border-radius:999px;background:var(--ink-2);color:var(--text-2);font-size:13px;font-weight:800}
.fighter-select-timer i{color:var(--text-1);font-style:normal;font-variant-numeric:tabular-nums}
.fighter-select-timer.urgent{border-color:var(--red);color:var(--red)}
.fighter-select-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px;min-height:0}
.fighter-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;gap:10px;min-width:0;min-height:0;margin:0;padding:8px;overflow:hidden;border:1px solid var(--hair-2);border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--card-dark) 40%,transparent),var(--ink-1) 70%);color:var(--text-1);text-align:left;cursor:pointer;transition:transform .08s,border-color .08s}
.fighter-card canvas{align-self:center;width:clamp(56px,9vw,112px);height:auto;aspect-ratio:1;border-radius:10px;background:var(--ink-2)}
/* PC·세로 화면: 초상을 위에 크게, 설명을 아래에 둔다(모바일 가로 화면은 game-shell.css에서 옆으로 놓는다). */
.fighter-card{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.fighter-card canvas{justify-self:center;width:auto;height:100%;max-width:100%;min-height:0}
.fighter-card[aria-selected="true"]{border-color:var(--violet);box-shadow:0 0 0 2px var(--violet),0 10px 30px #7c6cff40}
.fighter-card.p1{box-shadow:inset 4px 0 0 #ff5c72}
.fighter-card.p2{box-shadow:inset -4px 0 0 #3fc8ff}
.fighter-card.p1.p2{box-shadow:inset 4px 0 0 #ff5c72,inset -4px 0 0 #3fc8ff}
.fighter-card[aria-selected="true"].p1{box-shadow:0 0 0 2px var(--violet),inset 4px 0 0 #ff5c72}
.fighter-card[aria-selected="true"].p2{box-shadow:0 0 0 2px var(--violet),inset -4px 0 0 #3fc8ff}
.fighter-card:disabled{cursor:default;opacity:1}
.fighter-card:not(:disabled):active{transform:scale(.98)}
.fighter-card-copy{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.fighter-card-title{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0}
.fighter-card-title b{min-width:0;overflow:hidden;font-size:15px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.fighter-stars{flex:0 0 auto;color:var(--gold);font-size:11px;letter-spacing:-.05em}
.fighter-stars i{color:#ffffff26;font-style:normal}
.fighter-stars i.on{color:var(--gold)}
.fighter-card em{color:var(--card-color);font-size:12px;font-style:normal;font-weight:800;filter:brightness(1.3)}
.fighter-stats{display:grid;gap:3px}
.fighter-stats>span{display:grid;grid-template-columns:2.6em minmax(0,1fr);align-items:center;gap:6px}
.fighter-stats small{color:var(--text-3);font-size:11px;line-height:1.1}
.fighter-stats i{position:relative;display:block;height:5px;overflow:hidden;border-radius:3px;background:#ffffff14}
.fighter-stats i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:var(--violet-hi)}
.fighter-style{overflow:hidden;color:var(--text-2);font-size:11px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.fighter-finisher{overflow:hidden;color:var(--gold);font-size:11px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.fighter-select-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.fighter-picks{display:flex;gap:8px;min-width:0}
.fighter-pick{display:flex;align-items:center;gap:6px;min-width:0;padding:6px 10px;border:1px solid var(--hair-2);border-radius:10px;background:var(--ink-2);font-size:12px}
.fighter-pick em{padding:0 5px;border-radius:4px;background:#ff5c72;color:var(--ink-0);font-style:normal;font-weight:900}
.fighter-pick[data-seat="1"] em{background:#3fc8ff}
.fighter-pick b{min-width:0;overflow:hidden;color:var(--text-1);text-overflow:ellipsis;white-space:nowrap}
.fighter-pick i{color:var(--text-3);font-style:normal;font-weight:800;white-space:nowrap}
.fighter-pick.locked{border-color:var(--signal)}
.fighter-pick.locked i{color:var(--signal)}
.fighter-select-actions{display:flex;flex:0 0 auto;gap:8px}
.fighter-select-actions button{min-height:44px;padding:0 16px;font-weight:900}
.fighter-select-actions button[hidden]{display:none}
.fighter-selecting .fighter-pad,.fighter-selecting .fighter-keys{visibility:hidden}