:root {
  --felt: #0f5132;
  --felt-dark: #0a3a24;
  --ink: #f4f1e8;
  --muted: #b9cbbf;
  --gold: #f2c14e;
  --card: #fffdf7;
  --red: #c62828;
  --black: #1d1d1d;
  --danger: #ff8a80;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at center, #13663f 0%, var(--felt) 55%, var(--felt-dark) 100%);
  background-color: var(--felt);
  color: var(--ink);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#app { max-width: 720px; margin: 0 auto; padding: 12px 16px 24px; }
h1 { font-family: Georgia, serif; font-size: 34px; margin: 18px 0 2px; text-align: center; color: var(--gold); }
.sub { text-align: center; color: var(--muted); margin: 0 0 20px; }
.panel { background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.panel h2 { margin: 0 0 10px; font-size: 18px; }
label { display: block; font-size: 14px; color: var(--muted); margin: 8px 0 4px; }
input, select {
  width: 100%; padding: 12px; font-size: 16px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.95); color: #111;
}
button {
  font: inherit; font-weight: 600; padding: 12px 16px; border-radius: var(--radius); border: 0;
  background: var(--gold); color: #2b2100; cursor: pointer; min-height: 44px;
}
button.secondary { background: rgba(255,255,255,.14); color: var(--ink); }
button.small { padding: 6px 10px; min-height: 32px; font-size: 14px; }
button:disabled { opacity: .45; cursor: default; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > * { flex: 1; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; background: rgba(255,255,255,.14); color: var(--ink); }
.seg button.on { background: var(--gold); color: #2b2100; }
.hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.code { font-size: 40px; letter-spacing: 6px; font-weight: 800; text-align: center; color: var(--gold); }
.links { font-size: 14px; text-align: center; color: var(--muted); word-break: break-all; }
ul.plist { list-style: none; padding: 0; margin: 0; }
ul.plist li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }

/* Game */
#app.game { max-width: 560px; }
.seats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 52px; }
.seat { padding: 6px 12px 8px; border-radius: 12px; background: rgba(0,0,0,.25); border: 2px solid transparent; text-align: center; min-width: 96px; cursor: default; transition: border-color .2s, box-shadow .2s; }
.seat.turn, .me.turn { border-color: var(--gold); box-shadow: 0 0 12px rgba(242,193,78,.4); }
.seat.target { border-color: #7fd1ff; box-shadow: 0 0 0 3px rgba(127,209,255,.35); cursor: pointer; }
.seat.hover { background: rgba(127,209,255,.25); }
.sname { font-weight: 700; font-size: 14px; }
.minis { display: flex; justify-content: center; margin-top: 4px; height: 20px; }
.minis span { width: 14px; height: 20px; border-radius: 3px; margin-left: -8px; border: 1.5px solid #fff; background: repeating-linear-gradient(45deg,#7a1f1f,#7a1f1f 3px,#922 3px,#922 6px); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.minis span:first-child { margin-left: 0; }
.status { margin: 8px 0; padding: 10px 12px; border-radius: var(--radius); background: rgba(0,0,0,.28); font-size: 15px; min-height: 44px; }
.status b { color: var(--gold); }
.winner { font-size: 22px; font-weight: 800; color: var(--gold); }

/* Tilted 3D table */
.tablewrap { perspective: 900px; perspective-origin: 50% 0%; display: flex; justify-content: center; align-items: flex-start; overflow: visible; }
.table {
  position: relative; transform: rotateX(24deg); transform-origin: 50% 40%;
  border-radius: 22%; background: radial-gradient(ellipse at center, #1a7a4c 0%, #12603a 55%, #0c4a2c 100%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.45), 0 0 0 10px #5b3a1e, 0 0 0 13px #3e2712, 0 24px 40px rgba(0,0,0,.5);
}
.table .card, .table .slot { position: absolute; }
.slot { border-radius: 8px; border: 2px dashed rgba(255,255,255,.28); }
.slot.target, .card.target { box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(242,193,78,.7); }
.slot.hover, .card.hover { box-shadow: 0 0 0 4px #fff, 0 0 22px rgba(255,255,255,.9) !important; }
.card.picked { box-shadow: 0 0 0 3px #7fd1ff; }

/* Cards */
.card {
  background: var(--card); color: var(--black); border-radius: calc(var(--cw, 50px) * 0.12);
  box-shadow: 0 1px 0 #d9d4c4, 0 2px 0 #c9c3b0, 0 4px 8px rgba(0,0,0,.4); user-select: none; -webkit-user-select: none; touch-action: none;
}
.face { position: absolute; inset: 0; color: var(--black); }
.face.red { color: var(--red); }
.ix { position: absolute; font-weight: 800; line-height: .95; text-align: center; font-size: calc(var(--cw, 50px) * 0.27); }
.ix.tl { top: 4%; left: 6%; }
.ix.br { bottom: 4%; right: 6%; transform: rotate(180deg); }
.pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw, 50px) * 0.55); }
.back { position: absolute; inset: 0; border-radius: inherit; border: calc(var(--cw, 50px) * 0.06) solid #fff;
  background: repeating-linear-gradient(45deg,#7a1f1f,#7a1f1f 5px,#922 5px,#922 10px); }
.deckcard { cursor: grab; }
.deckcard.glow { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(242,193,78,.8); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 28px rgba(242,193,78,1); } }
.card.lifted { opacity: .25; }

/* Hand */
.me { text-align: center; font-size: 14px; font-weight: 700; margin-top: 4px; padding: 4px; border-radius: 10px; border: 2px solid transparent; }
.hand { position: relative; margin-top: 4px; border-radius: 14px; transition: background .2s; }
.hand.target { background: rgba(242,193,78,.12); box-shadow: inset 0 0 0 2px rgba(242,193,78,.6); }
.hand.hover { background: rgba(255,255,255,.18); }
.hand .hint { text-align: center; padding-top: 30px; }
.hcard { position: absolute; cursor: grab; transition: top .15s; }
.hcard.sel { top: -6px !important; box-shadow: 0 0 0 3px var(--gold), 0 6px 10px rgba(0,0,0,.4); }
.hcard.playable { box-shadow: 0 0 0 2px rgba(46,160,67,.9), 0 4px 8px rgba(0,0,0,.4); }

/* Drag ghost and flying cards */
.ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; box-shadow: 0 14px 24px rgba(0,0,0,.5); }
.pileghost { box-shadow: 0 2px 0 #ccc, 0 4px 0 #bbb, 0 6px 0 #aaa, 0 14px 24px rgba(0,0,0,.5); }
.flyer { position: fixed; left: 0; top: 0; z-index: 900; pointer-events: none; perspective: 600px; }
.flyer .inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.flyer .card { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 10px 18px rgba(0,0,0,.45); }
.flyer .backside { transform: rotateY(180deg); }

.actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.actions button { flex: 1; }
.askbox select { margin-bottom: 6px; }

/* Dice */
.die3d { --d: 64px; width: var(--d); height: var(--d); position: relative; transform-style: preserve-3d; }
.die3d .f { position: absolute; inset: 0; background: #fffdf7; border-radius: 16%; border: 1px solid #ddd;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 14%;
  box-shadow: inset 0 0 10px rgba(0,0,0,.15); backface-visibility: hidden; }
.die3d .f i { display: block; margin: 18%; border-radius: 50%; }
.die3d .f i.on { background: #222; box-shadow: inset 0 2px 2px rgba(255,255,255,.3); }
.die3d .f1 i.on { background: var(--red); }
.die3d .f1 { transform: translateZ(calc(var(--d) / 2)); }
.die3d .f6 { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.die3d .f3 { transform: rotateY(90deg) translateZ(calc(var(--d) / 2)); }
.die3d .f4 { transform: rotateY(-90deg) translateZ(calc(var(--d) / 2)); }
.die3d .f5 { transform: rotateX(90deg) translateZ(calc(var(--d) / 2)); }
.die3d .f2 { transform: rotateX(-90deg) translateZ(calc(var(--d) / 2)); }
.dicestage { position: fixed; left: 0; top: 0; z-index: 1100; perspective: 500px; pointer-events: none; filter: drop-shadow(0 12px 10px rgba(0,0,0,.5)); }
.dicestage.landed .die3d .f { box-shadow: inset 0 0 10px rgba(0,0,0,.15), 0 0 20px rgba(242,193,78,.9); }
.rollbox { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; }
.diebtn { background: none; padding: 10px; perspective: 400px; min-height: 0; }
.diebtn .die3d { --d: 56px; animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 0%,100% { transform: rotateX(-20deg) rotateY(25deg); } 50% { transform: rotateX(-30deg) rotateY(-25deg); } }

details { margin-top: 14px; background: rgba(0,0,0,.2); border-radius: var(--radius); padding: 8px 12px; }
summary { cursor: pointer; font-weight: 600; }
.log, .chat { max-height: 180px; overflow-y: auto; font-size: 14px; margin-top: 6px; }
.log div, .chat div { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.chat b { color: var(--gold); }
.badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #2b2100; font-size: 12px; margin-left: 6px; }

#toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: #2b0d0d; color: #fff;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--danger); max-width: 90vw; z-index: 2000; font-size: 15px;
}


/* ---------- v3: seats around the table ---------- */
#app.ingame { max-width: 860px; }
.arena { display: flex; flex-direction: column; align-items: center; }
.toprow { display: flex; justify-content: center; min-height: 8px; margin-bottom: -6px; position: relative; z-index: 5; }
.midrow { display: flex; align-items: center; justify-content: center; width: 100%; }
.sidecol { width: var(--side); flex: 0 0 var(--side); display: flex; justify-content: center; position: relative; z-index: 5; }
.seat-top { min-width: 120px; }
.seat-left, .seat-right { min-width: 0; width: calc(var(--side) + 18px); padding: 6px 2px; }
.seat-left { margin-right: -18px; }
.seat-right { margin-left: -18px; }
.seat-left .minis, .seat-right .minis { flex-direction: column; align-items: center; height: auto; }
.seat-left .minis span, .seat-right .minis span { margin-left: 0; margin-top: -14px; width: 20px; height: 14px; }
.seat-left .minis span:first-child, .seat-right .minis span:first-child { margin-top: 0; }
.seat-left .sname, .seat-right .sname { font-size: 12px; word-break: break-word; line-height: 1.15; }
.seat.safe { opacity: .7; border-color: var(--gold); }
.seat.loser, .me.loser { border-color: var(--danger); box-shadow: 0 0 14px rgba(255,138,128,.6); }
.badge2 { font-size: 12px; font-weight: 700; color: var(--gold); }
.seat.sitout { opacity: .45; }
.seat.teamus { background: rgba(242,193,78,.12); }
.seat.teamthem { background: rgba(80,140,255,.14); }
.me.teamus { background: rgba(242,193,78,.12); }
.me { display: flex; justify-content: center; gap: 8px; align-items: center; }
.badges { display: flex; gap: 4px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 2px 0; }
.chip { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #222; font-size: 12px; font-weight: 800; padding: 0 3px; }
.chip.maker { background: var(--gold); }
.tricks { display: inline-flex; }
.tricks i { width: 10px; height: 14px; border-radius: 2px; border: 1px solid #fff; background: #7a1f1f; margin-left: -5px; }
.tricks i:first-child { margin-left: 0; }

/* lobby */
.teamdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.teamdot.t0 { background: var(--gold); }
.teamdot.t1 { background: #6fa0ff; }
.rule { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.rule .hint { margin-top: 2px; }
.rulectl select { width: 80px; padding: 8px; }
.switch { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 999px; background: rgba(255,255,255,.25); position: relative; cursor: pointer; padding: 0; border: 0; flex: 0 0 auto; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch:checked { background: var(--gold); }
.switch:checked::after { left: 23px; }
.switch:disabled { opacity: .6; }

/* euchre */
.scorebar { display: flex; align-items: stretch; gap: 8px; margin-bottom: 6px; }
.scorebar .team { flex: 1; border-radius: 12px; padding: 6px 10px; display: flex; flex-direction: column; align-items: center; font-size: 13px; }
.scorebar .us { background: rgba(242,193,78,.18); }
.scorebar .them { background: rgba(80,140,255,.2); }
.scorebar .pts { font-size: 26px; font-weight: 800; line-height: 1.1; }
.scorebar .tk { font-size: 12px; color: var(--muted); min-height: 15px; }
.scorebar .to { align-self: center; color: var(--muted); font-size: 12px; }
.trickzone { position: absolute; border-radius: 50%; z-index: 1; transition: box-shadow .2s, background .2s; }
.trickzone.live { box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.trickzone.target { box-shadow: inset 0 0 0 3px var(--gold), 0 0 18px rgba(242,193,78,.5); }
.trickzone.hover { background: rgba(255,255,255,.12); }
.table .kitty.target { box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(242,193,78,.7); }
.trumpmark { position: absolute; z-index: 30; text-align: center; background: rgba(255,255,255,.92); color: #222; border-radius: 12px; padding: 4px 10px; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.trumpmark.red { color: var(--red); }
.trumpmark .tsuit { font-size: 30px; line-height: 1; }
.trumpmark .tlabel { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #555; }
.trumpmark .tmaker { font-size: 11px; color: #333; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suitbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.suitbtn { background: #fffdf7; color: #222; font-size: 26px; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.suitbtn.red { color: var(--red); }
.suitbtn small { font-size: 12px; color: #555; }
.alone { display: flex; align-items: center; gap: 8px; font-weight: 600; flex: 0 0 auto !important; }
.alone input { width: 22px; height: 22px; }
.bubble { position: fixed; z-index: 1200; background: #fff; color: #222; font-weight: 800; padding: 4px 10px; border-radius: 999px; pointer-events: none; box-shadow: 0 4px 10px rgba(0,0,0,.4); white-space: nowrap; }
.mutebtn { position: fixed; right: 12px; top: 12px; z-index: 1500; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 20px; }
.dealzone { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.dealzone.target { box-shadow: inset 0 0 0 3px rgba(242,193,78,.6); }
.dealzone.hover { background: rgba(255,255,255,.06); }
/* v3.1 seat fixes: side seats sit up where the tilted table is narrower; your label stays above the table edge */
.sidecol { align-self: flex-start; padding-top: calc(var(--S) * 0.06); }
.me { position: relative; z-index: 6; }
.seat-left .minis span, .seat-right .minis span { flex: 0 0 auto; }
.seat-left .minis span, .seat-right .minis span { margin-top: -8px; }
.seat-left .minis span:first-child, .seat-right .minis span:first-child { margin-top: 0; }
#app.ingame { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#app.ingame input, #app.ingame textarea { -webkit-user-select: text; user-select: text; }

/* ---------- v4: phone-first game screen ---------- */
#app.ingame { max-width: 860px; padding: 8px 8px calc(76px + env(safe-area-inset-bottom)); }
.gamewrap { display: flex; flex-direction: column; }
.g-side { display: flex; flex-direction: column; align-items: stretch; }
.g-side .hand { align-self: center; }
.topbar { display: flex; align-items: center; gap: 6px; min-height: 48px; margin-bottom: 4px; }
.topbar .grow { flex: 1; }
.roundbtn { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; background: rgba(0,0,0,.32); color: var(--ink); font-size: 18px; font-weight: 800; display: inline-grid; place-items: center; flex: 0 0 auto; }
.roundbtn.light { background: #ece4cf; color: #1d2a22; }
.pill { display: flex; flex-direction: column; align-items: flex-start; padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 700; line-height: 1.15; max-width: 34vw; }
.pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pill b { font-size: 20px; line-height: 1; }
.pill small { font-size: 11px; color: var(--muted); font-weight: 600; }
.pill.us { background: rgba(242,193,78,.16); border: 1px solid rgba(242,193,78,.5); }
.pill.us b { color: var(--gold); }
.pill.them { background: rgba(90,150,255,.16); border: 1px solid rgba(120,170,255,.5); }
.pill.them b { color: #a9c8ff; }
.pill.plain { background: rgba(0,0,0,.3); font-size: 13px; padding: 8px 10px; }
.topbar .to { font-size: 12px; color: var(--muted); }
.trumppill { display: flex; align-items: center; gap: 6px; background: #fffdf7; color: #222; border-radius: 12px; padding: 4px 9px; }
.trumppill b { font-size: 24px; line-height: 1; }
.trumppill.red b { color: var(--red); }
.trumppill span { font-size: 10px; font-weight: 800; line-height: 1.15; color: #444; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decreepill { display: flex; align-items: center; gap: 8px; background: #fffdf7; color: #1d2a22; border-radius: 12px; padding: 4px 10px 4px 4px; font-size: 12px; line-height: 1.15; }
.decreepill .miniDie { width: 30px; height: 30px; border-radius: 7px; box-shadow: inset 0 0 0 2px #1d2a22; display: grid; place-items: center; font-weight: 900; font-size: 16px; }

.status { font-size: 16px; text-align: center; margin: 6px 0; }
.status .hint { margin-top: 2px; }
.me { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding: 5px 8px; font-size: 15px; }
.me .badges { margin: 0; }
.me.dealer { border-color: rgba(242,193,78,.8); }
.me.turn { border-color: var(--gold); }
.handbtns { display: inline-flex; gap: 6px; }
.handbtns button { padding: 4px 10px; min-height: 30px; font-size: 13px; }
.actions button.big { min-height: 52px; font-size: 17px; font-weight: 800; }
.bidrow { align-items: center; }

/* seats */
.seat { position: relative; }
.seat.dealer { border-color: var(--gold); background: rgba(242,193,78,.16); box-shadow: 0 0 14px rgba(242,193,78,.45); }
.seatlabel { font-size: 9px; font-weight: 900; letter-spacing: .08em; color: var(--gold); line-height: 1.1; }
.tchip { display: inline-block; padding: 0 6px; border-radius: 8px; background: #fffdf7; color: #14331f; font-size: 11px; font-weight: 900; line-height: 18px; white-space: nowrap; }
.chip.ok { background: #3ddc84; color: #06301a; }
.chip.maker.red { color: var(--red); }
.puck { position: absolute; z-index: 35; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 16px; color: #3a2a00;
  background: radial-gradient(circle at 35% 30%, #ffe7a3, #f2c14e 60%, #b98a1c); box-shadow: 0 3px 8px rgba(0,0,0,.5); transition: left .6s ease, top .6s ease; }
.tdtag { position: absolute; z-index: 30; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 9px; white-space: nowrap; }
.tdtag.red { color: #ffb3b3; }
.kitty.leaving { animation: kittyout .6s ease-in .8s forwards; }
@keyframes kittyout { to { opacity: 0; transform: translate(var(--kx), var(--ky)) scale(.6); } }

/* hand-over summary */
.summary { background: rgba(5,25,15,.85); border-radius: 16px; padding: 12px 14px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); margin-top: 4px; }
.sumhead { font-size: 12px; font-weight: 900; letter-spacing: .08em; color: var(--gold); }
.sumbig { font-size: 22px; font-weight: 900; }
.sumrows { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 4px; text-align: left; font-size: 14px; }
.sumrow { display: flex; justify-content: space-between; padding: 4px 10px; border-radius: 8px; }
.sumrow.us { background: rgba(242,193,78,.14); }
.sumrow.them { background: rgba(90,150,255,.14); }
.sumrow small { color: var(--muted); }
.readychips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.readychips span { padding: 3px 10px; border-radius: 12px; border: 2px dashed rgba(255,255,255,.5); font-size: 13px; font-weight: 800; }
.readychips span.ok { background: #3ddc84; color: #06301a; border-color: #3ddc84; }

/* bottom bar and sheets */
.bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; display: flex; justify-content: center; gap: 8px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: rgba(5,30,18,.92); backdrop-filter: blur(6px); }
.bottombar button { background: rgba(255,255,255,.12); color: var(--ink); border-radius: 20px; min-height: 40px; padding: 6px 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.bottombar button.on { background: var(--gold); color: #2b2100; }
.sheetback { position: fixed; inset: 0; z-index: 1350; background: rgba(0,0,0,.45); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400; max-height: 78vh; overflow-y: auto; background: #12321f; border-radius: 20px 20px 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0,0,0,.5); max-width: 720px; margin: 0 auto; animation: sheetup .22s ease-out; }
@keyframes sheetup { from { transform: translateY(40px); opacity: 0; } }
.sheethead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 18px; }
.sheet .log.big, .sheet .chat { max-height: 50vh; }
.menulist { display: flex; flex-direction: column; gap: 8px; }
.tutsheet { background: #fbf6e9; color: #1d2a22; }
.tutsheet .hint { color: #5d5a4c; }
.tutstep { font-size: 11px; font-weight: 900; letter-spacing: .08em; color: #9a6b00; }
.tutbody { font-size: 15px; line-height: 1.45; }
.tutbody p { margin: 8px 0; }
.tutlabel { font-size: 12px; font-weight: 900; color: #6b5a34; margin-bottom: 4px !important; }
.tutnote { background: #eaf6ee; border-radius: 12px; padding: 8px 12px; font-size: 14px; }
.tutsheet button.secondary { background: #ece4cf; color: #1d2a22; }
.tutsheet button:not(.secondary):not(.roundbtn) { background: #1d6b42; color: #fff; }
.tutcards { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 6px 0; }
.tutcard { display: flex; flex-direction: column; align-items: center; width: 44px; }
.tutcard .card { position: relative; width: 40px; height: 57px; }
.tutcard .card.glowgold { box-shadow: 0 0 0 3px var(--gold), 0 4px 8px rgba(0,0,0,.3); }
.tutcard small { font-size: 9px; font-weight: 800; text-align: center; line-height: 1.1; margin-top: 3px; color: #2b2100; }
.qr { width: 180px; margin: 10px auto 0; background: #fff; border-radius: 10px; padding: 6px; }
.qr svg { display: block; width: 100%; height: auto; }

/* sideways phone: table on the left, your hand and buttons on the right */
#app.ingame.wide { max-width: none; padding: 6px 12px 64px; }
#app.wide .gamewrap { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "table top" "table side"; column-gap: 14px; }
#app.wide .g-top { grid-area: top; }
#app.wide .g-table { grid-area: table; }
#app.wide .g-side { grid-area: side; }
#app.wide .status { margin-top: 0; }
#app.wide .bottombar { left: auto; right: 0; bottom: 0; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); border-radius: 16px 0 0 0; background: rgba(5,30,18,.85); }
#app.wide .bottombar button { min-height: 34px; padding: 4px 12px; font-size: 13px; }
#app.wide .sheet { max-height: 90vh; }

/* v4 phone tuning */
.toprow { margin-bottom: -22px; }
.seat { padding: 4px 8px 6px; }
.seat-top { min-width: 110px; }
.seat-left, .seat-right { width: 64px; padding: 4px 2px; }
.seat-left { margin-right: -34px; }
.seat-right { margin-left: -34px; }
.seat-left .sname, .seat-right .sname { font-size: 11px; word-break: keep-all; overflow-wrap: normal; overflow: hidden; }
.status { font-size: 15px; padding: 8px 10px; min-height: 0; }
@media (min-width: 700px) and (min-height: 561px) {
  .seat-left, .seat-right { width: calc(var(--side) + 18px); }
  .seat-left { margin-right: -18px; }
  .seat-right { margin-left: -18px; }
  .seat-left .sname, .seat-right .sname { font-size: 13px; }
}
.seat-top { display: flex; align-items: center; gap: 6px; padding: 4px 10px; }
.seat-top .minis { margin-top: 0; }
.seat-top .badges { margin: 0; flex-wrap: nowrap; }
.tchip { display: inline-flex; align-items: center; gap: 3px; }
.tchip i { width: 8px; height: 11px; border-radius: 2px; background: #7a1f1f; border: 1px solid #14331f; }
.g-table { position: relative; }
.tableover { position: absolute; left: 0; right: 0; top: 40px; display: flex; justify-content: center; z-index: 40; padding: 0 12px; }
.tableover .summary { width: 100%; max-width: 380px; padding: 10px 12px; }
.tableover .sumrows { margin: 6px 0 2px; font-size: 13px; gap: 3px; }
.tableover .sumrow { padding: 3px 10px; }
.tableover .sumbig { font-size: 20px; }
.hand { margin-top: 10px; }
.suitbtns.four { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.suitbtns.four button { min-height: 52px; padding: 4px; font-size: 22px; }
.suitbtns.four #pass { font-size: 16px; font-weight: 800; }
.bidnote { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 6px; }
.bidnote .alone { font-size: 14px; }
.tdtag { transform: translateY(-50%); text-align: center; line-height: 1.15; }
.tdtag.toleft { transform: translate(-100%, -50%); }
#app.ingame.wide { padding-bottom: 8px; }
#app.wide .g-side { padding-bottom: 56px; }
#app.wide .topbar { min-height: 42px; }

#app.wide .bottombar { left: 0; right: auto; border-radius: 0 16px 0 0; }
#app.wide .g-side { padding-bottom: 0; }
#app.wide .status { font-size: 14px; padding: 6px 10px; margin: 2px 0 4px; }
#app.wide .actions { margin-top: 4px; }
#app.wide .actions button.big { min-height: 42px; font-size: 16px; }
#app.wide .suitbtns.four button { min-height: 42px; }
#app.wide .me { margin-top: 4px; padding: 2px 8px; }
#app.wide .hand { margin-top: 4px; }

#app.ingame.wide { max-width: 1400px; }
.g-side { position: relative; z-index: 5; }
.bottombar { padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); }
.bottombar button { min-height: 36px; padding: 4px 14px; }
#app.ingame { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
#app.ingame.wide { padding-top: 10px; }
/* Dealer is purple, whose turn it is stays gold */
:root { --dealer: #b98cff; }
.seat.dealer { border-color: var(--dealer); background: rgba(185,140,255,.18); box-shadow: 0 0 12px rgba(185,140,255,.45); }
.seat.dealer.turn { border-color: var(--gold); box-shadow: 0 0 0 3px var(--dealer), 0 0 14px rgba(242,193,78,.5); }
.seatlabel { color: var(--dealer); }
.me.dealer { border-color: var(--dealer); }
.me.dealer.turn { border-color: var(--gold); box-shadow: 0 0 0 3px var(--dealer); }
.me.dealer .mename { color: #e2d0ff; }
.puck { color: #fff; background: radial-gradient(circle at 35% 30%, #e6d6ff, #9b6bff 60%, #5d34b0); }

/* Euchre deal style picker */
.dealstyle { display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.dealstyle > span { font-weight: 800; font-size: 13px; opacity: .85; }
.dealstyle .seg { display: flex; flex-wrap: wrap; gap: 4px; }
.dealstyle .seg button { min-height: 40px; padding: 0 10px; font-size: 14px; white-space: nowrap; flex: 0 0 auto; }

/* ---------- Table screen (TV) ---------- */
#app.screen { max-width: none; padding: 12px 20px; }
.screenwrap { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: calc(100vh - 24px); }
.screenwrap .g-top { width: 100%; }
.screenwrap .g-table { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.screenwrap .status.big { font-size: clamp(18px, 2.2vw, 30px); padding: 12px 24px; max-width: 1100px; width: 100%; text-align: center; }
#app.screen .seat { font-size: clamp(14px, 1.5vw, 22px); min-width: 120px; }
#app.screen .seat .sname { font-size: clamp(16px, 1.7vw, 26px); }
#app.screen .sidecol { width: var(--side); }
.botrow { margin-top: 6px; justify-content: center; }
.screenlobby { max-width: 1100px; margin: 0 auto; text-align: center; }
.screenlobby h1 { font-size: clamp(36px, 5vw, 64px); }
.screenjoin { display: flex; gap: 48px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: left; }
.screenjoin > div:first-child { flex: 0 0 auto; }
.qr.big { width: min(42vh, 380px); height: min(42vh, 380px); max-width: none; padding: 12px; }
.qr.big svg { width: 100%; height: 100%; display: block; }
.code.huge { font-size: clamp(64px, 10vw, 140px); letter-spacing: 12px; }
.plist.big li { font-size: 24px; }
.tvhint { margin-top: 10px; font-size: 13px; opacity: .9; word-break: break-all; }

/* ---------- Hand-only phones (a table screen is on) ---------- */
.gamewrap.ctrl { display: flex; flex-direction: column; gap: 8px; padding-bottom: 76px; }
.ctrlnote { text-align: center; font-size: 12px; opacity: .7; }
.mini { display: flex; justify-content: center; }
.minigrid { display: grid; grid-template-columns: repeat(3, 42px); grid-auto-rows: 58px; gap: 4px 14px; justify-content: center; }
.mcard, .mslot { position: relative; width: 40px; height: 56px; --cw: 40px; }
.gamewrap.ctrl .status { padding: 8px 12px; }
.gamewrap.ctrl .me { padding: 4px 10px; }
.mcard.card { position: relative; left: auto; top: auto; }
.mslot { border: 2px dashed rgba(255,255,255,.3); border-radius: 7px; display: grid; place-items: center; font-weight: 900; opacity: .7; }
.mslot.corner { border-color: rgba(242,193,78,.45); color: var(--gold); }
.mslot.target, .mcard.target { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(242,193,78,.6); opacity: 1; }
.mcard.picked { transform: translateY(-6px); box-shadow: 0 0 0 3px #3ddc84; }
.mcount { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: #1d2a22; color: #fff; font: 800 11px/20px Nunito, system-ui, sans-serif; text-align: center; padding: 0 4px; z-index: 3; }
.mbase { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 800; color: var(--ink); opacity: .8; }
.minirow { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.minfo { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; }
.redtxt { color: #ff6b6b; }
.botrow { margin: 6px 0 0 !important; }
#app.screen .seat { padding: 10px 18px; border-radius: 16px; }
#app.screen .topbar { zoom: 1.35; }
#app.screen .seat .badges, #app.screen .seat .minis { zoom: 1.4; }
.tvtag { font-size: 18px; margin-left: 4px; }

/* v6.3: up to 6 players in King's Corners, so 2-3 seats can share the top row */
.toprow { gap: 4px; }
.toprow:has(> .seat:nth-child(3)) .seat-top { min-width: 0; flex: 0 1 auto; flex-direction: column; gap: 2px; padding: 4px 6px; max-width: 32%; }
.toprow:has(> .seat:nth-child(3)) .seat-top .sname { font-size: 12px; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; }
#app.screen .toprow, #app.screen .botrow { gap: 16px; }
.arena:has(.toprow > .seat:nth-child(3)) .sidecol { padding-top: calc(var(--S) * 0.2); }
#app.screen .arena:has(.toprow > .seat:nth-child(3)) .sidecol { padding-top: calc(var(--S) * 0.06); }