/* ── The Room ── (builds on styles.css) */
.room { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 18px 30px; }
.room .screen { margin: 30px auto 0; }
.gate h1 { margin-bottom: 14px; }
.stack { display: grid; gap: 10px; max-width: 380px; margin: 0 auto; }
.stack input { width: 100%; }
.stack input[name="code"] { text-transform: uppercase; letter-spacing: .12em; text-align: center; }
.linkish { background: none; border: 0; color: var(--faint); font: inherit; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--muted); }
.fine a { color: var(--muted); }

.drop-card { margin: 10px 0 22px; padding: 20px 20px 18px; border: 1px solid #3a3a3f; border-radius: 10px; background: linear-gradient(160deg, #18181b, #0e0e10); box-shadow: 0 0 24px rgba(255,255,255,.05); animation: rise .6s ease both; }
.drop-eyebrow { margin: 0 0 6px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.drop-card h2 { margin: 0 0 6px; font-family: var(--serif); font-weight: 600; font-size: 32px; font-variant-numeric: lining-nums; }
.drop-status { margin: 0; color: #c9c6bf; }
.drop-date { margin: 8px 0 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.drop-link { display: inline-block; margin-top: 14px; padding: 12px 18px; background: var(--silver); color: #0a0a0b; border-radius: 4px; text-decoration: none; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.drop-link:hover { box-shadow: 0 0 18px var(--glow); }

.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 10px 12px; cursor: pointer; margin-bottom: -1px; }
.tab.on { color: var(--silver); border-bottom-color: var(--silver); }

.post { padding: 18px 0 20px; border-bottom: 1px solid #1f1f23; animation: rise .5s ease both; }
.post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.post-by { display: inline-flex; align-items: center; gap: 6px; color: var(--silver); letter-spacing: .1em; text-transform: uppercase; }
.rings.tiny { width: 24px; height: 12px; }
.pin { margin-left: auto; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; border: 1px solid #3a3a3f; padding: 1px 8px; border-radius: 999px; }
.post-body { font-family: var(--serif); font-size: 21px; line-height: 1.45; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.post-img { display: block; width: 100%; height: auto; margin-top: 12px; border-radius: 6px; border: 1px solid #222226; background: #111; }
.post-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.heart { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: inherit; font-size: 13px; padding: 4px 12px; cursor: pointer; }
.heart[aria-pressed="true"] { color: #fff; border-color: #77777c; }
.heart[aria-pressed="true"] .h-icon { color: #e9e9ec; }
.replies { list-style: none; margin: 12px 0 0; padding: 0 0 0 12px; border-left: 1px solid #222226; }
.replies:empty { display: none; }
.replies li { padding: 6px 0; font-size: 13.5px; line-height: 1.5; color: #c9c6bf; overflow-wrap: anywhere; }
.replies .who { color: var(--silver); font-weight: 500; margin-right: 6px; }
.replies .staff .who { font-family: var(--serif); font-weight: 700; letter-spacing: .1em; }
.replies .when { color: var(--faint); font-size: 11px; margin-left: 6px; }
.replies .del { background: none; border: 0; color: var(--faint); font: inherit; font-size: 11px; cursor: pointer; margin-left: 6px; text-decoration: underline; }
.reply-form { display: flex; gap: 8px; margin-top: 12px; }
.reply-form input { padding: 9px 12px; font-size: 14px; }
.reply-form button { min-height: 40px; padding: 0 14px; font-size: 11px; }
.empty { color: var(--muted); text-align: center; padding: 30px 0; }

.req-form { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 20px; }
.req-lead { margin: 0; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--silver); }
.req-form textarea { width: 100%; background: #0b0b0c; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; outline: none; }
.req-form textarea:focus { border-color: #8a8a90; }
.req-form .msg { margin: 0; }
.reqs { list-style: none; margin: 0; padding: 0; }
.req { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid #1f1f23; }
.vote { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 56px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.vote b { font-size: 16px; color: var(--silver); font-weight: 500; }
.vote[aria-pressed="true"] { border-color: #8a8a90; color: #fff; background: #ffffff0a; }
.req-title { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.req-detail { margin: 4px 0 0; font-size: 13px; color: #c9c6bf; overflow-wrap: anywhere; }
.req-meta { margin: 6px 0 0; font-size: 11px; color: var(--faint); letter-spacing: .06em; }
.status { display: inline-block; margin-left: 6px; padding: 0 8px; border: 1px solid #3a3a3f; border-radius: 999px; text-transform: uppercase; letter-spacing: .14em; font-size: 9.5px; color: var(--muted); }
.status.s-considering { color: #e8dcb0; border-color: #5a5238; }
.status.s-in-the-works { color: #b9d6ff; border-color: #34465f; }
.status.s-made { color: var(--ok); border-color: #3f5a41; }
.signout { text-align: center; margin: 30px 0 0; }
@media (max-width: 560px) { .post-body { font-size: 19px; } .drop-card h2 { font-size: 28px; } }

/* rules + ban + admin shortcut */
.rules { text-align: left; border: 1px solid #3a2a2a; background: #120d0d; border-radius: 8px; padding: 14px 16px; }
.rules-title { margin: 0 0 6px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--err); }
.rules-lead { margin: 0 0 8px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--silver); }
.rules ul { margin: 0; padding-left: 18px; color: #c9c6bf; font-size: 12.5px; line-height: 1.55; }
.rules li { margin: 4px 0; }
.rules b { color: #fff; font-weight: 500; }
.agree { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 12.5px; color: #c9c6bf; cursor: pointer; }
.agree input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; padding: 0; accent-color: #d9d9dc; }
.rules-inside { margin-top: 26px; }
.rules-inside summary { cursor: pointer; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); list-style: none; }
.rules-inside summary::-webkit-details-marker { display: none; }
.rules-inside[open] summary { margin-bottom: 10px; color: var(--err); }
.admin-link { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--err); text-decoration: none; border: 1px solid #6a3a36; padding: 6px 10px; border-radius: 999px; }

/* invites */
.invite-card { margin: 0 0 22px; padding: 18px 20px; border: 1px solid #5c5a54; border-radius: 10px; background: linear-gradient(160deg, #19180f22, #0e0e10); }
.invite-lead { margin: 0 0 12px; color: #c9c6bf; font-size: 13.5px; }
.invite-card .ghost { margin: 0; }
.invite-code .code { margin: 6px 0 10px; font-size: 24px; }
.invite-card .lock-ic path, .invite-card .lock-ic rect { stroke: #d6c496; }
/* locked reveal */
.locked-wrap { position: relative; margin-top: 4px; border-radius: 6px; overflow: hidden; border: 1px solid #2a2a2e; min-height: 220px; background: radial-gradient(circle at 50% 40%, #222226, #0c0c0e); }
.locked-preview { display: block; width: 100%; height: 280px; object-fit: cover; filter: blur(22px) brightness(.7) saturate(.8); transform: scale(1.2); }
.locked-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; background: rgba(0,0,0,.25); }
.lock-ic.big { width: 26px; height: 30px; margin-bottom: 6px; }
.lock-ic.big path, .lock-ic.big rect { fill: none; stroke: #f2f2f2; stroke-width: 1.4; }
.locked-when { margin: 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #e9e9ec; }
.locked-count { margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 600; color: #fff; font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 0 14px rgba(255,255,255,.4); }
.post.is-locked .post-body { margin-top: 12px; font-style: italic; color: var(--silver); }
/* polls */
.poll { display: grid; gap: 8px; margin-top: 12px; }
.poll-opt { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid #3a3a3f; border-radius: 6px; background: #0d0d0f; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; overflow: hidden; }
.poll-opt:hover { border-color: #8a8a90; }
.poll-opt .bar { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.08); width: 0; transition: width .6s ease; }
.poll-opt.mine { border-color: #d6c496; }
.poll-opt.mine .bar { background: rgba(214,196,150,.18); }
.poll-opt span { position: relative; }
.poll-opt .pct { color: var(--muted); font-size: 12px; }
.poll-meta { font-size: 11px; color: var(--faint); letter-spacing: .08em; }
.poll.closed .poll-opt { cursor: default; }
.poll-opt:disabled { opacity: 1; cursor: default; }
.poll-opt i.bar { font-style: normal; }

/* login pitch */
.gate-claim { margin: 0 auto 14px; max-width: 460px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.3; color: #e6d9b4; }
.gate-copy { max-width: 440px; margin: 0 auto 26px; padding: 16px 0 14px; border-top: 1px solid #2a2a2e; border-bottom: 1px solid #2a2a2e; }
.gate-copy p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: #c9c6bf; }
.gate-copy .gate-kicker { margin: 4px 0 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--silver); }

/* assigned Ring title */
.ring-lead { margin-bottom: 6px; }
.ring-title { margin: 0 0 14px; color: #f3e9c8; text-shadow: 0 0 22px rgba(214, 196, 150, .35); font-variant-numeric: lining-nums; }

/* special edition card */
.se-card { margin: 0 0 22px; padding: 20px; border: 1px solid #6a5f43; border-radius: 10px; background: linear-gradient(160deg, #1b180f, #0e0e10 70%); box-shadow: 0 0 28px rgba(214, 196, 150, .08); }
.se-card .drop-eyebrow { color: #d6c496; }
.se-card h2 { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.1; font-variant-numeric: lining-nums; }
.se-ring { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.se-ring span { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.se-ring b { font-family: var(--serif); font-size: 22px; font-weight: 600; color: #f3e9c8; font-variant-numeric: lining-nums; }
.se-count { margin: 0 0 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #e6d9b4; font-variant-numeric: tabular-nums; }
.se-text { margin: 0 0 12px; font-size: 13.5px; color: #c9c6bf; }
.se-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.se-sizes:empty { display: none; }
.se-size { min-width: 48px; height: 40px; padding: 0 12px; border: 1px solid #3a3a3f; border-radius: 6px; background: #0d0d0f; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.se-size:hover { border-color: #8a8a90; }
.se-size[aria-checked="true"] { border-color: #d6c496; background: #d6c4961a; color: #fff; }
.se-buy { border: 0; cursor: pointer; font: inherit; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.se-buy[disabled] { opacity: .45; cursor: default; }
.se-card .msg { margin-top: 8px; }

/* special edition photos + details */
.se-gallery { position: relative; margin: 2px 0 16px; }
.se-main { display: block; width: 100%; padding: 0; border: 1px solid #2a2a2e; border-radius: 8px; overflow: hidden; background: #0b0b0c; cursor: zoom-in; aspect-ratio: 4 / 5; }
.se-main img { display: block; width: 100%; height: 100%; object-fit: cover; }
.se-arrow { position: absolute; top: calc(50% - 40px); width: 38px; height: 38px; border-radius: 50%; border: 1px solid #ffffff33; background: rgba(10,10,11,.55); color: #fff; font: inherit; font-size: 24px; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); }
.se-gallery .se-arrow.prev { left: 10px; } .se-gallery .se-arrow.next { right: 10px; }
.se-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.se-thumbs button { flex: none; width: 56px; height: 56px; padding: 0; border: 1px solid #2a2a2e; border-radius: 6px; overflow: hidden; background: none; cursor: pointer; opacity: .6; }
.se-thumbs button[aria-current="true"] { opacity: 1; border-color: #d6c496; }
.se-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.se-details { margin-top: 16px; border-top: 1px solid #2a2a2e; padding-top: 12px; }
.se-details summary { cursor: pointer; list-style: none; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.se-details summary::-webkit-details-marker { display: none; }
.se-details summary::after { content: " +"; } .se-details[open] summary::after { content: " –"; }
.se-desc { margin-top: 10px; font-size: 13.5px; line-height: 1.65; color: #c9c6bf; }
.se-desc p { margin: 0 0 10px; } .se-desc ul, .se-desc ol { margin: 0 0 10px; padding-left: 18px; } .se-desc li { margin: 3px 0; }
.se-desc h4 { margin: 14px 0 6px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--silver); font-weight: 500; }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 20px; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lightbox .se-arrow { top: calc(50% - 19px); } .lightbox .prev { left: 12px; } .lightbox .next { right: 12px; }
.lb-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; background: none; color: #fff; font-size: 30px; cursor: pointer; }

/* ── chat-style room ───────────────────────────────────────── */
body.in-room .room { max-width: 1180px; }
.room-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.room-main { min-width: 0; }
.room-side { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 10px; scrollbar-width: thin; }
.room-side > * { margin-bottom: 14px; }
.tabs { position: sticky; top: 0; z-index: 5; background: linear-gradient(#0a0a0b 80%, transparent); align-items: center; }
.live-note { margin-left: auto; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7fd18b; box-shadow: 0 0 8px #7fd18b; margin-right: 6px; vertical-align: 1px; }

.pin-strip { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 8px; }
.pin-strip:empty { display: none; }
.pin-chip { flex: none; max-width: 300px; padding: 6px 12px; border: 1px solid #3a3528; border-radius: 999px; background: #16140e; color: #e6d9b4; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stream { padding-bottom: 20px; }
.day { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: #1f1f23; }

.post.msg-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 12px 10px; margin: 0 -10px; border: 0; border-radius: 12px; }
.post.msg-row.flash { animation: flash 1.4s ease; }
@keyframes flash { 0%, 40% { background: #d6c49618; } 100% { background: transparent; } }
.av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 500; font-size: 14px; color: #0a0a0b; }
.av.staff-av { background: #17171a; border: 1px solid #34343a; }
.av.staff-av .rings { width: 26px; height: 13px; }
.av.sm { width: 30px; height: 30px; font-size: 12px; }
.av.sm.staff-av .rings { width: 19px; height: 10px; }
.msg-main { min-width: 0; }
.post .post-head { margin: 2px 0 6px; gap: 8px; flex-wrap: wrap; }
.post .post-by { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.post .pin { margin-left: 0; }
.bubble { padding: 14px 16px; background: #131316; border: 1px solid #222227; border-radius: 4px 16px 16px 16px; }
.bubble .post-body { font-size: 20px; }
.bubble .locked-wrap { margin: 0 0 10px; }
.bubble .post-img { margin-top: 10px; }
.bubble .poll { margin-top: 10px; }
.post .post-actions { margin-top: 8px; }

.utag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; border: 1px solid #3a3a3f; color: var(--muted); font-variant-numeric: lining-nums; }
.utag.staff { color: #0a0a0b; background: #f2f2f2; border-color: #f2f2f2; font-weight: 500; }
.utag.ring { color: #f3e9c8; border-color: #6a5f43; background: #1b180f; font-weight: 500; letter-spacing: .08em; }
.utag.you { color: #a6e3ae; border-color: #3f5a41; }

.thread { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid #1e1e22; display: grid; gap: 4px; }
.thread:empty { display: none; }
.reply { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 7px 8px; margin-left: -8px; border-radius: 10px; }
.reply:hover { background: #ffffff05; }
.reply.mine { background: #d6c49608; }
.reply-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 3px; }
.reply-head .when { font-size: 11px; color: var(--faint); }
.reply-head .del { background: none; border: 0; color: var(--faint); font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; }
.reply-body { font-size: 14px; line-height: 1.5; color: #d9d6cf; overflow-wrap: anywhere; }
.post .reply-form { margin-top: 10px; }
.post .reply-form input { background: #0e0e10; border-color: #26262b; border-radius: 10px; }

/* sidebar: you + the special edition */
.me-card { padding: 16px 18px; border: 1px solid #2a2a2e; border-radius: 10px; background: #0e0e10; }
.me-card .drop-eyebrow { margin-bottom: 6px; }
.me-tag { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 600; color: #f3e9c8; font-variant-numeric: lining-nums; text-shadow: 0 0 18px rgba(214,196,150,.25); }
.me-sub { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.se-card.is-open { border-color: #b8a77a; box-shadow: 0 0 34px rgba(214, 196, 150, .16); }
.se-card { margin: 0; }
.se-clock { margin: 4px 0 14px; padding: 14px 12px 12px; border: 1px solid #3a3528; border-radius: 10px; background: #0c0b08; text-align: center; }
.se-clock-label { margin: 0 0 6px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #d6c496; }
.se-digits { display: flex; justify-content: center; align-items: flex-start; gap: 6px; }
.se-digits span { display: grid; justify-items: center; min-width: 64px; }
.se-digits b { font-family: var(--serif); font-size: 52px; font-weight: 600; line-height: 1; color: #fff; font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 0 22px rgba(214,196,150,.45); }
.se-digits i { font-style: normal; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.se-digits em { font-style: normal; font-family: var(--serif); font-size: 40px; line-height: 1.1; color: #6a5f43; }
.room-side .rules-inside { margin-top: 0; }
.room-side .signout { margin: 6px 0 0; }
.room-side .invite-card { margin: 0; }

/* phones: chat first, sticky countdown bar jumps to the product */
.se-bar { display: none; }
@media (max-width: 900px) {
  .room-grid { grid-template-columns: minmax(0, 1fr); }
  .room-side { position: static; max-height: none; overflow: visible; }
  .se-bar:not([hidden]) { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 8px; padding: 10px 14px; border: 1px solid #6a5f43; border-radius: 10px; background: #17150f; color: #f3e9c8; font: inherit; font-size: 12px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
  .se-bar b { font-family: var(--serif); font-size: 20px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
  .se-bar-go { margin-left: auto; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #d6c496; }
  .se-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: #d6c496; box-shadow: 0 0 10px #d6c496; animation: glowPulse 2s infinite; }
  .tabs { top: 0; }
  .se-bar:not([hidden]) ~ .room-grid .tabs { top: 50px; }
  .se-digits b { font-size: 44px; }
}
@media (max-width: 560px) { .post.msg-row { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; } .av { width: 34px; height: 34px; } .bubble .post-body { font-size: 18px; } }

.utag { font-family: var(--mono); font-style: normal; }
.room-side .se-main { aspect-ratio: 1 / 1; }
.room-side .se-card h2 { font-size: 26px; }
.av.sm { font-size: 11px; letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; }
#seCard { scroll-margin-top: 64px; }

/* requests: monthly allowance */
.req-left { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #d6c496; }
.req-left.out { color: var(--err); letter-spacing: .02em; text-transform: none; font-size: 12.5px; }
.req-form :disabled { opacity: .45; }

/* product: a compact box on the right */
.room-side .se-card { padding: 14px; }
.room-side .se-card .drop-eyebrow { font-size: 9.5px; letter-spacing: .2em; margin-bottom: 8px; }
.room-side .se-clock { margin: 0 0 10px; padding: 10px 8px 8px; }
.room-side .se-digits span { min-width: 52px; }
.room-side .se-digits b { font-size: 38px; }
.room-side .se-digits em { font-size: 28px; }
.room-side .se-gallery { margin: 0 0 10px; }
.room-side .se-main { aspect-ratio: 4 / 3; }
.room-side .se-arrow { width: 30px; height: 30px; font-size: 20px; top: calc(50% - 34px); }
.room-side .se-thumbs button { width: 40px; height: 40px; }
.room-side .se-card h2 { font-size: 21px; margin-bottom: 6px; }
.room-side .se-ring { margin-bottom: 4px; }
.room-side .se-ring b { font-size: 17px; }
.room-side .se-text { font-size: 12px; margin-bottom: 10px; }
.room-side .se-size { min-width: 40px; height: 34px; font-size: 12px; }
.room-side .se-buy { width: 100%; text-align: center; padding: 11px 14px; }
.room-side .se-details { margin-top: 10px; padding-top: 8px; }
.room-side .me-card { padding: 12px 14px; }
.room-side .me-tag { font-size: 21px; }

@media (max-width: 900px) {
  .room-grid { grid-template-columns: minmax(0, 1fr); }
  .imsg { height: calc(100dvh - 170px); border-radius: 22px; }
  .se-bar:not([hidden]) ~ .room-grid .imsg { height: calc(100dvh - 220px); }
  .room-side .se-main { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  body.in-room .room { padding-left: 8px; padding-right: 8px; }
  .imsg-col, .imsg .main-bubble { max-width: 84%; }
}

/* ── posts on the left, room chat on the right ───────────────── */
.room-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; }
.tabs { position: static; background: none; }
.tab .tab-dot { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: #d6c496; vertical-align: 2px; }
.mobile-tab { display: none; }
.feed { display: grid; gap: 14px; padding-bottom: 10px; }
.pcard.post { padding: 16px 18px; border: 1px solid #222227; border-radius: 14px; background: #0f0f11; animation: rise .5s ease both; }
.pcard.flash { animation: flash 1.4s ease; }
@keyframes flash { 0%, 40% { background: #d6c49618; } 100% { background: #0f0f11; } }
.pcard .post-head { gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pcard .post-head .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #17171a; border: 1px solid #34343a; }
.pcard .post-head .av .rings { width: 19px; height: 10px; }
.pcard .post-by { font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.pcard .pin { margin-left: auto; }
.pcard .post-body { font-size: 20px; }
.pcard .post-img { margin-top: 12px; border-radius: 10px; }
.pcard .post-actions { margin-top: 12px; gap: 10px; }
.comments-btn { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.comments-btn:hover { color: #fff; border-color: #6a6a70; }
.comments-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.preview-lines { margin-top: 10px; display: grid; gap: 2px; cursor: pointer; }
.preview-lines:empty { display: none; }
.preview-lines .cl { padding: 3px 0; }
.view-all { justify-self: start; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.view-all:hover { color: #fff; }
.utag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.utag.staff { color: #0a0a0b; background: #f2f2f2; font-weight: 500; }
.main-foot { margin-top: 26px; display: grid; gap: 14px; }
.main-foot .invite-card { margin: 0; }

/* a chat line: "I · First Ring 01: message" */
.cl { position: relative; padding: 5px 8px; margin: 0 -8px; border-radius: 8px; font-size: 14px; line-height: 1.5; color: #dedbd4; overflow-wrap: anywhere; }
.cl:hover { background: #ffffff06; }
.cl-tag { font-weight: 600; color: hsl(var(--h, 42) 55% 74%); letter-spacing: .01em; font-variant-numeric: lining-nums; }
.cl.staff .cl-tag { color: #fff; background: #f2f2f2; color: #0a0a0b; padding: 0 6px; border-radius: 4px; font-size: 12px; letter-spacing: .1em; }
.cl.mine { background: #d6c4960d; }
.cl.mine .cl-tag::after { content: " (you)"; font-weight: 400; color: var(--faint); }
.cl-time { margin-left: 8px; font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.cl-del { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--faint); font: inherit; font-size: 10.5px; cursor: pointer; text-decoration: underline; opacity: 0; }
.cl:hover .cl-del, .cl:focus-within .cl-del { opacity: 1; }

/* the room chat box */
.room-side { display: flex; flex-direction: column; gap: 14px; max-height: none; overflow: visible; position: sticky; top: 12px; }
.room-side > * { margin-bottom: 0; }
.chatroom { display: flex; flex-direction: column; height: calc(100vh - 110px); height: calc(100dvh - 110px); min-height: 380px; border: 1px solid #2a2a2e; border-radius: 14px; background: #0c0c0e; overflow: hidden; }
.se-card.is-open ~ .chatroom, .se-card:not([hidden]) ~ .chatroom { height: calc(100dvh - 420px); min-height: 300px; }
.cr-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #1f1f23; background: #111113; }
.cr-head b { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.cr-as { font-size: 11px; color: #d6c496; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-head .live-note { margin-left: auto; }
.cr-lines { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px; }
.cr-empty { margin: 20px 0; text-align: center; font-size: 12.5px; color: var(--faint); }
.cr-compose { position: relative; padding: 10px 12px 12px; border-top: 1px solid #1f1f23; background: #101012; }
.compose-row { display: flex; align-items: center; gap: 8px; }
.compose-row input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid #2f2f34; border-radius: 10px; background: #0a0a0b; font-size: 14px; }
.emoji-btn { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #2f2f34; border-radius: 10px; background: #141416; color: #c9c6bf; cursor: pointer; }
.emoji-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.emoji-btn[aria-expanded="true"] { border-color: #6a5f43; color: #f3e9c8; }
.compose-row .send-btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 10px; background: var(--silver); color: #0a0a0b; cursor: pointer; letter-spacing: 0; }
.compose-row .send-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.compose-row .send-btn[disabled] { background: #1d1d20; color: #5a5a60; opacity: 1; cursor: default; }
.emoji-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 2px; max-height: 168px; overflow-y: auto; margin: 0 0 8px; padding: 8px; border: 1px solid #2c2c31; border-radius: 12px; background: #141416; }
.emoji-panel button { height: 36px; border: 0; border-radius: 8px; background: none; font-size: 21px; cursor: pointer; }
.emoji-panel button:hover { background: #ffffff12; }
.compose-msg { margin: 6px 4px 0; font-size: 12px; color: var(--err); }
.compose-msg:empty { display: none; }

/* comments window */
.thread-back { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.thread-win { display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(86vh, 900px); border: 1px solid #2c2c31; border-radius: 16px; background: #0c0c0e; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: rise .25s ease both; }
.tw-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #1f1f23; }
.tw-head b { font-family: var(--serif); font-size: 20px; font-weight: 700; }
.tw-count { font-size: 12px; color: var(--muted); }
.tw-close { margin-left: auto; width: 36px; height: 36px; border: 0; background: none; color: #c9c6bf; font-size: 26px; line-height: 1; cursor: pointer; }
.tw-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }
.tw-post .pcard { animation: none; margin-bottom: 12px; }
.tw-lines { display: grid; gap: 2px; }

@media (max-width: 900px) {
  .room-grid { grid-template-columns: minmax(0, 1fr); }
  .mobile-tab { display: inline-block; }
  .room-side { position: static; }
  body[data-tab="chat"] .room-main, body[data-tab="chat"] .se-card { display: none; }
  body:not([data-tab="chat"]) .chatroom { display: none; }
  .chatroom, .se-card:not([hidden]) ~ .chatroom { height: calc(100dvh - 190px); }
  .room-side { order: -1; }
  body[data-tab="requests"] .room-side { display: none; }
  .thread-back { padding: 0; align-items: end; }
  .thread-win { width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; }
}

/* compact product card in the right column */
.room-side .se-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px; }
.room-side .se-card > * { grid-column: 1 / -1; }
.room-side .se-card .drop-eyebrow { margin-bottom: 8px; }
.room-side .se-clock { margin: 0 0 10px; padding: 8px 6px 6px; }
.room-side .se-clock-label { margin-bottom: 2px; font-size: 9px; }
.room-side .se-digits b { font-size: 32px; }
.room-side .se-digits em { font-size: 24px; }
.room-side .se-digits span { min-width: 46px; }
.room-side .se-digits i { margin-top: 3px; font-size: 8.5px; }
.room-side .se-gallery { grid-column: 1; grid-row: span 3; margin: 0; }
.room-side .se-main { aspect-ratio: 1 / 1; border-radius: 8px; }
.room-side .se-gallery .se-arrow, .room-side .se-thumbs { display: none !important; }
.room-side .se-gallery::after { content: "Tap to view"; display: block; margin-top: 4px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); text-align: center; }
.room-side .se-card h2 { grid-column: 2; font-size: 18px; line-height: 1.15; margin: 2px 0 4px; }
.room-side .se-ring { grid-column: 2; display: grid; gap: 0; margin: 0; }
.room-side .se-ring span { font-size: 9px; }
.room-side .se-ring b { font-size: 16px; }
.room-side .se-text { display: none; }
.room-side .se-card.is-open .se-sizes { margin: 10px 0 8px; }
.room-side .se-sizes { gap: 6px; }
.room-side .se-size { min-width: 0; flex: 1; height: 32px; padding: 0 6px; }
.room-side .se-buy { padding: 10px; font-size: 11px; }
.room-side .se-details { margin-top: 8px; padding-top: 6px; }
.room-side .se-card:not(.is-open) .se-text { display: block; grid-column: 2; font-size: 12px; margin: 4px 0 0; }
.se-card:not([hidden]) ~ .chatroom { height: calc(100dvh - 380px); min-height: 320px; }
@media (max-width: 900px) { .room-side .se-gallery::after { content: "Tap for photos"; } }

/* right column is exactly one screen tall; the chat takes whatever room is left */
@media (min-width: 901px) {
  .room-grid { grid-template-rows: auto 1fr; }
  .room-grid > .tabs { grid-column: 1; grid-row: 1; }
  .room-main { grid-column: 1; grid-row: 2; }
  .room-side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 12px; height: calc(100vh - 110px); height: calc(100dvh - 110px); min-height: 520px; }
  .room-side .chatroom, .se-card:not([hidden]) ~ .chatroom { flex: 1; height: auto; min-height: 220px; }
  .room-side .se-card { flex: none; }
}
@media (max-width: 900px) { .room-grid > .tabs { order: -2; } }
@media (min-width: 901px) { .room-grid { row-gap: 10px; align-content: start; } .room-grid > .tabs { margin-bottom: 0; } }

/* sign-in */
.rings-home { display: inline-block; border-radius: 50%; transition: opacity .2s, transform .2s; }
.rings-home:hover { opacity: .85; transform: scale(1.03); }
.rings-home .rings.big { margin-bottom: 22px; }
.pw-fields { display: grid; gap: 10px; text-align: left; padding: 14px; border: 1px solid #3a3528; border-radius: 8px; background: #121009; }
.pw-fields[hidden] { display: none; }
.pw-lead { margin: 0; font-size: 12.5px; color: #e6d9b4; }
.forgot-note { max-width: 380px; color: var(--muted); }

/* chat line colors: everyone white, First Ring 01 blue with a trophy, Matt gold and glowing */
.cl-tag { color: #ffffff; }
.cl-text { white-space: pre-wrap; }
.cl.top1, .cl.top1 .cl-tag { color: #6cb4ff; }
.cl.top1 .cl-tag { text-shadow: 0 0 10px rgba(108,180,255,.35); }
.cl-trophy { margin-right: 4px; }
.cl.staff { margin: 6px -8px; padding: 10px 12px; border: 1px solid #8a7746; border-left: 3px solid #e6c873; border-radius: 10px;
  background: linear-gradient(135deg, rgba(214,183,100,.16), rgba(214,183,100,.04)); box-shadow: 0 0 18px rgba(230,200,115,.18), inset 0 0 12px rgba(230,200,115,.06);
  color: #f6e3a6; font-size: 15px; text-shadow: 0 0 10px rgba(246,214,128,.35); }
.cl.staff .cl-tag { color: #0a0a0b; background: linear-gradient(180deg, #f6dc8c, #d9b45a); padding: 1px 8px; border-radius: 4px; font-size: 11.5px; letter-spacing: .14em; text-shadow: none; box-shadow: 0 0 12px rgba(246,214,128,.55); }
.cl.staff .cl-text { display: block; margin-top: 6px; }
.cl.staff .cl-time { color: #b49a5c; }
.cl.mine { background: #ffffff08; }
.cr-compose textarea, .tw-compose textarea, #twForm textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 140px; padding: 10px 14px; border: 1px solid #2f2f34; border-radius: 10px; background: #0a0a0b; color: var(--text); font: inherit; font-size: 14px; line-height: 1.4; resize: none; outline: none; }
.cr-compose textarea:focus { border-color: #6a6a70; }
.compose-row { align-items: flex-end; }
.cl.staff .cl-colon { display: none; }

/* ── game badges next to names ── */
.gbadge { display: inline-flex; align-items: center; justify-content: center; margin: 0 2px 0 5px; font-size: 13px; line-height: 1; vertical-align: -1px; }
.gbadge.blue-check { width: 15px; height: 15px; border-radius: 50%; background: #1d9bf0; color: #fff; font-size: 9.5px; font-weight: 700; box-shadow: 0 0 6px rgba(29,155,240,.5); }
.gbadge.gold-heart, .gbadge.gold-spade { font-size: 16px; color: #f6d77a; background: linear-gradient(180deg, #fff2c2, #e2b54a 60%, #b8862b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 5px rgba(246,214,122,.8)); }
.gbadge.gold-spade { font-size: 17px; filter: drop-shadow(0 0 7px rgba(246,214,122,.95)); }

/* ── Clear the Bar panel ── */
.play-tab { color: #e6d9b4; }
.play-tab:hover { color: #fff; }
.game-panel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 35; width: 420px; max-width: 100vw; display: flex; flex-direction: column; background: #0b0b0d; border-right: 1px solid #2a2a2e; box-shadow: 20px 0 60px rgba(0,0,0,.6); animation: slideIn .25s ease both; }
@keyframes slideIn { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
.gp-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid #1f1f23; }
.gp-head b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 700; }
.gp-head span { font-size: 11.5px; color: var(--muted); }
.gp-head .tw-close { margin-left: auto; }
.gp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 16px; }
.gp-stats div { padding: 8px 10px; border: 1px solid #222227; border-radius: 10px; background: #111114; }
.gp-stats span { display: block; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.gp-stats b { font-family: var(--serif); font-size: 26px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.gp-stats i { font-style: normal; }
.gp-stage { flex: 1; min-height: 300px; display: grid; place-items: center; padding: 0 16px; }
.gp-stage canvas { display: block; border-radius: 14px; border: 1px solid #2a2a2e; touch-action: manipulation; cursor: pointer; }
.gp-lists { max-height: 34vh; overflow-y: auto; padding: 10px 16px 16px; border-top: 1px solid #1f1f23; }
.gp-title { margin: 0 0 6px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.gp-board { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.gp-board li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: 13px; }
.gp-board li.mine { background: #d6c4961a; }
.gp-board li:nth-child(1) .gp-pos { color: #f6d77a; } .gp-board li:nth-child(2) .gp-pos { color: #d9d9de; } .gp-board li:nth-child(3) .gp-pos { color: #cd8f5b; }
.gp-pos { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--muted); text-align: center; }
.gp-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-board b { font-family: var(--serif); font-size: 18px; font-variant-numeric: lining-nums tabular-nums; }
.gp-empty { color: var(--faint); font-size: 12.5px; grid-template-columns: 1fr !important; }
.gp-tiers-wrap summary { cursor: pointer; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.gp-tiers { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12px; color: #c9c6bf; }
.gp-tiers li { display: flex; align-items: center; gap: 4px; }
@media (max-width: 560px) { .game-panel { width: 100vw; border-right: 0; } .gp-lists { max-height: 28vh; } }
.game-panel { overflow-y: auto; overscroll-behavior: contain; }
.gp-stage { flex: none; height: min(560px, calc(100vh - 250px)); height: min(560px, calc(100dvh - 250px)); min-height: 320px; }
.gp-lists { max-height: none; overflow: visible; }
.gbadge.gold-heart { font-size: 19px; }
.gbadge.gold-spade { font-size: 20px; }
.game-panel, .gp-pos, .gp-board b, .gp-stats b { font-variant-numeric: lining-nums tabular-nums; }

/* legendary fleur-de-lis */
.gbadge.legend { font-size: 18px; filter: drop-shadow(0 0 6px rgba(246,214,122,.95)) drop-shadow(0 0 14px rgba(246,214,122,.5)); animation: legendGlow 2.4s ease-in-out infinite; }
@keyframes legendGlow { 0%, 100% { filter: drop-shadow(0 0 5px rgba(246,214,122,.85)) drop-shadow(0 0 10px rgba(246,214,122,.35)); } 50% { filter: drop-shadow(0 0 9px rgba(246,214,122,1)) drop-shadow(0 0 20px rgba(246,214,122,.6)); } }
@media (prefers-reduced-motion: reduce) { .gbadge.legend { animation: none; } }
/* badge guide at the top of the room chat */
.cr-badges { border-bottom: 1px solid #1f1f23; background: #0f0e0b; }
.cr-badges summary { display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; list-style: none; font-size: 12px; color: #e6d9b4; }
.cr-badges summary::-webkit-details-marker { display: none; }
.cr-badges-hint { margin-left: auto; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.cr-badges[open] .cr-badges-hint { color: #d6c496; }
.cr-badges-body { max-height: 230px; overflow-y: auto; padding: 0 14px 12px; font-size: 12.5px; line-height: 1.55; color: #c9c6bf; }
.cr-badges-body p { margin: 0 0 8px; }
.cr-badge-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; font-size: 11.5px; color: #c9c6bf; font-variant-numeric: lining-nums tabular-nums; }
.cr-badge-list li { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.cr-play { padding: 7px 14px; border: 1px solid #6a5f43; border-radius: 999px; background: #1b180f; color: #f3e9c8; font: inherit; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.cr-play:hover { border-color: #d6c496; }
.gp-mults { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 3px; font-size: 12px; color: #e6d9b4; }
.chatroom { min-height: 0; }

/* game lives in its own tab now */
.game-pane:not([hidden]) { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 18px; align-items: start; }
.game-pane .gp-stage { flex: none; height: min(600px, calc(100vh - 210px)); height: min(600px, calc(100dvh - 210px)); min-height: 360px; padding: 0; display: grid; place-items: center; }
.game-pane .gp-head { padding: 0 0 10px; border: 0; }
.game-pane .gp-stats { padding: 0 0 12px; }
.game-pane .gp-lists { padding: 12px 0 0; border-top: 1px solid #1f1f23; max-height: none; }
.play-tab[aria-selected="true"] { color: #fff; }
@media (max-width: 900px) {
  .game-pane:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  body[data-tab="game"] .room-side, body[data-tab="game"] .main-foot { display: none; }
  .game-pane .gp-stage { height: min(560px, calc(100dvh - 190px)); }
  .game-pane .gp-right { order: 2; }
}
/* new badge banner */
.vown-toast { position: fixed; top: 12px; left: 50%; z-index: 60; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid #6a5f43; border-radius: 999px; background: rgba(20,18,12,.94); color: #f3e9c8; font-size: 12.5px; box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 16px rgba(214,196,150,.18); transform: translate(-50%, -8px); opacity: 0; pointer-events: none; backdrop-filter: blur(6px); }
.vown-toast.in { animation: toastIn .3s ease forwards; }
.vown-toast.out { animation: toastOut .3s ease forwards; }
@keyframes toastIn { to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes toastOut { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -8px); opacity: 0; } }

/* desktop: bigger game */
@media (min-width: 901px) {
  .game-pane:not([hidden]) { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); }
  .game-pane .gp-stage { height: min(730px, calc(100vh - 170px)); height: min(730px, calc(100dvh - 170px)); }
}
/* badges first, front and center */
.gp-badges-top { margin-bottom: 14px; padding: 12px; border: 1px solid #3a3528; border-radius: 12px; background: linear-gradient(160deg, #17150f, #0e0e10); }
.gp-badges-top .gp-title { color: #e6d9b4; }
.gp-badges-top .gp-tiers { margin: 6px 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 12.5px; }
/* long posts fold after 15 lines */
.pcard .post-body.clamp { display: -webkit-box; -webkit-line-clamp: 15; line-clamp: 15; -webkit-box-orient: vertical; overflow: hidden; }
.more-btn { display: inline-block; margin-top: 6px; padding: 0; border: 0; background: none; color: #d6c496; font: inherit; font-size: 12.5px; letter-spacing: .06em; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.more-btn:hover { color: #fff; }
.gp-badges-top .gp-tiers { grid-template-columns: minmax(0, 1fr); gap: 3px; font-size: 12px; }
.gp-badges-top .gp-tiers li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-who { display: flex; align-items: center; min-width: 0; overflow: visible; }
.gp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-who .gbadge { flex: none; }

/* Play tab: game picker */
.play-pane:not([hidden]) { display: block; }
.arcade { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 10px; margin: 0 0 16px; }
.arc-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid #26262b; border-radius: 14px; background: #0f0f12; color: #e9e7e2; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.arc-tile:hover { border-color: #4a4a50; }
.arc-tile b { font-family: var(--serif); font-size: 21px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.arc-eyebrow { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.arc-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.arc-tile.on { border-color: #8a8a90; background: #141418; }
.arc-tile.featured { border-color: #5c5236; background: linear-gradient(160deg, #1b180f, #0e0e10); }
.arc-tile.featured .arc-eyebrow { color: #f6dc8c; }
.arc-tile.featured .arc-sub { color: #e6d9b4; }
.arc-tile.featured.on { border-color: #d6c496; box-shadow: 0 0 22px rgba(214,196,150,.22); }
.mini-note { margin: 0 0 12px; padding: 8px 12px; border: 1px dashed #2e2e33; border-radius: 10px; font-size: 12px; color: var(--muted); }
@media (max-width: 560px) {
  .arcade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
  .arc-tile.featured { grid-column: 1 / -1; }
  .arc-tile.featured .arc-sub { display: block; }
  .arc-tile { padding: 9px 10px; border-radius: 12px; }
  .arc-tile b { font-size: 16px; }
  .arc-sub { display: none; }
  .arc-eyebrow { font-size: 8px; letter-spacing: .14em; }
}
.week-note { margin: 0 0 12px; padding: 8px 12px; border: 1px solid #5c5236; border-radius: 10px; background: #17150f; font-size: 12px; color: #e6d9b4; }
.week-note b { color: #f6dc8c; font-weight: 600; }
.mini-pane .gp-stats b { font-size: 21px; white-space: nowrap; }
.week-note a { color: #f6dc8c; text-underline-offset: 3px; white-space: nowrap; }
@media (min-width: 561px) and (max-width: 1180px) {
  .arcade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arc-tile.featured { grid-column: 1 / -1; }
}

/* Max Out */
.arc-tile.arc-points .arc-eyebrow { color: #9fd8a8; }
.mo-controls { margin-top: 12px; display: grid; gap: 10px; }
.mo-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.mo-bet { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #2c2c31; border-radius: 12px; background: #0f0f12; }
.mo-bet span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.mo-bet input { width: 84px; height: 42px; border: 0; background: transparent; color: #fff; font: 600 18px var(--mono); font-variant-numeric: lining-nums tabular-nums; outline: none; }
.mo-quick { display: flex; gap: 6px; flex: 1; }
.mo-quick button { flex: 1; min-width: 0; padding: 0 8px; height: 44px; border: 1px solid #2c2c31; border-radius: 12px; background: #141418; color: #e9e7e2; font: 500 12px var(--mono); letter-spacing: .06em; cursor: pointer; white-space: nowrap; }
.mo-quick button:hover { border-color: #5c5a54; }
.mo-go { height: 54px; border: 1px solid #b8a77a; border-radius: 14px; background: linear-gradient(180deg, #f2d98f, #b8954a); color: #121212; font: 700 15px var(--mono); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 22px rgba(214,196,150,.25); }
.mo-go.cash { background: linear-gradient(180deg, #bff0c6, #5fb873); border-color: #8fd99c; box-shadow: 0 0 24px rgba(120,220,140,.35); }
.mo-go:disabled { opacity: .45; cursor: default; box-shadow: none; }
.mo-msg { margin: 0; min-height: 1.3em; font-size: 12.5px; color: var(--muted); }
.mo-msg.err { color: #e8a596; }
.mo-pane .gp-stage { height: min(520px, calc(100vh - 330px)); height: min(520px, calc(100dvh - 330px)); min-height: 300px; }
@media (max-width: 900px) { .mo-pane .gp-stage { height: min(460px, calc(100dvh - 330px)); } }
/* five tiles now */
.arcade { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
@media (min-width: 561px) and (max-width: 1180px) { .arcade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .arcade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .mo-bet { flex: 1 1 100%; }
  .mo-bet input { flex: 1; }
  .mo-quick { flex: 1 1 100%; }
  .mo-pane .gp-stage { height: min(400px, calc(100dvh - 300px)); min-height: 260px; }
}

/* terms agreement above the special-edition buy button */
.se-agree { margin: 4px 0 10px; font-size: 12px; line-height: 1.5; }
.se-agree a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.se-agree:has(+ #seBuy[hidden]) { display: none; }
.se-agree.nag { color: #e8a596; }
.agree a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }