:root { color-scheme: dark; --bg:#18211f; --surface:#26342f; --border:#4a6056; --text:#eef3ef; --muted:#acbdb4; --player:#69e0c1; }
* { box-sizing:border-box; letter-spacing:0; }
html,body { margin:0; width:100%; min-height:100%; background:var(--bg); color:var(--text); font-family:"Malgun Gothic",system-ui,sans-serif; touch-action:pan-x pan-y; }
body { overscroll-behavior:none; }
button,input { font:inherit; }
button { color:var(--text); border:1px solid var(--border); border-radius:6px; background:var(--surface); cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:focus-visible,input:focus-visible { outline:3px solid var(--player); outline-offset:3px; }
button:disabled { opacity:.45; cursor:default; }
[hidden] { display:none !important; }
#join-screen { min-height:100dvh; display:grid; place-items:center; padding:24px; }
.join-content { width:min(100%,680px); text-align:center; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:12px 28px; align-items:center; }
.join-content > .eyebrow,.join-content > h1,#join-status { grid-column:1 / -1; }
.eyebrow { font-size:12px; color:var(--player); margin:0 0 12px; }
h1 { font-size:28px; margin:0; }
h2 { font-size:24px; margin:4px 0 12px; }
/* Shared native 32x32 render of the equipped class, also used by the host. */
.portrait { --portrait-size:110px; width:var(--portrait-size); height:var(--portrait-size); margin:16px auto 0; background:url('/knight.png') 0 0 / 100% 100% no-repeat; image-rendering:pixelated; }
.portrait[data-character="healer"],body[data-class-id="healer"] .current-portrait { background-image:url('/healer.png'); }
#class-picker { border:0; padding:0; margin:0; min-width:0; }
#class-picker legend { font-size:14px; color:var(--muted); padding:0; margin:0 0 8px; text-align:left; }
.class-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.class-option { position:relative; cursor:pointer; }
.class-option input { position:absolute; opacity:0; width:1px; height:1px; }
.class-card { display:flex; flex-direction:column; align-items:center; min-height:160px; border:2px solid var(--border); border-radius:6px; background:#222e2d; padding:4px 6px 12px; }
.class-card .portrait { --portrait-size:86px; margin:0 auto; }
.class-card strong { font-size:17px; line-height:24px; }
.class-card small { color:var(--muted); font-size:12px; line-height:20px; }
.class-option input:checked + .class-card { border-color:var(--player); background:#30483c; }
.class-option input:focus-visible + .class-card { outline:2px solid white; outline-offset:3px; }
#class-picker:disabled { opacity:.6; }
.healer-icon { display:none; flex-shrink:0; }
.skill-art { width:28px; height:28px; object-fit:contain; flex-shrink:0; }
body[data-class-id="healer"] .healer-icon { display:block; }
body[data-class-id="healer"] .knight-icon { display:none; }
body[data-class-id="healer"] #skill-0 { color:#93f0be; }
body[data-class-id="healer"] #skill-1 { color:#b5e8ff; }
body[data-class-id="healer"] #dodge { grid-row:1; }
body[data-class-id="healer"] #skill-2 { grid-column:2; grid-row:2; color:#b5e8ff; }
body[data-class-id="healer"] #attack { color:#fff0b8; }
.class-name { font-weight:700; margin:8px 0 24px; }
.class-name span { color:var(--muted); font-size:13px; margin-left:8px; font-weight:400; }
form { display:grid; gap:12px; text-align:left; }
form label { font-size:13px; color:var(--muted); }
input { width:100%; min-width:0; background:#111916; color:var(--text); border:1px solid var(--border); border-radius:6px; height:48px; padding:0 14px; font-size:16px; }
.primary { min-height:48px; padding:10px 24px; width:100%; background:var(--player); color:#12241c; border:0; font-weight:700; }
#join-status { min-height:22px; font-size:14px; color:var(--muted); overflow-wrap:anywhere; }
#controller { height:100dvh; min-height:300px; display:flex; flex-direction:column; padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); user-select:none; -webkit-user-select:none; position:relative; overflow:hidden; touch-action:none; }
header { display:flex; align-items:center; gap:12px; padding:12px 20px; min-height:76px; border-bottom:1px solid #35473e; z-index:3; }
.identity { display:flex; gap:10px; align-items:center; min-width:0; flex:1; }
.identity strong { color:var(--player); font-size:30px; font-variant-numeric:tabular-nums; }
.identity b { display:block; max-width:150px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:16px; }
.identity small { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.vitals { width:160px; display:grid; gap:6px; }
.vitals label { display:flex; align-items:center; gap:8px; font-size:11px; }
meter { width:100%; height:10px; border:0; }
meter::-webkit-meter-bar { background:#36433d; border:0; }
#hp::-webkit-meter-optimum-value { background:#7cd79b; }
#mp::-webkit-meter-optimum-value { background:#8ecbff; }
.icon { width:38px; height:38px; flex:0 0 38px; font-size:26px; background:transparent; border:0; }
.play-surface { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1.3fr; align-items:center; gap:20px; padding:12px 28px; touch-action:none; }
.movement-area { display:grid; place-items:center; height:100%; min-height:0; }
#joystick { width:196px; aspect-ratio:1; border-radius:50%; background:#23332b; border:2px solid #4a6056; position:relative; touch-action:none; }
#stick { position:absolute; width:76px; height:76px; left:calc(50% - 38px); top:calc(50% - 38px); border-radius:50%; background:#8dada0; border:2px solid #bfd8ca; box-shadow:0 4px 0 #121b16; pointer-events:none; }
.axis { position:absolute; background:#40574b; pointer-events:none; }
.axis.horizontal { height:1px; left:15%; right:15%; top:50%; }
.axis.vertical { width:1px; top:15%; bottom:15%; left:50%; }
.action-area { display:grid; grid-template-columns:80px 88px 112px; grid-template-rows:86px 86px; justify-content:center; gap:12px; }
.action-area button { touch-action:none; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:3px; }
.skill,.defense-action { font-size:13px; padding:4px; }
.skill { line-height:16px; }
.skill small,.defense-action small { font-size:11px; color:var(--muted); min-height:16px; }
#skill-0 { grid-column:1; grid-row:1; }
#skill-1 { grid-column:1; grid-row:2; }
#dodge { grid-column:2; grid-row:1; color:#a6ddff; }
#guard { grid-column:2; grid-row:2; color:#ffcf83; position:relative; }
#guard-meter { position:absolute; bottom:0; left:4px; width:calc(100% - 8px); height:4px; }
#guard-meter::-webkit-meter-optimum-value { background:#ffcf83; }
#guard.broken { border-color:#ed806d; color:#ed806d; }
.glyph { font-size:24px; line-height:24px; }
.fire { color:#ffc96b; }
.nova { color:#b9b2ef; }
body[data-class-id="knight"] #skill-1 { color:#a5e7ff; }
#attack { grid-column:3; grid-row:1/3; align-self:center; width:112px; height:112px; border-radius:50%; border:2px solid var(--player); background:#304f42; font-size:18px; }
.blade-art { width:42px; height:42px; background:url('/swords.png') -4.67px -4.96px / 437.21px 305.96px no-repeat; image-rendering:pixelated; }
.pressed { filter:brightness(1.4); border-color:#fff !important; }
footer { display:flex; justify-content:space-between; gap:10px; padding:8px 24px 12px; color:var(--muted); font-size:12px; min-height:32px; }
.overlay { position:absolute; inset:76px 0 0; display:grid; place-items:center; background:var(--bg); z-index:2; padding:12px 24px; }
.lobby-content { text-align:center; width:min(100%,300px); }
.lobby-content .portrait { --portrait-size:86px; margin-top:0; }
.lobby-content p { color:var(--muted); font-size:14px; margin:10px 0 16px; }
#reconnecting { z-index:4; background:#18211ff5; }
#round-overlay { z-index:3; background:#18211ff5; }
#round-title { color:var(--player); }
#round-detail { line-height:1.6; }
#orientation-notice { display:none; position:fixed; inset:0; z-index:10; place-items:center; padding:24px; background:var(--bg); text-align:center; touch-action:none; user-select:none; -webkit-user-select:none; }
#orientation-notice p { font-size:20px; line-height:1.6; margin:20px 0 0; overflow-wrap:break-word; }
@media (max-height:420px) and (orientation:landscape) {
  #join-screen { padding:12px 24px; }
  .join-content { width:min(100%,640px); grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:24px; row-gap:6px; }
  .join-content .eyebrow { grid-column:1 / -1; margin-bottom:4px; }
  .join-content h1 { grid-column:1 / -1; margin-bottom:12px; }
  #class-picker { grid-column:1; grid-row:3; }
  #join-form { grid-column:2; grid-row:3; }
  #join-status { grid-column:1 / -1; margin:4px 0 0; }
  header { padding:6px 18px; min-height:62px; }
  .overlay { inset:62px 0 0; }
  .lobby-content .portrait { display:none; }
  .lobby-content p { margin:6px 0 10px; }
  #joystick { width:170px; }
  .play-surface { padding:6px 30px; }
  .action-area { grid-template-rows:78px 78px; gap:10px; }
  footer { padding:4px 24px; min-height:24px; }
}
@media (max-width:700px) and (orientation:landscape) {
  header { gap:8px; padding:6px 12px; }
  .identity b { max-width:104px; font-size:14px; }
  .identity strong { font-size:24px; }
  .vitals { width:112px; }
  .play-surface { grid-template-columns:minmax(0,1fr) auto; padding:6px 16px; gap:16px; }
  #joystick { width:144px; max-width:100%; }
  .action-area { grid-template-columns:68px 76px 96px; gap:8px; }
  body[data-class-id="healer"] .action-area { grid-template-columns:80px 76px 96px; }
  #attack { width:96px; height:96px; }
}
@media (orientation:portrait) {
  body { overflow:hidden; }
  #orientation-notice { display:grid; }
  #join-screen, #controller { display:none; }
}