/* A quiet start screen opens into the full tree. All settings use the same controls. */
.at-start .map-bar{display:none}
.at-start #map{grid-template-rows:auto}
.at-start .tree-scroll{grid-row:1;overflow:visible;padding-bottom:82px}
.at-start .tree-scene{width:min(calc((100dvh - 264px)*1.2970027),100%);overflow:visible}
.at-start .map-tools{grid-row:1}
.enter-tree{position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0;border:0;border-radius:25%;background:transparent;color:#fffbe8}
.enter-caption{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:238px;height:80px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 8px 3px;background:url("assets/wood-enter.webp") center/100% 100% no-repeat;font-size:23px;font-weight:800;text-shadow:0 2px 1px #095830;filter:drop-shadow(0 3px 2px #27433344);animation:enter-invite 2.8s ease-in-out infinite}
.enter-caption .ui-icon{width:26px;height:26px}
.enter-tree:hover .enter-caption{filter:drop-shadow(0 4px 3px #254b4145) brightness(1.08)}
.enter-tree:focus-visible{outline:0;box-shadow:none}
.enter-tree:focus-visible .enter-caption{outline:3px solid #fff7dd;outline-offset:2px;box-shadow:0 0 0 5px #185f51;border-radius:20px}
.enter-tree:active .enter-caption{filter:brightness(.96)}
@keyframes enter-invite{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.035)}}
body:not(.at-start) header{display:none}
body:not(.at-start) #map{display:block;max-width:none;margin:0;padding:0 0 8px;min-height:0}
.map-bar{display:flex;align-items:center;gap:16px;max-width:1300px;height:78px;padding:7px 18px;margin:auto}
.map-bar>button,.map-bar-actions button{border:0;background:url("assets/wood-nav.webp") center/100% 100% no-repeat;color:#1e5650;font-size:15px;font-weight:800;height:61px;padding:7px 12px 0;flex:none}
.map-bar>button{width:125px}
.map-bar .map-prompt{flex:1;min-width:0;width:auto;height:52px;line-height:1.25;font-size:19px;background:#fff4d5;border:2px solid #a4723d;border-radius:16px;padding:4px 12px;color:#214f43;text-shadow:none;box-shadow:0 3px 0 #64462855}
.map-bar-actions{display:flex;gap:6px}
.map-bar-actions button{width:58px;display:grid;place-items:center;padding:7px 9px 0}
.map-bar-actions .ui-icon{width:26px;height:26px}
body:not(.at-start) .tree-scene{width:min(calc((100dvh - 94px)*1.2970027),calc(100vw - 8px),1429px);margin:auto}
body:not(.at-start) .tree-scroll{padding:0;overflow-y:hidden}
body:not(.at-start) .object-label{font-size:15px;font-weight:700}
.map-entering .tree-scene{animation:enter-world .6s cubic-bezier(.2,.7,.2,1)}
@keyframes enter-world{from{opacity:.45;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
body:not(.at-start) .room-stage{width:min(1200px,calc((100dvh - 78px)*1.5),100%)}
body:not(.at-start) .room-toolbar{padding-top:5px;margin-top:3px}
#settingsDialog{width:330px;max-width:calc(100vw - 24px);padding:18px 20px 24px}
#settingsHost{clear:both;padding-top:8px}
#settingsHost .map-tools{width:240px;max-width:100%;margin:auto;display:flex;flex-direction:column}
#settingsHost .settings-caption{width:100%;height:76px;margin:0;padding:18px 14px 0}
#settingsHost .settings-caption h2{font-size:20px}
#settingsHost .settings-controls{flex-direction:column;flex-wrap:nowrap;width:100%;padding:0 5px;gap:10px!important}
#settingsHost .settings-controls button[role="switch"]{width:100%;height:68px;min-height:68px;font-size:18px;padding:12px 20px 0}
#settingsHost #reset{width:160px;height:66px;font-size:18px}
.motion-paused .enter-caption,.motion-paused.map-entering .tree-scene{animation:none}
.motion-paused .tree-world{transition:none}
@media(max-width:600px){
 .at-start .tree-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:82px}
 .at-start .tree-scene{width:660px;min-width:660px}
 .at-start .map-tools{margin-top:2px}
 .map-bar{height:72px;padding:5px 8px;gap:6px}
 .map-bar>button{width:92px;font-size:13px;height:56px}
 .map-bar .map-prompt{font-size:13px;line-height:1.3}
 .map-bar-actions{gap:3px}
 .map-bar-actions button{width:46px;height:56px;padding-inline:7px}
 .map-bar-actions .ui-icon{width:23px;height:23px}
 body:not(.at-start) .tree-scene{width:660px;min-width:660px}
 body:not(.at-start) .object-label{font-size:14px}
 body:not(.at-start) .room-stage{width:690px;min-width:690px}
}
@media(prefers-reduced-motion:reduce){.enter-caption,.map-entering .tree-scene{animation:none}}

/* Local Cyrillic display font and plaques fixed onto the navigation rail. */
@font-face{font-family:"Shantell Sans";src:url("assets/fonts/ShantellSans.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
.brand,.age,.settings-caption h2,.header-actions button,.map-bar button,.map-prompt,.enter-caption,.object-label,.room-title h1,.room-toolbar button,dialog h2{font-family:"Shantell Sans","Trebuchet MS",sans-serif;font-variation-settings:"BNCE" 15,"INFM" 20,"SPAC" 0; font-weight:800}
.brand{font-size:38px;letter-spacing:-1.1px}
.age{background-image:url("assets/wood-plank.webp");padding:0 10px 5px;height:54px;position:relative;z-index:1;align-self:center}
.header-actions{position:relative}
.header-actions::before{content:"";position:absolute;left:-175px;right:12px;top:22px;height:24px;border:2px solid #704621;border-radius:4px;background:linear-gradient(#a96b31,#c48a48 40%,#8c5426);z-index:-1}
.settings-caption{background-image:url("assets/wood-plank.webp");padding:0 14px 6px;height:64px;position:relative;inset:auto;z-index:1}
.settings-controls{position:relative;inset:auto;z-index:1}
.at-start .map-tools{isolation:isolate;padding:8px 5px 14px;position:relative}
.at-start .map-tools::before{content:"";position:absolute;inset:0 3px;border:4px solid #78502b;border-radius:22px;background:#a66e39;box-shadow:inset 0 0 0 3px #e1a564,0 4px 0 #4a402b55;z-index:-1}
.at-start .settings-caption{height:64px}
#settingsHost .settings-caption{height:64px;padding:0 14px 6px}
.room-title h1{font-weight:800}
.room-toolbar .room-title{background:#132c2b60;border:1px solid #ffffff24;border-radius:14px;padding:7px 14px}
.room-axel::before{content:"";position:absolute;bottom:1%;left:17%;width:66%;height:7%;border-radius:50%;background:#59452444;filter:blur(2px);z-index:0}
.room-axel .mascot-body{z-index:1}
.sound-label{display:flex;align-items:center;gap:7px}
.sound-label .ui-icon{width:20px;height:20px}
button[aria-checked="false"] .sound-label .ui-icon{opacity:.5}
.dialog-close{float:right;display:flex;align-items:center;justify-content:center;gap:7px;width:142px;height:55px;padding:5px 15px 0 12px;border:0;border-radius:12px;background:url("assets/wood-nav.webp") center/100% 100% no-repeat;color:#513820;font-family:"Shantell Sans","Trebuchet MS",sans-serif;font-weight:800;font-size:15px;filter:drop-shadow(0 2px 1px #6e502a33)}
.close-seal{display:grid;place-items:center;width:25px;height:25px;flex:none;border:2px solid #a44937;border-radius:50%;background:#df7356;box-shadow:inset 0 1px 0 #ffa485}
.close-seal .ui-icon{width:21px;height:21px}
.dialog-close:hover{filter:drop-shadow(0 3px 2px #6e502a44) brightness(1.05)}
.dialog-close:active{transform:translateY(2px)}
dialog:not(#settingsDialog) h2{clear:both;padding-top:10px}
body[data-room="objects"] .room-actions{top:68.7%}
body[data-room="trick"] .room-actions{top:71.6%}
body[data-room="sound"] .room-actions{top:71.4%}
@media(max-width:900px){.header-actions::before{left:-142px}.brand{font-size:36px}.map-prompt{font-size:17px}}
@media(max-width:600px){
 .brand{font-size:25px;letter-spacing:-1px}
 .header-actions::before{left:12px}
 .at-start .map-tools{display:flex;max-width:300px}
 .at-start .settings-controls{flex-direction:column;flex-wrap:nowrap}
 .at-start .settings-controls button[role="switch"]{width:100%;font-size:17px}
 .at-start .settings-caption{width:100%;height:64px}
 .map-bar .map-prompt{font-size:13px;line-height:1.25;height:50px;padding:4px 8px}
 .room-toolbar .room-title{padding:5px 8px}
}

/* Object-led tree navigation: overview, travelling camera, selected object, room. */
.tree-world{transform-origin:0 0;transition:transform .68s cubic-bezier(.2,.75,.2,1)}
body:not(.at-start) .object-label{padding:4px;border-radius:50%;font-size:13px;gap:0}
body:not(.at-start) .object-label b{width:25px;height:25px;font-size:12px}
.object-name{display:none}
.object:hover .object-name,.object:focus-visible .object-name{display:block;margin:0 7px}
body:not(.at-start) .object:hover .object-label,body:not(.at-start) .object:focus-visible .object-label{border-radius:16px;gap:3px}
.object.selected{border:3px solid #ffec9a;background:#fff4d518;box-shadow:0 0 0 5px #ffe48a33;z-index:4}
.map-focused .object.selected:focus-visible{outline:none}
.map-focused .object:not(.selected):hover{border-color:transparent;background:transparent;box-shadow:none}
.map-focused .object-label{opacity:0;pointer-events:none}
.map-focused .object.selected .object-label{opacity:1}
.map-focused .object .object-name{display:none}
.map-focused .object.selected .object-label{border-radius:50%}
.map-axel{transition:opacity .2s}
.map-focused .map-axel{opacity:0;pointer-events:none}
.map-focused .tree-scroll{overflow:hidden}
.map-focused .tree-scene{overflow:visible}
.map-focused .tree-art{filter:none}
.tree-dock{position:fixed;z-index:8;bottom:14px;left:50%;transform:translateX(-50%);width:470px;max-width:calc(100vw - 24px);text-align:center;color:#214f43;filter:drop-shadow(0 3px 2px #49321950)}
.tree-selection{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 -3px;height:72px;padding:6px 30px 0;background:url("assets/wood-plank.webp") center/100% 100% no-repeat}
.tree-selection h2{font-family:"Shantell Sans","Trebuchet MS",sans-serif;font-size:23px;line-height:1.25;margin:0;font-weight:800}
.tree-selection>span{font-size:13px;font-weight:800;color:#5c5937;white-space:nowrap}
.tree-dock-actions{display:flex;align-items:center;justify-content:center;gap:16px}
.tree-dock button{height:62px;border:0;border-radius:16px;font-family:"Shantell Sans","Trebuchet MS",sans-serif;font-weight:800;color:#214f43;background:url("assets/wood-nav.webp") center/100% 100% no-repeat}
.tree-dock .tree-step{display:grid;place-items:center;width:66px;padding:8px 14px 0}
.tree-step .ui-icon{width:28px;height:28px}
#previousObject .ui-icon{transform:rotate(180deg)}
.tree-dock .tree-confirm{width:240px;background-image:url("assets/wood-enter.webp");height:65px;padding:0 14px 3px;font-size:20px;color:#fffbe8;text-shadow:0 2px 1px #095830}
.tree-dock button:hover{filter:brightness(1.08)}
.tree-key-hint{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.map-opening .tree-dock{opacity:.65}
.map-opening .tree-world{transition-duration:.35s}
.motion-paused .tree-world,.motion-paused .map-axel{transition:none}
@media(max-width:600px){
 .tree-dock{bottom:12px;max-width:calc(100vw - 20px)}
 .tree-selection{gap:9px;height:65px;padding-inline:18px}
 .tree-selection h2{font-size:19px}
 .tree-selection>span{font-size:11px}
 .tree-dock-actions{gap:9px}
 .tree-dock .tree-confirm{width:205px;height:61px;font-size:18px}
 .tree-dock .tree-step{width:53px;height:57px;padding-inline:10px}
 .tree-key-hint{display:none}
}
@media(prefers-reduced-motion:reduce){.tree-world,.map-axel{transition:none}}

/* Axel offers a ready activity when selected on the tree overview. */
#axelInvite{width:480px;max-width:calc(100vw - 24px);padding:12px 22px 22px}
.invite-content{clear:both;display:flex;align-items:center;gap:14px;padding:12px 0 4px}
.invite-content img{width:120px;height:150px;object-fit:contain;flex:none}
#axelInvite .invite-speaker{margin:0 0 4px;font-size:13px;font-weight:700;color:#687752}
#axelInvite h2{clear:none;padding:0;margin:0 0 10px;font-size:24px;line-height:1.25}
#axelInvite #axelInviteText{margin:0;font-size:17px;line-height:1.45}
.invite-actions{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
.invite-actions button{border:0;border-radius:16px;height:64px;font-family:"Shantell Sans","Trebuchet MS",sans-serif;font-weight:800;font-size:17px;padding:4px 14px 0;background:url("assets/wood-nav.webp") center/100% 100% no-repeat;color:#214f43;white-space:nowrap}
.invite-actions #inviteAccept{width:238px;background-image:url("assets/wood-enter.webp");padding-top:0;color:#fffbe8;text-shadow:0 2px 1px #095830}
.invite-actions #inviteAnother{width:166px}
.invite-actions button:hover{filter:brightness(1.08)}
@media(max-width:600px){
 #axelInvite{padding:10px 16px 18px}
 .invite-content{gap:9px;padding-top:14px}
 .invite-content img{width:84px;height:110px}
 #axelInvite h2{font-size:21px}
 #axelInvite #axelInviteText{font-size:16px}
 .invite-actions{flex-direction:column;gap:2px}
 .invite-actions #inviteAccept{width:238px;max-width:100%}
 .invite-actions #inviteAnother{height:55px;width:180px}
}

/* A secret tucked into the wooden title, with the same type and no extra button chrome. */
.brand-words{display:flex;align-items:baseline;justify-content:center;gap:.24em;white-space:nowrap}
.brand-words a,.brand-words #axelWord{font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;text-decoration:none}
.brand-words #axelWord{padding:0;border:0;border-radius:4px;background:transparent;text-shadow:inherit}
.brand-words #axelWord:active{transform:translateY(1px)}
#axelSecret{width:480px;max-width:calc(100vw - 24px);padding:12px 22px 24px;overflow-x:hidden;text-align:center;border:5px solid #a87339;box-shadow:inset 0 0 0 3px #ebcb8c}
#axelSecret h2{margin:12px 0 8px;font-size:27px;line-height:1.25}
#secretText{margin:8px 0 14px;font-size:18px;font-weight:700}
.secret-stage{position:relative;height:260px;isolation:isolate;overflow:hidden;border-radius:50%;background:radial-gradient(ellipse at center,#e5f5af 0%,#e5f5af66 46%,transparent 70%)}
.secret-axel{position:relative;z-index:2;display:block;width:208px;height:260px;object-fit:contain;margin:auto;transform-origin:50% 95%}
.secret-floor{position:absolute;z-index:1;bottom:4px;left:calc(50% - 62px);width:124px;height:13px;border-radius:50%;background:#56784535}
.secret-stars{position:absolute;inset:0;z-index:0}
.secret-stars span{position:absolute;font-size:26px;color:#e0a729;text-shadow:0 1px #fff4c2}
.secret-stars span:nth-child(3n){color:#66a34b}
.secret-stars span:nth-child(3n + 2){color:#e78170}
#secretReplay{background:url("assets/wood-enter.webp") center/100% 100% no-repeat;color:#fffbe8;text-shadow:0 1px #1a6a39;border:0;border-radius:15px;width:190px;height:64px;padding:0 12px 4px;font-family:"Shantell Sans","Trebuchet MS",sans-serif;font-weight:800;font-size:21px}
.secret-dancing .secret-axel{animation:secret-dance .52s ease-in-out 6}
.secret-dancing .secret-stars span{animation:secret-spark .8s ease-in-out 4;animation-delay:calc(var(--star)*.025s)}
@keyframes secret-dance{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-9px) rotate(-7deg)}75%{transform:translateY(-9px) rotate(7deg)}}
@keyframes secret-spark{0%,100%{transform:scale(.8) rotate(-8deg);opacity:.6}50%{transform:scale(1.2) rotate(12deg);opacity:1}}
.motion-paused .secret-axel,.motion-paused .secret-stars span{animation:none}
@media(max-width:600px){#axelSecret{padding:10px 14px 20px}#axelSecret h2{font-size:23px}.secret-stage{height:225px}.secret-axel{width:180px;height:225px}#secretText{font-size:16px}}
@media(prefers-reduced-motion:reduce){.secret-axel,.secret-stars span{animation:none!important}}