* { margin:0; padding:0; box-sizing:border-box; }
  body {
    background:#12131f; color:#f5f0e8;
    font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height:100vh; display:flex; flex-direction:column; align-items:center;
    padding:14px; user-select:none;
  }
  h1.title {
    font-size:44px; margin:10px 0 2px;
    background:linear-gradient(90deg,#ffb347,#ff5a5f,#ff8fd6);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    letter-spacing:1px;
  }
  .tagline { color:#b8b2c8; margin-bottom:18px; font-style:italic; }
  .screen { display:none; flex-direction:column; align-items:center; width:100%; max-width:900px; }
  .screen.on { display:flex; }
  .cardrow { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
  .mcard {
    background:#1f2135; border:2px solid #34365a; border-radius:16px;
    padding:22px 24px; width:262px; text-align:center;
  }
  .mcard h3 { font-size:19px; margin-bottom:8px; }
  .mcard p { font-size:13px; color:#b8b2c8; margin-bottom:14px; min-height:52px; }
  button {
    background:linear-gradient(180deg,#ff8a3d,#f4552e); color:#fff; border:none;
    border-radius:12px; padding:11px 20px; font-size:15px; font-weight:700;
    cursor:pointer; font-family:inherit; box-shadow:0 3px 0 #b23315;
  }
  button:hover { filter:brightness(1.1); }
  button:active { transform:translateY(2px); box-shadow:0 1px 0 #b23315; }
  button.alt { background:linear-gradient(180deg,#4fc3f7,#2f8fd4); box-shadow:0 3px 0 #1c5f95; }
  button.ghost { background:#2a2c48; box-shadow:0 3px 0 #191a30; }
  button.small { padding:7px 12px; font-size:13px; }
  input[type=text] {
    background:#12131f; border:2px solid #34365a; color:#fff; border-radius:10px;
    padding:10px 12px; font-size:15px; width:100%; margin-bottom:10px; text-align:center;
    font-family:inherit; text-transform:uppercase;
  }
  input.name { text-transform:none; }
  .pillrow { display:flex; gap:8px; justify-content:center; margin-bottom:12px; }
  .pill {
    background:#2a2c48; border:2px solid #34365a; border-radius:10px; padding:8px 14px;
    cursor:pointer; font-weight:700;
  }
  .pill.sel { background:#f4552e; border-color:#ffb347; }
  .howto {
    background:#1f2135; border-radius:14px; padding:16px 20px; margin-top:22px;
    font-size:13.5px; color:#cfc9de; max-width:820px; line-height:1.65;
  }
  .howto b { color:#ffb347; }
  .kbd { background:#34365a; border-radius:5px; padding:1px 7px; font-family:monospace; font-size:12px; color:#fff; }
  #lobbyCode {
    font-size:42px; font-weight:900; letter-spacing:12px; color:#ffb347;
    background:#1f2135; border-radius:14px; padding:10px 28px; margin:12px 0;
    border:2px dashed #ffb34766;
  }
  .plist { display:flex; gap:14px; margin:14px 0 20px; flex-wrap:wrap; justify-content:center; }
  .pslot {
    width:130px; background:#1f2135; border-radius:14px; padding:14px 8px; text-align:center;
    border:2px solid #34365a;
  }
  .pslot .face { font-size:36px; }
  .pslot .pname { font-weight:700; margin-top:6px; font-size:14px; }
  .pslot.empty { opacity:.35; }
  #gamewrap { position:relative; display:none; }
  #gamewrap.on { display:block; }
  canvas { border-radius:14px; display:block; background:#1a1c2c; max-width:100%; }
  #recbtn {
    position:absolute; top:-46px; right:0;
  }
  #leavebtn {
    position:absolute; top:-46px; left:0;
  }
  #hint { color:#8f89a3; font-size:12.5px; margin-top:8px; text-align:center; }
  #endscreen .stars { font-size:56px; margin:6px 0; }
  #endscreen .stat { color:#cfc9de; font-size:15px; margin:3px 0; }
  #endscreen h2 { font-size:30px; margin-bottom:6px; }
  .btnrow { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; justify-content:center; }
  .err { color:#ff7676; min-height:20px; font-size:13px; }
  #endRank { margin-top:14px; display:flex; flex-direction:column; gap:6px; width:100%; max-width:660px; }
  .rankrow {
    display:flex; align-items:center; gap:10px; background:#1f2135;
    border:2px solid #34365a; border-radius:12px; padding:8px 14px; font-size:14px;
  }
  .rankrow.top { border-color:#ffd54a; box-shadow:0 0 12px #ffd54a33; }
  .rankrow.bot { opacity:.85; border-style:dashed; }
  .rmedal { font-size:20px; width:26px; }
  .rface  { font-size:22px; }
  .rname  { font-weight:700; min-width:72px; text-align:left; }
  .rtitle { color:#ffb347; font-weight:700; flex:1; text-align:left; }
  .rstats { color:#8f89a3; font-size:12.5px; white-space:nowrap; }
  .rscore { font-weight:900; color:#7dff9b; min-width:56px; text-align:right; }
  .waiting { color:#8f89a3; font-style:italic; }