/* Bowling Alley: the room, the score sheet, the lane's controls, the home screen. */
body{background:radial-gradient(ellipse at 50% 20%,#2a2f5c,#12152A 70%)}
.screen{position:fixed;inset:0;display:flex;flex-direction:column}

/* home */
.home{align-items:center;justify-content:center;gap:1em;padding:1.2em;text-align:center}
.home .title{font-size:clamp(2.2em,10vw,4.2em)}
.home .title small{font-size:.3em}
.lead{display:flex;flex-direction:column;align-items:center;gap:.5em}
.lead img{width:min(13em,60vw);height:auto}
.tagline{margin:0;color:var(--ink);font-size:1.1em}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.65em;width:min(24em,100%)}
.levels{display:flex;gap:.35em;justify-content:center;flex-wrap:wrap}
.levels .choice{min-width:4.6em;min-height:44px;font-weight:700;font-size:.95em}
.levels .choice .tick{color:var(--brass-hi);margin-left:.2em}
.menu-col .pill{min-width:12em;min-height:50px}
.go{display:flex;flex-direction:column;align-items:center;gap:.55em}
.menu-col .pill.alt{background:none;color:var(--brass-hi);border:2px solid var(--brass);box-shadow:none;min-width:10em}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.links .link{min-height:44px;font-size:1em}
@media (max-height:480px){
  .home{flex-direction:row;flex-wrap:nowrap;gap:.4em 1.4em;padding:.5em 1em}
  .home .title{font-size:1.9em}
  .lead{flex:0 1 14em;min-width:0}
  .lead img{width:8em}
  .menu-col{gap:.4em;width:auto;flex:0 1 21em;min-width:0}
  .levels .choice{min-width:0;padding:.45em .7em;font-size:.88em}
  .go{flex-direction:row}
  .menu-col .go .pill{min-width:0;padding:.55em 1.4em}
  .tagline{font-size:.95em}
}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.5em!important;padding-left:130px}}

/* the game: the bar and the score sheet */
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game .bar{padding:max(.35em,env(safe-area-inset-top)) .5em .3em;gap:.5em;align-items:stretch}
#game .bar .jewel{flex:none;width:2.75em;height:2.75em;align-self:center}
.sheet{flex:1;min-width:0;display:grid;grid-template-columns:2.6em repeat(9,1fr) 1.4fr 2.6em;gap:2px;font-variant-numeric:tabular-nums}
.sheet .nm,.sheet .fr,.sheet .tot{background:rgba(255,255,255,.07);border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.sheet .nm{font-weight:800;font-size:.8em;color:var(--ink-soft);background:none}
.sheet .on .nm,.sheet .nm.on{color:var(--brass-hi)}
.sheet .fr{padding:1px 0 2px}
.sheet .fr .mk{display:flex;justify-content:flex-end;gap:2px;width:100%;padding:0 2px;font-size:.72em;line-height:1.25;color:var(--ink-soft);font-weight:700;min-height:1.25em}
.sheet .fr .mk span{min-width:.9em;text-align:center}
.sheet .fr .mk .x{color:var(--brass-hi)}
.sheet .fr .mk .sp{color:#8fd6ff}
.sheet .fr b{font-size:.86em;line-height:1.1;min-height:1.1em;max-width:100%;overflow:hidden}
.sheet .fr.now{box-shadow:inset 0 0 0 2px var(--brass)}
.sheet .tot{font:800 1.05em/1 var(--sans);color:var(--brass-hi)}
@media (max-width:420px){#game .bar{gap:.35em;padding-left:.35em;padding-right:.35em}.sheet{grid-template-columns:2.1em repeat(9,1fr) 1.35fr 2.2em;gap:1px}.sheet .fr b{font-size:.68em;letter-spacing:-.03em}.sheet .fr .mk{padding:0 1px;gap:1px}.sheet .nm{font-size:.74em}}

/* the alley: the lane is drawn; the controls sit beside it (wide) or under it (tall) */
.alley{flex:1;position:relative;min-height:0;touch-action:none}
#lane{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.banner{position:absolute;left:50%;top:6px;transform:translateX(-50%);max-width:calc(100% - 24px);pointer-events:none;padding:.3em 1em;border-radius:999px;
  background:rgba(10,12,28,.82);border:1px solid var(--hair);font-weight:700;font-size:.95em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s;z-index:3}
.banner:empty{opacity:0}
.rack{position:absolute;width:4.2em;height:3.4em;pointer-events:none;z-index:3}
.rack i{position:absolute;width:.8em;height:.8em;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.25);transition:background .2s,opacity .2s}
.rack i.dn{background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.spin,.power{position:absolute;touch-action:none;z-index:2}
.spin{display:flex;align-items:center;gap:.5em}
.spin .lbl{font-weight:800;color:var(--ink-soft);font-size:.9em}
.spin .track{position:relative;flex:1;height:44px;border-radius:999px;background:rgba(0,0,0,.4);border:2px solid var(--brass-lo);display:flex;align-items:center;justify-content:space-between;padding:0 .6em;cursor:pointer}
.spin .track b{color:var(--ink-dim);font-size:.75em;pointer-events:none}
.spin .track::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:2px;background:var(--hair)}
.spin .knob{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff3c9,var(--brass) 55%,var(--brass-lo));box-shadow:0 2px 6px rgba(0,0,0,.5)}
.power{border-radius:999px;background:rgba(0,0,0,.4);border:2px solid var(--brass-lo);overflow:hidden;cursor:grab}
.power i{position:absolute;background:linear-gradient(90deg,#FFE2A0,#F2B84B 45%,#e2512f);border-radius:999px;left:0;top:0;bottom:0;width:0}
.power span{position:absolute;inset:0;display:grid;place-items:center;font-size:.85em;color:var(--ink);font-weight:800;letter-spacing:.04em;pointer-events:none;text-shadow:0 1px 3px #000}
.off{opacity:.35;pointer-events:none}

/* tall: lane on top, spin then power under it */
.alley.tall .spin{left:12px;right:12px;bottom:66px;height:48px}
.alley.tall .power{left:12px;right:12px;bottom:10px;height:50px}
.alley.tall .rack{left:10px;top:8px;font-size:15px}
/* wide: spin and the rack on the left, power upright on the right */
.alley.wide .spin{left:12px;bottom:14px;width:var(--side);flex-direction:column;align-items:stretch;gap:.2em}
.alley.wide .spin .lbl{text-align:center}
.alley.wide .rack{left:calc(12px + var(--side) / 2 - 2.1em);top:12px;font-size:18px}
.alley.wide .power{right:14px;top:12px;bottom:14px;width:56px}
.alley.wide .power i{top:auto;right:0;width:auto;height:0}
.alley.wide .power i{background:linear-gradient(0deg,#FFE2A0,#F2B84B 45%,#e2512f)}
.alley.wide .power span{writing-mode:vertical-rl;transform:rotate(180deg)}
.alley.wide .banner{left:12px;transform:none;top:auto;bottom:112px;width:var(--side);max-width:none;white-space:normal;text-align:center;border-radius:1em}
@media (max-height:480px){.alley.wide .rack{font-size:14px}.alley.wide .spin .track{height:40px}}

/* cards */
.card .big{font:800 1.25em/1.3 var(--serif);text-align:center;margin:0 0 .3em}
.card .sub{color:var(--ink-soft);text-align:center;margin:0 0 .4em;font-weight:700}
.card .vs{display:flex;justify-content:center;gap:1.4em;margin:.2em 0 .5em}
.card .vs div{text-align:center;color:var(--ink-soft)}
.card .vs b{display:block;color:var(--ink);font:800 1.9em/1.1 var(--serif)}
.card .vs .won b{color:var(--brass-hi)}
.card p{margin:.2em 0 .5em}
.card ul{margin:.2em 0 .4em;padding-left:1.2em}
.card li{margin:.25em 0}
.card .pill,.card .row,.card .choice{min-height:44px}
.card .row{font-weight:700;justify-content:center;text-align:center}
@media (max-height:420px){.card{font-size:.92em}.card .vs b{font-size:1.4em}}
.card .actions{background:var(--lacquer-hi)}