/* Bracelet hologram — tokens and components from the Figma file
   (JVK7tVxKBtS99zDpE6XW9o, "Bracelet" mode). Frame is 800 × 700 and is
   scaled to fit the window. */
:root {
  --bg-page:        #0a0f0c;
  --text-primary:   #eafff4;
  --text-secondary: #9fc9b4;
  --text-holo:      #7fe3b0;
  --text-accent:    #f2a33c;
  --bg-row:         rgba(127,227,176,.06);
  --bg-row-hover:   rgba(127,227,176,.09);
  --bg-focus:       rgba(242,163,60,.14);
  --bg-primary:     rgba(47,181,106,.18);
  --bg-overlay:     rgba(9,32,21,.95);
  --border-subtle:  rgba(127,227,176,.14);
  --border-default: rgba(127,227,176,.22);
  --border-brand:   #2fb56a;
  --border-focus:   #ffd579;
  --border-accent:  #f2a33c;
  --glow-brand:     rgba(47,181,106,.24);
  --glow-focus:     rgba(242,163,60,.4);
  --hardware-knob:  #242a26;
  --hardware-edge:  #3a423d;
  --hardware-edge-light: #4a534d;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 18px; --radius-full: 999px;
  --stroke-thin: 1px; --stroke-focus: 3px;
  --space-sm: 8px; --space-md: 12px; --space-lg: 16px;
  --jp: "Noto Sans JP", "Noto Sans SC", "Noto Sans KR", system-ui, sans-serif;
  --inter: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg-page); color: var(--text-primary);
  font-family: var(--jp); overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
p { margin: 0; }

/* ---------- stage & scaling ---------- */
.stage { position: fixed; inset: 0; display: grid; place-items: center; }
.frame {
  position: relative; width: 800px; height: 700px; flex: none;
  transform-origin: center center;
}

/* ---------- panel ---------- */
.panel {
  position: absolute; left: 16px; top: 20px; width: 768px; height: 512px;
  border: var(--stroke-thin) solid var(--border-default); border-radius: var(--radius-xl);
  overflow: hidden;
  background-image: linear-gradient(118.48deg, rgb(18,48,36) 10.938%, rgb(12,36,25) 57.813%);
  box-shadow: 0 0 70px 0 var(--glow-brand);
}
.scanlines {
  position: absolute; inset: -1px 0 0 -1px; width: 768px; height: 512px; opacity: .14; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--text-holo) 0 1px, transparent 1px 4px);
  z-index: 3;
}
.content {
  position: absolute; left: -1px; top: -1px; width: 768px; height: 512px;
  display: flex; flex-direction: column; gap: 14px; padding: 26px 30px; overflow: hidden;
}

/* type styles */
.t-title  { font: 700 28px/1.2 var(--jp); letter-spacing: -.2px; color: var(--text-primary); }
.t-body   { font: 400 17px/1.5 var(--jp); }
.t-strong { font: 500 17px/1.4 var(--jp); color: var(--text-primary); }
.t-meta   { font: 400 14px/1.4 var(--jp); color: var(--text-secondary); }
.t-label  { font: 600 13px/1.3 var(--inter); letter-spacing: .6px; }
.t-time   { font: 700 19px/1 var(--inter); color: var(--text-primary); }

/* status bar */
.statusbar { display: flex; align-items: center; justify-content: space-between; flex: none; height: 56px; }
.logo { width: 152px; height: 56px; display: block; }
.back-row { display: flex; align-items: center; gap: 9px; }
.back-row img { width: 18px; height: 18px; }

.header { display: flex; flex-direction: column; gap: 4px; flex: none; }

/* focus treatment shared by rows, chips, buttons */
.focusable { transition: background-color .12s, border-color .12s, box-shadow .12s; }
.is-focus {
  background: var(--bg-focus) !important;
  border: var(--stroke-focus) solid var(--border-focus) !important;
  box-shadow: 0 0 26px 0 var(--glow-focus);
}

/* ---------- map ---------- */
.map { position: relative; height: 360px; flex: none; overflow: hidden; }  /* Figma 372; 12px of empty bottom margin trimmed so the focused settings pill is not clipped */
.mapbase {
  position: absolute; left: 0; top: 20px; width: 708px; height: 332px; overflow: hidden;
  background: var(--bg-row); border: var(--stroke-thin) solid var(--border-subtle); border-radius: var(--radius-lg);
}
/* Bonorong 2026 map layers (js/map-data.js) in hologram tones */
.mapbase .layer { position: absolute; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.mapbase .layer.site { background: rgba(127,227,176,.05); -webkit-mask-image: url(../assets/map-site.png); mask-image: url(../assets/map-site.png); }
.mapbase .layer.enclosures { background: rgba(127,227,176,.13); -webkit-mask-image: url(../assets/map-enclosures.png); mask-image: url(../assets/map-enclosures.png); }
.mapbase .paths { position: absolute; left: 0; top: 0; width: 708px; height: 332px; }
.paths .smooth { fill: rgba(230,200,150,.34); }      /* --map-track from Figma */
.paths .rough { fill: rgba(230,200,150,.17); }       /* rough, uneven terrain */
.paths .building { fill: rgba(127,227,176,.20); }
.marker {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center;
  background: rgba(9,32,21,.85); border: var(--stroke-thin) solid var(--border-default);
}
.marker > img { width: 14px; height: 14px; }
.marker.is-focus { box-shadow: 0 0 13px 0 var(--glow-focus); }
/* focused / destination markers and their labels float above the "you are here"
   dot (z 4); their slightly see-through background keeps the dot visible */
.marker.is-focus, .marker.is-dest { z-index: 6; }
.marker.is-dest { background: var(--bg-primary); border-color: var(--border-brand); }
.marker-label {
  position: absolute; left: 30px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  padding: 5px 10px; border-radius: var(--radius-sm); color: var(--text-primary);
  background: rgba(9,32,21,.72); border: var(--stroke-thin) solid var(--border-focus); box-shadow: 0 0 13px 0 var(--glow-focus);
}
.marker.is-dest .marker-label { border-color: var(--border-brand); box-shadow: none; }
.marker-label.flip { left: auto; right: 30px; }
.poi {
  position: absolute; display: flex; gap: 8px; align-items: center;
  padding: 8px 14px 8px 12px; border-radius: var(--radius-sm);
  background: var(--bg-row-hover); border: var(--stroke-thin) solid var(--border-subtle);
  color: var(--text-secondary); white-space: nowrap; z-index: 2;
}
.poi img { width: 18px; height: 18px; }
.poi.is-focus { color: var(--text-primary); padding: 6px 12px 6px 10px; box-shadow: 0 0 13px 0 var(--glow-focus); }
.poi.is-dest { background: var(--bg-primary); border-color: var(--border-brand); color: var(--text-primary); }
.routes { position: absolute; left: 0; top: 20px; width: 708px; height: 332px; overflow: visible; z-index: 1; pointer-events: none; }
.you {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; z-index: 4; transform: scale(.8);
}
.you img { position: absolute; inset: -55.56%; width: 38px; height: 38px; }
.you-label {
  position: absolute; width: 90px; margin-left: -45px; text-align: center; z-index: 4; font-size: 12px;
  text-shadow: 0 0 4px #0c2419, 0 0 8px #0c2419;
}
.event-card {   /* top-right: on the Bonorong map that corner is the car park, so it never hides the route */
  position: absolute; right: 10px; top: 4px; z-index: 6; max-width: 300px;
  display: flex; flex-direction: column; gap: 3px; padding: 9px 13px;
  background: rgba(9,32,21,.72); border: var(--stroke-thin) solid var(--border-accent);
  border-radius: var(--radius-md); box-shadow: 0 0 40px 0 var(--glow-focus); white-space: nowrap;
}
.event-card .eta { color: var(--text-accent); }

.hint { display: flex; gap: 8px; align-items: center; height: 34px; flex: none; }
.hint .t-meta { flex: 1; }
.pill {
  display: flex; align-items: center; padding: 8px 14px 8px 12px; border-radius: var(--radius-sm);
  background: var(--bg-row-hover); border: var(--stroke-thin) solid var(--border-subtle);
}
.pill img { width: 18px; height: 18px; }
.pill.is-focus { padding: 6px 12px 6px 10px; box-shadow: 0 0 13px 0 var(--glow-focus); }
.pill.nearby { gap: 8px; color: var(--text-secondary); }
.pill.nearby.is-focus { color: var(--text-primary); }
.hint .t-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- lists (events, languages, settings) ---------- */
.list { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; overflow: hidden; }
.list.tight { gap: 8px; }
.list.more-below { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
.row {
  display: flex; gap: 16px; align-items: center; padding: 12px 16px; flex: none;
  background: var(--bg-row); border: var(--stroke-thin) solid var(--border-subtle); border-radius: var(--radius-md);
}
.row.past { opacity: .45; }
.row.is-focus { padding: 10px 14px; }
.row .time { width: 96px; flex: none; }
.row .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; overflow: hidden; }
.row .text > * { overflow: hidden; text-overflow: ellipsis; }
.chip {
  flex: none; padding: 8px 16px; border-radius: var(--radius-full);
  background: var(--bg-row); border: var(--stroke-thin) solid var(--border-subtle); color: var(--text-secondary);
}
.chip.is-focus { color: var(--text-primary); padding: 6px 14px; box-shadow: 0 0 13px 0 var(--glow-focus); }
.lang-row { gap: 12px; padding: 10px 16px; }
.lang-row.is-focus { padding: 8px 14px; }
.lang-row .native { flex: none; white-space: nowrap; }
.lang-row .english { flex: 1; }
.lang-row img, .setting-row img.chev { width: 20px; height: 20px; }
.setting-row { gap: 14px; padding: 13px 16px; }
.setting-row.is-focus { padding: 11px 14px; }
.setting-row img.ico { width: 22px; height: 22px; }
.setting-row .label { flex: 1; }
.setting-row .value { color: var(--text-accent); white-space: nowrap; }

/* ---------- animal ---------- */
.animal { display: flex; gap: 20px; flex: 1; min-height: 0; overflow: hidden; }
.photo {
  width: 336px; height: 279px; flex: none; border-radius: var(--radius-lg);
  border: var(--stroke-thin) solid var(--border-subtle); overflow: hidden; background: rgba(0,0,0,.08);
}
.photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.photo.placeholder { display: grid; place-items: center; background: var(--bg-row); }
.photo.placeholder img.ph-icon { width: 96px; height: 96px; opacity: .35; }
.copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.copy .t-body.secondary { color: var(--text-secondary); }

/* ---------- popovers ---------- */
.scrim { position: absolute; inset: 0; background: var(--bg-page); opacity: .22; z-index: 6; }
.popover {
  position: absolute; left: 63px; bottom: 28px; width: 640px; z-index: 7;
  display: flex; flex-direction: column; gap: 14px; padding: 22px 24px;
  background: var(--bg-overlay); border: var(--stroke-thin) solid var(--border-brand); border-radius: var(--radius-lg);
  filter: drop-shadow(0 0 20px var(--glow-focus));
  animation: pop-in .18s ease-out;
}
.popover.steady { animation: none; }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pop-head { display: flex; gap: 12px; align-items: center; }
.pop-head > img { width: 26px; height: 26px; flex: none; }
.pop-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.actions { display: flex; flex-direction: column; gap: 10px; }
.btn {
  display: flex; gap: var(--space-md); align-items: center; padding: var(--space-md) var(--space-lg);
  background: var(--bg-row); border: var(--stroke-thin) solid var(--border-subtle); border-radius: var(--radius-md);
}
.btn img { width: 22px; height: 22px; }
.btn.is-focus { padding: 10px 14px; filter: drop-shadow(0 0 13px var(--glow-focus)); box-shadow: none; }
.pace-options { display: flex; gap: 12px; }
.pace {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 10px; background: var(--bg-row); border: var(--stroke-thin) solid var(--border-subtle); border-radius: var(--radius-md);
}
.pace.is-focus { padding: 14px 8px; }
.pace img { width: 30px; height: 30px; }
.pace .t-meta { text-align: center; }

/* ---------- device chrome ---------- */
.chrome { position: absolute; left: 16px; top: 532px; width: 768px; height: 126px; }
.cone { position: absolute; left: 0; top: 0; width: 768px; height: 52px; }
.band {
  position: absolute; left: 174px; top: 52px; width: 420px; height: 74px;
  display: flex; gap: 24px; align-items: center; justify-content: center;
  background: linear-gradient(to bottom, #2a2f2c, #151a17);
  border: 1px solid var(--hardware-edge); border-top: 0; border-radius: 0 0 26px 26px;
}
.seam {
  position: absolute; left: 244px; top: 51px; width: 280px; height: 2px; opacity: .7;
  background: var(--text-holo); box-shadow: 0 0 10px 0 var(--text-holo);
}
.key {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--hardware-knob); border: 1px solid var(--hardware-edge-light);
  font: 600 18px/1.4 var(--inter); color: var(--text-primary); cursor: pointer; padding: 0;
}
.key:active, .key.pressed { background: #2e3531; }
.dial {
  position: relative; width: 62px; height: 62px; border-radius: 31px; cursor: pointer; padding: 0;
  border: 1px solid var(--hardware-edge-light);
  background: conic-gradient(from 90deg, rgb(60,67,62) 0%, rgb(32,38,34) 50%, rgb(60,67,62) 100%);
}
.dial .notch-arm { position: absolute; inset: 0; transition: transform .16s ease-out; }
.dial .notch {
  position: absolute; left: 28px; top: 4.5px; width: 4px; height: 11px; border-radius: 2px;
  background: var(--text-holo);
}
.dial svg.hold { position: absolute; inset: -6px; width: 74px; height: 74px; pointer-events: none; transform: rotate(-90deg); }
.dial svg.hold circle { fill: none; stroke: var(--text-holo); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 220; stroke-dashoffset: 220; opacity: 0; filter: drop-shadow(0 0 4px var(--text-holo)); }
.dial.holding svg.hold circle { opacity: 1; }
.dial.pressed { filter: brightness(1.25); }
.keycaps {
  position: absolute; top: 132px; left: 174px; width: 420px; display: flex; justify-content: center; gap: 24px;
  font: 600 11px/1 var(--inter); color: #5d6b63; letter-spacing: .5px;
}
.keycaps span { width: 40px; text-align: center; }
.keycaps span.mid { width: 62px; }

/* ---------- connection badge (facilitator only, subtle) ---------- */
.conn {
  position: fixed; right: 10px; bottom: 8px; font: 500 11px var(--inter); color: #3f4a44; z-index: 20;
}

/* ---------- local facilitator panel (Ctrl+Shift+F) ---------- */
.fac {
  position: fixed; top: 12px; right: 12px; width: 300px; z-index: 30; display: none;
  background: #faf8f4; color: #1a2420; border-radius: 12px; padding: 14px; font: 13px/1.4 var(--inter);
  box-shadow: 0 10px 40px rgba(0,0,0,.5); user-select: auto;
}
.fac.open { display: block; }
.fac h2 { font-size: 14px; margin: 0 0 8px; }
.fac button { font: 600 12px var(--inter); border: 1px solid #cfc9bc; background: #fff; border-radius: 7px; padding: 6px 9px; margin: 0 4px 6px 0; cursor: pointer; }
.fac button.primary { background: #197340; border-color: #197340; color: #fff; }
.fac .muted { color: #5c6b63; font-size: 12px; }