/* =============================================================================
 * app.css — tokens, shell, auth gate, chat, modals, celebration effects
 * ========================================================================== */

:root{
  --ink:#100609;
  --ink-2:#180a10;
  --carpet:#3b0f1c;
  --carpet-lo:#280915;
  --brass:#c9922e;
  --brass-lo:#7a5719;
  --brass-hi:#f0c46a;
  --amber:#f5b942;
  --amber-dim:#8a6420;
  --felt:#0b4032;
  --felt-hi:#12604a;
  --bone:#f2eade;
  --bone-dim:#b5a794;
  --jade:#3cbb8c;
  --rust:#d4503a;
  --violet:#8b5cf6;

  --tile:88px;
  --r:4px;
  --rail:340px;
  --shadow:0 24px 60px rgba(0,0,0,.6);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter Tight',system-ui,-apple-system,sans-serif;
  background:var(--ink);color:var(--bone);
  font-size:15px;line-height:1.45;overflow:hidden;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(circle at 50% -10%, rgba(201,146,46,.16), transparent 60%),
    repeating-conic-gradient(from 45deg at 50% 50%, var(--carpet-lo) 0deg 90deg, var(--carpet) 90deg 180deg) 0 0/64px 64px,
    var(--carpet);
  opacity:.42;
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 18%, transparent 18%, rgba(16,6,9,.9) 76%);
}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.hidden{display:none !important}
.mono{font-family:'DM Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ btns */
.btn{
  border:1px solid var(--brass-lo);
  background:linear-gradient(180deg,#2c1119,#190910);
  padding:9px 16px;border-radius:var(--r);font-weight:600;font-size:13px;
  letter-spacing:.03em;transition:background .14s,border-color .14s,transform .07s;
  white-space:nowrap;
}
.btn:hover:not(:disabled){background:linear-gradient(180deg,#3e1723,#251016);border-color:var(--brass)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.32;cursor:not-allowed}
.btn.gold{background:linear-gradient(180deg,#e6ad3e,#a8721f);border-color:var(--brass-hi);color:#241005}
.btn.gold:hover:not(:disabled){background:linear-gradient(180deg,#f7c257,#bd8226)}
.btn.sm{padding:5px 10px;font-size:11.5px}
.btn.danger{border-color:#7a2418;background:linear-gradient(180deg,#3a1009,#210805)}
.btn.on{background:linear-gradient(180deg,#e6ad3e,#a8721f);border-color:var(--brass-hi);color:#241005}

/* ---------------------------------------------------------------- layout */
#app{display:flex;flex-direction:column;height:100%}

.topbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:8px 16px;background:linear-gradient(180deg,#1f0c14,#120609);
  border-bottom:1px solid var(--brass-lo);box-shadow:0 8px 26px rgba(0,0,0,.5);
  z-index:30;flex:0 0 auto;
}
.venue{display:flex;flex-direction:column;line-height:1;flex:0 0 auto}
.venue b{font-family:'Bevan',Georgia,serif;font-weight:400;font-size:16px;color:var(--amber);letter-spacing:.01em}
.venue span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);margin-top:4px}

.credit-meter{
  display:flex;align-items:center;gap:10px;padding:4px 14px;
  background:#080306;border:2px solid var(--brass-lo);border-radius:var(--r);
  box-shadow:inset 0 0 20px rgba(245,185,66,.1);
}
.credit-meter dt{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-dim)}
.credit-meter dd{
  font-family:'DM Mono',monospace;font-size:20px;font-weight:500;color:var(--amber);
  text-shadow:0 0 10px rgba(245,185,66,.5);font-variant-numeric:tabular-nums;line-height:1.15;
}
.credit-meter dd small{display:block;font-size:9.5px;color:var(--bone-dim);text-shadow:none}
.credit-meter.bump{animation:bump .4s ease}
@keyframes bump{0%,100%{transform:none}40%{transform:scale(1.07)}}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.whoami{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;font-size:12px}
.whoami b{color:var(--amber)}
.whoami span{font-size:10px;color:var(--bone-dim)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px}
.dot.on{background:var(--jade);box-shadow:0 0 8px var(--jade)}
.dot.off{background:var(--bone-dim)}

/* ------------------------------------------------------- jackpot ribbon */
.jackpots{
  display:flex;gap:2px;flex:1 1 300px;min-width:240px;max-width:560px;
  background:#080306;border:2px solid var(--brass-lo);border-radius:var(--r);padding:2px;
}
.jp{flex:1;padding:4px 10px;text-align:center;position:relative;overflow:hidden;border-radius:2px}
.jp + .jp{border-left:1px solid rgba(201,146,46,.25)}
.jp dt{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:1px}
.jp dd{font-family:'DM Mono',monospace;font-size:15px;font-variant-numeric:tabular-nums;line-height:1.1}
.jp.grand dt{color:#ff9a5c}
.jp.grand dd{color:#ffd06b;text-shadow:0 0 12px rgba(255,154,92,.7)}
.jp.grand{background:radial-gradient(ellipse at 50% 120%, rgba(255,90,40,.28), transparent 70%)}
.jp.major dt{color:#c9a6ff}.jp.major dd{color:#e0ccff;text-shadow:0 0 10px rgba(160,110,255,.5)}
.jp.minor dt{color:#7fe0c0}.jp.minor dd{color:#b8f2e0;text-shadow:0 0 10px rgba(60,187,140,.4)}
.jackpots.offline{opacity:.34;filter:grayscale(.85)}
.jackpots.offline::after{
  content:'OFFLINE — LINK DISABLED';position:absolute;
  font-size:9px;letter-spacing:.18em;color:var(--bone-dim);
}
.jackpots.offline{position:relative;display:flex;align-items:center;justify-content:center}
.jackpots.offline .jp{opacity:.25}
.jp .tick{position:absolute;inset:0;background:rgba(255,208,107,.22);opacity:0;pointer-events:none}
.jp.pulse .tick{animation:jptick .55s ease}
@keyframes jptick{0%{opacity:.6}100%{opacity:0}}

/* -------------------------------------------------------------- gamebar */
.gamebar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 16px;background:rgba(8,3,6,.55);border-bottom:1px solid rgba(201,146,46,.2);
  flex:0 0 auto;
}
.tab{
  font-family:'Bevan',Georgia,serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 22px;border:1px solid var(--brass-lo);border-radius:var(--r);
  background:rgba(10,4,6,.6);color:var(--bone-dim);transition:.16s;
}
.tab:hover{color:var(--bone)}
.tab[aria-selected="true"]{color:#241005;background:linear-gradient(180deg,#e6ad3e,#a8721f);border-color:var(--brass-hi)}
.mode-toggle{display:flex;border:1px solid var(--brass-lo);border-radius:var(--r);overflow:hidden}
.mode-toggle button{padding:8px 14px;font-size:12px;font-weight:600;color:var(--bone-dim)}
.mode-toggle button[aria-pressed="true"]{background:linear-gradient(180deg,#e6ad3e,#a8721f);color:#241005}
.iconbtn{
  width:34px;height:34px;border:1px solid var(--brass-lo);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;
  font-style:italic;font-weight:700;font-size:16px;color:var(--amber);
  background:rgba(10,4,6,.6);transition:.15s;
}
.iconbtn:hover{background:rgba(201,146,46,.2);border-color:var(--brass)}

/* ---------------------------------------------------------------- stage */
.stage{flex:1 1 auto;overflow:auto;padding:16px;display:flex;justify-content:center}
.stage > section{width:100%;max-width:1080px}

/* ----------------------------------------------------------------- chat */
.chatdock{
  flex:0 0 auto;height:200px;display:flex;
  background:linear-gradient(180deg,#150710,#0c0407);
  border-top:1px solid var(--brass-lo);
}
.chatdock.collapsed{height:38px}
.chatmain{flex:1;display:flex;flex-direction:column;min-width:0}
.chathead{
  display:flex;align-items:center;gap:10px;padding:7px 14px;
  border-bottom:1px solid rgba(201,146,46,.18);flex:0 0 auto;
}
.chathead b{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-dim)}
.chathead .count{font-size:11px;color:var(--bone-dim)}
.chatlog{flex:1;overflow-y:auto;padding:8px 14px;font-size:13px;line-height:1.5}
.chatlog::-webkit-scrollbar{width:8px}
.chatlog::-webkit-scrollbar-thumb{background:rgba(201,146,46,.3);border-radius:4px}
.cmsg{margin-bottom:3px;word-wrap:break-word}
.cmsg .nick{color:var(--amber);font-weight:600}
.cmsg .nick.admin::after{content:' ★';color:#ff9a5c}
.cmsg .time{font-size:10px;color:rgba(181,167,148,.5);margin-right:6px;font-family:'DM Mono',monospace}
.cmsg.k-system{color:var(--bone-dim);font-style:italic}
.cmsg.k-join{color:var(--jade)}
.cmsg.k-part{color:rgba(181,167,148,.7)}
.cmsg.k-seat{color:rgba(181,167,148,.8)}
.cmsg.k-emote{color:var(--violet);font-style:italic}
.cmsg.k-win{color:#ffd06b}
.cmsg.k-announce{color:#ff9a5c;font-weight:600;border-left:2px solid #ff9a5c;padding-left:8px}
.cmsg.k-jackpot{
  color:#fff;font-weight:700;padding:6px 10px;border-radius:var(--r);margin:5px 0;
  background:linear-gradient(90deg,rgba(255,90,40,.35),rgba(255,208,107,.12),transparent);
  border-left:3px solid #ffd06b;animation:jpflash 1.4s ease 3;
}
@keyframes jpflash{0%,100%{box-shadow:none}50%{box-shadow:0 0 26px rgba(255,154,92,.5)}}
.chatform{display:flex;gap:8px;padding:8px 14px;border-top:1px solid rgba(201,146,46,.14);flex:0 0 auto}
.chatform input{
  flex:1;background:rgba(0,0,0,.42);border:1px solid var(--brass-lo);
  border-radius:var(--r);padding:7px 11px;color:var(--bone);font-size:13px;min-width:0;
}
.chatform input:focus{border-color:var(--brass);outline:none}

.roster{
  width:190px;flex:0 0 auto;border-left:1px solid rgba(201,146,46,.18);
  display:flex;flex-direction:column;overflow:hidden;
}
.roster h4{padding:7px 12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-dim);border-bottom:1px solid rgba(201,146,46,.14)}
.rosterlist{flex:1;overflow-y:auto;padding:5px 12px;font-size:12px}
.rosterlist li{list-style:none;display:flex;justify-content:space-between;gap:8px;padding:2.5px 0;color:var(--bone-dim)}
.rosterlist li b{color:var(--bone);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rosterlist li .where{font-size:9.5px;opacity:.65;text-transform:uppercase;letter-spacing:.1em}

/* ---------------------------------------------------------- auth gate */
.gate{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:20px;background:radial-gradient(ellipse at 50% 30%, rgba(59,15,28,.9), rgba(8,3,6,.98));
}
.gatecard{
  width:100%;max-width:420px;padding:30px 28px;border-radius:6px;
  background:linear-gradient(180deg,#22101a,#120609);
  border:2px solid var(--brass-lo);box-shadow:var(--shadow);
}
.gatecard h1{
  font-family:'Bevan',Georgia,serif;font-weight:400;font-size:clamp(24px,5vw,34px);line-height:1.05;
  background:linear-gradient(180deg,#ffe9ae 10%,#e0a53a 48%,#8a5c14 56%,#f0c46a 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px;
}
.gatecard .sub{font-size:12px;color:var(--bone-dim);margin-bottom:22px;letter-spacing:.02em}
.field{margin-bottom:13px}
.field label{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-dim);margin-bottom:5px}
.field input{
  width:100%;background:rgba(0,0,0,.45);border:1px solid var(--brass-lo);
  border-radius:var(--r);padding:10px 12px;color:var(--bone);font-size:15px;
}
.field input:focus{border-color:var(--brass);outline:none;box-shadow:0 0 0 3px rgba(201,146,46,.15)}
.field .hint{font-size:10.5px;color:rgba(181,167,148,.7);margin-top:4px}
.gateerr{
  min-height:18px;font-size:12.5px;color:var(--rust);margin:4px 0 12px;
}
.gateactions{display:flex;gap:8px}
.gateactions .btn{flex:1;justify-content:center;text-align:center;padding:11px}
.gateswap{margin-top:16px;font-size:12px;color:var(--bone-dim);text-align:center}
.gateswap button{color:var(--amber);text-decoration:underline;font-size:12px}

/* ------------------------------------------------------------- modal */
.modal{
  position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  padding:20px;
  /* no backdrop-filter: see the note on .overlay in games.css */
  background:radial-gradient(ellipse at 50% 0%, rgba(60,14,26,.92), rgba(5,2,3,.94) 70%);
}
.modalcard{
  width:100%;max-width:660px;max-height:84vh;overflow-y:auto;border-radius:6px;
  background:linear-gradient(180deg,#1e0d16,#110609);
  border:2px solid var(--brass-lo);box-shadow:var(--shadow);
}
.modalhead{
  position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-bottom:1px solid rgba(201,146,46,.24);
  background:linear-gradient(180deg,#2a121c,#1a0a11);
}
.modalhead h3{font-family:'Bevan',serif;font-weight:400;font-size:18px;color:var(--amber);letter-spacing:.03em}
.modalbody{padding:20px}
.modalbody h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-dim);margin:18px 0 8px}
.modalbody h4:first-child{margin-top:0}
.modalbody p{font-size:13px;color:var(--bone-dim);line-height:1.65;margin-bottom:8px}
.modalbody strong{color:var(--bone)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid rgba(201,146,46,.12);font-size:13px}
.kv:first-of-type{border-top:none}
.kv dt{color:var(--bone-dim)}
.kv dd{font-family:'DM Mono',monospace}

/* ------------------------------------------------------------- toasts */
.toasts{position:fixed;top:64px;right:16px;z-index:180;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  padding:10px 15px;border-radius:var(--r);font-size:13px;max-width:330px;
  background:linear-gradient(180deg,#2a121c,#170a10);border:1px solid var(--brass-lo);
  box-shadow:0 10px 30px rgba(0,0,0,.6);animation:toastin .3s cubic-bezier(.2,.9,.3,1.1);
}
.toast.good{border-color:var(--jade);color:#b8f2e0}
.toast.bad{border-color:var(--rust);color:#ffbfb2}
.toast.info{border-color:var(--brass)}
@keyframes toastin{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.toast.out{animation:toastout .3s ease forwards}
@keyframes toastout{to{transform:translateX(30px);opacity:0}}

/* ------------------------------------------------- celebration effects */
#fx{position:fixed;inset:0;z-index:170;pointer-events:none}
.bigwin-overlay{
  position:fixed;inset:0;z-index:175;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
}
.bigwin-overlay .band{
  padding:18px 44px;border-radius:6px;text-align:center;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,208,107,.22), transparent 72%);
  animation:bwin .5s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes bwin{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.bigwin-overlay .label{
  font-family:'Bevan',serif;font-size:clamp(28px,7vw,64px);letter-spacing:.04em;line-height:1;
  background:linear-gradient(180deg,#fff6d8 10%,#f5b942 46%,#a8721f 56%,#ffe9ae 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(245,185,66,.6));
}
.bigwin-overlay .amount{
  font-family:'DM Mono',monospace;font-size:clamp(26px,6vw,52px);color:#fff6d8;
  text-shadow:0 0 30px rgba(245,185,66,.9);margin-top:8px;
}
.bigwin-overlay .sub{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);margin-top:10px}
.screenflash{position:fixed;inset:0;z-index:172;pointer-events:none;background:#fff;opacity:0}
.screenflash.go{animation:flash .5s ease}
@keyframes flash{0%{opacity:.55}100%{opacity:0}}
.jackpot-overlay .label{
  background:linear-gradient(180deg,#fff 10%,#ff9a5c 45%,#c2340f 56%,#ffd06b 92%);
  -webkit-background-clip:text;background-clip:text;
}

/* ------------------------------------------------------------ symtile */
.symtile{display:inline-block;background-size:cover;border-radius:3px;vertical-align:middle;flex:0 0 auto}

@media (max-width:900px){
  .roster{display:none}
  .chatdock{height:170px}
  :root{--tile:64px}
  .jackpots{order:5;max-width:none;flex-basis:100%}
}
@media (max-width:560px){
  :root{--tile:52px}
  .topbar{gap:8px;padding:6px 10px}
  .credit-meter dd{font-size:16px}
  .stage{padding:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* =============================================================================
 * LEPRA BRIEFING — the way in
 * ========================================================================== */
.lepra{
  position:fixed;inset:0;z-index:300;overflow-y:auto;
  background:linear-gradient(180deg,#0e141c,#070a0e 60%);
  padding:32px 20px 60px;
}
.lepra-sheet{
  max-width:760px;margin:0 auto;background:#faf8f4;color:#1b2027;
  border-radius:3px;box-shadow:0 30px 90px rgba(0,0,0,.7);
  border-top:5px solid #17324f;
}
.lepra-head{
  display:flex;gap:16px;align-items:center;padding:26px 34px 20px;
  border-bottom:2px solid #dfd9cf;color:#17324f;
}
.lepra-head h1{
  font-family:'Inter Tight',sans-serif;font-size:clamp(19px,3.4vw,26px);
  font-weight:700;letter-spacing:-.01em;line-height:1.2;color:#17324f;
}
.lepra-sub{font-size:12.5px;color:#5d6673;margin-top:4px}
.crest{flex:0 0 auto;color:#17324f;opacity:.85}
.lepra-body{padding:26px 34px 30px;font-size:15px;line-height:1.72;color:#2b323b}
.lepra-body h2{
  font-family:'Inter Tight',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#17324f;
  margin:26px 0 8px;padding-bottom:5px;border-bottom:1px solid #e2ddd4;
}
.lepra-body p{margin-bottom:13px}
.lepra-body strong{color:#12293f}
.lepra-body em{color:#3c4550}
.lepra-body .lead{font-size:16.5px;line-height:1.75}
.lepra-body .note{
  background:#eef2f6;border-left:3px solid #17324f;padding:11px 15px;
  font-size:13.5px;color:#3c4550;border-radius:0 3px 3px 0;
}
.lepra-body .disclaimer{
  margin-top:24px;padding-top:14px;border-top:1px solid #e2ddd4;
  font-size:12px;color:#6b7480;font-style:italic;
}
.lepra-foot{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 34px;background:#eceae5;border-top:1px solid #dfd9cf;
  font-size:11px;color:#6b7480;
}

/* The first word is the door. It looks exactly like the text around it —
   no underline, no cursor change, no tooltip. */
.secret{
  font:inherit;color:inherit;background:none;border:none;padding:0;margin:0;
  cursor:text;font-weight:inherit;letter-spacing:inherit;
}
.secret:focus-visible{outline:2px solid #17324f;outline-offset:2px}
.secret:active{color:inherit}

/* =============================================================================
 * MODE SELECT
 * ========================================================================== */
.modecard{
  width:min(760px, 100%);padding:34px 30px;border-radius:6px;
  background:linear-gradient(180deg,#22101a,#120609);
  border:2px solid var(--brass-lo);box-shadow:var(--shadow);
}
.modecard h1{
  font-family:'Bevan',Georgia,serif;font-weight:400;font-size:clamp(22px,4.6vw,32px);
  background:linear-gradient(180deg,#ffe9ae 10%,#e0a53a 48%,#8a5c14 56%,#f0c46a 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px;
}
.modecard .sub{font-size:13px;color:var(--bone-dim);margin-bottom:24px}
.modeopts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.modeopts{grid-template-columns:1fr}}
.modeopt{
  text-align:left;padding:20px;border-radius:5px;border:1px solid var(--brass-lo);
  background:linear-gradient(180deg,#2c1119,#190910);transition:.16s;
  display:flex;flex-direction:column;gap:9px;
}
.modeopt:hover{border-color:var(--brass);background:linear-gradient(180deg,#3e1723,#251016);transform:translateY(-3px)}
.mo-title{font-family:'Bevan',serif;font-size:19px;color:var(--amber);letter-spacing:.03em}
.mo-body{font-size:12.5px;color:var(--bone-dim);line-height:1.6}
.mo-tag{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--jade);
  margin-top:auto;padding-top:6px;
}
.modefoot{margin-top:20px;text-align:center}

/* =============================================================================
 * RIGHT RAIL — the boards
 * ========================================================================== */
.body{flex:1 1 auto;display:flex;min-height:0}
.stage{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;justify-content:center}
.stage > section{width:100%;max-width:1080px}

.rail{
  width:258px;flex:0 0 auto;display:flex;flex-direction:column;min-height:0;
  border-left:1px solid var(--brass-lo);background:rgba(8,3,6,.55);
}
.rail.collapsed{width:38px}
.rail.collapsed .railtabs,.rail.collapsed .railbody,.rail.collapsed #onlineCount{display:none}
.railtabs{display:flex;flex:0 0 auto;border-bottom:1px solid rgba(201,146,46,.2)}
.railtab{
  flex:1;padding:10px 6px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone-dim);font-weight:600;transition:.15s;
}
.railtab[aria-selected="true"]{color:#241005;background:linear-gradient(180deg,#e6ad3e,#a8721f)}
.railbody{flex:1;overflow-y:auto;padding:8px 10px}
.railbody::-webkit-scrollbar{width:7px}
.railbody::-webkit-scrollbar-thumb{background:rgba(201,146,46,.3);border-radius:4px}
.railfoot{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-top:1px solid rgba(201,146,46,.18);font-size:11px;color:var(--bone-dim);
}
.rrow{
  display:flex;align-items:center;gap:8px;padding:6px 4px;
  border-bottom:1px solid rgba(201,146,46,.1);font-size:12.5px;
}
.rrow .rank{
  font-family:'DM Mono',monospace;font-size:11px;color:var(--amber-dim);
  width:18px;flex:0 0 auto;text-align:right;
}
.rrow .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .amt{font-family:'DM Mono',monospace;color:var(--amber);font-size:12px}
.rrow.top1 .who{color:#ffd06b;font-weight:600}
.rrow.you{background:rgba(201,146,46,.12);border-radius:3px}
.rrow .game{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,234,222,.45);display:block}
.rrow .when{font-size:9.5px;color:rgba(242,234,222,.4);font-family:'DM Mono',monospace}
.railempty{padding:20px 8px;text-align:center;font-size:12px;color:var(--bone-dim);font-style:italic}

.modenote{font-size:11.5px;color:var(--bone-dim);margin-left:auto}

@media (max-width:980px){
  .rail{display:none}
}

/* =============================================================================
 * AUTH — the choice comes first
 * ========================================================================== */
h1.grand{
  font-family:'Bevan',Georgia,serif;font-weight:400;line-height:.95;
  font-size:clamp(30px,7vw,52px);letter-spacing:.005em;text-align:center;
  background:linear-gradient(180deg,#fff6d8 6%,#f0c46a 34%,#c9922e 50%,#7a5719 58%,#f0c46a 78%,#ffe9ae 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.55)) drop-shadow(0 10px 26px rgba(201,146,46,.35));
  margin-bottom:8px;
}
h1.grand span{display:block;font-size:.72em;letter-spacing:.04em}
.gatecard .sub{text-align:center}
.authopts{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.authopt{
  text-align:left;padding:20px 22px;border-radius:5px;border:1px solid var(--brass-lo);
  background:linear-gradient(180deg,#2c1119,#190910);transition:.16s;
  display:flex;flex-direction:column;gap:7px;
}
.authopt:hover{
  border-color:var(--brass-hi);transform:translateY(-3px);
  background:linear-gradient(180deg,#48202e,#2a1119);
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.ao-title{font-family:'Bevan',serif;font-size:21px;color:var(--amber);letter-spacing:.02em}
.ao-body{font-size:12.5px;color:var(--bone-dim);line-height:1.55}
.gateswap{display:flex;align-items:center;justify-content:space-between;gap:10px}
#btnBackToChoice{color:var(--bone-dim);font-size:12px}
#btnBackToChoice:hover{color:var(--amber)}

/* =============================================================================
 * TOPBAR — prominent balance, fancier jackpots
 * ========================================================================== */
.venue b{
  font-family:'Bevan',Georgia,serif;font-size:19px;letter-spacing:.01em;
  background:linear-gradient(180deg,#fff6d8 10%,#f0c46a 42%,#a8721f 56%,#ffe9ae 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));
}
.venue span{color:#a8926e;letter-spacing:.14em;font-size:8.5px}

/* The balance is the number that matters to the player, so it outranks the
   jackpot ribbon rather than competing with it. */
.credit-meter{
  padding:6px 20px;border:2px solid var(--brass);border-radius:5px;
  background:linear-gradient(180deg,#150a05,#080304);
  box-shadow:inset 0 0 28px rgba(245,185,66,.16), 0 0 22px rgba(201,146,46,.25);
  position:relative;overflow:hidden;
}
.credit-meter::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,246,216,.13) 50%,transparent 65%);
  transform:translateX(-120%);
}
.credit-meter.bump::after{animation:sheen .8s ease}
@keyframes sheen{to{transform:translateX(120%)}}
.credit-meter dt{font-size:9px;letter-spacing:.26em;color:var(--amber-dim)}
.credit-meter dd{
  font-size:30px;font-weight:500;line-height:1.05;color:#ffe9ae;
  text-shadow:0 0 18px rgba(245,185,66,.75), 0 0 44px rgba(245,185,66,.3);
}
.credit-meter.offlinebal{border-color:#5a6470;box-shadow:inset 0 0 20px rgba(140,160,180,.12)}
.credit-meter.offlinebal dd{color:#cfe0f0;text-shadow:0 0 16px rgba(160,200,240,.5)}
.credit-meter.offlinebal dt{color:#8fa3b8}

/* Jackpot meters: bevelled, lit from behind, and the Grand visibly breathes. */
.jackpots{
  padding:3px;border:2px solid var(--brass);border-radius:5px;
  background:linear-gradient(180deg,#0a0406,#050203);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.9), 0 0 20px rgba(201,146,46,.22);
}
.jp{border-radius:3px;padding:5px 12px;overflow:hidden}
.jp::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(ellipse at 50% 130%, currentColor, transparent 68%);
}
.jp.grand{color:#ff7a3d}
.jp.major{color:#a06eff}
.jp.minor{color:#3cbb8c}
.jp dt{font-size:8.5px;letter-spacing:.26em;position:relative}
.jp dd{font-size:17px;font-weight:500;position:relative;letter-spacing:.01em}
.jp.grand dd{
  color:#ffd06b;
  text-shadow:0 0 14px rgba(255,154,92,.9), 0 0 34px rgba(255,90,40,.55);
  animation:grandbreathe 3.2s ease-in-out infinite;
}
@keyframes grandbreathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.28)}}
.jp.major dd{color:#e0ccff;text-shadow:0 0 12px rgba(160,110,255,.7)}
.jp.minor dd{color:#b8f2e0;text-shadow:0 0 12px rgba(60,187,140,.6)}

.btn.dowork{
  border-color:#4a5560;background:linear-gradient(180deg,#26313c,#161d24);
  color:#c3d2e0;font-weight:700;letter-spacing:.06em;
}
.btn.dowork:hover{background:linear-gradient(180deg,#33414f,#1e262f);border-color:#7b8b9c}

/* =============================================================================
 * DURESS SCREEN — a plausible AustLII page, rendered locally
 * ========================================================================== */
/* NOTE: this must never share a class name with the DO WORK button. It used to
   be called .duress, which the button also carried as a modifier — so the
   button inherited position:fixed;inset:0;z-index:9999 and covered the entire
   app with itself. A <button> centres its label, which made it look like a
   blank screen with "DO WORK" floating in the middle. */
.austlii-page{position:fixed;inset:0;z-index:9999;background:#fff;overflow-y:auto;color:#000}
.duress-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:5px 10px;background:#efefef;border-bottom:1px solid #ccc;
  font:12px/1.4 Verdana,Arial,sans-serif;color:#333;position:sticky;top:0;
}
.duress-close{font-size:19px;line-height:1;color:#666;padding:0 6px}
.duress-close:hover{color:#000}
.duress-body{max-width:800px;margin:0 auto;padding:16px 20px 60px;font:13px/1.55 Verdana,Arial,sans-serif}
.duress-body h1{font-size:15px;font-weight:700;margin:14px 0 4px;color:#000}
.duress-body h2{font-size:14px;font-weight:700;margin:0 0 14px;color:#333}
.duress-body p{margin:0 0 11px}
.duress-body p.ind{padding-left:34px}
.duress-nav{font-size:11px;color:#00c}
.duress-body a{color:#00c;text-decoration:underline}
.duress-note{margin-top:26px;padding-top:10px;border-top:1px solid #ddd;font-size:11px;color:#555}
.duress-hint{font-size:10px;color:#bbb;margin-top:20px}

/* =============================================================================
 * CHAT — flair, gifts, denser layout
 * ========================================================================== */
.cmsg{padding:2px 6px;border-radius:3px;margin-bottom:2px}

.cmsg .ptitle{
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.12);padding:1px 5px;border-radius:3px;margin-right:5px;color:var(--bone-dim);
}
.cmsg.k-gift{color:#ffd06b;border-left:2px solid #ffd06b;padding-left:8px}
.cmsg.k-round{color:#8ef0c4;border-left:2px solid #3cbb8c;padding-left:8px}
.chatlog{scroll-behavior:smooth}
.chatform .btn{flex:0 0 auto}
.chattools{display:flex;gap:5px;align-items:center;padding:0 14px 6px}
.chattools button{
  font-size:10.5px;padding:3px 8px;border:1px solid rgba(201,146,46,.3);
  border-radius:3px;color:var(--bone-dim);
}
.chattools button:hover{color:var(--amber);border-color:var(--brass)}
.chatmention{background:rgba(245,185,66,.18);box-shadow:inset 2px 0 0 var(--amber)}

/* =============================================================================
 * WHEEL
 * ========================================================================== */
.wheelwrap-big{display:flex;flex-direction:column;align-items:center;gap:18px;padding:8px 0}
.bigwheel{
  width:280px;height:280px;border-radius:50%;position:relative;
  border:8px solid var(--brass);box-shadow:0 0 48px rgba(245,185,66,.5),inset 0 0 40px rgba(0,0,0,.75);
  transition:transform 4.6s cubic-bezier(.15,.9,.15,1);
}
.bigwheel .hubcap{
  position:absolute;inset:34%;border-radius:50%;background:linear-gradient(180deg,#2a1204,#100601);
  border:3px solid var(--brass-hi);display:flex;align-items:center;justify-content:center;
  font-family:'Bevan',serif;font-size:13px;color:var(--amber);text-align:center;line-height:1.1;
}
.wheelpin{
  width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;
  border-top:24px solid var(--amber);filter:drop-shadow(0 3px 6px rgba(0,0,0,.7));margin-bottom:-12px;z-index:2;
}
.wheelprize{
  font-family:'DM Mono',monospace;font-size:clamp(26px,6vw,44px);color:#fff6d8;
  text-shadow:0 0 28px rgba(245,185,66,.9);min-height:52px;
}

/* =============================================================================
 * SHOP
 * ========================================================================== */
.shopgroups{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.shopgroup{
  padding:6px 13px;border:1px solid var(--brass-lo);border-radius:3px;
  font-size:11.5px;letter-spacing:.06em;color:var(--bone-dim);
}
.shopgroup[aria-selected="true"]{background:linear-gradient(180deg,#e6ad3e,#a8721f);color:#241005;border-color:var(--brass-hi)}
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:11px}
.shopitem{
  border:1px solid var(--brass-lo);border-radius:5px;padding:14px;
  background:linear-gradient(180deg,#22101a,#140809);display:flex;flex-direction:column;gap:8px;
}
.shopitem.owned{border-color:var(--jade)}
.shopitem.equipped{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}
.si-head{display:flex;align-items:baseline;gap:8px}
.si-name{font-weight:600;font-size:13.5px;flex:1}
.si-price{font-family:'DM Mono',monospace;font-size:12px;color:var(--amber)}
.si-blurb{font-size:11.5px;color:var(--bone-dim);line-height:1.5;flex:1}
.si-actions{display:flex;gap:6px}
.si-actions .btn{flex:1;justify-content:center;text-align:center}
.si-icon{font-size:18px}
.si-tag{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--jade)}
.shopbal{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:9px 12px;margin-bottom:14px;border-radius:4px;
  background:rgba(245,185,66,.08);border:1px solid var(--brass-lo);
}
.shopbal b{font-family:'DM Mono',monospace;color:var(--amber);font-size:16px}
.shopnote{font-size:11.5px;color:var(--bone-dim);font-style:italic;margin-top:14px;line-height:1.6}

/* =============================================================================
 * ADMIN PANEL
 * ========================================================================== */
.admintools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.admintools input{
  flex:1;min-width:150px;background:rgba(0,0,0,.4);border:1px solid var(--brass-lo);
  border-radius:3px;padding:7px 10px;color:var(--bone);font-size:13px;
}
.admintable{width:100%;border-collapse:collapse;font-size:12.5px}
.admintable th{
  font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--amber-dim);
  text-align:left;padding:0 8px 7px;font-weight:500;position:sticky;top:0;background:#180a10;
}
.admintable td{padding:6px 8px;border-top:1px solid rgba(201,146,46,.12);vertical-align:middle}
.admintable tr.isadmin td{background:rgba(245,185,66,.07)}
.admintable tr.isbanned td{opacity:.5}
.admintable tr.isonline .anick::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--jade);box-shadow:0 0 6px var(--jade);margin-right:6px;
}
.admintable .amoney{font-family:'DM Mono',monospace;color:var(--amber);text-align:right}
.admintable input.aedit{
  width:96px;background:rgba(0,0,0,.45);border:1px solid var(--brass-lo);border-radius:3px;
  padding:4px 6px;color:var(--bone);font-family:'DM Mono',monospace;font-size:12px;
}
.admintable .btn{padding:3px 8px;font-size:10.5px}
.adminwrap{max-height:52vh;overflow-y:auto}
.adminrow-actions{display:flex;gap:4px;flex-wrap:wrap}

/* =============================================================================
 * TABLE MATES — who else is here
 * ========================================================================== */
.tablemates{
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:9px 12px;
  border:1px solid var(--brass-lo);border-radius:5px;background:rgba(8,3,6,.5);
}
.tablemates .tm-label{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-dim);margin-right:4px;
}
.mate{
  display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:14px;font-size:12px;
  background:rgba(0,0,0,.35);border:1px solid rgba(201,146,46,.25);
}
.mate.you{border-color:var(--brass);background:rgba(245,185,66,.14)}
.mate.aura-gold{box-shadow:0 0 12px rgba(245,185,66,.55);border-color:#f5b942}
.mate.aura-neon{box-shadow:0 0 12px rgba(90,190,255,.6);border-color:#5abeff}
.mate .stake{font-family:'DM Mono',monospace;font-size:11px;color:var(--amber)}
.mate .streak{font-size:10px}
.mate .streak.up{color:var(--jade)}
.mate .streak.down{color:var(--rust)}
.mate .gift{opacity:.45;cursor:pointer;font-size:12px}
.mate .gift:hover{opacity:1}
.tablemates.empty{opacity:.5;font-size:12px;color:var(--bone-dim)}

/* =============================================================================
 * LEVELS
 * ========================================================================== */
.lvlchip{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-width:26px;height:18px;padding:0 5px;border-radius:9px;
  font-family:'DM Mono',monospace;font-size:10.5px;font-weight:500;
  background:linear-gradient(180deg,#f3c65c,#a8721f);color:#2a1204;
  border:1px solid #ffe9ae;box-shadow:0 0 8px rgba(245,185,66,.35);
  margin-right:6px;cursor:pointer;
}
.lvlchip.sm{min-width:22px;height:15px;font-size:9px;margin-right:5px}
.mylevel{display:flex;align-items:center;gap:5px;margin:2px 0}
.lvlrankmini{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim)}
.lvlminibar{
  width:46px;height:3px;border-radius:2px;background:rgba(0,0,0,.5);overflow:hidden;display:inline-block;
}
.lvlminibar > span{display:block;height:100%;background:linear-gradient(90deg,#c9922e,#ffe9ae)}

.lvlwrap{
  padding:14px 16px;border-radius:5px;margin-bottom:16px;
  background:linear-gradient(180deg,rgba(245,185,66,.10),rgba(0,0,0,.3));
  border:1px solid var(--brass-lo);
}
.lvlhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.lvlnum{
  font-family:'Bevan',serif;font-size:26px;line-height:1;color:#2a1204;
  background:linear-gradient(180deg,#ffe08a,#c9922e);border-radius:6px;padding:4px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 18px rgba(245,185,66,.4);
}
.lvlrank{font-family:'Bevan',serif;font-size:17px;color:var(--amber);letter-spacing:.03em;flex:1}
.lvlnext{font-family:'DM Mono',monospace;font-size:11px;color:var(--bone-dim)}
.lvlbar{height:9px;border-radius:5px;background:rgba(0,0,0,.6);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
.lvlbar > span{
  display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#a8721f,#f3c65c 70%,#fff6d8);
  box-shadow:0 0 12px rgba(245,185,66,.6);transition:width .5s ease;
}
.lvlnote{font-size:10.5px;color:var(--bone-dim);margin-top:6px;letter-spacing:.04em}

/* =============================================================================
 * PROFILE
 * ========================================================================== */
.profhead{margin-bottom:16px}
.profname{
  font-family:'Bevan',serif;font-size:clamp(20px,4vw,28px);color:var(--amber);
  letter-spacing:.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:4px 8px;border-radius:4px;
}
.profmeta{font-size:12px;color:var(--bone-dim);margin-top:5px;padding-left:8px}
.profmeta .on{color:var(--jade)}
.profmeta .off{color:var(--bone-dim)}

.profcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px;margin-bottom:20px}
.profcard{
  padding:12px;border-radius:5px;text-align:center;
  background:linear-gradient(180deg,#22101a,#140809);border:1px solid var(--brass-lo);
}
.profcard dt{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-dim)}
.profcard dd{font-family:'DM Mono',monospace;font-size:19px;color:var(--amber);margin:5px 0 2px}
.profcard small{font-size:10px;color:var(--bone-dim)}
.profcard.up dd{color:#8ef0c4}
.profcard.down dd{color:#ffb3a3}

.proftable{width:100%;border-collapse:collapse;font-size:12.5px}
.proftable th{
  font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--amber-dim);
  text-align:left;padding:0 8px 7px;font-weight:500;
}
.proftable th.num,.proftable td.num{text-align:right;font-family:'DM Mono',monospace}
.proftable td{padding:7px 8px;border-top:1px solid rgba(201,146,46,.12)}
.proftable td.up{color:#8ef0c4}
.proftable td.down{color:#ffb3a3}
.profactions{margin-top:18px;text-align:center}

.matename{cursor:pointer;border-bottom:1px dotted rgba(245,185,66,.4)}
.matename:hover{color:var(--amber)}
.cmsg .nick{cursor:pointer}
.cmsg .nick:hover{text-decoration:underline}
.rrow .who{cursor:pointer}
.rrow .who:hover{color:var(--amber)}
.cmsg.k-level{color:#ffd06b;border-left:2px solid var(--brass);padding-left:8px}

/* reactions — turning an announcement into something the room can answer */
.reactbar{display:inline-flex;gap:3px;margin-left:8px;vertical-align:middle}
.reactbar button{
  font-size:12px;line-height:1;padding:2px 5px;border-radius:10px;opacity:.5;
  background:rgba(255,255,255,.07);transition:.12s;
}
.reactbar button:hover{opacity:1;background:rgba(245,185,66,.25);transform:scale(1.15)}
.cmsg.k-react{color:var(--bone-dim)}
.cmsg.k-react .reacticon{font-size:15px;vertical-align:middle}
.toast.clickable{cursor:pointer}
.toast.clickable:hover{border-color:var(--amber)}

/* =============================================================================
 * LAYOUT v2 — chat down the left, boards down the right, game in the middle.
 * The bottom dock is gone so a pokie cabinet fits on screen without scrolling.
 * ========================================================================== */
.body{flex:1 1 auto;display:flex;min-height:0;overflow:hidden}

.chatrail{
  width:300px;flex:0 0 auto;display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--brass-lo);
  background:linear-gradient(180deg,#160811,#0c0407);
}
.chatrail.collapsed{width:34px}
.chatrail.collapsed .chatlog,
.chatrail.collapsed .chatform,
.chatrail.collapsed .chattools,
.chatrail.collapsed .chathead b,
.chatrail.collapsed .chathead .count{display:none}
.chatrail .chathead{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-bottom:1px solid rgba(201,146,46,.2);
}
.chatrail .chathead b{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-dim);flex:1;
}
.chatrail .chathead .count{font-size:10.5px;color:var(--bone-dim)}
.chatrail .chathead .btn{margin-left:auto;padding:2px 8px;font-size:12px;line-height:1.2}
.chatrail .chatlog{flex:1 1 auto;overflow-y:auto;padding:8px 11px;font-size:12.5px;min-height:0}
.chatrail .chattools{
  flex:0 0 auto;display:flex;gap:4px;flex-wrap:wrap;padding:0 11px 6px;
}
.chatrail .chatform{
  flex:0 0 auto;display:flex;gap:6px;padding:8px 11px;
  border-top:1px solid rgba(201,146,46,.14);
}
.chatrail .chatform input{min-width:0;flex:1}
.chatrail .chatform .btn{padding:7px 11px;font-size:11.5px}

.stage{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;justify-content:center;min-width:0}
.stage > section{width:100%;max-width:1000px}

@media (max-width:1280px){ .chatrail{width:250px} }
@media (max-width:1080px){ .chatrail{width:34px} .chatrail .chatlog,.chatrail .chatform,
  .chatrail .chattools,.chatrail .chathead b,.chatrail .chathead .count{display:none} }
@media (max-width:980px){ .chatrail{display:none} }

/* ---------------------------- topbar v2 ---------------------------------- */
.topbar{
  display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
  padding:7px 16px;
}
.venue{flex:0 0 auto}
/* jackpots take the middle and stay centred */
.jackpots{
  flex:1 1 auto;max-width:620px;margin:0 auto;
  display:flex;justify-content:center;
}
.topbar-right{margin-left:0;flex:0 0 auto;display:flex;align-items:center;gap:9px}
.topbar-right .credit-meter{order:-1}

@media (max-width:1180px){
  .topbar{flex-wrap:wrap}
  .jackpots{order:5;flex-basis:100%;max-width:none;margin-top:6px}
  .topbar-right{margin-left:auto}
}

/* ------------------ the level chip must be unmistakable ------------------ */
/* It used to be a small gold pill on a dark-gold topbar and disappeared into
   it. Now it is a flat bright plate with a hard border and dark bold text. */
.lvlchip{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-width:32px;height:21px;padding:0 7px;border-radius:4px;
  font-family:'DM Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.02em;
  background:#ffd75e;color:#1a0d02;
  border:1px solid #fff6d8;
  box-shadow:0 0 0 1px rgba(0,0,0,.85), 0 0 12px rgba(255,215,94,.5);
  margin-right:7px;cursor:pointer;text-shadow:none;
}
.lvlchip.sm{min-width:26px;height:17px;font-size:10px;margin-right:5px}
.mylevel{
  display:flex;align-items:center;gap:6px;margin:3px 0;
  padding:2px 6px 2px 2px;border-radius:5px;background:rgba(0,0,0,.45);
}
.lvlrankmini{
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:#e8d3ab;font-weight:600;
}
.lvlminibar{width:44px;height:4px;border-radius:2px;background:rgba(0,0,0,.7);overflow:hidden;display:inline-block}
.lvlminibar > span{display:block;height:100%;background:linear-gradient(90deg,#c9922e,#ffe9ae)}

/* empty flex children should not leave gaps or bordered ghosts */
.actionrow:empty,.chiprow:empty,.bjmsg:empty,.tablemates:empty{display:none}

/* ------------------------------ shop rentals ---------------------------- */
.shopitem.rental{border-style:dashed}
.si-tag.rent{color:#ffd06b}
.si-tag.muted{color:var(--bone-dim)}
.si-actions{flex-wrap:wrap}

/* ------------------------- new chat nameplates -------------------------- */

/* ------------------------------ new auras ------------------------------- */
.mate.aura-crimson,.pkseat.aura-crimson{box-shadow:0 0 14px rgba(212,80,58,.6);border-color:#d4503a}
.mate.aura-jade,.pkseat.aura-jade{box-shadow:0 0 14px rgba(60,187,140,.6);border-color:#3cbb8c}

/* =============================================================================
 * NAMEPLATES — a small lit plate that sits directly BEHIND THE NAME.
 * Distinct from a text background, which tints the whole message row. Owning
 * both layers: plate on the name, wash on the line.
 * ========================================================================== */
.nick.plate,.matename.plate{
  display:inline-block;padding:1px 8px;border-radius:4px;
  position:relative;line-height:1.35;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 3px rgba(0,0,0,.6);
  text-shadow:0 1px 1px rgba(0,0,0,.6);
}
.matename.plate{border-bottom-style:solid}

.plate-gold{
  background:linear-gradient(180deg,#ffe9ae,#d09426 55%,#8a5c14);
  color:#2a1204 !important;border-color:#fff6d8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 0 12px rgba(245,185,66,.65);
}
.plate-crimson{
  background:linear-gradient(180deg,#e2534a,#8f1622 55%,#5a0c14);
  color:#fff2ee !important;border-color:#ff9a8a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px rgba(212,80,58,.7);
}
.plate-jade{
  background:linear-gradient(180deg,#5fd8a4,#1f8a5e 55%,#0d4a32);
  color:#eafff5 !important;border-color:#9ff5cc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px rgba(60,187,140,.7);
}
.plate-violet{
  background:linear-gradient(180deg,#c9a6ff,#7c3fe0 55%,#3f1a80);
  color:#f6efff !important;border-color:#dcc6ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px rgba(139,92,246,.75);
  animation:platepulse 2.6s ease-in-out infinite;
}
@keyframes platepulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 9px rgba(139,92,246,.5)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 20px rgba(139,92,246,.95)}
}
.plate-ice{
  background:linear-gradient(180deg,#e8f8ff,#7fd8ff 50%,#2a7fb5);
  color:#0a2634 !important;border-color:#ffffff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 0 12px rgba(127,216,255,.8);
  overflow:hidden;
}
.plate-ice::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  transform:translateX(-140%);animation:iceshine 3.4s ease-in-out infinite;
}
@keyframes iceshine{0%,70%{transform:translateX(-140%)}100%{transform:translateX(140%)}}
.plate-ember{
  background:linear-gradient(180deg,#ffb27a,#e2531a 55%,#7d2607);
  color:#fff3ea !important;border-color:#ffc9a8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px rgba(255,122,61,.75);
  animation:emberflicker 1.9s ease-in-out infinite;
}
@keyframes emberflicker{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 10px rgba(255,122,61,.6)}
  40%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 18px rgba(255,160,80,.95)}
  62%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px rgba(255,110,50,.7)}
}
.plate-mono{
  background:linear-gradient(180deg,#e2e9f0,#8fa0b2 55%,#4a5866);
  color:#10171e !important;border-color:#f2f6fa;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 9px rgba(180,200,220,.45);
}
.plate-rainbow{
  background:linear-gradient(100deg,#ff6b6b,#ffd06b,#5cf0a8,#7fd8ff,#c9a6ff,#ff6b6b);
  background-size:320% 100%;animation:plateroll 6s linear infinite;
  color:#1a0d02 !important;border-color:#ffffff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 16px rgba(255,255,255,.5);
}
@keyframes plateroll{to{background-position:320% 0}}
.plate-gilt{
  background:linear-gradient(100deg,#8a5c14,#fff6d8 42%,#c9922e 58%,#8a5c14);
  background-size:280% 100%;animation:plateroll 4.5s linear infinite;
  color:#2a1204 !important;border-color:#fff6d8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 18px rgba(245,185,66,.8);
}

/* =============================================================================
 * TEXT BACKGROUNDS — the whole message row. Deliberately quiet: anything loud
 * enough to notice behind a full line makes the chat unreadable for everyone.
 * ========================================================================== */
.cmsg.has-bg{padding:4px 8px;margin:3px 0;border-radius:4px}
.bg-slate{background:linear-gradient(90deg,rgba(150,168,186,.18),rgba(150,168,186,.04) 80%);box-shadow:inset 2px 0 0 #96a8ba}
.bg-wine{background:linear-gradient(90deg,rgba(143,22,34,.30),rgba(143,22,34,.05) 80%);box-shadow:inset 2px 0 0 #8f1622}
.bg-forest{background:linear-gradient(90deg,rgba(20,97,74,.32),rgba(20,97,74,.05) 80%);box-shadow:inset 2px 0 0 #14614a}
.bg-indigo{background:linear-gradient(90deg,rgba(58,66,150,.32),rgba(58,66,150,.05) 80%);box-shadow:inset 2px 0 0 #5a63c8}
.bg-carbon{
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 4px),
    linear-gradient(90deg,rgba(40,46,54,.75),rgba(40,46,54,.15) 85%);
  box-shadow:inset 2px 0 0 #78848f;
}
.bg-aurora{
  background:linear-gradient(100deg,rgba(60,187,140,.24),rgba(139,92,246,.24),rgba(60,187,140,.24));
  background-size:300% 100%;animation:auroradrift 11s ease-in-out infinite;
  box-shadow:inset 2px 0 0 #7ee0c0;
}
@keyframes auroradrift{0%,100%{background-position:0 0}50%{background-position:300% 0}}

/* =============================================================================
 * DO WORK — it needs to be findable in a hurry.
 * ========================================================================== */
.btn.dowork{
  position:relative;
  border-color:#6f8296;
  background:linear-gradient(180deg,#2d3a47,#171f27);
  color:#dbe7f2;
  box-shadow:0 0 12px rgba(120,170,220,.35), inset 0 1px 0 rgba(255,255,255,.14);
  animation:doworkglow 2.4s ease-in-out infinite;
}
@keyframes doworkglow{
  0%,100%{box-shadow:0 0 9px rgba(120,170,220,.3), inset 0 1px 0 rgba(255,255,255,.14)}
  50%{box-shadow:0 0 20px rgba(150,200,255,.75), 0 0 34px rgba(120,170,220,.35),
      inset 0 1px 0 rgba(255,255,255,.2)}
}
.btn.dowork:hover{
  background:linear-gradient(180deg,#3c4b5b,#202a34);border-color:#a9c4dd;color:#fff;
  animation:none;box-shadow:0 0 24px rgba(160,210,255,.9), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ---------------------- the Grand meter while it climbs ------------------ */
.jp.grand.climbing dd{
  color:#fff3cf;
  text-shadow:0 0 18px rgba(255,200,120,1), 0 0 40px rgba(255,120,50,.7);
}
.jp.grand.reset dd{animation:jpreset .9s ease}
@keyframes jpreset{0%{filter:brightness(2.4)}100%{filter:brightness(1)}}

/* live head count on each game tab — you can see which room has people in it */
.tab{position:relative}
.tabcount{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;margin-left:7px;border-radius:9px;
  font-family:'DM Mono',monospace;font-size:10px;font-weight:500;
  background:rgba(0,0,0,.55);color:#8ef0c4;border:1px solid rgba(60,187,140,.5);
  vertical-align:middle;
}
.tab[aria-selected="true"] .tabcount{background:rgba(0,0,0,.3);color:#1a0d02;border-color:rgba(0,0,0,.3)}
.tab.busiest .tabcount{
  color:#fff;background:#2e9c6c;border-color:#8ef0c4;
  animation:tabbusy 2.2s ease-in-out infinite;
}
@keyframes tabbusy{0%,100%{box-shadow:0 0 0 0 rgba(60,187,140,.5)}50%{box-shadow:0 0 0 5px rgba(60,187,140,0)}}

/* a name inside a system message is a link to that player, like any other */
.cmsg .sysnick{
  color:var(--amber);font-weight:600;cursor:pointer;
  border-bottom:1px dotted rgba(245,185,66,.45);
}
.cmsg .sysnick:hover{color:#fff6d8;border-bottom-style:solid}
.cmsg.k-join .sysnick{color:#8ef0c4;border-bottom-color:rgba(60,187,140,.5)}
.cmsg.k-part .sysnick{color:#c9bda9}

/* =============================================================================
 * RULES PANEL — the two things people open it for, first.
 * ========================================================================== */
.ip-lead{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
@media (max-width:660px){.ip-lead{grid-template-columns:1fr}}
.ip-block{
  padding:14px 16px;border-radius:6px;
  background:linear-gradient(180deg,rgba(245,185,66,.09),rgba(0,0,0,.28));
  border:1px solid var(--brass-lo);
}
.ip-block h4{margin:0 0 4px}
.ip-sub{font-size:11px;color:var(--bone-dim);margin:0 0 10px;letter-spacing:.02em}
.ip-big{font-size:14px;line-height:1.6;color:var(--bone);margin-bottom:4px}
.ip-big b{color:var(--amber)}
.ip-block p{font-size:13px;line-height:1.6}
.ip-block p b{color:var(--amber)}
.ip-top{
  display:flex;align-items:center;gap:10px;padding:6px 0;
  border-top:1px solid rgba(201,146,46,.14);
}
.ip-top:first-of-type{border-top:none}
.ip-rank{
  width:19px;height:19px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Mono',monospace;font-size:10.5px;
  background:linear-gradient(180deg,#f3c65c,#a8721f);color:#2a1204;
}
.ip-name{flex:1;font-size:13px;font-weight:500}
.ip-pay{font-family:'DM Mono',monospace;font-size:15px;color:#8ef0c4}
.pt tr.top td{color:#ffe9ae;font-weight:500}
.note-sm{font-size:11.5px;color:var(--bone-dim);line-height:1.6;font-style:italic}
.note-sm b{color:var(--bone);font-style:normal}


/* =============================================================================
 * CHAT — a system line is one line. These kinds are namespaced k-* precisely so
 * they cannot pick up component styling: `seat` used to match the blackjack
 * .seat rules and rendered as a 172px-tall bordered box.
 * ========================================================================== */
.cmsg{
  display:block;padding:2px 6px;border-radius:3px;margin-bottom:2px;
  min-height:0;border:0;background:none;
  line-height:1.45;
}
.cmsg.k-seat,.cmsg.k-join,.cmsg.k-part,.cmsg.k-system,.cmsg.k-level{
  display:block;padding:1px 6px;margin-bottom:1px;
  font-size:12px;color:var(--bone-dim);
}
.cmsg.k-seat{color:rgba(200,186,164,.85)}
.cmsg.k-join{color:#8ef0c4}
.cmsg.k-part{color:rgba(181,167,148,.7)}
.cmsg.k-level{color:#ffd06b;border-left:2px solid var(--brass);padding-left:8px}
.cmsg .sysnick{display:inline;padding:0;border-radius:0;box-shadow:none;background:none}
.cmsg .time{margin-right:5px}


/* =============================================================================
 * THE GRAND — it has the middle of the bar to itself now, so use it.
 * ========================================================================== */
.jackpots{
  flex:1 1 auto;max-width:none;margin:0 auto;display:flex;justify-content:center;
  border:0;background:none;box-shadow:none;padding:0;
}
.jp.grand{
  flex:0 1 auto;min-width:min(560px,100%);padding:5px 34px 6px;text-align:center;
  position:relative;overflow:hidden;border-radius:8px;
  background:
    radial-gradient(ellipse at 50% 130%, rgba(255,190,80,.28), transparent 68%),
    linear-gradient(180deg,#2b0a14,#140409);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.9),
    inset 0 0 0 2px rgba(201,146,46,.55),
    inset 0 -12px 26px rgba(0,0,0,.55),
    0 0 26px rgba(245,185,66,.22);
}
.jp.grand::before{
  content:'';position:absolute;inset:-60%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,205,120,.09) 0deg 4deg, transparent 4deg 15deg);
  animation:firays 18s linear infinite;
}
.jp.grand::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,#c9922e 16%,#fff3cf 50%,#c9922e 84%,transparent);
}
.jp.grand dt{
  font-family:'Bevan',Georgia,serif;font-weight:400;
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:rgba(255,225,180,.72);margin-bottom:1px;position:relative;
}
.jp.grand dd{
  font-family:'Bevan',Georgia,serif;line-height:.98;position:relative;
  font-size:clamp(26px,3.2vw,46px);letter-spacing:.005em;
  background:linear-gradient(180deg,#fff8e2 4%,#ffd75e 28%,#e0a53a 46%,#8a5c14 57%,#f3c65c 76%,#fff8e2 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(245,185,66,.55));
  font-variant-numeric:tabular-nums;
}
.jp.grand .jp-sub{
  display:block;position:relative;
  font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,225,180,.5);margin-top:2px;
}
.jp.grand.climbing dd{
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.75)) drop-shadow(0 0 40px rgba(255,200,110,1));
}
.jp.grand.pulse{animation:grandpulse .8s ease}
@keyframes grandpulse{0%{transform:scale(1)}35%{transform:scale(1.022)}100%{transform:scale(1)}}
.jackpots.offline .jp.grand{filter:grayscale(.85) brightness(.6)}
.jackpots.offline::after{content:none}

@media (max-width:1180px){
  .jp.grand{min-width:0;width:100%;padding:4px 16px 5px}
  .jp.grand dd{font-size:clamp(22px,6vw,34px)}
}

/* A milestone banner: the same fanfare as a win, with no money figure — because
   a level-up is not a win and "BIG WIN $0.00" is nonsense. */
.bigwin-overlay.milestone .label{
  background:linear-gradient(180deg,#fff8e2 6%,#8ef0c4 34%,#2e9c6c 54%,#8ef0c4 84%,#fff8e2 99%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.65)) drop-shadow(0 0 30px rgba(60,230,160,.6));
}
.bigwin-overlay.milestone .note{
  font-family:'Bevan',Georgia,serif;font-size:clamp(15px,2.6vw,24px);
  letter-spacing:.08em;text-transform:uppercase;color:#d8f7ea;margin-top:6px;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}

/* =============================================================================
 * POLICE LIGHTS
 * A strip of red and blue under the venue line, alternating the way a light bar
 * does — one side lit while the other is dark, not both pulsing together.
 * ========================================================================== */
.copbar{
  display:flex;gap:2px;align-items:stretch;
  height:4px;width:100%;max-width:200px;margin-top:4px;border-radius:2px;
  overflow:hidden;
}
.copbar i{
  flex:1;display:block;border-radius:1px;
  background:#3a1420;
}
/* odd cells are red, even are blue, and the two halves swap on the beat */
.copbar i:nth-child(odd){ animation:copred .7s steps(1) infinite; }
.copbar i:nth-child(even){ animation:copblue .7s steps(1) infinite; }
@keyframes copred{
  0%,49%{background:#ff2d3c;box-shadow:0 0 9px #ff2d3c,0 0 18px rgba(255,45,60,.55)}
  50%,100%{background:#3a1420;box-shadow:none}
}
@keyframes copblue{
  0%,49%{background:#12203a;box-shadow:none}
  50%,100%{background:#2d6bff;box-shadow:0 0 9px #2d6bff,0 0 18px rgba(45,107,255,.55)}
}
.copbar.wide{
  max-width:320px;height:6px;margin:10px auto 0;gap:3px;
}
/* the venue block stacks the line and its light bar */
.venue{display:flex;flex-direction:column;align-items:flex-start}

@media (prefers-reduced-motion: reduce){
  .copbar i:nth-child(odd),.copbar i:nth-child(even){animation:none}
  .copbar i:nth-child(odd){background:#8c1b26}
  .copbar i:nth-child(even){background:#1b3a8c}
}

/* =============================================================================
 * SMOKE UP CUZZY — the way next door.
 * The particles are deliberately faint: enough to catch the eye on the bar,
 * not enough to compete with a jackpot meter.
 * ========================================================================== */
.smokebtn{
  position:relative;margin-left:10px;padding:7px 16px;border-radius:5px;
  font-family:'Bevan',Georgia,serif;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#3a2a12,#1c1408);
  border:1px solid #b08a3a;color:#ffd98a;
  box-shadow:inset 0 1px 0 rgba(255,225,160,.25), 0 0 14px rgba(200,150,60,.35);
  animation:smokeglow 2.4s ease-in-out infinite;
  overflow:visible;
}
@keyframes smokeglow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,225,160,.25),0 0 10px rgba(200,150,60,.3)}
  50%{box-shadow:inset 0 1px 0 rgba(255,225,160,.25),0 0 22px rgba(230,180,90,.65)}
}
.smokebtn:hover{border-color:#ffd98a;color:#fff3cf}
.smokebtn-label{position:relative;z-index:2}
.smokebtn .smoke-p{
  position:absolute;left:50%;bottom:66%;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle, rgba(228,216,198,.6), rgba(228,216,198,0) 70%);
  pointer-events:none;opacity:0;
  animation:smokerise 4.4s ease-in infinite;
}
/* Nine puffs on a staggered half-second cadence rather than five on a
   nine-tenths one, so there is always something in the air rather than a
   visible gap between one puff and the next. */
.smokebtn .smoke-p:nth-child(1){margin-left:-26px;animation-delay:0s}
.smokebtn .smoke-p:nth-child(2){margin-left:-14px;animation-delay:.49s}
.smokebtn .smoke-p:nth-child(3){margin-left:-3px;animation-delay:.98s}
.smokebtn .smoke-p:nth-child(4){margin-left:9px;animation-delay:1.47s}
.smokebtn .smoke-p:nth-child(5){margin-left:21px;animation-delay:1.96s}
.smokebtn .smoke-p:nth-child(6){margin-left:-20px;animation-delay:2.45s}
.smokebtn .smoke-p:nth-child(7){margin-left:2px;animation-delay:2.94s}
.smokebtn .smoke-p:nth-child(8){margin-left:15px;animation-delay:3.43s}
.smokebtn .smoke-p:nth-child(9){margin-left:-9px;animation-delay:3.92s}
/* the odd ones drift the other way, so it does not read as a conveyor belt */
.smokebtn .smoke-p:nth-child(odd){animation-name:smokerise-alt}
@keyframes smokerise{
  0%{transform:translateY(0) scale(.45);opacity:0}
  12%{opacity:.6}
  100%{transform:translateY(-42px) translateX(11px) scale(2.8);opacity:0}
}
@keyframes smokerise-alt{
  0%{transform:translateY(0) scale(.45);opacity:0}
  12%{opacity:.55}
  100%{transform:translateY(-38px) translateX(-9px) scale(2.6);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .smokebtn,.smokebtn .smoke-p{animation:none}
  .smokebtn .smoke-p{opacity:0}
}

/* =============================================================================
 * AL-MAJLIS — the shisha lounge.
 *
 * A separate page, not a tab. The original had a top bar with the room name, a
 * name box and a status line, and a second bar under it holding the shisha and
 * flavour. The top one was redundant — the name comes from the account you are
 * already signed in with — so there is ONE bar, and what used to sit underneath
 * has moved into its place.
 * ========================================================================== */
.lounge-page{
  position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#2a5b57,#123c3f 45%,#08211f);
  color:#fff2d6;font-family:'Inter Tight',system-ui,sans-serif;
}
body.in-lounge{overflow:hidden}

.lounge-bar{
  flex:0 0 auto;display:flex;align-items:center;gap:16px;
  padding:10px 18px;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25));
  border-bottom:1px solid rgba(255,210,122,.35);
  box-shadow:0 4px 18px rgba(0,0,0,.4);
}
.lounge-title{
  font-family:'Bevan',Georgia,serif;font-size:20px;letter-spacing:.06em;
  color:#ffd27a;text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.lounge-status{font-size:13px;color:#ffe9c0}
.lounge-now{font-size:11.5px;color:rgba(255,242,214,.6);margin-left:auto}
.btn.casinobtn{
  font-family:'Bevan',Georgia,serif;letter-spacing:.1em;padding:8px 20px;
  background:linear-gradient(180deg,#8a1226,#4a0912);border-color:#ff9a8a;color:#ffe9e4;
  box-shadow:0 0 16px rgba(180,40,50,.45);
}
.btn.casinobtn:hover{background:linear-gradient(180deg,#b21a33,#5c0f1e);color:#fff}

.lounge-body{flex:1 1 auto;display:flex;min-height:0;gap:12px;padding:12px}
.lounge-left,.lounge-right{
  width:230px;flex:0 0 auto;display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;min-height:0;
}
.lounge-right{width:270px}
.lounge-stage{
  flex:1 1 auto;position:relative;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  border-radius:10px;
  background:radial-gradient(ellipse at 50% 40%, rgba(255,210,122,.10), transparent 62%);
}
#loungeCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.lpanel{
  background:rgba(0,0,0,.34);border:1px solid rgba(255,210,122,.22);
  border-radius:8px;padding:9px 11px;
}
.lpanel-head{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#ffd27a;
  margin-bottom:7px;display:flex;justify-content:space-between;gap:8px;align-items:baseline;
}
.lpanel-by{font-size:9px;letter-spacing:.04em;text-transform:none;color:rgba(255,242,214,.45)}
.lpanel-grid{display:flex;flex-wrap:wrap;gap:5px}
.lpanel-cats{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px}
.lpanel-list{display:flex;flex-direction:column;gap:3px;max-height:190px;overflow-y:auto}
.lpanel-toggle{display:flex;align-items:center;gap:7px;font-size:12px;margin-top:8px;color:#ffe9c0}

.lchip,.lcat,.lflav{
  border-radius:5px;font-size:11.5px;padding:6px 10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,210,122,.2);
  color:#ffe9c0;transition:.14s;text-align:left;
}
.lchip:hover,.lcat:hover,.lflav:hover{background:rgba(255,210,122,.16);border-color:#ffd27a}
.lchip.on,.lcat.on,.lflav.on{
  background:linear-gradient(180deg,#e0a53a,#8a5c14);color:#2a1204;border-color:#ffe9ae;font-weight:600;
}
.lchip:disabled{opacity:.35;cursor:not-allowed}
.lic{margin-right:5px}
.lcat{font-size:10.5px;padding:5px 8px}
.lflav{display:flex;align-items:center;gap:8px}
.lfdot{width:10px;height:10px;border-radius:50%;background:var(--fl);flex:0 0 auto;
  box-shadow:0 0 8px var(--fl)}

/* ------------------------------------------------------------- the circle */
.lounge-seats{
  position:relative;z-index:2;display:grid;
  grid-template-columns:repeat(3,minmax(120px,150px));gap:12px;justify-content:center;
}
.lseat{
  position:relative;padding:12px 10px;border-radius:9px;text-align:center;
  background:rgba(0,0,0,.38);border:1px solid rgba(255,210,122,.22);
  color:#fff2d6;transition:.16s;min-height:78px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.lseat.empty{border-style:dashed;color:rgba(255,242,214,.5)}
.lseat.empty:hover{background:rgba(255,210,122,.12);border-color:#ffd27a;color:#ffe9c0}
.lseat-n{font-family:'DM Mono',monospace;font-size:16px;opacity:.7}
.lseat-t{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.lseat-dot{width:16px;height:16px;border-radius:50%;background:var(--gc);
  box-shadow:0 0 10px var(--gc)}
.lseat-name{font-size:13px;font-weight:600}
.lseat-tag{
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:2px 7px;border-radius:8px;background:#ffd27a;color:#2a1204;font-weight:700;
}
.lseat.smoking{border-color:#ffd27a;box-shadow:0 0 0 2px rgba(255,210,122,.4),0 0 26px rgba(255,180,90,.35)}
.lseat.you{outline:2px solid rgba(255,255,255,.35);outline-offset:-2px}
.lseat.passable{cursor:pointer}
.lseat.passable:hover{background:rgba(255,210,122,.18);border-color:#ffd27a;transform:translateY(-2px)}
.lfloat{
  position:absolute;left:50%;top:-4px;transform:translateX(-50%);
  font-size:22px;pointer-events:none;animation:lfloat 1.6s ease-out forwards;
}
@keyframes lfloat{
  0%{opacity:0;transform:translate(-50%,0) scale(.6)}
  25%{opacity:1;transform:translate(-50%,-14px) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-52px) scale(1)}
}

.lounge-hint{
  position:relative;z-index:2;font-size:14px;color:#ffe9c0;text-align:center;
  padding:8px 16px;border-radius:20px;background:rgba(0,0,0,.4);max-width:46ch;
}
.lounge-dock{position:relative;z-index:2;display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.lounge-emotes{display:flex;gap:4px}
.lemote{
  width:34px;height:34px;border-radius:8px;font-size:17px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,210,122,.22);transition:.12s;
}
.lemote:hover{background:rgba(255,210,122,.2);transform:scale(1.12)}

/* ------------------------------------------------------------ lounge chat */
.lounge-chatpanel{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.lounge-chatlog{
  flex:1 1 auto;overflow-y:auto;min-height:120px;font-size:12.5px;line-height:1.5;
  display:flex;flex-direction:column;gap:2px;
}
.lmsg.k-system{color:rgba(255,242,214,.55);font-style:italic}
.lm-nick{font-weight:600;margin-right:4px}
.lounge-chatform{display:flex;gap:6px;margin-top:8px;flex:0 0 auto}
.lounge-chatform input{
  flex:1;min-width:0;padding:7px 10px;border-radius:5px;font-size:12.5px;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,210,122,.25);color:#fff2d6;
}

/* the room's four looks */
.lounge-page.theme-myst{background:linear-gradient(180deg,#1b2f4d,#0f1c30 45%,#060d18)}
.lounge-page.theme-myst .lounge-title,.lounge-page.theme-myst .lpanel-head{color:#9fd8ff}
.lounge-page.theme-bangla{background:linear-gradient(180deg,#1d3a2a,#10241a 45%,#06120c)}
.lounge-page.theme-bangla .lounge-title,.lounge-page.theme-bangla .lpanel-head{color:#ffd75e}
.lounge-page.theme-illuzions{background:linear-gradient(180deg,#2a1440,#1a0c2a 45%,#0b0514)}
.lounge-page.theme-illuzions .lounge-title,.lounge-page.theme-illuzions .lpanel-head{color:#e0a6ff}

@media (max-width:1100px){
  .lounge-left{display:none}
  .lounge-right{width:230px}
}
@media (max-width:820px){
  .lounge-right{display:none}
  .lounge-body{padding:8px}
}


/* SMOKE UP CUZZY sits at the far right of the game bar, where the mode note
   used to be — it is a doorway to another room, not another game tab. */
.gamebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.smokebtn{margin-left:auto}
@media (max-width:900px){ .smokebtn{margin-left:0} }


/* =============================================================================
 * LOUNGE UI — the things that were in the way.
 * ========================================================================== */
/* The bar: CASINO first so it is never behind the room selector, then the room
   name, then what is loaded, then status. */
.lounge-bar{
  display:flex;align-items:center;gap:14px;padding:9px 16px;
  position:relative;z-index:60;flex-wrap:wrap;
}
.btn.casinobtn{flex:0 0 auto;order:-1}
.lounge-now{margin-left:auto}

/* what is in the bowl, out of the middle of the room */
.lounge-loaded{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:16px;font-size:12px;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,210,122,.3);
  color:#ffe9c0;white-space:nowrap;
}
.ll-part{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.ll-ic{font-size:14px}
.ll-sep{opacity:.4}
.ll-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 8px currentColor}
.ll-dot.plain{background:#cfc6b6;box-shadow:none}

/* their own centre pill and top HUD are redundant now */
.lounge-page #loaded-pill,
.lounge-page #hud-title,
.lounge-page #name-input{display:none !important}

/* the lounge selector must never sit on top of the bar */
.lounge-page #right-panels,
.lounge-page #left-panels{z-index:20}
.lounge-page #lounge-panel{margin-top:0}

/* a roomier chat */
.lounge-page #chat-panel,
.lounge-page .lounge-chatpanel{min-height:340px}
.lounge-page #chat-log,
.lounge-page .lounge-chatlog{min-height:260px;max-height:44vh;font-size:13px;line-height:1.55}
.lounge-page #chat-input{font-size:13px;padding:9px 11px}

/* Sound now covers voice too, so the separate Voice button is gone */
.lounge-page #voice-mute-hud{display:none !important}
.btn.ghost{background:rgba(127,216,255,.10);border-color:rgba(127,216,255,.45);color:#9fe4ff}
.btn.ghost:hover{background:rgba(127,216,255,.2);border-color:#9fe4ff}

/* voice settings */
.vs-row{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap}
.vs-row label{flex:0 0 130px;font-size:12px;color:var(--amber-dim);
  letter-spacing:.08em;text-transform:uppercase}
.vs-row select,.vs-row input[type=range]{flex:1;min-width:120px}
.vs-hint{flex-basis:100%;font-size:11.5px;color:var(--bone-dim);padding-left:140px}
.vs-note{font-size:12px;color:var(--bone-dim);line-height:1.6;margin:8px 0}

/* =============================================================================
 * ADMIN BANNER — a standing notice from the venue. A marquee rather than a
 * toast, because the point is that it does not go away until it is turned off.
 * ========================================================================== */
.adminbanner{
  display:flex;align-items:center;gap:12px;flex:0 0 auto;
  padding:6px 14px;overflow:hidden;
  background:linear-gradient(90deg,#5c1020,#8a1226 30%,#8a1226 70%,#5c1020);
  border-bottom:1px solid #ff9a8a;
  box-shadow:0 2px 14px rgba(180,30,45,.5);
}
.ab-tag{
  flex:0 0 auto;font-family:'Bevan',Georgia,serif;font-size:9.5px;letter-spacing:.24em;
  padding:3px 10px;border-radius:3px;background:#ffd75e;color:#3d0a12;
}
.ab-track{flex:1;overflow:hidden;white-space:nowrap;min-width:0}
.ab-text{
  display:inline-block;padding-left:100%;
  font-size:13.5px;letter-spacing:.03em;color:#fff3e8;font-weight:500;
  animation:abscroll 26s linear infinite;
}
@keyframes abscroll{ to { transform: translateX(-100%); } }
.adminbanner:hover .ab-text{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  .ab-text{animation:none;padding-left:0;white-space:normal}
  .ab-track{white-space:normal}
}

/* the Grand's own history, top right of the meter */
.jp.grand{position:relative}
.jp-info{
  position:absolute;top:5px;right:7px;z-index:3;
  width:20px;height:20px;border-radius:50%;
  font-family:Georgia,serif;font-style:italic;font-size:12px;line-height:1;
  background:rgba(0,0,0,.5);border:1px solid rgba(201,146,46,.7);color:var(--amber);
  transition:.14s;
}
.jp-info:hover{background:var(--amber);color:#241005;border-color:#fff6d8;transform:scale(1.12)}
.jh-now{
  padding:12px 16px;border-radius:6px;margin-bottom:16px;text-align:center;
  background:linear-gradient(180deg,rgba(245,185,66,.12),rgba(0,0,0,.3));
  border:1px solid var(--brass-lo);
}
.jh-now dt{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber-dim)}
.jh-now dd{font-family:'Bevan',serif;font-size:30px;color:var(--amber);margin:4px 0 2px}
.jh-now small{font-size:10.5px;color:var(--bone-dim)}

/* =============================================================================
 * TABLE VOICE — only when you are seated with somebody. A microphone on an
 * empty table is an invitation to talk to nobody.
 * ========================================================================== */
.tablevoice{
  position:fixed;right:18px;bottom:18px;z-index:160;
  display:flex;align-items:center;gap:9px;
  padding:7px 12px;border-radius:22px;
  background:rgba(10,4,6,.9);border:1px solid var(--brass-lo);
  box-shadow:0 6px 20px rgba(0,0,0,.6);
  animation:tvin .3s ease;
}
@keyframes tvin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tv-btn{
  display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:16px;
  font-size:12.5px;font-weight:600;
  background:rgba(127,216,255,.12);border:1px solid rgba(127,216,255,.45);color:#9fe4ff;
  transition:.14s;
}
.tv-btn:hover{background:rgba(127,216,255,.24);border-color:#9fe4ff}
.tv-btn.live{
  background:linear-gradient(180deg,#2e9c6c,#14603f);border-color:#8ef0c4;color:#eafff5;
  animation:tvlive 1.6s ease-in-out infinite;
}
@keyframes tvlive{
  0%,100%{box-shadow:0 0 0 0 rgba(60,187,140,.5)}
  50%{box-shadow:0 0 0 7px rgba(60,187,140,0)}
}
.tv-ic{font-size:14px}
.tv-who{font-size:11px;color:var(--bone-dim);letter-spacing:.04em}
@media (max-width:700px){ .tablevoice{right:10px;bottom:10px} .tv-who{display:none} }

/* =============================================================================
 * LOUNGE LAYOUT v2
 *
 * Everything used to float over the room and cover it. Now the header owns the
 * top strip, the side columns start below it, the controls live with the voice
 * panel they belong to, and the chat has the bottom-right corner to itself.
 * ========================================================================== */
:root{ --lounge-bar-h: 56px; }

.lounge-bar{
  position:absolute;top:0;left:0;right:0;height:var(--lounge-bar-h);
  display:flex;align-items:center;gap:14px;padding:0 16px;z-index:80;
  background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.32));
  border-bottom:1px solid rgba(255,210,122,.35);
  backdrop-filter:none;
}
.lb-side{display:flex;align-items:center;gap:12px;flex:1 1 0;min-width:0}
.lb-right{justify-content:flex-end}
.lounge-loaded{flex:0 0 auto;margin:0 auto}
.lounge-status,.lounge-now{
  font-size:12px;color:#ffe9c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lounge-now{opacity:.6}

/* the columns start UNDER the header, so nothing is obstructed by it */
.lounge-page #left-panels,
.lounge-page #right-panels{
  top:calc(var(--lounge-bar-h) + 10px) !important;
  max-height:calc(100vh - var(--lounge-bar-h) - 20px);
  overflow-y:auto;overflow-x:hidden;
}

/* stand + voice + sound sit with the voice panel rather than over the room */
.lounge-page #controls-dock{
  position:static !important;
  display:flex;gap:6px;margin-top:10px;
  right:auto;bottom:auto;left:auto;top:auto;
}
.lounge-page #controls-dock .dock-btn{flex:1;min-width:0}
.lounge-page #stand-btn{display:flex !important}

/* the duplicate shisha/flavour readout: the header carries it now */
.lounge-page #status-bar{display:none !important}

/* chat: bottom right, and bigger */
.lounge-page #chat{
  position:absolute !important;
  right:14px;bottom:14px;left:auto;top:auto;
  width:min(400px, 34vw);
  max-height:min(56vh, 520px);
  display:flex;flex-direction:column;z-index:70;
}
.lounge-page #chat-log{
  flex:1 1 auto;min-height:220px;max-height:none;
  font-size:13px;line-height:1.55;
}

/* the room itself never sits under the header */
.lounge-page #game-container{position:absolute;inset:var(--lounge-bar-h) 0 0 0}

/* ------------------------------------------------------------- resizing ---
   Every panel is a percentage of the viewport with a hard floor, so a window
   that gets small stacks and scrolls rather than overlapping itself. */
@media (max-width:1500px){
  .lounge-page #chat{width:min(340px, 32vw)}
}
@media (max-width:1200px){
  :root{ --lounge-bar-h: 52px; }
  .lounge-page #left-panels{display:none}
  .lounge-page #chat{width:min(320px, 40vw);max-height:46vh}
}
@media (max-width:900px){
  .lounge-page #right-panels{display:none}
  .lounge-page #chat{width:calc(100% - 24px);left:12px;right:12px;max-height:38vh}
  .lounge-bar{gap:8px;padding:0 10px}
  .lounge-loaded{display:none}
  .lounge-status{display:none}
}
@media (max-height:680px){
  .lounge-page #chat{max-height:40vh}
  .lounge-page #left-panels,.lounge-page #right-panels{max-height:calc(100vh - 70px)}
}

/* =============================================================================
 * Modals must sit above the lounge.
 * The lounge page is z-index 400; the modal was 150, so Voice settings opened
 * BEHIND the room and only appeared once the lounge was closed. Toasts and the
 * duress page stay above modals, in that order.
 * ========================================================================== */
.modal{z-index:500}
.toasts{z-index:700}
.austlii-page{z-index:9999}

/* an unseated guest needs to know how to join */
.lounge-page #hud-status.flash{
  color:#ffd27a;font-weight:600;
  animation:loungeflash 1.4s ease-in-out infinite;
}
@keyframes loungeflash{0%,100%{opacity:.45}50%{opacity:1}}
.lounge-page .btn.dowork{padding:6px 14px;font-size:11px;letter-spacing:.08em}

/* the Live/Offline switch sits left of the balance and glows, because which
   one you are in changes what your money means */
.modeswitch{
  display:flex;gap:2px;padding:3px;border-radius:6px;flex:0 0 auto;
  background:rgba(0,0,0,.45);border:1px solid var(--brass-lo);
  animation:modeglow 2.6s ease-in-out infinite;
}
@keyframes modeglow{
  0%,100%{box-shadow:0 0 8px rgba(245,185,66,.25)}
  50%{box-shadow:0 0 20px rgba(245,185,66,.6)}
}
.modeswitch button{
  padding:5px 13px;border-radius:4px;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;color:var(--bone-dim);transition:.15s;
}
.modeswitch button[aria-pressed="true"]{
  background:linear-gradient(180deg,#f3c65c,#a8721f);color:#2a1204;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.modeswitch button:hover:not([aria-pressed="true"]){color:var(--amber)}
@media (prefers-reduced-motion: reduce){ .modeswitch{animation:none} }

/* a tab you cannot use mid-round says so rather than silently ignoring you */
.tab.locked,.modeswitch.locked{opacity:.42;cursor:not-allowed}
.tab.locked::after{
  content:'\1F512';position:absolute;top:2px;right:4px;font-size:9px;opacity:.7;
}

/* =============================================================================
 * TABLE GAMES — the Games Box and the card table.
 * Cards are big on purpose: a card you have to squint at is a card you misplay.
 * ========================================================================== */
#games-panel{
  background:rgba(0,0,0,.42);border:1px solid rgba(255,210,122,.3);
  border-radius:9px;padding:10px 12px;margin-bottom:10px;
}
.gp-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#ffd27a;margin-bottom:8px;
}
.gp-info{
  width:19px;height:19px;border-radius:50%;font-family:Georgia,serif;font-style:italic;
  background:rgba(255,210,122,.14);border:1px solid rgba(255,210,122,.5);color:#ffd27a;
  font-size:11px;line-height:1;transition:.14s;
}
.gp-info:hover{background:#ffd27a;color:#2a1204}
.gp-btns{display:flex;gap:6px;margin-bottom:8px}
.gp-game{
  flex:1;padding:9px 6px;border-radius:6px;font-size:13px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,210,122,.25);color:#ffe9c0;
  transition:.14s;
}
.gp-game small{font-size:9px;opacity:.6;font-weight:400}
.gp-game:hover:not(:disabled){background:rgba(255,210,122,.18);border-color:#ffd27a}
.gp-game.on{background:linear-gradient(180deg,#e0a53a,#8a5c14);color:#2a1204;border-color:#ffe9ae}
.gp-game.joined{box-shadow:0 0 0 2px rgba(120,240,180,.6)}
.gp-game:disabled{opacity:.4;cursor:not-allowed}
.gp-status{font-size:11.5px;color:rgba(255,242,214,.75);line-height:1.5;margin-bottom:8px}
.gp-admin{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;
  padding-top:8px;border-top:1px dashed rgba(255,210,122,.25)}
.gp-as{font-size:11px;color:#ffe9c0;display:flex;align-items:center;gap:6px}
.gp-as select{flex:1;background:rgba(0,0,0,.4);color:#ffe9c0;
  border:1px solid rgba(255,210,122,.3);border-radius:4px;padding:3px 6px}

/* the table */
#cardtable{
  position:absolute;left:50%;top:calc(var(--lounge-bar-h) + 12px);
  transform:translateX(-50%);
  width:min(720px, 62vw);z-index:75;
  background:linear-gradient(180deg,rgba(8,26,20,.96),rgba(4,14,11,.97));
  border:1px solid rgba(255,210,122,.4);border-radius:12px;
  box-shadow:0 14px 44px rgba(0,0,0,.7);padding:12px 14px;
}
.ct-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ct-name{font-family:'Bevan',Georgia,serif;font-size:15px;color:#ffd27a;letter-spacing:.04em}
.ct-turn{font-size:12px;color:rgba(255,242,214,.7)}
.ct-turn.mine{color:#8ef0c4;font-weight:600}
.ct-clock{
  margin-left:auto;font-family:'DM Mono',monospace;font-size:17px;color:#ffe9c0;
  padding:2px 9px;border-radius:5px;background:rgba(0,0,0,.5);
}
.ct-clock.low{color:#ff6b6b;animation:ctlow .5s steps(1) infinite}
@keyframes ctlow{0%,49%{opacity:1}50%,100%{opacity:.35}}
.ct-leave{font-size:11px;padding:4px 10px;border-radius:5px;
  background:rgba(180,40,50,.3);border:1px solid rgba(255,120,120,.5);color:#ffd9d9}
.ct-board{display:flex;gap:16px;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap}
.ct-pile{display:flex;flex-direction:column;align-items:center;gap:5px}
.ct-label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,242,214,.5)}
.ct-colour{width:56px;height:9px;border-radius:5px;font-size:0}
.ct-players{display:flex;flex-wrap:wrap;gap:7px;flex:1}
.ct-p{
  padding:5px 9px;border-radius:6px;font-size:11px;line-height:1.4;
  background:rgba(255,255,255,.05);border:1px solid transparent;color:rgba(255,242,214,.75);
}
.ct-p b{display:block;color:#ffe9c0;font-size:12px}
.ct-p.on{border-color:#ffd27a;background:rgba(255,210,122,.14)}
.ct-hand{display:flex;gap:7px;flex-wrap:wrap;min-height:96px;align-items:center}
.ct-note{font-size:11px;color:rgba(255,242,214,.55);margin-top:7px;min-height:14px}
.ct-empty{font-size:12px;color:rgba(255,242,214,.5)}

/* big, readable cards */
.pcard,.ucard{
  width:62px;height:88px;border-radius:7px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(180deg,#fdfbf5,#e6ded0);border:1px solid #b9ae98;
  color:#1a1a1a;font-family:Georgia,serif;transition:.12s;cursor:default;
}
.pcard .pc-r{font-size:23px;font-weight:700;line-height:1}
.pcard .pc-s{font-size:19px;line-height:1}
.pcard.red{color:#c62828}
.pcard.empty{background:rgba(255,255,255,.06);border-style:dashed;color:rgba(255,242,214,.4);
  font-family:inherit;font-size:10px}
.ucard{background:var(--uc);border-color:rgba(255,255,255,.5);color:#fff}
.ucard .uc-v{font-size:24px;font-weight:800;font-family:'Inter Tight',sans-serif;
  text-shadow:0 2px 4px rgba(0,0,0,.5)}
.ucard.draw{background:#2b2b2b;border-style:dashed}
.pcard.can,.ucard.can{cursor:pointer;box-shadow:0 0 0 2px rgba(140,240,190,.7)}
.pcard.can:hover,.ucard.can:hover{transform:translateY(-7px)}
.pcard:disabled,.ucard:disabled{opacity:.55}
.pcard.back,.ucard.back{background:repeating-linear-gradient(45deg,#5a2f16,#5a2f16 5px,#7a4020 5px,#7a4020 10px)}
.uno-colours{display:flex;gap:10px;justify-content:center;padding:10px}
.uno-col{width:64px;height:64px;border-radius:10px;border:2px solid rgba(255,255,255,.4)}
.uno-col:hover{transform:scale(1.1)}

@media (max-width:1100px){ #cardtable{width:min(560px, 84vw)} }
@media (max-width:820px){
  #cardtable{width:calc(100% - 20px);left:10px;right:10px;transform:none}
  .pcard,.ucard{width:52px;height:74px}
}

/* the table-games rules: same information, laid out */
.rules{font-size:13px;line-height:1.55}
.r-top{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.r-name{font-family:'Bevan',Georgia,serif;font-size:19px;color:var(--amber)}
.r-players{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim)}
.r-idea{color:var(--bone);margin:0 0 14px}
.rules h5{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-dim);
  margin:14px 0 6px;padding-bottom:4px;border-bottom:1px solid rgba(201,146,46,.25);
}
.r-list{margin:0}
.r-list .rr{display:flex;gap:12px;padding:4px 0;align-items:baseline}
.r-list dt{
  flex:0 0 116px;font-weight:600;color:var(--amber);font-size:12.5px;
}
.r-list dd{margin:0;flex:1;color:var(--bone-dim)}
.r-score .rr{padding:2px 0}
.r-score dt{flex:0 0 86px;font-family:'DM Mono',monospace}
.r-clock{
  margin-top:14px;padding:8px 11px;border-radius:6px;font-size:12px;
  background:rgba(245,185,66,.08);border-left:2px solid var(--amber-dim);color:var(--bone-dim);
}

/* =============================================================================
 * LOUNGE FIT — the chat was running off the bottom of the screen and sitting on
 * top of the Stand/Sound buttons. Everything below is about making the room fit
 * whatever window it is given.
 * ========================================================================== */

/* The chat sits flush in the corner and is bounded by the viewport, not by a
   guessed height — the Send row was falling off the bottom. */
.lounge-page #chat{
  position:absolute !important;
  right:12px !important;bottom:12px !important;left:auto !important;top:auto !important;
  width:min(400px, 30vw);
  max-height:calc(100vh - var(--lounge-bar-h) - 26px);
  display:flex !important;flex-direction:column;
  overflow:hidden;z-index:78;
}
.lounge-page #chat-log{
  flex:1 1 auto;min-height:120px;overflow-y:auto;
}
/* the composer must never be pushed out of view */
.lounge-page #chat-input,
.lounge-page #chat-send{flex:0 0 auto}
.lounge-page #chat > *:last-child{flex:0 0 auto}

/* The right-hand column stops above the chat so the two never overlap, and the
   dock that used to sit under the chat now has its own room. */
.lounge-page #right-panels{
  bottom:auto;
  max-height:calc(100vh - var(--lounge-bar-h) - 24px);
  padding-bottom:6px;
}
@media (min-width:901px){
  .lounge-page #right-panels{
    max-height:calc(100vh - var(--lounge-bar-h) - 24px - 42vh);
  }
}

/* the room's own controls stay clear of the chat corner */
.lounge-page #emoji-btn{bottom:auto;top:calc(var(--lounge-bar-h) + 12px);right:12px;z-index:76}
.lounge-page #emoji-panel{top:calc(var(--lounge-bar-h) + 52px);right:12px;z-index:76}

@media (max-width:900px){
  .lounge-page #chat{width:calc(100% - 24px);max-height:40vh}
  .lounge-page #right-panels{max-height:calc(60vh - var(--lounge-bar-h))}
}
@media (max-height:700px){
  .lounge-page #chat{max-height:calc(100vh - var(--lounge-bar-h) - 20px)}
  .lounge-page #chat-log{min-height:80px}
}

/* The exhale controls must sit above the room, not compete with it. They were
   at z-index 14 inside a page whose chat and card table are far higher. */
.lounge-page #smoke-bar{z-index:79 !important}
.lounge-page #smoke-bar.visible{box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 0 1px rgba(255,210,122,.3)}

/* Chat: wider, shorter, and it no longer runs up under the panel above it. */
.lounge-page #chat{
  width:min(440px, 34vw) !important;
  max-height:min(38vh, 340px) !important;
  bottom:12px !important;right:12px !important;
}
.lounge-page #chat-log{
  min-height:0 !important;max-height:none !important;
  scrollbar-width:thin;scrollbar-color:rgba(255,210,122,.35) transparent;
}
.lounge-page #chat-log::-webkit-scrollbar{width:6px}
.lounge-page #chat-log::-webkit-scrollbar-track{background:transparent}
.lounge-page #chat-log::-webkit-scrollbar-thumb{
  background:rgba(255,210,122,.3);border-radius:3px;
}
/* the right column stops well clear of it */
@media (min-width:901px){
  .lounge-page #right-panels{
    max-height:calc(100vh - var(--lounge-bar-h) - 24px - 38vh) !important;
  }
}

/* the lobby countdown, in the header where you cannot miss it */
.lounge-countdown{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 12px;border-radius:14px;font-size:12px;
  background:rgba(255,120,60,.16);border:1px solid rgba(255,170,90,.6);color:#ffd6a8;
}
.lounge-countdown b{
  font-family:'DM Mono',monospace;font-size:17px;color:#ffd27a;
  animation:cdflash .9s steps(1) infinite;
}
@keyframes cdflash{0%,49%{opacity:1}50%,100%{opacity:.3}}

/* =============================================================================
 * UNO CARDS — white border, a white oval turned across the face, the value in
 * the card's colour in the middle and in white at the corners.
 * ========================================================================== */
.ucard{
  width:96px;height:144px;border-radius:11px;
  border:6px solid #fff;background:var(--uc);
  position:relative;overflow:hidden;user-select:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
.uc-oval{
  position:absolute;width:112%;height:88%;background:#fff;border-radius:50%;
  transform:rotate(-25deg);z-index:1;
}
.uc-mid{
  position:relative;z-index:2;font-family:'Inter Tight',system-ui,sans-serif;
  font-size:50px;font-weight:800;line-height:1;color:var(--uc);
  text-shadow:2px 2px 0 rgba(0,0,0,.16);
}
.uc-corner{
  position:absolute;z-index:3;font-size:17px;font-weight:800;color:#fff;
  font-family:'Inter Tight',system-ui,sans-serif;
  text-shadow:1px 1px 0 rgba(0,0,0,.55);line-height:1;
}
.uc-corner.tl{top:5px;left:8px}
.uc-corner.br{bottom:5px;right:8px;transform:rotate(180deg)}
.ucard.back{
  background:#c0392b;
  display:flex;align-items:center;justify-content:center;
}
.ucard.back::after{
  content:'UNO';position:relative;z-index:2;color:#fff;font-weight:800;
  font-family:'Inter Tight',sans-serif;font-size:19px;letter-spacing:.04em;
  transform:rotate(-22deg);text-shadow:2px 2px 0 rgba(0,0,0,.4);
}
.ucard.back::before{
  content:'';position:absolute;width:118%;height:56%;background:#111;
  border-radius:50%;transform:rotate(-22deg);
}
.ucard.can{cursor:pointer}
.ucard.can:hover{transform:translateY(-18px);box-shadow:0 12px 24px rgba(0,0,0,.55);z-index:20}
.ucard:disabled{opacity:.62}
.ucard.draw{background:#2f3542;border-color:#dfe4ea}
.ucard.draw .uc-mid{font-size:19px;color:#fff;text-shadow:none}
.ucard.sm{width:44px;height:66px;border-width:3px;border-radius:6px}
.ucard.sm .uc-mid{font-size:21px}
.ucard.sm .uc-corner{display:none}
.ucard.sm.back::after{font-size:9px}

/* the hand overlaps like a real one */
.ct-hand .ucard{margin-left:-26px}
.ct-hand .ucard:first-child{margin-left:0}
.ct-hand .pcard{margin-left:-18px}
.ct-hand .pcard:first-child{margin-left:0}

/* =============================================================================
 * CARDS ON THE TABLE
 * The shared pile sits in the middle of the felt, everyone else's hand lies
 * face-down on the chair they are actually sitting in, and your own hand runs
 * along the bottom where you would be holding it.
 * ========================================================================== */
#ctSeats{
  position:absolute;inset:var(--lounge-bar-h) 0 0 0;
  pointer-events:none;z-index:72;
}
.ct-seat{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.ct-fan{display:flex}
.ct-fan > *{margin-left:-30px;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.ct-fan > *:first-child{margin-left:0}
.ct-seatname{
  font-size:11px;font-weight:600;color:#ffe9c0;white-space:nowrap;
  padding:2px 9px;border-radius:10px;background:rgba(0,0,0,.62);
  display:flex;align-items:center;gap:6px;
}
.ct-seatname span{
  font-family:'DM Mono',monospace;font-size:10px;color:#ffd27a;
  padding:0 5px;border-radius:6px;background:rgba(255,210,122,.18);
}
.ct-seat.on .ct-seatname{
  background:#ffd27a;color:#2a1204;
  box-shadow:0 0 16px rgba(255,210,122,.7);
}
.ct-seat.on .ct-fan > *{transform:translateY(-4px)}

/* the pile in the middle of the felt */
#cardtable{
  left:50%;top:auto;bottom:12px;transform:translateX(-50%);
  width:min(760px, 66vw);
  background:linear-gradient(180deg,rgba(8,26,20,.9),rgba(4,14,11,.96));
  backdrop-filter:blur(3px);
}
.ct-board{
  position:absolute;left:50%;bottom:calc(100% + 26px);transform:translateX(-50%);
  display:flex;gap:14px;align-items:flex-end;margin:0;
  padding:12px 18px;border-radius:14px;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,210,122,.28);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.ct-hand{
  min-height:150px;justify-content:center;padding-top:4px;
}
.pcard.sm{width:44px;height:64px;border-radius:5px}
.pcard.sm .pc-r{font-size:15px}
.pcard.sm .pc-s{font-size:12px}

@media (max-width:1100px){
  #cardtable{width:min(620px, 88vw)}
  .ct-fan > *{margin-left:-24px}
}
@media (max-width:820px){
  #ctSeats{display:none}
  #cardtable{width:calc(100% - 20px);left:10px;transform:none}
}

/* The seat layer works in viewport pixels, because that is what the room
   reports — so it is anchored to the viewport, not to a panel. */
#ctSeats{
  position:fixed !important;inset:0 !important;
  pointer-events:none;z-index:72;
}
#ctSeats.fallback{display:none}
.ct-roster{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.ct-roster:empty{display:none}


/* =============================================================================
 * The side column scrolls when it has to, but never shows a bar — the bar was
 * running the full height of the screen next to the panels and looked like a
 * fault. The content is still reachable; it just does not advertise itself.
 * ========================================================================== */
.lounge-page #right-panels,
.lounge-page #left-panels{
  scrollbar-width:none !important;
  -ms-overflow-style:none;
}
.lounge-page #right-panels::-webkit-scrollbar,
.lounge-page #left-panels::-webkit-scrollbar{width:0 !important;height:0 !important;display:none}

/* 2. The composer: the input takes the room, the button takes what it needs.
      Without min-width:0 a flex child refuses to shrink below its content, which
      is what squashed the input and pushed Send across. */
.lounge-page #chat form,
.lounge-page #chat .chat-row,
.lounge-page #chat-input{min-width:0}
.lounge-page #chat-input{
  flex:1 1 auto !important;min-width:0 !important;width:auto !important;
}
.lounge-page #chat-send{
  flex:0 0 auto !important;width:auto !important;white-space:nowrap;
}
.lounge-page #chat > form,
.lounge-page #chat > div:last-child{
  display:flex;gap:6px;align-items:stretch;justify-content:flex-start;
}

/* The side column reserved a full 38vh for the chat, but the chat is only ever
   min(38vh, 340px) tall — so on a tall screen it was giving away space it did
   not need and clipping the voice panel. Reserve what is actually used. */
@media (min-width:901px){
  .lounge-page #right-panels{
    max-height:calc(100vh - var(--lounge-bar-h) - min(38vh, 340px) - 34px) !important;
  }
}


/* =============================================================================
 * FITTING RATHER THAN HIDING
 *
 * The columns are scaled to fit by lounge-fit.js. Everything here supports that:
 * sizes are fluid so the scale factor has less work to do, and the breakpoints
 * that used to DELETE a column now only narrow it. A control that disappears
 * because the window got shorter is worse than the same control drawn smaller.
 * ========================================================================== */
.lounge-page #left-panels,
.lounge-page #right-panels{
  overflow-x:hidden;
  will-change:transform;
  transition:transform .18s ease;
}
.lounge-page #chat{transition:transform .18s ease}

/* fluid sizing: the panels give ground gently before any scaling is needed */
.lounge-page #left-panels{width:clamp(178px, 15vw, 250px)}
.lounge-page #right-panels{width:clamp(196px, 17vw, 268px)}
.lounge-page #chat{width:clamp(268px, 27vw, 420px) !important}
.lpanel-head,.gp-head{font-size:clamp(8px, .62vw, 9.5px)}
.lchip,.lcat,.lflav,.gp-game{font-size:clamp(10px, .8vw, 12.5px)}
.gp-status{font-size:clamp(9.5px, .72vw, 11.5px)}

/* Narrow, not gone. The old rules hid a whole column at these widths. */
@media (max-width:1200px){
  .lounge-page #left-panels{display:flex !important;width:clamp(150px, 13vw, 200px)}
}
@media (max-width:900px){
  .lounge-page #right-panels{display:flex !important;width:clamp(150px, 20vw, 210px)}
  .lounge-page #chat{width:clamp(220px, 32vw, 300px) !important}
}
/* below this there genuinely is not room for three columns and a room */
@media (max-width:680px){
  .lounge-page #left-panels{display:none !important}
  .lounge-page #chat{width:calc(100% - 20px) !important;left:10px;right:10px}
}


/* The fitter owns the column heights now. A max-height here clips at layout
   time, which happens before any transform is painted — so a constrained column
   loses its lower half however much it is scaled afterwards. */
.lounge-page #right-panels,
.lounge-page #left-panels{
  max-height:none !important;
  height:auto !important;
  overflow:visible;
  padding-bottom:0;
}

/* The exhale controls occupy the bottom-centre of the room, which is where the
   cards go. Hidden while a hand is in play — and restored by the same single
   function whenever it is not, so they cannot be stranded. */
.lounge-page #smoke-bar.cards-hide{
  opacity:0 !important;pointer-events:none !important;visibility:hidden !important;
}
/* the side panels stay usable but step back, so the table has the eye */
.lounge-page .cards-dim{opacity:.35;transition:opacity .2s ease}
.lounge-page .cards-dim:hover{opacity:1}

/* how many people are in the room, stated once and quietly */
.lounge-viewers{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;color:rgba(255,242,214,.55);white-space:nowrap;
}
.lounge-viewers b{color:#ffd27a;font-weight:600}
.lounge-viewers::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#5ad18a;
  box-shadow:0 0 6px #5ad18a;
}

/* Granting an item: pick it, do not retype its id from a list in a prompt. */
.grant-filter{
  width:100%;padding:9px 12px;margin:10px 0;border-radius:6px;font-size:13px;
  background:rgba(0,0,0,.45);border:1px solid var(--brass-lo);color:var(--bone);
}
.grant-list{max-height:52vh;overflow-y:auto;padding-right:4px}
.grant-list h5{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-dim);
  margin:14px 0 7px;padding-bottom:4px;border-bottom:1px solid rgba(201,146,46,.22);
}
.grant-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:6px}
.grant-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:8px 10px;border-radius:6px;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid var(--brass-lo);
  transition:.13s;position:relative;
}
.grant-item:hover:not(:disabled){background:rgba(245,185,66,.16);border-color:var(--amber)}
.gi-name{font-size:12.5px;font-weight:600;color:var(--bone)}
.gi-id{font-family:'DM Mono',monospace;font-size:9.5px;color:var(--bone-dim)}
.grant-item.owned{opacity:.45;cursor:not-allowed}
.gi-has{
  position:absolute;top:6px;right:7px;font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-dim);
}

/* Voice carried over from the lounge, shown in the club so nobody is live on an
   open microphone with nothing on screen saying so. */
.tablevoice.from-lounge{
  border-color:rgba(255,210,122,.6);
  box-shadow:0 6px 20px rgba(0,0,0,.6), 0 0 18px rgba(255,190,90,.25);
}
.tablevoice.from-lounge .tv-label::after{content:' \00b7 lounge'}

/* How many are here, beside the name. Deliberately a small quiet pill rather
   than a line of text — it is context, and the header already carries enough. */
.lounge-headcount{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:26px;padding:0 10px;margin-left:2px;
  border-radius:13px;font-size:14px;font-weight:700;
  font-family:'DM Mono',monospace;letter-spacing:.02em;
  background:linear-gradient(180deg,rgba(255,210,122,.28),rgba(255,190,90,.14));
  border:1px solid rgba(255,210,122,.65);
  color:#ffe4ab;cursor:default;
  box-shadow:0 0 12px rgba(255,190,90,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.lounge-headcount::before{
  content:'';width:7px;height:7px;border-radius:50%;background:#5ad18a;
  box-shadow:0 0 8px #5ad18a;margin-right:7px;
  animation:hcpulse 2.4s ease-in-out infinite;
}
@keyframes hcpulse{
  0%,100%{box-shadow:0 0 6px #5ad18a}
  50%{box-shadow:0 0 13px #7ff0aa}
}

/* =============================================================================
 * THE STAFF PANEL
 * Grouped by what an action does and by what it costs if you are wrong. The
 * irreversible column is visually separate on purpose: "give someone a thousand"
 * and "delete their account" should not look like the same decision.
 * ========================================================================== */
.sp{display:flex;flex-direction:column;gap:12px}

.sp-top{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
.sp-you{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:10px 16px;border-radius:8px;min-width:170px;
  background:linear-gradient(135deg,rgba(245,185,66,.16),rgba(0,0,0,.4));
  border:1px solid var(--amber-dim);
}
.sp-you.rank-mod{
  background:linear-gradient(135deg,rgba(127,216,255,.14),rgba(0,0,0,.4));
  border-color:rgba(127,216,255,.5);
}
.sp-rank{
  font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);
}
.sp-you.rank-mod .sp-rank{color:#9fe4ff}
.sp-youname{font-family:'Bevan',Georgia,serif;font-size:17px;color:var(--bone)}
.sp-stats{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.sp-stats > div{
  flex:1;min-width:74px;padding:8px 10px;border-radius:7px;text-align:center;
  background:rgba(0,0,0,.35);border:1px solid var(--brass-lo);
}
.sp-stats b{display:block;font-family:'DM Mono',monospace;font-size:19px;color:var(--amber)}
.sp-stats span{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}

.sp-room{display:flex;gap:6px;flex-wrap:wrap}
.sp-search{
  width:100%;padding:10px 14px;border-radius:7px;font-size:13.5px;
  background:rgba(0,0,0,.45);border:1px solid var(--brass-lo);color:var(--bone);
}
.sp-list{display:flex;flex-direction:column;gap:9px}

.sp-card{
  padding:11px 13px;border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.25));
  border:1px solid var(--brass-lo);
  display:flex;flex-direction:column;gap:9px;
}
.sp-card.on{border-color:rgba(90,209,138,.45)}
.sp-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp-dot{width:7px;height:7px;border-radius:50%;background:#4a4a4a;flex:0 0 auto}
.sp-card.on .sp-dot{background:#5ad18a;box-shadow:0 0 7px #5ad18a}
.sp-nick{font-size:15px;font-weight:600;color:var(--bone)}
.sp-tag{
  font-size:8px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:2px 7px;border-radius:9px;
}
.sp-tag.admin{background:var(--amber);color:#2a1204}
.sp-tag.mod{background:#7fd8ff;color:#04222e}
.sp-tag.ban{background:#8a1226;color:#ffd9d9}
.sp-tag.mute{background:#4a3a12;color:#ffe9c0}

.sp-figures{display:flex;gap:7px;flex-wrap:wrap}
.sp-figures > div{
  flex:1;min-width:82px;padding:5px 9px;border-radius:6px;
  background:rgba(0,0,0,.3);
}
.sp-figures span{
  display:block;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);
}
.sp-figures b{font-family:'DM Mono',monospace;font-size:12.5px;color:var(--bone)}

.sp-acts{display:flex;gap:8px;flex-wrap:wrap}
.sp-grp{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  padding:7px 9px;border-radius:7px;
  background:rgba(0,0,0,.26);border:1px solid rgba(201,146,46,.14);
}
.sp-grp label{
  font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-dim);
  margin-right:2px;
}
.sp-grp.danger{border-color:rgba(180,40,50,.35);background:rgba(60,10,16,.28)}
.sp-grp.danger label{color:#ff9a8a}
.sp-amt{
  width:74px;padding:5px 8px;border-radius:5px;font-size:12px;
  background:rgba(0,0,0,.5);border:1px solid var(--brass-lo);color:var(--bone);
}
.btn.sm{padding:5px 10px;font-size:11.5px;border-radius:5px}
.btn.sm.warn{border-color:rgba(255,170,90,.5);color:#ffd6a8}
.btn.sm.danger{background:rgba(140,25,35,.5);border-color:#ff9a8a;color:#ffd9d9}
.btn:disabled{opacity:.34;cursor:not-allowed;filter:grayscale(.4)}

.sp-empty{color:var(--bone-dim);font-size:13px;text-align:center;padding:16px}
.sp-note{font-size:11.5px;color:var(--bone-dim);font-style:italic;margin:0}
.sp-ipadd{display:flex;gap:7px;margin:10px 0}
.sp-ipadd input{
  flex:1;padding:9px 12px;border-radius:6px;font-family:'DM Mono',monospace;
  background:rgba(0,0,0,.45);border:1px solid var(--brass-lo);color:var(--bone);
}
.proftable td.mono{font-family:'DM Mono',monospace;font-size:12px}

/* =============================================================================
 * THE ROOM CHOOSER
 * Four rooms, each a complete lounge. The button opens the choice, not a room.
 * ========================================================================== */
.rooms-page{
  position:fixed;inset:0;z-index:410;display:flex;flex-direction:column;
  background:radial-gradient(ellipse at 50% 0%,#1a3b3d,#08181c 60%,#040c0f);
  color:#fff2d6;font-family:'Inter Tight',system-ui,sans-serif;
}
body.in-rooms{overflow:hidden}
.rooms-bar{
  display:flex;align-items:center;gap:16px;padding:14px 20px;
  border-bottom:1px solid rgba(255,210,122,.28);
}
.rooms-title{font-family:'Bevan',Georgia,serif;font-size:22px;color:#ffd27a;
  letter-spacing:.06em}
.rooms-sub{font-size:12px;color:rgba(255,242,214,.55);letter-spacing:.14em;
  text-transform:uppercase}
.rooms-grid{
  flex:1;display:grid;gap:16px;padding:26px;align-content:center;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  max-width:1180px;width:100%;margin:0 auto;
}
.roomcard{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:22px 20px 18px;border-radius:14px;text-align:left;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(0,0,0,.42));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  transition:.18s;overflow:hidden;
}
.roomcard::before{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent);
}
.roomcard::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%);
  opacity:0;transition:opacity .2s;
}
.roomcard:hover{transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 16px 44px rgba(0,0,0,.62)}
.roomcard:hover::after{opacity:1}
.rc-name{font-family:'Bevan',Georgia,serif;font-size:20px;color:var(--accent);
  line-height:1.15}
.rc-sub{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,242,214,.62)}
.rc-blurb{font-size:13px;color:rgba(255,242,214,.78);line-height:1.5;flex:1}
.rc-foot{display:flex;flex-direction:column;gap:2px;font-size:11.5px;
  color:rgba(255,242,214,.5);margin-top:6px}
.rc-foot b{color:var(--accent);font-family:'DM Mono',monospace}
.rc-foot em{font-style:normal;font-size:10.5px;color:rgba(255,242,214,.42)}
.rc-lock{position:absolute;top:14px;right:16px;font-size:16px;color:var(--accent);
  opacity:.85}
.roomcard.locked{background:linear-gradient(160deg,rgba(90,40,120,.22),rgba(0,0,0,.5))}

/* =============================================================================
 * THE DOOR
 * ========================================================================== */
.door-page{
  position:fixed;inset:0;z-index:420;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 40%,#160a24,#080410 65%,#020103);
  color:#efe4ff;font-family:'Inter Tight',system-ui,sans-serif;
}
.door-panel{
  width:min(430px,90vw);padding:34px 30px 26px;border-radius:16px;text-align:center;
  background:linear-gradient(180deg,rgba(40,18,62,.85),rgba(10,4,18,.95));
  border:1px solid rgba(224,166,255,.35);
  box-shadow:0 26px 80px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
}
.door-badge{
  display:inline-block;padding:4px 14px;border-radius:12px;margin-bottom:14px;
  font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:800;
  background:rgba(224,166,255,.16);border:1px solid rgba(224,166,255,.45);color:#e0a6ff;
}
.door-title{font-family:'Bevan',Georgia,serif;font-size:25px;margin:0 0 6px;color:#f3e6ff}
.door-note{font-size:13px;color:rgba(239,228,255,.6);margin:0 0 20px;line-height:1.55}
.door-form{display:flex;gap:8px}
.door-form input{
  flex:1;padding:12px 15px;border-radius:8px;font-size:16px;letter-spacing:.3em;
  text-align:center;background:rgba(0,0,0,.55);color:#f3e6ff;
  border:1px solid rgba(224,166,255,.35);
}
.door-form input:focus{outline:none;border-color:#e0a6ff;
  box-shadow:0 0 0 3px rgba(224,166,255,.18)}
.door-error{
  margin-top:12px;padding:9px 12px;border-radius:7px;font-size:12.5px;
  background:rgba(140,25,45,.3);border:1px solid rgba(255,140,140,.4);color:#ffd9d9;
}
.door-back{
  margin-top:20px;font-size:12.5px;color:rgba(239,228,255,.55);
  text-decoration:underline;text-underline-offset:3px;transition:.14s;
}
.door-back:hover{color:#e0a6ff}

/* the glowing i on a chat that forgets */
.chat-ttl{
  position:absolute;top:9px;right:34px;z-index:6;
  width:19px;height:19px;border-radius:50%;
  font-family:Georgia,serif;font-style:italic;font-size:11.5px;line-height:1;
  background:rgba(224,166,255,.18);border:1px solid rgba(224,166,255,.6);
  color:#e0a6ff;cursor:pointer;
  animation:ttlglow 2.6s ease-in-out infinite;
}
@keyframes ttlglow{
  0%,100%{box-shadow:0 0 5px rgba(224,166,255,.35)}
  50%{box-shadow:0 0 13px rgba(224,166,255,.85)}
}
.chat-ttl:hover{background:#e0a6ff;color:#180a26;animation:none}
.lounge-page #chat{position:absolute}
@media (prefers-reduced-motion: reduce){ .chat-ttl{animation:none} }

/* the sign-in title */
#gateTitle .gt-sub{
  display:block;font-size:.52em;letter-spacing:.02em;line-height:1.15;margin-top:.12em;
}

/* the destination chooser */
.modeopt.dest-casino .mo-title,.modeopt.dest-lounge .mo-title{letter-spacing:.01em}
.modeopt.dest-lounge{
  border-color:rgba(255,210,122,.35);
}
.modeopt.dest-lounge:hover{border-color:#ffd27a}
.modeopt.locked{
  opacity:.45;cursor:not-allowed;filter:grayscale(.55);
  position:relative;
}
.modeopt.locked:hover{transform:none;border-color:var(--brass-lo);box-shadow:none}
.mo-locked{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  padding:9px 18px;border-radius:8px;white-space:nowrap;
  font-family:'Bevan',Georgia,serif;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;
  background:rgba(10,4,6,.94);border:1px solid var(--amber-dim);color:var(--amber);
  box-shadow:0 6px 20px rgba(0,0,0,.6);
}
@media (max-width:700px){
  .modeopts{grid-template-columns:1fr}
  .mo-locked{font-size:11.5px;padding:7px 13px}
}

/* =============================================================================
 * THE LOUNGE ON A PHONE
 *
 * The room fills the screen and keeps filling it. Everything else is summoned
 * one thing at a time from a bar along the bottom, where a thumb reaches. A
 * sheet covers a little over half the height, so the room stays visible above
 * it and you never lose your place in the conversation.
 * ========================================================================== */

.lounge-page.lm{ --lm-bar: 58px; --lm-tick: 34px; }

/* the room takes everything, minus the bar and the ticker */
.lounge-page.lm #game-container{
  position:absolute;
  inset:var(--lounge-bar-h) 0 calc(var(--lm-bar) + var(--lm-tick)) 0;
}
/* the desktop columns and chat window are not used here */
.lounge-page.lm #left-panels,
.lounge-page.lm #right-panels{display:none !important}
.lounge-page.lm #lmPark{display:none}

/* the header slims down to what a phone needs */
.lounge-page.lm .lounge-bar{
  height:46px;padding:0 8px;gap:8px;
}
.lounge-page.lm .lounge-title{font-size:14px;letter-spacing:.04em}
.lounge-page.lm .lounge-loaded,
.lounge-page.lm .lounge-status,
.lounge-page.lm .lounge-now,
.lounge-page.lm #hud-mode{display:none}
.lounge-page.lm .lounge-headcount{min-width:26px;height:22px;font-size:12px}
.lounge-page.lm .btn.casinobtn{padding:6px 11px;font-size:11px}
.lounge-page.lm #btnVoiceSettings,
.lounge-page.lm .btn.dowork{padding:6px 9px;font-size:10px}
.lounge-page.lm{ --lounge-bar-h: 46px; }

/* ------------------------------------------------------------- the tab bar */
.lm-tabs{
  position:absolute;left:0;right:0;bottom:0;height:var(--lm-bar);z-index:99;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:linear-gradient(180deg,rgba(6,18,16,.96),rgba(3,10,9,.99));
  border-top:1px solid rgba(255,210,122,.3);
  box-shadow:0 -6px 22px rgba(0,0,0,.55);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.lm-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:rgba(255,242,214,.62);transition:.14s;position:relative;
}
.lm-ic{font-size:19px;line-height:1}
.lm-lb{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}
.lm-tab.on{color:#ffd27a}
.lm-tab.on::before{
  content:'';position:absolute;top:0;left:22%;right:22%;height:2px;
  background:#ffd27a;border-radius:0 0 2px 2px;
}
.lm-tab:active{background:rgba(255,210,122,.1)}

/* -------------------------------------------------------------- the ticker */
.lm-ticker{
  position:absolute;left:0;right:0;bottom:var(--lm-bar);height:var(--lm-tick);
  z-index:98;display:flex;align-items:center;gap:8px;padding:0 12px;
  background:rgba(4,14,12,.9);border-top:1px solid rgba(255,210,122,.16);
  text-align:left;
}
.lm-tick-dot{
  width:6px;height:6px;border-radius:50%;background:#5ad18a;flex:0 0 auto;
  box-shadow:0 0 6px #5ad18a;
}
.lm-tick-text{
  flex:1;min-width:0;font-size:12px;color:rgba(255,242,214,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lm-tick-badge{
  flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;background:#ee4338;color:#fff;
}

/* --------------------------------------------------------------- the sheet */
.lm-sheet{
  position:absolute;left:0;right:0;
  bottom:calc(var(--lm-bar) + var(--lm-tick));
  max-height:58vh;z-index:94;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(10,26,22,.985),rgba(4,14,12,.99));
  border-top:1px solid rgba(255,210,122,.42);
  border-radius:16px 16px 0 0;
  box-shadow:0 -14px 40px rgba(0,0,0,.7);
  transform:translateY(102%);
  transition:transform .24s cubic-bezier(.2,.9,.3,1);
  pointer-events:none;
}
.lm-sheet.on{transform:none;pointer-events:auto}
.lm-grab{padding:8px 0 2px;display:flex;justify-content:center;cursor:pointer}
.lm-grab span{width:38px;height:4px;border-radius:2px;background:rgba(255,210,122,.4)}
.lm-sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 14px 8px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#ffd27a;
}
.lm-close{
  width:28px;height:28px;border-radius:50%;font-size:19px;line-height:1;
  background:rgba(255,255,255,.07);color:#ffe9c0;
}
.lm-sheet-body{
  flex:1;min-height:0;overflow-y:auto;padding:0 12px 14px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.lm-sheet-body::-webkit-scrollbar{width:0;display:none}

/* panels inside a sheet drop their own chrome — the sheet is the chrome */
.lm-sheet-body > *{
  position:static !important;width:auto !important;max-height:none !important;
  transform:none !important;margin:0 0 10px !important;
  inset:auto !important;
}
.lm-sheet-body #chat{
  display:flex !important;flex-direction:column;height:44vh;
  background:transparent;border:0;box-shadow:none;
}
.lm-sheet-body #chat-log{flex:1;min-height:0;max-height:none}

/* the room dims a little behind an open sheet, so the sheet reads as in front */
.lounge-page.lm.sheet-open #game-container{filter:brightness(.62)}
.lounge-page.lm #game-container{transition:filter .2s ease}

/* ------------------------------------------------- the exhale controls
   These summon themselves when you hold the shisha, because that is exactly
   when they matter. Making somebody open a menu to blow smoke would be absurd. */
.lounge-page.lm #smoke-bar{
  position:absolute !important;
  left:8px;right:8px;bottom:calc(var(--lm-bar) + var(--lm-tick) + 8px);
  transform:none !important;width:auto;
  padding:9px 10px;border-radius:13px;gap:6px;
  z-index:94;
}
.lounge-page.lm #smoke-bar-btns{gap:5px;flex-wrap:wrap;justify-content:center}
.lounge-page.lm #smoke-bar-btns button{padding:7px 9px;font-size:10.5px}
.lounge-page.lm #smoke-bar-label{font-size:9px;letter-spacing:.16em}
.lounge-page.lm.sheet-open #smoke-bar{opacity:0;pointer-events:none}

/* the card table gets the room, minus the furniture */
.lounge-page.lm #cardtable{
  left:6px;right:6px;width:auto;transform:none;
  bottom:calc(var(--lm-bar) + var(--lm-tick) + 6px);
}
.lounge-page.lm #ctSeats{display:none}
.lounge-page.lm .ct-hand{min-height:104px}
.lounge-page.lm .pcard,.lounge-page.lm .ucard{width:52px;height:76px}
.lounge-page.lm .ucard .uc-mid{font-size:26px}
.lounge-page.lm .ucard .uc-corner{font-size:11px}

/* the Keno drop and the chat ttl badge follow the same rules */
.lounge-page.lm .lounge-kenodrop{
  top:calc(var(--lounge-bar-h) + 4px);width:calc(100% - 16px);
}
.lounge-page.lm .chat-ttl{top:6px;right:44px}

/* nothing in the lounge should rubber-band the page behind it */
.lounge-page.lm{overscroll-behavior:contain;touch-action:manipulation}


/* Both gate headings carry the longer name now, so the second line is sized to
   fit rather than inheriting a size chosen for two short words. */
.gatecard h1.grand span,
#gateTitle .gt-sub{
  display:block;font-size:.5em;line-height:1.12;margin-top:.1em;
  letter-spacing:.01em;
}
@media (max-width:520px){
  .gatecard h1.grand span,#gateTitle .gt-sub{font-size:.44em}
}


/* the two Grand messages take turns rather than sharing the space */
.jp.grand{position:relative;overflow:hidden}
.jp-keno .jk-label{
  font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin:0 0 2px;white-space:nowrap;
}
.jp-keno .jk-balls{display:flex;gap:3px;flex-wrap:nowrap;justify-content:center}
.jp-keno .jkball{
  width:23px;height:23px;font-size:11px;flex:0 0 auto;
  animation:jkpop .32s cubic-bezier(.2,1.5,.4,1) backwards;
}
/* they arrive in order, quickly — the same gesture as a draw, compressed */
.jp-keno .jkball:nth-child(1){animation-delay:.02s}
.jp-keno .jkball:nth-child(2){animation-delay:.05s}
.jp-keno .jkball:nth-child(3){animation-delay:.08s}
.jp-keno .jkball:nth-child(4){animation-delay:.11s}
.jp-keno .jkball:nth-child(5){animation-delay:.14s}
.jp-keno .jkball:nth-child(6){animation-delay:.17s}
.jp-keno .jkball:nth-child(7){animation-delay:.20s}
.jp-keno .jkball:nth-child(8){animation-delay:.23s}
.jp-keno .jkball:nth-child(9){animation-delay:.26s}
.jp-keno .jkball:nth-child(10){animation-delay:.29s}
@keyframes jkpop{
  from{opacity:0;transform:scale(.5)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .jp-keno .jkball{animation:none}
  .jp-keno{transition:none}
}
@media (max-width:1100px){ .jp-keno .jkball{width:17px;height:17px;font-size:9px} }

/* =============================================================================
 * THE ROOM CHOOSER, SLEEKER
 * A vertical list rather than a grid: four rooms is a menu, not a gallery, and
 * a list reads top to bottom the way a decision does.
 * ========================================================================== */
.rooms-grid{
  display:flex !important;flex-direction:column;gap:12px;
  grid-template-columns:none !important;
  width:min(660px, 100%);max-width:none;padding:24px 20px;margin:0 auto;
}
.roomcard{
  flex-direction:row;align-items:center;gap:16px;
  padding:18px 22px;min-height:88px;
}
.roomcard::before{
  inset:0 auto 0 0;width:4px;height:auto;
}
.roomcard .rc-name{flex:0 0 auto;min-width:200px;font-size:19px}
.roomcard .rc-sub{
  position:absolute;left:22px;bottom:11px;font-size:10px;
}
.roomcard .rc-blurb{flex:1;font-size:12.5px;opacity:.8}
.roomcard .rc-foot{
  flex:0 0 auto;margin:0;text-align:right;align-items:flex-end;
}

/* the glow: a slow breath at rest, and a bright edge under the cursor */
.roomcard{
  animation:roomglow 4.2s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * .55s);
}
@keyframes roomglow{
  0%,100%{box-shadow:0 8px 26px rgba(0,0,0,.5),
                     0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent)}
  50%{box-shadow:0 8px 26px rgba(0,0,0,.5),
                 0 0 22px color-mix(in srgb,var(--accent) 30%,transparent),
                 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
}
.roomcard:hover{
  animation:none;
  border-color:var(--accent);
  box-shadow:0 12px 38px rgba(0,0,0,.62),
             0 0 34px color-mix(in srgb,var(--accent) 45%,transparent),
             inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent);
}
.roomcard.locked{animation-duration:3s}

@media (max-width:640px){
  .roomcard{flex-direction:column;align-items:flex-start;gap:5px;padding:16px 18px}
  .roomcard .rc-name{min-width:0;font-size:17px}
  .roomcard .rc-sub{position:static}
  .roomcard .rc-foot{text-align:left;align-items:flex-start}
}
@media (prefers-reduced-motion: reduce){ .roomcard{animation:none} }

/* =============================================================================
 * MOBILE LAYOUT, SECOND PASS
 *
 * Two faults in the first version, both visible the moment it ran on a real
 * phone rather than in a stubbed viewport:
 *
 *   The room was letterboxed. The scene is a 16:9 stage and the phone is 9:20,
 *   so fitting the stage left roughly two thirds of the screen black. Fixed in
 *   the renderer, which now fits the ROOM rather than the stage.
 *
 *   The bottom was cut off. `100vh` on Android is the height WITHOUT the
 *   navigation bar subtracted, so anything anchored to the bottom sits under
 *   it. `dvh` is the dynamic viewport height and is what that anchor needs.
 * ========================================================================== */
.lounge-page.lm{
  height:100dvh;
  max-height:100dvh;
  inset:0 0 auto 0;
}
@supports not (height: 100dvh){
  .lounge-page.lm{height:100vh;max-height:100vh}
}

/* the bar sits above the phone's own navigation, not under it */
.lounge-page.lm .lm-tabs{
  height:calc(var(--lm-bar) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  box-sizing:border-box;
}
.lounge-page.lm .lm-ticker{
  bottom:calc(var(--lm-bar) + env(safe-area-inset-bottom, 0px));
}
.lounge-page.lm .lm-sheet{
  bottom:calc(var(--lm-bar) + var(--lm-tick) + env(safe-area-inset-bottom, 0px));
  /* dvh again: 58vh is measured against a taller viewport than the one the
     sheet actually has, so it overshoots and the header ends up off-screen */
  max-height:min(56dvh, 520px);
}
@supports not (height: 100dvh){
  .lounge-page.lm .lm-sheet{max-height:min(52vh, 480px)}
}
.lounge-page.lm #smoke-bar{
  bottom:calc(var(--lm-bar) + var(--lm-tick) + env(safe-area-inset-bottom, 0px) + 8px);
}
.lounge-page.lm #cardtable{
  bottom:calc(var(--lm-bar) + var(--lm-tick) + env(safe-area-inset-bottom, 0px) + 6px);
}

/* the room takes the whole band between the header and the furniture */
.lounge-page.lm #game-container{
  inset:var(--lounge-bar-h) 0
        calc(var(--lm-bar) + var(--lm-tick) + env(safe-area-inset-bottom, 0px)) 0;
  overflow:hidden;
}

/* the sheet must always be able to show its own header and something under it */
.lounge-page.lm .lm-sheet-body{min-height:120px}

/* the exhale panel was competing with the sheet for the same strip. It is a
   compact row on a phone: five styles, an aim dial and a toggle, in one line
   each rather than a desktop panel shrunk down. */
.lounge-page.lm #smoke-bar{
  padding:8px 8px 9px;gap:5px;
}
.lounge-page.lm #smoke-bar-label{display:none}
.lounge-page.lm #smoke-bar-btns{
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%;
}
.lounge-page.lm #smoke-bar-btns button{
  padding:6px 2px;font-size:9px;line-height:1.2;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.lounge-page.lm #smoke-bar-btns button img,
.lounge-page.lm #smoke-bar-btns button svg{width:16px;height:16px}
/* the aim dial and the skill toggle share a row */
.lounge-page.lm #smoke-extra{
  display:flex;align-items:center;justify-content:center;gap:14px;width:100%;
}
.lounge-page.lm #smoke-knob{width:40px !important;height:40px !important}
.lounge-page.lm .smoke-extra-label{font-size:8px;letter-spacing:.14em}
.lounge-page.lm #smoke-skill{padding:7px 13px;font-size:11px}
.lounge-page.lm #smoke-knob-wrap,
.lounge-page.lm #smoke-skill-wrap{gap:2px}

/* nothing may be parked visible */
.lounge-page.lm #lmPark{display:none !important;visibility:hidden}

/* =============================================================================
 * WHAT A REAL PHONE SHOWED
 *
 * Three faults, none of which a stubbed viewport could have found:
 *
 *   The gate heading was a gradient clipped to text. Where that clip is not
 *   fully supported the browser shows the gradient's darkest stop, which on a
 *   near-black card is unreadable. A solid colour first, gradient only where it
 *   is known to work.
 *
 *   The room cards were a flex ROW with a 200px minimum on the name. On a 380px
 *   screen that overflows the viewport and drags the whole page sideways.
 *
 *   Nothing stopped horizontal overflow anywhere, so one wide child took the
 *   entire layout with it.
 * ========================================================================== */

/* Never let one wide child drag the page sideways.
 *
 * The first version of this also set `max-width:100%` on the cards themselves,
 * which OVERRODE the caps they already had — .modecard's 760px and the room
 * grid's 620px — and stretched both screens across a 2500px monitor. A rule
 * meant to stop overflow on a phone should not decide layout on a desktop.
 * Clipping belongs on the page; the caps belong on the cards. */
html, body{max-width:100%;overflow-x:hidden}
.gate, .modecard, .rooms-page, .rooms-grid{box-sizing:border-box}

/* the heading, legible first and decorated second */
.modecard h1,
.gatecard h1.grand,
#gateTitle{
  color:#ffd98a;
  -webkit-text-fill-color:#ffd98a;
}
@supports (-webkit-background-clip: text) and (background-clip: text){
  @media (hover: hover) and (pointer: fine){
    .modecard h1,.gatecard h1.grand,#gateTitle{
      background:linear-gradient(180deg,#ffe9ae 10%,#e0a53a 48%,#b8801f 62%,#f0c46a 92%);
      -webkit-background-clip:text;background-clip:text;
      color:transparent;-webkit-text-fill-color:transparent;
    }
  }
}

/* the room cards stack on anything narrow, and never set a minimum wider
   than the screen */
@media (max-width:760px){
  .rooms-grid{padding:16px 12px;gap:10px;max-width:100%}
  .roomcard{
    flex-direction:column;align-items:flex-start;gap:5px;
    padding:15px 16px;min-height:0;
  }
  .roomcard .rc-name{min-width:0 !important;width:100%;font-size:17px}
  .roomcard .rc-sub{position:static}
  .roomcard .rc-blurb{font-size:12.5px}
  .roomcard .rc-foot{text-align:left;align-items:flex-start;margin-top:4px}
  .rooms-bar{padding:10px 12px;gap:10px}
  .rooms-title{font-size:17px}
  .rooms-sub{display:none}
}

/* the destination cards, on a phone */
@media (max-width:760px){
  .modecard{padding:20px 16px;max-width:100%}
  .modeopts{grid-template-columns:1fr;gap:10px}
  .modeopt{padding:16px}
  .mo-title{font-size:19px}
  .mo-body{font-size:12.5px;line-height:1.5}
  .mo-locked{font-size:12px;padding:8px 14px;white-space:normal;text-align:center}
}

/* a modal on a phone must fit the phone */
@media (max-width:760px){
  .modal{
    width:calc(100vw - 20px) !important;max-width:calc(100vw - 20px) !important;
    left:10px !important;right:10px !important;
    max-height:calc(100dvh - 80px);
  }
  .modalbody{max-height:calc(100dvh - 170px);overflow-y:auto}
  .wheelwrap,.wheel{max-width:100% !important;height:auto !important}
}

/* =============================================================================
 * THE ROOM CHOOSER, DRESSED
 *
 * It is the first thing you see of the lounge, and it was four cards on a flat
 * background — which said nothing about where you were about to go. The smoke
 * sits behind everything at low opacity: it should register as atmosphere
 * rather than as an animation, and it must never compete with the decision the
 * screen exists to support.
 * ========================================================================== */
.rooms-smoke{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:1;
  /* thickest low down, thinning upward, gone at the very top */
  mask-image:linear-gradient(180deg,transparent 2%,#000 34%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent 2%,#000 34%,#000 92%,transparent);
}
.rooms-page{
  /* Darker. The room this leads to is dim and lit by hanging lamps; the door to
     it should not be brighter than the room. */
  background:
    radial-gradient(ellipse at 50% 118%, rgba(96,62,28,.16), transparent 52%),
    radial-gradient(ellipse at 50% -12%, rgba(18,52,58,.20), transparent 55%),
    linear-gradient(180deg,#06171a,#030d10 52%,#010608) !important;
}
.rooms-bar,.rooms-grid{position:relative;z-index:1}

/* a hanging lamp either side, drawn in CSS — the room's own furniture,
   reaching into the screen you choose it from */
.rooms-page::before,
.rooms-page::after{
  content:'';position:absolute;top:0;width:120px;height:210px;
  pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(255,196,110,.34), transparent 62%),
    linear-gradient(180deg, rgba(255,210,122,.5) 0 34%, transparent 34%);
  background-size:100% 100%, 2px 100%;
  background-position:center, center;
  background-repeat:no-repeat;
  opacity:.55;
  animation:lampsway 7s ease-in-out infinite;
}
.rooms-page::before{left:4%}
.rooms-page::after{right:4%;animation-delay:-3.2s}
@keyframes lampsway{
  0%,100%{transform:rotate(-1.1deg)}
  50%{transform:rotate(1.1deg)}
}
.rooms-page::before,.rooms-page::after{transform-origin:50% 0}

/* the cards read as brass plates on a wall rather than flat rectangles */
.roomcard{
  background:
    linear-gradient(160deg,rgba(255,255,255,.085),rgba(0,0,0,.5)) !important;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.roomcard::before{
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent);
}
.rc-name{
  text-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent);
}

/* a wisp curling off the top of the card you are pointing at */
.roomcard::after{
  background:radial-gradient(ellipse at 12% 0%,
    color-mix(in srgb,var(--accent) 26%,transparent), transparent 58%);
}

@media (prefers-reduced-motion: reduce){
  .rooms-page::before,.rooms-page::after{animation:none}
}
@media (max-width:760px){
  .rooms-page::before,.rooms-page::after{width:70px;height:130px;opacity:.4}
  .rooms-smoke{opacity:.6}
}

/* =============================================================================
 * THE GRAND BAR'S SECOND MESSAGE
 *
 * This rule was lost when an earlier cleanup removed the block it happened to
 * sit in, and nothing complained: the numbers still rendered, just inline,
 * unpositioned and transparent, with the jackpot figure showing through. A
 * missing layout rule does not throw — it just looks wrong, which is why it
 * needed a test rather than a read-through.
 * ========================================================================== */
.jp.grand{position:relative;overflow:hidden}
.jp-keno{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:5px 10px;
  /* opaque, so nothing shows through from the meter behind it */
  background:linear-gradient(180deg,rgba(18,6,10,.97),rgba(8,3,5,.99));
  /* it fades rather than snapping: a hoarding changes, it does not blink */
  opacity:0;transition:opacity .38s ease;
  pointer-events:none;
}
.jp.grand.showing-keno .jp-keno{opacity:1}
.jp.grand.showing-keno .jp-val,
.jp.grand.showing-keno .jp-sub,
.jp.grand.showing-keno .jp-label{
  opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s;
}
.jp.grand .jp-val,.jp.grand .jp-sub,.jp.grand .jp-label{
  transition:opacity .3s ease, visibility .3s;
}

/* =============================================================================
 * THE ROOM CARDS — A DOOR, NOT A BUTTON
 *
 * Desktop and mobile are written SEPARATELY here, on purpose. The last version
 * shared one rule between them and a phone fix stretched the cards across a
 * desktop monitor. A width that suits a 380px screen has nothing to say about a
 * 2500px one, and pretending otherwise is how that happened.
 *
 * Everything below the media queries is shape and finish — colour, edge, glow —
 * which genuinely is shared. Width and direction are not.
 * ========================================================================== */

/* ---- the finish, shared because it is not about size --------------------- */
.roomcard{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.07) !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 42%,
                    rgba(0,0,0,.34)) !important;
  backdrop-filter:blur(9px) saturate(1.15);
  -webkit-backdrop-filter:blur(9px) saturate(1.15);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 14px 38px rgba(0,0,0,.55) !important;
  transition:transform .22s cubic-bezier(.2,.9,.3,1),
             border-color .22s, box-shadow .22s;
}
/* the accent lives as a hairline down the leading edge, not a slab */
.roomcard::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;height:auto;
  background:linear-gradient(180deg,
    transparent, var(--accent) 18%, var(--accent) 82%, transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 60%,transparent);
  opacity:.75;transition:opacity .22s, width .22s;
}
/* a slow sheen crossing the card, the way light moves over polished brass */
.roomcard::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,
    transparent 38%,
    color-mix(in srgb,var(--accent) 13%,transparent) 48%,
    transparent 58%);
  transform:translateX(-100%);
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
  opacity:0;
}
.roomcard:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 20px 52px rgba(0,0,0,.68),
    0 0 44px color-mix(in srgb,var(--accent) 22%,transparent) !important;
}
.roomcard:hover::before{opacity:1;width:3px}
.roomcard:hover::after{transform:translateX(100%);opacity:1}

.rc-name{
  font-family:'Bevan',Georgia,serif;letter-spacing:.01em;
  color:var(--accent);
  text-shadow:0 0 24px color-mix(in srgb,var(--accent) 40%,transparent);
}
.rc-sub{
  font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 62%,rgba(255,255,255,.4));
}
.rc-blurb{color:rgba(232,240,240,.62)}
.rc-foot{color:rgba(232,240,240,.36)}
.rc-foot b{color:var(--accent)}
.rc-lock{
  opacity:.9;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 70%,transparent));
}
.roomcard.locked{
  background:
    linear-gradient(160deg, rgba(150,90,220,.10), rgba(0,0,0,.42)) !important;
}

/* the count sits in a small plate rather than loose text */
.rc-foot b{
  display:inline-block;padding:1px 8px;border-radius:9px;
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  font-family:'DM Mono',monospace;font-size:11px;
}

@media (prefers-reduced-motion: reduce){
  .roomcard,.roomcard::after{transition:none;animation:none}
}

/* ---- DESKTOP ONLY: a capped row, side by side --------------------------- */
@media (min-width:761px){
  .rooms-grid{
    width:min(680px, 100%);
    padding:28px 20px;
    gap:14px;
  }
  .roomcard{
    flex-direction:row;align-items:center;gap:18px;
    padding:20px 24px;min-height:92px;
  }
  .roomcard .rc-name{flex:0 0 auto;min-width:210px;font-size:20px}
  .roomcard .rc-sub{position:absolute;left:24px;bottom:12px}
  .roomcard .rc-blurb{flex:1;font-size:13px}
  .roomcard .rc-foot{flex:0 0 auto;text-align:right;align-items:flex-end}
}

/* ---- PHONE ONLY: full width, stacked ------------------------------------ */
@media (max-width:760px){
  .rooms-grid{
    width:100%;
    padding:14px 12px;
    gap:10px;
  }
  .roomcard{
    flex-direction:column;align-items:flex-start;gap:5px;
    padding:16px 16px;min-height:0;
  }
  .roomcard .rc-name{min-width:0;width:100%;font-size:17px}
  .roomcard .rc-sub{position:static}
  .roomcard .rc-blurb{font-size:12.5px}
  .roomcard .rc-foot{text-align:left;align-items:flex-start;margin-top:5px}
  /* no sheen on a phone: it costs a repaint and nobody hovers */
  .roomcard::after{display:none}
}

/* =============================================================================
 * TWO RULES THAT WENT MISSING
 *
 * Both were casualties of stripping the old standalone-Keno stylesheet: the
 * strip-out took the block they happened to sit in, and nothing complained.
 * A button with no size still exists and still handles clicks — it is simply
 * zero pixels wide. A ball with no border-radius still shows its number — it is
 * simply not a ball. Neither throws, and that is precisely why they need rules
 * that are tested rather than read.
 * ========================================================================== */

/* the KENO button, beside SMOKE UP CUZZY */
.kenobtn{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:0 14px;margin-left:auto;
  border-radius:7px;flex:0 0 auto;
  background:linear-gradient(180deg,#ffffff,#eef4f8);
  border:1px solid #cfe3ee;
  box-shadow:0 2px 10px rgba(0,0,0,.4), inset 0 -2px 0 rgba(0,0,0,.07);
  transition:transform .15s, box-shadow .15s;
}
.kenobtn:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 18px rgba(7,132,187,.55), inset 0 -2px 0 rgba(0,0,0,.07);
}
.kenobtn[aria-selected="true"]{
  box-shadow:0 0 0 2px var(--amber), 0 5px 18px rgba(7,132,187,.5);
}
.kenologo{height:21px;width:auto;display:block}
.smokebtn{margin-left:8px}

/* the balls on the Grand bar are BALLS */
.jkball{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  color:#fff;font-weight:900;line-height:1;
  font-family:'Inter Tight',system-ui,sans-serif;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,.22),
    inset 0 3px 5px rgba(255,255,255,.28),
    0 2px 5px rgba(0,0,0,.45);
}
.jkball.k-red{background:#ee4338}
.jkball.k-blue{background:#00a9dc}
.jkball.k-green{background:#43a848}
.jkball.k-gold{background:#f5b72e;color:#2a1a04;text-shadow:none}
.jkball.k-grey{background:#9b9b9b}

/* =============================================================================
 * THE ROOM CHOOSER, PROPERLY
 *
 * The last version left four cards adrift in a screen of empty space with the
 * smoke drifting past them. Four rooms is a small, deliberate menu — it should
 * sit as a compact plate in the middle of the room, not spread across a
 * monitor. Compact, centred, dark, and lit only by its own accents.
 * ========================================================================== */

/* darker still: this is a corridor, not a lobby */
.rooms-page{
  background:
    radial-gradient(ellipse at 50% 108%, rgba(88,54,22,.14), transparent 46%),
    radial-gradient(ellipse at 50% -8%, rgba(14,44,50,.18), transparent 50%),
    linear-gradient(180deg,#041114,#020a0c 50%,#000405) !important;
}
/* a vignette, so the eye is pushed to the middle */
.rooms-page > .rooms-grid::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 50% 45%,
    transparent 30%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.82) 100%);
}

.rooms-page{
  display:flex;flex-direction:column;
}
.rooms-grid{
  /* centred in what is left after the bar, rather than pinned to the top */
  align-content:center;justify-content:center;
  margin:auto;
}

/* the plate the cards sit on */
.rooms-grid{
  position:relative;
}
.rooms-grid::after{
  content:'';position:absolute;inset:-14px -18px;z-index:-1;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(0,0,0,.30));
  border:1px solid rgba(255,255,255,.055);
  box-shadow:0 30px 90px rgba(0,0,0,.75);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

/* tighter cards */
.roomcard{
  border-radius:11px !important;
}
.rc-blurb{line-height:1.45}

/* ---- DESKTOP: compact, capped, side by side ---------------------------- */
@media (min-width:761px){
  .rooms-grid{
    width:min(620px, 92vw);
    padding:22px 18px;
    gap:11px;
  }
  .roomcard{
    padding:16px 20px;min-height:78px;gap:16px;
  }
  .roomcard .rc-name{min-width:190px;font-size:18px}
  .roomcard .rc-sub{left:20px;bottom:9px;font-size:9px}
  .roomcard .rc-blurb{font-size:12.5px}
  .rooms-bar{padding:11px 18px}
}

/* ---- PHONE: full width, stacked, no plate ------------------------------ */
@media (max-width:760px){
  .rooms-grid{
    width:100%;padding:12px 12px 20px;gap:9px;margin:0 auto;
  }
  .rooms-grid::after{display:none}
  .roomcard{padding:14px 15px}
  .roomcard .rc-name{font-size:16.5px}
  .roomcard .rc-blurb{font-size:12px}
}

/* =============================================================================
 * THE STAFF PANEL — FINDING PEOPLE, AND NOT MAKING MISTAKES
 *
 * Two things a panel like this has to do beyond looking tidy: let you find the
 * one account you came for, and make the irreversible actions hard to do by
 * accident. Everything below serves one of those.
 * ========================================================================== */

/* the search row: filter, scope, sort, all on one line */
.sp-find{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp-find .sp-search{flex:1;min-width:180px;margin:0}
.sp-scope{display:flex;gap:3px;padding:3px;border-radius:8px;background:rgba(0,0,0,.4)}
.sp-chip{
  padding:6px 12px;border-radius:6px;font-size:11.5px;font-weight:600;
  color:var(--bone-dim);letter-spacing:.03em;transition:.13s;
}
.sp-chip:hover{color:var(--bone)}
.sp-chip.on{background:var(--amber);color:#2a1204}
.sp-sort{
  display:flex;align-items:center;gap:6px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber-dim);
}
.sp-sort select{
  padding:7px 10px;border-radius:6px;font-size:12px;
  background:rgba(0,0,0,.5);border:1px solid var(--brass-lo);color:var(--bone);
}
.sp-count{
  font-size:10.5px;color:var(--bone-dim);letter-spacing:.08em;
  margin:-2px 0 -4px;
}

/* the session log: what you just did, so you never wonder */
.sp-logbox{
  margin-top:4px;padding:10px 13px;border-radius:9px;
  background:rgba(0,0,0,.32);border:1px solid rgba(201,146,46,.16);
}
.sp-logbox h5{
  font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber-dim);margin:0 0 7px;
}
.sp-log{max-height:120px;overflow-y:auto;scrollbar-width:thin}
.sp-log-line{
  display:flex;gap:9px;font-size:11.5px;padding:3px 0;
  color:rgba(246,240,230,.72);border-bottom:1px solid rgba(255,255,255,.045);
}
.sp-log-line:last-child{border:0}
.sp-log-line .t{
  font-family:'DM Mono',monospace;color:var(--bone-dim);flex:0 0 auto;font-size:10.5px;
}
.sp-log-line.good{color:#8ef0c4}
.sp-log-line.warn{color:#ffd6a8}
.sp-log-line.bad{color:#ff9a8a}
.sp-log-empty{font-size:11.5px;color:var(--bone-dim);font-style:italic}

/* The confirmation is a sheet inside the panel, not a modal over it: opening a
   modal closes whatever is open, and the panel is a modal, so asking a question
   used to destroy the thing that asked it. */
.sp-confirm{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:22px;
  background:rgba(6,2,4,.82);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border-radius:inherit;
  animation:spconf .16s ease;
}
@keyframes spconf{from{opacity:0}to{opacity:1}}
.sp-confirm-card{
  width:min(430px,100%);padding:22px 24px;border-radius:11px;
  background:linear-gradient(180deg,#2a1016,#150609);
  border:1px solid rgba(255,154,138,.4);
  box-shadow:0 24px 70px rgba(0,0,0,.8);
}
.sp-confirm-card h4{
  font-family:'Bevan',Georgia,serif;font-size:17px;color:#ffd6a8;margin:0 0 10px;
}
.modal .modalcard{position:relative}

/* the confirmation: in the app, and proportionate to what is being asked */
.sp-confirm-body{font-size:13.5px;line-height:1.6;color:var(--bone);margin:0 0 14px}
.sp-confirm-body b{color:var(--amber)}
.sp-confirm-ask{
  font-size:12px;color:var(--bone-dim);margin:0 0 7px;
}
.sp-confirm-ask b{color:var(--amber);font-family:'DM Mono',monospace}
.sp-confirm-input{
  width:100%;padding:11px 14px;border-radius:7px;font-size:14px;
  font-family:'DM Mono',monospace;
  background:rgba(0,0,0,.55);border:1px solid var(--brass-lo);color:var(--bone);
  margin-bottom:16px;
}
.sp-confirm-input:focus{
  outline:none;border-color:#ff9a8a;box-shadow:0 0 0 3px rgba(255,154,138,.16);
}
.sp-confirm-row{display:flex;gap:9px;justify-content:flex-end}
.sp-confirm-row .btn.danger:disabled{opacity:.35;cursor:not-allowed}

/* =============================================================================
 * THE ROOM CARDS, WITHOUT THE DESCRIPTIONS
 *
 * The blurbs were doing the work of a subtitle in a place that did not need
 * one: four rooms with distinct names do not have to be explained. Removing
 * them takes the row's third column with it, so the name and the count can sit
 * either side of the card and the whole list reads as centred rather than as a
 * table with an empty middle.
 *
 * The Cake Eaters line stays \u2014 it is part of the room's name, not a
 * description of it.
 * ========================================================================== */
@media (min-width:761px){
  .roomcard{
    justify-content:space-between;
    padding:20px 26px;min-height:74px;gap:20px;
  }
  .roomcard .rc-name{
    flex:1 1 auto;min-width:0;font-size:21px;
  }
  /* the subtitle tucks under the name rather than floating in the corner */
  .roomcard .rc-sub{
    position:static;display:block;margin-top:3px;font-size:9px;
  }
  .roomcard .rc-name,.roomcard .rc-sub{align-self:center}
  .roomcard .rc-foot{
    flex:0 0 auto;align-items:flex-end;text-align:right;margin:0;
  }
  /* a shade narrower now there is less in each row */
  .rooms-grid{width:min(540px, 92vw)}
}
@media (max-width:760px){
  .roomcard{gap:3px;padding:15px 16px}
  .roomcard .rc-name{font-size:17px}
  .roomcard .rc-sub{margin-top:2px}
  .roomcard .rc-foot{margin-top:6px}
}
/* the name and its subtitle behave as one block */
.roomcard > .rc-name{display:block}

/* =============================================================================
 * THE MOBILE LOUNGE HEADER, WHICH WAS A PILE-UP
 *
 * "Crime Prevention Unit" wrapped to three lines and everything else — the
 * headcount, the Keno toggle, the status line — was drawn on top of it. The
 * header was laid out for a name that happens to be short.
 *
 * A phone header holds three things: the way out, where you are, and the two
 * controls you actually press. Everything else belongs in a sheet.
 * ========================================================================== */
@media (max-width:760px){
  .lounge-page.lm .lounge-bar{
    display:flex !important;align-items:center;flex-wrap:nowrap;
    gap:8px;height:48px;padding:0 8px;overflow:hidden;
  }
  .lounge-page.lm{ --lounge-bar-h: 48px; }

  /* the way out */
  .lounge-page.lm #btnBackToCasino{
    flex:0 0 auto;padding:6px 10px;font-size:10.5px;letter-spacing:.06em;
  }

  /* where you are: one line, truncated rather than wrapped */
  .lounge-page.lm .lounge-title{
    flex:1 1 auto;min-width:0;
    font-size:13px;line-height:1.15;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .lounge-page.lm .lounge-headcount{
    flex:0 0 auto;min-width:24px;height:21px;font-size:11.5px;padding:0 7px;
    margin:0;
  }

  /* the two controls, and nothing else */
  .lounge-page.lm #btnVoiceSettings,
  .lounge-page.lm .btn.dowork{
    flex:0 0 auto;padding:6px 9px;font-size:10px;
  }
  /* the Keno toggle moves into the Room sheet on a phone: the header has no
     room for a fourth control and it is not one you press mid-puff */
  .lounge-page.lm #loungeKenoBtn{display:none}
  .lounge-page.lm .lounge-loaded,
  .lounge-page.lm .lounge-status,
  .lounge-page.lm #hud-status,
  .lounge-page.lm #hud-mode,
  .lounge-page.lm .lounge-now{display:none !important}
}

/* =============================================================================
 * THE CHAT IN ITS SHEET
 *
 * The desktop chat is absolutely positioned in the corner of the room, and a
 * rule added for the four-hour badge pinned it there. Moved into a sheet it
 * kept those coordinates, so it floated over the middle of the room while the
 * sheet below it sat empty — both visible at once, which is exactly what the
 * sheet exists to prevent.
 * ========================================================================== */
.lm-sheet-body #chat,
.lounge-page.lm .lm-sheet-body #chat{
  position:static !important;
  inset:auto !important;
  left:auto !important;right:auto !important;
  top:auto !important;bottom:auto !important;
  width:100% !important;max-width:100% !important;
  height:100% !important;max-height:none !important;
  transform:none !important;
  display:flex !important;flex-direction:column;
  background:transparent !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;
}
/* its own header is redundant inside a sheet that already has one */
.lm-sheet-body #chat .chat-head,
.lm-sheet-body #chat #chat-head{display:none !important}
.lm-sheet-body #chat-log{
  flex:1 1 auto;min-height:0;max-height:none !important;
  overflow-y:auto;padding:0 0 8px;
}
.lm-sheet-body #chat form,
.lm-sheet-body #chat .chat-form{
  flex:0 0 auto;display:flex;gap:6px;padding-top:8px;
  border-top:1px solid rgba(255,210,122,.16);
}
.lm-sheet-body #chat-input{flex:1;min-width:0;font-size:15px;padding:10px 12px}
.lm-sheet-body #chat .chat-ttl{top:auto;bottom:6px;right:6px}

/* a sheet with a panel in it should be tall enough to use */
.lounge-page.lm .lm-sheet.on{min-height:230px}

/* =============================================================================
 * WHAT PEOPLE ARE SAYING, BESIDE THEIR CHAIR
 *
 * The hard part is legibility over a painting. The room is a canvas with lamps,
 * smoke and a patterned rug, and text laid straight onto it is unreadable at
 * the wrong moment — while a solid box over it is a sticker stuck on a picture.
 *
 * So: a dark plate, blurred behind, with a hairline in the speaker's own colour
 * and a shadow to lift it off the cloth. Enough to separate the words from
 * whatever is behind them without hiding the room they belong to.
 * ========================================================================== */
.lb-layer{
  position:absolute;inset:0;z-index:78;pointer-events:none;
}
.lb-bubble{
  position:absolute;
  max-width:min(300px, 30vw);
  padding:8px 12px 9px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(8,20,18,.93),rgba(3,10,9,.96));
  border:1px solid rgba(255,255,255,.10);
  border-left:3px solid var(--who, #ffd27a);
  box-shadow:
    0 8px 26px rgba(0,0,0,.7),
    0 0 0 1px rgba(0,0,0,.35),
    0 0 18px color-mix(in srgb, var(--who, #ffd27a) 16%, transparent);
  backdrop-filter:blur(6px) saturate(1.1);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
  animation:lbin .2s cubic-bezier(.2,1.3,.4,1);
  transition:opacity .24s ease, transform .24s ease;
}
.lb-bubble.leaving{opacity:0;transform:translateY(-6px) scale(.97)}
@keyframes lbin{
  from{opacity:0;transform:translateY(8px) scale(.94)}
  to{opacity:1;transform:none}
}
.lb-who{
  display:block;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--who, #ffd27a);
  margin-bottom:2px;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lb-text{
  display:block;
  font-size:13.5px;line-height:1.42;
  color:#fdf6e8;
  /* the outline is what makes it readable over a lamp as well as over cloth */
  text-shadow:
    0 1px 3px rgba(0,0,0,.95),
    0 0 8px rgba(0,0,0,.75);
  word-break:break-word;overflow-wrap:anywhere;
  /* 300 characters is a paragraph; cap the height and let it scroll rather
     than let one person's essay cover three chairs */
  max-height:8.6em;overflow:hidden;
}

/* never on a phone: the room is already scaled to fit and a bubble would cover
   a third of it, which is what the chat sheet is for */
.lounge-page.lm .lb-layer{display:none}

@media (prefers-reduced-motion: reduce){
  .lb-bubble{animation:none;transition:none}
}

/* =============================================================================
 * SIX SMALL THINGS
 * ========================================================================== */

/* --- the emoji picker was stretching to the width of the room -------------
   It is `position:fixed` with no width of its own, so it took whatever the
   containing block offered — which on this page is everything. A picker of
   sixteen faces should be the width of sixteen faces. */
#emoji-panel{
  width:max-content !important;
  max-width:min(260px, 90vw) !important;
  right:auto !important;
  grid-template-columns:repeat(4, 46px) !important;
  justify-content:center;
}
.emoji-choice{width:46px;height:46px}

/* --- the headcount says what it knows, without a hover -------------------
   On a touch screen there is no hover at all, so a tooltip is a fact nobody
   can reach. */
.lounge-headcount{
  flex-direction:column;align-items:center;justify-content:center;
  min-width:auto;height:auto;padding:3px 11px 4px;gap:0;
  line-height:1.1;border-radius:11px;
}
.lounge-headcount b{font-size:14px;color:#ffe4ab;font-weight:700}
.hc-split{
  display:block;font-family:'Inter Tight',system-ui,sans-serif;
  font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,228,171,.62);white-space:nowrap;
}
.lounge-headcount::before{display:none}
@media (max-width:760px){
  .lounge-page.lm .lounge-headcount{padding:2px 8px 3px}
  .lounge-page.lm .lounge-headcount b{font-size:12px}
  .lounge-page.lm .hc-split{font-size:7.5px;letter-spacing:.06em}
}

/* --- the room names, centred ---------------------------------------------
   With the descriptions and the subtitle gone there is nothing to align a
   name against, so it belongs in the middle of its own plate. */
.roomcard{justify-content:center !important;text-align:center}
.roomcard .rc-name{
  flex:0 1 auto !important;min-width:0 !important;width:auto !important;
  text-align:center;
}
.roomcard .rc-foot{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  margin:0 !important;text-align:right;
}
.rc-lock{top:10px;right:12px}
@media (max-width:760px){
  .roomcard{align-items:center !important}
  .roomcard .rc-foot{right:14px}
}

/* --- more mist in the chooser, and a darker room ------------------------- */
.rooms-page{
  background:
    radial-gradient(ellipse at 50% 112%, rgba(70,42,16,.13), transparent 44%),
    radial-gradient(ellipse at 50% -6%, rgba(10,34,40,.16), transparent 48%),
    linear-gradient(180deg,#020c0e,#01070900 0),
    linear-gradient(180deg,#020c0e,#010506 48%,#000203) !important;
}
.rooms-smoke{
  opacity:1;
  mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 94%,transparent);
}
/* a second, heavier veil low down so the room has a floor of it */
.rooms-page > .rooms-grid::before{
  background:
    radial-gradient(ellipse at 50% 100%, rgba(120,140,140,.09), transparent 55%),
    radial-gradient(ellipse at 50% 42%, transparent 26%,
                    rgba(0,0,0,.62) 74%, rgba(0,0,0,.9) 100%);
}

/* --- the round H, beside the round i ------------------------------------ */
.gp-head{display:flex;align-items:center;gap:5px}
.gp-head > span:first-child{flex:1}
#btnHighScores.gp-info{margin-left:0}

/* =============================================================================
 * THE LOUNGE SETTINGS
 *
 * It was a stack of labels and inputs with no grouping — a form rather than a
 * panel. The settings themselves are fine; what was missing was any sense that
 * they belong to a room. Grouped, spaced, and given the same brass-on-dark
 * treatment as everything else the lounge owns.
 * ========================================================================== */
.vs-note{
  font-size:12.5px;line-height:1.55;color:rgba(255,242,214,.6);
  margin:0 0 16px;padding:10px 13px;border-radius:8px;
  background:rgba(255,210,122,.07);
  border-left:2px solid var(--amber-dim);
}
.vs-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;margin-bottom:7px;border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.28));
  border:1px solid rgba(255,255,255,.055);
  transition:border-color .15s, background .15s;
}
.vs-row:hover{
  border-color:rgba(255,210,122,.28);
  background:linear-gradient(180deg,rgba(255,210,122,.07),rgba(0,0,0,.28));
}
.vs-row label{
  flex:0 0 122px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--amber-dim);
}
.vs-row select,
.vs-row input[type="text"],
.vs-row input[type="number"]{
  flex:1;min-width:0;padding:9px 12px;border-radius:7px;font-size:13px;
  background:rgba(0,0,0,.5);color:var(--bone);
  border:1px solid var(--brass-lo);
}
.vs-row select:focus,.vs-row input:focus{
  outline:none;border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(245,185,66,.14);
}
.vs-row input[type="range"]{
  flex:1;min-width:0;accent-color:var(--amber);height:4px;
}
.vs-row input[type="checkbox"]{
  width:19px;height:19px;accent-color:var(--amber);flex:0 0 auto;cursor:pointer;
}
/* a value that changes should be readable while it changes */
.vs-row .vs-val{
  flex:0 0 auto;min-width:52px;text-align:right;
  font-family:'DM Mono',monospace;font-size:12.5px;color:var(--amber);
}
/* a level meter belongs in the panel it describes */
.vs-meter{
  flex:1;height:7px;border-radius:4px;overflow:hidden;
  background:rgba(0,0,0,.55);border:1px solid var(--brass-lo);
}
.vs-meter i{
  display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,#43a848,#f5b72e 72%,#ee4338);
  transition:width .08s linear;
}
/* a heading between groups, so it reads as sections rather than a list */
.vs-group{
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,210,122,.55);
  margin:16px 0 7px;padding-bottom:5px;
  border-bottom:1px solid rgba(201,146,46,.2);
}
.vs-group:first-child{margin-top:0}

/* the founding account, marked so its greyed-out controls make sense */
.sp-tag.top{
  background:linear-gradient(135deg,#f4b525,#ffdb66);color:#2a1a04;
  box-shadow:0 0 12px rgba(245,183,46,.45);
}
.sp-grp label{white-space:nowrap}

/* =============================================================================
 * WHAT A REAL PHONE SHOWED, AGAIN
 *
 * Three faults, all of them things a stubbed viewport cannot see.
 * ========================================================================== */
@media (max-width:760px){

  /* 1. The headcount was rendered TWICE, on top of itself.
        `.lounge-viewers` is the long-form line and `.lounge-headcount` is the
        pill, and both say the same thing. On a desktop the line has room; on a
        phone they landed on each other and neither could be read. One of them
        has to go, and the pill is the one that fits. */
  .lounge-page.lm .lounge-viewers{display:none !important}

  /* 2. The sheet opened empty.
        Its minimum height was set on `.lm-sheet.on`, but the panel inside had
        none of its own — so a short panel gave a tall empty box with a close
        button floating in it. Give the BODY the height, not the shell. */
  .lounge-page.lm .lm-sheet-body{
    min-height:150px;
    display:flex;flex-direction:column;gap:8px;
  }
  .lounge-page.lm .lm-sheet-body:empty::after{
    content:'Nothing here right now.';
    display:block;padding:26px 10px;text-align:center;
    font-size:12.5px;color:rgba(255,242,214,.4);
  }
  /* panels inside a sheet fill the width they are given */
  .lounge-page.lm .lm-sheet-body > *{width:100% !important}
  .lounge-page.lm .lm-sheet-body #theme-panel,
  .lounge-page.lm .lm-sheet-body #shisha-panel,
  .lounge-page.lm .lm-sheet-body #flavour-panel,
  .lounge-page.lm .lm-sheet-body #games-panel,
  .lounge-page.lm .lm-sheet-body #voice-panel{
    display:block !important;visibility:visible !important;
    opacity:1 !important;max-height:none !important;
  }

  /* 3. The exhale bar sat ON the room rather than under it.
        It covered the near seats \u2014 the ones a thumb reaches for \u2014 so the
        room reserves its height instead of being drawn over. */
  .lounge-page.lm{ --lm-exhale: 132px; }
  .lounge-page.lm.smoking #game-container{
    bottom:calc(var(--lm-bar) + var(--lm-tick) + var(--lm-exhale) +
                env(safe-area-inset-bottom, 0px));
  }
  .lounge-page.lm #smoke-bar{
    max-height:var(--lm-exhale);overflow:hidden;
  }
}

/* =============================================================================
 * THE SHEET, AND THE SPACE ABOVE THE ROOM
 * ========================================================================== */
@media (max-width:760px){

  /* A closed sheet is gone, not parked. Translated out of view it still showed
     its top edge, which reads as a collapsed panel with a close button that
     appears to expand it rather than dismiss it. */
  .lounge-page.lm .lm-sheet.gone{
    display:none !important;
  }

  /* The tab bar is never covered. An earlier rule put the sheet at 97 and the
     bar at 96, so the sheet could sit over the only way out of it. Stated here
     with matching specificity so the later rule wins rather than hoping. */
  .lounge-page.lm .lm-tabs{z-index:99 !important}
  .lounge-page.lm .lm-ticker{z-index:98 !important}
  .lounge-page.lm .lm-sheet{z-index:94 !important}

  /* --- the exhale controls move to the empty space ABOVE the room ---------
     There is a band of black between the header and the table on a tall phone,
     and the controls were competing with the seats at the bottom for the one
     part of the screen the room actually uses. */
  .lounge-page.lm #smoke-bar{
    top:calc(var(--lounge-bar-h) + 6px);
    bottom:auto !important;
    left:8px;right:8px;
    max-height:none;
    z-index:94;
  }
  /* so the room only has to clear the bar and ticker again */
  .lounge-page.lm.smoking #game-container{
    top:calc(var(--lounge-bar-h) + var(--lm-exhale) + 10px);
    bottom:calc(var(--lm-bar) + var(--lm-tick) + env(safe-area-inset-bottom, 0px));
  }
  .lounge-page.lm #smoke-bar{
    background:linear-gradient(180deg,rgba(10,26,22,.96),rgba(4,14,12,.92));
    border:1px solid rgba(255,210,122,.3);
    border-radius:13px;
    box-shadow:0 10px 26px rgba(0,0,0,.6);
  }
}

/* =============================================================================
 * PORTRAIT ONLY, ON A PHONE
 *
 * The room is a tall scene: six chairs around a table with their names above
 * them. Turned sideways a phone gives it a band about 380px high, and the seats
 * come out smaller than the labels naming them. The browser is asked to hold
 * portrait; where it refuses — and most mobile browsers do outside fullscreen —
 * this says so rather than rendering something unusable.
 * ========================================================================== */
.lm-rotate{display:none}
@media (max-width:900px) and (orientation:landscape) and (hover:none){
  .lounge-page.lm .lm-rotate{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    position:fixed;inset:0;z-index:9500;gap:10px;padding:24px;text-align:center;
    background:radial-gradient(ellipse at 50% 40%,#0d2a2c,#04121400 70%),
               linear-gradient(180deg,#061a1c,#020a0b);
    color:#ffe9c0;
  }
  /* nothing else is worth drawing behind it */
  .lounge-page.lm #game-container,
  .lounge-page.lm .lm-tabs,
  .lounge-page.lm .lm-ticker,
  .lounge-page.lm .lm-sheet,
  .lounge-page.lm #smoke-bar,
  .lounge-page.lm .lounge-bar{visibility:hidden}
}
.lm-rotate-icon{
  font-size:46px;color:#ffd27a;line-height:1;
  animation:lmspin 2.6s ease-in-out infinite;
}
@keyframes lmspin{
  0%,100%{transform:rotate(0)}
  50%{transform:rotate(-90deg)}
}
.lm-rotate-title{
  font-family:'Bevan',Georgia,serif;font-size:19px;margin:4px 0 0;color:#ffd27a;
}
.lm-rotate-note{
  font-size:13px;line-height:1.5;margin:0;max-width:280px;
  color:rgba(255,233,192,.6);
}
@media (prefers-reduced-motion: reduce){ .lm-rotate-icon{animation:none} }

/* =============================================================================
 * THE LAST OF THE PHONE LAYOUT
 * ========================================================================== */
@media (max-width:760px){

  /* 1. The exhale controls OVERLAY the empty band; they do not push the room
        down. Reserving height for them shrank the one thing on screen worth
        looking at, and the band above the table is already empty. */
  .lounge-page.lm.smoking #game-container{
    top:var(--lounge-bar-h) !important;
    bottom:calc(var(--lm-bar) + var(--lm-tick) +
                env(safe-area-inset-bottom, 0px)) !important;
  }
  .lounge-page.lm #smoke-bar{
    top:calc(var(--lounge-bar-h) + 6px);
    bottom:auto !important;
    z-index:93;
  }

  /* 2. The emoji button is placed at a seat, and on a phone that lands it in
        the middle of the screen with nothing around it. The emoji bar belongs
        to a pointer that can hover a chair; a thumb has the chat. */
  .lounge-page.lm #emoji-btn,
  .lounge-page.lm #emoji-panel{display:none !important}

  /* 3. The ticker has nothing to advertise while a sheet is open. */
  .lounge-page.lm.sheet-open .lm-ticker{
    opacity:0;pointer-events:none;visibility:hidden;
  }

  /* 4. The chat sheet IS the chat, so the bar underneath is noise. Everything
        else keeps it, because you switch between those. */
  .lounge-page.lm.sheet-chat .lm-tabs{
    transform:translateY(100%);pointer-events:none;
  }
  .lounge-page.lm.sheet-chat .lm-sheet{
    bottom:env(safe-area-inset-bottom, 0px);
    max-height:min(74dvh, 620px);
  }
  .lounge-page.lm .lm-tabs{transition:transform .2s ease}

  /* a panel in a sheet is visible, whatever its desktop life decided */
  .lounge-page.lm .lm-sheet-body *[style*="display: none"],
  .lounge-page.lm .lm-sheet-body *[style*="display:none"]{display:revert}
  .lounge-page.lm .lm-sheet-body #stand-btn,
  .lounge-page.lm .lm-sheet-body .dock-btn{
    display:inline-flex !important;align-items:center;gap:6px;
    padding:10px 16px;font-size:14px;
  }
  .lounge-page.lm .lm-sheet-body #controls-dock{
    display:flex !important;gap:8px;justify-content:center;flex-wrap:wrap;
    padding-top:8px;
  }
}

/* =============================================================================
 * THE KENO RESULT, IN A SHISHA LOUNGE
 *
 * A panel of twenty numbers sitting open in the middle of a lounge is somebody
 * else's game taking up the room — and unstyled, as it was, it read as a wall
 * of digits with no shape at all.
 *
 * One line, in and out. It states the result and goes. The numbers are a tap
 * away in the Keno panel, which is what that panel is for.
 * ========================================================================== */
.keno-flash{
  position:absolute;left:50%;transform:translate(-50%,-14px);
  top:calc(var(--lounge-bar-h, 56px) + 10px);
  z-index:88;pointer-events:none;
  display:flex;align-items:center;gap:9px;
  padding:7px 15px;border-radius:16px;
  background:linear-gradient(180deg,rgba(8,20,26,.94),rgba(3,10,13,.96));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 26px rgba(0,0,0,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,1.2,.4,1), visibility .3s;
}
.keno-flash.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.kf-tag{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,242,214,.5);white-space:nowrap;
}
.kf-res{
  font-family:'DM Mono',monospace;font-size:12px;font-weight:700;
  padding:2px 9px;border-radius:9px;letter-spacing:.06em;
}
.kf-heads{background:#ee4338;color:#fff}
.kf-tails{background:#00a9dc;color:#fff}
.kf-evens{background:#f5b72e;color:#241503}

@media (max-width:760px){
  .keno-flash{padding:6px 12px;gap:7px}
  .kf-tag{font-size:8px}
  .kf-res{font-size:11px}
}
@media (prefers-reduced-motion: reduce){
  .keno-flash{transition:opacity .2s ease}
}

/* the full panel, when it IS opened, gets its balls back */
.lounge-kenodrop .jkball{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  font-family:'Inter Tight',system-ui,sans-serif;
  font-size:11.5px;font-weight:900;color:#fff;
  box-shadow:inset 0 -2px 5px rgba(0,0,0,.2), 0 2px 5px rgba(0,0,0,.35);
}

/* the one piece of advice that actually helps on a phone */
.vs-note.vs-phone{
  background:rgba(127,216,255,.08);
  border-left-color:#7fd8ff;
  color:rgba(232,244,255,.72);
}
.vs-note.vs-phone b{color:#9fe4ff}

/* No Keno on a phone.
   A phone cannot reach the casino, so a Keno result in the lounge there is an
   advert for a room the player is not allowed into — and it costs them screen
   space they have very little of. Belt and braces alongside the JS guard: a
   rule cannot fire a timer, but it can stop one being seen. */
@media (max-width:760px){
  .lounge-page.lm .keno-flash,
  .lounge-page.lm .lounge-kenodrop,
  .lounge-page.lm #loungeKenoBtn{display:none !important}
}

/* =============================================================================
 * THE FORM GUIDE
 *
 * A very small "i" beside anybody who has a run going. It has to be legible
 * enough to hit and quiet enough that a table of six does not turn into a row
 * of badges — so it carries the direction as colour and the number stays behind
 * the tap.
 * ========================================================================== */
.mate-i{
  width:15px;height:15px;border-radius:50%;flex:0 0 auto;
  font-family:Georgia,serif;font-style:italic;font-size:9.5px;line-height:1;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,242,214,.62);
  transition:.13s;margin-left:2px;
}
.mate-i:hover{background:rgba(255,210,122,.28);border-color:var(--amber);color:#fff}
.mate-i.up{
  border-color:rgba(110,231,160,.5);color:#8ef0c4;
  background:rgba(110,231,160,.12);
}
.mate-i.down{
  border-color:rgba(255,140,120,.45);color:#ffb3a3;
  background:rgba(255,140,120,.1);
}

.runcard{text-align:center}
.run-pct{
  font-family:'DM Mono',monospace;font-size:44px;font-weight:600;line-height:1;
  color:var(--bone);margin:6px 0 2px;
}
.run-pct.up{color:#6ee7a0;text-shadow:0 0 22px rgba(110,231,160,.35)}
.run-pct.down{color:#ff8a76;text-shadow:0 0 22px rgba(255,120,100,.28)}
.run-sub{
  font-size:12px;color:var(--bone-dim);margin:0 0 16px;font-style:italic;
}
.proftable td.num.up{color:#6ee7a0}
.proftable td.num.down{color:#ff8a76}

/* the phone's space bar */
.lm-ptt{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--lm-bar, 62px) + var(--lm-tick, 26px) + 14px +
              env(safe-area-inset-bottom, 0px));
  z-index:86;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  width:104px;padding:11px 0 9px;border-radius:15px;
  background:linear-gradient(180deg,rgba(28,107,71,.5),rgba(6,26,18,.85));
  border:1px solid rgba(126,231,160,.4);
  color:#cdf6df;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  transition:transform .1s, background .12s, box-shadow .12s;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.lm-ptt span{font-size:21px;line-height:1}
.lm-ptt small{
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;
}
.lm-ptt.on{
  background:linear-gradient(180deg,#2fae74,#12633f);
  border-color:#8ef0c4;color:#fff;
  transform:translateX(-50%) scale(.96);
  box-shadow:0 0 26px rgba(110,231,160,.5);
}
@media (min-width:761px){ .lm-ptt{display:none} }

/* =============================================================================
 * NAMES THAT ARE LONGER THAN MINE
 *
 * Every one of these worked with the names I typed while building them. A
 * player picking the longest nickname the server allows pushes a table row
 * sideways, and on a phone that drags the whole layout with it.
 *
 * Truncate where the name is one item in a row; wrap where it has a line of its
 * own. Nowhere is it allowed to set the width of its container.
 * ========================================================================== */
.matename{
  display:inline-block;max-width:12ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:bottom;
}
.mate{max-width:100%;min-width:0}
.cmsg .nick{
  display:inline-block;max-width:14ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:bottom;
}
.seatname,.seat .who{
  display:block;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rc-name{
  max-width:100%;
  overflow-wrap:anywhere;
}
.kt-range,.kticket{overflow-wrap:anywhere}

/* money never breaks across two lines: half a figure is worse than a scrollbar */
.bal,.balance,.bal-amount,.jp-val,.seatcredits,.seatwager,.stake,
.run-pct,.proftable td.num{white-space:nowrap}

/* and the row a name sits in can always shrink */
.mate,.seat,.tablemates,.chatline{min-width:0}

/* =============================================================================
 * THE GUEST DOOR
 *
 * It glows because it is the shortest way in, and most people arriving have not
 * come to fill in a form. It is a different colour from the two above it so it
 * reads as a different KIND of thing rather than a third option of the same
 * sort — because it is: no password, no account, no casino.
 * ========================================================================== */
.authopt.guestopt{
  position:relative;overflow:hidden;
  border-color:rgba(126,231,160,.55);
  background:linear-gradient(160deg,rgba(28,107,71,.34),rgba(6,26,18,.72));
  box-shadow:
    0 0 0 1px rgba(126,231,160,.18),
    0 0 26px rgba(60,200,130,.24),
    0 10px 30px rgba(0,0,0,.5);
  animation:guestglow 3.4s ease-in-out infinite;
}
@keyframes guestglow{
  0%,100%{box-shadow:0 0 0 1px rgba(126,231,160,.18),
                     0 0 24px rgba(60,200,130,.22),
                     0 10px 30px rgba(0,0,0,.5)}
  50%    {box-shadow:0 0 0 1px rgba(126,231,160,.34),
                     0 0 40px rgba(60,200,130,.42),
                     0 10px 30px rgba(0,0,0,.5)}
}
.authopt.guestopt:hover{
  border-color:#8ef0c4;
  background:linear-gradient(160deg,rgba(40,140,94,.46),rgba(8,34,24,.78));
  transform:translateY(-2px);
}
.authopt.guestopt .ao-title{
  color:#9df3c8;
  text-shadow:0 0 20px rgba(110,231,160,.45);
}
.authopt.guestopt .ao-body{color:rgba(205,246,223,.72)}
/* a wisp of smoke crossing it, since that is what it offers */
.authopt.guestopt::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 12% 120%,
    rgba(180,255,215,.14), transparent 58%);
}
@media (prefers-reduced-motion: reduce){
  .authopt.guestopt{animation:none}
}

/* a guest never sees a door they cannot open */
body.is-guest #modeSwitch,
body.is-guest .tabs,
body.is-guest #btnShop,
body.is-guest #btnKeno,
body.is-guest #btnAdmin{display:none !important}