:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#140d0b;
  --glass:linear-gradient(180deg,rgba(52,38,31,.74),rgba(20,14,12,.82));
  --glass-solid:rgba(26,18,15,.94);
  --line:rgba(255,232,200,.14);
  --line-strong:rgba(255,232,200,.26);
  --ink:#f3e8d6;
  --ink-dim:#bba58a;
  --brass:#d9a957;
  --brass-ink:#22160e;
  --cream:#efe5d3;
  --cream-ink:#2a1d15;
  --shadow:0 10px 30px rgba(0,0,0,.38);
  --h:48px;
  color-scheme:dark;
}
/* the club is always lit for night, so the chrome stays smoked glass in both schemes */
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --glass:linear-gradient(180deg,rgba(58,43,35,.72),rgba(24,17,14,.8)); --ink:#f5ebdb; --ink-dim:#c4ae92; color-scheme:dark; } }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --glass:linear-gradient(180deg,rgba(52,38,31,.74),rgba(20,14,12,.82)); --ink:#f3e8d6; --ink-dim:#bba58a; color-scheme:dark; } }
:root[data-theme="dark"]{ --glass:linear-gradient(180deg,rgba(52,38,31,.74),rgba(20,14,12,.82)); --ink:#f3e8d6; --ink-dim:#bba58a; }
*{box-sizing:inherit}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Andika","Gowun Batang","Apple SD Gothic Neo",serif;overflow:hidden;-webkit-font-smoothing:antialiased;word-break:keep-all}
button{font:inherit;color:inherit}
#stage{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#stage:active{cursor:grabbing}
.glass{background:var(--glass);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);color:var(--ink)}
.chrome{position:fixed;z-index:5}
.nw{white-space:nowrap}
button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- top bar ---- */
#topbar{top:calc(env(safe-area-inset-top,0px) + 14px);left:14px;right:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none}
#topbar>*{pointer-events:auto}
#topL{display:flex;gap:10px;align-items:center;min-width:0;flex:0 1 auto}
#topR{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:none}
#topR #setpill{position:absolute;right:0;top:calc(var(--h) + 10px)}
.circ{appearance:none;width:var(--h);height:var(--h);border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0}
.circ svg{width:22px;height:22px}
#club{appearance:none;height:var(--h);border-radius:999px;padding:0 16px 0 20px;display:flex;align-items:center;gap:10px;cursor:pointer;white-space:nowrap;min-width:0;flex:0 1 auto}
#club .name{font-family:"Andika",Georgia,serif;font-style:italic;font-weight:700;font-size:19px;letter-spacing:.02em;color:var(--brass);overflow:hidden;text-overflow:ellipsis;min-width:0}
#club .srvno,#club svg{flex:none}
#club .srvno{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
#club svg{width:14px;height:14px;color:var(--ink-dim);flex:none}
.circ:hover,#club:hover,#meta button:hover{border-color:var(--line-strong)}
#meta{height:var(--h);border-radius:999px;padding:0 6px 0 16px;display:flex;align-items:center;gap:2px}
#count{display:flex;align-items:center;gap:7px;font-size:16px;font-variant-numeric:tabular-nums;padding-right:6px;white-space:nowrap}
#count svg{width:20px;height:20px}
.iconbtn{appearance:none;border:0;background:transparent;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0}
.iconbtn:hover{background:rgba(255,232,200,.08)}
.iconbtn svg{width:21px;height:21px}
#drinkBadge{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;margin-left:4px;background:radial-gradient(circle at 50% 35%,rgba(255,232,200,.16),rgba(255,232,200,.04));border:1px solid var(--line)}
#drinkBadge svg{width:22px;height:22px}
#drinkBadge.empty{opacity:.45}
#setpill{height:40px;border-radius:999px;padding:0 18px;display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}
#setpill .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-dim)}
#setpill.live .dot{background:#ff5a4a;box-shadow:0 0 8px #ff5a4a}
#setpill b{font-weight:400;color:var(--brass);font-variant-numeric:tabular-nums}

/* ---- toast ---- */
#toast{top:calc(env(safe-area-inset-top,0px) + 76px);left:50%;transform:translate(-50%,-6px);border-radius:18px;padding:10px 18px;font-size:14px;line-height:1.45;text-align:center;text-wrap:balance;width:max-content;max-width:min(420px,calc(100vw - 32px));opacity:0;transition:opacity .35s,transform .35s;pointer-events:none;z-index:7}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- bottom actions ---- */
#actions{bottom:calc(env(safe-area-inset-bottom,0px) + 16px);left:50%;transform:translateX(-50%);width:min(540px,calc(100vw - 24px));border-radius:36px;padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.act{appearance:none;border:0;background:transparent;font-size:14px;padding:10px 4px 9px;border-radius:28px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;min-width:0}
.act:hover{background:rgba(255,232,200,.07)}
.act:disabled{opacity:.38;cursor:default}
.act:disabled:hover{background:transparent}
.act svg{width:25px;height:25px}
#ctx{position:fixed;z-index:6;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 112px);display:flex;gap:8px;flex-wrap:nowrap;max-width:calc(100vw - 24px)}
.ctxbtn{appearance:none;border:1px solid transparent;font-size:15px;height:44px;padding:0 20px;border-radius:999px;background:var(--brass);color:var(--brass-ink);cursor:pointer;box-shadow:var(--shadow);white-space:nowrap;flex:none}
.ctxbtn:hover{filter:brightness(1.08)}
.ctxbtn.ghost{background:var(--glass);color:var(--ink);border-color:var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ctxbtn[hidden]{display:none}
#hint{display:none!important;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);left:14px;display:flex;flex-direction:column;gap:6px;transition:opacity .6s;pointer-events:none}
#hint span{border-radius:999px;padding:7px 14px;font-size:12.5px;color:var(--ink-dim);white-space:nowrap;align-self:flex-start}
#hint b{font-weight:400;color:var(--ink)}
#hint.off{opacity:0}

/* ---- popovers & sheets ---- */
#mixer{top:calc(env(safe-area-inset-top,0px) + 72px);right:14px;border-radius:22px;padding:16px 18px 14px;width:min(300px,calc(100vw - 28px));z-index:9}
#mixer[hidden]{display:none}
.mxrow{display:grid;grid-template-columns:1fr 38px;gap:2px 10px;align-items:center;margin-bottom:14px}
.mxrow label{grid-column:1/-1;font-size:14px}
.mxrow small{grid-column:1/-1;font-size:11.5px;color:var(--ink-dim);margin:-1px 0 4px}
.mxrow input{width:100%;accent-color:var(--brass);margin:0}
.mxrow output{font-size:12px;color:var(--ink-dim);text-align:right;font-variant-numeric:tabular-nums}
.mxmute{appearance:none;width:100%;height:40px;border:1px solid var(--line);background:transparent;font-size:13.5px;border-radius:999px;cursor:pointer;white-space:nowrap}
.mxmute:hover{border-color:var(--line-strong)}
#fade{position:fixed;inset:0;z-index:12;background:#0b0705;opacity:0;pointer-events:none;transition:opacity .45s}
#fade.on{opacity:1}
.scrim{position:fixed;inset:0;z-index:15;background:rgba(8,5,4,.42)}
.scrim[hidden],#servers[hidden],#menu[hidden]{display:none}
#servers{z-index:25;display:grid;place-items:start start;padding:calc(env(safe-area-inset-top,0px) + 72px) 14px 14px}
#menu{display:grid;place-items:end center;padding:16px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
.sheet{width:min(440px,100%);border-radius:26px;padding:22px 18px 14px;background:var(--glass-solid);border:1px solid var(--line);box-shadow:var(--shadow)}
#menu .sheet{width:min(520px,100%)}
.sheet h2{font-family:"Andika",Georgia,serif;font-style:italic;font-weight:700;font-size:24px;color:var(--brass);margin:0 4px 4px}
.sheet p{margin:0 4px 16px;font-size:13.5px;line-height:1.5;color:var(--ink-dim)}
.srv{width:100%;appearance:none;border:1px solid var(--line);background:transparent;text-align:left;border-radius:18px;padding:12px 14px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;cursor:pointer;margin-bottom:8px}
.srv:hover{background:rgba(255,232,200,.05)}
.srv[aria-current="true"]{border-color:var(--brass);background:rgba(217,169,87,.08)}
.srv .sw{width:40px;height:40px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.srv .nm{font-family:"Andika",Georgia,serif;font-style:italic;font-weight:700;font-size:17px;color:var(--brass);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv .md{font-size:12.5px;line-height:1.45;color:var(--ink-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.srv .ct{font-size:14px;text-align:right;white-space:nowrap}
.srv .ct small{display:block;font-size:11px;color:var(--brass);margin-top:3px}
.drinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.drink{appearance:none;border:1px solid var(--line);background:transparent;border-radius:18px;padding:16px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;min-width:0}
.drink:hover{background:rgba(255,232,200,.05);border-color:var(--line-strong)}
.drink svg{width:42px;height:42px;margin-bottom:4px}
.drink span{font-size:14px;white-space:nowrap}
.drink small{font-size:11.5px;color:var(--ink-dim);white-space:nowrap}
.sheet .close{margin-top:10px;width:100%;height:42px;appearance:none;border:0;background:transparent;color:var(--ink-dim);font-size:14px;cursor:pointer}

/* ---- the door ---- */
#gate{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,rgba(90,30,30,.5),rgba(14,9,8,.96) 70%);padding:24px;transition:opacity .9s}
#gate.gone{opacity:0;pointer-events:none}
.door{width:min(380px,100%);text-align:center;color:#f3e8d6}
.door .brand{margin:0 0 14px}
.door .brand img{width:min(320px,80vw);height:auto;display:block;margin:0 auto}
#splash{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#0b1328;transition:opacity .9s ease .2s}
#splash img{width:min(420px,72vw);height:auto}
#splash.out{opacity:0;pointer-events:none}
.door .sign{font-family:"Andika",Georgia,serif;font-style:italic;font-weight:700;font-size:clamp(22px,6vw,30px);line-height:1;color:#ffd9de;text-shadow:0 0 6px #ff5f6d,0 0 18px #ff2e4a,0 0 42px #c4122e;margin:0 0 20px;white-space:nowrap;opacity:.9}
.door p{font-size:16px;line-height:1.7;color:#d6c0a0;margin:0 0 24px}
.card{border-radius:22px;padding:6px 6px 6px 18px;text-align:left;margin-bottom:22px}
.row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px}
.row+.row{border-top:1px solid var(--line)}
.row .k{font-size:13px;color:var(--ink-dim);white-space:nowrap}
.row strong{font-weight:400;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row button{appearance:none;border:1px solid var(--line-strong);background:transparent;color:var(--brass);border-radius:999px;height:34px;padding:0 14px;font-size:13px;cursor:pointer;white-space:nowrap}
#enter{appearance:none;border:0;background:var(--brass);color:var(--brass-ink);font-size:17px;height:54px;padding:0 36px;border-radius:999px;cursor:pointer;box-shadow:0 0 30px rgba(217,169,87,.32);white-space:nowrap}
#enter:hover{filter:brightness(1.08)}

@media (max-width:640px){
  :root{--h:44px}
  #club{padding:0 14px 0 16px}
  #club .name{font-size:17px}
  #meta{padding-left:12px}
  #count{font-size:15px}
  #toast{top:calc(env(safe-area-inset-top,0px) + 120px)}
  .act{font-size:12.5px;gap:5px}
  #ctx{bottom:calc(env(safe-area-inset-bottom,0px) + 104px)}
  .ctxbtn{height:42px;padding:0 16px;font-size:14px}
}
@media (max-width:900px){ #hint{display:none!important;display:none} }
@media (max-width:420px){ #muteBtn{display:none} .iconbtn{width:36px;height:36px} #club{padding:0 12px 0 14px;gap:8px} #club .name{font-size:16px} #meta{padding-left:10px} }
@media (max-width:340px){ #drinkBadge{display:none} }
@media (hover:none){ .k-only{display:none} }
@media (prefers-reduced-motion: reduce){ #toast,#gate,#fade,#hint{display:none!important;transition:none} }
.mxtoggle{grid-template-columns:1fr auto}
.mxtoggle label,.mxtoggle small{grid-column:1/2}
.mxtoggle .tgl{grid-column:2/3;grid-row:1/3;appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink-dim);border-radius:999px;height:32px;padding:0 14px;font-size:13px;cursor:pointer;white-space:nowrap}
.mxtoggle .tgl[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:var(--brass-ink)}
#treat{z-index:16;display:grid;place-items:end center;padding:16px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
#treat[hidden]{display:none}
.tlist{display:flex;flex-direction:column;gap:6px;max-height:min(34vh,260px);overflow:auto;margin:0 0 12px}
.who{appearance:none;width:100%;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:14px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;font-size:14px;text-align:left}
.who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.who small{color:var(--ink-dim);font-size:12px;white-space:nowrap;flex:none}
.who[aria-pressed="true"],.gift[aria-pressed="true"]{border-color:var(--brass);background:rgba(217,169,87,.12)}
.tempty{font-size:13px;color:var(--ink-dim);padding:6px 4px}
.gifts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.gift{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:14px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-size:13px;white-space:nowrap}
.gift .gi svg{width:28px;height:28px}
.tsend{appearance:none;width:100%;height:46px;border:0;border-radius:999px;background:var(--brass);color:var(--brass-ink);font-size:15px;cursor:pointer;white-space:nowrap}
.tsend:disabled{opacity:.4;cursor:default}

#coach{position:fixed;inset:0;z-index:22;display:grid;place-items:center;padding:24px;background:rgba(8,5,4,.45);transition:opacity .45s}
#coach[hidden]{display:none}
#coach.out{opacity:0;pointer-events:none}
.coachcard{width:min(360px,100%);border-radius:26px;padding:22px 20px 18px}
.coachcard h2{font-family:"Andika",Georgia,serif;font-style:italic;font-weight:700;font-size:24px;color:var(--brass);margin:0 4px 14px}
.coachcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.coachcard li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;font-size:15px;line-height:1.45}
.coachcard li svg{width:26px;height:26px;color:var(--brass)}
.coachcard b{font-weight:700;color:var(--ink)}
.tapgo{margin:18px 0 0;text-align:center;font-size:13px;color:var(--ink-dim);animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}
@media (hover:hover){ .t-only{display:none} }
@media (hover:none){ .k-only{display:none} }
.lb{position:fixed;left:0;right:0;height:0;background:#000;z-index:18;transition:height .8s cubic-bezier(.6,0,.2,1);overflow:hidden;pointer-events:none}
#lbTop{top:0}#lbBot{bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
body.cine .lb{height:12vh}
#cineCap{margin:0;padding:0 20px;color:#f3e8d6;font-size:clamp(14px,2.2vw,17px);text-align:center;text-wrap:balance;opacity:0;transition:opacity .5s .4s}
#cineHint{color:#bba58a;font-size:12px;opacity:0;transition:opacity .5s}
body.cine #cineCap{opacity:1}
body.cine.cine-done #cineHint{opacity:1}
body.cine #topbar,body.cine #actions,body.cine #ctx,body.cine #toast{opacity:0;pointer-events:none;transition:opacity .4s}
#topbar,#actions,#ctx{transition:opacity .4s}
@media (prefers-reduced-motion: reduce){ .lb{transition:none} .tapgo{animation:none} }

body.photo #topbar,body.photo #actions,body.photo #ctx,body.photo #toast,body.photo #hint{opacity:0;pointer-events:none}
#photoUI{position:fixed;inset:0;z-index:17;pointer-events:none}
#photoUI[hidden]{display:none}
#photoUI button{pointer-events:auto}
.pf-corners i{position:absolute;width:34px;height:34px;border-color:rgba(255,240,220,.75);border-style:solid;border-width:0}
.pf-corners i:nth-child(1){top:calc(env(safe-area-inset-top,0px) + 80px);left:18px;border-top-width:2px;border-left-width:2px;border-top-left-radius:8px}
.pf-corners i:nth-child(2){top:calc(env(safe-area-inset-top,0px) + 80px);right:18px;border-top-width:2px;border-right-width:2px;border-top-right-radius:8px}
.pf-corners i:nth-child(3){bottom:calc(env(safe-area-inset-bottom,0px) + 128px);left:18px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:8px}
.pf-corners i:nth-child(4){bottom:calc(env(safe-area-inset-bottom,0px) + 128px);right:18px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:8px}
.pf-top{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);left:14px;right:14px;display:flex;align-items:center;gap:10px}
.pf-filters{pointer-events:auto;margin-left:auto;margin-right:auto;transform:translateX(-24px);border-radius:999px;padding:4px;display:flex;gap:2px}
.pf-filters button{appearance:none;border:0;background:transparent;color:var(--ink-dim);font-size:13px;height:36px;padding:0 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.pf-filters button[aria-checked="true"]{background:var(--brass);color:var(--brass-ink)}
.pf-bottom{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);display:flex;justify-content:center;align-items:center;gap:44px}
#pfShutter{appearance:none;width:76px;height:76px;border-radius:50%;border:4px solid rgba(255,244,228,.95);background:transparent;padding:5px;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.45)}
#pfShutter span{display:block;width:100%;height:100%;border-radius:50%;background:#fff4e4;transition:transform .12s}
#pfShutter:active span{transform:scale(.88)}
.pf-side{width:52px;height:52px;overflow:hidden}
#pfLast{background-size:cover;background-position:center}
#pfLast:disabled{opacity:.35}
#pfFlash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none}
#pfFlash.on{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
#photoResult{z-index:24;display:grid;place-items:center;padding:16px}
#photoResult[hidden]{display:none}
.prsheet{width:min(460px,100%);padding:14px;text-align:center}
#prImg{display:block;width:100%;max-height:62vh;object-fit:contain;border-radius:14px;background:#000}
.prhint{margin:10px 0 12px!important;font-size:12.5px!important}
.prbtns{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.prghost{appearance:none;height:46px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;font-size:15px;cursor:pointer;white-space:nowrap}
#stage.hov{cursor:pointer}
@media (prefers-reduced-motion: reduce){ #pfFlash.on{animation:none} }

#pfMode{overflow:visible;position:relative}
.pf-cap{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);font-size:12px;color:#f6ead6;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.7)}
#pfGrain{position:fixed;inset:0;pointer-events:none;opacity:0;mix-blend-mode:overlay;background-size:180px 180px;box-shadow:inset 0 0 140px 40px rgba(20,10,0,.55);transition:opacity .25s}
body.photo.film #pfGrain{opacity:.3}