@font-face {
  font-family: "ApolloDefault";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/shared/resources/font/default.ttf") format("truetype");
}

* {
  box-sizing: border-box;
  scrollbar-color: rgba(148, 163, 184, 0.52) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.52);
  border-radius: 0;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(203, 213, 225, 0.68);
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: #11151d;
  color: #f6f7fb;
  font-family: "ApolloDefault", sans-serif;
  overflow: hidden;
  --game-display-scale: 1;
  --ui-font-family: "ApolloDefault", sans-serif;
}

button,
input,
select,
textarea,
output {
  font-family: "ApolloDefault", sans-serif;
}

.game-shell {
  display: grid;
  grid-template-rows: 48px 1fr;
  height: 100%;
  justify-items: center;
  position: relative;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

input,
textarea,
[contenteditable="true"] {
  user-select: text;
  -webkit-touch-callout: default;
  -webkit-user-select: text;
}

.topbar {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(24, 29, 40, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  padding: 0 18px;
  width: 100%;
  z-index: 2;
}

.topbar strong {
  letter-spacing: 0.02em;
}

#status {
  color: #c2cbe0;
  margin-left: 12px;
}

.controls {
  color: #aeb7cc;
  opacity: 0.88;
}

.topbar-actions {
  align-items: center;
  display: flex;
  gap: 14px;
}

.fullscreen-button,
.logout-button {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: #f6f7fb;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  height: 32px;
  padding: 0 12px;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.fullscreen-button:hover,
.logout-button:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}

.fullscreen-button:active,
.logout-button:active {
  transform: translateY(1px);
}

.fullscreen-button:disabled,
.logout-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.logout-button.is-hidden {
  display: none;
}

#game {
  align-self: center;
  display: block;
  height: calc(min(calc(100vh - 48px), calc(100vw * 9 / 16)) * var(--game-display-scale));
  image-rendering: auto;
  width: calc(min(100vw, calc((100vh - 48px) * 16 / 9)) * var(--game-display-scale));
  -webkit-user-drag: none;
}

.item-cooldown-hud {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  pointer-events: none;
  position: fixed;
  transform-origin: right top;
  z-index: 5;
}

.item-cooldown-hud.is-hidden {
  display: none;
}

.item-cooldown-entry {
  background: rgba(15, 23, 42, 0.82);
  border: 2px solid rgba(226, 232, 240, 0.78);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
  height: 66px;
  overflow: hidden;
  position: relative;
  width: 66px;
}

.item-cooldown-entry img {
  display: block;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  width: 100%;
}

.item-cooldown-mask {
  background: conic-gradient(
    from 0deg,
    transparent 0deg var(--cooldown-angle),
    rgba(5, 10, 20, 0.68) var(--cooldown-angle) 360deg
  );
  inset: 0;
  position: absolute;
}

.item-cooldown-seconds {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  inset: 0;
  justify-content: center;
  position: absolute;
  text-shadow: 0 1px 3px #000, 0 0 4px #000;
}

.debug-menu {
  background: rgba(9, 14, 23, 0.88);
  border: 1px solid rgba(113, 131, 160, 0.65);
  border-radius: 8px;
  color: #e8edf5;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  min-width: 112px;
  padding: 8px 10px;
  pointer-events: none;
  position: fixed;
  right: 12px;
  top: 60px;
  z-index: 7;
}

.debug-menu-title {
  color: #6fa0e8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 5px;
}

.debug-menu-row {
  align-items: baseline;
  display: flex;
  font-size: 13px;
  gap: 16px;
  justify-content: space-between;
}

.debug-menu-row output {
  color: #fff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.debug-profiler-toggle {
  border-top: 1px solid rgba(113, 131, 160, 0.35);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  color: #8f9bad;
  cursor: pointer;
  display: block;
  font-size: 9px;
  letter-spacing: 0.08em;
  margin-top: 6px;
  padding-top: 5px;
  pointer-events: auto;
  text-align: right;
  width: 100%;
}

.debug-profiler-toggle:hover,
.debug-profiler-toggle[aria-pressed="true"] {
  color: #8ab4f8;
}

.debug-profiler {
  min-width: 310px;
  padding-top: 4px;
}

.debug-profiler .debug-menu-row {
  font-size: 11px;
}

.debug-profiler .debug-menu-row output {
  font-size: 12px;
}

.debug-profiler-heading {
  color: #6fa0e8;
  font-size: 9px;
  letter-spacing: 0.08em;
  margin-top: 8px;
}

.debug-profiler pre {
  color: #d7deea;
  font: inherit;
  font-size: 10px;
  line-height: 1.45;
  margin: 3px 0 0;
  white-space: pre;
}

.player-progress-hud {
  align-items: center;
  background: rgba(15, 23, 42, 0.76);
  border: 1px solid rgba(100, 116, 139, 0.56);
  border-radius: 12px;
  color: #f8fafc;
  display: grid;
  font-family: var(--ui-font-family);
  gap: 20px;
  grid-template-columns: 84px minmax(0, 1fr);
  height: 84px;
  padding: 12px 18px 13px 13px;
  pointer-events: none;
  position: fixed;
  transform-origin: left top;
  width: 414px;
  z-index: 5;
}

.player-progress-hud.is-hidden {
  display: none;
}

.player-progress-level {
  align-items: center;
  align-self: stretch;
  background: rgba(30, 41, 59, 0.72);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.player-progress-level-label {
  color: #aab4c3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.player-progress-level strong {
  color: #ffffff;
  font-size: 36px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.player-progress-exp {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.player-progress-exp-row {
  align-items: baseline;
  color: #f8fafc;
  display: flex;
  font-size: 15px;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: 0.08em;
}

#player-progress-exp-value {
  color: #cbd5e1;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0;
}

.player-progress-track {
  background: rgba(30, 41, 59, 0.68);
  border: 0;
  border-radius: 5px;
  height: 18px;
  overflow: hidden;
  position: relative;
}

.player-progress-fill {
  background: #f6c343;
  border-radius: inherit;
  height: 100%;
  transition: width 280ms ease-out;
  width: 0;
}

.gm-notice {
  align-items: center;
  background: rgba(9, 13, 22, 0.84);
  border: 1px solid rgba(255, 210, 94, 0.38);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
  color: #fff4c4;
  display: flex;
  font-family: var(--ui-font-family);
  font-size: 14px;
  font-weight: 700;
  height: 34px;
  left: 50%;
  overflow: hidden;
  padding: 0 18px;
  pointer-events: none;
  position: absolute;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  top: 60px;
  transform: translateX(-50%);
  width: min(860px, calc(100vw - 40px));
  z-index: 5;
}

.gm-notice.is-hidden {
  display: none;
}

.gm-notice-track {
  animation: gm-notice-scroll 22s linear infinite;
  display: flex;
  flex: 0 0 auto;
  gap: 96px;
  min-width: max-content;
  white-space: nowrap;
}

.gm-notice-text {
  flex: 0 0 auto;
}

@keyframes gm-notice-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 48px));
  }
}

.chat-panel {
  bottom: 22px;
  display: grid;
  gap: 8px;
  left: max(18px, calc((100vw - min(100vw, calc((100vh - 48px) * 16 / 9)) * var(--game-display-scale)) / 2 + 18px));
  pointer-events: none;
  position: absolute;
  width: min(420px, calc(100vw - 36px));
  z-index: 4;
}

.mobile-shortcuts {
  bottom: 76px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
  position: absolute;
  right: max(18px, calc((100vw - min(100vw, calc((100vh - 48px) * 16 / 9)) * var(--game-display-scale)) / 2 + 18px));
  z-index: 7;
}

.item-shortcut-hud-slot {
  backdrop-filter: blur(10px);
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.58);
  border-radius: 11px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
  color: #f8fafc;
  height: 58px;
  padding: 4px;
  position: relative;
  touch-action: manipulation;
  width: 58px;
}

.item-shortcut-hud-slot:disabled {
  cursor: default;
}

.item-shortcut-hud-slot.is-empty,
.item-shortcut-hud-slot.is-depleted {
  filter: grayscale(0.7);
  opacity: 0.62;
}

.item-shortcut-hud-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 100%;
  width: 100%;
}

.item-shortcut-hud-key {
  background: rgba(2, 6, 23, 0.88);
  border-radius: 5px;
  color: #e2e8f0;
  font: 700 10px var(--ui-font-family);
  left: 3px;
  line-height: 17px;
  max-width: 38px;
  overflow: hidden;
  padding: 0 4px;
  position: absolute;
  text-overflow: ellipsis;
  top: 3px;
  white-space: nowrap;
  z-index: 1;
}

.item-shortcut-hud-count {
  bottom: 2px;
  color: #fff;
  font: 800 15px var(--ui-font-family);
  font-variant-numeric: tabular-nums;
  position: absolute;
  right: 4px;
  text-shadow: 0 1px 3px #000, 0 0 4px #000;
}

.item-shortcut-hud-empty {
  align-items: center;
  color: #94a3b8;
  display: flex;
  font: 800 20px var(--ui-font-family);
  height: 100%;
  justify-content: center;
}

.chat-log {
  display: grid;
  gap: 5px;
  max-height: 111px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

.chat-message {
  align-items: start;
  background: rgba(10, 14, 22, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  color: #f8fafc;
  display: grid;
  font-family: var(--ui-font-family);
  font-size: 13px;
  gap: 4px;
  grid-template-columns: auto auto minmax(0, 1fr);
  line-height: 1.35;
  padding: 7px 9px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.chat-message.is-mine {
  border-color: rgba(126, 169, 255, 0.28);
}

.chat-message.is-system {
  border-color: #e9b85a66;
  background: #332b1dcc;
  color: #ffe7ad;
}

.chat-message.is-system .chat-sender {
  color: #f4c767;
}

.chat-sender {
  color: #9ec5ff;
  font-weight: 700;
  white-space: nowrap;
}

.chat-time {
  color: #aab4c4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gm-name-tag {
  color: #f0bd55;
  text-shadow: 0 0 6px rgba(240, 189, 85, 0.42);
}

.chat-text {
  color: #f8fafc;
  min-width: 0;
  overflow-wrap: anywhere;
}

.chat-form {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
  opacity: 0.72;
  pointer-events: auto;
  transition: opacity 140ms ease, transform 140ms ease;
}

.chat-panel.is-active .chat-form,
.chat-form:focus-within {
  opacity: 1;
}

.chat-form input {
  background: rgba(12, 18, 28, 0.82);
  border: 1px solid rgba(132, 149, 178, 0.36);
  border-radius: 10px;
  color: #ffffff;
  font: 14px var(--ui-font-family);
  height: 36px;
  min-width: 0;
  outline: none;
  padding: 0 10px;
}

.chat-form input:focus {
  background: rgba(14, 21, 34, 0.96);
  border-color: rgba(126, 169, 255, 0.82);
  box-shadow: 0 0 0 4px rgba(63, 124, 255, 0.18);
}

.game-shell:fullscreen {
  background: #11151d;
}

.start-panel,
.version-panel,
.inventory-panel {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(13, 17, 25, 0.62);
  display: flex;
  inset: 48px 0 0;
  justify-content: center;
  position: absolute;
  z-index: 10;
}

.start-panel.is-hidden,
.version-panel.is-hidden,
.inventory-panel.is-hidden {
  display: none;
}

.inventory-panel {
  align-items: flex-start;
  animation: inventory-backdrop-in 180ms ease-out both;
  background: transparent;
  backdrop-filter: none;
  color: #f8fafc;
  font-family: var(--ui-font-family);
  justify-content: center;
  padding: 34px 18px;
  z-index: 8;
  -webkit-backdrop-filter: none;
}

.inventory-panel.is-dragging-item {
  background: transparent;
}

.menu-bar {
  align-items: center;
  background: rgba(12, 18, 28, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  bottom: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  display: flex;
  gap: 6px;
  padding: 7px;
  position: absolute;
  right: max(18px, calc((100vw - min(100vw, calc((100vh - 48px) * 16 / 9)) * var(--game-display-scale)) / 2 + 18px));
  z-index: 6;
}

.menu-bar button,
.gift-claim-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #f8fafc;
  cursor: pointer;
  font: 13px var(--ui-font-family);
  height: 34px;
  padding: 0 12px;
  position: relative;
}

.menu-bar button:hover,
.gift-claim-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.bestiary-panel { position: fixed; z-index: 116; inset: 0; display: grid; place-items: center; padding: 24px; background: transparent; }
.bestiary-window { width: min(920px, 94vw); height: min(690px, 88vh); overflow: hidden; border: 1px solid #8ba1c080; border-radius: 18px; background: rgba(16, 23, 34, .72); color: #f3f7ff; box-shadow: 0 18px 48px #0007; backdrop-filter: blur(5px); }
.bestiary-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 16px; }
.bestiary-header small, .bestiary-information > small { color: #8eabd2; font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.bestiary-header h2 { margin: 5px 0 0; font-size: 30px; }
#bestiary-close-button { border: 0; background: transparent; color: #c9d6e8; font-size: 28px; cursor: pointer; }
.bestiary-body { height: calc(100% - 92px); overflow: auto; padding: 0 28px 28px; }
#bestiary-summary { margin: 0 0 14px; padding: 10px 0; border-bottom: 1px solid #ffffff18; color: #9fb0c8; }
.bestiary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.bestiary-entry { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; min-height: 96px; padding: 7px; border: 1px solid #ffffff1f; border-radius: 14px; background: #0a122080; color: #f6fbff; text-align: left; cursor: pointer; }
.bestiary-entry:hover, .bestiary-entry:focus-visible { border-color: #8fb4ff; background: #243a5a; outline: none; transform: translateY(-1px); }
.bestiary-entry-thumbnail { display: grid; place-items: center; width: 104px; height: 88px; overflow: hidden; border-radius: 11px; background: radial-gradient(circle, #3149684d 0, #17233726 62%, transparent 63%); }
.bestiary-entry-thumbnail canvas { display: block; width: 104px; height: 88px; }
.bestiary-entry-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 9px; background: #0a122080; color: #8eabd2; font-weight: 700; }
.bestiary-entry-id { display: block; margin-bottom: 4px; color: #8eabd2; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.bestiary-entry-text, .bestiary-entry-text strong, .bestiary-entry-text span { display: block; }
.bestiary-entry-text > span { margin-top: 5px; color: #9fb0c8; font-size: 12px; }
.bestiary-detail-page:not(.is-hidden) { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bestiary-back-button { position: static; flex: 0 0 auto; display: block; width: 100%; margin: 0 0 12px; padding: 8px 0; border: 0; background: transparent; color: #8eabd2; cursor: pointer; font-size: 14px; text-align: left; }
.bestiary-detail-layout { display: grid; flex: 1; grid-template-columns: 300px minmax(280px, 1fr); align-items: start; gap: 26px; min-height: 0; overflow-y: auto; }
.bestiary-preview { display: grid; place-items: center; min-height: 320px; border-radius: 14px; background: radial-gradient(circle, #3149684d 0, #17233726 62%, transparent 63%); overflow: hidden; }
#bestiary-preview-canvas { width: 300px; height: 300px; }
.bestiary-information h3 { margin: 7px 0 5px; font-size: 34px; }
.bestiary-kill-count { padding: 10px 0; border-bottom: 1px solid #ffffff18; color: #9fb0c8; }
.bestiary-description { min-height: 82px; white-space: pre-line; color: #c8d1df; line-height: 1.7; }
.bestiary-information h4 { margin-bottom: 10px; }
.bestiary-drops { display: grid; gap: 8px; }
.bestiary-drop { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid #ffffff1f; border-radius: 9px; background: #0a122080; }
.bestiary-drop img { width: 42px; height: 42px; object-fit: contain; }
.bestiary-drop.is-unknown img { filter: brightness(0); opacity: .35; }

@media (max-width: 720px) {
  .bestiary-panel { padding: 8px; }
  .bestiary-window { width: 100%; height: 94vh; }
  .bestiary-header { padding: 18px 18px 12px; }
  .bestiary-body { padding: 0 18px 18px; }
  .bestiary-list { grid-template-columns: 1fr; }
  .bestiary-detail-layout { grid-template-columns: 1fr; }
  .bestiary-preview { min-height: 240px; }
  #bestiary-preview-canvas { width: 260px; height: 260px; }
}

.gift-badge {
  align-items: center;
  background: #f43f5e;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  min-width: 16px;
  padding: 0 4px;
  position: absolute;
  right: -5px;
  top: -6px;
}

.gift-badge.is-hidden {
  display: none;
}

.notice-panel,
.gift-panel,
.settings-panel,
.alchemy-panel,
.skin-panel {
  align-items: flex-end;
  display: flex;
  inset: 48px 0 0;
  justify-content: flex-end;
  padding: 18px;
  pointer-events: none;
  position: absolute;
  z-index: 9;
}

.notice-panel.is-hidden,
.gift-panel.is-hidden,
.settings-panel.is-hidden,
.alchemy-panel.is-hidden,
.skin-panel.is-hidden {
  display: none;
}

.notice-window,
.gift-window,
.settings-window,
.alchemy-window,
.skin-window {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  color: #f8fafc;
  display: grid;
  gap: 12px;
  max-height: min(620px, calc(100vh - 92px));
  padding: 16px;
  pointer-events: auto;
  width: min(380px, calc(100vw - 36px));
}

.skin-window {
  backdrop-filter: blur(5px);
  background: rgba(16, 23, 34, 0.72);
  border-color: #8ba1c080;
  border-radius: 18px;
  box-shadow: 0 18px 48px #0007;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  width: min(1040px, calc(100vw - 36px));
  position: relative;
}

.skin-window > .gift-header {
  border-bottom: 1px solid #ffffff18;
  padding-bottom: 12px;
}

.skin-window > .gift-header h2 {
  font-size: 24px;
  letter-spacing: 0.01em;
}

.skin-window > .gift-header span { color: #9fb0c8; }

.skin-panel {
  align-items: flex-start;
  justify-content: center;
  padding: 34px 18px;
}

.skin-slots {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
  overflow: auto;
}

.skin-part-tabs {
  display: flex;
  gap: 6px;
  padding: 2px;
}

.skin-pane-tabs {
  display: none;
}

.skin-part-tabs button {
  background: #0a122080;
  border: 1px solid #ffffff1f;
  border-radius: 9px;
  color: #aebed4;
  cursor: pointer;
  font-size: 12px;
  padding: 7px 14px;
}

.skin-part-tabs button:hover { background: #243a5a; border-color: #7898c7; color: #f3f7ff; }
.skin-part-tabs button.is-active {
  background: #31527d;
  border-color: #8fb4ff;
  color: #fff;
}

.skin-closet-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1fr) minmax(360px, 430px) minmax(220px, 1fr);
  min-height: 390px;
}

.skin-item-pane,
.skin-current-pane {
  background: #0a122080;
  border: 1px solid #ffffff1f;
  border-radius: 14px;
  min-width: 0;
  overflow: hidden;
  padding: 12px;
}

.skin-item-pane h3,
.skin-current-pane h3 {
  color: #dce7f6;
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid #ffffff18;
}

.skin-item-pane h3 span { color: #8eabd2; font-size: 11px; font-weight: 700; }

.skin-current-pane .skin-slots {
  grid-template-columns: minmax(0, 1fr);
  max-height: 350px;
}

.skin-item-list {
  align-content: start;
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr);
  max-height: 350px;
  overflow-y: auto;
  padding-right: 3px;
}

.skin-closet-item {
  align-items: center;
  background: rgba(20, 31, 47, 0.72);
  border: 1px solid #ffffff14;
  border-radius: 9px;
  color: #d8e3f2;
  cursor: pointer;
  display: grid;
  gap: 9px;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 44px;
  padding: 5px 8px;
  text-align: left;
  width: 100%;
}

.skin-closet-item:hover,
.skin-closet-item:focus-visible {
  background: #243a5a;
  border-color: #8fb4ff;
  outline: none;
}
.skin-closet-item.is-layered {
  background: rgba(29, 76, 70, 0.7);
  border-color: #63b6a4;
  box-shadow: inset 3px 0 #63d1b8;
}
.skin-closet-item img { height: 34px; object-fit: contain; width: 34px; }
.skin-closet-item span {
  font-size: 11px;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-hover-preview {
  background: rgba(15, 23, 42, 0.97);
  border: 1px solid #465267;
  border-radius: 12px;
  box-shadow: 0 16px 38px #000a;
  display: grid;
  justify-items: center;
  padding: 8px;
  pointer-events: none;
  position: fixed;
  text-align: center;
  width: 300px;
  z-index: 170;
}

.skin-hover-preview canvas { height: 230px; width: 300px; }
.skin-hover-preview strong { color: #e5edf8; font-size: 12px; padding: 4px 6px 6px; }

.skin-item-context {
  background: #202938;
  border: 1px solid #465267;
  border-radius: 8px;
  box-shadow: 0 12px 30px #0009;
  display: grid;
  gap: 4px;
  min-width: 180px;
  padding: 8px;
  position: fixed;
  z-index: 160;
}

.skin-item-context.is-hidden { display: none; }
.skin-item-context strong { color: #fff; font-size: 12px; padding: 5px 7px; }
.skin-item-context button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #dce5f2;
  cursor: pointer;
  padding: 8px;
  text-align: left;
}
.skin-item-context button:hover { background: #3971c6; }

@media (max-width: 900px) {
  .skin-panel {
    align-items: stretch;
    padding: 12px;
  }

  .skin-window {
    border-radius: 14px;
    height: calc(100dvh - 72px);
    max-height: calc(100dvh - 72px);
    min-height: 0;
    padding: 14px;
    width: calc(100vw - 24px);
  }

  .skin-part-tabs {
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
  }

  .skin-part-tabs button {
    flex: 0 0 auto;
  }

  .skin-closet-layout {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
  }

  .skin-hover-preview { display: none; }
}

.skin-character-preview {
  align-items: center;
  background: radial-gradient(circle at 50% 76%, rgba(96, 165, 250, 0.24), rgba(7, 12, 22, 0.82) 68%);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 14px;
  display: flex;
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 230px;
  overflow: hidden;
}

.skin-character-preview canvas {
  display: block;
  height: 230px;
  max-width: 100%;
  width: 300px;
}

.skin-slot {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  grid-template-rows: minmax(170px, 1fr) auto auto;
  overflow: hidden;
  padding: 10px;
}

.skin-preview {
  align-items: center;
  background: radial-gradient(circle at 50% 70%, rgba(96, 165, 250, 0.2), rgba(7, 12, 22, 0.7) 68%);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  min-height: 170px;
  overflow: hidden;
}

.skin-preview canvas { display: block; height: 190px; max-width: 100%; width: 180px; }
.skin-preview > span { color: #718096; font-size: 52px; font-weight: 200; }
.skin-slot-details { display: grid; gap: 3px; }
.skin-slot-details strong { color: #f8fafc; font-size: 14px; }
.skin-slot-details span, .skin-status { color: #aab4c3; font-size: 12px; margin: 0; }
.skin-slot-actions { display: flex; gap: 7px; }
.skin-slot-actions button {
  background: #3971c6; border: 1px solid #4b83d6; border-radius: 8px; color: #fff; cursor: pointer;
  flex: 1; font: 12px var(--ui-font-family); min-height: 34px; padding: 6px 8px;
}
.skin-slot-actions button:hover { background: #4780d5; }
.skin-slot-actions .skin-delete-button { background: #252e3b; border-color: #465267; flex: 0 0 auto; }
.skin-slot-actions .skin-delete-button:hover { background: #3a2530; border-color: #8b4658; }
.skin-slot-actions .skin-apply-button { background: #16815d; border-color: #27a477; flex: 0 0 auto; }
.skin-slot-actions .skin-apply-button:hover { background: #1b9670; }
.skin-slot-actions .skin-normal-apply-button { flex: 0 0 auto; }
.skin-slot-actions button:disabled { cursor: not-allowed; opacity: 0.5; }

.skin-confirm-panel {
  align-items: center;
  background: rgba(7, 11, 18, 0.78);
  border-radius: 16px;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 40;
}

.skin-confirm-dialog {
  background: #1a2330;
  border: 1px solid #465267;
  border-radius: 12px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.45);
  color: #e8edf5;
  padding: 20px;
  width: min(420px, 100%);
}

.skin-confirm-dialog h3 { font-size: 18px; margin: 0 0 9px; }
.skin-confirm-dialog p { color: #b8c4d6; font-size: 13px; line-height: 1.65; margin: 0; }
.portal-select-dialog { width: min(460px, calc(100vw - 36px)); }
.portal-select-list { display: grid; gap: 8px; max-height: min(420px, 55vh); margin: 16px 0; overflow: auto; }
.portal-select-list button { display: grid; gap: 4px; width: 100%; padding: 12px 14px; border: 1px solid #465a78; border-radius: 10px; background: #172234; color: #f4f7fb; text-align: left; cursor: pointer; }
.portal-select-list button:hover { border-color: #6fa0e8; background: #20304a; }
.portal-select-list strong { font-size: 14px; }
.portal-select-list small { color: #aebed2; font-size: 11px; }
.skin-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.skin-confirm-actions button {
  background: #252e3b; border: 1px solid #465267; border-radius: 8px; color: #dce3ed; cursor: pointer;
  font: 13px var(--ui-font-family); min-height: 36px; padding: 7px 14px;
}
.skin-confirm-actions button:hover { background: #303b4c; }
.skin-confirm-actions #skin-confirm-apply { background: #3971c6; border-color: #3971c6; color: #fff; }
.skin-confirm-actions #skin-confirm-apply:hover { background: #4780d5; }
.skin-confirm-actions #skin-confirm-apply.is-destructive { background: #a63c50; border-color: #bd4a60; }
.skin-confirm-actions #skin-confirm-apply.is-destructive:hover { background: #ba465d; }

@media (max-width: 680px) {
  .skin-slots {
    align-content: start;
    grid-auto-rows: max-content;
    grid-template-columns: 1fr;
    overscroll-behavior: contain;
  }

  .skin-slot {
    grid-template-columns: minmax(92px, 118px) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .skin-slot:not(.equipment-skin-slot) {
    min-height: 194px;
  }

  .skin-preview {
    grid-column: 1;
    grid-row: 1;
    min-height: 128px;
  }

  .skin-preview canvas { height: auto; width: 100%; }
  .skin-slot-actions {
    align-self: end;
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .skin-slot-actions button {
    min-width: 0;
    padding-inline: 4px;
    width: 100%;
  }

  .skin-slot-actions button:only-child {
    grid-column: 1 / -1;
  }

  .equipment-skin-slot .skin-slot-actions {
    grid-row: 1;
  }
}

@media (max-width: 360px) {
  .skin-slot {
    gap: 8px;
    grid-template-columns: 92px minmax(0, 1fr);
    padding: 8px;
  }

  .skin-slot-actions {
    gap: 5px;
  }

  .skin-slot-actions button {
    font-size: 11px;
  }
}

.alchemy-window {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  position: relative;
  width: min(620px, calc(100vw - 36px));
}

.alchemy-panel {
  align-items: flex-start;
  justify-content: center;
  padding: 34px 18px;
}

.alchemy-tabs { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.alchemy-tabs button,
.alchemy-recipe button {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  color: #f8fafc; cursor: pointer; font: 13px var(--ui-font-family); min-height: 34px; padding: 0 14px;
}
.alchemy-tabs button.is-active { background: #2563eb; border-color: #60a5fa; }
.alchemy-category-tabs {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.alchemy-category-tabs:empty { display: none; }
.alchemy-category-tabs button {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #cbd5e1;
  cursor: pointer;
  flex: 0 0 auto;
  font: 12px var(--ui-font-family);
  min-height: 30px;
  padding: 0 14px;
}
.alchemy-category-tabs button.is-active {
  background: rgba(37, 99, 235, .42);
  border-color: #60a5fa;
  color: #fff;
}
.alchemy-recipes { display: grid; gap: 8px; min-height: 0; overflow: auto; }
.alchemy-recipe {
  align-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; display: grid; gap: 10px; grid-template-columns: 46px minmax(0,1fr) auto; padding: 10px;
}
.alchemy-icon { background-position: center; background-repeat: no-repeat; background-size: contain; height: 42px; width: 42px; }
.alchemy-recipe-body { display: grid; gap: 4px; min-width: 0; }
.alchemy-recipe-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alchemy-recipe-body span, .alchemy-status, .alchemy-empty { color: #cbd5e1; font-size: 12px; margin: 0; }
.alchemy-recipe button:disabled { cursor: not-allowed; opacity: .42; }
.alchemy-recipe[tabindex="0"]:focus-visible {
  border-color: rgba(96, 165, 250, .82);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .38);
  outline: none;
}

.alchemy-equipment-preview {
  backdrop-filter: blur(30px) saturate(1.55);
  background: rgba(15, 23, 42, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .34), 0 1px 0 rgba(255, 255, 255, .16) inset;
  color: #f8fafc;
  display: grid;
  justify-items: center;
  left: 0;
  padding: 10px 12px 12px;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 204px;
  z-index: 30;
  -webkit-backdrop-filter: blur(30px) saturate(1.55);
}
.alchemy-equipment-preview.is-hidden { display: none; }
.alchemy-equipment-preview canvas { display: block; height: 190px; width: 180px; }
.alchemy-equipment-preview strong {
  border-top: 1px solid rgba(226, 232, 240, .14);
  box-sizing: border-box;
  font-size: 14px;
  overflow: hidden;
  padding-top: 8px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.alchemy-equipment-preview span { color: #94a3b8; font-size: 11px; margin-top: 2px; }

.alchemy-quantity-panel {
  align-items: center;
  background: rgba(7, 11, 18, 0.82);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: absolute;
  z-index: 2;
}
.alchemy-quantity-panel.is-hidden { display: none; }
.alchemy-quantity-dialog {
  background: #1a2330;
  border: 1px solid #52647f;
  border-radius: 12px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  color: #e8edf5;
  padding: 20px;
  width: min(380px, 100%);
}
.alchemy-quantity-dialog h3 { font-size: 18px; margin: 0 0 9px; }
.alchemy-quantity-dialog p { color: #b8c4d6; font-size: 13px; line-height: 1.6; margin: 0 0 14px; }
.alchemy-quantity-dialog label { display: block; font-size: 13px; margin-bottom: 6px; }
.alchemy-quantity-dialog input {
  background: #101721; border: 1px solid #52647f; border-radius: 8px; box-sizing: border-box;
  color: #fff; font: 18px var(--ui-font-family); padding: 10px; width: 100%;
}
.alchemy-quantity-dialog input:focus { border-color: #60a5fa; outline: 2px solid rgba(96, 165, 250, 0.25); }
.alchemy-quantity-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.alchemy-quantity-actions button {
  background: #252e3b; border: 1px solid #465267; border-radius: 8px; color: #dce3ed; cursor: pointer;
  font: 13px var(--ui-font-family); min-height: 36px; padding: 7px 14px;
}
.alchemy-quantity-actions button:hover { background: #303b4c; }
.alchemy-quantity-actions button[type="submit"] { background: #3971c6; border-color: #3971c6; color: #fff; }
.alchemy-quantity-actions button[type="submit"]:hover { background: #4780d5; }

.notice-window {
  width: min(520px, calc(100vw - 36px));
}

.gift-window {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

.notice-list {
  display: grid;
  gap: 10px;
  max-height: min(520px, calc(100vh - 190px));
  overflow: auto;
}

.notice-entry {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  display: grid;
  gap: 7px;
  padding: 11px;
}

.notice-entry h3 {
  font-size: 15px;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
}

.notice-date {
  color: #aab4c3;
  font-size: 12px;
}

.notice-body {
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.notice-empty {
  color: #cbd5e1;
  font-size: 13px;
  margin: 0;
}

.notice-pager {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.notice-pager button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #f8fafc;
  cursor: pointer;
  font: 13px var(--ui-font-family);
  height: 32px;
  padding: 0 12px;
}

.notice-pager button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.notice-pager span {
  color: #cbd5e1;
  font-size: 13px;
  min-width: 56px;
  text-align: center;
}

.gift-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.gift-header h2 {
  font-size: 20px;
  margin: 0 0 3px;
}

.gift-header span,
.gift-status,
.gift-empty,
.settings-window p {
  color: #cbd5e1;
  font-size: 13px;
  margin: 0;
}

.gift-close-button {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #dbe4ef;
  cursor: pointer;
  height: 26px;
  position: relative;
  width: 26px;
}

.gift-close-button::before,
.gift-close-button::after {
  background: currentColor;
  border-radius: 999px;
  content: "";
  height: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 2px;
}

.gift-close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.gift-close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.gift-list {
  align-content: start;
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.gift-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 9px;
}

.gift-item-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 38px;
  width: 38px;
}

.gift-row-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.gift-row-body strong,
.gift-row-body span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gift-row-body span {
  color: #cbd5e1;
  font-size: 12px;
}

.sound-settings {
  display: grid;
  gap: 14px;
}

.settings-window {
  overflow: auto;
  width: min(440px, calc(100vw - 36px));
}

.key-settings {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 10px;
  padding-top: 14px;
}

.key-settings-header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.key-settings h3 { font-size: 15px; margin: 0 0 3px; }
.key-settings-header p { line-height: 1.4; }
.key-binding-list { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; }
.key-binding-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 9px;
}
.key-binding-row span { font-size: 13px; }
.key-binding-row button, .key-reset-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #f8fafc;
  cursor: pointer;
  font: 12px var(--ui-font-family);
  min-height: 30px;
  padding: 5px 10px;
}
.key-binding-row button { min-width: 68px; }
.key-binding-row button:hover, .key-reset-button:hover { background: rgba(255, 255, 255, 0.17); }
.key-binding-row button.is-capturing { background: #2563eb; border-color: #60a5fa; }
.key-reset-button { color: #cbd5e1; white-space: nowrap; }
.key-binding-status { min-height: 18px; }

@media (max-width: 480px) {
  .key-binding-list { grid-template-columns: 1fr; }
  .key-settings-header { align-items: stretch; flex-direction: column; }
  .key-reset-button { justify-self: start; }
}

.sound-setting-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  display: grid;
  gap: 9px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.sound-setting-row span {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 700;
}

.sound-setting-row output {
  color: #cbd5e1;
  font-size: 13px;
  min-width: 42px;
  text-align: right;
}

.sound-setting-row input {
  accent-color: #60a5fa;
  cursor: pointer;
  grid-column: 1 / -1;
  width: 100%;
}

.gift-row-body .gift-reason {
  color: #f8fafc;
  white-space: normal;
}

.gift-claim-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.inventory-window {
  animation: inventory-window-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  backdrop-filter: blur(36px) saturate(1.65);
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.36),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(15, 23, 42, 0.7) inset;
  color: #f8fafc;
  display: grid;
  gap: 16px;
  max-height: min(760px, calc(100vh - 96px));
  padding: 18px;
  position: relative;
  transform-origin: 50% 18%;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  width: min(760px, calc(100vw - 36px));
  -webkit-backdrop-filter: blur(36px) saturate(1.65);
}

.inventory-window::before {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  content: "";
  height: 3px;
  left: 50%;
  opacity: 0.82;
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  width: 42px;
}

.inventory-panel.is-dragging-item .inventory-window {
  animation: inventory-drop-zone-pulse 1200ms ease-in-out infinite;
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(147, 197, 253, 0.38);
  box-shadow:
    0 30px 86px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(147, 197, 253, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.inventory-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  opacity: 0;
  transform: translateY(-4px);
  animation: inventory-header-in 220ms ease-out 70ms forwards;
  padding-right: 2px;
}

.inventory-header h2 {
  color: #f8fafc;
  font-family: var(--ui-font-family);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.16;
  margin: 0 0 4px;
}

#inventory-summary {
  color: #aab4c3;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.inventory-header-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.inventory-sort-button {
  background: rgba(96, 165, 250, 0.16);
  border: 1px solid rgba(147, 197, 253, 0.32);
  border-radius: 8px;
  color: #dbeafe;
  cursor: pointer;
  font-family: var(--ui-font-family);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 11px;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.inventory-sort-button:hover {
  background: rgba(96, 165, 250, 0.26);
  border-color: rgba(147, 197, 253, 0.48);
}

.inventory-sort-button:active {
  transform: translateY(1px);
}

.inventory-close-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #dbe4ef;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ui-font-family);
  font-size: 0;
  height: 24px;
  justify-content: center;
  line-height: 1;
  margin-right: -8px;
  margin-top: -10px;
  position: relative;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
  width: 24px;
}

.inventory-close-button::before,
.inventory-close-button::after {
  background: currentColor;
  border-radius: 999px;
  content: "";
  height: 11px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform-origin: center;
  width: 1.6px;
}

.inventory-close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.inventory-close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.inventory-close-button:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transform: scale(1.04);
}

.inventory-close-button:active {
  transform: scale(0.92);
}

.inventory-grid {
  animation: inventory-grid-in 240ms ease-out 110ms both;
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  max-height: min(640px, calc(100vh - 188px));
  overflow: auto;
  padding: 14px 14px 4px;
}

.item-shortcut-summary {
  align-items: flex-start;
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #cbd5e1;
  display: flex;
  font-size: 12px;
  gap: 8px;
  min-height: 38px;
  padding: 6px 9px;
}
.item-shortcut-summary > span:first-child { color: #94a3b8; }
.item-shortcut-empty { color: #94a3b8; }
.item-shortcut-icon { background-position: center; background-repeat: no-repeat; background-size: contain; height: 26px; width: 26px; }
.item-shortcut-slots { display: grid; flex: 1; gap: 5px; }
.item-shortcut-slot { align-items: center; display: flex; gap: 8px; min-width: 0; }
.item-shortcut-slot strong { color: #f8fafc; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-shortcut-summary kbd { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 6px; color: #fff; padding: 3px 7px; }
.item-shortcut-summary button {
  background: transparent; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; color: #cbd5e1;
  cursor: pointer; font: 11px var(--ui-font-family); padding: 4px 8px;
}
.item-shortcut-summary button:hover { background: rgba(255,255,255,.1); }

.inventory-grid.is-opening {
  overflow: hidden;
}

.inventory-slot {
  align-items: stretch;
  aspect-ratio: 1;
  background: rgba(15, 23, 42, 0.5);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  color: #f8fafc;
  display: grid;
  min-height: 0;
  padding: 4px;
  position: relative;
  transform: translateZ(0);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.inventory-grid.is-opening .inventory-slot {
  animation: inventory-slot-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: min(calc(var(--slot-index) * 5ms), 180ms);
}

.inventory-slot::before {
  content: none;
}

.inventory-slot:hover {
  background: rgba(30, 41, 59, 0.68);
  box-shadow: none;
  transform: translateY(-1px);
}

.inventory-slot.has-item {
  background: rgba(30, 41, 59, 0.76);
  box-shadow: none;
  cursor: grab;
}

.inventory-slot.has-item:hover {
  background: rgba(51, 65, 85, 0.82);
  box-shadow: none;
  transform: translateY(-2px) scale(1.015);
}

.inventory-slot.has-item:active {
  cursor: grabbing;
}

.inventory-slot.has-item.is-locked {
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.62) inset;
  cursor: default;
}

.inventory-slot.is-dragging {
  filter: saturate(1.08);
  opacity: 0.58;
  transform: scale(0.94);
}

.inventory-slot.is-drop-target {
  background: rgba(37, 99, 235, 0.28);
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.88) inset, 0 0 18px rgba(59, 130, 246, 0.3);
  transform: scale(1.04);
}

.inventory-slot.has-item.is-drop-target {
  background: rgba(37, 99, 235, 0.38);
}

.inventory-item-icon {
  align-self: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.26));
  height: 78%;
  justify-self: center;
  margin-top: -3px;
  position: relative;
  transition: filter 160ms ease, transform 160ms ease;
  width: 78%;
}

.inventory-grid.is-opening .inventory-item-icon {
  animation: inventory-item-arrive 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.inventory-slot.has-item:hover .inventory-item-icon {
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3));
  transform: translateY(-1px) scale(1.04);
}

.inventory-item-count {
  backdrop-filter: blur(14px) saturate(1.4);
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  bottom: 2px;
  color: #f8fafc;
  font-family: var(--ui-font-family);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 12px;
  height: 15px;
  min-width: 16px;
  padding: 1px 4px 2px;
  position: absolute;
  right: 2px;
  text-align: center;
  text-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.inventory-grid.is-opening .inventory-item-count {
  animation: inventory-count-in 180ms ease-out 120ms both;
}

.inventory-item-active-badge {
  color: #22c55e;
  font-size: 10px;
  left: 3px;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  text-shadow: 0 1px 4px rgba(22, 163, 74, 0.65);
  top: 3px;
  z-index: 2;
}

.item-tooltip {
  backdrop-filter: blur(30px) saturate(1.55);
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 -1px 0 rgba(15, 23, 42, 0.72) inset;
  color: #f8fafc;
  display: grid;
  gap: 13px;
  grid-template-columns: 86px minmax(210px, 1fr);
  left: 0;
  max-width: min(460px, calc(100vw - 24px));
  min-height: 112px;
  padding: 14px;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 30;
  -webkit-backdrop-filter: blur(30px) saturate(1.55);
}

.item-tooltip.is-hidden {
  display: none;
}

.item-tooltip::before {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  content: "";
  inset: 3px;
  opacity: 0.84;
  position: absolute;
}

.item-tooltip-icon {
  align-self: center;
  background-color: rgba(255, 255, 255, 0.1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 82% 82%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 10px 22px rgba(0, 0, 0, 0.24);
  height: 76px;
  justify-self: center;
  overflow: hidden;
  position: relative;
  width: 76px;
  z-index: 1;
}

.item-tooltip-body {
  min-width: 0;
  padding-top: 2px;
  position: relative;
  z-index: 1;
}

.item-tooltip-name {
  border-bottom: 1px solid rgba(226, 232, 240, 0.14);
  font-family: var(--ui-font-family);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  margin-bottom: 7px;
  padding-bottom: 6px;
  text-shadow: none;
}

.item-tooltip-description {
  color: #cbd5e1;
  font-family: var(--ui-font-family);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.48;
  text-shadow: none;
}

.item-tooltip-description p {
  margin: 0;
}

.item-tooltip-description p + p {
  margin-top: 4px;
}
.item-tooltip-description .item-enhancement-line { color: #94a3b8; font-size: 12px; }
.item-tooltip-description .item-enhancement-line.is-active { color: #c7d2fe; }

.item-use-dialog-panel {
  align-items: center;
  background: rgba(2, 6, 23, 0.42);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: absolute;
  z-index: 60;
}

.item-use-dialog-panel.is-hidden {
  display: none;
}

.item-use-dialog {
  backdrop-filter: blur(30px) saturate(1.5);
  background: rgba(15, 23, 42, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.16) inset;
  color: #f8fafc;
  display: grid;
  gap: 12px;
  padding: 18px;
  width: min(340px, calc(100vw - 36px));
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
}

.item-use-dialog h3 {
  font-family: var(--ui-font-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.box-ticket-dialog { width: min(440px, calc(100vw - 36px)); }
.box-ticket-rewards {
  display: grid;
  gap: 7px;
  max-height: min(360px, 52vh);
  overflow-y: auto;
  padding: 2px;
}
.box-ticket-reward {
  align-items: center;
  background: rgba(30, 41, 59, 0.78);
  border: 1px solid rgba(199, 210, 254, 0.2);
  border-radius: 10px;
  color: #f8fafc;
  cursor: pointer;
  display: grid;
  font: 13px var(--ui-font-family);
  gap: 10px;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 52px;
  padding: 7px 10px;
  text-align: left;
}
.box-ticket-reward:hover,
.box-ticket-reward:focus { background: rgba(55, 48, 163, 0.62); outline: none; }
.box-ticket-reward.is-selected {
  background: rgba(67, 56, 202, 0.82);
  border-color: #a5b4fc;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.18);
}
.box-ticket-reward img { height: 38px; object-fit: contain; width: 38px; }
.box-ticket-reward strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.item-enhance-dialog { width: min(430px, calc(100vw - 36px)); }
.item-enhance-dialog > p { color: #cbd5e1; line-height: 1.5; margin: 0; }
.item-enhance-material { display: grid; gap: 6px; }
.item-enhance-material > span { color: #a5b4fc; font-size: 12px; font-weight: 700; }
.item-enhance-hammer-select { position: relative; }
.item-enhance-hammer-trigger,
.item-enhance-hammer-option {
  align-items: center;
  color: #f8fafc;
  display: grid;
  font: 13px var(--ui-font-family);
  gap: 9px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  text-align: left;
  width: 100%;
}
.item-enhance-hammer-trigger {
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(199, 210, 254, 0.3);
  border-radius: 9px;
  cursor: pointer;
  min-height: 44px;
  padding: 7px 10px;
}
.item-enhance-hammer-trigger:focus { border-color: #818cf8; outline: 2px solid rgba(99, 102, 241, 0.24); }
.item-enhance-hammer-trigger:disabled { cursor: not-allowed; opacity: 0.5; }
.item-enhance-hammer-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 28px;
  width: 28px;
}
.item-enhance-hammer-arrow {
  border-color: #c7d2fe transparent transparent;
  border-style: solid;
  border-width: 5px 4px 0;
  height: 0;
  width: 0;
}
.item-enhance-hammer-trigger[aria-expanded="true"] .item-enhance-hammer-arrow { transform: rotate(180deg); }
.item-enhance-hammer-options {
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(199, 210, 254, 0.38);
  border-radius: 9px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
  display: grid;
  left: 0;
  max-height: 190px;
  overflow-y: auto;
  padding: 4px;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 2;
}
.item-enhance-hammer-options.is-hidden { display: none; }
.item-enhance-hammer-option {
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  grid-template-columns: 28px minmax(0, 1fr);
  min-height: 40px;
  padding: 6px;
}
.item-enhance-hammer-option:hover,
.item-enhance-hammer-option:focus,
.item-enhance-hammer-option[aria-selected="true"] { background: rgba(67, 56, 202, 0.62); outline: none; }
.item-enhance-hammer-option:disabled { cursor: not-allowed; opacity: 0.45; }
.item-enhance-material select {
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(199, 210, 254, 0.3);
  border-radius: 9px;
  color: #f8fafc;
  font: 13px var(--ui-font-family);
  min-width: 0;
  padding: 9px 10px;
  width: 100%;
}
.item-enhance-material select:focus { border-color: #818cf8; outline: 2px solid rgba(99, 102, 241, 0.24); }
.item-enhance-material select:disabled { opacity: 0.5; }
.item-enhance-slots { display: grid; gap: 9px; }
.item-enhance-slots button {
  align-items: center;
  background: rgba(51, 65, 85, 0.72);
  border: 1px solid rgba(199, 210, 254, 0.22);
  border-radius: 11px;
  color: #f8fafc;
  cursor: pointer;
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  text-align: left;
}
.item-enhance-slots button:hover:not(:disabled) { background: rgba(67, 56, 202, 0.72); border-color: rgba(199, 210, 254, 0.6); }
.item-enhance-slots button.is-selected { background: rgba(67, 56, 202, 0.82); border-color: #a5b4fc; box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2); }
.item-enhance-slots button:disabled { cursor: not-allowed; opacity: 0.45; }
.item-enhance-slots strong { font-size: 12px; color: #a5b4fc; }
.item-enhance-slots span { font-size: 14px; }
.item-enhance-status { min-height: 22px; color: #fde68a !important; font-size: 13px; }
.item-enhance-confirm-skip {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 8px;
  width: fit-content;
}
.item-use-dialog .item-enhance-confirm-skip input {
  accent-color: #6366f1;
  height: 16px;
  margin: 0;
  padding: 0;
  width: 16px;
}
.item-enhance-confirm-skip span { color: #cbd5e1; font-size: 12px; }
.item-enhance-confirm-panel {
  align-items: center;
  background: rgba(2, 6, 23, 0.76);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: absolute;
  z-index: 1;
}
.item-enhance-confirm-panel.is-hidden { display: none; }
.item-enhance-confirm-dialog { width: min(360px, calc(100vw - 36px)); }


.item-use-dialog p {
  color: #cbd5e1;
  font-family: var(--ui-font-family);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.item-use-dialog label {
  color: #dbe4ef;
  font-family: var(--ui-font-family);
  font-size: 12px;
  font-weight: 700;
}

.item-use-dialog input {
  background: rgba(2, 6, 23, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #f8fafc;
  font: 700 16px var(--ui-font-family);
  height: 40px;
  outline: none;
  padding: 0 10px;
  width: 100%;
}

.item-use-dialog input:focus {
  border-color: rgba(147, 197, 253, 0.72);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.pet-name-dialog select {
  background: rgba(2, 6, 23, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #f8fafc;
  font: 700 15px var(--ui-font-family);
  min-height: 40px;
  padding: 0 10px;
  width: 100%;
}

.pet-name-status {
  color: #ff9d9d !important;
  min-height: 1.3em;
}

.item-use-dialog-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.item-use-dialog-actions.is-single {
  grid-template-columns: 1fr;
}

.item-use-dialog-actions button {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #f8fafc;
  cursor: pointer;
  font: 700 13px var(--ui-font-family);
  height: 38px;
  transition: background 140ms ease, transform 140ms ease;
}

.item-use-cancel-button {
  background: rgba(255, 255, 255, 0.09);
}

.item-use-confirm-button {
  background: rgba(37, 99, 235, 0.76);
}

.item-use-dialog-actions button:hover {
  transform: translateY(-1px);
}

.item-use-dialog-actions button:active {
  transform: translateY(1px);
}

@keyframes inventory-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes inventory-window-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes inventory-header-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes inventory-grid-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes inventory-slot-in {
  from {
    opacity: 0;
    transform: translateY(7px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes inventory-item-arrive {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes inventory-count-in {
  from {
    opacity: 0;
    transform: translateY(3px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes inventory-drop-zone-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.003);
  }
}

@media (prefers-reduced-motion: reduce) {
  .inventory-panel,
  .inventory-window,
  .inventory-header,
  .inventory-grid,
  .inventory-slot,
  .inventory-item-icon,
  .inventory-item-icon::after,
  .inventory-item-count {
    animation: none;
    transition: none;
  }

  .inventory-header,
  .inventory-grid,
  .inventory-slot,
  .inventory-item-icon,
  .inventory-item-count {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .inventory-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .item-tooltip {
    gap: 10px;
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 104px;
    padding: 14px;
  }

  .item-tooltip-icon {
    height: 72px;
    width: 72px;
  }

  .item-tooltip-name {
    font-size: 18px;
    margin-bottom: 6px;
    padding-bottom: 5px;
  }

  .item-tooltip-description {
    font-size: 14px;
    line-height: 1.45;
  }
}

.start-form,
.version-dialog {
  background: rgba(28, 34, 47, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 12px;
  min-width: min(320px, calc(100vw - 32px));
  padding: 24px;
}

.start-form h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 4px;
}

.auth-status {
  color: #c8d0e1;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.start-form.is-maintenance h1,
.start-form.is-maintenance .auth-status {
  color: #fff4c4;
}

.account-delete-link {
  appearance: none;
  background: none;
  border: none;
  box-shadow: none !important;
  color: #ffb4b4;
  cursor: pointer;
  display: inline;
  font-size: 12px;
  height: auto;
  justify-self: center;
  padding: 0;
  text-decoration: underline;
  transition: color 140ms ease;
}

.account-delete-link:hover {
  background: none;
  box-shadow: none !important;
  filter: none;
  color: #ffd1d1;
}

.account-delete-link:active {
  background: none;
  transform: none;
}

.account-delete-link:focus-visible {
  outline: 1px solid #ffb4b4;
  outline-offset: 3px;
}

.account-delete-link.is-hidden {
  display: none;
}

.account-delete-panel {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(13, 17, 25, 0.62);
  display: flex;
  inset: 48px 0 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 65;
}

.account-delete-panel.is-hidden {
  display: none;
}

.account-delete-dialog {
  position: relative;
}

.account-delete-form {
  background: rgba(28, 34, 47, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 24px;
}

.account-delete-form h2 {
  color: #ffb4b4;
  font-size: 20px;
  margin: 0;
}

.account-delete-form p {
  color: #c8d0e1;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.account-delete-close {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #dbe4ef;
  cursor: pointer;
  display: inline-flex;
  height: 26px;
  justify-content: center;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 26px;
  z-index: 1;
}

.account-delete-close::before,
.account-delete-close::after {
  background: currentColor;
  border-radius: 999px;
  content: "";
  height: 12px;
  position: absolute;
  width: 2px;
}

.account-delete-close::before {
  transform: rotate(45deg);
}

.account-delete-close::after {
  transform: rotate(-45deg);
}

.danger-check {
  align-items: center;
  display: flex;
  gap: 8px;
}

.danger-check input {
  height: auto;
  margin: 0;
  width: auto;
}

.version-dialog h1 {
  font-size: 24px;
  margin: 0;
}

.version-dialog p {
  color: #c8d0e1;
  line-height: 1.4;
  margin: 0;
}

.start-form label {
  color: #c8d0e1;
  font-size: 13px;
}

.start-form input,
.start-form select {
  background: rgba(12, 18, 28, 0.86);
  border: 1px solid rgba(132, 149, 178, 0.38);
  border-radius: 12px;
  color: #ffffff;
  font: inherit;
  height: 38px;
  padding: 0 10px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.start-form select {
  cursor: pointer;
}

.start-form input:focus,
.start-form select:focus {
  background: rgba(14, 21, 34, 0.96);
  border-color: rgba(126, 169, 255, 0.82);
  box-shadow: 0 0 0 4px rgba(63, 124, 255, 0.18);
}

.start-form input.is-locked {
  color: #c8d0e1;
  cursor: not-allowed;
  opacity: 0.82;
}

.start-form button,
.google-login-button {
  background: linear-gradient(180deg, #5b90ff, #346ff2);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(50, 108, 235, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #ffffff;
  cursor: pointer;
  display: grid;
  font: inherit;
  font-weight: 700;
  height: 40px;
  place-items: center;
  text-align: center;
  text-decoration: none;
  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.google-login-button {
  background: transparent;
  box-shadow: none;
  min-height: 40px;
}

.equipment-skin-slot {
  align-content: start;
  align-items: center;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: 56px 34px;
  min-height: 112px;
}

.skin-equipment-icon {
  align-items: center;
  background: rgba(4, 8, 15, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  height: 52px;
  justify-content: center;
  overflow: hidden;
  width: 52px;
}

.skin-equipment-icon img { height: 44px; object-fit: contain; width: 44px; }
.skin-equipment-icon.is-empty { color: #718096; font-size: 20px; }

.equipment-skin-slot .skin-slot-details {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
}

.equipment-skin-slot .skin-slot-details strong,
.equipment-skin-slot .skin-slot-details span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equipment-skin-slot .skin-layered-equipment-label {
  color: #d7e5ff;
  font-weight: 700;
}

.equipment-skin-slot .skin-base-equipment-label {
  color: #8794a8;
}

.equipment-skin-slot .skin-slot-actions {
  align-items: center;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: stretch;
}

.equipment-skin-slot .skin-delete-button {
  min-width: 0;
  width: 100%;
}

.google-login-button .google-login-retry-button {
  width: 272px;
}

.start-form button:hover,
.google-login-button:hover {
  filter: brightness(1.06);
  box-shadow: 0 14px 34px rgba(50, 108, 235, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.start-form button:active,
.google-login-button:active {
  transform: translateY(1px);
}

.start-form button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.5);
  opacity: 0.52;
}

.start-form .delete-account-button {
  background: linear-gradient(180deg, #d64545, #a92828);
  box-shadow: 0 12px 28px rgba(190, 48, 48, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.delete-account-status {
  min-height: 18px;
}

.google-login-button.is-hidden {
  display: none;
}

.google-login-button.is-disabled {
  cursor: not-allowed;
  filter: grayscale(0.5);
  opacity: 0.52;
  pointer-events: none;
}

.start-form #account-delete-link,
.start-form #account-delete-link:hover,
.start-form #account-delete-link:active,
.start-form #account-delete-link:disabled {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #ffb4b4;
  cursor: pointer;
  display: inline;
  filter: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  height: auto;
  justify-self: center;
  line-height: 1.4;
  opacity: 1;
  padding: 0;
  text-align: center;
  text-decoration: underline;
  transform: none;
}

.start-form #account-delete-link:hover {
  color: #ffd1d1;
}

.start-form #account-delete-link.is-hidden {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .key-settings {
    display: none;
  }

  html,
  body {
    height: 100dvh;
  }

  body {
    overscroll-behavior: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
  }

  .game-shell {
    grid-template-rows: 48px minmax(0, 1fr);
    height: 100dvh;
    overflow: hidden;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
  }

  .topbar {
    gap: 8px;
    min-width: 0;
    padding: 0 10px;
  }

  .topbar > div:first-child {
    align-items: baseline;
    display: flex;
    min-width: 0;
  }

  .topbar strong {
    flex: 0 0 auto;
  }

  #status {
    display: block;
    flex: 1 1 auto;
    margin-left: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-actions {
    flex: 0 0 auto;
    gap: 6px;
    min-width: 0;
  }

  .controls {
    display: none;
  }

  .fullscreen-button,
  .logout-button {
    border-radius: 10px;
    font-size: 12px;
    height: 30px;
    max-width: 92px;
    overflow: hidden;
    padding: 0 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #game {
    align-self: stretch;
    height: calc(100dvh - 48px);
    justify-self: stretch;
    max-height: calc(100dvh - 48px);
    max-width: 100vw;
    touch-action: none;
    user-select: none;
    width: 100vw;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
  }

  .chat-form input,
  .start-form input,
  .account-delete-form input,
  textarea,
  [contenteditable="true"] {
    user-select: text;
    -webkit-touch-callout: default;
    -webkit-user-select: text;
  }

  .gm-notice {
    border-radius: 12px;
    font-size: 12px;
    height: 30px;
    padding: 0 12px;
    top: 54px;
    width: calc(100vw - 24px);
  }

  .chat-panel {
    bottom: 118px;
    left: 12px;
    right: 12px;
    width: auto;
    z-index: 9;
  }

  .mobile-shortcuts {
    bottom: 66px;
    display: flex;
    gap: 7px;
    justify-content: flex-start;
    left: 10px;
    pointer-events: auto;
    position: absolute;
    right: auto;
    z-index: 7;
  }

  .item-shortcut-hud-slot {
    height: 52px;
    width: 52px;
  }

  .item-shortcut-hud-key {
    display: none;
  }

  .item-shortcut-summary {
    display: none;
  }

  .mobile-shortcuts button:active {
    background: rgba(51, 65, 85, 0.94);
    transform: translateY(1px) scale(0.97);
  }

  .chat-log {
    max-height: 101px;
  }

  .chat-message {
    font-size: 12px;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    padding: 6px 8px;
  }

  .chat-form input {
    font-size: 16px;
    height: 38px;
  }

  .menu-bar {
    bottom: 10px;
    gap: 4px;
    left: 8px;
    overflow-x: auto;
    padding: 6px;
    right: 8px;
    scrollbar-width: none;
  }

  .menu-bar::-webkit-scrollbar {
    display: none;
  }

  .menu-bar button {
    flex: 1 0 auto;
    font-size: 12px;
    height: 34px;
    min-width: max-content;
    padding: 0 9px;
    white-space: nowrap;
  }

  .start-panel,
  .version-panel,
  .inventory-panel,
  .notice-panel,
  .gift-panel,
  .settings-panel {
    inset: 48px 0 0;
  }

  .start-panel,
  .version-panel {
    align-items: flex-start;
    overflow: auto;
    padding: 16px 12px;
  }

  .start-form,
  .version-dialog {
    gap: 10px;
    max-height: calc(100dvh - 80px);
    min-width: 0;
    overflow: auto;
    padding: 18px;
    width: min(380px, calc(100vw - 24px));
  }

  .start-form h1,
  .version-dialog h1 {
    font-size: 22px;
  }

  .start-form input,
  .start-form button,
  .google-login-button {
    min-height: 40px;
  }

  .inventory-panel {
    align-items: stretch;
    inset: 112px 0 clamp(190px, 28dvh, 222px);
    justify-content: center;
    overflow: hidden;
    padding: 12px;
    touch-action: pan-y;
  }

  .inventory-window {
    align-self: stretch;
    border-radius: 14px;
    gap: 12px;
    grid-template-rows: auto auto minmax(0, 1fr);
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 16px 12px 12px;
    touch-action: pan-y;
    width: calc(100vw - 24px);
  }

  .inventory-header {
    align-items: flex-start;
    animation: none;
    gap: 10px;
    min-width: 0;
    opacity: 1;
    transform: none;
  }

  .inventory-header h2 {
    font-size: 18px;
  }

  .inventory-header > div {
    min-width: 0;
  }

  #inventory-summary {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .inventory-close-button {
    flex: 0 0 auto;
    margin-right: 0;
    margin-top: 0;
  }

  .inventory-header-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  .inventory-sort-button {
    padding: 6px 9px;
  }

  .inventory-grid {
    animation: none;
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: none;
    min-height: 0;
    opacity: 1;
    overscroll-behavior: contain;
    overflow: auto;
    padding: 14px 14px 112px;
    transform: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .inventory-grid.is-opening {
    overflow: auto;
  }

  .inventory-slot {
    animation: none;
    border-radius: 9px;
    cursor: default;
    flex: 0 0 calc((100% - 18px) / 4);
    width: calc((100% - 18px) / 4);
    opacity: 1;
    padding: 3px;
    touch-action: pan-y;
    transform: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .inventory-slot.has-item,
  .inventory-slot.has-item:active {
    cursor: pointer;
  }

  .inventory-slot:hover,
  .inventory-slot.has-item:hover,
  .inventory-slot.has-item:active {
    transform: none;
  }

  .inventory-grid.is-opening .inventory-slot,
  .inventory-grid.is-opening .inventory-item-icon,
  .inventory-grid.is-opening .inventory-item-count {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .inventory-item-icon,
  .inventory-item-count {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .item-tooltip {
    bottom: 12px;
    gap: 10px;
    grid-template-columns: 58px minmax(0, 1fr);
    left: 12px;
    max-width: none;
    min-height: 86px;
    padding: 12px;
    right: 12px;
    top: auto;
    transform: none;
    width: auto;
    z-index: 40;
  }

  .item-tooltip.is-hidden {
    display: none;
  }

  .item-tooltip-icon {
    border-radius: 12px;
    height: 54px;
    width: 54px;
  }

  .item-tooltip-name {
    font-size: 15px;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }

  .item-tooltip-description {
    font-size: 12px;
    line-height: 1.4;
  }

  .notice-panel,
  .gift-panel,
  .settings-panel {
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
  }

  .notice-window,
  .gift-window,
  .settings-window {
    border-radius: 14px;
    max-height: calc(100dvh - 72px);
    overflow: hidden;
    padding: 14px;
    width: calc(100vw - 24px);
  }

  .notice-list,
  .gift-list {
    max-height: calc(100dvh - 196px);
    min-height: 0;
  }

  .gift-header h2 {
    font-size: 18px;
  }

  .account-delete-panel {
    align-items: flex-start;
    inset: 48px 0 0;
    overflow: auto;
    padding: 12px;
  }

  .account-delete-dialog,
  .account-delete-form {
    width: 100%;
  }

  .account-delete-form {
    max-height: calc(100dvh - 72px);
    max-width: none;
    overflow: auto;
    padding: 18px;
  }
}

.player-context-menu { position: fixed; z-index: 110; width: 170px; padding: 8px; border: 1px solid #7183a0; border-radius: 10px; background: #172033; box-shadow: 0 12px 32px #0009; color: #fff; }
.player-context-name { padding: 6px 8px; font-weight: 700; border-bottom: 1px solid #ffffff20; }
.player-context-menu button { width: 100%; margin-top: 6px; padding: 9px; border: 0; border-radius: 7px; background: #4478d8; color: #fff; cursor: pointer; }

.item-context-menu {
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(165, 180, 252, 0.45);
  border-radius: 11px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.58);
  color: #f8fafc;
  padding: 8px;
  position: fixed;
  width: 180px;
  z-index: 130;
}
.item-context-name {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  padding: 7px 8px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-context-menu button {
  background: #4f46e5;
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font: 700 13px var(--ui-font-family);
  margin-top: 7px;
  padding: 9px;
  width: 100%;
}
.item-context-menu button:hover { background: #6366f1; }

.party-request-toast { position: fixed; z-index: 125; right: 20px; top: 82px; width: min(360px, calc(100vw - 40px)); box-sizing: border-box; padding: 14px; border: 1px solid #6d8fc8; border-radius: 12px; background: #172033; color: #fff; box-shadow: 0 14px 38px #0009; }
.party-panel { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; background: #050a12b8; }
.party-dialog { width: min(480px, 100%); box-sizing: border-box; padding: 20px; border: 1px solid #6d8fc8; border-radius: 16px; background: #151d29; color: #e8edf5; box-shadow: 0 20px 60px #000a; }
.party-dialog header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid #344052; }
.party-dialog header small { color: #6fa0e8; font-size: 10px; letter-spacing: .14em; }
.party-dialog h2 { margin: 3px 0 0; }
.party-dialog header button { border: 0; background: transparent; color: #dce3ed; font-size: 24px; cursor: pointer; }
.party-member-list { display: grid; gap: 8px; margin: 16px 0; }
.party-member { display: flex; justify-content: space-between; padding: 11px 13px; border: 1px solid #344052; border-radius: 9px; background: #101721; }
.party-member strong::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: #6fa0e8; }
.party-member.is-leader strong::before { background: #f0bd55; box-shadow: 0 0 8px #f0bd55; }
.party-status { min-height: 1.4em; color: #9fb5d3; font-size: 13px; }
.party-actions { display: flex; justify-content: flex-end; gap: 9px; }
.party-actions button { padding: 9px 14px; border: 1px solid #465267; border-radius: 8px; background: #222c3b; color: #dce3ed; cursor: pointer; }
.party-actions #party-disband-button { border-color: #a84949; background: #742f35; }
.friend-request-toast { position: fixed; z-index: 126; right: 20px; top: 82px; width: min(380px, calc(100vw - 40px)); box-sizing: border-box; padding: 14px; border: 1px solid #6d8fc8; border-radius: 12px; background: #172033; color: #fff; box-shadow: 0 14px 38px #0009; }
.friend-panel { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; background: #050a12b8; }
.friend-dialog { width: min(620px, 100%); max-height: min(720px, calc(100dvh - 40px)); box-sizing: border-box; overflow: auto; padding: 20px; border: 1px solid #6d8fc8; border-radius: 16px; background: #151d29; color: #e8edf5; box-shadow: 0 20px 60px #000a; }
.friend-dialog header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid #344052; }
.friend-dialog header small { color: #6fa0e8; font-size: 10px; letter-spacing: .14em; }
.friend-dialog h2 { margin: 3px 0 0; }
.friend-dialog header button { border: 0; background: transparent; color: #dce3ed; font-size: 24px; cursor: pointer; }
.friend-list, .friend-request-list { display: grid; gap: 8px; margin: 16px 0; }
.friend-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #344052; border-radius: 9px; background: #101721; }
.friend-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row span { display: block; margin-top: 3px; color: #7f8ca0; font-size: 12px; }
.friend-row strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: #596579; }
.friend-row.is-online strong::before { background: #55d58b; box-shadow: 0 0 8px #55d58b88; }
.friend-row.is-online span { color: #70d99a; }
.friend-location { color: #b9c5d5; font-size: 13px; text-align: right; white-space: nowrap; }
.friend-request-section { margin-top: 16px; padding: 12px; border: 1px solid #485a73; border-radius: 10px; background: #111b28; }
.friend-request-section h3 { margin: 0; font-size: 14px; }
.friend-request-list { margin-bottom: 0; }
.friend-request-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.friend-request-row > div { display: flex; gap: 7px; }
.friend-request-row button { padding: 7px 11px; border: 1px solid #465267; border-radius: 7px; background: #222c3b; color: #dce3ed; cursor: pointer; }
.friend-request-row button:last-child { border-color: #426fa8; background: #294f7d; color: #fff; }
.friend-status { min-height: 1.4em; color: #9fb5d3; font-size: 13px; }
@media (max-width: 560px) {
  .friend-panel { padding: 8px; }
  .friend-dialog { max-height: calc(100dvh - 16px); padding: 14px; }
  .friend-row { grid-template-columns: 1fr; gap: 7px; }
  .friend-location { text-align: left; }
  .friend-request-toast { left: 8px; right: 8px; width: auto; }
}
.profile-panel { position: fixed; z-index: 115; inset: 0; display: grid; place-items: center; padding: 24px; background: transparent; }
.profile-window { position: relative; display: grid; grid-template-columns: 260px minmax(250px, 340px); align-items: center; width: min(650px, 94vw); padding: 28px; border: 1px solid #8ba1c080; border-radius: 18px; background: rgba(16, 23, 34, .58); color: #f3f7ff; box-shadow: 0 18px 48px #0007; backdrop-filter: blur(5px); }
.profile-close-button { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; color: #c9d6e8; font-size: 28px; cursor: pointer; }
.profile-character { display: grid; place-items: center; min-height: 250px; border-radius: 14px; background: radial-gradient(circle, #3149684d 0, #17233726 62%, transparent 63%); }
.profile-character canvas { width: 220px; height: 230px; }
.profile-details { padding: 10px 6px 10px 30px; }
.profile-eyebrow { color: #8eabd2; font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.profile-details h2 { margin: 5px 0 20px; overflow-wrap: anywhere; font-size: 30px; }
.profile-level, .profile-skin, .profile-enhancement-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #ffffff18; color: #9fb0c8; }
.profile-level strong, .profile-skin strong, .profile-enhancement-total strong { color: #fff; font-size: 18px; }
.profile-enhancement-values { display: grid; justify-items: end; gap: 2px; min-width: 0; margin-left: 12px; }
.profile-enhancement-values small { color: #b9c9df; font-size: 11px; text-align: right; white-space: pre-line; overflow-wrap: anywhere; }
.profile-equipment { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.profile-equipment-slot { min-width: 0; padding: 5px 3px 4px; border: 1px solid #ffffff1f; border-radius: 9px; background: #0a122080; color: #aebed4; cursor: pointer; }
.profile-equipment-slot.has-item:hover, .profile-equipment-slot.has-item:focus-visible { border-color: #8fb4ff; background: #243a5a; outline: none; }
.profile-equipment-slot.is-empty { cursor: default; opacity: .48; }
.profile-equipment-icon { display: block; width: 34px; height: 34px; margin: 0 auto 2px; background-position: center; background-repeat: no-repeat; background-size: contain; color: #76859a; font-size: 22px; line-height: 34px; }
.profile-equipment-slot small { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-item-tooltip { position: absolute; z-index: 120; }
.profile-likes { display: flex; align-items: baseline; gap: 7px; margin: 22px 0 12px; color: #ff6d91; }
.profile-likes strong { font-size: 30px; }.profile-likes small { color: #c8d1df; }
.profile-like-button { width: 100%; padding: 12px; border: 0; border-radius: 9px; background: #e94f78; color: #fff; font-weight: 700; cursor: pointer; }
.profile-like-button:disabled { background: #4c586b; color: #c6ced9; cursor: default; }
.profile-like-note { min-height: 18px; margin: 8px 0 0; color: #9cacc1; font-size: 12px; text-align: center; }
.trade-request-toast { position: fixed; z-index: 105; top: 72px; right: 22px; width: 330px; padding: 16px; border: 1px solid #8fb4ff; border-radius: 12px; background: #17233cf2; color: #fff; box-shadow: 0 12px 36px #0008; }
.trade-request-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.trade-request-actions button, .trade-footer button, .trade-chat-form button { padding: 8px 14px; border: 0; border-radius: 7px; cursor: pointer; }
.trade-request-actions button:last-child, #trade-confirm-button { background: #4f80e8; color: #fff; }
.trade-panel { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 30px; background: #08101dcc; }
.trade-window { width: min(980px, 96vw); max-height: 94vh; overflow: auto; padding: 18px; border: 1px solid #7894bd; border-radius: 16px; background: linear-gradient(145deg, #1b2840, #111827); color: #eef5ff; box-shadow: 0 24px 70px #000b; }
.trade-header { position: relative; display: grid; grid-template-columns: 1fr 76px 1fr; align-items: end; gap: 12px; padding: 4px 54px 14px; border-bottom: 1px solid #ffffff22; }
.trade-character-card { display: flex; flex-direction: column; align-items: center; min-width: 0; }.trade-character-card strong { width: 100%; overflow: hidden; color: #fff; font-size: 16px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }.trade-character-card canvas { display: block; width: 180px; max-width: 100%; height: 190px; image-rendering: auto; }.trade-facing-label { align-self: center; display: flex; flex-direction: column; align-items: center; color: #8da5ca; }.trade-facing-label small { font-size: 10px; letter-spacing: .14em; white-space: nowrap; }.trade-facing-label span { color: #d8e7ff; font-size: 34px; line-height: 1.2; }
.trade-close-button { position: absolute; top: 0; right: 0; border: 0; background: transparent; color: #fff; font-size: 28px; cursor: pointer; }
.trade-body { display: grid; grid-template-columns: 1fr 260px; gap: 18px; margin: 16px 0; }.trade-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.trade-body h3 { margin: 0 0 9px; font-size: 14px; }.trade-body h3 span { color: #79e49d; }
.trade-grid { display: grid; grid-template-columns: repeat(3, 72px); gap: 8px; }.trade-slot { position: relative; aspect-ratio: 1; border: 1px solid #62718a; border-radius: 9px; background: #0b1220aa; }.trade-slot.has-item { cursor: pointer; }.trade-slot img { width: 100%; height: 100%; object-fit: contain; }.trade-slot span { position: absolute; right: 4px; bottom: 2px; padding: 1px 4px; border-radius: 5px; background: #000b; color: #fff; }
.trade-item-tooltip { z-index: 110; }
.trade-inventory { min-width: 0; }.trade-inventory > div { max-height: 240px; overflow: auto; }.trade-inventory-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 7px; width: 100%; padding: 5px; border: 0; border-bottom: 1px solid #ffffff15; background: transparent; color: #fff; text-align: left; cursor: pointer; }.trade-inventory-item:hover { background: #ffffff10; }.trade-inventory-item img { width: 34px; height: 34px; object-fit: contain; }
.trade-chat-log { height: 105px; overflow: auto; padding: 9px; border-radius: 8px; background: #080d16aa; font-size: 13px; }.trade-chat-log .is-mine { color: #8fb4ff; }.trade-chat-form { display: flex; gap: 8px; margin-top: 8px; }.trade-chat-form input { flex: 1; padding: 9px; border: 1px solid #526681; border-radius: 7px; background: #0c1422; color: #fff; }.trade-footer { display: flex; align-items: center; gap: 8px; margin-top: 12px; }.trade-footer span { flex: 1; color: #b8c4d6; font-size: 13px; }
.trade-quantity-panel { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; padding: 16px; border-radius: 16px; background: #050a12c7; }.trade-window { position: relative; }.trade-quantity-dialog { width: min(360px, 100%); padding: 20px; border: 1px solid #7894bd; border-radius: 13px; background: #18253a; box-shadow: 0 18px 50px #000b; }.trade-quantity-dialog h3 { margin: 0 0 8px; }.trade-quantity-dialog p { margin: 0 0 14px; color: #b9c8dc; font-size: 13px; }.trade-quantity-dialog input { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #657c9d; border-radius: 8px; background: #0c1422; color: #fff; font-size: 18px; }.trade-quantity-dialog div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }.trade-quantity-dialog button { padding: 8px 15px; border: 0; border-radius: 7px; cursor: pointer; }.trade-quantity-dialog button[type="submit"] { background: #4f80e8; color: #fff; }
.is-hidden { display: none !important; }
@media (max-width: 720px) {
  .profile-panel { padding: 8px; }
  .profile-window { grid-template-columns: 1fr; max-height: calc(100dvh - 16px); overflow: auto; padding: 18px; }
  .profile-character { min-height: 180px; }.profile-character canvas { width: 170px; height: auto; }
  .profile-details { padding: 8px 4px 0; }.profile-details h2 { margin-bottom: 8px; font-size: 24px; }
  .profile-likes { margin-top: 12px; }
  .trade-panel { align-items: stretch; padding: 4px; }
  .trade-window { width: 100%; max-width: none; max-height: calc(100dvh - 8px); padding: 10px; border-radius: 11px; }
  .trade-header { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 2px; padding: 2px 24px 8px; }
  .trade-character-card canvas { width: min(108px, 100%); height: auto; aspect-ratio: 180 / 190; }
  .trade-character-card strong { font-size: 13px; }
  .trade-facing-label small { display: none; }
  .trade-facing-label span { font-size: 23px; }
  .trade-body { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 12px 0; }
  .trade-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .trade-offers section { min-width: 0; }
  .trade-body h3 { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .trade-grid { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .trade-slot { min-width: 0; border-radius: 6px; }
  .trade-inventory > div { max-height: 150px; }
  .trade-chat-form input { min-width: 0; }
  .trade-chat-form button { padding-inline: 10px; }
  .trade-footer { display: grid; grid-template-columns: 1fr 1fr; }
  .trade-footer span { grid-column: 1 / -1; min-width: 0; }
  .trade-footer button { width: 100%; padding-inline: 6px; }
  .trade-quantity-panel { padding: 8px; }
  .trade-quantity-dialog { padding: 15px; }
  .trade-request-toast { left: 8px; right: 8px; width: auto; }
}

/* Flat trade UI */
.trade-panel { background: rgba(7, 11, 18, 0.78); }
.trade-window { border: 1px solid #3b4759; border-radius: 12px; background: #151d29; box-shadow: none; }
.trade-header { border-bottom: 1px solid #344052; }
.trade-character-card strong { color: #e8edf5; font-weight: 600; }
.trade-facing-label { color: #7f8ca0; }
.trade-facing-label span { color: #aeb9c9; }
.trade-close-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #344052; border-radius: 8px; background: #1b2432; color: #b9c3d1; font-size: 22px; }
.trade-close-button:hover { background: #273243; color: #fff; }
.trade-body h3 { color: #aeb8c7; font-weight: 600; }
.trade-grid { width: fit-content; padding: 5px; border-radius: 10px; background: #344052; gap: 5px; }
.trade-slot { border: 0; border-radius: 7px; background: #101721; overflow: hidden; }
.trade-slot.has-item:hover { background: #1c2736; }
.trade-slot span { right: 3px; bottom: 3px; padding: 1px 3px; border-radius: 5px; background: #111923; color: #e8edf5; }
.trade-inventory { border-left: 1px solid #344052; padding-left: 14px; }
.shop-panel { position: fixed; z-index: 32; inset: 0; display: grid; place-items: center; padding: 18px; background: #07111dcc; backdrop-filter: blur(5px); }
.shop-panel.is-hidden { display: none; }
.shop-dialog { position: relative; width: min(680px, 100%); max-height: calc(100dvh - 36px); overflow: auto; border: 2px solid #d6a75b; border-radius: 22px; background: linear-gradient(155deg, #fff8df, #f3dcae); color: #49331f; box-shadow: 0 24px 70px #0009, inset 0 0 0 4px #fff8; }
.shop-header { position: relative; padding: 18px 54px 12px 18px; border-bottom: 2px dashed #c99b55; }
.shop-greeting { display: flex; align-items: center; gap: 12px; }
.shop-greeting canvas { width: 150px; height: 150px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle, #fff 0 45%, #f7cc7c 46% 70%, transparent 71%); }
.shop-greeting small { color: #a66a22; font-weight: 800; letter-spacing: .18em; }
.shop-greeting h2 { margin: 3px 0 5px; font-size: 26px; }
.shop-greeting p { margin: 0; line-height: 1.55; }
.shop-close-button { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #8d5d2d; color: #fff; font-size: 24px; cursor: pointer; }
.shop-list { display: grid; gap: 8px; padding: 16px 18px; }
.shop-item { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border: 1px solid #c99b55; border-radius: 13px; background: #fffaf0; color: inherit; text-align: left; cursor: pointer; }
.shop-item:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 4px 12px #9b672533; }
.shop-item img { width: 46px; height: 46px; object-fit: contain; }
.shop-item strong, .shop-item span { display: block; }
.shop-item span { margin-top: 3px; color: #80613f; font-size: 12px; }
.shop-item b { color: #a45c13; white-space: nowrap; }
.shop-empty, .shop-status { margin: 0; padding: 10px 18px 18px; text-align: center; }
.shop-status { min-height: 1.5em; color: #8b4f16; }
.shop-quantity-panel { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; padding: 16px; border-radius: 22px; background: #3b2818b8; }
.shop-quantity-panel.is-hidden { display: none; }
.shop-quantity-dialog { width: min(360px, 100%); padding: 20px; border-radius: 16px; background: #fff8df; box-shadow: 0 15px 45px #0008; }
.shop-quantity-dialog h3, .shop-quantity-dialog p { margin: 0 0 10px; }
.shop-quantity-dialog input { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #b88948; border-radius: 9px; font-size: 18px; }
.shop-quantity-dialog div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.shop-quantity-dialog button { padding: 8px 16px; border: 0; border-radius: 9px; cursor: pointer; }
.shop-quantity-dialog button[type="submit"] { background: #b56c1f; color: #fff; }
@media (max-width: 560px) { .shop-greeting canvas { width: 100px; height: 110px; } .shop-greeting h2 { font-size: 21px; } .shop-item { grid-template-columns: 40px 1fr; } .shop-item b { grid-column: 2; } }

.chinchiro-panel { position: fixed; z-index: 126; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(37, 29, 48, .7); backdrop-filter: blur(4px); }
.chinchiro-panel.is-hidden { display: none; }
.chinchiro-window { position: relative; box-sizing: border-box; width: min(700px, 100%); max-height: calc(100dvh - 44px); overflow: hidden auto; border: 5px solid #ded8eb; border-radius: 28px; background: linear-gradient(155deg, #4d435b, #322b40); color: #fff; box-shadow: 0 13px 0 #211c2c, 0 30px 75px #17121fc7, inset 0 0 0 3px #70647c; }
.chinchiro-lights { position: absolute; z-index: 2; top: 13px; right: 72px; display: flex; gap: 10px; pointer-events: none; }
.chinchiro-lights i { width: 13px; height: 13px; border: 3px solid #4c4658; border-radius: 50%; background: #ff5caa; box-shadow: 0 2px 0 #272131; }
.chinchiro-lights i:nth-child(4n + 2) { background: #72e9c5; }
.chinchiro-lights i:nth-child(4n + 3) { background: #73a8ee; }
.chinchiro-lights i:nth-child(4n + 4) { background: #ffdf43; }
.chinchiro-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 31px 26px 18px; border-bottom: 3px solid #6e6479; background: linear-gradient(110deg, #51475f, #40364e); }
.chinchiro-brand { display: flex; align-items: center; gap: 14px; }
.chinchiro-mascot { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 auto; border: 4px solid #ece8f5; border-radius: 19px; background: #252433; box-shadow: 0 5px 0 #272231; font-size: 33px; transform: rotate(-4deg); }
.chinchiro-header small { display: inline-block; padding: 4px 12px; border: 3px solid #e9e5f2; border-radius: 999px; background: #24232e; color: #75e8c4; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.chinchiro-header h2 { display: flex; gap: 2px; margin: 5px 0 2px; font-size: 30px; line-height: 1; letter-spacing: .06em; text-shadow: 0 3px 0 #26212e; }
.chinchiro-header h2 span:nth-child(1) { color: #73a8ee; }
.chinchiro-header h2 span:nth-child(2) { color: #76edc7; }
.chinchiro-header h2 span:nth-child(3) { color: #ff61ab; }
.chinchiro-header h2 span:nth-child(4) { color: #ffdf45; }
.chinchiro-header p { margin: 0; color: #d8d2df; font-size: 13px; font-weight: 700; }
.chinchiro-header button { position: relative; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border: 3px solid #777083; border-radius: 50%; background: #302b3a; color: #ece8f4; box-shadow: 0 3px 0 #201c27; font-size: 23px; cursor: pointer; }
.chinchiro-header button:hover { background: #ff5caa; color: #fff; }
.chinchiro-table { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; margin: 22px 24px 18px; padding: 22px 18px 24px; border: 4px solid #85808c; border-radius: 24px; background: linear-gradient(165deg, #677477, #4d5d61); box-shadow: 0 7px 0 #272331, inset 0 0 0 4px #99a2a344; }
.chinchiro-hand { min-width: 0; text-align: center; }
.chinchiro-hand h3 { display: inline-block; margin: 0 0 14px; padding: 5px 12px; border: 3px solid #d7d4df; border-radius: 999px; background: #3a3545; color: #f4f0f8; box-shadow: 0 3px 0 #302a39; font-size: 13px; }
.chinchiro-hand.is-player h3 { background: #446c72; }
.chinchiro-hand strong { display: block; min-height: 1.4em; margin-top: 13px; color: #ffeb79; font-size: 17px; text-shadow: 0 2px 0 #3c3543; }
.chinchiro-dice { display: flex; justify-content: center; gap: 8px; }
.chinchiro-die { display: grid; place-items: center; width: 54px; height: 54px; border: 4px solid #ddd9e4; border-radius: 16px; background: #fff; color: #393340; box-shadow: 0 7px 0 #aaa5b1, 0 10px 13px #30293880; font-family: "Segoe UI Symbol", sans-serif; font-size: 40px; line-height: 1; transform: rotate(-2deg); }
.chinchiro-die:nth-child(2) { transform: translateY(-3px) rotate(2deg); }
.chinchiro-die:nth-child(3) { transform: rotate(3deg); }
.chinchiro-versus { display: grid; place-items: center; width: 48px; height: 48px; border: 4px solid #e7e1ef; border-radius: 50%; background: #ff5ca9; color: #fff; box-shadow: 0 5px 0 #9c3b70; font-size: 14px; font-weight: 900; text-align: center; transform: rotate(-5deg); }
.chinchiro-result { box-sizing: border-box; width: fit-content; min-width: 270px; min-height: 1.5em; margin: 0 auto 17px; padding: 10px 22px; border: 3px solid #e2ddea; border-radius: 18px; background: #272431; color: #f6f2fa; box-shadow: 0 5px 0 #211d29; font-size: 21px; font-weight: 900; text-align: center; }
.chinchiro-result[data-result="win"] { border-color: #ffdf45; color: #ffdf45; text-shadow: 0 0 12px #ffca4d66; }
.chinchiro-result[data-result="lose"] { border-color: #83aef0; color: #a9c9f7; }
.chinchiro-wager-form { display: grid; grid-template-columns: auto minmax(150px, 220px); align-items: end; justify-content: center; gap: 10px 16px; padding: 0 22px; }
.chinchiro-wallet { align-self: stretch; display: grid; align-content: center; padding: 8px 14px; border: 3px solid #777080; border-radius: 16px; background: #292532; color: #cfc8d8; font-size: 11px; }
.chinchiro-wallet strong { display: block; margin-top: 2px; color: #ffdf45; font-size: 17px; }
.chinchiro-wallet b { font-size: 21px; }
.chinchiro-wager-field span { display: block; margin: 0 0 5px 5px; color: #e2dce9; font-size: 12px; font-weight: 800; }
.chinchiro-wager-field input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 8px 13px; border: 4px solid #ded8e8; border-radius: 15px; outline: 0; background: #fff; color: #37303f; box-shadow: 0 5px 0 #9f99a8; font-size: 20px; font-weight: 900; text-align: right; }
.chinchiro-wager-field input:focus { border-color: #72e9c5; }
.chinchiro-wager-shortcuts { grid-column: 1 / -1; display: flex; justify-content: center; gap: 7px; }
.chinchiro-wager-shortcuts button { min-width: 62px; padding: 6px 9px; border: 3px solid #777080; border-radius: 12px; background: #40394b; color: #f4eff8; font-weight: 800; cursor: pointer; }
.chinchiro-wager-shortcuts button:hover { border-color: #72e9c5; background: #4b5660; }
.chinchiro-wager-shortcuts button:disabled { opacity: .45; cursor: default; }
.chinchiro-wager-form .chinchiro-result, .chinchiro-wager-form .chinchiro-roll-button { grid-column: 1 / -1; }
.chinchiro-wager-form .chinchiro-result { margin-top: 3px; }
.chinchiro-roll-button { display: block; min-width: 230px; margin: 0 auto; padding: 12px 26px; border: 4px solid #eee9f5; border-radius: 18px; background: #3996a1; color: #fff; box-shadow: 0 7px 0 #22616a, 0 11px 18px #211c2c66; font-size: 17px; font-weight: 900; cursor: pointer; }
.chinchiro-roll-button:hover { background: #ff5ca9; box-shadow: 0 7px 0 #9c3b70, 0 11px 18px #211c2c66; transform: translateY(-1px) rotate(-1deg); }
.chinchiro-roll-button:active { box-shadow: 0 3px 0 #22616a, 0 6px 10px #211c2c66; transform: translateY(4px); }
.chinchiro-roll-button:disabled { filter: grayscale(.35); opacity: .6; cursor: wait; transform: none; }
.chinchiro-panel.is-rolling .chinchiro-die { animation: chinchiro-dice-tumble .18s steps(2, end) infinite alternate; }
.chinchiro-panel.is-rolling .chinchiro-die:nth-child(2) { animation-delay: -.06s; }
.chinchiro-panel.is-rolling .chinchiro-die:nth-child(3) { animation-delay: -.12s; }
@keyframes chinchiro-dice-tumble {
  from { transform: translateY(-5px) rotate(-10deg) scale(.96); }
  to { transform: translateY(5px) rotate(10deg) scale(1.04); }
}
.chinchiro-rules { margin: 20px 22px 21px; color: #d5cfdd; font-size: 12px; text-align: center; }
.chinchiro-rules summary { width: fit-content; margin: auto; padding: 4px 11px; border-radius: 999px; background: #40394b; cursor: pointer; }
.chinchiro-rules p { margin: 8px 0 0; }
.a-slot-panel { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 8px; background: rgba(0, 0, 0, .5); pointer-events: none; }
.a-slot-panel.is-hidden { display: none; }
.a-slot-window { position: relative; box-sizing: border-box; width: min(620px, calc((100dvh - 16px) * .8182), calc(100vw - 16px)); aspect-ratio: 9 / 11; overflow: hidden; color: #fff; pointer-events: auto; }
.a-slot-cabinet-art, .a-slot-chance-art { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.a-slot-chance-art:not([hidden]) { animation: a-slot-chance-pulse .75s ease-in-out infinite alternate; }
.a-slot-close-button, .a-slot-statusbar, .a-slot-machine, .a-slot-controls { position: absolute; z-index: 1; }
.a-slot-close-button { top: 12%; right: 11%; width: 6%; aspect-ratio: 1; padding: 0; border: 0; background: transparent; color: #3b3337; font-size: clamp(20px, 4vw, 30px); font-weight: 900; cursor: pointer; }
.a-slot-close-button.is-mdp-bound { color: transparent; }
.a-slot-statusbar { top: 32.5%; left: 17%; display: grid; width: 66%; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 2px 2%; color: #3f383c; font-size: clamp(7px, 1.3vw, 11px); font-weight: 800; text-align: center; white-space: nowrap; }
.a-slot-statusbar b { color: #9b2945; font-size: 1.15em; }
.a-slot-bonus-state { color: #9b2945; font-weight: 1000; }
.a-slot-bonus-state.is-hidden { display: none; }
.a-slot-machine { top: 35.8%; left: 23.9%; width: 54%; height: 35.3%; }
.a-slot-lamp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.a-slot-reels { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; overflow: hidden; }
.a-slot-reel { position: relative; display: grid; grid-template-rows: repeat(3, 1fr); min-width: 0; overflow: hidden; }
.a-slot-symbol { position: relative; display: grid; place-items: center; overflow: hidden; color: #842039; font-size: clamp(20px, 4vw, 34px); font-weight: 1000; line-height: 1; }
.a-slot-symbol canvas { position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-width: 140%; max-height: 140%; transform: translate(-50%, -50%); }
.a-slot-symbol.has-art span { visibility: hidden; }
.a-slot-reel-strip { position: absolute; top: 0; right: 0; left: 0; display: flex; height: calc(var(--a-slot-cell-count, 12) * 33.333333%); flex-direction: column; will-change: transform; }
.a-slot-reel-strip .a-slot-symbol { flex: 0 0 calc(100% / var(--a-slot-cell-count, 12)); }
.a-slot-reel.is-spinning .a-slot-reel-strip { animation: a-slot-reel-spin var(--a-slot-reel-duration, 1500ms) linear var(--a-slot-reel-delay, 0ms) infinite; }
.a-slot-reel.is-spinning .a-slot-symbol { filter: blur(.65px); }
.a-slot-reel-slip-strip { transform: translateY(0); }
.a-slot-controls { inset: 0; pointer-events: none; }
.a-slot-controls button { position: absolute; border: 0; background: transparent; color: #41383c; font-weight: 900; cursor: pointer; pointer-events: auto; }
.a-slot-window button { transform-origin: center 72%; transition: transform 90ms cubic-bezier(.22, 1.55, .58, 1); }
.a-slot-window .a-slot-button-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.a-slot-window button:not(:disabled):active,
.a-slot-window button.is-key-pressed { transform: translateY(3px) scaleX(1.08) scaleY(.86); transition-duration: 55ms; }
.a-slot-controls button:focus-visible { outline: 3px solid #9b2945; outline-offset: 2px; }
.a-slot-controls button:disabled { cursor: default; pointer-events: none; }
.a-slot-bets, .a-slot-stops { display: contents; }
.a-slot-bets button { z-index: 3; top: 76%; width: 16%; height: 5%; }
.a-slot-bets button:nth-child(1), .a-slot-stops button:nth-child(1) { left: 21%; }
.a-slot-bets button:nth-child(2), .a-slot-stops button:nth-child(2) { left: 42%; }
.a-slot-bets button:nth-child(3), .a-slot-stops button:nth-child(3) { left: 63%; }
.a-slot-bets button[data-slot-bet="3"] { left: 63%; }
.a-slot-bets button { font-size: clamp(9px, 1.8vw, 13px); }
.a-slot-bets button.is-active { color: #9b2945; }
.a-slot-lever, .a-slot-insert, .a-slot-settle { z-index: 4; }
.a-slot-lever { position: absolute; top: 82%; left: 40%; width: 20%; height: 7%; font-size: clamp(12px, 2.5vw, 18px); }
.a-slot-insert { top: 82%; left: 20%; width: 16%; height: 5%; font-size: clamp(8px, 1.6vw, 12px); }
.a-slot-settle { top: 82%; left: 64%; width: 16%; height: 5%; font-size: clamp(8px, 1.6vw, 12px); }
.a-slot-stops button { z-index: 5; top: 87%; width: 16%; height: 4%; }
.a-slot-stops button { font-size: clamp(8px, 1.7vw, 12px); }
.a-slot-notice { position: absolute; z-index: 6; top: 70%; left: 15%; box-sizing: border-box; width: 70%; margin: 0; padding: 7px 10px; border-radius: 8px; background: rgba(45, 34, 39, .92); color: #fff4d3; font-size: clamp(10px, 2vw, 14px); font-weight: 900; text-align: center; pointer-events: none; }
.a-slot-notice[hidden] { display: none; }
.a-slot-controls button.is-mdp-bound { color: transparent; }
@keyframes a-slot-reel-spin {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}
@keyframes a-slot-chance-pulse {
  from { filter: brightness(.9); }
  to { filter: brightness(1.22) drop-shadow(0 0 8px #55c8ff); }
}
@media (prefers-reduced-motion: reduce) {
  .a-slot-window button { transition: none; }
}
@media (max-width: 600px) {
  .chinchiro-panel { padding: 12px; }
  .chinchiro-window { max-height: calc(100dvh - 24px); border-width: 4px; border-radius: 23px; }
  .chinchiro-lights { top: 10px; right: 58px; gap: 5px; }
  .chinchiro-lights i { width: 8px; height: 8px; border-width: 2px; }
  .chinchiro-table { grid-template-columns: 1fr; margin: 13px 14px 16px; padding: 16px; border-radius: 20px; }
  .chinchiro-versus { width: 40px; height: 40px; margin: 1px auto 6px; border-width: 3px; }
  .chinchiro-die { width: 44px; height: 44px; border-width: 3px; border-radius: 13px; font-size: 34px; }
  .chinchiro-header { padding: 27px 16px 15px; }
  .chinchiro-brand { gap: 9px; }
  .chinchiro-mascot { width: 46px; height: 46px; border-width: 3px; border-radius: 15px; font-size: 27px; }
  .chinchiro-header h2 { font-size: 25px; }
  .chinchiro-header p { max-width: 220px; font-size: 11px; }
  .chinchiro-header button { width: 34px; height: 34px; border-width: 2px; }
  .chinchiro-result { min-width: 240px; font-size: 18px; }
  .chinchiro-wager-form { grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 14px; }
  .chinchiro-wager-shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .chinchiro-wager-shortcuts button { min-width: 0; padding: 6px 4px; font-size: 11px; }
  .a-slot-panel { padding: 4px; }
  .a-slot-window { width: min(calc((100dvh - 8px) * .8182), calc(100vw - 8px)); }
}

.market-panel { position: fixed; z-index: 125; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5, 9, 16, .84); }
.market-panel.is-hidden { display: none; }
.market-window { width: min(1120px, 96vw); height: 80vh; max-height: 80vh; overflow: auto; border: 1px solid #4e6079; border-radius: 14px; background: #111923; color: #e8edf5; box-shadow: 0 26px 80px #000c; }
.market-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 22px; border-bottom: 1px solid #303d50; background: linear-gradient(110deg, #1b2b3e, #17202d); }
.market-header small { color: #77a6df; font-size: 10px; letter-spacing: .16em; }
.market-header h2, .market-header p { margin: 3px 0 0; }
.market-header p { color: #9ba9bb; font-size: 12px; }
.market-header > button { align-self: flex-start; border: 0; background: transparent; color: #aeb9c8; font-size: 26px; cursor: pointer; }
.market-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 15px 20px; border-bottom: 1px solid #2b3747; background: #151f2b; }
.market-search-form { display: flex; align-items: end; gap: 8px; width: min(650px, 100%); }
.market-search-field { position: relative; flex: 1; }
.market-search-field label, .market-listing-form label { display: block; margin-bottom: 5px; color: #9daabc; font-size: 11px; }
.market-search-field input, .market-listing-form input, .market-listing-form select { box-sizing: border-box; width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #435169; border-radius: 7px; background: #0d141e; color: #eef3fa; }
.market-search-form button, .market-list-heading button, .market-proceeds button, .market-listing-form > button { min-height: 39px; padding: 8px 13px; border: 1px solid #426fa8; border-radius: 7px; background: #294f7d; color: #fff; cursor: pointer; }
.market-search-form button:last-child, .market-list-heading button { border-color: #465469; background: #202b39; }
.market-suggestions { position: absolute; z-index: 3; top: calc(100% + 4px); right: 0; left: 0; max-height: 230px; overflow: auto; border: 1px solid #4a5d76; border-radius: 8px; background: #121c28; box-shadow: 0 12px 30px #000a; }
.market-suggestions.is-hidden { display: none; }
.market-suggestion { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-bottom: 1px solid #283547; background: transparent; color: #e5ebf3; text-align: left; cursor: pointer; }
.market-suggestion:hover, .market-suggestion.is-active { background: #25364b; }
.market-suggestion img { width: 30px; height: 30px; object-fit: contain; }
.market-wallet { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; color: #aab6c5; }
.market-wallet strong { color: #fff0c2; font-size: 22px; }
.market-content { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 480px; }
.market-list-section { min-width: 0; padding: 18px 20px; border-right: 1px solid #303d4d; }
.market-view-tabs { display: flex; gap: 4px; margin-bottom: 15px; padding: 3px; border-radius: 8px; background: #0d151f; }
.market-view-tabs button { flex: 1; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: #8795a7; cursor: pointer; }
.market-view-tabs button.is-active { background: #27384d; color: #eef4fb; box-shadow: 0 1px 4px #0006; }
.market-list-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.market-list-heading > div { display: flex; align-items: baseline; gap: 10px; }
.market-list-heading h3 { margin: 0; font-size: 16px; }
.market-list-heading span { color: #8795a7; font-size: 12px; }
.market-list { display: grid; gap: 7px; }
.market-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid #344256; border-radius: 9px; background: #17212e; }
.market-item:hover, .market-item:focus-visible, .market-item:focus-within { border-color: #4d79ad; background: #1c2a3a; outline: none; }
.market-item.is-own { border-color: #526b89; background: #1a293a; }
.market-item.is-own:hover, .market-item.is-own:focus-visible, .market-item.is-own:focus-within { border-color: #6d8eb5; background: #21344a; }
.market-item img { width: 46px; height: 46px; object-fit: contain; }
.market-item-name strong, .market-item-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-item-name span { margin-top: 3px; color: #8291a5; font-size: 11px; }
.market-item-price { min-width: 105px; text-align: right; }
.market-item-price strong, .market-item-price small { display: block; }
.market-item-price strong { color: #ffe9a6; }
.market-item-price small { margin-top: 3px; color: #8998aa; }
.market-buy-button { min-width: 72px; padding: 8px 10px; border: 1px solid #3e78bd; border-radius: 7px; background: #315f96; color: #fff; cursor: pointer; }
.market-buy-button:disabled { border-color: #3b4655; background: #27313e; color: #6f7c8c; cursor: default; }
.market-buy-button.is-cancel { border-color: #9a5661; background: #743c47; }
.market-buy-button.is-cancel:hover { background: #884753; }
.market-empty { padding: 60px 16px; border: 1px dashed #354357; border-radius: 9px; color: #8391a3; text-align: center; }
.market-sell-section { padding: 18px; background: #121a24; }
.market-proceeds { display: grid; gap: 7px; padding: 13px; border: 1px solid #4d5260; border-radius: 9px; background: #1b222d; }
.market-proceeds > span { color: #9ca9b8; font-size: 11px; }
.market-proceeds strong { color: #ffe7a0; font-size: 17px; }
.market-proceeds button:disabled { opacity: .45; cursor: default; }
.market-listing-form { margin-top: 18px; }
.market-listing-form h3 { margin: 0 0 14px; font-size: 15px; }
.market-listing-form select { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.market-item-picker { display: grid; gap: 6px; max-height: 230px; margin-bottom: 10px; overflow: auto; }
.market-item-picker-option { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: 1px solid #344256; border-radius: 8px; background: #17212e; color: #e7edf5; text-align: left; cursor: pointer; }
.market-item-picker-option:hover, .market-item-picker-option:focus-visible { border-color: #4d79ad; background: #1c2a3a; outline: none; }
.market-item-picker-option.is-selected { border-color: #5892d7; background: #213854; box-shadow: 0 0 0 1px #5892d755 inset; }
.market-item-picker-option img { width: 34px; height: 34px; object-fit: contain; }
.market-item-picker-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-item-picker-option small { color: #9cabbc; }
.market-item-tooltip { z-index: 140; }
.market-number-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.market-listing-form p { padding: 10px 0; color: #aab6c5; font-size: 12px; }
.market-listing-form p strong { color: #ffe8a6; }
.market-listing-form > button { width: 100%; }
.market-listing-form > button:disabled { opacity: .4; cursor: default; }
.market-status { min-height: 2.8em; color: #9fc1eb; font-size: 12px; line-height: 1.4; }
.market-confirm-panel { position: fixed; z-index: 135; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(4, 8, 14, .78); }
.market-confirm-panel.is-hidden { display: none; }
.market-confirm-dialog { width: min(430px, 100%); padding: 22px; border: 1px solid #526783; border-radius: 12px; background: #17212e; color: #eaf0f8; box-shadow: 0 24px 65px #000c; }
.market-confirm-dialog > small { color: #74a2dc; font-size: 10px; letter-spacing: .15em; }
.market-confirm-dialog h3 { margin: 5px 0 16px; font-size: 20px; }
.market-confirm-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border: 1px solid #35445a; border-radius: 9px; background: #101923; }
.market-confirm-item img { width: 52px; height: 52px; object-fit: contain; }
.market-confirm-item strong, .market-confirm-item span { display: block; }
.market-confirm-item span { margin-top: 5px; color: #9aa8b9; font-size: 12px; }
.market-confirm-dialog > p { margin: 14px 0; color: #c2ccda; line-height: 1.6; }
.market-confirm-dialog > p strong { color: #ffe7a0; }
.market-confirm-actions { display: flex; justify-content: flex-end; gap: 9px; }
.market-confirm-actions button { min-width: 105px; padding: 9px 15px; border: 1px solid #46566c; border-radius: 7px; background: #222e3d; color: #e6ecf4; cursor: pointer; }
.market-confirm-actions button:last-child { border-color: #3c76ba; background: #315f96; color: #fff; }
.market-confirm-actions button:disabled { opacity: .45; cursor: default; }
.market-error-panel { position: fixed; z-index: 140; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(4, 8, 14, .82); }
.market-error-panel.is-hidden { display: none; }
.market-error-dialog { position: relative; width: min(410px, 100%); padding: 24px; border: 1px solid #92535d; border-radius: 12px; background: #211a22; color: #f2e9ec; box-shadow: 0 24px 65px #000d; text-align: center; }
.market-error-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 12px; border: 1px solid #d06a78; border-radius: 50%; background: #742f3b; color: #fff; font-size: 25px; font-weight: 700; }
.market-error-dialog small { color: #d98995; font-size: 10px; letter-spacing: .15em; }
.market-error-dialog h3 { margin: 5px 0 11px; font-size: 20px; }
.market-error-dialog p { margin: 0 0 19px; color: #d7c4c9; line-height: 1.6; }
.market-error-dialog button { min-width: 120px; padding: 9px 18px; border: 1px solid #a64c5a; border-radius: 7px; background: #843947; color: #fff; cursor: pointer; }
@media (max-width: 800px) { .market-content { grid-template-columns: 1fr; } .market-list-section { border-right: 0; } .market-toolbar { align-items: stretch; flex-direction: column; } .market-content { min-height: 0; } }
@media (max-width: 560px) { .market-panel { padding: 0; } .market-window { width: 100vw; border-radius: 0; } .market-search-form { flex-wrap: wrap; } .market-search-field { flex-basis: 100%; } .market-item { grid-template-columns: 40px minmax(0, 1fr) auto; } .market-item img { width: 40px; height: 40px; } .market-item-price { min-width: 92px; } .market-buy-button { grid-column: 2 / 4; } }
.trade-inventory-item { border-bottom-color: #2d3848; }
.trade-inventory-item:hover { background: #202b3a; }
.trade-chat-log { border: 1px solid #344052; border-radius: 8px; background: #101721; }
.trade-chat-form input { border-color: #3b4759; border-radius: 8px; background: #101721; }
.trade-request-actions button,
.trade-footer button,
.trade-chat-form button { border: 1px solid #465267; border-radius: 8px; background: #222c3b; color: #dce3ed; }
.trade-request-actions button:hover,
.trade-footer button:hover,
.trade-chat-form button:hover { background: #2c3849; }
.trade-request-actions button:last-child,
#trade-confirm-button { border-color: #3971c6; background: #3971c6; color: #fff; }
.trade-request-actions button:last-child:hover,
#trade-confirm-button:hover { background: #4780d5; }
#trade-confirm-button:disabled { border-color: #3b4759; background: #252e3b; color: #7f8a99; }
.trade-quantity-panel { border-radius: 12px; background: rgba(7, 11, 18, 0.82); }
.trade-quantity-dialog { border-color: #465267; border-radius: 10px; background: #1a2330; box-shadow: none; }
.trade-quantity-dialog input { border-color: #465267; border-radius: 8px; background: #101721; }
.trade-quantity-dialog button { border: 1px solid #465267; border-radius: 8px; background: #222c3b; color: #dce3ed; }
.trade-quantity-dialog button[type="submit"] { border-color: #3971c6; background: #3971c6; }
.trade-result-panel { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(7, 11, 18, 0.8); }
.trade-result-dialog { width: min(620px, 100%); padding: 20px; border: 1px solid #465267; border-radius: 12px; background: #151d29; color: #e8edf5; }
.trade-result-dialog header { padding-bottom: 13px; border-bottom: 1px solid #344052; }
.trade-result-dialog header small { color: #6fa0e8; font-size: 10px; letter-spacing: .14em; }
.trade-result-dialog h2 { margin: 3px 0 0; font-size: 21px; }
.trade-result-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.trade-result-columns section { min-width: 0; }
.trade-result-columns h3 { margin: 0 0 8px; color: #aeb8c7; font-size: 13px; }
.trade-result-list { display: grid; align-content: start; min-height: 64px; border: 1px solid #344052; border-radius: 9px; overflow: hidden; background: #101721; }
.trade-result-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; padding: 5px 9px; border-bottom: 1px solid #2d3848; }
.trade-result-item:last-child { border-bottom: 0; }
.trade-result-item img { width: 38px; height: 38px; object-fit: contain; }
.trade-result-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-result-item strong { color: #fff; }
.trade-result-empty { align-self: center; margin: 0; color: #758195; text-align: center; }
.trade-result-dialog > button { display: block; min-width: 120px; margin-left: auto; padding: 9px 18px; border: 1px solid #3971c6; border-radius: 8px; background: #3971c6; color: #fff; cursor: pointer; }
.trade-result-dialog > button:hover { background: #4780d5; }

@media (max-width: 900px) {
  .trade-window { border-radius: 10px; }
  .trade-grid { width: 100%; }
  .trade-inventory { border-top: 1px solid #344052; border-left: 0; padding-top: 12px; padding-left: 0; }
  .trade-result-dialog { max-height: calc(100dvh - 24px); overflow: auto; padding: 14px; }
  .trade-result-columns { grid-template-columns: 1fr; gap: 12px; }
  .trade-result-list { min-height: 52px; }
  .trade-result-dialog > button { width: 100%; }
}

@media (hover: none) and (pointer: coarse) and (max-width: 900px) {
  .skin-panel {
    padding: 0;
  }

  .skin-window {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    gap: 10px;
    height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
    padding: 12px;
    width: 100vw;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }

  .skin-part-tabs {
    gap: 8px;
  }

  .skin-part-tabs button {
    font-size: 14px;
    min-height: 44px;
    padding: 10px 16px;
  }

  .skin-pane-tabs {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .skin-pane-tabs button {
    background: #0a122080;
    border: 1px solid #ffffff1f;
    border-radius: 9px;
    color: #aebed4;
    font-size: 13px;
    min-height: 44px;
    min-width: 0;
    padding: 8px 5px;
  }

  .skin-pane-tabs button.is-active {
    background: #31527d;
    border-color: #8fb4ff;
    color: #fff;
  }

  .skin-closet-layout {
    gap: 0;
    overflow: hidden;
    padding-right: 0;
  }

  .skin-item-pane,
  .skin-current-pane {
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 12px;
  }

  .skin-closet-layout > [data-skin-pane-content] {
    display: none;
  }

  .skin-closet-layout[data-mobile-pane="closet"] > [data-skin-pane-content="closet"],
  .skin-closet-layout[data-mobile-pane="current"] > [data-skin-pane-content="current"],
  .skin-closet-layout[data-mobile-pane="inventory"] > [data-skin-pane-content="inventory"] {
    display: grid;
  }

  .skin-item-pane h3,
  .skin-current-pane h3 {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .skin-item-list,
  .skin-current-pane .skin-slots {
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .skin-item-list {
    gap: 8px;
    padding-right: 0;
  }

  .skin-closet-item {
    gap: 10px;
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 54px;
    padding: 6px 10px;
    touch-action: pan-y;
    -webkit-touch-callout: none;
  }

  .skin-closet-item img {
    height: 42px;
    width: 42px;
  }

  .skin-closet-item span {
    font-size: 13px;
  }

  .skin-slot-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .skin-slot-actions button {
    font-size: 13px;
    min-height: 44px;
    width: 100%;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 380px) {
  .menu-bar button {
    padding: 0 7px;
  }

  .inventory-window {
    padding: 14px 10px 10px;
    width: calc(100vw - 16px);
  }

  .inventory-grid {
    gap: 5px;
  }

  .inventory-slot {
    border-radius: 8px;
    flex-basis: calc((100% - 15px) / 4);
    width: calc((100% - 15px) / 4);
  }
}