:root {
  --coral: #ff6b5e;
  --teal: #22c6c0;
  --ink: #10232e;
  --glass-bg: rgba(11, 34, 46, 0.62);
  --glass-brd: rgba(120, 220, 220, 0.35);
  --mono: 'IBM Plex Mono', monospace;
  --disp: 'Bricolage Grotesque', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; font-family: var(--disp); background: #8fd6ea; }
#scene-container { position: fixed; inset: 0; }

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #eafcff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

/* Title ribbon */
#title-ribbon {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 20;
  padding: 8px 16px; border-radius: 40px;
  background: rgba(11,34,46,0.55); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-brd);
  animation: dropIn 0.7s cubic-bezier(.2,.9,.3,1.2) both;
}
#title-ribbon .bird { font-size: 20px; }
#title-ribbon .tt { font-weight: 800; letter-spacing: 2px; color: #fff; font-size: 15px; }
#title-ribbon .sub { font-family: var(--mono); font-size: 10px; color: var(--teal); letter-spacing: 1px; }
#info-btn {
  background: var(--coral); color: #fff; border: none; width: 26px; height: 26px;
  border-radius: 50%; cursor: pointer; font-weight: 800; font-size: 14px; margin-left: 4px;
}
#info-btn:hover { transform: scale(1.1); }
@keyframes dropIn { from { opacity: 0; transform: translateX(-50%) translateY(-30px); } }

/* Metrics HUD */
#metrics {
  position: fixed; top: 70px; left: 14px; z-index: 15; padding: 12px 14px;
  display: grid; gap: 8px; min-width: 150px;
  animation: slideL 0.7s 0.15s cubic-bezier(.2,.9,.3,1.2) both;
}
.gauge { display: flex; flex-direction: column; }
.gauge label { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--teal); }
.gauge span { font-family: var(--mono); font-weight: 600; font-size: 18px; color: #fff; }
.gauge.affinity .bar { height: 7px; background: rgba(255,255,255,0.15); border-radius: 6px; overflow: hidden; margin: 3px 0; }
.gauge.affinity #m-aff-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), #b6ff6b); transition: width 0.4s; }
.gauge.affinity span { font-size: 12px; color: #b6ff6b; }
@keyframes slideL { from { opacity: 0; transform: translateX(-40px); } }

/* Analyst */
#analyst {
  position: fixed; top: 70px; right: 14px; z-index: 15; width: 320px; max-width: 42vw;
  padding: 16px; animation: slideR 0.7s 0.25s cubic-bezier(.2,.9,.3,1.2) both;
  max-height: 62vh; overflow-y: auto;
}
@keyframes slideR { from { opacity: 0; transform: translateX(40px); } }
.a-head .badge {
  font-family: var(--mono); font-size: 9px; letter-spacing: 2px; color: var(--ink);
  background: var(--teal); padding: 3px 8px; border-radius: 20px; font-weight: 600;
}
#zone-name { font-size: 20px; font-weight: 800; margin: 8px 0 10px; color: #fff; line-height: 1.1; }
.a-sec { margin-bottom: 12px; animation: fadeUp 0.5s both; }
.a-sec h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--coral); margin-bottom: 3px; text-transform: uppercase; }
.a-sec p { font-size: 13px; line-height: 1.5; color: #d5eef2; min-height: 1.2em; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
#reanalyze {
  margin-top: 4px; width: 100%; padding: 9px; border: 1px solid var(--glass-brd);
  background: rgba(34,198,192,0.15); color: var(--teal); font-family: var(--mono);
  font-size: 12px; border-radius: 10px; cursor: pointer; font-weight: 600;
}
#reanalyze:hover { background: rgba(34,198,192,0.3); }
#reanalyze:disabled { opacity: 0.5; cursor: wait; }

/* Log */
#log {
  position: fixed; bottom: 60px; left: 14px; z-index: 15; width: 220px; overflow: hidden;
  animation: fadeUp 0.7s 0.35s both;
}
.log-head {
  display: flex; justify-content: space-between; padding: 11px 14px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; font-weight: 600;
}
.log-head #log-pct { color: #b6ff6b; }
#log-list { max-height: 0; transition: max-height 0.4s, padding 0.4s; padding: 0 14px; list-style: none; }
#log.open #log-list { max-height: 200px; padding: 0 14px 12px; }
#log-list li { font-size: 12px; padding: 5px 0; color: #86a3ab; display: flex; gap: 8px; align-items: baseline; }
#log-list li.found { color: #eafcff; }
#log-list li .chk { color: var(--teal); font-weight: 800; }
#log-list li em { color: var(--coral); font-style: normal; font-family: var(--mono); font-size: 10px; }

/* Toast */
#toast {
  position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 30; padding: 11px 20px; border-radius: 30px; opacity: 0; pointer-events: none;
  background: rgba(11,34,46,0.9); border: 1px solid var(--coral); color: #fff;
  font-family: var(--mono); font-size: 12px; transition: opacity 0.35s, transform 0.35s;
  max-width: 88vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Footer */
#footer { position: fixed; bottom: 12px; right: 14px; z-index: 15; font-family: var(--mono); font-size: 11px; }
#footer a { color: rgba(234,252,255,0.7); text-decoration: none; padding: 5px 10px; border-radius: 20px; background: rgba(11,34,46,0.5); }
#footer a:hover { color: var(--teal); }

/* Touch controls */
#touch-controls { display: none; }
#joy {
  position: fixed; bottom: 90px; left: 20px; width: 100px; height: 100px; z-index: 18;
  border-radius: 50%; background: rgba(11,34,46,0.4); border: 1px solid var(--glass-brd);
  touch-action: none;
}
#joy-stick {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px;
  border-radius: 50%; background: var(--teal); opacity: 0.85;
}
#hop-btn {
  position: fixed; bottom: 100px; right: 20px; z-index: 18; width: 82px; height: 82px;
  border-radius: 50%; background: var(--coral); color: #fff; border: none;
  font-family: var(--mono); font-weight: 800; font-size: 15px; letter-spacing: 1px;
  box-shadow: 0 6px 20px rgba(255,107,94,0.5); touch-action: none;
}
#hop-btn:active { transform: scale(0.92); }

/* Modal */
#modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(6,20,28,0.7); backdrop-filter: blur(4px); }
#modal.hidden { display: none; }
.modal-card { width: 90%; max-width: 460px; padding: 28px; max-height: 86vh; overflow-y: auto; }
.modal-card h3 { font-size: 24px; font-weight: 800; margin-bottom: 12px; color: #fff; }
.modal-card p { font-size: 14px; line-height: 1.6; margin-bottom: 12px; color: #d5eef2; }
.modal-card ul { list-style: none; margin: 8px 0 16px; }
.modal-card li { font-size: 13px; line-height: 1.7; color: #cfe8ec; padding-left: 18px; position: relative; }
.modal-card li:before { content: '▹'; position: absolute; left: 0; color: var(--teal); }
#modal-close { width: 100%; padding: 12px; border: none; border-radius: 12px; background: var(--coral); color: #fff; font-family: var(--disp); font-weight: 800; font-size: 15px; cursor: pointer; }
#modal-close:hover { background: #ff8579; }

/* Loading */
#loading {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#8fd6ea, #ffe0c2); color: var(--ink); font-family: var(--mono);
  font-size: 14px; letter-spacing: 1px;
}

/* Mobile */
@media (max-width: 720px) {
  #touch-controls { display: block; }
  #analyst { width: 260px; max-width: 62vw; top: 62px; padding: 12px; max-height: 44vh; }
  #zone-name { font-size: 16px; }
  #metrics { top: 62px; min-width: 118px; padding: 9px 10px; }
  .gauge span { font-size: 15px; }
  #log { bottom: auto; top: 260px; width: 180px; }
  #title-ribbon .sub { display: none; }
  #toast { bottom: 200px; }
}
</parameter>
</invoke>