/* The approved portrait composition is the visual contract. Keep gameplay independent. */
:root{--phone:min(100vw,calc(100svh * .5625),520px)}
body{overflow:hidden}#phone{width:var(--phone);height:100svh;max-height:100svh}
.ui{height:100%;min-height:0}.hud{height:64px;flex:0 0 64px}.avatar{width:51px;height:51px;flex-basis:51px}
#tallerView{height:auto!important;min-height:0;flex:1;padding:0 0 70px!important}
.approved-workshop-art{left:0;top:-10.5%;width:100%;height:124%;min-height:0;object-fit:fill;object-position:initial}
.workshop-logo,.workshop-status,.workshop-cta{display:none!important}
.approved-workshop:after{box-shadow:inset 0 0 0 3px #e4aa4f}
.approved-polar-card{display:block;left:50%;top:73%;width:23%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);padding:5px;border:4px solid #8e47c7;border-radius:50%;background:linear-gradient(#fff6dc,#e8b765);z-index:4}
.approved-polar-card img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:50%}
.workshop-hotspot{background:transparent!important;border:0!important;box-shadow:none!important;color:transparent!important;font-size:0!important;max-width:none;width:21%;height:15%;border-radius:15px;transform:none!important}
.workshop-hotspot:before{display:none!important}.workshop-hotspot:hover{filter:none}.workshop-hotspot:focus-visible,.polar-touch:focus-visible{outline:3px solid #ffdf8d;outline-offset:-4px}
.workshop-missions{left:0;top:3%}.workshop-events{left:0;top:19%}.workshop-challenge{left:0;top:33%}.workshop-sewing{left:0;top:47%}.workshop-rewards{left:0;right:auto;top:62%}
.workshop-shop{right:0;top:3%}.workshop-show{right:0;top:19%}.workshop-polar{right:0;top:34%}.workshop-family{left:auto;right:0;top:49%}.workshop-collection{right:0;top:64%}
.polar-touch{left:37%;top:61%;width:26%;height:26%;z-index:7}
.nav{height:70px}.nav button{font-size:10px}.nav button .ni{font-size:23px}
.game{min-height:0;flex:1;display:flex;flex-direction:column;padding:0 7px 76px;gap:5px}
.logo{height:54px;flex:0 0 54px}.logo-badge{font-size:27px}
.orders-strip{height:100px;flex:0 0 100px;margin:0 0 2px;gap:4px}
.order .client{max-width:60px;font-size:9px}.order .face{display:none}.order .reward{font-size:9px}.order button{font-size:10px}
.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.board-shell{flex:0 0 auto;align-self:center;width:calc(100% - 90px);max-width:100%;padding:5px;border:3px solid #d38e35;border-radius:15px;margin:0}
.board{gap:3px;grid-template-rows:repeat(9,1fr)}.cell{aspect-ratio:1;min-height:0}.cell .lvl{width:12px;height:12px;font-size:8px}
.rail{justify-content:space-evenly;gap:2px;max-height:100%;width:40px}.rail button{width:40px;min-height:0;height:46px;flex-shrink:1;font-size:8px}.rail .ri{height:23px;width:23px;font-size:16px;margin-bottom:1px}.rail small{display:none}
.detail{margin:0;flex:0 0 58px;height:58px;min-height:58px;gap:5px;padding:5px}.detail .preview{width:40px;height:40px}.detail .copy strong{font-size:12px}.detail .copy span{font-size:10px}.detail .action{font-size:10px;min-width:63px;padding:0 6px}
.toolbar{flex:0 0 29px;height:29px;gap:4px}.toolbar button{min-height:27px;padding:3px 7px;font-size:10px}
@media(max-height:650px){.hud{height:51px;flex-basis:51px}.avatar{width:42px;height:42px;flex-basis:42px}.logo{height:43px;flex-basis:43px}.logo-badge{font-size:21px}.orders-strip{height:88px;flex-basis:88px}.nav{height:60px}#tallerView{padding-bottom:60px!important}.game{padding-bottom:66px;gap:3px}.res{gap:2px;font-size:10px;padding:3px}.res .ico{font-size:13px}.res .plus{width:23px;height:23px}.topbtn{width:30px;height:30px}.detail{height:52px;min-height:52px;flex-basis:52px}.rail button{height:39px}.rail .ri{width:19px;height:19px}}
@media(max-width:380px){.hud{gap:3px;padding-left:4px;padding-right:4px}.resources{gap:3px}.res{padding:3px;gap:3px}.res .ico{font-size:15px}.res .plus{width:23px;height:23px}.topbtn{width:31px;height:34px}.avatar{width:43px;height:43px;flex-basis:43px}}