/* Game 10 responsive control layout v17: bigger controls, less chrome, better space use. */
:root body #app{height:100dvh!important;min-height:0!important}
:root body #app .shell{width:min(900px,100%)!important;max-width:none!important;height:100%!important;min-height:0!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:26px 44px auto 15px minmax(0,1fr) 68px 40px 34px!important;gap:3px!important;padding:calc(3px + env(safe-area-inset-top)) 4px calc(3px + env(safe-area-inset-bottom))!important}

:root body #app .shell>.lives-container{grid-area:1/1!important;position:relative!important;inset:auto!important;height:26px!important;min-height:0!important;width:100%!important;margin:0!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important}
:root body #app .shell>.topbar{grid-area:2/1!important;width:100%!important;height:44px!important;min-height:0!important;padding:1px 2px!important;margin:0!important;gap:3px!important}
:root body #app .topbar .icon-btn{width:40px!important;height:40px!important;min-width:40px!important;flex-shrink:0!important;border-width:1px!important;border-radius:9px!important;padding:1px!important;box-shadow:none!important}
:root body #app .topbar .icon-btn img{width:30px!important;height:30px!important}
:root body #app .topbar .title{min-width:84px!important;flex:1!important}
:root body #app .topbar .title small{font-size:7px!important}
:root body #app .topbar .title strong{font-size:15px!important}
:root body #app .topbar .title strong::after{content:none!important}

:root body #app .shell>.level-card{grid-area:3/1!important;min-height:50px!important;height:auto!important;width:100%!important;margin:0!important;padding:4px 6px!important;border-radius:9px!important;border-width:1px!important;box-shadow:none!important}
:root body #app .level-card>div:first-child{grid-template-columns:94px minmax(0,1fr)!important;gap:4px!important}
:root body #app .level-card .goals{flex-wrap:wrap!important;gap:3px!important}
:root body #app .level-card .goal{min-width:38px!important;min-height:23px!important;height:23px!important;padding:0 4px!important;font-size:11px!important;border-radius:7px!important}
:root body #app .level-card .goal-dot{width:17px!important;height:17px!important;font-size:12px!important;line-height:1!important}
:root body #app .level-meta b{font-size:13px!important}
:root body #app .level-meta small{font-size:8px!important}
:root body #app .moves b{font-size:28px!important}
:root body #app .moves span{font-size:8px!important}
:root body #app .shell>.combo-line{grid-area:4/1!important;min-height:0!important;height:15px!important;margin:0!important;width:100%!important;font-size:9px!important;padding:0 2px!important}

:root body #app .shell>.board-wrap{grid-area:5/1!important;min-width:0!important;min-height:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;align-self:stretch!important}
:root body #app .board-frame{padding:2px!important;border-radius:12px!important;border-width:1px!important;max-width:100%!important;max-height:100%!important;box-sizing:border-box!important}
:root body #app #phaserGame{inset:2px!important;border-radius:9px!important}
:root body #app #phaserGame canvas{width:100%!important;height:100%!important;object-fit:contain!important}

:root body #app .shell>.boosters{grid-area:6/1!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;height:68px!important;min-height:0!important;gap:4px!important;margin:0!important;position:relative!important;inset:auto!important;transform:none!important}
:root body #app .booster-btn{width:100%!important;height:68px!important;min-height:0!important;padding:0 0 15px!important;border:1px solid #ffffff35!important;border-radius:9px!important;box-shadow:none!important;overflow:visible!important}
:root body #app .booster-img{width:48px!important;height:48px!important;transform:none!important;overflow:visible!important}
:root body #app .booster-img img{object-fit:contain!important}
:root body #app .booster-btn small{font-size:11px!important;line-height:13px!important;bottom:2px!important}
:root body #app .booster-count{height:22px!important;min-width:22px!important;top:2px!important;right:3px!important;font-size:11px!important;border-width:1px!important}

:root body #app .shell>.status{grid-area:7/1!important;display:flex!important;align-items:stretch!important;gap:3px!important;min-height:0!important;height:40px!important;width:100%!important;margin:0!important}
:root body #app .status>*{min-width:0!important;flex:1!important;height:40px!important;min-height:0!important;font-size:11px!important;padding:0 4px!important;border-radius:8px!important;box-shadow:none!important}
:root body #app .status #hintBtn{flex:0 0 44px!important;font-size:21px!important}
:root body #app .shell>.challenge-btn{grid-area:8/1!important;height:34px!important;min-height:0!important;width:100%!important;margin:0!important;padding:0 6px!important;font-size:12px!important;border-radius:8px!important}

#levelBrief{padding:8px;margin:8px 0;border-radius:10px;background:#062b57;color:#f4fbff;text-align:left;font-size:12px}
#levelBrief .brief-goals{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
#levelBrief .brief-goals span{padding:3px 6px;background:#ffffff18;border-radius:7px}
#levelBrief p{font-size:11px!important;line-height:1.4!important;margin:0!important}

@media(min-width:620px) and (min-height:700px) and (orientation:portrait){
 :root body #app .shell{width:min(900px,100%)!important;grid-template-columns:minmax(0,1fr) 166px!important;grid-template-rows:26px 46px auto 15px minmax(0,1fr)!important;column-gap:6px!important;row-gap:3px!important;padding-left:6px!important;padding-right:6px!important}
 :root body #app .shell>.lives-container{grid-area:1/1/2/3!important}
 :root body #app .shell>.topbar{grid-area:2/1/3/3!important;height:46px!important}
 :root body #app .topbar .icon-btn{width:41px!important;height:41px!important;min-width:41px!important}
 :root body #app .topbar .icon-btn img{width:31px!important;height:31px!important}
 :root body #app .shell>.level-card{grid-area:3/1!important}
 :root body #app .shell>.combo-line{grid-area:4/1!important}
 :root body #app .shell>.board-wrap{grid-area:5/1!important}
 :root body #app .board-frame{width:min(100%,calc(100dvh - 155px))!important;margin:auto!important}
 :root body #app .shell>.boosters{grid-area:3/2/5/3!important;align-self:start!important;height:130px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,62px)!important;gap:5px!important}
 :root body #app .booster-btn{height:62px!important;padding:0 0 14px!important;border-radius:8px!important}
 :root body #app .booster-img{width:44px!important;height:44px!important}
 :root body #app .booster-btn small{font-size:10px!important}
 :root body #app .shell>.status{grid-area:5/2!important;align-self:center!important;display:grid!important;grid-template-columns:1fr!important;grid-auto-rows:44px!important;height:auto!important;gap:5px!important}
 :root body #app .status>*{width:100%!important;height:44px!important;font-size:11px!important}
 :root body #app .status #hintBtn{width:100%!important;flex:none!important;font-size:23px!important}
 :root body #app .status #rtkShopQuick{display:none!important}
 :root body #app .shell>.challenge-btn{grid-area:5/2!important;align-self:end!important;height:44px!important;font-size:12px!important;margin-bottom:2px!important}
}

@media(max-width:619px){
 :root body #app .shell{grid-template-rows:24px 42px auto 14px minmax(0,1fr) 64px 38px 32px!important;padding-left:3px!important;padding-right:3px!important;gap:2px!important}
 :root body #app .shell>.topbar{height:42px!important;gap:2px!important}
 :root body #app .topbar .icon-btn{width:36px!important;height:36px!important;min-width:36px!important;padding:0!important}
 :root body #app .topbar .icon-btn img{width:27px!important;height:27px!important}
 :root body #app .topbar .title{min-width:66px!important}
 :root body #app .topbar .title small{display:none!important}
 :root body #app .topbar .title strong{font-size:13px!important}
 :root body #app .level-card>div:first-child{grid-template-columns:70px minmax(0,1fr)!important}
 :root body #app .level-card .crown{display:none!important}
 :root body #app .level-card .moves{min-width:43px!important;padding-left:3px!important;margin-left:3px!important}
 :root body #app .shell>.boosters,:root body #app .booster-btn{height:64px!important}
 :root body #app .booster-img{width:45px!important;height:45px!important}
 :root body #app .booster-btn{padding-bottom:14px!important}
 :root body #app .booster-btn small{font-size:10px!important}
 :root body #app .lives-container .rtk-mobile-coins-top{height:24px!important;min-height:0!important;font-size:11px!important;margin-left:auto!important}
 :root body #app .status #rtkShopQuick{display:none!important}
}

@media(max-height:650px) and (orientation:portrait){
 :root body #app .shell{grid-template-rows:20px 36px auto 12px minmax(0,1fr) 54px 32px 28px!important;gap:2px!important}
 :root body #app .shell>.lives-container{height:20px!important}
 :root body #app .shell>.topbar{height:36px!important}
 :root body #app .topbar .icon-btn{width:32px!important;height:32px!important;min-width:32px!important}
 :root body #app .topbar .icon-btn img{width:24px!important;height:24px!important}
 :root body #app .shell>.level-card{min-height:44px!important;padding:3px 5px!important}
 :root body #app .shell>.combo-line{height:12px!important}
 :root body #app .shell>.boosters,:root body #app .booster-btn{height:54px!important}
 :root body #app .booster-img{width:38px!important;height:38px!important}
 :root body #app .shell>.status,:root body #app .status>*{height:32px!important}
 :root body #app .shell>.challenge-btn{height:28px!important}
}

@media(orientation:landscape) and (max-height:540px){
 :root body #app .shell{width:min(1000px,100%)!important;grid-template-columns:minmax(0,1fr) 190px!important;grid-template-rows:42px 54px minmax(0,1fr) 42px!important;column-gap:6px!important;padding-left:calc(4px + env(safe-area-inset-left))!important;padding-right:calc(4px + env(safe-area-inset-right))!important}
 :root body #app .shell>.topbar{grid-area:1/1!important;height:42px!important}
 :root body #app .shell>.level-card{grid-area:2/1!important;min-height:0!important}
 :root body #app .shell>.board-wrap{grid-area:3/1/5/2!important}
 :root body #app .shell>.lives-container{grid-area:1/2!important;align-self:center!important}
 :root body #app .shell>.combo-line{grid-area:2/2!important;align-self:center!important}
 :root body #app .shell>.boosters{grid-area:3/2!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,68px)!important;height:141px!important;align-content:start!important}
 :root body #app .booster-btn{height:68px!important}
 :root body #app .booster-img{width:48px!important;height:48px!important}
 :root body #app .shell>.status{grid-area:4/2!important;height:42px!important}
 :root body #app .status #rtkRankQuick,:root body #app .status #rtkShopQuick{display:none!important}
 :root body #app .shell>.challenge-btn{display:none!important}
}

@media(prefers-reduced-motion:reduce){:root body #app .goal,:root body #app .moves b{animation:none!important}}
:root body #app .lives-hearts{display:flex!important;align-items:center!important;gap:2px!important;flex:0 0 auto!important}
:root body #app .life-heart{font-size:14px!important;line-height:20px!important;width:16px!important;height:20px!important;display:inline-block!important}