/* Carrom. The page is the site's cream paper; the game sits in a dark room
   under one warm lamp, so the lacquer and the coins can shine. */
:root{
  --cream:#faf5ec; --paper:#fffdf8; --ink:#221a12; --inksoft:#6f6152;
  --maroon:#0e386d; --gold:#0b7d74; --golddeep:#0a5f57; --line:#e8ddc9;
  --room:#0d0907; --lamp:#ffe7b8; --radius:16px;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{ font-family:"Hanken Grotesk",system-ui,sans-serif; background:var(--cream); color:var(--ink); line-height:1.5;
  display:flex; flex-direction:column; min-height:100%; }

header{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border-bottom:1.5px solid var(--line); background:var(--paper); }
header .brand{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:20px; letter-spacing:-.02em;
  color:var(--maroon); text-decoration:none; }
header .brand span{ color:var(--gold); }
header .back{ font-size:13px; font-weight:700; color:var(--maroon); text-decoration:none; }

main{ width:100%; max-width:760px; margin:0 auto; padding:22px 16px calc(40px + env(safe-area-inset-bottom)); }
h1.title{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:32px; letter-spacing:-.02em; text-align:center; margin:4px 0 4px; }
.sub{ text-align:center; color:var(--inksoft); font-size:15.5px; max-width:540px; margin:0 auto 16px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ------------------------------------------------------------------ the room */
.game{ position:relative; background:radial-gradient(120% 90% at 50% 38%, #2a1d15 0%, #120c09 58%, var(--room) 100%);
  border-radius:24px; padding:12px 12px 14px; box-shadow:0 30px 60px -34px rgba(20,10,4,.9), 0 0 0 1.5px rgba(34,26,18,.2);
  width:min(100%, calc(100svh - 90px)); min-width:min(100%, 320px); margin:0 auto; }
.game.full{ width:100%; height:100%; max-width:none; border-radius:0; display:flex; flex-direction:column; justify-content:center;
  padding:max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.game.full .stage{ width:min(100%, calc(100svh - 150px)); margin:0 auto; }

.seats{ display:flex; justify-content:space-between; gap:10px; margin-bottom:10px; }
.seat{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:14px;
  background:rgba(255,240,215,.05); box-shadow:inset 0 0 0 1px rgba(255,230,190,.09); color:#efe3cf;
  transition:background .3s ease, box-shadow .3s ease; }
.seat.far{ flex-direction:row-reverse; text-align:right; }
.seat.active{ background:rgba(255,214,140,.13); box-shadow:inset 0 0 0 1.5px rgba(255,214,140,.55), 0 0 22px -6px rgba(255,200,110,.45); }
.seat[hidden]{ display:none; }
.seat .who{ display:flex; flex-direction:column; min-width:0; flex:1; }
.seat .name{ font-size:14.5px; font-weight:800; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seat .pts{ position:relative; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; max-width:96px;
  font-family:"Fraunces",Georgia,serif; color:var(--lamp); white-space:nowrap; line-height:1.05; }
.seat.far .pts{ justify-content:flex-start; }
.pts b{ display:inline-block; font-size:24px; font-weight:800; transform-origin:50% 70%; }
.pts small{ font-size:12px; font-weight:700; margin-left:3px; opacity:.8; }
.pts .tally{ flex-basis:100%; text-align:right; margin-top:2px; font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:11px; font-weight:700; color:#cdbb9e; }
.seat.far .pts .tally{ text-align:left; }
.pts.bump b{ animation:bump .55s ease-out; }
.pts .float{ position:absolute; right:0; top:-6px; font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:15px; font-weight:800;
  color:#ffd88a; text-shadow:0 1px 6px rgba(0,0,0,.8); pointer-events:none; animation:floatUp 1.15s ease-out forwards; }
.seat.far .pts .float{ right:auto; left:0; }
.pts .float.down{ color:#ff9d8a; }
@keyframes bump{ 30%{ transform:scale(1.4); color:#fff; } }
@keyframes floatUp{ 0%{ opacity:0; transform:translateY(8px); } 15%{ opacity:1; } 100%{ opacity:0; transform:translateY(-26px); } }
.pips{ display:flex; flex-wrap:wrap; gap:3px; margin-top:3px; min-height:10px; align-items:center; }
.seat.far .pips{ justify-content:flex-end; }
.pips i{ width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1.2px rgba(255,235,205,.28); }
.pips i.in.white{ background:radial-gradient(circle at 35% 30%, #fff8e8, #d9c09a); box-shadow:none; }
.pips i.in.black{ background:radial-gradient(circle at 35% 30%, #5a4130, #120b08); box-shadow:inset 0 0 0 1px rgba(255,235,205,.35); }
.pips i.in.queen{ background:radial-gradient(circle at 35% 30%, #ff6b5e, #8d0d14); margin-left:4px; }
.pips i.queen.wait{ animation:blink 1s ease-in-out infinite; }
.pips .owe{ font-size:11px; font-weight:800; color:#ff9d8a; margin-left:5px; }
.pips .count{ font-size:12.5px; font-weight:700; color:#d8c8af; }
@keyframes blink{ 50%{ opacity:.35; } }

.disc{ flex:none; width:30px; height:30px; border-radius:50%; position:relative;
  box-shadow:0 3px 6px rgba(0,0,0,.5), inset 0 -2px 3px rgba(0,0,0,.25); }
.disc::after{ content:""; position:absolute; inset:5px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.14), inset 0 0 0 3px rgba(0,0,0,.06); }
.disc.white{ background:radial-gradient(circle at 35% 30%, #fff9ea, #e4cfa8 70%, #c9ad7f); }
.disc.black{ background:radial-gradient(circle at 35% 30%, #5d4433, #1a110c 70%, #0b0705); }
.disc.black::after{ box-shadow:0 0 0 1px rgba(255,240,220,.12); }
.disc.mixed{ background:conic-gradient(#e9d7b3 0 33%, #1e1510 0 66%, #b0161e 0); }

/* ------------------------------------------------------------------ the board */
.stage{ position:relative; width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:var(--room); }
.stage canvas{ display:block; width:100%; height:100%; touch-action:none; cursor:grab;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.stage canvas:active{ cursor:grabbing; }

.banner{ position:absolute; left:50%; top:12px; transform:translate(-50%,-8px); opacity:0; pointer-events:none; max-width:calc(100% - 70px);
  background:rgba(18,12,8,.78); color:#fff4e0; font-size:14px; font-weight:700; padding:8px 15px; border-radius:999px; text-align:center;
  box-shadow:0 0 0 1px rgba(255,220,170,.18), 0 10px 24px -10px rgba(0,0,0,.8); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:opacity .25s ease, transform .25s ease; }
.banner.show{ opacity:1; transform:translate(-50%,0); }

.coach{ position:absolute; left:0; right:0; bottom:16px; padding:0 22px; text-align:center; pointer-events:none;
  font-size:13.5px; font-weight:700; color:#fff1d8; text-shadow:0 1px 8px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); transition:opacity .5s ease; }
.coach.gone{ opacity:0; }

.loading{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  color:#e9dcc6; font-weight:700; font-size:15px; text-align:center; padding:20px; background:var(--room); }
.loading[hidden]{ display:none; }
.spin{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,230,190,.18); border-top-color:var(--lamp); animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.result{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px;
  background:radial-gradient(closest-side, rgba(10,6,4,.55), rgba(10,6,4,.25)); animation:fade .4s ease; }
.result[hidden]{ display:none; }
.result .card{ background:var(--paper); border-radius:18px; padding:22px 24px 20px; text-align:center; max-width:330px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.85); }
.result h2{ font-family:"Fraunces",Georgia,serif; font-weight:800; font-size:23px; line-height:1.2; margin-bottom:6px; }
.result p{ color:var(--inksoft); font-size:14.5px; margin-bottom:16px; }
@keyframes fade{ from{ opacity:0; } }

.fullbtn{ position:absolute; right:10px; bottom:10px; width:36px; height:36px; border-radius:10px; border:0; cursor:pointer;
  background:rgba(18,12,8,.55); color:#f3e6cf; display:grid; place-items:center; box-shadow:0 0 0 1px rgba(255,220,170,.16); }
.fullbtn svg{ width:18px; height:18px; }
.fullbtn:hover{ background:rgba(18,12,8,.8); }

/* the striker slider, styled as a strip of the frame */
.slide{ display:block; margin:12px 6px 0; }
.slide input{ -webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; cursor:pointer; }
.slide input:disabled{ cursor:default; opacity:.45; }
.slide input::-webkit-slider-runnable-track{ height:8px; border-radius:99px; background:linear-gradient(90deg,#3b1d10,#6e3a20 50%,#3b1d10);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,230,190,.08); }
.slide input::-moz-range-track{ height:8px; border-radius:99px; background:linear-gradient(90deg,#3b1d10,#6e3a20 50%,#3b1d10); }
.slide input::-webkit-slider-thumb{ -webkit-appearance:none; width:30px; height:30px; margin-top:-11px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #b3241c 0 18%, #0e386d 19% 34%, #f6f1e6 35% 80%, #ddd2bc 81%);
  box-shadow:0 3px 8px rgba(0,0,0,.6); }
.slide input::-moz-range-thumb{ width:30px; height:30px; border:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #b3241c 0 18%, #0e386d 19% 34%, #f6f1e6 35% 80%, #ddd2bc 81%);
  box-shadow:0 3px 8px rgba(0,0,0,.6); }
.slide input:focus-visible{ outline:2px solid var(--lamp); outline-offset:3px; border-radius:99px; }

/* ------------------------------------------------------------------- dock */
.dock{ background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:14px 16px 16px; margin:16px auto 0; box-shadow:0 8px 24px -18px rgba(34,26,18,.5); }
.row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 18px; }
.row + .row{ margin-top:14px; padding-top:14px; border-top:1.5px solid var(--line); }
.row .push{ margin-left:auto; }
.control{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.control[hidden]{ display:none; }
.control > span:first-child{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--golddeep); }
.segs{ display:inline-flex; border:1.5px solid var(--line); border-radius:11px; overflow:hidden; background:#fff; }
.segs button{ font:inherit; font-size:13.5px; font-weight:700; padding:8px 12px; border:0; background:transparent; color:var(--inksoft); cursor:pointer; white-space:nowrap; }
.segs button + button{ border-left:1.5px solid var(--line); }
.segs button[aria-pressed="true"]{ background:var(--maroon); color:#fff; }
.btn{ font:inherit; font-size:14px; font-weight:800; padding:10px 16px; border-radius:11px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:var(--ink); }
.btn:hover{ border-color:#d3c4a6; }
.btn.pri{ background:var(--maroon); border-color:var(--maroon); color:#fff; }
.check{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; cursor:pointer; padding:8px 4px; }
.check input{ width:17px; height:17px; accent-color:var(--maroon); }
.btn:focus-visible, .segs button:focus-visible, .fullbtn:focus-visible, .check:focus-within{ outline:3px solid var(--gold); outline-offset:2px; }

/* ------------------------------------------------------------------ guide */
.mh-guide{ margin:26px auto 0; }
.mh-guide details{ border-top:1.5px solid var(--line); padding:11px 0; }
.mh-guide details:last-of-type{ border-bottom:1.5px solid var(--line); }
.mh-guide summary{ cursor:pointer; font-weight:700; font-size:15px; }
.mh-guide details p{ margin-top:6px; }

footer{ text-align:center; color:var(--inksoft); font-size:13px; padding:24px 16px 30px; margin-top:auto; }
footer a{ color:var(--maroon); }

@media (max-width:560px){
  main{ padding:14px 8px calc(36px + env(safe-area-inset-bottom)); }
  h1.title{ font-size:26px; }
  .sub{ font-size:14px; margin-bottom:12px; }
  .game{ padding:8px 6px 10px; border-radius:18px; }
  .seats{ gap:6px; margin-bottom:8px; }
  .seat{ padding:6px 8px; gap:7px; }
  .seat .name{ font-size:13px; }
  .seat .pts{ font-size:14px; }
  .disc{ width:24px; height:24px; }
  .disc::after{ inset:4px; }
  .pips{ gap:2px; }
  .pips i{ width:7px; height:7px; }
  .stage{ border-radius:12px; }
  .coach{ font-size:12px; bottom:10px; padding:0 48px 0 14px; }
  .banner{ font-size:13px; top:8px; }
  .dock{ padding:12px; }
  .segs button{ padding:8px 10px; font-size:13px; }
  .row .push{ margin-left:auto; }
}
@media (prefers-reduced-motion:reduce){
  .banner, .coach, .seat, .spin, .pips i.queen.wait{ transition:none; animation:none; }
}

/* ------------------------------------------------------------------ as an app (js/pwa.js) */
.setbtn, .dockhead, .dockshade{ display:none; }
.updatepill{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:5; font:inherit; font-size:13px; font-weight:800;
  padding:8px 14px; border-radius:999px; border:0; cursor:pointer; color:#2a1a10; background:linear-gradient(180deg,#ffe2a0,#f5c044);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.8); }
.updatepill[hidden]{ display:none; }
.installrow{ align-items:center; }
.installrow[hidden]{ display:none; }
.installtxt{ flex:1 1 220px; font-size:13.5px; color:var(--inksoft); }
.installtxt b{ color:var(--ink); }
.installdlg{ margin:auto; max-width:min(420px, calc(100% - 32px)); border:0; border-radius:18px; padding:20px 20px 18px; background:var(--paper); color:var(--ink); }
.installdlg::backdrop{ background:rgba(10,6,4,.6); }
.installdlg h2{ font-family:"Fraunces",Georgia,serif; font-size:21px; margin-bottom:4px; }
.installdlg p{ color:var(--inksoft); font-size:14px; margin-bottom:10px; }
.isteps{ font-size:13.5px; margin-bottom:10px; opacity:.7; }
.isteps.mine{ opacity:1; }
.isteps ol{ padding-left:20px; margin-top:3px; }
body.is-app{ background:var(--room); }
body.is-app header, body.is-app h1.title, body.is-app .sub, body.is-app .mh-guide, body.is-app .mh-related, body.is-app footer, body.is-app #full{ display:none !important; }
body.is-app main{ max-width:none; padding:0; }
body.is-app .game{ min-height:100svh; box-shadow:none; }
body.is-app .setbtn{ display:grid; }
body.is-app .dockhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
body.is-app .dockhead b{ font-family:"Fraunces",Georgia,serif; font-size:19px; }
body.is-app .dockshade:not([hidden]){ display:block; position:fixed; inset:0; z-index:39; background:rgba(10,6,4,.5); }
body.is-app .dock{ position:fixed; left:0; right:0; bottom:0; z-index:40; margin:0 auto; max-width:620px; border-radius:20px 20px 0 0;
  padding-bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateY(105%); transition:transform .28s ease; }
body.is-app .dock.open{ transform:none; }
/* a phone on its side: the two seats either side of the board */
@media (orientation:landscape) and (max-height:600px){
  .game.full{ display:grid; grid-template-columns:1fr auto 1fr; grid-template-areas:"s0 stage s1" ". slide ."; gap:6px 12px; align-items:start; }
  .game.full .seats{ display:contents; }
  .game.full #seat0{ grid-area:s0; } .game.full #seat1{ grid-area:s1; }
  .game.full .stage{ grid-area:stage; width:calc(100svh - 64px); }
  .game.full .slide{ grid-area:slide; margin-top:4px; }
}