/* Star Hop Checkers: the home screen, the star and its marbles. */
:root{--wood:#EADFC8;--wood-line:#CDB98F;--well:#B8A47C;--c0:#E4572E;--c1:#2F6FDE;--c2:#2BA84A;--c3:#E9A800;--c4:#8E5CD9;--c5:#1898A8}
.s0{--c:var(--c0)}.s1{--c:var(--c1)}.s2{--c:var(--c2)}.s3{--c:var(--c3)}.s4{--c:var(--c4)}.s5{--c:var(--c5)}

/* home */
.home{align-items:center;justify-content:center;text-align:center;padding:16px}
.home-in{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(32em,100%)}
.head{display:flex;flex-direction:column;gap:8px;align-items:center}
.logo{width:84px;height:84px;filter:drop-shadow(0 6px 14px rgba(28,37,48,.15))}
.home .title{font-size:clamp(2.1em,9vw,3.4em)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.08em}
.opts{display:flex;flex-direction:column;align-items:center;gap:12px}
.opt{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;justify-content:center}
.lab{font-weight:700;color:var(--ink-soft);font-size:.9em;min-width:4.4em;text-align:right}
#players .choice{min-width:2.9em}
#levels .choice{min-width:4.6em;position:relative}
#levels .choice[data-won]::after{content:"✓";position:absolute;top:-.55em;right:-.4em;width:1.35em;height:1.35em;line-height:1.35em;border-radius:50%;
  background:#2E9E5B;color:#fff;font-size:.75em;font-weight:800;box-shadow:0 0 0 2px var(--paper)}
.go{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}
.links{display:flex;gap:.2em;flex-wrap:wrap;justify-content:center}
@media (max-height:560px){.logo{display:none}}
@media (max-height:460px){
  .home{padding:8px 16px}
  .home-in{flex-direction:row;width:min(46em,100%);gap:22px;justify-content:center}
  .head{flex:1;max-width:15em}.home .title{font-size:2.2em}.tagline{font-size:.95em}
  .opts{gap:6px}.foot{display:none}
}

/* the game: a bar over the board (tall), or a column beside it (wide) */
#game{flex-direction:column}
.side{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"menu st undo" "seats seats seats";gap:6px 10px;align-items:center;
  padding:max(8px,env(safe-area-inset-top)) 12px 0;width:min(100%,640px);margin:0 auto;position:relative;z-index:5}
#menu{grid-area:menu}#undo{grid-area:undo}.status{grid-area:st}.seats{grid-area:seats}
.status{margin:0;text-align:center;font-weight:700;font-size:1.05em;line-height:1.2;display:flex;align-items:center;justify-content:center;gap:.45em;min-height:2.4em}
.status .dot{width:.85em;height:.85em;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--c)}
.seats{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.seat{display:flex;align-items:center;gap:.35em;padding:.2em .6em .2em .35em;border-radius:999px;background:var(--paper-hi);border:2px solid transparent;
  font-size:.86em;font-variant-numeric:tabular-nums;box-shadow:0 1px 4px rgba(28,37,48,.07);transition:border-color .2s,transform .2s}
.seat i{width:1.1em;height:1.1em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8,transparent 45%),var(--c)}
.seat small{color:var(--ink-soft)}
.seat.turn{border-color:var(--c);transform:scale(1.06)}
.felt{flex:1;min-height:0;position:relative}
.board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);outline:none;touch-action:manipulation;cursor:pointer}
.board svg{position:absolute;inset:0;overflow:visible;pointer-events:none}
.star{fill:var(--wood);stroke:var(--wood-line);stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 10px 22px rgba(80,60,30,.18))}
.arm{opacity:.17}
.trace{fill:none;stroke:var(--c);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.38;stroke-dasharray:2 7}
.plan{fill:none;stroke:var(--c);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.plan-dot{fill:var(--c);opacity:.8}
.hole{position:absolute;width:calc(var(--d)*.5);height:calc(var(--d)*.5);margin:calc(var(--d)*-.25) 0 0 calc(var(--d)*-.25);border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#9c8862,var(--well) 55%,#d8c8a4);box-shadow:inset 0 2px 3px rgba(60,40,10,.35)}
.hole.dest::after{content:"";position:absolute;inset:calc(var(--d)*-.14);border-radius:50%;border:max(2px,calc(var(--d)*.08)) solid var(--c0);
  background:color-mix(in srgb,var(--c0) 30%,transparent);animation:glow 1.1s ease-in-out infinite alternate}
@keyframes glow{from{transform:scale(.88);opacity:.7}to{transform:scale(1.05);opacity:1}}
.pc{position:absolute;left:0;top:0;width:calc(var(--d)*.8);height:calc(var(--d)*.8);margin:calc(var(--d)*-.4) 0 0 calc(var(--d)*-.4);border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 18%,transparent 40%),
    radial-gradient(circle at 50% 60%,var(--c) 50%,color-mix(in srgb,var(--c) 70%,#000) 100%);
  box-shadow:0 calc(var(--d)*.06) calc(var(--d)*.12) rgba(40,25,5,.35);pointer-events:none;will-change:transform}
.pc.sel{z-index:3;box-shadow:0 0 0 calc(var(--d)*.07) #fff,0 0 0 calc(var(--d)*.14) var(--c),0 calc(var(--d)*.2) calc(var(--d)*.3) rgba(40,25,5,.35);animation:lift .9s ease-in-out infinite alternate}
@keyframes lift{to{scale:1.1}}
.pc.can{box-shadow:0 0 0 calc(var(--d)*.05) rgba(255,255,255,.9),0 calc(var(--d)*.06) calc(var(--d)*.12) rgba(40,25,5,.35)}
.pc.moving{z-index:4}
.pc.shake{animation:shake .32s}
@keyframes shake{25%{translate:-3px 0}75%{translate:3px 0}}
.pc.home{animation:pop .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pop{40%{scale:1.3}}
.cursor{position:absolute;width:calc(var(--d)*1.02);height:calc(var(--d)*1.02);margin:calc(var(--d)*-.51) 0 0 calc(var(--d)*-.51);border-radius:50%;
  border:3px dashed var(--accent);z-index:6;pointer-events:none;display:none}
.board.kb .cursor{display:block}
.board:focus-visible .cursor{display:block}
.spark{position:absolute;width:calc(var(--d)*1.4);height:calc(var(--d)*1.4);margin:calc(var(--d)*-.7) 0 0 calc(var(--d)*-.7);border-radius:50%;
  border:3px solid var(--c);pointer-events:none;z-index:5;animation:ring .6s ease-out forwards}
@keyframes ring{from{transform:scale(.3);opacity:1}to{transform:scale(1.5);opacity:0}}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}
.card.result .sub{text-align:center;color:var(--ink-soft);font-size:.9em;margin:-.3em 0 .5em}
.card.result .big{text-align:center;font-size:1.1em;margin:.2em 0 .6em}
.card ul{margin:.2em 0 .4em;padding-left:1.2em}
.card li{margin:.2em 0}
.kbd{font-size:.88em;color:var(--ink-soft)}

/* wide: the controls in a column beside the star */
@media (min-aspect-ratio:5/4){
  #game{flex-direction:row}
  .side{grid-template-columns:auto auto;grid-template-areas:"menu undo" "st st" "seats seats";align-content:center;justify-items:center;
    width:clamp(150px,24vw,280px);margin:0;padding:max(10px,env(safe-area-inset-top)) 6px max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:12px 14px}
  .status{flex-direction:column;min-height:4.6em}
  .seats{flex-direction:column;align-items:stretch;width:100%;max-width:12em}
}
@media (min-aspect-ratio:5/4) and (max-height:460px){
  .side{gap:6px 10px}.status{font-size:.92em;min-height:3.4em}
  .seats{flex-direction:row;flex-wrap:wrap;justify-content:center}.seat{font-size:.78em}
}

/* short screens (a phone on its side): the cards fold flatter so every button shows */
@media (max-height:460px){
  .card{padding:.7em 1em .6em}
  .card h2{font-size:1.25em;margin-bottom:.3em}
  .card.result .sub{font-size:.8em;margin:0 0 .2em}
  .card.result .big{margin:.1em 0 .3em;font-size:1em}
  .card.result .stats{margin:0}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .pill{padding:.45em 1.4em;min-height:44px;font-size:1em}
  .rows{gap:.3em}.row{min-height:44px;padding:.4em .9em}
}