* { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: #000; color: #ddd;
    font-family: 'Courier New', monospace;
    font-size: 11px; overflow: hidden;
    height: 100vh;
    height: 100dvh; /* mobilni Safari: dynamicky viewport (bez orezu pod adresnim radkem) */
  }
  #canvas-wrap {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh; cursor: grab; z-index: 0;
    height: 100dvh;
    touch-action: none; /* dotyk: pan plati nam, ne prohlizeci (scroll/zoom) */
  }
  #canvas-wrap.dragging { cursor: grabbing; }
  canvas { display: block; width: 100%; height: 100%; touch-action: none; }
  #safeSqGuide {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    --sq-flash-op: 0;
  }
  #safeSqGuide .sq-corner {
    position: absolute; width: 16px; height: 16px; opacity: var(--sq-flash-op);
    border-color: rgba(212,168,32,0.95);
    filter: drop-shadow(0 0 6px rgba(255,210,60,0.75));
    transition: opacity 0.08s linear;
  }
  #safeSqGuide .c-tl { border-top: 2px solid; border-left: 2px solid; }
  #safeSqGuide .c-tr { border-top: 2px solid; border-right: 2px solid; }
  #safeSqGuide .c-bl { border-bottom: 2px solid; border-left: 2px solid; }
  #safeSqGuide .c-br { border-bottom: 2px solid; border-right: 2px solid; }
  #safeFitGuide {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    --fit-flash-op: 0;
  }
  #safeFitGuide .fit-corner {
    position: absolute; opacity: var(--fit-flash-op);
    border-color: rgba(255,220,90,0.96);
    filter: drop-shadow(0 0 7px rgba(255,230,120,0.8));
    transition: opacity 0.08s linear;
  }
  #safeFitGuide .d-t { width: 22px; height: 11px; transform: translate(-50%, 0);
    border-top: 2px solid; border-left: 2px solid; border-right: 2px solid; }
  #safeFitGuide .d-r { width: 11px; height: 22px; transform: translate(0, -50%);
    border-right: 2px solid; border-top: 2px solid; border-bottom: 2px solid; }
  #safeFitGuide .d-b { width: 22px; height: 11px; transform: translate(-50%, -100%);
    border-bottom: 2px solid; border-left: 2px solid; border-right: 2px solid; }
  #safeFitGuide .d-l { width: 11px; height: 22px; transform: translate(-100%, -50%);
    border-left: 2px solid; border-top: 2px solid; border-bottom: 2px solid; }
  label[for="viewAutopilotOn"], label[for="viewAutopilotOnL"] {
    color: #4de868; transition: color 0.2s ease, text-shadow 0.2s ease;
    text-shadow: 0 0 4px rgba(70,220,95,0.35);
  }
  #viewAutopilotOn, #viewAutopilotOnL { accent-color: #4de868; }

  /* Mount body pro HTML partials — neovlivní layout (děti jako přímé potomky body) */
  #tmc-mount-left, #tmc-mount-right, #tmc-mount-stage { display: contents; }

  #hud {
    position: fixed; bottom: 8px; right: 326px; z-index: 11;
    background: rgba(0,0,0,0.60); color: #e8a040;
    font-size: 10px; padding: 3px 8px; border-radius: 3px;
    pointer-events: auto; line-height: 1.65; border: 1px solid #2a2a2a;
    text-align: right; transform-origin: bottom right;
    transition: right 0.5s ease, transform 0.2s ease;
  }
  #hud:hover { transform: scale(3); }
  /* Najetí myší na HUD: HUD dominuje — nad menu (z-index), černé pozadí
     s průhledností 20 % (rgba alfa 0.8). POZOR: #dateTimeGold je MIMO #canvas-wrap
     (který tvoří stacking context, z-index 0) a kreslí se NAD HUDem — pozadí HUDu
     ho proto nikdy nepřekryje; tlumí se zvlášť přes body.hud-zoom (viz tmc-hud.css). */
  #hud.hud-dominant { z-index: 30; background: rgba(0,0,0,0.8); }
  #hud.edge { right: 8px; }
  #hud span { color: #555; }
  #hud .hud-dbg { color: #6a8a6a; font-size: 8px; letter-spacing: -0.2px; }
  #hud .hud-dbg.nan { color: #e85a5a; }