/* Kiss Shot identity
   Brief: a late-night Brooklyn pool room for two. Petrol-teal cloth under a warm
   pendant lamp, oxblood lacquer rails with brass sights, a cream cue ball with
   kiss-red measle dots. Chrome stays light paper (site rule: no dark mode).
   Type: Source Serif 4 Italic (the site's own serif) for the wordmark and big
   moments; Bricolage Grotesque (Game Night kit) for UI. Motion: weighted, short,
   eased like a ball settling; nothing bouncy. Sound: quiet phenolic clacks. */
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;src:url(/home-assets/fonts/source-serif-4-italic.woff2) format("woff2")}
:root{
  --ks-cloth:#1f5d66;--ks-cloth-deep:#123c43;--ks-rail:#5a1d22;--ks-rail-deep:#2c0c0f;
  --ks-brass:#c9a35a;--ks-brass-lit:#f1d79a;--ks-cream:#f4ecd9;--ks-kiss:#d64541;--ks-ink:#1c1715;
  --ks-paper:#f7f3ea;--ks-serif:"Source Serif 4",Georgia,serif;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
}
html,body{background:var(--ks-paper);overscroll-behavior:none}
body{color:var(--ks-ink)}
body.game-mode{position:fixed;inset:0;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
[hidden]{display:none!important}

/* ---------------- menu ---------------- */
#menu{min-height:100vh;background:
  radial-gradient(900px 520px at 50% -140px,rgba(255,226,170,.55),rgba(255,226,170,0) 70%),
  radial-gradient(600px 300px at 100% 100%,rgba(31,93,102,.08),rgba(31,93,102,0) 70%),var(--ks-paper)}
.menu-wrap{max-width:560px;margin:0 auto;padding:calc(14px + var(--safe-t)) 20px calc(40px + var(--safe-b))}
.top{display:flex;justify-content:space-between;align-items:center;min-height:36px}
.back{font:600 14px var(--display);color:var(--muted);text-decoration:none;padding:8px 0}
.me{font:600 14px var(--display);color:var(--muted)}
.brand{text-align:center;margin:8px 0 6px}
.mark{width:min(64vw,250px);height:auto;display:block;margin:0 auto -8px;overflow:visible}
.mark .spark{transform-box:fill-box;transform-origin:center;animation:spark 3.2s ease-in-out infinite}
@keyframes spark{0%,62%,100%{opacity:0;transform:translate(108px,62px) scale(.2) rotate(0)}70%{opacity:1;transform:translate(108px,62px) scale(1.15) rotate(20deg)}82%{opacity:0;transform:translate(108px,62px) scale(.6) rotate(40deg)}}
.wordmark{font:italic 800 clamp(58px,17vw,96px)/.9 var(--ks-serif);letter-spacing:-.035em;margin:0}
.wordmark span{color:var(--ks-ink)}
.wordmark em{font-style:italic;color:var(--ks-rail)}
.tagline{font:500 17px/1.3 var(--display);color:var(--muted);margin:10px 0 0}
.rack-row{display:flex;justify-content:center;gap:4px;margin:20px auto 18px;flex-wrap:nowrap}
.mini{width:var(--s,18px);height:var(--s,18px);border-radius:50%;display:inline-block;flex:none;position:relative;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 40%),var(--c);
  box-shadow:inset -2px -3px 4px rgba(0,0,0,.28),0 1px 2px rgba(40,20,10,.25)}
.mini.st{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 40%),
  linear-gradient(180deg,#f7f2e6 0 26%,var(--c) 26% 74%,#f7f2e6 74%)}
.mini::after{content:"";position:absolute;inset:31%;border-radius:50%;background:#f7f2e6;opacity:.95}
.mini.cue::after,.mini.gone::after{display:none}
.mini.cue{background:radial-gradient(circle at 35% 30%,#fff,#efe6d2 60%,#cdbf9f)}
.mini.gone{opacity:.18;filter:grayscale(1)}
.rack-row .mini{--s:clamp(14px,4.6vw,24px);animation:rollin .6s cubic-bezier(.2,.8,.25,1) both}
@keyframes rollin{from{transform:translateX(-30px) rotate(-200deg);opacity:0}to{transform:none;opacity:1}}

.h2h{background:#fffdf8;border-radius:20px;box-shadow:var(--shadow);padding:14px 16px;margin:0 0 16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.h2h .who{font:700 15px var(--display)}
.h2h .who.r{text-align:right}
.h2h .n{font:italic 800 46px/.9 var(--ks-serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.h2h .n.sp{color:var(--you)}.h2h .n.sv{color:var(--them)}
.h2h .mid{font:600 12px var(--display);color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.12em}
.h2h .streak{grid-column:1/-1;text-align:center;font:500 13px var(--display);color:var(--muted)}

.choices{display:grid;gap:12px}
.modes{display:flex;gap:6px;background:#ece5d7;border-radius:999px;padding:4px;justify-self:center}
.mode{appearance:none;border:0;background:transparent;border-radius:999px;padding:9px 18px;font:700 15px var(--display);color:var(--muted);cursor:pointer}
.mode.on{background:#fffdf8;color:var(--ks-ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.big{appearance:none;border:0;text-align:left;border-radius:20px;padding:16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:3px;
  background:#fffdf8;color:var(--ks-ink);box-shadow:inset 0 0 0 1.5px var(--line),0 2px 0 rgba(0,0,0,.05);transition:transform .15s ease;touch-action:manipulation}
.big:active{transform:scale(.98)}
.big b{font:800 20px/1.1 var(--display);letter-spacing:-.01em}
.big small{font:500 14px/1.3 var(--display);color:var(--muted)}
.big.primary{background:linear-gradient(135deg,#6b2228,var(--ks-rail) 55%,#41131a);color:var(--ks-cream);box-shadow:0 10px 26px -12px rgba(90,29,34,.7),inset 0 1px 0 rgba(255,220,200,.25)}
.big.primary small{color:rgba(244,236,217,.78)}
.big.primary b{font:italic 800 26px/1 var(--ks-serif);letter-spacing:-.01em}
.big.join{background:var(--ks-cloth);color:var(--ks-cream);box-shadow:0 10px 26px -12px rgba(18,60,67,.7)}
.big.join small{color:rgba(244,236,217,.8)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.joinform,.guestname{display:flex;gap:8px;align-items:center;justify-content:center;font:600 14px var(--display);color:var(--muted)}
.joinform input,.guestname input{width:120px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:#fffdf8;font:700 16px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ks-ink)}
.guestname input{width:180px;letter-spacing:0;text-transform:none}
.howto{margin:22px 0 0;background:#fffdf8;border-radius:18px;box-shadow:inset 0 0 0 1.5px var(--line);padding:4px 16px}
.howto summary{font:700 16px var(--display);padding:12px 0;cursor:pointer}
.howto ol{margin:0 0 14px;padding-left:20px;font-size:15px;line-height:1.5}
.howto li{margin:6px 0}
.foot{margin-top:26px;text-align:center;color:var(--muted);font:italic 500 15px var(--ks-serif)}

/* ---------------- waiting ---------------- */
#wait{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:
  radial-gradient(700px 400px at 50% 0,rgba(255,226,170,.5),rgba(255,226,170,0) 70%),var(--ks-paper)}
.wait-card{max-width:440px;width:100%;text-align:center;display:grid;gap:12px}
.kicker{font:700 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
.wait-card h2{font:italic 800 44px/1 var(--ks-serif);margin:0;letter-spacing:-.02em}
.wait-card p{margin:0;color:var(--muted);font:500 16px/1.4 var(--display)}
.invite{display:flex;gap:8px;margin-top:6px}
.invite input{flex:1;min-width:0;padding:12px;border-radius:14px;border:1.5px solid var(--line);background:#fffdf8;font:600 14px var(--sans);color:var(--ks-ink)}
.invite .g-btn{background:var(--ks-rail)}
#waitCancel{justify-self:center}

/* ---------------- game ---------------- */
#game{position:fixed;inset:0;background:
  radial-gradient(120% 80% at 50% 45%,#fbf7ee 0,#f3ecdf 70%,#ebe2d2 100%)}
#cv,#bg{position:absolute;left:0;top:0;touch-action:none}
#bg{pointer-events:none}
.hud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;gap:8px;padding:calc(8px + var(--safe-t)) calc(56px + var(--safe-r)) 0 calc(10px + var(--safe-l));pointer-events:none}
.plaque{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:7px;row-gap:3px;align-items:center;min-width:0;max-width:48%;
  padding:7px 11px 7px 9px;border-radius:14px;background:rgba(255,253,248,.92);box-shadow:0 1px 0 rgba(0,0,0,.05),0 6px 16px -10px rgba(40,20,10,.35);
  transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease;opacity:.72;position:relative}
.plaque.turn{opacity:1;transform:translateY(1px);box-shadow:0 0 0 2px var(--pc,var(--ks-kiss)),0 10px 22px -10px rgba(40,20,10,.45)}
.plaque.right{grid-template-columns:1fr auto;text-align:right}
.plaque.right .dot{grid-column:2;grid-row:1}
.plaque.right .nm{grid-column:1;grid-row:1}
.plaque .dot{width:10px;height:10px;border-radius:50%;background:var(--pc,#999)}
.plaque.offline .dot{background:#bbb;box-shadow:none}
.plaque .nm{font:800 15px/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plaque .grp{grid-column:1/-1;font:600 11px/1 var(--display);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;display:none}
.plaque .tray{grid-column:1/-1;display:flex;gap:2px;min-height:12px}
.plaque.right .tray{justify-content:flex-end}
.plaque .tray .mini{--s:12px}
.plaque .tray .mini::after{inset:34%}
.iconbtn{position:absolute;top:calc(8px + var(--safe-t));right:calc(8px + var(--safe-r));width:42px;height:42px;border-radius:14px;border:0;background:rgba(255,253,248,.92);
  box-shadow:0 6px 16px -10px rgba(40,20,10,.35);display:grid;place-items:center;color:var(--ks-ink);cursor:pointer;touch-action:manipulation}
.iconbtn svg{width:22px;height:22px}
.status{position:absolute;left:50%;transform:translateX(-50%);font:700 13px/1.25 var(--display);color:var(--ks-ink);background:rgba(255,253,248,.95);
  padding:7px 13px;border-radius:999px;box-shadow:0 6px 16px -10px rgba(40,20,10,.4);white-space:nowrap;max-width:min(92vw,520px);overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  transition:opacity .2s ease}
.status:empty{opacity:0}
.status b{color:var(--ks-kiss)}

.controls{position:absolute;display:flex;align-items:center;gap:12px}
.spinbtn{width:54px;height:54px;border-radius:50%;border:0;padding:0;background:transparent;cursor:pointer;touch-action:manipulation;flex:none}
.spinbtn .face{display:block;width:100%;height:100%;border-radius:50%;position:relative;
  background:radial-gradient(circle at 38% 32%,#fff 0,#f2eadb 55%,#cdbf9f 100%);box-shadow:inset -3px -4px 8px rgba(0,0,0,.18),0 4px 12px -4px rgba(40,20,10,.45),0 0 0 2px rgba(255,253,248,.9)}
.spinbtn i{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ks-kiss);left:50%;top:50%;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.fine{position:relative;border-radius:14px;overflow:hidden;cursor:grab;touch-action:none;
  background:linear-gradient(180deg,#3a1216,#5a1d22 45%,#2c0c0f);box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 4px 12px -6px rgba(40,20,10,.5)}
.fine .ridges{position:absolute;inset:-40px;background:repeating-linear-gradient(90deg,rgba(241,215,154,.0) 0 6px,rgba(241,215,154,.55) 6px 7px,rgba(0,0,0,.25) 7px 8px)}
.fine.v .ridges{background:repeating-linear-gradient(180deg,rgba(241,215,154,.0) 0 6px,rgba(241,215,154,.55) 6px 7px,rgba(0,0,0,.25) 7px 8px)}
.fine::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.55));pointer-events:none}
.fine.v::after{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.55))}

.power{position:absolute;width:52px;touch-action:none;cursor:ns-resize}
.power .track{position:absolute;left:50%;top:0;bottom:0;width:14px;margin-left:-7px;border-radius:8px;background:rgba(44,12,15,.12);box-shadow:inset 0 1px 3px rgba(0,0,0,.2);overflow:hidden}
.power .fill{position:absolute;left:0;right:0;top:0;height:0;background:linear-gradient(180deg,#f1d79a,#e09a4a 55%,#d64541)}
.power .cue-handle{position:absolute;left:50%;top:0;width:10px;margin-left:-5px;height:62%;border-radius:5px 5px 7px 7px;
  background:linear-gradient(90deg,#c9a77a,#f6e6c4 45%,#c9a77a);box-shadow:0 3px 8px rgba(40,20,10,.35)}
.power .cue-handle::before{content:"";position:absolute;left:-1px;right:-1px;top:0;height:8px;border-radius:4px 4px 1px 1px;background:linear-gradient(#5d7fa6,#5d7fa6 45%,#f4efe4 45%)}
.power .cue-handle::after{content:"";position:absolute;left:-2px;right:-2px;bottom:0;height:42%;border-radius:4px 4px 7px 7px;background:linear-gradient(90deg,#2c0c0f,#8a3236 45%,#2c0c0f);border-top:3px solid #f1d79a}
.power .plabel{position:absolute;left:0;right:0;bottom:-22px;text-align:center;font:700 11px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.power.disabled{opacity:.35;pointer-events:none}
.power.active .plabel{color:var(--ks-kiss)}
.controls.disabled .fine{opacity:.4;pointer-events:none}

.banner{position:absolute;left:0;right:0;top:42%;display:flex;justify-content:center;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.25,1)}
.banner.show{opacity:1;transform:none}
.banner span{font:italic 800 clamp(30px,9vw,54px)/1 var(--ks-serif);color:var(--ks-cream);padding:12px 26px 14px;border-radius:999px;letter-spacing:-.02em;
  background:rgba(44,12,15,.82);box-shadow:0 18px 40px -16px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.banner.kiss span{background:rgba(214,69,65,.92)}

.sheet-bg{position:absolute;inset:0;background:rgba(28,23,21,.32);display:flex;align-items:flex-end;justify-content:center;z-index:20;animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.sheet{width:min(100%,460px);background:var(--ks-paper);border-radius:24px 24px 0 0;padding:18px 18px calc(18px + var(--safe-b));display:grid;gap:12px;box-shadow:0 -10px 40px -10px rgba(0,0,0,.35);animation:up .32s cubic-bezier(.2,.8,.25,1)}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
.sheet h3{font:italic 800 30px/1 var(--ks-serif);margin:0;letter-spacing:-.02em}
.sheet p{margin:0;color:var(--muted);font:500 15px/1.4 var(--display)}
.sheet .row{display:flex;gap:10px}
.sheet .row .g-btn{flex:1}
.sheet .g-btn{background:var(--ks-rail)}
.sheet .g-btn.soft{background:#fff;color:var(--ks-ink)}
.sheet .g-btn.ghost{background:transparent;color:var(--ks-ink)}
.tog{display:flex;align-items:center;gap:10px;font:600 16px var(--display);padding:6px 0}
.tog input{width:22px;height:22px;accent-color:var(--ks-rail)}
.overcard{text-align:center;border-radius:24px;margin-bottom:max(12px,var(--safe-b));padding-bottom:18px}
.sheet-bg.over{align-items:center}
.overcard h3{font-size:42px}
.badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.badges span{font:700 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:var(--ks-brass);color:var(--ks-rail-deep)}
.tally{font:600 15px var(--display);color:var(--muted)}
.tally b{font:italic 800 26px var(--ks-serif);color:var(--ks-ink);margin:0 4px}

.spinpick{background:var(--ks-paper);border-radius:28px;padding:18px;margin:auto;display:grid;gap:14px;justify-items:center;animation:up .28s cubic-bezier(.2,.8,.25,1)}
#spinSheet{align-items:center}
.spinpick p{margin:0;font:600 14px var(--display);color:var(--muted)}
.bigball{width:min(62vw,250px);height:min(62vw,250px);border-radius:50%;position:relative;touch-action:none;cursor:crosshair;
  background:radial-gradient(circle at 38% 32%,#fff 0,#f2eadb 55%,#cdbf9f 100%);box-shadow:inset -10px -14px 30px rgba(0,0,0,.18),0 18px 40px -16px rgba(40,20,10,.5)}
.bigball .cross{position:absolute;inset:0;border-radius:50%;background:
  linear-gradient(90deg,transparent calc(50% - .5px),rgba(28,23,21,.15) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),
  linear-gradient(180deg,transparent calc(50% - .5px),rgba(28,23,21,.15) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px));pointer-events:none}
.bigball::after{content:"";position:absolute;inset:22%;border-radius:50%;border:1.5px dashed rgba(28,23,21,.18);pointer-events:none}
.bigball i{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--ks-kiss);left:50%;top:50%;
  box-shadow:0 0 0 4px rgba(255,255,255,.75),0 4px 10px rgba(0,0,0,.3);transition:transform .08s}
.spinrow{display:flex;gap:10px}
.spinrow .g-btn{background:var(--ks-rail)}
.spinrow .g-btn.soft{background:#fff;color:var(--ks-ink)}

@media (prefers-reduced-motion:reduce){.mark .spark,.rack-row .mini{animation:none}}
body.land .plaque{padding:6px 8px}
body.land .plaque .nm{font-size:13px}
body.land .plaque .tray{flex-wrap:wrap}
body.land .plaque .tray .mini{--s:10px}
.wait-card .mark{width:150px;margin:0 auto}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--ks-rail);opacity:.25;animation:dot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{40%{opacity:1;transform:translateY(-3px)}}
.board{background:#fffdf8;border-radius:20px;box-shadow:var(--shadow);padding:12px 16px;margin:0 0 16px}
.board h4{margin:0 0 6px;font:700 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.board ol{margin:0;padding-left:22px;font:600 15px/1.6 var(--display)}
.board ol span{float:right;font:italic 800 16px var(--ks-serif);color:var(--ks-rail)}