/* 2GETHER — black & gold theme. --accent can be overridden per shop (admin → ตั้งค่า → แบรนด์ร้าน). */
:root {
  --accent: #d4af37;
  --bg: #0a0907;
  --surface: #15130f;
  --surface-2: #1e1b15;
  --line: #2f2a20;
  --text: #f6f0e1;
  --muted: #a69c86;
  --ok: #7fc99a;
  --danger: #e07a6b;
  --gold-hi: color-mix(in srgb, var(--accent) 40%, #fff8e0);
  --gold-lo: color-mix(in srgb, var(--accent) 60%, #000);
  --grad: linear-gradient(135deg, var(--gold-hi) 0%, var(--accent) 48%, var(--gold-lo) 100%);
  --on-accent: #1a1408;
  --glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --radius: 22px;
  --nav-h: 86px;
  --serif: 'Playfair Display', 'Noto Serif Thai', Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: 'Prompt', 'Noto Sans Thai', system-ui, sans-serif;
  font-weight: 300;
  font-size: 15px;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}
b, strong, h1, h2, h3 { font-weight: 500; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: var(--text); }
a { color: inherit; }
.hidden { display: none !important; }
.serif { font-family: var(--serif); }
.gold-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px); }
.page { animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- home header ---------- */
.hero {
  height: 224px; position: relative; overflow: hidden; background-size: cover; background-position: center;
  background-image:
    radial-gradient(ellipse at 20% 0%, var(--glow), transparent 60%),
    radial-gradient(ellipse at 90% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #1b160c, #0a0907);
}
.hero.has-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,7,.15), rgba(10,9,7,.75)); }
.hero h1 { position: absolute; left: 22px; right: 22px; top: 58px; margin: 0; z-index: 1; font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.2; letter-spacing: .3px; }
.hero-tag { position: absolute; left: 22px; top: 22px; z-index: 2; font-weight: 300; font-size: 11.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.hero-actions { position: absolute; right: 14px; top: 14px; display: flex; gap: 8px; z-index: 2; }
.pill { background: rgba(10,9,7,.55); backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 400; }
.sheet-top { margin-top: -54px; position: relative; z-index: 3; background: var(--bg); border-radius: 40px 40px 0 0; padding: 58px 22px 6px; text-align: center; }
.sheet-top::before { content: ''; position: absolute; left: 22%; right: 22%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.logo {
  position: absolute; left: 50%; top: -38px; transform: translateX(-50%);
  width: 80px; height: 80px; border-radius: 50%; background: #0f0d09; overflow: hidden;
  display: grid; place-items: center; font-family: var(--serif); font-size: 26px; font-weight: 700;
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 6px var(--bg), 0 0 0 7px color-mix(in srgb, var(--accent) 40%, transparent), 0 10px 30px var(--glow);
}
.logo img { width: 100%; height: 100%; object-fit: cover; }
.bar-name { font-family: var(--serif); font-size: 24px; font-weight: 600; margin: 0; letter-spacing: .3px; }
.bar-country { color: var(--muted); font-size: 12px; margin-top: 4px; letter-spacing: 3px; text-transform: uppercase; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: 10px; margin: 10px auto 0; width: 120px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.divider::after { transform: scaleX(-1); }

.free-banner {
  margin: 18px 22px 0; border-radius: 18px; padding: 12px 16px; display: flex; align-items: center; gap: 14px;
  background: linear-gradient(100deg, #1c170d, #2a2312 50%, #1c170d); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  text-align: left; width: calc(100% - 44px); position: relative; overflow: hidden;
}
.free-banner::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; background: linear-gradient(90deg, transparent, rgba(255,240,200,.18), transparent); animation: shine 3.5s infinite; }
@keyframes shine { 60%, 100% { left: 110%; } }
.free-banner .badge { width: 46px; height: 46px; border-radius: 50%; background: var(--grad); color: var(--on-accent); display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 12px; font-style: italic; flex: none; }
.free-banner b { display: block; font-size: 16px; }
.free-banner small { font-size: 12.5px; color: var(--muted); }
.free-banner .count { font-variant-numeric: tabular-nums; color: var(--gold-hi); font-weight: 500; }
.free-banner.off { border-color: var(--line); }
.free-banner.off .badge { background: var(--surface-2); color: var(--muted); }
.free-banner.off::after { display: none; }

.section-title { display: flex; align-items: baseline; justify-content: space-between; padding: 22px 22px 0; }
.section-title h3 { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.section-title span { color: var(--muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 22px 0; }
.tile {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; text-align: left;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    linear-gradient(160deg, #1b1810, #0f0d09);
  transition: transform .15s, border-color .2s;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 14px;
}
.tile:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.tile:active { transform: scale(.97); }
.tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 70%, transparent), transparent 40%, transparent 70%, color-mix(in srgb, var(--accent) 35%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.tile .art { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 46%; max-width: 92px; aspect-ratio: 1; color: var(--accent); filter: drop-shadow(0 6px 18px var(--glow)); }
.tile .art svg { width: 100%; height: 100%; }
.tile .plus { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); color: var(--accent); display: grid; place-items: center; font-size: 18px; line-height: 1; }
.tile .new { position: absolute; right: 10px; top: 10px; background: var(--grad); color: var(--on-accent); border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 600; letter-spacing: 1px; }
.tile .label { position: relative; font-weight: 500; font-size: 15px; line-height: 1.25; }
.tile .sub { position: relative; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.tile .from { position: relative; color: var(--gold-hi); font-size: 12px; margin-top: 2px; }

.queue-strip { margin: 16px 22px 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.queue-strip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 1.4s infinite; flex: none; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- bottom navigation ---------- */
.nav {
  position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(456px, calc(100% - 20px)); height: 64px; z-index: 30;
  background: rgba(16,14,10,.92); backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
}
.nav button { height: 100%; display: grid; place-items: center; color: #6f6656; position: relative; }
.nav button.active { color: var(--accent); }
.nav button.active::after { content: ''; position: absolute; bottom: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.nav .center span {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--on-accent); font-size: 32px; font-weight: 300;
  background: var(--grad); box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px color-mix(in srgb, var(--accent) 50%, transparent), 0 8px 26px var(--glow);
}
.nav .badge-dot { position: absolute; top: 15px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* ---------- generic page chrome ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: rgba(10,9,7,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar h2 { flex: 1; text-align: center; margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 600; padding-right: 34px; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); }
.section { padding: 0 20px; }
.label { color: var(--muted); font-size: 12.5px; letter-spacing: .5px; margin: 20px 0 8px; display: flex; justify-content: space-between; align-items: center; }
.field { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 6px 8px 6px 14px; min-height: 50px; transition: border-color .2s; }
.field:focus-within { border-color: var(--accent); }
.field input, .field textarea { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 15px; padding: 8px 4px; }
.field.box { align-items: flex-start; }
.field textarea { resize: none; min-height: 72px; }
.platform { position: relative; display: flex; align-items: center; gap: 4px; padding-right: 10px; border-right: 1px solid var(--line); font-size: 18px; }
.platform select { position: absolute; inset: 0; opacity: 0; width: 100%; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
.chip.on { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); color: var(--gold-hi); }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 4px; margin-top: 18px; }
.seg button { padding: 10px; border-radius: 12px; color: var(--muted); font-size: 14px; }
.seg button.on { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--gold-hi); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 12px; }
.btn-white { background: var(--text); color: var(--on-accent); border-radius: 999px; padding: 7px 16px; font-weight: 500; font-size: 13.5px; text-decoration: none; display: inline-block; }
.btn { width: 100%; background: var(--grad); color: var(--on-accent); border-radius: 999px; padding: 14px; font-weight: 600; font-size: 16px; box-shadow: 0 8px 26px var(--glow); letter-spacing: .3px; }
.btn:disabled { opacity: .45; box-shadow: none; }
.btn.ghost { background: var(--surface-2); color: var(--text); box-shadow: none; border: 1px solid var(--line); font-weight: 400; }
.upload { border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-radius: 20px; padding: 16px; display: flex; align-items: center; gap: 14px; margin-top: 14px; width: 100%; text-align: left; }
.upload .ic { width: 50px; height: 50px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); display: grid; place-items: center; color: var(--accent); flex: none; }
.preview { margin-top: 12px; border-radius: 18px; overflow: hidden; position: relative; background: #000; }
.preview img, .preview video { width: 100%; max-height: 300px; object-fit: contain; display: block; }
.preview .x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.7); }
.variant { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; }
.variant .thumb { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--accent); color: var(--gold-hi); display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 500; }
.price { font-weight: 500; font-size: 17px; color: var(--gold-hi); }
.check { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14.5px; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }
.coupon { border: 1px dashed var(--line); border-radius: 18px; padding: 12px 14px; width: 100%; text-align: left; margin-top: 14px; }
.secure { color: var(--text); font-size: 12.5px; display: flex; gap: 4px; align-items: center; }
.paybar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(480px, 100%); z-index: 35; display: flex; gap: 12px; align-items: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
.paybar .sum { flex: none; max-width: 40%; }
.paybar .sum b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paybar .btn { flex: 1; font-size: 17px; }
body.checkout .nav { display: none; }
body.checkout #app { padding-bottom: 110px; }

/* ---------- sheets / modals ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
.overlay.center { align-items: center; padding: 20px; }
.sheet { width: min(480px, 100%); max-height: 86dvh; overflow: auto; background: #13110d; border: 1px solid var(--line); border-bottom: 0; border-radius: 26px 26px 0 0; padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); animation: up .25s ease; }
.overlay.center .sheet { border-radius: 26px; border-bottom: 1px solid var(--line); }
@keyframes up { from { transform: translateY(40px); } }
.sheet h3 { margin: 0 0 12px; font-size: 17px; display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); }
.opt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); margin-bottom: 8px; text-align: left; background: var(--surface); }
.opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.opt .logo-sq, .logo-sq { width: 44px; height: 44px; border-radius: 12px; background: #fff; color: #0b3d91; font-weight: 800; font-size: 10px; display: grid; place-items: center; flex: none; line-height: 1.1; text-align: center; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--gold-hi); margin-left: 6px; }
.qr { width: 220px; height: 220px; margin: 10px auto; background: #fff; border-radius: 14px; padding: 12px; }
.qr canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 80; background: #1e1a12; border: 1px solid var(--accent); padding: 10px 16px; border-radius: 14px; font-size: 14px; max-width: 90%; animation: up .2s; }

/* ---------- order timeline ---------- */
.order-hero { text-align: center; padding: 28px 20px 8px; }
.order-hero .ring { width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 38px; border: 1px solid var(--accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 40px var(--glow); }
.order-hero h2 { font-family: var(--serif); margin: 0 0 4px; font-size: 22px; }
.eta { font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 6px; }
.timeline { list-style: none; margin: 18px 0 0; padding: 0 0 0 4px; }
.timeline li { position: relative; padding: 0 0 18px 34px; color: var(--muted); font-size: 14px; }
.timeline li::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 1px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline .dot { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); }
.timeline li.done { color: var(--text); }
.timeline li.done .dot { background: var(--accent); border-color: var(--accent); }
.timeline li.done::before { background: var(--accent); }
.timeline li.now { color: var(--gold-hi); }
.timeline li.now .dot { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); animation: pulse 1.4s infinite; }
.timeline li.fail .dot { background: var(--danger); border-color: var(--danger); }
.timeline small { display: block; color: var(--muted); font-size: 12px; }
.bar-progress { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 8px; }
.bar-progress i { display: block; height: 100%; background: var(--grad); transition: width .5s linear; }

/* ---------- feed / ranking ---------- */
.rank-head { padding: 22px 20px 16px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 50% 0, var(--glow), transparent 70%); }
.rank-head h2 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 34px; letter-spacing: 2px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; margin-top: 16px; align-items: end; }
.podium .p { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px 6px; text-align: center; font-size: 12px; color: var(--muted); }
.podium .p b { display: block; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 4px 0 2px; }
.podium .p .medal { font-family: var(--serif); font-size: 20px; }
.podium .p.first { padding: 16px 6px; border-color: var(--accent); box-shadow: 0 0 22px var(--glow); }
.podium .p.first .medal { font-size: 26px; }
.podium .p.empty { opacity: .35; }
.post { border-bottom: 1px solid var(--line); padding: 14px 0 12px; }
.post-head { padding: 0 16px 10px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 500; flex: none; background: var(--grad); color: var(--on-accent); font-family: var(--serif); }
.post-frame { position: relative; user-select: none; -webkit-user-select: none; }
.post-media { width: 100%; background: #000; display: block; max-height: 520px; object-fit: contain; }
.skeleton { min-height: 280px; background: linear-gradient(100deg, #15130f 30%, #221e16 50%, #15130f 70%); background-size: 300% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.post-text { margin: 0 16px; min-height: 200px; border-radius: 20px; display: grid; place-items: center; text-align: center; padding: 28px; font-family: var(--serif); font-size: 22px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: radial-gradient(circle at 50% 0, var(--glow), transparent 70%), var(--surface); }
.pop-heart { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; color: #fff; filter: drop-shadow(0 4px 18px rgba(0,0,0,.5)); animation: heart .9s ease forwards; }
@keyframes heart { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(1.2); opacity: 1; } 45% { transform: scale(.95); } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1) translateY(-20px); opacity: 0; } }
.post-actions { display: flex; gap: 20px; padding: 10px 16px 4px; font-size: 14.5px; }
.post-actions button { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.post-actions button svg { width: 22px; height: 22px; }
.post-actions .liked { color: #e05a6b; }
.post-actions .liked svg { animation: bump .3s; }
@keyframes bump { 50% { transform: scale(1.3); } }
.post-cap { padding: 2px 16px; font-size: 14px; }
.repost-tag { padding: 0 16px 8px; font-size: 12px; color: var(--muted); }
.empty { text-align: center; padding: 50px 30px; color: var(--muted); }
.empty .big { font-size: 46px; }

/* ---------- swipe ---------- */
.swipe-wrap { height: calc(100dvh - 190px); min-height: 440px; display: grid; place-items: center; position: relative; padding: 0 26px; }
.swipe-card { position: absolute; width: calc(100% - 52px); height: 92%; max-height: 560px; border-radius: 28px; overflow: hidden; background: #1a1712; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.6); touch-action: none; user-select: none; transition: transform .3s ease, opacity .3s; }
.swipe-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.swipe-card .face { width: 100%; height: 100%; display: grid; place-items: center; font-size: 120px; }
.swipe-card .info { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 18px 90px; background: linear-gradient(transparent, rgba(0,0,0,.88)); }
.swipe-card .info b { font-size: 20px; font-family: var(--serif); }
.swipe-btns { position: absolute; left: 18px; right: 18px; bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.swipe-btns button { height: 52px; border-radius: 18px; background: rgba(20,18,14,.85); border: 1px solid var(--line); backdrop-filter: blur(6px); font-size: 24px; }
.swipe-btns [data-yes] { border-color: var(--accent); }
.stamp { position: absolute; top: 28px; padding: 6px 14px; border: 3px solid; border-radius: 10px; font-weight: 700; font-size: 26px; opacity: 0; transform: rotate(-12deg); }
.stamp.like { left: 22px; color: var(--accent); }
.stamp.nope { right: 22px; color: var(--danger); transform: rotate(12deg); }
.hearts { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--accent); border-radius: 999px; padding: 4px 12px; font-size: 14px; }

/* ---------- chat ---------- */
.chat-list { padding: 10px 14px 90px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 78%; padding: 9px 13px; border-radius: 18px; background: var(--surface-2); font-size: 14.5px; word-break: break-word; }
.msg .who { font-size: 11.5px; color: var(--accent); margin-bottom: 2px; }
.msg.me { align-self: flex-end; background: var(--grad); color: var(--on-accent); }
.msg.me .who { display: none; }
.chat-input { position: fixed; left: 50%; transform: translateX(-50%); width: min(480px, 100%); bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding: 8px 14px; display: flex; gap: 8px; background: var(--bg); z-index: 25; }
.chat-input input { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; outline: none; }
.chat-input button { width: 46px; border-radius: 50%; background: var(--grad); color: var(--on-accent); font-size: 18px; }

/* ---------- games ---------- */
.games-bg { min-height: 100dvh; background: radial-gradient(ellipse at 50% 0, var(--glow), transparent 55%), var(--bg); }
.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 18px; }
.game-card { border-radius: 22px; padding: 14px; min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; border: 1px solid var(--line); background: radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), var(--surface); }
.game-card .emo { font-size: 44px; }
.game-card .cat { font-size: 11px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; align-self: flex-start; color: var(--muted); }
.game-card b { font-size: 15px; }
.game-card .play { margin-top: 8px; background: var(--grad); color: var(--on-accent); border-radius: 999px; padding: 7px; text-align: center; font-weight: 500; font-size: 13px; }
.game-stage { padding: 20px; text-align: center; }
.wheel { width: 290px; height: 290px; margin: 20px auto; border-radius: 50%; position: relative; border: 5px solid var(--accent); box-shadow: 0 0 30px var(--glow); transition: transform 4s cubic-bezier(.17,.67,.12,.99); }
.wheel-pointer { width: 0; height: 0; margin: 0 auto -30px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid var(--gold-hi); position: relative; z-index: 2; }
.bottle { font-size: 130px; display: inline-block; margin: 40px 0; transition: transform 3s cubic-bezier(.2,.8,.2,1); }
.big-result { font-size: 26px; font-weight: 500; min-height: 40px; margin: 10px 0; }
.dice { font-size: 90px; display: inline-block; margin: 26px 10px; }
.dice.roll { animation: roll .6s linear infinite; }
@keyframes roll { to { transform: rotate(360deg); } }
.play-card { width: 220px; height: 310px; margin: 24px auto; border-radius: 22px; display: grid; place-items: center; padding: 22px; font-size: 21px; font-weight: 500; background: radial-gradient(circle at 50% 0, var(--glow), transparent 70%), #17140e; border: 1px solid var(--accent); box-shadow: 0 16px 30px rgba(0,0,0,.5); }
.play-card.back { background: repeating-linear-gradient(45deg, #1d190f 0 10px, #251f12 10px 20px); font-size: 48px; }

/* ---------- profile ---------- */
.profile-head { text-align: center; padding: 26px 20px 10px; }
.profile-head .avatar { width: 84px; height: 84px; font-size: 32px; margin: 0 auto 10px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px 20px; }
.stats .card { text-align: center; padding: 12px 6px; }
.stats b { display: block; font-size: 20px; color: var(--gold-hi); }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.status { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); flex: none; }
.status.pending { color: #e9c46a; } .status.queued { color: #9ecbd6; } .status.playing { color: var(--ok); } .status.done { color: var(--muted); } .status.rejected { color: var(--danger); }

/* ---------- promo popup ---------- */
.promo { width: min(320px, 92%); border-radius: 28px; padding: 24px 18px; text-align: center; background: radial-gradient(circle at 50% 0, var(--glow), transparent 65%), #14110c; border: 1px solid var(--accent); position: relative; animation: up .3s; }
.promo h2 { font-family: var(--serif); font-weight: 700; font-size: 36px; line-height: 1; margin: 8px 0; }
.promo .g6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.promo .g6 div { aspect-ratio: 1; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 28px; }
.promo .close { position: absolute; right: -6px; top: -42px; font-size: 22px; width: 36px; height: 36px; }

/* ---------- language switch ---------- */
.lang { display: flex; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; overflow: hidden; background: rgba(10,9,7,.55); backdrop-filter: blur(8px); }
.lang button { padding: 5px 10px; font-size: 12px; color: var(--muted); }
.lang button.on { background: var(--grad); color: var(--on-accent); font-weight: 600; }