/* Fitted geography and alphabet desks beneath the shared floating navigation. */
/* The completed Earth floats directly in its sky. Retire the gold puzzle frame
   beneath it as well, including Safari's separately composited canvas layers. */
#map-screen .map-workshop.map-complete{border-color:transparent;box-shadow:none}
#map-screen .map-complete :is(.map-board-frame,.map-piece-console){visibility:hidden}
#map-screen .map-finale{background:transparent}
#map-screen .map-finale .map-globe{background:transparent;border:0;outline:none;box-shadow:none;border-radius:50%;clip-path:circle(50% at 50% 50%);-webkit-tap-highlight-color:transparent}
body>:is(#map-screen,#abc-screen):not([hidden]){height:100dvh;min-height:0;display:flex;flex-direction:column;padding:calc(var(--floating-nav-height) + 7px) 12px max(12px,env(safe-area-inset-bottom));overflow:hidden}
:is(#map-screen,#abc-screen) .map-heading{width:100%;max-width:none;flex:none;margin:0 0 7px;gap:12px}
:is(#map-screen,#abc-screen) .map-heading .home-kicker{display:none}
:is(#map-screen,#abc-screen) .map-heading h1{font-size:clamp(23px,2.5vw,33px)}
:is(#map-screen,#abc-screen) .map-heading p{font-size:12px;margin:2px 0 0}
:is(#map-screen,#abc-screen) .map-progress{font-size:18px;min-width:70px;padding:7px 13px}
:is(#map-screen,#abc-screen) .map-workshop{width:100%;max-width:none;flex:1;min-height:0;height:auto!important;grid-template-columns:minmax(0,1fr) clamp(265px,27vw,380px);grid-template-rows:48px minmax(0,1fr) 40px;gap:10px;padding:12px;margin:0}
:is(#map-screen,#abc-screen) .map-board-frame{height:100%;max-height:none;aspect-ratio:auto;align-self:stretch;width:100%;min-height:0;padding:7px}
:is(#map-screen,#abc-screen) .map-board-inner{min-height:0}
:is(#map-screen,#abc-screen) .map-modes{align-items:center;gap:8px}
:is(#map-screen,#abc-screen) .map-modes button{min-height:44px;font-size:13px;padding:6px 15px;flex:none!important;flex-direction:row}
:is(#map-screen,#abc-screen) .map-piece-console{padding:10px;gap:8px;min-height:0;overflow:hidden}
:is(#map-screen,#abc-screen) .map-tray{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px}
:is(#map-screen,#abc-screen) .map-tray-piece{min-height:0;padding:5px 6px;overflow:hidden;background:linear-gradient(145deg,#fffbed,#e2d3b4);border-color:#bd9e70;border-radius:16px;box-shadow:inset 0 2px #fff,0 3px #9d805855}
:is(#map-screen,#abc-screen) .map-tray-piece svg{min-height:0;flex:1;max-height:calc(100% - 24px);width:100%;height:100%}
:is(#map-screen,#abc-screen) .map-tray-piece span{flex:none;font-size:12px;min-height:20px}
:is(#map-screen,#abc-screen) .map-console-bottom{position:static;flex:none;padding-bottom:3px}
:is(#map-screen,#abc-screen) .map-piece-console:has(.map-console-bottom:not([hidden])){padding-bottom:10px}
:is(#map-screen,#abc-screen) .map-hint-row{min-height:36px;gap:12px}
:is(#map-screen,#abc-screen) .map-hint-row p{font-size:12px}
.map-slot.placed .map-piece-art{filter:drop-shadow(0 1px 1px #092c5b55)}
.map-snap{animation:explorer-fit .42s cubic-bezier(.2,.8,.3,1);transform-box:fill-box;transform-origin:center}
@keyframes explorer-fit{0%{transform:translateY(-8px) scale(1.025);filter:brightness(1.2)}65%{transform:translateY(1px) scale(.997)}100%{transform:none;filter:none}}
#abc-title{color:#fff8de!important;text-shadow:0 3px 8px #75482a!important}
#abc-screen{background:radial-gradient(ellipse at 15% 15%,#ead8b8,#b6cbb2)}
#abc-workshop[data-theme=wooden]{background:radial-gradient(ellipse at 45% 20%,#e4f1df,#a6c6a8 80%);border-color:#ebd3a5}
#abc-screen[data-map-mode=wooden] .map-board-inner{background:repeating-linear-gradient(2deg,#dfba88 0 3px,#e5c294 4px 15px,#e1bc8b 16px 20px);box-shadow:inset 0 4px 8px #77512b66}
#abc-screen[data-map-mode=wooden] .map-graticule{display:none}
#abc-screen[data-map-mode=wooden] .map-socket{fill:#885b35;fill-opacity:.4;stroke:#b2824e;stroke-opacity:.8;stroke-width:2.5}
#abc-screen .map-progress{background:linear-gradient(#b48d5b,#886039);border-color:#f9db9b}
#abc-screen .map-heading p{color:#fff9e6}
.abc-cover{background:radial-gradient(ellipse at 40% 20%,#f7e8c7,#adccaf);overflow:hidden}.abc-cover img{width:90%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 5px #774b2e55)}
@media(max-aspect-ratio:1/1){
 :is(#map-screen,#abc-screen) .map-workshop{grid-template-columns:1fr;grid-template-rows:46px minmax(0,1fr) clamp(170px,24dvh,245px) 36px}
 :is(#map-screen,#abc-screen) .map-piece-console{gap:6px;position:relative}
 :is(#map-screen,#abc-screen) .map-tray{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:7px}
 :is(#map-screen,#abc-screen) .map-console-title{display:none}
 :is(#map-screen,#abc-screen) .map-console-bottom{position:absolute;right:8px;top:-48px;bottom:auto;gap:5px}
 :is(#map-screen,#abc-screen) .map-console-bottom button{min-height:39px;font-size:11px;padding:4px 9px}
 :is(#map-screen,#abc-screen) .map-piece-console:has(.map-console-bottom:not([hidden])){padding-bottom:10px}
}
@media(max-width:650px){
 body>:is(#map-screen,#abc-screen):not([hidden]){padding-inline:7px;padding-top:calc(var(--floating-nav-height) + 6px);padding-bottom:8px}
 :is(#map-screen,#abc-screen) .map-heading{margin-bottom:5px}
 :is(#map-screen,#abc-screen) .map-heading h1{font-size:23px}
 :is(#map-screen,#abc-screen) .map-heading p{display:none}
 :is(#map-screen,#abc-screen) .map-workshop{grid-template-rows:42px minmax(0,1fr) 170px 34px;padding:7px;gap:7px;border-radius:21px}
 :is(#map-screen,#abc-screen) .map-modes button{font-size:11px;padding:5px 8px;gap:4px;min-height:40px}
 :is(#map-screen,#abc-screen) .map-modes svg{height:21px;width:21px}
 :is(#map-screen,#abc-screen) .map-piece-console{padding:6px}
 :is(#map-screen,#abc-screen) .map-tray{gap:6px}
 :is(#map-screen,#abc-screen) .map-tray-piece span{font-size:10px;line-height:1.05}
 :is(#map-screen,#abc-screen) .map-tray-piece{padding:3px;border-radius:11px}
 :is(#map-screen,#abc-screen) .map-board-frame{padding:5px}
 :is(#map-screen,#abc-screen) .map-hint-row p{font-size:10px}
 :is(#map-screen,#abc-screen) .map-hint-button{min-height:34px;font-size:11px}
}
@media(max-height:550px) and (min-aspect-ratio:1/1){
 :is(#map-screen,#abc-screen) .map-workshop{grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:40px minmax(0,1fr) 30px;padding:7px;gap:6px}
 :is(#map-screen,#abc-screen) .map-heading{display:none}
 :is(#map-screen,#abc-screen) .map-modes button{min-height:36px;font-size:11px;padding:3px 10px}
 :is(#map-screen,#abc-screen) .map-tray-piece span{font-size:9px;min-height:14px}
 :is(#map-screen,#abc-screen) .map-console-title{display:none}
 :is(#map-screen,#abc-screen) .map-console-bottom button{min-height:30px}
}
@media(prefers-reduced-motion:reduce){.map-snap{animation:none}}
@media(max-height:550px) and (min-aspect-ratio:1/1){:is(#map-screen,#abc-screen) .map-tray{grid-template-rows:repeat(2,minmax(0,1fr))}}
@media(max-aspect-ratio:1/1){
 #abc-screen.alphabet-puzzle .map-workshop{grid-template-rows:46px minmax(0,1fr) clamp(170px,24dvh,245px) 36px}
 #map-screen .map-console-bottom,#abc-screen.alphabet-puzzle .map-console-bottom{position:static;inset:auto;align-self:flex-end;height:36px;min-height:36px;flex:none;padding:0;gap:6px}
 #map-screen .map-console-bottom button,#abc-screen.alphabet-puzzle .map-console-bottom button{min-height:36px;height:36px}
 #abc-screen.alphabet-puzzle .map-piece-console:has(.map-console-bottom:not([hidden])){padding-bottom:10px}
}
@media(max-width:650px) and (max-aspect-ratio:1/1){
 #abc-screen.alphabet-puzzle .map-workshop{grid-template-rows:42px minmax(0,1fr) 170px 34px}
 #map-screen .map-console-bottom,#abc-screen.alphabet-puzzle .map-console-bottom{height:30px;min-height:30px}
 #map-screen .map-console-bottom button,#abc-screen.alphabet-puzzle .map-console-bottom button{min-height:30px;height:30px;font-size:10px}
}
/* Keep paging and help controls comfortable for touch. */
:is(#map-screen,#abc-screen) .map-console-bottom button{min-height:44px!important;height:44px!important}
@media(max-aspect-ratio:1/1){#map-screen .map-console-bottom,#abc-screen.alphabet-puzzle .map-console-bottom{height:44px;min-height:44px}}
@media(max-width:650px) and (max-aspect-ratio:1/1){
 #map-screen .map-workshop,#abc-screen.alphabet-puzzle .map-workshop{grid-template-rows:44px minmax(0,1fr) 170px 44px}
 :is(#map-screen,#abc-screen) .map-modes button,:is(#map-screen,#abc-screen) .map-hint-button{min-height:44px}
}
@media(max-height:550px) and (min-aspect-ratio:1/1){:is(#map-screen,#abc-screen) .map-workshop{grid-template-rows:44px minmax(0,1fr) 38px}}