/* 8-Ball Pool: the hall, the table area, the home screen. */
body{background:radial-gradient(ellipse at 50% 35%,#1d4a37,#0E1F18 75%)}
.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(2em,9vw,4em)}
.home .title small{font-size:.3em}
.balls-art{display:flex;gap:.35em;justify-content:center}
.balls-art i{width:1.5em;height:1.5em;border-radius:50%;display:block;box-shadow:inset -.25em -.3em .4em rgba(0,0,0,.45),inset .2em .2em .35em rgba(255,255,255,.35)}
.tagline{margin:0;color:var(--ink);font-size:1.1em}
.lead{display:flex;flex-direction:column;align-items:center;gap:.6em}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.7em;width:min(22em,100%)}
.levels{display:flex;gap:.4em;justify-content:center}
.levels .choice{min-width:5.4em;min-height:44px;font-weight:700}
.levels .choice .tick{color:var(--brass-hi);margin-left:.2em}
.menu-col .pill{min-width:12em;min-height:48px}
.menu-col .alt{display:flex;gap:.5em}
.menu-col .alt .choice{min-height:48px;min-width:8.5em;font-weight:700;font-size:1.02em}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.links .link{min-height:44px;font-size:.98em}
@media (max-height:480px){
  .home{flex-direction:row;flex-wrap:wrap;gap:.4em 2em;padding:.6em 1em}
  .home .title{font-size:1.7em}
  .home .lead{display:flex;flex-direction:column;align-items:center;gap:.5em}
  .menu-col{gap:.45em}
  .tagline{font-size:1em}
}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.6em!important}}

/* the game */
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game .bar{padding:max(.4em,env(safe-area-inset-top)) .6em .3em;gap:.5em}
#game .bar .jewel{flex:none;width:2.75em;height:2.75em}
.players{flex:1;display:flex;gap:.5em;justify-content:center;min-width:0}
.chip{flex:1 1 0;max-width:15em;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.15em;padding:.3em .7em;border-radius:.8em;
  background:rgba(14,31,24,.75);border:1px solid var(--hair);opacity:.62;transition:opacity .2s,box-shadow .2s}
.chip.on{opacity:1;box-shadow:0 0 0 2px var(--brass),0 0 14px rgba(224,189,109,.35)}
.chip b{font-size:.92em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chip .dots{display:flex;gap:3px;min-height:12px;flex-wrap:wrap}
.chip .dots i{width:12px;height:12px;border-radius:50%;display:block}
.chip .dots i.st{background:linear-gradient(#fff 0 22%,var(--c) 22% 78%,#fff 78%)!important}
.chip small{color:var(--ink-soft);font-size:.78em;white-space:nowrap}
.felt{flex:1;position:relative;min-height:0;touch-action:none}
#table{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.power{position:absolute;touch-action:none;border-radius:999px;background:rgba(0,0,0,.4);border:2px solid var(--brass-lo);overflow:hidden;cursor:grab;
  left:12px;top:50%;width:52px;height:min(72%,300px);transform:translateY(-50%)}
.power i{position:absolute;left:0;right:0;top:0;height:0;background:linear-gradient(180deg,#F6E3AB,#E0BD6D 40%,#d2562f);border-radius:999px}
.power span{position:absolute;inset:0;display:grid;place-items:center;writing-mode:vertical-rl;font-size:.78em;color:var(--ink-soft);font-weight:700;letter-spacing:.06em;pointer-events:none}
.felt.tall .power{left:50%;top:auto;bottom:10px;width:min(84%,340px);height:50px;transform:translateX(-50%)}
.felt.tall .power i{top:0;bottom:0;height:auto!important;width:0;background:linear-gradient(90deg,#F6E3AB,#E0BD6D 40%,#d2562f)}
.felt.tall .power span{writing-mode:horizontal-tb}
.power.off{opacity:.35;pointer-events:none}
.banner{position:absolute;left:50%;top:6px;transform:translateX(-50%);max-width:calc(100% - 24px);pointer-events:none;padding:.35em 1em;border-radius:999px;
  background:rgba(8,16,12,.8);border:1px solid var(--hair);font-weight:700;font-size:.95em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s}
.banner:empty{opacity:0}
.banner.flash{color:var(--brass-hi)}
.card .big{font:800 1.25em/1.3 var(--serif);text-align:center;margin:0 0 .5em}
.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}
@media (max-height:420px){.card{padding:1em 1.1em .9em;font-size:.92em}.card h2{margin-bottom:.4em}.card .actions{margin-top:.6em}}