:root {
  --s: 2;
  --px: calc(var(--s) * 1px);
  --bg: #0d0e1a;
  --panel: rgba(16, 17, 34, 0.92);
  --line: #3a3f6b;
  --text: #f1eee4;
  --dim: #9aa0c0;
  --yellow: #f6d23a;
  --red: #ff5a4a;
  --green: #7dffb0;
  --blue: #6aa0ff;
  --font: 'Galmuri11', 'Galmuri9', 'DungGeunMo', 'NeoDunggeunmo', 'Malgun Gothic', monospace;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: var(--font); overflow: hidden;
}
#wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#game { position: relative; background: #000; overflow: hidden; }
#screen { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }

button {
  font-family: var(--font); font-size: calc(var(--px) * 6.5); color: var(--text);
  background: #262a47; border: var(--px) solid #6b72a8; padding: calc(var(--px) * 2) calc(var(--px) * 5);
  cursor: pointer; box-shadow: 0 var(--px) 0 #10111f; margin: var(--px);
}
button:hover { background: #343a66; }
button.on { background: var(--yellow); color: #1a1420; border-color: #fff3a8; }
button.big { font-size: calc(var(--px) * 8); padding: calc(var(--px) * 3) calc(var(--px) * 8); background: #c8392f; border-color: #ff8a7a; }
button.big:hover { background: #e2453a; }
input, select {
  font-family: var(--font); font-size: calc(var(--px) * 6); background: #14152a; color: var(--text);
  border: var(--px) solid var(--line); padding: calc(var(--px) * 1);
}
input[type=number] { width: calc(var(--px) * 22); }

.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; }
.dim { color: var(--dim); font-size: calc(var(--px) * 5.5); line-height: 1.5; margin: calc(var(--px) * 2) 0; }

/* ---------- 타이틀 ---------- */
#screen-title { background: linear-gradient(180deg, rgba(8, 9, 20, 0.2), rgba(8, 9, 20, 0.75)); }
.title-box { position: absolute; left: 0; right: 0; top: 18%; text-align: center; }
.logo {
  font-family: 'Galmuri11', var(--font); font-size: calc(var(--px) * 28); font-weight: bold; letter-spacing: calc(var(--px) * 2);
  color: var(--yellow); text-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 #c8392f, calc(var(--px) * 4) calc(var(--px) * 4) 0 #1a1420;
}
.logo-sub { font-size: calc(var(--px) * 8); margin: calc(var(--px) * 4) 0 calc(var(--px) * 14); text-shadow: var(--px) var(--px) 0 #000; }
.menu-btns button { display: block; margin: calc(var(--px) * 4) auto; min-width: calc(var(--px) * 110); }
.credit { margin-top: calc(var(--px) * 16); font-size: calc(var(--px) * 5); color: var(--dim); text-shadow: var(--px) var(--px) 0 #000; }

/* ---------- 패널 공통 ---------- */
.panel {
  position: absolute; inset: calc(var(--px) * 6); background: var(--panel); border: var(--px) solid var(--line);
  box-shadow: 0 0 0 var(--px) #000; padding: calc(var(--px) * 6) calc(var(--px) * 8); overflow: auto;
  font-size: calc(var(--px) * 6);
}
.panel h1 { margin: 0 0 calc(var(--px) * 4); font-size: calc(var(--px) * 11); color: var(--yellow); }
.panel h2 { margin: calc(var(--px) * 5) 0 calc(var(--px) * 2); font-size: calc(var(--px) * 7.5); color: var(--blue); }
.setup-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: calc(var(--px) * 8); }
.setup-btns { text-align: right; margin-top: calc(var(--px) * 4); }
.row { margin: calc(var(--px) * 2) 0; }
.note { color: var(--yellow); margin: calc(var(--px) * 3) 0; font-size: calc(var(--px) * 5.5); }

#roster { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--px) * 3); }
.rcard { background: #181a33; border: var(--px) solid var(--line); padding: calc(var(--px) * 3); }
.rname { color: var(--yellow); margin-bottom: calc(var(--px) * 2); }
.srow { display: grid; grid-template-columns: calc(var(--px) * 22) 1fr calc(var(--px) * 12); align-items: center; gap: calc(var(--px) * 2); font-size: calc(var(--px) * 5); }
.srow b { text-align: right; font-weight: normal; }
.sbar { height: calc(var(--px) * 3); background: #0c0d1a; }
.sbar div { height: 100%; }
.rfit { margin-top: calc(var(--px) * 2); display: flex; flex-wrap: wrap; gap: var(--px); }
.fit { font-size: calc(var(--px) * 4.5); background: #262a47; padding: 0 var(--px); color: var(--green); }

table.lineup { border-collapse: collapse; width: 100%; font-size: calc(var(--px) * 5.5); }
table.lineup th { color: var(--dim); font-weight: normal; text-align: left; padding: var(--px); }
table.lineup td { padding: var(--px) calc(var(--px) * 1.5); border-top: var(--px) solid #23264a; }
table.lineup tr.me td { background: rgba(246, 210, 58, 0.12); }
td.slot { color: var(--blue); }
.radio input { display: none; }
.radio span { cursor: pointer; color: #555a80; font-size: calc(var(--px) * 8); }
.radio input:checked + span { color: var(--yellow); }
.opt { margin: calc(var(--px) * 2) 0; display: flex; align-items: center; flex-wrap: wrap; }
.opt span { width: calc(var(--px) * 50); color: var(--dim); white-space: nowrap; }
.opt button { font-size: calc(var(--px) * 5.5); padding: var(--px) calc(var(--px) * 4); }

/* ---------- 조작법 ---------- */
.keys { display: flex; gap: calc(var(--px) * 8); align-items: flex-start; }
.kb { flex: none; text-align: center; }
.krow { display: flex; justify-content: center; }
.krow i {
  font-style: normal; display: inline-block; width: calc(var(--px) * 13); height: calc(var(--px) * 13); line-height: calc(var(--px) * 12);
  margin: calc(var(--px) * 0.7); background: #f6d23a; color: #1a1420; border: var(--px) solid #1a1420; border-radius: 45%;
}
.krow i.c { background: #fff7c8; }
.kcap { font-size: calc(var(--px) * 4.5); color: var(--dim); margin-top: calc(var(--px) * 2); }
.keys ul { margin: 0; padding-left: calc(var(--px) * 8); line-height: 1.55; font-size: calc(var(--px) * 5.5); }
table.ctl { border-collapse: collapse; margin-top: calc(var(--px) * 4); font-size: calc(var(--px) * 5.5); width: 100%; }
table.ctl td { border-top: var(--px) solid #23264a; padding: calc(var(--px) * 1.5); vertical-align: top; }
table.ctl td:first-child { color: var(--yellow); white-space: nowrap; width: calc(var(--px) * 60); }

/* ---------- HUD ---------- */
#screen-game { pointer-events: none; font-size: calc(var(--px) * 6); }
#screen-game #overlay { pointer-events: auto; }
#scorebar {
  position: absolute; top: calc(var(--px) * 3); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; background: rgba(10, 10, 20, 0.85); border: var(--px) solid var(--line);
  padding: var(--px) calc(var(--px) * 3); text-shadow: var(--px) var(--px) 0 #000;
}
#scorebar .team { display: flex; align-items: center; gap: calc(var(--px) * 2); font-size: calc(var(--px) * 6); }
#scorebar .t0 .tname { color: #ff8a7a; }
#scorebar .t1 .tname { color: #8ab4ff; }
#scorebar .sets { background: #262a47; padding: 0 calc(var(--px) * 1.5); color: var(--yellow); }
#scorebar .score { font-size: calc(var(--px) * 11); margin: 0 calc(var(--px) * 4); letter-spacing: var(--px); }
#scorebar .colon { color: var(--dim); margin: 0 var(--px); }
.srv { width: calc(var(--px) * 4); height: calc(var(--px) * 4); border-radius: 50%; background: transparent; }
.srv.on { background: var(--yellow); box-shadow: 0 0 0 var(--px) #1a1420; }
#setinfo { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: calc(var(--px) * 4.5); color: var(--dim); white-space: nowrap; margin-top: var(--px); }

#pcard {
  position: absolute; left: calc(var(--px) * 3); top: calc(var(--px) * 3); width: calc(var(--px) * 88);
  background: rgba(10, 10, 20, 0.8); border: var(--px) solid var(--line); padding: calc(var(--px) * 2); font-size: calc(var(--px) * 5);
}
#pcard:empty { display: none; }
.pname { color: var(--yellow); }
.pname .role { color: var(--dim); font-size: calc(var(--px) * 4.5); }
.ppos { color: var(--blue); font-size: calc(var(--px) * 4.5); }
.hpbar { position: relative; height: calc(var(--px) * 6); background: #0c0d1a; margin: calc(var(--px) * 1.5) 0; border: var(--px) solid #262a47; }
.hpfill { height: 100%; }
.hpbar span { position: absolute; left: calc(var(--px) * 2); top: 0; font-size: calc(var(--px) * 4.5); line-height: calc(var(--px) * 5); text-shadow: var(--px) var(--px) 0 #000; }
.pstats { color: var(--dim); font-size: calc(var(--px) * 4.5); }

#rotmap {
  position: absolute; right: calc(var(--px) * 3); top: calc(var(--px) * 3); width: calc(var(--px) * 54); height: calc(var(--px) * 34);
  background: rgba(217, 128, 58, 0.55); border: var(--px) solid #f4efe3;
}
.rnet { position: absolute; left: -2px; right: -2px; top: 0; height: calc(var(--px) * 1.5); background: #f4efe3; }
.rcell { position: absolute; width: 33.3%; height: 44%; text-align: center; font-size: calc(var(--px) * 4); line-height: 1.1; padding-top: calc(var(--px) * 1); color: #fff; text-shadow: var(--px) var(--px) 0 #000; }
.rcell b { display: block; font-size: calc(var(--px) * 4.5); color: #1a1420; text-shadow: none; }
.rcell.me b { color: var(--yellow); text-shadow: var(--px) var(--px) 0 #000; }
.rcell.lib b { color: #245; }

#tossinfo, #serveclock {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--px) * 30);
  background: rgba(10, 10, 20, 0.85); border: var(--px) solid var(--line); padding: var(--px) calc(var(--px) * 4); display: none; white-space: nowrap;
}
#tossinfo.show { display: block; }
#tossinfo.me { color: var(--green); border-color: var(--green); }
#serveclock { top: calc(var(--px) * 30); }
#serveclock.show { display: block; }
#serveclock.warn { color: var(--red); }

#serveui { position: absolute; left: calc(var(--px) * 3); bottom: calc(var(--px) * 16); display: none; gap: calc(var(--px) * 2); }
#serveui.show { display: flex; }
.stype { background: rgba(10, 10, 20, 0.85); border: var(--px) solid var(--line); padding: calc(var(--px) * 1.5) calc(var(--px) * 2.5); font-size: calc(var(--px) * 4.5); text-align: center; }
.stype b { display: block; font-size: calc(var(--px) * 8); color: var(--dim); }
.stype.on { border-color: var(--yellow); }
.stype.on b { color: var(--yellow); }

#hint {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center; padding: calc(var(--px) * 2);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0)); font-size: calc(var(--px) * 5.5); text-shadow: var(--px) var(--px) 0 #000;
}

#bigmsg, #submsg {
  position: absolute; left: 0; right: 0; text-align: center; opacity: 0; transition: opacity 0.2s; text-shadow: calc(var(--px) * 1.5) calc(var(--px) * 1.5) 0 #000;
}
#bigmsg { top: 36%; font-size: calc(var(--px) * 17); color: #fff; }
#bigmsg.good { color: var(--yellow); }
#bigmsg.bad { color: #8ab4ff; }
#bigmsg.info { color: #fff; }
#submsg { top: calc(36% + var(--px) * 22); font-size: calc(var(--px) * 7); color: var(--text); }
#bigmsg.show, #submsg.show { opacity: 1; animation: pop 0.35s steps(4); }
@keyframes pop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }

#feed { position: absolute; right: calc(var(--px) * 3); top: calc(var(--px) * 42); width: calc(var(--px) * 100); font-size: calc(var(--px) * 4.8); }
.fitem { background: rgba(10, 10, 20, 0.7); margin-bottom: var(--px); padding: calc(var(--px) * 0.5) calc(var(--px) * 2); text-align: right; animation: fin 4s forwards; }
.fitem.good, .fitem.perfect { color: var(--yellow); }
.fitem.bad { color: #8ab4ff; }
.fitem.warn { color: #ff9a8a; }
.fitem.info, .fitem.ok { color: var(--dim); }
@keyframes fin { 0%, 80% { opacity: 1; } 100% { opacity: 0.35; } }

#floaters { position: absolute; inset: 0; }
.floater {
  position: absolute; transform: translate(-50%, -100%); font-size: calc(var(--px) * 6); white-space: nowrap;
  text-shadow: var(--px) var(--px) 0 #000, calc(var(--px) * -1) 0 0 #000; animation: floatup 1.1s steps(11) forwards;
}
.floater.perfect { color: var(--green); font-size: calc(var(--px) * 7); }
.floater.good { color: var(--yellow); }
.floater.ok { color: #fff; }
.floater.bad { color: var(--red); }
.floater.call { color: #ff5a4a; font-size: calc(var(--px) * 7); }
@keyframes floatup { 0% { opacity: 1; margin-top: 0; } 100% { opacity: 0; margin-top: calc(var(--px) * -16); } }

#overlay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 88%; overflow: auto;
  background: var(--panel); border: var(--px) solid var(--line); padding: calc(var(--px) * 6) calc(var(--px) * 10); text-align: center;
  font-size: calc(var(--px) * 6);
}
#overlay.hidden { display: none; }
#overlay h2 { color: var(--yellow); font-size: calc(var(--px) * 12); margin: 0 0 calc(var(--px) * 4); }
#overlay .big { font-size: calc(var(--px) * 10); }
#overlay table.res { margin: calc(var(--px) * 3) auto; border-collapse: collapse; }
#overlay table.res td, #overlay table.res th { padding: var(--px) calc(var(--px) * 5); border-bottom: var(--px) solid #23264a; }
#overlay .keys, #overlay table.ctl { text-align: left; }
.blink { animation: blink 1s steps(2) infinite; color: var(--yellow); }
@keyframes blink { 50% { opacity: 0.2; } }