/* v0.7 — approved settings and character cutouts. */
.desktop-backdrop{background-image:linear-gradient(#071c24aa,#071c24dd),url('./assets/environment-1-v7.jpg')}
.forest{background-image:url('./assets/environment-1-v7.jpg');background-size:cover;background-position:center center}
.env-1 .forest{top:calc(-1 * (clamp(185px, 59vw, 285px) + 1.75 * var(--slate-extra-stage-height, 0px)))}
.env-2 .forest{top:calc(-1 * (clamp(98px, 28vw, 135px) + 1.45 * var(--slate-extra-stage-height, 0px)));background-image:url('./assets/environment-2-v7.jpg')}
.env-3 .forest{background-image:url('./assets/environment-3-v7.jpg')}
.shading{background:linear-gradient(#08232d75,transparent 26%,transparent 66%,#071c2c44)}
.env-thumb-1{background-image:url('./assets/environment-1-v7.jpg')}
.env-thumb-2{background-image:url('./assets/environment-2-v7.jpg')}
.env-thumb-3{background-image:url('./assets/environment-3-v7.jpg')}
.hero-zone{overflow:hidden;align-items:flex-end;padding:4px 8px 1px}
.shaman-figure{position:relative;isolation:isolate;display:block;flex:none;height:100%;aspect-ratio:2/3;max-width:88%;min-height:0}
.shaman-art,.hero-art{display:block;position:relative;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center bottom;animation:none;filter:drop-shadow(0 5px 3px #0c1f294d);transform-origin:50% 90%;z-index:2;user-select:none}
.hero-art.impact{animation:hero-impact .3s cubic-bezier(.16,1,.3,1)}
.shaman-ground-shadow{position:absolute;left:36%;bottom:1px;width:28%;height:6%;border-radius:50%;background:radial-gradient(ellipse,#07171966,transparent 70%);pointer-events:none}

/* Keep the soles and staff on the foreground floor of both workshops. */
:is(.env-1, .env-2) .hero-zone {
  container-type: inline-size;
  --shoe-left: 39%;
  --shoe-right: 64%;
  --staff-tip: 28%;
  --contact-shadow: #130d0acc;
  --cast-shadow: #17141380;
  --shadow-skew: -24deg;
  --scene-light: brightness(.91) saturate(.89);
}
:is(.env-1, .env-2) .hero-zone.tier-2 {
  --shoe-left: 41%;
  --shoe-right: 68%;
}
.env-2 .hero-zone {
  --contact-shadow: #352d25b8;
  --cast-shadow: #4f44364d;
  --shadow-skew: 11deg;
  --scene-light: brightness(.98) saturate(.92);
}
:is(.env-1, .env-2) .hero-zone:not(.tier-3) > .shaman-ground-shadow { display: none; }
:is(.env-1, .env-2) .hero-zone .is-grounded {
  height: min(100%, 132cqw);
}
:is(.env-1, .env-2) .hero-zone .is-grounded::before {
  content: '';
  position: absolute;
  inset: auto 7% 0 13%;
  height: 13%;
  background: radial-gradient(ellipse at 54% 61%, var(--cast-shadow), transparent 70%);
  transform: skewX(var(--shadow-skew));
}
:is(.env-1, .env-2) .hero-zone .is-grounded::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(ellipse 13% 1.45% at var(--shoe-left) 94.8%, var(--contact-shadow), transparent),
    radial-gradient(ellipse 13% 1.45% at var(--shoe-right) 94.8%, var(--contact-shadow), transparent),
    radial-gradient(ellipse 4.2% 1% at var(--staff-tip) 94.25%, var(--contact-shadow), transparent);
}
:is(.env-1, .env-2) .hero-zone .is-grounded .hero-art {
  filter: var(--scene-light);
  transform-origin: 53% 94.8%;
}
@media (prefers-reduced-motion: no-preference) {
  :is(.env-1, .env-2) .is-grounded .hero-art.impact { animation-name: shaman-ground-impact; }
}
@keyframes shaman-ground-impact {
  0%, 100% { transform: none; }
  32% { transform: scale(1.024, .967); }
  68% { transform: scale(.996, 1.01); }
}

.shaman-figure.is-levitating{height:94%;align-self:center;animation:shaman-levitate 4.8s ease-in-out infinite}
.is-levitating .shaman-art{position:absolute;inset:0 0 auto;height:93%;object-position:center bottom}
.ascension-mist{position:absolute;z-index:1;bottom:0;left:12%;width:78%;height:14%;pointer-events:none;animation:shaman-mist 5.4s ease-in-out infinite}
.ascension-mist i{position:absolute;inset:20% 10% 0;background:radial-gradient(ellipse,#e6fcffc2 0,#b8e5f288 35%,#80c3de22 58%,transparent 73%);filter:blur(2px)}
.ascension-mist i:nth-child(2){inset:0 40% 12% 0;rotate:-12deg}
.ascension-mist i:nth-child(3){inset:8% 0 4% 42%;rotate:11deg}
.ascension-particles{position:absolute;z-index:3;inset:0;pointer-events:none}
.ascension-particles i{position:absolute;left:var(--x);top:10%;width:3px;height:3px;border-radius:50%;background:#d9ffff;box-shadow:0 0 5px 1px #57d4f3;animation:ascension-drift 3.6s var(--delay) ease-in-out infinite}
.ascension-particles i:nth-child(2n){width:2px;height:2px;top:7%}
.ascension-particles i:nth-child(3n){top:15%}
.hero-preview .shaman-figure{max-width:100%;height:100%}
.hero-preview .shaman-figure.is-levitating{height:94%}
.hero-preview .shaman-art{max-width:100%}
@keyframes shaman-levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}
@keyframes shaman-mist{0%,100%{opacity:.8;transform:scaleX(.95)}50%{opacity:1;transform:scaleX(1.08)}}
@keyframes ascension-drift{0%{opacity:0;transform:translate(0,8px) scale(.6)}25%,65%{opacity:.9}100%{opacity:0;transform:translate(var(--drift),-15px) scale(.4)}}
@media(prefers-reduced-motion:reduce){.shaman-figure.is-levitating,.ascension-mist,.ascension-particles i{animation:none}.ascension-particles i{opacity:.75}.hero-art.impact{animation:none}}

/* Approved slate icons: one shared stone and calibrated inset for all orders. */
.slate-work{display:block;position:relative;aspect-ratio:1;flex:none;isolation:isolate}
.slate-work .slate-stone{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain}
.slate-well{position:absolute;left:20%;top:20.5%;width:60%;height:60%;border-radius:17%;overflow:hidden}
.slate-work .slate-insert{position:absolute;inset:2%;width:96%;height:96%;max-width:none;object-fit:contain;border-radius:16%;filter:drop-shadow(0 1px 1px #0004)}
.slate-well::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 2px #0002;pointer-events:none}
.task-orb,.task-option.selected .task-orb,.task-option.mentor-task .task-orb{border:0;background:none;box-shadow:none;border-radius:0}
.order-emblem,.mentor-order .order-emblem{border:0;background:none;box-shadow:none}
.item-art>.slate-work{width:64px;height:64px}
.slate-tier img{display:block;width:100%;height:100%;object-fit:contain}
.hud .gear{flex-basis:44px;width:44px;height:44px;padding:0;border:0;background:none;box-shadow:none}
.hud-settings-art{display:block;width:100%;height:100%;object-fit:contain}

/* Contextual character guidance is a separate layer; archived game layout is retained. */
.helper-launch{position:fixed;z-index:120;right:max(10px,calc((100vw - 480px)/2 + 10px));bottom:calc(88px + var(--safe-bottom));width:48px;height:52px;padding:0;border:2px solid #d6b473;border-radius:14px;background:#173d3b;box-shadow:0 3px 8px #041c2b99;overflow:hidden}
.helper-launch img{width:100%;height:100%;object-fit:cover;object-position:center 10%}
.helper-launch span{position:absolute;right:2px;bottom:0;font:bold 20px var(--font-body);color:#ffe3a2;text-shadow:0 1px 3px #062b31}
.guide-layer{position:fixed;inset:0;z-index:210;pointer-events:none}
.guide-dimmer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.guide-spot{position:fixed;border:2px solid #ffe3a0;border-radius:12px;box-shadow:0 2px 10px #071b25aa;pointer-events:none}
.guide-dialog {
  --guide-space: calc(100dvh - var(--dock-height) - 24px);
  --speech-edge: #c59758;
  --speech-paper: #f4dfb5;
  --guide-accent: #245c55;
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: min(466px, calc(100% - 16px));
  display: grid;
  grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
  align-items: end;
  gap: 6px;
}
.leshy-dialog {
  --guide-accent: #752f3f;
  --speech-edge: #bc8450;
}
.guide-character {
  width: 124%;
  height: min(42dvh, 295px, var(--guide-space));
  margin-left: -9%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 6px 6px #06171cb3);
}
.guide-card {
  position: relative;
  min-width: 0;
  max-height: var(--guide-space);
  display: flex;
  flex-direction: column;
  border: 2px solid var(--speech-edge);
  border-radius: 15px;
  background: linear-gradient(#faebca, var(--speech-paper) 85%);
  color: #2c251c;
  box-shadow: inset 0 0 0 2px #fff5d9a3, 0 5px 0 #563621a6, 0 8px 19px #07191c80;
  pointer-events: auto;
}
.guide-card::before {
  content: '';
  position: absolute;
  left: -9px;
  bottom: 34px;
  width: 14px;
  height: 14px;
  border: solid var(--speech-edge);
  border-width: 0 0 2px 2px;
  border-radius: 0 0 0 4px;
  background: var(--speech-paper);
  transform: rotate(45deg);
  pointer-events: none;
}
.guide-scroll {
  position: relative;
  min-height: 0;
  padding: 11px 12px 1px;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: inherit;
  scrollbar-width: thin;
  scrollbar-color: #b68c54 transparent;
}
.guide-actions {
  flex: none;
  padding: 7px 12px 7px;
}
.guide-scroll:last-child { padding-bottom: 11px; }
.guide-speaker {
  margin: 0 35px 4px 0;
  color: var(--guide-accent);
  font-size: 14px;
  font-weight: 800;
}
.guide-card h2 {
  margin: 0 0 6px;
  color: #4b2a1d;
  font: 23px/1.08 var(--font-display);
  overflow-wrap: anywhere;
}
.guide-copy {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.guide-instruction {
  margin: 7px 0 0;
  color: var(--guide-accent);
  font-size: 13px;
  line-height: 1.26;
  font-weight: 700;
}
.guide-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.guide-buttons button {
  flex: 1 1 max-content;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid #ad8348;
  border-radius: 8px;
  color: #fff3d0;
  background: var(--guide-accent);
  font-size: 15px;
  font-weight: 800;
}
.guide-buttons button + button {
  color: #523322;
  background: #f4dfb4;
}
.guide-card button:focus-visible {
  outline-color: var(--guide-accent);
  outline-offset: 2px;
}
.guide-close {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: none;
  color: #603a24;
  font-size: 23px;
}
.guide-card .guide-close:focus-visible { outline-offset: -3px; }
.guide-skip {
  display: block;
  margin: 1px auto -4px;
  min-height: 32px;
  padding: 4px 8px;
  color: #633f2a;
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 12px;
}
.batya-menu>p{font-size:14px;line-height:1.5;color:#eee7d4;margin:2px 0 14px}
.help-topics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.help-topics button,.help-wide{min-height:44px;padding:9px 10px;border:1px solid #b4a273;border-radius:10px;background:#254940;color:#fff0c8;font-size:14px;font-weight:600}
.help-wide{display:block;width:100%;margin-top:12px;background:#5c4050}
.free-spins-badge{padding:9px 10px;margin-bottom:10px;border:1px solid #cdb177;border-radius:10px;background:#214d41;color:#fff0b5;text-align:center;font-size:13px;line-height:1.45}

/* Let the approved longer order names determine the panel height. */
.game-shell{grid-template-rows:90px max-content 114px minmax(180px,1fr) max-content var(--skill-row)}

/* The portrait sits beside the scene, clear of skill prices and navigation. */
.helper-launch{position:absolute;right:10px;bottom:calc(var(--skill-row) + var(--tap-row) + var(--dock-height) + var(--safe-bottom) + 20px);z-index:20}
.modal-head.has-helper{padding-inline:58px}
.panel-help{position:absolute;left:8px;top:9px;display:block;width:44px;height:44px;padding:0;border:1px solid #d3b271;border-radius:12px;background:#173d3b;overflow:hidden}
.panel-help img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 10%}
.modal-casino .modal-head.has-helper{padding:0}

/* Graphite controls from the Kamlat and bottom navigation handoff. */
.game-shell {
  --tap-art-width: min(350px, calc(100vw - 44px));
  --tap-row: calc(var(--tap-art-width) * 758 / 2076 + 28px);
}
.tap-zone {
  position: relative;
  z-index: 6;
  display: grid;
  justify-items: center;
  padding: 4px 12px 6px;
}
.tap-button {
  display: grid;
  justify-items: center;
  width: var(--tap-art-width);
  max-width: 100%;
  padding: 0;
  border-radius: 14px;
  background: none;
  color: #fff0c5;
  touch-action: manipulation;
  user-select: none;
  transition: transform .08s ease-out;
}
.tap-button img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 5px #071c2ca8);
}
.tap-button.pressed { transform: translateY(3px) scale(.99); }
.tap-sub {
  font-size: 14px;
  line-height: 18px;
  font-weight: 800;
  text-shadow: 0 1px 2px #101710, 0 0 4px #101710, 0 0 6px #101710;
}
.dock {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 480px);
  height: calc(var(--dock-height) + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 10px calc(4px + var(--safe-bottom));
}
.nav-button {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  padding: 0;
  border-radius: 12px;
  background: none;
  color: #ffedbb;
}
.nav-tile {
  position: relative;
  display: block;
  width: min(100%, 112px);
  aspect-ratio: 8 / 5;
  transition: transform .12s ease-out, filter .12s ease-out;
}
.nav-stone, .nav-ico {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
}
.nav-stone { inset: 0; width: 100%; height: 100%; }
.nav-ico { inset: 15% 20%; width: 60%; height: 70%; }
.nav-button:active .nav-tile { transform: translateY(2px); }
.nav-button.selected .nav-tile { filter: drop-shadow(0 0 5px #ffc857d6); }
.nav-label {
  visibility: hidden;
  font-size: 13px;
  line-height: 14px;
  font-weight: 800;
  text-shadow: 0 1px 3px #111, 0 0 4px #111;
}
.nav-button.selected .nav-label { visibility: visible; }
.nav-lock {
  position: absolute;
  top: 8%;
  right: 4%;
  padding: 1px 3px;
  border: 1px solid #cfac73;
  border-radius: 5px;
  background: #312b26;
  color: #ffedbb;
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
}
.veil { padding-bottom: calc(var(--dock-height) + 30px + var(--safe-bottom)); }
@media (prefers-reduced-motion: reduce) {
  .tap-button, .nav-tile { transition: none; }
}

@media (max-width: 359px) {
  .guide-dialog { grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); }
  .guide-scroll, .guide-actions { padding-inline: 9px; }
  .guide-card h2 { font-size: 21px; }
  .guide-copy { font-size: 15px; }
}