/* ===== Masry Cards =====
   The Masry Road street-sign UI (blue enamel plates, Arabic over English), dressed for an evening at the table:
   dark lacquer panels with a thin gold rule, enamel and gold buttons, a little less shouting than Masry Brawl. */
:root {
  --tx: 1; /* the text size setting */
  --night: #1a1424; --sign: #1f4fa3; --sign-deep: #14336e; --enamel: #f6f1e4; --gold: #f2c230; --brass: #c8962a; --red: #d8343c;
  --ink: #1c1220; --muted: #b9c6e6; --panel: rgba(22, 14, 28, 0.86); --rule: rgba(200, 150, 42, 0.55);
  --ui: 'Russo One', 'Arial Black', sans-serif; --big: 'Bangers', 'Impact', sans-serif; --body: 'VT323', ui-monospace, monospace;
  --arabic: 'Lalezar', 'Geeza Pro', 'Noto Naskh Arabic', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--enamel); overflow: hidden; font-family: var(--ui); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#scene { position: absolute; display: block; image-rendering: auto; }
button { font: inherit; color: inherit; }
.ar { font-family: var(--arabic); direction: rtl; line-height: 1.1; font-weight: 400; margin: 0; }
[hidden] { display: none !important; }

/* ---------- screens over the table ---------- */
#dim { position: fixed; inset: 0; z-index: 10; background: radial-gradient(ellipse at 50% 40%, rgba(14, 8, 18, 0.45), rgba(14, 8, 18, 0.86)); opacity: 0; pointer-events: none; transition: opacity .35s; }
body.menus #dim { opacity: 1; }
.screen { position: fixed; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(10px, 2.4vh, 22px);
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow-y: auto; }
.screen.on { display: flex; animation: fadein .3s ease; }
/* centred when it fits, scrollable from the top when it doesn't */
.screen > :first-child { margin-top: auto; } .screen > :last-child { margin-bottom: auto; }
.screen.scroll { justify-content: flex-start; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the street-name plate */
.plate { background: linear-gradient(180deg, #3a72d0 0%, var(--sign) 48%, #1a4692 52%, #234f9e 100%); color: var(--enamel); border: 3px solid var(--enamel);
  box-shadow: 0 0 0 3px var(--sign-deep), 4px 6px 0 3px rgba(0, 0, 0, 0.45); padding: 10px 26px 12px; text-align: center; position: relative; flex: none; }
.plate::before, .plate::after { content: ''; position: absolute; top: 7px; width: 5px; height: 5px; background: var(--enamel); box-shadow: inset -1px -1px 0 #9aa8c8; }
.plate::before { left: 7px; } .plate::after { right: 7px; }
.plate h2 { font-family: var(--ui); font-weight: 400; font-size: clamp(14px, 2.6vw, 20px); margin: 2px 0 0; letter-spacing: 1.5px; }
.plate .ar { font-size: clamp(22px, 4vw, 32px); }
.plate.small { padding: 6px 22px 8px; }
.plate.small .ar { font-size: clamp(18px, 3.2vw, 26px); }
.logo { padding: 14px 34px 22px; }
.logo .ar { font-size: clamp(34px, 8vw, 58px); }
.logo h1 { font-family: var(--big); font-weight: 400; font-size: clamp(40px, 9vw, 72px); line-height: 0.95; margin: 2px 0 2px; letter-spacing: 3px;
  background: linear-gradient(180deg, #fffbe0 0%, #ffe070 45%, #f2a020 52%, #ffcf60 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px var(--ink); filter: drop-shadow(3px 4px 0 var(--sign-deep)); }
.logo .tab { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); background: var(--red); color: var(--enamel); font-size: 11px; padding: 5px 9px; border: 3px solid var(--enamel); white-space: nowrap; letter-spacing: 1px; }
.tag { font-family: var(--body); font-size: clamp(18px, 2.6vw, 24px); text-align: center; color: var(--muted); margin: 18px 0 0; max-width: 640px; text-wrap: balance; }
.tapstart { margin: 0; font-size: clamp(15px, 2.4vw, 20px); color: var(--gold); text-shadow: 2px 2px 0 var(--ink); animation: blink 1.4s steps(1) infinite; letter-spacing: 2px; }
@keyframes blink { 50% { opacity: 0.2; } }
.foot { font-family: var(--body); color: var(--muted); font-size: 18px; margin: 0; opacity: 0.8; }

/* buttons: enamel and gold, a thin ink outline, a small hard shadow */
.btn { font-family: var(--ui); font-size: 15px; padding: 10px 16px; cursor: pointer; border: 0; color: var(--ink); letter-spacing: 0.5px;
  background: linear-gradient(180deg, #ffe890 0%, var(--gold) 50%, #e0a418 51%, #f0b828 100%);
  box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px rgba(10, 6, 16, 0.85), inset 0 2px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn.alt { background: linear-gradient(180deg, #ffffff 0%, var(--enamel) 50%, #e2dac6 51%, #ece4d2 100%); }
.btn.blue { background: linear-gradient(180deg, #4a82e0 0%, var(--sign) 50%, #1a4692 51%, #2a5ab0 100%); color: var(--enamel); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.btn.dark { background: linear-gradient(180deg, #4a3a56 0%, #33263e 50%, #2a1f34 51%, #33263e 100%); color: var(--enamel); text-shadow: none; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.big { font-size: 19px; padding: 12px 26px; }
.btn:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px var(--ink), 1px 1px 0 2px rgba(10, 6, 16, 0.85); }
.btn .ar { font-size: 20px; }
.soon { justify-self: start; font-size: 9px; background: var(--red); color: var(--enamel); padding: 2px 5px; margin-left: 8px; vertical-align: middle; }
.menu { display: grid; gap: 12px; width: min(440px, 100%); }
.menu.narrow { width: min(380px, 100%); }
.menu .btn { display: grid; grid-template-columns: auto 1fr auto; align-items: center; text-align: start; font-size: 17px; padding: 10px 16px; gap: 6px; }
.menu .btn > .ar { grid-column: 3; }
.row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }
.mini { font-family: var(--ui); font-size: 10px; padding: 3px 7px; background: transparent; border: 1px solid var(--rule); color: var(--gold); cursor: pointer; margin-left: 8px; vertical-align: middle; }

/* panels: dark lacquer with a thin gold rule */
.panel { background: var(--panel); border: 1px solid var(--rule); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(0, 0, 0, 0.35); padding: 10px 12px 12px; }
.panel h3 { font-family: var(--ui); font-weight: 400; font-size: 12px; color: var(--gold); margin: 0 0 8px; letter-spacing: 1.5px; display: flex; align-items: center; gap: 8px; }
.panel h3 .ar { font-size: 15px; color: var(--muted); margin-left: auto; }
.panel.wide { width: min(720px, 100%); }

/* the game list */
.games { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; width: min(1120px, 100%); }
.game { background: var(--panel); border: 1px solid var(--rule); padding: 10px 10px 12px; cursor: pointer; text-align: center; display: grid; gap: 4px; align-content: start; position: relative; transition: transform .15s, border-color .15s; color: var(--enamel); }
.game:hover { transform: translateY(-3px); border-color: var(--gold); }
.game canvas { width: 100%; height: auto; image-rendering: pixelated; }
.game .ar { font-size: 26px; color: var(--gold); }
.game .gn { font-size: 15px; letter-spacing: 1.5px; }
.game .gp { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
.game .gb { font-family: var(--body); font-size: calc(17px * var(--tx)); line-height: 1; color: #d8d0e8; margin-top: 4px; }

/* setup */
.setup { display: grid; grid-template-columns: 1.05fr 1fr; gap: 12px; width: min(1040px, 100%); }
.setup .col { display: grid; gap: 10px; align-content: start; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { font-family: var(--ui); font-size: calc(12px * var(--tx)); padding: 7px 10px; cursor: pointer; background: rgba(246, 241, 228, 0.07); border: 1px solid rgba(246, 241, 228, 0.22); color: var(--enamel); letter-spacing: 0.5px; display: grid; gap: 2px; text-align: center; }
.seg button small { font-size: calc(8.5px * var(--tx)); color: var(--muted); letter-spacing: 0.5px; }
.seg button.on { background: linear-gradient(180deg, #ffe890, var(--gold) 55%, #e8b020); color: var(--ink); border-color: var(--ink); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
.seg button.on small { color: #4a3a20; }
.seg button:disabled { opacity: 0.35; cursor: default; }
.optrow { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; margin: 6px 0; }
.optrow > span { font-size: calc(10.5px * var(--tx)); color: var(--muted); letter-spacing: 0.8px; }
.venues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.venue { cursor: pointer; border: 1px solid rgba(246, 241, 228, 0.2); background: none; padding: 0; position: relative; color: var(--enamel); }
.venue canvas { width: 100%; display: block; image-rendering: pixelated; }
.venue span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; padding: 3px; background: rgba(14, 8, 18, 0.75); letter-spacing: 1px; }
.venue.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 5px; }
.ch { background: rgba(246, 241, 228, 0.06); border: 1px solid rgba(246, 241, 228, 0.16); padding: 2px; cursor: pointer; display: grid; justify-items: center; color: var(--enamel); }
.ch canvas { width: 100%; image-rendering: pixelated; }
.ch span { font-size: 7.5px; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; max-width: 100%; }
.ch.on { background: linear-gradient(180deg, #ffe890, var(--gold) 60%, #e8b020); color: var(--ink); border-color: var(--ink); }
.ch.taken { opacity: 0.35; }
.opps { display: flex; gap: 8px; flex-wrap: wrap; }
.opp { width: 74px; background: rgba(246, 241, 228, 0.06); border: 1px solid rgba(246, 241, 228, 0.18); padding: 4px 3px; cursor: pointer; display: grid; justify-items: center; gap: 2px; color: var(--enamel); position: relative; }
.opp canvas { width: 56px; image-rendering: pixelated; }
.opp span { font-size: 8.5px; }
.opp em { font-style: normal; font-size: 8px; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--gold); padding: 1px 5px; border: 1px solid var(--rule); white-space: nowrap; }
.opp.picking { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
/* picking who sits in a seat */
.seatpick { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 6, 14, 0.62); animation: fadein .2s ease; }
.seatpick .panel { width: min(600px, 100%); max-height: 100%; overflow: auto; }
.seatpick .panel h3 .mini { margin-left: auto; }
.seatpick .chars { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }
.seatpick .ch { position: relative; padding: 5px 2px 3px; gap: 2px; }
.seatpick .ch canvas { width: 52px; }
.seatpick .ch span { font-size: 8.5px; }
.seatpick .ch em { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 7px; background: var(--ink); color: var(--gold); padding: 1px 4px; border: 1px solid var(--rule); white-space: nowrap; }
.seatpick .ch:disabled { opacity: 0.4; cursor: default; }
.seatpick .ch:not(:disabled):hover { border-color: var(--gold); }
.hintline { font-family: var(--body); font-size: calc(16px * var(--tx)); color: var(--muted); margin: 6px 0 0; }

/* play with friends */
.online { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(760px, 100%); }
.online .panel { display: grid; gap: 10px; align-content: start; }
.online .panel h3 { margin-bottom: 0; }
.me-row { display: flex; gap: 12px; align-items: center; }
.ch.mine { width: 74px; flex: none; position: relative; padding: 5px 3px 4px; gap: 2px; }
.ch.mine canvas { width: 56px; }
.ch.mine span { font-size: 8.5px; }
.ch.mine em { font-style: normal; font-size: 7.5px; color: var(--gold); letter-spacing: 0.5px; }
.ch.mine:disabled { cursor: default; }
.ch.mine:disabled em { visibility: hidden; }
.field { display: grid; gap: 4px; flex: 1; min-width: 0; }
.field span { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
.field input, .join input { font-family: var(--ui); font-size: 16px; letter-spacing: 1px; text-transform: uppercase; background: rgba(246, 241, 228, 0.08); border: 1px solid rgba(246, 241, 228, 0.3); color: var(--enamel); padding: 8px 10px; outline: none; width: 100%; min-width: 0; user-select: text; -webkit-user-select: text; }
.field input:focus, .join input:focus { border-color: var(--gold); }
.join { display: flex; gap: 10px; align-items: center; }
.join input { width: 0; flex: 1; text-align: center; font-size: 20px; letter-spacing: 6px; }
.join .btn { flex: none; }
#onNote.bad { color: #ff8a80; }
.invite { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; font-family: var(--body); font-size: 17px; color: var(--muted); }
.invite span { user-select: text; -webkit-user-select: text; word-break: break-all; }
.invite .mini { margin-left: 4px; }
#rmCode { color: var(--gold); letter-spacing: 3px; }
.opp.seat { cursor: pointer; }
.opp.seat.empty { border-style: dashed; color: var(--muted); }
.opp.seat.empty .bot { width: 56px; height: 56px; display: grid; place-items: center; font-size: 22px; color: rgba(246, 241, 228, 0.35); }
.opp.seat.empty:not(.locked):hover { border-color: var(--gold); color: var(--gold); }
.opp.seat.me { border-color: var(--gold); }
.opp.seat i { font-style: normal; font-size: 7.5px; color: var(--muted); letter-spacing: 0.5px; }
.opp.seat .team { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.opp.seat.locked { cursor: default; }
.rmstatus { margin: 0; font-size: 12px; letter-spacing: 1px; color: var(--gold); text-align: center; min-height: 15px; }
.rmstatus.bad { color: #ff8a80; }
#pauseNote { text-align: center; max-width: 380px; }
@media (max-width: 760px) and (orientation: landscape) { .online { grid-template-columns: 1fr; } }

/* settings */
.settings { display: grid; gap: 14px; }
.slider, .setrow { display: grid; grid-template-columns: 200px 1fr 46px; align-items: center; gap: 12px; font-size: calc(13px * var(--tx)); letter-spacing: 1px; }
.setrow { grid-template-columns: 200px 1fr; }
.slider i, .setrow i { font-style: normal; font-size: 16px; color: var(--muted); margin-left: 8px; }
.slider b { font-weight: 400; color: var(--gold); text-align: right; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; background: linear-gradient(90deg, var(--gold) var(--p, 50%), rgba(246, 241, 228, 0.18) var(--p, 50%)); border: 1px solid var(--ink); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 22px; background: var(--enamel); border: 2px solid var(--ink); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 18px; height: 22px; background: var(--enamel); border: 2px solid var(--ink); border-radius: 0; cursor: pointer; }

/* rules */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tabs button { font-family: var(--ui); font-size: 12px; padding: 7px 12px; background: var(--panel); border: 1px solid var(--rule); color: var(--enamel); cursor: pointer; letter-spacing: 1px; }
.tabs button.on { background: var(--gold); color: var(--ink); }
.rulestext { font-family: var(--body); font-size: calc(20px * var(--tx)); line-height: 1.12; max-height: 58vh; overflow-y: auto; color: #e8e0f0; }
.rulestext b { font-family: var(--ui); font-weight: 400; font-size: 12px; color: var(--gold); letter-spacing: 1px; }
.rulestext p { margin: 6px 0 10px; }
.rulestext ul { margin: 4px 0 10px; padding-left: 22px; }
.rulestext li { margin: 3px 0; }
.rulestext h4 { font-family: var(--ui); font-weight: 400; font-size: 13px; color: var(--enamel); margin: 14px 0 4px; letter-spacing: 1px; }

/* ---------- the in-game HUD (laid out in the scene's 540-tall pixels) ---------- */
#hud { position: absolute; transform-origin: 0 0; pointer-events: none; display: none; font-family: var(--ui); }
#hud > * { pointer-events: auto; }
body.menus #hud { visibility: hidden; }
.hpanel { position: absolute; background: var(--panel); border: 1px solid var(--rule); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.4); }
#hScore { left: 10px; top: 10px; min-width: 196px; max-width: calc(290px * var(--tx)); padding: 8px 10px 9px; font-size: calc(12px * var(--tx)); pointer-events: none; }
#hScore .st { font-size: calc(12px * var(--tx)); color: var(--gold); letter-spacing: 1.2px; margin-bottom: 6px; }
#hScore .sr { display: grid; grid-template-columns: 4px 1fr auto; column-gap: 7px; align-items: center; padding: 2px 0; }
#hScore .sr i { width: 4px; height: 100%; min-height: 14px; grid-row: span 2; }
#hScore .sr .sn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(12.5px * var(--tx)); }
#hScore .sr b { font-weight: 400; font-size: calc(16px * var(--tx)); color: var(--enamel); text-align: right; }
#hScore .sr em { font-style: normal; font-size: calc(10px * var(--tx)); color: var(--muted); grid-column: 2 / span 2; letter-spacing: 0.4px; }
#hScore .sr.hi .sn { color: var(--gold); }
#hScore.compact .sr em { display: none; }
#hScore.compact .sr { padding: 1px 0; }
#hScore.compact .sr i { min-height: 11px; grid-row: auto; }
#hScore.compact .sf { display: none; }
#hScore .sf { margin-top: 6px; font-size: calc(10px * var(--tx)); color: var(--muted); letter-spacing: 0.5px; border-top: 1px solid rgba(200, 150, 42, 0.25); padding-top: 5px; }
#hScore.compact .sr .sn { font-size: calc(11.5px * var(--tx)); }
#hScore.compact .sr b { font-size: calc(14px * var(--tx)); }
.hbtn { font-family: var(--ui); font-size: 13px; padding: 8px 13px; border: 0; cursor: pointer; color: var(--ink); letter-spacing: 0.5px; display: inline-grid; gap: 1px; justify-items: center;
  background: linear-gradient(180deg, #ffe890 0%, var(--gold) 50%, #e0a418 51%, #f0b828 100%); box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px rgba(10, 6, 16, 0.85), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.hbtn .ar { font-size: 15px; line-height: 1; }
.hbtn.alt { background: linear-gradient(180deg, #ffffff 0%, var(--enamel) 50%, #e2dac6 51%, #ece4d2 100%); }
.hbtn.blue { background: linear-gradient(180deg, #4a82e0 0%, var(--sign) 50%, #1a4692 51%, #2a5ab0 100%); color: var(--enamel); }
.hbtn.dark { background: linear-gradient(180deg, #4a3a56 0%, #33263e 50%, #2a1f34 51%, #33263e 100%); color: var(--enamel); }
.hbtn.red { background: linear-gradient(180deg, #ff8a80 0%, #e8343c 50%, #c82028 51%, #d8343c 100%); color: var(--enamel); }
.hbtn.small { font-size: 11px; padding: 6px 9px; }
.hbtn:disabled { opacity: 0.45; cursor: default; }
.hbtn:not(:disabled):active { transform: translate(2px, 2px); }
.hbtn.round { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; padding: 0; font-size: 12px; align-items: center; background: linear-gradient(180deg, #4a3a56 0%, #33263e 50%, #2a1f34 51%, #33263e 100%); color: var(--enamel); }
/* the hint rides just above your hand (the scene sets where that is) */
#hHint { position: absolute; left: var(--hint-x, 50%); bottom: var(--hint-bottom, 128px); transform: translateX(-50%); font-size: calc(11px * var(--tx)); letter-spacing: 1px; color: var(--gold); background: rgba(14, 8, 18, 0.8); border: 1px solid var(--rule); padding: 3px 10px; white-space: nowrap; max-width: 560px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: opacity .25s; opacity: 0; }
/* the main buttons stand in a column in the bottom right corner; the hand is laid out to their left */
#hActions { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 7px; align-items: stretch; }
#hTools { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
#hTools .hbtn { font-size: calc(10px * var(--tx)); padding: 5px 8px; min-width: 76px; }
#hActions .hbtn { min-width: 96px; font-size: calc(12px * var(--tx)); padding: 6px 10px; }
#hActions .hbtn.small { min-width: 0; font-size: calc(10px * var(--tx)); padding: 5px 8px; }
/* the bidding panel sits just above your hand, so you can see your cards and everyone's plaques on the table */
#hPanel { left: 50%; bottom: calc(var(--hint-bottom, 128px) + 2px); transform: translateX(-50%); padding: 8px 10px 10px; display: none; text-align: center; max-width: min(430px, 42%); }
#hPanel h4 { font-weight: 400; font-size: calc(12px * var(--tx)); color: var(--gold); margin: 0 0 4px; letter-spacing: 1.2px; }
#hPanel .ar { font-size: 15px; color: var(--muted); }
#hPanel .grid { display: grid; gap: 5px; }
#hPanel .pbtn { font-family: var(--ui); font-size: 13px; padding: 7px 4px; cursor: pointer; background: rgba(246, 241, 228, 0.08); border: 1px solid rgba(246, 241, 228, 0.25); color: var(--enamel); min-width: 38px; }
#hPanel .pbtn:hover:not(:disabled) { border-color: var(--gold); }
#hPanel .pbtn.on { background: var(--gold); color: var(--ink); border-color: var(--ink); }
#hPanel .pbtn:disabled { opacity: 0.25; cursor: default; }
#hPanel .pbtn.red { color: #ff8078; } #hPanel .pbtn.red.on { color: var(--ink); }
#hPanel .prow { display: flex; gap: 4px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
#hPanel .prow.acts { gap: 8px; margin-top: 8px; }
#hPanel .picker .pbtn, #hPanel .prow.nums .pbtn { min-width: 31px; padding: 5px 0; font-size: 12px; }
#hPanel .pbtn.suit { min-width: 40px; font-size: 15px; padding: 3px 0; }
#hPanel .pbtn.suit.big { min-width: 54px; font-size: 22px; }
#hPanel .bidbtn { min-width: 112px; }
#hPanel .info { font-family: var(--body); font-size: calc(17px * var(--tx)); color: #d8d0e8; margin: 6px 0 0; line-height: 1; }
#hPanel.bare { background: none; border: 0; box-shadow: none; }
#hToast { position: absolute; left: 50%; top: 92px; transform: translate(-50%, -8px); font-size: calc(12px * var(--tx)); letter-spacing: 1px; background: var(--red); color: var(--enamel); border: 2px solid var(--enamel); padding: 6px 12px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; white-space: nowrap; }
#hToast.on { opacity: 1; transform: translate(-50%, 0); }
#hSummary { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(12, 6, 16, 0.6); }
.sumbox { display: grid; gap: 12px; justify-items: center; max-width: 92%; }
.sumbody { background: var(--panel); border: 1px solid var(--rule); padding: 10px 14px; max-height: 330px; overflow-y: auto; }
.sumbtns { display: flex; gap: 12px; }
table.sum { border-collapse: collapse; font-size: calc(11px * var(--tx)); }
table.sum th { font-weight: 400; font-size: calc(9px * var(--tx)); color: var(--muted); padding: 2px 7px; letter-spacing: 0.6px; }
table.sum td { padding: 4px 7px; text-align: center; border-top: 1px solid rgba(246, 241, 228, 0.1); }
table.sum td.nm { text-align: left; white-space: nowrap; }
table.sum b { font-weight: 400; color: var(--gold); }
table.sum tr.win td { background: rgba(242, 194, 48, 0.12); }
.sumbody .note { font-family: var(--body); font-size: calc(16px * var(--tx)); color: var(--muted); margin: 8px 0 0; text-align: center; }
.sumbody .big { font-family: var(--big); font-size: 34px; color: var(--gold); text-align: center; margin: 0 0 6px; letter-spacing: 2px; -webkit-text-stroke: 1px var(--ink); }

/* ---------- turn your phone ---------- */
#rotate { position: fixed; inset: 0; z-index: 50; background: var(--night); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; font-size: 13px; letter-spacing: 1px; padding: 20px; }
#rotate .ar { font-size: 34px; color: var(--gold); }
#rotate .phone { width: 46px; height: 80px; border: 4px solid var(--enamel); border-radius: 8px; animation: turn 2s ease-in-out infinite; }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 820px) { #rotate { display: flex; } }

/* ---------- small screens (phones on their side) ---------- */
@media (max-height: 520px) {
  .games { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .game .gb { display: none; }
  .game .ar { font-size: 20px; }
  .setup { grid-template-columns: 1fr 1fr; gap: 8px; }
  .panel { padding: 7px 9px 9px; }
  .optrow { grid-template-columns: 110px 1fr; }
  .chars { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
  .menu .btn { font-size: 15px; padding: 8px 14px; }
  .screen { gap: 10px; }
  .rulestext { max-height: 52vh; font-size: 18px; }
}
@media (max-width: 760px) and (orientation: landscape) { .games { grid-template-columns: repeat(6, minmax(0, 1fr)); } .setup { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tapstart { animation: none; } .screen.on { animation: none; } }

/* the bid panel: who holds the highest bid, and the bidding so far */
#hPanel .bidline { margin: -2px 0 8px; font-size: calc(11px * var(--tx)); color: #e8e0f0; letter-spacing: 0.6px; }
#hPanel .bidline b { font-weight: 400; color: var(--gold); }
#hPanel .bidlog { margin: 0 0 2px; font-size: calc(9px * var(--tx)); color: var(--muted); letter-spacing: 0.4px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* explanations for the setup choices (hover with a mouse, tap on a phone) */
#tip { position: fixed; z-index: 70; max-width: 290px; background: rgba(18, 10, 24, 0.97); border: 1px solid var(--gold); color: #e8e0f0;
  font-family: var(--body); font-size: calc(17px * var(--tx)); line-height: 1.05; padding: 7px 10px 8px; pointer-events: none; opacity: 0; transition: opacity .12s;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); left: -999px; top: -999px; }
#tip.on { opacity: 1; }
#tip b { display: block; font-family: var(--ui); font-weight: 400; font-size: 10.5px; color: var(--gold); letter-spacing: 1px; margin-bottom: 3px; }
.optrow > span.tipped { text-decoration: underline dotted rgba(185, 198, 230, 0.6); text-underline-offset: 3px; cursor: help; }

/* ---------- accessibility settings ---------- */
body[data-text="large"] { --tx: 1.15; }
body[data-text="larger"] { --tx: 1.3; }
.settings h4 { font-family: var(--ui); font-weight: 400; font-size: calc(12px * var(--tx)); color: var(--gold); letter-spacing: 1.5px; margin: 6px 0 -4px; border-top: 1px solid rgba(200, 150, 42, 0.3); padding-top: 12px; }
/* high contrast: solid panels, brighter text, clearer edges */
body[data-contrast="high"] { --panel: rgba(8, 4, 12, 0.97); --muted: #e6ecfa; --rule: rgba(242, 194, 48, 0.95); }
body[data-contrast="high"] .hpanel, body[data-contrast="high"] .panel { border-width: 2px; }
body[data-contrast="high"] #hHint { background: #0c0610; border-color: var(--gold); color: #ffe890; }
body[data-contrast="high"] .seg button { border-color: rgba(246, 241, 228, 0.6); background: rgba(246, 241, 228, 0.12); }
body[data-contrast="high"] #hScore .sr em, body[data-contrast="high"] #hScore .sf { color: #e6ecfa; }
/* reduced motion: no fades, no blinking */
body[data-motion="reduced"] .screen.on, body[data-motion="reduced"] .seatpick { animation: none; }
body[data-motion="reduced"] .tapstart { animation: none; }
body[data-motion="reduced"] #hToast, body[data-motion="reduced"] #hHint { transition: none; }

/* Presidents: the trades, between hands */
#hPanel.trades { background: var(--panel); border: 1px solid var(--rule); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.4); max-width: min(520px, 60%); text-align: left; }
.tradebox p { margin: 4px 0; font-size: calc(11px * var(--tx)); letter-spacing: 0.4px; color: #e8e0f0; line-height: 1.35; }
.tradebox p.mine { color: #fff; background: rgba(242, 194, 48, 0.14); padding: 3px 6px; border-left: 3px solid var(--gold); }
.tradebox p.wait { color: var(--muted); font-size: calc(10px * var(--tx)); }
.tradebox i { font-style: normal; color: var(--gold); font-size: calc(9px * var(--tx)); }
.tradebox b { font-weight: 400; background: var(--enamel); color: var(--ink); padding: 0 4px; margin: 0 1px; }
.tradebox b.r { color: #c8202a; }
.tradebox em { font-style: normal; color: var(--muted); }

/* ---------- Egyptian Arabic ----------
   The small Arabic subtitles go (everything is in Arabic now), the lettering becomes Lalezar for headings and buttons
   and the system's Arabic font for reading, text runs right to left, and no letter spacing (it breaks the joins). */
body[data-lang="ar"] { --ui: 'Lalezar', 'Geeza Pro', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --big: 'Lalezar', 'Geeza Pro', sans-serif;
  --body: 'Geeza Pro', 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; }
body[data-lang="ar"] .ar:not(.keep) { display: none !important; }
body[data-lang="ar"] *, body[data-lang="ar"] *::before, body[data-lang="ar"] *::after { letter-spacing: 0 !important; }
body[data-lang="ar"] .screen, body[data-lang="ar"] #hud, body[data-lang="ar"] #tip, body[data-lang="ar"] .seatpick { direction: rtl; }
body[data-lang="ar"] #hud { font-family: var(--ui); line-height: 1.3; } /* (Lalezar's own line height is very tall) */
body[data-lang="ar"] .rulestext, body[data-lang="ar"] .hintline, body[data-lang="ar"] .tag, body[data-lang="ar"] .game .gb, body[data-lang="ar"] .sumbody .note, body[data-lang="ar"] #tip { line-height: 1.5; }
body[data-lang="ar"] .rulestext { font-size: calc(17px * var(--tx)); }
body[data-lang="ar"] .rulestext b, body[data-lang="ar"] .rulestext h4 { font-family: var(--ui); font-size: calc(15px * var(--tx)); }
body[data-lang="ar"] .rulestext ul { padding-left: 0; padding-right: 22px; }
body[data-lang="ar"] .logo h1 { letter-spacing: 3px !important; }
body[data-lang="ar"] .menu .btn { text-align: right; }
body[data-lang="ar"] #hHint, body[data-lang="ar"] #hToast { font-family: var(--ui); }
body[data-lang="ar"] .field input, body[data-lang="ar"] .join input { font-family: var(--ui); }
body[data-lang="ar"] .join input { letter-spacing: 6px !important; direction: ltr; }
body[data-lang="ar"] #rmCode, body[data-lang="ar"] .invite span { direction: ltr; unicode-bidi: embed; }

/* ---------- tutorials ---------- */
.gamecard { display: grid; grid-template-rows: 1fr auto; gap: 5px; min-width: 0; }
.tutbtn { font-family: var(--ui); font-size: calc(10px * var(--tx)); letter-spacing: 1.2px; padding: 5px 4px; cursor: pointer; color: var(--gold); background: rgba(22, 14, 28, 0.7);
  border: 1px solid var(--rule); transition: border-color .15s, background .15s; }
.tutbtn:hover { border-color: var(--gold); background: rgba(242, 194, 48, 0.12); }
.tutbtn:active { transform: translate(1px, 1px); }
#hud.tutorial #hScore, #hud.tutorial #hMenu { display: none; }
#hTut { left: 10px; top: 10px; width: calc(330px * var(--tx)); max-width: 46%; padding: 9px 11px 10px; }
#hTut .tt { display: flex; justify-content: space-between; gap: 10px; font-size: calc(9.5px * var(--tx)); color: var(--muted); letter-spacing: 1px; padding-right: 26px; }
#hTut .tt b { font-weight: 400; color: var(--gold); }
#hTut h4 { font-weight: 400; font-size: calc(14px * var(--tx)); color: var(--gold); letter-spacing: 1.2px; margin: 5px 0 3px; }
#hTut p { font-family: var(--body); font-size: calc(18px * var(--tx)); line-height: 1.02; color: #ece6f4; margin: 0; }
#hTut .dots { display: flex; gap: 4px; margin: 8px 0 7px; }
#hTut .dots i { flex: 1; height: 3px; background: rgba(246, 241, 228, 0.18); }
#hTut .dots i.done { background: rgba(242, 194, 48, 0.5); }
#hTut .dots i.on { background: var(--gold); }
#hTut .tb { display: flex; gap: 6px; flex-wrap: wrap; }
#hTut .tx { position: absolute; right: 7px; top: 6px; width: 24px; height: 22px; padding: 0; align-items: center; }
#hTut.mid { left: 50%; transform: translateX(-50%); }
body[data-lang="ar"] #hTut { left: auto; right: 10px; }
body[data-lang="ar"] #hTut.mid { left: 50%; right: auto; }
body[data-lang="ar"] #hTut .tt { padding-right: 0; padding-left: 26px; }
body[data-lang="ar"] #hTut .tx { right: auto; left: 7px; }
body[data-lang="ar"] #hTut p { line-height: 1.45; font-size: calc(15px * var(--tx)); }
@media (max-height: 520px) {
  #hTut { width: calc(300px * var(--tx)); }
  #hTut p { font-size: calc(16px * var(--tx)); }
}
/* Lalezar sits smaller than Russo One at the same size, and the reading font larger than VT323: Arabic sizes */
body[data-lang="ar"] .game .gn { font-size: 22px; color: var(--gold); line-height: 1.2; }
body[data-lang="ar"] .game .gp { font-size: 12px; }
body[data-lang="ar"] .game .gb { font-size: calc(14px * var(--tx)); }
body[data-lang="ar"] .tutbtn { font-size: calc(14px * var(--tx)); padding: 2px 4px 4px; }
body[data-lang="ar"] .plate h2 { font-size: clamp(19px, 3.4vw, 27px); }
body[data-lang="ar"] .logo .tab { font-size: 14px; }
body[data-lang="ar"] .tag { font-size: clamp(15px, 2.2vw, 19px); line-height: 1.6; }
body[data-lang="ar"] .tapstart { font-size: clamp(19px, 3vw, 26px); }
body[data-lang="ar"] .foot { font-size: 15px; }
body[data-lang="ar"] .btn { font-size: 18px; padding-top: 7px; padding-bottom: 9px; }
body[data-lang="ar"] .btn.big { font-size: 23px; }
body[data-lang="ar"] .menu .btn { font-size: 21px; }
body[data-lang="ar"] .mini { font-size: 13px; }
body[data-lang="ar"] .panel h3 { font-size: 16px; }
body[data-lang="ar"] .seg button { font-size: calc(15px * var(--tx)); padding: 4px 10px 6px; }
body[data-lang="ar"] .seg button small { font-size: calc(11.5px * var(--tx)); }
body[data-lang="ar"] .optrow > span { font-size: calc(14px * var(--tx)); }
body[data-lang="ar"] .venue span { font-size: 14px; padding: 1px 3px 3px; }
body[data-lang="ar"] .ch span, body[data-lang="ar"] .opp.seat i { font-size: 10.5px; }
body[data-lang="ar"] .opp span, body[data-lang="ar"] .seatpick .ch span, body[data-lang="ar"] .ch.mine span { font-size: 12px; }
body[data-lang="ar"] .opp em, body[data-lang="ar"] .ch.mine em, body[data-lang="ar"] .seatpick .ch em { font-size: 10.5px; }
body[data-lang="ar"] .hintline, body[data-lang="ar"] .invite { font-size: calc(13.5px * var(--tx)); }
body[data-lang="ar"] .field span, body[data-lang="ar"] .rmstatus { font-size: 15px; }
body[data-lang="ar"] .slider, body[data-lang="ar"] .setrow { font-size: calc(17px * var(--tx)); }
body[data-lang="ar"] .settings h4 { font-size: calc(16px * var(--tx)); }
body[data-lang="ar"] .tabs button { font-size: 16px; padding: 4px 12px 6px; }
body[data-lang="ar"] #tip { font-size: calc(14px * var(--tx)); }
body[data-lang="ar"] #tip b { font-size: 14px; }
body[data-lang="ar"] #hScore { font-size: calc(14px * var(--tx)); line-height: 1.2; padding: 5px 10px 6px; }
body[data-lang="ar"] #hScore .st { font-size: calc(14.5px * var(--tx)); margin-bottom: 3px; }
body[data-lang="ar"] #hScore .sr { padding: 0; }
body[data-lang="ar"] #hScore .sr .sn { font-size: calc(15px * var(--tx)); }
body[data-lang="ar"] #hScore .sr b { font-size: calc(17px * var(--tx)); text-align: left; }
body[data-lang="ar"] #hScore .sr em, body[data-lang="ar"] #hScore .sf { font-size: calc(11.5px * var(--tx)); }
body[data-lang="ar"] #hScore .sf { margin-top: 3px; padding-top: 3px; }
body[data-lang="ar"] #hScore.compact .sr .sn { font-size: calc(14px * var(--tx)); }
body[data-lang="ar"] .hbtn { font-size: 17px; padding-top: 5px; padding-bottom: 7px; }
body[data-lang="ar"] .hbtn.small { font-size: 15px; padding-top: 3px; padding-bottom: 5px; }
body[data-lang="ar"] #hHint { font-size: calc(15px * var(--tx)); padding: 1px 10px 3px; }
body[data-lang="ar"] #hToast { font-size: calc(16px * var(--tx)); }
body[data-lang="ar"] #hPanel h4 { font-size: calc(15px * var(--tx)); margin-bottom: 2px; }
body[data-lang="ar"] #hPanel .info { font-size: calc(14px * var(--tx)); line-height: 1.55; }
body[data-lang="ar"] #hPanel .bidline { font-size: calc(13px * var(--tx)); margin-bottom: 5px; }
body[data-lang="ar"] #hPanel .bidlog { font-size: calc(11px * var(--tx)); }
body[data-lang="ar"] #hPanel .picker .pbtn, body[data-lang="ar"] #hPanel .prow.nums .pbtn { padding: 3px 0; }
body[data-lang="ar"] #hPanel .pbtn.suit { padding: 1px 0; }
body[data-lang="ar"] .tradebox p { font-size: calc(14px * var(--tx)); }
body[data-lang="ar"] .tradebox p.wait { font-size: calc(13px * var(--tx)); }
body[data-lang="ar"] .tradebox i { font-size: calc(12px * var(--tx)); }
body[data-lang="ar"] .tradebox p.mine { border-left: 0; border-right: 3px solid var(--gold); }
body[data-lang="ar"] #hPanel.trades { text-align: right; }
body[data-lang="ar"] table.sum { font-size: calc(14px * var(--tx)); }
body[data-lang="ar"] table.sum th { font-size: calc(12px * var(--tx)); }
body[data-lang="ar"] table.sum td.nm { text-align: right; }
body[data-lang="ar"] .sumbody .note { font-size: calc(13.5px * var(--tx)); line-height: 1.6; }
body[data-lang="ar"] #hTut .tt { font-size: calc(12.5px * var(--tx)); }
body[data-lang="ar"] #hTut h4 { font-size: calc(18px * var(--tx)); margin: 3px 0 2px; }
/* (sliders run right to left in Arabic: fill them from the right) */
body[data-lang="ar"] input[type=range] { background: linear-gradient(270deg, var(--gold) var(--p, 50%), rgba(246, 241, 228, 0.18) var(--p, 50%)); }