:root {
  --felt: #14532d;
  --felt2: #0f3f22;
  --ink: #f4f1e8;
  --muted: #b9c7bb;
  --accent: #f2c14e;
  --danger: #e2574c;
  --card: #fffdf6;
  --cw: min(15vw, 78px);
  --btn: #2b6b44;
  --field: #0d3a1f;
  --field-line: #3c7a52;
  --line: #2f6b45;
  --shade: rgba(0,0,0,.25);
  --sheet: #0d3a1f;
  --box: #10391f;
  --logbg: rgba(5,25,12,.97);
}
/* Világos téma: krémszínű papír, halványzöld posztó, sötét betű */
:root[data-theme="light"] {
  --felt: #e3eedd;
  --felt2: #c9dcc3;
  --ink: #1d2a20;
  --muted: #55665a;
  --accent: #e0a91e;
  --btn: #3f8a5c;
  --field: #fbfaf5;
  --field-line: #9cb9a3;
  --line: #a9c2ae;
  --shade: rgba(255,255,255,.55);
  --sheet: #f4f1e6;
  --box: #fbf8ee;
  --logbg: rgba(250,248,240,.98);
}
:root[data-theme="light"] button:not(.primary):not(.danger):not(.iconbtn):not(#langs button) { color: #fff; }
:root[data-theme="light"] .badge { background: #dfe8dc; color: #34453a; }
:root[data-theme="light"] .badge.dealer { background: #1d2a20; color: #fff; }
:root[data-theme="light"] .opp.team, :root[data-theme="light"] #me.team, :root[data-theme="light"] .rp-row.team { background: rgba(124, 58, 237, .14); }
:root[data-theme="light"] #devlog .chat { color: #7a5200; }
:root[data-theme="light"] #modal { background: rgba(30,40,30,.45); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(circle at 50% 40%, var(--felt), var(--felt2));
  color: var(--ink);
  font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
#app { height: var(--vh, 100%); }
.hidden { display: none !important; }
button {
  font: inherit; border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer;
  background: var(--btn); color: var(--ink); box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); color: #2a1d00; font-weight: 700; }
button.danger { background: var(--danger); }
button.small { padding: 6px 9px; font-size: 13px; white-space: nowrap; }
button:disabled { opacity: .45; cursor: default; }
select, input { font: inherit; padding: 10px; border-radius: 10px; border: 1px solid var(--field-line); background: var(--field); color: var(--ink); width: 100%; }
a { color: var(--accent); }

.screen { height: 100%; }
#home, #lobby { max-width: 420px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
#home > *, #lobby > * { flex-shrink: 0; }
h1 { margin: 0; font-size: 30px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
h1 small { font-size: 15px; font-weight: 400; color: var(--muted); }
label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
label.check input { width: auto; }
.row { display: flex; gap: 8px; }
.hint { color: var(--muted); font-size: 13px; text-align: center; }
hr { border: 0; border-top: 1px solid var(--line); width: 100%; }
#seatList { padding-left: 20px; }
#seatList li { padding: 6px 0; }

/* Asztal */
#table { display: grid; grid-template-rows: auto 1fr auto auto auto auto; grid-template-columns: minmax(0, 1fr); height: 100%; }
#chatbox { min-width: 0; background: var(--shade); padding: 3px 8px 4px; }
#devlog { font-size: 12px; color: #9fd3ff; max-height: 5.4em; overflow: hidden; }
#devlog .chat { color: #ffe9a8; }
#chatrow { display: flex; gap: 5px; align-items: center; margin-top: 3px; }
#chatrow input { padding: 6px 8px; font-size: 14px; flex: 1; min-width: 0; }
#chatrow button { padding: 6px 10px; min-width: 34px; }
#chatPlus { background: #2f7d4a; font-weight: 800; } #chatMinus { background: #8a3a32; font-weight: 800; }
#chatQuick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
#chatQuick button { padding: 5px 9px; font-size: 13px; }
.speech { position: relative; background: #fff7d6; color: #222; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 10px; max-width: 150px; box-shadow: 0 2px 6px rgba(0,0,0,.4); animation: pop .2s ease-out; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#devlog div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#devlog div:last-child { white-space: normal; }
#topbar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--shade); font-size: 13px; flex-wrap: wrap; }
#topbar > button { flex: 0 0 auto; }
#topbar .spacer { flex: 1; }
#roomTag { color: var(--muted); flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#topbar .spacer { display: none; }
#contract { font-weight: 600; }
.mini-suit { width: 18px; height: 18px; vertical-align: middle; }

#felt { position: relative; min-height: 290px; }
.opp { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 13px; max-width: 34%; }
#opp-top { top: 6px; left: 50%; transform: translateX(-50%); }
#opp-left { left: 6px; top: 38%; transform: translateY(-50%); }
#opp-right { right: 6px; top: 38%; transform: translateY(-50%); }
.pname { font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--shade); white-space: nowrap; }
.turn .pname, #me.turn .pname { background: var(--accent); color: #2a1d00; }
.badges { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.badge { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #0b2e18; color: var(--muted); }
.badge.caller, .badge.partner { background: #7c3aed; color: white; font-size: 13px; font-weight: 800; letter-spacing: 1px; padding: 2px 8px; }
/* a hívó csapat: lila keret és háttér */
.opp.team { background: rgba(124, 58, 237, .32); outline: 3px solid #a78bfa; border-radius: 14px; padding: 4px 6px; }
#me.team { background: rgba(124, 58, 237, .32); outline: 3px solid #a78bfa; outline-offset: -3px; border-radius: 12px; }
.rp-row.team { background: rgba(124, 58, 237, .32); outline: 2px solid #a78bfa; border-radius: 10px; padding: 3px 4px; }
.rp-card.team small { color: #d8c8ff; font-weight: 700; }
.badge.dealer { background: #e5e7eb; color: #111; font-size: 13px; font-weight: 800; padding: 2px 8px; }
.badge.kontra { background: var(--danger); color: white; }
.badge.off { background: #555; color: #ddd; }
.bubble { font-size: 12px; background: var(--card); color: #222; padding: 2px 8px; border-radius: 8px; max-width: 160px; }
.bidstack { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bidstack .bubble { font-size: 11px; padding: 1px 7px; white-space: nowrap; max-width: none; }
.bidstack .bubble.pass { background: #cfd8cf; color: #444; }
.bidstack .bubble.old { background: #e9e2c8; color: #555; text-decoration: line-through; }
.bidstack .bubble.cur { background: var(--accent); color: #2a1d00; font-weight: 800; font-size: 12px; display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 6px; }
.bidstack .bubble.cur .mini-suit { width: 14px; height: 14px; }
.bidstack .bubble.cur .card { width: 22px; border-radius: 3px; box-shadow: none; }
#me .bidstack { flex-direction: row; }
.backs { display: flex; }
.backs .card { width: calc(var(--cw) * .38); margin-left: calc(var(--cw) * -.22); }
.backs .card:first-child { margin-left: 0; }
.devhand { display: flex; flex-wrap: wrap; justify-content: center; max-width: 170px; }
.devhand .card { width: calc(var(--cw) * .42); margin: 1px; }
.balance { font-size: 12px; color: var(--muted); white-space: nowrap; }

#center { position: absolute; left: 50%; top: 59%; transform: translate(-50%, -50%); width: calc(var(--cw) * 2.6); height: calc(var(--cw) * 2.7); }
#trick { position: relative; width: 100%; height: 100%; }
#trick .card { position: absolute; width: calc(var(--cw) * .85); transition: transform .25s, opacity .4s; }
#trick .pos-bottom { left: 50%; bottom: 0; transform: translateX(-50%); }
#trick .pos-top { left: 50%; top: 0; transform: translateX(-50%); }
#trick .pos-left { left: 0; top: 50%; transform: translateY(-50%); }
#trick .pos-right { right: 0; top: 50%; transform: translateY(-50%); }
#trick.done .card { opacity: .75; }
#trick .card.win { box-shadow: 0 0 0 3px var(--accent), 0 4px 10px rgba(0,0,0,.4); opacity: 1; }
/* meghívott lap: középen licit alatt, kicsiben a sarokban játék közben */
.callshow { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; text-align: center; }
#trick .callshow .card { position: static; width: calc(var(--cw) * 1.05); transform: none; }
.callshow .lvl { font-weight: 900; font-size: 20px; letter-spacing: 1px; color: var(--accent); text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.callshow .who, .callmini .who { font-size: 12px; color: var(--muted); }
.kontra-big { font-weight: 900; font-size: 26px; letter-spacing: 2px; color: #ff6b5e; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
/* licit közben a mondások a jobb felső sarokban gyűlnek lefelé */
#bidlog { position: absolute; right: 4px; top: 4px; z-index: 3; background: rgba(0,0,0,.35); border-radius: 10px; padding: 3px 7px; font-size: 11px; line-height: 1.4; max-width: 34%; }
#bidlog div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bidlog .b-bid { color: var(--accent); font-weight: 700; }
#bidlog .b-pass { color: var(--muted); }
#callmini { position: absolute; left: 6px; bottom: 6px; z-index: 2; }
#callmini.top { bottom: auto; top: 8px; }
.callmini { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--shade); border-radius: 10px; padding: 4px 6px; }
.callmini .card { width: calc(var(--cw) * .55); }
.callmini .lvl { font-weight: 800; font-size: 11px; color: var(--accent); display: flex; align-items: center; gap: 3px; }
.callmini .lvl .mini-suit { width: 15px; height: 15px; }
.callshow .lvl .mini-suit { width: 22px; height: 22px; vertical-align: -3px; }
.callmini .kontra-big { font-size: 13px; letter-spacing: 1px; }
#status { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); white-space: nowrap; font-size: 13px; color: var(--muted); text-align: center; }

#me { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 2px 8px; font-size: 13px; flex-wrap: wrap; }
#actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 4px 8px; min-height: 8px; }
#actions .panel { width: 100%; max-width: 560px; background: var(--shade); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
#actions .panel .title { font-size: 13px; color: var(--muted); text-align: center; }
#actions .btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#actions .btns button.sel { outline: 3px solid var(--accent); }
.callsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 18; background: var(--sheet); border-top: 3px solid var(--accent);
  padding: 10px 10px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 -8px 24px rgba(0,0,0,.55); }
.callsheet .title { font-size: 14px; color: var(--ink); text-align: center; }
.callsheet .title small { color: var(--muted); }
.callgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); gap: 5px; justify-content: center; }
.callgrid .card { width: 100%; cursor: pointer; }
.callgrid .cc { position: relative; display: flex; flex-direction: column; align-items: center; }
.callgrid .cc.mine .card { box-shadow: 0 0 0 3px #f59e0b; filter: brightness(.8); }
.callgrid .cc .tag { margin-top: 3px; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #1a1a1a; background: #f59e0b; border-radius: 4px; padding: 1px 4px; }
.callgrid .card.sel { box-shadow: 0 0 0 3px var(--accent); transform: translateY(-3px); }

#hand { display: flex; justify-content: center; padding: 6px 6px calc(10px + env(safe-area-inset-bottom)); gap: 4px; min-height: calc(var(--cw) * 1.5 + 16px); }
#hand .card { width: var(--cw); cursor: pointer; transition: transform .15s; }
#hand .card.illegal { filter: grayscale(.6) brightness(.7); cursor: not-allowed; }
#hand .card.sel { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--accent), 0 6px 12px rgba(0,0,0,.4); }

/* Kártya – a lapképek: Wikimedia Commons, SZERVÁC Attila, CC BY-SA 4.0 */
.card {
  position: relative; aspect-ratio: 300 / 462; background: var(--card); border-radius: 7%/4.5%;
  box-shadow: 0 2px 5px rgba(0,0,0,.4); color: #222; user-select: none; overflow: hidden; flex: none;
}
.card img { width: 100%; height: 100%; display: block; pointer-events: none; }
.card.back { background: url(back.jpg) center / 100% 100% no-repeat; }


/* Napló */
#logShade { position: fixed; inset: 0; z-index: 19; background: rgba(0,0,0,.35); }
.loghead { position: sticky; top: -8px; display: flex; justify-content: space-between; align-items: center; padding: 4px 0 8px; background: var(--logbg); }
#log { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 92vw); background: var(--logbg); border-left: 1px solid var(--line); z-index: 20; overflow-y: auto; padding: 8px 10px; font-size: 13px; }
#logList div { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
#logList div.bot { color: #9fd3ff; padding-left: 12px; }

/* Tanítás */
#teach.top { top: 0; bottom: auto; max-height: 58vh; border-top: 0; border-bottom: 3px solid #6aa7ff; }
#teach > * { flex-shrink: 0; }
#teachComment { min-height: 60px; }
#teach .btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.risk { color: #dbe6fa; font-size: 14px; }
.risk input { width: 100%; padding: 0; accent-color: var(--accent); }
.risklabels { display: flex; justify-content: space-between; font-size: 11px; color: #b8c8e6; }
#teach { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; max-height: 75vh; overflow-y: auto; background: #1b2d4a; border-top: 3px solid #6aa7ff;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 -6px 20px rgba(0,0,0,.5); }
.teachhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#teachInfo { font-size: 14px; }
#teachInfo small { color: #b8c8e6; }
#teachHand { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
#teachHand .card { width: min(14vw, 70px); cursor: pointer; transition: transform .15s; }
#teachHand .card.illegal { filter: grayscale(.6) brightness(.7); }
#teachHand .card.sel { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--accent); }
#teachComment { font: inherit; padding: 8px; border-radius: 10px; border: 1px solid #4a6fa8; background: #0f1d33; color: var(--ink); resize: vertical; }
#teachActions .panel { background: rgba(0,0,0,.25); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
#teachActions .btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#teachActions .btns button.sel { outline: 3px solid var(--accent); }
#teachActions .title { font-size: 13px; color: #b8c8e6; text-align: center; }

/* Modális ablak */
#modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; }
#modal .box { background: var(--box); border-radius: 14px; padding: 16px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.pile { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 6px; }
.pile .card { width: calc(var(--cw) * .6); }
.pile .card .nm { display: none; }
table.score { width: 100%; border-collapse: collapse; }
table.score td, table.score th { padding: 4px 6px; border-bottom: 1px solid #2f6b45; text-align: left; }
.rp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rp-name { width: 90px; font-size: 13px; flex: none; }
.rp-row .pile { margin: 0; }
.card.called { box-shadow: 0 0 0 3px #2563eb; }
.rp-bids { font-size: 13px; color: var(--muted); }
.rp-trick { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 6px; }
.rp-no { width: 22px; font-weight: 700; }
.rp-card { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rp-card .card { width: calc(var(--cw) * .62); }
.rp-card small { font-size: 11px; color: var(--muted); }
.rp-card.win .card { box-shadow: 0 0 0 3px var(--accent); }
#modal h4 { margin: 6px 0 4px; }
#modal .btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.plus { color: #7ee08a; } .minus { color: #ff8f86; }
.result-big { font-size: 22px; font-weight: 800; text-align: center; }

#toast { position: fixed; left: 50%; bottom: 30%; transform: translateX(-50%); background: #222; color: white; padding: 10px 16px; border-radius: 10px; z-index: 40; max-width: 90vw; text-align: center; }

@media (min-width: 900px) {
  :root { --cw: 92px; }
  #log:not(.hidden) ~ * { }
}
#teach .callsheet { position: static; box-shadow: none; border: 0; padding: 0; background: none; }
#contract { order: 10; flex-basis: 100%; }
#contract:empty { display: none; }
#modal .newtable { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.15); display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 14px; opacity: .9; }
#modal .newtable button { font-size: 14px; padding: 6px 10px; }
#langs { display: flex; gap: 2px; }
#langs button { font-size: 22px; line-height: 1; padding: 4px 6px; background: none; box-shadow: none; opacity: .5; }
#langs button.sel { opacity: 1; outline: 2px solid var(--accent); }
.tables-head { display: flex; justify-content: space-between; align-items: baseline; }
.online { font-size: 13px; color: var(--muted); }
.online::before { content: '●'; color: #22c55e; margin-right: 4px; }
.tablelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.tablelist li { display: flex; align-items: center; gap: 10px; background: var(--shade); border-radius: 12px; padding: 8px 10px; }
.tablelist .tinfo { flex: 1; min-width: 0; }
.tablelist .tname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tablelist .tmeta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tablelist button { padding: 6px 12px; font-size: 14px; }
.check.small { font-size: 13px; white-space: nowrap; }
.row input { flex: 1; min-width: 0; }
.result-mid { font-size: 18px; font-weight: 700; margin: 6px 0; }
.homebar { display: flex; justify-content: space-between; align-items: center; margin: -10px -4px 0; }
.iconbtn { background: none; box-shadow: none; padding: 6px; color: var(--ink); opacity: .85; }
.ic { width: 22px; height: 22px; display: block; }
.ic.tiny { width: 12px; height: 12px; display: inline-block; vertical-align: -1px; }
.namerow button { flex: 0 0 auto; font-size: 20px; padding: 6px 14px; }
.ticon { flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.ticon .ic { width: 18px; height: 18px; }
.tablelist li.open .ticon { background: rgba(34,197,94,.16); color: #4ade80; }
.tablelist li.locked .ticon { background: rgba(242,193,78,.18); color: var(--accent); }
:root[data-theme="light"] .tablelist li.open .ticon { color: #15803d; }
:root[data-theme="light"] .tablelist li.locked .ticon { color: #a16207; }
/* Kézben tartott lapok legyezője (mindkét témában). A 3D dőlést a sor egésze kapja, alulról,
   így a lapok teteje hátrafelé dől, és nem nyúlik rá a fölötte lévő gombokra. */
#hand { gap: 0; padding-top: 16px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); min-height: calc(var(--cw) * 1.6 + 40px); overflow: visible;
  transform: perspective(700px) rotateX(14deg); transform-origin: 50% 100%; position: relative; z-index: 1; }
#hand .card {
  margin: 0 calc(var(--cw) * -0.2);
  transform-origin: 50% 220%;
  transform: translateY(var(--lift, 0)) rotate(var(--rot, 0));
  box-shadow: -4px 6px 12px rgba(40, 50, 40, .28), 0 0 0 1px rgba(0,0,0,.08);
  transition: transform .18s ease-out, box-shadow .18s;
}
#hand .card.sel {
  transform: translateY(calc(var(--lift, 0) - 18px)) rotate(var(--rot, 0)) scale(1.05);
  box-shadow: 0 0 0 3px var(--accent), -4px 14px 22px rgba(40, 50, 40, .35);
}
#hand .card.illegal { filter: grayscale(.5) brightness(.85); }
@media (hover: hover) { #hand .card:not(.illegal):hover { transform: translateY(calc(var(--lift, 0) - 8px)) rotate(var(--rot, 0)); } }
.tlang { font-size: 14px; margin-left: 4px; }
:root:not([data-theme="light"]) #hand .card { box-shadow: -4px 6px 12px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.2); }
.tdir { font-size: 15px; margin-left: 6px; color: var(--muted); font-weight: 700; }
.card.fr { aspect-ratio: 300 / 420; }
/* ellenfelek dobozai: a címkék kisebbek, egy sorban, hogy ne nőjön rá a doboz a középső lapokra */
.opp .badge.caller, .opp .badge.partner, .opp .badge.dealer { font-size: 11px; padding: 1px 6px; letter-spacing: .5px; }
.opp .badges { flex-wrap: nowrap; }
#actions { position: relative; z-index: 3; }
.badge.marriage { background: var(--accent); color: #2a1d00; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; }
.badge.marriage .mini-suit { width: 13px; height: 13px; }
.marriage-big { position: absolute; inset: -20% -40%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  background: var(--accent); color: #2a1d00; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.45); animation: pop .25s ease-out; z-index: 4; padding: 10px; }
.marriage-big b { font-size: 46px; line-height: 1; }
.marriage-big div { font-weight: 800; font-size: 18px; }
.marriage-big small { font-size: 13px; }
.marriage-big .big-suit { width: 44px; height: 44px; }
/* a szélső játékosok licitbuborékja a képernyőn belül maradjon */
#opp-right .bidstack { align-items: flex-end; }
#opp-left .bidstack { align-items: flex-start; }
.bidstack .bubble { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
.bidstack .bubble.cur { white-space: normal; text-align: left; line-height: 1.15; }
/* gépelés közben: csak az asztal és az üzenetsor */
body.typing #hand, body.typing #actions, body.typing #me { display: none; }
.botmark { font-size: 11px; opacity: .8; }
.hint.legal a, .hint.credit a { white-space: nowrap; }