/* Original viewport geometry stays scoped to each active game shell. Outer
   frame paint can evolve without resizing, moving or recolouring the engine. */
body[data-engine="honker"] .game-window-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #101018;
      border-radius: 10px;
      box-shadow: 0 24px 54px rgba(0, 0, 0, 0.22),0 6px 0 var(--surface-raised);
      overflow: hidden;
      border: 1px solid var(--line);
      outline: 1px solid var(--line);
      outline-offset: 5px;
    }
body[data-engine="honker"] #app {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0;
      background-color: #101018;
      overflow: hidden;
    }
body[data-engine="honker"] #app canvas {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
    }
body[data-engine="honker"] #app:fullscreen {
      width: 100vw;
      height: 100vh;
      max-width: none;
      margin: 0;
      border: none;
      border-radius: 0;
      background-color: #05050a;
      display: flex;
      align-items: center;
      justify-content: center;
    }
body[data-engine="honker"] #app:fullscreen > canvas {
      width: min(100vw, 177.7778vh) !important;
      height: min(100vh, 56.25vw) !important;
    }
body.dark-mode[data-engine="honker"] .game-window-wrap,
body.dark-mode[data-engine="honker"] #app {
      background-color: #101018;
      border-color: rgba(255, 255, 255, 0.18);
    }
body.dark-mode[data-engine="honker"] #app:fullscreen {
      border: none;
    }
body[data-engine="trig"] .game-window-wrap {
      width: 100%;
      background: #101018;
      border-radius: 10px;
      box-shadow: 0 24px 54px rgba(0, 0, 0, 0.22),0 6px 0 var(--surface-raised);
      overflow: hidden;
      border: 1px solid var(--line);
      outline: 1px solid var(--line);
      outline-offset: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
    }
body[data-engine="trig"] .canvas {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #101018;
      overflow: hidden;
    }
body[data-engine="trig"] canvas {
      display: block;
      margin: 0 auto;
      background-color: white;
      max-width: 100%;
    }
body.dark-mode[data-engine="trig"] .game-window-wrap,
body.dark-mode[data-engine="trig"] .canvas {
      background-color: #101018;
      border-color: rgba(255, 255, 255, 0.18);
    }
@media (pointer: coarse) {
body[data-engine="trig"] .canvas {
        min-height: 230px;
      }
body[data-engine="trig"] canvas {
        max-width: 100%;
        height: auto;
      }
}
body[data-engine="trig-time"] .game-window-wrap {
      width: 100%;
      background: #101018;
      border-radius: 10px;
      box-shadow: 0 24px 54px rgba(0, 0, 0, 0.22),0 6px 0 var(--surface-raised);
      overflow: hidden;
      border: 1px solid var(--line);
      outline: 1px solid var(--line);
      outline-offset: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
    }
body[data-engine="trig-time"] .canvas {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #101018;
      overflow: hidden;
    }
body[data-engine="trig-time"] canvas {
      display: block;
      margin: 0 auto;
      background-color: white;
      max-width: 100%;
    }
body.dark-mode[data-engine="trig-time"] .game-window-wrap,
body.dark-mode[data-engine="trig-time"] .canvas {
      background-color: #101018;
      border-color: rgba(255, 255, 255, 0.18);
    }
@media (pointer: coarse) {
body[data-engine="trig-time"] .canvas {
        min-height: 230px;
      }
body[data-engine="trig-time"] canvas {
        max-width: 100%;
        height: auto;
      }
}