/* Backgammon: the home screen, the side panel and the board (drawn in SVG by game.js). */
:root{--wood:#8A5A3B;--wood-lo:#6B4430;--field:#F3EAD6;--pa:#B8503F;--pb:#3F6787;--ivory:#FBF7EE;--ivory-rim:#A8957A;--onyx:#2C3138;--onyx-rim:#121417;--move:240ms}

/* 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(30em,100%)}
.logo{width:84px;height:84px;border-radius:20px;box-shadow:0 6px 18px rgba(107,68,48,.3)}
.home .title{font-size:clamp(2.3em,10vw,3.6em)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.05em}
#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:520px){.logo{display:none}}
@media (max-height:430px){.tagline{display:none}.home-in{gap:8px}.home .title{font-size:2.3em}.foot{display:none}}

/* the game: a bar over the board (tall) or a column beside it (wide) */
#game{align-items:stretch}
.side{display:grid;grid-template-columns:auto 1fr 1fr auto;grid-template-areas:"menu c0 c1 undo" "st st act act";gap:8px 8px;align-items:center;
  padding:max(8px,env(safe-area-inset-top)) 10px 0;width:min(100%,760px);margin:0 auto;flex:none}
#menu{grid-area:menu}#undo{grid-area:undo}#chip-0{grid-area:c0}#chip-1{grid-area:c1}.status{grid-area:st}.act{grid-area:act;justify-self:end}
.chip{display:flex;align-items:center;gap:.5em;padding:.3em .6em;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;min-width:0}
.chip .ck{display:block;width:1.6em;height:1.6em;border-radius:50%;flex:none}
.chip .ck.w{background:var(--ivory);box-shadow:inset 0 0 0 2px var(--ivory-rim)}
.chip .ck.k{background:var(--onyx);box-shadow:inset 0 0 0 2px var(--onyx-rim)}
.chip span{min-width:0}
.chip b{display:block;font-size:1em;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;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.chip.turn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.status{margin:0;font-weight:600;color:var(--ink-soft);font-size:.95em;line-height:1.25;min-height:1.25em}
.pill.act{padding:.55em 1.6em;min-width:6.5em}
.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 8px rgba(47,111,222,0)}}
.felt{flex:1 1 auto;min-height:0;min-width:0;position:relative;padding:8px}
#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}
@media (min-aspect-ratio:1/1){
  #game{flex-direction:row}
  .side{grid-template-columns:1fr 1fr;grid-template-areas:"menu undo" "c0 c0" "c1 c1" "st st" "act act";align-content:center;gap:10px;
    width:clamp(150px,20vw,230px);margin:0;padding:10px 0 10px max(10px,env(safe-area-inset-left))}
  #undo{justify-self:end}
  .status{text-align:center}
  .act{justify-self:stretch}
}
@media (min-aspect-ratio:1/1) and (max-height:430px){.side{gap:6px}.chip{padding:.15em .5em}.status{font-size:.85em}.jewel{width:44px;height:44px}}

/* the board */
#board .frame{fill:var(--wood)}
#board .field{fill:var(--field)}
#board .tray{fill:var(--wood-lo)}
#board .ta{fill:var(--pa)}
#board .tb{fill:var(--pb)}
#board .labels text{fill:#F3E6CF;font:700 13px var(--sans);text-anchor:middle;dominant-baseline:central}
#board .ck{transition:transform var(--move) cubic-bezier(.25,.8,.3,1)}
#board.still .ck,#board .ck.lift{transition:none}
#board .ck .sh{fill:rgba(40,24,12,.28)}
#board .ck.w .face{fill:var(--ivory);stroke:var(--ivory-rim);stroke-width:2}
#board .ck.k .face{fill:var(--onyx);stroke:var(--onyx-rim);stroke-width:2}
#board .ck .in{fill:none;stroke-width:2}
#board .ck.w .in{stroke:rgba(120,100,70,.28)}
#board .ck.k .in{stroke:rgba(255,255,255,.14)}
#board .ck.flat .in,#board .ck.flat .sh{display:none}
#board .ck text{font:800 24px var(--sans);text-anchor:middle;dominant-baseline:central}
#board .ck.w text{fill:#3A3226}
#board .ck.k text{fill:#F1ECE2}
#board .ck.lift .sh{transform:translate(4px,6px)}
#board .die rect{fill:#FFFDF8;stroke:#B7A78C;stroke-width:2}
#board .die circle{fill:#22262B}
#board .die.k rect{fill:var(--onyx);stroke:var(--onyx-rim)}
#board .die.k circle{fill:#F6F1E6}
#board .die.used{opacity:.32}
#board .rings,#board .marks{pointer-events:none}
#board .rings .src{fill:none;stroke:var(--accent);stroke-width:3;opacity:.6}
#board .rings .sel{fill:none;stroke:var(--accent);stroke-width:6}
#board .marks .dst{fill:rgba(47,111,222,.3);stroke:var(--accent);stroke-width:3;animation:glow 1.2s ease-in-out infinite}
#board .rings .dst.hit{fill:none;stroke:#E5533D;stroke-width:4;animation:none}
#board .marks .dst-tray{fill:rgba(47,111,222,.35);stroke:#9CC0FF;stroke-width:3;animation:glow 1.2s ease-in-out infinite}
#board .rings .cursor{fill:none;stroke:#FFC531;stroke-width:4;stroke-dasharray:9 6}
@keyframes glow{50%{opacity:.55}}
#board .hits rect{fill:transparent;pointer-events:all;cursor:pointer}
#board.waiting .hits rect{cursor:default}

.banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(28,37,48,.92);color:#fff;padding:.7em 1.3em;border-radius:16px;
  font-weight:700;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 */
.result .kind{text-align:center;font-weight:800;font-size:1.15em;margin:.1em 0 .3em;color:var(--pa)}
.how li{margin:.2em 0}
.how ul{padding-left:1.1em;margin:.2em 0}
.card .choices{margin-bottom:.6em}
.row > span:first-child{display:block}
@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:.55em 1.4em}
  .how li{margin:0}
  .how .keys{display:none}
}
.result .club{text-align:center;margin:-.4em 0 .2em;color:var(--ink-dim);font-size:.85em;font-weight:600;letter-spacing:.02em}
@media (max-aspect-ratio:1/1) and (max-width:440px){.chip{gap:.35em;padding:.3em .45em}.chip .ck{width:1.25em;height:1.25em}.chip b{font-size:.92em}}