/* Party-game home: teal ink, warm paper, lemon notes and tactile controls. */
body:not(.in-lobby):not(.playing){
 --ui-bg:#aac6d7;--ui-primary:#087f85;--ui-primary-dark:#07515a;--ui-muted:#506677;
 --ui-text:#203b4c;--ui-border:#c5d7dc;--ui-accent:#ffdc65;
 --purple-primary:var(--ui-primary);--purple-dark:var(--ui-primary-dark);
 --text-primary:var(--ui-text);--text-secondary:var(--ui-muted);--postit-yellow:var(--ui-accent);
 --ui-shadow:0 5px 0 #769baa,0 15px 35px #244c6820;
 background-color:#aac6d7;background-image:radial-gradient(ellipse at 85% 10%,#d8e6e2 0,transparent 40%),radial-gradient(ellipse at 0 45%,#c0dcd3 0,transparent 45%),linear-gradient(145deg,#9cbad1,#b1d0d8 65%,#a5c5cf);
 background-size:auto;background-attachment:fixed;
}
body:not(.in-lobby):not(.playing) .remaster-nav{padding-block:23px 12px}
body:not(.in-lobby):not(.playing) .wordmark{font-size:29px;letter-spacing:-1.2px}
body:not(.in-lobby):not(.playing) .brand-note{box-shadow:0 4px 0 #ba9740;transition:transform .25s}
.wordmark:hover .brand-note{transform:rotate(7deg) translateY(-3px)}
body:not(.in-lobby):not(.playing) .nav-links{font-size:14px;color:#294d61}
body:not(.in-lobby):not(.playing) .nav-links .text-indigo-600{color:#075e65}
body:not(.in-lobby):not(.playing) .menu-settings #languageSelector{font-size:13px;min-height:36px;background:#ffffffb0}
body:not(.in-lobby):not(.playing) .menu-settings :is(#soundUnMutedIcon,#soundMutedIcon){width:36px;height:36px;background:#fffaf0;color:#07515a;border:1px solid #aec8cf}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 375px;align-items:center;gap:12px;min-height:230px;padding:0 32px 18px}
.hero-copy{max-width:810px}
#gameDescriptionLabel{font-size:clamp(28px,2.65vw,37px)!important;line-height:1.17;letter-spacing:-1px;font-weight:900;color:#203b4c!important}
#gameDescriptionLabel b{font-size:inherit!important;color:#075e65}
.hero-subtitle{font-size:22px;line-height:1.35;margin-top:8px;color:#355463;font-weight:800;letter-spacing:-.35px}
.hero-intro{font-size:17px;line-height:1.55;margin-top:12px;color:#3c5869}
.hero-intro b{color:#075e65}
/* Reserve no new grid space: the media affordance uses the hero's existing air. */
.hero-copy{transform:translateY(-24px)}
.hero-video-cta{position:absolute;top:calc(100% + 10px);left:0;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;width:max-content;max-width:100%;height:42px;padding:5px 13px 5px 6px;border:1px solid #97bfc1;border-radius:13px;background:#fffdf4;color:#203b4c;font:inherit;font-size:14px;font-weight:800;box-shadow:0 3px 0 #82a9ae,0 5px 13px #244c6814;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.hero-video-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#d8eee8;color:#087f85;transition:transform .18s,background .18s,box-shadow .18s}
.hero-video-icon svg{width:23px;height:23px}.hero-video-play{transition:transform .18s;transform-origin:center}
.hero-video-cta:is(:hover,:focus-visible){transform:translateY(-2px) scale(1.01);border-color:#459c9a;box-shadow:0 5px 0 #82a9ae,0 8px 17px #244c6825}
.hero-video-cta:is(:hover,:focus-visible) .hero-video-icon{transform:rotate(-4deg) scale(1.04);background:#c3ece4;box-shadow:0 0 9px #56bbb54d}
.hero-video-cta:is(:hover,:focus-visible) .hero-video-play{transform:translateX(1px)}
.hero-video-cta:active{transform:scale(.98);transition-duration:.09s;box-shadow:0 1px 0 #82a9ae}
.hero-video-cta:focus-visible,.hero-video-close:focus-visible{outline:3px solid #087f85;outline-offset:4px}
.hero-video-dialog{position:fixed;inset:0;margin:auto;padding:0;border:0;background:transparent;width:min(90vw,1060px,calc((100dvh - 36px)*1.777778 + 4px));max-width:none;max-height:calc(100dvh - 32px);overflow:visible;color:#203b4c;animation:hero-video-in .22s ease-out both}
.hero-video-dialog::backdrop{background:#10283ed9;backdrop-filter:blur(7px);animation:hero-video-backdrop-in .22s ease-out both}
.hero-video-card{position:relative;border:2px solid #fff7d8;border-radius:22px;background:#15293b;box-shadow:0 7px 0 #7895a45c,0 25px 80px #071a3580;overflow:hidden}
.hero-video-card video{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:calc(100dvh - 36px);object-fit:contain;background:#15293b}
.hero-video-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:42px;height:42px;padding:9px;border:1px solid #d8e8df;border-radius:50%;background:#fffdf4;color:#24454a;box-shadow:0 3px 0 #7895a4,0 4px 14px #14293b55;cursor:pointer;transition:transform .18s,background .18s}
.hero-video-close svg{width:100%;height:100%}.hero-video-close:hover{background:#ffe48c;transform:rotate(6deg)}.hero-video-close:active{transform:scale(.95)}
.hero-video-dialog.is-closing{animation:hero-video-out .18s ease-in both}.hero-video-dialog.is-closing::backdrop{animation:hero-video-backdrop-out .18s ease-in both}
@keyframes hero-video-in{from{opacity:0;transform:translateY(9px) scale(.96)}to{opacity:1;transform:none}}
@keyframes hero-video-out{to{opacity:0;transform:translateY(6px) scale(.98)}}
@keyframes hero-video-backdrop-in{from{opacity:0}to{opacity:1}}@keyframes hero-video-backdrop-out{to{opacity:0}}
@media(max-width:640px){
 .hero-copy{transform:none}.hero-video-cta{top:calc(100% + 8px);height:38px;font-size:13px;gap:7px;padding-right:10px;z-index:4}
 .home-avatar-art #home-avatar-scene{transform:translateY(20px)}
 .hero-video-dialog{width:min(calc(100vw - 24px),calc((100dvh - 36px)*1.777778 + 4px))}.hero-video-card{border-radius:16px}.hero-video-close{top:8px;right:8px}
}
@media(prefers-reduced-motion:reduce){
 .hero-video-cta,.hero-video-icon,.hero-video-play,.hero-video-close{transition:none!important}
 .hero-video-cta:is(:hover,:focus-visible,:active),.hero-video-cta:is(:hover,:focus-visible) .hero-video-icon,.hero-video-cta:is(:hover,:focus-visible) .hero-video-play,.hero-video-close:hover,.hero-video-close:active{transform:none}
 .hero-video-dialog,.hero-video-dialog::backdrop{animation:none!important}
}
.home-avatar-art{position:relative;height:235px;isolation:isolate;container-type:inline-size}
.home-avatar-art:before{content:'';position:absolute;inset:20px 12px 17px;background:#e3ead7;border:2px solid #d1dcc7;border-radius:48% 52% 43% 57%;transform:rotate(-8deg);box-shadow:0 5px 0 #89a8ac}
.home-avatar-art:after{content:'';position:absolute;bottom:11px;left:28%;right:28%;height:13px;border-radius:50%;background:#1e566329;filter:blur(4px);z-index:-1}
#home-avatar-scene{position:relative;height:100%;width:100%;z-index:1}
#home-avatar-scene canvas{display:block;width:100%;height:100%}
#home-avatar-scene.avatar-fallback{background:url('../images/remaster/avatar.png') center/contain no-repeat}
.hero-spark{position:absolute;z-index:2;pointer-events:none;font-size:38px;font-weight:900;color:#fff3b2;line-height:1;text-shadow:0 3px 0 #8b805f;animation:party-float 4s ease-in-out infinite}
.spark-one{left:16px;bottom:42px;transform:rotate(-14deg)}.spark-two{right:8px;bottom:38px;font-size:28px;animation-delay:-2s}
.avatar-thought{position:absolute;inset:0;z-index:3;pointer-events:none;contain:layout style}
.avatar-thought[hidden]{display:none}
.avatar-thought-body{position:absolute;left:0;top:0;width:max-content;will-change:transform}
.avatar-thought-card{width:max-content;box-sizing:border-box;max-width:190px;padding:14px 15px 15px;border:2px solid #aaa9d3;border-radius:43% 47% 39% 46% / 36% 42% 38% 43%;background:linear-gradient(150deg,#fffef7 40%,#f7f3e5);color:#28364d;font-family:inherit;font-size:15px;font-weight:800;line-height:1.25;text-align:center;box-shadow:0 3px 0 #b2b4d4,0 7px 14px #30445d1a,inset 0 2px 0 #fff;transform:rotate(var(--thought-tilt,0deg));transform-origin:center;opacity:0}
.avatar-thought-text{display:block;overflow-wrap:break-word;hyphens:auto}
.avatar-thought-dot{position:absolute;left:0;top:0;border:1.5px solid #aaa9d3;background:#fffdf3;border-radius:48% 53% 45% 50%;box-shadow:0 2px 0 #b2b4d4;opacity:0}
.avatar-thought .dot-0{width:5px;height:5px;margin:-2.5px}.avatar-thought .dot-1{width:7px;height:7px;margin:-3.5px}.avatar-thought .dot-2{width:10px;height:10px;margin:-5px}
.avatar-thought[data-state=enter] .avatar-thought-card{animation:thought-pop 280ms 80ms cubic-bezier(.2,.75,.3,1.15) both}
.avatar-thought[data-state=enter] .avatar-thought-dot{animation:thought-dot-in 140ms ease-out both}
.avatar-thought[data-state=enter] .dot-1{animation-delay:30ms}.avatar-thought[data-state=enter] .dot-2{animation-delay:60ms}
.avatar-thought[data-state=visible] .avatar-thought-card,.avatar-thought[data-state=visible] .avatar-thought-dot{opacity:1}
.avatar-thought[data-state=visible] .avatar-thought-float{animation:thought-float 3.2s ease-in-out infinite}
.avatar-thought[data-state=exit] .avatar-thought-card{animation:thought-out 240ms ease-in both}
.avatar-thought[data-state=exit] .avatar-thought-dot{animation:thought-dot-out 180ms ease-in both}
@keyframes thought-pop{0%{opacity:0;transform:translateY(5px) rotate(var(--thought-tilt)) scale(.84)}70%{opacity:1;transform:translateY(-1px) rotate(var(--thought-tilt)) scale(1.045)}100%{opacity:1;transform:translateY(0) rotate(var(--thought-tilt)) scale(1)}}
@keyframes thought-out{from{opacity:1;transform:rotate(var(--thought-tilt)) scale(1)}to{opacity:0;transform:translateY(-3px) rotate(var(--thought-tilt)) scale(.94)}}
@keyframes thought-dot-in{from{opacity:0}to{opacity:1}}@keyframes thought-dot-out{from{opacity:1}to{opacity:0}}
@keyframes thought-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes thought-soft-in{from{opacity:0}to{opacity:1}}@keyframes thought-soft-out{from{opacity:1}to{opacity:0}}
@container(max-width:310px){.home-avatar-art .avatar-thought-card{font-size:13px;padding:11px 6px 12px}}
#loginSection>.grid{gap:22px;grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:0!important}
#loginSection .postitguess-card{padding:24px!important;border:2px solid #f7f4e9!important;border-radius:24px!important;background:#fffdf5!important;box-shadow:0 5px 0 #759aa8,0 18px 40px #244c6826!important;animation:party-enter .6s cubic-bezier(.22,1,.36,1) both}
#loginSection .game-column>.postitguess-card{animation-delay:.08s}
#loginSection .postitguess-card h2{font-size:25px!important;letter-spacing:-.55px;color:#203b4c!important;font-weight:900}
#loginSection .postitguess-card .border-blue{width:39px;height:39px;font-size:23px;background:#d7eeea;border-radius:12px;transform:rotate(-6deg);box-shadow:0 3px 0 #aacfc7}
#loginSection .game-column .border-blue{background:#ffdf78;box-shadow:0 3px 0 #d4b250;transform:rotate(7deg)}
#loginSection label{font-size:14px;line-height:1.5;font-weight:800}
#loginSection :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select){font-size:15px;min-height:45px;background:#edf3f4;border:2px solid #c7d9dd!important;border-radius:12px!important;box-shadow:inset 0 2px 0 #dbe7e8!important}
#loginSection :is(input:not([type=checkbox]):not([type=radio]),select):focus{background:#fff;outline:3px solid #63b8b0;outline-offset:2px}
#loginSection #pseudoId{font-size:18px}
#loginSection :is(input[type=checkbox],input[type=radio]){width:19px;height:19px;accent-color:#087f85;transition:transform .2s}
#loginSection label:hover :is(input[type=checkbox],input[type=radio]){transform:scale(1.12)}
#loginSection :is(#avatarList,#mapsList){grid-auto-flow:column;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;max-height:none;scroll-snap-type:x proximity;scroll-padding-inline:3px;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;padding:6px 3px 4px}
#loginSection :is(#avatarList,#mapsList)::-webkit-scrollbar{display:none;width:0;height:0}
#loginSection :is(#avatarList,#mapsList).collection-wheeling{scroll-snap-type:none}
#loginSection :is(#avatarList,#mapsList)>div{min-width:0;scroll-snap-align:start}
#loginSection #avatarList{grid-template-rows:repeat(2,1fr);grid-auto-columns:calc((100% - 24px)/4);gap:8px;margin-top:13px}
#loginSection #avatarList [onclick]{min-height:138px;background:#eaf1f1;border:2px solid #d5e2e2;border-radius:15px;padding:10px 4px;color:#355460;transition:transform .2s cubic-bezier(.2,1.7,.4,1),box-shadow .2s,background .2s}
#loginSection #avatarList img{height:auto;width:88px;max-width:100%;aspect-ratio:1;border-radius:10px;transition:transform .25s}
#loginSection #avatarList .text-xs{font-size:12px;line-height:1.2;margin-top:5px;font-weight:800}
#loginSection #avatarList [onclick]:hover{transform:translateY(-3px) rotate(-1deg);background:#d9ede8;box-shadow:0 4px 0 #adcac3}
#loginSection #avatarList [onclick]:hover img{transform:scale(1.09) rotate(3deg)}
#loginSection #avatarList .avatar-selected,#loginSection #mapsList .map-selected{background:#fff1b1!important;border-color:#d6af40!important;box-shadow:0 3px 0 #ddbf65!important}
#loginSection :is(#avatarList,#mapsList) svg{fill:#087f85}
#loginSection :is(#avatarList,#mapsList) [onclick]{position:relative}
#loginSection :is(#avatarList,#mapsList) [id^=check-]{position:absolute;top:8px;right:8px;z-index:11}
#loginSection :is(#avatarList,#mapsList) [id^=check-] svg{position:static;left:auto!important;bottom:auto!important;width:25px;height:25px}
#loginSection :is(.avatar-choice-label,.map-choice-label){display:flex;align-items:center;gap:8px}
#loginSection :is(.avatar-choice-label,.map-choice-label) label{margin-right:0}
#loginSection :is(#avatarRandomTooltip,#mapRandomTooltip){display:inline-grid;place-items:center;float:none;flex-shrink:0;margin:0;height:34px;width:34px;background:#ffe293;border:1px solid #e3c465;box-shadow:0 3px 0 #d5b453;border-radius:10px;font-size:21px;transition:transform .2s}
:is(#avatarRandomTooltip,#mapRandomTooltip):hover{animation:party-wiggle .5s ease-in-out}
:is(#avatarRandomTooltip,#mapRandomTooltip):focus-visible{outline:3px solid #087f85;outline-offset:3px}
#loginSection #rangeNumberOfPlayersLabel{background:#d8eeea;color:#07585e;padding:6px 10px;font-size:12px;border:1px solid #b8d9d2;border-radius:9px;transform:rotate(2deg)}
#loginSection .mb-2.flex.flex-wrap.w-full>div.h-6{height:auto;padding:0;margin:0;width:50%}
#loginSection .mb-2.flex.flex-wrap.w-full>div.h-6:first-child{padding-right:8px}
#loginSection label:has(input[name=selectOrJoinTeamRadio]){padding:12px 8px;gap:7px;border:2px solid #c9dbdf;border-radius:12px;background:#eaf2f3;color:#496371;font-size:14px;box-shadow:0 3px 0 #c1d3d7;transition:transform .2s,box-shadow .2s,background .2s}
#loginSection label:has(input[name=selectOrJoinTeamRadio]):hover{transform:translateY(-2px)}
#loginSection label:has(input[name=selectOrJoinTeamRadio]:checked){background:#ffe48c;border-color:#dbb94f;color:#3d493b;box-shadow:0 4px 0 #d2ad48}
#loginSection label:has(input[name=selectOrJoinTeamRadio]) input{width:18px;height:18px}
#loginSection #mapsList{grid-template-rows:1fr;grid-auto-columns:calc((100% - 12px)/2.25);gap:12px;margin-top:9px}
#loginSection #mapsList [onclick]{background:#eaf1f1;border:2px solid #d5e2e2;padding:8px;border-radius:15px;transition:transform .2s,box-shadow .2s}
#loginSection #mapsList [onclick]:hover{transform:translateY(-3px) rotate(1deg);box-shadow:0 4px 0 #adcac3}
#loginSection #mapsList [onclick]>.flex-col>.flex-shrink-0{width:100%}
#loginSection #mapsList img{width:100%;height:auto;aspect-ratio:4/3;border-radius:10px}
#loginSection #mapsList .text-xs{font-size:14px;line-height:1.3;padding-top:8px;font-weight:800}
#loginSection #mapsList [onclick]{height:100%}
.collection-navigation{display:flex;align-items:center;gap:12px;margin-top:0}
.collection-navigation[hidden]{display:none}
.collection-arrow{display:grid;place-items:center;flex-shrink:0;width:34px;height:32px;border:1px solid #bbdad5;border-radius:11px;background:#dceee8;color:#075e65;box-shadow:0 3px 0 #aacdc1;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s}
.collection-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:translate .18s}
.collection-arrow:not(:disabled):hover{background:#ffe293;transform:translateY(-2px);box-shadow:0 5px 0 #d1b461}
.collection-arrow[data-direction=next]:not(:disabled):hover svg{translate:2px 0}.collection-arrow[data-direction=previous]:not(:disabled):hover svg{translate:-2px 0}
.collection-arrow:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 #aacdc1}
.collection-arrow:disabled{opacity:.35;box-shadow:none;cursor:default}
.collection-arrow:focus-visible{outline:3px solid #087f85;outline-offset:3px}
.collection-scroll-rail{position:relative;flex:1;height:22px;border-radius:20px;cursor:pointer;touch-action:none;user-select:none}
.collection-scroll-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:5px;transform:translateY(-50%);background:#dce8e5;border-radius:20px;pointer-events:none}
.collection-scroll-thumb{position:absolute;top:50%;height:7px;transform:translateY(-50%);background:#459c94;border-radius:20px;cursor:grab}
.collection-scroll-thumb::before{content:"";position:absolute;inset:-7px 0}
.collection-scroll-rail:hover .collection-scroll-thumb,.collection-scroll-rail.collection-dragging .collection-scroll-thumb{background:#087f85}
.collection-scroll-rail.collection-dragging,.collection-scroll-rail.collection-dragging .collection-scroll-thumb{cursor:grabbing}
.collection-scroll-rail:focus-visible{outline:3px solid #087f85;outline-offset:2px}
#loginSection #joinRoom{width:100%;border:2px solid #d5ac32;min-height:52px;margin-top:17px;border-radius:14px;background:#ffda62;box-shadow:0 5px 0 #bd9430,0 9px 20px #bf962c24;transition:transform .18s,box-shadow .18s}
#loginSection #joinRoom p,#loginSection #joinRoom:hover p{background:linear-gradient(#ffe797,#ffda62);color:#24454a;font-size:18px;font-weight:900;min-height:48px;padding:11px 18px;border-radius:12px;box-shadow:inset 0 2px 0 #fff6}
#loginSection #joinRoom svg{width:23px;height:23px;transition:transform .2s}
#loginSection #joinRoom:hover{transform:translateY(-3px) rotate(-.4deg);filter:none;box-shadow:0 8px 0 #bd9430,0 14px 25px #bf962c30}
#loginSection #joinRoom:hover svg{transform:rotate(-8deg) scale(1.12)}
#loginSection #joinRoom:active{transform:translateY(4px);box-shadow:0 1px 0 #bd9430}
#local-solo-start{width:100%;margin-top:12px;background:#087f85;border:2px solid #075e65;border-radius:12px;box-shadow:0 3px 0 #07515a}
#local-solo-start p{background:none;color:#fffdf5;font-size:14px;padding:9px 12px}
#local-solo-start[hidden]{display:none!important}
#loginSection .profile-column>.postitguess-card-transparent{padding:13px 16px;background:#7ca9b840!important;border:1px solid #709caf77!important;color:#294d61!important;border-radius:17px}
#loginSection .profile-column>.postitguess-card-transparent h2{font-size:16px!important}
#loginSection .profile-column>.postitguess-card-transparent p{font-size:13px;color:#3b5c6d}
@media(min-width:641px){
 #loginSection :is(.profile-column,.game-column){display:flex;flex-direction:column;align-self:stretch}
 #loginSection .profile-column>:not(.home-question-card){flex-shrink:0}
 #loginSection .game-column{align-self:start}
 #loginSection .game-column>.postitguess-card{flex:0 0 auto}
}
.home-question-card{flex:1;order:4;display:flex;flex-direction:column;justify-content:center;gap:9px;min-width:0;margin-top:12px;padding:16px 18px;border:2px solid #e7d59a;border-radius:18px;background:radial-gradient(circle at 95% 10%,#fff9dd 0,transparent 55%),#f5edc7;color:#294d61;box-shadow:0 3px 0 #adba99;position:relative}
.home-question-heading{display:flex;align-items:center;gap:9px}
.home-question-icon{flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#ffdc65;box-shadow:0 2px 0 #d7b755;transform:rotate(-7deg);font-size:22px}
.home-question-card h3{margin:0;font-size:18px;line-height:1.2;font-weight:900;color:#24454a}
.home-question-card>p{margin:0;font-size:13px;line-height:1.4;color:#45626a}
.home-question-card ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.home-question-card li{padding:6px 9px;background:#fffdf3;border:1px solid #e7dbaf;border-radius:10px 10px 10px 3px;font-size:13px;line-height:1.3;font-weight:800;color:#294d61}
.home-question-card button{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 0;border:0;background:transparent;color:#087f85;font-size:12px;font-weight:900;cursor:pointer;transition:transform .18s}
.home-question-card button svg{width:16px;height:16px;transition:transform .2s}
.home-question-card button:hover{transform:translateX(3px)}.home-question-card button:hover svg{transform:rotate(90deg)}
.home-question-card button:focus-visible{outline:2px solid #087f85;outline-offset:3px;border-radius:4px}
@media(max-width:640px){.home-question-card{margin:0;padding:14px 16px}}
@media(prefers-reduced-motion:reduce){.home-question-card button,.home-question-card button svg{transition:none}}
.home-ad-slot{margin:22px 0;min-height:90px;display:grid;place-items:center}
.home-ad-slot>div{width:100%}
.home-ad-slot :is(#postitguess-io_970x90,#postitguess-io_320x50){margin:0!important}
.home-ad-slot #postitguess-io_970x90{min-height:90px}
.home-ad-slot #postitguess-io_320x50{min-height:50px}
.home-ad-slot #gameadsbannermobile:empty{display:none!important}
.how-to-party{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;gap:30px;margin:0 0 26px!important;padding:26px!important;background:#fffdf5!important;border:2px solid #f7f4e9!important;border-radius:24px!important;box-shadow:0 5px 0 #759aa8,0 18px 40px #244c6826!important;overflow:visible}
.how-to-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;margin-bottom:14px}
.how-to-heading h2{margin-bottom:0!important}
.fps-help-link{border:1px solid #bbdad5;border-radius:12px;padding:7px 10px;background:#eaf5ef;color:#087f85;font-size:13px;font-weight:800;line-height:1.3;box-shadow:0 2px 0 #c2dbd0;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s}
.fps-help-link:hover{background:#fff1b1;transform:translateY(-2px);box-shadow:0 4px 0 #dac476}
.fps-help-link:active{transform:translateY(1px);box-shadow:none}
.fps-help-link:focus-visible{outline:3px solid #087f85;outline-offset:3px}
.modal .modal-container{background:#fffdf5;border:2px solid #f7f4e9;border-radius:24px;color:#203b4c;box-shadow:0 5px 0 #759aa8,0 20px 70px #244c6840;max-height:90vh;width:calc(100% - 28px)}
.modal .modal-content{padding:22px}.modal #modalHardwareAccelerationTitleLabel{font-size:25px;font-weight:900;color:#075e65}
.modal .text-gray-600{color:#35515e;font-size:14px;line-height:1.6}.modal .border-gray-200{border-color:#d5e5dd;border-radius:12px}
.modal button{font-weight:800;font-size:14px;transition:background .18s,transform .18s}
.modal button.bg-indigo-600{background:#087f85;color:#fff}.modal button:not(.bg-indigo-600):hover{background:#eaf5ef}
.modal [x-data]>.flex{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;padding:3px;gap:2px;background:#edf4f1}
.modal [x-data]>.flex button{min-width:0;padding:9px 4px;font-size:13px;line-height:1.3;border-radius:9px;overflow-wrap:normal;word-break:normal}
.modal #modalCloseLabel{background:#ffdc65;color:#203b4c;padding:9px 18px;border-radius:12px;font-size:15px;box-shadow:0 3px 0 #c8a349}
.modal #modalCloseLabel:hover{background:#ffe68b;transform:translateY(-2px)}
.how-to-screenshot{margin:0;position:relative;transform:rotate(-1.5deg);border:7px solid #fff;box-shadow:0 5px 0 #b8cfcc,0 14px 25px #244c6820;border-radius:17px;transition:transform .3s}
.how-to-screenshot:before,.how-to-screenshot:after{content:'';position:absolute;width:60px;height:23px;top:-17px;background:#f7d776cc;z-index:1;border:1px solid #e9c86280;transform:rotate(-11deg)}
.how-to-screenshot:before{left:22px}.how-to-screenshot:after{right:22px;transform:rotate(8deg)}
.how-to-screenshot:hover{transform:rotate(0) translateY(-3px)}
.how-to-screenshot img{width:100%;height:auto;border-radius:10px;display:block}
.screenshot-viewport{position:relative;aspect-ratio:8/5;overflow:hidden;border-radius:10px;background:#d7e8e4}
.how-to-screenshot .screenshot-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateX(var(--slide-enter,18px));transition:opacity .55s ease,transform .65s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.how-to-screenshot .screenshot-slide.is-active{opacity:1;transform:translateX(0);z-index:1}
.screenshot-arrow{position:absolute;top:calc(50% - 36px);z-index:2;display:grid;place-items:center;width:40px;height:44px;border:2px solid #bad5d0;border-radius:13px;background:#fffdf5f5;color:#075e65;box-shadow:0 3px 0 #86aca6,0 5px 14px #183c4f24;cursor:pointer;transition:transform .2s,background .2s}
.screenshot-previous{left:10px}.screenshot-next{right:10px}
.screenshot-arrow svg{width:24px;height:24px}
.screenshot-arrow:hover{background:#ffedaf;transform:translateY(-3px) rotate(-3deg)}
.screenshot-arrow:active{transform:translateY(2px)}
.screenshot-controls{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 5px 1px;color:#35515e;min-height:40px}
.screenshot-dots{display:flex;gap:2px}.screenshot-dots button{display:grid;place-items:center;width:27px;height:30px;border:0;border-radius:9px;background:transparent;cursor:pointer}
.screenshot-dots button:before{content:'';width:7px;height:7px;border-radius:50%;background:#b1c9c5;transition:width .2s,background .2s}
.screenshot-dots button[aria-current=true]:before{width:18px;border-radius:5px;background:#087f85}
.screenshot-dots button:hover{background:#e9f2ed}
.screenshot-count{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;min-width:32px}
.screenshot-play{display:grid;place-items:center;width:30px;height:30px;border:1px solid #bed7d0;border-radius:9px;background:#edf4f1;color:#075e65;cursor:pointer}
.screenshot-play:hover{background:#ffedaf}.screenshot-play:disabled{opacity:.5;cursor:default}.screenshot-play svg{width:16px;height:16px}
.how-to-screenshot button:focus-visible{outline:3px solid #087f85;outline-offset:3px}
@media(max-width:640px){.screenshot-arrow{width:34px;height:38px;border-radius:11px}.screenshot-previous{left:6px}.screenshot-next{right:6px}.screenshot-controls{gap:7px}}
@media(prefers-reduced-motion:reduce){.how-to-screenshot :is(.screenshot-slide,button,button:before){transition:none!important}}
.how-to-steps{min-width:0}.how-to-steps h2{font-size:29px!important;font-weight:900;letter-spacing:-.8px;margin:0 0 14px;color:#203b4c!important}
.how-to-steps h2 span{color:#075e65}.how-to-steps ul{margin:0;display:grid;gap:9px}
.how-to-steps li{padding:8px 10px!important;background:#edf4f1;border:1px solid #d5e5dd;border-radius:12px;transition:transform .2s,background .2s}
.how-to-steps li:hover{transform:translateX(3px);background:#e0f0e7}
.how-to-steps li .flex{gap:10px}
.how-to-steps li .text-2xl{display:grid;place-items:center;width:31px;height:31px;font-size:18px;color:#075e65;background:#c9e8df;border-radius:9px;margin:0;transform:rotate(-4deg)}
.how-to-steps li .text-sm{font-size:14px;line-height:1.5;color:#35515e;font-weight:700}
/* The lobby's existing link reveal gets its party reactions back. */
.lobby-avatar-switcher{position:relative}
#userList .lobby-avatar-arrow{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:30px;padding:4px;border:1px solid #83bcb5;border-radius:10px;background:#fff9df;color:#087f85;box-shadow:0 2px 0 #8db7ac;z-index:2;cursor:pointer;transition:background .15s,scale .15s}
#userList .lobby-avatar-arrow[data-direction="-1"]{left:-13px}
#userList .lobby-avatar-arrow[data-direction="1"]{right:-13px}
#userList .lobby-avatar-arrow svg{width:100%;height:100%}
#userList .lobby-avatar-arrow:hover{background:#ffdf77;scale:1.04}
#userList .lobby-avatar-arrow:active{scale:.94}
#userList .lobby-avatar-arrow:focus-visible{outline:3px solid #087f85;outline-offset:2px}
#userList .lobby-avatar-arrow:disabled{opacity:.4;cursor:default}
.lobby-avatar-changed{animation:lobby-avatar-pop .18s ease-out}
@keyframes lobby-avatar-pop{from{opacity:.6;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.lobby-avatar-changed{animation:none}#userList .lobby-avatar-arrow{transition:none}}
.invite-original{position:relative;overflow:visible;isolation:isolate}
#roomSection .invite-original.highlight-cta::before{display:block;left:calc((100% - 64px)/2);right:auto;top:-54px;transform:translateX(-50%) scaleX(-1);font-size:3rem;line-height:1;z-index:3;pointer-events:none}
#roomSection .invite-original .hands{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
#roomSection .invite-original .hands::before{left:-15px;top:40px;transform:translate(-50%,-50%) rotate(-60deg);font-size:1.7rem;line-height:1}
#roomSection .invite-original .hands::after{right:28px;top:auto;bottom:calc(100% - 16px);transform:translateX(50%) rotate(35deg);font-size:1.7rem;line-height:1}
#roomSection .invite-original:is(:hover,:focus-within) .hands::before,#roomSection .invite-original:is(:hover,:focus-within) .hands::after{opacity:1}
@media(max-width:640px){#roomSection .invite-original{margin-top:32px}}
@keyframes party-enter{from{opacity:0;transform:translateY(12px) rotate(-.5deg)}to{opacity:1;transform:none}}
@keyframes party-float{50%{translate:0 -7px;rotate:6deg}}
@keyframes party-wiggle{25%{transform:rotate(-15deg) scale(1.05)}75%{transform:rotate(15deg) scale(1.05)}}
@media(max-width:1000px){
 .hero{grid-template-columns:minmax(0,1fr) 340px;padding-inline:24px}.home-avatar-art{height:220px}
 #gameDescriptionLabel{font-size:30px!important}.hero-subtitle{font-size:20px}.hero-intro{font-size:16px}
 #loginSection>.grid{gap:16px}#loginSection .postitguess-card{padding:19px!important}
 #loginSection #avatarList{grid-auto-columns:calc((100% - 16px)/3)}#loginSection #avatarList img{width:78px}#loginSection #avatarList .text-xs{font-size:12px}
 #loginSection #mapsList{gap:8px;grid-auto-columns:calc((100% - 8px)/2.25)}
 .how-to-party{gap:20px;padding:22px!important}.how-to-steps li .text-sm{font-size:13px}
}
@media(max-width:767px){.home-ad-slot{min-height:50px}.how-to-party{grid-template-columns:1fr;gap:24px}.how-to-steps li .text-sm{font-size:14px}}
@media(max-width:640px){
 body:not(.in-lobby):not(.playing) .remaster-nav{padding:18px 16px 10px;gap:8px}body:not(.in-lobby):not(.playing) .wordmark{font-size:25px}
 body:not(.in-lobby):not(.playing) .nav-links{font-size:12px;gap:15px}body:not(.in-lobby):not(.playing) .nav-links a:first-child{display:inline}
 .hero{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:8px 16px 20px;min-height:0;align-items:center}
 #gameDescriptionLabel{font-size:24px!important;letter-spacing:-.7px;line-height:1.2}.hero-subtitle{font-size:17px;margin-top:7px}.hero-intro{font-size:14px;margin-top:10px}
 .home-avatar-art{height:220px;max-width:375px;width:100%;justify-self:center}.home-avatar-art:before{inset:18px 0 15px}.hero-spark{font-size:25px}.spark-one{left:18px;bottom:38px}.spark-two{right:14px;bottom:31px;font-size:19px}
 .avatar-thought-card{font-size:14px;padding:12px 11px 13px;max-width:145px}
 #loginSection>.grid{grid-template-columns:1fr;gap:16px}#loginSection .postitguess-card{padding:19px!important;border-radius:20px!important}
 #loginSection .postitguess-card h2{font-size:23px!important}#loginSection label{font-size:14px}
 #loginSection #avatarList{grid-auto-columns:calc((100% - 15px)/4);gap:5px}
 #loginSection #avatarList [onclick]{min-height:111px;padding:8px 2px}#loginSection #avatarList img{width:62px}#loginSection #avatarList .text-xs{font-size:11px}
 #loginSection #mapsList{gap:8px}#loginSection #mapsList [onclick]{padding:6px}#loginSection #mapsList .text-xs{font-size:13px}
 #loginSection label:has(input[name=selectOrJoinTeamRadio]){font-size:13px;padding:10px 5px;gap:4px}
 #loginSection #rangeNumberOfPlayersLabel{font-size:11px;padding:5px 7px}
 #loginSection .profile-column>.postitguess-card-transparent{padding:11px 14px;margin:0}
 .home-ad-slot{margin:18px 0}.how-to-party{padding:19px!important;border-radius:20px!important;margin-bottom:24px!important}
 .how-to-screenshot{border-width:5px}.how-to-steps h2{font-size:26px!important}.how-to-steps li{padding:8px!important}
}
@media(prefers-reduced-motion:reduce){
 .avatar-thought-card{transform:none!important}
 .avatar-thought[data-state=enter] .avatar-thought-card{animation:thought-soft-in 220ms 80ms ease-out both!important}
 .avatar-thought[data-state=exit] .avatar-thought-card{animation:thought-soft-out 240ms ease-in both!important}
 .avatar-thought[data-state=enter] .avatar-thought-dot{animation:thought-dot-in 140ms ease-out both!important}
 .avatar-thought[data-state=exit] .avatar-thought-dot{animation:thought-dot-out 180ms ease-in both!important}
 .avatar-thought[data-state=visible] .avatar-thought-float{animation:none}
 .hero-spark,#loginSection .postitguess-card,#roomSection .invite-original.highlight-cta::before{animation:none!important}
}