/* Egyptian Rat Screw - wood + gold, hand-drawn xkcd headings. */

@font-face {
  font-family: "xkcd";
  src: url("/static/fonts/xkcd-script.woff") format("woff");
  font-display: swap;
}

:root {
  --wood-1: #7a4a28;
  --wood-2: #5b3319;
  --wood-3: #3f2311;
  --wood-edge: #2a1710;
  --gold: #f2c94c;
  --gold-deep: #d29a1f;
  --gold-soft: #f7dd8f;
  --cream: #f7efdd;
  --parch: #efe3c8;
  --ink: #2a2018;
  --ink-soft: #6a5a48;
  --red: #d64545;
  --green: #4f9d5a;
  --shadow: rgba(20, 10, 4, .45);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--sans);
  color: var(--cream);
  background:
    radial-gradient(1200px 700px at 50% -10%, #3a271a 0%, #241811 55%, #180f0a 100%);
  background-attachment: fixed;
}

body { min-height: 100vh; }

h1, h2, h3, .xk { font-family: "xkcd", var(--sans); font-weight: 400; letter-spacing: .5px; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-soft); }

/* ---- wood surface helper ---- */
.wood {
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.05) 0 2px, rgba(255,255,255,.03) 2px 4px, rgba(0,0,0,0) 4px 26px),
    linear-gradient(180deg, var(--wood-1), var(--wood-2) 60%, var(--wood-3));
  box-shadow: inset 0 1px 0 rgba(255,220,170,.18), inset 0 -2px 6px rgba(0,0,0,.4);
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: "xkcd", var(--sans); font-size: 1.05rem;
  padding: .7rem 1.4rem; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--gold-deep);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  color: #3a2606; box-shadow: 0 4px 0 var(--gold-deep), 0 8px 14px var(--shadow);
  transition: transform .06s ease, box-shadow .06s ease;
}
.btn:hover { filter: brightness(1.03); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep), 0 4px 8px var(--shadow); }
.btn.secondary {
  background: linear-gradient(180deg, #8a5730, var(--wood-2));
  color: var(--cream); border-color: var(--wood-edge);
  box-shadow: 0 4px 0 var(--wood-edge), 0 8px 14px var(--shadow);
}
.btn.ghost {
  background: transparent; color: var(--gold); box-shadow: none;
  border-color: rgba(242,201,76,.5);
}
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.big { font-size: 1.3rem; padding: .95rem 2rem; }

/* ---- nav ---- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1.1rem; gap: 1rem; position: sticky; top: 0; z-index: 30;
  border-bottom: 3px solid var(--wood-edge);
}
.nav .brand { font-family: "xkcd"; font-size: 1.5rem; color: var(--gold); }
.nav .brand small { color: var(--cream); opacity: .7; font-size: .8rem; }
.nav-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nav-right a { color: var(--cream); font-family: "xkcd"; font-size: 1.05rem; opacity: .85; }
.nav-right a:hover, .nav-right a.active { color: var(--gold); opacity: 1; }
.nav-user { color: var(--gold-soft); font-size: .92rem; }
.nav-user .badge { background: var(--wood-2); border:1px solid var(--gold-deep); color: var(--gold);
  border-radius: 6px; padding: 1px 6px; font-size: .72rem; margin-left: 4px; }

/* ---- layout ---- */
.wrap { max-width: 1000px; margin: 0 auto; padding: 1.6rem 1.1rem 3rem; }
.wrap.wide { max-width: 1360px; padding: 1.8rem 3vw 3rem; }
.center-narrow { max-width: 460px; margin: 0 auto; }

/* full-page login: hero + form filling the viewport, side by side on wide screens.
   Mobile already looks good, so the size bump below is desktop-only. */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  gap: clamp(2rem, 6vw, 6rem); padding: 2rem 5vw; flex-wrap: wrap; }
.login-page .login-hero { flex: 1 1 340px; max-width: 560px; margin: 0; }
.login-page .login-col { flex: 0 1 440px; width: 100%; max-width: 440px; }

@media (min-width: 761px) {
  .login-page { gap: clamp(3rem, 7vw, 7rem); padding: 2rem clamp(2rem, 6vw, 6rem); }
  .login-page .login-hero { flex: 1 1 460px; max-width: 720px; }
  .login-page .login-col { flex: 0 1 520px; max-width: 520px; }
  .login-page .hero-ico { width: clamp(110px, 11vw, 160px); height: clamp(110px, 11vw, 160px); }
  .login-page .login-hero .kicker { font-size: clamp(.95rem, 1.4vw, 1.2rem); letter-spacing: .32em; }
  .login-page .login-hero h1 { font-size: clamp(4rem, 8vw, 6.5rem); margin: .4rem 0 .4rem; }
  .login-page .login-hero .sub { font-size: clamp(1.2rem, 1.8vw, 1.6rem); }
  .login-page .panel { padding: clamp(1.8rem, 2.6vw, 2.6rem); }
  .login-page .tab { font-size: clamp(1.05rem, 1.4vw, 1.25rem); padding: .8rem; }
  .login-page .field input { padding: 1rem 1.1rem; font-size: 1.15rem; border-radius: 12px; }
  .login-page .btn.big { font-size: clamp(1.35rem, 1.8vw, 1.6rem); padding: 1.1rem 1.7rem; border-radius: 14px; }
  .login-page .hint { font-size: 1.05rem; }
}

/* colored player dots (like the TTR site) */
.pdot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid rgba(0,0,0,.28); box-shadow: 0 1px 3px rgba(0,0,0,.35); vertical-align: middle; }
.pdot.lg { width: 30px; height: 30px; border-width: 3px; }

/* rules card (waiting room) */
.rules-card > h2 { font-size: 1.6rem; }
.rules-card h3 { color: var(--wood-2); font-size: 1.22rem; margin: 1.3rem 0 .25rem; }
.rules-card p { color: var(--ink); font-size: 1.06rem; line-height: 1.7; margin: .5rem 0; }
.rules-card ul { margin: .4rem 0; padding-left: 1.4rem; }
.rules-card li { color: var(--ink); font-size: 1.06rem; line-height: 1.6; margin: .55rem 0; }
.rules-card b { color: var(--wood-2); }

.panel {
  background: linear-gradient(180deg, var(--cream), var(--parch));
  color: var(--ink); border-radius: 16px; padding: 1.4rem 1.5rem;
  border: 1px solid #d9c9a5;
  box-shadow: 0 14px 40px var(--shadow), inset 0 1px 0 #fff;
}
.panel h2 { color: var(--wood-2); margin: .1rem 0 1rem; }

.field { margin-bottom: 1rem; }
.field label { display:block; font-size:.78rem; letter-spacing:.06em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: .35rem; }
.field input, .field select {
  width: 100%; padding: .7rem .8rem; border-radius: 10px; font-size: 1rem;
  border: 2px solid #cbb488; background: #fffdf6; color: var(--ink); outline: none;
}
.field input:focus, .field select:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(242,201,76,.3); }
.row { display: flex; gap: .8rem; flex-wrap: wrap; }
.row > * { flex: 1; }

.error { background: #f7dede; border: 1px solid #e2a3a3; color: #9a2b2b;
  border-radius: 10px; padding: .6rem .8rem; font-size: .9rem; margin-bottom: 1rem; display:none; }
.error.show { display: block; }
.muted { color: var(--ink-soft); }
.hint { color: var(--cream); opacity: .65; font-size: .9rem; text-align:center; margin-top: 1rem; }

/* ---- login ---- */
.login-hero { text-align: center; margin: 2.4rem 0 1.4rem; }
.login-hero .kicker { color: var(--gold); letter-spacing: .28em; font-size: .8rem; text-transform: uppercase; }
.login-hero h1 { font-size: 3.4rem; margin: .2rem 0 .1rem; color: var(--cream);
  text-shadow: 0 3px 0 var(--wood-3), 0 6px 14px var(--shadow); line-height: 1; }
.login-hero h1 .accent { color: var(--gold); }
.login-hero .sub { color: var(--cream); opacity: .7; }
.tabs { display:flex; gap:.4rem; margin-bottom: 1.1rem; }
.tab { flex:1; text-align:center; padding:.55rem; border-radius: 10px 10px 0 0; cursor:pointer;
  font-family:"xkcd"; color: var(--ink-soft); background: #e4d4b2; border:1px solid #d3c199; border-bottom:none;}
.tab.active { background: var(--cream); color: var(--wood-2); }
.tabform { display:none; } .tabform.active { display:block; }

/* ---- lobbies ---- */
.grid { display:grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; align-items:start; }
@media (max-width: 760px){ .grid { grid-template-columns: 1fr; } }
.game-list { display:flex; flex-direction: column; gap:.7rem; }
.game-item { display:flex; align-items:center; justify-content:space-between;
  background: rgba(247,239,221,.06); border:1px solid rgba(242,201,76,.22);
  border-radius: 12px; padding: .7rem .9rem; }
.game-item .code { font-family:"xkcd"; font-size:1.3rem; color: var(--gold); }
.game-item .meta { color: var(--cream); opacity:.7; font-size:.85rem; }
.avatars { display:flex; }
.avatars .av { width:26px; height:26px; border-radius:50%; margin-left:-6px; border:2px solid var(--wood-3);
  display:flex; align-items:center; justify-content:center; font-size:.7rem; color:#241811; font-weight:700; }
.empty { text-align:center; color: var(--cream); opacity:.6; padding: 1.4rem; }

/* ---- table (leaderboard / account) ---- */
table.tbl { width:100%; border-collapse: collapse; color: var(--ink); }
.tbl th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color: var(--ink-soft); padding:.5rem .6rem; border-bottom:2px solid #d9c9a5; }
.tbl td { padding:.55rem .6rem; border-bottom:1px solid #e5d8bb; }
.tbl tr.me { background: rgba(242,201,76,.25); }
.rank-badge { font-family:"xkcd"; color: var(--wood-2); }
.tier { display:inline-block; background: var(--wood-2); color: var(--gold); border-radius:6px;
  padding:1px 8px; font-size:.78rem; }
.stat-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap:.8rem; }
.stat { background:#fffdf6; border:1px solid #e0d0aa; border-radius:12px; padding:.8rem; text-align:center; }
.stat .v { font-family:"xkcd"; font-size:1.7rem; color: var(--wood-2); }
.stat .l { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }

/* =========================================================================
   GAME TABLE
   ========================================================================= */
.table-page { position: fixed; inset: 0; overflow: hidden; }
.felt-room { position:absolute; inset:0;
  background: radial-gradient(1100px 700px at 50% 42%, #3b271a, #201510 70%, #140d08); }

.table-oval {
  position:absolute; left:50%; top:47%; transform: translate(-50%,-50%);
  width: min(78vw, 1040px); height: min(62vh, 620px);
  border-radius: 50%;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,.05) 0 3px, rgba(255,235,200,.04) 3px 6px, rgba(0,0,0,0) 6px 34px),
    radial-gradient(120% 120% at 50% 30%, #8a552e, #5b3319 60%, #3f2311);
  border: 13px solid #4a2c17;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.45),
              inset 0 0 0 3px rgba(255,220,170,.12),
              0 0 0 4px #3a2213, 0 0 0 8px #2a1710;
}
.table-oval::after { /* inlaid ring */
  content:""; position:absolute; inset: 9%; border-radius:50%;
  border: 2px dashed rgba(247,221,143,.16);
}

/* seats around the oval */
.seat { position:absolute; transform: translate(-50%,-50%); text-align:center; width: 128px; z-index: 5; }
.seat .pdot { display:block; margin:0 auto .35rem; width:30px; height:30px; border-width:3px; }
.seat .pname { font-family:"xkcd"; font-size:1.1rem; line-height:1.05; text-shadow:0 2px 3px rgba(0,0,0,.6); }
.seat .count { display:inline-flex; align-items:center; gap:4px; margin-top:2px;
  background: rgba(0,0,0,.4); border:1px solid rgba(242,201,76,.4); color: var(--gold-soft);
  border-radius: 20px; padding: 1px 9px; font-size:.85rem; }
.seat .count .mini { display:inline-block; width:11px; height:15px; border-radius:2px;
  background: linear-gradient(135deg,#c98,#7a4a28); border:1px solid #3f2311; }
.seat.turn .pdot { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold), 0 0 22px var(--gold); }
.seat.turn .pname { color: var(--gold-soft); }
.seat.out { opacity: .38; filter: grayscale(.6); }
.seat.out .tag { display:block; font-size:.72rem; color:#e9c; opacity:.9; }
.seat .tag { display:none; }

/* your face-down stack, off to the bottom-left ("in front of you") */
.mystack { position:absolute; left:38px; bottom: 16px; text-align:center; z-index:12; }
.seat.me { position: static; transform: none; width: auto; margin: 0 auto .45rem; }
.you-tag { font-size: .7rem; color: var(--gold-soft); opacity: .85; }
.stack-cards { position: relative; width: 84px; height: 118px; margin: 0 auto; cursor: pointer; }
.card-back { position:absolute; inset:0; border-radius:9px; border:2px solid #2a1710;
  background:
    repeating-linear-gradient(45deg, rgba(255,220,150,.14) 0 6px, rgba(0,0,0,.05) 6px 12px),
    linear-gradient(160deg, #7a4a28, #4a2c17);
  box-shadow: 0 3px 6px rgba(0,0,0,.4); }
.stack-cards.can-flip { animation: bob 1.4s ease-in-out infinite; }
.stack-cards.can-flip::after { content:""; position:absolute; inset:-6px; border-radius:12px;
  border:2px dashed var(--gold); opacity:.7; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.mystack .lbl { margin-top: .5rem; font-family:"xkcd"; color: var(--gold-soft); }

/* center pile */
.pile { position:absolute; left:50%; top:47%; transform: translate(-50%,-50%); z-index:8;
  width: 120px; height: 168px; }
.pile .pcard { position:absolute; left:50%; top:50%; }
.pile-count { position:absolute; left:50%; top: calc(50% + 108px); transform: translateX(-50%);
  color: var(--cream); opacity:.7; font-size:.85rem; white-space:nowrap; }

/* a playing card */
.card {
  width: 108px; height: 152px; border-radius: 10px; background: #fbf7ef; color:#1c1c1c;
  border: 1px solid #cbb488; box-shadow: 0 6px 14px rgba(0,0,0,.4);
  position: relative; font-family: Georgia, "Times New Roman", serif; user-select:none;
}
.card.sm { width: 84px; height: 118px; }
.card .corner { position:absolute; font-weight:700; line-height:.9; text-align:center; }
.card .corner.tl { top:6px; left:8px; } .card .corner.br { bottom:6px; right:8px; transform: rotate(180deg); }
.card .corner .r { font-size: 1.25rem; } .card .corner .s { font-size: 1.05rem; display:block; }
.card .pip { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size: 3.2rem; }
.card.red { color: var(--red); }
/* the just-flipped card stays hidden until the flying card arrives (~.3s), then settles in */
.pile .pcard.landing { opacity: 0; animation: land .12s ease-out .3s forwards; }
@keyframes land {
  from { opacity: 0; transform: translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.92); }
  to   { opacity: 1; transform: translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1); }
}

/* a face-down card flying from a seat to the pile, flipping face-up on arrival */
.fly-card { position: fixed; z-index: 30; pointer-events: none; transform: translate(0,0);
  transition: transform .3s cubic-bezier(.3,.7,.4,1); }
.fly-card.go { transform: translate(var(--dx), var(--dy)); }
.fly-inner { position: absolute; left: -50px; top: -70px; width: 100px; height: 140px;
  transform-style: preserve-3d; transition: transform .18s ease-in .28s; }
.fly-card.go .fly-inner { transform: rotateY(180deg); }
.fly-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px; overflow: hidden; }
.fly-back { border: 2px solid #2a1710;
  background: repeating-linear-gradient(45deg, rgba(255,220,150,.14) 0 6px, rgba(0,0,0,.05) 6px 12px),
    linear-gradient(160deg, #7a4a28, #4a2c17); }
.fly-front { transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; }
.fly-front .card { width: 100px; height: 140px; }

/* burned card slides in under the lifted pile, face-up */
.pile { transition: transform .2s ease-out; }
.pile.lifted { transform: translate(-50%, -50%) translateY(-52px); }
.burn-card { position: fixed; z-index: 6; pointer-events: none; transform: translate(0,0);
  transition: transform .34s cubic-bezier(.3,.7,.4,1); }
.burn-card.go { transform: translate(var(--dx), var(--dy)); }
.burn-card .card { position: absolute; left: -50px; top: -70px; width: 100px; height: 140px;
  box-shadow: 0 8px 18px rgba(0,0,0,.5); }

/* a colored slapping hand shooting in from a player's seat */
.slap-hand { position: fixed; z-index: 33; pointer-events: none;
  animation: slap-in .5s ease-out forwards; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
@keyframes slap-in {
  0%   { transform: translate(-50%,-50%) scale(.5); opacity: 0; }
  35%  { opacity: 1; }
  60%  { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.2); opacity: 1; }
  72%  { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.92); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.05); opacity: 0; }
}

/* "flip" label under your pile */
.flip-lbl { margin-top: .45rem; font-family: "xkcd"; font-size: 1.05rem; color: var(--cream); opacity: .55; }
.flip-lbl.hot { color: var(--gold-soft); opacity: 1; text-shadow: 0 0 10px var(--gold); }

/* challenge badge */
.challenge { position:absolute; left:50%; top: calc(47% - 128px); transform:translate(-50%,-50%);
  background: rgba(20,10,6,.85); border:2px solid var(--gold); border-radius: 14px; padding:.4rem .9rem;
  font-family:"xkcd"; color: var(--gold); z-index: 10; text-align:center; animation: pulse 1s infinite; }
.challenge .big { font-size: 1.6rem; }
@keyframes pulse { 50% { box-shadow: 0 0 20px var(--gold); } }

/* SLAP button, centered at the bottom */
.slap-btn {
  position:absolute; left:50%; bottom: 26px; transform: translateX(-50%); z-index: 20;
  width: 138px; height: 138px; border-radius: 50%;
  font-family:"xkcd"; font-size: 2rem; color:#3a0d0d;
  border: 4px solid #7c1414;
  background: radial-gradient(circle at 40% 35%, #ff8a7a, #e0483a 55%, #b32b20);
  box-shadow: 0 6px 0 #7c1414, 0 12px 24px var(--shadow); cursor:pointer;
}
.slap-btn:active { transform: translateX(-50%) translateY(5px); box-shadow: 0 1px 0 #7c1414, 0 6px 12px var(--shadow); }
.slap-flash { position:absolute; inset:0; pointer-events:none; z-index: 15; opacity:0;
  background: radial-gradient(circle at 50% 47%, rgba(242,201,76,.5), transparent 40%); }
.slap-flash.go { animation: flash .35s ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

/* side panels */
.side { position:absolute; z-index: 18; width: 260px; max-width: 42vw; }
.side.right { right: 12px; top: 64px; }
.side h3 { font-size: 1.05rem; color: var(--gold); margin: 0 0 .4rem; }
.standings { background: rgba(20,12,7,.72); border:1px solid rgba(242,201,76,.28);
  border-radius: 12px; padding:.6rem .7rem; }
.standings .st { display:flex; justify-content:space-between; gap:.5rem; padding:.22rem 0; font-size:.9rem; }
.standings .st .pl { font-family:"xkcd"; color: var(--gold); }
.slog { position:absolute; right: 12px; bottom: 92px; z-index: 18; width: 320px; max-width: 46vw;
  max-height: 32vh; overflow-y: auto; display:flex; flex-direction: column; gap: .35rem;
  scrollbar-width: thin; scrollbar-color: rgba(242,201,76,.4) transparent; }
.slog::-webkit-scrollbar { width: 6px; }
.slog::-webkit-scrollbar-thumb { background: rgba(242,201,76,.4); border-radius: 3px; }

/* controls legend, bottom-right corner */
.controls { position:absolute; right: 12px; bottom: 12px; z-index: 19; line-height: 1.7;
  background: rgba(20,12,7,.74); border:1px solid rgba(242,201,76,.28); border-radius: 10px;
  padding: .45rem .6rem; font-size: .82rem; color: var(--cream); }
.controls b { display:inline-block; min-width: 52px; text-align:center; margin-right: 7px;
  font-family:"xkcd"; color: var(--gold); background: rgba(0,0,0,.4);
  border:1px solid rgba(242,201,76,.3); border-radius: 5px; padding: 0 6px; }
.slog .entry { background: rgba(20,12,7,.78); border:1px solid rgba(242,201,76,.2);
  border-left: 3px solid var(--gold); border-radius: 8px; padding:.4rem .55rem; flex: 0 0 auto;
  font-size:.86rem; color: var(--cream); animation: slin .2s ease-out, entryfade 7s ease-out forwards; }
.slog .entry.false { border-left-color: var(--red); }
.slog .entry.out { border-left-color: #b98; }
.slog .entry:hover { opacity: 1 !important; }
@keyframes slin { from { transform: translateX(20px); opacity:0; } }
@keyframes entryfade { 0%,55% { opacity: 1; } 100% { opacity: .35; } }
.slog b { font-family:"xkcd"; }

/* topbar in game */
.game-top { position:absolute; top:0; left:0; right:0; z-index: 22; display:flex; justify-content:space-between;
  align-items:center; padding:.5rem .8rem; }
.game-top .code { font-family:"xkcd"; color: var(--gold); font-size:1.1rem; }
.game-top .rulechips { display:flex; gap:.3rem; flex-wrap:wrap; }
.chip { background: rgba(0,0,0,.4); border:1px solid rgba(242,201,76,.3); color: var(--gold-soft);
  border-radius: 20px; padding:1px 9px; font-size:.72rem; }

/* win overlay */
.overlay { position:absolute; inset:0; z-index: 40; display:none; align-items:center; justify-content:center;
  background: rgba(12,7,4,.72); backdrop-filter: blur(2px); }
.overlay.show { display:flex; }
.overlay .box { text-align:center; }
.overlay .box .crown { font-size: 3rem; }
.overlay .box h1 { font-size: 3rem; color: var(--gold); margin:.3rem 0; text-shadow: 0 3px 0 var(--wood-3); }

.toast { position:absolute; left:50%; top: 70px; transform: translateX(-50%); z-index: 25;
  background: rgba(20,12,7,.9); border:1px solid var(--gold); color: var(--gold-soft);
  border-radius: 12px; padding:.5rem 1rem; font-family:"xkcd"; display:none; }
.toast.show { display:block; animation: slin .2s; }

/* brand icons */
.brand-ico { height: 26px; width: 26px; vertical-align: -6px; border-radius: 6px; }
.hero-ico { width: 84px; height: 84px; border-radius: 18px; box-shadow: 0 10px 26px var(--shadow);
  margin-bottom: .4rem; }

.btn, .slap-btn, .stack-cards, .tab { touch-action: manipulation; }

/* =========================================================================
   MOBILE
   ========================================================================= */
@media (max-width: 760px) {
  .nav { flex-wrap: wrap; gap: .4rem .8rem; }
  .nav .brand { font-size: 1.25rem; }
  .nav-user { width: 100%; order: 3; font-size: .82rem; }
  .login-hero h1 { font-size: 2.6rem; }
  .panel { padding: 1.1rem 1.1rem; }
}

@media (max-width: 640px) {
  .table-oval { width: 90vw; height: 54vh; border-width: 10px; }
  .seat { width: 88px; }
  .seat .avatar { width: 42px; height: 42px; font-size: 1.1rem; }
  .seat .pname { font-size: .92rem; }
  .seat .count { font-size: .78rem; padding: 1px 7px; }

  .card { width: 84px; height: 118px; }
  .card .pip { font-size: 2.4rem; }
  .card .corner .r { font-size: 1rem; }
  .pile { width: 92px; height: 130px; }
  .pile-count { top: calc(50% + 86px); font-size: .78rem; }

  .stack-cards { width: 58px; height: 82px; }
  .card-back { border-radius: 7px; }
  .mystack { left: 10px; bottom: 10px; }
  .mystack .myname { font-size: .9rem; }
  .mystack .lbl { font-size: .8rem; }

  .slap-btn { width: 98px; height: 98px; font-size: 1.4rem; bottom: 12px; }
  /* messages bar up in the top-right; standings top-left; no key hints on mobile */
  .slog { top: 44px; bottom: auto; right: 6px; left: auto; width: 52vw; max-width: 56vw; max-height: 26vh; }
  .slog .entry { font-size: .74rem; padding: .3rem .42rem; }
  .controls { display: none; }
  .side.right { top: 44px; left: 6px; right: auto; width: 42vw; }
  .standings .st { font-size: .78rem; }
  .fly-inner { width: 74px; height: 104px; left: -37px; top: -52px; }
  .fly-front .card { width: 74px; height: 104px; }
  .slap-hand svg { width: 66px; height: 80px; }
  .flip-lbl { font-size: .9rem; }
  .challenge { top: calc(47% - 104px); padding: .3rem .7rem; }
  .challenge .big { font-size: 1.3rem; }
  .game-top .rulechips { display: none; }
  .overlay .box h1 { font-size: 2.2rem; }
}

/* short landscape phones: keep the table from overflowing */
@media (max-height: 520px) {
  .table-oval { height: 66vh; top: 44%; }
  .slap-btn { width: 88px; height: 88px; bottom: 10px; }
  .slog { max-height: 30vh; }
}