/* One viewport: compact site header, flexible playfield, anchored controls. */
#site-info-dialog{width:min(480px,calc(100vw - 24px));max-height:85dvh;overflow:auto;border:2px solid #173d42;border-radius:16px;background:#fff9ea;color:#173d42;padding:20px}
#site-info-dialog::backdrop{background:#102d3b99}
.site-info-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.site-info-head h2{font:700 24px/1.2 Trebuchet MS,Arial,sans-serif;margin:0;transform:none;letter-spacing:0}
#site-info-dialog button{min-height:44px}
#site-info-dialog .game-site-footer{display:flex;flex-direction:column-reverse;gap:20px;border:0;margin:0;padding:0}
#site-info-dialog .game-site-footer nav{display:grid;gap:8px;width:100%}
#site-info-dialog .game-site-footer a{display:flex;align-items:center;min-height:44px;padding:8px 12px;background:#f1ead8;border-radius:8px;text-decoration:none;font-size:14px}
#site-info-dialog .game-copyright{white-space:normal;font-size:11px}
html.mobile-games,html.mobile-games body{height:var(--game-viewport-height,100dvh);min-height:0;overflow:hidden;overscroll-behavior:none}
.mobile-games body>main{height:var(--game-viewport-height,100dvh);min-height:0;width:100%;max-width:none;margin:0;display:flex;flex-direction:column;gap:4px;padding:4px 6px;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom));padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
.mobile-games main>header{display:flex;flex:0 0 44px;min-height:44px;gap:6px;margin:0}
.mobile-games main>header .eyebrow,.mobile-games main>header>.mabd-game-brand{display:none}
.mobile-games .comic-logo{width:110px;height:36px;max-height:36px;object-fit:contain}
.mobile-games .header-actions{gap:4px;min-width:0}
.mobile-games .header-actions button,.mobile-games .header-actions .bd-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;font-size:10px;padding:5px 7px;white-space:nowrap}
.mobile-games .header-actions .bd-link{display:none}
.mobile-games .wallet-strip{flex:0 0 auto;min-height:0;padding:2px 6px;margin:0;gap:2px 6px;grid-template-columns:auto minmax(0,1fr) auto}
.mobile-games .wallet-strip #wallet-open{min-height:30px;font-size:10px;padding:3px 6px}
.mobile-games .wallet-strip #wallet-news{grid-column:auto;grid-row:auto;min-height:24px;padding:0}
.mobile-games .wallet-strip .game-share{grid-column:auto;grid-row:auto}
.mobile-games .cabinet{display:flex;flex:1 1 0%;flex-direction:column;min-height:0;min-width:0;border-radius:12px;box-shadow:none}
.mobile-games .cabinet>.hud{flex:0 0 auto;min-height:42px;padding:4px 8px;gap:7px}
.mobile-games .hud .journey{min-width:0;padding:0}
.mobile-games .hud strong{font-size:16px}
.mobile-games .hud small{font-size:7px;letter-spacing:0}
.mobile-games #pause{min-width:40px;min-height:36px;padding:4px}
.mobile-games .cabinet>.stage{position:relative;flex:1 1 0%;min-height:0!important;min-width:0;overflow:hidden}
.mobile-games .stage>canvas{width:100%;height:100%;aspect-ratio:auto}
.mobile-games .cabinet>.controls{flex:0 0 auto;min-height:0;margin:0;padding:6px 8px;gap:6px;max-width:100%}
.mobile-games .cabinet>.controls[hidden]{display:none!important}
.mobile-games .controls>.touch{display:flex;gap:6px;width:100%;min-width:0}
.mobile-games .controls>.touch button{flex:1;min-width:0;min-height:48px;padding:6px;font-size:11px;line-height:1.15;touch-action:none}
.mobile-games .controls>p:not([role=status]),.mobile-games #prof-tip,.mobile-games #bank-tip{display:none}
.mobile-games #professor-controls .prof-buttons,.mobile-games #banker-controls .bank-buttons{display:flex;width:100%;min-width:0;gap:6px}
.mobile-games #professor-controls button,.mobile-games #banker-controls button{min-height:44px;margin:0;min-width:0;padding:6px 10px;font-size:12px}
.mobile-games #prof-next,.mobile-games #bank-next{flex:1;min-width:0!important}
.mobile-games #prison-notice{display:block;min-height:0;margin:0 0 4px;font-size:10px;line-height:1.3}
.mobile-games .prison-tank-tabs{gap:6px;margin-bottom:4px}
.mobile-games .prison-tank-tabs button,.mobile-games .prison-jug-actions button,.mobile-games .prison-footer-actions button{min-height:40px;padding:5px;font-size:10px;min-width:0}
.mobile-games .prison-footer-actions{margin-top:4px}
.mobile-games .drone-help{display:none}
.mobile-games .drone-buttons{width:100%;gap:6px}
.mobile-games .drone-pad{flex:1;min-width:0;gap:4px}
.mobile-games .drone-pad button,.mobile-games #drone-shoot{min-height:44px;min-width:0;padding:5px 8px}
.mobile-games .petanque-sliders{gap:8px}
.mobile-games #petanque-turn{font-size:10px;margin:0 0 3px}
.mobile-games #petanque-controls input{min-height:30px}
.mobile-games #petanque-throw{min-height:48px;padding:8px}
.mobile-games .stage>[id$="-overlay"],.mobile-games #overlay{padding:6px}
.mobile-games .arena-card,.mobile-games #overlay>.card{max-height:100%;overflow:auto;overscroll-behavior:contain;transform:none;padding:12px 16px}
.mobile-games .arena-card h2,.mobile-games #overlay h2{font-size:26px;margin:5px 0;transform:none}
.mobile-games .arena-card>button{min-height:40px;margin-top:5px;font-size:12px;padding:6px 10px}
.mobile-games .arena-card p{font-size:12px;line-height:1.35;margin:6px 0}
.mobile-games #overlay #instructions{display:none}
.mobile-games #overlay #record{display:none}
.mobile-games #overlay #message{font-size:12px;line-height:1.3;margin:6px 0}
.mobile-games #overlay .level-picker{margin-top:4px}
.mobile-games #overlay .level-picker label{margin-top:4px}
.mobile-games #overlay .level-picker select{min-height:36px;padding:5px}
.mobile-games #overlay #play{position:sticky;bottom:0;z-index:2;min-height:44px}
.mobile-games #professor-scene .prof-board,.mobile-games #banker-scene .bank-board{top:15%;height:83%;right:50px;width:calc(100% - 56px);padding:10px;border-width:5px}
.mobile-games #professor-scene .prof-teacher,.mobile-games #banker-scene .bank-teacher{top:0;bottom:auto;height:17%;width:25%}
.mobile-games #professor-scene .prof-name,.mobile-games #banker-scene .bank-name{top:3%;left:27%;bottom:auto;font-size:11px;padding:5px 7px}
.mobile-games #professor-scene .prof-gull,.mobile-games #banker-scene .bank-gull{top:0;right:3%;height:16%;width:18%}
.mobile-games #professor-scene h2,.mobile-games #banker-scene h2{font-size:17px;line-height:1.2;margin:8px 0}
.mobile-games #professor-scene .prof-answer,.mobile-games #banker-scene .bank-answer{min-height:44px;padding:7px;font-size:12px}
.mobile-games #professor-scene .prof-feedback,.mobile-games #banker-scene .bank-feedback{font-size:11px;margin-top:8px;padding-top:4px;min-height:0}
@media(max-width:360px){.mobile-games .comic-logo{width:88px}.mobile-games .header-actions button{font-size:9px;padding:4px 6px}.mobile-games .wallet-strip .game-share{display:none}}
@media(max-height:500px) and (orientation:landscape){
 .mobile-games body>main{gap:2px;padding-top:2px;padding-bottom:2px}
 .mobile-games main>header{flex-basis:36px;min-height:36px}
 .mobile-games .comic-logo{height:30px;width:100px}
 .mobile-games .header-actions button{min-height:34px}
 .mobile-games .wallet-strip{display:none}
 .mobile-games .cabinet>.hud{min-height:34px;padding:2px 8px}
 .mobile-games .cabinet>.controls{padding:4px 8px}
 .mobile-games .controls>.touch button{min-height:44px}
 .mobile-games #prison-controls{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
 .mobile-games #prison-notice{grid-column:1/-1}
 .mobile-games .prison-footer-actions{margin:0}
 .mobile-games #prison-water-actions{display:flex;gap:6px;align-items:center}
 .mobile-games #prison-water-actions[hidden]{display:none}
 .mobile-games .prison-tank-tabs{margin:0;gap:4px}
 .mobile-games .prison-jug-actions{gap:4px}
 .mobile-games #professor-scene .prof-board,.mobile-games #banker-scene .bank-board{top:2%;height:96%;right:50px;width:calc(80% - 50px);padding:6px 10px}
 .mobile-games #professor-scene .prof-teacher,.mobile-games #banker-scene .bank-teacher{height:90%;width:21%;bottom:0;top:auto}
 .mobile-games #professor-scene .prof-name,.mobile-games #banker-scene .bank-name{display:none}
 .mobile-games #professor-scene .prof-gull,.mobile-games #banker-scene .bank-gull{display:none}
 .mobile-games #professor-scene .prof-answers,.mobile-games #banker-scene .bank-answers{grid-template-columns:1fr 1fr;gap:4px}
 .mobile-games #professor-scene h2,.mobile-games #banker-scene h2{font-size:15px;margin:5px 0}
 .mobile-games .arena-card{max-width:650px;padding:8px 12px}
 .mobile-games .arena-card h2{font-size:22px}
 .mobile-games .arena-card>button{width:auto;margin:4px;min-height:40px}
}

.site-info-content{display:block}
.site-info-art{display:none}
html:not(.mobile-games) #site-info-dialog{width:min(760px,calc(100vw - 32px))}
html:not(.mobile-games) .site-info-content{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
html:not(.mobile-games) .site-info-art{display:flex;align-items:flex-end;justify-content:center;min-height:320px;border-radius:14px;overflow:hidden;background:linear-gradient(0deg,#07567588,#fff1c322),url('med-coast-v1.webp') center/cover}
.site-info-art img{display:block;width:100%;height:100%;max-height:400px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 6px 8px #173d4244)}
#game-menu-open{white-space:nowrap;background:#ffd124}
#level-choice{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%}
html:not(.mobile-games) #site-info-dialog .game-site-footer nav{grid-template-columns:minmax(0,1fr);justify-content:stretch}