/* Site-specific compact touch layout. Keep the cabinet's own dimensions intact:
   the game maps pointer coordinates through that rectangle. */
#touch-pad { display: none; }
@media (max-width: 600px), (pointer: coarse) and (max-width: 1000px) {
  body { place-items: start center; background: #172b20; }
  .cabinet:not(:fullscreen) { background: #172b20; }
  .cabinet:not(:fullscreen) #screen { box-shadow: 0 0 0 4px #72915f, 0 0 0 7px #253e2c; }
  .cabinet:not(:fullscreen) footer,
  .cabinet:not(:fullscreen):has(#shop-controls:not([hidden])) footer {
    left: 50%; right: auto; top: calc(100% + 25px); bottom: auto;
    width: max-content; transform: translate(-50%, -50%);
  }
  .cabinet:not(:fullscreen) footer .controls,
  .cabinet:not(:fullscreen):has(#shop-controls:not([hidden])) footer .controls {
    flex-direction: row; gap: 6px;
  }
  .cabinet #speed { height:42px; min-width:52px; background:#203d2c; border-color:#76966b; color:#d2e6c7; }
  .cabinet:not(:fullscreen) footer button,
  .cabinet:not(:fullscreen) footer a,
  .cabinet:not(:fullscreen):has(#shop-controls:not([hidden])) footer button,
  .cabinet:not(:fullscreen):has(#shop-controls:not([hidden])) footer a {
    width: 42px; height: 42px; padding: 10px;
    background: #203d2c; border-color: #76966b; color: #d2e6c7;
  }
  .cabinet:not(:fullscreen):has(#shop-controls:not([hidden])) footer svg {
    width: 18px; height: 18px;
  }
  .cabinet:not(:fullscreen) #shop-controls {
    left: 0; top: calc(100% + 75px); width: 100%;
    transform: translateY(-50%); padding: 0 4px; gap: 4px;
    grid-template-columns: minmax(0, 1fr) 38px; border: 0; background: none;
  }
  .cabinet:not(:fullscreen) .shop-controls-actions {
    grid-column: 1; grid-row: 1; gap: 3px; min-width: 0;
  }
  .cabinet:not(:fullscreen) #shop-controls button {
    flex: 1 1 0; width: auto; min-width: 0; height: 42px;
    padding: 2px; font-size: 9px; background: #203d2c; border-color: #76966b;
  }
  .cabinet:not(:fullscreen) .confirm-label { display: none; }
  .cabinet:not(:fullscreen) #shop-controls #shop-dismiss {
    grid-column: 2; grid-row: 1; width: 38px; height: 42px;
    min-width: 0; padding: 9px; border-radius: 5px;
  }
  .cabinet:not(:fullscreen) #touch-pad {
    display: flex; position: absolute; z-index: 2; left: 4px; right: 4px;
    top: calc(100% + 58px); height: 192px;
    align-items: center; justify-content: center; flex-direction: column; gap: 8px;
    border: 1px solid #68865a; border-radius: 8px;
    background: radial-gradient(ellipse at 50% 50%, #314f36, #1d3426 75%);
    color: #d1e7bf; font-size: 10px; letter-spacing: 1px;
    touch-action: none; user-select: none; -webkit-user-select: none;
    cursor: crosshair;
  }
  #touch-pad span, #touch-pad small { pointer-events: none; }
  #touch-pad i { color: #a7d77b; font-style: normal; }
  #touch-pad small { color: #a8c09b; font-size: 9px; letter-spacing: .4px; }
  .cabinet:not(:fullscreen):has(#shop-controls:not([hidden])) #touch-pad {
    top: calc(100% + 108px); height: 142px;
  }
}
/* In portrait fullscreen, reserve room below the game for the same controls. */
@media (max-width: 600px) and (orientation: portrait) {
  .cabinet:fullscreen { --mobile-screen-width: min(calc(100vw - 16px), calc((100dvh - 280px) * 4 / 3)); background: #172b20; }
  .cabinet:fullscreen .bezel,
  .cabinet:fullscreen:has(#shop-controls:not([hidden])) .bezel {
    position: absolute; top: 8px; left: 50%; width: var(--mobile-screen-width) !important;
    height: auto; margin: 0 !important; transform: translateX(-50%) !important;
  }
  .cabinet:fullscreen footer {
    left: 50%; right: auto; top: calc(18px + var(--mobile-screen-width) * .75);
    bottom: auto; transform: translateX(-50%);
  }
  .cabinet:fullscreen footer button { width: 42px; height: 42px; background: #203d2c; border-color: #76966b; color: #d2e6c7; }
  .cabinet:fullscreen #shop-controls {
    top: calc(68px + var(--mobile-screen-width) * .75); left: 50%;
    width: min(100%, 440px); transform: translateX(-50%); padding: 0 4px;
    grid-template-columns: minmax(0, 1fr) 38px; gap: 4px; border: 0; background: none;
  }
  .cabinet:fullscreen .shop-controls-label { display: none; }
  .cabinet:fullscreen .shop-controls-actions { grid-column: 1; grid-row: 1; min-width: 0; gap: 3px; }
  .cabinet:fullscreen #shop-controls button { flex: 1 1 0; min-width: 0; height: 42px; padding: 2px; font-size: 9px; background: #203d2c; border-color: #76966b; }
  .cabinet:fullscreen .confirm-label { display: none; }
  .cabinet:fullscreen #shop-controls #shop-dismiss { grid-column: 2; grid-row: 1; width: 38px; height: 42px; padding: 9px; border-radius: 5px; }
  .cabinet:fullscreen #touch-pad {
    display: flex; position: absolute; left: 8px; right: 8px;
    top: calc(68px + var(--mobile-screen-width) * .75); bottom: 8px;
    align-items: center; justify-content: center; flex-direction: column; gap: 8px;
    border: 1px solid #68865a; border-radius: 8px;
    background: radial-gradient(ellipse at 50% 50%, #314f36, #1d3426 75%);
    color: #d1e7bf; font-size: 10px; letter-spacing: 1px;
    touch-action: none; user-select: none; -webkit-user-select: none;
  }
  .cabinet:fullscreen:has(#shop-controls:not([hidden])) #touch-pad {
    top: calc(118px + var(--mobile-screen-width) * .75);
  }
}

/* Landscape fullscreen puts the pad beside the 4:3 screen. */
@media (max-height: 600px) and (orientation: landscape) {
  body { place-items: start start; background: #172b20; }
  .cabinet:not(:fullscreen) { background: #172b20; }
  .cabinet #speed { height:42px; min-width:52px; background:#203d2c; border-color:#76966b; color:#d2e6c7; }
  .cabinet:not(:fullscreen) #screen { box-shadow: 0 0 0 4px #72915f, 0 0 0 7px #253e2c; }
  .cabinet:not(:fullscreen) footer,
  .cabinet:not(:fullscreen):has(#shop-controls:not([hidden])) footer {
    left: calc(100% + 8px); right: auto; top: 1px; bottom: auto;
    width: calc(100vw - 100% - 9px); transform: none; justify-content: center;
  }
  .cabinet:not(:fullscreen) footer .controls,
  .cabinet:not(:fullscreen):has(#shop-controls:not([hidden])) footer .controls { flex-direction: row; gap: 4px; width: 100%; }
  .cabinet:not(:fullscreen) footer button,
  .cabinet:not(:fullscreen) footer a,
  .cabinet:not(:fullscreen):has(#shop-controls:not([hidden])) footer button,
  .cabinet:not(:fullscreen):has(#shop-controls:not([hidden])) footer a {
    flex: 1 1 0; min-width: 0;
    height: 42px; padding: 5px; background: #203d2c; border-color: #76966b; color: #d2e6c7;
  }
  .cabinet footer .speed-control { flex: 1 1 0; min-width: 52px; }
  .cabinet footer #speed { width: 100%; }
  .cabinet:not(:fullscreen) #shop-controls {
    left: calc(100% + 8px); right: auto; top: 51px; width: calc(100vw - 100% - 9px);
    transform: none; grid-template-columns: minmax(0, 1fr) 36px;
    gap: 3px; padding: 0; border: 0; background: none;
  }
  .cabinet:not(:fullscreen) .shop-controls-label { display: none; }
  .cabinet:not(:fullscreen) .shop-controls-actions { grid-column: 1; grid-row: 1; min-width: 0; flex-wrap: wrap; gap: 3px; }
  .cabinet:not(:fullscreen) #shop-controls button { flex: 1 1 28%; min-width: 0; height: 40px; padding: 2px; font-size: 9px; background: #203d2c; border-color: #76966b; }
  .cabinet:not(:fullscreen) .confirm-label { display: none; }
  .cabinet:not(:fullscreen) #shop-controls #shop-dismiss { grid-column: 2; grid-row: 1; width: 36px; height: 40px; padding: 8px; border-radius: 5px; }
  .cabinet:not(:fullscreen) #touch-pad {
    display: flex; position: absolute; left: calc(100% + 8px); right: auto;
    width: calc(100vw - 100% - 9px); top: 51px; bottom: calc(32 * var(--unit) - 7.5px); height: auto;
    align-items: center; justify-content: center; flex-direction: column; gap: 8px;
    border: 1px solid #68865a; border-radius: 8px;
    background: radial-gradient(ellipse at 50% 50%, #314f36, #1d3426 75%);
    color: #d1e7bf; font-size: 10px; letter-spacing: 1px;
    touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair;
  }
  .cabinet:not(:fullscreen) #touch-pad span, .cabinet:not(:fullscreen) #touch-pad small { pointer-events: none; text-align: center; }
  .cabinet:not(:fullscreen) #touch-pad i { color: #a7d77b; font-style: normal; }
  .cabinet:not(:fullscreen) #touch-pad small { color: #a8c09b; font-size: 9px; letter-spacing: .4px; }
  .cabinet:not(:fullscreen):has(#shop-controls:not([hidden])) #touch-pad { top: 140px; height: auto; }
  .cabinet:fullscreen {
    --landscape-screen-width: min(calc((100dvh - 16px) * 4 / 3), calc(100vw - 215px));
    --landscape-screen-top: calc((100dvh - var(--landscape-screen-width) * .75) / 2);
    background: #172b20;
  }
  .cabinet:fullscreen .bezel,
  .cabinet:fullscreen:has(#shop-controls:not([hidden])) .bezel {
    position: absolute; left: 8px; top: 50%;
    width: var(--landscape-screen-width) !important;
    height: auto; margin: 0 !important; transform: translateY(-50%) !important;
  }
  .cabinet:fullscreen footer { left: auto; right: 8px; top: var(--landscape-screen-top); bottom: auto; width: 195px; }
  .cabinet:fullscreen footer .controls { gap: 3px; width: 100%; }
  .cabinet:fullscreen footer button { flex: 1 1 0; min-width: 0; height: 42px; background: #203d2c; border-color: #76966b; color: #d2e6c7; }
  .cabinet:fullscreen #shop-controls {
    left: auto; right: 8px; top: calc(var(--landscape-screen-top) + 50px); width: 195px; transform: none;
    grid-template-columns: minmax(0, 1fr) 36px; gap: 3px; padding: 0; border: 0; background: none;
  }
  .cabinet:fullscreen .shop-controls-label { display: none; }
  .cabinet:fullscreen .shop-controls-actions { grid-column: 1; grid-row: 1; min-width: 0; flex-wrap: wrap; gap: 3px; }
  .cabinet:fullscreen #shop-controls button { flex: 1 1 28%; min-width: 0; height: 40px; padding: 2px; font-size: 9px; background: #203d2c; border-color: #76966b; }
  .cabinet:fullscreen .confirm-label { display: none; }
  .cabinet:fullscreen #shop-controls #shop-dismiss { grid-column: 2; grid-row: 1; width: 36px; height: 40px; padding: 8px; border-radius: 5px; }
  .cabinet:fullscreen #touch-pad {
    display: flex; position: absolute; right: 8px; width: 195px; top: calc(var(--landscape-screen-top) + 50px); bottom: var(--landscape-screen-top);
    align-items: center; justify-content: center; flex-direction: column; gap: 8px;
    border: 1px solid #68865a; border-radius: 8px;
    background: radial-gradient(ellipse at 50% 50%, #314f36, #1d3426 75%);
    color: #d1e7bf; font-size: 10px; letter-spacing: 1px;
    touch-action: none; user-select: none; -webkit-user-select: none;
  }
  .cabinet:fullscreen #touch-pad span, .cabinet:fullscreen #touch-pad small { pointer-events: none; text-align: center; }
  .cabinet:fullscreen #touch-pad i { color: #a7d77b; font-style: normal; }
  .cabinet:fullscreen #touch-pad small { color: #a8c09b; font-size: 9px; letter-spacing: .4px; }
  .cabinet:fullscreen:has(#shop-controls:not([hidden])) #touch-pad { top: calc(var(--landscape-screen-top) + 139px); }
}