/* PostitGuess presentation tokens — shared with remaster/clay.js. */
:root{--background:#f3f0fa;--background-secondary:#e9e6f5;--surface:#fffcf8;--surface-raised:#fff;--purple-primary:#7961bb;--purple-dark:#59428d;--blue-primary:#819ecc;--lavender:#b5a0db;--postit-yellow:#ffe699;--pink-accent:#e9acbc;--success:#35735e;--warning:#886617;--danger:#a34359;--text-primary:#302747;--text-secondary:#716782;--line:#e2dceb;--radius:24px;--shadow:0 8px 30px #5743620b,0 2px 0 #ded5e9;--font:'Nunito', 'Trebuchet MS',system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:auto;min-height:100%;font-family:var(--font)!important;font-size:16px;line-height:1.55;color:var(--text-primary);font-weight:500}
html{overflow-x:hidden;overflow-y:auto}body{overflow:visible}body.playing{overflow:hidden;height:100dvh}
body.gradient,body.gradient-2{background:radial-gradient(ellipse at 80% 12%,#dce8f6 0,transparent 36%),radial-gradient(ellipse at 5% 28%,#eae2f4 0,transparent 40%),var(--background);background-attachment:fixed}
button,input,select,textarea{font:inherit}
a{color:inherit}button,a,[role=button]{-webkit-tap-highlight-color:transparent}
button,[role=button]{cursor:pointer}
button:disabled{cursor:wait;opacity:.55}
:is(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--purple-primary)!important;outline-offset:4px;box-shadow:0 0 0 6px #fff!important}
[hidden],.hidden{display:none!important}
.font-bold{font-weight:800!important}.font-semibold,.font-medium{font-weight:700!important}
.small-container{max-width:1180px!important;padding-inline:16px}
.remaster-nav{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:25px 32px;gap:24px}
.wordmark{display:inline-flex;align-items:center;gap:0;text-decoration:none;font-size:25px;font-weight:900;letter-spacing:-1px;color:var(--text-primary)}
.wordmark>span:not(.brand-note){color:var(--purple-primary)}.wordmark small{font-size:15px;align-self:center;margin:8px 0 0 2px;letter-spacing:0;color:var(--text-secondary)}
.brand-note{display:inline-grid;place-items:center;background:var(--postit-yellow);color:var(--text-primary);height:37px;width:34px;border-radius:5px 5px 12px 5px;transform:rotate(-9deg);box-shadow:0 3px 0 #e4c777;margin-right:12px;font-size:25px}
.nav-links{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:800;color:var(--text-secondary)}.nav-links a{text-decoration:none}.nav-links a:hover{color:var(--purple-dark)}
#header{padding:0!important}.hero{max-width:1180px;margin:auto;display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;min-height:430px;padding:0 32px 24px;position:relative}
.hero-copy{position:relative;z-index:1;padding-bottom:12px}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--purple-primary);font-weight:900;text-transform:uppercase;display:flex;align-items:center;gap:9px}
.eyebrow:before{content:'';width:7px;height:7px;display:inline-block;background:var(--purple-primary);border-radius:50%}
#gameDescriptionLabel{font-size:clamp(38px,4.3vw,62px)!important;letter-spacing:-2.8px;line-height:1.06;color:var(--text-primary)!important;text-align:left;margin:20px 0!important;font-weight:900;text-shadow:none;max-width:600px}
#gameDescriptionLabel em{color:var(--purple-primary);font-style:normal;position:relative;white-space:nowrap}
.hero-description{max-width:405px;font-size:15px;line-height:1.8;color:var(--text-secondary);margin:20px 0 25px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.clay-button{border:0;border-radius:14px;padding:14px 24px;min-height:48px;font-weight:800;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:15px;transition:transform .15s,box-shadow .15s}
.clay-button.primary{background:var(--purple-primary);color:#fff;box-shadow:0 4px 0 var(--purple-dark),0 8px 18px #7961bb25}
.clay-button.secondary{background:var(--surface);color:var(--purple-dark);box-shadow:0 3px 0 #ded5e9}
.clay-button:hover{transform:translateY(-2px)}.clay-button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--purple-dark)}
.hero-facts{display:flex;align-items:center;gap:18px;margin-top:25px;font-size:11px;font-weight:800;color:var(--text-secondary)}.hero-facts span+span:before{content:'·';margin-right:18px;color:var(--lavender)}
.hero-art{position:relative;min-width:0;align-self:stretch;overflow:clip}.hero-art:before{content:'';position:absolute;inset:50px 0 40px 20px;border-radius:50%;background:radial-gradient(ellipse,#d8cce959,#dce9f24d 60%,transparent 70%)}
#hero-scene{height:440px;position:relative;margin:0 -50px 0 -50px}#hero-scene canvas{display:block;width:100%;height:100%}
.hero-caption{position:absolute;bottom:23px;right:30px;transform:rotate(-5deg);background:var(--postit-yellow);padding:10px 16px;font-size:12px;font-weight:800;box-shadow:3px 5px 0 #cab89e25;border-radius:2px 2px 14px 2px}
.setup-heading{display:flex;align-items:center;gap:14px;margin:0 16px 12px;font-size:12px;color:var(--text-secondary);font-weight:800}.setup-heading:after{content:'';height:1px;background:var(--line);flex:1}
#loginSection>.grid{grid-template-columns:.8fr 1.2fr;gap:4px;align-items:start}
.postitguess-card{background:var(--surface)!important;border:1px solid #ffffffa6!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important;color:var(--text-primary);padding:24px!important}
.postitguess-card h2{font-size:20px!important;letter-spacing:-.5px;text-transform:none;color:var(--text-primary)!important}
.postitguess-card .border-blue{border:0;background:var(--background-secondary);width:38px;height:38px;display:grid;place-items:center;font-size:19px;padding:0!important}
.postitguess-card-transparent{background:var(--background-secondary)!important;border:0!important;border-radius:20px;color:var(--text-secondary)!important;box-shadow:none}
.postitguess-card-transparent .text-white{color:var(--text-primary)!important}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{border:1px solid var(--line)!important;border-radius:12px!important;background:var(--surface-raised);color:var(--text-primary);min-height:44px;box-shadow:none!important;padding:10px 13px;line-height:1.4}
input::placeholder,textarea::placeholder{color:#91879e}
input[type=checkbox],input[type=radio]{accent-color:var(--purple-primary);width:18px;height:18px;flex-shrink:0}
label{font-size:12px;line-height:1.45}label.required:after{color:var(--purple-primary)}
#pseudoId{font-size:17px;font-weight:800;background:var(--background)}
#avatarList{border:0;box-shadow:none;gap:7px;grid-template-columns:repeat(4,minmax(0,1fr));max-height:237px;padding:5px;margin-top:10px}
#avatarList [onclick]{border:2px solid transparent;border-radius:14px;background:var(--background);padding:8px 3px;transition:background .15s,transform .15s;min-height:96px}
#avatarList img{border:0;border-radius:10px;width:54px;height:54px;object-fit:cover;mix-blend-mode:multiply}
#avatarList [onclick]:hover{background:var(--background-secondary);transform:translateY(-2px)}
#avatarList .avatar-selected{border-color:var(--purple-primary)!important;background:#e5def3!important}
#avatarList .text-xs{font-size:9px;font-weight:700;line-height:1.2;margin-top:5px}#avatarList svg{width:17px;height:17px;left:auto!important;right:0;bottom:-17px!important;fill:var(--purple-primary)}
#avatarRandomTooltip{display:inline-grid;place-items:center;width:40px;height:40px;background:var(--background-secondary);border-radius:12px;float:right;margin-top:-9px}
#mapsList{border:0;box-shadow:none;gap:8px;max-height:none;margin-top:10px;overflow:visible}
#mapsList [onclick]{border:2px solid transparent;border-radius:14px;padding:5px;background:var(--background);transition:transform .15s;min-width:0}
#mapsList [onclick]:hover{transform:translateY(-3px)}#mapsList .map-selected{border-color:var(--purple-primary)!important;background:#e5def3!important}
#mapsList img{width:100%;height:65px;border-radius:9px;border:0}#mapsList .flex-shrink-0{width:100%}#mapsList .text-xs{font-size:11px;padding:5px 0 2px;font-weight:800}#mapsList svg{width:20px;height:20px;left:auto!important;right:0;bottom:-23px!important;fill:var(--purple-primary)}
#rangeNumberOfPlayersLabel{background:var(--background-secondary);color:var(--purple-dark);font-size:10px;padding:6px 10px}
#modeBlock{gap:14px;margin-block:15px 5px;flex-wrap:wrap}#modeBlock>div{margin:0;height:auto}#modeBlock label{background:var(--background);padding:8px 12px;border-radius:10px;font-size:12px}
#partyLabel{scroll-margin:120px}#loginSection .mb-2.flex.flex-wrap.w-full>div.h-6{width:50%;height:auto;margin:0;padding-bottom:14px}#loginSection .mb-2.flex.flex-wrap.w-full>div.h-6 label{font-weight:800}
#modeBlock,#themeSettingBlock{width:100%}
.in-lobby .hero{display:none}.in-lobby #header{margin-bottom:12px}
.profile-preview{height:180px;position:relative;background:radial-gradient(ellipse,#e2daf0,transparent 70%);margin:-14px 0 -5px}.profile-preview canvas{height:100%;width:100%;display:block}.profile-preview img{display:block;height:160px;margin:auto;border-radius:24px;mix-blend-mode:multiply}
#themeDescriptionLabel{line-height:1.6;color:var(--text-secondary);font-size:11px;text-align:left;margin-top:14px}
.cta-button{border:0;border-radius:12px;box-shadow:0 4px 0 var(--purple-dark),0 7px 15px #7961bb1a;transition:transform .15s;min-height:44px;background:var(--purple-primary);color:#fff}
.cta-button p,.cta-button:hover p{background:var(--purple-primary);background-image:none;border:0;text-shadow:none;border-radius:12px;padding:10px 18px;line-height:1.5;min-height:44px;font-weight:800;font-size:13px}
.cta-button:hover{transform:translateY(-1px)}.cta-button:active{transform:translateY(3px)}.cta-button.cta-red{box-shadow:0 4px 0 #83394b}.cta-button.cta-red p{background:var(--danger)}
#joinRoom{width:100%;margin-top:14px}#joinRoom p{width:100%;padding:13px}
.highlight-cta:before,.highlight-cta .hands{display:none}
#streamersList{border:0}#streamersList:empty{display:none}
#distanceguessr{background:#ded7ee;border:0;color:var(--text-secondary);font-size:11px}#distanceguessr .text-sm{font-size:11px}#distanceguessr a{color:var(--purple-dark)}#distanceguessr .bg-gray-700{background:#cbc0df}
body>div.absolute:first-of-type:has(#distanceguessr){position:relative!important}
#roomSection{padding-top:24px}#roomSection .postitguess-card{padding:28px!important}#currentMapImg{width:100px;height:76px;border-radius:16px;border:0}
#userList{border:0;box-shadow:none;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-block:24px}
#userList>div{border-radius:18px;background:var(--background);border:1px solid var(--line);padding:12px}
#roomSection .h-10:has(#postItValue){height:auto;display:flex;align-items:center;background:#fff0b9;padding:18px;border-radius:16px;gap:12px;flex-wrap:wrap;margin:0}
#postItValue{background:#fff9df!important;flex:1;min-width:200px}#inputPostItValueLabel{font-weight:800}#inviteFriendUrl{max-width:100%;width:min(330px,60vw)!important;background:var(--background)!important}
#roomSection .absolute:has(#changeOrderLabel){position:static;transform:none;box-shadow:none;border:0;background:none;padding:0;margin:15px 0 0;display:flex;gap:10px}#changeOrderLabel,#changeOrderDescriptionLabel{width:auto;text-align:left}
#canvas{position:fixed;inset:0;z-index:0;display:block}#gameSection{position:relative;z-index:2}#game-layout{pointer-events:none}#game-layout>div{pointer-events:auto}
#game-layout .bg-gray-700{background:#fffaf2f5!important;border-color:#e2dcebd9!important;color:var(--text-primary)!important;border-radius:18px;box-shadow:0 6px 24px #30274714}
#game-layout .text-white{color:var(--text-primary)}#game-layout .cta-button .text-white,#game-layout .cta-button{color:#fff}#game-layout .border-gray-600{border-color:var(--line)}
#game-layout h3{font-size:13px;font-weight:800;line-height:1.5}#game-layout .text-lg{font-size:15px}
#currentPlayerTurn{border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}#currentPlayerTurn.box-shadow-blink{outline:3px solid var(--postit-yellow);animation:none}
#currentPlayer{font-weight:900}#countdownProgressBar{background:var(--purple-primary);transition:width .2s linear}
#notepadPlaceholder{background:repeating-linear-gradient(#fff3bd,#fff3bd 27px,#e9dba6 28px)!important;line-height:28px!important;border:0!important;border-radius:0 0 16px 16px!important;color:var(--text-primary)}
#animationBlock{padding:5px;gap:2px}#animationBlock>.animation-action{border:0;border-radius:9px;min-width:36px;min-height:36px;display:grid;place-items:center}#animationBlock>.animation-action:hover{background:var(--background-secondary)}
#chatbox{padding:8px;max-height:190px!important;color:var(--text-primary)}#chatbox li{line-height:1.6;padding-block:5px}#chatbox b{color:var(--purple-dark)}#postMessageContainer{padding:5px;gap:5px}#messageInput{min-width:0;font-size:12px}#sendMessageBtn{border-radius:10px;min-height:44px}
#userScoreboard img{border-radius:50%}#userScoreboard>li{border:0;border-bottom:1px solid var(--line)}#userTries{color:var(--text-primary)}
#loading-wrapper{background:var(--background)!important;z-index:100}#loading-text{font-family:var(--font);color:var(--purple-dark);font-weight:800;top:58%;width:260px;margin-left:-130px;line-height:1.8}#loading-content{border:0!important;background:var(--postit-yellow);width:75px;height:75px;margin:-95px 0 0 -37px;border-radius:5px 5px 20px 5px;box-shadow:5px 8px 0 #dfc87c44;animation:paper-breathe 1.6s ease-in-out infinite}#loading-content:before{content:'?';inset:0;border:0;animation:none;display:grid;place-items:center;color:var(--purple-dark);font-size:40px;font-weight:900}#loading-content:after{display:none}
@keyframes paper-breathe{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(5deg) translateY(-8px)}}
.toastify{border-radius:16px;font:700 13px/1.6 var(--font);background:var(--purple-dark);box-shadow:var(--shadow)}
.modal .bg-white{background:var(--surface);border-radius:24px}#languageSelector{font-size:12px;min-height:36px;padding:6px 10px!important}#soundUnMutedIcon,#soundMutedIcon{color:var(--purple-dark);background:var(--surface);padding:6px;border-radius:50%;width:36px;height:36px}
#hud-panels-toggle{display:none;position:fixed;right:12px;top:12px;z-index:15;border:0;border-radius:12px;background:var(--surface);color:var(--purple-dark);font-weight:800;padding:12px}.palette-swatches{display:flex;gap:8px}.palette-swatches i{height:25px;width:25px;border-radius:50%;box-shadow:inset 0 -3px 0 #00000010}
@media(min-width:1600px){.hero{min-height:460px}}
@media(max-width:900px){.hero{grid-template-columns:1fr 1fr;padding-inline:24px}#gameDescriptionLabel{font-size:43px!important;letter-spacing:-2px}#hero-scene{height:390px;margin-inline:-35px}.hero-caption{right:0}.nav-links{gap:15px}.small-container{padding-inline:8px}.postitguess-card{padding:18px!important;margin:8px}#avatarList{grid-template-columns:repeat(3,minmax(0,1fr))}#mapsList{grid-template-columns:repeat(2,minmax(0,1fr))}#mapsList img{height:74px}#userList{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.remaster-nav{padding:18px 20px}.wordmark{font-size:23px}.nav-links a:first-child{display:none}.nav-links{font-size:11px}.hero{display:flex;flex-direction:column;padding:20px 24px 0;min-height:0;align-items:stretch}.hero-copy{max-width:480px}.eyebrow{font-size:10px}#gameDescriptionLabel{font-size:48px!important;letter-spacing:-2.4px;max-width:380px}.hero-description{font-size:14px;margin-block:18px}.hero-facts{font-size:10px;gap:10px}.hero-facts span+span:before{margin-right:10px}.hero-art{height:270px;margin-top:0}#hero-scene{height:310px;margin:-25px -20px 0}.hero-caption{bottom:15px;font-size:11px}.hero-actions{gap:10px}.clay-button{padding:13px 20px;flex:1;font-size:13px}#loginSection>.grid{grid-template-columns:1fr}#avatarList{grid-template-columns:repeat(4,minmax(0,1fr));max-height:190px}#mapsList{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}#mapsList img{height:55px}#mapsList .text-xs{font-size:9px}.postitguess-card{padding:20px!important;margin:8px}#userList{grid-template-columns:repeat(2,minmax(0,1fr))}#roomSection .float-right{float:none;display:block;margin-top:20px;top:0}#roomSection .postitguess-card{padding:16px!important}#roomSection .h-10:has(#postItValue){padding:12px}#postItValue{min-width:100%;}#roomSection #validatePostIt{max-width:none!important;margin:0}#hud-panels-toggle{display:block}#game-layout>div{max-width:calc(100vw - 24px)}#game-layout .hud-secondary{display:none!important}#game-layout.panels-open .hud-secondary{display:block!important;position:fixed!important;top:70px!important;bottom:auto!important;left:12px!important;right:12px!important;max-height:70vh;overflow:auto;background:var(--background);padding:12px!important;border-radius:18px;z-index:10}#game-layout .hud-chat{bottom:8px!important;right:8px!important;width:230px!important}#chatbox{max-height:110px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Viewport anchored HUD: the world remains visible between compact edge panels. */
body.playing #gameSection,body.playing #game-layout{position:fixed;inset:0;width:100%;height:100dvh;margin:0}
body.playing #hardwareAccelerationContainer{display:none!important}
#hud-drawer{display:contents}
#hud-notes{position:absolute;left:12px;bottom:15px;visibility:visible;width:220px;color:var(--text-primary)}
#hud-notes textarea{width:100%;height:200px;margin:0}#hud-notes h2{color:var(--text-primary);font-size:13px}#hud-notes>span{color:var(--text-secondary);font-size:10px}
#hud-scores{position:absolute!important;right:14px;top:14px;bottom:auto!important;width:265px;max-height:55vh;overflow:auto;margin:0!important}
#hud-chat{position:absolute!important;right:14px;bottom:14px;left:auto!important;width:265px;margin:0!important}
#hud-chat{visibility:visible!important}
#hud-emotes{position:absolute!important;bottom:14px;left:50%!important;margin:0;transform:translateX(-50%)}
#hud-emotes>div{left:0!important}#hud-emotes h3{font-size:11px}
#currentPlayerTurn{max-width:340px;top:14px!important;left:14px;margin:0!important}
#game-layout .app-title{font-size:19px;background:none;-webkit-text-fill-color:var(--purple-dark);text-shadow:none}#game-layout .app-title+img,#game-layout img.animation-up-down{animation:none!important;filter:none!important}
#endGameContainer{left:50%;top:28%!important;transform:translateX(-50%);z-index:20;padding:24px!important;min-width:290px}
@media(max-width:900px){#hud-notes{width:170px}#hud-notes textarea{height:150px}#hud-scores,#hud-chat{width:225px}#hud-emotes{bottom:14px}#hud-emotes>div{max-width:270px}#currentPlayerTurn{max-width:290px}}
@media(max-width:640px){
 #game-layout>div:first-child{display:none}#currentPlayerTurn{left:8px;top:8px!important;max-width:calc(100vw - 125px);font-size:11px}
 #currentPlayerTurn img{width:30px;height:30px}#currentPlayerTurn .mx-3{margin-inline:6px;font-size:11px}#currentPlayerTurn .px-1{padding:6px}#currentPlayerTurn p{line-height:1.3}
 #hud-drawer{display:none!important}#game-layout.panels-open #hud-drawer{display:flex!important;flex-direction:column;gap:12px;position:fixed;inset:85px 12px 90px;overflow:auto;background:var(--background);padding:16px;border-radius:20px;z-index:30;pointer-events:auto}
 #hud-drawer #hud-notes,#hud-drawer #hud-scores{position:static!important;visibility:visible;width:100%;max-height:none;overflow:visible}#hud-notes textarea{height:150px}
 #hud-chat{right:8px;bottom:85px;width:220px}#hud-chat #chatbox{max-height:90px!important}#hud-chat input{font-size:11px}
 #hud-emotes{bottom:8px;width:calc(100vw - 20px);max-width:370px!important}#hud-emotes>div{max-width:none;width:100%}#hud-emotes .animation-action{min-height:38px}#hud-emotes h3{display:none}
 #hud-panels-toggle{top:165px;right:10px;font-size:12px;padding:9px 12px;min-height:42px}
 #game-layout #currentPlayerTurn{max-width:calc(100vw - 16px);width:calc(100vw - 16px)}
 #game-layout.panels-open #hud-drawer{top:215px}
 #currentPlayerTurn #guessAnswerContainer{flex-wrap:wrap}#guessAnswerInput{min-width:0!important}
 .toastify{top:215px!important;font-size:11px;max-width:220px}
}
#avatarList{grid-template-columns:repeat(3,minmax(0,1fr))}
/* The production headline is longer than the earlier replacement copy.
   Fit the restored text in the existing hero, preserving the section footprint. */
#gameDescriptionLabel{font-size:30px!important;line-height:1.3;letter-spacing:-.6px}
#gameDescriptionLabel b{font-size:inherit;font-weight:900}
#gameDescriptionLabel>span{font-size:18px;line-height:1.5;margin-top:18px}
.hero-description:empty{height:54px}.eyebrow:empty{height:17px}
.hero-facts span:empty{display:none}.hero-caption:empty{visibility:hidden}
.setup-heading:empty{height:18.6px}
@media(max-width:900px){#gameDescriptionLabel{font-size:27px!important}}
@media(max-width:640px){.hero{min-height:667px}#gameDescriptionLabel{font-size:29px!important}.hero-description:empty{height:0;margin-block:18px}}