* { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { width: 100%; height: 100%; height: 100dvh; overflow: hidden; background: #111;
      /* Mobile: fill the notch/safe-area, no rubber-band scroll, no tap-zoom. */
      position: fixed; inset: 0; overscroll-behavior: none;
      -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
      /* No long-press text selection / iOS callout / tap-highlight on game surfaces. */
      -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
      -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
    html, body { touch-action: manipulation; }
    /* Re-enable selection only where text input is genuinely needed (e.g. redeem code field). */
    input, textarea, [contenteditable="true"] {
      -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
      -webkit-touch-callout: default; }
    #renderCanvas { position: fixed; top: var(--qxr-vv-top, 0px); left: var(--qxr-vv-left, 0px);
      width: var(--qxr-vv-width, 100%); height: var(--qxr-vv-height, 100dvh); touch-action: none; outline: none;
      -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent; }

    #qxr-ios-chrome-hint {
      position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center;
      padding: max(12px, env(safe-area-inset-top)) env(safe-area-inset-right) 0 env(safe-area-inset-left);
      z-index: 2147483646; pointer-events: none;
    }
    #qxr-ios-chrome-hint.visible { display: flex; }
    #qxr-ios-chrome-hint .bubble {
      max-width: min(92vw, 420px); pointer-events: auto; cursor: pointer;
      backdrop-filter: blur(10px); background: rgba(0,0,0,0.72); color: #fff;
      border: 1px solid rgba(255,255,255,0.14); border-radius: 16px;
      padding: 12px 16px; font: 14px/1.45 system-ui, -apple-system, sans-serif;
      box-shadow: 0 8px 28px rgba(0,0,0,0.35);
    }
    #qxr-ios-chrome-hint .bubble strong { display: block; margin-bottom: 4px; font-size: 15px; }
    #qxr-ios-chrome-hint .bubble small { display: block; margin-top: 6px; opacity: 0.75; font-size: 12px; }
    #qxr-ios-scroll-spacer { display: none; width: 1px; height: 180vh; pointer-events: none; }
    html.qxr-ios-chrome-open, html.qxr-ios-chrome-open body {
      position: relative; overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100dvh;
      -webkit-overflow-scrolling: touch; overscroll-behavior: none;
    }
    /* Don't use overflow:hidden for locked state — Safari loses scroll context and
       bounces the address bar back open. Instead keep the page scrollable (so Safari
       keeps the bar collapsed) but hide the scroll spacer so there's nothing to scroll. */
    html.qxr-ios-locked, html.qxr-ios-locked body {
      position: relative; overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100dvh;
      -webkit-overflow-scrolling: touch; overscroll-behavior: none;
    }
    html.qxr-ios-chrome-open #renderCanvas,
    html.qxr-ios-chrome-open #loading {
      pointer-events: none;
    }
    /* Let vertical scroll pass through canvas when chrome-open so the user can
       swipe up to collapse the address bar; re-lock touch when fullscreen. */
    html.qxr-ios-chrome-open #renderCanvas { touch-action: pan-y; }
    html.qxr-ios-chrome-open #qxr-ios-scroll-spacer { display: block; }
    html.qxr-ios-locked #renderCanvas {
      pointer-events: auto;
      touch-action: pan-y;
    }
    html.qxr-ios-locked #qxr-ios-scroll-spacer { display: block; }
    #qxr-ver { position: fixed; left: 6px; bottom: 4px; z-index: 2147483646;
      font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      color: rgba(255,255,255,.8); text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    #loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
      background: #0a0a0a; color: #fff; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; z-index: 100; }
    #loading.hidden { display: none; }
    .qxr-load-card { width: min(280px, calc(100vw - 48px)); display: flex; flex-direction: column; align-items: center; gap: 20px; }
    .qxr-load-logo-wrap { position: relative; width: 88px; height: 88px; display: grid; place-items: center; }
    .qxr-load-ring { position: absolute; inset: 0; border-radius: 999px;
      border: 3px solid rgba(56,189,248,0.18); border-top-color: #38bdf8;
      animation: qxr-spin 0.85s linear infinite; }
    .qxr-load-logo { position: relative; z-index: 1; width: 64px; height: 64px; display: grid; place-items: center; }
    .qxr-load-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.35)); }
    .qxr-load-bar-wrap { width: 100%; height: 6px; border-radius: 999px; background: #2a2a2a; overflow: hidden; }
    .qxr-load-bar { height: 100%; width: 8%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #22d3ee); transition: width 0.25s ease; }
    .qxr-load-bar[data-initial-percent="12"] { width: 12%; }
    .qxr-load-percent { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: #e2e8f0; }
    .qxr-load-error { display: none; width: 100%; color: #fecaca; background: rgba(127,29,29,0.45); border: 1px solid rgba(248,113,113,0.4);
      border-radius: 10px; padding: 10px 12px; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
    .qxr-load-error.visible { display: block; }
    @keyframes qxr-spin { to { transform: rotate(360deg); } }

    @keyframes __qxrBtnSpinInner { to { transform: translate(-50%, -50%) rotate(360deg); } }
    @keyframes __qxrBtnPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
    @keyframes __qxrBtnShake { 0%, 100% { margin-left: 0; } 20% { margin-left: -7px; } 40% { margin-left: 7px; } 60% { margin-left: -5px; } 80% { margin-left: 5px; } }
    @keyframes __qxrBtnFlash { 0% { filter: brightness(1); } 30% { filter: brightness(2.5); } 100% { filter: brightness(1); } }
    @keyframes __qxrElFadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes __qxrElFadeOut { from { opacity: 1; } to { opacity: 0; } }
    @keyframes __qxrElScaleIn { from { opacity: 0; scale: 0.3; } to { opacity: 1; scale: 1; } }
    @keyframes __qxrElScaleOut { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 0.3; } }
    @keyframes __qxrElElasticIn { 0% { opacity: 0; scale: 0; } 60% { opacity: 1; scale: 1.15; } 80% { scale: .95; } 100% { opacity: 1; scale: 1; } }
    @keyframes __qxrElElasticOut { 0% { opacity: 1; scale: 1; } 25% { scale: 1.1; } 100% { opacity: 0; scale: 0; } }
    @keyframes __qxrElPopIn { 0% { opacity: 0; scale: .5; } 70% { scale: 1.18; } 85% { scale: .94; } 100% { opacity: 1; scale: 1; } }
    @keyframes __qxrElPopOut { 0% { opacity: 1; scale: 1; } 15% { scale: 1.12; } 100% { opacity: 0; scale: .1; } }
    @keyframes __qxrElShineIn { 0% { opacity: 0; scale: .6; rotate: -15deg; } 60% { opacity: 1; scale: 1.1; rotate: 4deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
    #qxr-debug-hud .qxr-dh-header, #qxr-debug-hud .qxr-dh-tabs { flex-shrink: 0; }
    #qxr-debug-hud .qxr-dh-tabs { display: flex; align-items: center; min-height: 24px; position: relative; z-index: 1; }
    #qxr-debug-hud .qxr-dh-tab { flex-shrink: 0; }

    #qxr-debug-hud { position: fixed; left: 12px; top: 56px; z-index: 10050; display: none;
      width: min(460px, calc(100vw - 24px)); max-height: min(88vh, 720px); pointer-events: none; }
    #qxr-debug-hud.visible { display: flex; flex-direction: column; }
    #qxr-debug-hud .qxr-dh-shell { display: flex; flex-direction: column; min-height: 0; flex: 1;
      overflow: hidden; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2);
      background: rgba(0,0,0,0.65); backdrop-filter: blur(12px); color: rgba(255,255,255,0.9);
      font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      box-shadow: 0 8px 24px rgba(0,0,0,0.35); pointer-events: auto; }
    #qxr-debug-hud .qxr-dh-header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
      flex-shrink: 0; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.15); }
    #qxr-debug-hud .qxr-dh-title { font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.9); }
    #qxr-debug-hud .qxr-dh-focus { color: rgba(255,255,255,0.55); overflow: hidden; text-overflow: ellipsis;
      white-space: nowrap; max-width: 100%; }
    #qxr-debug-hud .qxr-dh-tabs { display: flex; flex-shrink: 0; align-items: center; gap: 2px;
      min-height: 24px; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.1);
      overflow-x: auto; overflow-y: visible; position: relative; z-index: 1; }
    #qxr-debug-hud .qxr-dh-tab { flex-shrink: 0; border: 1px solid transparent; border-radius: 4px;
      padding: 2px 8px; font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.45);
      background: transparent; cursor: pointer; font-family: inherit; }
    #qxr-debug-hud .qxr-dh-tab:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); }
    #qxr-debug-hud .qxr-dh-tab.active-physics { color: #bef264; border-color: rgba(190,242,100,0.6);
      background: rgba(132,204,22,0.1); }
    #qxr-debug-hud .qxr-dh-tab.active-runtime { color: #7dd3fc; border-color: rgba(125,211,252,0.6);
      background: rgba(56,189,248,0.1); }
    #qxr-debug-hud .qxr-dh-tab.active-blockly { color: #c4b5fd; border-color: rgba(196,181,253,0.6);
      background: rgba(139,92,246,0.1); }
    #qxr-debug-hud .qxr-dh-tab.active-collision { color: #fda4af; border-color: rgba(253,164,175,0.6);
      background: rgba(244,63,94,0.1); }
    #qxr-debug-hud .qxr-col-summary { padding: 4px 10px; border-bottom: 1px solid rgba(253,164,175,0.15);
      color: rgba(253,164,175,0.75); font-size: 9px; }
    #qxr-debug-hud .qxr-col-row { margin-bottom: 4px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);
      padding: 4px 6px; color: rgba(255,255,255,0.6); }
    #qxr-debug-hud .qxr-col-row.active { border-color: rgba(52,211,153,0.4); background: rgba(16,185,129,0.1); color: #d1fae5; }
    #qxr-debug-hud .qxr-dh-body { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch; }
    #qxr-debug-hud .qxr-dh-panel { display: none; }
    #qxr-debug-hud .qxr-dh-panel.active { display: block; }
    #qxr-debug-hud .qxr-ph-summary { padding: 4px 10px; border-bottom: 1px solid rgba(190,242,100,0.15);
      color: rgba(190,242,100,0.7); font-size: 9px; }
    #qxr-debug-hud .qxr-ph-sys-grid { padding: 8px 10px; }
    #qxr-debug-hud .qxr-ph-sys-title { font-size: 9px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.05em; color: rgba(190,242,100,0.8); margin-bottom: 4px; }
    #qxr-debug-hud .qxr-ph-sys-row { display: flex; gap: 8px; line-height: 1.45; color: rgba(255,255,255,0.55); }
    #qxr-debug-hud .qxr-ph-sys-label { flex-shrink: 0; width: 7.5rem; color: rgba(255,255,255,0.35); }
    #qxr-debug-hud .qxr-ph-scroll { padding: 8px 10px; }
    #qxr-debug-hud .qxr-ph-section-title { font-size: 9px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.05em; color: rgba(190,242,100,0.8); margin: 4px 0; }
    #qxr-debug-hud .qxr-ph-section-title.emerald { color: rgba(52,211,153,0.8); }
    #qxr-debug-hud .qxr-ph-static { color: rgba(255,255,255,0.5); border-bottom: 1px solid rgba(255,255,255,0.06);
      padding-bottom: 4px; margin-bottom: 4px; }
    #qxr-debug-hud .qxr-ph-dyn { border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 4px; margin-bottom: 4px; }
    #qxr-debug-hud .qxr-ph-dyn-grid { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
    #qxr-debug-hud .qxr-ph-dyn-name { color: rgba(255,255,255,0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #qxr-debug-hud .qxr-ph-dyn-meta { grid-column: 1 / -1; color: rgba(255,255,255,0.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #qxr-debug-hud .qxr-ph-dim { color: rgba(255,255,255,0.35); }
    #qxr-debug-hud .qxr-ph-topy { color: rgba(167,243,208,0.9); }
    #qxr-debug-hud .qxr-ph-speed { font-variant-numeric: tabular-nums; color: rgba(190,242,100,0.8); }
    #qxr-debug-hud .qxr-ph-speed.fast { color: rgba(253,186,116,1); }
    #qxr-debug-hud .qxr-ph-warn { color: rgba(252,211,77,0.9); padding: 4px 0; }
    #qxr-debug-hud .qxr-rt-panel { padding: 10px 12px; color: rgba(219,234,254,0.92); white-space: pre-wrap; line-height: 1.5; }
    #qxr-debug-hud .qxr-bl-summary { padding: 4px 10px; border-bottom: 1px solid rgba(139,92,246,0.15);
      color: rgba(196,181,253,0.75); font-size: 9px; }
    #qxr-debug-hud .qxr-bl-sys-grid { padding: 8px 10px; border-bottom: 1px solid rgba(139,92,246,0.1); }
    #qxr-debug-hud .qxr-bl-sys-title { font-size: 9px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.05em; color: rgba(196,181,253,0.8); margin-bottom: 4px; }
    #qxr-debug-hud .qxr-bl-reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px;
      color: rgba(255,255,255,0.7); font-size: 10px; line-height: 1.45; }
    #qxr-debug-hud .qxr-bl-row { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 4px 10px 6px; }
    #qxr-debug-hud .qxr-bl-name { color: rgba(255,255,255,0.85); font-weight: 500; }
    #qxr-debug-hud .qxr-bl-flags { color: rgba(196,181,253,0.65); font-size: 9px; }
    #qxr-debug-hud .qxr-bl-meta { color: rgba(255,255,255,0.42); font-size: 9px; line-height: 1.45; }