:root {
  color-scheme: dark;
  --bg: #151515;
  --bg-glow: #363636;
  --arena-glow: #3c3c3c;
  --surface: #202020;
  --surface-2: #2b2b2b;
  --dialog: #212121;
  --inset: #181818;
  --card-dark: #1c1c1c;
  --surface-deep: #141414;
  --surface-hover: #292929;
  --input: #181818;
  --form-surface: #1c1c1c;
  --icon-surface: #2a2a2a;
  --tag-surface: #323232;
  --line: #424242;
  --text: #f1f1f1;
  --muted: #b0b0b0;
  --gold: #bcbcbc;
  --gold-strong: #ededed;
  --accent-rgb: 188 188 188;
  --chrome-rgb: 21 21 21;
  --panel-start-rgb: 42 42 42;
  --panel-end-rgb: 29 29 29;
  --accent-border: #747474;
  --accent-border-strong: #8e8e8e;
  --selected-border: #858585;
  --selected-start: #4d4d4d;
  --selected-end: #363636;
  --selected-text: #fafafa;
  --primary-border: #818181;
  --primary-bg: #484848;
  --primary-hover: #575757;
  --primary-text: #fafafa;
  --green: #83b879;
  --red: #d47768;
  --blue: #77aeb7;
  --purple: #a998c8;
  --tips-rgb: 32 83 103;
  --tips-surface: #1a3541;
  --tips-surface-deep: #112630;
  --tips-border: #447b91;
  --tips-accent: #72c7df;
  --tips-heading: #ddf7ff;
  --tips-text: #bad5df;
  --abyss-crystal: #72d7ee;
  --abyss-crystal-rgb: 114 215 238;
  --abyss-violet: #9c78d6;
  --abyss-violet-rgb: 156 120 214;
  --abyss-metal: #8d876f;
  --abyss-danger: #df8178;
  --shadow: 0 16px 44px rgb(0 0 0 / 28%);
  --app-header-safe-top: env(safe-area-inset-top, 0px);
  --app-header-height: calc(46px + var(--app-header-safe-top));
  --mobile-navigation-height: calc(62px + env(safe-area-inset-bottom));
  --mobile-chat-peek-height: 36px;
  --app-update-flow-space: 26px;
  --chat-shell-alpha: .985;
  --chat-feed-alpha: .95;
  --chat-surface-alpha: .96;
  --chat-backdrop-alpha: .4;
  --chat-shell-blur: 10px;
  --chat-backdrop-blur: 1px;
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
}

html[data-chat-transparency="mist"] {
  --chat-shell-alpha: .88;
  --chat-feed-alpha: .76;
  --chat-surface-alpha: .9;
  --chat-backdrop-alpha: .12;
  --chat-shell-blur: 5px;
  --chat-backdrop-blur: 0px;
}

html[data-chat-transparency="clear"] {
  --chat-shell-alpha: .74;
  --chat-feed-alpha: .58;
  --chat-surface-alpha: .84;
  --chat-backdrop-alpha: .02;
  --chat-shell-blur: 1px;
  --chat-backdrop-blur: 0px;
}

html[data-color-theme="blue"] {
  --bg: #0d1118;
  --bg-glow: #243247;
  --arena-glow: #29394e;
  --surface: #151b24;
  --surface-2: #1c2632;
  --dialog: #151c25;
  --inset: #101720;
  --card-dark: #131b24;
  --surface-deep: #0f151d;
  --surface-hover: #1c2733;
  --input: #101720;
  --form-surface: #121a23;
  --icon-surface: #1b2733;
  --tag-surface: #202d3a;
  --line: #2c3b4d;
  --text: #edf3f8;
  --muted: #9caeba;
  --gold: #72a9dc;
  --gold-strong: #9ac8f0;
  --accent-rgb: 114 169 220;
  --chrome-rgb: 13 17 24;
  --panel-start-rgb: 27 37 49;
  --panel-end-rgb: 19 27 37;
  --accent-border: #466b8d;
  --accent-border-strong: #547fa8;
  --selected-border: #527da5;
  --selected-start: #315f88;
  --selected-end: #244461;
  --selected-text: #eff8ff;
  --primary-border: #4f7da8;
  --primary-bg: #315d85;
  --primary-hover: #3d709c;
  --primary-text: #eff8ff;
}

html[data-color-theme="red"] {
  --bg: #160f11;
  --bg-glow: #3a2429;
  --arena-glow: #40272c;
  --surface: #211719;
  --surface-2: #2c1e21;
  --dialog: #211719;
  --inset: #190f12;
  --card-dark: #1d1315;
  --surface-deep: #160d0f;
  --surface-hover: #291a1d;
  --input: #190f12;
  --form-surface: #1c1214;
  --icon-surface: #2a1c1f;
  --tag-surface: #322124;
  --line: #4a3034;
  --text: #f7eeee;
  --muted: #b9a2a4;
  --gold: #cb776f;
  --gold-strong: #ef9a8d;
  --accent-rgb: 203 119 111;
  --chrome-rgb: 22 15 17;
  --panel-start-rgb: 43 29 32;
  --panel-end-rgb: 31 20 23;
  --accent-border: #8b514c;
  --accent-border-strong: #a45e56;
  --selected-border: #98564f;
  --selected-start: #823f3a;
  --selected-end: #5c2d2a;
  --selected-text: #fff0ed;
  --primary-border: #9d5b53;
  --primary-bg: #743d38;
  --primary-hover: #894a43;
  --primary-text: #fff0ed;
}

html[data-color-theme="green"] {
  --bg: #0d1510;
  --bg-glow: #22392a;
  --arena-glow: #27422f;
  --surface: #152019;
  --surface-2: #1d2c22;
  --dialog: #162119;
  --inset: #101912;
  --card-dark: #131d16;
  --surface-deep: #0e170f;
  --surface-hover: #1b291f;
  --input: #101912;
  --form-surface: #121c15;
  --icon-surface: #1b2a20;
  --tag-surface: #223328;
  --line: #304637;
  --text: #edf5ed;
  --muted: #9bad9d;
  --gold: #70ae7d;
  --gold-strong: #9ad3a4;
  --accent-rgb: 112 174 125;
  --chrome-rgb: 13 21 16;
  --panel-start-rgb: 26 39 30;
  --panel-end-rgb: 18 29 22;
  --accent-border: #4d7857;
  --accent-border-strong: #5d9168;
  --selected-border: #56835f;
  --selected-start: #376a43;
  --selected-end: #294d32;
  --selected-text: #effaf1;
  --primary-border: #54835f;
  --primary-bg: #366641;
  --primary-hover: #437b4e;
  --primary-text: #effaf1;
}

html[data-color-theme="purple"] {
  --bg: #120e18;
  --bg-glow: #30233f;
  --arena-glow: #382947;
  --surface: #1d1725;
  --surface-2: #281f32;
  --dialog: #1d1725;
  --inset: #150f1c;
  --card-dark: #19131f;
  --surface-deep: #110c17;
  --surface-hover: #251c2f;
  --input: #150f1c;
  --form-surface: #181220;
  --icon-surface: #261e30;
  --tag-surface: #30263c;
  --line: #443653;
  --text: #f3eef8;
  --muted: #aca0b7;
  --gold: #ad8bd6;
  --gold-strong: #cfb2ef;
  --accent-rgb: 173 139 214;
  --chrome-rgb: 18 14 24;
  --panel-start-rgb: 39 30 49;
  --panel-end-rgb: 27 21 35;
  --accent-border: #725a8b;
  --accent-border-strong: #8669a4;
  --selected-border: #7d6199;
  --selected-start: #674483;
  --selected-end: #4b315f;
  --selected-text: #f8efff;
  --primary-border: #7e61a0;
  --primary-bg: #5b3d75;
  --primary-hover: #6d498a;
  --primary-text: #f8efff;
}

html[data-color-theme="amber"] {
  --bg: #15110b;
  --bg-glow: #3a2d18;
  --arena-glow: #42331b;
  --surface: #201a12;
  --surface-2: #2c2418;
  --dialog: #211a11;
  --inset: #18120b;
  --card-dark: #1c160f;
  --surface-deep: #140f09;
  --surface-hover: #292116;
  --input: #18120b;
  --form-surface: #1b150d;
  --icon-surface: #2b2317;
  --tag-surface: #352a1a;
  --line: #4a3b25;
  --text: #f6efe2;
  --muted: #b3a791;
  --gold: #c89445;
  --gold-strong: #edbb63;
  --accent-rgb: 200 148 69;
  --chrome-rgb: 21 17 11;
  --panel-start-rgb: 43 34 22;
  --panel-end-rgb: 29 23 15;
  --accent-border: #82612f;
  --accent-border-strong: #9a7339;
  --selected-border: #8e6933;
  --selected-start: #74511f;
  --selected-end: #543a17;
  --selected-text: #fff2d8;
  --primary-border: #98713a;
  --primary-bg: #6f4d20;
  --primary-hover: #845c26;
  --primary-text: #fff2d8;
}

html[data-color-theme="iron"] {
  --bg: #0f1214;
  --bg-glow: #273139;
  --arena-glow: #2d3942;
  --surface: #171b1f;
  --surface-2: #20262c;
  --dialog: #171c20;
  --inset: #111518;
  --card-dark: #14191c;
  --surface-deep: #0d1114;
  --surface-hover: #1d2328;
  --input: #111518;
  --form-surface: #14191d;
  --icon-surface: #20272d;
  --tag-surface: #273038;
  --line: #35414a;
  --text: #edf1f3;
  --muted: #9ea9b0;
  --gold: #8d9ba6;
  --gold-strong: #bcc8d1;
  --accent-rgb: 141 155 166;
  --chrome-rgb: 15 18 20;
  --panel-start-rgb: 31 38 44;
  --panel-end-rgb: 21 26 30;
  --accent-border: #566975;
  --accent-border-strong: #667d8a;
  --selected-border: #617582;
  --selected-start: #4d5f6b;
  --selected-end: #37454e;
  --selected-text: #f3f8fa;
  --primary-border: #667d8a;
  --primary-bg: #40525d;
  --primary-hover: #4d626f;
  --primary-text: #f3f8fa;
}

html[data-color-theme="deepsea"] {
  --bg: #09171b;
  --bg-glow: #19434b;
  --arena-glow: #1f4d53;
  --surface: #10252b;
  --surface-2: #18323a;
  --dialog: #11272e;
  --inset: #0c1d23;
  --card-dark: #0e2228;
  --surface-deep: #0a1a20;
  --surface-hover: #1b363e;
  --input: #0c1d23;
  --form-surface: #0e2228;
  --icon-surface: #19353d;
  --tag-surface: #203e46;
  --line: #2a4b51;
  --text: #e6f3f2;
  --muted: #9cbfc2;
  --gold: #61c8ca;
  --gold-strong: #8ee8e5;
  --accent-rgb: 97 200 202;
  --chrome-rgb: 9 23 27;
  --panel-start-rgb: 23 48 56;
  --panel-end-rgb: 14 34 40;
  --accent-border: #397b83;
  --accent-border-strong: #4b99a0;
  --selected-border: #428991;
  --selected-start: #205d64;
  --selected-end: #163f49;
  --selected-text: #efffff;
  --primary-border: #438d95;
  --primary-bg: #1d5962;
  --primary-hover: #266d75;
  --primary-text: #efffff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
html { font-size: 16px; }
html[data-text-size="small"] { font-size: 15px; }
html[data-text-size="large"] { font-size: 17px; }
html, body { overscroll-behavior-y: none; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -20%, var(--bg-glow) 0, var(--bg) 46%); color: var(--text); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"], [role="textbox"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
button, select, input { font: inherit; }
input[type="radio"] { width: auto; min-height: auto; }
button {
  position: relative;
  overflow: hidden;
  color: inherit;
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition: transform 120ms cubic-bezier(.2, .8, .3, 1), filter 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 155%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(255 245 207 / 34%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.08);
  pointer-events: none;
}
button:not(:disabled):is(:active, .button-pressing):not(.item-menu-trigger):not(.home-party-member):not(.chat-message-avatar):where(:not(.social-lounge-avatar)) { transform: translateY(3px) scale(.94); filter: brightness(1.25) saturate(1.12); box-shadow: inset 0 4px 12px rgb(0 0 0 / 46%), 0 1px 0 rgb(255 244 200 / 22%); border-color: rgb(242 207 118 / 72%); transition-duration: 45ms; }
button.button-confirmed { animation: button-confirmed-pop .36s cubic-bezier(.15, .85, .25, 1); }
button.button-confirmed::after { animation: button-confirmed .38s ease-out; }
.pending-action-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pending-action-button[aria-busy="true"] { cursor: wait; }
/* Shared pending gear: inherit the action colour and keep request/hold locks unchanged. */
.pending-action-spinner, .button-spinner { display: block; width: 1em; height: 1em; flex: 0 0 auto; border: 0; border-radius: 0; opacity: .86; animation: pending-action-spin 1.2s linear infinite; }
.pending-action-spinner::before, .button-spinner::before, .battle-auto-button.auto-stop-pending::before { content: ""; display: block; width: 100%; height: 100%; background: currentcolor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M20.50%208.48L20.96%209.93L23.82%209.92L23.82%2014.08L20.96%2014.07L20.50%2015.52L19.80%2016.88L21.83%2018.88L18.88%2021.83L16.88%2019.80L15.52%2020.50L14.07%2020.96L14.08%2023.82L9.92%2023.82L9.93%2020.96L8.48%2020.50L7.12%2019.80L5.12%2021.83L2.17%2018.88L4.20%2016.88L3.50%2015.52L3.04%2014.07L0.18%2014.08L0.18%209.92L3.04%209.93L3.50%208.48L4.20%207.12L2.17%205.12L5.12%202.17L7.12%204.20L8.48%203.50L9.93%203.04L9.92%200.18L14.08%200.18L14.07%203.04L15.52%203.50L16.88%204.20L18.88%202.17L21.83%205.12L19.80%207.12Z%20M16%2012a4%204%200%201%200-8%200a4%204%200%201%200%208%200Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M20.50%208.48L20.96%209.93L23.82%209.92L23.82%2014.08L20.96%2014.07L20.50%2015.52L19.80%2016.88L21.83%2018.88L18.88%2021.83L16.88%2019.80L15.52%2020.50L14.07%2020.96L14.08%2023.82L9.92%2023.82L9.93%2020.96L8.48%2020.50L7.12%2019.80L5.12%2021.83L2.17%2018.88L4.20%2016.88L3.50%2015.52L3.04%2014.07L0.18%2014.08L0.18%209.92L3.04%209.93L3.50%208.48L4.20%207.12L2.17%205.12L5.12%202.17L7.12%204.20L8.48%203.50L9.93%203.04L9.92%200.18L14.08%200.18L14.07%203.04L15.52%203.50L16.88%204.20L18.88%202.17L21.83%205.12L19.80%207.12Z%20M16%2012a4%204%200%201%200-8%200a4%204%200%201%200%208%200Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.button-spinner { display: inline-block; vertical-align: -.125em; margin-inline-end: .4em; }
.battle-asset-loading { position: fixed; z-index: 1100; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 14px 16px; border: 1px solid #6b8c99; border-radius: 8px; background: rgb(7 19 27 / 96%); color: #e3f4f5; box-shadow: 0 8px 28px rgb(0 0 0 / 38%); pointer-events: none; font-size: .85rem; }
.battle-asset-loading small { flex: 0 0 auto; color: #b7d9e3; font-variant-numeric: tabular-nums; }
.battle-asset-loading progress { grid-column: 1 / -1; width: 100%; height: 6px; accent-color: #8fdce4; }
button:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
@media (hover: hover) {
  button:not(:disabled):hover { filter: brightness(1.09); }
}
@keyframes button-confirmed {
  0% { opacity: .58; transform: translate(-50%, -50%) scale(.06); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes button-confirmed-pop {
  0% { transform: translateY(3px) scale(.94); }
  52% { transform: translateY(-1px) scale(1.035); filter: brightness(1.2); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes pending-action-spin { to { transform: rotate(360deg); } }
.site-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 38px minmax(96px, .9fr) minmax(100px, 1fr) minmax(74px, .8fr) 36px; align-items: center; gap: 8px; width: min(980px, 100%); height: var(--app-header-height); min-height: var(--app-header-height); margin: 0 auto; padding: 4px max(10px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: rgb(var(--chrome-rgb) / 96%); box-shadow: 0 6px 20px rgb(0 0 0 / 20%); backdrop-filter: blur(12px); }
#site-header { border-top: var(--app-header-safe-top) solid transparent; }
.hamburger-button { display: grid; width: 36px; height: 36px; padding: 7px; place-items: center; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.hamburger-button[aria-expanded="true"] { border-color: rgb(var(--accent-rgb) / 38%); background: var(--surface-2); color: var(--gold-strong); }
.hamburger-glyph { display: grid; width: 20px; gap: 4px; }
.hamburger-glyph i { display: block; width: 100%; height: 2px; border-radius: 99px; background: currentcolor; box-shadow: 0 1px 2px rgb(0 0 0 / 38%); }
.side-menu-backdrop { position: fixed; z-index: 120; inset: 0; background: rgb(2 4 3 / 66%); backdrop-filter: blur(3px); animation: side-menu-backdrop-in 160ms ease-out; }
.side-menu { position: fixed; z-index: 121; top: 0; bottom: 0; left: 0; display: flex; width: min(360px, calc(100vw - 36px)); flex-direction: column; overflow: hidden; border-right: 1px solid var(--accent-border); background: linear-gradient(160deg, rgb(var(--panel-start-rgb) / 99%), rgb(var(--chrome-rgb) / 100%) 55%); box-shadow: 18px 0 48px rgb(0 0 0 / 52%); animation: side-menu-in 190ms cubic-bezier(.2, .78, .3, 1); }
.side-menu-header { display: flex; flex: 0 0 auto; min-height: calc(64px + env(safe-area-inset-top)); align-items: center; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 13px 12px 17px; border-bottom: 1px solid var(--line); background: linear-gradient(110deg, rgb(var(--accent-rgb) / 11%), transparent 68%); }
.side-menu-header > div { display: grid; gap: 2px; }
.side-menu-header span { color: var(--gold); font-size: .55rem; font-weight: 800; letter-spacing: .15em; }
.side-menu-header strong { font-family: "Yu Mincho", serif; font-size: 1.15rem; letter-spacing: .05em; }
.side-menu-close { display: grid; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgb(0 0 0 / 18%); color: var(--muted); cursor: pointer; font-size: 1.35rem; line-height: 1; }
.side-menu-navigation { flex: 1 1 auto; min-height: 0; padding: 7px 10px max(18px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.side-menu-group { padding: 8px 0 5px; }
.side-menu-group + .side-menu-group { border-top: 1px solid rgb(255 255 255 / 6%); }
.side-menu-group h2 { margin: 0; padding: 4px 10px 6px; color: var(--muted); font-size: .58rem; font-weight: 700; letter-spacing: .12em; }
.side-menu-link { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; width: 100%; min-height: 48px; align-items: center; gap: 10px; padding: 5px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #d5d2c4; cursor: pointer; text-align: left; }
.side-menu-link > img { display: block; width: 30px; height: 30px; object-fit: contain; opacity: .78; filter: grayscale(.2) brightness(.9); }
.side-menu-link > span { overflow: hidden; font-size: .76rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.side-menu-link > i { color: #777768; font-size: 1.15rem; font-style: normal; }
.side-menu-link.active { border-color: rgb(var(--accent-rgb) / 30%); background: linear-gradient(90deg, rgb(var(--accent-rgb) / 13%), rgb(var(--accent-rgb) / 3%)); color: var(--gold-strong); box-shadow: inset 3px 0 0 var(--gold); }
.side-menu-link.active > img { opacity: 1; filter: none; }
.side-menu-help-icon { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgb(var(--accent-rgb) / 45%); border-radius: 50%; color: var(--gold-strong); font-family: serif; font-size: 1.05rem; }
.side-menu-link.expedition-locked { opacity: .42; cursor: not-allowed; filter: grayscale(1); }
.pwa-install-button[hidden] { display: none; }
body.side-menu-open { overflow: hidden; }
@keyframes side-menu-in { from { opacity: .7; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } }
@keyframes side-menu-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.pwa-install-banner { position: relative; z-index: 1; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 13px; width: min(620px, calc(100% - 24px)); margin: 10px auto 0; padding: 14px 15px; overflow: hidden; border: 1px solid rgb(111 194 220 / 45%); border-radius: 15px; background: radial-gradient(circle at 12% 15%, rgb(77 182 223 / 19%), transparent 37%), linear-gradient(145deg, rgb(16 29 40 / 97%), rgb(8 13 19 / 98%) 68%, rgb(22 20 15 / 98%)); box-shadow: 0 20px 55px rgb(0 0 0 / 62%), inset 0 1px rgb(255 255 255 / 10%); backdrop-filter: blur(16px); animation: pwa-install-banner-in 360ms cubic-bezier(.2, .8, .25, 1) both; }
.pwa-install-banner::before { position: absolute; top: 0; right: 9%; left: 9%; height: 1px; background: linear-gradient(90deg, transparent, rgb(115 218 248 / 75%), #e4c979, transparent); content: ""; }
.pwa-install-banner[hidden] { display: none; }
.pwa-install-banner-icon { position: relative; display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgb(119 211 239 / 44%); border-radius: 14px; background: linear-gradient(145deg, rgb(35 78 99 / 78%), rgb(13 25 34 / 92%)); box-shadow: 0 0 0 4px rgb(93 195 225 / 7%), 0 10px 24px rgb(0 0 0 / 35%); }
.pwa-install-banner-icon::after { position: absolute; inset: -10px; border-radius: 20px; background: radial-gradient(circle, rgb(87 206 238 / 17%), transparent 68%); content: ""; pointer-events: none; }
.pwa-install-banner-icon img { position: relative; z-index: 1; width: 45px; height: 45px; border-radius: 11px; object-fit: cover; }
.pwa-install-banner-copy { display: grid; min-width: 0; gap: 2px; padding-right: 16px; }
.pwa-install-banner-copy > span { color: #8fd8ed; font-size: .52rem; font-weight: 800; letter-spacing: .17em; }
.pwa-install-banner-copy > strong { color: #fff1c8; font-family: "Yu Mincho", serif; font-size: .94rem; line-height: 1.35; }
.pwa-install-banner-copy > p { margin: 1px 0 0; color: #b9c8ce; font-size: .63rem; line-height: 1.45; }
.pwa-install-banner-benefits { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.pwa-install-banner-benefits b { padding: 2px 6px; border: 1px solid rgb(115 204 229 / 23%); border-radius: 99px; background: rgb(95 188 216 / 8%); color: #b8dce7; font-size: .5rem; font-weight: 700; }
.pwa-install-banner-actions { display: grid; gap: 5px; min-width: 116px; }
.pwa-install-banner-primary { min-height: 40px; padding: 7px 13px; border: 1px solid #d7bd72; border-radius: 8px; background: linear-gradient(145deg, #b9994c, #80662f); box-shadow: inset 0 1px rgb(255 255 255 / 22%), 0 7px 18px rgb(0 0 0 / 30%); color: #100f0c; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.pwa-install-banner-later { min-height: 27px; padding: 3px 8px; border: 0; background: transparent; color: #94a7ae; font-size: .58rem; }
.pwa-install-banner-close { position: absolute; z-index: 2; top: 6px; right: 7px; display: grid; width: 25px; height: 25px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #84979f; font-size: 1rem; line-height: 1; }
.pwa-install-banner-primary:focus-visible, .pwa-install-banner-later:focus-visible, .pwa-install-banner-close:focus-visible { outline: 2px solid #9ce2f4; outline-offset: 2px; }
body.battle-active .pwa-install-banner { display: none; }
@keyframes pwa-install-banner-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.pwa-install-guide { position: fixed; inset: 0; z-index: 760; display: grid; align-items: end; justify-items: center; padding: 20px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.pwa-install-guide[hidden] { display: none; }
.pwa-install-guide-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgb(0 0 0 / 72%); cursor: default; }
.pwa-install-guide-dialog { position: relative; z-index: 1; width: min(100%, 420px); padding: 24px; border: 1px solid rgb(var(--accent-rgb) / 42%); border-radius: 14px; background: linear-gradient(165deg, #121b24, #080d13); box-shadow: 0 24px 80px rgb(0 0 0 / 55%); }
.pwa-install-guide-dialog h2 { margin: 4px 0 12px; color: var(--gold-strong); font-size: 1.28rem; }
.pwa-install-guide-dialog > p:not(.eyebrow) { margin: 0 0 20px; color: #c2cbd3; font-size: .86rem; line-height: 1.75; }
.pwa-install-guide-dialog .primary-button { width: 100%; min-height: 46px; }
body.pwa-install-guide-open { overflow: hidden; }
.header-stat { display: grid; min-width: 0; line-height: 1; }
.header-identity { display: flex; align-items: center; min-width: 0; }
.header-update-status:not([data-active]) .update-status-icon { display: none; }
.header-update-status .update-status-icon { margin-inline-start: 5px; }
.header-floor { align-content: center; gap: 3px; }
.header-player-name { min-width: 0; overflow: hidden; color: var(--gold-strong); font-size: .61rem; font-weight: 700; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.header-floor-line { position: relative; display: flex; min-width: 0; align-items: baseline; gap: 4px; line-height: 1.2; }
.header-caption { overflow: hidden; color: var(--muted); font-size: .54rem; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.header-stat strong { margin-top: 3px; color: var(--text); font-family: serif; font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.header-floor-line .header-caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.header-floor-line strong { min-width: 0; margin-top: 0; font-family: inherit; font-size: 10px; white-space: nowrap; }
.header-floor-line .header-record-tower { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-floor-line .header-record-floor { flex-shrink: 0; color: var(--gold-strong); }
.header-stamina { position: relative; min-width: 0; padding: 0 4px; justify-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; font: inherit; line-height: 1; text-align: center; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.header-stamina > .header-caption { position: relative; top: 1px; }
.header-stamina:hover, .header-stamina:focus-visible, .header-stamina[aria-expanded="true"] { border-color: rgb(var(--abyss-crystal-rgb) / 25%); background: rgb(var(--abyss-crystal-rgb) / 8%); box-shadow: inset 0 1px rgb(255 255 255 / 4%); outline: none; }
.header-stamina:active { transform: translateY(1px); }
.header-stamina:disabled { cursor: default; opacity: .72; transform: none; }
.header-stamina.is-recoverable .header-stamina-value strong { color: #dceff4; text-shadow: 0 0 8px rgb(var(--abyss-crystal-rgb) / 18%); }
.header-stamina-value { display: flex; align-items: center; gap: 3px; }
.header-resource-icon { display: block; width: 16px; height: 16px; object-fit: contain; }
.stamina-timer { color: var(--muted); font-size: .54rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eyebrow { margin: 0; color: var(--gold); font-size: .68rem; letter-spacing: .12em; }
.wallet { display: grid; min-width: 0; align-content: center; justify-items: end; gap: 0; color: var(--muted); }
.currency { display: flex; min-width: 0; min-height: 18px; align-items: center; gap: 3px; }
.currency strong { overflow: hidden; color: var(--text); font-size: .72rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.crystal-balance-button { min-height: 18px; padding: 0 3px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.crystal-balance-button:hover, .crystal-balance-button:focus-visible { background: rgb(133 204 236 / 10%); }
.currency-icon { display: block; flex: 0 0 auto; width: 16px; height: 16px; object-fit: contain; }
.inline-resource-icon { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 4px; object-fit: contain; vertical-align: -.18em; }
.ui-icon { display: inline-block; width: 1.2em; height: 1.2em; object-fit: contain; vertical-align: -.22em; }
.heading-with-icon { display: inline-flex; align-items: center; gap: .38em; }
.heading-icon { display: block; flex: 0 0 auto; width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 32%)); }
.inline-heading-icon { display: block; flex: 0 0 auto; width: 19px; height: 19px; object-fit: contain; }
.button-icon { display: inline-block; width: 18px; height: 18px; margin-right: 5px; object-fit: contain; vertical-align: -.27em; }
.state-icon { display: block; flex: 0 0 auto; width: 15px; height: 15px; object-fit: contain; }
.tag-icon { display: block; flex: 0 0 auto; width: 18px; height: 18px; margin-right: 3px; object-fit: contain; }
.floor-title-icon { display: block; flex: 0 0 auto; width: 19px; height: 19px; object-fit: contain; }
.floor-status-icon { display: block; width: 13px; height: 13px; margin-right: 3px; object-fit: contain; }
.rest-title-icon { display: inline-block; width: .92em; height: .92em; margin-right: .12em; object-fit: contain; vertical-align: -.14em; filter: drop-shadow(0 5px 8px rgb(0 0 0 / 45%)); }
.notification-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 6px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.notification-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-button > img { display: block; width: 20px; height: 20px; object-fit: contain; }
.notification-button[aria-expanded="true"] { background: var(--surface-2); color: var(--gold-strong); }
.notification-panel { position: absolute; z-index: 60; top: calc(100% - 1px); right: max(8px, env(safe-area-inset-right)); width: min(280px, calc(100vw - 16px)); padding: 12px; border: 1px solid var(--line); border-radius: 0 0 9px 9px; background: rgb(var(--panel-start-rgb) / 98%); box-shadow: var(--shadow); }
.notification-panel p { margin-bottom: 9px; }
.notification-button.has-icon-design-unread { overflow: visible; }
.notification-button.has-icon-design-unread::after { position: absolute; top: 2px; right: 1px; bottom: auto; left: auto; width: 10px; height: 10px; aspect-ratio: auto; border: 2px solid #101316; border-radius: 50%; background: #ff4038; content: ""; opacity: 1; transform: none; animation: none; box-shadow: 0 0 0 1px rgb(255 100 91 / 38%), 0 2px 5px rgb(0 0 0 / 58%); }
.notification-button { position: relative; }
.icon-design-notification-entry { display: grid; width: 100%; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 10px; padding: 9px; border: 1px solid rgb(190 151 86 / 38%); border-radius: 7px; background: rgb(78 54 28 / 24%); color: var(--text); cursor: pointer; text-align: left; }
.icon-design-notification-entry > span:nth-child(2) { display: grid; gap: 2px; }
.icon-design-notification-entry strong { color: var(--gold-strong); font-size: .72rem; }
.icon-design-notification-entry small { color: #c9b9ad; font-size: .61rem; }
.icon-design-notification-entry > i { color: var(--gold); font-style: normal; }
.arena-rank-drop-notification { min-height: 44px; overflow-wrap: anywhere; }
.arena-rank-drop-notification strong { font-size: var(--ga-font-body, .875rem); }
.arena-rank-drop-notification small { font-size: var(--ga-font-note, .75rem); }
.notification-panel:has(.arena-rank-drop-notification) { max-height: calc(100dvh - var(--app-header-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px); overflow-y: auto; }
.icon-design-notification-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #5c342c; color: #ffe0d7; font-size: .82rem; }
.login-reward-notice { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.login-reward-notice img { width: 30px; height: 30px; object-fit: contain; }
.login-reward-notice span { display: grid; gap: 2px; min-width: 0; }
.login-reward-notice strong { font-size: .72rem; }
.login-reward-notice small { color: var(--muted); font-size: .61rem; }
.login-board-overlay { position: fixed; z-index: 220; inset: 0; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); background: rgb(5 8 11 / 83%); backdrop-filter: blur(5px); }
.login-board-overlay[hidden] { display: none; }
body.login-board-open { overflow: hidden; }
.login-board-dialog { width: min(580px, 100%); padding: 16px; border: 1px solid var(--accent-border-strong); border-radius: 13px; background: linear-gradient(160deg, rgb(var(--panel-start-rgb) / 99%), rgb(var(--panel-end-rgb) / 99%)); box-shadow: 0 25px 70px rgb(0 0 0 / 60%); outline: none; }
.login-board-top { position: relative; display: flex; align-items: center; justify-content: center; min-height: 68px; margin-bottom: 6px; }
.login-board-brand { display: block; width: min(220px, 55vw); height: 68px; object-fit: contain; }
.login-board-top .login-board-close { position: absolute; top: 0; right: 0; }
.login-board-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.login-board-heading .eyebrow { margin: 0; }
.login-board-heading h2 { margin: 2px 0 3px; font-family: "Yu Mincho", serif; font-size: 1.35rem; }
.login-board-heading small { color: var(--muted); font-size: .68rem; }
.login-board-close { align-self: start; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 1.2rem; cursor: pointer; }
.login-board-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.login-board-cell { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0; min-height: 108px; padding: 7px 3px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--inset); text-align: center; }
.login-board-cell.current { border-color: var(--gold-strong); background: rgb(var(--accent-rgb) / 10%); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 22%); }
.login-board-cell.claimed:not(.current) { opacity: .64; }
.login-board-day { color: var(--gold-strong); font-size: .63rem; font-weight: 700; }
.login-board-cell img { width: 38px; height: 38px; object-fit: contain; }
.login-board-cell strong { max-width: 100%; color: var(--text); font-size: .65rem; line-height: 1.2; overflow-wrap: anywhere; }
.login-board-cell > small { color: var(--gold-strong); font-size: .66rem; font-weight: 700; }
.login-board-stamp { position: absolute; right: 3px; bottom: 4px; display: grid; width: 27px; height: 27px; place-items: center; border: 2px solid #d57973; border-radius: 50%; background: rgb(49 19 17 / 86%); color: #ffc0b7; font-size: .8rem; font-weight: 900; transform: rotate(-13deg); }
.login-board-cell.just-claimed .login-board-stamp { animation: login-board-stamp 420ms cubic-bezier(.2, 1.6, .42, 1) both; }
.login-board-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.login-board-footer span { color: var(--muted); font-size: .75rem; line-height: 1.4; }
.login-board-footer button { flex: 0 0 auto; min-height: 44px; }
@keyframes login-board-stamp { from { opacity: 0; transform: scale(2.2) rotate(-26deg); } 65% { opacity: 1; transform: scale(.8) rotate(-13deg); } to { transform: scale(1) rotate(-13deg); } }
@media (max-width: 440px) {
  .login-board-dialog { padding: 12px; }
  .login-board-top { min-height: 54px; margin-bottom: 4px; }
  .login-board-brand { width: min(170px, 48vw); height: 54px; }
  .login-board-grid { gap: 4px; }
  .login-board-cell { min-height: 91px; padding: 5px 2px; }
  .login-board-cell img { width: 30px; height: 30px; }
  .login-board-cell strong { font-size: .68rem; }
  .login-board-day, .login-board-cell > small { font-size: .68rem; }
  .login-board-stamp { width: 22px; height: 22px; font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) { .login-board-cell.just-claimed .login-board-stamp { animation: none; } }
.account-menu { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: .66rem; }
.account-menu button { min-height: 24px; padding: 2px 5px; font-size: .64rem; }
.chat-backdrop { position: fixed; z-index: 109; inset: 0; background: rgb(0 0 0 / var(--chat-backdrop-alpha)); opacity: 0; visibility: hidden; pointer-events: none; backdrop-filter: blur(var(--chat-backdrop-blur)); transition: opacity 180ms ease, visibility 180ms ease, background 180ms ease; }
.chat-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }
.global-chat { position: fixed; z-index: 110; right: max(16px, env(safe-area-inset-right)); bottom: 16px; width: min(360px, calc(100vw - 32px)); filter: none; }
.chat-peek { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid rgb(192 164 102 / 38%); border-radius: 50%; background: linear-gradient(145deg, rgb(var(--panel-end-rgb) / 96%), rgb(var(--chrome-rgb) / 98%)); color: var(--text); cursor: pointer; touch-action: none; user-select: none; -webkit-touch-callout: none; box-shadow: inset 0 1px rgb(255 255 255 / 6%), 0 0 16px rgb(var(--abyss-crystal-rgb) / 6%); }
.chat-peek-icon { display: block; width: 28px; height: 28px; object-fit: contain; pointer-events: none; }
/* A draggable control must stay under the pointer during the common press effect. */
#chat-peek { overflow: visible; transform: none; animation: none; }
#chat-peek::after { display: none; }
.chat-peek.is-positioning { cursor: grabbing; outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.chat-peek:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.chat-peek .chat-unread { position: absolute; top: -5px; right: -5px; }
body.chat-open .chat-peek { visibility: hidden; pointer-events: none; }
.chat-preview { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-preview strong { color: var(--text); font-weight: 600; }
.chat-unread { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--red); color: white; font-size: .62rem; font-weight: 700; }
html[data-chat-preview="hidden"] .chat-preview { display: none; }
.chat-drawer { position: fixed; z-index: 46; top: calc(var(--app-header-height) + 12px); right: max(16px, env(safe-area-inset-right)); bottom: 16px; display: flex; flex-direction: column; isolation: isolate; width: min(390px, calc(100vw - 32px)); overflow: hidden; border: 1px solid rgb(197 169 104 / 52%); border-radius: 13px; background: radial-gradient(circle at 8% 3%, rgb(var(--abyss-crystal-rgb) / 12%), transparent 24%), radial-gradient(circle at 96% 33%, rgb(var(--abyss-violet-rgb) / 10%), transparent 29%), rgb(var(--chrome-rgb) / var(--chat-shell-alpha)); box-shadow: -18px 0 46px rgb(0 0 0 / 53%), 0 0 28px rgb(var(--abyss-crystal-rgb) / 7%), inset 0 1px rgb(255 255 255 / 9%); backdrop-filter: blur(var(--chat-shell-blur)) saturate(1.08); transform: translateX(calc(100% + max(20px, env(safe-area-inset-right)))); visibility: hidden; pointer-events: none; transition: transform 190ms ease, visibility 190ms ease, background 180ms ease, backdrop-filter 180ms ease; }
.chat-drawer::before { position: absolute; z-index: -1; inset: 6px; border: 1px solid rgb(211 227 231 / 6%); border-radius: 8px; background: repeating-linear-gradient(124deg, transparent 0 48px, rgb(var(--abyss-crystal-rgb) / 2%) 49px, transparent 50px 96px); content: ""; pointer-events: none; }
.chat-drawer.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.chat-drawer-header { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; border-bottom: 1px solid rgb(197 169 104 / 30%); background: linear-gradient(105deg, rgb(42 32 46 / var(--chat-surface-alpha)), rgb(18 27 35 / var(--chat-surface-alpha)) 56%, rgb(14 19 27 / var(--chat-surface-alpha))); box-shadow: inset 0 -1px rgb(var(--abyss-crystal-rgb) / 7%); }
.chat-drawer-title { display: flex !important; min-width: 0; align-items: center; gap: 9px; line-height: 1.15; }
.chat-drawer-title > div { display: grid; min-width: 0; gap: 1px; }
.chat-drawer-title > div > span, .chat-drawer-title small { display: none; }
.chat-drawer-title strong { font-size: var(--ga-font-note, .75rem); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.chat-mechanism-mark { position: relative; display: none; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 1px solid rgb(var(--abyss-crystal-rgb) / 35%); border-radius: 50%; background: radial-gradient(circle, rgb(var(--abyss-crystal-rgb) / 21%), rgb(var(--abyss-violet-rgb) / 9%) 53%, transparent 56%); box-shadow: 0 0 0 3px rgb(var(--abyss-crystal-rgb) / 4%), inset 0 0 11px rgb(var(--abyss-crystal-rgb) / 11%); }
.chat-mechanism-mark::before { position: absolute; inset: 4px; border: 1px dashed rgb(var(--abyss-crystal-rgb) / 34%); border-radius: 50%; content: ""; }
.chat-mechanism-gear { width: 33px; height: 33px; object-fit: contain; opacity: .78; filter: grayscale(.35) sepia(.18) drop-shadow(0 0 5px rgb(var(--abyss-crystal-rgb) / 24%)); }
.chat-mechanism-crystal { position: absolute; width: 13px; height: 13px; object-fit: contain; filter: drop-shadow(0 0 4px rgb(var(--abyss-crystal-rgb) / 68%)); }
.chat-drawer-actions { display: flex !important; align-items: center; gap: 3px; }
.chat-drawer-header button { min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.chat-drawer-actions .chat-drawer-control { width: auto; border: 1px solid transparent; border-radius: 6px; color: #c7c4b5; font-size: var(--ga-font-note, .75rem); letter-spacing: 0; }
.chat-drawer-actions .chat-drawer-control:hover, .chat-drawer-actions .chat-drawer-control:focus-visible, .chat-drawer-actions .chat-drawer-control[aria-expanded="true"] { border-color: rgb(var(--abyss-crystal-rgb) / 28%); background: rgb(var(--abyss-crystal-rgb) / 7%); color: #dff9ff; }
.chat-drawer-actions .chat-drawer-close { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 1.15rem; line-height: 1; }
.chat-appearance { position: relative; flex: 0 0 auto; padding: 9px 10px 10px; border-bottom: 1px solid rgb(var(--abyss-crystal-rgb) / 15%); background: linear-gradient(90deg, rgb(var(--abyss-violet-rgb) / 10%), rgb(var(--abyss-crystal-rgb) / 5%), rgb(0 0 0 / 8%)); }
.chat-appearance[hidden] { display: none; }
.chat-appearance-copy { display: grid; gap: 1px; padding: 0 2px 7px; }
.chat-appearance-copy > span { color: var(--abyss-crystal); font-family: Georgia, serif; font-size: .4rem; letter-spacing: .16em; }
.chat-appearance-copy strong { color: #e4ddca; font-family: "Yu Mincho", serif; font-size: .7rem; }
.chat-appearance-copy small { color: #9b9d9a; font-size: .52rem; line-height: 1.4; }
.chat-appearance-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 3px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 7px; background: rgb(2 8 12 / 30%); }
.chat-appearance-choices button { min-width: 0; min-height: 33px; padding: 4px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #929b9f; cursor: pointer; font-size: .58rem; }
.chat-appearance-choices button.selected, .chat-appearance-choices button[aria-pressed="true"] { border-color: rgb(var(--abyss-crystal-rgb) / 42%); background: linear-gradient(145deg, rgb(var(--abyss-crystal-rgb) / 14%), rgb(var(--abyss-violet-rgb) / 10%)); color: #e6fbff; box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 0 10px rgb(var(--abyss-crystal-rgb) / 7%); font-weight: 700; }
.chat-world-news-setting-copy { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgb(255 255 255 / 7%); }
.chat-world-news-setting { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chat-tabs { display: grid; flex: 0 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid rgb(205 177 112 / 20%); background: rgb(5 12 18 / 45%); }
.chat-tabs button { display: flex; min-width: 0; min-height: 44px; align-items: center; justify-content: center; gap: 7px; padding: 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #8e9ca1; cursor: pointer; font: inherit; font-size: .72rem; letter-spacing: .04em; }
.chat-tabs button[aria-selected="true"] { border-bottom-color: var(--abyss-crystal); background: linear-gradient(0deg, rgb(var(--abyss-crystal-rgb) / 12%), transparent); color: #dff9ff; }
#chat-tab-news[aria-selected="true"] { border-bottom-color: #d9b966; background: linear-gradient(0deg, rgb(205 177 112 / 13%), transparent); color: #ecd18e; }
#chat-tab-news > span { color: #d9b966; font-size: .52rem; }
.chat-tabs button:focus-visible { outline: 2px solid var(--abyss-crystal); outline-offset: -4px; }
.chat-tab-unread { min-width: 18px; padding: 1px 5px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 40%); border-radius: 99px; background: #17465a; color: #e7faff; font-size: .6rem; line-height: 1.5; }
.chat-feed-panel { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; flex-direction: column; }
.chat-feed-panel .chat-messages { min-height: 0; }
.chat-news-notice { flex: 0 0 auto; margin: 0; padding: 13px 10px; border-top: 1px solid rgb(205 177 112 / 20%); background: rgb(5 12 18 / 45%); color: #aea58e; font-size: .62rem; text-align: center; }
.chat-messages { flex: 1 1 auto; min-height: 130px; padding: 14px 10px 20px; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, rgb(4 10 16 / var(--chat-feed-alpha)), rgb(8 15 22 / var(--chat-feed-alpha))), repeating-linear-gradient(90deg, transparent 0 42px, rgb(var(--abyss-crystal-rgb) / 2%) 43px, transparent 44px 86px); scrollbar-color: #615944 rgb(3 8 12 / 55%); scrollbar-gutter: stable; }
.chat-message { position: relative; display: flex; align-items: flex-start; gap: 7px; padding: 6px 0; }
.chat-message::before { position: absolute; top: 50%; width: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--abyss-crystal-rgb) / 12%)); content: ""; opacity: .7; pointer-events: none; }
.chat-message.other::before { left: 35px; }
.chat-message.own::before { right: 0; transform: scaleX(-1); }
.chat-message.own { justify-content: flex-end; }
.chat-message-avatar { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; box-shadow: none; }
.chat-message-avatar::after { content: none; }
.chat-message-avatar .actor-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; filter: none; }
.chat-message-stack { display: flex; min-width: 0; max-width: min(78%, 286px); flex-direction: column; align-items: flex-start; }
.chat-message.own .chat-message-stack { align-items: flex-end; }
.chat-message.other .chat-rank-title-line { min-height: 28px; }
.chat-message-meta { max-width: 100%; padding: 0 4px 3px; border: 0; background: transparent; color: #bfd3dc; cursor: pointer; font-size: .6rem; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; text-align: left; white-space: normal; }
.chat-message-line { display: flex; max-width: 100%; align-items: center; gap: 3px; }
.chat-message.own .chat-message-line { flex-direction: row-reverse; }
.chat-message-details { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; }
.chat-message time { color: var(--muted); font-size: .58rem; font-variant-numeric: tabular-nums; }
.chat-message-time { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0; line-height: 1.2; white-space: nowrap; }
.chat-message-edited { color: var(--muted); font-size: .52rem; white-space: nowrap; }
.chat-message-body { min-width: 38px; max-width: 100%; padding: 8px 11px; overflow: visible; border: 1px solid rgb(155 185 198 / 18%); border-radius: 13px 13px 13px 4px; background: linear-gradient(145deg, rgb(33 45 54 / 94%), rgb(22 33 42 / 94%)); color: var(--text); cursor: pointer; font: inherit; font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; text-align: left; white-space: normal; box-shadow: 0 5px 14px rgb(0 0 0 / 24%), inset 0 1px rgb(255 255 255 / 4%); }
.chat-message.own .chat-message-body { border-color: rgb(var(--abyss-crystal-rgb) / 31%); border-radius: 13px 13px 4px 13px; background: linear-gradient(145deg, rgb(31 88 110 / 94%), rgb(24 61 82 / 95%)); color: #f2fbff; box-shadow: 0 5px 14px rgb(0 0 0 / 24%), 0 0 12px rgb(var(--abyss-crystal-rgb) / 6%), inset 0 1px rgb(255 255 255 / 6%); }
.chat-message.other .chat-message-body { position: relative; border-radius: 0 13px 13px 13px; }
.chat-message.other .chat-message-body::before { position: absolute; top: -1px; left: -7px; width: 9px; height: 10px; border: 1px solid; border-color: inherit; border-right: 0; border-bottom: 0; background: inherit; transform: skewX(35deg); transform-origin: right top; content: ""; pointer-events: none; }
.chat-message.own .chat-message-body { position: relative; border-radius: 13px 0 13px 13px; }
.chat-message.own .chat-message-body::before { position: absolute; top: -1px; right: -7px; width: 9px; height: 10px; border: 1px solid; border-color: inherit; border-left: 0; border-bottom: 0; background: inherit; transform: skewX(-35deg); transform-origin: left top; content: ""; pointer-events: none; }
.chat-message-body.expanded { overflow: visible; white-space: normal; }
.chat-message-body:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chat-message-menu-button { flex: 0 0 26px; width: 26px; min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: .72rem; }
.chat-message-menu-button[aria-expanded="true"] { color: var(--abyss-crystal); }
.chat-message-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 5px; }
.chat-message-actions button { min-height: 32px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: #d3d0c0; cursor: pointer; font-size: .64rem; }
.chat-world-news { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; padding: 0 8px; }
.chat-world-news + .chat-world-news { border-top: 1px solid rgb(255 255 255 / 10%); }
.chat-world-news-meta { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.chat-world-news-meta time { color: var(--muted); font-size: var(--ga-font-caption, .6875rem); font-variant-numeric: tabular-nums; }
.chat-world-news p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; margin: 0; padding-block: 4px; overflow-wrap: anywhere; color: #d9d8cf; font-size: .66rem; line-height: 1.55; }
.chat-world-news p strong { color: #f0d889; font-size: .71rem; }
.chat-world-news-actor, .chat-world-news-item { min-height: 28px; padding: 1px 3px; border: 0; border-bottom: 1px dotted currentColor; background: transparent; color: #d9f5fb; cursor: pointer; font: inherit; font-weight: 700; }
.chat-world-news-actor:hover, .chat-world-news-actor:focus-visible, .chat-world-news-item:hover, .chat-world-news-item:focus-visible { color: #fff; outline: 1px solid rgb(var(--abyss-crystal-rgb) / 42%); outline-offset: 1px; }
.chat-world-news-equipment p strong { color: #e4caff; }
.chat-world-news-item { color: #dcbfff; }
.chat-world-news-details { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; padding-block: 4px; border-top: 1px dashed rgb(255 255 255 / 10%); }
.chat-world-news-details span { padding: 3px 6px; border: 1px solid rgb(191 154 230 / 22%); border-radius: 99px; background: rgb(6 12 18 / 35%); color: #c9c4d1; font-size: .54rem; }
.chat-mute-manager { padding: 10px; }
.chat-mute-manager h3 { margin: 10px 0; font-size: .86rem; }
.chat-muted-user { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: .74rem; }
.chat-muted-user button { min-height: 34px; padding: 4px 10px; }
.chat-safety-backdrop { position: fixed; z-index: 230; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 82%); backdrop-filter: blur(4px); }
.chat-safety-dialog { width: min(430px, 100%); max-height: calc(100dvh - 32px); padding: 17px; overflow-y: auto; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--dialog); box-shadow: var(--shadow); }
.chat-safety-dialog h2 { margin: 0 0 11px; font-size: 1.02rem; }
.chat-safety-dialog blockquote { margin: 0 0 11px; padding: 9px 10px; border-left: 2px solid var(--gold); background: var(--surface-deep); color: var(--text); font-size: .7rem; line-height: 1.5; overflow-wrap: anywhere; }
.chat-safety-dialog label { display: block; margin-bottom: 5px; color: var(--muted); font-size: .7rem; }
.chat-safety-dialog textarea { box-sizing: border-box; width: 100%; min-height: 100px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-deep); color: var(--text); font: inherit; font-size: .8rem; resize: vertical; }
.chat-safety-actions, .chat-report-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.chat-report-reasons { grid-template-columns: 1fr; }
.chat-safety-dialog > .text-button { width: 100%; margin-top: 8px; }
.chat-moderation-list { display: grid; gap: 10px; margin-top: 14px; }
.chat-moderation-card { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.chat-moderation-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-moderation-card header strong { color: #e4c270; font-size: .78rem; }
.chat-moderation-card time, .chat-moderation-author { color: var(--muted); font-size: .66rem; }
.chat-moderation-author { margin: 7px 0 4px; }
.chat-moderation-card blockquote { margin: 0; padding: 9px 10px; border-left: 2px solid #a86868; background: var(--surface-deep); color: #ddd8c8; font-size: .72rem; line-height: 1.55; overflow-wrap: anywhere; }
.chat-moderation-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.chat-empty { display: grid; min-height: 130px; place-items: center; margin: 0; color: var(--muted); font-size: .72rem; text-align: center; }
.chat-form { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 9px; border-top: 1px solid rgb(197 169 104 / 27%); background: linear-gradient(90deg, rgb(27 23 31 / var(--chat-surface-alpha)), rgb(14 22 29 / var(--chat-surface-alpha))); box-shadow: inset 0 1px rgb(var(--abyss-crystal-rgb) / 5%); }
.chat-form input { min-height: 42px; border-color: rgb(var(--abyss-crystal-rgb) / 17%); background: rgb(4 10 15 / 55%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%); }
.chat-form input:focus { border-color: rgb(var(--abyss-crystal-rgb) / 48%); box-shadow: 0 0 0 2px rgb(var(--abyss-crystal-rgb) / 8%); }
.chat-form button { min-width: 62px; min-height: 42px; padding: 6px 10px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 36%); border-radius: 6px; background: linear-gradient(145deg, #356c7e, #294f63); color: #f1fbff; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px rgb(255 255 255 / 8%), 0 0 12px rgb(var(--abyss-crystal-rgb) / 6%); }
.chat-form button:disabled { opacity: .45; }
.navigation { position: sticky; top: var(--app-header-height); z-index: 20; display: grid; grid-template-columns: repeat(6, 1fr); max-width: 980px; margin: 0 auto; background: rgb(var(--chrome-rgb) / 96%); border-bottom: 1px solid var(--line); }
.navigation button { min-height: 48px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: .82rem; cursor: pointer; }
.navigation button { min-width: 0; }
.navigation button.active { color: var(--gold-strong); border-bottom-color: var(--gold); }
.navigation button.expedition-locked { opacity: .42; color: var(--muted); cursor: not-allowed; filter: grayscale(1); }
.nav-icon, .nav-label-mobile { display: none; }
.nav-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nav-icon-svg svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-nav-button.chat-open { color: var(--gold-strong); border-bottom-color: var(--gold); }
main { width: min(980px, 100%); margin: 0 auto; padding: 20px 18px 100px; }
h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 6px; font-family: "Yu Mincho", serif; font-size: 1.3rem; letter-spacing: .06em; }
h3 { font-size: .95rem; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-heading p { margin: 0; }
.panel { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(150deg, rgb(var(--panel-start-rgb) / 96%), rgb(var(--panel-end-rgb) / 96%)); box-shadow: var(--shadow); }
.panel + .panel, .panel + section, section + .panel { margin-top: 16px; }
.hero-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; min-height: 150px; }
.hero-panel::after { content: "VI"; position: absolute; right: 22px; top: -28px; color: rgb(var(--accent-rgb) / 8%); font-family: serif; font-size: 9rem; pointer-events: none; }
.floor-number { position: relative; z-index: 1; color: var(--gold-strong); font-family: serif; font-size: clamp(2.5rem, 14vw, 5rem); line-height: .9; text-align: right; }
.floor-number small { display: block; margin-top: 8px; color: var(--muted); font: .7rem sans-serif; letter-spacing: .08em; }
.home-screen { display: grid; gap: 12px; }
.home-party-stage { --party-offset: clamp(105px, 20vw, 200px); position: relative; isolation: isolate; height: 262px; overflow: hidden; border: 1px solid #4c5f73; border-radius: 13px; background: linear-gradient(0deg, rgb(3 8 14 / 90%), transparent 52%), linear-gradient(90deg, rgb(3 8 14 / 55%), rgb(3 8 14 / 16%) 50%, rgb(3 8 14 / 55%)), url("/images/background/home-rest-point-v3.webp") 50% 67% / cover no-repeat; box-shadow: 0 18px 48px rgb(0 0 0 / 40%); touch-action: pan-y; }
.home-party-stage::before { content: ""; position: absolute; z-index: 0; right: 12%; bottom: 28px; left: 12%; height: 65px; border-radius: 50%; background: radial-gradient(ellipse, rgb(238 143 56 / 23%), transparent 70%); filter: blur(13px); pointer-events: none; }
.home-party-heading { position: absolute; z-index: 4; top: 15px; left: 18px; display: grid; gap: 2px; text-shadow: 0 2px 8px #000; }
.home-party-heading .eyebrow { color: #dbbf82; }
.home-party-heading strong { color: #f4ead4; font-family: "Yu Mincho", serif; font-size: 1.04rem; letter-spacing: .08em; }
.home-party-member { position: absolute; bottom: 44px; left: 50%; display: grid; width: 156px; height: 180px; place-items: end center; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; transition: transform 300ms ease, opacity 300ms ease, filter 300ms ease; }
.home-party-member::after { content: ""; position: absolute; z-index: -1; bottom: 3px; width: 70%; height: 13px; border-radius: 50%; background: rgb(0 0 0 / 64%); filter: blur(5px); }
.home-party-member .actor-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px rgb(0 0 0 / 75%)); pointer-events: none; }
.home-party-member.position-center { --party-transform: translateX(-50%) scale(1); z-index: 3; transform: var(--party-transform); }
.home-party-member.position-left { --party-transform: translateX(calc(-50% - var(--party-offset))) translateY(11px) scale(.77); z-index: 2; opacity: .83; transform: var(--party-transform); }
.home-party-member.position-right { --party-transform: translateX(calc(-50% + var(--party-offset))) translateY(11px) scale(.77); z-index: 2; opacity: .83; transform: var(--party-transform); }
.home-party-stage button.home-party-member:active, .home-party-stage button.home-party-member.button-pressing { transform: var(--party-transform); filter: brightness(1.1); box-shadow: none; border-color: transparent; }
.home-party-member:focus-visible, .home-party-arrow:focus-visible { outline: 2px solid #f4d48a; outline-offset: 2px; }
.home-party-arrow { position: absolute; z-index: 4; top: 43%; display: grid; width: 38px; height: 44px; place-items: center; padding: 0; border: 1px solid rgb(225 206 160 / 30%); border-radius: 8px; background: rgb(7 14 21 / 75%); color: #f1e6cb; font-size: 1.8rem; line-height: 1; }
.home-party-arrow-left { left: 12px; }
.home-party-arrow-right { right: 12px; }
.home-party-caption { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; display: flex; min-height: 41px; align-items: center; justify-content: center; gap: 9px; padding: 6px 12px; background: linear-gradient(90deg, rgb(5 12 18 / 70%), rgb(5 12 18 / 94%) 40%, rgb(5 12 18 / 70%)); color: #e9e1d1; font-size: .7rem; }
.home-party-caption strong { font-size: .86rem; }
.home-party-caption .home-party-role { color: #9dd1e8; }
.home-party-caption small { position: absolute; right: 14px; color: #b9b7ac; font-size: .6rem; }
.home-hero { position: relative; display: block; padding: 12px 18px; overflow: hidden; border: 1px solid #4c5f73; border-radius: 10px; background: linear-gradient(125deg, rgb(18 32 45 / 96%), rgb(10 15 22 / 98%)); box-shadow: 0 8px 25px rgb(0 0 0 / 29%); }
.home-command-panel { width: 100%; max-width: 760px; margin: 0 auto; }
.home-hero-copy { position: relative; z-index: 1; align-self: center; min-width: 0; text-shadow: 0 2px 8px rgb(0 0 0 / 92%); }
.home-action-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-bottom: 12px; }
.home-action-heading > span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgb(200 168 96 / 35%); border-radius: 50%; background: rgb(5 10 16 / 64%); }
.home-action-icon { display: block; width: 29px; height: 29px; object-fit: contain; }
.home-action-heading p { margin: 0; }
.home-action-heading strong { display: block; margin-top: 2px; color: #f1e7d2; font-family: "Yu Mincho", serif; font-size: .94rem; font-weight: 500; letter-spacing: .05em; }
.home-action-heading > b { font-size: .6rem; }
.home-hero-copy h1 { min-width: 0; margin: 0 0 4px; overflow: hidden; color: #9fd6fa; font-family: "Yu Mincho", serif; font-size: clamp(1.25rem, 3.2vw, 1.72rem); font-weight: 500; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.home-hero-copy > p:not(.home-alert) { margin: 0 0 13px; color: #c6ced7; font-size: .74rem; line-height: 1.6; }
.home-alert { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 9px; color: #e8b09f; font-size: .67rem; }
.home-hero-actions { display: flex; gap: 8px; }
.home-hero-actions button { display: inline-flex; min-width: 0; min-height: 43px; align-items: center; justify-content: center; padding: 7px 17px; text-shadow: none; }
.home-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-overview-card { display: flex; min-width: 0; min-height: 210px; flex-direction: column; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(150deg, rgb(var(--panel-start-rgb) / 95%), rgb(var(--panel-end-rgb) / 95%)); box-shadow: var(--shadow); }
.home-exploration-card { border-color: rgb(61 130 180 / 58%); background: linear-gradient(145deg, rgb(8 29 47 / 94%), rgb(8 16 27 / 96%)); }
.home-arena-card { border-color: rgb(145 92 72 / 55%); background: linear-gradient(145deg, rgb(42 22 25 / 93%), rgb(18 14 20 / 97%)); }
.home-loadout-card { border-color: rgb(56 135 130 / 51%); background: linear-gradient(145deg, rgb(8 37 39 / 91%), rgb(8 18 24 / 97%)); }
.home-status-card { border-color: rgb(91 105 151 / 55%); background: linear-gradient(145deg, rgb(19 28 49 / 93%), rgb(10 16 28 / 97%)); }
.home-card-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-bottom: 13px; }
.home-card-heading > span:first-child { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgb(255 255 255 / 7%); border-radius: 50%; background: rgb(255 255 255 / 5%); }
.home-card-heading > span > img, .home-card-icon { display: block; width: 29px; height: 29px; object-fit: contain; }
.home-card-heading p, .home-card-heading h2 { margin: 0; }
.home-card-heading h2 { margin-top: 2px; font-size: 1.08rem; }
.home-card-heading > b { color: var(--gold-strong); font-size: .64rem; font-weight: 600; white-space: nowrap; }
.home-floor-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: 7px 0 12px; }
.home-progress-meter, .arena-unlock-track { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 99px; -webkit-appearance: none; appearance: none; background: var(--surface-deep); }
.home-progress-meter::-webkit-progress-bar, .arena-unlock-track::-webkit-progress-bar { border-radius: inherit; background: var(--surface-deep); }
.home-floor-meter { height: 7px; }
.home-floor-meter::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, #876826, var(--gold-strong)); }
.home-floor-meter::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, #876826, var(--gold-strong)); }
.home-floor-progress small { color: var(--muted); font-size: .6rem; font-variant-numeric: tabular-nums; }
.home-detail-list { display: grid; gap: 7px; margin: 0 0 13px; }
.home-detail-list > div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid rgb(255 255 255 / 6%); }
.home-detail-list dt { color: var(--muted); font-size: .65rem; }
.home-detail-list dd { min-width: 0; margin: 0; overflow: hidden; color: #e6e2d3; font-size: .69rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.home-card-link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; margin-top: auto; padding: 7px 10px; border: 1px solid rgb(138 166 191 / 28%); border-radius: 6px; background: rgb(0 0 0 / 17%); color: #dedfe2; cursor: pointer; font-size: .7rem; text-align: left; }
.home-card-link span { color: var(--gold); font-size: 1rem; }
.home-arena-ratings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 11px; }
.home-arena-ratings > div { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid rgb(var(--accent-rgb) / 18%); border-radius: 7px; background: rgb(0 0 0 / 13%); }
.home-arena-ratings span { color: var(--muted); font-size: .58rem; }
.home-arena-ratings strong { color: var(--gold-strong); font-family: serif; font-size: 1.22rem; font-variant-numeric: tabular-nums; }
.home-loadout-body { display: grid; gap: 11px; }
.home-equipped-icons { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.home-equipped-icons > span { display: grid; min-width: 0; aspect-ratio: 1; place-items: center; border: 1px solid rgb(255 255 255 / 9%); border-radius: 7px; background: rgb(0 0 0 / 18%); }
.home-equipped-icons > span.equipped { border-color: rgb(var(--party-color-rgb, 95 135 173) / 65%); box-shadow: inset 0 0 12px rgb(var(--party-color-rgb, 95 135 173) / 12%); }
.home-equipped-icons > span.empty { opacity: .42; filter: grayscale(1); }
.home-part-icon { display: block; width: min(72%, 34px); height: min(72%, 34px); object-fit: contain; }
.home-storage-summary { padding: 8px 9px; border: 1px solid rgb(255 255 255 / 6%); border-radius: 6px; }
.home-storage-summary > div:first-child { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .62rem; }
.home-storage-summary strong { color: #e8e3d3; }
.home-storage-meter { height: 6px; margin: 6px 0 4px; }
.home-storage-meter::-webkit-progress-value { border-radius: inherit; background: var(--gold); }
.home-storage-meter::-moz-progress-bar { border-radius: inherit; background: var(--gold); }
.home-storage-summary small { color: var(--muted); font-size: .56rem; }
.home-status-list { display: grid; margin-bottom: 11px; }
.home-status-list > div { display: grid; grid-template-columns: 8px auto minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; padding: 7px 2px; border-bottom: 1px solid rgb(255 255 255 / 6%); }
.home-status-list i { width: 7px; height: 7px; border-radius: 50%; background: #66707d; box-shadow: 0 0 8px currentcolor; }
.home-status-list i.green { color: #70c990; background: currentcolor; }
.home-status-list i.blue { color: #65aeea; background: currentcolor; }
.home-status-list i.gold { color: #d4aa55; background: currentcolor; }
.home-status-list i.muted { color: #69717b; background: currentcolor; }
.home-status-list span { color: #8995a3; font-size: .57rem; white-space: nowrap; }
.home-status-list strong { min-width: 0; overflow: hidden; color: #d8dde3; font-size: .64rem; font-weight: 500; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.explore-rest-screen { display: grid; gap: 14px; }
.rest-hero { position: relative; isolation: isolate; min-height: 460px; overflow: hidden; padding: 30px 34px 26px; border: 1px solid #55472d; border-radius: 12px; background-image: linear-gradient(90deg, rgb(7 10 13 / 94%) 0%, rgb(7 10 13 / 73%) 43%, rgb(7 10 13 / 14%) 74%), linear-gradient(0deg, rgb(5 7 8 / 72%) 0%, transparent 45%), url("/images/background/rest-point-v1.webp"); background-position: center 66%; background-size: cover; box-shadow: 0 20px 55px rgb(0 0 0 / 45%), inset 0 0 80px rgb(0 0 0 / 30%); }
.rest-hero::before, .rest-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.rest-hero::before { inset: 12px; border: 1px solid rgb(218 185 113 / 20%); border-radius: 5px; }
.rest-hero::after { left: 34px; bottom: 22px; width: 98px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.rest-hero-copy { display: flex; flex-direction: column; align-items: flex-start; width: min(54%, 520px); min-height: 404px; }
.rest-overline { margin: 0 0 4px; color: var(--gold-strong); font-family: "Yu Mincho", serif; font-size: .68rem; letter-spacing: .26em; text-shadow: 0 2px 7px #000; }
.rest-title { margin: 0; color: #fff7df; font-family: "Yu Mincho", serif; font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 500; line-height: 1.08; letter-spacing: .06em; text-shadow: 0 3px 12px #000; }
.rest-title strong { color: #ffe5a2; font-size: 1.14em; font-weight: 500; }
.rest-lead { margin: 10px 0 0; color: #c9cbd0; font-family: "Yu Mincho", serif; font-size: .88rem; letter-spacing: .1em; text-shadow: 0 2px 8px #000; }
.rest-divider { width: min(300px, 100%); height: 1px; margin: 17px 0; background: linear-gradient(90deg, rgb(228 198 128 / 80%), rgb(228 198 128 / 8%)); }
.rest-description { margin: 0; color: #eeede7; font-family: "Yu Mincho", serif; font-size: .9rem; line-height: 1.85; text-shadow: 0 2px 8px #000; }
.rest-quote { margin: 14px 0 0 16px; color: #cbc9c1; font-family: "Yu Mincho", serif; font-size: .78rem; line-height: 1.7; text-shadow: 0 2px 8px #000; }
.rest-primary-button { display: grid; width: min(330px, 100%); min-height: 66px; margin-top: auto; place-items: center; align-content: center; border-color: #d3ad55; border-radius: 8px; background: linear-gradient(180deg, #98762f, #6f531d); box-shadow: 0 5px 18px rgb(0 0 0 / 38%), inset 0 0 0 1px rgb(255 239 185 / 18%); font-family: "Yu Mincho", serif; font-size: 1.08rem; letter-spacing: .06em; }
.rest-primary-button span, .rest-primary-button small { display: block; }
.rest-primary-button small { margin-top: 3px; color: #e3d6b8; font-family: "Yu Gothic UI", sans-serif; font-size: .62rem; font-weight: 500; letter-spacing: .04em; }
.rest-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rest-quick-action { display: grid; min-width: 0; min-height: 112px; padding: 10px 7px; place-items: center; align-content: center; gap: 4px; border: 1px solid #594d35; border-radius: 8px; background: linear-gradient(150deg, rgb(29 34 40 / 98%), rgb(14 17 20 / 98%)); color: var(--text); cursor: pointer; text-align: center; }
.rest-quick-action.consumables { border-color: #4e5c50; background: linear-gradient(150deg, rgb(31 39 38 / 98%), rgb(16 21 21 / 98%)); }
.rest-quick-action img, .rest-action-icon { display: block; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 7px rgb(0 0 0 / 45%)); }
.rest-action-icon { color: #c7d7df; font-family: serif; font-size: 1.8rem; line-height: 40px; }
.rest-quick-action strong { overflow: hidden; max-width: 100%; font-family: "Yu Mincho", serif; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.rest-quick-action small { color: var(--muted); font-size: .61rem; line-height: 1.25; }
.rest-dashboard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.rest-card { min-width: 0; padding: 16px; border: 1px solid #4b4435; border-radius: 9px; background: linear-gradient(150deg, rgb(25 29 30 / 97%), rgb(14 17 18 / 97%)); box-shadow: 0 12px 34px rgb(0 0 0 / 28%); }
.rest-card-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.rest-card-heading h2 { margin: 3px 0 0; font-size: 1.28rem; }
.home-consumable-summary { margin: 8px 0 0; color: #c9d6d2; font-size: .66rem; }
.consumable-preparation-card { border-color: #485f55; background: linear-gradient(145deg, rgb(22 38 35 / 97%), rgb(14 20 20 / 98%)); }
.consumable-preparation-backdrop { position: fixed; z-index: 230; inset: 0; display: grid; place-items: center; padding: 12px; background: rgb(4 7 6 / 86%); backdrop-filter: blur(4px); overscroll-behavior: contain; }
.consumable-preparation-dialog { width: min(560px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; box-shadow: 0 24px 70px rgb(0 0 0 / 64%); }
.consumable-dialog-controls { display: flex; align-items: center; gap: 8px; }
.consumable-preparation-done { width: 100%; min-height: 44px; margin-top: 16px; }
body.consumable-preparation-modal-open { overflow: hidden; }
.consumable-preparation-body { display: grid; gap: 12px; }
.consumable-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.consumable-slot { position: relative; display: grid; min-height: 88px; padding: 7px; place-items: center; align-content: center; gap: 4px; border: 1px dashed #53615c; border-radius: 8px; background: rgb(0 0 0 / 18%); color: var(--muted); cursor: pointer; text-align: center; }
.consumable-slot.filled { border-style: solid; border-color: #688b7c; background: linear-gradient(160deg, rgb(56 92 78 / 30%), rgb(15 27 25 / 70%)); color: #d8eee4; }
.consumable-slot.selected { border-color: #d7b65e; box-shadow: 0 0 0 2px rgb(215 182 94 / 18%), inset 0 0 18px rgb(215 182 94 / 12%); }
.consumable-slot.stock-shortage { border-color: #a86654; color: #e9b2a3; }
.consumable-slot:disabled { cursor: default; opacity: .42; }
.consumable-slot em { position: absolute; top: 5px; left: 7px; color: #8fa39a; font-size: .5rem; font-style: normal; }
.consumable-slot b { font-size: 1.55rem; line-height: 1; }
.consumable-slot-icon { display: block; width: 40px; height: 40px; object-fit: contain; }
.consumable-slot small { max-width: 100%; overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.consumable-slot > i { color: #e2a790; font-size: .5rem; font-style: normal; }
.consumable-slot-guide { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid rgb(143 174 161 / 16%); border-radius: 6px; background: rgb(0 0 0 / 16%); color: #c5d7cf; font-size: .66rem; }
.consumable-stock-list { display: grid; gap: 7px; }
.consumable-stock-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(100px, auto); align-items: center; gap: 10px; padding: 9px; border: 1px solid rgb(143 174 161 / 17%); border-radius: 7px; background: rgb(0 0 0 / 15%); }
.consumable-stock-row.selected { border-color: rgb(215 182 94 / 48%); background: rgb(83 69 35 / 16%); }
.consumable-stock-copy { display: grid; min-width: 0; gap: 2px; }
.consumable-stock-copy > strong { color: #e1ece7; font-size: .75rem; }
.consumable-stock-copy > small { color: var(--muted); font-size: .58rem; }
.consumable-stock-copy > p { margin: 3px 0 0; color: #bdc9c3; font-size: .62rem; line-height: 1.45; }
.consumable-stock-actions { display: grid; min-width: 104px; gap: 5px; }
.consumable-stock-actions button { min-height: 34px; padding: 5px 8px; font-size: .61rem; }
.consumable-symbol { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #58776b; border-radius: 50%; background: rgb(63 104 88 / 24%); font-size: 1.35rem; }
.consumable-symbol-icon { display: block; width: 36px; height: 36px; object-fit: contain; }
.consumable-buy-button { width: 100%; }
.consumable-warning { color: #e3bd79 !important; font-size: .56rem; font-style: normal; }
.consumable-capacity-note:empty { display: none; }
.items-screen { display: grid; gap: 14px; }
.items-overview-panel { background: radial-gradient(circle at 88% 8%, rgb(70 154 140 / 15%), transparent 34%), linear-gradient(var(--surface), var(--surface)); }
.items-overview-panel .text-button { margin-bottom: 8px; padding-left: 0; }
.inventory-item-list { display: grid; gap: 8px; }
.inventory-item-card { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(112px, auto); align-items: center; gap: 12px; min-height: 104px; padding: 12px; border: 1px solid rgb(143 174 161 / 20%); border-radius: 8px; background: linear-gradient(145deg, rgb(24 36 34 / 82%), rgb(10 15 16 / 88%)); }
.inventory-item-visual { display: grid; width: 70px; height: 70px; place-items: center; border: 1px solid rgb(103 159 145 / 25%); border-radius: 12px; background: radial-gradient(circle, rgb(66 135 119 / 20%), rgb(0 0 0 / 12%) 68%); }
.inventory-item-icon { display: block; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 5px 8px rgb(0 0 0 / 42%)); }
.inventory-item-symbol { font-size: 2rem; }
.inventory-item-copy { display: grid; min-width: 0; gap: 4px; }
.inventory-item-copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.inventory-item-copy strong { color: #e7f2ee; font-family: "Yu Mincho", serif; font-size: .94rem; }
.inventory-item-copy small { color: #aac0b8; font-size: .62rem; }
.inventory-item-copy p { margin: 2px 0 0; color: var(--muted); font-size: .66rem; line-height: 1.55; }
.inventory-item-action { min-width: 0; }
.inventory-item-use { width: 100%; min-width: 110px; }
.rest-result-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 15px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid rgb(224 197 135 / 15%); color: var(--muted); font-size: .72rem; }
.rest-result-meta strong { margin-left: 6px; color: var(--text); font-family: serif; font-size: .9rem; }
.expedition-board { --expedition-accent: #d1aa68; display: grid; gap: 12px; padding: 17px; border: 1px solid #5a4d36; border-radius: 12px; background: linear-gradient(160deg, #1c2529, #111719 75%); touch-action: pan-y; }
.expedition-board.difficulty-hard { --expedition-accent: #83b8d5; }
.expedition-board.difficulty-nightmare { --expedition-accent: #be9cdd; }
.expedition-board.difficulty-hell { --expedition-accent: #dc8d88; }
.expedition-board.difficulty-abyss { --expedition-accent: #aa91e4; }
.expedition-board-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.expedition-board-heading h1 { margin: 3px 0 0; font-family: "Yu Mincho", serif; font-size: 1.45rem; }
.expedition-swipe-hint { color: #b6c3c2; font-size: .62rem; white-space: nowrap; }
.expedition-difficulty-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px 8px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.expedition-difficulty-tab { flex: 0 0 auto; min-height: 39px; padding: 7px 11px; border: 1px solid #475457; border-radius: 7px; background: #172023; color: #b7c1c1; font-size: .7rem; font-weight: 700; cursor: pointer; scroll-snap-align: center; }
.expedition-difficulty-tab.active { border-color: var(--expedition-accent); background: #303840; color: #fff0cf; box-shadow: inset 0 -2px var(--expedition-accent); }
.expedition-mode-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: #b8c4c4; font-size: .67rem; }
.expedition-zone-list { display: grid; gap: 9px; }
.expedition-zone-card { position: relative; isolation: isolate; display: flex; align-items: end; justify-content: space-between; gap: 12px; min-height: 126px; overflow: hidden; padding: 14px; border: 1px solid #53636a; border-radius: 10px; background: #152126; }
.expedition-zone-card::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgb(7 13 17 / 93%), rgb(7 13 17 / 64%) 60%, rgb(7 13 17 / 35%)); pointer-events: none; }
.expedition-zone-art { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.expedition-zone-card.current { border-color: var(--expedition-accent); box-shadow: inset 3px 0 var(--expedition-accent); }
.expedition-zone-card.locked .expedition-zone-art { filter: grayscale(1) brightness(.65); }
.expedition-zone-copy { position: relative; z-index: 2; display: grid; min-width: 0; gap: 3px; }
.expedition-zone-copy h3 { margin: 0; color: #fff1cf; font-family: "Yu Mincho", serif; font-size: clamp(1.18rem, 4.6vw, 1.52rem); white-space: nowrap; }
.expedition-zone-copy p { margin: 0; color: #dae3de; font-size: .68rem; }
.expedition-zone-copy small { color: #bbc8c8; font-size: .62rem; line-height: 1.4; }
.expedition-zone-side { position: relative; z-index: 2; display: grid; flex: 0 0 auto; justify-items: end; gap: 10px; }
.expedition-zone-progress { color: #e0d1ae; font-size: .64rem; white-space: nowrap; }
.expedition-zone-enter { min-width: 84px; min-height: 39px; padding: 6px 9px; border: 1px solid #c4a267; border-radius: 7px; background: #765a2d; color: #fff6df; font-size: .72rem; font-weight: 700; cursor: pointer; }
.expedition-zone-enter:disabled { border-color: #526062; background: #263032; color: #a4b0b0; cursor: default; }
.expedition-zone-cost { color: #ded0a8; font-size: .58rem; line-height: 1; }
@media (max-width: 390px) { .expedition-board { padding: 12px; } .expedition-zone-card { padding: 11px; gap: 7px; } .expedition-zone-enter { min-width: 76px; } }
.expedition-result-dialog.zone-entry-dialog { width: min(460px, 100%); }
.zone-entry-floor-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 12px 0; }
.zone-entry-floor { display: grid; gap: 1px; min-width: 0; min-height: 44px; padding: 4px 2px; place-content: center; border: 1px solid #57666b; border-radius: 7px; background: #1b292d; color: #dee9e7; cursor: pointer; }
.zone-entry-floor strong { font-size: .81rem; }
.zone-entry-floor small { color: #adbfbd; font-size: .58rem; }
.zone-entry-floor.selected { border-color: #71cce7; background: linear-gradient(145deg, #163342, #0c1c28); box-shadow: inset 0 -2px #71cce7, 0 0 12px #3bafda20; }
.zone-entry-floor.next small { color: #83d7ef; }
.zone-entry-floor.boss strong { color: #ead8a0; }
.zone-entry-floor:focus-visible { outline: 2px solid #83d7ef; outline-offset: 2px; }
.zone-entry-recovery-note { display: flex; align-items: center; gap: 8px; margin: 10px 0 16px; padding: 10px 12px; border-left: 2px solid #548ea3; background: #0e202c; color: #aec4cf; font-size: .7rem; line-height: 1.6; }
.zone-entry-recovery-note > span { flex: 0 0 auto; color: #7acbe3; font-size: 1.1rem; }
.zone-entry-floor:disabled { opacity: .45; cursor: default; }
.zone-entry-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 12px; border: 1px solid #59676a; border-radius: 7px; background: #162125; font-size: .72rem; }
.zone-entry-summary strong { color: #f0dda9; }
.zone-entry-party { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
.zone-entry-party-member { position: relative; display: grid; min-width: 0; justify-items: center; gap: 3px; padding: 8px 4px 7px; border: 1px solid rgb(var(--party-color-rgb) / 48%); border-radius: 8px; background: linear-gradient(180deg, rgb(var(--party-color-rgb) / 16%), rgb(0 0 0 / 14%)); text-align: center; }
.zone-entry-party-order { position: absolute; top: 5px; left: 5px; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: var(--party-color); color: #11171a; font-size: .58rem; font-weight: 900; }
.zone-entry-party-portrait, .zone-entry-party-portrait .actor-image { display: block; width: 62px; height: 62px; object-fit: contain; }
.zone-entry-party-copy { display: grid; min-width: 0; gap: 2px; }
.zone-entry-party-copy strong { overflow: hidden; color: #f0eee4; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.zone-entry-party-copy small { overflow: hidden; color: var(--party-color); font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }
.zone-entry-commands { align-self: start; width: 100%; margin: 5px 0 0; padding: 5px 0 0; border-top: 1px solid rgb(var(--party-color-rgb) / 28%); list-style: none; text-align: left; }
.zone-entry-commands li { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: baseline; gap: 3px; min-height: 22px; padding: 3px 1px; color: #e0e8e8; font-size: .65rem; line-height: 1.4; overflow-wrap: anywhere; }
.zone-entry-command-slot { color: var(--party-color); font-size: .58rem; font-weight: 700; }
.zone-entry-commands li.empty { color: #8c9ba3; }
.zone-entry-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.zone-entry-actions button { flex: 1 1 110px; min-height: 46px; }
.party-confirm-actions { flex-wrap: nowrap; }
body.zone-entry-modal-open { overflow: hidden; }
.rest-result-card h3 { margin-bottom: 8px; color: var(--gold-strong); font-family: "Yu Mincho", serif; font-size: .75rem; letter-spacing: .08em; }
.floor-milestone { margin: 7px 0 0; padding-left: 8px; border-left: 2px solid var(--gold); color: #d9bd75; font-size: .69rem; line-height: 1.5; }
.floor-directory { margin: 0; padding: 0; overflow: hidden; }
.floor-directory summary { display: flex; min-height: 64px; padding: 12px 16px; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.floor-directory summary::-webkit-details-marker { display: none; }
.floor-directory summary span { display: grid; }
.floor-directory summary b { font-family: "Yu Mincho", serif; font-size: .92rem; }
.floor-directory summary small { margin-top: 3px; color: var(--muted); font-size: .64rem; font-weight: 400; }
.floor-directory summary i { color: var(--gold); font-size: 1.1rem; font-style: normal; transition: transform 160ms ease; }
.floor-directory[open] summary { border-bottom: 1px solid var(--line); }
.floor-directory[open] summary i { transform: rotate(180deg); }
.floor-directory .floor-list { padding: 14px; }
.rest-epilogue { margin: 8px 0 0; padding: 24px 18px 12px; border-top: 1px solid rgb(var(--accent-rgb) / 16%); color: #8f918d; font-family: "Yu Mincho", serif; font-size: .74rem; line-height: 1.7; letter-spacing: .07em; }
.rest-epilogue span { margin-left: 28px; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; }
.primary-button, .secondary-button, .danger-button, .command-button, .item-action { min-height: 46px; padding: 10px 15px; border-radius: 7px; border: 1px solid var(--line); cursor: pointer; }
.primary-button { border-color: var(--primary-border); background: var(--primary-bg); color: var(--primary-text); font-weight: 700; }
.primary-button:hover { background: var(--primary-hover); }
.secondary-button, .item-action { background: var(--surface-2); }
.danger-button { border-color: #743f38; background: #442925; }
button:disabled { opacity: .42; cursor: not-allowed; }
.text-button { min-height: 36px; border: 0; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; }
.notice { position: fixed; z-index: 100; top: 92px; left: 50%; width: min(90vw, 560px); padding: 12px 15px; transform: translateX(-50%); border: 1px solid #7c554c; border-radius: 8px; background: #3c2925; box-shadow: var(--shadow); }
.notice.success { border-color: #507249; background: #263a25; }
.update-prompt {
  position: fixed;
  z-index: 90;
  inset: max(6px, env(safe-area-inset-top)) 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  min-height: 26px;
  margin-inline: auto;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-deep);
  color: var(--text);
  font-size: .75rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}
.update-prompt.in-game {
  position: relative;
  inset: auto;
  width: min(980px, 100%);
  height: var(--app-update-flow-space);
  border-inline: 0;
  border-radius: 0;
}
.update-status-icon {
  position: relative;
  display: inline-block;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--gold-strong);
  background: rgb(var(--accent-rgb) / 12%);
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 35%);
}
.update-status-icon::before,
.update-status-icon::after {
  position: absolute;
  content: "";
  animation: pending-action-spin var(--update-status-speed) linear infinite;
  animation-play-state: var(--update-status-motion, running);
}
.update-status-icon::before {
  --update-status-speed: 2s;
  inset: 5px;
  background: var(--gold-strong);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6.5' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M10 0h4v6h-4zM10 18h4v6h-4z'/%3E%3Cpath d='M10 0h4v6h-4zM10 18h4v6h-4z' transform='rotate(45 12 12)'/%3E%3Cpath d='M10 0h4v6h-4zM10 18h4v6h-4z' transform='rotate(90 12 12)'/%3E%3Cpath d='M10 0h4v6h-4zM10 18h4v6h-4z' transform='rotate(135 12 12)'/%3E%3C/svg%3E") center / contain no-repeat;
}
.update-status-icon::after {
  --update-status-speed: .9s;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 20deg, rgb(var(--accent-rgb) / 22%) 30%, currentColor 96%, rgb(var(--accent-rgb) / 22%) 96%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
body.maintenance-active { overflow: hidden; }
.state-sync-active { overflow: hidden; }
.maintenance-prompt { position: fixed; z-index: 140; inset: 0; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); background: rgb(7 8 7 / 78%); backdrop-filter: blur(5px); }
.maintenance-dialog { display: grid; justify-items: center; width: min(420px, 100%); padding: 28px 24px 25px; border: 1px solid var(--accent-border-strong); border-top: 3px solid var(--gold-strong); border-radius: 12px; background: linear-gradient(150deg, rgb(var(--panel-start-rgb) / 99%), rgb(var(--panel-end-rgb) / 99%)); box-shadow: 0 24px 70px rgb(0 0 0 / 68%); text-align: center; }
.maintenance-dialog h2 { margin: 5px 0 8px; color: var(--text); font-size: 1.28rem; }
.maintenance-dialog > p:not(.eyebrow) { margin: 0; color: #e1dece; line-height: 1.7; }
.maintenance-dialog .maintenance-status { margin-top: 13px; color: var(--muted); font-size: .72rem; }
.maintenance-spinner { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px; border: 1px solid rgb(var(--accent-rgb) / 28%); border-radius: 50%; background: rgb(var(--accent-rgb) / 7%); }
.maintenance-spinner::before, .maintenance-spinner span { position: absolute; content: ""; border-radius: 50%; }
.maintenance-spinner::before { inset: 8px; border: 2px solid rgb(var(--accent-rgb) / 18%); border-top-color: var(--gold-strong); animation: maintenance-spin .9s linear infinite; }
.maintenance-spinner span { width: 6px; height: 6px; background: var(--gold); box-shadow: 0 0 12px rgb(var(--accent-rgb) / 65%); }
@keyframes maintenance-spin { to { transform: rotate(360deg); } }
.stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.stat { min-width: 0; border-left: 2px solid var(--line); background: rgb(0 0 0 / 12%); }
.stat.tip-open { border-left-color: var(--tips-accent); background: rgb(var(--tips-rgb) / 14%); }
.stat-tip-trigger { position: relative; display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: 5px; width: 100%; min-height: 54px; padding: 7px 22px 7px 5px; border: 0; border-radius: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left; transition: background-color 120ms ease, transform 80ms ease; }
.stat-tip-trigger:hover { background: rgb(var(--accent-rgb) / 6%); }
.stat-tip-trigger:active { transform: translateY(1px); background: rgb(var(--accent-rgb) / 12%); }
.stat-icon, .stat-icon-placeholder { display: block; width: 23px; height: 23px; object-fit: contain; }
.stat-copy { min-width: 0; }
.stat-tip-trigger .stat-label { display: block; overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.stat-tip-trigger strong { display: block; overflow: hidden; margin-top: 1px; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.stat-tip-cue { position: absolute; top: 50%; right: 6px; color: #777b6d; font-size: .62rem; transform: translateY(-50%); }
.stat-tip-trigger[aria-expanded="true"] .stat-tip-cue { color: var(--tips-accent); }
.stat-tip-panel { margin-top: 8px; padding: 9px 11px; border: 1px solid var(--tips-border); border-left: 3px solid var(--tips-accent); border-radius: 5px; background: linear-gradient(145deg, var(--tips-surface), var(--tips-surface-deep)); box-shadow: 0 8px 20px rgb(0 0 0 / 28%), inset 0 1px rgb(255 255 255 / 5%); animation: skill-tip-in 140ms ease-out; }
.stat-tip-panel > strong { color: var(--tips-heading); font-size: .78rem; }
.stat-tip-panel p { margin: 4px 0 0; color: var(--tips-text); font-size: .72rem; line-height: 1.55; }
.floor-list, .inventory-grid, .catalog-grid { display: grid; gap: 10px; }
.floor-list { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.floor-card { padding: 13px; border-left: 3px solid var(--line); background: var(--surface); }
.floor-card.boss { border-left-color: var(--gold); }
.floor-card.locked { opacity: .5; }
.floor-strategy { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px; margin: 8px 0 0; color: #d8d2c2; font-size: .7rem; line-height: 1.5; }
.floor-strategy strong { color: var(--gold); font-size: .63rem; letter-spacing: .06em; }
.floor-tools { margin: 3px 0 0; color: var(--muted); font-size: .64rem; line-height: 1.5; }
.floor-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.floor-title strong { font-family: serif; font-size: 1.15rem; }
.tag, .slot-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 2px 7px; border-radius: 99px; background: var(--tag-surface); color: var(--muted); font-size: .7rem; }
.part-tag { gap: 4px; }
.part-icon { display: block; flex: 0 0 auto; width: 17px; height: 17px; object-fit: contain; }
.tag.gold { background: #44381f; color: var(--gold-strong); }
.filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
select, input { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); color: var(--text); }
.inventory-filter-trigger { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; min-width: 0; min-height: 44px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); color: var(--text); cursor: pointer; text-align: left; }
.inventory-filter-trigger > span { overflow: hidden; color: var(--muted); font-size: .52rem; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.inventory-filter-trigger > strong { overflow: hidden; margin-top: 1px; color: #e7e3d2; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.inventory-filter-trigger > i { grid-column: 2; grid-row: 1 / 3; margin-left: 6px; color: #7c806f; font-size: .72rem; font-style: normal; transition: transform 120ms ease, color 120ms ease; }
.inventory-filter-trigger.active { border-color: var(--accent-border); background: rgb(var(--accent-rgb) / 8%); }
.inventory-filter-trigger.active > strong, .inventory-filter-trigger[aria-expanded="true"] > i { color: var(--gold-strong); }
.inventory-filter-trigger[aria-expanded="true"] > i { transform: rotate(180deg); }
.inventory-filter-backdrop { position: fixed; z-index: 205; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 84%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.inventory-filter-dialog { display: flex; flex-direction: column; width: min(460px, 100%); max-height: calc(100dvh - 32px); padding: 18px; overflow: hidden; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 62%); animation: forge-dialog-in 180ms ease-out; }
.inventory-filter-heading { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 12px; }
.inventory-filter-heading h2 { margin: 3px 0 0; color: var(--text); font-size: 1.08rem; }
.inventory-filter-close { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 1.25rem; cursor: pointer; }
.inventory-filter-dialog > p { flex: 0 0 auto; margin: 9px 0 13px; }
.inventory-filter-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow-y: auto; overscroll-behavior: contain; }
.inventory-filter-option { display: grid; grid-template-columns: 36px minmax(0, 1fr) 26px; align-items: center; gap: 9px; width: 100%; min-height: 58px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--inset); color: var(--text); cursor: pointer; text-align: left; }
.inventory-filter-option:hover { border-color: #68614a; background: var(--surface-hover); }
.inventory-filter-option.selected { border-color: var(--selected-border); background: linear-gradient(135deg, var(--selected-start), var(--selected-end)); box-shadow: inset 3px 0 0 var(--gold); }
.inventory-filter-option-icon { display: block; width: 34px; height: 34px; object-fit: contain; }
.inventory-filter-slot-symbol, .inventory-filter-sort-symbol { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #575a4b; border-radius: 7px; background: var(--icon-surface); color: #c9c5b3; font-family: serif; font-size: .74rem; font-weight: 700; }
.inventory-filter-sort-symbol { font-size: 1rem; }
.inventory-filter-option.selected .inventory-filter-slot-symbol, .inventory-filter-option.selected .inventory-filter-sort-symbol { border-color: var(--selected-border); color: var(--gold-strong); }
.inventory-filter-option > span:nth-child(2) { overflow: hidden; font-size: .78rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.inventory-filter-option > i { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #55584b; border-radius: 50%; color: transparent; font-size: .72rem; font-style: normal; }
.inventory-filter-option.selected > i { border-color: var(--selected-border); background: var(--selected-start); color: var(--selected-text); }
.inventory-filter-backdrop[data-filter="part"] .inventory-filter-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.inventory-filter-backdrop[data-filter="part"] .inventory-filter-option { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 92px; gap: 5px; padding: 9px 3px; text-align: center; }
.inventory-filter-backdrop[data-filter="part"] .inventory-filter-option-icon { width: 38px; height: 38px; }
.inventory-filter-backdrop[data-filter="part"] .inventory-filter-option > span:nth-child(2) { font-size: .7rem; line-height: 1.25; white-space: normal; }
.inventory-filter-backdrop[data-filter="part"] .inventory-filter-count { margin-top: -2px; color: var(--muted); font-size: .54rem; font-variant-numeric: tabular-nums; line-height: 1; }
.inventory-filter-backdrop[data-filter="part"] .inventory-filter-option.selected .inventory-filter-count { color: #c8c7ba; }
.inventory-filter-backdrop[data-filter="part"] .inventory-filter-option > i { position: absolute; top: 5px; right: 5px; display: none; width: 18px; height: 18px; border: 0; background: transparent; font-size: .8rem; }
.inventory-filter-backdrop[data-filter="part"] .inventory-filter-option.selected { box-shadow: inset 0 0 0 1px var(--selected-border); }
.inventory-filter-backdrop[data-filter="part"] .inventory-filter-option.selected > i { display: grid; }
body.inventory-filter-modal-open { overflow: hidden; }
.equipment-layout { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(320px, 1.5fr); gap: 16px; }
.equipment-accordion-stack { display: grid; gap: 9px; margin-top: 16px; }
.equipment-accordion-stack > .panel + .panel { margin-top: 0; }
.equipment-accordion { padding: 0; overflow: hidden; }
.equipment-accordion[data-equipment-section="inventory"].open { overflow: visible; scroll-margin-top: calc(var(--app-header-height) + 56px); }
.equipment-accordion-trigger { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; border-radius: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.equipment-accordion-trigger:hover, .equipment-accordion-trigger[aria-expanded="true"] { background: rgb(var(--accent-rgb) / 7%); }
.equipment-accordion-trigger:active { background: rgb(var(--accent-rgb) / 12%); transform: translateY(1px); }
.equipment-accordion-heading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.equipment-accordion-heading > span { display: grid; min-width: 0; gap: 1px; }
.equipment-accordion-heading small { overflow: hidden; color: var(--gold); font-size: .52rem; letter-spacing: .11em; text-overflow: ellipsis; white-space: nowrap; }
.equipment-accordion-heading strong { overflow: hidden; color: var(--text); font-family: serif; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.equipment-accordion-summary { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.equipment-accordion-trigger > i { color: var(--muted); font-size: .85rem; font-style: normal; transition: transform 120ms ease, color 120ms ease; }
.equipment-accordion-trigger[aria-expanded="true"] > i { color: var(--gold); transform: rotate(180deg); }
.equipment-accordion-content { padding: 13px 14px 15px; border-top: 1px solid rgb(var(--accent-rgb) / 15%); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.danger-text { color: #df9a8e !important; }
.build-preset-intro p { margin: 0 0 10px; }
.build-preset-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; }
.build-preset-card { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--line); border-left: 3px solid #555a4b; border-radius: 7px; background: rgb(0 0 0 / 13%); }
.build-preset-card.saved { border-left-color: var(--gold); background: rgb(var(--accent-rgb) / 6%); }
.build-preset-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.build-preset-number { display: grid; width: 38px; height: 38px; padding: 2px; place-items: center; overflow: hidden; border: 1px solid transparent; border-radius: 7px; background: var(--tag-surface); color: var(--gold-strong); font-size: .7rem; font-weight: 800; cursor: pointer; }
.build-preset-number:hover, .build-preset-number:focus-visible { border-color: var(--gold); background: rgb(var(--accent-rgb) / 13%); }
.build-preset-number:disabled { cursor: not-allowed; opacity: .55; }
.build-preset-number.has-icon { border-color: rgb(var(--accent-rgb) / 30%); background: rgb(0 0 0 / 24%); }
.build-preset-number img { display: block; width: 34px; height: 34px; object-fit: contain; }
.build-preset-heading input { min-height: 38px; font-size: .76rem; }
.build-preset-equipment { display: -webkit-box; margin: 0; overflow: hidden; color: #ded9c6; font-size: .67rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.build-preset-card > .small { margin: 0; }
.build-preset-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.build-preset-actions button { min-height: 36px; padding: 6px 9px; font-size: .68rem; }
.build-preset-apply-backdrop { position: fixed; z-index: 202; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 86%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.build-preset-apply-dialog { width: min(500px, 100%); max-height: calc(100dvh - 32px); padding: 18px; overflow-y: auto; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 60%); animation: forge-dialog-in 180ms ease-out; }
.build-preset-apply-heading { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 11px; }
.build-preset-apply-heading h2 { margin: 3px 0 0; font-size: 1.05rem; line-height: 1.45; }
.build-preset-apply-icon { display: grid; width: 46px; height: 46px; padding: 3px; place-items: center; border: 1px solid rgb(var(--accent-rgb) / 36%); border-radius: 8px; background: rgb(0 0 0 / 24%); color: var(--gold-strong); font-size: .72rem; font-weight: 800; }
.build-preset-apply-icon img { display: block; width: 40px; height: 40px; object-fit: contain; }
.build-preset-apply-dialog > .small { margin: 10px 0 12px; line-height: 1.55; }
.build-preset-apply-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.build-preset-apply-summary span { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgb(0 0 0 / 18%); color: var(--muted); font-size: .62rem; }
.build-preset-apply-summary strong { color: var(--text); font-size: .7rem; }
.build-preset-apply-changes { display: grid; gap: 5px; margin: 10px 0; padding: 0; list-style: none; }
.build-preset-apply-changes li { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 44px; padding: 7px 9px; border: 1px solid rgb(var(--accent-rgb) / 16%); border-radius: 7px; background: rgb(var(--accent-rgb) / 4%); }
.build-preset-apply-changes li.unchanged { display: block; min-height: 0; color: var(--muted); font-size: .66rem; text-align: center; }
.build-preset-apply-part { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .62rem; }
.build-preset-apply-names { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.build-preset-apply-names small, .build-preset-apply-names strong { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.build-preset-apply-names small { color: var(--muted); }
.build-preset-apply-names strong { color: #dfe9e3; }
.build-preset-apply-names i { color: var(--gold); font-size: .7rem; font-style: normal; }
.build-preset-apply-commands { padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgb(0 0 0 / 16%); }
.build-preset-apply-commands > small { color: var(--muted); font-size: .58rem; }
.build-preset-apply-commands p { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 0; }
.build-preset-apply-commands span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 5px; background: rgb(var(--accent-rgb) / 11%); color: #dfe9e3; font-size: .62rem; }
.build-preset-apply-commands b { color: var(--gold); }
.build-preset-apply-warning, .build-preset-apply-current { margin: 11px 0 0; padding: 8px 10px; border-radius: 6px; font-size: .62rem; line-height: 1.5; }
.build-preset-apply-warning { border: 1px solid rgb(201 151 79 / 30%); background: rgb(102 67 25 / 14%); color: #dfbf83; }
.build-preset-apply-current { border: 1px solid rgb(111 173 143 / 28%); background: rgb(36 92 67 / 14%); color: #b9d9c9; }
.build-preset-apply-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; margin-top: 13px; }
.build-preset-delete-backdrop { position: fixed; z-index: 198; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 84%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.build-preset-delete-dialog { width: min(430px, 100%); padding: 18px; border: 1px solid #8f594c; border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 60%); animation: forge-dialog-in 180ms ease-out; }
.build-preset-delete-dialog h2 { margin: 3px 0 8px; }
.build-preset-delete-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; margin-top: 15px; }
.build-preset-icon-backdrop { position: fixed; z-index: 205; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 84%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.build-preset-icon-dialog { width: min(470px, 100%); max-height: calc(100dvh - 32px); padding: 18px; overflow-y: auto; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 60%); animation: forge-dialog-in 180ms ease-out; }
.build-preset-icon-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.build-preset-icon-heading h2 { margin: 3px 0 0; }
.build-preset-icon-close { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 1.25rem; cursor: pointer; }
.build-preset-icon-dialog > .small { margin: 9px 0 13px; }
.build-preset-icon-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.build-preset-icon-option { position: relative; display: grid; min-width: 0; aspect-ratio: 1; padding: 5px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: rgb(0 0 0 / 20%); cursor: pointer; }
.build-preset-icon-option:hover, .build-preset-icon-option:focus-visible { border-color: var(--gold); background: rgb(var(--accent-rgb) / 10%); }
.build-preset-icon-option.selected { border-color: var(--gold-strong); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 38%), 0 0 13px rgb(var(--accent-rgb) / 14%); }
.build-preset-icon-option:disabled { cursor: wait; opacity: .58; }
.build-preset-icon-option img { display: block; width: 100%; max-width: 58px; height: auto; object-fit: contain; }
.build-preset-icon-option span { position: absolute; right: 3px; bottom: 3px; padding: 2px 4px; border-radius: 4px; background: rgb(4 6 5 / 88%); color: var(--gold-strong); font-size: .48rem; }
body.build-preset-modal-open { overflow: hidden; }
.equipment-section-intro p { margin: 0 0 10px; }
.equipped-item-list { display: grid; gap: 10px; }
.inventory-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 12px; }
.inventory-toolbar .secondary-button { min-height: 38px; padding: 6px 10px; font-size: .72rem; }
.ga-ui .inventory-toolbar .inventory-expand-link { margin-right: auto; padding: 4px 0; font-size: var(--ga-font-note); font-weight: 400; text-decoration: underline; }
.inventory-result-count { margin: -5px 0 9px; text-align: right; }
.inventory-control-deck { position: sticky; z-index: 18; top: calc(var(--app-header-height) + 54px); margin: 0 -6px 10px; padding: 8px 7px 6px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 22%); border-radius: 8px; background: linear-gradient(145deg, rgb(13 22 28 / 96%), rgb(10 14 19 / 97%)); box-shadow: 0 8px 20px rgb(0 0 0 / 34%), inset 0 1px rgb(255 255 255 / 5%); backdrop-filter: blur(12px) saturate(1.08); }
.inventory-control-deck::before { position: absolute; top: -1px; right: 12px; left: 12px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--abyss-crystal-rgb) / 58%), rgb(220 188 108 / 42%), transparent); content: ""; pointer-events: none; }
.inventory-control-deck .inventory-filters { margin-bottom: 5px; }
/* Compact list tools and return routes share the existing surface. */
.list-search { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 0 0 8px; font-size: .66rem; color: var(--muted); }
.list-search input { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 28%); border-radius: 6px; background: rgb(3 9 14 / 72%); color: var(--text); font: inherit; font-size: 16px; }
.list-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.list-result-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); font-size: .65rem; }
.list-result-summary:empty { display: none; }
.list-filter-summary { display: flex; flex: 1; flex-wrap: wrap; gap: 3px 10px; min-width: 0; overflow-wrap: anywhere; }
.list-filter-summary > span { color: var(--accent); }
.list-reset { min-height: 36px; padding: 4px 8px; font-size: .7rem; }
.list-reset[hidden] { display: none; }
.list-empty { padding: 18px 6px; font-size: .78rem; color: var(--muted); line-height: 1.8; }
.core-archive-tools { padding: 8px 0 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.work-return-link { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 8px; color: var(--accent); }
.preparation-return { position: sticky; z-index: 19; top: calc(var(--app-header-height) + 6px); display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 12px; border-left: 2px solid var(--gold); background: rgb(var(--chrome-rgb) / 97%); }
.preparation-return > span { display: grid; min-width: 0; gap: 2px; }
.preparation-return small { font-size: .58rem; color: var(--muted); }
.preparation-return strong { font-size: .8rem; color: var(--gold); overflow-wrap: anywhere; }
.preparation-return button { min-height: 40px; padding: 7px 10px; font-size: .72rem; flex-shrink: 0; }
.inventory-control-deck .preparation-return { position: static; margin-bottom: 8px; padding: 3px 6px; }
.zone-preparation-actions:empty { display: none; }
.zone-preparation-issue { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .75rem; }
.zone-preparation-issue > span { display: grid; gap: 2px; color: var(--gold); }
.zone-preparation-issue.inventory-full > span { color: #edaa9f; font-weight: 700; }
.zone-preparation-issue button { min-height: 42px; padding: 8px 12px; font-size: .75rem; }
.zone-entry-footer .zone-preparation-issue { margin: 0 0 8px; padding: 0; border-top: 0; }
.zone-entry-footer .zone-preparation-issue button { min-height: 44px; }
.zone-recovery-confirm { padding-top: 12px; border-top: 1px solid var(--line); }
.stamina-advance-backdrop.zone-recovery-backdrop { z-index: 260; }
body.zone-entry-modal-open .stamina-potion-shop-backdrop { z-index: 270; }
.zone-recovery-dialog > .primary-button { width: 100%; min-height: 44px; margin-top: 10px; }
body.zone-recovery-modal-open { overflow: hidden; }
.zone-recovery-confirm h3 { font-size: .95rem; margin: 0 0 6px; }
.zone-recovery-confirm > .primary-button { width: 100%; min-height: 44px; font-size: .85rem; }
.zone-recovery-choice { font-size: .78rem; line-height: 1.8; color: var(--text); }
@media (max-width: 480px) {
  .list-search { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .list-search > span { font-size: .6rem; }
  .inventory-control-deck .inventory-filter-trigger { padding-top: 5px; padding-bottom: 5px; }
}
.inventory-control-deck .inventory-result-count { margin: 0 2px; font-variant-numeric: tabular-nums; }
.inventory-part-rail { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; margin: 0 -3px 10px; padding: 3px 0 5px; border-bottom: 1px solid rgb(var(--abyss-crystal-rgb) / 25%); touch-action: pan-y; user-select: none; }
.inventory-part-tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 58px; padding: 4px 1px 7px; border: 1px solid transparent; border-radius: 6px 6px 0 0; background: transparent; color: #788793; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.inventory-part-tab .inventory-part-icon { width: 28px; height: 28px; display: block; color: currentColor; opacity: .7; pointer-events: none; transition: filter .15s, opacity .15s; }
.inventory-part-tab > span { white-space: nowrap; font-size: .57rem; line-height: 1.2; pointer-events: none; }
.inventory-part-tab.selected { background: transparent; color: #d9f2ff; }
.inventory-part-tab.selected .inventory-part-icon { opacity: 1; filter: drop-shadow(0 0 5px rgb(var(--abyss-crystal-rgb) / 50%)); }
.inventory-part-tab::after { inset: auto 12% -5px; width: auto; height: 2px; aspect-ratio: auto; border: 0; border-radius: 2px; background: transparent; content: ""; opacity: 0; transform: none; animation: none; }
.inventory-part-tab.selected::after { background: #75d5ff; box-shadow: 0 0 8px #4ecaff; opacity: 1; }
.inventory-part-rail button.inventory-part-tab:not(:disabled):is(:active, .button-pressing, .button-confirmed) { transform: none; filter: none; border-color: transparent; box-shadow: none; animation: none; }
.inventory-part-rail .inventory-part-tab.button-confirmed::after { animation: none; }
.inventory-part-tab:focus-visible { outline: 2px solid #75d5ff; outline-offset: 1px; }
#inventory-results { touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) { .inventory-part-tab .inventory-part-icon { transition: none; } }
.inventory-load-more { display: grid; justify-items: center; gap: 5px; margin-top: 14px; }
.inventory-load-more .secondary-button { width: min(100%, 320px); }
.hero-equipment-summary { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
.hero-equipment-visual { min-width: 0; }
.hero-equipment-copy { min-width: 0; }
.equipment-member-selector { display: grid; grid-auto-columns: clamp(52px, 15vw, 68px); grid-auto-flow: column; gap: 7px; width: max-content; max-width: 100%; margin: 0 auto 10px; padding: 3px 2px 7px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-snap-type: x proximity; }
.equipment-member-button { display: grid; width: 100%; aspect-ratio: 1; place-items: center; padding: 3px; overflow: hidden; border: 1px solid rgb(255 255 255 / 13%); border-radius: 7px; background: rgb(5 9 13 / 58%); cursor: pointer; opacity: .38; filter: grayscale(1) brightness(.62); scroll-snap-align: center; transition: opacity 180ms ease, filter 180ms ease, border-color 180ms ease, background 180ms ease; }
.equipment-member-button.active { border-color: var(--party-color, var(--accent-border-strong)); background: rgb(var(--party-color-rgb, var(--accent-rgb)) / 14%); box-shadow: inset 0 -2px var(--party-color, var(--gold)); opacity: 1; filter: none; }
.equipment-member-button:focus-visible { outline: 2px solid var(--party-color, var(--gold)); outline-offset: -2px; }
.equipment-member-thumb, .equipment-member-thumb .actor-image { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.equipment-party-stage { --party-offset: clamp(92px, 24vw, 150px); width: 100%; margin-bottom: 12px; }
.equipment-party-background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.equipment-party-stage::after { position: absolute; z-index: 0; inset: 0; background: linear-gradient(0deg, rgb(3 8 14 / 88%), transparent 56%), linear-gradient(90deg, rgb(3 8 14 / 42%), transparent 50%, rgb(3 8 14 / 42%)); content: ""; pointer-events: none; }
.home-party-stage:not(.equipment-party-stage)::after { position: absolute; z-index: 0; inset: 0; background: linear-gradient(0deg, rgb(3 8 14 / 88%), transparent 56%), linear-gradient(90deg, rgb(3 8 14 / 42%), transparent 50%, rgb(3 8 14 / 42%)); content: ""; pointer-events: none; }
.home-party-stage:not(.equipment-party-stage) .profile-background-trigger { top: 9px; right: 9px; bottom: auto; z-index: 5; }
.equipment-party-identity { position: absolute; z-index: 7; top: 11px; left: 50%; display: flex; max-width: calc(100% - 88px); align-items: baseline; justify-content: center; gap: 8px; padding: 5px 10px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 999px; background: rgb(4 9 14 / 72%); color: #f3eee4; text-shadow: 0 2px 7px #000; transform: translateX(-50%); backdrop-filter: blur(4px); }
.equipment-party-identity strong, .equipment-party-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipment-party-identity strong { font-size: .83rem; }
.equipment-party-identity .home-party-role { color: #9dd1e8; font-size: .65rem; }
.equipment-party-stage .home-party-member { bottom: 8px; transition: transform 420ms cubic-bezier(.22, 1, .36, 1), opacity 420ms ease, filter 420ms ease; }
.equipment-party-stage .home-party-member.position-center { z-index: 6; opacity: 1; filter: none; }
.equipment-party-stage .home-party-member.position-left, .equipment-party-stage .home-party-member.position-right { z-index: 4; opacity: .78; filter: brightness(.7) saturate(.82); }
.equipment-party-stage .home-party-member.position-back-center { --party-transform: translateX(-50%) translateY(-24px) scale(.46); z-index: 1; opacity: .38; transform: var(--party-transform); filter: brightness(.38) saturate(.5); }
.equipment-party-stage .home-party-member.position-back-left-1 { --party-transform: translateX(calc(-50% - var(--party-offset) - 32px)) translateY(20px) scale(.6); z-index: 3; opacity: .54; transform: var(--party-transform); filter: brightness(.44) saturate(.58); }
.equipment-party-stage .home-party-member.position-back-right-1 { --party-transform: translateX(calc(-50% + var(--party-offset) + 32px)) translateY(20px) scale(.6); z-index: 3; opacity: .54; transform: var(--party-transform); filter: brightness(.44) saturate(.58); }
.equipment-party-stage .home-party-member.position-back-left-2 { --party-transform: translateX(calc(-50% - var(--party-offset) - 48px)) translateY(26px) scale(.52); z-index: 2; opacity: .43; transform: var(--party-transform); filter: brightness(.38) saturate(.5); }
.equipment-party-stage .home-party-member.position-back-right-2 { --party-transform: translateX(calc(-50% + var(--party-offset) + 48px)) translateY(26px) scale(.52); z-index: 2; opacity: .43; transform: var(--party-transform); filter: brightness(.38) saturate(.5); }
.equipment-party-stage .home-party-member.position-back-left-3 { --party-transform: translateX(calc(-50% - var(--party-offset) - 62px)) translateY(31px) scale(.45); z-index: 1; opacity: .34; transform: var(--party-transform); filter: brightness(.33) saturate(.44); }
.equipment-party-stage .home-party-member.position-back-right-3 { --party-transform: translateX(calc(-50% + var(--party-offset) + 62px)) translateY(31px) scale(.45); z-index: 1; opacity: .34; transform: var(--party-transform); filter: brightness(.33) saturate(.44); }
.equipment-party-stage .home-party-member.position-back-left-4 { --party-transform: translateX(calc(-50% - var(--party-offset) - 74px)) translateY(35px) scale(.39); z-index: 0; opacity: .26; transform: var(--party-transform); filter: brightness(.28) saturate(.38); }
.equipment-party-stage .home-party-member.position-back-right-4 { --party-transform: translateX(calc(-50% + var(--party-offset) + 74px)) translateY(35px) scale(.39); z-index: 0; opacity: .26; transform: var(--party-transform); filter: brightness(.28) saturate(.38); }
.hero-equipment-copy, .hero-equipped-list { transition: opacity 140ms ease; }
.hero-equipment-panel.equipment-party-switching .hero-equipment-copy, .hero-equipment-panel.equipment-party-switching .hero-equipped-list { opacity: .55; }
.profile-portrait { position: relative; isolation: isolate; display: grid; place-items: end center; height: 210px; overflow: hidden; border: 1px solid rgb(var(--accent-rgb) / 32%); border-radius: 10px; background: var(--surface-deep); box-shadow: inset 0 0 24px rgb(0 0 0 / 34%); }
.profile-portrait::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgb(5 8 10 / 2%) 32%, rgb(4 6 7 / 62%) 100%), radial-gradient(circle at 50% 48%, transparent 20%, rgb(4 6 7 / 28%) 100%); content: ""; }
.profile-background-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-portrait .actor-image { position: relative; z-index: 1; width: auto; height: 200px; max-width: 180px; filter: drop-shadow(0 5px 5px rgb(0 0 0 / 62%)); }
.profile-background-trigger { position: absolute; z-index: 2; right: 7px; bottom: 7px; display: grid; min-height: 36px; padding: 4px 8px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 6px; background: rgb(6 8 9 / 78%); color: var(--text); box-shadow: 0 3px 12px rgb(0 0 0 / 32%); cursor: pointer; text-align: right; backdrop-filter: blur(5px); }
.profile-background-trigger span { color: var(--muted); font-size: .53rem; }
.profile-background-trigger strong { font-size: .65rem; }
.profile-background-trigger:hover, .profile-background-trigger:focus-visible { border-color: var(--gold); background: rgb(14 16 14 / 92%); }
.profile-background-backdrop { position: fixed; z-index: 205; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 84%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.profile-background-dialog { width: min(620px, 100%); max-height: calc(100dvh - 32px); padding: 18px; overflow-y: auto; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 60%); animation: forge-dialog-in 180ms ease-out; }
.profile-background-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.profile-background-dialog-heading h2 { margin: 3px 0 0; }
.profile-background-dialog > .small { margin: 8px 0 13px; }
.profile-background-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-background-option { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 72px; padding: 5px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; }
.profile-background-option img { width: 88px; height: 66px; border-radius: 4px; object-fit: cover; }
.profile-background-option span { display: grid; gap: 4px; min-width: 0; }
.profile-background-option strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-background-option small { color: var(--muted); font-size: .6rem; }
.profile-background-option.selected { border-color: var(--gold); background: rgb(var(--accent-rgb) / 12%); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 20%); }
.profile-background-option.selected small { color: var(--gold-strong); }
.profile-background-option.locked { opacity: .5; cursor: not-allowed; }
body.profile-background-modal-open { overflow: hidden; }
.hero-equipped-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 4px; margin: 8px 0 0; padding: 8px 10px; border-top: 1px solid rgb(var(--accent-rgb) / 20%); border-bottom: 1px solid rgb(var(--accent-rgb) / 12%); }
.hero-equipped-list div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px; min-width: 0; font-size: .7rem; line-height: 1.45; }
.hero-equipped-list .hero-equipped-accessory { grid-column: 1 / -1; }
.hero-equipped-list dt { display: grid; grid-template-columns: 16px 3em 1em; align-items: center; column-gap: 3px; color: var(--muted); white-space: nowrap; }
.hero-equipped-part-label { text-align: right; }
.hero-equipped-separator { text-align: center; }
.hero-part-icon { display: block; width: 16px; height: 16px; object-fit: contain; }
.hero-equipped-list dd { min-width: 0; margin: 0; color: var(--text); overflow-wrap: anywhere; }
.hero-equipped-list dd.rarity-common { color: var(--text); }
.hero-equipped-list dd.rarity-rare { color: #a9dcff; }
.hero-equipped-list dd.rarity-epic { color: #d6b5ff; }
.hero-equipped-list dd.rarity-legendary { color: #ffe39a; }
.hero-equipped-list dd.rarity-corrupted { color: #ffc3e5; }
.hero-command-summary { margin-top: 9px; padding: 0 4px; }
.hero-command-heading { display: block; margin-bottom: 6px; color: var(--muted); font-size: .6rem; }
.hero-command-list { display: grid; grid-template-columns: 1fr; gap: 5px; margin: 0; padding: 0; list-style: none; }
.hero-command-slot { display: grid; grid-template-columns: 14px 22px minmax(0, 1fr); align-items: center; gap: 5px; min-width: 0; min-height: 32px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: rgb(var(--accent-rgb) / 5%); }
.hero-command-slot.empty { opacity: .52; }
.hero-command-number { color: var(--gold); font-size: .6rem; text-align: center; }
.hero-command-slot .command-icon { width: 22px; height: 22px; }
.hero-command-slot strong { min-width: 0; font-size: .68rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.current-skill-build .section-heading { margin-bottom: 4px; }
.build-rule { max-width: 760px; margin: 4px 0 12px; line-height: 1.55; }
.current-skill-list { border-top: 1px solid var(--line); }
.current-skill-entry { border-bottom: 1px solid rgb(255 255 255 / 8%); }
.current-skill-entry.duplicated { border-left: 2px solid var(--gold); background: rgb(var(--accent-rgb) / 4%); }
.current-skill-trigger { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; width: 100%; min-height: 58px; padding: 8px 7px 8px 9px; border: 0; border-radius: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left; transition: background-color 120ms ease, transform 80ms ease; }
.current-skill-trigger:hover, .current-skill-trigger[aria-expanded="true"] { background: rgb(var(--accent-rgb) / 8%); }
.current-skill-trigger:active { transform: scale(.985); background: rgb(var(--accent-rgb) / 14%); }
.current-skill-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.current-skill-name strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.current-skill-name .tag { flex: 0 0 auto; min-width: 50px; justify-content: center; font-size: .6rem; }
.current-skill-count { color: var(--gold-strong); font-size: .86rem; font-weight: 700; }
.current-skill-meta { display: flex; grid-column: 1 / 3; gap: 7px; min-width: 0; color: var(--muted); font-size: .65rem; }
.current-skill-meta b { flex: 0 0 auto; color: #d8ca9d; font-weight: 500; }
.current-skill-meta b { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.skill-stack-note { margin: 7px 0; color: #88b0c4; font-size: .65rem; line-height: 1.6; }
.skill-stack-badge { display: inline-block; padding: 1px 5px; border: 1px solid rgb(101 169 204 / 28%); border-radius: 3px; color: #98c7df; font-size: .55rem; white-space: nowrap; }
.ability-picker-stack { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; padding-top: 6px; border-top: 1px solid rgb(97 158 192 / 15%); font-size: .61rem; line-height: 1.6; }
.ability-picker-stack b { color: #92cce5; font-weight: 500; white-space: nowrap; }
.ability-picker-stack > span { color: #b4c8d3; overflow-wrap: anywhere; }
.current-skill-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-skill-chevron { grid-column: 3; grid-row: 1 / 3; color: var(--muted); transition: transform 140ms ease; }
.current-skill-trigger[aria-expanded="true"] .current-skill-chevron { color: var(--gold); transform: rotate(180deg); }
.current-skill-detail { padding: 0 10px 11px; animation: skill-tip-in 140ms ease-out; }
.current-skill-detail > p { margin: 2px 0 8px; color: #e1dece; font-size: .74rem; line-height: 1.6; }
.current-skill-detail .build-stack-note { color: var(--gold-strong); }
.current-skill-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 5px; }
.current-skill-sources button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 38px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--form-surface); color: var(--text); cursor: pointer; text-align: left; }
.current-skill-sources button:active { transform: scale(.98); background: rgb(var(--accent-rgb) / 12%); }
.current-skill-sources span { color: var(--gold); font-size: .64rem; }
.current-skill-sources strong { overflow: hidden; font-size: .7rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.current-skill-sources i { color: var(--muted); font-style: normal; }
.inventory-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.item-card { position: relative; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.item-card.item-menu-available { cursor: pointer; transition: border-color 140ms ease, background 140ms ease, transform 90ms ease; }
.party-color-red { --party-color: #aa625c; --party-color-rgb: 170 98 92; }
.party-color-blue { --party-color: #5f87ad; --party-color-rgb: 95 135 173; }
.party-color-green { --party-color: #6d956f; --party-color-rgb: 109 149 111; }
.party-color-pink { --party-color: #ae718d; --party-color-rgb: 174 113 141; }
.party-color-orange { --party-color: #b47d51; --party-color-rgb: 180 125 81; }
.party-color-purple { --party-color: #8c75ad; --party-color-rgb: 140 117 173; }
.party-color-amber { --party-color: #aa914f; --party-color-rgb: 170 145 79; }
.party-color-slate { --party-color: #78909c; --party-color-rgb: 120 144 156; }
.party-color-ember { --party-color: #c06b45; --party-color-rgb: 192 107 69; }
.party-color-cyan { --party-color: #4fa6bd; --party-color-rgb: 79 166 189; }
.party-color-indigo { --party-color: #7079bd; --party-color-rgb: 112 121 189; }
.party-color-crimson { --party-color: #b45769; --party-color-rgb: 180 87 105; }
.party-color-parchment { --party-color: #aa8b5c; --party-color-rgb: 170 139 92; }
.party-color-teal { --party-color: #4b9a8f; --party-color-rgb: 75 154 143; }
.party-color-silver { --party-color: #a0a8b5; --party-color-rgb: 160 168 181; }
.party-color-gold { --party-color: #b6a04f; --party-color-rgb: 182 160 79; }
.party-color-violet { --party-color: #9b69b2; --party-color-rgb: 155 105 178; }
.item-card.equipped { border: 3px solid var(--party-color, #6d956f); }
.item-card.special { box-shadow: inset 0 0 0 1px #7c6231; }
.item-card.corrupted { background: linear-gradient(150deg, rgb(91 31 71 / 16%), var(--surface) 42%); box-shadow: inset 0 0 0 1px rgb(183 79 139 / 42%), 0 0 18px rgb(112 35 86 / 13%); }
.item-card.located { border-color: var(--gold); box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 20%), 0 0 24px rgb(var(--accent-rgb) / 14%); animation: located-item-pulse 700ms ease-out; }
.gear-rarity-common, .rarity-common { --gear-rarity-rgb: 137 145 156; --gear-rarity-text: #d5d9e0; }
.gear-rarity-rare, .rarity-rare { --gear-rarity-rgb: 106 175 226; --gear-rarity-text: #a9dcff; }
.gear-rarity-epic, .rarity-epic { --gear-rarity-rgb: 197 138 255; --gear-rarity-text: #e3c3ff; }
.gear-rarity-legendary, .rarity-legendary { --gear-rarity-rgb: 239 194 87; --gear-rarity-text: #ffe39a; }
.item-card[class*="gear-rarity-"] { border-color: rgb(var(--gear-rarity-rgb) / 72%); }
.item-card[class*="gear-rarity-"].equipped { border-color: rgb(var(--gear-rarity-rgb)); }
.item-card[class*="gear-rarity-"].located { border-color: rgb(var(--gear-rarity-rgb)); outline: 2px solid var(--text); outline-offset: 2px; }
.warehouse-item-card { padding: 10px 11px; }
.item-preset-refs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 7px; }
.item-preset-refs > span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 7px; border: 1px solid rgb(var(--accent-rgb) / 34%); border-radius: 999px; background: rgb(var(--accent-rgb) / 8%); color: #d7d1bb; font-size: .59rem; }
.item-preset-refs b { color: var(--gold-strong); }
@keyframes located-item-pulse { 0% { background: rgb(var(--accent-rgb) / 18%); } 100% { background: var(--surface); } }
.item-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.item-card > .item-head, .forge-selected-item > .item-head { flex-wrap: wrap; }
.warehouse-item-card .item-head { align-items: center; margin-bottom: 5px; }
.warehouse-item-card .item-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.warehouse-item-card .item-head .rarity-badge, .warehouse-item-card .item-head .condensation-badge, .warehouse-item-card .item-head .corruption-badge, .warehouse-item-card .item-head .recent-loot-badge { margin: 0; }
.item-state { display: inline-flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 4px; }
.equipment-owner-badge { position: relative; display: inline-flex; width: 30px; height: 30px; flex: 0 0 30px; align-items: center; justify-content: center; margin-left: 3px; color: var(--text); vertical-align: middle; }
.equipment-owner-badge[class*="party-color-"]::after { content: ""; position: absolute; right: 0; bottom: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--party-color); box-shadow: 0 0 4px rgb(0 0 0 / 65%); }
.equipment-owner-icon, .equipment-owner-icon .actor-image { display: block; width: 30px; height: 30px; object-fit: contain; }
.equipment-owner-unknown { font-weight: 700; }
.item-protected-lock { display: inline-flex; align-items: center; justify-content: center; margin-right: 2px; }
.item-protection-toggle { display: grid; width: 30px; height: 30px; flex: 0 0 30px; padding: 0; place-items: center; border: 1px solid #4e5148; border-radius: 50%; background: rgb(0 0 0 / 18%); color: #666a62; font-size: 1rem; line-height: 1; cursor: pointer; transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 80ms ease; }
.item-protection-toggle.active { border-color: #bd913d; background: rgb(157 112 34 / 18%); color: #ffd66d; box-shadow: 0 0 9px rgb(238 184 68 / 28%), inset 0 0 5px rgb(255 222 137 / 12%); text-shadow: 0 0 6px rgb(255 210 92 / 58%); }
.item-protection-toggle:active:not(:disabled) { transform: scale(.9); }
.item-protection-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.item-protection-toggle:disabled { cursor: not-allowed; opacity: .45; }
.recent-loot-badge { display: inline-flex; min-height: 20px; align-items: center; justify-content: center; margin-left: 5px; padding: 3px 7px; border: 1px solid #e9bd4f; border-radius: 999px; background: linear-gradient(180deg, #f4cf62, #bc7925); color: #241605; box-shadow: 0 0 10px rgb(238 181 64 / 28%); font-family: system-ui, sans-serif; font-size: .56rem; font-weight: 900; line-height: 1; letter-spacing: .08em; vertical-align: middle; white-space: nowrap; }
.rarity-common { color: var(--gear-rarity-text); }
.rarity-rare { color: var(--gear-rarity-text); }
.rarity-epic { color: var(--gear-rarity-text); }
.rarity-legendary { color: var(--gear-rarity-text); }
.rarity-badge { display: inline-flex; min-height: 20px; align-items: center; justify-content: center; margin-right: 5px; padding: 3px 8px; border: 1px solid currentcolor; border-radius: 999px; font-size: .62rem; font-weight: 700; line-height: 1; letter-spacing: .06em; vertical-align: middle; white-space: nowrap; }
.rarity-badge:is(.rarity-common, .rarity-rare, .rarity-epic, .rarity-legendary) { border-color: rgb(var(--gear-rarity-rgb) / 82%); background: linear-gradient(180deg, rgb(var(--gear-rarity-rgb) / 22%), rgb(var(--gear-rarity-rgb) / 9%)); color: var(--gear-rarity-text); box-shadow: inset 0 1px rgb(255 255 255 / 6%); }
.condensation-badge { display: inline-flex; min-height: 20px; align-items: center; justify-content: center; margin-right: 5px; padding: 3px 8px; border: 1px solid #6f9f85; border-radius: 999px; background: rgb(72 126 96 / 22%); color: #bce5ca; font-size: .62rem; font-weight: 700; line-height: 1; letter-spacing: .06em; vertical-align: middle; white-space: nowrap; }
.corruption-badge { display: inline-flex; min-height: 20px; align-items: center; justify-content: center; margin-right: 5px; padding: 3px 8px; border: 1px solid #a44779; border-radius: 999px; background: linear-gradient(180deg, rgb(137 39 99 / 43%), rgb(64 20 53 / 48%)); color: #ffc3e5; box-shadow: 0 0 10px rgb(190 57 137 / 19%); font-size: .62rem; font-weight: 800; line-height: 1; letter-spacing: .06em; vertical-align: middle; white-space: nowrap; }
.item-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; }
.item-title-row h3 { min-width: 0; margin: 0; }
.item-stats { color: var(--muted); font-size: .76rem; }
.warehouse-item-card .item-title-row .item-stats { flex: 0 1 auto; color: #c5c2b4; font-size: .7rem; text-align: right; white-space: nowrap; }
.item-stat-comparison { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgb(var(--accent-rgb) / 14%); font-size: .67rem; line-height: 1.35; }
.item-stat-comparison-label { margin-right: 2px; color: var(--muted); white-space: nowrap; }
.item-stat-delta { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.item-stat-delta.gain { color: #afe3b5; }
.item-stat-delta.loss { color: #ffb0aa; }
.item-stat-delta strong { font-weight: 800; }
.item-stat-same { color: var(--muted); }
.item-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; }
.item-meta-line:empty { display: none; }
.equipment-family-note { margin: 2px 0 5px; color: var(--muted); font-size: .64rem; line-height: 1.35; }
.condensation-note { margin: 5px 0 0; color: #9fd5b2; font-size: .68rem; line-height: 1.45; }
.warehouse-item-card .item-meta-line { margin-top: 4px; }
.warehouse-item-card .equipment-family-note, .warehouse-item-card .condensation-note { margin: 0; font-size: .61rem; line-height: 1.3; }
.implicit-trait-note, .corruption-note { display: grid; gap: 2px; margin-top: 7px; padding: 7px 8px; border: 1px solid rgb(var(--accent-rgb) / 25%); border-left: 2px solid var(--gold); border-radius: 5px; background: rgb(var(--accent-rgb) / 6%); font-size: .68rem; line-height: 1.45; }
.warehouse-item-card .implicit-trait-note, .warehouse-item-card .corruption-note { grid-template-columns: auto minmax(0, 1fr); gap: 4px 9px; margin-top: 6px; padding: 5px 7px; font-size: .62rem; line-height: 1.35; }
.warehouse-item-card .implicit-trait-note { border: 0; border-left: 2px solid var(--gold); border-radius: 0 4px 4px 0; background: linear-gradient(90deg, rgb(var(--accent-rgb) / 7%), transparent 72%); }
.warehouse-item-card .implicit-trait-note strong, .warehouse-item-card .corruption-note strong { white-space: nowrap; }
.implicit-trait-note strong { color: var(--gold-strong); }
.implicit-trait-note span { color: #c8c5b6; }
.implicit-trait-note { display: block; padding: 0; }
.implicit-trait-note summary { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 5px 8px; cursor: pointer; list-style: none; }
.implicit-trait-note summary::-webkit-details-marker { display: none; }
.implicit-trait-note summary small { color: #a7a38f; font-size: .6rem; letter-spacing: .08em; }
.implicit-trait-note summary span { margin-left: auto; color: var(--gold); }
.implicit-trait-note p { margin: 0; padding: 0 8px 7px; color: #c8c5b6; overflow-wrap: anywhere; }
.warehouse-item-card .implicit-trait-note { display: block; padding: 0; }
.equipment-build-warning { padding: 8px 10px; border-left: 2px solid var(--gold); background: rgb(var(--accent-rgb) / 8%); font-size: .75rem; line-height: 1.5; }
.corruption-note { border-color: rgb(180 65 130 / 47%); border-left-color: #d663a5; background: rgb(111 31 83 / 15%); }
.corruption-note strong { color: #ffc3e5; }
.corruption-note span { color: #d2a8c1; }
.condensation-change { margin: 10px 0; padding: 9px 10px; border: 1px solid #557b65; border-left: 3px solid #76ad8d; border-radius: 6px; background: rgb(72 126 96 / 13%); color: #c6dfcd; font-size: .74rem; line-height: 1.55; }
.condensation-change strong { display: block; color: #aee0bd; }
.condensation-change.lost { border-color: #8e664f; border-left-color: #c3875f; background: rgb(139 82 52 / 14%); color: #e0c4b3; }
.condensation-change.lost strong { color: #f0b48d; }
.slots { display: grid; gap: 5px; margin: 9px 0; }
.slot { display: grid; grid-template-columns: 25px 1fr; gap: 6px; align-items: start; font-size: .78rem; }
.warehouse-item-card .slots { grid-template-columns: 1fr; gap: 3px; margin: 7px 0 5px; }
.warehouse-item-card .slot { grid-template-columns: 21px minmax(0, 1fr); align-items: center; gap: 5px; min-height: 34px; padding: 2px 4px; overflow: visible; border: 1px solid rgb(var(--accent-rgb) / 14%); border-radius: 5px; background: rgb(0 0 0 / 11%); font-size: .67rem; }
.warehouse-item-card .slot.tip-open { grid-template-columns: 21px minmax(0, 1fr); align-items: start; }
.warehouse-item-card .slot.tip-open > .slot-badge { margin-top: 5px; }
.slot.unavailable { opacity: .46; }
.slot.unavailable .slot-badge { color: var(--muted); }
.slot.inherited-skill { padding: 5px 7px; border: 1px solid rgb(var(--abyss-violet-rgb) / 46%); border-left: 3px solid var(--abyss-crystal); border-radius: 6px; background: linear-gradient(100deg, rgb(var(--abyss-crystal-rgb) / 12%), rgb(var(--abyss-violet-rgb) / 9%) 58%, transparent); box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 0 12px rgb(var(--abyss-crystal-rgb) / 7%); }
.warehouse-item-card .slot.inherited-skill { border: 0; border-left: 3px solid var(--abyss-crystal); border-radius: 0 4px 4px 0; background: linear-gradient(100deg, rgb(var(--abyss-crystal-rgb) / 10%), rgb(var(--abyss-violet-rgb) / 7%) 58%, transparent); box-shadow: none; }
.slot.inherited-skill > .slot-badge { color: #aeeaff; filter: drop-shadow(0 0 4px rgb(var(--abyss-crystal-rgb) / 38%)); }
.inherited-skill-badge, .inherited-item-tag { display: inline-flex; min-height: 18px; align-items: center; justify-content: center; padding: 2px 6px; border: 1px solid rgb(var(--abyss-violet-rgb) / 58%); border-radius: 999px; background: linear-gradient(135deg, rgb(var(--abyss-crystal-rgb) / 19%), rgb(var(--abyss-violet-rgb) / 22%)); color: #d8c8ff; box-shadow: 0 0 8px rgb(var(--abyss-violet-rgb) / 12%); font-size: .5rem; font-weight: 800; line-height: 1; letter-spacing: .06em; white-space: nowrap; }
.skill-tip-trigger .inherited-skill-badge { align-self: center; }
.inherited-item-tag { margin-left: 4px; color: #dbcaff; }
.slot-badge { justify-content: center; min-height: 21px; padding: 1px; border-radius: 4px; color: var(--gold); }
.skill-slot-icon { display: block; width: 19px; height: 19px; object-fit: contain; }
.slot-content { min-width: 0; }
.skill-tip-trigger { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; width: 100%; min-height: 30px; margin: -4px 0; padding: 3px 5px; border: 0; border-radius: 5px; background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.skill-tip-trigger strong { font-size: inherit; font-weight: 500; text-decoration: underline dotted rgb(var(--accent-rgb) / 58%); text-underline-offset: 3px; }
.warehouse-item-card .skill-tip-trigger { position: relative; flex-wrap: wrap; min-height: 30px; margin: 0; padding: 2px 18px 2px 2px; gap: 2px 5px; }
.warehouse-item-card .skill-tip-trigger strong { flex: 0 1 auto; min-width: 0; overflow: visible; font-size: .67rem; text-overflow: clip; white-space: normal; }
.warehouse-item-card .skill-tip-trigger > .muted, .warehouse-item-card .lineage-policy { font-size: .5rem; white-space: nowrap; }
.warehouse-item-card .skill-tip-cue { position: absolute; top: 50%; right: 1px; margin: 0; font-size: .58rem; transform: translateY(-50%); }
.skill-tip-trigger[aria-expanded="true"] { background: rgb(var(--tips-rgb) / 14%); color: var(--tips-heading); }
.skill-tip-cue { margin-left: auto; color: #777b6d; font-size: .72rem; }
.skill-tip-trigger[aria-expanded="true"] .skill-tip-cue { color: var(--tips-accent); }
.skill-tip-panel { margin-top: 7px; padding: 8px 9px; border: 1px solid var(--tips-border); border-left: 3px solid var(--tips-accent); border-radius: 5px; background: linear-gradient(145deg, var(--tips-surface), var(--tips-surface-deep)); box-shadow: 0 8px 20px rgb(0 0 0 / 28%), inset 0 1px rgb(255 255 255 / 5%); animation: skill-tip-in 140ms ease-out; }
.skill-tip-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.skill-tip-meta span { padding: 2px 6px; border-radius: 99px; background: var(--tag-surface); color: var(--muted); font-size: .62rem; }
.skill-tip-panel p { margin: 6px 0 0; color: var(--tips-text); font-size: .72rem; line-height: 1.55; }
.skill-tip-extraction { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; margin-top: 9px; }
.skill-tip-extraction .item-action { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 5px 9px; font-size: .7rem; }
.skill-tip-extraction small { color: var(--muted); font-size: .62rem; line-height: 1.4; }
@keyframes skill-tip-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
.item-menu-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 34px; margin-top: 8px; padding: 5px 8px; border: 1px solid transparent; border-radius: 5px; background: rgb(255 255 255 / 2%); color: #aaa794; cursor: pointer; font-size: .65rem; text-align: left; }
.warehouse-item-card .item-menu-trigger { min-height: 30px; margin-top: 5px; padding: 4px 7px; }
.item-menu-trigger:hover, .item-menu-trigger[aria-expanded="true"] { border-color: rgb(var(--accent-rgb) / 24%); background: rgb(var(--accent-rgb) / 7%); color: var(--gold-strong); }
.item-menu-trigger i { color: var(--gold); font-size: .86rem; font-style: normal; }
.item-management-menu { margin-top: 5px; padding-top: 8px; border-top: 1px solid rgb(var(--accent-rgb) / 18%); animation: item-management-menu-in 150ms ease-out; }
.item-management-menu .item-forge-shortcuts { margin: 0 0 8px; padding-top: 0; border-top: 0; }
@keyframes item-management-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.item-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.item-action { min-height: 36px; padding: 6px 9px; font-size: .75rem; }
.item-forge-shortcuts { display: grid; gap: 5px; margin: 10px 0 8px; padding-top: 8px; border-top: 1px solid rgb(var(--accent-rgb) / 14%); }
.item-forge-shortcuts > span { color: #a8a491; font-size: .62rem; letter-spacing: .04em; }
.item-forge-shortcuts > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.forge-shortcut-button { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; border-color: #665b3d; background: rgb(var(--accent-rgb) / 6%); color: #ddd4b8; }
.forge-shortcut-button:not(:disabled):hover { border-color: #9a7c3e; background: rgb(var(--accent-rgb) / 13%); color: var(--gold-strong); }
.equip-confirm-backdrop { position: fixed; z-index: 190; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 82%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.equip-confirm-dialog { width: min(560px, 100%); max-height: calc(100dvh - 32px); padding: 18px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--accent-border-strong); border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 60%); animation: forge-dialog-in 180ms ease-out; }
.equip-confirm-dialog h2 { margin: 3px 0 5px; }
.equip-confirm-flow { display: grid; gap: 7px; margin: 14px 0; }
.equip-confirm-card { padding: 11px; border: 1px solid var(--line); border-left: 3px solid #626754; border-radius: 7px; background: var(--card-dark); }
.equip-confirm-card.selected { border-color: #7c6635; border-left-color: var(--gold); background: rgb(var(--accent-rgb) / 7%); }
.equip-confirm-card.empty { min-height: 72px; }
.equip-confirm-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.equip-confirm-card-head .eyebrow { margin-bottom: 2px; }
.equip-confirm-card-head h3 { margin: 0; font-size: .96rem; }
.equip-confirm-section { margin-top: 9px; }
.equip-confirm-section > strong { display: block; margin-bottom: 4px; color: var(--muted); font-size: .64rem; font-weight: 500; letter-spacing: .06em; }
.equip-confirm-section .slots { margin-bottom: 0; }
.equip-confirm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin: 0; }
.equip-confirm-stats div { display: flex; justify-content: space-between; gap: 8px; min-width: 0; padding: 4px 0; border-bottom: 1px solid rgb(255 255 255 / 6%); font-size: .7rem; }
.equip-confirm-stats dt { color: var(--muted); }
.equip-confirm-stats dd { margin: 0; color: var(--text); font-weight: 700; }
.equip-confirm-arrow { display: grid; place-items: center; min-height: 31px; color: var(--gold-strong); line-height: 1; }
.equip-confirm-arrow span { font-size: 1.35rem; }
.equip-confirm-arrow small { margin-top: -2px; color: var(--muted); font-size: .58rem; letter-spacing: .08em; }
.equip-confirm-actions { position: sticky; bottom: -18px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; margin: 0 -18px -18px; padding: 10px 18px 18px; background: linear-gradient(180deg, rgb(var(--panel-end-rgb) / 20%), var(--dialog) 22%); }
body.equip-modal-open { overflow: hidden; }
.extract-action { border-color: #7d693d; color: var(--gold-strong); }
.item-extraction-picker { display: grid; gap: 9px; margin-top: 10px; padding: 11px; border: 1px solid var(--accent-border); border-radius: 7px; background: var(--card-dark); box-shadow: inset 3px 0 0 var(--gold); }
.item-extraction-picker > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.item-extraction-choices { display: grid; gap: 6px; }
.extraction-choice { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 7px; width: 100%; text-align: left; }
.extraction-choice.selected { border-color: var(--gold); background: rgb(var(--accent-rgb) / 12%); color: var(--gold-strong); }
.item-extraction-picker .warning { margin: 0; line-height: 1.55; }
.equipment-extraction-backdrop { position: fixed; z-index: 195; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 84%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.equipment-extraction-dialog { width: min(440px, 100%); max-height: calc(100dvh - 32px); padding: 18px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--accent-border-strong); border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 62%); animation: forge-dialog-in 180ms ease-out; }
.equipment-extraction-dialog h2 { margin: 3px 0 5px; }
.equipment-extraction-source { display: grid; gap: 4px; margin-top: 14px; padding: 10px; border: 1px solid var(--line); border-left: 3px solid #8f594c; border-radius: 7px; background: var(--card-dark); }
.equipment-extraction-source .tag { width: fit-content; }
.equipment-extraction-source strong { font-size: .92rem; }
.equipment-extraction-source small { color: var(--muted); line-height: 1.45; }
.equipment-extraction-skill { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-top: 9px; padding: 10px; border: 1px solid var(--accent-border); border-radius: 7px; background: rgb(var(--accent-rgb) / 8%); }
.core-icon { display: block; width: 28px; height: 28px; flex: 0 0 28px; object-fit: contain; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 36%)); }
.equipment-extraction-skills { display: grid; gap: 7px; margin-top: 9px; }
.equipment-extraction-skills .equipment-extraction-skill { margin-top: 0; }
.equipment-extraction-skill div { display: grid; gap: 2px; min-width: 0; }
.equipment-extraction-skill small { color: var(--muted); font-size: .62rem; }
.equipment-extraction-skill strong { overflow-wrap: anywhere; }
.equipment-extraction-description { margin: 7px 2px 0; line-height: 1.55; }
.equipment-extraction-summary { display: grid; margin: 12px 0 0; border-top: 1px solid var(--line); }
.equipment-extraction-summary div { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid rgb(255 255 255 / 7%); font-size: .72rem; }
.equipment-extraction-summary dt { color: var(--muted); }
.equipment-extraction-summary dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.equipment-extraction-cost { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; color: var(--gold-strong); }
.equipment-extraction-cost .inline-resource-icon { margin-right: 2px; }
.equipment-extraction-warning { margin: 12px 0; padding: 9px 10px; border-left: 3px solid var(--red); background: rgb(130 54 44 / 13%); color: #e6a99d; font-size: .72rem; line-height: 1.55; }
.equipment-extraction-actions { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8px; }
body.equipment-extraction-modal-open { overflow: hidden; }
.core-extraction-reveal-backdrop { position: fixed; z-index: 230; inset: 0; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: rgb(4 5 3 / 84%); backdrop-filter: blur(4px); animation: core-reveal-backdrop-in 220ms ease-out both; }
.core-extraction-reveal-cut { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px); padding: 20px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #8b75b1; border-radius: 12px; background: linear-gradient(155deg, rgb(38 32 50 / 98%), rgb(22 24 19 / 98%) 58%); box-shadow: 0 28px 80px rgb(0 0 0 / 72%), inset 0 1px 0 rgb(255 255 255 / 7%); text-align: center; animation: core-reveal-cut-in 460ms cubic-bezier(.2, .82, .2, 1) both; }
.core-extraction-reveal-stage { --core-reveal-rgb: 131 105 193; --core-reveal-ring: #bca0e9; position: relative; display: grid; width: 132px; height: 132px; margin: 0 auto 8px; place-items: center; }
.core-extraction-reveal-stage::before { position: absolute; width: 96px; height: 96px; border-radius: 50%; background: rgb(var(--core-reveal-rgb) / 42%); box-shadow: 0 0 42px rgb(var(--core-reveal-rgb) / 58%); content: ""; animation: core-reveal-glow-in 1320ms 80ms ease-out both; }
.core-extraction-reveal-ring { position: absolute; width: 102px; height: 102px; border: 1px solid var(--core-reveal-ring); border-radius: 50%; box-shadow: 0 0 18px rgb(var(--core-reveal-rgb) / 42%); animation: core-reveal-ring-in 1320ms 100ms ease-out both; }
.core-extraction-reveal-source, .core-extraction-reveal-output { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; }
.core-extraction-reveal-source { animation: core-reveal-equipment-out 1320ms 80ms ease-in-out both; }
.core-extraction-reveal-equipment-icon { display: block; width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 10px 20px rgb(0 0 0 / 58%)); }
.core-extraction-reveal-core { display: grid; width: 92px; height: 92px; flex: 0 0 92px; place-items: center; opacity: 0; animation: core-reveal-core-in 1320ms 80ms cubic-bezier(.2, .82, .2, 1) both; }
.core-extraction-reveal-core-icon { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgb(0 0 0 / 58%)); }
.core-extraction-reveal-output.multiple .core-extraction-reveal-core { width: 58px; height: 58px; flex-basis: 58px; }
.core-extraction-reveal-output.multiple .core-extraction-reveal-core + .core-extraction-reveal-core { margin-left: -12px; }
.core-extraction-reveal-core.reveal-core-order-2 { animation-delay: 140ms; }
.core-extraction-reveal-core.reveal-core-order-3 { animation-delay: 200ms; }
.core-extraction-reveal-count { position: absolute; z-index: 2; right: 11px; bottom: 13px; display: grid; min-width: 32px; height: 32px; padding: 0 7px; place-items: center; border: 1px solid var(--core-reveal-ring); border-radius: 99px; background: #302641; color: #f1e7ff; box-shadow: 0 5px 14px rgb(0 0 0 / 45%); font-weight: 700; animation: core-reveal-copy-in 380ms 1150ms ease-out both; }
.core-extraction-reveal-cut > .eyebrow { margin-bottom: 6px; color: #bda5e7; animation: core-reveal-copy-in 420ms 1080ms ease-out both; }
.core-extraction-reveal-cut h2 { margin: 0; font-size: 1.08rem; line-height: 1.65; animation: core-reveal-copy-in 460ms 1140ms ease-out both; }
.core-extraction-reveal-cut h2 span { color: #e4c8ff; text-shadow: 0 0 18px rgb(155 112 219 / 38%); }
.core-extraction-reveal-results { display: grid; gap: 6px; margin: 15px 0; text-align: left; }
.core-extraction-reveal-result { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgb(180 145 227 / 28%); border-radius: 7px; background: rgb(126 94 174 / 9%); animation: core-reveal-result-in 420ms ease-out both; }
.core-extraction-reveal-result.reveal-order-1 { animation-delay: 1280ms; }
.core-extraction-reveal-result.reveal-order-2 { animation-delay: 1360ms; }
.core-extraction-reveal-result.reveal-order-3 { animation-delay: 1440ms; }
.core-extraction-reveal-result.reveal-order-4 { animation-delay: 1520ms; }
.core-extraction-reveal-result > div { display: grid; min-width: 0; }
.core-extraction-reveal-result strong { color: #eee7f6; overflow-wrap: anywhere; }
.core-extraction-reveal-result small { color: var(--muted); font-size: .64rem; }
.core-extraction-reveal-result.material-reward { border-color: rgb(240 201 112 / 40%); background: rgb(139 97 26 / 14%); }
.core-extraction-reveal-material-icon { display: grid; width: 28px; height: 28px; place-items: center; color: var(--gold-strong); }
.core-extraction-reveal-material-icon img { display: block; width: 28px; height: 28px; object-fit: contain; }
.core-extraction-reveal-result.material-reward > div { grid-column: 2; }
.core-extraction-reveal-result.material-reward strong, .ascension-reward { color: var(--gold-strong); }
.ascension-material-inline-icon { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.core-extraction-reveal-actions { display: grid; grid-template-columns: 1fr; animation: core-reveal-copy-in 420ms 1510ms ease-out both; }
body.core-extraction-reveal-open { overflow: hidden; }
@keyframes core-reveal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes core-reveal-cut-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes core-reveal-glow-in { 0%, 34% { opacity: 0; transform: scale(.45); } 72% { opacity: 1; transform: scale(1.16); } 100% { opacity: .82; transform: scale(1); } }
@keyframes core-reveal-ring-in { 0%, 38% { opacity: 0; transform: scale(.62) rotate(-18deg); } 70% { opacity: 1; } 100% { opacity: .7; transform: scale(1.2) rotate(0); } }
@keyframes core-reveal-equipment-out { 0%, 32% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); } 58% { opacity: .12; transform: scale(.82); filter: blur(7px) brightness(2); } 100% { opacity: 0; transform: scale(.74); filter: blur(10px) brightness(2.2); } }
@keyframes core-reveal-core-in { 0%, 38% { opacity: 0; transform: scale(.7); filter: blur(8px) brightness(2); } 72% { opacity: 1; transform: scale(1.08); filter: blur(0) brightness(1.3); } 100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); } }
@keyframes core-reveal-copy-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes core-reveal-result-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
.command-register { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.command-slot-trigger { display: grid; grid-template-columns: 22px 34px minmax(0, 1fr) 16px; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 68px; padding: 8px 9px; border: 1px solid #555242; border-radius: 8px; background: linear-gradient(145deg, rgb(var(--accent-rgb) / 5%), var(--inset) 48%); color: var(--text); cursor: pointer; text-align: left; transition: border-color 130ms ease, background-color 130ms ease, transform 80ms ease; }
.command-slot-trigger:hover, .command-slot-trigger[aria-expanded="true"] { border-color: var(--accent-border-strong); background: linear-gradient(145deg, rgb(var(--accent-rgb) / 13%), var(--surface) 55%); }
.command-slot-trigger:active:not(:disabled) { transform: scale(.985); }
.command-slot-trigger:disabled { cursor: default; opacity: .68; }
.command-slot-trigger.empty { border-style: dashed; }
.command-slot-number { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #69634f; border-radius: 50%; background: rgb(0 0 0 / 20%); color: var(--gold-strong); font-family: serif; font-size: .7rem; font-weight: 700; }
.command-slot-trigger .command-icon { width: 34px; height: 34px; }
.command-slot-copy { display: grid; min-width: 0; gap: 1px; }
.command-slot-copy small { color: var(--gold); font-size: .48rem; letter-spacing: .08em; }
.command-slot-copy strong, .command-slot-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-slot-copy strong { color: #eee9d9; font-size: .8rem; }
.command-slot-copy > span { color: var(--muted); font-size: .56rem; }
.command-slot-trigger > i { color: #898470; font-size: 1rem; font-style: normal; }
.command-slot-trigger[aria-expanded="true"] > i { color: var(--gold-strong); }

/* 工房で能力配置と3技を続けて整える。スマホでも3列を維持する。 */
.member-command-deck { min-width: 0; display: grid; gap: 8px; }
.member-command-heading, .ability-plan-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.member-command-heading > span { display: flex; align-items: baseline; gap: 8px; }
.member-command-heading strong { font-size: .78rem; }
.member-command-heading small { color: var(--gold); font-size: .64rem; }
.member-command-heading .text-button { min-height: 44px; padding: 4px 8px; font-size: .72rem; }
.member-command-guide { margin: 0; font-size: .63rem; line-height: 1.55; }
.member-command-deck.compact { padding: 8px 10px 10px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(115deg, rgb(var(--accent-rgb) / 8%), var(--inset)); }
.member-command-deck.compact .command-register { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.member-command-deck.compact .command-slot-trigger { grid-template-columns: minmax(0, 1fr); position: relative; min-height: 56px; padding: 8px 6px 7px 22px; gap: 2px; }
.member-command-deck.compact .command-slot-number { position: absolute; top: 9px; left: 5px; width: 14px; height: 14px; font-size: .53rem; }
.member-command-deck.compact .command-slot-copy strong { font-size: .72rem; }
.member-command-deck.compact .command-slot-copy > span { font-size: .55rem; }
.member-command-deck.compact .command-slot-trigger > i { display: none; }
.ability-plan-toolbar { padding: 0 2px; }
.ability-plan-toolbar > span { display: grid; gap: 1px; min-width: 0; }
.ability-plan-toolbar small { color: var(--muted); font-size: .47rem; letter-spacing: .12em; }
.ability-plan-toolbar strong { color: var(--gold-strong); font-size: .8rem; }
.ability-plan-toolbar .secondary-button { min-height: 44px; padding: 7px 10px; font-size: .7rem; }
.command-picker-backdrop { position: fixed; z-index: 205; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 86%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.command-picker-dialog { display: flex; flex-direction: column; width: min(570px, 100%); max-height: calc(100dvh - 32px); padding: 18px; overflow: hidden; border: 1px solid var(--accent-border-strong); border-radius: 11px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 64%); animation: forge-dialog-in 180ms ease-out; }
.command-picker-heading { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 12px; }
.command-picker-heading h2 { margin: 3px 0 0; color: var(--text); font-size: 1.08rem; }
.command-picker-close { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 1.25rem; cursor: pointer; }
.command-picker-dialog > p { flex: 0 0 auto; margin: 9px 0 13px; }
.command-picker-options { display: grid; gap: 7px; overflow-y: auto; overscroll-behavior: contain; }
.command-picker-option { display: grid; grid-template-columns: 46px minmax(0, 1fr) 28px; align-items: center; gap: 9px; width: 100%; min-height: 68px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--inset); color: var(--text); cursor: pointer; text-align: left; }
.command-picker-option:hover:not(:disabled) { border-color: #746b50; background: var(--surface-hover); }
.command-picker-option.selected { border-color: var(--selected-border); background: linear-gradient(135deg, var(--selected-start), var(--selected-end)); box-shadow: inset 3px 0 0 var(--gold); }
.command-picker-option:disabled { cursor: default; opacity: .48; }
.command-picker-option-icon, .command-picker-empty-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #4f5145; border-radius: 9px; background: var(--icon-surface); }
.command-picker-option-icon .command-icon { width: 38px; height: 38px; }
.command-picker-empty-icon { color: #989687; font-size: 1.5rem; }
.command-picker-option-copy { display: grid; min-width: 0; gap: 3px; }
.command-picker-option-copy > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.command-picker-option-copy strong { overflow: hidden; color: #eee9d9; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.skill-glossary-term { font-weight: 700; }
.command-picker-option-copy b { flex: 0 0 auto; color: #cfc39b; font-size: .58rem; font-weight: 500; }
.command-picker-option-copy small { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: .63rem; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.command-picker-option > i { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #55584b; border-radius: 50%; color: transparent; font-size: .72rem; font-style: normal; }
.command-picker-option.selected > i { border-color: var(--selected-border); background: var(--selected-start); color: var(--selected-text); }
.command-picker-option:disabled > i { color: #c8bd95; }
.command-picker-option > em { grid-column: 2 / 4; margin-top: -3px; color: #c8bd95; font-size: .57rem; font-style: normal; }
.command-picker-empty { margin-top: 3px; }
body.command-picker-modal-open { overflow: hidden; }
.battle-command-rescue-backdrop { --abyss-modal-accent-rgb: 214 174 72; }
.battle-command-rescue-dialog { --abyss-modal-accent-rgb: 214 174 72; }
.battle-command-rescue-note { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgb(214 174 72 / 16%); color: #c9b56f; }
.battle-command-rescue-note span { font-size: .63rem; text-shadow: 0 0 9px rgb(214 174 72 / 52%); }
.battle-command-rescue-note small { color: #9e9a89; font-size: .59rem; }
.command-button.command-rescue-available { position: relative; overflow: visible; border-color: rgb(214 174 72 / 72%); background: radial-gradient(circle at 50% 28%, rgb(214 174 72 / 17%), transparent 48%), linear-gradient(180deg, rgb(25 30 28 / 98%), rgb(11 15 16 / 98%)); box-shadow: 0 0 0 1px rgb(214 174 72 / 16%), 0 0 15px rgb(214 174 72 / 13%), inset 0 1px rgb(255 244 194 / 8%); animation: command-rescue-pulse 1.8s ease-in-out infinite; }
.command-button.command-rescue-available:is(:hover, :focus-visible) { border-color: #e8c761; outline: 0; background: radial-gradient(circle at 50% 28%, rgb(214 174 72 / 25%), transparent 52%), linear-gradient(180deg, rgb(31 35 30 / 98%), rgb(13 17 17 / 98%)); }
.command-button.command-rescue-available .command-meta { color: #ddc878; }
.command-rescue-beacon { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: #f0d36e; box-shadow: 0 0 8px rgb(240 211 110 / 88%); }
@keyframes command-rescue-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgb(214 174 72 / 16%), 0 0 12px rgb(214 174 72 / 9%), inset 0 1px rgb(255 244 194 / 8%); } 50% { box-shadow: 0 0 0 1px rgb(214 174 72 / 30%), 0 0 20px rgb(214 174 72 / 22%), inset 0 1px rgb(255 244 194 / 11%); } }
@media (prefers-reduced-motion: reduce) { .command-button.command-rescue-available { animation: none; } }
.forge-screen { overflow: hidden; }
.forge-operation-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 13px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: rgb(0 0 0 / 18%); }
.mutated-skill strong, .mutation-effect-note { color: #ffc3e5; }
.forge-operation-tabs button { display: grid; gap: 2px; min-height: 54px; padding: 7px 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; }
.forge-operation-tabs button strong { color: inherit; font-size: .84rem; }
.forge-operation-tabs button small { color: inherit; font-size: .6rem; }
.forge-operation-tabs button.selected { border-color: var(--accent-border); background: linear-gradient(135deg, rgb(var(--accent-rgb) / 16%), rgb(var(--accent-rgb) / 6%)); color: var(--gold-strong); box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%); }
.forge-operation-panel { margin-top: 13px; padding-top: 13px; border-top: 1px solid rgb(255 255 255 / 7%); }
.forge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.forge-selection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.forge-field { min-width: 0; }
.forge-field-label { display: block; margin-bottom: 5px; color: var(--text); font-size: .82rem; }
.forge-picker-trigger { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 52px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--inset); color: var(--text); cursor: pointer; text-align: left; }
.forge-picker-trigger.selected { border-color: var(--accent-border); background: linear-gradient(90deg, rgb(var(--accent-rgb) / 8%), var(--inset) 42%); }
.forge-picker-trigger[aria-expanded="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 12%); }
.forge-picker-value { display: grid; min-width: 0; }
.forge-picker-value strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge-picker-value small, .forge-picker-placeholder { color: var(--muted); }
.forge-picker-chevron { color: var(--gold); font-size: 1rem; transition: transform 150ms ease; }
.forge-picker-trigger[aria-expanded="true"] .forge-picker-chevron { transform: rotate(180deg); }
.forge-picker-menu { display: grid; gap: 5px; max-height: min(48vh, 460px); margin-top: 5px; padding: 6px; overflow-y: auto; border: 1px solid var(--accent-border); border-radius: 7px; background: var(--surface-deep); box-shadow: 0 14px 28px rgb(0 0 0 / 34%); overscroll-behavior: contain; }
.forge-picker-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-bottom-color: rgb(255 255 255 / 7%); border-radius: 5px; background: var(--surface-hover); color: var(--text); cursor: pointer; text-align: left; }
.forge-picker-option:hover:not(:disabled), .forge-picker-option.selected { border-color: var(--accent-border); background: var(--surface-2); }
.forge-picker-option-main { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; }
.forge-picker-option-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge-picker-option-main small { min-width: 0; margin-left: auto; color: var(--muted); }
.forge-picker-option-detail { grid-column: 1; color: var(--muted); font-size: .65rem; line-height: 1.45; overflow-wrap: anywhere; }
.forge-picker-option:disabled { opacity: .62; }
.forge-picker-disabled-reason { grid-column: 1; color: #dfa092; font-size: .62rem; line-height: 1.4; }
.forge-picker-option-skills { display: grid; grid-column: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.forge-picker-skill { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 2px 5px; min-width: 0; padding: 5px 6px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 4px; background: var(--inset); color: #d8d4c1; font-size: .66rem; line-height: 1.3; }
.forge-picker-skill b { display: grid; grid-row: 1 / 3; width: 20px; height: 20px; place-items: center; border-radius: 3px; background: var(--tag-surface); color: var(--gold); font-size: .62rem; }
.forge-picker-skill span { min-width: 0; overflow-wrap: anywhere; }
.forge-picker-skill small { grid-column: 2; color: var(--muted); font-size: .56rem; }
.forge-picker-skill.unavailable { opacity: .48; }
.forge-picker-check { grid-column: 2; grid-row: 1 / 4; align-self: center; color: transparent; }
.forge-picker-option.selected .forge-picker-check { color: var(--gold); }
.forge-selected-item { margin-top: 7px; padding: 10px; border-left: 2px solid var(--accent-border); background: rgb(0 0 0 / 13%); }
.forge-selected-item h3 { margin: 4px 0 8px; font-size: .95rem; }
.forge-selected-section { margin-top: 7px; }
.forge-selected-section > strong { display: block; margin-bottom: 3px; color: var(--muted); font-size: .64rem; font-weight: 500; letter-spacing: .06em; }
.forge-selected-section > p { margin: 0; color: #d7d4c4; font-size: .7rem; line-height: 1.5; }
.forge-selected-section .slots { margin-bottom: 0; }
.forge-base-notice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; margin: 12px 0 0; padding: 8px 10px; border-left: 3px solid var(--gold); background: rgb(var(--accent-rgb) / 7%); color: #d8d3bd; font-size: .7rem; }
.forge-base-notice span { color: var(--muted); }
.forge-slot-field { margin: 14px 0; }
.forge-slot-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.forge-slot-option { display: grid; gap: 3px; min-width: 0; min-height: 54px; padding: 7px 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.forge-slot-option strong { color: var(--gold-strong); font-size: .78rem; }
.forge-slot-option small { overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.forge-slot-option.selected { border-color: var(--gold); background: rgb(var(--accent-rgb) / 12%); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 16%); }
.forge-preview { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.forge-preview > .danger-button { width: 100%; margin-top: 12px; }
.tempering-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tempering-stat-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 7px; min-width: 0; min-height: 64px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); cursor: pointer; text-align: left; }
.tempering-stat-option > span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tempering-stat-option > span strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.tempering-stat-option > b { color: var(--gold-strong); font-size: .86rem; }
.tempering-stat-option > small { align-self: end; color: var(--muted); font-size: .56rem; line-height: 1.35; }
.tempering-stat-option > em { align-self: end; color: #aaa58e; font-size: .57rem; font-style: normal; text-align: right; }
.tempering-stat-option:hover:not(:disabled), .tempering-stat-option.selected { border-color: var(--gold); background: rgb(var(--accent-rgb) / 11%); }
.tempering-stat-option.selected { box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 18%); }
.tempering-stat-option:disabled { opacity: .5; cursor: default; }
.tempering-preview > .primary-button { width: 100%; margin-top: 11px; }
.tempering-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0; border-top: 1px solid var(--line); }
.tempering-preview-grid div { display: flex; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 7px; border-bottom: 1px solid rgb(255 255 255 / 7%); font-size: .7rem; }
.tempering-preview-grid div:nth-child(odd) { border-right: 1px solid rgb(255 255 255 / 7%); }
.tempering-preview-grid dt { color: var(--muted); }
.tempering-preview-grid dd { margin: 0; color: var(--text); font-weight: 700; text-align: right; }
.forge-tempering-cost-warning { margin: 10px 0; padding: 9px 10px; border-left: 3px solid var(--gold); background: rgb(var(--accent-rgb) / 9%); color: #ddd4b8; font-size: .72rem; line-height: 1.5; }
.tempering-result { display: grid; gap: 6px; margin-top: 14px; padding: 13px; border: 1px solid #66604b; border-left: 4px solid #77705d; border-radius: 8px; background: rgb(0 0 0 / 18%); outline: 0; }
.tempering-result.improved { border-color: #688852; border-left-color: #91bd68; background: rgb(71 111 50 / 10%); }
.tempering-result h3, .tempering-result p { margin: 0; }
.tempering-result h3 { font-size: .96rem; }
.tempering-result p { color: #d9d5c3; }
.tempering-result p i { padding: 0 5px; color: var(--gold); font-style: normal; }
.tempering-result p b { color: var(--gold-strong); }
.tempering-result small { color: var(--muted); font-size: .64rem; }
.tempering-result-roll { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 6px; background: rgb(0 0 0 / 15%); }
.tempering-result-roll span { color: var(--muted); font-size: .66rem; }
.tempering-result-roll strong { color: var(--gold-strong); font-size: 1rem; }
.tempering-result-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tempering-result-values > span { display: grid; gap: 3px; min-width: 0; padding: 7px 5px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 6px; color: var(--muted); font-size: .62rem; text-align: center; }
.tempering-result-values strong { color: var(--text); font-size: .87rem; font-variant-numeric: tabular-nums; }
.tempering-result-values > span:last-child strong { color: var(--gold-strong); }
.forge-animation-setting { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; color: var(--muted); font-size: .7rem; }
.forge-animation-setting .setting-choices { width: auto; margin: 0; }
.forge-tempering-reveal-backdrop { position: fixed; z-index: 185; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 84%); backdrop-filter: blur(4px); }
.forge-tempering-reveal-dialog { width: min(400px, 100%); max-height: calc(100dvh - 32px); padding: 24px 20px; overflow-y: auto; border: 1px solid var(--accent-border-strong); border-radius: 12px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 65%); text-align: center; outline: 0; }
.forge-tempering-reveal-dialog.improved { border-color: #91bd68; }
.forge-tempering-reveal-dialog h2 { margin: 6px 0; font-size: 1.18rem; }
.forge-tempering-reveal-item { margin: 0; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.forge-tempering-reveal-stage { position: relative; display: grid; width: 152px; height: 152px; margin: 18px auto; place-items: center; border: 1px solid rgb(212 170 85 / 52%); border-radius: 50%; background: radial-gradient(circle, rgb(212 170 85 / 18%), rgb(0 0 0 / 7%) 70%); }
.forge-tempering-reveal-stage.settled { border-color: #8796a4; }
.forge-tempering-reveal-dialog.improved .forge-tempering-reveal-stage { border-color: #91bd68; background: radial-gradient(circle, rgb(145 189 104 / 22%), rgb(0 0 0 / 7%) 70%); }
.forge-tempering-reveal-halo { position: absolute; inset: 9px; border: 2px dashed rgb(212 170 85 / 56%); border-radius: 50%; }
.forge-tempering-reveal-stage.spinning .forge-tempering-reveal-halo { animation: forge-tempering-spin 1.4s linear infinite; }
.forge-tempering-reveal-value { color: var(--gold-strong); font-family: serif; font-size: 2.25rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.forge-tempering-reveal-dialog.improved .forge-tempering-reveal-value { color: #b8de93; }
.forge-tempering-reveal-outcome { margin-bottom: 16px; padding: 11px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 7px; background: rgb(0 0 0 / 16%); }
.forge-tempering-reveal-outcome p { margin: 0 0 5px; font-size: .82rem; }
.forge-tempering-reveal-outcome small { color: var(--muted); font-size: .68rem; }
.forge-tempering-reveal-outcome .tempering-result-values { margin-bottom: 10px; }
.forge-tempering-reveal-actions { display: grid; gap: 8px; margin-top: 14px; }
.forge-tempering-reveal-actions > button { width: 100%; }
.forge-tempering-reveal-dialog > .primary-button { width: 100%; }
@keyframes forge-tempering-spin { to { transform: rotate(360deg); } }
.forge-confirm-backdrop { position: fixed; z-index: 180; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 78%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.forge-confirm-dialog { width: min(440px, 100%); max-height: calc(100dvh - 32px); padding: 18px; overflow-y: auto; border: 1px solid var(--accent-border-strong); border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 60%); animation: forge-dialog-in 180ms ease-out; }
.forge-confirm-dialog h2 { margin: 3px 0 12px; }
.forge-confirm-summary { display: grid; margin: 15px 0; border-top: 1px solid var(--line); }
.forge-confirm-summary div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid rgb(255 255 255 / 7%); font-size: .76rem; }
.forge-confirm-summary dt { color: var(--muted); }
.forge-confirm-summary dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.forge-loss-warning { margin: 10px 0; padding: 9px 10px; border-left: 3px solid var(--red); background: rgb(130 54 44 / 13%); color: #e6a99d; font-size: .74rem; line-height: 1.55; }
.forge-confirm-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; }
body.forge-modal-open { overflow: hidden; }
body.forge-equipment-picker-open { overflow: hidden; }
.forge-equipment-picker-backdrop { position: fixed; z-index: 190; inset: 0; display: grid; place-items: center; padding: 12px; background: rgb(4 5 3 / 86%); backdrop-filter: blur(5px); overscroll-behavior: contain; }
.forge-equipment-picker-dialog { display: flex; flex-direction: column; width: min(980px, 100%); height: min(88dvh, 760px); min-height: 260px; min-width: 0; overflow: hidden; border: 1px solid var(--accent-border-strong); border-radius: 11px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 65%); }
.forge-equipment-picker-heading { display: flex; flex: 0 0 auto; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.forge-equipment-picker-heading > div { min-width: 0; }
.forge-equipment-picker-heading .eyebrow { margin: 0; }
.forge-equipment-picker-heading h2 { margin: 2px 0 3px; font-size: 1.02rem; }
.forge-equipment-picker-heading p { margin: 0; line-height: 1.45; }
.forge-equipment-picker-heading .inventory-filter-close { width: 44px; height: 44px; }
.forge-equipment-picker-content { flex: 1 1 auto; min-height: 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.forge-equipment-picker-content .forge-choice-list { max-height: none; }
.forge-select-trigger { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 9px 12px; border: 1px solid var(--accent-border); border-radius: 8px; background: var(--inset); color: var(--text); cursor: pointer; text-align: left; }
.forge-select-trigger:hover, .forge-select-trigger:focus-visible { border-color: var(--gold); background: var(--surface-hover); }
.forge-select-trigger > span { display: grid; gap: 2px; min-width: 0; }
.forge-select-trigger strong { font-size: .81rem; }
.forge-select-trigger small { color: var(--muted); font-size: .64rem; }
.forge-select-trigger > i { color: var(--gold); font-size: 1.1rem; font-style: normal; }
.forge-select-icon { width: 36px; height: 36px; object-fit: contain; }
.forge-outcome { display: grid; gap: 9px; margin: 10px 0; padding: 12px; border: 1px solid var(--accent-border); border-radius: 8px; background: var(--inset); }
.forge-outcome-heading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.forge-outcome-icon { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; }
.forge-outcome-heading > div { flex: 1 1 auto; min-width: 0; }
.forge-outcome-heading .eyebrow { margin: 0; font-size: .58rem; }
.forge-outcome h3 { margin: 1px 0 0; color: var(--text); font-size: .95rem; overflow-wrap: anywhere; }
.forge-outcome-grade { flex: 0 0 auto; color: var(--gold-strong); font-size: .74rem; font-weight: 700; }
.forge-outcome-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: #c5c2b4; font-size: .68rem; }
.forge-outcome-skills { display: grid; gap: 4px; }
.forge-outcome-skills > strong { color: var(--muted); font-size: .65rem; }
.forge-outcome .forge-picker-option-skills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.forge-outcome-sources { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.forge-outcome-sources > span { display: grid; min-width: 0; gap: 2px; }
.forge-outcome-sources small { color: var(--muted); font-size: .58rem; }
.forge-outcome-sources b { font-size: .69rem; overflow-wrap: anywhere; }
.forge-outcome-sources > i { color: var(--gold); font-style: normal; }
.forge-outcome p { margin: 0; font-size: .68rem; line-height: 1.5; }
.forge-outcome-consumed { color: var(--muted); }
.forge-outcome .forge-outcome-warning, .forge-choice-card .forge-outcome-warning { margin: 0; padding: 5px 7px; border-left: 2px solid var(--red); background: rgb(130 54 44 / 11%); color: #e6a99d; font-size: .66rem; line-height: 1.45; }
.forge-outcome.compact { gap: 7px; padding: 9px; }
.forge-confirm-cost { margin: 10px 0; color: var(--gold-strong); font-weight: 700; }
.forge-operation-tabs button .forge-operation-count { justify-self: start; margin-top: 3px; padding: 1px 6px; border-radius: 999px; background: rgb(145 189 104 / 16%); color: #b9dd95; font-size: .56rem; font-weight: 700; }
.forge-operation-tabs button .forge-operation-count.none { background: rgb(255 255 255 / 6%); color: var(--muted); font-weight: 500; }
.forge-operation-intro { margin-top: 10px; padding: 10px 11px; border: 1px solid rgb(var(--accent-rgb) / 22%); border-radius: 8px; background: rgb(var(--accent-rgb) / 5%); }
.forge-operation-intro.compact { padding: 7px 10px; }
.forge-swap-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 5px 7px; }
.forge-swap-guide > .forge-guide-side { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: .69rem; line-height: 1.4; }
.forge-guide-side > span { display: grid; gap: 2px; min-width: 0; }
.forge-guide-icon { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; }
.forge-swap-guide b { color: var(--gold-strong); font-size: .6rem; }
.forge-swap-guide i { color: var(--gold); font-style: normal; }
.forge-swap-guide small { grid-column: 1 / -1; color: var(--muted); font-size: .61rem; }
.forge-equipped-toggle { justify-content: center; min-height: 38px; }
.forge-operation-benefit { margin: 0 0 8px; color: #e4ddc4; font-size: .76rem; line-height: 1.6; }
.forge-operation-facts { display: grid; gap: 4px; margin: 0; }
.forge-operation-facts div { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 6px; align-items: baseline; font-size: .68rem; line-height: 1.5; }
.forge-operation-facts dt { justify-self: start; padding: 0 6px; border-radius: 3px; font-size: .6rem; font-weight: 700; }
.forge-operation-facts dd { margin: 0; color: #d7d3c1; }
.forge-operation-facts .keep dt { background: rgb(96 140 190 / 20%); color: #a9c8ec; }
.forge-operation-facts .gain dt { background: rgb(145 189 104 / 18%); color: #b9dd95; }
.forge-operation-facts .cost dt { background: rgb(190 96 80 / 20%); color: #e8aa9c; }
.forge-step { margin-top: 14px; }
.forge-step-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--muted); font-size: .84rem; }
.forge-step-title b { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: .7rem; }
.forge-step.current .forge-step-title { color: var(--gold-strong); }
.forge-step.current .forge-step-title b { border-color: var(--gold); background: rgb(var(--accent-rgb) / 18%); color: var(--gold-strong); }
.forge-step.done .forge-step-title { color: var(--text); }
.forge-step.done .forge-step-title b { border-color: #688852; background: rgb(71 111 50 / 30%); color: #b9dd95; }
.forge-step-placeholder { margin: 0; padding: 10px; border: 1px dashed var(--line); border-radius: 7px; text-align: center; }
.forge-step-lead { margin: 0 0 7px; }
.forge-finder { display: grid; gap: 7px; }
.forge-part-chips { display: flex; gap: 5px; margin: 0 -2px; padding: 2px 2px 4px; overflow-x: auto; scrollbar-width: none; }
.forge-part-chips::-webkit-scrollbar { display: none; }
.forge-part-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; min-height: 34px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--inset); color: var(--muted); font-size: .72rem; cursor: pointer; white-space: nowrap; }
.forge-part-chip small { color: inherit; font-size: .6rem; opacity: .8; }
.forge-part-chip .forge-chip-icon { width: 16px; height: 16px; object-fit: contain; }
.forge-part-chip.selected { border-color: var(--gold); background: rgb(var(--accent-rgb) / 16%); color: var(--gold-strong); }
.forge-part-chip:disabled { opacity: .4; cursor: default; }
.forge-finder-tools { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto auto; gap: 6px; align-items: center; }
.forge-part-filter-trigger { min-height: 38px; }
.forge-sort-trigger { min-height: 38px; }
.forge-part-filter-backdrop .inventory-filter-option { grid-template-columns: 36px minmax(0, 1fr) auto 26px; }
.forge-part-filter-backdrop .inventory-filter-option > small { color: var(--muted); font-size: .62rem; white-space: nowrap; }
.forge-part-filter-backdrop .inventory-filter-option:disabled { opacity: .48; cursor: default; }
.forge-search-toggle { min-height: 38px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--inset); color: var(--text); cursor: pointer; font: inherit; font-size: .7rem; }
.forge-search-toggle[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-strong); }
.forge-finder > .forge-search { display: block; }
.forge-material-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.forge-material-toolbar .forge-step-lead { flex: 1 1 100%; margin: 0; }
.forge-material-tools { display: grid; grid-template-columns: minmax(120px, 1fr) auto; align-items: center; gap: 6px; width: 100%; }
.forge-skill-count-filter { display: grid; gap: 5px; min-width: 0; margin: 3px 0 2px; }
.forge-skill-count-filter > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; color: var(--text); font-size: .7rem; font-weight: 700; }
.forge-skill-count-filter > span small { color: var(--muted); font-size: .6rem; font-weight: 400; }
.forge-skill-count-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: min(100%, 420px); }
.forge-skill-count-options button { min-width: 0; min-height: 38px; padding: 5px 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--inset); color: var(--muted); cursor: pointer; font: inherit; font-size: .68rem; white-space: nowrap; }
.forge-skill-count-options button.selected { border-color: var(--selected-border); background: linear-gradient(180deg, var(--selected-start), var(--selected-end)); color: var(--selected-text); font-weight: 700; }
.forge-search input { width: 100%; min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--inset); color: var(--text); font: inherit; font-size: .78rem; }
.forge-material-search { display: block; margin-bottom: 6px; }
.forge-equipped-note { color: #e8c38b; font-size: .62rem; }
.forge-search input:focus { border-color: var(--gold); outline: 0; }
.forge-finder-count { margin: 0; }
.forge-item-list { display: grid; gap: 5px; }
.forge-choice-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.forge-choice-card { display: grid; align-content: start; gap: 5px; min-width: 0; }
.forge-choice-card > .item-card { height: 100%; }
.forge-choice-card.selected > .item-card { outline: 2px solid var(--gold); outline-offset: 2px; }
.forge-choice-card.recommended > .item-card { box-shadow: inset 0 0 0 1px #688852; }
.forge-choice-context { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; color: var(--muted); font-size: .64rem; }
.forge-choice-context .forge-list-hint { color: #b9dd95; font-weight: 700; }
.forge-choice-context .forge-list-hint.muted { color: var(--muted); }
.forge-choice-context .forge-list-hint.neutral { color: #e9c983; }
.forge-consumed-tag { color: #e6a99d; }
.forge-choice-action { width: 100%; min-height: 38px; }
.forge-choice-changes { display: flex; flex-wrap: wrap; gap: 4px; margin: 1px 0; }
.forge-selected-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.forge-selected-heading .tag { font-size: .65rem; }
.forge-selected-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px 9px; }
.forge-selected-actions .text-button { min-height: 32px; }
.forge-clear-selection { color: var(--muted); font-size: .67rem; }
.forge-list-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px 9px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); cursor: pointer; text-align: left; }
.forge-list-row:hover { border-color: var(--accent-border); }
.forge-list-row.selected { border-color: var(--gold); background: rgb(var(--accent-rgb) / 12%); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 16%); }
.forge-list-icon { display: grid; align-self: start; width: 34px; height: 34px; place-items: center; border-radius: 7px; background: var(--inset); }
.forge-list-icon .forge-list-part-icon { width: 24px; height: 24px; object-fit: contain; }
.forge-list-main { display: grid; gap: 3px; min-width: 0; }
.forge-list-main > strong { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.forge-list-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--muted); font-size: .64rem; }
.forge-list-grade { color: #d7d3c1; font-weight: 700; }
.forge-list-meta .equipment-owner-badge, .forge-list-meta .equipment-owner-icon, .forge-list-meta .equipment-owner-icon .actor-image { width: 20px; height: 20px; flex-basis: 20px; }
.forge-list-meta .equipment-owner-badge { margin-left: 0; }
.forge-list-flag { padding: 0 5px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 3px; color: #cfc9b2; font-size: .6rem; }
.forge-list-row .forge-picker-option-skills, .forge-selected-item .forge-picker-option-skills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.forge-list-row .forge-picker-skill { grid-template-columns: 14px minmax(0, 1fr); gap: 3px; padding: 2px 4px; font-size: .6rem; }
.forge-list-row .forge-picker-skill b { grid-row: auto; width: 14px; height: 14px; background: transparent; }
.forge-list-row .forge-picker-skill b img { width: 14px; height: 14px; }
.forge-list-row .forge-picker-skill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge-list-row .forge-picker-skill.empty span { color: var(--muted); }
.forge-list-hint { display: grid; justify-items: end; gap: 1px; max-width: 7.5em; text-align: right; }
.forge-list-hint b { font-size: .66rem; line-height: 1.3; }
.forge-list-hint small { color: var(--muted); font-size: .58rem; line-height: 1.3; }
.forge-list-hint.good b { color: #b9dd95; }
.forge-list-hint.muted b { color: var(--muted); font-weight: 500; }
.forge-list-hint.neutral b { color: #e9c983; }
.forge-list-empty { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 7px; text-align: center; }
.forge-list-more { width: 100%; }
.forge-selected-item .item-head .forge-change-base { margin-left: auto; }
.forge-change-base, .forge-blocked-toggle, .forge-detail-toggle { font-size: .72rem; }
.forge-material-row { grid-template-columns: 34px minmax(0, 1fr); }
.forge-material-row.recommended { border-color: #688852; }
.forge-material-row.recommended.selected { border-color: var(--gold); }
.forge-material-row.weaker { opacity: .72; }
.forge-material-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.forge-material-title strong { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.forge-recommend-tag { padding: 1px 6px; border-radius: 3px; background: #5f8a45; color: #f3f8ec; font-size: .58rem; font-weight: 700; }
.forge-verdict { padding: 0 5px; border-radius: 3px; font-size: .58rem; font-weight: 700; }
.forge-verdict.up { background: rgb(145 189 104 / 16%); color: #b9dd95; }
.forge-verdict.down, .forge-verdict.same { background: rgb(190 96 80 / 18%); color: #e8aa9c; }
.forge-verdict.mixed { background: rgb(214 170 84 / 16%); color: #e9c983; }
.forge-delta-list { display: flex; flex-wrap: wrap; gap: 3px; }
.forge-delta { padding: 1px 5px; border-radius: 3px; background: rgb(255 255 255 / 5%); color: #cfc9b2; font-size: .6rem; white-space: nowrap; }
.forge-delta b { margin-left: 3px; }
.forge-delta.up b { color: #b9dd95; }
.forge-delta.down { background: rgb(190 96 80 / 10%); }
.forge-delta.down b { color: #e8aa9c; }
.forge-delta.same { color: var(--muted); }
.forge-delta-list-large .forge-delta { padding: 3px 7px; font-size: .7rem; }
.forge-blocked-list { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.forge-blocked-list li { display: grid; gap: 2px; padding: 6px 9px; border: 1px solid rgb(255 255 255 / 6%); border-radius: 6px; background: rgb(0 0 0 / 14%); font-size: .72rem; opacity: .8; }
.forge-diff-table { display: grid; margin: 8px 0; border-top: 1px solid var(--line); }
.forge-diff-table div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid rgb(255 255 255 / 7%); font-size: .74rem; }
.forge-diff-table dt { color: var(--muted); }
.forge-diff-table dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.forge-diff-table dd b { color: var(--gold-strong); }
.forge-keep-note { margin: 8px 0; color: #cfdcef; }
.forge-core-link { align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 7%); }
.tempering-stat-meter { grid-column: 1 / -1; width: 100%; height: 5px; overflow: hidden; border: 0; border-radius: 999px; background: rgb(255 255 255 / 8%); appearance: none; }
.tempering-stat-meter::-webkit-progress-bar { border-radius: 999px; background: rgb(255 255 255 / 8%); }
.tempering-stat-meter::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #8a6d33, var(--gold)); }
.tempering-stat-meter::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #8a6d33, var(--gold)); }
@media (max-width: 700px) {
  .forge-equipment-picker-backdrop { padding: 8px; }
  .forge-equipment-picker-dialog { width: 100%; height: min(90dvh, 760px); }
  .forge-equipment-picker-heading { padding: 12px; }
  .forge-equipment-picker-content { padding: 10px 11px calc(12px + env(safe-area-inset-bottom)); }
  .forge-finder-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forge-list-row { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 7px 8px; }
  .forge-material-row { grid-template-columns: 30px minmax(0, 1fr); }
  .forge-list-icon { width: 30px; height: 30px; }
  .forge-operation-tabs button { padding: 6px 7px; }
}
.core-apply-confirm-backdrop { position: fixed; z-index: 205; inset: 0; display: grid; place-items: center; padding: 16px; overflow: hidden; background: radial-gradient(circle at 50% 34%, rgb(92 69 143 / 24%), rgb(4 5 3 / 88%) 56%); backdrop-filter: blur(5px); animation: forge-backdrop-in 150ms ease-out; }
.core-apply-confirm-dialog { width: min(460px, 100%); max-height: calc(100dvh - 32px); padding: 19px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; border: 1px solid #8973ac; border-radius: 11px; background: linear-gradient(155deg, rgb(38 32 50 / 99%), var(--dialog) 48%); box-shadow: 0 26px 76px rgb(0 0 0 / 68%), inset 0 1px 0 rgb(255 255 255 / 6%); animation: forge-dialog-in 180ms ease-out; }
.core-apply-confirm-heading { display: flex; align-items: center; gap: 11px; }
.core-apply-confirm-heading .eyebrow { margin-bottom: 2px; color: #bda5e7; }
.core-apply-confirm-heading h2 { margin: 0; font-size: 1.08rem; }
.core-apply-confirm-emblem { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border: 1px solid rgb(189 165 231 / 45%); border-radius: 50%; background: rgb(126 94 174 / 18%); box-shadow: 0 0 24px rgb(126 94 174 / 20%); }
.core-apply-confirm-icon { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 5px 10px rgb(0 0 0 / 45%)); }
.core-apply-confirm-target { display: grid; gap: 2px; margin-top: 16px; padding: 10px 11px; border: 1px solid var(--line); border-left: 3px solid #9d79cc; border-radius: 7px; background: rgb(0 0 0 / 18%); }
.core-apply-confirm-target span, .core-apply-confirm-target small { color: var(--muted); font-size: .64rem; }
.core-apply-confirm-target strong { overflow-wrap: anywhere; }
.core-apply-confirm-change { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 7px; margin-top: 10px; }
.core-apply-confirm-change > div { display: grid; align-content: center; gap: 4px; min-width: 0; min-height: 70px; padding: 9px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 7px; background: rgb(0 0 0 / 16%); }
.core-apply-confirm-change > div.after { border-color: rgb(189 165 231 / 42%); background: rgb(126 94 174 / 13%); }
.core-apply-confirm-change span { color: var(--muted); font-size: .61rem; }
.core-apply-confirm-change strong { overflow-wrap: anywhere; font-size: .78rem; }
.core-apply-confirm-change .after strong { color: #e4c8ff; }
.core-apply-confirm-change > i { align-self: center; color: #c2a0ee; font-size: 1.1rem; font-style: normal; }
.core-apply-confirm-summary { display: grid; margin: 12px 0 0; border-top: 1px solid var(--line); }
.core-apply-confirm-summary div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 1px; border-bottom: 1px solid rgb(255 255 255 / 7%); font-size: .72rem; }
.core-apply-confirm-summary dt { color: var(--muted); }
.core-apply-confirm-summary dd { margin: 0; color: var(--gold-strong); font-weight: 700; text-align: right; }
.core-apply-confirm-warning { margin: 12px 0; padding: 9px 10px; border-left: 3px solid var(--red); background: rgb(130 54 44 / 14%); color: #dfb0a8; font-size: .71rem; line-height: 1.55; }
.core-apply-confirm-warning strong { display: block; color: #efb4aa; }
.core-apply-confirm-actions { display: grid; grid-template-columns: .82fr 1.18fr; gap: 8px; }
.skill-level { color: #d6b8f0; font-size: .68em; white-space: nowrap; }
.skill-mastery-gauge { display: flex; width: min(240px, 100%); height: 4px; gap: 1px; margin: 6px 0 2px; }
.skill-mastery-segment { min-width: 2px; flex: 1 1 0; border-radius: 1px; background: rgb(235 244 246 / 58%); box-shadow: 0 0 0 1px rgb(255 255 255 / 5%); }
.skill-mastery-segment.filled { background: linear-gradient(90deg, #58bfe1, #9ce5f5); box-shadow: 0 0 5px rgb(88 191 225 / 42%); }
.skill-mastery-gauge.max .skill-mastery-segment.filled { background: linear-gradient(90deg, #a881d4, #e0c4fa); box-shadow: 0 0 5px rgb(174 138 211 / 45%); }
.skill-mastery-detail { color: #d6b8f0; font-size: .71rem; }
.skill-reinforce-panel { display: grid; gap: 10px; }
.skill-reinforce-row { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgb(255 255 255 / 3%); }
.skill-reinforce-heading { display: flex; align-items: center; gap: 9px; }
.skill-reinforce-heading > div { display: grid; gap: 3px; min-width: 0; }
.skill-reinforce-heading small { color: var(--muted); font-size: .66rem; }
.skill-ascension-next { margin: 0; color: #d9c18e; font-size: .68rem; }
.skill-reinforce-row progress { width: 100%; height: 5px; accent-color: #ae8ad3; }
.skill-reinforce-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-reinforce-actions .item-action { flex: 1 1 auto; min-width: 96px; }
.skill-raised-cores { border-top: 1px solid var(--line); padding-top: 8px; }
.skill-raised-cores summary { color: var(--gold-strong); cursor: pointer; font-size: .76rem; }
.skill-raised-cores > div { display: grid; gap: 6px; max-height: 210px; margin-top: 9px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.skill-raised-cores .item-action { width: 100%; text-align: left; }
.skill-raised-cores small { display: block; margin-top: 5px; color: var(--muted); }
.core-vault-screen { display: grid; gap: 14px; }
.core-vault-overview { position: relative; isolation: isolate; display: grid; gap: 13px; overflow: hidden; border-color: rgb(var(--abyss-crystal-rgb) / 30%); background: radial-gradient(circle at 8% 0%, rgb(var(--abyss-violet-rgb) / 18%), transparent 34%), radial-gradient(circle at 92% 100%, rgb(var(--abyss-crystal-rgb) / 9%), transparent 32%), linear-gradient(145deg, rgb(20 27 34 / 98%), rgb(11 16 22 / 99%)); box-shadow: 0 16px 38px rgb(0 0 0 / 35%), inset 0 1px rgb(255 255 255 / 6%); }
.core-vault-overview::before { position: absolute; z-index: -1; top: 0; right: 11%; left: 11%; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--abyss-violet-rgb) / 72%), rgb(var(--abyss-crystal-rgb) / 70%), transparent); box-shadow: 0 0 13px rgb(var(--abyss-crystal-rgb) / 24%); content: ""; }
.core-vault-overview::after { position: absolute; z-index: -1; right: -70px; bottom: -92px; width: 210px; height: 210px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 7%); border-radius: 50%; box-shadow: inset 0 0 0 20px rgb(var(--abyss-violet-rgb) / 2%), inset 0 0 0 42px rgb(var(--abyss-crystal-rgb) / 2%); content: ""; }
.core-vault-heading { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.core-vault-heading > .abyss-mechanism-mark { width: 48px; height: 48px; flex-basis: 48px; }
.core-vault-heading .abyss-mechanism-gear { width: 40px; height: 40px; }
.core-vault-heading .abyss-mechanism-crystal { width: 16px; height: 16px; }
.core-vault-heading > div:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.core-vault-heading h2 { margin: 0; font-family: "Yu Mincho", serif; font-size: 1.23rem; letter-spacing: .06em; }
.core-vault-heading > div:nth-child(2) > span { color: #90a9b1; font-size: .62rem; line-height: 1.45; }
.core-vault-capacity { display: grid; min-width: 84px; justify-items: end; gap: 2px; padding-left: 12px; border-left: 1px solid rgb(var(--abyss-crystal-rgb) / 18%); }
.core-vault-capacity small { color: var(--abyss-crystal); font-size: .44rem; letter-spacing: .15em; }
.core-vault-capacity strong { color: #e8f5f6; font-family: Georgia, serif; font-size: 1rem; font-variant-numeric: tabular-nums; }
.core-vault-capacity strong i { color: #75878e; font-size: .55rem; font-style: normal; }
.core-vault-capacity progress { width: 76px; height: 3px; overflow: hidden; border: 0; border-radius: 99px; background: rgb(255 255 255 / 8%); accent-color: var(--abyss-crystal); }
.core-vault-capacity progress::-webkit-progress-bar { background: rgb(255 255 255 / 8%); }
.core-vault-capacity progress::-webkit-progress-value { background: linear-gradient(90deg, var(--abyss-violet), var(--abyss-crystal)); box-shadow: 0 0 8px rgb(var(--abyss-crystal-rgb) / 55%); }
.core-vault-guidance { margin: 0; padding: 10px 12px; border-left: 2px solid rgb(var(--abyss-crystal-rgb) / 58%); background: rgb(var(--abyss-crystal-rgb) / 5%); color: #a9b8bd; font-size: .68rem; line-height: 1.6; }
.core-vault-extract-link { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; width: 100%; min-height: 58px; align-items: center; gap: 10px; padding: 8px 12px; border-color: rgb(var(--abyss-violet-rgb) / 38%); background: linear-gradient(115deg, rgb(var(--abyss-violet-rgb) / 13%), rgb(var(--abyss-crystal-rgb) / 5%)); text-align: left; }
.core-vault-extract-link .button-icon { width: 32px; height: 32px; }
.core-vault-extract-link > span { display: grid; min-width: 0; gap: 2px; }
.core-vault-extract-link strong { color: #e9edf0; font-size: .77rem; }
.core-vault-extract-link small { color: #879aa1; font-size: .58rem; }
.core-vault-extract-link > i { color: var(--abyss-crystal); font-size: 1.25rem; font-style: normal; }
.core-vault-operation-panel, .core-vault-list-panel { position: relative; overflow: hidden; border-color: rgb(115 145 157 / 28%); background: linear-gradient(145deg, rgb(24 31 37 / 97%), rgb(14 19 24 / 98%)); box-shadow: inset 0 1px rgb(255 255 255 / 4%); }
.core-vault-operation-panel::before, .core-vault-list-panel::before { position: absolute; top: 0; left: 18px; width: 74px; height: 1px; background: linear-gradient(90deg, var(--abyss-crystal), transparent); content: ""; opacity: .64; }
.core-vault-screen .ascension-material-panel { position: relative; overflow: hidden; border-color: rgb(207 170 88 / 42%); background: radial-gradient(circle at 92% 0%, rgb(229 179 73 / 10%), transparent 30%), linear-gradient(145deg, rgb(38 31 24 / 97%), rgb(18 21 23 / 98%)); box-shadow: inset 0 1px rgb(255 255 255 / 5%); }
.core-vault-screen .ascension-material-panel::before { position: absolute; top: 0; right: 15%; left: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgb(238 195 100 / 72%), transparent); content: ""; }
.ascension-material-panel { display: grid; gap: 10px; border-color: rgb(207 170 88 / 42%); background: linear-gradient(145deg, rgb(125 84 30 / 9%), var(--surface)); }
.ascension-material-inventory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.ascension-material-inventory > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 8px 10px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 7px; background: linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(0 0 0 / 18%)); }
.ascension-material-icon { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.ascension-material-inventory b { color: #d7c9ae; font-size: .71rem; }
.ascension-material-inventory strong { color: var(--gold-strong); font-size: 1rem; }
.ascension-level-costs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ascension-level-costs > span { display: grid; gap: 3px; padding: 7px; border-left: 2px solid #8f7242; background: rgb(255 255 255 / 3%); }
.ascension-level-costs b { color: #eadcbf; font-size: .7rem; }
.ascension-level-costs small { color: var(--muted); font-size: .57rem; line-height: 1.45; }
.core-target-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 9px 0; }
.core-target-tiles .item-action { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 7px 4px; font-size: .68rem; overflow-wrap: anywhere; }
.core-target-tiles .item-action.selected { border-color: #ac8acf; background: rgb(126 94 174 / 20%); color: #f1dcff; }
.core-stack-list { display: grid; gap: 8px; }
.core-stack { border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgb(var(--abyss-violet-rgb) / 5%), rgb(255 255 255 / 2%)); }
.core-stack > summary { position: relative; display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 9px 12px; cursor: pointer; list-style: none; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.core-stack > summary::-webkit-details-marker { display: none; }
.core-stack > summary strong { min-width: 0; flex: 1; }
.core-stack > summary span { color: var(--gold-strong); font-weight: 700; }
.core-stack > summary small { color: var(--muted); font-size: .65rem; }
.core-stack-icon { width: 26px; height: 26px; object-fit: contain; }
.core-stack > .core-grid { padding: 0 10px 10px; }
.core-stack-toggle { position: relative; width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 22%); border-radius: 50%; background: rgb(0 0 0 / 18%); box-shadow: inset 0 0 8px rgb(var(--abyss-crystal-rgb) / 5%); }
.core-stack-toggle::before { position: absolute; top: 7px; left: 8px; width: 6px; height: 6px; border-right: 1px solid #9baeb0; border-bottom: 1px solid #9baeb0; content: ""; transform: rotate(45deg); transition: transform 160ms ease, border-color 160ms ease; }
.core-stack[open] { border-color: rgb(var(--abyss-crystal-rgb) / 44%); box-shadow: 0 7px 18px rgb(0 0 0 / 19%), inset 3px 0 0 rgb(var(--abyss-crystal-rgb) / 48%); }
.core-stack[open] > summary { background: linear-gradient(90deg, rgb(var(--abyss-crystal-rgb) / 10%), rgb(var(--abyss-violet-rgb) / 8%) 64%, transparent); box-shadow: inset 0 -1px rgb(var(--abyss-crystal-rgb) / 13%); }
.core-stack[open] .core-stack-toggle { border-color: rgb(var(--accent-rgb) / 55%); background: rgb(var(--accent-rgb) / 9%); box-shadow: 0 0 10px rgb(var(--accent-rgb) / 11%); }
.core-stack[open] .core-stack-toggle::before { border-color: #e1c57d; transform: translateY(3px) rotate(225deg); }
.bulk-core-panel { display: grid; gap: 11px; }
.bulk-core-panel > .section-heading { margin: 0; }
.bulk-core-panel > .small { margin: 0; }
.bulk-core-toolbar { display: grid; gap: 7px; }
.bulk-core-toolbar > input { width: 100%; min-height: 44px; }
.bulk-core-filter-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bulk-core-filter-tools .inventory-filter-trigger { width: 100%; padding-right: 7px; padding-left: 7px; }
.bulk-core-result-summary { display: flex; min-height: 24px; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .64rem; }
.bulk-core-result-summary .text-button { min-height: 24px; padding: 2px 0; font-size: .62rem; }
.bulk-core-rarity-symbol { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #575a4b; border-radius: 50%; background: var(--icon-surface); color: #c9c5b3; font-family: serif; font-size: .7rem; font-weight: 700; }
.bulk-core-rarity-symbol.rarity-rare { border-color: #6385a4; color: #b9dcff; }
.bulk-core-rarity-symbol.rarity-epic { border-color: #8464ad; color: #d9c0ff; }
.bulk-core-rarity-symbol.rarity-legendary { border-color: #aa7d3f; color: #ffe0a0; }
.bulk-core-filter-backdrop[data-filter="rarity"] .inventory-filter-count { color: var(--muted); font-size: .56rem; font-variant-numeric: tabular-nums; }
.bulk-core-filter-backdrop .inventory-filter-option:disabled { cursor: default; opacity: .42; }
.bulk-core-candidates { display: grid; grid-auto-rows: max-content; align-content: start; gap: 6px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.bulk-core-load-more { display: grid; gap: 5px; padding: 8px 0 2px; text-align: center; }
.bulk-core-load-more .secondary-button { width: 100%; min-height: 44px; }
.bulk-core-load-more small { color: var(--muted); font-size: .65rem; font-variant-numeric: tabular-nums; }
.bulk-core-row { display: grid; gap: 7px; min-height: 54px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgb(255 255 255 / 3%); }
.bulk-core-row:has(input:checked) { border-color: var(--accent-border); background: rgb(var(--accent-rgb) / 10%); }
.bulk-core-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); }
.bulk-core-row-main { display: grid; grid-template-columns: 24px 34px minmax(0, 1fr); align-items: center; gap: 9px; cursor: pointer; }
.bulk-core-part-icon { display: block; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 45%)); }
.bulk-core-row-main > span { display: grid; gap: 3px; min-width: 0; }
.bulk-core-row strong, .bulk-core-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-core-row small, .bulk-core-grade { color: var(--muted); font-size: .65rem; }
.bulk-core-skill-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.bulk-core-skill-picker legend { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; padding: 0; color: var(--muted); font-size: .66rem; }
.bulk-core-skill-picker legend span { color: #9a9788; font-size: .55rem; font-weight: 500; }
.bulk-core-skill-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 6px; }
.bulk-core-skill-option { display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 7px; background: linear-gradient(145deg, rgb(25 30 37 / 94%), rgb(11 15 20 / 98%)); color: var(--text); text-align: left; box-shadow: inset 0 1px rgb(255 255 255 / 4%); }
.bulk-core-skill-option.selected { border-color: var(--accent-border-strong); background: linear-gradient(145deg, rgb(var(--accent-rgb) / 23%), rgb(14 20 27 / 98%)); box-shadow: inset 3px 0 var(--gold), 0 0 0 1px rgb(var(--accent-rgb) / 16%); }
.bulk-core-skill-option.tip-open { border-color: #b09a66; box-shadow: inset 3px 0 var(--gold), 0 0 0 1px rgb(201 178 116 / 15%); }
.bulk-core-skill-position { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgb(255 255 255 / 12%); border-radius: 6px; background: rgb(0 0 0 / 25%); }
.bulk-core-skill-position .skill-slot-icon { width: 22px; height: 22px; }
.bulk-core-skill-copy { display: grid; gap: 2px; min-width: 0; }
.bulk-core-skill-copy strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.bulk-core-skill-copy small { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; color: var(--muted); font-size: .58rem; }
.bulk-core-skill-copy small b { flex: none; color: #d8c789; font-size: .58rem; font-weight: 700; }
.bulk-core-skill-option > i { color: var(--gold-strong); font-size: .9rem; font-style: normal; opacity: 0; transform: scale(.65); transition: opacity 120ms ease, transform 120ms ease; }
.bulk-core-skill-option.selected > i { opacity: 1; transform: scale(1); }
.bulk-core-skill-option:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.bulk-core-skill-tip { display: grid; gap: 6px; margin-top: 7px; padding: 9px 10px; border: 1px solid var(--tips-border); border-left: 3px solid var(--tips-accent); border-radius: 6px; background: linear-gradient(145deg, var(--tips-surface), var(--tips-surface-deep)); box-shadow: inset 0 1px rgb(255 255 255 / 5%); animation: skill-tip-in 140ms ease-out; }
.bulk-core-skill-tip > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; }
.bulk-core-skill-tip strong { color: var(--tips-heading); font-size: .75rem; }
.bulk-core-skill-tip > div span { padding: 2px 6px; border-radius: 99px; background: var(--tag-surface); color: var(--muted); font-size: .56rem; }
.bulk-core-skill-tip p { margin: 0; color: var(--tips-text); font-size: .67rem; line-height: 1.55; }
.bulk-core-skill-tip small { overflow: visible; color: #bfcbd0; font-size: .61rem; line-height: 1.45; text-overflow: clip; white-space: normal; }
.bulk-core-cost-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; margin-top: 10px; padding: 9px 11px; border: 1px solid rgb(204 184 119 / 32%); border-radius: 7px; background: rgb(179 150 72 / 8%); }
.bulk-core-cost-summary span { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; color: var(--muted); font-size: .64rem; }
.bulk-core-cost-summary strong { color: var(--gold-strong); font-size: .78rem; font-variant-numeric: tabular-nums; }
.bulk-core-cost-summary em { grid-column: 1 / -1; color: #ff9e99; font-size: .64rem; font-style: normal; text-align: right; }
.bulk-core-cost-summary.insufficient { border-color: rgb(219 91 86 / 48%); background: rgb(122 36 33 / 12%); }
.bulk-core-confirm-list { display: grid; gap: 6px; max-height: min(36dvh, 280px); margin: 13px 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.bulk-core-confirm-list > div { display: grid; gap: 3px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: rgb(255 255 255 / 3%); }
.bulk-core-confirm-list small { color: var(--muted); font-size: .68rem; overflow-wrap: anywhere; }
.bulk-market-quantity { display: grid; gap: 8px; margin: 15px 0; color: var(--muted); }
.bulk-market-quantity input { width: 100%; min-height: 44px; }
body.core-apply-modal-open { overflow: hidden; }
.core-apply-reveal-backdrop { --core-glow-rgb: 131 105 193; --core-glow-light: #d7c2fa; position: fixed; z-index: 235; inset: 0; display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at 50% 45%, rgb(var(--core-glow-rgb) / 18%), rgb(3 5 5 / 90%) 58%); backdrop-filter: blur(5px); animation: core-apply-reveal-backdrop 1900ms ease both; }
.core-apply-reveal-cut { width: min(380px, 100%); text-align: center; }
.core-apply-reveal-cut > .eyebrow { margin: 0; color: var(--core-glow-light); text-shadow: 0 0 14px rgb(var(--core-glow-rgb) / 48%); animation: core-apply-reveal-copy 1900ms ease both; }
.core-apply-reveal-stage { position: relative; width: min(320px, 88vw); height: 158px; margin: 4px auto 0; }
.core-apply-reveal-object { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 104px; min-height: 112px; margin: -56px 0 0 -52px; place-items: center; align-content: center; gap: 5px; }
.core-apply-reveal-object small { display: block; width: 118px; overflow: hidden; color: #ddd8ca; font-size: .61rem; line-height: 1.25; text-overflow: ellipsis; text-shadow: 0 2px 5px #000; white-space: nowrap; }
.core-apply-reveal-source { animation: core-apply-reveal-source 1900ms cubic-bezier(.22, .78, .22, 1) both; }
.core-apply-reveal-target { animation: core-apply-reveal-target 1900ms cubic-bezier(.22, .78, .22, 1) both; }
.core-apply-reveal-core-icon { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 0 12px rgb(var(--core-glow-rgb) / 52%)); }
.core-apply-reveal-item-mark { position: relative; display: grid; width: 82px; height: 82px; place-items: center; border: 1px solid rgb(var(--core-glow-rgb) / 54%); border-radius: 50%; background: radial-gradient(circle, rgb(var(--core-glow-rgb) / 20%), rgb(9 11 10 / 88%) 68%); box-shadow: 0 0 25px rgb(var(--core-glow-rgb) / 20%); }
.core-apply-reveal-item-icon { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 5px 10px rgb(0 0 0 / 58%)); }
.core-apply-reveal-glow, .core-apply-reveal-ring { position: absolute; z-index: 1; top: 50%; left: 50%; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; }
.core-apply-reveal-glow { background: rgb(var(--core-glow-rgb) / 36%); box-shadow: 0 0 54px 16px rgb(var(--core-glow-rgb) / 48%); animation: core-apply-reveal-glow 1900ms ease-out both; }
.core-apply-reveal-ring { border: 2px solid rgb(var(--core-glow-rgb) / 72%); box-shadow: inset 0 0 20px rgb(var(--core-glow-rgb) / 35%), 0 0 20px rgb(var(--core-glow-rgb) / 42%); animation: core-apply-reveal-ring 1900ms ease-out both; }
.core-apply-reveal-copy { display: grid; gap: 3px; margin: -1px 0 0; animation: core-apply-reveal-copy 1900ms ease both; }
.core-apply-reveal-copy strong { color: var(--core-glow-light); font-family: "Yu Mincho", serif; font-size: 1.05rem; text-shadow: 0 0 18px rgb(var(--core-glow-rgb) / 52%); }
.core-apply-reveal-copy span { color: #d8d4c8; font-size: .72rem; }
body.core-apply-reveal-open { overflow: hidden; }
@keyframes core-apply-reveal-backdrop { 0% { opacity: 0; } 8%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes core-apply-reveal-source { 0% { opacity: 0; transform: translateX(-104px) scale(.72); } 12% { opacity: 1; } 50% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); } 60% { opacity: 0; transform: translateX(0) scale(.34); filter: brightness(2.2); } 100% { opacity: 0; transform: translateX(0) scale(.34); } }
@keyframes core-apply-reveal-target { 0% { opacity: 0; transform: translateX(104px) scale(.78); filter: brightness(.8); } 12% { opacity: 1; } 50% { transform: translateX(0) scale(1); filter: brightness(1); } 62% { transform: translateX(0) scale(1.12); filter: brightness(1.7); } 78%, 100% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1.12); } }
@keyframes core-apply-reveal-glow { 0%, 42% { opacity: 0; transform: scale(.25); } 56% { opacity: .96; transform: scale(1.05); } 72% { opacity: .68; transform: scale(1); } 100% { opacity: .2; transform: scale(.9); } }
@keyframes core-apply-reveal-ring { 0%, 44% { opacity: 0; transform: scale(.3); } 58% { opacity: 1; transform: scale(1.02); } 78% { opacity: .66; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes core-apply-reveal-copy { 0%, 53% { opacity: 0; transform: translateY(7px); } 66%, 86% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2px); } }
.retreat-confirm-backdrop { position: fixed; z-index: 185; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 80%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.retreat-confirm-dialog { width: min(440px, 100%); max-height: calc(100dvh - 32px); padding: 18px; overflow-y: auto; border: 1px solid #8f594c; border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 60%); animation: forge-dialog-in 180ms ease-out; }
.retreat-confirm-dialog h2 { margin: 3px 0 8px; }
.retreat-pending-list { display: grid; gap: 5px; margin: 14px 0; padding: 0; list-style: none; }
.retreat-pending-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 9px; border-left: 2px solid var(--red); background: rgb(130 54 44 / 12%); font-size: .76rem; }
.retreat-pending-list span { color: var(--muted); white-space: nowrap; }
.retreat-confirm-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; }
html.modal-scroll-locked, html.modal-scroll-locked body, body.retreat-modal-open { overflow: hidden; overscroll-behavior: none; }
.revive-confirm-backdrop { position: fixed; z-index: 195; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 8 / 84%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.revive-confirm-dialog { width: min(430px, 100%); max-height: calc(100dvh - 32px); padding: 20px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--accent-border-strong); border-radius: 12px; background: linear-gradient(155deg, rgb(var(--panel-start-rgb) / 98%), var(--dialog) 65%); box-shadow: 0 24px 70px rgb(0 0 0 / 64%); animation: forge-dialog-in 180ms ease-out; }
.revive-confirm-heading { display: flex; align-items: center; gap: 12px; }
.revive-confirm-heading .eyebrow { margin: 0 0 3px; }
.revive-confirm-heading h2 { margin: 0; font-size: 1.18rem; line-height: 1.35; }
.revive-confirm-emblem { display: grid; flex: 0 0 52px; width: 52px; height: 52px; place-items: center; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--icon-surface); }
.revive-confirm-emblem img { width: 40px; height: 40px; object-fit: contain; }
.revive-confirm-cost { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 8px; margin: 18px 0 14px; padding: 12px 14px; border: 1px solid var(--accent-border); border-radius: 9px; background: var(--surface-2); }
.revive-confirm-cost span, .revive-confirm-cost small { color: var(--muted); font-size: .75rem; }
.revive-confirm-cost strong { display: inline-flex; grid-column: 2; grid-row: 1 / 3; align-items: center; color: var(--gold-strong); font-size: 1.28rem; }
.revive-confirm-dialog p:not(.eyebrow) { line-height: 1.6; }
.revive-confirm-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; margin-top: 18px; }
.revive-confirm-actions .primary-button { display: inline-flex; align-items: center; justify-content: center; }
.expedition-result-backdrop { position: fixed; z-index: 245; inset: 0; display: grid; place-items: center; padding: 16px; overflow: hidden; background: radial-gradient(circle at 50% 38%, rgb(170 128 48 / 24%), rgb(4 5 3 / 92%) 58%); backdrop-filter: blur(6px); }
.expedition-result-dialog { width: min(480px, 100%); max-height: calc(100dvh - 32px); padding: 20px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; border: 1px solid #9b8149; border-radius: 12px; background: linear-gradient(155deg, rgb(37 32 20 / 99%), var(--dialog) 52%); box-shadow: 0 28px 80px rgb(0 0 0 / 72%), inset 0 1px 0 rgb(255 255 255 / 8%); animation: forge-dialog-in 220ms ease-out; }
.expedition-result-backdrop.is-continuing .expedition-result-dialog,
.expedition-result-backdrop.is-continuing .expedition-result-chest::after,
.expedition-result-backdrop.is-continuing .expedition-result-equipment li::after { animation: none; }
.expedition-result-books { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.expedition-result-books li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgb(204 169 92 / 24%); border-radius: 7px; background: rgb(204 169 92 / 5%); }
.expedition-result-books img { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; }
.expedition-result-books li > span { min-width: 0; color: #e5dcc2; font-size: .76rem; overflow-wrap: anywhere; }
.expedition-result-books li > strong { flex: 0 0 auto; margin-left: auto; color: #ddc986; font-size: .74rem; white-space: nowrap; }
.expedition-result-books .expedition-result-book-icon { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; isolation: isolate; }
.expedition-result-book-icon::before { position: absolute; inset: 1px; z-index: -1; border: 0; border-radius: 50%; background: radial-gradient(circle, rgb(255 220 109 / 28%), transparent 70%); box-shadow: 0 0 10px rgb(255 209 99 / 45%); content: ""; }
.expedition-result-books .expedition-result-book-rare-label { display: block; margin-top: 2px; color: #ffe28c; font-size: .62rem; line-height: 1.3; }
.expedition-result-heading { text-align: center; }
.expedition-result-heading .eyebrow { margin: 0; color: var(--gold); }
.expedition-result-heading h2 { margin: 4px 0 3px; color: #f4e3b0; font-size: 1.35rem; }
.expedition-result-heading > p:last-child { margin: 0; color: var(--muted); font-size: .68rem; }
.expedition-result-gold { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: 17px 0 14px; padding: 11px 13px; border: 1px solid rgb(201 169 91 / 38%); border-radius: 9px; background: rgb(177 125 35 / 9%); }
.expedition-result-gold img { width: 30px; height: 30px; object-fit: contain; }
.expedition-result-gold span { color: var(--muted); font-size: .7rem; }
.expedition-result-gold strong { color: var(--gold-strong); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.expedition-result-crystal { margin-top: -7px; border-color: rgb(97 169 224 / 38%); background: rgb(62 124 190 / 10%); }
.expedition-result-crystal strong { color: #a5d8ff; }
.expedition-result-section { margin-top: 12px; }
.expedition-result-section h3 { margin: 0 0 7px; color: #ddd4b8; font-size: .76rem; letter-spacing: .04em; }
.expedition-result-chests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.expedition-result-chest { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-width: 0; padding: 7px 9px; border: 1px solid currentcolor; border-radius: 8px; background: rgb(0 0 0 / 18%); color: #d5d7d1; }
.expedition-result-chest.rarity-rare { color: #72c7ff; }
.expedition-result-chest.rarity-epic { color: #c28cff; }
.expedition-result-chest.rarity-legendary { color: #ffd66b; }
.expedition-result-chest img { width: 36px; height: 36px; object-fit: contain; }
.expedition-result-chest span { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.expedition-result-chest strong { font-size: .74rem; font-variant-numeric: tabular-nums; }
.expedition-result-equipment { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.expedition-result-equipment li { border-left: 3px solid #a9adb2; background: rgb(255 255 255 / 4%); color: var(--text); font-size: .74rem; overflow-wrap: anywhere; }
.expedition-result-equipment li.rarity-rare { border-left-color: #73b5ed; background: rgb(73 144 201 / 12%); }
.expedition-result-equipment li.rarity-epic { border-left-color: #bb91eb; background: rgb(144 92 185 / 13%); }
.expedition-result-equipment li.rarity-legendary { border-left-color: #e9bc5d; background: rgb(204 156 54 / 14%); }
:is(.expedition-result-equipment, .expedition-result-orb) summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px; cursor: pointer; }
:is(.expedition-result-equipment, .expedition-result-orb) summary::after { content: "⌄"; color: var(--muted); }
:is(.expedition-result-equipment, .expedition-result-orb) details[open] summary::after { content: "⌃"; }
.expedition-result-books li.expedition-result-orb { display: block; min-width: 0; padding: 0; overflow-wrap: anywhere; }
.expedition-result-orb summary { min-height: 44px; color: var(--text); font-size: var(--ga-font-body, .875rem); }
.expedition-result-orb summary > strong { flex: 0 0 auto; color: var(--gold-strong); font-size: var(--ga-font-note, .75rem); white-space: nowrap; }
.expedition-result-orb .expedition-result-equipment-detail { font-size: var(--ga-font-body, .875rem); }
.expedition-result-orb .expedition-result-orb-meta { font-size: var(--ga-font-note, .75rem); }
.expedition-result-orb .expedition-loot-orb-button { display:flex; align-items:center; gap:var(--ga-space-2); width:100%; min-height:var(--ga-touch); padding:9px; border:0; color:var(--text); background:transparent; text-align:left; font:inherit; font-size:var(--ga-font-body); cursor:pointer; }
.expedition-loot-orb-button > .expedition-result-equipment-name { flex:1; min-width:0; overflow-wrap:anywhere; }
.expedition-loot-orb-button > strong { flex:none; color:var(--gold-strong); font-size:var(--ga-font-note); white-space:nowrap; }
.expedition-loot-orb-button:focus-visible { outline:2px solid var(--selected-border); outline-offset:-2px; }
.expedition-loot-orb-button:disabled { cursor:default; }
.loot-orb-card-overlay { width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0; border:0; background:transparent; }
.loot-orb-card-overlay::backdrop { background:transparent; }
.loot-orb-card-overlay .loot-orb-card-status { margin:var(--ga-space-2) 0; font-size:var(--ga-font-note); color:var(--text); }
body.loot-orb-card-open { overflow:hidden; }
.expedition-result-equipment-icon { display: block; flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain; }
.expedition-result-equipment-name { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1; font-weight: 700; }
.expedition-result-equipment-badges { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
.expedition-result-equipment-badges > .corruption-badge { min-height: 0; margin: 0; padding: 2px 5px; font-size: var(--ga-font-caption, .6875rem); line-height: 1.3; letter-spacing: 0; }
.expedition-result-equipment-badges > .loot-pending-badge { margin-left: 0; }
.loot-pending-badge { display: inline-block; margin-left: 6px; padding: 2px 5px; border: 1px solid rgb(222 184 102 / 50%); border-radius: 4px; background: rgb(222 184 102 / 12%); color: #f0cf8b; font-size: 11px; font-weight: 700; line-height: 1.3; vertical-align: middle; white-space: nowrap; }
.loot-pending-gold { border-style: dashed; }
.expedition-result-equipment-slots { display: inline-flex; align-items: center; gap: 2px; }
.expedition-result-equipment-slots img { display: block; width: 14px; height: 14px; object-fit: contain; }
.expedition-result-equipment summary small { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }
.expedition-result-equipment li.rarity-rare summary small { color: #91c9f3; }
.expedition-result-equipment li.rarity-epic summary small { color: #c9aaf0; }
.expedition-result-equipment li.rarity-legendary summary small { color: #edca77; }
.expedition-result-equipment-detail { padding: 0 10px 10px; color: var(--muted); line-height: 1.5; }
.expedition-result-equipment-detail p { margin: 5px 0; }
.expedition-result-equipment-skills { display: grid; gap: 5px; margin-top: 7px; }
.expedition-result-equipment-skills div { display: grid; gap: 2px; }
.expedition-result-equipment-skills b { color: var(--text); }
.expedition-loot-consumables { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.expedition-loot-consumables li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgb(255 255 255 / 4%); font-size: .75rem; }
.expedition-loot-consumables li .expedition-loot-consumable-icon { width: 28px; height: 28px; object-fit: contain; }
.expedition-loot-consumables li strong { color: var(--gold-strong); font-variant-numeric: tabular-nums; }
#loot-review-dialog .expedition-loot-consumables-compact { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
#loot-review-dialog .expedition-loot-consumables-compact > p { margin: 0 0 4px; color: var(--muted); font-size: .68rem; }
#loot-review-dialog .expedition-loot-consumables li { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 6px; padding: 3px 0; border: 0; border-radius: 0; background: none; font-size: .7rem; }
#loot-review-dialog .expedition-loot-consumables li .expedition-loot-consumable-icon { width: 20px; height: 20px; }

.expedition-result-empty { margin: 0; padding: 10px; border: 1px dashed var(--line); color: var(--muted); font-size: .7rem; text-align: center; }
.expedition-result-actions { position: sticky; bottom: -20px; margin: 16px -20px -20px; padding: 10px 20px 20px; background: linear-gradient(180deg, rgb(var(--panel-end-rgb) / 10%), var(--dialog) 25%); }
.expedition-result-actions button { width: 100%; min-height: 48px; }
body.expedition-result-modal-open, body.loot-review-modal-open { overflow: hidden; }
@keyframes forge-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes forge-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.warning { color: #e6a99d; }
.catalog-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.menu-screen { display: grid; gap: 17px; }
.menu-screen > .section-heading { margin-bottom: 0; }
.menu-category { min-width: 0; }
.menu-category h3 { margin: 0 0 9px; padding: 0 0 7px; border-bottom: 1px solid var(--line); color: var(--gold-strong); font-size: .84rem; letter-spacing: .04em; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.menu-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; min-height: 72px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; }
.menu-card img { width: 44px; height: 44px; object-fit: contain; }
.menu-card-symbol { display: grid; width: 44px; height: 44px; place-items: center; color: #b9c7d7; filter: drop-shadow(0 4px 7px rgb(0 0 0 / 40%)); }
.menu-card-symbol svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.menu-card-copy { display: grid; gap: 2px; min-width: 0; }
.menu-card-copy strong { font-size: .9rem; }
.menu-card-copy span { color: var(--muted); font-size: .68rem; }
.menu-card-arrow { color: var(--gold); }
.menu-card-help-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgb(var(--accent-rgb) / 42%); border-radius: 50%; background: rgb(var(--accent-rgb) / 9%); color: var(--gold-strong); font-family: serif; font-size: 1.55rem; }
.help-screen { display: grid; gap: 17px; max-width: 780px; margin: 0 auto; }
.help-screen > .panel, .help-screen > section { margin: 0; }
.help-intro .text-button { margin-bottom: 12px; }
.help-intro .section-heading { margin-bottom: 8px; }
.help-intro h1 { margin: 0; font-family: "Yu Mincho", serif; font-size: 1.55rem; }
.help-intro > p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.help-group > h2 { margin: 0 0 9px; padding-left: 3px; color: var(--gold-strong); font-size: .88rem; letter-spacing: .06em; }
.help-topic-list { display: grid; gap: 8px; }
.help-topic { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.help-topic[open] { border-color: rgb(var(--accent-rgb) / 48%); }
.help-topic summary { display: flex; min-height: 65px; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; cursor: pointer; list-style: none; }
.help-topic summary::-webkit-details-marker { display: none; }
.help-topic summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.help-topic summary > span { display: grid; min-width: 0; gap: 3px; }
.help-topic summary strong { color: var(--text); font-size: .85rem; }
.help-topic summary small { color: var(--muted); font-size: .66rem; line-height: 1.35; }
.help-topic summary > i { flex: 0 0 auto; color: var(--gold); font-size: 1rem; font-style: normal; transition: transform 140ms ease; }
.help-topic[open] summary > i { transform: rotate(180deg); }
.help-topic-content { padding: 0 15px 14px; border-top: 1px solid rgb(var(--accent-rgb) / 15%); }
.help-topic-content ul { display: grid; gap: 9px; margin: 13px 0 0; padding-left: 1.25em; }
.help-topic-content li { color: var(--text); font-size: .76rem; line-height: 1.7; overflow-wrap: anywhere; }
.help-topic-content li::marker { color: var(--gold); }
.moderation-menu-symbol { color: #c88a7d; font-size: 1.7rem; }
.arena-screen { --arena-mode-rgb: 205 167 98; display: grid; gap: 12px; width: min(100%, 780px); margin-inline: auto; }
.arena-screen.arena-mode-defense { --arena-mode-rgb: 112 194 205; }
.arena-screen > .panel + .panel { margin-top: 0; }
.arena-title { display: flex; align-items: center; gap: 10px; }
.arena-title > span { display: grid; width: 46px; height: 46px; place-items: center; }
.arena-title-icon { width: 43px; height: 43px; object-fit: contain; filter: drop-shadow(0 5px 8px rgb(0 0 0 / 42%)); }
.arena-title h2, .arena-title p { margin: 0; }
.arena-title h2 { white-space: nowrap; }
.arena-main-heading { align-items: center; gap: 10px; margin-top: 4px; }
.arena-overview-panel { overflow: hidden; border-color: rgb(var(--arena-mode-rgb) / 28%); background: radial-gradient(circle at 90% 6%, rgb(var(--arena-mode-rgb) / 12%), transparent 54%), linear-gradient(155deg, #21262c, #191d21); }
.arena-season-end { color: var(--muted); font-size: .64rem; text-align: right; }
.arena-overview-caption { margin: 10px 0 11px; color: #c6c8c9; font-size: .68rem; line-height: 1.5; }
.arena-rating-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.arena-rate-card { display: grid; min-width: 0; min-height: 113px; align-content: space-between; gap: 5px; padding: 11px 13px; border: 1px solid #43484d; border-radius: 9px; background: linear-gradient(150deg, #282b2f, #1b1e22); color: var(--text); cursor: pointer; font: inherit; text-align: left; transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.arena-rate-attack { --arena-card-rgb: 205 167 98; }
.arena-rate-defense { --arena-card-rgb: 112 194 205; }
.arena-rate-card:hover { border-color: #aeb1b2; }
.arena-rate-card:focus-visible { outline: 2px solid #f1dcac; outline-offset: 2px; }
.arena-rate-card.active { border-color: rgb(var(--arena-card-rgb) / 80%); background: linear-gradient(145deg, rgb(var(--arena-card-rgb) / 18%), #1c2024 78%); box-shadow: inset 0 2px rgb(var(--arena-card-rgb) / 55%), 0 7px 18px rgb(0 0 0 / 16%); }
.arena-rate-label { display: grid; gap: 1px; color: #b5aba0; font-size: .49rem; font-weight: 700; letter-spacing: .18em; }
.arena-rate-defense .arena-rate-label { color: #8bbbc2; }
.arena-rate-label b { color: #f0ece5; font-size: .72rem; letter-spacing: 0; }
.arena-rate-card strong { color: #f1dfbd; font-family: "Yu Mincho", serif; font-size: clamp(1.28rem, 4.6vw, 1.7rem); font-variant-numeric: tabular-nums; line-height: 1.1; }
.arena-rate-defense strong { color: #c4e9ed; }
.arena-rate-card small { display: flex; align-items: center; justify-content: space-between; gap: 3px; color: #c0c3c4; font-size: .6rem; line-height: 1.3; }
.arena-rate-card small i { color: rgb(var(--arena-card-rgb)); font-size: 1rem; font-style: normal; line-height: 1; }
.arena-season-line { display: flex; justify-content: space-between; gap: 5px 12px; margin-top: 11px; padding-top: 9px; border-top: 1px solid rgb(255 255 255 / 9%); color: var(--muted); font-size: .64rem; }
.arena-season-line strong { color: #f1e7d5; white-space: nowrap; }
.arena-view-content { display: grid; gap: 10px; min-width: 0; }
.arena-view-content > .panel { margin-top: 0; }
.arena-action-notice { margin: 10px 0 0; padding: 9px 10px; border-left: 2px solid rgb(var(--arena-mode-rgb) / 78%); background: rgb(var(--arena-mode-rgb) / 9%); color: #e6d7c1; font-size: .66rem; line-height: 1.45; }
.arena-screen .arena-formation-notice { min-width: 0; margin: 0; border: 1px solid var(--selected-border); border-inline-start-width: 3px; border-radius: 4px; background: rgb(205 167 98 / 13%); color: var(--text); font-size: var(--ga-font-body); line-height: 1.6; }
.arena-formation-notice > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px; list-style: none; color: var(--gold-strong); font-size: var(--ga-font-section); font-weight: 700; cursor: pointer; }
.arena-formation-notice > summary::-webkit-details-marker { display: none; }
.arena-formation-notice > summary:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: -2px; }
.arena-formation-notice[open] > summary > i { transform: rotate(180deg); }
.arena-recovery-notice-unread { display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; border: 2px solid var(--surface); border-radius: 50%; background: #ff4038; vertical-align: middle; }
.grimoire-shelf-unread { display: inline-block; width: 10px; height: 10px; margin-inline-start: 6px; border: 2px solid var(--surface); border-radius: 50%; background: #ff4038; vertical-align: middle; }
.arena-formation-notice-body { padding: 0 12px 12px; }
.arena-formation-notice-body p { margin: 0; }
.arena-formation-notice-body p + p { margin-block-start: 4px; }
.arena-view-content > .panel:first-child { border-color: rgb(var(--arena-mode-rgb) / 34%); }
.arena-ranking-total { color: var(--muted); font-size: .66rem; white-space: nowrap; }
.arena-my-rank { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid rgb(var(--arena-mode-rgb) / 38%); border-radius: 8px; background: linear-gradient(110deg, rgb(var(--arena-mode-rgb) / 13%), rgb(255 255 255 / 2%)); }
.arena-my-rank > span { color: var(--muted); font-size: .72rem; }
.arena-my-rank > strong { color: var(--gold-strong); font-size: 1.35rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arena-mode-defense .arena-my-rank > strong { color: #b9e7ea; }
.arena-my-rank small { margin-left: 3px; color: var(--muted); font-size: .62rem; font-weight: 400; }
.arena-rank-party { display: grid; flex: 1 0 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-top: 10px; border-top: 1px solid rgb(var(--arena-mode-rgb) / 24%); }
.arena-rank-member { display: grid; min-width: 0; justify-items: center; gap: 3px; padding: 5px 2px 4px; border: 1px solid rgb(var(--arena-mode-rgb) / 24%); border-radius: 7px; background: rgb(0 0 0 / 14%); text-align: center; }
.arena-rank-avatar { display: grid; width: 48px; height: 48px; place-items: end center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle, rgb(var(--arena-mode-rgb) / 24%), transparent 70%); }
.arena-rank-avatar .actor-image { width: 46px; height: 46px; object-fit: contain; }
.arena-rank-member > small { width: 100%; margin: 0; overflow: hidden; color: #d8e7e9; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.arena-rank-hint { margin: -2px 0 11px; }
.arena-ranking-more { width: 100%; margin-top: 8px; scroll-margin-bottom: calc(72px + var(--mobile-navigation-height, 0px)); }
.arena-defense-current { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 11px; border: 1px solid rgb(var(--accent-rgb) / 22%); border-radius: 8px; background: rgb(0 0 0 / 15%); }
.arena-defense-avatar { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: end center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle, rgb(var(--accent-rgb) / 20%), transparent 70%); }
.arena-defense-avatar .actor-image { width: 44px; height: 44px; object-fit: contain; }
.arena-defense-current > span:last-child { display: grid; min-width: 0; gap: 3px; }
.arena-defense-current strong { color: var(--text); font-size: .8rem; }
.arena-defense-current strong small { color: var(--gold); font-size: .58rem; }
.arena-defense-current > span:last-child > small { color: var(--muted); font-size: .63rem; }
.arena-defense-empty { margin: 12px 0; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: .7rem; line-height: 1.6; }
.arena-defense-actions, .arena-opponent-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
#arena-lobby .arena-entry-save-status { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--muted); font-size: var(--ga-font-note); }
#arena-lobby .arena-entry-save-status > span:first-child { color: var(--selected-text); }
#arena-lobby .arena-entry-save-status > .arena-entry-save-error { color: #ffd29b; }
.arena-screen .arena-entry-members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.arena-screen .arena-entry-member { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; padding: 6px 4px; border-radius: 4px; background: linear-gradient(180deg, rgb(137 183 211 / 11%), rgb(0 0 0 / 12%)); text-align: center; }
.arena-screen .arena-entry-member > .party-team-portrait { grid-template: minmax(0, 1fr) / minmax(0, 1fr); width: 100%; height: clamp(76px, 24vw, 112px); background: radial-gradient(ellipse at 50% 76%, rgb(132 196 218 / 18%), transparent 66%); }
.arena-entry-member-select { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: var(--ga-font-note); color: var(--muted); }
#arena-lobby .arena-entry-picker-trigger {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  width: 100%; min-width: 0; min-height: 44px; padding: 4px; gap: 4px;
  border: 0; border-radius: 6px; background: rgb(8 17 25 / 48%); color: var(--text); font-size: var(--ga-font-control);
}
#arena-lobby .arena-entry-picker-trigger > span { white-space: normal; overflow-wrap: anywhere; }
#arena-lobby .arena-entry-picker-trigger:enabled:hover { background: var(--surface-2); }
#arena-entry-picker-dialog {
  inset: 0; width: min(560px, calc(100% - 16px)); margin: auto; padding: 0;
  border-color: rgb(168 188 204 / 42%); background: linear-gradient(145deg, #233849, #101c27);
}
#arena-entry-picker-dialog:not([open]) { display: none; }
#arena-entry-picker-dialog::backdrop { background: rgb(5 10 16 / 78%); }
#arena-entry-picker-dialog .party-team-picker-heading { grid-template-columns: minmax(0, 1fr) 44px; }
#arena-entry-picker-dialog .party-team-picker-grid > p { grid-column: 1 / -1; }
#arena-lobby .arena-entry-row-toggle, #arena-lobby .arena-entry-tools > button { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-width: 0; min-height: 44px; padding: 4px 2px; border: 0; background: transparent; box-shadow: none; color: var(--text); font-size: var(--ga-font-note); overflow-wrap: anywhere; }
#arena-lobby .arena-entry-row-toggle > span { padding: 3px 7px; border-radius: 20px; background: rgb(137 183 211 / 12%); color: var(--muted); }
#arena-lobby .arena-entry-row-toggle[aria-pressed="true"] > span { background: rgb(224 177 93 / 17%); color: var(--selected-text); }
#arena-lobby .arena-entry-row-toggle i { font-style: normal; }
#arena-lobby .arena-entry-tools { display: grid; padding-top: 4px; border-top: 1px solid var(--line); }
#arena-lobby .arena-entry-tools > button:enabled:hover, #arena-lobby .arena-entry-row-toggle:enabled:hover { background: rgb(137 183 211 / 12%); }
.arena-presets { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.arena-presets h3 { margin: 0; font-size: var(--ga-font-section); }
.arena-presets h3 small { margin-inline-start: 6px; color: var(--muted); font-size: var(--ga-font-note); }
.arena-preset-list { margin: 8px 0; padding: 0; list-style: none; }
.arena-preset-list > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.arena-preset-identity { display: grid; flex: 1 1 100px; min-width: 0; overflow-wrap: anywhere; }
.arena-preset-identity :is(small, span) { color: var(--muted); font-size: var(--ga-font-note); }
.arena-preset-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 8px; }
.arena-preset-actions button { min-height: 44px; }
.arena-preset-dialog { --party-color-rgb: var(--accent-rgb, 109 157 181); width: min(430px, calc(100% - 24px)); overflow: auto; background: var(--dialog, #101b23); }
.arena-preset-dialog::backdrop { background: rgb(3 7 11 / 72%); }
.arena-preset-dialog:not([open]) { display: none; }
.arena-preset-dialog .party-team-picker-heading { grid-template-columns: minmax(0, 1fr); }
.arena-preset-dialog form { padding: 12px; }
.arena-preset-dialog fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.arena-preset-dialog .party-team-picker-search { margin-inline: 0; }
.arena-preset-status { margin: 8px 0 0; color: var(--gold-strong); }
.arena-preset-check { margin: 12px 0; padding-block: 8px; border-block: 1px solid var(--line); }
.arena-preset-check-result { color: var(--muted); font-size: var(--ga-font-note); overflow-wrap: anywhere; }
.arena-preset-check-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; color: var(--text); }
.arena-preset-check-summary > span { padding: 3px 8px; border-radius: 999px; background: var(--surface); color: var(--selected-text); }
.arena-preset-check-warnings summary { cursor: pointer; }
.arena-preset-check-warnings summary > span { color: #ffcf9b; background: rgb(171 102 44 / 22%); }
.arena-preset-check-warnings summary > strong::before { content: "▸"; margin-inline-end: 6px; }
.arena-preset-check-warnings[open] summary > strong::before { content: "▾"; }
.arena-preset-check-warnings h3 { margin: 10px 0 3px; color: var(--text); font-size: var(--ga-font-note); }
.arena-preset-check-warnings ul { margin: 0; padding: 0; list-style: none; }
.arena-preset-check-warnings li { display: grid; gap: 2px; padding-block: 5px; border-top: 1px solid var(--line); }
.arena-preset-check-warnings li > span { color: #ffcf9b; }
.arena-preset-member-settings { display: grid; justify-items: start; gap: 8px; padding: 12px; }
.arena-preset-member-settings .party-team-portrait { width: 90px; height: 90px; }
.arena-entry-tool-icon { flex: 0 0 16px; width: 16px; height: 16px; object-fit: contain; color: var(--gold-strong); line-height: 1; }
.arena-defense-actions > .primary-button { grid-column: 1 / -1; }
.arena-replay > summary { min-height: 44px; padding: 12px 2px; color: var(--gold-strong); cursor: pointer; font-size: .74rem; }
.arena-build { display: grid; gap: 10px; }
.arena-team-build { display: grid; gap: 9px; }
.arena-team-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.arena-team-member { display: grid; justify-items: center; min-width: 0; padding: 7px 3px; border: 1px solid var(--line); border-radius: 7px; background: rgb(0 0 0 / 16%); text-align: center; }
.arena-team-member > span { display: grid; width: 48px; height: 48px; place-items: end center; }
.arena-team-member .actor-image { width: 48px; height: 48px; object-fit: contain; }
.arena-team-member strong { max-width: 100%; overflow: hidden; color: var(--text); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.arena-team-member small { color: var(--muted); font-size: .56rem; }
.arena-team-detail { border-top: 1px solid var(--line); }
.arena-team-detail > summary { min-height: 44px; padding: 12px 2px; color: var(--gold-strong); cursor: pointer; font-size: .72rem; }
.arena-team-detail > .arena-build { padding: 0 0 9px; }
.arena-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.arena-stat-grid > div { display: grid; gap: 2px; min-width: 0; padding: 7px 4px; border: 1px solid var(--line); border-radius: 6px; background: rgb(0 0 0 / 17%); text-align: center; }
.arena-stat-grid span { overflow: hidden; color: var(--muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.arena-stat-grid strong { color: var(--text); font-size: .74rem; font-variant-numeric: tabular-nums; }
.arena-equipment-list { display: grid; gap: 6px; }
.arena-equipment-item { padding: 9px 10px; border-left: 2px solid rgb(var(--accent-rgb) / 48%); background: rgb(0 0 0 / 13%); }
.arena-equipment-item header { display: flex; align-items: center; gap: 6px; }
.arena-equipment-item header > strong { min-width: 0; overflow: hidden; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.arena-equipment-item header > small { margin-left: auto; color: var(--muted); font-size: .59rem; white-space: nowrap; }
.arena-equipment-item > p { margin: 6px 0; color: var(--muted); font-size: .61rem; line-height: 1.45; }
.arena-slot-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.arena-slot-list > span { display: flex; align-items: center; min-width: 0; min-height: 35px; gap: 5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: .62rem; }
.arena-slot-list > span > b { display: grid; flex: 0 0 20px; height: 20px; place-items: center; border-radius: 4px; background: var(--tag-surface); color: var(--gold); font-size: .58rem; }
.arena-slot-list > span > span { display: grid; min-width: 0; }
.arena-slot-list strong, .arena-slot-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-slot-list strong { color: var(--text); font-size: .62rem; }
.arena-slot-list small { color: var(--muted); font-size: .5rem; }
.arena-slot-list > .empty { opacity: .55; }
.arena-slot-list > .unavailable { opacity: .35; }
.arena-opponent-list { display: grid; gap: 7px; margin-top: 12px; }
.arena-opponent-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: rgb(0 0 0 / 13%); }
.arena-opponent-summary { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; align-items: center; gap: 9px; width: 100%; min-height: 66px; padding: 8px 10px; border: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.arena-opponent-summary[aria-expanded="true"] { background: rgb(var(--accent-rgb) / 8%); }
.arena-opponent-avatar { display: grid; width: 48px; height: 48px; place-items: end center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle, rgb(var(--accent-rgb) / 20%), transparent 66%); }
.arena-opponent-avatar .actor-image { width: 44px; height: 44px; object-fit: contain; }
.arena-opponent-summary > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.arena-opponent-summary strong, .arena-opponent-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-opponent-summary small { color: var(--muted); font-size: .62rem; }
.arena-opponent-summary > i { color: var(--gold); font-style: normal; transition: transform 120ms ease; }
.arena-opponent-summary[aria-expanded="true"] > i { transform: rotate(180deg); }
.arena-opponent-detail { padding: 11px; border-top: 1px solid var(--line); }
.arena-ranking-list { display: grid; }
.arena-ranking-list > div { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px; border-bottom: 1px solid rgb(255 255 255 / 7%); }
.arena-ranking-list > div.has-party { align-items: start; padding-block: 8px; }
.arena-ranking-list > div.has-party > b, .arena-ranking-list > div.has-party > em { margin-top: 5px; }
.arena-ranking-list > div.me { border-left: 2px solid var(--gold); background: rgb(var(--accent-rgb) / 8%); }
.arena-ranking-list b { color: var(--gold); text-align: center; }
.arena-ranking-player { display: grid; min-width: 0; }
.arena-ranking-party {
  display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
}
.arena-ranking-party-member {
  display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0;
  justify-items: center; align-content: start; gap: 4px;
}
.arena-ranking-party-avatar {
  display: grid; width: min(100%, 56px); aspect-ratio: 1; place-items: end center; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--arena-mode-rgb) / 24%), transparent 70%);
}
.arena-ranking-party-avatar .actor-image { width: 100%; height: 100%; object-fit: contain; }
.arena-ranking-party-member > small {
  width: 100%; color: #cddfe1; font-size: var(--ga-font-caption, .6875rem);
  line-height: 1.2; text-align: center; overflow-wrap: anywhere;
}
.arena-ranking-list em { color: var(--text); font-size: .8rem; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.traversal-ranking-panel { position: relative; width: min(100%, 720px); margin-inline: auto; overflow: hidden; background: radial-gradient(circle at 90% 4%, rgb(92 171 197 / 10%), transparent 28%), linear-gradient(155deg, rgb(27 35 38 / 99%), rgb(19 23 23 / 99%)); }
.traversal-ranking-panel::before { position: absolute; top: 0; right: 10%; left: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgb(127 205 228 / 60%), transparent); content: ""; }
.traversal-menu-back { position: relative; z-index: 1; margin-bottom: 12px; }
.traversal-command-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid rgb(127 205 228 / 13%); }
.traversal-command-title { display: flex; min-width: 0; align-items: center; gap: 12px; }
.traversal-command-title > .abyss-mechanism-mark { width: 46px; height: 46px; flex-basis: 46px; }
.traversal-command-title .abyss-mechanism-gear { width: 39px; height: 39px; }
.traversal-command-title .abyss-mechanism-crystal { width: 15px; height: 15px; }
.traversal-command-title h2 { margin: 2px 0 1px; }
.traversal-command-title small { color: var(--muted); font-size: .57rem; letter-spacing: .06em; }
.traversal-refresh-button { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; gap: 0 6px; min-width: 70px; min-height: 46px; padding: 6px 10px; border: 1px solid rgb(127 205 228 / 24%); border-radius: 8px; background: rgb(5 12 14 / 36%); color: var(--text); cursor: pointer; text-align: left; }
.traversal-refresh-button > span { grid-row: 1 / 3; color: #8fdcf2; font-size: 1.15rem; }
.traversal-refresh-button small { color: #79b7c8; font-size: .45rem; letter-spacing: .14em; }
.traversal-refresh-button strong { font-size: .68rem; }
.traversal-refresh-button:disabled { cursor: wait; opacity: .48; }
.traversal-ranking-tabs { display: grid; grid-auto-columns: minmax(92px, 1fr); grid-auto-flow: column; gap: 6px; margin: 14px 0 12px; padding: 4px; overflow-x: auto; border: 1px solid rgb(127 205 228 / 11%); border-radius: 9px; background: rgb(3 8 10 / 25%); scrollbar-width: thin; }
.traversal-ranking-tab { position: relative; display: grid; min-height: 48px; align-content: center; gap: 2px; padding: 6px 12px; overflow: hidden; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); text-align: left; }
.traversal-ranking-tab::after { position: absolute; right: 12px; bottom: 0; left: 12px; height: 2px; background: transparent; content: ""; }
.traversal-ranking-tab small { font-size: .43rem; letter-spacing: .14em; }
.traversal-ranking-tab strong { font-size: .7rem; }
.traversal-ranking-tab.active { border-color: rgb(var(--accent-rgb) / 35%); background: linear-gradient(135deg, rgb(var(--accent-rgb) / 19%), rgb(255 255 255 / 2%)); color: var(--text); box-shadow: inset 0 0 18px rgb(var(--accent-rgb) / 6%); }
.traversal-ranking-tab.active::after { background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 0 7px rgb(210 173 81 / 48%); }
.traversal-ranking-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.traversal-ranking-rule { display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 9px; margin: 0 1px 13px; line-height: 1.55; }
.traversal-ranking-rule i { width: 3px; height: 100%; min-height: 26px; border-radius: 99px; background: linear-gradient(#78cce5, transparent); box-shadow: 0 0 8px rgb(120 204 229 / 35%); }
.traversal-my-rank { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; margin: 0 0 12px; padding: 13px 15px; overflow: hidden; border: 1px solid rgb(210 173 81 / 36%); border-radius: 9px; background: radial-gradient(circle at 88% 50%, rgb(210 173 81 / 13%), transparent 28%), linear-gradient(110deg, rgb(var(--accent-rgb) / 13%), rgb(255 255 255 / 2%)); box-shadow: inset 3px 0 rgb(210 173 81 / 58%); }
.traversal-my-rank::after { position: absolute; top: 0; right: 8%; left: 45%; height: 1px; background: linear-gradient(90deg, transparent, rgb(245 216 139 / 60%), transparent); content: ""; }
.traversal-my-rank span, .traversal-my-rank strong, .traversal-my-rank em { display: grid; gap: 2px; }
.traversal-my-rank span { color: var(--muted); font-size: .68rem; }
.traversal-my-rank small { color: #9ea9aa; font-size: .43rem; font-style: normal; font-weight: 500; letter-spacing: .13em; }
.traversal-my-rank strong { color: var(--gold); font-size: 1rem; }
.traversal-my-rank em { color: var(--text); font-size: 1.25rem; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.traversal-ranking-meta { display: flex; justify-content: space-between; gap: 12px; margin: 0 3px 7px; color: var(--muted); font-size: .55rem; letter-spacing: .03em; }
.traversal-ranking-meta span { display: inline-flex; align-items: center; gap: 5px; }
.traversal-ranking-meta i { width: 5px; height: 5px; border-radius: 50%; background: #70d8ad; box-shadow: 0 0 7px rgb(112 216 173 / 70%); }
.traversal-ranking-list { overflow: hidden; border: 1px solid rgb(127 205 228 / 12%); border-radius: 9px; background: rgb(1 6 8 / 26%); box-shadow: inset 0 1px rgb(255 255 255 / 2%); }
.traversal-ranking-row { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 55px; padding: 7px 12px; border-bottom: 1px solid rgb(127 205 228 / 8%); }
.traversal-ranking-row:last-child { border-bottom: 0; }
.traversal-ranking-row.me { border-left: 3px solid var(--gold); background: linear-gradient(90deg, rgb(210 173 81 / 12%), rgb(var(--accent-rgb) / 5%) 55%, transparent); }
.traversal-ranking-row > b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.traversal-ranking-row.rank-1 > b { background: rgb(210 173 81 / 19%); color: #f3d676; box-shadow: inset 0 0 0 1px rgb(243 214 118 / 35%); }
.traversal-ranking-row.rank-2 > b { background: rgb(184 198 211 / 14%); color: #c8d4df; box-shadow: inset 0 0 0 1px rgb(200 212 223 / 25%); }
.traversal-ranking-row.rank-3 > b { background: rgb(172 111 67 / 17%); color: #d99a6d; box-shadow: inset 0 0 0 1px rgb(217 154 109 / 27%); }
.traversal-ranking-row > span { display: grid; min-width: 0; gap: 2px; }
.traversal-ranking-row > span strong { overflow: hidden; color: #eef4f3; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.traversal-ranking-row > span small { color: var(--muted); font-size: .57rem; }
.traversal-ranking-row > em { color: var(--text); font-size: .94rem; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.arena-result-heading { display: flex; align-items: end; justify-content: space-between; }
.arena-result-heading p, .arena-result-heading h2 { margin: 0; }
.arena-result-heading h2 { color: var(--gold-strong); font-size: 1.5rem; }
.arena-result-versus { margin: 12px 0 7px; text-align: center; }
.arena-result-versus b { margin: 0 8px; color: var(--muted); font-size: .65rem; }
.arena-result-summary { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgb(0 0 0 / 16%); color: var(--muted); font-size: .68rem; }
.arena-result-summary strong { color: var(--text); }
.arena-result-summary em { margin-left: 3px; font-style: normal; }
.arena-result-summary em.up { color: #a9d79e; }
.arena-result-summary em.down { color: #e19a8d; }
.arena-replay { margin-top: 7px; }
.arena-replay > div { max-height: min(48dvh, 420px); overflow-y: auto; border: 1px solid var(--line); background: rgb(0 0 0 / 21%); overscroll-behavior: contain; }
.arena-replay p { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; margin: 0; padding: 7px 8px; border-bottom: 1px solid rgb(255 255 255 / 5%); font-size: .67rem; line-height: 1.45; }
.arena-replay p > span { color: var(--muted); text-align: right; }
.arena-replay-danger { color: #e2a096; }
.arena-replay-phase { color: var(--gold-strong); }
.arena-challenge-backdrop, .arena-forfeit-backdrop { position: fixed; z-index: 190; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 82%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.arena-challenge-dialog { width: min(430px, 100%); padding: 18px; border: 1px solid var(--accent-border-strong); border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 60%); animation: forge-dialog-in 180ms ease-out; }
.arena-challenge-dialog h2 { margin: 3px 0 10px; }
.arena-challenge-summary { display: grid; margin: 13px 0; border-top: 1px solid var(--line); }
.arena-challenge-summary > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .72rem; }
.arena-challenge-summary dt { color: var(--muted); }
.arena-challenge-summary dd { margin: 0; color: var(--text); font-weight: 700; }
.arena-challenge-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; margin-top: 15px; }
body.arena-modal-open { overflow: hidden; }
.arena-locked-panel { max-width: 560px; margin: 0 auto; }
.arena-locked-panel > p { margin-top: 24px; color: var(--muted); line-height: 1.7; }
.arena-unlock-track { height: 7px; margin-top: 18px; }
.arena-unlock-track::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-strong)); }
.arena-unlock-track::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-strong)); }
.arena-locked-panel > small { display: block; margin-top: 6px; color: var(--muted); text-align: right; }

/* Arena colosseum v2: gate, rating plates, and challenger board */
.arena-screen { --arena-flame-rgb: 225 137 58; --arena-crystal-rgb: 91 169 222; position: relative; gap: 10px; padding-bottom: 4px; }
.arena-screen::before { position: absolute; z-index: -1; inset: -12px -8px 32%; border: 1px solid rgb(var(--arena-mode-rgb) / 7%); background: radial-gradient(circle at 12% 16%, rgb(var(--arena-flame-rgb) / 7%), transparent 24%), radial-gradient(circle at 88% 12%, rgb(var(--arena-crystal-rgb) / 8%), transparent 25%), linear-gradient(180deg, rgb(6 9 14 / 74%), transparent); content: ""; pointer-events: none; }
.arena-overview-panel { position: relative; isolation: isolate; padding: 0 0 12px; overflow: hidden; border-color: rgb(190 145 78 / 45%); border-radius: 6px; background: #080d14; box-shadow: inset 0 1px rgb(255 227 167 / 12%), 0 13px 34px rgb(0 0 0 / 24%); }
.arena-overview-panel::before, .arena-overview-panel::after { position: absolute; z-index: 1; top: 0; width: 44px; height: 210px; border-top: 2px solid rgb(217 174 92 / 55%); content: ""; pointer-events: none; }
.arena-overview-panel::before { left: 0; border-left: 1px solid rgb(217 174 92 / 43%); }
.arena-overview-panel::after { right: 0; border-right: 1px solid rgb(217 174 92 / 43%); }
.arena-gate-scene { position: absolute; z-index: -1; inset: 0 0 auto; height: 224px; background: linear-gradient(180deg, rgb(2 5 9 / 14%), #080d14 96%), linear-gradient(90deg, rgb(4 7 12 / 38%), transparent 45%, rgb(4 7 12 / 34%)), url("/images/background/arena-duel-v1.webp?v=20260914-arena-duel-1") center 67% / cover no-repeat; filter: saturate(.83) contrast(1.06); opacity: .92; }
.arena-gate-scene::after { position: absolute; inset: 0; background: radial-gradient(circle at 8% 42%, rgb(var(--arena-flame-rgb) / 20%), transparent 17%), radial-gradient(circle at 91% 40%, rgb(var(--arena-crystal-rgb) / 20%), transparent 18%), linear-gradient(180deg, transparent 52%, #080d14); content: ""; }
.arena-back-link { position: relative; z-index: 3; min-height: 34px; margin: 7px 11px 0; padding-inline: 2px; color: #aeb6b9; font-size: .62rem; }
.arena-gate-header { position: relative; z-index: 2; display: flex; min-height: 91px; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 15px 9px; }
.arena-gate-header .arena-title { min-width: 0; }
.arena-gate-header .arena-title > span { width: 55px; height: 55px; flex: 0 0 55px; border: 1px solid rgb(218 176 94 / 31%); border-radius: 50%; background: radial-gradient(circle, rgb(42 56 72 / 79%), rgb(5 9 14 / 84%) 70%); box-shadow: 0 0 0 5px rgb(3 6 10 / 40%), inset 0 0 14px rgb(var(--arena-crystal-rgb) / 18%); }
.arena-gate-header .arena-title-icon { width: 45px; height: 45px; filter: drop-shadow(0 5px 7px rgb(0 0 0 / 60%)); }
.arena-gate-header .eyebrow { color: #c8a960; font-family: Georgia, "Times New Roman", serif; font-size: .42rem; letter-spacing: .13em; }
.arena-gate-header .arena-title h2 { margin-top: 3px; color: #fff0cf; font-family: "Yu Mincho", serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; text-shadow: 0 2px 10px #000; }
.arena-gate-header .arena-title small { color: rgb(182 205 216 / 68%); font-family: Georgia, "Times New Roman", serif; font-size: .35rem; letter-spacing: .14em; }
.arena-season-end { display: grid; min-width: 112px; justify-items: end; gap: 3px; padding: 8px 9px; border: 1px solid rgb(203 164 91 / 26%); border-right: 2px solid rgb(203 164 91 / 57%); background: rgb(3 7 12 / 68%); color: #d5d8d5; text-shadow: 0 1px 6px #000; }
.arena-season-end small { color: #8a989c; font-family: Georgia, "Times New Roman", serif; font-size: .31rem; letter-spacing: .13em; }
.arena-season-end strong { color: #e4d3a8; font-size: .57rem; font-weight: 500; }
.arena-gate-copy { position: relative; z-index: 2; display: grid; gap: 4px; min-height: 78px; align-content: center; margin: 0 12px 11px; padding: 10px 12px; border-top: 1px solid rgb(225 188 112 / 21%); border-bottom: 1px solid rgb(104 174 215 / 14%); background: linear-gradient(90deg, rgb(4 8 13 / 85%), rgb(4 8 13 / 45%), rgb(4 8 13 / 81%)); }
.arena-gate-copy > span { display: flex; align-items: center; gap: 6px; color: #d5b76f; font-family: Georgia, "Times New Roman", serif; font-size: .37rem; letter-spacing: .16em; }
.arena-gate-copy > span i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--arena-flame-rgb)); box-shadow: 0 0 8px rgb(var(--arena-flame-rgb) / 85%); }
.arena-gate-copy p { max-width: 590px; margin: 0; color: #c8ced0; font-size: .64rem; line-height: 1.55; text-shadow: 0 1px 6px #000; }
.arena-rating-grid { position: relative; z-index: 2; gap: 10px; margin: 0 12px; }
.arena-rating-versus { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgb(206 171 99 / 42%); transform: translate(-50%, -50%) rotate(45deg); background: #0b1118; color: transparent; box-shadow: 0 0 0 4px #080d14, 0 4px 12px rgb(0 0 0 / 55%); }
.arena-rating-versus::after { transform: rotate(-45deg); color: #d4bd84; font-family: Georgia, "Times New Roman", serif; font-size: .43rem; content: "VS"; }
.arena-rate-card { position: relative; min-height: 123px; padding: 13px 15px; overflow: hidden; border-color: rgb(var(--arena-card-rgb) / 32%); border-radius: 3px; background: radial-gradient(circle at 100% 0, rgb(var(--arena-card-rgb) / 13%), transparent 43%), linear-gradient(145deg, #161d25, #090e14); box-shadow: inset 0 1px rgb(255 255 255 / 5%), inset 0 -18px 35px rgb(0 0 0 / 19%); }
.arena-rate-card::before { position: absolute; top: 0; bottom: 0; width: 2px; background: rgb(var(--arena-card-rgb) / 70%); box-shadow: 0 0 10px rgb(var(--arena-card-rgb) / 40%); content: ""; }
.arena-rate-attack::before { left: 0; }
.arena-rate-defense::before { right: 0; }
.arena-rate-card::after { position: absolute; right: 8px; bottom: 8px; width: 22px; height: 22px; border-right: 1px solid rgb(var(--arena-card-rgb) / 22%); border-bottom: 1px solid rgb(var(--arena-card-rgb) / 22%); content: ""; }
.arena-rate-card.active { border-color: rgb(var(--arena-card-rgb) / 70%); background: radial-gradient(circle at 85% 0, rgb(var(--arena-card-rgb) / 22%), transparent 49%), linear-gradient(145deg, #19232c, #0a1016); box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 0 18px rgb(var(--arena-card-rgb) / 10%); }
.arena-rate-label { color: rgb(var(--arena-card-rgb) / 72%); font-family: Georgia, "Times New Roman", serif; font-size: .38rem; }
.arena-rate-label b { color: #e8e3d7; font-family: "Yu Mincho", serif; font-size: .69rem; font-weight: 500; letter-spacing: .06em; }
.arena-rate-card strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 5vw, 1.82rem); font-weight: 500; letter-spacing: .02em; }
.arena-season-line { position: relative; z-index: 2; margin: 10px 12px 0; padding: 10px 2px 0; border-top-color: rgb(193 159 95 / 17%); }
.arena-season-line > span { display: flex; align-items: center; gap: 6px; }
.arena-season-line > span i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--arena-mode-rgb)); box-shadow: 0 0 7px rgb(var(--arena-mode-rgb) / 62%); }
.arena-season-line strong { color: #e8d7af; }
.arena-view-content > .panel { position: relative; overflow: hidden; border-radius: 4px; background: radial-gradient(circle at 100% 0, rgb(var(--arena-mode-rgb) / 7%), transparent 31%), linear-gradient(145deg, #131a21, #0a0f15); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.arena-view-content > .panel::before { position: absolute; top: 0; right: 14%; left: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--arena-mode-rgb) / 55%), transparent); content: ""; }
.arena-board-heading { align-items: center; border-bottom-color: rgb(var(--arena-mode-rgb) / 16%); }
.arena-board-heading > div { display: grid; gap: 1px; }
.arena-board-heading .eyebrow { color: rgb(var(--arena-mode-rgb) / 78%); font-family: Georgia, "Times New Roman", serif; font-size: .38rem; letter-spacing: .13em; }
.arena-board-heading h2 { color: #e6dfd0; font-family: "Yu Mincho", serif; font-weight: 500; letter-spacing: .06em; }
.arena-board-heading small { color: #6f8087; font-size: .47rem; }
.arena-refresh-button { display: inline-flex; min-height: 38px; align-items: center; gap: 4px; padding: 6px 8px; border: 1px solid rgb(var(--arena-mode-rgb) / 20%); background: rgb(0 0 0 / 15%); font-size: .58rem; }
.arena-refresh-button > span { color: rgb(var(--arena-mode-rgb) / 78%); font-size: .9rem; }
.arena-opponent-list { gap: 6px; }
.arena-opponent-card { position: relative; border-color: rgb(var(--arena-mode-rgb) / 17%); border-radius: 2px; background: linear-gradient(100deg, rgb(var(--arena-mode-rgb) / 4%), rgb(3 7 11 / 57%)); box-shadow: inset 0 1px rgb(255 255 255 / 2%); }
.arena-opponent-card::before { position: absolute; z-index: 2; top: 8px; bottom: 8px; left: 0; width: 2px; background: rgb(var(--arena-mode-rgb) / 44%); content: ""; }
.arena-opponent-card.expanded { border-color: rgb(var(--arena-mode-rgb) / 43%); box-shadow: 0 8px 18px rgb(0 0 0 / 17%); }
.arena-opponent-card.expanded::before { background: rgb(var(--arena-mode-rgb) / 86%); box-shadow: 0 0 8px rgb(var(--arena-mode-rgb) / 46%); }
.arena-opponent-summary { grid-template-columns: 40px 54px minmax(0, 1fr) 18px; min-height: 75px; gap: 8px; padding: 8px 10px 8px 9px; }
.arena-opponent-summary[aria-expanded="true"] { background: linear-gradient(90deg, rgb(var(--arena-mode-rgb) / 9%), transparent); }
.arena-opponent-seed { display: grid; justify-items: center; gap: 0; color: #56656b; font-family: Georgia, "Times New Roman", serif; }
.arena-opponent-seed small { font-size: .28rem; letter-spacing: .09em; }
.arena-opponent-seed b { color: rgb(var(--arena-mode-rgb) / 62%); font-size: .86rem; font-weight: 500; }
.arena-opponent-avatar { width: 54px; height: 54px; border: 1px solid rgb(var(--arena-mode-rgb) / 22%); border-radius: 2px; background: radial-gradient(circle at 50% 62%, rgb(var(--arena-mode-rgb) / 22%), transparent 68%); }
.arena-opponent-avatar .actor-image { width: 52px; height: 52px; }
.arena-opponent-copy { display: grid; min-width: 0; gap: 2px; }
.arena-opponent-copy > small { color: #60767c; font-family: Georgia, "Times New Roman", serif; font-size: .3rem; letter-spacing: .12em; }
.arena-opponent-copy > strong { overflow: hidden; color: #e1e1d9; font-family: "Yu Mincho", serif; font-size: .78rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.arena-opponent-copy > span { overflow: hidden; color: #77878b; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.arena-opponent-copy > span b { color: #d9be7c; font-family: Georgia, "Times New Roman", serif; font-size: .68rem; font-weight: 500; }
.arena-opponent-detail { padding: 11px 10px 12px; border-top-color: rgb(var(--arena-mode-rgb) / 17%); background: rgb(1 4 7 / 24%); }
.arena-ranking-panel .section-heading { border-bottom-color: rgb(var(--arena-mode-rgb) / 16%); }
.arena-my-rank { border-radius: 3px; background: radial-gradient(circle at 95% 0, rgb(var(--arena-mode-rgb) / 15%), transparent 45%), linear-gradient(110deg, rgb(var(--arena-mode-rgb) / 9%), rgb(0 0 0 / 9%)); }
.arena-ranking-list { border: 1px solid rgb(var(--arena-mode-rgb) / 12%); background: rgb(0 0 0 / 10%); }
.arena-ranking-list > div { border-bottom-color: rgb(var(--arena-mode-rgb) / 9%); }
.arena-challenge-backdrop { background: linear-gradient(rgb(2 4 8 / 78%), rgb(2 4 8 / 91%)), url("/images/background/arena-duel-v1.webp?v=20260914-arena-duel-1") center / cover no-repeat; backdrop-filter: blur(5px); }
.arena-challenge-dialog { position: relative; overflow: hidden; border-color: rgb(211 169 89 / 46%); border-radius: 4px; background: radial-gradient(circle at 100% 0, rgb(var(--arena-crystal-rgb) / 12%), transparent 37%), linear-gradient(145deg, #141b24, #080d13); box-shadow: 0 24px 70px rgb(0 0 0 / 72%), inset 0 1px rgb(255 237 194 / 8%); }
.arena-challenge-dialog::before, .arena-challenge-dialog::after { position: absolute; width: 28px; height: 28px; border-color: rgb(211 169 89 / 48%); content: ""; pointer-events: none; }
.arena-challenge-dialog::before { top: 7px; left: 7px; border-top: 1px solid; border-left: 1px solid; }
.arena-challenge-dialog::after { right: 7px; bottom: 7px; border-right: 1px solid; border-bottom: 1px solid; }
.arena-challenge-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid rgb(211 169 89 / 15%); }
.arena-challenge-emblem { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border: 1px solid rgb(211 169 89 / 29%); border-radius: 50%; background: rgb(0 0 0 / 19%); }
.arena-challenge-heading h2 { margin-bottom: 0; color: #efe6d2; font-family: "Yu Mincho", serif; font-size: 1rem; font-weight: 500; }
.arena-challenge-heading .eyebrow { color: #b89c5e; font-size: .38rem; }
.arena-challenge-summary { border-top: 0; }
.arena-challenge-summary > div { border-bottom-color: rgb(211 169 89 / 12%); }
.arena-challenge-actions button { min-height: 47px; }
.arena-locked-panel { position: relative; overflow: hidden; border-color: rgb(205 167 98 / 31%); background: linear-gradient(rgb(8 12 17 / 82%), rgb(8 12 17 / 94%)), url("/images/background/arena-duel-v1.webp?v=20260914-arena-duel-1") center 57% / cover no-repeat; }

@media (max-width: 420px) {
  .arena-overview-panel { margin-inline: -1px; }
  .arena-gate-header { min-height: 86px; padding-inline: 11px; }
  .arena-gate-header .arena-title { gap: 7px; }
  .arena-gate-header .arena-title > span { width: 45px; height: 45px; flex-basis: 45px; }
  .arena-gate-header .arena-title-icon { width: 38px; height: 38px; }
  .arena-gate-header .eyebrow { max-width: 146px; overflow: hidden; font-size: .34rem; text-overflow: ellipsis; white-space: nowrap; }
  .arena-gate-header .arena-title h2 { font-size: 1.03rem; }
  .arena-gate-header .arena-title small { font-size: .29rem; }
  .arena-season-end { min-width: 84px; padding: 7px 6px; }
  .arena-season-end small { font-size: .26rem; }
  .arena-season-end strong { font-size: .48rem; }
  .arena-gate-copy { min-height: 70px; margin-inline: 9px; padding-inline: 9px; }
  .arena-gate-copy p { font-size: .56rem; }
  .arena-rating-grid { gap: 8px; margin-inline: 9px; }
  .arena-rating-versus { width: 27px; height: 27px; }
  .arena-rate-card { min-height: 115px; padding: 11px 10px; }
  .arena-rate-label b { font-size: .63rem; }
  .arena-rate-card small { font-size: .5rem; }
  .arena-season-line { align-items: center; margin-inline: 9px; font-size: .54rem; }
  .arena-season-line > span { max-width: 64%; }
  .arena-opponent-summary { grid-template-columns: 32px 49px minmax(0, 1fr) 15px; gap: 6px; padding-inline: 7px; }
  .arena-opponent-avatar { width: 49px; height: 49px; }
  .arena-opponent-avatar .actor-image { width: 47px; height: 47px; }
  .arena-opponent-copy > strong { font-size: .72rem; }
  .arena-board-heading small { display: none; }
  .arena-refresh-button { font-size: .52rem; }
}

@media (max-width: 350px) {
  .arena-opponent-summary { grid-template-columns: 47px minmax(0, 1fr) 15px; }
  .arena-opponent-seed { display: none; }
  .arena-season-end small, .arena-gate-header .arena-title small { display: none; }
  .arena-season-line > span { max-width: 60%; }
}
.settings-panel { position: relative; }
.settings-intro { margin: 0 0 18px; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.adventurer-profile-form { display: grid; gap: 20px; max-width: 680px; margin-inline: auto; }
.adventurer-profile-field { display: grid; gap: 10px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.adventurer-profile-field > label { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: .85rem; }
.adventurer-profile-field > label > span { color: var(--gold); font-family: Georgia, serif; font-size: 1.1rem; }
.adventurer-profile-field > label > strong { display: grid; gap: 3px; }
.adventurer-profile-field label small { color: var(--muted); font-size: .52rem; font-weight: 400; letter-spacing: .1em; }
.adventurer-profile-field > select, .adventurer-profile-field > textarea { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-deep); color: var(--text); font: inherit; font-size: max(16px, .85rem); }
.adventurer-profile-field > textarea { min-height: 116px; resize: vertical; line-height: 1.65; }
.adventurer-profile-field > :is(select, textarea):focus-visible { border-color: var(--abyss-crystal); outline: 2px solid rgb(var(--abyss-crystal-rgb) / 30%); outline-offset: 2px; }
.adventurer-profile-field > small { color: var(--muted); font-size: .7rem; line-height: 1.7; }
.adventurer-profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.adventurer-profile-actions > button { min-height: 48px; padding: 10px; font-size: .8rem; }

/* Shared utility headers and page synchronization state. */
.utility-command-header { padding: 15px 0 17px; border-bottom: 1px solid var(--line); }
.utility-command-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.utility-command-title > div { min-width: 0; }
.utility-command-title .eyebrow { margin: 0 0 5px; color: var(--abyss-crystal); font-size: .56rem; letter-spacing: .14em; }
.utility-command-title h2 { margin: 0; font-family: "Yu Mincho", serif; font-size: 1.35rem; font-weight: 500; letter-spacing: .05em; }
.utility-command-title small { display: block; margin-top: 5px; color: var(--muted); font-size: .68rem; line-height: 1.6; }
.utility-command-title > .abyss-mechanism-mark { flex: 0 0 48px; width: 48px; height: 48px; }
.utility-command-title .abyss-mechanism-gear { width: 42px; height: 42px; }
.utility-command-title .abyss-mechanism-crystal { width: 16px; height: 16px; }
.adventurer-profile-settings > .settings-intro { margin-block: 16px; }
.utility-section-heading { display: flex; align-items: center; gap: 10px; padding-top: 15px; border-top: 1px solid var(--line); }
.utility-section-heading > span { color: var(--gold); font-family: Georgia, serif; font-size: 1.2rem; }
.utility-section-heading small { color: var(--muted); font-size: .5rem; letter-spacing: .14em; }
.utility-section-heading h3 { margin: 3px 0 0; color: var(--text); font-size: .92rem; font-weight: 500; }
.abyss-page-loading { min-height: 320px; background: radial-gradient(ellipse at 50% 40%, rgb(var(--abyss-crystal-rgb) / 9%), transparent 55%), var(--surface-deep); }
.abyss-page-loading > .text-button { min-height: 44px; }
.abyss-page-loading-console { display: grid; justify-items: center; gap: 10px; padding: 20px 0 28px; text-align: center; }
.abyss-page-loading-mark { position: relative; display: grid; place-items: center; width: 104px; height: 104px; margin-bottom: 10px; }
.abyss-page-loading-mark::before, .abyss-page-loading-mark::after { position: absolute; border-radius: 50%; content: ""; pointer-events: none; }
.abyss-page-loading-mark::before { inset: 0; border: 1px solid rgb(var(--abyss-crystal-rgb) / 18%); border-top-color: var(--abyss-crystal); border-right-color: var(--gold); animation: mechanism-gear-turn 1.8s linear infinite; }
.abyss-page-loading-mark::after { inset: 8px; border: 1px dashed rgb(var(--abyss-crystal-rgb) / 30%); border-bottom-color: var(--abyss-crystal); animation: mechanism-gear-turn 3.2s linear infinite reverse; }
.abyss-page-loading-mark > .abyss-mechanism-mark { width: 64px; height: 64px; }
.abyss-page-loading-mark .abyss-mechanism-gear { width: 54px; height: 54px; animation: mechanism-gear-turn 8s linear infinite; }
.abyss-page-loading-mark .abyss-mechanism-crystal { width: 21px; height: 21px; }
.abyss-page-loading-console > .eyebrow { margin: 0; color: var(--abyss-crystal); font-size: .54rem; letter-spacing: .16em; }
.abyss-page-loading-console h2 { margin: 0; font-family: "Yu Mincho", serif; font-size: 1.4rem; font-weight: 500; letter-spacing: .08em; }
.abyss-page-loading-console > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.7; }
.abyss-page-loading-track { position: relative; width: min(220px, 75%); height: 2px; margin-top: 10px; overflow: hidden; background: rgb(var(--abyss-crystal-rgb) / 12%); }
.abyss-page-loading-track > i { position: absolute; inset: 0 auto 0 -42%; width: 42%; background: linear-gradient(90deg, transparent, var(--abyss-crystal), transparent); animation: limited-abyss-loading-scan 1.8s ease-in-out infinite; }
@media (max-width: 390px) {
  .utility-command-title { gap: 10px; }
  .utility-command-title h2 { font-size: 1.15rem; }
  .adventurer-profile-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .abyss-page-loading-mark::before, .abyss-page-loading-mark::after, .abyss-page-loading-mark .abyss-mechanism-gear, .abyss-page-loading-track > i { animation: none; }
}
.settings-section { border-top: 1px solid var(--line); }
.settings-section + .settings-section { margin-top: 18px; }
.settings-section > h3 { margin: 0; padding: 14px 0 7px; color: var(--gold-strong); font-family: "Yu Mincho", serif; font-size: .82rem; letter-spacing: .08em; }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 72px; padding: 10px 0; border-bottom: 1px solid rgb(255 255 255 / 7%); }
.setting-copy { display: grid; gap: 3px; min-width: 0; }
.setting-copy strong { color: var(--text); font-size: .83rem; }
.setting-copy span { color: var(--muted); font-size: .67rem; line-height: 1.5; }
.setting-choices { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(62px, 1fr); gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.setting-choices button { min-height: 38px; padding: 6px 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.setting-choices button.selected, .setting-choices button[aria-pressed="true"] { border-color: var(--selected-border); background: linear-gradient(180deg, var(--selected-start), var(--selected-end)); color: var(--selected-text); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 16%); font-weight: 700; }
.theme-setting-choices { grid-template-columns: repeat(4, minmax(66px, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; }
.theme-choice { display: grid; grid-template-columns: 16px auto; align-items: center; justify-content: center; gap: 5px; }
.theme-choice-swatch { display: block; width: 15px; height: 15px; border: 1px solid rgb(255 255 255 / 24%); border-radius: 50%; box-shadow: 0 2px 5px rgb(0 0 0 / 35%); }
.theme-choice-swatch[data-theme-swatch="default"] { background: linear-gradient(135deg, #bcbcbc 0 45%, #202020 47%); }
.theme-choice-swatch[data-theme-swatch="blue"] { background: linear-gradient(135deg, #72a9dc 0 45%, #151b24 47%); }
.theme-choice-swatch[data-theme-swatch="red"] { background: linear-gradient(135deg, #cb776f 0 45%, #211719 47%); }
.theme-choice-swatch[data-theme-swatch="green"] { background: linear-gradient(135deg, #70ae7d 0 45%, #152019 47%); }
.theme-choice-swatch[data-theme-swatch="purple"] { background: linear-gradient(135deg, #ad8bd6 0 45%, #1d1725 47%); }
.theme-choice-swatch[data-theme-swatch="amber"] { background: linear-gradient(135deg, #c89445 0 45%, #201a12 47%); }
.theme-choice-swatch[data-theme-swatch="iron"] { background: linear-gradient(135deg, #8d9ba6 0 45%, #171b1f 47%); }
.theme-choice-swatch[data-theme-swatch="deepsea"] { background: linear-gradient(135deg, #61c8ca 0 45%, #10252b 47%); }
.character-fieldset { min-width: 0; margin: 1px 0 3px; padding: 0; border: 0; }
.character-fieldset legend { margin-bottom: 4px; color: var(--text); font-size: .83rem; }
.character-fieldset > p, .character-settings-description { margin: 0 0 9px; color: var(--muted); font-size: .67rem; line-height: 1.5; }
.character-picker { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.character-picker-scroll { max-height: clamp(360px, 58dvh, 560px); padding: 7px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--selected-border) var(--surface-deep); scrollbar-gutter: stable; scrollbar-width: thin; border: 1px solid rgb(120 204 229 / 16%); border-radius: 10px; background: radial-gradient(circle at 50% 0, rgb(83 156 181 / 8%), transparent 34%), rgb(0 0 0 / 18%); }
.character-picker-scroll::-webkit-scrollbar { width: 8px; }
.character-picker-scroll::-webkit-scrollbar-track { background: var(--surface-deep); }
.character-picker-scroll::-webkit-scrollbar-thumb { border: 2px solid var(--surface-deep); border-radius: 8px; background: var(--selected-border); }
.character-picker-scroll:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.character-option { position: relative; display: grid; min-width: 0; padding: 5px 4px 7px; overflow: hidden; border: 1px solid rgb(140 170 176 / 18%); border-radius: 9px; background: linear-gradient(155deg, rgb(28 35 37 / 92%), rgb(10 14 16 / 98%)); color: var(--muted); cursor: pointer; box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.character-option::before { position: absolute; top: 0; right: 18%; left: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgb(129 205 228 / 24%), transparent); content: ""; }
.character-option img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 5px 5px rgb(0 0 0 / 38%)); }
.character-option span { color: inherit; font-size: .62rem; line-height: 1.2; text-align: center; }
.character-option .character-option-number { color: #87989c; font-size: .47rem; letter-spacing: .1em; }
.character-option-selected { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid rgb(130 227 205 / 42%); border-radius: 99px; background: rgb(8 25 24 / 88%); color: #a8f2df !important; font-size: .46rem !important; font-weight: 700; letter-spacing: .04em; box-shadow: 0 0 10px rgb(88 225 195 / 16%); }
.character-option-selected i { width: 5px; height: 5px; border-radius: 50%; background: #7de1c8; box-shadow: 0 0 7px rgb(125 225 200 / 85%); }
.character-option-content { display: grid; gap: 4px; }
.character-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.character-option.selected, .character-option[aria-pressed="true"], .character-option:has(input:checked) { border-color: rgb(121 220 224 / 76%); background: radial-gradient(circle at 50% 22%, rgb(95 218 226 / 20%), transparent 48%), linear-gradient(180deg, rgb(var(--accent-rgb) / 30%), var(--surface-deep)); color: var(--selected-text); box-shadow: inset 0 0 0 1px rgb(147 231 235 / 16%), 0 0 16px rgb(79 200 213 / 14%); }
.character-option:focus-visible, .character-option:has(input:focus-visible) { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.character-settings-section { padding-bottom: 15px; }
.character-settings-description { margin-bottom: 10px; }
.character-settings-list { display: grid; gap: 8px; }
.character-settings-current { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px; overflow: hidden; border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 35%); border-radius: 12px; background: linear-gradient(112deg, rgb(var(--party-color-rgb, var(--accent-rgb)) / 12%), transparent 46%), rgb(0 0 0 / 18%); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.character-settings-current::before { position: absolute; top: 0; right: 18%; left: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--party-color-rgb, var(--accent-rgb)) / 70%), transparent); content: ""; }
.character-settings-portrait { display: grid; width: 72px; height: 72px; place-items: center; border: 0; border-radius: 0; background: transparent; }
.character-settings-portrait img { display: block; width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 5px 5px rgb(0 0 0 / 38%)); }
.character-settings-current-copy { display: grid; min-width: 0; gap: 2px; }
.character-settings-current-copy small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .61rem; }
.character-settings-current-copy small i { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--party-color, var(--gold)); box-shadow: 0 0 7px rgb(var(--party-color-rgb, var(--accent-rgb)) / 80%); }
.character-settings-current-copy strong { overflow: hidden; color: var(--text); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.character-settings-current-copy em { color: rgb(var(--party-color-rgb, var(--accent-rgb)) / 78%); font-size: .52rem; font-style: normal; letter-spacing: .09em; }
.character-settings-current .character-settings-change { display: inline-flex; min-width: 124px; min-height: 42px; align-items: center; justify-content: center; gap: 9px; padding-right: 12px; padding-left: 12px; border-color: rgb(var(--party-color-rgb, var(--accent-rgb)) / 40%); background: rgb(var(--party-color-rgb, var(--accent-rgb)) / 8%); }
.character-settings-change i { color: var(--party-color, var(--gold)); font-size: 1rem; font-style: normal; line-height: 1; }
.companion-identity-note { display: grid; grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; margin: 0; padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: .67rem; line-height: 1.55; }
.companion-identity-note::before { margin-top: 2px; color: var(--party-color, var(--gold)); font-size: .48rem; font-weight: 700; letter-spacing: .1em; content: "PROFILE"; }
.character-name-form { display: grid; grid-column: 1 / -1; gap: 5px; }
.character-name-form > label { color: var(--muted); font-size: .64rem; font-weight: 700; }
.character-name-form > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.character-name-form input { width: 100%; min-width: 0; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgb(0 0 0 / 24%); color: var(--text); font: inherit; }
.character-name-form input:focus { border-color: var(--accent); outline: 2px solid rgb(var(--accent-rgb) / 22%); outline-offset: 1px; }
.character-name-form .secondary-button { min-width: 104px; }
.character-theme-picker { display: grid; grid-column: 1 / -1; gap: 7px; }
.character-theme-label { color: var(--text); font-size: .68rem; font-weight: 700; }
.character-theme-label small { margin-left: 6px; color: var(--muted); font-size: .6rem; font-weight: 400; }
.character-theme-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 6px; }
.character-theme-option { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 40px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--inset); color: var(--text); cursor: pointer; font-size: .64rem; }
.character-theme-option.selected { border-color: var(--party-color); background: rgb(var(--party-color-rgb) / 17%); box-shadow: inset 0 0 0 1px rgb(var(--party-color-rgb) / 35%); }
.character-theme-option:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.character-theme-option:disabled { cursor: not-allowed; opacity: .45; }
.character-theme-swatch { width: 13px; height: 13px; flex: 0 0 13px; border: 1px solid rgb(255 255 255 / 24%); border-radius: 50%; background: var(--party-color); }
.character-combat-control { display: grid; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.character-combat-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.character-combat-option { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; min-height: 66px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgb(255 255 255 / 3%), transparent 60%), var(--inset); color: var(--text); cursor: pointer; text-align: left; }
.character-combat-option > span { display: grid; min-width: 0; gap: 3px; }
.character-combat-option strong { font-size: .7rem; }
.character-combat-option small { color: var(--muted); font-size: .57rem; line-height: 1.45; }
.character-combat-option > i { padding: 2px 5px; border: 1px solid currentcolor; border-radius: 99px; color: var(--party-color); font-size: .47rem; font-style: normal; white-space: nowrap; }
.character-combat-option.selected { border-color: rgb(var(--party-color-rgb) / 70%); background: radial-gradient(circle at 10% 20%, rgb(var(--party-color-rgb) / 18%), transparent 48%), rgb(var(--party-color-rgb) / 8%); box-shadow: inset 3px 0 var(--party-color), 0 0 14px rgb(var(--party-color-rgb) / 8%); }
.character-combat-option:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.character-combat-option:disabled { cursor: not-allowed; opacity: .45; }
.character-picker-backdrop { position: fixed; z-index: 201; inset: 0; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 30%, rgb(37 102 119 / 11%), transparent 35%), rgb(2 6 7 / 88%); backdrop-filter: blur(6px); animation: forge-backdrop-in 150ms ease-out; }
.character-picker-dialog { position: relative; display: flex; flex-direction: column; width: min(680px, 100%); height: min(680px, calc(100dvh - 32px)); min-height: 0; padding: 18px; overflow: hidden; border: 1px solid rgb(122 204 226 / 42%); border-radius: 13px; background: radial-gradient(circle at 86% 0, rgb(76 162 186 / 13%), transparent 30%), linear-gradient(155deg, #1a2326, #111718 72%); box-shadow: 0 24px 70px rgb(0 0 0 / 68%), inset 0 1px rgb(255 255 255 / 4%); animation: forge-dialog-in 180ms ease-out; }
.character-picker-dialog::before { position: absolute; top: 0; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgb(137 222 242 / 75%), transparent); content: ""; }
.character-picker-dialog-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid rgb(123 203 224 / 13%); }
.character-picker-title { display: flex; min-width: 0; align-items: center; gap: 11px; }
.character-picker-title > .abyss-mechanism-mark { width: 44px; height: 44px; flex-basis: 44px; }
.character-picker-title .abyss-mechanism-gear { width: 37px; height: 37px; }
.character-picker-title .abyss-mechanism-crystal { width: 14px; height: 14px; }
.character-picker-title h2 { margin: 2px 0 1px; }
.character-picker-title small { color: var(--muted); font-size: .55rem; }
.character-picker-count { display: grid; flex: 0 0 auto; justify-items: end; gap: 1px; padding-left: 12px; border-left: 1px solid rgb(123 203 224 / 14%); }
.character-picker-count > small { color: var(--muted); font-size: .43rem; letter-spacing: .14em; }
.character-picker-count strong { font-family: "Yu Mincho", serif; font-size: .92rem; font-variant-numeric: tabular-nums; }
.character-picker-count strong em { color: var(--muted); font-size: .48rem; font-style: normal; }
.character-picker-count span { display: inline-flex; align-items: center; gap: 4px; color: #7fcdb5; font-size: .4rem; letter-spacing: .06em; }
.character-picker-count span i, .character-picker-dialog-actions > span i { width: 5px; height: 5px; border-radius: 50%; background: #6bd8b4; box-shadow: 0 0 7px rgb(107 216 180 / 75%); }
.character-picker-dialog > p.small { flex: 0 0 auto; margin: 10px 0 11px; line-height: 1.55; }
.character-picker-description { padding-left: 9px; border-left: 2px solid rgb(116 205 229 / 35%); }
.character-picker-apply-shell { position: relative; display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.character-picker-choice-layer { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; visibility: visible; }
.character-picker-apply-shell.is-applying .character-picker-choice-layer { visibility: hidden; pointer-events: none; }
.character-picker-applying { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; min-height: 96px; padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(180deg, rgb(var(--accent-rgb) / 13%), var(--surface-deep)); color: var(--text); text-align: center; }
.character-picker-applying .pending-action-spinner { width: 1.35rem; height: 1.35rem; border-width: 2px; color: var(--gold-strong); }
.character-picker-applying strong { font-size: .86rem; letter-spacing: .03em; }
.character-picker-applying small { color: var(--muted); font-size: .64rem; }
.character-picker-dialog-actions { display: flex; flex: 0 0 auto; justify-content: center; align-items: center; gap: 18px; padding-top: 12px; }
.character-picker-dialog-actions > span { display: inline-flex; align-items: center; gap: 6px; color: #8ca2a6; font-size: .57rem; }
.character-picker-dialog-actions .secondary-button { min-width: 144px; border-color: rgb(124 204 225 / 28%); }
.character-picker-dialog .character-picker-scroll { flex: 1 1 auto; min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; align-content: start; grid-auto-rows: minmax(96px, max-content); -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.character-picker-settings .character-option { min-height: 96px; }
.settings-footer { display: grid; justify-items: start; gap: 2px; margin-top: 18px; }
.settings-footer .text-button { padding: 4px 0; color: #c6b990; }
.settings-footer p { margin: 0; color: var(--muted); font-size: .62rem; }
.settings-reset-backdrop { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 82%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.settings-reset-dialog { width: min(430px, 100%); padding: 18px; border: 1px solid #7c5a3c; border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 60%); animation: forge-dialog-in 180ms ease-out; }
.settings-reset-dialog h2 { margin: 3px 0 9px; }
.settings-reset-dialog > p.small { line-height: 1.65; }
.settings-reset-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; margin-top: 17px; }
.crystal-screen { display: grid; gap: 14px; }
.crystal-wallet-panel { position: relative; overflow: hidden; background: radial-gradient(circle at 82% 12%, rgb(78 171 216 / 18%), transparent 34%), radial-gradient(circle at 6% 96%, rgb(82 165 151 / 8%), transparent 30%), linear-gradient(150deg, rgb(27 38 41 / 99%), rgb(17 23 23 / 99%)); }
.crystal-wallet-panel::before { position: absolute; top: 0; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgb(133 217 244 / 68%), transparent); content: ""; }
.crystal-command-header { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding-bottom: 12px; border-bottom: 1px solid rgb(133 204 236 / 13%); }
.crystal-command-title { display: flex; min-width: 0; align-items: center; gap: 11px; }
.crystal-command-title > .abyss-mechanism-mark { width: 46px; height: 46px; flex-basis: 46px; }
.crystal-command-title .abyss-mechanism-gear { width: 39px; height: 39px; }
.crystal-command-title .abyss-mechanism-crystal { width: 15px; height: 15px; }
.crystal-command-title h2 { margin: 2px 0 1px; }
.crystal-command-title small { color: var(--muted); font-size: .56rem; }
.crystal-wallet-status { display: inline-flex; align-items: center; gap: 5px; color: #79d8bd; font-size: .43rem; letter-spacing: .1em; }
.crystal-wallet-status i { width: 5px; height: 5px; border-radius: 50%; background: #71dcb8; box-shadow: 0 0 7px rgb(113 220 184 / 80%); }
.crystal-balance-deck { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .8fr); align-items: end; gap: 16px; margin: 14px 0 12px; }
.crystal-total { display: flex; min-width: 0; align-items: center; gap: 11px; margin: 0; color: #9fe2ff; }
.crystal-total > img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 10px rgb(89 183 225 / 58%)); }
.crystal-total > span { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 8px; min-width: 0; }
.crystal-total span > small { grid-column: 1 / -1; color: #75afbf; font-size: .46rem; letter-spacing: .14em; }
.crystal-total strong { color: #f4fbff; font-family: "Yu Mincho", serif; font-size: clamp(2rem, 7vw, 2.7rem); line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgb(101 200 234 / 12%); }
.crystal-total em { color: var(--muted); font-size: .62rem; font-style: normal; }
.crystal-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid rgb(133 204 236 / 15%); border-radius: 7px; background: rgb(133 204 236 / 8%); }
.crystal-breakdown > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; background: rgb(2 8 10 / 50%); }
.crystal-breakdown dt { display: grid; color: var(--muted); font-size: .67rem; }
.crystal-breakdown dt small { color: #608b96; font-size: .4rem; letter-spacing: .12em; }
.crystal-breakdown dd { margin: 0; color: var(--text); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.crystal-wallet-note { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 9px; margin: 0; line-height: 1.55; }
.crystal-wallet-note i { width: 3px; height: 100%; min-height: 25px; border-radius: 99px; background: linear-gradient(#69c9e6, transparent); }
.crystal-usage-panel { background: radial-gradient(circle at 96% 4%, rgb(89 166 188 / 8%), transparent 27%), var(--panel); }
.crystal-section-heading { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 13px; padding-bottom: 11px; border-bottom: 1px solid rgb(133 204 236 / 13%); }
.gold-capacity-panel > .crystal-section-heading { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
.crystal-section-heading > span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgb(119 207 232 / 28%); border-radius: 50%; color: #80cde2; font-size: .57rem; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 10px rgb(92 189 214 / 10%); }
.crystal-section-heading h2 { margin: 2px 0 0; }
.crystal-section-heading div > small { color: var(--muted); font-size: .56rem; }
.crystal-usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.crystal-pass-status { position: relative; display: grid; gap: 4px; margin-bottom: 12px; padding: 13px; overflow: hidden; border: 1px solid rgb(210 173 81 / 25%); border-radius: 9px; background: radial-gradient(circle at 90% 5%, rgb(210 173 81 / 10%), transparent 30%), rgb(0 0 0 / 16%); box-shadow: inset 3px 0 rgb(210 173 81 / 34%); }
.crystal-pass-status p { margin: 0; }
.crystal-pass-status button { justify-self: start; margin-top: 6px; }
.pass-claim-picker { display: grid; gap: 8px; margin-top: 10px; padding: 11px; border: 1px solid rgb(var(--accent-rgb) / 24%); border-radius: 8px; background: rgb(0 0 0 / 18%); }
.pass-claim-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .72rem; }
.pass-claim-heading output { color: var(--gold-strong); font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pass-claim-controls { display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; align-items: center; gap: 8px; }
.crystal-pass-status .pass-claim-controls button { width: 54px; min-height: 44px; margin: 0; padding: 0 6px; justify-self: stretch; font-size: .78rem; touch-action: manipulation; }
.pass-claim-controls input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--gold); cursor: pointer; touch-action: pan-x; }
.pass-claim-controls input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
.pass-claim-controls input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; }
.pass-claim-range { display: flex; justify-content: space-between; color: var(--muted); font-size: .62rem; font-variant-numeric: tabular-nums; }
.crystal-pass-status .pass-claim-submit { width: 100%; min-height: 48px; justify-self: stretch; }
.crystal-usage-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 86px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: rgb(0 0 0 / 14%); }
.crystal-usage-card-icon { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 7px rgb(0 0 0 / 45%)); }
.crystal-usage-card > div { display: grid; min-width: 0; gap: 3px; }
.crystal-usage-card strong { font-size: .8rem; }
.crystal-usage-card small { color: var(--muted); font-size: .65rem; }
.crystal-usage-card p { margin: 1px 0 0; color: var(--muted); font-size: .59rem; line-height: 1.4; }
.crystal-usage-card button { min-width: 82px; }
.crystal-package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.crystal-package { display: grid; min-width: 0; padding: 12px 10px 10px; border: 1px solid #425a60; border-radius: 8px; background: linear-gradient(160deg, rgb(31 45 48 / 95%), rgb(20 25 24 / 98%)); text-align: center; }
.crystal-package > div { display: grid; gap: 2px; }
.crystal-package strong { color: #b8e9ff; font-family: "Yu Mincho", serif; font-size: 1.05rem; }
.crystal-package span { color: var(--text); font-size: .78rem; }
.crystal-package small { min-height: 28px; margin: 4px 0 8px; color: #e3c36f; font-size: .63rem; }
.crystal-package button { width: 100%; }
.crystal-view-tabs { display: flex; gap: 8px; }
.crystal-view-tabs button { display: flex; justify-content: center; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-weight: 700; }
.crystal-view-tabs button img { width: 26px; height: 26px; object-fit: contain; }
.crystal-view-tabs button[aria-pressed="true"] { color: var(--text); border-color: #c4a25e; background: linear-gradient(135deg, rgba(197,156,75,.22), rgba(80,143,186,.12)); }
.crystal-view-tabs button:focus-visible { outline: 2px solid #e3ba68; outline-offset: 2px; }
.crystal-support-products { overflow: hidden; border-color: rgba(199,162,92,.6); background: radial-gradient(ellipse at 95% 0%, rgba(198,152,60,.2), transparent 65%), var(--surface); }
.crystal-fund-panel { border-color: rgba(93,174,222,.65); background: radial-gradient(ellipse at 90% 0%, rgba(57,149,208,.23), transparent 65%), var(--surface); }
.crystal-support-card { display: grid; gap: 14px; min-width: 0; }
.crystal-support-products p { margin: 0; line-height: 1.65; }
.crystal-support-products > .small { margin-top: 12px; }
.crystal-support-hero { display: flex; align-items: center; gap: 18px; }
.crystal-support-art { position: relative; display: grid; place-items: center; width: 130px; height: 118px; flex-shrink: 0; border-radius: 18px; background: radial-gradient(circle, rgba(255,208,81,.22), transparent 70%); }
.crystal-fund-panel .crystal-support-art { background: radial-gradient(circle, rgba(51,185,249,.3), transparent 70%); }
.crystal-support-art > img { width: 102px; height: 102px; object-fit: contain; filter: drop-shadow(0 6px 9px rgba(0,0,0,.35)); }
.crystal-support-art > .crystal-support-art-extra { position: absolute; width: 65px; height: 65px; bottom: 0; right: 0; }
.crystal-support-heading { min-width: 0; }
.crystal-support-heading h2 { margin: 8px 0 6px; font-size: 23px; }
.crystal-support-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; }
.crystal-once-badge { display: inline-block; padding: 4px 9px; border-radius: 5px; background: #e6bd65; color: #231b0d; font-weight: 800; }
.crystal-support-theme { color: #e6bd65; }
.crystal-fund-panel .crystal-support-theme { color: #8bd7ff; }
.crystal-starter-benefits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.crystal-starter-benefits > div { display: flex; align-items: center; gap: 10px; padding: 12px; background: rgba(0,0,0,.2); border: 1px solid rgba(199,162,92,.22); border-radius: 10px; }
.crystal-starter-benefits img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.crystal-starter-benefits span { min-width: 0; display: grid; gap: 3px; }
.crystal-starter-benefits small { color: var(--muted); }
.crystal-support-purchase { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.crystal-support-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.crystal-support-price strong { font-size: 26px; color: #f3d996; }
.crystal-support-price small { margin-left: 8px; color: var(--muted); }
.crystal-support-purchase button { min-width: 130px; }
.crystal-support-status { padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,.22); }
.crystal-fund-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; color: #b6e7ff; }
.crystal-fund-total strong { font-size: 36px; line-height: 1.2; }
.crystal-fund-progress { display: grid; gap: 9px; padding: 12px; background: rgba(0,0,0,.18); border-radius: 10px; }
.crystal-fund-progress > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.crystal-fund-progress span { color: var(--muted); }
.crystal-fund-progress progress { width: 100%; height: 8px; border: 0; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.35); accent-color: #6fc7f3; }
.crystal-fund-progress progress::-webkit-progress-bar { background: rgba(0,0,0,.35); }
.crystal-fund-progress progress::-webkit-progress-value { background: linear-gradient(90deg,#3889c2,#9fe8ff); border-radius: 10px; }
.crystal-fund-milestones { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.crystal-fund-milestone { display: grid; grid-template-columns: 54px 34px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.17); }
.crystal-fund-milestone.available { border-color: #62b1d9; background: rgba(65,157,207,.14); }
.crystal-fund-milestone.claimed { opacity: .7; }
.crystal-fund-floor { display: grid; gap: 3px; font-size: 20px; font-weight: 800; }
.crystal-fund-floor small { font-size: 10px; color: var(--muted); font-weight: 400; }
.crystal-fund-milestone > img { width: 34px; height: 34px; object-fit: contain; }
.crystal-fund-reward { display: grid; gap: 3px; }
.crystal-fund-reward strong { font-size: 20px; color: #b6e7ff; }
.crystal-fund-reward small { font-size: 10px; color: var(--muted); }
.crystal-fund-milestone button { padding: 9px 11px; font-size: 12px; }
@media (max-width: 800px) {
  .crystal-fund-milestones { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  .crystal-support-hero { gap: 10px; }
  .crystal-support-art { width: 82px; height: 93px; }
  .crystal-support-art > img { width: 78px; height: 78px; }
  .crystal-support-art > .crystal-support-art-extra { width: 48px; height: 48px; }
  .crystal-support-heading h2 { font-size: 20px; }
  .crystal-support-theme { font-size: 10px; }
  .crystal-fund-total strong { font-size: 30px; }
  .crystal-starter-benefits { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .crystal-starter-benefits > div { padding: 9px 12px; }
  .crystal-support-price small { flex-basis: 100%; margin-left: 0; }
  .crystal-support-purchase button { min-width: 115px; }
  .crystal-fund-milestone { grid-template-columns: 50px 28px minmax(0,1fr) auto; gap: 6px; padding: 10px; }
  .crystal-fund-milestone > img { width: 28px; height: 28px; }
}
.crystal-policy { margin: 12px 0 0; line-height: 1.55; }
.crystal-history-list { display: grid; gap: 1px; }
.crystal-history-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 4px; border-bottom: 1px solid rgb(255 255 255 / 7%); }
.crystal-history-list article > div { display: flex; min-width: 0; align-items: center; gap: 8px; }
.crystal-history-list strong { overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.crystal-history-list time { color: var(--muted); font-size: .58rem; }
.crystal-history-list article > span { font-size: .8rem; font-weight: 700; }
.crystal-history-list .positive { color: #80d48a; }
.crystal-history-list .negative { color: #ef8d81; }
.crystal-history-list article > small { grid-column: 1 / -1; color: var(--muted); font-size: .6rem; }
.crystal-history-load-more { width: 100%; margin-top: 10px; }
.crystal-confirm-backdrop { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 82%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.crystal-confirm-dialog { width: min(430px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 18px; border: 1px solid #527988; border-radius: 10px; background: #182024; box-shadow: 0 24px 70px rgb(0 0 0 / 60%); animation: forge-dialog-in 180ms ease-out; }
.crystal-confirm-dialog h2 { margin: 3px 0 12px; }
.crystal-payment-methods { display: grid; gap: 8px; min-width: 0; margin: 12px 0 0; padding: 0; border: 0; }
.crystal-payment-methods legend { padding: 0 0 8px; font-size: var(--ga-font-section); font-weight: 700; }
.crystal-payment-option { position: relative; display: block; }
.crystal-payment-option input { min-height: 0; }
.crystal-payment-option-face {
  display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); align-items: center; gap: 8px;
  min-height: 48px; padding: 8px 12px; border: 1px solid var(--ga-control-border);
  border-radius: var(--ga-radius-choice); background: var(--ga-control-bg); color: var(--text);
  font-size: var(--ga-font-control); font-weight: 700; overflow-wrap: anywhere; cursor: pointer;
}
.crystal-payment-option-note {
  display: block; margin-top: 4px; font-size: var(--ga-font-note); font-weight: 400; line-height: 1.45;
}
.crystal-payment-check {
  display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--line);
  border-radius: 50%; color: transparent; line-height: 1;
}
.crystal-payment-option input:checked + .crystal-payment-option-face {
  border-color: var(--selected-border); background: linear-gradient(135deg, var(--selected-start), var(--selected-end));
  color: var(--selected-text);
}
.crystal-payment-option input:checked + .crystal-payment-option-face .crystal-payment-check {
  border-color: currentColor; color: var(--selected-text);
}
.crystal-payment-option input:focus-visible + .crystal-payment-option-face { outline: 2px solid var(--gold); outline-offset: 2px; }
.crystal-payment-option input:disabled + .crystal-payment-option-face { opacity: .65; cursor: not-allowed; }
.crystal-confirm-summary { display: grid; gap: 5px; padding: 13px; border: 1px solid rgb(133 204 236 / 25%); border-radius: 7px; background: rgb(0 0 0 / 18%); }
.crystal-confirm-summary strong { color: #c7eeff; font-size: 1rem; }
.crystal-confirm-summary span { font-size: .86rem; }
.crystal-confirm-summary small { color: var(--muted); font-size: .68rem; }
.crystal-usage-confirm-summary { grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; }
.crystal-usage-confirm-summary .crystal-confirm-item-icon { grid-row: 1 / 3; width: 54px; height: 54px; object-fit: contain; }
.crystal-usage-confirm-summary > small { grid-column: 2 / -1; }
.crystal-test-warning { margin: 12px 0 0; padding: 8px 10px; border-left: 2px solid #77bad6; background: rgb(66 133 160 / 12%); color: #cdeeff; font-size: .7rem; line-height: 1.5; }
.crystal-legal-consent { margin-top: 12px; }
.crystal-legal-links { display: block; margin-top: 10px; }
.crystal-confirm-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; margin-top: 16px; }
.capacity-payment-options { display: grid; gap: 8px; margin-block: 12px; }
.capacity-payment-option { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.capacity-payment-option > div { display: grid; gap: 4px; }
.capacity-payment-option small { font-size: var(--ga-font-note); }
.capacity-payment-back { width: 100%; }
.crystal-operations-screen { display: grid; gap: 14px; }
.crystal-audit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
.crystal-audit-grid > div { padding: 9px; border-left: 2px solid #527988; background: rgb(0 0 0 / 16%); }
.crystal-audit-grid dt { color: var(--muted); font-size: .61rem; }
.crystal-audit-grid dd { margin: 3px 0 0; font-size: .8rem; font-weight: 700; }
.crystal-audit-issues { display: grid; gap: 6px; }
.crystal-audit-issues p { display: grid; gap: 2px; margin: 0; padding: 8px 10px; border-left: 2px solid currentColor; background: rgb(0 0 0 / 13%); font-size: .67rem; }
.success-note { color: #8fd29a; }
.crystal-operations-list { display: grid; gap: 7px; }
.crystal-operations-list article { display: grid; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: rgb(0 0 0 / 14%); }
.crystal-operations-list header { display: flex; justify-content: space-between; gap: 9px; }
.crystal-operations-list p, .crystal-operations-list small { margin: 0; }
.crystal-operations-list p { font-size: .7rem; }
.crystal-operations-list small { color: var(--muted); font-size: .6rem; }
.crystal-operations-list button { justify-self: start; margin-top: 4px; }
body.crystal-modal-open { overflow: hidden; }
body.settings-modal-open { overflow: hidden; }
.skill-card { padding: 13px; border-top: 2px solid var(--line); background: var(--surface); }
.skill-card.unknown { opacity: .58; }
.skill-card[data-type="ACTIVE"] { border-color: var(--red); }
.skill-card[data-type="PASSIVE"], .skill-card[data-type="TRIGGER"] { border-color: var(--green); }
.skill-card[data-type="CONVERSION"] { border-color: var(--blue); }
.skill-card[data-type="CURSE"] { border-color: var(--purple); }
.catalog-levels { margin-top: 10px; border-top: 1px solid var(--line); }
.catalog-levels summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px 2px; color: var(--text); cursor: pointer; font-size: .7rem; list-style: none; }
.catalog-levels summary::-webkit-details-marker { display: none; }
.catalog-levels summary::after { color: var(--muted); content: "⌄"; font-size: .8rem; }
.catalog-levels[open] summary::after { transform: rotate(180deg); }
.catalog-levels summary b { margin-left: auto; color: var(--gold); font-size: .62rem; font-weight: 600; }
.catalog-levels ol { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
.catalog-levels li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 7px; padding: 7px 2px; border-top: 1px solid rgb(255 255 255 / 7%); font-size: .63rem; line-height: 1.45; }
.catalog-levels li b { color: #f3f5f7; }
.catalog-levels li span { color: #e6e9ed; }
.catalog-levels li span small { display: block; margin-top: 3px; color: #c9ab72; font-size: .58rem; }
.catalog-levels li.locked b, .catalog-levels li.locked span { color: #687079; }
.catalog-levels li.locked span small { color: #6f6658; }
.skill-card.unknown { opacity: 1; }
.skill-card.unknown > :not(.catalog-levels), .skill-card.unknown .catalog-levels summary { opacity: .58; }

html { --battle-speed-factor: 1; }
html[data-battle-speed="1"] { --battle-speed-factor: calc(1 / 1.5); }
html[data-battle-speed="2"] { --battle-speed-factor: calc(1 / 2.25); }
html[data-battle-speed="4"] { --battle-speed-factor: calc(1 / 3); }
.battle-shell { min-height: calc(100vh - 130px); padding-bottom: 80px; }
.battle-shell.phase-paused:not(.showing-result) { padding-bottom: 102px; }
.battle-shell.showing-result { padding-bottom: 24px; }
.battle-shell.defeat-screen { position: relative; }
.battle-shell.defeat-screen::before { position: absolute; z-index: 40; inset: 0; border-radius: 10px; background: rgb(2 4 8 / 66%); content: ""; pointer-events: none; }
.battle-defeat-message { position: absolute; z-index: 41; top: 50%; left: 50%; width: min(420px, calc(100% - 20px)); margin: 0; padding: 13px 16px; border: 1px solid rgb(184 115 125 / 60%); border-radius: 8px; background: rgb(21 14 19 / 94%); box-shadow: 0 12px 36px rgb(0 0 0 / 55%); color: #f2dce0; font-family: "Yu Mincho", serif; font-size: clamp(.88rem, 3.6vw, 1.17rem); font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; text-align: center; transform: translate(-50%, -50%); }
.battle-defeat-notice { position: absolute; z-index: 41; top: 50%; left: 50%; display: grid; gap: 16px; width: min(420px, calc(100% - 20px)); text-align: center; transform: translate(-50%, -50%); }
.battle-defeat-notice > .battle-defeat-message { position: static; width: auto; transform: none; }
.battle-defeat-advice { display: grid; justify-items: center; gap: 8px; padding: 0 8px; color: var(--text); overflow-wrap: anywhere; }
.battle-defeat-advice p { margin: 0; }
.battle-defeat-advice-label { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--gold); font-size: .75rem; letter-spacing: .06em; line-height: 1.6; }
.battle-defeat-advice-label::before, .battle-defeat-advice-label::after { width: 24px; height: 1px; background: currentColor; opacity: .4; content: ""; }
.battle-defeat-advice-text { max-width: 26em; margin-inline: auto; font-size: .875rem; line-height: 1.8; text-wrap: pretty; }
.battle-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 5px; }
.battle-header > div:first-child { min-width: 0; }
.battle-header h2 { margin: 0; }
.battle-progress-title { display: flex; align-items: center; gap: 9px; }
.battle-floor-heading { display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1; }
.battle-difficulty-label { color: #9a8e70; font-family: "Yu Gothic UI", sans-serif; font-size: clamp(.42rem, 1.7vw, .52rem); font-weight: 700; letter-spacing: .08em; line-height: 1; white-space: nowrap; }
.battle-phase-heading { display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 2px; }
.battle-phase-label { color: var(--muted); font-family: "Yu Gothic UI", sans-serif; font-size: .76em; font-weight: 500; letter-spacing: .04em; }
.battle-phase-progress { display: flex; box-sizing: border-box; align-items: center; width: 100%; min-height: 9px; pointer-events: none; }
.battle-phase-node { display: grid; flex: 0 0 9px; width: 9px; height: 9px; place-items: center; border: 1px solid rgb(185 200 201 / 55%); border-radius: 50%; background: rgb(29 39 43 / 58%); color: transparent; font-family: "Yu Gothic UI", sans-serif; font-size: 0; line-height: 1; }
.battle-phase-node.complete { border-color: rgb(var(--accent-rgb) / 88%); background: rgb(var(--accent-rgb) / 80%); color: #18221f; }
.battle-phase-node.active { border: 2px solid rgb(var(--accent-rgb) / 88%); background: rgb(29 39 43 / 58%); box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 14%); }
.battle-phase-progress.transitioning .battle-phase-node.active { animation: phase-node-arrive calc(350ms * var(--battle-speed-factor)) calc(650ms * var(--battle-speed-factor)) ease-out both; }
.battle-phase-connector { flex: 1 1 auto; min-width: 3px; height: 2px; margin: 0 2px; overflow: hidden; border-radius: 999px; background: rgb(203 216 212 / 35%); }
.battle-phase-connector > i { display: block; width: 100%; height: 100%; border-radius: inherit; background: rgb(var(--accent-rgb) / 80%); transform: scaleX(0); transform-origin: left center; }
.battle-phase-connector.complete > i { transform: scaleX(1); }
.battle-phase-connector.advancing > i { animation: phase-connector-grow calc(850ms * var(--battle-speed-factor)) cubic-bezier(.16, .85, .2, 1) both; }
html[data-combat-motion="short"] .battle-phase-connector.advancing > i { animation-duration: calc(470ms * var(--battle-speed-factor)); }
html[data-combat-motion="short"] .battle-phase-progress.transitioning .battle-phase-node.active { animation-duration: calc(190ms * var(--battle-speed-factor)); animation-delay: calc(360ms * var(--battle-speed-factor)); }
@keyframes phase-connector-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes phase-node-arrive { from { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 36%); } to { box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 14%); } }
.battle-round-label { color: #9a9d8e; font-family: "Yu Gothic UI", sans-serif; font-size: .58em; font-weight: 500; letter-spacing: .03em; }
.battle-mode-label { padding-left: 2px; color: #858878; font-family: "Yu Gothic UI", sans-serif; font-size: .56em; font-weight: 500; }
.battle-utility-controls { display: grid; grid-template-columns: 34px auto 52px auto; align-items: center; gap: 4px; }
.battle-utility-controls.arena-duel-utility { grid-template-columns: auto 52px auto; }
.battle-loot-button { display: grid; width: 34px; min-height: 32px; place-items: center; padding: 2px; border: 1px solid #796a49; border-radius: 6px; background: linear-gradient(180deg, #302b21, #1d1b17); cursor: pointer; }
.battle-loot-button:hover { border-color: #bda46a; background: linear-gradient(180deg, #3b3426, #242018); }
.battle-loot-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.battle-loot-button:disabled { cursor: wait; opacity: .55; }
.battle-loot-icon { display: block; width: 24px; height: 24px; object-fit: contain; }
.battle-auto-group { position: relative; display: flex; align-items: stretch; min-width: 0; border: 1px solid #b89543; border-radius: 6px; background: linear-gradient(180deg, #3d321b, #211b10); box-shadow: inset 0 1px rgb(255 238 180 / 13%), 0 2px 7px rgb(0 0 0 / 32%); color: #f3d98f; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; }
.battle-auto-settings-button { width: 30px; min-height: 32px; padding: 0; border: 0; border-left: 1px solid rgb(232 199 103 / 30%); border-radius: 0 5px 5px 0; background: transparent; color: #e7d39e; cursor: pointer; font-size: .85rem; }
.battle-auto-settings-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.battle-auto-scope-menu { position: absolute; z-index: 20; top: calc(100% + 5px); right: 0; display: grid; width: 178px; padding: 5px; border: 1px solid var(--accent-border); border-radius: 7px; background: var(--dialog); box-shadow: var(--shadow); }
.battle-auto-scope-menu button { min-height: 36px; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--text); cursor: pointer; font-size: .65rem; text-align: left; }
.battle-auto-scope-menu button[aria-pressed="true"] { background: rgb(var(--accent-rgb) / 23%); color: var(--gold-strong); }
.battle-utility-controls .battle-auto-button { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; padding: 2px 7px; border-color: #b89543; background: linear-gradient(180deg, #3d321b, #211b10); color: #f3d98f; box-shadow: inset 0 1px rgb(255 238 180 / 13%), 0 2px 7px rgb(0 0 0 / 32%); white-space: nowrap; }
.battle-auto-button::before { color: #e8c767; font-size: .66rem; line-height: 1; content: "▶"; }
.battle-auto-button strong { font-size: .7rem; letter-spacing: .05em; }
.battle-auto-button span { padding-left: 5px; border-left: 1px solid rgb(232 199 103 / 30%); color: #c9b985; font-size: .55rem; }
.battle-auto-button:hover { border-color: #d5b65e; background: linear-gradient(180deg, #514123, #2c2313); }
.battle-auto-button:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgb(0 0 0 / 34%); }
.battle-utility-controls .battle-auto-group:hover { border-color: #d5b65e; background: linear-gradient(180deg, #514123, #2c2313); }
.battle-utility-controls .battle-auto-group .battle-auto-button { border: 0; border-radius: 5px 0 0 5px; background: transparent; box-shadow: none; color: inherit; }
.battle-utility-controls .battle-auto-group .battle-auto-button:hover { background: rgb(255 255 255 / 4%); }
.battle-utility-controls .battle-auto-group .battle-auto-button:active { transform: none; box-shadow: inset 0 2px 5px rgb(0 0 0 / 26%); }
.battle-auto-button.auto-on span, .battle-auto-button.auto-stop-pending span { color: inherit; }
.battle-utility-controls .battle-auto-group.auto-on { border-color: #719669; background: linear-gradient(180deg, #3e623a, #253e24); box-shadow: inset 0 1px rgb(229 255 218 / 13%), 0 2px 8px rgb(23 60 24 / 38%); color: #e7f2d5; }
.battle-utility-controls .battle-auto-group.auto-stop-pending { border-color: #d0a753; background: linear-gradient(180deg, #685426, #433617); color: #fff0bd; }
.battle-auto-group.auto-on .battle-auto-settings-button, .battle-auto-group.auto-stop-pending .battle-auto-settings-button { border-left-color: currentColor; color: inherit; }
.battle-auto-group.auto-on .battle-auto-button::before, .battle-auto-group.auto-stop-pending .battle-auto-button::before { color: inherit; }
.battle-auto-button.auto-on::before { content: "■"; }
.battle-auto-button.auto-stop-pending::before { width: 1rem; height: 1rem; flex: 0 0 1rem; border: 0; border-radius: 0; content: ""; animation: pending-action-spin 1.2s linear infinite; }
.battle-auto-button.auto-stop-pending:disabled { cursor: wait; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .battle-auto-button.auto-stop-pending::before { animation: none; } }
.battle-utility-controls .battle-speed-trigger { display: flex; align-items: center; justify-content: space-between; gap: 3px; width: 52px; min-height: 32px; padding: 2px 6px; border: 1px solid #53606a; border-radius: 6px; background: linear-gradient(180deg, #252c34, #171e25); color: #e5edf2; font-size: .68rem; font-variant-numeric: tabular-nums; }
.battle-speed-trigger span:last-child { color: #a3b0b9; font-size: .85rem; line-height: 1; }
.battle-speed-backdrop { position: fixed; z-index: 240; inset: 0; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgb(4 7 9 / 82%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.battle-speed-dialog { width: min(380px, 100%); max-height: 100%; overflow-y: auto; padding: 20px; border: 1px solid #687a83; border-radius: 12px; background: linear-gradient(155deg, #242d35, #171d24 72%); box-shadow: 0 24px 70px rgb(0 0 0 / 65%), inset 0 1px rgb(255 255 255 / 7%); outline: none; animation: forge-dialog-in 180ms ease-out; }
.battle-speed-dialog .eyebrow { color: #a9c4cf; }
.battle-speed-dialog h2 { margin: 4px 0 6px; color: #f1f1eb; font-size: 1.18rem; }
.battle-speed-dialog > p:not(.eyebrow) { margin: 0 0 16px; color: #b5c1c6; font-size: .75rem; line-height: 1.6; }
.battle-speed-options { display: grid; gap: 8px; }
.battle-speed-option { display: grid; grid-template-columns: 56px 1fr 24px; align-items: center; gap: 10px; min-height: 56px; padding: 8px 13px; border: 1px solid #485660; border-radius: 8px; background: #1d252c; color: #d7e0e4; text-align: left; }
.battle-speed-option strong { color: #f2f5f2; font-size: 1.16rem; font-variant-numeric: tabular-nums; }
.battle-speed-option span { color: #afbec6; font-size: .78rem; }
.battle-speed-option i { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #62717a; border-radius: 50%; color: transparent; font-size: .74rem; font-style: normal; }
.battle-speed-option.selected { border-color: #b9a277; background: linear-gradient(110deg, #34382f, #252e32); box-shadow: inset 3px 0 #d2b46c; }
.battle-speed-option.selected i { border-color: #d1b778; background: #836d3e; color: #fff8e3; }
.battle-speed-close { width: 100%; min-height: 40px; margin-top: 16px; border-color: #56646b; color: #dce3e4; }
body.battle-speed-modal-open { overflow: hidden; }
.battle-utility-controls .battle-retreat-button { min-height: 32px; padding: 2px 3px; font-size: .66rem; white-space: nowrap; }
.battle-turn-order { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 54px; margin-bottom: 7px; padding: 5px 7px; overflow: hidden; border: 1px solid rgb(205 177 111 / 20%); border-radius: 7px; background: linear-gradient(90deg, rgb(17 20 18 / 96%), rgb(10 15 19 / 94%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.battle-turn-order-heading { display: grid; gap: 2px; padding-left: 3px; border-right: 1px solid rgb(255 255 255 / 9%); }
.battle-turn-order-heading strong { color: #d8c8a4; font-family: "Yu Mincho", serif; font-size: .67rem; letter-spacing: .08em; }
.battle-turn-order-heading span { color: var(--muted); font-size: .5rem; }
.battle-turn-list { display: flex; align-items: stretch; gap: 2px; min-width: 0; overflow-x: auto; padding: 1px 2px 2px; scrollbar-width: none; }
.battle-turn-list::-webkit-scrollbar { display: none; }
.battle-turn-separator { display: grid; flex: 0 0 9px; align-self: center; place-items: center; color: #8e815f; font-size: .56rem; line-height: 1; text-shadow: 0 0 5px rgb(205 177 111 / 18%); }
.battle-turn-actor { position: relative; display: grid; flex: 0 0 48px; grid-template-rows: 31px 11px; align-items: center; justify-items: center; min-width: 0; padding: 2px 3px 1px; overflow: visible; border: 1px solid rgb(255 255 255 / 9%); border-radius: 5px; background: rgb(2 6 8 / 46%); color: var(--muted); }
.battle-turn-actor.current { border-color: #c9a958; background: linear-gradient(180deg, rgb(119 88 30 / 30%), rgb(18 18 12 / 74%)); color: #f3d98f; box-shadow: 0 0 0 1px rgb(235 195 96 / 14%), 0 0 10px rgb(212 169 72 / 18%); }
.battle-turn-actor.current::after { position: absolute; z-index: 2; right: 4px; bottom: 0; left: 4px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #a97e25, #ffe194, #a97e25); box-shadow: 0 0 6px rgb(255 211 105 / 64%); content: ""; }
.battle-turn-actor.acted:not(.defeated) { opacity: 1; border-color: rgb(101 144 153 / 25%); background: rgb(16 31 35 / 58%); color: #9fb8bd; filter: none; }
.battle-turn-actor.defeated { opacity: .24; filter: grayscale(1); }
.battle-turn-portrait { display: grid; width: 31px; height: 31px; place-items: center; overflow: hidden; }
.battle-turn-portrait .actor-image { width: 31px; height: 31px; object-fit: contain; filter: none; }
.battle-turn-mark { color: var(--gold-strong); font-family: serif; font-size: 1rem; }
.battle-turn-name { overflow: hidden; width: 100%; font-size: .48rem; line-height: 11px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.battle-turn-done { position: absolute; z-index: 1; top: -5px; left: -4px; padding: 1px 3px; border: 1px solid rgb(112 169 181 / 32%); border-radius: 3px; background: #173238; color: #b9dce2; font-size: .36rem; font-weight: 700; line-height: 1.25; }
.battle-turn-now { position: absolute; z-index: 1; top: -6px; right: -4px; padding: 1px 3px; border-radius: 3px; background: #8c6d29; color: #fff0bb; font-size: .38rem; line-height: 1.25; letter-spacing: .04em; }
.arena { min-height: 520px; padding: 16px; overflow: visible; border: 1px solid var(--line); border-radius: 10px; background: radial-gradient(circle at 50% 5%, var(--arena-glow), var(--form-surface) 42%); box-shadow: var(--shadow); }
.battle-shell.battle-zone-arena { --battle-zone-image: url("/images/background/arena-colosseum-round-portrait-v2.webp?v=20261029-round-1"); }
.battle-shell.arena-match .arena { border-color: rgb(168 119 74 / 48%); }
.arena-duel-badge { display: inline-grid; min-height: 32px; padding: 0 8px; place-items: center; border: 1px solid rgb(190 125 77 / 42%); border-radius: 5px; background: rgb(78 36 28 / 70%); color: #f1c19a; font-size: .58rem; font-weight: 700; white-space: nowrap; }
.arena-duel-finalizing { margin-top: 8px; padding: 12px; border: 1px solid rgb(190 125 77 / 38%); border-radius: 7px; background: rgb(47 23 20 / 62%); color: #efc5aa; font-size: .72rem; text-align: center; }
.arena-result-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.arena-result-outcome { color: #eacb8d; font-size: .72rem; font-weight: 700; }
.combatants { position: relative; display: grid; grid-template-columns: minmax(120px, .8fr) minmax(180px, 1.2fr); gap: 20px; align-items: start; min-height: 230px; padding-top: 8px; overflow: visible; }
.battle-technique-banner { position: absolute; z-index: 24; top: 10px; left: 50%; display: grid; min-width: min(230px, calc(100% - 28px)); justify-items: center; gap: 2px; padding: 7px 18px 8px; border-block: 1px solid rgb(232 116 102 / 68%); background: linear-gradient(90deg, transparent, rgb(39 12 15 / 94%) 14%, rgb(39 12 15 / 94%) 86%, transparent); box-shadow: 0 8px 22px rgb(0 0 0 / 34%); color: #fff0e5; text-align: center; pointer-events: none; transform: translateX(-50%); }
.battle-technique-banner[hidden] { display: none; }
.battle-technique-banner small { color: #e3b7ac; font-size: .5rem; letter-spacing: .12em; line-height: 1.2; }
.battle-technique-banner strong { font-family: "Yu Mincho", serif; font-size: .92rem; font-weight: 700; letter-spacing: .08em; line-height: 1.25; text-shadow: 0 1px 8px rgb(255 92 73 / 42%); }
.battle-technique-banner.technique-side-ally { border-block-color: rgb(96 210 255 / 76%); background: linear-gradient(90deg, transparent, rgb(7 37 55 / 94%) 14%, rgb(7 37 55 / 94%) 86%, transparent); color: #effcff; }
.battle-technique-banner.technique-side-ally small { color: #a9eaff; }
.battle-technique-banner.technique-side-ally strong { text-shadow: 0 1px 9px rgb(65 204 255 / 55%); }
.battle-technique-banner.technique-pair { max-width: calc(100% - 28px); border-top-color: #65ceff; border-bottom-color: #ffe27a; background: linear-gradient(90deg, transparent, rgb(8 42 76 / 96%) 14%, rgb(8 42 76 / 96%) 86%, transparent); }
.battle-technique-banner.technique-pair small { color: #8fddff; font-weight: 700; }
.battle-technique-banner.technique-pair strong { color: #ffe27a; overflow-wrap: anywhere; text-shadow: -1px 0 #176da8, 1px 0 #176da8, 0 -1px #176da8, 0 1px #176da8, 0 0 10px rgb(77 184 255 / 75%); }
.combat-pair-technique-name { color: #ffe27a; font-weight: 700; text-shadow: 0 0 5px #258bc9, 0 1px 2px #07335c; }
.battle-technique-banner.showing { animation: enemy-technique-enter calc(220ms * var(--battle-speed-factor)) ease-out both; }
.battle-technique-banner.leaving { animation: enemy-technique-leave calc(110ms * var(--battle-speed-factor)) ease-in both; }
@keyframes enemy-technique-enter { from { opacity: 0; transform: translate(-50%, -6px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes enemy-technique-leave { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -3px); } }
.battle-shell.battle-zone-1 { --battle-zone-image: url("/images/background/battle-01-castle-outskirts.webp?v=20260915-battle-backgrounds-1"); }
.battle-shell.battle-zone-2 { --battle-zone-image: url("/images/background/battle-02-underground-cemetery.webp?v=20260915-battle-backgrounds-1"); }
.battle-shell.battle-zone-3 { --battle-zone-image: url("/images/background/battle-03-mycelium-cavern.webp?v=20260915-battle-backgrounds-1"); }
.battle-shell.battle-zone-4 { --battle-zone-image: url("/images/background/battle-04-scorching-furnace.webp?v=20260915-battle-backgrounds-1"); }
.battle-shell.battle-zone-5 { --battle-zone-image: url("/images/background/battle-05-ice-crystal-mine.webp?v=20260915-battle-backgrounds-1"); }
.battle-shell.battle-zone-6 { --battle-zone-image: url("/images/background/battle-06-void-corridor.webp?v=20260915-battle-backgrounds-1"); }
.battle-shell.battle-zone-7 { --battle-zone-image: url("/images/background/battle-07-sunken-cathedral.webp?v=20260915-battle-backgrounds-1"); }
.battle-shell.battle-zone-8 { --battle-zone-image: url("/images/background/battle-08-stellar-remains-garden.webp?v=20260915-battle-backgrounds-1"); }
.battle-shell.battle-zone-9 { --battle-zone-image: url("/images/background/battle-09-black-iron-mausoleum.webp?v=20260915-battle-backgrounds-1"); }
.battle-shell.battle-zone-10 { --battle-zone-image: url("/images/background/battle-10-abyss-gate.webp?v=20260915-battle-backgrounds-1"); }
.battle-shell.battle-zone-11 { --battle-zone-image: url("/images/background/battle-11-echo-realm.webp?v=20260918-deep-battle-backgrounds-1"); }
.battle-shell.battle-zone-12 { --battle-zone-image: url("/images/background/battle-12-fragmented-archive.webp?v=20260918-deep-battle-backgrounds-1"); }
.battle-shell.battle-zone-13 { --battle-zone-image: url("/images/background/battle-13-rifted-molten-vein.webp?v=20260918-deep-battle-backgrounds-1"); }
.battle-shell.battle-zone-14 { --battle-zone-image: url("/images/background/battle-14-reverse-tide-waterway.webp?v=20260918-deep-battle-backgrounds-1"); }
.battle-shell.battle-zone-15 { --battle-zone-image: url("/images/background/battle-15-thunder-spire.webp?v=20260918-deep-battle-backgrounds-1"); }
.battle-shell.battle-zone-16 { --battle-zone-image: url("/images/background/battle-16-mirror-sanctuary.webp?v=20260918-deep-battle-backgrounds-1"); }
.battle-shell.battle-zone-17 { --battle-zone-image: url("/images/background/battle-17-rotten-root-garden.webp?v=20260918-deep-battle-backgrounds-1"); }
.battle-shell.battle-zone-18 { --battle-zone-image: url("/images/background/battle-18-stellar-observatory.webp?v=20260918-deep-battle-backgrounds-1"); }
.battle-shell.battle-zone-19 { --battle-zone-image: url("/images/background/battle-19-null-phase-labyrinth.webp?v=20260918-deep-battle-backgrounds-1"); }
.battle-shell.battle-zone-20 { --battle-zone-image: url("/images/background/battle-20-abyssal-heart.webp?v=20260918-deep-battle-backgrounds-1"); }
/* 201〜500F: 10階ごとの専用戦闘背景。 */
.battle-shell.battle-zone-21 { --battle-zone-image: url("/images/background/battle-21-root-gate.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-22 { --battle-zone-image: url("/images/background/battle-22-giant-fern-jungle.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-23 { --battle-zone-image: url("/images/background/battle-23-luminous-marsh.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-24 { --battle-zone-image: url("/images/background/battle-24-parasitic-bloom-corridor.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-25 { --battle-zone-image: url("/images/background/battle-25-amber-sealed-forest.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-26 { --battle-zone-image: url("/images/background/battle-26-behemoth-graveyard.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-27 { --battle-zone-image: url("/images/background/battle-27-root-vein-lake.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-28 { --battle-zone-image: url("/images/background/battle-28-canopy-branch-path.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-29 { --battle-zone-image: url("/images/background/battle-29-primordial-seedbed.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-30 { --battle-zone-image: url("/images/background/battle-30-primeval-tree-heart.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-31 { --battle-zone-image: url("/images/background/battle-31-rusted-gate.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-32 { --battle-zone-image: url("/images/background/battle-32-abandoned-assembly.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-33 { --battle-zone-image: url("/images/background/battle-33-steam-conduits.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-34 { --battle-zone-image: url("/images/background/battle-34-gear-conveyor-bridge.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-35 { --battle-zone-image: url("/images/background/battle-35-white-smoke-repair.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-36 { --battle-zone-image: url("/images/background/battle-36-black-oil-reservoir.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-37 { --battle-zone-image: url("/images/background/battle-37-artillery-bastion.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-38 { --battle-zone-image: url("/images/background/battle-38-armor-testing-hall.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-39 { --battle-zone-image: url("/images/background/battle-39-fallen-banner-graveyard.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-40 { --battle-zone-image: url("/images/background/battle-40-war-furnace-core.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-41 { --battle-zone-image: url("/images/background/battle-41-silver-reflection-gate.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-42 { --battle-zone-image: url("/images/background/battle-42-masked-market.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-43 { --battle-zone-image: url("/images/background/battle-43-still-mirror-canal.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-44 { --battle-zone-image: url("/images/background/battle-44-reversed-bell-corridor.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-45 { --battle-zone-image: url("/images/background/battle-45-kaleidoscope-gallery.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-46 { --battle-zone-image: url("/images/background/battle-46-memory-theater.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-47 { --battle-zone-image: url("/images/background/battle-47-glass-blossom-garden.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-48 { --battle-zone-image: url("/images/background/battle-48-false-throne-hall.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-49 { --battle-zone-image: url("/images/background/battle-49-shattered-shadow-avenue.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell.battle-zone-50 { --battle-zone-image: url("/images/background/battle-50-mirror-crown-palace.webp?v=20260928-extended-battle-backgrounds-1"); }
.battle-shell[class*="battle-zone-"] .combatants { margin: -16px -16px 0; padding: 10px; border: 0; border-radius: 9px 9px 0 0; background-color: #080b0d; background-image: linear-gradient(90deg, rgb(2 6 9 / 48%), rgb(2 6 9 / 16%) 44%, rgb(2 6 9 / 34%)), linear-gradient(0deg, rgb(2 6 8 / 76%), rgb(2 6 8 / 8%) 68%, rgb(2 6 8 / 20%)), var(--battle-zone-image); background-position: center, center, 50% var(--battle-phase-bg-y, 50%); background-repeat: no-repeat; background-size: cover; box-shadow: inset 0 1px rgb(255 255 255 / 5%), inset 0 -36px 52px rgb(0 0 0 / 24%); }
.battle-shell:not(.arena-duel) .combatants { overflow-x: clip; }
.battle-shell[class*="battle-zone-"] .combatants.phase-party-advance { animation: phase-scene-forward calc(680ms * var(--battle-speed-factor)) ease-in-out both; }
.battle-shell:not(.arena-duel) .combatants.phase-party-advance .party-line { animation: phase-party-step calc(680ms * var(--battle-speed-factor)) ease-in-out both; }
.battle-shell:not(.arena-duel) .combatants.initial-party-arrival .party-line { animation: initial-party-arrive calc(500ms * var(--battle-speed-factor)) cubic-bezier(.16, .9, .25, 1) both; }
html[data-combat-motion="short"] .battle-shell[class*="battle-zone-"] .combatants.phase-party-advance,
html[data-combat-motion="short"] .battle-shell:not(.arena-duel) .combatants.phase-party-advance .party-line { animation-duration: calc(375ms * var(--battle-speed-factor)); }
html[data-combat-motion="short"] .battle-shell:not(.arena-duel) .combatants.initial-party-arrival .party-line { animation-duration: calc(275ms * var(--battle-speed-factor)); }
@keyframes phase-scene-forward { 0%, 100% { background-position: center, center, 50% var(--battle-phase-bg-y, 50%); } 55% { background-position: center, center, 54% var(--battle-phase-bg-y, 50%); } }
@keyframes phase-party-step { 0%, 100% { transform: translate(0, 0); } 55% { transform: translate(13px, -4px); } }
@keyframes initial-party-arrive { from { opacity: 0; filter: blur(3px); transform: translateX(-62vw) scale(.96); } to { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); } }
.battle-shell:not(.arena-duel) .combatants.floor-advancing .party-line { animation: floor-party-advance calc(700ms * var(--battle-speed-factor)) ease-in-out both; }
.floor-advance-overlay { position: absolute; z-index: 12; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: inherit; background: linear-gradient(0deg, rgb(3 9 14 / 81%), rgb(9 23 34 / 36%) 55%, rgb(3 9 14 / 70%)); pointer-events: auto; }
.floor-advance-overlay::before { position: absolute; inset: -30% 0; background: repeating-linear-gradient(0deg, transparent 0 40px, rgb(181 222 229 / 15%) 41px 43px, transparent 44px 78px); content: ""; animation: floor-advance-path calc(700ms * var(--battle-speed-factor)) linear both; }
.floor-advance-content { position: relative; display: grid; min-width: 154px; gap: 3px; place-items: center; padding: 13px 20px; border: 1px solid rgb(179 217 223 / 40%); border-radius: 8px; background: rgb(7 19 27 / 88%); box-shadow: 0 8px 28px rgb(0 0 0 / 38%); color: #e3f4f5; text-align: center; animation: floor-advance-label calc(700ms * var(--battle-speed-factor)) ease-out both; }
.floor-advance-arrow { color: #b8ecee; font-size: 1.35rem; line-height: 1; }
.floor-advance-content small { color: #a4c1c8; font-size: .52rem; letter-spacing: .18em; }
.floor-advance-content strong { font-family: "Yu Mincho", serif; font-size: .95rem; font-weight: 600; }
.floor-recovering .floor-advance-content { border-color: rgb(127 235 175 / 60%); }
.floor-recovery-effects { position: absolute; inset: 0; pointer-events: none; }
.floor-recovery-effects::before { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(ellipse, rgb(107 242 164 / 28%), rgb(67 204 142 / 12%) 45%, transparent 70%); content: ""; animation: floor-recovery-glow calc(700ms * var(--battle-speed-factor)) ease-out both; }
.floor-recovery-effects > i { position: absolute; color: #b4ffd2; font-size: 1.35rem; font-style: normal; font-weight: 700; line-height: 1; text-shadow: 0 0 8px #5ae49b, 0 0 18px rgb(90 228 155 / 65%); animation: floor-recovery-rise calc(700ms * var(--battle-speed-factor)) ease-out both; }
.floor-recovery-effects > i:nth-child(1) { left: 15%; top: 68%; }
.floor-recovery-effects > i:nth-child(2) { left: 28%; top: 35%; font-size: 1rem; }
.floor-recovery-effects > i:nth-child(3) { left: 40%; top: 78%; font-size: 1rem; }
.floor-recovery-effects > i:nth-child(4) { right: 15%; top: 60%; }
.floor-recovery-effects > i:nth-child(5) { right: 26%; top: 28%; font-size: 1rem; }
.floor-recovery-effects > i:nth-child(6) { right: 38%; top: 18%; font-size: .85rem; }
.floor-advance-content .floor-recovery-label { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: #b4ffd2; font-size: .68rem; font-weight: 600; }
.floor-recovery-label > i { font-size: 1rem; font-style: normal; text-shadow: 0 0 8px #5ae49b; }
html[data-combat-motion="short"] .battle-shell:not(.arena-duel) .combatants.floor-advancing .party-line,
html[data-combat-motion="short"] .floor-advance-overlay::before,
html[data-combat-motion="short"] .floor-advance-content,
html[data-combat-motion="short"] .floor-recovery-effects::before,
html[data-combat-motion="short"] .floor-recovery-effects > i { animation-duration: calc(385ms * var(--battle-speed-factor)); }
@keyframes floor-party-advance { from { opacity: 1; transform: translate(0, 5px); } 60% { opacity: 1; transform: translate(9px, -5px); } to { opacity: .55; transform: translate(18px, -14px); } }
@keyframes floor-advance-path { from { transform: translateY(18%); } to { transform: translateY(-18%); } }
@keyframes floor-advance-label { from { opacity: 0; transform: translateY(15px); } 25% { opacity: 1; } to { opacity: 1; transform: translateY(-5px); } }
@keyframes floor-recovery-glow { from { opacity: .25; transform: scale(.65); } 45% { opacity: 1; } to { opacity: .4; transform: scale(1.2); } }
@keyframes floor-recovery-rise { from { opacity: 0; transform: translateY(12px) scale(.7); } 25% { opacity: 1; } to { opacity: 0; transform: translateY(-30px) scale(1.1); } }
.combatant { min-width: 0; }
.combatant.player, .enemy { display: grid; align-content: start; padding: 8px; border: 1px solid transparent; }
.combatant-heading { display: grid; grid-template-rows: 13px 18px; height: 31px; min-width: 0; }
.combatant-heading .actor-name { height: 18px; margin: 0; line-height: 18px; text-align: center; }
.battle-name-line { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; height: 100%; }
.battle-name-line .actor-name { min-width: 0; margin: 0; }
.enemy .combatant-heading { grid-template-rows: 13px minmax(18px, auto); height: auto; min-height: 31px; }
.enemy .battle-name-line { position: relative; display: block; height: auto; }
.enemy .enemy-actor-name { display: block; width: 100%; height: auto; overflow: visible; line-height: 1.2; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.enemy .battle-name-state { position: absolute; z-index: 4; top: 100%; right: 0; }
.enemy-big-warning { position: relative; display: inline-flex; width: 18px; height: 18px; margin-right: 3px; align-items: center; justify-content: center; vertical-align: middle; border: 0; background: transparent; color: #ffd073; filter: drop-shadow(0 1px 2px #000); }
.enemy-big-warning svg { display: block; width: 15px; height: 15px; }
.enemy-big-warning.is-weakened { color: #b9e5c5; }
.enemy-big-warning small { position: absolute; right: -3px; bottom: -3px; font-size: 11px; line-height: 1; }
.enemy-big-preview { border-left: 2px solid #dca34b; padding-left: 10px; color: #ffd073; }
.enemy-big-preview.is-weakened { border-color: #8eb59b; color: #b9e5c5; }
.enemy-big-preview > strong { display: flex; align-items: center; gap: 4px; }
.enemy-big-preview p { color: #e8d6b8; overflow-wrap: anywhere; }
.battle-name-state { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 1px; max-width: 43px; height: 13px; padding: 0 2px; overflow: hidden; border: 1px solid rgb(136 182 126 / 55%); border-radius: 3px; background: rgb(37 68 38 / 82%); color: #c9e2bd; font-size: .48rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.battle-name-state > span { overflow: hidden; text-overflow: ellipsis; }
.battle-name-state small { font-size: .43rem; }
.battle-name-state.negative { border-color: rgb(239 129 127 / 64%); background: rgb(103 34 43 / 88%); color: #ffd0cc; }
.battle-name-state.neutral { border-color: rgb(107 194 221 / 60%); background: rgb(28 72 93 / 86%); color: #c3effa; }
.enemy .battle-name-state.enemy-name-states { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; max-width: 64px; height: auto; padding: 0; overflow: visible; border: 0; background: transparent; }
.enemy-name-states > .enemy-name-state { display: inline-flex; align-items: center; gap: 2px; max-width: 64px; height: 12px; padding: 0 3px; overflow: hidden; border: 1px solid rgb(136 182 126 / 55%); border-radius: 3px; background: rgb(37 68 38 / 90%); color: #c9e2bd; }
.enemy-name-state > span { overflow: hidden; text-overflow: ellipsis; }
.enemy-name-state > small { flex: 0 0 auto; }
.enemy-name-state.negative { border-color: rgb(239 129 127 / 64%); background: rgb(103 34 43 / 94%); color: #ffd0cc; }
.enemy-name-state.neutral { border-color: rgb(107 194 221 / 60%); background: rgb(28 72 93 / 94%); color: #c3effa; }
.actor-mark { position: relative; display: grid; width: 118px; height: 132px; margin: 0 auto 8px; overflow: visible; place-items: end center; font-family: serif; font-size: 2.7rem; will-change: transform; }
.boss-knockout-speech { position: absolute; z-index: 16; bottom: calc(100% + 34px); left: 50%; display: block; width: clamp(120px, 32vw, 188px); max-width: calc(100vw - 26px); padding: 8px 10px; border: 1px solid #b9757d; border-radius: 9px; background: #21191f; box-shadow: 0 8px 24px rgb(0 0 0 / 62%); color: #f6e3e1; font-family: "Yu Mincho", serif; font-size: .68rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; text-align: center; pointer-events: none; animation: boss-speech-in 200ms ease-out both; }
.boss-knockout-speech::after { position: absolute; bottom: -6px; left: calc(50% - 5px); width: 10px; height: 10px; border-right: 1px solid #b9757d; border-bottom: 1px solid #b9757d; background: #21191f; content: ""; transform: rotate(45deg); }
@keyframes boss-speech-in { from { opacity: 0; transform: translate(-50%, 7px) scale(.92); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.actor-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 8px rgb(0 0 0 / 38%)); user-select: none; -webkit-user-drag: none; }
.actor-image.enemy-companion-art { transform: scaleX(-1); transform-origin: center bottom; }
.actor-image.monster-companion-art { width: 100%; height: 100%; flex-shrink: 0; overflow: visible; }
.actor-mark-player .actor-image { height: 124px; }
.enemy-line { display: flex; justify-content: flex-end; align-items: start; gap: 8px; min-height: 190px; overflow: visible; }
.enemy { position: relative; box-sizing: border-box; width: min(138px, 31%); min-width: 0; padding: 8px; overflow: visible; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: center; cursor: pointer; }
.combatant.combat-moving, .enemy.combat-moving, .actor-mark.combat-moving { z-index: 8; }
.enemy.selected { border-color: transparent; box-shadow: none; }
.enemy:focus-visible { outline: none; }
button.enemy:not(:disabled):is(:active, .button-pressing) { border-color: transparent; box-shadow: none; }
.enemy-target-marker { display: grid; height: 13px; place-items: center; color: var(--gold-strong); font-size: .66rem; line-height: 1; text-shadow: 0 1px 3px #000, 0 0 6px rgb(var(--accent-rgb) / 72%); pointer-events: none; }
.enemy-target-marker:empty { visibility: hidden; }
.enemy.selected .enemy-target-marker { color: #ffaaa3; text-shadow: 0 0 7px rgb(255 75 85 / 85%); }
.enemy-target-corners { position: absolute; z-index: 3; inset: 2px 4px 5px; opacity: 0; pointer-events: none; }
.enemy.selected:not(.dead) .enemy-target-corners, .enemy:focus-visible:not(.dead) .enemy-target-corners { opacity: 1; }
.enemy-target-corners i { position: absolute; width: 14px; height: 14px; border-color: #ff9292; border-style: solid; filter: drop-shadow(0 0 5px #f04455); }
.enemy-target-corners i:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; border-radius: 6px 0 0; }
.enemy-target-corners i:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; border-radius: 0 6px 0 0; }
.enemy-target-corners i:nth-child(3) { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-radius: 0 0 6px; }
.enemy-target-corners i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 2px 2px; border-radius: 0 0 0 6px; }
.enemy.dead { opacity: 0; pointer-events: none; }
.battle-shell:not(.arena-duel) .enemy-line.phase-enemy-arrival .enemy { animation: phase-enemy-arrive calc(600ms * var(--battle-speed-factor)) cubic-bezier(.16, .9, .25, 1) both; }
.battle-shell:not(.arena-duel) .enemy-line.phase-enemy-arrival .enemy:nth-child(2) { animation-delay: calc(45ms * var(--battle-speed-factor)); }
.battle-shell:not(.arena-duel) .enemy-line.phase-enemy-arrival .enemy:nth-child(3) { animation-delay: calc(90ms * var(--battle-speed-factor)); }
.battle-shell:not(.arena-duel) .enemy-line.phase-enemy-arrival .enemy:nth-child(4) { animation-delay: calc(135ms * var(--battle-speed-factor)); }
.battle-shell:not(.arena-duel) .enemy-line.initial-enemy-arrival .enemy { animation: phase-enemy-arrive calc(600ms * var(--battle-speed-factor)) calc(500ms * var(--battle-speed-factor)) cubic-bezier(.16, .9, .25, 1) both; }
.battle-shell:not(.arena-duel) .enemy-line.initial-enemy-arrival .enemy:nth-child(2) { animation-delay: calc(545ms * var(--battle-speed-factor)); }
.battle-shell:not(.arena-duel) .enemy-line.initial-enemy-arrival .enemy:nth-child(3) { animation-delay: calc(590ms * var(--battle-speed-factor)); }
.battle-shell:not(.arena-duel) .enemy-line.initial-enemy-arrival .enemy:nth-child(4) { animation-delay: calc(635ms * var(--battle-speed-factor)); }
html[data-combat-motion="short"] .battle-shell:not(.arena-duel) .enemy-line.phase-enemy-arrival .enemy { animation-duration: calc(330ms * var(--battle-speed-factor)); }
html[data-combat-motion="short"] .battle-shell:not(.arena-duel) .enemy-line.phase-enemy-arrival .enemy:nth-child(2) { animation-delay: calc(25ms * var(--battle-speed-factor)); }
html[data-combat-motion="short"] .battle-shell:not(.arena-duel) .enemy-line.phase-enemy-arrival .enemy:nth-child(3) { animation-delay: calc(50ms * var(--battle-speed-factor)); }
html[data-combat-motion="short"] .battle-shell:not(.arena-duel) .enemy-line.phase-enemy-arrival .enemy:nth-child(4) { animation-delay: calc(74ms * var(--battle-speed-factor)); }
html[data-combat-motion="short"] .battle-shell:not(.arena-duel) .enemy-line.initial-enemy-arrival .enemy { animation-duration: calc(330ms * var(--battle-speed-factor)); animation-delay: calc(275ms * var(--battle-speed-factor)); }
html[data-combat-motion="short"] .battle-shell:not(.arena-duel) .enemy-line.initial-enemy-arrival .enemy:nth-child(2) { animation-delay: calc(300ms * var(--battle-speed-factor)); }
html[data-combat-motion="short"] .battle-shell:not(.arena-duel) .enemy-line.initial-enemy-arrival .enemy:nth-child(3) { animation-delay: calc(325ms * var(--battle-speed-factor)); }
html[data-combat-motion="short"] .battle-shell:not(.arena-duel) .enemy-line.initial-enemy-arrival .enemy:nth-child(4) { animation-delay: calc(350ms * var(--battle-speed-factor)); }
@keyframes phase-enemy-arrive { from { opacity: 0; filter: blur(3px); transform: translateX(62vw) scale(.94); } to { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); } }
.enemy.dead.defeated-transition { animation: enemy-vanish calc(280ms * var(--battle-speed-factor)) ease-out both; }
.enemy .actor-mark { width: 112px; max-width: none; height: 132px; place-items: end center; background: radial-gradient(ellipse at 50% 82%, rgb(91 137 159 / 16%), transparent 67%); font-size: 2rem; }
.enemy .actor-image, .actor-mark-enemy .actor-image { height: 124px; }
.enemy-line.single .enemy { width: min(210px, 78%); }
.enemy.boss .actor-mark { width: min(100%, 146px); height: 132px; }
.enemy.boss .actor-image { height: 124px; }
.actor-name { overflow: hidden; margin-bottom: 4px; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.resource-meter { display: grid; grid-template-columns: 14px clamp(56px, 15vw, 76px) max-content; align-items: center; gap: 5px; width: max-content; max-width: 100%; min-width: 0; margin: 0 0 5px; color: var(--muted); font-size: .62rem; line-height: 1; }
.bar { display: block; width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 99px; appearance: none; background: #0c0d0a; }
.bar::-webkit-progress-bar { border-radius: 99px; background: #0c0d0a; }
.bar::-webkit-progress-value { border-radius: 99px; background: var(--green); }
.bar::-moz-progress-bar { border-radius: 99px; background: var(--green); }
.bar.hp-warning::-webkit-progress-value { background: #d9b64b; }
.bar.hp-warning::-moz-progress-bar { background: #d9b64b; }
.bar.hp-critical::-webkit-progress-value { background: #ad4055; }
.bar.hp-critical::-moz-progress-bar { background: #ad4055; }
.bar.mp::-webkit-progress-value { background: var(--blue); }
.bar.mp::-moz-progress-bar { background: var(--blue); }
.bar.barrier::-webkit-progress-value { background: #b8c9d0; }
.bar.barrier::-moz-progress-bar { background: #b8c9d0; }
.bar-resource { display: inline-flex; align-items: center; gap: 3px; }
.bar-resource-label { display: none; }
.bar-icon { display: block; width: 14px; height: 14px; object-fit: contain; }
.bar-value { min-width: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.enemy-resource-meter { grid-template-columns: 12px minmax(0, 1fr); gap: 3px; width: min(68px, 100%); margin: 0 auto 2px; }
.enemy-resource-meter .bar-resource-label { display: none; }
.enemy-resource-body { display: grid; min-width: 0; gap: 2px; }
.enemy-resource-meter .bar { height: 8px; }
.enemy-resource-meter .bar-value { overflow: hidden; font-size: .5rem; line-height: 1; text-align: center; text-overflow: ellipsis; }
.actor-status { display: flex; align-items: flex-start; gap: 4px; min-height: 15px; }
.status-icon { display: block; flex: 0 0 auto; width: 14px; height: 14px; object-fit: contain; }
.battle-active-effects { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 21px; margin: 0 0 4px; overflow: hidden; }
.battle-active-effects-label { flex: 0 0 auto; color: #a9a592; font-size: .55rem; letter-spacing: .04em; }
.battle-active-effect-badges { display: flex; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.battle-active-effect-badges::-webkit-scrollbar { display: none; }
.battle-active-effect-badge { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 19px; padding: 2px 6px; border: 1px solid rgb(126 174 108 / 42%); border-radius: 99px; background: rgb(84 127 68 / 18%); color: #c9e2bd; font-size: .56rem; line-height: 1; }
.battle-active-effect-badge.curse { border-color: rgb(170 112 181 / 46%); background: rgb(118 68 128 / 20%); color: #ddc2e4; }
.battle-status-stack { display: grid; flex: 0 0 auto; gap: 4px; min-width: 0; margin-top: 8px; }
.battle-condition-strip, .telegraph { display: flex; box-sizing: border-box; align-items: center; gap: 8px; min-width: 0; height: 30px; min-height: 30px; padding: 5px 8px; overflow: hidden; background: rgb(0 0 0 / 18%); }
.battle-condition-strip { border-left: 2px solid #76946c; color: #c9e2bd; }
.battle-condition-label, .telegraph-label { flex: 0 0 auto; font-size: .62rem; font-weight: 700; letter-spacing: .08em; }
.battle-condition-content { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.battle-condition-content::-webkit-scrollbar { display: none; }
.battle-condition-empty { color: var(--muted); font-size: .62rem; }
.battle-condition-strip .battle-active-effects { flex: 0 0 auto; min-height: 0; margin: 0; overflow: visible; }
.battle-condition-strip .battle-active-effects-label { display: none; }
.battle-condition-strip .battle-active-effect-badges { overflow: visible; }
.battle-condition-strip .actor-status { flex: 0 0 auto; min-height: 0; color: #c7c2ae; }
.battle-situation-grid { display: grid; flex: 0 0 auto; grid-template-columns: minmax(120px, .8fr) minmax(180px, 1.2fr); align-items: stretch; gap: 20px; min-width: 0; margin-top: 4px; }
.battle-situation-player, .battle-situation-enemy { min-width: 0; }
.battle-situation-grid .battle-condition-strip, .battle-situation-grid .telegraph { height: 30px; min-height: 30px; padding: 5px 8px; }
.battle-situation-grid .telegraph-entry { font-size: .58rem; line-height: 1.28; }
.telegraph { border-left: 2px solid var(--red); color: #e9b2a8; }
.telegraph-list { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.telegraph-list::-webkit-scrollbar { display: none; }
.telegraph-entry { display: inline-flex; flex: 0 0 auto; align-items: baseline; gap: 4px; min-width: 0; padding: 0; font-size: .72rem; line-height: 1.35; white-space: nowrap; }
.telegraph-entry + .telegraph-entry { padding-left: 8px; border-left: 1px solid rgb(232 161 151 / 20%); }
.telegraph-entry.big span { color: #ffd0c6; font-weight: 700; }
.telegraph-entry strong { color: #d8cfc2; font-weight: 500; }
.telegraph-entry span::before { content: "「"; }
.telegraph-entry span::after { content: "」"; }
.telegraph-empty { color: var(--muted); font-size: .7rem; }
.battle-info-panel { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 122px; margin-top: 8px; overflow: hidden; border: 1px solid rgb(255 255 255 / 9%); border-radius: 7px; background: rgb(1 5 7 / 40%); }
.battle-info-tabs { display: grid; flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 38px; border-bottom: 1px solid var(--line); background: rgb(0 0 0 / 28%); }
.party-overview-enabled .battle-info-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.battle-info-tab { position: relative; min-width: 0; min-height: 38px; padding: 5px 4px; border: 0; border-right: 1px solid rgb(255 255 255 / 8%); border-radius: 0; background: transparent; color: var(--muted); font-family: "Yu Mincho", serif; font-size: .68rem; letter-spacing: .04em; cursor: pointer; }
.battle-info-tab:last-child { border-right: 0; }
.battle-info-tab.active { background: linear-gradient(180deg, rgb(132 102 43 / 25%), rgb(26 23 14 / 18%)); color: #f2d98e; box-shadow: inset 0 -2px #c7a752; }
.battle-info-tab:focus-visible { z-index: 1; outline: 2px solid var(--focus); outline-offset: -2px; }
.battle-info-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }
.battle-info-content > .battle-log { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; max-height: none; }
.battle-current-content .battle-current-log { min-height: 72px; max-height: none; }
.battle-inline-history { font-size: .65rem; }
.battle-history-tools { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; min-height: 27px; padding: 3px 7px; border-bottom: 1px solid rgb(255 255 255 / 7%); color: var(--muted); font-size: .53rem; }
.battle-history-tools button { min-height: 23px; padding: 2px 5px; font-size: .52rem; }
.battle-status-content { overflow-y: auto; overscroll-behavior: contain; }
.battle-party-content { overflow-y: auto; overscroll-behavior: contain; }
.battle-party-overview { display: grid; grid-template-columns: minmax(54px, 80px) 12px minmax(0, 96px) max-content minmax(0, 1fr); column-gap: 6px; align-content: start; }
.battle-party-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; gap: 6px; min-height: 50px; padding: 4px 8px; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.battle-party-row:last-child { border-bottom: 0; }
.battle-party-row.defeated { background: rgb(90 97 103 / 10%); }
.battle-party-row.support-target-option { background: rgb(var(--party-color-rgb, var(--accent-rgb)) / 16%); box-shadow: inset 0 0 0 1px rgb(var(--party-color-rgb, var(--accent-rgb)) / 47%); cursor: pointer; touch-action: manipulation; }
.battle-party-row.support-target-option:is(:hover, :focus-visible) { background: rgb(var(--party-color-rgb, var(--accent-rgb)) / 28%); outline: 2px solid var(--party-color, var(--gold)); outline-offset: -2px; }
.battle-party-name { min-width: 0; overflow: hidden; color: var(--text); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.battle-party-row.defeated .battle-party-name { color: var(--muted); }
.battle-party-vitals { display: grid; grid-column: 2 / span 3; grid-template-columns: subgrid; column-gap: 3px; row-gap: 1px; min-width: 0; }
.battle-party-status { grid-column: 5; }
.battle-party-vitals .resource-meter { grid-column: 1 / -1; grid-template-columns: subgrid; gap: 3px; width: 100%; max-width: none; margin: 0; font-size: .51rem; }
.battle-party-vitals .bar-icon { width: 10px; height: 10px; }
.battle-party-vitals .bar { height: 6px; }
.battle-party-vitals .bar.barrier { background: #223139; box-shadow: inset 0 0 0 1px rgb(112 214 238 / 18%); }
.battle-party-vitals .bar.barrier::-webkit-progress-bar { background: #223139; }
.battle-party-vitals .bar.barrier::-webkit-progress-value { background: #70d6ee; }
.battle-party-vitals .bar.barrier::-moz-progress-bar { background: #70d6ee; }
.battle-party-vitals .vital-resource-body { min-width: 0; }
.battle-party-vitals .vital-value { font-size: .51rem; }
.battle-party-status { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 2px; min-width: 0; min-height: 28px; padding-left: 5px; border-left: 1px solid rgb(255 255 255 / 10%); }
.battle-party-state, .battle-party-more { display: block; max-width: 100%; overflow: hidden; padding: 2px 4px; border: 1px solid rgb(105 153 99 / 32%); border-radius: 3px; background: rgb(60 91 60 / 19%); color: #bde0b6; font-size: .48rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.battle-party-state.negative, .battle-party-state.defeated { border-color: rgb(195 111 114 / 40%); background: rgb(107 50 53 / 26%); color: #efb9b6; }
.battle-party-more, .battle-party-none { color: var(--muted); font-size: .48rem; }
.battle-status-overview { display: grid; gap: 7px; padding: 8px; }
.battle-actor-state { min-width: 0; padding: 7px; border: 1px solid rgb(255 255 255 / 8%); border-left: 2px solid #a66b62; border-radius: 5px; background: rgb(11 15 17 / 64%); }
.battle-actor-state.side-player { border-left-color: #779dba; }
.battle-actor-state.defeated { opacity: .54; filter: grayscale(.8); }
.battle-actor-state > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.battle-actor-state > header strong { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.battle-actor-state > header span { flex: 0 0 auto; color: var(--muted); font-size: .5rem; }
.battle-state-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.battle-state-badge { display: inline-grid; min-width: 80px; gap: 2px; padding: 4px 6px; border: 1px solid rgb(156 166 174 / 28%); border-radius: 5px; background: rgb(91 111 122 / 13%); color: #c6d2d8; }
.battle-state-badge strong { font-size: .56rem; line-height: 1.15; }
.battle-state-badge small { color: inherit; font-size: .46rem; line-height: 1.2; opacity: .72; }
.battle-state-badge.positive { border-color: rgb(109 161 101 / 42%); background: rgb(77 121 68 / 18%); color: #c9e2bd; }
.battle-state-badge.negative { border-color: rgb(190 101 105 / 45%); background: rgb(138 64 70 / 18%); color: #edb8b6; }
.battle-state-badge.neutral { border-color: rgb(102 151 183 / 42%); background: rgb(62 109 139 / 18%); color: #b9d8eb; }
.battle-state-empty { color: var(--muted); font-size: .55rem; }
.battle-log-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: rgb(0 0 0 / 28%); }
.battle-log-heading-copy { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.battle-log-heading strong { font-family: "Yu Mincho", serif; font-size: .78rem; letter-spacing: .08em; }
.battle-log-heading span { color: var(--muted); font-size: .6rem; }
.battle-log-open-button { min-height: 28px; padding: 3px 9px; font-size: .6rem; white-space: nowrap; }
.battle-log { height: clamp(230px, calc(100dvh - 510px), 480px); overflow-y: auto; background: rgb(0 0 0 / 24%); font-size: .76rem; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.battle-current-log { height: auto; min-height: 54px; max-height: 90px; overflow-y: auto; font-size: .62rem; }
.battle-log-backdrop { position: fixed; z-index: 210; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 86%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.battle-log-dialog { display: flex; flex-direction: column; width: min(720px, 100%); max-height: calc(100dvh - 32px); padding: 18px; overflow: hidden; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 64%); animation: forge-dialog-in 180ms ease-out; }
.battle-item-backdrop { position: fixed; z-index: 215; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 7 6 / 86%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.battle-item-dialog { width: min(520px, 100%); max-height: calc(100dvh - 32px); padding: 18px; overflow-y: auto; border: 1px solid #618274; border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 64%); animation: forge-dialog-in 180ms ease-out; }
.enemy-detail-backdrop { position: fixed; z-index: 225; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(3 7 10 / 85%); backdrop-filter: blur(4px); }
.enemy-detail-dialog { box-sizing: border-box; width: min(560px, 100%); max-height: calc(100dvh - 32px); padding: 17px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 64%); -webkit-overflow-scrolling: touch; }
.enemy-detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.enemy-detail-heading h2 { margin: 3px 0 8px; font-size: 1.08rem; }
.enemy-detail-art { display: grid; width: 100%; height: clamp(180px, 40dvh, 400px); margin: 4px auto 12px; place-items: center; border-radius: 8px; background: radial-gradient(ellipse at 50% 75%, rgb(95 136 150 / 22%), rgb(6 11 14 / 32%) 66%); }
.enemy-detail-art .actor-image { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.enemy-detail-symbol { font-size: clamp(4rem, 20vw, 8rem); }
.enemy-detail-vitals { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .7rem; }
.enemy-detail-vitals strong { margin-left: 4px; color: var(--text); font-variant-numeric: tabular-nums; }
.enemy-detail-section { display: grid; gap: 8px; margin-top: 12px; font-size: .7rem; }
.enemy-resistance-list { display: flex; flex-wrap: wrap; gap: 6px; }
.enemy-resistance-list > span { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid rgb(145 179 195 / 30%); border-radius: 5px; color: #dcebf0; background: rgb(12 32 44 / 75%); }
.enemy-resistance-list b { color: #efd49a; }
.enemy-resistance-detail p { margin: 0; color: #adc1cc; font-size: .65rem; line-height: 1.65; }
.enemy-detail-technique { padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-deep); overflow-wrap: anywhere; }
.enemy-detail-technique p { margin: 5px 0 0; line-height: 1.7; color: var(--muted); }
.party-detail-dialog { border-color: var(--party-color, var(--accent-border)); }
.party-detail-summary { display: grid; grid-template-columns: minmax(90px, 132px) minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px; border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 34%); border-radius: 9px; background: rgb(var(--party-color-rgb, var(--accent-rgb)) / 9%); }
.party-detail-art { display: grid; height: 132px; place-items: end center; }
.party-detail-art .actor-image { max-width: 100%; max-height: 132px; }
.party-detail-vitals { display: grid; gap: 8px; font-size: .76rem; }
.party-detail-vitals span { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgb(255 255 255 / 9%); }
.party-detail-vitals strong { font-variant-numeric: tabular-nums; }
.party-detail-defeated { color: var(--red); }
.party-detail-skills { display: grid; gap: 6px; }
.party-detail-skill { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-deep); }
.party-detail-skill .command-icon { display: block; width: 26px; height: 26px; object-fit: contain; }
.party-detail-skill > div { display: grid; min-width: 0; gap: 2px; }
.party-detail-skill small, .party-detail-skill em { color: var(--muted); font-size: .68rem; font-style: normal; }
.party-detail-skill em { white-space: nowrap; }
.party-detail-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.party-detail-stat-grid > div { display: flex; justify-content: space-between; gap: 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-deep); }
.party-detail-stat-grid span { color: var(--muted); }
.party-detail-stat-grid strong { font-variant-numeric: tabular-nums; }
.battle-item-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.battle-item-heading h2 { margin: 3px 0 0; }
.battle-item-cooldown { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding: 7px 10px; border: 1px solid rgb(143 174 161 / 22%); border-radius: 6px; color: var(--muted); font-size: .65rem; }
.battle-item-cooldown strong { color: #bde1d1; }
.battle-item-cooldown.waiting { border-color: rgb(201 151 79 / 35%); }
.battle-item-cooldown.waiting strong { color: #e1b76f; }
.battle-item-list { display: grid; gap: 8px; margin: 14px 0; }
.battle-item-option { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 74px; padding: 10px; border: 1px solid #58776b; border-radius: 8px; background: linear-gradient(150deg, rgb(38 61 53 / 92%), rgb(18 27 25 / 96%)); color: var(--text); cursor: pointer; text-align: left; }
.battle-item-option > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.battle-item-option-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.battle-item-option-name > i { padding: 2px 7px; border: 1px solid rgb(189 225 209 / 22%); border-radius: 999px; color: #bde1d1; font-size: .6rem; font-style: normal; }
.battle-item-option small { color: var(--muted); font-size: .65rem; line-height: 1.4; }
.battle-item-option > b { color: #bde1d1; font-size: .68rem; }
.battle-item-option.used, .battle-item-option.unavailable { filter: grayscale(.7); }
.battle-item-symbol { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #668d7c; border-radius: 50%; background: rgb(67 111 92 / 25%); font-size: 1.45rem; }
.battle-item-symbol-icon { display: block; width: 38px; height: 38px; object-fit: contain; }
.battle-item-empty { padding: 20px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }
.battle-item-cancel { width: 100%; }
.battle-item-dialog[class*="party-color-"] { border-color: rgb(var(--party-color-rgb) / 68%); }
.battle-item-dialog[class*="party-color-"] .battle-item-option { border-color: rgb(var(--party-color-rgb) / 55%); background: linear-gradient(150deg, rgb(var(--party-color-rgb) / 23%), var(--surface-deep)); }
.battle-item-dialog[class*="party-color-"] .battle-item-symbol { border-color: rgb(var(--party-color-rgb) / 65%); background: rgb(var(--party-color-rgb) / 22%); }
.battle-item-dialog[class*="party-color-"] .battle-item-option > b,
.battle-item-dialog[class*="party-color-"] .battle-item-option-name > i,
.battle-item-dialog[class*="party-color-"] .battle-item-cooldown.ready strong { color: var(--party-color); }
body.battle-item-modal-open { overflow: hidden; }
.battle-log-dialog-heading { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 12px; }
.battle-log-dialog-heading h2 { margin: 3px 0 0; }
.dialog-close-button { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 1.25rem; cursor: pointer; }
.battle-log-dialog .dialog-close-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
.battle-log-dialog-meta { flex: 0 0 auto; margin: 8px 0; color: var(--muted); font-size: .7rem; }
.battle-log-history { flex: 1 1 auto; width: 100%; min-height: 180px; height: min(68dvh, 640px); border: 1px solid var(--line); border-radius: 7px; }
body.battle-log-modal-open { overflow: hidden; }
.log-entry { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; min-height: 48px; padding: 10px; border-bottom: 1px solid rgb(255 255 255 / 7%); }
.log-entry.action.side-player { border-left: 2px solid var(--gold); background: linear-gradient(90deg, rgb(var(--accent-rgb) / 8%), transparent 55%); }
.log-entry.action.side-enemy { border-left: 2px solid var(--red); background: linear-gradient(90deg, rgb(212 119 104 / 8%), transparent 55%); }
.log-entry.action.log-latest { box-shadow: inset 0 0 0 1px rgb(242 207 118 / 42%), inset 4px 0 16px rgb(242 207 118 / 11%); }
.log-entry.action.side-enemy.log-latest { box-shadow: inset 0 0 0 1px rgb(232 161 151 / 42%), inset 4px 0 16px rgb(212 119 104 / 12%); }
.log-entry.log-current { animation: log-current-in calc(420ms * var(--battle-speed-factor)) cubic-bezier(.2, .8, .3, 1); }
.log-entry.system { display: block; min-height: 34px; padding: 8px 10px; color: var(--muted); }
.battle-current-log .log-entry { display: block; min-height: 0; padding: 4px 7px; }
.battle-current-log .log-entry.action.log-latest,
.battle-current-log .log-entry.action.side-enemy.log-latest { box-shadow: none; }
.compact-log-copy { display: grid; min-width: 0; gap: 3px; overflow: visible; line-height: 1.45; white-space: normal; }
.compact-log-meta { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.compact-log-actor { flex: 0 0 auto; color: var(--muted); }
.compact-log-action { flex: 0 0 auto; color: var(--text); font-size: .64rem; }
.compact-log-results { display: grid; min-width: 0; gap: 2px; overflow: visible; color: var(--muted); white-space: normal; }
.compact-log-results > span { display: block; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.compact-log-results .victory,
.compact-log-results .skill { color: var(--gold-strong); }
.compact-log-results .damage,
.compact-log-results .danger { color: #e8a197; }
.compact-log-results .critical { color: #ffd078; font-weight: 700; }
.compact-log-results .heal { color: #9fce96; }
.compact-log-results .mp-cost { color: #9eb8e8; }
.compact-system { overflow: visible; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; white-space: normal; }
.log-mark { display: grid; place-items: center; align-self: start; width: 36px; height: 36px; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: var(--icon-surface); color: var(--gold-strong); font-family: serif; font-size: .8rem; }
.log-mark .actor-image { width: 32px; height: 32px; padding: 2px; filter: none; }
.log-copy { min-width: 0; }
.log-copy > strong { display: block; margin: 1px 0 4px; color: var(--text); font-size: .94rem; }
.log-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .66rem; }
.log-results { display: grid; gap: 2px; }
.log-results span { display: block; overflow-wrap: anywhere; white-space: normal; }
.log-results .victory, .log-results .skill, .log-entry.victory { color: var(--gold-strong); }
.log-results .damage, .log-results .danger, .log-entry.danger { color: #e8a197; }
.log-results .critical { color: #ffd078; font-weight: 700; }
.log-results .heal { color: #9fce96; }
.log-results .mp-cost { color: #9eb8e8; }
.log-entry.mp-recover { color: #8fcadf; }
.log-entry.reward { color: var(--gold-strong); background: linear-gradient(90deg, rgb(var(--accent-rgb) / 10%), transparent 72%); }
.log-entry.auto-status { color: #b9d9ad; background: linear-gradient(90deg, rgb(131 184 121 / 13%), transparent 72%); }
.log-results .muted, .log-entry.round { color: var(--muted); }
@keyframes log-current-in {
  0% { opacity: .35; transform: translateY(-7px); filter: brightness(1.45); }
  55% { opacity: 1; transform: translateY(0); filter: brightness(1.18); }
  100% { opacity: 1; transform: translateY(0); filter: brightness(1); }
}
.command-dock { position: fixed; z-index: 30; left: 50%; bottom: 0; width: min(980px, 100%); min-height: 0; padding: 7px 18px calc(7px + env(safe-area-inset-bottom)); transform: translateX(-50%); border-top: 1px solid var(--line); background: rgb(var(--chrome-rgb) / 97%); box-shadow: 0 -12px 35px rgb(0 0 0 / 30%); backdrop-filter: blur(14px); }
.command-dock .phase-advance-retry { margin: 0 0 6px; padding: 0 0 6px; border-top: 0; border-bottom: 1px solid var(--line); }
.battle-support-prompt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 29px; margin-bottom: 5px; padding: 2px 7px; border: 1px solid rgb(136 209 170 / 44%); border-radius: 5px; background: rgb(29 62 46 / 80%); color: #e4f4e8; font-size: .65rem; }
.battle-support-prompt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-support-prompt > button { flex: 0 0 auto; min-height: 28px; padding: 2px 7px; color: #f4e6b6; font-size: .62rem; }
.command-button.support-pending { border-color: #a6deb6; background: linear-gradient(180deg, #315d43, #1d3829); color: #f1fff2; box-shadow: inset 0 0 0 1px rgb(180 235 190 / 21%); }
.battle-shell.support-targeting { padding-bottom: 114px; }
.battle-utility-controls .battle-manual-turn-button { flex-direction: column; gap: 0; max-width: 108px; border-color: #688aa7; background: linear-gradient(180deg, #294256, #1b2d3a); color: #e5f3ff; }
.battle-utility-controls .battle-manual-turn-button[class*="party-color-"] { border-color: var(--party-color); background: linear-gradient(180deg, rgb(var(--party-color-rgb) / 38%), var(--surface-deep)); color: var(--text); }
.battle-manual-turn-button strong { display: block; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.battle-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.battle-actions.with-items { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.command-button { position: relative; display: grid; grid-template-rows: 24px auto auto; place-items: center; align-content: center; gap: 1px; min-width: 0; min-height: 64px; padding: 4px; overflow: visible; background: var(--surface-2); }
.command-button.on-cooldown:disabled { opacity: 1; }
.command-button.command-pending:disabled { border-color: var(--gold); background: linear-gradient(180deg, rgb(var(--accent-rgb) / 42%), rgb(var(--accent-rgb) / 18%) 68%, var(--surface-2)); color: var(--gold-strong); cursor: wait; opacity: 1; box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 25%); }
.command-pending-spinner { width: 20px; height: 20px; border-width: 2px; color: var(--gold-strong); }
.command-icon-slot { position: relative; display: grid; width: 24px; height: 24px; place-items: center; }
.command-cooldown-mask { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 4px; background: rgb(8 12 16 / 75%); color: #f6eedb; line-height: 1; pointer-events: none; }
.command-cooldown-mask b { font-size: .72rem; line-height: 1; }
.command-dock[class*="party-color-"] .command-button { border-color: rgb(var(--party-color-rgb) / 58%); background: linear-gradient(180deg, rgb(var(--party-color-rgb) / 32%), rgb(var(--party-color-rgb) / 13%) 65%, var(--surface-2)); box-shadow: inset 0 1px 0 rgb(var(--party-color-rgb) / 16%); }
.command-dock[class*="party-color-"] .command-button.support-pending { border-color: var(--party-color); background: linear-gradient(180deg, rgb(var(--party-color-rgb) / 52%), rgb(var(--party-color-rgb) / 22%) 70%, var(--surface-2)); box-shadow: inset 0 0 0 1px rgb(var(--party-color-rgb) / 32%); }
.command-dock[class*="party-color-"] .command-button:not(:disabled):is(:active, .button-pressing) { border-color: var(--party-color); background: linear-gradient(180deg, rgb(var(--party-color-rgb) / 48%), rgb(var(--party-color-rgb) / 22%), var(--surface-2)); }
.command-label, .command-meta { display: block; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.command-label { font-size: .72rem; line-height: 1.05; }
.command-icon { display: block; width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 45%)); }
.command-symbol { display: block; height: 24px; font-size: 1.22rem; line-height: 24px; }
.command-meta { color: var(--muted); font-size: .62rem; line-height: 1.05; }
.auto-on { border-color: #63835d; background: #31502f; }
.auto-stop-pending { border-color: #d0a753; background: #5b4821; color: #fff0bd; }
.battle-shell.combat-animating .command-dock button,
.battle-shell.combat-animating .battle-utility-controls button:not([data-action="toggle-auto"]):not([data-action="toggle-arena-auto"]):not([data-action="open-battle-speed"]):not([data-action="open-loot-review"]),
.battle-shell.combat-animating .post-battle-actions button { pointer-events: none; }
.battle-shell.combat-animating .command-dock button[data-action="toggle-team-switch-reservation"]:not(:disabled) { pointer-events: auto; }
.team-switch-dialog > footer > [data-action="cancel-team-switch-reservation"] { grid-column: 1 / -1; order: 1; }
.actor-lunge-right { animation: actor-lunge-right calc(500ms * var(--battle-speed-factor)) cubic-bezier(.2, .8, .3, 1); }
.actor-lunge-left { animation: actor-lunge-left calc(500ms * var(--battle-speed-factor)) cubic-bezier(.2, .8, .3, 1); }
.actor-recoil-right { animation: actor-recoil-right calc(380ms * var(--battle-speed-factor)) ease-out; }
.actor-recoil-left { animation: actor-recoil-left calc(380ms * var(--battle-speed-factor)) ease-out; }
.actor-hit-pulse { animation: actor-hit-pulse calc(380ms * var(--battle-speed-factor)) ease-out; }
.actor-magic-cast { --cast-glow: #9aafff; animation: actor-magic-cast calc(420ms * var(--battle-speed-factor)) ease-out; }
.actor-magic-cast.combat-magic-fire { --cast-glow: #ff9b4c; }
.actor-magic-cast.combat-magic-poison { --cast-glow: #9bd390; }
.actor-magic-cast.combat-magic-water { --cast-glow: #76c9e5; }
.actor-magic-cast.combat-magic-lightning { --cast-glow: #d7c98a; }
.actor-magic-cast.effect-tier-2 { --cast-glow-strength: 17px; }
.actor-magic-cast.effect-tier-3 { --cast-glow-strength: 24px; }
html[data-combat-motion="short"] .actor-magic-cast { animation-duration: .23s; }
html[data-combat-motion="short"] .actor-lunge-right,
html[data-combat-motion="short"] .actor-lunge-left { animation-duration: .28s; }
html[data-combat-motion="short"] .actor-recoil-right,
html[data-combat-motion="short"] .actor-recoil-left,
html[data-combat-motion="short"] .actor-hit-pulse { animation-duration: calc(220ms * var(--battle-speed-factor)); }
html[data-combat-motion="short"] .enemy.dead.defeated-transition,
html[data-combat-motion="short"] .party-line .party-member.dead.defeated-transition { animation-duration: .17s; }
html[data-combat-motion="short"] .log-entry.log-current { animation-duration: .23s; }
.actor-ghost { position: fixed; z-index: 70; margin: 0; pointer-events: none; box-shadow: 0 0 20px rgb(0 0 0 / 45%); }
.combat-float { position: fixed; z-index: 90; min-width: max-content; transform: translateX(-50%); color: #ff8176; font-family: "Yu Gothic UI", sans-serif; font-size: 1.15rem; font-weight: 800; line-height: 1; text-shadow: 0 2px 3px #000, 0 0 8px currentColor; pointer-events: none; animation: combat-float calc(1200ms * var(--battle-speed-factor)) cubic-bezier(.18, .72, .3, 1) forwards; }
.combat-float.heal { color: #79df87; }
.combat-float.barrier { color: #79cce1; }
.combat-float.mp-cost { color: #9eb8ff; font-size: .95rem; }
.combat-float.mp-recover { color: #75d3ef; font-size: .95rem; }
.combat-float.miss { color: #ddd8c5; font-size: .85rem; }
.combat-float.critical { color: #ffc85d; font-size: 1.3rem; }
.combat-skill-cue, .combat-trigger-label { --cue-color: #a8dcff; pointer-events: none; }
.cue-physical { --cue-color: #ffe09a; }
.cue-fire { --cue-color: #ffa46d; }
.cue-blood { --cue-color: #ff7798; }
.cue-poison { --cue-color: #a5dc80; }
.cue-water { --cue-color: #7ed8ed; }
.cue-lightning { --cue-color: #fff0a1; }
.combat-special-aura { --cue-color: #aac5ff; position: absolute; z-index: 9; inset: -15%; pointer-events: none; animation: combat-special-charge 650ms ease-in-out both; }
.combat-special-aura.cue-physical { --cue-color: #ffe09a; }
.combat-special-aura.cue-fire { --cue-color: #ffa46d; }
.combat-special-aura.cue-poison { --cue-color: #a5dc80; }
.combat-special-aura.cue-water { --cue-color: #7ed8ed; }
.combat-special-aura.cue-lightning { --cue-color: #fff0a1; }
.combat-special-aura > span { position: absolute; display: block; color: var(--cue-color); }
.combat-special-aura .special-ring { inset: 10%; border: 2px solid currentColor; border-radius: 50%; box-shadow: 0 0 14px currentColor, inset 0 0 10px currentColor; }
.combat-special-aura .special-ring::before { position: absolute; inset: 12%; border: 1px dashed currentColor; border-radius: 50%; content: ""; }
.combat-special-aura .special-rays { inset: 20%; border: 2px solid currentColor; transform: rotate(45deg); box-shadow: 0 0 12px currentColor; }
.combat-special-aura .special-core { inset: 0; background: radial-gradient(ellipse, transparent 22%, var(--cue-color) 48%, transparent 65%); opacity: .22; }
.combat-special-aura.special-impact { animation-name: combat-special-impact; }
.combat-special-aura.special-impact .special-ring { inset: 2%; }
.combat-special-aura.special-impact.cue-physical .special-rays { inset: 40% -10%; border: 0; background: linear-gradient(90deg, transparent, #fffbe7 35%, var(--cue-color) 70%, transparent); transform: rotate(-35deg); box-shadow: 0 0 15px var(--cue-color); }
.combat-special-aura.special-impact.cue-physical .special-rays::after { position: absolute; inset: 0; background: inherit; content: ""; transform: rotate(70deg); }
.combat-special-aura.special-muted { animation-name: combat-special-muted; }
@keyframes combat-special-charge { 0% { opacity: 0; transform: scale(1.25) rotate(-35deg); } 35% { opacity: .7; } 75% { opacity: 1; transform: scale(.8) rotate(15deg); } 100% { opacity: 0; transform: scale(.6) rotate(25deg); } }
@keyframes combat-special-impact { 0% { opacity: 0; transform: scale(.3) rotate(-12deg); } 22% { opacity: 1; transform: scale(1) rotate(0deg); } 58% { opacity: .7; } 100% { opacity: 0; transform: scale(1.45) rotate(12deg); } }
@keyframes combat-special-muted { 0%, 100% { opacity: 0; } 25%, 65% { opacity: .65; } }
.combat-skill-cue { position: absolute; z-index: 8; inset: 12% 6%; border: 1px solid var(--cue-color); border-radius: 50%; box-shadow: inset 0 0 15px var(--cue-color), 0 0 12px var(--cue-color); animation: combat-cue-pulse 600ms ease-out both; }
.combat-skill-cue::before { position: absolute; inset: 20%; border: 1px solid var(--cue-color); content: ""; transform: rotate(45deg); }
.combat-skill-cue.cue-reaction { border: 0; box-shadow: none; background: radial-gradient(circle, rgb(255 255 255 / 75%), transparent 42%); animation-name: combat-cue-burst; }
.combat-skill-cue.cue-reaction::before { inset: 0; border: 0; background: var(--cue-color); clip-path: polygon(50% 0, 57% 36%, 85% 15%, 64% 43%, 100% 50%, 64% 57%, 85% 85%, 57% 64%, 50% 100%, 43% 64%, 15% 85%, 36% 57%, 0 50%, 36% 43%, 15% 15%, 43% 36%); opacity: .65; }
.combat-skill-cue.cue-debuff { border-style: dashed; box-shadow: inset 0 -12px 22px var(--cue-color); }
.combat-skill-cue.cue-assist { inset: 28% 14%; border: 0; box-shadow: none; background: radial-gradient(circle, #fff4cb, transparent 55%); animation-name: combat-cue-burst; }
.combat-skill-cue.cue-assist::before { inset: 0; border: 0; background: var(--cue-color); clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); }
.combat-trigger-label { position: absolute; z-index: 9; top: 82%; left: 50%; width: max-content; max-width: 130px; padding: 2px 5px; border: 1px solid var(--cue-color); border-radius: 3px; background: rgb(4 12 20 / 90%); color: var(--cue-color); font-size: .56rem; font-weight: 700; line-height: 1.3; white-space: nowrap; text-shadow: 0 1px 2px #000; animation: combat-cue-label 850ms ease-out both; }
.cue-combo { position: fixed; z-index: 100; width: max-content; color: #ffe19a; font-size: .75rem; font-weight: 700; line-height: 1.3; letter-spacing: .06em; white-space: nowrap; text-shadow: 0 1px 2px #000; pointer-events: none; animation: combat-cue-label 850ms ease-out both; }
.combat-assist-projectile { position: fixed; z-index: 89; top: 0; left: 0; width: 34px; height: 3px; border-radius: 50%; background: linear-gradient(90deg, transparent, #80dfff 35%, #fff4cb 85%, #fff); box-shadow: 0 0 7px #9fe4ff; transform-origin: right center; pointer-events: none; }
.combat-assist-projectile::after { position: absolute; top: -3px; right: -1px; width: 7px; height: 7px; border-top: 2px solid #fff4cb; border-right: 2px solid #fff4cb; transform: rotate(45deg); content: ""; }
.combat-pair-aura.pair-glow-0, .combat-pair-projectile.pair-glow-0 { --cue-color: #ffe09a; }
.combat-pair-aura.pair-glow-1, .combat-pair-projectile.pair-glow-1 { --cue-color: #80dfff; }
.combat-pair-aura .special-ring { border-width: 3px; }
.combat-pair-projectile { width: 48px; height: 5px; background: linear-gradient(90deg, transparent, var(--cue-color) 35%, #fff 95%); box-shadow: 0 0 12px var(--cue-color); }
.combat-pair-projectile::after { border-color: var(--cue-color); }
.combat-special-aura.combat-pair-impact { --cue-color: #ffe09a; }
.combat-pair-impact .special-ring { border-color: #80dfff; box-shadow: 0 0 16px #80dfff, inset 0 0 10px #ffe09a; }
.combat-special-aura.special-impact.combat-pair-impact .special-rays { inset: 40% -12%; border: 0; background: linear-gradient(90deg, transparent, #fff 40%, #ffe09a 70%, transparent); transform: rotate(-35deg); box-shadow: 0 0 12px #ffe09a; }
.combat-special-aura.special-impact.combat-pair-impact .special-rays::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #fff 40%, #80dfff 70%, transparent); content: ""; transform: rotate(70deg); }
.actor-pair-strike-right { --pair-step: 12px; animation: actor-pair-strike calc(400ms * var(--battle-speed-factor)) ease-out; }
.actor-pair-strike-left { --pair-step: -12px; animation: actor-pair-strike calc(400ms * var(--battle-speed-factor)) ease-out; }
@keyframes actor-pair-strike { 0%, 100% { transform: translateX(0); } 35%, 60% { transform: translateX(var(--pair-step)) scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .actor-pair-strike-right, .actor-pair-strike-left { animation: none; }
}
@keyframes combat-cue-pulse { 0% { opacity: 0; transform: scale(.7); } 24% { opacity: .8; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes combat-cue-burst { 0% { opacity: 0; transform: scale(.4) rotate(-12deg); } 20% { opacity: .9; } 100% { opacity: 0; transform: scale(1.2) rotate(12deg); } }
@keyframes combat-cue-label { 0% { opacity: 0; transform: translate(-50%, 4px); } 15%, 70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -4px); } }
body:not(.battle-active) > .combat-assist-projectile { display: none; }
@media (prefers-reduced-motion: reduce) {
  .combat-skill-cue { animation-name: combat-cue-reduced; }
  .combat-trigger-label, .cue-combo { animation-name: combat-cue-label-reduced; }
}
@keyframes combat-cue-reduced { 0%, 70% { opacity: .7; } 100% { opacity: 0; } }
@keyframes combat-cue-label-reduced { 0%, 70% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%); } }
html[data-combat-motion="short"] .combat-float { animation-duration: calc(850ms * var(--battle-speed-factor)); }
.combat-slash { --slash-angle: -36deg; position: absolute; z-index: 5; top: 47%; left: 50%; width: 78px; height: 6px; border-radius: 50%; opacity: 0; transform-origin: center; pointer-events: none; animation: combat-slash-sweep calc(260ms * var(--battle-speed-factor)) ease-out forwards; }
.combat-slash.slash-from-right { --slash-angle: 36deg; }
.combat-slash::before, .combat-slash::after { position: absolute; inset: 0; border-radius: inherit; content: ""; }
.combat-slash::before { background: linear-gradient(90deg, transparent, #dceeff 18%, #fff 48%, #fff2c8 76%, transparent); box-shadow: 0 0 5px rgb(236 247 255 / 80%); }
.combat-slash::after { background: #c5e5ff; filter: blur(7px); opacity: .7; }
.combat-slash.effect-tier-2 { width: 102px; height: 8px; }
.combat-slash.effect-tier-2::before { box-shadow: 0 0 11px rgb(236 247 255 / 95%); }
.combat-slash.effect-tier-3 { width: 126px; height: 9px; }
.combat-slash.effect-tier-3::before { box-shadow: 0 0 16px 3px rgb(255 232 180 / 85%); }
.combat-slash.effect-tier-3::after { background: linear-gradient(90deg, transparent, #fff7dd 28%, #ffd58c 65%, transparent); filter: none; opacity: .8; transform: translateY(13px) rotate(-13deg); box-shadow: 0 0 10px #ffc778; }
html[data-combat-motion="short"] .combat-slash { animation-duration: calc(150ms * var(--battle-speed-factor)); }
.combat-magic-projectile { position: fixed; z-index: 89; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.combat-magic-projectile.effect-tier-2 { width: 30px; height: 30px; filter: brightness(1.12); }
.combat-magic-projectile.effect-tier-3 { width: 38px; height: 38px; filter: brightness(1.25) drop-shadow(0 0 12px currentcolor); }
.combat-magic-projectile::after { position: absolute; inset: 4px 9px 4px -16px; border-radius: 50%; background: currentcolor; filter: blur(8px); content: ""; opacity: .7; }
.combat-magic-projectile.combat-magic-fire { color: #ff7b28; background: radial-gradient(circle at 55% 45%, #fff9b2 0 14%, #ffae3d 34%, #e34824 66%, transparent 82%); box-shadow: 0 0 16px 5px rgb(255 106 29 / 70%); }
.combat-magic-projectile.combat-magic-poison { color: #81ca80; background: radial-gradient(circle at 45% 45%, #e3ffd4, #88c870 40%, #528268 70%, transparent 84%); box-shadow: 0 0 15px 4px rgb(95 177 117 / 60%); }
.combat-magic-projectile.combat-magic-water { color: #7ac6df; background: radial-gradient(circle at 45% 40%, #e9fbff, #84cee9 36%, #32769e 70%, transparent 84%); box-shadow: 0 0 15px 4px rgb(82 168 208 / 60%); }
.combat-magic-projectile.combat-magic-lightning { color: #eee2a8; border-radius: 30% 70% 40% 60%; background: linear-gradient(135deg, transparent 12%, #fff9d8 27%, #d8dcab 45%, #8ba6c2 70%, transparent 86%); box-shadow: 0 0 17px 5px rgb(220 223 165 / 65%); }
.combat-magic-projectile.combat-magic-arcane { color: #91b8ff; background: radial-gradient(circle at 45% 40%, #fff, #a5c7ff 32%, #7469c8 68%, transparent 84%); box-shadow: 0 0 15px 4px rgb(124 136 232 / 62%); }
.combat-magic-impact { position: absolute; z-index: 4; top: 48%; left: 50%; width: 46px; height: 46px; border: 2px solid currentcolor; border-radius: 50%; background: radial-gradient(circle, currentcolor, transparent 69%); box-shadow: 0 0 18px currentcolor, inset 0 0 10px currentcolor; transform: translate(-50%, -50%); pointer-events: none; animation: combat-magic-impact calc(480ms * var(--battle-speed-factor)) ease-out forwards; }
.combat-magic-impact.combat-magic-fire { color: #ffa446; }
.combat-magic-impact.combat-magic-poison { color: #9bd390; }
.combat-magic-impact.combat-magic-water { color: #83cfe7; }
.combat-magic-impact.combat-magic-lightning { color: #e7d89a; border-radius: 35% 65% 40% 60%; }
.combat-magic-impact.combat-magic-arcane { color: #a5baff; }
.combat-magic-impact.effect-tier-2 { width: 60px; height: 60px; border-width: 3px; box-shadow: 0 0 24px currentcolor, inset 0 0 15px currentcolor; }
.combat-magic-impact.effect-tier-3 { width: 78px; height: 78px; border-width: 4px; box-shadow: 0 0 32px 4px currentcolor, inset 0 0 20px currentcolor; }
.combat-magic-impact.effect-tier-3::after { position: absolute; inset: 14px; border: 2px solid currentcolor; border-radius: 50%; content: ""; }
html[data-combat-motion="short"] .combat-magic-impact { animation-duration: calc(270ms * var(--battle-speed-factor)); }
.combat-support-impact { position: absolute; z-index: 4; top: 50%; left: 50%; width: 72px; height: 72px; border: 2px solid currentcolor; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / 8%), transparent 70%); box-shadow: 0 0 16px currentcolor, inset 0 0 12px currentcolor; opacity: 0; pointer-events: none; animation: combat-support-pulse calc(560ms * var(--battle-speed-factor)) ease-out forwards; }
.combat-support-impact::after { position: absolute; inset: 0; display: grid; place-items: center; color: #f1fff9; font-family: sans-serif; font-size: 27px; font-weight: 800; text-shadow: 0 1px 5px #152029; content: "+"; }
.combat-support-heal { color: #79dba0; }
.combat-support-barrier { color: #79cbe8; border-radius: 35% 35% 50% 50% / 25% 25% 60% 60%; }
.combat-support-barrier::after { color: #e0f8ff; font-size: 23px; content: "◆"; }
html[data-combat-motion="short"] .combat-support-impact { animation-duration: calc(320ms * var(--battle-speed-factor)); }
.combat-loot-chest { position: fixed; z-index: 94; top: 0; left: 0; display: grid; width: 40px; height: 40px; place-items: center; opacity: 0; color: #d5d7d1; transform-origin: center; will-change: transform, opacity; pointer-events: none; }
body:not(.battle-active) > .actor-ghost,
body:not(.battle-active) > .combat-float,
body:not(.battle-active) > .combat-magic-projectile,
body:not(.battle-active) > .combat-loot-chest { visibility: hidden; }
.combat-loot-chest::before { position: absolute; inset: 6px; border-radius: 50%; background: currentcolor; box-shadow: 0 0 14px currentcolor; content: ""; opacity: .28; }
.combat-loot-chest img { position: relative; z-index: 1; display: block; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 5px 5px rgb(0 0 0 / 58%)); }
.combat-loot-count { position: absolute; z-index: 2; right: -5px; bottom: -3px; min-width: 18px; padding: 1px 4px; border: 1px solid currentcolor; border-radius: 99px; background: #14191c; color: inherit; font-size: .5rem; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 2px #000; }
.combat-loot-chest.loot-rarity-common, .combat-loot-arrival.loot-rarity-common { color: #d5d7d1; }
.combat-loot-chest.loot-rarity-rare, .combat-loot-arrival.loot-rarity-rare { color: #72c7ff; }
.combat-loot-chest.loot-rarity-epic, .combat-loot-arrival.loot-rarity-epic { color: #c28cff; }
.combat-loot-chest.loot-rarity-legendary, .combat-loot-arrival.loot-rarity-legendary { color: #ffd66b; }
.combat-loot-chest.combat-loot-book { color: #72d5e4; }
.combat-loot-chest.combat-loot-book-rare, .combat-loot-arrival.combat-loot-book-rare { color: #ffe28c; }
.combat-loot-chest.combat-loot-book-rare::before { inset: 0; border: 0; background: radial-gradient(circle, rgb(255 220 109 / 28%), transparent 70%); box-shadow: 0 0 17px rgb(255 209 99 / 65%), inset 0 0 8px rgb(255 224 138 / 35%); opacity: .85; }
.combat-loot-book-rare img { filter: sepia(1) saturate(3) hue-rotate(-10deg) brightness(1.14) drop-shadow(0 0 5px #f1c460) drop-shadow(0 4px 4px #000); }
.combat-loot-spark { position: absolute; z-index: 3; width: 10px; height: 14px; background: #fff4c9; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: combat-rare-book-spark calc(.7s * var(--battle-speed-factor, 1)) ease-in-out infinite; pointer-events: none; }
.combat-loot-spark-0 { left: -3px; top: 3px; animation-delay: calc(.02s * var(--battle-speed-factor, 1)); }
.combat-loot-spark-1 { right: -4px; top: -3px; width: 13px; height: 17px; animation-delay: calc(.15s * var(--battle-speed-factor, 1)); }
.combat-loot-spark-2 { right: 1px; bottom: -4px; animation-delay: calc(.28s * var(--battle-speed-factor, 1)); }
.combat-loot-spark-3 { left: 4px; bottom: 1px; width: 6px; height: 9px; animation-delay: calc(.4s * var(--battle-speed-factor, 1)); }
@keyframes combat-rare-book-spark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(-10deg); } 32% { opacity: 1; transform: scale(1.15) rotate(8deg); } 65% { opacity: .8; transform: scale(.85) rotate(16deg); } }
html[data-combat-motion="short"] .combat-loot-spark { animation: none; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .combat-loot-spark { animation: none; opacity: .85; } }
.combat-loot-arrival { position: absolute; z-index: 4; top: 50%; left: 50%; width: 42px; height: 42px; border: 2px solid currentcolor; border-radius: 50%; box-shadow: 0 0 10px currentcolor, inset 0 0 10px currentcolor; transform: translate(-50%, -50%); pointer-events: none; animation: combat-loot-arrival calc(480ms * var(--battle-speed-factor)) ease-out forwards; }
html[data-combat-motion="short"] .combat-loot-arrival { animation-duration: .28s; }
html[data-combat-number-size="large"] .combat-float { font-size: 1.45rem; }
html[data-combat-number-size="large"] .combat-float.mp-cost,
html[data-combat-number-size="large"] .combat-float.mp-recover { font-size: 1.18rem; }
html[data-combat-number-size="large"] .combat-float.miss { font-size: 1.05rem; }
html[data-combat-number-size="large"] .combat-float.critical { font-size: 1.68rem; }
@keyframes actor-lunge-right { 0%, 100% { transform: translateX(0); } 34% { transform: translateX(30px) scale(1.06); } }
@keyframes actor-lunge-left { 0%, 100% { transform: translateX(0); } 34% { transform: translateX(-30px) scale(1.06); } }
@keyframes actor-recoil-right { 0%, 100% { transform: translateX(0); } 28% { transform: translateX(15px); filter: brightness(1.7); } }
@keyframes actor-recoil-left { 0%, 100% { transform: translateX(0); } 28% { transform: translateX(-15px); filter: brightness(1.7); } }
@keyframes actor-hit-pulse { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); filter: brightness(1.7); } 50% { transform: translateX(5px); } }
@keyframes actor-magic-cast { 0%, 100% { filter: none; } 45% { filter: brightness(1.45) drop-shadow(0 0 var(--cast-glow-strength, 13px) var(--cast-glow)); } }
@keyframes combat-slash-sweep { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--slash-angle)) scaleX(.08); } 30% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--slash-angle)) scaleX(.85); } 60% { opacity: .9; transform: translate(-50%, -50%) rotate(var(--slash-angle)) scaleX(1.12); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--slash-angle)) scaleX(1.2); } }
@keyframes combat-magic-impact { 0% { opacity: .85; transform: translate(-50%, -50%) scale(.25); } 45% { opacity: .65; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.65); } }
@keyframes combat-support-pulse { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); } 25% { opacity: .82; } 60% { opacity: .65; transform: translate(-50%, -50%) scale(1.04); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.28); } }
@keyframes combat-float { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.8); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 70% { opacity: 1; transform: translate(-50%, -10px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -26px) scale(1); } }
@keyframes combat-loot-arrival { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.2); } 55% { opacity: .65; transform: translate(-50%, -50%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); } }
@keyframes enemy-defeated { from { opacity: 1; filter: grayscale(0); } to { opacity: .32; filter: grayscale(1); } }
@keyframes enemy-vanish { from { opacity: 1; } to { opacity: 0; } }
.post-battle-actions { display: flex; align-items: stretch; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.post-battle-actions > button { min-height: 52px; }
.battle-floor-advance-status { display: flex; flex: 1 1 auto; min-width: 0; min-height: 52px; align-items: center; justify-content: center; gap: 8px; padding: 6px 9px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 32%); border-radius: 7px; background: radial-gradient(circle at 18% 50%, rgb(var(--abyss-crystal-rgb) / 12%), transparent 35%), linear-gradient(145deg, rgb(28 39 47 / 96%), rgb(16 23 30 / 98%)); box-shadow: inset 0 1px rgb(255 255 255 / 5%); color: #d9edf1; }
.battle-floor-advance-status > .abyss-mechanism-mark { width: 34px; height: 34px; flex-basis: 34px; }
.battle-floor-advance-status .abyss-mechanism-gear { width: 29px; height: 29px; animation: mechanism-gear-turn 3.2s linear infinite; }
.battle-floor-advance-status .abyss-mechanism-crystal { width: 11px; height: 11px; animation: mechanism-crystal-pulse 1.35s ease-in-out infinite; }
.battle-floor-advance-status > span:last-child { display: grid; min-width: 0; gap: 1px; }
.battle-floor-advance-status strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.battle-floor-advance-status small { color: #7899a3; font-size: .5rem; letter-spacing: .04em; }
.battle-shell.defeat-screen .defeat-actions { position: relative; z-index: 41; justify-content: center; }
.battle-shell.combat-animating .defeat-actions { visibility: hidden; }
.defeat-actions > button { flex: 1 1 0; min-width: 0; max-width: 220px; }
.result-actions-only .primary-button { flex: 1; }
.battle-result-button { font-size: .84rem; line-height: 1.35; }
.post-battle-actions.result-actions-only > .battle-result-button[data-action="next-floor"]:not(:disabled):not(:focus-visible) {
  outline: 1px solid transparent;
  outline-offset: 0;
  animation: next-floor-choice-breath 3.8s ease-in-out infinite;
}
@keyframes next-floor-choice-breath {
  0%, 100% { outline-color: rgb(var(--accent-rgb) / 0%); outline-offset: 0; }
  35% { outline-color: rgb(var(--accent-rgb) / 80%); outline-offset: 3px; }
  70% { outline-color: rgb(var(--accent-rgb) / 0%); outline-offset: 5px; }
}
.phase-result-actions { align-items: stretch; }
.phase-result-actions > button { min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
.phase-result-actions .primary-button { display: flex; flex: 1 1 58%; min-width: 0; align-items: center; justify-content: center; gap: 6px; }
.phase-result-actions .primary-button strong { font-size: .82rem; white-space: nowrap; }
.phase-result-actions .primary-button .phase-advance-detail { padding-left: 6px; border-left: 1px solid rgb(255 245 214 / 32%); font-size: .62rem; font-weight: 400; opacity: .8; white-space: nowrap; }
.phase-result-actions .secondary-button { flex: 1 1 38%; min-width: 0; white-space: nowrap; }
.battle-result-button.retreat-pending { gap: 8px; cursor: wait; opacity: 1; }
.return-gear-spinner { position: relative; display: inline-block; width: 27px; height: 21px; flex: 0 0 27px; color: #f0d989; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 40%)); }
.return-gear-spinner i { position: absolute; display: block; font-style: normal; line-height: 1; transform-origin: center; }
.return-gear-spinner i:first-child { top: 0; left: 0; font-size: 18px; animation: return-gear-clockwise .9s linear infinite; }
.return-gear-spinner i:last-child { right: 0; bottom: 0; font-size: 13px; animation: return-gear-counter .9s linear infinite; }
@keyframes return-gear-clockwise { to { transform: rotate(1turn); } }
@keyframes return-gear-counter { to { transform: rotate(-1turn); } }
.phase-advance-retry { display: flex; align-items: center; gap: 8px; color: #efb9b6; font-size: .68rem; }
.phase-advance-retry > span { flex: 1 1 auto; }
.phase-advance-retry > button { flex: 0 0 auto; }
.route-choice-backdrop { position: fixed; z-index: 180; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 84%); backdrop-filter: blur(5px); animation: forge-backdrop-in 150ms ease-out; }
.route-choice-panel { display: grid; gap: 11px; width: min(760px, 100%); max-height: calc(100dvh - 32px); margin: 0; padding: 18px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #8f7743; border-radius: 12px; background: linear-gradient(155deg, rgb(33 31 23 / 99%), var(--dialog) 54%); box-shadow: 0 28px 80px rgb(0 0 0 / 72%), inset 0 1px 0 rgb(255 255 255 / 7%); animation: forge-dialog-in 180ms ease-out; }
.route-choice-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .9fr); align-items: end; gap: 12px; }
.route-choice-heading h2 { margin: 0; color: var(--text); font-family: "Yu Mincho", serif; font-size: 1.08rem; }
.route-choice-heading > p { margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.55; text-align: right; }
.route-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.route-choice-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 8px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgb(255 255 255 / 4%), rgb(0 0 0 / 12%)); color: var(--text); text-align: left; }
.route-choice-card.safe { border-color: rgb(126 176 148 / 48%); }
.route-choice-card.danger { border-color: rgb(201 105 88 / 58%); background: linear-gradient(145deg, rgb(128 35 29 / 18%), rgb(0 0 0 / 14%)); }
.route-choice-card:hover:not(:disabled), .route-choice-card:focus-visible { border-color: var(--gold-strong); box-shadow: 0 0 0 1px rgb(218 188 113 / 20%); transform: translateY(-1px); }
.route-choice-card:disabled { opacity: .6; }
.route-choice-kind { align-self: center; padding: 2px 6px; border: 1px solid currentcolor; border-radius: 99px; color: #a7cfb8; font-size: .52rem; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.route-choice-card.danger .route-choice-kind { color: #e69c8e; }
.route-choice-card > strong { align-self: center; font-size: .83rem; }
.route-choice-card > small, .route-choice-encounters { grid-column: 1 / -1; color: var(--muted); font-size: .58rem; line-height: 1.5; }
.route-choice-detail { grid-column: 1 / -1; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 5px; font-size: .61rem; line-height: 1.45; }
.route-choice-detail b { color: var(--muted); font-size: .52rem; letter-spacing: .08em; }
.route-choice-detail.danger { color: #e4a194; }
.route-choice-detail.reward { color: var(--gold-strong); }
.route-choice-encounters { padding-top: 4px; border-top: 1px solid rgb(255 255 255 / 7%); }
.route-choice-guidance { margin: 0; color: var(--muted); font-size: .6rem; line-height: 1.55; text-align: center; }
.route-choice-retreat { width: 100%; min-height: 40px; }
body.route-choice-modal-open { overflow: hidden; }
.reward-list { display: grid; gap: 5px; max-height: 160px; overflow: auto; }
.reward-pending { color: var(--gold-strong); }
.reward-lost { color: #d49185; text-decoration: line-through; text-decoration-thickness: 1px; }
.initial-loading-screen { position: fixed; z-index: 100; inset: 0; display: grid; min-height: 100dvh; place-items: center; padding: 28px; background: radial-gradient(circle at 50% 42%, rgb(48 53 37 / 42%) 0, var(--bg) 44%, #0a0c09 100%); text-align: center; }
.initial-loading-content { display: grid; justify-items: center; gap: 20px; width: min(360px, 100%); }
.initial-loading-spinner { position: relative; display: grid; width: 62px; height: 62px; place-items: center; }
.initial-loading-spinner::before { position: absolute; inset: 0; border: 2px solid rgb(var(--accent-rgb) / 18%); border-top-color: var(--gold-strong); border-right-color: #70b8df; border-radius: 50%; box-shadow: 0 0 22px rgb(69 143 188 / 15%); content: ""; animation: initial-loading-spin .9s linear infinite; }
.initial-loading-spinner::after { position: absolute; inset: 8px; border: 1px solid rgb(var(--accent-rgb) / 14%); border-radius: 50%; content: ""; }
.initial-loading-spinner span { width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid #9cd9f3; background: linear-gradient(135deg, #bcecff 0%, #328fc5 42%, #174f82 100%); box-shadow: 0 0 14px rgb(71 171 224 / 65%); }
.initial-loading-copy { display: grid; justify-items: center; gap: 7px; }
.initial-loading-copy > span { color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: .62rem; letter-spacing: .24em; }
.initial-loading-copy p { margin: 0; color: var(--text); font-family: "Yu Mincho", serif; font-size: 1rem; line-height: 1.65; letter-spacing: .05em; }
.initial-loading-copy small { max-width: 300px; color: var(--muted); font-size: .68rem; line-height: 1.7; }
.startup-error { width: min(460px, calc(100% - 36px)); margin: min(18vh, 150px) auto 0; text-align: center; }
.startup-error .primary-button { width: 100%; margin-top: 12px; }
@keyframes initial-loading-spin { to { transform: rotate(360deg); } }
.loading { padding: 60px 0; color: var(--muted); text-align: center; }
.auth-panel { width: min(560px, 100%); margin: 28px auto; }
.auth-form { display: grid; gap: 12px; margin: 18px 0 10px; }
.auth-form label { display: grid; gap: 5px; }
.limited-release-badge { width: fit-content; margin: 0 0 8px; padding: 4px 8px; border: 1px solid rgb(var(--accent-rgb) / 45%); border-radius: 999px; background: rgb(var(--accent-rgb) / 10%); color: var(--gold-strong); font-size: .64rem; font-weight: 700; letter-spacing: .08em; }
.legal-links, .auth-legal-links, .crystal-legal-links { color: var(--muted); font-size: .63rem; line-height: 1.7; }
.legal-links a, .auth-legal-links a, .crystal-legal-links a { color: #c9bc91; text-underline-offset: 3px; }
.auth-legal-links { display: block; margin-top: 9px; }
.legal-consent { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px !important; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: rgb(0 0 0 / 14%); font-size: .68rem; line-height: 1.65; }
.legal-consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); }
.auth-switch-button { width: 100%; margin-bottom: 4px; }
body.landing-active { background: #080a0b; }
body.landing-active #app { width: 100%; max-width: none; padding: 0; }
.landing-page { --landing-gutter: clamp(20px, 4vw, 80px); min-height: 100vh; overflow: hidden; background: linear-gradient(180deg, #07090b 0%, #11140f 42%, #090b0a 100%); color: #f1eedf; }
.landing-header { position: sticky; z-index: 30; top: 0; display: flex; width: 100%; min-height: 68px; align-items: center; justify-content: space-between; gap: 20px; padding: 10px var(--landing-gutter); border-bottom: 1px solid rgb(217 180 94 / 20%); background: rgb(7 9 10 / 90%); box-shadow: 0 8px 24px rgb(0 0 0 / 24%); backdrop-filter: blur(12px); }
.landing-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.landing-brand-mark { display: grid; width: 32px; height: 38px; place-items: center; color: #e2bd65; font-size: 1.8rem; line-height: 1; }
.landing-brand > span:last-child { display: grid; gap: 1px; }
.landing-brand strong { color: #f7f4e8; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; letter-spacing: .15em; white-space: nowrap; }
.landing-brand small { color: #aaa995; font-family: "Yu Mincho", serif; font-size: .58rem; letter-spacing: .08em; }
.landing-header-actions { display: flex; align-items: center; gap: 8px; }
.landing-header-actions button { min-height: 42px; padding: 7px 18px; }
.landing-login-button { border: 0; background: transparent; color: #d8d4c4; cursor: pointer; }
.auth-landing.landing-hero { position: relative; width: 100%; min-height: clamp(620px, calc(100dvh - 68px), 820px); overflow: hidden; background: #06080a; }
.landing-hero-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.landing-hero-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgb(4 6 8 / 96%) 0%, rgb(4 6 8 / 80%) 34%, rgb(4 6 8 / 22%) 65%, transparent 82%), linear-gradient(0deg, rgb(4 6 7 / 92%) 0%, transparent 34%), linear-gradient(180deg, rgb(4 6 7 / 32%) 0%, transparent 24%); }
.auth-landing-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.landing-hero-copy { width: min(58%, 800px); min-height: inherit; padding: 72px 36px 76px var(--landing-gutter); }
.auth-landing-copy h1 { margin: 10px 0 20px; color: #fff4d7; font-family: "Yu Mincho", Georgia, serif; font-size: clamp(3rem, 6vw, 5.15rem); font-weight: 500; line-height: 1.16; letter-spacing: .06em; text-shadow: 0 4px 18px #000; }
.auth-landing-concept { max-width: 570px; margin: 0; color: #dfdccd; font-family: "Yu Mincho", serif; font-size: clamp(.92rem, 1.5vw, 1.08rem); line-height: 2; text-shadow: 0 2px 7px #000; }
.auth-landing-actions { display: grid; gap: 9px; }
.landing-hero-actions { grid-template-columns: minmax(210px, 1.3fr) minmax(180px, .9fr); width: min(100%, 520px); margin-top: 30px; }
.auth-landing-actions button { width: 100%; min-height: 56px; }
.auth-landing-actions .primary-button { display: flex; align-items: center; justify-content: center; gap: 14px; font-weight: 700; }
.auth-landing-actions .primary-button span, .landing-final-actions .primary-button span { font-size: 1.35rem; line-height: .8; }
.auth-landing-actions + p { margin: 12px 2px 0; line-height: 1.5; }
.landing-hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 0; color: #b8b5a5; font-size: .7rem; list-style: none; }
.landing-hero-facts li::before { margin-right: 7px; color: #e1bd67; content: "◆"; font-size: .52rem; }
.landing-content { width: 100%; }
.landing-section { padding: 100px var(--landing-gutter); border-bottom: 1px solid rgb(217 180 94 / 13%); }
.landing-section-heading { width: min(760px, 100%); margin: 0 auto 46px; text-align: center; }
.landing-section .eyebrow, .landing-final-cta .eyebrow { color: #d7af55; letter-spacing: .18em; }
.landing-section h2, .landing-final-cta h2 { margin: 7px 0 17px; color: #f3ead2; font-family: "Yu Mincho", Georgia, serif; font-size: clamp(1.9rem, 3.8vw, 3rem); font-weight: 500; line-height: 1.45; letter-spacing: .04em; }
.landing-section p, .landing-final-cta p { color: #b9b7aa; line-height: 1.85; }
.landing-pillar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid #34382d; background: #34382d; }
.landing-pillar-grid article { min-height: 220px; padding: 26px 23px; background: linear-gradient(145deg, #181b16, #10130f); }
.landing-pillar-grid article > span { color: #c49d4d; font-family: Georgia, serif; font-size: .72rem; letter-spacing: .14em; }
.landing-pillar-grid h3 { margin: 24px 0 10px; color: #f1e7ca; font-family: "Yu Mincho", serif; font-size: 1.35rem; font-weight: 500; }
.landing-pillar-grid p { margin: 0; font-size: .76rem; }
.landing-battle-section, .landing-relic-section { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .82fr); align-items: center; gap: clamp(38px, 7vw, 86px); }
.landing-relic-section { grid-template-columns: minmax(0, 1.08fr) minmax(300px, .82fr); }
.landing-feature-copy h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.landing-battle-demo { overflow: hidden; border: 1px solid #645535; border-radius: 16px; background: linear-gradient(180deg, #19201a, #0d100d); box-shadow: 0 24px 58px rgb(0 0 0 / 44%), inset 0 0 58px rgb(44 67 55 / 20%); }
.landing-demo-top { display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; border-bottom: 1px solid #3c4336; color: #e7d7a9; font-family: Georgia, "Yu Mincho", serif; font-size: .8rem; letter-spacing: .06em; }
.landing-demo-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; min-height: 260px; padding: 17px 22px 8px; background: radial-gradient(circle at 50% 70%, rgb(89 108 77 / 26%), transparent 44%); }
.landing-demo-stage figure { display: grid; justify-items: center; min-width: 0; margin: 0; }
.landing-demo-stage img { width: min(100%, 210px); height: 205px; object-fit: contain; filter: drop-shadow(0 14px 18px rgb(0 0 0 / 48%)); }
.landing-demo-stage figcaption { margin-top: 3px; color: #d0cebd; font-size: .68rem; }
.landing-demo-versus { align-self: center; color: #d4ad5b; font-family: Georgia, serif; font-size: 1rem; }
.landing-demo-log { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 14px; padding: 12px 14px; border: 1px solid #6d5732; border-left: 3px solid #d9b45e; background: #131610; }
.landing-demo-log small { grid-row: 1 / 3; color: #a6a492; font-size: .6rem; }
.landing-demo-log strong { color: #f3e4bd; }
.landing-demo-log span { color: #dd9e91; font-size: .72rem; }
.landing-demo-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 12px 14px 15px; }
.landing-demo-actions span { display: grid; min-height: 43px; place-items: center; border: 1px solid #4a503f; border-radius: 7px; background: #20241c; color: #eee7d4; font-size: .72rem; }
.landing-demo-actions span:last-child { border-color: #79643a; background: #6b5529; color: #fff1c8; }
.landing-check-list { display: grid; gap: 11px; margin: 26px 0 0; padding: 0; list-style: none; }
.landing-check-list li { padding: 0 0 10px 24px; border-bottom: 1px solid rgb(255 255 255 / 8%); color: #d5d2c3; font-size: .78rem; }
.landing-check-list li::before { float: left; margin-left: -23px; color: #d8b25c; content: "✓"; }
.landing-relic-visual { overflow: hidden; border: 1px solid #4b4536; border-radius: 16px; box-shadow: 0 24px 58px rgb(0 0 0 / 40%); }
.landing-relic-visual img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.landing-relic-parts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.landing-relic-parts > span { display: flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid #414537; border-radius: 999px; background: #161913; color: #ddd8c5; font-size: .67rem; }
.landing-part-icon { width: 19px; height: 19px; object-fit: contain; }
.landing-inheritance-section { padding-right: var(--landing-gutter); padding-left: var(--landing-gutter); }
.landing-inheritance-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 9px; }
.landing-inheritance-flow article { min-height: 230px; padding: 24px 18px; border: 1px solid #3d4134; background: linear-gradient(180deg, #1b1e18, #11140f); text-align: center; }
.landing-inheritance-flow > i { color: #d4ad58; font-family: Georgia, serif; font-size: 1.8rem; font-style: normal; }
.landing-flow-icon { width: 52px; height: 52px; margin-bottom: 14px; object-fit: contain; }
.landing-inheritance-flow article > span { display: block; color: #b28f46; font-size: .58rem; letter-spacing: .14em; }
.landing-inheritance-flow h3 { margin: 8px 0; color: #eee3c4; font-family: "Yu Mincho", serif; font-size: 1rem; }
.landing-inheritance-flow p { margin: 0; font-size: .7rem; line-height: 1.65; }
.landing-rest-section { padding-right: var(--landing-gutter); padding-left: var(--landing-gutter); }
.landing-rest-card { position: relative; display: grid; min-height: 400px; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px; overflow: hidden; padding: 48px; border: 1px solid #5d4e32; border-radius: 15px; background: linear-gradient(90deg, rgb(5 8 10 / 94%) 0%, rgb(5 8 10 / 73%) 52%, rgb(5 8 10 / 24%) 100%), linear-gradient(0deg, rgb(5 7 8 / 72%), transparent 60%), url("/images/background/rest-point-v1.webp") center 63% / cover no-repeat; box-shadow: 0 24px 58px rgb(0 0 0 / 42%); }
.landing-rest-card > div { width: min(580px, 100%); }
.landing-rest-card button { min-width: 220px; min-height: 54px; }
.landing-final-cta { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(220px, 300px); align-items: center; gap: 28px; margin: 64px var(--landing-gutter); padding: 30px 38px 28px 24px; border: 1px solid #6d5a35; border-radius: 14px; background: radial-gradient(circle at 10% 100%, rgb(217 180 94 / 13%), transparent 33%), linear-gradient(135deg, #20231b, #11130f); box-shadow: 0 20px 48px rgb(0 0 0 / 32%); }
.landing-final-cta > img { width: 145px; height: 145px; object-fit: contain; filter: drop-shadow(0 12px 18px rgb(0 0 0 / 48%)); }
.landing-final-cta h2 { margin: 4px 0 7px; font-size: clamp(1.45rem, 3vw, 2.25rem); }
.landing-final-cta p { margin: 0; }
.landing-final-actions { display: grid; gap: 8px; }
.landing-final-actions button { min-height: 49px; }
.landing-footer { display: flex; min-height: 120px; align-items: center; justify-content: space-between; gap: 30px; margin: 0 var(--landing-gutter); padding: 24px 0 38px; }
.landing-footer .auth-legal-links { margin: 0; text-align: right; }
.landing-footer .landing-brand small { font-family: inherit; }
.home-adventurer-presence { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; min-width: 0; min-height: 42px; padding: 7px 12px; overflow: hidden; border: 1px solid rgb(74 112 137 / 42%); border-radius: 8px; background: linear-gradient(90deg, rgb(12 27 38 / 96%), rgb(12 19 27 / 92%)); box-shadow: 0 8px 24px rgb(0 0 0 / 24%); }
.home-adventurer-presence > strong { color: #c9e7f7; font-family: "Yu Mincho", serif; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.home-adventurer-list { display: flex; min-width: 0; gap: 13px; overflow-x: auto; scrollbar-width: thin; }
.home-adventurer { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; color: #c8ced4; font-size: .68rem; white-space: nowrap; }
.home-adventurer { padding: 2px 0; border: 0; background: none; cursor: pointer; }
.home-adventurer:hover, .home-adventurer:focus-visible { color: var(--gold-strong); text-decoration: underline; text-underline-offset: 3px; }
.home-adventurer i { width: 7px; height: 7px; border-radius: 50%; background: #72ce91; box-shadow: 0 0 8px rgb(114 206 145 / 55%); }
.home-adventurer.own { color: #f0d88f; font-weight: 700; }
.home-adventurer.own i { background: var(--gold-strong); box-shadow: 0 0 8px rgb(226 191 103 / 60%); }
.home-adventurer-empty { color: var(--muted); font-size: .65rem; }
body.adventurer-card-open { overflow: hidden; }
.adventurer-card-backdrop { position: fixed; z-index: 270; inset: 0; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 16%, rgb(var(--abyss-crystal-rgb) / 7%), transparent 31%), rgb(2 5 9 / 91%); backdrop-filter: blur(7px); }
.adventurer-card-dialog { display: flex; flex-direction: column; position: relative; isolation: isolate; width: min(620px, 100%); max-height: min(89dvh, 830px); overflow: hidden; border: 1px solid rgb(203 173 103 / 55%); border-radius: 13px; background: radial-gradient(circle at 92% 4%, rgb(var(--abyss-crystal-rgb) / 9%), transparent 26%), radial-gradient(circle at 7% 45%, rgb(var(--abyss-violet-rgb) / 8%), transparent 31%), linear-gradient(155deg, #1d222a, #11151d 58%, #17131f); box-shadow: 0 30px 90px rgb(0 0 0 / 78%), 0 0 28px rgb(var(--abyss-crystal-rgb) / 7%), inset 0 1px rgb(255 255 255 / 10%); }
.adventurer-card-dialog::before { position: absolute; z-index: -1; inset: 7px; border: 1px solid rgb(211 227 231 / 6%); border-radius: 8px; background: repeating-linear-gradient(120deg, transparent 0 42px, rgb(var(--abyss-crystal-rgb) / 2%) 43px, transparent 44px 84px); content: ""; pointer-events: none; }
.adventurer-card-dialog > header { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) auto 42px; align-items: center; gap: 12px; min-height: 82px; padding: 11px 16px; border-bottom: 1px solid rgb(203 173 103 / 33%); background: linear-gradient(90deg, rgb(36 29 39 / 96%), rgb(18 25 33 / 96%) 58%, rgb(17 20 28 / 98%)); box-shadow: inset 0 -1px rgb(var(--abyss-crystal-rgb) / 7%); }
.adventurer-card-title-mark { display: flex; align-items: center; gap: 12px; min-width: 0; }
.adventurer-card-title-mark > .abyss-mechanism-mark { width: 48px; height: 48px; flex-basis: 48px; }
.adventurer-card-title-mark .abyss-mechanism-gear { width: 40px; height: 40px; }
.adventurer-card-title-mark .abyss-mechanism-crystal { width: 16px; height: 16px; }
.adventurer-card-title-mark > div:last-child { min-width: 0; }
.adventurer-card-dialog > header .eyebrow { margin: 0 0 3px; color: var(--abyss-crystal); font-size: .46rem; letter-spacing: .2em; }
.adventurer-card-dialog > header h2 { margin: 0; font-family: "Yu Mincho", serif; font-size: 1.16rem; font-weight: 600; letter-spacing: .08em; }
.adventurer-card-archive { color: #978b72; font-family: Georgia, serif; font-size: .44rem; letter-spacing: .14em; white-space: nowrap; writing-mode: vertical-rl; }
.adventurer-card-close { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border: 1px solid rgb(199 171 107 / 34%); border-radius: 50%; background: radial-gradient(circle, rgb(var(--abyss-crystal-rgb) / 8%), transparent 68%), #111720; color: #d6d9dd; font-size: 1.3rem; cursor: pointer; box-shadow: inset 0 0 0 3px rgb(0 0 0 / 22%); }
.adventurer-card-close:hover, .adventurer-card-close:focus-visible { border-color: var(--gold-strong); color: #fff2c8; box-shadow: 0 0 14px rgb(215 184 105 / 17%); }
.adventurer-card-content { min-height: 0; padding: 15px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #776442 #151922; scrollbar-width: thin; }
.adventurer-card-message { min-height: 160px; color: var(--muted); }
.adventurer-card-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; min-width: 0; overflow: hidden; border: 1px solid rgb(190 162 99 / 30%); border-left: 3px solid var(--gold-strong); border-radius: 7px; background: radial-gradient(circle at 0 50%, rgb(var(--abyss-violet-rgb) / 12%), transparent 35%), linear-gradient(108deg, rgb(34 29 39 / 84%), rgb(14 22 29 / 88%)); box-shadow: inset 0 1px rgb(255 255 255 / 4%); }
.adventurer-card-identity-name { display: grid; align-content: center; min-width: 0; gap: 3px; padding: 10px 12px; }
.adventurer-card-identity-name small { color: #9ed9e3; font-family: Georgia, serif; font-size: .43rem; letter-spacing: .17em; }
.adventurer-card-identity-name strong { overflow: hidden; color: #f1dca5; font-family: "Yu Mincho", serif; font-size: 1.03rem; font-weight: 600; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.adventurer-card-records { display: flex; margin: 0; border-left: 1px solid rgb(255 255 255 / 7%); }
.adventurer-card-records > div { display: grid; min-width: 72px; align-content: center; justify-items: center; gap: 2px; padding: 7px 9px; border-left: 1px solid rgb(255 255 255 / 5%); }
.adventurer-card-records > div:first-child { border-left: 0; }
.adventurer-card-records dt { color: #8e999f; font-family: Georgia, serif; font-size: .4rem; letter-spacing: .13em; }
.adventurer-card-records dd { margin: 0; color: #d8d7d0; font-size: .64rem; white-space: nowrap; }
.adventurer-card-records b { color: #f4dda2; font-family: Georgia, serif; font-size: 1rem; }
.adventurer-card-comment { margin-top: 12px; }
.adventurer-card-content h3 { margin: 0 0 7px; color: #ded7c4; font-family: "Yu Mincho", serif; font-size: .72rem; font-weight: 600; letter-spacing: .04em; }
.adventurer-card-content h3 > span { margin-right: 8px; color: var(--abyss-crystal); font-family: Georgia, serif; font-size: .42rem; letter-spacing: .16em; }
.adventurer-card-comment p { position: relative; margin: 0; padding: 10px 13px 10px 26px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 16%); border-radius: 7px; background: linear-gradient(90deg, rgb(var(--abyss-crystal-rgb) / 5%), rgb(0 0 0 / 19%)); color: #e5e3dd; font-size: .72rem; line-height: 1.55; overflow-wrap: anywhere; }
.adventurer-card-comment p::before { position: absolute; top: 50%; left: 10px; color: #86745c; font-family: Georgia, serif; font-size: 1.3rem; content: "“"; transform: translateY(-46%); }
.party-member-selector.adventurer-card-selector { gap: 6px; margin: 14px 0 10px; }
.adventurer-card-selector .party-member-button { position: relative; grid-template-columns: 16px 43px minmax(0, 1fr); gap: 6px; min-height: 67px; padding: 6px; overflow: hidden; border-color: rgb(255 255 255 / 9%); border-bottom-color: rgb(var(--party-color-rgb) / 62%); background: linear-gradient(145deg, rgb(var(--party-color-rgb) / 8%), rgb(10 15 21 / 84%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.adventurer-card-selector .party-member-button::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent, rgb(var(--party-color-rgb) / 85%), transparent); content: ""; opacity: .45; }
.adventurer-card-selector .party-member-button.active { border-color: rgb(var(--party-color-rgb) / 76%); background: radial-gradient(circle at 36% 50%, rgb(var(--party-color-rgb) / 18%), transparent 44%), #151a22; box-shadow: inset 0 0 0 1px rgb(var(--party-color-rgb) / 17%), 0 0 15px rgb(var(--party-color-rgb) / 8%); }
.adventurer-card-member-index { color: rgb(var(--party-color-rgb) / 72%); font-family: Georgia, serif; font-size: .5rem; writing-mode: vertical-rl; }
.adventurer-card-selector .party-member-thumb { width: 43px; height: 50px; }
.adventurer-card-selector .party-member-thumb .actor-image { width: 43px; height: 50px; }
.adventurer-card-build { --record-glow: var(--party-color-rgb, var(--abyss-crystal-rgb)); position: relative; margin-top: 10px; padding: 12px; overflow: hidden; border: 1px solid rgb(var(--record-glow) / 28%); border-radius: 10px; background: radial-gradient(circle at 50% 8%, rgb(var(--record-glow) / 9%), transparent 30%), linear-gradient(155deg, rgb(29 31 39 / 96%), rgb(12 17 23 / 98%) 66%); box-shadow: inset 0 0 0 4px rgb(0 0 0 / 14%); }
.adventurer-card-build::before { position: absolute; top: 0; right: 16%; left: 16%; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--record-glow) / 82%), transparent); box-shadow: 0 0 8px rgb(var(--record-glow) / 35%); content: ""; }
.adventurer-card-build-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 9px; padding: 0 2px 8px; border-bottom: 1px solid rgb(var(--record-glow) / 18%); }
.adventurer-card-build-heading > div { display: grid; min-width: 0; gap: 1px; }
.adventurer-card-build-heading small { color: rgb(var(--record-glow) / 88%); font-family: Georgia, serif; font-size: .4rem; letter-spacing: .16em; }
.adventurer-card-build-heading strong { overflow: hidden; color: #f0ede5; font-family: "Yu Mincho", serif; font-size: .91rem; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.adventurer-card-build-heading > span { padding: 3px 8px; border: 1px solid rgb(var(--record-glow) / 28%); border-radius: 99px; background: rgb(var(--record-glow) / 7%); color: #bfc5c8; font-size: .55rem; white-space: nowrap; }
.adventurer-card-portrait-shell { position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgb(209 183 115 / 34%); border-radius: 9px; background: #090e14; box-shadow: 0 15px 30px rgb(0 0 0 / 28%), inset 0 0 28px rgb(0 0 0 / 32%); }
.adventurer-card-portrait-shell::before { position: absolute; z-index: 2; top: 14%; left: 50%; width: 138px; height: 138px; border: 1px solid rgb(var(--record-glow) / 22%); border-radius: 50%; box-shadow: 0 0 0 19px rgb(var(--record-glow) / 3%), 0 0 0 20px rgb(var(--record-glow) / 10%), 0 0 30px rgb(var(--record-glow) / 11%); content: ""; pointer-events: none; transform: translateX(-50%); }
.adventurer-card-corner { position: absolute; z-index: 4; width: 21px; height: 21px; border-color: #d2b56e; border-style: solid; pointer-events: none; }
.adventurer-card-corner.corner-tl { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.adventurer-card-corner.corner-tr { top: 8px; right: 8px; border-width: 1px 1px 0 0; }
.adventurer-card-corner.corner-bl { bottom: 8px; left: 8px; border-width: 0 0 1px 1px; }
.adventurer-card-corner.corner-br { right: 8px; bottom: 8px; border-width: 0 1px 1px 0; }
.adventurer-card-build .profile-portrait { height: 260px; border: 0; border-radius: 0; background: radial-gradient(circle at 50% 54%, rgb(var(--record-glow) / 12%), transparent 45%), var(--surface-deep); box-shadow: none; }
.adventurer-card-build .profile-portrait::before { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(5 8 12 / 78%) 100%); content: ""; pointer-events: none; }
.adventurer-card-build .profile-portrait .actor-image { z-index: 3; height: 250px; max-width: 76%; object-fit: contain; filter: drop-shadow(0 9px 7px rgb(0 0 0 / 64%)); }
.adventurer-card-portrait-plate { position: absolute; z-index: 4; right: 26px; bottom: 15px; left: 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1px 10px; padding: 8px 11px 7px; border: 1px solid rgb(210 181 110 / 35%); border-right-color: transparent; border-left-color: transparent; background: linear-gradient(90deg, transparent, rgb(8 13 20 / 88%) 13%, rgb(8 13 20 / 88%) 87%, transparent); text-shadow: 0 2px 4px #000; }
.adventurer-card-portrait-plate small { grid-column: 1 / -1; color: rgb(var(--record-glow) / 86%); font-family: Georgia, serif; font-size: .38rem; letter-spacing: .16em; }
.adventurer-card-portrait-plate strong { overflow: hidden; color: #f3e5ba; font-family: "Yu Mincho", serif; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.adventurer-card-portrait-plate span { color: #adb8be; font-size: .48rem; white-space: nowrap; }
.adventurer-card-loadout { margin-top: 13px; }
.adventurer-card-loadout .hero-equipped-list { margin-top: 0; padding: 9px 7px; border-color: rgb(var(--record-glow) / 15%); background: rgb(0 0 0 / 10%); }
.adventurer-card-loadout .hero-equipped-slot { padding: 3px 4px; border-left: 1px solid rgb(var(--record-glow) / 14%); }
.adventurer-card-loadout .hero-part-icon { filter: drop-shadow(0 0 4px rgb(var(--record-glow) / 20%)); }
.adventurer-card-build .hero-command-summary { margin-top: 12px; padding: 10px 7px 8px; border-top: 1px solid rgb(var(--record-glow) / 16%); border-bottom: 1px solid rgb(var(--record-glow) / 10%); background: linear-gradient(90deg, transparent, rgb(var(--record-glow) / 4%), transparent); }
.adventurer-card-build .hero-command-heading { display: block; margin-bottom: 7px; color: #d8d1bf; font-family: "Yu Mincho", serif; font-size: .68rem; }
.adventurer-card-build .hero-command-heading::before { margin-right: 8px; color: rgb(var(--record-glow) / 88%); font-family: Georgia, serif; font-size: .4rem; letter-spacing: .14em; content: "BATTLE ARTS"; }
.adventurer-card-build .hero-command-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.adventurer-card-build .hero-command-slot { min-height: 43px; border-color: rgb(var(--record-glow) / 17%); background: rgb(5 10 15 / 46%); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.adventurer-card-build .hero-command-slot:not(.empty) { border-bottom-color: rgb(var(--record-glow) / 46%); }
.adventurer-card-ability { margin-top: 12px; }
.adventurer-card-stats { margin-top: 0; padding-top: 0; border-top: 0; }
.adventurer-card-stat { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 5px; min-height: 57px; padding: 7px 6px; border-color: rgb(var(--record-glow) / 14%); background: linear-gradient(160deg, rgb(var(--record-glow) / 5%), rgb(0 0 0 / 14%)); }
.adventurer-card-stat .stat-icon { filter: drop-shadow(0 0 5px rgb(var(--record-glow) / 22%)); }
.adventurer-card-stat .stat-label { display: block; overflow: hidden; color: #858f96; font-size: .51rem; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.adventurer-card-stat strong { display: block; overflow: hidden; color: #ede8dc; font-family: Georgia, serif; font-size: .86rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.adventurer-card-edit { width: 100%; min-height: 44px; margin-top: 14px; border-color: rgb(203 173 103 / 30%); background: linear-gradient(90deg, rgb(var(--abyss-violet-rgb) / 8%), rgb(var(--abyss-crystal-rgb) / 5%)); }
.home-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-service-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-width: 0; min-height: 82px; padding: 9px 12px; border: 1px solid rgb(125 106 170 / 46%); border-radius: 9px; background: linear-gradient(145deg, rgb(37 25 53 / 94%), rgb(14 15 26 / 97%)); color: var(--text); cursor: pointer; text-align: left; box-shadow: var(--shadow); }
.home-limited-abyss-card { border-color: rgb(151 77 75 / 45%); background: linear-gradient(145deg, rgb(47 22 28 / 94%), rgb(19 14 21 / 97%)); }
.home-service-portrait, .home-service-symbol { display: grid; width: 58px; height: 58px; place-items: center; overflow: hidden; border: 1px solid rgb(255 255 255 / 10%); border-radius: 50%; background: rgb(0 0 0 / 20%); }
.home-service-portrait .actor-image { width: 54px; height: 54px; object-fit: contain; object-position: center bottom; }
.home-service-icon { width: 42px; height: 42px; object-fit: contain; }
.home-service-copy { display: grid; min-width: 0; gap: 2px; }
.home-service-copy small { color: #9a8dbc; font-size: .5rem; letter-spacing: .1em; }
.home-limited-abyss-card .home-service-copy small { color: #bd8d8d; }
.home-service-copy strong { color: #eee5f9; font-family: "Yu Mincho", serif; font-size: .96rem; }
.home-service-copy em { overflow: hidden; color: #aaa8b6; font-size: .59rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.home-service-arrow { color: var(--gold); font-size: 1.2rem; }

.character-shop-screen, .limited-abyss-screen { display: grid; gap: 14px; }
.character-shop-header { border-color: rgb(116 91 154 / 58%); background: linear-gradient(145deg, rgb(35 25 48 / 96%), rgb(16 16 25 / 98%)); }
.character-shop-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 10px; }
.character-shop-title h1, .limited-abyss-title h1 { margin: 2px 0 5px; color: #eee5f9; font-family: "Yu Mincho", serif; font-size: 1.65rem; font-weight: 500; }
.character-shop-title p { max-width: 560px; margin: 0; color: #bbb5c6; font-size: .72rem; line-height: 1.6; }
.character-shop-wallet { display: grid; grid-template-columns: 34px auto; align-items: center; gap: 1px 8px; min-width: 145px; padding: 9px 11px; border: 1px solid rgb(176 147 220 / 24%); border-radius: 8px; background: rgb(0 0 0 / 20%); }
.character-shop-wallet > img { grid-row: 1 / 3; width: 34px; height: 34px; object-fit: contain; }
.character-shop-wallet span { color: var(--muted); font-size: .57rem; }
.character-shop-wallet strong { color: #c7eeff; font-size: 1rem; }
.character-shop-wallet button { grid-column: 1 / -1; min-height: 28px; margin-top: 4px; padding: 2px 4px; font-size: .58rem; }
.character-shop-collection { border-color: rgb(104 83 138 / 42%); }
.character-shop-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.character-shop-product { display: grid; min-width: 0; gap: 8px; padding: 10px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 9px; background: linear-gradient(160deg, rgb(35 31 43 / 94%), rgb(17 18 24 / 98%)); }
.character-shop-product.owned { border-color: rgb(195 161 83 / 42%); }
.character-shop-product.equipped { box-shadow: inset 0 0 0 1px rgb(227 193 109 / 24%), 0 0 22px rgb(137 100 33 / 10%); }
.character-shop-product-image { position: relative; display: grid; height: 150px; place-items: end center; overflow: hidden; border-radius: 7px; background: radial-gradient(ellipse at 50% 80%, rgb(132 94 173 / 25%), transparent 62%), rgb(7 8 12 / 55%); }
.character-shop-product-image > img { max-width: 100%; height: 145px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 7px 8px rgb(0 0 0 / 52%)); }
.character-shop-product-image > .tag { position: absolute; top: 7px; right: 7px; }
.character-shop-product-copy { display: grid; min-width: 0; gap: 3px; }
.character-shop-product-copy strong { overflow: hidden; color: #ebe6ef; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.character-shop-product-copy small { min-height: 29px; color: var(--muted); font-size: .56rem; line-height: 1.4; }
.character-shop-screen .character-shop-product-copy strong { font-size: var(--ga-font-item-name); }
.character-shop-screen .character-shop-product-copy small { font-size: var(--ga-font-note); }
.character-shop-screen .character-shop-product-copy .character-shop-price { font-size: var(--ga-font-body); color: var(--gold); }
.character-shop-product > button { width: 100%; min-height: 40px; }
.character-shop-screen .character-shop-product-copy strong { white-space: normal; overflow-wrap: anywhere; }
.character-shop-purchase-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; align-self: end; }
.character-shop-screen .character-shop-purchase-row > .grimoire-price { flex: 1 0 auto; justify-content: flex-start; gap: 3px; font-size: var(--ga-font-body); }
.character-shop-screen .character-shop-purchase-row > .grimoire-price img { width: 18px; height: 18px; }
.character-shop-screen .character-shop-purchase-row > .grimoire-price small { font-size: var(--ga-font-note); }
.character-shop-screen .character-shop-purchase-row > button { flex: 1 0 auto; width: auto; min-height: var(--ga-action-height); padding: 8px 4px; font-size: var(--ga-font-control); white-space: nowrap; }
.character-shop-empty { text-align: center; }
.character-shop-confirm-backdrop { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 8 / 84%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.character-shop-confirm-dialog { width: min(430px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 18px; border: 1px solid #765b98; border-radius: 10px; background: #1c1824; box-shadow: 0 24px 70px rgb(0 0 0 / 64%); animation: forge-dialog-in 180ms ease-out; }
.character-shop-confirm-dialog h2 { margin: 3px 0 12px; }
.character-shop-confirm-product { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px; border: 1px solid rgb(180 144 221 / 25%); border-radius: 8px; background: rgb(0 0 0 / 19%); }
.character-shop-confirm-product > img { width: 92px; height: 108px; object-fit: contain; object-position: center bottom; }
.character-shop-confirm-product > div { display: grid; gap: 5px; }
.character-shop-confirm-product strong { color: #efe8f6; }
.character-shop-confirm-product span { color: #c7eeff; font-size: .84rem; font-weight: 700; }
.character-shop-confirm-product small { color: var(--muted); font-size: .62rem; line-height: 1.45; }
.character-shop-confirm-dialog > .small { margin: 11px 0 0; line-height: 1.55; }
.character-shop-confirm-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; margin-top: 15px; }
body.character-shop-modal-open { overflow: hidden; }
.icon-design-promo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; border-color: rgb(195 161 83 / 40%); background: linear-gradient(145deg, rgb(43 34 24 / 96%), rgb(20 17 15 / 98%)); }
.icon-design-promo h2 { margin: 2px 0 4px; color: #f0e4c8; font-size: 1.05rem; }
.icon-design-promo p { margin: 0; line-height: 1.55; }
.icon-design-screen { display: grid; gap: 14px; }
.icon-design-screen > .panel, .icon-design-screen > section, .icon-design-screen > details { margin-top: 0; }
.icon-design-steps { display: grid; gap: 8px; margin: 10px 0; padding: 0; list-style: none; counter-reset: icon-step; }
.icon-design-steps li { position: relative; display: grid; gap: 2px; padding: 9px 10px 9px 42px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 8px; background: rgb(0 0 0 / 18%); counter-increment: icon-step; }
.icon-design-steps li::before { position: absolute; top: 50%; left: 11px; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #44381f; color: var(--gold-strong); content: counter(icon-step); font-size: .72rem; font-weight: 700; transform: translateY(-50%); }
.icon-design-steps strong { font-size: .84rem; }
.icon-design-steps span { color: var(--muted); font-size: .68rem; line-height: 1.5; }
.icon-design-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.icon-design-actions > button { flex: 1 1 140px; }
.icon-design-request-list { display: grid; gap: 10px; }
.icon-design-request-list h3 { margin: 4px 2px 0; font-size: .9rem; }
.icon-design-request { display: grid; gap: 6px; }
.icon-design-request.equipped { border-color: rgb(195 161 83 / 52%); }
.icon-design-request small { color: var(--muted); }
.icon-design-request-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.icon-design-unread { padding: 2px 8px; border-radius: 99px; background: #7a2f2f; color: #ffe1dc; font-size: .68rem; font-weight: 700; }
.icon-design-reference-panel { display: grid; gap: 10px; margin-top: 16px; padding: 13px; border: 1px solid rgb(195 161 83 / 34%); border-radius: 10px; background: linear-gradient(145deg, rgb(55 43 25 / 42%), rgb(15 17 20 / 74%)); }
.icon-design-reference-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.icon-design-reference-heading h3, .icon-design-reference-heading p { margin: 0; }
.icon-design-reference-heading h3 { color: var(--gold-strong); font-size: .9rem; }
.icon-design-reference-heading p { margin-top: 2px; color: var(--muted); font-size: .67rem; line-height: 1.45; }
.icon-design-reference-heading em { padding: 2px 7px; border-radius: 99px; background: rgb(255 255 255 / 7%); color: var(--muted); font-size: .62rem; font-style: normal; }
.icon-design-step-number { display: grid; flex: 0 0 26px; width: 26px; height: 26px; place-items: center; border: 1px solid rgb(195 161 83 / 55%); border-radius: 50%; background: #30291c; color: var(--gold-strong); font-size: .68rem; font-weight: 800; }
.icon-design-reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.icon-design-reference-item { min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 10%); border-radius: 8px; background: rgb(0 0 0 / 24%); }
.icon-design-reference-item a { display: block; aspect-ratio: 1; background: rgb(0 0 0 / 25%); }
.icon-design-reference-item img { width: 100%; height: 100%; object-fit: cover; }
.icon-design-reference-item figcaption { display: flex; align-items: center; gap: 3px; min-width: 0; padding: 5px 6px; }
.icon-design-reference-item figcaption span { min-width: 0; overflow: hidden; color: var(--muted); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.icon-design-reference-item figcaption button { flex: 0 0 auto; margin-left: auto; padding: 2px; font-size: .58rem; }
.icon-design-reference-add { width: fit-content; }
.icon-design-reference-add.disabled { opacity: .45; pointer-events: none; }
.icon-design-wizard-heading { align-items: flex-end; }
.icon-design-wizard-heading .text-button { margin: 0 0 8px; padding: 0; }
.icon-design-wizard-heading > strong { color: var(--gold-strong); font-size: .78rem; white-space: nowrap; }
.icon-design-wizard-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 14px 0; }
.icon-design-wizard-progress span { position: relative; display: grid; justify-items: center; gap: 5px; min-width: 0; color: var(--muted); }
.icon-design-wizard-progress span::before { position: absolute; z-index: 0; top: 12px; right: 50%; left: -50%; height: 1px; background: rgb(255 255 255 / 12%); content: ""; }
.icon-design-wizard-progress span:first-child::before { display: none; }
.icon-design-wizard-progress i { z-index: 1; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--inset); font-size: .65rem; font-style: normal; font-weight: 800; }
.icon-design-wizard-progress small { max-width: 100%; overflow: hidden; font-size: .55rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.icon-design-wizard-progress span.active, .icon-design-wizard-progress span.complete { color: var(--gold-strong); }
.icon-design-wizard-progress span.active i { border-color: var(--gold); background: #44381f; box-shadow: 0 0 0 3px rgb(195 161 83 / 10%); }
.icon-design-wizard-progress span.complete i { border-color: #708f6d; background: #30432e; color: #cce3c8; }
.icon-design-wizard-progress span.complete::before, .icon-design-wizard-progress span.active::before { background: rgb(134 164 122 / 52%); }
.icon-design-wizard-page { margin-top: 14px; padding: 14px; border: 1px solid rgb(195 161 83 / 34%); border-radius: 10px; background: rgb(20 20 20 / 52%); animation: icon-design-step-in 180ms ease-out; }
.icon-design-wizard-page-title { display: flex; align-items: center; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.icon-design-wizard-page-title p, .icon-design-wizard-page-title h3 { margin: 0; }
.icon-design-wizard-page-title p { color: var(--muted); font-size: .56rem; letter-spacing: .1em; }
.icon-design-wizard-page-title h3 { margin-top: 2px; color: var(--gold-strong); font-size: .96rem; }
.icon-design-wizard-fields { display: grid; gap: 16px; margin-top: 16px; }
.icon-design-wizard-actions { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 8px; margin-top: 16px; }
.icon-design-wizard-actions button { width: 100%; min-height: 49px; }
@keyframes icon-design-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.icon-design-field { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.icon-design-field > legend, .icon-design-legend { padding: 0; font-size: .8rem; font-weight: 700; }
.icon-design-required { margin-left: 6px; padding: 1px 6px; border-radius: 99px; background: #5b2c2c; color: #ffd9d3; font-size: .62rem; font-style: normal; font-weight: 400; }
.icon-design-field input[type="text"], .icon-design-field textarea, .icon-design-chat-form textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: inherit; font: inherit; }
.icon-design-field textarea, .icon-design-chat-form textarea { resize: vertical; }
.icon-design-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.icon-design-chip { position: relative; display: inline-flex; }
.icon-design-chip input { position: absolute; opacity: 0; pointer-events: none; }
.icon-design-chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-2); font-size: .78rem; cursor: pointer; }
.icon-design-chip input:checked + span { border-color: var(--gold); background: #44381f; color: var(--gold-strong); font-weight: 700; }
.icon-design-chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.icon-design-chip input:disabled + span { opacity: .4; cursor: not-allowed; }
.icon-design-field-note { display: grid; gap: 5px; margin-top: 3px; }
.icon-design-field-note > span { color: #c8beca; font-size: .7rem; font-weight: 700; }
.icon-design-field-note > span small { margin-left: 4px; color: var(--muted); font-size: .58rem; font-weight: 400; }
.icon-design-field-note textarea { min-height: 58px; font-size: .75rem; line-height: 1.5; }
@media (max-width: 480px) {
  .icon-design-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icon-design-wizard-progress { gap: 2px; }
  .icon-design-wizard-progress small { font-size: .5rem; }
  .icon-design-wizard-page { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .icon-design-wizard-page { animation: none; }
}
.icon-design-summary-section { margin-top: 12px; }
.icon-design-summary-section h3 { margin: 0 0 6px; color: var(--gold); font-size: .82rem; }
.icon-design-summary-section dl { display: grid; margin: 0; }
.icon-design-summary-section dl > div { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid rgb(255 255 255 / 6%); }
.icon-design-summary-section dt { color: var(--muted); font-size: .72rem; }
.icon-design-summary-section dd { margin: 0; overflow-wrap: anywhere; font-size: .78rem; white-space: pre-wrap; }
.icon-design-summary-section dd.empty { color: var(--muted); }
.icon-design-cost { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.icon-design-cost > div { display: grid; gap: 2px; padding: 10px; border: 1px solid rgb(176 147 220 / 24%); border-radius: 8px; background: rgb(0 0 0 / 20%); }
.icon-design-cost span { color: var(--muted); font-size: .64rem; }
.icon-design-cost strong { color: #c7eeff; font-size: 1.1rem; }
.icon-design-result-image { display: grid; height: 260px; place-items: end center; overflow: hidden; margin-top: 10px; border-radius: 9px; background: radial-gradient(ellipse at 50% 80%, rgb(132 94 173 / 28%), transparent 62%), rgb(7 8 12 / 55%); }
.icon-design-result-image > img { max-width: 100%; height: 250px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 7px 8px rgb(0 0 0 / 52%)); }
.icon-design-messages { display: grid; gap: 9px; max-height: 420px; margin-top: 10px; overflow-y: auto; overscroll-behavior: contain; }
.icon-design-message { display: grid; gap: 5px; max-width: 88%; padding: 9px 11px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 10px; background: rgb(255 255 255 / 5%); }
.icon-design-message.player { justify-self: end; border-color: rgb(195 161 83 / 32%); background: rgb(68 56 31 / 46%); }
.icon-design-message.admin { justify-self: start; border-color: rgb(176 147 220 / 32%); background: rgb(58 44 82 / 42%); }
.icon-design-message p { margin: 0; font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.icon-design-message-meta { color: var(--muted); font-size: .62rem; }
.icon-design-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-design-attachment-preview { display: block; padding: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 12%); border-radius: 7px; background: rgb(0 0 0 / 28%); cursor: zoom-in; }
.icon-design-attachment-preview:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.icon-design-attachments img { display: block; width: 92px; height: 92px; border-radius: 6px; object-fit: cover; }
.icon-design-image-modal-backdrop { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: rgb(2 4 7 / 91%); backdrop-filter: blur(7px); animation: forge-backdrop-in 150ms ease-out; }
.icon-design-image-dialog { display: grid; width: min(960px, 100%); max-height: calc(100dvh - 24px); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid rgb(176 147 220 / 44%); border-radius: 13px; background: linear-gradient(155deg, rgb(24 24 32 / 99%), rgb(8 10 15 / 99%)); box-shadow: 0 24px 72px rgb(0 0 0 / 72%); }
.icon-design-image-dialog-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 13px 14px; border-bottom: 1px solid rgb(255 255 255 / 9%); }
.icon-design-image-dialog-header .eyebrow, .icon-design-image-dialog-header h2, .icon-design-image-dialog-header p { margin: 0; }
.icon-design-image-dialog-header h2 { margin-top: 2px; color: #f0e4c8; font-size: 1rem; }
.icon-design-image-dialog-header p:last-child { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.icon-design-image-dialog-close { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid rgb(255 255 255 / 14%); border-radius: 50%; background: rgb(255 255 255 / 5%); color: #f1eaf6; font-size: 1.45rem; line-height: 1; }
.icon-design-image-dialog-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.icon-design-image-dialog-body { display: grid; min-height: 0; place-items: center; overflow: auto; padding: 12px; overscroll-behavior: contain; background: radial-gradient(circle at center, rgb(107 82 145 / 15%), transparent 58%), #05070a; }
.icon-design-image-dialog-body img { display: block; max-width: 100%; max-height: calc(100dvh - 118px); object-fit: contain; }
.icon-design-chat-form { display: grid; gap: 8px; margin-top: 12px; }
.icon-design-chat-actions { display: flex; gap: 8px; }
.icon-design-chat-actions > * { flex: 1 1 0; text-align: center; }
.icon-design-file-button { display: inline-flex; align-items: center; justify-content: center; }
.icon-design-file-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.icon-design-file-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 6px; background: rgb(0 0 0 / 22%); font-size: .72rem; }
.icon-design-file-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-design-sheet > summary { cursor: pointer; font-weight: 700; }
@media (max-width: 520px) {
  .icon-design-promo { grid-template-columns: 1fr; }
  .icon-design-summary-section dl > div { grid-template-columns: 1fr; gap: 2px; }
  .icon-design-message { max-width: 96%; }
  .icon-design-image-modal-backdrop { align-items: center; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .icon-design-image-dialog { max-height: calc(100dvh - 16px); }
  .icon-design-image-dialog-header { padding: 10px 11px; }
  .icon-design-image-dialog-body { padding: 8px; }
  .icon-design-image-dialog-body img { max-height: calc(100dvh - 102px); }
}

@media (prefers-reduced-motion: reduce) { .icon-design-image-modal-backdrop { animation: none; } }

.limited-abyss-hero { border-color: rgb(137 67 69 / 55%); background: radial-gradient(circle at 80% 10%, rgb(118 39 54 / 18%), transparent 40%), linear-gradient(145deg, rgb(40 21 27 / 97%), rgb(14 13 19 / 98%)); }
.limited-abyss-title { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 12px 0; }
.limited-abyss-title > span { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgb(186 91 95 / 25%); border-radius: 50%; background: rgb(0 0 0 / 21%); }
.limited-abyss-icon { width: 43px; height: 43px; object-fit: contain; }
.limited-abyss-title p, .limited-abyss-title h1 { margin-top: 0; }
.limited-abyss-hero > p { color: #c7b8bd; font-size: .76rem; line-height: 1.7; }
.limited-abyss-schedule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.limited-abyss-schedule > div { padding: 10px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 7px; background: rgb(0 0 0 / 18%); }
.limited-abyss-schedule dt { color: #aa8d94; font-size: .58rem; }
.limited-abyss-schedule dd { margin: 4px 0 0; color: #eee1e3; font-size: .72rem; font-weight: 700; }
.limited-abyss-preparation { text-align: center; }
.limited-abyss-preparation p:not(.eyebrow) { max-width: 620px; margin: 0 auto 16px; color: var(--muted); font-size: .72rem; line-height: 1.65; }
.limited-abyss-preparation button { min-width: 190px; }
.limited-abyss-rule { display: grid; gap: 13px; border-color: rgb(151 77 75 / 35%); }
.limited-abyss-rule h2, .limited-abyss-commands h2, .limited-abyss-equipment h2, .limited-abyss-supply h2 { margin: 2px 0 5px; font-family: "Yu Mincho", serif; font-weight: 500; }
.limited-abyss-rule p:not(.eyebrow), .limited-abyss-supply > p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.65; }
.limited-abyss-progress { display: grid; gap: 6px; }
.limited-abyss-progress > span { display: flex; align-items: baseline; justify-content: space-between; color: #c8b5ba; font-size: .7rem; }
.limited-abyss-progress > span b { color: #f0d8dc; font-size: 1rem; }
.limited-abyss-progress > i { display: block; height: 8px; overflow: hidden; border: 1px solid rgb(255 255 255 / 8%); border-radius: 999px; background: rgb(0 0 0 / 28%); }
.limited-abyss-progress > i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #91495c, #7d61b3); }
.limited-abyss-progress > small { color: #9e858c; font-size: .59rem; line-height: 1.5; }
.limited-abyss-supply .section-heading > strong { color: #e5c6a1; font-size: 1.15rem; }
.limited-abyss-supply-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.limited-abyss-command-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.limited-abyss-command-grid label { display: grid; gap: 5px; color: #ac949a; font-size: .62rem; }
.limited-abyss-command-grid select { width: 100%; min-width: 0; padding: 9px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 6px; color: var(--text); background: #17131a; font: inherit; }
.limited-abyss-parts { display: grid; gap: 8px; margin-top: 12px; }
.limited-abyss-part { overflow: hidden; border: 1px solid rgb(255 255 255 / 8%); border-radius: 8px; background: rgb(0 0 0 / 16%); }
.limited-abyss-part > summary { display: grid; grid-template-columns: 32px minmax(65px, .35fr) minmax(0, 1fr); align-items: center; gap: 9px; padding: 11px; cursor: pointer; list-style: none; }
.limited-abyss-part > summary::-webkit-details-marker { display: none; }
.limited-abyss-part > summary > span { display: grid; }
.limited-abyss-part > summary small { color: var(--muted); font-size: .57rem; }
.limited-abyss-part > summary > b { overflow: hidden; color: #d9c8cd; font-size: .7rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.limited-abyss-part-icon { width: 28px; height: 28px; object-fit: contain; }
.limited-abyss-item-list { display: grid; gap: 8px; padding: 0 9px 9px; }
.limited-abyss-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; padding: 10px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 7px; background: rgb(28 22 30 / 88%); }
.limited-abyss-item.equipped { border-color: rgb(199 145 104 / 45%); background: linear-gradient(120deg, rgb(66 42 35 / 38%), rgb(28 22 30 / 88%)); }
.limited-abyss-item header { display: flex; align-items: center; gap: 7px; }
.limited-abyss-item header span { padding: 2px 5px; border-radius: 4px; color: #e4c299; background: rgb(197 135 86 / 12%); font-size: .58rem; }
.limited-abyss-item p { grid-column: 1 / -1; margin: 0; color: #a9959b; font-size: .61rem; }
.limited-abyss-item > button { grid-row: 1; grid-column: 2; min-width: 78px; padding: 7px 9px; }
.limited-abyss-item-slots { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.limited-abyss-item-slots span { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 6px; border-radius: 5px; color: #c9b9bd; background: rgb(0 0 0 / 20%); font-size: .62rem; }
.limited-abyss-item-slots b { display: grid; flex: 0 0 20px; height: 20px; place-items: center; border-radius: 50%; color: #e9d6b6; background: rgb(144 86 103 / 32%); font-size: .58rem; }

@media (max-width: 900px) {
  .landing-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-battle-section, .landing-relic-section { grid-template-columns: 1fr; }
  .landing-relic-section .landing-relic-visual { order: 2; }
  .landing-inheritance-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .landing-inheritance-flow > i { display: none; }
  .landing-inheritance-flow article { min-height: 215px; }
  .landing-final-cta { grid-template-columns: 120px minmax(0, 1fr); }
  .landing-final-cta > img { width: 120px; height: 120px; }
  .landing-final-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
.verification-panel { width: min(540px, 100%); margin: 28px auto; }
.verification-panel h2 { margin-bottom: 8px; }
.verification-lead { margin: 14px 0; padding: 11px 12px; border-left: 3px solid var(--green); background: rgb(92 143 82 / 10%); line-height: 1.6; }
.verification-lead strong { color: #bfe0b7; }
.verification-email { margin: 12px 0; padding: 10px 12px; border-left: 3px solid var(--gold); background: rgb(var(--accent-rgb) / 8%); color: var(--gold-strong); font-weight: 700; overflow-wrap: anywhere; }
.verification-steps { display: grid; gap: 7px; margin: 18px 0; }
.verification-steps span { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; }
.verification-steps b { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-strong); font-size: .72rem; }
.verification-actions { display: grid; gap: 8px; margin: 18px 0 12px; }
.inventory-heading > div { display: grid; gap: 2px; }
.inventory-heading > button { min-height: 38px; padding: 6px 10px; font-size: .72rem; }
.inventory-capacity-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 11px; border: 1px solid #6f603c; border-left: 3px solid var(--gold); border-radius: 7px; background: rgb(var(--accent-rgb) / 8%); }
.inventory-capacity-notice.blocking { border-color: #87544b; border-left-color: var(--red); background: rgb(151 70 57 / 12%); }
.inventory-capacity-notice > div { display: grid; gap: 2px; min-width: 0; }
.inventory-capacity-notice strong { color: var(--gold-strong); font-size: .76rem; }
.inventory-capacity-notice.blocking strong { color: #edaa9f; }
.inventory-capacity-notice span { color: var(--muted); font-size: .66rem; }
.inventory-capacity-notice button { flex: 0 0 auto; min-height: 38px; padding: 6px 10px; font-size: .68rem; }
.inventory-capacity-notice .inventory-capacity-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sale-backdrop { position: fixed; z-index: 210; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 84%); backdrop-filter: blur(4px); animation: forge-backdrop-in 150ms ease-out; }
.sale-dialog { display: flex; flex-direction: column; width: min(620px, 100%); max-height: calc(100dvh - 32px); padding: 18px; overflow: hidden; border: 1px solid #786445; border-radius: 12px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 62%); animation: forge-dialog-in 180ms ease-out; }
.sale-heading { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sale-heading h2 { margin: 3px 0 0; }
.sale-close { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 1.25rem; cursor: pointer; }
.sale-guide, .sale-warning { margin: 9px 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.sale-warning { padding: 9px 10px; border-left: 3px solid var(--red); background: rgb(130 54 44 / 13%); color: #e6a99d; }
.sale-tools { display: grid; flex: 0 0 auto; gap: 8px; margin: 2px 0 8px; }
.sale-tools input { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--inset); color: var(--text); font-size: .75rem; }
.sale-rarity-filters { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.sale-rarity-filters button { flex: 1 0 auto; min-height: 35px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card-dark); color: var(--muted); font-size: .68rem; cursor: pointer; }
.sale-rarity-filters button.active { border-color: var(--gold); background: rgb(var(--accent-rgb) / 14%); color: var(--gold-strong); }
.sale-quick-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: .66rem; color: var(--muted); }
.sale-quick-actions button { min-height: 31px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--gold-strong); cursor: pointer; font-size: .65rem; }
.sale-quick-actions button:first-of-type { margin-left: auto; }
.sale-summary { display: grid; flex: 0 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
.sale-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; min-width: 0; padding: 7px 9px; background: var(--inset); }
.sale-summary small { color: var(--muted); font-size: .61rem; }
.sale-summary strong { color: var(--text); font-size: .72rem; white-space: nowrap; }
.sale-summary .sale-total { color: var(--gold-strong); font-size: .93rem; }
.sale-item-list { display: grid; flex: 1 1 auto; align-content: start; gap: 6px; min-height: 86px; max-height: min(47dvh, 470px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.sale-item-row { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 72px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card-dark); color: var(--text); cursor: pointer; text-align: left; }
.sale-item-row.selected { border-color: #aa8c4d; background: rgb(var(--accent-rgb) / 12%); box-shadow: inset 3px 0 0 var(--gold); }
.sale-item-row[aria-disabled="true"] { cursor: default; }
.sale-check { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #656756; border-radius: 5px; color: #fff0d2; font-size: .8rem; }
.sale-item-row.selected .sale-check { border-color: var(--gold); background: #70572e; }
.sale-item-copy { display: grid; gap: 3px; min-width: 0; }
.sale-item-head { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.sale-item-head strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.sale-item-head small { flex: 0 0 auto; color: var(--muted); font-size: .59rem; }
.sale-item-copy > small { overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.sale-inherited-tag { color: #e7b29b; font-size: .62rem; font-style: normal; }
.sale-slot-strip { display: flex; gap: 4px; }
.sale-slot { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: #3a3c41; color: #94989b; font-size: .55rem; }
.sale-slot.filled.slot-a { background: #793837; color: #ffe4df; }
.sale-slot.filled.slot-b { background: #285278; color: #d8efff; }
.sale-slot.filled.slot-c { background: #37664b; color: #deffe9; }
.sale-item-price { align-self: center; color: var(--gold-strong); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.sale-item-price small { margin-left: 1px; font-size: .59rem; }
.sale-empty { display: grid; min-height: 100px; margin: 0; place-items: center; color: var(--muted); font-size: .72rem; }
.sale-actions { display: grid; flex: 0 0 auto; grid-template-columns: .7fr 1.3fr; gap: 8px; margin-top: 12px; }
.sale-actions button { min-height: 44px; }
.sale-actions .gold-button { border: 1px solid #a68748; border-radius: 7px; background: linear-gradient(135deg, #765b2a, #a17b36); color: #fff6da; font-weight: 700; cursor: pointer; }
.sale-actions .gold-button:disabled { opacity: .5; cursor: default; }
.loot-select-button span { display: block; margin-top: 1px; color: var(--muted); font-size: .6rem; }
body.sale-modal-open { overflow: hidden; }
.lineage-policy { display: inline-block; margin-left: 4px; color: #8fcadf; }
.lineage-policy.bound { color: #d5a68c; }
.core-inheritance-target { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--accent-border); border-left: 3px solid var(--gold); border-radius: 7px; background: rgb(var(--accent-rgb) / 7%); }
.core-inheritance-target > div { display: grid; gap: 2px; min-width: 0; }
.core-inheritance-target span, .core-inheritance-target small { color: var(--muted); font-size: .64rem; }
.core-inheritance-target strong { overflow-wrap: anywhere; }
.core-inheritance-target button { flex: 0 0 auto; }
.core-inheritance-flow { display: grid; gap: 12px; }
.core-inheritance-flow-header { margin-bottom: 0; }
.core-inheritance-back { margin-bottom: 10px; padding-left: 0; }
.core-operation-intro { margin-bottom: 11px; }
.core-operation-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.core-operation-option { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 3px 9px; min-width: 0; min-height: 78px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgb(255 255 255 / 3%), rgb(0 0 0 / 12%)); color: var(--text); cursor: pointer; text-align: left; }
.core-operation-option:not(:disabled):hover { border-color: var(--accent-border); background: rgb(var(--accent-rgb) / 8%); }
.core-operation-option.selected { transform: translateY(-1px); }
.core-operation-option.inherit.selected { border-color: #a98a49; background: linear-gradient(145deg, rgb(169 138 73 / 18%), rgb(78 59 25 / 10%)); box-shadow: inset 0 0 0 1px rgb(230 196 119 / 11%), 0 5px 14px rgb(0 0 0 / 16%); }
.core-operation-option.reinforce.selected { border-color: #638fa2; background: linear-gradient(145deg, rgb(82 144 169 / 17%), rgb(28 69 86 / 11%)); box-shadow: inset 0 0 0 1px rgb(151 215 235 / 10%), 0 5px 14px rgb(0 0 0 / 16%); }
.core-operation-option:disabled { cursor: default; opacity: .48; }
.core-operation-mark { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgb(255 255 255 / 17%); border-radius: 50%; background: rgb(0 0 0 / 22%); color: var(--gold-strong); font-size: 1rem; font-weight: 700; }
.core-operation-option.reinforce .core-operation-mark { color: #9ed8eb; }
.core-operation-option > span:nth-child(2) { display: grid; min-width: 0; }
.core-operation-option strong { font-size: .82rem; line-height: 1.35; }
.core-operation-option small { color: var(--muted); font-size: .62rem; }
.core-operation-option em { grid-column: 1 / -1; padding-top: 5px; border-top: 1px solid rgb(255 255 255 / 7%); color: var(--muted); font-size: .59rem; font-style: normal; text-align: right; }
.core-operation-option.selected em { color: #dfd5b8; }
.core-operation-option.reinforce.selected em { color: #b9dbe5; }
.core-operation-summary { display: grid; gap: 3px; margin-top: 9px; padding: 9px 11px; border-left: 3px solid #a98a49; background: rgb(169 138 73 / 8%); }
.core-operation-summary.reinforce { border-left-color: #638fa2; background: rgb(82 144 169 / 8%); }
.core-operation-summary strong { color: #eee5cf; font-size: .73rem; }
.core-operation-summary.reinforce strong { color: #cce8f0; }
.core-operation-summary span { color: var(--muted); font-size: .64rem; line-height: 1.5; }
.core-inheritance-steps { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin: 13px 0; color: var(--muted); font-size: .65rem; text-align: center; }
.core-inheritance-steps > span { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 5px; border: 1px solid var(--line); border-radius: 6px; background: rgb(255 255 255 / 2%); }
.core-inheritance-steps b { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid #646655; border-radius: 50%; font-size: .59rem; }
.core-inheritance-steps .done, .core-inheritance-steps .current { border-color: var(--accent-border); color: var(--gold-strong); }
.core-inheritance-steps .done b { border-color: var(--accent-border); background: var(--selected-start); color: var(--selected-text); }
.core-inheritance-steps .current { background: rgb(var(--accent-rgb) / 9%); }
.core-inheritance-steps > i { color: var(--gold); font-size: .9rem; font-style: normal; }
.core-inheritance-target-detail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; margin: 0; padding: 13px; }
.core-inheritance-target-heading { display: grid; gap: 2px; min-width: 0; }
.core-inheritance-target-stats, .core-inheritance-target-skills { grid-column: 1 / -1; display: grid; gap: 5px; padding-top: 9px; border-top: 1px solid var(--line); }
.core-inheritance-target-stats > span, .core-inheritance-target-skills > span { color: var(--muted); font-size: .63rem; }
.core-inheritance-target-stats strong { color: var(--text); font-size: .73rem; }
.core-inheritance-choice-panel { margin: 0; }
.core-operation-content.inherit { border-color: rgb(169 138 73 / 38%); background: linear-gradient(145deg, rgb(169 138 73 / 7%), var(--surface)); }
.core-operation-content.reinforce { border-color: rgb(99 143 162 / 42%); background: linear-gradient(145deg, rgb(82 144 169 / 8%), var(--surface)); }
.core-grid, .market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 10px; }
.core-card, .listing-card { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgb(255 255 255 / 3%); }
.market-listing-card { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border-color: rgb(var(--accent-rgb) / 39%); background: radial-gradient(circle at 15% 0, rgb(110 168 150 / 17%), transparent 52%), linear-gradient(145deg, var(--surface-2), var(--surface-deep)); box-shadow: inset 0 0 0 2px rgb(0 0 0 / 12%); }
.market-listing-main { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: start; gap: 11px; padding: 16px 14px 13px; }
.market-listing-seal { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgb(156 208 190 / 50%); border-radius: 8px; background: radial-gradient(circle, rgb(119 179 164 / 36%), rgb(40 74 67 / 75%) 70%); box-shadow: 0 0 0 4px rgb(116 177 157 / 10%), inset 0 1px rgb(240 255 244 / 15%); }
.market-listing-seal-icon { width: 36px; height: 36px; object-fit: contain; }
.market-listing-copy { min-width: 0; }
.market-listing-kicker { color: #9dcabd; font-size: .56rem; font-weight: 700; letter-spacing: .1em; }
.market-listing-card .market-listing-copy h3 { margin: 5px 0 7px; color: var(--text); font-family: "Yu Mincho", serif; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.market-listing-copy p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.5; overflow-wrap: anywhere; }
.market-listing-compatibility { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; padding: 0 14px 13px; color: var(--muted); font-size: .65rem; }
.market-listing-compatibility > span:last-child { color: var(--text); }
.market-listing-price { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 9px 14px; border-top: 1px solid rgb(var(--accent-rgb) / 24%); background: rgb(0 0 0 / 18%); }
.market-listing-price > span { color: var(--muted); font-size: .64rem; }
.market-listing-price strong { color: var(--gold-strong); font-family: "Yu Mincho", serif; font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.market-listing-price small { margin-left: 3px; font-family: inherit; font-size: .63rem; }
.market-listing-meta { display: grid; gap: 3px; padding: 10px 14px 12px; color: var(--muted); font-size: .62rem; line-height: 1.35; overflow-wrap: anywhere; }
.market-listing-owned { align-self: flex-start; margin: 0 14px 13px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: .65rem; }
.market-listing-action { min-height: 44px; margin: 0 14px 14px; }
.market-listing-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 14px; }
.market-listing-actions .market-listing-action { flex: 1 1 155px; min-width: 0; margin: 0; font-size: .72rem; }
.core-card.bound { border-color: rgb(213 166 140 / 28%); }
.core-choice-card { display: flex; flex-direction: column; }
.core-choice-card.compatible { border-color: rgb(201 158 70 / 56%); background: radial-gradient(circle at 0 0, rgb(195 145 51 / 12%), transparent 40%), rgb(255 255 255 / 3%); box-shadow: inset 3px 0 0 #c79b49, 0 0 14px rgb(192 139 43 / 8%); }
.core-choice-card.unavailable { border-color: rgb(104 111 111 / 24%); background: rgb(255 255 255 / 1.5%); }
.core-choice-card > .item-actions { margin-top: auto; padding-top: 10px; }
.core-choice-head-state { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.core-choice-availability { display: inline-flex; min-height: 22px; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid currentcolor; border-radius: 999px; font-size: .55rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.core-choice-availability i { width: 6px; height: 6px; border-radius: 50%; background: currentcolor; box-shadow: 0 0 7px currentcolor; }
.core-choice-availability.available { color: #efd17d; background: rgb(161 111 28 / 15%); }
.core-choice-availability.blocked { color: #8b9698; background: rgb(88 98 100 / 10%); }
.core-choice-change { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 10px; padding: 8px; border: 1px solid var(--accent-border); border-radius: 6px; background: rgb(var(--accent-rgb) / 8%); font-size: .7rem; }
.core-choice-change > span:not(.slot-badge) { color: var(--muted); overflow-wrap: anywhere; }
.core-choice-change i { color: var(--gold); font-style: normal; }
.core-choice-change strong { color: var(--gold-strong); overflow-wrap: anywhere; }
.core-choice-cost { margin: 8px 0 10px; color: var(--gold-strong); text-align: right; }
.core-choice-unavailable { display: grid; gap: 2px; margin: 8px 0 10px; padding: 7px 8px; border-left: 2px solid #a46e66; background: rgb(137 75 66 / 9%); color: #cba6a0; }
.core-choice-unavailable strong { color: #efb2a8; font-size: .61rem; }
.core-choice-select { display: grid; flex: 1 1 155px; min-height: 46px; place-content: center; gap: 1px; border-color: #d0a64f; background: linear-gradient(180deg, #9b6c20, #6f4614); color: #fff5d1; box-shadow: 0 7px 15px rgb(0 0 0 / 24%), inset 0 1px rgb(255 243 191 / 20%); font-weight: 800; }
.core-choice-select:not(:disabled):hover, .core-choice-select:not(:disabled):focus-visible { border-color: #f0cd76; background: linear-gradient(180deg, #b17d29, #805318); color: #fffbea; box-shadow: 0 0 0 2px rgb(225 180 84 / 15%), 0 8px 18px rgb(0 0 0 / 28%); }
.core-choice-select small { color: #ead49b; font-size: .52rem; font-weight: 600; }
.core-choice-select:disabled { border-color: #465052; background: #151b1e; color: #778184; box-shadow: none; cursor: not-allowed; opacity: 1; }
.core-choice-select:disabled small { color: #626d70; }
.core-inheritance-empty { grid-column: 1 / -1; display: grid; justify-items: start; gap: 6px; padding: 18px 14px; border: 1px dashed #5b5d4f; border-radius: 8px; color: var(--muted); }
.core-inheritance-empty strong { color: var(--text); }
.core-inheritance-empty span { font-size: .68rem; }
.core-inheritance-empty button { margin-top: 5px; }
.core-card h3, .listing-card h3 { margin: 8px 0 5px; }
.core-card-title, .core-inline-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.core-card-title span, .core-inline-title { overflow-wrap: anywhere; }
.core-compatibility { color: var(--gold-strong); }
.core-skill-description { margin: 0; color: #d7d4c4; line-height: 1.55; }
.core-compatibility-note { margin: 6px 0 0; }
.core-base-picker { margin-top: 13px; }
.core-base-picker-menu { max-height: min(55vh, 520px); }
.core-base-picker-option { grid-template-rows: auto auto auto auto; }
.core-base-picker-option .forge-picker-option-detail { white-space: normal; line-height: 1.45; }
.core-base-option-skills { grid-column: 1; display: grid; gap: 3px; margin-top: 3px; }
.core-base-option-skills > span { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 5px; padding: 3px 6px; border-left: 2px solid #4c5144; background: rgb(0 0 0 / 12%); color: #d3d0bf; font-size: .66rem; line-height: 1.35; }
.core-base-option-skills b { color: var(--gold); }
.core-base-option-skills .replace-target { border-left-color: var(--gold); background: rgb(var(--accent-rgb) / 10%); }
.core-base-option-reason { grid-column: 1; color: #d89b90; font-size: .64rem; }
.core-base-picker-option .forge-picker-check { grid-row: 1 / -1; }
.core-base-selected-item { border-left-color: var(--gold); }
.core-base-change { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--accent-border); border-radius: 6px; background: rgb(var(--accent-rgb) / 8%); font-size: .72rem; }
.core-base-change > span:not(.slot-badge) { color: var(--muted); overflow-wrap: anywhere; }
.core-base-change i { color: var(--gold); font-style: normal; }
.core-base-change strong { color: var(--gold-strong); overflow-wrap: anywhere; }
.core-base-cost { margin: 9px 0 0; color: var(--gold-strong); text-align: right; }
.core-base-guidance { margin: 6px 0 0; }
.core-card > .item-actions { margin-top: 9px; }
.destructive-preview, .market-confirm { border-color: rgb(var(--accent-rgb) / 45%); }
.core-apply-preview-button { display: block; width: min(100%, 280px); margin: 18px auto 0; }
.market-mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 14px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: rgb(0 0 0 / 18%); }
.market-mode-tab { display: grid; gap: 2px; min-width: 0; min-height: 50px; place-content: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; text-align: center; }
.market-mode-tab strong { font-size: .86rem; }
.market-mode-tab small { font-size: .58rem; }
.market-mode-tab.active { border-color: var(--selected-border); background: var(--primary-bg); color: var(--primary-text); box-shadow: inset 0 -2px 0 var(--gold); }
.market-view { display: grid; gap: 14px; }
.market-view > .panel { margin-top: 0; }
.market-sell-list { display: grid; gap: 8px; }
.market-sell-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 180px) auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.market-sell-row input { min-width: 0; }
.market-history-panel { overflow: hidden; padding: 0; }
.market-history-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; border-radius: inherit; background: transparent; color: var(--text); text-align: left; }
.market-history-toggle .heading-with-icon { margin: 0; }
.market-history-toggle-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.market-history-chevron { color: var(--gold); font-size: 1rem; transition: transform .18s ease; }
.market-history-toggle[aria-expanded="true"] .market-history-chevron { transform: rotate(180deg); }
.market-history-content { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.market-history-loading { display: flex; align-items: center; gap: 8px; }
.market-history-load-more { width: 100%; margin-top: 12px; }
.trade-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.market-pagination { display: grid; grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr); align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); text-align: center; }
.trade-row small { grid-column: 1 / -1; color: var(--muted); }
.expedition-readonly-notice { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 12px; border: 1px solid rgb(var(--accent-rgb) / 38%); border-left: 3px solid var(--gold); border-radius: 7px; background: rgb(var(--accent-rgb) / 8%); color: var(--muted); font-size: .72rem; line-height: 1.45; }
.expedition-readonly-notice strong { flex: 0 0 auto; color: var(--gold-strong); font-size: .7rem; }
.background-battle-monitor { position: fixed; z-index: 35; right: 16px; bottom: 16px; left: 16px; width: min(500px, calc(100% - 32px)); margin: 0 auto; overflow: hidden; border: 1px solid rgb(var(--abyss-crystal-rgb) / 42%); border-radius: 10px; background: linear-gradient(145deg, rgb(15 25 33 / 97%), rgb(21 20 31 / 98%)); box-shadow: 0 12px 34px rgb(0 0 0 / 55%), inset 0 1px rgb(255 255 255 / 7%); backdrop-filter: blur(12px); }
.background-battle-monitor-heading { display: grid; grid-template-columns: 8px max-content minmax(0, 1fr); align-items: center; gap: 7px; min-height: 27px; padding: 4px 8px; border-bottom: 1px solid rgb(var(--abyss-crystal-rgb) / 18%); background: linear-gradient(90deg, rgb(var(--abyss-crystal-rgb) / 10%), rgb(var(--abyss-violet-rgb) / 7%), transparent); }
.background-battle-monitor-heading strong { color: #dcf9ff; font-size: .64rem; letter-spacing: .03em; white-space: nowrap; }
.background-battle-monitor-heading > span:last-child { overflow: hidden; color: #aeb9bc; font-size: .58rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.background-battle-monitor-signal { width: 7px; height: 7px; border-radius: 50%; background: #8b9292; box-shadow: 0 0 7px rgb(139 146 146 / 45%); }
.background-battle-monitor-signal.active { background: #67dba1; box-shadow: 0 0 8px rgb(103 219 161 / 75%); animation: background-auto-pulse 1.4s ease-in-out infinite; }
.background-battle-monitor-signal.busy { background: var(--abyss-crystal); box-shadow: 0 0 8px rgb(var(--abyss-crystal-rgb) / 75%); animation: background-auto-pulse .75s ease-in-out infinite; }
.background-battle-monitor-signal.attention { background: #ecab68; box-shadow: 0 0 8px rgb(236 171 104 / 72%); }
.background-battle-monitor-body { display: grid; grid-template-columns: minmax(128px, 1fr) minmax(90px, 1.2fr) auto; align-items: center; gap: 8px; min-height: 49px; padding: 6px 7px 7px 9px; }
.background-battle-monitor-meters { display: grid; grid-template-columns: 58px minmax(34px, 1fr); align-items: center; gap: 3px 5px; color: #aeb6b4; font-size: .53rem; }
.background-battle-monitor-meters span { display: flex; justify-content: space-between; gap: 3px; white-space: nowrap; }
.background-battle-monitor-meters b { color: #e8ece8; font-size: .55rem; }
.background-battle-monitor-meters progress { display: block; width: 100%; height: 5px; overflow: hidden; border: 0; border-radius: 99px; appearance: none; background: rgb(255 255 255 / 9%); }
.background-battle-monitor-meters progress::-webkit-progress-bar { border-radius: 99px; background: rgb(255 255 255 / 9%); }
.background-battle-monitor-meters progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, #4d9d76, #78d39f); }
.background-battle-monitor-meters progress::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, #4d9d76, #78d39f); }
.background-battle-monitor-meters progress.background-battle-monitor-enemy-meter::-webkit-progress-value { background: linear-gradient(90deg, #a54452, #ed746c); box-shadow: 0 0 5px rgb(237 116 108 / 32%); }
.background-battle-monitor-meters progress.background-battle-monitor-enemy-meter::-moz-progress-bar { background: linear-gradient(90deg, #a54452, #ed746c); box-shadow: 0 0 5px rgb(237 116 108 / 32%); }
.background-battle-monitor-body > p { margin: 0; overflow: hidden; color: #c5c3b8; font-size: .59rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.background-battle-monitor-actions { display: grid; grid-auto-flow: column; gap: 5px; }
.background-battle-monitor-actions button { min-height: 34px; padding: 4px 10px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 35%); border-radius: 6px; background: rgb(var(--abyss-crystal-rgb) / 12%); color: #e8faff; cursor: pointer; font-size: .61rem; font-weight: 700; white-space: nowrap; }
.background-battle-monitor-actions button.stop { border-color: rgb(212 119 104 / 35%); background: rgb(139 59 59 / 18%); color: #efc5bf; }
@keyframes background-auto-pulse { 50% { opacity: .48; transform: scale(.78); } }

@media (max-width: 700px) {
  .battle-phase-heading { gap: 1px; }
  .maintenance-prompt { align-items: center; padding-right: 12px; padding-left: 12px; }
  .maintenance-dialog { padding: 24px 18px 22px; }
  .maintenance-dialog h2 { font-size: 1.1rem; }
  .pwa-install-banner { grid-template-columns: 46px minmax(0, 1fr); gap: 9px; width: calc(100% - 16px); padding: 11px 12px; border-radius: 13px; }
  .pwa-install-banner-icon { width: 44px; height: 44px; border-radius: 11px; }
  .pwa-install-banner-icon img { width: 37px; height: 37px; border-radius: 9px; }
  .pwa-install-banner-copy { gap: 1px; padding-right: 18px; }
  .pwa-install-banner-copy > span { font-size: .47rem; }
  .pwa-install-banner-copy > strong { font-size: .8rem; }
  .pwa-install-banner-copy > p { font-size: .56rem; }
  .pwa-install-banner-benefits { margin-top: 3px; }
  .pwa-install-banner-actions { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 72px; min-width: 0; }
  .pwa-install-banner-primary { min-height: 39px; }
  .pwa-install-banner-later { min-height: 39px; border: 1px solid rgb(143 163 171 / 22%); border-radius: 8px; }
  .landing-header { min-height: 58px; padding: 8px 12px; }
  .landing-brand { gap: 6px; }
  .landing-brand-mark { width: 25px; height: 31px; font-size: 1.35rem; }
  .landing-brand strong { font-size: .84rem; letter-spacing: .11em; }
  .landing-brand small { display: none; }
  .landing-header-actions { gap: 4px; }
  .landing-header-actions button { min-height: 38px; padding: 5px 10px; font-size: .68rem; }
  .auth-landing.landing-hero { min-height: max(670px, calc(100svh - 58px)); }
  .landing-hero-image { height: 55%; object-position: 63% center; }
  .landing-hero-shade { background: linear-gradient(0deg, #07090b 0%, #07090b 42%, rgb(7 9 11 / 86%) 55%, rgb(7 9 11 / 9%) 85%), linear-gradient(90deg, rgb(4 6 8 / 42%), transparent 75%); }
  .landing-hero-copy { justify-content: flex-end; width: 100%; min-height: max(670px, calc(100svh - 58px)); padding: 250px 20px 26px; }
  .auth-landing-copy h1 { margin: 8px 0 13px; font-size: clamp(2.25rem, 11vw, 3.1rem); line-height: 1.15; }
  .auth-landing-concept { max-width: 100%; font-size: .79rem; line-height: 1.75; }
  .landing-hero-actions { grid-template-columns: 1fr; width: 100%; margin-top: 20px; }
  .auth-landing-actions button { min-height: 49px; }
  .landing-hero-facts { justify-content: center; gap: 5px 13px; margin-top: 13px; font-size: .61rem; }
  .landing-section { padding: 66px 18px; }
  .landing-section-heading { margin-bottom: 30px; text-align: left; }
  .landing-section h2, .landing-final-cta h2 { font-size: clamp(1.65rem, 7.7vw, 2.25rem); line-height: 1.45; }
  .landing-section p, .landing-final-cta p { font-size: .77rem; line-height: 1.8; }
  .landing-pillar-grid { grid-template-columns: 1fr; gap: 0; border: 0; background: transparent; }
  .landing-pillar-grid article { min-height: 0; padding: 19px 4px 21px 54px; border-top: 1px solid #35392e; background: transparent; }
  .landing-pillar-grid article:last-child { border-bottom: 1px solid #35392e; }
  .landing-pillar-grid article > span { float: left; margin-left: -50px; }
  .landing-pillar-grid h3 { margin: 0 0 7px; font-size: 1.1rem; }
  .landing-pillar-grid p { font-size: .72rem; }
  .landing-battle-section, .landing-relic-section { grid-template-columns: 1fr; gap: 34px; }
  .landing-battle-demo { border-radius: 11px; }
  .landing-demo-stage { min-height: 210px; padding: 10px 12px 6px; }
  .landing-demo-stage img { height: 170px; }
  .landing-demo-log { margin: 0 8px; padding: 9px 10px; }
  .landing-demo-actions { padding: 9px 8px 10px; }
  .landing-demo-actions span { min-height: 39px; }
  .landing-relic-section .landing-relic-visual { order: 0; }
  .landing-relic-visual { border-radius: 10px; }
  .landing-relic-parts { gap: 5px; margin-top: 18px; }
  .landing-relic-parts > span { padding: 5px 7px; font-size: .61rem; }
  .landing-part-icon { width: 17px; height: 17px; }
  .landing-inheritance-section { padding-right: 18px; padding-left: 18px; }
  .landing-inheritance-flow { grid-template-columns: 1fr; gap: 0; }
  .landing-inheritance-flow article { display: grid; grid-template-columns: 48px minmax(0, 1fr); min-height: 0; gap: 2px 13px; padding: 16px 4px; border: 0; border-top: 1px solid #383c31; background: transparent; text-align: left; }
  .landing-inheritance-flow article:last-child { border-bottom: 1px solid #383c31; }
  .landing-flow-icon { grid-row: 1 / 4; width: 44px; height: 44px; margin: 0; }
  .landing-inheritance-flow article > span { grid-column: 2; }
  .landing-inheritance-flow h3 { grid-column: 2; margin: 2px 0; }
  .landing-inheritance-flow p { grid-column: 2; font-size: .67rem; }
  .landing-rest-section { padding-right: 10px; padding-left: 10px; }
  .landing-rest-card { min-height: 510px; grid-template-columns: 1fr; align-content: end; gap: 17px; padding: 26px 20px; background: linear-gradient(0deg, rgb(5 8 10 / 96%) 0%, rgb(5 8 10 / 76%) 53%, rgb(5 8 10 / 18%) 100%), url("/images/background/rest-point-v1.webp") 58% center / cover no-repeat; }
  .landing-rest-card button { width: 100%; min-width: 0; }
  .landing-final-cta { grid-template-columns: 78px minmax(0, 1fr); gap: 15px; width: calc(100% - 20px); margin: 40px auto; padding: 20px 16px; }
  .landing-final-cta > img { width: 78px; height: 90px; }
  .landing-final-actions { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .landing-footer { align-items: flex-start; flex-direction: column; gap: 18px; min-height: 0; padding-top: 24px; padding-bottom: 34px; }
  .landing-footer .auth-legal-links { text-align: left; }
  .inventory-capacity-notice { display: grid; gap: 8px; padding: 8px 9px; }
  .inventory-capacity-notice button { width: 100%; }
  .inventory-capacity-notice .inventory-capacity-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-heading { align-items: center; }
  .inventory-heading > button { min-height: 42px; }
  .equipment-accordion[data-equipment-section="inventory"].open { scroll-margin-top: calc(var(--app-header-height) + 8px); }
  .inventory-control-deck { top: calc(var(--app-header-height) + 6px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 6px; margin-right: -5px; margin-left: -5px; padding: 6px; }
  .inventory-control-deck .preparation-return { grid-column: 1 / -1; margin-bottom: 0; }
  .inventory-control-deck .list-search { position: relative; grid-column: 1 / -1; margin: 0; }
  .inventory-control-deck .list-search > span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .inventory-control-deck .list-search input { min-height: 34px; padding: 5px 9px; }
  .inventory-control-deck .inventory-filters { grid-column: 1 / -1; gap: 4px; margin: 0; }
  .inventory-control-deck .inventory-filter-trigger { grid-template-rows: 1fr; min-height: 34px; padding: 3px 6px; }
  .inventory-control-deck .inventory-filter-trigger > span { display: none; }
  .inventory-control-deck .inventory-filter-trigger > strong { margin-top: 0; font-size: .65rem; }
  .inventory-control-deck .inventory-filter-trigger > i { grid-row: 1; margin-left: 4px; }
  .inventory-control-deck .inventory-result-count { grid-column: 1; align-self: center; text-align: left; font-size: .56rem; }
  .inventory-control-deck #inventory-filter-summary { grid-column: 2; align-self: center; justify-self: end; }
  .inventory-control-deck .list-filter-summary { display: none; }
  .inventory-control-deck .list-reset { min-height: 26px; padding: 2px 7px; font-size: .58rem; }
  .inventory-filter-backdrop { align-items: end; padding: 4px 4px 0; }
  .inventory-filter-dialog { width: 100%; max-height: calc(100dvh - 8px); padding: 15px 13px calc(15px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 12px 12px 0 0; }
  .inventory-filter-backdrop[data-filter="part"] { align-items: center; padding: 12px; }
  .inventory-filter-backdrop[data-filter="part"] .inventory-filter-dialog { width: min(460px, 100%); max-height: calc(100dvh - 24px); padding: 15px 13px; border: 1px solid var(--accent-border); border-radius: 12px; }
  .inventory-filter-options { grid-template-columns: 1fr; max-height: 62dvh; }
  .inventory-filter-option { min-height: 54px; }
  .sale-backdrop { padding: 8px; }
  .sale-dialog { width: 100%; max-height: calc(100dvh - 16px); padding: 13px 11px calc(13px + env(safe-area-inset-bottom)); }
  .sale-item-list { max-height: 45dvh; }
  .sale-actions { grid-template-columns: .75fr 1.25fr; }
  .sale-summary > div { padding: 6px; }
  .sale-summary strong { font-size: .68rem; }
  .chat-backdrop { inset: var(--app-header-height) 0 var(--mobile-navigation-height); }
  .global-chat { right: 0; bottom: var(--mobile-navigation-height); left: 0; width: 100%; filter: none; }
  .background-battle-monitor { right: 7px; bottom: calc(var(--mobile-navigation-height) + var(--mobile-chat-peek-height) + 7px); left: 7px; width: calc(100% - 14px); border-radius: 8px; }
  .background-battle-monitor-body { grid-template-columns: minmax(118px, .9fr) minmax(64px, 1fr) auto; gap: 6px; padding: 5px 6px 6px 8px; }
  .background-battle-monitor-actions button { min-height: 32px; padding: 3px 8px; }
  /* The edge handle takes no space from bottom navigation or battle commands. */
  :root { --mobile-chat-peek-height: 0px; }
  .chat-peek { top: calc(var(--app-header-height) + 96px); right: max(8px, env(safe-area-inset-right)); bottom: auto; }
  .chat-drawer { top: var(--app-header-height); right: 0; bottom: var(--mobile-navigation-height); width: min(90vw, 390px); border-top: 0; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 12px; transform: translateX(102%); }
  .chat-drawer.open { transform: translateX(0); }
  .chat-drawer-header { min-height: 44px; gap: 4px; padding: 0 8px; }
  .chat-drawer-title { gap: 7px; }
  .chat-drawer-title small { display: none; }
  .chat-mechanism-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .chat-mechanism-gear { width: 30px; height: 30px; }
  .chat-mechanism-crystal { width: 12px; height: 12px; }
  .chat-drawer-actions { gap: 1px; }
  .chat-drawer-actions .chat-drawer-control { min-height: 44px; padding-inline: 4px; }
  .chat-drawer-actions .chat-drawer-close { width: 44px; height: 44px; }
  .chat-appearance { padding: 8px 8px 9px; }
  .chat-messages { padding-right: max(8px, env(safe-area-inset-right)); padding-left: 9px; }
  .chat-form { padding-right: max(8px, env(safe-area-inset-right)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  body.chat-open { overflow: hidden; }
  .site-header { grid-template-columns: 36px minmax(58px, .9fr) minmax(68px, 1fr) minmax(56px, .8fr) 34px; gap: 4px; padding-right: max(7px, env(safe-area-inset-right)); padding-left: max(7px, env(safe-area-inset-left)); }
  .hamburger-button { width: 34px; height: 34px; padding: 7px; }
  .currency { gap: 2px; }
  .navigation { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 40; width: 100%; max-width: none; height: var(--mobile-navigation-height); padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left)); border-top: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -10px 28px rgb(0 0 0 / 34%); }
  .navigation button { display: grid; place-items: center; align-content: center; gap: 2px; min-height: 0; height: 62px; padding: 4px 1px 3px; border-top: 2px solid transparent; border-bottom: 0; font-size: .65rem; line-height: 1.1; }
  .navigation button.active { border-top-color: var(--gold); border-bottom-color: transparent; }
  .nav-icon { display: block; width: 36px; height: 36px; opacity: .88; filter: none; transition: opacity 120ms ease, filter 120ms ease, transform 120ms ease; }
  .navigation button.active .nav-icon { opacity: 1; filter: drop-shadow(0 0 3px rgb(105 200 213 / 30%)); transform: translateY(-1px); }
  .nav-label { display: none; }
  .nav-label-mobile { display: block; }
  main { padding: 15px 12px calc(24px + var(--mobile-navigation-height)); }
  body.chat-ready main { padding-bottom: calc(24px + var(--mobile-navigation-height) + var(--mobile-chat-peek-height)); }
  body.background-battle-monitor-visible main { padding-bottom: calc(105px + var(--mobile-navigation-height) + var(--mobile-chat-peek-height)); }
  .home-screen { gap: 8px; }
  .home-adventurer-presence { grid-template-columns: 1fr; gap: 4px; min-height: 52px; padding: 7px 9px; border-right: 0; border-left: 0; border-radius: 5px; }
  .home-adventurer-presence > strong { font-size: .63rem; }
  .home-adventurer-list { gap: 11px; padding-bottom: 1px; }
  .home-adventurer { font-size: .61rem; }
  .adventurer-card-dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .adventurer-card-dialog > header { grid-template-columns: minmax(0, 1fr) 40px; min-height: 72px; padding: 9px 12px; }
  .adventurer-card-title-mark { gap: 9px; }
  .adventurer-card-title-mark > .abyss-mechanism-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .adventurer-card-title-mark .abyss-mechanism-gear { width: 35px; height: 35px; }
  .adventurer-card-title-mark .abyss-mechanism-crystal { width: 14px; height: 14px; }
  .adventurer-card-dialog > header h2 { font-size: 1rem; }
  .adventurer-card-archive { display: none; }
  .adventurer-card-content { padding: 9px; }
  .adventurer-card-records > div { min-width: 62px; padding-inline: 6px; }
  .adventurer-card-identity-name { padding-inline: 9px; }
  .adventurer-card-identity-name small { font-size: .36rem; }
  .adventurer-card-identity-name strong { font-size: .9rem; }
  .adventurer-card-selector .party-member-button { grid-template-columns: 10px 38px minmax(0, 1fr); gap: 4px; min-height: 62px; padding: 5px 4px; }
  .adventurer-card-selector .party-member-thumb, .adventurer-card-selector .party-member-thumb .actor-image { width: 38px; height: 46px; }
  .adventurer-card-member-index { font-size: .43rem; }
  .adventurer-card-build { padding: 9px; }
  .adventurer-card-build .profile-portrait { height: 210px; }
  .adventurer-card-build .profile-portrait .actor-image { height: 204px; max-width: 75%; }
  .adventurer-card-portrait-shell::before { width: 112px; height: 112px; }
  .adventurer-card-portrait-plate { right: 14px; bottom: 11px; left: 14px; padding-inline: 9px; }
  .adventurer-card-build .hero-equipped-list { column-gap: 5px; padding-inline: 4px; }
  .adventurer-card-loadout .hero-equipped-slot { padding-inline: 2px; }
  .adventurer-card-build .hero-command-list { gap: 4px; }
  .adventurer-card-build .hero-command-slot { grid-template-columns: 10px 20px minmax(0, 1fr); gap: 3px; min-height: 40px; padding: 4px 3px; }
  .adventurer-card-build .hero-command-slot strong { font-size: .58rem; }
  .adventurer-card-stat { grid-template-columns: 18px minmax(0, 1fr); gap: 2px; min-height: 48px; padding: 5px 3px; }
  .adventurer-card-stat .stat-label { font-size: .46rem; }
  .adventurer-card-stat strong { font-size: .74rem; }
  .home-service-grid { gap: 6px; }
  .home-service-card { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 7px; min-height: 68px; padding: 7px; }
  .home-service-portrait, .home-service-symbol { width: 42px; height: 42px; }
  .home-service-portrait .actor-image { width: 39px; height: 39px; }
  .home-service-icon { width: 31px; height: 31px; }
  .home-service-copy strong { font-size: .75rem; }
  .home-service-copy small { font-size: .4rem; }
  .home-service-copy em { font-size: .48rem; }
  .home-party-stage { --party-offset: clamp(92px, 28vw, 116px); height: 225px; border-right: 0; border-left: 0; border-radius: 7px; }
  .hero-equipment-panel { width: calc(100% + 24px); margin-right: -12px; margin-left: -12px; padding: 0 12px 16px; border-right: 0; border-left: 0; border-radius: 0; }
  .equipment-party-stage { width: calc(100% + 24px); margin: 0 -12px 12px; border: 0; border-radius: 0; }
  .home-party-heading { top: 10px; left: 12px; }
  .home-party-heading strong { font-size: .84rem; }
  .home-party-member { bottom: 39px; width: 128px; height: 160px; }
  .home-party-arrow { top: 45%; width: 30px; height: 37px; font-size: 1.5rem; }
  .home-party-arrow-left { left: 5px; }
  .home-party-arrow-right { right: 5px; }
  .home-party-caption { min-height: 37px; font-size: .63rem; }
  .home-party-caption strong { font-size: .77rem; }
  .home-party-caption small { display: none; }
  .home-hero { padding: 13px 12px; border-radius: 7px; }
  .home-action-heading { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px; margin-bottom: 9px; }
  .home-action-heading > span { width: 30px; height: 30px; }
  .home-action-icon { width: 23px; height: 23px; }
  .home-action-heading strong { font-size: .76rem; }
  .home-action-heading > b { padding: 3px 5px; font-size: .48rem; }
  .home-hero-copy h1 { font-size: clamp(1rem, 5vw, 1.28rem); }
  .home-hero-copy > p:not(.home-alert) { margin-bottom: 9px; font-size: .61rem; line-height: 1.5; }
  .home-alert { margin-bottom: 7px; font-size: .59rem; }
  .home-hero-actions { gap: 5px; }
  .home-hero-actions button { min-width: 0; min-height: 39px; padding: 5px 6px; font-size: .62rem; }
  .home-hero-actions .button-icon { width: 20px; height: 20px; }
  .home-overview-grid { gap: 8px; }
  .home-overview-card { min-height: 198px; padding: 9px; }
  .home-card-heading { grid-template-columns: 29px minmax(0, 1fr); gap: 6px; margin-bottom: 7px; }
  .home-card-heading > span:first-child { width: 29px; height: 29px; }
  .home-card-heading > span > img, .home-card-icon { width: 22px; height: 22px; }
  .home-card-heading h2 { font-size: .82rem; line-height: 1.2; }
  .home-card-heading > b { grid-column: 1 / -1; margin-top: -3px; font-size: .51rem; justify-self: end; }
  .home-floor-progress { gap: 5px; margin: 4px 0 9px; }
  .home-detail-list { gap: 5px; margin-bottom: 9px; }
  .home-detail-list > div { display: grid; gap: 2px; padding-bottom: 5px; }
  .home-detail-list dt, .home-detail-list dd { font-size: .55rem; }
  .home-detail-list dd { text-align: left; }
  .home-card-link { min-height: 35px; padding: 6px 7px; font-size: .58rem; }
  .home-arena-ratings { gap: 4px; }
  .home-arena-ratings > div { padding: 6px; }
  .home-arena-ratings span { font-size: .47rem; }
  .home-arena-ratings strong { font-size: .92rem; }
  .home-loadout-body { gap: 8px; }
  .home-equipped-icons { gap: 3px; }
  .home-equipped-icons > span { border-radius: 5px; }
  .home-storage-summary { padding: 6px 7px; }
  .home-status-list { margin-bottom: 8px; }
  .home-status-list > div { grid-template-columns: 6px minmax(0, 1fr); gap: 3px 5px; padding: 5px 1px; }
  .home-status-list i { grid-row: 1 / 3; width: 6px; height: 6px; }
  .home-status-list span { font-size: .5rem; }
  .home-status-list strong { font-size: .54rem; text-align: left; }
  .explore-rest-screen { gap: 10px; }
  .rest-hero { min-height: 520px; padding: 25px 20px 20px; border-right: 0; border-left: 0; border-radius: 7px; background-image: linear-gradient(90deg, rgb(5 8 11 / 92%) 0%, rgb(5 8 11 / 65%) 48%, rgb(5 8 11 / 8%) 78%), linear-gradient(0deg, rgb(5 7 8 / 76%) 0%, transparent 52%), url("/images/background/rest-point-v1.webp"); background-position: 57% center; }
  .rest-hero::before { inset: 9px; }
  .rest-hero::after { right: 20px; bottom: 15px; left: auto; }
  .rest-hero-copy { width: 100%; min-height: 475px; }
  .rest-title { font-size: clamp(2.05rem, 10vw, 2.7rem); }
  .rest-lead { max-width: 78%; font-size: .79rem; }
  .rest-divider { width: 68%; margin: 14px 0; }
  .rest-description { max-width: 76%; font-size: .78rem; line-height: 1.75; }
  .rest-quote { max-width: 72%; margin-top: 11px; margin-left: 8px; font-size: .68rem; }
  .rest-primary-button { width: min(78%, 310px); min-height: 62px; margin-bottom: 3px; padding: 8px 10px; font-size: .98rem; }
  .rest-quick-actions { gap: 5px; }
  .rest-quick-action { min-height: 96px; padding: 7px 3px; gap: 3px; }
  .rest-quick-action img, .rest-action-icon { width: 34px; height: 34px; }
  .rest-action-icon { font-size: 1.55rem; line-height: 34px; }
  .rest-quick-action strong { font-size: .73rem; }
  .rest-quick-action small { font-size: .54rem; }
  .rest-dashboard { gap: 10px; }
  .rest-card { padding: 13px; }
  .rest-card-heading { margin-bottom: 10px; }
  .rest-card-heading h2 { font-size: 1.14rem; }
  .consumable-slot { min-height: 72px; }
  .consumable-stock-row { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  .consumable-stock-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consumable-slot-guide { align-items: flex-start; flex-direction: column; }
  .inventory-item-card { grid-template-columns: 58px minmax(0, 1fr); gap: 9px; padding: 10px; }
  .inventory-item-visual { width: 56px; height: 56px; }
  .inventory-item-icon { width: 52px; height: 52px; }
  .inventory-item-action { grid-column: 1 / -1; }
  .inventory-item-use { min-height: 42px; }
  .floor-directory summary { min-height: 58px; }
  .equipment-layout, .forge-grid, .forge-selection-grid { grid-template-columns: 1fr; }
  .hero-equipment-summary { grid-template-columns: 1fr; gap: 8px; }
  .hero-command-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-command-slot { grid-template-columns: 12px 20px minmax(0, 1fr); gap: 4px; padding: 4px; }
  .hero-command-slot .command-icon { width: 20px; height: 20px; }
  .profile-portrait { height: 180px; }
  .profile-portrait .actor-image { height: 170px; max-width: 150px; }
  .profile-background-backdrop { align-items: end; padding: 4px 4px 0; }
  .profile-background-dialog { width: 100%; max-height: min(78dvh, 650px); padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 12px 12px 0 0; }
  .profile-background-grid { grid-template-columns: 1fr; }
  .profile-background-option { grid-template-columns: 96px minmax(0, 1fr); }
  .profile-background-option img { width: 96px; height: 72px; }
  .stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .stat-tip-trigger { grid-template-columns: 18px minmax(0, 1fr); gap: 2px; min-height: 48px; padding: 5px 3px; }
  .stat-icon, .stat-icon-placeholder { width: 18px; height: 18px; }
  .stat-tip-trigger .stat-label { padding-right: 5px; font-size: .46rem; }
  .stat-tip-trigger strong { font-size: .74rem; }
  .stat-tip-cue { top: 2px; right: 2px; font-size: .44rem; transform: none; }
  .command-register { grid-template-columns: 1fr; }
  .command-slot-trigger { min-height: 62px; }
  .command-picker-backdrop { align-items: end; padding: 4px 4px 0; }
  .command-picker-dialog { width: 100%; max-height: min(82dvh, 720px); padding: 15px 12px calc(15px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 13px 13px 0 0; }
  .command-picker-option { min-height: 64px; }
  .build-preset-list { grid-template-columns: 1fr; }
  .build-preset-apply-backdrop { align-items: end; padding: 4px 4px 0; }
  .build-preset-apply-dialog { width: 100%; max-height: min(84dvh, 760px); padding: 16px 13px calc(16px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 12px 12px 0 0; }
  .build-preset-apply-changes li { grid-template-columns: 76px minmax(0, 1fr); }
  .build-preset-apply-actions { grid-template-columns: 1fr; }
  .build-preset-delete-backdrop { align-items: end; padding: 4px 4px 0; }
  .build-preset-delete-dialog { width: 100%; padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 12px 12px 0 0; }
  .build-preset-delete-actions { grid-template-columns: 1fr; }
  .build-preset-icon-backdrop { align-items: end; padding: 4px 4px 0; }
  .build-preset-icon-dialog { width: 100%; padding: 16px 13px calc(16px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 12px 12px 0 0; }
  .market-sell-row { grid-template-columns: 1fr auto; }
  .market-sell-row span { grid-column: 1 / -1; }
  .expedition-readonly-notice { display: grid; gap: 2px; margin-bottom: 8px; padding: 7px 9px; font-size: .64rem; }
  .setting-row { grid-template-columns: 1fr; gap: 8px; padding: 11px 0 13px; }
  .setting-choices { grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .setting-choices button { min-width: 0; min-height: 42px; padding-right: 7px; padding-left: 7px; }
  .character-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .character-option { padding: 5px 4px 6px; }
  .character-settings-current { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 9px; padding: 8px; }
  .character-settings-portrait, .character-settings-portrait img { width: 62px; height: 62px; }
  .character-settings-current .secondary-button { min-width: 116px; min-height: 42px; padding-right: 9px; padding-left: 9px; }
  .character-picker-backdrop { padding: 12px; }
  .character-picker-dialog { width: 100%; height: calc(100dvh - 24px); padding: 14px 12px; }
  .character-picker-title > .abyss-mechanism-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .character-picker-title .abyss-mechanism-gear { width: 32px; height: 32px; }
  .character-picker-title .abyss-mechanism-crystal { width: 12px; height: 12px; }
  .character-picker-title h2 { font-size: 1rem; }
  .character-picker-count { padding-left: 8px; }
  .character-picker-count span { display: none; }
  .character-picker-dialog-actions { justify-content: space-between; gap: 10px; padding-bottom: env(safe-area-inset-bottom); }
  .character-picker-dialog-actions .secondary-button { min-width: 132px; }
  .settings-reset-backdrop { align-items: end; padding: 4px 4px 0; }
  .settings-reset-dialog { width: 100%; padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 12px 12px 0 0; }
  .settings-reset-actions { grid-template-columns: 1fr; }
  .arena-main-heading { align-items: start; flex-wrap: wrap; }
  .arena-main-heading > .arena-title { flex: 1 1 170px; }
  .arena-season-end { padding-top: 5px; }
  .arena-rate-card { min-height: 112px; padding: 10px; }
  .arena-rate-card strong { font-size: clamp(1.18rem, 5vw, 1.42rem); }
  .arena-rate-card small { font-size: .55rem; }
  .arena-season-line { flex-wrap: wrap; }
  .arena-stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .arena-stat-grid > div { padding: 6px 2px; }
  .arena-stat-grid span { font-size: .48rem; }
  .arena-stat-grid strong { font-size: .65rem; }
  .arena-equipment-item { padding: 8px; }
  .arena-slot-list { gap: 3px; }
  .arena-slot-list > span { min-height: 32px; gap: 3px; padding: 3px; }
  .arena-slot-list > span > b { flex-basis: 17px; height: 17px; }
  .arena-defense-actions, .arena-opponent-actions { grid-template-columns: 1fr; }
  .arena-challenge-backdrop, .arena-forfeit-backdrop { align-items: end; padding: 4px 4px 0; }
  .arena-challenge-dialog { width: 100%; padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 12px 12px 0 0; }
  .arena-challenge-actions { grid-template-columns: 1fr; }
  .crystal-usage-grid { grid-template-columns: 1fr; }
  .crystal-balance-deck { grid-template-columns: 1fr; gap: 12px; }
  .crystal-command-title > .abyss-mechanism-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .crystal-command-title .abyss-mechanism-gear { width: 34px; height: 34px; }
  .crystal-command-title .abyss-mechanism-crystal { width: 13px; height: 13px; }
  .crystal-wallet-status { display: none; }
  .crystal-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .crystal-package { padding: 10px 7px 8px; }
  .crystal-package strong { font-size: .9rem; }
  .crystal-package button { min-height: 42px; padding: 8px 6px; }
  .crystal-confirm-backdrop { align-items: center; padding: 12px; }
  .crystal-confirm-dialog { width: min(430px, 100%); max-height: calc(100dvh - 24px); padding: 16px 14px; border: 1px solid #527988; border-radius: 12px; }
  .crystal-confirm-actions { grid-template-columns: 1fr; }
  .character-shop-title { grid-template-columns: 1fr; gap: 11px; }
  .character-shop-wallet { grid-template-columns: 30px minmax(0, 1fr); width: 100%; }
  .character-shop-wallet > img { width: 30px; height: 30px; }
  .character-shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .character-shop-product { gap: 6px; padding: 7px; }
  .character-shop-product-image { height: 126px; }
  .character-shop-product-image > img { height: 121px; }
  .character-shop-product-copy strong { font-size: .68rem; }
  .character-shop-product-copy small { font-size: .5rem; }
  .character-shop-product > button { min-height: 39px; padding: 5px 4px; font-size: .58rem; }
  .character-shop-confirm-backdrop { align-items: center; padding: 12px; }
  .character-shop-confirm-dialog { width: min(430px, 100%); max-height: calc(100dvh - 24px); padding: 16px 14px; border: 1px solid #765b98; border-radius: 12px; }
  .character-shop-confirm-actions { grid-template-columns: 1fr; }
  .limited-abyss-title { grid-template-columns: 46px minmax(0, 1fr); gap: 9px; }
  .limited-abyss-title > span { width: 46px; height: 46px; }
  .limited-abyss-icon { width: 34px; height: 34px; }
  .limited-abyss-title > b { grid-column: 1 / -1; justify-self: start; }
  .limited-abyss-schedule { grid-template-columns: 1fr; }
  .limited-abyss-supply-actions, .limited-abyss-command-grid { grid-template-columns: 1fr; }
  .limited-abyss-item-slots { grid-template-columns: 1fr; }
  .crystal-audit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forge-picker-option-main { flex-wrap: wrap; }
  .forge-picker-option-main small { width: 100%; margin-left: 0; }
  .forge-picker-option-skills { grid-template-columns: 1fr; }
  .item-forge-shortcuts > div { gap: 4px; }
  .forge-shortcut-button { padding-right: 4px; padding-left: 4px; font-size: .65rem; }
  .core-operation-switch { gap: 6px; }
  .core-operation-option { grid-template-columns: 29px minmax(0, 1fr); gap: 3px 7px; min-height: 74px; padding: 8px; }
  .core-operation-mark { width: 28px; height: 28px; font-size: .88rem; }
  .core-operation-option strong { font-size: .74rem; }
  .core-operation-option small { font-size: .58rem; }
  .core-operation-option em { font-size: .54rem; }
  .tempering-stat-grid { grid-template-columns: 1fr; }
  .tempering-preview-grid { grid-template-columns: 1fr; }
  .tempering-preview-grid div:nth-child(odd) { border-right: 0; }
  .core-inheritance-steps { gap: 3px; font-size: .58rem; }
  .core-inheritance-steps > span { flex-direction: column; gap: 2px; min-height: 46px; padding: 4px 2px; }
  .core-inheritance-target-detail { grid-template-columns: 1fr; gap: 9px; padding: 11px; }
  .core-inheritance-target-detail > button { justify-self: start; }
  .core-inheritance-target-stats, .core-inheritance-target-skills { grid-column: 1; }
  .core-choice-grid { grid-template-columns: 1fr; }
  .forge-confirm-backdrop { align-items: end; padding: 4px 4px 0; }
  .forge-confirm-dialog { width: 100%; max-height: calc(100dvh - 12px); padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 12px 12px 0 0; }
  .forge-confirm-actions { grid-template-columns: 1fr; }
  .core-apply-confirm-backdrop { align-items: center; padding: 12px; }
  .core-apply-confirm-dialog { width: min(460px, 100%); max-height: calc(100dvh - 24px); padding: 16px 14px; border: 1px solid #8973ac; border-radius: 12px; }
  .core-apply-confirm-actions { grid-template-columns: 1fr; }
  .retreat-confirm-backdrop { align-items: end; padding: 4px 4px 0; }
  .retreat-confirm-dialog { width: 100%; max-height: calc(100dvh - 12px); padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 12px 12px 0 0; }
  .retreat-confirm-actions { grid-template-columns: 1fr; }
  .expedition-result-backdrop { padding: 10px; }
  .expedition-result-dialog { width: min(480px, 100%); max-height: calc(100dvh - 20px); padding: 17px 14px; }
  .expedition-result-actions { bottom: -17px; margin: 14px -14px -17px; padding: 9px 14px calc(17px + env(safe-area-inset-bottom)); }
  .battle-log-backdrop { align-items: end; padding: 4px 4px 0; }
  .battle-log-dialog { width: 100%; height: min(82dvh, 720px); max-height: calc(100dvh - 8px); padding: 15px 12px calc(15px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 12px 12px 0 0; }
  .battle-item-backdrop { align-items: end; padding: 4px 4px 0; }
  .battle-item-dialog { width: 100%; max-height: min(78dvh, 620px); padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 12px 12px 0 0; }
  .route-choice-backdrop { place-items: center; padding: 10px; }
  .route-choice-panel { width: min(100%, 620px); max-height: calc(100dvh - 20px); padding: 16px 12px; border-radius: 12px; }
  .battle-log-history { height: auto; min-height: 0; }
  .equip-confirm-backdrop { align-items: end; padding: 4px 4px 0; }
  .equip-confirm-dialog { width: 100%; max-height: calc(100dvh - 8px); padding: 15px 13px calc(15px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 12px 12px 0 0; }
  .equip-confirm-actions { bottom: calc(-15px - env(safe-area-inset-bottom)); margin: 0 -13px calc(-15px - env(safe-area-inset-bottom)); padding: 10px 13px calc(15px + env(safe-area-inset-bottom)); }
  .equipment-extraction-backdrop { place-items: center; padding: 12px; }
  .equipment-extraction-dialog { width: min(440px, 100%); max-height: calc(100dvh - 24px); padding: 15px 13px calc(15px + env(safe-area-inset-bottom)); }
  .equipment-extraction-actions { grid-template-columns: 1fr; }
  .core-extraction-reveal-backdrop { padding: 8px; }
  .core-extraction-reveal-cut { max-height: calc(100dvh - 16px); padding: 16px 13px calc(16px + env(safe-area-inset-bottom)); }
  .core-extraction-reveal-stage { width: 112px; height: 112px; }
  .core-extraction-reveal-stage::before { width: 82px; height: 82px; }
  .core-extraction-reveal-ring { width: 88px; height: 88px; }
  .core-extraction-reveal-equipment-icon { width: 80px; height: 80px; }
  .core-extraction-reveal-output.single .core-extraction-reveal-core { width: 80px; height: 80px; flex-basis: 80px; }
  .core-extraction-reveal-count { right: 5px; bottom: 7px; }
  .core-inheritance-steps { gap: 3px; font-size: .56rem; }
  .core-inheritance-steps > span { gap: 3px; min-height: 31px; padding: 4px 2px; }
  .core-inheritance-steps b { width: 17px; height: 17px; font-size: .52rem; }
  .core-inheritance-target-detail { grid-template-columns: 1fr; gap: 8px; padding: 11px; }
  .core-inheritance-target-detail > button { justify-self: start; }
  .core-inheritance-target-stats, .core-inheritance-target-skills { grid-column: 1; }
  .core-choice-grid { grid-template-columns: 1fr; }
  .command-dock { bottom: calc(var(--mobile-navigation-height) + var(--mobile-chat-peek-height)); padding: 7px 8px; }
  body.battle-active { height: 100dvh; min-height: 0; overflow: hidden; }
  body.battle-active main { height: calc(100dvh - var(--app-header-height) - var(--mobile-navigation-height) - var(--mobile-chat-peek-height)); padding: 6px 8px; overflow: hidden; }
  body.battle-active.app-update-available main { height: calc(100dvh - var(--app-header-height) - var(--mobile-navigation-height) - var(--mobile-chat-peek-height) - var(--app-update-flow-space)); }
  body.battle-active .battle-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; padding-bottom: 74px; overflow: visible; }
  body.battle-active .battle-shell.phase-paused:not(.showing-result) { padding-bottom: 94px; }
  body.battle-active .battle-shell.showing-result { padding-bottom: 0; }
  body.battle-active .battle-header { flex: 0 0 auto; margin-bottom: 0; }
  body.battle-active .battle-header .eyebrow { display: none; }
  body.battle-active .battle-header h2 { gap: 5px; font-size: .88rem; line-height: 1.1; }
  body.battle-active .battle-header .tag { padding: 3px 7px; font-size: .56rem; }
  body.battle-active .battle-mode-label { font-size: .5em; }
  body.battle-active .battle-round-label { font-size: .47em; }
  body.battle-active .battle-turn-order { flex: 0 0 auto; grid-template-columns: 58px minmax(0, 1fr); min-height: 48px; margin-bottom: 4px; padding: 3px 5px; }
  body.battle-active .battle-turn-order-heading strong { font-size: .59rem; }
  body.battle-active .battle-turn-order-heading span { font-size: .45rem; }
  body.battle-active .battle-turn-separator { flex-basis: 8px; font-size: .49rem; }
  body.battle-active .battle-turn-actor { flex-basis: 43px; grid-template-rows: 27px 10px; }
  body.battle-active .battle-turn-portrait,
  body.battle-active .battle-turn-portrait .actor-image { width: 27px; height: 27px; }
  body.battle-active .battle-utility-controls { grid-template-columns: 32px auto 45px auto; gap: 3px; }
  body.battle-active .battle-utility-controls.arena-duel-utility { grid-template-columns: auto 45px auto; }
  body.battle-active .battle-loot-button { width: 32px; min-height: 30px; }
  body.battle-active .battle-loot-icon { width: 22px; height: 22px; }
  body.battle-active .battle-auto-settings-button { min-height: 30px; width: 27px; }
  body.battle-active .battle-utility-controls .battle-auto-button { min-height: 30px; padding: 1px 5px; }
  body.battle-active .battle-auto-button strong { font-size: .62rem; }
  body.battle-active .battle-auto-button span { font-size: .48rem; }
  body.battle-active .battle-utility-controls .battle-speed-trigger { width: 45px; min-height: 30px; padding: 1px 4px; font-size: .63rem; }
  body.battle-active .battle-utility-controls .battle-retreat-button { min-height: 30px; padding: 1px 2px; font-size: .56rem; }
  body.battle-active .arena { display: flex; flex: 1 1 auto; flex-direction: column; width: calc(100% + 16px); min-height: 0; margin: 0 -8px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  body.battle-active .combatants { flex: 0 0 auto; min-height: 0; gap: 8px; padding-top: 2px; }
  body.battle-active .battle-shell[class*="battle-zone-"] .combatants { --battle-phase-bg-y: 58%; margin: 0; padding: 4px 8px 6px; border-radius: 0; background-position: center, center, 50% var(--battle-phase-bg-y); background-size: cover, cover, auto 106%; }
  body.battle-active .battle-situation-grid { grid-template-columns: minmax(88px, .7fr) minmax(0, 1.3fr); gap: 8px; margin-top: 3px; }
  body.battle-active .combatant.player, body.battle-active .enemy { padding: 3px; }
  body.battle-active .actor-mark { width: 82px; height: 86px; margin-bottom: 3px; }
  body.battle-active .actor-mark-player .actor-image { height: 82px; }
  body.battle-active .enemy-target-marker { height: 10px; font-size: .58rem; }
  body.battle-active .combatant-heading { grid-template-rows: 10px 15px; height: 25px; }
  body.battle-active .combatant-heading .actor-name { height: 15px; line-height: 15px; }
  body.battle-active .enemy .actor-mark { width: 82px; max-width: none; height: 86px; }
  body.battle-active .enemy .actor-image,
  body.battle-active .actor-mark-enemy .actor-image { height: 82px; }
  body.battle-active .enemy.boss .actor-mark { width: min(100%, 100px); height: 86px; }
  body.battle-active .enemy.boss .actor-image { height: 82px; }
  body.battle-active .enemy .actor-name { font-size: .68rem; }
  body.battle-active .battle-shell[class*="battle-zone-"] .resource-meter { gap: 2px; margin-bottom: 1px; font-size: .52rem; }
  body.battle-active .battle-shell[class*="battle-zone-"] .combatant .resource-meter { grid-template-columns: 12px clamp(52px, 14vw, 68px) max-content; }
  body.battle-active .battle-shell[class*="battle-zone-"] .enemy-resource-meter { grid-template-columns: minmax(0, 1fr); }
  body.battle-active .battle-shell[class*="battle-zone-"] .bar-icon { width: 12px; height: 12px; }
  body.battle-active .battle-shell[class*="battle-zone-"] .bar { height: 6px; }
  body.battle-active .battle-status-stack { margin-top: 4px; }
  body.battle-active .battle-condition-strip,
  body.battle-active .telegraph { height: 26px; min-height: 26px; padding: 3px 7px; }
  body.battle-active .telegraph-entry { font-size: .6rem; }
  body.battle-active .battle-info-panel { flex: 1 1 auto; min-height: 104px; margin-top: 0; border-right: 0; border-left: 0; border-radius: 0; }
  body.battle-active .battle-info-tabs,
  body.battle-active .battle-info-tab { min-height: 32px; }
  body.battle-active .battle-info-tab { padding: 3px; font-size: .61rem; }
  body.battle-active .battle-info-content > .battle-log { flex: 1 1 auto; height: 100%; min-height: 0; max-height: none; }
  body.battle-active .battle-status-overview { padding: 6px; }
  body.battle-active .battle-log-heading { flex: 0 0 auto; margin-top: 4px; padding: 5px 7px; }
  body.battle-active .battle-log { flex: 1 1 auto; height: auto; min-height: 90px; overflow-y: auto; }
  body.battle-active .battle-current-log { flex: 0 0 auto; min-height: 50px; max-height: min(82px, 18dvh); }
  body.battle-active .battle-log-history { min-height: 0; }
  body.battle-active .post-battle-actions { flex: 0 0 auto; margin-top: 6px; padding-top: 6px; }
  body.battle-active .phase-result-actions { margin-top: 4px; padding-top: 4px; }
  body.battle-active .inventory-capacity-notice { flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin: 5px 0 0; padding: 6px 8px; }
  body.battle-active .inventory-capacity-notice button { width: auto; min-height: 34px; }
  body.battle-active .result-actions-only { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr)); gap: 6px; }
  body.battle-active .result-actions-only .battle-result-button { min-width: 0; min-height: 48px; padding: 6px 5px; font-size: .72rem; }
  body.battle-active .result-actions-only:has(> .battle-result-button:nth-child(2):last-child) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  body.battle-active .result-actions-only:has(> .battle-result-button:only-child) { grid-template-columns: minmax(0, 1fr); }
  body.battle-active .result-actions-only .battle-floor-advance-status { min-height: 48px; padding: 5px 4px; gap: 4px; }
  body.battle-active .result-actions-only .battle-floor-advance-status > .abyss-mechanism-mark { width: 29px; height: 29px; flex-basis: 29px; }
  body.battle-active .result-actions-only .battle-floor-advance-status .abyss-mechanism-gear { width: 25px; height: 25px; }
  body.battle-active .result-actions-only .battle-floor-advance-status strong { font-size: .58rem; }
  body.battle-active .result-actions-only .battle-floor-advance-status small { font-size: .44rem; }
  body.battle-active .result-actions-only .battle-result-button[data-action="retreat"] { white-space: nowrap; }
  body.battle-active .result-actions-only .loot-select-button .button-icon { width: 15px; height: 15px; margin-right: 2px; }
  body.battle-active .result-actions-only .loot-select-button span { display: block; margin: 1px 0 0; font-size: .56rem; }
}

/* Mobile modal alignment: keep every dialog centered and clear of persistent bottom UI. */
.pwa-install-guide { align-items: center; }

@media (max-width: 700px) {
  :is(
    .inventory-filter-backdrop,
    .profile-background-backdrop,
    .command-picker-backdrop,
    .build-preset-apply-backdrop,
    .build-preset-delete-backdrop,
    .build-preset-icon-backdrop,
    .settings-reset-backdrop,
    .arena-challenge-backdrop,
    .arena-forfeit-backdrop,
    .forge-confirm-backdrop,
    .retreat-confirm-backdrop,
    .battle-log-backdrop,
    .battle-item-backdrop,
    .equip-confirm-backdrop
  ) {
    place-items: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  :is(
    .inventory-filter-dialog,
    .profile-background-dialog,
    .command-picker-dialog,
    .build-preset-apply-dialog,
    .build-preset-delete-dialog,
    .build-preset-icon-dialog,
    .settings-reset-dialog,
    .arena-challenge-dialog,
    .forge-confirm-dialog,
    .retreat-confirm-dialog,
    .battle-log-dialog,
    .battle-item-dialog,
    .equip-confirm-dialog
  ) {
    width: 100%;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 16px 14px;
    border-right: 1px solid var(--accent-border);
    border-bottom: 1px solid var(--accent-border);
    border-left: 1px solid var(--accent-border);
    border-radius: 12px;
  }

  .equip-confirm-actions {
    bottom: -16px;
    margin: 0 -14px -16px;
    padding: 10px 14px 16px;
  }
}

@media (max-width: 390px), (max-height: 700px) {
  .site-header { grid-template-columns: 34px minmax(50px, 1.1fr) minmax(60px, .9fr) minmax(50px, .7fr) 30px; gap: 2px; height: var(--app-header-height); min-height: var(--app-header-height); padding: 4px max(4px, env(safe-area-inset-right)) 4px max(4px, env(safe-area-inset-left)); }
  .notification-button { width: 30px; height: 34px; padding: 6px 4px; }
  .eyebrow { display: none; }
  .navigation button { font-size: .57rem; }
  .nav-icon { width: 32px; height: 32px; }
  .home-party-member { height: 150px; }
  .rest-hero { min-height: 490px; padding: 21px 16px 17px; background-position: 59% center; }
  .rest-hero-copy { min-height: 450px; }
  .rest-overline { font-size: .6rem; }
  .rest-title { font-size: 2rem; }
  .rest-description { max-width: 78%; font-size: .72rem; }
  .rest-quote { font-size: .63rem; }
  .rest-primary-button { min-height: 58px; font-size: .9rem; }
  .rest-quick-action { min-height: 88px; }
  .rest-quick-action img, .rest-action-icon { width: 30px; height: 30px; }
  .rest-action-icon { line-height: 30px; }
  .rest-quick-action strong { font-size: .66rem; }
  .rest-quick-action small { font-size: .49rem; }
  .arena { min-height: 440px; padding: 10px; }
  .route-choice-heading { grid-template-columns: 1fr; gap: 3px; }
  .route-choice-heading > p { font-size: .56rem; text-align: left; }
  .route-choice-grid { grid-template-columns: 1fr; gap: 6px; }
  .route-choice-card { padding: 7px 8px; }
  .route-choice-card > small, .route-choice-encounters { font-size: .54rem; }
  .route-choice-detail { font-size: .57rem; }
  .combatants { grid-template-columns: minmax(88px, .7fr) minmax(170px, 1.3fr); min-height: 170px; gap: 8px; }
  .actor-mark { width: 86px; height: 112px; font-size: 2rem; }
  .actor-mark-player .actor-image { height: 112px; }
  .enemy-line { min-height: 135px; gap: 4px; }
  .enemy { padding: 4px; }
  .enemy .actor-name { height: 16px; line-height: 16px; }
  .enemy .actor-mark { width: 82px; max-width: none; height: 91px; font-size: 1.6rem; }
  .enemy .actor-image, .actor-mark-enemy .actor-image { height: 74px; }
  .enemy.boss .actor-mark { width: min(100%, 106px); height: 91px; }
  .enemy.boss .actor-image { height: 91px; }
  .battle-log { height: clamp(190px, calc(100dvh - 445px), 400px); }
  .log-entry { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 9px 8px; }
  .command-dock { min-height: 0; padding: 6px 7px; }
  .battle-actions { gap: 5px; }
  .battle-actions.with-items { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .command-button { grid-template-rows: 22px auto auto; min-height: 60px; padding: 3px 2px; }
  .command-icon-slot { width: 22px; height: 22px; }
  .command-icon { width: 22px; height: 22px; }
  .command-symbol { height: 22px; font-size: 1.12rem; line-height: 22px; }
  .battle-actions.with-items .command-label { font-size: .65rem; }
  .battle-actions.with-items .command-meta { font-size: .52rem; }
  body.battle-active .battle-shell:not(.showing-result) { padding-bottom: 64px; }
  body.battle-active .battle-shell.phase-paused:not(.showing-result) { padding-bottom: 84px; }
  body.battle-active .battle-shell.support-targeting:not(.showing-result) { padding-bottom: 102px; }
  body.battle-active .combatant .resource-meter { grid-template-columns: 12px clamp(48px, 14vw, 60px) max-content; gap: 2px; font-size: .52rem; }
  body.battle-active .combatant .bar-resource-label { display: none; }
  body.battle-active .combatant .bar-icon { width: 13px; height: 13px; }
  body.battle-active .actor-mark { width: 68px; height: 70px; }
  body.battle-active .actor-mark-player .actor-image { height: 66px; }
  body.battle-active .enemy .actor-mark { width: 66px; max-width: none; height: 70px; }
  body.battle-active .enemy .actor-image,
  body.battle-active .actor-mark-enemy .actor-image { height: 66px; }
  body.battle-active .enemy.boss .actor-mark { width: min(100%, 82px); height: 70px; }
  body.battle-active .enemy.boss .actor-image { height: 66px; }
  body.battle-active .battle-header h2 { font-size: .8rem; }
  body.battle-active .battle-progress-title { gap: 7px; }
  body.battle-active .battle-condition-strip,
  body.battle-active .telegraph { height: 24px; min-height: 24px; padding-top: 2px; padding-bottom: 2px; }
  body.battle-active .battle-condition-label,
  body.battle-active .telegraph-label { font-size: .56rem; }
  body.battle-active .telegraph-entry { font-size: .56rem; }
  body.battle-active .battle-turn-order { grid-template-columns: 51px minmax(0, 1fr); min-height: 43px; }
  body.battle-active .battle-turn-separator { flex-basis: 7px; font-size: .45rem; }
  body.battle-active .battle-turn-actor { flex-basis: 39px; grid-template-rows: 24px 9px; padding-right: 2px; padding-left: 2px; }
  body.battle-active .battle-turn-portrait,
  body.battle-active .battle-turn-portrait .actor-image { width: 24px; height: 24px; }
  body.battle-active .battle-turn-name { font-size: .43rem; line-height: 9px; }
  body.battle-active .battle-info-tabs,
  body.battle-active .battle-info-tab { min-height: 29px; }
  body.battle-active .battle-info-tab { font-size: .56rem; }
  body.battle-active .battle-log { height: auto; min-height: 72px; }
  body.battle-active .battle-current-log { min-height: 48px; max-height: 72px; }
}

@media (max-width: 700px) and (min-height: 701px) {
  body.battle-active .combatants { flex: 0 0 clamp(176px, 24dvh, 220px); align-items: start; min-height: 176px; padding: 10px 0 6px; }
  body.battle-active .actor-mark { width: 92px; height: 96px; }
  body.battle-active .actor-mark-player .actor-image { height: 92px; }
  body.battle-active .enemy-line { align-self: stretch; align-items: start; min-height: 0; }
  body.battle-active .enemy .actor-mark { width: 90px; max-width: none; height: 96px; }
  body.battle-active .enemy .actor-image,
  body.battle-active .actor-mark-enemy .actor-image { height: 92px; }
  body.battle-active .enemy-line.single .enemy { width: min(190px, 88%); }
  body.battle-active .enemy-line.single .enemy .actor-mark { width: 108px; height: 96px; }
  body.battle-active .enemy-line.single .enemy .actor-image { height: 92px; }
  body.battle-active .battle-info-panel { flex: 1 1 auto; min-height: 104px; }
  body.battle-active .battle-current-log { flex: 1 1 auto; min-height: 0; max-height: none; }
}

.party-member-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0 0 12px; }
.party-member-selector.party-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.party-member-button { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; min-height: 58px; padding: 6px 8px; border: 1px solid var(--line); background: var(--card-dark); color: var(--muted); text-align: left; }
.party-member-button[class*="party-color-"] { border-bottom-color: var(--party-color); }
.party-member-button.active { border-color: var(--party-color, var(--accent-border-strong)); background: rgb(var(--party-color-rgb, var(--accent-rgb)) / 13%); color: var(--text); box-shadow: inset 0 -2px var(--party-color, var(--gold)); }
.party-member-thumb, .party-member-thumb .actor-image { display: block; width: 42px; height: 42px; object-fit: contain; }
.party-member-button > span:last-child { display: grid; min-width: 0; gap: 3px; }
.party-member-button strong, .party-member-button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-member-button strong { font-size: .72rem; }
.party-member-button small { font-size: .55rem; }

.battle-shell:not(.arena-duel) { --battle-meter-length: clamp(40px, 10vw, 52px); }
.battle-shell:not(.arena-duel) .combatants { grid-template-columns: minmax(150px, .9fr) minmax(180px, 1.1fr); min-height: 316px; }
.party-line { position: relative; top: 28px; min-width: 0; min-height: 262px; }
.party-line .party-member { position: absolute; width: 104px; padding: 2px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.party-line .party-member .actor-image { pointer-events: none; -webkit-tap-highlight-color: transparent; }
.party-line .party-member:focus-visible { border-radius: 7px; outline: 2px solid var(--party-color, var(--gold)); outline-offset: -2px; }
.party-line .party-member.support-target-option { border-radius: 7px; cursor: pointer; touch-action: manipulation; }
.party-line .party-member.support-target-option .actor-mark { border-radius: 50%; background: radial-gradient(ellipse at 50% 64%, rgb(var(--party-color-rgb, var(--accent-rgb)) / 35%), transparent 72%); box-shadow: inset 0 0 0 2px rgb(var(--party-color-rgb, var(--accent-rgb)) / 76%), 0 0 11px rgb(var(--party-color-rgb, var(--accent-rgb)) / 40%); }
.party-line .party-member.support-target-option:is(:hover, :focus-visible) { outline: 2px solid var(--party-color, var(--gold)); outline-offset: -2px; }
.party-line .party-member.taking-turn { z-index: 5; }
.party-line .party-member.taking-turn .actor-name { border-radius: 4px; background: rgb(var(--party-color-rgb, var(--accent-rgb)) / 40%); color: var(--selected-text); }
.party-line .party-member.taking-turn .actor-mark::before { position: absolute; z-index: 0; inset: 10% -8% 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 65%, rgb(var(--party-color-rgb, var(--accent-rgb)) / 58%), rgb(var(--party-color-rgb, var(--accent-rgb)) / 19%) 46%, transparent 72%); box-shadow: 0 0 16px rgb(var(--party-color-rgb, var(--accent-rgb)) / 28%); content: ""; pointer-events: none; }
.party-line .party-member.taking-turn .actor-mark .actor-image { position: relative; z-index: 1; filter: drop-shadow(0 0 7px rgb(var(--party-color-rgb, var(--accent-rgb)) / 60%)) drop-shadow(0 6px 6px rgb(0 0 0 / 45%)); }
.battle-acting-label { position: absolute; z-index: 3; right: 0; bottom: -7px; padding: 1px 5px; border: 1px solid var(--party-color, var(--gold)); border-radius: 4px; background: rgb(9 17 20 / 94%); color: var(--text); font-size: .5rem; font-weight: 700; line-height: 1.3; white-space: nowrap; pointer-events: none; }
.party-line .party-member.dead { opacity: .34; filter: grayscale(1); }
.party-line .party-member.dead.defeated-transition { animation: enemy-defeated calc(280ms * var(--battle-speed-factor)) ease-out both; }
.party-line .formation-front-center { z-index: 3; top: 83px; right: 0; }
.party-line .formation-rear-upper { z-index: 1; top: 20px; left: 0; }
.party-line .formation-rear-lower { z-index: 2; bottom: 0; left: 0; }
.party-line.party-count-1 .formation-front-center { top: 50%; right: auto; left: 50%; transform: translate(-50%, -50%); }
.battle-shell:not(.arena-duel) .party-member .combatant-heading { grid-template-rows: 7px 13px; height: 20px; }
.battle-shell:not(.arena-duel) .party-member .actor-name { height: 13px; font-size: .58rem; line-height: 13px; }
.battle-shell:not(.arena-duel) .party-member .actor-mark { width: 94px; height: 94px; margin-bottom: 0; }
.battle-shell:not(.arena-duel) .party-member .actor-mark-player .actor-image { height: 91px; }
.battle-shell:not(.arena-duel) .enemy-line { position: relative; top: 30px; display: grid; grid-template-columns: repeat(2, minmax(68px, 1fr)); grid-template-rows: repeat(2, 126px); align-content: end; align-items: end; gap: 0 4px; min-height: 270px; padding: 0 0 8px 18px; }
.battle-shell:not(.arena-duel) .enemy-line .enemy { align-self: end; width: 100%; padding: 1px; }
.battle-shell:not(.arena-duel) .enemy-line .enemy.selected { border-color: transparent; }
.battle-shell:not(.arena-duel) .enemy-line .formation-slot-1 { grid-area: 1 / 1; }
.battle-shell:not(.arena-duel) .enemy-line .formation-slot-2 { grid-area: 1 / 2; }
.battle-shell:not(.arena-duel) .enemy-line .formation-slot-3 { grid-area: 2 / 1; }
.battle-shell:not(.arena-duel) .enemy-line .formation-slot-4 { grid-area: 2 / 2; }
.battle-shell:not(.arena-duel) .enemy-line.formation-front-pair .formation-slot-2 { grid-area: 1 / 2 / 3 / 3; align-self: center; }
.battle-shell:not(.arena-duel) .enemy-line.formation-rear-pair .formation-slot-1 { grid-area: 1 / 1 / 3 / 2; align-self: center; }
.battle-shell:not(.arena-duel) .enemy-line.single { display: grid; grid-template: 1fr / 1fr; place-items: center; padding: 0; }
.battle-shell:not(.arena-duel) .enemy-line.single { top: 20px; }
.battle-shell:not(.arena-duel) .enemy-line.single .enemy { grid-area: 1 / 1; align-self: center; justify-self: center; width: min(132px, 86%); }
.battle-shell:not(.arena-duel) .floor-clear-notice { position: absolute; z-index: 4; top: 50%; left: 50%; display: grid; justify-items: center; gap: 5px; width: min(190px, calc(100% - 8px)); padding: 14px 8px; border: 1px solid rgb(var(--accent-rgb) / 50%); border-radius: 12px; background: rgb(var(--chrome-rgb) / 84%); box-shadow: 0 10px 26px rgb(0 0 0 / 32%), inset 0 0 18px rgb(var(--accent-rgb) / 8%); color: var(--text); text-align: center; pointer-events: none; transform: translate(-50%, -50%); }
.floor-clear-eyebrow { color: var(--gold-strong); font-size: .56rem; font-weight: 700; letter-spacing: .15em; }
.floor-clear-notice strong { font-size: clamp(.95rem, 4vw, 1.22rem); line-height: 1.25; white-space: nowrap; }
.floor-clear-crystal { display: inline-flex; align-items: center; gap: 3px; color: #a5d8ff; font-size: .65rem; font-weight: 700; white-space: nowrap; }
.floor-clear-crystal img { width: 15px; height: 15px; object-fit: contain; }
.floor-clear-next { color: var(--muted); font-size: .65rem; }
.battle-shell:not(.arena-duel) .enemy-size-compact { --enemy-art-scale: 1.08; }
.battle-shell:not(.arena-duel) .enemy-size-standard { --enemy-art-scale: 1.28; }
.battle-shell:not(.arena-duel) .enemy-size-large { --enemy-art-scale: 1.39; }
.battle-shell:not(.arena-duel) .enemy-size-giant { --enemy-art-scale: 1.47; }
.battle-shell:not(.arena-duel) .enemy .actor-mark .actor-image,
.battle-shell:not(.arena-duel) .enemy .enemy-target-corners { transform: scale(var(--enemy-art-scale, 1.28)); transform-origin: center bottom; }
.battle-shell:not(.arena-duel) .enemy .actor-mark .actor-image.enemy-companion-art { transform: scaleX(-1) scale(var(--enemy-art-scale, 1.28)); }
.battle-shell:not(.arena-duel) .enemy-line .enemy:has(.actor-image[src^="/images/enemy/020_rizel_redraw.webp"]) { --enemy-art-scale: 1.3; }
.battle-shell:not(.arena-duel) .enemy:has(.actor-image[src^="/images/enemy/020_rizel_redraw.webp"]) .battle-name-line { transform: translateY(-18px); }
.battle-shell:not(.arena-duel) .enemy-line .enemy:has(.actor-image[src^="/images/enemy/enemy_040.webp"]) { --enemy-art-scale: 1.3; }
.battle-shell:not(.arena-duel) .enemy:has(.actor-image[src^="/images/enemy/enemy_040.webp"]) .battle-name-line { transform: translateY(-18px); }
.battle-shell:not(.arena-duel) .enemy.enemy-companion-boss .battle-name-line { position: relative; z-index: 4; transform: translateY(-20px); }
.battle-shell:not(.arena-duel) .enemy .combatant-heading { position: relative; z-index: 2; grid-template-rows: 7px minmax(24px, auto); height: auto; min-height: 31px; }
.battle-shell:not(.arena-duel) .enemy .actor-name { height: auto; font-size: .52rem; line-height: 12px; }
.battle-shell:not(.arena-duel) .enemy .enemy-target-marker { height: 7px; font-size: .46rem; }
.battle-shell:not(.arena-duel) .enemy .actor-mark,
.battle-shell:not(.arena-duel) .enemy.boss .actor-mark { width: 78px; height: 68px; margin-bottom: 0; }
.battle-shell:not(.arena-duel) .enemy .actor-image,
.battle-shell:not(.arena-duel) .enemy.boss .actor-image { height: 66px; }
.battle-shell:not(.arena-duel) .enemy .resource-meter { grid-template-columns: 12px var(--battle-meter-length) max-content; width: max-content; margin-right: auto; margin-left: auto; }
.battle-shell:not(.arena-duel) .enemy .enemy-resource-meter { grid-template-columns: minmax(0, 1fr); width: min(var(--battle-meter-length), 100%); }
.battle-shell:not(.arena-duel) .enemy-resource-meter .bar-resource { display: none; }
.battle-shell:not(.arena-duel) .enemy-resource-meter .bar { height: 6px; }
.battle-shell:not(.arena-duel) .enemy-resource-meter .bar-value { font-size: .43rem; }
.battle-shell.arena-match { --arena-portrait-size: 94px; --arena-image-height: 91px; }
.battle-shell.arena-match .party-line .party-member .actor-mark,
.battle-shell.arena-match .enemy-line .enemy .actor-mark,
.battle-shell.arena-match .enemy-line .enemy.boss .actor-mark { width: var(--arena-portrait-size); height: var(--arena-portrait-size); }
.battle-shell.arena-match .party-line .party-member .actor-mark .actor-image,
.battle-shell.arena-match .enemy-line .enemy .actor-mark .actor-image { height: var(--arena-image-height); }
.battle-shell.arena-match .enemy-line .enemy .actor-mark .actor-image { transform: scaleX(-1); transform-origin: center bottom; }
.battle-shell.arena-match .enemy-line .enemy .actor-mark .actor-image.enemy-native-facing { transform: none; }
.battle-shell.arena-match .enemy-line .enemy .enemy-target-corners { transform: none; }
.vital-resource-meter { grid-template-columns: 12px minmax(48px, 1fr) max-content; width: 100%; gap: 2px; margin-bottom: 1px; }
.vital-resource-body, .vital-track { position: relative; display: block; min-width: 0; height: 7px; }
.vital-track .bar { position: absolute; inset: 0; height: 7px; }
.vital-track .barrier-overlay { z-index: 2; top: 0; height: 3px; background: transparent; pointer-events: none; }
.vital-track .barrier-overlay::-webkit-progress-bar { background: transparent; }
.vital-track .barrier-overlay::-webkit-progress-value { background: #70d6ee; box-shadow: 0 0 4px rgb(112 214 238 / 82%); }
.vital-track .barrier-overlay::-moz-progress-bar { background: #70d6ee; box-shadow: 0 0 4px rgb(112 214 238 / 82%); }
.vital-value { display: inline-flex; gap: 2px; font-size: .46rem; }
.vital-value b { color: #70d6ee; font-weight: 700; }
body.battle-active .battle-shell:not(.arena-duel) .battle-party-vitals .resource-meter { grid-column: 1 / -1; grid-template-columns: subgrid; gap: 3px; width: 100%; margin: 0; font-size: .51rem; }
body.battle-active .battle-shell:not(.arena-duel) .battle-party-vitals .bar-icon { width: 10px; height: 10px; }
.party-join-backdrop { --join-edge: color-mix(in srgb, var(--party-color, #78909c) 70%, #d8c79b); --join-light: color-mix(in srgb, var(--party-color, #78909c) 35%, #fff0d6); --join-paper: color-mix(in srgb, var(--party-color, #78909c) 22%, #e7e9df); --join-base: color-mix(in srgb, var(--party-color, #78909c) 14%, #0e1115); --join-surface: color-mix(in srgb, var(--party-color, #78909c) 22%, #101319); --join-halo: color-mix(in srgb, var(--party-color, #78909c) 55%, #dce7e8); position: fixed; z-index: 260; inset: 0; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow: hidden; background: radial-gradient(ellipse at 50% 40%, rgb(var(--party-color-rgb, 120 144 156) / 28%), rgb(3 5 8 / 95%) 75%); backdrop-filter: blur(8px); animation: party-join-backdrop-in 220ms ease-out both; }
.party-join-cutin { position: relative; isolation: isolate; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(720px, 100%); max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); overflow: hidden; border: 1px solid var(--join-edge); border-radius: 18px; background: radial-gradient(ellipse at 50% 32%, rgb(var(--party-color-rgb, 120 144 156) / 26%), transparent 60%), linear-gradient(135deg, var(--join-surface), var(--join-base) 55%, var(--join-surface)); box-shadow: 0 28px 100px rgb(0 0 0 / 75%), inset 0 0 0 5px rgb(8 11 15 / 70%), inset 0 0 0 6px rgb(var(--party-color-rgb, 120 144 156) / 22%); animation: party-join-cutin-in 440ms cubic-bezier(.2, .8, .2, 1) both; }
.party-join-cutin:focus { outline: none; }
.party-join-cutin::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 25%, rgb(var(--party-color-rgb, 120 144 156) / 8%) 45%, transparent 65%); }
.party-join-echo { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; opacity: .14; mask-image: linear-gradient(180deg, #000 8%, rgb(0 0 0 / 85%) 55%, transparent 96%); }
.party-join-echo .actor-image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 24%; transform: scale(1.3); filter: saturate(.55); }
.party-join-heading { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 28px 32px 8px; }
.party-join-overline { margin: 0; color: var(--join-light); font-size: .59rem; font-weight: 700; letter-spacing: .28em; white-space: nowrap; }
.party-join-heading-rule { width: 54px; height: 1px; background: linear-gradient(90deg, transparent, var(--join-edge)); }
.party-join-heading-rule:last-child { transform: scaleX(-1); }
.party-join-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: 0; padding: 10px 36px 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.party-join-art { position: relative; display: grid; place-items: center; min-width: 0; height: 326px; }
.party-join-art::after { content: ""; position: absolute; bottom: 0; width: 75%; height: 10%; border-radius: 50%; background: rgb(0 0 0 / 40%); filter: blur(10px); }
.party-join-halo { position: absolute; inset: -10px; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--join-halo) 15%, transparent), transparent 67%); }
.party-join-emblem { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--join-halo); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; opacity: .56; }
.party-join-emblem .emblem-node { fill: var(--join-base); }
.party-join-portrait { position: absolute; inset: 0; z-index: 1; display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; animation: party-join-hero-in 600ms 90ms cubic-bezier(.2, .8, .2, 1) both; }
.party-join-portrait .actor-image { width: 100%; height: 100%; max-height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 14px 14px rgb(0 0 0 / 50%)); }
.party-join-sparks { position: absolute; inset: 0; pointer-events: none; }
.party-join-sparks i { position: absolute; top: 24%; left: 12%; width: 4px; height: 4px; background: var(--join-light); transform: rotate(45deg); box-shadow: 0 0 10px var(--join-edge); animation: party-join-spark-in 900ms 180ms ease-out both; }
.party-join-sparks i:nth-child(2) { top: 17%; left: 81%; width: 3px; height: 3px; animation-delay: 280ms; }
.party-join-sparks i:nth-child(3) { top: 72%; left: 9%; width: 3px; height: 3px; animation-delay: 380ms; }
.party-join-sparks i:nth-child(4) { top: 65%; left: 91%; animation-delay: 480ms; }
.party-join-copy { position: relative; min-width: 0; padding: 16px 0 16px 26px; animation: party-join-copy-in 440ms 180ms ease-out both; }
.party-join-role { display: inline-block; max-width: 100%; padding: 4px 11px; border: 1px solid rgb(var(--party-color-rgb, 120 144 156) / 40%); border-radius: 3px; background: rgb(var(--party-color-rgb, 120 144 156) / 9%); color: var(--join-paper); font-size: .68rem; font-weight: 600; letter-spacing: .12em; overflow-wrap: anywhere; }
.party-join-copy h2 { margin: 13px 0 16px; color: #fff2d4; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(1.7rem, 5vw, 2.65rem); font-weight: 600; letter-spacing: .09em; line-height: 1.35; overflow-wrap: anywhere; text-shadow: 0 2px 18px rgb(223 195 124 / 15%); }
.party-join-divider { display: flex; align-items: center; gap: 8px; max-width: 140px; margin-bottom: 18px; color: var(--join-edge); }
.party-join-divider::before, .party-join-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--join-edge)); }
.party-join-divider::after { transform: scaleX(-1); }
.party-join-divider i { width: 5px; height: 5px; border: 1px solid currentColor; transform: rotate(45deg); }
.party-join-copy strong { display: block; color: var(--join-light); font-size: .81rem; font-weight: 600; letter-spacing: .08em; }
.party-join-copy p { margin: 10px 0 0; color: var(--join-paper); font-size: .75rem; line-height: 1.9; overflow-wrap: anywhere; }
.party-join-footer { position: relative; padding: 16px 36px 28px; background: transparent; }
.party-join-continue { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 12px 42px; border: 1px solid var(--join-edge); border-radius: 7px; background: linear-gradient(135deg, color-mix(in srgb, var(--party-color, #78909c) 45%, #34352c), color-mix(in srgb, var(--party-color, #78909c) 30%, #282923)); color: #fff0cb; font-size: .88rem; letter-spacing: .14em; box-shadow: inset 0 1px rgb(255 239 190 / 18%), 0 5px 16px rgb(0 0 0 / 15%); }
.party-join-continue:hover:not(:disabled) { background: linear-gradient(135deg, color-mix(in srgb, var(--party-color, #78909c) 48%, #36362b), color-mix(in srgb, var(--party-color, #78909c) 45%, #36372c)); border-color: var(--join-light); }
.party-join-continue:focus-visible { outline: 2px solid var(--join-light); outline-offset: 4px; }
.party-join-button-arrow { position: absolute; right: 18px; font-size: 1.15rem; font-weight: 400; }
body.party-join-modal-open { overflow: hidden; }
@keyframes party-join-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes party-join-cutin-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes party-join-hero-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes party-join-copy-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes party-join-spark-in { from { opacity: 0; } to { opacity: .7; } }
@media (max-width: 560px) {
  .party-join-cutin { width: min(400px, 100%); }
  .party-join-heading { gap: 12px; padding: 24px 24px 10px; }
  .party-join-heading-rule { width: 32px; }
  .party-join-stage { grid-template-columns: minmax(0, 1fr); padding: 4px 24px 20px; }
  .party-join-art { height: clamp(160px, 30dvh, 280px); width: 100%; max-width: 290px; margin: 0 auto; }
  .party-join-copy { padding: 12px 0 0; text-align: center; }
  .party-join-role { font-size: .63rem; }
  .party-join-copy h2 { margin: 10px 0 12px; font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .party-join-divider { width: 120px; margin: 0 auto 14px; }
  .party-join-copy strong { font-size: .75rem; }
  .party-join-copy p { max-width: 30em; margin: 8px auto 0; font-size: .72rem; line-height: 1.8; }
  .party-join-footer { padding: 16px 24px 24px; }
}
@media (max-height: 600px) and (min-width: 561px) {
  .party-join-heading { padding-top: 18px; }
  .party-join-stage { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); padding-top: 0; padding-bottom: 0; }
  .party-join-art { height: clamp(120px, calc(100dvh - 175px), 250px); }
  .party-join-copy { padding-top: 12px; padding-bottom: 12px; }
  .party-join-copy h2 { margin-top: 8px; margin-bottom: 10px; font-size: 1.85rem; }
  .party-join-divider { margin-bottom: 10px; }
  .party-join-copy p { line-height: 1.65; }
  .party-join-footer { padding-top: 12px; padding-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .party-join-sparks i { animation: none; opacity: .7; }
}


@media (max-width: 700px) {
  .battle-shell.arena-match { --arena-portrait-size: 84px; --arena-image-height: 81px; }
  .party-member-selector { gap: 4px; }
  .party-member-button { grid-template-columns: 32px minmax(0, 1fr); gap: 4px; min-height: 48px; padding: 4px; }
  .party-member-thumb, .party-member-thumb .actor-image { width: 30px; height: 30px; }
  .party-member-button strong { font-size: .6rem; }
  .party-member-button small { font-size: .46rem; }
  body.battle-active .battle-shell:not(.arena-duel) .combatants { flex-basis: clamp(270px, calc(35dvh + 4px), 310px); grid-template-columns: minmax(150px, 1.1fr) minmax(150px, .9fr); min-height: 270px; padding-top: 4px; }
  .party-line { top: clamp(0px, calc(32dvh - 248px), 20px); min-height: 235px; }
  .party-line .party-member { width: 92px; }
  .party-line .formation-front-center { top: 79px; }
  .party-line.party-count-3 .formation-front-center { right: 12px; }
  .party-line .formation-rear-upper { top: 24px; }
  .party-line .formation-rear-lower { bottom: 0; }
  .battle-shell:not(.arena-duel) .party-member .actor-mark { width: 84px; height: 84px; }
  .battle-shell:not(.arena-duel) .party-member .actor-mark-player .actor-image { height: 81px; }
  .battle-party-overview { grid-template-columns: minmax(48px, 60px) 12px minmax(0, 96px) max-content minmax(0, 1fr); column-gap: 4px; }
  .battle-party-row { grid-template-columns: subgrid; gap: 4px; min-height: 39px; padding: 2px 5px; }
  .battle-party-name { font-size: .57rem; }
  body.battle-active .battle-info-panel.party-overview-active.party-count-2 { min-height: 115px; }
  body.battle-active .battle-info-panel.party-overview-active.party-count-3 { min-height: 157px; }
  .battle-shell:not(.arena-duel) .enemy-line { top: 0; grid-template-columns: repeat(2, minmax(62px, 1fr)); grid-template-rows: repeat(2, 122px); min-height: 252px; padding-right: 16px; padding-left: 6px; }
  .battle-shell:not(.arena-duel) .enemy-line.single { top: 0; }
  .battle-shell:not(.arena-duel) .enemy .actor-mark,
  .battle-shell:not(.arena-duel) .enemy.boss .actor-mark { width: 72px; height: 64px; }
  .battle-shell:not(.arena-duel) .enemy .actor-image,
  .battle-shell:not(.arena-duel) .enemy.boss .actor-image { height: 62px; }
  body.battle-active .battle-info-panel { min-height: 82px; }
  body.battle-active .battle-current-log { min-height: 42px; max-height: 60px; }
}

@media (max-width: 360px) {
  .battle-shell.arena-match { --arena-portrait-size: 74px; --arena-image-height: 72px; }
  .battle-shell:not(.arena-duel) .battle-header .battle-mode-label { display: none; }
  body.battle-active .battle-shell:not(.arena-duel) .combatants { grid-template-columns: minmax(135px, 1.1fr) minmax(135px, .9fr); }
  .battle-shell:not(.arena-duel) .enemy-line { grid-template-columns: repeat(2, minmax(52px, 1fr)); padding-right: 22px; padding-left: 0; }
  .party-line .party-member { width: 82px; }
  .battle-shell:not(.arena-duel) .party-member .actor-mark { width: 74px; height: 78px; }
  .battle-shell:not(.arena-duel) .party-member .actor-mark-player .actor-image { height: 75px; }
}

@media (max-height: 700px) {
  body.battle-active .battle-shell:not(.arena-duel) .combatants { flex-basis: clamp(250px, calc(32dvh + 20px), 285px); min-height: 250px; }
  .battle-shell:not(.arena-duel) .enemy-line { top: 0; grid-template-rows: repeat(2, 118px); min-height: 244px; }
  .battle-shell:not(.arena-duel) .enemy-line.single { top: 0; }
  .party-line { top: 4px; }
}

/* GEAR ABYSS shared visual language: mechanism, abyss, deep crystal, and metal. */
.abyss-mechanism-mark { --mechanism-glow: var(--abyss-crystal-rgb); position: relative; display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border: 1px solid rgb(var(--mechanism-glow) / 42%); border-radius: 50%; background: radial-gradient(circle, rgb(var(--mechanism-glow) / 24%), rgb(var(--abyss-violet-rgb) / 10%) 52%, transparent 55%); box-shadow: 0 0 0 4px rgb(var(--mechanism-glow) / 5%), inset 0 0 13px rgb(var(--mechanism-glow) / 12%); filter: drop-shadow(0 0 10px rgb(var(--mechanism-glow) / 22%)); }
.abyss-mechanism-mark::before, .abyss-mechanism-mark::after { position: absolute; border-radius: 50%; content: ""; pointer-events: none; }
.abyss-mechanism-mark::before { inset: 5px; border: 1px dashed rgb(var(--mechanism-glow) / 40%); }
.abyss-mechanism-mark::after { right: -5px; left: -5px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--mechanism-glow) / 72%), transparent); box-shadow: 0 0 8px rgb(var(--mechanism-glow) / 48%); }
.abyss-mechanism-gear { position: absolute; width: 43px; height: 43px; object-fit: contain; opacity: .7; filter: grayscale(.18) sepia(.08); }
.abyss-mechanism-crystal { position: relative; z-index: 1; width: 18px; height: 18px; object-fit: contain; filter: drop-shadow(0 0 6px rgb(var(--mechanism-glow) / 88%)); }
.abyss-mechanism-reward, .abyss-mechanism-clear { --mechanism-glow: 225 190 100; }
.abyss-mechanism-danger, .abyss-mechanism-alert { --mechanism-glow: 223 105 100; }
.abyss-mechanism-success { --mechanism-glow: 113 204 156; }
.abyss-mechanism-descent { --mechanism-glow: 128 190 215; }
.abyss-mechanism-core { --mechanism-glow: 174 130 231; }
.abyss-mechanism-party, .abyss-mechanism-recovery { --mechanism-glow: 114 215 238; }

.abyss-framed-dialog { border-top-color: var(--gold-strong); outline: 1px solid rgb(210 226 225 / 7%); outline-offset: -6px; box-shadow: 0 28px 80px rgb(0 0 0 / 72%), 0 0 24px rgb(var(--abyss-violet-rgb) / 8%), inset 0 1px 0 rgb(255 255 255 / 9%); }
.abyss-dialog-heading { display: grid; justify-items: center; }
.abyss-dialog-heading > .abyss-mechanism-mark { width: 58px; height: 58px; margin: 0 auto 9px; }
.abyss-dialog-heading > .abyss-mechanism-mark .abyss-mechanism-gear { width: 47px; height: 47px; }
.abyss-dialog-heading > .abyss-mechanism-mark .abyss-mechanism-crystal { width: 19px; height: 19px; }

.notice.abyss-system-notice { isolation: isolate; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; overflow: hidden; border-color: #985f59; background: radial-gradient(circle at 8% 50%, rgb(211 91 86 / 16%), transparent 28%), linear-gradient(108deg, #1a1115, #21151c 65%, #110f16); box-shadow: 0 18px 52px rgb(0 0 0 / 60%), 0 0 18px rgb(217 100 95 / 13%), inset 0 1px rgb(255 255 255 / 8%); animation: abyss-notice-in 190ms ease-out; }
.notice.abyss-system-notice::after { position: absolute; z-index: -1; right: 8%; bottom: 0; left: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgb(223 105 100 / 84%), transparent); box-shadow: 0 0 9px rgb(223 105 100 / 55%); content: ""; }
.notice.abyss-system-notice.success { border-color: #4f8b75; background: radial-gradient(circle at 8% 50%, rgb(83 202 157 / 15%), transparent 28%), linear-gradient(108deg, #0e1817, #12221d 65%, #0e1114); }
.notice.abyss-system-notice.success::after { background: linear-gradient(90deg, transparent, rgb(102 218 169 / 84%), transparent); box-shadow: 0 0 9px rgb(102 218 169 / 55%); }
.abyss-system-notice .abyss-mechanism-mark { width: 36px; height: 36px; flex-basis: 36px; }
.abyss-system-notice .abyss-mechanism-gear { width: 31px; height: 31px; }
.abyss-system-notice .abyss-mechanism-crystal { width: 12px; height: 12px; }
.notice-copy { display: grid; min-width: 0; gap: 2px; }
.notice-copy small { color: #e89991; font-size: .48rem; font-weight: 800; letter-spacing: .16em; }
.notice.success .notice-copy small { color: #8bd8b8; }
.notice-copy strong { color: #f1e9e6; font-size: .74rem; line-height: 1.42; overflow-wrap: anywhere; }

.initial-loading-screen { background: radial-gradient(circle at 50% 39%, rgb(var(--abyss-crystal-rgb) / 10%), transparent 24%), radial-gradient(circle at 50% 42%, rgb(var(--abyss-violet-rgb) / 12%), transparent 42%), linear-gradient(160deg, #090d12, var(--bg) 58%, #070809); }
.initial-loading-content { position: relative; padding: 25px 18px; border-top: 1px solid rgb(var(--abyss-crystal-rgb) / 34%); border-bottom: 1px solid rgb(var(--abyss-violet-rgb) / 26%); }
.initial-loading-spinner, .maintenance-spinner { width: 68px; height: 68px; border-color: rgb(var(--abyss-crystal-rgb) / 24%); background: radial-gradient(circle, rgb(var(--abyss-crystal-rgb) / 13%), transparent 66%); box-shadow: 0 0 28px rgb(var(--abyss-crystal-rgb) / 10%); }
.initial-loading-spinner::before, .maintenance-spinner::before { inset: 2px; border: 1px dashed rgb(var(--abyss-crystal-rgb) / 46%); border-top-color: var(--gold-strong); border-right-color: var(--abyss-crystal); animation: initial-loading-spin 2.4s linear infinite; }
.initial-loading-spinner::after, .maintenance-spinner::after { inset: 10px; border-color: rgb(var(--abyss-violet-rgb) / 30%); }
.initial-loading-spinner .mechanism-gear, .maintenance-spinner .mechanism-gear { position: absolute; width: 54px; height: 54px; object-fit: contain; opacity: .68; animation: mechanism-gear-turn 5.8s linear infinite; }
.initial-loading-spinner .mechanism-crystal, .maintenance-spinner .mechanism-crystal { position: relative; z-index: 1; width: 21px; height: 21px; object-fit: contain; filter: drop-shadow(0 0 8px rgb(var(--abyss-crystal-rgb) / 88%)); animation: mechanism-crystal-pulse 1.5s ease-in-out infinite; }
.maintenance-dialog { border-top-color: var(--abyss-crystal); background: radial-gradient(circle at 50% 0, rgb(var(--abyss-crystal-rgb) / 10%), transparent 38%), linear-gradient(150deg, rgb(var(--panel-start-rgb) / 99%), rgb(var(--panel-end-rgb) / 99%)); outline: 1px solid rgb(210 226 225 / 7%); outline-offset: -6px; }
.pending-action-spinner, .button-spinner { filter: drop-shadow(0 0 3px rgb(var(--abyss-crystal-rgb) / 34%)); }
.loading { position: relative; display: grid; min-height: 150px; padding: 58px 0 24px; place-items: center; }
.loading::before { position: absolute; top: 23px; width: 34px; height: 34px; background: url("/images/ui-magitech-v1/settings.webp") center / contain no-repeat; content: ""; opacity: .58; animation: mechanism-gear-turn 4.8s linear infinite; }
.loading::after { position: absolute; top: 34px; width: 12px; height: 12px; background: url("/images/ui-magitech-v1/crystals.webp") center / contain no-repeat; content: ""; filter: drop-shadow(0 0 5px rgb(var(--abyss-crystal-rgb) / 80%)); }
.maintenance-spinner::after { position: absolute; border: 1px solid rgb(var(--abyss-violet-rgb) / 30%); border-radius: 50%; content: ""; }

.zone-entry-dialog { background: radial-gradient(circle at 50% 0, rgb(var(--abyss-crystal-rgb) / 11%), transparent 32%), linear-gradient(155deg, rgb(24 33 37 / 99%), var(--dialog) 58%); }
.zone-entry-dialog.zone-entry-boss { border-color: #a65b58; background: radial-gradient(circle at 50% 0, rgb(210 79 75 / 15%), transparent 34%), linear-gradient(155deg, rgb(38 24 26 / 99%), var(--dialog) 58%); }
.zone-entry-heading { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 8px 10px; text-align: left; }
.zone-entry-heading > .abyss-mechanism-mark { width: 42px; height: 42px; margin: 0; }
.zone-entry-heading .abyss-mechanism-gear { width: 35px; height: 35px; }
.zone-entry-heading .abyss-mechanism-crystal { width: 15px; height: 15px; }
.zone-entry-heading-copy { min-width: 0; }
.zone-entry-heading h2 { margin: 0 0 5px; font-size: clamp(1rem, 4.5vw, 1.2rem); line-height: 1.35; }
.zone-entry-heading-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: #aebfc7; font-size: .6rem; }
.zone-entry-heading > #zone-entry-description { grid-column: 1 / -1; line-height: 1.5; }
.zone-entry-heading-meta .zone-entry-boss-signal { margin: 0; }
.zone-entry-boss-signal { margin-bottom: 5px; padding: 3px 8px; border: 1px solid rgb(223 105 100 / 48%); border-radius: 99px; background: rgb(116 39 38 / 22%); color: #f1a19b; font-size: .48rem; font-weight: 900; letter-spacing: .18em; }
.boss-encounter-signal { position: absolute; z-index: 8; top: 17px; left: 50%; display: flex; width: min(225px, calc(100% - 28px)); align-items: center; gap: 10px; padding: 9px 13px; border: 1px solid rgb(223 105 100 / 62%); border-right-color: transparent; border-left-color: transparent; background: linear-gradient(90deg, transparent, rgb(39 15 20 / 94%) 14%, rgb(39 15 20 / 94%) 86%, transparent); color: #fff0ed; text-align: left; pointer-events: none; transform: translateX(-50%); animation: boss-signal-in 1.4s ease-out both; }
.boss-encounter-signal .abyss-mechanism-mark { width: 42px; height: 42px; flex-basis: 42px; }
.boss-encounter-signal .abyss-mechanism-gear { width: 35px; height: 35px; }
.boss-encounter-signal .abyss-mechanism-crystal { width: 14px; height: 14px; }
.boss-encounter-signal > span:last-child { display: grid; gap: 2px; }
.boss-encounter-signal small { color: #e98d86; font-size: .47rem; font-weight: 900; letter-spacing: .18em; }
.boss-encounter-signal strong { font-family: "Yu Mincho", serif; font-size: .86rem; letter-spacing: .08em; }
.floor-advance-content { min-width: 178px; border-color: rgb(var(--abyss-crystal-rgb) / 48%); background: radial-gradient(circle at 50% 10%, rgb(var(--abyss-crystal-rgb) / 14%), transparent 48%), rgb(7 14 23 / 92%); box-shadow: 0 10px 30px rgb(0 0 0 / 48%), 0 0 18px rgb(var(--abyss-crystal-rgb) / 8%); }
.floor-advance-content .abyss-mechanism-mark { width: 40px; height: 40px; flex-basis: 40px; margin-bottom: 3px; }
.floor-advance-content .abyss-mechanism-gear { width: 34px; height: 34px; }
.floor-advance-content .abyss-mechanism-crystal { width: 14px; height: 14px; }

.battle-shell:not(.arena-duel) .floor-clear-notice { width: min(206px, calc(100% - 8px)); padding: 13px 10px; border-color: rgb(224 190 100 / 58%); background: radial-gradient(circle at 50% 12%, rgb(224 190 100 / 15%), transparent 48%), linear-gradient(150deg, rgb(12 17 20 / 94%), rgb(var(--chrome-rgb) / 94%)); box-shadow: 0 14px 34px rgb(0 0 0 / 48%), 0 0 22px rgb(224 190 100 / 9%), inset 0 1px rgb(255 255 255 / 8%); }
.floor-clear-notice .abyss-mechanism-mark { width: 48px; height: 48px; flex-basis: 48px; margin-bottom: 2px; }
.floor-clear-notice .abyss-mechanism-gear { width: 40px; height: 40px; }
.floor-clear-notice .abyss-mechanism-crystal { width: 16px; height: 16px; }

.expedition-result-dialog { background: radial-gradient(circle at 50% 0, rgb(218 181 91 / 13%), transparent 33%), radial-gradient(circle at 100% 18%, rgb(var(--abyss-violet-rgb) / 8%), transparent 34%), linear-gradient(155deg, rgb(31 28 22 / 99%), var(--dialog) 58%); }
.expedition-result-section h3 { display: flex; align-items: center; gap: 7px; padding-bottom: 6px; border-bottom: 1px solid rgb(var(--accent-rgb) / 16%); }
.expedition-result-section h3::before { width: 13px; height: 13px; transform: rotate(45deg); border: 1px solid rgb(var(--abyss-crystal-rgb) / 56%); background: rgb(var(--abyss-crystal-rgb) / 10%); box-shadow: 0 0 8px rgb(var(--abyss-crystal-rgb) / 22%); content: ""; }
.expedition-result-chest, .expedition-result-equipment li { position: relative; overflow: hidden; }
.expedition-result-chest::after, .expedition-result-equipment li::after { position: absolute; inset: 0; background: linear-gradient(108deg, transparent 15%, rgb(255 255 255 / 8%) 48%, transparent 74%); content: ""; pointer-events: none; transform: translateX(-110%); animation: reward-metal-sweep 720ms 180ms ease-out both; }
.expedition-result-chest.rarity-epic, .expedition-result-equipment li.rarity-epic { box-shadow: inset 0 0 16px rgb(var(--abyss-violet-rgb) / 8%); }
.expedition-result-chest.rarity-legendary, .expedition-result-equipment li.rarity-legendary { box-shadow: inset 0 0 18px rgb(224 190 100 / 10%), 0 0 12px rgb(224 190 100 / 6%); }
.expedition-result-empty { position: relative; min-height: 54px; padding: 28px 10px 10px; border-color: rgb(var(--abyss-crystal-rgb) / 20%); background: linear-gradient(145deg, rgb(var(--abyss-crystal-rgb) / 4%), transparent); }
.expedition-result-empty::before { position: absolute; top: 9px; left: 50%; width: 13px; height: 13px; transform: translateX(-50%) rotate(45deg); border: 1px solid rgb(var(--abyss-crystal-rgb) / 42%); content: ""; }

:is(.forge-confirm-dialog, .forge-tempering-reveal-dialog, .core-extraction-reveal-cut, .core-apply-confirm-dialog, .retreat-confirm-dialog, .revive-confirm-dialog, .stamina-advance-dialog, .crystal-confirm-dialog, .settings-reset-dialog, .arena-challenge-dialog, .combat-role-warning-dialog, .chat-safety-dialog, .inventory-filter-dialog) { border-top-color: var(--abyss-metal); outline: 1px solid rgb(210 226 225 / 6%); outline-offset: -6px; box-shadow: 0 26px 72px rgb(0 0 0 / 66%), 0 0 22px rgb(var(--abyss-violet-rgb) / 7%), inset 0 1px rgb(255 255 255 / 8%); }
:is(.forge-confirm-dialog, .retreat-confirm-dialog, .stamina-advance-dialog, .settings-reset-dialog, .arena-challenge-dialog, .combat-role-warning-dialog, .chat-safety-dialog, .inventory-filter-dialog) { background: radial-gradient(circle at 50% 0, rgb(var(--abyss-crystal-rgb) / 7%), transparent 33%), linear-gradient(155deg, rgb(var(--panel-start-rgb) / 99%), var(--dialog) 62%); }
.abyss-process-dialog { border-top-color: var(--gold-strong); background-image: radial-gradient(circle at 50% 0, rgb(var(--abyss-crystal-rgb) / 8%), transparent 34%), repeating-linear-gradient(120deg, transparent 0 34px, rgb(var(--abyss-violet-rgb) / 3%) 35px, transparent 36px 70px); }
.forge-tempering-reveal-stage, .core-extraction-reveal-stage { box-shadow: 0 0 0 5px rgb(var(--abyss-crystal-rgb) / 3%), 0 0 30px rgb(var(--abyss-crystal-rgb) / 9%); }

.menu-screen > .section-heading { position: relative; padding: 2px 0 12px 58px; border-bottom: 1px solid rgb(var(--accent-rgb) / 18%); }
.menu-screen > .section-heading::before { position: absolute; top: -4px; left: 0; width: 45px; height: 45px; background: radial-gradient(circle, rgb(var(--abyss-crystal-rgb) / 16%), transparent 68%), url("/images/ui-magitech-v1/menu.webp") center / 38px no-repeat; content: ""; filter: drop-shadow(0 0 7px rgb(var(--abyss-crystal-rgb) / 20%)); }
.menu-screen > .section-heading::after { position: absolute; right: 0; bottom: -1px; left: 58px; height: 1px; background: linear-gradient(90deg, var(--gold), rgb(var(--abyss-crystal-rgb) / 42%), transparent); content: ""; }
.menu-category h3, .side-menu-group h2 { display: flex; align-items: center; gap: 7px; }
.menu-category h3::before, .side-menu-group h2::before { width: 15px; height: 15px; flex: 0 0 15px; background: url("/images/ui-magitech-v1/settings.webp") center / contain no-repeat; content: ""; opacity: .52; filter: grayscale(.25) drop-shadow(0 0 4px rgb(var(--abyss-crystal-rgb) / 24%)); }
.menu-category h3 { border-bottom-color: rgb(var(--accent-rgb) / 18%); }
.menu-card { background: radial-gradient(circle at 13% 50%, rgb(var(--abyss-crystal-rgb) / 5%), transparent 24%), linear-gradient(145deg, var(--surface), rgb(var(--panel-end-rgb) / 92%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }

.empty-state, .sale-empty, .chat-empty, .core-inheritance-empty { position: relative; min-height: 104px; padding: 54px 16px 16px; border: 1px dashed rgb(var(--abyss-crystal-rgb) / 20%); border-radius: 8px; background: radial-gradient(circle at 50% 31px, rgb(var(--abyss-crystal-rgb) / 9%), transparent 28px), linear-gradient(145deg, rgb(var(--abyss-violet-rgb) / 3%), transparent); color: var(--muted); text-align: center; }
.empty-state::before, .sale-empty::before, .chat-empty::before, .core-inheritance-empty::before { position: absolute; top: 17px; left: 50%; width: 25px; height: 25px; transform: translateX(-50%) rotate(45deg); border: 1px solid rgb(var(--abyss-crystal-rgb) / 42%); box-shadow: 0 0 13px rgb(var(--abyss-crystal-rgb) / 12%), inset 0 0 8px rgb(var(--abyss-violet-rgb) / 12%); content: ""; }
.core-inheritance-empty { display: grid; justify-items: center; gap: 5px; }
.core-inheritance-empty::before { top: 13px; }

@keyframes mechanism-gear-turn { to { transform: rotate(360deg); } }
@keyframes mechanism-crystal-pulse { 50% { transform: scale(1.12); filter: drop-shadow(0 0 13px rgb(var(--abyss-crystal-rgb) / 100%)); } }
@keyframes abyss-notice-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes boss-signal-in { 0% { opacity: 0; transform: translate(-50%, -7px) scaleX(.8); } 24%, 72% { opacity: 1; transform: translate(-50%, 0) scaleX(1); } 100% { opacity: 0; transform: translate(-50%, 0) scaleX(1); } }
@keyframes reward-metal-sweep { to { transform: translateX(110%); } }

@media (prefers-reduced-motion: reduce) {
  .background-battle-monitor-signal.active, .background-battle-monitor-signal.busy { animation: none; }
  .abyss-system-notice, .boss-encounter-signal, .expedition-result-chest::after, .expedition-result-equipment li::after { animation: none !important; }
  .boss-encounter-signal { opacity: 1; }
  .initial-loading-spinner .mechanism-gear, .maintenance-spinner .mechanism-gear, .initial-loading-spinner .mechanism-crystal, .maintenance-spinner .mechanism-crystal, .loading::before, .battle-floor-advance-status .abyss-mechanism-gear, .battle-floor-advance-status .abyss-mechanism-crystal { animation: none; }
  .update-status-icon { --update-status-motion: paused; }
  .post-battle-actions.result-actions-only > .battle-result-button[data-action="next-floor"]:not(:disabled):not(:focus-visible) { animation: none; }
  .equipment-member-button, .equipment-party-stage .home-party-member, .hero-equipment-copy, .hero-equipped-list { transition: none; }
  .forge-tempering-reveal-stage.spinning .forge-tempering-reveal-halo { animation: none; }
  .boss-knockout-speech { animation: none; transform: translateX(-50%); }
  .battle-shell:not(.arena-duel) .combatants.floor-advancing .party-line, .floor-advance-overlay::before, .floor-advance-content { animation: none !important; }
  .floor-recovery-effects::before, .floor-recovery-effects > i { animation: none !important; }
  .battle-shell[class*="battle-zone-"] .combatants.phase-party-advance, .battle-shell:not(.arena-duel) .combatants.phase-party-advance .party-line, .battle-shell:not(.arena-duel) .combatants.initial-party-arrival .party-line { animation: none !important; }
  .battle-phase-connector.advancing > i, .battle-phase-progress.transitioning .battle-phase-node.active, .battle-shell:not(.arena-duel) .enemy-line.phase-enemy-arrival .enemy, .battle-shell:not(.arena-duel) .enemy-line.initial-enemy-arrival .enemy { animation: none !important; }
  .battle-phase-connector.advancing > i { transform: scaleX(1); }
  .initial-loading-spinner::before { animation-duration: 2.4s; }
  .side-menu, .side-menu-backdrop { animation: none; }
  button { transition-duration: .01ms; }
  button:not(:disabled):active, button:not(:disabled).button-pressing { transform: none; }
  button.button-confirmed { animation: none; }
  button.button-confirmed::after { animation: none; opacity: .22; }
  .pending-action-spinner, .button-spinner { animation: none; }
  .return-gear-spinner i { animation-duration: 2.2s; }
  .log-entry.log-current { animation: none; }
  .combat-float { animation: combat-float-reduced 1.2s ease-out forwards; }
  .actor-magic-cast, .combat-magic-impact, .combat-support-impact { animation: none; }
  .combat-magic-impact, .combat-support-impact { opacity: .45; }
  .combat-support-impact { transform: translate(-50%, -50%); }
  .combat-slash { animation: none; opacity: .6; transform: translate(-50%, -50%) rotate(var(--slash-angle)); }
  .core-extraction-reveal-backdrop, .core-extraction-reveal-cut, .core-extraction-reveal-stage::before, .core-extraction-reveal-ring, .core-extraction-reveal-source, .core-extraction-reveal-core, .core-extraction-reveal-count, .core-extraction-reveal-cut > .eyebrow, .core-extraction-reveal-cut h2, .core-extraction-reveal-result, .core-extraction-reveal-actions { animation: none; }
  .core-extraction-reveal-source { opacity: 0; }
  .core-extraction-reveal-core { opacity: 1; transform: none; filter: none; }
  .core-apply-reveal-backdrop, .core-apply-reveal-cut > .eyebrow, .core-apply-reveal-source, .core-apply-reveal-target, .core-apply-reveal-glow, .core-apply-reveal-ring, .core-apply-reveal-copy { animation: none; }
  .core-apply-reveal-source { opacity: 0; }
  .core-apply-reveal-target { opacity: 1; transform: none; filter: brightness(1.08); }
  .core-apply-reveal-glow { opacity: .58; transform: scale(1); }
  .core-apply-reveal-ring { opacity: .7; transform: scale(1.08); }
  .party-join-backdrop, .party-join-cutin, .party-join-speed-lines, .party-join-portrait, .party-join-copy, .party-join-continue { animation: none; }
  .pwa-install-banner { animation: none; }
}

@keyframes combat-float-reduced { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

.home-role-facility-card { grid-column: 1 / -1; min-height: 68px; border-color: rgb(126 157 165 / 44%); background: linear-gradient(145deg, rgb(26 39 43 / 94%), rgb(17 24 29 / 97%)); }
.home-role-facility-card .home-service-copy small { color: #9dbcc2; }
.formation-screen { position: relative; isolation: isolate; display: grid; gap: 14px; overflow: hidden; border-color: rgb(101 143 154 / 32%); background: radial-gradient(circle at 86% 0%, rgb(var(--abyss-violet-rgb) / 9%), transparent 28%), radial-gradient(circle at 6% 38%, rgb(var(--abyss-crystal-rgb) / 7%), transparent 32%), linear-gradient(150deg, rgb(22 29 35 / 98%), rgb(13 18 23 / 99%)); box-shadow: 0 18px 42px rgb(0 0 0 / 34%), inset 0 1px rgb(255 255 255 / 5%); }
.formation-screen::before { position: absolute; z-index: -1; top: 0; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--abyss-crystal-rgb) / 70%), rgb(var(--abyss-violet-rgb) / 58%), transparent); box-shadow: 0 0 12px rgb(var(--abyss-crystal-rgb) / 22%); content: ""; }
.formation-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.formation-screen > .section-heading { margin-bottom: 0; }
.formation-menu-back { width: fit-content; }
.formation-menu-back-top { justify-self: start; padding-right: 8px; padding-left: 0; text-align: left; }
.formation-menu-back-bottom { min-width: min(240px, 100%); min-height: 46px; justify-self: center; margin-top: 4px; padding: 8px 20px; text-align: center; }
.formation-tips { position: relative; z-index: 5; flex: none; }
.formation-tips summary { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--tips-border); border-radius: 50%; background: linear-gradient(145deg, var(--tips-surface), var(--tips-surface-deep)); color: var(--tips-accent); box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 7px 18px rgb(0 0 0 / 24%); cursor: pointer; font-size: 1.15rem; font-weight: 700; list-style: none; }
.formation-tips summary::-webkit-details-marker { display: none; }
.formation-tips summary:focus-visible { outline: 2px solid var(--tips-heading); outline-offset: 2px; }
.formation-tips[open] summary { border-color: var(--tips-accent); background: #214553; color: var(--tips-heading); box-shadow: 0 0 0 2px rgb(var(--tips-rgb) / 32%), 0 8px 20px rgb(0 0 0 / 32%); }
.formation-tips-content { position: absolute; top: calc(100% + 8px); right: 0; display: grid; width: min(360px, calc(100vw - 40px)); gap: 10px; padding: 14px; border: 1px solid var(--tips-border); border-left: 3px solid var(--tips-accent); border-radius: 10px; background: linear-gradient(145deg, var(--tips-surface), var(--tips-surface-deep)); box-shadow: 0 16px 32px rgb(0 0 0 / 50%), inset 0 1px rgb(255 255 255 / 5%); }
.formation-tips:not([open]) > .formation-tips-content { display: none; }
.formation-tips-heading { color: var(--tips-heading); font-size: .85rem; }
.formation-command-header { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 66px; padding: 9px 11px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 20%); border-radius: 8px; background: linear-gradient(105deg, rgb(var(--abyss-crystal-rgb) / 8%), rgb(var(--abyss-violet-rgb) / 5%) 58%, rgb(0 0 0 / 11%)); box-shadow: inset 0 1px rgb(255 255 255 / 4%); }
.formation-command-header > .abyss-mechanism-mark { width: 46px; height: 46px; flex-basis: 46px; }
.formation-command-header .abyss-mechanism-gear { width: 39px; height: 39px; }
.formation-command-header .abyss-mechanism-crystal { width: 15px; height: 15px; }
.formation-command-header > div { display: grid; min-width: 0; gap: 2px; }
.formation-command-header h2 { margin: 0; font-family: "Yu Mincho", serif; font-size: 1.17rem; letter-spacing: .06em; }
.formation-command-header > div > span { color: #8fa6ad; font-size: .58rem; line-height: 1.45; }
.formation-count { align-self: center; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.formation-count.complete { border-color: #779b6a; background: rgb(81 122 70 / 18%); color: #bee0b2; box-shadow: 0 0 12px rgb(99 171 111 / 8%); }
.formation-intro { margin: 0; color: var(--tips-text); font-size: .73rem; line-height: 1.6; }
.formation-leader-rule { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid rgb(203 169 94 / 34%); border-radius: 8px; background: linear-gradient(120deg, rgb(92 67 28 / 18%), rgb(0 0 0 / 10%)); }
.formation-leader-rule strong { color: var(--gold-strong); font-size: .78rem; }
.formation-leader-rule span { color: var(--muted); font-size: .67rem; line-height: 1.5; }
.formation-drag-guide { margin: 0; padding: 7px 9px; border-left: 2px solid var(--tips-accent); background: rgb(var(--tips-rgb) / 22%); color: var(--tips-text); font-size: .65rem; line-height: 1.5; }
.formation-deck { position: relative; display: grid; gap: 10px; padding: 12px; overflow: hidden; border: 1px solid rgb(112 139 148 / 22%); border-radius: 8px; background: linear-gradient(145deg, rgb(255 255 255 / 3%), rgb(0 0 0 / 12%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.formation-deck::before { position: absolute; top: 0; left: 14px; width: 62px; height: 1px; background: linear-gradient(90deg, rgb(var(--abyss-crystal-rgb) / 70%), transparent); content: ""; }
.formation-active-deck { border-color: rgb(var(--abyss-crystal-rgb) / 26%); background: radial-gradient(circle at 50% 110%, rgb(var(--abyss-crystal-rgb) / 7%), transparent 48%), linear-gradient(145deg, rgb(255 255 255 / 3%), rgb(0 0 0 / 13%)); }
.formation-standby-deck::before { background: linear-gradient(90deg, rgb(var(--abyss-violet-rgb) / 68%), transparent); }
.formation-roster-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 0; }
.formation-roster-heading h3 { margin: 2px 0 0; font-size: 1rem; }
.formation-roster-heading > span { color: var(--muted); font-size: .68rem; font-weight: 700; }
.formation-waiting-heading { margin-top: 0; padding-top: 0; border-top: 0; }
.formation-waiting-guide { margin: -3px 0 0; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.formation-slot-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: -3px; color: var(--muted); font-size: .62rem; font-weight: 700; text-align: center; }
.formation-slot-labels > span { min-width: 0; white-space: nowrap; }
.formation-slot-labels b { margin-right: 3px; color: var(--gold-strong); font-size: .67rem; }
.formation-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.formation-slot-card { position: relative; display: grid; min-width: 0; min-height: 165px; justify-items: center; align-content: start; gap: 3px; padding: 5px 6px 0; overflow: hidden; border: 1px solid var(--party-color, var(--line)); border-radius: 9px; background: radial-gradient(circle at 50% 25%, rgb(var(--party-color-rgb, var(--accent-rgb)) / 17%), transparent 48%), linear-gradient(180deg, rgb(26 34 39 / 96%), rgb(10 14 18 / 96%)); box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 7px 18px rgb(0 0 0 / 18%); text-align: center; transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease; }
.formation-slot-card.empty { align-content: center; border-style: dashed; background: rgb(0 0 0 / 12%); }
.formation-drag-surface { display: grid; width: 100%; min-width: 0; justify-items: center; align-content: start; gap: 3px; padding: 0; border: 0; background: transparent; color: inherit; cursor: grab; font: inherit; text-align: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.formation-drag-surface:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 1px; }
.formation-slot-portrait, .formation-slot-portrait .actor-image { display: block; width: 62px; height: 62px; object-fit: contain; }
.formation-slot-copy { display: grid; width: 100%; min-width: 0; gap: 2px; }
.formation-slot-card strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.formation-slot-card small, .formation-slot-empty { color: var(--muted); font-size: .56rem; line-height: 1.3; }
.formation-slot-actions { align-self: end; display: grid; grid-template-columns: 1fr; width: calc(100% + 12px); margin-top: auto; border-top: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 24%); }
.formation-slot-actions button { min-width: 0; min-height: 30px; padding: 0 2px; border: 0; background: rgb(0 0 0 / 12%); color: var(--text); cursor: pointer; font: inherit; font-size: .53rem; font-weight: 700; }
.formation-slot-actions button + button { border-top: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 24%); }
.formation-slot-actions button:last-child { color: #d9a09a; }
.formation-slot-actions button:focus-visible { position: relative; outline: 2px solid var(--gold-strong); outline-offset: -3px; }
.formation-member-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 6px; }
.formation-member-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 28%); border-radius: 9px; background: radial-gradient(circle at 50% 25%, rgb(var(--party-color-rgb, var(--accent-rgb)) / 11%), transparent 52%), linear-gradient(180deg, rgb(27 34 39 / 95%), rgb(14 18 23 / 97%)); box-shadow: inset 0 1px rgb(255 255 255 / 4%); transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease; }
.formation-waiting-tile.selected { border-color: var(--party-color); box-shadow: inset 0 -3px var(--party-color); }
.formation-waiting-summary { display: grid; justify-items: center; align-content: start; gap: 2px; width: 100%; min-height: 103px; padding: 7px 3px 5px; border: 0; background: transparent; color: var(--text); cursor: pointer; text-align: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.formation-waiting-summary:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: -3px; }
.formation-member-portrait, .formation-member-portrait .actor-image { display: block; width: 48px; height: 55px; object-fit: contain; }
.formation-member-copy { display: grid; width: 100%; min-width: 0; gap: 1px; }
.formation-member-copy > strong { overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.formation-member-copy > em { overflow: hidden; color: var(--gold-strong); font-size: .51rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.formation-waiting-detail { display: grid; gap: 7px; padding: 11px; border: 1px solid var(--party-color, var(--line)); border-radius: 9px; background: linear-gradient(145deg, rgb(var(--party-color-rgb, var(--accent-rgb)) / 9%), var(--surface-2)); animation: inventory-filter-in 140ms ease-out; }
.formation-waiting-detail > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.formation-waiting-detail > div:first-child > strong { font-size: .86rem; }
.formation-waiting-detail > div:first-child > small { color: var(--gold-strong); font-size: .62rem; }
.formation-waiting-detail > p { margin: 0; color: var(--muted); font-size: .65rem; line-height: 1.55; }
.formation-waiting-detail > b { color: #a8c9dc; font-size: .6rem; font-weight: 500; line-height: 1.45; }
.formation-slot-card.formation-drop-target, .formation-waiting-tile.formation-drop-target { border-color: var(--gold-strong); box-shadow: 0 0 0 2px rgb(231 193 99 / 32%), inset 0 0 22px rgb(231 193 99 / 13%); }
.formation-drag-source { z-index: 4; opacity: .86; transform: translateY(-4px) scale(1.025); box-shadow: 0 12px 28px rgb(0 0 0 / 48%), 0 0 0 2px rgb(var(--party-color-rgb, var(--accent-rgb)) / 42%); }
.formation-drag-ghost { position: fixed; z-index: 600; top: 0; left: 0; display: grid; width: 76px; min-height: 84px; justify-items: center; align-content: center; gap: 2px; padding: 5px; border: 1px solid var(--party-color, var(--gold)); border-radius: 9px; background: rgb(16 22 26 / 95%); box-shadow: 0 14px 34px rgb(0 0 0 / 58%); color: var(--text); opacity: .94; pointer-events: none; will-change: transform; animation: formation-drag-pop 120ms ease-out; }
.formation-drag-ghost .actor-image { width: 50px; height: 54px; object-fit: contain; }
.formation-drag-ghost strong { overflow: hidden; max-width: 100%; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.formation-slot-card.formation-drag-source, .formation-waiting-tile.formation-drag-source { opacity: 1; transform: none; box-shadow: none; }
.formation-drag-source .formation-slot-portrait, .formation-drag-source .formation-member-portrait { visibility: hidden; }
.formation-drag-ghost.is-character { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; animation: none; }
.formation-drag-character { width: 100%; height: 100%; animation: formation-character-sway 580ms ease-in-out infinite; will-change: transform; }
.formation-drag-ghost.is-character .actor-image { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; filter: drop-shadow(0 9px 8px rgb(0 0 0 / 45%)); }
@keyframes formation-character-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .formation-drag-character { animation: none; } }
.formation-character-actions { position: absolute; z-index: 6; top: 10px; right: 5px; left: 5px; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--party-color, var(--gold)); border-radius: 7px; background: rgb(12 20 30 / 96%); box-shadow: 0 8px 18px rgb(0 0 0 / 45%); }
.formation-character-actions > button { width: 100%; min-width: 44px; min-height: 44px; padding: 5px; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: .8125rem; cursor: pointer; }
.formation-character-actions > button + button { border-top: 1px solid rgb(255 255 255 / 18%); }
.formation-character-actions > button:disabled { opacity: .45; cursor: not-allowed; }
.formation-character-actions > button:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
body.formation-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.formation-dragging .formation-drag-surface, body.formation-dragging .formation-waiting-summary { cursor: grabbing; }
@keyframes formation-drag-pop { from { opacity: 0; scale: .88; } to { opacity: .94; scale: 1; } }
.formation-member-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.formation-member-actions > button { min-height: 38px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: .64rem; font-weight: 700; }
.formation-member-actions > button + button { border-left: 1px solid var(--line); }
.formation-member-actions > button:only-child { grid-column: 1 / -1; }
.formation-member-settings { color: var(--text); }
.formation-member-actions > .formation-add-button { background: rgb(var(--party-color-rgb) / 9%); color: var(--party-color); }
.formation-member-actions > button:focus-visible { position: relative; outline: 2px solid var(--gold-strong); outline-offset: -3px; }
.formation-member-actions > button:disabled { cursor: default; opacity: .45; }
.formation-no-waiting { grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); font-size: .7rem; text-align: center; }
.formation-auto-save-status { display: inline-flex; min-height: 30px; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 6px 10px; border: 1px solid rgb(110 137 144 / 20%); border-radius: 99px; background: rgb(0 0 0 / 12%); color: var(--muted); font-size: .66rem; line-height: 1.5; text-align: center; }
.formation-auto-save-status > span { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentcolor; box-shadow: 0 0 8px currentcolor; }
.formation-auto-save-status[data-status="saving"] { color: #a9d9ec; }
.formation-auto-save-status[data-status="saved"] { color: #9fc8a9; }
.formation-auto-save-status[data-status="error"] { color: #e7a4a4; }
body.settings-modal-open .formation-screen { z-index: 198; overflow: visible; }
.party-settings-backdrop { position: fixed; z-index: 199; inset: 0; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 8%, rgb(var(--party-color-rgb, var(--accent-rgb)) / 10%), transparent 34%), rgb(3 6 8 / 88%); backdrop-filter: blur(5px); animation: forge-backdrop-in 150ms ease-out; }
.party-settings-dialog { position: relative; isolation: isolate; display: flex; flex-direction: column; width: min(680px, 100%); max-height: calc(100dvh - 32px); min-height: 0; padding: 0; overflow: hidden; border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 55%); border-radius: 14px; background: radial-gradient(circle at 2% 0%, rgb(var(--party-color-rgb, var(--accent-rgb)) / 15%), transparent 32%), radial-gradient(circle at 100% 100%, rgb(var(--abyss-violet-rgb) / 8%), transparent 30%), var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 68%), 0 0 32px rgb(var(--party-color-rgb, var(--accent-rgb)) / 10%), inset 0 1px rgb(255 255 255 / 5%); animation: forge-dialog-in 180ms ease-out; }
.party-settings-dialog::before { position: absolute; z-index: 1; top: 0; right: 12%; left: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--party-color, var(--gold)) 35% 65%, transparent); content: ""; opacity: .85; }
.party-settings-backdrop.is-updating, .party-settings-backdrop.is-updating .party-settings-dialog { animation: none; }
.party-settings-dialog-heading { position: relative; z-index: 2; display: grid; flex: 0 0 auto; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 15px 16px 12px; border-bottom: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 22%); background: linear-gradient(90deg, rgb(var(--party-color-rgb, var(--accent-rgb)) / 8%), transparent 55%); }
.party-settings-heading-mark { display: grid; width: 46px; height: 46px; place-items: center; }
.party-settings-heading-mark .abyss-mechanism-mark { width: 44px; height: 44px; flex-basis: 44px; }
.party-settings-heading-mark .abyss-mechanism-gear { width: 37px; height: 37px; }
.party-settings-heading-mark .abyss-mechanism-crystal { width: 14px; height: 14px; }
.party-settings-heading-copy { display: grid; min-width: 0; gap: 4px; }
.party-settings-kicker { display: flex; align-items: center; gap: 7px; }
.party-settings-kicker > i { width: 15px; height: 1px; flex: 0 0 15px; background: var(--party-color, var(--gold)); box-shadow: 0 0 7px rgb(var(--party-color-rgb, var(--accent-rgb)) / 70%); }
.party-settings-kicker .eyebrow { color: var(--party-color, var(--gold)); font-size: .56rem; letter-spacing: .16em; }
.party-settings-kicker > span { padding-left: 7px; border-left: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 28%); color: var(--muted); font-size: .51rem; letter-spacing: .1em; }
.party-settings-dialog-heading h2 { margin: 1px 0 0; font-size: 1.28rem; letter-spacing: .035em; }
.party-settings-heading-copy > p.small { max-width: 520px; margin: 2px 0 0; font-size: .64rem; line-height: 1.5; }
.party-settings-close { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 38px; padding: 6px 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: .65rem; }
.party-settings-close > i { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 35%); border-radius: 50%; color: var(--party-color, var(--gold)); font-size: .9rem; font-style: normal; line-height: 1; }
.party-settings-close:hover { color: var(--text); }
.party-settings-close:focus-visible { border-radius: 6px; outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.party-settings-close:disabled { cursor: not-allowed; opacity: .45; }
.party-settings-jump-nav { position: relative; z-index: 2; display: grid; flex: 0 0 auto; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; border-bottom: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 18%); background: rgb(6 10 13 / 72%); }
.party-settings-jump-nav button { display: flex; min-width: 0; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 7px 10px; border: 0; border-right: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 16%); background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.party-settings-jump-nav button:last-child { border-right: 0; }
.party-settings-jump-nav button:hover { background: rgb(var(--party-color-rgb, var(--accent-rgb)) / 8%); color: var(--text); }
.party-settings-jump-nav button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--gold-strong); outline-offset: -3px; }
.party-settings-jump-nav small { color: var(--party-color, var(--gold)); font-family: Georgia, serif; font-size: .48rem; }
.party-settings-jump-nav span { overflow: hidden; font-size: .62rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.party-settings-dialog-body { min-height: 0; padding: 14px 18px 18px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, rgb(0 0 0 / 10%), transparent 22%); scroll-behavior: smooth; scrollbar-color: rgb(var(--party-color-rgb, var(--accent-rgb)) / 38%) transparent; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.party-settings-dialog-actions { flex: 0 0 auto; padding-top: 12px; }
.party-settings-dialog-actions .primary-button { width: 100%; }
.party-settings-profile-section, .character-combat-control, .party-inline-roles { scroll-margin-top: 8px; }
.party-settings-profile-section { display: grid; gap: 9px; }
.party-settings-section-heading { display: flex; min-width: 0; align-items: end; justify-content: space-between; gap: 10px; }
.party-settings-section-heading > span { display: grid; gap: 1px; }
.party-settings-section-heading small { color: var(--party-color, var(--gold)); font-size: .48rem; letter-spacing: .15em; }
.party-settings-section-heading strong { font-family: "Yu Mincho", serif; font-size: .88rem; letter-spacing: .04em; }
.party-settings-section-heading > em { color: var(--muted); font-size: .55rem; font-style: normal; white-space: nowrap; }
.party-blessing-card { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; min-width: 0; margin-top: 12px; padding: 10px 11px; border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 38%); border-radius: 9px; background: linear-gradient(120deg, rgb(var(--party-color-rgb, var(--accent-rgb)) / 11%), transparent 62%), rgb(0 0 0 / 14%); }
.party-blessing-card > span { display: grid; gap: 1px; }
.party-blessing-card small { color: var(--muted); font-size: .5rem; letter-spacing: .13em; }
.party-blessing-card strong { font-size: .76rem; }
.party-blessing-card > b { align-self: center; color: var(--party-color, var(--gold)); font-size: .72rem; }
.party-blessing-card p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.6; }
.party-inline-roles { display: grid; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.party-inline-roles-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.party-inline-roles-heading > span { display: grid; gap: 2px; }
.party-inline-roles-heading small { color: var(--muted); font-size: .54rem; letter-spacing: .16em; }
.party-inline-roles-heading strong { font-size: .96rem; }
.party-inline-roles-heading > em { color: var(--muted); font-size: .6rem; font-style: normal; }
.party-inline-role-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.party-inline-role-choice { min-height: 0; }
.party-role-status { display: grid; gap: 7px; padding: 10px; border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 36%); border-radius: 8px; background: rgb(0 0 0 / 15%); }
.party-role-status-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.party-role-status-heading > span { color: var(--text); font-size: .72rem; font-weight: 700; }
.party-role-status-heading > small { color: var(--muted); font-size: .56rem; text-align: right; }
.party-role-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.party-role-stat { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 4px; min-width: 0; min-height: 50px; padding: 5px 4px; border-left: 2px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 46%); background: rgb(0 0 0 / 14%); }
.party-role-stat-icon, .party-role-stat-icon .stat-icon { display: block; width: 22px; height: 22px; object-fit: contain; }
.party-role-stat > span:last-child { display: grid; min-width: 0; }
.party-role-stat small { overflow: hidden; color: var(--muted); font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.party-role-stat strong { overflow: hidden; color: var(--text); font-size: .74rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.combat-role-facility { display: grid; gap: 13px; }
.combat-role-intro { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.75; }
.combat-role-current { margin: 0; color: var(--muted); font-size: .75rem; }
.combat-role-current strong { color: var(--gold); }
.combat-role-facility .combat-role-tendency { border: 0; border-left: 2px solid var(--gold); border-radius: 0; background: transparent; }
.combat-role-facility .party-role-status { border: 0; border-radius: 0; padding: 0; background: transparent; }
.combat-role-facility .combat-role-choice { border-radius: 5px; background: linear-gradient(150deg, rgb(var(--abyss-crystal-rgb) / 4%), transparent), var(--surface-deep); }
.combat-role-facility .combat-role-choice.selected { border-color: var(--gold); box-shadow: inset 3px 0 var(--gold); background: rgb(var(--accent-rgb) / 10%); }
.combat-role-facility .combat-role-choice:focus-visible, .combat-role-members button:focus-visible { outline: 2px solid var(--abyss-crystal); outline-offset: 3px; }
@media (max-width: 420px) {
  .combat-role-facility .combat-role-choices { grid-template-columns: 1fr; }
}
.combat-role-back { justify-self: start; padding: 0; text-align: left; }
.combat-role-members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.combat-role-members button { display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; padding: 9px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.combat-role-members button.selected { border-color: var(--gold); background: var(--selected-end); }
.combat-role-member-name { overflow: hidden; max-width: 100%; font-size: .88rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.combat-role-member-icon { display: grid; width: 64px; height: 64px; place-items: center; }
.combat-role-member-icon .actor-image { width: 64px; height: 64px; object-fit: contain; }
.combat-role-members small { overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.combat-role-tendency { display: grid; gap: 4px; padding: 9px 11px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 7px; background: rgb(0 0 0 / 14%); }
.combat-role-tendency span { color: var(--muted); font-size: .6rem; }
.combat-role-tendency strong { color: #a8c9dc; font-size: .68rem; line-height: 1.5; }
.combat-role-tendency small { color: var(--muted); font-size: .64rem; line-height: 1.5; }
.combat-role-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.combat-role-choice { display: grid; align-content: start; gap: 6px; min-width: 0; min-height: 108px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); cursor: pointer; text-align: left; }
.combat-role-choice.selected { border-color: var(--gold); background: rgb(var(--accent-rgb) / 11%); }
.combat-role-choice:disabled { cursor: default; opacity: 1; }
.combat-role-choice[aria-busy="true"] { cursor: wait; border-color: var(--gold); }
.combat-role-choice span { display: grid; gap: 3px; }
.combat-role-choice small { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.combat-role-differences { display: grid; gap: 4px; }
.combat-role-differences > span { color: var(--muted); font-size: .6rem; }
.combat-role-differences > div { display: flex; flex-wrap: wrap; gap: 4px; }
.combat-role-differences em { padding: 2px 5px; border: 1px solid currentcolor; border-radius: 99px; font-size: .62rem; font-style: normal; font-variant-numeric: tabular-nums; line-height: 1.35; }
.combat-role-differences .increase { color: #83cdb6; background: rgb(71 156 129 / 10%); }
.combat-role-differences .decrease { color: #e79292; background: rgb(188 80 80 / 10%); }
.combat-role-differences .unchanged { color: var(--muted); }
.combat-role-effective { display: grid; gap: 3px; }
.combat-role-effective > span { color: var(--muted); font-size: .6rem; }
.combat-role-effective em { color: var(--blue); font-size: .68rem; font-style: normal; line-height: 1.55; }
.combat-role-choice b { color: var(--gold); font-size: .64rem; }
.combat-role-applying { display: inline-flex; align-items: center; gap: 7px; }
.combat-role-applying .pending-action-spinner { width: .9rem; height: .9rem; }
.combat-role-warning-backdrop { position: fixed; z-index: 220; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 82%); backdrop-filter: blur(4px); }
.combat-role-warning-dialog { width: min(430px, 100%); padding: 20px; border: 1px solid var(--accent-border-strong); border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 60%); }
.combat-role-warning-dialog h2 { margin: 4px 0 10px; font-size: 1.15rem; }
.combat-role-warning-dialog > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.combat-role-warning-dialog .primary-button { width: 100%; margin-top: 12px; }
body.combat-role-modal-open { overflow: hidden; }
.stamina-advance-backdrop, .header-stamina-recovery-backdrop { position: fixed; z-index: 195; inset: 0; display: grid; place-items: center; padding: 16px; overflow: hidden; overscroll-behavior: none; background: radial-gradient(circle at 50% 46%, rgb(var(--abyss-crystal-rgb) / 7%), transparent 38%), rgb(3 7 11 / 86%); backdrop-filter: blur(5px); }
.stamina-advance-dialog { position: relative; isolation: isolate; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 20px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 35%); border-radius: 12px; background: radial-gradient(circle at 8% 0%, rgb(var(--abyss-crystal-rgb) / 11%), transparent 34%), radial-gradient(circle at 95% 100%, rgb(var(--abyss-violet-rgb) / 9%), transparent 32%), linear-gradient(155deg, rgb(22 30 38 / 99%), rgb(12 17 23 / 99%) 68%); box-shadow: 0 28px 80px rgb(0 0 0 / 70%), 0 0 26px rgb(var(--abyss-crystal-rgb) / 8%), inset 0 1px rgb(255 255 255 / 7%); }
.stamina-advance-dialog.is-compact { overflow-y: hidden; overscroll-behavior: none; touch-action: none; }
.stamina-advance-dialog::before { position: absolute; z-index: -1; top: 0; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--abyss-crystal-rgb) / 82%), rgb(var(--abyss-violet-rgb) / 58%), transparent); box-shadow: 0 0 12px rgb(var(--abyss-crystal-rgb) / 30%); content: ""; }
.stamina-advance-dialog::after { position: absolute; z-index: -1; right: -88px; bottom: -110px; width: 240px; height: 240px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 5%); border-radius: 50%; box-shadow: inset 0 0 0 24px rgb(var(--abyss-violet-rgb) / 2%), inset 0 0 0 48px rgb(var(--abyss-crystal-rgb) / 2%); content: ""; }
.stamina-advance-heading { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.stamina-advance-heading > .abyss-mechanism-mark { width: 46px; height: 46px; flex-basis: 46px; }
.stamina-advance-heading .abyss-mechanism-gear { width: 39px; height: 39px; }
.stamina-advance-heading .abyss-mechanism-crystal { width: 15px; height: 15px; }
.stamina-advance-heading > div { min-width: 0; }
.stamina-advance-dialog h2 { margin: 3px 0 0; font-family: "Yu Mincho", serif; font-size: 1.04rem; letter-spacing: .035em; line-height: 1.4; }
.stamina-advance-dialog p { line-height: 1.6; }
.stamina-advance-route { display: grid; min-width: 76px; justify-items: end; gap: 3px; padding-left: 10px; border-left: 1px solid rgb(var(--abyss-crystal-rgb) / 20%); }
.stamina-advance-route small { color: var(--abyss-crystal); font-size: .43rem; letter-spacing: .14em; }
.stamina-advance-route strong { color: #d9eaed; font-family: Georgia, serif; font-size: .72rem; white-space: nowrap; }
.stamina-advance-route i { color: var(--abyss-crystal); font-style: normal; }
#stamina-advance-description, #header-stamina-recovery-description { margin: 15px 0 0; color: #b5c0c4; font-size: .76rem; }
.header-stamina-recovery-status { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 10px 12px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 18%); border-radius: 8px; background: rgb(0 0 0 / 16%); }
.header-stamina-recovery-status img { width: 29px; height: 29px; object-fit: contain; filter: drop-shadow(0 0 8px rgb(var(--abyss-crystal-rgb) / 24%)); }
.header-stamina-recovery-status span { display: grid; gap: 2px; }
.header-stamina-recovery-status small { color: #7f9299; font-size: .53rem; letter-spacing: .04em; }
.header-stamina-recovery-status strong { color: var(--abyss-crystal); font-family: Georgia, serif; font-size: 1.04rem; font-variant-numeric: tabular-nums; }
.header-stamina-recovery-status i { color: #87989e; font-size: .68rem; font-style: normal; }
.stamina-potion-shop-backdrop { position: fixed; z-index: 225; inset: 0; display: grid; place-items: center; padding: 16px; overflow: hidden; background: rgb(3 7 11 / 88%); backdrop-filter: blur(5px); }
.stamina-potion-shop-dialog { width: min(460px, 100%); padding: 20px; }
.stamina-potion-shop-dialog::after { right: 0; bottom: 0; }
.stamina-potion-shop-dialog .stamina-advance-heading { grid-template-columns: 46px minmax(0, 1fr); }
.stamina-potion-shop-intro { margin: 13px 0; color: #aebec5; font-size: .72rem; }
.stamina-potion-shop-wallet { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 17%); border-radius: 7px; background: rgb(0 0 0 / 16%); }
.stamina-potion-shop-wallet > span { margin-right: auto; color: #9eb2bd; font-size: .63rem; }
.stamina-potion-shop-wallet img { width: 15px; height: 20px; object-fit: contain; }
.stamina-potion-shop-wallet strong { color: #e3eff4; font-size: .9rem; font-variant-numeric: tabular-nums; }
.stamina-potion-products { display: grid; gap: 10px; margin-top: 15px; }
.stamina-potion-product-card { overflow: hidden; border: 1px solid rgb(var(--abyss-crystal-rgb) / 28%); border-radius: 9px; background: linear-gradient(115deg, rgb(var(--abyss-crystal-rgb) / 8%), rgb(5 12 19 / 55%)); }
.stamina-potion-product-card .stamina-potion-product { border: 0; border-radius: 0; background: transparent; }
.stamina-potion-price-guide { margin: 0; padding: 0 12px 8px; font-size: var(--ga-font-note, .75rem); }
.stamina-potion-quantity { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 11px 10px; }
.stamina-potion-quantity > span { margin-right: auto; color: #9eb2bd; font-size: .65rem; }
.stamina-potion-quantity button { display: grid; width: 44px; min-height: 44px; padding: 0; place-items: center; border: 1px solid rgb(var(--abyss-crystal-rgb) / 32%); border-radius: 6px; background: rgb(0 0 0 / 18%); color: #b8e5ed; font-size: 1.1rem; }
.stamina-potion-quantity output { min-width: 44px; color: #e3eff4; font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums; }
.stamina-potion-product { display: grid; grid-template-columns: 53px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 96px; padding: 12px 11px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 28%); border-radius: 9px; background: linear-gradient(115deg, rgb(var(--abyss-crystal-rgb) / 8%), rgb(5 12 19 / 55%)); text-align: left; }
.stamina-potion-review-item { display: grid; grid-template-columns: 53px minmax(0, 1fr); gap: 5px 10px; align-items: center; text-align: left; }
.stamina-potion-review-item > img { grid-row: span 4; width: 53px; height: 60px; object-fit: contain; }
.stamina-potion-review-item > :not(img) { grid-column: 2; }
.stamina-potion-review-item > strong { color: #e3edf2; font-size: .8rem; }
.stamina-potion-review-item > span, .stamina-potion-review-item > small { color: #9ab5c1; font-size: .67rem; }
.stamina-potion-review-item > .stamina-potion-price-breakdown { font-size: var(--ga-font-note, .75rem); }
.stamina-potion-products + .stamina-potion-shop-wallet { margin-top: 12px; }
.stamina-potion-product > img { width: 53px; height: 60px; object-fit: contain; filter: drop-shadow(0 0 8px rgb(var(--abyss-crystal-rgb) / 18%)); }
.stamina-potion-product-copy { display: grid; gap: 4px; min-width: 0; }
.stamina-potion-product-copy strong { color: #e3edf2; font-size: .78rem; line-height: 1.35; }
.stamina-potion-product-copy small { color: #899fa9; font-size: .59rem; }
.stamina-potion-product-copy > span { color: #a6bec9; font-size: .6rem; }
.stamina-potion-product-copy b { color: #9bdef0; font-size: .82rem; }
.stamina-potion-product-price { display: grid; grid-template-columns: 13px auto; align-items: center; gap: 4px; color: #e7d499; }
.stamina-potion-product-price img { width: 13px; height: 19px; object-fit: contain; }
.stamina-potion-product-price b { font-size: .97rem; }
.stamina-potion-product-price small { grid-column: 1 / -1; color: #879fa9; font-size: .54rem; text-align: right; }
.stamina-potion-product-reason { grid-column: 1 / -1; color: #d5ae90; font-size: .64rem; }
.stamina-potion-shop-message { margin: 22px 0; color: #aebec5; font-size: .75rem; }
.stamina-potion-shop-error { margin: 13px 0 0; color: #eab59e; font-size: .7rem; line-height: 1.5; }
.stamina-potion-shop-note { margin: 13px 0 0; color: #889da8; font-size: .61rem; }
.stamina-potion-purchase-review { display: grid; justify-items: center; gap: 8px; margin-top: 14px; padding: 16px 13px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 25%); border-radius: 9px; background: rgb(0 0 0 / 15%); }
.stamina-potion-purchase-review > img { width: 66px; height: 73px; object-fit: contain; }
.stamina-potion-purchase-review > strong { color: #e3edf2; font-size: .87rem; }
.stamina-potion-purchase-review > span { color: #9ab5c1; font-size: .67rem; }
.stamina-potion-purchase-review b { color: #a2e5ef; }
.stamina-potion-purchase-review dl { display: grid; gap: 8px; width: 100%; margin: 8px 0 2px; padding-top: 12px; border-top: 1px solid rgb(var(--abyss-crystal-rgb) / 17%); font-size: .72rem; }
.stamina-potion-purchase-review dl > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stamina-potion-purchase-review dt { color: #96abb5; }
.stamina-potion-purchase-review dd { margin: 0; color: #eadbb1; font-weight: 700; font-variant-numeric: tabular-nums; }
.stamina-potion-purchase-review > p { margin: 4px 0 0; color: #a7b9c1; font-size: .66rem; line-height: 1.6; }
.stamina-potion-shop-link { display: block; margin: 10px auto 0; color: #8db8c9; font-size: .67rem; }
@media (max-width: 420px) {
  .stamina-potion-shop-backdrop { padding: 12px; }
  .stamina-potion-shop-dialog { padding: 17px 14px; max-height: calc(100dvh - 24px); }
  .stamina-potion-shop-dialog .stamina-advance-actions > button { padding: 9px 7px; font-size: .7rem; }
  .stamina-potion-product { grid-template-columns: 47px minmax(0, 1fr) auto; gap: 8px; }
  .stamina-potion-product > img { width: 47px; }
}
.stamina-advance-options { display: grid; gap: 9px; margin-top: 14px; }
.stamina-advance-option { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; min-height: 72px; padding: 8px 13px; overflow: hidden; border: 1px solid rgb(115 142 151 / 30%); border-radius: 9px; background: linear-gradient(145deg, rgb(31 41 48 / 96%), rgb(17 23 29 / 98%)); box-shadow: inset 0 1px rgb(255 255 255 / 5%); color: var(--text); cursor: pointer; text-align: left; }
.stamina-advance-option::after { position: absolute; right: -24px; width: 72px; height: 72px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 6%); border-radius: 50%; content: ""; }
.stamina-advance-option.selected { border-color: rgb(var(--abyss-crystal-rgb) / 58%); background: radial-gradient(circle at 12% 50%, rgb(var(--abyss-crystal-rgb) / 12%), transparent 31%), linear-gradient(145deg, rgb(31 43 51 / 98%), rgb(17 24 31 / 98%)); box-shadow: inset 3px 0 var(--abyss-crystal), 0 0 0 1px rgb(var(--abyss-crystal-rgb) / 10%); }
.stamina-advance-option:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 2px; }
.stamina-advance-option:disabled { cursor: default; }
.stamina-advance-icon { display: block; width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 35%)); }
.stamina-advance-option-copy { display: grid; gap: 3px; min-width: 0; }
.stamina-advance-option-copy strong { font-size: .88rem; line-height: 1.35; }
.stamina-advance-option-copy small { color: #8e9da3; font-size: .67rem; }
.stamina-advance-option-recovery { position: relative; z-index: 1; color: var(--abyss-crystal); font-family: Georgia, serif; font-size: 1.03rem; font-weight: 700; white-space: nowrap; text-shadow: 0 0 9px rgb(var(--abyss-crystal-rgb) / 24%); }
.stamina-advance-balance { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.2fr); align-items: center; gap: 5px; margin-top: 10px; padding: 9px 10px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 18%); border-radius: 8px; background: rgb(0 0 0 / 16%); }
.stamina-advance-balance > span { display: grid; min-width: 0; justify-items: center; gap: 1px; }
.stamina-advance-balance small { color: #74858c; font-size: .47rem; white-space: nowrap; }
.stamina-advance-balance strong { color: #dce6e8; font-size: .77rem; font-variant-numeric: tabular-nums; }
.stamina-advance-balance > i { color: #70828a; font-size: .67rem; font-style: normal; }
.stamina-advance-balance .result { padding: 4px 5px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 28%); border-radius: 6px; background: rgb(var(--abyss-crystal-rgb) / 7%); }
.stamina-advance-balance .result strong { color: var(--abyss-crystal); font-size: .9rem; }
.stamina-recovery-balance { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.2fr); }
.stamina-advance-note { display: flex; align-items: center; gap: 6px; margin: 9px 0 0; color: #85969c; font-size: .62rem; }
.stamina-advance-note-icon { width: 17px; height: 17px; object-fit: contain; }
.stamina-advance-actions { display: grid; grid-template-columns: .82fr 1.18fr; gap: 8px; margin-top: 16px; }
.stamina-advance-actions.single { grid-template-columns: 1fr; }
.stamina-advance-actions > button { min-height: 50px; }
@media (max-width: 540px) {
  .formation-screen { gap: 11px; }
  .formation-command-header { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; min-height: 58px; padding: 8px; }
  .formation-command-header > .abyss-mechanism-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .formation-command-header .abyss-mechanism-gear { width: 34px; height: 34px; }
  .formation-command-header .abyss-mechanism-crystal { width: 13px; height: 13px; }
  .formation-command-header h2 { font-size: 1rem; }
  .formation-command-header > div > span { font-size: .5rem; }
  .formation-command-header .formation-count { padding: 3px 7px; font-size: .59rem; }
  .formation-deck { gap: 8px; padding: 9px 7px; }
  .formation-menu-back-bottom { width: min(240px, 100%); min-height: 48px; }
  .formation-slot-labels { gap: 4px; font-size: .55rem; }
  .formation-slot-labels b { font-size: .59rem; }
  .formation-slots { gap: 4px; }
  .formation-slot-card { min-height: 155px; padding: 4px 3px 0; }
  .formation-slot-portrait, .formation-slot-portrait .actor-image { width: 52px; height: 52px; }
  .formation-slot-card strong { font-size: .65rem; }
  .formation-slot-card small { font-size: .5rem; }
  .formation-slot-actions { width: calc(100% + 6px); }
  .formation-slot-actions button { min-height: 28px; font-size: .48rem; }
  .formation-member-list { gap: 4px; }
  .formation-waiting-summary { min-height: 96px; padding: 6px 2px 4px; }
  .formation-member-portrait, .formation-member-portrait .actor-image { width: 43px; height: 51px; }
  .formation-member-copy > strong { font-size: .61rem; }
  .formation-member-copy > em { font-size: .47rem; }
  .party-settings-backdrop { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .party-settings-dialog { width: 100%; max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom))); }
  .party-settings-dialog-heading { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; padding: 10px 10px 9px; }
  .party-settings-heading-mark { width: 38px; height: 38px; }
  .party-settings-heading-mark .abyss-mechanism-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .party-settings-heading-mark .abyss-mechanism-gear { width: 32px; height: 32px; }
  .party-settings-heading-mark .abyss-mechanism-crystal { width: 12px; height: 12px; }
  .party-settings-dialog-heading h2 { font-size: 1.08rem; }
  .party-settings-heading-copy > p.small { display: -webkit-box; overflow: hidden; font-size: .56rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .party-settings-close { min-height: 34px; padding: 3px 1px 3px 5px; }
  .party-settings-close > i { width: 22px; height: 22px; }
  .party-settings-close > span { display: none; }
  .party-settings-jump-nav button { min-height: 39px; gap: 5px; padding: 6px 4px; }
  .party-settings-jump-nav span { font-size: .57rem; }
  .party-settings-dialog-body { padding: 10px; }
  .party-settings-dialog .character-settings-current { grid-template-columns: clamp(64px, 18vw, 72px) minmax(0, 1fr) auto; gap: 8px; padding: 9px; }
  .party-settings-dialog .character-settings-portrait, .party-settings-dialog .character-settings-portrait img { width: clamp(64px, 18vw, 72px); height: clamp(64px, 18vw, 72px); }
  .party-settings-dialog .character-settings-current-copy strong { font-size: .78rem; }
  .party-settings-dialog .character-settings-current-copy em { font-size: .45rem; }
  .party-settings-dialog .character-settings-current > .character-settings-change { grid-column: 3; width: auto; min-width: 88px; min-height: 38px; padding-right: 8px; padding-left: 8px; font-size: .58rem; }
  .party-settings-dialog .character-settings-change i { display: none; }
  .character-combat-options { gap: 5px; }
  .character-combat-option { min-height: 64px; padding: 7px 8px; }
  .character-combat-option small { font-size: .52rem; }
  .party-role-status { padding: 8px 6px; }
  .party-role-status-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .party-role-status-heading > small { text-align: left; }
  .party-role-stat-grid { gap: 3px; }
  .party-role-stat { grid-template-columns: 18px minmax(0, 1fr); gap: 2px; min-height: 45px; padding: 4px 2px; }
  .party-role-stat-icon, .party-role-stat-icon .stat-icon { width: 18px; height: 18px; }
  .party-role-stat small { font-size: .45rem; }
  .party-role-stat strong { font-size: .65rem; }
  .party-inline-role-choices { grid-template-columns: 1fr; }
  .combat-role-members { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: auto; }
  .combat-role-choices { grid-template-columns: 1fr; }
  .combat-role-choice { min-height: 0; }
  .core-vault-heading { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; }
  .core-vault-heading > .abyss-mechanism-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .core-vault-heading .abyss-mechanism-gear { width: 34px; height: 34px; }
  .core-vault-heading .abyss-mechanism-crystal { width: 13px; height: 13px; }
  .core-vault-heading h2 { font-size: 1.07rem; }
  .core-vault-heading > div:nth-child(2) > span { font-size: .53rem; }
  .core-vault-capacity { min-width: 68px; padding-left: 8px; }
  .core-vault-capacity progress { width: 62px; }
  .core-vault-guidance { padding: 8px 9px; font-size: .62rem; }
  .stamina-advance-dialog { padding: 16px 14px; }
  .stamina-advance-heading { grid-template-columns: 43px minmax(0, 1fr) auto; gap: 8px; }
  .stamina-advance-heading > .abyss-mechanism-mark { width: 39px; height: 39px; flex-basis: 39px; }
  .stamina-advance-heading .abyss-mechanism-gear { width: 33px; height: 33px; }
  .stamina-advance-heading .abyss-mechanism-crystal { width: 13px; height: 13px; }
  .stamina-advance-dialog h2 { font-size: .82rem; letter-spacing: .01em; line-height: 1.35; }
  .stamina-advance-route { min-width: 62px; padding-left: 7px; }
  .stamina-advance-route strong { font-size: .61rem; }
  .stamina-advance-balance { gap: 3px; padding: 7px 6px; }
  .stamina-advance-balance small { font-size: .42rem; }
  .stamina-advance-balance strong { font-size: .68rem; }
  .stamina-advance-balance .result strong { font-size: .78rem; }
}

@media (max-width: 380px) {
  .stamina-advance-heading { grid-template-columns: 43px minmax(0, 1fr); }
  .stamina-advance-heading > .abyss-mechanism-mark { grid-row: 1 / span 2; }
  .stamina-advance-route { display: flex; grid-column: 2; min-width: 0; align-items: baseline; justify-items: initial; gap: 7px; padding-left: 0; border-left: 0; }
  .stamina-advance-route small { font-size: .39rem; }
  .stamina-advance-route strong { font-size: .58rem; }
}

/* Home command deck: rest-point utilities, expedition command and support rails. */
.home-party-stage:not(.equipment-party-stage) { height: 330px; border: 0; background-color: #11171c; background-position: center 72%; }
.home-party-stage:not(.equipment-party-stage) .equipment-party-background { object-position: center 70%; }
.home-party-stage:not(.equipment-party-stage)::after { background: linear-gradient(180deg, rgb(8 12 17 / 72%) 0%, rgb(8 12 17 / 10%) 36%, rgb(8 12 17 / 22%) 65%, rgb(8 12 17 / 88%) 100%); }
.home-party-stage:not(.equipment-party-stage)::before { bottom: 43px; background: radial-gradient(ellipse, rgb(253 158 62 / 35%), transparent 72%); }
.home-party-stage:not(.equipment-party-stage) .home-party-heading { top: 16px; left: 21px; gap: 3px; }
.home-party-stage:not(.equipment-party-stage) .home-party-heading strong { font-size: 1.23rem; }
.home-party-heading small { color: #e2d6bf; font-size: .64rem; font-weight: 500; }
.home-party-stage:not(.equipment-party-stage) .home-party-member { bottom: 41px; height: 212px; }
.home-party-stage:not(.equipment-party-stage) .home-party-arrow { top: 49%; }
.home-party-stage:not(.equipment-party-stage) .profile-background-trigger { top: 15px; right: 15px; }
.home-party-stage:not(.equipment-party-stage) .home-party-caption { background: linear-gradient(90deg, rgb(8 14 19 / 88%), rgb(25 29 31 / 97%) 50%, rgb(8 14 19 / 88%)); border-top: 1px solid rgb(105 176 198 / 18%); }

.home-camp-market { position: relative; isolation: isolate; display: grid; gap: 13px; overflow: hidden; padding: 14px 15px 15px; border: 1px solid rgb(114 153 167 / 26%); border-radius: 4px; background: radial-gradient(circle at 8% 0%, rgb(46 114 132 / 16%), transparent 31%), radial-gradient(circle at 92% 100%, rgb(179 136 62 / 10%), transparent 32%), linear-gradient(135deg, rgb(17 25 30 / 98%), rgb(10 15 20 / 99%)); box-shadow: 0 14px 32px rgb(0 0 0 / 31%), inset 0 1px rgb(211 238 242 / 5%); }
.home-camp-market::before { position: absolute; z-index: -1; top: 0; right: 14%; left: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgb(92 202 226 / 55%), rgb(216 177 96 / 38%), transparent); content: ""; }
.home-camp-market::after { position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 35px, rgb(123 187 201 / 2%) 35px 36px); content: ""; pointer-events: none; }
.home-camp-market-heading { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.home-camp-market-heading p, .home-camp-market-heading h2, .home-camp-market-heading small { margin: 0; }
.home-hub-mechanism { position: relative; display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgb(111 188 206 / 23%); border-radius: 50%; background: radial-gradient(circle, rgb(23 62 73 / 82%), rgb(6 13 18 / 90%) 67%); box-shadow: inset 0 0 13px rgb(78 198 222 / 10%); }
.home-hub-gear { width: 34px; height: 34px; opacity: .45; filter: grayscale(.45) sepia(.15) drop-shadow(0 0 5px rgb(89 195 217 / 20%)); }
.home-hub-crystal { position: absolute; width: 17px; height: 25px; filter: drop-shadow(0 0 6px rgb(50 184 255 / 72%)); }
.home-hub-heading-copy { min-width: 0; }
.home-hub-heading-copy .eyebrow { color: #78aebe; font-size: .54rem; letter-spacing: .16em; }
.home-camp-market-heading h2 { color: #ede4d2; font-family: "Yu Mincho", serif; font-size: 1.02rem; font-weight: 600; letter-spacing: .08em; }
.home-hub-heading-copy > small { display: block; overflow: hidden; margin-top: 2px; color: #85939a; font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.home-hub-readout { display: grid; min-width: 92px; justify-items: end; gap: 2px; padding-left: 12px; border-left: 1px solid rgb(118 168 181 / 17%); }
.home-hub-readout small { display: inline-flex; align-items: center; gap: 5px; color: #748991; font-size: .45rem; letter-spacing: .12em; }
.home-hub-readout i, .home-expedition-status i, .home-adventurer-presence-heading i { width: 5px; height: 5px; border-radius: 50%; background: #69d49a; box-shadow: 0 0 8px rgb(105 212 154 / 75%); }
.home-hub-readout strong { color: #d9c28c; font-family: Georgia, serif; font-size: .8rem; font-weight: 500; letter-spacing: .1em; }
.home-camp-shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgb(108 144 154 / 21%); border-radius: 2px; background: rgb(105 151 163 / 14%); }
.home-camp-shop { --facility-rgb: 190 151 86; position: relative; display: grid; min-width: 0; min-height: 91px; justify-items: center; align-content: center; gap: 2px; overflow: hidden; padding: 10px 5px 7px; border: 0; border-radius: 0; background: radial-gradient(circle at 50% 38%, rgb(var(--facility-rgb) / 9%), transparent 47%), linear-gradient(155deg, rgb(24 29 32 / 98%), rgb(12 17 21 / 99%)); color: #eee8dc; cursor: pointer; text-align: center; transition: background .18s ease, box-shadow .18s ease; }
.home-camp-shop.shop-market { --facility-rgb: 92 181 202; }
.home-camp-shop.shop-character, .home-camp-shop.shop-roles { --facility-rgb: 159 126 197; }
.home-camp-shop.shop-arena { --facility-rgb: 198 148 76; }
.home-camp-shop.shop-crystals { --facility-rgb: 78 153 240; }
.home-camp-shop::before { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: linear-gradient(180deg, transparent, rgb(var(--facility-rgb) / 75%), transparent); content: ""; }
.home-camp-shop::after { position: absolute; right: 10px; bottom: 5px; left: 10px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--facility-rgb) / 29%), transparent); content: ""; }
.home-camp-shop-index { position: absolute; top: 6px; right: 7px; color: rgb(var(--facility-rgb) / 47%); font-family: Georgia, serif; font-size: .47rem; letter-spacing: .08em; }
.home-camp-shop-notice { position: absolute; z-index: 2; top: 5px; left: 6px; padding: 2px 6px; border-radius: 99px; background: #a33b37; color: #fff2ef; font-size: .5rem; font-weight: 800; box-shadow: 0 2px 6px rgb(0 0 0 / 42%); }
.home-camp-shop:hover, .home-camp-shop:focus-visible { background: radial-gradient(circle at 50% 38%, rgb(var(--facility-rgb) / 18%), transparent 53%), linear-gradient(155deg, rgb(31 39 44 / 100%), rgb(14 20 24 / 100%)); box-shadow: inset 0 0 0 1px rgb(var(--facility-rgb) / 48%); }
.home-camp-shop:focus-visible { z-index: 1; outline: 2px solid #d7c18e; outline-offset: -3px; }
.home-camp-shop-icon { display: grid; height: 38px; place-items: center; }
.home-camp-shop-icon img { display: block; width: 37px; height: 37px; object-fit: contain; filter: drop-shadow(0 4px 5px #000) drop-shadow(0 0 5px rgb(var(--facility-rgb) / 13%)); }
.home-camp-shop strong { overflow: hidden; max-width: 100%; font-family: "Yu Mincho", serif; font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.home-camp-shop small { color: #8d989d; font-size: .52rem; white-space: nowrap; }

.home-hero { position: relative; isolation: isolate; padding: 0; overflow: hidden; border: 1px solid rgb(177 145 77 / 50%); border-radius: 4px; background: radial-gradient(circle at 88% 14%, rgb(36 162 195 / 12%), transparent 31%), radial-gradient(circle at 8% 100%, rgb(184 133 48 / 13%), transparent 42%), linear-gradient(120deg, rgb(29 27 25 / 98%), rgb(9 19 25 / 99%)); box-shadow: 0 17px 37px rgb(0 0 0 / 35%), inset 0 0 28px rgb(15 70 82 / 8%); }
.home-hero::before { position: absolute; z-index: -1; top: 0; right: 52px; left: 52px; height: 1px; background: linear-gradient(90deg, transparent, #bc9755, #77c3d5, transparent); content: ""; }
.home-hero::after { position: absolute; z-index: -1; right: -31px; bottom: -55px; width: 170px; height: 170px; border: 1px solid rgb(95 172 190 / 8%); border-radius: 50%; box-shadow: inset 0 0 0 18px rgb(95 172 190 / 2%), inset 0 0 0 19px rgb(95 172 190 / 8%); content: ""; }
.home-command-panel { position: relative; width: 100%; max-width: none; margin: 0; padding: 12px 17px 16px; }
.home-command-panel::before, .home-command-panel::after { position: absolute; width: 18px; height: 18px; border-color: rgb(210 177 105 / 55%); content: ""; pointer-events: none; }
.home-command-panel::before { top: 7px; left: 7px; border-top: 1px solid; border-left: 1px solid; }
.home-command-panel::after { right: 7px; bottom: 7px; border-right: 1px solid; border-bottom: 1px solid; }
.home-expedition-status { display: flex; min-height: 20px; align-items: center; justify-content: space-between; gap: 12px; margin: -1px 4px 11px; padding-bottom: 7px; border-bottom: 1px solid rgb(133 159 164 / 14%); color: #79939b; font-size: .47rem; letter-spacing: .13em; }
.home-expedition-status span { display: inline-flex; align-items: center; gap: 6px; }
.home-expedition-status strong { color: #aa9369; font-family: Georgia, serif; font-size: .5rem; font-weight: 500; }
.home-hero-copy { position: relative; z-index: 1; }
.home-action-heading { margin-bottom: 8px; }
.home-action-heading > span { border-color: rgb(92 175 195 / 24%); border-radius: 50%; background: radial-gradient(circle, rgb(20 63 74 / 70%), rgb(5 11 15 / 70%)); box-shadow: 0 0 16px rgb(46 171 198 / 8%); }
.home-action-heading strong { color: #eee4d0; }
.home-action-heading > b { border-color: rgb(198 161 81 / 28%); background: rgb(92 66 25 / 39%); color: #e5cc91; }
.home-hero-copy h1 { color: #f4dcaa; letter-spacing: .07em; text-shadow: 0 0 18px rgb(211 164 78 / 13%), 0 2px 8px #000; }
.home-hero-copy > p:not(.home-alert) { color: #aebcc1; }
.home-hero-actions { position: relative; z-index: 1; }
.home-hero-actions .secondary-button { border-color: rgb(104 133 144 / 35%); border-radius: 3px; background: linear-gradient(180deg, rgb(37 46 52 / 87%), rgb(19 26 31 / 94%)); }
.home-depart-button { flex: 1; border-color: #c3a15c; border-radius: 3px; background: linear-gradient(180deg, #9b7935, #67481a); box-shadow: inset 0 1px rgb(255 232 175 / 18%), 0 7px 20px rgb(0 0 0 / 29%); font-family: "Yu Mincho", serif; font-size: 1rem; letter-spacing: .06em; }
.home-depart-button:hover, .home-depart-button:focus-visible { background: linear-gradient(180deg, #b28d42, #765321); }

.home-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-top: 1px solid rgb(116 151 161 / 23%); border-bottom: 1px solid rgb(116 151 161 / 23%); border-radius: 2px; background: rgb(97 133 144 / 14%); }
.home-shortcut { --shortcut-rgb: 105 154 179; display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; min-width: 0; min-height: 57px; align-items: center; gap: 7px; padding: 7px 9px; border: 0; border-radius: 0; background: linear-gradient(150deg, rgb(24 31 36 / 98%), rgb(12 18 23 / 99%)); color: #eae5da; cursor: pointer; text-align: left; }
.home-shortcut-items { --shortcut-rgb: 91 174 184; }
.home-shortcut-cores { --shortcut-rgb: 136 106 193; }
.home-shortcut img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 4px #000); }
.home-shortcut-copy { display: grid; min-width: 0; gap: 1px; }
.home-shortcut-copy small { overflow: hidden; color: rgb(var(--shortcut-rgb) / 70%); font-size: .41rem; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
.home-shortcut-copy > span { overflow: hidden; font-family: "Yu Mincho", serif; font-size: .72rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.home-shortcut > i { color: rgb(var(--shortcut-rgb) / 45%); font-family: serif; font-size: 1rem; font-style: normal; }
.home-shortcut:hover, .home-shortcut:focus-visible { background: linear-gradient(150deg, rgb(var(--shortcut-rgb) / 15%), rgb(15 22 27 / 100%)); box-shadow: inset 0 0 0 1px rgb(var(--shortcut-rgb) / 45%); }
.home-shortcut:focus-visible { z-index: 1; outline: 2px solid #d9ccad; outline-offset: -3px; }

.home-law-gate { --law-gate-rgb: 129 91 184; position: relative; isolation: isolate; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; min-width: 0; min-height: 90px; align-items: center; gap: 12px; overflow: hidden; padding: 11px 14px; border: 1px solid rgb(164 94 121 / 43%); border-radius: 4px; background: radial-gradient(circle at 8% 50%, rgb(var(--law-gate-rgb) / 18%), transparent 26%), radial-gradient(circle at 90% 0%, rgb(166 72 93 / 13%), transparent 34%), linear-gradient(108deg, rgb(43 20 29 / 98%), rgb(16 14 24 / 99%)); box-shadow: 0 13px 30px rgb(0 0 0 / 29%), inset 0 1px rgb(235 198 212 / 5%); color: var(--text); cursor: pointer; text-align: left; }
.home-law-gate::before { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 3px; background: linear-gradient(180deg, transparent, rgb(193 88 117 / 90%), rgb(122 86 190 / 95%), transparent); content: ""; }
.home-law-gate::after { position: absolute; z-index: -1; right: -58px; width: 156px; height: 156px; border: 1px solid rgb(var(--law-gate-rgb) / 8%); border-radius: 50%; box-shadow: inset 0 0 0 18px rgb(var(--law-gate-rgb) / 2%), inset 0 0 0 19px rgb(var(--law-gate-rgb) / 7%); content: ""; }
.home-law-gate:hover, .home-law-gate:focus-visible { border-color: rgb(202 119 147 / 70%); background: radial-gradient(circle at 8% 50%, rgb(var(--law-gate-rgb) / 25%), transparent 29%), radial-gradient(circle at 90% 0%, rgb(166 72 93 / 19%), transparent 36%), linear-gradient(108deg, rgb(52 24 35 / 100%), rgb(20 17 30 / 100%)); box-shadow: 0 15px 34px rgb(0 0 0 / 35%), inset 0 0 0 1px rgb(188 128 205 / 16%); }
.home-law-gate:focus-visible { outline: 2px solid #dfbdcf; outline-offset: 2px; }
.home-law-gate-mark { position: relative; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgb(var(--law-gate-rgb) / 32%); border-radius: 50%; background: radial-gradient(circle, rgb(var(--law-gate-rgb) / 24%), rgb(112 50 72 / 8%) 58%, transparent 61%); box-shadow: 0 0 18px rgb(var(--law-gate-rgb) / 18%), inset 0 0 14px rgb(var(--law-gate-rgb) / 9%); }
.home-law-gate-mark::before { position: absolute; inset: 4px; border: 1px solid rgb(214 170 227 / 13%); border-radius: 50%; content: ""; }
.home-law-gate-icon { position: relative; z-index: 1; width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 4px 7px rgb(0 0 0 / 48%)) drop-shadow(0 0 8px rgb(var(--law-gate-rgb) / 23%)); }
.home-law-gate-copy { display: grid; min-width: 0; gap: 2px; }
.home-law-gate-copy > small { color: rgb(201 132 158); font-size: .44rem; letter-spacing: .17em; }
.home-law-gate-copy > strong { color: #f1e2e6; font-family: "Yu Mincho", serif; font-size: 1.02rem; font-weight: 600; letter-spacing: .08em; }
.home-law-gate-copy > em { overflow: hidden; color: #a99ba5; font-size: .59rem; font-style: normal; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.home-law-gate-meta { position: relative; z-index: 1; display: grid; min-width: 138px; justify-items: end; gap: 4px; padding-left: 13px; border-left: 1px solid rgb(194 126 158 / 15%); }
.home-law-gate-meta > b { display: inline-flex; align-items: center; gap: 6px; color: #c3abb8; font-size: .58rem; }
.home-law-gate-meta > b > i { width: 6px; height: 6px; border-radius: 50%; background: #a19aa7; box-shadow: 0 0 8px rgb(161 154 167 / 45%); }
.home-law-gate.is-open .home-law-gate-meta > b { color: #e5c786; }
.home-law-gate.is-open .home-law-gate-meta > b > i { background: #77d59f; box-shadow: 0 0 9px rgb(119 213 159 / 78%); }
.home-law-gate.is-checking .home-law-gate-meta > b > i { background: #8dc4d7; box-shadow: 0 0 8px rgb(141 196 215 / 65%); }
.home-law-gate-meta > small { color: #816f7a; font-size: .48rem; }
.home-law-gate-meta > em { color: #ddbd89; font-size: .61rem; font-style: normal; font-weight: 700; }
.home-law-gate-meta > em span { padding-left: 4px; color: #b78ca4; font-size: .85rem; }

.home-adventurer-presence { grid-template-columns: auto minmax(0, 1fr); gap: 14px; min-height: 50px; padding: 7px 12px; border: 0; border-left: 2px solid rgb(76 170 194 / 48%); border-radius: 2px; background: linear-gradient(90deg, rgb(9 30 40 / 96%), rgb(10 18 24 / 78%)); box-shadow: inset 0 1px rgb(114 195 215 / 8%), 0 8px 20px rgb(0 0 0 / 18%); }
.home-adventurer-presence-heading { display: grid; gap: 2px; min-width: 0; }
.home-adventurer-presence-heading > small { display: inline-flex; align-items: center; gap: 5px; color: #568e9e; font-size: .42rem; letter-spacing: .12em; white-space: nowrap; }
.home-adventurer-presence-heading > strong { color: #c7e0e8; font-family: "Yu Mincho", serif; font-size: .69rem; font-weight: 600; white-space: nowrap; }
.home-adventurer-list { padding: 2px 0; }

.crystal-shop-panel { scroll-margin-top: 90px; }
.home-service-grid { grid-template-columns: minmax(0, 1fr); }
.home-service-card { position: relative; overflow: hidden; border-radius: 3px; }
.home-limited-abyss-card { border-color: rgb(157 71 81 / 35%); background: radial-gradient(circle at 12% 50%, rgb(98 55 156 / 13%), transparent 25%), linear-gradient(100deg, rgb(43 18 25 / 95%), rgb(17 13 20 / 98%)); }
.home-limited-abyss-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: linear-gradient(180deg, transparent, #9b4860, #61429b, transparent); content: ""; }
.home-service-channel { position: absolute; top: 5px; right: 29px; color: rgb(184 107 131 / 35%); font-size: .39rem; letter-spacing: .13em; }
.home-service-symbol { border-color: rgb(158 88 142 / 18%); background: radial-gradient(circle, rgb(76 35 89 / 32%), rgb(5 7 12 / 39%)); box-shadow: inset 0 0 12px rgb(130 71 159 / 11%); }

.home-overview-card { position: relative; overflow: hidden; border-radius: 4px; }
.home-overview-card::before { position: absolute; top: 0; right: 19%; left: 19%; height: 1px; background: linear-gradient(90deg, transparent, rgb(118 191 208 / 36%), transparent); content: ""; }
.home-card-heading { padding-bottom: 8px; border-bottom: 1px solid rgb(130 159 165 / 10%); }

@media (max-width: 700px) {
  .home-party-stage:not(.equipment-party-stage) { width: calc(100% + 24px); height: 300px; margin-right: -12px; margin-left: -12px; border: 0; border-radius: 0; }
  #app > .home-screen:first-child > .home-party-stage:not(.equipment-party-stage):first-child { margin-top: -15px; }
  .home-party-stage:not(.equipment-party-stage) .home-party-heading { top: 11px; left: 12px; }
  .home-party-stage:not(.equipment-party-stage) .home-party-heading strong { font-size: .95rem; }
  .home-party-heading small { font-size: .53rem; }
  .home-party-stage:not(.equipment-party-stage) .profile-background-trigger { top: 9px; right: 9px; min-height: 29px; }
  .home-party-stage:not(.equipment-party-stage) .profile-background-trigger span { display: none; }
  .home-party-stage:not(.equipment-party-stage) .profile-background-trigger strong { font-size: .56rem; }
  .home-party-stage:not(.equipment-party-stage) .home-party-member { bottom: 40px; width: 126px; height: 190px; }
  .home-party-stage:not(.equipment-party-stage) .home-party-arrow { top: 47%; }
  .home-party-stage:not(.equipment-party-stage)::before { bottom: 43px; }
  .home-camp-market { gap: 10px; padding: 11px 10px 12px; }
  .home-camp-market-heading { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; }
  .home-hub-mechanism { width: 36px; height: 36px; }
  .home-hub-gear { width: 29px; height: 29px; }
  .home-hub-crystal { width: 14px; height: 21px; }
  .home-hub-heading-copy .eyebrow { font-size: .43rem; }
  .home-camp-market-heading h2 { font-size: .86rem; }
  .home-hub-heading-copy > small { font-size: .48rem; }
  .home-hub-readout { min-width: 65px; padding-left: 8px; }
  .home-hub-readout small { font-size: .36rem; letter-spacing: .06em; }
  .home-hub-readout strong { font-size: .66rem; }
  .home-camp-shop { min-height: 84px; padding: 9px 3px 6px; }
  .home-camp-shop-index { top: 4px; right: 5px; font-size: .4rem; }
  .home-camp-shop-icon { height: 34px; }
  .home-camp-shop-icon img { width: 34px; height: 34px; }
  .home-camp-shop strong { font-size: .7rem; }
  .home-camp-shop small { font-size: .49rem; }
  .home-command-panel { padding: 10px 13px 13px; }
  .home-expedition-status { margin: 0 2px 8px; padding-bottom: 5px; font-size: .39rem; }
  .home-expedition-status strong { font-size: .42rem; }
  .home-depart-button { font-size: .8rem; }
  .home-shortcut { grid-template-columns: 25px minmax(0, 1fr) auto; min-height: 53px; gap: 5px; padding: 6px 7px; }
  .home-shortcut img { width: 24px; height: 24px; }
  .home-shortcut-copy small { font-size: .34rem; }
  .home-shortcut-copy > span { font-size: .63rem; }
  .home-shortcut > i { font-size: .8rem; }
  .home-law-gate { grid-template-columns: 50px minmax(0, 1fr); gap: 8px 10px; min-height: 0; padding: 10px; }
  .home-law-gate-mark { width: 50px; height: 50px; }
  .home-law-gate-icon { width: 50px; height: 50px; }
  .home-law-gate-copy > small { font-size: .38rem; }
  .home-law-gate-copy > strong { font-size: .84rem; }
  .home-law-gate-copy > em { font-size: .52rem; }
  .home-law-gate-meta { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; min-width: 0; align-items: center; justify-items: start; gap: 7px; padding: 7px 2px 0; border-top: 1px solid rgb(194 126 158 / 12%); border-left: 0; }
  .home-law-gate-meta > small { overflow: hidden; font-size: .43rem; text-overflow: ellipsis; white-space: nowrap; }
  .home-law-gate-meta > em { justify-self: end; font-size: .54rem; white-space: nowrap; }
  .home-adventurer-presence { grid-template-columns: 1fr; gap: 4px; min-height: 54px; padding: 7px 9px; border-right: 0; }
  .home-adventurer-presence-heading { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
  .home-adventurer-presence-heading > strong { font-size: .62rem; }
}
@media (max-width: 360px) {
  .adventurer-card-selector .party-member-button { grid-template-columns: 34px minmax(0, 1fr); gap: 3px; }
  .adventurer-card-member-index { display: none; }
  .adventurer-card-selector .party-member-thumb,
  .adventurer-card-selector .party-member-thumb .actor-image { width: 34px; height: 42px; }
  .adventurer-card-selector .party-member-button strong { font-size: .62rem; }
  .adventurer-card-selector .party-member-button small { font-size: .48rem; }
  .home-camp-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Equipment tab: Seven Gear maintenance deck */
.equipment-deck-shell { --equipment-glow: 82 177 199; position: relative; isolation: isolate; display: grid; gap: 11px; overflow: hidden; padding: 14px; border: 1px solid rgb(105 157 171 / 32%); border-radius: 5px; background: radial-gradient(circle at 5% 0%, rgb(57 144 163 / 15%), transparent 28%), radial-gradient(circle at 96% 42%, rgb(177 134 58 / 9%), transparent 31%), linear-gradient(142deg, rgb(15 23 29 / 99%), rgb(7 12 17 / 100%)); box-shadow: 0 18px 42px rgb(0 0 0 / 38%), inset 0 1px rgb(202 235 242 / 5%); }
.equipment-deck-shell::before { position: absolute; z-index: -1; top: 0; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgb(104 211 232 / 57%), rgb(214 174 92 / 42%), transparent); content: ""; }
.equipment-deck-shell::after { position: absolute; z-index: -1; right: -78px; bottom: 16%; width: 205px; height: 205px; border: 1px solid rgb(var(--equipment-glow) / 7%); border-radius: 50%; box-shadow: inset 0 0 0 23px rgb(var(--equipment-glow) / 2%), inset 0 0 0 24px rgb(var(--equipment-glow) / 6%); content: ""; pointer-events: none; }
.equipment-deck-heading { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.equipment-deck-mechanism { position: relative; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgb(var(--equipment-glow) / 25%); border-radius: 50%; background: radial-gradient(circle, rgb(23 64 75 / 80%), rgb(5 12 17 / 94%) 67%); box-shadow: inset 0 0 14px rgb(var(--equipment-glow) / 10%), 0 0 17px rgb(var(--equipment-glow) / 5%); }
.equipment-deck-gear { width: 35px; height: 35px; opacity: .44; filter: grayscale(.45) sepia(.12) drop-shadow(0 0 5px rgb(var(--equipment-glow) / 24%)); }
.equipment-deck-crystal { position: absolute; width: 17px; height: 25px; filter: drop-shadow(0 0 7px rgb(53 188 255 / 78%)); }
.equipment-deck-heading-copy { min-width: 0; }
.equipment-deck-heading-copy p, .equipment-deck-heading-copy h1, .equipment-deck-heading-copy small { margin: 0; }
.equipment-deck-heading-copy p { overflow: hidden; color: #6ca5b5; font-size: .5rem; letter-spacing: .16em; text-overflow: ellipsis; white-space: nowrap; }
.equipment-deck-heading-copy h1 { color: #efe5d1; font-family: "Yu Mincho", serif; font-size: 1.05rem; font-weight: 600; letter-spacing: .1em; text-shadow: 0 2px 8px #000; }
.equipment-deck-heading-copy small { display: block; overflow: hidden; margin-top: 2px; color: #85949b; font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }
.equipment-deck-readout { display: grid; min-width: 88px; justify-items: end; gap: 2px; padding-left: 11px; border-left: 1px solid rgb(114 166 179 / 18%); }
.equipment-deck-readout small { display: inline-flex; align-items: center; gap: 5px; color: #748d95; font-size: .41rem; letter-spacing: .11em; white-space: nowrap; }
.equipment-deck-readout i { width: 5px; height: 5px; border-radius: 50%; background: #6ed9a3; box-shadow: 0 0 8px rgb(110 217 163 / 76%); }
.equipment-deck-readout strong { color: #dbc38c; font-family: Georgia, serif; font-size: .75rem; font-weight: 500; letter-spacing: .09em; }

.equipment-member-deck { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 7px 9px; border-top: 1px solid rgb(var(--equipment-glow) / 17%); border-bottom: 1px solid rgb(var(--equipment-glow) / 13%); background: linear-gradient(90deg, rgb(8 27 35 / 76%), rgb(13 20 25 / 47%)); }
.equipment-member-deck::before { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: linear-gradient(180deg, transparent, rgb(var(--equipment-glow) / 69%), transparent); content: ""; }
.equipment-member-deck-heading { display: grid; min-width: 100px; gap: 2px; }
.equipment-member-deck-heading > span { display: grid; gap: 1px; }
.equipment-member-deck-heading small { color: #5e9bad; font-size: .39rem; letter-spacing: .13em; }
.equipment-member-deck-heading strong { color: #d9e1df; font-family: "Yu Mincho", serif; font-size: .65rem; font-weight: 600; }
.equipment-member-deck-heading em { color: rgb(var(--equipment-glow) / 48%); font-size: .37rem; font-style: normal; letter-spacing: .09em; }
.equipment-member-deck .equipment-member-selector { justify-self: start; width: auto; max-width: 100%; margin: 0; padding: 1px; scrollbar-width: none; }
.equipment-member-deck .equipment-member-selector::-webkit-scrollbar { display: none; }
.equipment-member-deck.has-member-overflow.at-member-start:not(.at-member-end) .equipment-member-selector { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 25px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 25px), transparent 100%); }
.equipment-member-deck.has-member-overflow:not(.at-member-start):not(.at-member-end) .equipment-member-selector { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25px, #000 calc(100% - 25px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 25px, #000 calc(100% - 25px), transparent 100%); }
.equipment-member-deck.has-member-overflow.at-member-end:not(.at-member-start) .equipment-member-selector { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25px, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 25px, #000 100%); }
.equipment-member-button { position: relative; border-radius: 3px; background: linear-gradient(145deg, rgb(17 25 30 / 92%), rgb(6 11 15 / 96%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.equipment-member-button::after { position: absolute; right: 5px; bottom: 3px; left: 5px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--party-color-rgb, var(--equipment-glow)) / 52%), transparent); content: ""; opacity: .35; }
.equipment-member-button.active { border-color: rgb(var(--party-color-rgb, var(--equipment-glow)) / 68%); background: radial-gradient(circle at 50% 72%, rgb(var(--party-color-rgb, var(--equipment-glow)) / 17%), transparent 62%), rgb(7 14 18 / 96%); box-shadow: inset 0 0 0 1px rgb(var(--party-color-rgb, var(--equipment-glow)) / 18%), 0 0 15px rgb(var(--party-color-rgb, var(--equipment-glow)) / 10%); }
.equipment-member-button.active::after { opacity: 1; }

.equipment-deck-shell .hero-equipment-panel { width: 100%; margin: 0; padding: 0 0 3px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.equipment-deck-shell .hero-equipment-summary { gap: 10px; }
.equipment-party-stage { height: 292px; margin: 0; overflow: hidden; border: 1px solid rgb(116 161 172 / 22%); border-radius: 3px; background-color: #081016; box-shadow: inset 0 0 44px rgb(0 0 0 / 41%), 0 12px 27px rgb(0 0 0 / 24%); }
.equipment-party-stage::before { z-index: 1; right: 15%; bottom: 16px; left: 15%; height: 74px; background: radial-gradient(ellipse, rgb(64 193 220 / 18%), rgb(211 153 61 / 8%) 42%, transparent 73%); filter: blur(11px); }
.equipment-party-stage::after { z-index: 2; background: linear-gradient(0deg, rgb(3 8 14 / 92%), transparent 53%), linear-gradient(90deg, rgb(3 8 14 / 56%), transparent 42%, rgb(3 8 14 / 56%)), repeating-linear-gradient(90deg, transparent 0 54px, rgb(var(--equipment-glow) / 2%) 54px 55px); box-shadow: inset 0 0 0 1px rgb(209 180 117 / 4%); }
.equipment-party-stage .equipment-party-background { opacity: .94; filter: saturate(.94) contrast(1.03); }
.equipment-party-identity { top: 10px; display: grid; grid-template-columns: minmax(0, auto) auto; gap: 0 8px; min-width: 150px; padding: 6px 12px 7px; border-color: rgb(var(--equipment-glow) / 22%); border-radius: 3px; background: linear-gradient(100deg, rgb(5 16 22 / 88%), rgb(13 20 25 / 84%)); box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 5px 15px rgb(0 0 0 / 27%); text-align: left; backdrop-filter: blur(7px); }
.equipment-party-identity::before { position: absolute; top: 5px; bottom: 5px; left: 0; width: 2px; background: linear-gradient(180deg, transparent, rgb(var(--equipment-glow) / 76%), transparent); content: ""; }
.equipment-party-identity small { grid-column: 1 / -1; color: #609bae; font-size: .36rem; letter-spacing: .14em; }
.equipment-party-identity strong { color: #f1eadc; font-family: "Yu Mincho", serif; font-size: .83rem; letter-spacing: .06em; }
.equipment-party-identity .home-party-role { align-self: center; color: #a9d6e3; font-size: .55rem; }
.equipment-party-stage .home-party-member { bottom: 2px; height: 250px; }
.equipment-party-stage .home-party-member.position-center { filter: drop-shadow(0 9px 8px rgb(0 0 0 / 66%)) drop-shadow(0 0 15px rgb(var(--equipment-glow) / 9%)); }
.equipment-party-stage .home-party-arrow { z-index: 8; border-color: rgb(var(--equipment-glow) / 27%); border-radius: 3px; background: linear-gradient(180deg, rgb(17 27 33 / 88%), rgb(5 11 15 / 90%)); color: #d8e7e8; box-shadow: inset 0 1px rgb(255 255 255 / 5%); }

.equipment-loadout-board, .equipment-parameter-board, .equipment-deck-shell .hero-command-summary { position: relative; overflow: hidden; border: 1px solid rgb(103 148 159 / 17%); border-radius: 3px; background: linear-gradient(145deg, rgb(18 26 31 / 91%), rgb(8 13 18 / 96%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.equipment-loadout-board { margin-top: 9px; padding: 9px; }
.equipment-loadout-board::before, .equipment-parameter-board::before, .equipment-deck-shell .hero-command-summary::before { position: absolute; top: 0; right: 18%; left: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--equipment-glow) / 39%), transparent); content: ""; }
.equipment-board-heading { display: flex; min-width: 0; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 7px; padding: 0 2px 6px; border-bottom: 1px solid rgb(121 156 163 / 11%); }
.equipment-board-heading > span { display: grid; min-width: 0; gap: 1px; }
.equipment-board-heading small { color: #619aae; font-size: .38rem; letter-spacing: .14em; }
.equipment-board-heading strong { color: #e7dfd0; font-family: "Yu Mincho", serif; font-size: .7rem; font-weight: 600; letter-spacing: .04em; }
.equipment-board-heading em { flex: 0 0 auto; color: #8c7b59; font-family: Georgia, serif; font-size: .42rem; font-style: normal; letter-spacing: .08em; white-space: nowrap; }
.equipment-deck-shell .hero-equipped-list { gap: 5px; margin: 0; padding: 0; border: 0; }
.equipment-deck-shell .hero-equipped-list .hero-equipped-slot { position: relative; min-height: 35px; align-items: center; padding: 5px 7px; border-left: 2px solid rgb(var(--equipment-glow) / 24%); background: linear-gradient(90deg, rgb(var(--equipment-glow) / 6%), rgb(0 0 0 / 10%)); box-shadow: inset 0 1px rgb(255 255 255 / 2%); }
.equipment-deck-shell .hero-equipped-list .hero-equipped-slot::after { position: absolute; right: 5px; bottom: 0; left: 5px; height: 1px; background: linear-gradient(90deg, rgb(var(--equipment-glow) / 11%), transparent); content: ""; }
.equipment-deck-shell .hero-equipped-list dt { color: #829197; font-size: .62rem; }
.equipment-deck-shell .hero-equipped-list dd { font-size: .7rem; text-shadow: 0 1px 5px #000; }
.equipment-deck-shell .hero-equipped-accessory { grid-column: 1 / -1; }

.equipment-deck-shell .hero-command-summary { margin-top: 8px; padding: 9px; }
.equipment-deck-shell .hero-equipment-summary > .equipment-role-board { margin-top: 0; }
.equipment-role-board > summary { min-height: 44px; align-items: center; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; cursor: pointer; list-style: none; }
.equipment-role-board > summary::-webkit-details-marker { display: none; }
.equipment-role-board > summary:focus-visible { outline: 2px solid var(--abyss-crystal); outline-offset: 2px; }
.equipment-role-board .equipment-board-heading > em { flex: 0 1 auto; min-width: 0; text-align: end; white-space: normal; overflow-wrap: anywhere; }
.equipment-role-board summary em > span { display: block; color: var(--text); }
.equipment-role-board summary i { display: inline-block; font-style: normal; }
.equipment-role-board[open] summary i { transform: rotate(180deg); }
.equipment-role-board .equipment-role-note { margin: 0; color: var(--muted); font-size: var(--ga-font-note); line-height: 1.5; }
.equipment-role-board .combat-role-choice { min-width: 0; overflow-wrap: anywhere; }
.equipment-role-comparison-trigger {
  display: flex; min-height: var(--ga-touch); align-items: center; gap: var(--ga-space-3);
  padding-block: var(--ga-space-1); cursor: pointer; list-style: none;
}
.equipment-role-comparison-trigger::-webkit-details-marker { display: none; }
.equipment-role-comparison-label {
  flex: none; color: var(--text); font-size: var(--ga-font-note); text-decoration: underline;
}
.equipment-role-comparison-scroll { margin-block-end: var(--ga-space-2); overflow-x: auto; }
.equipment-role-comparison-scroll:focus-visible { outline: 2px solid var(--abyss-crystal); outline-offset: -2px; }
.equipment-role-comparison table {
  width: 100%; min-width: calc(3.25rem + var(--role-compare-count) * 4rem);
  border-collapse: collapse; table-layout: fixed; font-size: var(--ga-font-note); line-height: 1.45;
}
.equipment-role-comparison caption { padding-block-end: var(--ga-space-1); color: var(--muted); text-align: start; }
.equipment-role-comparison :is(th, td) {
  padding: var(--ga-space-1); border-top: 1px solid var(--line); text-align: center; overflow-wrap: anywhere;
}
.equipment-role-comparison tr > th:first-child { width: 3.25rem; text-align: start; }
.equipment-role-comparison thead small { display: block; color: var(--muted); font-size: var(--ga-font-caption); }
.equipment-role-comparison td { font-variant-numeric: tabular-nums; }
.equipment-role-comparison .increase { color: var(--green); }
.equipment-role-comparison .decrease { color: var(--red); }
.equipment-role-comparison-features td { color: var(--muted); text-align: start; vertical-align: top; }
.equipment-deck-shell .hero-command-heading { display: block; margin: 0; color: #e7dfd0; font-size: .7rem; }
.equipment-deck-shell .hero-command-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.equipment-deck-shell .hero-command-slot { position: relative; grid-template-columns: 12px 23px minmax(0, 1fr); gap: 4px; min-height: 39px; padding: 5px; border-color: rgb(107 146 158 / 18%); border-radius: 3px; background: radial-gradient(circle at 35% 50%, rgb(var(--equipment-glow) / 8%), transparent 45%), rgb(3 9 13 / 45%); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.equipment-deck-shell .hero-command-slot:not(.empty)::after { position: absolute; right: 4px; bottom: 0; left: 4px; height: 1px; background: linear-gradient(90deg, transparent, rgb(201 164 85 / 45%), transparent); content: ""; }
.equipment-deck-shell .hero-command-number { color: #b79b62; font-family: Georgia, serif; }
.equipment-deck-shell .hero-command-slot strong { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }

.equipment-parameter-board { padding: 9px; }
.equipment-parameter-board .equipment-board-heading { margin-bottom: 6px; }
.equipment-parameter-board .stat-grid { gap: 4px; }
.equipment-parameter-board .stat { position: relative; overflow: hidden; border-left: 2px solid rgb(var(--equipment-glow) / 33%); background: linear-gradient(150deg, rgb(18 28 34 / 87%), rgb(5 10 14 / 88%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.equipment-parameter-board .stat::after { position: absolute; top: 3px; right: 4px; color: rgb(var(--equipment-glow) / 18%); font-family: Georgia, serif; font-size: .36rem; content: "◌"; }
.equipment-parameter-board .stat-tip-trigger { border: 0; background: transparent; }
.equipment-parameter-board .stat-tip-trigger:hover, .equipment-parameter-board .stat-tip-trigger:focus-visible { background: rgb(var(--equipment-glow) / 9%); box-shadow: inset 0 0 0 1px rgb(var(--equipment-glow) / 29%); }
.equipment-parameter-board .stat-label { color: #7f9098; }
.equipment-parameter-board .stat-tip-trigger strong { color: #e7e2d8; font-family: Georgia, serif; text-shadow: 0 1px 4px #000; }
.equipment-parameter-board .stat-tip-panel { border-color: rgb(var(--equipment-glow) / 20%); border-radius: 3px; background: rgb(6 18 24 / 86%); }

@media (max-width: 700px) {
  .equipment-deck-shell { width: calc(100% + 24px); margin-right: -12px; margin-left: -12px; padding: 11px 10px 13px; border-right: 0; border-left: 0; border-radius: 0; }
  .equipment-deck-heading { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; }
  .equipment-deck-mechanism { width: 36px; height: 36px; }
  .equipment-deck-gear { width: 29px; height: 29px; }
  .equipment-deck-crystal { width: 14px; height: 21px; }
  .equipment-deck-heading-copy p { font-size: .41rem; }
  .equipment-deck-heading-copy h1 { font-size: .88rem; }
  .equipment-deck-heading-copy small { font-size: .47rem; }
  .equipment-deck-readout { min-width: 67px; padding-left: 7px; }
  .equipment-deck-readout small { font-size: .34rem; letter-spacing: .06em; }
  .equipment-deck-readout strong { font-size: .64rem; }
  .equipment-member-deck { grid-template-columns: 86px minmax(0, 1fr); gap: 6px; padding: 6px 7px; }
  .equipment-member-deck-heading { min-width: 0; }
  .equipment-member-deck-heading strong { font-size: .56rem; }
  .equipment-member-deck-heading em { font-size: .31rem; }
  .equipment-member-deck .equipment-member-selector { grid-auto-columns: 50px; gap: 5px; }
  .equipment-deck-shell .hero-equipment-panel { width: 100%; margin: 0; padding: 0 0 2px; }
  .equipment-party-stage { width: 100%; height: 278px; margin: 0; border: 1px solid rgb(116 161 172 / 22%); border-radius: 3px; }
  .equipment-party-stage .home-party-member { bottom: 1px; width: 142px; height: 238px; }
  .equipment-party-stage .home-party-arrow { top: 48%; }
  .equipment-party-identity { min-width: 142px; max-width: calc(100% - 82px); padding: 5px 9px 6px; }
  .equipment-party-identity strong { font-size: .75rem; }
  .equipment-loadout-board { margin-top: 7px; padding: 8px; }
  .equipment-board-heading { margin-bottom: 6px; padding-bottom: 5px; }
  .equipment-board-heading strong, .equipment-deck-shell .hero-command-heading { font-size: .64rem; }
  .equipment-board-heading em { font-size: .36rem; }
  .equipment-deck-shell .hero-equipped-list { column-gap: 5px; row-gap: 4px; }
  .equipment-deck-shell .hero-equipped-list .hero-equipped-slot { min-height: 34px; padding: 4px 5px; }
  .equipment-deck-shell .hero-equipped-list dt { grid-template-columns: 15px 2.75em .6em; gap: 2px; font-size: .56rem; }
  .equipment-deck-shell .hero-equipped-list dd { font-size: .62rem; }
  .equipment-deck-shell .hero-command-summary, .equipment-parameter-board { padding: 8px; }
  .equipment-deck-shell .hero-command-slot { grid-template-columns: 10px 20px minmax(0, 1fr); min-height: 37px; padding: 4px 3px; }
  .equipment-deck-shell .hero-command-slot strong { font-size: .58rem; }
  .equipment-parameter-board .stat-grid { gap: 3px; }
}

@media (max-width: 360px) {
  .equipment-deck-heading-copy small { display: none; }
  .equipment-member-deck { grid-template-columns: 74px minmax(0, 1fr); }
  .equipment-member-deck-heading strong { font-size: .5rem; }
  .equipment-member-deck .equipment-member-selector { grid-auto-columns: 46px; gap: 4px; }
  .equipment-party-stage { height: 254px; }
  .equipment-party-stage .home-party-member { height: 217px; }
  .equipment-board-heading em { font-size: .32rem; letter-spacing: .04em; }
}

/* Landing v2: abyss descent terminal */
body.landing-active { --landing-crystal: 95 204 226; --landing-gold: 211 174 92; background: #03070a; }
body.landing-active #app { background: #03070a; }
.landing-page { --landing-gutter: clamp(20px, 5vw, 88px); position: relative; isolation: isolate; background: radial-gradient(circle at 84% 3%, rgb(var(--landing-crystal) / 9%), transparent 24%), radial-gradient(circle at 12% 38%, rgb(105 62 137 / 8%), transparent 27%), linear-gradient(180deg, #04080b, #0a0e12 46%, #05080b); color: #e8eceb; }
.landing-page::before { position: fixed; z-index: -1; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgb(var(--landing-crystal) / 1.5%) calc(12.5% - 1px) 12.5%), linear-gradient(rgb(255 255 255 / 1.3%) 1px, transparent 1px); background-size: auto, 100% 72px; content: ""; pointer-events: none; }
.landing-header { min-height: 72px; border-bottom-color: rgb(var(--landing-crystal) / 19%); background: linear-gradient(90deg, rgb(3 8 12 / 96%), rgb(8 12 16 / 91%)); box-shadow: 0 14px 42px rgb(0 0 0 / 36%), inset 0 -1px rgb(var(--landing-gold) / 8%); }
.landing-brand { gap: 12px; }
.landing-brand-mechanism { position: relative; display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 1px solid rgb(var(--landing-crystal) / 28%); border-radius: 50%; background: radial-gradient(circle, rgb(34 90 102 / 58%), rgb(4 10 14 / 96%) 67%); box-shadow: inset 0 0 17px rgb(var(--landing-crystal) / 10%), 0 0 19px rgb(var(--landing-crystal) / 7%); }
.landing-brand-gear { width: 35px; height: 35px; opacity: .48; filter: grayscale(.45) drop-shadow(0 0 5px rgb(var(--landing-crystal) / 35%)); }
.landing-brand-crystal { position: absolute; width: 15px; height: 15px; filter: drop-shadow(0 0 7px rgb(var(--landing-crystal) / 65%)); }
.landing-brand strong { color: #edf4f2; font-family: Georgia, "Times New Roman", serif; letter-spacing: .18em; text-shadow: 0 0 18px rgb(var(--landing-crystal) / 11%); }
.landing-brand small { color: #71858b; letter-spacing: .13em; }
.landing-header-actions .primary-button, .landing-hero-actions .primary-button, .landing-rest-card .primary-button, .landing-final-actions .primary-button { border-color: rgb(var(--landing-gold) / 70%); background: linear-gradient(145deg, #8a681f, #5c4316); box-shadow: inset 0 1px rgb(255 245 194 / 24%), 0 9px 25px rgb(0 0 0 / 30%); color: #fff1c7; }
.landing-header-actions .primary-button:hover, .landing-hero-actions .primary-button:hover, .landing-rest-card .primary-button:hover, .landing-final-actions .primary-button:hover { border-color: #e9ca78; background: linear-gradient(145deg, #9a7628, #684c19); }
.landing-login-button { color: #9faeb1; }
.auth-landing.landing-hero { min-height: clamp(690px, calc(100dvh - 72px), 900px); border-bottom: 1px solid rgb(var(--landing-crystal) / 16%); background: #03070a; }
.landing-hero-image { object-position: center 48%; filter: saturate(.96) contrast(1.06); transform: scale(1.01); }
.landing-hero-shade { background: linear-gradient(90deg, rgb(2 6 9 / 97%) 0%, rgb(3 8 12 / 88%) 34%, rgb(3 8 12 / 17%) 65%, rgb(2 5 8 / 24%) 100%), linear-gradient(0deg, #03070a 0%, transparent 39%), radial-gradient(circle at 77% 48%, transparent 0 20%, rgb(2 5 8 / 24%) 59%); }
.landing-hero-grid { position: relative; z-index: 2; display: grid; width: 100%; min-height: inherit; grid-template-columns: minmax(0, 760px) minmax(270px, 340px); align-items: center; justify-content: space-between; gap: clamp(36px, 6vw, 100px); padding: 46px var(--landing-gutter) 64px; }
.landing-hero-copy { width: auto; min-height: 0; padding: 0; }
.auth-landing-copy > .eyebrow { color: rgb(var(--landing-crystal) / 86%); font-family: Georgia, serif; font-size: .65rem; letter-spacing: .22em; }
.auth-landing-copy h1 { margin: 14px 0 22px; color: #f1e7cf; font-size: clamp(3rem, 6vw, 5.6rem); font-weight: 500; line-height: 1.08; letter-spacing: .025em; text-shadow: 0 5px 25px #000, 0 0 35px rgb(var(--landing-crystal) / 8%); }
.auth-landing-copy h1 span { color: #c9dcde; font-size: .64em; letter-spacing: .08em; }
.auth-landing-concept { max-width: 620px; color: #c0c9c7; font-size: clamp(.92rem, 1.4vw, 1.08rem); line-height: 2; }
.landing-hero-actions { width: min(100%, 540px); margin-top: 32px; }
.landing-hero-actions .primary-button { position: relative; overflow: hidden; }
.landing-hero-actions .primary-button::after { position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgb(255 246 210 / 18%), transparent); content: ""; transform: skewX(-22deg); animation: landing-cta-shine 5.4s ease-in-out infinite; }
@keyframes landing-cta-shine { 0%, 72% { left: -45%; } 90%, 100% { left: 125%; } }
.landing-hero-facts { color: #829398; }
.landing-hero-facts li::before { color: rgb(var(--landing-crystal) / 77%); content: "◇"; }
.landing-beta-notice { display: flex; width: min(100%, 620px); align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px solid rgb(var(--landing-gold) / 22%); border-left: 3px solid rgb(var(--landing-gold) / 68%); background: rgb(7 13 16 / 72%); color: #8f9b9d; font-size: .67rem; line-height: 1.6; }
.landing-beta-notice strong { flex: 0 0 auto; color: #d8c08a; font-family: "Yu Mincho", serif; font-size: .7rem; letter-spacing: .08em; }
.landing-hero-console { align-self: center; overflow: hidden; border: 1px solid rgb(var(--landing-crystal) / 28%); border-radius: 5px; background: radial-gradient(circle at 100% 0%, rgb(var(--landing-crystal) / 11%), transparent 36%), linear-gradient(150deg, rgb(12 24 30 / 93%), rgb(4 9 13 / 96%)); box-shadow: 0 30px 70px rgb(0 0 0 / 52%), inset 0 1px rgb(255 255 255 / 5%); backdrop-filter: blur(8px); }
.landing-console-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-bottom: 1px solid rgb(var(--landing-crystal) / 15%); color: #7399a3; font-family: Georgia, serif; font-size: .48rem; letter-spacing: .16em; }
.landing-console-head span { display: flex; align-items: center; gap: 7px; }
.landing-console-head i { width: 6px; height: 6px; border-radius: 50%; background: #69d69c; box-shadow: 0 0 9px #69d69c; }
.landing-console-head strong { color: #8fdbb4; font-size: .45rem; }
.landing-console-core { padding: 21px 18px 18px; }
.landing-console-core small { color: #6a8991; font-size: .44rem; letter-spacing: .17em; }
.landing-console-core strong { display: block; margin: 6px 0 8px; color: #e8ddc4; font-family: "Yu Mincho", serif; font-size: 1.22rem; font-weight: 600; letter-spacing: .05em; }
.landing-console-core p { margin: 0; color: #8c9a9b; font-size: .68rem; line-height: 1.75; }
.landing-console-route { display: grid; margin: 0; padding: 0 12px; list-style: none; }
.landing-console-route li { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 2px 8px; padding: 11px 7px; border-top: 1px solid rgb(255 255 255 / 6%); }
.landing-console-route li > span { grid-row: 1 / 3; color: #806b42; font-family: Georgia, serif; font-size: .7rem; }
.landing-console-route b { color: #b8c9cb; font-family: Georgia, serif; font-size: .57rem; letter-spacing: .13em; }
.landing-console-route small { color: #6f7b7e; font-size: .58rem; }
.landing-console-depth { position: relative; display: flex; min-height: 58px; align-items: center; justify-content: space-between; margin: 12px; padding: 9px 13px; overflow: hidden; border: 1px solid rgb(var(--landing-gold) / 26%); background: linear-gradient(90deg, rgb(var(--landing-gold) / 8%), transparent); }
.landing-console-depth span { color: #887957; font-size: .42rem; letter-spacing: .15em; }
.landing-console-depth b { color: #d6c28e; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 400; }
.landing-console-depth i { position: absolute; right: -28px; width: 74px; height: 74px; border: 1px solid rgb(var(--landing-crystal) / 10%); border-radius: 50%; box-shadow: inset 0 0 0 14px rgb(var(--landing-crystal) / 3%); }
.landing-content { position: relative; }
.landing-signal-strip { position: relative; z-index: 4; display: grid; width: min(1320px, calc(100% - 40px)); grid-template-columns: repeat(4, minmax(0, 1fr)); margin: -36px auto 0; border: 1px solid rgb(var(--landing-crystal) / 21%); background: linear-gradient(110deg, rgb(12 23 28 / 97%), rgb(5 10 14 / 98%)); box-shadow: 0 24px 58px rgb(0 0 0 / 46%), inset 0 1px rgb(255 255 255 / 4%); }
.landing-signal-strip article { display: grid; min-height: 112px; align-content: center; gap: 3px; padding: 19px 24px; border-right: 1px solid rgb(var(--landing-crystal) / 12%); }
.landing-signal-strip article:last-child { border-right: 0; }
.landing-signal-strip span { color: #638993; font-family: Georgia, serif; font-size: .43rem; letter-spacing: .19em; }
.landing-signal-strip strong { color: #eee3cb; font-family: "Yu Mincho", serif; font-size: 1.24rem; font-weight: 600; letter-spacing: .04em; }
.landing-signal-strip small { color: #7f9093; font-size: .62rem; }
.landing-introduction { padding-top: clamp(98px, 10vw, 146px); }
.landing-section { position: relative; width: min(100%, 1500px); margin: 0 auto; padding: clamp(82px, 9vw, 132px) var(--landing-gutter); border-bottom-color: rgb(var(--landing-crystal) / 10%); }
.landing-section-heading { width: min(820px, 100%); }
.landing-section .eyebrow, .landing-final-cta .eyebrow { color: rgb(var(--landing-crystal) / 72%); font-family: Georgia, serif; font-size: .55rem; letter-spacing: .22em; }
.landing-section h2, .landing-final-cta h2 { color: #eae2d1; font-weight: 500; }
.landing-section p, .landing-final-cta p { color: #929f9f; }
.landing-pillar-grid { gap: 8px; border: 0; background: transparent; }
.landing-pillar-grid article { position: relative; min-height: 238px; overflow: hidden; border: 1px solid rgb(var(--landing-crystal) / 14%); background: radial-gradient(circle at 100% 0%, rgb(var(--landing-crystal) / 7%), transparent 35%), linear-gradient(145deg, #111a1e, #080d11); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.landing-pillar-grid article::after { position: absolute; right: -44px; bottom: -44px; width: 100px; height: 100px; border: 1px solid rgb(var(--landing-crystal) / 7%); border-radius: 50%; box-shadow: inset 0 0 0 18px rgb(var(--landing-crystal) / 2%); content: ""; }
.landing-pillar-grid article > span { color: #668c96; }
.landing-pillar-grid h3 { color: #e4d9bf; }
.landing-loop-rail { display: grid; grid-template-columns: repeat(9, auto); align-items: center; justify-content: center; gap: clamp(6px, 1.5vw, 18px); margin-top: 26px; padding: 13px 16px; border-top: 1px solid rgb(var(--landing-crystal) / 13%); border-bottom: 1px solid rgb(var(--landing-crystal) / 9%); color: #71868c; font-family: Georgia, serif; font-size: .5rem; letter-spacing: .12em; }
.landing-loop-rail i { color: rgb(var(--landing-gold) / 61%); font-style: normal; }
.landing-battle-section, .landing-relic-section { gap: clamp(42px, 7vw, 96px); }
.landing-battle-demo { border-color: rgb(var(--landing-crystal) / 28%); border-radius: 5px; background: linear-gradient(180deg, #0e1b20, #060b0f); box-shadow: 0 28px 70px rgb(0 0 0 / 52%), inset 0 0 65px rgb(var(--landing-crystal) / 6%); }
.landing-demo-top { border-bottom-color: rgb(var(--landing-crystal) / 16%); color: #a8c7ce; }
.landing-demo-top i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #69d69c; box-shadow: 0 0 7px #69d69c; }
.landing-demo-stage { background: radial-gradient(circle at 50% 74%, rgb(var(--landing-crystal) / 13%), transparent 43%), linear-gradient(rgb(1 4 7 / 13%), rgb(1 4 7 / 13%)), url("/images/background/battle-03-mycelium-cavern.webp") center / cover no-repeat; }
.landing-demo-stage img { filter: drop-shadow(0 14px 18px rgb(0 0 0 / 63%)); }
.landing-demo-versus { color: #77aebe; }
.landing-demo-log { border-color: rgb(var(--landing-gold) / 33%); border-left-color: rgb(var(--landing-gold) / 77%); background: rgb(4 11 15 / 91%); }
.landing-demo-actions span { border-color: rgb(var(--landing-crystal) / 15%); border-radius: 3px; background: #101b20; }
.landing-demo-actions span:last-child { border-color: rgb(var(--landing-gold) / 42%); background: linear-gradient(145deg, #6f5421, #3e2f15); }
.landing-check-list li { border-bottom-color: rgb(var(--landing-crystal) / 10%); color: #b5c1c1; }
.landing-check-list li::before { color: #6fb8c9; content: "◇"; }
.landing-depth-section { width: 100%; max-width: none; background: linear-gradient(180deg, rgb(5 10 14 / 72%), rgb(9 12 16 / 96%)); }
.landing-depth-gallery { display: grid; width: min(1380px, 100%); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0 auto; }
.landing-depth-gallery article { position: relative; display: grid; min-height: 330px; align-content: end; overflow: hidden; padding: 22px; border: 1px solid rgb(var(--landing-crystal) / 14%); background-position: center; background-size: cover; box-shadow: inset 0 0 45px rgb(0 0 0 / 20%); transition: transform .2s ease, border-color .2s ease; }
.landing-depth-gallery .depth-castle { background-image: linear-gradient(0deg, rgb(2 6 9 / 96%), rgb(2 6 9 / 15%) 74%), url("/images/background/battle-01-castle-outskirts.webp"); }
.landing-depth-gallery .depth-furnace { background-image: linear-gradient(0deg, rgb(2 6 9 / 96%), rgb(2 6 9 / 15%) 74%), url("/images/background/battle-04-scorching-furnace.webp"); }
.landing-depth-gallery .depth-cathedral { background-image: linear-gradient(0deg, rgb(2 6 9 / 96%), rgb(2 6 9 / 15%) 74%), url("/images/background/battle-07-sunken-cathedral.webp"); }
.landing-depth-gallery .depth-gate { background-image: linear-gradient(0deg, rgb(2 6 9 / 96%), rgb(2 6 9 / 15%) 74%), url("/images/background/battle-10-abyss-gate.webp"); }
.landing-depth-gallery article:hover { z-index: 2; border-color: rgb(var(--landing-crystal) / 42%); transform: translateY(-5px); }
.landing-depth-gallery article::before { position: absolute; top: 0; right: 14px; left: 14px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--landing-crystal) / 45%), transparent); content: ""; }
.landing-depth-gallery span { color: #9ebac0; font-family: Georgia, serif; font-size: .6rem; letter-spacing: .12em; }
.landing-depth-gallery strong { margin: 6px 0 2px; color: #f0e8d7; font-family: "Yu Mincho", serif; font-size: 1.25rem; font-weight: 600; }
.landing-depth-gallery small { color: #718084; font-family: Georgia, serif; font-size: .43rem; letter-spacing: .16em; }
.landing-relic-visual { position: relative; border-color: rgb(var(--landing-gold) / 27%); border-radius: 5px; background: #050a0d; box-shadow: 0 28px 70px rgb(0 0 0 / 48%); }
.landing-relic-visual::after { position: absolute; inset: 9px; border: 1px solid rgb(var(--landing-crystal) / 9%); content: ""; pointer-events: none; }
.landing-relic-parts > span { border-color: rgb(var(--landing-crystal) / 15%); border-radius: 3px; background: #0c1519; color: #b9c5c5; }
.landing-build-section { grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); background: radial-gradient(circle at 18% 45%, rgb(110 69 157 / 8%), transparent 27%); }
.landing-build-visual { isolation: isolate; min-height: 0; }
.landing-build-visual::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgb(3 7 10 / 94%) 0%, transparent 38%), linear-gradient(125deg, transparent 55%, rgb(63 31 89 / 13%)); content: ""; pointer-events: none; }
.landing-build-visual::after { z-index: 3; }
.landing-build-visual-caption { position: absolute; z-index: 2; right: 24px; bottom: 20px; left: 24px; display: grid; gap: 4px; }
.landing-build-visual-caption span { color: #85aeb6; font-family: Georgia, serif; font-size: .47rem; letter-spacing: .17em; }
.landing-build-visual-caption strong { color: #f0e5ce; font-family: "Yu Mincho", serif; font-size: clamp(.92rem, 1.7vw, 1.2rem); font-weight: 600; text-shadow: 0 3px 13px #000; }
.landing-build-section .landing-feature-copy > p:not(.eyebrow) strong { color: #d9c28b; font-weight: 600; }
.landing-build-steps { display: grid; gap: 6px; margin-top: 22px; }
.landing-build-steps article { display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 59px; padding: 9px 12px; border: 1px solid rgb(var(--landing-crystal) / 12%); border-left: 2px solid rgb(var(--landing-gold) / 42%); background: linear-gradient(90deg, rgb(var(--landing-gold) / 5%), rgb(7 13 17 / 78%)); }
.landing-build-steps article > span { color: #8d7548; font-family: Georgia, serif; font-size: .64rem; }
.landing-build-steps article > div { display: grid; gap: 2px; }
.landing-build-steps strong { color: #e8dec8; font-family: "Yu Mincho", serif; font-size: .78rem; }
.landing-build-steps small { color: #7f8d90; font-size: .63rem; line-height: 1.5; }
.landing-inheritance-flow article { position: relative; min-height: 245px; border-color: rgb(var(--landing-crystal) / 14%); background: radial-gradient(circle at 50% 0%, rgb(var(--landing-crystal) / 6%), transparent 37%), linear-gradient(180deg, #111a1e, #080d11); }
.landing-inheritance-flow > i { color: rgb(var(--landing-gold) / 62%); }
.landing-inheritance-flow article > span { color: #628e99; }
.landing-inheritance-flow h3 { color: #e5dbc2; }
.landing-systems-section { width: 100%; max-width: none; background: radial-gradient(circle at 12% 45%, rgb(73 157 178 / 7%), transparent 26%), #060b0e; }
.landing-system-grid { display: grid; width: min(1260px, 100%); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 auto; }
.landing-system-grid article { position: relative; min-height: 205px; padding: 23px 22px 21px 86px; overflow: hidden; border: 1px solid rgb(var(--landing-crystal) / 14%); background: linear-gradient(135deg, rgb(17 28 33 / 96%), rgb(7 12 16 / 98%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.landing-system-grid article::after { position: absolute; right: -29px; bottom: -37px; width: 108px; height: 108px; border: 1px solid rgb(var(--landing-crystal) / 6%); border-radius: 50%; box-shadow: inset 0 0 0 19px rgb(var(--landing-crystal) / 2%); content: ""; }
.landing-system-icon { position: absolute; top: 25px; left: 21px; width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 8px 12px rgb(0 0 0 / 48%)); }
.landing-system-grid article > span { color: #608c97; font-family: Georgia, serif; font-size: .43rem; letter-spacing: .16em; }
.landing-system-grid h3 { margin: 8px 0 9px; color: #e4dbc7; font-family: "Yu Mincho", serif; font-size: 1.03rem; font-weight: 600; }
.landing-system-grid p { margin: 0; color: #839194; font-size: .7rem; line-height: 1.75; }
.landing-rest-card { min-height: 470px; border-color: rgb(var(--landing-gold) / 31%); border-radius: 5px; background: linear-gradient(90deg, rgb(2 7 10 / 97%) 0%, rgb(3 8 11 / 78%) 47%, rgb(3 8 11 / 16%) 100%), linear-gradient(0deg, rgb(2 6 9 / 81%), transparent 62%), url("/images/background/home-rest-point-v3.webp") center 64% / cover no-repeat; box-shadow: 0 30px 75px rgb(0 0 0 / 55%), inset 0 0 0 1px rgb(var(--landing-crystal) / 4%); }
.landing-final-cta { position: relative; overflow: hidden; border-color: rgb(var(--landing-crystal) / 22%); border-radius: 5px; background: radial-gradient(circle at 8% 100%, rgb(var(--landing-crystal) / 11%), transparent 31%), linear-gradient(135deg, #111d22, #070c10); }
.landing-final-cta::after { position: absolute; right: 18%; bottom: -88px; width: 210px; height: 210px; border: 1px solid rgb(var(--landing-crystal) / 5%); border-radius: 50%; box-shadow: inset 0 0 0 35px rgb(var(--landing-crystal) / 2%); content: ""; pointer-events: none; }
.landing-footer { border-top: 1px solid rgb(var(--landing-crystal) / 10%); }

@media (max-width: 1000px) {
  .landing-hero-grid { grid-template-columns: minmax(0, 1fr) 285px; gap: 28px; }
  .auth-landing-copy h1 { font-size: clamp(2.8rem, 6.5vw, 4.4rem); }
  .landing-depth-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-depth-gallery article { min-height: 270px; }
  .landing-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-build-section { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .landing-header { min-height: 60px; padding: 7px 10px; }
  .landing-brand { gap: 7px; }
  .landing-brand-mechanism { width: 34px; height: 34px; flex-basis: 34px; }
  .landing-brand-gear { width: 29px; height: 29px; }
  .landing-brand-crystal { width: 12px; height: 12px; }
  .landing-header .landing-brand small { display: none; }
  .landing-header-actions button { min-height: 38px; padding: 5px 9px; }
  .auth-landing.landing-hero { min-height: max(730px, calc(100svh - 60px)); }
  .landing-hero-image { height: 56%; object-position: 73% center; transform: scale(1.025); }
  .landing-hero-shade { background: linear-gradient(0deg, #03070a 0%, #03070a 43%, rgb(3 7 10 / 89%) 57%, rgb(3 7 10 / 7%) 88%), linear-gradient(90deg, rgb(2 6 9 / 48%), transparent 75%); }
  .landing-hero-grid { display: flex; min-height: max(730px, calc(100svh - 60px)); flex-direction: column; justify-content: flex-end; gap: 17px; padding: 235px 14px 20px; }
  .landing-hero-copy { display: block; width: 100%; min-height: 0; padding: 0; }
  .auth-landing-copy > .eyebrow { font-size: .48rem; letter-spacing: .16em; }
  .auth-landing-copy h1 { margin: 7px 0 12px; font-size: clamp(2.15rem, 10.7vw, 3rem); line-height: 1.08; }
  .auth-landing-copy h1 span { font-size: .61em; }
  .auth-landing-concept { font-size: .75rem; line-height: 1.72; }
  .landing-hero-actions { grid-template-columns: 1fr; margin-top: 17px; }
  .landing-hero-actions .primary-button { min-height: 49px; }
  .landing-hero-facts { justify-content: flex-start; margin-top: 10px; }
  .landing-beta-notice { align-items: flex-start; gap: 5px; margin-top: 10px; padding: 8px 10px; font-size: .61rem; }
  .landing-beta-notice strong { font-size: .63rem; }
  .landing-hero-console { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 82px; }
  .landing-console-head { grid-column: 1 / -1; padding: 7px 9px; }
  .landing-console-core { padding: 10px; }
  .landing-console-core small, .landing-console-core p { display: none; }
  .landing-console-core strong { margin: 0; font-size: .83rem; }
  .landing-console-route { display: none; }
  .landing-console-depth { min-height: 42px; margin: 6px; padding: 5px 8px; }
  .landing-console-depth span { display: none; }
  .landing-console-depth b { font-size: 1.05rem; }
  .landing-signal-strip { width: calc(100% - 20px); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -14px; }
  .landing-signal-strip article { min-height: 82px; padding: 12px 13px; }
  .landing-signal-strip article:nth-child(2) { border-right: 0; }
  .landing-signal-strip article:nth-child(-n + 2) { border-bottom: 1px solid rgb(var(--landing-crystal) / 12%); }
  .landing-signal-strip strong { font-size: .92rem; }
  .landing-signal-strip small { font-size: .53rem; }
  .landing-introduction { padding-top: 62px; }
  .landing-section { width: 100%; padding: 72px 16px; }
  .landing-section-heading { margin-bottom: 28px; }
  .landing-section h2, .landing-final-cta h2 { font-size: clamp(1.6rem, 7.5vw, 2.15rem); }
  .landing-pillar-grid article { min-height: 0; padding: 18px 5px 20px 52px; border-right: 0; border-bottom: 0; border-left: 0; }
  .landing-pillar-grid article::after { display: none; }
  .landing-loop-rail { display: flex; justify-content: start; gap: 8px; margin-top: 18px; padding: 11px 2px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .landing-loop-rail::-webkit-scrollbar { display: none; }
  .landing-loop-rail span { padding: 5px 7px; border: 1px solid rgb(var(--landing-crystal) / 11%); background: #091116; }
  .landing-battle-section, .landing-relic-section { grid-template-columns: 1fr; gap: 32px; }
  .landing-battle-demo, .landing-relic-visual { border-radius: 3px; }
  .landing-demo-stage { min-height: 220px; }
  .landing-depth-section, .landing-systems-section { padding-right: 12px; padding-left: 12px; }
  .landing-depth-section .landing-section-heading, .landing-systems-section .landing-section-heading { padding-right: 4px; padding-left: 4px; }
  .landing-depth-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .landing-depth-gallery article { min-height: 218px; padding: 13px; }
  .landing-depth-gallery strong { font-size: .94rem; }
  .landing-depth-gallery span { font-size: .49rem; }
  .landing-inheritance-flow article { min-height: 0; border-right: 0; border-left: 0; }
  .landing-build-visual-caption { right: 14px; bottom: 13px; left: 14px; }
  .landing-build-visual-caption span { font-size: .39rem; }
  .landing-build-visual-caption strong { font-size: .8rem; }
  .landing-build-steps { margin-top: 17px; }
  .landing-build-steps article { min-height: 55px; padding: 8px 10px; }
  .landing-system-grid { grid-template-columns: 1fr; gap: 5px; }
  .landing-system-grid article { min-height: 0; padding: 17px 15px 17px 72px; }
  .landing-system-icon { top: 18px; left: 16px; width: 40px; height: 40px; }
  .landing-system-grid article::after { display: none; }
  .landing-rest-section { padding-right: 8px; padding-left: 8px; }
  .landing-rest-card { min-height: 530px; padding: 25px 18px; border-radius: 3px; background: linear-gradient(0deg, rgb(2 7 10 / 98%) 0%, rgb(3 8 11 / 81%) 54%, rgb(3 8 11 / 12%) 100%), url("/images/background/home-rest-point-v3.webp") 56% center / cover no-repeat; }
  .landing-final-cta { width: calc(100% - 20px); padding: 18px 14px; border-radius: 3px; }
  .landing-final-cta::after { display: none; }
  .landing-footer { margin: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero-actions .primary-button::after { animation: none; }
  .landing-depth-gallery article { transition: none; }
}

/* Explore v2: abyss route deck */
.explore-rest-screen { --route-crystal: 92 180 202; --route-gold: 207 170 91; gap: 12px; }
.explore-rest-screen .expedition-board { --expedition-accent: #d1aa68; position: relative; isolation: isolate; gap: 10px; overflow: hidden; padding: 15px; border: 1px solid rgb(var(--route-crystal) / 25%); border-radius: 4px; background: radial-gradient(circle at 104% -12%, rgb(var(--route-crystal) / 13%), transparent 35%), radial-gradient(circle at -7% 36%, rgb(87 57 120 / 10%), transparent 30%), linear-gradient(150deg, #111c21, #080e12 72%); box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 17px 42px rgb(0 0 0 / 30%); }
.explore-rest-screen .expedition-board::before { position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgb(var(--route-crystal) / 2.5%) calc(20% - 1px) 20%), linear-gradient(rgb(255 255 255 / 1.4%) 1px, transparent 1px); background-size: auto, 100% 46px; content: ""; pointer-events: none; }
.explore-rest-screen .expedition-board::after { position: absolute; top: 0; right: 14px; left: 14px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--route-crystal) / 62%), rgb(var(--route-gold) / 42%), transparent); content: ""; pointer-events: none; }
.explore-rest-screen .expedition-board.difficulty-hard { --expedition-accent: #83b8d5; --route-crystal: 105 179 217; }
.explore-rest-screen .expedition-board.difficulty-nightmare { --expedition-accent: #be9cdd; --route-crystal: 176 128 218; }
.explore-rest-screen .expedition-board.difficulty-hell { --expedition-accent: #dc8d88; --route-crystal: 215 110 102; }
.explore-rest-screen .expedition-board.difficulty-abyss { --expedition-accent: #aa91e4; --route-crystal: 149 122 225; }
.explore-rest-screen .expedition-board-heading { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 58px; padding-bottom: 10px; border-bottom: 1px solid rgb(var(--route-crystal) / 13%); }
.explore-rest-screen .expedition-board-heading > .abyss-mechanism-mark { width: 44px; height: 44px; flex-basis: 44px; }
.explore-rest-screen .expedition-board-heading .abyss-mechanism-gear { width: 37px; height: 37px; }
.explore-rest-screen .expedition-board-heading .abyss-mechanism-crystal { width: 15px; height: 15px; }
.expedition-board-title { display: grid; min-width: 0; gap: 2px; }
.expedition-board-title .eyebrow { color: rgb(var(--route-crystal) / 76%); font-family: Georgia, "Times New Roman", serif; font-size: .43rem; letter-spacing: .18em; }
.explore-rest-screen .expedition-board-title h1 { margin: 0; color: #efe8d8; font-family: "Yu Mincho", serif; font-size: 1.16rem; font-weight: 600; letter-spacing: .05em; }
.expedition-board-title > small { overflow: hidden; color: #75878b; font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }
.expedition-board-readout { display: grid; min-width: 78px; justify-items: end; padding-left: 10px; border-left: 1px solid rgb(var(--route-crystal) / 14%); }
.expedition-board-readout > small { color: #657b80; font-family: Georgia, "Times New Roman", serif; font-size: .36rem; letter-spacing: .12em; }
.expedition-board-readout > strong { color: #e5d29e; font-family: Georgia, "Times New Roman", serif; font-size: 1.14rem; font-weight: 400; line-height: 1.1; }
.expedition-board-readout > span { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: #82999e; font-family: Georgia, "Times New Roman", serif; font-size: .34rem; letter-spacing: .08em; }
.expedition-board-readout > span i { width: 5px; height: 5px; border-radius: 50%; background: currentcolor; box-shadow: 0 0 7px currentcolor; }
.expedition-board-readout > span.online { color: #68d59b; }
.expedition-board-readout > span.hold { color: #d89675; }
.explore-rest-screen .expedition-difficulty-tabs { gap: 0; margin: 0 -1px; overflow-x: auto; padding: 0 0 5px; border-bottom: 1px solid rgb(var(--route-crystal) / 11%); scrollbar-width: none; }
.explore-rest-screen .expedition-difficulty-tabs::-webkit-scrollbar { display: none; }
.explore-rest-screen .expedition-difficulty-tab { position: relative; flex: 1 0 90px; min-height: 42px; padding: 7px 10px 8px; border: 0; border-right: 1px solid rgb(var(--route-crystal) / 12%); border-radius: 0; background: rgb(4 9 12 / 28%); color: #7f9093; font-family: "Yu Mincho", serif; font-size: .68rem; letter-spacing: .04em; }
.explore-rest-screen .expedition-difficulty-tab:first-child { border-left: 1px solid rgb(var(--route-crystal) / 12%); }
.explore-rest-screen .expedition-difficulty-tab::before { position: absolute; right: 17%; bottom: 0; left: 17%; height: 1px; background: transparent; content: ""; box-shadow: none; }
.explore-rest-screen .expedition-difficulty-tab.active { border-color: rgb(var(--route-crystal) / 17%); background: linear-gradient(180deg, rgb(var(--route-crystal) / 12%), transparent); color: #e9dfc7; box-shadow: none; }
.explore-rest-screen .expedition-difficulty-tab.active::before { background: var(--expedition-accent); box-shadow: 0 0 8px var(--expedition-accent); }
.explore-rest-screen .expedition-mode-summary { display: flex; flex-wrap: nowrap; gap: 0; overflow-x: auto; border-top: 1px solid rgb(255 255 255 / 3%); border-bottom: 1px solid rgb(var(--route-crystal) / 10%); background: rgb(1 6 9 / 30%); scrollbar-width: none; }
.explore-rest-screen .expedition-mode-summary::-webkit-scrollbar { display: none; }
.explore-rest-screen .expedition-mode-summary > span { display: grid; min-width: 74px; flex: 1 0 auto; gap: 1px; padding: 7px 9px; border-right: 1px solid rgb(var(--route-crystal) / 9%); }
.explore-rest-screen .expedition-mode-summary small { color: #5f7479; font-family: Georgia, "Times New Roman", serif; font-size: .34rem; letter-spacing: .1em; }
.explore-rest-screen .expedition-mode-summary strong { color: #bfc9c7; font-family: "Yu Mincho", serif; font-size: .62rem; font-weight: 600; white-space: nowrap; }
.explore-rest-screen .expedition-swipe-hint { display: flex; align-items: center; justify-content: center; gap: 9px; margin: -1px 0 0; color: #64777b; font-size: .46rem; letter-spacing: .06em; }
.explore-rest-screen .expedition-swipe-hint span { color: rgb(var(--route-crystal) / 70%); font-family: Georgia, serif; font-size: .72rem; }
.explore-rest-screen .expedition-zone-list { position: relative; display: grid; gap: 7px; padding-left: 5px; }
.explore-rest-screen .expedition-zone-list::before { position: absolute; top: 18px; bottom: 18px; left: 0; width: 1px; background: linear-gradient(180deg, transparent, rgb(var(--route-crystal) / 36%) 8%, rgb(var(--route-crystal) / 18%) 92%, transparent); content: ""; }
.explore-rest-screen .expedition-zone-card { position: relative; isolation: isolate; display: grid; min-height: 154px; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 11px; overflow: hidden; padding: 15px 13px 13px 17px; border: 1px solid rgb(var(--route-crystal) / 18%); border-radius: 3px; background: #0a1217; box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.explore-rest-screen .expedition-zone-card::before { z-index: 1; background: linear-gradient(90deg, rgb(2 7 10 / 96%) 0%, rgb(3 9 13 / 81%) 48%, rgb(3 8 11 / 43%) 76%, rgb(2 7 10 / 58%) 100%), linear-gradient(0deg, rgb(2 6 9 / 64%), transparent 65%); }
.explore-rest-screen .expedition-zone-card::after { position: absolute; z-index: 2; top: -1px; bottom: -1px; left: -1px; width: 3px; background: rgb(var(--route-crystal) / 28%); content: ""; box-shadow: 0 0 9px rgb(var(--route-crystal) / 15%); }
.explore-rest-screen .expedition-zone-art { filter: saturate(.73) contrast(1.06) brightness(.73); transform: scale(1.015); transition: filter .2s ease, transform .2s ease; }
.explore-rest-screen .expedition-zone-card.current { border-color: rgb(var(--route-gold) / 64%); box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 0 20px rgb(var(--route-gold) / 6%); }
.explore-rest-screen .expedition-zone-card.current::after { background: var(--expedition-accent); box-shadow: 0 0 12px var(--expedition-accent); }
.explore-rest-screen .expedition-zone-card.current .expedition-zone-art { filter: saturate(.92) contrast(1.08) brightness(.9); }
.explore-rest-screen .expedition-zone-card.cleared { border-color: rgb(var(--route-crystal) / 24%); }
.explore-rest-screen .expedition-zone-card.locked { border-color: rgb(121 130 133 / 11%); }
.explore-rest-screen .expedition-zone-card.locked .expedition-zone-art { filter: grayscale(1) brightness(.38); }
.expedition-zone-sequence { position: absolute; z-index: 2; top: 6px; right: 9px; color: rgb(222 233 231 / 9%); font-family: Georgia, "Times New Roman", serif; font-size: 2.35rem; line-height: 1; letter-spacing: -.06em; pointer-events: none; }
.explore-rest-screen .expedition-zone-copy { z-index: 3; align-content: end; gap: 2px; }
.expedition-zone-signal { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; color: rgb(var(--route-crystal) / 79%); font-family: Georgia, "Times New Roman", serif; font-size: .4rem; letter-spacing: .14em; }
.expedition-zone-signal i { width: 5px; height: 5px; border-radius: 50%; background: currentcolor; box-shadow: 0 0 7px currentcolor; }
.current .expedition-zone-signal { color: #e4bf70; }
.locked .expedition-zone-signal { color: #6a7477; }
.explore-rest-screen .expedition-zone-copy h3 { color: #f0e6cd; font-size: clamp(1.22rem, 5vw, 1.55rem); font-weight: 500; letter-spacing: .04em; text-shadow: 0 3px 13px #000; }
.explore-rest-screen .expedition-zone-copy p { color: #c1cecc; font-family: "Yu Mincho", serif; font-size: .68rem; letter-spacing: .04em; }
.explore-rest-screen .expedition-zone-copy > small { color: #7f9295; font-size: .53rem; }
.expedition-zone-progress-track { display: grid; width: min(100%, 208px); grid-template-columns: repeat(10, minmax(4px, 1fr)); gap: 3px; margin-top: 8px; }
.expedition-zone-progress-track i { height: 2px; background: rgb(141 158 159 / 21%); box-shadow: none; }
.expedition-zone-progress-track i.cleared { background: rgb(var(--route-crystal) / 68%); box-shadow: 0 0 5px rgb(var(--route-crystal) / 24%); }
.expedition-zone-progress-track i.next { height: 4px; margin-top: -1px; background: var(--expedition-accent); box-shadow: 0 0 8px var(--expedition-accent); }
.explore-rest-screen .expedition-zone-side { z-index: 3; min-width: 104px; align-content: end; gap: 5px; }
.explore-rest-screen .expedition-zone-progress { display: flex; align-items: baseline; gap: 2px; color: #8e9da0; font-family: "Yu Mincho", serif; font-size: .48rem; }
.explore-rest-screen .expedition-zone-progress strong { color: #d9c99f; font-family: Georgia, "Times New Roman", serif; font-size: .88rem; font-weight: 400; }
.explore-rest-screen .expedition-zone-progress small { color: #6d7b7e; font-family: Georgia, "Times New Roman", serif; font-size: .48rem; }
.explore-rest-screen .expedition-zone-enter { width: 100%; min-width: 0; border-radius: 3px; font-family: "Yu Mincho", serif; font-weight: 700; letter-spacing: .05em; }
.explore-rest-screen .expedition-zone-enter { min-height: 43px; border-color: rgb(var(--route-gold) / 61%); background: linear-gradient(145deg, #896721, #584216); color: #fff0c3; box-shadow: inset 0 1px rgb(255 245 197 / 18%), 0 7px 16px rgb(0 0 0 / 25%); }
.explore-rest-screen .expedition-zone-enter:disabled { border-color: rgb(118 132 135 / 22%); background: rgb(21 30 34 / 80%); color: #69777a; box-shadow: none; }
.explore-rest-screen .expedition-zone-cost { color: #728387; font-family: Georgia, "Times New Roman", serif; font-size: .36rem; letter-spacing: .08em; }
.explore-rest-screen .expedition-board > .warning { margin: 0; padding: 8px 10px; border-left: 2px solid #c98468; background: rgb(97 41 31 / 18%); }
.explore-preparation-deck { position: relative; overflow: hidden; padding: 11px 12px 12px; border: 1px solid rgb(var(--route-crystal) / 17%); border-radius: 3px; background: radial-gradient(circle at 100% 0%, rgb(var(--route-crystal) / 8%), transparent 31%), linear-gradient(145deg, #10191d, #080d10); }
.explore-preparation-deck::before { position: absolute; top: 0; right: 12px; left: 12px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--route-crystal) / 38%), transparent); content: ""; }
.explore-preparation-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid rgb(var(--route-crystal) / 10%); }
.explore-preparation-heading .eyebrow { color: #62848c; font-family: Georgia, "Times New Roman", serif; font-size: .38rem; letter-spacing: .16em; }
.explore-preparation-heading h2 { margin: 2px 0 0; color: #dcd8ca; font-family: "Yu Mincho", serif; font-size: .78rem; font-weight: 600; }
.explore-preparation-heading > span { color: #536a70; font-family: Georgia, "Times New Roman", serif; font-size: .34rem; letter-spacing: .11em; }
.explore-preparation-deck .rest-quick-actions { gap: 5px; }
.explore-preparation-deck .rest-quick-action { min-height: 82px; gap: 2px; padding: 7px 4px; border-color: rgb(var(--route-crystal) / 13%); border-radius: 2px; background: linear-gradient(180deg, rgb(var(--route-crystal) / 5%), rgb(2 7 10 / 21%)); }
.explore-preparation-deck .rest-quick-action:hover { border-color: rgb(var(--route-crystal) / 32%); background: rgb(var(--route-crystal) / 8%); }
.explore-preparation-deck .rest-quick-action img, .explore-preparation-deck .rest-action-icon { width: 30px; height: 30px; }
.explore-preparation-deck .rest-quick-action strong { color: #d6ddda; font-size: .66rem; }
.explore-preparation-deck .rest-quick-action small { color: #6e8084; font-size: .48rem; }

@media (hover: hover) {
  .explore-rest-screen .expedition-zone-card:not(.locked):hover .expedition-zone-art { filter: saturate(.98) contrast(1.08) brightness(.95); transform: scale(1.035); }
}

@media (max-width: 420px) {
  .explore-rest-screen .expedition-board { padding: 11px 9px 11px; border-right: 0; border-left: 0; }
  .explore-rest-screen .expedition-board-heading { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; }
  .explore-rest-screen .expedition-board-heading > .abyss-mechanism-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .explore-rest-screen .expedition-board-heading .abyss-mechanism-gear { width: 32px; height: 32px; }
  .explore-rest-screen .expedition-board-title h1 { font-size: .96rem; }
  .expedition-board-title > small { font-size: .43rem; }
  .expedition-board-readout { min-width: 68px; padding-left: 7px; }
  .expedition-board-readout > strong { font-size: .97rem; }
  .expedition-board-readout > span { font-size: .29rem; }
  .explore-rest-screen .expedition-mode-summary > span { min-width: 68px; padding: 6px 7px; }
  .explore-rest-screen .expedition-zone-card { min-height: 148px; gap: 7px; padding: 12px 9px 11px 14px; }
  .explore-rest-screen .expedition-zone-side { min-width: 94px; }
  .explore-rest-screen .expedition-zone-copy h3 { font-size: 1.18rem; }
  .explore-rest-screen .expedition-zone-copy p { font-size: .61rem; }
  .explore-rest-screen .expedition-zone-copy > small { font-size: .47rem; }
  .expedition-zone-progress-track { width: min(100%, 170px); gap: 2px; }
  .explore-rest-screen .expedition-zone-enter { min-height: 44px; padding: 5px 6px; font-size: .68rem; }
  .explore-preparation-deck { padding: 9px; border-right: 0; border-left: 0; }
  .explore-preparation-deck .rest-quick-action { min-height: 78px; }
}

@media (max-width: 350px) {
  .expedition-board-title > small, .expedition-board-readout > span { display: none; }
  .explore-rest-screen .expedition-zone-card { min-height: 142px; }
  .explore-rest-screen .expedition-zone-side { min-width: 84px; }
  .expedition-zone-sequence { font-size: 2rem; }
  .explore-rest-screen .expedition-zone-copy > small { max-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .explore-rest-screen .expedition-zone-art { transition: none; }
}

/* Market + Menu v2: abyss exchange terminal and explorer console */
.market-terminal, .menu-screen {
  --terminal-crystal: 89 184 190;
  --terminal-gold: 206 163 78;
  display: grid;
  gap: 11px;
}
.market-terminal-head, .menu-console-heading {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(var(--terminal-crystal) / 22%);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgb(var(--terminal-crystal) / 6%) 1px, transparent 1px) 0 0 / 48px 100%,
    radial-gradient(circle at 9% 0%, rgb(var(--terminal-crystal) / 13%), transparent 30%),
    linear-gradient(145deg, #101a1e, #070c0f 74%);
  box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 12px 28px rgb(0 0 0 / 18%);
}
.market-terminal-head::before, .menu-console-heading::before {
  position: absolute;
  top: 0;
  right: 13px;
  left: 13px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--terminal-crystal) / 58%), rgb(var(--terminal-gold) / 48%), transparent);
  content: "";
}
.market-terminal-title, .menu-console-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
  padding: 13px 14px 11px;
}
.market-terminal-title .abyss-mechanism-mark, .menu-console-title .abyss-mechanism-mark { width: 43px; height: 43px; flex: 0 0 43px; }
.market-terminal-title .abyss-mechanism-gear, .menu-console-title .abyss-mechanism-gear { width: 37px; height: 37px; }
.market-terminal-title > div, .menu-console-title > div { min-width: 0; }
.market-terminal-title .eyebrow, .menu-console-title .eyebrow {
  margin: 0 0 2px;
  color: rgb(var(--terminal-crystal) / 67%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .42rem;
  letter-spacing: .14em;
  white-space: nowrap;
}
.market-terminal-title h1, .menu-console-title h1 {
  margin: 0;
  color: #ece6d8;
  font-family: "Yu Mincho", serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .07em;
}
.market-terminal-title small, .menu-console-title small { display: block; margin-top: 2px; color: #72868a; font-size: .52rem; letter-spacing: .03em; }
.market-terminal-readout, .menu-console-readout {
  position: absolute;
  top: 12px;
  right: 13px;
  display: grid;
  min-width: 92px;
  justify-items: end;
  padding-left: 11px;
  border-left: 1px solid rgb(var(--terminal-crystal) / 16%);
}
.market-terminal-readout > small, .menu-console-readout > small { color: #5a747a; font-family: Georgia, "Times New Roman", serif; font-size: .36rem; letter-spacing: .14em; }
.market-terminal-readout > strong, .menu-console-readout > strong { display: flex; align-items: center; gap: 3px; color: #e9d9ad; font-family: Georgia, "Times New Roman", serif; font-size: .94rem; font-weight: 400; }
.market-terminal-readout strong img { width: 16px; height: 16px; object-fit: contain; }
.market-terminal-readout strong em, .menu-console-readout strong em { color: #8d8f83; font-size: .48rem; font-style: normal; }
.market-terminal-readout > span, .menu-console-readout > span { display: flex; align-items: center; gap: 4px; margin-top: 1px; color: #79bda9; font-size: .3rem; letter-spacing: .1em; }
.market-terminal-readout > span i, .menu-console-readout > span i { width: 4px; height: 4px; border-radius: 50%; background: currentcolor; box-shadow: 0 0 6px currentcolor; }
.market-terminal-readout > span.readonly, .menu-console-readout > span.standby { color: #a68c62; }
.market-terminal-guide { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; margin: 0 13px 10px; padding: 8px 9px; border: 1px solid rgb(var(--terminal-gold) / 12%); background: rgb(2 7 9 / 35%); }
.market-terminal-guide span { color: rgb(var(--terminal-gold) / 70%); font-family: Georgia, "Times New Roman", serif; font-size: .36rem; letter-spacing: .12em; }
.market-terminal-guide p { margin: 0; color: #879699; font-size: .53rem; line-height: 1.55; }
.market-terminal-head > .warning { margin: 0 13px 9px; border-left: 2px solid #b46e55; border-radius: 0; background: rgb(116 55 39 / 17%); }

.market-terminal .market-mode-tabs {
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid rgb(var(--terminal-crystal) / 14%);
  border-radius: 0;
  background: rgb(0 0 0 / 22%);
}
.market-terminal .market-mode-tab {
  position: relative;
  display: grid;
  min-height: 68px;
  justify-items: start;
  gap: 1px;
  padding: 9px 14px;
  border: 0;
  border-right: 1px solid rgb(var(--terminal-crystal) / 12%);
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.market-terminal .market-mode-tab:last-child { border-right: 0; }
.market-terminal .market-mode-tab > span { color: #516a70; font-family: Georgia, "Times New Roman", serif; font-size: .35rem; letter-spacing: .15em; }
.market-terminal .market-mode-tab strong { color: #aeb9b8; font-family: "Yu Mincho", serif; font-size: .76rem; letter-spacing: .06em; }
.market-terminal .market-mode-tab small { color: #596b6f; font-size: .46rem; }
.market-terminal .market-mode-tab::after { position: absolute; right: 12px; bottom: 0; left: 12px; height: 2px; background: transparent; content: ""; }
.market-terminal .market-mode-tab.active { background: linear-gradient(180deg, rgb(var(--terminal-crystal) / 8%), rgb(var(--terminal-gold) / 5%)); }
.market-terminal .market-mode-tab.active > span { color: rgb(var(--terminal-crystal) / 78%); }
.market-terminal .market-mode-tab.active strong { color: #f1dfb0; }
.market-terminal .market-mode-tab.active::after { background: linear-gradient(90deg, rgb(var(--terminal-crystal) / 75%), rgb(var(--terminal-gold) / 78%)); box-shadow: 0 0 7px rgb(var(--terminal-crystal) / 27%); }

.market-terminal .market-view { display: grid; gap: 10px; }
.market-terminal .market-view > .panel { margin: 0; border-color: rgb(var(--terminal-crystal) / 15%); border-radius: 4px; background: radial-gradient(circle at 100% 0%, rgb(var(--terminal-crystal) / 6%), transparent 29%), linear-gradient(145deg, #10171a, #090d10); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.market-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 9px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgb(var(--terminal-crystal) / 12%); }
.market-section-heading p { margin: 0 0 2px; color: #55757c; font-family: Georgia, "Times New Roman", serif; font-size: .36rem; letter-spacing: .15em; }
.market-section-heading h2 { margin: 0; color: #ddd8ca; font-family: "Yu Mincho", serif; font-size: .82rem; font-weight: 500; }
.market-section-heading > span { color: #657b80; font-family: Georgia, "Times New Roman", serif; font-size: .35rem; letter-spacing: .08em; text-align: right; }
.market-search-console { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 10px; padding: 7px 9px; border: 1px solid rgb(var(--terminal-crystal) / 20%); border-radius: 3px; background: rgb(3 9 12 / 55%); }
.market-search-console > span { display: grid; gap: 1px; min-width: 72px; }
.market-search-console small { color: #4e747c; font-family: Georgia, "Times New Roman", serif; font-size: .31rem; letter-spacing: .11em; }
.market-search-console strong { color: #aab7b7; font-size: .56rem; font-weight: 500; }
.market-search-console input { min-width: 0; height: 38px; border: 0; border-left: 1px solid rgb(var(--terminal-crystal) / 12%); border-radius: 0; background: transparent; box-shadow: none; }
.market-search-console > i { color: rgb(var(--terminal-crystal) / 63%); font-family: serif; font-size: 1.15rem; font-style: normal; }
.market-terminal .market-grid { gap: 8px; }
.market-terminal .market-listing-card { border-radius: 3px; border-color: rgb(var(--terminal-crystal) / 22%); background: radial-gradient(circle at 0 0, rgb(var(--terminal-crystal) / 10%), transparent 38%), linear-gradient(145deg, #111a1e, #070c0f); }
.market-terminal .market-listing-card::before { background: linear-gradient(90deg, rgb(var(--terminal-crystal) / 72%), rgb(var(--terminal-gold) / 50%), transparent); }
.market-terminal .market-listing-price { border-color: rgb(var(--terminal-gold) / 15%); background: rgb(var(--terminal-gold) / 4%); }
.market-terminal .market-listing-price strong { color: #e5c984; }
.market-empty-state { grid-column: 1 / -1; display: grid; min-height: 118px; place-items: center; align-content: center; gap: 3px; padding: 18px; border: 1px dashed rgb(var(--terminal-crystal) / 19%); background: radial-gradient(circle, rgb(var(--terminal-crystal) / 7%), transparent 58%); text-align: center; }
.market-empty-state > span { color: rgb(var(--terminal-crystal) / 55%); font-size: 1.1rem; }
.market-empty-state strong { color: #aeb9b7; font-size: .69rem; font-weight: 500; }
.market-empty-state small { color: #607277; font-size: .5rem; }
.market-section-lead { margin: -3px 0 10px; color: #718287; font-size: .54rem; }
.market-sell-finder { display: grid; gap: 8px; margin-bottom: 11px; padding: 9px; border: 1px solid rgb(var(--terminal-crystal) / 18%); border-radius: 3px; background: linear-gradient(145deg, rgb(3 10 13 / 76%), rgb(var(--terminal-crystal) / 4%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.market-sell-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 44px; padding: 5px 8px; border: 1px solid rgb(var(--terminal-crystal) / 17%); background: rgb(0 0 0 / 18%); }
.market-sell-search > span { display: grid; gap: 1px; min-width: 76px; }
.market-sell-search small { color: #54818a; font-family: Georgia, "Times New Roman", serif; font-size: .31rem; letter-spacing: .13em; }
.market-sell-search strong { color: #b5c2c0; font-size: .55rem; font-weight: 500; }
.market-sell-search input { min-width: 0; height: 36px; border: 0; border-left: 1px solid rgb(var(--terminal-crystal) / 12%); border-radius: 0; background: transparent; box-shadow: none; }
.market-sell-search > i { color: rgb(var(--terminal-crystal) / 63%); font-family: serif; font-size: 1.05rem; font-style: normal; }
.market-sell-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.market-sell-filter-grid > label { display: grid; gap: 3px; min-width: 0; }
.market-sell-filter-grid > label > span { color: #61797e; font-size: .43rem; letter-spacing: .04em; }
.market-sell-filter-grid select { width: 100%; min-width: 0; height: 38px; padding: 0 24px 0 8px; border-color: rgb(var(--terminal-crystal) / 17%); border-radius: 2px; background-color: #091115; color: #c5cfcc; font-size: .57rem; }
.market-sell-reset { min-height: 38px; align-self: end; padding: 6px 8px; font-size: .52rem; }
.market-sell-result { margin: 0; color: #657a7e; font-size: .47rem; text-align: right; }
.market-sell-result span { color: #cbb374; font-family: Georgia, "Times New Roman", serif; font-size: .66rem; }
.market-sell-panel .market-sell-list { display: grid; gap: 7px; }
.market-terminal .market-sell-row { grid-template-columns: minmax(0, 1fr) minmax(84px, .55fr) auto; border-radius: 2px; border-color: rgb(var(--terminal-crystal) / 13%); background: rgb(4 10 13 / 47%); }
.market-terminal .market-sell-row input { min-width: 0; }
.market-sell-core { display: grid; gap: 3px; min-width: 0; }
.market-sell-core .core-inline-title { min-width: 0; overflow-wrap: anywhere; }
.market-sell-core > small { padding-left: 27px; color: #61777c; font-size: .45rem; }
.market-terminal .market-own-listing { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px; border-color: rgb(var(--terminal-crystal) / 14%); border-radius: 2px; background: rgb(4 10 13 / 45%); }
.market-own-listing > span { display: grid; justify-items: end; }
.market-own-listing > span b { color: #e2c37d; font-family: Georgia, "Times New Roman", serif; font-size: .8rem; }
.market-own-listing > span small { color: #687a7e; font-size: .4rem; }
.market-own-listing > button { grid-column: 1 / -1; min-height: 38px; }
.market-trade-history .trade-row { border-color: rgb(var(--terminal-crystal) / 11%); }
.market-terminal .market-history-panel { padding: 0; overflow: hidden; }
.market-terminal .market-history-toggle { min-height: 58px; padding: 10px 12px; }
.market-terminal .market-pagination { border-top-color: rgb(var(--terminal-crystal) / 12%); }

.menu-screen { --terminal-crystal: 83 170 179; }
.menu-console-heading { min-height: 82px; }
.menu-console-title { padding-right: 116px; }
.menu-console-grid { display: grid; gap: 10px; }
.menu-screen .menu-category {
  --menu-section-rgb: var(--terminal-crystal);
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgb(var(--menu-section-rgb) / 16%);
  border-radius: 4px;
  background: radial-gradient(circle at 100% 0%, rgb(var(--menu-section-rgb) / 6%), transparent 29%), linear-gradient(145deg, #10171a, #080d10);
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
}
.menu-screen .menu-category:nth-child(2) { --menu-section-rgb: 104 178 145; }
.menu-screen .menu-category:nth-child(3) { --menu-section-rgb: 204 160 76; }
.menu-screen .menu-category:nth-child(4) { --menu-section-rgb: 131 105 193; }
.menu-category-heading { display: flex; align-items: center; gap: 9px; min-height: 47px; padding: 8px 11px; border-bottom: 1px solid rgb(var(--menu-section-rgb) / 12%); background: linear-gradient(90deg, rgb(var(--menu-section-rgb) / 6%), transparent); }
.menu-category-heading > span { color: rgb(var(--menu-section-rgb) / 30%); font-family: Georgia, "Times New Roman", serif; font-size: 1.48rem; line-height: 1; letter-spacing: -.05em; }
.menu-category-heading > div { display: grid; gap: 1px; }
.menu-category-heading small { color: rgb(var(--menu-section-rgb) / 61%); font-family: Georgia, "Times New Roman", serif; font-size: .31rem; letter-spacing: .14em; }
.menu-screen .menu-category h3 { display: block; margin: 0; padding: 0; border: 0; color: #d9d8cf; font-family: "Yu Mincho", serif; font-size: .72rem; font-weight: 500; letter-spacing: .06em; }
.menu-screen .menu-category h3::before { display: none; }
.menu-screen .menu-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.menu-screen .menu-card { position: relative; min-height: 67px; grid-template-columns: 45px minmax(0, 1fr) 16px; gap: 10px; padding: 8px 11px; border: 0; border-bottom: 1px solid rgb(var(--menu-section-rgb) / 9%); border-radius: 0; background: transparent; box-shadow: none; }
.menu-screen .menu-card:last-child { border-bottom: 0; }
.menu-screen .menu-card::before { position: absolute; top: 10px; bottom: 10px; left: 0; width: 2px; background: transparent; content: ""; }
.menu-screen .menu-card:hover, .menu-screen .menu-card:focus-visible { background: linear-gradient(90deg, rgb(var(--menu-section-rgb) / 9%), transparent 78%); }
.menu-screen .menu-card:hover::before, .menu-screen .menu-card:focus-visible::before { background: rgb(var(--menu-section-rgb) / 73%); box-shadow: 0 0 7px rgb(var(--menu-section-rgb) / 35%); }
.menu-screen .menu-card > img, .menu-screen .menu-card-icon, .menu-screen .menu-card-help-icon { width: 39px; height: 39px; }
.menu-screen .menu-card > img { filter: drop-shadow(0 4px 7px rgb(0 0 0 / 44%)); }
.menu-screen .menu-card-symbol { color: rgb(var(--menu-section-rgb) / 83%); }
.menu-screen .menu-card-symbol svg { width: 30px; height: 30px; }
.menu-screen .menu-card-help-icon { border-color: rgb(var(--menu-section-rgb) / 42%); border-radius: 50%; background: rgb(var(--menu-section-rgb) / 8%); color: rgb(var(--menu-section-rgb) / 85%); font-size: 1.25rem; }
.menu-screen .menu-card-copy strong { color: #d9deda; font-family: "Yu Mincho", serif; font-size: .75rem; font-weight: 500; letter-spacing: .04em; }
.menu-screen.page-layout .menu-card-copy > span { color: #687b7f; font-size: var(--ga-font-caption, .6875rem); line-height: 1.45; }
.menu-screen .menu-card-arrow { color: rgb(var(--menu-section-rgb) / 49%); font-family: Georgia, "Times New Roman", serif; font-size: 1rem; }
.menu-screen .menu-card-unread { position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: #ff4038; pointer-events: none; }
#navigation > button[data-tab="menu"] { position: relative; }
#navigation > button[data-tab="menu"].has-facility-unread::after { position: absolute; top: 4px; right: 6px; bottom: auto; left: auto; width: 10px; height: 10px; aspect-ratio: auto; border: 2px solid var(--surface); border-radius: 50%; background: #ff4038; content: ""; opacity: 1; transform: none; animation: none; pointer-events: none; }
.menu-screen > .expedition-read-only-notice { margin: 0; }

@media (min-width: 760px) {
  .menu-console-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 420px) {
  .market-terminal-title, .menu-console-title { gap: 8px; padding: 11px 10px; }
  .market-terminal-title { padding-right: 100px; }
  .menu-console-title { padding-right: 96px; }
  .market-terminal-title .abyss-mechanism-mark, .menu-console-title .abyss-mechanism-mark { width: 37px; height: 37px; flex-basis: 37px; }
  .market-terminal-title .abyss-mechanism-gear, .menu-console-title .abyss-mechanism-gear { width: 32px; height: 32px; }
  .market-terminal-title .eyebrow, .menu-console-title .eyebrow { font-size: .34rem; }
  .market-terminal-title h1, .menu-console-title h1 { font-size: .91rem; }
  .market-terminal-title small, .menu-console-title small { font-size: .44rem; }
  .market-terminal-readout, .menu-console-readout { top: 10px; right: 9px; min-width: 78px; padding-left: 7px; }
  .market-terminal-readout > strong, .menu-console-readout > strong { font-size: .82rem; }
  .market-terminal-readout > span, .menu-console-readout > span { font-size: .25rem; }
  .market-terminal-guide { grid-template-columns: 1fr; gap: 3px; margin: 0 9px 9px; }
  .market-terminal .market-mode-tab { min-height: 65px; padding: 8px 10px; }
  .market-terminal .market-mode-tab strong { font-size: .69rem; }
  .market-terminal .market-mode-tab small { font-size: .42rem; }
  .market-terminal .market-view > .panel { padding: 10px 9px; border-right: 0; border-left: 0; }
  .market-search-console { grid-template-columns: minmax(0, 1fr) auto; }
  .market-search-console > span { display: none; }
  .market-search-console input { border-left: 0; }
  .market-sell-search { grid-template-columns: minmax(0, 1fr) auto; }
  .market-sell-search > span { display: none; }
  .market-sell-search input { border-left: 0; }
  .market-sell-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-sell-sort { grid-column: 1 / 2; }
  .market-terminal .market-sell-row { grid-template-columns: minmax(0, 1fr) 80px; }
  .market-terminal .market-sell-row button { grid-column: 1 / -1; min-height: 40px; }
  .menu-console-heading { min-height: 75px; }
  .menu-screen .menu-category { border-right: 0; border-left: 0; }
  .menu-screen .menu-card { min-height: 65px; }
}

@media (max-width: 350px) {
  .market-terminal-title small, .menu-console-title small, .market-terminal-readout > small, .menu-console-readout > small { display: none; }
  .market-terminal-title .eyebrow, .menu-console-title .eyebrow { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
  .market-section-heading > span { max-width: 92px; }
}

/* Auth gateway v2: descent reconnection terminal */
body.auth-gateway-active {
  --auth-crystal: 90 202 220;
  --auth-gold: 215 172 84;
  min-height: 100dvh;
  background: #03070a;
}
body.auth-gateway-active #app { width: 100%; max-width: none; min-height: 100dvh; padding: 0; }
.auth-gateway {
  position: relative;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  padding: clamp(18px, 5vh, 58px) clamp(14px, 4vw, 56px);
  isolation: isolate;
}
.auth-gateway-background { position: fixed; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.78) contrast(1.08) brightness(.66); transform: scale(1.012); }
.auth-gateway-shade {
  position: fixed;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 76% 52%, transparent 0 14%, rgb(2 6 9 / 16%) 34%, rgb(2 6 9 / 74%) 72%),
    linear-gradient(90deg, rgb(2 6 9 / 92%) 0%, rgb(2 6 9 / 67%) 46%, rgb(2 6 9 / 32%) 72%, rgb(2 6 9 / 62%) 100%),
    linear-gradient(180deg, rgb(1 4 7 / 56%), transparent 28%, rgb(1 4 6 / 73%));
}
.auth-gateway::before { position: fixed; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(var(--auth-crystal) / 3%) 1px, transparent 1px), linear-gradient(rgb(var(--auth-crystal) / 3%) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, black, transparent 67%); content: ""; }
.auth-gateway-shell {
  position: relative;
  display: grid;
  width: min(1020px, 100%);
  min-height: min(680px, calc(100dvh - 36px));
  grid-template-columns: minmax(0, 1.08fr) minmax(400px, .82fr);
  overflow: hidden;
  border: 1px solid rgb(var(--auth-gold) / 37%);
  border-radius: 5px;
  background: linear-gradient(115deg, rgb(5 12 16 / 80%) 0 54%, rgb(7 12 15 / 96%) 54% 100%);
  box-shadow: 0 34px 90px rgb(0 0 0 / 68%), inset 0 1px rgb(255 255 255 / 5%), inset 0 0 90px rgb(var(--auth-crystal) / 4%);
  backdrop-filter: blur(12px);
}
.auth-gateway-shell::before { position: absolute; z-index: 3; top: 0; right: 18px; left: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--auth-crystal) / 72%), rgb(var(--auth-gold) / 76%), transparent); content: ""; }
.auth-gateway-shell::after { position: absolute; z-index: 3; right: 13px; bottom: 13px; width: 26px; height: 26px; border-right: 1px solid rgb(var(--auth-gold) / 51%); border-bottom: 1px solid rgb(var(--auth-gold) / 51%); content: ""; pointer-events: none; }
.auth-gateway-lore {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 5vw, 56px);
  overflow: hidden;
  border-right: 1px solid rgb(var(--auth-crystal) / 14%);
  background: radial-gradient(circle at 88% 12%, rgb(var(--auth-crystal) / 10%), transparent 32%), linear-gradient(145deg, rgb(3 11 15 / 80%), rgb(2 7 10 / 39%));
}
.auth-gateway-lore::after { position: absolute; right: -120px; bottom: -130px; width: 360px; height: 360px; border: 1px solid rgb(var(--auth-crystal) / 7%); border-radius: 50%; box-shadow: inset 0 0 0 42px rgb(var(--auth-crystal) / 2%), inset 0 0 0 43px rgb(var(--auth-crystal) / 6%), inset 0 0 0 90px rgb(var(--auth-crystal) / 2%); content: ""; pointer-events: none; }
.auth-gateway-brand { display: flex; align-items: center; gap: 12px; }
.auth-gateway-brand .abyss-mechanism-mark { width: 48px; height: 48px; flex: 0 0 48px; }
.auth-gateway-brand .abyss-mechanism-gear { width: 42px; height: 42px; }
.auth-gateway-brand > span { display: grid; gap: 2px; }
.auth-gateway-brand strong { color: #f1e7cc; font-family: Georgia, "Times New Roman", serif; font-size: .92rem; font-weight: 500; letter-spacing: .17em; }
.auth-gateway-brand small { color: rgb(var(--auth-crystal) / 61%); font-family: Georgia, "Times New Roman", serif; font-size: .38rem; letter-spacing: .14em; }
.auth-gateway-signal { display: flex; align-items: center; gap: 7px; margin-top: 34px; color: #739198; font-family: Georgia, "Times New Roman", serif; font-size: .42rem; letter-spacing: .14em; }
.auth-gateway-signal i { width: 6px; height: 6px; border-radius: 50%; background: #6fc7b0; box-shadow: 0 0 9px #6fc7b0; }
.auth-gateway-signal strong { margin-left: auto; color: #74b9c2; font-size: .36rem; font-weight: 400; }
.auth-gateway-message { position: relative; z-index: 1; margin: auto 0; padding: 38px 0; }
.auth-gateway-message > p { margin: 0 0 8px; color: rgb(var(--auth-gold) / 82%); font-family: Georgia, "Times New Roman", serif; font-size: .45rem; letter-spacing: .2em; }
.auth-gateway-message h1 { margin: 0; color: #f2ead5; font-family: "Yu Mincho", Georgia, serif; font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 500; line-height: 1.38; letter-spacing: .06em; text-shadow: 0 4px 20px #000; }
.auth-gateway-message > span { display: block; max-width: 410px; margin-top: 17px; color: #a9b5b3; font-family: "Yu Mincho", serif; font-size: .7rem; line-height: 1.85; letter-spacing: .04em; }
.auth-gateway-route { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid rgb(var(--auth-crystal) / 14%); border-bottom: 1px solid rgb(var(--auth-crystal) / 14%); list-style: none; }
.auth-gateway-route li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; padding: 10px 8px; border-right: 1px solid rgb(var(--auth-crystal) / 11%); }
.auth-gateway-route li:last-child { border-right: 0; }
.auth-gateway-route li > span { color: rgb(var(--auth-gold) / 49%); font-family: Georgia, "Times New Roman", serif; font-size: .72rem; }
.auth-gateway-route li div { display: grid; min-width: 0; gap: 2px; }
.auth-gateway-route strong { color: #c5d0ce; font-family: Georgia, "Times New Roman", serif; font-size: .4rem; font-weight: 400; letter-spacing: .09em; }
.auth-gateway-route small { overflow: hidden; color: #61777c; font-size: .4rem; text-overflow: ellipsis; white-space: nowrap; }
.auth-gateway-depth { position: relative; z-index: 1; display: flex; align-items: end; gap: 8px; margin-top: 19px; color: #637a80; }
.auth-gateway-depth > span { padding-bottom: 4px; font-family: Georgia, "Times New Roman", serif; font-size: .37rem; letter-spacing: .16em; }
.auth-gateway-depth > strong { color: #ddc584; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-weight: 400; line-height: 1; }
.auth-gateway-depth > strong small { margin-left: 2px; color: #7b817a; font-size: .47rem; }
.auth-gateway-depth > i { height: 1px; flex: 1; margin-bottom: 4px; background: linear-gradient(90deg, rgb(var(--auth-gold) / 38%), transparent); }
.auth-panel {
  position: relative;
  z-index: 2;
  display: flex;
  width: auto;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: clamp(27px, 4vw, 45px);
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at 100% 0%, rgb(var(--auth-crystal) / 8%), transparent 32%), linear-gradient(155deg, rgb(13 21 25 / 96%), rgb(5 10 13 / 98%));
  box-shadow: inset 1px 0 rgb(255 255 255 / 2%);
}
.auth-panel::before { position: absolute; top: 21px; right: 0; width: 2px; height: 54px; background: linear-gradient(rgb(var(--auth-crystal) / 86%), transparent); box-shadow: 0 0 12px rgb(var(--auth-crystal) / 38%); content: ""; }
.auth-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid rgb(var(--auth-crystal) / 14%); }
.auth-panel-heading .eyebrow { margin: 0 0 5px; color: rgb(var(--auth-crystal) / 67%); font-family: Georgia, "Times New Roman", serif; font-size: .4rem; letter-spacing: .17em; }
.auth-panel-heading h2 { margin: 0; color: #eee8da; font-family: "Yu Mincho", serif; font-size: 1.42rem; font-weight: 500; letter-spacing: .08em; }
.auth-panel-heading div > span { display: block; margin-top: 7px; color: #75878b; font-size: .56rem; line-height: 1.6; }
.auth-panel-heading > strong { color: rgb(var(--auth-crystal) / 15%); font-family: Georgia, "Times New Roman", serif; font-size: 2.6rem; font-weight: 400; line-height: .86; }
.auth-panel .auth-form { gap: 15px; margin: 19px 0 11px; }
.auth-panel .auth-field { display: grid; gap: 7px; }
.auth-panel .auth-field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #d7dcda; font-family: "Yu Mincho", serif; font-size: .72rem; letter-spacing: .05em; }
.auth-panel .auth-field > span small { color: #4f7178; font-family: Georgia, "Times New Roman", serif; font-size: .32rem; letter-spacing: .14em; }
.auth-panel .auth-field input { height: 52px; padding: 11px 13px; border: 1px solid rgb(var(--auth-crystal) / 20%); border-radius: 3px; background: rgb(2 7 10 / 70%); color: #edf1ed; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 36%), inset 0 8px 20px rgb(0 0 0 / 18%); transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; }
.auth-panel .auth-field input:focus { outline: none; border-color: rgb(var(--auth-crystal) / 64%); background: rgb(3 11 15 / 86%); box-shadow: inset 0 0 0 1px rgb(var(--auth-crystal) / 7%), 0 0 0 2px rgb(var(--auth-crystal) / 9%), 0 0 16px rgb(var(--auth-crystal) / 8%); }
.auth-submit-button { display: grid; min-height: 61px; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: center; gap: 1px 12px; margin-top: 3px; border-color: rgb(var(--auth-gold) / 69%); border-radius: 3px; background: linear-gradient(145deg, #8c6925, #554017); color: #fff0c4; box-shadow: inset 0 1px rgb(255 248 208 / 18%), 0 10px 22px rgb(0 0 0 / 28%); text-align: left; }
.auth-submit-button > span { color: rgb(255 238 188 / 62%); font-family: Georgia, "Times New Roman", serif; font-size: .33rem; letter-spacing: .15em; }
.auth-submit-button > strong { font-family: "Yu Mincho", serif; font-size: .75rem; letter-spacing: .06em; }
.auth-submit-button > i { grid-row: 1 / 3; grid-column: 2; color: #ffe7a7; font-family: Georgia, "Times New Roman", serif; font-size: 1.42rem; font-style: normal; }
.auth-panel-secondary { display: grid; gap: 6px; }
.auth-panel .auth-switch-button { min-height: 47px; margin: 0; border-color: rgb(var(--auth-crystal) / 16%); border-radius: 3px; background: rgb(var(--auth-crystal) / 4%); color: #b9c3c1; font-family: "Yu Mincho", serif; font-size: .67rem; }
.auth-panel .auth-landing-back { justify-self: start; min-height: 35px; padding: 5px 0; color: #77878a; font-size: .6rem; }
.auth-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; padding-top: 11px; border-top: 1px solid rgb(var(--auth-crystal) / 9%); color: #52686d; font-family: Georgia, "Times New Roman", serif; font-size: .32rem; letter-spacing: .11em; }
.auth-panel-footer > span { display: flex; align-items: center; gap: 5px; }
.auth-panel-footer i { width: 4px; height: 4px; border-radius: 50%; background: #6fc7b0; box-shadow: 0 0 7px #6fc7b0; }
.auth-panel .character-fieldset { border-color: rgb(var(--auth-crystal) / 18%); border-radius: 3px; background: rgb(2 7 10 / 36%); }
.auth-panel .legal-consent { border-color: rgb(var(--auth-crystal) / 14%); border-radius: 3px; background: rgb(2 7 10 / 46%); }

@media (max-width: 760px) {
  .auth-gateway { place-items: start center; }
  .auth-gateway-background { object-position: 70% center; }
  .auth-gateway-shade { background: linear-gradient(180deg, rgb(2 6 9 / 60%) 0%, rgb(2 6 9 / 76%) 31%, rgb(2 6 9 / 93%) 65%, #020609 100%); }
  .auth-gateway-shell { width: min(520px, 100%); min-height: 0; grid-template-columns: 1fr; background: rgb(5 11 14 / 91%); }
  .auth-gateway-lore { min-height: 245px; padding: 24px 25px 20px; border-right: 0; border-bottom: 1px solid rgb(var(--auth-crystal) / 14%); }
  .auth-gateway-signal { margin-top: 20px; }
  .auth-gateway-message { margin: 0; padding: 24px 0 18px; }
  .auth-gateway-message h1 { font-size: 2rem; }
  .auth-gateway-message > span { max-width: 360px; margin-top: 9px; font-size: .6rem; }
  .auth-gateway-route { display: none; }
  .auth-gateway-depth { margin-top: 4px; }
  .auth-panel { padding: 27px 25px 24px; }
}

@media (max-width: 420px) {
  .auth-gateway { padding: 12px 9px 22px; }
  .auth-gateway::before { background-size: 42px 42px; }
  .auth-gateway-shell { border-right-color: rgb(var(--auth-crystal) / 19%); border-left-color: rgb(var(--auth-crystal) / 19%); }
  .auth-gateway-lore { min-height: 220px; padding: 20px 18px 16px; }
  .auth-gateway-brand { gap: 9px; }
  .auth-gateway-brand .abyss-mechanism-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .auth-gateway-brand .abyss-mechanism-gear { width: 35px; height: 35px; }
  .auth-gateway-brand strong { font-size: .78rem; }
  .auth-gateway-brand small { font-size: .31rem; }
  .auth-gateway-signal { margin-top: 15px; font-size: .36rem; }
  .auth-gateway-message { padding: 18px 0 13px; }
  .auth-gateway-message > p { margin-bottom: 4px; font-size: .36rem; }
  .auth-gateway-message h1 { font-size: 1.62rem; line-height: 1.35; }
  .auth-gateway-message > span { font-size: .52rem; line-height: 1.7; }
  .auth-gateway-depth > strong { font-size: .92rem; }
  .auth-panel { padding: 22px 17px 19px; }
  .auth-panel-heading { padding-bottom: 13px; }
  .auth-panel-heading h2 { font-size: 1.15rem; }
  .auth-panel-heading div > span { font-size: .49rem; }
  .auth-panel-heading > strong { font-size: 2.1rem; }
  .auth-panel .auth-form { gap: 13px; margin-top: 16px; }
  .auth-panel .auth-field input { height: 51px; }
  .auth-submit-button { min-height: 60px; }
}

@media (max-width: 350px) {
  .auth-gateway-lore { min-height: 202px; }
  .auth-gateway-brand small, .auth-gateway-signal strong, .auth-gateway-message > span { display: none; }
  .auth-gateway-message { padding-bottom: 8px; }
  .auth-panel { padding-right: 13px; padding-left: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-gateway-background { transform: none; }
}

/* GEAR ABYSS battle command deck: shared mechanism, abyss, crystal, and metal language. */
.battle-shell {
  --battle-deck-crystal: var(--abyss-crystal-rgb);
  --battle-deck-gold: 213 181 103;
  position: relative;
  isolation: isolate;
}
.battle-header {
  position: relative;
  min-height: 54px;
  padding: 6px 8px;
  border: 1px solid rgb(var(--battle-deck-crystal) / 19%);
  border-radius: 9px 9px 3px 3px;
  background: radial-gradient(circle at 7% 0%, rgb(var(--battle-deck-crystal) / 11%), transparent 34%), linear-gradient(110deg, rgb(18 27 33 / 98%), rgb(9 14 19 / 98%) 63%, rgb(24 21 15 / 98%));
  box-shadow: 0 7px 18px rgb(0 0 0 / 24%), inset 0 1px rgb(255 255 255 / 5%);
}
.battle-header::before {
  position: absolute;
  top: -1px;
  right: 14%;
  left: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--battle-deck-crystal) / 72%), rgb(var(--battle-deck-gold) / 56%), transparent);
  box-shadow: 0 0 10px rgb(var(--battle-deck-crystal) / 24%);
  content: "";
  pointer-events: none;
}
.battle-header::after {
  position: absolute;
  right: 6px;
  bottom: 4px;
  width: 18px;
  height: 8px;
  border-right: 1px solid rgb(var(--battle-deck-crystal) / 35%);
  border-bottom: 1px solid rgb(var(--battle-deck-crystal) / 35%);
  content: "";
  pointer-events: none;
}
.battle-header-identity { display: grid; grid-template-columns: 39px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.battle-header-identity > .abyss-mechanism-mark { width: 35px; height: 35px; flex-basis: 35px; }
.battle-header-identity .abyss-mechanism-gear { width: 30px; height: 30px; }
.battle-header-identity .abyss-mechanism-crystal { width: 12px; height: 12px; }
.battle-header-copy { display: grid; min-width: 0; gap: 2px; }
.battle-header-copy .eyebrow { display: flex; align-items: center; gap: 5px; margin: 0; overflow: hidden; color: #78939a; font-family: Georgia, "Times New Roman", serif; font-size: .42rem; letter-spacing: .11em; text-overflow: ellipsis; white-space: nowrap; }
.battle-header-copy .eyebrow span { color: rgb(var(--battle-deck-crystal) / 78%); }
.battle-header-copy .eyebrow i { color: rgb(var(--battle-deck-gold) / 52%); font-style: normal; }
.battle-header .battle-progress-title { min-width: 0; color: #ece8dc; font-family: "Yu Mincho", serif; font-weight: 500; letter-spacing: .04em; }
.battle-header .battle-difficulty-label { color: #a8966c; text-shadow: 0 0 8px rgb(var(--battle-deck-gold) / 13%); }
.battle-header .battle-floor-label { color: #ead49a; font-family: Georgia, "Times New Roman", serif; font-size: 1.08em; text-shadow: 0 0 10px rgb(var(--battle-deck-gold) / 16%); }
.battle-header .battle-phase-label { color: #a9bec2; }
.battle-header .battle-round-label { padding: 2px 5px; border: 1px solid rgb(var(--battle-deck-crystal) / 16%); border-radius: 99px; background: rgb(var(--battle-deck-crystal) / 5%); color: #8aa2a8; }
.battle-header .battle-round-label.round-limit-warning { border-color: rgb(221 181 95 / 48%); background: rgb(132 91 31 / 24%); color: #f1d59a; box-shadow: 0 0 10px rgb(214 163 61 / 14%); }
.battle-header .battle-round-label.round-limit-critical { border-color: rgb(240 99 104 / 62%); background: rgb(113 28 36 / 36%); color: #ffd5d4; box-shadow: 0 0 13px rgb(226 55 68 / 25%); }
.limited-abyss-round-warning { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 30px; padding: 5px 12px; border-top: 1px solid rgb(221 181 95 / 28%); border-bottom: 1px solid rgb(221 181 95 / 34%); background: linear-gradient(90deg, rgb(65 43 19 / 72%), rgb(117 75 25 / 66%) 50%, rgb(65 43 19 / 72%)); color: #f2dbab; text-align: center; box-shadow: inset 0 1px rgb(255 236 189 / 6%), 0 4px 18px rgb(0 0 0 / 18%); }
.limited-abyss-round-warning small { color: #c8a768; font-size: .48rem; font-weight: 700; letter-spacing: .16em; }
.limited-abyss-round-warning strong { font-size: .72rem; letter-spacing: .04em; }
.limited-abyss-round-warning.critical { border-color: rgb(239 84 91 / 45%); background: linear-gradient(90deg, rgb(72 16 24 / 82%), rgb(126 27 36 / 80%) 50%, rgb(72 16 24 / 82%)); color: #ffe0df; box-shadow: inset 0 1px rgb(255 213 213 / 7%), 0 0 18px rgb(214 39 51 / 14%); animation: law-collapse-warning-pulse 1.7s ease-in-out infinite; }
.limited-abyss-round-warning.critical small { color: #ff999b; }
.battle-shell.law-collapse-critical .combatants { box-shadow: inset 0 0 34px rgb(150 18 29 / 16%); }
@keyframes law-collapse-warning-pulse { 50% { border-color: rgb(255 127 132 / 70%); box-shadow: inset 0 1px rgb(255 213 213 / 10%), 0 0 24px rgb(214 39 51 / 23%); } }
.battle-header .battle-mode-label { color: #9a8e70; }
.battle-header .battle-phase-node { border-color: rgb(151 180 184 / 45%); background: rgb(3 10 14 / 68%); }
.battle-header .battle-phase-node.complete { border-color: rgb(var(--battle-deck-crystal) / 76%); background: rgb(var(--battle-deck-crystal) / 64%); box-shadow: 0 0 7px rgb(var(--battle-deck-crystal) / 34%); }
.battle-header .battle-phase-node.active { border-color: rgb(var(--battle-deck-gold) / 82%); box-shadow: 0 0 0 2px rgb(var(--battle-deck-gold) / 10%), 0 0 8px rgb(var(--battle-deck-gold) / 18%); }
.battle-header .battle-phase-connector { background: rgb(128 151 155 / 22%); }
.battle-header .battle-phase-connector > i { background: linear-gradient(90deg, rgb(var(--battle-deck-crystal) / 66%), rgb(var(--battle-deck-gold) / 70%)); }
.battle-header .battle-loot-button,
.battle-header .battle-auto-button,
.battle-header .battle-auto-settings-button,
.battle-header .battle-speed-trigger,
.battle-header .battle-retreat-button,
.battle-header .arena-duel-badge { border-radius: 4px; box-shadow: inset 0 1px rgb(255 255 255 / 5%), 0 3px 10px rgb(0 0 0 / 20%); }
.battle-header .battle-auto-group { border-radius: 4px; }
.battle-header .battle-auto-group > .battle-auto-button { border-radius: 3px 0 0 3px; box-shadow: none; }
.battle-header .battle-auto-group > .battle-auto-settings-button { border-radius: 0 3px 3px 0; box-shadow: none; }

.battle-shell .arena { border-color: rgb(var(--battle-deck-crystal) / 18%); background: radial-gradient(circle at 50% 4%, rgb(var(--battle-deck-crystal) / 8%), transparent 38%), linear-gradient(180deg, rgb(11 17 21 / 96%), rgb(4 8 11 / 98%)); box-shadow: 0 14px 38px rgb(0 0 0 / 31%), inset 0 0 0 1px rgb(255 255 255 / 2%); }
.battle-shell[class*="battle-zone-"] .combatants {
  border-top: 1px solid rgb(var(--battle-deck-crystal) / 16%);
  border-bottom: 1px solid rgb(var(--battle-deck-crystal) / 17%);
  background-image: radial-gradient(circle at 50% 9%, rgb(var(--battle-deck-crystal) / 8%), transparent 33%), linear-gradient(90deg, rgb(2 6 9 / 55%), rgb(2 6 9 / 12%) 45%, rgb(2 6 9 / 39%)), linear-gradient(0deg, rgb(2 6 8 / 82%), rgb(2 6 8 / 7%) 68%, rgb(2 6 8 / 25%)), var(--battle-zone-image);
  box-shadow: inset 0 1px rgb(255 255 255 / 6%), inset 0 -48px 66px rgb(0 0 0 / 33%), inset 10px 0 24px rgb(0 0 0 / 16%), inset -10px 0 24px rgb(0 0 0 / 16%);
}
.battle-shell .party-member .actor-name,
.battle-shell .party-member.taking-turn .actor-name,
.battle-shell .enemy .actor-name { padding: 0 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 3px #000; }
.battle-shell .enemy.selected .actor-name { color: #ffe1dc; }
.battle-shell:not(.arena-duel) .enemy.selected .enemy-resource-meter .bar { box-shadow: 0 0 0 1px rgb(240 130 130 / 22%), 0 0 7px rgb(224 83 83 / 18%); }
.battle-shell .battle-acting-label { border-color: rgb(var(--battle-deck-crystal) / 52%); background: rgb(8 54 63 / 87%); color: #d8f7fa; box-shadow: 0 0 9px rgb(var(--battle-deck-crystal) / 22%); }

.battle-info-panel { position: relative; border-color: rgb(var(--battle-deck-crystal) / 18%); background: radial-gradient(circle at 0 50%, rgb(var(--battle-deck-crystal) / 5%), transparent 34%), linear-gradient(155deg, rgb(8 14 18 / 94%), rgb(3 7 10 / 97%)); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.battle-info-panel::before { position: absolute; z-index: 3; top: 38px; bottom: 0; left: 0; width: 2px; background: linear-gradient(rgb(var(--battle-deck-crystal) / 70%), transparent 72%); box-shadow: 0 0 8px rgb(var(--battle-deck-crystal) / 25%); content: ""; pointer-events: none; }
.battle-info-tabs { border-bottom-color: rgb(var(--battle-deck-crystal) / 16%); background: linear-gradient(180deg, rgb(15 22 27 / 98%), rgb(6 11 15 / 98%)); }
.battle-info-tab { border-right-color: rgb(var(--battle-deck-crystal) / 10%); color: #7f9095; font-family: "Yu Gothic UI", sans-serif; font-weight: 600; letter-spacing: .05em; }
.battle-info-tab::before { display: block; margin-bottom: 1px; color: rgb(var(--battle-deck-crystal) / 35%); font-family: Georgia, "Times New Roman", serif; font-size: .34rem; letter-spacing: .12em; content: "DATA"; }
.battle-info-tab:nth-child(1)::before { content: "ALLY"; }
.battle-info-tab:nth-child(2)::before { content: "ACTION"; }
.battle-info-tab:nth-child(3)::before { content: "LOG"; }
.battle-info-tab:nth-child(4)::before { content: "STATUS"; }
.battle-info-tab.active { background: radial-gradient(circle at 50% 120%, rgb(var(--battle-deck-gold) / 18%), transparent 64%), linear-gradient(180deg, rgb(var(--battle-deck-crystal) / 8%), rgb(9 13 15 / 24%)); color: #ead9ab; box-shadow: inset 0 -2px rgb(var(--battle-deck-gold) / 78%); }
.battle-info-tab.active::before { color: rgb(var(--battle-deck-gold) / 62%); }
.battle-party-row { position: relative; border-bottom-color: rgb(var(--battle-deck-crystal) / 9%); background: linear-gradient(90deg, rgb(var(--party-color-rgb, var(--battle-deck-crystal)) / 5%), transparent 34%); box-shadow: inset 2px 0 rgb(var(--party-color-rgb, var(--battle-deck-crystal)) / 34%); }
.battle-party-row:nth-child(even) { background-color: rgb(255 255 255 / 1.5%); }
.battle-party-name { color: #dce5e5; font-family: "Yu Mincho", serif; font-weight: 600; letter-spacing: .02em; }
.battle-party-status { border-left-color: rgb(var(--battle-deck-crystal) / 12%); }

.command-dock { border-top-color: rgb(var(--battle-deck-crystal) / 26%); background: radial-gradient(circle at 50% 0%, rgb(var(--battle-deck-crystal) / 8%), transparent 38%), linear-gradient(180deg, rgb(14 22 27 / 98%), rgb(5 9 12 / 99%)); box-shadow: 0 -14px 38px rgb(0 0 0 / 46%), inset 0 1px rgb(255 255 255 / 4%); }
.command-dock::before { position: absolute; top: -1px; right: 8%; left: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--battle-deck-crystal) / 70%), rgb(var(--battle-deck-gold) / 52%), transparent); box-shadow: 0 0 10px rgb(var(--battle-deck-crystal) / 25%); content: ""; pointer-events: none; }
.battle-actions { position: relative; }
.command-button { border-color: rgb(var(--battle-deck-crystal) / 20%); border-radius: 8px; background: radial-gradient(circle at 50% 0%, rgb(var(--battle-deck-crystal) / 8%), transparent 48%), linear-gradient(180deg, rgb(30 39 46 / 98%), rgb(12 17 22 / 99%)); box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 5px 13px rgb(0 0 0 / 24%); }
.command-button::after { position: absolute; right: 7px; bottom: 3px; left: 7px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--battle-deck-crystal) / 26%), transparent); content: ""; pointer-events: none; }
.command-button:not(:disabled):is(:hover, :focus-visible) { border-color: rgb(var(--battle-deck-gold) / 55%); background: radial-gradient(circle at 50% 0%, rgb(var(--battle-deck-gold) / 14%), transparent 52%), linear-gradient(180deg, rgb(38 42 41 / 99%), rgb(17 19 19 / 99%)); box-shadow: inset 0 1px rgb(255 255 255 / 10%), 0 0 0 1px rgb(var(--battle-deck-gold) / 8%), 0 7px 16px rgb(0 0 0 / 28%); }
.command-button .command-label { color: #e5e7e2; font-family: "Yu Mincho", serif; letter-spacing: .025em; }
.command-button .command-meta { color: #7e9399; }
.command-dock[class*="party-color-"] .command-button { border-color: rgb(var(--party-color-rgb) / 37%); background: radial-gradient(circle at 50% 0%, rgb(var(--party-color-rgb) / 15%), transparent 50%), linear-gradient(180deg, rgb(27 35 41 / 98%), rgb(11 16 20 / 99%)); box-shadow: inset 0 1px rgb(var(--party-color-rgb) / 18%), 0 5px 13px rgb(0 0 0 / 24%); }
.command-dock[class*="party-color-"] .command-button::after { background: linear-gradient(90deg, transparent, rgb(var(--party-color-rgb) / 38%), transparent); }
.command-button.rule-forbidden:disabled,
.command-dock[class*="party-color-"] .command-button.rule-forbidden:disabled { border-color: rgb(205 77 88 / 48%); background: radial-gradient(circle at 50% 0%, rgb(167 47 58 / 18%), transparent 52%), linear-gradient(180deg, rgb(35 29 33 / 98%), rgb(17 14 17 / 99%)); cursor: not-allowed; opacity: .76; box-shadow: inset 0 0 0 1px rgb(205 77 88 / 10%), 0 5px 13px rgb(0 0 0 / 24%); }
.command-button.rule-forbidden .command-icon,
.command-button.rule-forbidden .command-icon-slot,
.command-button.rule-forbidden .command-symbol { filter: grayscale(.75) brightness(.68); }
.command-button.rule-forbidden .command-label { color: #c7afb2; }
.command-button.rule-forbidden .command-meta { color: #db7f87; }
.command-rule-forbidden-mark { position: absolute; z-index: 3; top: 3px; right: 4px; display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid rgb(255 178 184 / 76%); border-radius: 50%; background: rgb(83 20 28 / 92%); color: #ffd9dc; font-family: "Yu Gothic UI", sans-serif; font-size: .88rem; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px #000; box-shadow: 0 0 0 2px rgb(32 8 12 / 48%), 0 0 9px rgb(205 77 88 / 32%); pointer-events: none; }

.post-battle-actions.result-actions-only { position: relative; padding: 8px; border: 1px solid rgb(var(--battle-deck-crystal) / 16%); border-radius: 9px; background: radial-gradient(circle at 12% 0%, rgb(var(--battle-deck-crystal) / 7%), transparent 38%), linear-gradient(145deg, rgb(15 23 28 / 96%), rgb(7 11 15 / 98%)); box-shadow: 0 10px 26px rgb(0 0 0 / 28%), inset 0 1px rgb(255 255 255 / 4%); }
.post-battle-actions.result-actions-only::before { position: absolute; top: -1px; right: 17%; left: 17%; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--battle-deck-gold) / 54%), transparent); content: ""; }
.result-actions-only .battle-result-button { border-radius: 7px; background: linear-gradient(145deg, rgb(31 40 47 / 98%), rgb(16 22 27 / 99%)); box-shadow: inset 0 1px rgb(255 255 255 / 6%), 0 4px 12px rgb(0 0 0 / 20%); }
.result-actions-only .battle-result-button.primary-button { border-color: rgb(var(--battle-deck-gold) / 62%); background: radial-gradient(circle at 50% 0%, rgb(255 230 165 / 12%), transparent 48%), linear-gradient(145deg, #856621, #4e3b16); color: #fff0c2; }
.result-actions-only .loot-select-button { border-color: rgb(var(--battle-deck-crystal) / 28%); }
.battle-shell:not(.arena-duel) .floor-clear-notice { overflow: hidden; border-radius: 9px; background: radial-gradient(circle at 50% 4%, rgb(var(--battle-deck-gold) / 17%), transparent 43%), radial-gradient(circle at 92% 100%, rgb(var(--battle-deck-crystal) / 8%), transparent 35%), linear-gradient(150deg, rgb(14 20 24 / 97%), rgb(5 9 12 / 98%)); }
.battle-shell:not(.arena-duel) .floor-clear-notice::before { position: absolute; top: 0; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--battle-deck-gold) / 85%), transparent); box-shadow: 0 0 11px rgb(var(--battle-deck-gold) / 30%); content: ""; }
.battle-shell:not(.arena-duel) .floor-clear-notice::after { position: absolute; right: -28px; bottom: -33px; width: 88px; height: 88px; border: 1px solid rgb(var(--battle-deck-crystal) / 7%); border-radius: 50%; box-shadow: inset 0 0 0 12px rgb(var(--battle-deck-crystal) / 2%), inset 0 0 0 24px rgb(var(--battle-deck-gold) / 2%); content: ""; }
.floor-clear-eyebrow { font-family: Georgia, "Times New Roman", serif; }
.floor-clear-notice > strong { color: #f2ead6; font-family: "Yu Mincho", serif; font-weight: 600; letter-spacing: .05em; }
.floor-clear-notice > .floor-clear-title { display: grid; justify-items: center; gap: 2px; width: 100%; min-width: 0; font-size: 12px; line-height: 1.4; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
.floor-clear-title > span { display: block; max-width: 100%; }
.floor-clear-notice:has(> .floor-clear-title) > .abyss-mechanism-mark { width: 32px; height: 32px; flex-basis: 32px; }
.floor-clear-notice:has(> .floor-clear-title) .abyss-mechanism-gear { width: 27px; height: 27px; }
.floor-clear-notice:has(> .floor-clear-title) .abyss-mechanism-crystal { width: 11px; height: 11px; }

@media (max-width: 700px) {
  .battle-header { min-height: 46px; padding: 4px 6px; border-right: 0; border-left: 0; border-radius: 0; }
  body.battle-active .battle-header { width: calc(100% + 16px); margin-right: -8px; margin-left: -8px; }
  .battle-header-identity { grid-template-columns: 32px minmax(0, 1fr); gap: 6px; }
  .battle-header-identity > .abyss-mechanism-mark { width: 29px; height: 29px; flex-basis: 29px; }
  .battle-header-identity .abyss-mechanism-gear { width: 25px; height: 25px; }
  .battle-header-identity .abyss-mechanism-crystal { width: 10px; height: 10px; }
  .battle-header-copy .eyebrow { font-size: .35rem; }
  body.battle-active .battle-header h2 { font-size: .82rem; }
  body.battle-active .battle-progress-title { gap: 5px; }
  .battle-header .battle-round-label { padding: 1px 4px; }
  body.battle-active .arena { box-shadow: inset 0 0 0 1px rgb(var(--battle-deck-crystal) / 10%); }
  body.battle-active .battle-info-panel { border-top-color: rgb(var(--battle-deck-crystal) / 19%); border-bottom-color: rgb(var(--battle-deck-crystal) / 15%); }
  .battle-info-tab::before { font-size: .3rem; }
  body.battle-active .battle-party-row { box-shadow: inset 2px 0 rgb(var(--party-color-rgb, var(--battle-deck-crystal)) / 38%); }
  .command-dock { padding-right: 7px; padding-left: 7px; }
  .command-button { border-radius: 7px; }
  .post-battle-actions.result-actions-only { margin-right: -2px; margin-left: -2px; padding: 6px; border-right: 0; border-left: 0; border-radius: 0; }
  body.battle-active .result-actions-only:has(> [data-action="leave-limited-abyss"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 390px), (max-height: 700px) {
  .battle-header { min-height: 42px; padding-top: 3px; padding-bottom: 3px; }
  .battle-header-identity { grid-template-columns: 28px minmax(0, 1fr); gap: 5px; }
  .battle-header-identity > .abyss-mechanism-mark { width: 25px; height: 25px; flex-basis: 25px; }
  .battle-header-identity .abyss-mechanism-gear { width: 22px; height: 22px; }
  .battle-header-identity .abyss-mechanism-crystal { width: 9px; height: 9px; }
  .battle-header-copy .eyebrow { display: none; }
  body.battle-active .battle-header h2 { font-size: .76rem; }
  .battle-info-tab::before { display: none; }
  .command-dock { padding-top: 5px; }
  .post-battle-actions.result-actions-only { padding: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .battle-header-identity .abyss-mechanism-gear, .limited-abyss-round-warning.critical { animation: none; }
}

/* GEAR ABYSS settings and guide consoles: device controls and adventurer archive. */
.settings-console,
.help-screen {
  --console-cyan-rgb: 112 200 218;
  --console-violet-rgb: 153 116 209;
}
.settings-console {
  display: grid;
  width: min(100%, 780px);
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  border-color: rgb(var(--console-cyan-rgb) / 27%);
  background:
    radial-gradient(circle at 92% 4%, rgb(var(--console-violet-rgb) / 11%), transparent 31%),
    linear-gradient(155deg, rgb(28 35 40 / 98%), rgb(18 22 27 / 99%) 58%, rgb(13 17 21 / 99%));
  box-shadow: 0 20px 48px rgb(0 0 0 / 28%), inset 0 1px rgb(255 255 255 / 5%);
}
.settings-console::before,
.help-intro::before {
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--console-cyan-rgb) / 78%), rgb(var(--console-violet-rgb) / 72%), transparent);
  box-shadow: 0 0 12px rgb(var(--console-cyan-rgb) / 35%);
  content: "";
}
.settings-menu-back,
.help-menu-back {
  justify-self: start;
  margin: 13px 17px 0;
  color: rgb(202 217 220 / 74%);
  font-size: .72rem;
}
.settings-command-header,
.help-command-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 5px;
  padding: 15px 20px 17px;
  border-bottom: 1px solid rgb(var(--console-cyan-rgb) / 18%);
}
.settings-command-header::after,
.help-command-header::after {
  position: absolute;
  right: 20px;
  bottom: -1px;
  width: 58px;
  height: 1px;
  background: rgb(var(--console-cyan-rgb) / 70%);
  box-shadow: 0 0 8px rgb(var(--console-cyan-rgb) / 45%);
  content: "";
}
.settings-command-title,
.help-command-title {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.settings-command-title > div,
.help-command-title > div { min-width: 0; }
.settings-command-title .eyebrow,
.help-command-title .eyebrow { margin: 0 0 3px; color: rgb(var(--console-cyan-rgb) / 82%); font-size: .56rem; letter-spacing: .15em; }
.settings-command-title h1,
.help-command-title h1 { margin: 0; font-family: "Yu Mincho", serif; font-size: 1.55rem; letter-spacing: .06em; }
.settings-command-title small,
.help-command-title small { display: block; margin-top: 4px; color: var(--muted); font-size: .61rem; letter-spacing: .03em; }
.settings-save-readout,
.help-archive-readout {
  display: grid;
  min-width: 116px;
  gap: 3px;
  padding-left: 16px;
  border-left: 1px solid rgb(var(--console-cyan-rgb) / 20%);
  text-align: right;
}
.settings-save-readout > small,
.help-archive-readout > small { color: var(--muted); font-size: .49rem; letter-spacing: .14em; }
.settings-save-readout > strong { display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: #d8f4ee; font-size: .72rem; letter-spacing: .07em; }
.settings-save-readout > strong i,
.help-archive-readout > span i { width: 6px; height: 6px; border-radius: 50%; background: #71d6aa; box-shadow: 0 0 8px rgb(113 214 170 / 80%); }
.settings-save-readout > span { color: rgb(189 202 205 / 62%); font-size: .54rem; }
.settings-console > .settings-intro {
  margin: 0;
  padding: 13px 20px 15px;
  border-bottom: 1px solid rgb(255 255 255 / 5%);
  color: rgb(195 205 210 / 72%);
  font-size: .68rem;
}
.settings-deck { display: grid; gap: 13px; padding: 16px; }
.settings-console .settings-section {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(var(--console-cyan-rgb) / 18%);
  border-radius: 10px;
  background:
    linear-gradient(115deg, rgb(var(--console-cyan-rgb) / 5%), transparent 34%),
    rgb(7 12 16 / 42%);
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
}
.settings-console .settings-section + .settings-section { margin-top: 0; }
.settings-console .settings-section::after {
  position: absolute;
  top: 0;
  right: 9%;
  left: 9%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--console-cyan-rgb) / 45%), transparent);
  content: "";
}
.settings-console .settings-section-display { --console-cyan-rgb: 174 130 231; }
.settings-console .settings-section-chat { --console-cyan-rgb: 103 184 210; }
.settings-section-heading,
.help-group-heading {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 13px;
  border-bottom: 1px solid rgb(var(--console-cyan-rgb) / 15%);
  background: linear-gradient(90deg, rgb(var(--console-cyan-rgb) / 7%), transparent 60%);
}
.settings-section-heading > span,
.help-group-heading > span {
  color: rgb(var(--console-cyan-rgb) / 60%);
  font-family: Georgia, serif;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}
.settings-section-heading > div,
.help-group-heading > div { display: grid; min-width: 0; gap: 2px; }
.settings-section-heading small,
.help-group-heading small { color: rgb(var(--console-cyan-rgb) / 72%); font-size: .49rem; letter-spacing: .15em; }
.settings-section-heading h3,
.help-group-heading h2 { margin: 0; color: var(--text); font-family: "Yu Mincho", serif; font-size: .92rem; letter-spacing: .06em; }
.settings-console .setting-row {
  position: relative;
  margin: 0 13px;
  min-height: 82px;
  padding: 13px 0 13px 13px;
  border-bottom-color: rgb(var(--console-cyan-rgb) / 11%);
}
.settings-console .setting-row:last-child { border-bottom: 0; }
.settings-console .setting-row::before {
  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, rgb(var(--console-cyan-rgb) / 75%), rgb(var(--console-cyan-rgb) / 8%));
  box-shadow: 0 0 7px rgb(var(--console-cyan-rgb) / 20%);
  content: "";
}
.settings-console .setting-copy { padding-right: 6px; }
.settings-console .setting-copy strong { font-size: .82rem; letter-spacing: .015em; }
.settings-console .setting-copy span { color: rgb(183 194 199 / 70%); font-size: .64rem; }
.settings-console .character-name-form input {
  min-height: var(--ga-touch);
  border-radius: var(--ga-radius-choice);
  background: var(--input);
  font-size: max(16px, 1rem);
}
.settings-console .setting-choices {
  border-color: rgb(var(--console-cyan-rgb) / 21%);
  border-radius: 7px;
  background: rgb(3 7 10 / 54%);
  box-shadow: inset 0 1px 5px rgb(0 0 0 / 36%);
}
.settings-console .setting-choices button { position: relative; min-height: 40px; border-radius: 4px; font-size: .7rem; }
.settings-console .setting-choices button.selected,
.settings-console .setting-choices button[aria-pressed="true"] {
  border-color: rgb(var(--console-cyan-rgb) / 53%);
  background: linear-gradient(180deg, rgb(var(--console-cyan-rgb) / 30%), rgb(var(--console-cyan-rgb) / 13%));
  color: #edf7f7;
  box-shadow: 0 0 10px rgb(var(--console-cyan-rgb) / 9%), inset 0 1px rgb(255 255 255 / 12%);
}
.settings-console .setting-choices button[aria-pressed="true"]::after {
  position: absolute;
  right: 20%;
  bottom: -1px;
  left: 20%;
  height: 1px;
  background: rgb(var(--console-cyan-rgb) / 92%);
  box-shadow: 0 0 6px rgb(var(--console-cyan-rgb) / 65%);
  content: "";
}
.settings-console .settings-footer { margin: 0; padding: 0 17px 17px; }
.settings-console .settings-footer .text-button { color: rgb(205 188 145 / 82%); }

.help-intro {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-color: rgb(var(--console-cyan-rgb) / 27%);
  background:
    radial-gradient(circle at 88% 7%, rgb(var(--console-violet-rgb) / 12%), transparent 35%),
    linear-gradient(155deg, rgb(27 34 39 / 98%), rgb(16 20 25 / 99%));
}
.help-intro .help-menu-back { margin-bottom: 0; }
.help-command-header { padding-top: 14px; }
.help-archive-readout > strong { color: #e8f7f8; font-family: Georgia, serif; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.help-archive-readout > strong em { color: var(--muted); font-family: inherit; font-size: .48rem; font-style: normal; letter-spacing: .08em; }
.help-archive-readout > span { display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: #83d7bb; font-size: .49rem; letter-spacing: .08em; }
.help-intro > .help-intro-copy { margin: 0; padding: 13px 20px 16px; color: rgb(195 205 210 / 72%); font-size: .68rem; }
.help-group {
  --console-cyan-rgb: 112 200 218;
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(var(--console-cyan-rgb) / 19%);
  border-radius: 10px;
  background: linear-gradient(135deg, rgb(var(--console-cyan-rgb) / 4%), transparent 35%), rgb(12 17 21 / 58%);
}
.help-group:nth-of-type(3) { --console-cyan-rgb: 194 166 105; }
.help-group:nth-of-type(4) { --console-cyan-rgb: 165 128 218; }
.help-group:nth-of-type(5) { --console-cyan-rgb: 207 119 112; }
.help-group-heading > em { color: rgb(var(--console-cyan-rgb) / 58%); font-size: .49rem; font-style: normal; letter-spacing: .1em; }
.help-topic-list { counter-reset: guide-topic; gap: 0; padding: 0 12px 12px; }
.help-screen .help-topic {
  counter-increment: guide-topic;
  position: relative;
  border: 0;
  border-bottom: 1px solid rgb(var(--console-cyan-rgb) / 12%);
  border-radius: 0;
  background: transparent;
}
.help-screen .help-topic:last-child { border-bottom: 0; }
.help-screen .help-topic[open] {
  margin: 5px 0;
  border: 1px solid rgb(var(--console-cyan-rgb) / 34%);
  border-radius: 8px;
  background: linear-gradient(110deg, rgb(var(--console-cyan-rgb) / 8%), rgb(0 0 0 / 12%) 56%);
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
}
.help-screen .help-topic summary { position: relative; min-height: 68px; justify-content: flex-start; padding: 11px 10px; }
.help-screen .help-topic summary::before {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid rgb(var(--console-cyan-rgb) / 25%);
  border-radius: 50%;
  color: rgb(var(--console-cyan-rgb) / 72%);
  font-family: Georgia, serif;
  font-size: .57rem;
  font-variant-numeric: tabular-nums;
  content: counter(guide-topic, decimal-leading-zero);
}
.help-screen .help-topic summary > span { flex: 1 1 auto; }
.help-screen .help-topic summary strong { font-size: .82rem; letter-spacing: .02em; }
.help-screen .help-topic summary small { color: rgb(181 194 199 / 67%); }
.help-screen .help-topic summary > i {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border: 1px solid rgb(var(--console-cyan-rgb) / 22%);
  border-radius: 50%;
  color: rgb(var(--console-cyan-rgb) / 82%);
}
.help-screen .help-topic[open] summary > i { border-color: rgb(var(--console-cyan-rgb) / 48%); background: rgb(var(--console-cyan-rgb) / 10%); }
.help-screen .help-topic-content { margin: 0 10px; padding: 0 8px 15px 35px; border-top-color: rgb(var(--console-cyan-rgb) / 14%); }
.help-screen .help-topic-content li { color: rgb(224 230 232 / 88%); font-size: .72rem; }
.help-screen .help-topic-content li::marker { color: rgb(var(--console-cyan-rgb) / 80%); }

@media (max-width: 700px) {
  .settings-console,
  .help-screen { width: 100%; }
  .settings-menu-back,
  .help-menu-back { margin: 10px 12px 0; }
  .settings-command-header,
  .help-command-header { gap: 8px; padding: 12px 13px 14px; }
  .settings-command-title,
  .help-command-title { grid-template-columns: 44px minmax(0, 1fr); gap: 9px; }
  .settings-command-title > .abyss-mechanism-mark,
  .help-command-title > .abyss-mechanism-mark { width: 43px; height: 43px; flex-basis: 43px; }
  .settings-command-title .abyss-mechanism-gear,
  .help-command-title .abyss-mechanism-gear { width: 36px; height: 36px; }
  .settings-command-title .abyss-mechanism-crystal,
  .help-command-title .abyss-mechanism-crystal { width: 15px; height: 15px; }
  .settings-command-title h1,
  .help-command-title h1 { font-size: 1.25rem; }
  .settings-command-title small,
  .help-command-title small { font-size: .56rem; }
  .settings-save-readout,
  .help-archive-readout { min-width: 91px; padding-left: 8px; }
  .settings-save-readout > span { font-size: .47rem; }
  .settings-console > .settings-intro,
  .help-intro > .help-intro-copy { padding-right: 13px; padding-left: 13px; }
  .settings-deck { gap: 10px; padding: 11px; }
  .settings-section-heading,
  .help-group-heading { grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 52px; padding: 8px 10px; }
  .settings-section-heading > span,
  .help-group-heading > span { font-size: 1rem; }
  .settings-console .setting-row { grid-template-columns: 1fr; gap: 9px; margin: 0 10px; min-height: 0; padding: 12px 0 14px 10px; }
  .settings-console .setting-choices { width: 100%; }
  .settings-console .setting-choices button { min-width: 0; min-height: 43px; padding-right: 6px; padding-left: 6px; }
  .settings-console .theme-setting-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .settings-console .settings-footer { padding: 2px 12px 14px; }
  .help-screen { gap: 11px; }
  .help-topic-list { padding-right: 8px; padding-left: 8px; }
  .help-screen .help-topic summary { min-height: 65px; padding-right: 7px; padding-left: 7px; }
  .help-screen .help-topic-content { margin-right: 7px; margin-left: 7px; padding-left: 29px; }
}

@media (max-width: 390px) {
  .settings-command-title .eyebrow,
  .help-command-title .eyebrow { font-size: .47rem; letter-spacing: .1em; }
  .settings-command-title small,
  .help-command-title small { display: none; }
  .settings-save-readout > small,
  .help-archive-readout > small { font-size: .43rem; }
  .settings-save-readout > strong { font-size: .61rem; }
  .help-archive-readout > strong { font-size: 1.05rem; }
  .settings-section-heading small,
  .help-group-heading small { font-size: .43rem; letter-spacing: .1em; }
  .settings-section-heading h3,
  .help-group-heading h2 { font-size: .84rem; }
  .help-group-heading > em { display: none; }
  .settings-console .setting-copy span { font-size: .61rem; }
  .settings-console .theme-choice { grid-template-columns: 13px auto; gap: 3px; }
  .settings-console .theme-choice-swatch { width: 13px; height: 13px; }
  .help-screen .help-topic summary::before { width: 25px; height: 25px; flex-basis: 25px; }
  .help-screen .help-topic summary strong { font-size: .77rem; }
  .help-screen .help-topic summary small { font-size: .61rem; }
}

/* First Descent tutorial */
.tutorial-guide {
  --tutorial-gold: 204 169 92;
  --tutorial-crystal: 76 206 220;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 16px 17px;
  overflow: hidden;
  border: 1px solid rgb(var(--tutorial-gold) / 47%);
  border-radius: 11px;
  background:
    linear-gradient(115deg, rgb(var(--tutorial-crystal) / 10%), transparent 34%),
    radial-gradient(circle at 94% 15%, rgb(112 69 160 / 18%), transparent 34%),
    linear-gradient(135deg, rgb(18 26 31 / 98%), rgb(10 14 20 / 98%));
  box-shadow: 0 12px 28px rgb(0 0 0 / 27%), inset 0 1px rgb(255 255 255 / 7%), inset 0 0 28px rgb(var(--tutorial-crystal) / 3%);
}
.tutorial-guide::before,
.tutorial-guide::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.tutorial-guide::before { inset: 5px; border: 1px solid rgb(var(--tutorial-crystal) / 10%); border-radius: 7px; }
.tutorial-guide::after { top: -44px; right: -28px; width: 150px; height: 150px; border: 1px solid rgb(var(--tutorial-gold) / 9%); border-radius: 50%; box-shadow: 0 0 0 16px rgb(var(--tutorial-gold) / 3%), 0 0 0 34px rgb(var(--tutorial-crystal) / 2%); }
.tutorial-guide-ornament { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; }
.tutorial-guide-ornament > .abyss-mechanism-mark { width: 50px; height: 50px; flex-basis: 50px; }
.tutorial-guide-ornament .abyss-mechanism-gear { width: 43px; height: 43px; filter: sepia(.15) saturate(.9) drop-shadow(0 0 8px rgb(var(--tutorial-gold) / 17%)); }
.tutorial-guide-ornament .abyss-mechanism-crystal { width: 18px; height: 18px; filter: drop-shadow(0 0 8px rgb(var(--tutorial-crystal) / 50%)); }
.tutorial-guide-ornament > span { display: grid; gap: 3px; }
.tutorial-guide-ornament small { color: rgb(var(--tutorial-crystal) / 73%); font-family: Georgia, "Times New Roman", serif; font-size: .49rem; letter-spacing: .09em; line-height: 1.3; }
.tutorial-guide-ornament strong { color: #ddc986; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-weight: 500; letter-spacing: .08em; }
.tutorial-guide-copy { min-width: 0; }
.tutorial-guide-copy .eyebrow { margin: 0 0 3px; color: rgb(var(--tutorial-crystal) / 68%); font-size: .5rem; letter-spacing: .17em; }
.tutorial-guide-copy h2 { margin: 0; color: #f1eddf; font-family: "Yu Mincho", serif; font-size: 1.03rem; font-weight: 600; letter-spacing: .06em; }
.tutorial-guide-copy > p:last-of-type { margin: 4px 0 0; color: rgb(213 222 224 / 78%); font-size: .68rem; line-height: 1.65; }
.tutorial-guide-actions { display: grid; min-width: 128px; gap: 5px; justify-items: stretch; }
.tutorial-guide-actions .primary-button { min-height: 40px; padding: 8px 12px; border-color: rgb(var(--tutorial-gold) / 64%); background: linear-gradient(180deg, rgb(121 87 35 / 96%), rgb(75 51 20 / 98%)); box-shadow: inset 0 1px rgb(255 245 194 / 17%), 0 5px 14px rgb(0 0 0 / 24%); font-size: .69rem; }
.tutorial-guide-actions .primary-button span { margin-left: 8px; color: #efd886; }
.tutorial-guide-actions .text-button { min-height: 26px; color: rgb(179 190 193 / 62%); font-size: .58rem; }
.tutorial-progress-track { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: rgb(255 255 255 / 5%); }
.tutorial-progress-track progress { display: block; width: 100%; height: 3px; overflow: hidden; border: 0; border-radius: 0; appearance: none; background: transparent; }
.tutorial-progress-track progress::-webkit-progress-bar { background: transparent; }
.tutorial-progress-track progress::-webkit-progress-value { background: linear-gradient(90deg, rgb(var(--tutorial-crystal) / 78%), rgb(var(--tutorial-gold) / 92%)); box-shadow: 0 0 9px rgb(var(--tutorial-crystal) / 34%); transition: width 260ms ease; }
.tutorial-progress-track progress::-moz-progress-bar { background: linear-gradient(90deg, rgb(var(--tutorial-crystal) / 78%), rgb(var(--tutorial-gold) / 92%)); box-shadow: 0 0 9px rgb(var(--tutorial-crystal) / 34%); }
.tutorial-rule-list { display: flex; flex-wrap: wrap; gap: 5px 11px; margin: 7px 0 0; padding: 0; list-style: none; }
.tutorial-rule-list li { display: flex; align-items: center; gap: 5px; color: rgb(229 215 174 / 81%); font-size: .59rem; }
.tutorial-rule-list i { width: 5px; height: 5px; flex: 0 0 5px; border: 1px solid rgb(var(--tutorial-gold) / 78%); transform: rotate(45deg); box-shadow: 0 0 6px rgb(var(--tutorial-gold) / 22%); }
.tutorial-menu-card > .abyss-mechanism-mark { width: 36px; height: 36px; flex: 0 0 36px; }
.tutorial-menu-card .abyss-mechanism-gear { width: 31px; height: 31px; }
.tutorial-menu-card .abyss-mechanism-crystal { width: 13px; height: 13px; }
.tutorial-menu-card { border-color: rgb(204 169 92 / 30%); background: linear-gradient(110deg, rgb(204 169 92 / 8%), rgb(76 206 220 / 4%) 48%, rgb(0 0 0 / 11%)); }

.tutorial-tap-target {
  position: relative !important;
  z-index: 7;
  overflow: visible !important;
  outline: 2px solid rgb(244 203 102 / 94%);
  outline-offset: 3px;
  box-shadow:
    0 0 0 1px rgb(76 206 220 / 42%),
    0 0 14px rgb(244 203 102 / 62%),
    0 0 28px rgb(76 206 220 / 28%),
    inset 0 0 18px rgb(244 203 102 / 12%) !important;
  animation: tutorial-target-pulse 1.45s ease-in-out infinite;
}
.tutorial-tap-hint {
  position: absolute;
  z-index: 12;
  right: -4px;
  bottom: calc(100% + 9px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: 150px;
  padding: 5px 8px;
  border: 1px solid rgb(244 203 102 / 78%);
  border-radius: 999px;
  color: #fff4c7;
  background: linear-gradient(135deg, rgb(87 57 17 / 98%), rgb(31 48 53 / 98%));
  box-shadow: 0 5px 15px rgb(0 0 0 / 42%), 0 0 11px rgb(244 203 102 / 24%);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
.tutorial-tap-hint::after {
  position: absolute;
  top: 100%;
  right: 17px;
  width: 7px;
  height: 7px;
  border-right: 1px solid rgb(244 203 102 / 78%);
  border-bottom: 1px solid rgb(244 203 102 / 78%);
  background: rgb(31 48 53 / 98%);
  content: "";
  transform: translateY(-3px) rotate(45deg);
}
.battle-header .tutorial-tap-hint { top: calc(100% + 18px); bottom: auto; right: 0; }
.battle-header .tutorial-tap-hint::after { top: auto; bottom: 100%; border: 0; border-top: 1px solid rgb(244 203 102 / 78%); border-left: 1px solid rgb(244 203 102 / 78%); transform: translateY(3px) rotate(45deg); }
.tutorial-tap-hint i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 1px solid #ffdf78;
  background: rgb(76 206 220 / 52%);
  box-shadow: 0 0 7px rgb(76 206 220 / 72%);
  transform: rotate(45deg);
}
@keyframes tutorial-target-pulse {
  0%, 100% { outline-color: rgb(244 203 102 / 72%); filter: brightness(1); }
  50% { outline-color: rgb(111 231 238 / 100%); filter: brightness(1.12); }
}

.tutorial-guide-battle {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  border-radius: 7px;
  box-shadow: inset 0 1px rgb(255 255 255 / 7%);
}
.tutorial-guide-battle summary { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 7px 10px; cursor: pointer; list-style: none; }
.tutorial-guide-battle summary::-webkit-details-marker { display: none; }
.tutorial-guide-battle summary:focus-visible { outline: 2px solid #ddc986; outline-offset: -3px; }
.tutorial-battle-progress { flex: 0 0 auto; color: #ddc986; font-size: .65rem; }
.tutorial-guide-battle summary > strong { min-width: 0; color: #f1eddf; font-size: .72rem; font-weight: 600; overflow-wrap: anywhere; }
.tutorial-battle-disclosure { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; margin-left: auto; color: #b9d3df; font-size: .62rem; }
.tutorial-battle-disclosure i { font-style: normal; }
.tutorial-guide-battle details[open] .tutorial-battle-disclosure i { transform: rotate(180deg); }
.tutorial-battle-body { max-height: min(104px, 22dvh); padding: 0 10px 9px; overflow-y: auto; overscroll-behavior: contain; }
.tutorial-battle-body > p { margin: 0; color: #d5dee0; font-size: .68rem; line-height: 1.6; }
.battle-result-dock:has(.tutorial-guide-battle) { flex-direction: column; align-items: stretch; }
.command-dock .tutorial-tap-hint { display: none; }

@media (min-width: 701px) and (max-height: 600px) {
  .command-dock:has(.tutorial-guide-battle) { position: relative; left: auto; bottom: auto; width: 100%; transform: none; }
}

@media (max-width: 700px) {
  .tutorial-guide { grid-template-columns: 86px minmax(0, 1fr); gap: 10px; margin-bottom: 10px; padding: 12px 12px 15px; border-radius: 8px; }
  .tutorial-guide-ornament { grid-template-columns: 38px minmax(0, 1fr); gap: 6px; }
  .tutorial-guide-ornament > .abyss-mechanism-mark { width: 37px; height: 37px; flex-basis: 37px; }
  .tutorial-guide-ornament .abyss-mechanism-gear { width: 32px; height: 32px; }
  .tutorial-guide-ornament .abyss-mechanism-crystal { width: 13px; height: 13px; }
  .tutorial-guide-ornament small { font-size: .41rem; }
  .tutorial-guide-ornament strong { font-size: .77rem; }
  .tutorial-guide-copy h2 { font-size: .87rem; }
  .tutorial-guide-copy > p:last-of-type { font-size: .62rem; line-height: 1.55; }
  .tutorial-guide-actions { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; }
  .tutorial-guide-actions .primary-button { min-height: 38px; }
  .tutorial-guide-actions .text-button { padding: 4px 8px; }
  .tutorial-rule-list { display: grid; gap: 3px; }
  .tutorial-guide-battle { margin: 0 0 6px; padding: 0; }
  .tutorial-guide-battle .tutorial-guide-actions { display: none; }
}

@media (max-width: 390px) {
  .tutorial-guide:not(.tutorial-guide-battle) { grid-template-columns: 75px minmax(0, 1fr); gap: 8px; padding-right: 10px; padding-left: 10px; }
  .tutorial-guide-copy h2 { font-size: .81rem; }
  .tutorial-guide-copy > p:last-of-type { font-size: .58rem; }
  .tutorial-guide-actions .primary-button { font-size: .64rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-tap-target { animation: none; }
}

/* Keep the non-battle guide in one row; its explanation does not move the page. */
.tutorial-guide.tutorial-guide-compact { z-index: 10; display: flex; gap: 4px; margin: 0 0 6px; padding: 0; overflow: visible; border-radius: 7px; }
.tutorial-guide-compact::after { display: none; }
.tutorial-guide-compact > details { flex: 1 1 auto; min-width: 0; }
.tutorial-guide-compact summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 8px; cursor: pointer; list-style: none; }
.tutorial-guide-compact summary::-webkit-details-marker { display: none; }
.tutorial-guide-compact summary:focus-visible { outline: 2px solid #ddc986; outline-offset: -3px; }
.tutorial-guide-compact summary > strong { min-width: 0; overflow: hidden; color: #f1eddf; font-size: .72rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tutorial-guide-compact details[open] .tutorial-battle-disclosure i { transform: rotate(180deg); }
.tutorial-compact-body { position: absolute; top: calc(100% + 4px); right: 0; left: 0; max-height: min(260px, 45dvh); padding: 10px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgb(var(--tutorial-gold) / 47%); border-radius: 7px; background: #101820; box-shadow: 0 8px 22px rgb(0 0 0 / 40%); }
.tutorial-compact-body > p { margin: 0; color: #d5dee0; font-size: .68rem; line-height: 1.6; }
.tutorial-guide-compact .tutorial-guide-actions { margin-top: 6px; }
.tutorial-guide-compact .tutorial-guide-actions .text-button { justify-self: end; min-height: 44px; padding: 6px 10px; font-size: .65rem; }
.tutorial-guide-compact > .tutorial-quick-action { flex: 0 0 auto; min-height: 44px; margin: 0; padding: 6px 8px; border: 0; border-left: 1px solid rgb(var(--tutorial-gold) / 35%); border-radius: 0 6px 6px 0; font-size: .65rem; white-space: nowrap; }

.facility-floor-locked:disabled { filter: grayscale(1); opacity: 1; cursor: not-allowed; }
.facility-floor-locked .facility-unlock-label { display: block; color: #c1c6cd; font-size: .65rem; line-height: 1.4; }
.home-town-facility.facility-floor-locked { opacity: 1; border: 1px solid rgb(170 180 194 / 25%); border-radius: 6px; background: rgb(8 12 20 / 65%); }
.home-town-facility.facility-floor-locked .home-town-label { color: #b1b8c2; }

/* Utility decks: ability archive, supply vault, and forge workbench */
.catalog-screen, .items-screen, .forge-screen { display: grid; gap: 12px; }
.catalog-menu-back, .items-menu-back, .forge-home-back { justify-self: start; min-height: 34px; padding-left: 0; }
.catalog-command-header, .items-command-header, .forge-command-header { position: relative; isolation: isolate; display: grid; overflow: hidden; border: 1px solid rgb(91 143 157 / 31%); border-radius: 5px; background: radial-gradient(circle at 3% 0%, rgb(var(--abyss-crystal-rgb) / 15%), transparent 31%), radial-gradient(circle at 98% 100%, rgb(var(--abyss-violet-rgb) / 9%), transparent 31%), linear-gradient(145deg, rgb(16 27 34 / 99%), rgb(8 14 19 / 100%)); box-shadow: 0 17px 40px rgb(0 0 0 / 34%), inset 0 1px rgb(218 244 248 / 5%); }
.catalog-command-header::before, .items-command-header::before, .forge-command-header::before { position: absolute; z-index: -1; top: 0; right: 10%; left: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--abyss-crystal-rgb) / 76%), rgb(var(--abyss-violet-rgb) / 52%), transparent); box-shadow: 0 0 12px rgb(var(--abyss-crystal-rgb) / 22%); content: ""; }
.catalog-command-title, .items-command-title, .forge-command-title { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
.catalog-command-title > .abyss-mechanism-mark, .items-command-title > .abyss-mechanism-mark, .forge-command-title > .abyss-mechanism-mark { width: 50px; height: 50px; flex-basis: 50px; }
.catalog-command-title .abyss-mechanism-gear, .items-command-title .abyss-mechanism-gear, .forge-command-title .abyss-mechanism-gear { width: 43px; height: 43px; }
.catalog-command-title .abyss-mechanism-crystal, .items-command-title .abyss-mechanism-crystal, .forge-command-title .abyss-mechanism-crystal { width: 16px; height: 16px; }
.catalog-command-title .eyebrow, .items-command-title .eyebrow, .forge-command-title .eyebrow { color: #6aa8b7; font-size: .5rem; letter-spacing: .16em; }
.catalog-command-title h1, .items-command-title h1, .forge-command-title h1 { margin: 2px 0 0; font-family: "Yu Mincho", serif; font-size: 1.18rem; letter-spacing: .06em; }
.catalog-command-title small, .items-command-title small, .forge-command-title small { display: block; margin-top: 2px; color: var(--muted); font-size: .59rem; }

.catalog-command-header { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; padding: 14px 14px 0; }
.catalog-discovery-readout, .items-command-readout, .forge-wallet { display: grid; min-width: 86px; align-content: center; justify-items: end; gap: 2px; padding-left: 14px; border-left: 1px solid rgb(var(--abyss-crystal-rgb) / 18%); }
.catalog-discovery-readout small, .items-command-readout small, .forge-wallet small { color: #6f8e96; font-size: .45rem; letter-spacing: .14em; }
.catalog-discovery-readout strong, .items-command-readout strong, .forge-wallet strong { color: #e8eef0; font-family: Georgia, serif; font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.catalog-discovery-readout em, .items-command-readout em, .forge-wallet em { margin-left: 4px; color: #8ba0a5; font-size: .6rem; font-style: normal; }
.catalog-progress { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.catalog-progress progress { width: 100%; height: 5px; overflow: hidden; border: 0; border-radius: 99px; background: #202d33; appearance: none; }
.catalog-progress progress::-webkit-progress-bar { border-radius: 99px; background: #202d33; }
.catalog-progress progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, #5db1c1, #9275cf 70%, #d8b760); box-shadow: 0 0 8px rgb(var(--abyss-crystal-rgb) / 38%); }
.catalog-progress progress::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, #5db1c1, #9275cf 70%, #d8b760); }
.catalog-progress small { color: #78939a; font-size: .48rem; letter-spacing: .1em; white-space: nowrap; }
.catalog-type-nav { grid-column: 1 / -1; display: grid; grid-auto-columns: minmax(94px, 1fr); grid-auto-flow: column; margin: 0 -14px; overflow-x: auto; border-top: 1px solid rgb(var(--abyss-crystal-rgb) / 15%); scrollbar-width: none; }
.catalog-type-nav::-webkit-scrollbar { display: none; }
.catalog-type-nav a { display: grid; min-height: 45px; place-content: center; gap: 2px; padding: 6px 10px; border-right: 1px solid rgb(var(--abyss-crystal-rgb) / 12%); color: #b8c5c8; text-align: center; text-decoration: none; white-space: nowrap; }
.catalog-type-nav a:hover, .catalog-type-nav a:focus-visible { background: rgb(var(--abyss-crystal-rgb) / 8%); color: white; }
.catalog-type-nav a:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: -3px; }
.catalog-type-nav span { font-size: .62rem; font-weight: 700; }
.catalog-type-nav small { color: #66828a; font-size: .48rem; }
.catalog-sections { display: grid; gap: 12px; }
.catalog-type-section { scroll-margin-top: calc(var(--app-header-height) + 10px); padding: 13px; border: 1px solid rgb(97 128 137 / 22%); border-radius: 5px; background: linear-gradient(150deg, rgb(20 28 35 / 97%), rgb(10 15 21 / 99%)); box-shadow: inset 0 1px rgb(255 255 255 / 4%); }
.catalog-type-section[data-type="ACTIVE"] { --catalog-accent: 212 99 94; }
.catalog-type-section[data-type="PASSIVE"], .catalog-type-section[data-type="TRIGGER"] { --catalog-accent: 104 172 137; }
.catalog-type-section[data-type="CONVERSION"] { --catalog-accent: 85 159 195; }
.catalog-type-section[data-type="CURSE"] { --catalog-accent: 161 104 194; }
.catalog-type-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid rgb(var(--catalog-accent, 115 153 162) / 24%); }
.catalog-type-heading > span { display: grid; gap: 1px; }
.catalog-type-heading small { color: rgb(var(--catalog-accent, 115 153 162)); font-size: .47rem; letter-spacing: .15em; }
.catalog-type-heading strong { font-family: "Yu Mincho", serif; font-size: 1rem; letter-spacing: .04em; }
.catalog-type-heading em { color: #71838a; font-size: .49rem; font-style: normal; letter-spacing: .07em; white-space: nowrap; }
.catalog-type-section .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }
.catalog-type-section .skill-card { position: relative; overflow: hidden; padding: 11px 12px; border: 1px solid rgb(var(--catalog-accent, 115 153 162) / 20%); border-left: 3px solid rgb(var(--catalog-accent, 115 153 162) / 72%); border-radius: 4px; background: linear-gradient(115deg, rgb(var(--catalog-accent, 115 153 162) / 8%), transparent 42%), rgb(7 12 17 / 70%); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.catalog-type-section .skill-card.unknown { border-left-color: #45535a; filter: saturate(.45); }
.catalog-skill-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.catalog-skill-head > span { display: grid; min-width: 0; gap: 1px; }
.catalog-skill-head small { color: rgb(var(--catalog-accent, 115 153 162)); font-size: .44rem; letter-spacing: .13em; }
.catalog-skill-head strong { overflow: hidden; color: #ecf0f1; font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.catalog-skill-head > b { flex: 0 0 auto; padding: 3px 7px; border: 1px solid rgb(var(--catalog-accent, 115 153 162) / 20%); border-radius: 99px; color: #73858c; font-family: Georgia, serif; font-size: .49rem; font-weight: 400; }
.catalog-skill-description { min-height: 2.8em; margin: 9px 0; color: #c5cdd0; font-size: .66rem; line-height: 1.55; }
.catalog-skill-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.catalog-skill-meta span { padding: 3px 6px; border: 1px solid rgb(105 128 135 / 17%); border-radius: 3px; background: rgb(0 0 0 / 15%); color: #889aa0; font-size: .51rem; }
.catalog-skill-status { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: #758188; font-size: .55rem; }
.catalog-skill-status i { width: 5px; height: 5px; border-radius: 50%; background: currentcolor; }
.catalog-skill-status.discovered { color: #73b7c5; }
.catalog-type-section .catalog-levels { margin-top: 8px; border-color: rgb(var(--catalog-accent, 115 153 162) / 16%); }

.items-command-header { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
.items-command-guide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid rgb(var(--abyss-crystal-rgb) / 16%); background: rgb(0 0 0 / 13%); }
.items-command-guide > span { display: flex; align-items: baseline; gap: 6px; color: #a9b8bb; font-size: .61rem; }
.items-command-guide b { color: #dce9eb; font-size: .66rem; }
.items-command-guide i { color: var(--abyss-crystal); font-style: normal; }
.items-command-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.items-command-actions > span { color: #7f9499; font-size: .6rem; }
.items-command-actions b { color: #b9d5da; font-variant-numeric: tabular-nums; }
.items-command-actions button { min-height: 40px; }
.items-category-list { display: grid; gap: 12px; }
.items-category-panel { padding: 13px; border: 1px solid rgb(93 133 142 / 23%); border-radius: 5px; background: linear-gradient(150deg, rgb(18 27 32 / 98%), rgb(9 14 18 / 99%)); box-shadow: inset 0 1px rgb(255 255 255 / 4%); }
.items-category-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.items-category-heading > span { display: grid; gap: 1px; }
.items-category-heading small { color: #64a5b3; font-size: .47rem; letter-spacing: .15em; }
.items-category-heading strong { font-family: "Yu Mincho", serif; font-size: .95rem; }
.items-category-heading em { color: #70858a; font-size: .48rem; font-style: normal; letter-spacing: .1em; }
.items-category-panel > p { margin: 5px 0 10px; color: var(--muted); font-size: .59rem; }
.items-category-panel .inventory-item-card { position: relative; overflow: hidden; border: 1px solid rgb(93 143 145 / 23%); border-left: 3px solid #558e91; border-radius: 4px; background: radial-gradient(circle at 0% 50%, rgb(76 156 155 / 10%), transparent 24%), rgb(6 12 15 / 67%); box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.items-category-panel .inventory-item-card.stamina-item { border-left-color: #c9973f; background: radial-gradient(circle at 0% 50%, rgb(196 139 49 / 11%), transparent 24%), rgb(8 12 14 / 70%); }
.items-category-panel .inventory-item-visual { border-radius: 50%; }
.items-category-panel .inventory-item-copy .tag { border-color: rgb(88 145 155 / 26%); background: rgb(42 103 113 / 13%); color: #78aebb; font-size: .47rem; letter-spacing: .08em; }
.items-category-panel .stamina-item .inventory-item-copy .tag { border-color: rgb(199 151 63 / 30%); background: rgb(127 87 22 / 13%); color: #d0ad6c; }
.items-category-panel .inventory-item-use { min-height: 44px; border-radius: 4px; }
.items-empty-state { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 8px; border: 1px dashed rgb(var(--abyss-crystal-rgb) / 24%); color: var(--muted); text-align: center; }
.items-empty-state > .abyss-mechanism-mark { margin-bottom: 4px; }
.items-empty-state strong { color: var(--text); }
.items-empty-state small { font-size: .62rem; }

.forge-screen { overflow: visible; }
.forge-command-header { grid-template-columns: minmax(0, 1fr) auto; gap: 13px; padding: 14px; }
.forge-wallet strong { display: flex; align-items: center; gap: 5px; color: #e8cf8b; }
.forge-wallet img { width: 20px; height: 20px; object-fit: contain; }
.forge-facility-state { grid-column: 1 / -1; display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding-top: 9px; border-top: 1px solid rgb(var(--abyss-crystal-rgb) / 14%); }
.forge-facility-state > i { width: 6px; height: 6px; border-radius: 50%; background: #68cb9e; box-shadow: 0 0 8px #68cb9e; }
.forge-facility-state > span { color: #8dc8b0; font-size: .5rem; letter-spacing: .12em; }
.forge-facility-state > small { color: #73878c; font-size: .55rem; }
.forge-facility-state.locked > i { background: #bf765e; box-shadow: 0 0 8px #bf765e; }
.forge-facility-state.locked > span { color: #d59582; }
.forge-workbench { padding: 13px; border: 1px solid rgb(114 94 58 / 34%); border-radius: 5px; background: radial-gradient(circle at 100% 0%, rgb(183 123 39 / 10%), transparent 27%), linear-gradient(150deg, rgb(24 25 24 / 98%), rgb(11 14 16 / 99%)); box-shadow: 0 16px 38px rgb(0 0 0 / 32%), inset 0 1px rgb(255 235 190 / 5%); }
.forge-workbench-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.forge-workbench-heading > span { display: grid; gap: 1px; }
.forge-workbench-heading small { color: #bc914f; font-size: .47rem; letter-spacing: .15em; }
.forge-workbench-heading strong { font-family: "Yu Mincho", serif; font-size: .95rem; }
.forge-workbench-heading em { color: #827866; font-size: .52rem; font-style: normal; }
.forge-workbench .forge-operation-tabs { gap: 6px; margin-top: 10px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.forge-workbench .forge-operation-tabs button { position: relative; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; min-height: 70px; padding: 9px 10px; overflow: hidden; border: 1px solid #3c4547; border-radius: 4px; background: linear-gradient(145deg, rgb(30 36 38 / 96%), rgb(14 18 20 / 98%)); }
.forge-workbench .forge-operation-tabs button::after { position: absolute; right: -20px; bottom: -35px; width: 76px; height: 76px; border: 1px solid rgb(204 161 79 / 5%); border-radius: 50%; content: ""; }
.forge-operation-number { grid-row: 1 / 4; align-self: start; color: #77684d; font-family: Georgia, serif; font-size: .57rem; }
.forge-workbench .forge-operation-tabs button strong, .forge-workbench .forge-operation-tabs button small, .forge-workbench .forge-operation-tabs button .forge-operation-count { grid-column: 2; }
.forge-workbench .forge-operation-tabs button.selected { border-color: #a57c39; background: radial-gradient(circle at 90% 0%, rgb(205 154 63 / 14%), transparent 40%), linear-gradient(145deg, rgb(49 43 31 / 98%), rgb(20 21 20 / 99%)); box-shadow: inset 3px 0 #d4ad5e, 0 0 14px rgb(180 128 38 / 8%); }
.forge-workbench .forge-operation-tabs button.selected .forge-operation-number { color: #ddb96c; }
.forge-process-stage { margin-top: 12px; padding-top: 1px; border-top: 1px solid rgb(196 151 70 / 17%); }
.forge-process-stage .forge-operation-panel { margin-top: 0; padding-top: 12px; border-top: 0; }
.forge-process-stage .forge-step-title b { border-color: #5b513e; }
.forge-process-stage .forge-step.current .forge-step-title b { border-color: #c49545; background: rgb(154 101 24 / 22%); box-shadow: 0 0 9px rgb(197 145 56 / 15%); }
.forge-process-stage .forge-select-trigger { min-height: 68px; border-color: #536770; border-radius: 4px; background: linear-gradient(145deg, #131b20, #090e12); }
.forge-core-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 10px 12px; border: 1px solid rgb(var(--abyss-violet-rgb) / 28%); border-radius: 5px; background: radial-gradient(circle at 0% 50%, rgb(var(--abyss-violet-rgb) / 12%), transparent 30%), linear-gradient(140deg, rgb(24 21 35 / 97%), rgb(11 14 20 / 99%)); }
.forge-core-link > span { display: flex; min-width: 0; align-items: center; gap: 9px; }
.forge-core-link > span > img { width: 35px; height: 35px; flex: 0 0 35px; object-fit: contain; }
.forge-core-link > span > span { display: grid; min-width: 0; gap: 1px; }
.forge-core-link small { color: #8d75b0; font-size: .45rem; letter-spacing: .13em; }
.forge-core-link b { overflow: hidden; color: #d9d3e2; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.forge-core-link button { flex: 0 0 auto; min-height: 40px; }

@media (max-width: 700px) {
  .catalog-screen, .items-screen, .forge-screen { gap: 9px; }
  .catalog-menu-back, .items-menu-back, .forge-home-back { min-height: 32px; }
  .catalog-command-header, .items-command-header, .forge-command-header { padding: 10px; }
  .catalog-command-title, .items-command-title, .forge-command-title { grid-template-columns: 43px minmax(0, 1fr); gap: 8px; }
  .catalog-command-title > .abyss-mechanism-mark, .items-command-title > .abyss-mechanism-mark, .forge-command-title > .abyss-mechanism-mark { width: 41px; height: 41px; flex-basis: 41px; }
  .catalog-command-title .abyss-mechanism-gear, .items-command-title .abyss-mechanism-gear, .forge-command-title .abyss-mechanism-gear { width: 35px; height: 35px; }
  .catalog-command-title .abyss-mechanism-crystal, .items-command-title .abyss-mechanism-crystal, .forge-command-title .abyss-mechanism-crystal { width: 13px; height: 13px; }
  .catalog-command-title h1, .items-command-title h1, .forge-command-title h1 { font-size: 1.02rem; }
  .catalog-command-title small, .items-command-title small, .forge-command-title small { font-size: .52rem; }
  .catalog-discovery-readout, .items-command-readout, .forge-wallet { min-width: 70px; padding-left: 8px; }
  .catalog-discovery-readout strong, .items-command-readout strong, .forge-wallet strong { font-size: .88rem; }
  .catalog-type-nav { margin-right: -10px; margin-left: -10px; }
  .catalog-type-section, .items-category-panel, .forge-workbench { padding: 9px; }
  .catalog-type-section .catalog-grid { grid-template-columns: 1fr; gap: 6px; }
  .catalog-skill-description { min-height: 0; }
  .items-command-guide { gap: 5px; padding: 7px 8px; }
  .items-command-guide > span { display: grid; gap: 1px; font-size: .54rem; }
  .items-command-guide b { font-size: .59rem; }
  .items-command-actions button { min-height: 38px; padding-right: 10px; padding-left: 10px; font-size: .62rem; }
  .items-category-panel .inventory-item-card { grid-template-columns: 58px minmax(0, 1fr); }
  .items-category-panel .inventory-item-action { grid-column: 1 / -1; }
  .forge-command-header { gap: 9px; }
  .forge-facility-state { grid-template-columns: 6px minmax(0, 1fr); }
  .forge-facility-state > small { grid-column: 2; }
  .forge-workbench-heading em { max-width: 140px; text-align: right; }
  .forge-workbench .forge-operation-tabs button { min-height: 76px; padding: 8px; }
  .forge-workbench .forge-operation-tabs button strong { font-size: .73rem; }
  .forge-workbench .forge-operation-tabs button small { font-size: .52rem; }
  .forge-core-link { padding: 9px; }
  .forge-core-link b { max-width: 160px; }
}

@media (max-width: 390px) {
  .catalog-command-title .eyebrow, .items-command-title .eyebrow, .forge-command-title .eyebrow { font-size: .43rem; }
  .catalog-type-nav { grid-auto-columns: minmax(86px, 1fr); }
  .catalog-type-heading em { font-size: .44rem; }
  .items-command-actions { align-items: stretch; flex-direction: column; gap: 6px; }
  .items-command-actions button { width: 100%; }
  .forge-workbench .forge-operation-tabs { grid-template-columns: 1fr; }
  .forge-workbench .forge-operation-tabs button { min-height: 61px; }
  .forge-core-link { align-items: stretch; flex-direction: column; }
  .forge-core-link button { width: 100%; }
}

/* Shared abyss modal console: unify the remaining legacy confirmation and picker surfaces. */
:is(
  .chat-safety-backdrop,
  .inventory-filter-backdrop,
  .profile-background-backdrop,
  .command-picker-backdrop,
  .build-preset-apply-backdrop,
  .build-preset-delete-backdrop,
  .build-preset-icon-backdrop,
  .equip-confirm-backdrop,
  .equipment-extraction-backdrop,
  .forge-confirm-backdrop,
  .retreat-confirm-backdrop,
  .settings-reset-backdrop,
  .crystal-confirm-backdrop,
  .battle-log-backdrop,
  .battle-item-backdrop,
  .character-shop-confirm-backdrop,
  .sale-backdrop,
  .combat-role-warning-backdrop
) {
  --abyss-modal-accent-rgb: 119 199 222;
  background: radial-gradient(circle at 50% 34%, rgb(var(--abyss-modal-accent-rgb) / 11%), transparent 34%), rgb(2 6 8 / 89%);
  backdrop-filter: blur(6px) saturate(.82);
}

:is(.build-preset-delete-backdrop, .retreat-confirm-backdrop, .settings-reset-backdrop, .combat-role-warning-backdrop) { --abyss-modal-accent-rgb: 211 116 96; }
:is(.equip-confirm-backdrop, .forge-confirm-backdrop, .sale-backdrop) { --abyss-modal-accent-rgb: 210 173 81; }
:is(.equipment-extraction-backdrop, .crystal-confirm-backdrop, .character-shop-confirm-backdrop, .profile-background-backdrop) { --abyss-modal-accent-rgb: 159 126 217; }
:is(.battle-item-backdrop) { --abyss-modal-accent-rgb: 106 202 158; }

:is(
  .chat-safety-dialog,
  .inventory-filter-dialog,
  .profile-background-dialog,
  .command-picker-dialog,
  .build-preset-apply-dialog,
  .build-preset-delete-dialog,
  .build-preset-icon-dialog,
  .equip-confirm-dialog,
  .equipment-extraction-dialog,
  .forge-confirm-dialog,
  .retreat-confirm-dialog,
  .settings-reset-dialog,
  .crystal-confirm-dialog,
  .battle-log-dialog,
  .battle-item-dialog,
  .character-shop-confirm-dialog,
  .sale-dialog,
  .combat-role-warning-dialog
) {
  position: relative;
  isolation: isolate;
  border-color: rgb(var(--abyss-modal-accent-rgb) / 43%);
  border-radius: 13px;
  background: radial-gradient(circle at 92% 0, rgb(var(--abyss-modal-accent-rgb) / 12%), transparent 31%), repeating-linear-gradient(120deg, transparent 0 54px, rgb(var(--abyss-modal-accent-rgb) / 1.5%) 55px, transparent 56px 108px), linear-gradient(155deg, rgb(25 34 38 / 99%), rgb(13 18 21 / 99%) 68%);
  box-shadow: 0 28px 82px rgb(0 0 0 / 72%), 0 0 26px rgb(var(--abyss-modal-accent-rgb) / 7%), inset 0 1px rgb(255 255 255 / 6%);
  outline: 1px solid rgb(218 235 238 / 5%);
  outline-offset: -6px;
}

:is(
  .chat-safety-dialog,
  .inventory-filter-dialog,
  .profile-background-dialog,
  .command-picker-dialog,
  .build-preset-apply-dialog,
  .build-preset-delete-dialog,
  .build-preset-icon-dialog,
  .equip-confirm-dialog,
  .equipment-extraction-dialog,
  .forge-confirm-dialog,
  .retreat-confirm-dialog,
  .settings-reset-dialog,
  .crystal-confirm-dialog,
  .battle-log-dialog,
  .battle-item-dialog,
  .character-shop-confirm-dialog,
  .sale-dialog,
  .combat-role-warning-dialog
)::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--abyss-modal-accent-rgb) / 82%), transparent);
  box-shadow: 0 0 11px rgb(var(--abyss-modal-accent-rgb) / 27%);
  content: "";
  pointer-events: none;
}

:is(
  .inventory-filter-heading,
  .profile-background-dialog-heading,
  .command-picker-heading,
  .build-preset-icon-heading,
  .battle-log-dialog-heading,
  .battle-item-heading
) {
  padding-bottom: 11px;
  border-bottom: 1px solid rgb(var(--abyss-modal-accent-rgb) / 14%);
}

:is(
  .chat-safety-dialog,
  .inventory-filter-dialog,
  .profile-background-dialog,
  .command-picker-dialog,
  .build-preset-apply-dialog,
  .build-preset-delete-dialog,
  .build-preset-icon-dialog,
  .equip-confirm-dialog,
  .equipment-extraction-dialog,
  .forge-confirm-dialog,
  .retreat-confirm-dialog,
  .settings-reset-dialog,
  .crystal-confirm-dialog,
  .battle-log-dialog,
  .battle-item-dialog,
  .character-shop-confirm-dialog,
  .sale-dialog,
  .combat-role-warning-dialog
) .eyebrow { color: rgb(var(--abyss-modal-accent-rgb) / 78%); }

:is(.inventory-filter-close, .command-picker-close, .dialog-close-button) {
  border: 1px solid rgb(var(--abyss-modal-accent-rgb, 119 199 222) / 20%);
  background: rgb(3 10 13 / 44%);
  color: #9eb0b4;
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}

:is(.inventory-filter-close, .command-picker-close, .dialog-close-button):hover {
  border-color: rgb(var(--abyss-modal-accent-rgb, 119 199 222) / 48%);
  color: #eef9fb;
}

:is(.inventory-filter-option, .command-picker-option, .build-preset-icon-option) {
  border-color: rgb(var(--abyss-modal-accent-rgb, 119 199 222) / 15%);
  background: linear-gradient(145deg, rgb(25 34 37 / 95%), rgb(8 13 15 / 97%));
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
}

:is(.inventory-filter-option, .command-picker-option, .build-preset-icon-option).selected {
  border-color: rgb(var(--abyss-modal-accent-rgb, 119 199 222) / 58%);
  background: radial-gradient(circle at 0 50%, rgb(var(--abyss-modal-accent-rgb, 119 199 222) / 14%), transparent 46%), linear-gradient(145deg, rgb(29 39 42 / 98%), rgb(10 16 18 / 99%));
  box-shadow: inset 3px 0 rgb(var(--abyss-modal-accent-rgb, 119 199 222) / 82%), 0 0 14px rgb(var(--abyss-modal-accent-rgb, 119 199 222) / 7%);
}

@media (max-width: 700px) {
  :is(
    .chat-safety-backdrop,
    .inventory-filter-backdrop,
    .profile-background-backdrop,
    .command-picker-backdrop,
    .build-preset-apply-backdrop,
    .build-preset-delete-backdrop,
    .build-preset-icon-backdrop,
    .equip-confirm-backdrop,
    .equipment-extraction-backdrop,
    .forge-confirm-backdrop,
    .retreat-confirm-backdrop,
    .settings-reset-backdrop,
    .crystal-confirm-backdrop,
    .battle-log-backdrop,
    .battle-item-backdrop,
    .character-shop-confirm-backdrop,
    .sale-backdrop,
    .combat-role-warning-backdrop
  ) {
    place-items: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  :is(
    .chat-safety-dialog,
    .inventory-filter-dialog,
    .profile-background-dialog,
    .command-picker-dialog,
    .build-preset-apply-dialog,
    .build-preset-delete-dialog,
    .build-preset-icon-dialog,
    .equip-confirm-dialog,
    .equipment-extraction-dialog,
    .forge-confirm-dialog,
    .retreat-confirm-dialog,
    .settings-reset-dialog,
    .crystal-confirm-dialog,
    .battle-log-dialog,
    .battle-item-dialog,
    .character-shop-confirm-dialog,
    .sale-dialog,
    .combat-role-warning-dialog
  ) {
    width: min(100%, var(--abyss-modal-width, 560px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border: 1px solid rgb(var(--abyss-modal-accent-rgb) / 43%);
    border-radius: 13px;
  }

  :is(.chat-safety-dialog, .build-preset-delete-dialog, .retreat-confirm-dialog, .settings-reset-dialog, .crystal-confirm-dialog, .character-shop-confirm-dialog, .combat-role-warning-dialog) { --abyss-modal-width: 430px; }
  .inventory-filter-dialog { --abyss-modal-width: 460px; }
  .build-preset-icon-dialog { --abyss-modal-width: 470px; }
  .build-preset-apply-dialog { --abyss-modal-width: 500px; }
  .battle-item-dialog { --abyss-modal-width: 520px; }
  .equip-confirm-dialog { --abyss-modal-width: 560px; }
  .command-picker-dialog { --abyss-modal-width: 570px; }
  :is(.profile-background-dialog, .sale-dialog) { --abyss-modal-width: 620px; }
  .battle-log-dialog { --abyss-modal-width: 720px; }
}

/* Limited Abyss command console and seven-gear arsenal. */
.limited-abyss-screen {
  --law-red: 166 72 93;
  --law-violet: 125 92 184;
  --law-gold: 210 162 92;
  position: relative;
  gap: 12px;
  padding-bottom: 18px;
}

.limited-abyss-screen::before {
  position: fixed;
  z-index: -1;
  inset: var(--app-header-height, 0) 0 var(--bottom-nav-height, 0);
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 12%, rgb(var(--law-red) / 9%), transparent 29%),
    radial-gradient(circle at 8% 72%, rgb(var(--law-violet) / 8%), transparent 32%),
    linear-gradient(115deg, transparent 0 47%, rgb(255 255 255 / 1.5%) 47.2% 47.5%, transparent 47.7%);
  content: "";
}

.limited-abyss-loading-screen { min-height: min(560px, calc(100dvh - var(--app-header-height, 0px) - var(--bottom-nav-height, 0px) - 32px)); }
.limited-abyss-loading { isolation: isolate; min-height: 340px; padding: 15px 20px 34px; background: radial-gradient(circle at 50% 49%, rgb(var(--law-violet) / 13%), transparent 27%), radial-gradient(circle at 50% 44%, rgb(var(--law-red) / 8%), transparent 48%), linear-gradient(155deg, rgb(22 27 35 / 98%), rgb(7 11 16 / 99%)); }
.limited-abyss-loading > .text-button { position: relative; z-index: 2; justify-self: start; }
.limited-abyss-loading-console { display: grid; width: min(430px, 100%); justify-items: center; gap: 7px; margin: 20px auto 0; text-align: center; }
.limited-abyss-loading-mark { position: relative; display: grid; width: 112px; height: 112px; margin-bottom: 8px; place-items: center; }
.limited-abyss-loading-mark::before, .limited-abyss-loading-mark::after { position: absolute; border-radius: 50%; content: ""; }
.limited-abyss-loading-mark::before { inset: 0; border: 1px solid rgb(var(--law-violet) / 14%); border-top-color: rgb(188 157 236 / 90%); border-right-color: rgb(var(--law-red) / 55%); box-shadow: 0 0 16px rgb(var(--law-violet) / 12%), inset 0 0 14px rgb(var(--law-violet) / 6%); animation: limited-abyss-loading-orbit 1.8s linear infinite; }
.limited-abyss-loading-mark::after { inset: 10px; border: 1px dashed rgb(205 177 230 / 34%); border-bottom-color: rgb(228 175 183 / 82%); box-shadow: 0 0 10px rgb(var(--law-red) / 9%); animation: limited-abyss-loading-orbit-reverse 3.1s linear infinite; }
.limited-abyss-loading-mark > .abyss-mechanism-mark { --mechanism-glow: var(--law-violet); z-index: 1; width: 72px; height: 72px; flex-basis: 72px; border-color: rgb(var(--law-violet) / 52%); background: radial-gradient(circle, rgb(var(--law-violet) / 25%), rgb(var(--law-red) / 9%) 55%, transparent 58%); box-shadow: 0 0 0 5px rgb(var(--law-violet) / 5%), 0 0 30px rgb(var(--law-violet) / 15%), inset 0 0 18px rgb(var(--law-violet) / 15%); }
.limited-abyss-loading-mark .abyss-mechanism-gear { width: 60px; height: 60px; opacity: .78; animation: mechanism-gear-turn 6.4s linear infinite; }
.limited-abyss-loading-mark .abyss-mechanism-crystal { width: 23px; height: 23px; animation: mechanism-crystal-pulse 1.45s ease-in-out infinite; }
.limited-abyss-loading-console > .eyebrow { margin: 0; color: rgb(200 155 174); font-size: .52rem; letter-spacing: .22em; }
.limited-abyss-loading-console > h1 { margin: 1px 0 2px; color: #f0e6e8; font-family: "Yu Mincho", serif; font-size: 1.42rem; font-weight: 500; letter-spacing: .09em; text-shadow: 0 0 18px rgb(var(--law-violet) / 14%); }
.limited-abyss-loading-console > p:not(.eyebrow) { margin: 0; color: #a8959c; font-size: .7rem; line-height: 1.7; }
.limited-abyss-loading-track { position: relative; width: min(240px, 76%); height: 2px; margin-top: 10px; overflow: hidden; background: linear-gradient(90deg, transparent, rgb(var(--law-violet) / 24%) 18% 82%, transparent); }
.limited-abyss-loading-track i { position: absolute; inset: 0 auto 0 -42%; width: 42%; background: linear-gradient(90deg, transparent, rgb(211 179 238 / 92%), rgb(219 142 160 / 75%), transparent); box-shadow: 0 0 9px rgb(var(--law-violet) / 42%); animation: limited-abyss-loading-scan 1.75s ease-in-out infinite; }
.limited-abyss-loading-status { display: inline-flex; align-items: center; gap: 7px; color: #b8a7ad; font-size: .65rem; letter-spacing: .03em; }
.limited-abyss-loading-status > i { width: 6px; height: 6px; border-radius: 50%; background: rgb(203 161 230); box-shadow: 0 0 9px rgb(var(--law-violet) / 85%); animation: limited-abyss-loading-signal 1.2s ease-in-out infinite; }
@keyframes limited-abyss-loading-orbit { to { transform: rotate(1turn); } }
@keyframes limited-abyss-loading-orbit-reverse { to { transform: rotate(-1turn); } }
@keyframes limited-abyss-loading-scan { 0% { left: -42%; } 62%, 100% { left: 100%; } }
@keyframes limited-abyss-loading-signal { 50% { opacity: .38; transform: scale(.72); } }
@media (prefers-reduced-motion: reduce) {
  .limited-abyss-loading-mark::before, .limited-abyss-loading-mark::after, .limited-abyss-loading-mark .abyss-mechanism-gear, .limited-abyss-loading-mark .abyss-mechanism-crystal, .limited-abyss-loading-track i, .limited-abyss-loading-status > i { animation: none; }
}

.limited-abyss-screen > .panel {
  position: relative;
  overflow: hidden;
  border-color: rgb(156 119 141 / 25%);
  border-radius: 11px;
  background:
    linear-gradient(90deg, rgb(var(--law-red) / 4%), transparent 22%),
    linear-gradient(145deg, rgb(24 31 37 / 97%), rgb(10 14 19 / 99%));
  box-shadow: inset 0 1px rgb(255 255 255 / 3%), 0 14px 28px rgb(0 0 0 / 12%);
}

.limited-abyss-screen > .panel::after {
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--law-red) / 42%), rgb(var(--law-violet) / 30%), transparent);
  content: "";
}

.limited-abyss-hero {
  background:
    radial-gradient(circle at 88% 4%, rgb(var(--law-red) / 20%), transparent 35%),
    radial-gradient(circle at 18% 86%, rgb(var(--law-violet) / 13%), transparent 34%),
    linear-gradient(145deg, rgb(36 21 29 / 98%), rgb(10 14 19 / 99%));
}

.limited-abyss-title > span {
  position: relative;
  border-color: rgb(var(--law-red) / 42%);
  background: radial-gradient(circle, rgb(var(--law-violet) / 18%), rgb(7 12 16 / 90%) 70%);
  box-shadow: inset 0 0 16px rgb(var(--law-violet) / 12%), 0 0 20px rgb(var(--law-red) / 8%);
}

.limited-abyss-title > span::after {
  position: absolute;
  inset: -5px;
  border: 1px solid rgb(var(--law-violet) / 18%);
  border-radius: 50%;
  content: "";
}

.limited-abyss-title .eyebrow,
.limited-abyss-screen .section-heading .eyebrow,
.limited-abyss-rule-copy .eyebrow {
  color: rgb(201 145 162);
  letter-spacing: .18em;
}

.limited-abyss-schedule > div {
  position: relative;
  border-color: rgb(255 255 255 / 6%);
  border-radius: 5px;
  background: rgb(3 8 11 / 28%);
}

.limited-abyss-schedule > div::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, rgb(var(--law-red) / 20%), rgb(var(--law-red) / 80%), rgb(var(--law-violet) / 30%));
  content: "";
}

.limited-abyss-rule-copy {
  padding-left: 13px;
  border-left: 2px solid rgb(var(--law-red) / 52%);
}

.limited-abyss-rule-copy h2 {
  color: #f2e5e9;
  font-size: clamp(1.25rem, 4vw, 1.6rem);
}

.limited-abyss-progress {
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid rgb(var(--law-violet) / 16%);
  border-radius: 7px;
  background: linear-gradient(90deg, rgb(var(--law-violet) / 7%), rgb(2 7 10 / 24%));
}

.limited-abyss-progress > span {
  align-items: flex-end;
}

.limited-abyss-progress > span small {
  color: #a68e98;
  font-size: .56rem;
  letter-spacing: .16em;
}

.limited-abyss-progress > span b {
  color: #f2dadd;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: 1.28rem;
  line-height: 1;
}

.limited-abyss-progress > span em {
  color: #947f88;
  font-family: inherit;
  font-size: .68rem;
  font-style: normal;
  font-weight: 500;
}

.limited-abyss-progress progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgb(2 6 9 / 80%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%);
  appearance: none;
}

.limited-abyss-progress progress::-webkit-progress-bar { background: transparent; }
.limited-abyss-progress progress::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, #853f54, #a9586c 48%, #7c5cbb); box-shadow: 0 0 9px rgb(var(--law-red) / 40%); }
.limited-abyss-progress progress::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, #853f54, #a9586c 48%, #7c5cbb); }

.limited-abyss-supply .section-heading > strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #f0d5a4;
  font-family: Georgia, serif;
  font-size: 1.55rem;
  text-shadow: 0 0 14px rgb(var(--law-gold) / 18%);
}

.limited-abyss-supply .section-heading > strong small {
  align-self: center;
  color: #8f8170;
  font-family: inherit;
  font-size: .48rem;
  letter-spacing: .14em;
}

.limited-abyss-supply .section-heading > strong em {
  color: #b99a67;
  font-family: inherit;
  font-size: .62rem;
  font-style: normal;
}

.limited-abyss-supply-actions button {
  min-height: 48px;
  border-color: rgb(var(--law-gold) / 20%);
  background: linear-gradient(145deg, rgb(38 35 30 / 94%), rgb(14 17 19 / 98%));
}

.limited-abyss-companions,
.limited-abyss-commands,
.limited-abyss-equipment {
  padding-top: 20px;
}

.limited-abyss-companions .section-heading,
.limited-abyss-commands .section-heading,
.limited-abyss-equipment .section-heading {
  align-items: end;
  margin-bottom: 0;
}

.limited-abyss-companions .section-heading h2,
.limited-abyss-commands .section-heading h2,
.limited-abyss-equipment .section-heading h2 {
  color: #f0e6eb;
  font-size: 1.42rem;
}

.limited-abyss-companions .section-heading > span,
.limited-abyss-commands .section-heading > span,
.limited-abyss-equipment .section-heading > span {
  color: #8e7e86;
  font-size: .58rem;
  letter-spacing: .08em;
}

.limited-abyss-companions .section-heading > span b,
.limited-abyss-commands .section-heading > span b,
.limited-abyss-equipment .section-heading > span b {
  color: #dbc0c9;
  font-family: Georgia, serif;
  font-size: 1rem;
}

.limited-abyss-section-lead {
  margin: 10px 0 15px;
  color: #9d9197;
  font-size: .68rem;
  line-height: 1.7;
}

.law-party-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.law-party-slot { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; border: 1px solid rgb(var(--law-gold) / 23%); border-radius: 8px; background: linear-gradient(135deg, rgb(var(--law-gold) / 8%), rgb(5 12 17 / 65%)); }
.law-party-slot > span { flex: 0 0 44px; width: 44px; height: 52px; display: grid; place-items: center; color: #887e77; font-size: 1.3rem; }
.law-party-slot .actor-image { width: 100%; height: 100%; object-fit: contain; }
.law-party-slot > div { min-width: 0; display: grid; gap: 4px; }
.law-party-slot strong { color: #e5d9cd; font-size: .76rem; overflow-wrap: anywhere; }
.law-party-slot small { color: #a69b97; font-size: .6rem; line-height: 1.4; }
.law-party-slot.is-empty { border-style: dashed; border-color: rgb(255 255 255 / 12%); background: rgb(0 0 0 / 12%); }
.law-party-slot.is-empty strong { color: #9c9290; }
.law-party-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.law-party-footer p { display: grid; gap: 3px; margin: 0; color: #aaa09a; font-size: .65rem; }
.law-party-footer strong, .law-party-balance strong { color: #e9d29b; font-variant-numeric: tabular-nums; }
.law-party-footer small { font-size: .58rem; }
.law-party-footer button { min-height: 44px; padding: 8px 16px; }
.law-party-balance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; padding: 10px 0; border-block: 1px solid rgb(var(--law-gold) / 15%); font-size: .8rem; }
.law-party-balance span { margin-left: auto; color: #aaa09a; font-size: .62rem; }
.law-party-return { width: 100%; min-height: 44px; margin-top: 16px; }

.law-party-strategy-link { width: 100%; cursor: pointer; text-align: left; font: inherit; }
.law-party-strategy-link:focus-visible { outline: 2px solid rgb(var(--law-gold)); outline-offset: 2px; }
.law-party-strategy-link .law-party-control { color: #e9d29b; }
.law-companion-strategy { grid-column: 1 / -1; min-width: 0; --party-color: rgb(var(--law-gold)); --party-color-rgb: var(--law-gold); }
.law-companion-strategy > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px; border: 1px solid rgb(var(--law-gold) / 25%); border-radius: 6px; background: rgb(var(--law-gold) / 5%); color: #e5d9cd; cursor: pointer; list-style: none; font-size: .75rem; }
.law-companion-strategy > summary::-webkit-details-marker { display: none; }
.law-companion-strategy > summary span { margin-left: auto; color: #e9d29b; font-size: .65rem; }
.law-companion-strategy > summary i { font-style: normal; }
.law-companion-strategy[open] > summary i { transform: rotate(180deg); }
.law-companion-strategy > p { margin: 8px 0; color: #aaa09a; font-size: .65rem; line-height: 1.5; }
.law-companion-strategy .character-combat-option { align-items: start; gap: 4px; }

.law-support-countdown { display: grid; gap: 7px; margin: 12px 0; padding: 12px; border: 1px solid rgb(var(--law-gold) / 22%); border-radius: 7px; background: linear-gradient(115deg, rgb(var(--law-gold) / 7%), rgb(0 0 0 / 15%)); }
.law-support-countdown > span { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 5px 12px; color: #bca99e; font-size: .68rem; }
.law-support-countdown small { color: #998e8a; font-size: .62rem; }
.law-support-countdown strong { color: #eed5ae; font-size: .91rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .035em; line-height: 1.5; overflow-wrap: anywhere; }

/* Limited Abyss six-card requisition */
.law-requisition-panel { overflow: hidden; border-color: rgb(var(--law-gold) / 24%); background: radial-gradient(circle at 50% 15%, rgb(var(--law-violet) / 12%), transparent 42%), linear-gradient(155deg, rgb(22 24 31 / 97%), rgb(12 14 20 / 98%)); }
.law-requisition-heading { margin: 16px 0 18px; text-align: center; }
.law-requisition-heading h1 { margin: 5px 0 7px; font-family: "Yu Mincho", serif; color: #f2e7dd; font-size: clamp(1.35rem, 6vw, 1.85rem); font-weight: 500; }
.law-requisition-heading > p:last-child { margin: 0 auto; max-width: 520px; color: #a99da0; font-size: .72rem; line-height: 1.7; }
.law-requisition-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 620px; margin: 0 auto; perspective: 1000px; }
.law-requisition-card { min-width: 0; min-height: 184px; padding: 0; overflow: hidden; border: 1px solid rgb(var(--law-gold) / 28%); border-radius: 12px; color: inherit; background: linear-gradient(145deg, rgb(30 25 37), rgb(10 16 24)); box-shadow: inset 0 0 0 3px rgb(0 0 0 / 25%), 0 9px 24px rgb(0 0 0 / 24%); cursor: pointer; transform-style: preserve-3d; transition: transform .22s ease, border-color .22s ease, opacity .22s ease; }
button.law-requisition-card:not(:disabled):hover, button.law-requisition-card:not(:disabled):focus-visible { border-color: rgb(var(--law-gold) / 66%); outline: 2px solid rgb(var(--law-gold) / 25%); outline-offset: 2px; transform: translateY(-3px); }
.law-requisition-card-back { display: grid; min-height: 184px; place-items: center; align-content: center; gap: 8px; background: radial-gradient(circle, rgb(var(--law-violet) / 16%), transparent 48%), repeating-linear-gradient(135deg, transparent 0 12px, rgb(255 255 255 / 1.8%) 12px 13px); }
.law-requisition-card-back .abyss-mechanism-mark { width: 58px; height: 58px; filter: drop-shadow(0 0 10px rgb(var(--law-cyan) / 18%)); }
.law-requisition-card-back small { color: #8b7d86; font-size: .55rem; letter-spacing: .18em; }
.law-requisition-card-back strong { color: #d9c7cb; font-family: "Yu Mincho", serif; font-size: .84rem; font-weight: 500; letter-spacing: .12em; }
.law-requisition-cards.has-result .law-requisition-card.is-unselected { min-height: 82px; opacity: .38; }
.law-requisition-cards.has-result .law-requisition-card.is-unselected .law-requisition-card-back { min-height: 82px; }
.law-requisition-cards.has-result .law-requisition-card.is-unselected .abyss-mechanism-mark { width: 30px; height: 30px; }
.law-requisition-card.is-revealed { grid-column: 1 / -1; min-height: 0; cursor: default; animation: law-card-reveal .55s cubic-bezier(.2,.75,.25,1) both; }
.law-requisition-card-front { padding: 16px; text-align: left; background: linear-gradient(135deg, rgb(var(--law-gold) / 10%), transparent 45%), rgb(18 18 25 / 96%); }
.law-requisition-card-front header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.law-requisition-card-front header > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgb(var(--law-gold) / 24%); border-radius: 9px; background: rgb(0 0 0 / 22%); }
.law-requisition-part-icon { width: 30px; height: 30px; object-fit: contain; }
.law-requisition-card-front header small { display: block; color: #9f8f95; font-size: .54rem; letter-spacing: .11em; }
.law-requisition-card-front h2 { margin: 3px 0 0; color: #f0e5dc; font-family: "Yu Mincho", serif; font-size: 1.15rem; font-weight: 500; }
.law-requisition-card-front header em, .limited-abyss-new-badge, .limited-abyss-part-new { border: 1px solid rgb(var(--law-gold) / 48%); border-radius: 999px; color: #f1cf98; background: rgb(var(--law-gold) / 12%); font-style: normal; font-weight: 700; letter-spacing: .08em; }
.law-requisition-card-front header em { padding: 4px 7px; font-size: .56rem; }
.law-requisition-card-front > p { margin: 13px 0 10px; color: #c2b2b3; font-size: .66rem; line-height: 1.55; }
.law-requisition-card-front ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.law-requisition-card-front li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: 7px; background: rgb(0 0 0 / 22%); }
.law-requisition-card-front li > b { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #f0d5ae; background: rgb(var(--law-violet) / 27%); font-size: .65rem; }
.law-requisition-card-front li span { display: grid; gap: 2px; }
.law-requisition-card-front li strong { color: #ddd1ce; font-size: .69rem; }
.law-requisition-card-front li small { color: #968b90; font-size: .59rem; line-height: 1.45; }
.law-requisition-note, .law-requisition-pending { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 14px 0 0; color: #95898e; font-size: .65rem; text-align: center; }
.law-requisition-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.limited-abyss-item.is-new { border-color: rgb(var(--law-gold) / 38%); box-shadow: inset 3px 0 0 rgb(var(--law-gold) / 45%); }
.limited-abyss-new-badge { display: inline-flex; margin-left: 6px; padding: 2px 5px; font-size: .48rem; vertical-align: middle; }
.limited-abyss-part-new { justify-self: start; margin-top: 3px; padding: 2px 5px; font-size: .47rem; }
@keyframes law-card-reveal { 0% { opacity: 0; transform: rotateY(90deg) scale(.9); } 100% { opacity: 1; transform: rotateY(0) scale(1); } }
@media (min-width: 700px) { .law-requisition-cards:not(.has-result) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 360px) { .law-requisition-cards { gap: 7px; } .law-requisition-card, .law-requisition-card-back { min-height: 158px; } .law-requisition-card-front { padding: 12px; } .law-requisition-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .law-requisition-card, .law-requisition-card.is-revealed { animation: none; transition: none; } }

.limited-abyss-equipment-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 7px;
  margin: 0 0 13px;
}

.limited-abyss-equipment-member {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0 8px;
  min-width: 0;
  min-height: 54px;
  padding: 5px 8px 5px 5px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 7px;
  color: #94888e;
  background: linear-gradient(145deg, rgb(20 21 25 / 92%), rgb(7 11 14 / 96%));
  cursor: pointer;
  text-align: left;
}

.limited-abyss-equipment-member > span { grid-row: 1 / 3; width: 42px; height: 42px; align-self: center; overflow: hidden; border-radius: 5px; background: rgb(var(--law-violet) / 8%); }
.limited-abyss-equipment-member .actor-image { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.limited-abyss-equipment-member strong { align-self: end; overflow: hidden; color: #b8aeb2; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.limited-abyss-equipment-member small { align-self: start; color: #71686c; font-family: Georgia, serif; font-size: .48rem; letter-spacing: .06em; }
.limited-abyss-equipment-member.selected { border-color: rgb(var(--law-gold) / 47%); background: linear-gradient(145deg, rgb(var(--law-gold) / 12%), rgb(var(--law-violet) / 9%), rgb(7 11 14 / 96%)); box-shadow: inset 0 -2px rgb(var(--law-gold) / 68%); }
.limited-abyss-equipment-member.selected strong { color: #f0e2d3; }
.limited-abyss-equipment-member:focus-visible { outline: 2px solid rgb(var(--law-gold) / 70%); outline-offset: 2px; }

.limited-abyss-companion-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.limited-abyss-companion {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgb(159 128 142 / 16%);
  border-radius: 8px;
  background: linear-gradient(135deg, rgb(26 20 27 / 72%), rgb(7 12 16 / 92%));
}

.limited-abyss-companion.hired {
  border-color: rgb(var(--law-gold) / 38%);
  box-shadow: inset 3px 0 rgb(var(--law-gold) / 56%);
}

.limited-abyss-companion-portrait {
  display: grid;
  grid-row: 1 / 3;
  height: 90px;
  overflow: hidden;
  place-items: end center;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 70%, rgb(var(--law-violet) / 18%), rgb(2 7 10 / 78%) 72%);
}

.limited-abyss-companion-portrait .actor-image { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.limited-abyss-companion-copy { min-width: 0; }
.limited-abyss-companion-copy header { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.limited-abyss-companion-copy header > div { display: grid; gap: 1px; }
.limited-abyss-companion-copy header small { color: #8f7981; font-size: .43rem; letter-spacing: .13em; }
.limited-abyss-companion-copy header strong { color: #efe3e7; font-size: .82rem; }
.limited-abyss-companion-copy header > span { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgb(var(--law-violet) / 20%); border-radius: 999px; color: #c7b6c2; font-size: .52rem; }
.limited-abyss-companion-copy > p { margin: 6px 0; color: #978a90; font-size: .61rem; line-height: 1.55; }
.limited-abyss-companion-copy dl { margin: 0; padding: 6px 7px; border-left: 2px solid rgb(var(--law-red) / 38%); background: rgb(0 0 0 / 16%); }
.limited-abyss-companion-copy dt { color: #d1aab5; font-size: .58rem; font-weight: 700; }
.limited-abyss-companion-copy dd { margin: 2px 0 0; color: #84787d; font-size: .54rem; line-height: 1.45; }
.limited-abyss-companion > button { grid-column: 2; min-height: 38px; }

.limited-abyss-companion-confirm-backdrop {
  position: fixed;
  z-index: 245;
  inset: 0;
  display: grid;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  place-items: center;
  background:
    radial-gradient(circle at 50% 18%, rgb(var(--law-gold) / 10%), transparent 32%),
    radial-gradient(circle at 18% 72%, rgb(var(--law-violet) / 10%), transparent 36%),
    rgb(2 4 7 / 90%);
  backdrop-filter: blur(8px) saturate(.78);
  animation: limited-abyss-command-backdrop-in .16s ease-out both;
}

.limited-abyss-companion-confirm-dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgb(var(--law-gold) / 45%);
  border-radius: 13px;
  outline: 0;
  background:
    linear-gradient(rgb(255 255 255 / 1.3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 1.1%) 1px, transparent 1px),
    radial-gradient(circle at 84% 2%, rgb(var(--law-gold) / 12%), transparent 31%),
    radial-gradient(circle at 8% 58%, rgb(var(--law-violet) / 13%), transparent 37%),
    linear-gradient(155deg, rgb(27 22 20 / 99%), rgb(11 13 17 / 99%) 48%, rgb(4 8 12 / 99%));
  background-size: 24px 24px, 24px 24px, auto, auto, auto;
  box-shadow: 0 30px 90px rgb(0 0 0 / 78%), inset 0 1px rgb(255 255 255 / 6%), 0 0 34px rgb(var(--law-gold) / 9%);
  animation: limited-abyss-command-dialog-in .2s cubic-bezier(.2, .82, .2, 1) both;
}

.limited-abyss-companion-confirm-dialog::before {
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--law-red) / 68%), rgb(var(--law-gold) / 94%), transparent);
  box-shadow: 0 0 15px rgb(var(--law-gold) / 38%);
  content: "";
}

.limited-abyss-companion-confirm-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 17px 13px;
  border-bottom: 1px solid rgb(var(--law-gold) / 15%);
  background: linear-gradient(90deg, rgb(var(--law-gold) / 6%), transparent 68%);
}

.limited-abyss-companion-confirm-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.limited-abyss-companion-confirm-title .abyss-mechanism-mark { width: 44px; height: 44px; flex: 0 0 44px; }
.limited-abyss-companion-confirm-title .abyss-mechanism-gear { width: 38px; height: 38px; }
.limited-abyss-companion-confirm-title .abyss-mechanism-crystal { width: 15px; height: 15px; }
.limited-abyss-companion-confirm-title > div { display: grid; min-width: 0; gap: 1px; }
.limited-abyss-companion-confirm-title p { margin: 0; color: #b99a67; font-family: Georgia, serif; font-size: .46rem; letter-spacing: .16em; }
.limited-abyss-companion-confirm-title h2 { margin: 0; color: #f3e9df; font-family: "Yu Mincho", serif; font-size: 1.08rem; font-weight: 600; letter-spacing: .04em; }
.limited-abyss-companion-confirm-title small { color: #766e65; font-size: .44rem; letter-spacing: .09em; }

.limited-abyss-companion-confirm-close {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(var(--law-gold) / 22%);
  border-radius: 50%;
  color: #aa9a88;
  background: rgb(4 8 12 / 56%);
  font-size: 1.15rem;
  cursor: pointer;
}
.limited-abyss-companion-confirm-close:not(:disabled):is(:hover, :focus-visible) { border-color: rgb(var(--law-gold) / 62%); outline: 0; color: #fff1d4; background: rgb(var(--law-gold) / 11%); }
.limited-abyss-companion-confirm-close:disabled { cursor: default; opacity: .38; }

.limited-abyss-companion-confirm-hero {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 14px;
  margin: 13px;
  padding: 11px;
  border: 1px solid rgb(var(--law-violet) / 19%);
  border-radius: 9px;
  background: linear-gradient(135deg, rgb(var(--law-violet) / 9%), rgb(3 8 12 / 62%) 52%);
  box-shadow: inset 3px 0 rgb(var(--law-gold) / 48%);
}

.limited-abyss-companion-confirm-portrait {
  position: relative;
  display: grid;
  min-height: 154px;
  overflow: hidden;
  place-items: end center;
  border: 1px solid rgb(var(--law-gold) / 16%);
  border-radius: 7px;
  background: radial-gradient(circle at 50% 72%, rgb(var(--law-gold) / 13%), rgb(var(--law-violet) / 7%) 42%, rgb(2 7 10 / 84%) 75%);
}
.limited-abyss-companion-confirm-portrait::after { position: absolute; right: 8px; bottom: 7px; left: 8px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--law-gold) / 48%), transparent); content: ""; }
.limited-abyss-companion-confirm-portrait .actor-image { width: 100%; height: 154px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 9px 9px rgb(0 0 0 / 55%)); }

.limited-abyss-companion-confirm-profile { align-content: center; display: grid; min-width: 0; gap: 6px; }
.limited-abyss-companion-confirm-profile > span { justify-self: start; padding: 3px 7px; border: 1px solid rgb(var(--law-violet) / 23%); border-radius: 999px; color: #cbb9c5; font-size: .52rem; background: rgb(var(--law-violet) / 7%); }
.limited-abyss-companion-confirm-profile h3 { margin: 0; color: #f5e9e4; font-family: "Yu Mincho", serif; font-size: 1.32rem; letter-spacing: .08em; }
.limited-abyss-companion-confirm-profile > p { margin: 0; color: #a09398; font-size: .63rem; line-height: 1.65; }
.limited-abyss-companion-confirm-profile dl { margin: 2px 0 0; padding: 8px 9px; border-left: 2px solid rgb(var(--law-red) / 48%); background: rgb(0 0 0 / 19%); }
.limited-abyss-companion-confirm-profile dt { color: #d9b1bc; font-size: .62rem; font-weight: 700; }
.limited-abyss-companion-confirm-profile dd { margin: 3px 0 0; color: #8f8287; font-size: .54rem; line-height: 1.5; }

.limited-abyss-companion-confirm-ledger {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 7px;
  margin: 0 13px 10px;
  padding: 9px;
  border: 1px solid rgb(var(--law-gold) / 17%);
  border-radius: 8px;
  background: rgb(3 7 10 / 54%);
}
.limited-abyss-companion-confirm-ledger > span { display: grid; gap: 1px; min-width: 0; text-align: center; }
.limited-abyss-companion-confirm-ledger small { color: #80776d; font-size: .48rem; letter-spacing: .08em; }
.limited-abyss-companion-confirm-ledger strong { color: #d6c5ac; font-family: Georgia, serif; font-size: 1rem; }
.limited-abyss-companion-confirm-ledger strong i { margin-left: 2px; color: #97856d; font-size: .52rem; font-style: normal; }
.limited-abyss-companion-confirm-ledger > b { color: #76695b; font-family: Georgia, serif; font-size: .72rem; }
.limited-abyss-companion-confirm-ledger .remaining strong { color: #f0d5a4; text-shadow: 0 0 12px rgb(var(--law-gold) / 22%); }

.limited-abyss-companion-confirm-terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 13px 10px; }
.limited-abyss-companion-confirm-terms > span { display: grid; min-width: 0; gap: 3px; padding: 8px 7px; border: 1px solid rgb(151 127 137 / 13%); border-radius: 6px; background: rgb(8 12 16 / 58%); }
.limited-abyss-companion-confirm-terms i { color: #927d65; font-family: Georgia, serif; font-size: .5rem; font-style: normal; }
.limited-abyss-companion-confirm-terms b { color: #a99b9f; font-size: .53rem; font-weight: 600; line-height: 1.4; }

.limited-abyss-companion-confirm-warning { display: flex; align-items: flex-start; gap: 8px; margin: 0 13px 12px; padding: 8px 10px; border: 1px solid rgb(var(--law-red) / 19%); border-radius: 6px; color: #a88f97; background: rgb(var(--law-red) / 6%); font-size: .56rem; line-height: 1.55; }
.limited-abyss-companion-confirm-warning > i { display: grid; width: 17px; height: 17px; flex: 0 0 17px; place-items: center; border: 1px solid rgb(var(--law-red) / 43%); border-radius: 50%; color: #d7a3b1; font-family: Georgia, serif; font-size: .6rem; font-style: normal; }

.limited-abyss-companion-confirm-actions { display: grid; grid-template-columns: .72fr 1.28fr; gap: 8px; padding: 12px 13px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(var(--law-gold) / 13%); background: rgb(2 6 10 / 68%); }
.limited-abyss-companion-confirm-actions button { min-height: 46px; }
.limited-abyss-companion-confirm-actions .primary-button { border-color: rgb(var(--law-gold) / 42%); color: #fff0d3; background: linear-gradient(135deg, #6c4b2a, #633440 56%, #3d2a42); box-shadow: inset 0 1px rgb(255 255 255 / 9%), 0 8px 20px rgb(var(--law-gold) / 9%); }
body.limited-abyss-companion-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .limited-abyss-companion-confirm-backdrop,
  .limited-abyss-companion-confirm-dialog { animation: none; }
}

.limited-abyss-command-grid {
  gap: 9px;
  margin-bottom: 12px;
}

.limited-abyss-command-slot {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 7px 9px;
  width: 100%;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgb(159 128 142 / 16%);
  border-radius: 8px;
  color: #b8a9b0;
  background:
    linear-gradient(110deg, rgb(var(--law-red) / 4%), transparent 42%),
    rgb(7 11 15 / 55%);
  box-shadow: inset 0 1px rgb(255 255 255 / 2%);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .1s ease;
}

.limited-abyss-command-slot:not(:disabled):is(:hover, :focus-visible),
.limited-abyss-command-slot[aria-expanded="true"] {
  border-color: rgb(var(--law-red) / 58%);
  outline: 0;
  background:
    radial-gradient(circle at 0 50%, rgb(var(--law-red) / 16%), transparent 48%),
    linear-gradient(135deg, rgb(31 21 29 / 97%), rgb(7 12 16 / 99%));
  box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 0 0 2px rgb(var(--law-red) / 10%);
}

.limited-abyss-command-slot:not(:disabled):active { transform: scale(.992); }
.limited-abyss-command-slot:disabled { cursor: default; opacity: .58; }

.limited-abyss-command-slot.is-filled {
  border-color: rgb(var(--law-red) / 32%);
  background:
    radial-gradient(circle at 0 50%, rgb(var(--law-red) / 11%), transparent 45%),
    linear-gradient(135deg, rgb(26 20 27 / 94%), rgb(7 12 16 / 98%));
}

.limited-abyss-command-slot::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 2px;
  background: rgb(121 103 112 / 22%);
  content: "";
}

.limited-abyss-command-slot.is-filled::before {
  background: linear-gradient(180deg, rgb(var(--law-red) / 24%), rgb(var(--law-red) / 90%), rgb(var(--law-violet) / 45%));
  box-shadow: 0 0 8px rgb(var(--law-red) / 28%);
}

.limited-abyss-command-index {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  color: rgb(167 128 142);
  font-family: Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.limited-abyss-command-copy {
  display: grid;
  gap: 1px;
}

.limited-abyss-command-copy small {
  color: #756b70;
  font-size: .46rem;
  letter-spacing: .14em;
}

.limited-abyss-command-copy strong {
  color: #ded2d7;
  font-size: .7rem;
}

.limited-abyss-command-cost {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 4px;
  color: #776e73;
  font-size: .53rem;
}

.limited-abyss-command-cost b {
  padding: 2px 5px;
  border: 1px solid rgb(var(--law-violet) / 18%);
  border-radius: 3px;
  color: #bcb0ca;
  background: rgb(var(--law-violet) / 7%);
  font-size: .5rem;
  font-weight: 600;
}

.limited-abyss-command-selection {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 14px;
  grid-column: 2 / -1;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding: 6px 8px;
  border: 1px solid rgb(var(--law-red) / 18%);
  border-radius: 5px;
  background: linear-gradient(145deg, rgb(22 19 24 / 98%), rgb(8 11 15 / 99%));
}

.limited-abyss-command-selection-icon {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(var(--law-violet) / 22%);
  border-radius: 6px;
  color: #a98896;
  background: rgb(var(--law-violet) / 7%);
}

.limited-abyss-command-selection-icon .command-icon { width: 27px; height: 27px; }
.limited-abyss-command-selection-icon > i { font-size: 1.12rem; font-style: normal; }
.limited-abyss-command-selection > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.limited-abyss-command-selection strong,
.limited-abyss-command-selection small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.limited-abyss-command-selection strong { color: #ebe2e6; font-size: .72rem; }
.limited-abyss-command-selection small { color: #756b70; font-size: .5rem; letter-spacing: .04em; }
.limited-abyss-command-selection > i { color: #a98e98; font-size: 1.1rem; font-style: normal; }

.limited-abyss-command-picker-backdrop {
  position: fixed;
  z-index: 240;
  inset: 0;
  display: grid;
  padding: 14px;
  place-items: center;
  background: radial-gradient(circle at 50% 18%, rgb(var(--law-red) / 12%), transparent 36%), rgb(2 4 7 / 88%);
  backdrop-filter: blur(7px) saturate(.8);
  animation: limited-abyss-command-backdrop-in .16s ease-out both;
}

.limited-abyss-command-picker-dialog {
  position: relative;
  display: flex;
  width: min(610px, 100%);
  max-height: calc(100dvh - 28px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(var(--law-red) / 48%);
  border-radius: 12px;
  outline: 0;
  background:
    linear-gradient(rgb(255 255 255 / 1.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 1.2%) 1px, transparent 1px),
    radial-gradient(circle at 84% 5%, rgb(var(--law-violet) / 17%), transparent 32%),
    linear-gradient(155deg, rgb(25 17 25 / 99%), rgb(7 11 16 / 99%) 60%, rgb(3 8 12 / 99%));
  background-size: 22px 22px, 22px 22px, auto, auto;
  box-shadow: 0 28px 80px rgb(0 0 0 / 74%), inset 0 1px rgb(255 255 255 / 6%), 0 0 34px rgb(var(--law-red) / 10%);
  animation: limited-abyss-command-dialog-in .2s cubic-bezier(.2, .82, .2, 1) both;
}

.limited-abyss-command-picker-dialog::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--law-red) / 92%), rgb(var(--law-gold) / 68%), transparent);
  box-shadow: 0 0 14px rgb(var(--law-red) / 42%);
  content: "";
}

.limited-abyss-command-picker-heading {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 17px 13px;
  border-bottom: 1px solid rgb(var(--law-red) / 17%);
  background: linear-gradient(90deg, rgb(var(--law-red) / 8%), transparent 68%);
}

.limited-abyss-command-picker-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.limited-abyss-command-picker-title .abyss-mechanism-mark { width: 44px; height: 44px; flex: 0 0 44px; }
.limited-abyss-command-picker-title .abyss-mechanism-gear { width: 38px; height: 38px; }
.limited-abyss-command-picker-title .abyss-mechanism-crystal { width: 15px; height: 15px; }
.limited-abyss-command-picker-title > div { display: grid; min-width: 0; gap: 1px; }
.limited-abyss-command-picker-title p { margin: 0; color: #a87382; font-family: Georgia, serif; font-size: .48rem; letter-spacing: .16em; }
.limited-abyss-command-picker-title h2 { margin: 0; color: #f3e7eb; font-family: "Yu Mincho", serif; font-size: 1.08rem; font-weight: 600; letter-spacing: .04em; }
.limited-abyss-command-picker-title small { color: #786d73; font-size: .46rem; letter-spacing: .1em; }
.limited-abyss-command-picker-close { display: grid; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; place-items: center; border: 1px solid rgb(var(--law-red) / 22%); border-radius: 50%; color: #ad939c; background: rgb(4 8 12 / 54%); font-size: 1.15rem; cursor: pointer; }
.limited-abyss-command-picker-close:is(:hover, :focus-visible) { border-color: rgb(var(--law-red) / 62%); outline: 0; color: #ffe8ef; background: rgb(var(--law-red) / 13%); }
.limited-abyss-command-picker-dialog > p { flex: 0 0 auto; margin: 0; padding: 11px 17px; color: #93868c; font-size: .64rem; line-height: 1.65; }

.limited-abyss-command-options {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  padding: 0 13px 13px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.limited-abyss-command-option {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 29px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 76px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid rgb(146 121 132 / 16%);
  border-radius: 8px;
  color: #d8cbd0;
  background: linear-gradient(135deg, rgb(24 19 25 / 92%), rgb(7 12 16 / 94%));
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .1s ease;
}

.limited-abyss-command-option::before { position: absolute; top: 9px; bottom: 9px; left: 0; width: 2px; background: rgb(var(--law-red) / 17%); content: ""; }
.limited-abyss-command-option:not(:disabled):is(:hover, :focus-visible) { border-color: rgb(var(--law-red) / 54%); outline: 0; background: linear-gradient(135deg, rgb(var(--law-red) / 13%), rgb(8 13 17 / 98%) 58%); }
.limited-abyss-command-option:not(:disabled):active { transform: scale(.994); }
.limited-abyss-command-option.selected { border-color: rgb(var(--law-gold) / 56%); background: radial-gradient(circle at 0 50%, rgb(var(--law-gold) / 11%), transparent 45%), linear-gradient(135deg, rgb(42 25 31 / 98%), rgb(9 13 17 / 98%)); box-shadow: inset 3px 0 rgb(var(--law-gold) / 72%), 0 0 18px rgb(var(--law-red) / 8%); }
.limited-abyss-command-option.selected::before { background: rgb(var(--law-gold) / 82%); box-shadow: 0 0 9px rgb(var(--law-gold) / 38%); }
.limited-abyss-command-option:disabled { cursor: default; opacity: .42; }
.limited-abyss-command-option-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgb(var(--law-violet) / 24%); border-radius: 9px; background: radial-gradient(circle, rgb(var(--law-violet) / 14%), rgb(3 8 12 / 76%)); }
.limited-abyss-command-option-icon .command-icon { width: 40px; height: 40px; }
.limited-abyss-command-option-icon > i { color: #8e7d84; font-size: 1.5rem; font-style: normal; }
.limited-abyss-command-option-copy { display: grid; min-width: 0; gap: 4px; }
.limited-abyss-command-option-copy > span:first-child { display: flex; align-items: center; gap: 7px; min-width: 0; }
.limited-abyss-command-option-copy strong { overflow: hidden; color: #eee2e6; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.limited-abyss-command-option-copy em { flex: 0 0 auto; padding: 2px 5px; border: 1px solid rgb(var(--law-red) / 22%); border-radius: 3px; color: #b58d99; font-size: .45rem; font-style: normal; letter-spacing: .07em; }
.limited-abyss-command-option-copy > small { display: -webkit-box; overflow: hidden; color: #81757b; font-size: .58rem; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.limited-abyss-command-option-meta { display: flex; align-items: center; gap: 4px; }
.limited-abyss-command-option-meta b,
.limited-abyss-command-option-meta i { padding: 2px 5px; border-radius: 3px; font-size: .47rem; font-style: normal; font-weight: 600; }
.limited-abyss-command-option-meta b { border: 1px solid rgb(var(--law-violet) / 19%); color: #c2b2ce; background: rgb(var(--law-violet) / 7%); }
.limited-abyss-command-option-meta i { color: #9e858d; background: rgb(var(--law-red) / 6%); }
.limited-abyss-command-option-state { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgb(144 119 130 / 26%); border-radius: 50%; color: #866f78; font-family: Georgia, serif; font-size: .62rem; }
.limited-abyss-command-option.selected .limited-abyss-command-option-state { border-color: rgb(var(--law-gold) / 62%); color: #ffe7ac; background: rgb(var(--law-gold) / 12%); box-shadow: 0 0 9px rgb(var(--law-gold) / 20%); }
.limited-abyss-command-option-empty { min-height: 66px; }

.limited-abyss-command-picker-dialog > footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(var(--law-red) / 15%);
  color: #88777e;
  background: rgb(2 6 10 / 72%);
}
.limited-abyss-command-picker-dialog > footer span { display: flex; align-items: center; gap: 6px; color: #ba909c; font-size: .57rem; }
.limited-abyss-command-picker-dialog > footer span i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--law-red) / 78%); box-shadow: 0 0 7px rgb(var(--law-red) / 52%); }
.limited-abyss-command-picker-dialog > footer small { font-size: .52rem; text-align: right; }
body.limited-abyss-command-modal-open { overflow: hidden; }

@keyframes limited-abyss-command-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes limited-abyss-command-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .limited-abyss-command-picker-backdrop,
  .limited-abyss-command-picker-dialog { animation: none; }
}

/* Battle-only command rescue keeps the shared modal console with a one-time gold signal. */
.battle-command-rescue-backdrop,
.battle-command-rescue-dialog { --abyss-modal-accent-rgb: 214 174 72; }

.limited-abyss-parts {
  gap: 7px;
  margin-top: 0;
}

.limited-abyss-part {
  border-color: rgb(150 126 137 / 14%);
  border-radius: 7px;
  background: rgb(3 8 12 / 38%);
  transition: border-color .18s ease, background .18s ease;
}

.limited-abyss-part[open] {
  overflow: visible;
  border-color: rgb(var(--law-red) / 34%);
  background: linear-gradient(135deg, rgb(var(--law-red) / 7%), rgb(3 8 12 / 58%) 48%);
  box-shadow: inset 3px 0 rgb(var(--law-red) / 54%);
}

.limited-abyss-part > summary {
  grid-template-columns: 34px 30px minmax(64px, .42fr) minmax(0, 1fr) 18px;
  min-height: 62px;
  padding: 9px 11px;
}

.limited-abyss-part > summary:focus-visible {
  outline: 2px solid rgb(var(--law-red) / 45%);
  outline-offset: -2px;
}

.limited-abyss-part-number {
  display: grid;
  place-items: center;
  align-self: stretch;
  border-right: 1px solid rgb(255 255 255 / 5%);
}

.limited-abyss-part-number small {
  color: #625b5e;
  font-size: .4rem;
  letter-spacing: .08em;
}

.limited-abyss-part-number b {
  color: #a57c8b;
  font-family: Georgia, serif;
  font-size: .8rem;
}

.limited-abyss-part-icon {
  width: 27px;
  height: 27px;
  filter: drop-shadow(0 3px 5px rgb(0 0 0 / 38%));
}

.limited-abyss-part-copy {
  gap: 2px;
}

.limited-abyss-part-copy strong {
  color: #e1d7dc;
  font-size: .74rem;
}

.limited-abyss-part-copy small,
.limited-abyss-part-current small {
  color: #70666b;
  font-size: .43rem;
  letter-spacing: .1em;
}

.limited-abyss-part-current {
  display: grid;
  min-width: 0;
  justify-items: end;
  gap: 3px;
}

.limited-abyss-part > summary .limited-abyss-part-current b {
  width: 100%;
  overflow: hidden;
  color: #d2bcc4;
  font-size: .67rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.limited-abyss-part > summary > i {
  width: 8px;
  height: 8px;
  border-right: 1px solid #87767e;
  border-bottom: 1px solid #87767e;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}

.limited-abyss-part[open] > summary > i { transform: translateY(2px) rotate(225deg); }

.limited-abyss-item-list {
  gap: 7px;
  padding: 2px 9px 9px 63px;
}

.limited-abyss-current-pin {
  position: sticky;
  z-index: 6;
  top: calc(var(--app-header-height) + 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 9px;
  padding: 8px 9px;
  border: 1px solid rgb(var(--law-gold) / 45%);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgb(var(--law-gold) / 10%), transparent 54%),
    rgb(11 15 19 / 97%);
  box-shadow: 0 8px 18px rgb(0 0 0 / 48%), inset 2px 0 rgb(var(--law-gold) / 72%);
  backdrop-filter: blur(10px) saturate(1.08);
}

.limited-abyss-current-pin.is-empty {
  border-color: rgb(255 255 255 / 10%);
  box-shadow: 0 7px 16px rgb(0 0 0 / 36%), inset 2px 0 rgb(255 255 255 / 12%);
}

.limited-abyss-current-pin-main {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.limited-abyss-current-pin-icon { width: 27px; height: 27px; object-fit: contain; }
.limited-abyss-current-pin-main > span { display: grid; min-width: 0; gap: 1px; }
.limited-abyss-current-pin-main small { color: #a98d68; font-size: .4rem; letter-spacing: .1em; }
.limited-abyss-current-pin-main strong { overflow: hidden; color: #eee2d6; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.limited-abyss-current-pin-main em { overflow: hidden; color: #93878b; font-size: .52rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.limited-abyss-current-pin > b { align-self: start; padding: 2px 5px; border-radius: 4px; color: #e4c299; background: rgb(var(--law-gold) / 10%); font-size: .54rem; }

.limited-abyss-current-pin-skills {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.limited-abyss-current-pin-skills > span {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid rgb(255 255 255 / 5%);
  border-radius: 4px;
  color: #71696d;
  background: rgb(0 0 0 / 20%);
}

.limited-abyss-current-pin-skills > span.is-filled {
  border-color: rgb(var(--law-violet) / 18%);
  color: #d0c0c8;
  background: rgb(var(--law-violet) / 7%);
}

.limited-abyss-current-pin-slot { width: 17px; height: 17px; object-fit: contain; }
.limited-abyss-current-pin-skills strong { overflow: hidden; font-size: .55rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.limited-abyss-item {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  padding: 11px;
  border-color: rgb(255 255 255 / 6%);
  border-radius: 6px;
  background: linear-gradient(145deg, rgb(24 23 27 / 90%), rgb(8 12 15 / 94%));
}

.limited-abyss-item.equipped {
  border-color: rgb(var(--law-gold) / 38%);
  background:
    radial-gradient(circle at 100% 0, rgb(var(--law-gold) / 10%), transparent 38%),
    linear-gradient(130deg, rgb(40 31 28 / 86%), rgb(10 13 16 / 96%));
  box-shadow: inset 2px 0 rgb(var(--law-gold) / 65%);
}

.limited-abyss-item.assigned-elsewhere { border-color: rgb(var(--law-violet) / 22%); }
.limited-abyss-item .limited-abyss-item-owner { color: #bda1ad; font-size: .56rem; }

.limited-abyss-item header {
  min-width: 0;
  justify-content: space-between;
}

.limited-abyss-item header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.limited-abyss-item header small {
  color: #72676c;
  font-size: .43rem;
  letter-spacing: .12em;
}

.limited-abyss-item.equipped header small { color: #b49362; }

.limited-abyss-item header strong {
  overflow: hidden;
  color: #e6dce0;
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.limited-abyss-item header > span {
  flex: 0 0 auto;
  color: #e4c299;
  background: rgb(var(--law-gold) / 10%);
}

.limited-abyss-item p {
  color: #9f9298;
  line-height: 1.55;
}

.limited-abyss-item > button {
  align-self: start;
  min-width: 86px;
  min-height: 38px;
}

.limited-abyss-skill-slots { grid-column: 1 / -1; min-width: 0; }
.limited-abyss-skill-slots .slots { grid-template-columns: minmax(0, 1fr); gap: 5px; margin: 0; }
.limited-abyss-skill-slots .slot { grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid rgb(var(--law-violet) / 16%); border-radius: 5px; background: rgb(var(--law-violet) / 6%); font-size: .7rem; }
.limited-abyss-skill-slots .slot.tip-open { align-items: start; border-color: var(--tips-border); }
.limited-abyss-skill-slots .slot-badge { align-self: start; margin-top: 10px; }
.limited-abyss-skill-slots .skill-tip-trigger { min-height: 44px; margin: 0; padding: 4px; }
.limited-abyss-skill-slots .skill-tip-trigger strong { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.limited-abyss-skill-slots .skill-tip-trigger > .muted { font-size: .6rem; }
.limited-abyss-skill-slots .skill-tip-trigger:focus-visible { outline: 2px solid var(--tips-accent); outline-offset: 1px; }
.limited-abyss-skill-slots .skill-tip-panel { margin: 5px 0 2px; }
.limited-abyss-skill-slots .skill-tip-panel p { margin: 6px 0 0; color: var(--tips-text); font-size: .72rem; line-height: 1.65; overflow-wrap: anywhere; }
.limited-abyss-skill-slots .skill-tip-panel .skill-mastery-detail { color: var(--muted); font-size: .65rem; }

.limited-abyss-item-slots {
  gap: 4px;
}

.limited-abyss-item-slots span {
  min-height: 34px;
  border: 1px solid rgb(255 255 255 / 4%);
  border-radius: 4px;
  color: #665e62;
  background: rgb(0 0 0 / 19%);
}

.limited-abyss-item-slots span.is-filled {
  border-color: rgb(var(--law-violet) / 13%);
  color: #c7b9c0;
  background: rgb(var(--law-violet) / 6%);
}

.limited-abyss-item-slots b {
  flex-basis: 21px;
  height: 21px;
  color: #9e8790;
  background: rgb(var(--law-red) / 14%);
}

.limited-abyss-item-slots span.is-filled b {
  color: #ecd4da;
  background: linear-gradient(145deg, rgb(var(--law-red) / 65%), rgb(var(--law-violet) / 46%));
}

.limited-abyss-item-slots em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.limited-abyss-empty-part {
  margin: 0;
  padding: 13px;
  color: #71686c;
  font-size: .64rem;
  text-align: center;
}

@media (max-width: 700px) {
  .limited-abyss-screen { gap: 10px; }
  .limited-abyss-screen > .panel { border-radius: 9px; }
  .limited-abyss-companion-list { grid-template-columns: 1fr; }
  .limited-abyss-companion-confirm-backdrop { padding: max(10px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left)); }
  .limited-abyss-companion-confirm-dialog { width: min(500px, 100%); max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .limited-abyss-companion-confirm-heading { padding: 14px 13px 12px; }
  .limited-abyss-companion-confirm-hero { grid-template-columns: 106px minmax(0, 1fr); gap: 11px; margin: 10px; padding: 9px; }
  .limited-abyss-companion-confirm-portrait { min-height: 138px; }
  .limited-abyss-companion-confirm-portrait .actor-image { height: 138px; }
  .limited-abyss-companion-confirm-ledger,
  .limited-abyss-companion-confirm-terms,
  .limited-abyss-companion-confirm-warning { margin-right: 10px; margin-left: 10px; }
  .limited-abyss-companion-confirm-actions { padding-inline: 10px; }
  .limited-abyss-command-grid { grid-template-columns: 1fr; }
  .limited-abyss-command-slot { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .limited-abyss-command-picker-backdrop { align-items: end; padding: 4px 4px 0; }
  .limited-abyss-command-picker-dialog { width: 100%; max-height: min(84dvh, 760px); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 14px 14px 0 0; }
  .limited-abyss-command-picker-heading { padding: 14px 13px 12px; }
  .limited-abyss-command-picker-dialog > p { padding: 9px 13px 10px; }
  .limited-abyss-command-options { padding: 0 9px 10px; }
  .limited-abyss-command-option { min-height: 72px; padding-inline: 8px; }
  .limited-abyss-command-picker-dialog > footer { padding-inline: 12px; }
  .limited-abyss-item-list { padding-left: 9px; }
  .limited-abyss-current-pin { top: calc(var(--app-header-height) + 6px); }
  .limited-abyss-part > summary { grid-template-columns: 30px 29px minmax(56px, .42fr) minmax(0, 1fr) 14px; gap: 7px; padding-inline: 9px; }
  .limited-abyss-part-number { border-right: 0; }
  .limited-abyss-supply .section-heading > strong small { display: none; }
}

@media (max-width: 420px) {
  .limited-abyss-companion-confirm-title .abyss-mechanism-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .limited-abyss-companion-confirm-title .abyss-mechanism-gear { width: 33px; height: 33px; }
  .limited-abyss-companion-confirm-title h2 { font-size: .96rem; }
  .limited-abyss-companion-confirm-title p { font-size: .39rem; }
  .limited-abyss-companion-confirm-hero { grid-template-columns: 92px minmax(0, 1fr); }
  .limited-abyss-companion-confirm-portrait { min-height: 126px; }
  .limited-abyss-companion-confirm-portrait .actor-image { height: 126px; }
  .limited-abyss-companion-confirm-profile h3 { font-size: 1.16rem; }
  .limited-abyss-companion-confirm-terms { grid-template-columns: 1fr; }
  .limited-abyss-companion-confirm-terms > span { grid-template-columns: 24px minmax(0, 1fr); align-items: center; }
  .limited-abyss-companion-confirm-actions { grid-template-columns: 1fr; }
  .limited-abyss-part > summary {
    grid-template-columns: 30px 29px minmax(0, 1fr) 13px;
    grid-template-rows: auto auto;
    row-gap: 5px;
  }
  .limited-abyss-part-number { grid-column: 1; grid-row: 1 / span 2; }
  .limited-abyss-part-icon { grid-column: 2; grid-row: 1 / span 2; }
  .limited-abyss-part-copy { grid-column: 3; grid-row: 1; }
  .limited-abyss-part-current {
    grid-column: 3;
    grid-row: 2;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    justify-items: start;
    gap: 6px;
  }
  .limited-abyss-part > summary .limited-abyss-part-current b {
    overflow: visible;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .limited-abyss-part > summary > i {
    grid-column: 4;
    grid-row: 1 / span 2;
  }
  .limited-abyss-command-cost b { padding-inline: 4px; }
  .limited-abyss-command-picker-title .abyss-mechanism-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .limited-abyss-command-picker-title .abyss-mechanism-gear { width: 33px; height: 33px; }
  .limited-abyss-command-picker-title h2 { font-size: .96rem; }
  .limited-abyss-command-picker-title p { font-size: .4rem; }
  .limited-abyss-command-option { grid-template-columns: 42px minmax(0, 1fr) 25px; gap: 8px; }
  .limited-abyss-command-option-icon { width: 40px; height: 40px; }
  .limited-abyss-command-option-icon .command-icon { width: 35px; height: 35px; }
  .limited-abyss-command-picker-dialog > footer { display: grid; }
  .limited-abyss-command-picker-dialog > footer small { text-align: left; }
  .limited-abyss-item { grid-template-columns: minmax(0, 1fr) auto; }
  .limited-abyss-item-slots { grid-template-columns: 1fr; }
}

/* Battle party analysis console. */
.party-detail-backdrop {
  z-index: 280;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 14%, rgb(var(--party-color-rgb, var(--accent-rgb)) / 13%), transparent 36%),
    rgb(2 6 9 / 90%);
  backdrop-filter: blur(7px) saturate(.82);
}

.party-detail-dialog {
  position: relative;
  isolation: isolate;
  width: min(620px, 100%);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 55%);
  border-radius: 13px;
  background:
    radial-gradient(circle at 9% 0, rgb(var(--party-color-rgb, var(--accent-rgb)) / 13%), transparent 28%),
    repeating-linear-gradient(116deg, transparent 0 74px, rgb(var(--party-color-rgb, var(--accent-rgb)) / 1.5%) 75px, transparent 76px 150px),
    linear-gradient(155deg, rgb(23 32 38 / 99%), rgb(8 13 18 / 99%) 68%);
  box-shadow: 0 28px 82px rgb(0 0 0 / 72%), 0 0 28px rgb(var(--party-color-rgb, var(--accent-rgb)) / 9%), inset 0 1px rgb(255 255 255 / 6%);
  scrollbar-color: rgb(var(--party-color-rgb, var(--accent-rgb)) / 42%) rgb(0 0 0 / 15%);
  -webkit-overflow-scrolling: touch;
}

#battle-detail-root:empty { display: none; }
body.battle-detail-modal-open { overflow: hidden; }

.party-detail-dialog::before {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 12%;
  left: 12%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--party-color, var(--gold)) 30% 70%, transparent);
  box-shadow: 0 0 12px rgb(var(--party-color-rgb, var(--accent-rgb)) / 42%);
  content: "";
}

.party-detail-heading {
  position: sticky;
  z-index: 3;
  top: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 42px;
  align-items: center;
  gap: 10px;
  padding: 14px 15px 12px;
  border-bottom: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 18%);
  background: linear-gradient(90deg, rgb(var(--party-color-rgb, var(--accent-rgb)) / 10%), transparent 55%), rgb(10 17 22 / 95%);
  backdrop-filter: blur(9px);
}

.party-detail-member-index {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 36%);
  border-radius: 50%;
  color: var(--party-color, var(--gold));
  background: rgb(var(--party-color-rgb, var(--accent-rgb)) / 8%);
  font-family: Georgia, serif;
  font-size: .72rem;
  box-shadow: inset 0 0 10px rgb(var(--party-color-rgb, var(--accent-rgb)) / 10%);
}

.party-detail-heading > div {
  min-width: 0;
}

.party-detail-heading .eyebrow {
  overflow: hidden;
  color: rgb(var(--party-color-rgb, var(--accent-rgb)) / 80%);
  font-size: .47rem;
  letter-spacing: .14em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.party-detail-heading h2 {
  overflow: hidden;
  margin: 2px 0 0;
  color: #f2ebee;
  font-family: "Yu Mincho", serif;
  font-size: 1.18rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.party-detail-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #9fcfbd;
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}

.party-detail-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #69d5aa;
  box-shadow: 0 0 8px #69d5aa;
}

.party-detail-live.is-down { color: #d59a9a; }
.party-detail-live.is-down i { background: #cb6d72; box-shadow: 0 0 8px #cb6d72; }

.party-detail-heading .dialog-close-button {
  width: 40px;
  height: 40px;
  border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 24%);
  background: rgb(3 9 13 / 42%);
  color: #9da9ad;
}

.party-detail-heading .dialog-close-button:is(:hover, :focus-visible) {
  border-color: rgb(var(--party-color-rgb, var(--accent-rgb)) / 60%);
  color: #f4fbfc;
  outline: 0;
}

.party-detail-summary {
  display: grid;
  grid-template-columns: minmax(128px, 168px) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  margin: 14px 15px 4px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 25%);
  border-radius: 9px;
  background: linear-gradient(110deg, rgb(var(--party-color-rgb, var(--accent-rgb)) / 10%), rgb(3 9 13 / 48%) 46%);
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
}

.party-detail-art {
  position: relative;
  display: grid;
  height: 168px;
  overflow: hidden;
  place-items: end center;
  border-right: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 18%);
  background:
    linear-gradient(90deg, transparent 49%, rgb(var(--party-color-rgb, var(--accent-rgb)) / 6%) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgb(var(--party-color-rgb, var(--accent-rgb)) / 5%) 50%, transparent 51%),
    radial-gradient(ellipse at 50% 75%, rgb(var(--party-color-rgb, var(--accent-rgb)) / 22%), transparent 68%);
  background-size: 28px 100%, 100% 28px, auto;
}

.party-detail-art::after {
  position: absolute;
  right: 16%;
  bottom: 7px;
  left: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--party-color-rgb, var(--accent-rgb)) / 65%), transparent);
  box-shadow: 0 0 8px rgb(var(--party-color-rgb, var(--accent-rgb)) / 35%);
  content: "";
}

.party-detail-art .actor-image {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 158px;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgb(0 0 0 / 45%));
}

.party-detail-art-label {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  left: 8px;
  color: rgb(var(--party-color-rgb, var(--accent-rgb)) / 58%);
  font-size: .39rem;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
}

.party-detail-vitals {
  align-content: center;
  gap: 10px;
  padding: 13px 14px;
  font-size: .72rem;
}

.party-detail-vitals > p {
  margin: 0;
  color: #776f73;
  font-size: .46rem;
  letter-spacing: .14em;
}

.party-detail-vital {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
}

.party-detail-vital > span {
  display: block;
  border: 0;
  color: #c6b9bf;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.party-detail-vital > strong {
  justify-self: end;
  color: #f0e8eb;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.party-detail-vital > strong small {
  color: #847a7f;
  font-size: .6rem;
  font-weight: 500;
}

.party-detail-vital progress {
  grid-column: 1 / -1;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgb(0 0 0 / 44%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%);
  appearance: none;
}

.party-detail-vital progress::-webkit-progress-bar { background: transparent; }
.party-detail-vital.hp progress::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, #4f9c77, #86d6a5); box-shadow: 0 0 7px rgb(116 210 156 / 28%); }
.party-detail-vital.mp progress::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, #4d8cab, #75c8dc); box-shadow: 0 0 7px rgb(101 190 216 / 25%); }
.party-detail-vital.hp progress::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, #4f9c77, #86d6a5); }
.party-detail-vital.mp progress::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, #4d8cab, #75c8dc); }

.party-detail-barrier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 5px;
  border-top: 1px solid rgb(255 255 255 / 6%);
}

.party-detail-barrier span {
  color: #7d7478;
  font-size: .45rem;
  letter-spacing: .1em;
}

.party-detail-barrier strong {
  color: #bed3da;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.party-detail-defeated {
  position: absolute;
  z-index: 2;
  top: 70px;
  right: 14px;
  padding: 4px 8px;
  border: 1px solid rgb(203 109 114 / 42%);
  border-radius: 3px;
  color: #eab7b8;
  background: rgb(83 31 35 / 76%);
  font-size: .58rem;
  letter-spacing: .08em;
}

.party-detail-section {
  gap: 9px;
  margin: 0 15px;
  padding: 15px 0;
  border-top: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 13%);
}

.party-detail-section-heading {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.party-detail-section-heading > span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 29%);
  border-radius: 50%;
  color: var(--party-color, var(--gold));
  font-family: Georgia, serif;
  font-size: .58rem;
}

.party-detail-section-heading > div {
  display: grid;
  gap: 1px;
}

.party-detail-section-heading small {
  color: rgb(var(--party-color-rgb, var(--accent-rgb)) / 66%);
  font-size: .42rem;
  letter-spacing: .14em;
}

.party-detail-section-heading strong {
  color: #e6dde1;
  font-family: "Yu Mincho", serif;
  font-size: .82rem;
}

.party-detail-section-heading > em {
  color: #71696d;
  font-size: .45rem;
  font-style: normal;
  letter-spacing: .08em;
  white-space: nowrap;
}

.party-detail-skills {
  gap: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 14%);
  border-radius: 7px;
  background: rgb(2 8 11 / 32%);
}

.party-detail-skill {
  position: relative;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  gap: 10px;
  min-height: 78px;
  padding: 10px 11px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, rgb(var(--party-color-rgb, var(--accent-rgb)) / 5%), transparent 35%);
}

.party-detail-skill + .party-detail-skill {
  border-top: 1px solid rgb(255 255 255 / 6%);
}

.party-detail-skill::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 2px;
  background: rgb(var(--party-color-rgb, var(--accent-rgb)) / 55%);
  content: "";
}

.party-detail-skill.is-unset {
  opacity: .66;
}

.party-detail-skill-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 18%);
  border-radius: 8px;
  background: radial-gradient(circle, rgb(var(--party-color-rgb, var(--accent-rgb)) / 14%), rgb(0 0 0 / 20%));
}

.party-detail-skill .command-icon {
  width: 34px;
  height: 34px;
}

.party-detail-skill > div {
  gap: 2px;
}

.party-detail-skill > div > small {
  color: rgb(var(--party-color-rgb, var(--accent-rgb)) / 65%);
  font-size: .42rem;
  letter-spacing: .1em;
}

.party-detail-skill > div > strong {
  color: #e9e0e4;
  font-size: .73rem;
}

.party-detail-skill > div > strong em {
  margin-left: 3px;
  color: #a6979e;
  font-size: .57rem;
  font-style: normal;
}

.party-detail-skill p {
  margin: 0;
  color: #8d8388;
  font-size: .57rem;
  line-height: 1.4;
}

.party-detail-skill > b {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgb(var(--party-color-rgb, var(--accent-rgb)) / 26%);
  border-radius: 50%;
  color: var(--party-color, var(--gold));
  background: rgb(var(--party-color-rgb, var(--accent-rgb)) / 8%);
  font-family: Georgia, serif;
  font-size: .56rem;
}

.party-detail-stat-grid {
  gap: 0 16px;
  padding: 2px 10px;
  border-top: 1px solid rgb(255 255 255 / 5%);
  border-bottom: 1px solid rgb(255 255 255 / 5%);
  background: rgb(2 8 11 / 22%);
}

.party-detail-stat-grid > div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 7px;
  min-height: 39px;
  padding: 8px 2px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgb(255 255 255 / 5%);
  background: transparent;
}

.party-detail-stat-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }

.party-detail-stat-grid small {
  color: rgb(var(--party-color-rgb, var(--accent-rgb)) / 48%);
  font-size: .4rem;
  letter-spacing: .08em;
}

.party-detail-stat-grid span {
  color: #8f858a;
  font-size: .62rem;
}

.party-detail-stat-grid strong {
  color: #ebe3e6;
  font-family: Georgia, serif;
  font-size: .77rem;
}

.party-detail-effects {
  padding-bottom: 17px;
}

.party-detail-effects .battle-state-badges {
  gap: 5px;
}

.party-detail-effects .battle-state-badge {
  border-radius: 5px;
  background: rgb(3 9 13 / 38%);
}

.party-detail-section .battle-state-empty {
  display: block;
  padding: 13px;
  color: #746b70;
  text-align: center;
}

@media (max-width: 520px) {
  .party-detail-backdrop { place-items: center; }
  .party-detail-dialog { width: 100%; border-radius: 11px; }
  .party-detail-heading { grid-template-columns: 30px minmax(0, 1fr) 38px; gap: 8px; padding: 12px 11px 10px; }
  .party-detail-member-index { width: 28px; height: 28px; font-size: .65rem; }
  .party-detail-live { display: none; }
  .party-detail-heading .dialog-close-button { width: 38px; height: 38px; }
  .party-detail-summary { grid-template-columns: minmax(110px, 138px) minmax(0, 1fr); margin: 10px 10px 2px; }
  .party-detail-art { height: 150px; }
  .party-detail-art .actor-image { max-height: 143px; }
  .party-detail-vitals { gap: 8px; padding: 10px; }
  .party-detail-vital { gap: 3px 7px; }
  .party-detail-vital > strong { font-size: .68rem; }
  .party-detail-section { margin-inline: 10px; padding-block: 13px; }
  .party-detail-section-heading { grid-template-columns: 25px minmax(0, 1fr) auto; gap: 7px; }
  .party-detail-skill { grid-template-columns: 39px minmax(0, 1fr) 26px; gap: 8px; min-height: 74px; padding-inline: 8px; }
  .party-detail-skill-icon { width: 37px; height: 37px; }
  .party-detail-skill .command-icon { width: 31px; height: 31px; }
  .party-detail-stat-grid { gap: 0 11px; padding-inline: 7px; }
  .party-detail-stat-grid > div { grid-template-columns: 37px minmax(0, 1fr) auto; gap: 5px; }
}

@media (max-width: 370px) {
  .party-detail-summary { grid-template-columns: 105px minmax(0, 1fr); }
  .party-detail-art { height: 142px; }
  .party-detail-art .actor-image { max-height: 136px; }
  .party-detail-vitals { padding-inline: 8px; }
  .party-detail-vitals > p, .party-detail-art-label { display: none; }
  .party-detail-stat-grid { grid-template-columns: 1fr; }
  .party-detail-stat-grid > div:nth-last-child(2) { border-bottom: 1px solid rgb(255 255 255 / 5%); }
}

/* Limited Abyss inheritance-core loadout */
body.limited-abyss-core-modal-open { overflow: hidden; }
.limited-abyss-current-pin { grid-template-columns: minmax(0, 1fr) auto; }
.limited-abyss-current-pin .limited-abyss-core-slots,
.limited-abyss-current-pin .law-gear-upgrade { grid-column: 1 / -1; }
.limited-abyss-core-slots { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.limited-abyss-core-slots > button { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; padding: 7px; border: 1px solid rgb(var(--law-violet) / 18%); border-radius: 7px; color: #a99ba1; background: rgb(0 0 0 / 22%); text-align: left; }
.limited-abyss-core-slots > button.is-filled { border-color: rgb(var(--law-gold) / 25%); color: #ded0c9; background: rgb(var(--law-violet) / 8%); }
.limited-abyss-core-slots > button > span { display: grid; min-width: 0; gap: 1px; }
.limited-abyss-core-slots small { color: #9d8993; font-size: .48rem; }
.limited-abyss-core-slots strong { overflow: hidden; font-size: .6rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.limited-abyss-core-slots > button > i { font-style: normal; }
.limited-abyss-core-slot-icon, .law-core-slot-icon { width: 22px; height: 22px; object-fit: contain; }
.law-gear-upgrade { min-height: 38px; }
.limited-abyss-item .law-gear-upgrade { grid-row: auto; grid-column: 1 / -1; }
.law-core-library { display: grid; gap: 7px; margin-top: 12px; }
.law-core-group { overflow: hidden; border: 1px solid rgb(255 255 255 / 8%); border-radius: 9px; background: rgb(0 0 0 / 16%); }
.law-core-group > header { display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 9px; padding: 10px; border-bottom: 1px solid rgb(255 255 255 / 7%); background: linear-gradient(90deg, rgb(var(--law-violet) / 12%), transparent); }
.law-core-group > header > span { display: grid; gap: 2px; }
.law-core-group > header strong { color: #ded2cf; font-size: .72rem; }
.law-core-group > header small { color: #a99ba1; font-size: .54rem; letter-spacing: .06em; }
.law-core-group-icon { width: 28px; height: 28px; object-fit: contain; }
.law-core-library-list { display: grid; gap: 6px; padding: 8px; }
.law-core-library-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-radius: 7px; background: rgb(20 20 28 / 78%); }
.law-core-library-row.is-new { box-shadow: inset 3px 0 0 rgb(var(--law-gold) / 48%); }
.law-core-library-row-copy { display: grid; min-width: 0; gap: 3px; }
.law-core-library-row strong { overflow-wrap: anywhere; color: #ddd1cd; font-size: .68rem; }
.law-core-library-row strong em, .law-core-option-copy header em { margin-left: 5px; padding: 1px 4px; border: 1px solid rgb(var(--law-gold) / 45%); border-radius: 999px; color: #f0ca91; font-size: .45rem; font-style: normal; }
.law-core-library-row p { margin: 0; color: #b8acb1; font-size: .56rem; line-height: 1.45; }
.law-core-library-row small { color: #b79b7c; font-size: .54rem; }
.law-core-library-row > .law-core-level-button { display: grid; align-self: center; justify-items: center; gap: 3px; min-width: 56px; min-height: 46px; padding: 6px 8px; border-color: rgb(var(--law-gold) / 34%); border-radius: 10px; color: #eadcc7; background: linear-gradient(145deg, rgb(var(--law-gold) / 14%), rgb(31 39 50 / 92%)); box-shadow: inset 0 1px rgb(255 255 255 / 7%); line-height: 1; }
.law-core-level-button > span { font-size: .61rem; font-weight: 700; letter-spacing: .05em; }
.law-core-level-button > small { color: #c4a879; font-size: .48rem; letter-spacing: .06em; }
.law-core-level-button:disabled { border-color: rgb(255 255 255 / 10%); color: #85878b; background: rgb(33 38 47 / 72%); box-shadow: none; opacity: .72; }
.law-core-level-button:disabled > small { color: #73777d; }
.limited-abyss-core-picker-backdrop { position: fixed; z-index: 1040; inset: 0; display: grid; align-items: end; padding: 18px max(10px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: rgb(4 6 11 / 78%); backdrop-filter: blur(5px); }
.limited-abyss-core-picker-dialog { display: grid; gap: 10px; width: min(640px, 100%); max-height: min(78dvh, 720px); margin: 0 auto; padding: 16px; overflow: auto; border: 1px solid rgb(var(--law-gold) / 32%); border-radius: 16px; background: linear-gradient(155deg, rgb(26 23 31 / 99%), rgb(10 14 21 / 99%)); box-shadow: 0 22px 70px rgb(0 0 0 / 62%); }
.limited-abyss-core-picker-dialog > header { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.limited-abyss-core-picker-dialog h2 { margin: 3px 0 0; color: #eee1d7; font-family: "Yu Mincho", serif; font-size: 1.05rem; font-weight: 500; }
.limited-abyss-core-picker-dialog > p { margin: 0; color: #9e9298; font-size: .65rem; line-height: 1.6; }
.law-core-detach { width: 100%; }
.law-core-option-list { display: grid; gap: 7px; }
.law-core-option { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 9px; background: rgb(0 0 0 / 20%); }
.law-core-option.selected { border-color: rgb(var(--law-gold) / 42%); background: rgb(var(--law-gold) / 7%); }
.law-core-option.is-new { box-shadow: inset 3px 0 0 rgb(var(--law-gold) / 48%); }
.law-core-option-mark { display: grid; justify-items: center; gap: 2px; }
.law-core-option-mark small { color: #bda781; font-size: .5rem; }
.law-core-option-copy { display: grid; min-width: 0; gap: 3px; }
.law-core-option-copy header { display: flex; align-items: center; }
.law-core-option-copy strong { color: #e3d7d1; font-size: .7rem; }
.law-core-option-copy p { margin: 0; color: #9b8f94; font-size: .58rem; line-height: 1.45; }
.law-core-option-copy > small { color: #b79b7c; font-size: .52rem; }
.law-core-option > button { min-width: 78px; padding: 7px; font-size: .58rem; }
.expedition-loot-cores { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.expedition-loot-cores li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border-radius: 7px; background: rgb(var(--law-violet) / 8%); }
.expedition-loot-cores span { display: grid; gap: 2px; }
.expedition-loot-cores strong { color: #e1d4cd; font-size: .7rem; }
.expedition-loot-cores small { color: #9b8e93; font-size: .56rem; }
@media (max-width: 430px) {
  .limited-abyss-core-slots { grid-template-columns: 1fr; }
  .law-core-library-row { grid-template-columns: 24px minmax(0, 1fr) 56px; gap: 6px; }
  .law-core-option { grid-template-columns: 34px minmax(0, 1fr); }
  .law-core-option > button { grid-column: 1 / -1; }
}

/* Limited Abyss readability pass: retain the dark atmosphere while separating content surfaces. */
.limited-abyss-screen > .panel {
  border-color: rgb(173 138 158 / 42%);
  background:
    linear-gradient(90deg, rgb(var(--law-red) / 7%), transparent 28%),
    linear-gradient(145deg, rgb(36 44 54 / 98%), rgb(18 24 32 / 99%));
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 14px 28px rgb(0 0 0 / 16%);
}
.limited-abyss-hero {
  background:
    radial-gradient(circle at 88% 4%, rgb(var(--law-red) / 24%), transparent 35%),
    radial-gradient(circle at 18% 86%, rgb(var(--law-violet) / 17%), transparent 34%),
    linear-gradient(145deg, rgb(48 30 39 / 98%), rgb(19 24 32 / 99%));
}
.limited-abyss-rule p:not(.eyebrow),
.limited-abyss-supply > p,
.limited-abyss-section-lead { color: #c8bdc2; }
.limited-abyss-schedule > div {
  border-color: rgb(255 255 255 / 13%);
  background: rgb(20 27 35 / 76%);
}
.limited-abyss-schedule dt,
.limited-abyss-progress > span small,
.limited-abyss-progress > small { color: #bbaab1; }
.limited-abyss-progress {
  border-color: rgb(var(--law-violet) / 29%);
  background: linear-gradient(90deg, rgb(var(--law-violet) / 13%), rgb(15 21 29 / 78%));
}
.law-support-countdown {
  border-color: rgb(var(--law-gold) / 36%);
  background: linear-gradient(115deg, rgb(var(--law-gold) / 13%), rgb(18 23 29 / 88%));
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
}
.law-support-countdown > span { color: #d1c0b6; }
.law-support-countdown small { color: #b2a6a2; }
.limited-abyss-supply-actions button {
  border-color: rgb(var(--law-gold) / 35%);
  color: #eee5d8;
  background: linear-gradient(145deg, rgb(58 53 44 / 96%), rgb(27 31 36 / 99%));
  box-shadow: inset 0 1px rgb(255 255 255 / 6%);
}
.limited-abyss-supply-actions button:disabled {
  border-color: rgb(164 155 143 / 20%);
  color: #92989f;
  background: linear-gradient(145deg, rgb(35 40 47 / 96%), rgb(24 29 36 / 99%));
  opacity: 1;
}
.law-party-slot {
  border-color: rgb(var(--law-gold) / 35%);
  background: linear-gradient(135deg, rgb(var(--law-gold) / 12%), rgb(20 27 35 / 92%));
}
.law-party-slot small,
.law-party-footer p { color: #bdb2ae; }
.law-party-slot.is-empty {
  border-color: rgb(255 255 255 / 21%);
  background: rgb(23 29 37 / 82%);
}
.law-party-slot.is-empty > span,
.law-party-slot.is-empty strong { color: #bbb3b0; }

.limited-abyss-core-picker-backdrop {
  background: rgb(4 7 12 / 64%);
  backdrop-filter: blur(3px);
}
.limited-abyss-core-picker-dialog {
  border-color: rgb(var(--law-gold) / 52%);
  background:
    radial-gradient(circle at 88% 0%, rgb(var(--law-violet) / 14%), transparent 34%),
    linear-gradient(155deg, rgb(43 40 49 / 99%), rgb(23 29 38 / 99%));
  box-shadow: 0 22px 70px rgb(0 0 0 / 52%), inset 0 1px rgb(255 255 255 / 8%);
}
.limited-abyss-core-picker-dialog > p { color: #c9bec3; }
.limited-abyss-core-picker-dialog .icon-button {
  border-color: rgb(255 255 255 / 18%);
  color: #eee5e2;
  background: rgb(255 255 255 / 9%);
}
.law-core-detach {
  border-color: rgb(145 169 198 / 38%);
  color: #e5edf5;
  background: linear-gradient(145deg, rgb(46 61 78 / 96%), rgb(31 42 56 / 98%));
}
.law-core-option {
  border-color: rgb(255 255 255 / 14%);
  background: rgb(39 43 53 / 92%);
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}
.law-core-option.selected {
  border-color: rgb(var(--law-gold) / 58%);
  background: linear-gradient(135deg, rgb(var(--law-gold) / 16%), rgb(39 42 51 / 96%));
}
.law-core-option-copy p { color: #c5b9be; }
.law-core-option-copy > small { color: #d0b58a; }
.law-core-option > button:disabled {
  border-color: rgb(255 255 255 / 12%);
  color: #9da3aa;
  background: rgb(28 34 42 / 94%);
  opacity: 1;
}

/* ---- 狙い撃ちリスト ---- */
.wishlist-panel { margin: 14px 0; padding: 14px; border: 1px solid var(--accent-border); border-radius: 8px; background: linear-gradient(180deg, rgb(var(--panel-start-rgb)), rgb(var(--panel-end-rgb))); }
.wishlist-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.wishlist-panel-head h2 { margin: 2px 0 0; font-size: 1.15rem; }
.wishlist-count { flex: 0 0 auto; padding: 2px 10px; border: 1px solid var(--accent-border); border-radius: 99px; color: var(--gold-strong); font-weight: 700; font-size: .85rem; }
.wishlist-lead { margin: 8px 0 10px; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.wishlist-empty { margin: 0; padding: 12px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); font-size: .85rem; }
.wishlist-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wishlist-target { position: relative; display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent-border); border-radius: 6px; background: var(--surface-deep); }
.wishlist-target.achieved { border-left-color: var(--gold-strong); }
.wishlist-target.pity-active { box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .35); }
.wishlist-target-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-right: 52px; }
.wishlist-target-main strong { font-size: 1rem; }
.wishlist-slot-tag { padding: 1px 8px; border-radius: 99px; background: var(--tag-surface); color: var(--gold-strong); font-size: .72rem; font-weight: 700; }
.wishlist-achieved-mark { color: var(--gold-strong); font-size: .72rem; font-style: normal; }
.wishlist-target-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: .78rem; }
.wishlist-target-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.wishlist-pity { display: grid; gap: 4px; color: var(--muted); font-size: .76rem; }
.wishlist-pity progress { width: 100%; height: 6px; }
.wishlist-remove { position: absolute; top: 6px; right: 8px; min-height: 32px; padding: 0 6px; }
.wishlist-slot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.wishlist-slot-actions small { color: var(--muted); font-size: .7rem; }
.wishlist-slot-button { min-height: 34px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-2); color: var(--text); font-size: .8rem; cursor: pointer; }
.wishlist-slot-button.active { border-color: var(--gold-strong); background: var(--selected-start); color: var(--selected-text); font-weight: 700; }
.wishlist-slot-button:disabled { opacity: .5; cursor: not-allowed; }
.wishlist-hit-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; border: 1px solid var(--gold-strong); border-radius: 99px; background: #44381f; color: var(--gold-strong); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.warehouse-item-card .item-head .wishlist-hit-badge { margin: 0; }

/* ---- 能力図鑑・容量制：能力工房・器の容量・反応図鑑・構成コード ---- */
.vessel-meter { display: grid; gap: 4px; margin: 8px 0 6px; }
.vessel-meter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .68rem; color: var(--muted); }
.vessel-meter-head strong { color: var(--text); font-size: .78rem; }
.vessel-meter-head small { margin-left: auto; }
.vessel-curse-return { color: #d98a8a; font-style: normal; font-weight: 700; }
.vessel-meter-bar, .skill-mastery-gauge { display: block; width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 999px; background: var(--inset); appearance: none; }
.vessel-meter-bar::-webkit-progress-bar, .skill-mastery-gauge::-webkit-progress-bar { border-radius: inherit; background: var(--inset); }
.vessel-meter-bar::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, var(--accent-border-strong), var(--gold)); }
.vessel-meter-bar::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, var(--accent-border-strong), var(--gold)); }
.vessel-meter.over .vessel-meter-bar::-webkit-progress-value { background: #c85b5b; }
.vessel-meter.over .vessel-meter-bar::-moz-progress-bar { background: #c85b5b; }
.vessel-surplus-note { margin: 0; color: var(--gold-strong); font-size: .66rem; }
.vessel-badge { display: inline-block; margin-left: 4px; padding: 1px 6px; border: 1px solid var(--accent-border); border-radius: 999px; color: var(--gold-strong); font-size: .6rem; }
.ability-list { display: grid; gap: 5px; margin-bottom: 6px; }
.ability-list.empty { padding: 6px 8px; border: 1px dashed var(--line); border-radius: 6px; font-size: .7rem; }
.ability-row { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card-dark); }
.ability-row.curse { border-color: #6b3b3b; background: rgb(120 40 40 / 12%); }
.ability-row .skill-tip-trigger { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; text-align: left; }
.ability-cost { padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .64rem; white-space: nowrap; }
.ability-cost.returns { border-color: #6b3b3b; color: #e0a0a0; }
.skill-mastery-gauge { height: 5px; margin: 4px 0; }
.skill-mastery-gauge::-webkit-progress-value { border-radius: inherit; background: var(--gold); }
.skill-mastery-gauge::-moz-progress-bar { border-radius: inherit; background: var(--gold); }
.skill-mastery-gauge.max::-webkit-progress-value { background: linear-gradient(90deg, var(--gold), var(--gold-strong)); }
.skill-mastery-gauge.max::-moz-progress-bar { background: linear-gradient(90deg, var(--gold), var(--gold-strong)); }

.abilities-screen { display: grid; gap: 12px; padding-bottom: 90px; }
.abilities-command-header { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--accent-border); border-radius: 10px; background: linear-gradient(180deg, rgb(var(--panel-start-rgb)), rgb(var(--panel-end-rgb))); }
.abilities-readout { display: flex; gap: 10px; }
.abilities-readout span { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--inset); }
.abilities-readout small { color: var(--muted); font-size: .58rem; letter-spacing: .08em; }
.abilities-readout strong { font-size: 1.1rem; }
.abilities-readout em { margin-left: 4px; color: var(--muted); font-size: .7rem; font-style: normal; }
.abilities-rules { margin: 0; line-height: 1.6; }
.ability-member-tabs { display: flex; gap: 6px; overflow-x: auto; }
.ability-member-tabs button { flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text); }
.ability-member-tabs button.selected { border-color: var(--gold); color: var(--gold-strong); background: rgb(var(--accent-rgb) / 12%); }
.ability-vessel-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ability-vessel-card { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card-dark); }
.ability-vessel-card.changed { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.ability-vessel-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ability-vessel-part { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .7rem; }
.ability-draft-tag { margin-left: auto; color: var(--gold-strong); font-size: .62rem; font-style: normal; }
.ability-chip-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ability-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.ability-chip.curse { border-color: #6b3b3b; }
.ability-chip.empty { color: var(--muted); font-size: .7rem; }
.ability-chip span { display: grid; }
.ability-chip small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--muted); font-size: .68rem; }
.ability-chip-remove { min-width: 34px; min-height: 34px; border: 1px solid var(--line); border-radius: 6px; background: var(--inset); color: var(--text); }
.ability-vessel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ability-extra-vessel h2 { margin: 4px 0; font-size: .95rem; }
.ability-draft-bar { position: sticky; bottom: 58px; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--dialog); box-shadow: 0 10px 30px rgb(0 0 0 / 45%); }
.ability-draft-bar.active { border-color: var(--gold); }
.ability-draft-bar > span { min-width: 0; font-size: .68rem; }
.ability-draft-bar > button { width: auto; min-width: 0; min-height: 44px; padding: 8px; font-size: .68rem; }
.ability-picker-backdrop, .ability-detail-backdrop, .ability-confirm-backdrop, .equip-conflict-backdrop { position: fixed; z-index: 190; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(4 5 3 / 82%); backdrop-filter: blur(4px); }
.ability-picker-dialog, .ability-detail-dialog, .ability-confirm-dialog { display: grid; gap: 10px; width: min(560px, 100%); max-height: calc(100dvh - 32px); padding: 16px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--accent-border-strong); border-radius: 10px; background: var(--dialog); box-shadow: 0 24px 70px rgb(0 0 0 / 60%); }
.ability-picker-heading { display: flex; justify-content: space-between; gap: 8px; }
.ability-picker-heading h2, .ability-confirm-dialog h2 { margin: 2px 0; font-size: 1rem; }
.ability-picker-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ability-picker-list button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--card-dark); color: var(--text); text-align: left; }
.ability-picker-list .ability-cost { align-self: start; }
.ability-picker-list li.curse button { border-color: #6b3b3b; }
.ability-picker-list li.blocked button { opacity: .55; }
.ability-picker-name { display: grid; }
.ability-picker-name small { color: var(--muted); font-size: .6rem; }
.ability-picker-description { grid-column: 1 / -1; color: var(--text); opacity: .82; font-size: .74rem; line-height: 1.6; }
.ability-picker-reason { grid-column: 1 / -1; color: #e0a0a0; font-size: .68rem; font-style: normal; }
/* Keep discovery controls visible while the skill library grows. */
.ability-picker-dialog { grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; height: min(760px, calc(100dvh - 32px)); overflow: hidden; padding: 16px; border-color: rgb(105 174 209 / 55%); background: linear-gradient(145deg, rgb(17 33 44 / 98%), var(--dialog) 55%); box-shadow: inset 0 1px 0 rgb(171 221 244 / 12%), 0 24px 70px rgb(0 0 0 / 60%); }
.ability-picker-dialog .ability-picker-heading { align-items: flex-start; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid rgb(107 167 195 / 20%); }
.ability-picker-dialog .ability-picker-heading > div { min-width: 0; }
.ability-picker-dialog .eyebrow { margin: 0 0 5px; color: #73b9da; font-size: .52rem; letter-spacing: .16em; }
.ability-picker-dialog .ability-picker-heading h2 { margin: 0; color: #e3edf2; font-size: .94rem; letter-spacing: .03em; }
.ability-picker-equipment { margin: 5px 0 0; color: var(--muted); font-size: .68rem; overflow-wrap: anywhere; }
.ability-picker-dialog .inventory-filter-close { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 1.25rem; }
.ability-picker-controls { display: grid; gap: 10px; min-width: 0; }
.ability-picker-search { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0 10px; border: 1px solid rgb(102 159 186 / 35%); border-radius: 6px; background: rgb(2 10 16 / 65%); }
.ability-picker-search:focus-within { border-color: #66b7de; box-shadow: 0 0 0 2px rgb(62 161 208 / 10%); }
.ability-picker-search > svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: #78a9c1; stroke-width: 1.5; }
.ability-picker-search input { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: max(16px, 1rem); box-shadow: none; outline: none; }
.ability-picker-search input::placeholder { color: #78929f; font-size: .78rem; }
.ability-picker-categories { display: flex; gap: 2px; padding-bottom: 1px; border-bottom: 1px solid rgb(104 164 195 / 23%); }
.ability-picker-categories button { display: grid; flex: 1 1 0; gap: 2px; place-items: center; min-width: 0; min-height: 44px; padding: 6px 1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #869ca8; font-size: .67rem; white-space: nowrap; }
.ability-picker-categories button small { color: #78929f; font-size: .57rem; font-variant-numeric: tabular-nums; }
.ability-picker-categories button[aria-pressed="true"] { border-bottom-color: #68c9f2; background: linear-gradient(0deg, rgb(64 165 208 / 15%), transparent); color: #d5f1ff; }
.ability-picker-categories button[aria-pressed="true"] small { color: #83c8e9; }
.ability-picker-result-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.ability-picker-result-count { color: #8ca5b3; font-size: .65rem; font-variant-numeric: tabular-nums; }
.ability-picker-available { display: flex; align-items: center; gap: 5px; min-height: 36px; padding: 5px 8px; border: 1px solid rgb(102 159 186 / 24%); border-radius: 5px; background: transparent; color: #a5b7c1; font-size: .63rem; }
.ability-picker-available > span { display: grid; place-items: center; width: 13px; height: 13px; border: 1px solid #678294; border-radius: 3px; color: transparent; font-size: 10px; }
.ability-picker-available[aria-pressed="true"] { color: #c9ecfb; border-color: #4695ba; background: rgb(55 140 179 / 12%); }
.ability-picker-available[aria-pressed="true"] > span { border-color: #78c9ec; color: #071721; background: #78c9ec; }
.ability-picker-results { min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #365e74 transparent; padding: 1px 3px 6px 0; }
.ability-picker-dialog .ability-picker-list { gap: 8px; }
.ability-picker-dialog .ability-picker-list button { gap: 8px 12px; min-height: 88px; padding: 12px; border-color: rgb(102 159 186 / 26%); border-radius: 6px; background: rgb(3 14 22 / 55%); }
.ability-picker-dialog .ability-picker-list li.active-skill button { border-left: 2px solid #68bde8; background: linear-gradient(110deg, rgb(24 62 85 / 40%), rgb(3 14 22 / 55%) 70%); }
.ability-picker-dialog .ability-picker-list li.blocked button { opacity: 1; background: rgb(3 14 22 / 35%); border-color: rgb(102 159 186 / 14%); }
.ability-picker-dialog .ability-picker-list li.blocked .ability-picker-name, .ability-picker-dialog .ability-picker-list li.blocked .ability-picker-price { opacity: .57; }
.ability-picker-name { align-self: start; gap: 4px; min-width: 0; }
.ability-picker-name strong { display: flex; align-items: center; gap: 6px; color: #e0eaf0; font-size: .83rem; line-height: 1.4; overflow-wrap: anywhere; }
.ability-picker-name > small { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: .58rem; line-height: 1.4; }
.ability-picker-type-icon { display: flex; flex: 0 0 15px; color: #8ca8b8; }
.ability-picker-type-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.active-skill .ability-picker-type-icon, .active-skill .ability-picker-type-label { color: #81d0f2; }
.active-skill .ability-picker-type-icon svg { fill: rgb(98 196 238 / 20%); }
.ability-picker-exclusive { padding: 1px 5px; border: 1px solid rgb(190 159 91 / 40%); border-radius: 3px; color: #d5bc86; background: rgb(159 124 51 / 10%); font-size: .55rem; white-space: nowrap; }
.ability-picker-price { display: grid; gap: 3px; align-self: start; color: #8ad2ee; font-size: .66rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ability-picker-price b { font-weight: 600; }
.ability-picker-price small { color: #c6b38a; font-size: .61rem; }
.ability-picker-dialog .ability-picker-description { grid-column: 1 / -1; margin: 0; color: #bacad3; opacity: 1; font-size: .73rem; line-height: 1.7; overflow-wrap: anywhere; }
.ability-picker-active-meta { grid-column: 1 / -1; display: flex; gap: 6px; }
.ability-picker-active-meta > span { padding: 2px 6px; border: 1px solid rgb(98 178 217 / 23%); border-radius: 3px; color: #7faac0; font-size: .57rem; }
.ability-picker-dialog .ability-picker-reason { grid-column: 1 / -1; margin: 0; color: #af9292; font-size: .62rem; }
.ability-picker-more { width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid rgb(102 159 186 / 35%); border-radius: 5px; background: rgb(26 63 85 / 30%); color: #b4dff1; font-size: .73rem; }
.ability-picker-more small { margin-left: 8px; color: #8ca5b3; font-size: .6rem; }
.ability-picker-empty { padding: 24px 10px; color: #a3b7c2; font-size: .75rem; line-height: 1.7; text-align: center; }
.ability-picker-note { margin: 0; padding-top: 10px; border-top: 1px solid rgb(102 159 186 / 20%); color: #8ba0ac; font-size: .62rem; line-height: 1.5; }
.ability-picker-categories button:focus-visible, .ability-picker-available:focus-visible, .ability-picker-list button:focus-visible, .ability-picker-more:focus-visible { outline: 2px solid #78c9ec; outline-offset: -2px; }
@media (max-width: 380px) { .ability-picker-backdrop { padding: 10px; } .ability-picker-dialog { height: min(760px, calc(100dvh - 20px)); max-height: calc(100dvh - 20px); padding: 12px; gap: 10px; } .ability-picker-categories button { font-size: .62rem; } .ability-picker-dialog .ability-picker-list button { padding: 10px; } }
.ability-confirm-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ability-confirm-list li { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--card-dark); font-size: .72rem; }
.ability-confirm-added { color: var(--gold-strong); }
.ability-confirm-removed { color: var(--muted); }
.ability-confirm-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; }
body.ability-modal-open { overflow: hidden; }

.codex-growth, .codex-exchange { display: grid; gap: 4px; margin-top: 6px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--inset); }
.codex-growth-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .7rem; }
.codex-growth-head small { color: var(--muted); }
.codex-unlock, .codex-exchange { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.codex-unlock small, .codex-exchange small { color: var(--muted); font-size: .68rem; }
.catalog-shards { display: block; margin-top: 2px; color: var(--gold-strong); font-size: .66rem; }
.reaction-codex { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card-dark); }
.reaction-codex-list { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 0; padding: 0; list-style: none; }
.reaction-codex-list li { padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }
.reaction-codex-list li.discovered { border-color: var(--accent-border); }
.reaction-codex-list li.unknown strong { color: var(--muted); }
.reaction-codex-list p { margin: 3px 0 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }
.log-reaction { color: #f0b36b; font-weight: 700; }
.log-reaction-chain { margin-right: 4px; padding: 0 4px; border-radius: 3px; background: #f0b36b; color: #1b1308; font-size: .58rem; }
.reaction-discovery { color: var(--gold-strong); font-weight: 700; }

.expedition-codex-new { margin: 4px 0; font-size: .74rem; }
.expedition-codex-growth { display: grid; gap: 4px; margin: 4px 0; padding: 0; list-style: none; }
.expedition-codex-growth li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: .7rem; }
.expedition-codex-growth small { grid-column: 1 / -1; color: var(--muted); }
.expedition-codex-shards { margin: 4px 0 0; color: var(--gold-strong); font-size: .72rem; }

.build-code-panel { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-dark); }
.build-code-heading h3 { margin: 0; font-size: .9rem; }
.build-code-output, .build-code-input { display: grid; gap: 4px; font-size: .68rem; color: var(--muted); }
.build-code-output input, .build-code-input textarea { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); color: var(--text); font-family: ui-monospace, monospace; font-size: .7rem; }
.build-code-preview ul { display: grid; gap: 6px; margin: 6px 0; padding: 0; list-style: none; }
.build-code-preview li { display: grid; gap: 3px; font-size: .7rem; }
.build-code-preview em { font-style: normal; }
.build-code-preview em.missing { color: #e0a0a0; text-decoration: line-through; }
.build-code-preview select { padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); color: var(--text); }
@media (max-width: 700px) {
  .ability-draft-bar { bottom: calc(var(--mobile-navigation-height) + var(--mobile-chat-peek-height) + 8px); }
}
@media (max-width: 480px) {
  .ability-vessel-grid { grid-template-columns: 1fr; }
}

/* ---- 能力詳細（能力工房から効果・育成へ）とLvの3段表示 ---- */
.ability-chip-detail { display: grid; flex: 1; min-width: 0; min-height: 40px; gap: 2px; padding: 2px 22px 2px 0; position: relative; border: 0; background: none; color: var(--text); text-align: left; }
.ability-chip-detail .skill-tip-cue { position: absolute; top: 50%; right: 4px; color: var(--gold); transform: translateY(-50%); }
.ability-chip-detail:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.ability-chip-unlock { padding: 0 6px; border-radius: 999px; background: rgb(var(--accent-rgb) / 18%); color: var(--gold-strong); font-style: normal; font-weight: 700; }
.ability-detail-description { margin: 0; font-size: .82rem; line-height: 1.7; }
.ability-detail-effect { display: grid; gap: 2px; margin: 0; padding: 9px 10px; border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; background: var(--inset); }
.ability-detail-effect small { color: var(--muted); font-size: .66rem; }
.ability-detail-effect strong { font-size: .84rem; }
.ability-detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; margin: 0; }
.ability-detail-facts div { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.ability-detail-facts dt { color: var(--muted); font-size: .64rem; }
.ability-detail-facts dd { margin: 2px 0 0; font-size: .78rem; }
.ability-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.codex-level-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 6px; }
.codex-level-step { display: grid; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--card-dark); }
.codex-level-step small { color: var(--muted); font-size: .6rem; }
.codex-level-step b { font-size: .86rem; }
.codex-level-step.grown.ahead { border-color: var(--accent-border-strong); }
.codex-level-step.grown.ahead b { color: var(--gold); }
.codex-level-step.unlock.ready { border-color: var(--gold); background: rgb(var(--accent-rgb) / 14%); }
.codex-level-step.unlock.ready b { color: var(--gold-strong); }
.codex-growth-gauge-label { margin: 4px 0 0; color: var(--muted); font-size: .68rem; }
.codex-growth-note { margin: 2px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }
@media (max-width: 480px) {
  .codex-level-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .codex-level-steps .ability-cost { grid-column: 1 / -1; justify-self: start; }
}

/* ---- 固有の器・固有能力 ---- */
.unique-vessel-badge { display: inline-block; margin-left: 4px; padding: 1px 7px; border: 1px solid #a47ad8; border-radius: 999px; background: rgb(164 122 216 / 16%); color: #d8c2f5; font-size: .62rem; font-weight: 700; white-space: nowrap; }
.codex-unique-hint { margin: 0 0 4px; color: #d8c2f5; font-size: .68rem; line-height: 1.55; }

/* 能力の数値と操作を近づけ、説明だけを必要に応じて開く。 */
.ability-rule-help { min-width: 0; color: var(--muted); font-size: .75rem; }
.ability-rule-help > summary { display: flex; align-items: center; min-height: 36px; cursor: pointer; list-style: none; line-height: 1.5; }
.ability-rule-help > summary::-webkit-details-marker,
.law-ability-effect > summary::-webkit-details-marker { display: none; }
.ability-rule-help > summary::after { content: "+"; margin-left: auto; padding-left: 8px; color: var(--gold); }
.ability-rule-help[open] > summary::after { content: "−"; }
.ability-rule-help > p { margin: 0 0 6px; font-size: .78rem; line-height: 1.6; }
.ability-rule-help > summary:focus-visible,
.law-ability-effect > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.abilities-rules { margin: 0; border-block: 1px solid var(--line); }
.ability-vessel-card > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.ability-vessel-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.ability-vessel-title > strong { font-size: .85rem; }
.ability-vessel-card .ability-vessel-add { min-height: 44px; padding: 6px 9px; font-size: .76rem; white-space: nowrap; }
.ability-vessel-card .ability-chip { gap: 4px; padding: 0 4px 0 7px; }
.ability-vessel-card .ability-chip-detail { min-height: 44px; padding-block: 4px; }
.ability-vessel-card .natural-fixed .ability-chip-detail { display: flex; align-items: center; min-height: 36px; padding-block: 0; }
.ability-vessel-card .ability-chip-remove { min-width: 44px; min-height: 44px; border: 0; background: transparent; }
.ability-vessel-card .ability-vessel-actions { justify-content: end; }
.ability-detail-dialog { gap: 8px; background: linear-gradient(145deg, var(--dialog), var(--card-dark)); }
.ability-detail-description { font-size: .82rem; line-height: 1.55; }
.ability-detail-effect { padding: 7px 10px; }
.ability-detail-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-block: 6px; border-block: 1px solid var(--line); }
.ability-detail-facts div { display: flex; align-items: baseline; gap: 6px; padding: 0; border: 0; border-radius: 0; }
.ability-detail-facts dt { font-size: .7rem; }
.ability-detail-facts dd { margin: 0; font-size: .78rem; }
.ability-detail-facts .ability-detail-parts { flex-basis: 100%; align-items: start; }
.ability-detail-parts dt { flex: 0 0 auto; }
.ability-detail-parts dd { overflow-wrap: anywhere; }
.codex-growth-help > summary { min-height: 32px; }
.ability-detail-dialog .codex-level-step { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding: 7px 6px; }
.ability-detail-dialog .codex-level-step small { font-size: .66rem; }
.ability-detail-dialog .codex-growth-gauge-label { font-size: .72rem; line-height: 1.5; }
.ability-detail-dialog .codex-unlock { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.ability-detail-dialog .codex-unlock small { font-size: .75rem; line-height: 1.5; }
.ability-detail-dialog .codex-unlock button { min-height: 44px; white-space: nowrap; }
.ability-detail-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.ability-detail-actions > button { align-self: stretch; min-height: 44px; margin: 0; padding: 8px 6px; border-radius: 6px; font-size: .76rem; line-height: 1.4; }
.ability-detail-actions .wishlist-slot-actions { align-items: stretch; margin: 0; }
.ability-detail-actions .wishlist-slot-button { width: 100%; min-height: 44px; padding: 8px 6px; border-radius: 6px; font-size: .76rem; line-height: 1.4; }
.limited-abyss-core-picker-dialog { gap: 6px; }
.limited-abyss-core-picker-dialog .ability-rule-help { color: #c9bec3; }
.limited-abyss-core-picker-dialog > header > .icon-button,
.ability-detail-dialog .inventory-filter-close { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; }
.ability-detail-dialog.skill-book-card { --skill-card-accent: #dfc584; position: relative; width: min(100%, 420px); gap: 8px; padding: 18px; border: 3px double #c9ab69; border-radius: 20px; background: radial-gradient(ellipse at 50% 15%, rgb(33 74 113 / 30%), transparent 65%), linear-gradient(155deg, #101d2d, #080f18); box-shadow: 0 22px 70px rgb(0 0 0 / 65%), inset 0 0 0 5px #0c1623, inset 0 0 0 6px rgb(201 171 105 / 55%); }
.skill-book-card-header { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; gap: 6px; padding-top: 4px; }
.skill-book-card-header::before { content: ""; position: absolute; top: -17px; left: calc(50% - 7px); width: 14px; height: 14px; border: 1px solid #dfc584; background: linear-gradient(135deg, #81d1fa, #13548a 50%, #09263e); box-shadow: 0 0 0 3px #0c1623, 0 0 0 4px #aa8f55; transform: rotate(45deg); pointer-events: none; }
.skill-book-card-category { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 4px; color: var(--skill-card-accent); font-size: .7rem; letter-spacing: .06em; }
.skill-book-card-category > span { color: #a9b9c5; letter-spacing: 0; }
.skill-book-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.skill-book-card-title h2 { margin: 0; color: #f4efdc; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(1.3rem, 5vw, 1.65rem); line-height: 1.3; overflow-wrap: anywhere; }
.skill-book-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; color: #b9d1e3; font-size: .7rem; }
.skill-book-card-level, .skill-book-card-tier { padding: 2px 7px; border: 1px solid #8d774c; border-radius: 5px; color: var(--skill-card-accent); background: rgb(14 26 40 / 80%); }
.skill-book-card-owned { margin-left: auto; font-variant-numeric: tabular-nums; }
.skill-book-card-parts { display: flex; flex-wrap: wrap; gap: 4px; }
.skill-book-card-part { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding-inline: 4px; border: 1px solid var(--skill-card-accent); border-radius: 50%; color: #f0dfb4; background: rgb(0 0 0 / 18%); font-size: .72rem; line-height: 1; }
.skill-book-card-sigil { display: grid; place-items: center; min-height: 170px; border-block: 1px solid rgb(201 171 105 / 25%); background: radial-gradient(circle, rgb(28 88 139 / 28%), transparent 70%), repeating-radial-gradient(circle, transparent 0 25px, rgb(103 158 204 / 8%) 26px 27px, transparent 28px 48px); }
.skill-book-card-sigil.has-illustration { min-height: 0; background: radial-gradient(ellipse, rgb(28 88 139 / 20%), transparent 70%); }
.skill-book-card-illustration { display: block; width: min(100%, 250px); height: auto; aspect-ratio: 1; object-fit: contain; }
.skill-book-card-sigil.has-scene { border-block: 0; }
.skill-book-card-sigil.has-scene .skill-book-card-illustration { width: min(100%, 285px); aspect-ratio: 3 / 2; border-radius: 6px; }
.skill-book-card-flavor { margin: -4px 0 0; color: #b8c7d7; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: .68rem; line-height: 1.7; text-align: center; }
.skill-book-card-icon { width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 3px 9px rgb(0 0 0 / 50%)); }
.skill-book-card-cost { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-left: auto; color: #cbd9e1; font-size: .72rem; }
.skill-book-card-effect { padding: 10px; border: 1px solid rgb(201 171 105 / 38%); border-radius: 8px; background: rgb(3 11 18 / 30%); }
.skill-book-card-effect-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.skill-book-card-effect-heading > small { display: inline-block; padding: 2px 12px; border: 1px solid #8d774c; border-radius: 4px; color: var(--skill-card-accent); font-size: .74rem; }
.skill-book-card-description { margin: 6px 0 0; color: #f0f3f5; font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; }
.skill-book-card-conditions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.skill-book-card-conditions > span { padding: 3px 8px; border: 1px solid rgb(136 171 201 / 35%); border-radius: 12px; color: #afc9e0; font-size: .66rem; line-height: 1.5; }
.skill-book-card-stack-rule { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid rgb(201 171 105 / 25%); color: var(--skill-card-accent); font-size: .74rem; line-height: 1.5; }
.skill-book-card-stack-rule small { color: #b5c3cc; font-size: .64rem; }
.skill-book-card-stack-details { margin-top: 6px; }
.skill-book-card-stack-details > summary { display: list-item; min-height: 44px; margin: 0; padding: 10px 0; cursor: pointer; }
.skill-book-card-stack-details > summary small { float: right; margin-left: 6px; }
.skill-book-card-stack-details > small { color: #b5c3cc; font-size: .68rem; }
.skill-book-card-stacks { display: grid; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgb(155 187 207 / 20%); }
.skill-book-card-stacks > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: start; }
.skill-book-card-stacks > div > span { display: grid; gap: 2px; color: var(--skill-card-accent); font-size: .69rem; }
.skill-book-card-stacks small { color: #b5c3cc; font-size: .62rem; }
.skill-book-card-stacks p { margin: 0; color: #d5e6ef; font-size: .78rem; line-height: 1.6; overflow-wrap: anywhere; }
.skill-book-card-source { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; padding: 4px 0; border-block: 1px solid rgb(201 171 105 / 25%); color: #bdccd6; font-size: .72rem; line-height: 1.5; }
.skill-book-card-source > small { color: #92a6b3; font-size: .64rem; }
.skill-book-card-source details { flex-basis: 100%; font-size: .66rem; }
.skill-book-card-source summary { min-height: 32px; cursor: pointer; color: #a5c8db; }
.skill-book-card-source details p { margin: 4px 0; overflow-wrap: anywhere; }
.skill-book-card .ability-detail-actions:empty { display: none; }
.skill-book-card-collection-status { display:flex; flex-wrap:wrap; gap:4px 10px; margin:0; color:#e7cf9b; font-size:.7rem; }
.skill-book-card-collection-status > small { margin-left:auto; color:#cbd9e4; }
.skill-book-card.is-alternate-art { --skill-card-accent:#ffe0a0; border-color:#ffe4a4; background:#101824; box-shadow:0 22px 70px #000a,inset 0 0 0 5px #101524,inset 0 0 0 6px #d3ab68,inset 0 2px 2px #fff0ba80,inset 0 -2px 2px #493019,0 0 20px #ffde8e25; }
.skill-book-card.is-alternate-art::before { content:""; position:absolute; inset:6px; pointer-events:none; z-index:3; border:1px solid transparent; border-radius:14px; background:linear-gradient(125deg,#ffe4a6 5%,#75d0e5 24%,#d9adf0 43%,#ffefa3 62%,#f9c49d 77%,#e3efff) border-box; mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0); mask-composite:exclude; }
.skill-book-card.is-alternate-art::after { content:""; position:absolute; inset:7px; border-radius:12px; pointer-events:none; z-index:1; background:radial-gradient(ellipse 9px 1px at 8% 9%,#fff1bf9c,transparent),radial-gradient(ellipse 1px 9px at 8% 9%,#fff1bf9c,transparent),radial-gradient(ellipse 6px 1px at 92% 12%,#dbedff85,transparent),radial-gradient(ellipse 1px 6px at 92% 12%,#dbedff85,transparent),linear-gradient(115deg,transparent 18%,#e0f5ff0a 19% 26%,transparent 27%),linear-gradient(180deg,#071120d9 0,#07112055 19%,transparent 29%,transparent 53%,#08101b85 72%,#08101bb0 100%); }
.skill-book-card.is-alternate-art > :not(.skill-book-card-full-art) { position:relative; z-index:2; }
.skill-book-card.is-alternate-art > .skill-book-card-full-art { position:absolute; inset:7px; width:calc(100% - 14px); height:calc(100% - 14px); object-fit:cover; border-radius:12px; z-index:0; pointer-events:none; }
.skill-book-card-sigil.has-full-art { height:190px; border:0; background:none; }
/* A separate film preserves the illustration and keeps foil below readable text. */
.skill-book-card.is-alternate-art { --foil-x:50%; --foil-y:45%; --foil-angle:112deg; --foil-offset-x:50%; --foil-offset-y:50%; --foil-tilt-x:0deg; --foil-tilt-y:0deg; isolation:isolate; transform:perspective(1000px) rotateX(var(--foil-tilt-x)) rotateY(var(--foil-tilt-y)); transition:transform 420ms ease; }
.skill-book-card.is-alternate-art.is-foil-active { transition:transform 90ms ease-out; }
.skill-book-card.is-alternate-art::before { background:linear-gradient(var(--foil-angle),#fff0bc 5%,#75e4ed 24%,#dab2ff 43%,#ffefa3 62%,#f5a8d8 77%,#e3efff) border-box; background-size:220% 220%; background-position:var(--foil-offset-x) var(--foil-offset-y); }
.skill-book-card.is-alternate-art > .skill-book-card-foil { position:absolute; inset:7px; z-index:1; overflow:hidden; border-radius:12px; pointer-events:none; mix-blend-mode:screen; opacity:.55; contain:paint; background-image:url('/images/skill-books/rare-hologram-film-v1.webp'); background-size:145% 145%; background-position:var(--foil-offset-x) var(--foil-offset-y); mask-image:radial-gradient(ellipse 46% 68% at 0% 32%,#000 12%,#000a 47%,transparent 77%),radial-gradient(ellipse 41% 70% at 100% 44%,#000 9%,#000b 41%,transparent 82%),linear-gradient(180deg,#0009 0%,#0007 22%,#0005 35%,#0009 52%,#0005 68%,#0004 85%,#000b 100%); }
.skill-book-card-foil::before, .skill-book-card-foil::after { content:""; position:absolute; inset:0; pointer-events:none; }
.skill-book-card-foil::before { background-image:repeating-linear-gradient(var(--foil-angle),transparent 0% 14%,#ff8ddd66 16%,#a68cffcc 17.5%,#55e5ffdd 19%,#c1fff8ee 19.5%,#fff2accc 20.5%,#ffb5df99 22%,transparent 25% 40%),radial-gradient(ellipse at var(--foil-x) var(--foil-y),#fffbe63d,transparent 54%); background-size:180% 180%,100% 100%; background-position:var(--foil-offset-x) var(--foil-offset-y),center; }
.skill-book-card-foil::after { opacity:.75; background-image:radial-gradient(ellipse 10px 1px at 11% 18%,#fff6d9,transparent),radial-gradient(ellipse 1px 10px at 11% 18%,#fff6d9,transparent),radial-gradient(ellipse 8px 1px at 88% 39%,#d9f8ff,transparent),radial-gradient(ellipse 1px 8px at 88% 39%,#d9f8ff,transparent),radial-gradient(ellipse 7px 1px at 7% 79%,#fff1c1,transparent),radial-gradient(ellipse 1px 7px at 7% 79%,#fff1c1,transparent),radial-gradient(circle,#ffecbcb0 .6px,transparent 1.1px),radial-gradient(circle,#9ee5ff9c .5px,transparent 1px),radial-gradient(circle,#f7b6ffa8 .5px,transparent 1px); background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,13px 19px,23px 17px,19px 29px; background-position:center,center,center,center,center,center,var(--foil-offset-x) var(--foil-offset-y),var(--foil-offset-y) var(--foil-offset-x),var(--foil-offset-x) var(--foil-offset-y); mask-image:radial-gradient(ellipse at var(--foil-x) var(--foil-y),#000 9%,#0008 40%,transparent 76%); }
.skill-book-card.is-alternate-art.is-foil-active > .skill-book-card-foil { opacity:.85; }
.skill-book-card.is-alternate-art:not(.pair-technique-card) .skill-book-card-sigil.has-full-art { touch-action:none; }
@media (prefers-reduced-motion:reduce) {
  .skill-book-card.is-alternate-art { transform:none; transition:none; }
}
.is-alternate-art .skill-book-card-effect { padding:10px; border-color:transparent; background:transparent; border-radius:0; }
.is-alternate-art .skill-book-card-effect-heading > small { padding:0; border:0; color:#ffe6aa; font-weight:700; }
.is-alternate-art .skill-book-card-effect :is(p,small,summary,span), .is-alternate-art .skill-book-card-source, .is-alternate-art .skill-book-card-flavor, .is-alternate-art .skill-book-card-collection-status { text-shadow:-1px -1px 0 #050a13,1px -1px 0 #050a13,-1px 1px 0 #050a13,1px 1px 0 #050a13,0 2px 4px #000,0 0 8px #000; }
.is-alternate-art .skill-book-card-description { color:#fff; font-weight:650; }
.is-alternate-art .skill-book-card-conditions > span { background:#07111b45; border-color:#cfdfef55; color:#e1eef8; }
.is-alternate-art .skill-book-card-stack-rule { border-color:#e7cf9b55; color:#ffe3a1; }
.is-alternate-art .skill-book-card-stack-rule small { color:#e0eaf1; }
.is-alternate-art .skill-book-card-stack-details[open] { background:linear-gradient(90deg,#06101b99,#06101b66); border-radius:4px; }
.is-alternate-art .skill-book-card-source { color:#ebeff2; }
.is-alternate-art .skill-book-card-source > small { color:#cfdae1; }
.skill-book-card-acquired-stamp { margin:2px 0 0; padding:3px 2px 0; color:#d9c69e; font-size:.6rem; line-height:1.5; letter-spacing:.08em; font-variant-numeric:tabular-nums; text-align:right; text-shadow:0 1px 2px #000,0 -1px 0 #35291e; }
.library-view-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.library-view-tabs > button { flex:1; min-height:44px; padding:8px 12px; border:1px solid #445562; border-radius:7px; background:#101c28; color:#b8cbd8; font-size:.82rem; }
.library-view-tabs > button[aria-pressed="true"] { border-color:#b7995b; background:#2c291e; color:#ffe0a4; }
.skill-art-collection-lead { margin:0; color:#adbfcc; font-size:.78rem; line-height:1.6; }
.skill-art-collection-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); gap:12px; }
.skill-art-collection-entry { display:grid; min-width:0; gap:0; padding:5px; overflow:hidden; border:1px solid #a38a56; border-radius:10px; background:linear-gradient(145deg,#172738,#09121c); text-align:left; color:#e8e0cd; }
.skill-art-collection-entry.is-alternate { border-color:#e9cb84; box-shadow:inset 0 0 0 1px #7db6c744,0 0 12px #d7b87822; }
.skill-art-collection-picture { position:relative; display:grid; place-items:center; overflow:hidden; aspect-ratio:2 / 3; border-radius:6px; background:radial-gradient(ellipse,#263e55,#090f18); }
.skill-art-collection-picture > img { width:100%; height:100%; object-fit:contain; }
.is-alternate .skill-art-collection-picture > img { object-fit:cover; }
.skill-art-uncollected-mark { color:#8197aa; font-size:3rem; font-weight:600; line-height:1; }
.skill-art-collection-picture > small { position:absolute; right:5px; bottom:6px; padding:2px 5px; border:1px solid #9a815480; border-radius:4px; background:#060e1ad9; color:#e1d0a8; font-size:.62rem; }
.skill-art-collection-copy { display:grid; gap:3px; padding:8px 4px 4px; min-width:0; }
.skill-art-collection-copy > strong { overflow-wrap:anywhere; font-size:.8rem; line-height:1.4; }
.skill-art-collection-copy > small { color:#adbfcc; font-size:.64rem; }
.catalog-screen .catalog-stack-controls { display:grid; gap:var(--ga-space-2); margin-block:var(--ga-space-3); }
.catalog-screen .catalog-stack-controls > strong { font-size:var(--ga-font-body); }
.catalog-screen .catalog-stack-controls p { margin:0; }
.catalog-screen .catalog-stack-label { color:var(--text); font-size:var(--ga-font-note); line-height:1.5; overflow-wrap:anywhere; }
.skill-art-collection-entry:focus-visible { outline:2px solid #9adaf2; outline-offset:3px; }
.law-core-option { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 7px; padding: 6px 8px; align-items: start; }
.law-core-option-mark { padding-top: 5px; }
.law-core-option-mark small { font-size: .65rem; }
.law-core-option-copy { gap: 0; }
.law-ability-effect > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 36px; list-style: none; cursor: pointer; }
.law-ability-effect strong { font-size: .82rem; }
.law-ability-effect .ability-cost { margin: 0; font-size: .68rem; }
.ability-info-mark { color: #e4c390; font-size: .9rem; }
.law-ability-effect[open] .ability-info-mark { color: #fff0ce; }
.law-core-option-copy p { padding: 2px 0 6px; font-size: .8rem; line-height: 1.55; }
.law-core-option-copy > small { display: block; font-size: .7rem; line-height: 1.4; overflow-wrap: anywhere; }
.law-core-option > button { grid-column: auto; align-self: start; min-width: 70px; min-height: 44px; padding: 7px; font-size: .76rem; }
@media (max-width: 360px) {
  .ability-detail-dialog { padding: 12px; }
  .ability-detail-dialog.skill-book-card { padding: 14px 12px; gap: 6px; }
  .skill-book-card-illustration { width: min(100%, 220px); }
  .ability-detail-dialog .codex-level-step { display: grid; gap: 1px; }
  .ability-detail-actions { grid-template-columns: 1fr; }
  .limited-abyss-core-picker-dialog { padding: 12px; }
  .law-core-option { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 5px; }
}

@media (max-height: 680px) {
  .ability-detail-dialog.skill-book-card { padding: 14px 12px; gap: 6px; }
  .skill-book-card-sigil.has-scene .skill-book-card-illustration { width: min(100%, 210px); }
  .skill-book-card-sigil.has-full-art { height:140px; }
}
@media (max-height: 600px) {
  .skill-book-card-sigil.has-scene .skill-book-card-illustration { width: min(100%, 180px); }
  .skill-book-card-sigil.has-full-art { height:112px; }
}
/* Keep long rare-card explanations visible on narrow, short screens. */
@media (max-width: 360px) and (max-height: 600px) {
  .ability-detail-dialog.skill-book-card.is-alternate-art { display:flex; flex-direction:column; }
  .skill-book-card.is-alternate-art > :not(.skill-book-card-sigil) { flex-shrink:0; }
  .skill-book-card.is-alternate-art > .skill-book-card-sigil.has-full-art { flex:0 1 112px; min-height:60px; }
  .skill-book-card.is-alternate-art .skill-book-card-description { font-size:.84rem; }
}

/* Home sanctuary: reference composition, scoped to the authenticated home. */
body:has(.home-screen) { background: radial-gradient(ellipse at 50% 60%, #0c1c27, #060d13 85%); }
.home-screen { gap: 10px; color: #ecece7; }
.home-screen .home-party-stage { --party-offset: clamp(100px, 24vw, 215px); width: calc(100% + 36px); height: clamp(240px, 48vw, 460px); margin: -20px -18px 0; border: 0; border-radius: 0; box-shadow: none; background: #0a1119; }
.home-screen .home-party-stage .equipment-party-background { object-position: center 60%; opacity: 1; }
.home-screen .home-party-stage::after { background: linear-gradient(90deg, rgb(3 9 15 / 42%), transparent 55%, rgb(3 9 15 / 10%)), linear-gradient(0deg, #081219 0%, transparent 15%, transparent 80%, rgb(3 9 15 / 12%)); }
.home-screen .home-party-stage::before { bottom: 12px; }
.home-screen .home-party-heading { top: 26px; left: 30px; gap: 0; }
.home-screen .home-brand { margin: 0; color: #f3e7c6; font-family: Georgia, "Yu Mincho", serif; font-size: clamp(31px, 5.8vw, 60px); font-weight: 400; font-variant: small-caps; letter-spacing: -.055em; line-height: 1.2; text-shadow: 0 2px 9px #000; }
.home-brand::first-letter { font-size: 1.28em; }
.home-brand-motto { margin: 9px 0 0 75px; color: #eedfc2; font-family: "Yu Mincho", serif; font-size: clamp(12px, 1.8vw, 19px); letter-spacing: .2em; }
.home-brand-story { margin: 20px 0 0 3px; color: #dfd9cc; font-family: "Yu Mincho", serif; font-size: clamp(11px, 1.8vw, 17px); line-height: 1.6; letter-spacing: .09em; }
.home-screen .home-party-stage .home-party-member { bottom: 10px; width: clamp(112px, 24vw, 235px); height: clamp(130px, 27vw, 255px); }
.home-screen .home-party-stage .home-party-member.position-left, .home-screen .home-party-stage .home-party-member.position-right { opacity: 1; --party-transform: translateX(calc(-50% + var(--party-offset))) translateY(4px) scale(.86); }
.home-screen .home-party-stage .home-party-member.position-left { --party-transform: translateX(calc(-50% - var(--party-offset))) translateY(4px) scale(.86); }
.home-screen .home-party-stage .home-party-arrow { top: 57%; width: 44px; height: 48px; border-color: rgb(216 186 125 / 45%); background: rgb(5 9 11 / 80%); }
.home-screen .home-party-stage .home-party-arrow-left { left: 12px; }
.home-screen .home-party-stage .home-party-arrow-right { right: 12px; }
.home-party-invitation { position: absolute; z-index: 4; right: 30px; bottom: 27px; margin: 0; font-family: "Yu Mincho", serif; font-size: clamp(10px, 1.7vw, 17px); line-height: 1.6; letter-spacing: .12em; text-shadow: 0 2px 5px #000; pointer-events: none; }
.home-screen .home-party-caption { width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.home-screen .home-party-stage .profile-background-trigger { top: auto; right: 12px; bottom: 7px; min-height: 24px; padding: 2px 5px; border: 0; background: rgb(4 10 14 / 48%); opacity: .65; }
.home-screen .profile-background-trigger span { display: none; }
.home-screen .profile-background-trigger strong { font-size: 9px; }
.home-screen .home-hero { display: grid; grid-template-columns: 1.12fr 1fr; padding: 0; border: 1px solid #3c4d57; border-radius: 7px; background: linear-gradient(90deg, rgb(5 14 21 / 83%), rgb(5 14 21 / 27%) 46%, #07131c 60%), url("/images/background/home-sanctuary-v1.webp") left 60% / 65% auto no-repeat; box-shadow: inset 0 1px rgb(255 255 255 / 3%); }
.home-current-location { min-width: 0; padding: 20px 24px; text-shadow: 0 2px 8px #000; }
.home-location-label { margin: 0 0 6px; color: #c3baa6; font-family: Georgia, serif; font-size: 10px; letter-spacing: .28em; }
.home-location-label > span { margin-right: 7px; color: #c59b49; font-size: 19px; }
.home-current-location h2 { margin: 0 0 14px; overflow: hidden; color: #f8e9bf; font-family: "Yu Mincho", serif; font-size: clamp(18px, 3.9vw, 38px); font-weight: 600; letter-spacing: .015em; text-overflow: ellipsis; white-space: nowrap; }
.home-current-location h2 > strong { font-family: Georgia, "Yu Mincho", serif; font-size: 1.65em; font-weight: 400; }
.home-current-location > p:last-child { margin: 0; color: #c2c8ca; font-family: "Yu Mincho", serif; font-size: clamp(10px, 1.8vw, 15px); line-height: 1.7; }
.home-screen .home-command-panel { display: flex; align-items: center; padding: 22px 20px; border: 0; border-left: 1px solid rgb(131 160 176 / 18%); border-radius: 0; background: rgb(5 15 23 / 68%); box-shadow: none; }
.home-screen .home-hero-copy { width: 100%; }
.home-screen .home-command-panel::before, .home-screen .home-command-panel::after, .home-screen .home-hero::before, .home-screen .home-hero::after { display: none; }
.home-next-label { color: #6ca4b8 !important; font-family: Georgia, serif; font-size: 10px !important; letter-spacing: .25em; margin-bottom: 7px !important; }
.home-screen .home-hero-copy h2 { margin: 0 0 5px; color: #f8f3e8; font-family: "Yu Mincho", serif; font-size: clamp(14px, 2.8vw, 30px); letter-spacing: .03em; white-space: nowrap; }
.home-screen .home-hero-copy h2 > span { color: #e3c170; font-size: .6em; }
.home-screen .home-hero-copy > p:not(.home-next-label):not(.home-alert) { margin-bottom: 16px; color: #aebdc4; font-family: "Yu Mincho", serif; font-size: clamp(9px, 1.65vw, 14px); }
.home-screen .home-hero-actions { display: block; }
.home-screen .home-depart-button { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; width: 100%; min-height: 60px; gap: 9px; padding: 9px 15px; border: 1px solid #d4b35a; border-radius: 8px; background: linear-gradient(115deg, #ac842c, #896023 68%, #966f29); box-shadow: inset 0 2px rgb(255 240 174 / 32%), inset 0 -2px rgb(55 31 7 / 42%), 0 5px 15px rgb(0 0 0 / 25%); color: #fff8e3; font-family: "Yu Mincho", serif; text-shadow: 0 2px 3px rgb(55 34 10 / 75%); }
.home-screen .home-depart-button:hover { background: linear-gradient(115deg, #bf973b, #9b742e); }
.home-screen .home-depart-button .button-icon { width: 34px; height: 34px; }
.home-screen .home-depart-button strong { font-size: clamp(15px, 2.7vw, 29px); font-weight: 600; }
.home-screen .home-depart-button > span { font-size: 32px; font-weight: 300; }
.home-screen .home-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.home-screen .home-shortcut { position: relative; display: flex; min-width: 0; min-height: 160px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 15px 3px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.home-screen .home-shortcut::before { position: absolute; top: 15px; right: 0; bottom: 13px; width: 1px; background: linear-gradient(0deg, transparent, #2d434e 30%, #2d434e 70%, transparent); content: ""; }
.home-screen .home-shortcut:nth-child(4n)::before { display: none; }
.home-screen .home-shortcut:nth-child(n+5) { border-top: 1px solid #283b46; }
.home-screen .home-shortcut::after { display: none; }
.home-screen .home-shortcut:hover { background: radial-gradient(ellipse at 50% 45%, rgb(71 129 153 / 13%), transparent 75%); }
.home-facility-icon { display: grid; width: 74px; height: 74px; place-items: center; border: 1px solid #a48246; border-radius: 50%; background: radial-gradient(circle at 45% 35%, #102534, #050b12 76%); box-shadow: inset 0 0 17px rgb(0 0 0 / 40%); }
.home-screen .home-facility-icon img { width: 57px; height: 57px; filter: drop-shadow(0 3px 3px #000); object-fit: contain; }
.home-screen .home-shortcut-copy { display: grid; gap: 3px; text-align: center; }
.home-screen .home-shortcut-copy strong { color: #f4edda; font-family: "Yu Mincho", serif; font-size: 22px; letter-spacing: .06em; }
.home-screen .home-shortcut-copy small { color: #aab9c1; font-family: "Yu Mincho", serif; font-size: 13px; letter-spacing: 0; }
.home-screen .home-shortcut > i { position: absolute; top: auto; right: 12px; bottom: 43px; color: #7f939e; font-size: 23px; font-style: normal; }
.home-facility-notice { position: absolute; top: 11px; right: 15px; padding: 2px 5px; border-radius: 8px; background: #673956; color: #ffd5e9; font-size: 10px; }
.home-screen .home-law-gate { grid-template-columns: 94px minmax(0, 1fr) auto; min-height: 106px; gap: 15px; padding: 9px 16px 9px 6px; border-color: #623a57; border-radius: 7px; background: radial-gradient(ellipse at 0% 50%, rgb(86 28 102 / 40%), transparent 52%), linear-gradient(110deg, #180d21, #160e1a 75%, #1a111d); }
.home-screen .home-law-gate-mark { width: 94px; height: 90px; border: 0; background: transparent; box-shadow: none; }
.home-screen .home-law-gate-mark::before { display: none; }
.home-screen .home-law-gate-icon { width: 100%; height: 100%; }
.home-screen .home-law-gate-copy > small { color: #d474a4; font-family: Georgia, serif; font-size: 10px; letter-spacing: .32em; }
.home-screen .home-law-gate-copy > strong { color: #e6d3f4; font-size: 30px; }
.home-screen .home-law-gate-copy > em { font-family: "Yu Mincho", serif; font-size: 13px; }
.home-screen .home-law-gate-meta { grid-column: auto; grid-template-columns: 1fr; min-width: 0; gap: 7px; padding: 0 14px; border-top: 0; }
.home-screen .home-law-gate-meta > b { padding: 6px 11px; border: 1px solid rgb(157 37 105 / 65%); border-radius: 30px; background: #3b1530; color: #f38cc1; font-size: 12px; }
.home-screen .home-law-gate-meta > small { color: #b9a3b5; font-size: 10px; }
.home-screen .home-law-gate-meta > em { position: absolute; right: -8px; top: 14px; font-size: 0; }
.home-screen .home-law-gate-meta > em span { font-size: 23px; }
.home-screen > .home-overview-grid { gap: 12px; }
.home-screen > .home-overview-grid .home-overview-card { min-height: 180px; padding: 18px; border-radius: 7px; box-shadow: none; }
.home-screen > .home-overview-grid .home-card-heading { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; margin-bottom: 15px; padding: 0; border: 0; }
.home-screen > .home-overview-grid .home-card-heading > span:first-child { width: 44px; height: 44px; border: 1px solid rgb(92 155 186 / 27%); background: rgb(1 11 17 / 35%); }
.home-screen > .home-overview-grid .home-card-heading > span > img { width: 36px; height: 36px; }
.home-screen > .home-overview-grid .home-card-heading .eyebrow { color: #73bad6; font-family: Georgia, serif; font-size: 11px; letter-spacing: .11em; }
.home-screen > .home-overview-grid .home-card-heading h2 { color: #f1edf2; font-size: 22px; }
.home-screen > .home-overview-grid .home-card-heading > b { grid-column: auto; margin: 0; padding: 3px 7px; border: 1px solid rgb(120 153 173 / 22%); border-radius: 20px; color: #d1dce2; font-family: "Yu Mincho", serif; font-size: 12px; font-weight: 400; }
.home-screen > .home-overview-grid .home-card-heading .eyebrow { display: block; }
.home-screen .home-exploration-card { background: radial-gradient(ellipse at 85% 60%, rgb(26 75 104 / 32%), transparent 60%), linear-gradient(135deg, #092334, #06121b); border-color: #366c87; }
.home-screen .home-arena-card { background: radial-gradient(ellipse at 65% 20%, rgb(96 41 45 / 23%), transparent 75%), linear-gradient(130deg, #221316, #160f14); border-color: #775049; }
.home-screen .home-arena-card .home-card-heading .eyebrow { color: #e5d9d6; }
.home-screen > .home-overview-grid .home-floor-progress { grid-template-columns: 1fr; gap: 5px; margin: 5px 0 8px; }
.home-screen > .home-overview-grid .home-floor-meter { height: 12px; }
.home-screen > .home-overview-grid .home-floor-meter::-webkit-progress-value { background: linear-gradient(90deg, #277c93, #52cae4); }
.home-screen > .home-overview-grid .home-floor-meter::-moz-progress-bar { background: linear-gradient(90deg, #277c93, #52cae4); }
.home-screen > .home-overview-grid .home-floor-progress small { text-align: right; color: #d6e4e9; font-family: Georgia, serif; font-size: 17px; }
.home-screen > .home-overview-grid .home-detail-list { margin: 0; gap: 4px; }
.home-screen > .home-overview-grid .home-exploration-card .home-detail-list > div { display: grid; gap: 1px; padding: 0; border: 0; }
.home-screen > .home-overview-grid .home-exploration-card .home-detail-list > div:nth-child(2) { display: none; }
.home-screen > .home-overview-grid .home-detail-list dt { color: #8db0c4; font-size: 12px; }
.home-screen > .home-overview-grid .home-detail-list dd { color: #ecf1f5; font-family: "Yu Mincho", serif; font-size: 17px; }
.home-screen > .home-overview-grid .home-card-link { position: absolute; z-index: 3; inset: 0; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; color: transparent; font-size: 0; }
.home-screen > .home-overview-grid .home-card-link > span { color: transparent; }
.home-screen > .home-overview-grid .home-card-link:focus-visible { outline: 2px solid #80cbe5; outline-offset: -3px; }
.home-screen .home-arena-ratings { gap: 10px; margin: 9px 0 0; }
.home-screen .home-arena-ratings > div { padding: 9px 12px; border-color: #4e363b; border-radius: 6px; background: rgb(12 7 10 / 35%); }
.home-screen .home-arena-ratings span { color: #b8b4bc; font-family: "Yu Mincho", serif; font-size: 11px; }
.home-screen .home-arena-ratings strong { color: #f2edf0; font-size: 29px; font-weight: 400; }
.home-arena-extra { margin-top: 6px; color: #ba9ea5; font-size: 10px; }
.home-arena-extra > summary { min-height: 24px; cursor: pointer; }
.home-screen .home-secondary-info { border-top: 1px solid #263946; color: #97b0bf; }
.home-secondary-info > summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; cursor: pointer; font-size: 11px; list-style: none; }
.home-secondary-info > summary::-webkit-details-marker { display: none; }
.home-secondary-content { display: grid; gap: 12px; padding: 3px 0 12px; }
.home-training-link { display: flex; min-height: 54px; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid #314652; background: #101d25; text-align: left; }
.home-training-link img { width: 36px; height: 36px; }
.home-training-link > span:nth-child(2) { display: grid; gap: 3px; flex: 1; }
.home-training-link small { color: #9db3c0; font-size: 11px; }
@media (max-width: 700px) {
  .home-screen { gap: 7px; }
  .home-screen .home-party-stage { --party-offset: clamp(83px, 24vw, 164px); width: calc(100% + 24px); height: clamp(195px, 50vw, 340px); margin: -15px -12px 0; }
  .home-screen .home-party-heading { top: 13px; left: 20px; }
  .home-screen .home-brand { font-size: clamp(30px, 6.4vw, 43px); }
  .home-brand-motto { margin: 5px 0 0 32px; font-size: 11px; }
  .home-brand-story { margin-top: 11px; font-size: 10px; }
  .home-screen .home-party-stage .home-party-member { bottom: 8px; width: clamp(105px, 23.5vw, 164px); height: clamp(118px, 26vw, 180px); }
  .home-screen .home-party-stage .home-party-arrow { width: 32px; height: 44px; font-size: 23px; }
  .home-screen .home-party-stage .home-party-arrow-left { left: 8px; }
  .home-screen .home-party-stage .home-party-arrow-right { right: 8px; }
  .home-party-invitation { right: 13px; bottom: 29px; font-size: 8px; letter-spacing: .05em; }
  .home-current-location { padding: 9px 11px 11px; }
  .home-location-label { font-size: 7px; letter-spacing: .2em; margin-bottom: 4px; }
  .home-location-label > span { font-size: 12px; margin-right: 2px; }
  .home-current-location h2 { font-size: clamp(16px, 3.9vw, 24px); margin-bottom: 8px; }
  .home-current-location > p:last-child { font-size: 9px; }
  .home-screen .home-command-panel { padding: 11px 9px; }
  .home-next-label { font-size: 7px !important; margin-bottom: 5px !important; }
  .home-screen .home-hero-copy h2 { font-size: clamp(14px, 3.1vw, 21px); }
  .home-screen .home-hero-copy > p:not(.home-next-label):not(.home-alert) { margin-bottom: 10px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .home-screen .home-depart-button { grid-template-columns: 24px minmax(0, 1fr) 9px; min-height: 44px; gap: 4px; padding: 5px 7px; border-radius: 5px; }
  .home-screen .home-depart-button .button-icon { width: 24px; height: 24px; }
  .home-screen .home-depart-button strong { font-size: clamp(13px, 3.5vw, 22px); white-space: nowrap; }
  .home-screen .home-depart-button > span { font-size: 23px; }
  .home-screen .home-shortcuts { padding: 0 3px; }
  .home-screen .home-shortcut { min-height: 80px; gap: 3px; padding: 5px 0; }
  .home-facility-icon { width: 42px; height: 42px; }
  .home-screen .home-facility-icon img { width: 34px; height: 34px; }
  .home-screen .home-shortcut-copy { gap: 2px; }
  .home-screen .home-shortcut-copy strong { font-size: clamp(12px, 3.1vw, 18px); line-height: 1.25; }
  .home-screen .home-shortcut-copy small { font-size: clamp(7px, 1.9vw, 11px); line-height: 1.4; white-space: nowrap; }
  .home-screen .home-shortcut > i { right: 4px; bottom: 24px; font-size: 14px; }
  .home-facility-notice { top: 4px; right: 6px; font-size: 8px; }
  .home-screen .home-law-gate { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 7px; min-height: 64px; padding: 5px 12px 5px 3px; }
  .home-screen .home-law-gate-mark { width: 51px; height: 51px; }
  .home-screen .home-law-gate-copy > small { font-size: 6px; letter-spacing: .24em; }
  .home-screen .home-law-gate-copy > strong { font-size: clamp(18px, 4.6vw, 24px); }
  .home-screen .home-law-gate-copy > em { font-size: 8px; }
  .home-screen .home-law-gate-meta { gap: 5px; padding: 0 7px; }
  .home-screen .home-law-gate-meta > b { padding: 4px 6px; font-size: 8px; white-space: nowrap; }
  .home-screen .home-law-gate-meta > b > i { width: 5px; height: 5px; }
  .home-screen .home-law-gate-meta > small { font-size: 6px; }
  .home-screen .home-law-gate-meta > em { top: 7px; right: -5px; }
  .home-screen .home-law-gate-meta > em span { font-size: 18px; }
  .home-screen > .home-overview-grid { gap: 7px; }
  .home-screen > .home-overview-grid .home-overview-card { min-height: 110px; padding: 10px 9px 9px; }
  .home-screen > .home-overview-grid .home-card-heading { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px; margin-bottom: 11px; }
  .home-screen > .home-overview-grid .home-card-heading > span:first-child { width: 26px; height: 26px; }
  .home-screen > .home-overview-grid .home-card-heading > span > img { width: 22px; height: 22px; }
  .home-screen > .home-overview-grid .home-card-heading .eyebrow { font-size: 6px; }
  .home-screen > .home-overview-grid .home-card-heading h2 { font-size: clamp(13px, 3.3vw, 20px); }
  .home-screen > .home-overview-grid .home-card-heading > b { padding: 3px 4px; font-size: 8px; }
  .home-screen > .home-overview-grid .home-floor-meter { height: 8px; }
  .home-screen > .home-overview-grid .home-floor-progress small { font-size: 12px; }
  .home-screen > .home-overview-grid .home-detail-list dt { font-size: 8px; }
  .home-screen > .home-overview-grid .home-detail-list dd { font-size: 12px; }
  .home-screen > .home-overview-grid .home-card-link { min-height: 44px; font-size: 0; }
  .home-screen .home-arena-ratings { gap: 5px; margin-top: 3px; }
  .home-screen .home-arena-ratings > div { padding: 7px 5px; }
  .home-screen .home-arena-ratings span { font-size: 7px; }
  .home-screen .home-arena-ratings strong { font-size: clamp(17px, 4.7vw, 26px); }
  .home-arena-extra { font-size: 8px; margin-top: 4px; }
}
@media (max-width: 359px) {
  .home-screen .home-brand { font-size: 28px; }
  .home-screen .home-hero { grid-template-columns: 1fr 1fr; }
  .home-current-location { padding: 9px 8px; }
  .home-current-location h2 { font-size: 14px; }
  .home-screen .home-hero-copy h2 { font-size: 13px; }
  .home-screen .home-depart-button strong { font-size: 12px; }
  .home-screen .home-law-gate { grid-template-columns: 45px minmax(0, 1fr) auto; gap: 4px; }
  .home-screen .home-law-gate-mark { width: 45px; height: 48px; }
  .home-screen .home-law-gate-copy > em { white-space: normal; font-size: 7px; }
  .home-screen .home-law-gate-meta > b { font-size: 7px; }
  .home-screen > .home-overview-grid .home-card-heading { grid-template-columns: 23px minmax(0, 1fr); }
  .home-screen > .home-overview-grid .home-card-heading > b { grid-column: 2; justify-self: start; }
}

/* The same effect icon follows each skill through battle, workshop and the codex. */
.skill-effect-icon { display: inline-block; flex: 0 0 22px; width: 22px; height: 22px; margin-right: 5px; vertical-align: middle; object-fit: contain; }
.ability-picker-type-icon:has(.skill-effect-icon) { flex-basis: 22px; }
.ability-picker-type-icon .skill-effect-icon { margin-right: 0; }

/* Pair cards share the full-art skill-card frame and accessible dialog behavior. */
.pair-technique-card .skill-book-card-tier { white-space: normal; }
.pair-technique-effect-description { margin: 8px 0; font-size: 13px; line-height: 1.6; }
.pair-art-discovery-toast { position: fixed; z-index: 130; left: 50%; bottom: max(80px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(360px, calc(100vw - 24px)); padding: 10px; border: 1px solid #dfbf78; border-radius: 12px; background: #141b25f2; color: #fff5d8; box-shadow: 0 8px 32px #0009; pointer-events: none; }
.pair-art-discovery-toast img { width: 66px; height: 99px; object-fit: cover; border-radius: 7px; }
.pair-art-discovery-toast span { display: grid; gap: 5px; }
.pair-art-discovery-toast small { font-size: 11px; color: #dfcda8; }
.pair-item-target { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.pair-item-target select { flex: 1; min-width: 0; }

/* 501〜700F: 無明の監獄と星骸の海の専用背景。 */
.battle-shell.battle-zone-51 { --battle-zone-image: url("/images/background/battle-51-sealed-prison-gate-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1"); }
.battle-shell.battle-zone-52 { --battle-zone-image: url("/images/background/battle-52-chain-shadow-street-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1"); }
.battle-shell.battle-zone-53 { --battle-zone-image: url("/images/background/battle-53-silent-sealed-archive-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1"); }
.battle-shell.battle-zone-54 { --battle-zone-image: url("/images/background/battle-54-ash-lamp-ward-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1"); }
.battle-shell.battle-zone-55 { --battle-zone-image: url("/images/background/battle-55-miasma-chain-drain-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1"); }
.battle-shell.battle-zone-56 { --battle-zone-image: url("/images/background/battle-56-inverted-chain-bridge-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1"); }
.battle-shell.battle-zone-57 { --battle-zone-image: url("/images/background/battle-57-nameless-detention-hall-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1"); }
.battle-shell.battle-zone-58 { --battle-zone-image: url("/images/background/battle-58-black-wax-tribunal-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1"); }
.battle-shell.battle-zone-59 { --battle-zone-image: url("/images/background/battle-59-seven-chain-sealing-hall-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1"); }
.battle-shell.battle-zone-60 { --battle-zone-image: url("/images/background/battle-60-darkness-warden-throne-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1"); }
.battle-shell.battle-zone-61 { --battle-zone-image: url("/images/background/battle-61-stardust-shore-gate-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1"); }
.battle-shell.battle-zone-62 { --battle-zone-image: url("/images/background/battle-62-drifting-remains-reef-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1"); }
.battle-shell.battle-zone-63 { --battle-zone-image: url("/images/background/battle-63-faint-light-sail-tomb-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1"); }
.battle-shell.battle-zone-64 { --battle-zone-image: url("/images/background/battle-64-heavy-star-fall-hollow-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1"); }
.battle-shell.battle-zone-65 { --battle-zone-image: url("/images/background/battle-65-white-bone-tide-path-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1"); }
.battle-shell.battle-zone-66 { --battle-zone-image: url("/images/background/battle-66-aurora-star-veil-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1"); }
.battle-shell.battle-zone-67 { --battle-zone-image: url("/images/background/battle-67-broken-moon-observation-ring-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1"); }
.battle-shell.battle-zone-68 { --battle-zone-image: url("/images/background/battle-68-star-core-coral-garden-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1"); }
.battle-shell.battle-zone-69 { --battle-zone-image: url("/images/background/battle-69-void-remains-dragon-path-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1"); }
.battle-shell.battle-zone-70 { --battle-zone-image: url("/images/background/battle-70-star-remains-dragon-throne-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1"); }

/* 701-900F: reviewed chapter backgrounds. */
.battle-shell.battle-zone-71 { --battle-zone-image: url("/images/background/battle-71-stilled-time-gate-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-72 { --battle-zone-image: url("/images/background/battle-72-crossed-seasons-garden-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-73 { --battle-zone-image: url("/images/background/battle-73-echo-bell-tower-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-74 { --battle-zone-image: url("/images/background/battle-74-yesterday-market-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-75 { --battle-zone-image: url("/images/background/battle-75-reverse-sand-canal-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-76 { --battle-zone-image: url("/images/background/battle-76-sleeping-hand-workshop-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-77 { --battle-zone-image: url("/images/background/battle-77-broken-calendar-library-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-78 { --battle-zone-image: url("/images/background/battle-78-rejuvenating-grave-garden-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-79 { --battle-zone-image: url("/images/background/battle-79-time-rift-bridge-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-80 { --battle-zone-image: url("/images/background/battle-80-time-burial-throne-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-81 { --battle-zone-image: url("/images/background/battle-81-prototype-casting-gate-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-82 { --battle-zone-image: url("/images/background/battle-82-seven-gear-vault-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-83 { --battle-zone-image: url("/images/background/battle-83-white-flame-seed-furnace-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-84 { --battle-zone-image: url("/images/background/battle-84-inheritance-core-water-garden-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-85 { --battle-zone-image: url("/images/background/battle-85-blade-embryo-floating-hall-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-86 { --battle-zone-image: url("/images/background/battle-86-guardian-gear-cocoon-sanctum-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-87 { --battle-zone-image: url("/images/background/battle-87-inscription-lamp-archive-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-88 { --battle-zone-image: url("/images/background/battle-88-fusion-core-crucible-garden-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-89 { --battle-zone-image: url("/images/background/battle-89-origin-gear-trial-hall-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }
.battle-shell.battle-zone-90 { --battle-zone-image: url("/images/background/battle-90-first-smith-forge-sanctum-portrait-anime-v3.webp?v=20261008-floors-701-900-1"); }

/* 901-1000F: reviewed chapter backgrounds. */
.battle-shell.battle-zone-91 { --battle-zone-image: url("/images/background/battle-91-pulsing-stone-gate-portrait-anime-v3.webp?v=20261008-floors-901-1000-1"); }
.battle-shell.battle-zone-92 { --battle-zone-image: url("/images/background/battle-92-deep-crystal-rib-hall-portrait-anime-v3.webp?v=20261008-floors-901-1000-1"); }
.battle-shell.battle-zone-93 { --battle-zone-image: url("/images/background/battle-93-castle-fragment-court-portrait-anime-v3.webp?v=20261008-floors-901-1000-1"); }
.battle-shell.battle-zone-94 { --battle-zone-image: url("/images/background/battle-94-mother-root-heart-garden-portrait-anime-v3.webp?v=20261008-floors-901-1000-1"); }
.battle-shell.battle-zone-95 { --battle-zone-image: url("/images/background/battle-95-iron-remains-pulse-furnace-portrait-anime-v3.webp?v=20261008-floors-901-1000-1"); }
.battle-shell.battle-zone-96 { --battle-zone-image: url("/images/background/battle-96-mirror-remains-silent-sanctum-portrait-anime-v3.webp?v=20261008-floors-901-1000-1"); }
.battle-shell.battle-zone-97 { --battle-zone-image: url("/images/background/battle-97-sealed-heart-chain-bridge-portrait-anime-v3.webp?v=20261008-floors-901-1000-1"); }
.battle-shell.battle-zone-98 { --battle-zone-image: url("/images/background/battle-98-star-remains-womb-sea-portrait-anime-v3.webp?v=20261008-floors-901-1000-1"); }
.battle-shell.battle-zone-99 { --battle-zone-image: url("/images/background/battle-99-seven-guardians-confluence-portrait-anime-v3.webp?v=20261008-floors-901-1000-1"); }
.battle-shell.battle-zone-100 { --battle-zone-image: url("/images/background/battle-100-primordial-abyss-furnace-portrait-anime-v3.webp?v=20261008-floors-901-1000-1"); }

/* 1001〜1100F: 蒼紋の封界の専用背景。 */
.battle-shell.battle-zone-101 { --battle-zone-image: url("/images/background/battle-101-azure-seal-outer-gate-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1"); }
.battle-shell.battle-zone-102 { --battle-zone-image: url("/images/background/battle-102-folded-shield-corridor-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1"); }
.battle-shell.battle-zone-103 { --battle-zone-image: url("/images/background/battle-103-blue-tide-rune-canal-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1"); }
.battle-shell.battle-zone-104 { --battle-zone-image: url("/images/background/battle-104-glass-branch-ward-garden-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1"); }
.battle-shell.battle-zone-105 { --battle-zone-image: url("/images/background/battle-105-white-ash-seal-furnace-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1"); }
.battle-shell.battle-zone-106 { --battle-zone-image: url("/images/background/battle-106-silent-rune-belfry-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1"); }
.battle-shell.battle-zone-107 { --battle-zone-image: url("/images/background/battle-107-reverse-stitch-sealed-archive-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1"); }
.battle-shell.battle-zone-108 { --battle-zone-image: url("/images/background/battle-108-azure-star-ward-ring-bridge-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1"); }
.battle-shell.battle-zone-109 { --battle-zone-image: url("/images/background/battle-109-seven-rune-barrier-hall-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1"); }
.battle-shell.battle-zone-110 { --battle-zone-image: url("/images/background/battle-110-azure-heart-ward-sanctum-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1"); }

/* 1101〜1200F: 黒潮の底庭の専用背景。 */
.battle-shell.battle-zone-111 { --battle-zone-image: url("/images/background/battle-111-tide-stop-stone-gate-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1"); }
.battle-shell.battle-zone-112 { --battle-zone-image: url("/images/background/battle-112-black-sand-shallow-garden-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1"); }
.battle-shell.battle-zone-113 { --battle-zone-image: url("/images/background/battle-113-coral-bone-fence-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1"); }
.battle-shell.battle-zone-114 { --battle-zone-image: url("/images/background/battle-114-sunken-bell-water-hall-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1"); }
.battle-shell.battle-zone-115 { --battle-zone-image: url("/images/background/battle-115-white-shell-closed-garden-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1"); }
.battle-shell.battle-zone-116 { --battle-zone-image: url("/images/background/battle-116-phosphor-algae-lantern-garden-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1"); }
.battle-shell.battle-zone-117 { --battle-zone-image: url("/images/background/battle-117-tidebone-crossing-bridge-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1"); }
.battle-shell.battle-zone-118 { --battle-zone-image: url("/images/background/battle-118-unlit-ink-cavern-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1"); }
.battle-shell.battle-zone-119 { --battle-zone-image: url("/images/background/battle-119-bottom-root-shell-garden-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1"); }
.battle-shell.battle-zone-120 { --battle-zone-image: url("/images/background/battle-120-black-tide-mother-garden-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1"); }


/* 1201〜1300F: 朱雷の導剣郷。 */
.battle-shell.battle-zone-121 { --battle-zone-image: url("/images/background/battle-121-copper-gate-town-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1"); }
.battle-shell.battle-zone-122 { --battle-zone-image: url("/images/background/battle-122-conduit-beast-road-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1"); }
.battle-shell.battle-zone-123 { --battle-zone-image: url("/images/background/battle-123-sword-stela-garden-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1"); }
.battle-shell.battle-zone-124 { --battle-zone-image: url("/images/background/battle-124-vermilion-cloud-bridge-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1"); }
.battle-shell.battle-zone-125 { --battle-zone-image: url("/images/background/battle-125-quiet-thunder-forge-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1"); }
.battle-shell.battle-zone-126 { --battle-zone-image: url("/images/background/battle-126-broken-blade-sand-garden-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1"); }
.battle-shell.battle-zone-127 { --battle-zone-image: url("/images/background/battle-127-singing-sword-tower-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1"); }
.battle-shell.battle-zone-128 { --battle-zone-image: url("/images/background/battle-128-mirror-blade-academy-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1"); }
.battle-shell.battle-zone-129 { --battle-zone-image: url("/images/background/battle-129-red-thunder-inheritance-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1"); }
.battle-shell.battle-zone-130 { --battle-zone-image: url("/images/background/battle-130-twin-sword-vermilion-heart-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1"); }

/* 1301〜1400F: 蜜蝋の群巣。 */
.battle-shell.battle-zone-131 { --battle-zone-image: url("/images/background/battle-131-wax-gate-courtyard-portrait-anime-v3.webp?v=20261014-wax-hive-v1"); }
.battle-shell.battle-zone-132 { --battle-zone-image: url("/images/background/battle-132-blue-honey-vault-portrait-anime-v3.webp?v=20261014-wax-hive-v1"); }
.battle-shell.battle-zone-133 { --battle-zone-image: url("/images/background/battle-133-violet-spore-garden-portrait-anime-v3.webp?v=20261014-wax-hive-v1"); }
.battle-shell.battle-zone-134 { --battle-zone-image: url("/images/background/battle-134-white-cocoon-hall-portrait-anime-v3.webp?v=20261014-wax-hive-v1"); }
.battle-shell.battle-zone-135 { --battle-zone-image: url("/images/background/battle-135-red-nectar-garden-portrait-anime-v3.webp?v=20261014-wax-hive-v1"); }
.battle-shell.battle-zone-136 { --battle-zone-image: url("/images/background/battle-136-jade-leaf-nest-portrait-anime-v3.webp?v=20261014-wax-hive-v1"); }
.battle-shell.battle-zone-137 { --battle-zone-image: url("/images/background/battle-137-copper-shell-passage-portrait-anime-v3.webp?v=20261014-wax-hive-v1"); }
.battle-shell.battle-zone-138 { --battle-zone-image: url("/images/background/battle-138-indigo-wing-cavern-portrait-anime-v3.webp?v=20261014-wax-hive-v1"); }
.battle-shell.battle-zone-139 { --battle-zone-image: url("/images/background/battle-139-root-honey-brood-garden-portrait-anime-v3.webp?v=20261014-wax-hive-v1"); }
.battle-shell.battle-zone-140 { --battle-zone-image: url("/images/background/battle-140-hive-mother-nursery-portrait-anime-v3.webp?v=20261014-wax-hive-v1"); }

/* 1401〜1500F: 灰雪の巡礼峰。 */
.battle-shell.battle-zone-141 { --battle-zone-image: url("/images/background/battle-141-ash-snow-trailhead-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
.battle-shell.battle-zone-142 { --battle-zone-image: url("/images/background/battle-142-white-cloth-waymarks-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
.battle-shell.battle-zone-143 { --battle-zone-image: url("/images/background/battle-143-ash-grass-garden-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
.battle-shell.battle-zone-144 { --battle-zone-image: url("/images/background/battle-144-prayer-stone-bend-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
.battle-shell.battle-zone-145 { --battle-zone-image: url("/images/background/battle-145-lampwood-rest-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
.battle-shell.battle-zone-146 { --battle-zone-image: url("/images/background/battle-146-blue-wind-saddle-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
.battle-shell.battle-zone-147 { --battle-zone-image: url("/images/background/battle-147-buried-road-terrace-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
.battle-shell.battle-zone-148 { --battle-zone-image: url("/images/background/battle-148-faint-lamp-cavern-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
.battle-shell.battle-zone-149 { --battle-zone-image: url("/images/background/battle-149-white-cloak-court-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
.battle-shell.battle-zone-150 { --battle-zone-image: url("/images/background/battle-150-ash-snow-lamp-peak-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }

/* 1501〜1600F 金砂の天秤堂 */
.battle-shell.battle-zone-151 { --battle-zone-image: url("/images/background/battle-151-sand-lamp-approach-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
.battle-shell.battle-zone-152 { --battle-zone-image: url("/images/background/battle-152-inverted-cup-channel-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
.battle-shell.battle-zone-153 { --battle-zone-image: url("/images/background/battle-153-dish-leaf-garden-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
.battle-shell.battle-zone-154 { --battle-zone-image: url("/images/background/battle-154-basalt-weighing-vault-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
.battle-shell.battle-zone-155 { --battle-zone-image: url("/images/background/battle-155-gold-ledger-colonnade-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
.battle-shell.battle-zone-156 { --battle-zone-image: url("/images/background/battle-156-paired-pillar-walkway-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
.battle-shell.battle-zone-157 { --battle-zone-image: url("/images/background/battle-157-single-pan-wind-court-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
.battle-shell.battle-zone-158 { --battle-zone-image: url("/images/background/battle-158-abacus-sand-road-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
.battle-shell.battle-zone-159 { --battle-zone-image: url("/images/background/battle-159-sealed-judgment-hall-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
.battle-shell.battle-zone-160 { --battle-zone-image: url("/images/background/battle-160-great-golden-balance-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }

/* 1601〜1700F 星綴りの天測苑 */
.battle-shell.battle-zone-161 { --battle-zone-image: url("/images/background/battle-161-crescent-entry-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
.battle-shell.battle-zone-162 { --battle-zone-image: url("/images/background/battle-162-needle-star-path-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
.battle-shell.battle-zone-163 { --battle-zone-image: url("/images/background/battle-163-dew-light-garden-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
.battle-shell.battle-zone-164 { --battle-zone-image: url("/images/background/battle-164-sky-shell-vault-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
.battle-shell.battle-zone-165 { --battle-zone-image: url("/images/background/battle-165-star-thread-court-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
.battle-shell.battle-zone-166 { --battle-zone-image: url("/images/background/battle-166-wandering-ring-walkway-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
.battle-shell.battle-zone-167 { --battle-zone-image: url("/images/background/battle-167-thin-wing-wind-garden-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
.battle-shell.battle-zone-168 { --battle-zone-image: url("/images/background/battle-168-comet-tail-court-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
.battle-shell.battle-zone-169 { --battle-zone-image: url("/images/background/battle-169-silent-chart-library-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
.battle-shell.battle-zone-170 { --battle-zone-image: url("/images/background/battle-170-celestial-ring-sanctum-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }

/* 1701〜1800F 彩律の硝子工廊 */
.battle-shell.battle-zone-171 { --battle-zone-image: url("/images/background/battle-171-prism-entry-portrait-anime-v3.webp?v=20261016-prism-v1"); }
.battle-shell.battle-zone-172 { --battle-zone-image: url("/images/background/battle-172-color-sand-path-portrait-anime-v3.webp?v=20261016-prism-v1"); }
.battle-shell.battle-zone-173 { --battle-zone-image: url("/images/background/battle-173-blowpipe-gallery-portrait-anime-v3.webp?v=20261016-prism-v1"); }
.battle-shell.battle-zone-174 { --battle-zone-image: url("/images/background/battle-174-cooling-vault-portrait-anime-v3.webp?v=20261016-prism-v1"); }
.battle-shell.battle-zone-175 { --battle-zone-image: url("/images/background/battle-175-resonant-court-portrait-anime-v3.webp?v=20261016-prism-v1"); }
.battle-shell.battle-zone-176 { --battle-zone-image: url("/images/background/battle-176-mosaic-bridge-portrait-anime-v3.webp?v=20261016-prism-v1"); }
.battle-shell.battle-zone-177 { --battle-zone-image: url("/images/background/battle-177-ember-kiln-portrait-anime-v3.webp?v=20261016-prism-v1"); }
.battle-shell.battle-zone-178 { --battle-zone-image: url("/images/background/battle-178-lamina-racks-portrait-anime-v3.webp?v=20261016-prism-v1"); }
.battle-shell.battle-zone-179 { --battle-zone-image: url("/images/background/battle-179-sealed-tube-vault-portrait-anime-v3.webp?v=20261016-prism-v1"); }
.battle-shell.battle-zone-180 { --battle-zone-image: url("/images/background/battle-180-great-prism-sanctum-portrait-anime-v3.webp?v=20261016-prism-v1"); }
.owned-skill-books { margin-block: 1rem; min-width: 0; } .owned-skill-books select { max-width: 100%; padding: .6rem; } .owned-book-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .7rem; margin-block: 1rem; } .owned-book-card { display: grid; gap: .5rem; padding: .8rem; border: 1px solid #746344; border-radius: .5rem; min-width: 0; overflow-wrap: anywhere; } .owned-book-exchange { padding-block: .8rem; } .book-material { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-block: .6rem; } .book-material input { width: 4rem; padding: .4rem; }
body.owned-book-modal-open { overflow: hidden; }
#book-operation-dialog { background: #111b20; gap: .65rem; overflow-y: auto; }

/* 1801〜1900F 暁砂の帆航庭 */
.battle-shell.battle-zone-181 { --battle-zone-image: url("/images/background/battle-181-dawn-port-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
.battle-shell.battle-zone-182 { --battle-zone-image: url("/images/background/battle-182-compass-way-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
.battle-shell.battle-zone-183 { --battle-zone-image: url("/images/background/battle-183-wind-cave-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
.battle-shell.battle-zone-184 { --battle-zone-image: url("/images/background/battle-184-bone-coral-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
.battle-shell.battle-zone-185 { --battle-zone-image: url("/images/background/battle-185-sail-loom-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
.battle-shell.battle-zone-186 { --battle-zone-image: url("/images/background/battle-186-copper-bridge-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
.battle-shell.battle-zone-187 { --battle-zone-image: url("/images/background/battle-187-mirage-basin-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
.battle-shell.battle-zone-188 { --battle-zone-image: url("/images/background/battle-188-star-sand-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
.battle-shell.battle-zone-189 { --battle-zone-image: url("/images/background/battle-189-silent-mooring-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
.battle-shell.battle-zone-190 { --battle-zone-image: url("/images/background/battle-190-great-dawn-mast-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }

/* 装備変更：比較を先に、詳細は折りたたみ。操作欄はスクロール本文の外へ。 */
.equip-confirm-dialog.equip-compare-dialog {
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: 0;
  overflow: hidden;
  color: #eae8dc;
}
.equip-compare-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px 14px;
  border-bottom: 1px solid #c8a85b33;
  background: linear-gradient(110deg, #b49b5020, transparent 70%);
}
.equip-compare-header .eyebrow { margin: 0 0 4px; font-size: 10px; letter-spacing: .16em; color: #c5ae74; }
.equip-compare-header h2 { margin: 0; font-size: 23px; line-height: 1.3; }
.equip-compare-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid #c5b27e44;
  border-radius: 50%;
  background: #131e21;
  color: #e3d8b7;
  font: inherit;
  font-size: 25px;
  cursor: pointer;
}
.equip-compare-close:focus-visible, .equip-compare-details > summary:focus-visible { outline: 2px solid #e8c66f; outline-offset: -3px; }
.equip-compare-body { flex: 1 1 auto; min-height: 0; padding: 14px 20px 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #9e894e #132124; }
.equip-compare-recipient { display: flex; align-items: center; gap: 10px; min-width: 0; }
.equip-compare-portrait { flex: 0 0 48px; height: 48px; overflow: hidden; border: 1px solid #baa56780; border-radius: 10px; background: radial-gradient(ellipse at bottom, #58797970, #121d22); }
.equip-compare-portrait img { width: 100%; height: 100%; object-fit: contain; }
.equip-compare-recipient > div { min-width: 0; display: grid; gap: 3px; }
.equip-compare-recipient small { color: #b9c5c3; font-size: 11px; }
.equip-compare-recipient strong { color: #fff5d9; font-size: 16px; overflow-wrap: anywhere; }
.equip-compare-part { margin-left: auto; flex: 0 0 auto; padding: 4px 10px; border: 1px solid #a8b2a342; border-radius: 5px; font-size: 12px; color: #d8ddcc; background: #18292c; }
.equip-compare-description { margin: 10px 0 12px; color: #b9c5c3; font-size: 12px; line-height: 1.6; }
.equip-compare-owner-note { padding: 9px 11px; margin: 0 0 12px; border: 1px solid #c7a85e55; border-radius: 7px; font-size: 12px; line-height: 1.8; color: #ead7a6; background: #80632120; }
.equip-compare-choices { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.equip-compare-choice { min-width: 0; padding: 11px 12px 12px; border: 1px solid #9cafab40; border-radius: 10px; background: linear-gradient(150deg, #91a9a50d, #111d2280); }
.equip-compare-choice.selected { border-color: #ddba62b0; box-shadow: inset 0 1px #ffe4a330, 0 0 22px #d3ab4012; background: radial-gradient(ellipse at 50% 20%, #bea35320, transparent 75%), linear-gradient(145deg, #263432, #172326); }
.equip-compare-label { margin: 0; color: #bac6c2; font-size: 11px; letter-spacing: .08em; }
.equip-compare-choice.selected .equip-compare-label { color: #edd28a; font-weight: 700; }
.equip-compare-art { display: grid; place-items: center; height: 80px; margin: 3px 0 7px; background: radial-gradient(ellipse, #9bbab617, transparent 65%); }
.equip-compare-art img { width: 76px; height: 76px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px #0009); }
.equip-compare-empty { color: #7c938d; font-size: 30px; }
.equip-compare-choice h3 { margin: 0 0 8px; min-height: 1.45em; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.equip-compare-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.equip-compare-badges .item-rarity-badge, .equip-compare-badges .vessel-badge, .equip-compare-badges .unique-vessel-badge, .equip-compare-badges .corruption-badge { margin: 0; font-size: 10px; line-height: 1.5; padding: 1px 6px; }
.equip-compare-grade { color: #b4c4bf; font-size: 11px; }
.equip-compare-trait { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid #b9ad7629; color: #e4cb89; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.equip-compare-trait small { margin-right: 6px; color: #a9b5ab; font-size: 10px; }
.equip-compare-between { position: absolute; top: 93px; left: 50%; transform: translateX(-50%); color: #dbbb6a; font: 25px/1 Georgia, serif; text-shadow: 0 0 8px #d8b65080; }
.equip-compare-performance { margin-top: 17px; }
.equip-compare-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.equip-compare-section-title h3 { margin: 0; font-size: 14px; color: #e5d5ac; }
.equip-compare-section-title > span { color: #a6b7b1; font-size: 10px; }
.equip-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; font-variant-numeric: tabular-nums; }
.equip-compare-table th, .equip-compare-table td { padding: 9px 7px; text-align: right; border-bottom: 1px solid #a5b7a926; overflow-wrap: anywhere; }
.equip-compare-table thead th { padding-top: 5px; padding-bottom: 6px; color: #aebeb7; font-size: 10px; font-weight: 400; }
.equip-compare-table th:first-child { text-align: left; width: 28%; }
.equip-compare-table tbody th { color: #c1cfca; font-size: 12px; font-weight: 400; }
.equip-compare-table tbody tr:nth-child(odd) { background: #afc8bd07; }
.equip-compare-table .equip-compare-after { color: #fff0c8; font-weight: 700; }
.equip-compare-table .equip-compare-delta { font-size: 13px; font-weight: 700; }
.equip-compare-delta.gain { color: #94ddc0; }
.equip-compare-delta.loss { color: #f2a393; }
.equip-compare-delta.same { color: #829a93; font-weight: 400; }
.equip-compare-skills { margin: 12px 0; }
.equip-compare-skill-change { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 8px; padding: 7px 0; font-size: 11px; line-height: 1.6; }
.equip-compare-skill-change > strong { font-weight: 400; }
.equip-compare-skill-change > div { display: flex; flex-wrap: wrap; gap: 4px; }
.equip-compare-skill-change span { padding: 1px 7px; border: 1px solid currentColor; border-radius: 4px; overflow-wrap: anywhere; }
.equip-compare-skill-change.loss { color: #e3ab9e; }
.equip-compare-skill-change.gain { color: #9bd1bb; }
.equip-compare-skill-same { margin: 0; padding: 8px 0; color: #b7c6bd; font-size: 11px; }
.equip-compare-detail-list { display: grid; gap: 8px; }
.equip-compare-details { border: 1px solid #b7b49340; border-radius: 8px; background: #0f191d65; }
.equip-compare-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; cursor: pointer; list-style: none; }
.equip-compare-details > summary::-webkit-details-marker { display: none; }
.equip-compare-details > summary > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; }
.equip-compare-details > summary small { color: #b5c0b6; font-size: 11px; }
.equip-compare-details > summary strong { color: #e7d7ae; font-size: 12px; }
.equip-compare-details-cue { color: #d1b773; }
.equip-compare-details[open] > summary .equip-compare-details-cue { transform: rotate(180deg); }
.equip-compare-details-body { padding: 0 12px 12px; min-width: 0; }
.equip-compare-details-body .implicit-trait-note { margin: 0 0 8px; }
.equip-compare-details-body .workshop-slot-meter { margin: 10px 0; flex-wrap: wrap; }
.equip-compare-details-body .workshop-slot-meter > small { width: 100%; }
.equip-compare-details-body .ability-list { margin: 0; }
.equip-compare-details-body .workshop-skill-effect { min-width: 0; }
.equip-compare-details-body .workshop-skill-effect summary { flex-wrap: wrap; }
.equip-compare-details-body .workshop-skill-effect strong { min-width: 0; overflow-wrap: anywhere; }
.equip-compare-storage-note { margin: 12px 0 0; color: #9fafaa; font-size: 11px; line-height: 1.7; }
.equip-compare-dialog .equip-confirm-actions { position: static; flex: 0 0 auto; display: grid; grid-template-columns: minmax(76px, .7fr) minmax(0, 1.7fr); gap: 10px; margin: 0; padding: 12px 20px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid #bca56155; background: linear-gradient(110deg, #1b292b, #232a25); box-shadow: 0 -8px 22px #0003; }
.equip-compare-dialog .equip-confirm-actions button { min-width: 0; min-height: 48px; padding: 10px 8px; font-size: 14px; line-height: 1.4; }
.equip-compare-dialog .equip-confirm-actions .primary-button { border: 1px solid #e4c574a6; background: linear-gradient(135deg, #8a7139, #655025); box-shadow: inset 0 1px #ffe7a340, 0 3px 10px #0003; color: #fff6db; }
@media (max-width: 600px) {
  .equip-confirm-dialog.equip-compare-dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 14px; }
  .equip-compare-header { padding: 13px 14px 11px; }
  .equip-compare-header h2 { font-size: 21px; }
  .equip-compare-body { padding: 12px 14px 16px; }
  .equip-compare-choices { gap: 14px; }
  .equip-compare-choice { padding: 10px 9px; }
  .equip-compare-choice h3 { font-size: 14px; }
  .equip-compare-art { height: 66px; }
  .equip-compare-art img { width: 64px; height: 64px; }
  .equip-compare-between { top: 82px; font-size: 22px; }
  .equip-compare-dialog .equip-confirm-actions { padding-left: 14px; padding-right: 14px; }
}
@media (max-height: 480px) {
  .equip-confirm-dialog.equip-compare-dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .equip-compare-header { padding-top: 8px; padding-bottom: 8px; }
  .equip-compare-header .eyebrow { display: none; }
  .equip-compare-dialog .equip-confirm-actions { padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) and (max-height: 620px) {
  .equip-compare-art { height: 44px; margin-bottom: 5px; }
  .equip-compare-art img { width: 44px; height: 44px; }
  .equip-compare-between { top: 64px; }
  .equip-compare-choice { padding-top: 8px; padding-bottom: 8px; }
  .equip-compare-choice h3 { margin-bottom: 6px; font-size: 13px; }
  .equip-compare-badges { gap: 3px; }
  .equip-compare-badges .vessel-badge { padding-left: 4px; padding-right: 4px; }
}

/* 比較カード内でも付属スキルを常時表示し、左右で同じ高さから読み比べる。 */
.equip-compare-attached-skills { min-width: 0; margin-top: 10px; padding-top: 10px; border-top: 1px solid #b9ad7633; }
.equip-compare-attached-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 7px; color: #b5c4bd; font-size: 10px; }
.equip-compare-attached-heading strong { font-weight: 400; }
.equip-compare-attached-heading > span { color: #cdbb88; font-variant-numeric: tabular-nums; }
.equip-compare-attached-skills ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.equip-compare-attached-skills li { position: relative; min-width: 0; padding: 5px 6px 5px 16px; border: 1px solid #a3b8aa30; border-radius: 4px; color: #e3e8d9; background: #acc8b30b; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.equip-compare-attached-skills li::before { position: absolute; top: 11px; left: 6px; width: 4px; height: 4px; border: 1px solid #b4c9b5; background: #b4c9b5; transform: rotate(45deg); content: ""; }
.equip-compare-attached-skills li.curse { border-color: #c78b8145; color: #edb1a3; }
.equip-compare-attached-skills li.curse::before { border-color: #dba695; background: #dba695; }
.equip-compare-attached-skills li.empty { border-style: dashed; color: #94a9a0; background: transparent; font-size: 11px; }
.equip-compare-attached-skills li.empty::before { border-color: #8ca398; background: transparent; }
.equip-compare-no-skills { margin: 0; color: #94a9a0; font-size: 11px; }
@supports (grid-template-rows: subgrid) {
  .equip-compare-choices { row-gap: 0; }
  .equip-compare-choice { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
}

/* 戦闘ヘッダ：左の装飾を外し、スマホも進行情報と操作を一列に収める。 */
.battle-shell .battle-header { gap: 16px; padding: 8px 12px; }
.battle-shell .battle-header-identity { display: block; min-width: 0; }
.battle-shell .battle-header-copy { gap: 4px; }
.battle-shell .battle-header-copy .eyebrow { letter-spacing: .06em; font-family: inherit; font-size: 10px; }
.battle-shell .battle-header .battle-progress-title { flex-wrap: wrap; gap: 8px 14px; font-size: 17px; line-height: 1.3; letter-spacing: .02em; }
.battle-shell .battle-header .battle-floor-heading { min-width: 0; flex: 0 1 auto; gap: 4px; line-height: 1.3; }
.battle-shell .battle-header .battle-floor-label { font-size: 1.08em; overflow-wrap: anywhere; }
.battle-shell .battle-header .battle-difficulty-label { font-size: 10px; letter-spacing: .05em; }
.battle-shell .battle-header .battle-phase-heading { flex: 0 0 auto; gap: 5px; font-size: 12px; }
.battle-shell .battle-header .battle-phase-label { font-size: 11px; white-space: nowrap; }
.battle-shell .battle-header .battle-round-label { padding: 4px 7px; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.battle-shell .battle-header .battle-mode-label { font-size: 10px; }
.battle-shell .battle-header .battle-utility-controls { gap: 8px; }
.battle-shell .battle-header .battle-utility-controls .battle-manual-turn-button { min-width: 0; }
.battle-floor-label:has(.battle-floor-number) { display: inline-flex; gap: 3px; }
.battle-floor-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.battle-floor-name:empty { display: none; }
.battle-floor-number { flex: 0 0 auto; }
@media (max-width: 700px) {
  body.battle-active .battle-shell .battle-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-height: 42px; padding: 4px 8px; }
  .battle-shell .battle-header .battle-progress-title { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) auto; align-items: center; gap: 3px 5px; font-size: 13px; line-height: 1.1; }
  .battle-shell .battle-header .battle-floor-heading { display: contents; }
  .battle-shell .battle-header .battle-floor-label { grid-column: 1 / -1; grid-row: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
  .battle-shell .battle-header .battle-difficulty-label { grid-column: 1; grid-row: 2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; }
  .battle-shell .battle-header .battle-phase-heading { grid-column: 2; grid-row: 2; display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; }
  .battle-shell .battle-header .battle-phase-label { font-size: 9px; }
  .battle-shell .battle-header .battle-phase-progress { display: none; }
  .battle-shell .battle-header .battle-round-label { grid-column: 3; grid-row: 2; margin: 0; padding: 0 3px; font-size: 9px; line-height: 1.25; }
  #exploration-battle-screen .battle-header .battle-mode-label { grid-column: 1 / -1; grid-row: 3; min-width: 0; }
  body.battle-active .battle-shell .battle-header .battle-utility-controls { grid-template-columns: 28px 77px 40px 30px; gap: 4px; padding: 0; border: 0; }
  body.battle-active .battle-shell .battle-header .battle-utility-controls.arena-duel-utility { grid-template-columns: auto 40px 30px; }
  .battle-shell .battle-header .battle-utility-controls button { min-height: 32px; }
  .battle-shell .battle-header .battle-utility-controls .battle-loot-button { width: 28px; border-color: #99a6a844; background: #9bb8b00a; }
  .battle-shell .battle-header .battle-loot-icon { width: 20px; height: 20px; }
  .battle-shell .battle-header .battle-utility-controls .battle-auto-settings-button { width: 27px; flex: 0 0 27px; min-height: 30px; }
  .battle-shell .battle-header .battle-utility-controls .battle-auto-button { min-width: 0; flex: 1 1 auto; min-height: 30px; padding: 2px 4px; gap: 3px; }
  .battle-shell .battle-header .battle-utility-controls .battle-auto-button strong { font-size: 10px; letter-spacing: 0; }
  .battle-shell .battle-header .battle-utility-controls .battle-manual-turn-button { width: 77px; max-width: none; height: 32px; gap: 1px; line-height: 1.1; }
  .battle-shell .battle-header .battle-manual-turn-button::before { display: none; }
  .battle-shell .battle-header .battle-manual-turn-button strong { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .battle-shell .battle-header .battle-manual-turn-button span { padding-left: 0; border: 0; font-size: 9px; }
  .battle-shell .battle-header .battle-utility-controls .battle-speed-trigger { width: 40px; padding: 2px 4px; font-size: 10px; border-color: #99a6a844; background: #9bb8b00a; }
  .battle-shell .battle-header .battle-utility-controls .battle-retreat-button { padding: 2px 0; font-size: 10px; color: #c4c7b7; border-color: transparent; background: transparent; box-shadow: none; }
  .battle-shell.arena-match .battle-header .battle-progress-title > .heading-icon { display: none; }
}
@media (max-width: 360px) {
  body.battle-active .battle-shell .battle-header { gap: 6px; padding-right: 6px; padding-left: 6px; }
  .battle-shell .battle-header .battle-progress-title { column-gap: 3px; }
  body.battle-active .battle-shell .battle-header .battle-utility-controls { column-gap: 3px; }
}

/* Damage-source marks stay in the fixed floating layer, outside all actor layout. */
.combat-float.is-dot { display: inline-flex; align-items: center; gap: .22em; white-space: nowrap; }
.combat-float.dot-poison { color: #c6a3f6; }
.combat-float.dot-burn { color: #ffad6b; }
.combat-float.dot-bleed { color: #ff7e96; }
.combat-float.dot-decay { color: #d4a5e8; }
.combat-dot-icon { display: inline-flex; width: 1.05em; height: 1.05em; flex: 0 0 1.05em; filter: drop-shadow(0 1px 2px #000); }
.combat-dot-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }

.expedition-result-equipment-name > .loot-pending-badge { flex: 0 0 auto; margin-left: 0; }

/* Arena AUTO remains readable and stoppable beside speed and forfeit controls. */
.battle-shell.arena-match:not(.immersive-battle) .battle-header .battle-utility-controls.arena-duel-utility,
body.battle-active .battle-shell.arena-match:not(.immersive-battle) .battle-header .battle-utility-controls.arena-duel-utility {
  grid-template-columns: auto 48px 40px 44px; gap: 4px;
}
.battle-shell.arena-match:not(.immersive-battle) .battle-header .battle-utility-controls .battle-auto-button {
  display: flex; flex-direction: column; justify-content: center; min-width: 44px; min-height: 44px; padding: 3px; gap: 2px;
}
.battle-shell.arena-match:not(.immersive-battle) .battle-header .battle-auto-button strong,
.battle-shell.arena-match:not(.immersive-battle) .battle-header .battle-auto-button span { font-size: .65rem; line-height: 1.1; letter-spacing: 0; padding: 0; border: 0; }


/* 1901〜2000F 轟誓の雷冠砦 */
.battle-shell.battle-zone-191 { --battle-zone-image: url("/images/background/battle-191-thunder-gate-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
.battle-shell.battle-zone-192 { --battle-zone-image: url("/images/background/battle-192-chain-cloud-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
.battle-shell.battle-zone-193 { --battle-zone-image: url("/images/background/battle-193-lodestone-garden-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
.battle-shell.battle-zone-194 { --battle-zone-image: url("/images/background/battle-194-bronze-belfry-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
.battle-shell.battle-zone-195 { --battle-zone-image: url("/images/background/battle-195-cleft-wing-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
.battle-shell.battle-zone-196 { --battle-zone-image: url("/images/background/battle-196-ember-ore-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
.battle-shell.battle-zone-197 { --battle-zone-image: url("/images/background/battle-197-thunder-root-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
.battle-shell.battle-zone-198 { --battle-zone-image: url("/images/background/battle-198-black-banner-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
.battle-shell.battle-zone-199 { --battle-zone-image: url("/images/background/battle-199-static-vow-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
.battle-shell.battle-zone-200 { --battle-zone-image: url("/images/background/battle-200-thunder-crown-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }

/* 2001〜2100F 霜紡ぎの繭王宮 */
.battle-shell.battle-zone-201 { --battle-zone-image: url("/images/background/battle-201-white-thread-gate-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
.battle-shell.battle-zone-202 { --battle-zone-image: url("/images/background/battle-202-frost-cotton-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
.battle-shell.battle-zone-203 { --battle-zone-image: url("/images/background/battle-203-needle-ice-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
.battle-shell.battle-zone-204 { --battle-zone-image: url("/images/background/battle-204-crimson-silk-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
.battle-shell.battle-zone-205 { --battle-zone-image: url("/images/background/battle-205-wing-mantle-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
.battle-shell.battle-zone-206 { --battle-zone-image: url("/images/background/battle-206-black-shuttle-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
.battle-shell.battle-zone-207 { --battle-zone-image: url("/images/background/battle-207-wax-thread-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
.battle-shell.battle-zone-208 { --battle-zone-image: url("/images/background/battle-208-indigo-shears-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
.battle-shell.battle-zone-209 { --battle-zone-image: url("/images/background/battle-209-silver-cocoon-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
.battle-shell.battle-zone-210 { --battle-zone-image: url("/images/background/battle-210-frostweave-throne-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }

/* 2101〜2200F 暁誓の英雄陵 */
.battle-shell.battle-zone-211 { --battle-zone-image: url("/images/background/battle-211-dawn-gate-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
.battle-shell.battle-zone-212 { --battle-zone-image: url("/images/background/battle-212-bronze-road-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
.battle-shell.battle-zone-213 { --battle-zone-image: url("/images/background/battle-213-pyre-garden-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
.battle-shell.battle-zone-214 { --battle-zone-image: url("/images/background/battle-214-spring-oath-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
.battle-shell.battle-zone-215 { --battle-zone-image: url("/images/background/battle-215-spear-grove-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
.battle-shell.battle-zone-216 { --battle-zone-image: url("/images/background/battle-216-thunder-bell-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
.battle-shell.battle-zone-217 { --battle-zone-image: url("/images/background/battle-217-white-wing-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
.battle-shell.battle-zone-218 { --battle-zone-image: url("/images/background/battle-218-obsidian-council-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
.battle-shell.battle-zone-219 { --battle-zone-image: url("/images/background/battle-219-crimson-stars-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
.battle-shell.battle-zone-220 { --battle-zone-image: url("/images/background/battle-220-hero-throne-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }

/* 2201〜2300F 蒼穹の戦旗宮 */
.battle-shell.battle-zone-221 { --battle-zone-image: url("/images/background/battle-221-azure-gate-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
.battle-shell.battle-zone-222 { --battle-zone-image: url("/images/background/battle-222-white-sail-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
.battle-shell.battle-zone-223 { --battle-zone-image: url("/images/background/battle-223-red-forge-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
.battle-shell.battle-zone-224 { --battle-zone-image: url("/images/background/battle-224-tide-lance-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
.battle-shell.battle-zone-225 { --battle-zone-image: url("/images/background/battle-225-green-bow-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
.battle-shell.battle-zone-226 { --battle-zone-image: url("/images/background/battle-226-violet-thunder-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
.battle-shell.battle-zone-227 { --battle-zone-image: url("/images/background/battle-227-silver-hawk-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
.battle-shell.battle-zone-228 { --battle-zone-image: url("/images/background/battle-228-black-standard-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
.battle-shell.battle-zone-229 { --battle-zone-image: url("/images/background/battle-229-gold-lion-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
.battle-shell.battle-zone-230 { --battle-zone-image: url("/images/background/battle-230-sky-throne-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }

/* 2301〜2400F 紅蓮の誓剣城 */
.battle-shell.battle-zone-231 { --battle-zone-image: url("/images/background/battle-231-ember-gate-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
.battle-shell.battle-zone-232 { --battle-zone-image: url("/images/background/battle-232-ash-duel-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
.battle-shell.battle-zone-233 { --battle-zone-image: url("/images/background/battle-233-molten-hammer-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
.battle-shell.battle-zone-234 { --battle-zone-image: url("/images/background/battle-234-blue-flame-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
.battle-shell.battle-zone-235 { --battle-zone-image: url("/images/background/battle-235-thorn-bow-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
.battle-shell.battle-zone-236 { --battle-zone-image: url("/images/background/battle-236-thunder-judgment-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
.battle-shell.battle-zone-237 { --battle-zone-image: url("/images/background/battle-237-silver-oath-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
.battle-shell.battle-zone-238 { --battle-zone-image: url("/images/background/battle-238-obsidian-axe-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
.battle-shell.battle-zone-239 { --battle-zone-image: url("/images/background/battle-239-last-ember-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
.battle-shell.battle-zone-240 { --battle-zone-image: url("/images/background/battle-240-oath-throne-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }

/* 2401〜2500F 黒星の覇軍城 */
.battle-shell.battle-zone-241 { --battle-zone-image: url("/images/background/battle-241-blackstar-gate-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
.battle-shell.battle-zone-242 { --battle-zone-image: url("/images/background/battle-242-cinnabar-cavalry-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
.battle-shell.battle-zone-243 { --battle-zone-image: url("/images/background/battle-243-bronze-bell-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
.battle-shell.battle-zone-244 { --battle-zone-image: url("/images/background/battle-244-tealfang-bridge-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
.battle-shell.battle-zone-245 { --battle-zone-image: url("/images/background/battle-245-venom-hive-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
.battle-shell.battle-zone-246 { --battle-zone-image: url("/images/background/battle-246-amethyst-tribunal-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
.battle-shell.battle-zone-247 { --battle-zone-image: url("/images/background/battle-247-white-raven-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
.battle-shell.battle-zone-248 { --battle-zone-image: url("/images/background/battle-248-verdigris-bastion-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
.battle-shell.battle-zone-249 { --battle-zone-image: url("/images/background/battle-249-golden-wolf-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
.battle-shell.battle-zone-250 { --battle-zone-image: url("/images/background/battle-250-blackstar-throne-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }

/* 2501〜2600F 翠嵐の竜冠城 */
.battle-shell.battle-zone-251 { --battle-zone-image: url("/images/background/battle-251-emerald-gate-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
.battle-shell.battle-zone-252 { --battle-zone-image: url("/images/background/battle-252-red-gravel-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
.battle-shell.battle-zone-253 { --battle-zone-image: url("/images/background/battle-253-amber-bone-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
.battle-shell.battle-zone-254 { --battle-zone-image: url("/images/background/battle-254-blue-cascade-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
.battle-shell.battle-zone-255 { --battle-zone-image: url("/images/background/battle-255-venom-bloom-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
.battle-shell.battle-zone-256 { --battle-zone-image: url("/images/background/battle-256-violet-horn-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
.battle-shell.battle-zone-257 { --battle-zone-image: url("/images/background/battle-257-white-cloud-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
.battle-shell.battle-zone-258 { --battle-zone-image: url("/images/background/battle-258-green-iron-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
.battle-shell.battle-zone-259 { --battle-zone-image: url("/images/background/battle-259-gold-hunt-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
.battle-shell.battle-zone-260 { --battle-zone-image: url("/images/background/battle-260-dragon-crown-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }

/* Battle snapshot identity: readable names/descriptions above the existing skill cards. */
.party-detail-identity { display: grid; gap: 8px; padding: 12px 0; }
.party-detail-identity-card { min-width: 0; padding: 10px 12px; border: 1px solid currentColor; border-color: rgb(74 61 39 / 25%); border-radius: 4px; background: rgb(255 255 255 / 12%); overflow-wrap: anywhere; }
.party-detail-identity-card > small { display: block; font-size: var(--ga-font-note, .75rem); }
.party-detail-identity-card > strong { display: block; margin-top: 3px; font-size: var(--ga-font-body, .875rem); }
.party-detail-identity-card > p, .party-detail-trait-empty { margin: 6px 0 0; font-size: var(--ga-font-body, .875rem); line-height: 1.65; }
.party-detail-trait-disabled { font-weight: 700; }
/* Leave room for the enlarged weapon while keeping battle portraits at their feet. */
.party-detail-card .party-detail-art:has(.humanoid-companion-art) { height: 204px; place-items: end center; }
.party-detail-card .party-detail-art .actor-image.humanoid-companion-art { width: 100%; height: 158px; max-height: 158px; }

/* 2601〜2700F 赫晶の獣王砦 */
.battle-shell.battle-zone-261 { --battle-zone-image: url("/images/background/battle-261-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
.battle-shell.battle-zone-262 { --battle-zone-image: url("/images/background/battle-262-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
.battle-shell.battle-zone-263 { --battle-zone-image: url("/images/background/battle-263-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
.battle-shell.battle-zone-264 { --battle-zone-image: url("/images/background/battle-264-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
.battle-shell.battle-zone-265 { --battle-zone-image: url("/images/background/battle-265-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
.battle-shell.battle-zone-266 { --battle-zone-image: url("/images/background/battle-266-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
.battle-shell.battle-zone-267 { --battle-zone-image: url("/images/background/battle-267-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
.battle-shell.battle-zone-268 { --battle-zone-image: url("/images/background/battle-268-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
.battle-shell.battle-zone-269 { --battle-zone-image: url("/images/background/battle-269-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
.battle-shell.battle-zone-270 { --battle-zone-image: url("/images/background/battle-270-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }

/* 2701〜2800F 蒼鐘の星航宮 */
.battle-shell.battle-zone-271 { --battle-zone-image: url("/images/background/battle-271-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
.battle-shell.battle-zone-272 { --battle-zone-image: url("/images/background/battle-272-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
.battle-shell.battle-zone-273 { --battle-zone-image: url("/images/background/battle-273-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
.battle-shell.battle-zone-274 { --battle-zone-image: url("/images/background/battle-274-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
.battle-shell.battle-zone-275 { --battle-zone-image: url("/images/background/battle-275-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
.battle-shell.battle-zone-276 { --battle-zone-image: url("/images/background/battle-276-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
.battle-shell.battle-zone-277 { --battle-zone-image: url("/images/background/battle-277-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
.battle-shell.battle-zone-278 { --battle-zone-image: url("/images/background/battle-278-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
.battle-shell.battle-zone-279 { --battle-zone-image: url("/images/background/battle-279-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
.battle-shell.battle-zone-280 { --battle-zone-image: url("/images/background/battle-280-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }

/* Mobile touch areas: retain the compact header and existing actions. */
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .site-header { grid-template-columns: 44px minmax(0, 1fr) minmax(max-content, .85fr) minmax(44px, .65fr) 44px; gap: 2px; padding: 0 max(4px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left)); }
  .site-header :is(.hamburger-button, .notification-button) { width: 44px; height: 44px; min-height: 44px; }
  .site-header .header-stamina { min-height: 44px; }
  .site-header .header-stamina > .header-caption { top: 2px; }
  #header-stamina { align-content: center; }
  #header-stamina > .header-caption { top: 0; font-size: var(--ga-font-caption, .6875rem); }
  #header-stamina .header-stamina-value strong { margin-top: 0; font-family: inherit; font-size: 1rem; }
  #header-stamina .stamina-timer { color: var(--text); font-size: var(--ga-font-note, .75rem); font-weight: 700; }
  .site-header .wallet { position: relative; min-height: 44px; }
  .site-header .wallet > .currency:not(button) { position: absolute; top: 3px; right: 0; z-index: 1; max-width: 100%; pointer-events: none; }
  .site-header .crystal-balance-button { position: absolute; inset: 0; min-width: 44px; min-height: 44px; align-items: flex-end; justify-content: flex-end; padding-bottom: 4px; }
  .equipment-party-stage .home-party-arrow { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .chat-drawer-header { grid-template-columns: minmax(0, 1fr) auto; min-height: 44px; padding-block: 0; }
  .chat-drawer-title strong { white-space: normal; overflow-wrap: anywhere; }
  .chat-drawer-actions { justify-self: end; }
  .chat-drawer-actions :is(.chat-drawer-control, .chat-drawer-close) { min-width: 44px; min-height: 44px; height: 44px; }
  .chat-appearance { flex: 0 1 auto; min-height: 44px; max-height: 25dvh; overflow-y: auto; overscroll-behavior: contain; }
  .chat-appearance-choices button { min-height: 44px; }
  .chat-form :is(input, button) { min-height: 44px; }
  .chat-form input { font-size: max(16px, 1rem); }
  .chat-feed-panel { min-height: 106px; }
  .chat-feed-panel .chat-messages { flex: 1 1 0; padding-block: 8px; }
}
@media (max-width: 420px) {
  .inventory-part-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inventory-part-tab > span { font-size: var(--ga-font-caption); white-space: normal; overflow-wrap: anywhere; }
}

@media (max-height: 500px) and (pointer: coarse) {
  .inventory-control-deck { position: static; }
}

@media (min-width: 701px) and (max-height: 500px) and (pointer: coarse) {
  .chat-drawer { top: var(--app-header-height); bottom: 0; }
}

/* 2801〜2900F 黒曜の断層塔 */
.battle-shell.battle-zone-281 { --battle-zone-image: url("/images/background/battle-281-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
.battle-shell.battle-zone-282 { --battle-zone-image: url("/images/background/battle-282-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
.battle-shell.battle-zone-283 { --battle-zone-image: url("/images/background/battle-283-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
.battle-shell.battle-zone-284 { --battle-zone-image: url("/images/background/battle-284-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
.battle-shell.battle-zone-285 { --battle-zone-image: url("/images/background/battle-285-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
.battle-shell.battle-zone-286 { --battle-zone-image: url("/images/background/battle-286-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
.battle-shell.battle-zone-287 { --battle-zone-image: url("/images/background/battle-287-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
.battle-shell.battle-zone-288 { --battle-zone-image: url("/images/background/battle-288-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
.battle-shell.battle-zone-289 { --battle-zone-image: url("/images/background/battle-289-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
.battle-shell.battle-zone-290 { --battle-zone-image: url("/images/background/battle-290-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }

/* Arena preview and defense records: scoped to arena panels/dialogs. */
.arena-challenge-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.arena-challenge-dialog details { margin-block: 12px; min-width: 0; }
.arena-challenge-dialog summary { min-height: 44px; padding-block: 10px; cursor: pointer; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .arena-challenge-dialog { max-height: calc(100dvh - 8px); }
  .arena-screen .arena-opponent-actions { flex-wrap: wrap; }
  .arena-screen .arena-opponent-actions > button { flex: 1 1 140px; }
}

.arena-screen .arena-opponent-copy > strong,
.arena-screen .arena-team-member strong,
.arena-challenge-dialog .arena-team-member strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* Arena overview explanations: align with the inset rating plates. */
.arena-screen .arena-overview-panel > p.small {
  margin: 10px var(--ga-space-3, 12px);
  color: var(--muted);
  font-family: inherit;
  font-size: var(--ga-font-caption, .6875rem);
  font-weight: 400;
  line-height: 1.65;
}

/* Arena information is read on demand; the gate stays compact. */
.arena-help-entry { margin: 10px var(--ga-space-3, 12px); }
.arena-help-entry > button { font-size: var(--ga-font-note, .75rem); }
.arena-help-dialog { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100dvh - 32px); }
.arena-help-dialog > header, .arena-help-dialog > footer { flex: 0 0 auto; }
.arena-help-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 4px; }
.arena-help-dialog .arena-help-content p { font-size: var(--ga-font-note, .75rem); color: var(--muted); line-height: 1.8; overflow-wrap: anywhere; }
.arena-help-content h3 { font-size: var(--ga-font-body, .875rem); margin-block: 12px 8px; }
.arena-help-dialog > footer { display: flex; justify-content: flex-end; padding-block-start: 12px; }
@media (max-width: 600px) { .arena-help-dialog { max-height: calc(100dvh - 8px); } }

/* Arena help: readable rule lists, scoped to this dialog. */
.arena-help-dialog .arena-help-content ul {
  margin: 8px 0 16px;
  padding-inline-start: 1.4em;
  color: var(--muted);
  font-size: var(--ga-font-note, .75rem);
  line-height: 1.8;
  overflow-wrap: anywhere;
  list-style: disc;
}
.arena-help-dialog .arena-help-content li + li { margin-top: 8px; }
.arena-help-dialog .arena-help-content ul:last-child { margin-bottom: 0; }

/* One arena rating; attack/defense remain separate activity statistics. */
.arena-rating-summary { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 12px; padding: 12px 16px; border: 1px solid rgb(205 167 98 / 55%); border-radius: 3px; background: linear-gradient(135deg, rgb(205 167 98 / 12%), #0a1016); }
.arena-rating-summary > div { min-width: 0; }
.arena-rating-summary span { color: var(--muted); font-size: var(--ga-font-caption, .6875rem); letter-spacing: .1em; }
.arena-rating-summary h2 { margin: 4px 0 8px; font-size: var(--ga-font-body, .875rem); }
.arena-rating-summary strong { font-family: Georgia, "Times New Roman", serif; color: #f1dfbd; font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.arena-rating-summary .arena-rating-stats p { margin: 4px 0; color: var(--muted); font-size: var(--ga-font-note, .75rem); overflow-wrap: anywhere; }
.home-arena-ratings.home-arena-ratings-single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 380px) { .arena-rating-summary { flex-wrap: wrap; gap: 8px 16px; } }

/* Arena overview: reuse the loaded unified rank, with a static medal accent. */
.arena-rating-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.arena-rating-summary .arena-rating-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; border-top: 1px solid rgb(205 167 98 / 20%); padding-top: 8px; }
.arena-overview-rank { --arena-rank-rgb: 205 167 98; position: relative; display: grid; justify-items: center; align-content: center; min-width: 0; padding: 8px; border: 1px solid rgb(var(--arena-rank-rgb) / 45%); border-radius: 3px; background: radial-gradient(ellipse at 50% 15%, rgb(var(--arena-rank-rgb) / 20%), transparent 75%), linear-gradient(145deg, #1b2027, #0b1017); box-shadow: inset 0 0 0 3px rgb(var(--arena-rank-rgb) / 6%), 0 0 18px rgb(var(--arena-rank-rgb) / 8%); }
.arena-overview-rank::before, .arena-overview-rank::after { position: absolute; width: 14px; height: 14px; content: ""; border-color: rgb(var(--arena-rank-rgb) / 75%); border-style: solid; pointer-events: none; }
.arena-overview-rank::before { left: 3px; top: 3px; border-width: 1px 0 0 1px; }
.arena-overview-rank::after { right: 3px; bottom: 3px; border-width: 0 1px 1px 0; }
.arena-overview-rank-silver { --arena-rank-rgb: 188 210 224; }
.arena-overview-rank-bronze { --arena-rank-rgb: 196 143 106; }
.arena-rating-summary .arena-overview-rank-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; color: rgb(var(--arena-rank-rgb)); }
.arena-overview-rank-heading svg { width: 24px; height: 20px; fill: rgb(var(--arena-rank-rgb) / 22%); stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.arena-rating-summary .arena-overview-rank-heading > span { color: inherit; font-size: var(--ga-font-caption, .6875rem); letter-spacing: .08em; }
.arena-rating-summary .arena-overview-rank-value { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 4px; margin: 4px 0; max-width: 100%; color: rgb(var(--arena-rank-rgb)); line-height: 1.1; text-shadow: 0 0 18px rgb(var(--arena-rank-rgb) / 30%); }
.arena-overview-rank-value b { min-width: 0; max-width: 100%; font-size: clamp(2rem, 7vw, 2.75rem); font-weight: 500; overflow-wrap: anywhere; }
.arena-overview-rank-value small { font-family: inherit; font-size: var(--ga-font-body, .875rem); font-weight: 500; }
.arena-rating-summary .arena-overview-rank-caption { color: var(--muted); font-size: var(--ga-font-caption, .6875rem); letter-spacing: 0; text-align: center; overflow-wrap: anywhere; }
.arena-overview-rank-pending { --arena-rank-rgb: 155 166 177; }

/* Candidate rows expose one battle entry; detailed builds stay in defense/history. */
.arena-screen .arena-opponent-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; }
.arena-opponent-identity { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.arena-opponent-identity > div { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.arena-opponent-identity strong { font-size: var(--ga-font-body, .875rem); }
.arena-opponent-identity span, .arena-opponent-identity small { color: var(--muted); font-size: var(--ga-font-note, .75rem); }
.arena-opponent-identity b { color: var(--gold, #cda762); }
.arena-screen .arena-opponent-entry > button { min-width: 4em; min-height: 48px; padding-inline: 12px; }
#arena-challenge-dialog .arena-challenge-actions { display: flex; flex-wrap: wrap; }
#arena-challenge-dialog .arena-challenge-actions > button { flex: 1 1 100px; }

.arena-opponent-identity > .arena-opponent-avatar { width: 44px; height: 44px; }
.arena-opponent-identity .arena-opponent-avatar .actor-image { width: 42px; height: 42px; }

/* Arena: inset auxiliary actions and an independent armory dialog. */
.arena-screen .arena-gate-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 16px 16px; }
.arena-gate-actions > .text-button { flex: 0 0 auto; color: var(--muted); }
.arena-screen .arena-last-practice { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; max-width: 100%; min-height: 56px; padding: 12px 16px; border-color: rgb(205 167 98 / 42%); }
.arena-last-practice > span { display: grid; gap: 4px; text-align: left; overflow-wrap: anywhere; }
.arena-last-practice small { color: var(--gold); font-size: var(--ga-font-caption); letter-spacing: .1em; }
.arena-last-practice b { color: var(--gold); font-size: 1.5rem; font-weight: 400; }
.arena-kit-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgb(2 5 10 / 86%); }
.tower-gambit-backdrop { z-index: 199; }
.arena-kit-dialog { display: flex; flex-direction: column; width: min(760px, 100%); max-height: calc(100dvh - 32px); min-height: 0; overflow: hidden; border: 1px solid rgb(205 167 98 / 55%); border-radius: 4px; background: linear-gradient(145deg, #19212a, #0a1018 70%); box-shadow: 0 16px 60px #000, inset 0 0 0 3px rgb(205 167 98 / 6%); }
.arena-kit-dialog > header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 8px; }
.arena-kit-dialog > header > .icon-button { flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.arena-kit-dialog header small { color: var(--gold); font-size: var(--ga-font-caption); letter-spacing: .12em; }
.arena-kit-dialog h2 { margin: 4px 0 0; font-size: var(--ga-font-page); }
.arena-kit-dialog .arena-kit-intro { flex: 0 0 auto; margin: 0; padding: 0 16px 12px; color: var(--muted); font-size: var(--ga-font-note); line-height: 1.6; }
.arena-kit-dialog button { min-width: 0; overflow-wrap: anywhere; }
.arena-kit-members, .arena-kit-sections, .arena-kit-categories { display: flex; gap: 8px; }
.arena-kit-categories { flex-wrap: wrap; }
.arena-kit-dialog .arena-kit-categories > button { flex: 1 1 80px; }
.arena-kit-members { flex: 0 0 auto; padding: 0 16px 12px; border-bottom: 1px solid rgb(205 167 98 / 25%); }
.arena-kit-members > button, .arena-kit-sections > button, .arena-kit-categories > button { flex: 1 1 0; padding-inline: 8px; }
.arena-kit-scroll { flex: 1 1 auto; min-height: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.character-combat-control .arena-gambit-entry { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--ga-action-height); padding: 8px; border-top: 1px solid var(--line); border-radius: 0; color: var(--text); text-align: left; }
.character-combat-options + .arena-gambit-entry { margin-top: 4px; }
.arena-gambit-entry > span, .party-combat-shared { display: grid; gap: 4px; min-width: 0; }
.arena-gambit-entry small, .party-combat-shared small { font-size: var(--ga-font-note); color: var(--muted); }
.arena-gambit-entry i { color: var(--selected-text); font-style: normal; }
.character-combat-control .arena-gambit-entry:enabled:hover { background: var(--selected-bg); }
.arena-gambit-entry:disabled { opacity: .5; cursor: not-allowed; }
.arena-gambit { display: grid; gap: 8px; }
.arena-gambit-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; margin-top: 8px; }
.arena-gambit :is(.arena-gambit-heading, .arena-gambit-fallback) h3 { margin: 0; font-size: var(--ga-font-section); }
.arena-gambit-heading > span { color: var(--muted); font-size: var(--ga-font-note); font-variant-numeric: tabular-nums; }
.arena-gambit > .arena-kit-footnote { margin: 0; }
.arena-gambit-empty { margin: 0; padding: 12px; border-radius: 8px; background: var(--armory-panel); color: var(--muted); font-size: var(--ga-font-note); }
.arena-gambit-list { list-style: none; margin: 0; padding: 0; border-radius: 8px; background: var(--armory-panel); }
.arena-gambit-list > li + li { border-top: 1px solid var(--armory-divider); }
.arena-gambit-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: left; cursor: grab; -webkit-touch-callout: none; user-select: none; }
.arena-gambit-row:is([aria-expanded="true"], .is-drop-target), .arena-gambit-row:enabled:hover { background: var(--armory-highlight); }
.arena-gambit-row:focus-visible { outline-offset: -2px; }
.arena-gambit-row i { font-style: normal; }
.arena-gambit-chevron { color: var(--muted); }
.arena-gambit-row[aria-expanded="true"] .arena-gambit-chevron { transform: rotate(180deg); }
.arena-gambit-order, .arena-gambit-log-label { color: var(--gold-strong); font-size: var(--ga-font-caption); font-variant-numeric: tabular-nums; }
.arena-gambit-order { align-self: start; display: flex; gap: 4px; align-items: center; padding: 4px; border-radius: 4px; background: var(--armory-highlight); font-weight: 700; }
.arena-gambit-order i { color: var(--muted); }
.arena-gambit-rule { display: grid; min-width: 0; gap: 4px; overflow-wrap: anywhere; }
.arena-gambit-trigger { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; color: var(--muted); }
.arena-gambit-trigger small { font-size: var(--ga-font-note); }
.arena-gambit-trigger small:first-child { color: var(--text); }
.arena-gambit-rule strong { font-size: var(--ga-font-body); }
.arena-gambit-rule strong i, .arena-gambit .arena-gambit-add { color: var(--selected-text); }
.arena-gambit-rule em { color: var(--gold-strong); font-size: var(--ga-font-note); font-style: normal; }
.arena-gambit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.gambit-field { display: grid; min-width: 0; gap: 4px; font-size: var(--ga-font-note); color: var(--muted); }
#arena-loadout-dialog .gambit-field-trigger { display: flex; min-width: 0; min-height: var(--ga-action-height); align-items: center; justify-content: space-between; gap: 8px; padding-inline: 8px; border-color: var(--armory-divider); border-radius: 6px; background: var(--surface); box-shadow: none; text-align: left; }
.gambit-field-trigger i, .gambit-picker-options i { flex: none; color: var(--selected-text); font-style: normal; }
.party-team-picker-dialog.gambit-picker { width: min(460px, calc(100% - 16px)); padding: 0; max-height: min(640px, calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)))); }
.gambit-picker:not([open]) { display: none; }
.gambit-picker::backdrop { background: rgb(5 10 16 / 78%); }
.gambit-picker .party-team-picker-heading { grid-template-columns: minmax(0, 1fr) 44px; }
.gambit-picker .party-team-picker-results { padding-top: 8px; }
.gambit-picker-options { display: grid; gap: 4px; }
.gambit-picker-options.is-numeric { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gambit-picker .gambit-picker-options .secondary-button { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 8px; border-color: var(--line); background: var(--surface); box-shadow: none; text-align: left; }
.gambit-picker .gambit-picker-options button[aria-pressed="true"] { border-color: var(--selected-border); background: var(--selected-bg); color: var(--selected-text); }
.gambit-picker-options button small { display: block; color: var(--muted); font-size: var(--ga-font-note); }
.gambit-picker .gambit-picker-options.is-numeric button { position: relative; justify-content: center; padding: 10px 2px 6px; }
.gambit-picker-options.is-numeric i { position: absolute; inset: 1px 3px auto auto; font-size: var(--ga-font-caption); }
.arena-gambit-edit-actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 4px; border-top: 1px solid var(--armory-divider); }
.arena-gambit-edit-actions > button:last-child { margin-inline-start: auto; }
.arena-gambit .arena-gambit-add { justify-self: start; }
.arena-gambit-fallback { display: grid; gap: 8px; padding: 12px; border-radius: 8px; background: var(--armory-panel); }
.orb-drag-ghost.arena-gambit-ghost { display: grid; place-items: center; padding: 4px 8px; color: var(--text); background: var(--surface-2); border: 1px solid var(--gold-strong); border-radius: 4px; font-size: var(--ga-font-note); }
@media (max-width: 420px) { .arena-gambit-fields { grid-template-columns: minmax(0, 1fr); } }
.arena-kit-caption, .arena-kit-picker-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-block: 12px; }
.arena-kit-dialog h3 { margin: 0; font-size: var(--ga-font-section); overflow-wrap: anywhere; }
.arena-kit-caption > span { color: var(--muted); font-size: var(--ga-font-note); }
.arena-kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.arena-kit-dialog .arena-kit-slot { position: relative; display: grid; align-content: start; gap: 4px; padding: 12px 24px 12px 12px; min-height: 86px; text-align: left; }
.arena-kit-slot > small { color: var(--gold); font-size: var(--ga-font-caption); }
.arena-kit-slot > strong { font-size: var(--ga-font-item-name, .8125rem); font-weight: 500; }
.arena-kit-slot > span, .arena-kit-footnote { color: var(--muted); font-size: var(--ga-font-note); line-height: 1.6; }
.arena-kit-slot > b { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--gold); }
.arena-kit-dialog .arena-kit-orb { padding-right: 12px; }
.arena-kit-orbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.arena-kit-dormant { border-style: dashed; }
.arena-kit-dialog > footer { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; border-top: 1px solid rgb(205 167 98 / 25%); background: rgb(5 10 16 / 75%); }
.arena-kit-dialog footer > span { color: var(--muted); font-size: var(--ga-font-note); }
.arena-kit-dialog footer > p { flex-basis: 100%; margin: 0; font-size: var(--ga-font-body); }
.arena-kit-options { display: grid; gap: 8px; margin-top: 12px; }
.arena-kit-dialog .arena-kit-option { display: grid; gap: 4px; padding: 12px; text-align: left; }
.arena-kit-option > strong { font-size: var(--ga-font-body); }
.arena-kit-option > small, .arena-kit-option > span { font-size: var(--ga-font-note); color: var(--muted); line-height: 1.6; }
.arena-kit-search { display: grid; gap: 8px; margin-block: 12px; font-size: var(--ga-font-note); }
.arena-kit-search :is(input, select) { width: 100%; min-width: 0; }
.arena-kit-equipment-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(104px, 0.6fr); gap: 8px; margin-block: 12px; }
.arena-kit-equipment-controls .arena-kit-search { min-width: 0; margin: 0; }
.arena-kit-error { flex: 0 0 auto; margin: 0; padding: 8px 16px; color: var(--danger, #ffb7ad); font-size: var(--ga-font-note); }
@media (max-width: 480px) {
  .arena-screen .arena-gate-actions { margin-inline: 12px; }
  .arena-screen .arena-last-practice { flex: 1 1 220px; }
  .arena-kit-backdrop { padding: 8px; }
  .tower-gambit-backdrop { padding-block: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-bottom)); }
  .tower-gambit-backdrop .arena-kit-dialog { max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))); }
  .arena-kit-dialog { max-height: calc(100dvh - 16px); }
  .arena-kit-dialog > header, .arena-kit-scroll { padding: 12px; }
  .arena-kit-members { padding-inline: 12px; }
  .arena-kit-dialog .arena-kit-slot { padding-left: 8px; }
  .arena-kit-orbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arena-kit-dialog > footer { padding: 12px; }
  .arena-kit-dialog footer > .primary-button { width: 100%; }
}

/* Arena standings share the player's chosen rank cosmetics; records are paged cards. */
.arena-screen .arena-ranking-list > div { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; }
.arena-ranking-position { display: grid; justify-items: center; align-self: start; padding-top: 4px; }
.arena-my-rank > strong { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.arena-ranking-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; overflow-wrap: anywhere; }
.arena-ranking-identity > strong { min-width: 0; font-size: var(--ga-font-body, .875rem); }
.arena-ranking-self { color: var(--gold); font-size: var(--ga-font-caption, .6875rem); font-weight: 400; }
.arena-ranking-title { min-width: 0; max-width: 100%; color: var(--muted); font-size: var(--ga-font-note, .75rem); overflow-wrap: anywhere; }
.arena-ranking-title .ga-rank-title { max-width: 100%; font-size: var(--ga-font-note, .75rem); }
.arena-ranking-title .ga-rank-title-name { white-space: normal; overflow-wrap: anywhere; }
.arena-ranking-title .ga-rank-title-emblem { flex: none; }
.arena-overview-rank-value .ga-rank-frame[data-rank-frame] { width: 60px; height: 60px; padding: 6px; }
.arena-screen .arena-overview-rank-value .ga-rank-frame:not(.is-long) .ga-rank-copy > strong { font-size: 1.625rem; }
.arena-overview-rank-value .ga-rank-copy > small { font-size: var(--ga-font-caption, .6875rem); }

/* Arena history shares the armory's low-contrast surfaces and selected controls. */
#arena-lobby .arena-view-content > .arena-history-panel {
  --history-panel: rgb(8 17 25 / 48%);
  --history-divider: rgb(168 188 204 / 20%);
  --history-highlight: rgb(117 177 214 / 15%);
  min-width: 0; padding: 12px; border-color: rgb(168 188 204 / 36%); border-radius: 10px;
  overflow-wrap: anywhere; scroll-margin-top: calc(var(--app-header-height, 0px) + 8px);
}
@media (min-width: 701px) {
  #arena-lobby:is(.arena-mode-history, .arena-mode-ranking) > .arena-view-content { margin-bottom: 64px; }
}
#arena-lobby .arena-history-panel::before { content: none; }
.arena-history-panel > h2 { margin: 0 0 12px; font-size: var(--ga-font-page); }
.arena-history-controls {
  display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-block: 12px;
}
.arena-history-controls > label {
  display: grid; flex: 1 1 8rem; gap: 4px; min-width: 0; color: var(--muted); font-size: var(--ga-font-note);
}
#arena-lobby .arena-history-controls select {
  width: 100%; min-width: 0; min-height: 44px; padding-inline: 8px;
  border-color: rgb(168 188 204 / 42%); border-radius: 7px; background: var(--surface-deep);
  color: var(--text); font-size: max(16px, 1rem);
}
#arena-lobby .arena-history-panel :is(.library-view-tabs, .library-status-filters) {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 4px; padding: 4px; border-radius: 8px; background: var(--history-panel);
}
#arena-lobby .arena-history-panel .library-status-filters { flex: 1 1 10rem; }
#arena-lobby .arena-history-panel :is(.library-view-tabs, .library-status-filters) > button {
  min-width: 0; min-height: 44px; padding: 4px; border: 0; border-radius: 5px;
  background: transparent; box-shadow: none; color: var(--muted); font-size: var(--ga-font-note); white-space: normal;
}
#arena-lobby .arena-history-panel :is(.library-view-tabs, .library-status-filters) > button[aria-pressed="true"] {
  background: var(--history-highlight); box-shadow: inset 0 -2px var(--selected-border); color: var(--selected-text);
}
.arena-history-panel > p:not(.arena-history-loading) { margin: 0; color: var(--muted); font-size: var(--ga-font-note); }
.arena-history-list {
  display: grid; margin-block: 12px; border-radius: 9px; background: var(--history-panel);
}
.arena-history-panel .arena-record-card {
  --record-accent: var(--gold-strong);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center; gap: 4px 8px; min-width: 0; padding: 12px 12px 4px;
}
.arena-history-panel .arena-record-card + .arena-record-card { border-top: 1px solid var(--history-divider); }
.arena-history-panel .arena-record-card.is-loss { --record-accent: #f0b9c2; }
.arena-record-card > header {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px;
}
.arena-record-result {
  padding: 2px 8px; border-radius: 999px; color: var(--record-accent);
  background: color-mix(in srgb, var(--record-accent) 12%, transparent); font-size: var(--ga-font-note);
}
.arena-record-card time { color: var(--muted); font-size: var(--ga-font-note); }
.arena-record-matchup {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) fit-content(47%);
  align-items: center; gap: 8px; padding-block: 4px;
}
.arena-record-matchup > span:first-child { color: var(--muted); font-size: var(--ga-font-caption); }
.arena-record-matchup > h3 { min-width: 0; margin: 0; font-size: var(--ga-font-section); line-height: 1.4; }
.arena-record-delta { display: grid; justify-items: end; min-width: 0; color: var(--text); text-align: end; }
.arena-record-delta small { color: var(--muted); font-size: var(--ga-font-caption); }
.arena-record-delta b { font-size: 1.0625rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.arena-record-delta.positive { color: var(--gold); }
.arena-record-delta.negative { color: #deb0b8; }
.arena-record-facts { display: flex; flex-wrap: wrap; gap: 2px 8px; color: var(--muted); font-size: var(--ga-font-note); }
#arena-lobby .arena-history-panel :is(.arena-record-card > button, .arena-history-pagination > button, .arena-history-detail > button) {
  min-width: 0; min-height: 44px; padding: 4px 8px; border: 0; border-radius: 6px;
  background: transparent; color: #b4d3e8; box-shadow: none; font-size: var(--ga-font-note); white-space: normal;
}
#arena-lobby .arena-history-panel button:enabled:hover { background: var(--history-highlight); }
.arena-record-card > button { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.arena-history-pagination {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 8px; padding: 4px; border-radius: 8px; background: var(--history-panel);
}
.arena-history-pagination > span { display: grid; text-align: center; color: var(--text); font-size: var(--ga-font-body); }
.arena-history-pagination small { color: var(--muted); font-size: var(--ga-font-caption); }
.arena-history-detail {
  min-width: 0; margin-top: 12px; padding: 12px; border-radius: 9px; background: var(--history-panel);
  scroll-margin-top: calc(var(--app-header-height, 0px) + 8px);
}
.arena-history-detail h3 { margin: 0; font-size: var(--ga-font-section); }
.arena-history-detail > p { margin-block: 4px 8px; color: var(--muted); font-size: var(--ga-font-note); }
.arena-history-detail > details { border-top: 1px solid var(--history-divider); }
.arena-history-detail summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
.arena-history-logs { max-height: 50dvh; margin-block: 4px 8px; padding-inline-start: 24px; overflow-y: auto; }
.arena-history-logs li { padding-block: 4px; font-size: var(--ga-font-body); }

/* Arena ordinal ladder and local history transitions, 2026-10-29. */
.arena-history-panel { position: relative; }
.arena-history-panel[aria-busy="true"] .arena-history-list { opacity: .6; }
.arena-history-loading { position: absolute; inset: 88px 12px auto; display: flex; gap: 8px; align-items: center; justify-content: center; padding: 12px; background: var(--surface); border: 1px solid var(--history-divider); border-radius: 8px; pointer-events: none; }
.arena-ladder-screen .arena-ladder-intro h2 { font-size: var(--ga-font-section); line-height: 1.6; margin: 8px 0; }
.arena-ladder-screen .arena-ladder-intro p { font-size: var(--ga-font-note); color: var(--muted); margin: 0; }
.arena-ladder-challenge { display: grid; gap: 12px; margin: 16px 0 24px; }
.arena-ladder-challenge p { margin: 0; font-size: var(--ga-font-body); line-height: 1.8; }
.arena-ladder-challenge > small { color: var(--muted); font-size: var(--ga-font-note); line-height: 1.6; }
.arena-ladder-challenge > button { display: grid; gap: 4px; width: 100%; min-height: 68px; padding: 12px; }
.arena-ladder-challenge > button > span { font-size: var(--ga-font-section); }
.arena-ladder-challenge > button > small { font-size: var(--ga-font-note); font-weight: normal; white-space: normal; }
.arena-ladder-candidates-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--ga-font-section); margin: 0 0 12px; }
.arena-ladder-candidates-heading > small { font-size: var(--ga-font-note); color: var(--muted); font-weight: normal; }
.arena-ladder-screen .arena-ranking-list em small { font-size: var(--ga-font-caption); font-style: normal; }
.arena-ladder-screen .arena-opponent-identity > div { min-width: 0; overflow-wrap: anywhere; }
.arena-result-rank { font-size: var(--ga-font-body); }
.arena-result-rank strong { color: var(--gold); }

.arena-ladder-screen .arena-ladder-intro h2 > span { display: block; font: inherit; letter-spacing: normal; color: inherit; }

/* Arena results: summary above actions, isolated from exploration result controls. */
.battle-shell .post-battle-actions.arena-result-actions {
  --arena-result-accent: #eacb8d;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  flex: 0 0 auto; width: 100%; min-width: 0; margin-top: 8px; padding: 12px;
  border: 1px solid rgb(var(--battle-deck-gold, 205 167 98) / 32%); border-radius: var(--ga-radius-panel);
  background: linear-gradient(135deg, rgb(22 29 34 / 98%), rgb(8 14 20 / 98%));
  box-shadow: inset 0 1px rgb(255 239 190 / 7%), 0 4px 16px rgb(0 0 0 / 20%);
  text-align: left;
}
.battle-shell .arena-result-actions.is-loss { --arena-result-accent: #d4a9a8; }
.arena-result-copy { display: grid; gap: 4px; min-width: 0; }
.arena-result-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.arena-result-title > strong { color: var(--arena-result-accent); font-size: var(--ga-font-page); line-height: 1.35; }
.arena-result-title > span { color: var(--muted); font-size: var(--ga-font-note); }
.arena-result-title > small { margin-left: auto; color: var(--arena-result-accent); font-size: var(--ga-font-caption); letter-spacing: .12em; }
.arena-result-copy > p { margin: 0; min-width: 0; line-height: 1.55; overflow-wrap: anywhere; }
.arena-result-opponent { color: var(--text); font-size: var(--ga-font-body); }
.arena-result-note { color: var(--muted); font-size: var(--ga-font-note); }
.arena-result-copy > .arena-result-rank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--ga-font-note); }
.arena-result-rank > span { color: var(--muted); }
.arena-result-copy .arena-result-rank > strong { color: var(--arena-result-accent); font-size: var(--ga-font-section); font-variant-numeric: tabular-nums; }
.arena-result-rank i { padding-inline: 4px; font-style: normal; color: var(--muted); }
.arena-result-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.arena-result-buttons > button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 0; min-height: 48px; white-space: nowrap; }
.arena-result-buttons > button:only-child { grid-column: 1 / -1; }
@media (min-width: 680px) {
  .battle-shell .post-battle-actions.arena-result-actions { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); align-items: center; gap: 16px; }
}

/* Arena standings show position and identity without lifetime match counters. */
.arena-ladder-screen .arena-ranking-list > div { grid-template-columns: 44px minmax(0, 1fr); }

#arena-lobby .arena-opponent-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#arena-lobby .arena-opponent-list > .empty-state { grid-column: 1 / -1; }
#arena-lobby .arena-opponent-entry { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: stretch; gap: 8px; min-width: 0; padding: 4px 0; text-align: center; }
#arena-lobby .arena-opponent-identity { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: center; gap: 4px; }
#arena-lobby .arena-opponent-identity > div { width: 100%; justify-items: center; gap: 2px; }
#arena-lobby .arena-opponent-avatar { width: min(100%, 92px); height: auto; aspect-ratio: 1; overflow: visible; border: 0; background: radial-gradient(ellipse at 50% 76%, rgb(132 196 218 / 17%), transparent 66%); }
#arena-lobby .arena-opponent-avatar .actor-image { width: 100%; height: 100%; filter: drop-shadow(0 4px 5px rgb(0 0 0 / 42%)); }
#arena-lobby .arena-opponent-entry > button { width: 100%; min-width: 0; padding-inline: 2px; border-color: transparent; background: var(--primary-bg); box-shadow: none; white-space: normal; }
#arena-lobby .arena-opponent-entry > button:enabled:hover { background: var(--primary-hover); }
#arena-lobby .arena-refresh-button { min-height: 44px; border-color: transparent; background: transparent; }
.arena-recent-results { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--line); }
.arena-recent-results h3, .arena-recent-results ol { margin: 0; }
.arena-recent-results h3 { font-size: var(--ga-font-section); }
.arena-recent-results ol { padding: 0; list-style: none; }
.arena-recent-results li { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid var(--line); font-size: var(--ga-font-body); overflow-wrap: anywhere; }
.arena-recent-results li > strong { border-radius: 4px; text-align: center; }
.arena-recent-results .is-win { background: rgb(224 177 93 / 15%); color: #ffdc87; }
.arena-recent-results .is-loss { background: rgb(137 183 211 / 14%); color: #c9e4f5; }
.arena-recent-results li > small { color: var(--muted); font-size: var(--ga-font-note); }

/* Compact equipment member selection after removing the portrait stage. */
.equipment-deck-shell .equipment-member-deck-compact { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px 12px; }
.equipment-member-deck-compact .equipment-member-deck-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; padding-right: 32px; }
.equipment-member-deck-compact .equipment-member-deck-heading > span { flex: 1; min-width: 0; gap: 4px; }
.equipment-member-deck-compact .equipment-member-deck-heading small { color: var(--muted); font-size: var(--ga-font-note, .75rem); letter-spacing: normal; line-height: 1.5; }
.equipment-member-deck-compact .equipment-member-deck-heading strong { font-family: inherit; font-size: var(--ga-font-body, .875rem); line-height: 1.5; overflow-wrap: anywhere; }
.equipment-member-deck-compact .equipment-member-deck-heading em { color: var(--muted); max-width: 42%; min-width: 0; font-size: var(--ga-font-note, .75rem); line-height: 1.5; letter-spacing: normal; text-align: right; overflow-wrap: anywhere; }
.equipment-member-deck-compact .equipment-member-selector { width: 100%; }

/* Saved magic orbs in the unused eighth equipment cell. */
.equipment-deck-shell .hero-equipped-list:has(> .hero-equipped-orbs) .hero-equipped-accessory { grid-column: auto; }
.equipment-deck-shell .equipment-loadout-board .hero-equipped-list .hero-equipped-orbs { grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 4px; row-gap: 4px; }
.equipment-deck-shell .equipment-loadout-board .hero-equipped-orbs dt { display: block; min-width: 0; color: var(--muted); font-size: var(--ga-font-note, .75rem); line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.equipment-deck-shell .equipment-loadout-board .hero-equipped-orbs dd { align-self: center; font-size: var(--ga-font-note, .75rem); font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; }
.equipment-deck-shell .equipment-loadout-board .hero-equipped-orbs dd.has-dormant-orbs { color: var(--warning, #e7bd72); }

/* Conservative equipment improvements for active party members. */
.equipment-member-deck-compact .equipment-member-button { position: relative; }
.equipment-upgrade-dot { position: absolute; z-index: 3; top: 3px; right: 3px; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: #ff4038; box-shadow: 0 0 0 1px rgb(0 0 0 / 35%); pointer-events: none; }
#navigation > button[data-tab="equipment"].has-equipment-upgrade::after { position: absolute; top: 4px; right: 6px; bottom: auto; left: auto; width: 10px; height: 10px; aspect-ratio: auto; border: 2px solid var(--surface); border-radius: 50%; background: #ff4038; content: ""; opacity: 1; transform: none; animation: none; pointer-events: none; }
.equipment-deck-shell .equipment-upgrade-hint, .equipment-accordion-stack .equipment-upgrade-hint { color: #ffb0a9; font-size: var(--ga-font-note, .75rem); line-height: 1.5; white-space: nowrap; }

.equipment-member-deck-compact .equipment-member-button:has(.equipment-upgrade-dot) { filter: none; opacity: 1; }
.equipment-member-deck-compact .equipment-member-button:has(.equipment-upgrade-dot):not(.active) .equipment-member-thumb { filter: grayscale(1) brightness(.62); opacity: .38; }

/* A single, quiet opportunity in the plaza's preparation area. */
.home-room-actions > .home-orb-opportunity-slot { grid-column: 1 / -1; min-width: 0; }
.home-orb-opportunity-slot:empty { display: none; }
.home-orb-opportunity { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; min-width: 0; border: 1px solid var(--ga-control-border, #8b755b); border-radius: var(--ga-radius-panel, 4px); background: var(--surface, #171d25); }
.home-orb-opportunity button { min-width: 0; min-height: 44px; border: 0; background: none; box-shadow: none; color: var(--text); }
.home-orb-opportunity .home-orb-opportunity-open { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 8px 10px; text-align: left; }
.home-orb-opportunity-open > span { flex: 1; min-width: 0; }
.home-orb-opportunity-open small { display: block; margin-bottom: 4px; color: var(--accent, #d9bc80); font-size: var(--ga-font-note, .75rem); line-height: 1.5; }
.home-orb-opportunity-open strong { display: block; font-family: inherit; font-size: var(--ga-font-body, .875rem); font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.home-orb-opportunity-close { align-self: start; width: 44px; padding: 0; font-size: 1.25rem; }
.orb-suggestion-context { margin: 8px 12px; padding: 10px; border: 1px solid var(--ga-control-border, #8b755b); background: var(--surface); font-size: var(--ga-font-body, .875rem); line-height: 1.5; }
.orb-suggestion-context p { margin: 6px 0; }
.orb-suggestion-context span, .orb-suggestion-context small { display: block; font-size: var(--ga-font-note, .75rem); line-height: 1.5; }

/* The equipped slots link to the corresponding warehouse part. */
.equipment-deck-shell .hero-equipped-slot:not(.hero-equipped-orbs) { min-height: 44px; }
.equipment-deck-shell .hero-equipped-part-label { display: inline-flex; align-items: center; gap: 4px; }
.equipment-deck-shell .equipment-part-upgrade-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ff4038; box-shadow: 0 0 0 1px rgb(0 0 0 / 35%); }
.equipment-deck-shell .hero-equipped-slot .equipment-part-inventory-target { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: inherit; background: none; box-shadow: none; }
.equipment-deck-shell .equipment-part-inventory-target:focus-visible { outline: 2px solid var(--accent, #d9bc80); outline-offset: -2px; }

/* Account-level sale settings, scoped to the inventory panel. */
.equipment-auto-sale { margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: var(--ga-font-body, 1rem); }
.ga-ui .equipment-auto-sale > summary { min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-color: var(--accent-border-strong); cursor: pointer; list-style: none; text-align: left; }
.equipment-auto-sale > summary::-webkit-details-marker { display: none; }
.equipment-auto-sale-heading { display: grid; gap: 4px; min-width: 0; }
.equipment-auto-sale-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--ga-font-section); font-weight: 700; }
.equipment-auto-sale-status { padding: 0 4px; border: 1px solid var(--ga-control-border); border-radius: 3px; background: var(--inset); color: var(--muted); font-size: var(--ga-font-note); }
.equipment-auto-sale-status.is-enabled { border-color: var(--selected-border); background: var(--selected-end); color: var(--selected-text); }
.equipment-auto-sale-current { color: var(--muted); font-size: var(--ga-font-note); overflow-wrap: anywhere; }
.equipment-auto-sale-toggle { display: flex; align-items: center; gap: 8px; color: var(--gold-strong); font-size: var(--ga-font-note); white-space: nowrap; }
.equipment-auto-sale-chevron { display: inline-block; font-size: var(--ga-font-section); }
.equipment-auto-sale:not([open]) .when-open, .equipment-auto-sale[open] .when-closed { display: none; }
.equipment-auto-sale[open] .equipment-auto-sale-chevron { transform: rotate(180deg); }
.equipment-auto-sale p, .equipment-auto-sale-result { font-size: var(--ga-font-note, .857rem); line-height: 1.65; overflow-wrap: anywhere; }
.equipment-auto-sale fieldset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; margin: 12px 0; padding: 0; border: 0; }
.equipment-auto-sale input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; padding: 8px; font-size: max(1rem, 16px); }
.equipment-auto-sale .primary-button { width: 100%; min-height: 48px; }

/* 2901〜3000F 深緑の根冠塔 */
.battle-shell.battle-zone-291 { --battle-zone-image: url("/images/background/battle-2901-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
.battle-shell.battle-zone-292 { --battle-zone-image: url("/images/background/battle-2911-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
.battle-shell.battle-zone-293 { --battle-zone-image: url("/images/background/battle-2921-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
.battle-shell.battle-zone-294 { --battle-zone-image: url("/images/background/battle-2931-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
.battle-shell.battle-zone-295 { --battle-zone-image: url("/images/background/battle-2941-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
.battle-shell.battle-zone-296 { --battle-zone-image: url("/images/background/battle-2951-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
.battle-shell.battle-zone-297 { --battle-zone-image: url("/images/background/battle-2961-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
.battle-shell.battle-zone-298 { --battle-zone-image: url("/images/background/battle-2971-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
.battle-shell.battle-zone-299 { --battle-zone-image: url("/images/background/battle-2981-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
.battle-shell.battle-zone-300 { --battle-zone-image: url("/images/background/battle-2991-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
.battle-shell.battle-zone-301 { --battle-zone-image: url("/images/background/battle-3001-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
.battle-shell.battle-zone-302 { --battle-zone-image: url("/images/background/battle-3011-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
.battle-shell.battle-zone-303 { --battle-zone-image: url("/images/background/battle-3021-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
.battle-shell.battle-zone-304 { --battle-zone-image: url("/images/background/battle-3031-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
.battle-shell.battle-zone-305 { --battle-zone-image: url("/images/background/battle-3041-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
.battle-shell.battle-zone-306 { --battle-zone-image: url("/images/background/battle-3051-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
.battle-shell.battle-zone-307 { --battle-zone-image: url("/images/background/battle-3061-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
.battle-shell.battle-zone-308 { --battle-zone-image: url("/images/background/battle-3071-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
.battle-shell.battle-zone-309 { --battle-zone-image: url("/images/background/battle-3081-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
.battle-shell.battle-zone-310 { --battle-zone-image: url("/images/background/battle-3091-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
.battle-shell.battle-zone-311 { --battle-zone-image: url("/images/background/battle-3101-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
.battle-shell.battle-zone-312 { --battle-zone-image: url("/images/background/battle-3111-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
.battle-shell.battle-zone-313 { --battle-zone-image: url("/images/background/battle-3121-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
.battle-shell.battle-zone-314 { --battle-zone-image: url("/images/background/battle-3131-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
.battle-shell.battle-zone-315 { --battle-zone-image: url("/images/background/battle-3141-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
.battle-shell.battle-zone-316 { --battle-zone-image: url("/images/background/battle-3151-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
.battle-shell.battle-zone-317 { --battle-zone-image: url("/images/background/battle-3161-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
.battle-shell.battle-zone-318 { --battle-zone-image: url("/images/background/battle-3171-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
.battle-shell.battle-zone-319 { --battle-zone-image: url("/images/background/battle-3181-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
.battle-shell.battle-zone-320 { --battle-zone-image: url("/images/background/battle-3191-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
/* W01/W02 activation shares its existing float's timing and removal. */
.combat-float > .combat-equipment-bonus { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); width: max-content; color: #ffd18c; font-family: inherit; font-size: .7em; font-weight: 700; line-height: 1; text-align: center; text-shadow: 0 2px 3px #000, 0 0 5px currentColor; white-space: nowrap; pointer-events: none; }

/* Transfer facility: reuse the training cards and the shared control scale. */
.job-change-facility .combat-role-choice { cursor: default; border-radius: var(--ga-radius-panel, 4px); }
.job-change-facility .job-change-trait { min-width: 0; overflow-wrap: anywhere; }
.job-change-facility .job-change-trait strong { font-size: var(--ga-font-body); }
.job-change-facility .job-change-trait p, .job-change-facility .job-change-note { margin: 4px 0; font-size: var(--ga-font-note); line-height: 1.65; color: var(--muted); }
.job-change-facility .job-change-apply { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.job-change-facility .job-change-footer { display: flex; flex-wrap: wrap; gap: 8px; }
.job-change-facility .combat-role-choice > span, .job-change-facility .combat-role-effective em { overflow-wrap: anywhere; }

.job-change-facility :is(.combat-role-differences > span, .combat-role-differences em, .combat-role-effective > span, .combat-role-effective em, .combat-role-members small) { font-size: var(--ga-font-note); }
.job-change-facility :is(.combat-role-member-name, .combat-role-members small) { max-width: 100%; overflow: visible; white-space: normal; overflow-wrap: anywhere; text-align: center; }

/* Job selection only: compact illustrated choices, one comparison at a time. */
.job-change-facility .job-change-intro { margin: 0; font-size: var(--ga-font-body); color: var(--muted); line-height: 1.7; }
.job-change-facility .job-member-picker { min-width: 0; border: 1px solid var(--line); border-radius: var(--ga-radius-panel); background: var(--surface); }
.job-change-facility .job-member-picker > summary { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 88px; padding: 8px 12px; cursor: pointer; list-style: none; }
.job-change-facility .job-member-picker > summary::-webkit-details-marker { display: none; }
.job-change-facility .job-member-current-portrait { display: grid; place-items: center; width: 64px; height: 64px; }
.job-change-facility .job-member-current-portrait :is(img, .actor-image) { width: 64px; height: 64px; object-fit: contain; }
.job-change-facility .job-member-current-copy { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.job-change-facility .job-member-current-copy strong { font-size: var(--ga-font-section); }
.job-change-facility .job-member-current-copy small, .job-change-facility .job-member-change-label { font-size: var(--ga-font-note); color: var(--muted); }
.job-change-facility .job-member-change-label { display: grid; justify-items: center; gap: 2px; }
.job-change-facility .job-member-change-label > span { font-size: 1.25rem; }
.job-change-facility .job-member-picker[open] > summary { border-bottom: 1px solid var(--line); }
.job-change-facility .job-member-picker .combat-role-members { padding: 8px; }
.job-change-facility .job-change-layout { display: grid; gap: 16px; min-width: 0; align-items: start; }
.job-change-facility .job-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; scroll-margin-top: 12px; }
.job-change-facility .job-choice-button { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: 6px 8px; min-width: 0; min-height: 116px; padding: 8px; text-align: left; color: var(--text); border: 1px solid var(--ga-control-border); border-radius: var(--ga-radius-choice); background: var(--ga-control-bg); cursor: pointer; }
.job-change-facility .job-choice-button.selected { border-color: var(--gold); background: var(--selected-end); box-shadow: inset 0 -2px var(--gold); }
.job-change-facility .job-choice-locked { border-style: dashed; }
.job-change-facility .job-unknown-portrait { display: grid; place-items: center; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--ga-radius-choice); font-size: 2rem; font-weight: 700; }
.job-change-facility .job-detail-portrait > .job-unknown-portrait { width: 112px; height: 144px; font-size: 3rem; }
.job-change-facility .job-choice-button:disabled { cursor: wait; }
.job-change-facility .job-choice-portrait { width: 56px; height: 72px; object-fit: contain; }
.job-change-facility .job-choice-copy { display: grid; align-content: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.job-change-facility .job-choice-copy strong { font-size: var(--ga-font-control); line-height: 1.45; }
.job-change-facility .job-choice-copy small, .job-change-facility .job-choice-focus, .job-change-facility .job-choice-state { font-size: var(--ga-font-note); line-height: 1.4; color: var(--muted); }
.job-change-facility .job-choice-focus { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.job-change-facility .job-choice-focus img { flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; }
.job-change-facility .job-choice-state { grid-column: 1 / -1; min-height: 1.4em; text-align: center; }
.job-change-facility .job-choice-button.selected .job-choice-state { color: var(--text); font-weight: 700; }
.job-change-facility .job-change-detail { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--ga-radius-panel); background: var(--surface); scroll-margin-top: 12px; }
.job-change-facility :is(.job-choice-button, .job-member-picker > summary):focus-visible, .job-change-facility .job-change-detail:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.job-change-facility .job-detail-heading { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.job-change-facility .job-detail-portrait { display: grid; place-items: center; min-width: 0; background: radial-gradient(ellipse at center, var(--selected-end), transparent 72%); }
.job-change-facility .job-detail-portrait img { display: block; width: 112px; height: 144px; object-fit: contain; }
.job-change-facility .job-detail-copy { min-width: 0; overflow-wrap: anywhere; }
.job-change-facility .job-detail-eyebrow { color: var(--muted); font-size: var(--ga-font-note); }
.job-change-facility .job-detail-copy h3 { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: var(--ga-font-page); line-height: 1.45; }
.job-change-facility .job-detail-copy h3 img { flex: 0 0 28px; width: 28px; height: 28px; object-fit: contain; }
.job-change-facility .job-detail-badge { display: inline-block; padding: 2px 6px; margin: 0 4px 4px 0; border: 1px solid var(--line); border-radius: var(--ga-radius-choice); font-size: var(--ga-font-note); }
.job-change-facility .job-detail-copy p, .job-change-facility .job-detail-section p { margin: 4px 0 0; font-size: var(--ga-font-body); line-height: 1.7; }
.job-change-facility .job-detail-section { min-width: 0; margin-top: 12px; }
.job-change-facility .job-detail-section h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--ga-font-section); line-height: 1.5; }
.job-change-facility .job-detail-section h4 > img { width: 24px; height: 24px; object-fit: contain; }
.job-change-facility .job-detail-section h4 > small { color: var(--muted); font-size: var(--ga-font-note); font-weight: 400; }
.job-change-facility .job-style-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.job-change-facility .job-style-chips > button { min-height: 44px; max-width: 100%; overflow-wrap: anywhere; padding: 8px 12px; border: 1px solid var(--ga-control-border); border-radius: var(--ga-radius-choice); background: var(--ga-control-bg); color: var(--text); font-size: var(--ga-font-control); cursor: pointer; }
.job-change-facility .job-style-chips > button.selected { border-color: var(--gold); background: var(--selected-end); box-shadow: inset 0 -2px var(--gold); }
.job-change-facility .job-style-chips > button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.job-change-facility .job-style-chips > button:disabled { cursor: wait; }
.job-change-facility .job-preview-note { display: block; margin: 4px 0 8px; color: var(--muted); font-size: var(--ga-font-note); }
.job-change-facility .job-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.job-change-facility .job-stat-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 2px 4px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--ga-radius-choice); background: var(--surface-2); }
.job-change-facility .job-stat-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; grid-column: 1 / -1; min-width: 0; font-size: var(--ga-font-note); color: var(--muted); }
.job-change-facility .job-stat-label img { width: 20px; height: 20px; object-fit: contain; }
.job-change-facility .job-stat-cell > strong { min-width: 0; overflow-wrap: anywhere; font-size: 1.125rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.job-change-facility .job-stat-delta { align-self: center; overflow-wrap: anywhere; font-size: var(--ga-font-note); }
.job-change-facility .job-stat-delta.increase { color: var(--success, #83cdb6); }
.job-change-facility .job-stat-delta.decrease { color: var(--danger, #e79292); }
.job-change-facility .job-stat-delta.unchanged { color: var(--muted); }
.job-change-facility .job-stat-cell > small { grid-column: 1 / -1; overflow-wrap: anywhere; color: var(--muted); font-size: var(--ga-font-note); }
.job-change-facility .job-change-confirm { display: grid; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.job-change-facility .job-change-confirm > p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: var(--ga-font-note); }
.job-change-facility .job-change-confirm > p > img { width: 22px; height: 22px; object-fit: contain; }
.job-change-facility .job-change-confirm > p > strong { font-size: var(--ga-font-body); }
.job-change-facility .job-change-confirm > small { font-size: var(--ga-font-note); color: var(--muted); line-height: 1.65; }
.job-change-facility .job-change-empty { font-size: var(--ga-font-body); color: var(--muted); }
@media (min-width: 900px) {
  .job-change-facility .job-change-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .job-change-facility .job-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.job-change-facility .job-usage { display: block; margin: 6px 0 0; overflow-wrap: anywhere; font-size: var(--ga-font-note); line-height: 1.6; color: var(--muted); }
.job-change-facility .job-usage-conflict { color: var(--gold); }

/* Locked destinations share one discovery hint; do not reveal their names or count. */
#app .facility-floor-locked, #navigation .facility-floor-locked, #side-menu .facility-floor-locked, #app .menu-category[hidden] { display: none !important; }

.arena-vault-mode .arena-kit-scroll { overflow-wrap: anywhere; }
.arena-vault-mode p { line-height: 1.6; }
.arena-vault-mode .arena-vault-description { font-size: var(--ga-font-body); }
.arena-vault-overview { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-block: 12px; font-size: var(--ga-font-body); }
.arena-vault-item { display: grid; gap: 8px; padding-block: 12px; border-bottom: 1px solid var(--line); min-width: 0; }
.arena-vault-item strong { font-size: var(--ga-font-body); }
.arena-vault-item p { margin: 4px 0; font-size: var(--ga-font-note); color: var(--muted); }
.arena-vault-commands { margin-block: 12px; }
.arena-vault-dormant { margin-top: 16px; font-size: var(--ga-font-note); }
.arena-vault-dormant summary { min-height: 44px; display: list-item; align-content: center; cursor: pointer; font-size: var(--ga-font-body); }
.arena-vault-mode .arena-kit-error { font-size: var(--ga-font-body); max-height: 25dvh; overflow-y: auto; }
/* Arena lobby: fixed gunmetal blue surfaces with gold trim, independent of player themes. */
#arena-lobby {
  --arena-mode-rgb:205 167 98; --arena-flame-rgb:117 162 193; --arena-crystal-rgb:117 162 193;
  --text:#e4edf5; --muted:#a8bccc; --line:#536273; --surface:#162633; --surface-2:#243b4c; --surface-deep:#101c27; --input:#101f2d;
  --gold:#d8b978; --gold-strong:#f0d69a; --primary-border:#bd9b5e; --primary-bg:#294e68; --primary-hover:#3a6988; --primary-text:#edf7ff;
  --selected-border:#d8b978; --selected-bg:#294e68; --selected-text:#fff0cf;
  --ga-control-bg:linear-gradient(180deg,#2b4152,#1c2e3d); --ga-control-border:#8f7953;
  --ga-action-bg:linear-gradient(180deg,#466b86,#2d4e66 60%,#213c50);
  --ga-action-shadow:inset 0 1px #d8b97866,inset 0 -2px #0a172880,0 3px 0 #0b1723;
  color:var(--text);
}
#arena-lobby::before { border-color:#b8955733; background:radial-gradient(ellipse at 50% 0,#486f8b33,transparent 65%),linear-gradient(180deg,#162633cc,transparent); }
#arena-lobby > .arena-overview-panel,
#arena-lobby .arena-view-content > .panel {
  border-color:#b8955799;
  background:radial-gradient(ellipse at 100% 0,#486f8b33,transparent 65%),linear-gradient(145deg,#233849,#101c27);
  box-shadow:inset 0 1px #f0d69a1a,0 6px 20px #0003;
}
#arena-lobby > .arena-overview-panel { scroll-margin-top: calc(var(--app-header-height) + 64px); background: linear-gradient(145deg, #192c3c, #101c27); }
#arena-lobby .arena-hero-banner {
  display: flex; flex-direction: column; justify-content: space-between; gap: 36px;
  min-height: clamp(180px, 48vw, 278px); padding: 8px clamp(12px, 4vw, 26px) 16px;
  background:
    linear-gradient(180deg, rgb(6 10 20 / 64%), transparent 33%, transparent 49%, #132230 100%),
    url("/images/background/arena-duel-v1.webp?v=20260914-arena-duel-1") center 57% / cover no-repeat;
}
.arena-hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--gold-strong); }
.arena-hero-topline > span { font-family: Georgia, serif; font-weight: 700; font-size: var(--ga-font-note); letter-spacing: .19em; text-shadow: 0 1px 4px #000; }
#arena-lobby .arena-hero-topline > button { flex: 0 0 auto; padding-inline: 8px; background: rgb(10 20 30 / 82%); color: var(--text); }
#arena-lobby .arena-hero-banner > .arena-gate-header { display: block; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
#arena-lobby .arena-hero-banner > .arena-gate-header::before, #arena-lobby .arena-hero-banner > .arena-gate-header::after { display: none; }
#arena-lobby .arena-gate-header .page-heading-main { grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; }
#arena-lobby .arena-gate-header .page-heading-icon, #arena-lobby .arena-gate-header .arena-title-icon { width: 44px; height: 44px; }
#arena-lobby .arena-gate-header h1 { color: #fff2ce; font-size: clamp(1.65rem, 6.5vw, 2.65rem); line-height: 1.15; text-shadow: 0 2px 8px #050710; }
#arena-lobby .arena-gate-header .page-heading-copy p { margin-top: 4px; color: #e3edf5; font-size: var(--ga-font-note); text-shadow: 0 1px 5px #050710; }
#arena-lobby .arena-rating-summary { gap: 8px; margin: 0 12px; padding: 8px 12px; border-color: rgb(216 185 120 / 34%); border-radius: 6px; background: rgb(10 21 31 / 72%); }
#arena-lobby.arena-mode-defense .arena-rating-summary { grid-template-columns: minmax(0, 1fr); }
#arena-lobby .arena-my-rank { background:linear-gradient(110deg,#2b455a,#162633); }
#arena-lobby .arena-overview-rank { justify-items: start; padding: 4px 8px 4px 0; border: 0; border-inline-end: 1px solid rgb(216 185 120 / 24%); border-radius: 0; background: transparent; box-shadow: none; }
#arena-lobby .arena-overview-rank::before, #arena-lobby .arena-overview-rank::after { display: none; }
#arena-lobby .arena-overview-rank-heading, #arena-lobby .arena-overview-rank-value { justify-content: flex-start; }
#arena-lobby .arena-overview-rank-caption { text-align: start; }
.arena-hero-season-stat { padding-inline: 4px; overflow-wrap: anywhere; }
.arena-hero-season-stat p { margin: 0; color: var(--muted); font-size: var(--ga-font-note); }
.arena-hero-results { display: flex; flex-wrap: wrap; gap: 4px 12px; }
#arena-lobby .arena-hero-results > span { color: var(--muted); font-size: var(--ga-font-note); letter-spacing: normal; }
.arena-hero-results b { color: var(--gold-strong); font-size: var(--ga-font-section); font-variant-numeric: tabular-nums; }
.arena-hero-results > span + span b { color: #bad6e9; }
.arena-hero-season { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; min-width: 0; margin: 0; padding-top: 8px; border-top: 1px solid rgb(216 185 120 / 24%); }
.arena-hero-season > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.arena-hero-season dt { color: var(--muted); font-size: var(--ga-font-caption); }
.arena-hero-season dd { margin: 0; color: var(--text); font-size: var(--ga-font-note); overflow-wrap: anywhere; }
.arena-mode-defense .arena-hero-season { padding-top: 0; border-top: 0; }
#arena-lobby .arena-season-line { font-size: var(--ga-font-note); }
#arena-lobby .arena-season-line > span { max-width: none; }
#arena-lobby .arena-gate-actions { margin: 0 12px; }
#arena-lobby .arena-last-practice { min-height: 44px; padding: 4px 0; gap: 8px; border: 0; }
@media (max-width: 700px) {
  #arena-lobby > .arena-overview-panel { scroll-margin-top: calc(var(--app-header-height) + 8px); }
}
#arena-lobby > .arena-view-tabs {
  position: fixed; z-index: 34; inset-inline: 0; bottom: max(12px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  width: min(780px, calc(100% - 128px)); margin-inline: auto; padding: 4px;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgb(16 28 39 / 97%); box-shadow: 0 5px 20px rgb(0 0 0 / 42%);
}
#arena-lobby > .arena-view-tabs > button {
  min-width: 0; min-height: 44px; padding: 4px; border: 0;
  background: transparent; color: var(--muted); box-shadow: none;
  font-size: var(--ga-font-control); line-height: 1.25;
}
#arena-lobby > .arena-view-tabs > button:enabled:hover { background: var(--surface-2); color: var(--text); }
#arena-lobby > .arena-view-tabs > button[aria-pressed="true"] {
  background: var(--selected-bg); color: var(--selected-text); box-shadow: inset 0 -2px var(--selected-border);
}
#arena-view-content { scroll-margin-top: calc(var(--app-header-height) + 64px); }
body.background-battle-monitor-visible:has(#arena-lobby) .background-battle-monitor { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 60px); }
@media (max-width: 700px) {
  #arena-lobby > .arena-view-tabs {
    inset-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right));
    bottom: calc(var(--mobile-navigation-height) + 4px); width: auto;
  }
  #arena-view-content { margin-bottom: 60px; scroll-margin-top: calc(var(--app-header-height) + 8px); }
  body.background-battle-monitor-visible:has(#arena-lobby) .background-battle-monitor { bottom: calc(var(--mobile-navigation-height) + 64px); }
}
#arena-lobby .arena-view-content .empty-state { border-color:#b8955766; background:radial-gradient(circle at 50% 31px,#759fc126,transparent 28px); }
#arena-lobby .arena-view-content .empty-state::before { border-color:#b8955780; box-shadow:0 0 18px #759fc11f; }

/* The arena armory intentionally keeps its gunmetal blue identity across player color themes. */
#arena-loadout-dialog.arena-vault-mode,
#arena-loadout-guide-dialog {
  --text:#e4edf5; --muted:#a8bccc; --line:#8f7953; --surface:#162633; --surface-2:#243b4c; --surface-deep:#101c27;
  --gold:#d8b978; --gold-strong:#f0d69a; --primary-border:#bd9b5e; --primary-bg:#294e68; --primary-hover:#3a6988; --primary-text:#edf7ff;
  --selected-border:#d8b978; --selected-bg:#294e68; --selected-text:#fff0cf;
  --ga-control-bg:linear-gradient(180deg,#2b4152,#1c2e3d); --ga-control-border:#8f7953;
  --ga-action-bg:linear-gradient(180deg,#466b86,#2d4e66 60%,#213c50);
  --ga-action-shadow:inset 0 1px #d8b97866,inset 0 -2px #0a172880,0 3px 0 #0b1723;
  color:var(--text); border-color:#bd9b5e; background:radial-gradient(ellipse at 0 0,#486f8b26,transparent 65%),linear-gradient(150deg,#233849,#101c27);
  box-shadow:0 16px 60px #000b,inset 0 1px #d4eaff1a;
}
#arena-loadout-dialog.arena-vault-mode > header { padding-top:12px; }
#arena-loadout-dialog.arena-vault-mode .arena-armory-badge { display:inline-block; padding:2px 8px; color:#f0d69a; border:1px solid #bd9b5e; background:#29475c; font-size:var(--ga-font-note); letter-spacing:.06em; }
#arena-loadout-dialog.arena-vault-mode > footer { background:#101f2d; border-color:var(--line); }
#arena-loadout-dialog.arena-vault-mode :is(.secondary-button,.icon-button) { border-color:var(--ga-control-border); background:var(--ga-control-bg); color:var(--text); }
#arena-loadout-dialog.arena-vault-mode .primary-button { border-color:var(--primary-border); background:var(--ga-action-bg); color:var(--primary-text); box-shadow:var(--ga-action-shadow); }
#arena-loadout-dialog.arena-vault-mode [aria-pressed="true"] { border-color:var(--selected-border); background:linear-gradient(180deg,#365b75,#254257); box-shadow:inset 0 0 0 1px #d8b97833; }
#arena-loadout-dialog.arena-vault-mode .arena-kit-members { border-color:var(--line); gap:8px; padding-bottom:8px; }
#arena-loadout-dialog.arena-vault-mode .arena-armory-member { display:grid; justify-items:center; gap:4px; padding:4px 6px 6px; align-content:start; font-size:var(--ga-font-item-name); }
#arena-loadout-dialog.arena-vault-mode .arena-member-portrait { display:block; width:52px; height:58px; overflow:hidden; }
#arena-loadout-dialog.arena-vault-mode .arena-member-portrait :is(img,.actor-image,.enemy-art-frame) { width:100%; height:100%; object-fit:contain; object-position:center bottom; }
#arena-loadout-dialog.arena-vault-mode .arena-kit-search :is(input, select) { background:#0e1c28; border:1px solid #8f7953; color:var(--text); }
#arena-loadout-dialog.arena-vault-mode .arena-pearl-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0; margin:0; list-style:none; }
#arena-loadout-dialog.arena-vault-mode .arena-pearl-list > li { min-width:0; }
#arena-loadout-dialog.arena-vault-mode .arena-pearl-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:start; gap:8px; width:100%; height:100%; padding:12px; border:1px solid var(--line); border-left:3px solid var(--picker-orb,#769ab5); border-radius:4px; background:#162837; color:var(--text); }
#arena-loadout-dialog.arena-vault-mode .orb-picker-item-copy { display:contents; }
#arena-loadout-dialog.arena-vault-mode .arena-pearl-row > .magic-orb { grid-column:1; grid-row:1; width:40px; height:40px; }
#arena-loadout-dialog.arena-vault-mode .orb-picker-item-title { grid-column:2; grid-row:1; flex-wrap:wrap; }
#arena-loadout-dialog.arena-vault-mode .orb-picker-item-title strong { color:var(--text); font-size:var(--ga-font-body); }
#arena-loadout-dialog.arena-vault-mode :is(.orb-picker-item-meta,.orb-picker-item-description,.arena-pearl-counts) { grid-column:1/-1; color:var(--muted); font-size:var(--ga-font-note); line-height:1.6; }
#arena-loadout-dialog.arena-vault-mode .orb-picker-item-meta b { font-size:inherit; }
#arena-loadout-dialog.arena-vault-mode .arena-pearl-counts { color:#d0e1ef; }
#arena-loadout-dialog.arena-vault-mode .orb-picker-item-arrow { grid-column:3; grid-row:1; color:#a9cee8; }
#arena-loadout-dialog.arena-pearl-picker .arena-armory-member { border: 0; background: rgb(122 170 198 / 8%); box-shadow: none; }
#arena-loadout-dialog.arena-pearl-picker .arena-armory-member[aria-pressed="true"] { background: var(--selected-bg); color: var(--selected-text); box-shadow: inset 0 -2px var(--selected-border); }
#arena-loadout-dialog.arena-pearl-picker .arena-kit-members { border-color: rgb(168 188 204 / 22%); }
#arena-loadout-dialog.arena-pearl-picker .arena-kit-picker-heading { gap: 8px; margin-bottom: 0; padding-bottom: 4px; border-color: rgb(168 188 204 / 22%); }
#arena-loadout-dialog.arena-pearl-picker .arena-pearl-picker-title { color: var(--gold-strong); font-size: var(--ga-font-section); overflow-wrap: anywhere; }
#arena-loadout-dialog.arena-pearl-picker .arena-kit-search { gap: 4px; }
.arena-pearl-search-field { position: relative; display: block; }
.arena-pearl-search-field > svg { position: absolute; inset-inline-start: 10px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
#arena-loadout-dialog.arena-pearl-picker .arena-pearl-search-field > input { min-height: 44px; padding-inline-start: 36px; border-color: rgb(168 188 204 / 42%); border-radius: 6px; }
#arena-loadout-dialog.arena-pearl-picker .arena-pearl-search-field > input::placeholder { color: var(--muted); opacity: 1; }
#arena-loadout-dialog.arena-pearl-picker .arena-kit-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 8px; background: rgb(7 16 24 / 50%); }
#arena-loadout-dialog.arena-pearl-picker .arena-kit-categories > button { min-width: 0; min-height: 44px; padding: 4px 2px; border: 0; background: transparent; color: var(--muted); box-shadow: none; font-size: var(--ga-font-note); }
#arena-loadout-dialog.arena-pearl-picker .arena-kit-categories > button[aria-pressed="true"] { background: var(--selected-bg); color: var(--selected-text); box-shadow: inset 0 -2px var(--selected-border); }
#arena-loadout-dialog.arena-pearl-picker .arena-kit-categories > button:enabled:hover { background: var(--surface-2); color: var(--text); }
#arena-loadout-dialog.arena-pearl-picker .arena-kit-options { gap: 0; margin-top: 8px; }
#arena-loadout-dialog.arena-pearl-picker .arena-pearl-remove { justify-self: end; min-height: 44px; padding-inline: 8px; color: var(--muted); font-size: var(--ga-font-note); }
#arena-loadout-dialog.arena-pearl-picker .arena-pearl-list { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 2px 8px; border-radius: 8px; background: rgb(8 17 25 / 46%); }
#arena-loadout-dialog.arena-pearl-picker .arena-pearl-list > li + li { border-top: 1px solid rgb(168 188 204 / 22%); }
#arena-loadout-dialog.arena-pearl-picker .arena-pearl-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; min-width: 0; padding: 10px 4px; border: 0; background: transparent; box-shadow: none; text-align: start; }
#arena-loadout-dialog.arena-pearl-picker button.arena-pearl-row:enabled:hover { background: rgb(122 170 198 / 12%); }
#arena-loadout-dialog.arena-pearl-picker .arena-pearl-row[aria-pressed="true"] { background: rgb(60 101 129 / 36%); }
#arena-loadout-dialog.arena-pearl-picker .arena-pearl-row > .magic-orb { width: 36px; height: 36px; }
#arena-loadout-dialog.arena-pearl-picker .orb-picker-item-copy { display: grid; grid-column: 2; gap: 3px; min-width: 0; }
#arena-loadout-dialog.arena-pearl-picker .orb-picker-item-title { grid-column: 1; }
#arena-loadout-dialog.arena-pearl-picker .orb-picker-item-title strong { min-width: 0; overflow-wrap: anywhere; }
#arena-loadout-dialog.arena-pearl-picker .orb-picker-item-arrow { align-self: center; }
@media (min-width: 540px) {
  #arena-loadout-dialog.arena-pearl-picker .arena-kit-categories { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
#arena-loadout-dialog.arena-vault-mode .arena-equipment-board { margin-top:16px; }
#arena-loadout-dialog.arena-vault-mode .arena-equipment-board > h3 { margin-bottom:8px; }
#arena-loadout-dialog.arena-vault-mode .arena-gear-choice { display:grid; grid-template-columns:52px minmax(0,1fr) 12px; gap:8px; align-items:center; width:100%; text-align:left; padding:10px 8px; min-height:88px; }
#arena-loadout-dialog.arena-vault-mode .arena-gear-icon { display:block; width:52px; height:64px; object-fit:contain; }
#arena-loadout-dialog.arena-vault-mode .arena-gear-copy { display:grid; gap:4px; min-width:0; }
#arena-loadout-dialog.arena-vault-mode .arena-gear-copy > strong { font-size:var(--ga-font-item-name); font-weight:500; overflow-wrap:anywhere; }
#arena-loadout-dialog.arena-vault-mode .arena-gear-copy > small { font-size:var(--ga-font-note); color:var(--muted); }
#arena-loadout-dialog.arena-vault-mode .arena-gear-stats { display:flex; flex-wrap:wrap; gap:4px 8px; }
#arena-loadout-dialog.arena-vault-mode .arena-gear-stats > span { display:inline-flex; align-items:baseline; gap:4px; }
#arena-loadout-dialog.arena-vault-mode .arena-gear-stats :is(small,b) { font-size:var(--ga-font-note); }
#arena-loadout-dialog.arena-vault-mode .arena-gear-stats small { color:var(--muted); }
#arena-loadout-dialog.arena-vault-mode .arena-choice-arrow { color:var(--gold); }
#arena-loadout-dialog.arena-vault-mode .arena-equipment-options { display:grid; gap:8px; }
#arena-loadout-dialog.arena-vault-mode .arena-armory-stats { padding:0 0 12px; border-bottom:1px solid var(--line); }
#arena-loadout-dialog.arena-vault-mode .arena-stats-body { position:relative; min-height:184px; }
#arena-loadout-dialog.arena-vault-mode .arena-stats-concealed { visibility:hidden; }
#arena-loadout-dialog.arena-vault-mode .arena-stats-message { position:absolute; inset:0; display:grid; align-content:center; justify-items:start; gap:8px; }
#arena-loadout-dialog.arena-vault-mode .stat-grid, #arena-loadout-dialog.arena-vault-mode .arena-stats-fallback { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
#arena-loadout-dialog.arena-vault-mode .stat { min-width:0; padding:0; border-color:var(--line); background:#182c3c; }
#arena-loadout-dialog.arena-vault-mode .stat-tip-trigger { width:100%; min-height:72px; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; padding:8px 2px; gap:4px; color:var(--text); background:transparent; }
#arena-loadout-dialog.arena-vault-mode .stat-copy { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:4px; min-width:0; width:100%; }
#arena-loadout-dialog.arena-vault-mode .stat-label { color:var(--muted); font-size:var(--ga-font-note); white-space:normal; }
#arena-loadout-dialog.arena-vault-mode .stat strong { font-size:var(--ga-font-body); white-space:normal; overflow-wrap:anywhere; }
#arena-loadout-dialog.arena-vault-mode .stat-tip-cue { display:none; }
#arena-loadout-dialog.arena-vault-mode .stat-icon { width:20px; height:20px; }
#arena-loadout-dialog.arena-vault-mode .arena-stats-fallback { margin:0; }
#arena-loadout-dialog.arena-vault-mode .arena-stats-fallback > div { background:#182c3c; padding:8px; overflow-wrap:anywhere; }
#arena-loadout-dialog.arena-vault-mode .arena-stats-fallback dd { margin:0; }
@media(max-width:600px) {
  #arena-loadout-dialog.arena-vault-mode .arena-pearl-list { grid-template-columns:minmax(0,1fr); }
  #arena-loadout-dialog.arena-vault-mode .arena-equipment-board .arena-kit-grid { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:360px) {
  #arena-loadout-dialog.arena-vault-mode .stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #arena-loadout-dialog.arena-vault-mode .arena-member-portrait { width:44px; height:48px; }
}
#arena-loadout-dialog.arena-vault-mode .arena-command-dormant { color:#e4bf80; }
.arena-vault-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }

/* Shared arena loadout surfaces for equipment and installed pearls. */
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker, .arena-gambit-mode-dialog) {
  --armory-divider: rgb(168 188 204 / 20%);
  --armory-panel: rgb(8 17 25 / 44%);
  --armory-highlight: rgb(117 177 214 / 15%);
  border-color: rgb(168 188 204 / 36%);
  border-radius: 14px;
}
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker, .arena-gambit-mode-dialog) .arena-armory-badge {
  border: 0; border-radius: 999px; background: rgb(216 185 120 / 12%);
}
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker, .arena-gambit-mode-dialog) > header [role="status"] { margin: 4px 0 0; }
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker, .arena-gambit-mode-dialog) > header > .icon-button {
  border: 0; border-radius: 50%; background: var(--armory-highlight); box-shadow: none;
}
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker, .arena-gambit-mode-dialog) .arena-kit-scroll { padding-block-start: 8px; }
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker, .arena-gambit-mode-dialog) .arena-kit-members { border-color: var(--armory-divider); gap: 4px; }
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker, .arena-gambit-mode-dialog) .arena-armory-member {
  border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--muted);
}
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker, .arena-gambit-mode-dialog) .arena-armory-member[aria-pressed="true"] {
  background: radial-gradient(ellipse at 50% 65%, var(--armory-highlight), transparent 95%);
  color: var(--text); box-shadow: inset 0 -2px var(--selected-border);
}
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker, .arena-gambit-mode-dialog) .arena-kit-sections {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px; padding: 4px; border-radius: 9px; background: var(--armory-panel);
}
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker, .arena-gambit-mode-dialog) .arena-kit-sections > button {
  min-height: 44px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--muted);
}
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker, .arena-gambit-mode-dialog) .arena-kit-sections > button[aria-pressed="true"] {
  background: var(--armory-highlight); color: var(--selected-text);
}
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker) .arena-vault-overview { gap: 0 8px; margin-block: 4px; color: var(--muted); font-size: var(--ga-font-note); }
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker) :is(.arena-vault-actions > button, .arena-kit-picker-heading > button, .arena-clear-slot) {
  min-height: 44px; border: 0; background: transparent; box-shadow: none; color: #b4d3e8;
}
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode, .arena-pearl-picker) .arena-vault-actions > button { padding-inline: 6px; }
#arena-loadout-dialog.arena-equipment-mode .arena-armory-stats { padding: 0; border: 0; }
#arena-loadout-dialog.arena-equipment-mode .arena-stats-body {
  min-height: 148px; border-radius: 9px; background: var(--armory-panel);
}
#arena-loadout-dialog.arena-equipment-mode :is(.stat-grid, .arena-stats-fallback) { gap: 2px; padding: 4px; }
#arena-loadout-dialog.arena-equipment-mode :is(.stat, .arena-stats-fallback > div) {
  border: 0; border-radius: 6px; background: transparent; text-align: center;
}
#arena-loadout-dialog.arena-equipment-mode .stat-tip-trigger { min-height: 68px; border-radius: 6px; }
#arena-loadout-dialog.arena-equipment-mode .stat strong,
#arena-loadout-dialog.arena-equipment-mode .arena-stats-fallback dd { font-weight: 700; font-variant-numeric: tabular-nums; }
#arena-loadout-dialog.arena-equipment-mode .arena-stats-message { padding: 12px; }
#arena-loadout-dialog.arena-equipment-mode :is(.arena-equipment-board .arena-kit-grid, .arena-equipment-options),
#arena-loadout-dialog.arena-orbs-mode :is(.arena-vault-commands, .arena-kit-orbs) {
  gap: 1px; overflow: hidden; border-radius: 9px; background: var(--armory-panel);
}
#arena-loadout-dialog.arena-equipment-mode .arena-gear-choice,
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 12px; align-items: center; gap: 10px;
  border: 0; border-radius: 0; background: rgb(117 177 214 / 5%); box-shadow: none;
  text-align: start; min-height: 76px;
}
#arena-loadout-dialog.arena-equipment-mode .arena-gear-icon { height: 54px; }
#arena-loadout-dialog.arena-equipment-mode .arena-gear-copy > strong { font-weight: 700; }
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode) .arena-choice-arrow { color: #b4d3e8; }
#arena-loadout-dialog.arena-equipment-mode .arena-gear-choice[aria-pressed="true"] {
  background: var(--armory-highlight); box-shadow: inset 2px 0 var(--selected-border);
}
#arena-loadout-dialog.arena-equipment-mode .arena-kit-picker-heading {
  margin-bottom: 0; border-color: var(--armory-divider);
}
#arena-loadout-dialog.arena-equipment-mode .arena-kit-picker-heading > h3 { color: var(--gold-strong); }
#arena-loadout-dialog.arena-equipment-mode .arena-kit-search :is(input, select) {
  min-height: 44px; border-color: rgb(168 188 204 / 42%); border-radius: 7px; font-size: max(16px, 1rem);
}
#arena-loadout-dialog.arena-equipment-mode .arena-clear-slot { justify-self: end; }
#arena-loadout-dialog.arena-equipment-mode :is(.arena-armory-member, .arena-kit-sections > button, .arena-gear-choice, .stat-tip-trigger):enabled:hover,
#arena-loadout-dialog.arena-equipment-mode .stat-tip-trigger[aria-expanded="true"] { background: var(--armory-highlight); }
#arena-loadout-dialog:is(.arena-equipment-mode, .arena-orbs-mode) :is(.arena-gear-choice, .arena-pearl-slot):focus-visible { outline-offset: -3px; }
@media (max-width: 22.5rem) {
  #arena-loadout-dialog.arena-equipment-mode :is(.stat-grid, .arena-stats-fallback) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

#arena-loadout-dialog.arena-orbs-mode :is(.arena-vault-commands, .arena-kit-orbs) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot {
  grid-template-columns: 44px minmax(0, 1fr) 12px; gap: 8px; min-height: 60px; padding: 6px 8px;
  min-width: 0; color: var(--text); overflow-wrap: anywhere;
}
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot > .magic-orb { width: 40px; height: 40px; justify-self: center; }
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-source-art {
  position: absolute; inset-block: 0; inset-inline-end: 20px; width: min(80px, 45%);
  display: grid; place-items: center; overflow: hidden; opacity: .18; pointer-events: none;
}
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-source-icon {
  display: block; width: 100%; height: 68px; object-fit: contain;
}
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot > :is(.magic-orb, .arena-pearl-slot-copy, .arena-choice-arrow) { position: relative; }
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot-copy { display: grid; min-width: 0; gap: 2px; }
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; color: var(--muted);
}
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot-meta > small { display: block; width: auto; color: inherit; font-size: var(--ga-font-note); }
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot-meta > .arena-pearl-source-label {
  padding-inline-start: 6px; border-inline-start: 1px solid var(--armory-divider); color: #b4d3e8;
}
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot-copy > strong { font-size: var(--ga-font-item-name); font-weight: 700; text-align: start; }
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot-copy > :is(small, span:not(.arena-orb-effect-warning)) { color: var(--muted); font-size: var(--ga-font-note); }
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot:enabled:hover { background: var(--armory-highlight); }
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot.dormant { color: var(--muted); }
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot.arena-orb-limited {
  background: #4a3229; box-shadow: inset 2px 0 #e5a762;
}
#arena-loadout-dialog.arena-orbs-mode .arena-pearl-slot.arena-orb-limited:enabled:hover { background: #563b2e; }
@media (max-width: 600px) {
  #arena-loadout-dialog.arena-orbs-mode .arena-kit-orbs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 379px) {
  #arena-loadout-dialog.arena-orbs-mode .arena-vault-commands { grid-template-columns: minmax(0, 1fr); }
}
#arena-loadout-dialog.arena-orbs-mode .arena-unified-orbs {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px;
}
#arena-loadout-dialog.arena-orbs-mode .arena-unified-orbs .arena-pearl-slot {
  grid-template-columns: 30px minmax(0, 1fr); gap: 5px; min-height: 54px; padding: 5px 6px;
}
#arena-loadout-dialog.arena-orbs-mode .arena-unified-orbs .arena-pearl-slot > .magic-orb { width: 30px; height: 30px; }
#arena-loadout-dialog.arena-orbs-mode .arena-unified-orbs .arena-pearl-source-art { inset-inline-end: 4px; width: min(46px, 38%); }
#arena-loadout-dialog.arena-orbs-mode .arena-unified-orbs .arena-pearl-source-icon { height: 42px; }
#arena-loadout-dialog.arena-orbs-mode .arena-unified-orbs .orb-active-badge {
  justify-self: start; padding: 0 4px; border-radius: 3px; background: rgb(85 144 182 / 20%); color: #b8e1f7; font-size: var(--ga-font-note);
}
#arena-loadout-dialog.arena-orbs-mode .arena-unified-orbs .arena-active-over-limit { background: rgb(171 102 44 / 22%); color: #ffd198; }
#arena-loadout-dialog.arena-orbs-mode .arena-unified-orbs .is-drop-target,
#arena-loadout-dialog.arena-orbs-mode .arena-unified-orbs .is-carried { outline: 2px solid var(--gold-strong); outline-offset: -2px; }
#arena-loadout-dialog.arena-orbs-mode [data-action="arena-kit-swap-mode"] { min-height: 44px; padding-inline: 6px; }
.arena-orb-effect-warning, .arena-orb-effects summary b { color: #ffd198; }
#arena-loadout-dialog.arena-orbs-mode .arena-orb-effect-warning { font-size: var(--ga-font-note); }
#arena-loadout-dialog.arena-orbs-mode .arena-orb-effect-warning > small { display: block; color: inherit; }
.arena-orb-effects { margin-block: 8px 12px; border-radius: 9px; background: var(--armory-panel); }
.arena-orb-effects summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px;
  min-height: 44px; padding: 8px 12px; cursor: pointer; overflow-wrap: anywhere;
}
.arena-orb-effects summary::after { content: "⌄"; grid-column: 2; grid-row: 1 / 3; color: var(--muted); }
.arena-orb-effects[open] summary::after { transform: rotate(180deg); }
.arena-orb-effects summary > strong { font-size: var(--ga-font-body); }
.arena-orb-effects summary > span { grid-column: 1; color: var(--muted); font-size: var(--ga-font-note); }
.arena-orb-effects-list { padding-inline: 12px; }
.arena-orb-effects-list > * { margin: 0; padding-block: 8px; border-top: 1px solid var(--armory-divider); }
.arena-orb-effects-list > div > strong { font-size: var(--ga-font-item-name); }
.arena-orb-effects-list > div > small { margin-inline-start: 8px; color: var(--gold-strong); font-size: var(--ga-font-note); }
.arena-orb-effects-list > div > p { margin: 4px 0 0; color: var(--muted); font-size: var(--ga-font-note); }
.arena-orb-effect-value { color: #b8e1f7; font-weight: 700; font-variant-numeric: tabular-nums; }
.arena-orb-effect-warning > .arena-orb-effect-value { color: inherit; }
.arena-orb-effect-limits { overflow-wrap: anywhere; }
.arena-orb-effect-limits h3 { margin: 0 0 4px; color: #ffd198; font-size: var(--ga-font-note); }
.arena-orb-effect-limits ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.arena-orb-effect-limits li { display: grid; gap: 1px; font-size: var(--ga-font-note); }

/* The armory notice sits at the viewport centre above the inert armory. */
.arena-loadout-guide-backdrop { position:fixed; inset:0; z-index:2; display:grid; place-items:center; padding:16px; background:#02070cbb; }
#arena-loadout-guide-dialog { display:flex; flex-direction:column; width:min(100%,460px); max-height:calc(100dvh - 32px); min-height:0; border:1px solid #bd9b5e; border-radius:4px; overflow:hidden; }
#arena-loadout-guide-dialog > header { flex:0 0 auto; padding:16px 16px 12px; border-bottom:1px solid var(--line); }
#arena-loadout-guide-dialog h2 { margin:4px 0 0; font-size:var(--ga-font-page); line-height:1.5; }
#arena-loadout-guide-dialog .arena-loadout-guide-eyebrow { color:var(--gold); font-size:var(--ga-font-note); }
#arena-loadout-guide-dialog .arena-loadout-guide-copy { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px 16px; font-size:var(--ga-font-body); line-height:1.8; overflow-wrap:anywhere; }
#arena-loadout-guide-dialog .arena-loadout-guide-copy p { margin:12px 0; }
#arena-loadout-guide-dialog .arena-loadout-guide-copy strong { color:#f0d69a; }
#arena-loadout-guide-dialog > footer { flex:0 0 auto; padding:8px 16px 16px; border-top:1px solid var(--line); background:#101f2d; }
#arena-loadout-guide-dialog .arena-loadout-guide-optout { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; font-size:var(--ga-font-body); }
#arena-loadout-guide-dialog .arena-loadout-guide-optout input { width:20px; height:20px; min-height:20px; flex:0 0 20px; margin:0; accent-color:#bd9b5e; }
#arena-loadout-guide-dialog .arena-loadout-guide-note { margin:0 0 12px; color:var(--muted); font-size:var(--ga-font-note); line-height:1.6; }
#arena-loadout-guide-dialog .primary-button { width:100%; background:var(--ga-action-bg); border-color:var(--primary-border); color:var(--primary-text); box-shadow:var(--ga-action-shadow); }