:root {
  --font-body: "Trebuchet MS", "Candara", "Segoe UI", sans-serif;
  --font-heading: "Palatino Linotype", "Book Antiqua", "Cinzel", serif;

  /* Material Core Tokens */
  --stone-900: #1a1b17;
  --stone-800: #252721;
  --stone-700: #2f312a;
  --stone-600: #3d4036;
  --stone-500: #5d5b52;
  --stone-550: #47453f;
  --stone-900-rgb: 26, 27, 23;
  --stone-800-rgb: 37, 39, 33;
  --stone-700-rgb: 47, 49, 42;
  --stone-600-rgb: 61, 64, 54;
  --timber-700: #5b381d;
  --timber-600: #8a6534;
  --timber-500: #a2743f;
  --timber-800: #4f2f17;
  --timber-700-rgb: 91, 56, 29;
  --timber-600-rgb: 138, 101, 52;
  --metal-bronze: #c89247;
  --metal-gold-soft: #e2cb95;
  --metal-iron: #6b5e49;
  --metal-bronze-rgb: 200, 146, 71;
  --parchment: #efe7d7;
  --parchment-soft: #daccb1;
  --parchment-bright: #fff0cf;
  --parchment-rgb: 239, 231, 215;
  --ink-muted: #cbbda1;
  --moss-500: #8f8a79;
  --ember-500: #d08a49;
  --timber-char: #3a2515;
  --danger-500: #b24c4c;
  --ok-500: #5fa06d;

  /* Semantic Theme Tokens (material-mapped) */
  --bg: var(--stone-900);
  --panel: var(--stone-700);
  --panel-soft: var(--stone-600);
  --text: var(--parchment);
  --muted: var(--ink-muted);
  --brand: var(--metal-bronze);
  --brand-2: var(--timber-600);
  --brand-3: var(--metal-iron);
  --accent-cyan: var(--moss-500);
  --accent-amber: var(--metal-bronze);
  --danger: var(--danger-500);
  --ok: var(--ok-500);
  --border: var(--stone-500);

  /* Legacy Semantic Mapping */
  /* --bg -> --stone-900 */
  /* --panel -> --stone-700 */
  /* --panel-soft -> --stone-600 */
  /* --text -> --parchment */
  /* --brand -> --metal-bronze */
  /* --brand-2 -> --timber-600 */
  /* --brand-3 -> --metal-iron */
  /* --danger -> --danger-500 */
  /* --ok -> --ok-500 */

  --link: var(--metal-gold-soft);
  --link-hover: var(--parchment-bright);

  --font-size-body: clamp(0.94rem, 0.22vw + 0.88rem, 1.02rem);
  --font-size-small: clamp(0.8rem, 0.16vw + 0.75rem, 0.9rem);
  --font-size-h1: clamp(1.3rem, 0.7vw + 1.1rem, 1.8rem);
  --font-size-h2: clamp(1.08rem, 0.36vw + 0.96rem, 1.3rem);
  --font-size-h3: clamp(0.96rem, 0.28vw + 0.88rem, 1.12rem);
  --space-main-top: clamp(10px, 1.2vw, 16px);
  --space-main-bottom: clamp(26px, 2.8vw, 40px);
  --space-panel-padding: clamp(14px, 1.6vw, 20px);
  --radius-panel: clamp(12px, 1vw, 15px);
  --space-topbar-y: clamp(10px, 1vw, 14px);

  --bg-gradient-main: linear-gradient(164deg, rgba(var(--stone-900-rgb), 1) 0%, rgba(var(--stone-800-rgb), 1) 42%, rgba(var(--stone-700-rgb), 1) 100%);
  --bg-ember-haze: radial-gradient(1040px 460px at 50% -12%, rgba(var(--metal-bronze-rgb), 0.18), transparent 74%);
  --bg-vignette: radial-gradient(130% 72% at 50% 108%, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 62%);
  --bg-dust-specks: radial-gradient(circle at 12% 14%, rgba(var(--parchment-rgb), 0.08) 0 1px, rgba(0, 0, 0, 0) 2px);
  --bg-glow-right: radial-gradient(920px 520px at 100% -8%, rgba(132, 107, 71, 0.22), transparent 70%);
  --bg-glow-left: radial-gradient(820px 520px at -10% 22%, rgba(199, 150, 75, 0.2), transparent 74%);
  --bg-stone-wash: linear-gradient(180deg, rgba(226, 210, 178, 0.05) 0%, rgba(29, 30, 25, 0) 34%, rgba(226, 210, 178, 0.03) 100%);
  --bg-vine-pattern: url("../img/floral-vine-pattern.svg");
  --bg-castle-silhouette: url("../img/castle-silhouette.svg");

  --bg-no-topbar-main: radial-gradient(circle at top right, var(--stone-700) 0%, var(--bg) 64%);
  --bg-no-topbar-glow: radial-gradient(1240px 420px at 50% -50px, rgba(200, 145, 72, 0.2), transparent 70%);

  --scrollbar-thumb: linear-gradient(180deg, rgba(214, 162, 74, 0.85), rgba(129, 92, 53, 0.85));
  --scrollbar-track: rgba(17, 29, 24, 0.62);

  --topbar-bg: linear-gradient(180deg, var(--timber-600) 0%, var(--timber-700) 42%, var(--timber-char) 100%), repeating-linear-gradient(96deg, rgba(184, 140, 78, 0.11) 0 6px, rgba(0, 0, 0, 0) 6px 14px);
  --topbar-border: rgba(129, 101, 66, 0.72);
  --topbar-grain-overlay: repeating-linear-gradient(94deg, rgba(243, 216, 168, 0.06) 0 2px, rgba(0, 0, 0, 0) 2px 12px);
  --topbar-rivet-overlay: radial-gradient(circle at 14px 50%, rgba(233, 203, 146, 0.7) 0 1.2px, rgba(0, 0, 0, 0) 2px);
  --topbar-shadow: 0 8px 24px rgba(10, 8, 6, 0.52);
  --topbar-accent-line: linear-gradient(90deg, rgba(200, 145, 72, 0.18), rgba(224, 193, 136, 0.85), rgba(200, 145, 72, 0.18));

  --brand-title: var(--parchment);
  --brand-title-hover: #fff4df;
  --brand-title-glow: 0 0 16px rgba(214, 162, 74, 0.32);
  --brand-title-hover-glow: 0 0 18px rgba(214, 162, 74, 0.42);

  --nav-link-text: var(--parchment);
  --nav-link-base-bg: linear-gradient(180deg, rgba(var(--timber-600-rgb), 0.28), rgba(var(--timber-700-rgb), 0.22));
  --nav-link-base-border: rgba(172, 128, 73, 0.5);
  --nav-link-topline: linear-gradient(90deg, rgba(232, 205, 156, 0), rgba(232, 205, 156, 0.82), rgba(232, 205, 156, 0));
  --nav-link-hover-text: #fff4de;
  --nav-link-hover-bg: linear-gradient(180deg, rgba(96, 70, 41, 0.7), rgba(71, 52, 31, 0.74));
  --nav-link-hover-border: rgba(192, 149, 87, 0.62);
  --nav-link-active-text: #fff8e8;
  --nav-link-active-border: rgba(219, 182, 108, 0.86);
  --nav-link-active-bg: linear-gradient(135deg, rgba(125, 86, 35, 0.8), rgba(78, 57, 36, 0.76));
  --nav-link-active-inset: 0 0 0 1px rgba(252, 233, 196, 0.32) inset;

  --panel-border: rgba(120, 97, 66, 0.72);
  --panel-bg: linear-gradient(180deg, rgba(var(--stone-600-rgb), 0.95) 0%, rgba(var(--stone-700-rgb), 0.97) 100%), repeating-linear-gradient(90deg, rgba(219, 197, 157, 0.04) 0 1px, rgba(0, 0, 0, 0) 1px 10px), repeating-linear-gradient(0deg, rgba(224, 205, 168, 0.025) 0 2px, rgba(0, 0, 0, 0) 2px 14px);
  --panel-shadow: 0 14px 34px rgba(11, 9, 7, 0.46);
  --panel-shadow-inset: 0 1px 0 rgba(236, 215, 175, 0.12) inset, 0 0 0 1px rgba(94, 74, 51, 0.38) inset;
  --panel-accent-line: linear-gradient(90deg, rgba(199, 145, 72, 0.56), rgba(230, 202, 146, 0.82), rgba(199, 145, 72, 0.56));
  --panel-ornament: radial-gradient(circle at center, rgba(222, 198, 155, 0.44) 0 1px, rgba(0, 0, 0, 0) 1px 100%);
  --panel-title: var(--parchment);
  --panel-frame-border: rgba(168, 137, 93, 0.3);
  --panel-rivet-metal: rgba(229, 199, 147, 0.72);
  --panel-rivet-shadow: rgba(55, 37, 20, 0.46);
  --panel-hover-shadow: 0 16px 34px rgba(11, 9, 7, 0.52), 0 0 0 1px rgba(207, 167, 109, 0.22);

  --login-logo: #f2e4cf;
  --login-logo-glow: 0 0 6px rgba(214, 162, 74, 0.72), 0 0 18px rgba(188, 144, 80, 0.42), 0 0 32px rgba(145, 100, 54, 0.3);
  --login-card-bg: linear-gradient(180deg, rgba(58, 55, 44, 0.92) 0%, rgba(44, 40, 32, 0.95) 100%), repeating-linear-gradient(122deg, rgba(230, 214, 178, 0.05) 0 2px, rgba(0, 0, 0, 0) 2px 10px);
  --login-card-border: rgba(148, 118, 75, 0.6);
  --login-card-shadow-main: 0 15px 36px rgba(10, 8, 6, 0.5);
  --login-card-shadow-inset: 0 0 0 1px rgba(214, 162, 74, 0.14) inset;
  --login-card-shadow-glow: 0 0 26px rgba(164, 116, 66, 0.2);

  --btn-text: #fff0d5;
  --btn-bg: linear-gradient(180deg, var(--timber-600) 0%, var(--timber-700) 52%, var(--timber-800) 100%), repeating-linear-gradient(96deg, rgba(210, 167, 104, 0.18) 0 4px, rgba(0, 0, 0, 0) 4px 10px);
  --btn-border: rgba(171, 128, 70, 0.72);
  --btn-shadow: 0 7px 18px rgba(43, 25, 13, 0.56), 0 0 0 1px rgba(92, 57, 28, 0.52) inset;
  --btn-carve-line: rgba(248, 222, 176, 0.18);
  --btn-face-sheen: linear-gradient(180deg, rgba(255, 239, 206, 0.14), rgba(0, 0, 0, 0) 34%);
  --btn-press-shadow: 0 3px 10px rgba(43, 25, 13, 0.5), 0 0 0 1px rgba(76, 46, 24, 0.56) inset;
  --btn-danger-tint: linear-gradient(180deg, rgba(255, 218, 210, 0.08), rgba(0, 0, 0, 0) 30%);
  --btn-success-tint: linear-gradient(180deg, rgba(228, 241, 186, 0.08), rgba(0, 0, 0, 0) 30%);
  --btn-secondary-bg: linear-gradient(180deg, var(--stone-600) 0%, var(--stone-500) 52%, var(--stone-550) 100%), repeating-linear-gradient(92deg, rgba(225, 217, 198, 0.1) 0 3px, rgba(0, 0, 0, 0) 3px 8px);
  --btn-secondary-border: rgba(157, 150, 132, 0.62);
  --btn-secondary-shadow: 0 7px 16px rgba(30, 29, 27, 0.52), 0 0 0 1px rgba(87, 83, 73, 0.56) inset;
  --btn-danger-bg: linear-gradient(180deg, #8e4134 0%, #733327 55%, #5f2b20 100%), repeating-linear-gradient(96deg, rgba(224, 171, 149, 0.14) 0 3px, rgba(0, 0, 0, 0) 3px 9px);
  --btn-danger-border: rgba(167, 97, 83, 0.7);
  --btn-danger-shadow: 0 7px 16px rgba(67, 26, 19, 0.56), 0 0 0 1px rgba(103, 46, 36, 0.55) inset;
  --btn-success-bg: linear-gradient(180deg, #6b7446 0%, #59613a 52%, #4a5131 100%), repeating-linear-gradient(96deg, rgba(198, 210, 154, 0.12) 0 3px, rgba(0, 0, 0, 0) 3px 8px);
  --btn-success-border: rgba(152, 162, 104, 0.72);
  --btn-success-shadow: 0 7px 16px rgba(34, 42, 20, 0.54), 0 0 0 1px rgba(84, 91, 54, 0.56) inset;

  --notice-border: rgba(128, 144, 122, 0.55);
  --notice-success-bg: rgba(48, 103, 63, 0.32);
  --notice-success-border: rgba(95, 160, 109, 0.66);
  --notice-error-bg: rgba(130, 52, 52, 0.3);
  --notice-error-border: rgba(178, 76, 76, 0.68);

  --label-text: var(--parchment);
  --control-bg: var(--stone-800);
  --control-border: rgba(121, 103, 76, 0.64);
  --control-hover-border: rgba(173, 148, 99, 0.62);
  --control-hover-bg: rgba(var(--stone-600-rgb), 0.86);
  --control-focus-border: rgba(214, 162, 74, 0.8);
  --control-focus-ring: 0 0 0 3px rgba(214, 162, 74, 0.22);
  --control-groove-shadow: inset 0 1px 0 rgba(241, 221, 187, 0.09), inset 0 0 0 1px rgba(71, 54, 36, 0.36);
  --control-focus-glint: inset 0 1px 0 rgba(255, 237, 202, 0.2);
  --focus-outline-color: rgba(230, 196, 128, 0.98);
  --focus-ring-strong: 0 0 0 4px rgba(214, 162, 74, 0.32);

  --table-border: rgba(132, 117, 90, 0.34);
  --table-header-text: var(--parchment);
  --table-header-bg: rgba(92, 76, 53, 0.48);
  --table-row-even-bg: rgba(50, 48, 40, 0.44);
  --table-row-hover-bg: rgba(72, 62, 48, 0.44);
  --table-header-topline: rgba(242, 219, 178, 0.22);
  --table-row-hover-inset: inset 0 0 0 1px rgba(201, 166, 111, 0.14);
  --table-cell-border-soft: rgba(132, 117, 90, 0.28);
  --sort-hover-text: #f0e1be;
  --sort-active-text: #ffd690;

  --profile-preview-border: rgba(155, 141, 102, 0.62);
  --profile-preview-bg: rgba(64, 82, 72, 0.56);
  --profile-preview-shadow: 0 8px 20px rgba(11, 18, 15, 0.56);
  --profile-preview-fallback: #e9dec9;

  --modal-backdrop: rgba(10, 16, 13, 0.82);
  --modal-dialog-bg: linear-gradient(180deg, rgba(var(--stone-700-rgb), 0.98), rgba(var(--stone-800-rgb), 0.98));
  --modal-dialog-border: rgba(122, 139, 120, 0.44);
  --modal-dialog-shadow: 0 16px 40px rgba(4, 8, 6, 0.7);
  --modal-canvas-border: rgba(152, 165, 146, 0.52);
  --modal-canvas-bg: #16211d;

  --major-stat-text: #ff9a9a;
  --minor-stat-text: #f2ecdf;
  --admin-major-line: #ffb1b1;
  --admin-major-value: #ff9a9a;
  --admin-major-value-glow: 0 0 6px rgba(255, 154, 154, 0.72), 0 0 14px rgba(215, 92, 92, 0.34);
  --admin-major-label: #ff9a9a;
  --admin-major-label-glow: 0 0 6px rgba(255, 154, 154, 0.52);
  --admin-major-row-text: #ffd9d9;
  --admin-minor-label: #ede5d5;

  --admin-avatar-border: rgba(161, 151, 122, 0.64);
  --admin-avatar-bg: rgba(63, 79, 69, 0.58);
  --admin-avatar-fallback: #efe5d0;

  --buff-builder-border: rgba(141, 122, 91, 0.34);
  --buff-builder-bg: rgba(43, 35, 27, 0.66);

  --rarity-gri: #d8d0c3;
  --rarity-gri-glow: 0 0 5px rgba(216, 208, 195, 0.78), 0 0 12px rgba(216, 208, 195, 0.24);
  --rarity-yesil: #b8dfc0;
  --rarity-yesil-glow: 0 0 6px rgba(129, 198, 142, 0.82), 0 0 14px rgba(90, 154, 103, 0.34);
  --rarity-mavi: #b8cfff;
  --rarity-mavi-glow: 0 0 6px rgba(143, 165, 206, 0.68), 0 0 12px rgba(112, 122, 149, 0.28);
  --rarity-mor: #dcc9ff;
  --rarity-mor-glow: 0 0 6px rgba(176, 144, 199, 0.7), 0 0 12px rgba(139, 111, 157, 0.28);
  --rarity-sari: #f5ddaa;
  --rarity-sari-glow: 0 0 7px rgba(214, 162, 74, 0.82), 0 0 16px rgba(214, 162, 74, 0.36);
  --rarity-kirmizi: #f3bcbc;
  --rarity-kirmizi-glow: 0 0 6px rgba(201, 105, 105, 0.82), 0 0 14px rgba(178, 76, 76, 0.36);
  --rarity-myth: #f0caef;
  --rarity-myth-glow: 0 0 7px rgba(185, 136, 174, 0.72), 0 0 13px rgba(144, 110, 140, 0.3);

  --chat-log-border: rgba(118, 132, 111, 0.46);
  --chat-log-bg: rgba(18, 28, 23, 0.92);
  --chat-log-drag-border: rgba(135, 169, 141, 0.92);
  --chat-log-drag-ring: 0 0 0 3px rgba(135, 169, 141, 0.26) inset;
  --chat-log-drag-bg: rgba(29, 44, 37, 0.93);

  --chat-item-border: rgba(112, 126, 107, 0.42);
  --chat-item-bg: rgba(32, 46, 39, 0.9);
  --chat-item-hover-border: rgba(165, 152, 112, 0.6);
  --chat-roll-border: rgba(166, 121, 67, 0.62);
  --chat-roll-bg: rgba(80, 57, 32, 0.54);
  --chat-image-border: rgba(95, 160, 109, 0.58);
  --chat-image-bg: rgba(39, 74, 52, 0.48);
  --chat-system-border: rgba(178, 76, 76, 0.62);
  --chat-system-bg: rgba(94, 39, 39, 0.46);
  --chat-role-dm-border: rgba(201, 105, 105, 0.78);
  --chat-role-dm-bg: rgba(108, 44, 44, 0.66);
  --chat-role-dm-text: #ffe3e3;
  --chat-role-admin-border: rgba(214, 162, 74, 0.82);
  --chat-role-admin-bg: rgba(107, 81, 35, 0.7);
  --chat-role-admin-text: #fff0c9;
  --chat-role-player-border: rgba(156, 129, 92, 0.76);
  --chat-role-player-bg: rgba(70, 54, 37, 0.72);
  --chat-role-player-text: #f0e2c9;

  --chat-avatar-border: rgba(160, 151, 124, 0.62);
  --chat-avatar-bg: rgba(66, 81, 71, 0.54);
  --chat-avatar-fallback: #efe5d0;
  --chat-author-text: #f1e7d2;
  --chat-image-frame-border: rgba(129, 145, 126, 0.4);

  --chat-board-mode-active: 0 0 0 2px rgba(214, 162, 74, 0.35) inset, 0 6px 16px rgba(124, 95, 44, 0.42);
  --chat-board-inline-text: #e0d4bd;
  --chat-board-color-border: rgba(133, 148, 126, 0.62);
  --chat-board-color-bg: var(--timber-char);
  --chat-board-size-text: #e8dbc4;
  --chat-board-stage-border: rgba(118, 132, 111, 0.5);
  --chat-board-stage-bg: rgba(18, 28, 23, 0.9);
  --chat-board-stage-drag-border: rgba(135, 169, 141, 0.95);
  --chat-board-stage-drag-ring: 0 0 0 3px rgba(135, 169, 141, 0.26);
  --chat-board-stage-drag-bg: rgba(29, 44, 37, 0.92);
  --chat-board-canvas-bg: #f2e7d1;
  --chat-board-canvas-border: rgba(139, 130, 103, 0.58);
  --chat-board-hint: #d4c7ad;

  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 340ms;
  --motion-cinematic: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-smooth: cubic-bezier(0.3, 0.7, 0.25, 1);
  --panel-enter-duration: 300ms;
  --panel-enter-offset: 12px;

  --hover-rune-line: linear-gradient(90deg, rgba(199, 145, 72, 0.04), rgba(236, 208, 154, 0.72), rgba(199, 145, 72, 0.05));
  --hover-rune-wash: linear-gradient(112deg, rgba(255, 240, 208, 0) 10%, rgba(255, 240, 208, 0.3) 42%, rgba(255, 240, 208, 0.08) 64%, rgba(255, 240, 208, 0) 82%);
  --btn-hover-shadow: 0 10px 20px rgba(44, 26, 13, 0.6), 0 0 0 1px rgba(243, 217, 164, 0.28) inset;

  --modal-backdrop-atmosphere: radial-gradient(880px 320px at 50% 8%, rgba(214, 162, 74, 0.14), transparent 68%), radial-gradient(760px 280px at 88% 0%, rgba(131, 92, 56, 0.16), transparent 70%);
  --modal-dialog-ambient: 0 0 0 1px rgba(214, 162, 74, 0.16) inset;

  --separator-ornament: linear-gradient(90deg, rgba(210, 169, 108, 0), rgba(210, 169, 108, 0.82), rgba(210, 169, 108, 0));
  --dashboard-hero-crest: radial-gradient(circle at 50% 0, rgba(236, 210, 158, 0.86) 0 4px, rgba(85, 56, 29, 0.48) 4px 6px, rgba(0, 0, 0, 0) 7px);
  --dashboard-hero-rail: linear-gradient(180deg, rgba(225, 196, 144, 0.4), rgba(0, 0, 0, 0));
  --dashboard-hero-haze: radial-gradient(560px 220px at 50% -18%, rgba(214, 162, 74, 0.2), rgba(0, 0, 0, 0) 76%);
  --dashboard-action-gap: clamp(8px, 1vw, 12px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  background-color: var(--bg);
  background:
    var(--bg-vignette),
    var(--bg-ember-haze),
    var(--bg-glow-right),
    var(--bg-glow-left),
    var(--bg-stone-wash),
    var(--bg-gradient-main);
  color: var(--text);
  line-height: 1.4;
  text-rendering: optimizeLegibility;
  scrollbar-gutter: stable both-edges;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    var(--bg-dust-specks),
    radial-gradient(circle at 10% 10%, rgba(226, 204, 163, 0.06) 0 2px, rgba(0, 0, 0, 0) 3px),
    radial-gradient(circle at 84% 78%, rgba(226, 204, 163, 0.05) 0 1px, rgba(0, 0, 0, 0) 2px),
    var(--bg-vine-pattern) left top / 280px 280px repeat,
    var(--bg-vine-pattern) right bottom / 280px 280px repeat;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: var(--bg-castle-silhouette) center bottom / cover no-repeat;
  opacity: 0.56;
  pointer-events: none;
  z-index: 0;
}

body.no-topbar {
  background:
    var(--bg-stone-wash),
    var(--bg-no-topbar-glow),
    var(--bg-no-topbar-main);
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

hr {
  border: 0;
  height: 1px;
  margin: 14px 0;
  background: var(--separator-ornament);
}

main.container > .panel > h2,
main.container > .panel > h3,
.login-card > h2 {
  margin-bottom: 12px;
  padding-bottom: 8px;
  background-image: var(--separator-ornament);
  background-repeat: no-repeat;
  background-position: left calc(100% - 1px);
  background-size: min(210px, 58%) 1px;
}

:where(a, button, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
  box-shadow: var(--focus-ring-strong);
}

.container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}

main.container {
  padding: var(--space-main-top) 0 var(--space-main-bottom);
  position: relative;
  z-index: 1;
}

body::-webkit-scrollbar,
.chat-log::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body::-webkit-scrollbar-thumb,
.chat-log::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}

body::-webkit-scrollbar-track,
.chat-log::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.topbar {
  background: var(--topbar-bg);
  border-top: 1px solid rgba(217, 179, 116, 0.2);
  border-bottom: 1px solid var(--topbar-border);
  position: sticky;
  top: 0;
  backdrop-filter: blur(8px);
  z-index: 2;
  box-shadow: var(--topbar-shadow);
  isolation: isolate;
  overflow: hidden;
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--topbar-rivet-overlay) left calc(100% - 3px) / 28px 4px repeat-x,
    linear-gradient(180deg, rgba(244, 221, 184, 0.14), rgba(0, 0, 0, 0) 35%),
    var(--topbar-grain-overlay);
  pointer-events: none;
  opacity: 0.82;
}

.topbar::after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  background: var(--topbar-accent-line);
  position: relative;
  z-index: 1;
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--space-topbar-y) + 1px) 0 var(--space-topbar-y);
  gap: 16px;
  position: relative;
  z-index: 1;
}

.brand {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-title);
  text-shadow: var(--brand-title-glow);
  font-weight: 700;
}

.brand-link {
  display: inline-block;
  text-decoration: none;
}

.brand-link:hover .brand,
.brand-link:focus-visible .brand {
  color: var(--brand-title-hover);
  text-shadow: var(--brand-title-hover-glow);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.nav-links a {
  display: inline-block;
  padding: 7px 12px 8px;
  border-radius: 10px 10px 7px 7px;
  border: 1px solid var(--nav-link-base-border);
  background: var(--nav-link-base-bg);
  color: var(--nav-link-text);
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(38, 24, 13, 0.55), 0 0 0 1px rgba(77, 54, 31, 0.42) inset;
  transition:
    color var(--motion-fast) var(--motion-smooth),
    background-color var(--motion-base) var(--motion-cinematic),
    border-color var(--motion-base) var(--motion-cinematic),
    transform var(--motion-fast) var(--motion-smooth);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 2px;
  height: 1px;
  background: var(--nav-link-topline);
  opacity: 0.48;
  pointer-events: none;
}

.nav-links a::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: var(--hover-rune-line);
  transform: scaleX(0.15);
  transform-origin: left;
  opacity: 0;
  transition:
    transform var(--motion-base) var(--motion-cinematic),
    opacity var(--motion-fast) var(--motion-smooth);
}

.nav-links a:hover {
  color: var(--nav-link-hover-text);
  background: var(--nav-link-hover-bg);
  border-color: var(--nav-link-hover-border);
  transform: translateY(-1px);
}

.nav-links a:hover::before,
.nav-links a:focus-visible::before,
.nav-links a.active-nav::before {
  transform: scaleX(1);
  opacity: 1;
}

.nav-links a.active-nav {
  color: var(--nav-link-active-text);
  border-color: var(--nav-link-active-border);
  background: var(--nav-link-active-bg);
  box-shadow: var(--nav-link-active-inset);
  transform: translateY(-1px);
}

.panel {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-panel);
  padding: var(--space-panel-padding);
  margin-top: 18px;
  background:
    linear-gradient(180deg, rgba(240, 220, 186, 0.05), rgba(0, 0, 0, 0) 20%),
    linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(240, 220, 186, 0.04), rgba(0, 0, 0, 0)),
    var(--panel-bg);
  box-shadow:
    var(--panel-shadow),
    var(--panel-shadow-inset),
    0 0 0 1px var(--panel-frame-border);
  position: relative;
  overflow: hidden;
  contain: paint;
  transition:
    transform var(--motion-fast) var(--motion-smooth),
    box-shadow var(--motion-base) var(--motion-cinematic),
    border-color var(--motion-base) var(--motion-cinematic);
  animation: panel-enter var(--panel-enter-duration) var(--motion-cinematic);
  animation-fill-mode: both;
}

main.container > .panel:nth-of-type(2) {
  animation-delay: 36ms;
}

main.container > .panel:nth-of-type(3) {
  animation-delay: 68ms;
}

main.container > .panel:nth-of-type(4) {
  animation-delay: 98ms;
}

main.container > .panel:nth-of-type(5) {
  animation-delay: 128ms;
}

.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--panel-accent-line);
  box-shadow: 0 1px 0 rgba(242, 214, 166, 0.24);
  pointer-events: none;
}

.panel::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--panel-frame-border);
  background:
    radial-gradient(circle at 0 0, var(--panel-rivet-metal) 0 2px, var(--panel-rivet-shadow) 2px 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(circle at 100% 0, var(--panel-rivet-metal) 0 2px, var(--panel-rivet-shadow) 2px 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(circle at 0 100%, var(--panel-rivet-metal) 0 2px, var(--panel-rivet-shadow) 2px 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(circle at 100% 100%, var(--panel-rivet-metal) 0 2px, var(--panel-rivet-shadow) 2px 3px, rgba(0, 0, 0, 0) 4px),
    linear-gradient(180deg, rgba(231, 205, 154, 0.12), rgba(0, 0, 0, 0));
  opacity: 0.54;
  pointer-events: none;
}

.panel:hover {
  border-color: rgba(173, 138, 91, 0.82);
  box-shadow:
    var(--panel-hover-shadow),
    var(--panel-shadow-inset),
    0 0 0 1px var(--panel-frame-border);
  transform: translateY(-1px);
}

.panel > :last-child {
  margin-bottom: 0;
}

.panel h2,
.panel h3 {
  font-family: var(--font-heading);
  margin-top: 0;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--panel-title);
}

.panel p {
  margin: 8px 0;
}

body.no-topbar main.container {
  width: min(640px, 92vw);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 0;
}

body.no-topbar #notice {
  display: none;
}

.login-stage {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 18px;
}

.login-logo {
  font-family: var(--font-heading);
  margin: 0;
  font-size: clamp(2rem, 7vw, 3.5rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--login-logo);
  text-shadow: var(--login-logo-glow);
}

.login-card {
  width: min(440px, 100%);
  border-radius: 16px;
  padding: 24px;
  margin-top: 0;
  background: var(--login-card-bg);
  border: 1px solid var(--login-card-border);
  box-shadow:
    var(--login-card-shadow-main),
    var(--login-card-shadow-inset),
    var(--login-card-shadow-glow);
  animation: panel-enter calc(var(--panel-enter-duration) + 60ms) var(--motion-cinematic);
  animation-fill-mode: both;
}

.login-card h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

.muted {
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 16px;
}

.two-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.btn {
  border: 1px solid var(--btn-border);
  background: var(--btn-face-sheen), var(--btn-bg);
  color: var(--btn-text);
  border-radius: 9px;
  padding: 9px 14px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  text-shadow: 0 1px 0 rgba(44, 26, 13, 0.64);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--motion-fast) var(--motion-smooth),
    box-shadow var(--motion-base) var(--motion-cinematic),
    border-color var(--motion-base) var(--motion-cinematic),
    filter var(--motion-base) var(--motion-smooth);
  box-shadow: var(--btn-shadow);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 1px 1px 2px;
  border-radius: 8px;
  border: 1px solid var(--btn-carve-line);
  background: linear-gradient(180deg, rgba(250, 229, 188, 0.12), rgba(0, 0, 0, 0) 40%);
  pointer-events: none;
  z-index: 0;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hover-rune-wash);
  transform: translateX(-130%);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition:
    transform var(--motion-slow) var(--motion-cinematic),
    opacity var(--motion-base) var(--motion-smooth);
  z-index: 1;
}

.btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: var(--btn-hover-shadow);
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(125%);
  opacity: 1;
}

.btn:active {
  transform: translateY(0);
  box-shadow: var(--btn-press-shadow);
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  filter: saturate(0.75);
}

.btn-secondary {
  background: var(--btn-face-sheen), var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  box-shadow: var(--btn-secondary-shadow);
}

.btn-danger {
  background: var(--btn-danger-tint), var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  box-shadow: var(--btn-danger-shadow);
}

.btn-success {
  background: var(--btn-success-tint), var(--btn-success-bg);
  border-color: var(--btn-success-border);
  box-shadow: var(--btn-success-shadow);
}

.btn-small {
  padding: 6px 9px;
}

.action-row .btn {
  min-height: 34px;
}

.action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-row.delete-confirm-active .toggle-equip-btn {
  display: none;
}

.delete-confirm-actions {
  display: inline-flex;
  gap: 8px;
}

.space-between {
  justify-content: space-between;
  align-items: center;
}

.notice {
  margin-top: 16px;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--notice-border);
}

.notice.success {
  background: var(--notice-success-bg);
  border-color: var(--notice-success-border);
}

.notice.error {
  background: var(--notice-error-bg);
  border-color: var(--notice-error-border);
}

.hidden {
  display: none;
}

.form-grid {
  display: grid;
  gap: 10px;
}

.chat-image-form {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.chat-image-field {
  flex: 1;
  min-width: 0;
}

.chat-image-form .btn {
  white-space: nowrap;
}

label {
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--label-text);
}

input,
select,
textarea {
  width: 100%;
  background: linear-gradient(180deg, rgba(241, 218, 179, 0.05), rgba(0, 0, 0, 0) 26%), var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 10px;
  box-shadow: var(--control-groove-shadow);
  caret-color: var(--metal-gold-soft);
  transition:
    border-color var(--motion-fast) var(--motion-smooth),
    box-shadow var(--motion-fast) var(--motion-smooth),
    background-color var(--motion-fast) var(--motion-smooth);
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--control-hover-border);
  background: var(--control-hover-bg);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--control-focus-border);
  box-shadow: var(--control-focus-ring), var(--control-focus-glint);
}

textarea {
  resize: vertical;
  min-height: 86px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--table-border);
  padding: 12px 0;
}

.stat-row:last-child {
  border-bottom: 0;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

th,
td {
  border-bottom: 1px solid var(--table-cell-border-soft);
  padding: 10px 8px;
  text-align: left;
  font-size: 0.95rem;
}

th {
  color: var(--table-header-text);
  background:
    linear-gradient(180deg, rgba(245, 221, 176, 0.12), rgba(0, 0, 0, 0) 40%),
    var(--table-header-bg);
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: inset 0 1px 0 var(--table-header-topline);
}

tbody tr:nth-child(even) td {
  background: var(--table-row-even-bg);
}

tbody tr:hover td {
  background: var(--table-row-hover-bg);
  box-shadow: var(--table-row-hover-inset);
}

.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
}

.sort-header-btn {
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sort-header-btn:hover {
  color: var(--sort-hover-text);
}

.sort-header-btn.active-sort {
  color: var(--sort-active-text);
}

.sort-header-btn:focus-visible,
.quest-star-btn:focus-visible,
.chat-board-mode:focus-visible,
.chat-board-inline input[type="color"]:focus-visible,
.chat-board-inline input[type="range"]:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
  border-radius: 7px;
}

.sort-indicator {
  min-width: 10px;
  font-size: 0.8rem;
  line-height: 1;
}

.inventory-search-row {
  display: flex;
  justify-content: flex-end;
  margin: 12px 0 14px;
}

.inventory-search-controls {
  display: flex;
  align-items: center;
}

.inventory-search-controls input {
  width: min(440px, 100%);
}

.small-text {
  font-size: var(--font-size-small);
}

.profile-photo-panel {
  margin-bottom: 18px;
}

.profile-photo-content {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.profile-photo-preview {
  width: 108px;
  height: 108px;
  border-radius: 999px;
  border: 2px solid var(--profile-preview-border);
  background: var(--profile-preview-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--profile-preview-shadow);
}

.profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-preview span {
  font-size: 2rem;
  font-weight: 800;
  color: var(--profile-preview-fallback);
}

.profile-photo-form {
  display: grid;
  gap: 8px;
  min-width: min(380px, 100%);
}

.avatar-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modal-fade-in var(--motion-base) var(--motion-cinematic);
}

.avatar-crop-modal.hidden {
  display: none;
}

.avatar-crop-backdrop {
  position: absolute;
  inset: 0;
  background:
    var(--modal-backdrop-atmosphere),
    var(--modal-backdrop);
  backdrop-filter: blur(3px);
}

.avatar-crop-dialog {
  position: relative;
  width: min(94vw, 420px);
  background: var(--modal-dialog-bg);
  border: 1px solid var(--modal-dialog-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow:
    var(--modal-dialog-shadow),
    var(--modal-dialog-ambient);
  animation: modal-rise-in var(--motion-slow) var(--motion-cinematic);
}

.avatar-crop-dialog:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
}

.avatar-crop-stage-wrap {
  margin: 10px 0 12px;
  display: flex;
  justify-content: center;
}

.avatar-crop-canvas {
  width: min(320px, 100%);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid var(--modal-canvas-border);
  background: var(--modal-canvas-bg);
  cursor: grab;
  touch-action: none;
}

.avatar-crop-canvas.dragging {
  cursor: grabbing;
}

.major-stat .stat-name {
  color: var(--major-stat-text);
}

.minor-stat .stat-name {
  color: var(--minor-stat-text);
}

.admin-major-stat-line {
  font-weight: 700;
  color: var(--admin-major-line);
}

.admin-major-stat-value {
  color: var(--admin-major-value);
  text-shadow: var(--admin-major-value-glow);
}

.admin-detail-stats tr.major-stat .admin-stat-label {
  color: var(--admin-major-label);
  font-weight: 800;
  text-shadow: var(--admin-major-label-glow);
}

.admin-detail-stats tr.major-stat td {
  font-weight: 700;
  color: var(--admin-major-row-text);
}

.admin-detail-stats tr.minor-stat .admin-stat-label {
  color: var(--admin-minor-label);
  font-weight: 600;
}

.admin-character-id-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-character-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--admin-avatar-border);
  background: var(--admin-avatar-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.admin-character-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-character-avatar-fallback {
  color: var(--admin-avatar-fallback);
  font-size: 0.92rem;
  font-weight: 700;
}

.buff-builder {
  display: grid;
  gap: 10px;
  border: 1px solid var(--buff-builder-border);
  border-radius: 10px;
  padding: 12px;
  background: var(--buff-builder-bg);
}

.buff-builder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.buff-rows {
  display: grid;
  gap: 8px;
}

.buff-row {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  gap: 8px;
  align-items: center;
}

.rarity-neon {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.rarity-neon.rarity-gri {
  color: var(--rarity-gri);
  text-shadow: var(--rarity-gri-glow);
}

.rarity-neon.rarity-yesil {
  color: var(--rarity-yesil);
  text-shadow: var(--rarity-yesil-glow);
}

.rarity-neon.rarity-mavi {
  color: var(--rarity-mavi);
  text-shadow: var(--rarity-mavi-glow);
}

.rarity-neon.rarity-mor {
  color: var(--rarity-mor);
  text-shadow: var(--rarity-mor-glow);
}

.rarity-neon.rarity-sari-legendary {
  color: var(--rarity-sari);
  text-shadow: var(--rarity-sari-glow);
}

.rarity-neon.rarity-kirmizi-unique {
  color: var(--rarity-kirmizi);
  text-shadow: var(--rarity-kirmizi-glow);
}

.rarity-neon.rarity-myth-mitik {
  color: var(--rarity-myth);
  text-shadow: var(--rarity-myth-glow);
}

.chat-log {
  height: 420px;
  overflow-y: auto;
  border: 1px solid var(--chat-log-border);
  border-radius: 10px;
  background: var(--chat-log-bg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  scroll-behavior: smooth;
}

.chat-log.is-dragover {
  border-color: var(--chat-log-drag-border);
  box-shadow: var(--chat-log-drag-ring);
  background: var(--chat-log-drag-bg);
}

.chat-log.is-uploading {
  opacity: 0.9;
}

.chat-item {
  border: 1px solid var(--chat-item-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--chat-item-bg);
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  transition:
    border-color var(--motion-base) var(--motion-cinematic),
    transform var(--motion-fast) var(--motion-smooth),
    box-shadow var(--motion-base) var(--motion-cinematic);
}

.chat-item:hover {
  border-color: var(--chat-item-hover-border);
  transform: translateY(-1px);
}

.chat-item.roll {
  border-color: var(--chat-roll-border);
  background: var(--chat-roll-bg);
}

.chat-item.image {
  border-color: var(--chat-image-border);
  background: var(--chat-image-bg);
}

.chat-item.system {
  border-color: var(--chat-system-border);
  background: var(--chat-system-bg);
}

.chat-item.role-dm {
  border-color: var(--chat-role-dm-border);
  background: var(--chat-role-dm-bg);
  color: var(--chat-role-dm-text);
}

.chat-item.role-admin {
  border-color: var(--chat-role-admin-border);
  background: var(--chat-role-admin-bg);
  color: var(--chat-role-admin-text);
}

.chat-item.role-player {
  border-color: var(--chat-role-player-border);
  background: var(--chat-role-player-bg);
  color: var(--chat-role-player-text);
}

.chat-item.role-dm .chat-item-author,
.chat-item.role-admin .chat-item-author,
.chat-item.role-player .chat-item-author {
  color: inherit;
}

.chat-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--muted);
}

.chat-item-head-left {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 0;
}

.chat-item-time {
  margin-left: auto;
  white-space: nowrap;
  flex: 0 0 auto;
}

.chat-item-author-block {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.chat-item-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--chat-avatar-border);
  background: var(--chat-avatar-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.chat-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chat-item-avatar-fallback {
  color: var(--chat-avatar-fallback);
  font-size: 0.9rem;
  font-weight: 700;
}

.chat-item-author {
  font-weight: 700;
  color: var(--chat-author-text);
}

.chat-item-titles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-title-badge {
  display: inline-block;
  padding: 0;
  font-size: 0.72rem;
  line-height: 1.25;
  text-shadow: 0 0 6px currentColor, 0 0 14px rgba(255, 255, 255, 0.12);
}

.chat-title-badge.rarity-gri {
  color: var(--rarity-gri);
  text-shadow: var(--rarity-gri-glow);
}

.chat-title-badge.rarity-yesil {
  color: var(--rarity-yesil);
  text-shadow: var(--rarity-yesil-glow);
}

.chat-title-badge.rarity-mavi {
  color: var(--rarity-mavi);
  text-shadow: var(--rarity-mavi-glow);
}

.chat-title-badge.rarity-mor {
  color: var(--rarity-mor);
  text-shadow: var(--rarity-mor-glow);
}

.chat-title-badge.rarity-sari-legendary {
  color: var(--rarity-sari);
  text-shadow: var(--rarity-sari-glow);
}

.chat-title-badge.rarity-kirmizi-unique {
  color: var(--rarity-kirmizi);
  text-shadow: var(--rarity-kirmizi-glow);
}

.chat-title-badge.rarity-myth-mitik {
  color: var(--rarity-myth);
  text-shadow: var(--rarity-myth-glow);
}

.chat-item-message {
  display: block;
  width: 100%;
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.chat-item-image-wrap {
  margin-top: 6px;
}

.chat-item-image {
  width: min(100%, 340px);
  max-height: 340px;
  object-fit: cover;
  border: 1px solid var(--chat-image-frame-border);
  border-radius: 10px;
  display: block;
}

.chat-item-image-wrap a:focus-visible .chat-item-image {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.chat-board-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.chat-board-mode.is-active {
  box-shadow: var(--chat-board-mode-active);
}

.chat-board-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--chat-board-inline-text);
  font-size: 0.88rem;
}

.chat-board-inline input[type="color"] {
  width: 40px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--chat-board-color-border);
  background: var(--chat-board-color-bg);
}

.chat-board-inline input[type="range"] {
  width: 140px;
}

.chat-board-size-value {
  display: inline-block;
  min-width: 24px;
  text-align: right;
  color: var(--chat-board-size-text);
  font-weight: 600;
}

.chat-board-stage {
  margin-top: 12px;
  border: 1px solid var(--chat-board-stage-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--chat-board-stage-bg);
  position: relative;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.chat-board-stage.is-dragover {
  border-color: var(--chat-board-stage-drag-border);
  box-shadow: var(--chat-board-stage-drag-ring);
  background: var(--chat-board-stage-drag-bg);
}

.chat-board-stage.is-uploading {
  opacity: 0.88;
}

#chatBoardCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  background: var(--chat-board-canvas-bg);
  border: 1px solid var(--chat-board-canvas-border);
  border-radius: 10px;
  touch-action: none;
  cursor: crosshair;
}

#chatBoardCanvas.is-mouse-mode {
  cursor: default;
}

#chatBoardCanvas.is-mouse-mode.has-editable-image {
  cursor: grab;
}

#chatBoardCanvas.is-mouse-mode.has-editable-image.is-dragging-image {
  cursor: grabbing;
}

.chat-board-drop-hint {
  margin-top: 8px;
  color: var(--chat-board-hint);
  font-size: 0.84rem;
}

.stat-card {
  border-color: rgba(146, 115, 73, 0.62);
  background: linear-gradient(180deg, rgba(60, 52, 40, 0.92), rgba(44, 38, 30, 0.95));
}

.faction-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.faction-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.faction-quest-panel {
  margin-top: 16px;
}

.faction-grid-loading {
  opacity: 0.7;
  pointer-events: none;
}

.faction-empty {
  border: 1px dashed rgba(157, 123, 83, 0.5);
  border-radius: 12px;
  padding: 14px;
  color: var(--muted);
  background: rgba(54, 40, 28, 0.45);
}

.faction-card {
  border: 1px solid rgba(143, 112, 75, 0.52);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(65, 47, 31, 0.93) 0%, rgba(43, 31, 22, 0.96) 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(16, 11, 7, 0.42);
}

.faction-card-media {
  flex: 0 0 auto;
  padding: 8px;
  border-bottom: 1px solid rgba(157, 122, 82, 0.38);
  background: rgba(34, 24, 16, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.faction-card-media img {
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  transition: filter 140ms ease;
}

.faction-card-media-clickable {
  cursor: pointer;
}

.faction-card-media-clickable:hover,
.faction-card-media-clickable:focus-visible {
  border-color: rgba(233, 203, 150, 0.78);
  box-shadow: inset 0 0 0 1px rgba(233, 203, 150, 0.42),
              inset 0 0 14px rgba(180, 132, 72, 0.35),
              0 0 14px rgba(180, 132, 72, 0.3);
  background: rgba(54, 40, 24, 0.9);
}

.faction-card-media-clickable:hover img,
.faction-card-media-clickable:focus-visible img {
  filter: drop-shadow(0 0 8px rgba(223, 185, 122, 0.42));
}

.faction-card-content {
  flex: 1;
  padding: 9px 10px 10px;
  display: grid;
  align-content: start;
  gap: 6px;
}

.faction-card-title {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--panel-title);
}

.faction-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(150, 121, 84, 0.38);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 0.82rem;
  background: rgba(42, 31, 22, 0.72);
}

.faction-metric strong {
  color: #f1e5cc;
}

.faction-edit-grid {
  display: grid;
  gap: 5px;
}

.faction-edit-grid label {
  font-size: 0.78rem;
  color: #dac8aa;
  gap: 4px;
}

.faction-edit-grid input {
  padding: 5px 8px;
  font-size: 0.84rem;
}

.faction-open-btn {
  width: 100%;
}

.quest-sections {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

.quest-section {
  border: 1px solid rgba(146, 115, 76, 0.42);
  border-radius: 12px;
  padding: 10px;
  background: rgba(43, 31, 22, 0.5);
}

.quest-section-title {
  margin: 0 0 10px;
  color: #f1e4cb;
  letter-spacing: 0.02em;
}

.quest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.quest-card {
  border: 1px solid rgba(149, 116, 76, 0.42);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(62, 45, 30, 0.93) 0%, rgba(39, 28, 19, 0.97) 100%);
  padding: 10px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 22px rgba(16, 10, 6, 0.34);
}

.faction-card,
.quest-card {
  content-visibility: auto;
  contain-intrinsic-size: 240px;
}

.quest-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.quest-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quest-node-name {
  color: #f1dfbe;
  font-weight: 600;
}

.quest-status-badge {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.72rem;
  border: 1px solid rgba(165, 132, 91, 0.55);
  background: rgba(95, 70, 41, 0.48);
  color: #f4e8d1;
}

.quest-status-active {
  border-color: rgba(86, 203, 135, 0.65);
  background: rgba(39, 107, 63, 0.35);
}

.quest-status-completed {
  border-color: rgba(157, 177, 98, 0.6);
  background: rgba(67, 89, 44, 0.35);
}

.quest-status-not-started {
  border-color: rgba(255, 202, 122, 0.6);
  background: rgba(112, 73, 22, 0.38);
}

.quest-hidden-tag {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.72rem;
  border: 1px solid rgba(255, 141, 141, 0.65);
  background: rgba(113, 34, 34, 0.38);
  color: #ffd8d8;
}

.quest-deleted-tag {
  border-color: rgba(166, 136, 106, 0.62);
  background: rgba(77, 56, 41, 0.34);
  color: #eadac6;
}

.quest-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid rgba(148, 119, 82, 0.35);
  border-radius: 8px;
  overflow: hidden;
}

.quest-table th,
.quest-table td {
  border-bottom: 1px solid rgba(140, 111, 76, 0.3);
  padding: 7px 8px;
  vertical-align: top;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.quest-table tr:last-child th,
.quest-table tr:last-child td {
  border-bottom: 0;
}

.quest-table th {
  width: 36%;
  color: #ead9ba;
  background: rgba(75, 56, 37, 0.68);
}

.quest-table td {
  color: #f1e4cc;
  background: rgba(47, 35, 24, 0.72);
}

.quest-card-bottom {
  margin-top: auto;
  display: grid;
  gap: 8px;
}

.quest-active-text {
  border: 1px dashed rgba(166, 133, 95, 0.5);
  border-radius: 8px;
  padding: 7px 8px;
  color: #e8d7b8;
  background: rgba(78, 58, 40, 0.4);
  font-size: 0.84rem;
}

.quest-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.quest-result-badge {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.76rem;
  border: 1px solid rgba(159, 127, 88, 0.55);
  color: #f2e6cf;
}

.quest-result-success {
  border-color: rgba(86, 203, 135, 0.65);
  background: rgba(38, 111, 67, 0.36);
}

.quest-result-failure {
  border-color: rgba(232, 91, 91, 0.68);
  background: rgba(118, 43, 43, 0.38);
}

.quest-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.quest-star-btn,
.quest-star-view {
  border: 0;
  background: transparent;
  color: rgba(172, 187, 214, 0.82);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0;
}

.quest-star-btn {
  cursor: pointer;
}

.quest-star-btn.is-active,
.quest-star-view.is-active {
  color: #ffd46f;
  text-shadow: 0 0 8px rgba(255, 210, 110, 0.45);
}

.quest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quest-card .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.quest-edit-form {
  display: grid;
  gap: 8px;
  border: 1px dashed rgba(153, 125, 90, 0.4);
  border-radius: 10px;
  padding: 8px;
  background: rgba(54, 40, 27, 0.62);
  max-width: 100%;
}

.quest-edit-form > * {
  min-width: 0;
}

.quest-edit-form input,
.quest-edit-form textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.quest-create-form {
  display: grid;
  gap: 10px;
}

.quest-form-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Phase 4 - Dashboard Hero Dressing */
.page-index section.panel,
.page-index article.panel {
  border-color: rgba(144, 113, 72, 0.8);
  box-shadow:
    0 0 0 1px rgba(78, 58, 35, 0.55) inset,
    0 14px 30px rgba(13, 10, 7, 0.5),
    0 0 0 1px rgba(200, 165, 103, 0.24);
  background:
    radial-gradient(circle at 50% -14px, rgba(230, 203, 146, 0.46) 0 18px, rgba(0, 0, 0, 0) 19px),
    linear-gradient(180deg, rgba(222, 198, 146, 0.3), rgba(0, 0, 0, 0)) left 12px top 12px / 2px calc(100% - 24px) no-repeat,
    linear-gradient(180deg, rgba(222, 198, 146, 0.3), rgba(0, 0, 0, 0)) right 12px top 12px / 2px calc(100% - 24px) no-repeat,
    linear-gradient(90deg, rgba(222, 198, 146, 0.12), rgba(0, 0, 0, 0), rgba(222, 198, 146, 0.12)) center 8px / calc(100% - 68px) 1px no-repeat,
    var(--panel-bg);
  isolation: isolate;
}

.page-index section.panel::before,
.page-index article.panel::before {
  height: 4px;
  background: linear-gradient(90deg, rgba(200, 145, 72, 0.34), rgba(235, 207, 150, 0.88), rgba(200, 145, 72, 0.34));
}

.page-index section.panel::after,
.page-index article.panel::after {
  inset: 6px;
  border-color: rgba(162, 128, 82, 0.34);
  background:
    radial-gradient(circle at 50% 0, rgba(228, 201, 151, 0.86) 0 3px, rgba(0, 0, 0, 0) 4px),
    radial-gradient(circle at 0 50%, rgba(224, 198, 145, 0.56) 0 2px, rgba(0, 0, 0, 0) 3px),
    radial-gradient(circle at 100% 50%, rgba(224, 198, 145, 0.56) 0 2px, rgba(0, 0, 0, 0) 3px),
    url("../img/floral-vine-pattern.svg") left -70px top -72px / 160px 160px no-repeat,
    url("../img/floral-vine-pattern.svg") right -70px bottom -72px / 160px 160px no-repeat;
  opacity: 0.6;
}

.page-index section.panel h2,
.page-index section.panel h3,
.page-index article.panel h2,
.page-index article.panel h3 {
  position: relative;
  display: inline-block;
  padding: 0 30px;
}

.page-index section.panel h2::before,
.page-index section.panel h2::after,
.page-index section.panel h3::before,
.page-index section.panel h3::after,
.page-index article.panel h2::before,
.page-index article.panel h2::after,
.page-index article.panel h3::before,
.page-index article.panel h3::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 10px;
  border-top: 1px solid rgba(218, 188, 133, 0.72);
  border-bottom: 1px solid rgba(218, 188, 133, 0.42);
  transform: translateY(-50%);
  opacity: 0.86;
}

.page-index section.panel h2::before,
.page-index section.panel h3::before,
.page-index article.panel h2::before,
.page-index article.panel h3::before {
  left: 0;
}

.page-index section.panel h2::after,
.page-index section.panel h3::after,
.page-index article.panel h2::after,
.page-index article.panel h3::after {
  right: 0;
}

.page-index section.panel:first-of-type {
  position: relative;
  background:
    var(--dashboard-hero-haze),
    radial-gradient(520px 180px at 8% 0%, rgba(214, 162, 74, 0.16), transparent 72%),
    var(--panel-bg);
  padding-top: clamp(20px, 2.1vw, 28px);
  padding-bottom: clamp(12px, 1.4vw, 18px);
}

.page-index section.panel:first-of-type::before {
  height: 5px;
  background: linear-gradient(90deg, rgba(212, 156, 80, 0.24), rgba(240, 214, 162, 0.94), rgba(212, 156, 80, 0.24));
}

.page-index section.panel:first-of-type::after {
  inset: 7px;
  background:
    var(--dashboard-hero-crest) center 3px / 48px 12px no-repeat,
    var(--dashboard-hero-rail) left 12px top 18px / 2px calc(100% - 34px) no-repeat,
    var(--dashboard-hero-rail) right 12px top 18px / 2px calc(100% - 34px) no-repeat,
    linear-gradient(180deg, rgba(240, 216, 168, 0.12), rgba(0, 0, 0, 0) 34%),
    radial-gradient(circle at 0 100%, rgba(224, 198, 145, 0.56) 0 2px, rgba(0, 0, 0, 0) 3px),
    radial-gradient(circle at 100% 100%, rgba(224, 198, 145, 0.56) 0 2px, rgba(0, 0, 0, 0) 3px);
  opacity: 0.68;
}

.page-index section.panel:first-of-type h2 {
  letter-spacing: 0.08em;
  text-shadow: 0 0 14px rgba(214, 162, 74, 0.3);
}

.page-index section.panel:first-of-type h2::before,
.page-index section.panel:first-of-type h2::after {
  width: 24px;
}

.page-index section.panel:first-of-type p strong {
  color: #f4d89c;
}

.page-index .profile-photo-panel {
  border-color: rgba(146, 115, 73, 0.74);
  background:
    radial-gradient(380px 140px at 15% -10%, rgba(193, 150, 84, 0.2), transparent 72%),
    linear-gradient(180deg, rgba(214, 183, 129, 0.12), rgba(0, 0, 0, 0)) center 9px / calc(100% - 72px) 1px no-repeat,
    var(--panel-bg);
  padding-top: calc(var(--space-panel-padding) + 2px);
}

.page-index .profile-photo-panel::after {
  content: "";
  position: absolute;
  inset: auto 18px 14px 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(214, 162, 74, 0.1), rgba(214, 162, 74, 0.48), rgba(162, 112, 66, 0.14));
  pointer-events: none;
}

.page-index .profile-photo-panel .profile-photo-content {
  gap: clamp(14px, 1.4vw, 20px);
}

.page-index .stat-card {
  border-color: rgba(146, 115, 73, 0.74);
  background:
    linear-gradient(180deg, rgba(66, 63, 50, 0.95) 0%, rgba(49, 46, 37, 0.97) 100%),
    repeating-linear-gradient(90deg, rgba(235, 214, 175, 0.04) 0 1px, rgba(0, 0, 0, 0) 1px 12px),
    repeating-linear-gradient(0deg, rgba(235, 214, 175, 0.03) 0 2px, rgba(0, 0, 0, 0) 2px 14px);
  align-content: start;
  gap: 8px;
}

.page-index .stat-card h3 {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.page-index .stat-card .action-row .btn {
  min-width: 130px;
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  text-align: center;
  padding-inline: 10px;
  letter-spacing: 0.062em;
}

.page-index .stat-card .action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--dashboard-action-gap);
  align-items: stretch;
  margin-top: 4px;
}

.page-login .login-stage {
  gap: 22px;
}

.page-login .login-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.page-login .login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(130deg, rgba(214, 162, 74, 0.035) 0 2px, rgba(0, 0, 0, 0) 2px 10px),
    radial-gradient(380px 160px at 88% -10%, rgba(166, 117, 67, 0.16), transparent 72%);
  pointer-events: none;
}

.page-login .login-card h2 {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-character #characterStatsTable,
.page-inventory #equippedItemsTable,
.page-inventory #inventoryTable,
.page-titles #equippedTitleTable,
.page-titles #titlesTable,
.page-titles #temporaryTitlesTable {
  border: 1px solid rgba(146, 120, 86, 0.52);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(43, 34, 25, 0.58);
}

.page-character #characterStatsTable thead th,
.page-inventory #equippedItemsTable thead th,
.page-inventory #inventoryTable thead th,
.page-titles #equippedTitleTable thead th,
.page-titles #titlesTable thead th,
.page-titles #temporaryTitlesTable thead th {
  background: rgba(88, 68, 47, 0.62);
  border-bottom-color: rgba(170, 141, 102, 0.34);
}

.page-character #characterStatsTable tbody tr.major-stat td {
  background: rgba(78, 30, 35, 0.44);
  color: #ffc3c9;
  text-shadow: 0 0 6px rgba(255, 118, 128, 0.36);
}

.page-character #characterStatsTable tbody tr.minor-stat td {
  background: rgba(55, 43, 30, 0.4);
}

.page-inventory .inventory-search-controls input {
  border-radius: 999px;
  padding-inline: 14px;
}

.page-inventory .buff-builder,
.page-titles .buff-builder {
  border-style: solid;
  border-color: rgba(149, 122, 90, 0.46);
  background: rgba(49, 38, 28, 0.68);
}

.page-chat .chat-log {
  background-image:
    linear-gradient(180deg, rgba(214, 162, 74, 0.06), rgba(0, 0, 0, 0)),
    repeating-linear-gradient(0deg, rgba(242, 236, 223, 0.025) 0 1px, rgba(0, 0, 0, 0) 1px 24px);
}

.page-chat .chat-item {
  border-left-width: 3px;
}

.page-chat .chat-item.role-admin {
  box-shadow: 0 0 0 1px rgba(214, 162, 74, 0.16) inset;
}

.page-chat .chat-item.role-player {
  box-shadow: 0 0 0 1px rgba(168, 126, 81, 0.18) inset;
}

.page-chat .chat-board-stage {
  box-shadow: 0 10px 22px rgba(7, 12, 10, 0.34), 0 0 0 1px rgba(214, 162, 74, 0.12) inset;
}

.page-chat #chatBoardCanvas {
  background: #f2e7d1;
}

.page-admin_characters .admin-character-avatar {
  width: 46px;
  height: 46px;
  box-shadow: 0 0 0 2px rgba(214, 162, 74, 0.18), 0 6px 14px rgba(11, 19, 15, 0.34);
}

.page-admin_characters .admin-major-stat-line {
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(108, 44, 44, 0.24);
}

.page-admin_characters .admin-detail-stats tr.major-stat td {
  background: rgba(84, 29, 34, 0.5);
  color: #ffd2d7;
  text-shadow: 0 0 6px rgba(255, 116, 126, 0.32);
}

.page-admin_characters .admin-detail-stats tr.major-stat .admin-stat-label {
  color: #ff9aa3;
  text-shadow: 0 0 6px rgba(255, 115, 126, 0.44);
}

.page-factions .faction-empty {
  border-color: rgba(128, 146, 126, 0.48);
  background: rgba(26, 40, 34, 0.52);
}

.page-factions .faction-card {
  border-color: rgba(122, 138, 115, 0.5);
  background: linear-gradient(180deg, rgba(43, 61, 53, 0.94) 0%, rgba(30, 43, 37, 0.97) 100%);
  box-shadow: 0 9px 20px rgba(8, 13, 10, 0.34);
}

.page-factions .faction-card-media {
  border-bottom-color: rgba(136, 150, 123, 0.42);
  background: rgba(20, 31, 27, 0.72);
}

.page-factions .faction-card-title,
.page-factions .faction-metric strong {
  color: var(--panel-title);
}

.page-factions .faction-metric {
  border-color: rgba(131, 149, 124, 0.42);
  background: rgba(27, 41, 35, 0.72);
}

.page-quests .quest-section {
  border-color: rgba(126, 142, 124, 0.42);
  background: rgba(22, 34, 29, 0.58);
}

.page-quests .quest-card {
  border-color: rgba(126, 142, 124, 0.45);
  background: linear-gradient(180deg, rgba(40, 56, 49, 0.95) 0%, rgba(27, 39, 34, 0.97) 100%);
  box-shadow: 0 10px 22px rgba(8, 12, 10, 0.33);
}

.page-quests .quest-node-name,
.page-quests .quest-table td,
.page-quests .quest-section-title {
  color: var(--panel-title);
}

.page-quests .quest-table,
.page-quests .quest-table th,
.page-quests .quest-table td {
  border-color: rgba(125, 142, 120, 0.34);
}

.page-quests .quest-table th {
  background: rgba(57, 74, 62, 0.68);
}

.page-quests .quest-table td {
  background: rgba(28, 42, 36, 0.74);
}

/* Phase 5 - Page Deepening */
.page-login .login-logo {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 3px 16px rgba(26, 19, 10, 0.5), 0 0 20px rgba(214, 162, 74, 0.24);
}

.page-login .login-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(174, 138, 88, 0.3);
  border-radius: 14px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(217, 178, 118, 0.16), rgba(0, 0, 0, 0), rgba(217, 178, 118, 0.16)) center top / calc(100% - 64px) 1px no-repeat;
  opacity: 0.72;
}

.page-login .login-card .form-grid {
  position: relative;
  z-index: 1;
  gap: 12px;
}

.page-login .login-card .btn {
  justify-self: stretch;
}

.page-character .panel:first-of-type .action-row.space-between {
  align-items: flex-start;
  gap: 14px;
}

.page-character .panel:first-of-type .action-row > .action-row {
  justify-content: flex-end;
}

.page-character #characterStatsTable tbody tr.major-stat td:first-child {
  box-shadow: inset 3px 0 0 rgba(171, 84, 73, 0.46);
}

.page-character #characterStatsTable tbody tr.minor-stat td:first-child {
  box-shadow: inset 3px 0 0 rgba(183, 146, 93, 0.38);
}

.page-inventory .inventory-search-row {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(172, 137, 92, 0.34);
}

.page-inventory .inventory-search-controls input {
  border-color: rgba(176, 141, 95, 0.56);
  background:
    linear-gradient(180deg, rgba(239, 224, 195, 0.07), rgba(0, 0, 0, 0)),
    rgba(44, 34, 24, 0.72);
}

.page-inventory .sort-header-btn {
  font-weight: 600;
  letter-spacing: 0.035em;
}

.page-inventory #inventoryTable tbody td:nth-child(2),
.page-inventory #equippedItemsTable tbody td:nth-child(2),
.page-titles #titlesTable tbody td:first-child,
.page-titles #equippedTitleTable tbody td:first-child,
.page-titles #temporaryTitlesTable tbody td:first-child {
  color: var(--panel-title);
  letter-spacing: 0.02em;
}

.page-inventory .buff-builder-header strong,
.page-titles .buff-builder-header strong {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--panel-title);
}

.page-titles #temporaryTitlesTable tbody td {
  background: rgba(50, 40, 28, 0.72);
}

.page-chat .chat-item {
  position: relative;
  overflow: visible;
  background-image:
    linear-gradient(90deg, rgba(229, 198, 144, 0.08), rgba(0, 0, 0, 0) 40%),
    linear-gradient(180deg, rgba(239, 225, 195, 0.03), rgba(0, 0, 0, 0));
}

.page-chat .chat-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: rgba(191, 151, 98, 0.5);
  pointer-events: none;
}

.page-chat .chat-item.role-dm::before {
  background: rgba(223, 181, 105, 0.62);
}

.page-chat .chat-item.role-admin::before {
  background: rgba(228, 148, 107, 0.6);
}

.page-chat .chat-item.role-player::before {
  background: rgba(171, 127, 82, 0.52);
}

.page-chat .chat-board-toolbar {
  border: 1px solid rgba(165, 131, 86, 0.4);
  border-radius: 12px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(235, 210, 168, 0.08), rgba(0, 0, 0, 0)),
    rgba(49, 38, 27, 0.64);
}

.page-chat .chat-board-drop-hint {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(168, 132, 86, 0.4);
}

.page-admin_characters section.panel h3 {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page-admin_characters .admin-character-id-wrap {
  padding: 3px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(238, 210, 156, 0.32), rgba(0, 0, 0, 0) 58%),
    rgba(63, 45, 29, 0.62);
  box-shadow: inset 0 0 0 1px rgba(178, 139, 90, 0.36);
}

.page-admin_characters .admin-detail-stats tr.minor-stat td {
  background: rgba(66, 52, 36, 0.36);
}

.page-admin_characters .admin-inspect-cell {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

.page-admin_characters .admin-inspect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  max-width: 100%;
}

.page-factions .faction-empty {
  border-color: rgba(160, 132, 92, 0.44);
  background:
    radial-gradient(300px 110px at 50% -20%, rgba(222, 186, 128, 0.16), rgba(0, 0, 0, 0) 72%),
    rgba(41, 31, 23, 0.62);
}

.page-factions .faction-card {
  position: relative;
  border-color: rgba(148, 116, 78, 0.56);
  background: linear-gradient(180deg, rgba(66, 49, 33, 0.95) 0%, rgba(42, 31, 22, 0.97) 100%);
  box-shadow: 0 10px 24px rgba(13, 9, 6, 0.42);
}

.page-factions .faction-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(220, 186, 128, 0.2), rgba(0, 0, 0, 0), rgba(220, 186, 128, 0.2)) center 8px / calc(100% - 36px) 1px no-repeat;
}

.page-factions .faction-card-media {
  border-bottom-color: rgba(160, 126, 87, 0.44);
  background: rgba(33, 24, 17, 0.78);
}

.page-factions .faction-card-title {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.86rem;
}

.page-factions .faction-metric {
  border-color: rgba(154, 122, 84, 0.42);
  background: rgba(45, 33, 24, 0.78);
}

.page-quests .quest-section {
  border-color: rgba(151, 121, 84, 0.42);
  background:
    linear-gradient(180deg, rgba(233, 205, 153, 0.08), rgba(0, 0, 0, 0)),
    rgba(35, 27, 20, 0.66);
}

.page-quests .quest-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(152, 120, 81, 0.5);
  background: linear-gradient(180deg, rgba(67, 49, 33, 0.95) 0%, rgba(43, 31, 22, 0.98) 100%);
  box-shadow: 0 12px 25px rgba(12, 9, 6, 0.4);
}

.page-quests .quest-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(224, 192, 134, 0.12), rgba(0, 0, 0, 0) 36%),
    linear-gradient(90deg, rgba(225, 192, 132, 0.14), rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 72%, rgba(225, 192, 132, 0.14));
}

.page-quests .quest-section-title {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-quests .quest-status-badge {
  background: rgba(97, 70, 42, 0.5);
}

.page-quests .quest-actions .btn {
  flex: 1 1 130px;
}

.page-quests .quest-result-row {
  border-top: 1px dashed rgba(163, 130, 90, 0.4);
  padding-top: 8px;
}

.page-quests .quest-star-btn,
.page-quests .quest-star-view {
  color: rgba(190, 157, 96, 0.82);
}

.page-quests .quest-star-btn.is-active,
.page-quests .quest-star-view.is-active {
  color: #ffd577;
}

@keyframes panel-enter {
  from {
    opacity: 0;
    transform: translateY(var(--panel-enter-offset)) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-rise-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 820px) {
  .two-cols {
    grid-template-columns: 1fr;
  }

  .topbar {
    backdrop-filter: none;
    box-shadow: 0 6px 12px rgba(14, 11, 8, 0.34);
  }

  .topbar-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-links {
    width: 100%;
  }

  .nav-links a {
    flex: 1 1 auto;
    text-align: center;
  }

  .buff-row {
    grid-template-columns: 1fr;
  }

  .chat-form {
    grid-template-columns: 1fr;
  }

  .chat-board-toolbar {
    align-items: stretch;
  }

  .chat-board-inline {
    width: 100%;
    justify-content: space-between;
  }

  .chat-board-inline input[type="range"] {
    width: 100%;
    max-width: 220px;
  }

  .faction-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }

  .faction-toolbar {
    width: 100%;
  }

  .quest-grid {
    grid-template-columns: 1fr;
  }

  .quest-form-split {
    grid-template-columns: 1fr;
  }

  .panel::after {
    opacity: 0.36;
  }

  .page-index section.panel::after,
  .page-index article.panel::after {
    background:
      radial-gradient(circle at 50% 0, rgba(228, 201, 151, 0.74) 0 2px, rgba(0, 0, 0, 0) 3px),
      linear-gradient(180deg, rgba(236, 211, 165, 0.12), rgba(0, 0, 0, 0) 40%);
  }
}

@media (max-width: 620px) {
  .page-index section.panel h2,
  .page-index section.panel h3,
  .page-index article.panel h2,
  .page-index article.panel h3 {
    padding: 0 20px;
  }

  .page-index section.panel h2::before,
  .page-index section.panel h2::after,
  .page-index section.panel h3::before,
  .page-index section.panel h3::after,
  .page-index article.panel h2::before,
  .page-index article.panel h2::after,
  .page-index article.panel h3::before,
  .page-index article.panel h3::after {
    width: 12px;
  }

  .page-index section.panel:first-of-type::after {
    opacity: 0.52;
    background:
      var(--dashboard-hero-crest) center 3px / 42px 10px no-repeat,
      linear-gradient(180deg, rgba(240, 216, 168, 0.1), rgba(0, 0, 0, 0) 30%),
      radial-gradient(circle at 0 100%, rgba(224, 198, 145, 0.52) 0 2px, rgba(0, 0, 0, 0) 3px),
      radial-gradient(circle at 100% 100%, rgba(224, 198, 145, 0.52) 0 2px, rgba(0, 0, 0, 0) 3px);
  }

  .page-index .stat-card .action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body::before {
    opacity: 0.14;
  }

  body::after {
    height: 108px;
    opacity: 0.44;
  }

  .topbar-inner {
    gap: 10px;
  }

  .panel {
    margin-top: 14px;
  }

  .panel::after {
    opacity: 0.34;
  }

  .faction-card,
  .quest-card,
  .page-index .profile-photo-panel,
  .page-index .stat-card {
    box-shadow: 0 6px 14px rgba(9, 8, 6, 0.26);
  }

  .login-card {
    padding: 20px;
  }

  .profile-photo-form {
    min-width: 0;
    width: 100%;
  }

  .chat-image-form {
    flex-direction: column;
    align-items: stretch;
  }

  .action-row .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    font-size: 0.78rem;
  }

  th,
  td {
    font-size: 0.9rem;
  }
}

@media (max-width: 420px) {
  .page-index section.panel h2,
  .page-index section.panel h3,
  .page-index article.panel h2,
  .page-index article.panel h3 {
    padding: 0 10px;
  }

  .page-index section.panel h2::before,
  .page-index section.panel h2::after,
  .page-index section.panel h3::before,
  .page-index section.panel h3::after,
  .page-index article.panel h2::before,
  .page-index article.panel h2::after,
  .page-index article.panel h3::before,
  .page-index article.panel h3::after {
    display: none;
  }

  .page-index section.panel:first-of-type::after {
    display: none;
  }

  .page-index .stat-card .action-row {
    grid-template-columns: 1fr;
  }

  body::before,
  body::after {
    opacity: 0.12;
  }

  .container {
    width: min(100%, 95vw);
  }

  .nav-links {
    gap: 8px;
  }

  .nav-links a {
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  .panel {
    margin-top: 12px;
  }

  .topbar {
    backdrop-filter: none;
  }

  .action-row {
    gap: 6px;
  }

  .action-row .btn {
    flex: 1 1 100%;
    min-height: 36px;
  }

  .chat-item-header {
    gap: 8px;
    font-size: 0.76rem;
  }

  .chat-item-avatar {
    width: 34px;
    height: 34px;
  }

  th,
  td {
    padding: 8px 6px;
    font-size: 0.86rem;
  }
}

@media (prefers-reduced-data: reduce), (update: slow) {
  body::before,
  body::after {
    opacity: 0.08;
  }

  .topbar,
  .avatar-crop-backdrop {
    backdrop-filter: none;
  }

  .panel,
  .login-card {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }

  .panel,
  .page-index section.panel,
  .page-index article.panel,
  .faction-card,
  .quest-card {
    box-shadow: 0 6px 14px rgba(10, 8, 6, 0.24);
  }

  .panel::after,
  .page-index section.panel::after,
  .page-index article.panel::after {
    background: linear-gradient(180deg, rgba(230, 203, 151, 0.1), rgba(0, 0, 0, 0) 42%);
    opacity: 0.34;
  }

  .page-chat .chat-log {
    background-image: none;
  }

  .btn,
  .nav-links a,
  .chat-item {
    transition-duration: 90ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel,
  .login-card,
  .btn,
  .nav-links a,
  input,
  select,
  textarea,
  .chat-item,
  .avatar-crop-modal,
  .avatar-crop-dialog {
    animation: none;
    transition: none;
    transform: none;
  }

  .btn::after,
  .nav-links a::before,
  .nav-links a::after {
    transition: none;
  }

  .chat-log {
    scroll-behavior: auto;
  }
}

@media (hover: none) {
  .btn:hover,
  .chat-item:hover,
  .nav-links a:hover {
    transform: none;
  }

  .btn:hover::after {
    opacity: 0;
    transform: translateX(-130%);
  }
}

@media (prefers-contrast: more) {
  :where(a, button, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline-width: 3px;
    box-shadow: 0 0 0 5px rgba(239, 231, 215, 0.38);
  }

  .panel,
  .quest-card,
  .faction-card {
    border-color: rgba(222, 191, 140, 0.82);
  }

  .nav-links a {
    border-color: rgba(218, 182, 122, 0.82);
  }

  .nav-links a.active-nav {
    color: #fff8ea;
    border-color: rgba(246, 214, 160, 0.94);
    box-shadow: 0 0 0 2px rgba(246, 214, 160, 0.44) inset;
  }

  .chat-item.role-dm,
  .chat-item.role-admin,
  .chat-item.role-player {
    border-width: 2px;
  }

  .notice.success,
  .notice.error {
    border-width: 2px;
  }
}

@media (forced-colors: active) {
  .panel,
  .btn,
  .nav-links a,
  .notice,
  .chat-item,
  .quest-card,
  .faction-card {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  .nav-links a.active-nav {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  :where(a, button, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}