/* Clown Games fun layer. To remove: delete this file, assets/js/games.js and their two tags in games/**/index.html. */
@keyframes gin{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes gpop{0%{transform:scale(.55);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes gfloat{50%{transform:translateY(-6px) rotate(1.5deg)}}
@keyframes gshake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes gglow{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 28%,transparent)}}
@keyframes gbeat{50%{transform:scale(1.07);opacity:.65}}
@keyframes gwait{50%{filter:brightness(1.4)}}
@keyframes ggo{0%{transform:scale(.93)}60%{transform:scale(1.03)}100%{transform:none}}
@keyframes gbar{from{transform:scaleY(0)}}
@keyframes gtg{from{transform:scale(0)}}
@keyframes gring{from{transform:scale(2.3);opacity:.15}to{transform:scale(1);opacity:.9}}
@keyframes grip{to{width:90px;height:90px;opacity:0}}
@keyframes gfl{to{transform:translate(-50%,-46px);opacity:0}}
@keyframes gban{0%{opacity:0;transform:scale(2)}30%,75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.95)}}
@keyframes gconf{to{transform:translate(var(--dx),105vh) rotate(var(--r))}}
@keyframes gghost{50%{background-position:center 42%}}
.arcade #app{position:relative}
.arcade .hero-t{animation:gin .5s both}.arcade .hero .panel{animation:gin .6s .1s both}
/* companion strip */
.gz{display:grid;gap:14px;margin-top:18px;max-width:44ch}
.gz-top{display:flex;align-items:flex-end;gap:12px}
.gz-m{width:112px;height:auto;flex:none;animation:gfloat 5s ease-in-out infinite;filter:drop-shadow(0 10px 14px #0008)}
.gz-m.g-pop img{animation:gpop .45s both}
.gz-b{margin:0;font-size:.95rem;max-width:30ch}.gz-b.g-pop{animation:gpop .4s both}
.gz-how{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.gz-how li{display:flex;gap:10px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--bg2) 85%,transparent);font-size:.88rem;color:var(--ink);animation:gin .5s both}
.gz-how li:nth-child(2){animation-delay:.12s}.gz-how li:nth-child(3){animation-delay:.24s}
.gz-how b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--bg);font-size:.8rem}
.gz-bar{display:flex;gap:8px;flex-wrap:wrap}.gz-snd[aria-pressed=false]{opacity:.6}
.gz-more{display:flex;flex-wrap:wrap;gap:6px}
.gz-more a{font-size:.75rem;padding:5px 10px;border:1px dashed var(--line);border-radius:999px;color:var(--mut);text-decoration:none;transition:.15s}
.gz-more a:hover,.gz-more a:focus-visible{color:var(--ink);border-color:var(--accent);transform:translateY(-2px)}
.study .gz{display:none}
/* controls */
#app .btn{transition:transform .15s,box-shadow .15s,background .15s}
#app .btn:active{transform:scale(.95)}
#go:not(:disabled){animation:gglow 1.8s infinite}
#app [data-n].on,#app #df .on{background:var(--accent)!important;color:var(--bg)!important;border-color:var(--accent)!important;transform:translateY(-2px)}
#app.g-run{box-shadow:0 0 0 2px var(--accent),0 0 40px color-mix(in srgb,var(--accent) 40%,transparent)}
#app.g-run #d{animation:gbeat 1s ease-in-out infinite}
.g-shake{animation:gshake .45s}
/* result card */
.g-res{margin-top:12px;padding:14px;border:1px dashed var(--accent2);border-radius:12px;text-align:center;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.g-res[hidden]{display:none}.g-res.g-pop{animation:gpop .45s both}
.g-st svg{width:34px;height:34px;fill:none;stroke:var(--mut);stroke-width:1.5;margin:0 2px}
.g-st svg.on{fill:var(--accent2);stroke:var(--accent2);animation:gpop .5s var(--d) both;filter:drop-shadow(0 0 8px var(--accent2))}
.g-rk{display:block;font-size:1.15rem;color:var(--accent2);text-transform:uppercase;letter-spacing:.08em}
.g-mt{position:relative;height:14px;margin:20px 10px 28px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2) 50%,var(--accent))}
.g-tg{position:absolute;left:50%;top:-5px;bottom:-5px;width:3px;background:var(--ink);transform:translateX(-50%)}
.g-dot{position:absolute;left:50%;top:50%;width:22px;height:22px;border-radius:50%;background:var(--ink);border:3px solid var(--bg);transform:translate(-50%,-50%);transition:left .9s cubic-bezier(.2,1.4,.4,1)}
.g-mt span{position:absolute;top:20px;font-size:.7rem;color:var(--mut)}.g-mt .g-e{left:0}.g-mt .g-l{right:0}
.g-bars{display:flex;align-items:flex-end;justify-content:center;gap:8px;height:80px;margin-top:10px}
.g-bars i{position:relative;width:34px;background:var(--accent);border-radius:4px 4px 0 0;transform-origin:bottom;animation:gbar .6s var(--d) both}
.g-bars em{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font:.62rem ui-monospace,monospace;color:var(--mut);font-style:normal}
/* reaction */
#zone{position:relative;overflow:hidden;transition:background .2s,transform .15s}
#zone:not(.wait):not(.go){background:radial-gradient(circle at 50% 130%,color-mix(in srgb,var(--accent) 28%,var(--bg)),var(--bg))}
#zone:active{transform:scale(.99)}#zone.wait{animation:gwait 1.2s ease-in-out infinite}
#zone.go{animation:ggo .3s ease-out;font-size:2.4rem;font-weight:700;letter-spacing:.1em;color:#fff}
#zone.wait{color:#fff}
.g-dots{display:flex;gap:10px;justify-content:center;margin:12px 0}
.g-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);transition:.25s}
.g-dots i.on{background:var(--accent2);border-color:var(--accent2);transform:scale(1.25);box-shadow:0 0 10px var(--accent2)}
/* invisible clock */
.dark-out{position:relative;min-height:150px;border-radius:14px;border:1px solid var(--line);background:#000 url(../img/haunted-ghost.webp) center 55%/auto 85% no-repeat;animation:gghost 3s ease-in-out infinite}
.dark-out::after{content:"count in your head...";position:absolute;left:0;right:0;bottom:10px;text-align:center;font:italic .85rem ui-monospace,monospace;color:#9a8fb5;letter-spacing:.05em;text-shadow:0 0 6px #000}
/* clock reading */
.g-prog{position:relative;height:10px;margin:14px 0 30px;border-radius:99px;background:var(--bg);border:1px solid var(--line)}
.g-prog[hidden]{display:none}
.g-prog i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .5s}
.g-prog::after{content:attr(data-t);position:absolute;top:16px;left:0;font-size:.78rem;color:var(--mut)}
#q svg{display:block;margin:0 auto;animation:gpop .5s both}#q h2{animation:gpop .6s both;font-size:3rem;text-align:center}
.opts{counter-reset:o}.opts .btn{position:relative;font-size:1.2rem;padding:14px;counter-increment:o}
.opts .btn::before{content:counter(o);position:absolute;left:8px;top:5px;font-size:.62rem;opacity:.6}
.opts .btn.g-ok{background:#1f7a46;color:#fff;border-color:#1f7a46;animation:gpop .3s}
.opts .btn.g-no{background:#7a1f2b;color:#fff;border-color:#7a1f2b;animation:gshake .4s}
.g-again{display:block;margin:14px auto 0}
/* beat the clock */
#field{cursor:crosshair;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px}
.tg{animation:gtg .3s both;transition:transform .1s}.tg:hover{transform:scale(1.1)}.tg:active{transform:scale(.85)}
.tg::after{content:"";position:absolute;inset:-14px;border:3px solid var(--accent2);border-radius:50%;pointer-events:none;animation:gring 1.6s linear both}
.g-time{height:8px;margin:6px 0 10px;border-radius:99px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.g-time[hidden]{display:none}.g-time i{display:block;height:100%;width:100%;background:var(--accent2);transition:width .1s linear}
.g-time.low i{background:var(--accent);animation:gbeat .5s infinite}
.g-rip{position:absolute;width:20px;height:20px;border:3px solid var(--accent2);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:5;animation:grip .5s ease-out forwards}
.g-fl{position:absolute;z-index:6;pointer-events:none;transform:translateX(-50%);color:var(--accent2);font:700 1.1rem ui-monospace,monospace;animation:gfl .9s ease-out forwards}
.g-ban{position:absolute;left:0;right:0;top:40%;z-index:7;text-align:center;pointer-events:none;font:700 clamp(2rem,8vw,4rem) ui-monospace,monospace;letter-spacing:.2em;color:var(--accent);text-shadow:0 0 20px var(--accent);animation:gban 1s both}
.g-conf{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden}
.g-conf i{position:absolute;top:-20px;border-radius:2px;animation:gconf 2s ease-in forwards}
/* arcade index */
.tiles .tile{animation:gin .5s both}.tile:nth-child(2){animation-delay:.08s}.tile:nth-child(3){animation-delay:.16s}.tile:nth-child(4){animation-delay:.24s}.tile:nth-child(5){animation-delay:.32s}
.tile svg{animation:gfloat 4s ease-in-out infinite}.tile:nth-child(even) svg{animation-delay:-2s}
.det.g-flash{animation:gin .35s both}.tc .bubble.g-pop{animation:gpop .4s both}#dgo{animation:gglow 1.8s infinite}
/* theme alignment: game pages follow the chosen theme (Midnight Clown and Haunted keep the neon arcade look) */
[data-theme=paper] .arcade{--bg:#f6f2ea;--bg2:#ebe5d8;--ink:#26222e;--mut:#6d6678;--accent:#7d62b8;--accent2:#c2557d;--line:#0000001a}
[data-theme=velvet] .arcade{--bg:#0c0b0a;--bg2:#17140f;--ink:#f3ead5;--mut:#a39a82;--accent:#c9a54c;--accent2:#e8d9a8;--line:#c9a54c33}
[data-theme=electric] .arcade{--bg:#0d1030;--bg2:#161b4a;--ink:#e8ecff;--mut:#8f98d4;--accent:#3db9ff;--accent2:#9a6bff;--line:#6f7cff33}
[data-theme=forest] .arcade{--bg:#07140d;--bg2:#17291f;--ink:#ece8dc;--mut:#98a692;--accent:#9dbf9a;--accent2:#d6b98a;--line:#ffffff1a}
[data-theme=mono] .arcade{--bg:#000;--bg2:#111;--ink:#fff;--mut:#999;--accent:#fff;--accent2:#bbb;--line:#ffffff2a}
[data-theme=paper] .tile,[data-theme=velvet] .tile,[data-theme=electric] .tile,[data-theme=forest] .tile,[data-theme=mono] .tile,[data-theme=paper] .det,[data-theme=velvet] .det,[data-theme=electric] .det,[data-theme=forest] .det,[data-theme=mono] .det{background:var(--bg2)}
[data-theme=paper] .arcade::after{opacity:.25}
[data-theme=paper] .btn,[data-theme=velvet] .btn,[data-theme=electric] .btn,[data-theme=forest] .btn{color:var(--bg)}
[data-theme=paper] .btn.ghost,[data-theme=velvet] .btn.ghost,[data-theme=electric] .btn.ghost,[data-theme=forest] .btn.ghost,[data-theme=mono] .btn.ghost{color:var(--ink)}
[data-theme=mono] #app [data-n].on,[data-theme=mono] #app #df .on{color:#000!important}
@media(max-width:800px){.gz{max-width:none}.gz-m{width:92px}}