/* v40 "hide, wood and stone" skin: windows and sheets of stretched hide (torn edge, laced seam, a cord lashed
   over each corner), light buttons of bone, bottom-bar buttons of hide, main buttons of hewn dark orange stone (four different stones), dark wood bars, bone round buttons.
   The pictures are painted by tools/skin_gen.py into assets/ui/skin/. Loaded last, overrides only looks. */
:root {
  --woodtex: url('../assets/ui/skin/wood.webp') 0 0/512px 128px #4a2e18;
  --hide-panel: url('../assets/ui/skin/hide_panel.webp') 256 fill / 128px round;
  --hide-plate: url('../assets/ui/skin/hide_plate.webp') 128 fill / 32px round;
  --hide-tile: url('../assets/ui/skin/hide_tile.webp') 96 fill / 24px round;
  --stone: url('../assets/ui/skin/stone_btn0.webp') 40 fill / 14px stretch;
  --stone-sq: url('../assets/ui/skin/stone_sq.webp') 40 fill / 14px stretch;
  --stone-round: url('../assets/ui/skin/stone_round.webp') center/100% 100% no-repeat;
  --stitch: rgba(90, 58, 30, 0.42);
  --rim: #3a2414;
  --stone-ink: #fff4e4;
  --stone-shadow: 0 1px 0 rgba(70, 22, 4, 0.85), 0 0 3px rgba(70, 22, 4, 0.5);
  --bone: #f4ead2;
  --bone-lo: #d9c7a0;
}

/* ===== windows and sheets: one painted hide (9-slice) ===== */
.panel,
.qsheet,
.tray {
  box-sizing: border-box;
  background: none;
  border: 22px solid transparent;
  border-radius: 0;
  border-image: var(--hide-panel);
  outline: none;
  box-shadow: none;
  filter: drop-shadow(0 4px 0 rgba(36, 21, 9, 0.3)) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.25));
}
/* the hide's own transparent rim is ~8px, so the window sits a little higher and its text starts where it did
   before the skin (lessons point at things inside it) */
/* an open window stays above the build drawer: the drawer's transparent hide rim would otherwise catch clicks */
.panel {
  z-index: 7;
  /* in the middle of the free area between the top bar and the bottom bar: a short menu sits there, a long one fills
     the area (its max-height) and scrolls inside */
  top: calc(50% + (var(--hudB, 64px) - var(--cmdH, 110px)) / 2);
  transform: translate(-50%, -50%);
  border-width: 18px;
  padding: 0 6px 8px;
}
@media (max-width: 700px) {
  .panel {
    transform: translateY(-50%);
  }
}
/* the camp's sheet covers the round buttons of the top (they are above the map, not above a sheet) */
body.incamp .side {
  z-index: 7;
}
.qhead {
  padding: 4px 6px 6px;
}
.qbody {
  padding-top: 4px;
  padding-left: 4px;
  padding-right: 4px;
}
.qtabs {
  padding: 0 6px 6px;
}
.tabs {
  padding: 4px 6px 0;
}
.binfo {
  background: transparent;
  border-left: 2px dashed var(--stitch);
}

/* ===== cards inside a sheet: a lighter patch with a dark rim and a stitched seam, so it stands out on the hide ===== */
.qbody .card {
  background: linear-gradient(180deg, #fffaf0, #f6ecd6);
  border: 2px solid #6b4a2a;
  border-radius: 16px 14px 17px 13px;
  outline: 1.5px dashed var(--stitch);
  outline-offset: -6px;
  box-shadow:
    0 3px 0 rgba(58, 36, 20, 0.28),
    0 6px 10px rgba(58, 36, 20, 0.08);
  padding: 12px 14px;
}

/* ===== headings: carved, warm ink ===== */
.card h3,
.qhead h3 {
  color: #2b1a0c;
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.7);
}

/* ===== main buttons: dark orange stone; light buttons: bone ===== */
.btn {
  box-sizing: border-box;
  background: none;
  border: 6px solid transparent;
  border-image: var(--stone);
  padding: 1px 6px;
  color: var(--stone-ink);
  text-shadow: var(--stone-shadow);
  box-shadow: none;
  filter: drop-shadow(0 2.5px 0 rgba(80, 30, 8, 0.55));
}
/* neighbouring buttons get different stones so a row of them doesn't look stamped */
.btn:not(.alt):not(.danger):nth-child(4n + 2) {
  border-image-source: url('../assets/ui/skin/stone_btn1.webp');
}
.btn:not(.alt):not(.danger):nth-child(4n + 3) {
  border-image-source: url('../assets/ui/skin/stone_btn2.webp');
}
.btn:not(.alt):not(.danger):nth-child(4n + 4) {
  border-image-source: url('../assets/ui/skin/stone_btn3.webp');
}
.btn:active {
  transform: translateY(2px);
  filter: drop-shadow(0 0.5px 0 rgba(80, 30, 8, 0.55));
}
.btn.alt {
  background: linear-gradient(180deg, #fbf4e3, var(--bone) 55%, #e6d6b2);
  border: 2px solid #7a5a36;
  border-image: none;
  padding: 3px 9px;
  color: var(--rim);
  text-shadow: none;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 3px 0 #7a5a36;
  filter: none;
}
.btn.danger {
  border: 2px solid #7d2416;
  border-image: none;
  background: var(--bad);
  color: #fff;
  text-shadow: none;
}
.btn[disabled],
.btn[aria-disabled='true'] {
  filter: saturate(0.5);
}
/* an off button that still takes a tap to say why (js/ui/why.js) */
button[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== tabs: picked one is a wooden plank, the rest bone (v43: painted plates with an ink rim, tools/ui_paint.py) ===== */
.qtab,
.tab,
.campCard .ctabs .pill {
  border: 2px solid transparent;
  border-image: url('../assets/ui/skin/tab_bone.webp') 24 fill / 12px stretch;
  background: none;
  color: var(--rim);
  box-shadow: none;
  border-radius: 0;
  filter: drop-shadow(0 2px 0 rgba(58, 36, 20, 0.45));
}
.qtab[aria-selected='true'],
.tab[aria-selected='true'],
.campCard .ctabs .pill[aria-pressed='true'] {
  border-image-source: url('../assets/ui/skin/tab_wood.webp');
  background: none;
  color: #fff1d6;
  text-shadow: 0 1px 0 #000;
  box-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(20, 10, 0, 0.5));
}

/* ===== round header buttons (? and ✕): carved bone ===== */
.qx {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 38% 32%, #fffaf0, var(--bone) 45%, var(--bone-lo));
  border: 2px solid var(--rim);
  color: var(--rim);
  font-weight: 900;
  box-shadow:
    inset 0 -2px 0 rgba(120, 80, 40, 0.25),
    0 3px 0 rgba(36, 21, 9, 0.45);
}
.qx + .qx {
  margin-left: 8px;
}

/* ===== top bar and bottom bar: dark wood ===== */
.rpill,
.nowChip,
#toast .t,
.cmdbar {
  background: var(--woodtex);
  border: 2px solid #1e1108;
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 170, 0.16),
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 4px 0 rgba(20, 10, 0, 0.4),
    0 8px 18px rgba(0, 0, 0, 0.22);
}
.cmdbar {
  border-width: 3px;
}
/* bottom bar: hide tiles; the picked one is stone; Build is a round stone */
.cb {
  box-sizing: border-box;
  background: none;
  border: 6px solid transparent;
  border-image: var(--hide-tile);
  color: var(--rim);
  box-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
}
.cb[aria-pressed='true'] {
  background: none;
  border-image: var(--stone-sq);
  color: var(--stone-ink);
  text-shadow: var(--stone-shadow);
}
/* news at the camp: the tile still pulses, its words stay dark (the hide covers the old red fill, white words were lost on it) */
#btnCamp.alert:not([aria-pressed='true']) {
  color: var(--rim);
}
.cb.big,
.cb.big[aria-pressed='true'] {
  background: var(--stone-round);
  border: 0;
  border-image: none;
  color: var(--stone-ink);
  text-shadow: var(--stone-shadow);
  box-shadow: none;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4));
}
.cb.big[aria-pressed='true'] {
  filter: drop-shadow(0 0 3px #f2c440) drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4));
}

/* ===== build drawer cards: lighter patches with a dark rim (v43: painted parchment, an orange rim when picked, a
   stitched one when locked; the border widths stay as they were) ===== */
.item {
  background: none;
  border-color: transparent;
  border-image: url('../assets/ui/skin/card.webp') 28 fill / 14px stretch;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(58, 36, 20, 0.25));
}
.item[aria-pressed='true'] {
  border-color: transparent;
  border-image: url('../assets/ui/skin/card_on.webp') 28 fill / 14px stretch;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 4px 0 rgba(224, 112, 46, 0.35));
}
.item.locked {
  border-style: solid;
  border-color: transparent;
  border-image: url('../assets/ui/skin/card_lock.webp') 28 fill / 14px stretch;
  background: none;
}

/* ===== cards on the map (camp, building info, lessons, the morning card): windows of their own, so the same hide ===== */
.side > .card,
.side > #info,
.daycard {
  box-sizing: border-box;
  background: none;
  border: 20px solid transparent;
  border-radius: 0;
  border-image: var(--hide-panel);
  outline: none;
  box-shadow: none;
  padding: 2px 6px 6px;
  filter: drop-shadow(0 4px 0 rgba(36, 21, 9, 0.3)) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.22));
}

/* ===== mini-games: the shared top bar, bottom card, entry card and result box ===== */
.mg-title {
  background: none;
  border: 10px solid transparent;
  border-radius: 0;
  border-image: var(--hide-plate);
  box-shadow: none;
  padding: 0 6px;
  filter: drop-shadow(0 3px 0 rgba(36, 21, 9, 0.4));
}
.mg-x,
.mg-count:not(.warn) {
  background: var(--woodtex);
  border: 2px solid #1e1108;
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 170, 0.16),
    0 3px 0 rgba(20, 10, 0, 0.45);
}
.mg-card,
.mgEntry,
.mgMustCard,
.mgRes .box {
  background: none;
  border: 20px solid transparent;
  border-radius: 0;
  border-image: var(--hide-panel);
  box-shadow: none;
  padding: 2px 6px 6px;
  filter: drop-shadow(0 4px 0 rgba(36, 21, 9, 0.35));
}
.mg-btn,
.mgHub .row button {
  background: linear-gradient(180deg, #fbf4e3, var(--bone) 55%, #e6d6b2);
  border: 2px solid #7a5a36;
  color: var(--rim);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 3px 0 #7a5a36;
}
.mg-btn.go,
.mgHub .row.hot button,
.gt-promo {
  background: none;
  border: 6px solid transparent;
  border-image: var(--stone);
  color: var(--stone-ink);
  text-shadow: var(--stone-shadow);
  box-shadow: none;
  filter: drop-shadow(0 2.5px 0 rgba(80, 30, 8, 0.55));
}
/* plates floating over a mini-game's scene (the family at the gate, the fur's patience, the arrowhead goal,
   the nomad, the paint tools, the dream's title on a desktop): small laced hides */
.gt-fam,
.sh-pat,
.fl-goal,
.hg-nom,
.cp-tools,
.mg.desk.sd .mg-title {
  background: none;
  border: 10px solid transparent;
  border-radius: 0;
  border-image: var(--hide-plate);
  box-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(36, 21, 9, 0.4));
}
.cp-title {
  background: none !important;
  border: 10px solid transparent !important;
  border-radius: 0;
  border-image: var(--hide-plate);
  box-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(36, 21, 9, 0.4));
}
.hu-tag,
.st-tag,
.hg-goods {
  background: var(--woodtex);
  border: 1.5px solid #1e1108;
}
.dr-track {
  background: var(--woodtex);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
}

/* ===== the guest album: a big hide; empty slots are pressed into it ===== */
.gc-sheet {
  background: none;
  color: var(--ink);
  border: 22px solid transparent;
  border-radius: 0;
  border-image: var(--hide-panel);
  padding: 4px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  filter: drop-shadow(0 -4px 14px rgba(0, 0, 0, 0.35));
}
.mg.desk .gc-sheet {
  border-radius: 0;
}
.gc-head small,
.gc-sh small,
.gc-foot {
  color: var(--muted);
}
.gc-x {
  background: radial-gradient(circle at 38% 32%, #fffaf0, var(--bone) 45%, var(--bone-lo));
  border: 2px solid var(--rim);
  color: var(--rim);
}
.gc-c.off {
  background: rgba(120, 80, 40, 0.1);
  border: 2px dashed rgba(90, 58, 30, 0.55);
  box-shadow: inset 0 2px 4px rgba(90, 58, 30, 0.18);
}
.gc-c.off span {
  color: rgba(90, 58, 30, 0.7);
}

/* iOS WebKit paints a scrolling window's filter onto its scrolled content as well, so every letter got the
   window's drop-shadow (a ghost copy 4px below). On iOS the windows that scroll, or hold a scroller, go without it. */
@supports (-webkit-touch-callout: none) {
  .panel,
  .tray,
  .qsheet,
  .side > .card,
  .side > #info,
  .daycard,
  .gc-sheet,
  .mg-card {
    filter: none;
  }
}

/* ===== v43: painted icons in text and painted rating stars (uiInl, starsHTML in js/camp.js) ===== */
.uin {
  width: 1.3em;
  height: 1.3em;
  margin: -0.3em 1px -0.25em;
  vertical-align: middle;
}
.pstars {
  display: inline-flex;
  gap: 1px;
  vertical-align: middle;
  white-space: nowrap;
}
.pstars img {
  width: 1.1em;
  height: 1.1em;
  filter: drop-shadow(0 1px 0 rgba(40, 20, 5, 0.3));
}
.stars .pstars img {
  width: 18px;
  height: 18px;
}
.mgRes .stars span img {
  width: 1em;
  height: 1em;
  display: block;
  filter: drop-shadow(0 3px 0 rgba(40, 20, 5, 0.35));
}
/* painted icons where emoji stood: the Shaman's Book, the alerts, the bonus strip, the build tools */
.ach i img {
  width: 30px;
  height: 30px;
  display: block;
}
.alerts .al span img {
  width: 26px;
  height: 26px;
  display: block;
  margin: auto;
}
.boon img.pi {
  border-radius: 0;
  background: none;
  object-fit: contain;
}
.item .tool-ico img {
  width: 64%;
  height: 64%;
  background: none;
  border-radius: 0;
  object-fit: contain;
}
.item .tool-ico img.path-thumb {
  width: 100%;
  height: 100%;
}
.campCard .rrow button.pill,
.campCard .tpick button.pill,
.campCard .acts .btn.alt {
  box-sizing: border-box;
  min-height: 44px;
  border: 6px solid transparent;
  border-image: url('../assets/ui/skin/tab_bone.webp') 24 fill / 12px stretch;
  border-radius: 0;
  background: none;
  color: var(--rim);
  text-shadow: none;
  box-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(58, 36, 20, 0.4));
}
.campCard .rrow button[data-ship] {
  border-image-source: url('../assets/ui/skin/tab_wood.webp');
  color: #fff1d6;
  text-shadow: 0 1px 0 #3a2414;
}
.restab.cstore .rrow button.pill {
  min-height: 44px;
}
.campCard .rrow button.pill:active,
.campCard .tpick button.pill:active,
.campCard .acts .btn.alt:active {
  transform: translateY(2px);
  filter: drop-shadow(0 0.5px 0 rgba(58, 36, 20, 0.4));
}
.campCard .rrow button.pill:focus-visible,
.campCard .tpick button.pill:focus-visible,
.campCard .acts .btn.alt:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
.campCard .rrow button.pill:disabled,
.campCard .acts .btn.alt:disabled {
  filter: grayscale(0.6);
  opacity: 0.55;
}
.bo-head .uin {
  width: 22px;
  height: 22px;
}

/* a card two levels or more ahead: a "?" tablet in colour, not a grey preview */
.item.locked.mystery img {
  filter: none;
  opacity: 1;
}
.item.locked.mystery {
  opacity: 0.85;
}

/* ===== build cards (2026-10-30): one fixed layout, so a card never grows into the next one. Top to bottom: the
   picture (the category in its corner, the "built" count in the other, the biome at its foot), the
   name on two lines at most, the price, and one footer line (what is missing, else "copies +25%").
   Every card of the drawer has the same height, the tallest case included. ===== */
.dock #items {
  --cardH: 190px;
  --picH: 78px;
  /* the hide's stitched rim reaches ~14px inside the window: the cards scroll away above it, not over it */
  margin-bottom: 14px;
}
/* a phone on its side: the window is ~110px tall, and 14px of it left less than one card (107px) to see and tap */
@media (orientation: landscape) and (max-height: 500px) {
  .dock #items {
    margin-bottom: 2px;
  }
}
@media (min-width: 701px) and (pointer: fine) {
  .dock #items {
    --cardH: 164px;
    --picH: 58px;
  }
  /* wide enough for a two-line name and a price with its goods (104px cut both; build-menu.css loads after this file) */
  .dock .tray #items {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
.dock #items > .item[data-build] {
  height: auto;
  min-height: var(--cardH);
  contain-intrinsic-size: auto var(--cardH);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
  padding: 8px 8px 7px;
  overflow: hidden;
  position: relative;
}
/* the picture, plain on the card */
.dock #items > .item[data-build] > img {
  flex: none;
  width: 100%;
  height: var(--picH);
  object-fit: contain;
  background: none;
}
/* the name: two lines at most, under a thin rule */
.dock #items > .item[data-build] > b {
  flex: none;
  min-height: 2.3em;
  padding-top: 3px;
  border-top: 1px solid rgba(120, 82, 44, 0.18);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  color: var(--rim);
}
/* the price (or the reason it is locked), plain on the card */
.dock #items > .item[data-build] > span {
  flex: none;
  align-self: center;
  max-width: 100%;
  min-height: 22px;
  justify-content: center;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
.dock #items > .item.locked[data-build] > span {
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}
.dock #items > .item[data-build] > span .sub.mats {
  display: inline-flex;
}
/* the footer: one line at the bottom, what is missing first */
.dock #items > .item[data-build] > .short,
.dock #items > .item[data-build] > .copyUp {
  margin-top: auto;
  flex: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px; /* (the 13-px text rule of tests_ui.py: 12 px was too small on a phone) */
  line-height: 16px;
}
.dock #items > .item[data-build]:has(> .short) > .copyUp {
  display: none;
}
@media (min-width: 701px) {
  .dock #items > .item[data-build] > .copyUp {
    display: block;
  }
}
/* the biome: a badge at the foot of the picture, not a line of its own */
.dock #items > .item[data-build] > .bio {
  position: absolute;
  top: calc(8px + var(--picH) - 30px);
  right: 10px;
  width: 30px;
  height: 30px;
  margin: 0;
  pointer-events: none;
}
.dock #items > .item[data-build] > .bio .bico {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 1px 2px rgba(40, 24, 8, 0.5));
}
.dock #items > .item[data-build] .ctop {
  top: 10px;
  left: 10px;
  right: 10px;
}
.dock #items > .item[data-build] .catI {
  width: 26px;
  height: 26px;
}

/* ===== the trading post (js/camp/trade.js): Buy / Sell are bone plates in the display face, the one that is open turns to wood;
   the slider is a rope with a stone for a knob in a hide panel; Max is a bone plate, the big button the orange stone ===== */
.restab:not(.cstore) .rrow button.pill {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.campCard .rrow button.pill[aria-pressed='true'] {
  border-image-source: url('../assets/ui/skin/tab_wood.webp');
  color: #fff1d6;
  text-shadow: 0 1px 0 #3a2414;
  outline: 0;
  background: none;
}
.tpick {
  box-sizing: border-box;
  gap: 6px;
  padding: 8px 10px 10px;
  border: 12px solid transparent;
  border-image: var(--hide-tile);
  border-radius: 0;
  background: none;
  filter: drop-shadow(0 2px 0 rgba(58, 36, 20, 0.35));
}
.tpick small {
  color: var(--rim);
  font-weight: 700;
}
.tpick input[type='range'] {
  --rope: #8a5a2c;
  -webkit-appearance: none;
  appearance: none;
  height: 36px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.tpick input[type='range']::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 6px;
  border: 2px solid #3a2414;
  background:
    repeating-linear-gradient(115deg, rgba(58, 36, 20, 0.35) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, #e98a2c var(--p, 0%), #b98a52 var(--p, 0%));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 2px 0 rgba(58, 36, 20, 0.35);
}
.tpick input[type='range']::-moz-range-track {
  height: 8px;
  border-radius: 6px;
  border: 2px solid #3a2414;
  background: #b98a52;
}
.tpick input[type='range']::-moz-range-progress {
  height: 8px;
  border-radius: 6px;
  background: #e98a2c;
}
.tpick input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 36px;
  height: 36px;
  margin-top: -14px;
  border: 0;
  border-radius: 50%;
  background: var(--stone-round);
  filter: drop-shadow(0 2px 0 rgba(58, 36, 20, 0.55));
}
.tpick input[type='range']::-moz-range-thumb {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--stone-round);
}
.tpick input[type='range']:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 8px;
}
.tpick .acts {
  align-items: center;
}
.tpick .acts .btn {
  flex: 1 1 auto;
}