:root {
  --bg: #1a1636;
  --panel: rgba(28, 22, 58, 0.82);
  --ink: #f4efff;
  --muted: #b8aee0;
  --accent: #ffd36b;
  --accent2: #8fd3ff;
  --font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font);
  overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

#ui { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  pointer-events: none; }
#ui:empty, #ui:has(> :not(.hidden)) { pointer-events: auto; }
.screen { background: var(--panel); backdrop-filter: blur(10px); border-radius: 22px; padding: 22px 26px;
  width: min(92vw, 560px); max-height: 94vh; overflow: auto; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); }
h1 { margin: 0 0 4px; font-size: clamp(30px, 7vw, 48px); letter-spacing: 1px; color: var(--accent);
  text-shadow: 0 2px 0 #7a4e00, 0 0 24px rgba(255, 211, 107, .35); }
#lobby-code { font-family: ui-monospace, Menlo, monospace; letter-spacing: 8px; }
.sub { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
label { display: block; text-align: left; color: var(--muted); font-size: 13px; margin: 8px 0; }
input { width: 100%; margin-top: 4px; padding: 10px 12px; font-size: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.25); color: var(--ink); font-family: var(--font); }
input:focus { outline: 2px solid var(--accent2); }
select { width:100%; margin-top:4px; padding:10px 12px; border:1px solid #68607e; border-radius:12px; color:var(--ink); background:#24203b; font:16px var(--font); }
select:focus-visible { outline:2px solid var(--accent2); }
select:disabled { opacity:1; color:var(--muted); }
.row { display: flex; gap: 10px; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-top: 14px; }
.join { display: flex; gap: 6px; }
.join input { width: 110px; margin: 0; text-align: center; letter-spacing: 4px; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }
button { padding: 12px 20px; font-size: 17px; font-weight: 700; border-radius: 14px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: var(--ink); font-family: var(--font); }
button.primary { background: var(--accent); color: #3a2400; box-shadow: 0 4px 0 #a66f00; }
button:active { transform: translateY(2px); }
button:disabled { opacity: .45; cursor: default; }
.error { color: #ff9a9a; min-height: 1.2em; margin: 8px 0 0; font-size: 14px; }
.hint { color: var(--muted); font-size: 13px; margin: 10px 0 0; }

/* A game-entry menu, not another lobby form. */
.title-screen { width:min(92vw,650px); padding:26px 30px 22px; background:rgba(19,24,42,.91); border-color:#75664a; }
.title-eyebrow { margin:0 0 8px; color:#c5cfce; font-size:13px; letter-spacing:.08em; }
#home-title { font-size:clamp(58px,12vw,88px); line-height:.98; letter-spacing:-3px; }
#home-title span { color:#f2edd7; }
.title-cast { height:134px; display:flex; justify-content:center; align-items:flex-end; gap:10px; margin:12px 0 8px; }
.title-cast img { width:22%; max-width:100px; height:130px; object-fit:contain; filter:drop-shadow(0 6px 6px #0a101c); }
.title-cast img:nth-child(2) { height:144px; }
.title-tagline { margin:10px 0 20px; font-size:clamp(14px,3.5vw,18px); color:#e3e6db; }
#btn-play { min-width:220px; min-height:58px; font-size:23px; }
.title-mode { font-size:12px; color:#b8c3c9; margin:14px 0 20px; }
#home-courses { display:flex; flex-wrap:wrap; justify-content:center; gap:5px 18px; list-style:none; padding:14px 0 0; margin:0; border-top:1px solid #414a50; font-size:12px; color:#d4d6c9; }
.title-controls { margin:14px 0 0; color:#b1b8c6; font-size:11px; line-height:1.5; }
.quiet { margin-top:10px; padding:10px 16px; min-height:44px; font-size:13px; background:transparent; color:var(--muted); }
@media (max-height:500px) and (orientation:landscape) {
 .title-screen { padding:15px 24px; }
 #home-title { font-size:52px; }
 .title-cast { display:none; }
 .title-tagline { margin:10px 0 12px; }
 #btn-play { min-height:50px; }
 .title-mode { margin:10px 0; }
 #home-courses { padding-top:10px; }
 .title-controls { margin-top:10px; }
}

.chars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 10px 0; }
@media (max-width: 520px) { .chars { grid-template-columns: repeat(4, 1fr); } }
.char { aspect-ratio: 1; border-radius: 14px; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center;
  border: 2px solid transparent; cursor: pointer; position: relative; }
.char img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.char.sel { border-color: var(--accent); background: rgba(255, 211, 107, .18); }
.char.taken { opacity: .35; cursor: default; }
.char .tag { position: absolute; bottom: 3px; left: 0; right: 0; font-size: 10px; color: var(--accent2); font-weight: 700;
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0 4px; }

#lobby-players { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#lobby-players li { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.25); border-radius: 999px; padding: 6px 14px 6px 6px; font-weight: 700; }
#lobby-players img { width: 34px; height: 34px; object-fit: contain; }
#lobby-players .host { color: var(--accent); font-size: 11px; }

#results-list { text-align: left; padding: 0; margin: 10px auto; list-style: none; max-width: 360px; }
#results-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; margin-bottom: 6px; background: rgba(0,0,0,.22); font-size: 18px; font-weight: 700; }
#results-list li:first-child { background: rgba(255, 211, 107, .22); }
#results-list img { width: 44px; height: 44px; object-fit: contain; }
#results-list .medal { font-size: 24px; width: 32px; text-align: center; }
#results-list .time { margin-left: auto; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none;
  padding: calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 14px) calc(env(safe-area-inset-bottom) + 14px) calc(env(safe-area-inset-left) + 14px); }
#place { position: absolute; top: calc(env(safe-area-inset-top) + 8px); left: calc(env(safe-area-inset-left) + 14px);
  font-size: 34px; font-weight: 900; color: var(--accent); text-shadow: 0 2px 0 #7a4e00, 0 0 18px rgba(0,0,0,.5); }
#progress { position: absolute; top: calc(env(safe-area-inset-top) + 20px); left: 50%; transform: translateX(-50%);
  width: min(50vw, 420px); height: 6px; background: rgba(255,255,255,.2); border-radius: 3px; }
#progress-heads { position: relative; height: 100%; }
#progress-heads img { position: absolute; top: 50%; width: 30px; height: 30px; object-fit: contain; transform: translate(-50%, -50%);
  transition: left .1s linear; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
#progress-heads img.me { width: 40px; height: 40px; z-index: 2; }
#btn-item { position: absolute; right: calc(env(safe-area-inset-right) + 18px); bottom: calc(env(safe-area-inset-bottom) + 18px);
  width: 86px; height: 86px; border-radius: 50%; pointer-events: auto; font-size: 40px; padding: 0;
  background: radial-gradient(circle at 35% 30%, #fff6d0, var(--accent) 60%, #d99b17); box-shadow: 0 6px 0 #8a5a00, 0 0 30px rgba(255, 211, 107, .5);
  animation: pop .35s ease-out; }
@keyframes pop { from { transform: scale(.4); } to { transform: scale(1); } }
#banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: clamp(40px, 12vw, 96px); font-weight: 900;
  color: #fff; text-shadow: 0 4px 0 #3a2a6a, 0 0 30px rgba(143, 211, 255, .8); opacity: 0; transition: opacity .15s; }
#banner.show { opacity: 1; }
#tap-hint { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 20px); transform: translateX(-50%);
  color: rgba(255,255,255,.7); font-size: 14px; letter-spacing: 1px; opacity: 0; transition: opacity .3s; }
#tap-hint.show { opacity: 1; }

/* Play surface: choices on the left, actions on the right. */
#route-status { position:absolute; top:calc(env(safe-area-inset-top) + 61px); left:14px; right:14px; text-align:center; font-size:14px; color:#e4e9cf; text-shadow:0 2px 3px #000; }
#route-controls { position:absolute; left:calc(env(safe-area-inset-left) + 16px); bottom:calc(env(safe-area-inset-bottom) + 22px); display:flex; flex-direction:column; gap:8px; }
#route-controls button, #btn-jump { pointer-events:auto; min-height:52px; border:2px solid #60707a; background:#182638; font-size:17px; padding:8px 15px; border-radius:12px; text-align:left; }
#route-controls button[aria-pressed="true"] { border-color:#ffd36b; color:#ffd36b; background:#35413b; }
#route-controls button:disabled { opacity:.72; }
#route-controls span, #btn-jump span { display:block; font-size:10px; font-weight:400; margin-top:3px; color:#c6ced7; }
#btn-jump { position:absolute; right:calc(env(safe-area-inset-right) + 16px); bottom:calc(env(safe-area-inset-bottom) + 22px); min-width:118px; height:68px; background:#dcb46e; border-color:#ffe4a0; color:#2a2117; text-align:center; }
#btn-jump span { color:#3d352c; }
#btn-item { right:calc(env(safe-area-inset-right) + 37px); bottom:calc(env(safe-area-inset-bottom) + 108px); width:68px; height:68px; font-size:32px; }
#tap-hint { bottom:calc(env(safe-area-inset-bottom) + 195px); width:90%; text-align:center; font-size:12px; }
button:focus-visible { outline:3px solid #8fd3ff; outline-offset:3px; }
@media (max-height:500px) and (orientation:landscape) {
 #route-status { top:45px; font-size:12px; }
 #route-controls { bottom:12px; gap:6px; }
 #route-controls button { min-height:44px; font-size:14px; padding:5px 10px; }
 #btn-jump { bottom:12px; height:54px; }
 #btn-item { right:150px; bottom:12px; width:54px; height:54px; font-size:27px; }
 #tap-hint { bottom:18px; width:40%; }
}