@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Orbitron:wght@400..900&family=Rajdhani:wght@300;400;500;600;700&display=swap');


/* =========================
   RESET & BASE
========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Heebo", "Poppins", system-ui, sans-serif;
    background: #0e120f;
    color: #f3e9cf;
}


/* =========================
   GLOBAL BACKGROUND
========================= */

/* =========================
   GAME UI WRAPPER
========================= */
.game-ui {
    width: 100%;
    height: 100%;
    position: relative;
}

/* =========================
   TOP BAR
========================= */
/* =========================
   TOP UI WRAPPER
========================= */
.top-ui {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;

    display: flex;
    align-items: center;
    gap: 20px;

    z-index: 20;
}


/* =========================
   PROFILE AVATAR
========================= */
.profile-avatar {
    position: absolute;
    left: 20px;
    top: -14px; /* יוצא מעל הבר */
    width: 86px;
    height: 86px;

    z-index: 30;

    animation: profileSlideIn 0.8s ease-out forwards;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;

    border: 4px solid #d6b36a;
    background: #1a1916;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.2),
        0 12px 22px rgba(0,0,0,0.85);
}


/* =========================
   RESOURCE BAR (MAIN CAPSULE)
========================= */
.resource-bar {
    margin-left: 60px;
    height: 72px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 28px;
    background: linear-gradient(#2b2a26, #1a1916);
    border: 2px solid #c8a45d;
    clip-path: polygon(
        0% 0%,
        calc(100% - 24px) 0%,
        100% 50%,
        calc(100% - 24px) 100%,
        0% 100%
    );
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),
        0 10px 24px rgba(0,0,0,0.8);
}



/* RESOURCES */
.resource {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 6px 14px;

    border-radius: 999px;
    border: 1px solid #c8a45d;

    background: rgba(0,0,0,0.35);
    color: #fff;
    font-weight: 500;
}


/* =========================
   TOP RIGHT ICONS
========================= */
.top-actions {
    display: flex;
    gap: 12px;
}

.top-icon {
    width: 48px;
    height: 48px;

    border-radius: 50%;
    background: radial-gradient(circle at top, #3d3b33, #1f1e19);
    border: 2px solid #b89b5e;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 6px 12px rgba(0,0,0,0.7);

    cursor: pointer;
}



/* RESOURCES */
.resources {
    display: flex;
    gap: 14px;
    flex: 1;
}

.resource {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 6px 14px;
    background: linear-gradient(#3a392f, #24231e);
    border: 1px solid #b89b5e;
    border-radius: 22px;

    font-size: 14px;
    font-weight: 600;
    color: #f1e6c6;

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}

/* TOP ICONS */
.top-icons {
    display: flex;
    gap: 10px;
}

.top-icons .icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;

    background: radial-gradient(circle at top, #3d3b33, #1f1e19);
    border: 2px solid #b89b5e;

    cursor: pointer;
}

/* =========================
   MAIN AREA
========================= */
.main-area {
    position: absolute;
    top: 104px;
    bottom: 96px;
    left: 0;
    right: 0;

    display: flex;
}

/* =========================
   SIDEBARS
========================= */
.sidebar {
    width: 280px;
    padding: 16px;
    background: transparent;
}

.sidebar.left {
    padding-left: 20px;
}

.sidebar.right {
    padding-right: 20px;
}

/* =========================
   PANELS (BUILDINGS / TASKS)
========================= */
.panel {
    margin-bottom: 16px;
    padding: 14px;

    background: linear-gradient(#2a2924, #1c1b17);
    border: 2px solid #b89b5e;
    border-radius: 14px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 6px 12px rgba(0,0,0,0.6);
}

.panel h3 {
    margin-bottom: 12px;
    font-size: 15px;
    color: #e6d29a;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* BUILDINGS */
.building {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 8px 6px;
    border-radius: 8px;
    font-size: 14px;
    color: #d8cba8;
}

.building.active {
    background: linear-gradient(#3f3521, #2a2416);
    border: 1px solid #d6b36a;
    color: #f3e3b0;
}

/* TASKS */
.task {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: #d2c5a2;
}

/* =========================
   CENTER VIEW
========================= */
.settlement-view {
    flex: 1;
    position: relative;
}

/* =========================
   MINIMAP
========================= */
.mini-map img {
    width: 100%;
    border-radius: 12px;
    border: 2px solid #b89b5e;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 6px 12px rgba(0,0,0,0.6);
}

/* =========================
   STATS
========================= */
.stats {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
    background: linear-gradient(#2e2d28, #1f1e1a);
    border: 0px solid #8c7746;
    border-radius: 8px;
    font-size: 14px;
}

/* =========================
   RANK
========================= */
.rank {
    position: relative;
    margin-top: 20px;
    width: 150px;
    height: 150px;
    align-self: center;

    background: radial-gradient(circle at top, #4a3a1e, #1b150c);
    border: 3px solid #d6b36a;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.15),
        inset 0 -4px 8px rgba(0,0,0,0.6),
        0 12px 22px rgba(0,0,0,0.75);
}

/* INNER RING */
.rank::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid rgba(214,179,106,0.6);
}

/* LAUREL / ORNAMENT */
.rank::after {
    content: "✦";
    position: absolute;
    bottom: -14px;
    font-size: 22px;
    color: #d6b36a;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.rank-number {
    font-size: 38px;
    font-weight: 700;
    color: #f5dd9c;
    text-shadow:
        0 2px 6px rgba(0,0,0,0.8);
}


/* =========================
   ACTION BAR
========================= */
.action-bar {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);

    height: 72px;
    padding: 0 24px;

    display: flex;
    align-items: center;
    gap: 18px;

    background: linear-gradient(#2b2a26, #1a1916);
    border: 2px solid #b89b5e;
    border-radius: 36px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 8px 18px rgba(0,0,0,0.7);
}

.action {
    width: 56px;
    height: 56px;
    border-radius: 50%;

    background: radial-gradient(circle at top, #5a4727, #2a2216);
    border: 2px solid #d6b36a;

    cursor: pointer;
}

.action.main {
    width: 68px;
    height: 68px;

    background: radial-gradient(circle at top, #e29a3a, #8a3e12);
    box-shadow: 0 0 14px rgba(255,170,80,0.6);
}

@keyframes heroSlideIn {
    from {
        transform: translate(-40px, -18px);
        opacity: 0;
    }
    to {
        transform: translate(0, -18px);
        opacity: 1;
    }
}

.panel {
    position: relative;
    overflow: hidden;
}

/* INNER GOLD LINE */
.panel::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(214,179,106,0.35);
    border-radius: 10px;
    pointer-events: none;
}

/* CORNER ORNAMENTS */
.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    pointer-events: none;
    background:
        linear-gradient(to right, #d6b36a 2px, transparent 2px) top left,
        linear-gradient(to bottom, #d6b36a 2px, transparent 2px) top left,

        linear-gradient(to left, #d6b36a 2px, transparent 2px) top right,
        linear-gradient(to bottom, #d6b36a 2px, transparent 2px) top right,

        linear-gradient(to right, #d6b36a 2px, transparent 2px) bottom left,
        linear-gradient(to top, #d6b36a 2px, transparent 2px) bottom left,

        linear-gradient(to left, #d6b36a 2px, transparent 2px) bottom right,
        linear-gradient(to top, #d6b36a 2px, transparent 2px) bottom right;

    background-repeat: no-repeat;
    background-size: 12px 12px;
}
.panel h3 {
    position: relative;
    padding-bottom: 8px;
}

/* ORNAMENT LINE UNDER TITLE */
.panel h3::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;

    background: linear-gradient(
        to right,
        transparent,
        #d6b36a,
        transparent
    );
}
.mini-map {
    position: relative;
}

.mini-map::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(214,179,106,0.35);
    border-radius: 10px;
    pointer-events: none;
}
.resource-bar {
    height: 70px;
    padding: 0 30px 0 100px;
    gap: 26px;
}

.resource {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 16px;
    min-width: 88px;

    background: linear-gradient(#2f2e29, #1c1b17);
    border: 1.5px solid #c9ad6a;
    border-radius: 999px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 2px 4px rgba(0,0,0,0.6);
}
.res-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;

    background: radial-gradient(circle at top, #f3d88c, #9c6b2f);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        0 1px 3px rgba(0,0,0,0.6);
}

/* slight variation per resource (optional but helps visual separation) */
.res-icon.wood { background: radial-gradient(circle at top, #cfa66a, #7a4f22); }
.res-icon.stone { background: radial-gradient(circle at top, #cfcfcf, #6b6b6b); }
.res-icon.coin { background: radial-gradient(circle at top, #ffd77a, #a36a1f); }
.res-icon.scroll { background: radial-gradient(circle at top, #e6dcc5, #8a7b5a); }
.res-icon.people { background: radial-gradient(circle at top, #d89b6a, #7a3f22); }
.res-value {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #f5edcf;
}
.top-icon {
    position: relative;
}

/* inner icon */
.top-icon::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 4px;

    background: radial-gradient(circle at top, #f3d88c, #9c6b2f);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        0 1px 3px rgba(0,0,0,0.6);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* differentiate buttons slightly */
.top-icon.mail::before { border-radius: 3px; }
.top-icon.settings::before { border-radius: 50%; }
.resource-bar::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 56px;
    height: 56px;

    background: transparent;
    border-radius: 50%;

    box-shadow: inset 0 0 0 999px rgba(0,0,0,0);
    transform: translateY(-50%);
}
.top-bar {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    height: 72px;
    display: flex;
    align-items: center;
    z-index: 20;
    justify-content: space-between;
}
.hero-avatar {
    position: absolute;
    left: 18px;
    top: -10px;

    width: 92px;
    height: 92px;

    z-index: 30;

    animation: avatarIn 0.7s ease-out forwards;
}

.hero-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;

    border: 5px solid #d6b36a;
    background: #1a1916;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.25),
        0 14px 26px rgba(0,0,0,0.9);
}
.hero-frame {
    position: absolute;
    top: 0px;
    left: 16px;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    padding: 6px;
    background: linear-gradient(#e1c07a, #9e7a33);
    z-index: 30;
}

.hero-frame img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;

    background: #1a1916;
}
.right-widget {
    position: absolute;
    top: 110px;
    right: 24px;
    width: 260px;

    background: linear-gradient(#2b2a26, #1a1916);
    border: 2px solid #c8a45d;
    border-radius: 14px;

    padding: 10px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.85);
}
.right-widget {
    position: absolute;
    top: 50px;
    right: 24px;
    width: 260px;
    background: linear-gradient(#2b2a26b5, #1a1916cc);
    border: 2px solid #c8a45d4d;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.85);
}
.mini-map {
    border: 2px solid #c8a45d;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.mini-map img {
    width: 100%;
    display: block;
}
.stats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stat {
    display: grid;
    grid-template-columns: 26px 32px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 0px;
}
.stat .icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at top, #f0d28c, #8a672a);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.stat .value {
    color: #f5e6c8;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}
.bar {
    height: 10px;
    background: rgba(0,0,0,0.6);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
}

.bar span {
    display: block;
    height: 100%;
    border-radius: 6px;
}
.bar.green span   { background: linear-gradient(#9fd36c, #4e7c2f); }
.bar.teal span    { background: linear-gradient(#6ccfc1, #2f6e66); }
.bar.gold span    { background: linear-gradient(#e7c86a, #9b7a2f); }
.bar.amber span   { background: linear-gradient(#f1b75d, #8a5a1f); }
.bar.silver span  { background: linear-gradient(#d6d6d6, #8c8c8c); }
.bar.red span     { background: linear-gradient(#d96a6a, #7a2f2f); }
.bar.purple span  { background: linear-gradient(#9a8ad9, #4b3a7a); }
.level-badge {
    margin-top: 16px;
    text-align: center;
    padding: 14px 0;

    border-top: 2px solid rgba(200,164,93,0.4);
}

.level-badge .level {
    display: inline-block;
    width: 92px;
    height: 92px;
    line-height: 92px;

    font-size: 28px;
    font-weight: 700;
    color: #fff;

    border-radius: 50%;
    background: radial-gradient(circle at top, #f3d68a, #9e7a33);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.4),
        0 12px 24px rgba(0,0,0,0.8);
}
.level-widget {
    margin-top: 16px;
    padding-top: 0px;
    border-top: 2px solid rgba(200,164,93,0.4);
    text-align: center;
}

/* קונטיינר העיטור */
.level-ornament {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

/* תמונת העיטור */
.level-ornament img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* המספר במרכז */
.level-number {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Roboto', 'Heebo', serif;
    font-size: 34px;
    font-weight: 700;

    color: #ffffff;

    text-shadow:
        0 2px 0 #000,
        0 4px 12px rgba(0,0,0,0.9);
}
.level-ornament {
    animation: levelGlow 2.5s ease-in-out infinite;
}

@keyframes levelGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255,215,120,0.4)); }
    50%      { filter: drop-shadow(0 0 14px rgba(255,215,120,0.9)); }
}
/* Overlay */
.guest-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 10, 14, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}

/* Login Box */
.guest-box {
    background: rgba(25, 25, 35, 0.95);
    padding: 40px 48px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
    max-width: 420px;
    width: 100%;
}

.guest-box h1 {
    margin: 0 0 12px;
    font-size: 32px;
    color: #f5f5f7;
}

.guest-box p {
    margin: 0 0 28px;
    color: #b5b5c5;
    font-size: 15px;
}

/* Google Button */
.google-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff;
    color: #222;
    padding: 14px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease;
}

.google-login-btn img {
    width: 18px;
    height: 18px;
}

.google-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}


@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Rajdhani:wght@400;500&display=swap');

.onboarding-commander {
  position: fixed;
  inset: 0;
  font-family: 'Orbitron', sans-serif;
  color: #eaf3ff;
}

.background {
  position: absolute;
  inset: 0;
  background: url('/assets/images/onboarding.jpg') center/cover no-repeat;
  filter: brightness(0.45);
}

.hud-frame {
    position: relative;
    width: 800px;
    height: 650px;
    margin: 6vh auto;
    background: rgba(8,16,32,0.75);
    border: 1px solid rgba(120,180,255,0.35);
    box-shadow: 0 0 80px rgba(80,150,255,0.4);
    display: flex;
    flex-direction: column;
}

.hud-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #6fb3ff;
}

.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.character {
    position: relative;
    z-index: 0;
}

.character img {
    position: absolute;
    left: -145px;
    max-height: 650px;
    top: 0px;
}

.form {
    width: 60%;
    padding: 40px 60px;
    z-index: 1;
    margin: 0 auto;
    font-family: 'Rajdhani';
}

h1 {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 2px;
  font-size: 26px;
  margin: 0;
}

.subtitle {
    opacity: 0.75;
    margin: 8px 0 28px;
    font-size: 20px;
    color: #fff;
    text-shadow: 2px -1px 10px #ffffffdb;
}

.field {
  margin-bottom: 16px;
}

label {
    display: block;
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 6px;
    font-size: 16px;
    text-shadow: 0px 0px 6px #000;
    color: #FFF !important;
}

select, input, textarea {
    width: 100%;
    background: rgba(10,20,40,0.9);
    border: 1px solid rgba(120,180,255,0.35);
    color: #fff;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 18px;
        border-radius: 7px;
    box-shadow: 0px 0px 16px 1px #000;
}

.birth {
  display: flex;
  gap: 8px;
}

textarea {
  height: 90px;
}

.counter {
    text-align: right;
    font-size: 12px;
    font-family: 'heebo';
    color: #ffffff6b;
}

/* Country dropdown */
.country-field {
  position: relative;
}

#country-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(10,20,40,0.98);
  border: 1px solid rgba(120,180,255,0.35);
  max-height: 180px;
  overflow-y: auto;
  display: none;
  z-index: 10;
}

.country-item {
  padding: 8px 12px;
  cursor: pointer;
}

.country-item:hover {
  background: rgba(120,180,255,0.15);
}
/* Onboarding must override login overlay */
.onboarding-commander {
    z-index: 10000;
}
/* Disable login overlay when onboarding is present */
#onboarding-overlay ~ .guest-overlay,
body:has(#onboarding-overlay) .guest-overlay {
    display: none !important;
}
/* Country dropdown items */
#country-dropdown .country-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    cursor: pointer;
}

/* Flags size fix */
#country-dropdown .country-item img {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Country name */
#country-dropdown .country-item span {
    font-size: 14px;
    line-height: 1;
}
/* Pronouns buttons */
.pronouns {
    display: flex;
    gap: 10px;
}

.pronouns button {
    flex: 1;
    padding: 10px 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    background: rgba(10,20,40,0.9);
    border: 1px solid rgba(120,180,255,0.35);
    color: #cfe4ff;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 7px;
    box-shadow: 0px 0px 16px 1px #000;
}

/* Hover */
.pronouns button:hover {
    box-shadow: 0 0 12px rgba(120,180,255,0.5);
}

/* Selected */
.pronouns button.active {
    background: linear-gradient(135deg, #5bb0ff, #1f6fff);
    border-color: #8fc5ff;
    color: #ffffff;
    box-shadow: 0 0 22px rgba(90,160,255,0.9);
}
/* ===============================
   CONTINUE BUTTON – BASE
================================ */
/* ===============================
   CONTINUE BUTTON – FINAL SIZES
================================ */

.continue-btn {
    position: relative;
    width: 583px; /* 101 + 383 + 99 */
    height: 132px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
}

/* layers */
.continue-btn .btn-layer {
    position: absolute;
    inset: 0;
    display: flex;
    transition: opacity 0.35s ease;
}

.continue-btn .hover {
    opacity: 0;
}

/* LEFT */
.continue-btn .btn-left {
    width: 101px;
    height: 132px;
    background-size: 101px 132px;
    background-repeat: no-repeat;
}

/* CENTER */
.continue-btn .btn-center {
    width: 383px;
    height: 131px;
    margin-top: 1px; /* יישור מול הצדדים */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #eaf4ff;
    background-size: 383px 131px;
    background-repeat: no-repeat;
}

/* RIGHT */
.continue-btn .btn-right {
    width: 99px;
    height: 132px;
    background-size: 99px 132px;
    background-repeat: no-repeat;
}

/* NORMAL */
.continue-btn .normal .btn-left {
    background-image: url('/assets/images/btn-continue-left.png');
}
.continue-btn .normal .btn-center {
    background-image: url('/assets/images/btn-continue-center-hover.png');
}
.continue-btn .normal .btn-right {
    background-image: url('/assets/images/btn-continue-right.png');
}

/* HOVER */
.continue-btn .hover .btn-left {
    background-image: url('/assets/images/btn-continue-left-hover.png');
}
.continue-btn .hover .btn-center {
    background-image: url('/assets/images/btn-continue-center.png');
}
.continue-btn .hover .btn-right {
    background-image: url('/assets/images/btn-continue-right-hover.png');
}

/* FADE */
.continue-btn:hover .hover {
    opacity: 1;
}
.continue-btn:hover .normal {
    opacity: 0;
}

/* DISABLED */
.continue-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}
button.continue-btn {
    margin-left: -110px;
    margin-top: -20px;
}
.continue-btn:disabled .hover {
    opacity: 0 !important;
}
.home-hero {
    min-height: 100vh;
    background: url('/assets/images/home/homebg.jpg') center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.home-content {
    max-width: 900px;
    padding: 40px;
    color: #f5e9c8;
}

.home-logo {
    max-width: 520px;
    margin-bottom: 30px;
}

/* =========================================================
   HOME – TYPOGRAPHY (HEEBO)
   ========================================================= */

.home-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 46px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin: 40px 0 12px;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.6),
        0 0 14px rgba(255, 215, 140, 0.35);
}

.home-subtitle {
    font-family: 'Heebo', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 48px;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.6);
}

.home-legal {
    margin-top: 36px;
    font-family: 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.4px;
    color: rgba(255,255,255,0.65);
}

.home-legal a {
    color: #e6c77a;
    text-decoration: none;
}

.home-legal a:hover {
    text-decoration: underline;
}


/* =========================================================
   AUTH GOLDEN BUTTON (LOGIN)
   ========================================================= */

.auth-golden-btn {
    position: relative;
    display: block;
    width: 583px;
    height: 132px;
    margin: 40px auto;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.auth-golden-btn *,
.auth-golden-btn *::before,
.auth-golden-btn *::after {
    box-sizing: border-box;
}

/* layers */
.auth-golden-btn .btn-layer {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.auth-golden-btn .hover {
    opacity: 0;
}

/* LEFT */
.auth-golden-btn .btn-left {
    width: 101px;
    height: 132px;
    flex: 0 0 101px;
    background-repeat: no-repeat;
    background-size: 101px 132px;
}

/* CENTER */
.auth-golden-btn .btn-center {
    flex: 1 1 auto;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #fff;
    padding-top: 0px;
    background-repeat: repeat-x;
    background-size: auto 132px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65),
        0 0 6px rgba(255, 255, 255, 0.35);
    padding-bottom: 10px;
}

/* RIGHT */
.auth-golden-btn .btn-right {
    width: 99px;
    height: 132px;
    flex: 0 0 99px;
    background-repeat: no-repeat;
    background-size: 99px 132px;
}


/* =========================================================
   BUTTON ASSETS MAPPING (CORRECT)
   golden_01 → LEFT
   golden_04 → CENTER
   golden_03 → RIGHT
   ========================================================= */

/* NORMAL */
.auth-golden-btn .normal .btn-left {
    background-image: url('/assets/images/home/golden_01.png');
}

.auth-golden-btn .normal .btn-center {
    background-image: url('/assets/images/home/golden_04.png');
}

.auth-golden-btn .normal .btn-right {
    background-image: url('/assets/images/home/golden_03.png');
}

/* HOVER (same assets – unless you add hover versions) */
.auth-golden-btn .hover .btn-left {
    background-image: url('/assets/images/home/golden_01.png');
}

.auth-golden-btn .hover .btn-center {
    background-image: url('/assets/images/home/golden_04.png');
}

.auth-golden-btn .hover .btn-right {
    background-image: url('/assets/images/home/golden_03.png');
}

/* FADE */
.auth-golden-btn:hover .hover {
    opacity: 1;
}

.auth-golden-btn:hover .normal {
    opacity: 0;
}

.home-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: url('/assets/images/home/homebg.jpg') center center / cover no-repeat;
}

/* שכבת רקע נעה */
.home-hero::before {
    content: '';
    position: absolute;
    inset: -5%;
    background: url('/assets/images/home/homebg.jpg') center center / cover no-repeat;
    animation: bg-drift 40s ease-in-out infinite;
    z-index: 0;
}

@keyframes bg-drift {
    0% {
        transform: scale(1);
        background-position: 50% 50%;
    }
    50% {
        transform: scale(1.05);
        background-position: 52% 48%;
    }
    100% {
        transform: scale(1);
        background-position: 50% 50%;
    }
}

.ember-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.ember {
    position: absolute;
    bottom: -10%;
    width: 9px;
    height: 9px;
    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(200, 220, 255, 1) 0%,
        rgba(200, 220, 255, 0.7) 35%,
        rgba(200, 220, 255, 0.0) 70%
    );

    filter: blur(0.8px);

    animation-name: ember-float, ember-flicker;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}


@keyframes ember-float {
    0% {
        transform: translateY(0) scale(0.6);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    80% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-120vh) scale(1.2);
        opacity: 0;
    }
}
.home-content {
    position: relative;
    z-index: 2;
}
.ember:nth-child(3n) {
    width: 15px;
    height: 15px;
    filter: blur(0.5px);
}

.ember:nth-child(5n) {
    width: 5px;
    height: 5px;
    filter: blur(1.2px);
}
@keyframes ember-flicker {
    0%, 100% {
        opacity: 0.9;
    }
    50% {
        opacity: 0.6;
    }
}
/* =========================
   MOBILE ADJUSTMENTS
========================= */
@media (max-width: 768px) {

    html, body {
        overflow: hidden;
    }

    /* ---------- HOME HERO ---------- */
    .home-hero {
        padding: 20px;
        background-position: center top;
    }

    .home-content {
        padding: 10px;
        max-width: 100%;
    }

    .home-logo {
        max-width: 300px;
        margin-bottom: 20px;
    }

    .home-title {
        font-size: 26px;
        margin: 24px 0 10px;
    }

    .home-subtitle {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .home-legal {
        font-size: 11px;
        margin-top: 24px;
    }

    /* ---------- AUTH BUTTON ---------- */
  /* ===== FIX AUTH GOLDEN BUTTON ===== */

    .auth-golden-btn {
        width: 100%;
        max-width: 320px;
        height: 76px;
        margin: 24px auto;
    }

    .auth-golden-btn .btn-layer {
        height: 76px;
    }

    .auth-golden-btn .btn-left {
        width: 52px;
        height: 76px;
        background-size: 52px 76px;
        flex: 0 0 52px;
    }

    .auth-golden-btn .btn-right {
        width: 52px;
        height: 76px;
        background-size: 52px 76px;
        flex: 0 0 52px;
    }

.auth-golden-btn .btn-center {
    height: 76px;
    background-size: auto 76px;
    font-size: 15px;
    letter-spacing: 1.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 6px;
    padding-bottom: 4px;
}

    /* ---------- EMBERS ---------- */
    .ember {
        width: 6px;
        height: 6px;
        filter: blur(0.6px);
    }

    .ember:nth-child(3n) {
        width: 10px;
        height: 10px;
    }

    .ember:nth-child(5n) {
        width: 4px;
        height: 4px;
    }

   
}
/* =========================================
   FADE-IN SEQUENCE (LOGO → TEXT → BUTTON)
========================================= */

.fade-sequence .fade-item {
    opacity: 0;
    transform: translateY(18px);
    animation: fadeUp 0.9s ease-out forwards;
}

/* delays */
.fade-sequence .fade-item:nth-child(1) { animation-delay: 0.2s; }
.fade-sequence .fade-item:nth-child(2) { animation-delay: 0.5s; }
.fade-sequence .fade-item:nth-child(3) { animation-delay: 0.8s; }
.fade-sequence .fade-item:nth-child(4) { animation-delay: 1.2s; }
.fade-sequence .fade-item:nth-child(5) { animation-delay: 1.6s; }

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.title-box {
    display: flex;
    align-items: center;
    width: 80%;
    height: 110px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: -40px;
    margin-bottom: -20px;
}

.title-left,
.title-right {
    width: 100px;
    height: 110px;
    flex: 0 0 100px;
    background-repeat: no-repeat;
    background-size: 100% 110px;
}

.title-left {
    background-image: url('../images/header_left.png');
}

.title-right {
    background-image: url('../images/header_right.png');
}

.title-center {
    flex: 1 1 auto;
    height: 110px;
    background-image: url('../images/header_center.png');
    background-repeat: repeat-x;
    background-size: auto 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    background-position: center;
}

/* =========================
   ONBOARDING – MOBILE ONLY
========================= */
@media (max-width: 768px) {

    /* בסיס */
    .onboarding-commander {
        overflow-y: auto;
    }



    .background {
        filter: brightness(0.35);
    }

    /* HUD FRAME */
    .hud-frame {
        width: 100%;
        height: auto;
        margin: 0;
        min-height: 100vh;
        border: none;
        box-shadow: none;
        padding-bottom: 40px;
    }

    .hud-corner {
        display: none;
    }

    /* כותרת */
    .title-box {
        margin: 20px 0 10px;
        height: 70px;
    }

    .title-left,
    .title-right {
        width: 40px;
        height: 70px;
        background-size: 100% 70px;
    }

    .title-center {
        height: 70px;
        font-size: 14px;
        letter-spacing: 1px;
        background-size: auto 70px;
        padding: 0 6px;
        text-align: center;
    }

    /* הסתרת הדמות */
    .character {
        display: none;
    }

    /* FORM */
    .form {
        width: 100%;
        padding: 20px 18px 0;
        margin: 0;
    }

    h1 {
        font-size: 20px;
        text-align: center;
    }

.subtitle {
    font-size: 15px;
    margin: -15px 0 30px;
    text-align: center;
}

    label {
        font-size: 14px;
    }

    select,
    input,
    textarea {
        font-size: 16px;
        padding: 10px;
    }

    textarea {
        height: 80px;
    }

    /* Birth fields */
    .birth {
        gap: 6px;
    }

    /* Pronouns */
    .pronouns {
        gap: 8px;
    }

    .pronouns button {
        font-size: 15px;
        padding: 10px 0;
        letter-spacing: 0.5px;
    }

    /* Country dropdown */
    #country-dropdown {
        max-height: 140px;
    }

    /* Counter */
    .counter {
        font-size: 11px;
    }

    /* CONTINUE BUTTON */
    button.continue-btn {
        width: 100%;
        max-width: 320px;
        height: 76px;
        margin: 24px auto 0;
        display: block;
        transform: none;
        margin-left: auto;
        margin-right: auto;
    }

    .continue-btn .btn-layer {
        height: 76px;
    }

.continue-btn .btn-left, .continue-btn .btn-right {
    width: 70px;
    height: 76px;
    background-size: 52px 76px;
    background-position: center;
}

.continue-btn .btn-center {
    height: 76px;
    font-size: 14px;
    letter-spacing: 1px;
    background-size: auto 75px;
    padding: 0 6px;
    white-space: nowrap;
    background-repeat: repeat-x;
}

.title-box {
    display: block;
}
}

i.fa-brands.fa-google {
    margin-right: 17px;
}