@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=MedievalSharp&family=Uncial+Antiqua&display=swap');

/* ============================================================
   Android Strategy Games — Homepage Styles
   Scope: index.html only
   Mobile-first, three stacked viewport sections
   No framework dependencies

   NOTE: This is the HOMEPAGE stylesheet.
   Game module styles live in games/{id}/css/styles.css
   and are loaded dynamically by GameLoader.
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #0d1b2a;
    color: #e8e8e8;
    font-size: 14px;
}

/* --- Page Container --- */
.page-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}

/* ============================================================
   SECTION 1 — Top Navigation
   ============================================================ */
.section-top {
    background: #1a2a3a;
    padding: 10px 8px 12px;
    border-bottom: 2px solid #0f3460;
    flex-shrink: 0;
}

/* Site Header */
.site-header {
    text-align: center;
    margin-bottom: 10px;
}

.site-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-family: 'Cinzel Decorative', 'MedievalSharp', Georgia, 'Palatino Linotype', serif;
    font-size: 22px;
    font-weight: 700;
    color: #f4d27a;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #000, 0 0 10px rgba(240, 192, 96, 0.45), 0 0 18px rgba(139, 105, 20, 0.35);
}

.title-ornate-d {
    width: 25px;
    height: 31px;
    object-fit: contain;
    margin: -7px -5px -5px -5px;
    filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 6px rgba(240, 192, 96, 0.55));
    transform: translateY(2px);
}

/* Button Rows */
.button-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.button-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Base button */
.btn {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-family: 'MedievalSharp', Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.035em;
    cursor: pointer;
    flex: 1;
    min-width: 90px;
    max-width: 200px;
    white-space: nowrap;
    transition: opacity 0.15s, transform 0.1s;
}

.btn:active {
    transform: scale(0.97);
    opacity: 0.85;
}

.btn-primary          { background: #2c5282; color: #fff; }
.btn-secondary        { background: #276749; color: #fff; }
.btn-tertiary         { background: #4a5568; color: #fff; }
.btn-tournament       { background: #276749; color: #fff; }
.btn-tournament-register { background: #c05621; color: #fff; }
.btn-game             { background: #f7fafc; color: #1a2a3a; border: 1px solid #cbd5e0; }
.btn-coins-purchase   { background: #b7791f; color: #fff; }
.btn-coins-cash       { background: #6b46c1; color: #fff; }

.btn-game {
    text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}

.btn-new-open-chess {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 190px;
    color: #1d2230;
    background: linear-gradient(180deg, #fffaf0 0%, #e8d7ad 100%);
    border: 1px solid #b98c32;
    box-shadow: inset 0 0 9px rgba(139, 105, 20, 0.18), 0 0 8px rgba(240, 192, 96, 0.15);
}

.noc-label {
    white-space: nowrap;
}

.noc-lace {
    display: inline-block;
    color: #8b6914;
    font-family: 'Uncial Antiqua', 'MedievalSharp', Georgia, serif;
    font-size: 18px;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255,255,255,0.65), 0 0 5px rgba(139,105,20,0.25);
}

.noc-lace-left { transform: rotate(-7deg) translateY(-1px); }
.noc-lace-right { transform: rotate(7deg) translateY(-1px); }

.btn-one-on-one {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 250px;
    max-width: 320px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #302012 0%, #120a05 100%);
    color: #f7d58a;
    border: 1px solid #f0c060;
    box-shadow: inset 0 0 12px rgba(240, 192, 96, 0.22), 0 0 10px rgba(240, 192, 96, 0.18);
    text-shadow: 0 1px 0 #000, 0 0 7px rgba(240, 192, 96, 0.55);
}

.ooo-label {
    display: inline-block;
    padding: 0 4px;
    font-family: 'Uncial Antiqua', 'MedievalSharp', Georgia, serif;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

.ooo-dollar {
    font-size: 1.35em;
    font-weight: 900;
    vertical-align: baseline;
    line-height: 0.9;
}

.ooo-knights {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
}

.ooo-knights img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin: 0 -2px;
    filter: drop-shadow(0 0 3px rgba(240, 192, 96, 0.7));
}

.ooo-left img:nth-child(1),
.ooo-right img:nth-child(3) { width: 16px; height: 16px; opacity: 0.9; }
.ooo-left img:nth-child(2),
.ooo-right img:nth-child(2) { width: 20px; height: 20px; }
.ooo-left img:nth-child(3),
.ooo-right img:nth-child(1) { width: 16px; height: 16px; opacity: 0.9; }

/* ============================================================
   SECTION 2 — Gameplay
   ============================================================ */
.section-gameplay {
    display: flex;
    flex-direction: column;
    background: #f0f4f8;
    flex-shrink: 0;
}

/* --- HUD Top Row --- */
.game-hud-top {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #1a2a3a;
    border-bottom: 1px solid #0f3460;
    min-height: 80px;
}

/* --- HUD Bottom Row --- */
.game-hud-bottom {
    position: relative;
    z-index: 350;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #1a2a3a;
    border-top: 1px solid #0f3460;
    min-height: 80px;
}

.actions-panel {
    position: relative;
    z-index: 360;
}

/* --- HUD Panels (shared) --- */
.hud-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border-right: 1px solid #0f3460;
    font-size: 12px;
    color: #c8d8e8;
    gap: 3px;
    min-width: 0;
}

.hud-panel:last-child {
    border-right: none;
}

/* Opponent / Player Panels */
.opponent-panel,
.player-panel {
    align-items: flex-start;
    padding: 6px 8px;
}

.hud-name {
    font-size: 12px;
    font-weight: 600;
    color: #e8e8e8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.hud-avatar {
    font-size: 20px;
    line-height: 1;
}

.hud-flag {
    font-size: 14px;
}

.hud-rating {
    font-size: 10px;
    color: #6a7f99;
}

/* Clock Panel */
.clock-panel {
    gap: 4px;
}

.hud-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #0f1e2d;
    border-radius: 4px;
    padding: 4px 8px;
    width: 100%;
    border: 1px solid #0f3460;
    transition: border-color 0.2s, background 0.2s;
}

.hud-clock.clock-active {
    border-color: #f6ad55;
    background: #1a2e3a;
}

.hud-clock-label {
    font-size: 9px;
    color: #6a7f99;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hud-clock-time {
    font-size: 16px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: #f0d9b5;
    letter-spacing: 1px;
}

.hud-clock.clock-active .hud-clock-time {
    color: #f6ad55;
}

/* Chat Panel */
.chat-panel {
    padding: 4px 5px;
    justify-content: space-between;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
}

.hud-chat-messages {
    flex: 1;
    min-height: 34px;
    max-height: 46px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1px;
}

.hud-chat-msg,
.hud-chat-status {
    font-size: 10px;
    line-height: 1.15;
    color: #e8e8e8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.hud-chat-status {
    color: #6a7f99;
    font-style: italic;
}

.hud-chat-name {
    color: #f0c060;
    font-weight: 700;
}

.hud-chat-row {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    margin-top: 2px;
}

.hud-chat-input {
    width: 100%;
    min-width: 0;
    background: #0f1e2d;
    border: 1px solid #0f3460;
    border-radius: 4px;
    color: #e8e8e8;
    font-size: 10px;
    padding: 3px 4px;
    outline: none;
}

.hud-chat-input::placeholder {
    color: #6a7f99;
}

.hud-chat-send {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1px solid #f0c060;
    border-radius: 4px;
    background: #1a2a3a;
    color: #f0c060;
    font-weight: 900;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

/* Actions Panel */
.actions-panel {
    gap: 4px;
    justify-content: center;
}

.hud-btn {
    width: 100%;
    padding: 5px 4px;
    border: none;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.hud-btn:active {
    opacity: 0.8;
}

.hud-btn-new    { background: #276749; color: #fff; }
.hud-btn-rules  { background: #2c5282; color: #fff; }
.hud-btn-tourney { background: #c05621; color: #fff; }

/* Status Panel */
.status-panel {
    align-items: flex-start;
    padding: 6px 8px;
}

.hud-status-messages {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hud-status {
    font-size: 11px;
    color: #c8d8e8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hud-status.current {
    font-size: 12px;
    font-weight: 700;
    color: #68d391;
    background: #1a3a2a;
    border-radius: 4px;
    padding: 2px 6px;
}

.hud-status.promo {
    font-size: 10px;
    color: #f6ad55;
}

/* --- Game Board Slot --- */
.game-board-container {
    position: relative;
    background: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    width: 100%;
    overflow: hidden;
}

.game-board-placeholder {
    text-align: center;
    color: #6a7f99;
    padding: 40px 20px;
    font-size: 14px;
    line-height: 1.8;
}

/* ============================================================
   SECTION 3 — Footer
   ============================================================ */
.section-footer {
    background: #0d1117;
    flex-shrink: 0;
}

.site-footer {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer-contact,
.footer-affiliates,
.footer-legal {
    padding: 16px 16px 12px;
    border-bottom: 1px solid #1a2a3a;
}

.footer-contact h3,
.footer-affiliates h3 {
    font-size: 14px;
    font-weight: 700;
    color: #f6ad55;
    margin-bottom: 6px;
}

.footer-contact p {
    font-size: 12px;
    color: #a0b4c8;
    line-height: 1.8;
}

.affiliate-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.affiliate-links a,
.legal-links a {
    font-size: 12px;
    color: #63b3ed;
    text-decoration: none;
}

.affiliate-links a:hover,
.legal-links a:hover {
    text-decoration: underline;
}

.legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.copyright p {
    font-size: 11px;
    color: #4a5568;
}

/* ============================================================
   Loader States (from game-loader-styles.css)
   ============================================================ */
.game-error {
    text-align: center;
    color: #e74c3c;
    padding: 20px;
}

.game-error .error-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.game-loading {
    text-align: center;
    color: #6a7f99;
    padding: 20px;
}

/* ============================================================
   Game Module Containment
   Force the chess board to fit inside #game-board-slot
   regardless of --sq square size.
   These rules scope the module without touching module CSS.
   ============================================================ */

#game-board-slot #chess-chapter2 {
    width: 100%;
    max-width: 100%;
    padding: 4px 2px;
    box-sizing: border-box;
}

/* Master Chess (Chess: Pick 5) containment */
#game-board-slot #master-chess {
    width: 100%;
    max-width: 100%;
    padding: 4px 2px;
    box-sizing: border-box;
    position: relative;
}

/* 2 Dollar Chess containment */
#game-board-slot #tdc-root {
    width: 100%;
    max-width: 100%;
    padding: 4px 2px;
    box-sizing: border-box;
    position: relative;
}

#game-board-slot #tdc-board-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 4px;
}

#game-board-slot #tdc-board-container {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

#game-board-slot #master-chess-board-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 4px;
}

#game-board-slot #master-chess-board-container {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

#game-board-slot #chess-c2-board-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 4px;
}

#game-board-slot #chess-c2-board-container {
    /* Allow board to scroll horizontally if still too wide,
       but first try to shrink square size via --sq override */
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

/* Override --sq to a size that fits mobile viewport inside HUD.
   Viewport ~390px, minus page padding ~8px = ~382px available.
   Board = 8 * sq + rank-label ~14px.
   At sq=44px: 8*44 + 14 = 366px — fits on all phones ≥375px wide. */
#game-board-slot {
    --sq: 44px;
}

@media (max-width: 374px) {
    #game-board-slot { --sq: 38px; }
}

@media (min-width: 410px) {
    #game-board-slot { --sq: 48px; }
}

/* ============================================================
   Player Profile & Registration Modals
   ============================================================ */

/* Overlay backdrop */
#asg-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: asgFadeIn 0.18s ease;
}

@keyframes asgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal box — slides up from bottom */
.asg-modal-box {
  background: #1a2a3a;
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 0 0 24px 0;
  animation: asgSlideUp 0.22s ease;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.5);
}

@keyframes asgSlideUp {
  from { transform: translateY(60px); opacity: 0.5; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Modal header */
.asg-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
  border-bottom: 1px solid #0f3460;
  position: sticky;
  top: 0;
  background: #1a2a3a;
  z-index: 1;
}

.asg-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0c060;
}

.asg-modal-close {
  background: none;
  border: none;
  color: #a0b4c8;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}

.asg-modal-close:active { opacity: 0.6; }

/* Privacy notice */
.asg-modal-privacy {
  margin: 10px 18px 4px;
  background: #0f2a1a;
  border: 1px solid #1a5c2a;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #68d391;
  line-height: 1.5;
}

/* Form */
.asg-form {
  padding: 10px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.asg-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.asg-label {
  font-size: 12px;
  font-weight: 600;
  color: #c8d8e8;
}

.asg-private {
  font-size: 10px;
  color: #68d391;
  font-weight: 400;
}

.asg-public {
  font-size: 10px;
  color: #f6ad55;
  font-weight: 400;
}

.asg-input {
  background: #0f1e2d;
  border: 1px solid #2d4a6a;
  border-radius: 8px;
  color: #e8e8e8;
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.asg-input:focus {
  border-color: #4a90d9;
}

.asg-input::placeholder {
  color: #4a6a8a;
}

.asg-select {
  cursor: pointer;
}

/* Error message */
.asg-form-error {
  background: #2d1010;
  border: 1px solid #c05621;
  border-radius: 8px;
  color: #fc8181;
  font-size: 13px;
  padding: 8px 12px;
}

/* Submit button */
.asg-btn-submit {
  background: #276749;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  padding: 13px;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
  transition: opacity 0.15s, transform 0.1s;
}

.asg-btn-submit:active  { opacity: 0.85; transform: scale(0.98); }
.asg-btn-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Profile card ---- */
.asg-profile-box {
  padding-bottom: 20px;
}

.asg-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 18px 16px;
  text-align: center;
}

.asg-profile-flag {
  font-size: 52px;
  line-height: 1;
}

.asg-profile-playername {
  font-size: 22px;
  font-weight: 700;
  color: #f0c060;
  margin-top: 4px;
}

.asg-profile-nation {
  font-size: 14px;
  color: #c8d8e8;
}

.asg-profile-language {
  font-size: 13px;
  color: #a0b4c8;
}

.asg-profile-joined {
  font-size: 12px;
  color: #6a8aaa;
  margin-top: 4px;
}

/* ---- Avatar in profile card ---- */
.asg-profile-avatar {
  margin-bottom: 4px;
}
.asg-avatar-emoji-lg {
  font-size: 64px;
  line-height: 1;
  display: block;
}
.asg-avatar-photo-lg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f0c060;
  display: block;
}

/* ---- Avatar photo in HUD panels ---- */
.hud-avatar-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f0c060;
  display: block;
  margin: 0 auto;
}

/* ---- Avatar picker in registration form ---- */
.asg-avatar-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  justify-content: center;
}
.asg-avatar-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 2px solid #2c4a6a;
  background: #1a2a3a;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  padding: 0;
  gap: 2px;
}
.asg-avatar-opt:active {
  opacity: 0.75;
}
.asg-avatar-opt.asg-avatar-selected {
  border-color: #f0c060;
  background: #2c3a1a;
}
.asg-avatar-emoji {
  font-size: 28px;
  line-height: 1;
}
.asg-avatar-label {
  font-size: 10px;
  color: #a0b4c8;
  font-weight: 500;
}
.asg-avatar-upload-btn {
  cursor: pointer;
}
.asg-avatar-photo-preview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Edit button inside profile */
.asg-btn-edit {
  display: block;
  margin: 0 18px;
  width: calc(100% - 36px);
  background: #2c5282;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  padding: 11px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.asg-btn-edit:active { opacity: 0.8; }

/* ---- Profile button states ---- */
.btn-profile {
  background: #4a3a6a;
  color: #e8d8ff;
}

.btn-profile-active {
  background: #2d4a2d;
  color: #a8e6a8;
}

.btn-logged-in {
  background: #7b2d2d;
  color: #ffd0d0;
}

/* ---- Success toast ---- */
.asg-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #276749;
  color: #fff;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  pointer-events: none;
}

.asg-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Responsive — small phones
   ============================================================ */
@media (max-width: 360px) {
    .site-title  { font-size: 15px; }
    .btn         { font-size: 11px; padding: 6px 8px; }
    .hud-clock-time { font-size: 14px; }
}
/* Cash In Coins medieval button treatment */
.btn-coins-cash {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: linear-gradient(180deg, #7b4b13, #3b1f08);
    color: #f7d58a;
    border: 1px solid #f0c060;
    font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 #000;
    box-shadow: inset 0 0 10px rgba(240, 192, 96, 0.18);
}

.cash-btn-icon {
    width: 21px;
    height: 21px;
    display: inline-block;
    flex: 0 0 auto;
    background: url('../cash-in-coins/assets/coin-knight-6.png') center / contain no-repeat;
    filter: drop-shadow(0 0 4px rgba(240, 192, 96, 0.6));
}

/* ============================================================
   Hall of Fame Button & Modal
   ============================================================ */

.btn-hall-of-fame {
    background: linear-gradient(135deg, #8B6914 0%, #D4A017 50%, #8B6914 100%);
    color: #fff;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    border: 2px solid #f0c060;
    box-shadow: 0 0 12px rgba(240,192,96,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    letter-spacing: 0.5px;
}

.btn-hall-of-fame:active {
    transform: scale(0.96);
    box-shadow: 0 0 6px rgba(240,192,96,0.3);
}


/* Hall of Fame uses its own centered modal layout. */
#hof-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: asgFadeIn 0.18s ease;
}

#hof-modal-overlay .asg-modal-box {
    width: min(520px, calc(100vw - 32px));
    max-height: min(88vh, 720px);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.55);
}

.hof-section {
    margin-bottom: 18px;
}

.hof-section:last-child {
    margin-bottom: 0;
}

.hof-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #f0c060;
    margin: 0 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #1a3a5a;
}

.hof-leaderboard {
    min-height: 40px;
}

.hof-loading,
.hof-empty {
    text-align: center;
    color: #5a7a9a;
    font-size: 13px;
    padding: 10px 0;
    font-style: italic;
}

.hof-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
    background: #0f1e2d;
    border: 1px solid #1a3050;
}

.hof-row:nth-child(1) {
    background: linear-gradient(135deg, #2a1a00 0%, #3a2800 100%);
    border-color: #D4A017;
}

.hof-row:nth-child(2) {
    background: linear-gradient(135deg, #1a1a2a 0%, #2a2a3a 100%);
    border-color: #8a8aaa;
}

.hof-row:nth-child(3) {
    background: linear-gradient(135deg, #2a1a10 0%, #3a2a18 100%);
    border-color: #8B6914;
}

.hof-rank {
    font-size: 14px;
    font-weight: 800;
    color: #f0c060;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.hof-flag {
    font-size: 18px;
    flex-shrink: 0;
}

.hof-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #e0e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hof-stat {
    font-size: 12px;
    font-weight: 700;
    color: #68d391;
    flex-shrink: 0;
    text-align: right;
}