/* TZJB / notebook theme. Independent of the other theme.
 * Shared DOM, panel controllers and data contracts live in unity-scripts.js.
 * Edit this stylesheet directly; conditional/state rules intentionally retain their order.
 */

/* Application shell, HUD, messages and inventory */
@font-face { font-family: OpenSans; src: url("../fonts/OpenSans-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }

@font-face { font-family: ComicNeue; src: url("../fonts/ComicNeue-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }

@font-face { font-family: Nunito; src: url("../fonts/Nunito-Variable.ttf") format("truetype"); font-weight: 200 1000; font-style: normal; font-display: swap; }

@font-face { font-family: "Patrick Hand"; src: url("../fonts/PatrickHand-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --notebook-header-baseline-offset: 0px;
  --ui-ink: #3a2a1f;
  --ui-paper: #f2f3ec;
  --ui-paper-edge: #ccc5b7;
  --ui-leaf-light: #9fd37e;
  --ui-sky: #7cc4ea;
  --ui-sunflower: #f2b134;
  --ui-tile: #e2744a;
  --ui-raspberry: #e25c6a;
  --ui-wood: #b77a3a;
  --ui-primary: #7cbf57;
  --ui-primary-rgb: 124, 191, 87;
  --ui-primary-active: #4f9a3c;
  --ui-primary-active-rgb: 79, 154, 60;
  --ui-panel-mid: #2f6b45;
  --ui-panel-deep: #1d4a2f;
  --ui-panel-deep-rgb: 29, 74, 47;
  --ui-surface-muted: var(--ui-paper);
  --ui-surface-muted-rgb: 242, 243, 236;
  --button-text-color: var(--ui-paper);
  --panel-text-color: var(--ui-ink);
  --ui-text-on-light: var(--panel-text-color);
  --loading-text-color: #ffffff;
  --app-background-image: url("../img/newui/tempLoading_kartaBG.jpg");
  --screen-safe-zone: 8px;
  --screen-safe-top: var(--screen-safe-zone);
  --screen-safe-right: var(--screen-safe-zone);
  --screen-safe-bottom: var(--screen-safe-zone);
  --screen-safe-left: var(--screen-safe-zone);
  --color-accent: var(--ui-primary-rgb);
  --color-bg: var(--ui-primary);
  --color-bg-highlight: var(--ui-primary-active);
  --color-bg-game-score: var(--ui-primary);
  --color-location-link: var(--ui-primary);
  --color-bg-mute: #788b98;
  --color-bg-mute-highlight: #919fa9;
  --color-bg-red: #ff5656;
  --color-bg-red-highlight: #ff8b8b;
  --bg-transparent-dark: rgba(0, 0, 0, 0.5);
  --text-dark: white;
  --text-maroon: var(--panel-text-color);
  --text-blue: var(--panel-text-color);
  --color-bg-yellow: #ffd95a;
  --cursor-arrow: url("../img/ui/cursor_none.png"), auto;
  --cursor-pointer: url("../img/ui/hand_point.png"), auto;
  --bg-booklet: linear-gradient(#da4f54, #910207);
  --btn-box-shadow: 0 2px 2px #0005;
  --font-ui: "Nunito", "OpenSans", sans-serif;
  --font-handwriting: "Patrick Hand", cursive;
  --font-size-badge-label-final: clamp(12px, 0.68em, 14px);
  --panel-outer-color: var(--ui-panel-deep);
  --panel-mid-color: var(--ui-panel-mid);
  --panel-inner-color: var(--ui-surface-muted);
  --inventory-hud-score-rendered-width: min(
    var(--inventory-hud-score-button-width),
    calc(var(--inventory-hud-score-button-height) * var(--inventory-hud-score-button-aspect))
  );
  --inventory-score-toggle-inset-top: clamp(2px, 0.7vw, 4px);
  --inventory-score-toggle-inset-right: clamp(24px, 6vw, 28px);
  --inventory-score-toggle-inset-bottom: clamp(12px, 2.4vw, 14px);
  --inventory-score-toggle-inset-left: clamp(26px, 6.5vw, 32px);
  --inventory-score-panel-visual-offset-y: clamp(-4px, -0.9vw, -3px);
  --inventory-score-panel-midpoint-y: calc(
    var(--inventory-score-panel-top) +
    (var(--inventory-hud-score-button-height) / 2) +
    var(--inventory-score-panel-visual-offset-y)
  );
  --inventory-score-text-offset-y: -4px;
  --inventory-panel-score-side-safe: 62px;
  --inventory-header-button-size: clamp(34px, 7.1vw, 48px);
  --inventory-hud-unlock-gap: 10px;
  --loading-version-bottom: 2vmax;
  --loading-version-height: clamp(18px, 2.8vh, 26px);
  --nb-paper: var(--ui-paper);
  --nb-paper-back: #e8e7dc;
  --nb-paper-edge: var(--ui-paper-edge);
  --nb-cover-light: #3b7f55;
  --nb-cover: #2f6b45;
  --nb-cover-deep: #1d4a2f;
  --nb-ink: var(--ui-ink);
  --nb-pencil: #a33a32;
  --nb-radius: clamp(14px, 2vmin, 22px);
  --nb-pad: clamp(16px, 3.2vmin, 36px);
  --nb-gap: clamp(10px, 1.8vmin, 20px);
  --loading-logo-height: clamp(40px, 7.5vh, 78px);
  --loading-logo-max-width: 380px;
  --loading-hint-height: clamp(128px, 25dvh, 260px);
  --loading-stage-top: max(14px, env(safe-area-inset-top));
  --loading-stage-x: clamp(14px, 4vw, 48px);
  --loading-stage-bottom: calc(var(--loading-version-bottom) + var(--loading-version-height) + 8px);
}

/* Keep each child header's existing coordinates; adjust its whole region once. */
.ui-panel,
#active-tasks-panel {
  --panel-header-scale: 1;
  --notebook-header-instance-offset: 0px;
  --notebook-header-offset: calc(var(--notebook-header-baseline-offset) + var(--notebook-header-instance-offset));
}

#location-panel {
  --notebook-header-instance-offset: 0px;
}

#help-panel.help-panel--welcome {
  --notebook-header-instance-offset: 0px;
}

:is(#location-panel.box-minimized, #help-panel.box-minimized, #index-panel.box-minimized, #inventory-panel.inventory-minimized, #active-tasks-panel.tasks-minimized) {
  --notebook-header-baseline-offset: 0px;
  --notebook-header-instance-offset: 0px;
}

@media only screen and (min-width: 1025px) {
  :root {
    --inventory-hud-score-button-width: clamp(300px, 29vw, 386px);
    --inventory-hud-score-button-height: clamp(82px, 8vw, 96px);
    --inventory-panel-score-side-safe: 70px;
  }
}

* {
  padding: 0px;
  margin: 0px;
  border: unset;
  font-family: var(--font-ui);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  box-sizing: border-box;
}

:focus {
  outline: none;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-sunflower);
  outline-offset: 3px;
}

html {
  height: 100dvh;
  width: 100dvw;
  cursor: var(--cursor-arrow);
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: var(--app-background-image);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center 20%;
}

.loading-wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  z-index: var(--ui-layer-loading);
  overflow: hidden;
  isolation: isolate;
}

.loading-wrapper::after {
  content: "";
  position: absolute;
  inset: 0px;
  background: radial-gradient(at 50% 45%, transparent 55%, rgba(5, 18, 10, 0.32) 100%);
  pointer-events: none;
  z-index: 0;
}

.loading-wrapper > * {
  position: relative;
  z-index: 1;
}

.unity-scene-transition-error {
  width: min(82vw, 520px);
  padding: clamp(24px, 5vw, 42px);
  border: 2px solid var(--nb-paper-edge);
  border-radius: 12px;
  color: var(--nb-ink);
  background: var(--nb-paper);
  box-shadow: 8px 10px 0 var(--nb-cover-deep);
  text-align: center;
  z-index: 3;
}

.unity-scene-transition-error button {
  margin-top: 12px;
  padding: 12px 20px;
  border: 2px solid var(--nb-ink);
  border-radius: 10px;
  color: rgb(255, 255, 255);
  background: var(--nb-cover);
  box-shadow: 3px 4px 0 var(--nb-ink);
  cursor: pointer;
}

.scene-loading-view {
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--nb-ink);
  background: var(--nb-paper);
  font-weight: 600;
  text-shadow: none;
}

.scene-loading-view p {
  margin: 0px;
}

.loading-wrapper {
  background-color: var(--nb-cover-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.5'%3E%3Cpath d='M-20 118c70-38 128-40 196-10s132 34 204-6 124-38 200 4'/%3E%3Cpath d='M-20 150c78-36 134-30 198-2s130 30 200-6 132-32 202 8'/%3E%3Cpath d='M-20 182c84-30 140-22 200 4s128 24 196-8 138-26 204 12'/%3E%3Cpath d='M-20 372c64 30 120 36 188 8s140-40 212-4 116 40 200 6'/%3E%3Cpath d='M-20 404c70 26 126 26 190 0s136-34 206-2 122 34 204 2'/%3E%3Cpath d='M-20 436c76 22 132 16 192-8s132-28 200 2 128 28 208-2'/%3E%3Cpath d='M170 276c20-26 64-32 98-18s46 42 18 60-78 18-102 2-28-26-14-44z'/%3E%3Cpath d='M196 280c12-14 38-16 58-8s26 24 10 34-44 10-58 2-18-16-10-28z'/%3E%3C/svg%3E"),
    radial-gradient(
      ellipse 90% 75% at 50% 42%,
      var(--nb-cover-light) 0%,
      var(--nb-cover) 42%,
      var(--nb-cover-deep) 100%
    );
  background-size: 560px 560px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-position: center center;
}

.loading-visuals {
  position: absolute;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}

.loading-notebook {
  position: relative;
  width: min(100%, 540px);
  height: min(100%, 920px);
  isolation: isolate;
}

.loading-notebook::before, .loading-notebook::after {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: var(--nb-radius);
  background: var(--nb-paper-back);
  border: 1px solid var(--nb-paper-edge);
  box-shadow: rgba(23, 18, 15, 0.14) 0px 1px 1px;
  z-index: 0;
}

.loading-notebook::before {
  transform: rotate(-1.6deg) translate(-2px, 5px);
  box-shadow: rgba(4, 20, 10, 0.45) 0px 18px 40px;
}

.loading-notebook::after {
  transform: rotate(1.1deg) translate(3px, 2px);
}

.loading-notebook__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0px, 1fr);
  grid-template-rows: minmax(0px, 1fr) auto;
  border-radius: var(--nb-radius);
  border: 1px solid var(--nb-paper-edge);
  background: radial-gradient(ellipse at 50% 35%, #f7f8f2 0%, transparent 70%),
    var(--nb-paper);
  box-shadow: 0 1px 0 var(--nb-paper-edge),
    0 2px 3px rgba(23, 18, 15, 0.12);
  overflow: hidden;
}

.loading-notebook__bookmark {
  position: absolute;
  top: -6px;
  right: 6%;
  z-index: 2;
  width: clamp(20px, 2.6vmin, 30px);
  height: clamp(44px, 7vmin, 72px);
  background: linear-gradient(90deg, #7a2f29 0%, var(--nb-pencil) 45%, #9d453d 100%);
  clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 50% 80%, 0px 100%);
  filter: drop-shadow(rgba(23, 18, 15, 0.25) 0px 2px 2px);
}

.loading-notebook__eraser {
  display: none;
  position: absolute;
  top: 25%;
  left: -10px;
  z-index: 3;
  width: 18px;
  height: 62px;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 5px;
  background: linear-gradient(90deg, rgb(245, 170, 173), rgb(226, 92, 106) 72%, rgb(200, 68, 86));
  box-shadow: rgba(58, 42, 31, 0.333) 2px 3px 0px;
  transform: rotate(-9deg);
  pointer-events: none;
}

.loading-notebook__page {
  position: relative;
  min-width: 0px;
  min-height: 0px;
  display: grid;
  grid-template-columns: minmax(0px, 1fr);
  justify-items: center;
}

.loading-notebook__page--art {
  grid-template-rows: auto minmax(0px, 1fr);
  gap: var(--nb-gap);
  padding: var(--nb-pad) var(--nb-pad) calc(var(--nb-gap) * 0.5);
}

.loading-notebook__page--copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nb-gap);
  padding: var(--nb-gap) var(--nb-pad) var(--nb-pad);
}

.loading-notebook__page--copy::before {
  content: "";
  position: absolute;
  top: 0px;
  left: var(--nb-pad);
  right: var(--nb-pad);
  border-top: 1.5px dashed rgba(23, 18, 15, 0.16);
}

#loading-logo-panel {
  width: min(100% - 64px, var(--loading-logo-max-width));
  height: var(--loading-logo-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

#loading-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#loading-frame-sequence {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0px;
}

.loading-frame-layer {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: scale(0.985);
  transition: none;
}

.loading-frame-layer.is-active {
  opacity: 1;
  transform: none;
}

.loading-frame-layer:not([src]), .loading-frame-layer[src=""] {
  visibility: hidden;
}

#loading {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border-width: 4px;
  border-style: solid;
  border-right-color: rgba(23, 18, 15, 0.1);
  border-bottom-color: rgba(23, 18, 15, 0.1);
  border-left-color: rgba(23, 18, 15, 0.1);
  border-image: none;
  border-top-color: var(--ui-primary-active);
  transform: translate(-50%, -50%);
  animation: 900ms linear 0s infinite normal none running spin;
}

#loading-frame-sequence.has-frame #loading {
  display: none;
}

@keyframes spin { 
  100% { transform: translate(-50%, -50%) rotate(1turn); }
}

.loading-tutorial-copy {
  margin: 0px;
  width: 100%;
  max-width: 100%;
  color: var(--nb-ink);
  text-align: center;
}

.loading-tutorial-copy--lead {
  display: none;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.45;
  color: rgba(23, 18, 15, 0.72);
  text-wrap: balance;
}

.loading-tutorial-copy--hint {
  flex: 0 0 var(--loading-hint-height);
  min-height: 0px;
  display: grid;
  place-items: center;
}

.loading-tutorial-hint-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vh, 16px);
  width: 100%;
  height: min(100%, 180px);
  min-height: 0px;
  overflow: hidden;
  padding: 8px 12px;
  border-radius: 4px 7px 5px 6px;
  background: rgb(248, 223, 173);
  box-shadow: rgb(58, 42, 31) 3px 4px 0px;
  transform: rotate(-0.45deg);
}

.loading-tutorial-hint-label, .loading-start__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  color: var(--nb-pencil);
  font-size: clamp(13px, 1.7vh, 17px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.26em;
  margin-right: -0.26em;
}

.loading-tutorial-hint-label::before, .loading-tutorial-hint-label::after, .loading-start__label::before, .loading-start__label::after {
  content: "";
  width: clamp(18px, 4vw, 34px);
  height: 2px;
  border-radius: 2px;
  background: currentcolor;
  opacity: 0.55;
}

.loading-tutorial-hint-body-text {
  flex: 0 0 auto;
  width: 100%;
  margin: 0px;
  font-size: var(--loading-hint-font-size, clamp(20px, 3.2vh, 34px));
  line-height: 1.24;
  font-weight: 700;
  color: var(--nb-ink);
  text-wrap: balance;
  overflow-wrap: normal;
}

.loading-tutorial-hint-body-text.is-entering {
  animation: 360ms ease 0s 1 normal both running loading-hint-in;
}

@keyframes loading-hint-in { 
  0% { opacity: 0; transform: translateY(6px); }
}

#loading-progressbar-wrapper {
  width: min(100%, 440px);
  min-height: 0px;
  margin: 0px;
}

#loading-progressbar-wrapper .progressbar-bg {
  aspect-ratio: auto;
  height: clamp(10px, 1.5vh, 14px);
  border-radius: 999px;
  border: 1px solid var(--nb-paper-edge);
  background: rgb(228, 227, 216);
  box-shadow: rgba(23, 18, 15, 0.16) 0px 1px 2px inset;
  filter: none;
}

#loading-progressbar-wrapper .progressbar-fill {
  position: relative;
  border-radius: inherit;
  background: var(--ui-primary);
  transition: width 300ms;
}

#loading-progressbar-wrapper .progressbar-fill::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%;
  width: 19px;
  height: 8px;
  border-radius: 2px 1px 1px 2px;
  background: linear-gradient(90deg, rgb(242, 177, 52) 0px, rgb(242, 177, 52) 78%, rgb(58, 42, 31) 78%, rgb(58, 42, 31) 100%);
  box-shadow: rgba(58, 42, 31, 0.4) 0px 1px 1px;
  transform: translateY(-50%) rotate(-13deg);
}

#loading-progressbar-wrapper .progressbar-fill-image {
  display: none;
}

.scene-loading-view {
  position: absolute;
  left: 50%;
  bottom: var(--loading-version-bottom);
  height: var(--loading-version-height);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  margin: 0px;
  font-size: clamp(12px, 1.6vh, 15px);
  white-space: nowrap;
}

.loading-wrapper[data-loading-view="scene"] #version {
  visibility: hidden;
}

@media (min-aspect-ratio: 5 / 4) {
  .loading-notebook {
    width: min(100%, 1180px, calc((100dvh - var(--loading-stage-top) - var(--loading-stage-bottom)) * 1.72));
    height: min(100%, 720px);
  }

  .loading-notebook__sheet {
    grid-template-columns: minmax(0px, 1.08fr) minmax(0px, 1fr);
    grid-template-rows: minmax(0px, 1fr);
    background: linear-gradient(
        90deg,
        transparent calc(51.9% - 26px),
        rgba(23, 18, 15, 0.07) 51.9%,
        transparent calc(51.9% + 26px)
      ),
      var(--nb-paper);
  }

  .loading-notebook__bookmark {
    right: auto;
    left: 5%;
  }

  .loading-notebook__page--art {
    padding-bottom: var(--nb-pad);
  }

  .loading-notebook__page--copy {
    padding: calc(var(--nb-pad) * 1.4) calc(var(--nb-pad) * 1.3) var(--nb-pad);
  }

  .loading-tutorial-copy--hint {
    flex: 1 1 auto;
  }

  .loading-notebook__page--copy::before {
    display: none;
  }

  .loading-tutorial-copy--lead {
    display: block;
    padding-bottom: var(--nb-gap);
    border-bottom: 1.5px dashed rgba(23, 18, 15, 0.16);
  }
}

@media (min-aspect-ratio: 5 / 4) and (max-height: 520px) {
  :root {
    --nb-pad: 14px;
    --nb-gap: 8px;
    --loading-logo-height: clamp(30px, 10vh, 44px);
    --loading-stage-top: max(10px, env(safe-area-inset-top));
    --loading-version-bottom: 6px;
    --loading-version-height: 16px;
  }

  .loading-tutorial-copy--lead {
    display: none;
  }

  .loading-notebook__page--copy {
    padding-top: var(--nb-pad);
  }
}

#loading-menu {
  position: absolute;
  display: grid;
  place-items: center;
  z-index: 2;
}

.loading-notebook--start {
  width: min(100%, 460px);
  height: auto;
  max-height: 100%;
  display: flex;
}

.loading-start__sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nb-gap);
  min-height: 0px;
  padding: var(--nb-pad);
}

.loading-start__sheet::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 14px;
  bottom: 20px;
  width: 24%;
  background: radial-gradient(circle, rgba(124, 196, 234, 0.333) 1.5px, transparent 2px) 0px 0px / 18px 18px;
  opacity: 0.55;
  pointer-events: none;
}

.loading-start__logo {
  flex: 0 0 auto;
  width: min(100% - 64px, 300px);
  height: clamp(38px, 6.5vh, 64px);
  object-fit: contain;
}

.loading-start__grga {
  flex: 0 1 auto;
  min-height: 0px;
  width: auto;
  max-width: 100%;
  height: clamp(150px, 32vh, 320px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.loading-start__grga:not([src]), .loading-start__grga[src=""] {
  visibility: hidden;
}

.loading-start__controls {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.2vh, 22px);
  width: 100%;
}

.loading-start__title {
  margin: 0px;
  color: var(--nb-ink);
  font-size: clamp(22px, 3.2vh, 30px);
  line-height: 1.2;
  font-family: var(--font-handwriting);
  font-weight: 400;
  text-align: center;
  text-wrap: balance;
}

.loading-start__language {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding-top: clamp(12px, 2vh, 20px);
  border-top: 1.5px dashed rgba(23, 18, 15, 0.16);
}

.loading-start__label {
  margin: 0px;
  padding: 5px 15px;
  background: rgb(248, 223, 173);
  box-shadow: rgb(58, 42, 31) 2px 3px 0px;
  color: var(--nb-ink);
  font-family: var(--font-handwriting);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0px;
  text-transform: none;
  transform: rotate(-1deg);
}

.loading-start__label::before, .loading-start__label::after {
  display: none;
}

.loading-start__languages {
  display: flex;
  gap: 4px;
  width: min(100%, 320px);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--nb-paper-edge);
  background: var(--nb-paper-back);
  box-shadow: rgba(23, 18, 15, 0.1) 0px 1px 2px inset;
}

#language-menu {
  width: min(100%, 256px);
  height: 72px;
  padding: 0px;
  border: 0px;
  border-radius: 0px;
  background: url("../img/ui/tzjb-icons/tzjb-ui-jezik-hr.svg") center center / contain no-repeat;
  box-shadow: none;
}

#language-menu:has(.lang-btn[data-lang="en"]:not(.mute)) {
  background-image: url("../img/ui/tzjb-icons/tzjb-ui-jezik-en.svg");
}

.loading-start__languages .lang-btn {
  flex: 1 1 0px;
  min-height: 44px;
  border: 0px;
  border-radius: 999px;
  background: transparent;
  color: var(--nb-ink);
  font-size: 16px;
  font-weight: 700;
  cursor: var(--cursor-pointer);
  transition: background-color 150ms, color 150ms;
}

#language-menu .lang-btn, #language-menu .lang-btn:not(.mute) {
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: transparent;
}

.loading-start__languages .lang-btn:not(.mute) {
  background: linear-gradient(var(--nb-cover), var(--nb-cover-deep));
  color: rgb(255, 255, 255);
  box-shadow: rgba(23, 18, 15, 0.25) 0px 2px 4px;
}

.loading-start__languages .lang-btn.disabled {
  pointer-events: none;
}

.loading-start__languages .lang-btn:focus-visible, #btn-start:focus-visible {
  outline: 3px solid var(--nb-pencil);
  outline-offset: 2px;
}

#btn-start {
  min-height: 54px;
  padding: 12px 24px;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
}

#btn-start {
  width: min(100%, 260px);
  border: 2.5px solid var(--nb-ink);
  border-radius: 12px 15px 11px 14px;
  background: var(--nb-cover);
  box-shadow: 4px 5px 0 var(--nb-ink);
  font-family: var(--font-handwriting);
  font-size: clamp(22px, 3vh, 28px);
  letter-spacing: 0.06em;
  transform: rotate(-1deg);
}

#btn-start:active {
  transform: translateY(3px);
  box-shadow: 1px 2px 0 var(--nb-ink);
}

@media (min-aspect-ratio: 5 / 4) {
  .loading-notebook--start {
    width: min(100%, 1020px);
  }

  .loading-start__sheet {
    display: grid;
    grid-template: "logo controls" "grga controls" minmax(0px, 1fr) / minmax(0px, 1fr) minmax(0px, 1fr);
    column-gap: calc(var(--nb-pad) * 2);
    justify-items: center;
    background: linear-gradient(
        90deg,
        transparent calc(50% - 26px),
        rgba(23, 18, 15, 0.07) 50%,
        transparent calc(50% + 26px)
      ),
      var(--nb-paper);
  }

  .loading-start__logo {
    grid-area: logo;
  }

  .loading-start__grga {
    grid-area: grga;
    height: clamp(140px, 42vh, 340px);
  }

  .loading-start__controls {
    grid-area: controls;
    align-self: center;
  }
}

@media (min-aspect-ratio: 5 / 4) and (max-height: 520px) {
  .loading-start__grga {
    height: clamp(110px, 50vh, 220px);
  }

  .loading-start__title {
    font-size: clamp(18px, 5vh, 24px);
  }

  .loading-start__controls {
    gap: 10px;
  }

  #btn-start {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-frame-layer, .loading-tutorial-hint-body-text.is-entering {
    transition: none;
    animation: auto ease 0s 1 normal none running none;
  }
}

.wrapper {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0px;
  left: 0px;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: clip;
}

.hidden:not(#unity-wrapper, .notification, #unity-ui) {
  display: none !important;
}

#img-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: calc(var(--ui-layer-panel) + 3);
  backdrop-filter: blur(10px);
  background-color: rgba(17, 51, 30, 0.82);
}

#modal-img {
  max-width: min(1280px, 90%);
  max-height: min(1080px, 90%);
  width: auto;
  height: auto;
  object-fit: contain;
  border: 8px solid var(--nb-paper);
  border-radius: 6px;
  box-shadow: 8px 10px 0 var(--nb-cover-deep);
}

.img-modal-close {
  position: absolute;
  top: max(18px, var(--screen-safe-top));
  right: max(18px, var(--screen-safe-right));
  z-index: 1;
  padding: 10px 18px;
  border: 2px solid var(--nb-ink);
  border-radius: 8px;
  color: var(--nb-ink);
  background: var(--nb-paper);
  box-shadow: 3px 4px 0 var(--nb-ink);
  font: inherit;
  cursor: pointer;
}

.contact-form-overlay {
  --contact-form-overlay-inset: clamp(12px, 2.5vw, 28px);
  position: absolute;
  inset: 0px;
  z-index: calc(var(--ui-layer-panel) + 4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(var(--contact-form-overlay-inset), var(--screen-safe-top))
    max(var(--contact-form-overlay-inset), var(--screen-safe-right))
    max(var(--contact-form-overlay-inset), var(--screen-safe-bottom))
    max(var(--contact-form-overlay-inset), var(--screen-safe-left));
  box-sizing: border-box;
}

.contact-form-overlay__backdrop {
  position: absolute;
  inset: 0px;
  background: rgba(7, 22, 45, 0.66);
  backdrop-filter: blur(10px);
}

.contact-form-overlay__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 960px);
  max-width: calc(
    100dvw - max(var(--contact-form-overlay-inset), var(--screen-safe-left)) -
    max(var(--contact-form-overlay-inset), var(--screen-safe-right))
  );
  height: min(100%, 820px);
  max-height: calc(
    100dvh - max(var(--contact-form-overlay-inset), var(--screen-safe-top)) -
    max(var(--contact-form-overlay-inset), var(--screen-safe-bottom))
  );
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 4px solid var(--ui-primary-active);
  border-radius: 24px;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(var(--ui-surface-muted-rgb), 0.98) 100%
    );
  box-shadow: rgba(5, 20, 40, 0.28) 0px 24px 60px;
  box-sizing: border-box;
}

.contact-form-overlay__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ui-primary-active);
  border-radius: 999px;
  background: rgb(255, 255, 255);
  color: var(--ui-primary-active);
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.contact-form-overlay__close:focus-visible {
  outline: 3px solid rgba(var(--ui-primary-active-rgb), 0.35);
  outline-offset: 2px;
}

.contact-form-overlay__title {
  margin: 0px;
  padding: 18px 64px 14px 24px;
  font-family: var(--font-handwriting);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--text-blue);
  text-align: left;
}

.contact-form-overlay__iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0px;
  border: 0px;
  background: rgb(255, 255, 255);
}

.results-resubmit-overlay {
  --results-resubmit-overlay-inset: clamp(16px, 3vw, 32px);
  position: absolute;
  inset: 0px;
  z-index: calc(var(--ui-layer-panel) + 5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(var(--results-resubmit-overlay-inset), var(--screen-safe-top))
    max(var(--results-resubmit-overlay-inset), var(--screen-safe-right))
    max(var(--results-resubmit-overlay-inset), var(--screen-safe-bottom))
    max(var(--results-resubmit-overlay-inset), var(--screen-safe-left));
  box-sizing: border-box;
}

.results-resubmit-overlay__backdrop {
  position: absolute;
  inset: 0px;
  background: rgba(7, 22, 45, 0.56);
}

.results-resubmit-overlay__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  padding: 24px;
  border: 4px solid var(--ui-primary-active);
  border-radius: 16px;
  background: rgb(255, 255, 255);
  box-shadow: rgba(5, 20, 40, 0.24) 0px 20px 44px;
  box-sizing: border-box;
}

.results-resubmit-overlay__title {
  margin: 0px 0px 12px;
  font-family: var(--font-handwriting);
  font-size: 1.3rem;
  color: var(--text-blue);
}

.results-resubmit-overlay__message {
  margin: 0px;
  color: var(--ui-text-on-light);
  font-size: 1rem;
  line-height: 1.4;
}

.results-resubmit-overlay__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.results-resubmit-overlay__button {
  min-height: 44px;
  padding: 0px 16px;
  border: 2px solid var(--ui-primary-active);
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.results-resubmit-overlay__button--secondary {
  background: rgb(255, 255, 255);
  color: var(--ui-primary-active);
}

.results-resubmit-overlay__button--primary {
  background: var(--ui-primary-active);
  color: rgb(255, 255, 255);
}

.results-resubmit-overlay__button:focus-visible {
  outline: 3px solid rgba(var(--ui-primary-active-rgb), 0.35);
  outline-offset: 2px;
}

#unity-wrapper.hidden {
  z-index: -10;
  opacity: 0;
}

#unity-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

#unity-canvas {
  transition: 1s;
  width: 100%;
  height: 100%;
}

#unity-canvas.qr-scanner-hidden {
  opacity: 0;
  pointer-events: none;
}

#standard-hud {
  display: contents;
}

.hud-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--button-panel-button-size);
  gap: 4px;
}

#camera-mode-control .btn-ui[hidden], #persistent-language-control .btn-ui[hidden] {
  display: none;
}

#camera-mode-control .btn-ui {
  position: relative;
  display: grid;
  place-items: center;
  border: 0px;
  background: transparent;
  box-shadow: none;
  color: var(--ui-ink);
}

#camera-mode-control .btn-ui::before {
  position: absolute;
  inset: 3px;
  border: 0px;
  border-radius: 8px;
  background: transparent;
}

#camera-mode-control .btn-ui[aria-pressed="true"]::before {
  background: var(--ui-sunflower);
  box-shadow: 1px 2px 0 var(--ui-ink);
}

#camera-mode-control .hud-choice-label {
  position: relative;
  font-family: var(--font-handwriting);
  font-size: clamp(24px, 3.4vw, 29px);
  font-weight: 400;
}

.hud-choice-label {
  font-family: var(--font-handwriting);
  font-size: clamp(25px, 4vw, 34px);
  font-weight: 800;
  line-height: 1;
}

.hud-choice .btn-ui:focus-visible {
  outline: 3px solid var(--ui-sunflower);
  outline-offset: 2px;
}

#bicycle-trail-state-label {
  position: absolute;
  top: 8px;
  left: calc(100% + 12px);
  z-index: var(--ui-layer-control-buttons);
  max-width: min(240px, 48vw);
  padding: 8px 12px;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 14px;
  background: var(--ui-paper);
  box-shadow: rgba(58, 42, 31, 0.333) 2px 3px 0px;
  color: var(--ui-ink);
  font-family: var(--font-handwriting);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms, transform 180ms;
  pointer-events: none;
}

#bicycle-trail-state-label.is-visible {
  opacity: 1;
  transform: none;
}

#btn-bicycle-trails:focus-visible {
  outline: 3px solid var(--ui-sunflower);
  outline-offset: 2px;
}

#hospitality-category-drawer {
  width: min(290px, 64vw);
  max-height: calc(100dvh - 100px);
  overflow: auto;
  padding: 12px;
  border: 4px solid rgb(255, 255, 255);
  border-radius: 18px;
  background: repeating-linear-gradient(0deg, rgb(242, 243, 236) 0px, rgb(242, 243, 236) 23px, rgb(214, 238, 249) 23px, rgb(214, 238, 249) 24px);
  box-shadow: 4px 5px 0 var(--ui-panel-deep);
  color: var(--ui-ink);
}

#hospitality-category-drawer[hidden] {
  display: none;
}

#unity-wrapper:has(#active-tasks-panel:not([hidden])) #hospitality-category-drawer {
  display: none;
}

#hospitality-category-title {
  margin-bottom: 10px;
  font-family: var(--font-handwriting);
  font-size: 24px;
  line-height: 1.1;
}

.hospitality-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  gap: 7px;
}

.hospitality-category-grid button {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0px;
  min-height: 54px;
  padding: 2px;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 12px;
  background: rgb(232, 231, 220);
  color: var(--ui-ink);
  cursor: pointer;
}

.hospitality-category-grid button[aria-pressed="true"] {
  background: var(--ui-leaf-light);
  box-shadow: rgba(58, 42, 31, 0.333) 1px 2px 0px;
}

.hospitality-category-grid img {
  width: 36px;
  height: 42px;
  flex: 0 0 36px;
  object-fit: contain;
}

.hospitality-category-grid span {
  overflow-wrap: anywhere;
  font-family: var(--font-handwriting);
  font-size: 17px;
  line-height: 1;
}

.hospitality-category-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.hospitality-category-actions button {
  flex: 1 1 0px;
  min-height: 44px;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 12px;
  background: var(--ui-sunflower);
  box-shadow: rgba(58, 42, 31, 0.333) 1px 2px 0px;
  color: var(--ui-ink);
  font-family: var(--font-handwriting);
  font-size: 19px;
  cursor: pointer;
}

#hospitality-category-drawer button:focus-visible, #btn-hospitality:focus-visible {
  outline: 3px solid var(--ui-sunflower);
  outline-offset: 2px;
}

#btn-active-tasks {
  position: relative;
  overflow: visible;
}

#active-tasks-count {
  position: absolute;
  top: -2px;
  right: -2px;
  display: grid;
  place-items: center;
  min-width: 22px;
  min-height: 22px;
  padding: 1px 4px;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 999px;
  background: var(--ui-raspberry);
  color: rgb(255, 255, 255);
  font-family: var(--font-handwriting);
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

#active-tasks-count[hidden], #active-tasks-panel[hidden], #active-tasks-empty[hidden] {
  display: none;
}

#active-tasks-panel {
  position: absolute;
  z-index: var(--ui-layer-popup);
  overflow: auto;
  background-position: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  color: var(--ui-ink);
}

@media (max-width: 600px) {
  #active-tasks-panel {
    left: calc(var(--screen-safe-left) + var(--button-panel-button-size) + 8px);
    right: calc(var(--screen-safe-right) + var(--button-panel-button-size) + 8px);
    width: auto;
    max-height: calc(100dvh - var(--screen-safe-top) - var(--button-panel-button-size) - 20px);
    padding: 10px;
  }

  #active-tasks-title {
    font-size: 22px;
  }
}

.active-tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

#active-tasks-title {
  font-family: var(--font-handwriting);
  font-size: 28px;
  line-height: 1;
}

#active-tasks-close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 12px;
  background: rgb(163, 58, 50);
  color: rgb(255, 255, 255);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

#active-tasks-list {
  display: grid;
  gap: 8px;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#active-tasks-list li {
  display: block;
  padding: 0px;
}

.active-tasks-copy {
  min-width: 0px;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.2;
}

.active-tasks-copy strong, .active-tasks-copy small {
  display: block;
}

.active-tasks-copy strong {
  font-weight: 800;
}

.active-tasks-copy small {
  margin-top: 3px;
  color: rgb(111, 85, 65);
}

.active-tasks-row-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0px;
  border-radius: inherit;
  background: transparent;
  color: var(--ui-ink);
  text-align: left;
  cursor: pointer;
}

.active-tasks-row-button:hover {
  background: rgb(248, 223, 173);
}

.active-tasks-arrow {
  font-family: var(--font-handwriting);
  font-size: 29px;
}

#active-tasks-panel button:focus-visible, #btn-active-tasks:focus-visible {
  outline: 3px solid var(--ui-sunflower);
  outline-offset: 2px;
}

.context-help-trigger {
  flex: 0 0 36px;
  width: 36px;
  height: 40px;
  border: 2px solid var(--ui-ink);
  border-radius: 5px 8px 5px 6px;
  background: rgb(255, 217, 90);
  box-shadow: 2px 3px 0 var(--ui-ink);
  color: var(--ui-ink);
  font-family: var(--font-handwriting);
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  transform: rotate(-4deg);
}

.context-help-trigger:focus-visible {
  outline: 3px solid var(--ui-sunflower);
  outline-offset: 2px;
}

@keyframes help-remember { 
  0%, 100% { transform: rotate(-4deg); }
  20%, 50%, 80% { transform: rotate(7deg); }
  35%, 65%, 95% { transform: rotate(-7deg); }
}

.context-help-trigger--remember {
  animation: 1.1s ease-in-out 0s 1 normal none running help-remember;
}

@media (prefers-reduced-motion: reduce) {
  .context-help-trigger--remember {
    animation: auto ease 0s 1 normal none running none;
  }
}

.context-help[hidden] {
  display: none;
}

.context-help {
  position: fixed;
  inset: 0px;
  display: grid;
  place-items: center;
  padding: 20px;
}

.context-help__backdrop {
  position: absolute;
  inset: 0px;
  background: rgba(58, 42, 31, 0.21);
}

.context-help__paper {
  position: relative;
  width: min(420px, 100%);
  min-height: 220px;
  padding: 24px 115px 24px 24px;
}

.context-help__paper::before, .context-help__paper::after {
  position: absolute;
  top: -10px;
  width: 42px;
  height: 18px;
  background: rgba(248, 223, 173, 0.733);
  content: "";
  transform: rotate(-7deg);
}

.context-help__paper::before {
  left: 18px;
}

.context-help__paper::after {
  right: 28px;
  transform: rotate(6deg);
}

.context-help__paper h2 {
  margin: 0px 0px 10px;
  font: 30px var(--font-handwriting);
}

.context-help__paper p {
  margin: 0px 0px 18px;
  line-height: 1.35;
}

.context-help__paper button {
  min-height: 44px;
  padding: 5px 15px;
  border: 2px solid var(--ui-ink);
  border-radius: 9px;
  background: var(--ui-primary);
  box-shadow: 2px 3px 0 var(--ui-ink);
  color: rgb(255, 255, 255);
  font: 22px var(--font-handwriting);
  cursor: pointer;
}

.context-help__paper button:focus-visible {
  outline: 3px solid var(--ui-sunflower);
  outline-offset: 2px;
}

.context-help__grga {
  position: absolute;
  right: 4px;
  bottom: 8px;
  width: 118px;
  max-height: 175px;
  object-fit: contain;
}

@media (max-width: 360px) {
  .context-help__paper {
    padding-right: 85px;
  }

  .context-help__grga {
    width: 88px;
  }
}

#unity-ui {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-height: calc(100dvh - var(--screen-safe-top) - var(--screen-safe-bottom));
  user-select: none;
}

#unity-minimap-focus-ui {
  position: absolute;
  inset: 0;
  height: 0;
  transition: opacity 0.22s ease-out;
  user-select: none;
  pointer-events: none;
  z-index: var(--ui-layer-control-buttons);
}

#unity-minimap-focus-ui .unity-ui-buttons {
  position: absolute;
  top: calc(9.4dvh - 1px);
  right: max(var(--screen-safe-right), calc(4.2dvh - 25px));
  width: 50px;
  margin: 0;
  pointer-events: auto;
}
#unity-minimap-focus-ui .btn-ui { width: 50px; height: 50px; }
#unity-minimap-region-title {
  position: absolute;
  top: calc(var(--screen-safe-top) + 8px);
  left: calc(var(--screen-safe-left) + 10px);
  right: calc(var(--screen-safe-right) + 90px);
  width: fit-content;
  max-width: calc(100% - var(--screen-safe-left) - var(--screen-safe-right) - 100px);
  margin: 0;
  padding: 4px 12px 5px;
  border: 2px solid var(--ui-ink);
  border-radius: 7px;
  background: var(--ui-paper);
  box-shadow: 3px 4px 0 rgba(58, 42, 31, 0.32);
  color: var(--ui-ink);
  font: clamp(27px, 5.8vw, 40px) / 1 var(--font-handwriting);
  text-align: left;
  text-transform: uppercase;
}

#unity-left-ui {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--button-panel-gap);
  z-index: var(--ui-layer-control-buttons);
}

#unity-left-ui.hidden {
  display: none;
}

#left-map-controls {
  flex-direction: column;
  gap: var(--button-panel-gap);
}

.unity-ui-buttons {
  width: 100%;
  gap: var(--button-panel-gap);
}

#unity-ui.hidden {
  display: none;
}

#unity-minimap-focus-ui.hidden {
  opacity: 0;
  pointer-events: none;
}

#unity-ui img:visited {
  background-color: rgba(255, 255, 255, 0.5);
}

#unity-ui .active {
  background-color: transparent;
  box-shadow: 0 0 0 2px rgba(var(--color-accent), 0.65);
  border-radius: 50%;
}

#qr-scanner-overlay {
  position: absolute;
  inset: 0px;
  z-index: calc(var(--ui-layer-control-buttons) + 2);
  background: var(--nb-cover-deep);
}

#qr-scanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgb(0, 0, 0);
}

.qr-scanner-toolbar {
  position: absolute;
  inset: var(--screen-safe-top) var(--screen-safe-right) var(--screen-safe-bottom)
    var(--screen-safe-left);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  pointer-events: none;
}

.qr-scanner-close, .qr-scanner-status {
  pointer-events: auto;
}

.qr-scanner-close {
  align-self: flex-end;
  min-width: 96px;
  padding: 12px 16px;
  border: 2px solid var(--nb-ink);
  border-radius: 8px;
  background: var(--nb-paper);
  color: var(--nb-ink);
  box-shadow: 3px 4px 0 var(--nb-ink);
  font: inherit;
}

.qr-scanner-status {
  align-self: center;
  max-width: min(480px, 100% - 24px);
  padding: 12px 16px;
  border: 2px solid var(--nb-paper-edge);
  border-radius: 8px;
  background: var(--nb-paper);
  color: var(--nb-ink);
  box-shadow: 4px 5px 0 var(--nb-cover-deep);
  text-align: center;
}

.qr-scanner-debug {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.qr-scanner-debug-output {
  display: none;
  width: min(480px, -32px + 100vw);
  min-height: 96px;
  padding: 12px 16px;
  border: 0px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.75);
  color: rgb(255, 255, 255);
  font: inherit;
  resize: vertical;
}

.o-100 {
  opacity: 1 !important;
}

.btn-ui {
  width: var(--button-panel-button-size);
  height: var(--button-panel-button-size);
  flex: 0 0 auto;
  padding: 0px;
  appearance: none;
  background: transparent;
  cursor: var(--cursor-pointer);
  border-radius: 50%;
  overflow: hidden;
}

.btn-ui > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  background-color: transparent !important;
}

#btn-recenter.geo-disabled, #btn-recenter-minimap.geo-disabled {
  opacity: 0.9;
  filter: saturate(0.8);
}

#btn-close {
  position: absolute;
  top: -36px;
  right: 20px;
  width: 46px;
  cursor: var(--cursor-pointer);
  box-shadow: rgba(0, 0, 0, 0.1) -2px -2px 2px inset;
  transition: transform 0.125s linear;
  z-index: -7;
}

#content-header {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  width: 100%;
}

#content-title {
  font-size: 22px;
  font-weight: 600;
  text-align: left;
  color: black;
  margin-bottom: 8px;
  text-wrap: wrap;
  overflow-wrap: break-word;
}

.container-rot {
  position: absolute;
  top: var(--outer-padding);
  left: var(--outer-padding);
  width: calc(100% - 2 * var(--outer-padding));
  height: calc(100% - 2 * var(--outer-padding));
  border-radius: 18px;
  background-image: url("../img/ui/paper-texture.png");
  box-shadow: rgb(0, 0, 0) 0px 0px 4px;
  z-index: -4;
}

.cw {
  transform: rotate(1deg);
  z-index: -5;
}

.ccw {
  transform: rotate(-1deg);
  z-index: -10;
}

#mark-qr {
  position: absolute;
  left: 42px;
  top: -32px;
  transform: rotateZ(-184deg);
  width: 120px;
  height: auto;
  z-index: -7;
  transition: 0.125s linear;
}

#mark-qr.active {
  transform: rotateZ(0deg);
  top: -120px;
}

.mark-qr-bg {
  width: 100%;
}

.qr-inner {
  width: 100%;
  height: 100%;
  padding: 16px;
  gap: 4px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  mix-blend-mode: multiply;
}

#mark-qr-img {
  width: 100%;
}

#mark-qr-label {
  font-size: 12px;
  font-weight: bold;
  color: black;
}

#mark-pull {
  position: absolute;
  right: 70px;
  top: -32px;
  transform: rotateZ(184deg);
  z-index: -7;
  box-shadow: rgba(0, 0, 0, 0.333) 0px -4px 4px;
  cursor: var(--cursor-pointer);
  transition: 0.125s linear;
}

#mark-pull:hover {
  top: -40px;
  transform: rotateZ(180deg);
  filter: brightness(1.1);
}

#mark-pull.active {
  filter: brightness(1.3);
}

#mark-pull-icon {
  position: absolute;
  left: calc(50% + 2px);
  top: calc(50% + 2px);
  transform: translate(-50%, -50%);
  width: 90%;
  opacity: 0.3;
}

.container-inner {
  display: flex;
  padding: 16px;
  gap: 12px;
  border-radius: 18px;
  flex-grow: 1;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.content-container {
  --outer-padding: 10px;
  position: absolute;
  display: flex;
  bottom: -150%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: fit-content;
  max-height: 50%;
  padding: var(--outer-padding);
  border-radius: 18px;
  text-align: left;
  background-image: var(--bg-booklet);
  color: var(--text-maroon);
  opacity: 0;
  transition: 0.5s;
  z-index: 10;
}

.max {
  max-height: 90% !important;
}

.blue-content-box {
  --box-height: 90%;
  --box-min-height: 65%;
  --box-bottom-min-height: 50%;
  --box-show-top: 10dvh;
  --panel-default-height: min(var(--box-height), 90dvh);
  --panel-default-top: auto;
  --panel-default-bottom: 2dvh;
  --panel-default-left: 50%;
  --panel-default-right: auto;
  --panel-default-transform: translateX(-50%);
  --box-cta-offset: clamp(36px, 6dvh, 52px);
  --panel-radius: 30px;
  --panel-gap: 14px;
  --panel-bottom-offset: 18px;
  --panel-safe-top: 18px;
  --panel-safe-left: 22px;
  --panel-safe-right: 22px;
  --panel-safe-bottom: 18px;
  --box-pin-left: calc(var(--panel-safe-left) + var(--panel-gap));
  --box-pin-top: calc(var(--panel-safe-top) + 18px);
  --box-content-top: calc(var(--panel-safe-top) + 62px);
  position: absolute;
  display: flex;
  top: -150%;
  left: 50%;
  transform: var(--panel-default-transform);
  width: 90%;
  height: var(--panel-default-height);
  max-height: 90dvh;
  text-align: left;
  color: var(--text-blue);
  opacity: 0;
  transition: 0.5s;
  z-index: 10;
  flex-flow: column;
  place-content: center flex-end;
  align-items: center;
  overflow: visible;
  isolation: isolate;
}

.blue-content-box:not(.show) {
  pointer-events: none !important;
}

.blue-content-box::before, .blue-content-box::after {
  content: "";
  position: absolute;
  left: var(--panel-safe-left);
  right: var(--panel-safe-right);
  border-radius: var(--panel-radius);
  pointer-events: none;
}

.blue-content-box::before {
  top: var(--panel-safe-top);
  bottom: var(--panel-safe-bottom);
  background: var(--panel-outer-color);
  z-index: 0;
}

.blue-content-box::after {
  top: var(--panel-safe-top);
  bottom: calc(var(--panel-safe-bottom) + var(--panel-bottom-offset));
  background: var(--panel-mid-color);
  z-index: 1;
}

.blue-content-box-header {
  position: absolute;
  top: 0px;
  left: var(--panel-safe-left);
  right: var(--panel-safe-right);
  height: 32px;
  z-index: 3;
}

.blue-content-box-title {
  background-image: url("../img/ui/Blue-Title-Bg.png");
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: min(84.5%, 100% - 52px);
  position: absolute;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 0px 24px 4px;
  font-weight: 700;
  font-family: var(--font-ui);
}

.panel-title-text {
  display: block;
  flex: 1 1 auto;
  min-width: 0px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.05;
}

.panel-title-drag {
  display: none;
  border: 0px;
  background: transparent;
  padding: 0px;
  width: clamp(30px, 6.7vw, 44px);
  height: clamp(30px, 6.7vw, 44px);
  flex: 0 0 clamp(30px, 6.7vw, 44px);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.panel-title-drag img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.blue-content-box.box-floating::before {
  background: none;
  border-radius: 0px;
  border-width: 53px;
  border-style: solid;
  border-color: transparent;
  border-image: url("../img/newui/infobox/NOVA-PODLOGA-INFOBOX.png") 100 fill / 53px / 0 stretch;
  box-shadow: inset 0 -3px 0 rgba(var(--ui-primary-rgb), 0.75);
}

.blue-content-box.box-floating::after {
  display: none;
}

.blue-content-box.box-floating .blue-content-box-title {
  --welcome-title-cap-width: clamp(36px, 6.5vw, 52px);
  --welcome-title-min-center: 94px;
  font-weight: 700;
  top: calc(var(--panel-safe-top) + 11px);
  left: var(--panel-safe-left);
  right: auto;
  transform: translateY(-50%);
  width: fit-content;
  min-width: min(
    calc(var(--welcome-title-min-center) + (2 * var(--welcome-title-cap-width))),
    calc(100% - var(--panel-safe-left) - var(--panel-safe-right) - var(--welcome-controls-clearance))
  );
  max-width: calc(
    100% - var(--panel-safe-left) - var(--panel-safe-right) - var(--welcome-controls-clearance)
  );
  justify-content: flex-start;
  text-align: left;
  align-items: center;
  height: auto;
  min-height: clamp(34px, 5dvh, 40px);
  padding: 0px 50px 2px 18px;
  cursor: default;
  border: 0px;
  background: transparent;
  position: absolute;
  overflow: visible;
}

.blue-content-box.box-floating .panel-title-bg {
  position: absolute;
  top: 0px;
  bottom: 0px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 0;
}

.blue-content-box.box-floating .panel-title-bg-left {
  left: 0px;
  width: calc(var(--welcome-title-cap-width) + 1px);
  background-image: url("../img/newui/infobox/TITLE-SLIM-left.png");
}

.blue-content-box.box-floating .panel-title-bg-center {
  left: calc(var(--welcome-title-cap-width) - 1px);
  right: calc(var(--welcome-title-cap-width) - 1px);
  background-image: url("../img/newui/infobox/TITLE-SLIM-center.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.blue-content-box.box-floating .panel-title-bg-right {
  right: 0px;
  width: calc(var(--welcome-title-cap-width) + 1px);
  background-image: url("../img/newui/infobox/TITLE-SLIM-right.png");
}

.blue-content-box.box-floating .panel-title-text {
  text-align: left;
  position: relative;
  z-index: 1;
  font-weight: 700;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.08;
  max-height: calc(2.16em);
}

.blue-content-box.box-floating .panel-title-drag {
  display: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--welcome-drag-size);
  height: var(--welcome-drag-size);
  flex: 0 0 var(--welcome-drag-size);
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.blue-content-box.box-floating[data-panel-draggable="true"] .blue-content-box-title {
  cursor: grab;
}

.blue-content-box.box-floating[data-panel-draggable="true"] .panel-title-drag {
  display: inline-flex;
}

.blue-content-box.box-floating .panel-title-drag img {
  width: 100%;
  height: 100%;
}

.blue-content-box.box-floating .panel-title-drag:active {
  cursor: grabbing;
}

.blue-content-box.box-floating.box-dragging, .blue-content-box.box-floating.box-dragging * {
  cursor: grabbing !important;
}

.blue-content-box.box-floating.box-dragging {
  transition: none !important;
}

.blue-content-box.box-floating.box-dragged {
  transform: none !important;
}

.blue-content-box.box-floating.box-reflowing {
  transition: height 0.26s;
}

.blue-content-box.box-floating.box-spawning, .blue-content-box.box-floating.box-exit-down {
  pointer-events: none;
}

.blue-content-box.box-floating.box-spawning {
  transition: none !important;
}

.blue-content-box.box-floating.box-exit-down {
  transition: none !important;
}

.blue-content-box.box-floating .blue-content-box-inner {
  background: transparent;
  top: calc(var(--panel-safe-top) + 72px);
  right: calc(var(--panel-safe-right) + 18px);
  left: calc(var(--panel-safe-left) + 18px);
  padding: 0 var(--infobox-content-inline-padding) 10px;
  box-sizing: border-box;
  transition: opacity 0.25s;
  scrollbar-color: var(--ui-primary-active) transparent;
}

.blue-content-box.box-floating .blue-box-location-pin {
  top: calc(var(--panel-safe-top) + 40px);
  left: calc(var(--panel-safe-left) + 28px);
}

.blue-content-box.box-floating .content-list {
  gap: 0px;
}

.blue-content-box.box-floating .content-list > .content-item:first-child {
  margin-top: 0px !important;
}

.blue-content-box.box-floating .content-image, .blue-content-box.box-floating .gallery-img, .blue-content-box.box-floating .image-block, .blue-content-box.box-floating .text-block {
  margin-top: 0px;
}

.blue-content-box.box-floating .content-text, .blue-content-box.box-floating .text-block {
  box-sizing: border-box;
  width: calc(100% - 16px) !important;
  max-width: calc(100% - 16px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.blue-content-box.box-floating .content-text figure, .blue-content-box.box-floating .content-text .wp-block-image, .blue-content-box.box-floating .content-text .wp-caption, .blue-content-box.box-floating .content-text [class*="wp-block-image"], .blue-content-box.box-floating .content-text [class*="wp-caption"] {
  display: contents !important;
  margin: 0px !important;
  padding: 0px !important;
  border: 0px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.blue-content-box.box-floating .content-text figcaption {
  display: none !important;
}

.blue-content-box.box-floating .content-text img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 12px auto;
}

.blue-content-box.box-floating .content-text p + img, .blue-content-box.box-floating .content-text img + p, .blue-content-box.box-floating .content-text figure + p, .blue-content-box.box-floating .content-text p + figure, .blue-content-box.box-floating .content-text .wp-block-image + p, .blue-content-box.box-floating .content-text p + .wp-block-image {
  margin-top: 16px;
}

.blue-content-box.box-floating .content-image, .blue-content-box.box-floating .gallery-img {
  width: calc(100% - 16px);
  max-width: calc(100% - 16px);
  height: auto;
  min-height: 0px;
  max-height: none;
  box-sizing: border-box;
  overflow: visible;
  border-radius: 0px;
  background: transparent;
  margin-left: auto;
  margin-right: auto;
}

.blue-content-box.box-floating .content-image .bg, .blue-content-box.box-floating .gallery-img .bg {
  display: none;
}

.blue-content-box.box-floating .content-image .front, .blue-content-box.box-floating .gallery-img .front {
  width: 100%;
  height: auto;
  object-fit: contain;
  box-shadow: none;
  border-radius: 0px;
}

.blue-content-box.box-floating .content-gallery-wrapper, .blue-content-box.box-floating .content-gallery, .blue-content-box.box-floating .gallery-img {
  height: auto;
  min-height: 0px;
  max-height: none;
}

.blue-content-box.box-floating .content-gallery-wrapper {
  width: calc(100% - 16px);
  max-width: calc(100% - 16px);
  margin-left: auto;
  margin-right: auto;
}

.panel-controls {
  display: none;
  position: absolute;
  right: var(--panel-safe-right);
  top: calc(var(--panel-safe-top) + 11px);
  transform: translateY(-50%);
  z-index: 5;
  align-items: center;
  gap: 0px;
}

.blue-content-box.box-floating .panel-controls {
  display: flex;
}

.blue-content-box.box-floating .blue-content-box-closeBtn {
  display: none;
}

.panel-btn {
  border: 0px;
  background: transparent;
  padding: 0px;
  width: clamp(44px, 10vw, 52px);
  height: clamp(44px, 10vw, 52px);
  cursor: var(--cursor-pointer);
  transition: transform 0.2s;
}

.panel-btn + .panel-btn {
  margin-left: -6px;
}

.panel-btn:hover {
  transform: scale(1.06);
}

.panel-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.blue-content-box.box-floating {
  --welcome-controls-clearance: clamp(200px, 40vw, 250px);
  --welcome-drag-size: calc(clamp(40px, 9vw, 58px) * 0.4);
  --infobox-content-inline-padding: clamp(16px, 4.6vw, 26px);
  width: 94.5%;
  transition: height 0.26s, opacity 0.2s;
}

.blue-content-box.box-floating.box-locations-mode {
  width: min(96%, 520px);
}

.blue-content-box.box-floating.show:not(.from-bottom):not(.box-half):not(.box-minimized):not(.box-dragged) {
  top: var(--panel-default-top) !important;
  bottom: var(--panel-default-bottom) !important;
}

.blue-content-box.box-floating.box-minimized {
  height: clamp(56px, 8.5dvh, 72px) !important;
  bottom: 2dvh !important;
}

.blue-content-box.box-floating:not(.box-dragged) {
  top: var(--panel-default-top) !important;
  left: var(--panel-default-left) !important;
  right: var(--panel-default-right) !important;
  bottom: var(--panel-default-bottom) !important;
}

.blue-content-box.box-floating.show:not(.box-dragged) {
  transform: var(--panel-default-transform) !important;
}

.blue-content-box.box-floating.box-dragged {
  bottom: auto !important;
}

.blue-content-box.box-floating.box-minimized::before {
  display: none;
}

.blue-content-box.box-floating.box-minimized .blue-content-box-header {
  left: var(--panel-safe-left);
  right: var(--panel-safe-right);
  height: 62px;
  display: block;
  top: 0px !important;
  transform: none !important;
}

.blue-content-box.box-floating.box-minimized .blue-content-box-title {
  top: calc(var(--panel-safe-top) + 11px);
  left: var(--panel-safe-left);
  right: auto;
  transform: translateY(-50%);
  width: fit-content;
  max-width: calc(
    100% - var(--panel-safe-left) - var(--panel-safe-right) - var(--welcome-controls-clearance)
  );
  padding: 0px 50px 2px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  position: absolute;
}

.blue-content-box.box-floating.box-minimized .panel-title-bg {
  display: block;
}

.blue-content-box.box-floating.box-minimized .panel-title-drag {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (max-width: 1024px) {
  .blue-content-box.box-floating .blue-content-box-title {
    cursor: default;
  }

  .blue-content-box.box-floating .panel-title-drag {
    pointer-events: none;
    display: none !important;
  }
}

.blue-content-box.box-floating.box-minimized .panel-controls {
  position: absolute;
  right: var(--panel-safe-right);
  top: calc(var(--panel-safe-top) + 11px);
  transform: translateY(-50%);
  margin-left: 0px;
}

.blue-content-box.box-floating.box-minimized .blue-content-box-inner, .blue-content-box.box-floating.box-minimized .blue-box-location-pin {
  opacity: 0;
  pointer-events: none;
}

.blue-content-box.box-floating .blue-content-box-inner::-webkit-scrollbar {
  width: 8px;
}

.blue-content-box.box-floating .blue-content-box-inner::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
  display: none;
}

.blue-content-box.box-floating .blue-content-box-inner::-webkit-scrollbar-track {
  background: transparent;
}

.blue-content-box.box-floating .blue-content-box-inner::-webkit-scrollbar-thumb {
  background: var(--ui-primary-active);
  border-radius: 10px;
  border: 1px solid var(--ui-primary-active);
}

.blue-content-box.box-floating .blue-content-box-inner::-webkit-scrollbar-thumb:hover {
  background: var(--ui-panel-mid);
}

.blue-content-box-closeBtn {
  position: absolute;
  top: 0px;
  right: 0px;
  width: clamp(34px, 10%, 44px);
  object-fit: contain;
  cursor: var(--cursor-pointer);
}

.blue-content-box-inner {
  position: absolute;
  top: var(--box-content-top);
  right: calc(var(--panel-safe-right) + var(--panel-gap));
  bottom: calc(
    var(--panel-safe-bottom) + var(--panel-gap) + var(--panel-bottom-offset)
  );
  left: calc(var(--panel-safe-left) + var(--panel-gap));
  font-size: larger;
  font-family: cursive;
  text-align: left;
  padding: 10px 0px;
  border-radius: calc(var(--panel-radius) - var(--panel-gap));
  background: transparent;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  color: var(--text-blue);
  scrollbar-width: thin;
  z-index: 2;
}

.blue-content-box-inner img {
  max-width: 100%;
  height: auto;
  margin: 0px auto;
  display: block;
}

.blue-content-box.min {
  height: min(var(--box-min-height), 90dvh) !important;
}

.blue-content-box.show:not(.from-bottom) {
  top: var(--box-show-top);
  opacity: 1;
}

.blue-content-box.from-bottom {
  bottom: -100%;
  top: auto !important;
}

.blue-content-box.from-bottom.show {
  bottom: 0px;
  opacity: 1;
}

.blue-content-box.from-bottom.min {
  --box-pin-top: calc(var(--panel-safe-top) + 10px);
  --box-content-top: calc(var(--panel-safe-top) + 52px);
  height: min(var(--box-bottom-min-height), 90dvh) !important;
}

.blue-content-box.from-bottom.min .blue-box-location-pin {
  top: var(--box-pin-top);
}

.blue-content-box.from-bottom.min .blue-content-box-inner {
  top: var(--box-content-top);
}

#blue-box-location-text {
  color: var(--text-blue);
  text-decoration: none;
}

#blue-box-location-text:hover {
  text-decoration: underline;
}

.start-game-btn {
  --location-cta-top-offset: 30px;
  --start-game-btn-aspect-ratio: 641 / 147;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: var(--cursor-pointer);
  text-align: center;
  color: var(--text-blue);
  text-shadow: rgb(255, 255, 255) 2px 2px 4px;
  background-image: url("../img/newui/yellowBtn.png");
  transition: 0.5s;
  user-select: none;
  aspect-ratio: var(--start-game-btn-aspect-ratio);
  box-sizing: border-box;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0px clamp(6px, 1.5vw, 14px);
  font-family: sans-serif;
  width: clamp(200px, 25vw, 360px) !important;
}

.blue-content-box.box-floating > .start-game-btn {
  position: absolute;
  left: 50%;
  aspect-ratio: var(--start-game-btn-aspect-ratio);
  bottom: calc(100% + var(--location-cta-top-offset));
  transform: translate(-50%, -14px);
  opacity: 0;
  pointer-events: none;
  z-index: 120;
  width: clamp(200px, 25vw, 360px) !important;
}

.blue-content-box.box-floating > .start-game-btn.active {
  opacity: 1;
  transform: translate(-50%, 0px);
  pointer-events: auto;
}

.btn {
  font-weight: bold;
  align-content: center;
  cursor: var(--cursor-pointer);
  text-align: center;
  border: 4px solid white;
  color: var(--button-text-color);
  background-color: var(--color-bg);
  border-radius: 13px;
  padding: 8px 24px;
  transition: 0.125s linear;
  transform: translateY(0px);
  box-shadow: var(--btn-box-shadow),
    inset 0 0 0 2px #0004;
  user-select: none;
}

.btn:active {
  transform: translateY(0px);
  box-shadow: var(--btn-box-shadow),
    inset 0 0 0 2px #0004;
  background-color: var(--color-bg-highlight);
}

#btn-explore {
  width: 128px;
  margin: 12px auto;
}

.content-container.show {
  bottom: 5dvw;
  opacity: 1;
  box-shadow: rgba(0, 0, 0, 0.2) 5px 14px 15px;
}

#version {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(60vw, 260px);
  height: var(--loading-version-height);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  user-select: none;
}

.notification {
  --notification-outer-color: var(--panel-outer-color);
  --notification-mid-color: var(--panel-mid-color);
  --notification-inner-color: var(--panel-inner-color);
  position: absolute;
  z-index: 10000000;
  left: 50%;
  transform: translate(-50%, 0px);
  width: min(420px, -32px + 100vw);
  max-width: calc(-32px + 100vw);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  user-select: none;
  transition: opacity 0.3s, transform 0.3s;
}

.notification > .icon {
  border-radius: 50%;
  vertical-align: middle;
  text-align: center;
  display: grid;
  align-items: center;
  flex: 0 0 32px;
}

.notification.hidden {
  opacity: 0;
  pointer-events: none;
}

#notification-text {
  flex: 1 1 auto;
  min-width: 0px;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.inventory-unlock-notification {
  --inventory-unlock-offset: calc(
    var(--inventory-score-panel-top) + var(--inventory-hud-score-button-height) + var(--inventory-hud-unlock-gap)
  );
  font-family: var(--font-ui);
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: calc(var(--ui-layer-popup) + 4);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s;
}

.inventory-unlock-notification.is-visible {
  opacity: 1;
}

.inventory-unlock-notification-card, .message-panel-shell {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 14px 16px;
  border-radius: 24px;
  background: var(--panel-inner-color);
  border: 2px solid var(--panel-outer-color);
  box-shadow: 0 14px 28px rgba(var(--ui-panel-deep-rgb), 0.35),
    inset 0 0 0 3px var(--panel-mid-color);
}

.inventory-unlock-notification-thumb {
  width: clamp(64px, 18vw, 84px);
  height: clamp(64px, 18vw, 84px);
  flex: 0 0 clamp(64px, 18vw, 84px);
  border-radius: 18px;
  background: var(--panel-mid-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.inventory-unlock-notification-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inventory-unlock-notification-body {
  min-width: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.message-panel-body {
  min-width: 0px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.inventory-unlock-notification-kind {
  word-break: break-word;
}

.inventory-unlock-notification-title, .message-panel-text {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--panel-outer-color);
  word-break: break-word;
}

.message-panel-text {
  margin: 0px;
}

.message-panel-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.message-panel-content--plain, .message-panel-content--distance, .message-panel-content--meta {
  justify-content: center;
}

.message-panel-text--plain, .message-panel-text--distance, .message-panel-text--meta-title, .message-panel-text--meta-detail {
  width: 100%;
}

.message-panel-text--meta-title {
  font-weight: 800;
}

.message-panel-text--meta-detail {
  font-size: clamp(0.92rem, 2.45vw, 1rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--text-blue);
}

.inventory-unlock-notification-subtitle {
  font-family: var(--font-ui);
  font-size: clamp(0.88rem, 2.4vw, 1rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-blue);
  word-break: break-word;
}

.inventory-unlock-notification-detail {
  font-family: var(--font-ui);
  font-size: clamp(0.88rem, 2.4vw, 1rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--panel-outer-color);
  word-break: break-word;
}

.inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-card {
  position: relative;
  padding-right: 72px;
  border: 1px solid rgb(204, 197, 183);
  border-radius: 6px 15px 8px 13px;
  color: var(--ui-ink);
  background: rgb(242, 243, 236);
  box-shadow: rgb(231, 227, 215) 3px 5px 0px, rgba(58, 42, 31, 0.22) 0px 12px 22px;
  transform: rotate(-1deg);
}

.inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-card::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  pointer-events: none;
}

.inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-thumb {
  border: 3px solid rgb(255, 255, 255);
  border-radius: 4px;
  background: rgb(255, 255, 255);
  box-shadow: rgba(58, 42, 31, 0.2) 1px 3px 7px;
  transform: rotate(3deg);
}

.inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-kind {
  font-family: var(--font-handwriting);
  color: rgb(47, 107, 69);
  font-size: clamp(1.1rem, 3vw, 1.45rem);
}

.inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-title, .inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-detail {
  color: var(--ui-ink);
}

.inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-subtitle:not(.hidden) {
  position: absolute;
  top: -11px;
  right: 8px;
  max-width: 100px;
  padding: 3px 8px;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 999px;
  color: rgb(255, 255, 255);
  background: rgb(47, 107, 69);
  box-shadow: rgba(58, 42, 31, 0.25) 1px 2px 4px;
  font-family: var(--font-handwriting);
  font-size: 1rem;
  text-align: center;
  transform: rotate(5deg);
}

#game-ui {
  --outer-padding: 12px;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  user-select: none;
  z-index: var(--ui-layer-scene-overlay);
}

#game-ui .container-inner {
  justify-content: flex-start;
  overflow-y: auto;
}

#game-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-image: var(--bg-booklet);
  color: var(--text-maroon);
  border-radius: 18px;
  padding: var(--outer-padding);
  gap: var(--outer-padding);
  max-width: 344px;
  max-height: 90%;
  z-index: 0;
}

#game-menu, #game-hud {
  pointer-events: auto;
}

#game-menu-box #menu-canvas {
  position: absolute;
  width: 100%;
  z-index: -1;
}

#game-title {
  font-size: 32px;
  font-weight: 600;
  color: black;
}

#game-rules {
  text-align: left;
  font-size: 18px;
}

#btn-back {
  background-color: var(--color-bg-mute);
}

#btn-cancel-game {
  position: absolute;
  bottom: 12px;
  left: 50%;
  background-color: var(--color-bg-red);
  transform: translate(-50%);
}

#btn-cancel-game:active {
  transform: translate(-50%);
  background-color: var(--color-bg-red-highlight);
}

#game-score, #game-timer {
  width: fit-content;
  display: flex;
}

#game-score-text, #game-timer-text {
  font-weight: bold;
  font-size: large;
}

#game-score {
  position: absolute;
  left: 0px;
  top: 12px;
  transform: translate(0px, 0px);
  transition: 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}

#game-score.center {
  top: 50%;
  left: 50%;
  font-size: 80px;
  transform: translate(-50%, -50%);
}

#score-bookmark {
  position: absolute;
  left: 100%;
  height: 100%;
}

#game-score-text {
  background-color: var(--color-bg-game-score);
  padding: var(--outer-padding) calc(var(--outer-padding) * 2);
  padding-right: 0px;
  color: var(--ui-text-on-light);
}

#game-timer {
  position: absolute;
  right: 0px;
  top: 12px;
}

#game-timer-text {
  color: black;
  background-color: var(--color-bg-yellow);
  padding: var(--outer-padding) calc(var(--outer-padding) * 2);
  padding-left: 0px;
}

#timer-bookmark {
  position: absolute;
  right: 100%;
  height: 100%;
}

#hi-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#hi-score-sticker {
  transform: rotateZ(-1deg);
  margin: var(--outer-padding) 0;
  width: 80%;
  cursor: var(--cursor-arrow);
}

#hi-score-text {
  font-weight: bold;
}

.btn.disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.55;
  filter: grayscale(25%);
}

.btn.disabled:hover {
  transform: none;
  box-shadow: var(--btn-box-shadow);
}

#game-mark {
  position: absolute;
  left: 50px;
  bottom: -16px;
  transform: rotateZ(4deg);
  z-index: -7;
  box-shadow: rgba(0, 0, 0, 0.333) 0px -4px 4px;
}

.d-flex {
  display: flex !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.align-center {
  align-items: center;
}

.gap-1 {
  gap: 12px !important;
}

@media only screen and (orientation: landscape) and (max-width: 1024px) {
  .content-container {
    top: 50%;
    left: -100%;
    transform: translateY(-50%);
    width: 40%;
    max-height: 80%;
  }

  .content-container.show {
    left: 5dvh;
  }

  .content-container.max {
    max-height: 80%;
    width: 65%;
  }

  #content-title {
    font-size: 15px;
  }

  .content-text {
    font-size: 13px;
    line-height: 1.5;
  }

  #mark-qr.active {
    transform: rotateZ(0deg);
    top: 0px;
    left: calc(100% + 48px);
    box-shadow: var(--btn-box-shadow);
  }

  #btn-close {
    transform: rotateZ(81deg);
    top: 12px;
    right: -32px;
  }

  #mark-pull, #mark-pull:hover {
    right: -32px;
    top: 64px;
    transform: rotateZ(-100deg);
  }
}

.character-wrapper {
  position: absolute;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  z-index: var(--ui-layer-popup);
}

.character-wrapper.hidden {
  display: none;
}

.character {
  width: 100%;
  object-fit: contain;
}

.speech-bubble-container {
  position: absolute;
  bottom: 18%;
  left: 50%;
  right: auto;
  width: auto;
  max-width: min(90vw, 560px);
  opacity: 0;
  transform: translateX(-50%) scale(0.5) translateY(20px);
  transform-origin: center bottom;
  pointer-events: auto;
  filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 5px 15px);
  z-index: calc(var(--ui-layer-popup) + 1);
}

@media (max-width: 600px) {
  .speech-bubble-container {
    bottom: 28%;
  }
}

.speech-bubble-container.hidden {
  display: none;
}

.speech-bubble-container.show-bubble {
  animation: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s 1 normal forwards running popIn;
}

.speech-box-wrapper {
  position: relative;
  width: auto;
  max-width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.speech-box {
  position: relative;
  background: repeating-linear-gradient(0deg, transparent 0 25px, rgba(47, 107, 69, 0.055) 25px 26px),
    var(--ui-paper);
  border: 4px solid var(--ui-panel-deep);
  border-radius: 14px;
  z-index: 31;
  width: fit-content;
  height: auto;
  min-height: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 0px 2px inset, rgba(58, 42, 31, 0.333) 0px 5px 0px, rgba(58, 42, 31, 0.267) 0px 10px 22px;
  word-break: break-word;
  max-width: min(82vw, 500px);
  padding: 12px 20px;
  flex-shrink: 0;
}

.speech-box::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -15px;
  width: 0px;
  height: 0px;
  transform: translateX(-50%);
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 15px solid var(--ui-panel-deep);
  filter: drop-shadow(rgba(0, 0, 0, 0.15) 0px 2px 2px);
}

.speech-box::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 0px;
  height: 0px;
  transform: translateX(-50%);
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 13px solid var(--ui-paper);
  z-index: 1;
}

.speech-content {
  position: static;
  transform: none;
  width: fit-content;
  max-width: min(72vw, 430px);
  height: auto;
  display: block;
  text-align: center;
  font-size: clamp(0.92rem, 3.45vw, 1.24rem);
  font-weight: 400;
  color: var(--ui-ink);
  line-height: 1.18;
  text-transform: none;
  z-index: 32;
  font-family: var(--font-handwriting);
  padding: 0px;
  overflow-wrap: break-word;
}

.speech-content p {
  margin: 0px;
  word-break: break-word;
}

.close-btn {
  position: absolute;
  top: -17px;
  right: -20px;
  background: none;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  padding: 0px;
  cursor: pointer;
  width: 44px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 33;
  opacity: 0;
  pointer-events: none;
}

.close-btn.show-btn {
  animation: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s 1 normal forwards running dropFlag;
  pointer-events: auto;
}

.close-btn img {
  width: 40px;
  height: 56px;
  object-fit: contain;
  transition: transform 0.2s;
}

.close-btn:hover img, .close-btn:focus-visible img {
  transform: scale(1.1);
}

.close-btn:active img {
  transform: scale(0.95);
}

.close-btn:focus-visible {
  outline: 3px solid var(--ui-sunflower);
  outline-offset: 2px;
}

.distance-popup {
  position: absolute;
  left: 50%;
  bottom: calc(var(--screen-safe-bottom) + 16px);
  transform: translateX(-50%) translateY(20px);
  width: min(
    92vw,
    420px,
    calc(100dvw - var(--screen-safe-left) - var(--screen-safe-right))
  );
  opacity: 0;
  pointer-events: none;
  z-index: calc(var(--ui-layer-popup) + 2);
  transition: opacity 0.25s, transform 0.25s;
}

.distance-popup.hidden {
  display: none;
}

.distance-popup.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0px);
  pointer-events: auto;
}

.distance-popup__content, .geo-popup__content {
  position: relative;
  display: flex;
  align-items: stretch;
}

.distance-popup__content {
  gap: 12px;
  justify-content: center;
}

.distance-popup__icon {
  flex: 0 0 40px;
  align-self: center;
}

.geo-popup__content {
  align-items: flex-start;
}

.distance-popup__body {
  justify-content: center;
}

#distancePopupActionBtn {
  align-self: center;
  margin-top: 8px;
}

.distance-popup__body .message-panel-content, .distance-popup__body .message-panel-text {
  width: 100%;
  white-space: normal;
}

.distance-popup__distance-line {
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  color: var(--panel-outer-color);
}

.distance-popup__distance-value {
  font-weight: 900;
}

.geo-popup {
  position: absolute;
  left: 50%;
  bottom: calc(var(--screen-safe-bottom) + 16px);
  transform: translateX(-50%) translateY(20px);
  width: min(
    92vw,
    420px,
    calc(100dvw - var(--screen-safe-left) - var(--screen-safe-right))
  );
  opacity: 0;
  pointer-events: none;
  z-index: calc(var(--ui-layer-popup) + 3);
  transition: opacity 0.25s, transform 0.25s;
}

.geo-popup.hidden {
  display: none;
}

.geo-popup.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0px);
  pointer-events: auto;
}

.geo-popup__body {
  width: 100%;
}

.geo-popup__actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.geo-popup__actions.hidden {
  display: none;
}

.geo-popup__action {
  min-width: 140px;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}

.geo-popup__action.hidden {
  display: none;
}

.geo-popup__action--primary {
  background: var(--panel-inner-color);
  color: var(--panel-outer-color);
  box-shadow: 0 8px 18px rgba(var(--ui-panel-deep-rgb), 0.18),
    inset 0 0 0 3px var(--panel-mid-color);
}

.geo-popup__action:hover {
  transform: translateY(-1px);
}

.geo-popup__action:active {
  transform: translateY(0px);
}

@keyframes slideUp { 
  0% { bottom: -100%; }
  100% { bottom: 0px; }
}

@keyframes slideDown { 
  0% { bottom: 0px; }
  100% { bottom: -100%; }
}

@keyframes popIn { 
  0% { opacity: 0; transform: translateX(-50%) scale(0.5) translateY(20px); }
  100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0px); }
}

@keyframes dropFlag { 
  0% { transform: translateY(-80px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}

.fade-out {
  animation: 0.5s ease 0s 1 normal forwards running fadeOut;
}

@keyframes fadeOut { 
  0% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.8); }
}

.progress-container {
  --panel-radius: 30px;
  --panel-gap: 16px;
  --panel-bottom-offset: 10px;
  --panel-safe-top: 26px;
  --panel-safe-left: 8px;
  --panel-safe-right: 8px;
  --panel-safe-bottom: 8px;
  --inventory-frame-corner: clamp(34px, 8vw, 52px);
  --inventory-frame-inset-top: -10px;
  --inventory-frame-inset-right: -10px;
  --inventory-frame-inset-bottom: -12px;
  --inventory-frame-inset-left: -10px;
  --inventory-body-offset-y: 32px;
  --inventory-shell-offset-top: 0px;
  --inventory-anchor-top: calc(
    var(--inventory-score-panel-midpoint-y) + var(--inventory-shell-offset-top)
  );
  --inventory-shell-max-height: calc(
    100dvh - var(--inventory-anchor-top) - var(--screen-safe-bottom)
  );
  --inventory-min-content-height: clamp(400px, 45dvh, 600px);
  --inventory-current-height: var(--inventory-shell-max-height);
  --inventory-header-side-inset: calc(
    (var(--inventory-panel-score-side-safe) - var(--inventory-header-button-size)) / 2
  );
  --inventory-header-height: var(--inventory-header-button-size);
  --inventory-header-half-height: calc(var(--inventory-header-height) / 2);
  --inventory-header-row-top: 0px;
  --inventory-header-button-gap: 8px;
  position: absolute;
  display: flex;
  top: var(--inventory-anchor-top);
  opacity: 1;
  left: 50%;
  transform: translate(-50%, 0px);
  width: min(
    calc(100% - var(--screen-safe-left) - var(--screen-safe-right)),
    calc(
      var(--inventory-hud-score-rendered-width) + (2 * var(--inventory-panel-score-side-safe))
    )
  );
  height: min(var(--inventory-current-height), var(--inventory-shell-max-height));
  max-height: var(--inventory-shell-max-height);
  text-align: left;
  color: var(--text-blue);
  z-index: var(--ui-layer-panel);
  pointer-events: none;
  flex-flow: column;
  place-content: center flex-end;
  align-items: center;
  max-width: min(
    calc(100% - var(--screen-safe-left) - var(--screen-safe-right)),
    calc(
      var(--inventory-hud-score-rendered-width) + (2 * var(--inventory-panel-score-side-safe))
    )
  );
  overflow: visible;
  isolation: isolate;
}

.progress-container::before, .progress-container::after {
  content: "";
  position: absolute;
  left: var(--panel-safe-left);
  right: var(--panel-safe-right);
  border-radius: var(--panel-radius);
  pointer-events: none;
}

.progress-container::before {
  display: none;
}

.progress-container::after {
  display: none;
  z-index: 1;
}

.progress-container-frame {
  position: absolute;
  top: var(--inventory-frame-inset-top);
  right: var(--inventory-frame-inset-right);
  bottom: var(--inventory-frame-inset-bottom);
  left: var(--inventory-frame-inset-left);
  display: grid;
  grid-template-columns: var(--inventory-frame-corner) 1fr var(--inventory-frame-corner);
  grid-template-rows: var(--inventory-frame-corner) 1fr var(--inventory-frame-corner);
  pointer-events: none;
  z-index: 0;
}

.progress-container-frame .slice {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.progress-container-frame .slice.tl {
  background-image: url("../img/newui/infobox/9slice/tl.png");
}

.progress-container-frame .slice.t {
  background-image: url("../img/newui/infobox/9slice/t.png");
}

.progress-container-frame .slice.tr {
  background-image: url("../img/newui/infobox/9slice/tr.png");
}

.progress-container-frame .slice.l {
  background-image: url("../img/newui/infobox/9slice/l.png");
}

.progress-container-frame .slice.c {
  background-image: url("../img/newui/infobox/9slice/c.png");
}

.progress-container-frame .slice.r {
  background-image: url("../img/newui/infobox/9slice/r.png");
}

.progress-container-frame .slice.bl {
  background-image: url("../img/newui/infobox/9slice/bl.png");
}

.progress-container-frame .slice.b {
  background-image: url("../img/newui/infobox/9slice/b.png");
}

.progress-container-frame .slice.br {
  background-image: url("../img/newui/infobox/9slice/br.png");
}

@media only screen and (min-width: 1025px) {
  .progress-container {
    --inventory-frame-corner: 52px;
    --inventory-frame-inset-top: -10px;
    --inventory-frame-inset-right: -12px;
    --inventory-frame-inset-bottom: -14px;
    --inventory-frame-inset-left: -12px;
    --inventory-body-offset-y: 32px;
    --inventory-header-button-size: clamp(38px, 7.2vw, 52px);
    height: min(var(--inventory-current-height), var(--inventory-shell-max-height));
    max-height: var(--inventory-shell-max-height);
  }

  .progress-container-score-container {
    font-size: 1.5em;
  }
}

.progress-container.show {
  pointer-events: none;
}

.progress-container-header {
  position: absolute;
  top: calc(-1 * var(--inventory-header-half-height));
  left: var(--inventory-header-side-inset);
  right: var(--inventory-header-side-inset);
  width: auto;
  min-height: var(--inventory-header-height);
  z-index: 6;
  pointer-events: none;
  cursor: default;
}

#inventory-panel .panel-header-left-extras, #inventory-panel .panel-controls.panel-header-controls {
  display: flex;
  position: absolute;
  top: var(--inventory-header-row-top);
  transform: none;
  z-index: 7;
  align-items: center;
  gap: var(--inventory-header-button-gap);
  pointer-events: auto;
}

#inventory-panel .panel-header-left-extras {
  left: var(--inventory-header-side-inset);
}

#inventory-panel:not(.show) .panel-header-left-extras, #inventory-panel:not(.show) .panel-header-left-extras *, #inventory-panel:not(.show) .panel-controls.panel-header-controls, #inventory-panel:not(.show) .panel-controls.panel-header-controls * {
  pointer-events: none !important;
}

.progress-container-body {
  position: absolute;
  inset: 0px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: center top;
  transform: scaleY(0.85) translateY(-8px);
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s, visibility linear 0.42s;
}

.progress-container.show .progress-container-body {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scaleY(1) translateY(0px);
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s, visibility linear;
}

.progress-container-header-eye {
  position: relative;
  width: var(--inventory-header-button-size);
  height: var(--inventory-header-button-size);
  border: 0px;
  background: var(--ui-panel-mid);
  border-radius: 999px;
  cursor: var(--cursor-pointer);
  padding: 0px;
  display: grid;
  place-items: center;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 0px;
  isolation: isolate;
  pointer-events: auto;
}

.progress-container-header-eye::before {
  content: "";
  position: absolute;
  inset: 0px;
  background-image: url("../img/newui/infobox/CLOSE BUTTON - empty.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  z-index: -1;
  pointer-events: none;
}

.progress-container-header-eye img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: invert(30%) sepia(48%) saturate(1024%) hue-rotate(187deg) brightness(90%) contrast(92%);
}

.progress-container-header-closeBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0px;
  background: transparent;
  padding: 0px;
  width: var(--inventory-header-button-size);
  height: var(--inventory-header-button-size);
  cursor: var(--cursor-pointer);
  pointer-events: auto;
}

.progress-container-header-closeBtn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.progress-container:not(.show) .progress-container-header-eye, .progress-container:not(.show) .progress-container-header-closeBtn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.inventory-score-panel {
  position: absolute;
  top: var(--inventory-score-panel-top);
  left: 50%;
  width: var(--inventory-hud-score-rendered-width);
  height: var(--inventory-hud-score-button-height);
  transform: translate(-50%, var(--inventory-score-panel-visual-offset-y));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--ui-layer-control-buttons);
  pointer-events: none;
  isolation: isolate;
}

.inventory-score-panel::before {
  content: "";
  position: absolute;
  inset: 10% 7%;
  border: 2px solid var(--ui-paper-edge);
  border-radius: 10px 18px 14px 8px;
  background: linear-gradient(175deg, #fff 0%, var(--ui-paper) 70%);
  box-shadow: 3px 4px 0 var(--ui-panel-deep), 5px 7px 10px #3a2a1f33;
  transform: rotate(-1.5deg);
  pointer-events: none;
  z-index: 0;
}

.inventory-score-icon {
  position: absolute;
  z-index: 2;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.inventory-score-icon--book {
  left: 3%;
  width: 24%;
  height: 84%;
  transform: rotate(-7deg);
}

.inventory-score-icon--star {
  right: 4%;
  width: 17%;
  height: 62%;
  transform: rotate(9deg);
}

.inventory-score-toggle-hitbox {
  position: absolute;
  top: var(--inventory-score-toggle-inset-top);
  right: var(--inventory-score-toggle-inset-right);
  bottom: var(--inventory-score-toggle-inset-bottom);
  left: var(--inventory-score-toggle-inset-left);
  border: 0px;
  background: transparent;
  padding: 0px;
  margin: 0px;
  appearance: none;
  box-shadow: none;
  cursor: var(--cursor-pointer);
  pointer-events: auto;
  border-radius: 999px;
  z-index: 1;
}

.progress-container-score-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1em;
  font-family: var(--font-ui);
  font-weight: 700;
  padding: 0px 22px 3px;
  color: var(--ui-text-on-light);
  border-radius: 999px;
  overflow: hidden;
}

.progress-container-score-container::before {
  content: "";
  position: absolute;
  inset: 0px;
  background-image: url("../img/newui/Score-Bg.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.inventory-score-toggle-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3ch;
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1;
  font-family: var(--font-handwriting);
  font-weight: 700;
  color: var(--ui-ink);
  pointer-events: none;
  transform: translateY(var(--inventory-score-text-offset-y));
}

.progress-container-inner {
  top: calc(var(--inventory-body-offset-y) + var(--inventory-frame-inset-top));
  right: calc(var(--panel-safe-right) + var(--panel-gap));
  bottom: calc(
    var(--panel-safe-bottom) + var(--panel-gap) + var(--panel-bottom-offset)
  );
  left: calc(var(--panel-safe-left) + var(--panel-gap));
  position: absolute;
  font-size: 1.05rem;
  font-family: var(--font-handwriting);
  text-align: left;
  padding: 12px 8px 10px;
  border-radius: calc(var(--panel-radius) - var(--panel-gap) - 2px);
  background: transparent;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  scrollbar-gutter: stable;
  z-index: 2;
}

.progress-container-content {
  width: 100%;
  min-height: var(--inventory-min-content-height);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.progress-container-inner * {
  font-family: inherit;
}

.progress-container-username {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 12px;
  color: var(--text-blue);
}

.progress-container-login-checkbox {
  display: flex;
  align-items: center;
  gap: 13px;
  position: relative;
}

.progress-summary-sticky {
  position: static;
  width: 100%;
  padding-top: 2px;
  margin-bottom: 6px;
  background: transparent;
  --inventory-submit-button-max-height: 76px;
  --inventory-submit-button-aspect-ratio: 3.35;
}

.checkbox-bg {
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.checkbox-tick {
  width: 30px;
  height: 30px;
  pointer-events: none;
  opacity: 0;
  transition: 0.2s;
}

.checkbox-tick.visible {
  opacity: 1;
}

.checkbox-text {
  font-size: 1em;
  font-weight: bold;
  color: var(--text-blue);
  font-family: var(--font-handwriting);
}

.progress-character-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 2px 0px 10px;
  flex-shrink: 0;
}

.progress-summary-sticky.is-compact .progress-character-block {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 0px 4px;
}

.progress-character-image {
  display: block;
  width: min(52%, 192px);
  height: auto;
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  margin: 0px auto;
  flex-shrink: 0;
}

.progress-summary-sticky.is-compact .progress-character-image {
  width: 62px;
  max-height: 62px;
  margin: 0px;
}

.progress-character-copy {
  display: contents;
}

.progress-summary-sticky.is-compact .progress-character-copy {
  display: contents;
}

.progress-character-title {
  order: 1;
  width: 100%;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 1.55em;
  line-height: 1.2;
  font-weight: 800;
  color: var(--text-blue);
}

.progress-summary-sticky.is-compact .progress-character-title {
  font-size: 1.12em;
  text-align: center;
}

.progress-character-description {
  order: 3;
  width: 100%;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.82em;
  line-height: 1.28;
  font-weight: 400;
  color: var(--text-blue);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.progress-summary-sticky.is-compact .progress-character-description {
  display: none;
}

.progress-character-image {
  order: 2;
}

.progressbar-wrapper {
  width: 100%;
  height: auto;
  min-height: 62px;
  border-radius: 15px;
  margin-top: 8px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.progress-summary-sticky.is-compact .progressbar-wrapper {
  margin-top: 2px;
  margin-bottom: 4px;
}

.progress-summary-sticky.is-compact .progressbar-text {
  font-size: 0.9em;
  margin-bottom: 4px;
}

.inventory-submit-results-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
}

.progress-summary-sticky.is-compact .inventory-submit-results-container {
  margin-top: 4px;
}

.inventory-submit-results-button {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: var(--inventory-submit-button-max-height);
  aspect-ratio: var(--inventory-submit-button-aspect-ratio);
  border: 3px solid var(--ui-primary-active);
  border-radius: 16px;
  padding: 0px 14px;
  background: var(--ui-primary);
  color: var(--ui-text-on-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(var(--ui-primary-active-rgb), 0.22);
  cursor: pointer;
}

.inventory-submit-results-button:focus-visible {
  outline: rgba(255, 255, 255, 0.95) solid 3px;
  outline-offset: 2px;
}

.inventory-submit-results-label {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.progress-summary-sticky.is-compact .inventory-submit-results-label {
  font-size: clamp(0.82rem, 1.55vw, 1rem);
}

.progressbar-text {
  font-size: 1em;
  font-weight: bold;
  color: var(--text-blue);
  margin-bottom: 8px;
  font-family: var(--font-handwriting);
}

.progressbar-bg {
  background: url("../img/newui/ProgressBg.png") center center / contain no-repeat;
  width: 100%;
  aspect-ratio: 701 / 55;
  height: auto;
  min-height: 0px;
  overflow: hidden;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.progressbar-fill {
  --progress-fill-scale: 1;
  --progress-fill-offset-left: 0px;
  --progress-fill-offset-right: 0px;
  display: block;
  height: 100%;
  max-width: none;
  overflow: hidden;
  position: relative;
}

.progressbar-fill-image {
  display: block;
  position: absolute;
  top: 0px;
  left: var(--progress-fill-offset-left);
  height: 100%;
  width: calc((var(--progress-fill-scale, 1) * 100%) + var(--progress-fill-offset-right));
  max-width: none;
  object-fit: fill;
  object-position: left center;
}

.badges-section {
  --inventory-section-inline-inset: 0px;
  --inventory-story-group-inline-inset: 8px;
  --inventory-storyline-inline-inset: 16px;
  --inventory-section-divider-inset: 2px;
  --inventory-story-group-divider-inset: 8px;
  --inventory-storyline-divider-inset: 16px;
  --inventory-badge-grid-gap: 10px;
  --inventory-badge-grid-column-gap: 6px;
  --inventory-badge-columns-max: 3;
  --inventory-badge-column-target: 118px;
  --inventory-badge-column-min: 92px;
  --inventory-badge-card-width: var(--inventory-badge-column-target);
  --inventory-badge-card-max-height: 194px;
  --inventory-badge-card-inline-padding: 9px;
  --inventory-badge-card-top-padding: 9px;
  --inventory-badge-card-bottom-padding: 10px;
  --inventory-badge-icon-size: calc(100% - 18px);
  --inventory-badge-label-line-height: 1.15;
  --inventory-badge-label-lines: 3;
  --inventory-badge-grid-max-width: calc(
    (var(--inventory-badge-columns-max) * var(--inventory-badge-column-target)) +
    ((var(--inventory-badge-columns-max) - 1) * var(--inventory-badge-grid-column-gap))
  );
  width: 100%;
  margin-top: 3%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  flex: 0 0 auto;
  overflow: visible;
  padding-right: 0px;
  padding-bottom: 4%;
}

.inventory-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inventory-section + .inventory-section {
  position: relative;
  padding-top: 18px;
}

.inventory-section + .inventory-section::before {
  content: "";
  position: absolute;
  top: 0px;
  left: var(--inventory-section-divider-inset);
  right: var(--inventory-section-divider-inset);
  height: 8px;
  background-image: url("../img/newui/Separator-CheckBox.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.7;
}

.inventory-section-content {
  width: 100%;
}

.inventory-section-progressbar-wrapper {
  min-height: 0px;
  margin-top: 10px;
  margin-bottom: 14px;
  align-items: flex-start;
}

.inventory-section-progressbar-wrapper .progressbar-text {
  margin-bottom: 6px;
}

#storylines-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.badges-title {
  font-size: 1.2em;
  font-weight: 900;
  color: var(--text-blue);
  font-family: var(--font-ui);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  padding-inline: var(--inventory-section-inline-inset);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: var(--cursor-pointer);
}

.inventory-section-title-label {
  flex: 0 1 auto;
  min-width: auto;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.inventory-section-toggle {
  width: 30px;
  height: 30px;
  border: 0px;
  background: transparent;
  cursor: var(--cursor-pointer);
  padding: 0px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.inventory-section-triangle {
  width: 0px;
  height: 0px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid var(--ui-text-on-light);
  transform: rotate(0deg);
  transform-origin: 50% 40%;
  transition: transform 0.2s;
}

.inventory-section.is-collapsed > .badges-title .inventory-section-triangle {
  transform: rotate(-90deg);
}

.story-group.is-collapsed > .story-group-title .inventory-section-triangle, .storyline-item.is-collapsed > .storyline-item-title .inventory-section-triangle {
  transform: rotate(-90deg);
}

.inventory-section.is-collapsed > .inventory-section-content {
  display: none;
}

.story-group-title, .storyline-item-title {
  font-size: 0.96em;
  font-weight: 300;
  color: var(--text-blue);
  font-family: var(--font-ui);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: var(--cursor-pointer);
}

.inventory-group-progress {
  margin: 2px 0px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0px;
  width: 100%;
  box-sizing: border-box;
  padding-inline: var(--inventory-story-group-inline-inset);
}

.inventory-region-progress-text {
  flex-shrink: 0;
  font-family: var(--font-handwriting);
  font-size: 0.84em;
  font-weight: 700;
  color: var(--text-blue);
  white-space: nowrap;
}

.inventory-region-progressbar-wrapper {
  width: auto;
  flex: 1 1 auto;
}

.inventory-region-progressbar-bg {
  width: 100%;
  min-height: 0px;
  border-radius: 999px;
}

.inventory-region-progressbar-fill {
  height: 100%;
}

.inventory-region-progressbar-fill-image {
  height: 100%;
}

.story-group-title {
  position: relative;
  margin-bottom: 0px;
  padding-top: 10px;
  padding-inline: var(--inventory-story-group-inline-inset);
}

.story-group-title::before {
  content: "";
  position: absolute;
  top: 0px;
  left: var(--inventory-story-group-divider-inset);
  right: var(--inventory-story-group-divider-inset);
  height: 5px;
  background-image: url("../img/newui/Separator-CheckBox.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.6;
}

.story-group-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

.story-group.is-collapsed > .story-group-content {
  display: none;
}

.storyline-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 0px;
  width: 100%;
  align-items: stretch;
}

.storyline-item-content {
  width: 100%;
  margin-left: 0px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.storyline-item.is-collapsed > .storyline-item-content {
  display: none;
}

.storyline-item-title {
  font-weight: 300;
}

#storylines-container .storyline-item-title {
  width: 100%;
  margin-left: 0px;
  position: relative;
  margin-bottom: 8px;
  padding-bottom: 8px;
  padding-inline: var(--inventory-storyline-inline-inset);
}

#storylines-container .storyline-item-title::after {
  content: "";
  position: absolute;
  left: var(--inventory-storyline-divider-inset);
  right: var(--inventory-storyline-divider-inset);
  bottom: 0px;
  height: 2px;
  background-image: url("../img/newui/Separator-CheckBox.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.45;
}

.progress-container-inner .badges-section .badges-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--inventory-badge-column-target)));
  row-gap: var(--inventory-badge-grid-gap);
  column-gap: var(--inventory-badge-grid-column-gap);
  justify-content: center;
  place-items: stretch center;
  width: min(100%, var(--inventory-badge-grid-max-width));
  max-width: var(--inventory-badge-grid-max-width);
  min-width: 0px;
  margin-inline: auto;
  box-sizing: border-box;
}

.progress-container-inner .badges-section .inventory-section-content > .badges-container, .progress-container-inner .badges-section #cultural-treasures-container, .progress-container-inner .badges-section #storylines-container {
  padding-inline: var(--inventory-section-inline-inset);
  box-sizing: border-box;
}

.progress-container-inner .badges-section #cultural-treasures-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.progress-container-inner .badges-section .story-group-content > .badges-container, .progress-container-inner .badges-section .storyline-item-content > .badges-container {
  padding-inline: var(--inventory-section-inline-inset);
}

.progress-container-inner .badges-section .badge-item {
  width: min(100%, var(--inventory-badge-card-width));
  max-width: var(--inventory-badge-card-width);
  max-height: var(--inventory-badge-card-max-height);
  min-width: 0px;
  flex: 0 0 auto;
  justify-self: center;
  box-sizing: border-box;
  justify-content: flex-start;
  gap: 8px;
  padding: var(--inventory-badge-card-top-padding) var(--inventory-badge-card-inline-padding) var(--inventory-badge-card-bottom-padding);
}

.progress-container-inner .badges-section .badge-icon {
  width: min(100%, var(--inventory-badge-icon-size));
  height: auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  align-self: center;
  overflow: hidden;
  padding: 0px;
}

.progress-container-inner .badges-section .badge-icon > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: inherit;
}

.progress-container-inner .badges-section .badge-checkmark, .progress-container-inner .badges-section .badge-lock {
  top: 6%;
  right: 6%;
  width: 28% !important;
  height: 28% !important;
}

.progress-container-inner .badges-section .badge-label {
  line-height: var(--inventory-badge-label-line-height);
  min-height: calc(var(--inventory-badge-label-lines) * 1em * var(--inventory-badge-label-line-height));
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-container-inner .badges-section .badge-item[data-achievement-key] {
  max-height: none;
}

.progress-container-inner .badges-section .badge-item[data-achievement-key] .badge-label {
  min-height: 0px;
  -webkit-line-clamp: 2;
}

.progress-container-inner .badges-section .badge-item[data-achievement-key] .badge-description {
  width: 100%;
  font-size: clamp(10px, 0.58em, 12px);
  font-weight: 600;
  color: var(--text-blue);
  text-align: center;
  font-family: var(--font-ui);
  line-height: 1.25;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-box-pack: start;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.82;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media only screen and (max-width: 420px) {
  .badges-section {
    --inventory-badge-column-target: 80px;
    --inventory-badge-column-min: 76px;
    --inventory-badge-card-width: var(--inventory-badge-column-target);
    --inventory-badge-card-max-height: 152px;
    --inventory-badge-card-inline-padding: 6px;
    --inventory-badge-card-top-padding: 7px;
    --inventory-badge-card-bottom-padding: 8px;
    --inventory-badge-icon-size: calc(100% - 12px);
    --inventory-badge-grid-gap: 8px;
    --inventory-badge-grid-column-gap: 6px;
  }
}

@media only screen and (max-width: 340px) {
  .badges-section {
    --inventory-badge-columns-max: 2;
    --inventory-badge-column-target: 96px;
    --inventory-badge-column-min: 76px;
    --inventory-badge-card-width: var(--inventory-badge-column-target);
    --inventory-badge-card-max-height: 168px;
    --inventory-badge-card-inline-padding: 7px;
    --inventory-badge-card-top-padding: 8px;
    --inventory-badge-card-bottom-padding: 9px;
    --inventory-badge-icon-size: calc(100% - 14px);
  }

  .progress-container-inner .badges-section .badges-container {
    grid-template-columns: repeat(2, minmax(0, var(--inventory-badge-column-target)));
  }
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view, .blue-content-box.box-floating .content-list.locations-grouped-view, #index-panel #index-panel-body.locations-grouped-view {
  --locations-content-inset: var(--infobox-content-inline-padding);
  --inventory-story-group-inline-inset: 8px;
  --inventory-story-group-divider-inset: 8px;
  --inventory-badge-grid-gap: 12px;
  --inventory-badge-grid-column-gap: 8px;
  --inventory-badge-columns-max: 3;
  --inventory-badge-column-target: 122px;
  --inventory-badge-card-width: var(--inventory-badge-column-target);
  --inventory-badge-card-max-height: 198px;
  --inventory-badge-card-inline-padding: 9px;
  --inventory-badge-card-top-padding: 9px;
  --inventory-badge-card-bottom-padding: 10px;
  --inventory-badge-icon-size: calc(100% - 18px);
  --inventory-badge-label-line-height: 1.15;
  --inventory-badge-label-lines: 3;
  --inventory-badge-grid-max-width: calc(
    (var(--inventory-badge-columns-max) * var(--inventory-badge-column-target)) +
    ((var(--inventory-badge-columns-max) - 1) * var(--inventory-badge-grid-column-gap))
  );
  width: 100%;
  min-width: 0px;
  margin: 0px;
  box-sizing: border-box;
  padding: 6px var(--locations-content-inset) 10px;
  gap: 22px;
  align-items: stretch;
  overflow-x: hidden;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .story-group, .blue-content-box.box-floating .content-list.locations-grouped-view .story-group, #index-panel #index-panel-body.locations-grouped-view .story-group {
  width: 100%;
  max-width: 100%;
  margin: 0px auto;
  box-sizing: border-box;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .story-group + .story-group, .blue-content-box.box-floating .content-list.locations-grouped-view .story-group + .story-group, #index-panel #index-panel-body.locations-grouped-view .story-group + .story-group {
  margin-top: 18px;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .story-group-title::before, .blue-content-box.box-floating .content-list.locations-grouped-view .story-group-title::before, #index-panel #index-panel-body.locations-grouped-view .story-group-title::before {
  left: var(--inventory-story-group-divider-inset);
  right: var(--inventory-story-group-divider-inset);
  width: auto;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .story-group-title, .blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .storyline-item-title, .blue-content-box.box-floating .content-list.locations-grouped-view .story-group-title, .blue-content-box.box-floating .content-list.locations-grouped-view .storyline-item-title, #index-panel #index-panel-body.locations-grouped-view .story-group-title, #index-panel #index-panel-body.locations-grouped-view .storyline-item-title {
  width: 100%;
  min-width: 0px;
  margin-left: 0px;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .story-group-title, .blue-content-box.box-floating .content-list.locations-grouped-view .story-group-title, #index-panel #index-panel-body.locations-grouped-view .story-group-title {
  margin-bottom: 16px;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .story-group-content, .blue-content-box.box-floating .content-list.locations-grouped-view .story-group-content, #index-panel #index-panel-body.locations-grouped-view .story-group-content {
  width: 100%;
  max-width: 100%;
  margin-left: 0px;
  align-items: stretch;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .story-group-title .inventory-section-title-label, .blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .storyline-item-title .inventory-section-title-label, .blue-content-box.box-floating .content-list.locations-grouped-view .story-group-title .inventory-section-title-label, .blue-content-box.box-floating .content-list.locations-grouped-view .storyline-item-title .inventory-section-title-label, #index-panel #index-panel-body.locations-grouped-view .story-group-title .inventory-section-title-label, #index-panel #index-panel-body.locations-grouped-view .storyline-item-title .inventory-section-title-label {
  flex: 1 1 auto;
  min-width: 0px;
  font-size: 0.96em;
  line-height: 1.15;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .inventory-section-toggle, .blue-content-box.box-floating .content-list.locations-grouped-view .inventory-section-toggle, #index-panel #index-panel-body.locations-grouped-view .inventory-section-toggle {
  width: 30px;
  height: 30px;
  margin-top: 2px;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .badges-container, .blue-content-box.box-floating .content-list.locations-grouped-view .badges-container, #index-panel #index-panel-body.locations-grouped-view .badges-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--inventory-badge-column-target)));
  justify-content: center;
  place-items: stretch center;
  row-gap: var(--inventory-badge-grid-gap);
  column-gap: var(--inventory-badge-grid-column-gap);
  width: 100%;
  max-width: none;
  margin: 0px auto;
  min-width: 0px;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .badge-item, .blue-content-box.box-floating .content-list.locations-grouped-view .badge-item, #index-panel #index-panel-body.locations-grouped-view .badge-item {
  width: min(100%, var(--inventory-badge-card-width));
  flex: 0 0 auto;
  max-width: var(--inventory-badge-card-width);
  max-height: var(--inventory-badge-card-max-height);
  min-width: 0px;
  justify-self: center;
  box-sizing: border-box;
  justify-content: flex-start;
  gap: 8px;
  padding: var(--inventory-badge-card-top-padding) var(--inventory-badge-card-inline-padding) var(--inventory-badge-card-bottom-padding);
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .badge-item .badge-icon, .blue-content-box.box-floating .content-list.locations-grouped-view .badge-item .badge-icon, #index-panel #index-panel-body.locations-grouped-view .badge-item .badge-icon {
  width: min(100%, var(--inventory-badge-icon-size));
  height: auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  align-self: center;
  overflow: hidden;
  padding: 0px;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .badge-item .badge-label, .blue-content-box.box-floating .content-list.locations-grouped-view .badge-item .badge-label, #index-panel #index-panel-body.locations-grouped-view .badge-item .badge-label {
  font-size: var(--font-size-badge-label-final);
  line-height: var(--inventory-badge-label-line-height);
  min-height: calc(var(--inventory-badge-label-lines) * 1em * var(--inventory-badge-label-line-height));
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tourist-groups-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0px;
}

.tourist-groups-container .story-group {
  width: 100%;
}

.locations-inline-search {
  width: 100%;
  max-width: 100%;
  min-width: 0px;
  align-self: stretch;
  margin-left: 0px;
  margin-right: 0px;
  box-sizing: border-box;
  padding: 0px 2px 8px;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .badge-item .badge-icon, .blue-content-box.box-floating .content-list.locations-grouped-view .badge-item .badge-icon, #index-panel #index-panel-body.locations-grouped-view .badge-item .badge-icon {
  margin: 0px auto;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .badge-item .badge-icon > img:first-child, .blue-content-box.box-floating .content-list.locations-grouped-view .badge-item .badge-icon > img:first-child, #index-panel #index-panel-body.locations-grouped-view .badge-item .badge-icon > img:first-child {
  object-position: center center;
  transform: none;
}

.blue-content-box.box-floating.box-locations-mode .blue-content-box-inner.locations-grouped-view, .blue-content-box.box-floating.box-locations-mode .content-list.locations-grouped-view {
  --locations-content-inset: var(--infobox-content-inline-padding);
}

.blue-content-box.box-floating.box-locations-mode .blue-content-box-inner {
  left: calc(var(--panel-safe-left) + var(--panel-gap) + 2px);
  right: calc(var(--panel-safe-right) + var(--panel-gap) + 12px);
  min-height: 0px;
  overflow: hidden auto;
  box-sizing: border-box;
  padding: 0px 2px 10px 0px;
}

.blue-content-box.box-floating.box-locations-mode .blue-content-box-inner::-webkit-scrollbar {
  width: 6px;
}

.blue-content-box.box-floating.box-locations-mode .blue-content-box-inner.locations-grouped-view .story-group-title, .blue-content-box.box-floating.box-locations-mode .blue-content-box-inner.locations-grouped-view .storyline-item-title, .blue-content-box.box-floating.box-locations-mode .content-list.locations-grouped-view .story-group-title, .blue-content-box.box-floating.box-locations-mode .content-list.locations-grouped-view .storyline-item-title {
  width: 100%;
  margin-left: 0px;
}

.blue-content-box.box-floating.box-locations-mode .blue-content-box-inner.locations-grouped-view .story-group-content, .blue-content-box.box-floating.box-locations-mode .content-list.locations-grouped-view .story-group-content {
  width: 100%;
  margin-left: 0px;
  align-items: stretch;
}

.blue-content-box.box-floating.box-locations-mode .locations-inline-search {
  width: 100%;
  max-width: 100%;
  min-width: 0px;
  align-self: stretch;
  margin-left: 0px;
  margin-right: 0px;
  box-sizing: border-box;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .locations-inline-search-input, .blue-content-box.box-floating .content-list.locations-grouped-view .locations-inline-search-input, #index-panel #index-panel-body.locations-grouped-view .locations-inline-search-input {
  width: 100%;
  max-width: 100%;
  min-width: 0px;
  box-sizing: border-box;
}

.blue-content-box.box-floating .content-list {
  padding: 0 var(--infobox-content-inline-padding) 10px;
}

.blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view {
  overflow-x: hidden;
}

.blue-content-box.box-floating.box-locations-mode .content-text, .blue-content-box.box-floating.box-locations-mode .text-block, .blue-content-box.box-floating.box-locations-mode .content-image, .blue-content-box.box-floating.box-locations-mode .gallery-img, .blue-content-box.box-floating.box-locations-mode .content-gallery-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

.blue-content-box.box-floating.box-minimize-bounce .blue-content-box-title {
  animation: 320ms cubic-bezier(0.22, 0.85, 0.35, 1) 0s 1 normal both running welcomeMinimizeSoftBounceTitle;
  transform-origin: left center;
}

.blue-content-box.box-floating.box-minimize-bounce .panel-controls {
  animation: 320ms cubic-bezier(0.22, 0.85, 0.35, 1) 0s 1 normal both running welcomeMinimizeSoftBounceControls;
  transform-origin: right center;
}

.blue-content-box.box-floating.box-minimize-bounce .blue-content-box-inner, .blue-content-box.box-floating.box-minimize-bounce .blue-box-location-pin {
  animation: 320ms cubic-bezier(0.22, 0.85, 0.35, 1) 0s 1 normal both running welcomeMinimizeSoftBounce;
  transform-origin: center top;
}

.blue-content-box.box-floating.box-minimize-bounce .blue-content-box-inner, .blue-content-box.box-floating.box-minimize-bounce .blue-box-location-pin {
  will-change: transform;
}

@keyframes welcomeMinimizeSoftBounce { 
  0% { transform: scale(1); }
  40% { transform: scale(1.035); }
  75% { transform: scale(0.985); }
  100% { transform: scale(1); }
}

@keyframes welcomeMinimizeSoftBounceTitle { 
  0% { transform: translateY(-50%) scale(1); }
  40% { transform: translateY(-50%) scale(1.03); }
  75% { transform: translateY(-50%) scale(0.988); }
  100% { transform: translateY(-50%) scale(1); }
}

@keyframes welcomeMinimizeSoftBounceControls { 
  0% { transform: translateY(-50%) scale(1); }
  40% { transform: translateY(-50%) scale(1.03); }
  75% { transform: translateY(-50%) scale(0.988); }
  100% { transform: translateY(-50%) scale(1); }
}

.blue-content-box.box-floating.box-locations-mode .blue-content-box-inner.locations-grouped-view .badges-container, .blue-content-box.box-floating.box-locations-mode .content-list.locations-grouped-view .badges-container {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  justify-items: center;
}

@media only screen and (max-width: 420px) {
  .blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view, .blue-content-box.box-floating .content-list.locations-grouped-view, #index-panel #index-panel-body.locations-grouped-view {
    --inventory-badge-column-target: 80px;
    --inventory-badge-card-width: var(--inventory-badge-column-target);
    --inventory-badge-card-max-height: 152px;
    --inventory-badge-card-inline-padding: 6px;
    --inventory-badge-card-top-padding: 7px;
    --inventory-badge-card-bottom-padding: 8px;
    --inventory-badge-icon-size: calc(100% - 12px);
    --inventory-badge-grid-gap: 8px;
    --inventory-badge-grid-column-gap: 6px;
  }

  .blue-content-box.box-floating .blue-content-box-inner.locations-grouped-view .badges-container, .blue-content-box.box-floating .content-list.locations-grouped-view .badges-container, #index-panel #index-panel-body.locations-grouped-view .badges-container {
    grid-template-columns: repeat(3, minmax(0, var(--inventory-badge-column-target)));
  }
}

.locations-inline-search-input {
  width: 100%;
  max-width: 100%;
  display: block;
  border: 2px solid var(--ui-primary);
  border-radius: 9px;
  background: rgb(255, 255, 255);
  color: var(--ui-text-on-light);
  font-family: var(--font-ui);
  font-size: 0.84rem;
  line-height: 1.2;
  padding: 6px 8px;
  outline: none;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.locations-inline-search-input:focus {
  border-color: var(--ui-text-on-light);
}

.badge-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 calc(33.3333% - 6.66667px);
  min-width: 88px;
  max-width: 108px;
  background: white;
  border-radius: 12px;
  padding: 10px 8px;
  box-shadow: rgb(212, 216, 211) 0px 4px 0px 1px;
  position: relative;
  align-items: center;
}

.badge-item.clickable {
  cursor: pointer;
}

.badge-item.clickable:focus-visible {
  outline: 3px solid var(--ui-text-on-light);
  outline-offset: 3px;
}

.badge-icon {
  position: relative;
  width: 78%;
  height: 60%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: visible;
  background: rgb(212, 216, 211);
  padding: 4%;
}

.badge-icon > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.badge-item.locked .badge-icon > img:first-child {
  opacity: 0.4;
}

.badge-checkmark {
  position: absolute;
  top: -10%;
  right: -10%;
  filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 2px 4px);
  z-index: 3;
  width: 35% !important;
  height: 35% !important;
  object-fit: contain !important;
}

.badge-lock {
  position: absolute;
  top: -10%;
  right: -10%;
  filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 2px 4px);
  z-index: 3;
  width: 35% !important;
  height: 35% !important;
  object-fit: contain !important;
}

#index-panel #index-panel-body.locations-grouped-view .index-tourist-entry .badge-lock, #index-panel #index-panel-body.locations-grouped-view .index-tourist-entry .badge-checkmark {
  display: none;
}

.index-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px 10px;
}

.index-category-chip {
  border: 1.5px solid rgb(87, 71, 47);
  border-radius: 14px;
  background: rgb(255, 248, 231);
  color: rgb(64, 52, 38);
  padding: 5px 10px;
  font: inherit;
  cursor: pointer;
}

.index-category-chip[aria-pressed="true"] {
  background: rgb(245, 206, 101);
  font-weight: 700;
}

.index-category-chip:focus-visible {
  outline: rgb(35, 109, 131) solid 3px;
  outline-offset: 2px;
}

#index-panel .index-tourist-entry .badge-icon {
  background: transparent;
}

#index-panel .index-tourist-entry .badge-icon > img:first-child {
  opacity: 1;
  filter: drop-shadow(white 0px 0px 2px) drop-shadow(rgba(31, 36, 26, 0.28) 2px 3px 2px);
}

.badge-label {
  font-size: var(--font-size-badge-label-final);
  font-weight: 800;
  color: var(--text-blue);
  text-align: center;
  font-family: var(--font-ui);
  line-height: 1.15;
  width: 100%;
  min-height: 2.35em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media only screen and (max-width: 420px) {
  .progress-summary-sticky.is-compact .progress-character-image {
    width: 54px;
    max-height: 54px;
  }

  .progress-character-image {
    width: min(56%, 150px);
    max-height: 150px;
  }

  .progress-character-title {
    font-size: 1.28em;
  }

  .progress-character-description {
    font-size: 0.84em;
  }

  .badge-item {
    flex-basis: calc(50% - 5px);
    max-width: none;
  }
}

@media only screen and (max-width: 1024px) {
  .blue-content-box.box-floating {
    --panel-safe-top: 30px;
    --panel-safe-left: 25px;
    --panel-safe-right: 25px;
    --panel-safe-bottom: 16px;
    width: 91%;
  }

  .blue-content-box.box-floating.box-locations-mode {
    width: min(95%, 500px);
  }

  .progress-container {
    --inventory-frame-corner: clamp(30px, 7.2vw, 44px);
    --inventory-frame-inset-top: -10px;
    --inventory-frame-inset-right: -8px;
    --inventory-frame-inset-bottom: -10px;
    --inventory-frame-inset-left: -8px;
    --inventory-height-collapsed: 46%;
    --inventory-height-expanded: 92%;
    width: calc(100% - 40px);
    max-width: 430px;
  }
}

.progress-container-inner::-webkit-scrollbar, .blue-content-box-inner::-webkit-scrollbar {
  width: 10px;
}

.progress-container-inner::-webkit-scrollbar-track, .blue-content-box-inner::-webkit-scrollbar-track {
  background: rgb(221, 220, 222);
}

.progress-container-inner::-webkit-scrollbar-thumb, .blue-content-box-inner::-webkit-scrollbar-thumb {
  background: var(--ui-primary-active);
  border-radius: 5px;
  border: 2px solid var(--ui-primary-active);
}

.progress-container-inner::-webkit-scrollbar-thumb:hover, .blue-content-box-inner::-webkit-scrollbar-thumb:hover {
  background: rgb(221, 220, 222);
}

.progress-container-inner, .blue-content-box-inner {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-primary-active) transparent;
}

/* Article blocks, galleries and media */
.image-gallery {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.gallery-image {
  flex: 0 0 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
}

.image-gallery-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 999;
  padding: 4px 8px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
}

.image-gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: var(--cursor-pointer);
  transition: 0.2s;
}

.image-gallery-dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

.image-gallery-dot.active {
  background-color: white;
  width: 24px;
  border-radius: 4px;
}

.image-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: var(--cursor-pointer);
  z-index: 999;
  transition: 0.2s;
  background-size: 20px auto;
  background-repeat: no-repeat;
  background-position: center center;
}

.image-gallery-nav:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.image-gallery-nav.prev {
  left: 10px;
  background-image: url("../img/ui/arrow_back.png");
}

.image-gallery-nav.next {
  right: 10px;
  background-image: url("../img/ui/arrow_forward.png");
}

.article-carousel .carousel-toolbar, .article-carousel .carousel-replace-btn, .article-carousel .carousel-edit-btn, .article-carousel .carousel-delete-btn, .article-carousel [data-editor-only], .article-carousel [data-cms-editor-control], .article-carousel button:not(.carousel-nav):not(.carousel-prev):not(.carousel-next) {
  display: none !important;
}

.text-block {
  margin-top: 5%;
  line-height: 1.2;
}

.image-block {
  margin-top: 3%;
}

.content-image, .gallery-img {
  height: 150px;
  max-height: 150px;
  min-height: 150px;
  overflow: hidden;
  position: relative;
  text-align: center;
  margin-top: 5%;
}

.content-image .bg, .gallery-img .bg {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: blur(10px) brightness(1.1);
  transform: scale(1.1);
  z-index: 20;
}

.content-image .front, .gallery-img .front {
  position: relative;
  height: 100%;
  object-fit: contain;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px;
  z-index: 100;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  width: 64px;
  height: 100%;
  z-index: 9999;
  transform: translateY(-50%);
  background-size: 32px auto;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: var(--cursor-pointer);
}

.gallery-nav-dots {
  position: absolute;
  bottom: 0px;
  padding: 2px;
  left: 50%;
  max-height: 32px;
  width: fit-content;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 8px;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.gallery-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 32px;
  background-color: rgba(255, 255, 255, 0.667);
  cursor: var(--cursor-pointer);
}

.gallery-nav-dot.active {
  background-color: white;
}

.gallery-nav.left {
  left: 0px;
  background-image: url("../img/ui/arrow_back.png");
}

.gallery-nav.right {
  right: 0px;
  background-image: url("../img/ui/arrow_forward.png");
}

.content-gallery-wrapper {
  width: 100%;
  height: 150px;
  max-height: 150px;
  min-height: 150px;
  position: relative;
  overflow: hidden;
}

.content-gallery {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 100%;
}

.gallery-img {
  flex: 0 0 100%;
}

.blue-content-box.welcome-infobox .content-image, .blue-content-box.welcome-infobox .gallery-img {
  width: 90% !important;
  max-width: 90% !important;
  height: auto !important;
  min-height: 0px !important;
  max-height: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
  border-radius: 0px !important;
  background-color: transparent !important;
}

.blue-content-box.welcome-infobox .content-image .bg, .blue-content-box.welcome-infobox .gallery-img .bg {
  display: none !important;
}

.blue-content-box.welcome-infobox .content-image .front, .blue-content-box.welcome-infobox .gallery-img .front {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  display: block !important;
}

.blue-content-box.welcome-infobox .content-gallery-wrapper, .blue-content-box.welcome-infobox .content-gallery {
  width: 90% !important;
  max-width: 90% !important;
  height: auto !important;
  min-height: 0px !important;
  max-height: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.content-video {
  margin: 18px 0px;
  width: 100%;
}

.content-audio {
  min-height: 54px;
  margin: 18px 0px;
}

audio::-webkit-media-controls-panel, audio::-webkit-media-controls-enclosure {
  background: transparent !important;
}

.content-text {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.35;
}

.content-text p {
  margin: 0px 0px 0.75em;
}

.content-text h2, .content-text h3, .content-text h4 {
  margin: 1em 0px 0.35em;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.15;
}

.content-text h2:first-child, .content-text h3:first-child, .content-text h4:first-child {
  margin-top: 0px;
}

.content-text h2 {
  font-size: 1.35em;
}

.content-text h3 {
  font-size: 1.2em;
}

.content-text h4 {
  font-size: 1.08em;
}

.content-text blockquote {
  margin: 0px 0px 1em;
  padding: 0.65em 0.8em;
  border-left: 4px solid var(--ui-primary-active);
  border-radius: 0px 8px 8px 0px;
  background: rgba(var(--ui-primary-active-rgb), 0.09);
}

.content-text blockquote > :last-child {
  margin-bottom: 0px;
}

.content-text ul, .content-text ol {
  margin: 0.35em 0px 1em;
  padding-inline-start: 1.5em;
}

.content-text ul {
  list-style: outside disc;
}

.content-text ol {
  list-style: outside decimal;
}

.content-text li {
  margin: 0.3em 0px;
  padding-inline-start: 0.15em;
}

.content-text strong, .content-text b {
  font-family: inherit;
  font-weight: 700 !important;
}

.content-text > :last-child {
  margin-bottom: 0px;
}

.content-list {
  overflow: hidden auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 5%;
  box-sizing: border-box;
  width: 100%;
}

.blue-content-box .content-text, .blue-content-box .text-block {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  max-width: 90%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.blue-content-box .content-image, .blue-content-box .gallery-img, .blue-content-box .content-video, .blue-content-box .content-audio, .blue-content-box .content-gallery-wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  max-width: 90%;
}

.content-list::-webkit-scrollbar, #game-ui .container-inner::-webkit-scrollbar {
  width: 4px;
  z-index: 8192;
}

.content-list::-webkit-scrollbar-track, #game-ui .container-inner::-webkit-scrollbar-track {
  background-color: var(--ui-surface-muted);
}

.content-list::-webkit-scrollbar-thumb, #game-ui .container-inner::-webkit-scrollbar-thumb {
  background-color: rgb(181, 49, 53);
  border-radius: 4px;
  box-shadow: rgb(207, 168, 169) 0px 0px 0px 1px inset;
}

.location-link {
  position: relative;
  justify-content: start;
  width: fit-content;
  background-color: transparent;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
  padding: 8px 10px;
  transform: translateY(0px);
  color: black;
}

.location-link-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  align-items: center;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.267) 0px 4px 4px;
}

.location-link-wrapper:hover {
  cursor: var(--cursor-pointer);
}

.location-icon {
  max-width: 64px;
  max-height: 64px;
  z-index: 100;
  background-color: rgb(238, 238, 238);
  padding: 8px;
}

.list-category {
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  padding: 8px 0px;
  color: black;
}

.content-item {
  width: 100%;
}

#content-address-link {
  cursor: var(--cursor-pointer);
  display: flex;
  transition: filter 0.2s linear;
  max-width: 100%;
}

.content-address-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.content-address-wrap {
  background-color: var(--color-bg);
  display: flex;
  max-width: 90%;
}

#content-address-icon {
  width: 16px;
  height: 16px;
  transform-origin: center bottom;
  transform: scale(1.5);
  margin: 0px 8px;
}

#content-address {
  font-size: 13px;
  text-decoration: none;
  color: var(--ui-text-on-light);
  overflow: hidden;
  word-break: keep-all;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
  cursor: var(--cursor-pointer);
}

#content-address-link:hover {
  filter: brightness(1.1);
}

#content-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.blue-content-box.welcome-infobox #content-search {
  width: 100%;
  margin: 0px;
}

#content-search-input {
  width: 100%;
  padding: 4px 8px;
  border: 2px solid var(--color-bg);
  border-radius: 7px;
  font-size: 16px;
  line-height: 1.5;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.267) 0px 4px 4px;
}

#btn-clear-search {
  position: absolute;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  right: 0px;
  cursor: var(--cursor-pointer);
  padding: 0px;
  border: 0px;
  border-radius: 6px;
  background-color: var(--color-bg);
  transform: translate(-50%, -50%);
  top: 50%;
  transition: 0.1s linear;
}

#btn-clear-search img {
  display: block;
  width: 20px;
  height: 20px;
}

#btn-clear-search:hover {
  background-color: var(--color-bg-highlight);
}

.pin-icon {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 100;
}

#btn-search {
  display: grid;
  place-items: center;
  padding: 8px;
  background-color: var(--color-bg);
  border-radius: 7px;
  border: 2px solid white;
  box-shadow: rgba(0, 0, 0, 0.267) 0px 4px 4px;
  cursor: var(--cursor-pointer);
  transition: 0.1s linear;
}

#btn-search img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#btn-search:hover {
  background-color: var(--color-bg-highlight);
}

#btn-clear-search:focus-visible, #btn-search:focus-visible {
  outline: 3px solid var(--ui-primary-active, #f2b134);
  outline-offset: 3px;
}

.search-input {
  width: 100%;
  position: relative;
}

.blue-box-location-pin {
  position: absolute;
  top: var(--box-pin-top, 5%);
  left: var(--box-pin-left, 10%);
  padding: 2px 5% 2px 0px;
  background: transparent;
  filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 3px 4px);
  display: flex;
  gap: 8px;
  z-index: 1000;
  margin-bottom: 8px;
  flex-flow: row;
  width: fit-content;
  align-items: center;
  isolation: isolate;
}

.blue-box-location-pin::before {
  content: "";
  position: absolute;
  inset: 0px;
  z-index: -1;
  background: var(--color-location-link);
  clip-path: polygon(0px 0px, 100% 0px, 95% 50%, 100% 100%, 0px 100%);
}

.blue-content-box.welcome-infobox .blue-box-location-pin {
  left: calc(var(--panel-safe-left) + var(--infobox-content-inline-padding));
  padding-left: 0px;
  padding-right: 0px;
  gap: 6px;
}

.blue-box-location-pin img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.blue-box-location-pin #blue-box-location-text {
  display: inline-block;
  max-width: min(62vw, 420px);
  color: rgb(255, 255, 255);
  text-decoration: underline 1px;
  text-underline-offset: 2px;
  line-height: 1.2;
  word-break: break-word;
  font-size: 14px;
  font-weight: 600;
}

.blue-content-box.welcome-infobox .blue-box-location-pin img {
  margin: 0px !important;
}

.blue-content-box.welcome-infobox #content-address-link, .blue-content-box.welcome-infobox #content-search, .blue-content-box.welcome-infobox .content-address-wrap, .blue-content-box.welcome-infobox .content-address-inner {
  width: 100%;
  max-width: 100%;
}

/* Panel shell: geometry, header, body and state */
.ui-layer-tokens, :root {
  --ui-layer-scene-overlay: 40;
  --ui-layer-panel: 75;
  --ui-layer-popup: 90;
  --ui-layer-control-buttons: 70;
  --ui-layer-loading: 100;
  --ui-panel-z: var(--ui-layer-panel);
}

.ui-panel {
  --ui-panel-width: min(90vw, 720px);
  --ui-panel-height: min(78dvh, 760px);
  --ui-panel-top: 8dvh;
  --panel-default-height: var(--ui-panel-height);
  --panel-default-top: var(--ui-panel-top);
  --panel-default-bottom: auto;
  --panel-default-left: 50%;
  --panel-default-right: auto;
  --panel-default-transform-closed: translateX(-50%) translateY(40px);
  --panel-default-transform-open: translateX(-50%) translateY(0);
  --ui-panel-radius: 30px;
  --ui-panel-safe-top: 34px;
  --ui-panel-safe-left: 8px;
  --ui-panel-safe-right: 8px;
  --ui-panel-safe-bottom: 18px;
  --ui-panel-title-cap-width: clamp(36px, 6.5vw, 52px);
  --ui-panel-body-padding: 16px;
  --panel-default-transform: translateX(-50%);
  --panel-gap: 14px;
  --panel-bottom-offset: 8px;
  --panel-radius: var(--ui-panel-radius);
  --panel-safe-top: var(--ui-panel-safe-top);
  --panel-safe-left: var(--ui-panel-safe-left);
  --panel-safe-right: var(--ui-panel-safe-right);
  --panel-safe-bottom: var(--ui-panel-safe-bottom);
  --panel-shell-top-inset: var(--ui-panel-safe-top);
  --panel-frame-corner: clamp(34px, 8vw, 52px);
  --panel-frame-top: var(--panel-safe-top);
  --panel-frame-right: var(--panel-safe-right);
  --panel-frame-bottom: var(--panel-safe-bottom);
  --panel-frame-left: var(--panel-safe-left);
  --panel-frame-inset-top: 0px;
  --panel-frame-inset-right: 0px;
  --panel-frame-inset-bottom: 0px;
  --panel-frame-inset-left: 0px;
  --panel-header-base-height: clamp(38px, 5.6dvh, 44px);
  --panel-header-height: var(--panel-header-base-height);
  --panel-header-half-height: calc(var(--panel-header-height) / 2);
  --panel-title-width: auto;
  --panel-title-strip-height: var(--panel-header-base-height);
  --panel-header-top: var(--panel-shell-top-inset);
  --panel-header-inline-left: calc(var(--ui-panel-safe-left) + var(--panel-shell-side-inset));
  --panel-header-inline-right: calc(var(--ui-panel-safe-right) + var(--panel-shell-side-inset));
  --panel-title-x: 0px;
  --panel-controls-x: 0px;
  --panel-shell-side-inset: clamp(8px, 1vw, 12px);
  --panel-content-inline-padding: clamp(6px, 2vw, 14px);
  --panel-shell-content-left: calc(var(--ui-panel-safe-left) + var(--panel-shell-side-inset));
  --panel-shell-content-right: calc(var(--ui-panel-safe-right) + var(--panel-shell-side-inset));
  --panel-shell-content-padding-x: var(--panel-content-inline-padding);
  --panel-shell-article-side-trim: 0px;
  --panel-shell-scrollbar-gutter: 0px;
  --panel-shell-pin-extra-inset: 4px;
  --infobox-content-inline-padding: var(--panel-content-inline-padding);
  --panel-title-cap-width: var(--ui-panel-title-cap-width);
  --panel-title-min-center: 94px;
  --panel-drag-size: calc(clamp(30px, 6.7vw, 44px) * 0.4);
  --panel-controls-gap: 8px;
  --panel-controls-measured-width: 0px;
  --panel-body-gap: 24px;
  --panel-body-extra-top: 0px;
  --panel-location-link-offset: 12px;
  --panel-body-top: calc(
    var(--panel-header-top) + var(--panel-header-height) + var(--panel-body-gap) + var(--panel-body-extra-top)
  );
  --panel-body-bottom: calc(
    var(--ui-panel-safe-bottom) + var(--panel-gap) + var(--panel-bottom-offset)
  );
  --panel-minimized-height: clamp(56px, 8.5dvh, 72px);
  --panel-minimized-bottom: 2dvh;
  --panel-header-min-height: var(--panel-header-height);
  position: absolute;
  top: var(--panel-default-top);
  right: var(--panel-default-right);
  bottom: var(--panel-default-bottom);
  left: var(--panel-default-left);
  width: var(--ui-panel-width);
  height: var(--panel-default-height);
  max-height: 90dvh;
  transform: var(--panel-default-transform-closed);
  opacity: 0;
  pointer-events: none;
  z-index: var(--ui-panel-z);
  isolation: isolate;
  transition: opacity 0.22s, transform 0.22s;
}

.ui-panel.is-open, .ui-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: var(--panel-default-transform-open);
}

.ui-panel.is-closing {
  opacity: 0;
  pointer-events: none;
  transform: var(--panel-default-transform-open);
}

.ui-panel.panel-motion--entering, .ui-panel.panel-motion--exiting {
  pointer-events: none;
  transition: none;
}

.ui-panel[data-panel-resizable="true"].box-half:not(.box-dragged) {
  height: var(--panel-default-height) !important;
}

.ui-panel[data-panel-resizable="true"].box-dragging, .ui-panel[data-panel-resizable="true"].box-dragging * {
  cursor: grabbing !important;
}

.ui-panel[data-panel-resizable="true"].box-dragging, .ui-panel[data-panel-resizable="true"].box-dragged, .ui-panel[data-panel-resizable="true"].box-dragged.show, .ui-panel[data-panel-resizable="true"].box-dragged.is-open, .ui-panel[data-panel-resizable="true"].box-dragged.is-closing {
  transform: none !important;
}

.ui-panel[data-panel-resizable="true"].box-dragged {
  bottom: auto !important;
}

.ui-panel__toolbar, .ui-panel__body, .ui-panel__footer {
  position: absolute;
  left: 34px;
  right: 34px;
  z-index: 2;
}

.ui-panel__toolbar {
  top: 72px;
}

.ui-panel__body {
  top: 84px;
  bottom: 24px;
  overflow-y: auto;
  padding: 0 var(--ui-panel-body-padding) var(--ui-panel-body-padding);
  box-sizing: border-box;
  scrollbar-color: var(--ui-primary-active) transparent;
}

.ui-panel__footer {
  bottom: 18px;
}

.ui-panel__body::-webkit-scrollbar {
  width: 8px;
}

.ui-panel__body::-webkit-scrollbar-track {
  background: transparent;
}

.ui-panel__body::-webkit-scrollbar-thumb {
  background: rgba(var(--ui-primary-active-rgb), 0.75);
  border-radius: 999px;
}

.ui-panel__body .content-item + .content-item {
  margin-top: 14px;
}

.ui-panel__body .content-text, .ui-panel__body .text-block {
  width: 100%;
  max-width: 100%;
  margin: 0px auto;
  color: var(--ui-text-on-light);
  text-align: left;
}

.ui-panel__body .content-image, .ui-panel__body .gallery-img, .ui-panel__body .content-video, .ui-panel__body .content-audio, .ui-panel__body .content-gallery-wrapper {
  width: 100%;
}

.ui-panel.ui-panel--floating-shell {
  --ui-panel-width: min(
    calc(100% - var(--screen-safe-left) - var(--screen-safe-right)),
    720px
  );
  --panel-frame-inset-top: -10px;
  --panel-frame-inset-right: -10px;
  --panel-frame-inset-bottom: -12px;
  --panel-frame-inset-left: -10px;
  --panel-header-top: var(--notebook-header-offset);
  --panel-frame-top: calc(var(--panel-header-half-height) + var(--panel-frame-inset-top));
  --panel-frame-right: var(--panel-frame-inset-right);
  --panel-frame-bottom: var(--panel-frame-inset-bottom);
  --panel-frame-left: var(--panel-frame-inset-left);
  width: var(--ui-panel-width);
  transition: height 0.26s, opacity 0.2s;
}

.ui-panel.ui-panel--floating-shell.box-locations-mode {
  width: min(
    calc(100% - var(--screen-safe-left) - var(--screen-safe-right)),
    520px
  );
}

.ui-panel.ui-panel--floating-shell.show:not(.from-bottom):not(.box-half):not(.box-minimized):not(.box-dragged) {
  top: var(--panel-default-top) !important;
  bottom: var(--panel-default-bottom) !important;
}

.ui-panel.ui-panel--floating-shell:not(.box-dragged) {
  top: var(--panel-default-top) !important;
  left: var(--panel-default-left) !important;
  right: var(--panel-default-right) !important;
  bottom: var(--panel-default-bottom) !important;
}

.ui-panel.ui-panel--floating-shell.show:not(.box-dragged) {
  transform: var(--panel-default-transform) !important;
}

.ui-panel.ui-panel--floating-shell.box-dragged {
  bottom: auto !important;
}

.ui-panel.ui-panel--floating-shell::before, .ui-panel.ui-panel--floating-shell::after {
  display: none;
}

.ui-panel.ui-panel--floating-shell .blue-content-box-closeBtn {
  display: none;
}

.ui-panel.ui-panel--floating-shell .floating-shell-frame {
  position: absolute;
  top: var(--panel-frame-top);
  right: var(--panel-frame-right);
  bottom: var(--panel-frame-bottom);
  left: var(--panel-frame-left);
  display: grid;
  grid-template-columns: var(--panel-frame-corner) 1fr var(--panel-frame-corner);
  grid-template-rows: var(--panel-frame-corner) 1fr var(--panel-frame-corner);
  pointer-events: none;
  z-index: 0;
}

.ui-panel.ui-panel--floating-shell .floating-shell-frame .slice {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.ui-panel.ui-panel--floating-shell .floating-shell-frame .slice.tl {
  background-image: url("../img/newui/infobox/9slice/tl.png");
}

.ui-panel.ui-panel--floating-shell .floating-shell-frame .slice.t {
  background-image: url("../img/newui/infobox/9slice/t.png");
}

.ui-panel.ui-panel--floating-shell .floating-shell-frame .slice.tr {
  background-image: url("../img/newui/infobox/9slice/tr.png");
}

.ui-panel.ui-panel--floating-shell .floating-shell-frame .slice.l {
  background-image: url("../img/newui/infobox/9slice/l.png");
}

.ui-panel.ui-panel--floating-shell .floating-shell-frame .slice.c {
  background-image: url("../img/newui/infobox/9slice/c.png");
}

.ui-panel.ui-panel--floating-shell .floating-shell-frame .slice.r {
  background-image: url("../img/newui/infobox/9slice/r.png");
}

.ui-panel.ui-panel--floating-shell .floating-shell-frame .slice.bl {
  background-image: url("../img/newui/infobox/9slice/bl.png");
}

.ui-panel.ui-panel--floating-shell .floating-shell-frame .slice.b {
  background-image: url("../img/newui/infobox/9slice/b.png");
}

.ui-panel.ui-panel--floating-shell .floating-shell-frame .slice.br {
  background-image: url("../img/newui/infobox/9slice/br.png");
}

.ui-panel.ui-panel--floating-shell .blue-content-box-header {
  position: absolute;
  top: var(--panel-header-top);
  left: var(--panel-header-inline-left);
  right: var(--panel-header-inline-right);
  width: auto;
  min-height: var(--panel-header-height);
  z-index: 3;
}

.ui-panel.ui-panel--floating-shell .blue-content-box-title {
  font-weight: 700;
  position: absolute;
  top: 0px;
  bottom: auto;
  left: var(--panel-title-x);
  right: auto;
  transform: none;
  width: var(--panel-title-width);
  min-width: calc(var(--panel-title-min-center) + (2 * var(--panel-title-cap-width)));
  max-width: calc(
    100% - var(--panel-controls-measured-width) - var(--panel-controls-gap)
  );
  height: var(--panel-title-strip-height);
  min-height: var(--panel-title-strip-height);
  padding: 0 calc(var(--panel-drag-size) + 18px) 2px 18px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  cursor: default;
  border: 0px;
  background: transparent;
  overflow: visible;
}

.ui-panel.ui-panel--floating-shell .panel-title-bg {
  position: absolute;
  top: 0px;
  bottom: 0px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 0;
}

.ui-panel.ui-panel--floating-shell .panel-title-bg-left {
  left: 0px;
  width: calc(var(--panel-title-cap-width) + 1px);
  background-image: url("../img/newui/infobox/TITLE-SLIM-left.png");
}

.ui-panel.ui-panel--floating-shell .panel-title-bg-center {
  left: calc(var(--panel-title-cap-width) - 1px);
  right: calc(var(--panel-title-cap-width) - 1px);
  background-image: url("../img/newui/infobox/TITLE-SLIM-center.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.ui-panel.ui-panel--floating-shell .panel-title-bg-right {
  right: 0px;
  width: calc(var(--panel-title-cap-width) + 1px);
  background-image: url("../img/newui/infobox/TITLE-SLIM-right.png");
}

.ui-panel.ui-panel--floating-shell .panel-title-text {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0px;
  width: 100%;
  max-width: 100%;
  text-align: left;
  font-weight: 700;
  display: block;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.08;
  max-height: none;
}

.ui-panel.ui-panel--floating-shell[data-panel-title-rows="2"] .blue-content-box-title {
  align-items: flex-start;
  padding-top: 4px;
}

.ui-panel.ui-panel--floating-shell[data-panel-title-rows="2"] .panel-title-text, .ui-panel.ui-panel--floating-shell[data-panel-title-rows="3"] .panel-title-text {
  width: 100%;
  max-width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: hidden;
  text-overflow: clip;
}

.ui-panel.ui-panel--floating-shell[data-panel-title-rows="2"] .panel-title-text {
  -webkit-line-clamp: 2;
  max-height: calc(2.16em);
}

.ui-panel.ui-panel--floating-shell[data-panel-title-rows="3"] .blue-content-box-title {
  align-items: flex-start;
  padding-top: 4px;
}

.ui-panel.ui-panel--floating-shell[data-panel-title-rows="3"] .panel-title-text {
  -webkit-line-clamp: 3;
  max-height: calc(3.24em);
}

.ui-panel.ui-panel--floating-shell .panel-title-drag {
  display: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--panel-drag-size);
  height: var(--panel-drag-size);
  flex: 0 0 var(--panel-drag-size);
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.ui-panel.ui-panel--floating-shell[data-panel-draggable="true"] .blue-content-box-title {
  cursor: grab;
}

.ui-panel.ui-panel--floating-shell[data-panel-draggable="true"] .panel-title-drag {
  display: inline-flex;
}

.ui-panel.ui-panel--floating-shell .panel-title-drag img {
  width: 100%;
  height: 100%;
}

.ui-panel.ui-panel--floating-shell .panel-title-drag:active {
  cursor: grabbing;
}

.ui-panel.ui-panel--floating-shell .panel-controls {
  display: flex;
  position: absolute;
  right: var(--panel-controls-x);
  top: 0px;
  bottom: 0px;
  transform: none;
  z-index: 5;
  align-items: center;
  gap: 0px;
}

.ui-panel .panel-btn--resize {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  isolation: isolate;
}

.ui-panel .panel-btn--resize + .panel-btn--close {
  position: relative;
  z-index: 2;
  margin-left: 0px;
}

@media (hover: none) {
  .ui-panel .panel-btn:hover {
    transform: none;
  }
}

.ui-panel .panel-btn--resize::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 50%;
  width: 74.2%;
  transform: translateX(-50%);
  background: url("../img/ui/bookmark-pull-red.png") center center / 100% 100% no-repeat;
  clip-path: polygon(11.5% 0px, 55.7% 9.7%, 100% 0px, 97.8% 59.7%, 93.5% 64.5%, 94.3% 100%, 0px 100%, 0px 64.5%, 11.5% 58.1%);
  z-index: -1;
}

.ui-panel .panel-btn--resize img {
  position: relative;
  width: 68%;
  height: 68%;
  margin: 0px auto;
  object-fit: contain;
  opacity: 0.3;
}

.ui-panel .panel-btn--close img {
  object-fit: contain;
}

#location-btn-minimize, #help-btn-minimize, #index-btn-minimize {
  display: none;
}

.ui-panel.ui-panel--floating-shell .floating-content-panel__body {
  top: var(--panel-body-top);
  right: var(--panel-shell-content-right);
  bottom: var(--panel-body-bottom);
  left: var(--panel-shell-content-left);
  background: transparent;
  padding-top: 0px;
  padding-right: calc(var(--panel-shell-content-padding-x) + var(--panel-shell-scrollbar-gutter));
  padding-bottom: 10px;
  padding-left: var(--panel-shell-content-padding-x);
  box-sizing: border-box;
  transition: opacity 0.25s;
  scrollbar-gutter: stable;
  scrollbar-color: var(--ui-primary-active) transparent;
}

.ui-panel.ui-panel--floating-shell .floating-content-panel__body > .content-item:first-child {
  margin-top: 0px !important;
}

.ui-panel.ui-panel--floating-shell .content-image, .ui-panel.ui-panel--floating-shell .gallery-img, .ui-panel.ui-panel--floating-shell .image-block, .ui-panel.ui-panel--floating-shell .text-block {
  margin-top: 0px;
}

.ui-panel.ui-panel--floating-shell .content-text, .ui-panel.ui-panel--floating-shell .text-block {
  box-sizing: border-box;
  width: calc(100% - (2 * var(--panel-shell-article-side-trim))) !important;
  max-width: calc(100% - (2 * var(--panel-shell-article-side-trim))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ui-panel.ui-panel--floating-shell .content-text figure, .ui-panel.ui-panel--floating-shell .content-text .wp-block-image, .ui-panel.ui-panel--floating-shell .content-text .wp-caption, .ui-panel.ui-panel--floating-shell .content-text [class*="wp-block-image"], .ui-panel.ui-panel--floating-shell .content-text [class*="wp-caption"] {
  display: contents !important;
  margin: 0px !important;
  padding: 0px !important;
  border: 0px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ui-panel.ui-panel--floating-shell .content-text figcaption {
  display: none !important;
}

.ui-panel.ui-panel--floating-shell .content-text img {
  display: block;
  width: auto;
  margin: 12px auto;
  max-width: min(100%, 760px) !important;
  height: auto !important;
}

.ui-panel.ui-panel--floating-shell .content-text p + img, .ui-panel.ui-panel--floating-shell .content-text img + p, .ui-panel.ui-panel--floating-shell .content-text figure + p, .ui-panel.ui-panel--floating-shell .content-text p + figure, .ui-panel.ui-panel--floating-shell .content-text .wp-block-image + p, .ui-panel.ui-panel--floating-shell .content-text p + .wp-block-image {
  margin-top: 16px;
}

.ui-panel.ui-panel--floating-shell .content-image, .ui-panel.ui-panel--floating-shell .gallery-img {
  width: calc(100% - (2 * var(--panel-shell-article-side-trim)));
  max-width: calc(100% - (2 * var(--panel-shell-article-side-trim)));
  height: auto;
  min-height: 0px;
  max-height: none;
  box-sizing: border-box;
  overflow: visible;
  border-radius: 0px;
  background: transparent;
  margin-left: auto;
  margin-right: auto;
}

.ui-panel.ui-panel--floating-shell .content-image .bg, .ui-panel.ui-panel--floating-shell .gallery-img .bg {
  display: none;
}

.ui-panel.ui-panel--floating-shell .content-image .front, .ui-panel.ui-panel--floating-shell .gallery-img .front {
  width: 100%;
  height: auto;
  object-fit: contain;
  box-shadow: none;
  border-radius: 0px;
}

.ui-panel.ui-panel--floating-shell .content-gallery-wrapper, .ui-panel.ui-panel--floating-shell .content-gallery, .ui-panel.ui-panel--floating-shell .gallery-img {
  height: auto;
  min-height: 0px;
  max-height: none;
}

.ui-panel.ui-panel--floating-shell .content-gallery-wrapper {
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - (2 * var(--panel-shell-article-side-trim))) !important;
  max-width: calc(100% - (2 * var(--panel-shell-article-side-trim))) !important;
}

.ui-panel.ui-panel--floating-shell .blue-box-location-pin {
  top: calc(var(--panel-header-top) + var(--panel-header-height) + var(--panel-location-link-offset));
  left: var(--panel-title-x);
}

.ui-panel.ui-panel--floating-shell.box-minimized {
  height: var(--panel-minimized-height) !important;
  bottom: var(--panel-minimized-bottom) !important;
}

.ui-panel.ui-panel--floating-shell.box-minimized::before {
  display: none;
}

.ui-panel.ui-panel--floating-shell.box-minimized .blue-content-box-header {
  left: var(--panel-header-inline-left);
  right: var(--panel-header-inline-right);
  width: auto;
  min-height: var(--panel-header-height);
  display: block;
  top: var(--panel-header-top) !important;
  transform: none !important;
}

.ui-panel.ui-panel--floating-shell.box-minimized .blue-content-box-title {
  position: absolute;
  top: 0px;
  bottom: auto;
  left: var(--panel-title-x);
  right: auto;
  transform: none;
  width: var(--panel-title-width);
  max-width: calc(
    100% - var(--panel-controls-measured-width) - var(--panel-controls-gap)
  );
  height: var(--panel-title-strip-height);
  min-height: var(--panel-title-strip-height);
  padding: 0 calc(var(--panel-drag-size) + 18px) 2px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.ui-panel.ui-panel--floating-shell.box-minimized[data-panel-title-rows="2"] .blue-content-box-title {
  align-items: flex-start;
  padding-top: 4px;
}

.ui-panel.ui-panel--floating-shell.box-minimized[data-panel-title-rows="3"] .blue-content-box-title {
  align-items: flex-start;
  padding-top: 4px;
}

.ui-panel.ui-panel--floating-shell.box-minimized .panel-title-bg {
  display: block;
}

.ui-panel.ui-panel--floating-shell.box-minimized .panel-title-drag {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.ui-panel.ui-panel--floating-shell.box-minimized .panel-controls {
  right: var(--panel-controls-x);
  top: 0px;
  bottom: 0px;
  transform: none;
  margin-left: 0px;
}

.ui-panel.ui-panel--floating-shell.box-minimized .blue-content-box-inner, .ui-panel.ui-panel--floating-shell.box-minimized .blue-box-location-pin {
  opacity: 0;
  pointer-events: none;
}

.ui-panel.ui-panel--floating-shell .floating-content-panel__body::-webkit-scrollbar {
  width: 8px;
}

.ui-panel.ui-panel--floating-shell .floating-content-panel__body::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
  display: none;
}

.ui-panel.ui-panel--floating-shell .floating-content-panel__body::-webkit-scrollbar-track {
  background: transparent;
}

.ui-panel.ui-panel--floating-shell .floating-content-panel__body::-webkit-scrollbar-thumb {
  background: var(--ui-primary-active);
  border-radius: 10px;
  border: 1px solid var(--ui-primary-active);
}

.ui-panel.ui-panel--floating-shell .floating-content-panel__body::-webkit-scrollbar-thumb:hover {
  background: var(--ui-panel-mid);
}

@media (max-width: 1024px) {
  .ui-panel {
    --ui-panel-width: min(94vw, 720px);
    --ui-panel-safe-top: 30px;
    --ui-panel-safe-left: 6px;
    --ui-panel-safe-right: 6px;
    --ui-panel-safe-bottom: 16px;
  }

  .ui-panel__toolbar, .ui-panel__body, .ui-panel__footer {
    left: 26px;
    right: 26px;
  }

  .ui-panel.ui-panel--floating-shell .blue-content-box-title {
    cursor: default;
  }

  .ui-panel.ui-panel--floating-shell .panel-title-drag {
    pointer-events: none;
    display: none !important;
  }
}

/* Location sheet, optional address and footer actions */
.ui-panel.ui-panel--paper-stack {
  --panel-frame-top: 12px;
  --paper-panel-content-inset: calc(
    var(--panel-shell-content-left) + var(--panel-shell-content-padding-x)
  );
  --paper-panel-title-top-offset: calc(
    var(--paper-panel-content-inset) + var(--panel-frame-top) -
      var(--panel-frame-left)
  );
  --paper-panel-title-content-gap: 24px;
  --panel-body-gap: calc(
    var(--paper-panel-title-top-offset) + var(--paper-panel-title-content-gap)
  );
  --paper-backplate-inset: 18px;
}

#location-panel {
  --location-title-top-offset: var(--paper-panel-title-top-offset);
  --panel-location-link-offset: calc(12px + var(--location-title-top-offset));
  --panel-location-link-height: 0px;
  --location-panel-footer-gap: 0px;
  --location-panel-footer-height: 0px;
  --location-panel-footer-space: 0px;
  --location-panel-footer-visual-drop: calc(
    (var(--panel-header-half-height) + var(--panel-frame-inset-top)) * 0.5
  );
  --location-panel-footer-width: clamp(188px, 23vw, 332px);
}

.ui-panel.ui-panel--paper-stack .paper-panel__visual-stack {
  position: absolute;
  z-index: auto;
}

.ui-panel.ui-panel--paper-stack .paper-panel__visual-stack::before {
  pointer-events: none;
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer {
  top: calc(var(--paper-backplate-reveal) + var(--paper-layer-inset));
  right: calc(var(--paper-backplate-reveal) + var(--paper-layer-inset));
  bottom: calc(var(--paper-backplate-reveal) + var(--paper-layer-inset));
  left: calc(var(--paper-backplate-reveal) + var(--paper-layer-inset));
  transform-origin: 50% 50%;
  overflow: visible;
  pointer-events: none;
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer::before, .ui-panel.ui-panel--paper-stack .paper-panel__layer::after {
  content: none !important;
  display: none !important;
  border: 0px !important;
  background: none !important;
  box-shadow: none !important;
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer--back-cw {
  z-index: 2;
  transform: rotate(1deg);
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer .slice {
  visibility: visible;
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer .slice.tl {
  background-image: url("../img/ui/location-notebook/9slice/tl.png");
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer .slice.t {
  background-image: url("../img/ui/location-notebook/9slice/t.png");
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer .slice.tr {
  background-image: url("../img/ui/location-notebook/9slice/tr.png");
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer .slice.l {
  background-image: url("../img/ui/location-notebook/9slice/l.png");
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer .slice.c {
  background-image: url("../img/ui/location-notebook/9slice/c.png");
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer .slice.r {
  background-image: url("../img/ui/location-notebook/9slice/r.png");
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer .slice.bl {
  background-image: url("../img/ui/location-notebook/9slice/bl.png");
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer .slice.b {
  background-image: url("../img/ui/location-notebook/9slice/b.png");
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer .slice.br {
  background-image: url("../img/ui/location-notebook/9slice/br.png");
}

.ui-panel.ui-panel--paper-stack {
  --paper-tab-lift: 14px;
}

.ui-panel.ui-panel--paper-stack .blue-content-box-title {
  z-index: 6;
}

.ui-panel.ui-panel--paper-stack .panel-controls {
  translate: none;
}

.ui-panel.ui-panel--paper-stack .panel-controls .panel-btn {
  overflow: visible;
}

.ui-panel.ui-panel--paper-stack .panel-controls {
  bottom: auto;
}

#location-panel[data-panel-title-rows] .panel-title-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--panel-title-rows);
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: hidden;
  max-height: calc(var(--panel-title-rows) * 1.08em);
}

.ui-panel.ui-panel--paper-stack .panel-btn--resize::before {
  content: none;
}

.ui-panel.ui-panel--paper-stack .panel-controls .panel-btn img {
  opacity: 1;
}

.ui-panel.ui-panel--paper-stack .panel-controls .panel-btn:focus-visible {
  outline: 3px solid var(--ui-sunflower);
  outline-offset: 2px;
  border-radius: 8px;
}

.ui-panel.ui-panel--paper-stack .blue-content-box-title {
  top: var(--paper-panel-title-top-offset) !important;
  align-items: flex-start !important;
  padding-top: 0px !important;
  padding-left: var(--panel-shell-content-padding-x) !important;
  border: 0px !important;
  border-radius: 0px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgb(23, 18, 15) !important;
}

.ui-panel.ui-panel--paper-stack .panel-title-bg {
  display: none !important;
  visibility: hidden !important;
}

.ui-panel.ui-panel--paper-stack .panel-title-text {
  color: var(--ui-ink) !important;
  font-size: calc((1em + 6.66667px) * var(--panel-header-scale)) !important;
  text-shadow: rgba(255, 255, 255, 0.55) 0px 1px 0px !important;
}

.ui-panel.ui-panel--paper-stack[data-panel-draggable="true"] .panel-title-drag {
  display: inline-flex !important;
  pointer-events: auto !important;
}

#location-panel .location-panel__mascot {
  position: absolute;
  top: calc(var(--paper-backplate-reveal) - clamp(118px, 16vw, 164px));
  left: calc(
    var(--paper-backplate-reveal) - var(--panel-frame-left) +
      clamp(26px, 5vw, 54px)
  );
  width: clamp(126px, 18vw, 180px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

#location-panel:not(.box-half):not(.box-minimized) .location-panel__mascot {
  top: calc(var(--paper-backplate-reveal) - clamp(88px, 10vw, 112px));
  width: clamp(96px, 12vw, 132px);
}

#location-panel.box-minimized .location-panel__mascot {
  display: none;
}

.ui-panel.ui-panel--paper-stack .floating-content-panel__body {
  z-index: 5;
}

#location-panel .blue-box-location-pin, #location-panel .location-panel__footer {
  z-index: 5;
}

#location-panel.location-panel--has-footer-action, #location-panel.location-panel--has-ar-action {
  --location-panel-footer-gap: 12px;
}

#location-panel .location-panel__footer {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

#location-panel.location-panel--has-footer-action .location-panel__footer, #location-panel.location-panel--has-ar-action .location-panel__footer {
  display: flex;
  gap: var(--location-panel-footer-gap);
}

#location-panel .location-panel__footer .start-game-btn {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  transform: translateY(var(--location-panel-footer-visual-drop));
  transform-origin: center top;
  opacity: 1;
  pointer-events: auto;
  z-index: auto;
  aspect-ratio: var(--start-game-btn-aspect-ratio);
  background-size: 100% 100%;
  width: min(100%, var(--location-panel-footer-width)) !important;
}

#location-panel .location-panel__footer .start-game-btn.hidden {
  display: none;
}

#location-panel.location-panel--has-footer-action.location-panel--has-ar-action .location-panel__footer .start-game-btn {
  flex: 1 1 140px;
  width: auto !important;
}

#location-panel.box-minimized .location-panel__footer {
  display: none;
}

#location-panel #content-address-link {
  display: none !important;
}

#location-panel #mark-qr {
  z-index: 3;
  display: none !important;
}

#location-panel #location-panel-pin.hidden {
  display: none !important;
}

#location-panel .blue-box-location-pin {
  box-sizing: border-box;
  overflow: visible;
}

#location-panel .blue-box-location-pin #blue-box-location-text {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#location-panel .content-image, #location-panel .gallery-img {
  box-sizing: border-box;
}

#location-panel .content-image::after, #location-panel .gallery-img::after {
  content: "";
  position: absolute;
  z-index: 102;
  top: -13px;
  left: 39%;
  width: 22%;
  height: 18px;
  background: rgba(248, 223, 173, 0.733);
  box-shadow: rgba(58, 42, 31, 0.133) 0px 1px 2px;
  transform: rotate(-3deg);
  pointer-events: none;
}

#location-panel #location-ar-button {
  min-height: 44px;
  min-width: 210px;
  aspect-ratio: auto;
  gap: 8px;
  border: 3px solid rgb(255, 255, 255);
  border-radius: 999px;
  background: var(--ui-primary-active);
  box-shadow: 2px 4px 0 var(--ui-panel-deep);
  color: rgb(255, 255, 255);
  font-family: var(--font-handwriting);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  white-space: nowrap;
  text-shadow: none;
}

#location-panel #location-ar-button::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background: url("../img/ui/tzjb-icons/tzjb-tip-ar.svg") center center / contain no-repeat;
}

@media (max-width: 1024px) {
  #location-panel .location-panel__mascot {
    top: calc(var(--paper-backplate-reveal) - clamp(108px, 34vw, 146px));
    left: calc(
      var(--paper-backplate-reveal) - var(--panel-frame-left) +
        clamp(18px, 7vw, 42px)
    );
    width: clamp(104px, 34vw, 152px);
  }

  #location-panel:not(.box-half):not(.box-minimized) .location-panel__mascot {
    top: calc(var(--paper-backplate-reveal) - clamp(78px, 24vw, 104px));
    width: clamp(88px, 26vw, 120px);
  }
}

#location-panel .location-empty-state {
  margin: 14px 0px 18px;
  padding: 18px 20px 16px 28px;
  border: 1px solid var(--ui-panel-border, #ccc5b7);
  border-radius: 5px;
  background: linear-gradient(90deg, transparent 0px, transparent 19px, rgb(215, 121, 107) 19px, rgb(215, 121, 107) 21px, transparent 21px), repeating-linear-gradient(0deg, rgb(242, 243, 236) 0px, rgb(242, 243, 236) 23px, rgb(217, 228, 223) 24px, rgb(217, 228, 223) 25px);
  box-shadow: rgba(58, 42, 31, 0.11) 2px 3px 0px;
  color: rgb(58, 42, 31);
}

#location-panel .location-empty-state h3 {
  margin: 0px 0px 8px;
  font-family: var(--font-handwriting);
  font-size: 1.45rem;
  line-height: 1.2;
}

#location-panel .location-empty-state p {
  margin: 0px;
  font-family: var(--font-ui);
  line-height: 1.5;
}

/* Help articles and paged guide */
#help-panel {
  --ui-panel-width: min(90vw, 720px);
  --help-welcome-footer-height: 48px;
  --help-welcome-footer-gap: 8px;
  z-index: var(--ui-layer-panel);
}

#help-panel.help-panel--has-footer .help-panel__body {
  bottom: calc(
    var(--help-welcome-footer-height) + var(--help-welcome-footer-gap)
  );
}

#help-panel .help-panel__footer {
  position: absolute;
  right: var(--panel-shell-content-right);
  bottom: 0px;
  left: var(--panel-shell-content-left);
  height: var(--help-welcome-footer-height);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 5;
}

#help-panel .help-panel__footer.hidden {
  display: none;
}

#help-panel #btn-explore {
  width: 128px;
  margin: 0px auto;
  font: inherit;
}

#help-panel.help-panel--welcome #help-panel-body .image-block img {
  width: min(220px, 65%) !important;
  max-width: 100% !important;
  height: auto !important;
}

#help-panel.box-minimized .help-panel__footer {
  opacity: 0;
  pointer-events: none;
}

#help-panel.help-panel--paged .help-panel__footer {
  display: none;
}

.welcome-pager {
  display: flex;
  flex-direction: column;
  min-height: min(62dvh, 520px);
  gap: 12px;
}

.welcome-pager__stage {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.welcome-pager__stage h2 {
  margin: 0px;
  font: 30px var(--font-handwriting);
  color: rgb(58, 42, 31);
}

.welcome-pager__stage p {
  margin: 0px;
  max-width: 38ch;
  line-height: 1.4;
  white-space: pre-line;
}

.welcome-pager__images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.welcome-pager__image {
  width: auto;
  max-width: min(100%, 360px);
  max-height: 230px;
  object-fit: contain;
  border: 5px solid rgb(255, 255, 255);
  box-shadow: rgb(58, 42, 31) 2px 3px 0px;
}

.welcome-pager__image[hidden] {
  display: none;
}

.welcome-pager__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.welcome-pager__controls button {
  min-width: 80px;
  min-height: 44px;
  border: 2px solid rgb(58, 42, 31);
  border-radius: 8px;
  background: rgb(242, 177, 52);
  color: rgb(58, 42, 31);
  font: 21px var(--font-handwriting);
  cursor: pointer;
}

.welcome-pager__controls button:disabled {
  opacity: 0.4;
  cursor: default;
}

.welcome-pager__controls button:focus-visible {
  outline: rgb(242, 177, 52) solid 3px;
  outline-offset: 2px;
}

.welcome-pager__controls span {
  font: 21px var(--font-handwriting);
}

/* Search viewport and result lists */
#index-panel {
  --index-panel-viewport-inline-extra: 0px;
  z-index: calc(var(--ui-layer-panel) + 1);
}

#index-panel .index-panel__viewport {
  top: var(--panel-body-top);
  right: calc(var(--panel-shell-content-right) + var(--index-panel-viewport-inline-extra));
  bottom: var(--panel-body-bottom);
  left: calc(var(--panel-shell-content-left) + var(--index-panel-viewport-inline-extra));
  width: auto;
  min-width: 0px;
  padding: 0px;
  overflow: hidden;
  box-sizing: border-box;
}

#index-panel .index-panel__layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  height: 100%;
  min-height: 0px;
  min-width: 0px;
  padding: 0px;
  box-sizing: border-box;
}

#index-panel .index-panel__body {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0px;
  min-width: 0px;
  overflow: hidden auto;
  padding: 0 var(--panel-content-inline-padding) 6px;
  box-sizing: border-box;
  scrollbar-color: var(--ui-primary-active) transparent;
}

#index-panel .index-panel__body::-webkit-scrollbar {
  width: 8px;
}

#index-panel .index-panel__body::-webkit-scrollbar-track {
  background: transparent;
}

#index-panel .index-panel__body::-webkit-scrollbar-thumb {
  background: var(--ui-primary-active);
  border-radius: 10px;
  border: 1px solid var(--ui-primary-active);
}

@media (max-width: 1024px) {
  #index-panel .index-panel__layout {
    padding: 0px;
  }

  #index-panel .index-panel__body {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Inventory shell and tabs */
#inventory-panel::before {
  display: none;
}

#inventory-panel.ui-panel {
  z-index: calc(var(--ui-layer-control-buttons) + 1);
  position: absolute;
  top: var(--inventory-anchor-top);
  left: 50%;
  height: min(var(--inventory-current-height), var(--inventory-shell-max-height));
  max-height: var(--inventory-shell-max-height);
  transform: translate(-50%, 40px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
}

#inventory-panel.ui-panel.show, #inventory-panel.ui-panel.is-open {
  transform: translate(-50%, 0px);
  opacity: 1;
}

#inventory-panel.ui-panel.is-closing {
  opacity: 0;
  transform: translate(-50%, 40px);
  pointer-events: none;
}

.inventory-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 4px;
  margin: 8px 0px 12px;
  border-bottom: 2px solid rgb(58, 42, 31);
}

.inventory-tabs [role="tab"] {
  min-height: 44px;
  padding: 5px 2px;
  border: 2px solid rgb(58, 42, 31);
  border-radius: 10px 10px 0px 0px;
  background: rgb(242, 243, 236);
  color: rgb(58, 42, 31);
  font-family: var(--font-handwriting);
  font-size: clamp(17px, 4vw, 23px);
  cursor: pointer;
}

.inventory-tabs [role="tab"][aria-selected="true"] {
  background: rgb(255, 217, 90);
  border-bottom-color: rgb(255, 217, 90);
}

.inventory-tabs [role="tab"]:focus-visible {
  outline: rgb(242, 177, 52) solid 3px;
  outline-offset: 2px;
}

.inventory-tabs [data-tab-count] {
  font-size: 0.7em;
}

#inventory-panel[data-tab="stories"] [data-tab-section]:not([data-tab-section="stories"]), #inventory-panel[data-tab="locations"] [data-tab-section]:not([data-tab-section="locations"]), #inventory-panel[data-tab="badges"] [data-tab-section]:not([data-tab-section="badges"]) {
  display: none;
}

#inventory-panel:is([data-tab="stories"], [data-tab="locations"]) .badges-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  max-width: none;
}

#inventory-panel:is([data-tab="stories"], [data-tab="locations"]) .badge-item {
  display: grid;
  grid-template-columns: 46px minmax(0px, 1fr);
  place-items: center start;
  gap: 12px;
  width: 100%;
  max-width: none;
  max-height: none;
  min-height: 58px;
  padding: 6px 10px;
  border: 1px solid rgb(212, 216, 211);
  border-radius: 8px;
  box-shadow: none;
}

#inventory-panel:is([data-tab="stories"], [data-tab="locations"]) .badge-icon {
  width: 46px;
  height: 46px;
  aspect-ratio: 1 / 1;
  padding: 0px;
}

#inventory-panel:is([data-tab="stories"], [data-tab="locations"]) .badge-label {
  display: block;
  width: auto;
  min-height: 0px;
  text-align: left;
  font-size: 15px;
  line-height: 1.25;
}

/* Notebook palette details for shared controls */
.ui-panel.ui-panel--floating-shell, #inventory-panel {
  --green-frame-art-inset: clamp(6px, 1.4vw, 9px);
  --green-frame-outer-width: clamp(2px, 0.5vw, 3px);
  --green-frame-mid-width: clamp(7px, 1.8vw, 10px);
  --green-frame-radius: clamp(20px, 5vw, 32px);
}

.ui-panel.ui-panel--floating-shell:not(.ui-panel--paper-stack) .floating-shell-frame .slice, #inventory-panel .progress-container-frame .slice {
  visibility: hidden;
}

.ui-panel.ui-panel--floating-shell:not(.ui-panel--paper-stack) .floating-shell-frame::before, #inventory-panel .progress-container-frame::before {
  content: "";
  position: absolute;
  inset: var(--green-frame-art-inset);
  box-sizing: border-box;
  border: var(--green-frame-outer-width) solid var(--panel-outer-color);
  border-radius: var(--green-frame-radius);
  background: var(--panel-inner-color);
  box-shadow: inset 0 0 0 var(--green-frame-mid-width) var(--panel-mid-color);
  pointer-events: none;
}

.ui-panel.ui-panel--floating-shell:not(.ui-panel--paper-stack) .blue-content-box-title {
  border: var(--green-frame-outer-width) solid var(--panel-outer-color);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--ui-primary) 0%,
    var(--ui-primary) 62%,
    var(--ui-primary-active) 100%
  );
  box-shadow: inset 0 0 0 3px var(--panel-mid-color);
}

.ui-panel.ui-panel--floating-shell:not(.ui-panel--paper-stack) .panel-title-bg {
  visibility: hidden;
}

.inventory-section + .inventory-section::before, .story-group-title::before, #storylines-container .storyline-item-title::after {
  background-image: none;
  background-color: var(--ui-primary-active);
  border-radius: 999px;
}

#unity-ui .btn-ui > img {
  filter: hue-rotate(275deg) saturate(0.75);
}

#unity-ui .btn-ui > img.tzjb-ui-icon {
  filter: none;
}

#unity-ui .btn-ui:hover > img, #unity-ui .btn-ui:hover > img.mute {
  filter: hue-rotate(275deg) saturate(0.75) brightness(1.08);
}

#unity-ui .btn-ui:hover > img.tzjb-ui-icon, #unity-ui .btn-ui:hover > img.tzjb-ui-icon.mute {
  filter: brightness(1.08);
}

#inventory-global-eye-toggle::before {
  filter: hue-rotate(275deg) saturate(0.75);
}

#inventory-global-eye-toggle > img {
  filter: none;
}

/* Notebook layout, artwork and component states */
:root {
  --v3-paper: #f2f3ec;
  --v3-ink: #3a2a1f;
  --v3-cover: #2f6b45;
  --v3-yellow: #f2b134;
  --v3-grid: rgba(95, 150, 190, .16);
  --v3-margin: rgba(163, 58, 50, .4);
  --button-panel-button-size: 50px;
  --button-panel-gap: 8px;
  --inventory-hud-score-button-width: 226px;
  --inventory-hud-score-button-height: 56px;
  --inventory-hud-score-button-aspect: 4.04;
  --inventory-score-panel-top: 14px;
}

#standard-hud .btn-ui, #unity-minimap-focus-ui .btn-ui {
  filter: drop-shadow(rgba(58, 42, 31, 0.3) 0px 3px 3px);
}

#standard-hud .btn-ui:focus-visible, #inventory-score-toggle:focus-visible {
  outline: 3px solid var(--v3-yellow);
  outline-offset: 3px;
}

#unity-ui {
  right: calc(var(--screen-safe-right) + 4px);
  width: 54px;
  max-width: 54px;
  z-index: calc(var(--ui-layer-control-buttons) + 1);
}

#unity-ui .unity-ui-buttons {
  align-items: center;
  margin-top: 0px !important;
}

#unity-ui .btn-ui {
  width: 50px;
  height: 50px;
}

#btn-active-tasks {
  width: 54px !important;
  height: 54px !important;
}

#active-tasks-count:not([hidden]) {
  background: #ffda45;
  color: #3a2a1f;
  border: 2px solid #3a2a1f;
  font: 400 16px/1 "Patrick Hand", cursive;
}

#camera-mode-control {
  width: 46px;
  height: 89px;
  gap: 0px;
  border: 0px;
  padding: 0px;
  border-radius: 0px;
  box-shadow: none;
  background: url("../img/v3/ui-canvas/ui-prikaz-2d-3d.svg") center center / contain no-repeat transparent;
}

#camera-mode-control[data-mode="2d"] {
  background-image: url("../img/v3/ui-canvas/ui-prikaz-2d-3d-2d.svg");
}

#camera-mode-control .btn-ui {
  flex: 0 0 44.5px;
  width: 46px;
  height: 44.5px;
  border-radius: 0px;
}

#camera-mode-control .btn-ui::before {
  content: none !important;
}

#camera-mode-control .hud-choice-label {
  opacity: 0;
  pointer-events: none;
}

#unity-left-ui .btn-ui, #left-map-controls {
  width: 50px;
}

#unity-left-ui .btn-ui {
  height: 50px;
}

#persistent-language-control {
  margin-top: 0px;
}

#inventory-score-panel {
  top: 14px;
  left: 50%;
  width: 226px;
  height: 56px;
  transform: translateX(-50%) rotate(-0.5deg);
}

#inventory-score-panel::before {
  inset: 0px;
  border: 2.5px solid var(--v3-ink);
  border-radius: 10px 14px 12px 10px;
  background: var(--v3-paper);
  box-shadow: 0 0 0 3px white, 0 6px 0 3px var(--v3-cover);
  transform: none;
}

#inventory-score-panel .inventory-score-icon--book {
  display: none;
}

#inventory-score-panel .inventory-score-icon--star {
  right: 6px;
  width: 35px;
  height: 35px;
  transform: none;
}

#inventory-score-panel .inventory-score-toggle-label {
  position: absolute;
  left: 114px;
  right: 44px;
  margin: 0;
  min-width: 0;
  max-width: none;
  justify-content: flex-end;
  font: 800 21px / 1 Nunito, sans-serif;
  font-variant-numeric: tabular-nums;
  transform: none;
}

#inventory-score-toggle {
  inset: 0px 0px 0px 112px;
}

.ui-panel.ui-panel--paper-stack {
  --paper-backplate-reveal: 10px;
  --paper-layer-inset: 5px;
  --bg-booklet: var(--v3-cover);
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer--front .slice.c {
  background-image: linear-gradient(90deg, transparent 22px, var(--v3-margin) 22px 23.5px, transparent 23.5px),
    repeating-linear-gradient(0deg, transparent 0 23px, var(--v3-grid) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--v3-grid) 23px 24px);
  background-color: var(--v3-paper);
  background-size: auto;
  background-repeat: repeat;
}

.ui-panel.ui-panel--paper-stack .panel-title-text, #active-tasks-title {
  font-family: "Patrick Hand", cursive;
  color: var(--v3-ink);
}

#inventory-panel.ui-panel {
  --inventory-anchor-top: 86px;
  width: min(368px, -16px + 100vw);
  max-width: 368px;
  --inventory-shell-max-height: calc(100dvh - 104px);
}

#inventory-panel .progress-container-frame .slice {
  background-image: none;
  background-color: var(--v3-cover);
}

#inventory-panel .progress-character-title, #inventory-panel .inventory-section-title-label, #inventory-panel .progressbar-text {
  font-family: "Patrick Hand", cursive;
}

#inventory-panel .inventory-tabs [role="tab"] {
  border: 0px;
  border-radius: 0px;
  background: transparent;
}

#active-tasks-panel {
  top: auto;
  bottom: calc(var(--screen-safe-bottom) + 18px);
  left: 12px;
  right: 12px;
  width: auto;
  max-width: 370px;
  margin: 0px auto;
  max-height: min(56dvh, 470px);
  padding: 16px 18px 18px 37px;
  border: 2.5px solid var(--v3-ink);
  border-radius: 12px 18px 18px 12px;
  background-color: var(--v3-paper);
  background-image: linear-gradient(90deg, transparent 22px, var(--v3-margin) 22px 23.5px, transparent 23.5px),
    repeating-linear-gradient(0deg, transparent 0 23px, var(--v3-grid) 23px 24px);
  box-shadow: 0 0 0 7px var(--v3-cover), 0 10px 24px rgba(0,0,0,.3);
}

#active-tasks-list li {
  border: 2px solid var(--v3-ink);
  border-radius: 8px;
  background: rgb(255, 253, 245);
  box-shadow: rgba(58, 42, 31, 0.22) 2px 3px 0px;
}

#index-panel .index-category-chips button {
  font-family: "Patrick Hand", cursive;
}

#loading-menu .loading-start__logo {
  content: url("../img/v3/logo-tzjb-bijeli.png");
}

#btn-notebook {
  width: 52px !important;
  height: 52px !important;
}

#btn-notebook img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.v3-empty-banner[hidden] {
  display: none;
}

.v3-empty-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 92px;
  padding: 5px 12px 5px 3px;
  border: 2px solid var(--v3-ink);
  border-radius: 9px;
  background: rgb(251, 231, 166);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px, rgba(58, 42, 31, 0.35) 2px 3px 0px;
  color: var(--v3-ink);
}

.v3-empty-banner img {
  display: block;
  flex: 0 0 66px;
  width: 66px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(rgb(255, 255, 255) 2px 0px) drop-shadow(rgb(255, 255, 255) -2px 0px) drop-shadow(rgb(255, 255, 255) 0px 2px) drop-shadow(rgb(255, 255, 255) 0px -2px);
}

.v3-empty-banner p {
  margin: 0px;
  font: 25px / 1.08 "Patrick Hand", cursive;
}

#inventory-empty-state {
  width: calc(100% - 18px);
  margin: 14px 9px 22px;
}

#active-tasks-geo-hint {
  margin: 8px 0px 20px;
}

#active-tasks-geo-hint p {
  font: 700 15px / 1.25 Nunito, sans-serif;
}

#active-tasks-geo-hint img {
  object-position: center bottom;
}

.notification {
  top: auto;
  bottom: 110px;
  min-height: 86px;
  padding: 16px 16px 16px 82px;
  border: 2.5px solid var(--v3-ink);
  border-radius: 8px 12px 10px 8px;
  background-color: var(--v3-paper);
  background-image: linear-gradient(90deg, transparent 79px, var(--v3-margin) 79px 81px, transparent 81px),
    repeating-linear-gradient(0deg, transparent 0 23px, var(--v3-grid) 23px 24px);
  box-shadow: 0 0 0 3px #fff, 4px 6px 0 var(--v3-cover);
  color: var(--v3-ink);
}

.notification.hidden {
  transform: translate(-50%, calc(100% + 28px));
}

.notification > .icon {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 58px;
  height: 58px;
  border: 0px;
  background: url("../img/v3/grga/grga-poruka-opcenito.webp") center center / contain no-repeat;
  color: transparent;
}

#notification-text {
  font: 700 19px / 1.2 Nunito, sans-serif;
}

.inventory-unlock-notification {
  top: auto;
  bottom: 110px;
  width: min(358px, -32px + 100vw);
  transform: translate(-50%, calc(100% + 250px));
}

.inventory-unlock-notification.is-visible {
  transform: translate(-50%, 0px);
}

.v3-unlock-grga, .v3-popup-grga {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 52px);
  height: 232px;
  max-width: 78vw;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(rgb(255, 255, 255) 2px 0px) drop-shadow(rgb(255, 255, 255) -2px 0px) drop-shadow(rgb(255, 255, 255) 0px 2px) drop-shadow(rgb(255, 255, 255) 0px -2px);
  pointer-events: none;
}

.inventory-unlock-notification[data-kind="achievement"] .v3-unlock-grga {
  content: url("../img/v3/grga/grga-znacka.webp");
}

.inventory-unlock-notification[data-kind="storyline"] .v3-unlock-grga {
  content: url("../img/v3/grga/grga-dobro-palac.webp");
}

.inventory-unlock-notification-card, .inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-card, .message-panel-shell {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 128px;
  padding: 15px 18px 15px 87px;
  border: 2.5px solid var(--v3-ink);
  border-radius: 8px 12px 10px 8px;
  background-color: var(--v3-paper);
  background-image: linear-gradient(90deg, transparent 79px, var(--v3-margin) 79px 81px, transparent 81px),
    repeating-linear-gradient(0deg, transparent 0 23px, var(--v3-grid) 23px 24px);
  box-shadow: 0 0 0 3px #fff, 4px 6px 0 var(--v3-cover);
  color: var(--v3-ink);
  transform: none;
}

.inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-card::after {
  right: 6px;
  bottom: 5px;
  background-image: url("../img/v3/ikone/tzjb-stanje-posjeceno.svg");
}

.inventory-unlock-notification-thumb, .inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-thumb {
  position: absolute;
  left: 7px;
  top: 20px;
  width: 66px;
  height: 66px;
  padding: 2px;
  border: 0px;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.inventory-unlock-notification-kind {
  font: 27px / 1 "Patrick Hand", cursive;
  color: var(--v3-ink);
}

.inventory-unlock-notification-title {
  font: 800 19px / 1.15 Nunito, sans-serif;
  color: var(--v3-ink);
}

.inventory-unlock-notification-subtitle, .inventory-unlock-notification-detail {
  font: 700 15px / 1.15 Nunito, sans-serif;
  color: rgb(107, 90, 76);
}

.distance-popup, .geo-popup {
  bottom: 110px;
  width: min(358px, -32px + 100vw);
}

.distance-popup__icon {
  position: absolute;
  left: 8px;
  top: 25px;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.distance-popup__body .message-panel-text, .geo-popup__body .message-panel-text {
  text-align: left;
  font: 700 20px / 1.15 Nunito, sans-serif;
  color: var(--v3-ink);
}

.distance-popup__distance-line {
  display: inline-block;
  width: auto;
  margin-top: 8px;
  padding: 3px 9px;
  border: 2px solid var(--v3-ink);
  border-radius: 8px;
  background: rgb(251, 231, 166);
  font: 800 17px / 1.15 Nunito, sans-serif;
}

.geo-popup__action {
  padding: 8px 15px;
  border: 2px solid var(--v3-ink);
  border-radius: 30px;
  background: var(--v3-cover);
  color: white;
  box-shadow: 2px 3px 0 var(--v3-ink);
  font: 23px / 1 "Patrick Hand", cursive;
  text-transform: none;
}

.v3-popup-close {
  position: absolute;
  top: -25px;
  right: 10px;
  z-index: 5;
  width: 37px;
  height: 53px;
  padding: 0px;
  background: transparent;
  cursor: pointer;
}

.v3-popup-close img {
  display: block;
  width: 100%;
  height: 100%;
}

.v3-popup-close:focus-visible {
  outline: 3px solid var(--v3-yellow);
}

.character-wrapper {
  width: 232px;
  max-width: 70vw;
}

.character-wrapper.slide-up {
  animation: 0.45s ease-out 0s 1 normal forwards running v3-character-rise;
}

.character-wrapper.slide-down {
  animation: 0.35s ease-in 0s 1 normal forwards running v3-character-hide;
}

@keyframes v3-character-rise { 
  0% { bottom: -300px; }
  100% { bottom: 91px; }
}

@keyframes v3-character-hide { 
  0% { bottom: 91px; }
  100% { bottom: -300px; }
}

.character {
  filter: drop-shadow(rgb(255, 255, 255) 2px 0px) drop-shadow(rgb(255, 255, 255) -2px 0px) drop-shadow(rgb(255, 255, 255) 0px 2px) drop-shadow(rgb(255, 255, 255) 0px -2px);
}

#speechBubble {
  width: min(358px, -32px + 100vw);
  max-width: none;
  filter: none;
  inset: auto auto 18px 50% !important;
}

#speechBubble.show-bubble {
  animation: 0.3s ease-out 0s 1 normal forwards running v3-note-in;
}

@keyframes v3-note-in { 
  0% { opacity: 0; transform: translateX(-50%) translateY(25px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0px); }
}

#speechBubble .speech-box-wrapper, #speechBubble .speech-box {
  width: 100%;
  max-width: 100%;
}

#speechBubble .speech-box {
  min-height: 126px;
  padding: 18px 24px 18px 88px;
  border: 2.5px solid var(--v3-ink);
  border-radius: 8px 12px 10px 8px;
  background-color: var(--v3-paper);
  background-image: linear-gradient(90deg, transparent 79px, var(--v3-margin) 79px 81px, transparent 81px),
    repeating-linear-gradient(0deg, transparent 0 23px, var(--v3-grid) 23px 24px);
  box-shadow: 0 0 0 3px #fff, 4px 6px 0 var(--v3-cover);
}

#speechBubble .speech-box::before, #speechBubble .speech-box::after {
  content: none;
}

#speechBubble .speech-content {
  width: 100%;
  max-width: 100%;
  text-align: left;
  font: 700 20px / 1.15 Nunito, sans-serif;
}

#speechBubble .close-btn {
  top: -24px;
  right: 10px;
}

.context-help__paper {
  border: 2.5px solid var(--v3-ink);
  border-radius: 9px;
  background: rgb(251, 231, 166);
  box-shadow: 0 0 0 3px #fff, 3px 5px 0 var(--v3-cover);
}

.context-help__grga {
  content: url("../img/v3/grga/grga-biljeznica.webp");
}

#help-panel.help-panel--paged .help-panel__body {
  bottom: var(--panel-body-bottom);
}

.v3-tutorial {
  min-height: 100%;
  padding: 4px 8px 8px;
}

.v3-tutorial .welcome-pager__stage {
  align-items: stretch;
  text-align: left;
  min-height: 0px;
}

.v3-tutorial .welcome-pager__stage h2 {
  color: var(--v3-ink);
}

.v3-tutorial .welcome-pager__stage > p {
  max-width: none;
  font: 18px / 1.35 Nunito, sans-serif;
  color: var(--v3-ink);
}

.v3-tutorial__icons {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  min-height: 150px;
  padding: 20px 12px;
  border: 2.5px solid var(--v3-ink);
  border-radius: 7px;
  background: rgb(132, 187, 155);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 4px, rgba(0, 0, 0, 0.15) 0px 6px 10px 4px;
  transform: rotate(-1deg);
}

.v3-tutorial__icons img {
  object-fit: contain;
}

.v3-tutorial__say {
  display: flex;
  align-items: flex-end;
  gap: 0px;
  margin-top: auto;
}

.v3-tutorial__say img {
  flex: 0 0 94px;
  width: 94px;
  height: 125px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(rgb(255, 255, 255) 2px 0px) drop-shadow(rgb(255, 255, 255) -2px 0px) drop-shadow(rgb(255, 255, 255) 0px 2px) drop-shadow(rgb(255, 255, 255) 0px -2px);
}

.v3-tutorial__say p {
  flex: 1 1 auto;
  margin: 0px 0px 19px -4px;
  padding: 9px 11px;
  border: 2.5px solid var(--v3-ink);
  border-radius: 14px;
  background: rgb(255, 255, 255);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px, rgba(0, 0, 0, 0.12) 0px 4px 6px;
  font: 16px / 1.28 Nunito, sans-serif;
}

.v3-tutorial .welcome-pager__controls button {
  min-height: 48px;
  padding: 4px 13px;
  border: 2.5px solid var(--v3-ink);
  border-radius: 12px;
  background: var(--v3-cover);
  box-shadow: 0 0 0 3px #fff, 0 6px 0 3px var(--v3-ink);
  color: rgb(255, 255, 255);
  font: 23px / 1 "Patrick Hand", cursive;
}

.v3-tutorial .welcome-pager__controls button:disabled {
  border: 0px;
  background: transparent;
  box-shadow: none;
  color: rgb(163, 156, 142);
}

.v3-tutorial .welcome-pager__controls span {
  color: rgb(138, 106, 58);
  font: 21px / 1 "Patrick Hand", cursive;
}

.v3-minimap-help {
  display: grid;
  gap: 16px;
  padding: 12px 18px 24px 28px;
  color: var(--v3-ink);
}

.v3-minimap-help h2 {
  font: 31px / 1.1 "Patrick Hand", cursive;
}

.v3-minimap-help p {
  font: 17px / 1.4 Nunito, sans-serif;
}

.v3-minimap-help__note {
  padding: 12px 14px;
  border: 2px solid var(--v3-ink);
  border-radius: 8px;
  background: rgb(251, 231, 166);
  box-shadow: rgb(255, 255, 255) 2px 3px 0px;
}

#unity-ui {
  top: 14px;
}

#inventory-score-panel::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 64px;
  bottom: 8px;
  border-top: 2px dashed rgb(107, 90, 76);
  pointer-events: none;
}

#unity-left-ui {
  top: 0px;
  left: 0px;
  width: 0px;
}

#unity-left-ui > .btn-ui:first-child {
  position: fixed;
  inset: auto 18px 18px auto;
  width: 76px;
  height: 76px;
}

#unity-left-ui > .btn-ui:nth-child(2) {
  position: fixed;
  top: 156px;
  left: 20px;
}

#left-map-controls {
  position: fixed;
  top: 92px;
  left: 20px;
  display: block;
  width: 50px;
}

#btn-map-layers > svg {
  display: block;
  width: 100%;
  height: 100%;
}

#unity-left-ui:has(#hospitality-category-drawer:not([hidden])) {
  z-index: calc(var(--ui-layer-control-buttons) + 2);
}

#persistent-language-control {
  position: fixed;
  top: 218px;
  left: 20px;
}

#hospitality-category-drawer {
  position: absolute;
  top: 58px;
  left: 0px;
}

#unity-wrapper:has(#help-panel.help-panel--welcome.show:not(.box-half):not(.box-minimized))::before {
  content: "";
  position: absolute;
  inset: 0px;
  z-index: 49;
  background: rgba(58, 42, 31, 0.34);
  pointer-events: none;
}

#index-panel.show {
  top: 100px !important;
  left: 8px !important;
  width: calc(-16px + 100vw) !important;
  height: calc(100dvh - 108px) !important;
  max-height: none !important;
  transform: none !important;
}

#index-panel.show .index-panel__viewport {
  overflow: visible;
}

#index-panel.show .index-category-chip {
  min-height: 42px;
  border: 2px solid var(--v3-ink);
  border-radius: 22px;
  background: rgb(255, 255, 255);
  font: 23px / 1 "Patrick Hand", cursive;
}

#index-panel.show .index-category-chip[aria-pressed="true"] {
  background: rgb(251, 231, 166);
  box-shadow: 0 0 0 3px var(--v3-yellow);
}

#index-panel.ui-panel.ui-panel--paper-stack .panel-title-text {
  font: calc(30px * var(--panel-header-scale)) / 1 "Patrick Hand", cursive !important;
}

#index-panel #index-category-chips {
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none !important;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
}

#index-panel #index-category-chips button {
  cursor: inherit;
}

#index-panel #index-category-chips.is-dragging {
  cursor: grabbing;
}

#index-panel #index-category-chips::-webkit-scrollbar {
  display: none;
  width: 0px;
  height: 0px;
}

#index-panel #index-panel-body {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(58, 42, 31, 0.45) transparent !important;
  scrollbar-gutter: auto !important;
}

#index-panel #index-panel-body::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

#index-panel #index-panel-body::-webkit-scrollbar-button {
  display: none;
  width: 0px;
  height: 0px;
}

#index-panel #index-panel-body::-webkit-scrollbar-track {
  background: transparent;
}

#index-panel #index-panel-body::-webkit-scrollbar-thumb {
  border: 0px;
  border-radius: 4px;
  background: rgba(58, 42, 31, 0.45);
}

#index-panel .index-category-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 3px 12px 3px 3px;
  font: 18px / 1 "Patrick Hand", cursive !important;
}

#index-panel .index-category-chip svg {
  display: block;
  width: 34px;
  height: 34px;
}

#index-panel .index-category-chip img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

#index-panel #index-panel-body.locations-grouped-view {
  padding-top: 8px;
  padding-right: 12px;
  padding-bottom: 20px;
  gap: 14px;
}

#index-panel #index-panel-body.locations-grouped-view .story-group-title {
  margin: 0px 0px 6px;
  padding-top: 8px;
  padding-bottom: 5px;
  padding-left: 0px;
  border-bottom: 1.5px solid rgb(138, 106, 58);
  font: 22px / 1.1 "Patrick Hand", cursive;
}

#index-panel #index-panel-body.locations-grouped-view .story-group-title::before {
  content: none;
  display: none;
}

#index-panel #index-panel-body.locations-grouped-view .story-group-title .inventory-section-title-label {
  font: 22px / 1.1 "Patrick Hand", cursive;
}

#index-panel #index-panel-body.locations-grouped-view .badges-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0px;
}

#index-panel #index-panel-body.locations-grouped-view .badge-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-self: stretch;
  gap: 11px;
  width: 100%;
  max-width: none;
  max-height: none;
  min-height: 63px;
  padding: 7px 3px;
  border-width: 0px 0px 1px;
  border-style: none none dashed;
  border-color: currentcolor currentcolor rgb(200, 186, 162);
  border-image: none;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
}

#index-panel #index-panel-body.locations-grouped-view .badge-item .badge-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  margin: 0px;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

#index-panel #index-panel-body.locations-grouped-view .badge-item .badge-icon > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#index-panel #index-panel-body.locations-grouped-view .index-tourist-entry.is-collected .badge-checkmark {
  display: block;
}

#location-panel-category.is-collected .location-category__icon::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 22px;
  height: 22px;
  background: url("../img/newui/Tick.png") center center / contain no-repeat;
}

#index-panel #index-panel-body.locations-grouped-view .badge-item .badge-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0px;
  min-height: 0px;
  text-align: left;
  overflow: visible;
  font: 800 14.5px / 1.2 Nunito, sans-serif;
  -webkit-line-clamp: unset;
}

#index-panel #index-panel-body.locations-grouped-view .badge-item .badge-label small {
  display: block;
  margin-top: 2px;
  color: rgb(107, 90, 76);
  font: 14px / 1.2 Nunito, sans-serif;
}

#inventory-panel .inventory-v3-title {
  color: var(--v3-ink);
}

#inventory-panel .progressbar-wrapper {
  min-height: 42px;
  margin-top: 2px;
  margin-bottom: 2px;
}

#inventory-panel .progressbar-text {
  align-self: flex-start;
  padding-left: 24px;
  color: rgb(107, 90, 76);
  font: 700 15px / 1.15 Nunito, sans-serif;
}

#inventory-panel .progressbar-bg {
  position: relative;
  width: calc(100% - 48px);
  height: 14px;
  margin: 8px auto 0px;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
}

#inventory-panel .progressbar-fill {
  position: absolute;
  top: -3px;
  left: 0px;
  height: 4px;
  border-radius: 0px;
  background: var(--v3-cover);
  box-shadow: none;
}

#inventory-panel .progressbar-fill::after {
  content: "";
  position: absolute;
  right: -8px;
  top: -5px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--v3-ink);
  border-radius: 50%;
  background: var(--v3-yellow);
}

#inventory-panel .progressbar-fill-image {
  display: none;
}

#inventory-panel .progressbar-bg {
  border-width: 2px 0px 0px;
  border-style: dashed none none;
  border-color: rgb(169, 168, 159) currentcolor currentcolor;
  border-image: none;
}

#inventory-panel .progress-container-header {
  left: 0px;
  right: 0px;
}

#inventory-panel .progress-container-header-closeBtn {
  width: 38px;
  height: 55px;
  padding: 0px;
  border: 0px;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
}

#inventory-panel .progress-container-header-closeBtn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.v3-tutorial {
  height: 100%;
  gap: 8px;
}

.v3-tutorial .welcome-pager__stage {
  flex: 1 1 auto;
  gap: 8px;
  overflow: visible;
}

.v3-tutorial__scene {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 198px;
  margin-top: -23px;
  border: 3px solid var(--v3-ink);
  border-radius: 8px;
  background: url("../img/v3/karta/karta-mobitel.jpg") center 48% / 155% auto no-repeat;
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 4px, rgba(58, 42, 31, 0.25) 0px 7px 8px;
}

#help-panel.help-panel--welcome .v3-tutorial__icons {
  position: absolute;
  z-index: 1;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 0px;
  padding: 0px;
  border: 0px;
  background: none;
  box-shadow: none;
  transform: none;
}

.v3-tutorial__icons img {
  width: 72px;
  height: 85px;
  filter: drop-shadow(rgba(58, 42, 31, 0.4) 1px 2px 2px);
}

.v3-tutorial__icons img:nth-child(2) {
  width: 42px;
  height: 70px;
}

.v3-tutorial__icons img:nth-child(3) {
  display: none;
}

.v3-tutorial__grga {
  position: absolute;
  z-index: 2;
  right: -17px;
  width: 175px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(rgb(255, 255, 255) 2px 0px) drop-shadow(rgb(255, 255, 255) -2px 0px) drop-shadow(rgb(255, 255, 255) 0px 2px) drop-shadow(rgb(255, 255, 255) 0px -2px);
}

.v3-tutorial .welcome-pager__stage h2 {
  margin-top: 10px;
  font: 32px / 1.05 "Patrick Hand", cursive;
}

.v3-tutorial .welcome-pager__stage > p:not(.v3-tutorial__footer) {
  font: 15px / 1.4 Nunito, sans-serif;
}

.v3-tutorial__rows {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.v3-tutorial__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 5px 0px;
  border-bottom: 1px dashed rgb(198, 186, 167);
  color: var(--v3-ink);
  font: 15px / 1.3 Nunito, sans-serif;
}

.v3-tutorial__row:last-child {
  border-bottom: 0px;
}

.v3-tutorial__row img {
  flex: 0 0 43px;
  width: 43px;
  height: 45px;
  object-fit: contain;
}

.v3-tutorial__footer {
  color: rgb(107, 90, 76);
  font: 16px / 1.35 Nunito, sans-serif;
}

.v3-tutorial .welcome-pager__controls {
  flex: 0 0 auto;
  padding: 2px 0px 3px;
}

.v3-tutorial .welcome-pager__controls button:first-child {
  min-width: 0px;
  border: 0px;
  background: none;
  box-shadow: none;
  color: var(--v3-cover);
  text-decoration: underline;
}

.v3-tutorial .welcome-pager__controls button:last-child {
  min-width: 115px;
  min-height: 54px;
}

.v3-tutorial[data-layout="controls"] .v3-tutorial__scene::before {
  content: attr(data-search);
  position: absolute;
  top: 19px;
  left: 14px;
  right: 10px;
  height: 52px;
  padding: 10px 0px 0px 47px;
  border: 3px solid var(--v3-ink);
  border-radius: 12px;
  background: rgb(255, 255, 255);
  color: rgb(119, 113, 106);
  font: 23px / 1 "Patrick Hand", cursive;
}

.v3-tutorial[data-layout="controls"] .v3-tutorial__icons {
  top: 28px !important;
  left: 24px !important;
}

.v3-tutorial[data-layout="controls"] .v3-tutorial__icons img:first-child {
  width: 31px;
  height: 34px;
}

.v3-tutorial[data-layout="controls"] .v3-tutorial__icons img:not(:first-child) {
  display: none;
}

#help-panel.help-panel--welcome .help-panel__body {
  overflow: visible !important;
}

.v3-tutorial__grga {
  top: 26px;
  bottom: auto;
  height: 190px !important;
}

.loading-wrapper:has(#loading-menu:not(.hidden)) {
  background-color: rgb(213, 208, 198);
  background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 47px, rgba(89, 79, 69, 0.11) 47px, rgba(89, 79, 69, 0.11) 49px);
}

.loading-wrapper:has(#loading-menu:not(.hidden))::after {
  display: none;
}

#loading-menu {
  inset: 52px 21px 70px;
}

#loading-menu .loading-notebook--start {
  width: min(100%, 390px);
  height: 100%;
  max-height: none;
}

#loading-menu .loading-notebook--start::before, #loading-menu .loading-notebook--start::after {
  background: rgb(233, 229, 219);
  border: 2px solid rgb(107, 90, 76);
  border-radius: 12px 24px 24px 12px;
  box-shadow: none;
}

#loading-menu .loading-notebook--start::before {
  transform: translate(11px, 14px);
}

#loading-menu .loading-notebook--start::after {
  display: none;
}

#loading-menu .loading-start__sheet {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0px;
  border: 2.5px solid var(--v3-ink);
  border-radius: 8px 18px 18px 8px;
  background: var(--v3-cover);
  box-shadow: none;
  color: white;
}

#loading-menu .loading-start__sheet::before {
  inset: 0px auto 0px 0px;
  width: 24px;
  border-right: 2px solid rgb(58, 42, 31);
  border-radius: 6px 0px 0px 6px;
  background: repeating-linear-gradient(0deg, rgba(242, 243, 236, 0.4) 0px, rgba(242, 243, 236, 0.4) 6px, transparent 6px, transparent 11px) 11px 10px / 2px calc(100% - 20px) no-repeat, rgb(35, 83, 58);
  opacity: 1;
}

#loading-menu .loading-start__sheet::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 32px;
  height: 32px;
  background: rgb(231, 195, 107);
  clip-path: polygon(0px 0px, 100% 100%, 100% 0px);
  border-top-right-radius: 12px;
}

#loading-menu .loading-notebook__eraser {
  display: block;
  inset: auto 0px 0px auto;
  width: 31px;
  height: 31px;
  padding: 0px;
  border: 0px;
  border-radius: 0px 0px 14px;
  background: rgb(214, 180, 90);
  clip-path: polygon(100% 0px, 100% 100%, 0px 100%);
}

#loading-menu .loading-notebook__bookmark, #loading-menu .loading-start__grga {
  display: none !important;
}

#loading-menu .loading-start__logo {
  position: absolute;
  top: 65px;
  left: calc(50% + 12px);
  width: 230px;
  max-width: 76%;
  height: 62px;
  transform: translateX(-50%);
}

#loading-menu .loading-start__controls {
  display: block;
  position: absolute;
  inset: 0px 0px 0px 24px;
  height: 100%;
  grid-area: auto;
  align-self: stretch;
}

#loading-menu .loading-start__title {
  position: absolute;
  top: 33%;
  left: 26px;
  right: 20px;
  color: rgb(255, 255, 255);
  font: 40px / 1.05 "Patrick Hand", cursive;
  text-align: center;
}

#loading-menu .loading-start__title::before, #loading-menu .loading-start__subtitle::after {
  content: "";
  position: absolute;
  left: calc(50% - 35px);
  width: 70px;
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}

#loading-menu .loading-start__title::before {
  top: -23px;
}

#loading-menu .loading-start__subtitle::after {
  bottom: -22px;
}

#loading-menu .loading-start__subtitle {
  position: absolute;
  top: 47%;
  left: 30px;
  right: 24px;
  margin: 0px;
  color: rgb(242, 243, 236);
  font: 20px / 1.25 "Patrick Hand", cursive;
  text-align: center;
}

#loading-menu .loading-start__language {
  position: absolute;
  left: 20px;
  right: 16px;
  bottom: 131px;
  width: auto;
  padding: 0px;
  border: 0px;
  gap: 13px;
}

#loading-menu .loading-start__label {
  padding: 0px;
  background: none;
  box-shadow: none;
  color: rgb(242, 243, 236);
  font: 20px / 1 "Patrick Hand", cursive;
  transform: none;
}

#loading-menu #language-menu, #loading-menu #language-menu:has(.lang-btn[data-lang="en"]:not(.mute)) {
  display: flex;
  gap: 12px;
  width: auto;
  height: auto;
  background: none;
}

#loading-menu #language-menu .lang-btn, #loading-menu #language-menu .lang-btn:not(.mute) {
  flex: 0 0 70px;
  width: 70px;
  height: 56px;
  border: 2.5px solid var(--v3-ink);
  border-radius: 12px;
  background: rgb(255, 255, 255);
  box-shadow: 0 0 0 3px #fff, 0 5px 0 2px var(--v3-ink);
  color: var(--v3-ink);
  font: 27px / 1 "Patrick Hand", cursive;
}

#loading-menu #language-menu .lang-btn:not(.mute) {
  background: var(--v3-yellow);
}

#loading-menu #btn-start {
  position: absolute;
  left: 50%;
  bottom: 33px;
  width: 170px;
  min-height: 70px;
  border: 3px solid var(--v3-ink);
  border-radius: 14px;
  background: var(--v3-cover);
  box-shadow: 0 0 0 3px #fff, 0 7px 0 3px var(--v3-ink);
  color: white;
  font: 30px / 1 "Patrick Hand", cursive;
  letter-spacing: 0px;
  transform: translateX(-50%);
}

#version {
  bottom: 18px;
  font: 17px / 1 "Patrick Hand", cursive;
}

.loading-visuals {
  inset: 67px 22px 70px;
}

.loading-visuals .loading-notebook {
  width: min(100%, 390px);
  height: 100%;
}

.loading-visuals .loading-notebook::before, .loading-visuals .loading-notebook::after {
  border: 3px solid var(--v3-ink);
  border-radius: 8px 17px 17px 8px;
  background: var(--v3-cover);
  box-shadow: none;
}

.loading-visuals .loading-notebook::before {
  transform: translate(8px, -7px);
}

.loading-visuals .loading-notebook::after {
  transform: translate(13px, 4px);
}

.loading-visuals .loading-notebook__bookmark {
  display: none;
}

.loading-visuals .loading-notebook__sheet {
  display: block;
  border: 2.5px solid var(--v3-ink);
  border-radius: 5px 13px 13px 5px;
  background-color: var(--v3-paper);
  background-image: linear-gradient(90deg, transparent 27px, var(--v3-margin) 27px 28px, transparent 28px),
    repeating-linear-gradient(0deg, transparent 0 23px, var(--v3-grid) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--v3-grid) 23px 24px);
}

.loading-visuals .loading-notebook__page--art {
  position: absolute;
  inset: 0px 0px auto;
  height: 54%;
  padding: 0px;
}

.loading-visuals #loading-logo-panel {
  display: none !important;
}

.loading-visuals #loading-frame-sequence {
  position: absolute;
  top: 65px;
  left: 13px;
  right: 13px;
  width: auto;
  height: 284px;
}

.loading-visuals .loading-frame-layer {
  transform: none;
}

.loading-visuals .loading-notebook__page--copy {
  position: absolute;
  inset: 52% 0px 0px;
  display: block;
  padding: 0px;
}

.loading-visuals .loading-notebook__page--copy::before {
  display: none;
}

.loading-visuals .loading-tutorial-copy--lead {
  display: none;
}

.loading-visuals #loading-tutorial-hint {
  position: absolute;
  top: 34px;
  left: 33px;
  width: calc(100% - 66px);
  height: 179px;
}

.loading-visuals .loading-tutorial-hint-inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px 15px 15px;
  border: 2.5px solid var(--v3-ink);
  border-radius: 8px;
  background: rgb(251, 231, 166);
  box-shadow: 0 0 0 3px #fff, 2px 3px 0 var(--v3-ink);
  transform: rotate(-0.4deg);
}

.loading-visuals .loading-tutorial-hint-inner::before {
  content: "";
  display: block;
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  margin-top: 8px;
  background: url("../img/v3/tur-ikona/crkva-sv-josipa.svg") center center / contain no-repeat;
}

.loading-visuals .loading-tutorial-hint-label {
  position: absolute;
  top: -20px;
  left: 50%;
  min-width: 65px;
  height: 30px;
  padding: 2px 8px;
  border: 2px solid var(--v3-ink);
  border-radius: 5px;
  background: var(--v3-paper);
  color: rgb(163, 58, 50);
  font: 16px / 1 "Patrick Hand", cursive;
  letter-spacing: 0px;
  margin: 0px;
  transform: translateX(-50%);
}

.loading-visuals .loading-tutorial-hint-label::before, .loading-visuals .loading-tutorial-hint-label::after {
  display: none;
}

.loading-visuals .loading-tutorial-hint-body-text {
  color: var(--v3-ink);
  font: 21px / 1.25 "Patrick Hand", cursive !important;
}

.loading-visuals #loading-progressbar-wrapper {
  position: absolute;
  left: 35px;
  width: calc(100% - 70px);
}

.loading-visuals #loading-progressbar-wrapper .progressbar-bg {
  overflow: visible;
  height: 5px;
  border-width: 2px 0px 0px;
  border-style: dashed none none;
  border-color: rgb(163, 156, 142) currentcolor currentcolor;
  border-image: none;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
}

.loading-visuals #loading-progressbar-wrapper .progressbar-fill {
  overflow: visible;
  border-radius: 0px;
  background: var(--v3-cover);
}

.loading-visuals #loading-progressbar-wrapper .progressbar-fill::after {
  display: none;
  width: 26px;
  height: 9px;
  border: 2px solid var(--v3-ink);
  border-radius: 1px;
  background: var(--v3-yellow);
}

#loading-progress-meta {
  position: absolute;
  right: 35px;
  bottom: 24px;
  left: 35px;
  display: flex;
  justify-content: space-between;
  color: rgb(107, 90, 76);
  font: 18px / 1 "Patrick Hand", cursive;
}

#loading-progress-percent {
  color: rgb(58, 42, 31);
  font: 800 14px / 1 Nunito, sans-serif;
}

#version {
  color: rgba(255, 255, 255, 0.75);
}

.loading-wrapper:has(#loading-menu:not(.hidden)) #version {
  color: rgb(107, 90, 76);
}

.loading-progress-pencil {
  display: block;
  position: absolute;
  right: -48px;
  top: -14px;
  width: 58px;
  height: 24px;
  transform: rotate(-24deg);
  transform-origin: 6px 18px;
}

.loading-visuals .loading-frame-layer {
  mix-blend-mode: multiply;
}

.loading-visuals .loading-tutorial-hint-inner {
  overflow: visible;
}

.loading-visuals #loading-progressbar-wrapper {
  bottom: 82px;
}

.loading-visuals #loading-progress-meta {
  bottom: 38px;
}

@media (max-height: 700px) {
  #loading-menu .loading-start__logo {
    top: 16px;
    height: 48px;
  }

  #loading-menu .loading-start__title {
    top: 24%;
    font-size: 30px;
  }

  #loading-menu .loading-start__subtitle {
    top: 44%;
    font-size: 17px;
  }

  #loading-menu .loading-start__language {
    bottom: 91px;
    gap: 6px;
  }

  #loading-menu .loading-start__label {
    font-size: 17px;
  }

  #loading-menu #language-menu .lang-btn {
    width: 60px;
    height: 43px;
    flex-basis: 60px;
    font-size: 22px;
  }

  #loading-menu #btn-start {
    bottom: 14px;
    min-height: 54px;
    font-size: 25px;
  }

  .loading-visuals #loading-frame-sequence {
    top: 16px;
    height: 185px;
  }

  .loading-visuals .loading-notebook__page--art {
    height: 48%;
  }

  .loading-visuals .loading-notebook__page--copy {
    top: 44%;
  }

  .loading-visuals #loading-tutorial-hint {
    top: 18px;
    height: 140px;
  }

  .loading-visuals .loading-tutorial-hint-inner::before {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .loading-visuals .loading-tutorial-hint-body-text {
    font-size: 17px !important;
  }

  .loading-visuals #loading-progressbar-wrapper {
    bottom: 65px;
  }

  .loading-visuals #loading-progress-meta {
    bottom: 22px;
  }
}

#inventory-panel .inventory-section:has(#storylines-container) > .progressbar-wrapper, #inventory-panel .inventory-section:has(#storylines-container) > .progressbar-bg, #inventory-panel .inventory-region-progressbar-wrapper {
  display: none;
}

#inventory-panel .story-group {
  border: 0px;
  background: transparent;
  box-shadow: none;
}

#inventory-panel .story-group-title {
  display: flex;
  border-bottom: 1.5px solid rgb(138, 106, 58);
  color: var(--v3-ink);
}

#inventory-panel .story-group-title::before {
  display: none;
}

#inventory-panel .inventory-group-progress {
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

#inventory-panel .inventory-region-progress-text {
  color: var(--v3-ink);
  font: 800 15px / 1 Nunito, sans-serif;
}

#inventory-panel .story-group-content, #inventory-panel .storyline-item, #inventory-panel .storyline-item-content {
  display: block;
  margin: 0px;
  padding: 0px;
  border: 0px;
  background: transparent;
  box-shadow: none;
}

#inventory-panel #storylines-container .badges-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0px;
}

#inventory-panel #storylines-container .badge-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0px;
  border-width: 0px 0px 1px;
  border-style: none none dashed;
  border-color: currentcolor currentcolor rgb(200, 186, 162);
  border-image: none;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
}

#inventory-panel #storylines-container .badge-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  min-height: 0px;
  margin: 0px;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

#inventory-panel #storylines-container .badge-icon img:first-child {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

#inventory-panel #storylines-container .badge-icon .badge-lock {
  width: 15px;
  height: 15px;
}

#inventory-panel #storylines-container .badge-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0px;
  height: auto;
  color: var(--v3-ink);
  text-align: left;
  white-space: normal;
  overflow: visible;
  -webkit-line-clamp: unset;
}

#inventory-panel .v3-empty-banner p {
  font: 18px / 1.15 "Patrick Hand", cursive;
}

#inventory-global-eye-toggle.inventory-locked-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  min-height: 26px;
  margin: 13px 11px 4px auto;
  padding: 0px;
  border: 0px;
  background: none;
  box-shadow: none;
  color: rgb(107, 90, 76);
  font: 700 14px / 1 Nunito, sans-serif;
  cursor: pointer;
}

#inventory-global-eye-toggle .inventory-locked-toggle__box {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--v3-cover);
  border-radius: 2px;
  background: rgb(255, 255, 255);
}

#inventory-global-eye-toggle[aria-pressed="true"] .inventory-locked-toggle__box {
  background: var(--v3-cover);
}

#inventory-global-eye-toggle[aria-pressed="true"] .inventory-locked-toggle__box::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 4px;
  width: 5px;
  height: 9px;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-image: none;
  border-width: 0px 2px 2px 0px;
  transform: rotate(45deg);
}

#inventory-global-eye-icon {
  display: none;
}

#inventory-panel .inventory-section[data-tab-section="stories"] {
  padding-top: 0px;
}

#inventory-panel .inventory-section[data-tab-section="stories"]::before, #inventory-panel .inventory-section[data-tab-section="stories"] > .badges-title {
  display: none;
}

#location-panel .blue-content-box-title {
  font: 700 21px / 1.05 Nunito, sans-serif;
  width: 100% !important;
  max-width: none !important;
  min-width: 0px !important;
  height: auto !important;
  min-height: 28px !important;
  padding: 0px !important;
}

#location-panel .panel-title-text {
  font: 700 calc(19px * var(--panel-header-scale, 1)) / 1.1 "Patrick Hand", cursive !important;
  color: var(--v3-ink) !important;
  text-shadow: none !important;
}

#location-panel .panel-title-drag {
  display: none !important;
}

#location-panel .v3-location-category {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: rgb(146, 112, 59);
  text-transform: uppercase;
  font: 800 calc(12px * var(--panel-header-scale)) / 1.1 Nunito, sans-serif;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

#location-panel .v3-location-category[hidden] {
  display: none;
}

#location-panel .v3-location-category img {
  width: calc(25px * var(--panel-header-scale));
  height: calc(25px * var(--panel-header-scale));
  object-fit: contain;
  flex: 0 0 calc(25px * var(--panel-header-scale));
}

#location-panel .v3-location-category span {
  min-width: 0;
}

.location-category__icon {
  position: relative;
  display: flex;
  flex: 0 0 calc(25px * var(--panel-header-scale));
  width: calc(25px * var(--panel-header-scale));
  height: calc(25px * var(--panel-header-scale));
}

#location-panel .blue-box-location-pin {
  width: max-content;
  max-width: 100%;
  min-height: 30px;
  border: 2px solid var(--v3-ink);
  border-radius: 5px;
  background: var(--v3-paper);
  box-shadow: white 0px 0px 0px 3px, rgb(94, 81, 69) 2px 5px 0px;
  transform: rotate(-0.4deg);
  padding: 2px 12px !important;
}

#location-panel .blue-box-location-pin::before {
  display: none;
}

#location-panel .blue-box-location-pin #blue-box-location-text {
  color: var(--v3-cover);
  font: 700 14px / 1.1 Nunito, sans-serif;
  text-decoration: underline;
}

#location-panel .location-panel__meta {
  margin: 0;
  padding: 7px 10px;
  border-left: 3px solid var(--v3-cover);
  background: rgba(242, 177, 52, 0.13);
  color: var(--v3-ink);
  font: 800 13px / 1.35 Nunito, sans-serif;
  text-align: left;
}

#location-panel .location-panel__content > .content-item {
  width: 100% !important;
  max-width: 100% !important;
}

#location-panel .location-panel__content > .content-image {
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: auto;
  width: max-content !important;
  max-width: min(100% - 10px, 760px) !important;
}

#location-panel .location-panel__content > .content-gallery-wrapper {
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: auto;
  width: min(100% - 10px, 760px) !important;
  max-width: min(100% - 10px, 760px) !important;
}

#location-panel .content-image, #location-panel .gallery-img {
  overflow: visible;
  margin: 4px auto 2px;
  border: 5px solid rgb(255, 255, 255);
  outline: 2px solid var(--v3-ink);
  border-radius: 2px;
  box-shadow: rgb(108, 90, 70) 2px 4px 0px;
  transform: none;
  height: auto !important;
  min-height: 0px !important;
  max-height: none !important;
}

#location-panel .content-image .front, #location-panel .gallery-img .front {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  box-shadow: none;
  margin-left: auto;
  margin-right: auto;
  height: auto !important;
}

#location-panel.location-panel--hospitality .content-text img {
  width: min(100%, 1000px) !important;
  max-width: 100% !important;
}

#location-panel.location-panel--hospitality .location-panel__content > .content-image:not(.business-fallback-logo) {
  width: min(100%, 1000px) !important;
  max-width: 100% !important;
}

#location-panel.location-panel--hospitality .content-image:not(.business-fallback-logo) .front {
  width: 100% !important;
  max-width: 100% !important;
}

#location-panel.location-panel--hospitality .business-fallback-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(246, 245, 233);
  width: min(100%, 1000px) !important;
  max-width: 100% !important;
  min-height: 220px !important;
}

#location-panel.location-panel--hospitality .business-fallback-logo .front {
  width: min(70%, 560px);
  max-height: 180px;
}

#location-panel .content-text {
  color: var(--v3-ink);
  font: 15px / 1.45 Nunito, sans-serif;
  margin: 8px 0px 0px !important;
}

#location-panel .content-text h2, #location-panel .content-text h3 {
  margin: 0px 0px 8px;
  color: var(--v3-cover);
  font: 25px / 1.02 "Patrick Hand", cursive;
}

#location-panel .location-panel__footer {
  position: static;
  display: flex;
  flex-wrap: wrap;
}

#location-panel .location-panel__footer .start-game-btn, #location-panel #location-ar-button, .notebook-action-button {
  aspect-ratio: auto;
  min-width: 0px;
  min-height: 60px;
  height: auto;
  transform: none;
  border: 3px solid rgb(255, 255, 255);
  outline: 2px solid var(--v3-ink);
  border-radius: 9px;
  background: var(--v3-cover);
  box-shadow: 0 6px 0 var(--v3-ink);
  color: rgb(255, 255, 255);
  font: 25px / 1 "Patrick Hand", cursive;
  padding: 10px 12px;
  white-space: normal;
  overflow-wrap: anywhere;
  width: 100% !important;
}

#location-panel .gallery-img {
  flex: 0 0 100%;
  width: 100% !important;
  max-width: 100% !important;
}

#location-panel .content-gallery {
  overflow: hidden;
}

.context-help {
  z-index: calc(var(--ui-layer-loading) - 5);
}

#help-panel.help-panel--welcome:not(.box-half):not(.box-minimized):not(.box-dragged), #index-panel:not(.box-half):not(.box-minimized):not(.box-dragged), #location-panel:not(.box-half):not(.box-minimized):not(.box-dragged) {
  left: 10px !important;
  right: 10px !important;
  width: calc(100% - 20px) !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
}

#help-panel.help-panel--welcome:not(.box-half):not(.box-minimized):not(.box-dragged) {
  top: 60px !important;
  bottom: 12px !important;
}

#index-panel:not(.box-half):not(.box-minimized):not(.box-dragged) {
  top: 100px !important;
  bottom: 12px !important;
}

#location-panel:not(.box-half):not(.box-minimized):not(.box-dragged) {
  top: 150px !important;
  bottom: 12px !important;
}

#help-panel.ui-panel--floating-shell:is(.box-half, .box-minimized):not(.box-dragged), #index-panel.ui-panel--floating-shell:is(.box-half, .box-minimized):not(.box-dragged), #location-panel.ui-panel--floating-shell:is(.box-half, .box-minimized):not(.box-dragged) {
  left: 8px !important;
  right: 8px !important;
  width: calc(100% - 16px) !important;
  max-width: none !important;
  transform: none !important;
}

.ui-panel.ui-panel--paper-stack .paper-panel__visual-stack {
  pointer-events: none;
  inset: 0px !important;
}

.ui-panel.ui-panel--paper-stack .paper-panel__visual-stack::before {
  content: "";
  position: absolute;
  inset: 0px;
  z-index: 0;
  border: 2.5px solid rgb(58, 42, 31);
  border-radius: 12px 18px 18px 12px;
  background: rgb(47, 107, 69);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 24px;
  box-sizing: border-box;
}

.ui-panel.ui-panel--paper-stack .paper-panel__visual-stack::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -5px;
  right: 4px;
  bottom: -5px;
  width: 11px;
  border: 2px solid rgb(58, 42, 31);
  border-radius: 3px;
  background: rgb(138, 95, 58);
  box-sizing: border-box;
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer--back-ccw {
  z-index: 1;
  border: 2px solid rgba(58, 42, 31, 0.6);
  border-radius: 4px 10px 10px 4px;
  background: rgb(233, 231, 220);
  transform: rotate(0.9deg);
  box-sizing: border-box;
  display: block !important;
  inset: 7px 19px 7px 7px !important;
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer--back-cw {
  display: none !important;
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer--front {
  z-index: 4;
  overflow: visible;
  border: 2px solid rgb(58, 42, 31);
  border-radius: 4px 10px 10px 4px;
  background-color: rgb(242, 243, 236);
  background-image: linear-gradient(90deg, transparent 22px, rgba(163, 58, 50, 0.4) 22px, rgba(163, 58, 50, 0.4) 23.5px, transparent 23.5px), repeating-linear-gradient(0deg, transparent 0px, transparent 23px, rgba(95, 150, 190, 0.16) 23px, rgba(95, 150, 190, 0.16) 24px), repeating-linear-gradient(90deg, transparent 0px, transparent 23px, rgba(95, 150, 190, 0.16) 23px, rgba(95, 150, 190, 0.16) 24px);
  box-sizing: border-box;
  display: block !important;
  inset: 7px 19px 7px 7px !important;
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer .slice {
  display: none !important;
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer--front::before, .ui-panel.ui-panel--paper-stack .paper-panel__layer--front::after {
  position: absolute;
  right: -22px;
  width: 28px;
  height: 28px;
  z-index: 5;
  content: "" !important;
  display: block !important;
  border: 2.4px solid rgb(58, 42, 31) !important;
  background: rgb(214, 180, 90) !important;
  box-shadow: none !important;
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer--front::before {
  top: -10px;
  clip-path: polygon(0px 0px, 100% 0px, 100% 100%);
}

.ui-panel.ui-panel--paper-stack .paper-panel__layer--front::after {
  bottom: -10px;
  clip-path: polygon(100% 0px, 100% 100%, 0px 100%);
}

.ui-panel.ui-panel--paper-stack .blue-content-box-header {
  z-index: 8;
  top: var(--notebook-header-offset) !important;
  right: 0px !important;
  left: 0px !important;
  width: auto !important;
}

.ui-panel.ui-panel--paper-stack .panel-controls {
  z-index: 10;
  position: absolute !important;
  top: -26px !important;
  right: 28px !important;
  left: auto !important;
  width: auto !important;
  height: 52px !important;
  gap: 2px !important;
}

.ui-panel.ui-panel--paper-stack .panel-controls .panel-btn {
  filter: drop-shadow(rgba(58, 42, 31, 0.25) 0px 2px 2px);
  display: block !important;
  width: 34px !important;
  height: 52px !important;
  margin: 0px !important;
  padding: 0px !important;
  border: 0px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ui-panel.ui-panel--paper-stack .panel-controls .panel-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ui-panel.ui-panel--paper-stack .panel-title-drag {
  display: none !important;
}

.ui-panel.ui-panel--paper-stack .floating-content-panel__body, #inventory-panel .progress-container-inner {
  scrollbar-width: none;
}

.ui-panel.ui-panel--paper-stack .floating-content-panel__body::-webkit-scrollbar, #inventory-panel .progress-container-inner::-webkit-scrollbar {
  display: none;
}

#inventory-panel.ui-panel:not(.box-dragged) {
  left: 10px !important;
  width: calc(100% - 20px) !important;
  min-width: 0px !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
}

#inventory-panel .progress-container-body {
  position: absolute;
  inset: 0px;
}

#inventory-panel .progress-container-frame {
  display: block;
  inset: 0px;
  overflow: visible;
  border: 2.5px solid rgb(58, 42, 31);
  border-radius: 12px 18px 18px 12px;
  background: rgb(47, 107, 69);
  box-shadow: rgba(0, 0, 0, 0.28) 0px 10px 24px;
  box-sizing: border-box;
}

#inventory-panel .progress-container-frame .slice {
  display: none;
}

#inventory-panel .progress-container-frame::before {
  content: "";
  position: absolute;
  inset: 7px 19px 7px 7px;
  border: 2px solid rgba(58, 42, 31, 0.6);
  border-radius: 4px 10px 10px 4px;
  background: rgb(233, 231, 220);
  transform: rotate(0.9deg);
}

#inventory-panel .progress-container-frame::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 4px;
  top: -5px;
  bottom: -5px;
  width: 11px;
  border: 2px solid rgb(58, 42, 31);
  border-radius: 3px;
  background: rgb(138, 95, 58);
  box-sizing: border-box;
}

#inventory-panel .progress-container-inner {
  inset: 7px 19px 7px 7px;
  border: 2px solid rgb(58, 42, 31);
  border-radius: 4px 10px 10px 4px;
  background-color: rgb(242, 243, 236);
  background-image: linear-gradient(90deg, transparent 22px, rgba(163, 58, 50, 0.4) 22px, rgba(163, 58, 50, 0.4) 23.5px, transparent 23.5px), repeating-linear-gradient(0deg, transparent 0px, transparent 23px, rgba(95, 150, 190, 0.16) 23px, rgba(95, 150, 190, 0.16) 24px), repeating-linear-gradient(90deg, transparent 0px, transparent 23px, rgba(95, 150, 190, 0.16) 23px, rgba(95, 150, 190, 0.16) 24px);
  box-sizing: border-box;
  scrollbar-gutter: auto;
}

#inventory-panel .progress-container-header {
  top: var(--notebook-header-offset) !important;
}

#inventory-panel .panel-controls.panel-header-controls {
  top: -26px !important;
  right: 28px !important;
}

#inventory-panel .inventory-v3-title {
  margin: 0px 0px 5px;
  font: calc(30px * var(--panel-header-scale)) / 1 "Patrick Hand", cursive;
}

#help-panel.help-panel--welcome .blue-content-box-header {
  top: calc(7px + var(--notebook-header-offset)) !important;
  left: 7px !important;
  right: 19px !important;
  width: auto !important;
  height: 64px !important;
}

#help-panel.help-panel--welcome .blue-content-box-title {
  box-sizing: border-box;
  position: relative !important;
  top: 0px !important;
  left: 0px !important;
  right: 0px !important;
  width: 100% !important;
  max-width: none !important;
  height: 64px !important;
  min-height: 0px !important;
  display: flex !important;
  align-items: center !important;
  padding: 22px 52px 10px 34px !important;
  border-width: 0px 0px 1.5px !important;
  border-style: none none solid !important;
  border-color: currentcolor currentcolor rgb(138, 106, 58) !important;
  border-image: none !important;
  border-radius: 0px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#help-panel.help-panel--welcome .blue-content-box-title .panel-title-bg {
  display: none !important;
}

#help-panel.help-panel--welcome .panel-title-text {
  flex: 1 1 0%;
  position: static !important;
  width: auto !important;
  height: auto !important;
  color: rgb(58, 42, 31) !important;
  font: calc(28px * var(--panel-header-scale)) / 1 "Patrick Hand", cursive !important;
}

#help-panel.help-panel--welcome .v3-tutorial__header-count {
  color: rgb(138, 106, 58);
  font: 800 11px / 1 Nunito, sans-serif;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

#help-panel.help-panel--welcome .panel-controls {
  top: -33px !important;
  right: 21px !important;
}

#help-panel.help-panel--welcome .help-panel__body {
  box-sizing: border-box;
  inset: calc(71px + var(--notebook-header-offset)) 19px 7px 7px !important;
  width: auto !important;
  height: auto !important;
  padding: 16px 16px 0px 36px !important;
  border: 0px !important;
  background: none !important;
  box-shadow: none !important;
}

#help-panel.help-panel--welcome .v3-tutorial {
  width: 100%;
  height: 100%;
  min-height: 0px;
  gap: 0px;
  padding: 0px;
}

#help-panel.help-panel--welcome .v3-tutorial .welcome-pager__stage {
  gap: 12px;
}

#help-panel.help-panel--welcome .v3-tutorial__scene {
  width: 100%;
  height: 190px;
  margin-top: 0px;
  border: 2.5px solid rgb(58, 42, 31);
  border-radius: 6px;
  background-position: 40% 45%;
  background-size: 160% auto;
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 4px, rgba(0, 0, 0, 0.15) 0px 6px 10px 4px;
  transform: rotate(-1deg);
}

#help-panel.help-panel--welcome .v3-tutorial__icons {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: block;
}

#help-panel.help-panel--welcome .v3-tutorial__icons img:first-child {
  position: absolute;
  top: 40px;
  left: 22px;
  width: 104px;
  height: 104px;
}

#help-panel.help-panel--welcome .v3-tutorial__icons img:nth-child(2) {
  position: absolute;
  top: 34px;
  left: 140px;
  width: auto;
  height: 110px;
}

#help-panel.help-panel--welcome .v3-tutorial__row img {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  margin: 0px !important;
}

#help-panel.help-panel--welcome .v3-tutorial__row > span {
  flex: 1 1 auto;
  min-width: 0px;
  text-align: left;
}

#help-panel.help-panel--welcome .v3-tutorial__footer {
  color: rgb(107, 90, 76);
  font: 15px / 1.35 Nunito, sans-serif;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="location"] .v3-tutorial__scene {
  background-position: 70% 80%;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="location"] .v3-tutorial__grga {
  right: -20px;
  bottom: -36px !important;
  height: 170px !important;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="location"] .welcome-pager__stage h2 {
  max-width: 220px;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="location"] .v3-tutorial__icons::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 16px;
  width: 116px;
  height: 116px;
  border: 3px dashed rgb(242, 177, 52);
  border-radius: 50%;
  background: rgba(242, 177, 52, 0.2);
  box-sizing: border-box;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="location"] .v3-tutorial__row:nth-child(2) img {
  padding: 5px;
  border: 2px dashed rgb(242, 177, 52);
  border-radius: 50%;
  box-sizing: border-box;
}

#help-panel.help-panel--welcome .v3-tutorial__grga {
  right: -18px;
  width: auto;
  filter: drop-shadow(rgb(255, 255, 255) 2px 0px 0px) drop-shadow(rgb(255, 255, 255) -2px 0px 0px) drop-shadow(rgb(255, 255, 255) 0px 2px 0px) drop-shadow(rgb(255, 255, 255) 0px -2px 0px) drop-shadow(rgba(0, 0, 0, 0.25) 0px 5px 5px);
  top: auto !important;
  bottom: -40px !important;
  height: 196px !important;
}

#help-panel.help-panel--welcome .v3-tutorial .welcome-pager__stage h2 {
  margin: 6px 0px 0px;
  font: 30px / 1.05 "Patrick Hand", cursive;
}

#help-panel.help-panel--welcome .v3-tutorial .welcome-pager__stage > p:not(.v3-tutorial__footer) {
  font: 16px / 1.5 Nunito, sans-serif;
}

#help-panel.help-panel--welcome .v3-tutorial__row {
  gap: 12px;
  min-height: 0px;
  padding: 8px 0px;
  border-bottom: 1.5px dashed rgb(204, 197, 183);
  font: 16px / 1.35 Nunito, sans-serif;
}

#help-panel.help-panel--welcome .v3-tutorial__row strong {
  font-weight: 800;
}

#help-panel.help-panel--welcome .v3-tutorial__row > .v3-tutorial__help-icon {
  display: inline-flex;
  flex: 0 0 34px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0px 6px;
  border: 2px solid rgb(58, 42, 31);
  border-radius: 5px;
  background: rgb(242, 177, 52);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px;
  color: rgb(58, 42, 31);
  font: 24px / 1 "Patrick Hand", cursive;
  transform: rotate(-4deg);
}

#help-panel.help-panel--welcome .v3-tutorial .welcome-pager__controls {
  padding: 8px 0px 18px;
}

#help-panel.help-panel--welcome .v3-tutorial .welcome-pager__controls button:first-child {
  padding: 0px 4px;
  color: rgb(47, 107, 69);
  font: 19px / 1 "Patrick Hand", cursive;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#help-panel.help-panel--welcome .v3-tutorial .welcome-pager__controls button:first-child:disabled {
  color: rgb(163, 156, 142);
  text-decoration: none;
  opacity: 1;
}

#help-panel.help-panel--welcome .v3-tutorial .welcome-pager__controls button:last-child {
  min-width: 112px;
  min-height: 50px;
  padding: 4px 20px;
  text-transform: uppercase;
}

#help-panel.help-panel--welcome .v3-tutorial__dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

#help-panel.help-panel--welcome .v3-tutorial__dot {
  width: 10px;
  height: 10px;
  border: 1.8px solid rgb(58, 42, 31);
  border-radius: 50%;
  box-sizing: border-box;
}

#help-panel.help-panel--welcome .v3-tutorial__dot.is-current {
  width: 22px;
  border-radius: 6px;
  background: rgb(242, 177, 52);
}

#help-panel.help-panel--welcome .v3-tutorial__dot.is-done {
  background: rgb(124, 191, 87);
}

#inventory-panel .progress-container-inner {
  padding: calc(14px + var(--notebook-header-offset)) 14px 14px 34px;
}

#inventory-panel .progress-container-content {
  gap: 0px;
}

#inventory-panel .progress-summary-sticky {
  margin: 11px 0px 10px;
}

#inventory-panel .progress-summary-sticky > .progressbar-wrapper {
  min-height: 34px;
  margin: 0px;
}

#inventory-panel #inventory-top-progress-text {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0px;
  color: rgb(107, 90, 76);
  font: 700 13px / 1.2 Nunito, sans-serif;
}

#inventory-panel #inventory-top-progress-text b {
  color: rgb(58, 42, 31);
  font: 800 16px / 1 Nunito, sans-serif;
}

#inventory-panel .progress-summary-sticky .progressbar-bg {
  width: 100%;
  height: 10px;
  margin: 5px 0px 0px;
  border-top: 2px dashed rgb(163, 156, 142);
}

#inventory-panel .progress-summary-sticky .progressbar-bg::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -7px;
  left: 0px;
  width: 13px;
  height: 13px;
  border: 2px solid rgb(58, 42, 31);
  border-radius: 50%;
  background: rgb(242, 177, 52);
  box-sizing: border-box;
}

#inventory-panel .progress-summary-sticky .progressbar-fill::after {
  right: -5px;
  top: -4px;
  width: 9px;
  height: 9px;
}

#inventory-panel .inventory-tabs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-height: 41px;
  margin: 0px 0px 10px;
  border-bottom: 2px solid rgb(58, 42, 31);
}

#inventory-panel .inventory-tabs [role="tab"] {
  flex: 0 1 auto;
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0px;
  min-height: 38px;
  padding: 3px 7px;
  white-space: nowrap;
  font: 22px / 1 "Patrick Hand", cursive;
}

#inventory-panel .inventory-tabs [role="tab"] [data-tab-count] {
  display: inline;
  font: 800 12px / 1 Nunito, sans-serif;
  white-space: nowrap;
}

#inventory-panel .inventory-tabs [role="tab"][aria-selected="true"] {
  background: linear-gradient(transparent 54%, rgb(242, 177, 52) 54%, rgb(242, 177, 52) 96%, transparent 96%);
}

#inventory-panel #inventory-empty-state {
  width: calc(100% - 4px);
  margin: 6px 0px 10px 2px;
}

#inventory-panel #inventory-empty-state img {
  height: 84px;
  margin: -18px 0px -10px -9px;
}

#inventory-panel #inventory-empty-state p {
  font: 18px / 1.15 "Patrick Hand", cursive;
}

#inventory-panel #inventory-global-eye-toggle {
  margin: 7px 0px 6px auto;
}

#inventory-panel #storylines-container {
  gap: 0px;
}

#inventory-panel .story-group {
  position: relative;
  margin: 0px 0px 14px;
}

#inventory-panel .story-group-title {
  align-items: flex-start;
  min-height: 28px;
  margin: 0px 0px 2px;
  padding: 0px 52px 4px 0px;
  font: 22px / 1.1 "Patrick Hand", cursive;
}

#inventory-panel .story-group-title .inventory-section-title-label {
  max-width: 100%;
  font: 22px / 1.1 "Patrick Hand", cursive;
}

#inventory-panel .story-group-title .inventory-section-toggle {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
}

#inventory-panel .inventory-group-progress {
  position: absolute;
  top: 4px;
  right: 0px;
  width: auto;
  min-height: 0px;
  margin: 0px;
  padding: 0px;
}

#inventory-panel #storylines-container .badge-item {
  min-height: 59px;
  gap: 8px;
  padding: 7px 0px;
}

#inventory-panel #storylines-container .badge-item.locked .badge-icon > img:first-child {
  opacity: 1;
}

#inventory-panel #storylines-container .badge-lock {
  display: none;
}

#inventory-panel #storylines-container .badge-label {
  font: 800 14.5px / 1.2 Nunito, sans-serif;
}

#inventory-panel #storylines-container .badge-label small {
  display: block;
  margin-top: 2px;
  color: rgb(107, 90, 76);
  font: 12px / 1.2 Nunito, sans-serif;
}

#inventory-panel #storylines-container .v3-story-dots {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
}

#inventory-panel #storylines-container .v3-story-dots span {
  display: block;
  border-radius: 50%;
  box-sizing: border-box;
}

#inventory-panel #inventory-help-trigger {
  display: none;
}

body:has(#context-help[data-kind="inventory"]:not([hidden])) #inventory-panel {
  visibility: hidden !important;
}

body:has(#context-help[data-kind="inventory"]:not([hidden])) #inventory-panel {
  display: none !important;
}

#context-help[data-kind="inventory"] {
  display: block;
  padding: 0px;
}

#context-help[data-kind="inventory"] .context-help__backdrop {
  background: rgba(40, 28, 18, 0.45);
}

#context-help[data-kind="inventory"] .context-help__paper {
  position: absolute;
  top: 200px;
  left: 22px;
  right: 22px;
  width: auto;
  min-height: 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 22px 40px;
  border: 2.5px solid rgb(58, 42, 31);
  border-radius: 6px;
  background-color: rgb(242, 243, 236);
  background-image: linear-gradient(90deg, transparent 24px, rgba(163, 58, 50, 0.4) 24px, rgba(163, 58, 50, 0.4) 25.5px, transparent 25.5px), repeating-linear-gradient(0deg, transparent 0px, transparent 23px, rgba(95, 150, 190, 0.16) 23px, rgba(95, 150, 190, 0.16) 24px);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 4px, rgba(0, 0, 0, 0.3) 0px 12px 24px 4px;
  transform: rotate(-0.8deg);
  box-sizing: border-box;
  text-align: left;
}

#context-help[data-kind="inventory"] .context-help__paper::before, #context-help[data-kind="inventory"] .context-help__paper::after {
  display: none;
}

#context-help[data-kind="inventory"] .context-help__paper h2 {
  min-height: 30px;
  margin: -4px 0px 0px;
  padding-left: 92px;
  font: 30px / 1 "Patrick Hand", cursive;
}

#context-help[data-kind="inventory"] .context-help__subtitle {
  display: block;
  min-height: 18px;
  margin: -9px 0px 9px;
  padding-left: 92px;
  color: rgb(107, 90, 76);
  font: 12px / 1.25 Nunito, sans-serif;
}

#context-help[data-kind="inventory"] #context-help-copy {
  display: none;
}

#context-help[data-kind="inventory"] .context-help__grga {
  inset: -30px auto auto 35px;
  width: auto;
  height: 104px;
  max-height: none;
  filter: drop-shadow(rgb(255, 255, 255) 2px 0px 0px) drop-shadow(rgb(255, 255, 255) -2px 0px 0px) drop-shadow(rgb(255, 255, 255) 0px 2px 0px) drop-shadow(rgb(255, 255, 255) 0px -2px 0px) drop-shadow(rgba(0, 0, 0, 0.25) 0px 5px 5px);
}

#context-help[data-kind="inventory"] .context-help__inventory-rows {
  display: flex;
  flex-direction: column;
}

#context-help[data-kind="inventory"] .context-help__inventory-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0px;
  border-bottom: 1.5px dashed rgb(204, 197, 183);
  font: 16px / 1.38 Nunito, sans-serif;
}

#context-help[data-kind="inventory"] .context-help__inventory-row:last-child {
  border-bottom: 0px;
}

#context-help[data-kind="inventory"] .context-help__inventory-row > span:last-child {
  flex: 1 1 0%;
  text-align: left;
}

#context-help[data-kind="inventory"] .context-help__inventory-row > img, #context-help[data-kind="inventory"] .context-help__story-dots {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

#context-help[data-kind="inventory"] .context-help__story-dots {
  gap: 3px;
}

#context-help[data-kind="inventory"] .context-help__story-dots i {
  width: 11px;
  height: 11px;
  border: 1.8px solid rgb(58, 42, 31);
  border-radius: 50%;
  box-sizing: border-box;
}

#context-help[data-kind="inventory"] .context-help__story-dots i:first-child {
  background: rgb(124, 191, 87);
}

#context-help[data-kind="inventory"] .context-help__story-dots i:nth-child(2) {
  background: rgb(242, 177, 52);
}

#context-help[data-kind="inventory"] .context-help__story-dots i:last-child {
  border: 1.8px dashed rgb(163, 156, 142);
}

#context-help[data-kind="inventory"] #context-help-ok {
  align-self: center;
  min-height: 50px;
  margin-top: 4px;
  padding: 4px 20px;
  border: 2.5px solid rgb(58, 42, 31);
  border-radius: 12px;
  background: rgb(47, 107, 69);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px, rgb(58, 42, 31) 0px 6px 0px 3px;
  color: rgb(255, 255, 255);
  font: 22px / 1 "Patrick Hand", cursive;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#unity-wrapper:has(#active-tasks-panel:not([hidden])) #btn-active-tasks {
  outline: rgb(242, 177, 52) solid 3px;
  outline-offset: 2px;
}

#active-tasks-panel:not([hidden]) {
  box-sizing: border-box;
  right: 10px !important;
  left: 10px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0px !important;
  padding: 28px 34px 15px 42px !important;
  overflow: visible !important;
  border: 2.5px solid rgb(58, 42, 31) !important;
  border-radius: 12px 18px 18px 12px !important;
  background: rgb(47, 107, 69) !important;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 24px !important;
}

#active-tasks-panel:not([hidden])::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7px 19px 7px 7px;
  border: 2px solid rgb(58, 42, 31);
  border-radius: 4px 10px 10px 4px;
  background-color: rgb(242, 243, 236);
  background-image: linear-gradient(90deg, transparent 22px, rgba(163, 58, 50, 0.4) 22px, rgba(163, 58, 50, 0.4) 23.5px, transparent 23.5px), repeating-linear-gradient(0deg, transparent 0px, transparent 23px, rgba(95, 150, 190, 0.16) 23px, rgba(95, 150, 190, 0.16) 24px), repeating-linear-gradient(90deg, transparent 0px, transparent 23px, rgba(95, 150, 190, 0.16) 23px, rgba(95, 150, 190, 0.16) 24px);
}

#active-tasks-panel:not([hidden])::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -5px;
  right: 4px;
  bottom: -5px;
  width: 11px;
  border: 2px solid rgb(58, 42, 31);
  border-radius: 3px;
  background: rgb(138, 95, 58);
  box-sizing: border-box;
}

#active-tasks-panel .active-tasks-header, #active-tasks-panel #active-tasks-list, #active-tasks-panel #active-tasks-geo-hint, #active-tasks-panel #active-tasks-empty {
  position: relative;
  z-index: 3;
}

#active-tasks-panel .active-tasks-header {
  margin: var(--notebook-header-offset) 0px 18px;
}

#active-tasks-panel .active-tasks-header::before, #active-tasks-panel .active-tasks-header::after {
  content: "";
  position: absolute;
  top: -55px;
  width: 34px;
  height: 52px;
  background: center center / contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(rgba(58, 42, 31, 0.25) 0px 2px 2px);
}

#active-tasks-panel .active-tasks-header::before {
  right: 75px;
  background-image: url("../img/v3/ikone/tzjb-kartica-smanji.svg");
}

#active-tasks-panel .active-tasks-header::after {
  right: 40px;
  background-image: url("../img/v3/ikone/tzjb-kartica-prosiri.svg");
}

#active-tasks-panel #active-tasks-title {
  font: calc(30px * var(--panel-header-scale)) / 1 "Patrick Hand", cursive;
}

#active-tasks-panel .context-help-trigger {
  display: none;
}

#active-tasks-panel #active-tasks-close {
  position: absolute;
  top: -55px;
  right: -5px;
  width: 34px;
  height: 52px;
  border: 0px;
  border-radius: 0px;
  background: url("../img/v3/ikone/tzjb-kartica-zatvori.svg") center center / contain no-repeat;
  color: transparent;
  filter: drop-shadow(rgba(58, 42, 31, 0.25) 0px 2px 2px);
}

#active-tasks-panel #active-tasks-list {
  display: block;
}

#active-tasks-panel #active-tasks-list li {
  margin: 0px;
  padding: 0px;
  border-width: 0px 0px 1.5px;
  border-style: none none dashed;
  border-color: currentcolor currentcolor rgb(200, 186, 162);
  border-image: none;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
}

#active-tasks-panel #active-tasks-list li:last-child {
  border-bottom: 0px;
}

#active-tasks-panel .active-tasks-row-button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 70px;
  padding: 7px 0px;
  border: 0px;
  background: transparent;
  box-shadow: none;
}

#active-tasks-panel .active-tasks-icon {
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  object-fit: contain;
}

#active-tasks-panel .active-tasks-icon[hidden] {
  display: none;
}

#active-tasks-panel .active-tasks-copy {
  flex: 1 1 0%;
  min-width: 0px;
}

#active-tasks-panel .active-tasks-copy strong {
  overflow: hidden;
  color: rgb(58, 42, 31);
  font: 800 16px / 1.2 Nunito, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#active-tasks-panel .active-tasks-copy small {
  color: rgb(107, 90, 76);
  font: 14px / 1.2 Nunito, sans-serif;
}

#active-tasks-panel .active-tasks-arrow {
  flex: 0 0 auto;
  color: rgb(107, 90, 76);
  font: 24px / 1 "Patrick Hand", cursive;
}

#left-map-controls #btn-map-layers {
  width: 50px;
  height: 50px;
}

#btn-map-layers[aria-expanded="true"] {
  outline: rgb(242, 177, 52) solid 3px;
  outline-offset: 2px;
}

#left-map-controls #hospitality-category-drawer {
  top: 58px;
  left: 0px;
  display: grid;
  gap: 8px;
  width: 50px;
  max-height: none;
  overflow: visible;
  padding: 0px;
  border: 0px;
  border-radius: 0px;
  background: none;
  box-shadow: none;
}

#left-map-controls #hospitality-category-drawer[hidden] {
  display: none;
}

#hospitality-category-drawer .btn-ui {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  min-height: 50px;
  padding: 0px;
  border: 0px;
  border-radius: 50%;
  background: white;
  box-shadow: rgba(58, 42, 31, 0.28) 1px 3px 3px;
  cursor: pointer;
}

#hospitality-category-drawer .btn-ui img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

#hospitality-category-drawer #bicycle-trail-state-label {
  top: 4px;
  left: 62px;
  display: block;
}

#unity-left-ui > .btn-ui:nth-child(2), #persistent-language-control {
  transition: top 150ms;
}

#unity-left-ui:has(#hospitality-category-drawer:not([hidden])) > .btn-ui:nth-child(2) {
  top: 272px;
}

#unity-wrapper:has(#hospitality-category-drawer:not([hidden])) #persistent-language-control {
  top: 334px;
}

@media (prefers-reduced-motion: reduce) {
  #unity-left-ui > .btn-ui:nth-child(2), #persistent-language-control {
    transition: none;
  }
}

#unity-wrapper:has(#help-panel.help-panel--minimap-note.show)::before {
  content: "";
  position: absolute;
  inset: 0px;
  z-index: 49;
  background: rgba(40, 28, 18, 0.45);
  pointer-events: none;
}

#help-panel.help-panel--minimap-note.show {
  box-sizing: border-box;
  inset: 150px 22px auto !important;
  width: calc(100% - 44px) !important;
  height: 535px !important;
  max-height: none !important;
  padding: 0px !important;
  overflow: visible !important;
  border: 2.5px solid rgb(58, 42, 31) !important;
  border-radius: 4px 10px 10px 4px !important;
  background-color: var(--v3-paper) !important;
  background-image: linear-gradient(90deg, transparent 22px, var(--v3-margin) 22px 23.5px, transparent 23.5px),
    repeating-linear-gradient(0deg, transparent 0 23px, var(--v3-grid) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--v3-grid) 23px 24px) !important;
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 4px, rgba(0, 0, 0, 0.3) 0px 12px 24px 4px !important;
  transform: none !important;
}

#help-panel.help-panel--minimap-note .paper-panel__visual-stack, #help-panel.help-panel--minimap-note .blue-content-box-header {
  display: none !important;
}

#help-panel.help-panel--minimap-note .help-panel__body {
  box-sizing: border-box;
  position: absolute !important;
  inset: 0px !important;
  width: auto !important;
  height: auto !important;
  padding: 18px 18px 22px 40px !important;
  overflow: visible !important;
  border: 0px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#help-panel.help-panel--minimap-note .v3-minimap-help {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 0px;
  color: rgb(58, 42, 31);
  text-align: left;
}

#help-panel.help-panel--minimap-note .v3-minimap-help__grga {
  position: absolute;
  top: -30px;
  left: 22px;
  height: 104px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(rgb(255, 255, 255) 2px 0px 0px) drop-shadow(rgb(255, 255, 255) -2px 0px 0px) drop-shadow(rgb(255, 255, 255) 0px 2px 0px) drop-shadow(rgb(255, 255, 255) 0px -2px 0px) drop-shadow(rgba(0, 0, 0, 0.25) 0px 5px 5px);
}

#help-panel.help-panel--minimap-note .v3-minimap-help h2 {
  min-height: 30px;
  margin: -4px 0px 0px;
  padding-left: 92px;
  padding-bottom: 7px;
  border-bottom: 1.5px solid rgb(138, 106, 58);
  font: 30px / 1 "Patrick Hand", cursive;
}

#help-panel.help-panel--minimap-note .v3-minimap-help__subtitle {
  margin: -9px 0px 7px;
  padding-left: 92px;
  color: rgb(107, 90, 76);
  font: 12px / 1.25 Nunito, sans-serif;
}

#help-panel.help-panel--minimap-note .v3-minimap-help__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0px;
  border-bottom: 1.5px dashed rgb(204, 197, 183);
  font: 16px / 1.38 Nunito, sans-serif;
}

#help-panel.help-panel--minimap-note .v3-minimap-help__row:nth-of-type(3) {
  border-bottom: 0px;
}

#help-panel.help-panel--minimap-note .v3-minimap-help__row p {
  flex: 1 1 0%;
  margin: 0px;
  font: inherit;
}

#help-panel.help-panel--minimap-note .v3-minimap-help__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

#help-panel.help-panel--minimap-note span.v3-minimap-help__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px dashed rgb(163, 156, 142);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  color: rgb(138, 129, 115);
  font: 19px / 1 "Patrick Hand", cursive;
  box-sizing: border-box;
}

#help-panel.help-panel--minimap-note .v3-minimap-help__note {
  margin: 15px 0px 0px;
  padding: 0px;
  border: 0px;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
  color: rgb(107, 90, 76);
  font: 15px / 1.35 Nunito, sans-serif;
}

#help-panel.help-panel--minimap-note .v3-minimap-help__acknowledge {
  align-self: center;
  min-height: 50px;
  margin: auto 0px 30px;
  padding: 4px 20px;
  border: 2.5px solid rgb(58, 42, 31);
  border-radius: 12px;
  background: rgb(47, 107, 69);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px, rgb(58, 42, 31) 0px 6px 0px 3px;
  color: rgb(255, 255, 255);
  font: 22px / 1 "Patrick Hand", cursive;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#inventory-unlock-notification {
  bottom: 112px;
}

#inventory-unlock-notification .inventory-unlock-notification-card {
  min-height: 132px;
  padding: 18px 16px 16px 92px;
  border: 2.5px solid rgb(58, 42, 31);
  border-radius: 6px 6px 12px 12px;
  background-color: rgb(242, 243, 236);
  background-image: linear-gradient(90deg, transparent 80px, rgba(163, 58, 50, 0.45) 80px, rgba(163, 58, 50, 0.45) 81.5px, transparent 81.5px), repeating-linear-gradient(0deg, transparent 0px, transparent 23px, rgba(95, 150, 190, 0.18) 23px, rgba(95, 150, 190, 0.18) 24px), repeating-linear-gradient(90deg, transparent 0px, transparent 23px, rgba(95, 150, 190, 0.18) 23px, rgba(95, 150, 190, 0.18) 24px);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 4px, rgba(0, 0, 0, 0.35) 0px 14px 26px 4px;
  transform: none;
}

#inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-card::after {
  display: none;
}

#inventory-unlock-notification .inventory-unlock-notification-thumb {
  left: 8px;
  top: 14px;
  width: 66px;
  height: 66px;
}

#inventory-unlock-notification .inventory-unlock-notification-thumb .inventory-unlock-notification-collected-check {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

#inventory-unlock-notification .inventory-unlock-notification-collected-check.hidden, #distancePopup .distance-popup__collected-check.hidden {
  display: none;
}

#inventory-unlock-notification .inventory-unlock-notification-body {
  display: grid;
  grid-template-columns: max-content minmax(0px, 1fr);
  align-content: center;
  align-items: center;
  gap: 6px 7px;
}

#inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-kind, #inventory-unlock-notification[data-kind="achievement"] .inventory-unlock-notification-kind {
  display: none;
}

#inventory-unlock-notification .inventory-unlock-notification-title {
  grid-column: 1 / -1;
  padding-right: 14px;
  color: rgb(58, 42, 31);
  font: 27px / 1.02 "Patrick Hand", cursive;
  word-break: normal;
}

#inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-subtitle:not(.hidden) {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: none;
  padding: 1px 8px 1px 6px;
  border: 2px solid rgb(58, 42, 31);
  border-radius: 999px;
  background: rgb(242, 177, 52);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px;
  color: rgb(58, 42, 31);
  font: 18px / 1 "Patrick Hand", cursive;
  transform: none;
}

#inventory-unlock-notification[data-kind="location"] .inventory-unlock-notification-subtitle:not(.hidden)::after {
  content: "";
  width: 16px;
  height: 16px;
  background: url("../img/v3/ui-canvas/hud-bodovi-zvjezdica.svg") center center / contain no-repeat;
}

#inventory-unlock-notification .inventory-unlock-notification-detail {
  color: rgb(107, 90, 76);
  font: 15px / 1.42 Nunito, sans-serif;
}

#distancePopup, #geoPopup {
  bottom: 112px;
}

#distancePopup .message-panel-shell, #geoPopup .message-panel-shell {
  display: block;
  min-height: 132px;
  padding: 18px 16px 16px 92px;
  border: 2.5px solid rgb(58, 42, 31);
  border-radius: 6px 6px 12px 12px;
  background-color: rgb(242, 243, 236);
  background-image: linear-gradient(90deg, transparent 80px, rgba(163, 58, 50, 0.45) 80px, rgba(163, 58, 50, 0.45) 81.5px, transparent 81.5px), repeating-linear-gradient(0deg, transparent 0px, transparent 23px, rgba(95, 150, 190, 0.18) 23px, rgba(95, 150, 190, 0.18) 24px), repeating-linear-gradient(90deg, transparent 0px, transparent 23px, rgba(95, 150, 190, 0.18) 23px, rgba(95, 150, 190, 0.18) 24px);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 4px, rgba(0, 0, 0, 0.35) 0px 14px 26px 4px;
  box-sizing: border-box;
}

#distancePopup[data-message-kind="correct"] .message-panel-shell, #distancePopup[data-message-kind="incorrect"] .message-panel-shell {
  min-height: 100px;
}

#distancePopup .v3-popup-grga, #geoPopup .v3-popup-grga {
  bottom: calc(100% - 62px);
  filter: drop-shadow(rgb(255, 255, 255) 2px 0px 0px) drop-shadow(rgb(255, 255, 255) -2px 0px 0px) drop-shadow(rgb(255, 255, 255) 0px 2px 0px) drop-shadow(rgb(255, 255, 255) 0px -2px 0px) drop-shadow(rgba(0, 0, 0, 0.3) 0px 6px 6px);
}

#distancePopup .distance-popup__body, #geoPopup .geo-popup__body {
  width: 100%;
}

#distancePopup .message-panel-content {
  display: block;
  text-align: left;
}

#distancePopup .message-panel-text, #geoPopup .message-panel-text {
  margin: 0px;
  color: rgb(58, 42, 31);
  font: 15px / 1.42 Nunito, sans-serif;
  text-align: left;
}

#distancePopup .message-panel-text--meta-title {
  margin: 0px 0px 6px;
  padding-right: 22px;
  font: 27px / 1.02 "Patrick Hand", cursive;
}

#distancePopup .message-panel-text--meta-detail {
  color: rgb(58, 42, 31);
  font: 15px / 1.42 Nunito, sans-serif;
}

#distancePopup .message-panel-distance-chip {
  display: inline-block;
  margin: 0px 0px 6px;
  padding: 1px 8px;
  border: 2px solid rgb(58, 42, 31);
  border-radius: 5px;
  background: rgb(242, 177, 52);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px;
  color: rgb(58, 42, 31);
  font: 21px / 1 "Patrick Hand", cursive;
  transform: rotate(-2deg);
}

#distancePopup[data-message-kind="distance"] .message-panel-shell, #distancePopup[data-message-kind="too-far"] .message-panel-shell {
  min-height: 132px;
}

#distancePopup[data-message-kind="incorrect"] .message-panel-text--meta-title, #distancePopup[data-message-kind="distance"] .message-panel-text--meta-title {
  color: rgb(163, 58, 50);
}

#distancePopup .distance-popup__icon {
  top: 14px;
  width: 66px;
  height: 66px;
  filter: drop-shadow(rgba(58, 42, 31, 0.35) 0px 3px 3px);
}

#distancePopup .distance-popup__collected-check {
  position: absolute;
  left: 58px;
  top: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  filter: drop-shadow(rgba(58, 42, 31, 0.35) 0px 2px 3px);
}

#distancePopup .v3-popup-close, #geoPopup .v3-popup-close {
  top: -10px;
  right: 16px;
  width: 30px;
  height: 46px;
}

#distancePopup[data-message-kind="correct"] .v3-popup-close, #distancePopup[data-message-kind="incorrect"] .v3-popup-close, #distancePopup[data-message-kind="distance"] .v3-popup-close {
  display: none !important;
}

#distancePopup .distance-popup__distance-line {
  display: inline-block;
  margin: 6px 0px 0px;
  padding: 0px;
  border: 0px;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
  font: 15px / 1.42 Nunito, sans-serif;
}

#geoPopup .geo-popup__actions {
  background: transparent;
}

#geoPopup .geo-popup__icon {
  position: absolute;
  top: 14px;
  left: 8px;
  width: 66px;
  height: 66px;
  object-fit: contain;
  filter: drop-shadow(rgba(58, 42, 31, 0.35) 0px 3px 3px);
}

#geoPopup .geo-popup__title {
  margin: 0px 0px 6px;
  padding-right: 22px;
  color: rgb(58, 42, 31);
  font: 27px / 1.02 "Patrick Hand", cursive;
}

#geoPopup .geo-popup__body .message-panel-text {
  color: rgb(58, 42, 31);
  font: 15px / 1.42 Nunito, sans-serif;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="controls"] .v3-tutorial__scene {
  background-position: 30% 20%;
  background-size: 150% auto;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="controls"] .v3-tutorial__grga {
  right: -14px;
  bottom: -44px !important;
  height: 200px !important;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="controls"] .v3-tutorial__scene::before {
  top: 13px;
  left: 12px;
  right: 12px;
  height: 58px;
  padding: 13px 8px 0px 50px;
  border: 3px solid rgb(58, 42, 31);
  border-radius: 14px;
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px, rgb(47, 107, 69) 2px 4px 0px;
  font: 22px / 1 "Patrick Hand", cursive;
  text-align: left;
  box-sizing: border-box;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="controls"] .v3-tutorial__icons img:first-child {
  top: 27px;
  left: 31px;
  width: 31px;
  height: 31px;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="controls"] .v3-tutorial__icons {
  top: 0px !important;
  left: 0px !important;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="controls"] .v3-tutorial__icons::after {
  content: "";
  position: absolute;
  top: 61px;
  left: 80px;
  width: 165px;
  border-bottom: 2px dashed rgb(170, 160, 150);
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="controls"] {
  position: relative;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="controls"] .welcome-pager__controls button:last-child {
  position: absolute;
  right: 12px;
  bottom: 80px;
  left: 12px;
  width: calc(100% - 24px);
  min-height: 64px;
}

#context-help[hidden] {
  display: none !important;
  pointer-events: none !important;
}

#help-btn-drag, #index-btn-drag, #location-btn-drag {
  display: none !important;
}

#index-panel .context-help-trigger {
  display: none !important;
}

#index-panel .blue-content-box-title {
  left: calc(var(--panel-shell-content-left) + var(--panel-content-inline-padding)) !important;
  top: 16px !important;
  padding-left: 0 !important;
}

#index-panel:has(#index-panel-body.locations-grouped-view) .blue-content-box-title {
  left: calc(var(--panel-shell-content-left) + 32px) !important;
}

#index-panel #index-category-chips {
  min-height: 56px;
  margin-top: 0px;
  margin-left: 0px;
  width: 100%;
}

#index-panel #index-panel-body.locations-grouped-view {
  padding-left: 32px;
}

#index-panel #index-panel-body .badge-label > span {
  font-weight: 800 !important;
}

#location-panel .location-panel__mascot {
  display: none !important;
}

#location-panel.ui-panel--paper-stack .paper-panel__visual-stack {
  top: 0px !important;
  bottom: 0px !important;
}

#location-panel.ui-panel--composition:not(.box-minimized) .panel-controls {
  /* Use the same outer-shell anchor in half and full view. */
  top: 0px !important;
  transform: none;
}

#location-panel {
  z-index: calc(var(--ui-layer-control-buttons) + 2);
}

#index-panel .index-category-chip small {
  margin-left: 2px;
  font: 800 14px / 1 Nunito, sans-serif;
}

#index-panel #index-panel-body.locations-grouped-view .story-group-title {
  position: relative;
  padding-right: 47px;
}

#index-panel .story-group-title .index-group-count {
  position: absolute;
  top: 8px;
  right: 0px;
  color: var(--v3-ink);
  font: 800 16px / 1.1 Nunito, sans-serif;
}

#index-panel .story-group-title .inventory-section-toggle {
  position: absolute;
  inset: 0px;
  opacity: 0;
}

#inventory-panel .progress-summary-sticky .progressbar-bg {
  overflow: visible !important;
}

#inventory-panel .progress-summary-sticky .progressbar-fill::after {
  display: none;
}

#inventory-panel .panel-controls.panel-header-controls {
  top: -26px;
  right: 28px;
  display: flex;
  gap: 2px;
}

#inventory-panel .panel-controls.panel-header-controls .panel-btn {
  display: block;
  width: 34px;
  height: 52px;
  padding: 0px;
  border: 0px;
  background: transparent;
  box-shadow: none;
}

#inventory-panel .panel-controls.panel-header-controls .panel-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#inventory-panel.ui-panel.inventory-compact:not(.box-dragged) {
  bottom: 12px !important;
}

#inventory-panel[data-tab="badges"] [data-tab-section="badges"] > .badges-title, #inventory-panel[data-tab="badges"] [data-tab-section="badges"] > .inventory-section-progressbar-wrapper {
  display: none;
}

#inventory-panel[data-tab="badges"] [data-tab-section="badges"] .badges-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  gap: 22px 14px;
  padding: 20px 0px 28px;
}

#inventory-panel[data-tab="badges"] .badge-item[data-achievement-key] {
  width: auto;
  min-width: 0px;
  max-width: none;
  padding: 0px;
  border: 0px;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
  gap: 3px;
}

#inventory-panel[data-tab="badges"] .badge-item[data-achievement-key] .badge-icon {
  width: 88px;
  height: 88px;
  padding: 0px;
  border-radius: 0px;
  background: transparent;
}

#inventory-panel[data-tab="badges"] .badge-item[data-achievement-key] .badge-icon > img:first-child {
  width: 100%;
  height: 100%;
  border-radius: 0px;
  filter: drop-shadow(rgba(58, 42, 31, 0.25) 0px 2px 2px);
}

#inventory-panel[data-tab="badges"] .badge-item[data-achievement-key].locked .badge-icon > img:first-child {
  opacity: 0.48;
  filter: grayscale(1);
}

#inventory-panel[data-tab="badges"] .badge-item[data-achievement-key] .badge-lock, #inventory-panel[data-tab="badges"] .badge-item[data-achievement-key] .badge-checkmark {
  right: -2px;
  top: 0px;
  width: 18px !important;
  height: 18px !important;
}

#inventory-panel[data-tab="badges"] .badge-item[data-achievement-key] .badge-label {
  min-height: 0px;
  color: var(--v3-ink);
  font: 800 15px / 1.25 Nunito, sans-serif;
}

#inventory-panel[data-tab="badges"] .badge-item[data-achievement-key] .badge-description {
  color: rgb(107, 90, 76);
  font: 13px / 1.3 Nunito, sans-serif;
  text-align: center;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="location"] .v3-tutorial__icons img:nth-child(2) {
  z-index: 3;
  top: 104px;
  left: 120px;
  width: 72px;
  height: 72px;
}

#help-panel.help-panel--welcome .v3-tutorial[data-layout="controls"] .v3-tutorial__scene::after {
  content: "0";
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 16px;
  width: 46px;
  height: 32px;
  padding: 3px 27px 0px 0px;
  background: url("../img/v3/ui-canvas/hud-bodovi-zvjezdica.svg") right center / 25px 25px no-repeat;
  color: var(--v3-ink);
  font: 800 18px / 1 Nunito, sans-serif;
  text-align: right;
  box-sizing: border-box;
}

#index-panel #index-panel-body.locations-grouped-view .badge-item.is-visited::after {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--v3-ink);
  border-radius: 50%;
  background: rgb(117, 187, 87);
}

#inventory-search-toggle {
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  gap: 5px;
  width: 112px;
  height: 100%;
  padding: 4px 3px 5px 8px;
  border: 0px;
  background: transparent;
  color: rgb(107, 90, 76);
  font: 21px / 1 "Patrick Hand", cursive;
  cursor: pointer;
  pointer-events: auto;
}

#inventory-search-toggle svg {
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
}

#inventory-search-toggle:focus-visible {
  outline: rgb(242, 177, 52) solid 3px;
  outline-offset: 3px;
}

#inventory-panel #storylines-container .badge-icon, #inventory-panel #cultural-treasures-container .badge-icon {
  border: 0px;
  background: transparent;
  box-shadow: none;
}

#inventory-panel #storylines-container .badge-item.locked .badge-icon > img:first-child, #inventory-panel #cultural-treasures-container .badge-item.locked .badge-icon > img:first-child {
  opacity: 1;
  filter: none;
}

#inventory-panel #storylines-container .v3-story-dots {
  gap: 3px;
}

#inventory-panel #storylines-container .v3-story-dots span {
  width: 13px;
  height: 13px;
  border: 2px dashed rgb(163, 156, 142);
}

#inventory-panel #storylines-container .v3-story-dots span:first-child {
  border: 2px dashed rgb(163, 156, 142);
  background: transparent;
}

#inventory-panel #storylines-container .v3-story-dots span.is-done {
  border: 2px solid rgb(58, 42, 31);
  background: rgb(124, 191, 87);
}

#inventory-panel #storylines-container .v3-story-dots span.is-next {
  border: 2px solid rgb(58, 42, 31);
  background: rgb(242, 177, 52);
}

#inventory-panel [data-tab-section="locations"] > .badges-title, #inventory-panel [data-tab-section="locations"] > .progressbar-wrapper, #inventory-panel [data-tab-section="locations"] > .inventory-section-progressbar-wrapper {
  display: none;
}

#inventory-panel [data-tab-section="locations"] {
  padding-top: 0px;
}

#inventory-panel [data-tab-section="locations"]::before {
  display: none;
}

#inventory-panel #cultural-treasures-container .story-group {
  margin: 0px;
  border: 0px;
  background: transparent;
  box-shadow: none;
}

#inventory-panel #cultural-treasures-container .story-group-title {
  display: none;
}

#inventory-panel #cultural-treasures-container .story-group-content {
  display: block;
  margin: 0px;
  padding: 0px;
}

:is(#inventory-panel #cultural-treasures-container .badges-container, .notebook-collected-list) {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

:is(#inventory-panel #cultural-treasures-container, .notebook-collected-list) .badge-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: 0 0 auto;
  max-width: none;
  min-width: 0;
  flex: 0 0 auto;
  min-height: 60px;
  margin: 0px;
  padding: 6px 2px;
  border-width: 0px 0px 1px;
  border-style: none none dashed;
  border-color: currentcolor currentcolor rgb(200, 186, 162);
  border-image: none;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
}

:is(#inventory-panel #cultural-treasures-container, .notebook-collected-list) .badge-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0px;
}

:is(#inventory-panel #cultural-treasures-container, .notebook-collected-list) .badge-icon > img:first-child {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

:is(#inventory-panel #cultural-treasures-container, .notebook-collected-list) .badge-lock, :is(#inventory-panel #cultural-treasures-container, .notebook-collected-list) .badge-checkmark {
  display: none;
}

:is(#inventory-panel #cultural-treasures-container, .notebook-collected-list) .badge-label {
  flex: 1 1 auto;
  width: auto;
  min-width: 0px;
  color: rgb(58, 42, 31);
  font: 800 14.5px / 1.2 Nunito, sans-serif;
  text-align: left;
  white-space: normal;
}

:is(#inventory-panel #cultural-treasures-container, .notebook-collected-list) .badge-item::after {
  content: "";
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  border: 2px dashed rgb(163, 156, 142);
  border-radius: 50%;
  box-sizing: border-box;
}

:is(#inventory-panel #cultural-treasures-container, .notebook-collected-list) .badge-item.unlocked::after {
  border: 2px solid rgb(58, 42, 31);
  background: url("../img/newui/Tick.png") center center / 12px 12px no-repeat rgb(124, 191, 87);
}

#inventory-panel[data-tab="badges"] .badge-item[data-achievement-key] .badge-description {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  white-space: normal;
}

#location-panel.ui-panel--floating-shell:not(.box-dragged) {
  top: auto !important;
  bottom: 12px !important;
  transition: height 460ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms !important;
}

#location-panel.ui-panel--floating-shell:not(.box-half):not(.box-minimized):not(.box-dragged) {
  max-height: none;
  height: max(210px, 100dvh - 162px) !important;
}

#location-panel.ui-panel--floating-shell.box-half:not(.box-dragged) {
  height: var(--panel-default-height) !important;
}

#location-panel.ui-panel--paper-stack.box-minimized {
  background: var(--v3-paper);
  border: 4px solid var(--v3-cover);
  outline: 2px solid var(--v3-ink);
  border-radius: 16px;
  box-shadow: rgba(48, 35, 25, 0.3) 0px 5px 10px;
  box-sizing: border-box;
}

#location-panel.ui-panel--paper-stack.box-minimized .paper-panel__visual-stack, #location-panel.ui-panel--paper-stack.box-minimized .v3-location-category {
  display: none !important;
}

#location-panel.ui-panel--paper-stack.box-minimized .blue-content-box-header {
  height: 100%;
  top: 0px !important;
}

#location-panel.ui-panel--paper-stack.box-minimized .blue-content-box-title {
  display: flex;
  width: 100% !important;
  height: 100% !important;
  min-height: 0px !important;
  padding: 0px !important;
  align-items: center !important;
}

#location-panel.ui-panel--paper-stack.box-minimized .panel-title-text {
  text-overflow: ellipsis;
  display: block !important;
  max-height: none !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font: 700 calc(19px * var(--panel-header-scale)) / 1.1 "Patrick Hand", cursive !important;
}

#location-panel.ui-panel--paper-stack.box-minimized .panel-controls {
  top: -28px !important;
  right: 10px !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #location-panel.ui-panel--floating-shell:not(.box-dragged) {
    transition: none !important;
  }
}

#inventory-panel.ui-panel:not(.box-dragged) {
  top: auto !important;
  bottom: 12px !important;
  height: max(210px, 100dvh - 112px) !important;
  transition: height 460ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms !important;
}

#inventory-panel.ui-panel.inventory-compact:not(.box-dragged) {
  top: auto !important;
  height: min(100dvh - 112px, max(260px, 50dvh + 15px)) !important;
}

#inventory-panel.ui-panel.inventory-minimized:not(.box-dragged) {
  top: auto !important;
  height: 72px !important;
}

#inventory-panel.inventory-minimized .progress-container-content {
  display: none !important;
}

#inventory-panel.inventory-minimized .progress-container-inner {
  overflow: hidden;
  padding: 12px 18px 0px 28px;
}

#inventory-panel.inventory-minimized .inventory-v3-title {
  font: calc(25px * var(--panel-header-scale)) / 1.1 "Patrick Hand", cursive;
  white-space: nowrap;
  margin: 0px !important;
}

#index-panel.ui-panel--floating-shell.show:not(.box-dragged) {
  top: auto !important;
  bottom: 12px !important;
  height: max(210px, 100dvh - 112px) !important;
  transition: height 460ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms !important;
}

#index-panel.ui-panel--floating-shell.show.box-half:not(.box-dragged) {
  top: auto !important;
  height: min(100dvh - 112px, max(260px, 50dvh + 15px)) !important;
}

#index-panel.box-half #index-category-chips {
  flex-shrink: 0;
  min-height: 50px;
}

#index-panel.ui-panel--floating-shell.show.box-minimized:not(.box-dragged) {
  top: auto !important;
  height: 72px !important;
}

#index-panel.box-minimized .paper-panel__visual-stack {
  display: none !important;
}

#index-panel.box-minimized .blue-content-box-title {
  display: flex;
  align-items: center;
  top: 0px !important;
  left: 12px !important;
  right: 120px !important;
  width: auto !important;
  height: 100% !important;
  padding: 0px !important;
}

#index-panel.box-minimized .panel-title-text {
  white-space: nowrap;
  font: calc(25px * var(--panel-header-scale)) / 1.1 "Patrick Hand", cursive !important;
}

#active-tasks-panel:not([hidden]) {
  top: auto !important;
  bottom: 12px !important;
  height: min(100dvh - 112px, max(260px, 50dvh + 15px)) !important;
  transition: height 460ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#active-tasks-panel.tasks-full:not([hidden]) {
  height: max(210px, 100dvh - 112px) !important;
}

#active-tasks-panel.tasks-minimized:not([hidden]) {
  height: 72px !important;
  padding: 12px 28px 0px 32px !important;
}

#active-tasks-panel.tasks-minimized #active-tasks-list, #active-tasks-panel.tasks-minimized #active-tasks-geo-hint, #active-tasks-panel.tasks-minimized #active-tasks-empty {
  display: none !important;
}

#active-tasks-panel.tasks-minimized #active-tasks-title {
  font-size: calc(25px * var(--panel-header-scale));
  white-space: nowrap;
}

#active-tasks-panel #active-tasks-list {
  max-height: calc(100% - 55px - var(--notebook-header-offset));
  overflow-y: auto;
}

#active-tasks-panel .active-tasks-header::before, #active-tasks-panel .active-tasks-header::after {
  display: none !important;
}

#active-tasks-panel .active-tasks-controls {
  position: absolute;
  top: -55px;
  right: -5px;
  display: flex;
  gap: 2px;
  z-index: 5;
}

#active-tasks-panel.tasks-minimized .active-tasks-controls {
  top: -38px;
}

#active-tasks-panel .active-tasks-controls button, #active-tasks-panel #active-tasks-close {
  display: block;
  width: 34px;
  height: 52px;
  padding: 0px;
  border: 0px;
  box-shadow: none;
  filter: drop-shadow(rgba(58, 42, 31, 0.25) 0px 2px 2px);
  cursor: pointer;
  position: static !important;
  background: none !important;
}

#active-tasks-panel .active-tasks-controls img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  #inventory-panel.ui-panel:not(.box-dragged), #index-panel.ui-panel--floating-shell.show:not(.box-dragged), #active-tasks-panel:not([hidden]) {
    transition: none !important;
  }
}

:root {
  --hud-panel-top: calc(var(--screen-safe-top) + 68px);
}

#unity-wrapper.hud-suppressed #unity-ui, #unity-wrapper.hud-suppressed #unity-left-ui, #unity-wrapper.hud-suppressed #inventory-score-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

#location-panel, #inventory-panel, #index-panel, #help-panel, #active-tasks-panel {
  z-index: var(--ui-layer-panel) !important;
}

#context-help:not([hidden]) {
  z-index: var(--ui-layer-popup) !important;
}

#location-panel.ui-panel--floating-shell:not(.box-half):not(.box-minimized):not(.box-dragged), #inventory-panel.ui-panel:not(.inventory-compact):not(.inventory-minimized):not(.box-dragged), #index-panel.ui-panel--floating-shell.show:not(.box-half):not(.box-minimized):not(.box-dragged), #help-panel.ui-panel--floating-shell.show:not(.box-half):not(.box-minimized):not(.box-dragged), #active-tasks-panel.tasks-full:not([hidden]) {
  top: auto !important;
  bottom: 12px !important;
  height: calc(100dvh - var(--hud-panel-top) - 12px) !important;
  max-height: none !important;
}

#location-panel.ui-panel--floating-shell:not(.box-half):not(.box-minimized):not(.box-dragged) .paper-panel__visual-stack {
  top: 0px !important;
}

#location-panel.ui-panel--floating-shell:not(.box-half):not(.box-minimized):not(.box-dragged) .panel-controls {
  transform: none !important;
}

#index-panel.show:not(.box-minimized):not(.box-dragged) .index-panel__viewport {
  top: calc(96px + var(--notebook-header-offset)) !important;
}

#location-panel.ui-panel.ui-panel--floating-shell.box-minimized:not(.box-dragged), #inventory-panel.ui-panel.inventory-minimized:not(.box-dragged), #index-panel.ui-panel.ui-panel--floating-shell.show.box-minimized:not(.box-dragged), #help-panel.ui-panel.ui-panel--floating-shell.show.box-minimized:not(.box-dragged), #active-tasks-panel.tasks-minimized:not([hidden]) {
  height: 92px !important;
}

#index-panel.ui-panel--paper-stack.box-minimized, #help-panel.ui-panel--paper-stack.box-minimized {
  background-color: var(--v3-paper);
  background-image: linear-gradient(90deg, transparent 22px, var(--v3-margin) 22px 23.5px, transparent 23.5px),
    repeating-linear-gradient(0deg, transparent 0 23px, var(--v3-grid) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--v3-grid) 23px 24px);
  border: 4px solid var(--v3-cover);
  outline: 2px solid var(--v3-ink);
  border-radius: 16px;
  box-shadow: rgba(48, 35, 25, 0.3) 0px 5px 10px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  #location-panel.ui-panel--floating-shell:not(.box-half):not(.box-minimized):not(.box-dragged), #location-panel.ui-panel--floating-shell:is(.box-half, .box-minimized):not(.box-dragged) {
    left: 0px !important;
    right: 0px !important;
    width: min(100% - 32px, 520px) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

#inventory-score-panel #content-search {
  display: none;
  position: absolute;
  z-index: 4;
  inset: 0px 112px 0px 0px;
  width: auto;
  align-items: center;
  gap: 2px;
  padding: 0px 4px 0px 7px;
  box-sizing: border-box;
  pointer-events: auto;
}

#inventory-score-panel #btn-search {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0px;
  border: 0px;
  background: transparent;
  box-shadow: none;
}

#inventory-score-panel .search-input {
  flex: 1 1 auto;
  min-width: 0px;
}

#inventory-score-panel #content-search-input {
  width: 100%;
  min-width: 0px;
  height: 43px;
  padding: 0px 15px 4px 2px;
  border: 0px;
  background: transparent;
  box-shadow: none;
  color: var(--v3-ink);
  font: 22px / 1 "Patrick Hand", cursive;
  outline: none;
}

#inventory-score-panel #content-search-input::placeholder {
  color: rgb(107, 90, 76);
  opacity: 1;
}

#inventory-score-panel #content-search-input:focus-visible {
  outline: 2px solid var(--v3-yellow);
  outline-offset: -2px;
  border-radius: 5px;
}

#inventory-score-panel #btn-clear-search {
  right: -1px;
  width: 18px;
  height: 18px;
  background: transparent;
  transform: translateY(-50%);
}

#inventory-score-panel #btn-clear-search img {
  width: 18px;
  height: 18px;
  filter: brightness(0);
  opacity: 0.8;
}

#unity-wrapper:has(#index-panel.show) #inventory-score-panel {
  width: min(350px, -112px + 100vw);
}

#unity-wrapper:has(#index-panel.show) #inventory-search-toggle {
  display: none;
}

#unity-wrapper:has(#index-panel.show) #inventory-score-panel #content-search {
  display: flex;
}

#unity-wrapper:has(#index-panel.show) #inventory-score-panel::after {
  right: 116px;
}

#unity-wrapper:has(#index-panel.show) #inventory-score-panel .inventory-score-toggle-label {
  position: absolute;
  left: auto;
  right: 44px;
  width: 68px;
  margin: 0px;
}

#unity-wrapper:has(#index-panel.show) #inventory-score-toggle {
  right: 0px;
  left: auto;
  width: 112px;
}

#location-panel .content-text a {
  color: var(--v3-cover);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

#location-panel.ui-panel--floating-shell:not(.box-half):not(.box-minimized):not(.box-dragged) {
  top: auto !important;
  bottom: 12px !important;
}

@media (min-width: 768px) {
  #location-panel.ui-panel--floating-shell:not(.box-dragged), #inventory-panel.ui-panel:not(.box-dragged), #index-panel.ui-panel--floating-shell:not(.box-dragged), #index-panel.ui-panel--floating-shell:is(.box-half, .box-minimized):not(.box-dragged), #help-panel.ui-panel--floating-shell:not(.box-dragged), #help-panel.ui-panel--floating-shell:is(.box-half, .box-minimized):not(.box-dragged), #active-tasks-panel:not([hidden]) {
    left: 0px !important;
    right: 0px !important;
    width: min(100% - 32px, 520px) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

#help-panel.help-panel--welcome .welcome-pager__stage {
  min-height: 0px;
  overflow: hidden auto;
  scrollbar-width: thin;
}

/* Modular inner composition. Total height still belongs to half/full panel modes.
 * Only the three section slots participate in the grid; artwork stays on the
 * outer shell. Moving a component between slots requires
 * no header-height or footer-height measurements.
 */
.ui-panel.ui-panel--composition {
  --panel-section-inline: 43px;
  --panel-section-top: 18px;
  --panel-section-bottom: 26px;
  --panel-header-content-gap: 18px;
  --panel-content-footer-gap: 18px;
  --panel-header-component-gap: 12px;
  display: grid;
  align-items: stretch;
  align-content: stretch;
  justify-items: stretch;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, auto) minmax(48px, 1fr) minmax(0, auto);
  padding: calc(var(--panel-section-top) + var(--notebook-header-offset)) var(--panel-section-inline) var(--panel-section-bottom);
  box-sizing: border-box;
}

.ui-panel.ui-panel--composition > .panel-composition__header {
  grid-row: 1;
  position: static;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--panel-header-component-gap);
  min-width: 0;
  min-height: 0;
  height: auto;
  width: auto;
  align-self: stretch;
  max-height: 100%;
  padding: 6px 6px var(--panel-header-content-gap);
  margin-inline: -6px;
  overflow: auto;
  scrollbar-width: thin;
}

.ui-panel.ui-panel--composition .blue-content-box-title {
  position: static;
  transform: none;
  flex: 0 0 auto;
  min-height: 0;
  padding: 0 !important;
}

.ui-panel.ui-panel--composition .panel-title-text {
  white-space: normal;
  overflow-wrap: anywhere;
}

.ui-panel.ui-panel--composition .blue-box-location-pin {
  position: static;
  flex: 0 0 auto;
  align-self: flex-start;
  overflow-wrap: anywhere;
}

.ui-panel.ui-panel--composition > .panel-composition__body {
  grid-row: 2;
  position: static;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  align-self: stretch;
  max-height: none;
  padding: 4px 4px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  border-radius: 0;
}

.location-panel__content {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 14px;
  min-width: 0;
  width: 100%;
}

.ui-panel.ui-panel--composition > .panel-composition__footer {
  grid-row: 3;
  position: static;
  min-width: 0;
  min-height: 0;
  height: auto;
  align-self: stretch;
  max-height: 100%;
  padding: var(--panel-content-footer-gap) 6px 8px;
  margin-inline: -6px;
  overflow: auto;
  scrollbar-width: thin;
}

.ui-panel.ui-panel--composition > .panel-composition__footer:not(:has(> :not(.hidden):not([hidden]))) {
  display: none !important;
}

.ui-panel.ui-panel--composition.box-minimized {
  display: block;
  padding: 0;
}

.ui-panel.ui-panel--composition.box-minimized > .panel-composition__header {
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0 132px 0 12px;
  overflow: hidden;
}

.ui-panel.ui-panel--composition.box-minimized > .panel-composition__body,
.ui-panel.ui-panel--composition.box-minimized > .panel-composition__footer,
.ui-panel.ui-panel--composition.box-minimized > .panel-composition__header > :not(.blue-content-box-title) {
  display: none !important;
}

/* Pair header labels with controls in flow, including wrapped labels. */
:is(#help-panel, #index-panel) .blue-content-box-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  right: calc(var(--panel-shell-content-right) + var(--panel-shell-content-padding-x)) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}

:is(#help-panel, #index-panel) .panel-title-text {
  flex: 1 1 auto;
  min-width: 0;
}

:is(#help-panel, #index-panel, #inventory-panel, #location-panel) .panel-controls {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 auto;
  align-self: center;
  height: calc(40px * var(--panel-header-scale)) !important;
}

:is(#help-panel, #index-panel, #inventory-panel, #location-panel) .panel-controls .panel-btn {
  width: calc(26px * var(--panel-header-scale)) !important;
  height: calc(40px * var(--panel-header-scale)) !important;
}

#inventory-panel .progress-container-header {
  position: static !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: auto !important;
  height: auto !important;
  min-height: 40px !important;
  margin: 0 0 5px;
}

#inventory-panel .inventory-v3-title {
  min-width: 0;
  margin: 0;
}

#active-tasks-panel .active-tasks-controls {
  position: static;
  flex: 0 0 auto;
  align-self: center;
}

#active-tasks-panel:not(.tasks-minimized):not([hidden]) {
  padding-top: 18px !important;
}

#active-tasks-panel .active-tasks-controls button,
#active-tasks-panel #active-tasks-close {
  width: calc(26px * var(--panel-header-scale));
  height: calc(40px * var(--panel-header-scale));
}

#location-panel.ui-panel--composition > .panel-composition__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding-inline: 10px;
}

#help-panel:not(.help-panel--welcome):not(.box-minimized) .blue-content-box-title {
  left: calc(var(--panel-shell-content-left) + var(--panel-shell-content-padding-x)) !important;
  top: 16px !important;
  padding-left: 0 !important;
}

#help-panel.help-panel--welcome:not(.box-minimized) .blue-content-box-title {
  /* Match the article's 36px / 16px padding inside the same paper inset. */
  padding: 20px 16px 8px 36px !important;
  height: calc(28px + 40px * var(--panel-header-scale)) !important;
}

#location-panel .panel-composition__header > * {
  grid-column: 1 / -1;
}

#location-panel .panel-composition__header > .v3-location-category {
  grid-column: 1;
  grid-row: 1;
}

#location-panel .panel-composition__header > .panel-controls {
  grid-column: 2;
  grid-row: 1;
}

#location-panel .panel-controls,
#location-panel .panel-controls .panel-btn {
  height: calc(32px * var(--panel-header-scale)) !important;
}

#location-panel .panel-controls .panel-btn {
  width: calc(21px * var(--panel-header-scale)) !important;
}

#location-panel .panel-composition__header:not(:has(.v3-location-category:not([hidden]))) > .blue-content-box-title,
#location-panel.box-minimized .panel-composition__header > .blue-content-box-title {
  grid-column: 1;
  grid-row: 1;
  position: static !important;
  transform: none !important;
}

#location-panel:not(.box-minimized) .panel-composition__header:not(:has(.v3-location-category:not([hidden]))) .panel-title-text {
  font-size: calc(21px * var(--panel-header-scale)) !important;
}

#location-panel.ui-panel--composition.box-minimized > .panel-composition__header {
  padding-right: 28px;
  column-gap: 12px;
}

#location-panel.ui-panel--composition.box-minimized > .panel-composition__header > .panel-controls {
  display: flex !important;
}