body[data-game="valheim"] .scanlines{
  opacity:.08
}
body[data-game="valheim"] header{
  background:linear-gradient(to right,#131814,#24261e)
}
body[data-game="valheim"] .panel-title{
  color:#e8cf98
}
body[data-game="valheim"] #toolsContainer .vtab[data-tool]:not([data-tool="sync"]):not([data-tool="backup"]){
  display:none
}
body[data-game="valheim"] #toolsContainer .vtabExternal{
  display:none!important
}
.vh-shell{
  max-width:1180px;
  margin:0 auto;
  padding-bottom:35px
}
.vh-hero{
  border:1px solid #3d382a;
  border-radius:14px;
  background:radial-gradient(circle at top right,rgba(124,105,49,.16),transparent 35%),linear-gradient(145deg,#161714,#101110);
  padding:18px;
  margin-bottom:14px
}
.vh-kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#9e8f70;
  font-weight:800
}
.vh-hero h2{
  margin:6px 0 7px;
  color:#f0d49c;
  font-size:24px
}
.vh-hero p{
  color:#b8aa8e;
  line-height:1.55;
  margin:0
}
.vh-release{
  margin-top:12px;
  border-left:3px solid #c69643;
  background:#17150f;
  padding:10px 12px;
  border-radius:7px;
  color:#c9b99a;
  line-height:1.45
}
.vh-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  gap:11px
}
.vh-card{
  border:1px solid #2d3029;
  border-radius:12px;
  background:#111310;
  padding:13px;
  min-width:0
}
.vh-card h3{
  margin:0 0 7px;
  color:#e8cf98;
  font-size:15px
}
.vh-muted{
  color:#938a77;
  font-size:12px;
  line-height:1.45
}
.vh-section-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 2px 8px;
}
.vh-section-title h3{
  margin:0;
  color:#a8c4a3;
  font-size:14px;
}
.vh-section-title .vh-muted{
  margin-left:auto;
}
.vh-section-title::after{
  content:"";
  flex:1 1 90px;
  min-width:36px;
  height:1px;
  margin-left:10px;
  background:linear-gradient(90deg,rgba(143,176,138,.28),rgba(143,176,138,0));
}
.vh-stat{
  font-size:27px;
  font-weight:800;
  color:#f0d49c;
  margin:3px 0
}
.vh-btn{
  border:1px solid #69562d;
  background:#19150d;
  color:#f1cf88;
  border-radius:8px;
  padding:8px 11px;
  cursor:pointer;
  font-weight:700
}
.vh-btn.secondary{
  border-color:#343730;
  background:#121312;
  color:#c4b69a
}
.vh-btn.danger{
  border-color:#643a35;
  color:#efaaa1;
  background:#1c1110
}
.vh-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap
}
.vh-input,.vh-select,.vh-textarea{
  width:100%;
  box-sizing:border-box;
  background:#0d0f0d;
  color:#e7ddca;
  border:1px solid #343830;
  border-radius:8px;
  padding:9px 10px;
  outline:none;
  color-scheme:dark
}
.vh-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:32px;
  background-color:#0d0f0d;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d9c7a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 9px center
}
.vh-select option,.vh-select optgroup{
  background:#0d0f0d;
  color:#e7ddca
}
.vh-select::-ms-expand{
  display:none
}
.vh-input:focus,.vh-select:focus,.vh-textarea:focus{
  border-color:#7d6734;
  box-shadow:0 0 0 1px rgba(200,167,89,.12)
}
.vh-textarea{
  min-height:90px;
  resize:vertical
}
.vh-progress{
  height:9px;
  border-radius:20px;
  background:#22251f;
  overflow:hidden;
  border:1px solid #30332c
}
.vh-progress>span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#846d37,#d2ad57)
}
.vh-stage{
  border:1px solid #2d3029;
  border-radius:13px;
  background:#101210;
  margin:10px 0;
  overflow:hidden
}
.vh-stage.upcoming{
  opacity:.78;
  border-style:dashed
}
.vh-stage.complete{
  border-color:#48513d
}
.vh-stage-head{
  padding:13px 14px;
  background:#151814;
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between
}
.vh-stage-num{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #66552d;
  color:#e4c77e;
  font-weight:800;
  flex:0 0 auto
}
.vh-stage-title{
  flex:1
}
.vh-stage-title b{
  display:block;
  color:#f0d49c;
  font-size:16px
}
.vh-stage-title span{
  color:#918773;
  font-size:12px
}
.vh-stage-body{
  padding:12px 14px
}
.vh-check{
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:6px 0;
  color:#d7cab2;
  line-height:1.35
}
.vh-check input{
  margin-top:2px
}
.vh-check.done span{
  text-decoration:line-through;
  color:#777467
}
.vh-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px
}
.vh-tag{
  font-size:10px;
  border:1px solid #393c34;
  border-radius:999px;
  padding:3px 7px;
  color:#b9ae97;
  background:#151714
}
.vh-source{
  margin-top:10px;
  font-size:11px;
  color:#827968
}
.vh-source a{
  color:#c7a65d;
  text-decoration:none
}
.vh-source a:hover{
  text-decoration:underline
}
.vh-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:10px 0 12px
}
.vh-tab{
  border:1px solid #343730;
  border-radius:999px;
  background:#111310;
  color:#aa9e89;
  padding:7px 10px;
  cursor:pointer;
  font-size:12px
}
.vh-tab.active{
  background:#201a0e;
  color:#f0cf89;
  border-color:#765e2e
}
.vh-ref-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:10px
}
.vh-ref-card{
  border:1px solid #2c3029;
  border-radius:11px;
  background:#101210;
  padding:12px
}
.vh-ref-card h3{
  margin:0;
  color:#e6cc94;
  font-size:15px
}
.vh-ref-kv{
  margin-top:7px;
  font-size:12px;
  line-height:1.48;
  color:#bdb19a
}
.vh-ref-kv b{
  color:#ded1b7
}
.vh-guide{
  border:1px solid #2c3029;
  border-radius:11px;
  background:#101210;
  margin:9px 0;
  overflow:hidden
}
.vh-guide>button{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  border:0;
  background:#151714;
  color:#e8cf98;
  padding:12px 13px;
  cursor:pointer;
  font-weight:800
}
.vh-guide-body{
  display:none;
  padding:12px 14px;
  color:#c8bda6;
  line-height:1.5
}
.vh-guide.open .vh-guide-body{
  display:block;
  max-height:min(68vh,700px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable
}
.vh-guide-body ol{
  margin:6px 0 0;
  padding-left:21px
}
.vh-guide-body li{
  margin:6px 0
}
.vh-note-folder{
  border:1px solid #2c3029;
  border-radius:11px;
  background:#101210;
  margin:9px 0;
  overflow:hidden
}
.vh-note-head{
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 11px;
  background:#151714
}
.vh-note-head strong{
  flex:1;
  color:#e7cf98
}
.vh-note-body{
  padding:11px
}
.vh-note-item{
  border:1px solid #292c27;
  border-radius:8px;
  padding:9px;
  margin:7px 0;
  background:#0e100e;
  white-space:pre-wrap;
  color:#d4c9b4
}
.vh-checklist{
  border:1px solid #2c3029;
  border-radius:12px;
  background:#101210;
  padding:12px;
  margin:10px 0
}
.vh-checklist-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center
}
.vh-checklist-head h3{
  margin:0;
  color:#e5cc95;
  font-size:15px
}
.vh-check-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:9px;
  align-items:start;
  padding:6px 0;
  color:#d7cab2
}
.vh-check-item input{
  margin-top:3px
}
.vh-check-item.done span{
  text-decoration:line-through;
  color:#777467
}
.vh-note-empty{
  margin-top:10px;
  padding:24px;
  text-align:center;
  border:1px dashed #343434;
  border-radius:10px;
  color:#8f846e
}
.vh-world{
  border:1px solid #2c3029;
  border-radius:11px;
  background:#101210;
  padding:11px;
  margin:8px 0
}
.vh-world strong{
  color:#e9cf94
}
.vh-code{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#f0d49c;
  background:#161712;
  border:1px solid #34362f;
  border-radius:5px;
  padding:2px 5px
}
.vh-search-result{
  border-bottom:1px solid #292c27;
  padding:11px 4px
}
.vh-search-result:last-child{
  border-bottom:0
}
.vh-search-result b{
  color:#e9cf97
}
.vh-search-result small{
  display:block;
  color:#857c6d;
  margin-top:3px
}
.vh-search-result button{
  margin-top:7px
}
.vh-source-status{
  margin-top:8px;
  font-size:12px;
  color:#9b907c
}
.vh-calc-layout{
  display:grid;
  grid-template-columns:minmax(285px,38%) minmax(0,1fr);
  gap:12px;
  align-items:start
}
.vh-recipe-list{
  max-height:58vh;
  overflow:auto;
  margin-top:9px;
  padding-right:3px
}
.vh-recipe-item{
  display:block;
  width:100%;
  text-align:left;
  border:1px solid #292d27;
  border-radius:9px;
  background:#0e100e;
  color:#d9ccb5;
  padding:9px 10px;
  margin-bottom:6px;
  cursor:pointer
}
.vh-recipe-item:hover,.vh-recipe-item.active{
  border-color:#705b31;
  background:#1b180f;
  color:#f0d49c
}
.vh-recipe-item small{
  display:block;
  color:#817968;
  margin-top:3px
}
.vh-resource{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  border-bottom:1px solid #282b26;
  padding:7px 2px;
  color:#cfc3ad
}
.vh-resource:last-child{
  border-bottom:0
}
.vh-resource b{
  color:#f0d49c
}
.vh-calc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px
}
.vh-calc-detail h2{
  font-size:20px;
  color:#f0d49c;
  margin:0 0 8px
}
.vh-calc-detail .vh-tags{
  margin:0 0 9px
}
.vh-calc-actions{
  display:grid;
  grid-template-columns:130px auto;
  gap:8px;
  align-items:end;
  margin-top:12px;
  max-width:390px
}
.vh-field-label{
  display:block;
  font-size:11px;
  color:#8f856f;
  margin:0 0 5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700
}
.vh-plan-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  border-bottom:1px solid #282b26;
  padding:8px 0
}
.vh-plan-row:last-child{
  border-bottom:0
}
.vh-plan-row strong{
  color:#dec99a
}
.vh-plan-row small{
  display:block;
  color:#837b6b;
  margin-top:2px
}
.vh-icon-btn{
  border:1px solid #593b35;
  background:#17100f;
  color:#e8a49b;
  border-radius:7px;
  padding:4px 8px;
  cursor:pointer
}
.vh-calc-source{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:9px
}
.vh-home-continue{
  margin-top:13px;
  padding:11px 2px 3px;
  border-top:1px solid #2d3029
}
.vh-home-continue h3{
  margin:0 0 5px;
  color:#dec48c;
  font-size:14px
}
.vh-home-continue-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:9px 0
}
.vh-home-continue-row b{
  display:block;
  color:#e5cc95
}
.vh-home-continue-row .vh-muted{
  margin-top:3px
}
.vh-overview-details{
  margin-top:13px;
  border-top:1px solid #2d3029;
  padding-top:8px;
  color:#9f947f
}
.vh-overview-details summary{
  cursor:pointer;
  color:#cbb78e;
  font-weight:700;
  padding:7px 2px;
  list-style:none
}
.vh-overview-details summary::-webkit-details-marker{
  display:none
}
.vh-overview-details summary::after{
  content:'▾';
  margin-left:7px;
  color:#7f755f
}
.vh-overview-details[open] summary::after{
  content:'▴'
}
.vh-overview-details-body{
  padding:7px 2px 2px
}
.vh-overview-tools{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:7px;
  margin-top:7px
}
.vh-overview-tools .vh-btn,.vh-overview-tools a.vh-btn{
  width:100%;
  box-sizing:border-box;
  text-align:left;
  text-decoration:none
}
.vh-overview-support{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap
}
.vh-overview-support .vh-muted{
  width:100%
}
.vh-overview-support-actions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:7px;
  width:100%
}
.vh-overview-support-actions .vh-btn,.vh-overview-support-actions a.vh-btn{
  width:100%;
  box-sizing:border-box;
  justify-content:flex-start;
  text-align:left;
  text-decoration:none
}
@media(max-width:820px){
  .vh-shell{
    padding-bottom:70px
  }
  .vh-hero{
    padding:14px
  }
  .vh-hero h2{
    font-size:20px
  }
  .vh-ref-grid,.vh-grid,.vh-calc-layout,.vh-calc-grid{
    grid-template-columns:1fr!important
  }
  .vh-recipe-list{
    max-height:34vh
  }
  .vh-calc-actions{
    grid-template-columns:1fr auto
  }
  .game-switcher{
    margin-top:4px
  }
  .vh-overview-tools{
    grid-template-columns:1fr 1fr
  }
  .vh-home-continue-row{
    grid-template-columns:1fr
  }
  .vh-home-continue-row .vh-btn{
    justify-self:start
  }
}

.vh-resource-head,
.vh-resource-inventory {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px 64px 58px;
    gap: 6px;
    align-items: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.vh-resource-head {
    margin: 8px 0 4px;
    padding: 0 8px;
    color: var(--muted, #9e9789);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vh-resource-head > *,
.vh-resource-inventory > * {
    min-width: 0;
}

.vh-resource-inventory > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vh-resource-inventory .vh-input {
    width: 100%;
    min-width: 0;
    padding: 6px 7px;
}

/* Chromium's native number spinners use a light background in this panel, so the planner uses plain number fields instead. */
.vh-input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.vh-input[type="number"]::-webkit-inner-spin-button,
.vh-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.vh-missing {
    color: #e2b862;
}

.vh-covered {
    color: #7eb389;
}

@media (max-width: 600px) {
    .vh-resource-head,
    .vh-resource-inventory {
        grid-template-columns: minmax(0, 1fr) 42px 58px 54px;
        gap: 4px;
    }
}


/* Help cards keep their own natural height instead of stretching to match the longest card in the row. */
#valheim-help .vh-grid { align-items:start; }
#valheim-help .vh-card { align-self:start; }
.vh-note-new-actions [data-new-image-count] { margin-right:auto; align-self:center; }
@media(max-width:820px){
  .vh-guide.open .vh-guide-body{max-height:62dvh}
  .vh-note-new-actions{align-items:stretch}
  .vh-note-new-actions [data-new-image-count]{margin-right:0}
}

.vh-world-home-name{
  margin:3px 0 6px;
  color:#f0d49c;
  font-size:21px;
  font-weight:800;
  line-height:1.15;
  overflow-wrap:anywhere
}

/* Match the Icarus notebook's phone behavior: natural button widths, clean rows, no squeezed labels. */
@media (max-width: 560px) {
  #valheim-notes-content .vh-note-head,
  #valheim-notes .vh-note-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: center;
  }
  #valheim-notes-content .vh-note-head > [data-toggle],
  #valheim-notes .vh-note-head > [data-toggle] {
    width: 36px;
    min-width: 36px;
    padding: 6px 0;
  }
  #valheim-notes-content .vh-note-head > strong,
  #valheim-notes .vh-note-head > strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #valheim-notes-content .vh-note-head > .vh-muted,
  #valheim-notes .vh-note-head > .vh-muted {
    grid-column: 2;
    grid-row: 2;
  }
  #valheim-notes-content .vh-note-head > [data-rename],
  #valheim-notes-content .vh-note-head > [data-delete],
  #valheim-notes .vh-note-head > [data-rename],
  #valheim-notes .vh-note-head > [data-delete] {
    grid-row: 1 / span 2;
    white-space: nowrap;
    min-height: 36px;
    padding: 6px 8px;
    font-size: 12px;
  }
  #valheim-notes-content .vh-note-new-actions,
  #valheim-notes .vh-note-new-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
  }
  #valheim-notes-content .vh-note-new-actions > .notes-image-add,
  #valheim-notes .vh-note-new-actions > .notes-image-add {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    min-height: 40px;
  }
  #valheim-notes-content .vh-note-new-actions > [data-save],
  #valheim-notes .vh-note-new-actions > [data-save] {
    grid-column: 2;
    grid-row: 1;
    min-height: 40px;
  }
  #valheim-notes-content .vh-note-new-actions > [data-new-image-count],
  #valheim-notes .vh-note-new-actions > [data-new-image-count] {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: center;
    margin: 0;
  }
}

@media (max-width: 390px) {
  #valheim-notes-content .vh-note-head,
  #valheim-notes .vh-note-head {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  #valheim-notes-content .vh-note-head > [data-rename],
  #valheim-notes-content .vh-note-head > [data-delete],
  #valheim-notes .vh-note-head > [data-rename],
  #valheim-notes .vh-note-head > [data-delete] {
    grid-row: 3;
  }
  #valheim-notes-content .vh-note-head > [data-rename],
  #valheim-notes .vh-note-head > [data-rename] {
    grid-column: 2;
    justify-self: start;
  }
  #valheim-notes-content .vh-note-head > [data-delete],
  #valheim-notes .vh-note-head > [data-delete] {
    grid-column: 2;
    justify-self: end;
  }
}