/* ============================================================================
   TEPP CASINO NIGHTS — GUEST PHONE  v0.1
   ----------------------------------------------------------------------------
   Palette sampled directly from TEPP_Craps_Main_Skin.png so the phone reads as
   a slice of the same table, not a separate product.

   NO WEBFONTS AND NO CDN ANYWHERE IN THIS FILE. The whole promise of this
   system is that it runs with the internet unplugged, and a webfont link is a
   silent dependency on the outside world that fails at exactly the wrong
   moment. Type is system stacks: a serif for the felt lettering, the platform
   UI face for anything numeric.
   ========================================================================== */

:root{
  /* felt, sampled */
  --felt-deep:#041e43;
  --felt:#083564;
  --felt-lit:#0e4a8c;
  --night:#01060f;
  --panel:#020c1c;

  /* rail gold, sampled */
  --gold:#e0a532;
  --gold-hi:#f7d67e;
  --gold-dim:#7a5a1c;
  --gold-ink:#3a2a08;

  --ink:#eaf1fb;
  --ink-soft:#93aac9;
  --red:#c62b28;
  --win:#31c46a;
  --lose:#e2564f;

  --hair:rgba(224,165,50,.34);
  --hair-soft:rgba(224,165,50,.16);

  /* Serif for felt lettering. Georgia on iOS/Windows, Noto Serif on Android. */
  --display:Georgia,"Times New Roman",Times,serif;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;

  --pad:14px;
  --r:12px;
}

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

html,body{height:100%;margin:0;overflow:hidden}
body{
  background:var(--night);
  color:var(--ink);
  font-family:var(--ui);
  overscroll-behavior:none;
  touch-action:manipulation; /* kills double-tap zoom */
  -webkit-user-select:none;user-select:none;
}

.phone{
  height:100dvh;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  max-width:520px;margin:0 auto;
  position:relative;
  background:
    radial-gradient(140% 60% at 50% 0%, #06152c 0%, var(--night) 70%);
}

/* ── HEADER ──────────────────────────────────────────────────────────── */
.hdr{
  padding:calc(env(safe-area-inset-top) + 10px) var(--pad) 10px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 8px;
  border-bottom:1px solid var(--hair-soft);
  background:linear-gradient(#04101f,#020a16);
}
.hdr{position:relative}
.hdr-back{
  position:absolute;left:4px;top:calc(env(safe-area-inset-top) + 6px);
  width:34px;height:40px;background:none;border:none;
  color:var(--gold);font-size:28px;line-height:1;padding:0;
}
.hdr-brand{display:flex;align-items:baseline;gap:7px;grid-column:1;padding-left:26px}
.mark{
  font-family:var(--display);
  font-size:19px;font-weight:700;letter-spacing:.5px;
  color:var(--gold-hi);
  text-shadow:0 1px 0 #000,0 0 14px rgba(224,165,50,.35);
}
.mark-sub{
  font-size:9.5px;letter-spacing:.24em;font-weight:600;
  color:var(--ink-soft);text-transform:uppercase;
}
.hdr-sim{
  grid-row:1/3;grid-column:2;align-self:center;
  width:34px;height:34px;border-radius:50%;
  background:transparent;border:1px solid var(--hair-soft);
  color:var(--ink-soft);font-size:15px;line-height:1;
}
.hdr-you{grid-column:1;padding-left:26px;display:flex;align-items:baseline;gap:10px;margin-top:3px}
.you-name{
  font-family:var(--display);font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
}
.you-bal{margin-left:auto;display:flex;align-items:baseline;gap:5px}
.you-bal b{
  font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--gold-hi);letter-spacing:.01em;
}
.you-bal i{font-style:normal;font-size:9.5px;letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase}
.you-bal b.bump{animation:bump .45s ease}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.16)}100%{transform:scale(1)}}

/* ── STATUS RAIL ─────────────────────────────────────────────────────── */
.rail{
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:12px;
  row-gap:2px;
  padding:9px var(--pad);
  background:linear-gradient(#020a16,#01060f);
  border-bottom:1px solid var(--hair-soft);
}
.rail-cell{display:flex;align-items:baseline;gap:7px}
.rail-k{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft)}
.rail-v{
  font-family:var(--display);font-size:17px;font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.rail-v.on{color:var(--gold-hi)}
.rail-state{
  justify-self:end;display:flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:10px;letter-spacing:.15em;font-weight:700;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  border:1px solid rgba(49,196,106,.4);color:var(--win);
  background:rgba(49,196,106,.09);
}
.rail-state .dot{width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor}
.rail-state.shut{
  border-color:rgba(226,86,79,.42);color:var(--lose);background:rgba(226,86,79,.09);
}
.rail-state.shut .dot{animation:none}

/* ── FELT / BET SPOTS ────────────────────────────────────────────────── */
.felt{
  /* A 1fr grid track will not shrink below its content without this, which
     scrolls the header and status rail off a short phone. The guest must be
     able to see the point and the betting state at all times. */
  min-height:0;
  padding:var(--pad);
  display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--felt) 0%, var(--felt-deep) 62%, #03152f 100%);
  border-top:1px solid var(--gold-dim);
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
/* A hardway has to come as a pair, so the spot shows the pair it needs. */
.spot-hard{min-height:76px;gap:0}
.spot-hard b{font-family:var(--display);font-size:23px;line-height:1;color:var(--gold-hi)}
.spot-hard i{font-style:normal;font-size:9.5px;letter-spacing:.06em;color:var(--ink);
  opacity:.85;margin-top:1px}
.spot-hard .spot-pay{font-size:9px;margin-top:2px}

/* One-roll proposition bets are compact, high-energy spots. */
.spot-prop{min-height:70px;gap:2px}
.spot-prop b{font-family:var(--display);font-size:24px;line-height:1;color:var(--gold-hi)}
.spot-prop .spot-pay{font-size:9px;margin-top:2px}
.spot-anycraps{min-height:72px}
.spot-anycraps .spot-name{font-size:16px;color:var(--gold-hi)}
.prop-nums{font-family:var(--display);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:.16em}

/* The spot is a cut-out of felt with a gold hairline, same geometry as the
   table. Minimum 64px tall so it is a comfortable thumb target. */
.spot{
  position:relative;
  min-height:64px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  padding:10px 8px;
  border-radius:var(--r);
  border:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.16));
  color:var(--ink);
  font-family:inherit;
  transition:transform .09s ease, box-shadow .16s ease, border-color .16s ease;
}
.spot:active{transform:scale(.975)}
.spot.armed{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(224,165,50,.3), 0 0 18px rgba(224,165,50,.18) inset;
}
.spot-name{
  font-family:var(--display);
  font-size:14.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--ink);
}
.spot-field .spot-name{font-size:16px;color:var(--gold-hi)}
.spot-pay{font-size:9.5px;letter-spacing:.09em;color:var(--ink-soft);text-transform:uppercase}
.spot-num{min-height:70px;gap:1px}
.spot-num b{
  font-family:var(--display);font-size:26px;line-height:1;font-weight:700;
  color:var(--gold-hi);
}

/* The Field prints its own numbers, with the doubles circled — the guest
   learns the payout from the spot instead of from a legend. */
.field-nums{display:flex;gap:6px;margin:2px 0 1px}
.field-nums i{
  font-style:normal;font-family:var(--display);font-size:14px;font-weight:700;
  color:var(--ink);opacity:.9;
}
.field-nums i.dbl{
  color:var(--gold-hi);
  border:1px solid var(--gold-dim);border-radius:50%;
  width:22px;height:22px;display:grid;place-items:center;font-size:12px;
}

/* Disabled: the spot is not legal right now. The reason is printed on it. */
.spot[disabled]{opacity:.34;filter:saturate(.4)}
.spot[disabled] .spot-lock{
  position:absolute;inset:auto 0 6px;text-align:center;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
/* Sleeping: legal to bet, but it will not act on this roll. */
.spot.asleep{border-style:dashed;border-color:rgba(224,165,50,.28)}
.spot.asleep::after{
  content:"OFF";position:absolute;top:5px;right:7px;
  font-size:8px;letter-spacing:.12em;font-weight:700;color:var(--gold-dim);
}

/* ── CHIPS SITTING ON A SPOT ─────────────────────────────────────────── */
.chips{position:absolute;top:-9px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.chip-on,.chip-stage{
  min-width:34px;height:22px;padding:0 7px;border-radius:11px;
  display:grid;place-items:center;
  font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px rgba(0,0,0,.55);
}
.chip-on{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--gold-ink);
  border:1px solid #fff3d0}
.chip-stage{
  background:rgba(4,20,42,.9);color:var(--gold-hi);
  border:1px dashed var(--gold);
}

/* ── SECTIONS, ACCORDION, HINT ───────────────────────────────────────── */
.sect{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.sect-t{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}
.sect-note{font-size:9.5px;letter-spacing:.06em;color:var(--ink-soft);margin-left:auto}
.more{border-top:1px solid var(--hair-soft);padding-top:9px;margin-top:2px}
.more summary{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);cursor:pointer;list-style:none;
}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" \25BE"}
.more-p{font-size:11.5px;color:var(--ink-soft);margin:7px 0 0}
/* Your bets — mirrors the confirmed chips on the spots, in a readable list. */
.yours{margin-top:2px}
.yours[hidden]{display:none}
.ylist{list-style:none;margin:6px 0 0;padding:0}
.ylist li{
  display:flex;align-items:baseline;gap:10px;
  padding:7px 2px;border-bottom:1px solid var(--hair-soft);
  font-size:13px;
}
.ylist li b{
  margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800;
  color:var(--gold-hi);
}
.ylist li i{font-style:normal;font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-dim)}
.ylist .yname{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.yfoot{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:9px 2px 2px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.yfoot b{font-size:17px;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}

/* Empty state: an invitation, not an apology. */
.empty{
  margin:auto 0;padding:26px 12px;text-align:center;
  display:flex;flex-direction:column;gap:7px;
}
.empty[hidden]{display:none}
.empty-t{
  font-family:var(--display);font-size:15px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);
}
.empty-s{font-size:11.5px;line-height:1.7;color:var(--ink-soft)}

/* ── SHOOTER PANEL ───────────────────────────────────────────────────
   Sits above the chip rail and takes over the thumb zone when the dice are
   yours. A swipe, not a button — a deliberate gesture nobody fires by
   accident, and it reads like actually throwing something.
   Note: shake-to-roll is impossible here. iOS only grants motion sensor
   access over HTTPS, and an event LAN runs on a bare IP with no certificate.
   -------------------------------------------------------------------- */
/* Above the betting-closed veil. The shooter must see the one thing they
   are supposed to touch, not a dimmed version of it. */
.throw{padding:0 var(--pad) 4px;position:relative;z-index:45}
.throw[hidden]{display:none}
.throw-grip{
  position:relative;overflow:hidden;
  background-color:#04101f;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:104px;border-radius:15px;
  border:1px solid var(--gold);
  background:linear-gradient(180deg, rgba(224,165,50,.16), rgba(224,165,50,.05));
  box-shadow:0 0 26px rgba(224,165,50,.16) inset;
  touch-action:none;                 /* we own the vertical drag */
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.throw-grip.pull{box-shadow:0 0 40px rgba(224,165,50,.4) inset}
.throw-grip.armed{border-color:var(--gold-hi);
  background:linear-gradient(180deg, rgba(224,165,50,.34), rgba(224,165,50,.12))}
.throw-grip.sent{opacity:.35}
.throw-dice{display:flex;gap:8px;margin-bottom:2px}
.throw-dice .td{
  width:22px;height:22px;border-radius:5px;background:#e8e8ee;
  box-shadow:0 2px 5px rgba(0,0,0,.5), inset 0 -2px 0 rgba(0,0,0,.16);
  position:relative;
}
.throw-dice .td::after{content:"";position:absolute;inset:0;margin:auto;
  width:5px;height:5px;border-radius:50%;background:#c62b28}
.throw-dice .td:nth-child(2){transform:rotate(14deg)}
.throw-t{font-family:var(--display);font-size:16px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-hi)}
.throw-s{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.throw-grip.waiting{border-style:dashed;opacity:.62}

/* Who has the dice, in the status rail */
.rail-shoot{
  grid-column:1/-1;order:9;
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);padding-top:2px;
}
.rail-shoot[hidden]{display:none}
.rail-shoot b{color:var(--gold-hi);font-weight:700}

/* ── CHIP RAIL (the signature element) ───────────────────────────────── */
.tray{
  position:relative;
  padding:10px var(--pad) calc(env(safe-area-inset-bottom) + 10px);
  background:linear-gradient(#030d1d,#01060f);
  border-top:1px solid var(--gold-dim);
  box-shadow:0 -12px 26px rgba(0,0,0,.6);
}
.chiprail[hidden],.tray-row[hidden]{display:none}
.chiprail{display:flex;gap:10px;justify-content:center;padding:2px 0 10px}
.chip{
  width:56px;height:56px;border-radius:50%;
  border:none;padding:0;position:relative;
  background:transparent;
  transition:transform .13s cubic-bezier(.2,.9,.3,1.3), filter .13s ease;
}
/* Chip face: coloured centre, striped edge, the way a real clay chip reads. */
.chip::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,
      #f4f6f8 0deg 12deg, transparent 12deg 30deg),
    var(--c);
  box-shadow:0 3px 8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.35);
}
.chip::after{
  content:"";position:absolute;inset:7px;border-radius:50%;
  background:var(--c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 5px rgba(0,0,0,.4);
}
.chip i{
  position:relative;z-index:2;font-style:normal;
  display:grid;place-items:center;height:100%;
  font-size:14px;font-weight:800;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  font-variant-numeric:tabular-nums;
}
.c25{--c:#1c6f3c}
.c100{--c:#1a1d24}
.c500{--c:#5b2a86}
.c1000{--c:#a8202a}
.chip[aria-checked="true"]{
  transform:translateY(-9px) scale(1.06);
  filter:drop-shadow(0 0 12px rgba(224,165,50,.75));
}
.chip[aria-checked="true"]::before{box-shadow:0 4px 12px rgba(0,0,0,.7), 0 0 0 2px var(--gold-hi)}
.chip:disabled{opacity:.3}

.tray-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}
.tray-tot{display:flex;flex-direction:column;line-height:1.15}
.tt-k{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.tt-v{font-size:19px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

.btn{
  min-height:48px;padding:0 16px;border-radius:11px;
  font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  font-family:var(--ui);border:1px solid var(--hair);
  background:rgba(255,255,255,.05);color:var(--ink);
}
.btn:active{transform:scale(.97)}
.btn-confirm{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  color:var(--gold-ink);border-color:#fff0c9;
  box-shadow:0 3px 14px rgba(224,165,50,.32);
  min-width:132px;
}
.btn:disabled{opacity:.35;box-shadow:none}

/* ── OVERLAYS ────────────────────────────────────────────────────────── */
.closed-veil{
  position:fixed;inset:0;z-index:40;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:rgba(1,6,15,.78);backdrop-filter:blur(3px);
  pointer-events:none;
}
.closed-veil.on{display:flex}
.veil-t{
  font-family:var(--display);font-size:26px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-hi);text-shadow:0 0 24px rgba(224,165,50,.4);
}
.veil-s{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft)}

/* Anchored above the chip rail, never over the spots the thumb is aiming at. */
.toast{
  position:absolute;left:50%;bottom:calc(100% - 4px);
  transform:translate(-50%,10px);
  z-index:60;opacity:0;pointer-events:none;
  padding:11px 20px;border-radius:999px;
  font-size:14px;font-weight:800;letter-spacing:.05em;
  border:1px solid var(--hair);background:rgba(3,12,26,.96);
  box-shadow:0 10px 30px rgba(0,0,0,.65);
  transition:opacity .2s ease, transform .2s ease;
  max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* Clear the shooter panel when it is on screen, or the toast lands on top of
   the one control the shooter needs to see. */
body.shooting .toast{bottom:calc(100% + 116px)}
.toast.win{border-color:rgba(49,196,106,.6);color:var(--win);
  box-shadow:0 10px 30px rgba(0,0,0,.65),0 0 28px rgba(49,196,106,.22)}
.toast.lose{border-color:rgba(226,86,79,.55);color:var(--lose)}
.toast.info{color:var(--gold-hi)}

/* ── HOST SIM (dev only) ─────────────────────────────────────────────── */
/* When the sim drawer is open it must not cover the Confirm button. */
body.simopen .phone{height:calc(100dvh - 148px)}
.sim{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:#0b0b0d;border-top:2px solid var(--gold-dim);
  padding:9px var(--pad) calc(env(safe-area-inset-bottom) + 9px);
  max-width:520px;margin:0 auto;
}
.sim-h{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.sim-h span{color:#8a8a92;margin-left:6px;letter-spacing:.1em}
.sim-b{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
.sim-b button{
  min-height:42px;border-radius:9px;border:1px solid #2a2a30;background:#16161a;
  color:#d8d8de;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.sim-roll{background:#2a1b06 !important;border-color:var(--gold-dim) !important;color:var(--gold-hi) !important}
.sim-out{margin-top:7px;font-size:11px;color:#8a8a92;font-variant-numeric:tabular-nums}

/* ── QUALITY FLOOR ───────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}
/* Small phones (SE, older Androids) */
@media (max-width:370px){
  .rail{gap:8px}
  .rail-state{font-size:9px;padding:4px 8px}
  .rail-v{font-size:15px}
}
@media (max-height:680px){
  .spot{min-height:56px}
  .spot-num{min-height:60px}
  .chip{width:50px;height:50px}
  .field-nums{display:none}
}