/* 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;
  top: calc(var(--hudB, 64px));
  border-width: 18px;
  padding: 0 6px 8px;
}
.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] {
  filter: saturate(0.5);
}

/* ===== 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,
.hudR .chip,
.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;
}
.hudR .chip button[aria-pressed='true'] {
  box-sizing: border-box;
  background: none;
  border: 5px solid transparent;
  border-image: var(--stone-sq);
  color: var(--stone-ink);
}

/* level plate: a small laced hide like the windows, with a stone badge */
.lvlMini {
  background: none;
  border: 10px solid transparent;
  border-image: var(--hide-plate);
  outline: none;
  box-shadow: none;
  padding: 2px 8px;
  filter: drop-shadow(0 3px 0 rgba(36, 21, 9, 0.35));
}
.lvlMini .lvN {
  background: var(--stone-round);
  border: 0;
  color: var(--stone-ink);
  text-shadow: var(--stone-shadow);
  box-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(80, 30, 8, 0.5));
}

/* 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,
.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;
}
.bo-head .uin {
  width: 22px;
  height: 22px;
}