/* Shared layout and interaction styles for both Snake entry points. */
.snake-legend{display:grid;grid-template-columns:repeat(2,max-content);gap:10px 18px;direction:ltr;color:#15364b;font-size:18px;font-weight:bold;}
.legend-entry{display:flex;align-items:center;gap:8px;white-space:nowrap;min-height:30px;}
.legend-ball{display:inline-block;flex:none;border:2px solid;border-radius:50%;box-sizing:border-box;}
.legend-unit{width:24px;height:24px;background:#0096c7;border-color:#0369a1;}
.legend-ten{width:26px;height:26px;background:#ffd43b;border-color:#d97706;}
.legend-hundred{width:28px;height:28px;background:#fb923c;border-color:#c2410c;}
.legend-thousand{width:29px;height:29px;background:#f87171;border-color:#b91c1c;}
.legend-ten-thousand{width:30px;height:30px;background:#991b1b;border-color:#450a0a;}
.legend-entry:last-child{grid-column:1 / -1;justify-self:center;}
/* Center within the blue area, below the background's 12px top border. */
#bottomBar>.snake-legend{position:absolute;right:28px;top:calc(50% + 6px);transform:translateY(-50%);row-gap:3px;padding:5px 12px;border-radius:10px;background:#e5faff;}
#infoCard>.snake-legend{width:max-content;max-width:100%;margin:8px auto 20px;}
#entirePage{width:100%;min-width:0;}
#snake-mobile-header{display:none;}
main{display:block!important;width:100%!important;height:auto!important;}
#game-scale{width:1024px;position:relative!important;left:auto!important;top:auto!important;transform:none!important;height:auto!important;margin:16px auto;}
#topBar button:focus-visible,#bottomBar button:focus-visible,#overlay button:focus-visible,#infoPopup button:focus-visible,#gameCanvas:focus-visible{outline:3px solid #5009c2;outline-offset:3px;}
#topBar button:active,#bottomBar button:active{filter:brightness(1.25);}
#topBar button:disabled{opacity:.45;cursor:default;}
#audioBtn[aria-pressed="false"]{background-image:url('/games/snake/audioBtn.png');}
/* Suppress pointer/touch focus frames while retaining the keyboard focus indicator. */
#arrowPad .arrowBtn{-webkit-tap-highlight-color:transparent;box-shadow:none;}
#arrowPad .arrowBtn:focus:not(:focus-visible){outline:none;box-shadow:none;}
#gameContainer{display:flex;align-items:center;justify-content:center;background:#fdfaf0;}
#gameCanvas{touch-action:none;width:100%;height:100%;object-fit:contain;}
#status .label{display:block;position:absolute;top:14px;height:40px;line-height:40px;color:#fff;background:#08b9d8;text-align:center;font-size:20px;overflow:hidden;}
#status .label:first-child{left:384px;width:112px;}
#status .label:nth-child(3){left:642px;width:112px;}
#overlay{padding:16px;text-align:center;}
#message{width:auto;max-width:100%;height:auto;min-height:60px;background:none!important;margin:0 0 12px;padding:0!important;color:white!important;font-size:clamp(20px,4vw,32px)!important;}
#gameResult{color:white;font-size:clamp(16px,3vw,24px);margin:0 0 16px;direction:inherit;}
#startBtn{background:#ffd43b!important;border-radius:12px;width:auto;min-width:160px;max-width:100%;height:auto;min-height:48px;padding:10px 24px;font-size:24px!important;color:#15364b!important;font-weight:bold;}
#infoPopup{z-index:1000;padding:12px;overflow:auto;}
#infoCard{width:min(600px,100%);max-height:90vh;overflow:auto;}
@media(min-width:1057px){
 html,body{display:block;width:100%;min-width:0;}
 /* Reserve the scaled height in the page, keeping the whole game above the fold. */
 #entirePage>main{height:var(--snake-layout-height,auto)!important;}
 #game-scale{position:absolute!important;left:50%!important;top:var(--snake-layout-top,0px)!important;margin:0;transform-origin:top center;transform:translateX(-50%) scale(var(--snake-desktop-scale,1))!important;}
 #game-scale>.compPageTitle{position:static;transform:none;margin:0 0 8px;line-height:1.2;}
 #topBar{margin-top:0;}
}
@media(max-width:1056px){
 html,body{width:100%;max-width:100%;min-width:0;}
 /* The shared site header uses a 2200px border triangle on desktop.
    Keep its mobile decoration inside the viewport to avoid page auto-shrinking. */
 #blueHeadBg{width:100%;max-width:100%;border:0;background:#4bc9fc;clip-path:polygon(0 0,100% 0,100% 70%,0 100%);}
 #page-header{width:100%;max-width:100%;}
 #page-header .row{margin-left:0;margin-right:0;}
 #entirePage{width:100%;max-width:100%;}
 main{display:block!important;width:100%!important;height:auto!important;}
 #game-scale{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important;height:auto!important;margin:16px auto;}
 #game-scale .compPageTitle{position:static;transform:none;margin:8px 0;text-align:center;}
 #topBar{width:100%;height:140px;margin-top:0;background:linear-gradient(#21c5ed,#0075b0);}
 #status{inset:8px 12px auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:24px 36px;gap:0 12px;}
 #status .label,#score,#timer{position:static;width:auto!important;height:auto;min-width:0;line-height:normal;}
 #status .label{background:none;font-size:18px;line-height:24px;}
 #status .label:first-child{grid-column:1;grid-row:1;}
 #status .label:nth-child(3){grid-column:2;grid-row:1;}
 #score{grid-column:1;grid-row:2;}
 #timer{grid-column:2;grid-row:2;}
 #score,#timer{background:#67dfee;border-radius:6px;line-height:36px;}
 #leftBtns{top:80px;left:50%;transform:translateX(-50%);}
 #gameContainer,#bottomBar{width:100%;}
 #gameCanvas{width:100%;height:100%;aspect-ratio:auto;}
 #bottomBar{height:128px;}
}
@media(max-width:1056px) and (orientation:portrait){
 /* Use normal full-width flow, including when the page direction is RTL. */
 /* Auto width reserves the vertical scrollbar, including the left-side RTL scrollbar. */
 html,body{display:block;width:auto;min-width:0;max-width:none;margin:0;padding:0;}
 #entirePage,main,#game-scale{min-width:0;max-width:100%;margin-inline:0!important;padding-inline:0;}
 #topBar,#gameContainer,#bottomBar{min-width:0;max-width:100%;margin-inline:0;}
 #gameCanvas{min-width:0;max-width:100%;flex:0 1 100%;object-position:center;}
 #bottomBar>.snake-legend{display:none;}
 #entirePage{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);}
 #page-header,#blueHeadBg{display:none;}
 #snake-mobile-header{display:block;grid-row:1;min-width:0;}
 #snake-mobile-header .compPageTitle{position:absolute;inset:0 56px auto 148px;display:flex;align-items:center;justify-content:center;width:auto;height:48px;margin:0;color:#3546b6;font-size:clamp(20px,6vw,28px);line-height:1.05;overflow-wrap:anywhere;}
 #entirePage>main{grid-row:2;height:100%!important;min-height:0;}
 #game-scale{height:100%!important;min-height:0;margin:0!important;display:grid;grid-template-rows:88px minmax(0,1fr) calc(136px + env(safe-area-inset-bottom,0px));}
 #topBar{grid-row:1;height:88px;}
 #status{inset:4px 12px auto;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:32px;gap:0 8px;}
 #status .label{font-size:16px;line-height:32px;}
 #status .label:nth-child(3){grid-column:3;grid-row:1;}
 #score{grid-column:2;grid-row:1;}
 #timer{grid-column:4;grid-row:1;}
 #score,#timer{line-height:32px;}
 #leftBtns{top:40px;gap:8px;}
 #leftBtns .iconBtn{flex-basis:44px;width:44px;height:44px;background-size:36px 36px;background-position:center;}
 #gameContainer{grid-row:2;height:100%!important;min-height:0;}
 #bottomBar{grid-row:3;}
 #game-scale>#infoPopup{position:fixed;}
 /* Reuse the heading's former row for a larger cross without shrinking the board. */
 #bottomBar{padding-top:10px;padding-bottom:env(safe-area-inset-bottom,0px);height:calc(136px + env(safe-area-inset-bottom,0px));}
 #arrowPad{position:relative;direction:ltr;width:184px;height:122px;}
 #arrowPad .arrowBtn{position:absolute;width:60px;height:60px;background-size:56px 56px;background-position:center;touch-action:manipulation;}
 #ArrowLeft{left:0;top:31px;}
 #ArrowUp{left:62px;top:0;}
 #ArrowDown{left:62px;top:62px;}
 #ArrowRight{left:124px;top:31px;}
}
@media(max-width:1056px) and (max-height:650px) and (orientation:portrait){
 #message{min-height:0;font-size:20px!important;margin-bottom:6px;}
 #gameResult{font-size:16px;margin-bottom:6px;}
 #overlay{padding:6px;overflow:auto;justify-content:safe center;}
 #startBtn{font-size:20px!important;padding:6px 18px;flex-shrink:0;}
}
@media(max-width:1056px) and (max-height:600px) and (orientation:landscape){
 html,body{display:block;width:auto;min-width:0;max-width:none;margin:0;padding:0;}
 /* Keep physical grid columns fixed; restore RTL for their contents. */
 #game-scale{direction:ltr;}
 html:is([lang="he"],[lang="ar"]) #game-scale>*{direction:rtl;}
 #page-header,#blueHeadBg,#game-scale .compPageTitle{display:none;}
 /* Normal page flow leaves the footer reachable below the full-height game. */
 #game-scale{position:relative!important;inset:auto!important;width:100%!important;height:100vh!important;height:100dvh!important;margin:0!important;display:grid;grid-template-columns:minmax(0,1fr) 180px;grid-template-rows:60px minmax(0,1fr);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);}
 #topBar{grid-column:1 / -1;grid-row:1;height:60px;}
 #status{inset:1px 12px auto auto;width:min(360px,calc(100% - 236px));grid-template-rows:22px 36px;}
 #status .label{line-height:22px;}
 #score,#timer{line-height:36px;}
 #leftBtns{left:8px;top:8px;gap:8px;transform:none;}
 #leftBtns .iconBtn{flex-basis:44px;width:44px;height:44px;background-size:36px 36px;background-position:center;}
 #gameContainer{grid-column:1;grid-row:2;min-width:0;min-height:0;}
 #bottomBar{grid-column:2;grid-row:2;width:100%;height:100%;min-height:0;flex-direction:column;gap:14px;background:linear-gradient(#21c5ed,#0075b0);}
 #bottomBar>.snake-legend{position:static;transform:none;gap:6px 10px;font-size:16px;padding:6px 8px;}
 #bottomBar>#arrowPad{flex:none;}
 #overlay{padding:8px;}
 #message{min-height:0;margin-bottom:8px;font-size:22px!important;}
 #gameResult{margin-bottom:8px;font-size:18px;}
}