:root {
  --bg: #1d070a;
  --crimson: #8c1022;
  --crimson-dark: #4a0710;
  --felt-1: #7a1424;
  --felt-2: #3d0811;
  --gold: #e8b64c;
  --gold-soft: #f6dfa0;
  --ink: #fff7ea;
  --muted: #d9c3b0;
  --card: #fffdf7;
  --red: #c8102e;
  --black: #1b1b1f;
  --green: #2f9e57;
  --blue: #1f4e8c;
  --ch: min(23vh, 116px);   /* card height */
  --cw: calc(var(--ch) * 0.7);
  --font: "Mukta", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; }
.hidden { display: none !important; }
#app { height: 100dvh; width: 100vw; position: relative; }
.screen { position: absolute; inset: 0; }

/* Start */
#start { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(ellipse at 50% 40%, #5a0c18 0%, var(--bg) 70%); padding: 24px 16px; }
.logo { margin: 0; font-size: clamp(44px, 12vh, 84px); line-height: 1; font-weight: 800; color: var(--gold); text-shadow: 0 3px 0 var(--crimson-dark), 0 0 24px rgba(232,182,76,.35); text-align: center; }
.logo span { display: block; font-size: .28em; letter-spacing: .5em; color: var(--gold-soft); margin-top: 6px; }
.tag { margin: 0; color: var(--muted); text-align: center; }
.start-row { display: flex; align-items: center; gap: 10px; }
.lang-toggle { display: inline-flex; background: rgba(0,0,0,.35); border: 1px solid rgba(232,182,76,.5); border-radius: 999px; padding: 3px; }
.lang-toggle button { background: transparent; padding: 6px 16px; border-radius: 999px; font-weight: 600; color: var(--muted); }
.lang-toggle button.on { background: var(--gold); color: var(--crimson-dark); }
.big-btn { background: linear-gradient(#f2c55c, #c98d21); color: #3a0a0f; font-weight: 800; font-size: 20px; padding: 10px 34px; border-radius: 14px; box-shadow: 0 4px 0 #7a4f0c, 0 8px 18px rgba(0,0,0,.4); }
.big-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #7a4f0c; }
.big-btn.small { font-size: 16px; padding: 8px 20px; }

/* Top bar */
.topbar { position: absolute; top: 0; left: 0; right: 0; height: 38px; display: flex; align-items: center; gap: 8px; padding: 4px max(10px, env(safe-area-inset-left)); z-index: 5; }
.spacer { flex: 1; }
.pill { background: rgba(0,0,0,.45); border: 1px solid rgba(232,182,76,.45); border-radius: 999px; padding: 2px 12px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pill.btn:active { background: rgba(232,182,76,.3); }
.maal-pill:empty { display: none; }
.maal-pill { color: var(--gold-soft); }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.45); border: 1px solid rgba(232,182,76,.45); font-size: 18px; }
.log { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: min(460px, 92vw); max-height: 55vh; overflow: auto; background: rgba(20,4,7,.95); border: 1px solid var(--gold); border-radius: 12px; padding: 8px 12px; z-index: 20; font-size: 14px; }
.log div { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.08); }

/* Table */
.table { position: absolute; left: 0; right: 0; top: 30px; bottom: calc(var(--ch) + 12px); }
.felt { position: absolute; inset: 6px max(60px, 9vw) 2px; border-radius: 50% / 46%;
  background: radial-gradient(ellipse at center, var(--felt-1) 0%, var(--felt-2) 80%);
  border: 6px solid #6b3d12; box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 40px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.6); }
.felt::after { content: "म्यारिज"; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 11vh; font-weight: 800; color: rgba(232,182,76,.07); pointer-events: none; }
.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); display: flex; gap: 14px; align-items: center; }
.status { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--gold-soft); text-shadow: 0 1px 2px #000; }
.pile { width: calc(var(--cw) * .85); height: calc(var(--ch) * .85); position: relative; border-radius: 8px; }
.pile.glow, .pile .card.glow { box-shadow: 0 0 0 3px var(--gold), 0 0 18px var(--gold); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 4px var(--gold); } }
#stockCount { position: absolute; bottom: -2px; right: -6px; background: #000c; border-radius: 999px; font-size: 11px; padding: 0 6px; }
#discard .card { width: 100%; height: 100%; }

/* Seats */
.seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 128px; transform: translate(-50%, -50%); }
.seat .avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: radial-gradient(#fff3 0, #0006 100%), var(--crimson); border: 3px solid var(--gold); position: relative; }
.seat.turn .avatar { box-shadow: 0 0 0 3px #fff, 0 0 18px var(--gold); }
.seat .name { font-size: 13px; font-weight: 700; background: linear-gradient(#a5651c, #6b3d12); padding: 0 10px; border-radius: 6px; border: 1px solid var(--gold); white-space: nowrap; }
.seat .meta { font-size: 11px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.seat .badge { font-size: 10px; padding: 0 6px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 700; }
.seat .last { position: absolute; top: 2px; right: 6px; }
.seat .melds { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; max-width: 150px; }
.mchip { font-size: 10.5px; background: #fffdf7; color: var(--black); border-radius: 4px; padding: 0 4px; font-weight: 700; line-height: 16px; }
.mchip .r { color: var(--red); }

/* Cards */
.card { width: var(--cw); height: var(--ch); background: var(--card); color: var(--black); border-radius: 8px; position: relative; box-shadow: 0 1px 0 #0003, 0 2px 6px rgba(0,0,0,.35); border: 1px solid #0002; font-weight: 700; }
.card.red { color: var(--red); }
.card .ix { position: absolute; top: 2px; left: 5px; line-height: 1; text-align: center; font-size: calc(var(--ch) * .2); }
.card .ix small { display: block; font-size: .85em; }
.card .mid { position: absolute; right: 6px; bottom: 4px; font-size: calc(var(--ch) * .36); line-height: 1; opacity: .9; }
.card.mini { --ch: 30px; width: 22px; height: 30px; border-radius: 4px; }
.card.mini .ix { font-size: 10px; left: 2px; top: 1px; }
.card.mini .mid { display: none; }
.card.back, .card.backmini { background:
    linear-gradient(45deg, transparent 40%, rgba(232,182,76,.8) 40% 46%, transparent 46% 54%, rgba(232,182,76,.8) 54% 60%, transparent 60%) 0 0/14px 14px,
    linear-gradient(-45deg, transparent 40%, rgba(0,0,0,.6) 40% 46%, transparent 46% 54%, rgba(0,0,0,.6) 54% 60%, transparent 60%) 0 0/14px 14px,
    var(--crimson); border: 3px solid #fffdf7; }
.card.man { background: linear-gradient(160deg, #fffdf7 60%, #ffe8a8); }
.card.man .ix { color: var(--blue); }
.card.bir { background: linear-gradient(160deg, #8c1022, #3d0811); color: var(--gold); border: 2px solid var(--gold); }
.card.maal { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(232,182,76,.9); }
.card .tagm { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); font-size: 9px; background: var(--gold); color: #3a0a0f; border-radius: 4px; padding: 0 3px; white-space: nowrap; }

/* Hand */
.handbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--ch) + 14px); display: flex; align-items: flex-end; padding: 0 max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); gap: 8px; }
.hand { flex: 1; position: relative; height: calc(var(--ch) + 10px); }
.hand .card { position: absolute; bottom: 0; transition: transform .15s, left .2s; }
.hand .card.sel { transform: translateY(-14px); box-shadow: 0 0 0 3px #4fc3ff, 0 6px 14px rgba(0,0,0,.5); }
.hand .card.new { outline: 3px solid #7fe08a; outline-offset: -3px; }
.actions { width: 150px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: end; padding-bottom: 2px; }
.counters { grid-column: 1 / -1; display: flex; gap: 4px; justify-content: center; }
.chip { font-size: 11px; font-weight: 700; background: rgba(0,0,0,.5); border: 1px solid rgba(232,182,76,.5); border-radius: 999px; padding: 0 8px; }
.act { font-size: 14px; font-weight: 700; padding: 5px 4px; border-radius: 9px; background: #3a2a4a; box-shadow: 0 3px 0 #0008; }
.act:disabled { opacity: .35; }
.act.gold { background: linear-gradient(#f2c55c, #c98d21); color: #3a0a0f; }
.act.green { background: linear-gradient(#45c06e, #23804a); }
.act.red { background: linear-gradient(#e0424f, #9e1622); }
.act:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #0008; }
.toast { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); background: #000d; border: 1px solid var(--gold); padding: 6px 14px; border-radius: 10px; z-index: 30; font-weight: 600; }

/* Overlays */
.overlay { position: absolute; inset: 0; background: rgba(10,2,4,.78); display: grid; place-items: center; z-index: 40; padding: 10px; }
.sheet { background: linear-gradient(#3d0811, #1d070a); border: 2px solid var(--gold); border-radius: 16px; padding: 10px 14px; width: min(760px, 100%); max-height: 100%; overflow: auto; text-align: center; }
.sheet.small { width: min(360px, 100%); }
.sheet h2 { margin: 0; color: var(--gold); font-size: 22px; }
.res-meta { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.res-row { display: grid; grid-template-columns: 34px 1.2fr 2.4fr .7fr .8fr .8fr; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.05); margin-bottom: 4px; text-align: left; font-size: 14px; }
.res-row.head { background: none; color: var(--muted); font-size: 12px; }
.res-row.win { background: rgba(232,182,76,.18); outline: 1px solid var(--gold); }
.res-row .cards { display: flex; flex-wrap: wrap; gap: 3px; }
.res-row .pos { color: #7fe08a; font-weight: 800; }
.res-row .neg { color: #ff8a8a; font-weight: 800; }
.res-melds { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0 10px; }
.res-melds .grp { display: flex; gap: 2px; padding: 3px; background: rgba(0,0,0,.3); border-radius: 6px; }
.phone-icon { font-size: 40px; }

.seat .meta .cnt { display: inline-block; width: 9px; height: 12px; border-radius: 2px; background: var(--crimson); border: 1px solid #fff; margin-right: 2px; vertical-align: -1px; }
.my-melds { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); display: flex; gap: 4px; }
.my-melds .mchip { font-size: 13px; line-height: 20px; padding: 0 6px; }

/* Drag & drop */
.hand, .hand .card, .pile { touch-action: none; }
.card.ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; box-shadow: 0 12px 28px rgba(0,0,0,.6); transition: none; }
.hand .card.dragging { opacity: .25; }
.drop-mark { position: absolute; bottom: 0; width: 4px; height: calc(var(--ch) + 8px); background: var(--gold); border-radius: 2px; box-shadow: 0 0 10px var(--gold); z-index: 100; pointer-events: none; }
#discard.drop-target { outline: 3px dashed var(--gold); outline-offset: 4px; border-radius: 10px; }

/* Bot turns */
.card.flying { z-index: 70; }
.pile.bot-pick, #discard.bot-pick .card { box-shadow: 0 0 0 3px #fff, 0 0 16px #fff; transform: translateY(-4px); transition: transform .2s; }
.bubble { position: absolute; top: -14px; right: -18px; background: #fffdf7; border-radius: 12px; padding: 3px 7px; display: flex; gap: 3px; box-shadow: 0 2px 6px #0007; }
.bubble::after { content: ""; position: absolute; left: 4px; bottom: -4px; width: 8px; height: 8px; background: #fffdf7; transform: rotate(45deg); }
.bubble i { width: 5px; height: 5px; border-radius: 50%; background: #6b3d12; animation: dot 1s infinite; }
.bubble i:nth-child(2) { animation-delay: .15s; }
.bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }

/* ===== Start screen (friends-first) ===== */
#start { display: grid; place-items: center; padding: 26px max(16px, env(safe-area-inset-left)); overflow-y: auto; }
.start-grid { display: flex; gap: clamp(16px, 5vw, 56px); align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; max-width: 860px; }
.start-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.start-form { display: flex; flex-direction: column; gap: 10px; width: min(360px, 100%); }
.field { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.field input, .code-input { font: inherit; font-size: 18px; font-weight: 700; color: var(--ink); background: rgba(0,0,0,.4); border: 1px solid rgba(232,182,76,.55); border-radius: 10px; padding: 6px 12px; outline: none; }
.field input:focus, .code-input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232,182,76,.3); }
.avatar-pick { display: flex; flex-wrap: wrap; gap: 4px; }
.avatar-pick button { width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.35); font-size: 18px; border: 2px solid transparent; }
.avatar-pick button.on { border-color: var(--gold); background: var(--crimson); }
.join-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.code-input { width: 7.5ch; text-align: center; letter-spacing: .2em; text-transform: uppercase; }
.code-input.from-link { border-color: #7fe08a; box-shadow: 0 0 0 2px rgba(127,224,138,.35); }
.join-row .act { padding: 7px 14px; }
.start-row { flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.link-btn { background: none; color: var(--gold-soft); text-decoration: underline; font-weight: 600; padding: 0; }
.sep { opacity: .5; }
.lang-toggle.small button { padding: 2px 10px; font-size: 13px; }
#friendsBtn { width: 100%; }

/* ===== Lobby ===== */
#lobby { display: grid; place-items: center; padding: 26px max(16px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 50% 40%, #5a0c18 0%, var(--bg) 70%); overflow-y: auto; }
.lobby-back { position: absolute; top: 24px; left: max(12px, env(safe-area-inset-left)); z-index: 2; }
.lobby-grid { display: flex; gap: clamp(16px, 5vw, 48px); align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; max-width: 860px; }
.lobby-code { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 340px; }
.room-code { font-size: clamp(40px, 12vh, 64px); font-weight: 800; letter-spacing: .18em; color: var(--gold); text-shadow: 0 3px 0 var(--crimson-dark); line-height: 1; }
.share-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.share-row .act { padding: 7px 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; margin: 0; }
.lobby-seats { display: flex; flex-direction: column; gap: 8px; width: min(340px, 100%); }
.seat-list { display: flex; flex-direction: column; gap: 4px; }
.lseat { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.35); border: 1px solid rgba(232,182,76,.35); border-radius: 10px; padding: 3px 10px; font-size: 15px; min-height: 36px; }
.lseat.me { border-color: var(--gold); }
.lseat.empty { color: var(--muted); border-style: dashed; }
.lseat .av { font-size: 20px; width: 26px; text-align: center; }
.lseat em { margin-left: auto; font-style: normal; font-size: 11px; background: var(--gold); color: #3a0a0f; border-radius: 999px; padding: 0 8px; font-weight: 700; }
.lseat.speaking { box-shadow: 0 0 0 2px #7fe08a, 0 0 12px #7fe08a; }
.check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.check input { accent-color: var(--gold); width: 18px; height: 18px; }
.lobby-actions { display: flex; align-items: center; gap: 12px; }
.round-btn { width: 48px; height: 48px; border-radius: 50%; font-size: 22px; background: rgba(0,0,0,.45); border: 2px solid rgba(232,182,76,.6); flex: none; }

/* ===== Voice ===== */
.voice-btn.off, .round-btn.off { opacity: .55; filter: grayscale(.6); }
.voice-btn.on, .round-btn.on { background: rgba(47,158,87,.35); border-color: #7fe08a; }
.voice-btn.speaking, .round-btn.speaking { box-shadow: 0 0 0 2px #7fe08a, 0 0 12px #7fe08a; }
.seat.speaking .avatar { box-shadow: 0 0 0 4px #7fe08a, 0 0 18px #7fe08a; animation: talk .5s infinite alternate; }
@keyframes talk { to { box-shadow: 0 0 0 6px #7fe08a, 0 0 24px #7fe08a; } }
.seat.human .avatar { cursor: pointer; }
.muted-badge { position: absolute; bottom: -4px; right: -6px; font-size: 14px; background: #000c; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; }
.tap-hear { position: absolute; left: 50%; bottom: calc(var(--ch) + 24px); transform: translateX(-50%); z-index: 45; background: linear-gradient(#45c06e, #23804a); font-weight: 800; padding: 8px 18px; border-radius: 999px; box-shadow: 0 4px 14px #0008; }

/* ===== Misc ===== */
.spinner { width: 34px; height: 34px; margin: 6px auto; border-radius: 50%; border: 4px solid rgba(232,182,76,.25); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.res-row.me { outline: 1px dashed rgba(255,255,255,.35); }
#resWait { margin-top: 6px; }
.code-input { width: 9.5ch; padding-left: 8px; padding-right: 4px; }
.code-input::placeholder { letter-spacing: normal; }
/* Invite link: one obvious action */
#start.invite-mode .play-row, #start.invite-mode .start-row { display: none; }
#start.invite-mode .join-row { flex-wrap: wrap; justify-content: center; }
#start.invite-mode #joinBtn { flex-basis: 100%; font-size: 20px; padding: 10px; background: linear-gradient(#45c06e, #23804a); color: #fff; }

/* ===== Hold to talk ===== */
.ptt-btn { position: absolute; left: max(10px, env(safe-area-inset-left)); bottom: calc(var(--ch) + 22px); z-index: 12;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 64px; height: 64px; border-radius: 50%; font-size: 24px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, #4a1520, #22060b); border: 3px solid var(--gold); box-shadow: 0 4px 14px #0009;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ptt-btn span { font-size: 8.5px; font-weight: 700; color: var(--gold-soft); margin-top: 2px; white-space: nowrap; }
.ptt-btn.rec, .round-btn.rec { background: radial-gradient(circle, #ff5a5a, #b3121f); border-color: #fff; transform: scale(1.12); box-shadow: 0 0 0 6px rgba(255,90,90,.35), 0 0 24px #ff5a5a; animation: recpulse .8s infinite alternate; }
@keyframes recpulse { to { box-shadow: 0 0 0 12px rgba(255,90,90,.15), 0 0 30px #ff5a5a; } }
.round-btn.ptt { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Lobby on short landscape phones: keep the 🎤 and Start buttons on screen */
@media (max-height: 440px) {
  #lobby { padding-top: 22px; padding-bottom: 22px; }
  .seat-list { gap: 3px; }
  .lseat { min-height: 30px; padding: 1px 10px; font-size: 14px; }
  .lobby-seats { gap: 5px; }
  .round-btn { width: 42px; height: 42px; font-size: 19px; }
  .lobby-actions .big-btn { padding: 7px 26px; font-size: 18px; }
}

/* ===== Smooth hand ===== */
.hand .card { transition: left .32s cubic-bezier(.25,.8,.25,1), transform .2s ease, box-shadow .2s ease; will-change: left, transform; }
.hand .card.enter { transition: none; }
.hand .card.sel { transform: translateY(-16px); }

/* ===== Discard pile: a real, slightly messy stack ===== */
#discard .card { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .25s ease; }
#discard .card:first-child:not(:last-child) { filter: brightness(.9); }
.pile.bot-pick, #discard.bot-pick .card:last-child { box-shadow: 0 0 0 3px #fff, 0 0 18px #fff; }
.pile.bot-pick { transform: translateY(-6px) scale(1.04); transition: transform .25s ease, box-shadow .25s ease; }
.card.flying { will-change: transform; box-shadow: 0 14px 28px rgba(0,0,0,.45); }

/* ===== Maal card next to the deck (only meaningful to me) ===== */
.tiplu-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tiplu { --ch: calc(min(23vh, 116px) * .58); --cw: calc(min(23vh, 116px) * .58 * .7); width: var(--cw); height: var(--ch); position: relative; transform: rotate(-8deg); transition: transform .4s ease; }
.tiplu .card { width: 100%; height: 100%; }
.tiplu .card.back b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-size: 20px; text-shadow: 0 1px 2px #000; }
.tiplu.open { transform: rotate(0deg); }
.tiplu.open .card { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(232,182,76,.8); animation: reveal .6s ease-out; }
@keyframes reveal { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }
.maal-badge { font-size: 11px; font-weight: 800; padding: 0 8px; border-radius: 999px; background: rgba(0,0,0,.5); color: var(--muted); border: 1px solid rgba(232,182,76,.4); white-space: nowrap; }
.maal-badge.open { background: linear-gradient(#f2c55c, #c98d21); color: #3a0a0f; border-color: #fff3; }

/* ===== "Ready" status ===== */
.status.ready { font-size: 17px; font-weight: 800; background: linear-gradient(90deg, #c98d21, #fff3c4, #c98d21); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 1.8s linear infinite; text-shadow: none; }
@keyframes shine { to { background-position: -200% 0; } }

/* ===== DUB / SEQ groups lifted out of the row ===== */
.grp-btn { cursor: pointer; color: var(--ink); }
.grp-btn.on { background: linear-gradient(#45c06e, #23804a); border-color: #bff5cc; }
.groups { --ch: calc(min(23vh, 116px) * .55); --cw: calc(min(23vh, 116px) * .55 * .7);
  position: absolute; left: 84px; right: 170px; bottom: calc(min(23vh, 116px) + 20px); z-index: 11;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; pointer-events: none; }
.grp-tray { pointer-events: auto; position: relative; display: flex; padding: 3px 5px 3px 3px; border-radius: 9px; background: rgba(0,0,0,.45); border: 1px solid rgba(127,224,138,.7); cursor: pointer; animation: lift .3s cubic-bezier(.2,.8,.2,1); }
.grp-tray.dub { border-color: rgba(120,190,255,.8); }
.grp-tray .card { flex: none; }
.grp-tray .card + .card { margin-left: calc(var(--cw) * -0.5); }
.grp-tray .card .tagm { display: none; }
.grp-ok { position: absolute; top: -8px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #2f9e57; color: #fff; font-size: 11px; display: grid; place-items: center; font-weight: 800; }
.grp-tray.dub .grp-ok { background: #1f6fbf; }
@keyframes lift { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Dragging inside the hand: the card leaves its slot (the gap shows where it will land) */
.hand .card.dragging { opacity: 0; }

/* ===== Maal tucked crosswise under the deck ===== */
.tiplu { --ch: calc(min(23vh, 116px) * .85); --cw: calc(min(23vh, 116px) * .85 * .7);
  width: var(--cw); height: var(--ch); position: relative; z-index: 0;
  transform: rotate(-90deg); margin-right: calc(var(--ch) * -0.4 - 14px); transition: none; }
.tiplu.open { transform: rotate(-90deg); }
.tiplu .card { width: 100%; height: 100%; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.tiplu .card.back b { transform: rotate(90deg); }
#stock { z-index: 1; }
.tiplu.open .card { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(232,182,76,.8); }

/* ===== Peek: pull the Maal toward me and turn it over ===== */
.peek { position: fixed; left: 0; top: 0; z-index: 80; perspective: 900px; pointer-events: none; }
.peek-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.peek-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 36px rgba(0,0,0,.55); }
.peek-front { transform: rotateY(180deg); box-shadow: 0 0 0 3px var(--gold), 0 0 28px rgba(232,182,76,.9); }

/* ===== My private Maal reminder ===== */
.my-maal { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: calc(min(23vh, 116px) + 18px); z-index: 12;
  display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px; border-radius: 10px;
  background: rgba(0,0,0,.55); border: 1px solid var(--gold); box-shadow: 0 4px 12px #0007; }
.my-maal .card.mini { --ch: 36px; width: 26px; height: 36px; }
.my-maal .maal-badge { background: linear-gradient(#f2c55c, #c98d21); color: #3a0a0f; border: 0; font-size: 12px; }
.seat .meta:empty { display: none; }
.seat .meta .pts { font-weight: 700; color: var(--gold-soft); }

/* ===== Peeking at the Maal: slide toward you, bend a corner ===== */
.tiplu { touch-action: none; }
.tiplu.peekable { cursor: grab; }
.tiplu.peekable .card { animation: peekGlow 1.3s ease-in-out infinite; }
@keyframes peekGlow { 0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 6px rgba(232,182,76,.5); } 50% { box-shadow: 0 0 0 3px #fff3c4, 0 0 20px rgba(232,182,76,1); } }
.peek-hint { position: absolute; right: 100%; top: 72%; margin-right: 6px; white-space: nowrap; font-size: 12px; font-weight: 700; color: #fff3c4;
  background: rgba(0,0,0,.55); border: 1px solid var(--gold); border-radius: 999px; padding: 1px 10px; animation: hintBob 1.2s ease-in-out infinite; pointer-events: none; }
.peek-hint::after { content: " ↓"; }
@keyframes hintBob { 50% { transform: translateY(4px); } }
.peel { position: fixed; z-index: 80; pointer-events: none; transform-origin: 50% 50%; }
.peel > .card { position: absolute; inset: 0; width: 100%; height: 100%; }


/* ===== The squeezed Maal: a real folded corner ===== */
.peel { transform-style: preserve-3d; }
.peel-back { box-shadow: 0 10px 22px rgba(0,0,0,.5); }
.peel-hole { position: absolute; left: 0; top: 0; clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(135deg, rgba(0,0,0,.45), rgba(0,0,0,.08) 70%); border-top-left-radius: 8px; }
.peel-shadow { position: absolute; left: 0; top: 0; clip-path: polygon(100% 0, 0 100%, 100% 100%);
  background: rgba(0,0,0,.38); filter: blur(.5px); }
.peel-flap { position: absolute; left: 0; top: 0; clip-path: polygon(100% 0, 0 100%, 100% 100%); overflow: hidden;
  /* curved paper: bright along the fold, shading toward the tip */
  background:
    linear-gradient(135deg, transparent 47%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 58%),
    linear-gradient(135deg, #fffdf7 48%, #f4efe3 72%, #d8cfbd 100%); }
.peel-index { position: absolute; line-height: 1; white-space: nowrap; text-align: center; font-weight: 800; color: var(--black); transform-origin: 50% 50%; }
.peel-index.red { color: var(--red); }
.peel-index.bir { color: var(--crimson); }
.peel-index small { font-size: .9em; margin-left: .05em; }

/* Choosing your own sets */
.act.grp-mode { background: linear-gradient(#45c06e, #23804a); }
.grp-tray.trial { border-color: rgba(200,150,255,.85); }
.grp-tray.joker { border-color: rgba(232,182,76,.9); }
.grp-type { position: absolute; top: -9px; left: 4px; font-size: 9.5px; font-weight: 800; padding: 0 5px; border-radius: 999px; background: #6b3fa0; color: #fff; }
.grp-tray.joker .grp-type { background: #c98d21; color: #3a0a0f; }

/* ===== Compact results ===== */
#results .sheet { padding: 8px 12px 10px; width: min(720px, 100%); }
#results .sheet h2 { display: inline-block; font-size: 18px; margin: 0 8px 4px 0; }
#results .res-meta { display: inline-block; font-size: 13px; margin: 0 0 4px; }
.res-row { grid-template-columns: 24px minmax(90px, 1.4fr) minmax(0, 2.2fr) 40px 52px 52px; gap: 6px; padding: 2px 8px; margin-bottom: 3px; font-size: 13px; min-height: 30px; border-radius: 7px; }
.res-row.head { min-height: 0; padding-top: 0; padding-bottom: 0; font-size: 11px; }
.res-row > span:first-child { font-size: 16px; }
.res-row .nm { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.res-row .nm b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-row .nm small { flex: none; font-size: 10px; color: var(--muted); }
.res-row .nm small.ok { color: #7fe08a; }
.res-row .cards { gap: 2px; flex-wrap: nowrap; overflow: hidden; }
.res-row .cards .card.mini, .res-melds .card.mini { --ch: 24px; width: 17px; height: 24px; border-radius: 3px; }
.res-row .cards .card.mini .ix, .res-melds .card.mini .ix { font-size: 8.5px; left: 1px; }
.res-melds { margin: 4px 0 6px; gap: 4px; align-items: center; }
.res-melds .grp { padding: 2px; gap: 1px; }
.res-melds-label { font-size: 11px; color: var(--muted); margin-right: 2px; }
#againBtn { font-size: 16px; padding: 6px 26px; }
#resWait { font-size: 13px; }
.res-row .cards { align-items: center; }
.bd-chip { flex: none; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 999px; background: rgba(232,182,76,.22); color: var(--gold-soft); border: 1px solid rgba(232,182,76,.45); white-space: nowrap; }

/* Empty deck: just an outline where the cards were */
#stock.empty { background: transparent; border: 2px dashed rgba(232,182,76,.55); box-shadow: none; }
#stock.empty #stockCount { display: none; }

/* ===== Turn clock ===== */
.avatar.timed::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--gold) calc(var(--t, 1) * 360deg), rgba(255,255,255,.08) 0);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%); }
.avatar.timed.hurry::after { background: conic-gradient(#ff5a5a calc(var(--t, 1) * 360deg), rgba(255,255,255,.08) 0); }
.turn-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(min(23vh, 116px) + 12px); width: min(320px, 50vw); height: 5px; border-radius: 3px; z-index: 13;
  background: linear-gradient(90deg, var(--gold) calc(var(--t, 1) * 100%), rgba(255,255,255,.12) 0); box-shadow: 0 0 6px rgba(232,182,76,.6); }
.turn-bar.hurry { background: linear-gradient(90deg, #ff5a5a calc(var(--t, 1) * 100%), rgba(255,255,255,.12) 0); box-shadow: 0 0 8px #ff5a5a; }

/* ===== Folded / away ===== */
.seat.folded .avatar, .seat.folded .name { filter: grayscale(1); opacity: .5; }
.seat .badge.fold { background: #6b6b6b; }
.seat .badge.away { background: #c98d21; color: #3a0a0f; }
#game.me-folded .hand, #game.me-folded .actions { filter: grayscale(.8); opacity: .45; pointer-events: none; }
.folded-note { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(min(23vh, 116px) + 26px); z-index: 14; background: rgba(0,0,0,.65); border: 1px solid #888; border-radius: 10px; padding: 4px 12px; font-size: 13px; white-space: nowrap; }
.back-btn { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 46; font-size: 20px; font-weight: 800; padding: 12px 30px; border-radius: 999px; background: linear-gradient(#45c06e, #23804a); color: #fff; box-shadow: 0 6px 20px #000a; animation: pulseBack 1.2s ease-in-out infinite; }
@keyframes pulseBack { 50% { transform: translate(-50%, -50%) scale(1.06); } }
.res-row .nm small.fold { color: #aaa; }

/* ===== Leave / fold menu ===== */
.leave-sheet { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.leave-sheet h2 { margin: 0; }
.leave-sheet p { margin: 0; text-align: center; }
.leave-sheet .act { padding: 8px 18px; }
.avatar.timed.extra::after { background: conic-gradient(#ff9f1c calc(var(--t, 1) * 360deg), rgba(255,255,255,.08) 0); }
.turn-bar.extra { background: linear-gradient(90deg, #ff9f1c calc(var(--t, 1) * 100%), rgba(255,255,255,.12) 0); box-shadow: 0 0 8px #ff9f1c; }
.extra-note { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(min(23vh, 116px) + 22px); z-index: 13; font-size: 12px; font-weight: 700; color: #ffd08a; background: rgba(0,0,0,.6); border: 1px solid #ff9f1c; border-radius: 999px; padding: 1px 10px; white-space: nowrap; }

/* ===== Quick chat ===== */
.chat-layer { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.chat-bubble { position: absolute; transform: translate(-50%, -100%); background: #fffdf7; color: #2a0a0e; border-radius: 14px; padding: 4px 10px; font-weight: 700; font-size: 14px; max-width: 220px; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.45); animation: bubbleIn .25s cubic-bezier(.2,.8,.2,1.4); transition: opacity .4s, transform .4s; }
.chat-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.chat-bubble.emoji { font-size: 30px; padding: 2px 8px; background: rgba(255,253,247,.95); }
.chat-bubble.mine { background: #fff3c4; }
.chat-bubble.out { opacity: 0; transform: translate(-50%, -130%); }
@keyframes bubbleIn { from { transform: translate(-50%, -60%) scale(.6); opacity: 0; } to { transform: translate(-50%, -100%) scale(1); opacity: 1; } }
.chat-panel { position: absolute; top: 42px; right: max(10px, env(safe-area-inset-right)); z-index: 35; width: min(330px, 92vw); max-height: 70vh; overflow: auto;
  background: rgba(20,4,7,.96); border: 1px solid var(--gold); border-radius: 14px; padding: 8px; box-shadow: 0 10px 30px #000a; }
.chat-emojis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 6px; }
.chat-emojis button { font-size: 24px; background: rgba(255,255,255,.06); border-radius: 10px; padding: 3px 0; }
.chat-phrases { display: flex; flex-direction: column; gap: 4px; }
.chat-phrases button { text-align: left; font-size: 14px; font-weight: 600; background: rgba(255,255,255,.07); border: 1px solid rgba(232,182,76,.25); border-radius: 10px; padding: 5px 10px; }
.chat-emojis button:active, .chat-phrases button:active { background: rgba(232,182,76,.35); }
.big-btn.rejoin { width: 100%; background: linear-gradient(#45c06e, #23804a); color: #fff; box-shadow: 0 4px 0 #14552f, 0 8px 18px rgba(0,0,0,.4); }
.seat .badge.away { white-space: nowrap; }

/* ===== How to play ===== */
.how-sheet { text-align: left; width: min(640px, 100%); }
.how-sheet h2 { text-align: center; margin-bottom: 4px; }
.how-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 14px; line-height: 1.35; }
.how-list li { background: rgba(255,255,255,.05); border-radius: 8px; padding: 4px 8px; }
.how-sheet #howClose { display: block; margin: 0 auto; }
.how-sheet .credits { font-size: 10.5px; text-align: center; margin: 6px 0 0; }
/* 21 phrases: two columns so the panel stays short */
.chat-panel { width: min(520px, 94vw); }
.chat-phrases { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.chat-phrases button { font-size: 13px; line-height: 1.25; padding: 5px 8px; }

/* Start: both ways to play side by side; friends is the main one */
.play-row { display: flex; gap: 10px; width: 100%; align-items: stretch; }
.play-row .big-btn { flex: 1.35; padding: 10px 14px; white-space: nowrap; }
.play-row .big-btn.secondary { flex: 1; font-size: 17px; background: rgba(242,197,92,.08); color: var(--gold-soft); border: 2px solid #c98d21; box-shadow: 0 3px 0 rgba(122,79,12,.7); }
.play-row .big-btn.secondary:active { box-shadow: 0 1px 0 rgba(122,79,12,.7); }
@media (max-width: 380px) { .play-row .big-btn { font-size: 16px; } .play-row .big-btn.secondary { font-size: 14px; } }

/* Android browser: link to the app (the game still works in the browser) */
.get-app { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 50; background: linear-gradient(#45c06e, #23804a); color: #fff; font-weight: 700; padding: 8px 18px; border-radius: 999px; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.45); white-space: nowrap; }
#game:not(.hidden) ~ .get-app, #lobby:not(.hidden) ~ .get-app { display: none; }

/* Start screen fits a landscape phone: all avatars on one line, tighter spacing when short */
.avatar-pick { flex-wrap: nowrap; justify-content: space-between; }
.avatar-pick button { width: auto; flex: 0 1 34px; height: auto; aspect-ratio: 1; min-width: 0; padding: 0; }
@media (max-height: 460px) {
  #start { padding-block: 10px; }
  .start-form { gap: 8px; }
  .start-form .field input { padding-block: 6px; }
  .play-row .big-btn, .big-btn.rejoin { padding-block: 7px; }
}
/* Landscape: logo always beside the form, never stacked above it */
@media (orientation: landscape) { .start-grid { flex-wrap: nowrap; } .start-form { flex: 0 1 380px; min-width: 0; } }

/* In-app yes/no dialog */
#confirmSheet { position: fixed; z-index: 60; }
.confirm-sheet { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; animation: pop-in .18s ease-out; }
.confirm-sheet p { margin: 0; line-height: 1.35; }
.confirm-actions { display: flex; gap: 10px; margin-top: 4px; }
.confirm-actions > button { flex: 1; font-size: 17px; padding: 9px 10px; border-radius: 12px; }
.confirm-actions .big-btn.secondary { background: rgba(242,197,92,.08); color: var(--gold-soft); border: 2px solid #c98d21; box-shadow: none; }
@keyframes pop-in { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }