:root{
    --felt: #14335C;
    --felt-dark: #0A1F3D;
    --felt-light: #21538F;
    --card-bg: #F4ECDA;
    --card-edge: #D9C99C;
    --ink: #221B14;
    --red: #9C3B2B;
    --gold: #C9A227;
    --gold-light: #E8C766;
    --muted: #9FB0A4;
    --white: #FBF8F0;

  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background: radial-gradient(ellipse at 50% -10%, var(--felt-light) 0%, var(--felt) 45%, var(--felt-dark) 100%);
    color:var(--white);
    font-family:'Work Sans', sans-serif;
    min-height:100vh;
    padding:20px 12px 60px;
  }
  .wrap{max-width:700px;margin:0 auto;}

  header{text-align:center;margin-bottom:16px;}
  h1{
    font-family:'Bitter', serif;font-weight:900;
    font-size:clamp(26px,6vw,38px);letter-spacing:.5px;margin:0 0 4px;
    color:var(--gold-light);text-shadow:0 2px 0 rgba(0,0,0,.35);
  }
  .subtitle{color:var(--muted);font-size:13.5px;margin:0;}
  .rules-toggle{
    display:block;margin:12px auto 0;background:none;border:1px solid rgba(232,199,102,.4);
    color:var(--gold-light);font-size:13px;padding:6px 14px;border-radius:20px;cursor:pointer;
  }
  .rules-toggle:hover{border-color:var(--gold);}
  .rules-panel{
    display:none;background:rgba(0,0,0,.25);border:1px solid rgba(232,199,102,.25);
    border-radius:10px;padding:14px 18px;margin:12px 0;font-size:13px;line-height:1.6;color:#DCE7E0;text-align:left;
  }
  .rules-panel.open{display:block;}
  .rules-panel b{color:var(--gold-light);}
  .rules-panel ul{margin:6px 0 0;padding-left:20px;}
  /* ---- Controls ---- */
  .controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 6px;}
  button.main-btn{
    font-family:'Bitter';font-weight:700;font-size:15px;background:var(--gold);color:var(--felt-dark);
    border:none;border-radius:9px;padding:12px 26px;cursor:pointer;box-shadow:0 4px 0 #8f7514;transition:transform .05s ease;
  }
  button.main-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8f7514;}
  button.main-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}
  button.ghost-btn{
    font-family:'Work Sans';font-weight:600;font-size:13.5px;background:transparent;color:var(--white);
    border:1px solid rgba(255,255,255,.25);border-radius:9px;padding:11px 18px;cursor:pointer;
  }
  button.ghost-btn.active{border-color:var(--gold);color:var(--gold-light);background:rgba(201,162,39,.12);}
  button:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px;}

  /* Shared form control style. font-size:16px avoids iOS Safari's
     auto-zoom-on-focus for inputs smaller than that. */
  .ft-input{
    flex:1;min-width:0;padding:11px 12px;border-radius:8px;
    border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);
    color:var(--white);font-family:'Work Sans';font-size:16px;
    -webkit-appearance:none;appearance:none;
  }
  .ft-input::placeholder{color:var(--muted);}

  button, .choice-slot, .stance-btn, [data-join], .room-row{touch-action:manipulation;}
  .main-btn, .ghost-btn{min-height:44px;}
  .speed-row{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:4px;font-size:12.5px;color:var(--muted);}
  .speed-row input{accent-color:var(--gold);}

  /* ---- Log ---- */
  details.log{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 14px;margin-top:16px;}
  details.log summary{cursor:pointer;font-family:'Bitter';font-weight:700;font-size:14px;color:var(--gold-light);}
  .log-list{max-height:200px;overflow-y:auto;margin-top:10px;font-size:12.5px;color:#D6E0D9;}
  .log-list div{padding:4px 2px;border-bottom:1px solid rgba(255,255,255,.06);}
  .log-list div:last-child{border-bottom:none;}

  /* ---- Winner overlay ---- */
  .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);align-items:center;justify-content:center;z-index:90;padding:20px;}
  .screen{display:none;padding:6px 0 20px;}
  .screen.open{display:block;}
  .screen .overlay-card{margin:0 auto;}
  .overlay.open{display:flex;}
  .overlay-card{background:var(--felt);border:2px solid var(--gold);border-radius:16px;padding:28px 22px;text-align:center;max-width:340px;width:100%;box-sizing:border-box;}
  .overlay-card h2{font-family:'Bitter';color:var(--gold-light);margin:0 0 8px;font-size:23px;}
  .overlay-card p{color:#D6E0D9;font-size:14px;margin:0 0 20px;}
  .overlay-card.choice-card{max-width:480px;}
  .room-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 12px;}
  .room-row .room-info{display:flex;flex-direction:column;}
  .room-row .room-name{font-family:'Bitter';font-weight:700;font-size:13.5px;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}
  .room-row .room-meta{font-size:11.5px;color:var(--muted);}

  .pill-btn{border-radius:28px !important;}
  .rank-row{display:flex;align-items:center;gap:10px;padding:5px 4px;border-radius:9px;color:var(--white);font-size:13px;}
  .rank-row.top{background:rgba(201,162,39,.16);}
  .rank-row .rank-num{font-family:'Bitter';font-weight:900;width:16px;flex-shrink:0;}
  .rank-row .rank-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;}
  .rank-row .rank-wins{font-size:12px;font-weight:700;flex-shrink:0;}

  .game-card{background:rgba(255,255,255,.06);border:1px solid rgba(201,162,39,.35);border-radius:14px;overflow:hidden;margin-bottom:12px;}
  .game-card-image{
    aspect-ratio:10/4;display:flex;align-items:center;justify-content:center;
    background:repeating-linear-gradient(45deg,#173a63,#173a63 10px,#122f52 10px,#122f52 20px);
    color:#6E85A8;font-size:12px;
  }
  .game-card-image img{width:100%;height:100%;object-fit:cover;}
  .game-card-info{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .game-card-title{font-family:'Bitter';font-weight:900;color:var(--white);font-size:15px;}
  .game-card-tagline{color:var(--muted);font-size:11px;margin-top:2px;}
  .game-card-soon{background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.18);border-radius:14px;padding:20px 14px;text-align:center;color:#6E7C76;font-size:12.5px;}

  /* ---- Shared card primitive (used by every game's hand/table cards) ---- */
  .f-card{width:90px;height:142px;border-radius:7px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.5);border:1.5px solid var(--card-edge);background:#F4ECDA;}
  .f-card img{width:100%;height:100%;object-fit:contain;display:block;background:#F4ECDA;}
  .f-card.placeholder{background:rgba(255,255,255,.04);border:1.5px dashed rgba(255,255,255,.18);box-shadow:none;}

  .f-status{text-align:center;color:var(--gold-light);font-family:'Bitter';font-weight:700;font-size:14px;min-height:20px;margin:6px 0;}

  @media (max-width:480px){
    body{padding:8px 6px 30px;}
    header{margin-bottom:8px;}
    h1{font-size:24px;margin-bottom:0;}
    .subtitle{display:none;}
    .rules-toggle{margin-top:6px;padding:4px 12px;font-size:12px;}
    .controls{gap:6px;margin:10px 0 4px;}
    .main-btn, .ghost-btn{padding:9px 14px;font-size:13px;min-height:38px;}
    details.log{padding:8px 12px;margin-top:8px;}
    .overlay-card{padding:20px 14px;}
  }