@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-400i.woff) format("woff");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-500.woff) format("woff");font-weight:500 700;font-style:normal;font-display:swap}
:root{--ink:#fbefe0;--mute:#d8c2d6;--pink:#ff5fb8;--teal:#43e6d8;--amber:#ffb84d;--serif:"Cormorant Garamond",Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#140a1c;color:var(--ink);font:15px/1.45 var(--sans);-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#paint{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
#paint i{position:absolute;inset:-6%;background:center/cover no-repeat;will-change:transform}
#paint .far{background-image:url(art/lounge-far.webp);opacity:.9;animation:far 38s ease-in-out infinite alternate}
#paint .base{background-image:url(art/lounge.webp);-webkit-mask-image:linear-gradient(transparent 0,#000 30%);mask-image:linear-gradient(transparent 0,#000 30%);animation:kb 46s ease-in-out infinite alternate}
#paint .haze{background:radial-gradient(60% 40% at 50% 0,rgba(255,95,184,.25),transparent 70%),linear-gradient(rgba(20,8,28,.25),rgba(20,8,28,.15) 40%,rgba(14,6,20,.78) 100%)}
@keyframes kb{from{transform:scale(1.03) translate3d(calc(var(--px,0)*-10px),calc(var(--py,0)*-6px),0)}to{transform:scale(1.09) translate3d(calc(-1.2% + var(--px,0)*-10px),calc(-.8% + var(--py,0)*-6px),0)}}
@keyframes far{from{transform:scale(1.1) translate3d(calc(1.6% + var(--px,0)*18px),calc(var(--py,0)*12px),0)}to{transform:scale(1.14) translate3d(calc(-1.6% + var(--px,0)*18px),calc(.8% + var(--py,0)*12px),0)}}
#spots{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
#mute{position:fixed;z-index:6;top:calc(6px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));width:36px;height:36px;border:1px solid rgba(255,220,240,.18);border-radius:11px;background:rgba(30,14,40,.5);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
#mute svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#lob{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;gap:10px;padding:calc(46px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));max-width:1100px;margin:0 auto}
.hero{text-align:center}
.neon{margin:0;font:italic 600 clamp(54px,15vw,92px)/.95 var(--serif);letter-spacing:.02em;color:#fff1f8;text-shadow:0 0 6px #fff,0 0 16px #ff5fb8,0 0 34px #ff5fb8,0 0 60px rgba(255,95,184,.6);animation:flick 7s infinite}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.75}94%{opacity:1}96%{opacity:.85}97%{opacity:1}}
.tag{margin:6px 0 0;font:italic 500 19px/1.3 var(--serif);color:#ffe2b8;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.tag span{display:block;margin-top:3px;font:13px/1.4 var(--sans);font-style:normal;color:var(--mute)}
.disp{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(420px,100%)}
#machine{position:relative;border:0;background:none;padding:0;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;animation:bob 4.2s ease-in-out infinite;outline:none}
#machine:focus-visible svg{filter:drop-shadow(0 0 10px var(--amber))}
#machine svg{width:min(220px,48vw);height:auto;display:block;overflow:visible;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
#machine.wig{animation:wig .7s ease-in-out}
@keyframes wig{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}
#knob{transform-origin:100px 230px;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
#balls circle{transform-box:fill-box;transform-origin:center;animation:jig 2.6s ease-in-out infinite}
@keyframes jig{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-1.6px)}}
.disp.shake #balls{animation:rattle .5s linear}
@keyframes rattle{0%,100%{transform:translate(0,0)}25%{transform:translate(-3px,1px)}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,0)}}
.cta{display:block;margin-top:-2px;font:600 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--amber);opacity:.85}
.bub{position:absolute;right:-28%;top:6%;padding:7px 11px;border-radius:14px 14px 14px 3px;background:#fff3e0;color:#3a1230;font:600 12.5px/1.2 var(--sans);white-space:nowrap;opacity:0;transform:translateY(6px) scale(.9);transition:opacity .3s,transform .3s;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.bub.on{opacity:1;transform:none}
.joke{width:100%;padding:14px 16px 12px;border-radius:20px;background:rgba(28,12,38,.78);border:1px solid rgba(255,184,77,.35);box-shadow:0 0 30px rgba(255,95,184,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;animation:jin .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes jin{from{opacity:0;transform:translateY(8px) scale(.97)}}
.setup{margin:0;font:500 19px/1.3 var(--serif);color:#fff6ec}
.punch{margin:8px 0 0;min-height:1.3em;font:italic 600 20px/1.3 var(--serif);color:var(--amber);text-shadow:0 0 14px rgba(255,184,77,.35)}
.punch.wait{color:var(--mute);letter-spacing:.3em}
.punch.show{animation:pin .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes pin{from{opacity:0;transform:scale(.92)}}
.react{display:flex;gap:8px;justify-content:center;margin-top:12px;visibility:hidden}
.react.on{visibility:visible}
.react button{min-height:40px;padding:8px 14px;border-radius:99px;border:1px solid rgba(255,220,240,.25);background:rgba(255,255,255,.06);color:var(--ink);font:600 13.5px var(--sans);cursor:pointer;touch-action:manipulation}
.react button:hover,.react button:focus-visible{border-color:var(--amber);outline:none}
.react .more{background:linear-gradient(135deg,#ff5fb8,#ff9f4d);color:#2a0c22;border-color:transparent}
.tally{display:block;margin-top:8px;min-height:1.2em;color:#bfa8c0;font-size:12px}
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(560px,100%)}
.card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:12px 8px 10px;border-radius:18px;text-decoration:none;color:var(--ink);background:linear-gradient(160deg,rgba(60,24,70,.82),rgba(26,10,36,.86));border:1px solid rgba(255,220,240,.18);box-shadow:0 10px 26px rgba(0,0,0,.35);transition:transform .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:var(--amber);box-shadow:0 0 26px rgba(255,184,77,.35),0 10px 26px rgba(0,0,0,.35);outline:none}
.card .ic svg{width:72px;height:54px;display:block}
.card b{font:italic 600 21px/1.1 var(--serif);color:#ffe8c8}
.card small{font-size:11px;line-height:1.3;color:var(--mute)}
.card em{font-style:normal;font-size:11px;font-weight:700;color:var(--teal);min-height:1.3em;margin-top:2px}
.c-pool{--g:#43e6d8}.c-pong{--g:#ffb84d}.c-putt{--g:#ff5fb8}
.card::before{content:'';position:absolute;left:18%;right:18%;top:-1px;height:2px;border-radius:2px;background:var(--g);box-shadow:0 0 12px var(--g)}
.roll{animation:roll 3.4s ease-in-out infinite}
@keyframes roll{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
.cueb{animation:cueb 3.4s ease-in-out infinite}
@keyframes cueb{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
.bnc{animation:bnc 1.3s cubic-bezier(.4,0,.6,1) infinite}
@keyframes bnc{0%,100%{transform:translate(-12px,12px)}25%{transform:translate(0,-18px)}50%{transform:translate(12px,12px)}75%{transform:translate(0,-18px)}}
.flag{transform-origin:56px 19px;animation:flag 1.6s ease-in-out infinite}
@keyframes flag{0%,100%{transform:scaleX(1) skewY(0)}50%{transform:scaleX(.82) skewY(6deg)}}
.gb{animation:gb 4s ease-in-out infinite}
@keyframes gb{0%,15%{transform:translate(0,0)}60%,100%{transform:translate(38px,1px);opacity:1}62%,100%{opacity:0}}
.foot{text-align:center;font-size:12px;color:#bfa8c0;margin-top:4px}
.foot a{color:var(--amber)}
@media (min-width:900px) and (min-aspect-ratio:5/4){
 #paint .far{background-image:url(art/lounge-far-w.webp)}#paint .base{background-image:url(art/lounge-w.webp)}
 #lob{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;column-gap:40px;align-items:center;padding-top:40px}
 .hero{grid-column:1/-1}.disp{grid-column:1}.games{grid-column:2;grid-template-columns:1fr;width:min(380px,100%)}
 .card{flex-direction:row;text-align:left;gap:12px;padding:12px 16px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto}
 .card .ic{grid-row:1/5}.card b,.card small,.card em{grid-column:2}
 .foot{grid-column:1/-1}
}
@media (max-height:700px) and (max-width:899px){#machine svg{width:min(150px,36vw)}.neon{font-size:54px}}
@media (prefers-reduced-motion:reduce){#paint i,#machine,#balls circle,.roll,.cueb,.bnc,.flag,.gb,.neon{animation:none!important}}

.card small.sk{font-style:italic;color:#9fe9df;opacity:.9}
#moodlog{display:block;margin-top:3px;color:#cdeee9}
#moodlog:empty{display:none}

/* ten-game grid (7 new games added 2026-10-20) */
.c-airhockey{--g:#43e6d8}.c-skeeball{--g:#ffb84d}.c-stack{--g:#9b7bff}.c-darts{--g:#ff5fb8}.c-breaker{--g:#7dff9a}.c-bowling{--g:#ff7a59}.c-claw{--g:#fff2a8}
.games{grid-template-columns:repeat(2,1fr)}
@media (min-width:600px) and (max-width:899px){.games{grid-template-columns:repeat(5,1fr);width:min(860px,100%)}.card b{font-size:18px}}
@media (min-width:900px) and (max-aspect-ratio:5/4){.games{grid-template-columns:repeat(5,1fr);width:min(900px,100%)}}
@media (min-width:900px) and (min-aspect-ratio:5/4){
 .games{grid-template-columns:1fr 1fr;width:min(600px,100%)}
 .card{gap:2px 10px;padding:9px 12px}.card .ic svg{width:56px;height:42px}.card b{font-size:18px}
}

/* painted game thumbnails (2026-10-20 g8): art/tile-<game>.webp replaces the flat svg icons; future tiles follow the same .ic.ip pattern */
.card .ic.ip{position:relative;display:block;width:112px;aspect-ratio:4/3;margin:2px 0 6px;border-radius:11px;overflow:hidden;background:#1a0c24;box-shadow:0 0 0 1px rgba(255,220,240,.16),0 6px 16px rgba(0,0,0,.45);transition:box-shadow .25s,transform .25s}
.card .ic.ip img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease,filter .25s;filter:saturate(.95) brightness(.94)}
.card .ic.ip::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 14px rgba(10,4,16,.55);background:linear-gradient(180deg,transparent 60%,rgba(14,6,20,.28))}
.card:hover .ic.ip,.card:focus-visible .ic.ip,.card:active .ic.ip{box-shadow:0 0 0 1px var(--g,#ffb84d),0 0 18px color-mix(in srgb,var(--g,#ffb84d) 55%,transparent),0 6px 16px rgba(0,0,0,.45)}
.card:hover .ic.ip img,.card:focus-visible .ic.ip img,.card:active .ic.ip img{transform:scale(1.06);filter:saturate(1.08) brightness(1.04)}
@media (min-width:600px) and (max-width:899px){.card .ic.ip{width:100%;max-width:128px}}
@media (min-width:900px) and (max-aspect-ratio:5/4){.card .ic.ip{width:100%;max-width:140px}}
@media (min-width:900px) and (min-aspect-ratio:5/4){.card .ic.ip{width:72px;margin:2px 0;border-radius:9px}}
@media (prefers-reduced-motion:reduce){.card .ic.ip,.card .ic.ip img{transition:none}.card:hover .ic.ip img{transform:none}}