/* Shared finishing touches for mobile use, hero details, status chips, and small UI polish. */

:root{
  --mobile-bottom-nav: 64px;
}

/* The support button should read like a button, not tiny text in a large box. */
.overview-support-link{
  min-height:34px!important;
  padding:6px 10px!important;
  font-size:13px!important;
  font-weight:800!important;
  gap:6px!important;
  line-height:1.1!important;
}
.overview-support-link svg,
.overview-support-link img{
  width:15px!important;
  height:15px!important;
}

.overview-support-link{
  position:relative;
  z-index:3;
}

/* Give the hero a little more field-manual detail without making it busy. */
.field-hero,
.vh-hero{
  --hero-shift-x:0px;
  --hero-shift-y:0px;
  background-position:calc(50% + var(--hero-shift-x)) calc(50% + var(--hero-shift-y));
  transition:background-position .18s ease-out,border-color .18s ease-out;
}
.field-hero:hover,
.vh-hero:hover{
  border-color:#4b4735;
}
.hero-survey-art{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.22;
  background:
    linear-gradient(90deg,transparent 0 49.85%,rgba(198,164,83,.11) 50%,transparent 50.15%),
    linear-gradient(0deg,transparent 0 49.85%,rgba(198,164,83,.08) 50%,transparent 50.15%),
    repeating-radial-gradient(circle at 84% 17%,rgba(198,164,83,.14) 0 1px,transparent 1px 44px);
  mask-image:linear-gradient(90deg,transparent 30%,#000 72%);
}
.hero-survey-art::after{content:none}
.overview-title-row,
.ic-home-status,
.vh-release{
  position:relative;
  z-index:1;
}

/* Status chips are useful shortcuts now, so make them feel clickable. */
.ic-status-chip[data-hero-action]{
  cursor:pointer;
  user-select:none;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.ic-status-chip[data-hero-action]:hover{
  border-color:rgba(222,187,101,.48);
  background:rgba(31,31,23,.86);
  transform:translateY(-1px);
}
.ic-status-chip[data-hero-action]:focus-visible{
  outline:2px solid #c8a75d;
  outline-offset:2px;
}

/* A tiny save state reassures people without filling the screen with popups. */
.variant-save-state{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:240;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:6px 10px;
  border:1px solid #3f392c;
  border-radius:999px;
  background:rgba(13,14,12,.92);
  color:#bfb297;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  font-size:11px;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.variant-save-state.show{
  opacity:1;
  transform:translateY(0);
}
.variant-save-state-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#b9984f;
  box-shadow:0 0 0 3px rgba(185,152,79,.12);
}

/* Keep image layouts stable while thumbnails load. */
.variant-gallery img,
.gallery-grid img,
.vh-gallery-grid img,
.vbuild-gallery img{
  background:#0b0c0b;
}

/* Phone navigation stays one thumb away. */
.variant-mobile-nav{
  display:none;
}

/* This button is only for the phone map sheet. */
.mobile-map-toolbar-head{
  display:none!important;
}

@media (max-width:820px){
  /* Main owns vertical scrolling on phones. Tool bodies should not create a second page scrollbar. */
  html,
  body{
    height:100%;
    overflow:hidden!important;
  }
  .layout{
    min-height:0!important;
    overflow:hidden!important;
  }
  main{
    height:100%!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    scrollbar-gutter:auto!important;
    padding-bottom:calc(var(--mobile-bottom-nav) + 12px + env(safe-area-inset-bottom))!important;
  }
  .section,
  .section.active{
    height:auto!important;
    min-height:100%!important;
    overflow:visible!important;
  }

  /* Long cards become part of the page instead of another vertical scrolling window. */
  .guide-card.open .guide-body,
  .notes-folder-body,
  .notes-checklists-pane,
  .vh-overview-details-body,
  .ic-support-body,
  .vh-help-body,
  .help-card-body{
    max-height:none!important;
    height:auto!important;
    overflow-y:visible!important;
    scrollbar-gutter:auto!important;
    overscroll-behavior-y:auto!important;
  }

  /* Dropdown lists still need their own short scroll area. */
  .marker-scroll-panel,
  [role="listbox"],
  .variant-image-lightbox,
  .modal,
  dialog{
    overscroll-behavior:contain;
  }

  /* Comfortable touch targets. */
  button,
  .vh-btn,
  .vbtn,
  select,
  input[type="button"],
  input[type="submit"]{
    min-height:44px;
  }
  .mobile-menu-btn,
  .lightbox-close,
  .lightbox-arrow{
    min-height:0;
  }

  .field-hero,
  .vh-hero{
    --hero-shift-x:0px!important;
    --hero-shift-y:0px!important;
  }
  .hero-survey-art{
    opacity:.13;
  }

  /* The main map controls collapse on phones so the map stays near the top. */
  #map .map-toolbar.mobile-map-toolbar-ready{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
  }
  #map .map-toolbar.mobile-map-toolbar-ready.mobile-map-toolbar-closed > *:not(.mobile-map-toolbar-head){
    display:none!important;
  }
  .mobile-map-toolbar-head{
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:44px!important;
    padding:9px 11px!important;
    border:1px solid #4a4030!important;
    border-radius:9px!important;
    background:#15140f!important;
    color:#e7cf99!important;
    font-weight:800!important;
  }
  .mobile-map-toolbar-head small{
    color:#988c72;
    font-size:10px;
    font-weight:700;
  }

  .variant-mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:205;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    min-height:var(--mobile-bottom-nav);
    padding:5px 7px calc(5px + env(safe-area-inset-bottom));
    border-top:1px solid #373127;
    background:rgba(12,13,11,.96);
    backdrop-filter:blur(14px);
    box-shadow:0 -8px 24px rgba(0,0,0,.3);
  }
  .variant-mobile-nav button{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-width:0;
    min-height:48px;
    padding:5px 3px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#9d927e;
    font-size:10px;
    font-weight:800;
  }
  .variant-mobile-nav button.active{
    background:#211c12;
    color:#f0cf83;
  }
  .variant-mobile-nav .mobile-nav-icon{
    font-size:17px;
    line-height:1;
  }
  .variant-save-state{
    right:10px;
    bottom:calc(var(--mobile-bottom-nav) + 9px + env(safe-area-inset-bottom));
  }
}

/* Reduce expensive decoration when the device is likely to be touch-first. */
@media (hover:none) and (pointer:coarse){
  .field-hero,
  .vh-hero,
  .ic-status-chip,
  .overview-support-link,
  .variant-mobile-nav{
    backdrop-filter:none!important;
  }
  .scanlines{
    opacity:.08!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .field-hero,
  .vh-hero,
  .ic-status-chip[data-hero-action],
  .variant-save-state{
    transition:none!important;
  }
}

@media (max-width:820px){
  .field-mobile-bar{
    left:7px!important;
    right:7px!important;
    min-height:56px;
    border-color:#3d362a!important;
  }
  .field-mobile-bar button{
    min-height:52px!important;
    padding:8px 5px!important;
    color:#9f9583!important;
  }
  .field-mobile-bar button.active{
    background:#211c12!important;
    color:#f0cf83!important;
  }
}

/* Shared finishing touches that keep the site calm, readable, and easy to use. */

:root{
  --variant-sheet-gap:calc(var(--mobile-bottom-nav) + 10px + env(safe-area-inset-bottom));
}

/* Keep the survey label and support button together in the upper-right. */
.field-hero .hero-survey-stamp{
  position:absolute;
  top:12px;
  right:188px;
  z-index:4;
  width:156px;
  min-height:42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding:7px 10px;
  border:1px solid rgba(202,169,91,.26);
  border-radius:9px;
  background:rgba(15,17,14,.68);
  color:#bca671;
  backdrop-filter:blur(6px);
  pointer-events:none;
}
.field-hero .hero-survey-stamp b{
  font:800 9px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.08em;
}
.field-hero .hero-survey-stamp small{
  color:#81765f;
  font:700 8px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.06em;
}
.field-hero .overview-support-link{
  position:absolute!important;
  top:12px;
  right:18px;
  z-index:4;
  min-height:34px!important;
  margin:0!important;
  padding:7px 10px!important;
  border-radius:9px!important;
  font-size:12px!important;
}
@media (min-width:821px){
  .field-hero .overview-title-copy{max-width:min(720px,calc(100% - 360px))}
}

/* Continue stays in the lower-right, away from the survey label. */
.hero-continue{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  margin-left:0;
  padding:6px 10px;
  border:1px solid rgba(202,169,91,.30);
  border-radius:9px;
  background:rgba(30,25,16,.74);
  color:#e6ca8b;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.field-hero>.hero-continue{
  position:absolute;
  right:18px;
  bottom:16px;
  z-index:4;
  max-width:170px;
  justify-content:center;
}
.hero-continue:hover{border-color:rgba(228,194,111,.55);background:rgba(39,31,18,.88)}
.hero-continue small{color:#9f9277;font-size:9px;font-weight:700}

/* Field-manual dividers add hierarchy without putting everything in a box. */
.ic-section-title,
.field-section-head,
.vh-card-head,
.panel-title{
  position:relative;
}
.ic-section-title::after,
.field-section-head::after{
  content:"";
  flex:1 1 90px;
  min-width:36px;
  height:1px;
  margin-left:10px;
  background:linear-gradient(90deg,rgba(194,162,87,.28),rgba(194,162,87,0));
}

/* Empty spaces should still tell people what to do next. */
.vempty,
.vh-note-empty,
.field-command-empty{
  position:relative;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 18px 18px;
  text-align:center;
  border:1px dashed rgba(194,162,87,.16);
  border-radius:10px;
  background:
    radial-gradient(circle at 50% 5%,rgba(194,162,87,.05),transparent 48%),
    rgba(10,12,10,.34);
}
.vempty::before,
.vh-note-empty::before,
.field-command-empty::before{
  content:"◇";
  position:absolute;
  top:9px;
  color:rgba(214,184,111,.26);
  font-size:15px;
}

/* Gallery images keep their space while the file is loading. */
.gallery-image-stage{
  aspect-ratio:16/10;
  min-height:220px;
  overflow:hidden;
  background:
    linear-gradient(110deg,rgba(255,255,255,.018) 35%,rgba(255,255,255,.045) 50%,rgba(255,255,255,.018) 65%),
    #0a0c0a;
  background-size:220% 100%;
}
.gallery-image-stage img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.gallery-image-stage img:not([src]){opacity:0}

/* Small map HUD: useful location info without turning the map into a game HUD. */
.map-hud{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:64;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:29px;
  padding:5px 8px;
  border:1px solid rgba(214,184,111,.22);
  border-radius:8px;
  background:rgba(9,11,9,.82);
  color:#a99b7e;
  box-shadow:0 5px 18px rgba(0,0,0,.25);
  font:700 9px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
}
.map-hud b{color:#e0c17d;font-size:10px}
.map-hud i{width:1px;height:13px;background:#3a3529}

/* Keep the marker help visible without blocking map controls or marker clicks. */
.map-marker-help{
  position:absolute;
  top:9px;
  left:50%;
  z-index:65;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:max-content;
  max-width:calc(100% - 24px);
  min-height:30px;
  box-sizing:border-box;
  transform:translateX(-50%);
  padding:6px 10px;
  border:1px solid rgba(214,184,111,.34);
  border-radius:8px;
  background:rgba(9,11,9,.86);
  color:#d8c9aa;
  box-shadow:0 5px 18px rgba(0,0,0,.3);
  font-size:11px;
  font-weight:650;
  line-height:1.35;
  text-align:center;
  pointer-events:none;
}
.map-marker-help-icon{
  display:grid;
  place-items:center;
  flex:0 0 17px;
  width:17px;
  height:17px;
  border:1px solid rgba(224,193,125,.5);
  border-radius:50%;
  color:#e0c17d;
  font:800 11px/1 system-ui,sans-serif;
}
.map-marker-help-touch{display:none}
#mapContainer .map-biome-highlight-banner{top:50px}

/* Connection states use the same simple dot language. */
.header-status-cluster{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:5px 8px;
  border:1px solid #33362f;
  border-radius:999px;
  background:#111310;
  color:#948b79;
  font-size:10px;
  font-weight:750;
  white-space:nowrap;
}
button.status-pill{cursor:pointer}

/* Keep the two desktop header status pills the same size. */
@media (min-width: 721px){
  .header-status-cluster .status-pill{
    width:96px;
    justify-content:center;
  }
}
.status-dot{width:7px;height:7px;border-radius:50%;background:#7d7a70;box-shadow:0 0 0 3px rgba(125,122,112,.08)}
.status-pill[data-state="good"] .status-dot{background:#7da36d;box-shadow:0 0 0 3px rgba(125,163,109,.10)}
.status-pill[data-state="warn"] .status-dot{background:#c79e51;box-shadow:0 0 0 3px rgba(199,158,81,.10)}
.status-pill[data-state="bad"] .status-dot{background:#b9685e;box-shadow:0 0 0 3px rgba(185,104,94,.10)}

/* Action toasts can offer a short Undo without another dialog. */
.variant-ui-toast.has-action{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:default;
}
.variant-ui-toast-action{
  min-height:28px!important;
  padding:4px 8px!important;
  border:1px solid rgba(234,202,126,.34)!important;
  border-radius:7px!important;
  background:#211b11!important;
  color:#efd08a!important;
  font-size:10px!important;
  font-weight:850!important;
  cursor:pointer;
}

/* Phone map controls expand in place instead of taking over the screen. */
.mobile-map-sheet-scrim{display:none!important}
@media (max-width:820px){
  .field-hero .hero-survey-stamp{display:none!important}
  .field-hero>.hero-continue,
  .hero-continue{position:static;width:100%;max-width:none;margin:4px 0 0;justify-content:center}

  #map .map-toolbar.mobile-map-toolbar-ready:not(.mobile-map-toolbar-closed){
    position:static!important;
    inset:auto!important;
    z-index:auto!important;
    width:100%!important;
    max-height:none!important;
    overflow:visible!important;
    margin:0 0 10px!important;
    padding:8px!important;
    border:1px solid #3c382e!important;
    border-radius:11px!important;
    background:#10120f!important;
    box-shadow:none!important;
  }
  #map .map-toolbar.mobile-map-toolbar-ready .mobile-map-toolbar-head{
    position:static!important;
    inset:auto!important;
  }

  .map-hud{
    left:8px;
    bottom:8px;
    max-width:calc(100% - 16px);
    font-size:8px;
  }

  .map-marker-help{
    top:7px;
    max-width:calc(100% - 14px);
    min-height:28px;
    padding:5px 8px;
    font-size:9px;
  }
  .map-marker-help-desktop{display:none}
  .map-marker-help-touch{display:inline}
  #mapContainer .map-biome-highlight-banner{top:44px}

  /* The app name gets the phone header. Connection details still live in their pages. */
  #variantHeaderStatus{display:none!important}

  .gallery-image-stage{min-height:180px;aspect-ratio:4/3}
}

@media (max-width:560px){
  .overview-support-link{font-size:12px!important}
  .hero-field-line{font-size:9px;letter-spacing:.09em}
}

/* Keep motion optional and quiet. */
@media (prefers-reduced-motion:reduce){
  .gallery-image-stage{background-size:100% 100%}
}

/* Google Sync uses the same status-dot language as the other header states. */
.header-sync-status{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
}
.header-sync-status::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#7d7a70;
  box-shadow:0 0 0 3px rgba(125,122,112,.08);
}
.header-sync-status[data-state="ready"]::before{background:#7da36d;box-shadow:0 0 0 3px rgba(125,163,109,.10)}
.header-sync-status[data-state="reconnect"]::before{background:#c79e51;box-shadow:0 0 0 3px rgba(199,158,81,.10)}
.header-sync-status[data-state="local"]::before{background:#7d7a70}

/* Let long tool pages skip off-screen paint work until they are near the viewport. */
.section.active .vcard,
.section.active .vh-card,
.section.active .guide-card,
.section.active .ic-progress-card{
  content-visibility:auto;
  contain-intrinsic-size:auto 180px;
}

@media (max-width:820px){
  .header-sync-status::before{margin-right:0}
  .header-sync-status .header-sync-label{display:none}
}

/* Each Icarus tool gets a quiet field mark of its own. */
.vpanel.active[data-tool-art]{position:relative;isolation:isolate}
.vpanel.active[data-tool-art]::after{
  content:attr(data-tool-art);
  position:absolute;
  right:16px;
  top:12px;
  z-index:-1;
  color:rgba(215,188,123,.045);
  font:900 52px/.8 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:-.08em;
  pointer-events:none;
}
@media (max-width:820px){.vpanel.active[data-tool-art]::after{font-size:38px;right:8px;top:8px}}

@media (max-width: 1100px) and (min-width: 761px) {
    .status-pill .status-label {
        display: none;
    }

    .status-pill {
        padding-inline: 9px;
    }
}

/* Keep the support button beside the survey label on desktop. */
@media (min-width:821px){
  .field-hero .overview-title-row{
    position:static;
  }
  .field-hero .overview-support-link{
    top:12px!important;
    right:8px!important;
    min-height:30px!important;
    width:max-content!important;
    padding:5px 8px!important;
    gap:5px!important;
    border-radius:8px!important;
    font-size:12px!important;
    line-height:1!important;
  }
  .field-hero .overview-support-link svg,
  .field-hero .overview-support-link img{
    width:13px!important;
    height:13px!important;
  }
}


/* Keep the Valheim overview laid out like the Icarus overview. */
#valheim-home .vh-hero{
  position:relative;
}
#valheim-home .vh-hero>.hero-continue{
  position:absolute;
  right:18px;
  bottom:16px;
  z-index:4;
  max-width:180px;
  justify-content:center;
}
#valheim-home .vh-release{
  max-width:calc(100% - 205px);
}

/* Valheim shares the same overview grids as Icarus on desktop. */

@media (max-width:820px){
  #valheim-home .vh-hero>.hero-continue{
    position:static;
    width:100%;
    max-width:none;
    margin-top:8px;
  }
  #valheim-home .vh-release{
    max-width:none;
  }
}

/* Keep gallery image controls square and easy to hit. */
.gallery-image-remove,
.notes-image-remove,
.notes-draft-preview-remove{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  padding:0!important;
  border-radius:7px!important;
  border:1px solid #6f3935!important;
  background:rgba(18,10,9,.94)!important;
  color:#f2aaa1!important;
  display:grid!important;
  place-items:center!important;
  font-size:18px!important;
  font-weight:700!important;
  line-height:1!important;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.gallery-image-remove,
.notes-image-remove{
  top:6px!important;
  right:6px!important;
}
.notes-draft-preview-remove{
  top:6px!important;
  right:6px!important;
}
.gallery-image-remove:hover,
.notes-image-remove:hover,
.notes-draft-preview-remove:hover{
  border-color:#a9524b!important;
  background:rgba(46,16,14,.96)!important;
  color:#ffd0ca!important;
}
.gallery-image-remove:focus-visible,
.notes-image-remove:focus-visible,
.notes-draft-preview-remove:focus-visible{
  outline:2px solid #e2b455!important;
  outline-offset:2px!important;
}

/* The larger image viewer uses the same neat square close button. */
.variant-image-lightbox .lightbox-close{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  padding:0!important;
  border-radius:8px!important;
  line-height:1!important;
}

/* World screenshots use a normal compact remove button instead of a large danger button. */
button[data-vhx-worldimg-del]{
  min-height:30px!important;
  padding:5px 9px!important;
  border-radius:7px!important;
  font-size:11px!important;
}

@media (max-width:820px){
  .gallery-image-remove,
  .notes-image-remove,
  .notes-draft-preview-remove{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    font-size:20px!important;
  }
}


/* Keep the Variant name readable on narrow phones. */
@media (max-width:820px){
  header .header-brand{flex:1 1 auto!important;min-width:0!important}
  header .header-brand-copy{min-width:0!important;overflow:hidden!important}
  header .header-title{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}

/* Keep the companion subtitle from squeezing into a vertical column beside the tools. */
header .brand-sub {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 1450px) {
  header .brand-sub { display: none; }
}