/* Goldbomb: one centred column sized for a phone held by the prompt giver. Same dark "party night" look as Nearo and Sidestep. */
:root{--d:Bungee,Impact,sans-serif;--b:Outfit,system-ui,sans-serif;--bg:#150d2e;--ink:#fff7e8;--mut:#b9a9e6;--paper:#fff7e8;--deep:#241447;--c0:#ff4d6d;--c1:#ffd93d;--c2:#2ee6a6;--c3:#4cc9f0;--c4:#9b6bff;--c5:#ff9f43;--c6:#ff6bd5;--c7:#b8f35a;--ok:#2ee6a6;--no:#ff3b5c;--gold:#ffc52f;color-scheme:dark}
html{scrollbar-gutter:stable}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:600 16px/1.35 var(--b);min-height:100vh;overflow-x:hidden;padding-left:max(0px,env(safe-area-inset-left,0px));padding-right:max(0px,env(safe-area-inset-right,0px))}
#bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(60vmax 50vmax at 8% -10%,#5b2bd6aa,transparent),radial-gradient(50vmax 40vmax at 100% 0,#ff6bd555,transparent),radial-gradient(60vmax 40vmax at 50% 120%,#ffc52f33,transparent),var(--bg)}
#bg::after{content:"";position:absolute;inset:0;background:radial-gradient(#ffffff14 1px,transparent 1px) 0 0/24px 24px}
#fx{position:fixed;inset:0;z-index:70;pointer-events:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--c1);outline-offset:2px}
.wrap{max-width:640px;margin:0 auto;padding-block:20px 0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.center{text-align:center}

/* logo on a cream badge, googly eyes */
.badge{position:relative;aspect-ratio:1;margin:0 auto}
.badge .blob{position:absolute;inset:6%;border-radius:46% 54% 50% 50%/52% 46% 54% 48%;background:var(--paper);box-shadow:6px 7px 0 var(--c6),12px 14px 0 #0005;animation:wobble 9s ease-in-out infinite}
.badge .logo{position:absolute;inset:12%;width:76%;height:76%;animation:bob 5s ease-in-out infinite;overflow:visible}
.badge.lg{width:min(170px,42vw)}.badge.md{width:110px}.badge.sm{width:38px;margin:0}.badge.sm .blob{box-shadow:2px 3px 0 var(--c6)}.badge.sm .logo{animation:none}
.eye{transform-box:fill-box;transform-origin:center}.eye .pupil{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.eye.blink{animation:blink .18s ease-in-out}
@keyframes blink{50%{transform:scaleY(.08)}}
@keyframes bob{50%{transform:translateY(-4%) rotate(2deg)}}
@keyframes wobble{50%{border-radius:54% 46% 48% 52%/46% 54% 46% 54%;transform:rotate(-3deg)}}
.fuse{animation:fuse .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes fuse{to{fill:#ff9f43;transform:scale(1.15)}}

/* hero */
.hero{text-align:center;margin-bottom:22px}
h1{font:400 clamp(44px,14vw,92px)/.95 var(--d);text-shadow:3px 3px 0 var(--c6),6px 6px 0 var(--c4),9px 9px 0 #0006;transform:rotate(-2deg);text-wrap:balance;margin-top:14px;overflow-wrap:anywhere}
h1 span{color:var(--c1)}
#app.pop h1{animation:drop .8s cubic-bezier(.2,1.5,.4,1)}
@keyframes drop{from{transform:translateY(-60px) rotate(-8deg);opacity:0}}
.hero .tag{font:400 17px var(--d);color:var(--c6);margin-top:18px}
.hero p{color:var(--mut);margin-top:12px;font-size:17px;max-width:30em;margin-inline:auto}

/* panels and cards */
.panel,.card{background:#ffffff0f;border:2px solid #ffffff1c;border-radius:24px;padding:18px;margin-bottom:16px;backdrop-filter:blur(8px)}
.card{padding:20px 16px}
h2{font:400 18px var(--d);margin-bottom:12px;display:flex;align-items:center;gap:8px}h2 em{font-style:normal;color:var(--c1)}
h2.q{display:block;font:800 21px/1.25 var(--b);margin:4px 0 8px}
.kick{color:var(--mut);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.kick b{color:var(--ink);text-transform:none;letter-spacing:0;font-size:16px}
.hint{color:var(--mut);font-size:14px;margin:-2px 0 12px}
.hint.center{margin:4px 0 12px}
.err{background:#ff3b5c22;border:2px solid #ff3b5c66;color:#ffd6dd;border-radius:14px;padding:10px 14px;margin-top:12px}
.rb{color:var(--c0)}.gb{color:var(--c1)}.hlp{color:var(--c1)}
.hero .by{font:400 12px var(--d);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:22px}
.plaque{display:inline-block;background:var(--paper);border-radius:18px;padding:8px 18px;margin-top:8px;box-shadow:0 5px 0 #0006;transition:transform .2s}.plaque:active{transform:rotate(-2deg) scale(1.03)}.plaque img{display:block;height:44px;width:auto}
.note{text-align:center;margin:14px 0}
.lnk{color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:4px;padding:6px}

/* option pills */
.lab{font-weight:800;font-size:15px;margin:4px 0 8px}
.pill{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pill button{flex:1 1 0;min-width:44px;min-height:44px;padding:8px 10px;border-radius:12px;background:#0004;color:var(--ink);border:2px solid #ffffff22;font:700 15px var(--b);transition:background .15s,transform .1s}
.pill button:active{transform:scale(.96)}
.pill button.on{background:var(--c1);color:var(--deep);border-color:var(--c1)}

/* players */
.plist{list-style:none;padding:0;display:grid;gap:8px;margin-bottom:12px}
.plist li{display:flex;align-items:center;gap:10px;background:#0003;border-radius:14px;padding:6px 6px 6px 8px;border-left:6px solid var(--tc)}
.plist b{flex:1;font-weight:800;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:28px;height:28px;border-radius:50%;background:var(--tc);color:#1a1033;display:grid;place-items:center;font:400 13px var(--d);flex:none}
.ico{width:40px;height:40px;border-radius:12px;background:#ffffff14;font-size:20px;font-weight:800}.ico:disabled{opacity:.25;cursor:default}
.add,.pform{display:flex;gap:8px}
.pform{flex-direction:column;gap:14px;margin-top:8px}
input{width:100%;min-width:0;padding:14px 16px;border-radius:14px;border:2px solid #ffffff2a;background:#0005;color:var(--ink);font:700 18px var(--b)}
.pform input{font-size:22px;padding:16px 18px}
input::placeholder{color:#b9a9e699}
.addb{padding:0 20px;border-radius:14px;background:var(--c1);color:var(--deep);font:400 17px var(--d);box-shadow:0 5px 0 #c9a514}
.addb:active{transform:translateY(3px);box-shadow:0 2px 0 #c9a514}

/* big buttons */
.big{display:block;width:100%;padding:18px;border-radius:20px;background:var(--c2);color:#10261e;font:400 22px var(--d);box-shadow:0 7px 0 #14966d;transition:.1s;margin-bottom:8px}
.big:active{transform:translateY(5px);box-shadow:0 2px 0 #14966d}
.big:disabled{background:#555;box-shadow:0 7px 0 #333;color:#999;cursor:not-allowed;transform:none}
.big.alt{background:var(--c1);color:var(--deep);box-shadow:0 7px 0 #a88a00}
.big.alt:active{box-shadow:0 2px 0 #a88a00}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.ghost{padding:12px;border-radius:14px;background:#ffffff12;border:2px solid #ffffff2a;font-weight:800;font-size:15px;box-shadow:0 4px 0 #0005}
.ghost:disabled{opacity:.4;cursor:default}
.warn{background:var(--no)!important;color:#fff!important;border-color:var(--no)!important}
.dots::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* top bar during play */
.top{display:flex;align-items:center;justify-content:space-between;max-width:640px;margin:0 auto;padding:10px max(16px,env(safe-area-inset-left,0px)) 0}
.mini{display:flex;align-items:center;gap:10px;font:400 15px var(--d)}
.tbtn{display:flex;gap:6px}.tbtn button{width:44px;height:44px;border-radius:14px;background:#ffffff12;font-size:20px}
.tbtn .endb{width:auto;padding:0 12px;font:800 14px var(--b);border:2px solid #ffffff2a}

/* hand-over screen */
.hand{text-align:center;padding:28px 18px;margin-top:20px}
.hand p{color:var(--mut);margin:10px auto 22px;max-width:26em}
.hand .kick{margin:16px 0 0}
.who{font-size:clamp(36px,12vw,64px);text-shadow:3px 3px 0 var(--tc),6px 6px 0 #0006;margin-top:8px}
.think{text-align:center;margin-top:18px;color:var(--mut)}.think .badge{animation:spin 1.6s cubic-bezier(.5,0,.5,1) infinite}.think p{margin-top:10px}
@keyframes spin{50%{transform:rotate(12deg) scale(1.06)}}

/* the 10 words */
.words{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 16px}
.words li{transform:rotate(var(--r))}#app.pop .words li{animation:pop .45s cubic-bezier(.2,1.6,.4,1) both;animation-delay:var(--d)}
@keyframes pop{from{transform:scale(.3) rotate(0);opacity:0}}
.w{position:relative;width:100%;min-height:62px;padding:10px 10px;border-radius:20px;background:var(--paper);color:var(--deep);font:800 17px/1.15 var(--b);box-shadow:0 5px 0 #c9b9a0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow-wrap:anywhere;transition:transform .1s,opacity .2s}
.w:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #c9b9a0}
.w i{font-style:normal;position:absolute;top:-10px;right:-6px;font-size:22px;filter:drop-shadow(1px 2px 0 #0006)}
.w.bomb{background:var(--c0);color:#fff;box-shadow:0 5px 0 #a3263d}
.w.gold{background:var(--gold);color:var(--deep);box-shadow:0 5px 0 #b8860b,0 0 18px #ffc52f88}
.w small{font:400 11px var(--d);color:var(--deep);background:var(--tc);border-radius:8px;padding:2px 7px;margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w small.none{background:#0002;color:inherit;opacity:.7;font:700 12px var(--b)}
.words.guess .w.got:not(.bomb):not(.gold),.words.reveal .w.got:not(.bomb):not(.gold){background:#2ee6a62b;color:var(--ink);box-shadow:0 5px 0 #0005;outline:2px solid #2ee6a666;outline-offset:-2px}

.words.guess .w.got span{text-decoration:line-through;text-decoration-thickness:3px}
.words .w:disabled{cursor:default}
.words.reveal .w:not(.got){outline:2px dashed #ffffff33;outline-offset:-2px;background:#ffffff1f;color:var(--ink);box-shadow:0 5px 0 #0005}
.words.reveal .w.bomb:not(.got){background:#ff4d6d55}.words.reveal .w.gold:not(.got){background:#ffc52f55}

/* guessing header */
.gtop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.gname{font:400 clamp(26px,8vw,40px)/1 var(--d);text-shadow:2px 2px 0 var(--tc),4px 4px 0 #0006;margin:4px 0 6px;overflow-wrap:anywhere}
.next{flex:none;text-align:center;background:var(--c1);color:var(--deep);border-radius:18px;padding:8px 12px;transform:rotate(3deg);box-shadow:0 5px 0 #a88a00}
.next small{display:block;font:800 11px var(--b);text-transform:uppercase;letter-spacing:.06em}.next b{font:400 30px/1 var(--d)}
.sub{font:400 16px var(--d);margin:6px 0 10px}

/* scores */
.rank{list-style:none;padding:0;display:grid;gap:8px;margin:0 0 16px}
.rank li{display:flex;align-items:center;gap:10px;background:#0003;border-radius:14px;padding:10px 14px;border-left:6px solid var(--tc)}
.rank span{flex:1;font-weight:800;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank b{font:400 22px var(--d)}
.rank em{font-style:normal;font-weight:800;font-size:15px;padding:2px 8px;border-radius:8px}.rank em.up{background:#2ee6a633;color:var(--ok)}.rank em.down{background:#ff3b5c33;color:#ff8da0}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:200px;margin:10px 0 20px}
.pod{flex:1;max-width:150px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center}
.pod b{font:400 24px var(--d)}.pod small{font-weight:800;margin-bottom:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb{width:100%;height:var(--h);background:var(--tc);border-radius:16px 16px 6px 6px;display:grid;place-items:start center;padding-top:8px;font-size:28px;box-shadow:0 6px 0 #0005;animation:grow .8s cubic-bezier(.2,1.4,.4,1)}
@keyframes grow{from{height:0}}

/* effects */
.fl{position:fixed;left:50%;top:38%;z-index:60;font:400 clamp(44px,13vw,96px) var(--d);pointer-events:none;-webkit-text-stroke:3px #1a1033;paint-order:stroke fill;animation:fl 1.1s forwards;white-space:nowrap}
.fl.ok{color:var(--ok)}.fl.no{color:var(--no)}.fl.go{color:var(--c1)}.fl.gold{color:var(--gold)}
@keyframes fl{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15);opacity:1}70%{transform:translate(-50%,-60%) scale(1);opacity:1}100%{transform:translate(-50%,-90%) scale(.9);opacity:0}}
#flash{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;background:radial-gradient(circle,transparent 40%,var(--fc,#fff) 130%)}#flash.go{animation:fh .5s}@keyframes fh{from{opacity:.85}}
.boom{position:fixed;left:50%;top:40%;z-index:65;width:min(80vw,380px);aspect-ratio:1.3;transform:translate(-50%,-50%);pointer-events:none;display:grid;place-items:center;animation:boom 1.4s forwards}
.boom svg{position:absolute;inset:0;width:100%;height:100%}
.boom b{position:relative;font:400 clamp(44px,14vw,84px) var(--d);color:#fff7e8;-webkit-text-stroke:3px #1a1033;paint-order:stroke fill;transform:rotate(-6deg)}
@keyframes boom{0%{transform:translate(-50%,-50%) scale(.2) rotate(-20deg)}18%{transform:translate(-50%,-50%) scale(1.1) rotate(4deg)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
.shake{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-10px) rotate(-1deg)}40%{transform:translateX(9px) rotate(1deg)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

/* footer and dialogs */
.foot{max-width:640px;margin:20px auto 0;padding-block:22px calc(30px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-top:2px solid #ffffff1c;text-align:center;color:var(--mut);font-size:14px}
body.playing .foot{display:none}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-bottom:14px}
.foot nav button{color:var(--ink);font:800 15px var(--b);text-decoration:underline;text-underline-offset:4px;padding:6px 2px}
.foot p{margin-bottom:6px}.small{font-size:13px;color:var(--mut);max-width:60ch;margin-left:auto;margin-right:auto}
dialog{margin:auto;position:fixed;inset:0;height:fit-content;width:min(640px,calc(100% - 28px));max-height:86vh;max-height:86dvh;padding:0;border:2px solid #ffffff2a;border-radius:24px;background:#1d1240;color:var(--ink);overflow:hidden}
dialog::backdrop{background:#0a0420cc;backdrop-filter:blur(4px)}
.dlgb{padding:22px;max-height:86vh;max-height:86dvh;overflow-y:auto;overscroll-behavior:contain;line-height:1.55}
.dlgb h2{font:400 24px var(--d);margin-bottom:6px}.dlgb h3{font:800 17px var(--b);margin:16px 0 4px}.dlgb p,.dlgb li{margin-bottom:8px;color:#e4dcf7}.dlgb .small{margin-left:0}
.dlgb ol{padding-left:22px;margin-bottom:8px}
.dlgb a{color:var(--c1)}
.dlgb .rank{margin-top:10px}
.dclose{margin-top:18px;padding:12px 28px;border-radius:14px;background:var(--c1);color:#241447;font:400 18px var(--d)}
.drow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}.drow .dclose{margin-top:0}
.dlgb a.dclose{display:inline-block;text-decoration:none;color:#241447}
.dlgb .dred{background:var(--no);color:#fff}
.dlgb .dsec{background:#ffffff1f;color:var(--ink)}.dlgb a.dsec{color:var(--ink)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}