/* BRGR: the 3D diner (or the grill, or the Tater Madness kitchen) fills the screen. Diner colors: ketchup red, mustard
   yellow, cream, chrome. The joystick is under your left thumb, Jump and the action button on the right, like Pawville.
   The lobby is a panel on the left, so the diner still shows on the right. */
:root { --ink: #2b1a12; --muted: #7a6a5a; --line: #eadfce; --red: #c62f2f; --mustard: #ffc93c; --cream: #fff6e6; --teal: #2ec4b6; --panel: rgba(43, 26, 18, 0.8); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2b1a12; font-family: 'Fredoka', 'Trebuchet MS', sans-serif; color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
button { font: inherit; cursor: pointer; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
.btn { font-weight: 700; font-size: 17px; border: 0; border-radius: 14px; padding: 10px 18px; background: var(--red); color: #fff; box-shadow: 0 3px 0 #8a1e1e; }
.btn.alt { background: #efe6d8; color: var(--ink); box-shadow: 0 3px 0 #cdbfa8; } .btn.gold { background: var(--mustard); color: var(--ink); box-shadow: 0 3px 0 #c99a14; }
.btn.big { font-size: 20px; padding: 12px 22px; } .btn.small { font-size: 14px; padding: 6px 12px; border-radius: 11px; box-shadow: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:active:not(:disabled) { translate: 0 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }

/* ---- the top ---- */
#top { position: fixed; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; pointer-events: none;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); }
.tb { display: flex; gap: 6px; pointer-events: auto; }
.round-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--panel); color: #fff; font-size: 20px; border: 2px solid rgba(255, 255, 255, 0.25); }
#logo { margin-left: 4px; font-weight: 700; font-size: 26px; letter-spacing: 3px; color: #fff; background: var(--red); border: 3px solid #fff; border-radius: 14px; padding: 0 12px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }
#logo span { letter-spacing: 0; }
body:not([data-mode="diner"]) #logo { display: none; }

/* ---- touch controls (as in Pawville) ---- */
#controls { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#joyzone { position: absolute; left: 0; bottom: 0; width: 50%; top: 130px; pointer-events: auto; touch-action: none; }
body[data-mode="ttt"] #joyzone, body[data-mode="ttt"] .jump { display: none; }
.joy-base { position: absolute; left: max(110px, calc(env(safe-area-inset-left) + 100px)); top: auto; bottom: max(30px, env(safe-area-inset-bottom)); width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.22)); border: 3px solid rgba(255, 255, 255, 0.55); opacity: 0.5; pointer-events: none; transition: opacity 0.2s; }
.joy-base:not(.on) { bottom: max(30px, env(safe-area-inset-bottom)); margin: 0 0 0 -65px; }
.joy-base.on { opacity: 1; bottom: auto; transition: none; margin-top: var(--half, -65px) !important; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffe9c4); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
@media (pointer: fine) { .joy-base:not(.on) { display: none; } }
.jump { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); width: 92px; height: 92px; pointer-events: auto; border-radius: 50%; padding: 0;
  display: grid; place-items: center; align-content: center; color: #fff; border: 3px solid rgba(255, 255, 255, 0.85); background: radial-gradient(circle at 35% 30%, rgba(160, 200, 255, 0.75), rgba(40, 80, 160, 0.7));
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22); touch-action: none; }
.jump span { font-size: 34px; line-height: 0.9; } .jump b { font-size: 12px; font-weight: 700; }
.jump:active { translate: 0 3px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22); }
@media (hover: hover) and (pointer: fine) { .jump { display: none; } .act { right: max(18px, env(safe-area-inset-right)) !important; } }
.act { position: absolute; right: calc(max(18px, env(safe-area-inset-right)) + 104px); bottom: max(24px, env(safe-area-inset-bottom)); width: 118px; height: 118px; pointer-events: auto; border-radius: 50%; padding: 0;
  display: grid; place-items: center; align-content: center; color: #fff; font-size: 36px; line-height: 1; border: 4px solid rgba(255, 255, 255, 0.9);
  background: radial-gradient(circle at 35% 30%, #ffe29a, #ff9f1c); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.3); animation: act-in 0.3s cubic-bezier(.2, 1.6, .4, 1) both; }
.act[hidden] { display: none; }
.act b { font-size: 13px; font-weight: 700; margin-top: 4px; line-height: 1.15; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); max-width: 104px; text-align: center; white-space: normal; }
.act.go { background: radial-gradient(circle at 35% 30%, #ff9ab0, #c62f2f); } .act.exit { background: radial-gradient(circle at 35% 30%, #9dffcf, #1a9e86); }
@keyframes act-in { from { scale: 0.5; opacity: 0; } to { scale: 1; opacity: 1; } }
.say { position: absolute; right: calc(max(18px, env(safe-area-inset-right)) + 14px); bottom: calc(max(26px, env(safe-area-inset-bottom)) + 108px); width: 64px; height: 64px; pointer-events: auto; border-radius: 50%;
  padding: 0; font-size: 30px; border: 3px solid rgba(255, 255, 255, 0.9); background: radial-gradient(circle at 35% 30%, #fff3b0, #ffb703); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); }
.say[hidden] { display: none; }
#b-bite { bottom: calc(max(26px, env(safe-area-inset-bottom)) + 180px); }
body[data-mode="ttt"] #b-say { bottom: max(26px, env(safe-area-inset-bottom)); }
body:not([data-mode="diner"]) #b-bite { display: none; }
#say-box { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(26px, env(safe-area-inset-bottom)) + 180px); z-index: 8; width: min(330px, calc(100vw - 32px));
  display: flex; flex-wrap: wrap; gap: 6px; background: #fff; border-radius: 18px; padding: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
#say-box button { font-size: 15px; font-weight: 600; border: 2px solid var(--line); background: var(--cream); border-radius: 12px; padding: 6px 10px; color: var(--ink); }
@media (max-height: 430px) { .act { width: 96px; height: 96px; font-size: 30px; right: calc(max(18px, env(safe-area-inset-right)) + 86px); } .act b { font-size: 11.5px; } .joy-base { scale: 0.85; }
  .jump { width: 76px; height: 76px; } .jump span { font-size: 28px; } .say { bottom: calc(max(26px, env(safe-area-inset-bottom)) + 88px); } #b-bite { bottom: calc(max(26px, env(safe-area-inset-bottom)) + 160px); } }

/* ---- name tags and bubbles ---- */
#tags { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
#tags > div { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.tag { font-size: 13px; font-weight: 700; color: #fff; background: rgba(43, 26, 18, 0.72); border-radius: 10px; padding: 2px 9px; }
.tag.me { background: rgba(26, 158, 134, 0.85); } .tag.hot { background: #e8501a; box-shadow: 0 0 0 2px #ffd166; font-size: 15px; }
.tag.hot::before { content: '🥔 '; }
.bubble { font-size: 15px; font-weight: 600; color: var(--ink); background: #fff; border-radius: 14px; padding: 6px 12px; max-width: 260px; white-space: normal !important; text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); animation: bub 0.25s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes bub { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }

/* ---- messages ---- */
#toast { position: fixed; left: 50%; width: max-content; bottom: max(150px, calc(env(safe-area-inset-bottom) + 140px)); translate: -50% 0; z-index: 14; background: var(--panel); color: #fff; font-size: 17px; font-weight: 600;
  padding: 8px 16px; border-radius: 14px; pointer-events: none; opacity: 0; transition: opacity 0.3s; max-width: calc(100vw - 30px); text-align: center; }
#toast.on { opacity: 1; }
#banner { position: fixed; left: 50%; top: 26%; translate: -50% -50%; z-index: 6; pointer-events: none; text-align: center; font-size: 46px; font-weight: 700; color: #fff; line-height: 1.1;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 0 24px rgba(0, 0, 0, 0.3); opacity: 0; scale: 0.7; transition: opacity 0.25s, scale 0.3s cubic-bezier(.2, 1.6, .4, 1); width: max-content; max-width: calc(100vw - 30px); }
#banner.on { opacity: 1; scale: 1; }
#banner small { display: block; font-size: 22px; font-weight: 600; margin-top: 6px; }
#banner.hot { color: #ffd166; } #banner.sad { color: #ffe0d0; } #banner.count { font-size: 110px; color: #ffd166; }
#netmsg { position: fixed; left: 50%; width: max-content; max-width: calc(100vw - 30px); top: 70px; translate: -50% 0; z-index: 9; background: #e8501a; color: #fff; font-weight: 700; padding: 6px 14px; border-radius: 12px; }
#fade { position: fixed; inset: 0; z-index: 30; background: #2b1a12; opacity: 0; pointer-events: none; transition: opacity 0.45s; }
#fade.on { opacity: 1; pointer-events: auto; }
/* (the "turn sideways" note on an upright phone: a few seconds each time play starts or the phone turns upright, then it
   fades; until 2026-10-24 it stayed over the game the whole match, which Wes doesn't want: no always-on text over play.
   A window hides it, and since hiding is display: none, its fade starts over when the window closes) */
@keyframes rotate-tip { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
#rotate { display: none; }
@media (orientation: portrait) and (max-width: 500px) { #rotate { display: block; position: fixed; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 54px); translate: -50% 0; z-index: 2; background: var(--panel); color: #fff; padding: 6px 12px; border-radius: 12px; font-size: 13px; pointer-events: none; animation: rotate-tip 7s forwards; }
  #panel:not(.hidden) ~ #rotate, #results:not(.hidden) ~ #rotate { display: none; }
  body[data-mode="ttt"] #rotate { top: auto; bottom: 16px; } }

/* ---- windows ---- */
@keyframes br-pop { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
.sheet { position: fixed; z-index: 12; left: 50%; top: 50%; translate: -50% -50%; width: min(560px, calc(100vw - 20px)); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow-y: auto;
  background: var(--cream); border-radius: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); padding: 18px 20px 20px; border: 4px solid var(--red); animation: br-pop 0.32s cubic-bezier(.2, 1.4, .4, 1) both; }
.sheet .x { position: sticky; float: right; top: 0; margin: -6px -8px 0 8px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #efe6d8; color: var(--ink); font-size: 18px; z-index: 2; }
.sheet h2 { margin: 0 0 6px; font-size: 25px; } .sheet h3 { margin: 16px 0 6px; font-size: 18px; }
.sheet p { margin: 6px 0; line-height: 1.4; } .hint { color: var(--muted); font-size: 14px; margin-top: 0; }
.note { background: #fff1c4; border-radius: 12px; padding: 8px 12px; font-size: 15px; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.card-art canvas { width: 100%; max-width: 320px; display: block; margin: 0 auto 10px; border-radius: 14px; border: 4px solid #1b1b2f; }
.menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.menu button { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 3px solid var(--line); background: #fff; border-radius: 16px; padding: 12px 6px; color: var(--ink); }
.menu button span { font-size: 40px; line-height: 1; } .menu button b { font-size: 15px; }
.menu button:active { border-color: var(--red); }
.tunes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 8px; }
.tunes button { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; border: 3px solid var(--line); background: #fff; border-radius: 16px; padding: 8px 10px; color: var(--ink); }
.tunes button .e { grid-row: 1 / 3; font-size: 28px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #efe6d8; }
.tunes button b { font-size: 15px; } .tunes button small { color: var(--muted); font-size: 13px; }
.tunes button.on { border-color: var(--red); background: #fff3e6; }

/* ---- the lobby (a panel on the left) ---- */
.side { position: fixed; z-index: 11; left: max(10px, env(safe-area-inset-left)); top: calc(max(8px, env(safe-area-inset-top)) + 54px); bottom: max(10px, env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 20px)); display: flex; flex-direction: column; background: var(--cream); border-radius: 22px; border: 4px solid var(--red); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  padding: 14px 16px; animation: br-pop 0.3s cubic-bezier(.2, 1.4, .4, 1) both; }
.side h2 { margin: 0 0 8px; font-size: 24px; }
#lobby-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; }
#lobby-body h3 { margin: 14px 0 6px; font-size: 17px; }
#lobby-body .wait { font-size: 18px; text-align: center; margin-top: 30px; }
#lobby-msg { min-height: 20px; color: var(--muted); font-size: 14px; text-align: center; margin: 6px 0; }
.side .foot { display: flex; gap: 8px; justify-content: center; }
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.seat { position: relative; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 6px 4px; text-align: center; font-size: 13px; font-weight: 600; }
.seat.me { border-color: var(--teal); background: #eafaf7; }
.seat img { width: 58px; height: 58px; display: block; margin: 0 auto 2px; }
.seat .crown { position: absolute; top: 2px; left: 6px; font-style: normal; } .seat .in { position: absolute; top: 2px; right: 6px; font-style: normal; }
.seat.empty { border-style: dashed; color: var(--muted); } .seat .q { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 2px; font-size: 30px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { font-size: 15px; font-weight: 700; border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 6px 10px; color: var(--ink); }
.chips button.on, .maps button.on { border-color: var(--red); background: #ffe6e1; }
.maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.maps button { display: flex; flex-direction: column; align-items: center; border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 6px 4px; color: var(--ink); }
.maps button span { font-size: 26px; } .maps button small { font-size: 12.5px; font-weight: 600; }
.pal { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 5px 8px; margin-bottom: 5px; position: relative; }
.pal img { width: 40px; height: 40px; } .pal .n { flex: 1; font-weight: 600; } .pal small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.pal .dot { position: absolute; left: 38px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #bbb; border: 2px solid #fff; } .pal .dot.on { background: #2ecc71; }
/* (an upright phone: the lobby sits at the bottom, as tall as what's in it up to 74% of the screen, so a lobby with a bet
   shows "I'm in!" and what you have without scrolling; it was always 62%, which cut them off: 2026-10-23) */
@media (max-width: 700px) and (orientation: portrait) { .side { top: auto; height: auto; max-height: 74vh; } #lobby-body { flex: 1 1 auto; min-height: 0; } }

/* ---- rock, paper, scissors ---- */
#rps { position: fixed; z-index: 11; left: 50%; top: 50%; translate: -50% -50%; width: min(520px, calc(100vw - 20px)); background: var(--cream); border-radius: 24px; border: 4px solid #9b5de5;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); padding: 18px; text-align: center; animation: br-pop 0.3s cubic-bezier(.2, 1.4, .4, 1) both; }
#rps h2 { margin: 0 0 4px; font-size: 26px; }
.rps-pick { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.rps-pick button { flex: 1; max-width: 140px; border: 3px solid var(--line); background: #fff; border-radius: 18px; padding: 12px 6px; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rps-pick button span { font-size: 54px; line-height: 1; } .rps-pick button b { font-size: 16px; }
.rps-pick button:active { border-color: #9b5de5; scale: 0.96; }
.hands { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.hand { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border-radius: 18px; padding: 10px 14px; border: 3px solid var(--line); min-width: 130px; }
.hand img { width: 56px; height: 56px; } .hand .big { font-size: 60px; line-height: 1.1; } .hand b { font-size: 15px; }
.hand.won { border-color: var(--mustard); background: #fff8dc; box-shadow: 0 0 0 4px rgba(255, 201, 60, 0.4); }
.vs { font-size: 24px; font-weight: 700; color: #9b5de5; }
.big.shake { display: inline-block; animation: shake 0.45s ease-in-out infinite; } .big.think { display: inline-block; animation: think 1.2s ease-in-out infinite; }
@keyframes shake { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } } @keyframes think { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }
.reveal .big { animation: rv 0.4s cubic-bezier(.2, 1.8, .4, 1) both; } @keyframes rv { from { scale: 0.2; } to { scale: 1; } }
#rps .say { position: static; width: auto; height: auto; background: none; border: 0; box-shadow: none; font-size: 21px; font-weight: 700; margin: 12px 0 0; }

/* ---- tic-tac-toe: whose turn ---- */
#turn { position: fixed; z-index: 5; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 4px); translate: -50% 0; display: flex; align-items: center; gap: 10px; background: var(--panel); color: #fff;
  border-radius: 999px; padding: 5px 18px 5px 6px; font-size: 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); max-width: calc(100vw - 130px); }
#turn img { width: 42px; height: 42px; background: rgba(255, 255, 255, 0.15); border-radius: 50%; }
#turn.mine { background: #c62f2f; box-shadow: 0 0 0 3px #ffd166, 0 6px 18px rgba(0, 0, 0, 0.3); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }

/* ---- Tater Madness: the timer and the players ---- */
#hud { position: fixed; z-index: 5; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 2px); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
#fuse-box { display: flex; align-items: center; gap: 8px; background: var(--panel); color: #fff; border-radius: 20px; padding: 4px 16px 4px 10px; border: 3px solid rgba(255, 255, 255, 0.4); position: relative; overflow: hidden; }
#fuse-box .p { font-size: 32px; } #fuse { font-size: 40px; min-width: 50px; text-align: center; line-height: 1.1; }
#fuse-box .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255, 255, 255, 0.15); } #fuse-box .bar i { display: block; height: 100%; background: #ffd166; transition: width 0.1s linear; }
#fuse-box.hot { background: #e8501a; animation: pulse 0.5s ease-in-out infinite; } #fuse-box.hot .bar i { background: #fff; }
#hud-info { background: var(--panel); color: #fff; font-weight: 600; font-size: 15px; border-radius: 12px; padding: 3px 12px; }
/* (you've just got the potato: the big words say so, so "You have it! Tag someone!" waits until they fade, not both at once) */
body:has(#banner.on.hot) #hud-info.mine { visibility: hidden; }
#hud-alive { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 70vw; }
#hud-alive span { position: relative; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); border: 2px solid #fff; }
#hud-alive span img { width: 100%; height: 100%; } #hud-alive span.out { opacity: 0.45; filter: grayscale(1); } #hud-alive span.hot { border-color: #e8501a; box-shadow: 0 0 0 3px #ffd166; }
#hud-alive span i { position: absolute; right: -6px; bottom: -6px; font-style: normal; font-size: 18px; filter: none; }

/* ---- the summary ---- */
#results { border-color: var(--mustard); text-align: center; }
#results .winner { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 22px; font-weight: 700; margin: 6px 0; }
#results .winner img { width: 80px; height: 80px; } #results .winner p { margin: 0; text-align: left; }
.sum { list-style: none; padding: 0; margin: 10px 0; text-align: left; } .sum li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; }
.sum li:nth-child(odd) { background: #fff; } .sum span { color: var(--muted); }
.places { list-style: none; padding: 0; margin: 10px 0; text-align: left; }
.places li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 12px; } .places li:first-child { background: #fff8dc; } .places li.me { box-shadow: inset 0 0 0 2px var(--teal); }
.places .n { font-weight: 700; width: 22px; text-align: center; } .places img { width: 36px; height: 36px; } .places b { flex: 1; } .places small { color: var(--muted); }
.bet { background: #fff1c4; border-radius: 12px; padding: 8px 12px; font-weight: 600; }
/* (a short screen, like a phone held sideways: the places and the numbers go two to a row, and Play again / Leave the
   table stay in sight at the bottom of the card; with a full table of 10 they were 400 px below the fold, 2026-10-24) */
@media (max-height: 540px) {
  #results .winner { margin: 0; font-size: 19px; } #results .winner img { width: 56px; height: 56px; }
  #results :is(.sum, .places) { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin: 6px 0; }
  #results .sum li { background: #fff; padding: 4px 10px; } #results .places li { padding: 2px 8px; } #results .places img { width: 30px; height: 30px; }
  #results > .row:last-child { position: sticky; bottom: -20px; margin: 8px -20px -20px; padding: 8px 20px 12px; background: var(--cream); box-shadow: 0 -10px 10px -6px var(--cream); }
}

/* ---- while a window is open: the action button and the logo step aside; messages move up over the lobby ---- */
/* (Jump and 💬 too: on a phone held sideways they peeked out from under the card, 2026-10-20) */
body:has(#panel:not(.hidden)) :is(.act, .jump, .say), body:has(#panel:not(.hidden)) #logo, body:has(#results:not(.hidden)) :is(.act, .jump, .say) { visibility: hidden; }
body:has(#lobby:not(.hidden)) #toast { bottom: auto; top: calc(max(8px, env(safe-area-inset-top)) + 54px); left: auto; right: max(12px, env(safe-area-inset-right)); translate: none;
  max-width: calc(100vw - 460px); }
@media (max-width: 700px) and (orientation: portrait) { body:has(#lobby:not(.hidden)) #toast { left: 50%; right: auto; translate: -50% 0; max-width: calc(100vw - 30px); } }

/* sharing a meal with friends at your table */
#table-bar { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; }
#table-bar[hidden] { display: none; }
#table-bar button { border: 0; border-radius: 999px; padding: 12px 18px; font: 700 16px Fredoka, sans-serif; color: #2b1a12; background: #ffd166; box-shadow: 0 4px 0 #c99a2e, 0 6px 16px rgba(0, 0, 0, 0.25); white-space: nowrap; }
#table-bar button[hidden] { display: none; }
#table-bar #b-cheer { background: #ff9ecf; box-shadow: 0 4px 0 #d16a9e, 0 6px 16px rgba(0, 0, 0, 0.25); }
.tag.friend { background: rgba(58, 134, 255, 0.85); }
.tag.friend::before { content: '👫 '; }
/* (while rock-paper-scissors is up, messages show near the top, not on the Rock / Paper / Scissors buttons) */
body:has(#rps:not(.hidden)) #toast { bottom: auto; top: max(64px, calc(env(safe-area-inset-top) + 56px)); }
/* (a phone held sideways: the big words sit lower and smaller, under you, not on Tater Madness's timer and faces) */
@media (max-height: 430px) {
  #banner { top: 72%; font-size: 30px; } #banner small { font-size: 16px; margin-top: 3px; } #banner.count { font-size: 80px; } }
/* (a phone held sideways: the cards are wider and a game's card puts its picture at the side, so the words and Host a
   table show without scrolling) */
@media (max-height: 500px) { .card-art canvas { float: left; max-width: 200px; margin: 0 14px 6px 0; } .sheet { width: min(720px, calc(100vw - 20px)); } .sheet p { line-height: 1.3; } }
/* ---- the table lobby on a phone held sideways (lane 4's report, 2026-10-21: only 162 of 539 px of it showed, and the
   bet amounts, "I'm in" and the invites were out of sight below the seats with nothing saying there was more). The
   panel uses more of the width, its Start / Leave buttons go up beside the title, the seats are smaller, and the bottom
   edge fades out when there's more to scroll to ---- */
@media (max-height: 500px) and (orientation: landscape) {
  #lobby { width: min(640px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))); padding: 8px 12px 6px;
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 10px; }
  #lobby h2 { grid-area: 1 / 1; margin: 0; font-size: 19px; align-self: center; }
  #lobby .foot { grid-area: 1 / 2; } #lobby .foot .btn { font-size: 15px; padding: 8px 12px; min-height: 44px; }
  #lobby #lobby-body { grid-area: 2 / 1 / 3 / 3; padding-bottom: 22px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
  #lobby #lobby-msg { grid-area: 3 / 1 / 4 / 3; margin: 2px 0 0; } #lobby #lobby-msg:empty { min-height: 0; margin: 0; }
  #lobby-body h3 { margin: 8px 0 4px; font-size: 15px; }
  #lobby .seats { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
  #lobby .who { float: left; width: 168px; margin: 0 14px 6px 0; } #lobby .who .hint { margin: 4px 0 0; }
  #lobby-body > h3:first-of-type { margin-top: 0; }
  #lobby #lobby-body > :is(p, h3, div:not(.who)) { display: flow-root; } /* (each line beside the seats stays a block of its own, instead of wrapping its end in under them) */
  #lobby .seat { padding: 3px 2px; font-size: 12px; } #lobby .seat img, #lobby .seat .q { width: 40px; height: 40px; } #lobby .seat .q { font-size: 22px; }
}