* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0d0f14; color: #e5e7eb; }

/* Gold link color, matching the reference stylesheet's global `a` rule
   exactly (#f4d06e) - applies to every link site-wide by default. Any
   link that already sets its own color inline or via a more specific
   rule (chat usernames, .auth-switch a, etc.) still wins over this, so
   nothing already-colored breaks - this only fills in the default. */
a { color: #f4d06e; }

.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(ellipse at center, #1a1d26 0%, #0d0f14 100%); }
.auth-box { background: #161920; border: 1px solid #2a2e38; border-radius: 10px; padding: 40px; width: 360px; text-align: center; }
.auth-box h1 { font-size: 28px; letter-spacing: 0.05em; color: #dc2626; margin-bottom: 4px; }
.auth-box h2 { font-size: 15px; color: #9ca3af; font-weight: 500; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.05em; }
.auth-box label { display: block; text-align: left; font-size: 13px; color: #9ca3af; margin: 14px 0 5px; }
.auth-box input { width: 100%; padding: 10px 12px; background: #0d0f14; border: 1px solid #2a2e38; border-radius: 6px; color: #e5e7eb; font-size: 14px; }
.auth-box input:focus { outline: none; border-color: #dc2626; }
.auth-box button { width: 100%; margin-top: 22px; padding: 11px; background: #dc2626; border: none; border-radius: 6px; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; letter-spacing: 0.03em; }
.auth-box button:hover { background: #b91c1c; }
.error-msg { background: #3f1a1a; color: #fca5a5; padding: 10px; border-radius: 6px; font-size: 13px; margin-bottom: 6px; }
.auth-switch { margin-top: 18px; font-size: 13px; color: #9ca3af; }
.auth-switch a { color: #dc2626; text-decoration: none; }

/* Game shell - narrow column, matches reference structure exactly.
   This width works AS-IS on a phone (fills the screen) and centers with
   empty space on the sides on a desktop - same layout, no separate
   mobile redesign needed. */
.game-shell { max-width: 550px; margin: 0 auto; min-height: 100vh; background: #161920; border-left: 1px solid #2a2e38; border-right: 1px solid #2a2e38; }

.topbar { background: #0d0f14; border-bottom: 2px solid #dc2626; padding: 5px 8px; }
.game-title { font-size: 14px; font-weight: 700; color: #dc2626; letter-spacing: 0.05em; display: block; margin-bottom: 3px; }
.game-time { font-size: 10px; color: #9ca3af; display: block; margin-bottom: 3px; }
.topbar-resources { display: flex; gap: 6px; flex-wrap: wrap; }
.resource-pill { display: flex; align-items: center; gap: 4px; background: #161920; border: 1px solid #2a2e38; border-radius: 14px; padding: 3px 9px; font-size: 12px; }
.resource-pill img { width: 15px; height: 15px; object-fit: contain; }

/* Stacked menu list - full-width bars, not a grid. This IS the "Arena /
   Training / Clan" style list from the reference, not a card layout.
   Tightened to match the reference's dense .menuList rows - thin dotted
   separators rather than a solid border, small icons, minimal padding. */
.menu-list { display: flex; flex-direction: column; }
.menu-item { display: block; padding: 6px 8px; background: #161920; border-bottom: 1px dotted #3a3f4b; text-decoration: none; color: inherit; }
.menu-item:hover { background: #1c202b; }
.menu-item h2 { font-size: 13px; color: #f4d06e; margin-bottom: 1px; display: flex; align-items: center; gap: 5px; }
.menu-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.menu-item p { font-size: 11px; color: #fff; font-weight: 700; }
.menu-item .coming-soon { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }

/* Character footer panel - anchored at the bottom of the column, matches
   the "Sauron | Settings" + stats + event banners footer from every
   reference screenshot. */
.char-footer { background: #0d0f14; border-top: 1px solid #2a2e38; padding: 6px 10px; }
.char-footer-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 4px; }
.char-footer-row a { color: #dc2626; text-decoration: none; font-size: 12px; }
.char-footer-stats { font-size: 12px; color: #9ca3af; }

.content-area { padding: 8px 10px; }
.content-area h1 { font-size: 17px; margin-bottom: 3px; }
.subtitle { color: #9ca3af; font-size: 12px; margin-bottom: 10px; }

.save-banner { margin: 0; padding: 10px 16px; background: #3f2f1a; color: #fbbf24; font-size: 12px; text-align: center; }
.save-banner a { color: #fbbf24; }

/* Topbar vitals - HP/Energy bars, replaces the old full resource-pill list.
   Gold/Silver moved down to the bottom footer-summary strip instead.
   Thinned to match the reference's slim exp_bar (was a chunky 16px pill). */
.topbar-vitals { display: flex; gap: 6px; margin-top: 3px; }
.vital-bar-row { display: flex; align-items: center; gap: 4px; flex: 1; }
.vital-bar { position: relative; flex: 1; height: 15px; background: #0d0f14; border: 1px solid #4a4f5b; border-radius: 4px; overflow: hidden; }
.vital-fill { position: absolute; top: 0; left: 0; bottom: 0; }
.vital-hp .vital-fill { background: #dc2626; }
.vital-energy .vital-fill { background: #2563eb; }
.vital-label { position: relative; z-index: 1; display: block; text-align: center; font-size: 10px; font-weight: 600; line-height: 15px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.9); }

/* Shared bottom footer - My Hero / My Clan / Main page links, then the
   username | level | gold | silver strip underneath. Lives at the bottom of
   every page, below any page-specific menu-list. */
.footer-nav { display: flex; flex-direction: column; border-top: 1px solid #2a2e38; }
.footer-nav-item { padding: 6px 10px; background: #161920; border-bottom: 1px dotted #3a3f4b; text-decoration: none; color: #e5e7eb; font-size: 13px; }
.footer-nav-item:hover { background: #1c202b; }
.footer-summary { display: flex; justify-content: space-between; align-items: center; background: #0d0f14; padding: 6px 10px; font-size: 12px; color: #9ca3af; flex-wrap: wrap; gap: 8px; }
.footer-summary-name { color: #dc2626; font-weight: 600; }
.footer-summary-stat { white-space: nowrap; }
.footer-icon { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
.footer-summary-action { color: #dc2626; text-decoration: none; font-size: 12px; margin-left: auto; }
.footer-links-row { text-align: center; padding: 6px 0; background: #0d0f14; border-top: 1px solid #2a2e38; font-size: 12px; }
.footer-links-row a { color: #dc2626; text-decoration: none; }

/* Impersonation banner - shown at the top of every page while an admin is
   logged in as a player, so it's never ambiguous whose account is active. */
.impersonation-banner { background: #3f2f1a; color: #fbbf24; font-size: 12px; text-align: center; padding: 8px 14px; }
.impersonation-banner a { color: #fbbf24; font-weight: 600; }

/* Profile page - real stat cards reuse .stat-card; placeholder sections for
   systems that don't exist yet reuse the "coming-soon" gray treatment. */
.profile-portrait { width: 195px; flex-shrink: 0; }

/* Enhancement boxes - 10 total around the portrait (4 left, 4 right, 2
   below), matching the reference layout. Each box shows its current
   Alpha Ray image tier with the Beta Ray level as a corner text overlay,
   and Alpha's numeric progress underneath. */
.enh-portrait-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.enh-col { display: flex; flex-direction: column; gap: 6px; }
.enh-box-wrap { text-align: center; }
.enh-box { position: relative; display: block; width: 78px; height: 78px; border: 1px solid #2a2e38; border-radius: 8px; background: #161920; overflow: hidden; text-decoration: none; }
.enh-box img { width: 100%; height: 100%; object-fit: cover; }
.enh-beta-badge { position: absolute; top: 2px; left: 2px; background: rgba(0,0,0,0.75); color: #fbbf24; font-size: 11px; font-weight: 600; padding: 2px 4px; border-radius: 4px; line-height: 1.2; }
.enh-alpha-progress { font-size: 12px; color: #9ca3af; margin-top: 3px; }
.enh-below-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.profile-placeholder { background: #161920; border: 1px solid #2a2e38; border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; }
.profile-placeholder h3 { font-size: 13px; color: #6b7280; margin-bottom: 2px; }
.profile-placeholder .coming-soon { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }

/* Icon + Label: Value rows - used for the profile stat list, footer summary
   strip, and topbar HP/Energy bars, wherever a game-icon PNG accompanies a
   number rather than the plain-text version used before. Tightened to
   reference density - was a chunky 44px icon with generous padding. */
.icon-stat-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dotted #3a3f4b; }
.icon-stat-row:last-child { border-bottom: none; }
.icon-stat-row img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.icon-stat-row .icon-stat-main { font-size: 13px; }
.icon-stat-row .icon-stat-sub { font-size: 10px; color: #6b7280; margin-top: 1px; }

/* Rune slots - placeholder equipment-style boxes, styled like the empty
   slot look from the reference (dark box, dashed border, faded icon) since
   no rune has ever been assigned yet. */
.rune-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.rune-slot { border: 1px dashed #2a2e38; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #161920; padding: 8px 4px; text-align: center; }
.rune-slot img { width: 80%; max-width: 100px; aspect-ratio: 1/1; object-fit: contain; opacity: 0.45; margin-bottom: 4px; }
.rune-slot .rune-label { font-size: 9px; color: #6b7280; line-height: 1.3; }
.rune-slot .rune-empty { font-size: 8px; color: #4b5563; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* Rune Shop - purchase cards, image boxes are 1:1 aspect ratio as requested */
.rune-shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.rune-shop-card { background: #161920; border: 1px solid #2a2e38; border-radius: 10px; padding: 10px; text-align: center; }
.rune-shop-img { width: 100px; height: 100px; object-fit: contain; border-radius: 8px; margin: 0 auto 8px; display: block; background: #0d0f14; }
.rune-shop-label { font-size: 12px; font-weight: 600; color: #e5e7eb; margin-bottom: 2px; }
.rune-shop-tier { font-size: 11px; color: #9ca3af; margin-bottom: 8px; }

/* Equipment Shop */
.equipment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.equipment-card { background: #161920; border: 1px solid #2a2e38; border-radius: 8px; padding: 6px; text-align: center; }
.equipment-img { width: 100%; aspect-ratio: 450/800; object-fit: cover; border-radius: 6px; margin-bottom: 6px; background: #0d0f14; }

/* Training / stat cards - flattened toward reference density (was a
   rounded 10px-radius card with generous 16px/20px padding). */
.stat-list { display: flex; flex-direction: column; gap: 6px; }
.stat-card { background: #161920; border: 1px solid #2a2e38; border-radius: 4px; padding: 8px 10px; }
.stat-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.stat-name { font-size: 14px; font-weight: 600; color: #e5e7eb; }
.stat-derived { font-size: 12px; color: #dc2626; }
.stat-desc { font-size: 11px; color: #9ca3af; margin: 4px 0 8px; }
.stat-message { background: #16281d; color: #86efac; padding: 6px 10px; border-radius: 4px; font-size: 12px; margin-bottom: 10px; }
.btn-upgrade { background: #2a2e38; border: 1px solid #3a3f4b; color: #e5e7eb; padding: 6px 12px; border-radius: 4px; font-size: 13px; cursor: pointer; }
.btn-upgrade:hover { background: #3a3f4b; border-color: #dc2626; }

/* Emoji picker - small popup grid, toggled open/closed by the button */
.emoji-picker-wrap { position: relative; display: inline-block; margin-bottom: 8px; }
.emoji-picker-btn { background: #2a2e38; border: 1px solid #3a3f4b; color: #e5e7eb; padding: 6px 10px; border-radius: 6px; font-size: 16px; cursor: pointer; }
.emoji-picker-grid { display: none; position: absolute; bottom: 100%; left: 0; margin-bottom: 4px; background: #161920; border: 1px solid #2a2e38; border-radius: 8px; padding: 8px; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 180px; z-index: 10; }
.emoji-picker-grid.emoji-picker-open { display: grid; }
.emoji-picker-item { font-size: 18px; text-align: center; cursor: pointer; padding: 4px; border-radius: 4px; }
.emoji-picker-item:hover { background: #2a2e38; }

/* Combat feedback effects - shared across every attack page (Arena,
   Player Hunt, Portal, both Raids). See assets/combat-effects.js */
@keyframes cv-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.cv-shake { animation: cv-shake 0.4s ease-in-out; }

.cv-damage-flash {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(220, 38, 38, 0.25);
    pointer-events: none; z-index: 9999;
    animation: cv-flash-fade 0.4s ease-out forwards;
}
@keyframes cv-flash-fade { from { opacity: 1; } to { opacity: 0; } }

.cv-crit-flash {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(251, 191, 36, 0.2);
    pointer-events: none; z-index: 9999;
    animation: cv-flash-fade 0.5s ease-out forwards;
}

.cv-float-number {
    position: fixed; top: 42%; left: 50%;
    transform: translateX(-50%);
    font-size: 22px; font-weight: 800;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    pointer-events: none; z-index: 9999;
    animation: cv-float-up 1.1s ease-out forwards;
}
.cv-float-dmg-taken { color: #fca5a5; }
.cv-float-dmg-dealt { color: #e5e7eb; }
.cv-float-crit { color: #fbbf24; font-size: 28px; }
@keyframes cv-float-up {
    0% { transform: translateX(-50%) translateY(0); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-70px); opacity: 0; }
}

.cv-vital-pulse { animation: cv-pulse 0.4s ease-out; }
@keyframes cv-pulse {
    0% { filter: brightness(1); }
    30% { filter: brightness(1.8); }
    100% { filter: brightness(1); }
}

/* Inline combat-text coloring - for the "you hit / you were hit" lines in
   battle messages and round-by-round logs (Arena, Player Hunt, Portal,
   both Raids). Distinct from the floating cv-float-* numbers above, which
   are the transient popup effect; these are the persistent log/message
   text itself. Icons are emoji (no asset dependency, matches the existing
   checkmark/cross convention already used in the Arena Fight All log). */
.cv-line-dealt { color: #22c55e; }
.cv-line-taken { color: #fca5a5; font-weight: 600; }
.cv-line-crit { color: #fbbf24; font-weight: 700; }
.cv-line-icon { margin-right: 3px; }