/* Shared WebProsto game chrome. Source: games/shared/webprosto-shell.css */
.wp-topbar{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5ebe8;flex-shrink:0;gap:10px}
.wp-topbar .wp-brand{display:flex;align-items:center;gap:0;font:800 20px/1.2 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:-1.1px;white-space:nowrap;text-decoration:none;color:#183b43}
.wp-topbar .wp-brand .brand-icon{display:flex;align-items:center;justify-content:center;margin-right:8px;width:31px;height:31px;border-radius:10px;background:#174b48;color:#fff;font-size:24px;font-weight:800;animation:wp-brand-turn 9s linear infinite;transform-origin:center}
.wp-topbar .wp-brand .brand-dot{color:#00a181;font-weight:800}
.wp-tools{display:flex;align-items:center;gap:4px}.wp-language{display:flex;gap:2px;align-items:center;font-size:10px;font-weight:700}.wp-language span{color:#c9d3d0}.wp-language button{padding:10px 3px;min-height:44px;border:0;background:none;color:#899a9a;font:inherit}.wp-language button[aria-pressed=true]{color:#183b43}
.wp-topbar .wp-icon{border:1px solid #d9e3df;background:#e4efe9;color:#204c46;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:12px;padding:0;display:flex;align-items:center;justify-content:center;gap:4px}.wp-icon svg{width:20px;height:20px;display:block}
.wp-heading{display:flex;align-items:center;justify-content:space-between;padding:25px 0 21px;gap:8px}.wp-heading h1{font:650 clamp(18px,5.4vw,23px)/1.1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:-1px;color:#183b43;margin:0}
.wp-save-note{text-align:center;color:#728784;font-size:9px;margin:9px 0;flex-shrink:0}
.wp-footer{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #e5ebe8;color:#778b85;font-size:10px;letter-spacing:0;align-items:center;padding:10px 0 max(10px,env(safe-area-inset-bottom));min-height:40px;flex-shrink:0}.wp-footer button{font:inherit;color:inherit;border:0;background:none;padding:6px 0;cursor:pointer}.wp-footer button:hover{color:#174b48}
@keyframes wp-brand-turn{to{transform:perspective(160px) rotateY(360deg)}}
@media(max-width:699px) and (orientation:portrait){.wp-topbar{height:52px;min-height:52px}.wp-topbar .wp-brand{font-size:16px}.wp-topbar .wp-brand .brand-icon{width:25px;height:25px;font-size:20px;margin-right:5px}.wp-heading{padding:8px 0}.wp-heading h1{font-size:18px;letter-spacing:-.6px;line-height:1.15}.wp-save-note{font-size:10px;line-height:1.2;margin:5px 0}.wp-footer{min-height:30px;padding:0 0 env(safe-area-inset-bottom)}.wp-footer button{min-height:30px;padding:5px 0}}
@media(max-width:360px){.wp-topbar .wp-brand{font-size:13px}.wp-topbar .wp-brand .brand-icon{width:24px;height:24px;font-size:19px}.wp-language{gap:0}.wp-language button{padding:10px 2px}}
@media(prefers-reduced-motion:reduce){.wp-topbar .wp-brand .brand-icon{animation:none}}
/* Common footer contract: bottom of viewport, or after content when it is taller. */
.take-shell{display:flex;flex-direction:column;min-height:100dvh}
.take-shell>.wp-save-note{margin-top:auto}
.shell:has(>.wp-footer){height:100dvh;padding-bottom:0}
.shell>.wp-save-note{margin-top:auto}
.wp-footer{flex-shrink:0}

/* Fill the current viewport at every breakpoint, including desktop and browser chrome changes. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body:not(.game-focused) :is(.shell,.take-shell,.flow-shell){
 width:100%;max-width:none;margin:0;
 height:100vh;height:100dvh;min-height:0;max-height:none;
 padding-bottom:0;
}
body:not(.game-focused) .shell .arena-wrap{max-height:none}
body:not(.game-focused) :is(.take-shell,.flow-shell)>.layout{flex:1;min-height:0;min-width:0;width:100%;display:flex;align-items:stretch}
body:not(.game-focused) .take-shell .game-card{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}
body:not(.game-focused) .take-shell .board-area{flex:1;min-height:100px;height:auto;aspect-ratio:auto}
body:not(.game-focused) .take-shell :is(.game-toolbar,.object-heading,.game-bottom){flex-shrink:0}
@media(orientation:landscape) and (max-height:550px){
 body:not(.game-focused) .take-shell .game-card{display:grid}
 body:not(.game-focused) .take-shell .board-area{min-height:0}
}
@media(min-width:1025px) and (min-height:551px){
 body:not(.game-focused) :is(.shell,.take-shell,.flow-shell){padding-left:clamp(22px,3vw,64px);padding-right:clamp(22px,3vw,64px)}
}
@media(orientation:landscape) and (max-height:550px){
 body:not(.game-focused) .shell{grid-template-columns:minmax(0,1fr) minmax(270px,320px)}
 .shell .wp-topbar .wp-brand{font-size:14px;letter-spacing:-.5px}
 .shell .wp-topbar .wp-brand .brand-icon{width:25px;height:25px;font-size:20px;margin-right:5px}
 .shell .wp-tools{gap:2px}
}