/* ── arena.css ────────────────────────────────────────────────────────────────
 * Critical Encounter Arena: #cr-overlay, #cr-panel, combatant cards, HP/RAD
 * bars, round log, action flow, keyframe animations, and responsive overrides.
 * ─────────────────────────────────────────────────────────────────────────── */
#cr-overlay {
  --attacker: #c0440a; --defender: #7b9fc4;
  --avatar-size: clamp(36px,5.5vmin,72px);
  --bar-h: clamp(3px,0.45vmin,6px);
  --action-icon-sz: clamp(44px,6.4vmin,96px);
  --flow-duration: 1.1s;
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:stretch; justify-content:center;
  background:rgba(0,0,0,0.72);
}
#cr-panel {
  position:relative; width:100%; max-width:960px;
  display:flex; flex-direction:column; overflow:hidden;
  background:rgba(8,8,6,0.97);
  border-left:1px solid var(--border); border-right:1px solid var(--border);
}
#cr-bg { position:absolute; inset:0; background:center/cover no-repeat; filter:brightness(0.12) saturate(0.3) sepia(0.5); z-index:0; }
#cr-panel > * { position:relative; z-index:1; }
#cr-header { display:flex; align-items:center; justify-content:space-between; padding:10px 16px 8px; border-bottom:1px solid var(--border); background:rgba(0,0,0,0.55); flex-shrink:0; }
#cr-title { font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:4px; color:var(--text-dim); }
#cr-ruin-name { font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:3px; color:var(--text); font-weight:600; }
#cr-ruin-type { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; color:var(--text-dim); margin-top:1px; }
#cr-log-btn { background:none; border:1px solid rgba(232,137,12,0.4); color:var(--amber); font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; padding:6px 10px; cursor:pointer; transition:color 0.15s,border-color 0.15s,background 0.15s; }
#cr-log-btn:hover { background:rgba(232,137,12,0.08); border-color:var(--amber); }
#cr-close-btn { background:none; border:1px solid var(--border); color:var(--text-dim); font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; padding:6px 10px; cursor:pointer; transition:color 0.15s,border-color 0.15s; }
#cr-close-btn:hover { color:var(--text); border-color:var(--text-mid); }
#cr-round-bar { display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 16px 10px; border-bottom:1px solid rgba(58,50,32,0.5); background:rgba(0,0,0,0.35); flex-shrink:0; }
#cr-names-row { display:flex; align-items:center; gap:14px; }
.cr-combatant-label { font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:2px; font-weight:600; }
.cr-combatant-label.attacker { color:var(--attacker); }
.cr-combatant-label.defender { color:var(--defender); }
#cr-vs { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; color:var(--text-dim); }
#cr-round-pill { font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:3px; color:var(--amber); border:1px solid rgba(232,137,12,0.4); padding:2px 14px; min-width:80px; text-align:center; }
#cr-arena { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; flex:1; min-height:0; overflow:hidden; }
.cr-side { display:flex; flex-direction:column; gap:8px; padding:10px; overflow:hidden; border-right:1px solid rgba(58,50,32,0.4); }
.cr-side:last-child { border-right:none; border-left:1px solid rgba(58,50,32,0.4); }
.cr-recruit { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-start; padding:8px; background:rgba(0,0,0,0.45); border:1px solid rgba(58,50,32,0.6); transition:border-color 0.15s,box-shadow 0.15s; position:relative; overflow:hidden; }
.cr-recruit .cr-recruit-inner { display:flex; gap:8px; align-items:flex-start; }
.cr-portrait-wrap { position:relative; flex-shrink:0; }
.cr-portrait-wrap img, .cr-portrait-wrap .cr-avatar-icon { width:var(--avatar-size); height:var(--avatar-size); border-radius:2px; object-fit:cover; display:block; }
.cr-portrait-wrap .cr-avatar-icon { background:rgba(58,50,32,0.4); display:flex; align-items:center; justify-content:center; font-size:24px; }
.cr-recruit.dead { opacity:0.38; filter:grayscale(1); }
.cr-recruit-info { flex:1; min-width:0; }
.cr-recruit-name { font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:1.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.cr-recruit-class { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; color:var(--text-dim); margin-top:2px; }
.cr-recruit-hp-label { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:1px; color:var(--text-mid); margin-top:4px; }
.cr-hp-bar-track { width:100%; height:var(--bar-h); background:rgba(255,255,255,0.08); border-radius:1px; overflow:hidden; margin-top:4px; }
.cr-hp-bar-fill { height:100%; border-radius:1px; background:var(--danger); transition:width 0.4s ease,background 0.3s; }
.cr-hp-bar-fill.low { background:var(--danger)!important; animation:cr-hp-pulse 1.2s ease-in-out infinite; }
@keyframes cr-hp-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.cr-rad-bar-track { width:100%; height:var(--bar-h); background:rgba(255,255,255,0.08); border-radius:1px; overflow:hidden; margin-top:3px; }
.cr-rad-bar-fill { height:100%; background:var(--rad); border-radius:1px; transition:width 0.4s ease; }
@keyframes cr-hit-flash { 0%{box-shadow:inset 0 0 0 2px var(--danger);background:rgba(232,50,50,0.2)} 60%{box-shadow:inset 0 0 0 2px var(--danger);background:rgba(232,50,50,0.1)} 100%{box-shadow:none;background:rgba(0,0,0,0.45)} }
@keyframes cr-crit-flash { 0%{box-shadow:inset 0 0 0 2px var(--amber);background:rgba(232,137,12,0.25)} 60%{box-shadow:inset 0 0 0 2px var(--amber);background:rgba(232,137,12,0.1)} 100%{box-shadow:none;background:rgba(0,0,0,0.45)} }
@keyframes cr-heal-flash { 0%{box-shadow:inset 0 0 0 2px var(--rad);background:rgba(74,222,68,0.2)} 60%{box-shadow:inset 0 0 0 2px var(--rad);background:rgba(74,222,68,0.1)} 100%{box-shadow:none;background:rgba(0,0,0,0.45)} }
.cr-recruit.flash-hit  { animation:cr-hit-flash  0.55s ease-out forwards; }
.cr-recruit.flash-crit { animation:cr-crit-flash 0.65s ease-out forwards; }
.cr-recruit.flash-heal { animation:cr-heal-flash 0.55s ease-out forwards; }
.cr-recruit.active-actor { border-color:rgba(232,137,12,0.55); box-shadow:0 0 10px rgba(232,137,12,0.15); }
.cr-lock-on { display:none; position:absolute; top:5px; right:7px; font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:2px; color:var(--amber); pointer-events:none; }
.cr-action-block { position:absolute; bottom:6px; right:6px; display:flex; flex-direction:column; align-items:center; gap:3px; pointer-events:none; }
.cr-action-icon { width:var(--action-icon-sz); height:var(--action-icon-sz); opacity:0.22; transition:opacity 0.2s; }
.cr-action-icon img { width:100%; height:100%; object-fit:contain; display:block; border-radius:2px; }
@keyframes cr-icon-pulse { 0%,100%{opacity:0.88} 50%{opacity:0.55} }
.cr-recruit.active-actor .cr-action-icon { animation:cr-icon-pulse 0.9s ease-in-out infinite; }
@keyframes cr-lockon-blink { 0%,100%{opacity:1} 50%{opacity:0.35} }
.cr-recruit.active-actor .cr-lock-on { display:block; animation:cr-lockon-blink 0.9s ease-in-out infinite; }
.cr-brackets { position:absolute; inset:4px; pointer-events:none; display:none; }
.cr-recruit.targeted .cr-brackets { display:block; }
.cr-brackets span { position:absolute; width:9px; height:9px; border-color:var(--danger); border-style:solid; opacity:0.85; }
@keyframes cr-bracket-draw { from{width:0;height:0;opacity:0} to{width:9px;height:9px;opacity:0.85} }
.cr-recruit.targeted .cr-brackets span { animation:cr-bracket-draw 0.18s ease-out forwards; }
.cr-brackets .tl { top:0;    left:0;  border-width:2px 0 0 2px; }
.cr-brackets .tr { top:0;    right:0; border-width:2px 2px 0 0; }
.cr-brackets .bl { bottom:0; left:0;  border-width:0 0 2px 2px; }
.cr-brackets .br { bottom:0; right:0; border-width:0 2px 2px 0; }
@keyframes cr-target-pulse { 0%,100%{border-color:rgba(232,50,50,0.45)} 50%{border-color:rgba(232,50,50,0.15)} }
.cr-recruit.targeted { animation:cr-target-pulse 1.1s ease-in-out infinite; }
.cr-dmg-float { position:absolute; top:6px; right:8px; font-family:'Oswald',sans-serif; font-size:20px; font-weight:700; pointer-events:none; animation:cr-dmg-rise 0.9s ease-out forwards; z-index:10; }
.cr-dmg-float.damage { color:var(--danger); }
.cr-dmg-float.crit   { color:var(--amber); font-size:24px; }
.cr-dmg-float.heal   { color:var(--rad); }
@keyframes cr-dmg-rise { 0%{opacity:1;transform:translateY(0)} 70%{opacity:1;transform:translateY(-18px)} 100%{opacity:0;transform:translateY(-26px)} }
#cr-log { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px 10px; gap:10px; overflow:hidden; border-left:1px solid rgba(58,50,32,0.3); border-right:1px solid rgba(58,50,32,0.3); }
#cr-action-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; width:100%; }
#cr-flow { display:flex; align-items:center; gap:0; width:100%; font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:1.5px; line-height:1; }
#cr-flow-actor { flex-shrink:0; max-width:38%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:3px 6px; border:1px solid rgba(232,137,12,0.3); color:var(--amber); }
#cr-flow-line { flex:1; height:1px; position:relative; overflow:visible; color:var(--text-dim); }
#cr-flow-line::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:repeating-linear-gradient(90deg,currentColor 0,currentColor 4px,transparent 4px,transparent 8px); opacity:0.35; }
#cr-flow-line::after { content:""; position:absolute; top:-3px; left:0; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); animation:cr-flow-travel var(--flow-duration,1.1s) linear infinite; }
@keyframes cr-flow-travel { from{left:0%;opacity:1} 80%{opacity:1} to{left:100%;opacity:0} }
#cr-flow-target { flex-shrink:0; max-width:38%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:3px 6px; border:1px solid rgba(232,50,50,0.3); color:var(--danger); }
#cr-action-verb { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2.5px; color:var(--text-dim); line-height:1.6; }
#cr-action-damage { font-family:'Oswald',sans-serif; font-size:28px; font-weight:700; letter-spacing:1px; color:var(--danger); min-height:36px; display:flex; align-items:center; justify-content:center; transition:color 0.2s; }
#cr-action-note { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:3px; color:var(--amber); min-height:14px; }
#cr-reactive-wrap { width:100%; border-top:1px solid rgba(58,50,32,0.5); padding-top:8px; display:none; flex-direction:column; align-items:center; gap:4px; text-align:center; }
#cr-reactive-wrap.visible { display:flex; }
#cr-reactive-label { font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:3px; color:var(--text-dim); }
#cr-reactive-text { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--text-mid); line-height:1.5; }
#cr-log-modal { display:none; position:absolute; inset:0; z-index:30; background:rgba(4,4,3,0.97); flex-direction:column; overflow:hidden; animation:cr-log-slide-in 0.18s ease-out; }
#cr-log-modal.open { display:flex; }
@keyframes cr-log-slide-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
#cr-log-modal-header { display:flex; align-items:baseline; justify-content:space-between; padding:12px 16px 10px; border-bottom:1px solid var(--border); flex-shrink:0; gap:12px; }
#cr-log-modal-title { font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:4px; color:var(--text-dim); }
#cr-log-modal-matchup { font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:2px; color:var(--text); font-weight:600; }
#cr-log-modal-close { background:none; border:1px solid var(--border); color:var(--text-dim); font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; padding:5px 10px; cursor:pointer; flex-shrink:0; transition:color 0.15s,border-color 0.15s; }
#cr-log-modal-close:hover { color:var(--text); border-color:var(--text-mid); }
#cr-log-modal-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:20px; }
#cr-log-timestamp { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; color:var(--text-dim); }
.cr-log-round { display:flex; flex-direction:column; gap:0; }
.cr-log-round-heading { font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:3px; color:var(--amber); padding-bottom:6px; border-bottom:1px solid rgba(58,50,32,0.5); margin-bottom:8px; }
.cr-log-line { font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:1px; color:var(--text-mid); line-height:1.9; padding-left:4px; }
.cr-log-line .actor { color:var(--text); }
.cr-log-line .dmg   { color:var(--danger); }
.cr-log-line .heal  { color:var(--rad); }
.cr-log-line .crit  { color:var(--amber); }
.cr-log-line .death { color:var(--danger); font-style:italic; }
.cr-log-line .react { color:var(--text-dim); padding-left:16px; display:block; }
.cr-log-result { display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--border); padding-top:16px; }
.cr-log-result-heading { font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:3px; color:var(--text-dim); margin-bottom:4px; }
.cr-log-result-text { font-family:'Oswald',sans-serif; font-size:16px; letter-spacing:3px; font-weight:700; }
.cr-log-result-sub { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--text-mid); }
#cr-footer { display:flex; align-items:center; padding:8px 16px; border-top:1px solid var(--border); background:rgba(0,0,0,0.55); flex-shrink:0; gap:14px; }
#cr-progress-track { flex:1; height:2px; background:rgba(255,255,255,0.06); border-radius:1px; overflow:hidden; }
#cr-progress-fill { height:100%; background:var(--amber); width:0%; transition:width 0.3s linear; border-radius:1px; }
#cr-speed-wrap { display:flex; align-items:center; gap:7px; flex-shrink:0; }
#cr-speed-label { font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:2px; color:var(--text-dim); white-space:nowrap; }
#cr-speed-value { font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:1px; color:var(--amber); min-width:26px; text-align:right; }
#cr-speed-slider { -webkit-appearance:none; appearance:none; width:72px; height:2px; background:rgba(255,255,255,0.1); outline:none; cursor:pointer; }
#cr-speed-slider::-webkit-slider-thumb { -webkit-appearance:none; width:10px; height:10px; background:var(--amber); border-radius:0; cursor:pointer; }
#cr-speed-slider::-moz-range-thumb { width:10px; height:10px; background:var(--amber); border:none; border-radius:0; cursor:pointer; }
#cr-skip-btn { background:none; border:1px solid var(--border); color:var(--text-dim); font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:2px; padding:6px 14px; cursor:pointer; flex-shrink:0; transition:color 0.15s,border-color 0.15s; }
#cr-skip-btn:hover { color:var(--text); border-color:var(--text-mid); }
#cr-outcome-banner { display:none; position:absolute; inset:0; z-index:20; align-items:center; justify-content:center; background:rgba(0,0,0,0.82); flex-direction:column; gap:16px; text-align:center; padding:24px; animation:cr-banner-in 0.4s ease-out; }
#cr-outcome-banner.visible { display:flex; }
@keyframes cr-banner-in { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
#cr-outcome-glyph { width:80px; height:80px; object-fit:contain; opacity:0.88; }
#cr-outcome-text { font-family:'Oswald',sans-serif; font-size:28px; letter-spacing:5px; font-weight:700; }
#cr-outcome-sub { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:3px; color:var(--text-mid); }
#cr-outcome-buttons { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:8px; width:100%; max-width:220px; }
#cr-outcome-close { width:100%; background:none; border:1px solid var(--amber); color:var(--amber); font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:3px; padding:10px 24px; cursor:pointer; transition:background 0.15s; }
#cr-outcome-close:hover { background:rgba(232,137,12,0.1); }
#cr-outcome-log-btn { width:100%; background:none; border:1px solid var(--border); color:var(--text-dim); font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:3px; padding:8px 24px; cursor:pointer; transition:color 0.15s,border-color 0.15s; }
#cr-outcome-log-btn:hover { color:var(--text); border-color:var(--text-mid); }
@media (max-width:599px) {
  #cr-panel { max-width:100%; }
  #cr-arena { grid-template-columns:1fr; grid-template-rows:auto auto auto; overflow-y:auto; }
  #cr-log { border-left:none; border-right:none; border-top:1px solid rgba(58,50,32,0.4); border-bottom:1px solid rgba(58,50,32,0.4); padding:12px; min-height:140px; }
  .cr-side { padding:10px; }
  .cr-side:last-child { border-left:none; }
  #cr-action-damage { font-size:22px; }
}
@media (min-width:600px) and (max-width:1023px) { #cr-arena { grid-template-columns:5fr 4fr 5fr; } }
@media (min-width:1024px) {
  #cr-panel { max-width:1100px; }
  #cr-arena { grid-template-columns:5fr 4fr 5fr; }
  .cr-recruit { padding:12px; }
  #cr-log { padding:18px 14px; gap:14px; }
  #cr-action-damage { font-size:34px; }
}