:root { --navy:#192649; --sand:#FBF9F4; --m:clamp(16px,2.2vw,32px); --head:'Bricolage Grotesque',system-ui,sans-serif; --ink:var(--navy); }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:#74B860; color:var(--ink); font:500 clamp(17px,1.35vw,21px)/1.42 Inter,system-ui,sans-serif; overflow-x:hidden; transition:color .5s linear; }
body.night { --ink:var(--sand); color:var(--sand); }
h1,h2,p { margin:0; } img,video { display:block; max-width:100%; height:auto; }
h2,.last,.statement { font-family:var(--head); font-weight:800; letter-spacing:-.03em; line-height:1.02; }
h2 { font-size:clamp(30px,3.7vw,60px); }
#world { position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
a { color:inherit; } :focus-visible { outline:3px solid currentColor; outline-offset:3px; }
.over-ad .home { opacity:0; pointer-events:none; }
.home { position:fixed; z-index:5; left:var(--m); top:clamp(12px,1.4vw,20px); color:var(--navy); transition:color .5s linear, opacity .2s linear; }
body.night .home { color:var(--sand); }
.logo { width:clamp(96px,8vw,128px); height:auto; display:block; }
main { position:relative; z-index:2; }
.stop { position:relative; pointer-events:none; }
.pin { position:sticky; top:0; height:100svh; padding:var(--m); display:flex; align-items:center; pointer-events:none; }
.pin > * { pointer-events:auto; }
.hero { height:140svh; }
.say { height:200svh; }
.say .pin { justify-content:center; }
.ads { height:210svh; }
.film { height:320svh; }
.ads:not(.animated) { height:340svh; }
.ads.flip .pin { justify-content:flex-end; }
.ads.flip .words { margin:0 clamp(0px,1.2vw,20px) 0 0; }
.close { height:170svh; }
.sky { height:420svh; }
#scale { height:260svh; }
#scale .words { text-shadow:0 0 22px #000, 0 0 6px #000; }
.words { width:100%; }
.words p { margin-top:.6em; }
.say .words { max-width:min(34em,52vw); text-align:center; }
.big-say .words { max-width:min(40em,50vw); }
.statement { font-size:clamp(24px,2.5vw,42px); line-height:1.12; margin:0 !important; }
.small { font-size:16px; font-weight:600; }
.ads .words { max-width:23vw; margin-left:clamp(0px,1.2vw,20px); }
.film .words { max-width:min(22em,26vw); margin-left:clamp(16px,5vw,80px); }
#nan .words { color:#FFFDF8; }
.film h2 { font-size:clamp(28px,3vw,48px); }
.close .words { max-width:min(50em,70vw); }
.last { font-size:clamp(38px,6.4vw,104px); }
.player { position:fixed; left:0; top:0; z-index:3; background:var(--navy); width:360px; height:640px; transform-origin:0 0; visibility:hidden; pointer-events:auto; }
.pair { display:none; }
@media (min-aspect-ratio:9/10) { #job .pin { justify-content:flex-start; } #job .words { width:auto; max-width:40vw; margin-left:33vw; } #job.phone-right .pin { justify-content:flex-end; } #job.phone-right .words { margin:0 33vw 0 0; } }
body.night .film .words { text-shadow:0 1px 10px rgba(5,10,24,.75), 0 0 2px rgba(5,10,24,.5); }
@media (min-aspect-ratio:9/10) { #game .words { max-width:min(22em,21vw); margin-left:clamp(16px,3vw,48px); } }
.lead { font:600 clamp(18px,1.7vw,26px)/1.2 Inter,system-ui,sans-serif; margin:0 0 .5em !important; }
.close .last { margin-top:0 !important; }
.endcount { font:800 clamp(18px,1.9vw,28px)/1.2 var(--head); color:#FFC92E; margin-top:.8em !important; }
.play { position:fixed; left:0; top:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:0; border:0; background:rgba(25,38,73,.16); color:var(--navy); cursor:pointer; visibility:hidden; transform-origin:0 0; font-family:var(--head); }
.play[hidden] { display:none; }
.disc { position:relative; display:grid; place-items:center; width:clamp(64px,6.6vw,96px); aspect-ratio:1; border-radius:50%; background:#FFC92E; box-shadow:inset 0 -6px 0 rgba(160,105,10,.35), inset 0 4px 0 rgba(255,255,255,.45), 0 6px 0 #BC8A10, 0 12px 18px rgba(25,38,73,.3); animation:bop 1.5s steps(1) infinite; }
.disc svg { width:52%; fill:var(--navy); margin-left:6%; }
.disc::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:4px solid #FFC92E; animation:ring 1.5s steps(9) infinite; }
.cue { padding:.5em .85em .55em; border-radius:16px; background:#FFC92E; font-weight:800; font-size:clamp(15px,1.3vw,20px); line-height:1.05; text-align:center; box-shadow:0 4px 0 #BC8A10; transform:rotate(-2deg); }
.cue small { display:block; margin-top:.25em; font:700 .62em/1 Inter,system-ui,sans-serif; letter-spacing:.02em; }
@keyframes bop { 0%,100% { transform:rotate(-5deg) scale(1); } 50% { transform:rotate(5deg) scale(1.07); } }
@keyframes ring { from { transform:scale(1); opacity:.8; } to { transform:scale(1.7); opacity:0; } }
@media (hover:hover) and (pointer:fine) { .play:hover .disc { background:#FFD65A; } .play:hover .cue { background:#FFD65A; } }
.play:focus-visible { outline:3px solid #FFC92E; outline-offset:3px; }
#lightbox video:focus { outline:0; }
.dogspot { position:fixed; left:0; top:0; z-index:4; width:110px; height:110px; padding:0; border:0; border-radius:50%; background:none; cursor:grab; visibility:hidden; touch-action:none; -webkit-user-select:none; user-select:none; }
.dogspot:active { cursor:grabbing; }
.dogspot:focus-visible { outline:3px solid #FFC92E; }
.over-egg, .over-egg body { cursor:pointer; }
#pops { position:fixed; inset:0; z-index:4; pointer-events:none; }
.pop { position:absolute; left:0; top:0; padding:.42em .75em; border-radius:14px 14px 14px 3px; background:#FFFDF8; color:var(--navy); font:800 clamp(14px,1.2vw,18px)/1.1 var(--head); box-shadow:0 3px 0 rgba(25,38,73,.28); white-space:nowrap; animation:poppop .22s cubic-bezier(.23,1,.32,1); }
@keyframes poppop { from { opacity:0; scale:.8; } }
#eggcount { position:fixed; right:var(--m); bottom:16px; z-index:4; padding:.6em .9em; border:0; border-radius:99px; background:#FFC92E; color:var(--navy); font:800 13px/1 var(--head); box-shadow:0 3px 0 #BC8A10; cursor:pointer; }
@media (hover:hover) and (pointer:fine) { #eggcount:hover, .endsee:hover { background:#FFD65A; } }
.endsee { display:inline-block; margin:.9em 0 .3em; padding:.55em .95em; border:0; border-radius:99px; background:#FFC92E; color:var(--navy); font:800 clamp(15px,1.3vw,19px)/1 var(--head); box-shadow:0 4px 0 #BC8A10; cursor:pointer; }
#confetti { position:fixed; inset:0; width:100%; height:100%; z-index:7; pointer-events:none; }
#allfound { position:fixed; inset:0; z-index:8; width:min(560px,calc(100vw - 32px)); height:fit-content; margin:auto; padding:clamp(24px,4vw,44px); border-radius:28px; background:var(--navy); color:#FFFDF8; text-align:center; box-shadow:0 10px 0 #080C18, 0 24px 60px rgba(25,38,73,.4); animation:allin .4s cubic-bezier(.23,1,.32,1); }
#allfound[hidden] { display:none; }
#allfound h2 { font-size:clamp(38px,5.4vw,68px); color:#FFC92E; text-wrap:balance; }
#allfound .allline { margin-top:.5em; font:800 clamp(19px,2vw,27px)/1.15 var(--head); letter-spacing:-.02em; }
.allbtns { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 18px; margin-top:.5em; }
.allclose { padding:.55em .4em; border:0; background:none; color:#FFFDF8; font:700 clamp(15px,1.3vw,19px)/1 var(--head); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.in-game #allfound { visibility:hidden; }
@keyframes allin { from { opacity:0; transform:translateY(-44px) scale(1.05); } 70% { opacity:1; transform:translateY(0) scale(1.03,.96); } }
#found { width:min(1020px,94vw); max-height:92svh; padding:clamp(18px,3vw,34px); border:0; border-radius:28px; background:#E37656; color:var(--navy); overflow:auto; overscroll-behavior:contain; box-shadow:0 10px 0 #BC5A3E, 0 24px 60px rgba(25,38,73,.4); }
#found[open] { animation:boxin .22s cubic-bezier(.23,1,.32,1); }
#found::backdrop { background:rgba(25,38,73,.72); }
#found h2 { font-size:clamp(30px,3.8vw,54px); padding-right:90px; }
.ftally { margin:.2em 0 .9em; font:700 clamp(16px,1.5vw,21px)/1.1 var(--head); }
.fclose { position:absolute; right:clamp(14px,2vw,26px); top:clamp(14px,2vw,26px); padding:.55em .95em; border:0; border-radius:99px; background:#FFC92E; color:var(--navy); font:800 15px/1 var(--head); box-shadow:0 3px 0 #BC8A10; cursor:pointer; }
.fgrid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(8px,1.4vw,16px); }
.fgrid li { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 8px 12px; border-radius:18px; background:rgba(255,253,248,.2); text-align:center; }
.fgrid img { width:100%; max-width:150px; height:auto; aspect-ratio:1; }
.fgrid .nope img { filter:brightness(0); opacity:.62; }
.fgrid b { font:800 clamp(15px,1.3vw,18px)/1.1 var(--head); }
.fgrid small { font:600 12.5px/1.25 Inter,system-ui,sans-serif; }
.fgrid .nope b, .fgrid .nope small { opacity:.7; }
.gstart { display:inline-block; margin-top:1em; padding:.62em 1em; border:0; border-radius:99px; background:#FFC92E; color:var(--navy); font:800 clamp(16px,1.4vw,21px)/1 var(--head); cursor:pointer; box-shadow:0 4px 0 #BC8A10; pointer-events:auto; }
@media (hover:hover) and (pointer:fine) { .gstart:hover { background:#FFD65A; } }
.in-game main, .in-game .view, .in-game .play, .in-game .dogspot, .in-game .home, .in-game #pops, .in-game #eggcount { visibility:hidden !important; }
#zeroGame { position:fixed; inset:0; z-index:6; overflow:hidden; color:var(--navy); outline:0; touch-action:none; cursor:default; }
#zeroGame[hidden] { display:none; }
.gmeter { position:absolute; left:var(--m); top:18px; padding:.5em .8em; border-radius:99px; background:#FFFDF8; font:800 clamp(15px,1.3vw,19px)/1 var(--head); box-shadow:0 3px 0 rgba(25,38,73,.28); }
.gmeter b { color:#E41522; font-size:1.25em; }
.gmeter b { display:inline-block; min-width:2.6em; font-variant-numeric:tabular-nums; }
.gbar { display:none; width:clamp(84px,14vw,210px); height:.72em; border-radius:99px; background:rgba(25,38,73,.16); overflow:hidden; }
.gbar i { display:block; height:100%; border-radius:99px; background:#E41522; transform-origin:0 50%; }
.draining .gmeter { display:flex; align-items:center; gap:.5em; }
.draining .gbar { display:block; }
.gquit { position:absolute; right:var(--m); top:18px; padding:.55em .9em; border:0; border-radius:99px; background:#FFC92E; color:var(--navy); font:800 15px/1 var(--head); cursor:pointer; box-shadow:0 3px 0 #BC8A10; }
.gtitle { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,3svh,30px); padding:60px 16px 24px; background:#E37656; text-align:center; transition:opacity .26s linear, visibility .26s; pointer-events:none; }
.gtitle.off { opacity:0; visibility:hidden; }
.gsub { display:inline-block; padding:.5em .9em; border-radius:99px; background:var(--navy); color:#FFFDF8; font:700 clamp(15px,1.6vw,23px)/1.15 Inter,system-ui,sans-serif; animation:lockup-rise .28s .62s cubic-bezier(.23,1,.32,1) backwards; }
.lockup { --u:min(16.5vw,13.5svh); display:flex; flex-direction:column; align-items:center; color:var(--navy); font-family:var(--head); font-weight:800; line-height:.92; letter-spacing:-.03em; }
.lockup .lw { position:relative; z-index:1; font-size:calc(var(--u) * .72); animation:lockup-rise .26s cubic-bezier(.23,1,.32,1) backwards; }
.lockup img { position:relative; z-index:2; width:calc(var(--u) * 2.75); height:auto; margin:calc(var(--u) * -.12) 0 calc(var(--u) * -.3); animation:lockup-drop .34s .16s cubic-bezier(.23,1,.32,1) backwards; }
.lockup .li { position:relative; z-index:1; font-size:calc(var(--u) * 1.02); animation:lockup-rise .26s .08s cubic-bezier(.23,1,.32,1) backwards; }
@keyframes lockup-rise { from { opacity:0; transform:translateY(24px); } }
@keyframes lockup-drop { from { opacity:0; transform:translateY(-50svh) scale(1.08); } 70% { opacity:1; transform:translateY(0) scale(1.06,.9); } }
.gresult .lockup { --u:min(14vw,10.5svh); color:#FFFDF8; }
.gbubble { position:absolute; left:50%; top:9svh; max-width:min(82vw,720px); translate:-50% 0; padding:.62em 1em; border-radius:26px; background:#FFFDF8; font:800 clamp(24px,3.1vw,48px)/1.08 var(--head); letter-spacing:-.02em; text-align:center; box-shadow:0 7px 0 rgba(25,38,73,.25); animation:bubblein .26s cubic-bezier(.23,1,.32,1); pointer-events:none; }
.gbubble[hidden], .gstamp[hidden], .gresult[hidden] { display:none; }
.gbubble::after { content:''; position:absolute; left:50%; bottom:-20px; width:30px; height:30px; background:#FFFDF8; translate:-50% 0; rotate:45deg; border-radius:0 0 8px 0; }
@keyframes bubblein { from { opacity:0; scale:.82; translate:-50% 12px; } }
.gstamp { position:absolute; left:50%; top:42svh; padding:.3em .55em; border:6px solid #E41522; border-radius:14px; background:rgba(255,253,248,.92); color:#E41522; font:800 clamp(28px,5vw,74px)/1 var(--head); letter-spacing:-.02em; white-space:nowrap; translate:-50% 0; rotate:-7deg; animation:stampin .2s cubic-bezier(.23,1,.32,1); pointer-events:none; }
@keyframes stampin { from { opacity:0; scale:1.5; } }
.gresult { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7em; padding:24px; background:rgba(25,38,73,.72); color:#FFFDF8; text-align:center; animation:boxin .24s cubic-bezier(.23,1,.32,1); }
.gresult p { margin:0; }
.bigline { font:800 clamp(38px,6.6vw,104px)/1 var(--head); letter-spacing:-.03em; max-width:15em; }
.smallline { font:700 clamp(17px,2vw,28px)/1.2 var(--head); max-width:30em; }
.terms { font:500 clamp(11px,.9vw,13px)/1.35 Inter,system-ui,sans-serif; max-width:42em; opacity:.92; }
.gbtns { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:.8em; }
.gbtns button { padding:.62em 1em; border:0; border-radius:99px; background:#FFC92E; color:var(--navy); font:800 clamp(16px,1.4vw,21px)/1 var(--head); cursor:pointer; box-shadow:0 4px 0 #BC8A10; }
.gbtns .leave { background:#FFFDF8; box-shadow:0 4px 0 rgba(0,0,0,.25); }
.gbtns button:focus-visible, .gquit:focus-visible, .gstart:focus-visible { outline:3px solid currentColor; outline-offset:3px; }
.roundup { --h:min(29svh,17vw); position:relative; z-index:2; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(12px,2.2svh,24px); padding:clamp(56px,7svh,76px) var(--m) clamp(24px,4svh,40px); background:#080C18; color:var(--sand); pointer-events:auto; }
.roundup h2 { font-size:clamp(30px,3.2vw,48px); }
.ru-sets { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,1.6svh,20px) clamp(14px,1.6vw,26px); }
.ru-group h3 { margin:0 0 .45em; font:800 clamp(14px,1.1vw,17px)/1 var(--head); color:#FFC92E; }
.ru-row { display:flex; flex-wrap:wrap; gap:clamp(6px,.6vw,10px); }
.ru { position:relative; display:block; width:calc(var(--h) * .8); height:var(--h); padding:0; border:0; border-radius:6px; overflow:hidden; background:#192649; cursor:pointer; transition:transform .18s cubic-bezier(.23,1,.32,1); }
.ru.tall { width:calc(var(--h) * .5625); }
.ru-boards { flex-basis:100%; } .ru-boards h3 { text-align:center; } .ru-boards .ru-row { display:grid; grid-template-columns:repeat(3,calc(var(--h) * 1.1)); justify-content:center; }
.ru.wide { width:100%; height:auto; aspect-ratio:2; }
.ru img, .ru video { display:block; width:100%; height:100%; object-fit:cover; }
.ru-play { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:clamp(30px,3vw,44px); aspect-ratio:1; border-radius:50%; background:#FFC92E; transform:translate(-50%,-50%); box-shadow:0 3px 0 #BC8A10; }
.ru-play svg { width:52%; margin-left:6%; fill:var(--navy); }
@media (hover:hover) and (pointer:fine) { .ru:hover { transform:translateY(-4px) scale(1.03); } }
.ru:focus-visible { outline:3px solid #FFC92E; outline-offset:2px; }
.ru-foot { font-size:15px; font-weight:600; }
.roundup .ru-group { opacity:0; transform:translateY(20px); transition:opacity .3s linear, transform .4s cubic-bezier(.23,1,.32,1); }
.roundup.in .ru-group { opacity:1; transform:none; }
.roundup.in .ru-group:nth-child(2) { transition-delay:.06s; } .roundup.in .ru-group:nth-child(3) { transition-delay:.12s; } .roundup.in .ru-group:nth-child(4) { transition-delay:.18s; } .roundup.in .ru-group:nth-child(5) { transition-delay:.24s; } .roundup.in .ru-group:nth-child(6) { transition-delay:.3s; }
@media (max-aspect-ratio:9/10) { .roundup { --h:min(53vw,34svh); justify-content:flex-start; } .ru-sets { flex-direction:column; align-items:center; } .ru-group { width:100%; max-width:92vw; } .ru-row { justify-content:center; } .ru-boards .ru-row { display:flex; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; } .ru-boards .ru-row::-webkit-scrollbar { display:none; } .ru.wide { flex:0 0 78vw; width:78vw; scroll-snap-align:center; } }
@media (prefers-reduced-motion:reduce) { .roundup .ru-group { opacity:1; transform:none; transition:none; } }
.view { position:fixed; left:0; top:0; z-index:3; padding:0; border:0; background:none; cursor:pointer; visibility:hidden; transform-origin:0 0; }
.view:focus-visible { outline:3px solid #F7B921; outline-offset:4px; }
#lightbox { position:fixed; inset:0; width:100vw; height:100svh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgba(25,38,73,.96); color:var(--sand); overflow:hidden; }
#lightbox[open] { display:flex; align-items:center; justify-content:center; animation:boxin .22s cubic-bezier(.23,1,.32,1); }
#lightbox img, #lightbox video { max-width:100vw; max-height:100svh; width:auto; height:auto; object-fit:contain; }
#lightbox [hidden] { display:none; }
@media (min-aspect-ratio:9/10) { #lightbox img, #lightbox video { height:96svh; } }
@keyframes boxin { from { opacity:0; transform:scale(.98); } }
.shut { position:absolute; right:16px; top:16px; padding:.5em 1em; border:0; border-radius:99px; background:#F7B921; color:var(--navy); font:800 16px/1 var(--head); cursor:pointer; box-shadow:0 3px 0 #BC8A10; }
/* blink and you'll miss it */
.whisper { position:absolute; left:18px; bottom:14px; font:600 12px/1 Inter,system-ui,sans-serif; opacity:0; animation:whisper 6s steps(1) infinite; }
@keyframes whisper { 0%,98% { opacity:0; } 98.8% { opacity:.85; } }
.rise { opacity:0; transform:translateY(22px); transition:opacity .36s steps(5), transform .36s steps(5); }
.rise.in { opacity:1; transform:none; }
.no-gl #world { display:none; }
.no-gl .player { position:static; visibility:visible; width:auto; height:60svh; margin:auto; }
.no-gl .pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:auto; width:50%; }
.no-gl .stop, .no-gl .pin { height:auto; min-height:80svh; position:relative; }
.no-gl .rise { opacity:1; transform:none; }
@media (max-aspect-ratio:9/10) {
  .say { height:190svh; }
  .say .words, .big-say .words { max-width:84vw; }
  .statement { font-size:clamp(21px,5.7vw,30px); }
  .film .pin, .ads .pin { align-items:flex-start; padding-top:clamp(56px,8svh,84px); }
  .film .words, .ads .words { max-width:100%; margin:0; text-align:center; font-size:15px; line-height:1.3; }
  .film .words, .ads .words { text-shadow:0 0 10px rgba(255,255,255,.65); }
  body.night .film .words, body.night .ads .words { text-shadow:0 0 10px rgba(0,0,0,.85); }
  .film h2, .ads h2 { font-size:clamp(23px,6.2vw,32px); }
  .film { height:300svh; } .ads { height:280svh; } .ads:not(.animated) { height:380svh; }
  .close .words { max-width:88vw; }
}
@media (prefers-reduced-motion:reduce) { .rise { opacity:1; transform:none; transition:none; } #lightbox[open], #allfound, .whisper, .disc, .disc::after, .lockup *, .gsub { animation:none; } }