/* Light cartoon direction shared with the Art Direction page. */
:root{
 --ui-bg:#f3f2fb;--ui-surface:#fffdfb;--ui-primary:#7961bb;--ui-primary-dark:#59428d;
 --ui-secondary:#c6e7e5;--ui-accent:#f1ce87;--ui-success:#35735e;--ui-danger:#a34359;
 --ui-text:#302747;--ui-muted:#716782;--ui-border:#e2ddeb;--ui-radius:18px;
 --ui-shadow:0 8px 28px #5743620b,0 2px 5px #57436208;
 --background:var(--ui-bg);--background-secondary:#eae7f5;--surface:var(--ui-surface);
 --surface-raised:#fff;--purple-primary:var(--ui-primary);--purple-dark:var(--ui-primary-dark);
 --postit-yellow:var(--ui-accent);--success:var(--ui-success);--danger:var(--ui-danger);
 --text-primary:var(--ui-text);--text-secondary:var(--ui-muted);--line:var(--ui-border);
 --radius:var(--ui-radius);--shadow:var(--ui-shadow);
}
body.gradient,body.gradient-2,body.in-lobby{background-color:var(--ui-bg);background-image:url('../images/remaster/menu-landscape.svg'),radial-gradient(ellipse at 80% 8%,#dceaf888,transparent 45%),radial-gradient(ellipse at 5% 32%,#dfd2f04d,transparent 38%),linear-gradient(145deg,#f5f0fa,#eff5fa 65%,#f6f6ef);background-size:100% 1050px,auto,auto,auto;background-repeat:no-repeat;background-attachment:scroll,fixed,fixed,fixed}
::selection{background:#d4c8ef;color:var(--ui-text)}
:is(button,a,input,select,textarea,[tabindex]):focus-visible{outline-color:var(--ui-primary)!important;box-shadow:0 0 0 5px #fff9!important}
.remaster-nav{padding-block:20px}.wordmark{text-shadow:none}.brand-note{box-shadow:inset 0 1px 0 #fff9,0 2px 0 #dfbe7a}.nav-links a:hover{color:var(--ui-primary)}
body>div.absolute:has(#distanceguessr){position:relative!important}
.nav-links{margin-left:auto}.menu-settings{display:flex;align-items:center;gap:6px}.menu-settings>div{align-items:center;gap:5px}
.menu-settings #languageSelector{min-height:32px;padding:4px 7px!important;font-size:11px;margin:0}.menu-settings :is(#soundUnMutedIcon,#soundMutedIcon){width:30px;height:30px}
body.playing .menu-settings{display:none}
/* Only the original two introductory lines remain above the setup. */
.hero{display:block;min-height:0;padding:0 32px 20px}.hero-copy{max-width:none;padding:0}
#gameDescriptionLabel{max-width:none;margin:0!important;font-size:24px!important;line-height:1.4;letter-spacing:-.55px;text-shadow:none;color:var(--ui-text)!important}
#gameDescriptionLabel>b{color:var(--ui-primary-dark)}#gameDescriptionLabel>span{font-size:14px;line-height:1.6;margin-top:6px;color:var(--ui-muted)}
#loginSection>.grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:16px}
.profile-column,.game-column{min-width:0}.profile-column{order:1}.game-column{order:2}
.mobile-ad-reserve{display:none;order:3}#gameadsbannermobile{order:4}
.postitguess-card{background:linear-gradient(145deg,#ffffff,var(--ui-surface))!important;border:1px solid #e2ddeb99!important;border-radius:18px!important;box-shadow:var(--ui-shadow)!important;padding:20px!important;color:var(--ui-text)}
#loginSection :is(.profile-column,.game-column)>.postitguess-card{margin:0}
.game-column>.postitguess-card{border-color:#d8ceea!important;box-shadow:0 10px 36px #7961bb0e,inset 0 2px 0 #fff!important}
.postitguess-card h2{font-size:18px!important;letter-spacing:-.35px;color:var(--ui-text)!important}
.postitguess-card .border-blue{width:30px;height:30px;background:#eee9f6;font-size:16px;box-shadow:none}
.postitguess-card-transparent{background:#eae8f280!important;border:1px solid #e2ddeb77!important;border-radius:14px;color:var(--ui-muted)!important;box-shadow:none}
.postitguess-card-transparent .text-indigo-200{color:var(--ui-muted)}
:is(.postitguess-card,.postitguess-card-transparent) :is(.text-white,.text-gray-800,.text-gray-900,.text-gray-700){color:var(--ui-text)}
:is(.postitguess-card,.postitguess-card-transparent) :is(.text-gray-400,.text-gray-500,.text-gray-600,.text-gray-300){color:var(--ui-muted)}
:is(.postitguess-card,.postitguess-card-transparent) :is(.text-indigo-400,.text-indigo-600){color:var(--ui-primary-dark)}
label{font-size:12px}label.required:after{color:var(--ui-primary)}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{background:#f8f7fc;border:1px solid var(--ui-border)!important;color:var(--ui-text);border-radius:9px!important;min-height:38px;padding:8px 11px;box-shadow:inset 0 1px 2px #fff!important;transition:background-color .18s,border-color .18s,box-shadow .18s;font-size:13px}
input::placeholder,textarea::placeholder{color:#877e95}input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{background:#fff;outline:2px solid #a596cb;outline-offset:2px}
input[type=checkbox],input[type=radio]{accent-color:var(--ui-primary);width:16px;height:16px}
#pseudoId{font-size:15px;font-weight:800;margin-top:4px}
#avatarRandomTooltip{width:30px;height:30px;border-radius:9px;margin-top:-5px;background:#eee9f6;box-shadow:none}
#avatarList{grid-template-columns:repeat(3,minmax(0,1fr));max-height:240px;margin-top:12px;padding:2px;gap:6px;scrollbar-width:thin;scrollbar-color:#cfc6e1 transparent}
#avatarList [onclick]{min-height:90px;padding:7px 3px;background:#f5f3fa;border:1px solid transparent;border-radius:11px;color:var(--ui-muted);transition:transform .18s,background-color .18s,border-color .18s}
#avatarList img{width:55px;height:55px;mix-blend-mode:normal;object-fit:contain;border:0;border-radius:8px}
#avatarList .text-xs{font-size:10px;margin-top:3px;line-height:1.25}#avatarList [onclick]:hover{background:#eeebf7;transform:translateY(-1px)}
#avatarList .avatar-selected,#mapsList .map-selected{border-color:var(--ui-primary)!important;background:#eae3f7!important;box-shadow:inset 0 0 0 1px #7961bb22}
#avatarList svg,#mapsList svg{fill:var(--ui-primary);background:#fff;border-radius:50%}
#rangeNumberOfPlayersLabel{background:#eee9f6;color:var(--ui-primary-dark);padding:4px 8px;box-shadow:none}
#loginSection .mb-2.flex.flex-wrap.w-full>div.h-6{padding-bottom:5px}
#loginSection label:has(input[name=selectOrJoinTeamRadio]){display:flex;justify-content:center;gap:4px;padding:9px 6px;border-radius:9px;background:#f3f0f9;color:var(--ui-muted);font-weight:800;transition:background-color .18s}
#loginSection label:has(input[name=selectOrJoinTeamRadio]:checked){background:#e5ddf2;color:var(--ui-primary-dark);box-shadow:inset 0 0 0 1px #cabde2}
#loginSection label:has(input[name=selectOrJoinTeamRadio]) input{width:14px;height:14px}#loginSection label:has(input[name=selectOrJoinTeamRadio]) .ml-2{margin-left:2px}
#loginSection .mb-2.flex.flex-wrap.w-full>div.h-6:first-child{padding-right:5px}
#modeBlock{margin-block:12px 2px;gap:8px}#modeBlock label{padding:7px 10px;background:#f3f0f9;border-radius:9px;color:var(--ui-muted);transition:background-color .18s}
#modeBlock label:has(input:checked){background:#e7eef9;color:#435e86;box-shadow:inset 0 0 0 1px #c9d6eb}
#mapsList{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:6px}#mapsList [onclick]{padding:4px;background:#f5f3fa;border:1px solid transparent;border-radius:10px}
#mapsList img{height:57px;border-radius:7px}#mapsList .text-xs{font-size:10px;padding:4px 0 1px;line-height:1.25}#mapsList [onclick]:hover{transform:translateY(-1px)}
#themeDescriptionLabel{margin-top:10px;font-size:11px;line-height:1.6;color:var(--ui-muted)}
.cta-button,.clay-button{border:0;border-radius:10px;min-height:36px;background:var(--ui-primary);color:#fff;box-shadow:0 2px 0 #59428d,0 4px 10px #7961bb14;transition:transform .18s,box-shadow .18s,filter .18s}
.cta-button p,.cta-button:hover p{background:linear-gradient(180deg,#8870c6,var(--ui-primary));color:#fff;border-radius:10px;min-height:36px;line-height:1.5;padding:8px 13px;font-size:12px;box-shadow:inset 0 1px 0 #fff2;text-shadow:none}
.cta-button:hover,.clay-button:hover{transform:translateY(-1px);filter:brightness(1.03)}.cta-button:active,.clay-button:active{transform:translateY(1px);box-shadow:0 1px 0 #59428d}
.cta-button:disabled,.clay-button:disabled{opacity:.5;transform:none;filter:saturate(.5);cursor:not-allowed}
.cta-button.cta-red{background:#f5e3e8;box-shadow:0 2px 0 #d8b8c3}.cta-button.cta-red p,.cta-button.cta-red:hover p{background:#f5e3e8;color:var(--ui-danger)}
#joinRoom{margin-top:10px;min-height:40px}#joinRoom p{padding:10px 14px;min-height:40px}
#distanceguessr{background:#eae5f3;color:var(--ui-muted)}#distanceguessr a{color:var(--ui-primary-dark)}#distanceguessr .bg-gray-700{background:#dbd3eb;color:var(--ui-primary-dark)}
.profile-column>.postitguess-card-transparent{margin:12px 0 0;padding:12px 14px}#streamersList{border:0}
/* Compact room: avatars and readiness carry the hierarchy. */
#roomSection{padding-top:8px}#roomSection .postitguess-card{padding:18px!important}
#roomSection>.postitguess-card{margin:8px 0 16px}#roomSection>.postitguess-card>.p-2{padding:0}
#currentMapImg{width:66px;height:52px;border-radius:11px;box-shadow:none}
#roomSection p:has(>#lobbyTeamLabel){display:flex;align-items:center;gap:6px;font-size:18px;padding-left:12px;flex-wrap:wrap;text-align:left}
#roomSection p:has(>#lobbyTeamLabel)>span:last-child{margin-left:auto;background:#eee9f6;color:var(--ui-primary-dark)}
#roomName{color:var(--ui-primary-dark)}
#roomSection .h-10:has(#postItValue){background:#f1edf8;border:1px solid #e2d9ed;padding:10px;border-radius:11px;gap:8px}
#postItValue,#inviteFriendUrl{background:#fff!important}#inputPostItValueLabel{font-size:11px;max-width:230px!important}
#validatePostIt{max-width:150px!important}#validatePostIt p{line-height:20px!important}
#userList{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-block:14px}
#userList>div{background:#f7f5fc;border:1px solid #e8e2f0;padding:8px;border-radius:13px;box-shadow:none;transition:background-color .18s,box-shadow .18s}
#userList>div>div{border-color:transparent;border-radius:9px;padding:4px}#userList img{width:70px;height:70px;object-fit:contain;background:#f0ecf7;border-color:#e3dbef;box-shadow:none}
#userList .text-lg{font-size:14px;line-height:1.4;overflow-wrap:anywhere}#userList .ribbon{font-size:10px;padding:1px 8px;background:#e5ddf2;color:var(--ui-primary-dark);box-shadow:none}
#userList>div.border-indigo-600{border-color:#b6a4d5;background:#f0eaf9}#userList [id^=validate-postIt-] svg{fill:var(--ui-success)}
#userList>div:has([id^=validate-postIt-]:not(.hidden)){box-shadow:inset 0 -2px 0 #97c7b4}
#userList>[data-admin=true] .text-center>.text-xs{color:var(--ui-primary-dark)}#userList>div.cursor-move{cursor:grab}#userList>div.cursor-move:active{cursor:grabbing}
#userList>div.bg-indigo-200{background:#e5ddf2;outline:2px dashed #b6a4d5;outline-offset:-4px;opacity:.7}#userList>div.sortable-chosen{box-shadow:inset 0 0 0 2px #b6a4d5}
#roomSection .absolute:has(#changeOrderLabel){margin-top:5px}#changeOrderLabel{font-size:11px}#changeOrderDescriptionLabel{font-size:10px}
#roomSection .items-center.p-2.mb-3{padding:0;margin-bottom:8px}#roomSection .float-right:has(#inviteFriendUrl){top:0;margin-top:0}
#inviteFriendUrl{min-height:34px;padding:6px 9px;font-size:11px;width:min(280px,45vw)!important}#copyUrlButton p{min-height:34px;padding:6px 10px}
.postitguess-card [x-data] .bg-white{background:#faf9fd;border-color:var(--ui-border);border-radius:10px;overflow:hidden}.postitguess-card [x-data] :is(li,.border-t){border-color:var(--ui-border)}
.postitguess-card [x-data] button{color:var(--ui-text);transition:background-color .18s}.postitguess-card [x-data] button:hover{background:#f0ebf8}
/* One translucent surface family across the live HUD. */
#game-layout :is(.bg-gray-700,#hud-notes),#hud-panels-toggle{background:rgba(255,252,248,.86)!important;border:1px solid #dcd3e9bb!important;color:var(--ui-text)!important;border-radius:14px;box-shadow:0 5px 20px #30274712;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
#game-layout :is(.text-white,.text-gray-200),#hud-chat,#hud-scores,#chatbox,#userTries{color:var(--ui-text)}#game-layout .text-indigo-400,#chatbox b{color:var(--ui-primary-dark)}
#game-layout button.bg-gray-600{background:#eee9f6;color:var(--ui-primary-dark);border:1px solid #d8ceea;border-radius:9px;font-size:10px;padding:5px;transition:background-color .18s}
#game-layout button.bg-gray-600:hover{background:#e5ddf2}
#game-layout .cta-button .text-white{color:inherit}#game-layout .app-title{-webkit-text-fill-color:var(--ui-primary-dark);font-size:17px;text-shadow:0 1px 0 #fff}
#currentPlayerTurn{max-width:320px;font-size:12px}#currentPlayerTurn.box-shadow-blink{outline:1px solid #d5b568;outline-offset:2px}
#currentPlayerTurn .px-1{padding:6px}#currentPlayerTurn .mx-3{margin-inline:7px;font-size:12px}#currentPlayerAvatar{width:36px;height:36px;border-color:#e5d8ae}
#currentPlayer{color:#886617!important}#countdownProgressBar{background:linear-gradient(90deg,#a9d4d0,#92bfb7)}#currentPlayerTurn .bg-gray-200{background:#e8e4f0}
#guessAnswerContainer{margin:0 8px 8px;gap:5px;flex-wrap:wrap}#guessAnswerContainer label{font-size:11px;margin-right:0}#guessAnswerInput{min-width:0;width:100%;font-size:12px;min-height:34px}
#tryToGuessBtn,#sendMessageBtn{background:var(--ui-primary);color:#fff;border-radius:9px;min-height:34px;box-shadow:0 2px 0 #59428d;filter:none;padding:6px}
#endPlayerTurn p{font-size:10px;padding:6px 8px;min-height:32px}#endPlayerTurn svg{width:17px;height:17px}
#hud-notes{width:190px;padding:9px}#hud-notes h2{font-size:12px;margin:0;color:var(--ui-text)}#hud-notes>span{font-size:10px;line-height:1.5;color:var(--ui-muted)}
#game-layout #notepadPlaceholder{height:150px;padding:7px;background:repeating-linear-gradient(#fffaf0aa,#fffaf0aa 23px,#e6dce955 24px)!important;color:var(--ui-text)!important;line-height:24px!important;font-size:12px;border:1px solid #e7dfef!important;border-radius:8px!important;box-shadow:none!important}
#hud-chat,#hud-scores{width:240px}#hud-chat h3,#hud-scores h3{font-size:12px}#hud-chat #chatbox{padding:7px;max-height:145px!important;font-size:12px}#messageInput{min-height:34px}#userScoreboard>li{border-color:#e2ddeb}
#animationBlock{padding:3px;gap:2px}#animationBlock>.animation-action{min-width:32px;min-height:32px;color:var(--ui-primary-dark);border-radius:8px;transition:transform .18s,background-color .18s}
#animationBlock>.animation-action:hover{background:#e9e1f4;transform:translateY(-1px)}#animationBlock svg{width:21px;height:21px}
#hud-emotes h3{font-size:10px}#endGameContainer{padding:18px!important;box-shadow:0 8px 30px #30274720!important}
#endGameContainer{top:14%!important}
.modal .bg-white{background:var(--ui-surface);color:var(--ui-text);border-radius:18px;box-shadow:0 20px 70px #30274725}.modal-overlay{background:#302747;opacity:.35}.modal .text-gray-600{color:var(--ui-muted)}
.modal button.bg-indigo-500,.modal button.bg-indigo-600{background:var(--ui-primary);color:#fff}
[role=tooltip]:before{background:var(--ui-primary-dark);color:#fff;border-radius:8px;text-shadow:none}.toastify{background:#fffdf5f0!important;color:var(--ui-text);border:1px solid #dcd3e9;box-shadow:var(--ui-shadow);border-radius:13px;backdrop-filter:blur(6px)}
.toastify.state-success{border-color:#a6cdb8;background:#f3fbf6ed!important}.toastify.state-error{border-color:#deb5bf;background:#fff5f6ed!important}
#loading-wrapper{background:var(--ui-bg)!important}#loading-text{color:var(--ui-primary-dark)}#soundUnMutedIcon,#soundMutedIcon{color:var(--ui-primary-dark);background:var(--ui-surface)}
@media(max-width:900px){#loginSection>.grid{gap:12px;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}.postitguess-card{padding:16px!important}#mapsList{gap:4px}#mapsList img{height:48px}.small-container{padding-inline:8px}#roomSection .postitguess-card{padding:16px!important}}
@media(max-width:640px){
 .remaster-nav{padding:16px 20px}.hero{padding:0 16px 16px;min-height:0}.hero-copy{max-width:none}#gameDescriptionLabel{max-width:none;font-size:21px!important;letter-spacing:-.4px}#gameDescriptionLabel>span{font-size:13px;margin-top:6px}
 .remaster-nav{flex-wrap:wrap;gap:8px}.wordmark{font-size:21px}.menu-settings{margin-left:auto}.nav-links{order:3;width:100%;margin:0;font-size:11px}.nav-links a{padding-left:0}
 #loginSection>.grid{grid-template-columns:1fr;gap:12px}.mobile-ad-reserve{display:block}.postitguess-card{padding:16px!important}.profile-column>.postitguess-card-transparent{padding:8px 12px}
 .profile-column{display:contents}.profile-column>.postitguess-card{order:1}.profile-column>.postitguess-card-transparent{order:3;margin:0}.mobile-ad-reserve{order:4}#gameadsbannermobile{order:5}
 #avatarList{grid-template-columns:repeat(5,minmax(0,1fr));max-height:180px;gap:4px}#avatarList [onclick]{min-height:76px;padding:5px 2px}#avatarList img{width:44px;height:44px}#avatarList .text-xs{font-size:9px}
 #mapsList img{height:46px}#mapsList .text-xs{font-size:9px}#mapsList{grid-template-columns:repeat(5,minmax(0,1fr))}
 #roomSection .float-right{margin-top:8px}#roomSection .postitguess-card{padding:14px!important}#userList{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}#userList img{width:58px;height:58px}#userList .text-lg{font-size:12px}
 #roomSection p:has(>#lobbyTeamLabel){font-size:15px}#currentMapImg{width:54px;height:46px}#roomSection #validatePostIt{max-width:none!important}#inviteFriendUrl{width:min(215px,55vw)!important}#copyUrlButton{margin-right:0}
 #roomSection .h-10:has(#postItValue){padding:9px}#inputPostItValueLabel{max-width:none!important;text-align:left}#changeOrderDescriptionLabel{font-weight:500}
 #hud-chat{width:210px}#hud-chat #chatbox{max-height:90px!important}#hud-panels-toggle{min-height:34px;padding:7px 10px;top:155px}
 #game-layout.panels-open #hud-drawer{background:#fffaf4eb;border:1px solid #dcd3e9bb;backdrop-filter:blur(7px);top:200px;padding:12px;border-radius:14px}
 #hud-drawer #hud-notes,#hud-drawer #hud-scores{background:#ffffff55!important;box-shadow:none}#hud-emotes .animation-action{min-height:34px}
 #currentPlayerTurn img{width:30px;height:30px}#currentPlayerTurn .mx-3{font-size:11px}#currentPlayerTurn .px-1{padding:5px}#currentPlayerTurn{max-width:calc(100vw - 16px)}
}
@media(prefers-reduced-motion:reduce){.cta-button,.clay-button,#avatarList [onclick],#mapsList [onclick],#animationBlock>.animation-action{transition:none!important;animation:none!important}}