:root {
    --gold: #d8b26a;
    --cream: #efe6d0;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; overflow: hidden; background: #0a0705; }
  body { font-family: Georgia, "Times New Roman", serif; color: var(--cream); }
  #scene { position: fixed; inset: 0; }

  .hud { position: fixed; inset: 0; pointer-events: none; }
  .hud > * { pointer-events: auto; }

  .topbar {
    position: absolute; top: 14px; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 0 22px;
  }
  .brand {
    font-size: 18px; letter-spacing: 3px; color: var(--gold);
    text-transform: uppercase; text-shadow: 0 1px 0 #000;
  }
  .brand small { display: block; font-size: 10px; letter-spacing: 4px; color: #9a8258; }
  .status { font-size: 12px; letter-spacing: 1px; color: #b7a888; }
  .status b { color: var(--gold); }

  .pot-hud {
    position: absolute; top: 16%; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border-radius: 999px;
    background: #000000aa; border: 1px solid #ffffff20;
    color: var(--gold); font-size: 15px; letter-spacing: 1px;
  }
  .pot-hud .dot {
    width: 13px; height: 13px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffe08a, #b5432f);
  }

  .eval-hud {
    position: absolute; left: 22px; bottom: 96px;
    font-size: 12px; letter-spacing: 1px; color: #b7a888;
    background: #00000088; padding: 8px 14px; border-radius: 10px;
    border: 1px solid #ffffff14;
  }
  .eval-hud b { color: var(--gold); display: block; font-size: 15px; margin-top: 2px; }

  .banner {
    position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; padding: 18px 34px;
    background: #000000c8; border: 1px solid var(--gold); border-radius: 14px;
    box-shadow: 0 0 40px #d8b26a30;
    font-size: 22px; color: var(--gold); letter-spacing: 1px;
    opacity: 0; transition: opacity .4s; pointer-events: none !important;
  }
  .banner small { display: block; font-size: 13px; color: var(--cream); margin-top: 6px; }
  .banner.show { opacity: 1; }

  .actions {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center;
    max-width: 96vw;
  }
  .btn {
    font-family: inherit; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 12px 20px; border-radius: 10px;
    border: 1px solid #ffffff25;
    background: linear-gradient(180deg, #241a12ee, #150f09ee);
    color: var(--cream); cursor: pointer;
    transition: transform .08s, border-color .2s, opacity .2s;
  }
  .btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--gold); }
  .btn.fold { color: #d99; }
  .btn.raise {
    background: linear-gradient(180deg, #c79a4e, #9a7331);
    color: #201404; border-color: #e6c682; font-weight: 700;
  }
  .btn:disabled { opacity: .35; cursor: not-allowed; }
  .raise-box {
    display: flex; align-items: center; gap: 10px;
    background: #000000aa; border: 1px solid #ffffff20;
    padding: 8px 12px; border-radius: 10px;
  }
  .raise-box input[type=range] { accent-color: var(--gold); width: 110px; }
  .raise-box .amt { color: var(--gold); font-size: 14px; min-width: 56px; text-align: right; }

  /* quick bet-size pills */
  .quick {
    position: absolute; bottom: 66px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  }
  .quick[hidden] { display: none; }
  .qbtn {
    font-family: inherit; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px;
    border: 1px solid #d8b26a55; background: #00000088; color: var(--gold);
    cursor: pointer; transition: background .15s, border-color .15s;
  }
  .qbtn:hover { background: #d8b26a22; border-color: var(--gold); }
  .qbtn.allin { border-color: #c23b3b88; color: #e07a7a; }
  .qbtn.allin:hover { background: #c23b3b22; border-color: #c23b3b; }

  .btn.auto { color: #8fb3d9; }
  .btn.auto.on {
    background: linear-gradient(180deg, #2f5a8a, #1d3b5e);
    border-color: #6fa3d9; color: #dbeaff; font-weight: 700;
  }

  .log {
    position: absolute; bottom: 104px; left: 50%; transform: translateX(-50%);
    font-size: 12px; letter-spacing: 1px; color: #cbbb96;
    text-shadow: 0 1px 2px #000; text-align: center; max-width: 90vw;
  }

  /* 2D community card panel — corner readout */
  .comm-hud {
    position: absolute; top: 74px; left: 22px;
    display: flex; gap: 6px;
    padding: 8px; border-radius: 10px;
    background: #00000066; border: 1px solid #ffffff14;
  }
  .cardlet {
    width: 38px; height: 54px; border-radius: 6px;
    background: linear-gradient(160deg, #fffdf6, #ece0c8);
    box-shadow: 0 3px 8px rgba(0,0,0,.5);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-weight: 700; color: #1a1a1a; line-height: 1;
  }
  .cardlet .r { font-size: 17px; }
  .cardlet .s { font-size: 15px; margin-top: 1px; }
  .cardlet.red { color: #c23b3b; }
  .cardlet.empty {
    background: #ffffff10; box-shadow: inset 0 0 0 1px #ffffff25;
  }

  /* showdown panel */
  .showdown-hud {
    position: absolute; top: 74px; right: 22px;
    background: #000000b8; border: 1px solid #d8b26a55; border-radius: 12px;
    padding: 12px 16px; min-width: 240px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 20px #d8b26a18;
  }
  .showdown-hud[hidden] { display: none; }
  .sd-title {
    font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gold); margin-bottom: 8px; text-align: center;
  }
  .sd-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
  .sd-name { font-size: 13px; color: var(--cream); min-width: 74px; }
  .sd-hand { font-size: 11px; color: #b7a888; margin-left: 4px; }
  .cardlet.sd { width: 26px; height: 36px; display: inline-flex; }
  .cardlet.sd .r { font-size: 12px; }
  .cardlet.sd .s { font-size: 10px; }

  /* turn timer */
  .timer {
    position: absolute; bottom: 126px; left: 50%; transform: translateX(-50%);
    width: 220px; display: flex; align-items: center; gap: 8px;
  }
  .timer .track {
    flex: 1; height: 5px; border-radius: 3px; background: #ffffff1c; overflow: hidden;
  }
  .timer .fill {
    height: 100%; width: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #d8b26a, #c79a4e);
    transition: width .2s linear;
  }
  .timer .sec { font-size: 12px; color: var(--gold); min-width: 22px; text-align: right; }
  .timer.urgent .fill { background: #c23b3b; }
  .timer.urgent .sec { color: #e66; }

  /* ---------- lobby ---------- */
  .lobby[hidden] { display: none; }
  .lobby {
    position: fixed; inset: 0; z-index: 10;
    display: flex; flex-direction: column; align-items: center;
    /* no justify-center: h1/note margins auto-center when short,
       and the overlay scrolls when content is taller than the screen */
    gap: 26px; padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: radial-gradient(120% 90% at 50% -10%, #2a2018cc 0%, #150f0ae6 60%, #0a0705f2 100%);
    backdrop-filter: blur(3px);
  }
  .lobby h1 { margin-top: auto; }
  .lobby .note { margin-bottom: auto; }
  .lobby h1 {
    font-size: 34px; letter-spacing: 6px; color: var(--gold);
    text-transform: uppercase; text-shadow: 0 2px 0 #000, 0 0 30px #d8b26a30;
    text-align: center;
  }
  .lobby h1 small {
    display: block; font-size: 13px; letter-spacing: 4px; color: #9a8258; margin-top: 6px;
  }
  .rooms {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 260px));
    gap: 16px; justify-content: center; width: min(1140px, 100%);
  }
  .room {
    background: linear-gradient(180deg, #241a12, #171009);
    border: 1px solid #ffffff1c; border-radius: 14px;
    padding: 20px 22px; text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
    transition: transform .12s, border-color .2s, box-shadow .2s;
    cursor: pointer;
  }
  .room:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 24px #d8b26a22;
  }
  .room .rname { font-size: 19px; color: var(--cream); letter-spacing: 1px; }
  .room .stakes { font-size: 14px; color: var(--gold); margin-top: 8px; letter-spacing: 1px; }
  .room .meta { font-size: 12px; color: #9a8258; margin-top: 10px; line-height: 1.9; }
  .room .seated { color: #b7a888; }
  .room.create { border-style: dashed; cursor: default; }
  .room.create label { display: inline-block; margin: 4px 0; }
  .room.create select {
    font-family: inherit; font-size: 12px; margin-left: 6px; padding: 4px 8px;
    background: #0f0a06; color: var(--cream); border: 1px solid #ffffff25; border-radius: 6px;
  }
  .room.create .join { cursor: pointer; }
  .room .live {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #4caf6a; margin-right: 6px; box-shadow: 0 0 6px #4caf6a;
    animation: pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
  .room .join {
    margin-top: 14px; display: inline-block;
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    padding: 9px 22px; border-radius: 8px;
    background: linear-gradient(180deg, #c79a4e, #9a7331);
    color: #201404; font-weight: 700; border: 1px solid #e6c682;
  }
  .lobby .note { font-size: 12px; color: #8f8267; letter-spacing: 1px; }

  .btn-leave {
    font-family: inherit; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 7px 14px; border-radius: 8px; margin-left: 14px;
    border: 1px solid #ffffff25; background: #00000055; color: #b7a888; cursor: pointer;
  }
  .btn-leave:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- responsive: narrow screens (phone/tablet portrait) ---------- */
@media (max-width: 820px) {
  .brand { font-size: 14px; letter-spacing: 2px; }
  .brand small { display: none; }
  .topbar { top: 8px; padding: 0 10px; }
  .status { font-size: 10px; }
  .btn-leave { padding: 5px 8px; font-size: 9px; margin-left: 8px; }
  .pot-hud { top: 40px; font-size: 12px; padding: 4px 12px; }
  .comm-hud { top: 72px; left: 10px; padding: 5px; gap: 4px; }
  .cardlet { width: 28px; height: 40px; }
  .cardlet .r { font-size: 13px; }
  .cardlet .s { font-size: 11px; }
  .eval-hud { bottom: auto; top: 132px; left: 10px; font-size: 10px; padding: 6px 10px; }
  .eval-hud b { font-size: 12px; }
  .showdown-hud { top: 72px; right: 10px; min-width: 180px; padding: 8px 10px; }
  .sd-name { font-size: 11px; min-width: 56px; }
  .sd-hand { font-size: 9px; }
  .cardlet.sd { width: 20px; height: 28px; }
  .actions { bottom: 8px; gap: 6px; }
  .btn { padding: 9px 12px; font-size: 11px; letter-spacing: 1px; }
  .raise-box { padding: 6px 8px; gap: 6px; }
  .raise-box input[type=range] { width: 64px; }
  .raise-box .amt { font-size: 12px; min-width: 44px; }
  .quick { bottom: 104px; gap: 5px; max-width: 96vw; }
  .qbtn { padding: 5px 9px; font-size: 9px; }
  .log { bottom: 158px; font-size: 10px; }
  .timer { bottom: 178px; width: 170px; }
  .banner { font-size: 15px; padding: 12px 18px; max-width: 88vw; }
  .banner small { font-size: 11px; }
  .lobby { gap: 14px; }
  .lobby h1 { font-size: 22px; letter-spacing: 3px; }
  .lobby h1 small { font-size: 10px; letter-spacing: 2px; }
  .rooms { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .room { padding: 12px; }
  .room .rname { font-size: 15px; }
  .room .stakes { font-size: 12px; }
  .room .meta { font-size: 10px; line-height: 1.6; }
  .room .join { padding: 7px 14px; font-size: 10px; }
}

/* ---------- responsive: short screens (phone landscape) ---------- */
@media (max-height: 480px) {
  .brand { font-size: 13px; }
  .brand small { display: none; }
  .topbar { top: 6px; }
  .pot-hud { top: 38px; font-size: 12px; padding: 4px 12px; }
  .comm-hud { top: 66px; left: 10px; padding: 4px; gap: 4px; }
  .cardlet { width: 26px; height: 36px; }
  .cardlet .r { font-size: 12px; }
  .cardlet .s { font-size: 10px; }
  .eval-hud { bottom: auto; top: 110px; left: 10px; font-size: 10px; padding: 5px 8px; }
  .eval-hud b { font-size: 11px; }
  .showdown-hud { top: 38px; right: 10px; min-width: 170px; padding: 6px 8px; }
  .cardlet.sd { width: 18px; height: 26px; }
  .actions { bottom: 6px; gap: 6px; }
  .btn { padding: 7px 10px; font-size: 10px; letter-spacing: 1px; }
  .raise-box { padding: 4px 8px; }
  .raise-box input[type=range] { width: 60px; }
  .quick { bottom: 46px; gap: 4px; }
  .qbtn { padding: 4px 8px; font-size: 9px; }
  .log { bottom: 86px; font-size: 10px; }
  .timer { bottom: 104px; width: 160px; }
  .lobby { gap: 12px; padding: 10px; }
  .lobby h1 { font-size: 18px; }
  .rooms { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .room { padding: 10px; }
  .room .rname { font-size: 13px; }
  .room .meta { font-size: 9px; line-height: 1.5; }
}