*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#07110d;
  --ink:#eef4f0;
  --dim:#93a89f;
  --gold:#e9c584;
  --gold-dim:#b3924f;
  --panel:rgba(10,22,18,.86);
  --line:rgba(255,255,255,.10);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
html,body{
  margin:0;padding:0;height:100%;width:100%;
  background:var(--bg);color:var(--ink);
  overflow:hidden;position:fixed;inset:0;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
#table{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;background:var(--bg)}
.hidden{display:none !important}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#topbar{
  position:absolute;top:calc(var(--safe-t) + 10px);left:calc(var(--safe-l) + 12px);right:calc(var(--safe-r) + 12px);
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap;
}
.pchip{
  flex:0 1 240px;min-width:0;
  display:flex;flex-direction:column;gap:2px;
  padding:8px 12px;border-radius:16px;
  background:rgba(8,18,14,.62);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.pchip.right{align-items:flex-end;text-align:right}
.pchip.active{border-color:rgba(233,197,132,.55);box-shadow:0 0 0 1px rgba(233,197,132,.18),0 8px 24px rgba(0,0,0,.35);background:rgba(14,30,24,.8)}
.pname{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.pgroup{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdots{display:flex;gap:3px;margin-top:3px;flex-wrap:wrap;justify-content:flex-start;max-width:100%}
.pchip.right .pdots{justify-content:flex-end}
.pdots i{width:7px;height:7px;border-radius:50%;display:block;opacity:.95;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.iconbtn{
  pointer-events:auto;flex:0 0 auto;
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  background:rgba(8,18,14,.62);border:1px solid var(--line);color:var(--ink);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  cursor:pointer;
}
.iconbtn:active{transform:scale(.94)}
#statusPill{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(var(--safe-t) + 74px);
  padding:5px 12px;border-radius:999px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  background:rgba(233,197,132,.09);border:1px solid rgba(233,197,132,.22);
  opacity:0;transition:opacity .3s;
}
#statusPill.show{opacity:1}
#bottom{
  position:absolute;left:calc(var(--safe-l) + 18px);right:calc(var(--safe-r) + 18px);
  bottom:calc(var(--safe-b) + 14px);display:flex;justify-content:center;
}
#plunger{
  position:relative;width:min(470px,100%);height:58px;border-radius:19px;overflow:hidden;
  background:rgba(8,18,14,.74);border:1px solid rgba(255,255,255,.12);
  pointer-events:auto;touch-action:none;cursor:grab;
  display:grid;place-items:center;
  transition:opacity .25s,border-color .2s,box-shadow .2s;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
#plunger.live{border-color:rgba(233,197,132,.35)}
#plunger.pulling{border-color:rgba(233,197,132,.6);box-shadow:0 0 0 1px rgba(233,197,132,.2),0 10px 34px rgba(0,0,0,.45)}
#plunger.dim{opacity:.42;pointer-events:none}
#plungerFill{
  position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:19px 0 0 19px;
  background:linear-gradient(90deg,rgba(74,211,161,.45),rgba(233,197,132,.62) 58%,rgba(226,88,77,.75));
  transition:width .05s linear;
}
#plungerInner{position:relative;display:flex;align-items:baseline;gap:10px;pointer-events:none}
#plungerLabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(238,244,240,.62)}
#plungerPct{font-size:17px;font-weight:800;color:#f3f8f4;text-shadow:0 1px 4px rgba(0,0,0,.55);display:none;letter-spacing:.01em}
#plunger.pulling #plungerPct,#plunger.charged #plungerPct{display:block}
#plunger.pulling #plungerLabel,#plunger.charged #plungerLabel{display:none}
/* landscape: the plunger stands up on the right edge so the table keeps its height */
@media (orientation: landscape){
  #bottom{left:auto;right:calc(var(--safe-r) + 12px);bottom:auto;top:50%;transform:translateY(-50%);width:auto}
  #plunger{width:58px;height:min(240px,58vh);border-radius:19px}
  #plungerFill{width:100%;height:0%;top:auto;bottom:0;border-radius:0 0 19px 19px;
    background:linear-gradient(0deg,rgba(74,211,161,.45),rgba(233,197,132,.62) 58%,rgba(226,88,77,.75))}
  #plungerLabel{display:none}
  #plungerPct{writing-mode:vertical-rl;transform:rotate(180deg);display:block}
}
#offlineBar{
  position:absolute;top:calc(var(--safe-t) + 118px);left:50%;transform:translateX(-50%);
  background:rgba(226,88,77,.16);border:1px solid rgba(226,88,77,.4);color:#ffb9b3;
  padding:5px 12px;border-radius:999px;font-size:11px;display:none;
}
body.offline #offlineBar{display:block}
#toast{
  position:absolute;left:50%;bottom:calc(var(--safe-b) + 92px);transform:translate(-50%,12px);
  padding:10px 16px;border-radius:14px;background:rgba(8,18,14,.9);border:1px solid var(--line);
  font-size:13px;color:var(--ink);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;
  max-width:86vw;text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#updateToast{
  position:absolute;left:50%;top:calc(var(--safe-t) + 12px);transform:translateX(-50%);
  display:none;align-items:center;gap:10px;
  padding:8px 10px 8px 14px;border-radius:999px;background:rgba(233,197,132,.14);
  border:1px solid rgba(233,197,132,.35);font-size:12px;color:var(--gold);
}
#updateToast.show{display:flex}
#updateToast button{
  pointer-events:auto;background:var(--gold);color:#1a1408;border:0;border-radius:999px;
  padding:5px 12px;font-size:12px;font-weight:700;font-family:inherit;
}

/* ---------- screens ---------- */
.screen{
  position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  padding:calc(var(--safe-t) + 24px) 22px calc(var(--safe-b) + 24px);
  /* no backdrop-filter here: a full-viewport backdrop root smears the overlay's
     own text on Chrome, and it costs GPU on a phone */
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(17,62,46,.55), rgba(4,10,8,0) 58%),
    linear-gradient(180deg, rgba(6,16,12,.93), rgba(3,8,6,.975));
  overflow:auto;
}
.startInner{width:min(460px,100%);text-align:left}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:14px}
h1{
  margin:0 0 16px;font-size:clamp(46px,15vw,72px);line-height:.92;letter-spacing:-.03em;font-weight:800;
}
h1 span{color:var(--gold);font-style:italic;font-family:ui-serif,Georgia,"Times New Roman",serif;font-weight:500}
.tagline{margin:0 0 28px;color:var(--dim);font-size:15px;line-height:1.55;max-width:38ch}
.startActions{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.btn{
  font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.01em;
  border-radius:16px;padding:16px 20px;border:1px solid transparent;cursor:pointer;
  transition:transform .12s,filter .2s;
}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(180deg,#f2d59b,#d9ac63);color:#20180a;box-shadow:0 12px 30px rgba(233,197,132,.18)}
.btn.ghost{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--ink)}
.startFoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--dim)}
.linkbtn{background:none;border:0;color:var(--dim);font-family:inherit;font-size:13px;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(147,168,159,.35)}
.linkbtn:active{color:var(--ink)}
.sep{opacity:.4}
.iosHint{margin-top:18px;font-size:12px;line-height:1.6;color:var(--gold-dim);background:rgba(233,197,132,.07);border:1px solid rgba(233,197,132,.18);border-radius:12px;padding:10px 12px}

/* ---------- sheets ---------- */
.sheetWrap{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;background:rgba(3,8,6,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet{
  width:min(520px,100%);max-height:88vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:24px 24px 0 0;
  padding:18px 18px calc(var(--safe-b) + 22px);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  animation:sheetUp .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes sheetUp{from{transform:translateY(26px);opacity:.4}to{transform:translateY(0);opacity:1}}
.sheetHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sheetHead h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}
.closebtn{background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--dim);width:32px;height:32px;border-radius:50%;font-size:14px;cursor:pointer}
.row{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:14px 14px;margin-bottom:8px;
  font-family:inherit;font-size:15px;color:var(--ink);cursor:pointer;text-align:left;
}
.row:active{background:rgba(255,255,255,.08)}
.row .val{color:var(--gold);font-size:13px;letter-spacing:.04em}
.row .chev{color:var(--dim);font-size:18px;line-height:1}
.sheetStats{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.statCard{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px 10px;text-align:center}
.statCard b{display:block;font-size:20px;color:var(--gold);font-weight:700}
.statCard span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rules p{margin:0 0 12px;font-size:14px;line-height:1.6;color:#c9d8d1}
.rules b{color:var(--gold);font-weight:600}
@media (min-aspect-ratio: 1/1){
  .startInner{width:min(560px,100%)}
}