:root {
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: #17151e;
  background: #fff5e1;
  --ink: #17151e;
  --pink: #ff70bf;
  --yellow: #fff15a;
  --mint: #9cf7cc;
  --line: 3px solid var(--ink);
  --shadow: 5px 5px 0 var(--ink);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background-image: radial-gradient(#33294130 1px, transparent 1px); background-size: 18px 18px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; font-weight: 800; }
button:disabled { cursor: wait; opacity: .65; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid #6b38d8;
  outline-offset: 3px;
}
body.in-game { overflow: hidden; }
.lobby-wrap { width: min(100% - 36px, 850px); min-height: 100vh; min-height: 100dvh; margin: auto; padding: 24px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-content: center; align-items: start; gap: 14px; }
.card { border: var(--line); border-radius: 15px; box-shadow: var(--shadow); overflow: hidden; }
#viewport { position: fixed; inset: 0; overflow: hidden; background: #f5c6ad; outline: none; }
#viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.card { background: #fffdf7; padding: 22px; }
.kicker { color: #522e9a; font-size: 13px; font-weight: 900; margin: 0 0 8px; }
h1 { margin: 0; font-size: 37px; line-height: 1.16; letter-spacing: -.07em; }
h2 { margin: 14px 0 6px; font-size: 16px; }
.intro { margin: 9px 0 20px; font-size: 14px; color: #464054; }
.switch { display: grid; grid-template-columns: 1fr 1fr; border: var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.switch button { background: #fff; border: 0; padding: 10px 4px; font-size: 14px; }
.switch button + button { border-left: var(--line); }
.switch button[aria-pressed="true"] { background: var(--mint); }
label { display: block; margin: 12px 0 5px; font-size: 13px; font-weight: 850; }
input, select { width: 100%; min-width: 0; padding: 10px; border: 2px solid var(--ink); border-radius: 7px; background: #fff; }
#room-code { text-transform: uppercase; letter-spacing: .1em; }
.primary, .secondary { width: 100%; padding: 11px 14px; margin-top: 18px; border: var(--line); border-radius: 8px; box-shadow: 3px 3px 0 var(--ink); }
.primary { display: flex; justify-content: space-between; background: var(--pink); }
.secondary { background: #fff; }
.primary:active, .secondary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.invite { display: flex; justify-content: space-between; gap: 6px; align-items: center; background: var(--yellow); border: var(--line); padding: 9px; margin-top: 15px; border-radius: 8px; }
.invite span, .invite strong { display: block; }
.invite span { font-size: 11px; font-weight: 800; }
.invite strong { letter-spacing: .08em; font-family: ui-monospace, monospace; }
.invite button, .public-rooms button { background: #fff; border: 2px solid var(--ink); border-radius: 5px; padding: 6px; font-size: 12px; }
#room-title-form > div { display: flex; gap: 6px; }
#save-room-title { flex: none; border: 2px solid var(--ink); border-radius: 6px; background: var(--mint); }
.notice { margin: 8px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.notice:empty { display: none; }
.error { border: var(--line); border-radius: 8px; background: #ffd2cf; padding: 10px; margin-top: 14px; }
.controls p { margin: 13px 0 8px; font-size: 12px; }
kbd { background: #f1e9ff; border: 1px solid var(--ink); border-radius: 3px; padding: 2px 4px; margin-right: 2px; }

#chat-log { height: 132px; overflow-y: auto; }
#chat-empty { margin: 0; color: var(--ink); font-size: 13px; }
.chat-message { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 7px; margin: 0 0 5px; padding: 4px 6px; background: #ffffffd9; border: 1px solid var(--ink); border-radius: 5px; font-size: 13px; overflow-wrap: anywhere; }
.chat-message.own { background: #9cf7ccdb; }
.chat-message bdi { font-weight: 850; }
.chat-message span { min-width: 0; white-space: pre-wrap; }
#chat-form { display: flex; gap: 6px; margin-top: 7px; }
#chat-form input { flex: 1; font-size: 16px; background: #fffdf7df; }
#chat-send { flex: none; padding-inline: 9px; background: var(--pink); border: 2px solid var(--ink); border-radius: 7px; font-size: 13px; }
#chat-panel :is(#chat-empty, .tts-switch, #chat-keys, .notice) { text-shadow: 0 0 4px #fffdf7, 0 0 3px #fffdf7; }
#chat-keys { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 7px 0 0; font-size: 12px; }

.world-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.world-tag, .world-sign { position: absolute; left: 0; top: 0; width: max-content; max-width: 160px; text-align: center; }
.world-tag bdi, .world-sign { border: 1px solid var(--ink); border-radius: 5px; padding: 1px 5px; font-size: 11px; font-weight: 850; background: #fffdf7; overflow-wrap: anywhere; }
.world-bubble { display: block; max-width: 150px; margin: 0 auto 3px; padding: 4px 7px; border: 2px solid var(--ink); border-radius: 9px; background: #fff; box-shadow: 2px 2px 0 var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.world-sign { background: var(--mint); box-shadow: 2px 2px 0 var(--ink); }
#cafe-action, #coffee-menu { position: absolute; z-index: 3; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); border: var(--line); box-shadow: 3px 3px 0 var(--ink); border-radius: 9px; }
#cafe-action { padding: 8px 12px; background: var(--yellow); }
#coffee-menu { background: #fffaf0; width: min(236px, calc(100% - 24px)); padding: 9px; }
#coffee-menu header, .cafe-guide > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
#coffee-menu h2 { margin: 0; }
#close-menu { background: var(--pink); border: 2px solid var(--ink); border-radius: 5px; }
#menu-items { display: grid; gap: 4px; margin-top: 7px; }
#menu-items button { text-align: left; border: 2px solid var(--ink); border-radius: 6px; padding: 5px 7px; background: var(--mint); }
#menu-items span { display: block; font-size: 11px; font-weight: 600; }
.cafe-guide p { margin: 4px 0; font-size: 13px; }
#guest-count { font-size: 12px; font-weight: 800; }
.voice-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.voice-buttons button { background: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 5px 8px; font-size: 13px; }
.voice-buttons button[aria-pressed="true"] { background: var(--mint); }
#voice-users { margin-top: 8px; border: 2px solid var(--ink); border-radius: 7px; padding: 5px 7px; background: #fffdf7; }
#voice-users summary { font-size: 12px; font-weight: 850; cursor: pointer; }
#voice-users-empty { margin: 5px 0 0; font-size: 12px; }
#voice-user-list { max-height: 135px; overflow-y: auto; margin: 3px 0 0; padding: 0; list-style: none; }
#voice-user-list li { display: grid; grid-template-columns: minmax(55px, 1fr) minmax(68px, 1fr) 35px; align-items: center; gap: 5px; padding: 4px 0; font-size: 12px; }
#voice-user-list bdi { overflow-wrap: anywhere; }
#voice-user-list input { padding: 0; accent-color: #492697; }
#voice-user-list output { text-align: right; }
.tts-switch { display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 0; cursor: pointer; }
#voice-tts { appearance: none; width: 33px; height: 19px; margin: 0; padding: 0; border-radius: 999px; background: #f1e9ff; cursor: pointer; }
#voice-tts::before { content: ''; display: block; width: 11px; height: 11px; margin: 2px; border-radius: 50%; background: var(--ink); }
#voice-tts:checked { background: var(--mint); }
#voice-tts:checked::before { transform: translateX(14px); }
#voice-tts:disabled { opacity: .55; }

.world-toolbar { position: absolute; z-index: 4; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; gap: 6px; }
.world-toolbar button, .panel-close { padding: 6px 9px; border: 2px solid var(--ink); border-radius: 7px; background: #fffdf7; box-shadow: 2px 2px 0 var(--ink); font-size: 13px; }
.world-toolbar button[aria-expanded="true"], .world-toolbar button[aria-pressed="true"] { background: var(--mint); }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.panel-header h2 { margin: 0; overflow-wrap: anywhere; }
.panel-close { min-width: 32px; font-size: 15px; padding-block: 3px; }
#match, #chat-panel, #avatar-volume { position: absolute; z-index: 5; padding: 14px; }
#match { top: calc(max(12px, env(safe-area-inset-top)) + 44px); right: max(12px, env(safe-area-inset-right)); width: min(340px, calc(100% - 24px)); max-height: calc(100% - 72px - env(safe-area-inset-bottom)); overflow-y: auto; }
#chat-panel { left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); width: min(340px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; }
#chat-log { height: min(132px, 30dvh); }
#avatar-volume { left: max(12px, env(safe-area-inset-left)); top: calc(max(12px, env(safe-area-inset-top)) + 44px); width: min(250px, calc(100% - 24px)); }
#avatar-volume label { display: flex; justify-content: space-between; gap: 10px; }
#avatar-volume-slider { padding: 0; accent-color: #492697; }
.world-tag.selected bdi { background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); }
#coffee-hint { position: absolute; z-index: 2; top: calc(max(12px, env(safe-area-inset-top)) + 44px); left: max(12px, env(safe-area-inset-left)); max-width: min(290px, calc(100% - 24px)); margin: 0; padding: 5px 8px; background: #fffdf7; border: 2px solid var(--ink); border-radius: 7px; font-size: 12px; font-weight: 750; }
#reconnect-status { position: absolute; z-index: 6; top: 62px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 7px 10px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 7px; font-size: 13px; font-weight: 800; }
@media (max-width: 530px) {
  #cafe-action, #coffee-menu { top: calc(max(12px, env(safe-area-inset-top)) + 44px); }
  #coffee-hint { top: calc(max(12px, env(safe-area-inset-top)) + 90px); }
}

.avatar-picker, .theme-picker { margin: 13px 0 0; padding: 0; border: 0; min-width: 0; }
:is(.avatar-picker, .theme-picker) legend { padding: 0; font-size: 13px; font-weight: 850; }
#avatar-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
#avatar-options label { position: relative; display: grid; justify-items: center; margin: 0; padding: 4px 2px; background: #fff; border: 2px solid var(--ink); border-radius: 7px; cursor: pointer; }
:is(#avatar-options, #theme-options) label:has(:checked) { background: var(--mint); box-shadow: 2px 2px 0 var(--ink); }
:is(#avatar-options, #theme-options) label:has(:focus-visible) { outline: 3px solid #6b38d8; outline-offset: 2px; }
:is(#avatar-options, #theme-options) input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.avatar-preview { display: block; width: min(100%, 49px); aspect-ratio: 4 / 5; background-size: 500% 300%; background-position: left top; background-repeat: no-repeat; }
#theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
#theme-options label { position: relative; margin: 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 7px; background: #fff; text-align: center; cursor: pointer; }
#theme-options img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 2px solid var(--ink); background: #322050; }
#theme-options span { display: block; padding: 5px 2px; font-size: 13px; }

.lobby-wrap > .notice { grid-column: 1 / -1; margin-top: 0; }
.public-rooms { padding: 18px; }
#public-rooms { list-style: none; margin: 9px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
#public-rooms:empty { margin: 0; }
#public-rooms li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid #d7cbba; padding: 8px 0; }
#public-rooms li span { font-size: 12px; }
#public-rooms li strong { display: block; font-family: ui-monospace, monospace; font-size: 14px; letter-spacing: .08em; }
#public-rooms li .public-room-title { font: inherit; font-weight: 850; overflow-wrap: anywhere; }
#public-rooms li button { min-width: 54px; background: var(--mint); }
#public-rooms-status { margin: 9px 0 0; color: #464054; font-size: 13px; }
#viewport.chat-focused .world-toolbar, #viewport.chat-focused #coffee-hint, #viewport.chat-focused #cafe-action { visibility: hidden; }
@media (max-width: 680px) {
  .lobby-wrap { width: min(100% - 28px, 420px); grid-template-columns: minmax(0, 1fr); align-content: start; }
  #chat-panel { padding: 9px; width: min(290px, calc(100% - 24px)); }
  #chat-panel #chat-log { height: min(90px, 20dvh); }
}

#projector-screen {
  position: absolute; z-index: 2; top: 0; left: 0; width: max-content;
  max-width: min(225px, 55vw); display: grid; gap: 4px; text-align: center;
  background: #172638; color: #f1f4e8; border: 1px solid #6ed6c1;
  border-radius: 8px; padding: 8px 12px; box-shadow: 0 0 16px #83e9d955;
}
#projector-screen-track { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #b5eedb; }
#projector-screen.showing-video { visibility: hidden; }
#projector-screen.projector-off { display: none; }
#projector-panel {
  position: absolute; z-index: 6; top: calc(max(12px, env(safe-area-inset-top)) + 44px);
  right: max(12px, env(safe-area-inset-right)); width: min(510px, calc(100% - 24px));
  max-height: calc(100% - 72px - env(safe-area-inset-bottom));
  overflow: auto; padding: 12px; background: #fffdf7; color: var(--ink);
  border: var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
#projector-panel .kicker { margin-bottom: 3px; font-size: 10px; letter-spacing: .08em; }
#projector-panel .panel-header { margin-bottom: 9px; }
#projector-player-window {
  position: relative; width: 100%; min-width: 200px; min-height: 200px;
  aspect-ratio: 16 / 9; background: #132133;
  outline: 2px solid #17151e; box-shadow: 0 0 12px #6ed6c16b;
}
#projector-player, #projector-player iframe, #projector-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; }
#projector-player iframe { display: block; border: 0; }
#projector-placeholder {
  display: grid; place-content: center; justify-items: center; gap: 7px;
  margin: 0; color: #b5eedb; font-size: 13px; font-weight: 800;
  background: radial-gradient(ellipse at center, #27445b, #132133 75%);
}
#projector-placeholder strong { font-size: 26px; }
#projector-panel.at-wall { width: 280px; overflow: visible; }
#projector-panel.at-wall #projector-player-window {
  position: fixed; left: var(--projection-x); top: var(--projection-y);
  width: var(--projection-width); height: var(--projection-height); aspect-ratio: auto;
}
#projector-now { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
#projector-now > div:first-child { min-width: 0; }
#projector-now a, #projector-now small, .projector-label { display: block; overflow-wrap: anywhere; }
#projector-now a { color: #492697; font-size: 13px; font-weight: 850; }
#projector-now small, .projector-label { font-size: 11px; color: #464054; }
#projector-watch { flex: none; }
#projector-form > div { display: flex; gap: 6px; }
#projector-link { flex: 1; font-size: 16px; }
#projector-watch, #projector-skip, #projector-submit, #projector-queue button {
  border: 2px solid var(--ink); border-radius: 6px; padding: 5px 7px; background: var(--mint); font-size: 12px;
}
#projector-submit { flex: none; background: var(--pink); }
#projector-panel h3 { font-size: 13px; margin: 10px 0 5px; }
#projector-empty { font-size: 12px; margin: 0; }
#projector-queue { max-height: 115px; overflow: auto; margin: 0; padding-left: 22px; font-size: 12px; }
#projector-queue li { padding: 4px 0; border-top: 1px solid #d7cbba; overflow-wrap: anywhere; }
#projector-queue small { margin-left: 5px; color: #464054; }
#projector-queue button { margin-left: 6px; padding: 2px 4px; }
@media (max-width: 530px) {
  .world-toolbar { gap: 4px; }
  .world-toolbar button { padding-inline: 6px; font-size: 12px; }
}

#move-joystick {
  position: absolute; z-index: 4;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 106px; height: 106px; border-radius: 50%; border: var(--line);
  background: #fffaf0df; box-shadow: 3px 3px 0 var(--ink);
  touch-action: none; user-select: none; cursor: grab;
}
#move-joystick:active { cursor: grabbing; background: #dff6e9; }
#move-joystick > span {
  position: absolute; bottom: 7px; left: 0; width: 100%;
  text-align: center; font-size: 10px; font-weight: 850;
  pointer-events: none;
}
.joystick-knob {
  position: absolute; top: 50%; left: 50%; width: 42px; height: 42px;
  transform: translate(calc(-50% + var(--stick-x, 0px)), calc(-50% + var(--stick-y, 0px)));
  border: var(--line); border-radius: 50%; background: var(--mint);
  box-shadow: inset 0 0 0 5px #c5f6df; pointer-events: none;
}
#dance-toggle {
  position: absolute; z-index: 4;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 120px);
  width: 106px; min-height: 42px; padding: 7px 4px;
  border: var(--line); border-radius: 9px; background: var(--pink);
  box-shadow: 3px 3px 0 var(--ink); font-size: 12px; touch-action: manipulation;
}
#dance-toggle[aria-pressed="true"] { background: var(--mint); }
#viewport.chat-focused :is(#move-joystick, #dance-toggle) { visibility: hidden; }

#projector-mini-title, #projector-expand { display: none; }
#projector-panel.minimized {
  width: min(248px, calc(100% - 24px)); padding: 7px;
}
#projector-panel.minimized .projector-heading,
#projector-panel.minimized .projector-details,
#projector-panel.minimized #projector-close { display: none; }
#projector-panel.minimized .panel-header { margin-bottom: 6px; }
#projector-panel.minimized #projector-player-window {
  width: 200px; height: 200px; margin-inline: auto; aspect-ratio: auto;
}
#projector-panel.minimized #projector-mini-title,
#projector-panel.minimized #projector-expand { display: block; }
.projector-header-actions { display: flex; align-items: center; gap: 5px; flex: none; }
#projector-mini-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
#projector-expand, #projector-music-toggle, #projector-float, #projector-power-off {
  flex: none; border: 2px solid var(--ink); border-radius: 6px; padding: 4px 6px;
  background: var(--mint); font-size: 12px;
}
.projector-view-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
#projector-float, #projector-power-off { background: #fffdf7; }
#projector-float[aria-checked="true"] { background: var(--mint); }
.projector-music { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
#projector-volume-setting {
  display: grid; grid-template-columns: auto minmax(32px, 1fr) 32px;
  align-items: center; gap: 5px; flex: 1; min-width: 0; margin: 0; font-size: 11px;
}
#projector-volume { padding: 0; accent-color: #492697; }
#projector-volume-value { text-align: right; }
#projector-device-volume { flex: 1; font-size: 11px; }
@media (min-width: 681px) {
  #viewport:has(#match:not([hidden])) #projector-panel.minimized {
    right: auto; left: max(12px, env(safe-area-inset-left));
  }
}
@media (max-width: 680px) {
  #chat-panel { width: min(290px, calc(100% - 140px)); }
  #viewport:has(#projector-panel.minimized:not([hidden])) #match {
    top: calc(max(12px, env(safe-area-inset-top)) + 352px);
    max-height: calc(100% - 378px - env(safe-area-inset-bottom));
  }
}
@media (max-height: 450px) and (min-width: 550px) {
  #projector-panel.minimized { right: max(132px, calc(env(safe-area-inset-right) + 118px)); }
  #viewport:has(#projector-panel.minimized:not([hidden])) #match {
    top: calc(max(12px, env(safe-area-inset-top)) + 44px);
    width: min(340px, calc(100% - 282px));
    max-height: calc(100% - 72px - env(safe-area-inset-bottom));
  }
  #viewport:has(#match:not([hidden])) #projector-panel.minimized {
    left: max(12px, env(safe-area-inset-left)); right: auto;
  }
}