/* Shared by Snake and Pac-Pigeon */
.arcade-desktop-icon{position:relative;width:48px;height:48px;filter:drop-shadow(1px 2px 1px #19354d70)}
.arcade-desktop-icon img{display:block}
.arcade-caption-icon{object-fit:contain;flex:none}
.snake-window{width:min(470px,calc(100% - 40px));height:min(500px,calc(100% - 30px));left:46%;top:50%;z-index:8}
.pac-window{width:min(420px,calc(100% - 40px));height:min(600px,calc(100% - 20px));left:54%;top:50%;z-index:8}
.arcade-surface{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;background:#000}
.snake-window .arcade-surface{background:#56603f}
.arcade-surface canvas{display:block;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.arcade-score{margin-left:auto;padding:0 6px;font-size:12px;white-space:nowrap}
.arcade-score strong{display:inline-block;min-width:26px;font-family:"Courier New",monospace}
.arcade-hint{margin-left:auto;padding:0 6px;color:#555;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.paint-menu-bar [data-snake-speed][aria-pressed="true"]{background:#fff;border-color:#aca899;box-shadow:inset 1px 1px #d6d2c2}

/* On-screen direction pad, shown on touch screens */
.arcade-dpad{display:none;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,40px);justify-content:center;gap:4px;padding:6px;background:#ece9d8;border-top:1px solid #fff;flex-shrink:0}
.arcade-dpad button{border:1px solid #003c74;border-radius:4px;background:linear-gradient(#fff,#ece9d8 85%,#d6d0c5);font-size:16px;touch-action:manipulation}
.arcade-dpad button:active{background:#d8d4c2}
.arcade-dpad [data-snake-dir="0,-1"],.arcade-dpad [data-pac-dir="up"]{grid-column:2;grid-row:1}
.arcade-dpad [data-snake-dir="-1,0"],.arcade-dpad [data-pac-dir="left"]{grid-column:1;grid-row:2}
.arcade-dpad [data-snake-dir="0,1"],.arcade-dpad [data-pac-dir="down"]{grid-column:2;grid-row:2}
.arcade-dpad [data-snake-dir="1,0"],.arcade-dpad [data-pac-dir="right"]{grid-column:3;grid-row:2}
@media(pointer:coarse){.arcade-dpad{display:grid}.arcade-hint{display:none}}

@media(max-width:600px){
  .snake-window,.pac-window{left:50%;top:55%;width:calc(100% - 16px);height:calc(100% - 126px);min-height:320px}
}
@media(max-height:510px){
  .snake-window,.pac-window{top:50%;height:calc(100% - 16px)}
}