/* The content owns the remaining viewport; the companion uses real footer space,
   rather than reserving an empty band above an absolutely positioned character. */
#wonder-ui .main{min-height:0}
#wonder-ui .screen{flex:1 1 0;min-height:0;scroll-padding-block:16px;padding-bottom:16px;container-type:size}
#wonder-ui .composer-wrap,
#wonder-ui .is-typing .composer-wrap,
#wonder-ui .pet-hidden .composer-wrap{margin-top:0;padding:0 24px 12px}
#wonder-ui .companion-rail{display:flex;align-items:center;gap:10px;min-width:0;min-height:56px;max-width:1040px;margin:0 auto}
#wonder-ui .companion-rail .dock-controls,
#wonder-ui .is-typing .companion-rail .dock-controls,
#wonder-ui .pet-hidden .companion-rail .dock-controls{margin:0;padding:0;min-height:40px;flex:0 0 auto}
#wonder-ui #pet-state-label{display:none}
#wonder-ui .companion-rail .pet-dock,
#wonder-ui .is-typing .companion-rail .pet-dock{position:relative;right:auto;top:auto;width:72px;height:72px;flex:0 0 72px;margin-inline-start:auto;align-self:end;transition:none}
#wonder-ui .pet-hidden .companion-rail .pet-dock{display:none}
#wonder-ui #pet-interact{inset:0}
#wonder-ui #pet-loading{bottom:4px;font-size:9px;line-height:1.2}
#wonder-ui .dock-aura{inset:0}
#wonder-ui .companion-rail .pet-pins{position:relative;left:auto;top:auto;flex:0 0 auto;width:auto;grid-template-columns:repeat(2,40px);gap:4px;z-index:6}
#wonder-ui .companion-rail .pet-pins[hidden]{display:none}
#wonder-ui .companion-rail .game-returns{min-width:0;flex:0 1 auto;margin:0;padding:6px 0;gap:6px}
#wonder-ui .game-returns button{padding:7px 10px;font-size:11px;min-height:40px}
#wonder-ui .composer{max-width:1040px;margin-inline:auto;padding:10px 14px 8px}
#wonder-ui .composer textarea{display:block;width:100%;min-height:32px;max-height:min(160px,24dvh);resize:vertical}
#wonder-ui .footer{padding-top:6px;line-height:1.3}
#wonder-ui #pet-menu{bottom:calc(100% - 28px);right:24px}
#wonder-ui .toast:empty{display:none}
/* Keep the whole board useful in shorter desktop windows, with normal scrolling
   for its explanation and controls. Expanding still uses the full content area. */
#wonder-ui .chess-board{container-type:inline-size;max-width:min(520px,max(200px,calc(100cqh - 85px)))}
#wonder-ui .layout-compact .chess-board{max-width:min(320px,max(200px,calc(100cqh - 85px)))}
#wonder-ui[data-play-focus] .chess-board{max-width:min(600px,max(200px,calc(100cqh - 85px)))}
@media(max-width:650px){
 #wonder-ui .topbar{min-height:56px;padding:8px 12px}
 #wonder-ui .screen{padding:4px 14px 12px}
 #wonder-ui .composer-wrap,
 #wonder-ui .is-typing .composer-wrap,
 #wonder-ui .pet-hidden .composer-wrap{padding:0 12px max(8px,env(safe-area-inset-bottom));margin-top:0}
 #wonder-ui .companion-rail{gap:6px;min-height:52px}
 #wonder-ui .companion-rail .pet-dock,
 #wonder-ui .is-typing .companion-rail .pet-dock{width:60px;height:60px;flex-basis:60px}
 #wonder-ui .companion-rail .dock-controls{width:32px;flex-basis:32px}
 #wonder-ui .dock-controls #pet-menu-button{width:32px;min-height:40px;padding:0;font-size:0}
 #wonder-ui .dock-controls #pet-menu-button:before{content:'⚙';font-size:19px}
 #wonder-ui .composer{padding:9px 12px 7px;border-radius:20px}
 #wonder-ui .composer textarea{min-height:30px;font-size:16px}
 #wonder-ui .footer{font-size:9px;padding-top:5px}
 #wonder-ui .live-card{padding:10px;margin-top:12px}
 #wonder-ui .hero{padding-top:24px}
 #wonder-ui #pet-menu{right:12px;bottom:calc(100% - 20px)}
}
@media(max-height:550px){
 #wonder-ui .topbar{min-height:48px;padding-block:4px}
 #wonder-ui .companion-rail .pet-dock,
 #wonder-ui .is-typing .companion-rail .pet-dock{height:44px;width:44px;flex-basis:44px}
 #wonder-ui .companion-rail{min-height:44px}
 #wonder-ui .footer{display:none}
}

/* Let activities sit directly on the canvas; preserve solid game squares and
   visible input boundaries so transparency never reduces game legibility. */
#wonder-ui .live-card{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;margin-block:12px 24px}
#wonder-ui .live-header{margin-bottom:12px}
#wonder-ui .live-note{background:transparent;border-radius:0;padding:4px 0;margin-block:10px}
#wonder-ui .live-card .tag{background:transparent;padding-inline:0}
#wonder-ui .live-card .focus-game{background:transparent}
#wonder-ui .topbar{background:transparent}
#wonder-ui .composer{background:color-mix(in srgb,var(--panel) 45%,transparent);box-shadow:none}
#wonder-ui[data-play-focus] .chat{max-width:640px}
/* One rounded focus surface instead of a square outline inside the composer. */
#wonder-ui #wonder-input:focus,#wonder-ui #wonder-input:focus-visible{outline:none;box-shadow:none;border-radius:12px}
#wonder-ui .composer:focus-within{border-color:var(--pet-low);box-shadow:0 0 0 2px color-mix(in srgb,var(--pet-low) 35%,transparent)}