:root {
  --ui-v2-state-neutral: #c8d0c6;
  --ui-v2-state-pending: #f1cb75;
  --ui-v2-state-success: #73d99a;
  --ui-v2-state-error: #ff8c94;
}

.ui-v2-overlay {
  border: 1px solid rgba(196, 154, 74, .38);
  background: linear-gradient(145deg, rgba(24, 29, 24, .99), rgba(8, 11, 9, .99));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .72), inset 0 1px rgba(255, 255, 255, .04);
}

.ui-v2-overlay::backdrop {
  background: rgba(3, 5, 4, .78);
  backdrop-filter: blur(5px);
}

.ui-v2-state,
.eqv2-empty,
.world-v2-empty,
.profession-empty,
.market-empty-state,
.chat-empty,
.home-record-empty,
.public-profile-loading,
.public-profile-error,
.commerce-empty-comparison,
.zone-equipment-empty {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(200, 208, 198, .16);
  border-radius: 12px;
  background: rgba(6, 10, 8, .52);
  color: var(--ui-v2-state-neutral);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ui-v2-state {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ui-v2-state-mark {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(241, 203, 117, .34);
  border-radius: 50%;
  background: rgba(196, 154, 74, .1);
  color: var(--ui-v2-state-pending);
  font-weight: 950;
}

.ui-v2-state strong { color: #fffdf7; }
.ui-v2-state p { margin: 4px 0 0; color: var(--muted); }
.ui-v2-state[data-state="loading"] .ui-v2-state-mark,
.ui-v2-state[data-state="pending"] .ui-v2-state-mark { animation: ui-v2-state-pulse 1.35s ease-in-out infinite; }
.ui-v2-state[data-state="locked"] { border-color: rgba(241, 203, 117, .26); }
.ui-v2-state[data-state="success"], .ui-v2-state[data-state="result"] { border-color: rgba(115, 217, 154, .35); }
.ui-v2-state[data-state="success"] .ui-v2-state-mark, .ui-v2-state[data-state="result"] .ui-v2-state-mark { color: var(--ui-v2-state-success); border-color: rgba(115, 217, 154, .36); }
.ui-v2-state[data-state="error"] { border-color: rgba(255, 140, 148, .42); color: #ffd4d7; }
.ui-v2-state[data-state="error"] .ui-v2-state-mark { color: var(--ui-v2-state-error); border-color: rgba(255, 140, 148, .48); background: rgba(120, 27, 36, .2); }
.public-profile-error, .arena-hub-error:not(:empty), .actor-3x3-inline-error, .chat-error:not([hidden]) { border-color: rgba(255, 140, 148, .42); background: rgba(120, 27, 36, .17); color: #ffd4d7; }

@keyframes ui-v2-state-pulse { 50% { opacity: .48; transform: scale(.94); } }

.ui-v2-confirmation {
  width: min(520px, calc(100vw - 28px));
  max-width: 520px;
  padding: 0;
  color: var(--text);
}

.ui-v2-confirmation-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 15px;
  margin: 0;
  padding: clamp(20px, 4vw, 30px);
}

.ui-v2-confirmation[data-tone="danger"] .ui-v2-state-mark {
  border-color: rgba(255, 140, 148, .48);
  background: rgba(120, 27, 36, .2);
  color: var(--ui-v2-state-error);
}
.ui-v2-confirmation[data-tone="danger"] #uiV2ConfirmationAccept {
  border-color: rgba(255, 140, 148, .58);
  background: linear-gradient(180deg, rgba(119, 38, 47, .92), rgba(76, 23, 30, .96));
  color: #fff2f3;
}

.ui-v2-confirmation-copy { min-width: 0; }
.ui-v2-confirmation-copy h2 { margin: 2px 0 9px; color: #fffdf7; font-family: Georgia, serif; font-size: clamp(24px, 5vw, 34px); line-height: 1.05; }
.ui-v2-confirmation-copy p { margin: 0; color: var(--arena-steel-bright, #c8d0c6); line-height: 1.55; overflow-wrap: anywhere; }
.ui-v2-confirmation-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 7px; }
.ui-v2-confirmation-actions button { min-height: 48px; }

.player-guide-dialog.ui-v2-overlay { border-radius: 18px; }
.player-guide-dialog .player-guide-intro { padding: 15px 16px; border: 1px solid rgba(196, 154, 74, .24); border-radius: 12px; background: rgba(196, 154, 74, .07); color: #e9e0cb; }
.player-guide-dialog .player-guide-section { border-color: rgba(200, 208, 198, .14); background: rgba(6, 10, 8, .34); }
.player-guide-dialog .player-guide-toggle:focus-visible { outline: 2px solid var(--arena-bronze-bright); outline-offset: 2px; }
.player-guide-dialog .player-guide-status.is-active { border-color: rgba(115, 217, 154, .38); background: rgba(115, 217, 154, .1); color: #aef0c3; }
.player-guide-subheading { margin: 19px 0 8px; color: #fffdf7; font-family: Georgia, serif; font-size: 18px; }

@media (max-width: 620px) {
  .ui-v2-confirmation { width: calc(100vw - 18px); max-height: calc(100dvh - 18px); }
  .ui-v2-confirmation-card { grid-template-columns: 1fr; padding: 20px 17px max(17px, env(safe-area-inset-bottom)); }
  .ui-v2-confirmation-card > .ui-v2-state-mark { display: none; }
  .ui-v2-confirmation-actions { grid-column: 1; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .ui-v2-confirmation { max-height: calc(100dvh - 12px); }
  .ui-v2-confirmation-card { grid-template-columns: auto minmax(0, 1fr) minmax(230px, .7fr); align-items: center; padding: 14px 18px; }
  .ui-v2-confirmation-actions { grid-column: 3; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-v2-state[data-state="loading"] .ui-v2-state-mark,
  .ui-v2-state[data-state="pending"] .ui-v2-state-mark { animation: none; }
}
