/* Darts 501: the wall, the board area, the home screen. */
body{background:radial-gradient(ellipse at 50% 38%,#2b3340,#14171C 72%)}
.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.4em,10vw,4.2em)}
.lead{display:flex;flex-direction:column;align-items:center;gap:.55em}
.board-art{width:6.2em;height:6.2em;border-radius:50%;position:relative;
  background:radial-gradient(circle,#C8372D 0 4%,#1C7C47 4% 9%,transparent 9%),
    radial-gradient(circle,transparent 58%,rgba(0,0,0,.0) 58%),
    conic-gradient(from -9deg,#C8372D 0 18deg,#1C7C47 18deg 36deg,#C8372D 36deg 54deg,#1C7C47 54deg 72deg,#C8372D 72deg 90deg,#1C7C47 90deg 108deg,#C8372D 108deg 126deg,#1C7C47 126deg 144deg,#C8372D 144deg 162deg,#1C7C47 162deg 180deg,#C8372D 180deg 198deg,#1C7C47 198deg 216deg,#C8372D 216deg 234deg,#1C7C47 234deg 252deg,#C8372D 252deg 270deg,#1C7C47 270deg 288deg,#C8372D 288deg 306deg,#1C7C47 306deg 324deg,#C8372D 324deg 342deg,#1C7C47 342deg 360deg);
  box-shadow:0 0 0 .55em #121315,0 0 0 .62em #3b3e44,0 10px 26px rgba(0,0,0,.55)}
.board-art::before{content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,#C8372D 0 5%,#1C7C47 5% 11%,transparent 11% 56%,rgba(0,0,0,0) 56%),
  conic-gradient(from -9deg,#1B1C1F 0 18deg,#EADFC2 18deg 36deg,#1B1C1F 36deg 54deg,#EADFC2 54deg 72deg,#1B1C1F 72deg 90deg,#EADFC2 90deg 108deg,#1B1C1F 108deg 126deg,#EADFC2 126deg 144deg,#1B1C1F 144deg 162deg,#EADFC2 162deg 180deg,#1B1C1F 180deg 198deg,#EADFC2 198deg 216deg,#1B1C1F 216deg 234deg,#EADFC2 234deg 252deg,#1B1C1F 252deg 270deg,#EADFC2 270deg 288deg,#1B1C1F 288deg 306deg,#EADFC2 306deg 324deg,#1B1C1F 324deg 342deg,#EADFC2 342deg 360deg)}
.board-art i{position:absolute;left:58%;top:12%;width:2.4em;height:.32em;border-radius:.2em;transform:rotate(-40deg);transform-origin:0 50%;
  background:linear-gradient(90deg,#D9DDE3 0 18%,#8D949E 18% 55%,#2B2F36 55% 78%,#3AA0FF 78%)}
.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%)}
.menu-col .choices{justify-content:center;gap:.35em;flex-wrap:nowrap}
.menu-col .choice{min-height:46px;font-weight:700;padding:.45em .7em}
.menu-col .choice .tick{color:var(--brass-hi);margin-left:.2em}
.menu-col .pill{min-width:12em;min-height:50px}
.links{display:flex;gap:.1em;justify-content:center;flex-wrap:wrap}
.links .link{min-height:44px;font-size:.98em}
@media (max-width:400px){.menu-col .choice{padding:.45em .5em;font-size:.94em}}
@media (max-height:480px){
  .home{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:0 1.2em;padding:.5em 1em}
  .home .title{font-size:1.9em}
  .board-art{width:4.2em;height:4.2em}
  .tagline{font-size:.95em}
  .menu-col{gap:.4em;width:100%}
  .menu-col .pill{min-height:46px;padding:.45em 2em}
  .menu-col .choice{min-height:44px;padding:.35em .6em}
  .links .link{padding:.3em .5em}
}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.5em!important}
  html:not(.hw-embed) .home .lead{padding-top:52px}}

/* 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;align-items:stretch}
#game .bar .jewel{flex:none;width:2.75em;height:2.75em;align-self:center}
.players{flex:1;display:flex;gap:.5em;justify-content:center;min-width:0}
.chip{flex:1 1 0;max-width:14em;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:.3em .75em .35em;border-radius:.8em;
  background:rgba(20,23,28,.8);border:1px solid var(--hair);opacity:.6;transition:opacity .2s,box-shadow .2s}
.chip.on{opacity:1}
.chip.you.on{box-shadow:0 0 0 2px #3AA0FF,0 0 16px rgba(58,160,255,.35)}
.chip.cpu.on{box-shadow:0 0 0 2px #FF8A3A,0 0 16px rgba(255,138,58,.35)}
.chip .who{font-size:.8em;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:flex;align-items:center;gap:.4em}
.chip .who i{width:.7em;height:.7em;border-radius:50%;background:#3AA0FF;flex:none}
.chip.cpu .who i{background:#FF8A3A}
.chip .score{font:900 2em/1 var(--sans);font-variant-numeric:tabular-nums;color:#fff;margin:.05em 0}
.chip small{color:var(--ink-soft);font-size:.82em;white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chip small.out{color:var(--brass-hi);font-weight:700}
.felt{flex:1;position:relative;min-height:0;touch-action:none}
#boardbg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.banner{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);max-width:calc(100% - 16px);pointer-events:none;padding:.35em 1em;border-radius:999px;
  background:rgba(12,14,18,.82);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}
/* a short wide screen: the scores stand in a column beside the board */
@media (max-height:500px) and (min-aspect-ratio:6/5){
  #game{flex-direction:row}
  #game .bar{flex-direction:column;justify-content:flex-start;width:12.5em;flex:none;padding:max(.4em,env(safe-area-inset-top)) .4em .4em max(.5em,env(safe-area-inset-left))}
  #game .bar .jewel{align-self:flex-start}
  .players{flex-direction:column;justify-content:flex-start;flex:none}
  .chip{max-width:none;flex:none}
  .chip .score{font-size:1.8em}
}
.card .big{font:800 1.2em/1.3 var(--serif);text-align:center;margin:0 0 .4em}
.card .game-name{text-align:center;color:var(--brass);font-weight:700;margin:0 0 .3em}
.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,.card .link{min-height:44px}
.card .actions{background:#1E232B}