:root {
  color-scheme: dark;
  --ink: #eaf0ec;
  --muted: #a4b3b4;
  --dim: #788b91;
  --accent: #c5dcb0;
  --line: rgba(220, 236, 232, 0.13);
  --glass: rgba(20, 37, 45, 0.72);
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "DM Sans", sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  min-height: 100%;
  background: #0e1921;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.005em;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
a {
  color: inherit;
}
.skip-link {
  position: absolute;
  z-index: 99;
  top: -60px;
  left: 14px;
  padding: 12px;
  background: #eaf0ec;
  color: #12232b;
}
.skip-link:focus {
  top: 14px;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid #d6e5b9;
  outline-offset: 3px;
}
.eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.toast {
  position: fixed;
  z-index: 100;
  bottom: 24px;
  left: 50%;
  max-width: min(420px, calc(100% - 32px));
  padding: 12px 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #233b42;
  color: var(--ink);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translate(-50%, 15px);
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.auth-screen {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 72px 20px;
  isolation: isolate;
  background: #101c24;
}
.auth-scenery {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 25, 33, 0.9), rgba(13, 25, 33, 0.48)),
    url("assets/greenhollow.png") center/cover;
  filter: saturate(0.68);
}
.auth-back {
  position: absolute;
  top: 30px;
  left: 34px;
  color: #e5f0e8;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 22px;
}
.auth-box {
  width: min(100%, 420px);
  padding: 32px;
  border: 1px solid rgba(234, 245, 238, 0.2);
  border-radius: 24px;
  background: rgba(18, 34, 42, 0.75);
  backdrop-filter: blur(32px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}
.auth-box > img {
  display: block;
  margin-bottom: 23px;
}
.auth-box h1 {
  margin: 8px 0;
  font: 600 40px/1.08 var(--serif);
  letter-spacing: -0.035em;
}
.auth-intro {
  max-width: 34ch;
  margin: 0 0 23px;
  color: #c1cdca;
  line-height: 1.6;
}
.auth-tabs,
.rail-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(5, 19, 26, 0.25);
}
.auth-tabs button,
.rail-tabs button {
  flex: 1;
  padding: 10px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.auth-tabs .selected,
.rail-tabs .active {
  background: rgba(206, 229, 207, 0.14);
  color: #f0f5eb;
}
.auth-box form {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}
.auth-box label {
  margin-top: 7px;
  color: #d6e0db;
  font-size: 12px;
  font-weight: 700;
}
.auth-box input {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(225, 241, 234, 0.2);
  border-radius: 9px;
  background: rgba(5, 18, 26, 0.52);
  color: var(--ink);
  outline: none;
}
.auth-box input:focus {
  border-color: #b9d8bf;
}
.auth-box input::placeholder {
  color: #799093;
}
.primary-button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(243, 255, 225, 0.3);
  border-radius: 10px;
  background: #cee0bb;
  color: #13251e;
  font-weight: 700;
  transition:
    filter 0.18s,
    transform 0.18s;
}
.primary-button:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.auth-submit {
  margin-top: 14px;
}
.text-button,
.quiet-button {
  padding: 8px 0;
  border: 0;
  background: none;
  color: #bfd5c5;
  font-size: 12px;
}
.text-button {
  margin-top: 14px;
}
.form-error {
  margin: 6px 0 0;
  color: #ffc6b8;
  font-size: 12px;
  line-height: 1.5;
}
.form-note {
  min-height: 15px;
  color: var(--muted);
  font-size: 12px;
}
.game-shell {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr) 318px;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 58% 0%, #233a40 0, transparent 34%), #101d25;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 25px 14px 18px;
  border-right: 1px solid var(--line);
  background: rgba(9, 21, 29, 0.72);
  scrollbar-width: thin;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 25px;
  text-decoration: none;
  font: 600 25px/1 var(--serif);
  letter-spacing: -0.05em;
}
.brand img {
  filter: drop-shadow(0 2px 7px rgba(178, 215, 175, 0.24));
}
.character-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 3px 21px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(231, 251, 236, 0.045);
}
.character-orb {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #315553;
  color: #d8e6bc;
}
.character-chip strong,
.character-chip small {
  display: block;
}
.character-chip strong {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.character-chip small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.nav-list {
  display: grid;
  gap: 2px;
}
.nav-label {
  margin: 18px 10px 7px;
  color: #7f9798;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 37px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  color: #b3c3c1;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  transition:
    background 0.15s,
    color 0.15s;
}
.nav-item:hover {
  background: rgba(234, 251, 237, 0.07);
  color: var(--ink);
}
.nav-item.active {
  border-color: rgba(213, 236, 212, 0.12);
  background: rgba(199, 224, 201, 0.13);
  color: #f2f7ef;
}
.nav-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  font: 14px var(--serif);
  color: #cfdfca;
}
.nav-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.nav-item .nav-level {
  margin-left: auto;
  color: #93ada8;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.sidebar-foot {
  margin-top: auto;
  padding: 18px 10px 0;
}
.quiet-button {
  color: #93aba9;
}
.workspace {
  min-width: 0;
}
.workspace-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  padding: 0 clamp(22px, 4vw, 65px);
  border-bottom: 1px solid var(--line);
  background: rgba(7, 20, 27, 0.16);
}
.breadcrumb {
  color: #91a8a9;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
}
.breadcrumb span {
  color: #dde9de;
}
.connection-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #aabeb7;
  font-size: 11px;
}
.connection-status:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a9c69a;
  box-shadow: 0 0 9px rgba(169, 198, 154, 0.4);
}
.connection-status.offline:before {
  background: #d39a86;
}
.mobile-menu {
  display: none;
}
.workspace-content {
  max-width: 1180px;
  margin: auto;
  padding: 35px clamp(22px, 4vw, 65px) 80px;
}
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.page-heading h1 {
  margin: 7px 0 0;
  font: 600 clamp(36px, 4.5vw, 59px) / 1.04 var(--serif);
  letter-spacing: -0.045em;
}
.page-heading p {
  max-width: 48ch;
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.stat-line {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin: 0 0 27px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
}
.stat-line span {
  color: var(--muted);
  font-size: 12px;
}
.stat-line strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font: 600 20px var(--serif);
}
.hero-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 280px;
  overflow: hidden;
  border: 1px solid rgba(203, 226, 214, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(0deg, rgba(15, 33, 37, 0.75), transparent 60%),
    url("assets/greenhollow.png") center 58% / cover;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}
.hero-art img {
  position: relative;
  z-index: 1;
  height: 84%;
  max-width: 56%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 16px 15px rgba(0, 0, 0, 0.32));
}
.hero-art:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 26, 32, 0.35),
    transparent 50%,
    rgba(10, 26, 32, 0.35)
  );
}
.hero-art-caption {
  position: absolute;
  z-index: 2;
  bottom: 18px;
  left: 23px;
  font: 600 19px var(--serif);
  text-shadow: 0 2px 14px #0b1618;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 31px 0 15px;
}
.section-title h2 {
  margin: 0;
  font: 600 23px var(--serif);
}
.section-title span {
  color: var(--dim);
  font-size: 11px;
}
.action-list {
  display: grid;
  gap: 8px;
}
.action-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(233, 246, 235, 0.035);
  transition:
    border-color 0.16s,
    background 0.16s;
}
.action-row:hover {
  border-color: rgba(208, 232, 203, 0.28);
  background: rgba(233, 246, 235, 0.065);
}
.action-row.active {
  border-color: rgba(202, 229, 178, 0.52);
  background: rgba(174, 213, 171, 0.1);
}
.action-row.locked {
  opacity: 0.56;
}
.action-art {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(226, 242, 230, 0.12);
  border-radius: 9px;
  background: rgba(236, 249, 233, 0.075);
  overflow: hidden;
}
.action-art img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.action-art .fallback {
  font: 23px var(--serif);
  color: #c5d9c4;
}
.action-info {
  min-width: 0;
}
.action-info strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.action-info small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}
.action-go {
  min-width: 74px;
  padding: 8px 11px;
  border: 1px solid rgba(201, 226, 196, 0.3);
  border-radius: 8px;
  background: rgba(204, 229, 196, 0.1);
  color: #e1ecdc;
  font-size: 11px;
  font-weight: 700;
}
.action-go:hover:not(:disabled) {
  background: rgba(204, 229, 196, 0.2);
}
.activity-banner {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 23px;
  padding: 15px 17px;
  border: 1px solid rgba(184, 215, 188, 0.25);
  border-radius: 12px;
  background: rgba(115, 161, 141, 0.12);
}
.activity-pulse {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #c4dfa6;
  box-shadow: 0 0 0 5px rgba(196, 223, 166, 0.11);
  animation: pulse 2s infinite;
}
.activity-banner strong {
  display: block;
  font-size: 12px;
}
.activity-banner span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.activity-banner button {
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: #dce7dd;
  font-size: 11px;
}
@keyframes pulse {
  50% {
    box-shadow: 0 0 0 10px rgba(196, 223, 166, 0);
  }
}
.empty-state {
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.empty-state strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}
.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 15px;
}
.overview-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(231, 247, 236, 0.04);
  color: var(--ink);
  text-align: left;
}
.overview-link span {
  color: var(--accent);
}
.inventory-rail {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  height: 100dvh;
  padding: 22px 18px 22px 0;
}
.inventory-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100dvh - 44px);
  min-height: 400px;
  padding: 21px 16px 15px;
  border: 1px solid rgba(222, 242, 231, 0.18);
  border-radius: 19px;
  background: linear-gradient(
    145deg,
    rgba(42, 66, 68, 0.69),
    rgba(18, 36, 43, 0.81)
  );
  backdrop-filter: blur(35px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.14);
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.panel-heading h2 {
  margin: 5px 0 0;
  font: 600 26px var(--serif);
}
.count-pill {
  padding: 6px 8px;
  border-radius: 20px;
  background: rgba(226, 243, 225, 0.09);
  color: #bdcec6;
  font-size: 10px;
}
.rail-tabs button {
  font-size: 11px;
}
.rail-content {
  min-height: 0;
  flex: 1;
  overflow: auto;
  margin-top: 14px;
  padding-right: 2px;
  scrollbar-width: none;
}
.rail-content::-webkit-scrollbar { display:none; }
.item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.item-tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid rgba(217, 237, 223, 0.13);
  border-radius: 8px;
  background: rgba(5, 20, 26, 0.19);
}
.item-tile img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}
.item-tile small {
  position: absolute;
  right: 4px;
  bottom: 3px;
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(4, 17, 22, 0.77);
  color: #ecf4e9;
  font-size: 9px;
}
.item-tile.empty {
  opacity: 0.36;
}
.item-tile .fallback {
  color: #d8e9d1;
  font: 20px var(--serif);
}
.equipment-list {
  display: grid;
  gap: 5px;
}
.equipment-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 51px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(4, 19, 25, 0.18);
}
.equipment-slot img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.equipment-slot span {
  min-width: 0;
}
.equipment-slot small {
  display: block;
  color: var(--dim);
  font-size: 10px;
}
.equipment-slot strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.rail-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.rail-bottom strong {
  color: #f2dfa6;
  font-variant-numeric: tabular-nums;
}
.rail-empty {
  padding: 19px 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 1180px) {
  .game-shell {
    grid-template-columns: 195px minmax(0, 1fr) 265px;
  }
  .workspace-content {
    padding-inline: 27px;
  }
  .workspace-top {
    padding-inline: 27px;
  }
  .inventory-rail {
    padding-right: 10px;
  }
}
@media (max-width: 900px) {
  .game-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .inventory-rail {
    position: static;
    grid-column: 2;
    height: auto;
    padding: 0 22px 30px;
  }
  .inventory-panel {
    min-height: 0;
    max-height: none;
  }
  .rail-content {
    max-height: 245px;
  }
  .item-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .game-shell {
    display: block;
  }
  .sidebar {
    position: fixed;
    z-index: 30;
    left: 0;
    top: 0;
    width: 255px;
    transform: translateX(-105%);
    transition: transform 0.2s;
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.23);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .workspace-top {
    height: 54px;
    padding: 0 19px;
  }
  .workspace-content {
    padding: 25px 18px 35px;
  }
  .mobile-menu {
    display: block;
    margin-right: 10px;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 20px;
  }
  .breadcrumb {
    margin-right: auto;
  }
  .page-heading h1 {
    font-size: 39px;
  }
  .hero-art {
    height: 230px;
  }
  .inventory-rail {
    padding: 0 18px 25px;
  }
  .inventory-panel {
    padding: 17px;
  }
  .item-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .action-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 9px;
  }
  .action-art {
    width: 40px;
    height: 40px;
  }
  .action-art img {
    width: 38px;
    height: 38px;
  }
  .auth-back {
    left: 20px;
    top: 20px;
  }
  .auth-box {
    padding: 25px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
.rail-subheading {
  display: flex;
  justify-content: space-between;
  margin: 2px 0 9px;
  color: #dce9da;
  font-size: 11px;
  font-weight: 700;
}
.rail-subheading span + span {
  color: var(--dim);
  font-size: 10px;
  font-weight: 500;
}
.rail-inventory-heading {
  margin-top: 19px;
}
.equipment-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.equipment-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(5, 20, 26, 0.2);
}
.equipment-cell img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.equipment-cell .fallback {
  color: #b4c7b9;
  font: 21px var(--serif);
}
.equipment-cell small {
  position: absolute;
  bottom: 3px;
  color: #a3b9af;
  font-size: 8px;
  text-transform: capitalize;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-art img {
    animation: hero-idle 4s ease-in-out infinite;
  }
  @keyframes hero-idle {
    50% {
      transform: translateY(-4px);
    }
  }
}

/* Web game: light surfaces around the native vector artwork. */
:root {
  color-scheme: light;
  --ink: #202824;
  --muted: #65706d;
  --dim: #818b87;
  --accent: #54755d;
  --line: #dfe4e0;
  --glass: rgba(255, 255, 255, 0.8);
}
html { background: #f5f6f3; }
:focus-visible { outline-color: #57745d; }
.eyebrow { color: #63806b; }
.toast { background: #293a30; color: white; border-color: transparent; box-shadow: 0 12px 32px rgba(32, 48, 38, .13); }
.auth-screen { background: #f4f5f2; }
.auth-scenery { background: linear-gradient(90deg, rgba(246,247,243,.96), rgba(246,247,243,.72)), url("assets/greenhollow.png") center/cover; filter: none; }
.auth-back { color: #23342a; }
.auth-box { background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.9); box-shadow: 0 20px 70px rgba(39,55,45,.08); }
.auth-intro, .form-note { color: var(--muted); }
.auth-tabs, .rail-tabs { background: #f0f2ef; border: 0; }
.auth-tabs .selected, .rail-tabs .active { background: #fff; color: #23352a; box-shadow: 0 1px 5px rgba(31,45,36,.08); }
.auth-box label { color: #394942; }
.auth-box input { background: #fff; border-color: #d5ddd6; color: var(--ink); }
.auth-box input::placeholder { color: #8b9790; }
.primary-button { background: #345e42; border-color: #345e42; color: #fff; }
.text-button, .quiet-button { color: #486e54; }
.form-error { color: #9a3838; }
.game-shell { grid-template-columns: 248px minmax(0, 1fr) 322px; background: #f5f6f3; }
.sidebar { background: rgba(255,255,255,.91); border-right: 1px solid #e8ebe7; padding: 28px 16px 18px; }
.brand { margin: 0 9px 30px; color: #1f2f25; }
.brand img { filter: none; }
.character-chip { background: #f6f7f4; border-color: #e9ede8; border-radius: 14px; margin: 0 1px 26px; padding: 12px; }
.character-orb { background: #e6ece5; border-radius: 10px; }
.character-orb img { width: 19px; height: 19px; }
.nav-label { color: #919994; font-size: 10px; letter-spacing: .1em; margin: 17px 12px 7px; }
.nav-list { gap: 3px; }
.nav-item { min-height: 39px; padding: 8px 11px; border: 0; border-radius: 11px; color: #42504a; font-size: 12px; font-weight: 600; }
.nav-item:hover { background: #f0f2ef; color: #1f2c25; }
.nav-item.active { background: #e6e2f5; color: #252637; border: 0; }
.nav-icon { width: 21px; height: 21px; color: inherit; }
.nav-icon img { width: 19px; height: 19px; opacity: .78; }
.nav-item.active .nav-icon img { opacity: 1; }
.nav-item .nav-level { color: #7d8880; }
.quiet-button { color: #65716a; }
.workspace-top { background: rgba(255,255,255,.5); border-bottom-color: #e8ebe7; }
.breadcrumb { color: #8a9690; }
.breadcrumb span { color: #3a4e40; }
.connection-status { color: #607368; }
.connection-status:before { background: #78a580; box-shadow: none; }
.workspace-content { padding-top: 40px; }
.page-heading h1 { color: #233329; }
.stat-line { border-color: #dee5dd; }
.hero-art { border-color: #e5e9e4; box-shadow: none; }
.hero-art-caption { color: #fff; }
.section-title h2 { color: #26372d; }
.action-list { gap: 0; border-top: 1px solid var(--line); }
.action-row { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 13px 6px; }
.action-row:hover { background: rgba(230,238,231,.45); }
.action-row.active { background: #edf4ed; border-color: #c6d8c6; }
.action-art { border-color: #edf0eb; background: #f5f7f3; }
.action-art .fallback { color: #839b86; }
.action-go { color: #335a40; border-color: #bdcfc0; background: #f6faf5; }
.action-go:hover:not(:disabled) { background: #e5f0e5; }
.activity-banner { border-color: #cdddcf; background: #eff6ef; }
.activity-pulse { background: #70a876; box-shadow: 0 0 0 5px rgba(112,168,118,.12); }
.activity-banner button { color: #355b3e; }
.overview-link { background: #fff; }
.inventory-rail { padding: 22px 18px 22px 0; }
.inventory-panel { background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 12px 36px rgba(35,52,39,.065); backdrop-filter: blur(24px); }
.panel-heading { margin-bottom: 17px; }
.panel-heading h2 { color: #27362b; }
.count-pill { background: #edf1eb; color: #637568; }
.rail-tabs { margin-bottom: 15px; }
.rail-subheading { color: #46574b; margin-top: 0; }
.rail-content { margin-top: 2px; }
.item-tile { border-color: #e8eee8; background: #f8faf7; }
.item-tile small { background: #33473a; color: #fff; }
.item-tile .fallback { color: #698772; }
.equipment-slot { background: #f8faf7; border-color: #e7ede7; color: #26352a; text-align: left; cursor: pointer; }
.equipment-slot:disabled { opacity: .62; cursor: default; }
.equipment-slot .slot-icon { width: 22px; height: 22px; opacity: .55; }
.equipment-slot > img:not(.slot-icon) { margin-left: auto; width: 32px; height: 32px; }
.rail-bottom strong { color: #806635; }
.equipment-preview, .rail-inventory-heading { display: none; }
.skill-scene { position: relative; aspect-ratio: 850 / 640; width: 100%; max-height: 520px; overflow: hidden; margin: 0 0 22px; border-radius: 18px; background: #e4ebdc; }
.skill-scene canvas { display: block; width: 100%; height: 100%; }
.scene-caption { position: absolute; left: 16px; bottom: 16px; padding: 7px 11px; border-radius: 8px; background: rgba(255,255,255,.87); color: #33463a; font-size: 11px; font-weight: 600; backdrop-filter: blur(12px); }
.location-list { display: grid; gap: 18px; }
.location-row { display: grid; grid-template-columns: minmax(170px, 37%) 1fr; min-height: 220px; overflow: hidden; border: 1px solid #e3e8e1; border-radius: 16px; background: #fff; }
.location-row > img { width: 100%; height: 100%; object-fit: cover; }
.location-row > div { padding: 20px; }
.location-row h2 { margin: 0 0 7px; font: 600 25px var(--serif); }
.location-row p { margin: 0 0 17px; color: var(--muted); line-height: 1.5; }
.location-monsters { display: flex; flex-wrap: wrap; gap: 7px; }
.location-monsters button { padding: 7px 9px; border: 1px solid #dbe6da; border-radius: 7px; background: #f8faf7; color: #344b39; font-size: 11px; }
.location-monsters small { color: #77877a; }
.profile-tabs { display: flex; gap: 5px; padding: 4px; margin-bottom: 22px; width: max-content; max-width: 100%; border-radius: 12px; background: #eaeeea; }
.profile-tabs button { padding: 9px 16px; border: 0; border-radius: 9px; background: transparent; color: #637168; font-weight: 600; }
.profile-tabs button.active { background: #fff; color: #293b2e; box-shadow: 0 1px 4px rgba(20,38,25,.06); }
.profile-summary { display: flex; gap: 28px; border-block: 1px solid var(--line); padding: 19px 0; }
.profile-metric span, .profile-metric strong { display: block; }
.profile-metric span { color: var(--muted); font-size: 11px; }
.profile-metric strong { margin-top: 5px; font: 600 20px var(--serif); }
.profile-skills { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
.profile-skills > div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.profile-skills span { color: var(--muted); }
.profile-stage { position: relative; height: 300px; overflow: hidden; margin-bottom: 23px; border-radius: 16px; background: #e5ebe4; }
.profile-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-stage canvas { position: absolute; z-index: 2; width: 230px; height: 280px; left: 50%; bottom: 26px; transform: translateX(-50%); }
.profile-pedestal { position: absolute; z-index: 1; width: 290px; height: 100px; left: 50%; bottom: 0; transform: translateX(-50%); object-fit: contain; }
.profile-links { display: grid; border-top: 1px solid var(--line); }
.profile-links button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 70px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.profile-links img { width: 27px; height: 27px; }
.profile-links span { flex: 1; }
.profile-links strong, .profile-links small { display: block; }
.profile-links small { margin-top: 5px; color: var(--muted); }
.profile-links b { font-size: 20px; font-weight: 400; color: #809087; }
.style-pickers { display: grid; gap: 15px; max-width: 460px; margin-top: 22px; }
.style-picker { display: grid; gap: 7px; color: #526258; font-size: 12px; font-weight: 600; }
.style-picker select { height: 42px; padding: 0 12px; border: 1px solid #d4dfd4; border-radius: 9px; background: #fff; color: var(--ink); }
.appearance-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; max-width: 660px; }
.appearance-form label { display: grid; gap: 6px; color: #526258; font-size: 12px; font-weight: 600; }
.appearance-form select, .combat-picker select { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #d4dfd4; border-radius: 9px; background: #fff; color: var(--ink); }
.appearance-colors { grid-column: 1 / -1; display: flex; gap: 22px; }
.appearance-colors input { width: 74px; height: 42px; padding: 3px; border: 1px solid #d4dfd4; border-radius: 9px; background: #fff; }
.appearance-form .primary-button { justify-self: start; }
.opponent-list { display: grid; border-top: 1px solid var(--line); }
.opponent-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.opponent-row > span:nth-child(2) { flex: 1; }
.opponent-row strong, .opponent-row small { display: block; }
.opponent-row small { margin-top: 4px; color: var(--muted); }
.opponent-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #edf2ec; }
.opponent-avatar img { width: 22px; height: 22px; }
.arena-fight { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 20px; margin-bottom: 18px; border-radius: 13px; background: #edf3ed; }
.arena-fight > .arena-fighter:last-child { text-align: right; }
.arena-fighter > span, .arena-fighter > strong { display: block; }
.arena-fighter > span { color: var(--muted); font-size: 11px; }
.arena-fighter > strong { margin-top: 4px; font: 600 19px var(--serif); }
.arena-fight b { color: #879a88; font-size: 11px; }
@media (max-width: 1180px) { .game-shell { grid-template-columns: 210px minmax(0,1fr) 282px; } }
@media (max-width: 900px) { .game-shell { grid-template-columns: 200px minmax(0,1fr); } .inventory-rail { padding-right: 22px; } }
@media (max-width: 620px) { .game-shell { display: block; } .sidebar { width: 272px; box-shadow: 12px 0 30px rgba(30,45,33,.1); } .location-row { display: block; } .location-row > img { height: 150px; } .profile-summary { flex-wrap: wrap; } .appearance-form { grid-template-columns: 1fr; } .skill-scene { border-radius: 12px; } }
.combat-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 260px);
  align-items: center;
  gap: 10px 14px;
  margin: 4px 0 19px;
}
.combat-picker label {
  color: #d6e5d7;
  font-size: 12px;
  font-weight: 700;
}
.combat-picker select {
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(218, 237, 219, 0.22);
  border-radius: 8px;
  background: #1d353b;
  color: #eaf3e8;
}
.combat-picker small {
  grid-column: 1/-1;
  color: var(--muted);
  font-size: 11px;
}
.item-tile {
  cursor: pointer;
  color: var(--ink);
}
.item-tile:hover,
.item-tile.selected {
  border-color: rgba(203, 228, 188, 0.55);
  background: rgba(203, 228, 188, 0.1);
}
.item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(5, 20, 26, 0.2);
}
.item-actions > div {
  min-width: 0;
}
.item-actions strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.item-actions small {
  display: block;
  max-height: 32px;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.item-actions .action-go {
  flex: none;
}

/* Location and combat routes use the native game's vector artwork. */
.location-list { gap: 0; border-top: 1px solid #dfe7df; }
.location-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 22px; align-items: center; width: 100%; min-height: 154px; padding: 14px 4px; border: 0; border-bottom: 1px solid #dfe7df; border-radius: 0; background: transparent; color: var(--ink); text-align: left; }
.location-row:hover { background: rgba(229, 237, 226, .44); }
.location-row > img { width: 190px; height: 124px; border-radius: 12px; object-fit: cover; }
.location-copy { display: grid; gap: 7px; min-width: 0; }
.location-copy .eyebrow { color: #66846b; }
.location-copy strong { font: 600 24px var(--serif); }
.location-copy > span:last-child { color: var(--muted); font-size: 12px; line-height: 1.5; }
.location-arrow { padding-right: 12px; color: #74927b; font-size: 22px; }
.route-back { margin: 0 0 18px; padding: 4px 0; border: 0; background: transparent; color: #526d58; font-size: 12px; font-weight: 700; }
.route-back:hover { color: #1e472c; }
.location-hero { position: relative; display: flex; align-items: end; min-height: 276px; overflow: hidden; border-radius: 16px; background: #dce8da; }
.location-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.location-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(16, 31, 21, .79), transparent 78%); }
.location-hero > div { position: relative; z-index: 1; padding: 26px; color: #fff; }
.location-hero .eyebrow { color: #d5e6d1; }
.location-hero h1 { margin: 6px 0; color: #fff; font: 600 clamp(32px, 4vw, 48px) var(--serif); }
.location-hero p { max-width: 620px; margin: 0; color: #e7f0e7; line-height: 1.5; }
.monster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; }
.monster-card { display: grid; justify-items: center; gap: 7px; min-height: 160px; padding: 15px 10px; border: 1px solid #e2e9e1; border-radius: 13px; background: rgba(255,255,255,.7); color: var(--ink); text-align: center; }
.monster-card:hover { border-color: #acc5ab; background: #fff; }
.monster-card-art { position: relative; display: block; width: 100%; height: 86px; overflow: hidden; }
.monster-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.monster-card strong { font-size: 12px; line-height: 1.25; }
.monster-card small { color: #607c67; font-size: 11px; }
.combat-stage { position: relative; height: clamp(300px, 38vw, 430px); overflow: hidden; border-radius: 16px; background: var(--combat-floor); }
.combat-scene-layer, .combat-ground-layer { position: absolute; left: 0; width: 100%; object-fit: fill; }
.combat-scene-layer { top: 0; height: 70%; }
.combat-ground-layer { bottom: 0; height: 31%; }
.combat-actors { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: end; padding: 30px 28px 20px; }
.combat-actor { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.combat-actor canvas { width: min(100%, 220px); height: 255px; }
.combat-monster-art { display: grid; place-items: end center; width: min(100%, 220px); height: 255px; }
.combat-monster-art img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 7px 4px rgba(18,33,21,.18)); }
.combat-stage.is-active .combat-monster-art img { animation: combat-breathe 1.4s ease-in-out infinite alternate; }
@keyframes combat-breathe { to { transform: translateY(-5px); } }
.combat-actor strong { max-width: 100%; overflow: hidden; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.8); color: #213b2a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.combat-versus { align-self: center; color: rgba(255,255,255,.85); font: 700 12px var(--sans); letter-spacing: .15em; text-align: center; }
.combat-health-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 21px 0 25px; }
.combat-health > span { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 11px; }
.combat-health b { font-weight: 600; color: #617468; }
.combat-health-track { height: 8px; overflow: hidden; border-radius: 999px; background: #e2e9e1; }
.combat-health-track i { display: block; height: 100%; border-radius: inherit; background: #6cac73; transition: width .3s ease; }
.combat-health.enemy .combat-health-track i { background: #cb806d; }
.combat-toolbar { display: grid; gap: 14px; padding: 20px 0; border-block: 1px solid #dfe7df; }
.combat-stance-list { display: flex; flex-wrap: wrap; gap: 7px; }
.combat-stance-list button { padding: 9px 13px; border: 1px solid #dce6dc; border-radius: 9px; background: #fff; color: #43574a; font-size: 12px; font-weight: 600; }
.combat-stance-list button.active { border-color: #9eba9f; background: #e6f0e4; color: #244a2e; }
.combat-ammo { display: grid; gap: 6px; max-width: 290px; color: #526b59; font-size: 12px; font-weight: 600; }
.combat-ammo select { min-height: 39px; padding: 0 11px; border: 1px solid #dce6dc; border-radius: 8px; background: #fff; color: var(--ink); }
.combat-toolbar-actions { display: flex; align-items: center; gap: 16px; }
.combat-toolbar-actions .primary-button { min-width: 148px; }
.combat-details { display: flex; flex-wrap: wrap; gap: 24px; padding: 20px 0; color: var(--muted); font-size: 11px; }
.combat-details strong { margin-left: 5px; color: var(--ink); }
.combat-picker label { color: #526b59; }
.combat-picker select { border-color: #d4dfd4; background: #fff; color: var(--ink); }
.item-actions { border-color: #dfe7df; background: #f7faf6; }
@media (max-width: 680px) {
  .location-row { grid-template-columns: 112px minmax(0, 1fr) 14px; gap: 12px; min-height: 112px; padding: 10px 0; }
  .location-row > img { width: 112px; height: 88px; }
  .location-copy strong { font-size: 18px; }
  .location-copy > span:last-child { display: none; }
  .location-arrow { padding: 0; font-size: 16px; }
  .location-hero { min-height: 230px; }
  .location-hero > div { padding: 20px; }
  .monster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .combat-stage { height: 330px; }
  .combat-actors { padding: 18px 9px; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); }
  .combat-actor canvas, .combat-monster-art { height: 225px; }
  .combat-health-row { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .combat-stage.is-active .combat-monster-art img { animation: none; } }

/* The game shell follows the light, inset iOS layout. */
.game-shell { grid-template-columns: 246px minmax(0, 1fr) 376px; gap: 19px; padding: 20px; background: #f2f4f1; }
.sidebar { top: 20px; height: calc(100dvh - 40px); padding: 25px 17px 17px; border: 1px solid #edf0eb; border-radius: 28px; background: rgba(255,255,255,.88); box-shadow: 0 10px 36px rgba(30,45,33,.055); backdrop-filter: blur(25px); }
.brand { margin-bottom: 23px; }
.nav-item { position: relative; isolation: isolate; overflow: hidden; align-items: center; gap: 9px; min-height: 42px; padding: 8px 10px; }
.nav-progress { position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; background: color-mix(in srgb,var(--skill-color) 25%,white); border-radius: inherit; opacity: .85; }
.nav-item.active { background: #ded4f8; }
.nav-item.active .nav-progress { background: #c8baf5; }
.nav-text { flex: 1; min-width: 0; text-align: left; }
.workspace-top { height: 60px; padding-inline: 8px; background: transparent; border-bottom: 1px solid #e2e9df; }
.workspace-content { padding: 40px 2px 90px; }
.inventory-rail { top: 0; height: 100dvh; padding: 80px 0 20px; }
.inventory-panel { max-height: calc(100dvh - 100px); border: 1px solid #e6ebe5; border-radius: 23px; box-shadow: 0 12px 32px rgba(32,47,35,.055); }
.panel-heading { margin-bottom: 18px; }
.panel-heading h2 { margin: 0; }
.item-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
.item-dialog { width: min(460px,calc(100vw - 28px)); max-height: calc(100dvh - 36px); padding: 28px; border: 1px solid #e1e9df; border-radius: 22px; background: #fbfcf9; color: #233329; box-shadow: 0 24px 70px rgba(25,40,30,.15); }
.item-dialog::backdrop { background: rgba(27,43,31,.34); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; top: 12px; right: 16px; border: 0; background: transparent; color: #54675b; font-size: 28px; line-height: 1; }
.item-dialog-head { display: flex; align-items: center; gap: 17px; padding-right: 24px; }
.item-dialog-head h2 { margin: 5px 0; font: 600 31px var(--serif); }
.item-dialog-head > div > span:last-child { color: #66786a; font-size: 12px; }
.item-dialog-art { display: grid; place-items: center; flex: none; width: 96px; height: 96px; border: 1px solid #e4ebe3; border-radius: 16px; background: #f1f5ee; }
.item-dialog-art img { width: 80px; height: 80px; object-fit: contain; }
.item-dialog > div > p { color: #617266; line-height: 1.6; }
.item-dialog-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 0; border-block: 1px solid #e1e8df; }
.item-dialog-stats span { color: #6b796e; font-size: 12px; }
.item-dialog-stats strong { display: block; margin-top: 3px; color: #263a2a; }
.item-dialog-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 18px; }
.store-quantity select { min-height:42px; padding:0 12px; border:1px solid #dce6dc; border-radius:10px; background:#fff; color:#26382b; }
.container-result h2 { margin:6px 0; font:700 30px var(--serif); }.container-result p { color:#617266; }
.container-drops { display:grid; gap:6px; margin-top:15px; }
.container-drops > span { display:flex; align-items:center; gap:11px; min-height:52px; padding:7px 10px; border-radius:11px; background:#f1f6ef; }
.container-drops img { width:37px; height:37px; object-fit:contain; }.container-drops strong { flex:1; }.container-drops b { color:#316f43; }
.container-gold { display:grid; place-items:center; width:37px; height:37px; color:#c89a2c; font-size:27px; }
.secondary-button { padding: 10px 15px; border: 1px solid #d5e2d5; border-radius: 10px; background: #f6faf5; color: #315d3a; font-size: 12px; font-weight: 700; }
.item-help { color: #819085; font-size: 12px; }
.enchant-recipe { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }.enchant-recipe span { padding:6px 9px; border-radius:8px; background:#ebf2e9; color:#49604e; font-size:11px; }
.equipment-paperdoll { position: relative; height: 250px; margin-bottom: 14px; overflow: hidden; border-radius: 16px; background: linear-gradient(145deg,#e8efe8,#f6f9f4); }
.equipment-paperdoll canvas { position: absolute; left: 50%; bottom: 0; width: 200px; height: 230px; transform: translateX(-50%); }
.equipment-paperdoll > div { position: absolute; z-index: 1; left: 11px; bottom: 11px; display: grid; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.83); backdrop-filter: blur(10px); }
.equipment-paperdoll strong { font-size: 11px; }.equipment-paperdoll span { color: #698072; font-size: 10px; }
.equipment-bonuses { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-bottom:13px; }.equipment-bonuses span { display:flex; justify-content:space-between; gap:5px; padding:8px; border-radius:8px; background:#f0f5ef; color:#627367; font-size:11px; }.equipment-bonuses strong { color:#2c5335; }
.location-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; border: 0; }
.location-row { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(205px,1fr) 74px; gap: 0; min-width: 0; min-height: 285px; padding: 0; overflow: hidden; border: 1px solid #dce5db; border-radius: 20px; background: #f9fbf7; }
.location-row:hover { background: #fff; border-color: #bbd2bd; transform: translateY(-2px); }
.location-image { position: relative; display: block; min-height: 0; overflow: hidden; }
.location-image:after { position:absolute; inset:0; content:''; background:linear-gradient(0deg,rgba(12,30,17,.75),transparent 57%); }
.location-image > img { width:100%; height:100%; object-fit:cover; }
.location-image > strong { position:absolute; z-index:1; left:18px; bottom:16px; color:#fff; font:600 clamp(24px,2.6vw,35px)/1.05 var(--serif); text-align:left; }
.location-min { position:absolute; z-index:1; top:13px; right:13px; padding:6px 9px; border-radius:999px; background:rgba(27,42,32,.72); color:#fff; font-size:11px; font-weight:700; backdrop-filter:blur(8px); }
.location-monster-strip { display:flex; align-items:center; gap:2px; overflow:hidden; padding:5px 10px; background:linear-gradient(90deg,#e8ece4,#e1e8df); }
.location-monster-strip img { flex:none; width:49px; height:60px; object-fit:contain; }
.location-more { margin-left:auto; padding-left:4px; color:#3f5845; font-size:10px; font-weight:700; white-space:nowrap; }
.skill-heading { align-items:center; }.skill-heading h1 { margin-top:0; }
.skill-level-pill { display:flex; align-items:center; gap:7px; padding:10px 14px; border:1px solid #d8e5da; border-radius:999px; background:#f8fbf8; color:#294934; font-size:12px; font-weight:700; }
.skill-level-pill img { width:17px; height:17px; }
.skill-scene { background:var(--scene-sky,#e4ebdc); }
html[data-theme="dark"] .skill-level-pill img { filter:brightness(0) invert(1); }
.skill-scene { max-height:580px; margin-bottom:26px; border-radius:18px; }
.scene-caption { left:20px; bottom:18px; font-size:12px; }
.thieving-target { position:absolute; right:16%; bottom:12%; display:grid; justify-items:center; gap:3px; }
.thieving-target img { width:100px; height:130px; object-fit:contain; }.thieving-target span { padding:5px 9px; border-radius:8px; background:rgba(255,255,255,.85); font-weight:700; }
.skill-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.skill-action { position:relative; display:flex; align-items:center; flex-direction:column; min-width:0; min-height:210px; padding:17px 8px 14px; border:1px solid #e5ebe4; border-radius:19px; background:rgba(255,255,255,.84); color:#26382b; text-align:center; }
.skill-action:hover:not(:disabled):not([aria-disabled="true"]) { border-color:#a8c6b0; background:#fff; }.skill-action.active { border-color:#9dc7ad; background:#f3faf5; }
.skill-action { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:pan-y; }
.skill-action[aria-disabled="true"] { cursor:default; }
.skill-action.unavailable .skill-action-art { opacity:.6; }
.skill-material-details { display:grid; gap:8px; margin-top:12px; }
.skill-material-details > div { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:10px; }
.skill-material-details img { width:28px; height:28px; object-fit:contain; }
.skill-material-details > div > span { display:grid; gap:3px; }
.skill-material-details small { color:var(--muted); }
.skill-material-details b { margin-left:auto; padding:5px 9px; border-radius:999px; background:#dff3e5; color:#267047; }
.skill-material-details b.missing { background:#fce7e5; color:#a7413a; }
.item-dialog .skill-details-unavailable { color:#a7413a; }
html[data-theme="dark"] .skill-material-details b { background:#344a43; color:#d4f3df; }
html[data-theme="dark"] .skill-material-details b.missing { background:#523536; color:#ffcac4; }
html[data-theme="dark"] .skill-details-unavailable { color:#ffcac4; }
.skill-action.locked { opacity:.56; }
.skill-action-ring { display:grid; place-items:center; width:112px; height:112px; padding:10px; border-radius:50%; background:conic-gradient(var(--ring-color) var(--ring-progress),color-mix(in srgb,var(--ring-color) 20%,white) 0); }
.skill-action-art { display:grid; place-items:center; width:100%; height:100%; border:7px solid #f5f9f8; border-radius:50%; background:#fff; }
.skill-action-art img { width:65px; height:65px; object-fit:contain; }.skill-action-art .fallback { font:30px var(--serif); }
.skill-action-name { margin-top:9px; font-weight:700; }.skill-action-meta { margin-top:4px; color:#788a7c; font-size:11px; }.skill-action-owned { margin-top:8px; padding:3px 8px; border-radius:999px; background:#def2e2; color:#2a8550; font-size:10px; font-weight:700; }
.profile-skill-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
.profile-skill { position:relative; display:grid; grid-template-columns:25px 1fr auto; align-items:center; gap:8px; min-height:49px; padding:8px 0 12px; border:0; border-bottom:1px solid #e1e8df; overflow:hidden; background:transparent; color:#26382b; text-align:left; }.profile-skill:hover { background:#f4f8f3; }
.profile-skill-icon img { width:20px; height:20px; }.profile-skill > span:nth-of-type(2) { color:#78857b; font-size:12px; }.profile-skill i { position:absolute; left:0; bottom:0; height:3px; border-radius:4px; background:var(--skill-color,#b5d6ba); }
.store-balance { padding:9px 14px; border-radius:999px; background:#e8eee5; color:#46604c; font-size:13px; }
.store-tools { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }.store-tools .profile-tabs { margin:0; }.store-tools label { display:grid; gap:5px; color:#63756a; font-size:11px; font-weight:700; }
.store-tools input,.store-quantity input { min-height:39px; padding:0 11px; border:1px solid #dce6dc; border-radius:9px; background:#fff; color:#26382b; }
.store-grid,.codex-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:11px; }
.store-item,.codex-monster { display:grid; justify-items:center; gap:6px; min-width:0; padding:15px 9px; border:1px solid #e2e9e1; border-radius:14px; background:rgba(255,255,255,.8); color:#26382b; text-align:center; }
.store-item:hover,.codex-monster:hover { border-color:#afd0b4; }.store-item > span { display:grid; place-items:center; height:80px; }.store-item img { width:75px; height:75px; object-fit:contain; }.store-item strong,.codex-monster strong { font-size:12px; }.store-item small,.codex-monster small { color:#758779; font-size:11px; }.store-quantity { display:grid; gap:7px; margin:17px 0; }
.store-quantity-row { display:flex; align-items:end; gap:8px; margin:17px 0; }
.store-quantity-row .store-quantity { flex:1; min-width:0; margin:0; }
.store-quantity-row .store-quantity input { width:100%; box-sizing:border-box; }
.store-quantity-row #store-sell-all { min-height:39px; white-space:nowrap; }
.store-section-title { margin:24px 0 12px; }
.store-upgrades { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.store-upgrade { display:grid; grid-template-rows:30px auto auto 1fr; justify-items:start; gap:5px; min-height:132px; padding:13px; border:1px solid #dce7df; border-radius:14px; background:#fff; color:#26382b; text-align:left; cursor:pointer; }
.store-upgrade img { width:28px; height:28px; object-fit:contain; }
.store-upgrade strong { font-size:13px; }
.store-upgrade small { color:#6f8073; font-size:11px; line-height:1.35; }
.store-upgrade span { align-self:end; color:#8c6726; font-size:11px; font-weight:800; }
.store-upgrade:hover:not(:disabled) { border-color:#80ad91; background:#f7fbf7; }
.store-upgrade:disabled { cursor:default; opacity:.65; }
.store-upgrade.is-owned span { color:#397b4c; }
@media (max-width:1100px) { .store-upgrades { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.leaderboard-filters { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 20px; }.leaderboard-filters button { padding:8px 12px; border:1px solid #dce7dc; border-radius:999px; background:#fff; color:#546d5a; font-size:12px; }.leaderboard-filters button.active { background:#e2efdf; color:#265032; border-color:#aecbae; }
.leaderboard-list { border-top:1px solid #dce6dc; }.leaderboard-list > div { display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; padding:14px 5px; border-bottom:1px solid #dce6dc; }.leaderboard-list span { color:#78887a; }.leaderboard-list b { color:#3b6845; }
.codex-monster img { width:95px; height:95px; object-fit:contain; }.codex-detail { position:relative; display:grid; grid-template-columns:140px 1fr; gap:19px; margin-bottom:22px; padding:20px; border:1px solid #dce7dd; border-radius:18px; background:#fff; }.codex-detail-art { display:grid; place-items:center; }.codex-detail-art img { width:130px; height:150px; object-fit:contain; }.codex-detail h2 { margin:4px 0 7px; font:600 31px var(--serif); }.codex-detail p { color:#667768; }.codex-stats { display:flex; flex-wrap:wrap; gap:15px; font-weight:700; }.codex-detail h3 { font-size:13px; }.codex-drops { display:flex; flex-wrap:wrap; gap:7px; }.codex-drops span { display:flex; align-items:center; gap:5px; padding:5px 8px; border-radius:8px; background:#f0f6ee; font-size:11px; }.codex-drops img { width:22px; height:22px; object-fit:contain; }
.combat-stage { height:clamp(470px,47vw,590px); border-radius:18px; }.combat-scene-layer { height:72%; }.combat-ground-layer { height:30%; }
.combat-actors { padding:25px 35px 95px; }.combat-actor canvas,.combat-monster-art { height:330px; }.combat-actor strong { background:rgba(245,250,245,.84); font-size:13px; }
.combat-health-row { position:relative; z-index:2; margin:-76px 25px 28px; padding:0; color:#fff; }.combat-health b { color:#f7fff7; }.combat-health-track { height:13px; background:rgba(22,37,28,.45); }.combat-health-track i { background:linear-gradient(#8be9a0,#249d55); }.combat-health.enemy .combat-health-track i { background:linear-gradient(#ff9d98,#c53644); }
.combat-toolbar { grid-template-columns:minmax(150px,1fr) minmax(240px,1fr); grid-template-areas:'actions stances' 'ammo stances'; align-items:start; gap:15px 26px; padding:24px 0; }.combat-stance-list { grid-area:stances; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.combat-stance-list button { min-height:53px; border:1px solid #d2ddd2; border-radius:13px; background:linear-gradient(#fff,#e8ede8); color:#26392b; font-size:14px; }.combat-stance-list button.active { border-color:#d89a43; background:linear-gradient(#ffba62,#dc8230); color:#fff; }.combat-toolbar-actions { grid-area:actions; flex-wrap:wrap; align-items:stretch; }.combat-toolbar-actions .primary-button,.combat-toolbar-actions .text-button { flex:1; min-height:55px; margin:0; padding:12px; border-radius:13px; }.combat-toolbar-actions .text-button { border:1px solid #d95a5c; background:#e45455; color:#fff; }.combat-ammo { grid-area:ammo; }
.combat-extra { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:0 0 22px; border-bottom:1px solid #dfe7df; }.combat-food { display:grid; gap:4px; color:#546d58; font-size:11px; font-weight:700; }.combat-food select { min-height:38px; border:1px solid #d9e5d8; border-radius:9px; background:#fff; }.combat-prayer-options { display:flex; flex-basis:100%; flex-wrap:wrap; gap:7px; order:4; }.combat-prayer-options button { padding:8px 11px; border:1px solid #d8e4d8; border-radius:10px; background:#fff; color:#314d39; }.combat-prayer-options button.active { background:#e0f3e0; border-color:#a2c6a5; }.combat-prayer-options small { display:block; color:#7b8d7e; }
.style-pickers { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:800px; gap:15px; }.style-picker { min-width:0; padding:14px; border:1px solid #e2e9e0; border-radius:17px; background:rgba(255,255,255,.8); }.style-picker strong { color:#3f5544; font-size:12px; }.style-preview { display:grid; place-items:center; height:120px; overflow:hidden; border-radius:11px; background:linear-gradient(135deg,#d9e7dc,#f0f5ef); color:#5a725d; text-transform:capitalize; }.style-preview img { width:100%; height:100%; object-fit:cover; }.style-preview.profilePedestalId img { object-fit:contain; }.style-preview.auraId { background:radial-gradient(circle,#ddeedc,#f4f8f1); }.style-preview.weaponTrailId { background:linear-gradient(120deg,#f5f7f4,#cde2df,#f5f7f4); }
@media(max-width:1220px) { .game-shell { grid-template-columns:220px minmax(0,1fr) 330px; gap:13px; padding:14px; }.sidebar { top:14px; height:calc(100dvh - 28px); }.inventory-rail { padding-top:74px; }.location-list { grid-template-columns:1fr; } }
@media(max-width:950px) { .game-shell { grid-template-columns:215px minmax(0,1fr); }.inventory-rail { position:static; grid-column:2; height:auto; padding:0 0 30px; }.inventory-panel { max-height:none; }.rail-content { max-height:350px; }.item-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:620px) { .game-shell { display:block; padding:0; }.sidebar { top:8px; left:8px; height:calc(100dvh - 16px); border-radius:22px; }.workspace-top { padding-inline:19px; }.workspace-content { padding:30px 17px 60px; }.inventory-rail { padding:0 17px 28px; }.location-list { grid-template-columns:1fr; }.location-row { grid-template-columns:1fr; grid-template-rows:210px 70px; min-height:280px; }.location-image > img { width:100%; height:100%; }.skill-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.skill-action { min-height:195px; }.skill-action-ring { width:100px; height:100px; }.skill-heading h1 { font-size:38px; }.combat-stage { height:440px; }.combat-actors { padding:16px 8px 100px; }.combat-actor canvas,.combat-monster-art { height:250px; }.combat-health-row { margin:-67px 10px 24px; gap:10px; }.combat-health > span { display:grid; }.combat-toolbar { grid-template-columns:1fr 1fr; gap:12px; }.combat-stance-list button { min-height:45px; padding:7px; font-size:11px; }.profile-skill-grid { grid-template-columns:1fr; }.codex-detail { grid-template-columns:1fr; }.store-tools { align-items:stretch; flex-direction:column; }.style-pickers { grid-template-columns:1fr; } }

/* Native location artwork carries through the header and the monster footer. */
.illustrated-header { position:relative; height:235px; margin:-40px -2px 0; overflow:hidden; background:#dbeaf4; }
.illustrated-header::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 35%,rgba(18,48,57,.25) 62%,#eaf3f8 100%); }
.illustrated-header > img { width:100%; height:100%; object-fit:cover; object-position:center; }
.illustrated-header h1 { position:absolute; z-index:1; left:24px; bottom:58px; margin:0; color:#fff; font:700 clamp(36px,5vw,61px)/1 var(--serif); text-shadow:0 2px 8px rgba(14,44,47,.34); }
.location-header + .location-list { position:relative; z-index:1; gap:19px; margin:-25px -2px 0; padding:26px 18px 28px; border-radius:26px 26px 0 0; background:#eaf3f8; }
.workspace-content.location-page { background:#eaf3f8; }
.workspace-content.location-page .location-hero { border-radius:18px; }
.location-row { grid-template-rows:minmax(205px,1fr) 76px; border:1px solid rgba(33,76,89,.12); background:#fff; box-shadow:0 4px 12px rgba(29,62,73,.07); }
.location-row:hover { border-color:rgba(45,114,145,.35); box-shadow:0 8px 20px rgba(29,62,73,.1); }
.location-monster-strip { position:relative; gap:9px; padding:6px 10px; isolation:isolate; background:#476b68; }
.location-monster-strip::before { position:absolute; z-index:-1; inset:-8px; content:""; background:var(--location-art) center 76%/cover; filter:blur(9px) brightness(.67); }
.location-monster-strip-art { display:flex; align-items:center; gap:4px; min-width:0; overflow:hidden; }
.location-monster-strip-art img { flex:none; width:49px; height:58px; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.28)); }
.location-more { flex:none; padding:5px 7px; border-radius:999px; background:rgba(22,46,43,.53); color:#f3f9f4; }

/* The open arc, inset image and count pill follow the iOS skill card. */
.skill-action-ring { position:relative; display:grid; place-items:center; width:132px; height:132px; padding:0; background:none; }
.skill-action-ring .ring-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.skill-action-art { width:82px; height:82px; border:4px solid #f7faf9; box-shadow:0 2px 5px rgba(25,50,45,.08); }
.skill-action-art img { width:52px; height:52px; }
.skill-action-inputs { display:flex; align-items:center; flex-direction:column; gap:4px; margin-top:4px; }
.skill-action-input { display:flex; align-items:center; gap:5px; max-width:100%; min-height:25px; padding:3px 9px; border:3px solid #f8fbf7; border-radius:999px; background:#dff3e5; color:#267047; font-size:12px; font-weight:700; line-height:1; white-space:nowrap; }
.skill-action-input img { width:16px; height:16px; object-fit:contain; }
.skill-action-input.missing { background:#fce7e5; color:#a7413a; }
.skill-action-owned { position:absolute; z-index:3; bottom:3px; left:50%; display:flex; align-items:center; gap:5px; min-height:26px; padding:3px 9px; transform:translateX(-50%); border:3px solid #f8fbf7; border-radius:999px; background:#dff3e5; color:#267047; font-size:12px; font-weight:700; line-height:1; white-space:nowrap; }
.skill-action-owned img { width:16px; height:16px; object-fit:contain; }
.skill-action-owned.empty { color:#84928c; }
.skill-action { min-height:220px; background:linear-gradient(#fff,#f7f9fb); border-color:rgba(255,255,255,.9); box-shadow:0 4px 14px rgba(29,51,46,.05); }
.skill-action.has-inputs { min-height:245px; }
.skill-action-name { margin-top:7px; font-size:14px; font-weight:500; }
.ring-theme-section { margin:22px 0 27px; }
.ring-theme-options { display:grid; grid-template-columns:repeat(auto-fill,minmax(95px,1fr)); gap:10px; }
.ring-theme-choice { display:grid; justify-items:center; gap:5px; padding:11px 5px; border:1px solid #dfe7e3; border-radius:14px; background:#fff; color:#35463a; }
.ring-theme-choice.active { border-color:#3489a5; background:#edf7fa; }
.ring-theme-choice .ring-svg { width:58px; height:58px; }
.ring-theme-choice span { font-size:11px; font-weight:600; }
.ring-theme-choice small { color:#7d8c83; font-size:9px; }
.ring-theme-choice:disabled { opacity:.55; }

/* Arena art, rank and character are one scene, as in the native arena view. */
.pvp-header::after { background:linear-gradient(180deg,rgba(10,24,35,.02),rgba(13,29,34,.24) 58%,#f2f4f1 100%); }
.pvp-content { position:relative; z-index:1; margin-top:-27px; padding:0 2px 30px; }
.pvp-hub { position:relative; z-index:1; margin:-27px 0 0; padding:0 2px 30px; }
.arena-page .pvp-content { margin-top:0; }
.arena-page .route-back { margin-bottom:18px; }
.arena-destination { overflow:hidden; margin-bottom:21px; border-radius:19px; background:#fff; border:1px solid #dfe5e0; }
.pvp-hub .arena-destination { display:block; width:100%; padding:0; color:var(--ink); text-align:left; }
.arena-destination > img { display:block; width:100%; height:210px; object-fit:cover; }
.arena-destination-label { display:flex; align-items:center; gap:11px; padding:12px 17px; }
.arena-destination-label > img { width:27px; height:27px; }
.arena-destination-label span:nth-child(2) { display:grid; gap:2px; flex:1; }
.arena-destination-label strong { font-size:14px; }.arena-destination-label small { color:#7a887e; }
.arena-showcase { position:relative; height:295px; overflow:hidden; border-radius:19px; background:#6b645e; }
.arena-showcase::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(18,23,25,.75),rgba(18,23,25,.24) 58%,transparent),linear-gradient(0deg,rgba(16,28,30,.28),transparent 55%); }
.arena-showcase-art { width:100%; height:100%; object-fit:cover; }
.arena-showcase-copy { position:absolute; z-index:2; left:26px; top:25px; display:grid; gap:13px; color:#fff; }
.arena-showcase-copy > small { color:#f1f6f2; font-weight:700; }
.arena-rank { display:flex; align-items:center; gap:9px; }.arena-rank img { width:66px; height:66px; object-fit:contain; }.arena-rank span { display:grid; gap:4px; }.arena-rank strong { font:700 21px var(--serif); }.arena-rank small { color:#e8eae9; font-size:12px; }
.arena-showcase-copy .secondary-button { width:max-content; background:rgba(255,255,255,.83); backdrop-filter:blur(14px); }
.arena-showcase canvas { position:absolute; z-index:1; right:0; bottom:-35px; width:42%; height:295px; }
.arena-character-name { position:absolute; z-index:2; right:15%; bottom:14px; color:#fff; text-shadow:0 2px 4px #182326; }
.arena-controls { margin:-4px 0 15px; }.arena-controls label { display:flex; align-items:center; gap:9px; color:#6a7c6e; font-size:12px; }.arena-controls select { padding:8px 12px; border:1px solid #dbe5dd; border-radius:9px; background:#fff; color:#26382b; }
.arena-opponent-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.arena-opponent { display:grid; justify-items:center; gap:3px; padding:7px 7px 12px; border:1px solid #e2e8e3; border-radius:17px; background:linear-gradient(#f5eee8,#fff 54%); color:#26382b; text-align:center; }
.arena-opponent:hover { border-color:#c9aaa0; background:#fff; }
.arena-opponent-stage { display:block; width:100%; height:130px; overflow:hidden; }.arena-opponent canvas { width:100%; height:125px; }.arena-opponent > strong { font-size:13px; }.arena-opponent > small { color:#7d8a7f; }
.arena-opponent-rank { display:flex; align-items:center; gap:3px; color:#92693c; font-size:11px; font-weight:700; }.arena-opponent-rank img { width:18px; height:18px; object-fit:contain; }

/* Portrait ranking rows and kill-progress field guide. */
.leaderboard-heading,.codex-summary { display:flex; align-items:center; gap:12px; padding:16px; margin-bottom:14px; border-radius:17px; background:#fff; border:1px solid #e7ece7; }
.leaderboard-heading > img,.codex-summary > img { width:35px; height:35px; }
.leaderboard-heading > div,.codex-summary > div { display:grid; gap:3px; flex:1; }.leaderboard-heading strong,.codex-summary strong { font-size:15px; }.leaderboard-heading small,.codex-summary span { color:#77877b; font-size:12px; }
.leaderboard-heading label,.codex-tools label { display:grid; gap:3px; color:#78877d; font-size:10px; font-weight:700; }.leaderboard-heading select,.codex-tools input { max-width:180px; padding:9px; border:1px solid #dbe5dd; border-radius:9px; background:#f8faf7; color:#2e4034; }
.leaderboard-native-list { display:grid; gap:9px; }.leaderboard-native-row { display:grid; grid-template-columns:26px 48px minmax(0,1fr) auto; align-items:center; gap:13px; min-height:74px; padding:9px 14px; border:1px solid #e6ebe5; border-radius:15px; background:#fff; }.leaderboard-native-row.is-you { background:#e8f1fc; border-color:#b9d3f5; }
.leaderboard-place { color:#829187; font-weight:700; }.leaderboard-native-row canvas { width:48px; height:48px; border-radius:50%; background:#e9f0e9; }.leaderboard-player,.leaderboard-value { display:grid; gap:2px; min-width:0; }.leaderboard-player strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.leaderboard-player em { color:#2277c5; font-size:11px; font-style:normal; }.leaderboard-player small,.leaderboard-value small { min-height:14px; color:#8a968b; font-size:11px; }.leaderboard-value { text-align:right; }
.codex-tools { display:flex; justify-content:space-between; align-items:center; gap:12px; }.codex-tools .leaderboard-filters { margin:0 0 16px; }.codex-tools label { margin-bottom:16px; }
.codex-list { display:grid; gap:9px; }.codex-row { position:relative; isolation:isolate; display:grid; grid-template-columns:52px minmax(0,1fr) auto 12px; align-items:center; gap:12px; min-height:67px; overflow:hidden; padding:8px 12px; border:1px solid #e4eae5; border-radius:16px; background:#fff; color:#28362c; text-align:left; }
.codex-row::before { position:absolute; z-index:-1; left:3px; top:3px; bottom:3px; width:var(--kill-progress); content:""; border-radius:13px; background:#d8ecd9; }.codex-row.tier-3::before { background:#cddff6; }.codex-row.tier-4::before { background:#e3d7f5; }.codex-row.tier-5::before { background:#f6e2be; }.codex-row.tier-6::before { background:linear-gradient(100deg,#f9dbe9,#ded7f8,#cff0f6); }
.codex-row:hover { border-color:#aac9b1; }.codex-row > img { width:48px; height:48px; object-fit:contain; }.codex-row > img.undiscovered { opacity:.48; }.codex-row > span { display:grid; gap:3px; min-width:0; }.codex-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.codex-row small { color:#758376; font-size:11px; }.codex-kill-count { text-align:right; }.codex-row > b { color:#90a293; }
.codex-detail { display:block; padding:20px; }.codex-detail-top { display:flex; gap:19px; padding-right:15px; }.codex-detail-art { flex:none; width:115px; }.codex-detail-art img { width:110px; height:125px; }.codex-detail h2 { margin:0 0 6px; }.codex-stats { display:flex; gap:15px; }.codex-stats > span { display:grid; color:#748176; font-size:11px; }.codex-stats strong { color:#283c2d; font-size:16px; }.codex-goal { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-top:18px; padding:14px 2px 19px; border-block:1px solid #e5ebe5; }.codex-goal span { color:#788779; font-size:11px; }.codex-goal i { position:absolute; left:0; bottom:0; height:3px; border-radius:3px; background:#64a971; }.codex-drops span { background:#f4f7f3; }.codex-hunters { display:grid; gap:6px; color:#839184; font-size:11px; }.codex-hunters > span { display:flex; gap:11px; padding:7px 0; border-bottom:1px solid #e9eee8; color:#344a39; }.codex-hunters b { color:#859686; }.codex-hunters strong { margin-left:auto; }
@media(max-width:950px) { .arena-opponent-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { .illustrated-header { height:210px; margin:-30px -17px 0; }.illustrated-header h1 { left:18px; bottom:57px; }.location-header + .location-list { margin:-30px -17px 0; padding:22px 17px 30px; }.location-row { grid-template-rows:205px 70px; }.location-monster-strip-art img { width:45px; }.pvp-content { margin-top:-29px; }.arena-showcase { height:245px; }.arena-showcase canvas { width:46%; height:235px; }.arena-rank img { width:52px; height:52px; }.arena-showcase-copy { left:15px; }.arena-opponent-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.codex-tools { display:block; }.codex-tools label { margin-top:8px; }.codex-detail-top { display:block; }.leaderboard-heading { flex-wrap:wrap; }.leaderboard-heading label { width:100%; }.leaderboard-heading select { max-width:none; } }

/* The location illustration and monster strip share one continuous card. */
.location-row { align-items:stretch; }
.location-image, .location-monster-strip { align-self:stretch; width:100%; height:100%; }
.location-image > img { display:block; width:100%; height:100%; object-fit:cover; }
.location-monster-strip { border-top:0; }

/* Companions use the native SVG art in the same stage as the character. */
.pet-follower { position:absolute; z-index:3; width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 5px 3px rgba(18,31,23,.18)); animation:pet-breathe 3.2s ease-in-out infinite; }
.pet-follower > img:first-child { width:100%; height:100%; object-fit:contain; }
.pet-follower > .pet-accessory { position:absolute; left:20%; top:-8%; width:58%; height:40%; object-fit:contain; }
.combat-player-art { position:relative; width:min(100%,230px); height:330px; }
.combat-player-art canvas { width:100%; height:100%; }
.combat-pet { left:0; bottom:0; width:34%; height:28%; }
.skill-pet { left:21%; bottom:5%; width:12%; height:18%; }
.profile-pet { left:calc(50% - 105px); bottom:34px; width:65px; height:65px; }
@keyframes pet-breathe { 50% { transform:translateY(-5px); } }
@media(prefers-reduced-motion:reduce) { .pet-follower { animation:none; } }

/* The SVG is the actual iOS name tag artwork. */
.player-name-tag { display:inline-flex; align-items:center; justify-content:center; min-width:75px; min-height:27px; padding:4px 16px; white-space:nowrap; }
.player-name-tag.has-art { background-image:var(--tag-art); background-size:100% 100%; background-repeat:no-repeat; color:#fff; text-shadow:0 1px 2px rgba(20,25,30,.5); }
.leaderboard-player .player-name-tag { font-size:14px; }

/* The scene and controls follow the native combat hierarchy on small screens. */
.combat-stage { background:#82957e; }
.combat-actor { position:relative; }
.combat-actor > strong { border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(12px); }
.combat-toolbar { border-block:0; }
.combat-stance-list button { box-shadow:inset 0 1px rgba(255,255,255,.7),0 2px 5px rgba(20,35,25,.05); }
.combat-toolbar-actions .primary-button { background:linear-gradient(180deg,#48a1ed,#0874c8); border-color:#2676b3; color:#fff; }
.combat-toolbar-actions .text-button { background:linear-gradient(180deg,#ef6363,#cc3d49); }
.combat-extra { align-items:end; padding:16px 0; }
.combat-extra > #combat-use-item { min-height:43px; background:linear-gradient(180deg,#2b87dc,#116bb5); color:#fff; }
@media(max-width:620px) {
  .combat-stage { height:min(69vh,610px); min-height:465px; border-radius:22px; }
  .combat-scene-layer { height:72%; }
  .combat-ground-layer { height:29%; }
  .combat-actors { grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); padding:10px 10px 150px; }
  .combat-player-art,.combat-monster-art { width:100%; height:clamp(210px,42vh,330px); }
  .combat-player-art canvas,.combat-monster-art img { width:100%; height:100%; }
  .combat-versus { margin-bottom:70px; }
  .combat-health-row { margin:-137px 13px 53px; gap:18px; }
  .combat-health > span { display:grid; gap:4px; font-size:12px; }
  .combat-health-track { height:15px; }
  .combat-toolbar { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:'actions stances' 'ammo stances'; gap:10px; padding:0 0 18px; }
  .combat-stance-list { gap:8px; }
  .combat-stance-list button { min-height:55px; font-size:12px; }
  .combat-toolbar-actions { display:grid; gap:9px; }
  .combat-toolbar-actions .primary-button,.combat-toolbar-actions .text-button { width:100%; min-height:58px; }
  .combat-details { gap:10px 18px; }
  .combat-extra { gap:8px; }
}

.gem-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:178px; padding:28px 32px; border-radius:24px; background:radial-gradient(circle at 78% 40%,#7652b7 0,#3c285d 42%,#1b1533 100%); color:#fff; }
.gem-hero h1 { margin:8px 0; font:700 clamp(32px,4vw,48px) var(--serif); }
.gem-hero p { margin:0; color:#ddd2ed; }
.gem-hero .eyebrow { color:#cbb5ee; }
.gem-balance { display:grid; justify-items:center; min-width:122px; padding:17px 23px; border:1px solid rgba(255,255,255,.25); border-radius:20px; background:rgba(255,255,255,.12); backdrop-filter:blur(16px); }
.gem-balance > span { color:#e1bbff; font-size:28px; }
.gem-balance strong { font-size:27px; }
.gem-balance small { color:#dfd2ed; }
.gem-tabs { margin:20px 0 30px; }
.gem-offers { display:grid; gap:0; margin-bottom:28px; border-top:1px solid #e3e8e1; }
.gem-offer { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:75px; border-bottom:1px solid #e3e8e1; }
.gem-offer > .gem-upgrade-art { width:52px; height:52px; object-fit:contain; flex:0 0 52px; }
.gem-offer > div { display:grid; gap:4px; flex:1; min-width:0; }.gem-offer span,.gem-intro { color:#738073; font-size:12px; }
.gem-offer button { min-width:105px; padding:10px 14px; border:0; border-radius:11px; background:#7546b5; color:#fff; font-weight:700; }
.gem-offer button:disabled { background:#ece9ee; color:#8a8490; }
.gem-packs { max-width:650px; }.gem-packs p { color:#68746d; line-height:1.5; }
.gem-pack-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0; }
.gem-pack-list span { padding:17px; border:1px solid #e3ddeb; border-radius:15px; background:#f7f2fb; color:#664097; text-align:center; font-weight:700; }
.gem-cosmetics { display:grid; gap:0; margin-bottom:30px; border-top:1px solid #e3e8e1; }
.gem-cosmetics button { display:flex; align-items:center; justify-content:space-between; min-height:59px; padding:0 4px; border:0; border-bottom:1px solid #e3e8e1; background:transparent; color:#33483a; text-align:left; font-weight:600; }
.gem-cosmetics button span { color:#8c6db5; font-size:23px; }
.pet-feature { display:flex; align-items:center; gap:24px; min-height:190px; padding:20px 28px; border-radius:20px; background:linear-gradient(120deg,#dbeadf,#eef4e9); }
.pet-feature img { width:140px; height:140px; object-fit:contain; }.pet-feature h2 { margin:4px 0; font:700 30px var(--serif); }.pet-feature p { color:#617365; }
.pet-collection { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-top:24px; }
.pet-card { display:grid; grid-template-columns:74px 1fr; align-items:center; gap:8px; min-height:130px; padding:12px; border:1px solid #e0e9e0; border-radius:16px; background:#fff; }
.pet-card.is-active { border-color:#83b696; background:#f4fbf5; }.pet-card img { width:74px; height:80px; object-fit:contain; grid-row:span 2; }.pet-card div { display:grid; gap:4px; }.pet-card small { color:#758677; }
.pet-card button { align-self:end; width:max-content; padding:7px 10px; border:1px solid #cbdccc; border-radius:9px; background:#f0f7ef; color:#315b3c; font-weight:700; }.pet-card button:disabled { opacity:.55; }
.pet-unillustrated { display:grid; place-items:center; width:74px; height:80px; border-radius:14px; background:#e7eee9; color:#5d7263; font:600 11px var(--sans); text-align:center; }
.pet-follower .pet-unillustrated { width:100%; height:100%; padding:8px; }
@media(max-width:620px) { .gem-hero { padding:20px; }.gem-balance { min-width:80px; padding:12px; }.gem-pack-list { grid-template-columns:repeat(2,1fr); }.pet-feature { padding:16px; }.pet-feature img { width:95px; height:95px; } }
.ring-shader .ring-glow { filter:blur(3px); }
.ring-shader .ring-sheen { mix-blend-mode:screen; opacity:.75; }
.ring-shader .ring-fill { filter:drop-shadow(0 0 2px rgba(255,255,255,.55)); }
.combat-interface { overflow:hidden; border-radius:21px; background:linear-gradient(180deg,transparent 30%,rgba(236,244,239,.93) 56%,rgba(243,248,244,.96) 100%),var(--combat-ground) center bottom/cover, var(--combat-floor); }
.combat-interface .combat-stage { border-radius:21px 21px 0 0; }
.combat-interface .combat-toolbar,.combat-interface .combat-details,.combat-interface .combat-extra { padding-left:23px; padding-right:23px; }
.combat-interface .combat-health-row { margin-bottom:14px; }
.combat-interface .combat-details { padding-top:10px; padding-bottom:12px; }
.combat-interface .combat-extra { padding-bottom:22px; border:0; }
.arena-pet { z-index:3; right:26%; bottom:5px; width:67px; height:67px; }
.player-name-tag.has-art { --tag-cap:24px; display:inline-flex; height:40px; min-width:112px; min-height:0; padding:0 calc(var(--tag-cap) + 3px); background-image:var(--tag-left),var(--tag-right),var(--tag-middle); background-size:var(--tag-cap) 100%,var(--tag-cap) 100%,calc(100% - var(--tag-cap) - var(--tag-cap)) 100%; background-position:left center,right center,center center; background-repeat:no-repeat; color:var(--tag-ink); font-size:14px; line-height:1; text-shadow:0 1px 1px rgba(20,24,29,.34); }
.page-heading h1 .player-name-tag.has-art { --tag-cap:39px; height:66px; min-width:185px; padding-inline:47px; font-size:26px; }
.combat-actor .player-name-tag.has-art,.arena-character-name .player-name-tag.has-art { --tag-cap:22px; height:36px; min-width:100px; padding-inline:26px; font-size:14px; }
.arena-opponent .player-name-tag.has-art { --tag-cap:19px; height:32px; min-width:90px; padding-inline:23px; font-size:12px; }
.leaderboard-native-row.has-tag,.leaderboard-native-row.is-you.has-tag { --tag-cap:50px; min-height:88px; padding:16px 57px; border:0; border-radius:0; background-image:var(--tag-left),var(--tag-right),var(--tag-middle); background-size:var(--tag-cap) 100%,var(--tag-cap) 100%,calc(100% - var(--tag-cap) - var(--tag-cap)) 100%; background-position:left center,right center,center center; background-repeat:no-repeat; background-color:transparent; color:var(--tag-ink); }
.leaderboard-native-row.has-tag .leaderboard-place,.leaderboard-native-row.has-tag .leaderboard-player small,.leaderboard-native-row.has-tag .leaderboard-value small,.leaderboard-native-row.has-tag .leaderboard-value strong { color:var(--tag-ink); }
.leaderboard-native-row.has-tag .leaderboard-player strong { font-size:15px; }
.leaderboard-native-row.has-tag canvas { background:transparent; }
@media(max-width:620px) { .leaderboard-native-row.has-tag,.leaderboard-native-row.is-you.has-tag { --tag-cap:31px; min-height:71px; padding:10px 36px; grid-template-columns:19px 35px minmax(0,1fr) auto; gap:6px; }.leaderboard-native-row.has-tag canvas { width:35px; height:35px; }.leaderboard-native-row.has-tag .leaderboard-player strong { font-size:12px; } }
@media(max-width:620px) {
  .combat-interface { margin-inline:-8px; border-radius:20px; }
  .combat-interface .combat-stage { border-radius:20px 20px 0 0; }
  .combat-interface .combat-health-row { margin-bottom:32px; }
  .combat-interface .combat-toolbar,.combat-interface .combat-details,.combat-interface .combat-extra { padding-left:14px; padding-right:14px; }
  .combat-interface .combat-stance-list button { background:rgba(255,255,255,.75); backdrop-filter:blur(10px); }
  .combat-interface .combat-stance-list button.active { background:linear-gradient(#ffb85a,#e18130); }
  .arena-pet { right:34%; width:51px; height:51px; }
}

/* Battle screen: the entire scene is one surface, with no overlapping controls. */
.battle-arena { position:relative; isolation:isolate; display:grid; grid-template-rows:62px 330px 90px auto auto minmax(70px,1fr) auto; min-height:780px; align-content:start; overflow:hidden; border-radius:20px; background:var(--battle-floor); color:#fff; }
.battle-scene,.battle-ground { position:absolute; z-index:-2; left:0; width:100%; pointer-events:none; }
.battle-scene { top:0; height:56%; object-fit:cover; object-position:center 42%; }
.battle-ground { bottom:0; height:58%; object-fit:cover; object-position:center bottom; }
.battle-arena::before { position:absolute; z-index:-1; inset:0; content:""; background:linear-gradient(180deg,rgba(15,28,26,.12) 0%,transparent 28%,rgba(17,36,30,.16) 42%,rgba(25,43,35,.76) 55%,rgba(24,39,33,.88) 100%); pointer-events:none; }
.battle-top { display:flex; align-items:center; gap:14px; padding:10px 21px; font-size:13px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.battle-top button { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.58); border-radius:50%; background:rgba(246,252,247,.22); backdrop-filter:blur(12px); color:#fff; font-size:32px; line-height:1; }
.battle-level { margin-left:auto; padding:7px 12px; border-radius:999px; background:rgba(20,38,31,.58); backdrop-filter:blur(8px); }
.battle-actors { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:30px; padding:0 8% 8px; }
.battle-actor { display:grid; justify-items:center; align-content:end; min-width:0; height:100%; }
.battle-hero,.battle-monster { position:relative; display:grid; place-items:end center; width:min(100%,230px); height:270px; }
.battle-hero canvas { display:block; width:100%; height:100%; }.battle-monster img { width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 6px 4px rgba(17,25,19,.2)); }
.battle-actor > strong { display:grid; place-items:center; min-height:34px; max-width:100%; margin-top:2px; padding:0 12px; border-radius:9px; background:rgba(246,251,246,.83); color:#2c4230; font-size:14px; white-space:nowrap; }
.battle-actor > .player-name-tag.has-art { --tag-cap:22px; height:37px; min-width:104px; padding-inline:26px; background-color:transparent; font-size:14px; }
.battle-hero .combat-pet { left:0; bottom:0; width:31%; height:31%; }
.battle-status { display:grid; grid-template-columns:1fr 1fr; align-content:end; gap:28px; padding:4px 6% 10px; }
.battle-status > div { display:grid; gap:8px; min-width:0; }.battle-status span { display:flex; align-items:center; justify-content:space-between; gap:7px; font-size:13px; text-shadow:0 1px 2px rgba(0,0,0,.4); }.battle-status b { font-weight:500; }
.battle-health-track { display:block; height:15px; overflow:hidden; border-radius:999px; background:rgba(11,25,20,.51); box-shadow:inset 0 1px 2px rgba(5,15,9,.3); }.battle-health-track > i { display:block; height:100%; border-radius:inherit; background:linear-gradient(#70dd8d,#1d9d55); transition:width .3s ease; }.battle-health-track.enemy > i { background:linear-gradient(#f58b8c,#bf3543); }
.battle-controls { display:grid; grid-template-columns:minmax(150px,1fr) minmax(190px,1fr); gap:24px; padding:13px 6% 20px; }.battle-commands { display:grid; align-content:start; gap:11px; }.battle-commands button { min-height:60px; border:1px solid rgba(255,255,255,.32); border-radius:16px; color:#fff; font-size:16px; font-weight:700; box-shadow:inset 0 1px rgba(255,255,255,.32); }.battle-start { background:linear-gradient(#41c96b,#218b47); }.battle-start:disabled { opacity:.74; }.battle-end { background:linear-gradient(#ef6767,#ce3f4a); }
.battle-stance-list { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.battle-stance-list button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:54px; border:1px solid rgba(255,255,255,.16); border-radius:15px; background:linear-gradient(#464b49,#292e2d); color:#f7f9f7; font-size:15px; box-shadow:inset 0 1px rgba(255,255,255,.12); }.battle-stance-list button.active { border-color:#e9b271; background:linear-gradient(#f8ad59,#bf712d); }.battle-stance-list button[data-stance="magic"],.battle-stance-list button[data-stance="ranged"],.battle-stance-list #combat-prayer-toggle { grid-column:span 2; }.battle-stance-list button span { font-size:18px; line-height:1; }
.battle-ammo,.battle-prayers { padding:0 6% 15px; }.battle-ammo label { display:grid; gap:5px; max-width:320px; font-size:11px; }.battle-ammo select { min-height:42px; padding:7px; border:1px solid rgba(255,255,255,.3); border-radius:10px; background:#2e453b; color:#fff; }
.battle-prayers { display:flex; flex-wrap:wrap; gap:7px; }.battle-prayers button { display:grid; gap:2px; padding:8px 11px; border:1px solid rgba(255,255,255,.25); border-radius:9px; background:rgba(14,30,24,.65); color:#fff; }.battle-prayers button.active { background:#336c58; }.battle-prayers small { opacity:.7; }
.battle-dock { display:flex; align-items:end; gap:12px; min-height:78px; padding:0 6% 12px; }.battle-food { display:grid; gap:5px; flex:1; max-width:300px; font-size:11px; }.battle-food select { min-height:48px; width:100%; padding:9px; border:1px solid rgba(255,255,255,.3); border-radius:12px; background:rgba(226,239,227,.22); color:#fff; backdrop-filter:blur(10px); }.battle-food option { color:#223329; }.battle-dock > button { min-width:165px; min-height:49px; margin-left:auto; border:1px solid #4eb0ee; border-radius:13px; background:linear-gradient(#349bea,#086bbd); color:#fff; font-size:16px; font-weight:700; }.battle-dock > span { color:#cbd8cd; font-size:12px; }
.battle-details { margin:0 6% 13px; color:#dce8db; font-size:11px; }.battle-details summary { width:max-content; cursor:pointer; opacity:.8; }.battle-details > div { display:flex; flex-wrap:wrap; gap:8px 18px; padding:10px 0; }.battle-details b { color:#fff; }
@media(max-width:620px) { .battle-arena { grid-template-rows:54px 330px 105px auto auto minmax(70px,1fr) auto; min-height:900px; margin:0 -12px; border-radius:18px; }.battle-top { padding:7px 14px; }.battle-actors { gap:10px; padding:0 5% 4px; }.battle-hero,.battle-monster { width:100%; height:285px; }.battle-actor > strong { min-height:32px; font-size:12px; }.battle-status { gap:20px; padding:5px 5% 10px; }.battle-status span { display:grid; gap:2px; font-size:12px; }.battle-controls { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:13px; padding:9px 5% 18px; }.battle-commands button { min-height:63px; font-size:14px; }.battle-stance-list { gap:8px; }.battle-stance-list button { min-height:57px; font-size:13px; }.battle-dock { padding:8px 5% 16px; }.battle-dock > button { min-width:125px; font-size:14px; }.battle-ammo,.battle-prayers { padding-inline:5%; }.battle-details { margin-inline:5%; } }
.battle-arena { display:flex; flex-direction:column; }
.battle-top { flex:none; min-height:62px; }
.battle-actors { flex:none; height:330px; }
.battle-status { flex:none; min-height:90px; }
.battle-controls { flex:none; }
.battle-dock { margin-top:auto; }
@media(max-width:620px) { .battle-top { min-height:54px; }.battle-actors { height:330px; }.battle-status { min-height:105px; } }

/* A persistent, mobile-inspired activity and toast accessory for the web layout. */
.game-accessory[hidden] { display:none; }
.game-accessory { position:fixed; z-index:95; left:50%; bottom:max(18px, env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:center; gap:12px; width:max-content; min-width:280px; max-width:min(520px, calc(100vw - 28px)); min-height:62px; padding:8px 10px 8px 12px; border:1px solid rgba(255,255,255,.9); border-radius:999px; background:rgba(241,249,246,.82); box-shadow:0 8px 30px rgba(29,54,55,.15), inset 0 1px rgba(255,255,255,.8); backdrop-filter:blur(24px) saturate(1.35); -webkit-backdrop-filter:blur(24px) saturate(1.35); color:#203b37; }
.accessory-icon { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:50%; background:rgba(194,227,224,.7); }
.accessory-icon img { width:26px; height:26px; object-fit:contain; }
.accessory-notice { color:#2187a4; font-size:23px; }
.accessory-copy { display:grid; gap:2px; min-width:0; flex:1; line-height:1.15; }
.accessory-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:700; }
.accessory-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#657874; font-size:12px; }
.game-accessory button { flex:none; display:grid; place-items:center; border:1px solid rgba(87,126,127,.18); cursor:pointer; }
.accessory-view { min-width:62px; min-height:38px; padding:0 11px; border-radius:999px; background:rgba(255,255,255,.72); color:#245e66; font:600 12px 'DM Sans',sans-serif; }
.accessory-stop { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.5); color:#58716b; font-size:22px; line-height:1; }
.game-accessory.is-toast { min-width:0; padding-right:21px; }
.game-accessory.is-toast .accessory-copy strong { white-space:normal; line-height:1.3; }
@media(max-width:620px) { .game-accessory { bottom:max(12px, env(safe-area-inset-bottom)); gap:9px; min-height:58px; padding:7px 8px 7px 9px; }.accessory-icon { width:39px; height:39px; }.accessory-copy strong { font-size:13px; }.accessory-copy small { font-size:11px; }.accessory-view { min-width:50px; }.accessory-stop { width:32px; height:32px; } }
@media(max-width:620px) { .workspace-content { padding-bottom:110px; }.inventory-rail { padding-bottom:110px; } }

/* The native tag uses one 240×80 master with fixed 48-unit caps. */
.player-name-tag.has-art { border:1px solid transparent; background:none; border-image-source:var(--tag-art); border-image-slice:0 48 fill; border-image-width:0 var(--tag-cap); border-image-repeat:stretch; }
.leaderboard-native-row.has-tag,.leaderboard-native-row.is-you.has-tag { box-sizing:border-box; width:100%; min-width:0; overflow:hidden; border:1px solid transparent; background:none; border-image-source:var(--tag-art); border-image-slice:0 48 fill; border-image-width:0 var(--tag-cap); border-image-repeat:stretch; }
.leaderboard-native-row.has-tag .leaderboard-player strong { display:block; min-width:0; }
.leaderboard-native-row.has-tag .leaderboard-value { min-width:47px; }

/* Anchor the hero to one actor slot while its canvas allows aura and trail effects to extend. */
.battle-actor { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.battle-hero { display:block; flex:none; overflow:hidden; }
.battle-hero canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
.battle-hero .combat-pet { position:absolute; z-index:2; }

.game-accessory.has-rewards { min-width:340px; max-width:min(620px,calc(100vw - 28px)); border-radius:24px; }
.game-accessory.has-rewards .accessory-icon { width:49px; height:49px; }
.game-accessory.has-rewards .accessory-icon img { width:42px; height:42px; }
.accessory-rewards { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:5px; }
.accessory-reward { display:inline-flex; align-items:center; gap:3px; min-height:23px; padding:2px 5px; border-radius:999px; background:rgba(255,255,255,.65); color:#2e6643; font-size:11px; }
.accessory-reward img { width:19px; height:19px; object-fit:contain; }
.accessory-reward .fallback { font-size:16px; }
.accessory-reward b { font-weight:700; white-space:nowrap; }
.accessory-gold { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:linear-gradient(#fce592,#e5a937); color:#7b561d; font-size:11px; }
.accessory-extra { color:#6c8177; font-size:10px; }
@media(max-width:620px) { .game-accessory.has-rewards { min-width:0; width:calc(100vw - 42px); }.game-accessory.has-rewards .accessory-icon { width:42px; height:42px; }.game-accessory.has-rewards .accessory-icon img { width:37px; height:37px; }.accessory-reward { font-size:10px; } }

.battle-actor { position:relative; }
.battle-hero { overflow:visible; }
.battle-hero canvas { inset:auto; left:-50%; top:-35%; width:200%; height:170%; pointer-events:none; }
.dungeon-auto { min-height:42px; border:1px solid rgba(220,238,226,.42); border-radius:13px; background:rgba(16,34,28,.58); color:#f2fff4; font-weight:700; cursor:pointer; }
.dungeon-auto.active { background:linear-gradient(135deg,#258f54,#36b675); border-color:#98e3b4; }
.battle-splats { position:absolute; z-index:8; top:30%; left:50%; width:0; height:0; pointer-events:none; }
.battle-splat { position:absolute; display:grid; place-items:center; width:72px; height:72px; margin-left:-36px; margin-top:-36px; background:center/contain no-repeat; color:#fff; font:800 23px 'DM Sans',sans-serif; text-shadow:0 2px 3px #271b1b,0 0 8px #5b2626; animation:battle-splat-rise 1.15s ease-out forwards; }
.battle-splat.is-hit:not(.has-art) { background:#c43a4b; clip-path:polygon(50% 0%,60% 17%,78% 5%,80% 27%,100% 30%,87% 49%,100% 68%,78% 73%,75% 96%,56% 84%,39% 100%,31% 80%,9% 85%,14% 62%,0% 49%,19% 37%,7% 17%,32% 21%); }
.battle-splat.is-miss { color:#eff6ff; font-size:19px; }
.battle-splat.is-miss:not(.has-art) { background:#447fac; clip-path:polygon(50% 0%,60% 17%,78% 5%,80% 27%,100% 30%,87% 49%,100% 68%,78% 73%,75% 96%,56% 84%,39% 100%,31% 80%,9% 85%,14% 62%,0% 49%,19% 37%,7% 17%,32% 21%); }
@keyframes battle-splat-rise { 0% { opacity:0; transform:translateY(18px) scale(.55); } 16% { opacity:1; transform:translateY(0) scale(1.14); } 45% { transform:translateY(-10px) scale(1); } 100% { opacity:0; transform:translateY(-40px) scale(.88); } }
@media(prefers-reduced-motion:reduce) { .battle-splat { animation-duration:.6s; } }

.dungeon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin:0 0 30px; }
.dungeon-card { display:grid; overflow:hidden; min-width:0; padding:0; border:1px solid #cbd8d1; border-radius:18px; background:#fff; color:#26352f; text-align:left; cursor:pointer; }
.dungeon-mastery { border:2px solid #8b65b3; }
.dungeon-mastery .dungeon-card-art { background:linear-gradient(0deg,rgba(49,20,72,.9),rgba(49,20,72,.2) 72%),var(--dungeon-art) center/cover; }
.dungeon-card-art { display:flex; align-items:end; justify-content:space-between; min-height:150px; gap:8px; padding:16px; background:linear-gradient(0deg,rgba(13,31,26,.83),transparent 72%),var(--dungeon-art) center/cover; color:#fff; }
.dungeon-card-art strong { font:700 24px var(--serif); }.dungeon-card-art small { flex:none; align-self:start; padding:6px 9px; border-radius:99px; background:rgba(14,31,29,.75); font-weight:700; }
.dungeon-card-info { display:grid; gap:11px; padding:12px 16px 15px; font-size:12px; }.dungeon-card-monsters { display:flex; align-items:center; gap:4px; height:47px; }.dungeon-card-monsters img { height:46px; width:42px; object-fit:contain; }.dungeon-card-reward { display:flex; align-items:center; gap:6px; color:#526958; font-weight:700; }.dungeon-card-reward img { width:27px; height:27px; object-fit:contain; }
.dungeon-card-requirement { color:#9a552b; font-weight:700; }

.offline-dialog { width:min(520px,calc(100vw - 28px)); max-height:min(78dvh,760px); padding:25px; border:1px solid #e2eae5; border-radius:24px; background:#f9fbf8; color:#26362e; box-shadow:0 24px 75px rgba(16,32,25,.25); }.offline-dialog::backdrop { background:rgba(13,27,25,.56); backdrop-filter:blur(5px); }.offline-heading h2 { margin:5px 0 2px; font:700 32px var(--serif); }.offline-heading p { margin:0 0 20px; color:#748477; }.offline-rows { display:grid; gap:3px; max-height:53dvh; overflow:auto; padding-right:3px; }.offline-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; min-height:58px; padding:7px 5px; border-bottom:1px solid #e6ede7; }.offline-row-icon { display:grid; place-items:center; width:40px; height:40px; }.offline-row-icon img { max-width:36px; max-height:36px; object-fit:contain; }.offline-row > span:nth-child(2) { display:grid; gap:2px; }.offline-row strong { font-size:13px; }.offline-row small { color:#7b897e; font-size:11px; }.offline-row b { color:#288d52; font-size:13px; white-space:nowrap; }.offline-row b.is-loss { color:#bb4950; }.offline-dialog .primary-button { width:100%; margin-top:20px; }.offline-empty { padding:25px 0; color:#758376; }

.container-ritual,.enchant-ritual { display:grid; justify-items:center; gap:8px; min-height:320px; padding:16px 3px 20px; text-align:center; }.container-ritual h2,.enchant-ritual h2 { margin:2px 0 0; font:700 26px var(--serif); }.container-ritual p,.enchant-ritual p { margin:0; color:#738076; font-size:13px; white-space:pre-line; }.container-ritual-stage,.enchant-sigil { position:relative; display:grid; place-items:center; width:220px; height:220px; isolation:isolate; }.container-ritual-stage::before,.enchant-sigil::before { position:absolute; z-index:-1; inset:20px; content:""; border-radius:50%; background:radial-gradient(circle,#d0f1e6 3%,#e8f8f0 45%,transparent 73%); animation:ritual-pulse 1.3s ease-in-out infinite alternate; }.container-ritual-art { z-index:2; display:grid; place-items:center; width:120px; height:120px; animation:container-wake .65s ease-in-out infinite alternate; }.container-ritual-art img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(32,65,53,.26)); }.ritual-halo { position:absolute; inset:25px; border:3px solid rgba(79,193,165,.38); border-radius:50%; box-shadow:0 0 30px #8addbb; animation:ritual-spin 1.8s linear infinite; }.ritual-shard { position:absolute; z-index:3; top:48%; left:48%; width:13px; height:28px; clip-path:polygon(45% 0,100% 53%,55% 100%,0 47%); background:#b2f8e8; opacity:0; }.container-ritual.is-burst .container-ritual-art { animation:container-burst .4s ease-out forwards; }.container-ritual.is-burst .ritual-shard { animation:shard-burst .48s ease-out forwards; }.container-ritual.is-burst .shard-two { --dx:-80px; --dy:48px; animation-delay:.04s; }.container-ritual.is-burst .shard-three { --dx:75px; --dy:53px; animation-delay:.08s; }.container-ritual.is-burst .shard-one { --dx:8px; --dy:-80px; }
.container-result .container-drops > span { animation:reward-appear .4s ease-out both; animation-delay:calc(var(--reveal-index) * 95ms); }.container-result .primary-button { width:100%; margin-top:18px; }
.enchant-sigil { width:230px; height:230px; }.enchant-sigil > img { position:absolute; width:100%; height:100%; object-fit:contain; }.enchant-ring-inner { transform:scale(.82); }.is-channeling .enchant-ring-outer { animation:ritual-spin 5s linear infinite; }.is-channeling .enchant-ring-inner { animation:ritual-spin-reverse 7s linear infinite; }.enchant-item-art { z-index:1; display:grid; place-items:center; width:80px; height:80px; animation:enchant-float 1.3s ease-in-out infinite alternate; }.enchant-item-art img { max-width:100%; max-height:100%; object-fit:contain; }.enchant-ritual.is-success .enchant-sigil::before { background:radial-gradient(circle,#a9f3d3,transparent 70%); }.enchant-ritual.is-failure .enchant-sigil::before { background:radial-gradient(circle,#f4c0a1,transparent 70%); }.enchant-outcome-icon { width:38px; height:38px; animation:reward-appear .4s ease-out both; }.enchant-ritual .primary-button { width:100%; margin-top:8px; }.ritual-error { padding:25px 0; }.ritual-error p { color:#a84e49; }.ritual-error .primary-button { width:100%; margin-top:15px; }
@keyframes ritual-pulse { to { opacity:.55; transform:scale(1.1); } }@keyframes ritual-spin { to { transform:rotate(360deg); } }@keyframes ritual-spin-reverse { to { transform:scale(.82) rotate(-360deg); } }@keyframes container-wake { to { transform:translateY(-8px) rotate(4deg); } }@keyframes container-burst { to { opacity:0; transform:scale(1.6) rotate(15deg); } }@keyframes shard-burst { 15% { opacity:1; }to { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(65deg); } }@keyframes reward-appear { from { opacity:0; transform:translateY(16px) scale(.94); }to { opacity:1; transform:none; } }@keyframes enchant-float { to { transform:translateY(-7px); } }
@media(prefers-reduced-motion:reduce) { .container-ritual-art,.ritual-halo,.enchant-sigil::before,.is-channeling .enchant-ring-outer,.is-channeling .enchant-ring-inner,.enchant-item-art { animation:none; }.container-result .container-drops > span { animation-duration:.01s; animation-delay:0ms; } }

/* Parity screens share one calm, readable card language. */
.bank-tab-strip,.bank-toolbar,.equipment-set-tabs,.stake-tabs,.guide-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:15px 0; }
.bank-tab-strip button,.equipment-set-tabs button,.stake-tabs button { min-height:40px; padding:8px 13px; border:1px solid #cbd9d2; border-radius:12px; background:#fff; color:#34453d; cursor:pointer; font-weight:700; }
.bank-tab-strip button.active,.equipment-set-tabs button.active,.stake-tabs button.active { border-color:#7fb5ae; background:#dff1ee; color:#194e4a; }
.bank-tab-strip [data-bank-tab] { border-bottom:4px solid var(--tab-color); }
.bank-toolbar label,.bank-tab-editor label,.account-form label,.stake-form label { display:grid; gap:5px; color:#53665b; font-size:12px; font-weight:700; }
.bank-toolbar input,.bank-toolbar select,.bank-tab-editor input,.account-form input,.account-form select,.stake-form input { min-height:42px; padding:8px 11px; border:1px solid #ccd9d2; border-radius:10px; background:#fff; color:#203329; font:inherit; }
.bank-tab-editor { display:flex; align-items:end; gap:10px; flex-wrap:wrap; padding:15px; border:1px solid #d6e5da; border-radius:15px; background:#f4faf6; }
.bank-grid,.slayer-shop,.account-character-grid,.pet-collection { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px; margin:15px 0 23px; }
.bank-item,.slayer-offer,.account-character,.pet-card { display:flex; align-items:center; gap:10px; min-width:0; padding:12px; border:1px solid #dce8df; border-radius:14px; background:#fff; }
.bank-item { flex-direction:column; align-items:stretch; }
.bank-item > button { display:flex; align-items:center; gap:9px; border:0; background:none; text-align:left; color:inherit; cursor:pointer; }
.bank-item img,.slayer-offer-art img { width:43px; height:43px; object-fit:contain; }
.bank-item span,.slayer-offer > div,.account-character > div { display:grid; min-width:0; gap:3px; }
.bank-item small,.slayer-offer small,.account-character span { color:#7a8980; font-size:11px; }
.bank-item label { display:grid; gap:3px; color:#6e8075; font-size:10px; }
.bank-item select { width:100%; min-height:32px; border:1px solid #dce8df; border-radius:8px; background:#f7faf7; }
.bank-upgrade { margin-bottom:25px; }
.bank-equipment-list { display:grid; gap:8px; }
.bank-equipment-list > div { display:flex; justify-content:space-between; align-items:center; min-height:58px; padding:8px 13px; border:1px solid #dde8df; border-radius:12px; background:#f7faf8; }
.bank-equipment-list button { display:flex; align-items:center; gap:7px; border:0; background:none; color:#234637; cursor:pointer; font-weight:700; }
.bank-equipment-list img { width:38px; height:38px; object-fit:contain; }
.bank-help { color:#738579; font-size:12px; }
.slayer-coins { display:flex; align-items:center; gap:5px; color:#7a5124; }.slayer-coins img { width:30px; height:30px; }.slayer-coins span { font-size:11px; }
.slayer-task-card { display:flex; align-items:center; gap:20px; padding:18px; border:1px solid #d6e5d8; border-radius:18px; background:linear-gradient(130deg,#e9f3ea,#fff); }
.slayer-task-art { display:grid; place-items:center; flex:none; width:105px; height:105px; }.slayer-task-art img { width:100%; height:100%; object-fit:contain; }
.slayer-task-card > div { flex:1; }.slayer-task-card h2 { margin:4px 0; font:700 26px var(--serif); }.slayer-task-card p { color:#6b7c70; font-size:12px; }
.slayer-progress,.codex-goal { position:relative; height:9px; overflow:hidden; border-radius:99px; background:#d6e3d9; }.slayer-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#59a662,#8bd4a3); transition:width .45s ease; }
.slayer-control,.slayer-offer { display:flex; align-items:center; gap:12px; }.slayer-control { justify-content:space-between; margin:14px 0 25px; padding:14px; border:1px solid #dce8df; border-radius:15px; background:#fff; }
.slayer-control > div { display:grid; gap:4px; }.slayer-control span { color:#728376; font-size:12px; }.slayer-control button,.slayer-offer button,.account-character button,.pet-card button { min-height:37px; padding:7px 10px; border:1px solid #a7cabc; border-radius:9px; background:#e5f3ec; color:#235740; cursor:pointer; font-weight:700; }
.slayer-control button.active { background:#3a9a61; color:#fff; }.slayer-offer > div { flex:1; }.slayer-offer label { display:grid; font-size:10px; }.slayer-offer input { width:50px; }
.account-character > div { flex:1; }.account-form,.guide-card,.stake-form,.stake-detail { display:grid; gap:14px; max-width:750px; margin:15px 0; padding:20px; border:1px solid #dce8df; border-radius:18px; background:#fff; }.account-form h2,.guide-card h2,.stake-form h2,.stake-detail h2 { margin:0; font:700 26px var(--serif); }.account-form h3 { margin:0; }.account-form p,.guide-card p,.stake-form p { margin:0; color:#728076; }.account-form > button { width:max-content; }.account-unlocks { display:flex; flex-wrap:wrap; gap:8px; }.account-unlocks button { min-height:37px; padding:7px 10px; border:1px solid #bcd4c6; border-radius:9px; background:#eff7f0; }
.guide-step-list { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }.guide-step-list span { padding:7px 10px; border-radius:99px; background:#f0f3ef; color:#7b897e; font-size:11px; }.guide-step-list span.done { background:#d9f0e3; color:#286449; }
.stake-header { max-height:180px; }.stake-header img { object-fit:cover; }.stake-list { display:grid; gap:10px; }.stake-list > button { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:15px; border:1px solid #dce8df; border-radius:15px; background:#fff; text-align:left; cursor:pointer; }.stake-list strong { font-size:16px; }.stake-list span { color:#6d7e73; }.stake-list b { grid-column:2; grid-row:1; }.stake-list .stake-item-chips { grid-column:1/-1; }
.stake-item-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; max-height:330px; overflow:auto; }.stake-item-list label { display:flex; align-items:center; gap:7px; padding:7px; border:1px solid #e4ebe5; border-radius:10px; }.stake-item-list img,.stake-item-chip img { width:32px; height:32px; object-fit:contain; }.stake-item-list label > span { display:grid; flex:1; min-width:0; }.stake-item-list small { color:#86958b; }.stake-item-list input[type=number] { width:58px; min-height:34px; padding:5px; }.stake-rules { display:flex; gap:9px; flex-wrap:wrap; }.stake-rules strong { width:100%; }.stake-rules label { display:flex; align-items:center; gap:5px; }.stake-rules input { min-height:0; }
.stake-item-chips,.stake-rules-summary { display:flex; flex-wrap:wrap; gap:5px; }.stake-item-chip,.stake-rules-summary span { display:inline-flex; align-items:center; gap:3px; padding:4px 7px; border-radius:99px; background:#edf3ed; color:#3d5845; font-size:11px; }.stake-summary { display:flex; gap:20px; }.stake-summary span { display:grid; color:#738478; }.stake-summary strong { color:#25462e; font-size:17px; }.stake-owner-actions,.stake-offer { display:flex; gap:8px; flex-wrap:wrap; }.stake-offer { padding:12px; border:1px solid #e2ebe3; border-radius:12px; }.stake-offer button { min-height:35px; }
.stake-battle { min-height:680px; overflow:hidden; border-radius:22px; background:linear-gradient(180deg,#a7bbaf 0%,#78937e 40%,#2d4438 100%); color:#fff; }.stake-battle-top { display:flex; align-items:center; justify-content:space-between; padding:18px; }.stake-battle-top button { padding:8px 12px; border:1px solid #ffffff75; border-radius:99px; background:#ffffff33; color:#fff; cursor:pointer; }.stake-battle-top span { font:700 22px var(--serif); }.stake-battle-actors { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; min-height:340px; gap:8px; padding:0 3%; }.stake-battle-actor { display:grid; justify-items:center; align-items:end; min-width:0; }.stake-battle-actor canvas { display:block; width:min(100%,260px); height:280px; }.stake-battle-actor strong { padding:7px 13px; border-radius:11px; background:#e8f1e7; color:#284130; }.stake-battle-actors > b { align-self:center; color:#eaf6de; }.stake-battle-status { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:20px; background:#17291d77; }.stake-battle-status > div { display:grid; gap:4px; }.stake-battle-status small { color:#e3f0e2; }.stake-battle-status i { height:13px; overflow:hidden; border-radius:99px; background:#182b23; }.stake-battle-status i b { display:block; height:100%; border-radius:inherit; background:linear-gradient(#82eaa3,#29965c); transition:width .45s ease; }.stake-battle-status i.enemy b { background:linear-gradient(#f38c91,#ae394c); }.stake-battle-controls { display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:22px; }.stake-battle-controls p { margin:0; }.stake-stance-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.stake-stance-grid button { min-height:49px; border:1px solid #ffffff70; border-radius:11px; background:#17251cb3; color:#fff; cursor:pointer; }.stake-stance-grid button.active { border-color:#ffc77c; background:#cb7b31; }.stake-battle-result { display:grid; justify-items:center; gap:15px; padding:40px; font:700 25px var(--serif); }
@media(max-width:620px) { .slayer-task-card { flex-wrap:wrap; gap:10px; }.slayer-task-art { width:80px; height:80px; }.stake-battle { margin:0 -12px; min-height:790px; }.stake-battle-actors { min-height:300px; }.stake-battle-actor canvas { height:240px; }.stake-battle-controls { grid-template-columns:1fr; }.stake-battle-controls p { text-align:center; } }
.arena-loadout,.enchant-picker,.enchant-detail,.enchant-path-library { margin:16px 0; padding:18px; border:1px solid #dce7e0; border-radius:17px; background:#fff; }
.arena-loadout h2 { text-transform:capitalize; }.arena-loadout-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:8px; margin:12px 0; }
.arena-loadout label,.enchant-actions label,.enchant-bound label,.enchant-path-card label { display:grid; gap:5px; color:#5d6e62; font-size:11px; font-weight:700; }
.arena-loadout select,.enchant-actions select,.enchant-bound select,.enchant-path-card select { width:100%; min-height:41px; padding:7px 10px; border:1px solid #cdded1; border-radius:10px; background:#f9fbf9; color:#24372a; }
.arena-loadout .primary-button { margin-top:13px; }
.enchant-workshop { display:grid; grid-template-columns:minmax(215px,.7fr) minmax(0,1.3fr); gap:14px; align-items:start; }
.enchant-picker,.enchant-detail { margin:0; }.enchant-item-list { display:grid; gap:5px; max-height:520px; overflow:auto; }
.enchant-item-list button { display:flex; align-items:center; gap:9px; min-height:59px; padding:8px; border:1px solid #e2ebe3; border-radius:11px; background:#f9fbf8; color:#24392b; text-align:left; cursor:pointer; }
.enchant-item-list button.active { border-color:#67a993; background:#e2f4eb; }.enchant-item-list img,.enchant-selected img { width:46px; height:46px; object-fit:contain; }.enchant-item-list span { display:grid; gap:3px; }.enchant-item-list small { color:#748579; }
.enchant-selected { display:flex; align-items:center; gap:12px; }.enchant-selected h2 { margin:2px 0; font:700 24px var(--serif); }.enchant-selected p { margin:0; color:#7b897e; }
.enchant-odds { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:14px 0; }.enchant-odds span { display:grid; gap:4px; padding:10px; border-radius:10px; background:#eff5ee; color:#728174; font-size:11px; }.enchant-odds strong { color:#294e35; font-size:18px; }
.enchant-path-card,.enchant-warning,.enchant-bound { display:grid; gap:10px; margin:12px 0; padding:14px; border:1px solid #d9e9dd; border-radius:12px; background:#f7faf6; }.enchant-path-card h3,.enchant-bound h3 { margin:0; }.enchant-path-card p,.enchant-warning p { margin:0; color:#758276; }
.enchant-materials,.enchant-forge { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }.enchant-materials span,.enchant-forge > div { display:grid; justify-items:center; gap:4px; padding:9px; border:1px solid #e0e9de; border-radius:10px; background:#fff; text-align:center; }.enchant-materials img,.enchant-forge img { width:43px; height:43px; object-fit:contain; }.enchant-materials small,.enchant-forge small { color:#77877b; }.enchant-actions { display:flex; flex-wrap:wrap; align-items:end; gap:8px; margin:13px 0; }.enchant-actions label { min-width:160px; }.enchant-warning { border-color:#e4c6a9; background:#fff6eb; }.enchant-warning button { width:max-content; padding:8px 12px; border:0; border-radius:9px; background:#ab6533; color:#fff; }.enchant-bound > span { padding:7px 9px; border-radius:8px; background:#e8f0e8; }.enchant-forge { margin:15px 0 25px; }.enchant-forge button { min-height:34px; padding:6px 9px; border:1px solid #9ec9b0; border-radius:8px; background:#e8f6eb; color:#28533b; }.enchant-path-library > div { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:9px; padding-top:12px; }.enchant-path-library span { display:grid; gap:5px; }.enchant-path-library small { color:#79867b; }
@media(max-width:700px) { .enchant-workshop { grid-template-columns:1fr; }.enchant-item-list { display:flex; overflow:auto; }.enchant-item-list button { min-width:155px; }.enchant-odds strong { font-size:14px; } }
.leaderboard-native-row { font:inherit; text-align:left; cursor:pointer; }.leaderboard-native-row:focus-visible { outline:3px solid #208ed6; outline-offset:2px; }
.leaderboard-more { display:block; margin:15px auto 25px; }
.pet-shop-hero { display:grid; gap:5px; margin:16px 0 25px; padding:20px; border-radius:18px; background:linear-gradient(120deg,#241b42,#654394); color:#fff; }.pet-shop-hero strong { font-size:23px; }.pet-shop-hero span { color:#e2d6f2; }.pet-card small { line-height:1.35; }
.public-profile-stage { position:relative; display:grid; justify-items:center; overflow:hidden; min-height:360px; border-radius:20px; background:#b9d3d8; }.public-profile-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.public-profile-stage canvas { position:relative; z-index:2; width:300px; max-width:75%; height:275px; margin-top:15px; }.public-profile-pedestal { position:absolute; z-index:1; bottom:67px; width:280px; max-width:80%; }.public-profile-name { position:relative; z-index:3; display:grid; justify-items:center; gap:5px; align-self:end; width:100%; padding:10px; background:#f8faf5dc; }.public-profile-name span:last-child { color:#617568; font-size:12px; }.public-profile-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 24px; }.public-profile-stats > span { display:grid; gap:5px; padding:13px; border:1px solid #dce7df; border-radius:12px; background:#fff; color:#738277; font-size:11px; }.public-profile-stats strong { color:#263d30; font-size:18px; }.public-profile-equipment,.public-profile-skills { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:9px; margin-bottom:23px; }.public-profile-equipment > div,.public-profile-skills > span { display:grid; gap:5px; align-content:center; justify-items:start; min-height:68px; padding:10px; border:1px solid #e1eae2; border-radius:11px; background:#fff; }.public-profile-equipment img,.public-profile-skills img { width:34px; height:34px; object-fit:contain; }.public-profile-equipment small,.public-profile-skills small { color:#77877a; }.public-profile-skills > span { grid-template-columns:35px 1fr auto; align-items:center; }.public-profile-skills small { font-size:12px; }
.public-profile-pet { position:absolute; z-index:3; left:calc(50% - 115px); bottom:92px; width:82px; height:82px; }
.stake-battle { background:linear-gradient(180deg,#203b38a8 0%,#253e3082 38%,#18251fd9 100%),url("assets/arenas/illustrated_staking.jpg") center/cover; }.stake-battle-actors { background:linear-gradient(transparent 70%,#334b3a73); }
.stake-battle-actor { position:relative; }.stake-splats { position:absolute; z-index:5; top:32%; left:50%; width:0; height:0; pointer-events:none; }
.gem-spotlight { display:grid; grid-template-columns:190px minmax(0,1fr); align-items:center; gap:14px; min-height:205px; margin:14px 0; overflow:hidden; border-radius:19px; background:radial-gradient(circle at 15% 50%,#a352ca88,transparent 43%),linear-gradient(115deg,#182c2b,#3f2d59); color:#fff; }.gem-spotlight canvas { width:190px; height:200px; }.gem-spotlight > div { padding:18px; }.gem-spotlight h2 { margin:3px 0; font:700 27px var(--serif); }.gem-spotlight p { max-width:400px; color:#d6dce1; line-height:1.45; }.gem-spotlight .secondary-button { background:#ffffff24; color:#fff; border-color:#ffffff60; }.gem-style-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:17px; }.gem-style-grid button { display:grid; align-content:start; justify-items:start; gap:6px; min-height:132px; padding:10px; border:1px solid #e0e7e3; border-radius:13px; background:#fff; text-align:left; cursor:pointer; }.gem-style-grid img { width:100%; height:68px; object-fit:contain; }.gem-style-grid small { color:#748077; }
@media(max-width:620px) { .gem-spotlight { grid-template-columns:120px minmax(0,1fr); }.gem-spotlight canvas { width:120px; height:195px; }.gem-spotlight h2 { font-size:22px; }.gem-style-grid { grid-template-columns:1fr 1fr; } }
.auth-divider { margin:18px 0 10px; text-align:center; color:#728076; font-size:13px; }
.auth-social-actions,.account-provider-actions { display:flex; flex-wrap:wrap; gap:10px; }
.auth-social-actions { flex-direction:column; }
.account-provider-actions .social-button { flex:1 1 180px; }
.social-button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 16px; border:1px solid; border-radius:10px; font:500 15px/1 var(--sans); cursor:pointer; transition:background .15s, border-color .15s; }
.social-button:disabled { cursor:default; opacity:.6; }
.social-logo { width:18px; height:18px; flex:none; }
.social-google { background:#fff; border-color:#747775; color:#1f1f1f; }
.social-google:hover:not(:disabled) { background:#f6f8fb; }
.social-apple { background:#000; border-color:#000; color:#fff; }
.social-apple:hover:not(:disabled) { background:#1d1d1f; }
html[data-theme="dark"] .social-google { background:#131314; border-color:#8e918f; color:#e3e3e3; }
html[data-theme="dark"] .social-google:hover:not(:disabled) { background:#1f1f21; }
html[data-theme="dark"] .social-apple { background:#fff; border-color:#fff; color:#000; }
html[data-theme="dark"] .social-apple:hover:not(:disabled) { background:#ececee; }
.account-auth-panel { max-width:750px; }
.account-provider-email { display:grid; gap:10px; max-width:420px; }
.account-auth-panel button { min-height:42px; }
/* Browser annotation pass: local rail, native-inspired profile, and readable game controls. */
@media (min-width:621px) {
  .workspace-top { display:none; }
  .workspace-content { padding-top:20px; }
  .inventory-rail { padding-top:20px; }
  .inventory-panel { max-height:calc(100dvh - 40px); }
}
@media (max-width:620px) {
  .workspace-top { position:fixed; z-index:60; left:14px; top:14px; width:44px; height:44px; padding:0; border:0; background:transparent; }
  .workspace-top .breadcrumb,.workspace-top .connection-status { display:none; }
  .workspace-content { padding-top:20px; }
}
.character-chip { display:grid; justify-items:center; gap:5px; padding:9px 5px; }
.character-chip #nav-character { width:100%; display:grid; justify-items:center; min-width:0; }
.character-chip .player-name-tag.has-art { max-width:100%; min-width:120px; height:44px; font-size:15px; }
.character-chip #nav-level { color:#72877b; }
.inventory-panel { position:relative; isolation:isolate; }
.rail-bank-tools { display:grid; gap:8px; padding:10px 0 2px; border-bottom:1px solid #dfe9df; }
.rail-bank-tools[hidden] { display:none; }
.rail-bank-tabs { display:flex; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:thin; padding-bottom:3px; }
.rail-bank-tabs button { flex:none; min-width:38px; min-height:31px; padding:4px 8px; border:1px solid #d8e5da; border-radius:9px; background:#f6faf6; color:#58695c; font-size:11px; font-weight:700; cursor:pointer; }
.rail-bank-tabs button.active { border-color:var(--tab-color); box-shadow:inset 0 -3px var(--tab-color); color:#213d2a; background:#fff; }
.rail-bank-filter { display:grid; grid-template-columns:minmax(0,1fr) 85px; gap:6px; }
.rail-bank-filter input,.rail-bank-filter select { min-width:0; height:34px; padding:4px 7px; border:1px solid #d6e3d9; border-radius:8px; background:#fff; color:#263b2d; font-size:11px; }
.rail-modal-scrim { position:absolute; z-index:19; inset:0; border-radius:inherit; background:rgba(236,246,239,.34); backdrop-filter:blur(2px); }
.rail-modal-scrim[hidden] { display:none; }
.inventory-panel:has(.item-dialog[open]) > :not(.item-dialog):not(.rail-modal-scrim) { filter:blur(1px); }
.inventory-panel .item-dialog[open] { position:absolute; z-index:20; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:block; box-sizing:border-box; width:calc(100% - 20px); max-width:none; max-height:calc(100% - 20px); min-width:0; margin:0; overflow:auto; padding:19px 16px; border-radius:18px; box-shadow:0 12px 30px #253b2d3d; }
.item-dialog.skill-details-modal[open] { box-sizing:border-box; overflow:auto; position:fixed; inset:0; transform:none; width:min(460px,calc(100vw - 28px)); max-height:calc(100dvh - 36px); margin:auto; }
.item-dialog.skill-details-modal::backdrop { display:block; background:rgba(27,43,31,.34); backdrop-filter:blur(5px); }
.item-dialog::backdrop { display:none; }
.item-dialog-head { gap:10px; }
.item-dialog-head h2 { font-size:23px; }
.item-dialog-art { width:72px; height:72px; }
.item-dialog-art img { width:58px; height:58px; }
.item-bank-move { display:grid; gap:5px; margin-top:12px; color:#677a6b; font-size:11px; font-weight:700; }
.item-bank-move select { width:100%; min-height:36px; padding:7px; border:1px solid #d9e7dc; border-radius:9px; background:#fff; }
.enchant-preview { display:grid; justify-items:center; gap:13px; text-align:center; }
.enchant-preview-stage { display:grid; place-items:center; width:100%; height:145px; border-radius:15px; background:radial-gradient(circle at 50% 65%,#effffc 5%,#b9e6e5 31%,#dbe7e2 70%,#edf1ed); }
.enchant-preview-item img { width:100px; height:100px; object-fit:contain; filter:drop-shadow(0 9px 7px #214a5740); }
.enchant-preview h2 { margin:0; font:700 24px var(--serif); }
.enchant-level-change { color:#27352b; font-size:26px; font-weight:800; }
.enchant-level-change span { color:#9aa9a0; }
.enchant-level-change strong { color:#168bc3; }
.enchant-preview-chance { display:flex; align-items:center; gap:12px; width:100%; padding:12px; border:1px solid #dce9e1; border-radius:14px; background:#fff; text-align:left; }
.enchant-chance-ring { display:grid; place-content:center; flex:none; width:71px; height:71px; border:8px solid transparent; border-radius:50%; background:linear-gradient(#fff,#fff) padding-box,conic-gradient(#14c4a0 var(--chance),#d7e7e2 0) border-box; text-align:center; }
.enchant-chance-ring strong { font-size:18px; }
.enchant-chance-ring small { font-size:9px; }
.enchant-preview-chance p { margin:3px 0; font-size:11px; color:#5b6e62; }
.enchant-preview-chance > div:last-child > small { color:#c44f68; font-size:10px; }
.enchant-preview-cost { display:grid; grid-template-columns:1fr 1fr; gap:7px; width:100%; }
.enchant-preview-cost > span { display:grid; justify-items:center; gap:2px; padding:9px; border-radius:11px; background:#eef2ef; font-size:10px; }
.enchant-preview-cost img { width:30px; height:30px; object-fit:contain; }
.enchant-preview-cost small { color:#829084; }
.enchant-preview-path { display:grid; gap:5px; width:100%; text-align:left; font-size:11px; }
.enchant-preview-path select { min-height:36px; padding:6px; border:1px solid #d5e3d8; border-radius:9px; }
.enchant-preview-go { width:100%; min-height:46px; border:0; border-radius:13px; background:linear-gradient(#21bded,#0879c9); color:#fff; font-weight:800; }
.enchant-preview-go:disabled { opacity:.5; }
.location-monster-strip { min-width:0; overflow:hidden; }
.location-monster-strip-art { flex:1; width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; touch-action:pan-x; cursor:grab; user-select:none; }
.location-monster-strip-art:active { cursor:grabbing; }
.location-monster-strip-art img { pointer-events:none; }
.location-more { flex:none; position:sticky; right:0; z-index:2; }
.profile-stage { height:440px; margin-bottom:0; border-radius:22px 22px 0 0; }
.profile-stage canvas { width:330px; height:350px; bottom:52px; }
.profile-pedestal { bottom:48px; width:385px; height:120px; }
.profile-stage-name { position:absolute; z-index:5; left:0; right:0; bottom:12px; display:flex; justify-content:center; }
.profile-stage-name .player-name-tag.has-art { --tag-cap:38px; min-width:230px; height:62px; padding-inline:44px; font-size:26px; }
.profile-pet { left:calc(50% - 155px); bottom:88px; }
.profile-skills-sheet { position:relative; margin-top:-1px; padding:23px 26px 30px; border:1px solid #e9e9ef; border-radius:25px; background:#f7f7fb; }
.profile-skills-sheet .section-title { margin:0 0 16px; }
.profile-skills-sheet .section-title h2 { font:700 25px var(--sans); }
.profile-skills-sheet .section-title > span { color:#91909b; font-weight:700; }
.profile-skill-grid { gap:9px; }
.profile-skill { isolation:isolate; min-height:58px; padding:8px 12px; border:1px solid #e1e1ea; border-radius:14px; background:#f8f8fc; font-size:14px; }
.profile-skill:hover { background:#fff; border-color:#a4c5d8; }
.profile-skill-fill { position:absolute; z-index:-1; inset:4px auto 4px 4px; max-width:calc(100% - 8px); border-radius:10px; background:color-mix(in srgb,var(--skill-color) 27%,white); }
.profile-skill-icon img { width:25px; height:25px; filter:brightness(.2); }
.profile-skill-name { color:#737985; }
.profile-skill > strong { font-size:18px; }
.appearance-form { display:grid; grid-template-columns:1fr; max-width:none; margin-top:20px; }
.appearance-choice { min-width:0; margin:0; padding:18px; border:1px solid #dfe8e2; border-radius:16px; background:#fff; }
.appearance-choice legend { padding:0 8px; color:#274738; font-weight:800; }
.appearance-choice-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:9px; }
.appearance-choice-card { position:relative; display:grid !important; justify-items:center; gap:4px; min-width:0; padding:5px; border:2px solid #e3e9e5; border-radius:12px; background:#f6f8f5; text-align:center; cursor:pointer; }
.appearance-choice-card:has(input:checked) { border-color:#148cca; background:#e8f5fc; }
.appearance-choice-card input { position:absolute; opacity:0; }
.appearance-choice-card canvas { width:82px; height:92px; }
.appearance-choice-card span { color:#3b5543; font-size:12px; }
.appearance-colors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.appearance-color-group { display:grid; gap:9px; padding:14px; border:1px solid #e2e9e3; border-radius:14px; background:#fff; }
.appearance-color-group strong { color:#3a5847; }
.appearance-swatches { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.appearance-swatches button { width:30px; height:30px; padding:0; border:2px solid #fff; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px #b3c2b7; cursor:pointer; }
.appearance-swatches button:hover { transform:scale(1.12); }
.appearance-custom-color { display:grid !important; gap:3px; font-size:10px; }
.appearance-custom-color input { width:42px; height:32px; }
.account-actions { display:flex; flex-wrap:wrap; gap:10px; margin:17px 0 25px; }
.account-showcase-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.account-character-card { overflow:hidden; border:1px solid #dbe9e2; border-radius:20px; background:#fff; box-shadow:0 10px 24px #203c2a12; }
.account-character-card.active { border-color:#77b6d5; }
.account-character-stage { position:relative; height:285px; overflow:hidden; background:#c6e2e8; }
.account-character-stage > img:first-child { width:100%; height:100%; object-fit:cover; }
.account-character-stage > canvas { position:absolute; z-index:2; left:50%; bottom:30px; transform:translateX(-50%); width:225px; height:245px; }
.account-character-pedestal { position:absolute; z-index:1; bottom:14px; left:50%; transform:translateX(-50%); width:245px; }
.account-character-pet { left:calc(50% - 116px); bottom:33px; width:58px; height:58px; }
.account-character-caption { display:grid; justify-items:center; gap:8px; padding:14px; }
.account-character-caption > span:nth-child(2) { color:#72857a; font-size:12px; }
.account-character-caption button { min-height:38px; padding:8px 15px; border:0; border-radius:10px; background:#217baf; color:#fff; font-weight:700; }
.account-character-caption button:disabled { background:#dbeae4; color:#537866; }
.account-dialog { width:min(480px,calc(100vw - 24px)); padding:24px; border:0; border-radius:20px; box-shadow:0 25px 70px #20352959; }
.account-dialog::backdrop { background:#19302966; backdrop-filter:blur(4px); }
.account-dialog .account-form { margin:0; border:0; padding:0; }
.pet-collection { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.pet-card { display:grid; grid-template-columns:88px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:8px 12px; min-height:166px; padding:14px; border-radius:17px; }
.pet-card.pet-kind-utility { border-color:#c9e7db; background:#f7fcf9; }
.pet-card.pet-kind-cosmetic { border-color:#e3d9f3; background:#fcf9ff; }
.pet-card.pet-kind-trophy { border-color:#e9dbbd; background:#fffcf5; }
.pet-card-art { display:grid; place-items:center; grid-row:span 2; width:88px; height:112px; border-radius:13px; background:#ffffffb0; }
.pet-card-art img { grid-row:auto; width:84px; height:105px; }
.pet-silhouette { display:block; width:84px; height:105px; background:#8c9990; mask:var(--pet-silhouette) center/contain no-repeat; -webkit-mask:var(--pet-silhouette) center/contain no-repeat; }
.pet-silhouette-filters { position:absolute; width:0; height:0; overflow:hidden; }
.pet-silhouette-ink { flood-color:#8c9990; }
.pet-card.is-undiscovered .pet-card-art { background:transparent; filter:url(#flat-pet-silhouette); }
.pet-card.is-undiscovered .pet-card-copy { grid-row:span 2; align-self:center; }
html[data-theme="dark"] .pet-silhouette-ink { flood-color:#83918c; }
.pet-card-copy { display:grid; gap:5px; min-width:0; align-self:end; }
.pet-card-copy strong { overflow-wrap:anywhere; font-size:14px; }
.pet-card-copy small { overflow-wrap:anywhere; font-size:11px; line-height:1.35; }
.pet-card button { display:flex; align-items:center; justify-content:center; gap:4px; justify-self:start; align-self:start; max-width:100%; min-height:36px; white-space:normal; text-align:center; }
.pet-card button img,.gem-icon { width:17px; height:17px; object-fit:contain; vertical-align:middle; }
.pet-unillustrated { color:#93a69b; font-size:40px; }
.pet-feature { background:linear-gradient(115deg,#d8eff0,#f1e9fa); }
.pet-shop-hero strong { display:flex; align-items:center; gap:7px; }
.pet-shop-hero .gem-icon { width:27px; height:27px; }
.codex-goal { display:grid; height:auto; overflow:visible; gap:9px; padding:13px 0 15px; border-radius:0; background:transparent; }
.codex-goal > div:first-child { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.codex-goal > div:first-child strong { flex:none; }
.codex-goal > div:first-child span { text-align:right; }
.codex-goal-track { height:10px; overflow:hidden; border-radius:99px; background:#dce7df; }
.codex-goal-track i { position:static; display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#4bb779,#3a9ac5); }
.codex-drops > span { display:flex; align-items:center; gap:7px; min-height:42px; }
.codex-drops > span > span { display:grid; gap:2px; }
.codex-drops small { color:#789180; font-size:10px; }
.codex-hunters > span { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; }
.codex-hunters .player-name-tag { justify-self:center; }
.codex-hunters strong { margin-left:0; }
.leaderboard-native-row { grid-template-columns:32px 58px minmax(0,1fr) 95px; gap:10px; min-height:84px; }
.leaderboard-native-row.has-tag,.leaderboard-native-row.is-you.has-tag { min-height:96px; }
.leaderboard-portrait { display:block; width:58px; height:67px; overflow:hidden; border-radius:10px; }
.leaderboard-native-row .leaderboard-portrait canvas { display:block; width:76px; height:102px; max-width:none; max-height:none; margin-left:-9px; margin-top:-7px; border-radius:0; background:none; }
.leaderboard-player { justify-items:center; text-align:center; }
.leaderboard-player strong { max-width:100%; font-size:16px; }
.leaderboard-native-row.has-tag .leaderboard-player strong { font-size:17px; }
.arena-showcase canvas { right:7%; bottom:-14px; width:34%; height:305px; }
.arena-character-name { right:12%; bottom:8px; }
.arena-pet { right:24%; bottom:3px; width:66px; height:66px; }
.battle-controls { position:relative; }
.combat-command-icon { display:inline-flex; width:22px; height:22px; }
.combat-command-icon img { width:100%; height:100%; filter:brightness(0) invert(1); }
.battle-choice-panel,.battle-food-menu { position:absolute; z-index:12; right:6%; width:min(360px,88%); max-height:330px; overflow:auto; padding:12px; border:1px solid #ffffff7a; border-radius:16px; background:#eff7f2ed; color:#244435; box-shadow:0 18px 45px #07190c80; backdrop-filter:blur(16px); }
.battle-choice-panel { top:calc(100% - 5px); }
.battle-choice-title { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 5px 8px; }
.battle-choice-title button { width:28px; height:28px; border:0; border-radius:50%; background:#d7e9dc; color:#304c3a; }
.battle-choice-grid { display:grid; gap:5px; }
.battle-choice-grid > button { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:7px 9px; border:1px solid #d5e5d8; border-radius:11px; background:#fff; text-align:left; color:#294334; }
.battle-choice-grid > button.active { border-color:#65b6dc; background:#e8f7fe; }
.battle-choice-grid img { width:30px; height:30px; object-fit:contain; }
.battle-choice-grid span { display:grid; gap:2px; }
.battle-choice-grid small { color:#76897b; }
.battle-dock { position:relative; }
.battle-auto-food { display:flex; align-items:center; gap:8px; flex:1; max-width:260px; min-width:0; min-height:54px; padding:6px 10px; border:1px solid #ffffff80; border-radius:14px; background:#ffffff30; color:#fff; text-align:left; }
.battle-auto-food img { width:42px; height:42px; object-fit:contain; }
.battle-auto-food span { display:grid; gap:2px; min-width:0; font-weight:700; }
.battle-auto-food small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }
.battle-food-menu { left:6%; right:auto; bottom:calc(100% + 8px); width:min(460px,88%); }
.battle-food-option { display:grid; grid-template-columns:37px minmax(0,1fr) auto auto; align-items:center; gap:5px; padding:7px; border-top:1px solid #d7e4d8; }
.battle-food-option > img { width:35px; height:35px; object-fit:contain; }
.battle-food-option > span { display:grid; gap:2px; min-width:0; }
.battle-food-option small { color:#718374; font-size:10px; }
.battle-food-option button { min-height:32px; padding:5px 7px; border:1px solid #b9d3c2; border-radius:8px; background:#fff; color:#2b5840; }
.battle-food-option button:disabled { opacity:.48; }
.battle-food-heading { display:block; padding:10px 5px 4px; color:#718374; font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.battle-food-option.auto { border-radius:10px; background:#e8f7fe; }
.battle-food-option button.active { border-color:#2b87dc; background:#2b87dc; color:#fff; font-weight:700; }
.battle-auto-mark { display:inline-grid; place-items:center; width:20px; height:20px; margin-left:8px; border-radius:50%; background:#fff; color:#116bb5; font-size:13px; font-weight:800; line-height:1; vertical-align:middle; }
.guide-coach[hidden] { display:none; }
.guide-coach { position:fixed; z-index:110; left:clamp(16px,20vw,320px); bottom:96px; display:flex; align-items:end; gap:0; width:min(490px,calc(100vw - 32px)); pointer-events:auto; }
.guide-coach > img { width:80px; height:92px; object-fit:contain; flex:none; filter:drop-shadow(0 5px 8px #36568a66); }
.guide-coach > div { display:grid; gap:6px; flex:1; padding:14px 17px; border:1px solid #f1dfaa; border-radius:18px; background:#fff8e6f2; color:#553d22; box-shadow:0 11px 36px #44331e33; }
.guide-coach p { margin:0; font-size:13px; line-height:1.35; }
.guide-coach > div button { width:max-content; min-height:31px; padding:5px 11px; border:0; border-radius:99px; background:#2784aa; color:#fff; font-weight:700; }
.guide-coach > button { align-self:start; margin-left:-35px; z-index:1; border:0; background:transparent; color:#846e55; font-size:11px; }
.guide-focus { position:relative; z-index:105 !important; outline:4px solid #67dbf0 !important; outline-offset:4px; box-shadow:0 0 0 8px #185e8c66,0 0 35px #28cffc99 !important; }
@media(max-width:750px) {
  .appearance-colors { grid-template-columns:1fr; }
  .profile-stage { height:355px; }
  .profile-stage canvas { width:245px; height:285px; bottom:48px; }
  .profile-pedestal { width:295px; bottom:42px; }
  .profile-stage-name .player-name-tag.has-art { min-width:185px; height:49px; font-size:20px; }
  .profile-skills-sheet { padding:16px; }
  .profile-skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-skill { min-height:52px; padding:5px; font-size:11px; }
  .profile-skill > strong { font-size:14px; }
  .guide-coach { left:8px; bottom:84px; width:calc(100vw - 16px); }
  .guide-coach > img { width:59px; height:72px; }
  .leaderboard-native-row { grid-template-columns:21px 45px minmax(0,1fr) 56px; gap:5px; padding:8px; }
  .leaderboard-portrait { width:45px; height:58px; }
  .leaderboard-native-row .leaderboard-portrait canvas { width:59px; height:82px; margin-left:-7px; }
  .leaderboard-native-row.has-tag,.leaderboard-native-row.is-you.has-tag { --tag-cap:27px; padding:8px 28px; }
  .leaderboard-native-row.has-tag .leaderboard-player strong { font-size:13px; }
  .battle-choice-panel { width:88%; }
}
.guide-card { position:relative; overflow:hidden; min-height:200px; padding-right:115px; background:linear-gradient(120deg,#fff9e8,#ecf8f8); }
.guide-card-pip { position:absolute; right:13px; bottom:6px; width:95px; height:132px; object-fit:contain; }
.battle-dock > .battle-auto-food { min-width:0; margin-left:0; border:1px solid #ffffff80; background:#ffffff30; color:#fff; font-size:13px; font-weight:400; }
.battle-choice-panel { top:auto; bottom:calc(100% - 16px); }
.equipment-slot-pair { display:grid; gap:5px; padding:6px; border:1px solid #e1e9e2; border-radius:12px; background:#f9fbf8; }
.equipment-slot-title { display:flex; align-items:center; gap:6px; color:#6f7f75; font-size:11px; font-weight:700; }
.equipment-slot-title .slot-icon { width:18px; height:18px; }
.equipment-slot-pair .equipment-slot { width:100%; min-height:42px; margin:0; }
.equipment-slot-pair .equipment-overlay { border-color:#aad5e6; background:#eaf7fc; }
.equipment-slot-pair .equipment-overlay small { color:#1785ac; }
.appearance-swatches button[aria-pressed="true"] { outline:3px solid #1596c7; outline-offset:3px; transform:scale(1.08); }
.item-transfer-form { display:grid; gap:10px; margin-top:16px; }
.item-transfer-form label { display:grid; gap:5px; color:#607564; font-size:11px; font-weight:700; }
.item-transfer-form select,.item-transfer-form input { min-height:38px; padding:7px; border:1px solid #d4e3d8; border-radius:9px; background:#fff; }
.profile-pet { bottom:49px; }

/* Feedback pass: align the three desktop surfaces and simplify navigation. */
@media (min-width: 951px) {
  .game-shell { align-items:start; }
  .workspace { min-height:calc(100dvh - 40px); overflow:clip; border:1px solid #e3eae4; border-radius:24px; background:#f8faf8; }
  .inventory-rail { top:20px; height:calc(100dvh - 40px); padding:0; }
  .inventory-panel { max-height:calc(100dvh - 40px); }
  .workspace-content.location-page { border-radius:23px 23px 0 0; }
}
.character-chip { margin:0 0 4px; padding:0 3px; border:0; border-radius:0; background:none; box-shadow:none; }
.character-chip .player-name-tag.has-art { min-width:145px; height:53px; font-size:19px; }
.pet-follower { animation:none; }
.profile-skills-sheet { margin-top:16px; padding:0; border:0; border-radius:0; background:transparent; }
.leaderboard-player { justify-items:start; align-content:center; text-align:left; }
.leaderboard-player small:empty { display:none; }
.leaderboard-native-row { min-height:108px; }
.leaderboard-native-row.has-tag,.leaderboard-native-row.is-you.has-tag { min-height:116px; }
.leaderboard-portrait { width:62px; height:82px; }
.leaderboard-native-row .leaderboard-portrait canvas { width:76px; height:102px; margin-left:-7px; margin-top:4px; }
.leaderboard-native-row { grid-template-columns:32px 62px minmax(0,1fr) 95px; }
.leaderboard-native-row.has-tag .leaderboard-player strong { font-size:18px; }
.location-monster-strip-art { scrollbar-width:none; }
.location-monster-strip-art::-webkit-scrollbar { display:none; }
.guide-dim { position:fixed; z-index:90; pointer-events:none; border-radius:12px; box-shadow:0 0 0 100vmax rgba(9,26,32,.34); }
.guide-dim[hidden] { display:none; }
.slayer-task-card { gap:26px; min-height:190px; padding:25px; }
.slayer-task-art { width:136px; height:136px; }
.slayer-task-card h2 { font-size:33px; }
.slayer-task-card p { font-size:14px; }
.slayer-task-card .secondary-button { align-self:center; min-height:44px; padding-inline:17px; }
.slayer-control { min-height:72px; margin:18px 0 32px; padding:16px 22px; }
.slayer-control strong { font-size:16px; }
.slayer-control span { font-size:13px; }
.slayer-shop { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:17px; }
.slayer-offer { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:8px 15px; min-height:116px; padding:16px; }
.slayer-offer-art { grid-row:span 2; align-self:center; }
.slayer-offer-art img { width:60px; height:60px; }
.slayer-offer > div { align-self:center; }
.slayer-offer strong { font-size:15px; line-height:1.2; }
.slayer-offer small { font-size:12px; line-height:1.3; }
.slayer-offer button { grid-column:3; grid-row:1 / span 2; align-self:center; min-width:104px; padding-inline:12px; }
.slayer-offer label { grid-column:2; font-size:12px; }
.slayer-offer input { width:65px; min-height:32px; }
.appearance-choice-art { display:block; width:100%; height:105px; overflow:hidden; border-radius:8px; background:#eef3f1; }
.appearance-choice-art canvas { display:block; width:100% !important; height:100% !important; max-width:none; }
.appearance-choice-card:has(input:focus-visible) { outline:3px solid #148cca; outline-offset:3px; }
.appearance-preview-controls { display:flex; justify-content:center; gap:8px; margin:12px 0 20px; }
.appearance-preview-controls button { padding:9px 16px; border:1px solid #b3c2b7; border-radius:9px; background:transparent; color:inherit; cursor:pointer; font:inherit; }
.appearance-preview-controls button[aria-pressed="true"] { border-color:#148cca; background:#e8f5fc; color:#274738; }
.appearance-choice-card { overflow:hidden; }
.appearance-colors { align-items:stretch; }
.appearance-color-group { grid-template-rows:auto 1fr; min-width:0; }
.appearance-swatches { display:flex; flex-wrap:wrap; align-content:start; align-items:start; gap:8px; }
.appearance-swatches button,.appearance-custom-color input { box-sizing:border-box; width:32px; height:32px; flex:none; margin:0; }
.appearance-custom-color { display:flex !important; flex-direction:column; align-items:center; gap:4px; min-width:42px; height:52px; margin:-1px 0 0 2px; color:#52685a; font-size:10px; line-height:1; cursor:pointer; }
.appearance-custom-color input { display:block; padding:2px; border:1px solid #b3c2b7; border-radius:50%; background:#fff; cursor:pointer; }
.appearance-custom-color input::-webkit-color-swatch-wrapper { padding:0; }
.appearance-custom-color input::-webkit-color-swatch { border:0; border-radius:50%; }
@media (max-width: 1220px) and (min-width: 951px) { .inventory-rail { top:14px; height:calc(100dvh - 28px); }.inventory-panel { max-height:calc(100dvh - 28px); }.workspace { min-height:calc(100dvh - 28px); } }
@media (max-width: 950px) { .slayer-shop { grid-template-columns:1fr; }.appearance-colors { grid-template-columns:1fr; }.leaderboard-native-row,.leaderboard-native-row.has-tag { min-height:84px; }.leaderboard-portrait { width:45px; height:58px; }.leaderboard-native-row .leaderboard-portrait canvas { width:59px; height:82px; margin-left:-7px; margin-top:2px; } }
@media (max-width: 620px) { .slayer-task-card { flex-wrap:wrap; gap:12px; padding:16px; }.slayer-task-art { width:90px; height:90px; }.slayer-task-card h2 { font-size:26px; }.slayer-task-card .secondary-button { width:100%; }.slayer-offer { grid-template-columns:52px minmax(0,1fr); }.slayer-offer-art img { width:48px; height:48px; }.slayer-offer button { grid-column:2; grid-row:auto; justify-self:start; }.leaderboard-native-row { grid-template-columns:21px 45px minmax(0,1fr) 56px; }.leaderboard-player strong,.leaderboard-native-row.has-tag .leaderboard-player strong { font-size:13px; } }

/* Keep the native name tag's 3:1 artwork ratio in the narrow sidebar. */
.character-chip #nav-character { max-width:none; width:100%; overflow:visible; white-space:normal; }
.character-chip .player-name-tag.has-art { --tag-cap:36px; box-sizing:border-box; width:180px; min-width:0; max-width:100%; height:60px; padding-inline:40px; font-size:18px; }

/* Leaderboard portraits intentionally show the face and upper body. */
.leaderboard-portrait { position:relative; overflow:hidden; }
.leaderboard-native-row .leaderboard-portrait canvas { position:absolute; left:-14px; top:-8px; width:90px; height:120px; margin:0; transform:scale(1.6); transform-origin:50% 35%; }

/* The companion idles in skill scenes while its feet remain planted. */
.skill-pet { animation:skill-pet-idle 2.4s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes skill-pet-idle { 0%,100% { transform:scale(1) rotate(-2deg); } 50% { transform:scale(1.05,.97) rotate(2deg); } }

/* Match the illustrated iOS gem store presentation. */
.gem-hero { justify-content:flex-start; gap:18px; min-height:142px; padding:22px 26px; background:radial-gradient(circle at 12% 35%,#864fb666,transparent 34%),linear-gradient(125deg,#28153f,#0d0819); }
.gem-hero-cluster { position:relative; flex:none; width:90px; height:82px; }
.gem-hero-cluster img { position:absolute; width:59px; height:59px; filter:drop-shadow(0 5px 7px #a764ff77); }
.gem-hero-cluster img:nth-child(1) { left:3px; top:14px; transform:rotate(-18deg); }
.gem-hero-cluster img:nth-child(2) { left:31px; top:4px; transform:rotate(15deg) scale(.9); }
.gem-hero-cluster img:nth-child(3) { left:22px; top:26px; transform:scale(.75); }
.gem-hero-copy { display:grid; gap:2px; min-width:0; }
.gem-hero-copy span { color:#dfc8fc; font-size:11px; font-weight:800; letter-spacing:.16em; }
.gem-hero-copy strong { color:#fff; font:800 42px/1.1 var(--serif); font-variant-numeric:tabular-nums; }
.gem-hero-copy small { color:#ffffffaa; font-size:12px; }
.gem-hero > button { margin-left:auto; padding:11px 19px; border:0; border-radius:99px; background:#fff; color:#291640; font-weight:800; cursor:pointer; }
.gem-tabs { margin:18px 0 25px; }
.gem-packs { max-width:none; }
.gem-packs .section-title { margin-bottom:23px; }
.gem-packs .section-title p { margin:4px 0 0; color:#748076; font-size:13px; }
.gem-pack-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px 15px; margin:0 0 25px; }
.gem-pack-list .gem-pack-card span { padding:0; border:0; background:none; }
.gem-pack-card { position:relative; min-width:0; padding:9px 9px 12px; border:1px solid #e6e1eb; border-radius:22px; background:#fff; text-align:center; }
.gem-pack-card.featured { border:2px solid #a56ee9; }
.gem-pack-card:last-child.featured { border-color:#e9ba59; }
.gem-pack-list .gem-pack-card .gem-pack-highlight { position:absolute; z-index:2; left:50%; top:-12px; transform:translateX(-50%); padding:5px 12px; border-radius:99px; background:linear-gradient(90deg,#7847d0,#b879ef); color:#fff; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.gem-pack-list .gem-pack-card:last-child .gem-pack-highlight { background:linear-gradient(90deg,#f4c968,#e89b33); color:#432603; }
.gem-pack-art { position:relative; display:grid; place-items:center; height:150px; overflow:hidden; border-radius:16px; background:radial-gradient(circle at 50% 45%,#8147ac66,transparent 42%),linear-gradient(130deg,#281542,#0c0817); }
.gem-pack-art::after { position:absolute; inset:0; content:"✧      ✦                    ✧       ✦"; color:#e5c9ff; font-size:22px; line-height:5; letter-spacing:1em; opacity:.45; pointer-events:none; }
.gem-pack-art img { position:absolute; width:65px; height:65px; filter:drop-shadow(0 5px 5px #05000baa); }
.gem-pack-art .gem-pack-stone-0 { transform:translate(-25px,10px) rotate(-18deg); }
.gem-pack-card:first-child .gem-pack-stone-0 { transform:none; }
.gem-pack-art .gem-pack-stone-1 { transform:translate(27px,4px) rotate(16deg); }
.gem-pack-art .gem-pack-stone-2 { transform:translate(0,-18px) scale(.95); }
.gem-pack-art .gem-pack-stone-3 { transform:translate(-53px,-14px) scale(.75) rotate(-26deg); }
.gem-pack-art .gem-pack-stone-4 { transform:translate(51px,-16px) scale(.75) rotate(23deg); }
.gem-pack-art .gem-pack-stone-5 { transform:translate(-36px,-35px) scale(.65); }
.gem-pack-art .gem-pack-stone-6 { transform:translate(34px,-38px) scale(.65); }
.gem-pack-art .gem-pack-vault { width:180px; height:132px; object-fit:contain; }
.gem-pack-details { display:grid; justify-items:center; align-content:center; gap:4px; min-height:88px; padding:12px 7px; }
.gem-pack-details strong { color:#25202c; font:650 30px/1.15 var(--sans); font-variant-numeric:tabular-nums; }
.gem-pack-details strong span { font-size:.58em; font-weight:600; }
.gem-pack-details small { color:#7649a8; font-size:12px; font-weight:600; }
.gem-pack-availability { min-height:42px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(105deg,#8650d2 0%,#a766e0 55%,#c18ae9 100%); color:#fff; font-weight:700; box-shadow:inset 0 1px #ffffff45,0 5px 12px #7543a728; transition:filter .18s ease,transform .18s ease,box-shadow .18s ease; }
.gem-starter { display:flex; align-items:center; gap:16px; min-height:98px; padding:16px 23px; border:1px solid #cfab5e66; border-radius:22px; background:linear-gradient(110deg,#533010,#10091d); color:#fff; }
.gem-starter > img { width:58px; height:58px; filter:drop-shadow(0 4px 7px #ecb95888); }
.gem-starter > div { display:grid; gap:5px; }
.gem-starter strong { font:700 21px var(--serif); }
.gem-starter span { color:#fff9; font-size:12px; }
.gem-starter > small { margin-left:auto; color:#e3d8c4; font-size:12px; font-weight:700; white-space:nowrap; }
.gem-purchase-note { margin:17px 0; color:#758076; text-align:center; font-size:12px; }
.gem-shop { margin-bottom:36px; }
.gem-shop-feature { display:grid; grid-template-columns:225px minmax(0,1fr); align-items:center; gap:16px; min-height:174px; overflow:hidden; border:1px solid #4d396c; border-radius:22px; background:radial-gradient(circle at 16% 65%,#8162b470,transparent 39%),linear-gradient(115deg,#172b35,#342447 65%,#211b34); color:#fff; }
.gem-shop-feature-art { position:relative; height:174px; }
.gem-shop-feature-art img { position:absolute; bottom:11px; width:104px; height:126px; object-fit:contain; filter:drop-shadow(0 10px 5px #0c101999); }
.gem-shop-feature-art img:nth-child(1) { left:55px; z-index:3; width:124px; height:145px; }
.gem-shop-feature-art img:nth-child(2) { left:0; z-index:2; }
.gem-shop-feature-art img:nth-child(3) { left:137px; z-index:1; width:88px; }
.gem-shop-feature .eyebrow { color:#d2b5f8; }
.gem-shop-feature h2 { margin:4px 0 6px; color:#fff; font:700 29px var(--serif); }
.gem-shop-feature p { max-width:420px; margin:0; color:#d9d3e4; line-height:1.45; }
.gem-shop-filters { display:flex; gap:8px; margin:18px 0 24px; overflow-x:auto; scrollbar-width:none; }
.gem-shop-filters::-webkit-scrollbar { display:none; }
.gem-shop-filters button { flex:none; min-height:36px; padding:0 13px; border:1px solid #dadbe5; border-radius:99px; background:#fff; color:#5b5d68; font-weight:700; cursor:pointer; }
.gem-shop-filters button.active { border-color:#8163b2; background:#71529d; color:#fff; }
.gem-shop .section-title p { margin:4px 0 0; color:#6f7980; font-size:12px; }
.gem-shop-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.gem-fitting-room { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:300px; overflow:hidden; border:1px solid #5c4b78; border-radius:22px; background:linear-gradient(120deg,#243843,#342b49); color:#f8f5ff; }
.gem-fitting-stage { position:relative; min-height:300px; overflow:hidden; background:#afcad4; }
.gem-fitting-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gem-fitting-pedestal { position:absolute; z-index:1; left:50%; bottom:35px; width:78%; height:105px; object-fit:contain; transform:translateX(-50%); }
.gem-fitting-stage > canvas { position:absolute; z-index:2; left:50%; bottom:24px; width:100%; height:335px; transform:translateX(-50%); }
.gem-fitting-pet { position:absolute; z-index:3; left:14%; bottom:53px; width:83px; height:82px; object-fit:contain; filter:drop-shadow(0 5px 5px #151a2866); }
.gem-fitting-name { position:absolute; z-index:4; left:0; right:0; bottom:5px; display:flex; justify-content:center; }
.gem-fitting-name .player-name-tag { font-size:14px; }
.gem-fitting-name .player-name-tag.has-art { --tag-cap:27px; min-width:140px; height:38px; padding-inline:30px; font-size:16px; }
.gem-fitting-ring,.gem-fitting-hit { position:absolute; z-index:4; display:grid; place-items:center; border:1px solid #ffffff99; border-radius:14px; background:#1d2337ba; }
.gem-fitting-ring { top:12px; right:12px; width:56px; height:56px; box-shadow:0 3px 14px #14202b66; }
.gem-fitting-ring svg { width:48px; height:48px; }
.gem-fitting-hit { top:12px; right:12px; width:59px; height:56px; }
.gem-fitting-hit .hit-splat-preview { width:54px; height:51px; font-size:19px; }
.gem-fitting-details { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:26px 24px 22px; }
.gem-fitting-details h2 { margin:0 0 16px; color:#fff; font:700 28px var(--serif); }
.gem-fitting-details p { margin:0 0 14px; color:#d5d1df; line-height:1.45; font-size:13px; }
.gem-fitting-selected { display:flex; flex-wrap:wrap; align-content:flex-start; gap:6px; }
.gem-fitting-selected p { margin:0; }
.gem-fitting-selected span { padding:5px 8px; border:1px solid #ffffff35; border-radius:7px; background:#ffffff13; color:#d8d3e0; font-size:10px; }
.gem-fitting-selected b { color:#fff; }
.gem-fitting-actions { display:flex; align-items:center; gap:12px; padding-top:20px; }
.gem-fitting-actions button { display:flex; align-items:center; gap:7px; min-height:38px; padding:0 14px; border:0; border-radius:10px; background:#c4e0eb; color:#243143; font-weight:800; cursor:pointer; }
.gem-fitting-actions button b { display:grid; place-items:center; min-width:20px; height:20px; border-radius:50%; background:#294254; color:#fff; font-size:11px; }
.gem-fitting-actions > strong { font-size:13px; }
.gem-shop-card { display:grid; grid-template-rows:135px auto auto; min-width:0; overflow:hidden; border:1px solid #e3e1e9; border-radius:18px; background:#fff; }
.gem-shop-card.is-owned { border-color:#bca7dc; }
.gem-shop-card.is-selected { box-shadow:0 0 0 2px #8d62bd; }
.gem-shop-art { position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 50%,#e7d6f4,transparent 58%),linear-gradient(145deg,#f7f3fb,#e9e5f0); }
.gem-shop-art-target { display:grid; place-items:center; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; }
.gem-shop-art-target:focus-visible { outline:2px solid #8b5fc0; outline-offset:-3px; }
.gem-shop-art > img { display:block; width:100%; height:100%; object-fit:contain; }
.gem-shop-art .gem-shop-pet { width:125px; height:125px; filter:drop-shadow(0 6px 4px #31304733); }
.gem-shop-art .gem-shop-tag { width:90%; height:68px; object-fit:contain; }
.gem-shop-art .gem-shop-background { position:absolute; top:50%; left:50%; width:100%; height:auto; aspect-ratio:1; object-fit:cover; object-position:center; transform:translate(-50%,-50%); }
.gem-shop-art .gem-shop-pedestal { width:90%; height:118px; }
.gem-shop-art svg { width:105px; height:105px; }
.gem-shop-hitsplats { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; }
.gem-shop-hitsplats > div { display:grid; justify-items:center; gap:1px; }
.gem-shop-hitsplats .hit-splat-preview { width:75px; height:66px; font-size:23px; }
.gem-shop-hitsplats small { color:#595667; font-size:10px; font-weight:700; }
.gem-shop-character-preview { display:block; width:100%; height:135px; }
.gem-shop-preview-button { position:absolute; top:9px; right:9px; display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid #ffffffae; border-radius:50%; background:#232631d9; color:#fff; cursor:pointer; box-shadow:0 3px 9px #1517234d; }
.gem-shop-preview-button:hover,.gem-shop-preview-button:focus-visible { background:#654488; outline:2px solid #c9adf3; outline-offset:2px; }
.gem-shop-art .gem-shop-preview-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
.gem-preview-dialog { position:fixed; width:min(560px,calc(100vw - 28px)); max-height:min(720px,calc(100vh - 28px)); padding:22px; border:1px solid #dad7e3; border-radius:22px; background:#fff; color:#252936; box-shadow:0 22px 70px #080a164f; }
.gem-preview-dialog::backdrop { background:#0b0d17a8; }
.gem-preview-dialog form { position:absolute; top:15px; right:15px; }
.gem-preview-dialog h2 { margin:0 42px 2px 0; font:700 29px var(--serif); }
.gem-preview-dialog p { margin:0 0 16px; color:#747584; font-size:13px; }
.gem-preview-dialog .gem-fitting-stage { min-height:400px; margin:17px 0 14px; border-radius:14px; }
.gem-preview-dialog .gem-fitting-stage > canvas { height:410px; bottom:45px; }
.gem-preview-dialog .gem-fitting-pedestal { bottom:38px; }
.gem-preview-dialog .gem-fitting-pet { width:100px; height:100px; }
.gem-preview-stage { display:grid; place-items:center; min-height:350px; overflow:hidden; border-radius:16px; background:radial-gradient(circle,#dfd1ed,#f6f2f9 70%); }
.gem-preview-stage .gem-preview-ring { width:min(280px,70vw); height:min(280px,70vw); }
.gem-preview-stage .gem-shop-character-preview { width:100%; height:400px; }
.gem-cart-items { display:grid; gap:8px; max-height:310px; overflow:auto; }
.gem-cart-item { display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid #e2e1e9; border-radius:10px; background:#f7f6fa; }
.gem-cart-item span { display:grid; gap:2px; min-width:0; flex:1; }
.gem-cart-item strong { font-size:13px; }.gem-cart-item small { color:#7a7e89; font-size:11px; }.gem-cart-item b { white-space:nowrap; font-size:12px; }
.gem-cart-item button { width:25px; height:25px; border:0; border-radius:50%; background:#e9e6ed; color:#545461; cursor:pointer; }
.gem-cart-summary { display:grid; gap:7px; margin:16px 0; padding:13px 0; border-top:1px solid #e1dfe8; border-bottom:1px solid #e1dfe8; }
.gem-cart-summary span { display:flex; justify-content:space-between; font-size:13px; }.gem-cart-shortfall { color:#a7444a; }
.gem-cart-actions { display:flex; justify-content:flex-end; }.gem-cart-actions button { min-height:40px; padding:0 18px; border:0; border-radius:9px; background:#7850a8; color:#fff; font-weight:800; cursor:pointer; }.gem-cart-actions button:disabled { opacity:.5; cursor:default; }
.gem-cart-note { margin-top:12px !important; font-size:11px !important; }
.gem-packs-modal-list { display:grid; gap:8px; max-height:440px; overflow:auto; }
.gem-packs-modal-card { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #e1dfe8; border-radius:11px; background:#f8f7fa; }
.gem-packs-modal-card.recommended { border-color:#9a74c2; background:#f1eafa; }.gem-packs-modal-card img { width:29px; height:29px; }.gem-packs-modal-card span { display:grid; gap:2px; flex:1; }.gem-packs-modal-card strong { font-size:13px; }.gem-packs-modal-card small { color:#727782; font-size:11px; }
.gem-packs-modal-card button { min-width:92px; min-height:34px; padding:0 8px; border:0; border-radius:8px; background:linear-gradient(105deg,#8650d2,#bd83e7); color:#fff; font-weight:800; box-shadow:inset 0 1px #ffffff45; cursor:pointer; }.gem-packs-modal-card button:disabled { background:#bfc0c7; box-shadow:none; cursor:default; }
html[data-theme="dark"] .gem-preview-dialog { border-color:#49505e; background:#292d36; color:#f2f3f7; }
html[data-theme="dark"] .gem-preview-dialog p { color:#bdc3cf; }
html[data-theme="dark"] .gem-preview-stage { background:radial-gradient(circle,#454052,#20242d 75%); }
html[data-theme="dark"] .gem-shop-hitsplats small { color:#c2c3ce; }
html[data-theme="dark"] .gem-cart-item,html[data-theme="dark"] .gem-packs-modal-card { border-color:#484d59; background:#333844; color:#f0f1f5; }
html[data-theme="dark"] .gem-packs-modal-card.recommended { border-color:#9d80c0; background:#433951; }
html[data-theme="dark"] .gem-cart-item small,html[data-theme="dark"] .gem-packs-modal-card small { color:#b6bdc9; }
html[data-theme="dark"] .gem-cart-summary { border-color:#474b55; }
html[data-theme="dark"] .gem-cart-shortfall { color:#f1a1a5; }
.gem-shop-card-copy { display:grid; align-content:start; gap:4px; min-height:61px; padding:12px 13px 3px; }
.gem-shop-card-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.gem-shop-card-copy small { color:#777985; font-size:11px; }
.gem-shop-card > button { display:flex; align-items:center; justify-content:center; gap:5px; min-height:38px; margin:8px 12px 12px; border:0; border-radius:10px; background:#7447ae; color:#fff; font-weight:800; cursor:pointer; }
.gem-shop-card.is-owned > button { background:#eee8f7; color:#654b8b; }
.gem-shop-card > button img { width:15px; height:15px; }
.gem-shop-card > button:disabled { opacity:.55; cursor:wait; }
.gem-shop-earned { margin:12px 0 0; color:#767d83; font-size:12px; }
html[data-theme="dark"] .gem-shop-card { border-color:#414653; background:#292d36; }
html[data-theme="dark"] .gem-shop-card.is-owned { border-color:#7b649e; }
html[data-theme="dark"] .gem-shop-art { background:radial-gradient(circle,#514661,transparent 60%),#252935; }
html[data-theme="dark"] .gem-shop-card-copy small,html[data-theme="dark"] .gem-shop .section-title p,html[data-theme="dark"] .gem-shop-earned { color:#b8becb; }
html[data-theme="dark"] .gem-shop-filters button { border-color:#454a57; background:#292d36; color:#d5d9e3; }
html[data-theme="dark"] .gem-shop-filters button.active { border-color:#9373c5; background:#655085; color:#fff; }
html[data-theme="dark"] .gem-shop-card.is-owned > button { background:#463c59; color:#f0e6ff; }
@media(max-width:750px) { .gem-shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:750px) { .gem-fitting-room { grid-template-columns:1fr; }.gem-fitting-stage { min-height:310px; }.gem-fitting-details { min-height:215px; } }
@media(max-width:480px) { .gem-shop-feature { grid-template-columns:125px minmax(0,1fr); }.gem-shop-feature-art img:nth-child(1) { left:23px; width:99px; }.gem-shop-feature-art img:nth-child(2) { left:-20px; width:74px; }.gem-shop-feature-art img:nth-child(3) { left:80px; width:69px; }.gem-shop-feature h2 { font-size:23px; }.gem-shop-feature p { font-size:12px; } }
@media (max-width: 950px) { .leaderboard-native-row .leaderboard-portrait canvas { left:-9px; top:-4px; width:67px; height:89px; transform:scale(1.5); } }
@media (max-width: 620px) { .character-chip .player-name-tag.has-art { width:168px; height:56px; }.gem-hero { gap:8px; padding:15px; }.gem-hero-cluster { width:65px; }.gem-hero-cluster img { width:47px; height:47px; }.gem-hero-copy strong { font-size:30px; }.gem-pack-list { gap:17px 8px; }.gem-pack-art { height:112px; }.gem-pack-art img { width:49px; height:49px; }.gem-pack-art .gem-pack-vault { width:115px; height:90px; }.gem-pack-details strong { font-size:23px; }.gem-pack-availability { font-size:11px; } }
@media (prefers-reduced-motion: reduce) { .skill-pet { animation:none; } }

/* Name tag art has fixed end caps; only its center stretches. */
.player-name-tag.has-art { border:0; border-image:none; background-image:var(--tag-left),var(--tag-right),var(--tag-middle); background-size:var(--tag-cap) 100%,var(--tag-cap) 100%,calc(100% - var(--tag-cap) - var(--tag-cap)) 100%; background-position:left center,right center,center center; background-repeat:no-repeat; }
.leaderboard-native-row.has-tag,.leaderboard-native-row.is-you.has-tag { --tag-cap:69px; min-height:116px; padding:12px 78px; border:0; border-image:none; overflow:visible; background-image:var(--tag-left),var(--tag-right),var(--tag-middle); background-size:var(--tag-cap) 100%,var(--tag-cap) 100%,calc(100% - var(--tag-cap) - var(--tag-cap)) 100%; background-position:left center,right center,center center; background-repeat:no-repeat; }
.leaderboard-native-row { grid-template-columns:32px 112px minmax(0,1fr) 95px; }
.leaderboard-portrait { width:112px; height:92px; border-radius:0; mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%); }
.leaderboard-native-row .leaderboard-portrait canvas { left:0; top:0; width:112px; height:136px; margin:0; transform:none; }

/* Combat controls and the spell inventory follow the native panel structure. */
.battle-arena { min-height:940px; }
.battle-commands button,.battle-stance-list button,.battle-dock > button { min-height:64px; }
.battle-controls { gap:18px; }
.battle-choice-panel { width:min(480px,90%); max-height:440px; padding:14px; }
.battle-choice-grid { gap:8px; }
.battle-choice-grid > .spell-choice { display:grid; grid-template-columns:48px minmax(0,1fr); gap:3px 11px; min-height:82px; padding:9px 12px; }
.spell-choice-art { grid-row:span 2; width:42px; height:42px; }
.battle-choice-grid .spell-choice-art img { width:42px; height:42px; }
.spell-choice-copy { display:grid; gap:3px; align-self:end; }
.spell-choice-copy strong { font-size:14px; }
.spell-rune-costs { grid-column:2; display:flex !important; flex-wrap:wrap; align-items:center; gap:6px 11px; }
.spell-rune-cost { display:inline-flex !important; align-items:center; gap:3px !important; color:#3c6450; font-size:11px; white-space:nowrap; }
.spell-rune-cost.missing { color:#af4b43; }
.battle-choice-grid .spell-rune-cost img { width:19px; height:19px; }
.spell-rune-cost b { font-variant-numeric:tabular-nums; }
.spell-choice.needs-runes { opacity:.68; }
.battle-dock { flex-wrap:wrap; align-items:stretch; gap:12px 18px; min-height:155px; padding-bottom:19px; }
.battle-slayer { display:flex; align-items:center; gap:10px; flex-basis:100%; min-height:54px; padding:5px 7px; border:1px solid #ffffff35; border-radius:13px; background:#10251e88; }
.battle-slayer button { border:0; background:none; color:#eff9f1; cursor:pointer; }
.battle-slayer #combat-slayer-task { display:flex; align-items:center; gap:8px; flex:1; min-width:0; text-align:left; }
.battle-slayer #combat-slayer-task img { width:40px; height:40px; object-fit:contain; }
.battle-slayer #combat-slayer-task span { display:grid; gap:2px; }
.battle-slayer #combat-slayer-task strong { font-size:13px; }
.battle-slayer #combat-slayer-task small { color:#c9dfd2; font-size:11px; }
.battle-slayer #combat-auto-slayer { min-height:38px; padding:6px 12px; border:1px solid #a9caba88; border-radius:9px; background:#d7e6db24; font-weight:700; white-space:nowrap; }
.battle-slayer #combat-auto-slayer.active { border-color:#75d9ac; background:#277a55; }
.battle-dock > .battle-auto-food { flex:1 1 calc(50% - 9px); width:auto; max-width:none; min-height:64px; margin:0; padding:7px 12px; border:1px solid #c3d6ca88; border-radius:13px; background:#e4eee818; box-shadow:none; }
.battle-auto-food > img { width:39px; height:39px; }
.battle-auto-food > span { flex:1; gap:2px; }
.battle-auto-food strong { font-size:13px; }
.battle-auto-food small { color:#d4e4d9; font-size:11px; }
.battle-auto-food > b { color:#e0eee4; font-size:20px; font-weight:400; }
.battle-dock > #combat-use-item { flex:1 1 calc(50% - 9px); width:auto; max-width:none; margin:0; }
.slayer-coins { gap:9px; min-height:51px; padding:8px 13px; border:1px solid #e0d4bb; border-radius:13px; background:#fbf7ed; }
.slayer-coins img { width:39px; height:39px; }
.slayer-coins strong { font-size:20px; }
.slayer-coins span { font-size:12px; }

/* A clean stroke follows the iOS skill ring geometry without raster filters. */
.skill-action-ring .ring-fill,.ring-theme-options .ring-fill { filter:none; }
.skill-action-ring .ring-svg { overflow:visible; }
.skill-action-ring.shader-active .ring-fill { opacity:0; }
.skill-action-ring .ring-shader-canvas { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.skill-action-ring .skill-action-art { position:relative; z-index:2; }
@media (max-width: 950px) { .leaderboard-native-row { grid-template-columns:21px 67px minmax(0,1fr) 56px; }.leaderboard-portrait { width:67px; height:65px; }.leaderboard-native-row .leaderboard-portrait canvas { width:67px; height:85px; }.leaderboard-native-row.has-tag,.leaderboard-native-row.is-you.has-tag { --tag-cap:51px; padding-inline:56px; }.battle-arena { min-height:860px; } }
@media (max-width: 620px) { .battle-controls { gap:11px; }.battle-commands button,.battle-stance-list button,.battle-dock > button { min-height:58px; }.battle-dock { padding-inline:5%; }.battle-choice-panel { width:94%; }.battle-slayer #combat-auto-slayer { font-size:11px; }.slayer-coins { padding:5px; }.slayer-coins img { width:29px; height:29px; }.slayer-coins strong { font-size:15px; } }

/* Keep every desktop page except Locations inside the workspace frame. */
@media (min-width: 621px) {
  .workspace-content:not(.location-page) { padding:24px clamp(22px,2.2vw,34px) 90px; }
  .workspace-content:not(.location-page) > .illustrated-header { margin:0; border-radius:20px; }
}

/* Group the active character with the Kunzaria mark in the sidebar. */
.sidebar .brand { margin-bottom:5px; }
.sidebar .character-chip { justify-items:center; margin-bottom:8px; padding-inline:9px; }
.sidebar .character-chip #nav-character { justify-items:center; text-align:center; }

/* The PvP destinations have breathing room below the scene and within each row. */
.pvp-hub { margin-top:17px; padding:0 0 30px; }
.arena-destination-label { min-height:64px; padding:15px 20px; }

/* Render decorated leaderboard rows as one continuous native name tag. */
.leaderboard-native-row.has-tag,.leaderboard-native-row.is-you.has-tag {
  --tag-cap:70px;
  overflow:hidden;
  border:1px solid transparent;
  background:none;
  border-image-source:var(--tag-art);
  border-image-slice:0 48 fill;
  border-image-width:0 var(--tag-cap);
  border-image-repeat:stretch;
}

/* Match the height and typography of the combat command and stance controls. */
.battle-commands button,.battle-stance-list button { box-sizing:border-box; min-height:72px; font-size:16px; font-weight:700; }
@media (max-width: 950px) {
  .leaderboard-native-row.has-tag,.leaderboard-native-row.is-you.has-tag { --tag-cap:51px; }
}
@media (max-width: 620px) {
  .workspace-content:not(.location-page) { padding:20px 17px 110px; }
  .workspace-content:not(.location-page) > .illustrated-header { margin:0; }
  .leaderboard-native-row.has-tag,.leaderboard-native-row.is-you.has-tag { --tag-cap:42px; }
  .battle-commands button,.battle-stance-list button { min-height:62px; font-size:13px; }
}

/* PvP uses the same full-width header and inset two-card sheet as Locations. */
.pvp-header::after { background:linear-gradient(180deg,transparent 35%,rgba(18,48,57,.25) 62%,#eaf3f8 100%); }
.pvp-hub { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px; margin:-25px -2px 0; padding:26px 18px 30px; border-radius:26px 26px 0 0; background:#eaf3f8; }
.pvp-hub .arena-destination { display:grid; grid-template-rows:minmax(205px,1fr) 76px; min-width:0; min-height:285px; margin:0; overflow:hidden; border:1px solid rgba(33,76,89,.12); border-radius:20px; background:#fff; box-shadow:0 4px 12px rgba(29,62,73,.07); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.pvp-hub .arena-destination:hover { transform:translateY(-2px); border-color:rgba(45,114,145,.35); box-shadow:0 8px 20px rgba(29,62,73,.1); }
.arena-destination-art { position:relative; display:block; min-height:0; overflow:hidden; }
.arena-destination-art::after { position:absolute; inset:0; content:""; background:linear-gradient(0deg,rgba(12,30,17,.74),transparent 57%); }
.arena-destination-art > img { display:block; width:100%; height:100%; object-fit:cover; }
.arena-destination-art > strong { position:absolute; z-index:1; left:18px; bottom:16px; color:#fff; font:600 clamp(24px,2.6vw,35px)/1.05 var(--serif); }
.pvp-hub .arena-destination-label { display:flex; min-height:0; height:100%; gap:10px; padding:10px 15px; background:linear-gradient(90deg,#443e31,#273e3c); color:#f4f7ef; }
.pvp-hub .arena-destination-label > img { flex:none; width:35px; height:35px; filter:brightness(0) invert(1); }
.pvp-hub .arena-destination-label > span { flex:1; min-width:0; font-size:12px; line-height:1.35; }
.pvp-hub .arena-destination-label > b { font-size:21px; font-weight:400; }
@media (max-width: 1220px) { .pvp-hub { grid-template-columns:1fr; } }
@media (max-width: 620px) { .pvp-hub { margin:-30px -17px 0; padding:22px 17px 30px; }.pvp-hub .arena-destination { grid-template-rows:205px 76px; } }

/* The target is drawn from the animated native rig inside the scene canvas. */
.thieving-target { right:auto; left:54%; bottom:3%; transform:translateX(-50%); }

/* Keep the profile identity separate from the character's feet and pedestal. */
.profile-stage-name { position:relative; z-index:1; inset:auto; display:flex; justify-content:center; margin:12px 0 5px; }
.profile-stage-name .player-name-tag.has-art { --tag-cap:37px; box-sizing:border-box; width:224px; min-width:0; max-width:100%; height:56px; padding-inline:42px; font-size:24px; }
.profile-pet { left:calc(50% - 170px); bottom:58px; width:96px; height:96px; }
.pet-card-art { border:0; background:transparent; }
.slayer-coins { min-height:0; padding:0; border:0; border-radius:0; background:transparent; }
.workspace-content.location-page,.location-header + .location-list,.pvp-hub { background:#f8faf8; }
.pvp-header::after { background:linear-gradient(180deg,transparent 35%,rgba(18,48,57,.25) 62%,#f8faf8 100%); }
.enchant-result-actions { display:grid; gap:4px; width:100%; margin-top:8px; }
.enchant-result-actions .primary-button { margin:0; }
.enchant-dialog-picker { display:grid; gap:8px; }
.enchant-dialog-picker h2 { margin:0 0 5px; font:700 23px var(--serif); }
.enchant-dialog-picker button { display:flex; align-items:center; gap:10px; width:100%; padding:7px; border:1px solid #dce8de; border-radius:10px; background:#fff; color:#26382b; text-align:left; }
.enchant-dialog-picker button img { width:38px; height:38px; object-fit:contain; }
@media (max-width:1220px) { .profile-pet { left:calc(50% - 135px); bottom:49px; width:76px; height:76px; } }

/* Inventory stays within thumb reach on narrow screens. */
.mobile-inventory-toggle,.mobile-inventory-close,.mobile-inventory-backdrop { display:none; }
.mobile-inventory-toggle[hidden] { display:none; }
@media (max-width:950px) {
  body.mobile-inventory-open { overflow:hidden; }
  .mobile-inventory-toggle { position:fixed; z-index:103; right:16px; bottom:calc(14px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:8px; min-height:52px; padding:8px 13px; border:1px solid #b9d3c2; border-radius:999px; background:#315d43; box-shadow:0 8px 28px #1c392b3d; color:#fff; font-weight:700; }
  .mobile-inventory-toggle img { width:23px; height:23px; object-fit:contain; filter:brightness(0) invert(1); }
  .mobile-inventory-toggle small { display:grid; place-items:center; min-width:25px; height:25px; padding:0 5px; border-radius:999px; background:#ffffff29; font-size:11px; }
  .mobile-inventory-backdrop:not([hidden]) { position:fixed; z-index:100; inset:0; display:block; background:#14282075; backdrop-filter:blur(3px); }
  .game-shell .inventory-rail { position:fixed; z-index:102; top:auto; right:12px; bottom:calc(78px + env(safe-area-inset-bottom)); display:none; align-items:stretch; width:min(430px,calc(100vw - 24px)); height:min(74dvh,700px); padding:0; grid-column:auto; }
  .mobile-inventory-open .game-shell .inventory-rail { display:flex; }
  .game-shell .inventory-panel { height:100%; max-height:100%; min-height:0; overflow:hidden; padding:17px 14px 12px; border-radius:21px; background:#fcfdfb; box-shadow:0 20px 60px #10271f45; }
  .inventory-panel .panel-heading { padding-right:38px; }
  .mobile-inventory-close { position:absolute; z-index:2; top:12px; right:12px; display:grid; place-items:center; width:36px; height:36px; border:1px solid #dbe6dc; border-radius:50%; background:#f6faf6; color:#31543c; font-size:24px; line-height:1; }
  .game-shell .rail-content { flex:1; max-height:none; min-height:0; overflow:auto; overscroll-behavior:contain; }
  .game-shell .item-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .game-accessory { bottom:calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width:620px) {
  .workspace-content { padding-bottom:100px; }
  .game-shell .inventory-rail { height:min(76dvh,700px); }
}

/* A compact quantity control belongs with the Slayer scroll description. */
.slayer-offer label { display:flex; align-items:center; gap:9px; color:#60756a; font-size:12px; font-weight:700; }
.slayer-offer input { box-sizing:border-box; width:75px; min-height:37px; padding:7px 10px; border:1px solid #c9d9cf; border-radius:9px; outline:none; background:#f7faf8; color:#264532; font:700 13px var(--sans); text-align:center; font-variant-numeric:tabular-nums; }
.slayer-offer input:focus { border-color:#4d9b74; box-shadow:0 0 0 3px #4d9b742b; }
.slayer-offer input::-webkit-inner-spin-button,.slayer-offer input::-webkit-outer-spin-button { appearance:none; margin:0; }
.slayer-offer input[type="number"] { appearance:textfield; }

.rail-tab-editor { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 52px; gap:8px; padding:12px; border:1px solid #c9d9cf; border-radius:13px; background:#f7faf8; box-shadow:0 7px 18px #263b2d16; }
.rail-tab-editor > strong,.rail-tab-editor > div { grid-column:1 / -1; }
.rail-tab-editor > strong { color:#294433; font-size:12px; }
.rail-tab-editor label { display:grid; align-content:start; gap:4px; min-width:0; color:#62776a; font-size:10px; font-weight:700; }
.rail-tab-editor input { box-sizing:border-box; width:100%; min-height:32px; padding:5px 7px; border:1px solid #d3e0d6; border-radius:7px; background:#fff; color:#233c2c; font-size:11px; }
.rail-tab-editor input[type="color"] { padding:3px; }
.rail-tab-editor > div { display:flex; gap:7px; }
.rail-tab-editor button { min-height:32px; padding:5px 12px; border:1px solid #bad1c1; border-radius:8px; background:#fff; color:#315940; font-size:11px; font-weight:700; cursor:pointer; }
.rail-tab-editor button[type="submit"] { background:#315d43; color:#fff; }

/* Keep each character, companion, and identity label anchored to one stage. */
.profile-stage { margin-bottom:18px; border-radius:22px; }
.profile-stage-name { position:absolute; z-index:5; inset:auto 0 5px; margin:0; display:flex; justify-content:center; pointer-events:none; }
.profile-pet { left:calc(50% - 115px); bottom:84px; width:80px; height:80px; }
.account-character-stage { height:300px; }
.account-character-stage > canvas { width:280px; height:275px; bottom:26px; }
.account-character-pedestal { width:270px; bottom:12px; }
.account-character-pet { left:calc(50% - 75px); bottom:40px; width:70px; height:70px; }
.arena-avatar-stage { position:absolute; z-index:2; right:3%; bottom:0; width:42%; height:100%; }
.arena-showcase .arena-avatar-stage canvas { position:absolute; right:0; bottom:0; width:100%; height:100%; }
.arena-avatar-stage .arena-character-name { position:absolute; z-index:4; left:50%; right:auto; bottom:7px; transform:translateX(-50%); white-space:nowrap; }
.arena-avatar-stage .arena-pet { left:7%; right:auto; bottom:12px; width:68px; height:68px; }
.thieving-target { left:48%; }
.thieving-safety { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin:-4px 0 25px; padding:15px 18px; border:1px solid #dce8de; border-radius:15px; background:#fff; }
.thieving-health { flex:1 1 185px; min-width:160px; }
.thieving-health > span { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; font-size:12px; }
.thieving-health > span b { color:#536d5b; }
.thieving-health .battle-health-track { display:block; }
.thieving-safety label { display:grid; gap:5px; color:#556d5a; font-size:11px; font-weight:700; }
.thieving-safety select { min-height:38px; max-width:220px; padding:7px 30px 7px 9px; border:1px solid #cfdfd2; border-radius:9px; background:#f8faf8; color:#26382b; }
.thieving-safety .secondary-button { min-height:38px; }
@media (max-width:620px) {
  .profile-stage { height:355px; }
  .profile-stage canvas { bottom:44px; }
  .profile-pedestal { bottom:37px; }
  .profile-pet { left:calc(50% - 100px); bottom:75px; width:65px; height:65px; }
  .profile-stage-name { bottom:3px; }
  .arena-avatar-stage { right:0; width:53%; }
  .arena-avatar-stage .arena-pet { left:1%; width:52px; height:52px; }
  .arena-avatar-stage .arena-character-name { bottom:4px; }
  .thieving-safety { align-items:stretch; }
  .thieving-safety label { flex:1 1 130px; }
  .thieving-safety select { width:100%; max-width:none; }
}

/* The complete nameplate has one pair of ornaments; cropped SVG layers repeat them. */
.player-name-tag.has-art { border:0; border-image:none; background-image:var(--tag-art); background-size:100% 100%; background-position:center; background-repeat:no-repeat; }
.profile-stage canvas { bottom:76px; }
.profile-pet { left:calc(50% - 77px); bottom:104px; }
.profile-stage-name { bottom:15px; }
.account-character-stage > canvas { bottom:42px; }
.account-character-pet { left:calc(50% - 45px); bottom:48px; }
.thieving-target { left:49%; }
.sidebar .character-chip { margin-bottom:4px; }
.sidebar .nav-item { min-height:40px; padding-block:7px; }
@media (max-width:620px) {
  .profile-stage canvas { bottom:64px; }
  .profile-pet { left:calc(50% - 65px); bottom:87px; }
  .profile-stage-name { bottom:9px; }
}

.theme-settings { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:13px; margin:0 0 20px; padding:16px 18px; border:1px solid #dce8df; border-radius:16px; background:#fff; }
.theme-settings h2 { margin:0 0 4px; font:700 19px var(--serif); }
.theme-settings p { margin:0; color:var(--muted); font-size:12px; }
.theme-options { display:flex; gap:4px; padding:4px; border-radius:11px; background:#edf1ec; }
.theme-options button { min-height:35px; min-width:65px; padding:7px 12px; border:0; border-radius:8px; background:transparent; color:#526858; font-size:12px; font-weight:700; }
.theme-options button[aria-pressed="true"] { background:#fff; color:#213f2b; box-shadow:0 1px 4px #203b2c24; }
.sound-switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; font-weight:700; }
.sound-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.sound-switch-track { width:44px; height:26px; border-radius:999px; background:#aab5ae; padding:3px; transition:background .2s ease; }
.sound-switch-track::after { content:""; display:block; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; transition:transform .2s ease; }
.sound-switch input:checked + .sound-switch-track { background:#4b8d69; }
.sound-switch input:checked + .sound-switch-track::after { transform:translateX(18px); }
.sound-switch input:focus-visible + .sound-switch-track { outline:3px solid #7b4fc0; outline-offset:3px; }
.sound-switch-state { min-width:24px; }

html[data-theme="dark"] { color-scheme:dark; --ink:#eef0f5; --muted:#b1b8c4; --dim:#8e98a8; --accent:#b8a5e8; --line:#404650; --glass:#242831e8; background:#15171d; }
html[data-theme="dark"] body,html[data-theme="dark"] .game-shell { color:var(--ink); background:#15171d; }
html[data-theme="dark"] :is(.sidebar,.workspace,.inventory-panel),html[data-theme="dark"] .game-shell .inventory-panel { border-color:#343943; background:#20232b; box-shadow:0 12px 36px #090a1059; }
html[data-theme="dark"] :is(.brand,.page-heading h1,.section-title h2,.panel-heading h2,.workspace-content h2,.workspace-content h3) { color:#f2f3f7; }
html[data-theme="dark"] :is(.nav-label,.nav-item .nav-level,.connection-status,.breadcrumb,.page-heading p,.section-title > span,.rail-subheading,.rail-inventory-heading,.gem-purchase-note) { color:#aeb6c3; }
html[data-theme="dark"] .nav-item { color:#e1e4ed; }
html[data-theme="dark"] .nav-item:hover { background:#303541; color:#fff; }
html[data-theme="dark"] .nav-item.active { background:#494065; color:#fff; }
html[data-theme="dark"] .nav-progress { background:color-mix(in srgb,var(--skill-color) 55%,#343945); }
html[data-theme="dark"] .nav-item.active .nav-progress { background:#625486; }
html[data-theme="dark"] :is(.nav-icon img,.store-upgrade img,.leaderboard-heading > img,.codex-summary > img) { filter:brightness(0) invert(1); opacity:.88; }
html[data-theme="dark"] :is(.workspace-top,.rail-bank-tools,.gem-offers,.gem-cosmetics,.leaderboard-list) { border-color:#404650; }
html[data-theme="dark"] :is(.workspace-content.location-page,.location-header + .location-list,.pvp-hub) { background:#20232b; }
html[data-theme="dark"] .pvp-header::after { background:linear-gradient(180deg,transparent 35%,#20232b66 64%,#20232b); }
html[data-theme="dark"] :is(.theme-settings,.account-character-card,.account-form,.guide-card,.stake-form,.stake-detail,.skill-action,.slayer-offer,.slayer-control,.slayer-task-card,.store-item,.store-upgrade,.monster-card,.dungeon-card,.codex-row,.codex-detail,.codex-summary,.leaderboard-heading,.leaderboard-native-row:not(.has-tag),.pet-card,.profile-skill,.thieving-safety,.item-dialog,.account-dialog,.battle-food-menu,.battle-choice-panel,.location-row,.arena-opponent,.arena-destination,.gem-pack-card,.gem-style-grid > button,.public-profile-stats > span,.public-profile-equipment > div,.public-profile-skills > span,.appearance-choice,.appearance-color-group) { background:#292d36; border-color:#424854; color:#eef0f5; }
html[data-theme="dark"] :is(.skill-action.active,.arena-opponent:hover,.profile-skill:hover,.nav-item:focus-visible,.pet-card.is-active) { background:#363b49; }
html[data-theme="dark"] :is(.skill-action-art,.item-tile,.equipment-slot,.rail-bank-tabs button,.rail-bank-filter input,.rail-bank-filter select,.store-tools input,.store-quantity input,.store-quantity select,.thieving-safety select,.account-form input,.account-form select,.theme-options,.profile-tabs,.rail-tabs,.rail-tab-editor,.rail-tab-editor input,.rail-tab-editor button,.appearance-choice-card,.appearance-form select,.leaderboard-heading select,.codex-tools input,.slayer-offer input,.skill-level-pill,.battle-choice-grid > button,.battle-food-option button) { background:#232730; border-color:#454b58; color:#eef0f5; }
html[data-theme="dark"] :is(.profile-tabs button.active,.rail-tabs button.active,.rail-bank-tabs button.active,.theme-options button[aria-pressed="true"],.leaderboard-filters button.active) { background:#414758; border-color:#656d7d; color:#fff; }
html[data-theme="dark"] :is(.theme-options button,.leaderboard-filters button) { color:#d3d8e3; }
html[data-theme="dark"] .leaderboard-filters button { background:#292d36; border-color:#424854; }
html[data-theme="dark"] :is(.theme-settings p,.account-character-caption > span:nth-child(2),.skill-action-meta,.skill-action-owned,.slayer-offer small,.store-item small,.pet-card small,.gem-packs p,.gem-packs .section-title p,.gem-style-grid small,.codex-detail p,.codex-stats > span,.codex-goal span,.codex-drops small,.codex-row small,.leaderboard-heading small,.codex-summary span,.leaderboard-player small,.leaderboard-value small,.slayer-task-card p,.slayer-control span,.gem-offer span,.gem-intro) { color:#b1b8c4; }
html[data-theme="dark"] :is(.codex-detail h2,.codex-stats strong,.codex-hunters > span,.leaderboard-heading strong,.codex-summary strong,.gem-style-grid strong,.gem-pack-details strong,.slayer-coins,.appearance-choice legend,.appearance-color-group strong) { color:#f2f3f7; }
html[data-theme="dark"] :is(.codex-goal-track,.slayer-progress) { background:#454b56; }
html[data-theme="dark"] .codex-drops span { background:#353b47; color:#e6eaf0; }
html[data-theme="dark"] .codex-hunters > span { border-color:#414854; }
html[data-theme="dark"] .codex-row::before { background:#365047; opacity:1; }
html[data-theme="dark"] .codex-row.tier-3::before { background:#394d66; }
html[data-theme="dark"] .codex-row.tier-4::before { background:#514564; }
html[data-theme="dark"] .codex-row.tier-5::before { background:#62513a; }
html[data-theme="dark"] .codex-row.tier-6::before { background:linear-gradient(100deg,#604454,#514766,#3b5660); }
html[data-theme="dark"] .codex-row > span { position:relative; z-index:1; }
html[data-theme="dark"] .codex-row > span :is(strong,small) { color:#f2f3f7; }
html[data-theme="dark"] .codex-kill-count { position:relative; z-index:1; color:#f2f3f7; }
html[data-theme="dark"] .leaderboard-native-row.is-you:not(.has-tag) { background:#303b56; border-color:#687a9b; }
html[data-theme="dark"] .profile-skill-fill { background:color-mix(in srgb,var(--skill-color) 52%,#262b36); }
html[data-theme="dark"] .profile-skill-name,html[data-theme="dark"] .profile-skill > strong { color:#f3f5f8; }
html[data-theme="dark"] .profile-skill-icon img { filter:brightness(0) invert(1); }
html[data-theme="dark"] .gem-pack-details small { color:#c4a2f2; }
html[data-theme="dark"] .gem-offer,html[data-theme="dark"] .gem-cosmetics button { border-color:#404650; }
html[data-theme="dark"] .gem-cosmetics button { color:#e9ecf3; }
html[data-theme="dark"] .gem-offer button:disabled { background:#3b3e48; color:#bec3cb; }
html[data-theme="dark"] .pet-feature { background:linear-gradient(115deg,#2a4053,#453b59); }
html[data-theme="dark"] :is(.pet-feature p,.appearance-choice-card span) { color:#cbd1dc; }
html[data-theme="dark"] .pet-card-art { background:transparent; }
html[data-theme="dark"] .account-character-caption button:disabled { background:#414853; color:#c0c9d0; }
html[data-theme="dark"] :is(.auth-screen,.auth-box) { background:#20232b; color:#eef0f5; }
html[data-theme="dark"] .auth-scenery { background:linear-gradient(90deg,#20232bef,#20232bbb),url("assets/greenhollow.png") center/cover; }
html[data-theme="dark"] :is(.auth-back,.auth-box label) { color:#eef0f5; }
html[data-theme="dark"] :is(.auth-box input,.auth-tabs,.auth-tabs .selected) { background:#292d36; border-color:#454b58; color:#eef0f5; }
html[data-theme="dark"] .style-picker { background:#292d36; border-color:#424854; }
html[data-theme="dark"] .style-picker strong { color:#e9ecf3; }
html[data-theme="dark"] .style-picker select { background:#232730; border-color:#454b58; color:#eef0f5; }
html[data-theme="dark"] .style-preview { background:#363c49; color:#d5dbe6; }
html[data-theme="dark"] .style-preview.auraId { background:radial-gradient(circle,#444359,#303641); }
html[data-theme="dark"] .style-preview.weaponTrailId { background:linear-gradient(120deg,#303641,#3b4453,#303641); }
html[data-theme="dark"] :is(.account-form p,.guide-card p,.stake-form p,.public-profile-stats > span,.public-profile-equipment small,.public-profile-skills small) { color:#b1b8c4; }
html[data-theme="dark"] :is(.slayer-control button,.slayer-offer button,.pet-card button,.account-unlocks button,.secondary-button) { background:#353b49; border-color:#626b7a; color:#eef0f5; }
html[data-theme="dark"] :is(.ring-theme-choice,.stake-list > button,.arena-loadout,.enchant-picker,.enchant-detail,.enchant-path-library,.enchant-item-list button,.enchant-path-card,.enchant-bound,.enchant-materials span,.enchant-forge > div,.enchant-preview-chance,.equipment-slot-pair,.equipment-bonuses span,.container-drops > span) { background:#292d36; border-color:#424854; color:#eef0f5; }
html[data-theme="dark"] :is(.arena-loadout select,.arena-controls select,.enchant-actions select,.enchant-bound select,.enchant-path-card select,.item-transfer-form select,.item-transfer-form input,.item-bank-move select,.combat-food select,.combat-prayer-options button,.enchant-dialog-picker button,.mobile-inventory-close) { background:#232730; border-color:#454b58; color:#eef0f5; }
html[data-theme="dark"] :is(.combat-food,.arena-controls label,.ring-theme-choice,.stake-list span,.enchant-path-card p,.enchant-warning p,.enchant-materials small,.enchant-forge small,.equipment-bonuses span) { color:#b1b8c4; }
html[data-theme="dark"] .equipment-bonuses strong { color:#f2f3f7; }
html[data-theme="dark"] .enchant-warning { background:#49372e; border-color:#8a644d; color:#f7e3d3; }
html[data-theme="dark"] .enchant-bound > span { background:#363b49; }
html[data-theme="dark"] .thieving-target span { background:#292d36dc; color:#eef0f5; }
html[data-theme="dark"] .public-profile-name { background:#242831e8; color:#eef0f5; }
html[data-theme="dark"] .public-profile-name span:last-child { color:#b1b8c4; }
html[data-theme="dark"] .public-profile-stats strong { color:#f2f3f7; }
html[data-theme="dark"] .rail-modal-scrim { background:#16192180; }
html[data-theme="dark"] .skill-action-ring .ring-track,html[data-theme="dark"] .ring-theme-choice .ring-track { stroke:#454c59; }
html[data-theme="dark"] .skill-action-art { border-color:#444b58; }
html[data-theme="dark"] .skill-action-owned { background:#344a43; border-color:#292d36; color:#d4f3df; }
html[data-theme="dark"] .skill-action-owned.empty { color:#aeb6c4; }
html[data-theme="dark"] .skill-action-input { background:#344a43; border-color:#292d36; color:#d4f3df; }
html[data-theme="dark"] .skill-action-input.missing { background:#523536; color:#ffcac4; }
html[data-theme="dark"] .game-accessory { background:#30343edd; border-color:#5a626e; color:#eef0f5; box-shadow:0 8px 30px #080a1066,inset 0 1px #ffffff1a; }
html[data-theme="dark"] .accessory-icon { background:#424d55; }
html[data-theme="dark"] .accessory-copy small { color:#c2c9d4; }
html[data-theme="dark"] .game-accessory button { background:#424a56; border-color:#626e7c; color:#eef0f5; }
html[data-theme="dark"] .accessory-notice { color:#9bd7ed; }
.sidebar { scrollbar-width:none; }
.sidebar::-webkit-scrollbar { display:none; }
html { scrollbar-gutter:stable; }
.workspace-content { box-sizing:border-box; width:100%; }
.profile-stage canvas { bottom:88px; }
.account-character-stage > canvas { bottom:64px; }
.account-character-pet { bottom:65px; }
@media (max-width:620px) { .profile-stage canvas { bottom:76px; } }
html[data-theme="dark"] .gem-pack-availability { width:100%; border:0; cursor:pointer; }
html[data-theme="dark"] .gem-pack-availability:disabled { opacity:1; background:#555866; color:#e9eaf0; cursor:default; }
.gem-pack-availability { width:100%; border:0; cursor:pointer; }
.gem-pack-availability:disabled { opacity:1; background:#626474; color:#fff; cursor:default; }
.gem-pack-availability:not(:disabled):hover { filter:brightness(1.08); transform:translateY(-2px); box-shadow:inset 0 1px #ffffff60,0 8px 18px #7543a745; }
.gem-pack-availability:not(:disabled):active { transform:translateY(0); }
.gem-pack-availability:focus-visible,.gem-starter-status:focus-visible { outline:3px solid #d7b4ff; outline-offset:3px; }
.battle-actor > .player-name-tag { font-size:20px; font-weight:700; }
.battle-actor > .player-name-tag.has-art { min-width:148px; height:46px; padding-inline:32px; font-size:20px; }
.thieving-splats { position:absolute; z-index:5; inset:0; pointer-events:none; }
.hit-splat-picker { margin:22px 0; padding:17px; border:1px solid #dfe7e3; border-radius:18px; background:#fff; }
.hit-splat-picker .section-title { margin:0 0 12px; }
.hit-splat-picker-body { display:flex; align-items:center; gap:20px; }
.hit-splat-picker-body label { display:grid; gap:6px; flex:1; color:#536658; font-size:12px; font-weight:700; }
.hit-splat-picker-body select { min-height:42px; padding:7px 11px; border:1px solid #d4dfd4; border-radius:9px; background:#fff; color:#26382b; }
.hit-splat-examples { display:flex; gap:8px; }
.hit-splat-preview { display:grid; place-items:center; width:58px; height:58px; background:center/contain no-repeat; color:#fff; font:800 19px 'DM Sans',sans-serif; text-shadow:0 1px 2px #18202d,0 0 4px #18202d; }
.hit-splat-preview.classic.hit { background:#c43a4b; clip-path:polygon(50% 0%,60% 17%,78% 5%,80% 27%,100% 30%,87% 49%,100% 68%,78% 73%,75% 96%,56% 84%,39% 100%,31% 80%,9% 85%,14% 62%,0% 49%,19% 37%,7% 17%,32% 21%); }
.hit-splat-preview.classic.miss { background:#447fac; clip-path:polygon(50% 0%,60% 17%,78% 5%,80% 27%,100% 30%,87% 49%,100% 68%,78% 73%,75% 96%,56% 84%,39% 100%,31% 80%,9% 85%,14% 62%,0% 49%,19% 37%,7% 17%,32% 21%); }
html[data-theme="dark"] .hit-splat-picker { background:#292d36; border-color:#424854; }
html[data-theme="dark"] .hit-splat-picker-body label { color:#d3d8e3; }
html[data-theme="dark"] .hit-splat-picker-body select { background:#232730; border-color:#454b58; color:#eef0f5; }
@media (max-width:620px) { .battle-actor > .player-name-tag.has-art { min-width:120px; height:40px; padding-inline:27px; font-size:17px; } }

/* The Recruit artwork is one continuous plate, unlike the sliced name tags. */
.player-name-tag.has-art.tag-recruit { border:0; border-image:none; background:var(--tag-art) center/100% 100% no-repeat; color:var(--tag-ink); text-shadow:0 1px 2px #0c111a; }
.player-name-tag.has-art.tag-gilded { padding-inline:3px; border:0 solid transparent; border-width:0 var(--tag-cap); border-image:var(--tag-art) 0 48 fill stretch; background:none; text-shadow:none; }

@keyframes gem-ring-fill { 0%,6% { stroke-dasharray:0 100; } 78%,90% { stroke-dasharray:100 100; } 100% { stroke-dasharray:0 100; } }
@keyframes gem-hit-pop { 0% { opacity:0; transform:translateY(18px) scale(.45) rotate(-8deg); } 12% { opacity:1; transform:translateY(-7px) scale(1.18) rotate(3deg); } 35%,82% { opacity:1; transform:translateY(-3px) scale(1); } 100% { opacity:0; transform:translateY(-20px) scale(.94); } }
.gem-shop-art .gem-shop-ring .ring-fill,.gem-fitting-ring .ring-fill { animation:gem-ring-fill 3.2s ease-in-out infinite; }
.gem-shop-ring-wrap { position:relative; display:grid; place-items:center; width:105px; height:105px; }
.gem-shop-ring-wrap .shop-ring-shader-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.gem-fitting-ring .shop-ring-shader-canvas { position:absolute; left:4px; top:4px; width:48px; height:48px; pointer-events:none; }
.gem-shop-ring-wrap.shader-active .ring-fill,.gem-fitting-ring.shader-active .ring-fill { opacity:0; }
.gem-shop-effect-preview { display:block; width:100%; height:135px; }
.gem-fitting-hit { top:32%; left:61%; right:auto; width:82px; height:82px; border:0; background:none; opacity:0; pointer-events:none; }
.gem-fitting-hit.is-visible { animation:gem-hit-pop 1.1s ease-out both; }
.gem-fitting-hit .hit-splat-preview { width:82px; height:82px; font-size:24px; }

.gem-starter { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; min-height:310px; margin:0 0 30px; padding:0; overflow:hidden; border:1px solid #9e6f41; background:linear-gradient(135deg,#3e2635,#1d1e32 76%); }
.gem-starter-preview { min-width:0; }
.gem-starter-preview .gem-fitting-stage { height:100%; min-height:310px; }
.gem-starter-preview .gem-fitting-ring { display:none; }
.gem-starter-info { display:flex !important; flex-direction:column; gap:14px !important; padding:25px 24px 22px; }
.gem-starter-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.gem-starter-heading > div { display:grid; gap:5px; min-width:0; }
.gem-starter-heading h2 { margin:0; color:#fff; font:600 24px/1.15 var(--serif); }
.gem-starter-limit { color:#d6cddd; font-size:12px; font-weight:600; }
.gem-starter-heading > strong { color:#f7d29a; font:800 21px var(--sans,Arial,sans-serif); white-space:nowrap; }
.gem-starter-info > p { margin:0; color:#e0d8e2; font-size:13px; line-height:1.4; }
.gem-starter-includes { display:grid; gap:7px; }
.gem-starter-includes > div { display:flex; align-items:center; gap:11px; min-height:50px; padding:5px 9px; border:1px solid #ffffff2e; border-radius:10px; background:#ffffff12; }
.gem-starter-includes > div > img { width:36px; height:36px; flex:none; }
.gem-starter-includes > div > span:last-child { display:grid; gap:1px; color:#f7f3f8; }
.gem-starter-includes b { font-size:12px; }
.gem-starter-includes small { color:#c9bfce; font-size:10px; }
.gem-starter-tag-sample { display:flex; align-items:center; justify-content:center; width:76px; flex:none; }
.gem-starter-tag-sample .player-name-tag { min-width:73px; width:73px; height:27px; padding:0 7px; overflow:hidden; font-size:8px; text-overflow:ellipsis; }
.gem-starter-splats { display:flex; flex:none; width:76px; }
.gem-starter-splats .hit-splat-preview { width:39px; height:39px; margin-right:-5px; font-size:11px; }
.gem-starter-status { align-self:stretch; width:100%; min-height:44px; margin-top:auto; padding:9px 18px; border:1px solid #efc37d; border-radius:8px; background:linear-gradient(105deg,#f3c271,#e8a84b 58%,#f4ce84); color:#25192b !important; font-size:12px !important; font-weight:800; box-shadow:inset 0 1px #fff5d899,0 5px 14px #120b1a55; cursor:pointer; transition:filter .18s ease,transform .18s ease; }
.gem-starter-status:not(:disabled):hover { filter:brightness(1.08); transform:translateY(-2px); }
.gem-starter-status:not(:disabled):active { transform:translateY(0); }
.gem-starter-status:disabled { opacity:.7; cursor:default; }
@media (max-width:750px) { .gem-starter { grid-template-columns:1fr; }.gem-starter-preview .gem-fitting-stage { min-height:260px; }.gem-starter-info { padding:19px; } }
@media (prefers-reduced-motion:reduce) { .gem-shop-art .gem-shop-ring .ring-fill,.gem-fitting-ring .ring-fill,.gem-fitting-hit.is-visible { animation:none; }.gem-fitting-hit.is-visible { opacity:1; } }

/* Shared mastery, enchantment, and set controls in the visible equipment rail. */
.item-enchantment-badge { position:absolute; top:3px; left:3px; z-index:2; padding:2px 4px; border-radius:5px; background:#7250a7; color:#fff; font-size:10px; font-weight:800; line-height:1.2; pointer-events:none; }
.equipment-slot, .equipment-slot button { position:relative; }
.equipment-set-picker { display:flex; align-items:center; gap:7px; margin:12px 0; }
.equipment-set-picker > span { margin-right:auto; font-size:12px; font-weight:700; }
.equipment-set-picker button { width:35px; height:35px; border:1px solid #aabdb3; border-radius:10px; background:var(--surface,#f5faf7); color:inherit; font-weight:800; cursor:pointer; }
.equipment-set-picker button[aria-pressed=true] { background:#28764f; color:#fff; border-color:#28764f; }
.equipment-set-picker button:disabled { opacity:.55; cursor:wait; }
.battle-arena > .equipment-set-picker { margin:0 22px 12px; color:#fff; }
.battle-arena .equipment-set-picker button { color:#26352f; }
.battle-arena .equipment-set-picker button[aria-pressed=true] { color:#fff; }
.arena-fighter { position:relative; }
.arena-fighter .battle-splats { top:20%; }

.store-cape-perk { margin:5px 0 0; font-size:11px; line-height:1.45; font-weight:400; color:var(--muted,#53675c); }

.equipment-slot .item-enchantment-badge { top:auto; left:auto; right:4px; bottom:4px; }

/* Without a name tag, the sidebar name still reads as a title: the display serif, not body text. */
.sidebar .character-chip .player-name-tag:not(.has-art) { min-width:0; min-height:0; padding:0; color:var(--ink); font:700 26px/1.15 var(--serif); letter-spacing:0; white-space:normal; }
.bank-item, .item-tile { position: relative; }
[data-bank-key] { cursor: grab; }
[data-bank-key]:active { cursor: grabbing; }
.bank-lock-badge { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--surface, #fff); color: var(--text, #333); pointer-events: none; }
.bank-lock-badge svg { width: 14px; height: 14px; }
.bank-item > .bank-lock-button { align-self: flex-start; font-size: 11px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--glass); color: var(--ink); }
.bank-dragging { opacity: .45; user-select: none; }
.bank-drop-target { outline: 2px solid var(--accent, #756045); outline-offset: 2px; }


.forge-materials{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:20px 0}.forge-materials>span{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:8px}.forge-materials img{width:32px;height:32px;object-fit:contain;flex:none}.forge-materials .art-placeholder{width:32px;height:32px;flex:none}

/* Innate progress overlays the existing health bar without taking layout space. */
.battle-status > div, .stake-battle-status > div { position:relative; }
.combat-trait-strip { position:absolute; right:5px; bottom:1.5px; display:flex; align-items:center; gap:6px; height:12px; line-height:1; color:#fff2d3; }
.combat-trait-strip:empty { display:none; }
.combat-trait-strip .combat-trait { display:inline-flex; align-items:center; gap:3px; height:10px; color:#f1f4e9; filter:drop-shadow(0 1px 1px #14221bd9); }
.combat-trait svg { width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.combat-trait-dots { display:flex !important; gap:2px !important; }
.combat-trait-dots b { display:block; width:3px; height:3px; border:1px solid #f1f4e9a6; border-radius:50%; background:#1d372e88; }
.combat-trait-dots b.filled { background:currentColor; border-color:currentColor; }
.combat-trait.is-ready, .combat-trait.is-triggered { color:#ffe0a1; }
.arena-fighter .combat-trait-strip { top:9px; bottom:auto; right:9px; }
.battle-splat.is-volley { width:56px; height:56px; margin-left:-28px; margin-top:-28px; font-size:20px; }
@media(prefers-reduced-motion:reduce) { .battle-splat { animation:battle-splat-fade .8s linear forwards; animation-delay:0s !important; } }
@keyframes battle-splat-fade { 0%,80% {opacity:1} 100% {opacity:0} }
/* Brand: the planted-sword wordmark and its icon. */
.brand-wordmark { display: block; width: auto; height: 24px; }
.auth-mark { display: block; width: auto; height: 56px; margin-bottom: 23px; color: var(--ink); }
.brand-gem { fill: #b8862f; }
html[data-theme="dark"] .brand-gem { fill: #d7ad57; }

/* Keep the reserve inline; combat details belong inside the prayer chooser. */
.prayer-balance { margin: 6px 0; color: var(--ink); }
.prayer-balance-total { display: flex; align-items: center; gap: 6px; min-height: 24px; font-size: 14px; }
.prayer-balance-total img { width: 16px; height: 16px; }
.prayer-balance-total > span { color: var(--muted); }
.prayer-balance-total > strong { margin-left: auto; color: #b8a9e8; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.prayer-points-hint { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.prayer-offering-reward { margin: 3px 0 9px; color: #b8a9e8; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.battle-stance-list .prayer-toggle-points { font-size: inherit; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-theme="light"] .prayer-balance-total > strong,
html[data-theme="light"] .prayer-offering-reward { color: #6951a1; }
.prayer-picker-balance .prayer-balance { margin: 0 0 12px; }
html[data-theme="dark"] .prayer-balance-total img { filter: invert(1); opacity: .88; }

html[data-theme="dark"] .battle-choice-grid [data-prayer] img { filter: invert(1); opacity: .88; }
html[data-theme="dark"] .battle-choice-grid [data-prayer] small { color: var(--muted); }
html[data-theme="dark"] .battle-choice-grid [data-prayer].active { border-color: #b8a9e8; background: #36313f; }
html[data-theme="light"] .battle-choice-grid [data-prayer].active { border-color: #9b89c5; background: #f3effb; }

/* Account policies and deletion. */
.auth-legal { font-size: .78rem; line-height: 1.6; color: var(--muted, #616963); margin: 20px 0; }
.auth-legal a { color: inherit; text-underline-offset: 3px; }
.destructive-button { background: #ac2727; color: white; border: 0; border-radius: 10px; padding: 14px 18px; min-height: 44px; font: inherit; font-weight: 600; cursor: pointer; }
.destructive-button:disabled { opacity: .6; cursor: wait; }
#delete-account-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
#delete-account-dialog p { line-height: 1.6; }
#delete-account-verification { display: grid; gap: 12px; }
#delete-account-password-form { display: grid; gap: 12px; }
#delete-account-password-form label { display: grid; gap: 8px; }

/* Permanent skill progression */
.skill-action.locked .skill-action-art img,.skill-action.locked .skill-action-art .fallback {filter:brightness(0);opacity:.75}
html[data-theme="dark"] .skill-action.locked .skill-action-art img,html[data-theme="dark"] .skill-action.locked .skill-action-art .fallback {filter:brightness(0) invert(.75)}
.skill-action.locked .skill-action-ring {opacity:.8}
.skill-upgrade-intro {color:var(--muted);font-size:.9rem;margin:0 0 16px}
.skill-upgrade-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}
.skill-upgrade-card {display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 10px;border:1px solid var(--line);border-radius:16px;background:var(--glass);color:var(--ink);text-align:center;min-width:0}
.skill-upgrade-card img {width:100%;height:90px;object-fit:contain;margin-bottom:5px}
.skill-upgrade-card small,.skill-upgrade-card span {color:var(--muted);font-size:.75rem}
.skill-upgrade-card b {font-size:.85rem}
.skill-upgrade-card:hover {border-color:var(--accent)}
.skill-upgrade-detail-art img {display:block;width:100%;height:200px;object-fit:contain;margin-bottom:18px}
.skill-upgrade-requirements {display:grid;gap:12px;margin:20px 0}
.skill-upgrade-requirements>div {display:flex;justify-content:space-between;gap:12px}
.skill-upgrade-link {display:block;width:100%;padding:12px 14px;margin:12px 0;border:1px solid var(--line);border-radius:12px;background:var(--glass);color:var(--ink);text-align:left}
@media(max-width:700px){.skill-upgrade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skill-upgrade-card img{height:76px}}

.skill-action-upgrade {position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);pointer-events:none}
.skill-action-upgrade img {width:24px;height:24px;object-fit:contain}

/* Settings: shared card edges and a separate account-deletion action at the end. */
.account-settings-stack { display: grid; gap: 20px; width: 100%; max-width: 750px; margin-block: 28px 8px; container: account-settings / inline-size; }
.account-settings-stack > .account-form { width: 100%; max-width: none; margin: 0; }
.account-legal-list { display: grid; gap: 4px; }
.account-legal-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; text-decoration: none; font-weight: 500; }
.account-legal-list a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.account-legal-list a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.account-legal-list svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .6; }
.account-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.account-setting-copy { min-width: 0; }
.account-setting-copy h2 { margin-block-end: 8px; }
.account-setting-copy p { max-width: 48ch; line-height: 1.6; }
.account-setting-row > button { flex: none; width: 144px; min-width: 144px; min-height: 44px; margin: 0; font-size: 14px; font-weight: 600; }
.account-delete-panel { border-color: #e3c7c4; }
.account-delete-button { padding: 10px 16px; border: 1px solid #ce9690; border-radius: 10px; background: transparent; color: #ac2d25; font: inherit; font-weight: 600; }
.account-delete-button:hover { background: #fff0ee; }
html[data-theme="dark"] .account-delete-panel { border-color: #775054; }
html[data-theme="dark"] .account-delete-button { color: #ffb4ad; border-color: #ad7776; }
html[data-theme="dark"] .account-delete-button:hover { background: #433136; }
@media (max-width: 600px) {
  .account-setting-row { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 16px; }
  .account-setting-row > button { width: 100%; }
}
@container account-settings (max-width: 520px) {
  .account-setting-row { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 16px; }
  .account-setting-row > button { width: 100%; }
}

.dungeon-card-summary {font-weight:600;}
.dungeon-reward-row {display:flex;flex-wrap:wrap;gap:8px 12px;border-top:1px solid #dae1dc;padding-top:10px;}
.dungeon-card-reward {font-size:11px;}
.dungeon-mastery .dungeon-card-monsters img {filter:grayscale(1) sepia(1) hue-rotate(210deg) saturate(1.7);}

.skill-upgrade-detail-header {display:flex;align-items:center;gap:16px;margin-bottom:20px}
.skill-upgrade-detail-header .skill-upgrade-detail-art {width:80px;height:80px;flex:0 0 80px;margin:0}
.skill-upgrade-detail-header h2 {margin:0}

/* Locked skill actions read like iOS: a faint silhouette under a lock and level badge. */
.skill-action.locked { opacity:1; }
.skill-action.locked .skill-action-art img,.skill-action.locked .skill-action-art .fallback { filter:brightness(0); opacity:.22; }
html[data-theme="dark"] .skill-action.locked .skill-action-art img,html[data-theme="dark"] .skill-action.locked .skill-action-art .fallback { filter:brightness(0) invert(1); opacity:.22; }
.skill-action.locked .skill-action-name { color:var(--muted, #758779); }
.skill-action-lock { position:absolute; z-index:3; top:50%; left:50%; display:grid; place-items:center; align-content:center; gap:1px; width:82px; height:82px; border-radius:50%; background:rgba(0,0,0,.42); color:#fff; font-size:9px; font-weight:700; line-height:1.05; text-align:center; transform:translate(-50%,-50%); pointer-events:none; }
.skill-action-upgrade { -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); background:rgba(255,255,255,.72); border-color:rgba(255,255,255,.6); box-shadow:0 2px 8px rgba(0,0,0,.12); }
html[data-theme="dark"] .skill-action-upgrade { background:rgba(60,64,74,.72); border-color:rgba(255,255,255,.12); }
.skill-upgrade-requirements span { display:flex; align-items:center; gap:7px; }
.skill-upgrade-requirements span img { width:20px; height:20px; }
.skill-upgrade-requirements b { font-variant-numeric:tabular-nums; color:var(--muted, #6d7c70); }
.skill-upgrade-requirements b.missing { color:#c2413a; }
html[data-theme="dark"] .skill-upgrade-requirements b.missing { color:#ff7b72; }
.skill-upgrade-buy { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:48px; border-radius:99px; font-variant-numeric:tabular-nums; }
.skill-upgrade-buy img { width:20px; height:20px; }
.skill-upgrade-buy:disabled { opacity:.55; }
.skill-upgrade-detail-header .skill-upgrade-detail-art { width:72px; height:72px; flex:0 0 72px; }
.skill-upgrade-detail-header .skill-upgrade-detail-art img { height:100%; margin:0; }

/* iOS location badges and Profile share sheet. */
.location-badges { position:absolute; z-index:1; top:13px; right:13px; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.location-badges .location-min,.location-dungeons { position:static; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#0009; color:#fff; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; backdrop-filter:blur(8px); }
.location-dungeons img { width:16px; height:16px; filter:brightness(0) invert(1); }
.profile-share-toolbar { display:flex; justify-content:flex-end; margin-bottom:12px; }
.profile-share-toolbar button,.profile-share-actions button { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.profile-share-toolbar svg,.profile-share-actions svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.profile-share-dialog { box-sizing:border-box; width:min(430px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; margin:auto; padding:20px; border:1px solid #dbe5dd; border-radius:22px; background:#f8faf7; color:#283c2d; box-shadow:0 24px 90px #0005; }
.profile-share-dialog::backdrop { background:#17251f70; backdrop-filter:blur(5px); }
.profile-share-dialog header { position:relative; display:flex; align-items:center; min-height:32px; margin-bottom:16px; padding-right:38px; }
.profile-share-dialog h2 { margin:0; font:700 18px/1.3 var(--sans, Inter, system-ui, sans-serif); }
.profile-share-dialog .dialog-close { top:-3px; right:0; }
.profile-share-layouts { display:flex; gap:4px; padding:4px; margin-bottom:16px; border:1px solid #dbe5dd; border-radius:11px; background:#e9eee8; }
.profile-share-layouts button { flex:1; min-width:0; min-height:34px; border:0; border-radius:8px; background:transparent; color:inherit; font:700 13px/1.2 Inter,system-ui,sans-serif; cursor:pointer; }
.profile-share-layouts button[aria-pressed="true"] { background:#fff; box-shadow:0 1px 4px #20302418; }
.profile-share-preview { display:grid; place-items:center; aspect-ratio:4/5; min-height:120px; overflow:hidden; border-radius:18px; background:#1c1c1f; box-shadow:0 8px 24px #0003; }
.profile-share-preview canvas { display:block; width:100%; height:auto; }
.profile-share-preview canvas[hidden] { display:none; }
.profile-share-preview[aria-busy="true"] { opacity:.65; }
.profile-share-status { min-height:16px; margin:12px 0; color:#728077; text-align:center; font-size:12px; line-height:1.4; }
.profile-share-status:empty { margin:8px 0; min-height:0; }
.profile-share-actions { display:flex; gap:12px; }
.profile-share-actions button { flex:1; min-height:44px; min-width:0; font-size:14px; cursor:pointer; }
.profile-share-actions button:disabled { opacity:.5; cursor:default; }
.profile-share-hero-render { position:fixed; left:-10000px; top:0; width:328px; height:324px; pointer-events:none; }
html[data-theme="dark"] .profile-share-dialog { background:#292d36; color:#f0f1f5; border-color:#454b58; }
html[data-theme="dark"] .profile-share-layouts { background:#232730; border-color:#454b58; }
html[data-theme="dark"] .profile-share-layouts button[aria-pressed="true"] { background:#414758; }
html[data-theme="dark"] .profile-share-status { color:#b6bdc9; }
@media(max-height:740px) { .profile-share-preview { width:min(100%,calc((100dvh - 240px) * .8)); margin-inline:auto; } }

/* Live Duels */
.duel-page { --duel-page: #f8faf8; display: block; color: var(--ar-ink); }
html[data-theme="dark"] .duel-page { --duel-page: #20232b; }
.duel-icon { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--duel-icon) center / contain no-repeat; mask: var(--duel-icon) center / contain no-repeat; }
.duel-header { margin: -40px -2px 0; }
.duel-header-button, .duel-close { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(255, 255, 255, .28); color: #fff; -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
.duel-header-button { top: 54px; right: 18px; }
.duel-header-button.is-back { right: auto; left: 18px; }
.duel-header-button .duel-icon, .duel-close .duel-icon { width: 22px; height: 22px; }
.duel-body { position: relative; z-index: 1; display: grid; gap: 26px; margin: -25px -2px 0; padding: 26px 18px 30px; border-radius: 26px 26px 0 0; background: var(--duel-page); }
.duel-record { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.duel-record strong { display: block; font: 900 44px/1 var(--serif); font-variant-numeric: tabular-nums; }
.duel-record span { color: var(--ar-muted); font-size: 15px; }
.duel-search { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 6px 0 18px; border: 1px solid var(--ar-line); border-radius: 999px; background: var(--ar-card); color: var(--ar-muted); box-shadow: 0 4px 14px rgba(20, 30, 25, .06); }
.duel-search input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--ar-ink); font-size: 17px; outline: none; }
.duel-search:focus-within { border-color: var(--ar-accent); }
.duel-section { display: grid; gap: 10px; }
.duel-section h2 { margin: 0 4px; font-size: 21px; font-weight: 700; }
.duel-card { overflow: hidden; border-radius: 22px; background: var(--ar-card); }
/* Let player menus extend beyond their card so every action stays reachable. */
.duel-card:has(.duel-more[open]) { position: relative; z-index: 3; overflow: visible; }
.duel-row { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 12px 14px; }
.duel-row + .duel-row, .duel-toggle + .duel-toggle { border-top: 1px solid var(--ar-line); }
.duel-row.is-request { display: grid; gap: 12px; }
.duel-line { display: flex; align-items: center; gap: 10px; }
.duel-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duel-pair button { min-height: 46px; font-size: 16px; }
.duel-who { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.duel-who > span:last-child { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.duel-who .player-name-tag:not(.has-art) { min-width: 0; min-height: 0; padding: 0; font-size: 17px; font-weight: 700; }
.duel-who small { overflow: hidden; max-width: 100%; color: var(--ar-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.duel-portrait { position: relative; flex: none; width: 48px; height: 48px; border: 1px solid var(--ar-line); border-radius: 50%; background: var(--ar-soft); }
.duel-portrait > i { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
/* The zoomed figure, cropped by the circle, frames the head the way iOS portraits do. */
.duel-portrait canvas { width: 100%; height: 100%; transform: scale(1.55); transform-origin: 50% 12%; }
.duel-portrait b { position: absolute; right: -7px; bottom: -4px; min-width: 24px; padding: 1px 5px; border: 1px solid var(--ar-line); border-radius: 999px; background: color-mix(in srgb, var(--ar-card) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.duel-result { font-size: 15px; }
.duel-result.is-won { color: #2f9e55; }
.duel-result.is-lost { color: var(--ar-danger); }
.duel-result.is-draw { color: var(--ar-muted); }
.duel-more { position: relative; flex: none; }
.duel-more summary { display: grid; place-items: center; width: 36px; height: 44px; color: var(--ar-muted); list-style: none; cursor: pointer; }
.duel-more summary::-webkit-details-marker { display: none; }
.duel-menu { position: absolute; z-index: 5; top: 40px; right: 0; display: grid; min-width: 190px; padding: 6px; border: 1px solid var(--ar-line); border-radius: 18px; background: color-mix(in srgb, var(--ar-card) 88%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.duel-menu button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--ar-ink); font-size: 15px; text-align: left; }
.duel-menu button:hover { background: var(--ar-soft); }
.duel-menu .is-danger { color: var(--ar-danger); }
.duel-empty { display: grid; justify-items: center; gap: 4px; padding: 26px 16px; color: var(--ar-muted); text-align: center; }
.duel-empty .duel-icon { width: 34px; height: 34px; margin-bottom: 6px; }
.duel-empty h3 { margin: 0; color: var(--ar-ink); font-size: 17px; }
.duel-empty p { margin: 0; font-size: 15px; }
/* Friends: the hall art blurred behind the top, fading into the page. */
.duel-page.is-sheet { position: relative; display: grid; gap: 22px; padding: 6px 0 30px; isolation: isolate; }
.duel-sheet-art { position: absolute; z-index: -1; inset: -40px -18px auto; height: 320px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.duel-sheet-art img { width: 100%; height: 100%; object-fit: cover; filter: blur(24px) saturate(1.2); opacity: .75; transform: scale(1.15); }
.duel-sheet-top { display: flex; align-items: center; justify-content: center; position: relative; min-height: 48px; }
.duel-sheet-top .sk-tabs { justify-self: auto; background: color-mix(in srgb, var(--ar-card) 55%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.duel-sheet-top .duel-close { top: 2px; right: 0; border-color: var(--ar-line); background: color-mix(in srgb, var(--ar-card) 60%, transparent); color: var(--ar-ink); }
/* Challenge: both fighters face off in the arena, dissolving into the rules. */
.duel-page.is-compose { margin: -40px -2px 0; }
.duel-stage { position: relative; height: 400px; overflow: hidden; isolation: isolate; background: #c6ab80; --ar-sand-line: 52%; }
html[data-theme="dark"] .duel-stage { background: #3c372f; }
.duel-stage .ar-duel-scene, .duel-stage .ar-duel-ground { position: absolute; z-index: -2; left: 0; width: 100%; pointer-events: none; }
.duel-stage .ar-duel-scene { top: 0; height: var(--ar-sand-line); object-fit: cover; object-position: center bottom; }
.duel-stage .ar-duel-ground { top: calc(var(--ar-sand-line) - 1px); height: calc(100% - var(--ar-sand-line) + 1px); object-fit: cover; object-position: center top; }
.duel-stage .is-dark, html[data-theme="dark"] .duel-stage img:not(.is-dark):is(.ar-duel-scene, .ar-duel-ground) { display: none; }
html[data-theme="dark"] .duel-stage img.is-dark { display: block; }
.duel-stage::after { position: absolute; z-index: -1; inset: auto 0 0; height: 160px; content: ""; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--duel-page) 55%, transparent) 50%, var(--duel-page) 88%); -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); }
.duel-stage + .duel-compose { position: relative; margin-top: -28px; padding-top: 30px; background: linear-gradient(transparent, var(--duel-page) 10px); }
.duel-stage .duel-close { top: 52px; left: 18px; color: #1c1d1f; }
html[data-theme="dark"] .duel-stage .duel-close { color: #fff; }
.duel-stage-fighters { position: absolute; inset: 70px 0 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; padding: 0 12px; }
.duel-fighter { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.duel-fighter canvas { width: min(170px, 100%); height: 220px; }
.duel-fighter.is-foe canvas { transform: scaleX(-1); }
.duel-fighter .player-name-tag:not(.has-art) { min-height: 0; padding: 0; font-size: 16px; font-weight: 700; }
.duel-fighter small { color: var(--ar-muted); font-size: 13px; font-weight: 600; }
.duel-vs { align-self: center; margin-bottom: 40px; color: #fff; font: italic 900 38px/1 var(--serif); text-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.duel-compose { display: grid; gap: 10px; padding: 4px 18px 30px; }
.duel-compose h2 { margin: 0 4px; font-size: 21px; }
.duel-toggle { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 14px; color: var(--ar-ink); font-size: 17px; cursor: pointer; }
.duel-toggle .duel-icon { width: 24px; height: 24px; color: var(--ar-muted); }
.duel-toggle > span:not(.duel-icon) { flex: 1; }
.duel-toggle input { appearance: none; position: relative; flex: none; width: 52px; height: 32px; margin: 0; border-radius: 999px; background: var(--ar-soft); cursor: pointer; transition: background .2s; }
.duel-toggle input::after { position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); content: ""; transition: transform .2s; }
.duel-toggle input:checked { background: #34c759; }
.duel-toggle input:checked::after { transform: translateX(20px); }
.duel-toggle input:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.duel-note { margin: 0 4px 8px; color: var(--ar-muted); font-size: 14px; }
@media (max-width: 620px) {
  .duel-header { margin: -30px -17px 0; }
  .duel-body { margin: -30px -17px 0; padding: 22px 17px 30px; }
  .duel-page.is-compose { margin: -30px -17px 0; }
  .duel-sheet-art { inset-inline: -17px; }
  .duel-row:not(.is-request) .sk-primary { padding: 0 14px; }
}