:root {
  --green: #3F9C0A; --green-d: #2C7A08; --green-l: #8BD32B; --lime: #7CFF2E;
  --orange: #FF9462; --sand: #FFD898; --brown: #4C1A1C; --ink: #2A140C;
  --blue: #2BB8F6; --gold: #FFD23F; --red: #E8452C;
  --card: rgba(255, 248, 238, 0.94);
  --font: "Poppins", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #FF9C68; font-family: var(--font); color: var(--ink); -webkit-tap-highlight-color: transparent; }
canvas#game { position: absolute; display: block; touch-action: manipulation; }
.hidden { display: none !important; }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 5; background: radial-gradient(ellipse at center, rgba(60,20,10,0.25), rgba(60,20,10,0.55)); overflow-y: auto; }
#over, #waiting { background: rgba(40, 14, 8, 0.45); }

.lobby-card, .panel { width: min(560px, 100%); background: var(--card); border-radius: 28px; padding: 26px 28px; box-shadow: 0 30px 80px rgba(70, 20, 0, 0.35); position: relative; margin: auto; }
/* Top accent strip is painted as part of the card's own background, so the card's
   border-radius clips it exactly (no separate element poking out at the corners). */
.lobby-card { background: linear-gradient(90deg, #3A3A0E, #E8582A 50%, #3A3A0E) top / 100% 10px no-repeat, var(--card); }

.brand { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.logo-img { display: block; height: 64px; width: auto; max-width: 240px; object-fit: contain; flex: none; }
.brand .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logo-hex { width: 64px; height: 72px; flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(#F2F5F8, #6F7B88); display: grid; place-items: center; }
.logo-hex span { width: 54px; height: 62px; clip-path: inherit; background: radial-gradient(circle at 40% 30%, #C4FF5A, #2F7A0A); display: grid; place-items: center; font-size: 28px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: 1px; line-height: 1; color: var(--brown); }
h1 em { font-style: normal; font-size: 0.55em; color: var(--red); vertical-align: middle; padding: 0 2px; }
.tag { margin: 6px 0 0; font-size: 13px; color: #8A5A40; font-weight: 600; }
h2 { margin: 0; font-size: 18px; font-weight: 700; }
.muted { color: #8A6A58; font-size: 13px; }

.mode-pill { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #FFE9C7; color: #9A5A1A; }
.mode-pill.live { background: #E0F7C8; color: var(--green-d); }

.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.grow { flex: 1; min-width: 160px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: #8A5A40; text-transform: uppercase; letter-spacing: .5px; }
.field small { text-transform: none; font-weight: 600; }
input { font: 600 16px var(--font); color: var(--ink); padding: 12px 14px; border-radius: 14px; border: 2px solid #F0D2B4; background: #fff; outline: none; width: 100%; }
input:focus { border-color: var(--green-l); box-shadow: 0 0 0 4px rgba(139,211,43,.2); }

.create { margin: 18px 0; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, #FFF1DC, #FFE2BE); display: grid; gap: 14px; }
.wager-input { display: flex; gap: 8px; flex-wrap: wrap; }
.wager-input input { flex: 1; min-width: 110px; }
.chips { display: flex; gap: 6px; }
.chips button { font: 700 13px var(--font); border: 0; border-radius: 12px; padding: 0 12px; background: #fff; color: #9A5A1A; cursor: pointer; min-height: 46px; }
.chips button:hover { background: var(--gold); }

.btn { font: 700 16px var(--font); border: 0; border-radius: 16px; padding: 13px 20px; cursor: pointer; transition: transform .08s, filter .15s; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.btn small { font-size: 11px; font-weight: 600; opacity: .85; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #57B81A, var(--green-d)); color: #fff; box-shadow: 0 5px 0 #1F5A04; }
.btn.secondary { background: linear-gradient(180deg, #FFB03B, #E8752A); color: #fff; box-shadow: 0 5px 0 #A84A10; }
.btn.ghost { background: #fff; color: var(--green-d); box-shadow: inset 0 0 0 2px #CDE8B0; }
.btn.link { background: none; color: #9A5A1A; text-decoration: underline; padding: 8px; }
.btn.small { padding: 8px 12px; font-size: 13px; }
.create-hint { margin: 10px 2px 0; font-size: 13px; font-weight: 600; color: #8A4A1A; text-align: center; line-height: 1.45; }
.create-hint a { color: var(--green-d); font-weight: 800; white-space: nowrap; }
#createBtn:disabled { filter: grayscale(.35); }
.room-list .btn:disabled { opacity: .55; cursor: not-allowed; }
.balance-card { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 176px; padding: 9px 16px 10px; border-radius: 16px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #3F9A12, #2A740A); box-shadow: 0 3px 0 #1F5A04, inset 0 1px 0 rgba(255,255,255,.25); transition: transform .12s, filter .12s; }
.balance-card:hover { filter: brightness(1.06); transform: translateY(-1px); }
.balance-card .bc-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.balance-card b { font-size: 21px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.balance-card b small { font-size: 13px; font-weight: 700; opacity: .9; margin-left: 3px; }
.balance-card .bc-cta { font-size: 12px; font-weight: 700; color: #D8FFB8; }
.balance-card.low { animation: bcPulse .9s ease-in-out 2; }
@keyframes bcPulse { 50% { transform: scale(1.04); box-shadow: 0 3px 0 #1F5A04, 0 0 0 5px rgba(124,255,46,.45); } }

.games-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.room-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 200px; overflow-y: auto; display: grid; gap: 8px; }
.room-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 #F0D2B4; }
.room-list li.empty { justify-content: center; color: #A88A78; font-size: 14px; box-shadow: none; background: rgba(255,255,255,.5); }
.room-list .who { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-list .who small { display: block; font-weight: 600; color: #A88A78; font-size: 11px; }
.room-list .amt { font-weight: 800; color: var(--green-d); white-space: nowrap; }
.room-list .btn { padding: 8px 14px; font-size: 14px; }
.code-row input { flex: 1; text-transform: uppercase; letter-spacing: 3px; }
.foot { justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 2px dashed #F0D2B4; }

.panel h2 { font-size: 24px; margin-bottom: 4px; }
.seats { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.seat { flex: 1; padding: 14px; border-radius: 18px; color: #fff; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seat.a { background: linear-gradient(135deg, #57B81A, var(--green-d)); }
.seat.b { background: linear-gradient(135deg, #3CC4FF, #0E6EA8); }
.seat b { font-size: 12px; opacity: .85; text-transform: uppercase; }
.seat span { font-size: 18px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.seat i { font-style: normal; font-size: 12px; opacity: .9; }
.vs { font-weight: 800; color: var(--red); font-size: 20px; }
.invite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: #FFF1DC; border-radius: 16px; }
.invite span { font-size: 12px; font-weight: 700; color: #8A5A40; text-transform: uppercase; }
.invite strong { font-size: 24px; letter-spacing: 4px; flex: 1; }
.deposit { margin-top: 14px; padding: 14px; border-radius: 16px; background: #E0F7C8; display: grid; gap: 10px; }
.deposit p { margin: 0; }
#cancelBtn { margin-top: 10px; }

.center { text-align: center; }
.center .row { justify-content: center; margin-top: 16px; }
.badge { display: inline-block; font-size: 46px; font-weight: 800; letter-spacing: 3px; padding: 6px 30px; border-radius: 22px; color: #fff; background: linear-gradient(180deg, #57B81A, var(--green-d)); box-shadow: 0 6px 0 #1F5A04; }
.badge.lose { background: linear-gradient(180deg, #F0623C, #B22A12); box-shadow: 0 6px 0 #7A1A08; }
.badge.draw { background: linear-gradient(180deg, #FFB03B, #E8752A); box-shadow: 0 6px 0 #A84A10; }
.payout { font-weight: 700; font-size: 18px; word-break: break-all; }
.payout a { color: var(--green-d); }

.how ol { padding-left: 20px; line-height: 1.55; font-size: 15px; }
.how li { margin-bottom: 8px; }
kbd { font: 700 12px var(--font); background: #fff; border-radius: 6px; padding: 2px 7px; box-shadow: 0 2px 0 #E0C0A0; }

.toast { position: fixed; left: 50%; bottom: calc(24px + 14vh); transform: translateX(-50%); z-index: 20; background: rgba(40,14,8,.92); color: #fff; padding: 12px 20px; border-radius: 16px; font-weight: 600; max-width: calc(100% - 32px); }
.toast.err { background: rgba(170,30,20,.95); }
.game-btns { position: fixed; z-index: 6; display: flex; gap: 8px; }
.game-btns button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(40,14,8,.6); color: #fff; font: 700 15px var(--font); cursor: pointer; }
.game-btns button:hover { background: rgba(40,14,8,.85); }

.login-card { text-align: left; }
.eras { list-style: none; padding: 0; margin: 4px 0 18px; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: era; }
.eras li { counter-increment: era; font: 700 12px var(--font); padding: 6px 10px; border-radius: 999px; background: #FFE9C7; color: #9A5A1A; }
.eras li::before { content: counter(era) " · "; opacity: .6; }
.login-copy { margin: 0 0 18px; color: #6A4A38; font-size: 15px; }
.btn.discord { width: 100%; flex-direction: row; gap: 12px; background: #5865F2; color: #fff; box-shadow: 0 5px 0 #3B45C4; text-decoration: none; font-size: 18px; padding: 16px; }
.btn.google { width: 100%; flex-direction: row; gap: 12px; background: #fff; color: #1F1F1F; box-shadow: inset 0 0 0 2px #DADCE0, 0 5px 0 #C4C8CE; text-decoration: none; font-size: 18px; padding: 16px; margin-top: 12px; }
.btn.google:hover { background: #F8F9FA; }
.btn.google.disabled, .btn.discord.disabled { opacity: .5; pointer-events: none; }
.login-err { color: #B22A12; font-weight: 600; font-size: 14px; }
.dev-login { margin-top: 18px; padding-top: 16px; border-top: 2px dashed #F0D2B4; align-items: center; }
.dev-login input { flex: 1; min-width: 140px; }
.dev-login small { flex-basis: 100%; }
.profile { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px #F0D2B4; min-width: 200px; }
.profile img, .seat img { width: 44px; height: 44px; border-radius: 50%; background: #5865F2; object-fit: cover; flex: none; }
.profile div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.profile span { font-size: 11px; font-weight: 700; color: #8A5A40; text-transform: uppercase; white-space: nowrap; }
.profile b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile .logout { font-size: 12px; font-weight: 700; color: #9A5A1A; }
.profile-row { align-items: stretch; }
.seat { flex-direction: row !important; align-items: center; gap: 10px !important; }
.seat > div { display: flex; flex-direction: column; min-width: 0; }
.seat img { border: 3px solid rgba(255,255,255,.7); }

@media (max-width: 520px) {
  .lobby-card, .panel { padding: 20px 16px; border-radius: 22px; }
  h1 { font-size: 28px; }
  .chips button { padding: 0 9px; }
  .seats { flex-direction: column; } .seat { width: 100%; }
}
@media (orientation: portrait) and (max-width: 900px) {
  body.playing::after { content: "↻  Rotate your device to landscape for the best battle view"; position: fixed; left: 16px; right: 16px; bottom: 16px; text-align: center; padding: 10px; border-radius: 14px; background: rgba(40,14,8,.8); color: #fff; font-weight: 600; font-size: 13px; z-index: 9; }
}

.btn.disabled { opacity: .45; pointer-events: none; }

/* ---------- lobby links ---------- */
.back-home { position: absolute; top: 18px; right: 22px; font-size: 13px; font-weight: 700; color: #9A5A1A; text-decoration: none; }
.back-home:hover { text-decoration: underline; }
a.profile { text-decoration: none; color: inherit; transition: box-shadow .15s; }
a.profile:hover { box-shadow: inset 0 0 0 2px var(--green-l); }
.profile .acct-link { font-size: 12px; font-weight: 700; color: var(--green-d); text-transform: none; white-space: nowrap; }

/* ---------- match chat: right sticky sidebar ---------- */
:root { --chat-w: 320px; }
.chat { position: fixed; top: 0; right: 0; bottom: 0; width: var(--chat-w); z-index: 8; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(255,248,238,.97), rgba(255,240,222,.97)); border-left: 3px solid #F0D2B4;
  box-shadow: -18px 0 40px rgba(70,20,0,.18); }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 2px dashed #F0D2B4;
  background: linear-gradient(90deg, #3A3A0E, #E8582A 50%, #3A3A0E) top / 100% 5px no-repeat; }
.chat-head img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #5865F2; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--blue); flex: none; }
.chat-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.chat-title b { font-size: 15px; color: var(--brown); }
.chat-title span { font-size: 12px; font-weight: 600; color: #8A6A58; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #FFE9C7; color: #9A5A1A; cursor: pointer; display: grid; place-items: center; flex: none; }
.chat-x:hover { background: var(--gold); }
.chat-list { list-style: none; margin: 0; padding: 14px 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.chat-list li { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; animation: chatIn .18s ease-out; }
.chat-list li.me { align-self: flex-end; flex-direction: row-reverse; }
.chat-list li img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; background: #5865F2; }
.chat-list .bubble { padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: 0 2px 0 #F0D2B4; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; min-width: 0; }
.chat-list li.me .bubble { border-radius: 16px 16px 4px 16px; background: linear-gradient(180deg, #57B81A, var(--green-d)); color: #fff; box-shadow: 0 2px 0 #1F5A04; }
.chat-list li.side1:not(.me) .bubble { box-shadow: 0 2px 0 #9ED8F5, inset 3px 0 0 var(--blue); }
.chat-list li.side0:not(.me) .bubble { box-shadow: 0 2px 0 #CDE8B0, inset 3px 0 0 var(--green-l); }
.chat-list .meta { display: block; font-size: 10.5px; font-weight: 700; opacity: .65; margin-bottom: 1px; }
.chat-list li.sys { align-self: center; max-width: 100%; font-size: 12px; font-weight: 600; color: #9A7A64; background: rgba(255,233,199,.7); padding: 4px 12px; border-radius: 999px; }
.chat-empty { align-self: center; text-align: center; color: #A88A78; font-size: 13px; margin: auto 0 !important; display: block !important; max-width: 100% !important; }
.chat-empty b { display: block; font-size: 28px; margin-bottom: 4px; }
@keyframes chatIn { from { opacity: 0; transform: translateY(6px); } }
.chat-quick { display: flex; gap: 6px; padding: 0 12px 8px; flex-wrap: wrap; }
.chat-quick button { font: 700 12px var(--font); border: 0; border-radius: 999px; padding: 5px 11px; background: #FFE9C7; color: #9A5A1A; cursor: pointer; }
.chat-quick button:hover { background: var(--gold); }
.chat-form { display: flex; gap: 8px; padding: 0 12px 8px; }
.chat-form input { padding: 10px 12px; font-size: 14px; border-radius: 14px; }
.chat-form button { width: 44px; flex: none; border: 0; border-radius: 14px; cursor: pointer; color: #fff; background: linear-gradient(180deg, #57B81A, var(--green-d)); box-shadow: 0 3px 0 #1F5A04; display: grid; place-items: center; }
.chat-form button:disabled, .chat-form input:disabled { opacity: .5; cursor: not-allowed; }
.chat-note { margin: 0; padding: 0 12px 12px; font-size: 11px; color: #A88A78; line-height: 1.6; }
.chat-note kbd { font-size: 10px; padding: 1px 5px; }
.chat-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 8; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #57B81A, var(--green-d)); box-shadow: 0 5px 0 #1F5A04, 0 10px 24px rgba(0,0,0,.25); display: grid; place-items: center; }
.chat-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font: 800 12px/22px var(--font); box-shadow: 0 0 0 3px #fff; }
.chat-toggle.pulse { animation: chatPulse 1s ease-in-out 2; }
@keyframes chatPulse { 50% { transform: scale(1.12); } }
@media (min-width: 900px) { body.chat-open .overlay { right: var(--chat-w); } }
@media (max-width: 899px) { .chat { width: min(var(--chat-w), 88vw); } }
.chat-list li.typing .bubble { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.chat-list li.typing .bubble i { width: 7px; height: 7px; border-radius: 50%; background: #B08A70; animation: typingDot 1s ease-in-out infinite; }
.chat-list li.typing .bubble i:nth-child(2) { animation-delay: .15s; } .chat-list li.typing .bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- pause card (modern glass) ---------- */
.pause-ov { position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(42, 20, 12, .28), rgba(42, 20, 12, .62));
  -webkit-backdrop-filter: blur(5px) saturate(.75); backdrop-filter: blur(5px) saturate(.75); animation: pauseFade .18s ease-out; }
@media (min-width: 900px) { body.chat-open .pause-ov { right: var(--chat-w); } }
.pause-card { width: min(380px, 100%); text-align: center; padding: 30px 28px 24px; border-radius: 30px; color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 250, 243, .9), rgba(255, 241, 222, .84));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 30px 70px rgba(40, 12, 4, .35);
  animation: pauseIn .26s cubic-bezier(.2, .9, .3, 1.2); }
.pause-icon { width: 78px; height: 78px; margin: 0 auto 14px; border-radius: 50%; display: flex; gap: 9px; align-items: center; justify-content: center; position: relative;
  background: linear-gradient(180deg, #62C622, var(--green-d)); box-shadow: 0 6px 0 #1F5A04, 0 12px 26px rgba(44, 122, 8, .35); }
.pause-icon::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid rgba(98, 198, 34, .45); animation: pauseRing 1.8s ease-out infinite; }
.pause-icon span { width: 11px; height: 32px; border-radius: 4px; background: #fff; }
.pause-card h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.5px; color: var(--brown); }
.pause-by { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; font-size: 14.5px; font-weight: 600; color: #7A5440; }
.pause-by img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #5865F2; box-shadow: 0 0 0 2px #fff; }
.pause-timer { margin: 18px 0 0; }
.pt-bar { height: 8px; border-radius: 99px; background: rgba(176, 138, 112, .22); overflow: hidden; }
.pt-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FFB03B, #E8752A); transition: width 1s linear; }
.pause-timer span { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 600; color: #9A7A64; font-variant-numeric: tabular-nums; }
.pause-pips { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: 12.5px; font-weight: 600; color: #9A7A64; }
.pause-pips span { margin-right: 4px; }
.pause-pips i { width: 10px; height: 10px; border-radius: 50%; background: rgba(176, 138, 112, .3); }
.pause-pips i.on { background: var(--green-l); box-shadow: 0 0 0 2px rgba(139, 211, 43, .25); }
.pause-resume { margin-top: 22px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer;
  font: 700 17px var(--font); color: #fff; padding: 14px 18px; border-radius: 16px; background: linear-gradient(180deg, #57B81A, var(--green-d)); box-shadow: 0 5px 0 #1F5A04; transition: transform .08s, filter .15s; }
.pause-resume:hover { filter: brightness(1.07); }
.pause-resume:active { transform: translateY(2px); box-shadow: 0 3px 0 #1F5A04; }
.pause-resume:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.pause-resume kbd { font: 700 11px var(--font); color: var(--green-d); background: #fff; border-radius: 6px; padding: 3px 7px; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
@keyframes pauseFade { from { opacity: 0; } }
@keyframes pauseIn { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@keyframes pauseRing { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pause-ov, .pause-card, .pause-icon::after { animation: none; } .pt-bar i { transition: none; } }

/* ---------- match over (modern glass card) ---------- */
#over.over-ov { background: radial-gradient(ellipse at 50% 40%, rgba(42, 20, 12, .25), rgba(42, 20, 12, .7)); -webkit-backdrop-filter: blur(6px) saturate(.8); backdrop-filter: blur(6px) saturate(.8); animation: pauseFade .25s ease-out; }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.over-card { position: relative; z-index: 1; width: min(460px, 100%); margin: auto; text-align: center; padding: 26px 26px 22px; border-radius: 32px;
  background: linear-gradient(180deg, rgba(255, 250, 243, .93), rgba(255, 240, 220, .88)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .75); box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 34px 80px rgba(40, 12, 4, .45);
  animation: overIn .5s cubic-bezier(.18, 1.2, .35, 1) both; }
.over-card.lose { animation-name: overInLose; }
.over-emblem { position: relative; width: 120px; height: 120px; margin: -76px auto 4px; display: grid; place-items: center; }
.over-emblem .rays { position: absolute; inset: -40px; border-radius: 50%; opacity: .9;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 63, .55) 0 10deg, rgba(255, 210, 63, 0) 10deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%); animation: raysSpin 14s linear infinite; }
.emb-hex { position: relative; width: 104px; height: 116px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(#FFF6D0, #C9A23A); display: grid; place-items: center; animation: embPop .6s .15s cubic-bezier(.2, 1.6, .4, 1) both; }
.emb-hex span { width: 92px; height: 104px; clip-path: inherit; display: grid; place-items: center; font-size: 46px; background: radial-gradient(circle at 40% 30%, #FFE680, #E89A10); text-shadow: 0 3px 0 rgba(0,0,0,.15); }
.over-title { margin: 6px 0 0; font-size: 54px; font-weight: 800; letter-spacing: -1px; line-height: 1;
  background: linear-gradient(180deg, #62C622, #2C7A08); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(31, 90, 4, .25)); }
.over-reason { margin: 8px 0 0; font-size: 14.5px; font-weight: 600; color: #7A5440; }

.over-card.lose .rays { display: none; }
.over-card.lose .emb-hex { background: linear-gradient(#F2E2DA, #9A6A5A); }
.over-card.lose .emb-hex span { background: radial-gradient(circle at 40% 30%, #E86A4A, #8A2A18); filter: grayscale(.2); }
.over-card.lose .over-title { background-image: linear-gradient(180deg, #F0623C, #A8240E); filter: drop-shadow(0 3px 0 rgba(122, 26, 8, .22)); }
.over-card.draw .rays { background: repeating-conic-gradient(from 0deg, rgba(255, 176, 59, .45) 0 10deg, rgba(255, 176, 59, 0) 10deg 24deg); }
.over-card.draw .emb-hex span { background: radial-gradient(circle at 40% 30%, #FFC870, #E8752A); }
.over-card.draw .over-title { background-image: linear-gradient(180deg, #FFB03B, #D8601A); }

.over-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 20px 0 0; }
.ov-p { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 2px rgba(240, 210, 180, .8); text-align: left; min-width: 0; }
.ov-p.won { box-shadow: inset 0 0 0 2px #E0B400, 0 6px 18px rgba(224, 180, 0, .25); background: linear-gradient(180deg, #FFFBEA, #FFF1C2); }
.ov-p img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #5865F2; flex: none; }
.ov-p.side0 img { box-shadow: 0 0 0 3px var(--green-l); } .ov-p.side1 img { box-shadow: 0 0 0 3px var(--blue); }
.ov-p > div { min-width: 0; flex: 1; }
.ov-p b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.ov-p b em { font-style: normal; font-size: 9.5px; font-weight: 800; color: #fff; background: var(--green); padding: 1px 5px; border-radius: 5px; vertical-align: 2px; }
.ov-p small { display: block; font-size: 11px; font-weight: 600; color: #9A7A64; margin-top: 2px; }
.ov-hp { display: block; height: 6px; border-radius: 4px; background: rgba(176, 138, 112, .22); overflow: hidden; margin-top: 5px; }
.ov-hp i { display: block; height: 100%; border-radius: inherit; }
.side0 .ov-hp i { background: var(--green-l); } .side1 .ov-hp i { background: var(--blue); }
.crown { position: absolute; top: -14px; left: 14px; font-size: 22px; transform: rotate(-14deg); animation: crownDrop .5s .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.ov-vs { font-weight: 800; font-size: 13px; color: var(--red); }

.over-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.over-stats div { padding: 10px 6px; border-radius: 14px; background: rgba(255, 233, 199, .6); }
.over-stats dt { font-size: 11px; font-weight: 600; color: #9A7A64; }
.over-stats dd { margin: 2px 0 0; font-size: 18px; font-weight: 800; color: var(--brown); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.over-payout { margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; font-size: 13.5px; font-weight: 600; }
.over-payout.gain { background: linear-gradient(180deg, #EAF8D8, #DDF3C2); color: var(--green-d); box-shadow: inset 0 0 0 2px #CDE8B0; }
.over-payout.info { background: #FFF1DC; color: #8A5A40; }
.over-payout.warn { background: #FFE1D8; color: #B22A12; }
.po-amt { font-size: 22px; font-weight: 800; }
.over-payout a { color: inherit; font-weight: 700; flex-basis: 100%; }
.over-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.over-actions .btn { width: 100%; }

@keyframes overIn { from { opacity: 0; transform: translateY(30px) scale(.9); } }
@keyframes overInLose { 0% { opacity: 0; transform: translateY(-14px); } 60% { opacity: 1; transform: translateY(4px); } 75% { transform: translateX(-5px); } 88% { transform: translateX(4px); } 100% { transform: none; } }
@keyframes embPop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
@keyframes raysSpin { to { transform: rotate(360deg); } }
@keyframes crownDrop { from { transform: translateY(-16px) rotate(-14deg); opacity: 0; } }
@media (max-width: 480px) { .over-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .over-title { font-size: 44px; } .over-vs { grid-template-columns: 1fr; } .ov-vs { display: none; } }
@media (max-height: 560px) { .over-emblem { width: 80px; height: 80px; margin-top: -40px; } .emb-hex { width: 72px; height: 80px; } .emb-hex span { width: 63px; height: 71px; font-size: 32px; } .over-title { font-size: 40px; } .over-card { padding-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .over-card, .emb-hex, .crown, .over-emblem .rays, #over.over-ov { animation: none !important; } }
.ov-p b { display: flex; align-items: center; gap: 5px; }
.ov-p b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-p b em { flex: none; }
.over-stats dd.long { font-size: 14px; line-height: 25px; }
.ov-p b { overflow: visible; white-space: normal; }
.over-stats dd.long { font-size: 12.5px; letter-spacing: -.2px; text-overflow: clip; }
/* age tile gets extra room so the full age name always shows */
.over-stats { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.over-stats dd, .over-stats dd.long { overflow: visible; text-overflow: clip; }
.over-stats dd.long { font-size: 16px; letter-spacing: -.2px; line-height: 27px; }
@media (max-width: 480px) { .over-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- share result ---------- */
.share-btn { margin-top: 10px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  font: 700 15px var(--font); color: #5865F2; background: rgba(88, 101, 242, .1); padding: 11px 16px; border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(88, 101, 242, .25); transition: background .15s; }
.share-btn:hover { background: rgba(88, 101, 242, .18); }
.share-btn[aria-expanded="true"] { background: #5865F2; color: #fff; box-shadow: none; }
.share-panel { margin-top: 12px; animation: pauseFade .2s ease-out; }
.share-preview { border-radius: 16px; overflow: hidden; background: rgba(255, 233, 199, .6); aspect-ratio: 1200 / 630; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(70, 20, 0, .15); }
.share-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.share-skel { font-size: 13px; font-weight: 600; color: #9A7A64; padding: 12px; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 10px; }
.share-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 0; border-radius: 14px; cursor: pointer; font: 700 12px var(--font); color: #fff; transition: transform .08s, filter .15s; }
.share-grid button:hover { filter: brightness(1.08); }
.share-grid button:active { transform: translateY(1px); }
.sh-discord { background: #5865F2; } .sh-x { background: #111418; } .sh-facebook { background: #1877F2; } .sh-reddit { background: #FF4500; }
.sh-whatsapp { background: #25D366; } .sh-telegram { background: #27A7E7; } .sh-plain { background: #fff !important; color: #6A4A38 !important; box-shadow: inset 0 0 0 2px #F0D2B4; }
#over.over-ov { padding-top: 84px; padding-bottom: 24px; }
.share-preview { width: min(100%, 340px); margin: 0 auto; }