/* =====================================================================
   game.css — Kiai-Arena recreation : 960x700 selection + battle
   Matches the kiai-arena.site in-client look.
   ===================================================================== */
:root {
  --screen-w: 960px; --screen-h: 700px;
  --face: 50px; --skill: 50px;
  --red: #e0241c; --red-d: #9e1812; --green: #4fa02e;
  --tan: #efe6cc; --tan-d: #d8c79c; --ink: #1a1a1a;
}

.stage { background: #d98e00; min-height: 100vh; padding: 16px 0 40px;
  font-family: "Trebuchet MS", Verdana, sans-serif; }
.stage .home-link { display: block; width: var(--screen-w); margin: 0 auto 8px; color: #3a2400;
  font-weight: bold; text-decoration: none; font-size: 12px; }
.screen {
  width: var(--screen-w); height: var(--screen-h); position: relative; overflow: hidden;
  margin: 0 auto; border: 2px solid #1e1e1e; box-shadow: 0 4px 18px #0007;
  background-size: cover; background-position: center; color: #111; font-size: 12px;
  user-select: none;
}

/* ---- standalone game window (opened from "Start Playing") ----
   The popup defaults to the game's size and is resizable, but the game itself
   never scales: the 960x700 screen stays fixed, centered when the window is
   larger and reachable via scroll when it is smaller. */
body.game-window { overflow: hidden; background: #1a1a1a; margin: 0; }
body.game-window .stage { height: 100vh; width: 100vw; min-height: 0; padding: 0; display: block;
  position: relative; overflow: hidden; }
body.game-window .stage .home-link { display: none; }
body.game-window .screen { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); transform-origin: center center;
  margin: 0; flex: none; border: none; box-shadow: none; }
body.game-window .log { display: none; }

/* chakra squares */
.ck-row { display: inline-flex; gap: 7px; align-items: center; }
.ck-item { display: inline-flex; align-items: center; gap: 2px; }
.ck-sq { display: inline-block; width: 12px; height: 12px; border: 1px solid #222; }
.ck-sq.t { background: #5cc020; } .ck-sq.n { background: #3f7fcf; }
.ck-sq.g { background: #f4f4f4; } .ck-sq.b { background: #e0241c; } .ck-sq.r { background: #888; }
.ck-t { font-weight: bold; }
.ck-n { font-size: 11px; }

/* =====================================================================
   SELECTION / LOBBY  (960x700 client — matches reference screenshots)
   ===================================================================== */
#select.screen { width: 960px; height: 700px; }

/* ---- top bar : language (left) + volume (right) ---- */
.s-lang { position: absolute; top: 7px; left: 8px; display: flex; align-items: center;
  gap: 6px; height: 26px; padding: 0 8px; border-radius: 14px;
  background: linear-gradient(#243a5c, #16243c); border: 1px solid #4a6a9a;
  box-shadow: 0 1px 3px #0006; }
.s-lang .flag { width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 1px #0007; position: relative; overflow: hidden; opacity: .55; }
.s-lang .flag.active { opacity: 1; box-shadow: 0 0 0 2px #ffe07a; }
.flag.us { background: repeating-linear-gradient(#b22234 0 2px, #fff 2px 4px); }
.flag.us::before { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px;
  background: #3c3b6e; }
.flag.br { background: #169b46; }
.flag.br::before { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px;
  background: #ffd000; transform: translate(-50%, -50%) rotate(45deg); }
.flag.br::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  background: #1d3f8a; border-radius: 50%; transform: translate(-50%, -50%); }


.s-vol { position: absolute; top: 9px; right: 12px; display: flex; align-items: center;
  gap: 8px; color: #f3ead2; user-select: none; }
.s-vol .vb { cursor: pointer; font-size: 17px; line-height: 1; width: 14px; text-align: center;
  text-shadow: 0 1px 2px #000; }
.s-vol .vb:hover { color: #ffd24a; }
.s-vol .wedge { width: 46px; height: 14px; background: #6b6b6b; position: relative;
  clip-path: polygon(0 100%, 100% 0, 100% 100%); cursor: pointer; }
.s-vol .wedge .vf { position: absolute; left: 0; top: 0; bottom: 0; background: #f1f1f1; }
.s-vol .spk { cursor: pointer; font-size: 15px; text-shadow: 0 1px 2px #000; }
.s-vol .spk.muted { opacity: .45; }

/* ---- game-mode buttons ---- */
.s-modes { position: absolute; top: 324px; left: 0; right: 0; display: flex;
  justify-content: center; align-items: center; gap: 20px; }
.s-mode { position: relative; display: inline-flex; align-items: center; height: 40px;
  padding: 0 46px 0 18px; cursor: pointer; text-decoration: none; font-weight: bold;
  font-size: 14px; letter-spacing: .3px; color: #3a2a10;
  background: linear-gradient(#f7efdc, #d9c38a); border: 1px solid #7a6128;
  border-radius: 21px; box-shadow: 0 2px 6px #0006, inset 0 1px 0 #fff8; white-space: nowrap; }
.s-mode:hover { filter: brightness(1.05); color: #3a2a10; }
.s-mode[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }
.s-mode .fan { position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; background: #15233f;
  border: 2px solid #f4ecd6; box-shadow: 0 1px 4px #0007;
  display: flex; align-items: center; justify-content: center; }
.s-mode .fan img { width: 22px; height: 22px; }

/* ---- character detail panel (shown when a character is clicked) ---- */
/* Character detail = an unrolling scroll. The rod (ScrollSmall.png, kept at
   its 46:239 ratio) starts in the middle; on open it slides LEFT while the
   parchment (Rectangle.png) unrolls out from it. Clicking the rod rolls it
   back up and closes the box. No CSS background — the art is everything. */
.s-detail { position: absolute; left: 105px; top: 30px; width: 750px; height: 340px;
  display: none; z-index: 8; }
.s-detail.show { display: block; }
.s-detail .paper { position: absolute; left: 38px; right: 0; top: 6px; bottom: 6px;
  background: url(../assets/placeholder/Rectangle.png) no-repeat; background-size: 100% 100%;
  clip-path: inset(0 53% 0 47%); transition: clip-path .65s ease; }
.s-detail.open .paper { clip-path: inset(0 0 0 0); }
.s-detail .rod { position: absolute; top: -6px; width: 55px; height: 284px;   /* 284/55 = the art's ratio */
  left: calc(50% - 27px); transition: left .65s ease; cursor: pointer; z-index: 3;
  filter: drop-shadow(2px 3px 4px #0006); }
.s-detail.open .rod { left: 0; }
.s-detail .rod img { width: 100%; height: 100%; }
.s-detail .rod:hover { filter: drop-shadow(2px 3px 4px #0006) brightness(1.08); }
.s-detail.instant .paper, .s-detail.instant .rod { transition: none; }
.s-detail .d-inner { position: absolute; left: 72px; right: 34px; top: 24px; bottom: 20px;
  opacity: 0; transition: opacity .3s ease .4s; overflow-y: auto; overflow-x: hidden; }
.s-detail.open .d-inner { opacity: 1; }
.s-detail .close { position: absolute; top: 0; right: 0; cursor: pointer; color: #9a3a1a;
  font-weight: bold; font-size: 16px; line-height: 1; z-index: 2; }
.s-detail .close:hover { color: #bd2511; }
.s-detail .d-row { display: flex; flex-direction: column; gap: 10px; }
.s-detail .d-row .d-namerow { display: flex; gap: 18px; align-items: flex-start; }
.s-detail h4 { margin: 0 0 6px; color: #c01818; font-size: 15px; letter-spacing: .4px; }
.s-detail .d-face, .s-detail .d-port {
  width: 86px; height: 86px; border: 1px solid #1a1a1a; background: #cfc4a4; flex: none; }
.s-detail .d-skill {
  width: 86px; height: 86px; border: 1px solid #1a1a1a; background: #cfc4a4; flex: none; }
.s-detail .d-face img, .s-detail .d-skill img, .s-detail .d-port img,
.s-detail .d-skill .sprite { width: 100%; height: 100%; }
.s-detail .d-skills { display: flex; gap: 14px; width: 100%; }
.s-detail .d-skill { cursor: pointer; }
.s-detail .d-skill:hover { outline: 2px solid #e0241c; outline-offset: -1px; }
.s-detail .d-skill.sel { outline: 2px solid #e0241c; outline-offset: -1px;
  box-shadow: 0 0 0 3px #e0241c44; }
.s-detail .d-meta { margin-top: 6px; display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 10px; font-weight: bold; color: #6b3a1a; text-transform: uppercase;
  align-items: center; }
.s-detail .d-meta .d-cost { display: inline-flex; align-items: center; gap: 4px; }
.s-detail .d-meta .ck-sq { width: 10px; height: 10px; }
.s-detail .d-bottom { display: flex; gap: 18px; align-items: flex-start; margin-top: 8px; }
.s-detail .d-bio { flex: 1; }
.s-detail .d-bio p { margin: 4px 0 0; color: #5a3214; font-weight: bold; font-size: 12px;
  line-height: 1.5; text-transform: uppercase; }

/* ---- bottom panel : scroll + grid + footer + profile ---- */
/* the panel art (bg_charlist.png, 944x300) carries its own scroll rod and
   red frame — no CSS background/border on top of it. Content is padded to
   the parchment area measured in the art: x 62..926, y 17..283. */
.s-panel { position: absolute; left: 8px; right: 8px; top: 392px; bottom: 10px;
  background: url(../assets/placeholder/bg_charlist.png) no-repeat; background-size: 100% 100%;
  display: flex; gap: 0; padding: 20px 34px 18px 76px; }

.s-page { position: absolute; width: 46px; height: 50px; cursor: pointer; z-index: 6;
  background: url(../assets/placeholder/Arrow.png) center/contain no-repeat; }
/* prev arrow rides ON the scroll rod (left of the grid, level with the
   top row), barely touching the first face; next arrow hangs off the
   bottom-right face's outer edge, pointing out of the grid */
.s-page.up   { left: 54px;  top: 30px; transform: scaleX(-1); }    /* mirror -> points up-left */
.s-page.down { left: 618px; top: 188px; }                          /* default Arrow.png -> up-right */
.s-page.off  { cursor: default; }
.s-page:not(.off):hover { filter: drop-shadow(0 0 3px #fff) brightness(1.05); }

/* left box: the character list. It fills the space left of the player
   details and centers the grid + footer inside it (both axes). */
.s-mid { display: flex; flex-direction: column; flex: 1 1 auto;
  align-items: center; justify-content: center; }
.s-grid { display: grid; grid-template-columns: repeat(7, 60px); grid-auto-rows: 60px;
  column-gap: 20px; row-gap: 10px; flex: none; }
.s-cell { width: 60px; height: 60px; border: 1px solid #000; background: #d8cba6;
  cursor: pointer; position: relative; overflow: hidden; }
.s-cell img, .s-cell .sprite { width: 100%; height: 100%; display: block; }
.s-cell:hover { outline: 2px solid #e0241c; outline-offset: -1px; z-index: 2; }
.s-cell.locked { filter: grayscale(1) brightness(.55); cursor: not-allowed; }
.s-cell.locked:hover { outline: none; }
.s-cell.picked { outline: 2px solid #2e8f2e; outline-offset: -1px; z-index: 2; }
.s-cell.picked::after { content: "\2714"; position: absolute; top: 0; right: 0; background: #2e8f2e;
  color: #fff; font-size: 9px; width: 13px; height: 13px; line-height: 13px; text-align: center; }
.s-cell.empty { background: #e7dcc0; cursor: default; }
.s-cell.empty:hover { outline: none; }

.s-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 10px;
  width: 540px; margin-top: 10px; }
.s-foot .lbl { background: #f3e9cf; border: 1px solid #8a7a52; border-radius: 3px;
  padding: 3px 8px; font-weight: bold; font-size: 11px; color: #4a3414; cursor: pointer; letter-spacing: .3px; }
.s-foot .lbl.mid { flex: 1; text-align: center; }
.s-foot .lbl:hover { color: #bd2511; border-color: #bd2511; }


/* right box: the player details. A fixed-width column, centered
   vertically in the parchment and with every section centered in it. */
.s-info { width: 260px; flex: none; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center; }
.s-id { display: flex; gap: 12px; text-align: left; }
.s-id .av { width: 75px; height: 75px; position: relative; flex: none;
  background: #cfc4a4; }
.s-id .av img { width: 100%; height: 100%; display: block; }
.s-id .av .badge { position: absolute; left: -4px; bottom: -4px; width: 22px; height: 22px;
  border-radius: 50%; background: #e0241c; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px #0007; }
.s-id .av .badge img { width: 14px; height: 14px; border: none; }
.s-id .lines { font-size: 12px; line-height: 1.5; color: #2a2010; font-weight: bold; }
.s-id .lines .nm { font-size: 14px; letter-spacing: .4px; }
.s-id .lines .rankline { display: flex; align-items: center; }

.s-team { margin-top: 14px; display: flex; flex-direction: column; align-items: center; }
.s-team .slots { display: flex; gap: 10px; justify-content: center; }
.s-team .slot { width: 60px; height: 60px; border: 1px solid #000; background: #d8cba6;
  cursor: pointer; overflow: hidden; }
.s-team .slot img, .s-team .slot .sprite { width: 100%; height: 100%; display: block; pointer-events: none; }
.s-team .slot.empty { background: #e7dcc0; cursor: default; display: flex;
  align-items: center; justify-content: center; color: #a99d7d;
  font-weight: bold; font-size: 26px; }        /* empty spot keeps its number */
.s-team .slots.drop-ok { outline: 2px dashed #2e8f2e; outline-offset: 3px; border-radius: 4px; }
.s-cell img { pointer-events: none; }
.s-grid.drop-ok { outline: 2px dashed #c9302c; outline-offset: 2px; border-radius: 4px; }
.s-ready { font-weight: bold; color: #1c6b1c; font-size: 10.5px; margin: 10px 0 8px; letter-spacing: 0;
  width: 100%; box-sizing: border-box; text-align: center; white-space: nowrap; }
.s-ready.no { color: #2a2010; }
.s-ready .drag { color: #e0241c; }
.btn-tm { display: block; width: 200px; background: linear-gradient(#e64a3a, #cf1d1d);
  color: #fff; border: 1px solid #8a1410; font-weight: bold; text-align: center;
  padding: 5px 0; cursor: pointer; border-radius: 3px; font-size: 12px; letter-spacing: .5px; }
.btn-tm:hover { filter: brightness(1.08); }
/* =====================================================================
   BATTLE  (960x700 client — matches the reference battle screenshots)
   ===================================================================== */
#battle.screen { width: 960px; height: 700px; font-family: "Trebuchet MS", Verdana, sans-serif; }

/* ---- top bar : players + ready/timer bar + chakra + exchange ---- */
.b-top { position: absolute; top: 0; left: 0; right: 0; height: 66px; z-index: 8; }
/* the ready/timer bar is dead-center; both player boxes are anchored to the
   center line at the same distance, so they mirror each other exactly */
.b-player { position: absolute; top: 8px; display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.b-player.p1 { right: 50%; margin-right: 145px; text-align: right; }
.b-player.p2 { left: 50%; margin-left: 145px; }
.b-player img.av { width: 48px; height: 48px; border: 3px solid #1a1a1a; background: #cfc4a4;
  box-shadow: 0 1px 3px #0007; flex: none; }
.b-player .nm { color: #e0241c; font-weight: bold; font-size: 16px; letter-spacing: .5px;
  text-shadow: 1px 1px 0 #f5eed8, -1px -1px 0 #f5eed8, 1px -1px 0 #f5eed8, -1px 1px 0 #f5eed8; }
.b-player .rk { color: #1a1a1a; font-weight: bold; font-size: 12px; letter-spacing: .5px;
  text-shadow: 1px 1px 0 #f5eed8aa; }
.b-player:hover .nm { color: #ff544a; }

.b-center { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 270px;
  text-align: center; }
.b-ready { display: block; cursor: pointer; text-decoration: none; }
.b-ready .label { font-weight: bold; font-size: 13px; letter-spacing: .5px; color: #101010;
  text-shadow: 1px 1px 0 #f5eed8, -1px -1px 0 #f5eed8, 1px -1px 0 #f5eed8, -1px 1px 0 #f5eed8; }
.b-ready .bar { height: 11px; margin-top: 5px; background: #f4efe2; border: 1px solid #1c1c1c;
  overflow: hidden; position: relative; }
.b-ready .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: linear-gradient(#e0241c, #a01008); }
.b-ready .bar .fill.smooth { transition: width 1.5s linear; }
.b-ready[disabled] { cursor: default; }
.b-chakra { margin-top: 4px; }
.b-chakra .ck-n { text-shadow: 1px 1px 0 #f5eed8; font-weight: bold; }
.b-exchange { display: inline-block; margin-top: 1px; font-size: 10px; font-weight: bold;
  color: #2a2a2a; letter-spacing: .4px; cursor: pointer; text-shadow: 1px 1px 0 #f5eed8; }
.b-exchange:hover { color: #bd2511; text-decoration: underline; }
.b-exchange.off { opacity: .45; cursor: default; text-decoration: none; }

/* ---- team columns ---- */
.b-col { position: absolute; top: 46px; bottom: 168px; width: 134px; }
.b-col.ally { left: 0; }
.b-col.foe  { right: 0; }

.b-unit { position: absolute; width: 134px; height: 152px; z-index: 6; }  /* above the skill scroll */
.b-unit.r0 { top: 0; } .b-unit.r1 { top: 133px; } .b-unit.r2 { top: 266px; }
/* the spiky shuriken frame behind the face picture (rank art), centered on it */
.b-unit .deco { position: absolute; top: 3px; width: 124px; height: 124px; pointer-events: none; }
.b-col.ally .deco { left: 12px; }
.b-col.foe .deco { right: 12px; transform: scaleX(-1); }

.b-portrait { position: absolute; top: 23px; width: 84px; height: 84px; border: 2px solid #101010;
  background: #cfc4a4; box-shadow: 0 2px 5px #0007; overflow: hidden; }
.b-col.ally .b-portrait { left: 32px; } .b-col.foe .b-portrait { right: 32px; }
.b-portrait img, .b-portrait .sprite { width: 100%; height: 100%; display: block; }
.b-unit.dead .b-portrait { filter: grayscale(1) brightness(.55); }
.b-unit.dimmed { filter: sepia(.55) brightness(.92); }
/* while a skill is armed, every valid target gets a yellow overlay on its
   face picture (the reference client look), softly pulsing for as long as
   the skill stays armed; hovering strengthens it (click to fire) */
@keyframes na-blink { 0%, 100% { opacity: .5; } 50% { opacity: .22; } }
.b-unit.targetable { cursor: pointer; }
.b-unit.targetable .b-portrait::after { content: ""; position: absolute; inset: 0;
  background: #ffd400; opacity: .5; pointer-events: none;
  animation: na-blink 1.5s ease-in-out infinite; }
.b-unit.targetable:hover .b-portrait::after { opacity: .68; animation: none; }
.b-portrait:hover { outline: 2px solid #ffd400; outline-offset: 1px; cursor: pointer; }

.b-hp { position: absolute; top: 110px; width: 84px; height: 17px; background: #101010;
  border: 1px solid #101010; box-shadow: 0 1px 3px #0006; }
.b-col.ally .b-hp { left: 32px; } .b-col.foe .b-hp { right: 32px; }
.b-hp .fill { position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(#8ee24a, #4fa02e); }
.b-hp .fill.mid { background: linear-gradient(#f2b02a, #cf8410); }
.b-hp .fill.low { background: linear-gradient(#e84030, #a81c12); }
.b-hp .txt { position: relative; z-index: 2; font-size: 11px; font-weight: bold; color: #101010;
  text-align: center; line-height: 15px; }
.b-hp .def { position: absolute; top: -7px; right: -3px; background: #3f7fcf; color: #faf4e1;
  font-size: 9px; font-weight: bold; padding: 0 3px; border-radius: 2px; z-index: 3; }

/* mini icons: statuses + queued incoming actions. They sit right NEXT TO the
   top of the face picture, in the strip left free above the skill scroll
   (the scroll starts ~30px lower than the portrait for exactly this). */
/* status / queued-action icons: a row right NEXT TO the face picture on the
   battlefield side, top-aligned with it (4px gap, never overlapping) */
.b-minis { position: absolute; top: 23px; display: flex; gap: 2px; z-index: 6;
  pointer-events: none; }
.b-minis .mi { pointer-events: auto; }   /* keep the hover tooltips */
.b-col.ally .b-minis { left: 120px; }
.b-col.foe .b-minis { right: 120px; flex-direction: row-reverse; }
.b-minis .mi { width: 26px; height: 23px; border: 1px solid #101010; background: #cfc4a4;
  overflow: hidden; box-shadow: 0 1px 2px #0007; }
.b-minis .mi img, .b-minis .mi .sprite { width: 100%; height: 100%; display: block; }
.b-minis .mi.fx { display: flex; align-items: center; justify-content: center; color: #faf4e1;
  font-size: 8px; font-weight: bold; }
.mi.fx.stun { background: #b02018; } .mi.fx.invuln { background: #2f6fb0; } .mi.fx.reduce { background: #2f7d4e; }
.mi.fx.dot { background: #7a2f9a; } .mi.fx.hot { background: #2f8a85; } .mi.fx.counter { background: #9a7320; }
.mi.fx.boost { background: #b0531e; } .mi.fx.weaken { background: #6b6048; }

/* ---- red skill scrolls (allies) ----
   The scroll slides a little UNDER the face picture (the portrait paints on
   top, see .b-unit z-index) and its width fits its cells, so during the
   opponent's turn — when the leading "?" slot is gone — it gets shorter. */
.b-scroll { position: absolute; left: 106px; width: fit-content; height: 86px; z-index: 5;
  display: flex; gap: 8px; align-items: center; padding: 0 120px 0 27px;
  background: linear-gradient(#e6382a, #b31408); border: 2px solid #6e0c05; border-radius: 5px;
  box-shadow: inset 0 0 0 2px #f0a08c55, 0 2px 6px #0007; }
/* portrait tops are 96/244/392 — the scroll sits 30px lower so the
   status / queued-action icons fit beside the face picture above it */
.b-scroll.s0 { top: 96px; } .b-scroll.s1 { top: 229px; } .b-scroll.s2 { top: 362px; }
.b-scroll::before, .b-scroll::after { content: ""; position: absolute; top: -6px; bottom: -6px;
  width: 10px; background: linear-gradient(#8d1206, #5c0a03); border: 1px solid #3c0501; border-radius: 4px; }
.b-scroll::before { left: -8px; } .b-scroll::after { right: -8px; }
/* the little handle poking out of the rolled end, at mid height */
.b-scroll .knob { position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 14px; background: linear-gradient(#a8968a, #6d5c50);
  border: 1px solid #3a2c22; border-radius: 2px; }
.b-scroll.busy { filter: sepia(.5) saturate(.55) brightness(.9); }
.b-scroll.dimmed { filter: sepia(.65) brightness(.85); }

.b-skill { width: 60px; height: 60px; border: 2px solid #101010; background: #e7dab8;
  position: relative; cursor: pointer; flex: none; }
.b-skill img, .b-skill .sprite { width: 100%; height: 100%; display: block; }
.b-skill.q { background: #4a4a4a; margin-right: 14px; display: flex; align-items: center; justify-content: center;
  color: #e6e6e6; font-weight: bold; font-size: 26px; cursor: default; }
.b-skill.unaffordable img, .b-skill.cooldown img,
.b-skill.unaffordable .sprite, .b-skill.cooldown .sprite { opacity: .4; filter: grayscale(.4); }
.b-skill.unaffordable, .b-skill.cooldown { cursor: pointer; }   /* still clickable for info */
/* the armed skill keeps pulsing yellow — slowly — until a target is picked
   or it is clicked again */
.b-skill.selected { border-color: #ffd400; box-shadow: 0 0 0 3px #ffd400ee;
  animation: na-armed 1.5s ease-in-out infinite; }
@keyframes na-armed { 0%, 100% { box-shadow: 0 0 0 3px #ffd400ee; }
  50% { box-shadow: 0 0 0 3px #ffd40018; } }
/* the "?" slot once a target is chosen: shows the queued skill; click it to
   cancel the action and pick another skill */
.b-skill.q.filled { background: #e7dab8; cursor: pointer; font-size: 0;
  border-color: #37e037; box-shadow: 0 0 0 2px #37e037aa; }
.b-skill.q.filled:hover { border-color: #e0241c; box-shadow: 0 0 0 2px #e0241caa; }
.b-skill.denied { animation: na-deny .35s; }
@keyframes na-deny { 50% { box-shadow: 0 0 0 3px #e0241c; border-color: #e0241c; } }
.b-skill.queued { border-color: #37e037; box-shadow: 0 0 0 2px #37e037aa; }
.b-skill:hover { border-color: #ffe680; }
.b-skill .cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: bold; color: #faf4e1; background: #000a; }

/* "Click on a skill" block inside the bottom info panel (character view),
   reused on the skill view to swap skills / go back to the character */
.b-info .inspect { flex: none; align-self: center; width: 200px; }
.b-info .inspect .cap { background: #101010; color: #faf4e1; font-weight: bold; font-size: 11px;
  text-align: center; padding: 3px 0; letter-spacing: .3px; text-transform: uppercase; }
.b-info .inspect .cap.link { cursor: pointer; }
.b-info .inspect .cap.link:hover { color: #ffd400; }
.b-info .inspect .row { display: flex; gap: 4px; margin-top: 4px; justify-content: center; }
.b-info .inspect .row .b-skill { width: 46px; height: 46px; }
.b-info .inspect .row .b-skill.sel { border-color: #e0241c; box-shadow: 0 0 0 2px #e0241caa; }

/* ---- bottom area ---- */
.b-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 162px; z-index: 10; }
.b-announcer { position: absolute; left: 172px; bottom: 0; height: 158px; pointer-events: none; z-index: 12; }

.bb-btns { position: absolute; left: 46px; top: 6px; z-index: 11; }
.bb-btn { position: relative; display: block; height: 27px; line-height: 25px; padding: 0 14px 0 26px;
  margin-bottom: 15px; background: linear-gradient(#f6efdc, #e2d3a8); border: 1px solid #6e5a2a;
  color: #2c1e08; font-weight: bold; font-size: 12px; letter-spacing: .4px; cursor: pointer;
  box-shadow: 0 2px 4px #0007, inset 0 1px 0 #fff8; white-space: nowrap; }
.bb-btn::before { content: ""; position: absolute; left: -10px; top: -5px; width: 20px; height: 36px;
  background: linear-gradient(#4a9a2e, #2f6a1c); border: 2px solid #1e4a10; border-radius: 8px; }
.bb-btn:hover { filter: brightness(1.06); color: #bd2511; }
.bb-btn.w1 { width: 172px; } .bb-btn.w2 { width: 208px; }
.bb-vol { position: relative; display: flex; align-items: center; gap: 8px; height: 27px; width: 150px;
  padding: 0 12px 0 26px; background: linear-gradient(#f6efdc, #e2d3a8); border: 1px solid #6e5a2a;
  box-shadow: 0 2px 4px #0007, inset 0 1px 0 #fff8; }
.bb-vol::before { content: ""; position: absolute; left: -10px; top: -5px; width: 20px; height: 36px;
  background: linear-gradient(#4a9a2e, #2f6a1c); border: 2px solid #1e4a10; border-radius: 8px; }
.bb-vol .vb { cursor: pointer; font-weight: bold; font-size: 15px; color: #2c1e08; }
.bb-vol .vb:hover { color: #bd2511; }
.bb-vol .wedge { width: 44px; height: 13px; background: #6b6b6b; position: relative;
  clip-path: polygon(0 100%, 100% 0, 100% 100%); cursor: pointer; }
.bb-vol .wedge .vf { position: absolute; left: 0; top: 0; bottom: 0; background: #2c1e08; }
.bb-vol .spk { cursor: pointer; font-size: 13px; }
.bb-vol .spk.muted { opacity: .4; }

/* info panel: skill details / character bio / player profile */
.b-info { position: absolute; left: 296px; right: 12px; top: 6px; bottom: 8px;
  background: linear-gradient(#f6eed6, #ecdfbc); border: 3px solid #8f1408; border-radius: 4px;
  box-shadow: 0 2px 8px #0007; padding: 8px 12px 8px 16px; overflow: hidden; }
.b-info::before { content: ""; position: absolute; left: -12px; top: -8px; bottom: -8px; width: 18px;
  background: linear-gradient(90deg, #2f6a1c, #4a9a2e 55%, #2f6a1c); border: 2px solid #1e4a10;
  border-radius: 8px; }
.b-info .wrap { display: flex; gap: 12px; height: 100%; }
.b-info .pic { width: 78px; height: 78px; border: 2px solid #101010; background: #cfc4a4; flex: none; }
/* the player/clan avatar view specifically: 75x75, no frame at all */
.b-info .pic.av-pic { width: 75px; height: 75px; border: none; }
.b-info .av-media { display: flex; gap: 6px; flex: none; }
.b-info .pic img, .b-info .pic .sprite { width: 100%; height: 100%; display: block; }
.b-info .body { flex: 1; min-width: 0; }
.b-info .ttl { color: #c01818; font-weight: bold; font-size: 14px; letter-spacing: .4px;
  text-transform: uppercase; }
.b-info .desc { margin-top: 3px; font-size: 11px; font-weight: bold; line-height: 1.5;
  color: #101010; text-transform: uppercase; }
.b-info .desc .hl { color: #d86a10; text-decoration: underline; }
.b-info .desc .hl.blue { color: #2f6fb0; }
.b-info .classes { margin-top: 4px; font-size: 10px; color: #6b5a3a; font-weight: bold;
  text-transform: uppercase; letter-spacing: .3px; }
.b-info .corner { position: absolute; top: 7px; right: 12px; display: flex; gap: 5px;
  align-items: center; font-size: 10px; font-weight: bold; color: #3a2a10; }
.b-info .corner .ck-sq { width: 11px; height: 11px; }
.b-info .cdline { position: absolute; bottom: 7px; right: 12px; font-size: 10px; font-weight: bold;
  color: #3a2a10; text-transform: uppercase; }
.b-info .lines { font-size: 12px; font-weight: bold; line-height: 1.55; color: #101010; }
.b-info .team { position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 6px; }
.b-info .team img, .b-info .team .sprite { width: 58px; height: 52px; border: 1px solid #101010;
  background-color: #cfc4a4; }

/* ---- modals : exchange chakra / chat / surrender (scroll dialogs) ---- */
.b-dim { position: absolute; inset: 0; z-index: 20; background: #0003; display: none; }
.b-dim.show { display: block; }
.b-dialog { position: absolute; left: 50%; top: 130px; transform: translateX(-50%); z-index: 21;
  width: 470px; min-height: 200px; background: linear-gradient(#f9f1dc, #f1e5c4);
  border: 3px solid #8f1408; border-radius: 3px; box-shadow: 0 6px 24px #000a;
  padding: 26px 34px 22px 96px; display: none; }
.b-dialog.show { display: block; }
.b-dialog .rod { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 46px; height: 239px; filter: drop-shadow(2px 3px 4px #0006); }  /* ScrollSmall native ratio */
.b-dialog .rod img { width: 100%; height: 100%; }
.b-dialog h3 { margin: 0 0 14px; font-size: 14px; letter-spacing: .4px; color: #101010;
  text-align: center; text-transform: uppercase; }
.b-dialog h3 .num { color: #c01818; }
.b-dialog h3.sub { margin: 4px 0 10px; font-size: 12px; color: #3a2a10; }

/* end-turn skill queue: caster face + skill icon pairs, in casting order */
.b-dialog .q-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 12px;
  min-height: 48px; flex-wrap: wrap; }
.b-dialog .q-pair { display: flex; cursor: grab; }
.b-dialog .q-pair.dragging { opacity: .4; }
.b-dialog .q-cell { width: 44px; height: 44px; border: 2px solid #101010; background: #cfc4a4;
  overflow: hidden; }
.b-dialog .q-pair .q-cell + .q-cell { border-left: none; }
.b-dialog .ex-col.wide { width: 240px; margin: 0 auto; }
.b-dialog .btnrow { display: flex; gap: 22px; justify-content: center; margin-top: 18px; }
.b-btn { display: inline-block; min-width: 96px; text-align: center; padding: 5px 12px;
  background: linear-gradient(#f8f1dd, #e6d7ae); border: 2px solid #101010; font-weight: bold;
  font-size: 13px; letter-spacing: 1px; cursor: pointer; text-transform: uppercase; color: #101010; }
.b-btn:hover { filter: brightness(1.05); color: #bd2511; }
.b-btn.off { opacity: .45; cursor: default; }
.b-btn.off:hover { color: #101010; filter: none; }

/* exchange dialog columns */
.ex-cols { display: flex; gap: 34px; }
.ex-col { flex: 1; }
.ex-col h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .4px; color: #101010; text-transform: uppercase; }
.ex-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 11px;
  font-weight: bold; color: #101010; text-transform: uppercase; }
.ex-row .ck-sq { width: 12px; height: 12px; flex: none; }
.ex-row .nmm { flex: 1; }
.ex-row .cnt { width: 16px; text-align: center; }
.ex-row .pm { width: 16px; height: 16px; line-height: 14px; text-align: center; border: 1px solid #101010;
  background: #f6efdc; cursor: pointer; font-weight: bold; user-select: none; }
.ex-row .pm:hover { color: #bd2511; }
.ex-row .pm.off { opacity: .35; cursor: default; }
.ex-row .pm.off:hover { color: #101010; }
.ex-skill { width: 44px; height: 44px; border: 2px solid #101010; margin-top: 6px; }
.ex-skill img { width: 100%; height: 100%; }

/* chat dialog */
.b-dialog.chat { width: 560px; padding-bottom: 16px; }
.chat-close { position: absolute; top: -40px; right: -6px; background: linear-gradient(#e6382a, #b31408);
  color: #faf4e1; border: 1px solid #6e0c05; font-weight: bold; font-size: 12px; letter-spacing: .5px;
  padding: 6px 14px; cursor: pointer; box-shadow: 0 2px 5px #0008; }
.chat-close:hover { filter: brightness(1.1); }
.chat-msgs { height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: #2a2010; padding: 4px 2px; }
.chat-msgs .empty { margin: auto; color: #c01818; font-weight: bold; font-size: 14px;
  letter-spacing: .4px; text-transform: uppercase; }
.chat-msgs .m b { color: #c01818; }
.chat-form { display: flex; gap: 6px; margin-top: 10px; }
.chat-form input { flex: 1; border: 2px solid #8f1408; background: #fdf8ea; padding: 7px 9px;
  font-size: 12px; font-family: inherit; color: #2a2010; }
.chat-form .cbtn { background: linear-gradient(#e6382a, #b31408); color: #faf4e1; border: 1px solid #6e0c05;
  font-weight: bold; font-size: 12px; padding: 0 13px; cursor: pointer; }
.chat-form .cbtn:hover { filter: brightness(1.1); }
.chat-form .cbtn.muted { filter: grayscale(.6); }

/* surrender dialog */
.b-dialog.sur { text-align: center; }
.b-dialog.sur .pic { width: 220px; height: 140px; border: 2px solid #101010; margin: 0 auto;
  background: #cfc4a4; }
.b-dialog.sur .pic img { width: 100%; height: 100%; display: block; }

/* ---- team manager : saved teams panel ---- */
.s-dim { position: absolute; inset: 0; background: #0005; z-index: 14; }
.s-tm { position: absolute; left: 150px; top: 130px; width: 660px; height: 380px; z-index: 15; }
.s-tm .rod { position: absolute; left: -24px; top: 50%; transform: translateY(-50%);
  width: 46px; height: 239px; z-index: 2; filter: drop-shadow(2px 3px 4px #0006); }
.s-tm .rod img { width: 100%; height: 100%; }
.s-tm .tm-inner { position: absolute; inset: 0;
  background: url(../assets/placeholder/Rectangle.png) no-repeat; background-size: 100% 100%;
  padding: 20px 40px 18px 48px; display: flex; flex-direction: column; }
.s-tm h4 { margin: 0 34px 8px 0; color: #c01818; font-size: 16px; letter-spacing: .5px; text-align: center; }
.s-tm .close { position: absolute; top: 12px; right: 22px; cursor: pointer; color: #9a3a1a;
  font-weight: bold; font-size: 18px; line-height: 1; z-index: 3; padding: 4px; }
.s-tm .close:hover { color: #bd2511; }
.s-tm .tm-saverow { display: flex; gap: 8px; margin-bottom: 8px; flex: none; }
.s-tm .tm-saverow input { flex: 1; border: 2px solid #8f1408; background: #fdf8ea;
  padding: 6px 9px; font-size: 12px; font-family: inherit; color: #2a2010; }
.tm-btn { background: linear-gradient(#e64a3a, #cf1d1d); color: #fff; border: 1px solid #8a1410;
  font-weight: bold; font-size: 11px; letter-spacing: .4px; padding: 6px 12px; cursor: pointer;
  border-radius: 3px; white-space: nowrap; align-self: center; }
.tm-btn:hover { filter: brightness(1.08); }
.tm-btn.off { opacity: .45; cursor: default; }
.tm-btn.off:hover { filter: none; }
.tm-btn.del { background: linear-gradient(#7d7d7d, #565656); border-color: #3a3a3a; }
.s-tm .tm-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.s-tm .tm-empty { margin: auto; color: #9a3a1a; font-weight: bold; font-size: 13px; letter-spacing: .4px; }
.s-tm .tm-row { display: flex; gap: 10px; align-items: center; background: #f2e9cdcc;
  border: 1px solid #c9b98c; border-radius: 3px; padding: 7px 10px; }
.s-tm .tm-row .tm-name { width: 170px; border: 1px solid #c9b98c; background: #fdf8ea;
  padding: 5px 8px; font-size: 12px; font-weight: bold; color: #2a2010; font-family: inherit; }
.s-tm .tm-row .tm-faces { display: flex; gap: 5px; flex: 1; }
.s-tm .tm-row .tm-faces .sprite { border: 1px solid #101010; }
.s-tm .tm-row .tm-faces .gone { width: 38px; height: 38px; border: 1px solid #101010;
  background: #d8cba6; display: flex; align-items: center; justify-content: center;
  font-weight: bold; color: #9a3a1a; }

/* sprite-sheet cells (see js/data.js SPRITE SHEETS) */
.sprite { background-repeat: no-repeat; flex: none; display: block;
  image-rendering: auto; pointer-events: none; }

/* tooltip + overlay (shared) */
.tip { position: fixed; z-index: 50; max-width: 240px; background: #1c130a; color: #f3e9d2;
  border: 1px solid var(--red); padding: 7px 9px; font-size: 11px; pointer-events: none; display: none; border-radius: 3px; }
.tip h5 { margin: 0 0 3px; color: #ffb070; font-size: 12px; }
.tip .meta { color: #c9b894; margin-bottom: 4px; }
.overlay { position: fixed; inset: 0; background: #000a; display: none; align-items: center; justify-content: center; z-index: 100; }
.overlay .card { background: var(--tan); border: 3px solid var(--red); padding: 22px 36px; text-align: center; border-radius: 4px; }
.overlay .card.result-card { max-width: 360px; }
.overlay .blurb { font-size: 12px; font-weight: bold; margin: 4px 0 10px; line-height: 1.5; }
.overlay .notes-lbl { font-size: 11px; font-weight: bold; margin: 0 0 4px; text-align: left; }
.overlay .notes { margin: 0; padding-left: 18px; text-align: left; font-size: 10.5px; color: #444; line-height: 1.6; }
.overlay h2 { margin: 0 0 6px; font-size: 26px; }
.overlay h2.win { color: #2e8f2e; } .overlay h2.lose { color: var(--red); }
.overlay .btn { display: inline-block; background: var(--red); color: #faf4e1; border: 1px solid var(--red-d);
  padding: 5px 14px; font-weight: bold; border-radius: 3px; text-decoration: none; margin: 0 4px; }

.log { width: var(--screen-w); margin: 8px auto 0; height: 92px; overflow-y: auto; background: #faf4e1;
  border: 1px solid #bbb; padding: 5px 9px; font-size: 11px; color: #222; }
.log .turnsep { color: var(--red-d); font-weight: bold; margin-top: 3px; }

/* rank badge shown beside rank text (select / battle headers) */
.rank-ico { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: middle; }
.rankline { display: inline; }

/* =====================================================================
   OG-CLIENT JUICE: turn playback animations, sounds feedback, buttons
   ===================================================================== */

/* hp bars slide between values during playback */
.b-hp .fill { transition: width .5s ease; }

/* skill announcement banner over the battlefield while a skill resolves */
.b-announce { position: absolute; left: 50%; top: 76px; transform: translateX(-50%);
  z-index: 9; display: flex; align-items: center; gap: 8px; padding: 5px 12px;
  background: linear-gradient(#f6eed6, #ecdfbc); border: 2px solid #8f1408; border-radius: 4px;
  box-shadow: 0 3px 10px #0008; pointer-events: none;
  animation: na-announce .25s ease-out; }
.b-announce .cell { width: 44px; height: 44px; border: 2px solid #101010;
  background: #cfc4a4; overflow: hidden; }
.b-announce .txt { font-weight: bold; font-size: 12px; color: #101010;
  letter-spacing: .4px; max-width: 280px; }
@keyframes na-announce { from { opacity: 0; transform: translate(-50%, -8px) scale(.92); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* damage: red flash + shake on the face picture; help: green flash */
.b-unit.hitfx .b-portrait, .b-unit.healfx .b-portrait { z-index: 6; }
.b-unit.hitfx .b-portrait::before, .b-unit.healfx .b-portrait::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  animation: na-fxflash 1s ease-out forwards; }
.b-unit.hitfx .b-portrait::before { background: #e01818; }
.b-unit.healfx .b-portrait::before { background: #3fd35a; }
@keyframes na-fxflash { 0% { opacity: .55; } 100% { opacity: 0; } }
.b-unit.hitfx .b-portrait { animation: na-shake .45s ease; }
@keyframes na-shake { 0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); } 40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* floating damage / heal numbers over the face picture */
.floater { position: absolute; left: 51px; top: 40px; transform: translateX(-50%);
  z-index: 9; font-weight: bold; font-size: 19px; pointer-events: none; white-space: nowrap;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  animation: na-float 1.05s ease-out forwards; }
.floater.bad { color: #ff4a3a; }
.floater.good { color: #5aff6a; }
@keyframes na-float { 0% { opacity: 0; transform: translate(-50%, 8px); }
  15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -28px); } }

/* the turn timer pulses red when time is running out */
.b-ready .bar.lowtime .fill { background: linear-gradient(#e84030, #a81c12) !important;
  animation: na-lowtime .8s ease-in-out infinite; }
@keyframes na-lowtime { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* buttons physically press down like the OG client */
.bb-btn:active, .b-btn:not(.off):active, .cbtn:active, .chat-close:active,
.b-ready:not([disabled]):active .label, .vb:active, .spk:active {
  transform: translateY(1px); filter: brightness(.93); }
.b-skill:not(.q):active, .b-skill.q.filled:active { transform: scale(.96); }
.b-exchange:not(.off):active { filter: brightness(.85); }

/* result card pops in */
.overlay .card { animation: na-card .35s ease-out; }
@keyframes na-card { from { transform: scale(.72); opacity: 0; }
  to { transform: scale(1); opacity: 1; } }