/* CANAVAR ARENA — sits on top of styles.css (same tokens) */
.arena-page [hidden] { display: none !important; }
.ar-card { max-width: 980px; margin: 0 auto 18px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.ar-card h2 { margin: 0 0 14px; font-size: 20px; }
.ar-note { color: var(--muted); font-size: 12.5px; margin: 10px 0; }
.ar-note a { color: var(--a); }
.ar-msg { min-height: 1.2em; color: var(--danger); font-weight: 700; margin: 10px 0 0; }
.char-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.char-opt { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; text-align: left; padding: 14px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid #3d3322; color: var(--text); cursor: pointer; }
.char-opt:hover { border-color: #68583d; }
.char-opt[aria-pressed="true"] { border-color: var(--a); box-shadow: 0 0 0 1px var(--a) inset; }
.char-opt .side { grid-row: span 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #332a1b; font-weight: 800; }
.char-opt b { font-size: 16px; }
.char-opt small { color: var(--muted); }
.char-opt .nums { font-size: 12px; color: #e3d9c9; }
.lobby-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 16px; }
.lobby-actions label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 700; }
.lobby-actions input { width: 170px; }
#roomCode { width: 110px; text-transform: uppercase; letter-spacing: .15em; }
.lobby-actions .or { color: var(--muted); font-size: 12px; padding-bottom: 10px; }
.room-id { font-family: var(--mono); letter-spacing: .2em; color: var(--a); }
.share-row { display: flex; gap: 8px; margin: 10px 0; }
.share-row input { flex: 1; }

/* fight */
.ar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.ar-top b { color: var(--a); font-family: var(--mono); letter-spacing: .15em; }
#arenaStatus { font-weight: 700; color: var(--text); }
.stage { display: grid; gap: 10px; }
.plates { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); gap: 10px; align-items: start; }
.plate.me { border-color: #5a3d1f; }
.plate.them { border-color: #4b3d26; }
.below { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.vs-mid { display: grid; place-items: center; color: var(--muted); font-weight: 900; letter-spacing: .1em; }

.view { position: relative; height: 380px; border: 1px solid #3d3322; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, #3d3323 0%, #18140c 70%); }
.view canvas { width: 100%; height: 100%; display: block; }
/* floating damage numbers over the character that took the hit */
.dmg-float { position: absolute; top: 34%; z-index: 3; transform: translateX(-50%); pointer-events: none; font: 900 26px/1 Tahoma, Verdana, sans-serif;
  text-shadow: 0 2px 0 #000, 0 0 6px #000; animation: dmgrise 1.25s cubic-bezier(.2, .7, .3, 1) forwards; }
.dmg-float.out { color: #ffd166; }
.dmg-float.in { color: #ff5a5f; }
.dmg-float.dot { font-size: 18px; opacity: .9; }
.dmg-float.miss { color: #e3d9c9; font-size: 20px; font-style: italic; }
.dmg-float.heal { color: #6dff9a; }
.dmg-float.buff { color: #ffd76a; font-size: 17px; }
.dmg-float.debuff { color: #c08cff; font-size: 17px; }
/* active buffs / debuffs on a plate, with the seconds left */
.buffs { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; margin-top: 4px; }
.buffs .bf { font: 700 11px/1 Tahoma, Verdana, sans-serif; color: #ffe2a0; background: #3a2c0e; border: 1px solid #b8913f; border-radius: 4px; padding: 3px 5px; }
.buffs .bf.bad { color: #e2ccff; background: #2a1840; border-color: #8c5cd6; }
.buffs .bf b { color: #fff; font-weight: 700; }
.ar-log li.sup { color: #9ff0b8; }
@keyframes dmgrise { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  25% { transform: translate(-50%, -6px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(.95); } }
@media (prefers-reduced-motion: reduce) { .dmg-float { animation-duration: 1.25s; animation-name: dmgfade; } @keyframes dmgfade { to { opacity: 0; } } }

.plate { padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid #3d3322; display: grid; gap: 5px; }
.plate .who { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.plate .who b { font-size: 15px; }
.plate .who small { color: var(--muted); }
/* HP / MP bars: sliding fill, a pale trail for the chunk just lost, a moving sheen, flashes on loss/gain */
.bar { position: relative; height: 18px; border-radius: 6px; background: linear-gradient(180deg, #12080a, #24100f); overflow: hidden;
  border: 1px solid #000; box-shadow: inset 0 1px 3px #000c, 0 0 0 1px #ffffff0d; }
.bar.mp { height: 13px; background: linear-gradient(180deg, #110e09, #2a2215); }
.bar i, .bar .trail { position: absolute; inset: 0 auto 0 0; border-radius: 5px 0 0 5px; }
.bar i { width: var(--w, 100%); transition: width .55s cubic-bezier(.2, .8, .2, 1); overflow: hidden; }
.bar.down i { transition-duration: .16s; }
.bar .trail { width: var(--t, 100%); transition: width .7s ease-in; }
.bar:not(.down) .trail { transition: none; }
.bar.hp .trail { background: linear-gradient(180deg, #ffe0a0, #ffb347); }
.bar.mp .trail { background: linear-gradient(180deg, #f1ece4, #8fb4ff); }
.bar.hp i { background: linear-gradient(180deg, #ff7a7d 0%, #e5263a 45%, #9e0f22 100%); box-shadow: inset 0 1px 0 #ffffff55, 2px 0 6px #ff3b4d88; }
.bar.hp.low i { background: linear-gradient(180deg, #ffb46b 0%, #f0602a 45%, #a8300f 100%); animation: lowpulse 1s ease-in-out infinite; }
.bar.mp i { background: linear-gradient(180deg, #8fb8ff 0%, #3d74f0 45%, #1a3a9e 100%); box-shadow: inset 0 1px 0 #ffffff55, 2px 0 6px #4f8dff88; }
/* a soft highlight that keeps sweeping across the filled part */
.bar i::after { content: ""; position: absolute; inset: 0; width: 45%; background: linear-gradient(100deg, transparent, #ffffff40 50%, transparent);
  transform: translateX(-120%); animation: sheen 2.6s ease-in-out infinite; }
.bar.mp i::after { animation-duration: 3.2s; animation-delay: .6s; }
@keyframes sheen { 0%, 25% { transform: translateX(-120%); } 75%, 100% { transform: translateX(330%); } }
@keyframes lowpulse { 50% { filter: brightness(1.35); } }
.bar em { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.bar.loss em { animation: flash .45s ease-out; background: #fff; }
.bar.hp.gain em { animation: flash .6s ease-out; background: #63ff9a; }
.bar.mp.gain em { animation: flash .6s ease-out; background: #9fd0ff; }
@keyframes flash { from { opacity: .45; } to { opacity: 0; } }
.bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.bar.mp span { font-size: 9.5px; }
@media (prefers-reduced-motion: reduce) {
  .bar i, .bar .trail { transition: none; }
  .bar i::after, .bar.hp.low i, .bar em { animation: none !important; }
}
.cast { height: 8px; border-radius: 4px; background: #31291b; overflow: hidden; visibility: hidden; }
.cast.on { visibility: visible; }
.cast i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #ffd166, #ff9f43); }
.cast-label { font-size: 11px; color: #ffd166; min-height: 14px; }
/* normal attack (R) swing timer */
.swing { position: relative; height: 10px; border-radius: 4px; background: #31291b; overflow: hidden; }
.swing i { display: block; height: 100%; width: var(--w, 100%); background: linear-gradient(90deg, #8a6a32, #c99a3a); }
.swing.ready i { background: linear-gradient(90deg, #c99a3a, #ffd166); }
.swing span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 8.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 1px #000; }

.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 10, 6, .55); border-radius: 14px; z-index: 5; text-align: center; }
.overlay .big { font-size: clamp(42px, 8vw, 86px); font-weight: 900; letter-spacing: -.04em; text-shadow: 0 4px 30px #000; }
.overlay .big.win { color: var(--good); }
.overlay .big.lose { color: var(--danger); }
.overlay p { color: #e3d9c9; margin: 8px 0 16px; }

.ar-log-card { border: 1px solid #3d3322; border-radius: 12px; background: var(--panel); padding: 10px 12px; }
.log-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 6px; }
.log-head span { color: var(--muted); }
.ar-log { list-style: none; margin: 0; padding: 0; max-height: 230px; overflow-y: auto; font: 12px/1.5 var(--mono); }
.ar-log li { padding: 2px 0; border-bottom: 1px dashed #342b1c; display: flex; gap: 8px; }
.ar-log time { color: #7a6d56; flex: none; }
.ar-log .out { color: #ffd2a6; }
.ar-log .in { color: #ff9aa8; }
.ar-log .pot { color: #8fe3b0; }
.ar-log .fail { color: #b1a48d; }
.ar-log b { color: #fff; }
.them-info { font-size: 12.5px; color: #e3d9c9; display: grid; gap: 4px; }
.them-info b { color: #fff; }

/* fight view: drop the page title, keep the skill bar on screen */
.in-arena .lab-header { display: none; }
.in-arena main { padding-top: 10px; }
.arena-view, .in-arena .arena-view { height: min(470px, 54vh); min-height: 300px; border-color: #3a3424;
  background: radial-gradient(90% 70% at 50% 85%, #2a2618 0%, #141410 45%, #100e0a 100%); }
.arena-view .overlay { border-radius: 0; }
.in-arena main { padding-bottom: var(--kb-bottom, 0px); padding-left: var(--kb-left, 0px); }
.ar-top-btns { display: flex; gap: 8px; }

/* waiting for an opponent / prep timer */
.prep { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding: 10px 14px; margin-bottom: 10px;
  border: 1px solid #6b5a33; border-radius: 12px; background: linear-gradient(180deg, #23241a, #14160f); color: #e8dcc2; font-size: 13px; }
.prep .share-row { flex: 1 1 320px; margin: 0; }
.prep-time { display: grid; line-height: 1.1; }
.prep-time small { color: #9c9a86; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.prep-time b { font: 800 30px var(--mono); color: #ffd166; }
.prep-who { display: grid; gap: 2px; flex: 1; }
.prep-who .ok { color: var(--good); font-weight: 700; }
.prep-note { flex-basis: 100%; margin: 0; font-size: 12px; color: #9c9a86; }
.view-wait { display: none; }
.view.empty .view-wait { pointer-events: none; }
.view.empty .view-wait { display: grid; position: absolute; top: 0; bottom: 0; right: 0; width: 50%; place-items: center; color: var(--muted); font-weight: 800; letter-spacing: .04em; }

/* skill bars, KO style: olive metal frame, square slots, key number top-left; horizontal at the bottom or vertical on the left */
.kbars { --ks: 38px; position: fixed; z-index: 30; display: flex; gap: 4px; }
.kbars.horiz { left: 50%; bottom: 8px; transform: translateX(-50%); flex-direction: column; align-items: center; }
.kbars.vert { left: 6px; top: 50%; transform: translateY(-50%); flex-direction: row; align-items: flex-start; }
.kbar { display: flex; align-items: center; gap: 3px; padding: 3px 5px; border-radius: 16px; font-family: Tahoma, Verdana, sans-serif;
  background: linear-gradient(180deg, #555846, #2c2e24 45%, #1a1b14); border: 1px solid #0a0b07;
  box-shadow: inset 0 1px 0 #a3a38166, inset 0 0 0 1px #5d5d48, 0 4px 12px #000b; }
.vert .kbar { flex-direction: column; padding: 5px 3px; background: linear-gradient(90deg, #555846, #2c2e24 45%, #1a1b14); }
.kb-slots { display: flex; gap: 2px; padding: 2px; background: #0b0c08; border: 1px solid #5d5d48; border-radius: 3px; }
.vert .kb-slots, .vert .kb-end { flex-direction: column; }
.kb-end { display: flex; align-items: center; gap: 3px; }
.kb-grip { width: 7px; height: 22px; opacity: .7; background: radial-gradient(circle, #c9c7a2 1px, transparent 1.4px) 0 0 / 3.5px 4px; }
.vert .kb-grip { width: 22px; height: 7px; }
.kb-more { padding: 1px 2px; min-width: 18px; font-size: 7px; letter-spacing: -1px; line-height: 1; border-radius: 3px; color: #e8f0d0;
  background: linear-gradient(180deg, #5c6b45, #2b3320); border: 1px solid #0a0b07; }
.kb-more:disabled { opacity: .35; }
.kb-page { display: flex; flex-direction: column; align-items: center; gap: 1px; font: bold 11px Tahoma, sans-serif; color: #fff; text-shadow: 0 1px 1px #000; }
.vert .kb-page { flex-direction: row; }
.kb-page button { width: 14px; height: 11px; padding: 0; font-size: 7px; line-height: 1; border-radius: 2px; color: #dfe6c6; background: linear-gradient(180deg, #4d5440, #23271b); border: 1px solid #0a0b07; }
.kb-btn { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 13px; color: #d9dcc0;
  background: radial-gradient(circle at 40% 35%, #6a6e56, #2a2c22 70%); border: 1px solid #0a0b07; box-shadow: inset 0 0 0 1px #6d6d55; }
.kb-btn:hover, .kb-more:hover:not(:disabled), .kb-page button:hover { filter: brightness(1.3); }
.kbar.locked .kb-lock { color: #ffd166; }

.ks { position: relative; flex: none; width: var(--ks); height: var(--ks); padding: 0; display: grid; place-items: center; overflow: hidden; touch-action: none;
  border: 1px solid #3c3d2f; border-radius: 2px; background: #15160f; color: #e8dcc2; cursor: pointer; font: bold 10px Tahoma, sans-serif; }
.ks img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.ks.empty { background: #0e0f0a; cursor: default; }
.ks-n, .ks-c { position: absolute; font: bold 10px Tahoma, sans-serif; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; pointer-events: none; }
.ks-n { top: 0; left: 2px; }
.ks-c { bottom: 0; left: 2px; font-size: 9px; color: #e7dfd0; }
.ks-g { font-size: 12px; letter-spacing: -.02em; text-align: center; line-height: 1.05; padding: 0 1px; pointer-events: none; }
.ks.R { background: radial-gradient(circle at 50% 40%, #8a6a32, #2b1f0d 75%); }
.ks.R .ks-g { font-size: 18px; color: #ffe2a0; }
.ks.hp { background: radial-gradient(circle at 50% 40%, #d23a3a, #4a0b0b 75%); }
.ks.mp { background: radial-gradient(circle at 50% 40%, #3a6ad2, #382e1d 75%); }
.ks.hp .ks-g, .ks.mp .ks-g { font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; }
.ks.on { box-shadow: inset 0 0 0 2px #ffd166; }
.ks.nomana img { filter: grayscale(1) brightness(.55); }
.ks-cd { position: absolute; inset: 0; display: none; background: conic-gradient(rgba(0, 0, 0, .72) var(--p), transparent 0); pointer-events: none; }
.ks.cd .ks-cd { display: block; }
.ks-cdt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: #fff; text-shadow: 0 1px 3px #000; pointer-events: none; }
.ks:hover:not(.empty) { border-color: #c9c7a2; }
.ks.drop { outline: 2px solid #2bff6a; outline-offset: -2px; box-shadow: 0 0 10px #2bff6a; }
.ks.flash { animation: skflash .25s ease-out; }
@keyframes skflash { from { box-shadow: inset 0 0 0 3px #ffd166; } to { box-shadow: none; } }
.kghost { position: fixed; left: 0; top: 0; z-index: 1000; --ks: 40px; pointer-events: none; opacity: .9; box-shadow: 0 6px 18px #000c; border-color: #2bff6a; }
body.kdragging, body.kdragging * { cursor: grabbing !important; user-select: none; }

/* floating skill window (styles.css .kw look) */
.kwin { --ks: 34px; position: fixed; z-index: 40; top: 70px; right: 16px; width: min(430px, calc(100vw - 16px)); max-width: none; margin: 0;
  max-height: calc(100vh - 16px); overflow: auto; }
.kwin-head { position: relative; cursor: move; user-select: none; touch-action: none; }
.kwin-x { position: absolute; right: 0; top: 2px; width: 24px; height: 24px; padding: 0; border-radius: 4px; font-size: 12px; color: #2a1a05;
  background: linear-gradient(180deg, #f3d27a, #b9892f); border: 1px solid #5a3f0f; }
.kwin .kw-list { min-height: 214px; }
.kwin .kw-book { min-height: 120px; }
.kwin .kw-sk[data-drag-skill] { cursor: grab; touch-action: none; }
.kw-sk.noarena { color: #a09d86; }
.kw-sk.noarena .kw-ico img { filter: grayscale(.6) brightness(.75); }
.kwin-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: #c9bf9c; }
.kwin-extra .ks { cursor: grab; }
.kwin-extra small { margin-right: 8px; color: #9c9a86; }
.kwin-help { margin: 8px 0 0; font-size: 11.5px; color: #9c9a86; }

@media (max-width: 900px) {
  .plates { grid-template-columns: 1fr 1fr; }
  .vs-mid { display: none; }
}
@media (max-width: 600px) {
  .kbars { --ks: 27px; }
  .kb-grip { display: none; }
}
@media (max-width: 560px) {
  .below { grid-template-columns: 1fr; }
  .arena-view, .in-arena .arena-view { height: 58vh; min-height: 280px; }
  .lobby-actions input { width: 100%; }
  .lobby-actions label { width: 100%; }
}


/* sound settings */
.snd-btn { position: fixed; right: 14px; bottom: 14px; z-index: 45; width: 42px; height: 42px; padding: 0; border-radius: 50%; font-size: 18px;
  background: radial-gradient(circle at 40% 35%, #6a6e56, #2a2c22 70%); border: 1px solid #0a0b07; box-shadow: inset 0 0 0 1px #6d6d55, 0 4px 12px #000a; }
.snd-panel { position: fixed; right: 14px; bottom: 64px; z-index: 46; width: min(300px, calc(100vw - 28px)); padding: 12px 14px; border-radius: 10px;
  font-family: Tahoma, Verdana, sans-serif; color: #e8dcc2; background: linear-gradient(180deg, #2a2a1c, #161a12 40%, #12150f);
  border: 2px solid #6b5a33; box-shadow: 0 0 0 2px #1a160c, inset 0 0 0 1px #9c8450, 0 18px 40px #0008; }
.snd-panel h3 { margin: 0 0 10px; font-size: 14px; color: #f3d27a; }
.snd-row { display: grid; grid-template-columns: auto 70px minmax(0, 1fr) 38px; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; }
.snd-row input[type="range"] { width: 100%; accent-color: #c99a3a; }
.snd-row b { font-weight: 400; color: #c9bf9c; text-align: right; font-variant-numeric: tabular-nums; }
.snd-note { margin: 4px 0 0; font-size: 11px; color: #9c9a86; }
/* skill / potion effects drawn over the 3D scene */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }