/* ============================================================
   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 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 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-size: 13px;
    font-weight: 600;
    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; }

/* ============================================================
   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 {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #1a2a3a;
    border-top: 1px solid #0f3460;
    min-height: 80px;
}

/* --- 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 6px;
    justify-content: space-between;
    align-items: stretch;
    gap: 2px;
}

.hud-chat-messages {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

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

.hud-chat-trans {
    font-size: 10px;
    color: #6a7f99;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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

/* 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));
}