/* All overrides are touch-only. Desktop layout and game coordinates stay intact. */
#mobile-fullscreen-button { display: none; }
.mobile-game-aside, .mobile-game-board { display: contents; }
@media (pointer: coarse) and (max-width: 1366px) {
  body { -webkit-text-size-adjust: 100%; }
  #steak-panel h2, #dodge-panel h2, #ladder-panel .mobile-game-aside > p,
  #puzzle-message, #paint-status { white-space: pre-line; text-align: center; }
  #puzzle-panel, #paint-panel, #runner-panel, #difference-panel,
  #steak-panel, #ladder-panel, #dodge-panel, #color-panel,
  #welcome-panel, #tutorial-panel, #landscape-gate {
    word-break: keep-all; overflow-wrap: anywhere; line-height: 1.45;
  }
  #puzzle-panel p, #paint-panel p, #difference-panel p,
  #steak-panel h2, #ladder-panel h2, #ladder-panel p,
  #dodge-panel h2, #dodge-panel p, #color-panel h2, #color-panel p,
  #welcome-message, #tutorial-title, #tutorial-description {
    text-wrap: pretty;
  }
  #puzzle-panel button, #paint-panel button, #runner-panel button,
  #difference-panel button, #steak-panel button, #ladder-panel button,
  #dodge-panel button, #color-panel button,
  #puzzle-buy, #paint-more, #runner-gift, #difference-buy, #steak-more, #dodge-watch, #color-more {
    white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
    text-wrap: balance; line-height: 1.35;
  }
  button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  :root {
    --mobile-top: max(8px, env(safe-area-inset-top));
    --mobile-right: max(8px, env(safe-area-inset-right));
    --mobile-bottom: max(8px, env(safe-area-inset-bottom));
    --game-height: calc(100dvh - var(--mobile-top) - var(--mobile-bottom) - 16px);
    --reward-size: clamp(40px, calc((100dvh - 44px) / 4), 52px);
  }
  #sticker-palette-background {
    top: var(--mobile-top); right: var(--mobile-right);
    width: calc(var(--reward-size) * 2 + 12px); height: calc(var(--reward-size) * 4 + 12px);
  }
  #sticker-palette, #sticker-palette-3, #sticker-palette-4, #sticker-palette-5,
  #sticker-palette-1, #sticker-palette-6, #sticker-palette-7, #sticker-palette-10 {
    width: var(--reward-size); height: var(--reward-size);
    right: calc(var(--mobile-right) + 6px);
  }
  #sticker-palette, #sticker-palette-4, #sticker-palette-1, #sticker-palette-7 {
    right: calc(var(--mobile-right) + var(--reward-size) + 6px);
  }
  #sticker-palette, #sticker-palette-3 { top: calc(var(--mobile-top) + 6px); }
  #sticker-palette-4, #sticker-palette-5 { top: calc(var(--mobile-top) + 6px + var(--reward-size)); }
  #sticker-palette-1, #sticker-palette-6 { top: calc(var(--mobile-top) + 6px + var(--reward-size) * 2); }
  #sticker-palette-7, #sticker-palette-10 { top: calc(var(--mobile-top) + 6px + var(--reward-size) * 3); }
  #sticker-palette img, #sticker-palette-1 img, #sticker-palette-3 img,
  #sticker-palette-4 img, #sticker-palette-5 img, #sticker-palette-6 img,
  #sticker-palette-7 img, #sticker-palette-10 img { transform: scale(.9); }
  .tour-sticker { width: 90px; height: 90px; }
  #screenshot-button, #sticker-trash, #tour-reset, #mobile-fullscreen-button {
    right: calc(var(--mobile-right) + var(--reward-size) * 2 + 20px);
    width: 44px; height: 44px; border-radius: 9px;
  }
  #screenshot-button { top: var(--mobile-top); }
  #screenshot-button img { width: 104px; height: 104px; }
  #sticker-trash { top: calc(var(--mobile-top) + 52px); }
  #tour-reset { top: calc(var(--mobile-top) + 104px); }
  #mobile-fullscreen-button {
    position: absolute; top: calc(var(--mobile-top) + 156px); z-index: 30000;
    display: grid; place-items: center; padding: 0; border: 1px solid #e5e5e5;
    background: #fff; color: #007dcc; box-shadow: 0 2px 5px #0002;
  }
  #mobile-fullscreen-button svg { width: 26px; height: 26px; pointer-events: none; }
  #mobile-fullscreen-button:focus-visible { outline: 3px solid #b58aff; outline-offset: 3px; }
  #sticker-trash svg, #tour-reset svg { width: 26px; height: 26px; }
  #screenshot-status { top: calc(var(--mobile-top) + 208px); right: calc(var(--mobile-right) + var(--reward-size) * 2 + 20px); max-width: 200px; font-size: 12px; }
  #icon-label { font-size: 12px; padding: 6px 9px; }

  #puzzle-popup, #paint-popup, #runner-popup, #difference-popup,
  #steak-popup, #ladder-popup, #dodge-popup, #color-popup,
  #welcome-popup, #tutorial-popup, #sticker-delete-dialog {
    box-sizing: border-box; z-index: 31000;
    padding: calc(var(--mobile-top) + 8px) max(16px, env(safe-area-inset-right)) calc(var(--mobile-bottom) + 8px) max(16px, env(safe-area-inset-left));
    overflow: auto; overscroll-behavior: contain;
  }
  #puzzle-panel, #paint-panel, #runner-panel, #difference-panel,
  #steak-panel, #ladder-panel, #dodge-panel, #color-panel {
    box-sizing: border-box; max-width: 100%; max-height: var(--game-height);
    color: #fff;
    -webkit-text-fill-color: currentColor;
  }
  /* Fullscreen can reparent these panels beneath the viewer's black text color. */
  #puzzle-message, #paint-status, #runner-status, #difference-help,
  #difference-status, #steak-status, #ladder-status, #dodge-status, #color-status,
  #steak-panel h2, #ladder-panel h2, #ladder-panel > p,
  #dodge-panel h2, #color-panel h2, #color-panel > p {
    color: #fff;
  }
  #color-heading, #steak-timer, #difference-images figcaption { color: #ead9ff; }
  #puzzle-panel button:disabled, #paint-panel button:disabled,
  #runner-controls button:disabled, #difference-controls button:disabled,
  #steak-panel button:disabled, #ladder-panel button:disabled,
  #dodge-controls button:disabled, #color-start:disabled, #color-reward:disabled {
    opacity: .7;
  }
  .puzzle-drag-preview { z-index: 40002; }
  .sticker-burst { z-index: 40004; }
  #ladder-panel.ladder-miss { animation: none; }
  #puzzle-popup, #paint-popup, #runner-popup, #difference-popup,
  #steak-popup, #ladder-popup, #dodge-popup, #color-popup {
    padding-right: calc(var(--mobile-right) + 56px);
  }
  #puzzle-close, #paint-close, #runner-close, #difference-close,
  #steak-panel #steak-close, #ladder-panel #ladder-close, #dodge-close, #color-close {
    position: fixed; top: var(--mobile-top); right: var(--mobile-right);
    z-index: 5; width: 44px; height: 44px;
    padding: 0; font-size: 30px; border-width: 0;
  }
  #puzzle-panel button:not(.puzzle-piece), #paint-panel button,
  #runner-controls button, #difference-controls button,
  #steak-panel button, #ladder-panel button, #dodge-controls button,
  #color-start, #color-reward {
    min-height: 44px; padding: 8px 12px; font-size: 14px; margin-top: 0;
  }
  #puzzle-buy, #paint-more, #runner-gift, #difference-buy, #steak-more, #dodge-watch, #color-more {
    box-sizing: border-box; min-height: 44px; padding: 10px 12px; margin-top: 0;
    font-size: 13px; line-height: 1.45; font-weight: 700;
    background: #ffe278; color: #382047; border: 1px solid #fff0ae;
    box-shadow: 0 2px 8px #ffd35c40;
    animation: mobile-link-nudge 3.8s ease-in-out infinite;
    transform-origin: center;
  }
  #paint-more, #steak-more { animation-delay: .5s; }
  #runner-gift, #dodge-watch { animation-delay: 1s; }
  #difference-buy, #color-more { animation-delay: 1.5s; }
  #puzzle-buy:hover, #paint-more:hover, #runner-gift:hover, #difference-buy:hover,
  #steak-more:hover, #dodge-watch:hover, #color-more:hover {
    background: #ffec9c; animation-play-state: paused;
  }
  @keyframes mobile-link-nudge {
    0%, 76%, 100% { transform: translateX(0) rotate(0); }
    80% { transform: translateX(-2px) rotate(-1deg); }
    84% { transform: translateX(2px) rotate(1deg); }
    88% { transform: translateX(-1px) rotate(-.5deg); }
    92% { transform: translateX(1px) rotate(.5deg); }
  }
  #puzzle-buy.mobile-link-enter, #paint-more.mobile-link-enter, #runner-gift.mobile-link-enter,
  #difference-buy.mobile-link-enter, #steak-more.mobile-link-enter, #dodge-watch.mobile-link-enter, #color-more.mobile-link-enter {
    animation: mobile-link-arrival .8s ease-in-out both, mobile-link-nudge 3.8s ease-in-out .9s infinite;
  }
  @keyframes mobile-link-arrival {
    0%, 100% { transform: translateX(0) rotate(0) scale(1); }
    15% { transform: translateX(-5px) rotate(-3deg) scale(1.04); }
    30% { transform: translateX(5px) rotate(3deg) scale(1.04); }
    45% { transform: translateX(-4px) rotate(-2deg); }
    60% { transform: translateX(4px) rotate(2deg); }
    75% { transform: translateX(-2px) rotate(-1deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    #puzzle-buy, #paint-more, #runner-gift, #difference-buy, #steak-more, #dodge-watch, #color-more { animation: none; }
    .mobile-link-enter { animation: none !important; }
  }
  #welcome-panel { max-height: var(--game-height); overflow: auto; padding: 18px; width: min(520px, 100%); }
  #welcome-panel p { font-size: 16px; line-height: 1.5; margin-bottom: 14px; }
  #welcome-confirm { min-height: 44px; }
  #tutorial-panel { max-height: var(--game-height); padding: 12px 24px; text-align: center; }
  #tutorial-title { font-size: 18px; margin: 8px 0; }
  #tutorial-description { font-size: 14px; margin: 8px auto 12px; line-height: 1.5; }
  #tutorial-image { max-height: 32dvh; margin: 8px auto; }
  #tutorial-navigation button { min-height: 44px; padding: 8px 16px; font-size: 14px; }
  #tutorial-close { position: fixed; width: 44px; height: 44px; top: var(--mobile-top); right: var(--mobile-right); background: #fff; border-radius: 50%; }
  #sticker-delete-dialog > div { padding: 18px; }
  #sticker-delete-dialog p { font-size: 16px; margin-bottom: 12px; }

  @media (orientation: landscape) {
    #tutorial-panel { display: grid; grid-template-columns: 1fr; gap: 4px; align-items: center; justify-items: center; }
    #tutorial-image { grid-column: 1; grid-row: auto; width: 100%; height: clamp(72px, 20dvh, 130px); max-height: none; margin: 0; }
    #tutorial-page, #tutorial-title, #tutorial-description, #tutorial-navigation { grid-column: 1; margin: 0; text-align: center; }
    #tutorial-title { font-size: 16px; line-height: 1.3; }
    #tutorial-description { font-size: 13px; line-height: 1.3; }
    #tutorial-navigation { gap: 12px; justify-content: center; width: 100%; }
    #tutorial-panel:has(#tutorial-image[hidden]) { grid-template-columns: 1fr; }
    #tutorial-panel:has(#tutorial-image[hidden]) > :not(#tutorial-close) { grid-column: 1; }
    #puzzle-panel > .mobile-game-aside, #paint-panel > div > .mobile-game-aside,
    #runner-panel > .mobile-game-aside, #difference-panel > .mobile-game-aside,
    #steak-panel > .mobile-game-aside, #ladder-panel > .mobile-game-aside,
    #dodge-panel > .mobile-game-aside, #color-panel > .mobile-game-aside {
      display: flex; flex-direction: column; justify-content: center; gap: 8px;
      grid-column: 2; grid-row: 1; min-width: 0;
    }
    #puzzle-board, #paint-canvas, #runner-screen, #difference-images, #steak-image,
    #dodge-canvas, #color-grid { grid-row: 1 !important; }
    #ladder-panel > .mobile-game-board { display: flex; flex-direction: column; gap: 8px; grid-column: 1; grid-row: 1; }
    #runner-controls, #difference-controls { width: 100%; }
    #puzzle-panel { display: grid; grid-template-columns: auto minmax(180px, 240px); gap: 8px 16px; align-items: center; }
    #puzzle-board { grid-column: 1; grid-row: 1 / span 5; width: calc(var(--game-height) * .7075); }
    #puzzle-controls, #puzzle-navigation, #puzzle-buy, #puzzle-reward { grid-column: 2; margin: 0; }
    #puzzle-controls { flex-direction: column; gap: 6px; padding: 8px; }
    #puzzle-message { font-size: 13px; line-height: 1.4; }
    #puzzle-navigation { gap: 6px; }
    #puzzle-navigation button { flex: 1; padding: 8px; }

    #paint-panel { gap: 8px; }
    #paint-panel > div { display: grid; grid-template-columns: auto minmax(150px, 210px); gap: 8px 12px; align-items: center; }
    #paint-canvas { grid-column: 1; grid-row: 1 / span 3; width: min(38vw, calc((var(--game-height) - 8px) * .573)); }
    #paint-status, #paint-more, #paint-reward { grid-column: 2; margin: 0; }
    #paint-brush { width: 44px; height: 60px; }
    #paint-brush svg { width: 26px; height: 26px; }

    #runner-panel { width: min(100%, 1000px); display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 10px; align-items: center; }
    #runner-screen { grid-column: 1; grid-row: 1 / span 2; }
    #runner-canvas { width: min(100%, calc(var(--game-height) * 2.045)); max-height: none; height: auto; margin: auto; }
    #runner-controls { grid-column: 2; flex-direction: column; margin: 0; padding: 8px; gap: 8px; }
    #runner-controls button { width: 100%; white-space: normal; }
    #runner-gift { grid-column: 2; text-align: center; }

    #difference-panel { width: min(100%, 1000px); padding: 8px 12px; display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 6px 12px; }
    #difference-help { grid-column: 1; font-size: 13px; margin: 0 8px 0 0; line-height: 1.4; }
    #difference-images { grid-column: 1; grid-row: 2 / span 2; gap: 10px; align-items: center; }
    #difference-images figure { width: min(45%, calc((var(--game-height) - 50px) * .707)); }
    #difference-images figcaption { font-size: 12px; padding-bottom: 4px; }
    #difference-controls { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; margin: 0; gap: 6px; padding-right: 12px; }
    #difference-controls p { font-size: 13px; }
    #difference-controls button { width: 100%; }
    #difference-footer { grid-column: 2; margin: 0; }
    #difference-buy { width: 100%; text-align: center; }

    #steak-panel { width: min(100%, 680px); display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 6px 12px; padding: 10px 12px; align-items: center; }
    #steak-image { grid-column: 1; grid-row: 1 / span 6; width: 100%; height: calc(var(--game-height) - 24px); max-height: none; }
    #steak-panel > :not(#steak-image):not(#steak-close) { grid-column: 2; margin: 0; }
    #steak-panel h2 { font-size: 16px; padding-right: 12px; }
    #steak-timer { font-size: 28px; }
    #steak-status { font-size: 13px; }

    #ladder-panel { width: min(100%, 700px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 240px); gap: 6px 16px; padding: 10px; align-items: center; }
    #ladder-choices { grid-column: 1; grid-row: 1; padding: 0; gap: 6px; }
    #ladder-canvas { grid-column: 1; grid-row: 2 / span 5; width: min(100%, calc((var(--game-height) - 76px) * 1.071)); height: auto; max-height: none; margin: auto; }
    #ladder-panel > h2, #ladder-panel > p,
    #ladder-panel > button:not(#ladder-close), #ladder-panel > .mobile-game-aside { grid-column: 2; margin: 0; }
    #ladder-panel h2 { font-size: 18px; padding-right: 12px; }
    #ladder-panel p { font-size: 13px; line-height: 1.4; }

    #dodge-panel { width: min(100%, 950px); display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 8px 14px; padding: 10px; align-items: center; }
    #dodge-canvas { grid-column: 1; grid-row: 1 / span 3; width: min(100%, calc((var(--game-height) - 20px) * 1.4)); height: auto; max-height: none; margin: auto; }
    #dodge-panel h2, #dodge-controls, #dodge-watch { grid-column: 2; margin: 0; }
    #dodge-panel h2 { font-size: 16px; padding-right: 12px; }
    #dodge-controls { flex-direction: column; gap: 8px; }
    #dodge-status { font-size: 13px; line-height: 1.4; }
    #dodge-controls button { width: 100%; }

    #color-panel { width: max-content; display: grid; grid-template-columns: auto minmax(190px, 220px); gap: 6px 12px; padding: 10px; align-items: center; }
    #color-grid { grid-column: 1; grid-row: 1 / span 7; width: min(43vw, calc(var(--game-height) - 24px)); gap: 5px; }
    #color-panel > :not(#color-grid):not(#color-close) { grid-column: 2; margin: 0; }
    #color-panel h2 { font-size: 18px; padding-right: 12px; }
    #color-panel p { font-size: 13px; line-height: 1.4; }
    #color-grid .color-example { font-size: 12px; padding: 4px; }
    #color-start, #color-reward { width: 100%; }
    #steak-panel h2, #ladder-panel h2, #dodge-panel h2, #color-panel h2 { padding-right: 0; }
    #difference-controls { padding-right: 0; }
    @media (max-height: 360px) {
      #color-panel { row-gap: 3px; }
      #color-panel h2 { font-size: 16px; }
      #color-panel p { font-size: 12px; line-height: 1.3; }
      #color-heading { font-size: 14px; }
    }
    #ladder-panel > .mobile-game-board { grid-column: 1; grid-row: 1; }
    #puzzle-panel .mobile-game-aside > *, #paint-panel .mobile-game-aside > *,
    #runner-panel .mobile-game-aside > *, #difference-panel .mobile-game-aside > *,
    #steak-panel .mobile-game-aside > *, #ladder-panel .mobile-game-aside > *,
    #dodge-panel .mobile-game-aside > *, #color-panel .mobile-game-aside > * { margin: 0; }
    #puzzle-panel > .mobile-game-aside, #paint-panel > div > .mobile-game-aside,
    #runner-panel > .mobile-game-aside, #difference-panel > .mobile-game-aside,
    #steak-panel > .mobile-game-aside, #ladder-panel > .mobile-game-aside,
    #dodge-panel > .mobile-game-aside, #color-panel > .mobile-game-aside { gap: 6px; }
    @media (max-height: 360px) {
      #color-panel > .mobile-game-aside, #steak-panel > .mobile-game-aside { gap: 3px; }
    }
  }
}