/* Ruthie Field Mode - HUD skin, sun-readable. Loaded by index.html. Remove its two tags to turn it off. */
html.v2-field-on #console, html.v2-field-on #circuit, html.v2-field-on #astromech { display: none !important; }
html.v2-field-on body { overflow: hidden; }

.fm-root {
  --fm-bg:#000000; --fm-panel:#06100a; --fm-panel2:#0d2016;
  --fm-edge:#7fe0a6; --fm-hi:#ffffff; --fm-lbl:#7fe0a6; --fm-dim:#a9dcbd;
  --fm-amber:#ffa31a; --fm-red:#ff4d4d; --fm-cyan:#4fd8ff;
  --fm-clip:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  --fm-clip-sm:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
  position: fixed; inset: 0; z-index: 58; box-sizing: border-box; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: calc(14px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 58%, rgba(127,224,166,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(127,224,166,.045) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(127,224,166,.045) 0 1px, transparent 1px 32px),
    var(--fm-bg);
  color: var(--fm-hi); font-family: 'Inter', system-ui, sans-serif;
}
.fm-root[hidden] { display: none !important; }
.fm-root > * { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; box-sizing: border-box; }

/* Header */
.fm-top { display: flex; justify-content: space-between; align-items: center; }
.fm-mark {
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.25em;
  color: var(--fm-edge); text-shadow: 0 0 10px rgba(127,224,166,.6);
}
.fm-exit {
  position: relative; isolation: isolate; height: 44px; padding: 0 16px; border: none;
  background: var(--fm-edge); clip-path: var(--fm-clip-sm); color: var(--fm-edge);
  font-family: 'Orbitron', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.15em; cursor: pointer;
}
.fm-exit::before { content: ''; position: absolute; inset: 2px; background: #000; clip-path: var(--fm-clip-sm); z-index: -1; }
.fm-exit:active::before { background: var(--fm-panel2); }

/* Weather strip */
.fm-wx {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Share Tech Mono', monospace; font-size: 27px; color: var(--fm-hi);
  padding-bottom: 8px; border-bottom: 1px solid rgba(127,224,166,.35);
}

/* Answer card */
.fm-card {
  position: relative; isolation: isolate; background: var(--fm-edge); clip-path: var(--fm-clip);
  padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
.fm-card::before { content: ''; position: absolute; inset: 2px; background: var(--fm-panel); clip-path: var(--fm-clip); z-index: -1; }
.fm-q {
  font-family: 'Share Tech Mono', monospace; font-size: 14px; color: var(--fm-lbl);
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm-a { font-size: 24px; line-height: 1.3; font-weight: 600; color: var(--fm-hi); max-height: 30vh; overflow-y: auto; white-space: pre-wrap; }
.fm-status { font-family: 'Share Tech Mono', monospace; font-size: 15px; color: var(--fm-dim); }
.fm-status[hidden], .fm-warn[hidden] { display: none !important; }
.fm-warn {
  font-size: 16px; font-weight: 700; padding: 9px 12px; border-left: 4px solid var(--fm-amber);
  background: rgba(255,163,26,.14); color: #ffc266;
}
.fm-warn.lvl-low { border-left-color: var(--fm-edge); background: rgba(127,224,166,.12); color: var(--fm-edge); }
.fm-warn.lvl-high { border-left-color: var(--fm-red); background: rgba(255,77,77,.16); color: #ff8a8a; }

/* Talk orb */
.fm-talk-wrap { flex-grow: 1; min-height: 240px; display: flex; align-items: center; justify-content: center; }
.fm-talk {
  --c1:#d8ffe8; --c2:#5fe39a; --c3:#0e7a45; --c4:#02230f; --glow:rgba(127,224,166,.55);
  position: relative; width: 196px; height: 196px; border-radius: 50%;
  border: 3px solid var(--c2);
  background: radial-gradient(circle at 50% 45%, var(--c1) 0%, var(--c2) 40%, var(--c3) 78%, var(--c4) 100%);
  color: #00140a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 0 0 9px rgba(127,224,166,.10), 0 0 0 18px rgba(127,224,166,.05), 0 0 42px var(--glow), inset 0 0 28px rgba(0,0,0,.35);
  cursor: pointer; font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease;
}
.fm-talk::after {
  content: ''; position: absolute; inset: -16px; border-radius: 50%;
  border: 2px dashed var(--c2); opacity: 0; pointer-events: none;
}
.fm-talk:active { transform: scale(0.96); }
.fm-talk svg { width: 48px; height: 48px; }
.fm-talk.hear { --c1:#fff1d6; --c2:#ffb03a; --c3:#b85a00; --c4:#2a1200; --glow:rgba(255,163,26,.6); animation: fm-pulse 1.1s ease-in-out infinite; }
.fm-talk.think { --c1:#e0f8ff; --c2:#4fd8ff; --c3:#0b6f96; --c4:#021a24; --glow:rgba(79,216,255,.55); }
.fm-talk.think::after { opacity: .9; animation: fm-spin 2.4s linear infinite; }
.fm-talk.talk { animation: fm-pulse 1.6s ease-in-out infinite; }
@keyframes fm-pulse {
  0%,100% { box-shadow: 0 0 0 9px rgba(127,224,166,.10), 0 0 0 18px rgba(127,224,166,.05), 0 0 34px var(--glow), inset 0 0 28px rgba(0,0,0,.35); }
  50%     { box-shadow: 0 0 0 13px rgba(127,224,166,.14), 0 0 0 26px rgba(127,224,166,.06), 0 0 60px var(--glow), inset 0 0 28px rgba(0,0,0,.35); }
}
@keyframes fm-spin { to { transform: rotate(360deg); } }

/* Pin buttons */
.fm-pins-h { font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--fm-lbl); letter-spacing: 0.15em; }
.fm-pins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fm-pin {
  position: relative; isolation: isolate; height: 62px; border: none;
  background: var(--fm-edge); clip-path: var(--fm-clip-sm); color: var(--fm-hi);
  font-family: 'Inter', system-ui, sans-serif; font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fm-pin::before { content: ''; position: absolute; inset: 2px; background: var(--fm-panel); clip-path: var(--fm-clip-sm); z-index: -1; }
.fm-pin:active::before { background: var(--fm-panel2); }
.fm-pin i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ffffff; flex-shrink: 0; box-shadow: 0 0 8px rgba(255,255,255,.35); }
.fm-hint { font-size: 13px; color: var(--fm-dim); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .fm-talk, .fm-talk::after { animation: none !important; }
}

@media (max-width: 520px) {
  .v2-tab { padding: 0 12px; font-size: 10px; letter-spacing: 0.12em; }
}