:root {
  color-scheme: dark;
  --ink: #08070b; --panel: #0d0e17; --panel2: #10111c;
  --line: rgba(255,255,255,.08); --soft: rgba(255,255,255,.06);
  --fg: #eef0f6; --muted: #9aa0b4;
  --red: #e3261b; --red2: #ff5a3d; --gold: #e8b63a; --gold2: #ffd874; --green: #2bd35a;
  --red: #e3261b; --red-glow: rgba(227,38,27,.55);
  --red1: #e3261b; --orange: #ff8c00; --yellow: #ffd60a; --grn: #0b8a2a; --blue: #1240ff; --purple: #7d1594;
  --fd: "Cinzel", "Luckiest Guy", Georgia, serif;
  --fb: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; color: var(--fg); font: 400 15px/1.5 var(--fb);
  background:
    radial-gradient(1100px 620px at 12% 2%, rgba(150,22,28,.45), transparent 55%),
    radial-gradient(1000px 640px at 90% 100%, rgba(90,14,20,.45), transparent 55%),
    linear-gradient(180deg, rgba(8,7,11,.72), rgba(8,7,11,.88) 55%, rgba(8,6,8,.95)),
    url("/images/th/hell.webp") center / cover no-repeat, #08070b;
  background-attachment: fixed;
}
.page { max-width: 1240px; margin: 0 auto; padding: 14px 16px 44px; }

/* top nav */
.nav { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: rgba(7,8,14,.7); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(8px); flex-wrap: wrap; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 40px; width: auto; max-width: 230px; object-fit: contain; display: block; filter: drop-shadow(0 2px 8px rgba(227,38,27,.4)); }
.mainnav { display: flex; gap: 4px; flex-wrap: wrap; }
.mainnav a { color: rgba(255,255,255,.8); font: 700 14px/1 var(--fb); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 9px 13px; border-radius: 10px; transition: background .12s, color .12s; }
.mainnav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.mainnav a.active { color: #fff; background: linear-gradient(180deg, rgba(227,38,27,.3), rgba(227,38,27,.12)); box-shadow: inset 0 0 0 1px rgba(255,80,60,.5), 0 0 16px -4px var(--red-glow); }
.nav-crown { color: var(--gold2); }
.navbtns { margin-left: auto; display: flex; gap: 8px; }
.nbtn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 11px; font: 700 14px/1 var(--fb); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.nbtn.vip { color: #2a1c00; background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 3px 14px rgba(232,182,58,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.nbtn.login { color: #fff; background: linear-gradient(180deg, var(--red2), var(--red)); box-shadow: 0 3px 14px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.nbtn:hover { filter: brightness(1.08); }

/* ornate LOUNGE title */
.lounge-title { text-align: center; margin: 26px 0 18px; }
.lt-crown { display: block; font-size: 26px; color: var(--gold2); text-shadow: 0 0 18px rgba(232,182,58,.6); margin-bottom: -6px; }
.lounge-title h1 { margin: 0; font: 900 clamp(40px, 9vw, 72px)/1 var(--fd); letter-spacing: .14em; background: linear-gradient(180deg, #fff2c8 0%, var(--gold2) 42%, var(--gold) 60%, #8a5a12 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 10px rgba(0,0,0,.6)); }
.lounge-title p { display: inline-flex; align-items: center; gap: 14px; margin: 8px 0 0; color: var(--gold2); font: 700 12px/1 var(--fb); letter-spacing: .4em; text-transform: uppercase; opacity: .85; }

/* two framed panels */
.lounge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 820px) { .lounge-grid { grid-template-columns: 1fr; } }

.frame {
  position: relative; border-radius: 18px; padding: 20px 20px 18px;
  background:
    linear-gradient(180deg, rgba(20,10,14,.96), rgba(10,11,20,.97)) padding-box,
    linear-gradient(160deg, var(--gold) 0%, #7a1620 30%, #2a0a10 55%, #7a1620 80%, var(--gold) 100%) border-box;
  border: 2px solid transparent;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 42px -12px var(--red-glow), inset 0 0 40px -22px rgba(255,120,90,.4);
}
/* red diamond crest at the top center */
.frame::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--red2), #7a0f12); border: 1px solid var(--gold); box-shadow: 0 0 14px var(--red-glow);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-head h2 { margin: 0; font: 700 24px/1 var(--fd); letter-spacing: .06em; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.sub { margin: 4px 0 14px; color: var(--muted); font-size: 13px; }
.live-badge { display: inline-flex; align-items: center; gap: 7px; font: 800 11px/1 var(--fb); letter-spacing: .14em; color: #fff; background: linear-gradient(180deg, var(--red2), var(--red)); padding: 6px 11px; border-radius: 999px; box-shadow: 0 0 14px -2px var(--red-glow); }
.online { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.online b { color: #fff; }
.live-dot, .online-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.live-dot { background: #fff; animation: pulse 1.5s ease-out infinite; }
.online-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* recent dice feed */
.feed { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.frow { display: flex; align-items: center; gap: 11px; width: 100%; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.2)); border: 1px solid var(--soft); border-radius: 13px; padding: 9px 12px; cursor: pointer; color: inherit; font: inherit; text-align: left; transition: background .12s, transform .12s, border-color .12s; }
.frow:hover { background: rgba(227,38,27,.1); border-color: rgba(255,90,70,.4); transform: translateX(2px); }
.av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 800 15px/1 var(--fb); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.15); }
.who { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .mid { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.dice-mini { display: flex; gap: 5px; }
.pip { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #fff; position: relative; box-shadow: inset 0 -3px 6px rgba(0,0,0,.18); }
.pip::after { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.pip.num { background: #fff; color: #15151a; display: grid; place-items: center; font: 800 13px/1 var(--fb); }
.pip.num::after { display: none; }
.meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.meta .when { color: var(--muted); font-size: 12px; white-space: nowrap; }
.meta .rid { font: 800 11px/1 var(--fb); letter-spacing: .06em; color: var(--gold2); background: rgba(0,0,0,.4); border: 1px solid rgba(232,182,58,.25); border-radius: 6px; padding: 3px 6px; }
.feed .empty, .messages .empty { color: var(--muted); text-align: center; padding: 16px; }

/* chat */
.messages { display: flex; flex-direction: column; gap: 10px; height: 52vh; overflow-y: auto; padding-right: 4px; }
.cmsg { display: flex; gap: 10px; }
.cmsg .av { width: 34px; height: 34px; font-size: 14px; }
.cbody-wrap { min-width: 0; flex: 1; }
.cm-top { display: flex; align-items: baseline; gap: 8px; }
.cm-who { font-weight: 800; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-time { color: var(--muted); font-size: 11px; margin-left: auto; white-space: nowrap; }
.cm-text { color: #e7e9f2; word-wrap: break-word; overflow-wrap: anywhere; font-size: 14px; }
.chatbar { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.chatbar input { background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; color: var(--fg); font: inherit; }
.chatbar input:focus-visible { outline: 2px solid var(--red2); outline-offset: 1px; }
.chatbar .name { flex: 0 0 112px; min-width: 0; }
.chatbar .body { flex: 1 1 140px; min-width: 0; }
.send { background: linear-gradient(180deg, var(--red2), var(--red)); color: #fff; border: 0; border-radius: 11px; padding: 11px 20px; font: 700 15px/1 var(--fb); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 3px 14px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.send:hover { filter: brightness(1.08); }
.send:active { transform: translateY(2px); }
.err { color: #ff8a8a; font-weight: 600; font-size: 13px; margin: 8px 0 0; }

/* footer nav */
.footnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 26px auto 0; width: fit-content; max-width: 100%; background: rgba(7,8,14,.7); border: 1px solid var(--line); border-radius: 999px; padding: 11px 22px; }
.footnav a { color: rgba(255,255,255,.82); font: 700 13px/1 var(--fb); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.footnav a:hover { color: var(--gold2); }

@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---- richer details ---- */
.lounge-title p::before, .lounge-title p::after { content: ""; width: clamp(36px, 12vw, 130px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.lounge-title p::after { transform: scaleX(-1); }
.lounge-title h1 { text-shadow: none; }
/* gold corner brackets inside each frame */
.frame::after { content: ""; position: absolute; inset: 7px; border-radius: 12px; pointer-events: none; opacity: .85;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 26px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top left / 2px 26px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 26px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 2px 26px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 26px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 2px 26px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 26px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 2px 26px no-repeat; }
.frame > * { position: relative; z-index: 1; }
/* glossy dice like the main roller */
.pip { width: 28px; height: 28px; border-radius: 8px; border: 2.5px solid #fff; overflow: hidden; box-shadow: inset 0 -4px 6px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.45), 0 0 12px -3px var(--pc, transparent); }
.pip::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 48%); }
.pip::after { width: 8px; height: 8px; z-index: 1; }
.dice-mini { gap: 6px; }
/* avatars: real VIP pictures, dice icon for players */
.av-img { background-size: cover !important; background-position: center !important; box-shadow: 0 0 0 2px var(--gold), 0 0 14px -3px var(--gold), 0 2px 8px rgba(0,0,0,.5) !important; }
.av-dice { background: radial-gradient(circle at 50% 40%, #2a1418, #0d090c) !important; position: relative; overflow: hidden; }
.av-dice::after { content: ""; position: absolute; inset: 5px; background: url("/images/colorroll_dice.png") left center / contain no-repeat; }
/* newest roll stands out */
.frow:first-child { border-color: rgba(232,182,58,.38); background: linear-gradient(90deg, rgba(232,182,58,.10), rgba(0,0,0,.2) 60%); }
.frow.fresh { animation: slideIn .55s ease-out; box-shadow: 0 0 22px -6px var(--gold); }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.who.vip { text-shadow: 0 0 12px currentColor; }
/* chat bubbles + empty state */
.cmsg { background: rgba(255,255,255,.03); border: 1px solid var(--soft); border-radius: 13px; padding: 8px 11px; }
.messages .empty { margin: auto; text-align: center; font-size: 15px; }
.empty-ico { display: block; font-size: 42px; margin-bottom: 8px; filter: drop-shadow(0 0 12px rgba(227,38,27,.5)); }
.online-dot { animation: onl 2s ease-in-out infinite; }
@keyframes onl { 50% { box-shadow: 0 0 2px var(--green); } }
@media (prefers-reduced-motion: reduce) { .frow.fresh, .online-dot { animation: none; } }