:root {
  --bg: #07070b;
  --panel: rgba(12, 12, 20, 0.86);
  --line: #3b3f58;
  --gold: #ffd23a;
  --red: #ff4a2a;
  --blue: #4aa8ff;
  --text: #f1f2f7;
  --dim: #9aa0b8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden;
  font-family: 'Black Han Sans', 'Malgun Gothic', sans-serif; -webkit-user-select: none; user-select: none; touch-action: none; }
#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; max-height: 100vh; background: #000;
  box-shadow: 0 0 60px rgba(0,0,0,0.8); overflow: hidden; container-type: inline-size; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

.screen, .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; }
.screen { background: radial-gradient(ellipse at center, rgba(10,6,14,0.35), rgba(0,0,0,0.78)); }
.overlay { background: rgba(0,0,0,0.62); backdrop-filter: blur(2px); }

.logo { font-family: 'Russo One', sans-serif; font-style: italic; line-height: 0.9; text-align: center; transform: skewX(-8deg);
  filter: drop-shadow(0 0.5cqw 0 #000) drop-shadow(0 0 2cqw rgba(255,80,20,0.5)); }
.logo .l1 { display: block; font-size: 3.6cqw; color: #fff; letter-spacing: 1.2cqw; }
.logo .l2 { display: block; font-size: 8cqw; background: linear-gradient(#fff6b0, #ffc21a 45%, #e8541a 70%, #9b1d0c);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.25cqw #1a0800; }
.tag { color: var(--dim); font-size: 1.6cqw; letter-spacing: 0.2cqw; margin-bottom: 0.6cqw; }

.menu { display: flex; flex-direction: column; gap: 0.6cqw; width: 32cqw; }
.mbtn { font-family: inherit; font-size: 1.7cqw; color: var(--text); background: linear-gradient(#262a3d, #14162230);
  background-color: #181b28; border: 0.18cqw solid var(--line); border-radius: 0.6cqw; padding: 0.6cqw 1.4cqw; cursor: pointer;
  transition: transform .08s, border-color .1s, background-color .1s; text-align: center; }
.mbtn small { font-size: 0.7em; color: var(--dim); }
.mbtn:hover, .mbtn.focus { border-color: var(--gold); background-color: #262b44; transform: translateX(0.4cqw); }
.mbtn.primary { background-color: #7a1f10; border-color: #ff7a3a; }
.mbtn.primary:hover { background-color: #9b2a14; }
.mbtn.ghost { background: transparent; }
.mbtn.small { font-size: 1.5cqw; padding: 0.7cqw 1.4cqw; }
.mbtn:disabled, .net.off { opacity: 0.35; pointer-events: none; }
.joinrow { display: flex; gap: 0.6cqw; }
.joinrow input { flex: 1; min-width: 0; }
input { font-family: 'Russo One', sans-serif; font-size: 1.7cqw; background: #0d0f18; color: #fff; border: 0.18cqw solid var(--line);
  border-radius: 0.6cqw; padding: 0.6cqw 1cqw; text-transform: uppercase; outline: none; }
input:focus { border-color: var(--gold); }
.namebox { color: var(--dim); font-size: 1.4cqw; display: flex; align-items: center; gap: 0.8cqw; }
.namebox input { width: 16cqw; font-size: 1.4cqw; text-transform: none; }
.netstatus { font-size: 1.2cqw; color: var(--dim); min-height: 1.6cqw; }
.netstatus .ok { color: #6dff9a; }
.netstatus .bad { color: #ff7a6a; }

h2 { font-family: 'Black Han Sans', sans-serif; font-size: 3.4cqw; margin: 0; color: #fff; text-shadow: 0 0.3cqw 0 #000, 0 0 2cqw rgba(255,120,40,0.5); }
.row { display: flex; gap: 1cqw; align-items: center; }
.row.col { flex-direction: column; min-width: 24cqw; }
.row.col .mbtn { width: 100%; }
.note { color: var(--dim); font-size: 1.4cqw; margin: 0; text-align: center; }

/* 캐릭터 카드 */
.cards { display: flex; gap: 1.6cqw; }
.card { position: relative; width: 20cqw; background: linear-gradient(#1e2233, #0e1019); border: 0.25cqw solid var(--line);
  border-radius: 1cqw; padding: 0.8cqw; cursor: pointer; transition: transform .1s, border-color .1s; overflow: hidden; }
.card canvas { width: 100%; aspect-ratio: 1 / 1.05; display: block; border-radius: 0.5cqw; }
.card .nm { font-family: 'Russo One', sans-serif; font-size: 2.4cqw; margin-top: 0.4cqw; }
.card .tt { font-size: 1.2cqw; color: var(--dim); }
.card .st { font-size: 1.1cqw; margin-top: 0.5cqw; display: grid; grid-template-columns: auto 1fr; gap: 0.2cqw 0.6cqw; align-items: center; }
.card .bar { height: 0.7cqw; background: #000; border-radius: 0.3cqw; overflow: hidden; }
.card .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffc21a, #ff5a1a); }
.card.p1 { border-color: var(--blue); transform: translateY(-0.6cqw); box-shadow: 0 0 2cqw rgba(74,168,255,0.45); }
.card.p2 { border-color: var(--red); transform: translateY(-0.6cqw); box-shadow: 0 0 2cqw rgba(255,74,42,0.45); }
.card.p1.p2 { border-color: #c47aff; }
.card .tagp { position: absolute; top: 0.6cqw; font-family: 'Russo One'; font-size: 1.4cqw; padding: 0.1cqw 0.6cqw; border-radius: 0.3cqw; }
.card .tagp.a { left: 0.6cqw; background: var(--blue); }
.card .tagp.b { right: 0.6cqw; background: var(--red); }
.card.locked { opacity: 0.55; }
.selopts { display: flex; gap: 2cqw; align-items: center; font-size: 1.4cqw; color: var(--dim); min-height: 3cqw; flex-wrap: wrap; justify-content: center; }
.seg { display: flex; gap: 0.4cqw; align-items: center; }
.seg button { font-family: inherit; font-size: 1.3cqw; padding: 0.4cqw 0.9cqw; border-radius: 0.4cqw; border: 0.15cqw solid var(--line); background: #151827; color: var(--text); cursor: pointer; }
.seg button.on { border-color: var(--gold); background: #3a2d0c; color: var(--gold); }
.selhelp { font-size: 1.1cqw; color: #6c7390; }

.waitcode { font-family: 'Russo One'; font-size: 7cqw; letter-spacing: 1.2cqw; color: var(--gold); text-shadow: 0 0.4cqw 0 #000; }
.spinner { width: 4cqw; height: 4cqw; border: 0.5cqw solid #333; border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.cmdbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(22cqw, 1fr)); gap: 1.2cqw; width: 88cqw; max-height: 70%; overflow: auto; }
.cmdbox { background: var(--panel); border: 0.15cqw solid var(--line); border-radius: 0.8cqw; padding: 1cqw 1.2cqw; }
.cmdbox h3 { margin: 0 0 0.6cqw; font-family: 'Russo One', 'Black Han Sans'; font-size: 1.7cqw; color: var(--gold); }
.cmdbox table { width: 100%; border-collapse: collapse; font-size: 1.2cqw; font-family: 'Malgun Gothic', sans-serif; }
.cmdbox td { padding: 0.25cqw 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.cmdbox td:last-child { text-align: right; color: #ffe9a8; font-family: 'Russo One', 'Malgun Gothic'; white-space: nowrap; }
.cmdbox .me { color: #6dc1ff; }

.toast { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); background: rgba(0,0,0,0.8); border: 1px solid var(--line);
  padding: 0.8cqw 1.6cqw; border-radius: 0.6cqw; font-size: 1.5cqw; opacity: 0; transition: opacity .3s; pointer-events: none; }
.toast.show { opacity: 1; }

#topbar { position: fixed; right: 10px; top: 8px; display: flex; gap: 6px; align-items: center; z-index: 20; }
#topbar button { background: rgba(0,0,0,0.5); border: 1px solid #333; color: #ddd; border-radius: 6px; width: 34px; height: 30px; cursor: pointer; font-size: 15px; }
#topbar button.off { opacity: 0.4; }
#ping { font: 12px monospace; color: #9f9; text-shadow: 0 0 3px #000; }

/* ---------------- 터치 컨트롤 (화면 전체) ---------------- */
.touch { position: fixed; inset: 0; z-index: 15; pointer-events: none; display: none; -webkit-touch-callout: none; }
.touch.on { display: block; }
.touch.on.hidden { display: none !important; }
.tzone { position: absolute; left: 0; top: 14%; bottom: 0; width: 46%; pointer-events: auto; }
.jhint { position: absolute; left: max(4vmin, env(safe-area-inset-left)); bottom: 6vmin; color: rgba(255,255,255,0.55); font-size: clamp(11px, 2.6vmin, 16px);
  text-align: center; line-height: 1.3; }
.jhint .ring { width: clamp(80px, 24vmin, 140px); height: clamp(80px, 24vmin, 140px); border-radius: 50%; margin: 0 auto 1vmin;
  border: 2px dashed rgba(255,255,255,0.3); background: radial-gradient(circle, rgba(255,255,255,0.18) 0 22%, transparent 23%); }
.touch.used .jhint { opacity: 0; transition: opacity .6s; }
.jbase { position: fixed; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); display: none; pointer-events: none; }
.jbase.on { display: block; }
.jbase.dir { border-color: rgba(255,210,60,0.8); }
.jknob { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(0,0); margin: -23% 0 0 -23%;
  border-radius: 50%; background: rgba(255,255,255,0.45); box-shadow: 0 0 12px rgba(0,0,0,0.5); }

.tbtns { position: absolute; right: max(2.5vmin, env(safe-area-inset-right)); bottom: max(2.5vmin, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: 1.8vmin; pointer-events: auto; --b: clamp(54px, 15vmin, 96px); }
.tspecial { display: flex; gap: 1.2vmin; flex-wrap: wrap; justify-content: flex-end; max-width: calc(var(--b) * 3.4); }
.tmainwrap { display: flex; align-items: flex-end; gap: 1.8vmin; }
.tmain { display: grid; grid-template-columns: repeat(2, var(--b)); gap: 1.6vmin; }
.tbtn { width: var(--b); height: var(--b); border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); color: #fff; padding: 0;
  font-family: 'Black Han Sans', sans-serif; font-size: calc(var(--b) * 0.26); line-height: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; }
.tbtn small { font-family: 'Russo One'; font-size: 0.55em; opacity: 0.6; margin-top: 2px; }
.tbtn.p { background: rgba(255,80,40,0.32); }
.tbtn.k { background: rgba(60,140,255,0.32); }
.tbtn.throw { width: calc(var(--b) * 0.8); height: calc(var(--b) * 0.8); background: rgba(160,160,160,0.28); font-size: calc(var(--b) * 0.2); }
.tbtn.sp { width: auto; min-width: calc(var(--b) * 0.95); height: calc(var(--b) * 0.52); border-radius: calc(var(--b) * 0.26);
  padding: 0 1.4vmin; background: rgba(255,210,60,0.22); border-color: rgba(255,210,60,0.6); font-size: calc(var(--b) * 0.2); }
.tbtn.sp.super { background: rgba(255,90,20,0.35); border-color: #ffb23a; }
.tbtn.pressed { background: rgba(255,255,255,0.55) !important; transform: scale(0.94); }

/* ---------------- 모바일 레이아웃 ---------------- */
html, body { height: 100dvh; }
#stage { max-height: 100dvh; width: min(100vw, calc(100dvh * 16 / 9)); }
html.touch-dev #topbar { top: max(6px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
html.touch-dev #topbar button { width: 40px; height: 36px; font-size: 17px; }
html.touch-dev .mbtn { font-size: 2.1cqw; padding: 0.8cqw 1.4cqw; }
html.touch-dev .logo .l1 { font-size: 3cqw; }
html.touch-dev .logo .l2 { font-size: 6.5cqw; }
html.touch-dev .tag, html.touch-dev .selhelp { display: none; }
html.touch-dev .menu { width: 40cqw; }
/* 태블릿/휴대폰 세로: 게임 화면은 위, 조작 버튼은 아래 빈 공간 */
@media (orientation: portrait) {
  html.touch-dev #app { align-items: flex-start; padding-top: env(safe-area-inset-top); }
  html.touch-dev #stage { width: 100vw; }
  html.touch-dev .tzone { top: calc(100vw * 9 / 16); }
}
#rotate { position: fixed; inset: 0; z-index: 40; background: #07070b; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; font-size: 20px; text-align: center; padding: 24px; }
#rotate .rot-ico { font-size: 64px; animation: rot 2s ease-in-out infinite; }
#rotate .mbtn { font-size: 15px; padding: 10px 18px; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* 대전 중 상단 버튼: ⏸ 만, 타이머 아래 가운데 */
body.ingame #topbar { left: 50%; right: auto; transform: translateX(-50%); }
body.ingame #topbar button:not(#btnPause) { display: none; }
body.ingame #topbar #ping { position: absolute; left: 100%; margin-left: 6px; white-space: nowrap; }

/* PC(마우스)에서도 가상 패드 사용 */
html:not(.touch-dev) .tzone { cursor: grab; }
html:not(.touch-dev) .tzone:active { cursor: grabbing; }
html:not(.touch-dev) .tbtn { cursor: pointer; }
html:not(.touch-dev) .tbtns { --b: clamp(50px, 11vmin, 80px); }
.tzone, .tbtns { touch-action: none; }
html:not(.touch-dev) .tbtns { bottom: 10vh; }
html:not(.touch-dev) .jhint { bottom: 11vh; }