/* Carry the home's cream paper, teal ink and yellow actions into the party. */
body.in-lobby,body.playing{
 --ui-bg:#aac6d7;--ui-surface:#fffdf5;--ui-primary:#087f85;--ui-primary-dark:#07515a;
 --ui-muted:#506677;--ui-text:#203b4c;--ui-border:#c5d7dc;--ui-accent:#ffdc65;
 --ui-success:#237b61;--ui-danger:#9b4a3c;--ui-shadow:0 5px 0 #769baa,0 15px 35px #244c6820;
 --background:var(--ui-bg);--background-secondary:#d7eeea;--surface:var(--ui-surface);
 --purple-primary:var(--ui-primary);--purple-dark:var(--ui-primary-dark);--postit-yellow:var(--ui-accent);
 --text-primary:var(--ui-text);--text-secondary:var(--ui-muted);--line:var(--ui-border);
 --success:var(--ui-success);--danger:var(--ui-danger);
}
body.in-lobby:not(.playing){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.in-lobby .wordmark{font-size:29px;letter-spacing:-1.2px}
body.in-lobby .nav-links{font-size:14px;color:#294d61}
body.in-lobby .nav-links .text-indigo-600{color:#075e65}
body.in-lobby .menu-settings #languageSelector{font-size:13px;min-height:36px;background:#ffffffb0}
body.in-lobby .postitguess-card{background:#fffdf5!important;border:2px solid #f7f4e9!important;border-radius:24px!important;box-shadow:0 5px 0 #759aa8,0 18px 40px #244c6826!important}
body.in-lobby .postitguess-card-transparent{background:#7ca9b840!important;border:1px solid #709caf77!important;color:#294d61!important;border-radius:17px}
body.in-lobby .postitguess-card-transparent :is(.text-white,.text-indigo-200){color:#294d61}
body.in-lobby .postitguess-card-transparent .bg-indigo-600{background:#087f85;color:#fffdf5;border-radius:9px;padding:5px 9px;box-shadow:0 3px 0 #07515a;display:inline-flex;align-items:center;gap:5px;transition:translate .2s}
body.in-lobby input:not([type=hidden]){background:#edf3f4;border:2px solid #c7d9dd!important;border-radius:12px!important;font-size:15px;min-height:44px;box-shadow:inset 0 2px 0 #dbe7e8!important}
body.in-lobby input:focus{background:#fff;outline:3px solid #63b8b0;outline-offset:2px}
body.in-lobby input::placeholder,body.playing :is(input,textarea)::placeholder{color:#667d89}
body.in-lobby .cta-button,body.playing .cta-button{
 background:#087f85;border:2px solid #086f75;border-radius:12px;min-height:42px;
 box-shadow:0 4px 0 #07515a,0 8px 16px #07515a18;filter:none;
 transition:transform .2s cubic-bezier(.2,1.4,.4,1),box-shadow .2s,background-color .2s;
}
body.in-lobby .cta-button p,body.playing .cta-button p,body.in-lobby .cta-button:hover p,body.playing .cta-button:hover p{
 background:linear-gradient(#17959a,#087f85);color:#fffdf5;min-height:38px;padding:9px 14px;border-radius:10px;font-size:14px;font-weight:900;box-shadow:inset 0 2px 0 #fff3;
}
body.in-lobby .cta-button:active,body.playing .cta-button:active{transform:translateY(3px);box-shadow:0 1px 0 #07515a}
body.in-lobby #startGameBtn,body.playing #playAgainBtn{background:#ffda62;border-color:#d5ac32;box-shadow:0 5px 0 #bd9430,0 9px 20px #bf962c24}
body.in-lobby #startGameBtn p,body.in-lobby #startGameBtn:hover p,body.playing #playAgainBtn p,body.playing #playAgainBtn:hover p{background:linear-gradient(#ffe797,#ffda62);color:#24454a;font-size:16px}
body.in-lobby .cta-button.cta-red,body.playing .cta-button.cta-red{background:#ffe1d8;border-color:#d0aca3;box-shadow:0 4px 0 #b98677}
body.in-lobby .cta-button.cta-red p,body.playing .cta-button.cta-red p,body.in-lobby .cta-button.cta-red:hover p,body.playing .cta-button.cta-red:hover p{background:linear-gradient(#ffede5,#ffe1d8);color:#9b4a3c}
body.in-lobby .cta-button:disabled,body.playing .cta-button:disabled{transform:none;opacity:.5;cursor:not-allowed}
#roomSection>.postitguess-card:first-child{padding:24px!important;animation:party-enter .5s cubic-bezier(.22,1,.36,1) both}
#roomSection #currentMapImg{width:112px;height:84px;border-radius:14px;border:3px solid #fff;box-shadow:0 4px 0 #adc6c6;transform:rotate(-3deg);transition:transform .25s}
#roomSection .lobby-header-row{align-items:center;gap:20px;min-width:0}
#lobbyMapSelector{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;align-items:center;gap:8px;width:310px;flex-shrink:0;min-width:0}
.lobby-map-content{display:flex;align-items:center;gap:12px;min-width:0}
#roomSection #lobbyMapSelector #currentMapImg{width:104px;height:84px;flex-shrink:0;transform:none;transition:none}
#currentMapTitle{font-size:14px;line-height:1.25;font-weight:900;color:#203b4c;overflow-wrap:break-word}
.lobby-map-arrow{display:grid;place-items:center;width:32px;height:34px;border:2px solid #aec8c6;border-radius:11px;background:#e7f2e9;color:#075e65;box-shadow:0 3px 0 #a1bfba;cursor:pointer;transition:transform .15s,background-color .15s,box-shadow .15s}
.lobby-map-arrow svg{width:18px;height:18px}
.lobby-map-arrow:disabled{opacity:.38;cursor:default;box-shadow:none}
.lobby-map-arrow:focus-visible{outline:3px solid #087f85;outline-offset:3px}
.lobby-map-arrow:not(:disabled):hover{background:#ffedaf;transform:translateY(-2px);box-shadow:0 5px 0 #a1bfba}
.lobby-map-arrow:not(:disabled):active{transform:translateY(2px) scale(.96);box-shadow:0 1px 0 #a1bfba}
#roomSection .lobby-room-info{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 10px;margin:0;flex:1;min-width:0;font-weight:800;text-align:left;font-size:22px;line-height:1.2;color:#203b4c}
.lobby-room-heading{overflow-wrap:anywhere}
#roomSection .lobby-room-info #roomThemeBlock{grid-column:1/-1;grid-row:2;font-size:13px;color:#506677;overflow-wrap:anywhere}
#roomSection .lobby-room-info>span:last-child{float:none;display:inline-flex;align-items:center;gap:4px;margin:0;grid-column:2;grid-row:1;background:#d8eeea;color:#07585e;border:1px solid #b8d9d2;border-radius:10px;padding:5px 8px;font-size:12px;white-space:nowrap}
@media(max-width:640px){
 #roomSection .lobby-header-row{gap:10px}
 #lobbyMapSelector{width:154px;grid-template-columns:24px minmax(0,1fr) 24px;gap:4px}
 .lobby-map-arrow{width:24px;height:30px;border-radius:9px}.lobby-map-arrow svg{width:15px;height:15px}
 .lobby-map-content{position:relative;display:block}
 #roomSection #lobbyMapSelector #currentMapImg{width:98px;height:62px;max-width:100%;border-radius:11px;box-shadow:0 3px 0 #adc6c6}
 #currentMapTitle{position:absolute;left:3px;right:3px;bottom:3px;padding:3px 2px;border-radius:5px;background:#fffdf2ed;font-size:11px;line-height:1.1;text-align:center;color:#203b4c}
 #roomSection .lobby-room-info{grid-template-columns:minmax(0,1fr);gap:4px;font-size:16px}
 #roomSection .lobby-room-info>span:last-child{grid-column:1;grid-row:auto;justify-self:start;font-size:10px;padding:3px 5px}
 #roomSection .lobby-room-info #roomThemeBlock{grid-row:auto;font-size:11px}
}
#roomSection p:has(>#lobbyTeamLabel){font-size:24px;gap:8px}
#roomSection p:has(>#lobbyTeamLabel)>span:last-child{background:#d8eeea;color:#07585e;font-size:13px;border:1px solid #b8d9d2;border-radius:10px;padding:7px 11px}
#roomSection #roomName{color:#075e65}
#roomSection .h-10:has(#postItValue){background:#fff0ba;border:2px solid #ead27e;padding:14px;border-radius:16px;box-shadow:0 3px 0 #e4c873;gap:10px}
#roomSection #inputPostItValueLabel{font-size:14px;line-height:1.45;color:#3d534e;max-width:250px!important}
#roomSection #postItValue{background:#fffdf5!important;font-size:16px}
#roomSection #validatePostIt{max-width:170px!important;margin:0;top:0}
#roomSection #userList{gap:12px;margin:20px 0}
#roomSection #userList>div{background:#eaf1f1;border:2px solid #d5e2e2;padding:9px;border-radius:17px;box-shadow:0 3px 0 #c5d7d7;animation:party-enter .35s ease-out both;transition:translate .2s,box-shadow .2s,background-color .2s}
#userList>div:nth-child(4n+2){animation-delay:.035s}#userList>div:nth-child(4n+3){animation-delay:.07s}#userList>div:nth-child(4n){animation-delay:.105s}
#roomSection #userList img{width:86px;height:86px;background:#dceae9;border:0;border-radius:12px;transition:transform .25s}
#roomSection #userList .text-lg{font-size:16px;font-weight:900;color:#203b4c}
#roomSection #userList .text-xs{font-size:12px;color:#506677}
#roomSection #userList .ribbon{font-size:11px;padding:2px 10px;background:#d5eee5;color:#075e65;border-radius:0 0 8px 8px;box-shadow:0 2px 0 #adcfc4}
#roomSection #userList .ribbon.bg-red-600{background:#ffdc65;color:#5c531f}
#roomSection #userList>div.border-indigo-600{background:#fff1b1;border-color:#d6af40;box-shadow:0 3px 0 #ddbf65}
#roomSection #userList>div:has([id^=validate-postIt-]:not(.hidden)){border-bottom-color:#72b59f}
#roomSection #userList [id^=validate-postIt-]:not(.hidden) svg{fill:#237b61;animation:party-ready .4s cubic-bezier(.2,1.6,.4,1) both}
#roomSection #userList>div.bg-indigo-200{background:#d7eeea;outline:2px dashed #087f85;outline-offset:-5px;opacity:.7}
#roomSection #userList>div.sortable-chosen{box-shadow:0 5px 0 #88bdb3,inset 0 0 0 2px #087f85}
#roomSection .items-center.p-2.mb-3{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
#roomSection :is(#startGameBtn,#leaveRoomBtn){top:0;margin:0}
#roomSection .float-right:has(#inviteFriendUrl){float:none;margin-left:auto;min-width:0}
#roomSection #urlRoomCopyLabel{font-size:14px;margin-bottom:6px;color:#355460}
#roomSection #inviteFriendUrl{width:min(300px,40vw)!important;font-size:13px;min-height:42px}
#roomSection #copyUrlButton{margin:0}
#roomSection .absolute:has(#changeOrderLabel){background:#edf4f1;border:1px dashed #aacfc5;border-radius:12px;padding:10px 12px;margin:0;align-items:center;flex-wrap:wrap}
#roomSection #changeOrderLabel{font-size:13px;color:#075e65}#roomSection #changeOrderDescriptionLabel{font-size:12px;color:#506677}
#roomSection .lobby-how-to{padding:26px!important}
/* Small paper panels stay on the edges so the gathering remains visible. */
body.playing #game-layout :is(.bg-gray-700,#hud-notes),body.playing #hud-panels-toggle{
 background:#fffdf5ed!important;border:2px solid #f7f4e9!important;color:#203b4c!important;border-radius:17px;
 box-shadow:0 4px 0 #668c9ba8,0 10px 25px #183c4f24;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
body.playing #game-layout :is(.text-white,.text-gray-200){color:#203b4c}
body.playing #game-layout :is(.text-indigo-400,.text-indigo-600),body.playing #chatbox b{color:#075e65}
body.playing #game-layout :is(.border-gray-600,.border-gray-700){border-color:#c5d7dc}
body.playing #game-layout h3{font-size:14px;font-weight:900;letter-spacing:-.2px}
body.playing #game-layout .app-title{-webkit-text-fill-color:#07515a;color:#07515a;text-shadow:0 2px 0 #fff;font-weight:900}
body.playing #game-layout>div:first-child img{filter:drop-shadow(0 3px 0 #ad9649)!important}
body.playing #currentPlayerTurn{border-radius:18px;max-width:350px}
body.playing #currentPlayerTurn .px-1{padding:9px}
body.playing #currentPlayerTurn .mx-3{font-size:14px;margin-inline:8px}
body.playing #currentPlayerAvatar{width:42px;height:42px;border:2px solid #e1bf54;background:#fff1b1;box-shadow:0 2px 0 #c5b277}
body.playing #currentPlayer{color:#075e65!important}
body.playing #currentPlayerTurn.box-shadow-blink{background:#fff4cbed!important;border-color:#e2bd50!important;outline:0;animation:none}
body.playing #currentPlayerTurn.box-shadow-blink:after{content:'';position:absolute;inset:0;border:2px solid #e2bd50;border-radius:16px;pointer-events:none;animation:party-turn 2.8s ease-in-out infinite}
body.playing #currentPlayerTurn .bg-gray-200{background:#e3eeec}
body.playing #currentPlayerTurn .h-3{height:17px}
body.playing #currentPlayerTurn .h-3 span{color:#203b4c;text-shadow:none!important;top:0;font-size:11px;font-weight:800}
body.playing #countdownProgressBar{background:linear-gradient(90deg,#a7dac6,#45a8a3);border-radius:0 4px 4px 0}
body.playing #guessAnswerContainer{gap:7px;margin:0 10px 10px}
body.playing #guessAnswerContainer label{font-size:13px;font-weight:800}
body.playing #guessAnswerContainer label{flex-basis:100%;text-align:left}
body.playing :is(#guessAnswerInput,#messageInput){min-height:40px;font-size:14px;background:#edf3f4;border:2px solid #c7d9dd!important;border-radius:11px!important}
body.playing :is(#guessAnswerInput,#messageInput):focus{background:#fff;outline:2px solid #63b8b0;outline-offset:1px}
body.playing :is(#tryToGuessBtn,#sendMessageBtn){border-radius:11px;background:#087f85;color:#fffdf5;min-height:40px;border:2px solid #086f75;box-shadow:0 3px 0 #07515a;transition:transform .2s,box-shadow .2s;filter:none;padding:7px}
body.playing #tryToGuessBtn{background:#ffdc65;color:#24454a;border-color:#d5ac32;box-shadow:0 3px 0 #bd9430}
body.playing #endPlayerTurn p{font-size:12px;min-height:34px;padding:7px 9px}
body.playing #hud-notes{padding:12px;width:205px;animation:party-enter .45s ease-out both}
body.playing #hud-notes:before{content:'';position:absolute;top:-8px;left:27px;width:48px;height:16px;background:#f7d776b3;border:1px solid #e9c86280;transform:rotate(-7deg);pointer-events:none}
body.playing #hud-notes h2{font-size:15px;font-weight:900;color:#07515a}
body.playing #hud-notes>span{font-size:12px;line-height:1.5;color:#506677}
body.playing #game-layout #notepadPlaceholder{height:160px;font-size:14px;line-height:25px!important;background:repeating-linear-gradient(#fff3c7,#fff3c7 24px,#e5d59a 25px)!important;border:1px solid #ead793!important;color:#355460!important;border-radius:10px!important}
body.playing #hud-scores,body.playing #hud-chat{width:255px;animation:party-enter .45s ease-out both}
body.playing #hud-scores{animation-delay:.08s}
body.playing #game-layout button.bg-gray-600{background:#d7eeea;border:1px solid #9dcfc5;border-radius:10px;color:#075e65;font-size:12px;padding:7px;box-shadow:0 2px 0 #aacfc7;transition:translate .2s,background-color .2s}
body.playing #hud-scores svg[fill=white],body.playing #hud-scores svg [fill=white]{fill:#075e65}
body.playing #hud-scores :is(.px-2.py-1){background:#d7eeea;border-radius:14px 14px 0 0}
body.playing #hud-chat .px-2.py-1.rounded-t-lg{background:#d7eeea;border-radius:14px 14px 0 0}
body.playing #hud-chat #chatbox{font-size:14px;padding:9px;max-height:145px!important}
body.playing #chatbox .break-all{word-break:normal;overflow-wrap:anywhere}
body.playing #postMessageContainer{padding:8px;gap:7px}
body.playing #userScoreboard>li{border-color:#c5d7dc;padding-block:5px;font-size:13px}
body.playing #userTries{font-size:13px}
body.playing #hud-emotes{animation:party-toolbar .45s ease-out both}
body.playing #hud-emotes h3{font-size:12px;color:#07515a}
body.playing #animationBlock{gap:4px;padding:7px}
body.playing #animationBlock>.animation-action{background:#edf4f1;color:#075e65;border:1px solid #c9dfd8;min-width:36px;min-height:36px;border-radius:10px;box-shadow:0 2px 0 #c1d9d0;transition:transform .2s cubic-bezier(.2,1.7,.4,1),background-color .2s,box-shadow .2s}
body.playing #animationBlock svg{width:24px;height:24px;transition:transform .2s}
body.playing #animationBlock>.animation-action:active{transform:translateY(2px);box-shadow:none}
body.playing #endGameContainer{top:14%!important;margin:0!important;border-radius:24px!important;padding:22px!important;animation:party-toolbar .5s ease-out both}
body.playing #gameIsOverLabel{font-size:22px;font-weight:900;color:#07515a}
body.playing #hud-panels-toggle{font-size:13px;transition:translate .2s,background-color .2s}
body.playing #hud-panels-toggle[aria-expanded=true]{background:#ffedaf!important;color:#07515a!important}
body:is(.in-lobby,.playing) .toastify{border:2px solid #c5d7dc;border-radius:14px;box-shadow:0 4px 0 #769baa,0 15px 35px #244c6820;color:#203b4c;font-size:14px}
body.playing .toastify{max-width:min(360px,calc(100vw - 32px));font-size:13px;line-height:1.45}
@media(hover:hover){
 body.in-lobby .cta-button:hover,body.playing .cta-button:hover{transform:translateY(-3px) rotate(-.5deg);box-shadow:0 7px 0 #07515a,0 12px 20px #07515a20;filter:none}
 body.in-lobby #startGameBtn:hover,body.playing #playAgainBtn:hover{box-shadow:0 8px 0 #bd9430,0 12px 20px #bf962c24}
 body:is(.in-lobby,.playing) .cta-button.cta-red:hover{box-shadow:0 7px 0 #b98677}
 body:is(.in-lobby,.playing) .cta-button:hover svg{animation:party-wiggle .55s ease-in-out}
 #roomSection #currentMapImg:hover{transform:rotate(0) scale(1.035)}
 body.in-lobby .postitguess-card-transparent .bg-indigo-600:hover{translate:0 -2px}
 #roomSection #userList>div:hover{translate:0 -3px;background:#d9ede8;box-shadow:0 6px 0 #adcac3}
 #roomSection #userList>div:hover img{transform:scale(1.06) rotate(2deg)}
 body.playing #game-layout button.bg-gray-600:hover{translate:0 -2px;background:#c7e9df}
 body.playing :is(#tryToGuessBtn,#sendMessageBtn):hover{transform:translateY(-2px)}
 body.playing #animationBlock>.animation-action:hover{transform:translateY(-4px) rotate(-3deg);background:#ffedaf;box-shadow:0 5px 0 #ddbf65}
 body.playing #animationBlock>.animation-action:hover svg{transform:rotate(8deg) scale(1.1)}
 body.playing #hud-panels-toggle:hover{translate:0 -2px;background:#e1f0e9!important}
}
@keyframes party-ready{from{transform:scale(.65) rotate(-18deg);opacity:.3}to{transform:scale(1);opacity:1}}
@keyframes party-turn{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes party-toolbar{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:900px){
 #roomSection>.postitguess-card:first-child{padding:20px!important}
 #roomSection .items-center.p-2.mb-3{gap:10px}
 #roomSection .float-right:has(#inviteFriendUrl){width:100%;margin:5px 0 0}
 #roomSection #inviteFriendUrl{width:min(420px,65vw)!important}
 body.playing #hud-scores,body.playing #hud-chat{width:225px}
 body.playing #hud-notes{width:180px}
}
@media(max-width:640px){
 body.in-lobby .wordmark{font-size:25px}body.in-lobby .nav-links{font-size:12px}
 #roomSection>.postitguess-card:first-child{padding:18px!important;border-radius:20px!important}
 #roomSection #currentMapImg{width:82px;height:62px}
 #roomSection p:has(>#lobbyTeamLabel){font-size:21px;padding-left:12px;gap:5px}
 #roomSection p:has(>#lobbyTeamLabel)>span:last-child{margin-left:0;font-size:12px;padding:4px 8px}
 #roomSection .h-10:has(#postItValue){padding:11px;gap:10px}
 #roomSection #inputPostItValueLabel{max-width:none!important;text-align:left;font-size:14px}
 #roomSection #postItValue{min-width:100%;max-width:none!important}
 #roomSection #validatePostIt{max-width:none!important;width:100%}
 #roomSection #userList{gap:8px;margin:17px 0}
 #roomSection #userList img{width:74px;height:74px}#roomSection #userList .text-lg{font-size:14px}
 #roomSection #userList>div{padding:6px;border-radius:14px}
 #roomSection #inviteFriendUrl{width:calc(100% - 100px)!important;min-width:0;font-size:12px}
 #roomSection #copyUrlButton p{padding:9px 11px;font-size:13px}
 #roomSection .lobby-how-to{padding:19px!important}
 body.playing #currentPlayerTurn{width:calc(100vw - 16px);max-width:calc(100vw - 16px)}
 body.playing #currentPlayerTurn .mx-3{font-size:13px;margin-inline:6px}
 body.playing #currentPlayerTurn .px-1{padding:7px}
 body.playing #currentPlayerAvatar{width:35px;height:35px}
 body.playing #endPlayerTurn p{font-size:11px;padding:6px 7px;min-height:32px}
 body.playing #guessAnswerInput{font-size:13px}
 body.playing #hud-chat{width:225px;bottom:110px}
 body.playing #hud-chat #chatbox{max-height:90px!important;font-size:13px}
 body.playing #messageInput{font-size:13px}
 body.playing #hud-panels-toggle{top:190px;right:10px;min-height:42px;padding:9px 12px}
 body.playing #game-layout.panels-open #hud-drawer{top:242px;bottom:90px;padding:14px;border:2px solid #f7f4e9;border-radius:20px;background:#fffdf5f5;box-shadow:0 5px 0 #759aa8,0 18px 40px #244c6826}
 body.playing #hud-drawer :is(#hud-notes,#hud-scores){width:100%;animation:none}
 body.playing #hud-drawer #hud-notes{margin-top:8px}
 body.playing #animationBlock>.animation-action{min-height:40px}
 body.playing #animationBlock{padding:7px;gap:5px}
 body.playing #endGameContainer{width:calc(100vw - 32px);min-width:0}
 body.playing .toastify{top:242px!important}
 /* Keep the latest simultaneous notice readable without covering the finale's actions. */
 body.playing .toastify:has(~.toastify){visibility:hidden;pointer-events:none}
 body.playing:has(#endGameContainer:not(.hidden)) .toastify{top:12px!important}
}
@media(prefers-reduced-motion:reduce){
 body:is(.in-lobby,.playing) *,body:is(.in-lobby,.playing) *:before,body:is(.in-lobby,.playing) *:after{animation:none!important;transition:none!important}
}