/* Ludo Race: the home screen, the bars around the board, the board (drawn in SVG by game.js). */
:root{--c0:#2F6FDE;--c1:#E0533D;--c2:#2E9E5B;--c3:#E9A81C;--l0:#DCE7FB;--l1:#FADCD6;--l2:#D6F0E0;--l3:#FBEBC4;--hop:110ms}

/* home */
.home{align-items:center;justify-content:center;text-align:center;padding:16px}
.home-in{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(30em,100%)}
.logo{width:84px;height:84px;border-radius:20px;box-shadow:0 6px 18px rgba(28,37,48,.18)}
.home .title{font-size:clamp(2.3em,10vw,3.6em)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em}
.pick{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;justify-content:center}
.pick .lab{font-weight:700;color:var(--ink-soft);min-width:4.2em;text-align:right}
.choices .choice{min-width:3.4em;position:relative;font-size:1.02em}
#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:600px){.logo{display:none}}
@media (max-height:430px){.tagline{display:none}.home-in{gap:6px}.home .title{font-size:2.1em}.foot{display:none}.home .pill{padding:.5em 2em}}

/* the game: bars over and under the board (tall), a column beside it (wide) */
#game{display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "felt" "dock"}
.top{grid-area:top;display:flex;align-items:center;gap:8px;padding:max(8px,env(safe-area-inset-top)) 10px 0;width:min(100%,760px);margin:0 auto}
.chips{flex:1;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:6px;min-width:0}
.chip{display:flex;align-items:center;gap:.4em;padding:.3em .5em;border-radius:14px;background:var(--paper-hi);border:2px solid transparent;
  box-shadow:0 2px 8px rgba(28,37,48,.06);transition:border-color .2s,box-shadow .2s,transform .2s;min-width:0}
.chip i{display:block;width:1.3em;height:1.3em;border-radius:50%;flex:none;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 0 0 1.5px var(--c)}
.chip span{min-width:0}
.chip b{display:block;font-size:.95em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip small{display:block;color:var(--ink-soft);font-size:.78em;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip.turn{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent);transform:translateY(-1px)}
.felt{grid-area:felt;min-height:0;min-width:0;position:relative;padding:6px}
#board{display:block;width:100%;height:100%;touch-action:none;outline:none}
#board:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:12px}
.dock{grid-area:dock;display:flex;align-items:center;gap:10px;padding:0 12px max(10px,env(safe-area-inset-bottom));width:min(100%,760px);margin:0 auto}
.status{flex:1;margin:0;font-weight:700;color:var(--ink);font-size:1.05em;line-height:1.25;min-height:2.5em;display:flex;align-items:center}
.die{width:64px;height:64px;flex:none;border:0;padding:0;background:none;border-radius:14px}
.die svg{width:100%;height:100%;display:block;overflow:visible}
.die .face{fill:#fff;stroke:#C9D1DC;stroke-width:2}
.die .pip{fill:#1C2530}
.die.tumble svg{animation:tumble .12s linear infinite}
.die.land svg{animation:land .32s cubic-bezier(.2,.9,.3,1.4)}
.die:disabled{cursor:default}
.die:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@keyframes tumble{0%{transform:rotate(0)}50%{transform:rotate(14deg) scale(.94)}100%{transform:rotate(-10deg)}}
@keyframes land{0%{transform:scale(1.3)}100%{transform:scale(1)}}
.pill.act{padding:.55em 1.6em;min-width:5.6em}
.pill.act:disabled{background:#C9D1DC;box-shadow:none;cursor:default;color:#fff}
.pill.act.ready{animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{box-shadow:0 2px 0 var(--accent-lo),0 0 0 0 rgba(47,111,222,.35)}50%{box-shadow:0 2px 0 var(--accent-lo),0 0 0 9px rgba(47,111,222,0)}}

@media (min-aspect-ratio:1/1){
  #game{grid-template-columns:clamp(170px,calc(100vw - 100vh - 40px),280px) minmax(0,calc(100vh + 8px));justify-content:center;grid-template-rows:1fr auto auto 1fr;grid-template-areas:". felt" "top felt" "dock felt" ". felt"}
  .top{flex-direction:column;align-items:stretch;width:auto;margin:0;padding:8px 0 0 max(10px,env(safe-area-inset-left))}
  .chips{grid-template-columns:1fr 1fr}
  .dock{flex-wrap:wrap;justify-content:center;width:auto;margin:0;padding:10px 0 10px max(10px,env(safe-area-inset-left))}
  .status{flex:1 1 100%;justify-content:center;text-align:center}
}
@media (min-aspect-ratio:1/1) and (max-height:430px){
  .top,.dock{gap:5px}.dock{padding-top:4px}
  .chip{padding:.15em .4em}.chip b{font-size:.85em}.chip small{font-size:.72em}
  .status{font-size:.9em;min-height:2.3em}
  .die{width:52px;height:52px}.jewel{width:44px;height:44px}
  .pill.act{padding:.4em 1.2em;min-height:44px}
}
@media (max-aspect-ratio:1/1) and (max-width:560px){.chips[data-n="3"],.chips[data-n="4"]{grid-template-columns:1fr 1fr}}
@media (max-aspect-ratio:1/1) and (max-width:440px){.chip{gap:.3em;padding:.25em .4em}.chip i{width:1.05em;height:1.05em}.chip b{font-size:.85em}.status{font-size:1em}}

/* the board */
#board .ground{fill:#fff;stroke:#D5DCE5;stroke-width:.6}
#board .cell{fill:#fff;stroke:#C3CCD8;stroke-width:.35}
#board .star{fill:#9AA7B8}
#board .base-in{fill:#fff}
#board .spot{fill:none;stroke-width:1.1;opacity:.55}
#board .base.turn .base-in{fill:#FDFDF8}
#board .base.idle{opacity:.38}
#board .base.turn{filter:drop-shadow(0 0 2.2px rgba(28,37,48,.35))}
#board .arrow{fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
#board .tok{transition:transform var(--hop) cubic-bezier(.3,.7,.3,1);cursor:default}
#board .tok .sh{fill:rgba(20,28,38,.28)}
#board .tok .body{stroke:#fff;stroke-width:1.1}
#board .tok .cap{fill:rgba(255,255,255,.55)}
#board .tok .hit{fill:transparent;pointer-events:none}
#board .tok.can{cursor:pointer}
#board .tok.can .hit{pointer-events:all}
#board .tok .ring{fill:none;stroke:#1C2530;stroke-width:.9;opacity:0}
#board .tok.can .ring{opacity:.9;animation:pulse 1s ease-in-out infinite}
#board .tok.cur .ring{stroke:#FFB000;stroke-width:1.6;stroke-dasharray:2.2 1.4;opacity:1;animation:none}
#board .tok .lift{transition:transform calc(var(--hop) * .9) ease-out}
#board .tok.up .lift{transform:translateY(-2.6px) scale(1.08)}
#board .tok.flat .sh{opacity:.4}
@keyframes pulse{50%{opacity:.25}}
#board .ghost{fill:none;stroke-width:1.2;stroke-dasharray:1.6 1.2;pointer-events:none}
#board .poof circle{animation:poof .5s ease-out forwards}
@keyframes poof{to{opacity:0;transform:scale(2.4)}}
#board .poof{pointer-events:none}

.banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(28,37,48,.92);color:#fff;padding:.6em 1.2em;border-radius:16px;
  font-weight:800;font-size:1.15em;text-align:center;pointer-events:none;z-index:4;animation:pop .25s cubic-bezier(.2,.9,.3,1.3);max-width:90%;width:max-content}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}

/* cards */
.veil{z-index:30}
.result .kind{text-align:center;font-weight:800;font-size:1.1em;margin:.1em 0 .3em;color:var(--ink-soft)}
.result .club{text-align:center;margin:-.4em 0 .2em;color:var(--ink-dim);font-size:.85em;font-weight:600}
.how li{margin:.2em 0}
.how ul{padding-left:1.1em;margin:.2em 0}
.card .choices{margin-bottom:.6em}
@media (max-height:520px){
  .card{padding:.8em 1.1em .8em}
  .card h2{margin-bottom:.35em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .pill{padding:.5em 1.4em}
  .how li{margin:0}
  .how .keys{display:none}
  .stats{margin-bottom:.2em}
}