/* ---- The carved woodland frame: Pause, Settings, Quests, Events -------------
   A wooden frame with a gold hairline, a moss-green panel, leafy vines over its
   corners and an acorn crest on its top edge (assets/ui/frame-*.svg). Every size
   is in design units: --k is one unit on screen, chosen per layout so the whole
   frame fits the overlay (a size container, so its safe-area padding is already
   taken off):
     tall   (desktop, tablets):        one column, 830 × 1010 units
     short  (phones in landscape):     two columns, 1250 × 600 units
     narrow (split view, small windows): one column, slimmer, 680 × 1070 units
   Settings uses the same frame; its body scrolls between a fixed header and
   the Done button. The Quests, Events, Market, Profile, Daily gift and Co-op
   pages keep their own sheet inside the frame (.pz-sheet, see the end of this
   file). */

.overlay.is-framed { container: pz / size; }
.pz.is-update { animation: none; }

.pz {
  --k: clamp(.4px, min(100vh / 1010, 100vw / 830), 1.05px);
  --u: var(--k);
  --cream: #fff3d6; --cream-2: #f3e2b8; --leaf-text: #cfd6b4;
  --gold: #f2c14e; --gold-line: #c99641; --bark: #2a170a;
  /* Content that brings its own parchment styles (co-op seeds) reads these. */
  --sheet-2: rgba(8,22,12,.5); --sheet-3: #b8873a; --sheet-drop: #1a0f06; --sheet-text: var(--cream); --sheet-soft: var(--leaf-text);
  --accent: var(--gold); --focus: #ffe394;
  position: relative; display: flex; flex-direction: column;
  width: min(100%, calc(var(--u) * 780)); max-height: calc(100% - var(--u) * 52);
  margin-top: calc(var(--u) * 52);
  color: var(--cream); text-align: center;
  animation: pz-in .32s cubic-bezier(.2, .9, .3, 1.15);
}
@supports (width: 1cqw) {
  .pz { --k: clamp(.4px, min(100cqh / 1010, 100cqw / 830), 1.05px); }
}
@keyframes pz-in { from { transform: translateY(18px) scale(.95); opacity: 0; } }

/* Wood: bark-dark rim, warm grain, highlight on its top edge. */
.pz-frame {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex;
  padding: calc(var(--u) * 22); border-radius: calc(var(--u) * 50);
  background:
    repeating-linear-gradient(97deg, rgba(40,20,6,.16) 0 calc(var(--u) * 2), transparent calc(var(--u) * 2) calc(var(--u) * 11), rgba(255,210,150,.06) calc(var(--u) * 11) calc(var(--u) * 13), transparent calc(var(--u) * 13) calc(var(--u) * 23)),
    radial-gradient(120% 60% at 50% 0, rgba(255,214,150,.22), transparent 60%),
    linear-gradient(180deg, #9a6535 0%, #7a4b24 22%, #64391a 55%, #7b4a23 82%, #5a3216 100%);
  box-shadow:
    0 0 0 calc(var(--u) * 4) var(--bark),
    inset 0 calc(var(--u) * 3) 0 rgba(255,214,160,.35),
    inset 0 calc(var(--u) * -4) 0 rgba(30,14,4,.45),
    0 calc(var(--u) * 14) 0 calc(var(--u) * 4) rgba(20,10,3,.55),
    0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(0,0,0,.55);
}
/* Moss panel: lit from the crest, gold hairline, faint leaf watermarks. */
.pz-panel {
  position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b8873a transparent;
  padding: calc(var(--u) * 74) calc(var(--u) * 44) calc(var(--u) * 34);
  border-radius: calc(var(--u) * 30);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23a6d77a' opacity='.07'%3E%3Cpath d='M50 96C20 70 18 34 50 4c32 30 30 66 0 92z'/%3E%3C/g%3E%3Cpath d='M50 92V12' stroke='%23a6d77a' stroke-opacity='.06' stroke-width='2'/%3E%3C/svg%3E") left calc(var(--u) * 20) top 32% / calc(var(--u) * 90) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23a6d77a' opacity='.07'%3E%3Cpath d='M50 96C20 70 18 34 50 4c32 30 30 66 0 92z'/%3E%3C/g%3E%3Cpath d='M50 92V12' stroke='%23a6d77a' stroke-opacity='.06' stroke-width='2'/%3E%3C/svg%3E") right calc(var(--u) * 20) top 28% / calc(var(--u) * 80) no-repeat,
    radial-gradient(90% 55% at 50% 12%, #2f5d31 0%, transparent 70%),
    linear-gradient(180deg, #1f4626 0%, #183a20 45%, #10291a 100%);
  box-shadow:
    0 0 0 calc(var(--u) * 3) #d9a64a,
    0 0 0 calc(var(--u) * 5) #3a2210,
    inset 0 0 0 calc(var(--u) * 2) rgba(10,24,12,.6),
    inset 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0,0,0,.35);
}

/* Decorations around the frame: never in the way of a tap. */
.pz-vine, .pz-flower, .pz-crest { position: absolute; z-index: 2; pointer-events: none; display: block; background: center / contain no-repeat; }
.pz-vine { width: calc(var(--u) * 200); height: calc(var(--u) * 170); background-image: url('../../assets/ui/frame-vine.svg'); }
.pz-vine.tl { left: calc(var(--u) * -24); top: calc(var(--u) * -24); }
.pz-vine.tr { right: calc(var(--u) * -24); top: calc(var(--u) * -24); transform: scaleX(-1); }
/* Flipped about 1/1.8 of the box (not its edge), so the shrunk vine keeps its
   outer corner on the frame's corner instead of hanging below it. */
.pz-vine.bl { left: calc(var(--u) * -24); bottom: calc(var(--u) * -24); transform: scale(.8, -.8); transform-origin: 0 55.556%; }
.pz-vine.br { right: calc(var(--u) * -24); bottom: calc(var(--u) * -24); transform: scale(-.8, -.8); transform-origin: 55.556% 55.556%; }
.pz-flower { width: calc(var(--u) * 34); height: calc(var(--u) * 34); top: calc(var(--u) * -6); background-image: url('../../assets/ui/hud-flower.svg'); filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 2) rgba(0,0,0,.4)); }
.pz-flower.l { left: calc(var(--u) * 76); }
.pz-flower.r { right: calc(var(--u) * 76); }
.pz-crest {
  --cx: 50%;
  left: var(--cx); top: calc(var(--u) * -60); width: calc(var(--u) * 236); height: calc(var(--u) * 148);
  transform: translateX(-50%); background-image: url('../../assets/ui/frame-crest.svg');
  filter: drop-shadow(0 calc(var(--u) * 5) calc(var(--u) * 4) rgba(0,0,0,.45));
}

/* ---- Heading: brand, title, trail ---------------------------------------- */
.pz-head { flex: none; display: grid; justify-items: center; }
.pz-brand {
  position: relative; margin: 0; padding: 0 calc(var(--u) * 6) calc(var(--u) * 8);
  font-size: calc(var(--u) * 40); line-height: 1.1; font-weight: 700; color: #f8dd98; letter-spacing: calc(var(--u) * .5);
  text-shadow: 0 calc(var(--u) * 2.5) 0 #2a170a, 0 calc(var(--u) * -1.5) 0 #2a170a, calc(var(--u) * 2) 0 0 #2a170a, calc(var(--u) * -2) 0 0 #2a170a, 0 calc(var(--u) * 4) calc(var(--u) * 6) rgba(0,0,0,.4);
  background: linear-gradient(90deg, transparent, #d9a64a 18%, #f3cf73 50%, #d9a64a 82%, transparent) center bottom / 100% calc(var(--u) * 2.5) no-repeat;
}
.pz-brand::before, .pz-brand::after {
  content: ''; position: absolute; top: 50%; width: calc(var(--u) * 34); height: calc(var(--u) * 26); margin-top: calc(var(--u) * -17);
  background: url('../../assets/ui/hud-sprig.svg') center / contain no-repeat;
}
.pz-brand::before { right: 100%; }
.pz-brand::after { left: 100%; background-image: url('../../assets/ui/hud-sprig-r.svg'); }
.pz-title {
  position: relative; margin: calc(var(--u) * 4) 0 0; padding: 0 calc(var(--u) * 10);
  font-size: calc(var(--u) * 112); line-height: 1; font-weight: 700; letter-spacing: calc(var(--u) * -1.5); color: var(--cream);
  text-shadow:
    0 calc(var(--u) * 3.5) 0 #2a1708, 0 calc(var(--u) * -3) 0 #2a1708, calc(var(--u) * 3.5) 0 0 #2a1708, calc(var(--u) * -3.5) 0 0 #2a1708,
    calc(var(--u) * 2.5) calc(var(--u) * 2.5) 0 #2a1708, calc(var(--u) * -2.5) calc(var(--u) * 2.5) 0 #2a1708, calc(var(--u) * 2.5) calc(var(--u) * -2.5) 0 #2a1708, calc(var(--u) * -2.5) calc(var(--u) * -2.5) 0 #2a1708,
    0 calc(var(--u) * 9) 0 #2a1708, 0 calc(var(--u) * 14) calc(var(--u) * 18) rgba(0,0,0,.5);
}
.pz-title::before, .pz-title::after {
  content: ''; position: absolute; top: 50%; width: calc(var(--u) * 64); height: calc(var(--u) * 48); margin-top: calc(var(--u) * -18);
  background: url('../../assets/ui/hud-sprig.svg') center / contain no-repeat;
  filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 2) rgba(0,0,0,.35));
}
.pz-title::before { right: 100%; }
.pz-title::after { left: 100%; background-image: url('../../assets/ui/hud-sprig-r.svg'); }
.pz-sub {
  position: relative; margin: calc(var(--u) * 10) 0 0; padding: 0 calc(var(--u) * 46);
  font-size: calc(var(--u) * 34); line-height: 1.15; font-weight: 700; color: var(--cream-2);
  text-shadow: 0 calc(var(--u) * 2.5) 0 #13261a, 0 calc(var(--u) * -1) 0 #13261a, calc(var(--u) * 1.5) 0 0 #13261a, calc(var(--u) * -1.5) 0 0 #13261a;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pz-sub::before, .pz-sub::after {
  content: ''; position: absolute; top: 50%; width: calc(var(--u) * 34); height: calc(var(--u) * 14); margin-top: calc(var(--u) * -6);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 14'%3E%3Cpath d='M2 7h16' stroke='%23d9a64a' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M15 7c4-6 11-6 17 0-6 6-13 6-17 0z' fill='%23e8b850' stroke='%236b4416' stroke-width='1.2'/%3E%3Cpath d='M8 7l-5-4M8 7l-5 4' stroke='%23d9a64a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pz-sub::before { left: 0; transform: scaleX(-1); }
.pz-sub::after { right: 0; }

/* ---- Pause: round, lives, seeds ---------------------------------------- */
.pz-stats {
  flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center;
  margin: calc(var(--u) * 26) 0 0; padding: calc(var(--u) * 14) calc(var(--u) * 8);
  border: calc(var(--u) * 3) solid var(--gold-line); border-radius: calc(var(--u) * 26);
  background: linear-gradient(180deg, rgba(6,18,10,.5), rgba(6,18,10,.72));
  box-shadow: 0 0 0 calc(var(--u) * 2.5) var(--bark), inset 0 calc(var(--u) * 2) 0 rgba(255,230,160,.12), inset 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(0,0,0,.35);
}
.pz-stats > div { position: relative; display: grid; grid-template-columns: auto minmax(0, auto); justify-content: center; align-items: center; column-gap: calc(var(--u) * 14); min-width: 0; text-align: left; }
.pz-stats > div + div::before {
  content: ''; position: absolute; left: 0; top: 8%; bottom: 8%; width: calc(var(--u) * 2.5); border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-line) 25%, var(--gold-line) 75%, transparent);
}
.pz-stats dt { display: contents; }
.pz-stats .pz-ico { grid-row: 1 / 3; width: calc(var(--u) * 54); height: calc(var(--u) * 54); display: grid; }
.pz-stats .pz-ico svg { width: 100%; height: 100%; filter: drop-shadow(0 calc(var(--u) * 3) 0 rgba(0,0,0,.45)); }
.pz-stats .lbl { align-self: end; font-size: calc(var(--u) * 20); line-height: 1; font-weight: 700; letter-spacing: calc(var(--u) * 1); text-transform: uppercase; color: #ead7a6; }
.pz-stats dd {
  align-self: start; margin: calc(var(--u) * 3) 0 0; font-size: calc(var(--u) * 40); line-height: 1; font-weight: 700; color: var(--cream);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 calc(var(--u) * 3) 0 #0c1a0e, 0 calc(var(--u) * -1) 0 #0c1a0e, calc(var(--u) * 1.5) 0 0 #0c1a0e, calc(var(--u) * -1.5) 0 0 #0c1a0e;
}
.pz-ico.round { color: var(--gold); }
.pz-ico.lives { color: #ec4b3f; }
.pz-ico.seeds { color: #f0b93d; }

/* ---- Buttons ------------------------------------------------------------ */
.pz-actions { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 18) calc(var(--u) * 20); margin-top: calc(var(--u) * 28); }
.pz-btn {
  position: relative; min-width: 0; height: calc(var(--u) * 84); margin: 0; padding: 0 calc(var(--u) * 12);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 12);
  border: calc(var(--u) * 3) solid #b8873a; border-radius: calc(var(--u) * 24); cursor: pointer;
  font-family: inherit; font-size: calc(var(--u) * 27); line-height: 1.02; font-weight: 700; color: var(--cream);
  text-shadow: 0 calc(var(--u) * 2.5) 0 #0c1a0e, 0 calc(var(--u) * -1) 0 #0c1a0e, calc(var(--u) * 1.5) 0 0 #0c1a0e, calc(var(--u) * -1.5) 0 0 #0c1a0e;
  background: linear-gradient(180deg, #33603a 0%, #23472b 45%, #1a3820 100%);
  box-shadow:
    0 0 0 calc(var(--u) * 3) var(--bark),
    0 calc(var(--u) * 7) 0 calc(var(--u) * 3) #160c04,
    inset 0 calc(var(--u) * 2.5) 0 rgba(255,236,170,.2),
    inset 0 calc(var(--u) * -5) 0 rgba(0,0,0,.22);
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--spring, ease), box-shadow .18s, filter .15s;
}
/* A label that can't fit on one line wraps to two rather than being cut. */
.pz-btn > span { min-width: 0; text-wrap: balance; text-align: center; }
.pz-btn svg { flex: none; width: calc(var(--u) * 38); height: calc(var(--u) * 38); color: var(--gold); filter: drop-shadow(0 calc(var(--u) * 2.5) 0 rgba(0,0,0,.5)); }
.pz-btn:active {
  transform: translateY(calc(var(--u) * 5)); transition-duration: .05s;
  box-shadow: 0 0 0 calc(var(--u) * 3) var(--bark), 0 calc(var(--u) * 2) 0 calc(var(--u) * 3) #160c04, inset 0 calc(var(--u) * 2.5) 0 rgba(255,236,170,.2), inset 0 calc(var(--u) * -3) 0 rgba(0,0,0,.22);
}
.pz-btn:focus-visible, .pz-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.pz-btn:disabled { cursor: default; filter: saturate(.4) brightness(.8); transform: none; }
.pz-wide, .pz-go { grid-column: 1 / -1; }
/* A faint pair of leaves at each end of the wide buttons. */
.pz-wide::before, .pz-wide::after, .pz-go::before, .pz-go::after {
  content: ''; position: absolute; top: 50%; width: calc(var(--u) * 58); height: calc(var(--u) * 44); margin-top: calc(var(--u) * -22);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 46'%3E%3Cg fill='%23a6d77a'%3E%3Cpath d='M8 42C6 26 14 10 32 2c4 18-6 34-24 40z'/%3E%3Cpath d='M14 44c10-12 26-16 44-10-10 12-28 16-44 10z' opacity='.8'/%3E%3C/g%3E%3Cpath d='M9 41C14 28 21 17 30 6M15 43c12-4 25-7 40-9' stroke='%23183a1e' stroke-opacity='.5' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .14; pointer-events: none;
}
.pz-wide::before, .pz-go::before { left: calc(var(--u) * 22); }
.pz-wide::after, .pz-go::after { right: calc(var(--u) * 22); transform: scaleX(-1); }
.pz-go {
  height: calc(var(--u) * 118); gap: calc(var(--u) * 26); font-size: calc(var(--u) * 56); letter-spacing: calc(var(--u) * -.5);
  border: calc(var(--u) * 4) solid #f4c95a; border-radius: calc(var(--u) * 30); color: #fffaf0;
  text-shadow:
    0 calc(var(--u) * 3.5) 0 #1d4a14, 0 calc(var(--u) * -2) 0 #1d4a14, calc(var(--u) * 2.5) 0 0 #1d4a14, calc(var(--u) * -2.5) 0 0 #1d4a14,
    calc(var(--u) * 2) calc(var(--u) * 2) 0 #1d4a14, calc(var(--u) * -2) calc(var(--u) * 2) 0 #1d4a14, 0 calc(var(--u) * 6) calc(var(--u) * 8) rgba(0,0,0,.3);
  background:
    radial-gradient(70% 60% at 50% 0, rgba(255,255,210,.35), transparent 70%),
    linear-gradient(180deg, #8fe06a 0%, #62c447 36%, #45a236 70%, #2f8029 100%);
  box-shadow:
    0 0 0 calc(var(--u) * 3.5) var(--bark),
    0 calc(var(--u) * 9) 0 calc(var(--u) * 3.5) #160c04,
    0 calc(var(--u) * 14) calc(var(--u) * 26) rgba(80,200,60,.18),
    inset 0 calc(var(--u) * 3) 0 rgba(255,255,220,.55),
    inset 0 calc(var(--u) * -7) 0 rgba(20,70,12,.4);
}
.pz-go::before, .pz-go::after { width: calc(var(--u) * 86); height: calc(var(--u) * 66); margin-top: calc(var(--u) * -30); opacity: .3; filter: brightness(.55) saturate(1.3); }
.pz-go svg { width: calc(var(--u) * 58); height: calc(var(--u) * 58); color: #fff6dc; filter: drop-shadow(0 calc(var(--u) * 3) 0 #1d4a14); }
.pz-go:active {
  box-shadow: 0 0 0 calc(var(--u) * 3.5) var(--bark), 0 calc(var(--u) * 3) 0 calc(var(--u) * 3.5) #160c04,
    inset 0 calc(var(--u) * 3) 0 rgba(255,255,220,.55), inset 0 calc(var(--u) * -4) 0 rgba(20,70,12,.4);
}
.pz-btn.danger {
  border-color: #e4a35a; color: #fff4e8;
  background: linear-gradient(180deg, #c8643c 0%, #a54a2a 55%, #84371d 100%);
}
.pz-btn.danger svg { color: #ffe0b0; }

/* ---- Pause: two columns on short landscape screens (phones) -------------- */
@container pz (max-height: 660px) and (min-aspect-ratio: 4/3) {
  .pz-pause {
    --k: clamp(.36px, min(100cqh / 600, 100cqw / 1250), 1px);
    width: min(100%, calc(var(--u) * 1214));
  }
  .pz-pause .pz-panel {
    display: grid; grid-template-columns: minmax(0, 450fr) minmax(0, 600fr); grid-template-rows: 1fr auto 1fr;
    grid-template-areas: "head act" "stats act" ". act"; column-gap: calc(var(--u) * 40);
    padding: calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 36);
  }
  .pz-pause .pz-head { grid-area: head; align-self: end; padding-top: calc(var(--u) * 56); }
  .pz-pause .pz-stats { grid-area: stats; margin-top: calc(var(--u) * 24); padding-left: 0; padding-right: 0; }
  .pz-pause .pz-stats > div { column-gap: calc(var(--u) * 10); }
  .pz-pause .pz-stats .pz-ico { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
  .pz-pause .pz-stats dd { font-size: calc(var(--u) * 36); }
  .pz-pause .pz-stats .lbl { font-size: calc(var(--u) * 18); }
  .pz-pause .pz-actions { grid-area: act; align-self: center; margin: 0; }
  .pz-pause .pz-title { font-size: calc(var(--u) * 104); }
  .pz-pause .pz-btn:not(.pz-go) { font-size: calc(var(--u) * 26); }
  /* The crest crowns the left column. */
  .pz-pause .pz-crest { --cx: calc(var(--u) * (22 + 40 + 225)); }
}
/* Narrow windows: slimmer frame, the stats stack their labels. */
@container pz (max-width: 620px) and (max-aspect-ratio: 4/3) {
  .pz-pause { --k: clamp(.36px, min(100cqh / 1070, 100cqw / 660), 1px); width: min(100%, calc(var(--u) * 640)); }
  .pz-pause .pz-panel { padding-left: calc(var(--u) * 28); padding-right: calc(var(--u) * 28); }
  .pz-pause .pz-stats > div { grid-template-columns: auto; justify-items: center; text-align: center; row-gap: calc(var(--u) * 4); }
  .pz-pause .pz-stats .pz-ico { grid-row: auto; width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
  .pz-pause .pz-btn:not(.pz-go) { font-size: calc(var(--u) * 29); }
}

/* ---- Victory & Defeat ------------------------------------------------------
   The pause menu's layout: title, what happened, the match's numbers, rewards,
   then the next step as the big green button. Victory glows gold; Defeat
   cools the panel with an ember-red haze. */
.pz-result { --k: clamp(.4px, min(100vh / 1260, 100vw / 830), 1.05px); }
@supports (width: 1cqw) {
  .pz-result { --k: clamp(.4px, min(100cqh / 1260, 100cqw / 830), 1.05px); }
}
.pz-result .pz-panel { padding-top: calc(var(--u) * 62); padding-bottom: calc(var(--u) * 28); }
.pz-result .pz-title { font-size: calc(var(--u) * 96); }
.pz-result .pz-go { height: calc(var(--u) * 104); font-size: calc(var(--u) * 50); }
.pz-result .pz-actions { row-gap: calc(var(--u) * 16); }
.pz-result .pz-more-row { gap: calc(var(--u) * 18); }
.pz-result .pz-head { background: radial-gradient(46% 42% at 50% 58%, rgba(255,214,110,.26), transparent 72%); }
.pz-result.is-won .pz-title { color: #fff6d2; }
.pz-result.is-lost .pz-head { background: radial-gradient(46% 42% at 50% 58%, rgba(232,96,64,.24), transparent 72%); }
.pz-result.is-lost .pz-title { color: #ffe1d0; }
.pz-result.is-lost .pz-panel {
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(150,52,34,.32) 0%, transparent 72%),
    radial-gradient(90% 55% at 50% 12%, #2b4a2e 0%, transparent 70%),
    linear-gradient(180deg, #1d3b25 0%, #16321e 45%, #0f2418 100%);
}
.pz-result .pz-title { animation: pz-res-title .6s cubic-bezier(.2, .9, .3, 1.3) .08s both; }
.pz-result.is-update .pz-title { animation: none; }
@keyframes pz-res-title { from { transform: scale(.55); opacity: 0; } }

.pz-res-msg { flex: none; margin-top: calc(var(--u) * 16); }
.pz-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 8); margin: 0 0 calc(var(--u) * 10); }
.pz-tags span {
  padding: calc(var(--u) * 4) calc(var(--u) * 14); border-radius: 999px;
  font-size: max(11px, calc(var(--u) * 18)); font-weight: 700; letter-spacing: calc(var(--u) * 1); text-transform: uppercase; color: #ead7a6;
  background: rgba(6,18,10,.55); box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(201,150,65,.6);
}
.pz-tags span.best { color: #3a2608; background: linear-gradient(180deg, #ffe48f, #f2c14e 50%, #d99a2e); box-shadow: 0 0 0 calc(var(--u) * 2) var(--bark); }
.pz-res-msg h3 {
  margin: 0; font-size: max(17px, calc(var(--u) * 38)); line-height: 1.12; font-weight: 700; color: #f8dd98; text-wrap: balance;
  text-shadow: 0 calc(var(--u) * 2.5) 0 #0c1a0e, 0 calc(var(--u) * -1) 0 #0c1a0e, calc(var(--u) * 1.5) 0 0 #0c1a0e, calc(var(--u) * -1.5) 0 0 #0c1a0e;
}
.pz-result.is-lost .pz-res-msg h3 { color: #ffb49a; }
.pz-res-msg p { margin: calc(var(--u) * 6) auto 0; max-width: calc(var(--u) * 640); font-size: max(12.5px, calc(var(--u) * 22)); line-height: 1.35; color: var(--leaf-text); text-wrap: balance; }
.pz-result .pz-stats { margin-top: calc(var(--u) * 20); }
.pz-ico.kills svg, .pz-ico.towers svg { filter: drop-shadow(0 calc(var(--u) * 3) 0 rgba(0,0,0,.45)); }

/* Rewards: a sunken well of moss chips; acorns are gold coins. */
.pz-res-side { flex: none; }
.pz-loot {
  margin-top: calc(var(--u) * 20); padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border: calc(var(--u) * 2.5) solid rgba(201,150,65,.6); border-radius: calc(var(--u) * 22);
  background: linear-gradient(180deg, rgba(6,18,10,.36), rgba(6,18,10,.58));
  box-shadow: 0 0 0 calc(var(--u) * 2.5) var(--bark), inset 0 calc(var(--u) * 6) calc(var(--u) * 14) rgba(0,0,0,.3);
}
.pz-loot .reward-row { margin: 0; gap: calc(var(--u) * 10); }
.pz-loot .reward-row .rw {
  gap: calc(var(--u) * 6); padding: calc(var(--u) * 5) calc(var(--u) * 16) calc(var(--u) * 5) calc(var(--u) * 8);
  font-size: max(12px, calc(var(--u) * 22)); color: var(--cream); text-shadow: 0 1px 0 #0c1a0e;
  background: linear-gradient(180deg, #2e5834, #1a3a21);
  box-shadow: 0 0 0 calc(var(--u) * 2) rgba(201,150,65,.75), 0 0 0 calc(var(--u) * 4) var(--bark);
}
.pz-loot .reward-row .rw svg { width: max(16px, calc(var(--u) * 30)); height: max(16px, calc(var(--u) * 30)); }
.pz-loot .reward-row .rw.xp svg, .pz-loot .reward-row .rw.gift svg { color: var(--gold); }
.pz-loot .reward-row .rw.ac { color: #3a2608; text-shadow: none; background: linear-gradient(180deg, #ffe48f, #f2c14e 50%, #d99a2e); box-shadow: 0 0 0 calc(var(--u) * 2) #ffe7a0, 0 0 0 calc(var(--u) * 4) var(--bark); }
.pz-loot .reward-row .rw.medal.new { color: #fffaf0; text-shadow: 0 1px 0 #1d4a14; background: linear-gradient(180deg, #8fe06a, #45a236 60%, #2f8029); box-shadow: 0 0 0 calc(var(--u) * 2) #f4c95a, 0 0 0 calc(var(--u) * 4) var(--bark); }
.pz-loot .reward-row .rw.lv { background: linear-gradient(180deg, #a98be0, #6a4ac0); box-shadow: 0 0 0 calc(var(--u) * 2) #d8c4ff, 0 0 0 calc(var(--u) * 4) var(--bark); }
.pz-loot .reward-row .rw.note { color: var(--leaf-text); font-weight: 600; }
.pz-loot .res-level { max-width: calc(var(--u) * 560); margin: calc(var(--u) * 14) auto 0; gap: calc(var(--u) * 12); }
.pz-loot .res-level b { font-size: max(13px, calc(var(--u) * 22)); color: #f8dd98; text-shadow: 0 2px 0 #0c1a0e; }
.pz-loot .res-level .m-lvbar { height: max(16px, calc(var(--u) * 26)); background: rgba(6,18,10,.6); box-shadow: 0 0 0 2px #b8873a, 0 0 0 4px var(--bark), inset 0 2px 4px rgba(0,0,0,.5); }
.pz-loot .res-level .m-lvbar i { background: linear-gradient(180deg, #ffe48f, #f2c14e 50%, #d99a2e); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); }
.pz-loot .res-level .m-lvbar em { line-height: max(16px, calc(var(--u) * 26)); font-size: max(11px, calc(var(--u) * 17)); color: var(--cream); text-shadow: 0 1px 0 #2a1708, 0 -1px 0 #2a1708, 1px 0 0 #2a1708, -1px 0 0 #2a1708; }
.pz-loot .xp-row { margin: calc(var(--u) * 14) 0 0; gap: calc(var(--u) * 8); }
.pz-loot .xp-row > small { font-size: max(10.5px, calc(var(--u) * 17)); font-weight: 700; color: #ead7a6; }
.pz-loot .xp-row span {
  padding: calc(var(--u) * 2) calc(var(--u) * 12) calc(var(--u) * 2) calc(var(--u) * 2); font-size: max(12px, calc(var(--u) * 21)); color: var(--cream);
  background: rgba(6,18,10,.55); box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(201,150,65,.5); text-shadow: 0 1px 0 #0c1a0e;
}
.pz-loot .xp-row span svg { width: max(22px, calc(var(--u) * 38)); height: max(22px, calc(var(--u) * 38)); }
.pz-loot .xp-row em { color: #ead7a6; background: rgba(255,226,140,.12); }
.pz-loot .xp-row em.lvup { color: #fffaf0; background: linear-gradient(180deg, #8fe06a, #2f8029); box-shadow: 0 0 0 1.5px var(--bark); }

/* Next steps: the green button, the gold "upgrades ready" button when there
   are some, then a row of tiles (icon over label) with Main menu last. */
.pz-result .pz-actions { margin-top: calc(var(--u) * 24); }
.pz-more-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: calc(var(--u) * 16); }
.pz-result .pz-more-row .pz-btn {
  flex-direction: column; gap: calc(var(--u) * 8); height: auto; min-height: calc(var(--u) * 112); padding: calc(var(--u) * 12) calc(var(--u) * 6);
  font-size: max(11px, calc(var(--u) * 23)); line-height: 1.08;
}
.pz-result .pz-more-row .pz-btn svg { width: calc(var(--u) * 42); height: calc(var(--u) * 42); }
/* Leaving the match: a carved wood tile rather than moss. */
.pz-result .pz-more-row .pz-btn[data-action="menu"] { border-color: #d9a64a; background: radial-gradient(120% 90% at 50% 0, #9a6535, #6b3f1d 70%, #5a3216); }
.pz-result .pz-more-row .pz-btn[data-action="menu"] svg { color: #ffe394; }
.pz-go-long { font-size: calc(var(--u) * 40); gap: calc(var(--u) * 18); }
.pz-go-long svg { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
.pz-cost {
  flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 4) calc(var(--u) * 16) calc(var(--u) * 4) calc(var(--u) * 8);
  border-radius: 999px; font-style: normal; font-size: calc(var(--u) * 34); color: #3a2608; text-shadow: none;
  background: linear-gradient(180deg, #ffe48f, #f2c14e 50%, #d99a2e); box-shadow: 0 0 0 calc(var(--u) * 2.5) #1d4a14;
}
.pz-go .pz-cost svg { width: calc(var(--u) * 38); height: calc(var(--u) * 38); filter: none; }
/* "Upgrades ready to unlock": a gold coin button. */
.pz-btn.pz-gold {
  height: calc(var(--u) * 70); font-size: calc(var(--u) * 25); border-color: #ffe7a0; color: #3a2608; text-shadow: 0 1px 0 rgba(255,240,200,.6);
  background: radial-gradient(70% 60% at 50% 0, rgba(255,255,230,.45), transparent 70%), linear-gradient(180deg, #ffe48f 0%, #f2c14e 50%, #d99a2e 100%);
  box-shadow: 0 0 0 calc(var(--u) * 3) var(--bark), 0 calc(var(--u) * 7) 0 calc(var(--u) * 3) #160c04, inset 0 calc(var(--u) * 2.5) 0 rgba(255,255,255,.5), inset 0 calc(var(--u) * -4) 0 rgba(140,80,10,.25);
}
.pz-btn.pz-gold svg { width: calc(var(--u) * 32); height: calc(var(--u) * 32); color: #8a5a10; filter: none; }
.pz-btn.pz-gold::before, .pz-btn.pz-gold::after { display: none; }

/* Landscape screens (desktop, tablets, phones): title, story and numbers on the
   left; rewards and the next steps on the right. */
@container pz (min-aspect-ratio: 4/3) {
  .pz-result {
    --k: clamp(.36px, min(100cqh / 640, 100cqw / 1250), 1.05px);
    width: min(100%, calc(var(--u) * 1214));
  }
  .pz-result .pz-panel {
    display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 600fr); grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "head side" "msg side" "stats side" ". side"; column-gap: calc(var(--u) * 40); align-content: center;
    padding: calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 32);
  }
  .pz-result .pz-head { grid-area: head; padding-top: calc(var(--u) * 40); }
  .pz-result .pz-title { font-size: calc(var(--u) * 92); }
  .pz-result .pz-res-msg { grid-area: msg; margin-top: calc(var(--u) * 10); }
  .pz-result .pz-res-msg p { font-size: max(11.5px, calc(var(--u) * 21)); }
  .pz-result .pz-stats { grid-area: stats; margin-top: calc(var(--u) * 18); padding-left: 0; padding-right: 0; }
  .pz-result .pz-stats > div { column-gap: calc(var(--u) * 10); }
  .pz-result .pz-stats .pz-ico { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
  .pz-result .pz-stats dd { font-size: calc(var(--u) * 36); }
  .pz-result .pz-stats .lbl { font-size: calc(var(--u) * 17); }
  .pz-result .pz-res-side { grid-area: side; align-self: center; }
  .pz-result .pz-loot { margin-top: 0; padding: calc(var(--u) * 12); }
  .pz-result .pz-loot + .pz-actions { margin-top: calc(var(--u) * 20); }
  .pz-result .pz-actions { margin-top: 0; gap: calc(var(--u) * 16) calc(var(--u) * 18); }
  .pz-result .pz-go { height: calc(var(--u) * 100); font-size: calc(var(--u) * 50); }
  .pz-result .pz-go-long { font-size: calc(var(--u) * 36); }
  .pz-result .pz-more-row .pz-btn { min-height: calc(var(--u) * 104); }
  .pz-result .pz-crest { --cx: calc(var(--u) * (22 + 40 + 260)); }
}
/* Short phones in landscape: no brand line, a two-line summary, slimmer buttons. */
@container pz (min-aspect-ratio: 4/3) and (max-height: 460px) {
  .pz-result .pz-brand { display: none; }
  .pz-result .pz-head { padding-top: calc(var(--u) * 50); }
  .pz-result .pz-res-msg p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pz-result .pz-panel { padding-bottom: calc(var(--u) * 24); }
  .pz-result .pz-go { height: calc(var(--u) * 84); }
  .pz-result .pz-gold { height: calc(var(--u) * 58); }
  .pz-result .pz-actions { row-gap: calc(var(--u) * 14); }
  .pz-result .pz-loot { padding: calc(var(--u) * 10); }
  .pz-result .pz-loot + .pz-actions { margin-top: calc(var(--u) * 16); }
  .pz-result .pz-more-row .pz-btn { min-height: calc(var(--u) * 88); padding-top: calc(var(--u) * 7); padding-bottom: calc(var(--u) * 7); gap: calc(var(--u) * 4); }
  .pz-result .pz-loot .res-level { margin-top: calc(var(--u) * 10); }
  .pz-result .pz-loot .xp-row { margin-top: calc(var(--u) * 10); }
}
/* Narrow windows: slimmer frame; the stats stack. */
@container pz (max-width: 620px) and (max-aspect-ratio: 4/3) {
  .pz-result { --k: clamp(.36px, min(100cqh / 1340, 100cqw / 660), 1px); width: min(100%, calc(var(--u) * 640)); }
  .pz-result .pz-panel { padding-left: calc(var(--u) * 28); padding-right: calc(var(--u) * 28); }
  .pz-result .pz-stats > div { grid-template-columns: auto; justify-items: center; text-align: center; row-gap: calc(var(--u) * 4); }
  .pz-result .pz-stats .pz-ico { grid-row: auto; width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
  .pz-result .pz-go-long { font-size: calc(var(--u) * 34); }
}

/* ---- Settings ----------------------------------------------------------- */
.pz-settings {
  --k: clamp(.5px, min(100vh / 860, 100vw / 1040), 1px);
  width: min(100%, calc(var(--u) * 980));
}
@supports (width: 1cqw) {
  .pz-settings { --k: clamp(.5px, min(100cqh / 860, 100cqw / 1040), 1px); }
}
.pz-settings .pz-panel { overflow: hidden; padding: calc(var(--u) * 70) calc(var(--u) * 14) calc(var(--u) * 26); }
.pz-settings .pz-title { font-size: calc(var(--u) * 84); }
.pz-settings .pz-title::before, .pz-settings .pz-title::after { width: calc(var(--u) * 54); height: calc(var(--u) * 40); margin-top: calc(var(--u) * -16); }
.pz-settings .pz-sub { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 26); }
.pz-scroll {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #b8873a transparent;
  margin-top: calc(var(--u) * 20); padding: calc(var(--u) * 6) calc(var(--u) * 30) calc(var(--u) * 10);
  text-align: left;
  /* Fade the edges while there is more to scroll. */
  -webkit-mask-image: linear-gradient(transparent, #000 calc(var(--u) * 12), #000 calc(100% - var(--u) * 16), transparent);
  mask-image: linear-gradient(transparent, #000 calc(var(--u) * 12), #000 calc(100% - var(--u) * 16), transparent);
}
.pz-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 16) calc(var(--u) * 18); }
.pz-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico txt ctl"; align-items: center;
  column-gap: calc(var(--u) * 16); min-height: max(48px, calc(var(--u) * 96)); padding: calc(var(--u) * 14) calc(var(--u) * 18);
  border: calc(var(--u) * 2.5) solid rgba(201,150,65,.8); border-radius: calc(var(--u) * 22); cursor: pointer;
  background: linear-gradient(180deg, rgba(48,92,54,.75), rgba(22,48,28,.85));
  box-shadow: 0 0 0 calc(var(--u) * 2.5) var(--bark), 0 calc(var(--u) * 5) 0 calc(var(--u) * 2.5) rgba(16,8,2,.8), inset 0 calc(var(--u) * 2) 0 rgba(255,236,170,.14);
}
.pz-row.is-range { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico txt" "ico ctl"; row-gap: calc(var(--u) * 8); }
.pz-row > .pz-ico {
  grid-area: ico; display: grid; place-items: center; width: calc(var(--u) * 58); height: calc(var(--u) * 58); border-radius: 50%;
  color: var(--gold); background: radial-gradient(circle at 50% 35%, #2c5530, #10261a); box-shadow: 0 0 0 calc(var(--u) * 2.5) #b8873a, 0 0 0 calc(var(--u) * 4.5) var(--bark);
}
.pz-row > .pz-ico svg { width: 58%; height: 58%; filter: drop-shadow(0 calc(var(--u) * 2) 0 rgba(0,0,0,.45)); }
.pz-row > .txt { grid-area: txt; min-width: 0; }
.pz-row b { display: block; font-size: max(14px, calc(var(--u) * 27)); line-height: 1.15; color: var(--cream); text-shadow: 0 calc(var(--u) * 2) 0 #0c1a0e; }
.pz-row small { display: block; margin-top: calc(var(--u) * 3); font-size: max(11.5px, calc(var(--u) * 19)); line-height: 1.25; color: var(--leaf-text); }
.pz-row > .ctl { grid-area: ctl; display: flex; align-items: center; gap: calc(var(--u) * 14); min-width: 0; }

/* Switch: a carved slot; the knob slides onto green. */
.pz-switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0; cursor: pointer;
  width: max(48px, calc(var(--u) * 84)); height: max(28px, calc(var(--u) * 46)); border-radius: 999px;
  background: linear-gradient(180deg, #0b1a10, #1b3420); border: calc(var(--u) * 2.5) solid #b8873a;
  box-shadow: 0 0 0 calc(var(--u) * 2) var(--bark), inset 0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(0,0,0,.55);
  transition: background .18s;
}
.pz-switch::after {
  content: ''; position: absolute; top: 50%; left: 6%; width: 44%; aspect-ratio: 1; border-radius: 50%;
  transform: translateY(-50%); transition: left .2s var(--spring, ease);
  background: radial-gradient(circle at 40% 30%, #fffaf0, #f0dca8 60%, #c9a463);
  box-shadow: 0 0 0 calc(var(--u) * 1.5) #6b4416, 0 calc(var(--u) * 3) calc(var(--u) * 3) rgba(0,0,0,.4);
}
.pz-switch:checked { background: linear-gradient(180deg, #8fe06a, #45a236 60%, #2f8029); }
.pz-switch:checked::after { left: 50%; }
.pz-switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Range: gold fill up to the value (--v, kept current by the HUD), acorn-cream knob. */
.pz-slider {
  --v: 50; --track: max(8px, calc(var(--u) * 14)); --thumb: max(24px, calc(var(--u) * 38));
  appearance: none; -webkit-appearance: none; flex: 1 1 auto; min-width: 0; height: max(32px, calc(var(--u) * 46)); margin: 0; background: none; cursor: pointer;
}
.pz-slider::-webkit-slider-runnable-track {
  height: var(--track); border-radius: 999px; border: 0;
  background: linear-gradient(90deg, #f6d27a, #e3a53e) 0 0 / calc(var(--v) * 1%) 100% no-repeat, #0b1a10;
  box-shadow: 0 0 0 calc(var(--u) * 2) #b8873a, 0 0 0 calc(var(--u) * 4) var(--bark), inset 0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0,0,0,.5);
}
.pz-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: var(--thumb); height: var(--thumb); margin-top: calc((var(--track) - var(--thumb)) / 2); border: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fffaf0, #f0dca8 60%, #c9a463);
  box-shadow: 0 0 0 calc(var(--u) * 2.5) #6b4416, 0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(0,0,0,.5);
}
.pz-slider::-moz-range-track { height: var(--track); border-radius: 999px; background: #0b1a10; box-shadow: 0 0 0 calc(var(--u) * 2) #b8873a, 0 0 0 calc(var(--u) * 4) var(--bark); }
.pz-slider::-moz-range-progress { height: var(--track); border-radius: 999px; background: linear-gradient(90deg, #f6d27a, #e3a53e); }
.pz-slider::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border: 0; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fffaf0, #f0dca8 60%, #c9a463); box-shadow: 0 0 0 calc(var(--u) * 2.5) #6b4416, 0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(0,0,0,.5); }
.pz-slider:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 999px; }
.pz-val { flex: none; min-width: 3.2em; text-align: right; font-size: max(13px, calc(var(--u) * 24)); font-weight: 700; color: #f8dd98; font-variant-numeric: tabular-nums; }

.pz-sec {
  display: flex; align-items: center; gap: calc(var(--u) * 14); margin: calc(var(--u) * 26) 0 calc(var(--u) * 14);
  font-size: max(12px, calc(var(--u) * 20)); font-weight: 700; letter-spacing: calc(var(--u) * 2); text-transform: uppercase; color: #ead7a6;
}
.pz-sec::before, .pz-sec::after { content: ''; flex: 1; height: calc(var(--u) * 2.5); background: linear-gradient(90deg, transparent, var(--gold-line)); }
.pz-sec::after { background: linear-gradient(90deg, var(--gold-line), transparent); }
.pz-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--u) * 270)), 1fr)); gap: calc(var(--u) * 16) calc(var(--u) * 18); }
.pz-more .pz-btn, .pz-reset .pz-btn { height: max(44px, calc(var(--u) * 72)); font-size: max(14px, calc(var(--u) * 25)); gap: calc(var(--u) * 12); }
.pz-more .pz-btn svg, .pz-reset .pz-btn svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.pz-reset { margin-top: calc(var(--u) * 20); display: flex; }
.pz-reset .pz-btn { padding: 0 calc(var(--u) * 28); }
.pz-credit { margin: calc(var(--u) * 22) 0 0; font-size: max(11px, calc(var(--u) * 17)); line-height: 1.4; color: #aebb92; text-align: center; }
.pz-credit a { color: #e6d4a4; text-underline-offset: 2px; }
.pz-settings .settings-wallet { margin: 0 0 calc(var(--u) * 20); border-color: var(--gold-line); box-shadow: 0 0 0 calc(var(--u) * 2.5) var(--bark); }
.pz-settings .pz-done { flex: none; margin: calc(var(--u) * 18) calc(var(--u) * 30) 0; height: max(46px, calc(var(--u) * 96)); font-size: max(20px, calc(var(--u) * 44)); }
.pz-settings .pz-done svg { width: max(24px, calc(var(--u) * 46)); height: max(24px, calc(var(--u) * 46)); }
.pz-close {
  position: absolute; z-index: 3; top: calc(var(--u) * 16); right: calc(var(--u) * 16);
  width: max(40px, calc(var(--u) * 64)); height: max(40px, calc(var(--u) * 64)); display: grid; place-items: center; padding: 0; cursor: pointer;
  border: calc(var(--u) * 3) solid #d9a64a; border-radius: 50%; color: var(--cream);
  background: radial-gradient(circle at 50% 30%, #8a5a2e, #5a3216);
  box-shadow: 0 0 0 calc(var(--u) * 2.5) var(--bark), 0 calc(var(--u) * 4) 0 calc(var(--u) * 2.5) #160c04;
  transition: transform .18s var(--spring, ease);
}
.pz-close svg { width: 46%; height: 46%; filter: drop-shadow(0 calc(var(--u) * 2) 0 rgba(0,0,0,.5)); }
.pz-close:active { transform: scale(.9); transition-duration: .05s; }

/* Settings on short screens: a compact heading leaves the room to the rows. */
@container pz (max-height: 660px) and (min-aspect-ratio: 4/3) {
  .pz-settings { --k: clamp(.5px, min(100cqh / 600, 100cqw / 1120), .9px); width: min(100%, calc(var(--u) * 1080)); }
  .pz-settings .pz-panel { padding-top: calc(var(--u) * 58); padding-bottom: calc(var(--u) * 18); }
  .pz-settings .pz-brand, .pz-settings .pz-sub { display: none; }
  .pz-settings .pz-title { font-size: calc(var(--u) * 64); }
  .pz-settings .pz-crest { width: calc(var(--u) * 190); height: calc(var(--u) * 120); top: calc(var(--u) * -50); }
  .pz-settings .pz-scroll { margin-top: calc(var(--u) * 10); }
  .pz-settings .pz-done { height: max(44px, calc(var(--u) * 76)); font-size: max(19px, calc(var(--u) * 36)); margin-top: calc(var(--u) * 10); }
}
@container pz (max-width: 700px) and (max-aspect-ratio: 4/3) {
  .pz-settings { --k: clamp(.5px, min(100cqh / 860, 100cqw / 640), 1px); }
}
@container pz (max-width: 560px) {
  .pz-set-grid { grid-template-columns: minmax(0, 1fr); }
  .pz-settings .pz-scroll { padding-left: calc(var(--u) * 16); padding-right: calc(var(--u) * 16); }
}

/* ---- Quests & Events: their own sheet inside the frame --------------------
   The sheet keeps its markup and layout; inside the frame it scrolls on the
   moss panel, its parchment tokens turn to moss and cream, its cards get a
   gold rim and its buttons become the frame's buttons. */
.pz-sheet {
  --k: clamp(.45px, min(100vh / 1000, 100vw / 1150), .8px);
  width: min(100%, calc(var(--sw, 760px) + var(--u) * 50));
  margin-top: calc(var(--u) * 42); max-height: calc(100% - var(--u) * 42);
}
@supports (width: 1cqw) {
  .pz-sheet { --k: clamp(.45px, min(100cqh / 1000, 100cqw / 1150), .8px); }
}
.pz-sheet .pz-panel { overflow: hidden; padding: calc(var(--u) * 48) 0 0; }
.pz-sheet .pz-crest { width: calc(var(--u) * 196); height: calc(var(--u) * 123); top: calc(var(--u) * -50); }
.pz-sheet .pz-flower.l { left: calc(var(--u) * 90); }
.pz-sheet .pz-flower.r { right: calc(var(--u) * 90); }
.pz-sheet .sheet {
  --sheet: #0f2416; --sheet-2: #224629; --sheet-3: #2f5a35; --sheet-edge: #b8873a; --sheet-drop: #0a170e;
  --sheet-text: var(--cream); --sheet-soft: var(--leaf-text);
  --accent: #f8cf6a; --accent-good: #a6e07c; --good-text: #b6e98f; --bad-text: #ffb49a; --gold-text: #f9d891; --seed: #efc16a;
  --tag: rgba(6,18,10,.55); --tag-text: #f0e3bf; --tag-good: rgba(120,190,80,.25); --tag-good-text: #d6f0b4;
  --track: rgba(0,0,0,.45); --well: rgba(0,0,0,.2); --well-line: rgba(201,150,65,.25); --focus: #ffe394; --moss: #8fc45a;
  --card-a: #2f5a35; --card-b: #1b3a22; --card-line: rgba(201,150,65,.7); --card-drop: #0a170e; --card-text: var(--cream); --card-soft: var(--leaf-text);
  --card-off-a: #26402a; --card-off-b: #172a1b; --card-off-drop: #08130b; --card-off-text: #a9b394;
  --go: #45a236; --go-a: #62c447; --go-b: #2f8029; --go-deep: #160c04; --heart: #ec4b3f;
  --ghost-line: rgba(201,150,65,.45); --best-bg: rgba(242,193,78,.1); --best-line: rgba(242,193,78,.42);
  --forest: var(--cream); --pip-off: rgba(255,240,200,.16);
  position: relative; flex: 1 1 auto; width: 100%; max-height: none; min-height: 0; margin: 0;
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b8873a transparent;
  padding: 4px clamp(14px, 2.6vw, 28px) 20px; border: 0; border-radius: 0; box-shadow: none; animation: none;
  background: none; color: var(--sheet-text);
}
.pz-sheet .sheet .eyebrow { margin: 0 0 2px; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #f8dd98; }
.pz-sheet .sheet .title {
  color: var(--cream); font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -.3px;
  text-shadow: 0 3px 0 #2a1708, 0 -2px 0 #2a1708, 2px 0 0 #2a1708, -2px 0 0 #2a1708, 2px 2px 0 #2a1708, -2px 2px 0 #2a1708, 0 6px 10px rgba(0,0,0,.4);
}
.pz-sheet .sheet .lede { color: var(--sheet-soft); }
.pz-sheet .sheet .lede b { color: #f8dd98; }
.pz-sheet .sheet-close {
  top: 4px; right: 10px; width: 46px; height: 46px; color: var(--cream);
  border: 3px solid #d9a64a; background: radial-gradient(circle at 50% 30%, #8a5a2e, #5a3216);
  box-shadow: 0 0 0 2px var(--bark), 0 4px 0 2px #160c04;
}
.pz-sheet .sheet-close svg { width: 46%; height: 46%; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
/* The Trail journal's close is a bare ×. */
.pz-sheet .quest-sheet .sheet-close { font-size: 26px; font-weight: 700; line-height: 1; }
/* Section headings: gold small caps between gold rules. */
.pz-sheet .qa-group > h3, .pz-sheet .m-sub { color: #ead7a6; }
.pz-sheet .m-ev-head { color: var(--cream); text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .m-ev-head::after { content: ''; flex: 1 1 40px; height: 2px; background: linear-gradient(90deg, var(--gold-line), transparent); }
.pz-sheet .m-ev-head svg { color: var(--gold); }

/* Cards: moss with a gold rim and a bark edge (the colour strip on events stays). */
.pz-sheet :is(.m-event, .quest, .quest-reserve, .m-community li, .m-board li:not(.gap), .m-podium, .m-ed-row, .m-empty, .settings-wallet, .m-online) {
  border: 2px solid rgba(201,150,65,.72); outline: 2px solid rgba(26,14,4,.85); outline-offset: 0;
}
.pz-sheet :is(.quest, .quest-reserve, .m-community li, .m-podium, .m-ed-row, .m-empty) {
  background: linear-gradient(180deg, rgba(52,98,58,.7), rgba(22,48,28,.85));
}
.pz-sheet .quest-sheet .quest-ready { border-color: #f4c95a; background: linear-gradient(120deg, rgba(76,140,62,.75), rgba(30,66,36,.9)); box-shadow: 0 0 18px rgba(143,224,106,.18); }
.pz-sheet .quest-reserve { padding: 14px 16px; }
.pz-sheet .quest-reserve-total { color: var(--cream); }
.pz-sheet .quest-reserve-total svg { color: #f0b93d; }
.pz-sheet .quest-ico, .pz-sheet .m-thumb { box-shadow: 0 0 0 2px #b8873a, 0 0 0 4px var(--bark); }
.pz-sheet .quest-bar { box-shadow: inset 0 2px 3px rgba(0,0,0,.45), 0 0 0 1px rgba(201,150,65,.45); }
.pz-sheet .quest-bar i { background: linear-gradient(#f6d27a, #d99a2e); }
.pz-sheet .quest-bar em { text-shadow: 0 1px 1px rgba(0,0,0,.85); }
.pz-sheet .quest-prize svg { color: #f0b93d; }
.pz-sheet .quest-feedback { color: var(--cream); background: rgba(6,18,10,.85); }
.pz-sheet .m-online-pill { box-shadow: 0 0 0 2px rgba(201,150,65,.6); }
.pz-sheet .m-code input { border-color: #b8873a; }
.pz-sheet .m-podium li.p2 { background: color-mix(in srgb, #c9d3dc 22%, transparent); }
.pz-sheet .m-tier.done svg { color: #2f6a24; }

/* Buttons: the frame's moss buttons; primary is the green Resume button. */
.pz-sheet .sbtn {
  border: 2px solid #b8873a; color: var(--cream); text-shadow: 0 2px 0 #0c1a0e, 0 -1px 0 #0c1a0e, 1px 0 0 #0c1a0e, -1px 0 0 #0c1a0e;
  background: linear-gradient(180deg, #33603a 0%, #23472b 45%, #1a3820 100%);
  box-shadow: 0 0 0 2px var(--bark), 0 4px 0 2px #160c04, inset 0 2px 0 rgba(255,236,170,.2), inset 0 -3px 0 rgba(0,0,0,.2);
}
.pz-sheet .sbtn svg { color: var(--gold); filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); }
.pz-sheet .sbtn:active { box-shadow: 0 0 0 2px var(--bark), 0 1px 0 2px #160c04, inset 0 2px 0 rgba(255,236,170,.2); }
.pz-sheet .sbtn.primary {
  border-color: #f4c95a; color: #fffaf0;
  text-shadow: 0 2px 0 #1d4a14, 0 -1px 0 #1d4a14, 1px 0 0 #1d4a14, -1px 0 0 #1d4a14;
  background: radial-gradient(70% 60% at 50% 0, rgba(255,255,210,.3), transparent 70%), linear-gradient(180deg, #8fe06a 0%, #62c447 36%, #45a236 70%, #2f8029 100%);
  box-shadow: 0 0 0 2px var(--bark), 0 4px 0 2px #160c04, inset 0 2px 0 rgba(255,255,220,.5), inset 0 -4px 0 rgba(20,70,12,.35);
}
.pz-sheet .sbtn.primary svg { color: #fff6dc; filter: drop-shadow(0 2px 0 #1d4a14); }
.pz-sheet .sbtn.primary:active { box-shadow: 0 0 0 2px var(--bark), 0 1px 0 2px #160c04, inset 0 2px 0 rgba(255,255,220,.5); }
.pz-sheet .sbtn.danger { border-color: #e4a35a; color: #fff4e8; background: linear-gradient(180deg, #c8643c 0%, #a54a2a 55%, #84371d 100%); }
.pz-sheet .sbtn:disabled, .pz-sheet .quest-sheet .sbtn:disabled {
  opacity: .7; filter: saturate(.3) brightness(.85); transform: none;
  box-shadow: 0 0 0 2px var(--bark), inset 0 2px 0 rgba(255,236,170,.1);
}
.pz-sheet .sbtn.big { height: 58px; font-size: 22px; }
.pz-sheet .m-tab { border: 2px solid rgba(201,150,65,.6); box-shadow: 0 0 0 2px var(--bark), 0 3px 0 2px #160c04; color: var(--leaf-text); }
.pz-sheet .m-tab.on { border-color: #f4c95a; background: linear-gradient(180deg, #8fe06a, #45a236 70%, #2f8029); color: #fffaf0; text-shadow: 0 1px 0 #1d4a14; }
/* Short screens: a slimmer frame leaves the room to the page. */
@container pz (max-height: 560px) {
  .pz-sheet { --k: clamp(.4px, min(100cqh / 820, 100cqw / 1150), .6px); }
  .pz-sheet .sheet { padding-top: 0; }
  .pz-sheet .sheet .title { font-size: clamp(22px, 3vw, 30px); }
  .pz-sheet .sheet-close { width: 40px; height: 40px; }
  .pz-sheet .sbtn.big { height: 48px; font-size: 19px; }
}

/* ---- Market, Profile, Daily gift, Heroes and Co-op inside the frame -------
   Same materials as the pause menu: moss cards with a gold rim and a bark
   edge, sunken wells for numbers and inputs, gold coin buttons for prices and
   the green Resume button for the main action. */
.pz-sheet .m-sub::after { content: ''; flex: 1 1 24px; height: 2px; background: linear-gradient(90deg, var(--gold-line), transparent); }
.pz-sheet .m-sub small { color: var(--leaf-text); }
.pz-sheet .m-cur { box-shadow: 0 0 0 2px var(--bark), 0 3px 0 2px #160c04, inset 0 1px 0 rgba(255,255,255,.55); }
.pz-sheet .m-wallet { gap: 10px; padding: 2px; }
.pz-sheet .m-buy .m-cur { box-shadow: none; }

/* Tabs sit in a sunken, gold-ringed track. */
.pz-sheet .m-tabs {
  gap: 8px; margin: 6px 0 12px; padding: 7px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(6,18,10,.5), rgba(6,18,10,.68));
  box-shadow: inset 0 0 0 2px rgba(201,150,65,.45), inset 0 4px 10px rgba(0,0,0,.35);
}
.pz-sheet .m-tab { background: linear-gradient(180deg, #2c5532, #1c3c22); }

/* Moss cards (market items, bag items, medal rows, co-op panels...). */
.pz-sheet :is(.m-card, .m-medal-trail, .m-bag-item, .hs-levels, .hs-skins, .coop-panel, .coop-set, .coop-seat:not(.is-empty), .coop-feature) {
  border: 2px solid rgba(201,150,65,.72);
  background: radial-gradient(120% 70% at 50% 0, rgba(166,215,122,.16), transparent 60%), linear-gradient(180deg, #2e5834 0%, #1d3e24 60%, #15301b 100%);
  box-shadow: 0 0 0 2px var(--bark), 0 5px 0 2px #160c04, inset 0 2px 0 rgba(255,236,170,.14);
}
.pz-sheet :is(.m-card b, .m-medal-trail b, .m-bag-item b, .hs-name, .coop-sheet h3, .coop-set-head b, .coop-seat-info b, .coop-row-info b, .hs-levels summary, .hs-skin-head b) {
  color: var(--cream); text-shadow: 0 2px 0 #0c1a0e;
}
/* Sunken wells: stats, gift box, inputs. */
.pz-sheet :is(.m-stats div, .coop-stats div) {
  border: 2px solid rgba(201,150,65,.6);
  background: linear-gradient(180deg, rgba(6,18,10,.42), rgba(6,18,10,.64));
  box-shadow: 0 0 0 2px var(--bark), inset 0 2px 0 rgba(255,230,160,.08), inset 0 6px 12px rgba(0,0,0,.3);
}
.pz-sheet :is(.m-stats dt, .coop-stats dt) { color: #ead7a6; }
.pz-sheet :is(.m-stats dd, .coop-stats dd) { color: var(--cream); text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet :is(.m-server input, .coop-sheet input:not([type="checkbox"]), .coop-money-compose input) {
  border: 2px solid rgba(201,150,65,.65); color: var(--cream); background: rgba(6,18,10,.62);
  box-shadow: 0 0 0 2px var(--bark), inset 0 3px 6px rgba(0,0,0,.4);
}
.pz-sheet :is(.m-server input, .coop-sheet input:not([type="checkbox"]), .coop-money-compose input):focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 2px var(--bark), 0 0 0 5px rgba(255,227,148,.25), inset 0 3px 6px rgba(0,0,0,.4); }
.pz-sheet .coop-sheet input:not([type="checkbox"])::placeholder { color: var(--leaf-text); opacity: .55; }
.pz-sheet .m-server span { color: #ead7a6; }

/* Gold coin buttons: prices, Buy, Unlock. */
.pz-sheet :is(.m-buy, .hs-buy, .hs-skin-buy, .hs-pick:disabled) {
  border: 2px solid #ffe7a0; color: #3a2608; text-shadow: 0 1px 0 rgba(255,240,200,.6);
  background: radial-gradient(70% 60% at 50% 0, rgba(255,255,230,.45), transparent 70%), linear-gradient(180deg, #ffe48f 0%, #f2c14e 50%, #d99a2e 100%);
  box-shadow: 0 0 0 2px var(--bark), 0 4px 0 2px #160c04, inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(140,80,10,.25);
}
.pz-sheet .m-buy { height: 40px; border-radius: 12px; }
.pz-sheet :is(.m-buy, .hs-buy, .hs-skin-buy):active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 2px var(--bark), 0 1px 0 2px #160c04, inset 0 2px 0 rgba(255,255,255,.5); }
.pz-sheet :is(.m-buy, .hs-buy, .hs-skin-buy).poor { filter: saturate(.35) brightness(.85); opacity: 1; }
.pz-sheet :is(.m-buy, .hs-buy, .hs-skin-buy).armed {
  border-color: #f4c95a; color: #fffaf0; text-shadow: 0 2px 0 #1d4a14, 0 -1px 0 #1d4a14, 1px 0 0 #1d4a14, -1px 0 0 #1d4a14;
  background: radial-gradient(70% 60% at 50% 0, rgba(255,255,210,.3), transparent 70%), linear-gradient(180deg, #8fe06a 0%, #62c447 36%, #45a236 70%, #2f8029 100%);
  box-shadow: 0 0 0 2px var(--bark), 0 4px 0 2px #160c04, inset 0 2px 0 rgba(255,255,220,.5);
}
.pz-sheet .m-buy.own {
  border-color: #b8873a; color: var(--cream); text-shadow: 0 2px 0 #0c1a0e;
  background: linear-gradient(180deg, #33603a 0%, #23472b 45%, #1a3820 100%);
  box-shadow: 0 0 0 2px var(--bark), 0 4px 0 2px #160c04, inset 0 2px 0 rgba(255,236,170,.2);
}
.pz-sheet .m-buy.own svg { color: var(--gold); }
.pz-sheet .m-buy.own:disabled { opacity: 1; color: #f8dd98; }

/* ---- Market ---- */
.pz-sheet .m-grid { gap: 16px 14px; padding: 2px 2px 6px; }
.pz-sheet .m-card { padding: 8px 10px 12px; border-radius: 18px; }
.pz-sheet .m-card.own { border-color: #f4c95a; box-shadow: 0 0 0 2px var(--bark), 0 5px 0 2px #160c04, 0 0 16px rgba(242,193,78,.18), inset 0 2px 0 rgba(255,236,170,.18); }
.pz-sheet .m-card small, .pz-sheet .m-card p { color: var(--leaf-text); }
/* Each portrait stands in a lit, gold-ringed window. */
.pz-sheet .m-card-pic {
  margin-bottom: 6px; border-radius: 12px;
  background: radial-gradient(60% 70% at 50% 72%, rgba(255,226,140,.34), transparent 70%), linear-gradient(180deg, #3f7a45, #1b3a22);
  box-shadow: inset 0 0 0 2px rgba(201,150,65,.55), inset 0 -10px 18px rgba(0,0,0,.3);
}
/* The portrait is anchored to the window's bottom centre (a grid item's % height
   can't resolve here, which left the picture at its natural size, top-left). */
.pz-sheet .m-card-pic img { position: absolute; left: 50%; bottom: -12%; width: auto; height: 120%; max-width: none; margin: 0; transform: translateX(-50%); }
.pz-sheet .m-card-pic.ico { background: radial-gradient(circle at 50% 50%, rgba(255,226,140,.3), transparent 62%), linear-gradient(180deg, #2a4f30, #142c19); }
.pz-sheet .m-card-pic em { border: 2px solid #d9a64a; background: #5a3216; color: var(--cream); box-shadow: 0 0 0 1.5px var(--bark); }
.pz-sheet .m-card.look { padding-top: 12px; }
.pz-sheet .m-banner { box-shadow: 0 0 0 2px #b8873a, 0 0 0 4px var(--bark); }
.pz-sheet .m-title-tag { box-shadow: 0 0 0 2px var(--bark); }
.pz-sheet .m-grant { color: var(--leaf-text); }
.pz-sheet .m-bag { gap: 12px; }
.pz-sheet .m-bag-item { border-radius: 14px; color: var(--cream); }
.pz-sheet .m-bag-item small { color: var(--leaf-text); }
.pz-sheet .m-bag-item em { color: #f8dd98; }
.pz-sheet .m-bag-pic, .pz-sheet .m-gift-pic { box-shadow: 0 0 0 2px #b8873a; }

/* ---- Profile ---- */
.pz-sheet .m-card-banner {
  margin: 0 52px 14px 0; padding: 14px 16px; border: 3px solid #d9a64a; border-radius: 20px;
  box-shadow: 0 0 0 2.5px var(--bark), 0 6px 0 2.5px #160c04, inset 0 0 0 2px rgba(255,240,200,.12), inset 0 -30px 50px rgba(0,0,0,.28);
}
.pz-sheet .m-card-banner .m-ava { box-shadow: 0 0 0 3px #f2c14e, 0 0 0 5.5px var(--bark), 0 4px 0 5px rgba(0,0,0,.3); }
.pz-sheet .m-card-banner .m-ava.framed { box-shadow: 0 0 0 3px var(--fb), 0 0 0 6px var(--fa), 0 0 0 8px var(--bark), 0 4px 0 8px rgba(0,0,0,.3); }
.pz-sheet .m-name input { border-color: rgba(255,226,140,.45); background: rgba(6,18,10,.35); text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.pz-sheet .m-name input:focus { border-color: var(--focus); }
.pz-sheet .m-lvbar { height: 24px; background: rgba(6,18,10,.6); box-shadow: 0 0 0 2px #b8873a, 0 0 0 4px var(--bark), inset 0 2px 4px rgba(0,0,0,.5); }
.pz-sheet .m-lvbar i { background: linear-gradient(180deg, #ffe48f, #f2c14e 50%, #d99a2e); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); }
.pz-sheet .m-lvbar em { line-height: 24px; color: var(--cream); text-shadow: 0 1px 0 #2a1708, 0 -1px 0 #2a1708, 1px 0 0 #2a1708, -1px 0 0 #2a1708; }
.pz-sheet .m-stats { gap: 14px 12px; padding: 2px; }
.pz-sheet .m-stats div { padding: 9px 14px; border-radius: 14px; }
.pz-sheet .m-stats dd { font-size: 21px; }
.pz-sheet .m-medal-grid { gap: 12px; padding: 2px; }
.pz-sheet .m-medal-trail { padding: 8px 12px; border-radius: 14px; }
.pz-sheet .m-medal.sm svg { filter: grayscale(1) brightness(1.6) opacity(.3); }
.pz-sheet .m-medal.sm.got svg { filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.pz-sheet .m-medal-trail s { width: 2px; height: 18px; margin: 0 5px; background: rgba(201,150,65,.45); }
.pz-sheet .m-avatars { gap: 14px; padding: 4px; }
.pz-sheet .m-avatar-pick { box-shadow: 0 0 0 2px #b8873a, 0 0 0 4px var(--bark), 0 4px 0 4px #160c04; }
.pz-sheet .m-avatar-pick.on { box-shadow: 0 0 0 3px #ffe394, 0 0 0 5.5px var(--bark), 0 4px 0 5px #160c04, 0 0 16px rgba(242,193,78,.45); }
.pz-sheet .m-online { padding: 14px; border-radius: 16px; }
.pz-sheet .m-online small { color: var(--leaf-text); }
.pz-sheet .m-online-acts { gap: 12px; }

/* ---- Daily gift ---- */
.pz-sheet .m-daily::before {
  content: ''; display: block; width: 76px; height: 76px; margin: 0 auto -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='9' width='17' height='11.5' rx='1.6' fill='%23e0533a' stroke='%238a2a18' stroke-width='1.1'/%3E%3Crect x='2.5' y='6.5' width='19' height='4' rx='1.2' fill='%23ff7a5c' stroke='%238a2a18' stroke-width='1.1'/%3E%3Cpath d='M10.4 6.5h3.2v14h-3.2z' fill='%23f2c14e'/%3E%3Cpath d='M12 6.4C10 2.6 6.4 3 6.8 5.2c.3 1.4 3 1.4 5.2 1.2zM12 6.4c2-3.8 5.6-3.4 5.2-1.2-.3 1.4-3 1.4-5.2 1.2z' fill='%23f2c14e' stroke='%239a6c12' stroke-width='1'/%3E%3C/svg%3E") center / 74% no-repeat,
    radial-gradient(circle, rgba(255,214,110,.45), transparent 66%);
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.35));
}
.pz-sheet .m-daily:not(.is-update)::before { animation: pz-gift .7s var(--spring, ease) .1s both; }
@keyframes pz-gift { from { transform: scale(.4) rotate(-14deg); opacity: 0; } }
.pz-sheet .m-days { gap: 10px; margin: 14px 0 16px; padding: 2px; }
.pz-sheet .m-day {
  padding: 8px 2px 10px; border: 2px solid rgba(201,150,65,.6); border-radius: 14px;
  background: linear-gradient(180deg, #2e5834, #1a3a21); color: var(--cream);
  box-shadow: 0 0 0 2px var(--bark), 0 4px 0 2px #160c04, inset 0 2px 0 rgba(255,236,170,.14);
}
.pz-sheet .m-day small { color: #ead7a6; }
.pz-sheet .m-day span { text-shadow: 0 1px 0 #0c1a0e; }
.pz-sheet .m-day.big { border-color: #f4c95a; background: radial-gradient(circle at 50% 55%, rgba(242,193,78,.38), transparent 70%), linear-gradient(180deg, #2e5834, #1a3a21); }
.pz-sheet .m-day.today {
  border-color: #fff0b8; color: #3a2a08; transform: translateY(-4px);
  background: radial-gradient(circle at 50% 20%, #fff8dc, #f6d77c 60%, #e2a83c);
  box-shadow: 0 0 0 2px var(--bark), 0 5px 0 2px #160c04, 0 0 20px rgba(242,193,78,.55);
}
.pz-sheet .m-day.today small { color: #6a4a12; }
.pz-sheet .m-day.today span { text-shadow: none; }
.pz-sheet .m-day.done { opacity: .6; filter: saturate(.55); }
.pz-sheet .m-day i { color: #fffaf0; background: linear-gradient(180deg, #8fe06a, #2f8029); box-shadow: 0 0 0 2px var(--bark); }
.pz-sheet .m-gift-box {
  gap: 10px; padding: 16px; margin-bottom: 16px; border: 2px solid rgba(201,150,65,.6); border-radius: 18px;
  background: linear-gradient(180deg, rgba(6,18,10,.45), rgba(6,18,10,.66));
  box-shadow: 0 0 0 2px var(--bark), inset 0 6px 16px rgba(0,0,0,.35);
}
.pz-sheet .m-gift-box.ready {
  border-color: #f4c95a;
  background: radial-gradient(circle at 50% 0, rgba(242,193,78,.36), transparent 72%), linear-gradient(180deg, rgba(6,18,10,.4), rgba(6,18,10,.62));
  box-shadow: 0 0 0 2px var(--bark), 0 0 24px rgba(242,193,78,.22), inset 0 6px 16px rgba(0,0,0,.3);
}
.pz-sheet .m-gift-box span {
  padding: 5px 14px 5px 8px; border-radius: 999px; color: var(--cream); font-size: 16px; text-shadow: 0 2px 0 #0c1a0e;
  background: rgba(6,18,10,.5); box-shadow: inset 0 0 0 2px rgba(201,150,65,.5);
}
.pz-sheet .m-gift-box span span { padding: 0; background: none; box-shadow: none; }
.pz-sheet .m-daily .m-fine { color: var(--leaf-text); }
.pz-sheet .m-daily > .eyebrow, .pz-sheet .m-daily > .title { padding: 0 54px; }

/* ---- Heroes ---- */
.pz-sheet .heroes-sheet .hs-lede b { color: #f8dd98; }
.pz-sheet .hs-cards { gap: 14px; padding: 4px 2px 6px; }
.pz-sheet .hs-card {
  border: 2px solid rgba(201,150,65,.65); color: var(--cream);
  background: radial-gradient(90% 60% at 50% 30%, rgba(166,215,122,.18), transparent 70%), linear-gradient(180deg, #2e5834, #1a3a21);
  box-shadow: 0 0 0 2px var(--bark), 0 5px 0 2px #160c04, inset 0 2px 0 rgba(255,236,170,.14);
}
.pz-sheet .hs-card.on { border-color: #ffe394; transform: translateY(-3px); box-shadow: 0 0 0 2.5px var(--bark), 0 6px 0 2.5px #160c04, 0 0 18px rgba(242,193,78,.4), inset 0 2px 0 rgba(255,236,170,.2); }
.pz-sheet .hs-cname b { text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .hs-cname small { color: var(--leaf-text); }
.pz-sheet .hs-face { box-shadow: 0 0 0 3px #f2c14e, 0 0 0 5px var(--bark), 0 4px 8px 4px rgba(0,0,0,.3); }
.pz-sheet .hs-tick { box-shadow: 0 0 0 2px var(--bark); }
.pz-sheet .hs-stage { border: 3px solid #d9a64a; box-shadow: 0 0 0 2.5px var(--bark), 0 6px 0 2.5px #160c04, inset 0 0 0 2px rgba(255,255,255,.18); }
.pz-sheet .hs-look { box-shadow: inset 0 0 0 1.5px rgba(255,226,140,.4); }
.pz-sheet .hs-look.on { box-shadow: 0 0 0 2px var(--bark); }
.pz-sheet .hs-name small { color: #f8cf6a; }
.pz-sheet .hs-bio { color: var(--leaf-text); }
.pz-sheet .hs-chips span { background: rgba(6,18,10,.5); box-shadow: inset 0 0 0 2px rgba(201,150,65,.5); color: var(--cream); }
.pz-sheet .hs-ab {
  border: 2px solid rgba(201,150,65,.6); color: var(--cream);
  background: linear-gradient(180deg, rgba(6,18,10,.45), rgba(6,18,10,.68));
  box-shadow: 0 0 0 2px var(--bark), inset 0 6px 12px rgba(0,0,0,.3);
}
.pz-sheet .hs-ab-lv { box-shadow: 0 0 0 1.5px var(--bark); }
.pz-sheet .hs-abs { gap: 12px; margin-bottom: 16px; }
.pz-sheet .hs-levels, .pz-sheet .hs-skins { margin-top: 16px; padding: 12px 14px; border-radius: 16px; }
.pz-sheet .hs-levels summary small, .pz-sheet .hs-skin-head small, .pz-sheet .hs-skin-note { color: var(--leaf-text); }
.pz-sheet .hs-levels li.key { background: rgba(6,18,10,.42); box-shadow: inset 0 0 0 1.5px rgba(201,150,65,.35); }
.pz-sheet .hs-levels li em { background: rgba(6,18,10,.55); color: var(--cream); }
.pz-sheet .hs-levels li.key em { color: #3a2a08; }
.pz-sheet .hs-levels li.look em { box-shadow: 0 0 0 2px #f2c14e; }
.pz-sheet .hs-levels li small { color: var(--leaf-text); }
.pz-sheet .hs-skin-row { gap: 12px; padding: 4px 4px 8px; }
.pz-sheet .hs-skin { color: var(--cream); background: rgba(6,18,10,.5); box-shadow: 0 0 0 2px rgba(201,150,65,.55), 0 4px 0 2px #0a170e; }
.pz-sheet .hs-skin.on { box-shadow: 0 0 0 3px #ffe394, 0 4px 0 3px #0a170e, 0 0 14px rgba(242,193,78,.35); }
.pz-sheet .hs-skin small { color: var(--leaf-text); }

/* ---- Trials ---- */
.pz-sheet .tr-progress { gap: 6px; color: var(--leaf-text); }
.pz-sheet .tr-progress b { font-size: 24px; color: var(--cream); text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .tr-bar { width: 160px; height: 14px; background: rgba(6,18,10,.6); box-shadow: 0 0 0 2px #b8873a, 0 0 0 4px var(--bark), inset 0 2px 4px rgba(0,0,0,.5); }
.pz-sheet .tr-bar i { background: linear-gradient(180deg, #ffe48f, #f2c14e 50%, #d99a2e); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); }
.pz-sheet .tr-chapter { margin: 0 0 22px; }
/* Chapter headings: a gold medallion, the name and a gold rule out to the count. */
.pz-sheet .tr-chapter h3 { gap: 12px; margin: 8px 0 14px; }
.pz-sheet .tr-chapter h3 b { font-size: 19px; color: var(--cream); text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .tr-chapter h3 small { color: var(--leaf-text); }
.pz-sheet .tr-chapter h3 em {
  padding: 4px 12px; border-radius: 999px; font-weight: 700; color: #f8dd98;
  background: rgba(6,18,10,.55); box-shadow: inset 0 0 0 2px rgba(201,150,65,.55);
}
.pz-sheet .tr-num {
  width: 40px; height: 40px; font-size: 19px; color: #3a2608; text-shadow: 0 1px 0 rgba(255,240,200,.6);
  background: radial-gradient(circle at 50% 30%, #fff1b8, #f2c14e 55%, #c98a26);
  box-shadow: 0 0 0 2.5px #fff0b8, 0 0 0 5px var(--bark), 0 4px 0 5px #160c04;
}
.pz-sheet .tr-chapter.locked .tr-num { filter: grayscale(.85) brightness(.75); opacity: 1; }
.pz-sheet .tr-chapter.locked h3 b { color: var(--leaf-text); }
.pz-sheet .tr-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px 14px; padding: 2px; }
/* Trial cards: moss with a gold rim; won trials get a green seal, locked ones dim. */
.pz-sheet .tr-card {
  gap: 8px; padding: 12px 14px 14px; border-radius: 18px; color: var(--cream);
  border: 2px solid rgba(201,150,65,.72);
  background: radial-gradient(120% 70% at 50% 0, rgba(166,215,122,.16), transparent 60%), linear-gradient(180deg, #2e5834 0%, #1d3e24 60%, #15301b 100%);
  box-shadow: 0 0 0 2px var(--bark), 0 5px 0 2px #160c04, inset 0 2px 0 rgba(255,236,170,.14);
}
.pz-sheet .tr-card.open { border-color: #f4c95a; box-shadow: 0 0 0 2px var(--bark), 0 5px 0 2px #160c04, 0 0 18px rgba(242,193,78,.2), inset 0 2px 0 rgba(255,236,170,.18); }
.pz-sheet .tr-card.done { border-color: #8fd06a; box-shadow: 0 0 0 2px var(--bark), 0 5px 0 2px #160c04, inset 0 2px 0 rgba(200,255,170,.16); }
.pz-sheet .tr-card.locked { opacity: 1; filter: saturate(.45) brightness(.8); }
.pz-sheet .tr-card header { gap: 10px; }
.pz-sheet .tr-card header small { color: #f8cf6a; }
.pz-sheet .tr-card header b { font-size: 17px; text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .tr-ico {
  width: 48px; height: 48px; border-radius: 14px;
  background: radial-gradient(circle at 50% 35%, #2c5530, #10261a); box-shadow: 0 0 0 2px #b8873a, 0 0 0 4px var(--bark);
}
.pz-sheet .tr-done {
  padding: 3px 10px 3px 6px; border-radius: 999px; color: #fffaf0; text-shadow: 0 1px 0 #1d4a14;
  background: linear-gradient(180deg, #8fe06a, #2f8029); box-shadow: 0 0 0 2px var(--bark);
}
.pz-sheet .tr-story { color: var(--leaf-text); }
.pz-sheet .tr-goal {
  padding: 7px 10px; border-radius: 12px; color: #f8dd98;
  background: rgba(6,18,10,.45); box-shadow: inset 0 0 0 1.5px rgba(201,150,65,.4);
}
.pz-sheet .tr-card footer { gap: 8px; padding-top: 4px; }
.pz-sheet .tr-card footer .sbtn { height: 42px; padding: 0 16px; }
.pz-sheet .tr-lock { padding: 6px 10px; border-radius: 12px; color: var(--leaf-text); background: rgba(6,18,10,.45); }
.pz-sheet .tr-lock svg { color: var(--gold); }

/* ---- Co-op: header / scrolling body / footer inside the panel ---- */
.pz-sheet .sheet.coop-sheet {
  width: 100%; max-width: none; height: auto; display: flex; flex-direction: column; overflow: hidden; padding: 0;
  --p1-deep: #8a5c0c; --p2-deep: #1b6582;
}
.pz-sheet .coop-head {
  padding: 2px 22px 14px; border-bottom: 0;
  background: linear-gradient(90deg, transparent, var(--gold-line) 12%, var(--gold-line) 88%, transparent) center bottom / 100% 2px no-repeat;
}
.pz-sheet .coop-head .title { font-size: clamp(22px, 3vw, 34px); }
.pz-sheet .coop-head .sheet-close { top: auto; right: auto; }
.pz-sheet .coop-duo img { border-color: #1a3a21; box-shadow: 0 0 0 2px #d9a64a, 0 0 0 4px var(--bark); }
.pz-sheet .coop-conn { background: rgba(6,18,10,.55); box-shadow: inset 0 0 0 2px rgba(201,150,65,.5); }
.pz-sheet .coop-code {
  border: 2px solid #d9a64a; color: var(--cream);
  background: radial-gradient(circle at 50% 20%, #8a5a2e, #5a3216);
  box-shadow: 0 0 0 2px var(--bark), 0 4px 0 2px #160c04, inset 0 2px 0 rgba(255,214,160,.3);
}
.pz-sheet .coop-code b { color: #ffe394; text-shadow: 0 2px 0 #2a1708; }
.pz-sheet .coop-code small { color: #ead7a6; }
.pz-sheet .coop-code span { color: var(--cream); }
.pz-sheet .coop-code:active { box-shadow: 0 0 0 2px var(--bark), 0 1px 0 2px #160c04; }
.pz-sheet .coop-body { padding: 18px 22px 20px; scrollbar-width: thin; scrollbar-color: #b8873a transparent; }
.pz-sheet .coop-foot {
  padding: 14px 22px 18px; border-top: 0;
  background: linear-gradient(90deg, transparent, var(--gold-line) 12%, var(--gold-line) 88%, transparent) center top / 100% 2px no-repeat, linear-gradient(180deg, rgba(6,18,10,.2), rgba(6,18,10,.42));
}
.pz-sheet .coop-status { color: var(--leaf-text); }
.pz-sheet .coop-sheet h3 small { color: var(--leaf-text); }
.pz-sheet .coop-panel, .pz-sheet .coop-feature { border-radius: 18px; }
.pz-sheet .coop-panel p, .pz-sheet .coop-set-head small, .pz-sheet .coop-seat-info small, .pz-sheet .coop-row-info small, .pz-sheet .coop-check small, .pz-sheet .coop-field { color: var(--leaf-text); }
.pz-sheet .coop-hub, .pz-sheet .coop-room { gap: 18px 20px; }
.pz-sheet .coop-col, .pz-sheet .coop-settings { gap: 14px; }
.pz-sheet .coop-team { gap: 14px; }
.pz-sheet .coop-seat { border-radius: 18px; }
.pz-sheet .coop-seat.is-ready { border-color: var(--c); box-shadow: 0 0 0 2px var(--bark), 0 5px 0 2px #160c04, 0 0 16px color-mix(in srgb, var(--c) 40%, transparent), inset 0 2px 0 rgba(255,236,170,.14); }
.pz-sheet .coop-seat.is-empty { border: 2px dashed rgba(201,150,65,.55); background: rgba(6,18,10,.3); box-shadow: none; }
.pz-sheet .coop-face { box-shadow: 0 0 0 2px var(--bark), 0 3px 0 2px var(--cd); }
.pz-sheet .coop-link { color: #3a2608; background: linear-gradient(180deg, #ffe48f, #d99a2e); box-shadow: 0 0 0 2px var(--bark), 0 3px 0 2px #160c04; }
.pz-sheet .coop-badge { background: rgba(6,18,10,.55); box-shadow: inset 0 0 0 1.5px rgba(201,150,65,.45); }
.pz-sheet .is-ready .coop-badge { background: linear-gradient(180deg, #8fe06a, #2f8029); color: #fffaf0; text-shadow: 0 1px 0 #1d4a14; box-shadow: 0 0 0 1.5px var(--bark); }
.pz-sheet .coop-feature { overflow: hidden; }
.pz-sheet .coop-maps { gap: 12px; padding: 4px 4px 6px; }
.pz-sheet .coop-map-art { box-shadow: 0 0 0 2px rgba(201,150,65,.5), 0 0 0 4px var(--bark), 0 4px 0 4px #0a170e; }
.pz-sheet .coop-map.on .coop-map-art { box-shadow: 0 0 0 3px #ffe394, 0 0 0 5px var(--bark), 0 4px 0 5px #0a170e, 0 0 14px rgba(242,193,78,.4); }
.pz-sheet .coop-map-name { color: var(--leaf-text); }
.pz-sheet .coop-map.on .coop-map-name { color: var(--cream); }
.pz-sheet .coop-set { border-radius: 16px; padding: 12px 14px; }
/* Segmented pickers: a carved slot; the choice is a lit moss key. */
.pz-sheet .coop-seg { padding: 4px; gap: 4px; border-radius: 13px; background: rgba(6,18,10,.6); box-shadow: inset 0 0 0 2px rgba(201,150,65,.45), inset 0 3px 6px rgba(0,0,0,.4); }
.pz-sheet .coop-seg button { color: var(--leaf-text); }
.pz-sheet .coop-seg button[aria-checked="true"] { color: var(--cream); text-shadow: 0 1px 0 #0c1a0e; background: linear-gradient(180deg, #44804b, #24502c); box-shadow: 0 0 0 2px #d9a64a, 0 2px 0 2px var(--bark); }
.pz-sheet .coop-seg button[class*="tone-"][aria-checked="true"] { box-shadow: 0 0 0 2px #ffe394, 0 2px 0 2px var(--bark); }
.pz-sheet .coop-facts span, .pz-sheet .coop-feats span { background: rgba(6,18,10,.5); box-shadow: inset 0 0 0 1.5px rgba(201,150,65,.4); }
/* Switches: the frame's carved slot. */
.pz-sheet :is(.coop-switch, .switch) {
  width: 56px; height: 32px; border: 2px solid #b8873a; background: linear-gradient(180deg, #0b1a10, #1b3420);
  box-shadow: 0 0 0 2px var(--bark), inset 0 3px 5px rgba(0,0,0,.55);
}
.pz-sheet .coop-switch i, .pz-sheet .switch::after { top: 2px; left: 2px; width: 24px; height: 24px; background: radial-gradient(circle at 40% 30%, #fffaf0, #f0dca8 60%, #c9a463); box-shadow: 0 0 0 1.5px #6b4416, 0 2px 3px rgba(0,0,0,.4); }
.pz-sheet .coop-switch[aria-checked="true"], .pz-sheet .switch:checked { background: linear-gradient(180deg, #8fe06a, #45a236 60%, #2f8029); }
.pz-sheet .coop-switch[aria-checked="true"] i, .pz-sheet .switch:checked::after { transform: translateX(24px); }
.pz-sheet .coop-row { background: rgba(6,18,10,.45); box-shadow: inset 0 0 0 2px rgba(201,150,65,.35); }
.pz-sheet .coop-row-art { box-shadow: 0 0 0 2px rgba(201,150,65,.5); }
.pz-sheet .coop-empty { border-color: rgba(201,150,65,.4); color: var(--leaf-text); }
.pz-sheet .coop-panel h3 em { background: rgba(6,18,10,.55); box-shadow: inset 0 0 0 1.5px rgba(201,150,65,.45); }
.pz-sheet .coop-icon-btn { color: var(--cream); border: 2px solid #d9a64a; background: radial-gradient(circle at 50% 30%, #8a5a2e, #5a3216); box-shadow: 0 0 0 2px var(--bark); }
.pz-sheet .coop-help summary { color: var(--cream); }
.pz-sheet .coop-addrs a { color: #ffe394; }
.pz-sheet .coop-lede { color: var(--leaf-text); }
.pz-sheet .coop-note { border: 2px solid rgba(242,193,78,.45); border-radius: 14px; color: var(--cream); }
.pz-sheet .coop-stats { gap: 12px; padding: 2px; }
.pz-sheet .coop-stats dd small { color: var(--leaf-text); }
.pz-sheet .coop-stats .tone-easy dd { color: #8fe06a; }
.pz-sheet .coop-stats .tone-hard dd { color: #ff9a6a; }
.pz-sheet .coop-stats .tone-nightmare dd { color: #ff7a8a; }
.pz-sheet .coop-v-match .eyebrow { color: #f8dd98; }
.pz-sheet .coop-v-match.is-lost .eyebrow { color: #ffb49a; }
.pz-sheet .coop-v-match.is-won .eyebrow { color: #b6e98f; }
.pz-sheet .coop-foot-row { gap: 14px; }
/* In a match: the main action on its own row (like Resume), three buttons under it. */
.pz-sheet .coop-foot-row.is-match { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.pz-sheet .coop-foot-row.is-match > :first-child { grid-column: 1 / -1; }
/* Start match: the gold button, pulsing. Waiting: a quiet moss one. */
.pz-sheet .sbtn.coop-go {
  border-color: #fff0b8; color: #3a2608; text-shadow: 0 1px 0 rgba(255,240,200,.6);
  background: radial-gradient(70% 60% at 50% 0, rgba(255,255,230,.45), transparent 70%), linear-gradient(180deg, #ffe48f 0%, #f2c14e 50%, #d99a2e 100%);
  box-shadow: 0 0 0 2px var(--bark), 0 4px 0 2px #160c04, inset 0 2px 0 rgba(255,255,255,.5);
  animation: pz-pulse 1.6s ease-in-out infinite;
}
.pz-sheet .sbtn.coop-go svg { color: #3a2608; filter: none; }
@keyframes pz-pulse { 50% { box-shadow: 0 0 0 2px var(--bark), 0 4px 0 2px #160c04, 0 0 0 9px rgba(242,193,78,.28), inset 0 2px 0 rgba(255,255,255,.5); } }
.pz-sheet .sbtn.coop-waiting { color: #d6f0b4; background: linear-gradient(180deg, #2a4d2f, #1a3820); border-color: #8fc45a; }
.pz-sheet .sbtn.coop-waiting svg { color: #8fe06a; }
.pz-sheet .coop-sheet .sbtn:disabled { opacity: .55; }
/* Seed sharing and the co-op seeds card in Settings. */
.pz-sheet :is(.coop-money-compose, .coop-money-request) { border-color: rgba(201,150,65,.55); background: rgba(6,18,10,.42); box-shadow: 0 0 0 2px var(--bark); }
.pz-sheet .coop-money-history li { border-bottom-color: rgba(201,150,65,.25); }
.pz-sheet .coop-money-request small { color: var(--leaf-text); }

/* ---- Narrow windows and portrait phones ---- */
@container pz (max-width: 600px) {
  .pz-sheet .m-grid { grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); gap: 14px 12px; }
  /* Every tab stays in view: they wrap into rows instead of scrolling. */
  .pz-sheet .m-tabs { flex-wrap: wrap; overflow: visible; gap: 8px 6px; }
  .pz-sheet .m-tab { flex: 1 1 auto; padding: 0 10px; }
  .pz-sheet .m-card-pic { height: 92px; }
  .pz-sheet .m-card-banner { margin-right: 50px; padding: 12px; }
  .pz-sheet .m-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .pz-sheet .m-stats dd { font-size: 18px; }
  .pz-sheet .m-medal-trail b { width: auto; flex: 1 1 100%; }
  /* Seven days as 4 + 3, the big seventh spanning two. */
  .pz-sheet .m-days { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
  .pz-sheet .m-day.big { grid-column: span 2; }
  /* Hero cards: a swipeable row; the next card peeks in at the edge. */
  .pz-sheet .hs-cards { grid-template-columns: repeat(5, minmax(92px, 1fr)); overflow-x: auto; scroll-snap-type: x proximity; gap: 12px; padding: 4px 4px 10px; }
  .pz-sheet .hs-card { scroll-snap-align: start; }
  .pz-sheet .coop-head { padding: 0 14px 12px; gap: 10px; }
  .pz-sheet .coop-body { padding: 14px 14px 16px; }
  .pz-sheet .coop-foot { padding: 12px 14px 14px; }
  .pz-sheet .coop-foot-row { gap: 10px; }
  .pz-sheet .coop-stats { gap: 10px; }
  .pz-sheet .coop-foot .sbtn.big { font-size: 18px; }
  .pz-sheet .coop-foot .sbtn.big span { white-space: normal; line-height: 1.1; text-align: center; text-wrap: balance; }
  /* Match buttons: icon over a label that may take two lines. */
  .pz-sheet .coop-foot-row.is-match .sbtn:not(.big) { flex-direction: column; gap: 3px; height: 60px; padding: 0 4px; font-size: 13px; }
  .pz-sheet .coop-foot-row.is-match .sbtn:not(.big) span { white-space: normal; line-height: 1.1; text-align: center; overflow: visible; }
}
/* Short screens (phones in landscape): a slimmer crest, tighter spacing. */
@container pz (max-height: 560px) {
  .pz-sheet .m-daily::before { display: none; }
  .pz-sheet .m-days { margin: 8px 0 10px; gap: 8px; }
  .pz-sheet .m-gift-box { padding: 10px; margin-bottom: 10px; }
  .pz-sheet .m-tabs { padding: 5px; margin: 2px 0 8px; gap: 6px; }
  .pz-sheet .m-card-banner { padding: 8px 12px; margin-bottom: 10px; }
  .pz-sheet .m-grid { gap: 12px 10px; }
  .pz-sheet .hs-cards { gap: 10px; margin-bottom: 10px; }
  .pz-k-coop .pz-panel, .pz-k-coop-match .pz-panel, .pz-k-coop-money .pz-panel { padding-top: calc(var(--u) * 36); }
  .pz-sheet .coop-head { padding: 0 16px 8px; }
  .pz-sheet .coop-head .title { font-size: 20px; }
  .pz-sheet .coop-body { padding: 10px 16px 12px; }
  .pz-sheet .coop-foot { padding: 8px 16px 10px; }
  .pz-sheet .coop-hub, .pz-sheet .coop-room { gap: 12px 14px; }
  .pz-sheet .coop-col, .pz-sheet .coop-settings { gap: 10px; }
  .pz-sheet .coop-set { padding: 8px 10px; }
}
@container pz (max-height: 560px) and (min-width: 520px) {
  /* One footer row: the main action takes the room, the others become icons
     (their labels stay for screen readers). */
  .pz-sheet .coop-foot-row.is-match { grid-template-columns: minmax(0, 1fr) repeat(3, 48px); gap: 10px; }
  .pz-sheet .coop-foot-row.is-match > :first-child { grid-column: auto; }
  .pz-sheet .coop-foot-row.is-match .sbtn:not(.big) { flex-direction: row; height: 44px; padding: 0; }
  .pz-sheet .coop-foot-row.is-match .sbtn:not(.big) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pz-sheet .coop-v-room .coop-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; column-gap: 14px; }
  .pz-sheet .coop-v-room .coop-status { text-align: left; }
}

/* ---- Every other page inside the frame ----------------------------------
   Trail picker, difficulty and mode, first hero, How to play, backups, the
   confirm dialogs, Knowledge, Awards, Powers, Sandbox, Trail Maker, Odyssey,
   Teams and Contested Grove: the same moss cards, sunken wells and gold rims. */
.pz-sheet :is(.trail, .steps li, .coop-list li, .m-diff, .m-hero, .m-branch, .m-award, .m-power, .sb-raider, .sb-tool, .mm-card,
  .od-isl, .od-pick, .od-run, .tm-box, .tm-card, .ct-tile, .tg-goal, .tg-bonus, .m-ed-map) {
  border: 2px solid rgba(201,150,65,.72); color: var(--cream);
  background: radial-gradient(120% 70% at 50% 0, rgba(166,215,122,.16), transparent 60%), linear-gradient(180deg, #2e5834 0%, #1d3e24 60%, #15301b 100%);
  box-shadow: 0 0 0 2px var(--bark), 0 5px 0 2px #160c04, inset 0 2px 0 rgba(255,236,170,.14);
}
.pz-sheet :is(.trail, .m-hero, .m-power, .sb-raider, .od-pick, .m-ed-map):active { transform: translateY(3px); box-shadow: 0 0 0 2px var(--bark), 0 2px 0 2px #160c04, inset 0 2px 0 rgba(255,236,170,.14); }
/* Chosen or ready: a bright gold rim and a warm glow. */
.pz-sheet :is(.trail.last, .m-hero.on, .m-award.s-ready, .mm-card.new, .od-isl.s-now, .od-pick.on, .m-ed-map.on, .tg-bonus.on) {
  border-color: #ffe394;
  box-shadow: 0 0 0 2px var(--bark), 0 5px 0 2px #160c04, 0 0 18px rgba(242,193,78,.35), inset 0 2px 0 rgba(255,236,170,.2);
}
/* Sunken wells: chips and list rows. */
.pz-sheet :is(.sb-live > span, .od-crew-chip, .tm-list li, .tm-members li, .ct-standings li, .ct-team, .tm-chat, .tg-helpers li, .tg-tier, .trail-feats span, .m-prize-table span) {
  color: var(--cream); background: linear-gradient(180deg, rgba(6,18,10,.45), rgba(6,18,10,.66));
  box-shadow: inset 0 0 0 1.5px rgba(201,150,65,.42), inset 0 3px 6px rgba(0,0,0,.28);
}
.pz-sheet :is(.tm-members li.me, .ct-standings li.me) { box-shadow: inset 0 0 0 2px #ffe394, inset 0 3px 6px rgba(0,0,0,.28); }
/* Inputs: dark wells with a gold rim. */
.pz-sheet :is(.backup-code, .m-code input, .tm-field input, .tm-say input) {
  border: 2px solid rgba(201,150,65,.65); color: var(--cream); background: rgba(6,18,10,.62);
  box-shadow: 0 0 0 2px var(--bark), inset 0 3px 6px rgba(0,0,0,.4);
}
.pz-sheet :is(.backup-code, .m-code input, .tm-field input, .tm-say input):focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 2px var(--bark), 0 0 0 5px rgba(255,227,148,.25), inset 0 3px 6px rgba(0,0,0,.4); }
.pz-sheet :is(.backup-code, .m-code input, .tm-field input, .tm-say input)::placeholder { color: var(--leaf-text); opacity: .55; }
.pz-sheet .backup-code { padding: 12px; border-radius: 14px; font-size: 13px; }
.pz-sheet .backup-status { color: #b6e98f; font-weight: 700; }
/* Small gold medallions: numbers and points. */
.pz-sheet :is(.trail-num, .m-points) {
  color: #3a2608; text-shadow: 0 1px 0 rgba(255,240,200,.6);
  background: radial-gradient(circle at 50% 30%, #fff1b8, #f2c14e 55%, #c98a26);
  box-shadow: 0 0 0 2px #fff0b8, 0 0 0 4px var(--bark), 0 3px 0 4px #160c04;
}

/* ---- Trail picker ---- */
.pz-sheet .trails { gap: 16px; padding: 8px 6px 14px; margin: 6px -6px 0; scrollbar-width: thin; scrollbar-color: #b8873a transparent; }
.pz-sheet .trail { border-radius: 20px; }
.pz-sheet .trail.last::after { display: none; }
.pz-sheet .trail-art { box-shadow: inset 0 -2px 0 rgba(201,150,65,.75); }
.pz-sheet .trail-art::after { background: linear-gradient(transparent 55%, rgba(6,18,10,.45)); }
.pz-sheet .trail-num { left: 9px; top: 9px; width: 30px; height: 30px; font-size: 15px; }
.pz-sheet .trail:not(.last) .trail-num { filter: saturate(.75) brightness(.92); }
.pz-sheet .trail-body { gap: 6px; padding: 10px 12px 13px; }
.pz-sheet .trail-body > b { font-size: 18px; text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .trail-diff small { color: #ead7a6; }
.pz-sheet .trail-tag { color: var(--leaf-text); }
.pz-sheet .trail-feats span { padding: 3px 9px; }
.pz-sheet .trail-best { color: var(--leaf-text); }
.pz-sheet .trail-best.won { color: #f8dd98; }
.pz-sheet .trail-best svg { color: var(--gold); }
.pz-sheet .trail.locked { filter: saturate(.4) brightness(.78); }
.pz-sheet .trail.maker { border-color: #f4c95a; }
.pz-sheet .trail-art.maker-art { color: var(--gold); background: radial-gradient(circle at 50% 50%, rgba(255,226,140,.28), transparent 60%), repeating-linear-gradient(45deg, #2a4f30 0 12px, #224428 12px 24px); }
.pz-sheet .trail-art.maker-art svg { filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); }
.pz-sheet .trails-sheet > .eyebrow, .pz-sheet .trails-sheet > .title { padding: 0 54px; }

/* ---- How to play, install steps, backups, confirm dialogs ---- */
.pz-sheet .steps { gap: 14px 12px; margin: 8px 0 18px; padding: 2px; }
.pz-sheet .steps li { gap: 5px; padding: 12px 13px 13px; border-radius: 16px; }
.pz-sheet .steps b { font-size: 17px; text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .steps span { color: var(--leaf-text); }
.pz-sheet .steps .step-ico { filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
.pz-sheet .steps .go-ico { color: #fff; border: 2px solid #f4c95a; background: linear-gradient(180deg, #8fe06a, #45a236 70%, #2f8029); box-shadow: 0 0 0 2px var(--bark); filter: none; }
.pz-sheet .keys { color: var(--leaf-text); }
.pz-sheet .keys kbd {
  display: inline-block; min-width: 26px; padding: 1px 7px; border-radius: 7px; font: inherit; font-weight: 700; color: var(--cream);
  background: linear-gradient(180deg, #33603a, #1a3820); box-shadow: 0 0 0 1.5px #b8873a, 0 3px 0 1.5px var(--bark);
}
.pz-sheet .coop-list { gap: 10px; padding: 2px; }
.pz-sheet .coop-list li { padding: 10px 14px; border-radius: 14px; color: var(--leaf-text); }
.pz-sheet .coop-list b { color: #f8dd98; }
.pz-sheet .coop-art span { filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.pz-sheet .actions { gap: 14px; padding: 2px; }
/* Confirm dialogs: a short question, then the two choices. */
.pz:is(.pz-k-confirm-reset, .pz-k-confirm-new-solo, .pz-k-confirm-restart, .pz-k-confirm-quit) .sheet { padding-top: 8px; padding-bottom: 22px; }
.pz:is(.pz-k-confirm-reset, .pz-k-confirm-new-solo, .pz-k-confirm-restart, .pz-k-confirm-quit) .sheet > .title { padding: 0 8px; }
.pz:is(.pz-k-confirm-reset, .pz-k-confirm-new-solo, .pz-k-confirm-restart, .pz-k-confirm-quit) .lede { margin-bottom: 20px; }

/* ---- Difficulty and mode ---- */
.pz-sheet .m-diffs { gap: 16px 14px; padding: 2px; }
.pz-sheet .m-diff { gap: 8px; padding: 10px; border-radius: 18px; }
.pz-sheet .m-diff h3 b { text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .m-diff.d-easy h3 b { color: #a6e07c; }
.pz-sheet .m-diff.d-normal h3 b { color: #f8cf6a; }
.pz-sheet .m-diff.d-hard h3 b { color: #ff9a6a; }
.pz-sheet .m-diff.d-elder h3 b { color: #c9a2ff; }
.pz-sheet .m-diff h3 small { color: var(--leaf-text); }
.pz-sheet .m-mode {
  border: 2px solid rgba(201,150,65,.5); color: var(--cream);
  background: linear-gradient(180deg, #33603a 0%, #23472b 45%, #1a3820 100%);
  box-shadow: 0 0 0 1.5px var(--bark), 0 4px 0 1.5px #160c04, inset 0 2px 0 rgba(255,236,170,.16);
}
.pz-sheet .m-mode.std { border-color: #f4c95a; box-shadow: 0 0 0 1.5px var(--bark), 0 4px 0 1.5px #160c04, 0 0 12px rgba(242,193,78,.18), inset 0 2px 0 rgba(255,236,170,.2); }
.pz-sheet .m-mode:active:not(.locked) { box-shadow: 0 0 0 1.5px var(--bark), 0 1px 0 1.5px #160c04; }
.pz-sheet .m-mode.locked { border-color: rgba(201,150,65,.25); color: #a9b394; background: linear-gradient(180deg, rgba(6,18,10,.4), rgba(6,18,10,.6)); box-shadow: inset 0 3px 6px rgba(0,0,0,.3); }
.pz-sheet .m-mode-t b { text-shadow: 0 1px 0 #0c1a0e; }
.pz-sheet .m-mode-t small { color: var(--leaf-text); }
.pz-sheet .m-modes-head .title { margin: 0; }
.pz-sheet .m-medal-count svg { color: var(--gold); }

/* ---- First hero ---- */
.pz-sheet .m-hero-row { gap: 14px; padding: 4px 2px 8px; }
.pz-sheet .m-hero { border-radius: 18px; }
.pz-sheet .m-hero.on { transform: translateY(-3px); }
.pz-sheet .m-hero-pic { border-radius: 16px 16px 0 0; background: radial-gradient(60% 70% at 50% 75%, rgba(255,226,140,.34), transparent 70%), linear-gradient(180deg, #3f7a45, #1b3a22); box-shadow: inset 0 -2px 0 rgba(201,150,65,.6); }
.pz-sheet .m-hero b { text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .m-hero small { color: var(--leaf-text); }
.pz-sheet .m-free { border: 2px solid #f4c95a; background: linear-gradient(180deg, #8fe06a, #2f8029); box-shadow: 0 0 0 1.5px var(--bark); text-shadow: 0 1px 0 #1d4a14; }
.pz-sheet .m-hero-info { color: var(--leaf-text); }
.pz-sheet .m-hero-info b { color: #f8dd98; }

/* ---- Knowledge ---- */
.pz-sheet .m-points { padding: 6px 16px; border-radius: 16px; }
.pz-sheet .m-branches { gap: 14px 12px; padding: 2px; }
.pz-sheet .m-branch { padding: 10px; border-radius: 18px; border-top: 4px solid var(--bc); }
.pz-sheet .m-branch h3 b { color: color-mix(in srgb, var(--bc) 45%, #fff6dc); text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .m-branch h3 small { color: var(--leaf-text); }
.pz-sheet .m-branch li + li::before { background: var(--gold-line); width: 3px; margin-left: -1.5px; }
.pz-sheet .m-perk { border: 2px solid rgba(201,150,65,.28); box-shadow: 0 3px 0 #0a170e, inset 0 3px 6px rgba(0,0,0,.2); }
.pz-sheet .m-perk.s-ready { border-color: var(--bc); background: linear-gradient(180deg, #33603a, #1a3820); box-shadow: 0 0 0 1.5px var(--bark), 0 3px 0 1.5px #160c04, 0 0 12px color-mix(in srgb, var(--bc) 35%, transparent); }
.pz-sheet .m-perk.s-learned { border-color: color-mix(in srgb, var(--bc) 60%, #fff0b8); box-shadow: 0 0 0 1.5px var(--bark), 0 3px 0 1.5px #160c04; }

/* ---- Awards and Powers ---- */
.pz-sheet .m-award-list, .pz-sheet .m-power-grid { gap: 14px 12px; padding: 2px; }
.pz-sheet .m-award { padding: 9px 11px; border-radius: 16px; }
.pz-sheet .m-award.s-claimed { opacity: .7; }
.pz-sheet .m-award b, .pz-sheet .m-power b { text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .m-award small, .pz-sheet .m-power small { color: var(--leaf-text); }
.pz-sheet :is(.m-award-ico, .m-power-ico, .tg-ico) { background: radial-gradient(circle at 50% 35%, #2c5530, #10261a); box-shadow: 0 0 0 2px #b8873a, 0 0 0 4px var(--bark); }
.pz-sheet .m-done { color: #8fe06a; }
.pz-sheet .m-power { padding: 8px 11px 8px 8px; border-radius: 16px; border-color: #f4c95a; }
.pz-sheet .m-power.off { border-color: rgba(201,150,65,.4); box-shadow: 0 0 0 2px var(--bark), 0 5px 0 2px #160c04; }
.pz-sheet .m-power-ico em { box-shadow: 0 0 0 2px var(--bark); }

/* ---- Sandbox ---- */
.pz-sheet .sb-live > span { padding: 5px 12px; }
.pz-sheet .sb-live svg { color: var(--gold); }
.pz-sheet .sb-raiders { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px 10px; padding: 2px; }
.pz-sheet .sb-raider { border-radius: 14px; }
.pz-sheet .sb-raider :is(b, small) { white-space: normal; line-height: 1.1; }
.pz-sheet .sb-raider.boss { border-color: #ff9a6a; }
.pz-sheet .sb-raider small { color: var(--leaf-text); }
.pz-sheet .sb-tools { gap: 12px; padding: 2px; }
.pz-sheet .sb-tool { padding: 9px 12px; border-radius: 16px; }
.pz-sheet .sb-tool > b svg { color: var(--gold); }

/* ---- Trail Maker: your trails, the play sheet, the editor ---- */
.pz-sheet .mm-list { gap: 16px 14px; padding: 2px; margin-bottom: 14px; }
.pz-sheet .mm-card { padding: 9px; border-radius: 18px; }
.pz-sheet .mm-card small { color: var(--leaf-text); }
.pz-sheet .mm-card b { text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .mm-thumb { background: #10261a; box-shadow: inset 0 0 0 2px rgba(201,150,65,.5); }
.pz-sheet .mm-card.new .mm-thumb { color: #3a2608; background: radial-gradient(circle at 50% 30%, #fff1b8, #f2c14e 55%, #c98a26); box-shadow: 0 0 0 2px #fff0b8, 0 0 0 4px var(--bark), 0 3px 0 4px #160c04; }
.pz-sheet .mm-leaves i { background: rgba(255,240,200,.18); }
.pz-sheet .mm-leaves i.on { background: #8fe06a; }
.pz-sheet .mm-diffs { gap: 14px; padding: 2px; margin: 14px 0; }
.pz-sheet .mm-diff { border: 2px solid #f4c95a; box-shadow: 0 0 0 2px var(--bark), 0 5px 0 2px #160c04, inset 0 2px 0 rgba(255,255,220,.45); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.pz-sheet .mm-diff:not(.d-easy):not(.d-hard) { background: linear-gradient(180deg, #8fe06a 0%, #62c447 36%, #45a236 70%, #2f8029 100%); }
.pz-sheet .mm-diff.d-easy { background: linear-gradient(180deg, #6fae55, #3f7a32); }
.pz-sheet .mm-diff.d-hard { border-color: #e4a35a; background: linear-gradient(180deg, #c8643c 0%, #a54a2a 55%, #84371d 100%); }
.pz-sheet .mm-diff:active { box-shadow: 0 0 0 2px var(--bark), 0 1px 0 2px #160c04; }
.pz-sheet .mm-diff b { text-shadow: 0 2px 0 #1d4a14, 0 -1px 0 #1d4a14, 1px 0 0 #1d4a14, -1px 0 0 #1d4a14; }
.pz-sheet .mm-diff.d-hard b { text-shadow: 0 2px 0 #5a1f0c, 0 -1px 0 #5a1f0c, 1px 0 0 #5a1f0c, -1px 0 0 #5a1f0c; }
/* Event names with several twists wrap instead of trailing off. */
.pz-sheet .m-event header b { white-space: normal; text-wrap: balance; }
.pz-sheet .m-seg button { color: var(--leaf-text); background: rgba(6,18,10,.5); box-shadow: inset 0 0 0 1.5px rgba(201,150,65,.4); }
.pz-sheet .m-seg button.on { color: #fffaf0; text-shadow: 0 1px 0 #1d4a14; background: linear-gradient(180deg, #8fe06a, #45a236 70%, #2f8029); box-shadow: 0 0 0 2px #f4c95a; }
.pz-sheet .mm-props button { color: var(--cream); background: linear-gradient(180deg, #33603a, #1a3820); box-shadow: 0 0 0 1.5px rgba(201,150,65,.55), 0 3px 0 1.5px var(--bark); }
.pz-sheet .mm-props button.on { color: #fffaf0; background: linear-gradient(180deg, #8fe06a, #45a236 70%, #2f8029); box-shadow: 0 0 0 2px #f4c95a, 0 3px 0 2px var(--bark); }
.pz-sheet .mm-tip { color: var(--leaf-text); }
.pz-sheet .mm-check { color: #ffd6c4; background: rgba(160,48,28,.26); box-shadow: inset 0 0 0 2px rgba(255,154,106,.45); }
.pz-sheet .mm-check.ok { color: #d6f0b4; background: rgba(120,190,80,.18); box-shadow: inset 0 0 0 2px rgba(143,224,106,.5); }
.pz-sheet .mm-check ul { color: var(--leaf-text); }
.pz-sheet .mm-check li.bad { color: #ffb49a; }
.pz-sheet .mm-row .sbtn.armed { border-color: #e4a35a; background: linear-gradient(180deg, #c8643c 0%, #a54a2a 55%, #84371d 100%); }
.pz-sheet .mm-canvas { box-shadow: 0 0 0 3px #d9a64a, 0 0 0 5px var(--bark), 0 6px 0 5px #160c04; }
/* The editor fills the frame; the canvas sizes itself to the stage. */
.pz-k-mapeditor { height: calc(100% - var(--u) * 42); animation: none; }
.pz-k-mapeditor .pz-panel { padding-top: calc(var(--u) * 40); }
.pz-k-mapeditor .sheet.mm-editor { height: auto; min-height: 0; padding: 8px 14px 14px; overflow: hidden; }
.pz-k-mapeditor .pz-vine { width: calc(var(--u) * 130); height: calc(var(--u) * 110); }

/* ---- Odyssey ---- */
.pz-sheet .od-islands { gap: 14px; padding: 6px 4px 12px; }
.pz-sheet .od-isl { border-radius: 16px; }
.pz-sheet .od-isl small, .pz-sheet .od-isl em { color: var(--leaf-text); }
.pz-sheet .od-isl { flex-basis: 220px; }
.pz-sheet .od-isl b { white-space: normal; line-height: 1.1; text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .od-mark { box-shadow: 0 0 0 2px var(--bark); }
.pz-sheet .od-boat { gap: 14px 12px; padding: 2px; }
.pz-sheet .od-pick { border-radius: 16px; }
.pz-sheet .od-pick small { color: var(--leaf-text); }
/* Class names keep their colour, lifted to read on moss. */
.pz-sheet .od-pick small i { font-weight: 700; filter: brightness(1.75) saturate(.85); }
.pz-sheet .od-pick em { box-shadow: 0 0 0 1.5px var(--bark); }
.pz-sheet .od-pic { filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.pz-sheet .od-run { gap: 8px; padding: 11px 13px; margin: 2px 2px 12px; border-radius: 16px; }
.pz-sheet .od-lives { color: #ff9a8a; }
.pz-sheet .od-crew-chip { padding: 2px 11px 2px 2px; }
.pz-sheet :is(.od-note, .ct-relic) { color: #f8dd98; background: rgba(242,193,78,.12); box-shadow: inset 0 0 0 1.5px rgba(242,193,78,.45); }
.pz-sheet .od-note.bad { color: #ffd6c4; background: rgba(160,48,28,.26); box-shadow: inset 0 0 0 1.5px rgba(255,154,106,.45); }

/* ---- Teams, team goals, Contested Grove ---- */
.pz-sheet .tm-grid, .pz-sheet .tg-split { gap: 16px 14px; padding: 2px; }
.pz-sheet .tm-box { gap: 10px; padding: 12px; border-radius: 18px; }
.pz-sheet .tm-card { margin: 2px 2px 14px; border-radius: 18px; background: radial-gradient(120% 90% at 0 50%, color-mix(in srgb, var(--tc) 30%, transparent), transparent 65%), linear-gradient(180deg, #2e5834 0%, #1d3e24 60%, #15301b 100%); }
.pz-sheet .tm-card > span > b { text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet :is(.tm-card small, .tm-list li small, .tm-members li small, .tg-goal small) { color: var(--leaf-text); }
.pz-sheet .tm-emblem { box-shadow: 0 0 0 3px var(--tc), 0 0 0 5px var(--bark); }
.pz-sheet .tm-colors button { box-shadow: 0 0 0 2px var(--bark); }
.pz-sheet .tm-colors button.on { box-shadow: 0 0 0 3px #fff6dc, 0 0 0 5px var(--tc), 0 0 0 7px var(--bark); }
.pz-sheet .tm-picks button { background: rgba(6,18,10,.5); box-shadow: inset 0 0 0 1.5px rgba(201,150,65,.4); }
.pz-sheet .tm-picks button.on { box-shadow: inset 0 0 0 3px #ffe394; }
.pz-sheet .tm-invite code { color: #ffe394; background: rgba(6,18,10,.6); box-shadow: inset 0 0 0 1.5px rgba(201,150,65,.5); }
.pz-sheet .tm-chat { padding: 10px; }
.pz-sheet .tm-chat li { color: var(--cream); background: #224629; }
.pz-sheet .tm-chat li.me { background: #3a6b3f; }
.pz-sheet .tm-chat li.sys { color: var(--leaf-text); background: transparent; }
.pz-sheet .tm-closed svg { color: var(--leaf-text); }
.pz-sheet .tg-goals { gap: 12px; padding: 2px; }
.pz-sheet .tg-goal { border-radius: 16px; }
.pz-sheet .tg-goal.coop { border-color: #5cc3e6; }
.pz-sheet .tg-bar { background: rgba(6,18,10,.6); box-shadow: 0 0 0 1.5px rgba(201,150,65,.5), inset 0 2px 4px rgba(0,0,0,.5); }
.pz-sheet .tg-bar > em { color: var(--cream); text-shadow: 0 1px 0 #0c1a0e, 0 -1px 0 #0c1a0e, 1px 0 0 #0c1a0e, -1px 0 0 #0c1a0e; }
.pz-sheet .tg-bonus { padding: 9px 13px; border-radius: 16px; }
.pz-sheet .ct-team > span { color: var(--leaf-text); }
.pz-sheet .ct-tile { padding: 12px 14px; border-radius: 18px; }
.pz-sheet .ct-name { text-shadow: 0 2px 0 #0c1a0e; }
.pz-sheet .ct-locked { color: var(--leaf-text); }
.pz-sheet .ct-map { filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }

/* ---- Small screens ---- */
@container pz (max-width: 600px) {
  .pz-sheet .trails { grid-auto-columns: minmax(168px, 1fr); gap: 12px; }
  .pz-sheet .steps { grid-template-columns: 1fr; gap: 12px; }
  .pz-sheet .trails-sheet > .eyebrow, .pz-sheet .trails-sheet > .title { padding: 0 48px 0 0; text-align: left; }
  .pz-sheet .mm-diffs { grid-template-columns: 1fr; }
}
@container pz (max-height: 560px) {
  .pz-sheet .trails { gap: 12px; padding: 6px 6px 10px; }
  .pz-sheet .trail-body { gap: 4px; padding: 7px 10px 10px; }
  .pz-sheet .trail-body > b { font-size: 16px; }
  .pz-sheet .trail-num { width: 26px; height: 26px; font-size: 13px; }
  .pz-sheet .steps { gap: 10px; margin: 4px 0 12px; }
  .pz-sheet .steps li { padding: 8px 10px; }
  .pz-sheet .steps b { font-size: 15px; }
  .pz-sheet .m-diffs, .pz-sheet .m-branches, .pz-sheet .m-award-list, .pz-sheet .m-power-grid, .pz-sheet .mm-list { gap: 10px; }
  .pz-sheet .m-diff { padding: 7px; }
  .pz-sheet .m-hero-row { gap: 10px; }
  .pz-sheet .mm-diffs { margin: 10px 0; }
  /* The editor: a slimmer frame, no crest over the canvas. */
  .pz-k-mapeditor { height: calc(100% - var(--u) * 14); margin-top: calc(var(--u) * 14); }
  .pz-k-mapeditor .pz-panel { padding-top: calc(var(--u) * 12); }
  .pz-k-mapeditor :is(.pz-crest, .pz-flower) { display: none; }
  .pz-k-mapeditor .pz-vine { width: calc(var(--u) * 100); height: calc(var(--u) * 85); }
  .pz-k-mapeditor .sheet.mm-editor { padding: 6px; }
}

@media (hover: hover) and (pointer: fine) {
  .pz-btn:hover:not(:disabled), .pz-close:hover { filter: brightness(1.1); }
  .pz-row:hover { border-color: #e2b25c; }
  .pz-sheet :is(.hs-card, .coop-map, .m-avatar-pick):hover { filter: brightness(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .pz { animation: none; }
  .pz-sheet .sbtn.coop-go, .pz-sheet .m-daily:not(.is-update)::before { animation: none; }
  .pz-btn, .pz-close, .pz-switch, .pz-switch::after { transition: none; }
}