html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: #071421;
  color: #f7fbff;
  font-family: Arial, Helvetica, sans-serif;
}

/* Skyddsnät: en egen "display: flex/grid"-regel på en klass vinner annars
   över webbläsarens inbyggda [hidden]{display:none} vid lika specificitet,
   så ett element med både klassen och hidden-attributet syns ändå. */
[hidden] {
  display: none !important;
}

button {
  border: 0;
  border-radius: 8px;
  padding: 12px 16px;
  background: #ffd166;
  color: #1b2634;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.game_shell {
  position: fixed;
  inset: 0;
}

#game {
  width: 100vw;
  height: 100vh;
  display: block;
}

.hud[hidden] {
  display: none;
}

.hud {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  pointer-events: none;
}

.hud div,
.hud button {
  pointer-events: auto;
}

.hud div {
  min-width: 88px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgb(7 20 33 / 72%);
}

.hud div > span {
  display: block;
  margin-bottom: 4px;
  color: rgb(247 251 255 / 72%);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hud button:first-of-type {
  margin-left: auto;
}

.panel {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(460px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 8px;
  padding: 24px;
  background: rgb(7 20 33 / 86%);
  box-shadow: 0 24px 80px rgb(0 0 0 / 34%);
}

.panel h1,
.panel h2 {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1;
}

.panel p {
  color: rgb(247 251 255 / 78%);
  line-height: 1.5;
}

.small {
  margin-bottom: 0;
  font-size: 14px;
}

.world_panel {
  top: 20px;
  transform: translateX(-50%);
  width: min(380px, calc(100vw - 32px));
}

.world_panel.world_select_mode {
  top: 50%;
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  transform: translate(-50%, -50%);
}

.world_info {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgb(7 20 33 / 55%);
  border: 1px solid rgb(255 255 255 / 14%);
}

.world_info h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.world_info p {
  margin: 0 0 10px;
  font-size: 14px;
}

.world_info button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.next_level_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.next_level_buttons button {
  margin: 0;
}

.world_select_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.world_card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  text-align: left;
  padding: 10px;
  background: rgb(20 41 61 / 90%);
  color: #f7fbff;
  border: 1px solid rgb(255 255 255 / 14%);
}

.world_card_wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.world_card_wrap .world_card {
  width: 100%;
}

.world_test_button {
  padding: 9px 12px;
  background: rgb(84 210 255 / 18%);
  color: #f7fbff;
  border: 1px solid rgb(84 210 255 / 45%);
}

.world_card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  background: rgb(7 20 33 / 55%);
  flex-shrink: 0;
}

.world_card_title {
  display: block;
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 800;
}

.world_card_copy small {
  display: block;
  min-height: 38px;
  color: rgb(247 251 255 / 76%);
  line-height: 1.35;
}

.sign_text {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 32px));
  margin: 0;
  padding: 12px 18px;
  border-radius: 8px;
  background: rgb(7 20 33 / 88%);
  border: 1px solid rgb(255 255 255 / 22%);
  text-align: center;
  font-size: 15px;
  z-index: 5;
}

.editor_link {
  color: #ffd166;
  font-weight: 700;
}

#logo {
  display: block;
  max-width: 320px;
  width: 100%;
  margin: 0 auto 6px;
}

.logo_text {
  text-align: center;
  letter-spacing: 0.04em;
}

.logo_text span {
  color: #ffd166;
}

.menu_row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 10px;
}

.music_label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgb(247 251 255 / 78%);
}

.music_label select {
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgb(7 20 33 / 72%);
  color: #f7fbff;
  font: inherit;
}

#character_panel {
  text-align: center;
}

#outfit_preview {
  display: block;
  margin: 0 auto 12px;
  border-radius: 8px;
  border: 1px solid rgb(255 255 255 / 18%);
}

.outfit_row {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-bottom: 6px;
}

.outfit_row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgb(247 251 255 / 78%);
}

.outfit_row input[type="color"] {
  width: 44px;
  height: 34px;
  border: none;
  border-radius: 8px;
  padding: 0;
  background: none;
  cursor: pointer;
}

.accessory_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}

.accessory_list button {
  padding: 8px 12px;
  font-size: 13px;
  background: #14293d;
  color: #f7fbff;
}

.accessory_list button.active {
  background: #ffd166;
  color: #1b2634;
}

#finish_panel button {
  margin: 4px 4px 0 0;
}

.touch_controls {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 20px;
  display: none;
  justify-content: space-between;
  pointer-events: none;
}

.touch_group {
  display: flex;
  gap: 14px;
  pointer-events: auto;
}

.touch_controls button {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  padding: 0;
  font-size: 26px;
  background: rgb(7 20 33 / 55%);
  color: #f7fbff;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

@media (pointer: coarse) {
  .touch_controls {
    display: flex;
  }
}

@media (max-width: 980px) {
  .hud {
    flex-wrap: wrap;
  }

  .hud div {
    flex: 1;
  }

  .hud button {
    flex: 1 0 auto;
    margin-left: 0;
  }
}

/* Väskan/anteckningsboken på explorekartor */
.bag_panel {
  width: min(520px, calc(100vw - 32px));
}

.bag_counter {
  margin: 0 0 12px;
  opacity: 0.75;
  font-size: 14px;
}

.bag_list {
  display: grid;
  gap: 8px;
  max-height: min(430px, 55vh);
  overflow-y: auto;
  margin-bottom: 16px;
}

.bag_item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 8px;
  background: rgb(255 255 255 / 5%);
}

.bag_item.bag_item_locked {
  opacity: 0.45;
}

.bag_item_icon {
  font-size: 26px;
  width: 42px;
  text-align: center;
  flex-shrink: 0;
}

.bag_item_icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.bag_item_name {
  font-weight: bold;
  margin: 0;
}

.bag_item_text {
  margin: 2px 0 0;
  font-size: 13px;
  opacity: 0.78;
}

/* Uppdragsloggen i väskan */
.bag_section_title {
  margin: 0 0 8px;
  font-size: 16px;
  opacity: 0.85;
}

.bag_quests {
  margin-bottom: 12px;
}

.bag_quest {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 12px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 8px;
  background: rgb(255 255 255 / 5%);
  margin-bottom: 6px;
}

.bag_quest_done {
  opacity: 0.55;
}

.bag_quest_done .bag_item_name {
  text-decoration: line-through;
}

.bag_quest_mark {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: #ffd166;
}

.bag_quest_done .bag_quest_mark {
  color: #7fe7a0;
}

.bag_quests .bag_section_title:last-child {
  margin-top: 12px;
  margin-bottom: 0;
}

/* Isolerade HTML-minispel. Själva pusslet körs i en sandboxad iframe;
   ramen och återkopplingen ägs alltid av SideQuest. */
.puzzle_panel {
  width: min(920px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 32px));
  padding: 18px;
  border: 2px solid #ffd166;
  border-radius: 16px;
  background: rgb(7 20 33 / 97%);
  z-index: 20;
  display: grid;
  grid-template-rows: auto auto minmax(260px, 1fr) auto;
  gap: 12px;
}

.puzzle_header,
.puzzle_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.puzzle_header h2 {
  margin: 0;
  font-size: clamp(24px, 4vw, 34px);
}

.puzzle_header > button {
  width: 46px;
  height: 46px;
  padding: 0;
  font-size: 25px;
  flex: 0 0 auto;
}

.puzzle_kicker {
  margin: 0 0 5px !important;
  color: #7fe7ff !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.puzzle_instructions {
  margin: 0 !important;
}

.puzzle_frame {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 1px solid rgb(127 231 255 / 35%);
  border-radius: 12px;
  background: #071421;
}

.puzzle_status {
  display: grid;
  place-items: center;
  min-height: 300px;
  margin: 0 !important;
  padding: 28px;
  border: 1px solid rgb(127 231 160 / 46%);
  border-radius: 12px;
  background: rgb(64 190 120 / 12%);
  color: #b8ffd0 !important;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
}

.puzzle_status_error {
  border-color: rgb(255 120 120 / 55%);
  background: rgb(200 45 45 / 14%);
  color: #ffd0d0 !important;
}

.puzzle_footer span {
  color: rgb(247 251 255 / 55%);
  font-size: 12px;
  text-align: right;
}

/* Visas bara när en plats eller bana faktiskt behöver vänta på sina
   bilder. Den tidigare scenen ligger kvar bakom ett mörkt raster så ett
   scenbyte aldrig ser ut som om spelet har hängt sig. */
.loading_panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 42%, rgb(63 110 125 / 24%), transparent 42%),
    rgb(4 12 20 / 88%);
  backdrop-filter: blur(5px);
}

.loading_card {
  width: min(500px, calc(100vw - 40px));
  padding: 30px;
  border: 2px solid #ffd166;
  border-radius: 18px;
  background: rgb(7 20 33 / 96%);
  box-shadow: 0 28px 90px rgb(0 0 0 / 55%);
  text-align: center;
}

.loading_card h2 {
  margin: 6px 0 8px;
  font-size: clamp(27px, 5vw, 38px);
}

.loading_card p {
  margin: 0;
  color: rgb(247 251 255 / 72%);
}

.loading_kicker {
  color: #7fe7ff !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.loading_spinner {
  display: flex;
  justify-content: center;
  gap: 8px;
  height: 26px;
  margin-bottom: 12px;
}

.loading_spinner span {
  width: 9px;
  height: 9px;
  margin-top: 9px;
  border-radius: 50%;
  background: #ffd166;
  animation: loading-bounce 0.9s ease-in-out infinite;
}

.loading_spinner span:nth-child(2) { animation-delay: 0.12s; }
.loading_spinner span:nth-child(3) { animation-delay: 0.24s; }

.loading_track {
  height: 9px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 10%);
}

.loading_track span {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #55ddc0, #ffd166);
  transition: width 180ms ease;
}

.loading_count {
  min-height: 18px;
  margin-top: 9px !important;
  font-size: 12px;
}

@keyframes loading-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(-8px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .loading_spinner span { animation: none; }
  .loading_track span { transition: none; }
}

@media (max-width: 620px) {
  .puzzle_panel {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    padding: 12px;
  }

  .puzzle_footer span {
    display: none;
  }
}