:root {
  color-scheme: dark;
  --ink: #e7e1d6;
  --muted: #b7b1a6;
  --line: rgba(244, 236, 224, 0.16);
  --glass: rgba(16, 18, 16, 0.72);
  --ember: #e4843a;
  --ember-deep: #a84b22;
  --blood: #d4534a;
  --moss: #7ea36a;
  --gold: #e6c27a;
  --display: 'Unbounded', sans-serif;
  --sans: 'Manrope', sans-serif;
  font-family: var(--sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #070908;
  color: var(--ink);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

button, a { -webkit-tap-highlight-color: transparent; }

button {
  font: inherit;
  color: inherit;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  gap: 2px;
  cursor: pointer;
}

button:active { transform: scale(0.96); }

button.on {
  background: rgba(228, 132, 58, 0.22);
  border-color: rgba(228, 132, 58, 0.7);
}

button svg { width: 22px; height: 22px; display: block; }

#stage {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 480px at 50% 20%, rgba(90, 58, 32, 0.28), transparent 60%),
    #070908;
}

#phone {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #10140f;
}

@media (min-aspect-ratio: 3/4) {
  #phone {
    width: min(440px, calc(100dvh - 28px));
    height: min(940px, calc(100dvh - 28px));
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  }
}

#view, #floaters, #wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#view { display: block; }

#floaters, #wash { pointer-events: none; }

#wash {
  background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(6, 8, 7, 0.55) 100%);
}

#phone.hurt #wash {
  background:
    radial-gradient(ellipse at 50% 42%, transparent 28%, rgba(90, 16, 12, 0.48) 100%);
}

.floater {
  position: absolute;
  transform: translate(-50%, -120%);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}

#keys {
  display: none;
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(58px + env(safe-area-inset-top));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 220px);
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(12, 14, 12, 0.55);
  color: #f3eadc;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

#phone[data-mode='play'] #keys,
#phone[data-mode='build'] #keys {
  display: block;
}

@media (pointer: coarse) {
  #phone[data-mode='play'] #keys,
  #phone[data-mode='build'] #keys { display: none; }
}

#hud, #radar, #banner, #toast, #coach, #work, #prompt, #pockets, #stick, #actions, #dock {
  position: absolute;
  z-index: 2;
}

#phone[data-mode='servers'] #hud,
#phone[data-mode='servers'] #radar,
#phone[data-mode='servers'] #coach,
#phone[data-mode='servers'] #work,
#phone[data-mode='servers'] #prompt,
#phone[data-mode='servers'] #pockets,
#phone[data-mode='servers'] #stick,
#phone[data-mode='servers'] #actions,
#phone[data-mode='servers'] #dock,
#phone[data-mode='servers'] #names,
#phone[data-mode='menu'] #hud,
#phone[data-mode='menu'] #radar,
#phone[data-mode='menu'] #coach,
#phone[data-mode='menu'] #work,
#phone[data-mode='menu'] #prompt,
#phone[data-mode='menu'] #pockets,
#phone[data-mode='menu'] #stick,
#phone[data-mode='menu'] #actions,
#phone[data-mode='menu'] #dock,
#phone[data-mode='boot'] #hud,
#phone[data-mode='boot'] #radar,
#phone[data-mode='boot'] #dock,
#phone[data-mode='dead'] #stick,
#phone[data-mode='dead'] #actions,
#phone[data-mode='dead'] #dock,
#phone[data-mode='victory'] #stick,
#phone[data-mode='victory'] #actions,
#phone[data-mode='pause'] #stick,
#phone[data-mode='pause'] #actions,
#phone[data-mode='bag'] #stick,
#phone[data-mode='bag'] #actions,
#phone[data-mode='bag'] #prompt,
#phone[data-mode='bag'] #work,
#phone[data-mode='confirm'] #stick,
#phone[data-mode='confirm'] #actions,
#phone[data-mode='confirm'] #dock {
  visibility: hidden;
}

#hud {
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 12px 0;
  pointer-events: none;
}

#hud button { pointer-events: auto; }

.clock-block strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.clock-block span {
  color: var(--muted);
  font-size: 11px;
}

#room-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(228, 132, 58, 0.2);
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.04em;
}

#room-chip:empty { display: none; }

#btn-look, #btn-pause {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  pointer-events: auto;
}

#cycle {
  margin-top: 5px;
  height: 3px;
  width: 92px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

#cycle i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f0d7a4, var(--ember));
}

.meters { display: grid; gap: 5px; min-width: 132px; }

.meter {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 5px;
  align-items: center;
}

.meter .ico svg { width: 14px; height: 14px; }
.meter.hp .ico { color: var(--blood); }
.meter.food .ico { color: var(--gold); }
.meter.food.low .ico { color: var(--blood); }

.meter b {
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.meter i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}

.meter.hp i { background: linear-gradient(90deg, #8d2d28, #e36a62); }
.meter.food i { background: linear-gradient(90deg, #8a6230, #e6c27a); }

.meter em {
  font-style: normal;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 1.6em;
  text-align: right;
}

#radar {
  left: 12px;
  top: calc(78px + env(safe-area-inset-top));
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(10, 12, 10, 0.35);
  pointer-events: none;
}

#banner {
  top: 16%;
  left: 16px;
  right: 16px;
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  opacity: 0;
}

#toast {
  top: calc(86px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  max-width: min(280px, 78%);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(18, 16, 14, 0.82);
  border: 1px solid var(--line);
  color: #f4efe6;
  font-size: 13px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}

#coach {
  top: calc(168px + env(safe-area-inset-top));
  left: 116px;
  right: 16px;
  color: #f6f1e8;
  font-size: 13px;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

#prompt, #work {
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

#prompt {
  bottom: calc(214px + env(safe-area-inset-bottom));
  max-width: 230px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(12, 14, 12, 0.72);
  border: 1px solid var(--line);
  font-size: 13px;
  text-align: center;
}

#prompt:empty { display: none; }

#work {
  bottom: calc(254px + env(safe-area-inset-bottom));
  width: 180px;
  display: grid;
  gap: 4px;
  justify-items: center;
}

#work span { font-size: 12px; color: #f3eadc; text-shadow: 0 2px 8px #000; }

#work b, #work i { display: block; }

#work i {
  height: 4px;
  width: 180px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  overflow: hidden;
}

#work i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  background: var(--ember);
}

#pockets {
  left: 12px;
  bottom: calc(228px + env(safe-area-inset-bottom));
  display: grid;
  gap: 4px;
  pointer-events: none;
}

.chip {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 54px;
  padding: 3px 7px 3px 4px;
  border-radius: 999px;
  background: rgba(12, 14, 12, 0.62);
  border: 1px solid var(--line);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.chip svg { width: 14px; height: 14px; }
.chip.wood { color: #d7b089; }
.chip.stone { color: #d5d0c8; }
.chip.fiber { color: #b7c98a; }
.chip.hide { color: #e0b089; }
.chip.raw { color: #e08980; }
.chip.cooked { color: #e6c27a; }

#stick {
  left: 18px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 1px solid rgba(244, 236, 224, 0.2);
  background: rgba(10, 12, 10, 0.28);
  z-index: 3;
}

#stick.live {
  margin-left: -56px;
  margin-top: -56px;
  background: rgba(10, 12, 10, 0.45);
}

#knob {
  position: absolute;
  left: 34px;
  top: 34px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(244, 236, 224, 0.88);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

#actions {
  right: 14px;
  bottom: calc(92px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-areas:
    'tool eat'
    'heal hand'
    'hit hit';
  gap: 8px;
  z-index: 3;
}

#btn-tool { grid-area: tool; }
#btn-eat { grid-area: eat; }
#btn-heal { grid-area: heal; }
#btn-interact { grid-area: hand; }

#btn-tool, #btn-eat, #btn-heal, #btn-interact {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  position: relative;
}

#btn-attack {
  grid-area: hit;
  height: 64px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f09a4e, var(--ember-deep));
  border-color: rgba(255, 214, 170, 0.35);
  color: #2a140c;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(168, 75, 34, 0.35);
}

#btn-attack svg { stroke: #2a140c; }

.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: #f4efe6;
  color: #1b1612;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

#dock {
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr 72px;
  gap: 8px;
}

#dock button {
  height: 52px;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
}

#sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  max-height: 62%;
  overflow: auto;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: rgba(14, 16, 14, 0.94);
  border-top: 1px solid var(--line);
}

#sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

#sheet h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
}

#sheet .x {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 148px;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.card, .recipe {
  text-align: left;
  align-items: start;
  justify-items: start;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.card.on { border-color: rgba(228, 132, 58, 0.85); background: rgba(228, 132, 58, 0.12); }
.card strong, .recipe strong { font-size: 14px; }
.card p, .recipe p, .fine { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.card.poor, .recipe.poor { opacity: 0.55; }

#build-note {
  margin: 8px 0;
  min-height: 1.3em;
  color: var(--gold);
  font-size: 13px;
}

.sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
}

.sheet-actions.spaced { margin-bottom: 10px; }

.sheet-actions button, .recipe {
  min-height: 46px;
  font-weight: 700;
}

.recipes { display: grid; gap: 8px; }
.recipe { width: 100%; grid-template-columns: 1fr auto; align-items: center; }
.recipe span { color: var(--gold); font-size: 12px; font-weight: 700; }

.inv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.inv .cell {
  padding: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  display: grid;
  justify-items: center;
  gap: 2px;
  font-size: 12px;
}

.inv .cell b { font-size: 16px; font-variant-numeric: tabular-nums; }
.weight { margin: 0 0 12px; color: var(--muted); font-size: 12px; }

#overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  align-content: end;
  overflow: auto;
  padding: calc(28px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(7, 9, 8, 0.15) 0%, rgba(7, 9, 8, 0.78) 58%, rgba(7, 9, 8, 0.92) 100%);
  pointer-events: none;
}

#overlay:empty { display: none; }

#overlay .panel { pointer-events: auto; }

.kicker {
  margin: 0 0 6px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--gold);
}

#overlay h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 52px;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

#overlay h1.small { font-size: 34px; }

.lede {
  margin: 12px 0 0;
  max-width: 34ch;
  color: #ddd6cb;
  font-size: 15px;
  line-height: 1.45;
}

.rules {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.rules li {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}

.stack {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.stack button {
  min-height: 50px;
  font-weight: 700;
  font-size: 16px;
}

.stack button.primary {
  background: linear-gradient(180deg, #f09a4e, var(--ember-deep));
  color: #2a140c;
  border-color: transparent;
}

.ghost-btn { background: transparent; }

#names {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.name-tag {
  position: absolute;
  transform: translate(-50%, -130%);
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(12, 14, 12, 0.72);
  border: 1px solid rgba(244, 236, 224, 0.2);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.name-tag.foe { color: #ffb0a8; border-color: rgba(212, 83, 74, 0.7); }

#overlay input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: inherit;
  padding: 0 12px;
  user-select: text;
  touch-action: auto;
}

.server {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 12px 14px;
  min-height: 64px;
}

.server small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.server em { font-style: normal; color: var(--gold); font-size: 13px; white-space: nowrap; margin-left: 10px; }

#turn { display: none; }
#turn [data-turn] { display: none; }

#turn h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
}

#turn p { color: var(--muted); }

@media (orientation: landscape) and (pointer: coarse) {
  html:not([data-world='1']) #turn {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 40;
    padding: 28px;
    text-align: center;
    background: #10140f;
    color: var(--ink);
  }

  html:not([data-world='1']) #turn [data-turn='portrait'] { display: block; }
}

@media (orientation: portrait) and (pointer: coarse) {
  html[data-world='1'] #turn {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 40;
    padding: 28px;
    text-align: center;
    background: #10140f;
    color: var(--ink);
  }

  html[data-world='1'] #turn [data-turn='landscape'] { display: block; }
}

#phone[data-mode='build'] #dock,
#phone[data-mode='bag'] #dock {
  visibility: hidden;
}

#phone[data-mode='build'] #pockets { visibility: hidden; }

#phone[data-mode='build'] #sheet { max-height: 292px; }
#phone[data-mode='build'] #prompt { bottom: calc(304px + env(safe-area-inset-bottom)); }
#phone[data-mode='build'] #stick,
#phone[data-mode='build'] #actions { bottom: calc(304px + env(safe-area-inset-bottom)); }

button.primary {
  background: linear-gradient(180deg, #f09a4e, var(--ember-deep));
  color: #2a140c;
  border-color: transparent;
}

button.primary svg { stroke: #2a140c; }

.fail {
  padding: 28px 18px;
  font-size: 15px;
  line-height: 1.45;
}

html[data-world='1'] #phone {
  width: 100vw;
  height: 100dvh;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

@media (orientation: portrait) {
  html[data-world='1'] #phone {
    width: min(100vw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100vw * 9 / 16));
  }
}

html[data-world='1'] #stick {
  left: calc(18px + env(safe-area-inset-left));
  bottom: calc(18px + env(safe-area-inset-bottom));
}

html[data-world='1'] #actions {
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  grid-template-areas: 'tool eat heal hand hit';
}

html[data-world='1'] #btn-tool,
html[data-world='1'] #btn-eat,
html[data-world='1'] #btn-heal,
html[data-world='1'] #btn-interact,
html[data-world='1'] #btn-attack {
  width: 48px;
  height: 48px;
}

html[data-world='1'] #btn-attack {
  width: 76px;
  font-size: 13px;
  box-shadow: none;
}

html[data-world='1'] #dock {
  left: 50%;
  right: auto;
  width: min(240px, calc(100% - 480px));
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
}

html[data-world='1'] #pockets {
  left: calc(12px + env(safe-area-inset-left));
  top: calc(64px + env(safe-area-inset-top));
  bottom: auto;
  grid-auto-flow: column;
}

html[data-world='1'] #radar {
  left: auto;
  right: calc(12px + env(safe-area-inset-right));
  top: calc(60px + env(safe-area-inset-top));
  width: 72px;
  height: 72px;
}

html[data-world='1'] #prompt { bottom: calc(82px + env(safe-area-inset-bottom)); }
html[data-world='1'] #work { bottom: calc(116px + env(safe-area-inset-bottom)); }

html[data-world='1'] #phone[data-mode='build'] #sheet { max-height: 42%; }

html[data-world='1'] #phone[data-mode='build'] #prompt,
html[data-world='1'] #phone[data-mode='build'] #stick,
html[data-world='1'] #phone[data-mode='build'] #actions,
html[data-world='1'] #phone[data-mode='build'] #dock {
  bottom: calc(44% + 8px);
}

/* ---------- first-person crosshair ---------- */
#cross {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
#cross[hidden] { display: none; }
#cross i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 0 0 1px rgba(20, 14, 8, 0.45), 0 0 6px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}
#cross b {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 250, 240, 0.6);
  box-shadow: 0 0 0 1px rgba(20, 14, 8, 0.2);
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.16s ease, opacity 0.16s ease, border-color 0.16s ease;
}
#cross.hot i { background: #ffd28a; transform: scale(1.2); }
#cross.hot b { opacity: 1; transform: scale(1); border-color: #ffd28a; }
#cross.swing b { opacity: 1; transform: scale(1.45); border-color: rgba(255, 250, 240, 0.85); }
#cross.build i { background: #a6e3ae; }
#cross.build b { opacity: 0.8; transform: scale(0.85); border-color: #a6e3ae; border-style: dashed; }
#phone[data-look='first'] #prompt { bottom: calc(50% - 64px); top: auto; }

/* v5 extras */
.meter.warm .ico { color: #9fd4f2; }
.meter.warm.low .ico { color: var(--blood); animation: pulse-cold 1s ease-in-out infinite; }
.meter.warm i { background: linear-gradient(90deg, #2d5f8d, #a8dcf5); }
@keyframes pulse-cold { 50% { opacity: 0.35; } }

#frost, #storm {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s linear;
}

#frost {
  background: radial-gradient(ellipse at 50% 50%, transparent 46%, rgba(200, 228, 245, 0.32) 70%, rgba(235, 248, 255, 0.85) 100%);
  box-shadow: inset 0 0 90px rgba(220, 240, 255, 0.7);
}

#storm {
  background: linear-gradient(100deg, rgba(230, 236, 240, 0) 0%, rgba(230, 236, 240, 0.35) 40%, rgba(230, 236, 240, 0.12) 70%, rgba(230, 236, 240, 0.4) 100%);
  background-size: 300% 100%;
  animation: storm-drift 3.2s linear infinite;
  mix-blend-mode: screen;
}
@keyframes storm-drift { from { background-position: 0% 0; } to { background-position: 300% 0; } }

#stamina {
  position: absolute;
  left: 50%;
  bottom: calc(138px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 160px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
#stamina i { display: block; height: 100%; width: var(--p, 100%); border-radius: inherit; background: linear-gradient(90deg, #6f9c5a, #c9e3a0); }
#stamina.show { opacity: 1; }
#stamina.tired i { background: linear-gradient(90deg, #8d2d28, #e36a62); }

#hotbar {
  position: absolute;
  left: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 4;
  display: none;
  grid-auto-flow: column;
  gap: 5px;
  padding: 5px;
  border-radius: 16px;
  background: rgba(10, 12, 10, 0.45);
  border: 1px solid var(--line);
}
#phone[data-mode='play'] #hotbar,
#phone[data-mode='build'] #hotbar { display: grid; }

.slot {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(20, 22, 20, 0.72);
  transition: background 0.15s, opacity 0.15s;
}
.slot .ico svg { width: 22px; height: 22px; }
.slot kbd { position: absolute; left: 5px; top: 2px; font: 700 9px var(--sans); color: var(--muted); }
.slot em { position: absolute; right: 4px; top: 2px; font-style: normal; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.slot em:empty { display: none; }
.slot u { position: absolute; left: 6px; right: 6px; bottom: 4px; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.15); display: none; overflow: hidden; text-decoration: none; }
.slot u i { display: block; height: 100%; width: var(--fuel, 0%); background: #ffb056; }
.slot.fuel u { display: block; }
.slot.on { background: rgba(228, 132, 58, 0.28); border-color: rgba(228, 132, 58, 0.85); }
.slot.missing { opacity: 0.36; }

#wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(circle, rgba(10, 12, 10, 0.35) 0 22%, rgba(10, 12, 10, 0.74) 23% 70%, rgba(10, 12, 10, 0) 71%);
}
#wheel[hidden] { display: none; }
.wslot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 76px;
  padding: 6px 0;
  border-radius: 14px;
  transition: transform 0.12s, background 0.12s;
}
.wslot .ico svg { width: 24px; height: 24px; }
.wslot small { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.1; }
.wslot.on { background: rgba(228, 132, 58, 0.38); transform: translate(-50%, -50%) scale(1.14); }
.wslot.on small { color: var(--ink); }
.wcenter { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 84px; font: 600 12px var(--display); color: var(--gold); text-align: center; }

#moves {
  position: absolute;
  z-index: 3;
  right: 146px;
  bottom: calc(138px + env(safe-area-inset-bottom));
  display: none;
  grid-template-columns: 46px 46px;
  gap: 8px;
}
#moves button { width: 46px; height: 46px; border-radius: 50%; }
#moves button.pressed { background: rgba(228, 132, 58, 0.3); }

#dock { grid-template-columns: 1fr 1fr 1fr 1fr 64px; }

#phone[data-mode='map'] #stick,
#phone[data-mode='map'] #actions,
#phone[data-mode='journal'] #stick,
#phone[data-mode='journal'] #actions,
#phone[data-mode='chest'] #stick,
#phone[data-mode='chest'] #actions,
#phone[data-mode='chest'] #prompt,
#phone[data-mode='chest'] #work { display: none; }

@media (pointer: coarse) {
  #phone[data-mode='play'] #moves { display: grid; }
  .slot { width: 38px; height: 38px; border-radius: 10px; }
  .slot .ico svg { width: 19px; height: 19px; }
  .slot kbd { display: none; }
  #hotbar { gap: 4px; padding: 4px; }
  #dock button .lbl { font-size: 12px; }
}

#overlay .panel.wide { width: 100%; max-width: 640px; justify-self: center; }
.ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.ph .x { width: 40px; height: 40px; border-radius: 12px; flex: none; }
#bigmap { display: block; width: min(100%, 60vh); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; touch-action: none; cursor: crosshair; }
.legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 10px 0 0; padding: 0; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; vertical-align: middle; }

.quests { list-style: none; display: grid; gap: 6px; max-height: 52vh; margin: 8px 0 0; padding: 0; overflow: auto; }
.quests li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.quests li.cur { border-color: rgba(230, 194, 122, 0.6); background: rgba(230, 194, 122, 0.1); }
.quests li.done { opacity: 0.62; }
.quests li.later { opacity: 0.45; }
.qmark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.08); }
.quests li.done .qmark { background: var(--moss); color: #13200f; }
.quests li.cur .qmark { background: var(--gold); color: #2a1d08; }
.quests strong { font-size: 14px; }
.quests p { margin: 3px 0 0; font-size: 12px; color: #ddd6cb; }
.quests small { display: block; margin-top: 3px; font-size: 11px; color: var(--gold); }
.quests em { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.settings { display: grid; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); max-width: 420px; }
.settings label { display: grid; gap: 6px; font-size: 13px; }
.settings label span { display: flex; justify-content: space-between; gap: 10px; }
.settings label.check { grid-template-columns: auto 1fr; align-items: center; }
#overlay .settings input { width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--ember); }
#overlay .settings input[type='checkbox'] { width: 20px; height: 20px; }

.chest-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 2px 8px; }
.chest-cols h3 { margin: 0 0 6px; font: 600 13px var(--display); color: var(--gold); }
.chest-cols section { display: grid; gap: 5px; align-content: start; max-height: 46vh; overflow: auto; }
.chest-cols .empty { margin: 4px 0; font-size: 12px; color: var(--muted); }
.crow { display: grid; grid-template-columns: 22px 1fr auto 38px 58px; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); font-size: 13px; }
.crow .ico svg { width: 18px; height: 18px; }
.crow b { font-variant-numeric: tabular-nums; }
.crow button { height: 30px; border-radius: 9px; font-size: 12px; font-weight: 700; }

/* ===== v6 ===== */
.menu6 { display: grid; gap: 6px; margin: 10px 0 12px; }
.menu6 .fine { margin: 4px 0 0; opacity: .75; font-size: 12px; }
.chips6 { display: flex; flex-wrap: wrap; gap: 6px; }
.chip6 { display: grid; gap: 2px; padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(20,28,40,.55); color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.chip6 small { opacity: .65; font-size: 11px; }
.chip6.on { border-color: #ffcf7a; background: rgba(255,190,90,.18); box-shadow: 0 0 0 1px #ffcf7a inset; }
.h6 { margin: 14px 0 6px; font-size: 14px; letter-spacing: .02em; opacity: .9; }
.gear6s { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.gear6 { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gear6 small { opacity: .7; font-size: 11px; }
.gear6 em { font-style: normal; font-size: 11px; color: #ffcf7a; }
.gear6.on { border-color: #9fe0a0; background: rgba(120,220,130,.14); }
.gear6.on em { color: #9fe0a0; }
.gear6.poor { opacity: .45; }
.dog6 .fine { margin: 0 0 6px; font-size: 12px; opacity: .8; }
.row6 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.row6 input, .row6 select { flex: 1 1 90px; min-width: 0; padding: 7px 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.35); color: inherit; font: inherit; font-size: 13px; }
.row6 input[type=number] { flex: 0 0 64px; }
.row6 button { padding: 7px 12px; border-radius: 8px; border: 0; background: #ffcf7a; color: #2a1d08; font: inherit; font-weight: 600; cursor: pointer; }
.emo6 { font-style: normal; font-size: 20px; }
.achs6 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ach6 { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,.04); opacity: .55; }
.ach6 b { color: #ffcf7a; }
.ach6 small { display: block; opacity: .7; font-size: 11px; }
.ach6.on { opacity: 1; background: rgba(255,200,100,.12); }
.goals6 { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.goals6 li { display: flex; justify-content: space-between; padding: 6px 9px; border-radius: 8px; background: rgba(255,255,255,.05); font-size: 13px; }
.goals6 li em { font-style: normal; opacity: .8; }
.goals6 li.on { background: rgba(120,220,130,.16); }
#hud6 { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 54px); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 92%; pointer-events: none; z-index: 6; }
#hud6 span { padding: 3px 9px; border-radius: 999px; background: rgba(8,12,20,.55); backdrop-filter: blur(6px); font-size: 12px; color: #eef3ff; white-space: nowrap; }
#tut6 { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: rgba(16,24,38,.82); border: 1px solid rgba(255,207,122,.5); color: #fff; font-size: 13px; z-index: 7; max-width: 92%; }
#tut6 b { color: #ffcf7a; white-space: nowrap; }
#tut6 button { border: 0; border-radius: 8px; padding: 5px 9px; background: rgba(255,255,255,.12); color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
#chat6 { position: absolute; left: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); width: min(360px, 80%); display: none; gap: 6px; z-index: 8; }
#chat6.recent, #chat6.open { display: grid; }
#chat6 .log6 p { margin: 2px 0; padding: 3px 8px; border-radius: 8px; background: rgba(0,0,0,.45); font-size: 13px; color: #fff; width: fit-content; max-width: 100%; }
#chat6 .emo6row, #chat6 input { display: none; }
#chat6.open .emo6row { display: flex; gap: 4px; }
#chat6.open input { display: block; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.6); color: #fff; font: inherit; }
#chat6 .emo6row button { border: 0; border-radius: 8px; padding: 4px 8px; font-size: 18px; background: rgba(0,0,0,.5); cursor: pointer; }
#chat6:not(.open) { pointer-events: none; }

#hud6[hidden], #tut6[hidden], #chat6[hidden] { display: none !important; }

/* ===== v6.2: телефон горизонтально — интерфейс не закрывает обзор ===== */
.chip[hidden] { display: none !important; }

html[data-world='1'] #dock {
  width: auto;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: auto;
}
html[data-world='1'] #dock button { white-space: nowrap; }

@media (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
  html[data-world='1'] {
    --sl: env(safe-area-inset-left, 0px);
    --sr: env(safe-area-inset-right, 0px);
    --st: env(safe-area-inset-top, 0px);
    --sb: env(safe-area-inset-bottom, 0px);
    --b: 40px;
    --hit: 62px;
    --g: 6px;
    --side: 172px;
  }

  /* верхняя полоса */
  html[data-world='1'] #hud { padding: calc(6px + var(--st)) calc(10px + var(--sr)) 0 calc(10px + var(--sl)); gap: 6px;  align-items: start; }
  html[data-world='1'] .clock-block strong { font-size: 12px; }
  html[data-world='1'] .clock-block span { font-size: 10px; }
  html[data-world='1'] #cycle { width: 72px; margin-top: 3px; }
  html[data-world='1'] .meters { min-width: 100px; gap: 3px; }
  html[data-world='1'] .meter { grid-template-columns: 12px 1fr auto; gap: 4px; }
  html[data-world='1'] .meter .ico svg { width: 11px; height: 11px; }
  html[data-world='1'] .meter b { height: 5px; }
  html[data-world='1'] .meter em { font-size: 10px; }
  html[data-world='1'] #btn-look, html[data-world='1'] #btn-pause { width: 34px; height: 34px; border-radius: 11px; }
  html[data-world='1'] #btn-look svg, html[data-world='1'] #btn-pause svg { width: 17px; height: 17px; }

  /* меню — маленькие иконки сверху по центру */
  html[data-world='1'] #dock,
  html[data-world='1'] #phone[data-mode='build'] #dock {
    top: calc(6px + var(--st));
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    gap: 5px;
  }
  html[data-world='1'] #dock button { width: 38px; height: 34px; padding: 0; border-radius: 11px; position: relative; }
  html[data-world='1'] #dock button .lbl { display: none; }
  html[data-world='1'] #dock button svg { width: 18px; height: 18px; }

  /* ресурсы, погода, радар, подсказки */
  html[data-world='1'] #pockets { top: calc(58px + var(--st)); left: calc(10px + var(--sl)); gap: 3px; opacity: 0.9; }
  html[data-world='1'] .chip { min-width: 0; padding: 1px 6px 1px 3px; font-size: 10px; gap: 3px; }
  html[data-world='1'] .chip svg { width: 12px; height: 12px; }
  html[data-world='1'] #hud6 { top: calc(46px + var(--st)); gap: 4px; max-width: 44%; }
  html[data-world='1'] #hud6 span { padding: 2px 7px; font-size: 10px; }
  html[data-world='1'] #radar { top: calc(46px + var(--st)); right: calc(10px + var(--sr)); width: 58px; height: 58px; opacity: 0.9; }
  html[data-world='1'] #coach {
    top: calc(70px + var(--st)); left: 50%; right: auto; transform: translateX(-50%);
    width: max-content; max-width: 42%; padding: 3px 10px; border-radius: 10px;
    background: rgba(10, 12, 10, 0.45); font-size: 11px; text-align: center;
  }
  html[data-world='1'] #coach:empty { display: none; }
  html[data-world='1'] #toast { top: calc(96px + var(--st)); font-size: 12px; padding: 5px 10px; }
  html[data-world='1'] #banner { top: 22%; font-size: 18px; }
  html[data-world='1'] #tut6 {
    left: calc(10px + var(--sl)); right: auto; bottom: calc(132px + var(--sb)); transform: none;
    max-width: min(300px, 34%); flex-wrap: wrap; gap: 4px 8px; padding: 6px 9px; font-size: 11px; opacity: 0.92;
  }
  html[data-world='1'] #tut6 button { padding: 3px 7px; font-size: 10px; }
  html[data-world='1'] #chat6 { left: calc(10px + var(--sl)); top: calc(70px + var(--st)); bottom: auto; width: min(300px, 36%); }
  html[data-world='1'] #chat6 .log6 p { font-size: 11px; padding: 2px 7px; }

  /* джойстик */
  html[data-world='1'] #stick { left: calc(14px + var(--sl)); bottom: calc(12px + var(--sb)); opacity: 0.85; }

  /* кнопки действий — компактно в правом нижнем углу */
  html[data-world='1'] #actions {
    right: calc(12px + var(--sr));
    bottom: calc(12px + var(--sb));
    grid-template-areas: 'eat heal tool' 'hand hand hit';
    grid-template-columns: var(--b) var(--b) var(--hit);
    grid-template-rows: var(--b) var(--hit);
    gap: var(--g);
    justify-items: center;
    align-items: center;
  }
  html[data-world='1'] #btn-tool,
  html[data-world='1'] #btn-eat,
  html[data-world='1'] #btn-heal { width: var(--b); height: var(--b); border-radius: 13px; }
  html[data-world='1'] #btn-interact { width: 100%; height: var(--hit); border-radius: 18px; }
  html[data-world='1'] #actions svg { width: 19px; height: 19px; }
  html[data-world='1'] #btn-attack {
    width: var(--hit); height: var(--hit); border-radius: 50%; gap: 0;
    font-size: 10px; white-space: nowrap; overflow: hidden;
  }
  html[data-world='1'] #btn-attack svg { width: 22px; height: 22px; }
  html[data-world='1'] #actions .badge { top: -3px; right: -3px; min-width: 14px; height: 14px; font-size: 9px; }

  /* прыжок / бег / присесть / факел — ряд над кнопками действий */
  html[data-world='1'] #moves {
    right: calc(12px + var(--sr));
    bottom: calc(22px + var(--sb) + var(--b) + var(--hit) + var(--g));
    grid-template-columns: repeat(4, var(--b));
    gap: var(--g);
  }
  html[data-world='1'] #moves button { width: var(--b); height: var(--b); }
  html[data-world='1'] #moves svg { width: 18px; height: 18px; }

  /* пояс — внизу по центру, между джойстиком и кнопками */
  html[data-world='1'] #hotbar {
    left: calc(var(--side) + var(--sl));
    right: calc(var(--side) + var(--sr));
    bottom: calc(8px + var(--sb));
    transform: none;
    justify-content: center;
    grid-auto-columns: minmax(24px, 34px);
    gap: 3px;
    padding: 0;
    background: none;
    border: 0;
  }
  html[data-world='1'] .slot { width: 100%; height: auto; aspect-ratio: 1; border-radius: 9px; }
  html[data-world='1'] .slot .ico svg { width: 17px; height: 17px; }
  html[data-world='1'] .slot em { font-size: 9px; right: 3px; top: 1px; }

  html[data-world='1'] #stamina { bottom: calc(50px + var(--sb)); width: 120px; }
  html[data-world='1'] #prompt { bottom: calc(58px + var(--sb)); max-width: 40%; padding: 5px 10px; font-size: 12px; }
  html[data-world='1'] #work { bottom: calc(92px + var(--sb)); }

  /* стройка: панель внизу по центру, управление остаётся по углам */
  html[data-world='1'] #phone[data-mode='build'] #hotbar { display: none; }
  html[data-world='1'] #phone[data-mode='build'] #sheet {
    left: calc(var(--side) + var(--sl));
    right: calc(var(--side) + var(--sr));
    bottom: calc(8px + var(--sb));
    max-height: 46%;
    padding: 10px 10px 10px;
    border-radius: 18px;
    border: 1px solid var(--line);
  }
  html[data-world='1'] #phone[data-mode='build'] #stick,
  html[data-world='1'] #phone[data-mode='build'] #actions { bottom: calc(12px + var(--sb)); }
  html[data-world='1'] #phone[data-mode='build'] #prompt { bottom: calc(46% + 16px + var(--sb)); }
  html[data-world='1'] #phone[data-mode='build'] .cards { grid-auto-columns: 128px; }
  html[data-world='1'] #sheet h2 { font-size: 15px; }

  /* мешок и другие окна — не выше 70% экрана */
  html[data-world='1'] #sheet { max-height: 70%; padding: 10px 12px calc(10px + var(--sb)); }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 360px) {
  html[data-world='1'] { --b: 36px; --hit: 56px; --g: 5px; --side: 160px; }
  html[data-world='1'] #hud6 { display: none; }
}

#work[hidden] { display: none !important; }

@media (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
  html[data-world='1'] #phone[data-mode='build'] #tut6 { top: calc(84px + var(--st)); bottom: auto; }
  html[data-world='1'] #phone[data-mode='build'] #sheet { overflow: auto; }
  html[data-world='1'] #phone[data-mode='build'] #sheet header { margin-bottom: 6px; }
  html[data-world='1'] #phone[data-mode='build'] .card { padding: 7px 9px; }
  html[data-world='1'] #phone[data-mode='build'] .sheet-actions { margin-top: 6px; }
  html[data-world='1'] #phone[data-mode='build'] .sheet-actions button { min-height: 36px; padding: 6px 14px; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 360px) {
  html[data-world='1'] #phone[data-mode='build'] #sheet { max-height: 52%; }
  html[data-world='1'] #phone[data-mode='build'] #prompt { bottom: calc(52% + 14px + var(--sb)); }
}


/* ===== v7: горизонтальное меню, окна всегда закрываются, новые кнопки ===== */
[hidden] { display: none !important; }

/* Меню, серверы и подтверждение — во весь экран, а не узкой вертикальной карточкой. */
#phone[data-mode='menu'],
#phone[data-mode='servers'],
#phone[data-mode='confirm'],
#phone[data-mode='pause'],
#phone[data-mode='dead'],
#phone[data-mode='victory'] {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Телефон: вся игра горизонтальная — просьбу «поверните вертикально» больше не показываем. */
@media (orientation: landscape) and (pointer: coarse) {
  html:not([data-world='1']) #turn { display: none; }
}
@media (orientation: portrait) and (pointer: coarse) {
  html:root #turn {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 40;
    padding: 28px;
    text-align: center;
    background: #10140f;
    color: var(--ink);
  }
  html:root #turn [data-turn='landscape'] { display: block; }
  html:root #turn [data-turn='portrait'] { display: none; }
}

/* Окна не уезжают за верх экрана: если не влезают — прокручиваются, крестик всегда достижим. */
#overlay { align-content: safe end; }
#phone[data-mode='menu'] #overlay,
#phone[data-mode='servers'] #overlay,
#phone[data-mode='confirm'] #overlay,
#phone[data-mode='pause'] #overlay,
#phone[data-mode='dead'] #overlay,
#phone[data-mode='victory'] #overlay,
#phone[data-mode='map'] #overlay,
#phone[data-mode='journal'] #overlay {
  align-content: safe center;
  overscroll-behavior: contain;
}
#phone[data-mode='menu'] #overlay {
  background: radial-gradient(120% 100% at 28% 50%, rgba(8, 10, 9, 0.9) 0%, rgba(8, 10, 9, 0.62) 58%, rgba(8, 10, 9, 0.38) 100%);
}
/* Тап мимо карты или журнала закрывает их. */
#phone[data-mode='map'] #overlay,
#phone[data-mode='journal'] #overlay { pointer-events: auto; }
#overlay .panel.wide {
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
#overlay .panel.wide > .ph {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(16, 19, 16, 0.96);
}
#overlay .ph .x,
html:root #sheet .x { width: 44px; height: 44px; border-radius: 14px; flex: none; }
html:root #sheet header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(14, 16, 14, 0.97);
}

/* Большая кнопка «закрыть» в углу для мешка, стройки, сундука, карты и журнала. */
#close7 {
  display: none;
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 30;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: radial-gradient(circle at 35% 30%, rgba(74, 78, 70, 0.96), rgba(18, 20, 18, 0.96));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #f3ede2;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#close7 svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
#close7:active { transform: scale(0.92); }
#phone[data-mode='bag'] #close7,
#phone[data-mode='build'] #close7,
#phone[data-mode='chest'] #close7,
#phone[data-mode='map'] #close7,
#phone[data-mode='journal'] #close7 { display: grid; }
#phone[data-mode='bag'] #radar,
#phone[data-mode='build'] #radar,
#phone[data-mode='chest'] #radar,
#phone[data-mode='map'] #radar,
#phone[data-mode='journal'] #radar { visibility: hidden; }
/* Панель-меню видна и при открытом мешке/стройке: повторное нажатие закрывает окно. */
html #phone[data-mode='build'] #dock,
html #phone[data-mode='bag'] #dock { visibility: visible; }

/* Кнопки меню */
#overlay .stack7 { display: grid; gap: 9px; }
#overlay .row7 { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 9px; }
#overlay .stack7 button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(64, 70, 62, 0.92), rgba(30, 34, 30, 0.94));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: var(--ink);
  font: 700 14px/1.15 var(--sans);
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#overlay .stack7 button:hover { border-color: rgba(255, 196, 120, 0.45); filter: brightness(1.08); }
#overlay .stack7 button:active {
  transform: translateY(1px) scale(0.975);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#overlay .stack7 button:focus-visible { outline: 2px solid #ffc46e; outline-offset: 2px; }
#overlay .stack7 button.primary {
  border-color: rgba(255, 190, 110, 0.6);
  background: linear-gradient(180deg, #ffb35a 0%, #f07a2c 55%, #c9531c 100%);
  color: #2a1408;
  box-shadow: 0 10px 26px rgba(240, 122, 44, 0.35), inset 0 1px 0 rgba(255, 240, 210, 0.55);
}
#overlay .stack7 .big7 { min-height: 58px; padding: 10px 18px; font-size: 16px; justify-content: flex-start; }
#overlay .stack7 .big7 small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; opacity: 0.75; }
#overlay .stack7 .ghost-btn { background: rgba(20, 22, 20, 0.55); }
#overlay .row7 button { justify-content: center; text-align: center; font-size: 13px; padding: 9px 10px; }
#overlay .row7 button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#overlay .stack7 svg,
#overlay .best7 svg { flex: none; width: 20px; height: 20px; }
.i7 { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
#overlay .best7 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 170, 80, 0.12);
  border: 1px solid rgba(255, 170, 80, 0.32);
  color: #ffd7a8;
  font-size: 13px;
  font-weight: 600;
}
#overlay .best7 b { color: #fff1dc; }

/* Слоты сохранения и сложность */
#overlay .menu6 .fine { margin: 10px 0 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#overlay .chips6 { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 7px; }
#overlay .chip6 {
  min-height: 44px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(48, 52, 47, 0.88), rgba(24, 27, 24, 0.9));
  color: var(--ink);
  font: 700 13px/1.1 var(--sans);
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
#overlay .chip6 small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
#overlay .chip6.on {
  border-color: rgba(255, 190, 110, 0.85);
  background: linear-gradient(180deg, rgba(126, 76, 34, 0.94), rgba(72, 42, 20, 0.94));
  box-shadow: 0 0 0 1px rgba(255, 190, 110, 0.35), 0 6px 16px rgba(240, 122, 44, 0.25);
}
#overlay .chip6.on small { color: #ffd9ae; }
#overlay .chip6:active { transform: scale(0.96); }

/* Горизонтальная раскладка: слева текст, справа кнопки */
#overlay .panel.menu7,
#overlay .panel.two7 {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3.2vw, 44px);
  width: min(1060px, 100%);
  max-width: none;
  justify-self: center;
  max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
#overlay .panel.two7 { width: min(880px, 100%); }
#overlay .m7-info,
#overlay .m7-act { min-width: 0; }
#overlay .m7-act { display: grid; gap: 12px; align-content: center; }
#overlay .m7-info .stack7 { margin-top: 14px; }
@media (max-aspect-ratio: 1/1) {
  #overlay .panel.menu7,
  #overlay .panel.two7 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 520px) {
  #overlay .panel.menu7,
  #overlay .panel.two7 { padding-top: 14px; padding-bottom: 14px; }
  #overlay .panel.menu7 h1 { font-size: 40px; line-height: 1; }
  #overlay .panel.two7 h1.small { font-size: 26px; }
  #overlay .panel.menu7 .lede,
  #overlay .panel.two7 .lede { font-size: 13px; line-height: 1.35; margin-top: 6px; }
  #overlay .panel.menu7 .rules { margin-top: 8px; font-size: 11.5px; line-height: 1.32; }
  #overlay .stack7 button { min-height: 42px; padding: 8px 12px; }
  #overlay .stack7 .big7 { min-height: 50px; font-size: 15px; }
  #overlay .chip6 { min-height: 38px; padding: 5px 6px; font-size: 12px; }
  #overlay .menu6 .fine { margin: 6px 0 4px; }
}

/* Панель-меню в игре: стеклянные кнопки, открытое окно подсвечено */
html[data-world='1'] #dock button {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(56, 60, 54, 0.84), rgba(22, 25, 22, 0.88));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.12s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
html[data-world='1'] #dock button.on {
  border-color: rgba(255, 190, 110, 0.85);
  background: linear-gradient(180deg, rgba(240, 140, 60, 0.96), rgba(190, 86, 30, 0.96));
  color: #2a1408;
  box-shadow: 0 0 0 1px rgba(255, 190, 110, 0.35), 0 6px 18px rgba(240, 122, 44, 0.35);
}
html[data-world='1'] #dock button:active { transform: scale(0.93); }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
  html[data-world='1'] #dock button { width: 40px; height: 36px; border-radius: 12px; }
}


/* ===== v7.1: правки после проверки скриншотами ===== */
/* Подсказка действия не просвечивает сквозь окна. */
#phone[data-mode='pause'] #prompt,
#phone[data-mode='dead'] #prompt,
#phone[data-mode='victory'] #prompt,
#phone[data-mode='map'] #prompt,
#phone[data-mode='journal'] #prompt,
#phone[data-mode='chest'] #prompt,
#phone[data-mode='confirm'] #prompt { visibility: hidden; }

/* У карты и журнала свой крестик в шапке — второй крестик в углу на узких экранах налезал на него. */
html #phone[data-mode='map'] #close7,
html #phone[data-mode='journal'] #close7 { display: none; }

/* Угловой крестик больше не лежит поверх кнопок «вид» и «пауза». */
#phone[data-mode='bag'] #btn-look,
#phone[data-mode='bag'] #btn-pause,
#phone[data-mode='build'] #btn-look,
#phone[data-mode='build'] #btn-pause,
#phone[data-mode='chest'] #btn-look,
#phone[data-mode='chest'] #btn-pause { visibility: hidden; }

/* Шапки окон без тёмной полосы: фон общий с окном, прокрученное под шапкой размывается. */
#overlay .panel.wide > .ph,
html:root #sheet header {
  background: transparent;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Компьютер: мешок и сундук открываются снизу — панель-меню на это время уезжает наверх. */
@media (pointer: fine) {
  html[data-world='1'] #phone[data-mode='bag'] #dock,
  html[data-world='1'] #phone[data-mode='chest'] #dock {
    top: calc(12px + env(safe-area-inset-top));
    bottom: auto;
  }
  #phone[data-mode='bag'] #coach,
  #phone[data-mode='chest'] #coach { visibility: hidden; }
}

/* Меню на низком экране телефона: влезает без прокрутки. */
@media (max-height: 520px) {
  #phone[data-mode='menu'] #overlay,
  #phone[data-mode='servers'] #overlay {
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}
@media (max-height: 420px) {
  #overlay .panel.menu7,
  #overlay .panel.two7 { padding-top: 10px; padding-bottom: 10px; }
  #overlay .m7-act { gap: 8px; }
  #overlay .stack7 { gap: 7px; }
  #overlay .stack7 .big7 { min-height: 46px; padding-top: 7px; padding-bottom: 7px; }
  #overlay .stack7 .big7 small { margin-top: 1px; font-size: 10.5px; }
  #overlay .menu6 .fine { margin: 4px 0 3px; font-size: 10px; }
  #overlay .chip6 { min-height: 34px; padding: 4px 5px; }
  #overlay .chip6 small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.15;
  }
  #overlay .panel.menu7 h1 { font-size: 34px; }
  #overlay .panel.menu7 .lede { font-size: 12.5px; line-height: 1.32; }
  #overlay .panel.menu7 .rules { font-size: 11px; line-height: 1.28; }
  #overlay .panel.menu7 .best7 { margin-top: 7px; padding: 4px 10px; font-size: 12px; }
}
@media (max-height: 370px) {
  #overlay .stack7 .big7 small { display: none; }
  #overlay .panel.menu7 .rules > :nth-child(n+3) { display: none; }
}
/* Ряд кнопок: «Весь экран» — квадратная иконка, остальные подписи не обрезаются. */
@media (max-width: 1000px) {
  #overlay .row7 { display: flex; }
  #overlay .row7 > button { flex: 1 1 0; min-width: 0; }
  #overlay .row7 > button[data-act='full'] { flex: 0 0 48px; width: 48px; padding: 0; }
  #overlay .row7 > button[data-act='full'] span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Карта и журнал на телефоне не залезают под верхнюю панель. */
@media (max-height: 540px) {
  #phone[data-mode='map'] #overlay,
  #phone[data-mode='journal'] #overlay {
    padding-top: calc(50px + env(safe-area-inset-top));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  #phone[data-mode='map'] #overlay .panel.wide,
  #phone[data-mode='journal'] #overlay .panel.wide {
    max-height: calc(100dvh - 58px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}
/* Горизонтальный экран: карта слева, легенда справа — без прокрутки. */
@media (orientation: landscape) and (max-height: 540px) {
  #overlay .panel.map-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 20px;
    align-items: center;
  }
  #overlay .map-panel > .ph { grid-column: 1 / -1; grid-row: 1; margin-bottom: 6px; }
  #overlay .map-panel > #bigmap { grid-column: 1; grid-row: 2 / 4; width: min(46vw, calc(100dvh - 160px)); margin: 0; }
  #overlay .map-panel > .legend {
    grid-column: 2;
    grid-row: 2;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-self: end;
    margin: 0;
  }
  #overlay .map-panel > p { grid-column: 2; grid-row: 3; align-self: start; margin: 10px 0 0; }

  /* Стройка: «Поворот» и «Поставить» справа от карточек — всегда видны, без прокрутки. */
  #phone[data-mode='build'] #sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'head head' 'cards act' 'note act';
    grid-template-rows: auto auto 1fr;
    column-gap: 10px;
    align-content: start;
  }
  #phone[data-mode='build'] #sheet > header { grid-area: head; margin-bottom: 6px; }
  #phone[data-mode='build'] #sheet > .cards { grid-area: cards; min-width: 0; }
  #phone[data-mode='build'] #sheet > #build-note { grid-area: note; margin: 4px 0 0; }
  html[data-world='1'] #phone[data-mode='build'] #sheet > .sheet-actions {
    grid-area: act;
    grid-template-columns: none;
    grid-auto-flow: row;
    align-content: start;
    gap: 6px;
    margin: 0;
  }
  html[data-world='1'] #phone[data-mode='build'] #sheet > .sheet-actions button {
    min-height: 38px;
    padding: 6px 12px;
    white-space: nowrap;
  }
}


/* ===== v7.1b: узкий телефон — подписи в ряду кнопок и кнопки стройки ===== */
@media (max-width: 800px) {
  #overlay .row7 { gap: 7px; }
  #overlay .row7 > button:not([data-act='full']) { gap: 5px; padding-left: 6px; padding-right: 6px; font-size: 12.5px; }
  #overlay .row7 > button:not([data-act='full']) svg { width: 15px; height: 15px; flex: none; }
}
@media (orientation: landscape) and (max-height: 540px) {
  html[data-world='1'] #phone[data-mode='build'] #sheet > .sheet-actions button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  html[data-world='1'] #phone[data-mode='build'] #sheet > .sheet-actions button svg { width: 18px; height: 18px; flex: none; }
}

/* ===== v9 · реклама и установка ===== */
#overlay .stack7 button.reward7 {
  border-color: rgba(255, 214, 140, 0.5);
  background: linear-gradient(180deg, rgba(92, 74, 36, 0.95), rgba(46, 37, 20, 0.96));
  color: #ffe9c2;
}
#overlay .stack7 button.reward7 svg { color: #ffc46e; }

.ad-wait7 {
  position: absolute;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 24px);
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 196, 120, 0.35);
  background: rgba(14, 18, 16, 0.94);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  color: var(--ink);
  font: 600 13px/1.2 var(--sans);
  white-space: nowrap;
  transform: translateX(-50%);
}
.ad-wait7 button,
.ad-row7 button {
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 190, 110, 0.6);
  background: linear-gradient(180deg, #ffb35a 0%, #f07a2c 55%, #c9531c 100%);
  color: #2a1408;
  font: 700 13px/1 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
}
.ad-dot7 {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffb35a;
  animation: ad-pulse7 1s ease-in-out infinite;
}
@keyframes ad-pulse7 { 50% { opacity: 0.25; transform: scale(0.7); } }

.ad-test7 {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(5, 7, 6, 0.9);
  backdrop-filter: blur(6px);
}
.ad-card7 {
  width: min(420px, 100%);
  padding: 16px 18px 14px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 196, 120, 0.55);
  background: linear-gradient(180deg, #1d2420, #121714);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  color: var(--ink);
  font-family: var(--sans);
  text-align: center;
}
.ad-card7 b { display: block; margin: 4px 0 6px; font-size: 17px; line-height: 1.25; }
.ad-card7 p { margin: 0; font-size: 13px; line-height: 1.4; opacity: 0.85; }
.ad-card7 p.ad-tag7 { opacity: 1; }
.ad-tag7 { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffc46e; }
.ad-bar7 { height: 6px; margin: 14px 0 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ad-bar7 i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ffb35a, #f07a2c); }
.ad-row7 { display: flex; gap: 8px; }
.ad-row7 button { flex: 1; min-height: 42px; font-size: 14px; }
.ad-row7 .ad-skip7 { flex: 0 0 auto; border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.ad-row7 button:disabled { opacity: 0.5; filter: grayscale(0.5); cursor: default; }

.ad-slot7 {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(728px, calc(100% - 24px));
  min-height: 50px;
  max-height: 96px;
  overflow: hidden;
  border-radius: 10px;
  transform: translateX(-50%);
}
.ad-slot7[hidden],
#phone:not([data-mode='menu']) .ad-slot7 { display: none; }
.ad-slot7.ad-fake7 {
  width: min(340px, calc(100% - 24px));
  border: 1px dashed rgba(255, 196, 120, 0.5);
  background: rgba(14, 18, 16, 0.82);
  color: var(--ink);
  font: 600 12px/1.2 var(--sans);
}
#phone[data-banner][data-mode='menu'] #overlay { padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
/* низкий экран (телефон лёжа) — баннер не показываем, меню важнее */
@media (max-height: 519px) {
  .ad-slot7 { display: none !important; }
  #phone[data-banner][data-mode='menu'] #overlay { padding-top: calc(28px + env(safe-area-inset-top)); }
}

/* ======================= v10: настройки, рекорды, подарок дня, геймпад, обучение ======================= */
/* заставка: кнопок стало больше — второй ряд вместо сжатых надписей */
#overlay .menu7 .row7 { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }

/* настройки */
#overlay .set10 { max-width: none; }
#overlay .set10-panel .settings { margin-top: 0; padding-top: 0; border-top: 0; }
#overlay .set10-row { display: grid; gap: 7px; font-size: 13px; justify-items: start; }
#overlay .chips10 { display: flex; flex-wrap: wrap; gap: 6px; }
#overlay .chip10 {
  width: auto;
  min-height: 34px;
  margin: 0;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(20, 22, 20, 0.55);
  color: var(--ink);
  font: 600 13px/1.1 var(--sans);
  cursor: pointer;
}
#overlay .chip10:hover { border-color: rgba(255, 196, 120, 0.45); }
#overlay .chip10.on { border-color: var(--ember); background: rgba(228, 132, 58, 0.24); color: #fff1dc; }
#overlay .fine { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
#overlay .pad10 { opacity: 0.85; }
#overlay .set10-panel .m7-act,
#overlay .lead10-panel .m7-act { align-content: start; max-height: min(70vh, 520px); overflow: auto; overscroll-behavior: contain; padding-right: 4px; }

/* фокус геймпада в меню и окнах */
.pad-focus10 { outline: 3px solid #ffc46e !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px rgba(255, 196, 110, 0.2) !important; }

/* подарок дня */
#overlay .daily10 { display: grid; gap: 9px; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(230, 194, 122, 0.35); border-radius: 14px; background: rgba(230, 194, 122, 0.08); }
#overlay .daily10 .kicker { margin: 0; }
#overlay .daily10 .stack7 { margin: 0; }
#overlay .gift10 { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 600; }
#overlay .gi10 { display: inline-flex; align-items: center; gap: 6px; }
#overlay .gi10 svg,
#overlay .gi10 img { width: 20px; height: 20px; }
#overlay .gi10 .emo6 { font-size: 17px; font-style: normal; line-height: 20px; }

/* заставка: достижения, облако, короткие сообщения */
#overlay .ach10 { margin-top: 6px; }
#overlay .cloud10,
#overlay .note10 { margin-top: 8px; }
#overlay .note10 { color: var(--gold); }
#overlay .link10 { display: inline; width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--gold); font: inherit; text-decoration: underline; cursor: pointer; }

/* таблица рекордов */
#overlay .board10 { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
#overlay .board10 li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(20, 22, 20, 0.5); font-size: 13px; }
#overlay .board10 li b { color: var(--gold); font-family: var(--display); font-size: 12px; }
#overlay .board10 li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#overlay .board10 li em { font-style: normal; color: var(--muted); white-space: nowrap; }
#overlay .board10 li.me { outline: 1px solid var(--ember); background: rgba(228, 132, 58, 0.16); }

/* счётчик кадров */
#fps10 { position: absolute; top: calc(6px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 30; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.45); color: #d8f5c8; font: 700 11px/1.3 ui-monospace, Menlo, Consolas, monospace; pointer-events: none; }
#fps10[hidden] { display: none; }

/* обучение: подсказка под устройство и полоска прогресса */
#tut6 small { display: block; margin-top: 2px; font-size: 11px; opacity: 0.8; }
#tut6 .tut-bar10 { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
#tut6 .tut-bar10 u { display: block; height: 100%; background: #ffcf7a; text-decoration: none; transition: width 0.4s ease; }

/* v11: same warm utilitarian game UI, touch-friendly controls */
.level11 {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 12px;font-size:14px}
.level11 button {min-height:44px;padding:8px 14px}
.level11 button[aria-pressed="true"] {border-color:#d3ae72;background:#51462f}
#compass11 {position:absolute;left:50%;bottom:102px;transform:translateX(-50%);pointer-events:none;background:rgba(20,29,22,.88);color:#f3eddf;border:1px solid #7b8569;padding:7px 12px;border-radius:8px;font:600 14px/1.4 system-ui;white-space:nowrap;z-index:12;max-width:calc(100% - 32px)}
#compass11[hidden],#camp11-button[hidden]{display:none}
#camp11-button{min-width:44px;min-height:44px;font:700 14px system-ui}
#phone[data-mode="camp"] #overlay {pointer-events:auto;align-content:center}
#phone[data-mode="camp"] #stick,#phone[data-mode="camp"] #actions{display:none}
.camp11-panel {max-height:calc(100% - 24px);overflow:auto}
.camp11-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}
.camp11-actions button {min-height:48px;white-space:normal}
.mark11 {display:flex;align-items:center;gap:12px;font:600 14px/1.5 system-ui;margin:12px 0}
#overlay .mark11 input {min-width:0;width:180px;min-height:44px;margin:0}
@media(max-width:600px){.camp11-actions{grid-template-columns:1fr}.mark11{flex-wrap:wrap}#compass11{bottom:88px;font-size:12px;padding:6px 8px;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}}

#load11{position:fixed;inset:0;z-index:999999;background:#111b14;color:#efeade;display:grid;place-items:center;padding:24px;box-sizing:border-box;font:16px/1.6 system-ui}#load11>div{max-width:560px}#load11 h1{font:700 clamp(40px,10vw,68px)/1.1 system-ui;margin:24px 0}#load11-text{border-top:1px solid #58634a;padding-top:24px}#load11 p:first-child{letter-spacing:.2em;font-size:14px;color:#b4c4aa}
html:root #phone[data-mode="camp"]{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;border:0;border-radius:0}
html:has(#phone[data-mode="camp"]) #turn{display:none!important}
.camp11-panel>button{min-height:48px;padding:10px 18px;border:1px solid #58634a;border-radius:8px;background:#26352a;color:#f3eddf;margin-top:12px}
.camp11-panel .fine{font:14px/1.5 system-ui;margin:20px 0 8px}.camp11-panel .kicker{font-size:14px}

#tools12{position:absolute;right:12px;top:140px;z-index:12;display:flex;flex-direction:column;gap:8px}#tools12 button,.storage12 button,.journey12 button{min-height:44px;padding:10px 14px;border:1px solid #58634a;border-radius:8px;background:#17241c;color:#f4eddf;font:14px/1.4 system-ui}#tools12.talking #ptt12{background:#356047;outline:2px solid #a5d6b2}#status12{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:7;max-width:65%;font:14px/1.5 system-ui;padding:4px 10px;border-radius:8px;background:#101912df;color:#f7efdc;pointer-events:none;text-align:center}#status12:empty{display:none}
html:root #phone[data-mode="journey12"]{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;border:0;border-radius:0}html:has(#phone[data-mode="journey12"]) #turn{display:none!important}#phone[data-mode="journey12"] #overlay{background:#172219;place-content:center;pointer-events:auto;overflow:auto;display:grid;padding:20px}#phone[data-mode="journey12"] :is(#hud,#hud6,#dock,#stick,#actions,#pockets,#prompt,#radar,#coach){display:none!important}
.journey12{width:min(100%,800px);max-height:calc(100dvh - 40px);overflow:auto;padding:24px;box-sizing:border-box;color:#f4eddf;scrollbar-width:thin;scrollbar-color:#879575 #172219}.journey12 h2{font:600 22px/1.3 system-ui;margin:0 0 16px}.journey12 section{padding:24px 0;border-top:1px solid #41513e}.journey12 p{font:16px/1.55 system-ui;margin:8px 0 16px}#overlay .journey12 .fine{font:14px/1.5 system-ui!important;color:#bac5b5}.tabs12,.storage12{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}.story12{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;margin:16px 0}.story12 p{font-size:14px;margin-bottom:0;color:#bac5b5}.camp11-actions label{display:grid;gap:8px;font:14px/1.5 system-ui}.camp11-actions select{width:100%;min-height:44px;background:#17241c;color:#f4eddf;padding:8px;border:1px solid #58634a;border-radius:8px}.journey12 button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,select:focus-visible{outline:2px solid #d3b66c;outline-offset:3px}
@media(max-width:600px){#tools12{right:8px;top:100px}#tools12 button{max-width:92px}#status12{bottom:140px;max-width:55%}.journey12{padding:12px;max-height:calc(100dvh - 32px)}#phone[data-mode="journey12"] #overlay{padding:16px}.camp11-actions{grid-template-columns:1fr}.tabs12{display:grid;grid-template-columns:1fr}}

#overlay .journey12 .ph{position:static!important;top:auto!important}

/* v12.2 — safe-zone HUD. Input controls are retained for touch devices. */
#phone [hidden]{display:none!important}
html[data-world='1'] #phone{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important}
html[data-world='1'] #turn{display:none!important}
#phone{--hud-edge:16px;--hud-bottom:16px;--hud-surface:rgba(14,24,19,.88)}
html[data-world='1'] #hud{left:0;right:0;padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) 0 calc(16px + env(safe-area-inset-left,0px));gap:12px;align-items:start}
html[data-world='1'] .clock-block{padding:8px 12px;background:var(--hud-surface);border-radius:10px;justify-self:start}
html[data-world='1'] .clock-block strong{font:700 16px/1.4 system-ui}html[data-world='1'] .clock-block span{font:14px/1.4 system-ui}
html[data-world='1'] .meters{width:156px;padding:8px 10px;background:var(--hud-surface);border-radius:10px;gap:6px}
html[data-world='1'] .meter{grid-template-columns:16px 1fr 28px;gap:6px}html[data-world='1'] .meter em{font:14px/1 system-ui}html[data-world='1'] .meter b{height:7px}
html[data-world='1'] #btn-look,html[data-world='1'] #btn-pause{width:44px;height:44px;border-radius:10px;background:var(--hud-surface)}
html[data-world='1'] #keys{display:none!important}
html[data-world='1'] #pockets{left:calc(16px + env(safe-area-inset-left,0px));top:100px;max-width:230px;display:flex;flex-wrap:wrap;gap:6px}
html[data-world='1'] .chip{padding:5px 8px;font:14px/1.2 system-ui;min-width:40px;background:var(--hud-surface)}
html[data-world='1'] #hud6{top:18px;max-width:calc(100% - 760px);gap:8px}
html[data-world='1'] #hud6 span{font:14px/1.4 system-ui;padding:6px 10px;background:var(--hud-surface)}
html[data-world='1'] #radar{right:16px;top:116px;width:88px;height:88px}
html[data-world='1'] #tools12{right:16px;top:220px;gap:8px;max-width:124px}
#tools12 button{min-width:88px;min-height:44px;font:600 14px/1.4 system-ui}
html[data-world='1'] #hotbar{left:50%;right:auto;bottom:84px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);grid-template-columns:repeat(9,minmax(0,1fr));grid-auto-flow:row;gap:6px;padding:6px;background:var(--hud-surface);border:1px solid #67765c55;border-radius:12px}
html[data-world='1'] .slot{width:44px;height:44px;aspect-ratio:auto;border-radius:8px}html[data-world='1'] .slot kbd{font:11px/1 system-ui}
html[data-world='1'] #dock,html[data-world='1'] #phone[data-mode='build'] #dock{top:auto;bottom:16px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);display:flex;gap:6px;grid-template-columns:none}
html[data-world='1'] #dock button{width:auto;min-width:44px;height:48px;padding:0 12px;font:600 14px/1.2 system-ui;flex:none;border-radius:10px}html[data-world='1'] #dock button .lbl{display:block}
html[data-world='1'] #compass11{bottom:auto;top:66px;padding:6px 12px;max-width:calc(100% - 760px);font:600 14px/1.4 system-ui;overflow:hidden;text-overflow:ellipsis}
html[data-world='1'] #status12{bottom:150px;max-width:min(560px,calc(100% - 360px));font:14px/1.5 system-ui}
html[data-world='1'] #coach{left:50%;top:110px;bottom:auto;transform:translateX(-50%);width:max-content;max-width:min(420px,calc(100% - 440px));font:14px/1.5 system-ui;padding:8px 12px}
html[data-world='1'] #toast{top:164px;max-width:min(480px,calc(100% - 380px));font:14px/1.5 system-ui}
html[data-world='1'] #prompt,html[data-world='1'] #phone[data-look='first'] #prompt{top:auto;bottom:192px;left:50%;transform:translateX(-50%);width:max-content;max-width:min(480px,calc(100% - 360px));font:600 14px/1.5 system-ui;padding:8px 14px}
html[data-world='1'] #work{bottom:238px;max-width:50%}
html[data-world='1'] #tut6{left:16px;right:auto;top:auto;bottom:200px;transform:none;max-width:260px;font:14px/1.4 system-ui;flex-wrap:wrap;gap:8px}
html[data-world='1'] #tut6 button{min-height:44px;min-width:44px;font:14px system-ui}
html[data-world='1'] #chat6{left:16px;top:200px;bottom:auto;width:min(280px,28vw)}
html[data-world='1'] #stamina{bottom:142px;width:160px}
html[data-world='1'] #phone[data-mode='build'] #prompt{bottom:calc(44% + 16px)}
/* Mouse/keyboard: no duplicate on-screen joystick and combat controls. */
html[data-input122='mouse'][data-world='1'] #stick,html[data-input122='mouse'][data-world='1'] #actions,html[data-input122='mouse'][data-world='1'] #moves{display:none!important}
/* Compact landscape HUD with side lanes reserved for touch controls. */
@media(max-width:1100px){
html[data-world='1'] #hud6{left:16px;top:156px;transform:none;max-width:220px;justify-content:start}
html[data-world='1'] #compass11{max-width:calc(100% - 440px);top:18px}
html[data-world='1'] #dock button{padding:0 9px}html[data-world='1'] #dock button .lbl{display:none}
html[data-world='1'] #hotbar{gap:3px}html[data-world='1'] .slot{width:44px;height:44px}
html[data-world='1'] #coach{top:66px;max-width:calc(100% - 540px)}
html[data-world='1'] #tools12{top:212px}
html[data-world='1'] #chat6{top:214px}
}
@media(max-height:560px) and (orientation:landscape){
html[data-world='1'] #hud{padding-top:8px;gap:6px}html[data-world='1'] .clock-block{padding:5px 8px}
html[data-world='1'] .clock-block strong,html[data-world='1'] .clock-block span{font-size:14px}
html[data-world='1'] .meters{width:112px;padding:6px 8px;gap:5px}
html[data-world='1'] #pockets{top:78px;max-width:150px;gap:4px}html[data-world='1'] .chip{font-size:14px;padding:3px 5px}
html[data-world='1'] #hud6{top:120px;max-width:150px;gap:4px}html[data-world='1'] #hud6 span{font-size:14px;padding:4px 6px}
html[data-world='1'] #radar{top:80px;width:64px;height:64px}
html[data-world='1'] #tools12{top:156px;max-width:96px;gap:6px}
html[data-world='1'] #coach{display:none}html[data-world='1'] #toast{top:70px;max-width:calc(100% - 340px)}
html[data-world='1'] #hotbar{bottom:66px;gap:2px;padding:4px}html[data-world='1'] .slot{width:32px;height:44px}
html[data-world='1'] #dock{bottom:8px;gap:3px}html[data-world='1'] #dock button{height:48px;padding:0 9px;min-width:44px}
html[data-world='1'] #compass11{top:10px;max-width:calc(100% - 420px);font-size:14px;padding:5px 8px}
html[data-world='1'] #prompt,html[data-world='1'] #phone[data-look='first'] #prompt{bottom:136px;max-width:calc(100% - 360px)}
html[data-world='1'] #status12{bottom:182px;max-width:calc(100% - 360px)}html[data-world='1'] #stamina{bottom:120px}
html[data-world='1'] #tut6{bottom:136px;max-width:150px;padding:6px}html[data-world='1'] #tut6 small{display:none}
html[data-world='1'] #chat6{top:190px;width:150px}
html[data-world='1'] #stick{width:104px;height:104px;left:16px;bottom:16px}
html[data-world='1'] #actions{right:12px;bottom:12px;grid-template-areas:'eat heal tool' 'hand hand hit';grid-template-columns:44px 44px 60px;grid-template-rows:44px 60px;gap:6px}
html[data-world='1'] #btn-tool,html[data-world='1'] #btn-eat,html[data-world='1'] #btn-heal{width:44px;height:44px}html[data-world='1'] #btn-interact{width:100%;height:60px}html[data-world='1'] #btn-attack{width:60px;height:60px}
html[data-world='1'] #moves{right:12px;bottom:132px;grid-template-columns:repeat(4,44px);gap:6px}html[data-world='1'] #moves button{width:44px;height:44px}
html[data-world='1'] #phone[data-mode='build'] #dock{display:none}html[data-world='1'] #phone[data-mode='build'] #prompt{bottom:calc(46% + 16px)}
}
@media(max-width:600px) and (orientation:portrait){
html[data-world='1'] #hud{gap:6px;padding:12px}html[data-world='1'] .clock-block{padding:6px 8px}html[data-world='1'] .clock-block strong{font-size:14px}html[data-world='1'] .clock-block span{font-size:14px}
html[data-world='1'] .meters{width:104px;padding:6px;gap:5px}html[data-world='1'] #btn-look,html[data-world='1'] #btn-pause{width:44px;height:44px}
html[data-world='1'] #pockets{top:94px;left:12px;max-width:240px}
html[data-world='1'] #compass11{top:144px;left:12px;transform:none;max-width:244px;font-size:14px}
html[data-world='1'] #hud6{top:188px;left:12px;max-width:240px}
html[data-world='1'] #radar{top:94px;right:12px;width:64px;height:64px}
html[data-world='1'] #tools12{top:174px;right:12px;max-width:90px}
html[data-world='1'] #coach{display:none}html[data-world='1'] #toast{top:284px;max-width:calc(100% - 24px)}
html[data-world='1'] #hotbar{bottom:86px;width:calc(100% - 24px);gap:2px;padding:5px;box-sizing:border-box}
html[data-world='1'] .slot{width:100%;height:44px}html[data-world='1'] #dock{bottom:16px;gap:5px;width:calc(100% - 24px);justify-content:space-between}html[data-world='1'] #dock button{padding:0;min-width:44px;flex:1}
html[data-world='1'] #status12{bottom:154px;max-width:calc(100% - 24px)}
html[data-world='1'] #prompt,html[data-world='1'] #phone[data-look='first'] #prompt{bottom:212px;max-width:calc(100% - 24px)}
html[data-world='1'] #stamina{bottom:142px}html[data-world='1'] #tut6{display:none}
html[data-world='1'] #actions{bottom:280px;right:12px}html[data-world='1'] #stick{bottom:280px;left:12px}
html[data-world='1'] #moves{bottom:410px;right:12px;grid-template-columns:repeat(4,44px);gap:6px}html[data-world='1'] #moves button{width:44px;height:44px}
html[data-world='1'] #chat6{top:340px;width:calc(100% - 24px)}
html[data-world='1'] #phone[data-mode='build'] #dock{display:none}
}
/* Final touch-mode audit: do not rely solely on the browser's pointer query. */
#btn-look .lbl,#btn-pause .lbl,#actions button:not(#btn-attack) .lbl{display:none!important}
html[data-input122='touch'][data-world='1'] #phone[data-mode='play'] #moves{display:grid}
html[data-input122='touch'][data-world='1'] #phone[data-mode='play'] #stick{display:block}
html[data-input122='touch'][data-world='1'] #phone[data-mode='play'] #actions{display:grid}
html[data-world='1'] #tut6{bottom:180px}
html[data-world='1'] #chat6{top:320px}
@media(max-height:560px) and (orientation:landscape){
html[data-world='1'] #tut6{left:16px;top:180px;bottom:auto;max-width:140px}
html[data-world='1'] #chat6{top:74px;left:180px;width:calc(100% - 460px)}
html[data-world='1'] #phone[data-mode='play'] #moves{bottom:132px}
}
@media(max-width:600px) and (orientation:portrait){
html[data-world='1'] #phone[data-mode='play'] #actions{right:12px;bottom:280px;grid-template-areas:'eat heal tool' 'hand hand hit';grid-template-columns:44px 44px 60px;grid-template-rows:44px 60px;gap:6px}
html[data-world='1'] #btn-tool,html[data-world='1'] #btn-eat,html[data-world='1'] #btn-heal{width:44px;height:44px}
html[data-world='1'] #btn-interact{width:100%;height:60px}html[data-world='1'] #btn-attack{width:60px;height:60px}
html[data-world='1'] #phone[data-mode='play'] #stick{width:104px;height:104px;left:12px;bottom:280px}
html[data-world='1'] #chat6{top:292px;left:12px;width:calc(100% - 24px)}
}
#moves .lbl{display:none!important}
@media(max-height:560px) and (orientation:landscape){
html[data-world='1'] #tools12{top:94px;right:96px;max-width:none;flex-direction:row;gap:6px}
html[data-world='1'] #tools12 button{width:88px;min-width:88px;padding:8px 6px}
}

/* v12.4 — actual audio activity above player names, not a PTT notification. */
.name-tag{display:flex;align-items:center;gap:7px;padding:5px 9px;font:600 14px/1.3 system-ui;max-width:240px}
.voice-name124{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voice-mic124{display:none;align-items:center;justify-content:center;width:24px;height:24px;flex:none;border-radius:50%;background:#82edab;color:#123324}
.voice-mic124 svg{display:block;width:16px;height:16px}
.name-tag.speaking124{border-color:#82edab;box-shadow:0 0 0 2px #82edab33;background:#152b22;color:#f5fff8}
.name-tag.speaking124 .voice-mic124{display:inline-flex}
#tools12.speaking124 #ptt12{background:#29583d;border-color:#82edab;color:#eaffef}

/* v12.5 — restrained field UI, explicit building tools, unobstructed view. */
html:root{--build-surface:#172326;--build-raised:#203034;--build-line:#405257;--build-text:#f1f5f2;--build-muted:#c0cbc6;--build-accent:#8fc5ed}
html:root button:focus-visible{outline:3px solid #8fc5ed;outline-offset:3px}
html:root #overlay .panel:not(.menu7){border-color:#405257;border-radius:16px;background:rgba(21,32,35,.97);color:#f1f5f2}
html:root #sheet{scrollbar-color:#637a7c #172326;scrollbar-width:thin}
html:root #phone[data-mode='build'] #sheet.builder125{
 position:absolute;display:flex;flex-direction:column;gap:12px;inset:100px 24px auto auto;width:368px;max-width:calc(100% - 32px);height:auto;max-height:calc(100dvh - 140px);padding:20px;box-sizing:border-box;overflow:hidden;border:1px solid var(--build-line);border-radius:18px;background:rgba(23,35,38,.97);color:var(--build-text);box-shadow:0 14px 48px #0004;pointer-events:auto;font:400 14px/1.4 system-ui,-apple-system,'Segoe UI',sans-serif;grid-template-areas:none;z-index:7
}
html:root #phone[data-mode='build'] #sheet.builder125>*{grid-area:auto;flex-shrink:0;margin:0;min-width:0}
html:root #phone[data-mode='build'] #sheet.builder125 header{position:static;display:flex;gap:12px;align-items:center;background:none;padding:0;border:0}
html:root #phone[data-mode='build'] #sheet.builder125 h2{font:650 20px/1.25 system-ui;letter-spacing:-.3px;margin:4px 0 0;color:var(--build-text)}
.build-eyebrow125{color:var(--build-muted);font-size:11px;letter-spacing:1.4px;font-weight:650}
html:root #phone[data-mode='build'] #sheet.builder125 button{min-height:44px;border:1px solid var(--build-line);border-radius:9px;background:var(--build-raised);color:var(--build-text);font:550 14px/1.25 system-ui;padding:10px 12px;letter-spacing:0;text-transform:none;box-shadow:none}
html:root #phone[data-mode='build'] #sheet.builder125 button:hover{background:#2a3d42;border-color:#6c8589}
html:root #phone[data-mode='build'] #sheet.builder125 button[aria-pressed='true']{border-color:var(--build-accent);background:#263e4b;color:#e5f4ff}
html:root #phone[data-mode='build'] #sheet.builder125 button:disabled{opacity:.45;cursor:not-allowed}
html:root #phone[data-mode='build'] #sheet.builder125 .x{width:44px;min-width:44px;height:44px;padding:12px}
html:root #phone[data-mode='build'] #sheet.builder125 .x svg{width:18px;height:18px}
.build-catalog-head125{display:grid;grid-template-columns:1fr auto;gap:8px}
.build-catalog-head125 button:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px}
html:root #phone[data-mode='build'] #sheet.builder125 .build-demo125[aria-pressed='true']{background:#4c2926;border-color:#e5a199;color:#ffe8e4}
.build-tabs125{display:flex;overflow-x:auto;gap:6px;scrollbar-width:thin;padding-bottom:2px}
html:root #phone[data-mode='build'] #sheet.builder125 .build-tabs125 button{flex:none;padding:8px 10px;border-color:transparent;background:none}
html:root #phone[data-mode='build'] #sheet.builder125>.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;gap:8px;overflow-y:auto;overflow-x:hidden;min-height:84px;max-height:270px;flex:1 1 auto;scrollbar-width:thin;align-content:start;padding:2px}
html:root #phone[data-mode='build'] #sheet.builder125 .card{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:start;gap:6px;min-width:0;min-height:116px;width:auto;text-align:left;padding:12px;border-radius:10px}
html:root #phone[data-mode='build'] #sheet.builder125 .card .ico{grid-column:1;grid-row:1;width:24px;height:24px;color:var(--build-accent)}
html:root #phone[data-mode='build'] #sheet.builder125 .card svg{width:24px;height:24px}
.build-card-title125{grid-column:2;font-size:14px;line-height:1.3;font-weight:650;overflow-wrap:anywhere}
.build-cost125{grid-column:1/-1;font-size:14px;color:var(--build-muted);line-height:1.3}
.build-availability125{grid-column:1/-1;font-size:12px;color:#a8dbba;line-height:1.3}
html:root #phone[data-mode='build'] #sheet.builder125 .card.poor{opacity:1}
.card.poor .build-availability125{color:#efc29e}
html:root #phone[data-mode='build'] #sheet.builder125 .card.on{border-color:var(--build-accent);background:#263e4b}
.build-options125{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html:root #phone[data-mode='build'] #sheet.builder125 #build-note{padding:10px 12px;min-height:44px;display:flex;align-items:center;box-sizing:border-box;border-radius:9px;background:#253438;color:#dce6e0;font:500 14px/1.35 system-ui;white-space:normal}
html:root #phone[data-mode='build'] #sheet.builder125 #build-note[data-state='valid']{background:#233e32;color:#bce6c9;border-left:3px solid #91cba7}
html:root #phone[data-mode='build'] #sheet.builder125 #build-note[data-state='invalid']{background:#432d28;color:#f4c5b2;border-left:3px solid #e9ab91}
html:root #phone[data-mode='build'] #sheet.builder125>.sheet-actions{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row;gap:8px;margin:0;align-content:initial}
html:root #phone[data-mode='build'] #sheet.builder125 .sheet-actions button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 8px;white-space:normal}
html:root #phone[data-mode='build'] #sheet.builder125 .sheet-actions button svg{width:18px;height:18px}
html:root #phone[data-mode='build'] #sheet.builder125 .sheet-actions .primary{background:#8fc5ed;border-color:#8fc5ed;color:#13262e;font-weight:700}
html:root #phone[data-mode='build'] #sheet.builder125 .build-help125{font-size:12px;line-height:1.4;color:var(--build-muted)}
html:root #phone[data-mode='build'] #sheet.builder125[data-catalog='false']>.cards,
html:root #phone[data-mode='build'] #sheet.builder125[data-catalog='false']>.build-tabs125{display:none}
html:root #phone[data-mode='build'] #sheet.builder125[data-demolish='true']{border-color:#ce9684}
html:root #phone[data-mode='build'] #dock,html:root #phone[data-mode='build'] #tools12{display:none!important}
@media(max-width:600px){
 html:root #phone[data-mode='build'] #sheet.builder125{inset:116px 12px auto 12px;width:auto;max-width:none;max-height:calc(100dvh - 258px);padding:12px;gap:8px;border-radius:14px}
 html:root #phone[data-mode='build'] #sheet.builder125 h2{font-size:18px}
 html:root #phone[data-mode='build'] #sheet.builder125 .card{min-height:104px;padding:10px}
 html:root #phone[data-mode='build'] #sheet.builder125 .build-help125{display:none}
 html:root #phone[data-mode='build'] #sheet.builder125>.cards{max-height:240px;min-height:64px}
 html:root #phone[data-mode='build'] #actions{display:none!important}
}
@media(orientation:landscape) and (max-height:540px){
 html:root #phone[data-mode='build'] #sheet.builder125{inset:68px 12px 12px auto;width:354px;max-width:48vw;max-height:none;height:auto;padding:12px;gap:6px}
 html:root #phone[data-mode='build'] #sheet.builder125 h2{font-size:16px;margin:2px 0 0}
 html:root #phone[data-mode='build'] #sheet.builder125 header{min-height:44px}
 html:root #phone[data-mode='build'] #sheet.builder125>.cards{min-height:32px}
 html:root #phone[data-mode='build'] #sheet.builder125 .build-help125{display:none}
 html:root #phone[data-mode='build'] #sheet.builder125 .build-eyebrow125{font-size:10px}
 html:root #phone[data-mode='build'] #actions{display:none!important}
}
@media(prefers-reduced-motion:reduce){.builder125 *{transition:none!important}}

@media(max-width:600px),(max-height:540px){html:root #phone[data-mode='build'] #sheet.builder125[data-catalog='true']>.build-options125,html:root #phone[data-mode='build'] #sheet.builder125[data-catalog='true']>#build-note{display:none}html:root #phone[data-mode='build'] #sheet.builder125 .build-catalog-head125 button{padding:8px}}
/* Keep navigation/tutorial overlays out of the construction workspace. */
html:root #phone[data-mode='build'] #compass11,html:root #phone[data-mode='build'] #hotbar,html:root #phone[data-mode='build'] #status12,html:root #phone[data-mode='build'] #prompt,html:root #phone[data-mode='build'] #coach{display:none!important}
@media(orientation:landscape) and (max-height:540px){html:root #phone[data-mode='build'] #sheet.builder125{top:88px}}
@media(orientation:landscape) and (max-height:370px){html:root #phone[data-mode='build'] #sheet.builder125{top:76px;bottom:8px;padding:8px;gap:4px}}
/* v12.6 — touch-first navigation and one clear task per screen. */
:root{--ink:#edf3f2;--muted:#b6c6c8;--line:#41545c;--glass:rgba(18,31,37,.94);--ember:#8fc8ee;--ember-deep:#477da0;--display:system-ui,-apple-system,'Segoe UI',sans-serif;--sans:system-ui,-apple-system,'Segoe UI',sans-serif}
html,body,#stage,#phone{touch-action:auto}
#view,#stick,#actions,#moves,#wheel{touch-action:none}
#sheet,#overlay,#sheet *,#overlay *{touch-action:pan-x pan-y}
#sheet,#overlay,#sheet .cards,#overlay .panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#sheet button:active,#overlay button:active{transform:none}
html:root #sheet,html:root #overlay .panel{font-family:var(--sans);border-radius:16px;background:rgba(18,31,37,.97);border:1px solid #41545c;color:#edf3f2;scrollbar-color:#72939d #14242c;scrollbar-width:thin}
html:root #overlay .panel{padding:24px;line-height:1.5}
html:root #overlay h1,html:root #overlay h2,html:root #sheet h2{font-family:var(--display);letter-spacing:-.025em}
html:root #overlay h1{font-size:clamp(32px,5vw,58px);line-height:1.06}
html:root #overlay h1.small{font-size:clamp(26px,4vw,38px)}
html:root #overlay .lede,html:root #overlay .rules,html:root #overlay .fine{font-size:14px;line-height:1.5;color:#bfced1}
html:root #overlay button,html:root #sheet button{min-height:44px;border-radius:10px;border-color:#41545c;background:#223640;color:#edf3f2;line-height:1.3;font-size:14px}
html:root #overlay button.primary,html:root #sheet button.primary{background:#8fc8ee;color:#102733;border-color:#8fc8ee;font-weight:700}
html:root #overlay button:not(:disabled):hover,html:root #sheet button:not(:disabled):hover{border-color:#a7cedd}
html:root #overlay input,html:root #sheet input{min-height:44px;border:1px solid #516b76;border-radius:10px;background:#0f2029;color:#edf3f2;padding:10px 14px;font:400 16px/1.4 var(--sans);user-select:text;-webkit-user-select:text}
html:root #overlay .ph{background:#121f25;padding-bottom:12px;border-bottom:1px solid #41545c}
html:root #sheet:not(.builder126){padding:20px;max-height:calc(100dvh - 100px);margin:0 12px 12px;width:auto}
html:root #sheet .cell{border-radius:10px;border-color:#41545c;background:#1d3039;padding:12px}
html:root #sheet .recipe{padding:14px;gap:12px;border-radius:10px}
html:root #sheet .recipe p{font-size:14px;line-height:1.4;color:#bfced1}
html:root #sheet header,html:root #sheet:not(.builder126) header{background:#121f25;padding-bottom:12px}
html:root #phone #close7{border-radius:12px;background:#1c3039;box-shadow:none;width:44px;height:44px}
html:root #phone[data-mode='build'] #close7{display:none!important}
/* Expanded catalogue is an actual scrollable picker, not a tiny window over gameplay. */
html:root #phone[data-mode='build'] #sheet.builder126{inset:88px 20px 20px auto;max-height:none;height:auto;width:444px;max-width:calc(100% - 40px);display:flex;gap:12px;overflow:hidden;padding:20px;z-index:20;background:#121f25;border-radius:16px}
html:root #phone[data-mode='build'] #sheet.builder126 header{flex:none;padding:0;border:0;background:none;min-height:48px}
html:root #phone[data-mode='build'] #sheet.builder126 h2{font-size:22px;line-height:1.2;margin:4px 0 0}
html:root #phone[data-mode='build'] #sheet.builder126 .build-eyebrow125{font-size:11px;color:#adc1c6}
html:root #phone[data-mode='build'] #sheet.builder126 button{font-size:14px;min-height:44px;background:#21343e;border-color:#41545c;color:#edf3f2;padding:10px 12px}
html:root #phone[data-mode='build'] #sheet.builder126 button[aria-pressed='true']{background:#274759;border-color:#8fc8ee;color:#ecf8ff}
.build-tabs126{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex:none}
.build-find126{display:flex;align-items:center;gap:12px;flex:none}
html:root #phone[data-mode='build'] #sheet.builder126 #build-search126{width:100%;min-width:0;flex:1;margin:0}
#build-count126{flex:none;color:#b7c9ce;font-size:12px}
html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='true']>.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(156px,auto);grid-auto-flow:row;align-content:start;gap:10px;flex:1 1 0;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;padding:2px 6px 2px 2px;scrollbar-width:thin;touch-action:pan-y}
html:root #phone[data-mode='build'] #sheet.builder126 .card{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;text-align:left;min-height:156px;padding:14px;width:100%;border-radius:12px}
html:root #phone[data-mode='build'] #sheet.builder126 .card.on{background:#274759;border-color:#8fc8ee}
.build-card-icon126{display:grid;place-items:center;width:32px;height:32px;color:#a4d3f2;background:#253f4c;border-radius:8px}
.build-card-icon126 svg{width:22px;height:22px}
.builder126 .card strong{font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.build-description126{font-size:14px;line-height:1.4;color:#bbccd1}
.build-cost126{font-size:14px;line-height:1.4;color:#d3e1e6;margin-top:auto}
.builder126 .build-availability125{font-size:12px}
.build-empty126{grid-column:1/-1;padding:24px;text-align:center;font-size:16px;color:#bdcdd2}
.build-footer126{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding-top:8px;border-top:1px solid #41545c;font-size:14px;color:#bdcdd2}
html:root #phone[data-mode='build'] #sheet.builder126 .build-footer126 button{display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
/* Placement has only relevant tools. The catalogue is one tap away. */
html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='false']{inset:auto 16px 16px auto;width:360px;height:auto;max-width:calc(100% - 32px);gap:10px;padding:16px}
.build-options126{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html:root #phone[data-mode='build'] #sheet.builder126 .build-options126 button{padding:8px 6px;display:flex;gap:5px;align-items:center;justify-content:center;font-size:14px}
.build-options126 svg{width:18px;height:18px}
html:root #phone[data-mode='build'] #sheet.builder126 .sheet-actions .primary{background:#8fc8ee;border-color:#8fc8ee;color:#102733}
html:root #phone[data-mode='build'] #sheet.builder126 .build-demo126{background:transparent;border-color:transparent;font-size:14px;color:#d6c5bd;min-height:44px}
html:root #phone[data-mode='build'] #sheet.builder126 .build-demo126[aria-pressed='true']{border-color:#e7ae99;background:#492e29;color:#ffe5da}
html:root #phone[data-mode='build'][data-catalog126='true'] :is(#hud,#hud6,#pockets,#stick,#moves,#stamina,#radar,#actions,#banner,#cross,#wash,#frost,#storm,#tut6,#chat6){visibility:hidden;pointer-events:none}
/* Calm, legible in-game chrome. */
html:root #phone .clock-block,html:root #phone .meters,html:root #phone #hud6 span,html:root #phone #compass11{background:rgba(15,29,35,.9);border:1px solid #6d8b964d;border-radius:10px;color:#edf3f2;box-shadow:none}
html:root #phone #dock{padding:6px;gap:6px;border:1px solid #5e79834d;border-radius:14px;background:rgba(15,29,35,.94)}
html:root #phone #dock button{border-radius:8px;min-height:44px;min-width:44px;background:#253b46;border-color:#5b778166}
html:root #phone #dock button.on{background:#345a70;border-color:#8fc8ee}
html:root #phone #actions button,html:root #phone #moves button{border-radius:12px;background:rgba(25,45,54,.86);border-color:#8aafbf80;box-shadow:none}
html:root #phone #btn-attack{background:rgba(126,177,207,.95);color:#102733;border-color:#b9deef}
html:root #phone #tools12 button{min-height:44px;border-radius:10px;background:#1b323d;color:#e1eff6;border-color:#607f8d}
html:root #phone #toast{background:#182f3b;color:#edf7fc;border:1px solid #698997;border-radius:12px;font-size:14px;max-width:min(480px,80%);line-height:1.4}
html:root #phone #prompt{border-radius:10px;background:#162b35e8;border:1px solid #6b89964d;font-size:14px}
@media(pointer:coarse),(max-width:600px),(max-height:540px){
 html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='true']{inset:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));width:auto;height:auto;max-width:none;max-height:none;padding:16px;gap:10px;border-radius:14px}
 html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='false']{gap:8px;padding:12px}
 html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='false'] h2{font-size:18px}
 html:root #phone[data-mode='build'] #sheet.builder126 .build-demo126{min-height:36px;padding:6px}
 html:root #phone #close7{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}
 html:root #phone #hotbar{display:none!important}
 html:root #phone #dock{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);max-width:calc(100% - 24px);flex-wrap:nowrap}
 html:root #phone #dock button{width:44px;height:44px;padding:0;flex:0 0 44px}
 html:root #phone #dock .lbl{display:none}
 html:root #phone #coach{display:none}
}
@media(orientation:landscape) and (max-height:600px){
 html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='true']{padding:12px;gap:8px;display:grid;grid-template-columns:minmax(200px,1fr) minmax(200px,.8fr);grid-template-rows:48px 44px minmax(0,1fr) 48px}
 html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='true']>header{grid-row:1;grid-column:1;min-height:44px}
 html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='true']>.build-find126{grid-row:1;grid-column:2}
 html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='true']>.build-tabs126{grid-row:2;grid-column:1/-1;grid-template-columns:repeat(6,minmax(0,1fr))}
 html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='true']>.cards{grid-row:3;grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(148px,auto);width:100%}
 html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='true']>.build-footer126{grid-row:4;grid-column:1/-1}
 html:root #phone[data-mode='build'] #sheet.builder126 .card{min-height:148px;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:6px 10px;padding:12px}
 .builder126 .card strong{grid-column:2;grid-row:1;align-self:center}
 .builder126 .build-description126,.builder126 .build-cost126,.builder126 .build-availability125{grid-column:1/-1}
 html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='false']{width:340px;max-width:47vw;bottom:calc(10px + env(safe-area-inset-bottom));right:calc(10px + env(safe-area-inset-right))}
 html:root #phone[data-mode='build'] #sheet.builder126 .build-demo126{min-height:44px}
 html:root #phone #hud{padding:10px 12px;gap:8px}
 html:root #phone .clock-block{padding:8px 10px}
 html:root #phone .clock-block strong,html:root #phone .clock-block span{font-size:14px}
 html:root #phone .meters{width:136px;padding:8px;gap:5px}
 html:root #phone .meter em{font-size:14px}
 html:root #phone #btn-look,html:root #phone #btn-pause{width:44px;height:44px;border-radius:10px}
 html:root #phone #compass11{top:12px;max-width:calc(100% - 440px);font-size:14px;padding:6px 10px}
 html:root #phone #hud6{top:98px;left:12px;transform:none;max-width:144px;gap:4px;align-items:flex-start;justify-content:flex-start}
 html:root #phone #hud6 span{font-size:12px;padding:4px 6px}
 html:root #phone #pockets{top:70px}
 html:root #phone #tools12{top:102px;right:12px;max-width:240px;flex-direction:row}
 html:root #phone #prompt{bottom:82px;max-width:calc(100% - 370px)}
 html:root #phone #status12{bottom:120px;max-width:calc(100% - 370px);font-size:12px}
 html:root #phone #stamina{bottom:72px;max-width:230px}
}
@media(max-width:600px) and (orientation:portrait){
 html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='false']{left:12px;right:12px;bottom:152px;width:auto;max-width:none}
 html:root #phone #stick,html:root #phone[data-mode='play'] #stick{left:12px;bottom:94px}
 html:root #phone #actions,html:root #phone[data-mode='play'] #actions{right:12px;bottom:94px}
 html:root #phone #moves,html:root #phone[data-mode='play'] #moves{right:12px;bottom:216px}
 html:root #phone #hud{padding:10px;gap:6px}
 html:root #phone .clock-block{padding:7px 9px;max-width:128px}
 html:root #phone .meters{width:110px;padding:7px}
 html:root #phone #hud6{top:136px;left:12px;transform:none;max-width:145px;gap:4px;justify-content:flex-start}
 html:root #phone #compass11{top:96px;left:12px;transform:none;font-size:14px;max-width:230px}
 html:root #phone #pockets{top:180px;left:12px}
 html:root #phone #tools12{top:228px;right:12px;max-width:110px}
 html:root #phone #prompt{bottom:286px;max-width:calc(100% - 40px)}
 html:root #phone #status12{bottom:330px;max-width:calc(100% - 40px)}
 html:root #phone #stamina{bottom:76px}
 .build-find126{gap:8px}#build-count126{font-size:12px}.build-footer126>span{font-size:12px}
}
@media(prefers-reduced-motion:reduce){#overlay *,#sheet *{scroll-behavior:auto!important;transition:none!important}}
html:root #phone[data-mode='build'] #sheet.builder126 .build-demo126{min-height:44px}
html:root #phone[data-mode='build'] #moves{display:none!important}
/* Intrinsic grid rows keep long Russian labels inside each card. */
html:root #phone[data-mode='build'] #sheet.builder126 .card{display:grid;height:auto;min-height:156px;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto auto auto;align-content:start;gap:8px}
html:root #phone[data-mode='build'] #sheet.builder126 .card>*{min-width:0;flex-shrink:0}
.builder126 .build-card-icon126{grid-column:1;grid-row:1}
.builder126 .card strong{grid-column:2;grid-row:1;align-self:center}
.builder126 .build-description126,.builder126 .build-cost126,.builder126 .build-availability125{grid-column:1/-1;margin-top:0}
html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='true']>.cards{grid-auto-rows:max-content}
@media(orientation:landscape) and (max-height:600px){html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='false']{gap:6px;padding:10px}html:root #phone[data-mode='build'] #sheet.builder126[data-catalog='false'] header{min-height:44px}}
html:root #phone #actions #btn-attack{background:#8fc8ee;color:#102733;border-color:#bedff5}
html:root #phone #actions #btn-attack :is(.ico,.lbl,svg){color:#102733}
@media(pointer:coarse),(max-width:600px),(max-height:540px){html:root #phone[data-mode='play'] #radar{display:none}html:root #phone[data-mode='play'][data-look='first'] #prompt{bottom:82px}html:root #phone[data-mode='play'] #status12{bottom:130px}}
@media(orientation:landscape) and (max-height:600px){html:root #phone #pockets{top:84px}html:root #phone #hud6{top:118px}}
@media(max-width:600px) and (orientation:portrait){html:root #phone[data-mode='play'][data-look='first'] #prompt{bottom:286px}html:root #phone[data-mode='play'] #status12{bottom:334px}}
@media(max-width:600px) and (orientation:portrait){html:root #phone #pockets{top:220px;max-width:146px}html:root #phone #status12{width:max-content;max-width:calc(100% - 32px);font-size:12px}}
/* menu-layout-130: full labels, stack instead of clip, weather under pockets */
/* edge-to-edge: the 440px frame and the 16:9 portrait letterbox must not leave a gutter */
html,body{overflow:hidden;background:#070908;margin:0;width:100%;height:100%}
#stage{position:fixed;inset:0;width:100%;height:100%;min-height:0;max-width:none;margin:0;display:block;background:#070908}
#phone{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;aspect-ratio:auto!important;background:#070908!important}
#view{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;display:block}
@media (min-aspect-ratio: 3/4), (orientation: portrait) {
  html:root #stage{display:block;place-items:stretch;background:#070908}
  html:root #phone{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#070908!important}
}
html:root #phone #hud6{top:156px;left:calc(12px + env(safe-area-inset-left,0px));z-index:6;max-width:168px}
@media (orientation:landscape) and (max-height:600px){
  html:root #phone #hud6{top:144px;left:calc(12px + env(safe-area-inset-left,0px));max-width:160px;z-index:6}
}
html:root #phone[data-mode='menu'] #overlay{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:center;
  justify-items:center;
  overflow:auto;
  padding:8px;
  min-width:0;
  /* Left-weighted scrim (radial at 28%) painted the ~64px gutter beside the 900px panel as a flat ~#303030 bar. The canvas already starts at x=0; keep that scene visible on both sides. */
  background:transparent;
}
html:root #phone[data-mode='menu'] #overlay .panel.menu7{
  width:min(900px,100%);
  max-width:100%;
  min-width:0;
  justify-self:center;
  max-height:calc(100dvh - 16px);
  box-sizing:border-box;
  overflow:auto;
  padding:14px 16px;
  gap:12px 20px;
  align-items:start;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
}
html:root #phone[data-mode='menu'] #overlay .m7-info,
html:root #phone[data-mode='menu'] #overlay .m7-act{min-width:0;max-width:100%}
html:root #phone[data-mode='menu'] #overlay .m7-act{align-content:start;gap:10px}
html:root #phone[data-mode='menu'] #overlay .panel.menu7 h1{font-size:clamp(26px,4.2vh,34px);line-height:1.05}
html:root #phone[data-mode='menu'] #overlay .panel.menu7 .lede{font-size:13px;line-height:1.35;margin-top:4px}
html:root #phone[data-mode='menu'] #overlay .panel.menu7 .rules{display:none}
html:root #phone[data-mode='menu'] #overlay .menu6{display:grid;gap:2px}
html:root #phone[data-mode='menu'] #overlay .menu6 .fine{margin:8px 0 4px}
html:root #phone[data-mode='menu'] #overlay .daily10{margin-top:10px;padding:10px 12px;gap:7px}
html:root #phone[data-mode='menu'] #overlay .menu7 .row7,
html:root #phone[data-mode='menu'] #overlay .chips6{display:flex;flex-wrap:wrap;gap:8px;min-width:0;width:100%}
html:root #phone[data-mode='menu'] #overlay .row7>button,
html:root #phone[data-mode='menu'] #overlay .row7>button[data-act='full'],
html:root #phone[data-mode='menu'] #overlay .row7>button[data-act='install']{
  flex:1 0 auto;
  width:auto;
  min-width:min(100%,max-content);
  max-width:100%;
  padding:8px 12px;
  overflow:visible;
}
html:root #phone[data-mode='menu'] #overlay .row7>button span,
html:root #phone[data-mode='menu'] #overlay .row7>button[data-act='full'] span,
html:root #phone[data-mode='menu'] #overlay .row7>button[data-act='install'] span{
  position:static;
  width:auto;
  height:auto;
  margin:0;
  overflow:visible;
  clip:auto;
  white-space:nowrap;
  text-overflow:clip;
}
html:root #phone[data-mode='menu'] #overlay .chip6{
  flex:1 0 132px;
  width:auto;
  min-width:min(100%,132px);
  max-width:100%;
  height:auto;
  overflow:visible;
  white-space:normal;
}
html:root #phone[data-mode='menu'] #overlay .chip6 small{
  display:block;
  overflow:visible;
  white-space:normal;
  -webkit-line-clamp:unset;
  line-height:1.25;
}
html:root #phone[data-mode='menu'] #overlay .stack7{gap:8px}
html:root #phone[data-mode='menu'] #overlay .stack7 .big7{min-height:48px;font-size:16px}
@media (max-width:780px){
  html:root #phone[data-mode='menu'] #overlay .panel.menu7{grid-template-columns:minmax(0,1fr);width:min(480px,100%)}
}
@media (max-height:520px){
  html:root #phone[data-mode='menu'] #overlay{padding:6px}
  html:root #phone[data-mode='menu'] #overlay .panel.menu7{padding:10px 12px;gap:8px 14px;max-height:calc(100dvh - 12px)}
  html:root #phone[data-mode='menu'] #overlay .panel.menu7 h1{font-size:26px}
  html:root #phone[data-mode='menu'] #overlay .panel.menu7 .lede{font-size:12.5px;line-height:1.3}
  html:root #phone[data-mode='menu'] #overlay .daily10{margin-top:6px;padding:8px 10px}
  html:root #phone[data-mode='menu'] #overlay .stack7 .big7{min-height:44px;font-size:15px}
  html:root #phone[data-mode='menu'] #overlay .chip6{min-height:36px;padding:4px 8px}
}

/* bag127 */
html:root #phone[data-mode='bag'] #close7{display:none!important}
html:root #phone[data-mode='bag'] #sheet.bag127{
  position:absolute;
  z-index:20;
  top:calc(8px + env(safe-area-inset-top));
  right:calc(8px + env(safe-area-inset-right));
  bottom:calc(72px + env(safe-area-inset-bottom));
  left:auto;
  width:min(1120px,calc(100% - 16px));
  max-width:calc(100% - 16px);
  max-height:none;
  height:auto;
  margin:0;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
  border-radius:16px;
  background:rgba(18,31,37,.97);
  border:1px solid #41545c;
  box-shadow:0 18px 48px rgba(0,0,0,.42);
  color:#edf3f2;
}
html:root #phone[data-mode='bag'] #sheet.bag127>header{
  position:static;
  flex:none;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0 0 8px;
  min-height:44px;
  background:transparent;
  border-bottom:1px solid #41545c;
  backdrop-filter:none;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-head{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-head h2{
  flex:none;
  margin:0;
  font-size:18px;
  line-height:1.1;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-load{
  flex:1;
  min-width:72px;
  display:grid;
  gap:3px;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-load .weight{
  margin:0;
  color:#d5c7a4;
  font-size:12px;
  line-height:1.2;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-wbar{
  display:block;
  height:6px;
  border-radius:99px;
  background:#243840;
  border:1px solid #5a7380;
  overflow:hidden;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-wbar b{
  display:block;
  height:100%;
  width:0;
  border-radius:99px;
  background:linear-gradient(90deg,#e4843a,#e6c27a);
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-wbar.hot b{
  background:linear-gradient(90deg,#d4534a,#e4843a);
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-body{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:104px minmax(0,1fr) minmax(240px,300px);
  grid-template-rows:minmax(0,1fr);
  gap:8px;
  overflow:hidden;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-rail{
  min-height:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:4px;
  border-radius:12px;
  background:#101c22;
  border:1px solid #41545c;
  scrollbar-width:thin;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-rail button.bag-cat{
  width:100%;
  min-height:52px;
  margin:0;
  padding:6px 3px 5px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border-radius:10px;
  font-size:11px;
  font-weight:700;
  line-height:1.1;
  text-align:center;
  white-space:normal;
  color:#d5e4e6;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-rail button.bag-cat span{
  display:block;
  max-width:100%;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:normal;
  word-break:normal;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-rail button.bag-cat svg{
  width:18px;
  height:18px;
  flex:none;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-rail button.bag-cat[aria-pressed='true']{
  border-color:#e6c27a;
  color:#f6e7c4;
  background:linear-gradient(180deg,rgba(230,194,122,.22),rgba(228,132,58,.12));
  box-shadow:inset 0 0 0 1px #e6c27a;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-main{
  min-width:0;
  min-height:0;
  display:flex;
  overflow:hidden;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-scroll{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-right:2px;
  scrollbar-width:thin;
  overscroll-behavior:contain;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-mate{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-scroll>.weight{
  margin:0;
  padding:6px 8px;
  border-radius:8px;
  background:#15262e;
  border:1px solid #41545c;
  color:#bfced1;
  font-size:12px;
  line-height:1.35;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .inv{
  position:sticky;
  top:0;
  z-index:2;
  flex:0 0 auto;
  height:46%;
  min-height:148px;
  display:grid;
  grid-template-columns:repeat(var(--bag-cols,5),minmax(76px,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  grid-auto-flow:row;
  gap:6px;
  margin:0;
  padding:6px;
  border-radius:12px;
  background:#101c22;
  border:1px solid #31454e;
  align-content:stretch;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  width:100%;
  min-width:0;
  min-height:0;
  height:100%;
  aspect-ratio:auto;
  padding:8px 4px 6px;
  border-radius:10px;
  border:1px solid #41545c;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 46%),#1a2c34;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
  color:#edf3f2;
  overflow:visible;
}
html:root #phone[data-mode='bag'] #sheet.bag127 button.bag-slot{
  min-height:0;
  height:100%;
  font-weight:700;
  line-height:1.15;
  cursor:pointer;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot.empty{
  background:repeating-linear-gradient(135deg,#14262e 0 7px,#172a32 7px 14px);
  border-style:dashed;
  border-color:#31454e;
  box-shadow:none;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot .bag-ico{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:none;
  color:#e6c27a;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot .bag-ico svg{width:30px;height:30px}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-detail .bag-ico{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:none;
  color:#e6c27a;
  border-radius:10px;
  background:#1a2c34;
  border:1px solid #41545c;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-detail .bag-ico svg{width:28px;height:28px}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot .emo6{font-style:normal;font-size:26px;line-height:1}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot b{
  position:absolute;
  top:4px;
  right:4px;
  min-width:16px;
  padding:0 4px;
  border-radius:6px;
  background:rgba(8,16,20,.88);
  border:1px solid #6a5a3e;
  color:#f4e7c4;
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1.45;
  text-align:center;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot em{
  display:block;
  width:100%;
  font-style:normal;
  font-weight:650;
  font-size:11px;
  line-height:1.15;
  text-align:center;
  color:#d5e4e6;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:break-word;
  word-break:normal;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot.on{
  border-color:#e6c27a;
  background:linear-gradient(180deg,rgba(230,194,122,.16),rgba(228,132,58,.08) 55%),#24342c;
  box-shadow:inset 0 0 0 1px #e6c27a,0 0 0 1px rgba(230,194,122,.35);
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-side{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-detail{
  flex:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:12px;
  border:1px solid #41545c;
  background:#15262e;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-meta{
  flex:1 1 120px;
  min-width:0;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-meta strong{
  display:block;
  font-size:15px;
  line-height:1.25;
  white-space:normal;
  overflow:visible;
  overflow-wrap:break-word;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-meta p{
  margin:2px 0 0;
  color:#bfced1;
  font-size:12px;
  line-height:1.35;
  white-space:normal;
  overflow:visible;
  overflow-wrap:break-word;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-detail .sheet-actions{
  flex:1 1 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  margin:0;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-detail .sheet-actions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:40px;
  width:auto;
  padding:6px 12px;
  white-space:nowrap;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-detail .sheet-actions svg{width:18px;height:18px}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:auto;
  margin:0;
  padding:0 2px 2px 0;
  scrollbar-width:thin;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes .recipe{
  flex:0 0 auto;
  width:100%;
  min-width:0;
  max-width:none;
  height:auto;
  min-height:64px;
  margin:0;
  padding:8px 10px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  justify-items:stretch;
  place-items:stretch;
  text-align:left;
  white-space:normal;
  overflow:visible;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes .recipe>span:first-child{
  min-width:0;
  white-space:normal;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes .recipe strong,
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes .recipe p{
  display:block;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:break-word;
  word-break:normal;
  -webkit-line-clamp:unset;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes .recipe strong{font-size:14px;line-height:1.25}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes .recipe p{
  margin:2px 0 0;
  font-size:12px;
  line-height:1.3;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes .recipe>span:last-child{white-space:nowrap}
html:root #phone[data-mode='bag'] #sheet.bag127 .gear6.on{
  border-color:#e6c27a;
  background:rgba(228,132,58,.16);
  box-shadow:inset 0 0 0 1px #e6c27a;
}
html:root #phone[data-mode='bag'] #sheet.bag127 .gear6.on em{color:#e6c27a}
@media (pointer:fine) and (min-height:521px){
  html:root #phone[data-mode='bag'] #sheet.bag127{
    top:calc(78px + env(safe-area-inset-top));
  }
}
@media (max-height:540px), (max-width:700px){
  html:root #phone[data-mode='bag'] #sheet.bag127{
    top:calc(6px + env(safe-area-inset-top));
    right:calc(6px + env(safe-area-inset-right));
    bottom:calc(6px + env(safe-area-inset-bottom));
    left:calc(6px + env(safe-area-inset-left));
    width:auto;
    max-width:none;
    max-height:none;
    height:auto;
    padding:6px 8px;
    gap:4px;
    overflow:hidden;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127>header{min-height:32px;padding-bottom:4px;gap:6px}
  html:root #phone[data-mode='bag'] #sheet.bag127>header .x{width:36px;height:36px;min-width:36px;min-height:36px;padding:6px}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-head{gap:8px}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-head h2{font-size:16px}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-load .weight{font-size:12px}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-body{
    display:flex;
    flex-direction:column;
    grid-template-columns:none;
    grid-template-rows:none;
    gap:4px;
    min-height:0;
    overflow:hidden;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-rail{
    flex:none;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    width:auto;
    height:auto;
    min-height:40px;
    max-height:none;
    overflow-x:auto;
    overflow-y:hidden;
    gap:4px;
    padding:2px;
    grid-column:auto;
    grid-row:auto;
    scrollbar-width:none;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-rail::-webkit-scrollbar{display:none}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-rail button.bag-cat{
    flex:1 0 auto;
    flex-direction:row;
    width:auto;
    min-width:max-content;
    min-height:36px;
    height:36px;
    padding:4px 10px;
    gap:4px;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-rail button.bag-cat span{
    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;
    max-width:none;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-rail button.bag-cat svg{width:16px;height:16px}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-main{
    flex:1 1 auto;
    min-height:0;
    min-width:0;
    display:flex;
    overflow:hidden;
    grid-column:auto;
    grid-row:auto;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-main:has(.inv){flex:0 0 auto;width:100%;max-height:148px;overflow:hidden;align-items:stretch}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-scroll{gap:4px;padding-right:0;overflow:auto}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-scroll:has(.inv){flex:1 1 auto;width:100%;min-width:0;max-height:148px;overflow:hidden;align-self:stretch}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-scroll>.weight,
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-scroll:has(.inv)>.bag-mate{display:none}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-scroll>h3.h6:has(+ .gear6s){display:none}
  html:root #phone[data-mode='bag'] #sheet.bag127 .gear6:not(.on){display:none}
  html:root #phone[data-mode='bag'] #sheet.bag127 .gear6s{
    display:flex;
    flex:none;
    gap:4px;
    margin:0;
    padding:0;
    min-height:0;
    max-height:40px;
    overflow-x:auto;
    overflow-y:hidden;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .gear6s:not(:has(.on)){display:none}
  html:root #phone[data-mode='bag'] #sheet.bag127 .gear6s:has(.gear6.on) .gear6.on{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:6px;
    min-height:36px;
    height:36px;
    padding:4px 8px;
    white-space:nowrap;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .gear6s:has(.gear6.on) .gear6.on small{display:none}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-scroll>.row6{
    flex:none;
    flex-wrap:nowrap;
    max-height:36px;
    margin:0;
    overflow-x:auto;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-scroll>h3.h6{margin:0;font-size:11px;line-height:16px}
  html:root #phone[data-mode='bag'] #sheet.bag127 .inv{
    position:static;
    flex:none;
    width:100%;
    height:auto;
    min-height:0;
    max-height:96px;
    display:grid;
    grid-template-columns:repeat(var(--bag-cols,5),minmax(0,1fr));
    grid-template-rows:repeat(2,40px);
    grid-auto-rows:40px;
    grid-auto-flow:row;
    gap:4px;
    padding:4px;
    margin:0;
    align-content:start;
    overflow-x:hidden;
    overflow-y:auto;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot,
  html:root #phone[data-mode='bag'] #sheet.bag127 button.bag-slot{
    min-height:0;
    height:40px;
    max-height:40px;
    padding:2px 2px 1px;
    gap:1px;
    justify-content:center;
    overflow:hidden;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot .bag-ico,
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot .bag-ico svg{width:16px;height:16px}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot .emo6{font-size:15px}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot em{
    font-size:10px;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-slot b{font-size:9px;min-width:14px;padding:0 3px;top:2px;right:2px}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-side{
    flex:1 1 auto;
    min-height:126px;
    min-width:0;
    max-height:230px;
    display:flex;
    flex-direction:column;
    gap:4px;
    overflow:hidden;
    grid-column:auto;
    grid-row:auto;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-detail{
    flex:0 0 auto;
    flex-wrap:wrap;
    align-items:center;
    padding:4px 6px;
    gap:4px 6px;
    min-height:40px;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-detail .bag-ico{width:36px;height:36px}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-detail .bag-ico svg{width:22px;height:22px}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-meta{flex:1 1 120px}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-meta strong{font-size:13px;line-height:1.2}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-meta p{
    font-size:11px;
    line-height:1.25;
    margin:1px 0 0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-detail .sheet-actions{
    flex:0 1 auto;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:4px;
    margin:0;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-detail .sheet-actions button{
    width:auto;
    min-height:36px;
    height:auto;
    padding:4px 10px;
    flex:0 0 auto;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes{
    flex:1 1 auto;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:6px;
    min-height:80px;
    overflow-x:auto;
    overflow-y:hidden;
    margin:0;
    padding:0 0 2px;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes .recipe{
    flex:0 0 auto;
    width:min(280px,86%);
    min-width:min(210px,86%);
    max-width:none;
    height:auto;
    min-height:76px;
    max-height:none;
    margin:0;
    padding:6px 8px;
    overflow:visible;
    align-self:stretch;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes .recipe strong{
    font-size:13px;
    line-height:1.2;
    white-space:normal;
    overflow:visible;
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes .recipe p{
    font-size:11px;
    line-height:1.25;
    margin:1px 0 0;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    display:block;
    -webkit-line-clamp:unset;
  }
}
html:root #phone[data-mode='bag'] :is(#dock,#hotbar,#prompt,#status12,#tools12,#actions,#stick,#moves),
html:root #phone[data-mode='chest'] :is(#dock,#hotbar,#prompt,#status12,#tools12,#actions,#stick,#moves){
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html[data-world='1']:has(#phone[data-mode='bag']) #turn,
html[data-world='1']:has(#phone[data-mode='chest']) #turn{display:none!important}
@media (max-width:700px) and (min-height:541px){
  html:root #phone[data-mode='bag'] #sheet.bag127{
    bottom:auto;
    height:auto;
    max-height:calc(100dvh - 12px - env(safe-area-inset-bottom));
  }
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-body{flex:0 1 auto}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-side{flex:0 0 auto;max-height:none;min-height:0}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes{flex:none;min-height:80px}
  html:root #phone[data-mode='bag'] #sheet.bag127 .bag-recipes .recipe{align-self:start;height:auto}
}
/* /bag127 */


/* pals13 — phone chat and friends */
html:root #social13{position:absolute;z-index:8;display:none;gap:6px;pointer-events:auto}
html:root #social13[hidden]{display:none!important}
html:root[data-world='1'] #phone[data-mode='play'] #social13:not([hidden]){display:flex}
html:root[data-world='1'] #social13{top:16px;right:282px;left:auto}
html:root #social13 button{min-width:64px;min-height:44px;padding:8px 12px;border-radius:10px;border:1px solid #607f8d;background:#1b323d;color:#e1eff6;font:600 14px/1.2 system-ui}
html:root #chat6,html:root #pals13{display:none!important;pointer-events:none}
html:root #chat6.open,html:root #pals13.open{display:flex!important;flex-direction:column;gap:6px;position:absolute;z-index:9;pointer-events:auto;box-sizing:border-box;padding:8px;border-radius:14px;background:rgba(12,22,28,.94);border:1px solid #5e7983;color:#edf3f2;top:108px;left:16px;width:min(380px,calc(100% - 32px));height:min(420px,calc(100dvh - 220px));bottom:auto}
html:root #chat6 .log6,html:root #pals13 .log6{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
html:root #chat6 .log6 p,html:root #pals13 .log6 p{margin:2px 0;padding:3px 8px;border-radius:8px;background:rgba(0,0,0,.45);font-size:14px;color:#fff;max-width:100%;overflow-wrap:anywhere}
html:root #chat6 .emo6row{display:flex;gap:4px;flex:none;overflow-x:auto}
html:root #chat6 .chat-send13{display:flex;gap:6px;flex:none;align-items:center}
html:root #chat6 .chat-send13 input{display:block;flex:1 1 auto;min-width:0;min-height:44px;font-size:16px}
html:root #chat6 .chat-send13 button,html:root #pals13 button,html:root #pals13 header button{min-height:44px;min-width:44px;padding:8px 12px;border-radius:10px;border:1px solid #607f8d;background:#21343e;color:#edf3f2;font:600 14px/1.2 system-ui}
html:root #pals13 header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
html:root #pals13 .fine{flex:none;margin:0;font-size:12px;line-height:1.35;color:#b7c9ce}
html:root #pals13 h3{margin:8px 0 4px;font-size:13px}
html:root #pals13 .pal13{display:flex;align-items:center;justify-content:space-between;gap:8px}
html:root #pals13 .pal13 b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html:root #phone[data-mode='bag'] :is(#chat6,#pals13,#social13,#say13),
html:root #phone[data-mode='chest'] :is(#chat6,#pals13,#social13,#say13){display:none!important;visibility:hidden!important;pointer-events:none!important}
@media (max-width:600px) and (orientation:portrait){
  html:root[data-world='1'] #social13{top:236px;left:12px;right:auto}
  html:root #chat6.open,html:root #pals13.open{top:288px;left:8px;right:8px;bottom:400px;width:auto;height:auto}
  html:root #chat6 .emo6row{display:none!important}
}
@media (orientation:landscape) and (max-height:500px){
  html:root[data-world='1'] #social13{top:180px;left:12px;right:auto}
  html:root #chat6.open,html:root #pals13.open{top:48px;left:180px;right:150px;bottom:64px;width:auto;height:auto}
  html:root #chat6 .emo6row{display:none!important}
}
/* /pals13 */
html:root #pals13 .pal-add13{display:flex;gap:6px;flex:none}
html:root #pals13 .pal-add13 input{flex:1;min-width:0;min-height:44px;font-size:16px;padding:8px 10px;border-radius:10px;border:1px solid #607f8d;background:#0e1a20;color:#fff}
@media (pointer:coarse) and (max-width:900px), (pointer:coarse) and (max-height:520px){
  html:root #social13:not([hidden]){display:flex!important;position:fixed;z-index:40;top:max(8px, env(safe-area-inset-top));left:max(8px, env(safe-area-inset-left));right:auto}
  html:root #chat6.open{z-index:80}
}

html:root #chat6 .chat-x13{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
html:root #chat6 .chat-x13 button{min-width:44px;min-height:44px;padding:0;border-radius:10px;border:1px solid #607f8d;background:#21343e;color:#fff;font:700 28px/1 system-ui}
html:root #pals13 .ask-act13{display:flex;gap:6px;flex:none}
html:root #pals-btn13.ask13,html:root button.ask13[data-act="friends"]{position:relative;box-shadow:0 0 0 2px #ff4d4d}
html:root #pals-btn13.ask13::after,html:root button.ask13[data-act="friends"]::after{content:"!";position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:999px;background:#e23b3b;color:#fff;font:800 13px/18px system-ui;text-align:center;pointer-events:none}
html:root #say13{position:absolute;z-index:6;left:16px;bottom:168px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;width:min(320px,calc(100% - 280px));pointer-events:none}
html:root #say13 p{margin:0;padding:5px 10px;border-radius:10px;background:rgba(8,16,22,.86);color:#fff;font:600 14px/1.35 system-ui;max-width:100%;overflow-wrap:anywhere;animation:say13fade 4s linear forwards}
@keyframes say13fade{0%{opacity:1}75%{opacity:1}100%{opacity:0}}
@media (max-width:600px) and (orientation:portrait){
  html:root #say13{left:12px;bottom:148px;width:min(260px,calc(100% - 24px))}
}
@media (orientation:landscape) and (max-height:500px){
  html:root #say13{left:12px;bottom:72px;width:min(240px,40vw)}
}

/* phone-social-gap: beside the day chip, hidden over menus */
@media (pointer:coarse) and (max-width:900px) and (orientation:portrait){
  html:root[data-world='1'] #social13:not([hidden]){top:10px;left:148px;right:auto}
  html:root[data-world='1'] #social13 button{min-width:36px;min-height:36px;padding:4px 8px}
}
@media (pointer:coarse) and (max-height:520px) and (orientation:landscape){
  html:root[data-world='1'] #social13:not([hidden]){top:10px;left:140px;right:auto}
  html:root[data-world='1'] #social13 button{min-width:36px;min-height:36px;padding:4px 8px}
}
html:root #phone:not([data-mode='play']) #social13,
html:root #phone:has(#chat6.open) #social13,
html:root #phone:has(#pals13.open) #social13{display:none!important;visibility:hidden!important;pointer-events:none!important}

html:root #phone:has(#pals13.open) :is(#tools12,#actions,#moves),
html:root #phone:has(#chat6.open) :is(#tools12,#actions,#moves){display:none!important;visibility:hidden!important;pointer-events:none!important}
html:root .role13{margin-left:6px;font-style:normal;font-size:11px;font-weight:700;color:#f0d48a}

html:root #say13 p.ann13{background:rgba(84,32,12,.94);border:1px solid #e6b15a;color:#ffe7b0;animation-duration:5s}
html:root #pals13 .ask-act13{flex-wrap:wrap;justify-content:flex-end}

html:root #admin13{position:absolute;z-index:4;min-height:44px;min-width:64px;padding:0 12px;border-radius:10px;border:1px solid #5b778166;background:#253b46;color:#edf3f2;font:700 14px/1 system-ui;pointer-events:auto}
html:root #admin13[hidden]{display:none!important}
html:root #phone:not([data-mode='play']) #admin13,
html:root #phone:has(#pals13.open) #admin13,
html:root #phone:has(#chat6.open) #admin13{display:none!important;visibility:hidden!important;pointer-events:none!important}
html:root #staff13{display:none!important;pointer-events:none}
html:root #staff13.open{display:flex!important;flex-direction:column;gap:6px;position:absolute;z-index:9;pointer-events:auto;box-sizing:border-box;padding:8px;border-radius:14px;background:rgba(12,22,28,.94);border:1px solid #5e7983;color:#edf3f2;top:72px;left:50%;transform:translateX(-50%);width:min(460px,calc(100% - 32px));height:min(480px,calc(100dvh - 160px))}
html:root #staff13 .log6{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
html:root #staff13 .log6 p{margin:2px 0;padding:3px 8px;border-radius:8px;background:rgba(0,0,0,.45);font-size:14px;color:#fff;max-width:100%;overflow-wrap:anywhere}
html:root #staff13 button{min-height:44px;min-width:44px;padding:8px 12px;border-radius:10px;border:1px solid #607f8d;background:#21343e;color:#edf3f2;font:600 14px/1.2 system-ui}
html:root #staff13 header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
html:root #staff13 h3{margin:8px 0 4px;font-size:13px}
html:root #staff13 .fine{flex:none;margin:0;font-size:12px;line-height:1.35;color:#b7c9ce}
html:root #staff13 .pal13{display:flex;align-items:center;justify-content:space-between;gap:8px}
html:root #staff13 .pal-add13{display:flex;gap:6px;flex:none}
html:root #staff13 .pal-add13 input{flex:1;min-width:0;min-height:44px;font-size:16px;padding:8px 10px;border-radius:10px;border:1px solid #607f8d;background:#0e1a20;color:#fff}
html:root #staff13 .ask-act13{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
html:root #phone:not([data-mode='play']) #staff13,
html:root #phone:has(#pals13.open) #staff13,
html:root #phone:has(#chat6.open) #staff13{display:none!important}