/* ============================================================================
   Bowling — Arline Arcade. Warm wood lane on the green felt, gaudy gold trim.
   The lane itself is painted on a 2D canvas (no WebGL) — this file styles the
   chrome around it: score strip, status line, gold pills, final panel.
   ========================================================================== */

.alley{
  width:100%; max-width:560px; margin:0 auto;
  padding:0 12px max(14px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:10px;
  height:calc(100dvh - 74px); min-height:480px;
}

/* ---- classic 10-frame score strip ---------------------------------------- */
.score-strip{
  display:flex; gap:3px; width:100%;
  background:rgba(0,0,0,.30); border:1px solid var(--line); border-radius:10px;
  padding:4px; box-shadow:inset 0 2px 8px rgba(0,0,0,.4);
}
.frame{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:stretch;
  background:linear-gradient(180deg, rgba(255,247,226,.96), rgba(240,226,195,.92));
  border-radius:5px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(169,121,26,.45);
  transition:box-shadow .2s cubic-bezier(.2,0,0,1);
}
.frame:last-child{ flex:1.45 1 0 }
.frame.cur{ box-shadow:inset 0 0 0 2px var(--gold), 0 0 10px rgba(233,195,74,.5) }
.f-n{
  font:700 .5rem/1.3 var(--mono); text-align:center; letter-spacing:.04em;
  color:var(--gold-hi); background:linear-gradient(180deg,#0b4d2e,#083b23);
}
.f-marks{ display:flex; border-bottom:1px solid rgba(169,121,26,.35) }
.f-marks i{
  flex:1 1 0; min-width:0; font:800 .68rem/1.5 var(--mono); font-style:normal;
  text-align:center; color:#5e1520;
}
.f-marks i + i{ border-left:1px solid rgba(169,121,26,.3) }
.f-cum{
  font:700 .74rem/1.5 var(--mono); text-align:center; color:var(--ink); min-height:1.5em;
}

/* ---- status line ---------------------------------------------------------- */
.status{
  margin:0; font-family:var(--mono); font-size:.9rem; text-align:center;
  color:var(--paper); text-shadow:0 1px 3px rgba(0,0,0,.5);
  min-height:1.45em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- the lane canvas ------------------------------------------------------ */
.lane-wrap{
  position:relative; flex:1 1 auto; min-height:300px;
  border-radius:var(--radius); overflow:hidden;
  background:#140d07;
  box-shadow:
    0 0 0 3px var(--gold-2), 0 0 0 4px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,240,176,.22),
    0 14px 30px rgba(0,0,0,.45);
}
#lane{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  touch-action:none; cursor:grab;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
#lane.rolling{ cursor:default }
#lane:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }

/* ---- controls row ---------------------------------------------------------- */
/* right padding keeps the Best pill clear of the fixed music toggle */
.controls{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-right:60px }
.best{
  font-family:var(--mono); font-size:.82rem; color:var(--gold-hi);
  padding:.45rem .9rem; border:1px solid var(--line); border-radius:999px;
  background:rgba(0,0,0,.22);
}

/* ---- gold pill (house recipe, from the craps roll button) ------------------ */
.gold-pill{
  font:800 1rem/1 var(--mono); color:var(--ink); background:var(--gold-grad);
  border:none; border-radius:999px; padding:.95rem 2.4rem; cursor:pointer;
  box-shadow:0 5px 16px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,240,176,.4);
  transition:transform .15s cubic-bezier(.2,0,0,1), box-shadow .15s cubic-bezier(.2,0,0,1);
  letter-spacing:.02em; min-height:44px;
}
.gold-pill:hover{
  transform:translateY(-2px);
  box-shadow:0 9px 22px rgba(0,0,0,.5), 0 0 22px rgba(233,195,74,.45), inset 0 0 0 2px rgba(255,240,176,.55);
}
.gold-pill:active{ transform:translateY(0) scale(.98) }
.gold-pill:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
.gold-pill[disabled]{ opacity:.55; cursor:default; transform:none; box-shadow:0 5px 16px rgba(0,0,0,.45) }
.gold-pill.small{ font-size:.85rem; padding:.7rem 1.4rem }

/* ---- final panel ----------------------------------------------------------- */
.final-panel[hidden]{ display:none }
.final-panel{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(3,26,15,.72);
  animation:panelIn .3s cubic-bezier(.2,0,0,1) both;
}
@keyframes panelIn{ from{ opacity:0 } to{ opacity:1 } }
.final-card{
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding:clamp(20px,6vw,34px) clamp(28px,9vw,52px);
  background:linear-gradient(180deg, rgba(10,70,42,.97), rgba(6,52,31,.98));
  border-radius:var(--radius); text-align:center;
  box-shadow:
    0 0 0 3px var(--gold-2), inset 0 0 0 2px rgba(255,240,176,.25),
    0 18px 44px rgba(0,0,0,.55), 0 0 34px rgba(233,195,74,.35);
  animation:cardIn .35s cubic-bezier(.2,0,0,1) both;
}
@keyframes cardIn{ from{ transform:translateY(14px) scale(.96); opacity:0 } to{ transform:none; opacity:1 } }
.final-title{
  margin:0; font-family:var(--mono); font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-hi);
}
.final-score{
  margin:0; font-family:var(--display); font-weight:800; font-size:clamp(3rem,18vw,4.6rem); line-height:1.05;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.final-note{ margin:0 0 .8rem; font-family:var(--mono); font-size:.85rem; color:var(--paper); opacity:.9 }

/* ---- calm mode -------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .frame, .gold-pill{ transition:none }
  .final-panel, .final-card{ animation:none }
}