/* Generated by tools/build-ui-styles.mjs. Edit the source files listed below. */

/* SOURCE: css/gold-theme.css */
/* =============================================================
   ZEYD ONLINE — MERKEZI ALTIN ARAYUZ DILI
   Genel siralama panelinin bronz/altin cerceve dilini ana panellere
   ve alt HUD'a yayar. HP/MP, hata ve tehlike renkleri anlamsal olarak
   kendi renklerini korur.
   ============================================================= */

:root {
  --zeyd-gold-1: #fff0ad;
  --zeyd-gold-2: #e8c468;
  --zeyd-gold-3: #a66c27;
  --zeyd-gold-4: #573316;
  --zeyd-panel-ink: #09080d;
  --zeyd-panel-brown: #24150e;
}

.frame,
.merchant-panel,
.character-panel,
.blacksmith-panel,
.dungeon-panel,
.arena-panel,
.community-panel,
.ranking-panel,
.bank-panel,
.mining-panel,
.wheel-panel,
.breaker-panel,
.pet-panel,
.inspect-panel,
.afk-panel {
  border-color: rgba(231, 190, 91, .78);
  background:
    linear-gradient(180deg, rgba(28, 18, 14, .985), rgba(7, 7, 12, .99)) padding-box,
    linear-gradient(135deg, #5c3616, #f0d57c 18%, #7d4a1c 42%, #f2d681 68%, #4c2a13) border-box;
  box-shadow:
    0 0 0 1px #020205,
    0 1.1rem 3rem rgba(0, 0, 0, .72),
    inset 0 1px rgba(255, 240, 177, .12);
}

.frame__header,
.merchant-panel__header,
.community-header,
.bank-header,
.mining-header,
.inspect-header,
.afk-header,
.pet-panel__header,
.cp-header,
.bs-header,
.dg-header,
.ar-header,
.rk-header,
.character-panel__header,
.blacksmith-panel__header,
.dungeon-panel__header,
.arena-panel__header,
.ranking-header {
  border-bottom-color: rgba(228, 185, 83, .58);
  background:
    linear-gradient(90deg, rgba(112, 70, 27, .78), rgba(49, 29, 17, .9) 42%, rgba(10, 9, 14, .96) 100%);
  box-shadow: inset 0 1px rgba(255, 238, 169, .11), inset 0 -1px rgba(0, 0, 0, .7);
}

.frame__footer,
.merchant-panel__footer,
.community-footer,
.bank-footer,
.cp-footer,
.bs-footer,
.dg-footer,
.ar-footer,
.rk-footer {
  border-top-color: rgba(213, 165, 67, .42);
  background: linear-gradient(90deg, rgba(56, 33, 18, .82), rgba(9, 8, 13, .94));
}

.ui-button:not(.ui-button--danger),
.mc-tab,
.cp-tab,
.community-tab,
.bank-tab {
  border-color: rgba(224, 178, 75, .72);
  background: linear-gradient(180deg, rgba(91, 57, 23, .96), rgba(26, 17, 13, .98));
  color: var(--zeyd-gold-1);
  box-shadow: inset 0 1px rgba(255, 238, 166, .12), inset 0 -8px 16px rgba(0, 0, 0, .28);
}

.ui-button:not(.ui-button--danger):hover,
.ui-button:not(.ui-button--danger):focus-visible,
.mc-tab:hover,
.mc-tab.is-active,
.cp-tab:hover,
.cp-tab.is-active,
.community-tab:hover,
.community-tab.is-active,
.bank-tab:hover,
.bank-tab.is-active {
  border-color: #f3d77c;
  background: linear-gradient(180deg, rgba(137, 91, 34, .98), rgba(45, 27, 15, .99));
  color: #fff4c3;
  box-shadow: 0 0 .75rem rgba(226, 177, 69, .18), inset 0 1px rgba(255, 246, 205, .2);
}

/* Alt HUD ve EXP yuvası: mor/kirmizi kasanin yerine siralama altini. */
.bottom-hud-root .bottom-hud {
  border-top-color: rgba(250, 220, 135, .88);
  background:
    linear-gradient(90deg, rgba(47, 29, 15, .98), rgba(13, 11, 14, .995) 38%, rgba(38, 23, 13, .98) 76%, rgba(9, 8, 12, .995));
  box-shadow: inset 0 2px rgba(230, 183, 78, .45), 0 -10px 26px rgba(0, 0, 0, .54);
}

.bottom-hud-root .bottom-hud__quick-row {
  border-color: rgba(226, 180, 78, .46);
  background: linear-gradient(180deg, rgba(69, 43, 20, .38), rgba(8, 7, 11, .54));
}

.bottom-hud-root .bottom-hud__quick-button {
  border-color: rgba(235, 197, 103, .66);
  background: linear-gradient(145deg, rgba(79, 51, 23, .97), rgba(12, 10, 16, .99));
  color: #dfc377;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .78), inset 0 0 10px rgba(211, 158, 55, .18);
}

.bottom-hud-root .bottom-hud__quick-button:not(:disabled):hover,
.bottom-hud-root .bottom-hud__quick-button:not(:disabled):focus-visible {
  border-color: #f4db89;
  background: linear-gradient(145deg, rgba(126, 83, 31, .98), rgba(25, 16, 13, .99));
  box-shadow: 0 0 .75rem rgba(235, 190, 86, .2), inset 0 0 0 1px rgba(255, 237, 164, .08);
}

.bottom-hud-root .bottom-hud__exp-frame {
  border-color: rgba(240, 204, 112, .78);
  background: linear-gradient(180deg, rgba(102, 68, 28, .96), rgba(15, 11, 12, .99));
  box-shadow: 0 0 14px rgba(228, 181, 78, .2), inset 0 1px rgba(255, 240, 181, .14);
}

.bottom-hud-root .bottom-hud__exp-fill {
  background: linear-gradient(90deg, #714214, #b77826 45%, #edca63 82%, #fff0a4);
  box-shadow: inset 0 1px rgba(255, 255, 255, .25), 0 0 12px rgba(221, 166, 61, .42);
}

/* Town hızlı bilgi kutusu da aynı altın ailede kalır. */
.screen--town .town-quick__row,
.screen--town .town-quick__row.is-clan,
.screen--town .town-quick__row.is-bonus {
  border-bottom-color: rgba(222, 175, 73, .32);
  background: linear-gradient(90deg, rgba(84, 52, 22, .86), rgba(8, 14, 25, .92));
}

.screen--town .town-quick__row:hover,
.screen--town .town-quick__row:focus-visible {
  background: linear-gradient(90deg, rgba(130, 85, 32, .95), rgba(18, 24, 37, .96));
}

/* Each boss uses source-map ground coordinates; depth never changes on hover. */
.rift-boss {
  position: absolute;
  z-index: 3;
  left: var(--rift-x, 64.8%);
  top: var(--rift-y, 70.8%);
  width: calc(clamp(3.5rem, var(--rift-size, 15.5%), 18rem) * var(--rift-growth, 1));
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe8a7;
  cursor: pointer;
  filter: drop-shadow(0 .75rem .75rem rgba(0, 0, 0, .8)) drop-shadow(0 0 .65rem rgba(255, 71, 18, .35));
  transform: translate(-50%, -91%);
  transform-origin: 50% 100%;
  transition: filter 140ms ease, transform 140ms ease;
}
.rift-boss:hover,
.rift-boss:focus-visible {
  filter: drop-shadow(0 .75rem .75rem rgba(0, 0, 0, .85)) drop-shadow(0 0 1.1rem rgba(255, 126, 31, .8));
  transform: translate(-50%, -91%) scale(1.045);
  outline: none;
}
.rift-boss:disabled { cursor: wait; filter: grayscale(.25) brightness(.72); }
.rift-boss.is-respawning,
.rift-boss.is-respawning:hover,
.rift-boss.is-respawning:focus-visible {
  cursor: not-allowed;
  pointer-events: none;
  filter: drop-shadow(0 .45rem .55rem rgba(0, 0, 0, .76));
  transform: translate(-50%, -91%);
}
.rift-boss.is-selected .rift-boss__name { border-color: #fff0ac; color: #fff0ac; }
.rift-boss__art { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity 180ms ease; }
.rift-boss.is-respawning .rift-boss__art { opacity: 0; pointer-events: none; }
.rift-boss__name {
  position: absolute;
  left: 50%;
  bottom: -1.55rem;
  min-width: max-content;
  padding: .25em .65em;
  border: 1px solid rgba(229, 191, 98, .72);
  background: rgba(20, 7, 12, .92);
  box-shadow: 0 .25rem .7rem rgba(0, 0, 0, .72);
  font: 700 clamp(.48rem, .82vw, .72rem) var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.rift-boss.is-label-top .rift-boss__name { top: -1.55rem; bottom: auto; }
.rift-boss__respawn {
  position: absolute;
  left: 50%;
  bottom: -3.15rem;
  min-width: max-content;
  padding: .16em .5em;
  border: 1px solid rgba(207, 77, 44, .76);
  background: rgba(27, 5, 8, .94);
  color: #ffb082;
  box-shadow: 0 .2rem .65rem rgba(0, 0, 0, .82);
  font: 800 clamp(.48rem, .76vw, .68rem) ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
  transform: translateX(-50%);
}
.rift-boss__defeated-by {
  position: absolute;
  left: 50%;
  bottom: -4.52rem;
  min-width: max-content;
  padding: .15em .48em;
  border: 1px solid rgba(229, 191, 98, .58);
  background: rgba(12, 9, 10, .94);
  color: #f1d89b;
  box-shadow: 0 .2rem .65rem rgba(0, 0, 0, .82);
  font: 700 clamp(.45rem, .72vw, .64rem) var(--font-ui);
  letter-spacing: .04em;
  transform: translateX(-50%);
}
.rift-boss.is-label-top .rift-boss__respawn { top: -3.1rem; bottom: auto; }
.rift-boss.is-label-top .rift-boss__defeated-by { top: -4.5rem; bottom: auto; }
/* Lav devinin PNG'sinde govde agirligi sagdadir; isim kartini ayak/platform merkezine al. */
[data-boss-id="rift_lava_colossus"] :is(.rift-boss__name, .rift-boss__respawn, .rift-boss__defeated-by) { left: 57%; }
/* Cellat'ın baltası sola uzanır; kartları PNG'nin değil ayaklarının merkezine hizala. */
[data-boss-id="rift_horned_executioner"] :is(.rift-boss__name, .rift-boss__respawn, .rift-boss__defeated-by) { left: 74%; }
.rift-boss__respawn[hidden] { display: none; }
.rift-boss__defeated-by[hidden] { display: none; }
.rift-map__title, .rift-map__back { z-index: 4; }
/* Kısa ekranlarda başlık, HYDRA'nın baş üstü kartı ve sayacından uzak kalır. */
@media (max-height: 850px) {
  .rift-map__title { left: 78%; }
}
@media (max-height: 620px) and (orientation: landscape) {
  .rift-boss__name { padding: .16em .48em; font-size: clamp(.4rem, 1.45cqh, .55rem); }
  .rift-boss__respawn { padding: .1em .36em; font-size: clamp(.39rem, 1.35cqh, .52rem); }
  .rift-boss__defeated-by { padding: .1em .34em; font-size: clamp(.38rem, 1.3cqh, .5rem); }
  .rift-boss.is-label-top .rift-boss__name { top: -.8rem; }
  .rift-boss.is-label-top .rift-boss__respawn { top: -1.65rem; }
  .rift-boss.is-label-top .rift-boss__defeated-by { top: -2.5rem; }
}
.rift-map__back {
  top: 78%;
  bottom: auto;
}

/* Yatay telefonda Yarık kimliği haritanın sağ üst köşesinde kalır. Harita
   çerçevesi alt HUD'u zaten dışarıda bıraktığından dönüş düğmesi çerçevenin
   altına doğrudan yaslanabilir. */
@media (orientation: landscape) and (max-height: 620px) {
  .rift-map__title {
    top: max(.3rem, env(safe-area-inset-top));
    /* Panel, hotspot koordinatlarını koruyan orta artwork çerçevesindedir.
       Negatif fark başlığı geniş panoramanın gerçek ekran kenarına taşır. */
    right: calc((100cqw - 100vw) / 2 + max(.35rem, env(safe-area-inset-right)));
    left: auto;
    padding: .3em 1em;
    font-size: clamp(.62rem, 2.9vh, .88rem);
    transform: none;
  }
  .rift-map__back {
    top: auto;
    bottom: max(.35rem, env(safe-area-inset-bottom));
    width: clamp(8.5rem, 24vw, 11rem);
    min-width: 0;
    min-height: 1.9rem;
    padding: .28rem .55rem;
    font-size: clamp(.46rem, 1.35vh, .58rem);
    line-height: 1.15;
    white-space: normal;
  }
}

/* Arkadas bildirimi ve paneli. */
.bottom-hud-root .bottom-hud__quick-button { position: relative; }
.bottom-hud-root .bottom-hud__badge {
  position: absolute;
  top: -.38rem;
  right: -.38rem;
  display: none;
  min-width: 1rem;
  height: 1rem;
  padding: 0 .2rem;
  border: 1px solid #ffd56c;
  border-radius: 999px;
  background: #a51522;
  color: #fff4c6;
  font: 800 .55rem/1rem Arial, sans-serif;
  box-shadow: 0 0 .55rem rgba(255, 45, 60, .8);
}
.bottom-hud-root .bottom-hud__badge.is-visible { display: block; }
.bottom-hud-root .bottom-hud__quick-button.has-notification { border-color: #c5ac6f; box-shadow: inset 0 0 .4rem #b59b5d44; }
@keyframes friend-button-pulse { 50% { box-shadow: 0 0 .8rem rgba(117, 189, 220, .75), inset 0 0 .6rem rgba(231, 199, 100, .25); } }

.friends-overlay {
  position: fixed;
  inset: 0;
  z-index: 1320;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(1, 2, 8, .8);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s ease;
}
.friends-overlay.is-visible { opacity: 1; }
.friends-panel {
  width: min(92vw, 38rem);
  max-height: min(86dvh, 42rem);
  overflow: hidden;
  border: 1px solid #d4a74b;
  border-radius: 6px;
  background: linear-gradient(155deg, #25160e, #08070d 64%);
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.8), inset 0 0 2.5rem rgba(173,112,35,.1);
}
.friends-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid rgba(225, 180, 80, .38);
  background: linear-gradient(90deg, rgba(102, 66, 28, .86), rgba(11, 10, 18, .94));
}
.friends-header h2 { margin: 0; color: #ffe3a0; font: 800 1rem var(--font-display); letter-spacing: .14em; }
.friends-header p { margin: .2rem 0 0; color: #bcae91; font-size: .7rem; }
.friends-body { max-height: calc(86dvh - 4.5rem); overflow: auto; padding: .85rem; }
.friends-section + .friends-section { margin-top: .9rem; }
.friends-section h3 { margin: 0 0 .38rem; color: #ddb75f; font: 700 .7rem var(--font-display); letter-spacing: .12em; }
.friends-list { display: grid; gap: .3rem; }
.friends-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .42rem .55rem;
  border: 1px solid rgba(210, 164, 71, .3);
  background: linear-gradient(90deg, rgba(77, 49, 23, .34), rgba(7, 8, 15, .84));
}
.friends-presence { width: .7rem; height: .7rem; border-radius: 50%; }
.friends-presence.is-online { background: #52df7c; box-shadow: 0 0 .65rem #28bf59; }
.friends-presence.is-offline { background: #b63c42; box-shadow: 0 0 .45rem rgba(182,60,66,.7); }
.friends-player { display: grid; gap: .12rem; padding: 0; border: 0; background: none; color: #f1d486; text-align: left; cursor: pointer; }
.friends-player small { color: #9e9583; font-size: .62rem; }
.friends-row__actions { display: flex; gap: .3rem; }
.friends-action, .inspect-add-friend {
  padding: .38rem .55rem;
  border: 1px solid rgba(224, 177, 77, .58);
  border-radius: 3px;
  background: linear-gradient(#725025, #24150c);
  color: #ffe9ae;
  font: 700 .6rem var(--font-display);
  cursor: pointer;
}
.friends-action.is-reject { border-color: #8e4545; background: linear-gradient(#66252c, #210b10); }
.friends-pending { color: #aa9c82; font-size: .68rem; }
.friends-empty { margin: 1.6rem .4rem; color: #aa9e89; text-align: center; }
.inspect-identity__player { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.inspect-friend-status { color: #cf8b8b; font-size: .62rem; }

.settings-audio { display: grid; gap: .55rem; min-width: min(72vw, 24rem); padding: .25rem 0 .65rem; }
.settings-audio__label { display: flex; justify-content: space-between; gap: 1rem; color: #f1cf78; font: 700 .72rem var(--font-display); letter-spacing: .08em; }
.settings-audio__value { color: #fff0b0; }
.settings-audio__range { width: 100%; accent-color: #d8a63f; cursor: pointer; }
.settings-audio p { margin: 0; color: #a99e8a; font-size: .7rem; }


/* SOURCE: css/ui/tokens.css */
/* Kara Hisar: shared materials and type. No gameplay or HUD layout rules. */
:root {
  --ui-ink: #080b0b;
  --ui-stone: #151a18;
  --ui-surface: #1c211e;
  --ui-well: #090e0e;
  --ui-metal: #76684f;
  --ui-edge: #b2a17c;
  --ui-bronze: #655338;
  --ui-ivory: #e5ddcb;
  --ui-muted: #b2ad9e;
  --ui-dim: #898f87;
  --ui-danger: #bf8276;
  --ui-success: #9db29b;
  --ui-space: clamp(.8rem, 1.8vh, 1.3rem);
  --ui-serif: Georgia, "Times New Roman", serif;
  --ui-sans: "Segoe UI", Arial, sans-serif;
  --ui-grain: url("../../assets/ui/frames/slate-grain.svg");
  --ui-frame: url("../../assets/ui/frames/citadel-frame.svg");
  --ui-crest: url("../../assets/ui/frames/citadel-crest.svg");
}


/* SOURCE: css/ui/panels.css */
/* Existing lifecycles opt in via data-ui-panel. Shared shell, header, footer. */
html body [data-ui-panel] {
  position: relative;
  color: var(--ui-ivory);
  font-family: var(--ui-sans);
  border: 12px solid transparent;
  border-image: var(--ui-frame) 48 / 24px / 3px stretch;
  border-radius: 0;
  background: var(--ui-grain) repeat, linear-gradient(135deg, #1b211e, #101513 65%, #171b17);
  background-clip: padding-box;
  box-shadow: 0 24px 70px #000b, 0 4px 12px #000c, inset 0 0 0 1px #77705c55, inset 0 0 45px #03070780;
  min-width: 0;
  text-shadow: none;
  isolation: isolate;
}
html body [data-ui-panel]::before,
html body [data-ui-panel]::after { content: none; }
html body [data-ui-panel] :is(.frame__header, .community-header, .afk-header, .ui-header),
html body [data-ui-panel] > .modal-title {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 1.1rem 1.5rem;
  border: 0;
  border-bottom: 1px solid #8d795b80;
  border-radius: 0;
  background: var(--ui-grain), linear-gradient(180deg, #30332a, #161c18);
  box-shadow: inset 0 1px #c8b78820, inset 0 -3px #03070788, 0 1px #000;
  color: var(--ui-ivory);
}
html body [data-ui-panel] :is(.frame__header, .community-header, .afk-header, .ui-header)::before {
  content: "";
  position: absolute;
  width: 5.2rem;
  height: 1.3rem;
  top: -.67rem;
  left: calc(50% - 2.6rem);
  background: var(--ui-crest) center / contain no-repeat;
  pointer-events: none;
}
html body [data-ui-panel] :is(.frame__header, .community-header, .afk-header)::after { content: none; }
html body [data-ui-panel] :is(.frame__title, .modal-title, .community-header h2, .afk-title, .ui-title) {
  color: var(--ui-ivory);
  font: 500 clamp(1rem, 1.8vw, 1.6rem)/1.2 var(--ui-serif);
  letter-spacing: .09em;
  text-shadow: 0 2px 2px #000;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
html body [data-ui-panel] :is(.frame__footer, .community-footer, .ui-footer, .modal-actions) {
  flex: 0 0 auto;
  margin: 0;
  padding: .9rem 1.3rem;
  border: 0;
  border-top: 1px solid #71664f66;
  background: var(--ui-grain), #0d1311;
  box-shadow: inset 0 1px #e4d4a908;
  gap: .7rem;
}
html body [data-ui-panel] :is(.frame__body, .community-body, .ui-body) { color: var(--ui-ivory); min-width: 0; min-height: 0; }
html body [data-ui-panel] :is(p, h2, h3, h4, dt, dd, small, label, button) { overflow-wrap: anywhere; }
html body [data-ui-panel] :is(.form-message, .community-message):empty { display: none; }
html body [data-ui-panel] :is(.form-message, .community-message) { color: var(--ui-muted); line-height: 1.5; }
html body [data-ui-panel] :is(.form-message--error, .is-error, .afk-warning) { color: var(--ui-danger); }
html body :is(.modal-overlay, .community-overlay, .afk-overlay) {
  background: #030707c9;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html body [data-ui-panel="modal"] {
  width: min(92vw, 36rem);
  max-height: min(86vh, 48rem);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
html body [data-ui-panel="modal"] > .modal-message,
html body [data-ui-panel="modal"] > :not(.modal-title, .modal-actions) {
  padding: 1.5rem;
  margin: 0;
  min-height: 0;
  overflow: auto;
  color: var(--ui-muted);
  font-size: .95rem;
  line-height: 1.7;
}
html body [data-ui-panel="modal"].modal-panel--legal { width: min(92vw, 58rem); }
html body [data-ui-panel] :is(.community-section, .ui-surface) {
  padding: var(--ui-space);
  border: 1px solid #75695170;
  background: var(--ui-grain), #0a100ee8;
  box-shadow: inset 0 2px 7px #0009, 0 1px #cbbb9010;
}
html body [data-ui-panel] :is(.community-section > h3, .afk-loot > h3, .ui-section-title) {
  margin: 0 0 1rem;
  padding: 0 0 .65rem;
  border-bottom: 1px solid #7f725547;
  color: #c4b38f;
  font: 500 .9rem/1.4 var(--ui-serif);
  letter-spacing: .09em;
}
html body [data-ui-panel] :is(.community-empty, .afk-empty, .ui-empty) {
  display: grid;
  place-items: center;
  min-height: 5.5rem;
  margin: 0;
  padding: 1.1rem;
  border: 1px dashed #85755840;
  color: var(--ui-dim);
  text-align: center;
  font-size: .86rem;
  line-height: 1.5;
}
@media (max-height: 620px) and (orientation: landscape) {
  :root { --ui-space: .65rem; }
  html body [data-ui-panel] { border-width: 8px; border-image-width: 17px; border-image-outset: 1px; }
  html body [data-ui-panel] :is(.frame__header, .community-header, .afk-header, .ui-header),
  html body [data-ui-panel] > .modal-title { padding: .55rem .8rem; }
  html body [data-ui-panel] :is(.frame__title, .modal-title, .community-header h2, .afk-title, .ui-title) { font-size: .98rem; letter-spacing: .045em; }
  html body [data-ui-panel] :is(.frame__footer, .community-footer, .ui-footer, .modal-actions) { padding: .45rem .7rem; }
  html body [data-ui-panel="modal"] { max-height: 86vh; }
  html body [data-ui-panel="modal"] > :not(.modal-title, .modal-actions) { padding: .8rem; font-size: .8rem; line-height: 1.5; }
  html body [data-ui-panel] :is(.community-section > h3, .afk-loot > h3) { font-size: .78rem; margin-bottom: .55rem; padding-bottom: .4rem; }
}


/* SOURCE: css/ui/controls.css */
/* Pressed metal controls; legacy action selectors and handlers stay intact. */
html body :is([data-ui-panel], .screen--start) :is(.ui-button, .community-action, .ui-action) {
  position: relative;
  min-width: 0;
  min-height: 2.65rem;
  padding: .7rem 1.2rem;
  border: 1px solid #8e7c5b;
  border-radius: 1px;
  background: var(--ui-grain), linear-gradient(180deg, #363b31, #171d18 49%, #111610 51%, #20271e);
  color: #d8cfb8;
  font: 600 .78rem/1.25 var(--ui-serif);
  letter-spacing: .075em;
  text-transform: uppercase;
  text-shadow: 0 2px 1px #000;
  box-shadow: inset 0 1px #e5d6aa38, inset 0 -3px #030606ae, inset 2px 0 #ddd4a70d, 0 2px 3px #0008;
  clip-path: none;
  filter: none;
  white-space: normal;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
html body :is([data-ui-panel], .screen--start) :is(.ui-button, .community-action)::before,
html body :is([data-ui-panel], .screen--start) :is(.ui-button, .community-action)::after { content: none; }
html body :is([data-ui-panel], .screen--start) :is(.ui-button--primary, .ui-button--hero, .afk-claim, [data-community-action="dailyClaim"], [data-community-action="clanCreate"]) {
  border-color: #b39b70;
  background: var(--ui-grain), linear-gradient(180deg, #6a5738, #42351f 49%, #302616 51%, #473921);
  color: #eee1be;
  box-shadow: inset 0 1px #f3dba15c, inset 0 -3px #080804, 0 3px 6px #000a;
}
html body [data-ui-panel] .ui-button--ghost { background: var(--ui-grain), #151b18; border-color: #5b6255; color: #bfc2b3; }
html body [data-ui-panel] :is(.ui-button--danger, [data-community-action="clanLeave"], [data-community-action="clanKick"]) { background: var(--ui-grain), #39201c; border-color: #875c4b; color: #dec1b4; }
html body :is([data-ui-panel], .screen--start) :is(.ui-button, .community-action):not(:disabled):hover {
  border-color: #d4c096;
  color: #f3ead4;
  filter: none;
  box-shadow: inset 0 1px #eddeb357, inset 0 0 14px #c0a66b14, 0 3px 6px #000a;
  transform: none;
}
html body :is([data-ui-panel], .screen--start) :is(button, input, select, textarea):focus-visible { outline: 2px solid #c0ad82; outline-offset: 3px; }
html body :is([data-ui-panel], .screen--start) :is(.ui-button, .community-action):not(:disabled):active { box-shadow: inset 0 3px 7px #000b; transform: translateY(1px); }
html body [data-ui-panel] :is(.ui-button, .community-action):disabled { opacity: .48; cursor: not-allowed; filter: saturate(.35); box-shadow: inset 0 1px #ffffff0a; }
html body [data-ui-panel] :is(.field__input, .community-input, .community-price, .market-search, .market-select, .ui-input) {
  min-width: 0;
  max-width: 100%;
  min-height: 2.65rem;
  padding: .65rem .8rem;
  border: 1px solid #6b6b5880;
  border-bottom-color: #94836588;
  border-radius: 0;
  background: var(--ui-grain), #080e0c;
  color: #e4dfd0;
  box-shadow: inset 0 3px 7px #000b, 0 1px #d8c09510;
  font: .95rem/1.4 var(--ui-sans);
  letter-spacing: .02em;
}
html body [data-ui-panel] :is(.field__input, .community-input, .community-price)::placeholder { color: #858e82; opacity: 1; }
html body [data-ui-panel] :is(.field__label, .checkbox__label, .ui-label) {
  color: var(--ui-muted);
  font: 500 .78rem/1.4 var(--ui-sans);
  letter-spacing: .02em;
  text-transform: none;
  white-space: normal;
}
html body [data-ui-panel] .field__label { display: block; margin: 0 0 .4rem; }
html body [data-ui-panel] .checkbox__box { border: 1px solid #8f8061; background: #0a100d; box-shadow: inset 0 2px 3px #000; }
html body [data-ui-panel] .checkbox__input:checked + .checkbox__box { background-color: #554a30; border-color: #b9a57a; }
html body [data-ui-panel] :is(.community-close, .afk-close, .ui-close) {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 1px solid #8d795b;
  border-radius: 0;
  background: var(--ui-grain), #171d17;
  box-shadow: inset 0 1px #d1bf9844, inset 0 -2px #000;
  color: #c6b692;
  font: 400 1.5rem/1 var(--ui-sans);
}
html body [data-ui-panel] :is(.community-close, .afk-close):hover { border-color: #d4b68a; color: #efe0bc; background-color: #392a20; }
html body [data-ui-panel] :is(.stat-list__row, .ui-stat) { border-bottom: 1px solid #8a7a532b; padding: .5rem 0; color: var(--ui-muted); }
html body [data-ui-panel] :is(.stat-list__value, .ui-stat strong) { color: #e4d6b5; font-family: var(--ui-sans); font-variant-numeric: tabular-nums; }
html body [data-ui-panel] :is(.community-tabs button, .char-create-inline__gender, .char-create-inline__class, .ui-tab) {
  border: 1px solid #636a566e;
  border-radius: 0;
  background: var(--ui-grain), #121a15;
  color: #b8bdad;
  box-shadow: inset 0 1px #d2bf8e0d;
}
html body [data-ui-panel] :is(.community-tabs button, .char-create-inline__gender, .char-create-inline__class, .ui-tab).is-active {
  border-color: #b29a6b;
  background: var(--ui-grain), #383324;
  color: #e6d9b6;
  box-shadow: inset 0 -2px #a88e59;
}
@media (max-height: 620px) and (orientation: landscape) {
  html body :is([data-ui-panel], .screen--start) :is(.ui-button, .community-action) { min-height: 2rem; padding: .4rem .65rem; font-size: .69rem; letter-spacing: .025em; }
  html body [data-ui-panel] :is(.field__input, .community-input, .community-price, .market-search, .market-select) { min-height: 2rem; padding: .35rem .55rem; font-size: .82rem; }
  html body [data-ui-panel] :is(.field__label, .checkbox__label) { font-size: .7rem; }
  html body [data-ui-panel] :is(.community-close, .afk-close) { width: 1.85rem; height: 1.85rem; font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html body :is([data-ui-panel], .screen--start) *,
  html body [data-ui-panel] { transition-duration: 0s; animation: none; }
}


/* SOURCE: css/ui/entry.css */
/* Entry screens: a common gate, carved ledger, and character dais. */
html body .screen--start .hero { gap: 1.2rem; }
html body .screen--start .hero__circle { opacity: .46; filter: grayscale(.2) saturate(.72); animation: none; }
html body .screen--start .hero__frame { opacity: .38; filter: grayscale(.7); }
html body .screen--start .hero__title-main {
  color: #d4c29c;
  background: linear-gradient(#ede1be, #a89975 58%, #675c45);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 3px 2px #000);
  letter-spacing: .14em;
}

html body .screen--start .hero__title-sub { color: #b2aa91; text-shadow: 0 2px 3px #000; letter-spacing: .55em; }
html body .screen--start .ui-button--hero { width: min(21rem, 70vw); min-height: 3.6rem; border-image: var(--ui-frame) 48 / 13px / 4px; padding: 1.1rem; font-size: 1rem; }
html body .screen--start .hero__tagline { color: #c3c0b2; font: .88rem/1.5 var(--ui-serif); letter-spacing: .14em; text-shadow: 0 2px 4px #000; }
html body .screen--start .bottombar { background: linear-gradient(transparent, #030606b8); }
html body .screen--start .lang-selector { border-color: #726849; background: #0b100ee8; box-shadow: inset 0 1px #cabb831c; }
html body :is(.screen--login, .screen--characters) .backdrop { filter: saturate(.42) brightness(.48); }
html body .screen--notice { background: var(--ui-grain), radial-gradient(ellipse at 50% 0, #242b23, #090e0c 72%); }

/* The full-screen preload panel stays translucent so the hero artwork remains
   the scene instead of being covered by the shared opaque panel material. */
html body [data-ui-panel="preload"] {
  border: 0;
  border-image: none;
  background:
    linear-gradient(90deg, #020508c2, transparent 22%, transparent 78%, #020508c2),
    linear-gradient(180deg, #02050882, transparent 32%, transparent 64%, #02050870);
  background-clip: border-box;
  box-shadow: none;
}
html body [data-ui-panel="preload"] .apl-panel__scan { display: block; opacity: .42; }

html body [data-ui-panel="login"] {
  display: grid;
  grid-template-columns: minmax(12rem, .72fr) minmax(20rem, 1.15fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: min(57rem, 91vw);
  max-width: 100%;
  max-height: calc(var(--app-h) - 3rem);
  padding: 0;
  overflow: visible;
}
html body [data-ui-panel="login"] .frame__header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: left; }
html body [data-ui-panel="login"] .frame__brand { margin: 0; color: #958970; font: .72rem/1.4 var(--ui-serif); letter-spacing: .18em; }
html body [data-ui-panel="login"] .frame__title { margin: 0; }
html body [data-ui-panel="login"] .ui-login-aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.3rem;
  min-height: 0;
  padding: 2rem;
  border-right: 1px solid #65748766;
  background:
    var(--ui-grain),
    radial-gradient(ellipse at 50% 28%, #3e58745c, transparent 68%),
    linear-gradient(145deg, #101925ed, #070d15f5);
  box-shadow: inset -9px 0 20px #0007;
  text-align: center;
}
html body .ui-login-aside__sigil { width: 90%; max-width: 11rem; height: 6rem; background: var(--ui-crest) center / contain no-repeat; opacity: .85; }
html body .ui-login-aside__name { color: #c8bb9a; font: 400 clamp(1.7rem, 3vw, 2.7rem)/1 var(--ui-serif); letter-spacing: .17em; }
html body .ui-login-aside p { color: #a4aa9a; font: .85rem/1.8 var(--ui-serif); margin: 0; max-width: 15rem; }
html body .ui-login-aside__game-icon {
  display: block;
  width: clamp(7.5rem, 14vw, 11.5rem);
  max-width: 82%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 .8rem 1.2rem #000b) drop-shadow(0 0 1.1rem #506e8b38);
}
html body [data-ui-panel="login"] .login__form { display: grid; grid-template-columns: 1fr; gap: .85rem; margin: 0; padding: 1.5rem 1.8rem; overflow: auto; }
html body [data-ui-panel="login"] .field { grid-column: 1 / -1; margin: 0; }
html body [data-ui-panel="login"] .login__remember-options { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1rem; }
html body [data-ui-panel="login"] .checkbox { flex: 1 1 9rem; min-width: 0; }
html body [data-ui-panel="login"] .frame__actions { display: grid; grid-template-columns: 1.7fr 1fr; gap: .65rem; margin: .15rem 0 0; }
html body [data-ui-panel="login"] .login__guest { margin: 0; width: 100%; }
html body [data-ui-panel="login"] .login__social { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .3rem 0 0; }
html body [data-ui-panel="login"] .login__social-divider { grid-column: 1 / -1; color: #919988; font: .68rem/1.4 var(--ui-sans); letter-spacing: .02em; }
html body [data-ui-panel="login"] .login__social-button { min-height: 2.1rem; padding: .4rem; font-size: .65rem; }
html body [data-ui-panel="login"] .login__social-mark { width: 1rem; height: 1rem; border: 0; color: #ccc7b8; background: none; }
html body [data-ui-panel="login"] .login__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; margin: .35rem 0 0; padding-top: .65rem; border-top: 1px solid #84704a3d; }
html body [data-ui-panel="login"] .link-button { color: #c2b897; font: .74rem/1.5 var(--ui-sans); text-transform: none; letter-spacing: 0; }
html body [data-ui-panel="login"] .login__hint { margin: 0; color: #959d8e; font: .69rem/1.5 var(--ui-sans); text-align: center; }

html body [data-ui-panel="notice"] { width: min(37.5rem, 82vw); max-height: calc(var(--app-h) - 6rem); display: flex; flex-direction: column; padding: 0; overflow: visible; }
html body [data-ui-panel="notice"] .notice__body { padding: 1rem 1.35rem; overflow: auto; color: #c4c6b7; font: .86rem/1.58 var(--ui-sans); }
html body [data-ui-panel="notice"] .notice__body :is(p,li) { margin-bottom: .62rem; }
html body [data-ui-panel="notice"] .notice__body :is(strong,h3) { color: #d2bf96; }
html body [data-ui-panel="notice"] .notice__actions { justify-content: space-between; align-items: center; gap: 1rem; margin: 0; }

html body [data-ui-panel="characters"] {
  display: flex;
  flex-direction: column;
  width: min(89vw, 74rem);
  max-width: 100%;
  height: min(calc(var(--app-h) - 5rem), 48rem);
  max-height: calc(var(--app-h) - 5rem);
  padding: 0;
  overflow: visible;
}
html body [data-ui-panel="characters"] .char-select-header { min-height: 0; padding: 1rem 1.6rem; }
html body [data-ui-panel="characters"] .frame__badge { background: #0d1511; border: 1px solid #82735070; color: #b9b498; padding: .35rem .7rem; font: .7rem/1.3 var(--ui-sans); letter-spacing: .05em; }
html body [data-ui-panel="characters"] .characters { flex: 1 1 auto; background: var(--ui-grain), radial-gradient(ellipse at 36% 35%, #56605144, transparent 55%), linear-gradient(90deg, #101813, #080e0b 75%); }
html body [data-ui-panel="characters"] .characters::before { inset: 6% 42% 8% 7%; border-radius: 48% 48% 0 0; border: 1px solid #8b916341; background: repeating-linear-gradient(90deg, #787d5520 0 1px, transparent 1px 25%), #15201422; box-shadow: inset 0 0 60px #0009; }
html body [data-ui-panel="characters"] .characters::after { height: 20%; background: linear-gradient(0deg, #040906, transparent); }
html body [data-ui-panel="characters"] .char-select__mist { display: none; }
html body [data-ui-panel="characters"] .char-select-carousel { padding: 1rem .5rem 0; }
html body [data-ui-panel="characters"] .char-select-figure__aura { background: radial-gradient(ellipse, #a1aa6750, transparent 65%); filter: none; opacity: .45; animation: none; }
html body [data-ui-panel="characters"] .char-select-figure__platform { border-color: #92907555; background: radial-gradient(ellipse, #656b4266, #172418 55%, transparent 70%); box-shadow: 0 9px 10px #0008; }
html body [data-ui-panel="characters"] .char-select-info,
html body [data-ui-panel="characters"] .char-create-inline {
  border: 1px solid #746b5073;
  border-radius: 0;
  background: var(--ui-grain), #0b130feb;
  box-shadow: inset 0 1px #bba87922, inset 0 0 25px #0008, 0 10px 30px #0007;
  padding: clamp(1rem, 2.5vh, 1.8rem);
  color: var(--ui-ivory);
}
html body [data-ui-panel="characters"] .characters__name { color: #dbd3bd; font: 500 clamp(1.5rem, 2.9vw, 2.8rem)/1.2 var(--ui-serif); text-shadow: 0 2px #000; letter-spacing: .035em; }
html body [data-ui-panel="characters"] .characters__class { color: #a4ae9b; font: .85rem/1.5 var(--ui-sans); letter-spacing: .06em; }
html body [data-ui-panel="characters"] .char-select-level { border: 1px solid #8d785052; background: #25291c; box-shadow: none; color: #beb899; }
html body [data-ui-panel="characters"] .char-select-level strong { color: #e4d2a1; text-shadow: none; }
html body [data-ui-panel="characters"] .char-select-stats :is(dt,dd) { font-size: .82rem; }
html body [data-ui-panel="characters"] .char-carousel__arrow { width: 2.75rem; height: 4.5rem; min-width: 0; border: 1px solid #81725166; border-radius: 0; background: var(--ui-grain), #141c15; color: #baad8c; box-shadow: inset 0 1px #ccbb8133; clip-path: none; }
html body [data-ui-panel="characters"] .char-carousel__arrow::before,
html body [data-ui-panel="characters"] .char-carousel__arrow::after { content: none; }
html body [data-ui-panel="characters"] .characters__slots { gap: .6rem; padding: .7rem; background: #07100ce8; border-top: 1px solid #9082563d; }
html body [data-ui-panel="characters"] .char-select-slot { min-width: 0; border: 1px solid #6c755352; border-radius: 0; background: var(--ui-grain), #131c14; box-shadow: inset 0 1px #9f986822; color: #a4ad96; }
html body [data-ui-panel="characters"] .char-select-slot.is-selected { border-color: #b7a373; background: var(--ui-grain), #303722; box-shadow: inset 0 -2px #b7a373; color: #e3d9bc; }
html body [data-ui-panel="characters"] .char-select-info__slot { color: #a89b79; letter-spacing: .12em; }
html body [data-ui-panel="characters"] .char-select-empty-figure__rune { color: #aba679; border-color: #716d4c; background: #131a1240; box-shadow: none; text-shadow: none; }
html body [data-ui-panel="characters"] :is(.char-create-inline__title, .char-create-inline__class-name) { color: #d5c9a9; font-family: var(--ui-serif); letter-spacing: .055em; }
html body [data-ui-panel="characters"] :is(.char-create-inline__class-note, .characters__prompt, .field__rule) { color: #a2aa97; }

@media (max-height: 620px) and (orientation: landscape) {
  html body .screen--start .hero { gap: .6rem; }
  html body .screen--start .ui-button--hero { min-height: 2.6rem; width: 15rem; font-size: .8rem; padding: .7rem; }
  html body .screen--start .hero__tagline { font-size: .72rem; }
  html body [data-ui-panel="login"] { width: min(94vw, 56rem); max-height: calc(var(--app-h) - 1.2rem); grid-template-columns: minmax(8rem,.55fr) minmax(20rem,1.45fr); }
  html body [data-ui-panel="login"] .frame__brand { font-size: .6rem; }
  html body [data-ui-panel="login"] .ui-login-aside { padding: .8rem; gap: .7rem; }
  html body .ui-login-aside__game-icon { width: clamp(4rem, 12vh, 6.5rem); }
  html body .ui-login-aside__name { font-size: 1.6rem; }
  html body .ui-login-aside__sigil { height: 3rem; }
  html body .ui-login-aside p { font-size: .68rem; line-height: 1.5; }
  html body [data-ui-panel="login"] .login__form { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; padding: .8rem; }
  html body [data-ui-panel="login"] .field { grid-column: auto; }
  html body [data-ui-panel="login"] .login__confirm-field { grid-column: 1 / -1; }
  html body [data-ui-panel="login"] :is(.login__remember-options,.form-message,.login__social,.login__links,.login__hint) { grid-column: 1 / -1; margin: 0; }
  html body [data-ui-panel="login"] .frame__actions { grid-column: auto; gap: .35rem; grid-template-columns: 1.3fr 1fr; margin: 0; }
  html body [data-ui-panel="login"] .login__guest { grid-column: auto; }
  html body [data-ui-panel="login"] .login__remember-options { gap: .4rem; flex-wrap: wrap; }
  html body [data-ui-panel="login"] .login__links { gap: .35rem .8rem; padding-top: .4rem; }
  html body [data-ui-panel="login"] .link-button { font-size: .67rem; }
  html body [data-ui-panel="login"] .login__social-divider { font-size: .61rem; }
  html body [data-ui-panel="login"] .login__hint { font-size: .63rem; }
  html body [data-ui-panel="notice"] { width: min(88vw,37.5rem); max-height: calc(var(--app-h) - 1.2rem); }
  html body [data-ui-panel="notice"] .notice__body { padding: .9rem 1.1rem; font-size: .83rem; line-height: 1.6; }
  html body [data-ui-panel="characters"] { width: 95vw; height: calc(var(--app-h) - 1.1rem); max-height: calc(var(--app-h) - 1.1rem); }
  html body [data-ui-panel="characters"] .char-select-header { padding: .45rem .8rem; }
  html body [data-ui-panel="characters"] .char-select-carousel { padding: .4rem .25rem 0; grid-template-columns: 2.4rem minmax(0,1fr) 2.4rem; }
  html body [data-ui-panel="characters"] :is(.char-select-info,.char-create-inline) { padding: .6rem .8rem; }
  html body [data-ui-panel="characters"] .characters__name { font-size: 1.2rem; }
  html body [data-ui-panel="characters"] .characters__class { font-size: .7rem; }
  html body [data-ui-panel="characters"] .char-select-stats :is(dt,dd) { font-size: .65rem; }
  html body [data-ui-panel="characters"] .stat-list__row { padding: .2rem 0; }
  html body [data-ui-panel="characters"] .char-carousel__arrow { width: 2rem; height: 3rem; }
  html body [data-ui-panel="characters"] .characters__slots { gap: .35rem; padding: .35rem; }
  html body [data-ui-panel="characters"] .char-select-footer { padding: .4rem .65rem; }
}
/* Remaining entry gates share the same materials and legible hierarchy. */
html body [data-ui-panel="race"] { padding: 0; }
html body .screen--race { grid-template-columns: minmax(0, 1fr); min-width: 0; }
html body [data-ui-panel="race"] { width: min(100%, 68rem); min-width: 0; max-height: 100%; }
html body [data-ui-panel="race"] :is(.race__cards, .race-card) { min-width: 0; }
@media (max-height: 620px), (pointer: coarse) {
  html body [data-ui-panel="race"] .frame__header { padding: .4rem .7rem; }
  html body [data-ui-panel="race"] .race__subtitle { margin-top: .2rem; font-size: .7rem; }
  html body [data-ui-panel="race"] .race__body { padding: .4rem .65rem; }
  html body [data-ui-panel="race"] .race-card { --race-card-height: clamp(105px, 44vh, 230px); }
  html body [data-ui-panel="race"] .race-card__crest { width: min(33%, 16vh); height: 16vh; top: 5%; }
  html body [data-ui-panel="race"] .race-card__name { font-size: 1rem; }
  html body [data-ui-panel="race"] .race-card__select { margin-top: .25rem; padding: .3rem .5rem; font-size: .65rem; }
  html body [data-ui-panel="race"] .race__prompt { margin: .3rem 0 0; font-size: .65rem; }
  html body [data-ui-panel="race"] .frame__footer { padding: .35rem .6rem; }
}
/* Safari can keep fixed descendants inside the scaled game surface. The focused
   name field is portaled directly under body and follows visualViewport. */
html body .character-name-keyboard-portal {
  position: fixed; z-index: 10000;
  top: var(--name-dock-top); left: var(--name-dock-left); width: var(--name-dock-width);
  margin: 0; padding: .42rem .55rem;
  border: 1px solid #bca476; background: #0b140f; box-shadow: 0 5px 20px #000b;
}
html body .character-name-keyboard-portal .char-create-inline__name { position: static; width: 100%; margin: 0; padding: 0; }
html body .character-name-keyboard-portal :is(.field__label, .field__rule) { display: none; }
html body .character-name-keyboard-portal .char-create-inline__name-row { display: block; width: 100%; }
html body .character-name-keyboard-portal #character-name {
  display: block; width: 100%; min-height: 42px; padding: .42rem .55rem;
  font-size: 16px; line-height: 1.2;
}
html body [data-ui-panel="race"] .race-card { border-radius: 0; border-color: #8b78577a; background: var(--ui-grain), #111911; box-shadow: inset 0 0 0 4px #0006, 0 5px 15px #0008; }
html body [data-ui-panel="race"] .race-card.is-selected { border-color: #bca476; box-shadow: inset 0 0 0 1px #bca476, inset 0 0 24px #b0964f22; }
html body [data-ui-panel="race"] .race__subtitle { color: var(--ui-muted); line-height: 1.5; }
html body [data-ui-panel="race"] .race__body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
html body [data-ui-panel="race"] .race__prompt { margin: .65rem 0 .2rem; }
html body :is([data-ui-panel="preload"], [data-ui-panel="security"]) { padding: clamp(1.2rem, 3vw, 2.7rem); }
html body [data-ui-panel="preload"] :is(.apl-title, .apl-brand__copy), html body [data-ui-panel="security"] .acs-brand { color: var(--ui-ivory); font-family: var(--ui-serif); letter-spacing: .07em; text-shadow: 0 2px #000; }
html body [data-ui-panel="preload"] :is(.apl-subtitle, .apl-progress-meta), html body [data-ui-panel="security"] :is(.acs-subtitle, .acs-status) { color: var(--ui-muted); }
html body [data-ui-panel="preload"] .apl-loading-deck {
  border-radius: 0;
  border-color: #83745a99;
  background: var(--ui-grain), linear-gradient(145deg, #202a35f2, #0b111af5 72%);
  box-shadow: 0 1.2rem 3.2rem #000b, inset 0 1px #d6c39a24;
}
html body [data-ui-panel="preload"] .apl-group {
  background: linear-gradient(180deg, #202b37db, #0d141ee8);
  color: #c8b995;
}
html body [data-ui-panel="preload"] .apl-panel.is-complete .apl-status { color: #d5c392; }
html body [data-ui-panel="preload"] .apl-scan { display: none; }
html body :is(.screen--login, .screen--characters, .screen--notice) { grid-template-columns: minmax(0, 1fr); }
html body [data-ui-panel="preload"] { grid-template-columns: minmax(0, 1fr); }
html body [data-ui-panel="preload"] :is(.apl-hero-copy, .apl-loading-deck) { max-width: 100%; min-width: 0; }
/* Character hall: a quiet metal arch, larger class seals and readable stat tiles. */
html body [data-ui-panel="characters"] .characters__details { --char-visual-center: 30.75%; }
html body [data-ui-panel="characters"] .characters__details.is-creating { --char-visual-center: 26%; }
html body [data-ui-panel="characters"] .characters__details > :is(.char-select-figure, .char-select-empty-figure) {
  left: var(--char-visual-center);
}
html body [data-ui-panel="characters"] .characters::before {
  background: radial-gradient(ellipse at 50% 65%, #88784418, transparent 65%);
  border: 0;
  box-shadow: none;
}
html body [data-ui-panel="characters"] .characters__details::before {
  top: 4%; bottom: 4%;
  left: var(--char-visual-center);
  border-radius: 48% 48% 3px 3px;
  border: 1px solid #ad925358;
  background: linear-gradient(90deg, #c6b4750d, transparent 12% 88%, #c6b4750d),
    radial-gradient(ellipse at 50% 65%, #69755030, transparent 65%);
  box-shadow: inset 0 0 0 5px #030905, inset 0 0 0 6px #a38d492b, 0 12px 35px #0009;
}
html body [data-ui-panel="characters"] .char-select-info {
  width: 36%; right: 2.5%; max-height: 94%; overflow-y: auto;
}
html body [data-ui-panel="characters"] .char-select-stats {
  gap: .45rem;
}
html body [data-ui-panel="characters"] .char-select-stats .stat-list__row {
  display: flex; align-items: center; justify-content: space-between; gap: .35rem;
  padding: .4rem .45rem; border: 1px solid #8d785035; background: #17201885;
}
html body [data-ui-panel="characters"] :is(.char-select-stats, .char-create-inline__stats) dt {
  white-space: nowrap; overflow-wrap: normal; word-break: normal; letter-spacing: .025em;
}
html body [data-ui-panel="characters"] .char-select-stats dd { margin: 0; color: #f0ddb0; }
html body [data-ui-panel="characters"] .char-create-inline {
  right: 2%; width: 46%; padding: clamp(.75rem, 2vh, 1.25rem);
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: #728254 #0b130f;
  border: 1px solid #b69a60;
  background: var(--ui-grain), radial-gradient(ellipse at top right, #64704a35, transparent 60%), #0b130ff5;
  box-shadow: inset 0 0 0 4px #080e0b, inset 0 0 0 5px #b69a602e, 0 14px 32px #000b;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-content: start; column-gap: .6rem;
}
html body [data-ui-panel="characters"] .char-create-inline > * { flex-shrink: 0; }
html body [data-ui-panel="characters"] :is(.char-create-inline__heading, .char-create-inline__class-wrap, .char-create-inline__summary, .char-create-inline__message) { grid-column: 1 / -1; }
html body [data-ui-panel="characters"] .char-create-inline__name { min-width: 0; margin-block: .2rem; }
html body [data-ui-panel="characters"] .char-create-inline__choice-row { align-self: end; margin-block: .2rem; }
html body [data-ui-panel="characters"] .char-create-inline__classes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
html body [data-ui-panel="characters"] .char-create-inline__message:empty { display: none; }
html body [data-ui-panel="characters"] .char-create-inline__heading {
  padding-bottom: .7rem; margin-bottom: .5rem; border-bottom: 1px solid #b69a6055;
}
html body [data-ui-panel="characters"] .char-create-inline__heading .char-select-info__slot {
  padding: .3rem .4rem; border: 1px solid #b69a6055; background: #283120;
}
html body [data-ui-panel="characters"] .char-create-inline__class {
  position: relative; gap: .3rem; min-height: 3.4rem; padding: .35rem .65rem;
  flex-direction: column; justify-content: center;
  border: 1px solid #7d80534f; background: linear-gradient(115deg, #2b3524, #101a14);
  box-shadow: inset 0 1px #c3b27625; transition: border-color 120ms, background-color 120ms;
}
html body [data-ui-panel="characters"] .char-create-inline__class img {
  width: 2.6rem; height: 2.6rem; padding: .16rem;
  background: radial-gradient(circle, #ad91443d, #040a0644 68%, transparent 70%);
  object-fit: contain; filter: drop-shadow(0 2px 3px #000a);
}
html body [data-ui-panel="characters"] .char-create-inline__class.is-active {
  border-color: #dfbf76; background: linear-gradient(115deg, #625536, #263024);
  box-shadow: inset 3px 0 #e8c67f, inset 0 0 12px #ddc08612; color: #fff0c5;
}
html body [data-ui-panel="characters"] .char-create-inline__description {
  margin: .3rem 0 .35rem; font-size: .8rem; line-height: 1.4; color: #bcc4ac;
}
html body [data-ui-panel="characters"] .char-create-inline__stats {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem;
}
html body [data-ui-panel="characters"] .char-create-inline__stats .stat-list__row {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: .32rem .4rem; gap: .2rem; background: #192419; border-bottom: 1px solid #8f7b4938;
}
html body [data-ui-panel="characters"] .char-create-inline__stats :is(dt, dd) { font-size: .66rem; line-height: 1.3; margin: 0; }
@media (max-height: 620px) and (orientation: landscape) {
  html body [data-ui-panel="characters"] .characters__details { --char-visual-center: 27.75%; }
  html body [data-ui-panel="characters"] .characters__details.is-creating { --char-visual-center: 22.5%; }
  html body [data-ui-panel="characters"] .char-select-info { width: 43%; right: 1.5%; padding: .45rem .6rem; }
  html body [data-ui-panel="characters"] .char-select-stats { gap: .2rem; }
  html body [data-ui-panel="characters"] .char-select-stats .stat-list__row { padding: .16rem .3rem; gap: 0; }
  html body [data-ui-panel="characters"] .char-select-stats :is(dt, dd) { line-height: 1.2; }
  html body [data-ui-panel="characters"] .char-select-info .characters__class { margin: .2rem 0 .3rem; }
  html body [data-ui-panel="characters"] .char-select-info .char-select-level { padding: .2rem .3rem; margin-bottom: .3rem; }
  html body [data-ui-panel="characters"] .char-create-inline { width: 54%; right: 1%; padding: .5rem .65rem; }
  html body [data-ui-panel="characters"] .char-create-inline {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-content: start; column-gap: .5rem;
  }
  html body [data-ui-panel="characters"] :is(.char-create-inline__heading, .char-create-inline__class-wrap, .char-create-inline__summary, .char-create-inline__message) { grid-column: 1 / -1; }
  html body [data-ui-panel="characters"] .char-create-inline__name { min-width: 0; margin: .15rem 0; }
  html body [data-ui-panel="characters"] .char-create-inline__choice-row { align-self: end; margin: .15rem 0; }
  html body [data-ui-panel="characters"] .char-create-inline__genders { gap: .2rem; }
  html body [data-ui-panel="characters"] .char-create-inline__gender { padding: .2rem; }
  html body [data-ui-panel="characters"] .char-create-inline__classes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
  html body [data-ui-panel="characters"] .char-create-inline__class { flex-direction: column; justify-content: center; gap: .15rem; }
  html body [data-ui-panel="characters"] .char-create-inline__heading { padding-bottom: .3rem; margin-bottom: .15rem; }
  html body [data-ui-panel="characters"] .char-create-inline__class { min-height: 2rem; padding: .15rem .35rem; gap: .4rem; }
  html body [data-ui-panel="characters"] .char-create-inline__class img { width: 1.7rem; height: 1.7rem; }
  html body [data-ui-panel="characters"] .char-create-inline__description { font-size: .7rem; margin-block: .25rem; }
  html body [data-ui-panel="characters"] .char-create-inline__summary { max-height: 8rem; overflow-y: auto; }
  html body [data-ui-panel="characters"] .char-create-inline__stats .stat-list__row { padding: .14rem .25rem; }
}
@media (max-height: 620px) and (orientation: landscape) {
  html body :is([data-ui-panel="preload"], [data-ui-panel="security"]) { padding: .9rem; }
}

/* Keep this paint block last; character-select has several responsive legacy declarations. */
html body [data-ui-panel="login"] .ui-login-aside {
  border-right-color: #65748766 !important;
  background: var(--ui-grain), radial-gradient(ellipse at 50% 28%, #3e58745c, transparent 68%), linear-gradient(145deg, #101925ed, #070d15f5) !important;
}
html body [data-ui-panel="characters"] .characters { background: var(--ui-grain), radial-gradient(ellipse at 36% 35%, #43566c38, transparent 55%), linear-gradient(90deg, #111923, #080d14 75%) !important; }
html body [data-ui-panel="characters"] .characters__details::before { border-color: #8d80664a !important; background: linear-gradient(90deg, #b9a6750b, transparent 12% 88%, #b9a6750b), radial-gradient(ellipse at 50% 65%, #4c60762b, transparent 65%) !important; }
html body [data-ui-panel="characters"] :is(.char-select-info,.char-create-inline) { border-color: #545c64 !important; background: var(--ui-grain), linear-gradient(145deg, #151e28f5, #080d14f5) !important; }
html body [data-ui-panel="characters"] .char-select-level,
html body [data-ui-panel="characters"] .char-select-stats .stat-list__row { background: #151e28cc !important; border-color: #59616a66 !important; }
html body [data-ui-panel="characters"] .characters__slots { background: linear-gradient(180deg, #101721e8, #080d14f2) !important; }
html body [data-ui-panel="characters"] .char-select-slot { background: var(--ui-grain), #151e28 !important; border-color: #59616a !important; }
html body [data-ui-panel="characters"] .char-select-slot.is-selected { background: var(--ui-grain), #34332d !important; border-color: #ad966a !important; }
html body [data-ui-panel="characters"] .char-carousel__arrow {
  border-color: #75869a !important;
  background: var(--ui-grain), linear-gradient(180deg, #1b2938, #09111b) !important;
  color: #d8c38f !important;
  box-shadow: inset 0 1px #b9cce333, inset 0 -2px #03070c, 0 .45rem 1.1rem #0008 !important;
}
html body [data-ui-panel="characters"] .char-carousel__arrow:is(:hover, :focus-visible) {
  border-color: #c9ad70 !important;
  color: #ffe7a8 !important;
  background: var(--ui-grain), linear-gradient(180deg, #26384b, #0c1622) !important;
}


/* SOURCE: css/ui/activities.css */
/* Community and return-summary adapters share the shell and control system. */
html body [data-ui-panel="community"] {
  display: flex;
  flex-direction: column;
  width: min(89vw, 62rem);
  max-height: calc(100dvh - 3.5rem);
  padding: 0;
  overflow: hidden;
}
html body [data-ui-panel="community"] .community-header { gap: 1rem; }
html body [data-ui-panel="community"] .community-header h2 { flex: 1; margin: 0; }
html body [data-ui-panel="community"] .community-wallet {
  padding: .45rem .8rem .45rem 2.1rem;
  border: 1px solid #75634a;
  background: url("../../assets/ui/hud/goldcoin.png") .55rem center / 1rem 1rem no-repeat, #0b120e;
  color: #c6b58e;
  font: 600 .85rem/1.3 var(--ui-sans);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 2px 4px #0009;
}
html body [data-ui-panel="community"] .community-body { flex: 1 1 auto; min-height: 0; max-height: none; padding: .85rem; overflow: auto; }
html body [data-ui-panel="community"] .community-grid { gap: 1rem; align-items: start; }
html body [data-ui-panel="community"] .community-footer { display: flex; align-items: center; justify-content: space-between; }
html body [data-ui-panel="community"] .community-message { font-size: .8rem; }
html body [data-ui-panel="community"] .community-row {
  min-height: 3.2rem;
  gap: .65rem;
  padding: .7rem .55rem;
  border: 0;
  border-bottom: 1px solid #82755036;
  color: #b9c0ac;
  background: #161d131f;
  font-size: .81rem;
  line-height: 1.45;
}
html body [data-ui-panel="community"] .community-row:nth-of-type(even) { background: #70714a0a; }
html body [data-ui-panel="community"] .community-row:hover { background: #77764c16; }
html body [data-ui-panel="community"] .community-action { font-size: .69rem; padding: .55rem .65rem; min-height: 2.25rem; }
html body [data-ui-panel="community"] :is(.community-help, .community-clan-rule) { margin: .8rem 0; color: #a1ab98; font: .8rem/1.65 var(--ui-sans); }
html body [data-ui-view="clan"] .community-grid { grid-template-columns: minmax(16rem,.9fr) minmax(0,1.5fr); }
html body [data-ui-view="clan"] .community-clan-heading { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
html body [data-ui-view="clan"] .community-clan-title { color: #d6cab0; font: 500 1.35rem/1.3 var(--ui-serif); }
html body [data-ui-view="clan"] .community-clan-overview { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
html body [data-ui-view="clan"] .community-clan-identity { min-height: 2.5rem; }
html body [data-ui-view="clan"] .community-clan-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
html body [data-ui-view="clan"] .community-clan-metric { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .6rem; border: 1px solid #7b70404d; background: #050d0999; }
html body [data-ui-view="clan"] .community-clan-metric small { max-width: 100%; color: #9da58f; font-size: .7rem; white-space: normal; }
html body [data-ui-view="clan"] .community-clan-metric strong { max-width: 100%; color: #d6c49c; font-size: .95rem; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
html body [data-ui-view="clan"] .community-clan-bonuses { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; margin-bottom: .65rem; }
html body [data-ui-view="clan"] .community-clan-bonus { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .5rem; padding: .6rem; border: 1px solid #70684757; background: var(--ui-grain), #1a2015; }
html body [data-ui-view="clan"] .community-clan-bonus span { color: #b7b9a6; font-size: .73rem; }
html body [data-ui-view="clan"] .community-clan-bonus strong { color: #c4b78c; font-size: .88rem; }
html body [data-ui-view="clan"] .community-clan-bonus button { grid-column: 1 / -1; min-height: 1.7rem; padding: .15rem; }
html body [data-ui-view="clan"] .community-clan-actions { flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
html body [data-ui-view="clan"] .community-clan-actions input { flex: 1 1 100%; width: 100%; }
html body [data-ui-view="clan"] .community-clan-actions button { flex: 1 1 auto; }
html body [data-ui-view="clan"] .community-input { width: 100%; margin-bottom: .8rem; }
html body [data-ui-view="clan"] .community-clan-ranking-row { grid-template-columns: 2rem minmax(7rem,1fr) 3.2rem auto; }
html body [data-ui-view="clan"] .community-clan-rank { color: #9f9270; font: 1.2rem var(--ui-serif); }
html body [data-ui-view="clan"] .community-clan-name { color: #d5ceba; font-size: .9rem; }
html body [data-ui-view="clan"] .community-clan-level { color: #a8b497; }
html body [data-ui-view="clan"] .community-member-row { grid-template-columns: minmax(7rem,1fr) auto auto; gap: .6rem; }
html body [data-ui-view="clan"] .community-member-name { font-size: .85rem; color: #d4cbb4; }
html body [data-ui-view="clan"] .community-member-role { color: #a2ac96; font-size: .72rem; }
html body [data-ui-view="clan"] .community-member-contribution { color: #c5b588; font-size: .8rem; font-variant-numeric: tabular-nums; }

html body [data-ui-view="daily"] .community-grid { grid-template-columns: 1fr; }
html body [data-ui-view="daily"] .community-section { padding: .6rem; }
html body [data-ui-view="daily"] .daily-track { grid-template-columns: repeat(7,minmax(0,1fr)); gap: .5rem; margin-bottom: .8rem; }
html body [data-ui-view="daily"] .daily-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 0;
  padding: .45rem .4rem;
  border: 1px solid #6d705055;
  background: var(--ui-grain), #0c140f;
  box-shadow: inset 0 2px 8px #000, inset 0 -1px #a1976212;
}
html body [data-ui-view="daily"] .daily-card::before { content: ""; position: absolute; inset: 3px; border: 1px solid #aaa07112; pointer-events: none; }
html body [data-ui-view="daily"] .daily-card__day { padding-bottom: .6rem; border-bottom: 1px solid #80734844; color: #a8b096; font: 500 .78rem var(--ui-serif); text-align: center; }
html body [data-ui-view="daily"] .daily-card__rewards { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
html body [data-ui-view="daily"] .daily-reward { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 100%; }
html body [data-ui-view="daily"] :is(.daily-reward__gold, .daily-reward__item, .ui-slot) {
  width: 2.3rem;
  height: 2.3rem;
  padding: .3rem;
  border: 1px solid #84764f;
  border-radius: 0;
  background: var(--ui-grain), radial-gradient(#4c513247, #07100b 75%);
  box-shadow: inset 0 2px 6px #000, 0 1px #c5b38a24;
  object-fit: contain;
}
html body [data-ui-view="daily"] .daily-reward__gold { background: url("../../assets/ui/hud/goldcoin.png") center / 72% no-repeat, var(--ui-grain), #0d160f; }
html body [data-ui-view="daily"] .daily-reward__gold span { visibility: hidden; }
html body [data-ui-view="daily"] .daily-reward__label { color: #b4baa5; font: .71rem/1.45 var(--ui-sans); text-align: center; overflow-wrap: anywhere; }
html body [data-ui-view="daily"] .daily-card.is-claimed { border-color: #546648; background: var(--ui-grain), #141e11; opacity: .65; }
html body [data-ui-view="daily"] .daily-card.is-claimed .daily-card__day { color: #9baa87; }
html body [data-ui-view="daily"] .daily-card.is-current { border-color: #bca370; background: var(--ui-grain), #252c18; box-shadow: inset 0 2px 8px #000, 0 0 0 1px #ab946d2b; }
html body [data-ui-view="daily"] .daily-card.is-current .daily-card__day { color: #ded1a6; border-color: #aa91618a; }
html body [data-ui-view="daily"] [data-community-action="dailyClaim"] { display: block; min-width: min(100%, 17rem); margin: 0 auto; }
html body [data-ui-view="daily"] .community-section + .community-section { display: grid; grid-template-columns: 12rem minmax(0,1fr); align-items: center; gap: 1rem; }
html body [data-ui-view="daily"] .community-section + .community-section h3 { margin: 0; padding: 0; border: 0; }
html body [data-ui-view="daily"] .community-empty { min-height: 2.2rem; margin: 0; padding: .65rem; }
html body [data-ui-view="daily"] .community-body { padding: .65rem; }
html body [data-ui-view="daily"] .community-grid { gap: .65rem; }
html body [data-ui-view="daily"] :is(.community-header, .community-footer) { padding-block: .55rem; }

html body [data-ui-panel="afk"] {
  display: flex;
  flex-direction: column;
  width: min(86vw, 39rem);
  max-height: calc(100% - 3.5rem);
  padding: 0;
  overflow: visible;
}
html body [data-ui-panel="afk"] .afk-header { gap: 1rem; }
html body [data-ui-panel="afk"] .afk-header > div { display: grid; gap: .4rem; min-width: 0; }
html body [data-ui-panel="afk"] .afk-kicker { color: #a79f80; font: .68rem/1.3 var(--ui-sans); letter-spacing: .16em; }
html body [data-ui-panel="afk"] .afk-intro { margin: 0; padding: .85rem 1rem; color: #b0b8a3; font: .82rem/1.5 var(--ui-sans); }
html body [data-ui-panel="afk"] .afk-rewards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; margin: 0 1rem .75rem; }
html body [data-ui-panel="afk"] .afk-reward { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-height: 5.8rem; padding: .65rem .4rem; border: 1px solid #8c79514f; border-radius: 0; background: var(--ui-grain), #0a130ee8; box-shadow: inset 0 2px 7px #0008; }
html body [data-ui-panel="afk"] .afk-reward__icon { width: 2rem; height: 2rem; color: #b5ab82; border: 0; border-radius: 0; background: none; box-shadow: none; font: 1.5rem var(--ui-serif); }
html body [data-ui-panel="afk"] .afk-reward__label { color: #929e87; font: .69rem var(--ui-sans); letter-spacing: .07em; }
html body [data-ui-panel="afk"] .afk-reward strong { color: #d8c8a2; font: 500 1.5rem var(--ui-serif); font-variant-numeric: tabular-nums; }
html body [data-ui-panel="afk"] .afk-loot { min-height: 0; overflow: auto; padding: 0 1rem; margin: 0 0 .7rem; border: 0; background: none; }
html body [data-ui-panel="afk"] .afk-loot__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
html body [data-ui-panel="afk"] .afk-loot__item { display: grid; grid-template-columns: 2.7rem minmax(0,1fr) auto; gap: .6rem; align-items: center; padding: .5rem; border: 1px solid #6b705140; background: var(--ui-grain), #0a110dd9; box-shadow: inset 0 1px #ae9e7114; color: #b8beaa; font-size: .77rem; }
html body [data-ui-panel="afk"] .afk-loot__item img { width: 2.7rem; height: 2.7rem; padding: .2rem; border: 1px solid #84764f; background: #070d08; object-fit: contain; }
html body [data-ui-panel="afk"] :is(.afk-level, .afk-warning, .afk-note) { margin: 0 1rem .5rem; font-size: .73rem; line-height: 1.4; }
html body [data-ui-panel="afk"] .afk-level { color: #b1c398; background: #33462c38; border-color: #6d84573d; }
html body [data-ui-panel="afk"] .afk-note { color: #8e9c85; }
html body [data-ui-panel="afk"] .afk-claim { margin: .15rem 1rem .85rem; width: auto; flex: 0 0 auto; }
@media (max-height: 620px) and (orientation: landscape) {
  html body [data-ui-panel="community"] { width: 95vw; max-height: calc(100% - .7rem); }
  html body [data-ui-panel="community"] .community-body { padding: .65rem; }
  html body [data-ui-panel="community"] .community-grid { gap: .6rem; }
  html body [data-ui-panel="community"] .community-wallet { font-size: .7rem; padding: .3rem .55rem .3rem 1.8rem; }
  html body [data-ui-view="clan"] .community-grid { grid-template-columns: minmax(12rem,.9fr) minmax(0,1.4fr); }
  html body [data-ui-view="clan"] .community-clan-ranking-row { grid-template-columns: 1.4rem minmax(5rem,1fr) 2.6rem auto; }
  html body [data-ui-panel="community"] .community-row { padding: .45rem .3rem; min-height: 2.6rem; font-size: .72rem; gap: .35rem; }
  html body [data-ui-panel="community"] .community-action { font-size: .63rem; padding: .35rem .45rem; min-height: 1.9rem; }
  html body [data-ui-view="daily"] .community-section { padding: .65rem; }
  html body [data-ui-view="daily"] .daily-track { gap: .35rem; margin-bottom: .7rem; }
  html body [data-ui-view="daily"] .daily-card { min-height: 8.6rem; padding: .5rem .25rem; gap: .5rem; }
  html body [data-ui-view="daily"] .daily-card__day { font-size: .7rem; padding-bottom: .4rem; }
  html body [data-ui-view="daily"] :is(.daily-reward__gold,.daily-reward__item) { width: 2.4rem; height: 2.4rem; }
  html body [data-ui-view="daily"] .daily-reward__label { font-size: .62rem; }
  html body [data-ui-view="daily"] .community-section + .community-section { grid-template-columns: 8rem minmax(0,1fr); gap: .5rem; }
  html body [data-ui-panel="afk"] { width: min(92vw,46rem); max-height: calc(100% - .7rem); }
  html body [data-ui-panel="afk"] .afk-intro { padding: .65rem .8rem; font-size: .76rem; }
  html body [data-ui-panel="afk"] .afk-rewards { margin: 0 .8rem .7rem; gap: .45rem; }
  html body [data-ui-panel="afk"] .afk-reward { min-height: 0; padding: .45rem; gap: .3rem; }
  html body [data-ui-panel="afk"] .afk-reward__icon { display: none; }
  html body [data-ui-panel="afk"] .afk-reward strong { font-size: 1.15rem; }
  html body [data-ui-panel="afk"] .afk-loot { padding: 0 .8rem; margin-bottom: .55rem; }
  html body [data-ui-panel="afk"] .afk-claim { margin: .15rem .8rem .65rem; }
  html body [data-ui-panel="afk"] :is(.afk-level,.afk-warning,.afk-note) { margin: 0 .8rem .4rem; font-size: .67rem; }
}

html body [data-ui-view="daily"] .daily-reward__plus { display: none; }
@media (max-width: 1100px) and (orientation: landscape), (max-width: 600px) {
  html body [data-ui-view="daily"] .daily-card__rewards { flex-direction: row; align-items: flex-start; justify-content: center; gap: .15rem; width: 100%; }
  html body [data-ui-view="daily"] .daily-reward { flex: 1; min-width: 0; width: auto; }
  html body [data-ui-view="daily"] .daily-reward__plus { display: block; flex: none; padding-top: .6rem; color: #ddc48f; font-size: .7rem; }
  html body [data-ui-view="daily"] :is(.daily-reward__gold, .daily-reward__item) { width: min(100%, 2rem); height: auto; aspect-ratio: 1; min-width: 0; }
  html body [data-ui-view="daily"] .daily-reward__label { font-size: .6rem; line-height: 1.25; }
  html body [data-ui-view="daily"] .daily-card { min-height: 6.5rem; }
}
@media (max-height: 620px) and (orientation: landscape) {
  html body [data-ui-view="daily"] .community-section { padding: .4rem; }
  html body [data-ui-view="daily"] .daily-track { margin-bottom: .35rem; }
  html body [data-ui-view="daily"] .daily-card { min-height: 0; padding: .35rem .2rem; gap: .3rem; }
  html body [data-ui-view="daily"] .community-section h3 { margin-bottom: .4rem; padding-bottom: .3rem; }
  html body [data-ui-view="daily"] [data-community-action="dailyClaim"] { min-height: 1.8rem; padding-block: .3rem; }
}


/* SOURCE: css/ui/premium-skin.css */
/* ZEYD / Obsidian Citadel. Paint-only skin over the frozen game geometry.
   No dimensions, spacing, display, positioning, font metrics or DOM changes.
   Layered important paint beats legacy feature specificity without changing
   feature loading order. Rarity and HP/MP semantics remain feature-owned. */
@layer zeyd-reskin {
  :root {
    --zeyd-bg-deep: #070a10 !important;
    --zeyd-panel: #10151d !important;
    --zeyd-panel-secondary: #171e27 !important;
    --zeyd-border: #41464b !important;
    --zeyd-border-highlight: #8d8066 !important;
    --zeyd-gold: #d3b77e !important;
    --zeyd-bronze: #8b7052 !important;
    --zeyd-danger: #b56861 !important;
    --zeyd-success: #92ac91 !important;
    --zeyd-human: #8bbbc8 !important;
    --zeyd-orc: #c27b65 !important;
    --zeyd-rift: #aa8ab8 !important;
    --zeyd-text-primary: #e3e0d6 !important;
    --zeyd-text-muted: #a9afb5 !important;
    --zeyd-radius: 2px !important;
    --zeyd-shadow: 0 14px 36px #0009, inset 0 1px #dfd8bd18, inset 0 0 0 1px #06090dc0 !important;
    --zeyd-transition: 180ms ease !important;
    --zeyd-metal: linear-gradient(180deg,#333c46 0%,#222b35 12%,#151c25 52%,#101720 53%,#1b222a 100%) !important;
    --zeyd-surface: repeating-linear-gradient(112deg,#becbd103 0px,#becbd103 1px,transparent 1px,transparent 5px),radial-gradient(ellipse at 50% 0%,#2b35402b,transparent 70%),linear-gradient(130deg,#161d25,#0c1017 68%,#101720) !important;
    --zeyd-inset: linear-gradient(145deg,#0a0e15,#141c24) !important;
    --ui-ink: var(--zeyd-bg-deep) !important;
    --ui-stone: var(--zeyd-panel) !important;
    --ui-surface: var(--zeyd-panel-secondary) !important;
    --ui-well: #080c12 !important;
    --ui-metal: var(--zeyd-border) !important;
    --ui-edge: var(--zeyd-border-highlight) !important;
    --ui-bronze: var(--zeyd-bronze) !important;
    --ui-ivory: var(--zeyd-text-primary) !important;
    --ui-muted: var(--zeyd-text-muted) !important;
    --ui-dim: #7d8790 !important;
    --ui-danger: var(--zeyd-danger) !important;
    --ui-success: var(--zeyd-success) !important;
  }

  /* Frame footprint and border-image slice/width/outset are unchanged. */
  [data-ui-panel]:not([data-ui-panel="minigames"]):not([data-ui-panel="preload"]),
  .town-sidebar, .town-quick, .private-chat, .gm-tools, .info-panel {
    background: var(--zeyd-surface) !important;
    color: var(--zeyd-text-primary) !important;
    box-shadow: var(--zeyd-shadow) !important;
  }
  [data-ui-panel] :is(.frame__header,.community-header,.afk-header,.ui-header,.cp-header,.bank-header,.bs-header,.mining-header,.breaker-header,.friends-header,.inspect-header,.rk-header,.game-settings__header,.merchant-panel__header,.pet-panel__header,.feature-panel__header,.ar-header,.dg-header,.trade-header),
  [data-ui-panel] > .modal-title, .private-chat__header, .info-panel__header {
    background: repeating-linear-gradient(0deg,#e3ddd203 0px,#e3ddd203 1px,transparent 1px,transparent 3px),linear-gradient(90deg,#151d27,#303740 48%,#151d27) !important;
    border-bottom-color: #897453 !important;
    box-shadow: inset 0 1px #f4ead027,inset 0 -1px #090c11, inset 0 -3px #b59b6c10 !important;
  }
  [data-ui-panel] :is(.frame__title,.community-header h2,.afk-title,.ui-title,.cp-name,.cp-title,.bank-title,.bs-title,.mining-title,.breaker-title,.friends-title,.inspect-title,.rk-title,.game-settings__title,.merchant-panel__title,.pet-panel__title,.feature-panel__title,.ar-title,.dg-title,.modal-title,.trade-header h2),
  .info-panel__title {
    color: var(--zeyd-gold) !important;
    text-shadow: 0 1px 1px #000,0 0 12px #d3b77e0d !important;
  }
  [data-ui-panel] :is(.frame__footer,.community-footer,.ui-footer,.modal-actions,.cp-footer,.bank-footer,.bs-footer,.rk-footer,.game-settings__footer,.merchant-panel__footer,.ar-footer,.dg-footer,.trade-actions) {
    background: linear-gradient(180deg,#131a23,#0b1017) !important;
    border-top-color: #4b4a45 !important;
    box-shadow: inset 0 1px #ece0c40a !important;
  }
  /* Recessed stone/metal wells; no content-box changes. */
  [data-ui-panel] :is(.ui-surface,.community-section,.cp-tile,.cp-inventory,.cp-derived,.cp-alloc,.cp-block,.bank-section--vault,.bank-section--inventory,.bank-detail,.forge-side,.forge-inventory,.forge-live-quote,.forge-preview,.forge-result,.forge-stage,.mining-card,.breaker-machine,.breaker-inventory,.mc-vendor,.mc-transaction,.mc-inventory,.pet-panel__hero,.pet-panel__progression,.friends-section,.inspect-identity,.drop-list__enemies,.drop-list__drops,.gm-tools__card,.community-clan-metric,.community-clan-bonus,.rph-slot,.rph-boss-info,.trade-offer,.trade-inventory) {
    background: var(--zeyd-inset) !important;
    border-color: #3a424a !important;
    box-shadow: inset 0 1px 4px #0009, inset 0 -1px #d7e2eb0a !important;
  }
  [data-ui-panel] :is(.cp-section__title,.cp-block__title,.cp-preview__title,.bank-section__heading h3,.mc-section__title,.mining-card h3,.breaker-machine h3,.breaker-inventory h3,.friends-section h3,.community-section > h3,.ui-section-title,.feature-panel__body h3) {
    color: #c7b38d !important;
    border-bottom-color: #68748036 !important;
    text-shadow: 0 1px #000 !important;
  }
  .cp-preview__stage, .character-paperdoll {
    background: linear-gradient(180deg,#111923 0%,#0a1018 58%,#080b11 100%) !important;
    box-shadow: inset 0 0 24px #0008 !important;
  }

  /* Slot positions, border widths, icon art and rarity variables are retained. */
  :is(.cp-slot,.cp-slot-cell,.equipment-slot,.bank-slot,.forge-slot,.forge-cell,.forge-grid__slot,.breaker-inventory-slot,.breaker-reel,.mc-cell,.mc-cart__slot,.inspect-item,.trade-item) {
    background: linear-gradient(135deg,#63707a1a,transparent 34%),linear-gradient(145deg,#070b12,#18212a) !important;
    border-radius: var(--zeyd-radius) !important;
    box-shadow: inset 0 1px 5px #000b,inset 0 0 0 1px #b7c7d215 !important;
  }
  :is(.cp-slot,.cp-slot-cell,.equipment-slot,.bank-slot,.forge-slot,.forge-cell,.forge-grid__slot,.breaker-inventory-slot,.mc-cell,.trade-item):not(.item-tier-frame) {
    border-color: #48505a !important;
  }
  .item-tier-frame {
    box-shadow: inset 0 0 0 1px var(--item-frame-inner),inset 0 0 7px var(--item-frame-glow) !important;
  }
  :is(.cp-slot,.equipment-slot,.bank-slot,.forge-slot,.forge-grid__slot,.mc-cell,.trade-item):hover {
    box-shadow: inset 0 0 0 1px #ded5bd88,inset 0 0 9px #cedae21c !important;
  }
  :is(.cp-slot,.equipment-slot,.bank-slot,.forge-slot,.mc-cell,.trade-item):is(.is-selected,.is-target,.is-drop-target) {
    box-shadow: inset 0 0 0 1px #e1c491,inset 0 0 10px #d2ae5333 !important;
  }
  :is(.cp-slot,.equipment-slot,.bank-slot,.trade-item):is(.is-locked,[aria-disabled="true"]) {
    background-color: #06090e !important;
  }

  /* Shared button vocabulary. No transform, padding, font or line-height. */
  :is(.ui-button,.community-action,.ui-action,.cp-detail__action,.cp-alloc__add,.bank-back,.bank-action,.bs-menu__card,.forge-upgrade,.forge-button,.mc-confirm,.mc-action,.game-settings__action,.friends-action,.rph-controls button,.rph-filter,.rk-tab,.ar-button,.dg-button,.battle-speed,.dg-repeat-battle,.private-chat__send,.game-chat__send,.pet-stat-allocation__add,.mining-action,.breaker-action),
  [data-ui-panel] :is(.cp-close,.bank-close,.bs-close,.mining-close,.breaker-close,.inspect-close,.rk-close,.game-settings__close,.merchant-panel__close,.pet-panel__close,.ar-close,.dg-close,[data-feature-close]) {
    background: var(--zeyd-metal) !important;
    border-color: #646969 !important;
    color: #ddd9cd !important;
    text-shadow: 0 1px 1px #000 !important;
    box-shadow: inset 0 1px #f0e6ca25,inset 0 -2px #0009 !important;
  }
  :is(.ui-button--primary,.ui-button--hero,.afk-claim,.forge-upgrade,.forge-action--upgrade,.mc-confirm,.rph-start,.ar-opponent__fight,.dg-enemy__fight,[data-community-action="dailyClaim"],[data-action="start"],[data-action="confirm-create"],[data-bs-action="upgrade"]) {
    background: linear-gradient(180deg,#8b7652,#594a32 14%,#342b20 53%,#29231b 54%,#4f412b) !important;
    border-color: #ac9469 !important;
    color: #f1e1bd !important;
    box-shadow: inset 0 1px #ffe5a55c,inset 0 -2px #08090bd9 !important;
  }
  :is(.ui-button,.community-action,.mc-confirm,.game-settings__action,.friends-action,.ar-button,.dg-button,.forge-upgrade):not(:disabled):hover {
    border-color: #dbc69f !important;
    color: #fff1d3 !important;
    box-shadow: inset 0 1px #fff0cf66,inset 0 0 12px #b1c4d016 !important;
  }
  :is(.ui-button,.community-action,.mc-confirm,.game-settings__action,.friends-action,.forge-upgrade):not(:disabled):active {
    box-shadow: inset 0 3px 8px #000c !important;
  }
  :is(.ui-button--danger,.game-settings__action.is-danger,.friends-action.is-reject,[data-community-action="clanLeave"],[data-community-action="clanKick"]) {
    background: linear-gradient(180deg,#57302f,#25161c) !important;
    border-color: #925b53 !important;
    color: #e5bcb0 !important;
  }
  :is(.ui-button,.community-action,.mc-confirm,.game-settings__action,.forge-upgrade):disabled {
    background: linear-gradient(180deg,#242a30,#12171d) !important;
    color: #92989c !important;
    border-color: #454b4f !important;
    box-shadow: inset 0 1px #ffffff0a !important;
  }
  :is(.cp-bag-tab,.bank-tabs button,.breaker-tabs button,.forge-bag-tab,.mc-tab,.mc-mode,.feature-tab,.game-settings__tabs button,.game-chat__tab,.community-tab,.rk-tab,.drop-door,.drop-enemy,.trade-tabs button) {
    background: linear-gradient(180deg,#1e2833,#111820) !important;
    border-color: #444d55 !important;
    color: #b6bec3 !important;
    box-shadow: inset 0 1px #cdd9e015 !important;
  }
  :is(.cp-bag-tab,.bank-tabs button,.breaker-tabs button,.forge-bag-tab,.mc-tab,.mc-mode,.feature-tab,.game-settings__tabs button,.game-chat__tab,.community-tab,.rk-tab,.drop-door,.drop-enemy,.trade-tabs button):is(.is-active,.is-selected,[aria-selected="true"]) {
    background: linear-gradient(180deg,#453e31,#252729) !important;
    border-color: #9b8864 !important;
    color: #e6cf9d !important;
    box-shadow: inset 0 -2px #b99b63,inset 0 1px #dfc9a522 !important;
  }
  [data-ui-panel] :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),select,textarea),
  .private-chat__input, .game-chat__input {
    background: linear-gradient(180deg,#060a10,#111923) !important;
    border-color: #49515a !important;
    color: var(--zeyd-text-primary) !important;
    box-shadow: inset 0 2px 5px #0009 !important;
  }
  [data-ui-panel] :is(input,textarea)::placeholder { color: #87929e !important; }
  [data-ui-panel] :is(button,input,select,textarea):focus-visible { outline-color: #dbc28e !important; }

  /* Cards keep their current portrait / text / action order. */
  :is(.ar-opponent,.ar-card,.dg-door,.dg-enemy,.merchant-entry,.bs-menu__card,.mining-menu__button,.quest-card,.zb-product,.friends-row,.inspect-member,.community-clan-card,.community-reward,.daily-card,.rk-hourly-reward) {
    background: linear-gradient(120deg,#293340,#111822 70%) !important;
    border-color: #50575b !important;
    box-shadow: inset 0 1px #d9e4e31c,inset 0 -1px #0009 !important;
  }
  :is(.ar-opponent,.ar-card,.merchant-entry,.bs-menu__card):hover {
    border-color: #b7a27c !important;
    box-shadow: inset 0 1px #e9d6b750,inset 0 0 16px #b2c5d214 !important;
  }
  :is(.dg-door,.dg-enemy,.rph-boss-info) {
    background: linear-gradient(140deg,#292430,#10151e 75%) !important;
    border-color: #635264 !important;
  }
  .forge-chamber { background: radial-gradient(ellipse at 50% 75%,#a3632838,transparent 62%),linear-gradient(150deg,#282628,#0b1017) !important; border-color:#806a51 !important; }
  .forge-chamber__glow { opacity:.22 !important; }
  .forge-stage { background:radial-gradient(ellipse at 50% 80%,#a3632826,transparent 68%),var(--zeyd-inset) !important; }
  .forge-status { background:var(--zeyd-inset) !important; border-color:#5e5546 !important; }
  .game-settings__tabs { background:var(--zeyd-inset) !important; border-color:#414b54 !important; }
  .game-settings__header h2 { color:var(--zeyd-gold) !important; text-shadow:0 1px #000 !important; }
  .bottom-hud__exp-frame { background:linear-gradient(180deg,#303b45,#0b1017) !important; border-color:#6e6555 !important; }
  :is(.forge-result.is-success,.quest-card.is-ready,.trade-offer.is-accepted) { border-color:#829878 !important; background:linear-gradient(145deg,#2b352b,#101b1b) !important; }
  .forge-result.is-failure { border-color:#9b615d !important; background:linear-gradient(145deg,#3a252b,#14151d) !important; }
  .quest-card.is-ready, .daily-card.is-available { border-color:#b79a67 !important; box-shadow:inset 0 0 12px #b99a6320 !important; }
  .quest-card.is-claimed { background:linear-gradient(145deg,#1a2228,#10151a) !important; }
  .community-row, .rk-row { background:#101721c9 !important; border-color:#53616d30 !important; }
  .community-row:nth-of-type(even), .rk-row:nth-child(odd) { background:#1b242dc0 !important; }
  .community-row:hover, .rk-row:hover { background:#2b343dc9 !important; }
  .rk-row--head { background:linear-gradient(180deg,#303842,#202832) !important; color:#cdb992 !important; }
  .rk-list > .rk-row:nth-child(-n+3) { box-shadow:inset 2px 0 #b3996880 !important; }
  .rk-row.is-you { border-color:#baa278 !important; box-shadow:inset 0 0 0 1px #bda46a55 !important; }

  /* Detached detail and social surfaces preserve their positioning owner. */
  :is(.cp-tooltip,.item-tooltip,.cp-detail,.bank-tooltip,.bottom-hud__tooltip,[data-ui-surface="tooltip"],[data-ui-surface="menu"],.minigames-menu,.mining-menu,.pet-menu,.trade-quantity,.rph-modal,.info-panel__section) {
    background:linear-gradient(145deg,#202a36,#090e16 75%) !important;
    box-shadow:0 8px 24px #000b,inset 0 1px #ddd0ae30,inset 0 0 0 1px #d1b98a14 !important;
    color:var(--zeyd-text-primary) !important;
  }
  .game-chat, .game-chat__messages, .private-chat__body { background-color:#0b121bdf !important; }
  .game-chat__tabs, .private-chat__header { background:linear-gradient(180deg,#29333e,#131b25) !important; border-color:#5d6468 !important; }
  .private-chat__tab.is-unread { border-color:var(--zeyd-gold) !important; color:var(--zeyd-gold) !important; }
  .town-player__name { color:#e7d7b5 !important; text-shadow:0 1px #000 !important; }
  .town-player__stat, .town-quick__button { background-color:#0b121b !important; border-color:#4d5660 !important; }
  .bottom-hud { background:linear-gradient(180deg,#303b47,#111923 30%,#080d15 80%,#202c38) !important; border-color:#6e6555 !important; box-shadow:inset 0 1px #e4d6b126,0 -2px 8px #0007 !important; }
  .bottom-hud__quick-button { background:var(--zeyd-metal) !important; border-color:#696957 !important; box-shadow:inset 0 1px #e3d3b425,inset 0 -2px #0009 !important; }
  /* Fill lengths/timing remain controlled by battle/HUD code. */
  :is(.ar-hp__bar,.dg-hp__bar,.battle-mp__bar,.cp-exp__bar,.pet-panel__exp-bar) { background:#080d13 !important; box-shadow:inset 0 1px 3px #000c !important; }
  :is(.ar-hp__fill,.dg-hp__fill) { background:linear-gradient(180deg,#ba7566,#7d333d 30%,#492029 85%,#a4655c) !important; }
  .battle-mp__fill { background:linear-gradient(180deg,#8bbdd8,#3e779f 30%,#244363 85%,#6b9cba) !important; }
  .cp-exp__fill { background:linear-gradient(180deg,#dac694,#907140 40%,#4b3c27) !important; }
  /* Full-bleed combat skill artwork intentionally has no button plate. */
  .battle-side--player .battle-skill { background:none !important; box-shadow:none !important; }
  [data-race-id="human"].is-selected { border-color:var(--zeyd-human) !important; }
  [data-race-id="orc"].is-selected { border-color:var(--zeyd-orc) !important; }
  [data-ui-panel] *, .private-chat__log { scrollbar-color:#646969 #0a1018 !important; }
  [data-ui-panel] ::-webkit-scrollbar-thumb, .private-chat__log::-webkit-scrollbar-thumb { background:linear-gradient(90deg,#343e48,#7d7a68,#343e48) !important; border-color:#0a1018 !important; }
  [data-ui-panel] ::-webkit-scrollbar-track, .private-chat__log::-webkit-scrollbar-track { background:linear-gradient(90deg,#070b11,#151c25) !important; }

  [data-ui-panel="afk"] :is(.afk-reward,.afk-loot,.afk-loot__item) {
    background:linear-gradient(145deg,#151e28,#090e16) !important;
    border-color:#4f5862 !important;
  }
  [data-ui-panel="drop"] :is(.drop-list__enemies,.drop-list__drops,.drop-card,.drop-door,.drop-enemy) {
    background-color:#0b1119 !important;
    background-image:linear-gradient(145deg,#17212b,#090e16) !important;
    border-color:#4f5962 !important;
  }
}