/* Presentation only: all existing IDs, actions, visibility and mobile drawers
   stay under the current game handlers. Cream glass with lavender/blue depth. */
/* The viewport-sized HUD wrapper must pass blank-space drags to OrbitControls.
   Its existing interactive cards/buttons still opt back into pointer events. */
body.playing #gameSection{pointer-events:none}
body.playing #hud-panels-toggle{pointer-events:auto}
#ingameLeaveBtn{display:none}
body.playing #ingameLeaveBtn{display:inline-flex;position:fixed;top:calc(26px + var(--hud-turn-height,130px));left:14px;z-index:110;align-items:center;gap:7px;max-width:calc(100vw - 28px);min-height:40px;padding:8px 12px;border:1px solid #d29b8e;border-radius:12px;background:#fff2e9;color:#994836;font:800 13px/1.3 var(--font);box-shadow:0 3px 0 #bf8b7a,0 6px 16px #24344c20;pointer-events:auto;cursor:pointer;transition:transform .18s,background-color .18s,box-shadow .18s}
body.playing #ingameLeaveBtn svg{width:18px;height:18px;flex-shrink:0}
body.playing #ingameLeaveBtn:hover{background:#ffe3d5;transform:translateY(-2px);box-shadow:0 5px 0 #bf8b7a,0 8px 18px #24344c26}
body.playing #ingameLeaveBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #bf8b7a}
body.playing #ingameLeaveBtn:focus-visible{outline:3px solid #087f85;outline-offset:3px}
@media(max-width:640px){body.playing #ingameLeaveBtn{left:8px;max-width:calc(100vw - 150px);font-size:12px}}
body.playing .hud-meta>#ingameLeaveBtn{position:static;float:right;max-width:65%;min-height:30px;padding:5px 8px;margin:0 0 4px 8px}
body.playing .hud-meta:has(>#ingameLeaveBtn) .camera-view-selector{clear:both}
@media(prefers-reduced-motion:reduce){body.playing #ingameLeaveBtn{transition:none}}
body.playing #game-layout :is(.bg-gray-700,#hud-notes),body.playing #hud-panels-toggle{
 background:linear-gradient(145deg,#fffdf5df,#f0f0fbdf)!important;
 border:1px solid #e3dfeddb!important;border-radius:16px!important;
 box-shadow:0 3px 0 #8a95b328,0 10px 26px #24344c20;
 color:#263e53!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
body.playing #game-layout :is(#hud-scores,#hud-chat) :is(.rounded-t-lg,div.px-2.py-1){background:#dfe8f5b8;border-color:#c4cfdf;color:#344665}
body.playing #game-layout :is(h2,h3){color:#344665}
body.playing #game-layout :is(.border-gray-600,.border-gray-700){border-color:#ccd5e3b0}
body.playing #game-layout :is(.text-white,.text-gray-400){color:#425971}
body.playing #game-layout :is(.text-indigo-400,.text-indigo-600),body.playing #chatbox b{color:#365d88}
body.playing #currentPlayerTurn{box-shadow:0 3px 0 #8a95b333,0 12px 28px #24344c24}
body.playing #currentPlayerTurn.box-shadow-blink{background:linear-gradient(135deg,#fff6dbe8,#fffdf2dc)!important}
body.playing #currentPlayerTurn .px-1{padding:7px 9px}
body.playing #currentPlayer{color:#284d70!important}
body.playing #currentPlayerTurn .bg-gray-200{background:#dfe6efb8}
body.playing #game-layout :is(#guessAnswerInput,#messageInput){background:#f8fbffde!important;border-color:#c7d5e5!important}
body.playing #game-layout :is(#guessAnswerInput,#messageInput):focus{background:#fffdf7!important;outline-color:#7eadd5}
body.playing #game-layout :is(#tryToGuessBtn,#sendMessageBtn){min-height:36px;font-size:13px;padding:6px 8px}
body.playing #game-layout #sendMessageBtn{background:#087f85;color:#fffdf5}
body.playing #game-layout #userScoreboard li{border-color:#ccd5e3b0;padding-block:5px;font-size:13px}
body.playing #endPlayerTurn p{min-height:32px;padding:6px 9px}
body.playing #game-layout button.bg-gray-600{background:#e1e9f5de;color:#365d88;border-color:#b6c9df;box-shadow:0 2px 0 #a7bcd2}
.camera-view-selector{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:34px;margin-top:8px;padding:2px;gap:3px;background:#dfe8f5de;border:1px solid #b6c9df;border-radius:10px;box-shadow:0 2px 0 #a7bcd2}
.camera-view-selector button{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;border:1px solid transparent;border-radius:7px;padding:2px 3px;font-size:11px;line-height:18px;font-weight:800;color:#365d88;background:transparent;white-space:nowrap;transition:background-color .18s,box-shadow .18s,transform .18s}
.camera-view-selector button svg{width:14px;height:14px;flex-shrink:0}
.camera-view-selector button>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.camera-view-selector button[aria-pressed=true]{background:#ffe38a;color:#24454a;border-color:#d3b558;box-shadow:inset 0 1px 0 #fff9,0 1px 0 #c2a64c;font-weight:900}
.camera-view-selector button[aria-pressed=true] svg{stroke-width:2.5}
.camera-view-selector button:hover{background:#fff0bd;transform:translateY(-1px)}
.camera-view-selector button:active{transform:scale(.98)}
.camera-view-selector button:focus-visible{outline:2px solid #087f85;outline-offset:1px}
.camera-view-selector button::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);width:max-content;max-width:200px;right:0;padding:7px 10px;border:1px solid #dac58f;border-radius:10px;background:#fff5d1;box-shadow:0 3px 0 #c7b984;color:#294d61;font-size:12px;font-weight:800;line-height:1.35;white-space:normal;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;z-index:15}
.camera-view-selector button:first-child::after{left:0;right:auto}
.camera-view-selector button:is(:hover,:focus-visible)::after{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.camera-view-selector button,.camera-view-selector button::after{transition:none}}
body.playing #game-layout #hud-emotes .bg-gray-700{background:linear-gradient(135deg,#fffdf2dc,#eaf0fbda)!important}
body.playing #animationBlock>.animation-action{background:#eef2fbd6;border-color:#cbd6e7;box-shadow:0 2px 0 #b5c5dc;color:#365d88;min-height:34px}
body.playing #animationBlock>.animation-action:hover{background:#fff2c0}
/* Button semantics and localized accessible names also drive the visible tips.
   These do not depend on Microtip's tooltip role being applied to a control. */
#animationBlock>.animation-action{position:relative;overflow:visible}
body.playing #hud-emotes:has(.animation-action:is(:hover,:focus-visible)){z-index:12}
#animationBlock>.animation-action::after{
 content:attr(aria-label);position:absolute;bottom:calc(100% + 14px);left:50%;
 width:max-content;max-width:160px;padding:7px 11px;box-sizing:border-box;
 background:#fff4c5;color:#164556;border:2px solid #e4bd58;border-radius:11px;
 font-family:inherit;font-size:14px;font-weight:800;line-height:1.3;
 white-space:normal;overflow-wrap:anywhere;text-align:center;
 box-shadow:0 3px 0 #b68e36,0 6px 16px #102c4326;z-index:30;
 pointer-events:none;visibility:hidden;opacity:0;transform:translate(-50%,5px);
 transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
#animationBlock>.animation-action:first-child::after{left:0;transform:translate(0,5px)}
#animationBlock>.animation-action:last-child::after{left:auto;right:0;transform:translate(0,5px)}
#animationBlock>.animation-action:is(:hover,:focus-visible)::after{visibility:visible;opacity:1;transform:translate(-50%,0)}
#animationBlock>.animation-action:is(:first-child,:last-child):is(:hover,:focus-visible)::after{transform:translate(0,0)}
#animationBlock>.animation-action:focus-visible{outline:3px solid #087f85;outline-offset:3px}
@media(prefers-reduced-motion:reduce){#animationBlock>.animation-action::after{transition:none}}
body.playing #hud-notes:before{opacity:.8}
body.playing #game-layout #notepadPlaceholder{background:repeating-linear-gradient(#fff6d4e8,#fff6d4e8 24px,#e5d59a 25px)!important}
/* A legible badge over bright snow, water and dark indoor maps. */
body.playing #game-layout .ingame-brand{top:14px!important;bottom:auto;height:auto;margin:0;padding:0;width:max-content;max-width:calc(100vw - 24px);transform:translateX(-50%)}
body.playing .ingame-brand>div{left:0!important}
body.playing .ingame-brand .flex{padding:9px 16px;background:#12364bee;border:1px solid #ffffff70;border-radius:18px;box-shadow:0 4px 0 #09233680,0 8px 24px #071e3330;gap:10px;flex-wrap:nowrap}
body.playing #game-layout .app-title{color:#fffdf5!important;-webkit-text-fill-color:#fffdf5;font-size:22px;font-weight:900;letter-spacing:.2px;text-shadow:0 2px 0 #071e33;margin:0;white-space:nowrap}
body.playing .ingame-brand .brand-note{margin:0;width:30px;height:33px;font-size:24px;flex-shrink:0}
/* Fixed metadata and headers, with independent lists using all space above chat. */
body.playing #game-layout #hud-scores{bottom:calc(26px + var(--hud-chat-height,260px))!important;max-height:none;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:0}
body.playing #hud-scores>.hud-meta{flex:none}
body.playing #hud-scores>:is(.hud-history,.hud-scoreboard){display:flex;flex-direction:column;flex:0 1 auto;min-height:0;overflow:hidden;margin:0}
body.playing #hud-scores>:is(.hud-history,.hud-scoreboard)>:first-child{flex:none}
body.playing #hud-scores>.hud-scoreboard>div:last-child{flex:1 1 auto;min-height:0;overflow:hidden}
body.playing #hud-scores :is(.hud-history-scroll,#userScoreboard){flex:1 1 auto;min-height:0;height:auto!important;max-height:none!important;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#7e9eaf #e7edf1;scrollbar-gutter:stable}
body.playing #hud-scores #userScoreboard>div{border-bottom:1px solid #ccd5e3b0}
body.playing #hud-scores :is(.hud-history-scroll,#userScoreboard)::-webkit-scrollbar{width:6px;height:6px}
body.playing #hud-scores :is(.hud-history-scroll,#userScoreboard)::-webkit-scrollbar-thumb{background:#7e9eaf;border-radius:10px}
body.playing #game-layout #hud-scores>:is(.hud-history:not(:has(#userTries tr)),.hud-scoreboard:not(:has(#userScoreboard li))){background:transparent!important;border-color:transparent!important;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.playing .hud-history:not(:has(#userTries tr)) .hud-history-scroll,body.playing .hud-scoreboard:not(:has(#userScoreboard li))>div:last-child{display:none}
/* A celebratory card: strong type, trophy, paper confetti and a primary replay. */
body.playing #game-layout #endGameContainer{top:clamp(80px,18vh,180px)!important;width:420px;min-width:0;max-width:calc(100vw - 28px);margin:0;padding:26px!important;overflow:hidden;border:3px solid #ffd05c!important;border-radius:28px!important;background:linear-gradient(145deg,#fffdf5,#fff0cb)!important;box-shadow:0 7px 0 #a87224,0 13px 0 #102c4340,0 24px 65px #071e3355;color:#163c50!important}
body.playing #endGameContainer:not(.hidden){display:flex;flex-direction:column;align-items:center;gap:18px;animation:endgame-arrive .55s cubic-bezier(.2,1.3,.4,1) both}
body.playing #endGameContainer:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.65;background:radial-gradient(circle at 9% 15%,#00a7aa 0 3px,transparent 4px),radial-gradient(circle at 89% 23%,#ee8b6e 0 4px,transparent 5px),radial-gradient(circle at 94% 72%,#00a7aa 0 3px,transparent 4px),radial-gradient(circle at 7% 68%,#ffc53d 0 5px,transparent 6px),radial-gradient(circle at 81% 7%,#ffc53d 0 3px,transparent 4px)}
body.playing #endGameContainer:after{content:'✦';position:absolute;top:34px;left:24px;font-size:24px;color:#009799;transform:rotate(-15deg);text-shadow:332px 28px 0 #ed8568,12px 180px 0 #efb432;pointer-events:none}
body.playing #endGameContainer>*{position:relative;z-index:1}
.endgame-medal{display:grid;place-items:center;width:78px;height:78px;border:2px solid #ffe599;background:#fff8dd;border-radius:25px;box-shadow:0 4px 0 #efd68e;transform:rotate(-7deg)}
.endgame-medal svg{width:60px;height:60px}
body.playing #game-layout #gameIsOverLabel{order:1;margin:0;color:#163c50!important;font-size:23px;font-weight:800;line-height:1.3;text-wrap:balance}
body.playing #game-layout #gameIsOverLabel b{display:block;margin-top:5px;color:#007b83!important;font-size:34px;font-weight:900}
body.playing #endGameContainer .cta-button{margin:0;min-height:48px;transition:transform .18s,box-shadow .18s}
body.playing #endGameContainer .cta-button:hover{transform:translateY(-3px) rotate(-1deg)}
body.playing #endGameContainer .cta-button:active{transform:translateY(3px)}
body.playing #endGameContainer .cta-button:focus-visible{outline:3px solid #007b83;outline-offset:5px}
body.playing #endGameContainer #playAgainBtn{order:2;width:100%;background:#ffcf43;border:2px solid #dda522;box-shadow:0 5px 0 #c69225,0 8px 15px #c6922520}
body.playing #endGameContainer #playAgainBtn p{color:#164556;background:linear-gradient(#ffe68b,#ffce42);font-size:15px;padding:12px 10px;min-height:48px}
body.playing #endGameContainer .cta-red{order:3;background:#fffaf0;border:1px solid #b6d1d4;box-shadow:0 3px 0 #b6d1d4}
body.playing #endGameContainer .cta-red p{color:#2a5969;background:#fffaf0;font-size:14px}
@keyframes endgame-arrive{from{opacity:0;transform:translateX(-50%) translateY(16px) scale(.9)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@media(min-width:641px) and (max-height:700px){
 body.playing #hud-scores>.hud-meta{padding:6px 10px;font-size:12px}
 body.playing #hud-scores>.hud-meta .mt-2{margin-top:4px}
 body.playing #hud-scores>.hud-meta svg{width:18px;height:18px}
 body.playing #hud-scores h3{font-size:12px}
 body.playing #game-layout #endGameContainer{top:80px!important;padding:18px!important;gap:12px}
}
@media(max-width:640px){
 body.playing #game-layout :is(#tryToGuessBtn,#sendMessageBtn){min-height:40px;font-size:13px;padding:7px}
 body.playing #animationBlock>.animation-action{min-height:40px}
 body.playing #game-layout #hud-drawer{background:#fffdf3ed;border-color:#e3dfed;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
 body.playing #game-layout.panels-open #hud-drawer{overflow:hidden;gap:10px;top:70px;bottom:78px;padding:12px}
 body.playing #gameSection:has(.panels-open) #hud-panels-toggle{top:14px;z-index:40}
 body.playing #gameSection:has(#endGameContainer:not(.hidden)) #hud-panels-toggle{top:14px}
 body.playing #hud-drawer #hud-notes{flex:0 0 auto}
 body.playing #hud-drawer #hud-notes textarea{height:65px}
 body.playing #game-layout #hud-drawer #hud-scores{flex:1 1 0;overflow:hidden;min-height:0}
 body.playing #hud-scores>.hud-meta{padding:5px 10px;font-size:12px}
 body.playing #hud-scores>.hud-meta svg{width:18px;height:18px}
 body.playing #hud-scores>.hud-meta .mt-2{margin-top:3px}
 body.playing #game-layout #endGameContainer{top:80px!important;padding:22px 18px!important;gap:16px}
 body.playing #game-layout #gameIsOverLabel{font-size:20px}
 body.playing #game-layout #gameIsOverLabel b{font-size:29px}
}
@media(max-width:640px) and (max-height:700px){
 body.playing #hud-drawer #hud-notes{padding:8px;margin-top:0}
 body.playing #hud-drawer #hud-notes h2{font-size:13px}
 body.playing #hud-drawer #hud-notes>span{font-size:10px;line-height:1.3}
 body.playing #hud-drawer #hud-notes textarea{height:44px}
 body.playing #game-layout #hud-drawer #hud-scores{gap:6px}
}
@media(prefers-reduced-motion:reduce){body.playing #currentPlayerTurn.box-shadow-blink:after{animation:none!important;opacity:.65}}