/* Mobile bonus stages are composed inside the available viewport, with no gameplay scroll. */
.snake-compact-readout-label{display:none}
@media (max-width:1100px),(max-width:1400px) and (max-height:600px), (max-width:1400px) and (pointer:coarse){
  #game.bonus-mode>#bonus-scene.snake-bonus-host,#game.bonus-mode>#bonus-scene.gorilla-trail-host{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0}
  .snake-sanctuary.fl-bonus,.gorilla-trail-scene{--bonus-safe-top:max(28px,var(--bonus-safe-area-top,env(safe-area-inset-top)));--bonus-safe-bottom:max(6px,var(--bonus-safe-area-bottom,env(safe-area-inset-bottom)));height:100%;min-height:0;width:100%;box-sizing:border-box;container-type:size;overflow:hidden}

  /* Serpent Sanctuary: the six-by-six board is the largest uninterrupted surface. */
  .snake-sanctuary.fl-bonus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:13% 18% minmax(0,1fr) 17%;grid-template-areas:'title title' 'win stake' 'board board' 'remaining remaining';gap:4px 2px;align-items:center;padding:var(--bonus-safe-top) 8px var(--bonus-safe-bottom);background:#08251a}
  .snake-scene-image{display:none}
  .snake-mobile-scenery{display:block;position:absolute;inset:0;z-index:-2;width:100%;height:100%;opacity:.65}
  .snake-video-layer{opacity:.65}
  .snake-video-projection{inset:auto;left:var(--snake-video-left);top:var(--snake-video-top);width:var(--snake-video-width);height:var(--snake-video-height)}
  .snake-mobile-title{display:block;position:relative;grid-area:title;inset:auto;width:100%;height:100%;max-height:115px;aspect-ratio:auto;align-self:center;margin:0;filter:drop-shadow(0 3px 3px #00190b);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(transparent,#000 12%,#000 89%,transparent);mask-composite:intersect}
  .snake-win,.snake-stake{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;max-height:132px;aspect-ratio:auto;align-self:center;justify-self:center;margin:0!important;background-image:var(--snake-compact-panel);background-size:100% 100%;background-repeat:no-repeat;container-type:size}
  .snake-win{grid-area:win}.snake-stake{grid-area:stake}
  .snake-win>.snake-mobile-panel-art,.snake-stake>.snake-mobile-panel-art,.snake-win>.snake-clean-patch,.snake-stake>.snake-clean-patch{display:none}
  .snake-compact-readout-label{display:block;position:absolute;top:25%;left:12%;width:76%;font:400 clamp(7px,5cqw,11px)/1.2 var(--game-font);color:#f2d699;white-space:nowrap;text-align:center;text-shadow:0 1px 2px #06200e}
  .snake-win-multiplier{left:15%;top:35%;width:70%;height:22%;font-size:22px}
  .snake-win-amount{left:15%;top:59%;width:70%;height:10%;font-size:12px}
  .snake-stake-amount{left:14%;top:43%;width:72%;height:27%;font-size:clamp(12px,10cqw,20px)}
  .snake-star-boost.bonus-star-boost{top:auto;bottom:-9%;left:4%;width:92%;height:27%;aspect-ratio:auto;z-index:4}
  .snake-sanctuary .snake-basket-grid{position:relative!important;inset:auto!important;grid-area:board;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));width:min(100%,51cqh)!important;height:auto!important;aspect-ratio:634/627;max-height:100%;justify-self:center;align-self:center;margin:0;padding:0;gap:0;box-shadow:0 6px 18px #00160999;outline:1px solid #c3934155}
  .snake-mobile-board-art{position:absolute;display:block;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
  .snake-pot-prize{font-size:clamp(11px,3.3cqw,20px)}
  .snake-sanctuary .snake-pot:focus-visible{outline-width:2px;outline-offset:-3px;box-shadow:inset 0 0 0 4px #3b9b48}
  .snake-remaining{position:relative!important;inset:auto!important;grid-area:remaining;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(100%,600px)!important;height:100%!important;max-height:120px;justify-self:center;margin:0;padding:2px 5px;border:1px solid #b9975077;border-radius:8px;background:linear-gradient(#082a20e8,#071b12f5);box-shadow:inset 0 0 14px #a47c2822,0 2px 7px #00140788;container-type:size}
  .snake-legend-clean,.snake-mobile-legend-title{display:none}
  .snake-remaining-rows{position:relative;inset:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;width:100%;height:100%;gap:2px}
  .snake-remaining-row{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:0;font-size:clamp(10px,3.5cqw,16px);line-height:1.15}
  .snake-mobile-legend-icon{display:block;width:90%;height:64%;max-height:66px;aspect-ratio:1;object-fit:contain;mask-image:none;flex-shrink:0;filter:drop-shadow(0 2px 2px #001609aa)}
  .snake-revealed-snake{background-image:var(--snake-mobile-reveal);background-size:contain;background-position:center}
  .snake-remaining-count{min-height:0;justify-content:center;flex:none}
  .snake-remaining-row[data-snake-value='100'],.snake-remaining-row[data-snake-value='0']{font-size:clamp(8px,2.5cqw,11px);letter-spacing:-.035em}


}

@media (max-width:1100px) and (orientation:landscape),(max-width:1400px) and (max-height:600px) and (orientation:landscape), (max-width:1400px) and (pointer:coarse) and (orientation:landscape){
  .snake-sanctuary.fl-bonus{--bonus-safe-bottom:max(14px,var(--bonus-safe-area-bottom,env(safe-area-inset-bottom)));grid-template-columns:minmax(105px,1fr) minmax(0,2.35fr) minmax(105px,1fr);grid-template-rows:24% 38% 1fr;grid-template-areas:'title board remaining' 'win board remaining' 'stake board remaining';gap:3px 8px;padding:max(10px,var(--bonus-safe-area-top,env(safe-area-inset-top))) max(10px,var(--bonus-safe-area-right,env(safe-area-inset-right))) var(--bonus-safe-bottom) max(10px,var(--bonus-safe-area-left,env(safe-area-inset-left)))}
  .snake-mobile-title{height:100%;width:100%;max-width:none;justify-self:center;max-height:none}
  .snake-win,.snake-stake{max-height:128px;width:100%!important;justify-self:center}
  .snake-sanctuary .snake-basket-grid{width:min(100%,97cqh)!important;height:auto!important;max-height:100%;align-self:center}
  .snake-remaining{width:100%!important;height:91%!important;max-height:none;align-self:end;margin-top:28px;padding:5px 2px}
  .snake-remaining-rows{grid-template-columns:1fr;grid-template-rows:repeat(5,minmax(0,1fr));gap:3px}
  .snake-remaining-row{flex-direction:row;justify-content:space-around;font-size:clamp(10px,9cqw,14px)}
  .snake-mobile-legend-icon{width:38%;height:90%;max-height:none}
  .snake-remaining-count{width:60%}
  .snake-remaining-row[data-snake-value='100'],.snake-remaining-row[data-snake-value='0']{font-size:clamp(7px,6.5cqw,10px)}
  .snake-pot-prize{font-size:clamp(11px,2cqw,17px)}
}
@media (max-width:360px) and (orientation:portrait){
  .snake-sanctuary.fl-bonus{grid-template-rows:12% 18% minmax(0,1fr) 16%;gap:2px;padding-left:5px;padding-right:5px}
}


/* The compact tablet composition has enough space for full-size live labels. */
@media (min-width:700px) and (min-height:650px) and (orientation:landscape){
 #game.mobile-layout .snake-compact-readout-label{font-size:13px}
 #game.mobile-layout .snake-win-multiplier{font-size:30px}
 #game.mobile-layout .snake-win-amount{font-size:16px}
 #game.mobile-layout .snake-stake-amount{font-size:24px}
 #game.mobile-layout .snake-remaining-row{font-size:18px}
 #game.mobile-layout .snake-remaining-row[data-snake-value='100'],#game.mobile-layout .snake-remaining-row[data-snake-value='0']{font-size:14px}
}

/* Gorilla Trail overlays a single full portrait painting; the choices use the same cover projection. */
@media (max-width:1100px),(max-width:1400px) and (max-height:600px),(max-width:1400px) and (pointer:coarse){
 #game.bonus-mode>#bonus-scene.gorilla-trail-host{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0}
 .gorilla-trail-scene{display:block;width:100%;height:100%;min-height:0;padding:0;container-type:size;overflow:hidden}
 .gorilla-trail-backgrounds{opacity:1}
 .gorilla-trail-shade{background:linear-gradient(#02100936,transparent 32%,transparent 79%,#0114094a)}
 .gorilla-trail-title{position:absolute;left:18%;top:1%;width:64%;height:11%;max-height:none;object-fit:contain;z-index:8}
 .gorilla-trail-panel{position:absolute;top:11%;width:47%;height:12.5%;max-width:none;max-height:none;container-type:size;z-index:8;background-size:100% 100%}
 .gorilla-trail-prize{left:2%}.gorilla-trail-stake{left:51%}
 .gorilla-trail-panel-label{left:12%;top:25%;width:76%;height:12%;font-size:clamp(8px,5cqw,16px);line-height:1;white-space:nowrap}
 .gorilla-trail-prize-value{left:15%;top:38%;width:70%;height:21%}
 .gorilla-trail-prize-amount{left:15%;top:61%;width:70%;height:11%}
 .gorilla-trail-stake-value{left:15%;top:39%;width:70%;height:20%}
 .gorilla-trail-star-boost.bonus-star-boost{left:8%;top:65%;bottom:auto;width:84%;height:25%;aspect-ratio:auto;z-index:4}
 .gorilla-trail-directions{position:absolute;left:9%;top:18%;width:82%;height:auto;margin:0;padding:0;aspect-ratio:2014/720;z-index:7;container-type:size;transform-origin:50% 0}
 .gorilla-trail-sign-art{inset:0;width:100%;height:100%;object-fit:fill}
 .gorilla-trail-stage-name{left:13%;top:39%;width:74%;height:13%;font-size:clamp(8px,3cqw,17px);line-height:1.2;letter-spacing:0;white-space:nowrap}
 .gorilla-trail-instruction{left:13%;top:58%;width:74%;height:15%;font-size:clamp(9px,3.5cqw,20px);line-height:1.15;white-space:nowrap}
 .gorilla-trail-paths{position:absolute;inset:0;width:100%;height:100%;display:block;margin:0;padding:0;z-index:3}
 .gorilla-trail-scene .gorilla-trail-path{position:absolute;left:var(--trail-left);top:var(--trail-top);width:var(--trail-width);height:var(--trail-height);min-width:0;min-height:0;margin:0;padding:0}
 .gorilla-trail-progress{position:absolute;left:2%;bottom:max(4px,var(--bonus-safe-area-bottom,env(safe-area-inset-bottom)));width:96%;height:16%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:0;margin:0;padding:0;z-index:8}
 .gorilla-trail-step{height:100%;aspect-ratio:auto;container-type:size}
 .gorilla-trail-step-index{top:17%;height:12%;font-size:clamp(8px,14cqw,15px)}
 .gorilla-trail-step-icon{top:27%;left:25%;width:50%;height:43%}
 .gorilla-trail-step-prize{top:73%;height:11%;font-size:clamp(8px,13cqw,15px)}
 .gorilla-trail-demo-badge{top:6px;left:6px;padding:3px 5px;max-width:calc(100% - 108px);font-size:8px;z-index:10}
 .gorilla-trail-scene .gorilla-trail-choice-arrow{left:var(--gorilla-guide-left);top:var(--gorilla-guide-top);height:var(--gorilla-guide-height);width:auto;max-width:none;filter:drop-shadow(0 3px 3px #241503aa)}
}
@media (max-width:1100px) and (orientation:landscape),(max-width:1400px) and (max-height:600px) and (orientation:landscape),(max-width:1400px) and (pointer:coarse) and (orientation:landscape){
 .gorilla-trail-title{left:29%;top:0;width:42%;height:20%}
 .gorilla-trail-panel{top:4%;width:24%;height:24%}
 .gorilla-trail-prize{left:2%}.gorilla-trail-stake{left:74%}
 .gorilla-trail-panel-label{font-size:clamp(7px,4.7cqw,14px)}
 .gorilla-trail-stake-value{top:44%;height:24%}
 .gorilla-trail-star-boost.bonus-star-boost{top:auto;bottom:-8%;height:21%}
 .gorilla-trail-directions{left:29%;top:14%;width:42%;height:21%;aspect-ratio:auto}
 .gorilla-trail-sign-art{object-fit:fill}
 .gorilla-trail-stage-name{left:15%;top:51%;width:70%;height:14%;font-size:clamp(7px,2.2cqw,14px)}
 .gorilla-trail-instruction{left:14%;top:66%;width:72%;height:19%;font-size:clamp(8px,2.6cqw,16px)}
 .gorilla-trail-progress{left:2%;width:96%;height:17%;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:1fr}
 .gorilla-trail-step-index{font-size:clamp(7px,13cqw,14px)}
 .gorilla-trail-step-prize{font-size:clamp(8px,12cqw,14px)}
}