* { box-sizing: border-box; }
body {
  margin: 0; padding: 16px; background: #14161c; color: #e8e8ea;
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
}
h1, h2 { margin: 0 0 10px; }
.muted { color: #9aa0aa; }
button {
  background: #2b6fe0; color: #fff; border: 0; border-radius: 10px;
  padding: 12px 18px; font-size: 16px; font-weight: 700; cursor: pointer;
}
button:disabled { background: #3a3f49; color: #7a808a; cursor: not-allowed; }
button.big { font-size: 22px; padding: 18px 30px; }
button.ghost { background: #262a33; }
input, select {
  background: #1d2028; color: #e8e8ea; border: 1px solid #3a3f49;
  border-radius: 8px; padding: 10px 12px; font-size: 16px;
}
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.panel { background: #1b1e26; border: 1px solid #2a2e38; border-radius: 14px;
         padding: 16px; margin-bottom: 16px; }

/* 1-90 number board */
.board { display: grid; grid-template-columns: repeat(10, 32px); gap: 4px; }
.board .n {
  width: 32px; height: 27px; display: flex; align-items: center; justify-content: center;
  background: #23262f; border-radius: 6px; font-weight: 800; font-size: 13px;
  color: #cfd3db;
}
.board .n.hit { background: #2b6fe0; color: #fff; }
.board .n.last { background: #f2b01e; color: #1a1a1a; animation: pulse 1s ease-in-out 5; }

/* last-drawn badge */
.lastnum { font-size: 46px; font-weight: 900; color: #f2b01e; min-width: 70px;
           text-align: center; }

/* tombala card */
.tcard { display: inline-block; border: 5px solid var(--theme, #2b6fe0); border-radius: 12px;
         background: #fff; padding: 8px; }
.tgrid { display: grid; grid-template-columns: repeat(9, 40px);
         grid-template-rows: repeat(3, 40px); }
.tcell { display: flex; align-items: center; justify-content: center;
         border: 1px solid var(--theme, #2b6fe0); font-weight: 900; font-size: 18px;
         color: var(--theme, #1a2b6e); }
.tcell.blank { background: var(--theme, #2b6fe0); }
.tcell.num { background: #fff; }
.tcell.marked { background: #e5140c; color: #fff; border-radius: 50%; }  /* red daub */
.tcell.shine { animation: shine 1s ease-in-out 5; z-index: 2; }

/* card picker — each card shows its numbers in its own vivid color */
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
            gap: 12px; }
.pick { border: 3px solid var(--theme,#2a2e38); border-radius: 10px; padding: 8px;
        cursor: pointer; background: #20242d; text-align: center; }
.pick:hover { filter: brightness(1.18); }
.pick.taken { opacity: .4; cursor: not-allowed; filter: grayscale(.5); }
.pick.mine { outline: 4px solid #f2b01e; }
.pick .plabel { font-size: 13px; font-weight: 800; margin-bottom: 6px; color: var(--theme,#cfd3db); }
.pick .tcard { display: block; border-width: 3px; padding: 5px; }
.pick .tgrid { grid-template-columns: repeat(9, minmax(0,1fr));
               grid-template-rows: repeat(3, 26px); }
.pick .tcell { font-size: 12px; }

/* announcements */
.ann { padding: 8px 12px; border-radius: 8px; background: #22262f; margin-bottom: 6px; }
.ann.tombala { background: #7a2ea0; }
.ann.cinko { background: #2e6a4a; }

/* picked-number history */
.history { display: flex; flex-wrap: wrap; gap: 4px; }
.history .h { padding: 3px 7px; background: #23262f; border-radius: 6px;
              font-weight: 700; font-size: 13px; color: #cfd3db; }
.history .h.recent { background: #f2b01e; color: #1a1a1a; }
.history .h.mine { background: #e5140c; color: #fff; }              /* number you have */
.history .h.mine.recent { box-shadow: 0 0 0 2px #f2b01e; }
.ann.message { background: #264b7a; }                                /* chat message */

/* announcements as a fixed-height, auto-scrolling chat window */
.annbox { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column;
          gap: 6px; padding: 4px; background: #16181f; border: 1px solid #2a2e38;
          border-radius: 10px; }
.annbox .ann { margin: 0; }
.annbox:empty::before { content: "—"; color: #7a808a; }

/* top bar / language selector */
.topbar { display: flex; justify-content: space-between; align-items: center;
          flex-wrap: wrap; gap: 8px; }
.lang { display: flex; align-items: center; gap: 6px; }
.lang select { padding: 6px 8px; font-size: 14px; }

/* end-of-game restart countdown — same big centred look as the number reveal */
#countdown { position: fixed; inset: 0; display: none; flex-direction: column;
             align-items: center; justify-content: center; pointer-events: none; z-index: 52;
             background: radial-gradient(closest-side, rgba(10,12,16,.72), rgba(10,12,16,.30)); }
#countdown .cd-cap { color: #e8e8ea; font-size: clamp(16px, 3.5vw, 30px); font-weight: 800;
                     letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px;
                     text-shadow: 0 2px 10px rgba(0,0,0,.6); }
#countdown .cd-num { font-size: 30vw; font-weight: 900; color: #f2b01e; line-height: 1;
                     text-shadow: 0 0 40px rgba(242,176,30,.7); }
.autoinfo { font-weight: 700; color: #f2b01e; }

/* center reveal + shine keyframes */
#reveal { position: fixed; inset: 0; display: none; align-items: center;
          justify-content: center; pointer-events: none; z-index: 50; }
#reveal .big { font-size: 26vw; font-weight: 900; color: #f2b01e;
               text-shadow: 0 0 40px rgba(242,176,30,.7); animation: reveal 1.6s ease-out; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes shine {
  0%,100% { box-shadow: 0 0 0 rgba(242,176,30,0); background: #f2b01e; color:#1a1a1a; }
  50% { box-shadow: 0 0 18px 6px rgba(242,176,30,.95); background: #ffd766; }
}
@keyframes reveal { 0% { transform: scale(.3); opacity: 0; }
                    30% { transform: scale(1); opacity: 1; }
                    100% { transform: scale(1.1); opacity: 0; } }

/* ==========================================================================
   Multi-table center + room (added for the lobby version)
   ========================================================================== */
body { background:
  radial-gradient(1100px 500px at 50% -160px, #23304d 0%, rgba(35,48,77,0) 60%),
  #14161c; }
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
         border-radius: 10px; padding: 2px 6px; transition: background .15s; }
.brand:hover { background: #20242d; }
.brand .ball { font-size: 30px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.row.between { justify-content: space-between; }
h3 { margin: 0 0 10px; }

/* --- hero / name bar --- */
.hero { text-align: center; margin: 6px 0 18px; }
.tagline { font-size: 18px; color: #c9cfda; margin: 4px 0 16px; }
.namebar { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
           background: #1b1e26; border: 1px solid #2a2e38; border-radius: 14px;
           padding: 12px 16px; }
.namebar label { font-weight: 800; color: #cfd3db; }
.namebar input { min-width: 200px; font-size: 17px; }

/* --- create form --- */
.createform { background: #171a21; border: 1px dashed #3a4150;
              border-radius: 12px; padding: 14px; margin: 12px 0; }
.fld { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: #cfd3db; }
.fld input, .fld select { font-weight: 600; }

/* --- table tiles --- */
.tablelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
             gap: 14px; margin-top: 14px; }
.center-empty { grid-column: 1/-1; text-align: center; padding: 24px; }
.tile { position: relative; border-radius: 16px; padding: 16px; overflow: hidden;
        background: #1e222b; border: 1px solid #2c313d;
        box-shadow: 0 6px 18px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 10px; }
.tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px;
                background: var(--theme, #2b6fe0); }
.tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tile-name { font-size: 19px; font-weight: 900; color: #fff; line-height: 1.15;
             padding-left: 4px; }
.tile-meta { color: #9aa0aa; font-size: 13px; padding-left: 4px; }
.tile-who { display: flex; flex-wrap: wrap; gap: 5px; padding-left: 4px; min-height: 22px; }
.tile-who.muted { font-size: 13px; align-items: center; }
.tile-who .chip { background: #2a3040; border: 1px solid #39415a; color: #dbe0ea;
                  border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; }
.tile-timer { display: flex; align-items: center; gap: 6px; padding-left: 4px;
              font-size: 12px; color: #9aa0aa; }
.tile-timer .tt-clock { color: #f2b01e; font-weight: 800; font-variant-numeric: tabular-nums; }
.tile-timer.urgent .tt-clock { color: #ff6b6b; }
.tile-foot { display: flex; justify-content: space-between; align-items: center;
             font-size: 13px; color: #c2c7d0; padding-left: 4px; }
.tile-code { font-weight: 800; letter-spacing: 1px; color: #f2b01e; }
.tile-admin { display: flex; gap: 6px; }
.tile .remove-room { padding: 4px 9px; font-size: 12px; background: #262a33; color: #c9a3a3; }
.tile .remove-room:hover { background: #7a1f24; color: #fff; }
.tile .kill-game { padding: 4px 9px; font-size: 12px; background: #262a33; color: #d8b46a; }
.tile .kill-game:hover { background: #6b4a12; color: #fff; }
.tile-action { padding-left: 4px; }
.tile-action button { width: 100%; }
.badge { font-size: 11px; font-weight: 900; padding: 4px 9px; border-radius: 999px;
         text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.badge.open { background: #1f5a3a; color: #b6f0cf; }
.badge.playing { background: #6b4a12; color: #ffdf9e; }

/* --- room header --- */
/* host's own optional card picker inside the lobby */
.hostpick { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #3a4150; }
.hostpick h3 { margin-bottom: 4px; }

.roomhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.roomhead-info h2 { margin: 0; }
.host-badge { color: #f2b01e; font-weight: 900; }

/* --- host player rows with remove button --- */
.prow { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
        background: #22262f; border-radius: 10px; margin-bottom: 6px; }
.prow .cdot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
              box-shadow: 0 0 0 2px rgba(255,255,255,.15) inset; }
.prow .pname { font-weight: 800; }
.prow .pinfo { margin-left: 2px; }
.prow button.mini { margin-left: auto; }
button.mini { font-size: 13px; padding: 7px 12px; border-radius: 8px; }
button.danger { background: #7a1f24; }
button.danger:hover { background: #9c2831; }

/* --- toast --- */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
         background: #2b303c; color: #fff; border: 1px solid #3a4150; padding: 12px 18px;
         border-radius: 12px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.4);
         opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   Narrow phones (e.g. Galaxy S24 ~360px CSS width): make the board and the
   player/host card fluid so nothing overflows the screen horizontally.
   Desktop keeps the fixed sizes above.
   ========================================================================== */
@media (max-width: 480px) {
  body { padding: 10px; }
  .panel { padding: 12px; }
  .row { gap: 8px; }

  /* 1-90 board fills the width; cells become fluid squares */
  .board { grid-template-columns: repeat(10, 1fr); gap: 3px; }
  .board .n { width: auto; height: auto; aspect-ratio: 1 / 1; font-size: 12px; }

  /* the big player/host card fills the width; cells stay square */
  #mycard .tcard, #hostMyCard .tcard { display: block; width: 100%;
    padding: 6px; border-width: 4px; }
  #mycard .tgrid, #hostMyCard .tgrid { grid-template-columns: repeat(9, 1fr);
    grid-template-rows: none; }
  #mycard .tcell, #hostMyCard .tcell { aspect-ratio: 1 / 1; font-size: 15px; }

  /* card picker scales down to fit small screens */
  .pickgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .lastnum { font-size: 36px; }
}