/* Arena Teney — Experience r01d gold chrome
 * Presentation-only chrome for Central Square -> Experience Table.
 * Color treatment only: no dock/header geometry, safe-area, navigation or state changes.
 */

body[data-screen="experience"] {
  --exp-chrome-gold: #c7a85e;
  --exp-chrome-gold-bright: #ead493;
  --exp-chrome-gold-dim: rgba(199, 168, 94, .38);
  --exp-chrome-ivory: #eee7d8;
  --exp-chrome-muted: #aaa292;
  --exp-chrome-black: #080806;
  --exp-chrome-stone: #11100c;
}

/* Top brand chrome — keep accepted structure/spacing, replace the old blue surface. */
body[data-screen="experience"] .game-header {
  border-color: rgba(205, 174, 100, .30) !important;
  background:
    radial-gradient(ellipse at 22% 0%, rgba(202, 161, 70, .13), transparent 48%),
    linear-gradient(180deg, rgba(19, 16, 10, .96), rgba(8, 9, 8, .98)) !important;
  box-shadow:
    inset 0 -1px rgba(230, 201, 128, .16),
    0 10px 28px rgba(0, 0, 0, .24) !important;
}

body[data-screen="experience"] .game-brand-copy h1 {
  color: var(--exp-chrome-ivory) !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .58), 0 0 18px rgba(203, 166, 78, .08);
}

body[data-screen="experience"] .game-brand-mark {
  color: var(--exp-chrome-gold-bright) !important;
  filter: drop-shadow(0 0 7px rgba(210, 169, 77, .18));
}

body[data-screen="experience"] .game-brand-copy small,
body[data-screen="experience"] .header-resource {
  color: var(--exp-chrome-muted) !important;
}

/* Player topbar shown with the persistent mobile chrome. */
body[data-screen="experience"] .i13-topbar {
  border-color: rgba(213, 177, 91, .58) !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(191, 150, 62, .10), transparent 34%),
    linear-gradient(180deg, rgba(24, 20, 12, .97), rgba(8, 9, 8, .985)) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .42),
    inset 0 1px rgba(255, 238, 193, .055),
    inset 0 -18px 28px rgba(0, 0, 0, .18) !important;
}

body[data-screen="experience"] .i13-avatar {
  border-color: rgba(218, 180, 92, .58) !important;
  background:
    radial-gradient(circle at 42% 28%, rgba(205, 166, 73, .16), transparent 46%),
    linear-gradient(180deg, #17130c, #090a08) !important;
  box-shadow: inset 0 0 18px rgba(203, 163, 71, .08), 0 0 12px rgba(0, 0, 0, .25) !important;
}

body[data-screen="experience"] .i13-player-name {
  color: #f2ebdd !important;
}

body[data-screen="experience"] .i13-player-level {
  border-color: rgba(224, 190, 105, .70) !important;
  color: #f0d68f !important;
  background: linear-gradient(180deg, rgba(83, 62, 24, .96), rgba(24, 20, 12, .98)) !important;
  box-shadow: inset 0 1px rgba(255, 238, 187, .08), 0 0 10px rgba(194, 151, 57, .10) !important;
}

body[data-screen="experience"] .i13-header-xp {
  border-color: rgba(218, 177, 84, .34) !important;
  background: rgba(6, 7, 6, .94) !important;
}

/* Persistent mobile dock — color only, preserve accepted geometry and visualViewport anchoring. */
body[data-screen="experience"] .i13-dock {
  border-color: rgba(220, 182, 91, .68) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(194, 145, 48, .14), transparent 52%),
    linear-gradient(180deg, rgba(20, 17, 10, .975), rgba(5, 6, 5, .995)) !important;
  box-shadow:
    0 -13px 31px rgba(0, 0, 0, .68),
    inset 0 1px rgba(255, 232, 174, .07),
    inset 0 18px 34px rgba(145, 101, 28, .035) !important;
}

body[data-screen="experience"] .i13-dock > button {
  color: #c9c2b4 !important;
  background-color: transparent !important;
}

body[data-screen="experience"] .i13-dock > button:not([data-core-screen="inventory"]) .i13-icon {
  color: #d9bc76 !important;
  filter: drop-shadow(0 0 5px rgba(217, 178, 83, .13));
}

body[data-screen="experience"] .i13-dock > button span {
  color: #c8c0b1 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

body[data-screen="experience"] .i13-dock > button.is-active {
  border-color: rgba(232, 197, 111, .68) !important;
  color: #fff0c9 !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(224, 183, 87, .20), transparent 50%),
    linear-gradient(180deg, rgba(76, 56, 20, .96), rgba(27, 22, 12, .985)) !important;
  box-shadow:
    0 0 18px rgba(185, 139, 48, .16),
    inset 0 0 0 1px rgba(255, 233, 172, .055),
    inset 0 10px 20px rgba(219, 174, 74, .045) !important;
}

body[data-screen="experience"] .i13-dock > button.is-active .i13-icon,
body[data-screen="experience"] .i13-dock > button.is-active span {
  color: #f3d995 !important;
}

/* If Experience is represented as a secondary-menu destination, keep Menu highlighted in gold. */
body[data-screen="experience"] .i13-dock > button[data-i13-menu] {
  border-color: rgba(232, 197, 111, .68) !important;
  color: #fff0c9 !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(224, 183, 87, .20), transparent 50%),
    linear-gradient(180deg, rgba(76, 56, 20, .96), rgba(27, 22, 12, .985)) !important;
  box-shadow:
    0 0 18px rgba(185, 139, 48, .16),
    inset 0 0 0 1px rgba(255, 233, 172, .055) !important;
}

body[data-screen="experience"] .i13-dock > button[data-i13-menu] .i13-icon,
body[data-screen="experience"] .i13-dock > button[data-i13-menu] span {
  color: #f3d995 !important;
}