* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: #07080a; color: #e6edf3; overflow: hidden;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; align-items: center; justify-content: center;
}
canvas#game { display: block; image-rendering: pixelated; }

#ui {
  position: fixed; inset: 0; overflow: auto; padding: 24px 16px;
  display: flex; align-items: flex-start; justify-content: center;
  background:
    radial-gradient(ellipse at 20% 110%, rgba(255, 183, 3, .10), transparent 55%),
    radial-gradient(ellipse at 80% 110%, rgba(255, 77, 141, .10), transparent 55%),
    repeating-linear-gradient(0deg, #1b2218 0 6px, #1e261a 6px 12px);
}
.screen {
  width: 100%; max-width: 440px; margin: auto; padding: 28px;
  background: #12151a; border: 1px solid #2a3038; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; gap: 12px;
}
.screen.wide { max-width: 520px; }

h1 {
  margin: 0; text-align: center; font-size: 54px; font-weight: 900; letter-spacing: .12em;
  background: linear-gradient(90deg, #ffb703, #ff4d8d); -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 { margin: 0 0 4px; font-size: 24px; text-align: center; }
h3 { margin: 10px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #8b949e; }
.tag { margin: -8px 0 10px; text-align: center; color: #8b949e; }
p { margin: 0; }

button {
  font: inherit; font-weight: 700; color: #14171c; background: #ffb703;
  border: 0; border-radius: 9px; padding: 12px 18px; cursor: pointer;
  transition: transform .06s, filter .12s;
}
button:hover { filter: brightness(1.1); }
button:active { transform: translateY(1px); }
button:focus-visible, input:focus-visible { outline: 2px solid #4cc9f0; outline-offset: 2px; }
button.ghost { background: transparent; color: #c9d1d9; border: 1px solid #3a414b; }
button b { display: inline-block; width: 1.4em; opacity: .65; }

input {
  font: inherit; color: #e6edf3; background: #0b0d10; border: 1px solid #3a414b;
  border-radius: 9px; padding: 11px 12px; width: 100%; min-width: 0;
}
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #8b949e; }
.row { display: flex; gap: 8px; }
.row button { white-space: nowrap; }

.help { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.help div { display: flex; flex-direction: column; background: #0b0d10; border-radius: 9px; padding: 10px 12px; font-size: 13px; color: #c9d1d9; }
.rules { font-size: 13px; color: #8b949e; }
.rules b { color: #c9d1d9; }

#rooms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 38vh; overflow: auto; }
#rooms li { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #0b0d10; border-radius: 9px; padding: 10px 12px; }
#rooms li div { display: flex; flex-direction: column; min-width: 0; }
#rooms li strong, #rooms li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rooms li span { font-size: 13px; color: #8b949e; }
#rooms li button { padding: 8px 14px; }
#rooms li.empty { color: #8b949e; font-size: 14px; justify-content: center; text-align: center; }
.status { min-height: 1.4em; color: #ffd166; font-size: 14px; text-align: center; }

#s-wait { text-align: center; }
.spinner { width: 38px; height: 38px; margin: 10px auto; border-radius: 50%; border: 4px solid #2a3038; border-top-color: #ffb703; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 4s; } }

#overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4, 5, 7, .62); padding: 16px; }
#overlay .box { background: #12151a; border: 1px solid #2a3038; border-radius: 14px; padding: 26px 30px; min-width: 280px; max-width: 440px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
#ov-text { color: #c9d1d9; font-size: 20px; margin: 6px 0 0; }
#ov-text:empty { display: none; }
#ov-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

#toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #23272e; border: 1px solid #3a414b; color: #e6edf3; padding: 10px 16px; border-radius: 9px; font-size: 14px; pointer-events: none; }

/* ---------- mobile ---------- */
.mobile-only { display: none; }
body.mobile .mobile-only { display: inline; }
body.mobile .desktop-only { display: none !important; }
body.mobile { touch-action: manipulation; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body.mobile input { -webkit-user-select: text; user-select: text; font-size: 16px; }
h1 { font-size: clamp(34px, 12vw, 54px); }

#touch { position: fixed; inset: 0; touch-action: none; -webkit-touch-callout: none; }
#joy {
  position: absolute; left: calc(84px + env(safe-area-inset-left)); bottom: calc(var(--hud, 0px) + 22px + env(safe-area-inset-bottom));
  width: 112px; height: 112px; border-radius: 50%; pointer-events: none; transform: translateX(-50%);
  border: 2px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06);
}
#joy.active { transform: translate(-50%, -50%); border-color: rgba(255, 183, 3, .7); }
#knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px; border-radius: 50%; background: rgba(255, 255, 255, .32); }
#joy.active #knob { background: rgba(255, 183, 3, .75); }
#t-fire {
  position: absolute; right: calc(28px + env(safe-area-inset-right)); bottom: calc(var(--hud, 0px) + 26px + env(safe-area-inset-bottom));
  width: 96px; height: 96px; border-radius: 50%; pointer-events: none;
  display: flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: .08em;
  color: rgba(255, 255, 255, .7); border: 2px solid rgba(255, 77, 141, .6); background: rgba(255, 77, 141, .16);
}
#t-fire.active { background: rgba(255, 77, 141, .55); color: #fff; }
#t-pause {
  position: absolute; left: calc(10px + env(safe-area-inset-left)); top: calc(10px + env(safe-area-inset-top));
  width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 15px;
  color: #e6edf3; background: rgba(18, 21, 26, .7); border: 1px solid rgba(255, 255, 255, .25);
}

@media (orientation: portrait) {
  body.mobile { align-items: flex-start; }
}
@media (max-height: 480px) {
  .screen { padding: 18px; gap: 9px; }
  button { padding: 10px 16px; }
  #rooms { max-height: none; }
}
@media (max-width: 480px) {
  .screen { padding: 20px; }
  .row { flex-direction: column; }
  #ov-btns { flex-direction: column; }
}