/* v28 "Command bar" interface: resource pill, level tracker, bottom bar, build drawer, quests sheet */
/* ===== v28 "Command bar" UI: resource pill with the level ring, round Goals and Events buttons, one command bar at the bottom,
   build drawer and quests sheet that open from it. Rubik Dirt for titles, Rubik for text (both Latin + Cyrillic). ===== */
:root {
  --cream: #f6eedc;
  --cream2: #efe3c8;
  --line: #dccfb6;
  --bark: #3a2414;
  --bark2: #241509;
  --orange: #e0702e;
  --dim: rgba(43, 29, 16, 0.86);
  --wood: #3a2414;
  --wood-hi: #5a3a22;
  --wood-lo: #241509;
  --stone: #f6eedc;
  --stone-lo: #dccfb6;
  --muted: #6b5440;
  --ember: #e0702e;
}
.hud {
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
}
.hudL {
  display: flex;
  gap: 8px;
  pointer-events: none;
  flex-direction: column;
  align-items: flex-start;
}
.rpill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--dim);
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.rpill .chip {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 4px 6px;
  font-size: 17px;
  color: #f6eedc;
}
.rpill .chip .ico {
  display: inline-flex;
  width: 19px;
  height: 19px;
}
.rpill .chip .ico svg {
  width: 100%;
  height: 100%;
}
.rpill .chip .ico.hp {
  color: #9fd46a;
}
.rpill .chip small,
.hud .chip small {
  display: none;
}
.rpill .coin {
  width: 19px;
  height: 19px;
}
.stars {
  font-size: 16px;
}
/* the level ring: the progress to the next level runs round the number */
.lvlRing {
  flex: none;
  width: 40px;
  height: 40px;
  margin: -4px 2px -4px -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.lvlRing svg {
  display: block;
  width: 100%;
  height: 100%;
}
.lvlRing circle {
  fill: none;
  stroke-width: 5;
}
.lvlRing .lrB {
  fill: #2f1d10;
  stroke: #1e1108;
}
.lvlRing .lrF {
  stroke: #f2c230;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transform: rotate(-90deg);
  transform-origin: 22px 22px;
}
.lvlRing text {
  fill: #f6eedc;
  font: 400 17px var(--display);
  text-anchor: middle;
}
/* the round buttons under the top bar: goals and events; a tap opens their card (the popover next to them) */
.sideBtns {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 0px));
  top: calc(var(--hudB, 64px) + 4px);
  display: flex;
  gap: 8px;
  z-index: 6;
  pointer-events: auto;
}
/* one line of round buttons: Goals, Events, the waiting mini-game (#qbub), the map alerts (#alerts), all of one size */
.sideBtns {
  --sb: 54px;
  align-items: center;
}
.sideBtns > .qbub,
.sideBtns > .alerts {
  position: static;
  zoom: 1;
  display: flex;
  flex-direction: inherit;
  gap: 8px;
  align-items: inherit;
}
.sideBtns > .qbub:empty,
.sideBtns > .alerts:empty {
  display: none;
}
.sideBtns .qbub button {
  width: var(--sb);
  height: var(--sb);
}
/* the map alerts stay smaller (38 px, as they were); in the column their right edge is the others' */
.sbtn {
  position: relative;
  flex: none;
  width: var(--sb);
  height: var(--sb);
  padding: 0;
  border-radius: 50%;
  border: 3px solid var(--bark);
  background: var(--cream);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.sbtn[hidden] {
  display: none;
}
.sbtn img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}
.sbtn[aria-expanded='true'] {
  background: #ffd27a;
}
.sbtn.hot {
  border-color: #c0392b;
  animation: alPulse 1.6s ease-in-out infinite;
}
.sbtn .badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #c0392b;
  border: 2px solid #1e1108;
  color: #fff;
  font: 800 12px/16px var(--body);
  text-align: center;
}
.sbtn #goalsBadge {
  background: #4f8a2b;
}
.sbtn .badge[hidden] {
  display: none;
}
.hudPop {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 0px));
  top: calc(var(--hudB, 64px) + 70px);
  z-index: 6;
  display: none;
  pointer-events: auto;
}
body.gopen #goalStrip {
  display: flex;
}
/* a toast would sit under the open card (and it is in the Events list anyway) */
body.gopen #toast,
body.eopen #toast {
  display: none;
}
body.eopen #evPop {
  display: flex;
}
.cmdbar {
  position: absolute;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bark);
  border-radius: 28px;
  box-shadow:
    0 6px 0 var(--bark2),
    0 10px 30px rgba(0, 0, 0, 0.25);
  z-index: 7;
  pointer-events: auto;
}
.cb {
  position: relative;
  width: 82px;
  height: 72px;
  border: 0;
  border-radius: 18px;
  background: var(--cream);
  color: var(--bark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font: 700 13px var(--body);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.cb svg {
  width: 26px;
  height: 26px;
}
.cb:hover {
  filter: brightness(1.05);
}
.cb[aria-pressed='true'] {
  background: var(--orange);
  color: #fff;
}
.cb .badge {
  position: absolute;
  top: 4px;
  right: 8px;
  background: #c8402a;
  color: #fff;
  font-weight: 700;
}
.cb.big {
  width: 104px;
  height: 96px;
  margin-top: -28px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  border: 4px solid var(--cream);
  font-size: 15px;
}
.cb.big svg {
  width: 34px;
  height: 34px;
}
.cb.big i {
  display: contents;
  font-style: normal;
}
.cb.big .off,
.cb.big[aria-pressed='true'] .on {
  display: none;
}
.cb.big[aria-pressed='true'] .off {
  display: revert;
}
.cb.big[aria-pressed='true'] {
  border-color: #f2c440;
  background: var(--orange);
}
/* a system that is not open yet is not shown at all (js/ui/feats.js) */
.cb[hidden],
.rbtn[hidden] {
  display: none;
}
/* the "new" dot: a system that just opened, until its button is first tapped */
[data-new] {
  position: relative;
}
[data-new]::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e0442c;
  box-shadow: 0 0 0 2px var(--cream);
  pointer-events: none;
}
#btnCamp.alert {
  background: #c84a2a;
  color: #fff;
}
#legacy {
  display: none !important;
}
.dock {
  bottom: var(--cmdH, 110px);
  padding-bottom: 10px;
  display: none;
  z-index: 6;
}
body.bopen .dock {
  display: block;
}
body.bopen.bmini .dock {
  display: none;
}
.tray {
  max-width: 1100px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  grid-template-rows: auto 1fr;
  background: var(--cream);
  border: 3px solid var(--bark);
  border-radius: 22px;
  box-shadow:
    0 8px 0 rgba(36, 21, 9, 0.3),
    0 12px 30px rgba(40, 25, 10, 0.25);
}
.tabs {
  grid-column: 1;
  background: transparent;
  padding: 12px 14px 0;
  gap: 6px;
}
.tab {
  background: var(--cream2);
  color: var(--bark);
  border-radius: 14px;
  padding: 8px 14px;
  font-weight: 700;
}
.tab[aria-selected='true'] {
  background: var(--bark);
  color: var(--cream);
}
.items {
  grid-column: 1;
  padding: 12px 14px 14px;
  gap: 10px;
}
.item {
  width: 112px;
  border: 2px solid var(--bark);
  border-radius: 14px;
  padding: 6px;
  align-items: center;
  text-align: center;
}
.item > img,
.tool-ico {
  height: 78px;
  background: transparent;
}
.item b {
  font-size: 13px;
  /* long names stay on two lines so every card keeps one height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.15;
  min-height: 2.3em;
}
/* the biome: a line of its own under the price */
.item .bio {
  display: block;
  max-width: 100%;
  font-size: 11px;
  font-weight: 700;
  color: #6b8a3f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.item span {
  justify-content: center;
  color: #b5562a;
  font-weight: 700;
}
.item.locked {
  border-style: dashed;
  border-color: #a8946c;
  background: var(--cream2);
}
.item.locked img {
  filter: grayscale(1);
  opacity: 0.5;
}
.item.locked span {
  color: var(--muted);
}
.item[aria-pressed='true'] {
  border: 3px solid var(--orange);
  box-shadow: 0 4px 0 rgba(224, 112, 46, 0.35);
  background: #fff3e0;
}
.binfo {
  grid-column: 2;
  grid-row: 1/3;
  background: var(--cream2);
  border-left: 3px solid var(--bark);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14px;
  min-height: 0;
}
.binfo h4 {
  margin: 0;
  font: 400 21px/1.1 var(--display);
}
.binfo p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.binfo .row {
  font-size: 14px;
}
.binfo .row b {
  color: var(--ink);
}
.binfo .mat {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.binfo .mat.no {
  color: #b5562a;
  opacity: 0.75;
}
.binfo .mtip {
  font-size: 11.5px;
}
.binfo .tip {
  margin-top: auto;
  font-size: 12px;
  color: var(--muted);
}
/* desktop: the drawer keeps one height whatever tab or item is picked; long descriptions scroll inside the card */
.tray {
  height: min(246px, 34vh);
}
.tray .items {
  align-items: flex-start;
  align-content: flex-start;
  overflow-y: hidden;
  min-height: 0;
}
.binfo {
  overflow-y: auto;
  scrollbar-width: thin;
}
.toolChip {
  position: absolute;
  left: 50%;
  bottom: calc(var(--cmdH, 110px) + 12px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  background: var(--dim);
  color: #f6eedc;
  border-radius: 18px;
  font-weight: 700;
  font-size: 14px;
  z-index: 7;
  pointer-events: auto;
  white-space: nowrap;
}
.toolChip[hidden] {
  display: none;
}
.toolChip button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--cream);
  color: var(--bark);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.toolChip svg {
  width: 16px;
  height: 16px;
}
.qsheet {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px));
  top: calc(var(--hudR, 64px) + 12px);
  bottom: calc(var(--cmdH, 110px) + 14px);
  width: 400px;
  max-width: calc(100% - 32px);
  display: none;
  flex-direction: column;
  background: var(--cream);
  border: 3px solid var(--bark);
  border-radius: 22px;
  box-shadow: 0 8px 0 rgba(36, 21, 9, 0.3);
  z-index: 6;
  pointer-events: auto;
  overflow: hidden;
}
body.qopen .qsheet {
  display: flex;
}
.qhead {
  display: flex;
  align-items: center;
  padding: 12px 14px 6px;
}
.qhead h3 {
  flex: 1;
  margin: 0;
  font: 400 24px var(--display);
}
.qx {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  color: var(--bark);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.qx svg {
  width: 17px;
  height: 17px;
}
.qbody {
  flex: 1;
  overflow-y: auto;
  padding: 6px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  touch-action: pan-y;
  scrollbar-width: thin;
}
.qbody .card {
  box-shadow: 0 3px 0 rgba(36, 21, 9, 0.18);
}
.qbody .goal {
  display: block !important;
}
.qnone {
  margin: 4px 2px;
  color: var(--muted);
  font-size: 13px;
}
.qnone[hidden] {
  display: none;
}
.qbub {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px));
  top: 34%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
  pointer-events: auto;
}
body.qopen .qbub {
  display: none;
}
.qbub button {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid var(--bark);
  background: var(--cream);
  color: var(--bark);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.qbub button svg {
  width: 24px;
  height: 24px;
}
.qbub button.ct {
  background: #efe3ff;
  color: #5a3a8a;
}
.qbub button.ev {
  background: #ffe7d0;
  color: #b4501f;
  animation: alPulse 1.6s ease-in-out infinite;
}
.qbub button.vip {
  background: #fff3c8;
  color: #8a6a12;
}
.qbub button.rep {
  background: #f6dccc;
  color: #9a4a2a;
}
.qbub button i {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #c8402a;
  color: #fff;
  font: 800 11px/18px var(--body);
  font-style: normal;
}
body.qopen .side {
  right: calc(max(16px, env(safe-area-inset-right, 0px)) + 412px);
}
.side {
  top: calc(var(--hudR, 64px) + 12px);
  max-height: calc(100vh - var(--hudR, 64px) - var(--cmdH, 110px) - 30px);
}
.card {
  background: var(--cream);
  border: 3px solid var(--bark);
  border-radius: 18px;
  box-shadow: 0 4px 0 rgba(36, 21, 9, 0.3);
}
.panel {
  border-radius: 22px;
  max-height: calc(100% - var(--hudB, 64px) - var(--cmdH, 110px) - 20px);
}
.card h3 {
  font-size: 20px;
}
.btn {
  background: var(--orange);
  border-color: #9a4410;
  color: #fff;
  border-radius: 12px;
}
.btn.alt {
  background: var(--cream2);
  border-color: var(--line);
  color: var(--bark);
}
.t {
  background: var(--dim);
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.hint {
  top: calc(var(--hudB, 64px) + 6px);
}
.alerts {
  top: calc(var(--hudB, 64px) + 14px);
}
body.incamp .cmdbar #btnQuest,
body.incamp .cmdbar #btnBuild,
body.incamp .qsheet,
body.incamp .qbub,
body.incamp .toolChip {
  visibility: hidden;
}
body.incamp .side {
  max-height: calc(100vh - var(--hudB, 64px) - var(--cmdH, 110px) - 20px) !important;
}
body.photo .cmdbar,
body.photo .qsheet,
body.photo .qbub,
body.photo .toolChip {
  display: none !important;
}
.cmdbar,
.qsheet,
.qbub,
.sideBtns,
.hudPop,
.toolChip {
  zoom: var(--ui, 1);
}
@media (max-width: 700px) {
  .hud {
    padding-left: 10px;
    padding-right: 10px;
  }
  .hudL {
    width: 100%;
    align-items: stretch;
  }
  .rpill {
    justify-content: space-between;
    padding: 4px 8px;
  }
  /* build orders: one good on a phone (the one the sites wait for) */
  #resChip {
    gap: 4px;
  }
  /* a level ring, shells, wood, guests, and mood in one row of a 360 px phone */
  .rpill {
    gap: 0;
  }
  .rpill .chip {
    font-size: 14px;
    padding: 3px 3px;
  }
  /* the buttons stand in a column on the right, the cards open to their left; the map's own buttons go under them */
  .sideBtns {
    --sb: 48px;
    left: auto;
    right: 10px;
    flex-direction: column;
    align-items: flex-end;
  }
  .hudPop {
    left: 10px;
    right: 66px;
    top: calc(var(--hudB, 64px) + 4px);
  }
  .cmdbar {
    left: 10px;
    right: 10px;
    transform: none;
    justify-content: space-between;
    padding: 8px 10px;
    gap: 4px;
    border-radius: 26px;
  }
  .cb {
    width: 62px;
    height: 58px;
    border-radius: 16px;
    font-size: 11px;
    gap: 2px;
  }
  .cb svg {
    width: 22px;
    height: 22px;
  }
  .cb .badge {
    top: 2px;
    right: 4px;
  }
  .cb.big {
    width: 82px;
    height: 78px;
    margin-top: -24px;
    font-size: 12px;
  }
  .cb.big svg {
    width: 28px;
    height: 28px;
  }
  .dock {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    bottom: 0;
  }
  .tray {
    display: block;
    height: auto;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
    max-height: min(56vh, calc(100vh - var(--hudB, 64px) - 40px));
    overflow-y: auto;
    padding-bottom: calc(var(--cmdH, 100px) + 4px);
    box-sizing: border-box;
    touch-action: pan-y;
  }
  .tabs {
    padding: 10px 10px 0;
  }
  .tab {
    padding: 7px 12px;
  }
  .items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    padding: 10px;
  }
  .item {
    width: auto;
  }
  .item > img,
  .tool-ico {
    height: 60px;
  }
  .binfo {
    display: none;
  }
  .qsheet {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    top: calc(var(--hudB, 120px) + 6px);
    bottom: 0;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
  }
  .qbody {
    padding-bottom: calc(var(--cmdH, 100px) + 10px);
  }
  body.qopen .side {
    right: max(16px, env(safe-area-inset-right, 0px));
  }
  .side {
    top: auto !important;
    bottom: calc(var(--cmdH, 100px) + 8px) !important;
    max-height: min(44vh, calc(100vh - var(--hudB, 64px) - var(--cmdH, 100px) - 24px)) !important;
  }
  body.qopen .side,
  body.bopen:not(.bmini) .side {
    display: none;
  }
  .qbub {
    top: auto;
    bottom: calc(var(--cmdH, 100px) + 160px);
    right: 10px;
  }
  .qbub button {
    width: 48px;
    height: 48px;
  }
  body.incamp .side {
    bottom: calc(var(--cmdH, 100px) + 8px) !important;
    max-height: 48vh !important;
  }
}

/* v29: notifications, controls hint and phone stacking (see NOTE in js/ui/hud.js) */
.t.ev{background:#4a3220;border-left:5px solid var(--orange)}
.hint{background:var(--dim);color:#f6eedc;text-shadow:none;padding:8px 12px;border-radius:12px;max-width:300px;font-size:13px;line-height:1.35;box-shadow:0 3px 10px rgba(0,0,0,.2)}
.hint[hidden]{display:none!important}
@media (max-width:700px){
  .hint{display:block;left:10px;right:76px;max-width:none;top:calc(var(--hudB,110px) + 6px);font-size:12.5px;padding:7px 10px}
  #toast{top:calc(var(--hudB,110px) + 6px + var(--hintH,0px));left:10px;right:76px;transform:none;max-width:none;align-items:stretch}
  #toast .t{font-size:13px;padding:7px 12px}
  body.hasqb .side{right:68px!important}
  /* the layer strip alone is as wide as the bottom bar (the round buttons are at the top, they are not in its way); 6px is the bottom bar's inset */
  .side:has(> .layerCard:not([hidden])):not(:has(> .card:not(.layerCard):not([hidden]))){left:6px!important;right:6px!important;max-width:none!important}
  .side{bottom:calc(var(--cmdH,100px) + 8px + var(--chipH,0px))!important;max-height:min(40vh,calc(100vh - var(--hudB,110px) - var(--cmdH,100px) - var(--chipH,0px) - var(--hintH,0px) - 70px))!important}
  .toolChip{max-width:calc(100% - 20px);white-space:normal}
}
/* v29: why a card is locked, in the details pane */
.binfo .lock {
  font-size: 13px;
  font-weight: 600;
  color: #a0522d;
}
/* v29: the final scene at level 16 */
#panel[data-kind='finale'] h3 {
  font: 400 28px/1.1 var(--display);
}
#panel .finale .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  padding: 3px 0;
  border-bottom: 1px dashed var(--stone-lo);
}

/* v36: painted icons (assets/ui/icons, tools/icons/) */
.cb .cbi {
  width: 38px;
  height: 38px;
  margin: -6px 0 -4px;
  filter: drop-shadow(0 2px 1px rgba(40, 20, 5, 0.35));
  pointer-events: none;
}
.cb.big .cbi {
  width: 50px;
  height: 50px;
}
.cb[aria-pressed='true'] .cbi {
  transform: translateY(-2px) scale(1.06);
}
.hudi {
  width: 24px;
  height: 24px;
  margin: -4px 2px -4px -2px;
  vertical-align: middle;
}
.uii {
  width: 30px;
  height: 30px;
  margin: -8px 6px -8px -4px;
  vertical-align: middle;
  filter: drop-shadow(0 1px 1px rgba(40, 20, 5, 0.3));
}
/* the ✕ in a sheet's header: crossed bones */
h3 [data-p='close'],
.bone {
  font-size: 0 !important;
  background-image: url('../assets/ui/icons/ui_close.webp') !important;
  background-size: 70% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-width: 40px;
  min-height: 40px;
}
/* counts on the bar: a red gem */
.cb .badge {
  background: url('../assets/ui/icons/gem.webp') center/contain no-repeat;
  min-width: 26px;
  height: 26px;
  line-height: 25px;
  padding: 0;
  font-weight: 900;
  -webkit-text-stroke: 3px #7a1608;
  paint-order: stroke fill;
}
@media (max-width: 760px) {
  .cb .cbi {
    width: 32px;
    height: 32px;
  }
  .cb.big .cbi {
    width: 42px;
    height: 42px;
  }
}

/* a column of buttons at the sheet's right edge that stays in view while the sheet scrolls: the ✕ (crossed bones) first, then
   the sheet's own buttons (the park hub's sections, the camp's help) */
#panel[data-kind='hub']:not([hidden]),
.campCard:not(.folded):not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  column-gap: 0;
  align-content: start;
}
#panel[data-kind='hub'] > :not(.rail),
.campCard:not(.folded) > :not(.rail) {
  grid-column: 1;
}
.rail {
  grid-column: 2;
  grid-row: 1 / span 99;
  align-self: start;
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rail .btn {
  width: 42px;
  height: 42px;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 900;
}
.rail .bone {
  font-size: 0;
}
.rail .uii {
  width: 34px;
  height: 34px;
  margin: 0;
}
/* the open section is a dark plank, as the tabs were */
.rail .btn[aria-pressed='true'] {
  background: var(--woodtex) !important;
  border-color: #1e1108 !important;
}
.rail .btn[data-ctab] {
  margin-top: 0;
}
.rail .bone + .btn + .btn {
  margin-top: 8px;
}
/* the park hub: the title clears the sheet's top rim */
#panel[data-kind='hub'] > h3 {
  padding-top: 12px;
}
/* a sheet opened from the hub: the arrow back, left of the title */
.pback {
  flex: none;
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  margin: -4px 8px -4px 0;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  font-size: 20px;
  vertical-align: middle;
}

/* a phone: the camp sheet is the size and place of the hub's (.panel) */
@media (max-width: 700px) {
  body.incamp.campsheet:not(.campsel) .side {
    top: var(--hudB, 110px) !important;
    bottom: auto !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    height: calc(100% - var(--hudB, 110px) - var(--cmdH, 100px) - 24px);
    max-height: none !important;
  }
  body.incamp.campsheet:not(.campsel) .side > .campCard {
    height: 100%;
    max-height: none;
    width: auto;
  }
}