/* Mobile-first Rune Forge: vertical destination sockets and a Tower-style Rune carousel. */
#rune-open {
  border-color: #8f7bd0;
  background: linear-gradient(145deg, #30224e, #090812 82%);
  color: #e5d5ff;
  font-size: 18px;
  text-shadow: 0 0 9px #b18cff;
}
#rune-open[hidden],
#rune-screen[hidden] { display: none !important; }
#rune-screen {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  color: #f0e9ff;
  background: radial-gradient(ellipse at 50% 16%, #30264b 0, #19192c 38%, #080c18 100%);
}
#rune-screen::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 2px solid #9b82cf;
  box-shadow: inset 0 0 0 4px #090e1c, inset 0 0 0 5px #d8b56b55;
  content: '';
  pointer-events: none;
}
.rune-screen-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(5px, 2vw, 14px);
  flex: 0 0 auto;
  min-height: 62px;
  padding: max(6px, env(safe-area-inset-top)) clamp(8px, 3vw, 20px) 6px;
  border-bottom: 1px solid #bca06a78;
  background: linear-gradient(180deg, #19233af5, #101626ed);
  box-shadow: 0 5px 18px #0007, inset 0 1px 0 #fff2;
}
#rune-close {
  justify-self: start;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid #9d8152;
  border-radius: 4px;
  background: linear-gradient(150deg, #29384b, #111827);
  color: #f3d899;
  box-shadow: inset 0 0 0 1px #fff2, 0 2px 0 #03060c;
  font: 700 10px/1 Georgia, serif;
  white-space: nowrap;
}
.rune-screen-title { grid-column: 2; min-width: 0; text-align: center; }
.rune-screen-title h1 {
  margin: 0;
  color: #eddbff;
  font: 700 clamp(15px, 4.5vw, 22px)/1.1 Georgia, serif;
  letter-spacing: .11em;
  text-shadow: 0 0 12px #9569ec80;
  white-space: nowrap;
}
.rune-wallet {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 82px;
  padding: 5px 7px;
  border: 1px solid #8167a4;
  border-radius: 4px;
  background: linear-gradient(145deg, #292340, #111322);
  box-shadow: inset 0 0 0 1px #dfc8ff18, 0 2px 0 #04050b;
}
.rune-wallet-icon { color: #d3b4ff; font: 21px/1 Arial, sans-serif; text-shadow: 0 0 9px #a877ff; }
.rune-wallet-copy { display: grid; gap: 3px; min-width: 0; }
.rune-wallet-copy span { color: #c9b8e7; font: 700 7px/1 Arial, sans-serif; letter-spacing: .09em; white-space: nowrap; }
#rune-blank-balance { color: #f2e4ff; font: 700 clamp(13px, 3.4vw, 17px)/1 Arial, sans-serif; font-variant-numeric: tabular-nums; }
#rune-screen-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 7px clamp(8px, 2.5vw, 20px) max(14px, env(safe-area-inset-bottom));
  touch-action: pan-y;
  scrollbar-color: #8168a8 #101525;
  scrollbar-width: thin;
}
.rune-section-title {
  margin: 5px 1px 6px;
  padding: 0 1px 5px;
  border-bottom: 1px solid #907bb170;
  color: #e5d3ff;
  font: 700 10px/1 Arial, sans-serif;
  letter-spacing: .14em;
}
#rune-destinations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}
.rune-destination {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid #786894;
  border-radius: 4px;
  background: linear-gradient(145deg, #211e35, #101525 76%);
  box-shadow: inset 0 0 0 1px #eee1ff10, 0 2px 0 #03050b;
}
.rune-destination.selected { border-color: #dcc486; box-shadow: inset 0 0 0 1px #fff0b92c, 0 0 10px #c49eff30; }
.rune-destination-header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #e7d6ff;
  font: 700 10px/1 Georgia, serif;
}
.rune-destination-header > span { width: 19px; text-align: center; font: 16px/1 Arial, sans-serif; }
.rune-destination-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rune-slot {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 4px 6px;
  border: 1px dashed #8878a8;
  border-radius: 3px;
  background: #090e1b99;
  color: #c9c3d1;
  text-align: left;
  touch-action: manipulation;
}
.rune-slot[data-rune-id]:not([data-rune-id=""]) { border-style: solid; border-color: #8f7bad; background: linear-gradient(100deg, #201b31, #0c1220); touch-action: none; cursor: grab; }
.rune-slot[data-rune-id]:not([data-rune-id=""]):active { cursor: grabbing; }
.rune-slot:focus-visible,
.rune-card button:focus-visible,
#rune-close:focus-visible { outline: 2px solid #f0d891; outline-offset: 2px; }
.rune-slot.drop-ready { border-color: #99e5db; background: #173334; box-shadow: 0 0 10px #70e6d788; }
.rune-slot-icon { display: grid; place-items: center; width: 27px; height: 27px; color: #d3bdff; font: 21px/1 Arial, sans-serif; filter: drop-shadow(0 1px 3px #000); }
.rune-slot-icon.empty-socket {
  position: relative;
  width: 23px;
  height: 23px;
  justify-self: center;
  border: 2px solid #87779e;
  border-radius: 50%;
  background: radial-gradient(circle, #322a45 0 28%, #121525 32% 62%, #080d18 68%);
  box-shadow: inset 0 0 0 2px #090e1b, 0 0 6px #a383d333;
}
.rune-slot-copy { display: grid; gap: 3px; min-width: 0; }
.rune-slot-copy strong { overflow: hidden; color: #f2dfb2; font: 700 9px/1.1 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.rune-slot-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: #c4bece;
  font: 8px/1.2 Arial, sans-serif;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.rune-library-title { margin-top: 11px; }
#rune-cards {
  display: flex;
  align-items: stretch;
  gap: 7px;
  width: 100%;
  min-width: 0;
  height: 111px;
  min-height: 111px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 3px 7px;
  border: 1px solid transparent;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 3px;
  scrollbar-width: none;
  touch-action: pan-x;
  transition: border-color .12s ease, box-shadow .12s ease;
}
#rune-cards::-webkit-scrollbar { display: none; }
#rune-cards.drop-ready { border-color: #99e5db; background: #17333455; box-shadow: 0 0 12px #70e6d766; }
.rune-card {
  position: relative;
  display: grid;
  flex: 0 0 clamp(142px, 40vw, 174px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 32px;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 6px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid #ac8652;
  border-radius: 5px;
  background: linear-gradient(145deg, #263146, #111a29 55%, #0a101d);
  color: #f2e6ce;
  box-shadow: inset 0 0 0 1px #f6d28f36, inset 0 0 0 3px #101725, 0 2px 0 #02050a;
  text-shadow: 1px 1px #080a13;
}
.rune-card::before { position: absolute; inset: 3px; border: 1px solid #e8c77b50; content: ''; pointer-events: none; }
.rune-card.unlocked { border-color: #ac8652; }
.rune-card.selected { border-color: #e4c77e; box-shadow: inset 0 0 0 1px #ffe5a53f, 0 0 10px #c9a4ff55, 0 2px 0 #02050a; }
.rune-card.locked { border-color: #786894; background: linear-gradient(145deg, #211f32, #101522 70%); }
.rune-card-head { position: relative; z-index: 1; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.rune-drag-handle {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 1px solid #8e7baa;
  border-radius: 3px;
  background: radial-gradient(circle at 35% 25%, #53466d, #171827 75%);
  color: #e9d8ff;
  font: 21px/1 Arial, sans-serif;
  touch-action: none;
  cursor: grab;
}
.rune-drag-handle:active { cursor: grabbing; }
.rune-drag-handle:disabled { border-color: #625b69; background: #1c1b27; color: #a7a1ad; cursor: default; filter: grayscale(.7); }
.rune-card-title { display: grid; gap: 4px; min-width: 0; }
.rune-card-title strong { overflow: hidden; color: #f0dcff; font: 700 clamp(10px, 2.9vw, 12px)/1.1 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.rune-card-title small { overflow: hidden; color: #c0b5d1; font: 700 8px/1.1 Arial, sans-serif; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.rune-upgrade {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 28px;
  padding: 3px 4px;
  border: 1px solid #66b77a;
  border-radius: 3px;
  background: linear-gradient(180deg, #18704e, #0c4938);
  color: #fff2cd;
  box-shadow: inset 0 1px 0 #d6ffad44, 0 2px 0 #050b0c;
  font: 700 clamp(9px, 2.5vw, 11px)/1 Georgia, serif;
  text-shadow: 1px 1px #080a13;
  white-space: nowrap;
}
.rune-upgrade b { color: #f4d995; font: 700 10px/1 Arial, sans-serif; }
.rune-upgrade:disabled { border-color: #665f50; background: linear-gradient(180deg, #343744, #1b202c); color: #c2bdaf; }
.rune-upgrade:disabled b { color: #c2bdaf; }
.rune-upgrade.locked-rune:disabled { border-color: #5c526d; background: linear-gradient(180deg, #302a3b, #1b1a28); color: #bcb0cc; font-size: 8px; }
#rune-drag-ghost {
  position: fixed;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  transform: translate(-50%, -50%);
  border: 1px solid #d8bcff;
  background: #171326ed;
  color: #f1e5ff;
  box-shadow: 0 4px 16px #000b, 0 0 14px #b48cff;
  font: 700 10px/1 Georgia, serif;
  pointer-events: none;
}
#rune-drag-ghost[hidden] { display: none !important; }
#rune-drag-ghost span { font: 19px/1 Arial, sans-serif; }
#game-frame.tutorial-rune [data-rune-card="multishot"],
#game-frame.tutorial-rune [data-rune-slot][data-rune-id="multishot"] {
  border-color: #ffe69a;
  box-shadow: inset 0 0 0 2px #fff3c55c, 0 0 12px #f1dc8e, 0 0 24px #bd8cff;
  animation: rune-tutorial-pulse 1s ease-in-out infinite alternate;
}
@keyframes rune-tutorial-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.28); }
}
#progress-tutorial #tutorial-message[hidden] { display: none !important; }
#progress-tutorial #tutorial-message {
  position: absolute;
  z-index: 2;
  top: max(62px, calc(env(safe-area-inset-top) + 48px));
  left: 50%;
  width: min(370px, calc(100% - 28px));
  margin: 0;
  padding: 10px 13px;
  transform: translateX(-50%);
  border: 1px solid #d2b477;
  background: linear-gradient(145deg, #202944f5, #0b1020f5);
  color: #fff0c5;
  box-shadow: inset 0 0 0 1px #fff2, 0 5px 18px #000b, 0 0 12px #b18cff55;
  font: 700 12px/1.35 Georgia, serif;
  text-align: center;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
#rune-close:active, .rune-upgrade:not(:disabled):active { transform: translateY(1px); }
@media (max-width: 380px) {
  .rune-screen-header { gap: 4px; padding-inline: 7px; }
  #rune-close { min-height: 34px; padding: 5px 6px; font-size: 9px; }
  .rune-wallet { min-width: 75px; gap: 3px; padding: 4px; }
  .rune-wallet-copy span { font-size: 6px; }
  #rune-destinations { gap: 4px; }
  .rune-destination { gap: 3px; padding: 5px; }
  .rune-slot { grid-template-columns: 25px minmax(0, 1fr); gap: 4px; min-height: 41px; padding: 3px 5px; }
  .rune-slot-copy small { font-size: 7.5px; }
  #rune-cards { height: 105px; min-height: 105px; gap: 5px; }
  .rune-card { flex-basis: clamp(136px, 43vw, 158px); padding: 5px; }
}
@media (min-width: 720px) {
  #rune-screen-scroll { width: min(760px, 100%); margin-inline: auto; }
  .rune-screen-header { padding-inline: max(16px, calc((100% - 760px) / 2)); }
  .rune-destination { padding-inline: 10px; }
}
@media (max-height: 520px) {
  .rune-screen-header { min-height: 52px; padding-block: 3px; }
  #rune-screen-scroll { padding-top: 4px; }
  .rune-destination { gap: 3px; padding-block: 4px; }
  .rune-slot { min-height: 38px; }
  .rune-slot-copy small { -webkit-line-clamp: 1; }
  #rune-cards { height: 91px; min-height: 91px; }
  .rune-card { grid-template-rows: minmax(0, 1fr) 27px; padding: 4px; }
  .rune-upgrade { min-height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  #game-frame.tutorial-rune [data-rune-card="multishot"],
  #game-frame.tutorial-rune [data-rune-slot][data-rune-id="multishot"] { animation: none; }
  #rune-screen *, #rune-open { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
#rune-bot-controls { position: absolute; z-index: 3; display: flex; gap: 3px; transform: translate(-50%, -100%); pointer-events: auto; }
#rune-bot-controls[hidden] { display: none !important; }
#rune-bot-controls button { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid #9e82c8; border-radius: 3px; background: linear-gradient(145deg, #302344, #11131f); color: #e8d5ff; box-shadow: inset 0 0 0 1px #f5dfa72b, 0 2px 4px #000b; font: 700 15px/1 'Courier New', monospace; }
#rune-bot-controls button[aria-pressed="true"] { border-color: #87d5a1; background: linear-gradient(145deg, #287653, #123d35); color: #e8ffd9; }
#rune-bot-controls button:active { transform: translateY(1px); }
.rune-bonus-actor { filter: drop-shadow(0 0 5px #c59aff) drop-shadow(0 0 9px #8466d9); }

/* Keep destinations and the Rune Library in separate, independently scrollable regions. */
#rune-destinations-area {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 7px clamp(8px, 2.5vw, 20px) 0;
}
#rune-destinations-area > .rune-section-title {
  flex: 0 0 auto;
  margin-top: 3px;
}
#rune-destinations-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 0 1px 7px;
  touch-action: pan-y;
  scrollbar-color: #8168a8 #101525;
  scrollbar-width: thin;
}
#rune-destinations { align-content: start; }
#rune-library-area {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 clamp(8px, 2.5vw, 20px) 3px;
}
#rune-library-area .rune-library-title { margin: 5px 1px 5px; }
.rune-destination.locked { border-color: #625775; background: linear-gradient(145deg, #1a1b2c, #0d1220 76%); }
.rune-destination.locked .rune-destination-header { color: #c5b9d9; }
.rune-slot.locked-slot { border-color: #665d77; background: linear-gradient(100deg, #151827, #0b101c); color: #c1b9cb; }
.rune-slot.locked-slot .rune-slot-icon { color: #a79bb8; }
.rune-slot.locked-slot .rune-slot-copy strong { color: #d5c6e7; }
.rune-slot.locked-slot .rune-slot-copy small { color: #aaa4b3; }
.rune-upgrade { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#soul-tree-flow .soul-node.soul-rune-slot-node.unknown .soul-node-copy,
#soul-tree-flow .soul-node.soul-rune-slot-node.unknown .soul-buy { display: grid !important; }
@media (max-width: 380px) {
  #rune-destinations-area { padding-inline: 7px; }
  #rune-library-area { padding-inline: 7px; }
}
@media (max-height: 520px) {
  #rune-destinations-area { padding-top: 4px; }
  #rune-library-area .rune-library-title { margin-top: 3px; margin-bottom: 3px; }
  #rune-cards { height: 91px; min-height: 91px; }
}

/* Permanent Blank Rune balance and passive production, anchored beneath the library. */
#rune-production-panel {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: minmax(27px, auto) 1px minmax(24px, auto);
  align-items: center;
  gap: 5px 9px;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0 clamp(8px, 2.5vw, 20px) max(9px, env(safe-area-inset-bottom));
  padding: 7px 9px;
  border: 2px solid #b18a50;
  border-radius: 5px;
  background: linear-gradient(115deg, #172237, #0c1423 58%, #111329);
  color: #eee4f7;
  box-shadow: inset 0 0 0 1px #c2a16a55, inset 0 0 0 4px #0a1120, 0 3px 0 #03050a, 0 0 12px #0008;
}
.rune-production-icon {
  grid-column: 1;
  grid-row: 1 / 4;
  display: grid;
  place-items: center;
  width: 34px;
  height: 44px;
  border: 1px solid #9b7bbd;
  border-radius: 4px;
  background: linear-gradient(145deg, #29213e, #111424);
  color: #e0c4ff;
  font: 27px/1 Arial, sans-serif;
  text-shadow: 0 0 10px #bd8cff;
  box-shadow: inset 0 0 0 1px #d8c1ff24, 0 0 8px #a577d126;
}
#rune-production-copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  color: #f1e5ff;
  font: 700 clamp(10px, 3vw, 14px)/1.2 Georgia, 'Times New Roman', serif;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 3px #000;
}
.rune-production-divider {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #a37ac6, #8866a866);
  box-shadow: 0 0 5px #bb8aff40;
}
.rune-production-balance {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #e9d7ff;
}
.rune-production-balance > span {
  flex: 0 0 auto;
  color: #d8b4ff;
  font: 22px/1 Arial, sans-serif;
  text-shadow: 0 0 8px #b37bff;
}
#rune-production-balance {
  min-width: 0;
  overflow: hidden;
  color: #f0e4ff;
  font: 700 clamp(11px, 3vw, 14px)/1.1 Georgia, 'Times New Roman', serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 380px) {
  #rune-production-panel { grid-template-columns: 32px minmax(0, 1fr); gap: 4px 7px; padding: 6px 7px; }
  .rune-production-icon { width: 30px; height: 40px; font-size: 24px; }
}
@media (max-height: 520px) {
  #rune-production-panel { padding-block: 5px; margin-bottom: max(5px, env(safe-area-inset-bottom)); }
  #rune-production-copy { font-size: 10px; }
  .rune-production-icon { height: 36px; }
}