:root {
  --ink: #0b0c12;
  --paper: #efe6d2;
  --gold: #d9b45a;
  --red: #b3241a;
  --blue: #7fd8ff;
  --panel: rgba(12, 12, 18, 0.86);
  --line: rgba(217, 180, 90, 0.35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--paper); font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
canvas#world { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
button { font-family: inherit; }
#tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; margin: -28px 0 0 -50px; width: 100px; text-align: center; font-size: 12px; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.tag.enemy { margin-top: -10px; }
.hpbar { height: 4px; background: rgba(0, 0, 0, .6); margin: 2px 20px 0; border: 1px solid rgba(255, 255, 255, .2); }
.hpbar div { height: 100%; background: #6fe06f; }
.hpbar.red div { background: #e04848; }
.revive { color: #ffcf3f; font-size: 11px; }
.floater { position: absolute; left: 0; top: 0; margin: -10px 0 0 -40px; width: 80px; text-align: center; font-weight: bold; text-shadow: 0 2px 3px #000, 0 0 6px #000; }

#screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; background: radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
#screen[hidden], #pause[hidden] { display: none; }
#screen.menu-screen { justify-content: flex-start; align-items: stretch; background: linear-gradient(90deg, rgba(5,5,10,.92) 0, rgba(5,5,10,.7) 420px, rgba(0,0,0,0) 640px); }
#pause { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); z-index: 5; padding: 16px; overflow: auto; }

.title-card { text-align: center; text-shadow: 0 4px 20px #000; }
.kanji { font-size: 64px; color: var(--red); letter-spacing: 18px; font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif; }
.kanji.small { font-size: 22px; letter-spacing: 4px; }
.title-card h1 { font-size: clamp(30px, 6vw, 72px); margin: 0; letter-spacing: 10px; color: var(--paper); font-weight: 400; }
.title-card .sub { color: var(--gold); letter-spacing: 6px; text-transform: uppercase; }
.blink { margin-top: 40px; animation: blink 1.4s infinite; letter-spacing: 4px; text-transform: uppercase; }
@keyframes blink { 50% { opacity: .2; } }
.small { font-size: 13px; opacity: .75; }
.error { color: #ff7a7a; }

.menu { display: flex; flex-direction: column; gap: 6px; width: min(400px, 100%); padding: 40px 8px; }
.menu .logo { font-size: 30px; letter-spacing: 6px; margin-bottom: 18px; color: var(--paper); }
.menu .item { text-align: left; text-decoration: none; display: block; background: transparent; border: 0; border-left: 3px solid transparent; color: var(--paper); padding: 8px 14px; cursor: pointer; transition: all .15s; }
.menu .item b { display: block; font-size: 20px; font-weight: 400; letter-spacing: 2px; }
.menu .item span { font-size: 12.5px; opacity: .6; }
.menu .item:hover, .menu .item:focus { border-left-color: var(--red); background: linear-gradient(90deg, rgba(179,36,26,.35), transparent); outline: none; }
.profile-chip { position: fixed; top: 14px; right: 16px; background: var(--panel); border: 1px solid var(--line); padding: 6px 12px; font-size: 14px; z-index: 2; }
.profile-chip .coins { color: var(--gold); margin-left: 8px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.panel { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(0,0,0,.6); padding: 22px 26px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; position: relative; }
.panel.wide { width: min(980px, 100%); }
.panel.center { text-align: center; }
.panel h2 { margin: 0 0 12px; font-weight: 400; letter-spacing: 3px; color: var(--paper); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.panel h2.win { color: var(--gold); }
.panel h2.lose { color: #ff6a5a; }
.panel h3 { font-weight: 400; color: var(--gold); letter-spacing: 2px; }
.panel .back { position: absolute; top: 16px; right: 16px; }
.btn { background: var(--red); color: #fff; border: 1px solid #ff6a5a55; padding: 10px 20px; font-size: 15px; letter-spacing: 1.5px; cursor: pointer; margin: 4px; }
.btn:hover { filter: brightness(1.2); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--paper); }
.btn.small { padding: 5px 12px; font-size: 13px; }
.btn:disabled { opacity: .4; cursor: default; }
.pill { background: rgba(255,255,255,.06); color: var(--paper); border: 1px solid var(--line); padding: 6px 12px; margin: 3px; cursor: pointer; font-size: 13.5px; }
.pill.sel { background: var(--red); border-color: #ff6a5a; }
.pill:disabled { cursor: default; opacity: .65; }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.row label { width: 90px; color: var(--gold); font-size: 14px; }
.row.end { justify-content: flex-end; }
input { background: rgba(0,0,0,.5); color: var(--paper); border: 1px solid var(--line); padding: 8px; font-family: inherit; font-size: 15px; }
input[type=range] { width: 220px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.card { text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--paper); padding: 14px; cursor: pointer; }
.card.sel { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); background: rgba(179,36,26,.15); }
.card b { font-size: 18px; font-weight: 400; display: block; }
.card p { font-size: 13px; opacity: .75; margin: 6px 0; }
.card .ch { color: var(--gold); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.card .boss { font-size: 12px; color: #ff8a7a; }
.card .done { font-size: 12px; color: #8fe08f; margin-top: 4px; }
.shop .card { cursor: default; }
.swatch { height: 60px; margin-bottom: 8px; border: 1px solid var(--line); }
.list .room, .room { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding: 8px 0; }
.room span { display: block; font-size: 13px; opacity: .7; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 12px 0; }
.stats div { background: rgba(255,255,255,.04); border: 1px solid var(--line); padding: 10px; text-align: center; }
.stats b { display: block; font-size: 22px; color: var(--gold); font-weight: 400; }
.stats span { font-size: 12px; opacity: .7; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--gold); font-weight: 400; border-bottom: 1px solid var(--line); padding: 5px; }
td { padding: 5px; border-bottom: 1px solid rgba(255,255,255,.06); }
tr.me td { color: #ffe066; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }
table.controls td:first-child { color: var(--gold); width: 40%; }
.lobby code { background: rgba(0,0,0,.5); padding: 6px 10px; border: 1px solid var(--line); font-size: 14px; }
.members { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; margin: 12px 0; }
.member { background: rgba(255,255,255,.05); border: 1px solid var(--line); padding: 8px; }
.member.empty { opacity: .35; font-style: italic; }
.member.away { opacity: .5; }
.emotes { margin: 6px 0; }
.feed-lobby { font-size: 13px; opacity: .8; }
.results .rank { font-size: 26px; color: var(--gold); letter-spacing: 3px; }
.results .record { color: #ffe066; font-size: 18px; }

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud[hidden] { display: none; }
#hud-left { position: absolute; top: 14px; left: 14px; width: min(300px, 46vw); }
.bar { height: 18px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.25); margin-bottom: 5px; position: relative; }
.bar div { height: 100%; transition: width .15s; }
.bar.hp div { background: linear-gradient(90deg, #3aa04a, #7fe07f); }
.bar.hp div.low { background: linear-gradient(90deg, #a02020, #ff5050); animation: blink .8s infinite; }
.bar.ki { height: 10px; }
.bar.ki div { background: linear-gradient(90deg, #8a1010, #ff4a3a); }
.bar.ki div.full { box-shadow: 0 0 10px #ff4a3a; }
.bar span { position: absolute; inset: 0; font-size: 11px; line-height: 16px; padding-left: 6px; text-shadow: 0 1px 2px #000; }
.bar.ki span { line-height: 9px; font-size: 9px; }
.ninpos { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.ninpo { width: 46px; height: 46px; border: 1px solid var(--line); background: rgba(0,0,0,.6); text-align: center; position: relative; font-size: 24px; line-height: 40px; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.ninpo small { position: absolute; bottom: 1px; right: 3px; font-size: 10px; line-height: 12px; font-family: sans-serif; }
.ninpo.ready { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 8px rgba(217,180,90,.5); }
.ninpo.active { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 12px var(--blue); }
.ninpo.cool { opacity: .5; }
.stack { font-size: 13px; text-shadow: 0 1px 2px #000; }
#blade { color: #7fffd4; } #tal { color: #ffcf3f; }
#hidden-tag { margin-top: 6px; color: var(--blue); letter-spacing: 3px; font-size: 13px; text-shadow: 0 0 6px #000; }
#hud-top { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); text-align: center; text-shadow: 0 1px 3px #000; font-size: 15px; width: min(420px, 60vw); }
#hud-time { font-size: 12px; opacity: .7; }
.bossname { color: #ff8a7a; letter-spacing: 2px; font-size: 14px; }
.bossbar { height: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.6); margin-top: 3px; }
.bossbar div { height: 100%; background: linear-gradient(90deg, #6a0a4a, #ff3a8a); }
#hud-right { position: absolute; top: 14px; right: 14px; text-align: right; text-shadow: 0 1px 3px #000; }
#karma { font-size: 18px; color: var(--gold); }
#combo { font-size: 26px; color: #ffcf3f; opacity: 0; transition: opacity .2s; font-style: italic; }
#combo.show { opacity: 1; }
#hud-feed { position: absolute; left: 14px; bottom: 60px; font-size: 13.5px; text-shadow: 0 1px 2px #000; max-width: 46vw; }
#hud-feed .elim { color: #ff9a8a; } #hud-feed .boss { color: #ff8aff; } #hud-feed .mist { color: #c8a0ff; } #hud-feed .emote { color: var(--blue); }
#hud-banner { position: absolute; top: 28%; left: 0; right: 0; text-align: center; font-size: clamp(28px, 6vw, 60px); letter-spacing: 8px; color: var(--paper); text-shadow: 0 0 20px #000, 0 4px 8px #000; opacity: 0; transition: opacity .3s; }
#hud-banner.show { opacity: 1; }
#spectate { position: absolute; bottom: 120px; left: 0; right: 0; text-align: center; font-size: 18px; color: #ff9a8a; text-shadow: 0 1px 3px #000; }
#minimap { position: absolute; right: 14px; bottom: 40px; width: 160px; height: 160px; border: 1px solid var(--line); background: #000; opacity: .85; }
#hud-info { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 12px; opacity: .55; text-shadow: 0 1px 2px #000; }
#touch { pointer-events: auto; }
#touch[hidden] { display: none; }
#touch .stick { position: absolute; left: 24px; bottom: 40px; width: 130px; height: 130px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: rgba(0,0,0,.25); }
#touch .knob { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.35); }
#touch .buttons { position: absolute; right: 190px; bottom: 30px; display: grid; grid-template-columns: repeat(3, 56px); gap: 8px; }
#touch .buttons button { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); background: rgba(0,0,0,.45); color: var(--paper); font-size: 20px; }
#touch .buttons button.big { background: rgba(179,36,26,.7); }
@media (pointer: coarse) { #hud-info { display: none; } #minimap { width: 110px; height: 110px; top: 70px; bottom: auto; } }
#toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); padding: 10px 18px; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 10; max-width: 90vw; }
#toast.show { opacity: 1; }
@media (max-width: 600px) { .panel { padding: 16px; } .row label { width: 70px; } .menu { padding: 60px 8px 20px; } }