#play-roam { position: relative; }

#hr-hud {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  top: max(56px, env(safe-area-inset-top));
  z-index: 4;
  pointer-events: none;
}
#hr-hud > * { pointer-events: auto; }
#hr-card {
  background: #0b2400ee;
  border: 1px solid #ffcf0640;
  border-radius: 12px;
  padding: 10px 12px;
  max-width: 420px;
}
#hr-steps {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold, #FFCF06);
}
#hr-state { font-size: 16px; font-weight: 650; margin: 4px 0 0; }
#hr-mates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
#hr-mates[hidden] { display: none !important; }
.hr-mate {
  background: #0B2200;
  color: #fff;
  border: 1px solid #FFCF0666;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
}
.hr-mate.is-ahead { color: #FFCF06; border-color: #FFCF06; }
.hr-mate.is-with { border-color: #42AE01; color: #d8ffb0; }
.hr-mate.is-behind { opacity: .85; }
.hr-mate.is-done { color: #FFCF06; }
.hr-mate.is-self { border-color: #ffffff55; }
#hr-bar { height: 6px; border-radius: 6px; background: #ffffff18; overflow: hidden; margin-top: 8px; }
#hr-barfill { display: block; height: 100%; width: 0; background: var(--warn, #FFCF06); }

#hr-ar {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #000;
}
#hr-ar[hidden], #hr-code[hidden], #hr-circuit[hidden], #hr-clue[hidden], #hr-fin[hidden],
#hr-finale[hidden], #hr-fish[hidden], #hr-hud[hidden] { display: none !important; }
#hr-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#hr-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }

#hr-code, #hr-circuit, #hr-clue, #hr-fin, #hr-finale, #hr-fish {
  position: absolute;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(92vw, 420px);
  z-index: 6;
  background: #0b2400f2;
  border: 1px solid #ffffff26;
  border-radius: 16px;
  padding: 16px;
}
#hr-fin, #hr-finale {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  text-align: center;
}

#hr-fin {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  max-height: min(88dvh, calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  padding-bottom: 12px;
  min-height: 0;
}
#hr-fin .sheet-body {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#hr-fin .sheet-cta {
  background: #0b2400;
  box-shadow: 0 -12px 16px #0b2400;
}
#hr-code-row { display: flex; gap: 8px; margin-top: 8px; }
#hr-code-clue {
  margin: 8px 0 4px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink, #e8ffe0);
}

#hr-clue-text,
#hr-code-clue {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}
#hr-clue .sheet-body,
#hr-code .sheet-body {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
#hr-code-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  font-size: 17px;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#hr-clue-pic { max-width: 100%; border-radius: 10px; margin: 8px 0; }


#hr-clue {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  max-height: min(70vh, calc(100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  padding-bottom: 12px;
}
#hr-clue .sheet-cta {
  background: #0b2400;
  box-shadow: 0 -12px 16px #0b2400;
}

#hr-circuit { max-height: calc(100dvh - 96px); overflow-y: auto; text-align: center; }
#hr-circuit h2 { margin: 0 0 4px; }
#hr-circuit .muted { margin: 0; }


#hr-code {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  max-height: min(70vh, calc(100dvh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  padding-bottom: 12px;
}
#hr-code .sheet-cta {
  background: #0b2400;
  box-shadow: 0 -12px 16px #0b2400;
}


.tour-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 2px;
  padding-bottom: 4px;
}
.tour-rail figure {
  flex: 0 0 86%;
  margin: 0;
  scroll-snap-align: center;
  background: #0b0d09;
  border: 1px solid #ffffff2b;
  border-radius: 10px;
  overflow: hidden;
}
.tour-rail img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: contain;
  background: #0b0d09;
}
.tour-rail figcaption {
  font-size: 11.5px;
  line-height: 1.35;
  color: #ffffffb8;
  padding: 5px 8px 7px;
}
.tour-rail-hint, .tour-rail-pending {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff80;
  margin: 2px 0 0;
}

.tour-dialog {
  max-width: min(560px, 92vw);
  width: 100%;
  max-height: 86vh;
  border: 1px solid #ffffff2b;
  border-radius: 14px;
  background: #14170f;
  color: #fff;
  padding: 14px 16px 18px;
}
.tour-dialog::backdrop { background: #000a; }
.tour-dlg-head { display: flex; align-items: center; gap: 10px; }
.tour-dlg-head h2 { flex: 1; margin: 0; font-size: 18px; }
.tour-slide { margin: 14px 0 4px; }
.tour-slide h3 { margin: 0 0 6px; font-size: 15.5px; }
.tour-slide p { margin: 0 0 4px; font-size: 14px; line-height: 1.55; }
.tour-done-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 0; border-bottom: 1px solid #ffffff1e;
}
.tour-rail-tap { cursor: zoom-in; }
.tour-zoom {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: #000; color: #fff;
}
.tour-zoom::backdrop { background: #000; }
.tour-zoom-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
}
.tour-zoom-stage img {
  max-width: 100vw; max-height: 100vh;
  transform-origin: center center;
  user-select: none; -webkit-user-drag: none;
}
.tour-zoom-x {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #ffffff44; background: #000000aa; color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.tour-zoom-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, #000000cc);
  font-size: 12.5px; line-height: 1.4; color: #ffffffd0; text-align: center;
  pointer-events: none;
}

.tour-edit { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tour-edit label { font-size: 12.5px; font-weight: 600; color: #ffffffb8; display: block; }
.tour-edit textarea {
  display: block; width: 100%; min-height: 96px; margin-top: 4px;
  font: inherit; font-size: 14px; line-height: 1.5;
  background: #0b0d09; color: #fff; border: 1px solid #ffffff2b; border-radius: 8px;
  padding: 8px;
}

#hr-voice-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
#hr-voice-pick {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  font-size: 14px;
}
#hr-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


#clues-suspects[hidden] { display: none; }
#clues-panel.has-suspects {
  max-height: min(78vh, 620px);
  width: min(420px, calc(100% - 20px));
}
#sus-sheet {
  display: grid; gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ffffff22;
  margin-bottom: 4px;
}
#sus-sheet[hidden] { display: none; }
#sus-head { display: flex; align-items: center; gap: 10px; }
#sus-head h2 { margin: 0; flex: 1; font-size: 16px; color: var(--gold, #FFCF06); }
#sus-hint { margin: 0; font-size: 12px; }
#sus-left { margin: 0; font-weight: 700; font-size: 13px; }
#sus-grid {
  display: grid; grid-template-columns: 1fr; gap: 6px;
}
@media (min-width: 560px) { #sus-grid { grid-template-columns: 1fr 1fr; } }
.sus-card {
  display: flex; align-items: center; gap: 8px;
  text-align: left;
  background: #ffffff10; color: #fff;
  border: 1px solid #ffffff22; border-radius: 12px;
  padding: 6px 8px;
  cursor: pointer;
}
.sus-card:hover, .sus-card:focus-visible { border-color: #ffffff55; }
.sus-mug {
  position: relative; flex: 0 0 52px;
  width: 52px; height: 52px; border-radius: 8px; overflow: hidden;
}
.sus-mug img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sus-card.crossed .sus-mug::before,
.sus-card.crossed .sus-mug::after {
  content: ""; position: absolute; left: -8%; right: -8%; top: 50%;
  height: 7px; margin-top: -3.5px;
  background: #ED2900; border-radius: 4px;
  box-shadow: 0 0 0 1px #0006;
}
.sus-card.crossed .sus-mug::before { transform: rotate(45deg); }
.sus-card.crossed .sus-mug::after { transform: rotate(-45deg); }
.sus-card.crossed .sus-info, .sus-card.crossed .sus-print { opacity: .45; }
.sus-card.crossed .sus-name { text-decoration: line-through; text-decoration-color: #ED2900; }
.sus-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sus-name { font-size: 15px; letter-spacing: .06em; }
.sus-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; font-size: 11.5px; color: #dfe8d2; }
.sus-shoe { color: var(--gold, #FFCF06); font-weight: 700; }
.sus-print {
  flex: 0 0 auto; width: 30px; max-height: 56px; object-fit: contain;
  filter: invert(1) opacity(.8);
  transform: rotate(20deg);
}
#sus-reset { justify-self: end; }





.tour-pair .tp-row { display: flex; gap: 6px; }
.tour-pair .tp-one { flex: 1 1 0; min-width: 0; }
.tour-pair .tp-one img { height: 150px; }
.tour-pair .tp-cap {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: #ffffffb8;
  padding: 5px 7px 7px;
}

@media (max-width: 430px) {
  .tour-pair .tp-row { flex-direction: column; gap: 2px; }
  .tour-pair .tp-one img { height: 130px; }
}


body.hunt-on .report-dock {
  z-index: 28;
}
body.hunt-on .report-dock.is-dragging {
  z-index: 60;
}
body.hunt-on .report-dock:not(.is-dragging) {
  
  top: calc(max(10px, env(safe-area-inset-top, 0px)) + 52px) !important;
  left: max(14px, env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  bottom: auto !important;
}



.qa-jump {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid #ffcf0640;
  border-radius: 999px;
  background: #143a00f0;
  color: var(--gold, #FFCF06);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.qa-jump:hover, .qa-jump:focus-visible { filter: brightness(1.08); }
.qa-jump[hidden] { display: none !important; }



#hr-fin.hr-fin-celebrate h2 { animation: hrFinTitle .55s ease-out; }
#hr-fin.hr-fin-celebrate #hr-fin-badge { animation: hrFinPop .5s ease-out; }
@keyframes hrFinTitle {
  0% { transform: scale(.85); opacity: 0; letter-spacing: .12em; }
  70% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); letter-spacing: normal; }
}
@keyframes hrFinPop {
  0% { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.hr-fin-burst { display: none; }
.hr-fin-level {
  margin: 8px 0 2px;
  font-weight: 800;
  color: var(--gold, #e6c35c);
  font-size: 15px;
  letter-spacing: .04em;
}


.fin-xp-beat { margin: 10px 0 8px; width: 100%; text-align: left; }
.fin-xp-beat[hidden] { display: none !important; }
.fin-xp-beat-meta { display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: #cfe3bf; margin-bottom: 5px; font-weight: 700; }
.fin-xp-beat-track { height: 10px; border-radius: 99px; background: #ffffff18;
  overflow: hidden; border: 1px solid #ffffff22; }
.fin-xp-beat-fill { height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, #c9a227, var(--gold, #e6c35c));
  transition: width .8s ease-out; will-change: width; }
.fin-xp-beat-next { margin-top: 10px; width: 100%; }

.hr-fin-next {
  margin: 12px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #ffffff2a;
  background: #ffffff0d;
  text-align: left;
}
.hr-fin-next-label {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold, #e6c35c);
  font-weight: 700;
  margin-bottom: 4px;
}
.hr-fin-next-title { font-weight: 800; font-size: 15px; color: #fff; }
.hr-fin-next-dist { font-size: 12.5px; margin-top: 2px; color: #cfe3bf; }
#hr-fin-home { margin-top: 8px; }
#hr-party {
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: #0B2200;
  border: 1px solid #FFCF06;
  text-align: center;
}
#hr-party[hidden] { display: none !important; }
#hr-party p { margin: 0 0 8px; color: #FFCF06; font-weight: 800; }
#hr-party canvas {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 10px;
}
#hr-party canvas[hidden], #hr-party [data-party-share][hidden] { display: none !important; }
#hr-party [data-party-share] { margin-top: 10px; width: 100%; }


#hr-fish {
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: none;
  width: auto;
  max-width: none;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}
#hr-fish .fish-hud {
  position: static;
  pointer-events: none;
  display: block;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
#hr-fish .fish-catch { display: contents; }
#hr-fish .fish-bar,
#hr-fish-bar {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  top: 18%;
  width: 34px;
  height: min(42vh, 248px);
  border-radius: 17px;
  background:
    repeating-linear-gradient(to top, transparent 0 15px, rgba(255,255,255,.08) 15px 16px),
    linear-gradient(#122616, #07140c);
  border: 1px solid rgba(232, 226, 188, .32);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 10px 22px -16px rgba(0,0,0,.8);
  pointer-events: none;
}
#hr-fish .fish-bar-zone,
#hr-fish-bar-zone {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 12px;
  background: rgba(66, 174, 1, .34);
  border: 1px solid rgba(184, 255, 106, .95);
}
#hr-fish .fish-bar-zone.on-fish,
#hr-fish-bar-zone.on-fish {
  background: rgba(66, 174, 1, .8);
  border-color: #E7FFC4;
  box-shadow: 0 0 12px rgba(66, 174, 1, .55);
}
#hr-fish .fish-bar-fish,
#hr-fish-bar-fish {
  position: absolute;
  left: 50%;
  width: 28px;
  height: 16px;
  margin-left: -14px;
  margin-bottom: -8px;
  background: none;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.75));
}
#hr-fish .fish-bar-fish svg,
#hr-fish-bar-fish svg { width: 100%; height: 100%; display: block; overflow: visible; }
#hr-fish .fish-prog-wrap {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  top: calc(18% + min(42vh, 248px) + 8px);
  width: 76px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
#hr-fish .fish-bar-progress-label {
  font-family: var(--display, "Bahnschrift", "Segoe UI", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #E7F0DC;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  font-variant-numeric: tabular-nums;
}
#hr-fish .fish-bar-progress-track {
  height: 8px;
  border-radius: 8px;
  background: rgba(6, 18, 0, .72);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
}
#hr-fish .fish-bar-progress,
#hr-fish-bar-progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #2F8A00, #42AE01 55%, #FFCF06);
  border-radius: 8px;
  transition: width .05s linear;
}
#hr-fish-strike {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 84px;
  height: 84px;
  min-height: 84px;
  padding: 0 8px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.05;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 0 0 7px #2A3136,
    0 0 0 9px rgba(255, 207, 6, .35),
    0 12px 22px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.55);
  z-index: 2;
}
#hr-fish-strike.is-holding {
  background: #42AE01;
  border-color: #42AE01;
  box-shadow:
    0 0 0 7px #163218,
    0 0 0 9px rgba(66, 174, 1, .45),
    0 8px 16px rgba(0,0,0,.4);
  transform: scale(.98);
}
#hr-fish-say { display: none; }
#hr-fish-say.fish-cue {
  display: block;
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  max-width: min(88vw, 320px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(6, 22, 0, 0.9);
  border: 1px solid rgba(255, 207, 6, 0.4);
  color: #F4F8EF;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.8);
}
#hr-fish-say.fish-cue[hidden] { display: none; }
#hr-fish-return.fish-return {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  z-index: 7;
  margin: 0;
  max-width: min(88vw, 320px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(6, 22, 0, .9);
  border: 1px solid rgba(255, 207, 6, .4);
  color: #F4F8EF;
  font-family: var(--display, "Bahnschrift", "Segoe UI", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}
#hr-fish-return[hidden] { display: none !important; }