:root {
    --bg-card: rgba(255,255,255,.90); --line: #e4e7ec; --text: #1f2328; --muted: #6b7280; --faint: #9aa1ab;
    --accent: #2f6fb5; --accent-soft: rgba(47,111,181,.12); --ok: #1a7f37; --warn: #b26b00;
    --radius: 12px; --shadow: 0 8px 28px rgba(15,23,42,.18), 0 1px 3px rgba(15,23,42,.10);
  }
  html, body { margin: 0; height: 100%; overflow: hidden; background: #87b5d9; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; user-select: none; -webkit-user-select: none; }
  /* per user: rotating a phone left the canvas sized for the old orientation, out of bounds — the canvas and the label
     layer are pinned to the viewport by CSS (their pixel buffers are resized separately in fit()) */
  #app > canvas { position: fixed; inset: 0; width: 100% !important; height: 100% !important; display: block; }
  html, body { overscroll-behavior: none; }
  #app { width: 100%; height: 100%; position: relative; z-index: 0; overflow: hidden; } /* stacking context: CSS2D labels set their own z-index — keep them under the panel */

  /* ---------- loading screen (per user: improved) ---------- */
  #loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; background: #0f1724; transition: opacity .6s ease; }
  #loader.done { opacity: 0; pointer-events: none; }
  .ld-bg { position: absolute; inset: -24px; background: url(preview.jpg) center / cover no-repeat; filter: blur(7px) saturate(1.1); transform: scale(1.04); animation: ldDrift 30s ease-in-out infinite alternate; }
  .ld-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(10,16,30,.35), rgba(8,12,22,.82)); }
  @keyframes ldDrift { to { transform: scale(1.1) translate(-1.5%, -1%); } }
  .ld-card { position: relative; box-sizing: border-box; width: min(380px, calc(100vw - 32px)); padding: 22px 26px 22px; border-radius: 18px; color: #f3f4f6; text-align: center;
    background: rgba(18,22,32,.62); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 60px rgba(0,0,0,.45); backdrop-filter: blur(10px); }
  .ld-art { width: 200px; height: 112px; margin: -6px auto 6px; display: block; overflow: visible; }
  .ld-art .fl1 { transform-origin: 100px 98px; animation: flick 0.45s ease-in-out infinite alternate; }
  .ld-art .fl2 { transform-origin: 100px 98px; animation: flick 0.32s ease-in-out infinite alternate-reverse; }
  @keyframes flick { from { transform: scale(1, .86) skewX(-4deg); } to { transform: scale(.94, 1.08) skewX(5deg); } }
  .ld-art .spark { animation: spark 2.2s linear infinite; opacity: 0; }
  .ld-art .spark:nth-of-type(2) { animation-delay: .7s; } .ld-art .spark:nth-of-type(3) { animation-delay: 1.4s; }
  @keyframes spark { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(6px, -46px); opacity: 0; } }
  .ld-art .bulb { animation: twinkle 1.8s ease-in-out infinite alternate; }
  .ld-art .bulb:nth-child(2n) { animation-delay: .6s; } .ld-art .bulb:nth-child(3n) { animation-delay: 1.1s; }
  @keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
  .ld-title { font-size: 19px; font-weight: 750; letter-spacing: .2px; }
  .ld-sub { font-size: 12.5px; color: #aab3c2; margin-top: 3px; }
  .ld-bar { position: relative; height: 7px; border-radius: 4px; background: rgba(255,255,255,.1); margin-top: 18px; overflow: hidden; }
  .ld-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #f59e0b, #f97316, #fbbf24);
    box-shadow: 0 0 12px rgba(249,115,22,.7); transition: width .35s ease; }
  .ld-bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: shimmer 1.4s linear infinite; }
  @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
  .ld-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12px; color: #c9d0db; }
  .ld-row #ldPct { font-variant-numeric: tabular-nums; color: #fbbf24; font-weight: 600; }
  .ld-tip { margin-top: 14px; min-height: 2.6em; font-size: 12.5px; line-height: 1.35; color: #d7dde6; }
  .ld-tip.in { animation: tipIn .5s ease both; }
  @keyframes tipIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .ld-tip b { color: #fbbf24; font-weight: 600; }
  .ld-enter { margin-top: 14px; padding: 11px 22px; border: none; border-radius: 999px; font: 650 14px system-ui, sans-serif; color: #1b1405; cursor: pointer;
    background: linear-gradient(180deg, #fcd34d, #f59e0b); box-shadow: 0 6px 22px rgba(245,158,11,.45); animation: ldPulse 1.6s ease-in-out infinite; }
  .ld-enter:hover { filter: brightness(1.06); }
  @keyframes ldPulse { 50% { box-shadow: 0 6px 30px rgba(245,158,11,.75); transform: translateY(-1px); } }
  #loader.ready .ld-bar, #loader.ready .ld-row { opacity: .45; }
  #loader.error .ld-bar i { background: #c0392b; box-shadow: none; }
  #loader.error .ld-enter { display: none; }

  /* phones: the keyboard hint is useless on touch (on-screen pads instead); narrow windows wrap it */
  @media (pointer: coarse) { #walkHint { display: none !important; } }
  @media (max-width: 900px) { body #walkHint, body #fishHud, body #actHud { left: 12px; right: 12px; transform: none; width: fit-content; margin: 0 auto; white-space: normal; text-align: center; box-sizing: border-box; line-height: 1.7; } }
  /* toast (copied link, saved photo) */
  #toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%) translateY(8px); z-index: 60; padding: 8px 14px; border-radius: 999px;
    background: rgba(20,22,26,.85); color: #fff; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
  #toast.show { opacity: 1; transform: translateX(-50%); }
  .btn-row { display: flex; gap: 8px; margin-top: 8px; }
  #walkBtn { margin: 2px 0 10px; }
  .btn-row .btn { flex: 1; background: #eef1f5; color: var(--text); font-weight: 600; }

  /* ---------- settings panel (refined light card) ---------- */
  #panel { position: absolute; top: 12px; left: 12px; z-index: 10; width: 300px; max-height: calc(100vh - 24px);
    overflow-y: auto; background: var(--bg-card); backdrop-filter: blur(10px); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 16px 16px 8px; box-sizing: border-box; font-size: 13px; color: var(--text); }
  #panel.hidden { display: none; }
  #panel header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
  #panel h1 { font-size: 15px; margin: 0; flex: 1; }
  #panel h1 small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
  .icon-btn { border: none; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: var(--muted);
    padding: 4px 8px; border-radius: 8px; }
  .icon-btn:hover { background: rgba(0,0,0,.06); color: var(--text); }
  #openPanel { position: absolute; top: 12px; left: 12px; z-index: 10; display: none; background: var(--bg-card);
    backdrop-filter: blur(10px); border: none; border-radius: 10px; padding: 8px 14px; box-shadow: var(--shadow);
    font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
  #openPanel:hover { background: #fff; }

  #panel details { border-top: 1px solid var(--line); padding: 8px 0; }
  #panel summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); padding: 4px 0; }
  #panel summary::-webkit-details-marker { display: none; }
  #panel summary::after { content: '▸'; font-size: 11px; transition: transform .15s; }
  #panel details[open] > summary::after { transform: rotate(90deg); }
  #panel summary:hover { color: var(--text); }

  .field { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-weight: 600; }
  .chip { font-variant-numeric: tabular-nums; color: var(--accent); background: var(--accent-soft); padding: 1px 8px; border-radius: 999px; font-weight: 700; }
  input[type=range] { width: 100%; margin: 8px 0 4px; accent-color: var(--accent); }
  .status { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #f5f7fa; font-size: 12px; line-height: 1.6; color: #374151; }
  .status b { font-variant-numeric: tabular-nums; }
  .status .verdict { font-weight: 700; }
  .status .verdict.ok { color: var(--ok); }
  .status .verdict.warn { color: var(--warn); }

  /* toggle switches (plain checkboxes underneath — same ids / JS) */
  .toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; cursor: pointer; }
  .toggle span { flex: 1; }
  .toggle kbd { font: 600 10.5px/1 ui-monospace, monospace; color: var(--muted); background: #f1f3f6; border: 1px solid var(--line); border-radius: 4px;
    padding: 3px 0; min-width: 30px; text-align: center; margin-right: -4px; } /* shortcut badge in a tidy column beside the switch */
  .toggle input { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 999px; background: #cdd2da;
    position: relative; cursor: pointer; flex: none; transition: background .15s; margin: 0; }
  .toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
  .toggle input:checked { background: var(--accent); }
  .toggle input:checked::after { transform: translateX(14px); }
  .toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .btn { width: 100%; padding: 9px 12px; border-radius: 9px; border: none; background: var(--accent); color: #fff; font-weight: 600;
    font-size: 13px; cursor: pointer; margin: 6px 0 4px; }
  .btn:hover { filter: brightness(1.08); }
  .btn.active { background: #b54a2f; }
  #specs { color: var(--muted); font-size: 11.5px; line-height: 1.6; padding: 2px 0 6px; }
  #specs b { color: var(--text); font-weight: 600; }

  /* small screens: bottom sheet */
  @media (max-width: 520px) {
    #panel { top: auto; bottom: 0; left: 0; width: 100%; max-height: 55vh; border-radius: var(--radius) var(--radius) 0 0; }
    #openPanel { top: auto; bottom: 12px; }
  }

  /* walk-mode keyboard hint bar */
  #walkHint { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20; display: none;
    background: rgba(20,22,26,.72); color: #f3f4f6; font-size: 12px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
  .keys { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.8; }
  .keys kbd { font: 600 10.5px/1 ui-monospace, monospace; color: var(--muted); background: #f1f3f6; border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; }
  /* fishing prompt / status pill (tap = E) */
  #fishHud { position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 21; display: none; cursor: pointer;
    background: rgba(20,22,26,.80); color: #f3f4f6; font-size: 13px; padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
  #actHud { position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 21; display: none; cursor: pointer;
    background: rgba(20,22,26,.80); color: #f3f4f6; font-size: 13px; padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
  /* touch driving: icon-only buttons in a row at the top right, under ✕ Get out, clear of the stick and the look ring */
  body #actHud.drive { left: auto; right: 16px; top: 62px; bottom: auto; transform: none; margin: 0; width: auto; padding: 6px; border-radius: 16px; white-space: nowrap; line-height: 1; }
  #actHud.drive button { width: 50px; height: 50px; margin: 0 3px; font-size: 24px; line-height: 1; border: 0; border-radius: 12px; background: rgba(255,255,255,.16); color: #fff; touch-action: manipulation; }
  #actHud.drive button:active { background: rgba(255,255,255,.34); }
  #actHud kbd,
  #fishHud kbd { font: 600 11px/1 ui-monospace, monospace; background: rgba(255,255,255,.18); border-radius: 4px; padding: 2px 5px; margin: 0 2px; }
  #fishExit { position: fixed; right: 16px; top: 16px; z-index: 31; display: none; font: 600 14px/1 system-ui, sans-serif; color: #f3f4f6;
    background: rgba(20,22,26,.80); border: 0; border-radius: 999px; padding: 11px 16px; cursor: pointer; } /* touch has no Esc/WASD */
  #fishHud.alert { background: #c2410c; animation: fishPulse .35s ease-in-out infinite alternate; }
  @keyframes fishPulse { to { transform: translateX(-50%) scale(1.08); } }
  #walkHint kbd { font: 600 11px/1 ui-monospace, monospace; background: rgba(255,255,255,.16); border-radius: 4px; padding: 2px 5px; margin: 0 2px; }

  .dim-label { background: rgba(20,20,20,.78); color: #fff; padding: 2px 8px; border-radius: 5px; font-size: 12px; white-space: nowrap; pointer-events: none; }
  .dim-label.big { font-size: 13px; font-weight: 700; background: rgba(47,111,181,.88); }

  /* on-screen controls (remote / AnyDesk) */
  #osControls { position: fixed; inset: 0; pointer-events: none; z-index: 9; } /* under the panel (10), so an open panel stays usable */
  #osLeft { position: absolute; left: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: auto; }
  .osBtn { width: 68px; height: 68px; border-radius: 14px; border: 2px solid rgba(255,255,255,.5); background: rgba(20,20,20,.45); color: #fff; font-size: 22px; font-weight: 700; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
  .osBtn.held { background: rgba(80,140,255,.6); border-color: #fff; }
  #osRun { width: 68px; height: 36px; font-size: 13px; border-radius: 10px; }
  #joy { position: relative; width: 150px; height: 150px; border-radius: 50%; background: rgba(20,20,20,.35); border: 2px solid rgba(255,255,255,.4); touch-action: none; }
  #joyKnob { position: absolute; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.35); left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: none; }
  /* look: drag anywhere on the right half (per user: the old rate stick felt bad); the ring is only a hint / touch marker */
  #lookZone { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; pointer-events: auto; touch-action: none; }
  #osLook { position: absolute; right: 24px; bottom: 24px; width: 120px; height: 120px; margin: 0; border-radius: 50%; border: 2px dashed rgba(255,255,255,.45);
    background: rgba(20,20,20,.18); pointer-events: none; display: grid; place-items: center; transition: opacity .2s; }
  #osLook span { font: 600 11px/1.2 system-ui, sans-serif; color: rgba(255,255,255,.75); text-align: center; text-transform: uppercase; letter-spacing: .06em; }
  #osLook.active { border-style: solid; background: rgba(255,255,255,.12); right: auto; bottom: auto; width: 84px; height: 84px; transform: translate(-50%,-50%); }
  #osLook.active span { display: none; }

  /* debug view-direction readout */
  #dbgInfo { position: fixed; top: 12px; right: 12px; z-index: 40; background: rgba(20,22,26,.8); color: #7fd4ff; font: 13px/1.4 monospace; padding: 6px 10px; border-radius: 8px; display: none; pointer-events: none; }