:root {
  --bg: #05071c; --window-top: #2236b5; --window-bottom: #0a1062; --edge: #dfe3f5;
  --text: #f4f6ff; --dim: #9aa4d6; --hit: #ffcf6b; --death: #ff7b7b; --chat: #7fe3ff;
  --hp: #3bd16f; --mp: #4aa3ff; --atb: #ffd84a;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 50% 0%, #0d1550, var(--bg) 60%); color: var(--text);
  font: 15px/1.45 "Trebuchet MS", "Segoe UI", system-ui, sans-serif; }
#app { max-width: 1180px; margin: 0 auto; padding: 14px; }
h1, h2, h3 { margin: 0 0 8px; font-weight: 600; letter-spacing: .03em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.05rem; color: var(--edge); }
a { color: var(--chat); }

.window { background: linear-gradient(180deg, var(--window-top), var(--window-bottom)); border: 2px solid var(--edge);
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 0 0 2px #0a0f4a, 0 6px 18px rgba(0,0,0,.45); }
.window + .window { margin-top: 12px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.spread { justify-content: space-between; }
.dim { color: var(--dim); } .small { font-size: .85rem; }
.error { color: var(--death); min-height: 1.4em; }

input, select, button { font: inherit; border-radius: 6px; border: 1px solid var(--edge); padding: 7px 10px;
  background: #0b1260; color: var(--text); }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--atb); outline-offset: 1px; }
button { cursor: pointer; background: linear-gradient(#3248d0, #1a2a95); }
button:hover { filter: brightness(1.15); }
button.quiet { background: transparent; }
button:disabled { opacity: .5; cursor: default; }
input[type=text], input[type=password] { min-width: 12rem; }

.auth { max-width: 420px; margin: 8vh auto 0; }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tabs button.on { background: var(--atb); color: #1a1a1a; border-color: var(--atb); }
.stack > * { display: block; width: 100%; margin: 6px 0; }

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
.code { font-family: ui-monospace, Consolas, monospace; letter-spacing: .15em; background: #00000055; padding: 3px 8px; border-radius: 6px; }

.layout { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 12px; align-items: start; }
@media (max-width: 820px) { .layout { grid-template-columns: 1fr; } }

.team { margin-bottom: 10px; }
.team h3 { font-size: .85rem; color: var(--dim); text-transform: uppercase; }
.card { background: #00000040; border-radius: 8px; padding: 7px 9px; margin: 6px 0; border: 1px solid #ffffff22; }
.card.dead { opacity: .45; } .card.me { border-color: var(--atb); }
.card .name { font-weight: 600; } .card .meta { color: var(--dim); font-size: .8rem; }
.bar { height: 7px; background: #00000066; border-radius: 4px; overflow: hidden; margin-top: 3px; }
.bar > i { display: block; height: 100%; transition: width .25s linear; }
.bar.hp > i { background: var(--hp); } .bar.mp > i { background: var(--mp); } .bar.atb > i { background: var(--atb); }
.bar.atb.full > i { background: #fff3a6; box-shadow: 0 0 8px var(--atb); }
.nums { display: flex; justify-content: space-between; font-size: .75rem; color: var(--dim); }
.chip { display: inline-block; font-size: .7rem; padding: 0 6px; margin: 2px 3px 0 0; border-radius: 8px; background: #ffffff22; }

.log { height: 52vh; min-height: 260px; overflow-y: auto; padding: 4px 2px; font-size: .92rem; }
.line { padding: 1px 0; word-wrap: anywhere; }
.line.hit { color: var(--hit); } .line.death { color: var(--death); } .line.ready { color: var(--dim); }
.line.chat b { color: var(--chat); } .line.error { color: var(--death); font-style: italic; }
.line.private { color: #c9d0ff; } .line.system { color: var(--dim); }

.commandbar { display: flex; gap: 8px; margin-top: 10px; }
.commandbar input { flex: 1; font-family: ui-monospace, Consolas, monospace; }
.commandbar.ready input { border-color: var(--atb); box-shadow: 0 0 10px var(--atb); }
.quick { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.quick button { padding: 4px 9px; font-size: .85rem; }
.ready-cue { color: var(--atb); font-weight: 700; min-height: 1.4em; }

.music { gap: 6px; } .music select { max-width: 13rem; } .music input[type=range] { min-width: 0; width: 80px; padding: 0; }

.person { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; padding: 3px 0; border-bottom: 1px solid #ffffff14; }
.person .name { font-weight: 600; margin-right: 4px; }
.person .actions { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.person .actions button { padding: 1px 7px; font-size: .78rem; }

.shop-gold { font-weight: 600; }
.shop-title { margin: 12px 0 2px; font-size: .85rem; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.shop-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 5px 0; border-bottom: 1px solid #ffffff14; }
.shop-name { font-weight: 600; margin-right: 4px; }
.shop-detail { color: var(--dim); font-size: .82rem; }
.shop-buy button, .shop-row button { white-space: nowrap; padding: 3px 9px; font-size: .85rem; }
.shop-question { background: #00000055; border: 1px solid var(--atb); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.shop-next { margin-top: 10px; }
.shop-gear { margin-top: 12px; } .shop-gear summary { cursor: pointer; font-weight: 600; }
.ok { color: var(--hp); } .small.error { font-size: .85rem; }