:root{
  --ink:#0E1A1B;
  --slate:#15252A;
  --line:#23383C;
  --amber:#F2A93B;
  --foam:#FFEBC2;
  --muted:#6F8A88;
  --glow:0;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

body{
  background:#080F10;
  font-family:'Inter Tight',system-ui,sans-serif;
  color:var(--foam);
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:24px 16px 40px;
}

/* ---------- phone frame ---------- */
.phone{
  position:relative;
  width:100%;
  max-width:392px;
  height:min(780px,86vh);
  height:min(780px,86dvh);
  min-height:600px;
  border-radius:42px;
  border:1px solid var(--line);
  background:var(--ink);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}

/* the room: ambient light that spills from the pint */
.room{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(58% 42% at 50% 40%, rgba(242,169,59,.20), transparent 70%);
  opacity:var(--glow);
  transition:opacity 1.1s ease;
  z-index:0;
}

.screen{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-height:0}

/* ---------- header ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 24px 0;
}
.wordmark{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:19px;letter-spacing:-.035em;
  color:var(--foam);
}
.wordmark b{color:var(--amber);font-weight:800}
.whoami{
  font-size:12.5px;font-weight:500;color:var(--muted);
  background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;cursor:pointer;
  font-family:inherit;transition:border-color .2s,color .2s;
}
.whoami:hover{border-color:var(--amber);color:var(--foam)}

/* ---------- stage ---------- */
.stage{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;
  padding:12px 24px;min-height:0;
}

.pintwrap{position:relative;width:216px;height:216px;flex:none}

/* cooldown ring sits outside the glass */
.ring{
  position:absolute;inset:-11px;border-radius:50%;
  background:conic-gradient(var(--amber) calc(var(--ring)*1%), rgba(35,56,60,.85) 0);
  opacity:0;transition:opacity .35s ease;
}
.ring::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--ink)}
.is-cooldown .ring{opacity:1}

.pint{
  position:absolute;inset:0;
  border-radius:50%;
  border:1.5px solid var(--line);
  background:rgba(255,255,255,.02);
  overflow:hidden;cursor:pointer;
  font-family:inherit;color:inherit;
  transition:border-color .4s ease, box-shadow .6s ease, transform .18s cubic-bezier(.34,1.4,.64,1);
}
.pint:focus-visible{outline:2px solid var(--foam);outline-offset:6px}
.pint:active{transform:scale(.965)}
.is-mine .pint{border-color:rgba(242,169,59,.5);box-shadow:0 0 70px rgba(242,169,59,.28)}
.is-cooldown .pint{cursor:not-allowed;border-color:transparent}

/* the beer */
.fill{
  position:absolute;left:0;right:0;bottom:0;
  height:0;
  background:linear-gradient(180deg,#F9C05B,#DE8C1E);
  transition:height 1.5s cubic-bezier(.3,.9,.3,1);
}
.fill::before,.fill::after{
  content:'';position:absolute;left:-30%;right:-30%;top:-13px;height:26px;
  background:var(--foam);border-radius:50%;
}
.fill::before{animation:slosh 5.5s ease-in-out infinite}
.fill::after{opacity:.55;animation:slosh 4.1s ease-in-out infinite reverse}
@keyframes slosh{
  0%,100%{transform:translateX(-9px) rotate(-1.2deg)}
  50%{transform:translateX(9px) rotate(1.2deg)}
}

.bubble{
  position:absolute;bottom:0;width:5px;height:5px;border-radius:50%;
  background:rgba(255,235,194,.6);opacity:0;
}
.is-mine .bubble{animation:rise 4.2s ease-in infinite}
.bubble:nth-child(2){left:32%;animation-delay:.3s}
.bubble:nth-child(3){left:52%;width:7px;height:7px;animation-delay:1.6s}
.bubble:nth-child(4){left:68%;animation-delay:2.7s}
@keyframes rise{
  0%{transform:translateY(0) scale(.6);opacity:0}
  18%{opacity:.75}
  100%{transform:translateY(-150px) scale(1);opacity:0}
}

/* the label sitting on the glass */
.face{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;
  padding:0 30px;text-align:center;
}
.glyph{font-size:26px;line-height:1;transition:transform .5s ease}
.is-mine .glyph{transform:translateY(-2px) scale(1.08)}
.label{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;font-size:19px;line-height:1.15;letter-spacing:-.03em;
}
.timer{
  font-family:'Space Mono',monospace;font-weight:700;
  font-size:15px;letter-spacing:.06em;
}
.is-mine .label,.is-mine .timer{color:#3B2405}
.is-cooldown .label{color:var(--muted)}
.is-cooldown .timer{color:var(--muted)}

/* ---------- status + undo ---------- */
.status{
  font-size:14.5px;line-height:1.5;color:var(--muted);
  text-align:center;max-width:270px;min-height:44px;
}
.status b{color:var(--foam);font-weight:600}
.undo{
  background:none;border:none;font-family:inherit;font-size:13.5px;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;padding:4px;display:none;
}
.is-mine .undo{display:block}
.undo:hover{color:var(--foam)}

/* ---------- roster ---------- */
.roster{
  border-top:1px solid var(--line);
  padding:18px 24px 30px;flex:none;
}
.roster-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;
}
.roster-head span{font-family:'Space Mono',monospace;letter-spacing:.06em}
.row{
  display:flex;align-items:center;gap:11px;
  padding:9px 0;border-bottom:1px solid rgba(35,56,60,.5);
}
.row:last-child{border-bottom:none}
.pip{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.who{font-size:15px;font-weight:500;flex:1}
.left{font-family:'Space Mono',monospace;font-size:12px;color:var(--muted)}
.empty{font-size:14px;color:var(--muted);padding:9px 0}

/* ---------- overlays (first run, passphrase) ---------- */
.onboard{
  position:absolute;inset:0;z-index:3;background:var(--ink);
  display:none;flex-direction:column;justify-content:center;
  padding:0 34px;gap:16px;
}
.is-onboard .onboard{display:flex}
.onboard h1{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:31px;letter-spacing:-.04em;line-height:1.1;
}
.onboard p{font-size:14.5px;color:var(--muted);line-height:1.5;margin-bottom:6px}
.field{
  background:transparent;border:none;border-bottom:1.5px solid var(--line);
  padding:12px 2px;font-family:inherit;font-size:19px;color:var(--foam);
  width:100%;transition:border-color .2s;
}
.field:focus{outline:none;border-color:var(--amber)}
.field::placeholder{color:#3C5457}
.go{
  margin-top:10px;background:var(--amber);border:none;border-radius:999px;
  padding:15px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:16px;color:#2C1B03;cursor:pointer;letter-spacing:-.02em;
}
.go:hover{background:#FFBC4E}
.hint{font-size:12.5px;color:#3C5457;line-height:1.5;margin-top:2px}
.hint.error{color:var(--amber)}

/* passphrase modal reuses onboard look but toggles independently */
.gate{
  position:absolute;inset:0;z-index:4;background:var(--ink);
  display:none;flex-direction:column;justify-content:center;
  padding:0 34px;gap:16px;
}
.gate.show{display:flex}

/* ---------- iOS install gate ---------- */
.install{
  display:none;
  width:100%;max-width:392px;
  border-radius:42px;border:1px solid var(--line);
  background:var(--ink);box-shadow:0 40px 90px rgba(0,0,0,.6);
  padding:44px 34px;flex-direction:column;gap:18px;
}
body.needs-install .install{display:flex}
body.needs-install .phone{display:none}
.install .wordmark{font-size:22px;margin-bottom:4px}
.install h1{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:27px;letter-spacing:-.04em;line-height:1.12;
}
.install p{font-size:14.5px;color:var(--muted);line-height:1.55}
.steps{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.step{display:flex;align-items:center;gap:13px}
.step .num{
  flex:none;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line);color:var(--amber);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Mono',monospace;font-size:13px;font-weight:700;
}
.step .txt{font-size:14.5px;line-height:1.4}
.step .txt b{color:var(--foam);font-weight:600}
.shareglyph{color:var(--amber)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
}