:root { color-scheme:dark; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:#0c1220; color:#f0f3fc; font-size:16px; line-height:1.5; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; background:radial-gradient(ellipse at top,#252044 0,transparent 60%); }
.shell { width:min(100%,720px); margin:auto; padding:28px 24px max(24px,env(safe-area-inset-bottom)); }
.platform-header { display:flex; gap:14px; align-items:center; margin-bottom:20px; }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; background:#8270ee; border-radius:14px; font-size:28px; font-weight:800; flex:none; }
.eyebrow { color:#c4baff; letter-spacing:.13em; font-size:.65rem; font-weight:700; margin:0 0 3px; }
h1 { margin:0; font-size:clamp(1.4rem,3.8vw,1.85rem); letter-spacing:-.04em; line-height:1.15; }
h2 { margin:0 0 8px; font-size:clamp(1.35rem,4.5vw,1.65rem); line-height:1.3; }
.player-badge { margin-left:auto; background:#27374b; color:#a3eed6; border-radius:30px; padding:8px 12px; font-size:.8rem; overflow-wrap:anywhere; max-width:130px; }
.package-strip { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:.75rem; color:#b6c0d6; padding:10px 2px; border-top:1px solid #344055; margin-bottom:16px; }
.package-strip span:last-child { color:#d2caff; overflow-wrap:anywhere; }
.join-card { display:grid; gap:20px; background:#172135; border:1px solid #344059; border-radius:18px; padding:28px; box-shadow:0 16px 60px #0002; }
.card-heading p { color:#b4c1d8; margin:0; }
.field { display:grid; gap:8px; }
label { display:block; font-weight:600; font-size:.95rem; }
small { color:#b4c1d8; font-size:.8rem; }
input,textarea,button { font:inherit; border-radius:10px; width:100%; }
input,textarea { border:1px solid #596780; background:#0f192c; color:#f6f8ff; padding:14px 16px; min-height:52px; }
input::placeholder,textarea::placeholder { color:#9aa9c2; opacity:1; }
#code { font-size:1.7rem; letter-spacing:.25em; text-transform:uppercase; font-weight:700; }
textarea { min-height:124px; resize:vertical; line-height:1.6; }
button { border:1px solid transparent; background:#8976f5; color:#fff; padding:14px 18px; cursor:pointer; min-height:52px; font-weight:650; transition:background .15s,transform .15s; }
button:hover:not(:disabled) { background:#9b89ff; }
button:active:not(:disabled) { transform:translateY(1px); }
button.primary { background:#8976f5; }
button.secondary { background:#25334d; border-color:#586682; color:#edf1fb; }
button:disabled { opacity:.55; cursor:default; }
:focus-visible { outline:3px solid #f6ce77; outline-offset:3px; }
.password-options { color:#c4cde0; font-size:.85rem; }
.password-options label { margin:12px 0 8px; }
summary { cursor:pointer; padding:8px 0; min-height:40px; }
.connection-status { display:flex; align-items:center; gap:10px; padding:12px 14px; margin:14px 0; background:#1b2a3f; border:1px solid #3a526e; border-radius:10px; color:#bed2eb; font-size:.9rem; overflow-wrap:anywhere; }
.connection-status::before { content:""; width:8px; height:8px; background:#99dbc3; border-radius:50%; flex:none; }
.connection-status.error { color:#ffced5; border-color:#a35d70; background:#362031; }
.connection-status.error::before { background:#ff99ae; }
.connection-status.loading::before { animation:pulse 1s ease-in-out infinite; background:#c1b5ff; }
#game { display:grid; gap:18px; }
#game:empty { display:none; }
#game > h2 { margin:10px 0 0; }
.prompt { padding:22px; background:#1d2b43; border:1px solid #415472; border-radius:15px; font-size:1.08rem; overflow-wrap:anywhere; }
.prompt:empty { display:none; }
.prompt > *:first-child { margin-top:0; }
.prompt > *:last-child { margin-bottom:0; }
.prompt img { border-radius:10px; background:#0b1424; max-height:360px; object-fit:contain; }
#game form { display:grid; gap:12px; background:#162136; border:1px solid #354763; padding:22px; border-radius:15px; }
.choice { color:#f4f7ff; background:#20304a; border:1px solid #566b8d; text-align:left; font-weight:500; overflow-wrap:anywhere; }
.choice:hover:not(:disabled) { background:#334164; border-color:#af9dff; }
.choice > div + div { margin-top:8px; }
.choice .thumbnail { max-height:150px; }
img { display:block; max-width:100%; height:auto; margin:12px auto; }
.error { color:#ffb5c4; }
.leave { margin-top:24px; }
footer { text-align:center; color:#9cacbf; font-size:.8rem; margin-top:28px; }
footer p { margin:6px 0; }
.notice { font-size:.75rem; line-height:1.6; }
.test-tools { margin-top:24px; font-size:.85rem; color:#acb8cd; border-top:1px solid #324057; padding-top:8px; }
.test-tools textarea { margin:8px 0 12px; }
[hidden] { display:none!important; }
@keyframes pulse { 50% { opacity:.3; } }
@media (max-width:480px) {
  .shell { padding:20px 16px max(20px,env(safe-area-inset-bottom)); }
  .join-card { padding:22px 18px; gap:18px; }
  .prompt,#game form { padding:18px; }
  .platform-header { gap:10px; }
  .brand-mark { width:42px; height:42px; border-radius:12px; }
  .player-badge { padding:6px 8px; max-width:85px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before { animation:none!important; transition:none!important; } }