/* ========================================
   RHYTHM FORGE - Main Styles
   ======================================== */

/* CSS Variables */
:root {
    --fire-orange: #FF6B35;
    --hot-metal: #FFD700;
    --dark-forge: #1A1A2E;
    --darker-forge: #0F0F1A;
    --steel-gray: #C0C0C0;
    --steel-light: #E8E8E8;
    --perfect-glow: #00FFD1;
    --great-glow: #00FF88;
    --good-glow: #FFDD00;
    --miss-red: #FF4757;

    --font-primary: 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Georgia', serif;

    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px var(--fire-orange);
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-primary);
    background-color: var(--dark-forge);
    color: var(--steel-light);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

input, textarea {
    user-select: text;
    -webkit-user-select: text;
}

/* ========================================
   SCREENS
   ======================================== */

.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dark-forge) 0%, var(--darker-forge) 100%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    overflow-x: hidden;
}

.screen.active {
    display: flex;
    opacity: 1;
}

/* ========================================
   KINGDOM INTRO SCREEN
   ======================================== */

#kingdom-intro-screen {
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.kingdom-intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    text-align: center;
    padding: 2rem;
    gap: 0.6rem;
}

.kingdom-intro-chapter {
    font-size: clamp(0.7rem, 2.5vw, 0.9rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 6px;
    opacity: 0;
    animation: fadeInDown 0.6s ease forwards;
}

.kingdom-intro-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 9vw, 3.5rem);
    font-weight: bold;
    letter-spacing: 4px;
    opacity: 0;
    animation: kingdom-title-in 1s ease 0.3s forwards;
}

.kingdom-intro-subtitle {
    font-size: clamp(0.8rem, 3vw, 1rem);
    font-style: italic;
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.8s forwards;
}

.kingdom-intro-tap {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(0.8rem, 3vw, 0.95rem);
    color: rgba(255, 255, 255, 0.6);
    opacity: 0;
    animation: fadeIn 0.5s ease 2s forwards, pulse 1.5s ease 2.5s infinite;
    letter-spacing: 2px;
}

.kingdom-intro-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.kingdom-leaf {
    position: absolute;
    top: -20px;
    border-radius: 0 50% 50% 50%;
    animation: leaf-fall linear infinite;
    opacity: 0;
}

.kingdom-spark {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    box-shadow: 0 0 4px currentColor;
    animation: spark-rise ease-out infinite;
    opacity: 0;
}

.kingdom-drop {
    position: absolute;
    top: -10px;
    border-radius: 40% 40% 50% 50%;
    animation: drop-fall ease-in infinite;
    opacity: 0;
}

.kingdom-sand {
    position: absolute;
    top: 50%;
    border-radius: 50%;
    animation: sand-blow linear infinite;
    opacity: 0;
}

.kingdom-flame {
    position: absolute;
    bottom: -10px;
    border-radius: 50% 50% 20% 20%;
    box-shadow: 0 0 6px currentColor;
    animation: flame-rise ease-out infinite;
    opacity: 0;
}

.kingdom-snow {
    position: absolute;
    top: -10px;
    border-radius: 50%;
    animation: snow-fall linear infinite;
    opacity: 0;
}

.kingdom-crystal {
    position: absolute;
    top: -10px;
    border-radius: 2px;
    transform: rotate(45deg);
    box-shadow: 0 0 4px currentColor;
    animation: crystal-shimmer linear infinite;
    opacity: 0;
}

.kingdom-shadow {
    position: absolute;
    top: 50%;
    border-radius: 50%;
    filter: blur(2px);
    animation: shadow-drift ease-in-out infinite;
    opacity: 0;
}

.kingdom-light {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
    animation: light-rise ease-out infinite;
    opacity: 0;
}

.kingdom-void {
    position: absolute;
    top: 50%;
    border-radius: 50%;
    animation: void-pulse ease-in-out infinite;
    opacity: 0;
}

/* ========================================
   WELCOME SCREEN (mobile)
   ======================================== */

#welcome-screen {
    background: radial-gradient(ellipse at 50% 60%, #1a1225 0%, #0a0a12 100%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.welcome-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    gap: 0.8rem;
    z-index: 1;
    animation: fadeIn 0.8s ease forwards;
}

.welcome-icon {
    font-size: clamp(2.5rem, 10vw, 4rem);
    color: var(--steel-gray);
    opacity: 0.5;
    margin-bottom: 1rem;
}

.welcome-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: bold;
    color: var(--hot-metal);
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
}

.welcome-text {
    font-size: clamp(0.8rem, 3vw, 1rem);
    color: var(--steel-gray);
    opacity: 0.7;
    max-width: 280px;
    line-height: 1.5;
}

.welcome-sound-icon {
    font-size: 2.5rem;
    margin: 1rem 0;
    animation: pulse 2s ease infinite;
    filter: drop-shadow(0 0 8px rgba(255, 165, 0, 0.4));
}

.welcome-tap {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem);
    color: var(--hot-metal);
    margin-top: 1.5rem;
    letter-spacing: 2px;
    animation: pulse 1.5s ease infinite;
}

/* ========================================
   SPLASH SCREEN
   ======================================== */

#splash-screen {
    background: radial-gradient(ellipse at 50% 80%, #2a1a0e 0%, var(--darker-forge) 70%);
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    text-align: center;
    padding: 2rem;
    gap: 0.5rem;
}

.splash-anvil {
    font-size: clamp(3rem, 12vw, 5rem);
    color: var(--steel-gray);
    text-shadow: 0 0 15px rgba(192, 192, 192, 0.3);
    animation: glow-pulse 2.5s ease infinite;
    margin-bottom: 0.5rem;
}

.splash-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 10vw, 5rem);
    font-weight: bold;
    color: var(--hot-metal);
    letter-spacing: 5px;
    text-shadow:
        0 0 10px var(--fire-orange),
        0 0 30px rgba(255, 107, 53, 0.5),
        0 0 60px rgba(255, 107, 53, 0.2);
    background: linear-gradient(180deg, var(--hot-metal) 0%, var(--fire-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: splash-title-in 1.2s ease forwards;
}

.splash-subtitle {
    font-size: clamp(0.8rem, 3vw, 1rem);
    color: var(--steel-gray);
    opacity: 0;
    font-style: italic;
    letter-spacing: 1px;
    animation: fadeInUp 0.8s ease 0.6s forwards;
}

.splash-tap {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem);
    color: var(--hot-metal);
    margin-top: 2rem;
    opacity: 0;
    animation: fadeIn 0.5s ease 1.2s forwards, pulse 1.5s ease 1.7s infinite;
    letter-spacing: 2px;
}

.splash-version {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: rgba(192, 192, 192, 0.3);
    letter-spacing: 1px;
}

.splash-embers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.splash-ember {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hot-metal) 0%, var(--fire-orange) 60%, transparent 100%);
    box-shadow: 0 0 6px var(--fire-orange);
    animation: ember-float linear infinite;
    opacity: 0;
}

/* ========================================
   STORY INTRO SCREEN
   ======================================== */

#story-screen {
    background: #050508;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ── Slides ── */
.story-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    gap: 1rem;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
}

.story-slide.active {
    display: flex;
    opacity: 1;
}

/* Backgrounds par slide */
.story-slide[data-slide="1"] {
    background: radial-gradient(ellipse at 50% 60%, rgba(255, 215, 0, 0.08) 0%, transparent 60%);
}

.story-slide[data-slide="2"] {
    background: radial-gradient(ellipse at 50% 50%, rgba(180, 30, 30, 0.15) 0%, transparent 60%);
}

.story-slide[data-slide="3"] {
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 107, 53, 0.1) 0%, transparent 55%);
}

.story-slide[data-slide="4"] {
    background: radial-gradient(ellipse at 50% 55%, rgba(255, 215, 0, 0.12) 0%, transparent 50%);
}

.story-slide[data-slide="5"] {
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 107, 53, 0.15) 0%, #050508 70%);
}

/* ── Textes ── */
.story-main {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 5vw, 2.2rem);
    font-style: italic;
    line-height: 1.5;
    color: transparent;
    background: linear-gradient(180deg, var(--hot-metal) 0%, var(--fire-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.4));
    opacity: 0;
    animation: storyTextIn 0.8s ease 0.3s forwards;
    max-width: 80%;
}

.story-sub {
    font-family: var(--font-primary);
    font-size: clamp(0.8rem, 3vw, 1.1rem);
    color: var(--steel-gray);
    opacity: 0;
    animation: fadeInUp 0.6s ease 1s forwards;
    max-width: 75%;
    line-height: 1.4;
}

/* ── Icone enclume (slide 4) ── */
.story-icon {
    font-size: clamp(3rem, 12vw, 5rem);
    color: var(--hot-metal);
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
    animation: glow-pulse 2s ease infinite;
    margin-bottom: 0.5rem;
}

/* ── Titre final (slide 5) ── */
.story-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 10vw, 5rem);
    font-weight: bold;
    letter-spacing: 6px;
    color: transparent;
    background: linear-gradient(180deg, var(--hot-metal) 0%, var(--fire-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(255, 107, 53, 0.6));
    opacity: 0;
    animation: splash-title-in 1.2s ease 0.2s forwards;
}

.story-final {
    font-size: clamp(1rem, 3.5vw, 1.4rem);
    font-style: italic;
    color: var(--steel-light);
    animation-delay: 0.8s;
}

/* ── Bouton Passer ── */
.story-skip {
    position: fixed;
    bottom: 2rem;
    right: 1.5rem;
    z-index: 10;
    background: none;
    border: 1px solid rgba(192, 192, 192, 0.25);
    border-radius: 20px;
    color: rgba(192, 192, 192, 0.5);
    font-family: var(--font-primary);
    font-size: 0.85rem;
    padding: 0.4rem 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.story-skip:hover,
.story-skip:active {
    color: var(--steel-light);
    border-color: rgba(192, 192, 192, 0.5);
}

/* ── Particules ── */
.story-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.story-ember {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
    animation: ember-float linear infinite;
    opacity: 0;
}

/* Couleurs particules par thème */
.story-particles.theme-gold .story-ember { color: var(--hot-metal); background: radial-gradient(circle, var(--hot-metal) 0%, rgba(255, 215, 0, 0.4) 60%, transparent 100%); }
.story-particles.theme-dark .story-ember { color: #cc2222; background: radial-gradient(circle, #cc2222 0%, rgba(180, 30, 30, 0.4) 60%, transparent 100%); }
.story-particles.theme-fire .story-ember { color: var(--fire-orange); background: radial-gradient(circle, var(--fire-orange) 0%, rgba(255, 107, 53, 0.4) 60%, transparent 100%); }

/* ── Keyframe texte story ── */
@keyframes storyTextIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
        filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.4)) blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.4)) blur(0);
    }
}

/* Shake léger (slide 2) */
@keyframes storyShake {
    0%, 100% { transform: translate(0, 0); }
    15% { transform: translate(-3px, 1px); }
    30% { transform: translate(2px, -2px); }
    45% { transform: translate(-1px, 2px); }
    60% { transform: translate(3px, -1px); }
    75% { transform: translate(-2px, -1px); }
}

/* ========================================
   LOADING SCREEN
   ======================================== */

#loading-screen {
    background: radial-gradient(circle at center, var(--dark-forge) 0%, var(--darker-forge) 100%);
}

.loading-content {
    text-align: center;
    padding: 2rem;
}

.game-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: bold;
    color: var(--hot-metal);
    text-shadow:
        0 0 10px var(--fire-orange),
        0 0 30px rgba(255, 107, 53, 0.5);
    letter-spacing: 4px;
    margin-bottom: 2rem;
}

.loading-bar {
    width: 250px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin: 1rem auto;
}

.loading-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--fire-orange), var(--hot-metal));
    border-radius: 4px;
    transition: width var(--transition-fast);
}

.loading-text {
    color: var(--steel-gray);
    font-size: 0.9rem;
    margin-top: 1rem;
}

/* ========================================
   MENU SCREEN
   ======================================== */

#menu-screen {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding: 2rem 0;
}

.menu-content {
    text-align: center;
    padding: 1rem 2rem 2rem;
    width: 100%;
    max-width: 400px;
}

/* Player Pseudo */
.player-pseudo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 25px;
    margin: 0 auto 1rem;
    max-width: fit-content;
}

.pseudo-icon {
    font-size: 1.1rem;
    opacity: 0.8;
}

.pseudo-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hot-metal);
}

.cloud-status {
    font-size: 0.9rem;
    color: var(--perfect-glow);
    cursor: help;
}

.cloud-status.offline {
    color: var(--steel-gray);
    opacity: 0.5;
}

.auth-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    margin: -0.3rem auto 0.5rem;
    background: rgba(255, 107, 53, 0.12);
    border: 1px solid rgba(255, 107, 53, 0.25);
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--transition-fast);
    max-width: fit-content;
    animation: subtlePulse 3s ease-in-out infinite;
}

.auth-banner:active {
    transform: scale(0.97);
}

.auth-banner.hidden {
    display: none;
}

.auth-banner-icon {
    font-size: 0.75rem;
}

.auth-banner-text {
    font-size: 0.72rem;
    color: var(--fire-orange);
    font-weight: 600;
}

@keyframes subtlePulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* ========================================
   MENU SECTIONS & LAYOUT
   ======================================== */
.menu-section {
    width: 100%;
    max-width: 340px;
}

.menu-play {
    display: flex;
    gap: 10px;
    margin-top: 1.2rem;
}

.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.menu-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.menu-link-sep {
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.8rem;
}

/* ========================================
   MENU BUTTONS (full-width for modals, results, etc.)
   ======================================== */
.menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--steel-light);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    font-family: var(--font-primary);
}

.menu-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left var(--transition-slow);
}

.menu-btn:hover::before {
    left: 100%;
}

.menu-btn:hover {
    border-color: var(--fire-orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.menu-btn:active {
    transform: translateY(0);
}

.menu-btn.primary {
    background: linear-gradient(135deg, var(--fire-orange) 0%, #FF8855 100%);
    border-color: var(--hot-metal);
    color: white;
}

.menu-btn.primary:hover {
    background: linear-gradient(135deg, #FF7744 0%, var(--hot-metal) 100%);
}

.menu-btn.danger {
    background: linear-gradient(135deg, var(--miss-red) 0%, #FF6666 100%);
    border-color: var(--miss-red);
}

.menu-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.menu-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.menu-btn.small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    width: auto;
}

/* ========================================
   PLAY BUTTONS (Campagne / Infini)
   ======================================== */
.menu-btn-play {
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 10px 6px;
    font-size: 0.8rem;
    min-width: 0;
    text-align: center;
}

.menu-btn-play .btn-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.menu-btn-play .btn-text {
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.btn-icon {
    font-size: 1.3rem;
}

.btn-lock {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.6rem;
    opacity: 0.7;
}

/* ========================================
   MENU TILES (grille carrée)
   ======================================== */
.menu-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    color: var(--steel-light);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    font-family: var(--font-primary);
}

.menu-tile:hover {
    border-color: var(--fire-orange);
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.03) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.15);
}

.menu-tile:active {
    transform: translateY(0);
}

.tile-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.tile-text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Petites tuiles (stats/classement/succès/progression) */
.tile-sm {
    padding: 10px 6px;
    gap: 4px;
}

.tile-sm .tile-icon {
    font-size: 1.3rem;
}

.tile-sm .tile-text {
    font-size: 0.68rem;
}

/* ========================================
   MENU TEXT LINKS (bas de page)
   ======================================== */
.menu-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 10px;
    transition: color 0.2s ease;
}

.menu-link:hover {
    color: var(--fire-orange);
}

.menu-link.admin-btn {
    margin-top: 4px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.25);
}

/* ========================================
   COFFRE QUOTIDIEN (bouton menu)
   ======================================== */
.daily-chest-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 340px;
    margin-top: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 165, 0, 0.06) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    color: #FFD700;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.daily-chest-btn:hover {
    border-color: #FFD700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
    transform: translateY(-1px);
}

.daily-chest-btn:active {
    transform: translateY(0);
}

.daily-chest-btn.chest-claimed {
    opacity: 0.4;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.35);
}

/* Coffre au trésor dessiné en CSS — vue de face */
.chest-icon {
    position: relative;
    width: 26px;
    height: 22px;
    flex-shrink: 0;
}

/* Corps + couvercle en une pièce */
.chest-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        #E8B830 0%, #C89020 36%,
        #5A3D0A 36%, #5A3D0A 42%,
        #9A6510 42%, #7A4E0C 72%, #4C3008 100%
    );
    border: 1.5px solid #3A2506;
    border-radius: 4px 4px 3px 3px;
    box-shadow:
        inset 0 1px 2px rgba(255,255,200,0.3),
        inset 0 -2px 3px rgba(0,0,0,0.3);
}

/* Petit cadeau en biais sur le coin supérieur gauche */
.chest-gift {
    position: absolute;
    top: -4px;
    left: -2px;
    font-size: 0.7rem;
    transform: rotate(-15deg);
    z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    line-height: 1;
}

.chest-icon-lg .chest-gift {
    top: -8px;
    left: -4px;
    font-size: 1.5rem;
}

/* Serrure centrale */
.chest-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 7px;
    background: radial-gradient(circle at 50% 30%, #FFE566, #DAA520);
    border: 1px solid #8B6914;
    border-radius: 1px;
    z-index: 1;
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
}

.chest-label {
    letter-spacing: 0.3px;
}

/* Coffre overlay de récompense */
.chest-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.chest-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.chest-reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    animation: chestReveal 0.6s ease-out;
}

.chest-reward-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--chest-color) 0%, transparent 70%);
    opacity: 0.25;
    animation: chestGlow 2s ease-in-out infinite;
}

.chest-box {
    animation: chestBounce 0.5s ease-out 0.2s both;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Version large du coffre CSS pour l'overlay */
.chest-icon-lg {
    width: 90px;
    height: 74px;
}

.chest-icon-lg::before {
    border-width: 3px;
    border-radius: 8px 8px 6px 6px;
    box-shadow:
        inset 0 2px 4px rgba(255,255,200,0.3),
        inset 0 -4px 8px rgba(0,0,0,0.3);
}

.chest-icon-lg::after {
    width: 18px;
    height: 20px;
    border-width: 2px;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.chest-reward-icon {
    font-size: 2.2rem;
    animation: chestBounce 0.5s ease-out 0.4s both;
}

.chest-reward-label {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--chest-color);
    letter-spacing: 0.5px;
    animation: chestBounce 0.5s ease-out 0.6s both;
}

.chest-claimed-hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 8px;
    animation: chestBounce 0.5s ease-out 0.8s both;
}

@keyframes chestReveal {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes chestGlow {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.2); opacity: 0.35; }
}

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

/* Player Stats */
.player-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.stat-icon {
    font-size: 1.4rem;
}

.stat-icon.gold {
    color: var(--hot-metal);
}

.stat-icon.gems {
    color: #00D4FF;
}

/* ========================================
   LEVEL SELECT SCREEN
   ======================================== */

.screen-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.back-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--steel-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.screen-title {
    font-size: 1.3rem;
    font-weight: 600;
}

/* ========================================
   KINGDOM LEVEL SELECT - THEMED
   ======================================== */

#level-screen {
    transition: background 0.6s ease;
    position: relative;
}

.kingdom-tabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.75rem 0.5rem;
    overflow-x: auto;
    width: 100%;
    position: relative;
    z-index: 1;
}

.kingdom-tab {
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--steel-gray);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    font-size: 0.7rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 75px;
    position: relative;
}

.kingdom-tab-number {
    font-size: 0.6rem;
    opacity: 0.5;
    letter-spacing: 1px;
}

.kingdom-tab-name {
    font-size: 0.65rem;
    font-weight: 600;
}

.kingdom-tab.active {
    background: linear-gradient(135deg,
        var(--kingdom-color, var(--fire-orange)),
        rgba(0,0,0,0.4));
    color: white;
    border-color: var(--kingdom-color, var(--hot-metal));
    box-shadow: 0 0 12px color-mix(in srgb, var(--kingdom-color, var(--fire-orange)) 50%, transparent);
    transform: scale(1.05);
}

.kingdom-tab:disabled {
    cursor: not-allowed;
}

.kingdom-lock {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.55rem;
}

/* Kingdom header */
.kingdom-header {
    text-align: center;
    padding: 0.5rem 1rem 0.2rem;
    position: relative;
    z-index: 1;
    animation: fadeIn 0.4s ease;
}

.kingdom-chapter {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    margin-bottom: 0.15rem;
}

.kingdom-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.1rem;
}

.kingdom-subtitle {
    font-size: 0.7rem;
    font-style: italic;
    opacity: 0.6;
}

/* Level screen particles */
.level-screen-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.level-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    animation: levelParticleFloat linear infinite;
}

@keyframes levelParticleFloat {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    15% { opacity: 0.5; }
    50% { opacity: 0.3; }
    85% { opacity: 0.15; }
    100% { opacity: 0; transform: translateY(-90px) translateX(20px) scale(1.1); }
}

/* Levels grid */
.levels-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    padding: 0.75rem;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    overflow-y: auto;
    flex: 1;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.level-btn {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: var(--steel-light);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 0;
    padding: 0.25rem;
}

.level-btn:hover:not(:disabled) {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.level-btn.completed {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 255, 136, 0.05) 100%);
    border-color: rgba(0, 255, 136, 0.3);
}

.level-btn.current {
    animation: pulse-glow 2s infinite;
}

.level-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.level-btn.boss {
    border-width: 3px;
}

.level-stars {
    display: flex;
    gap: 2px;
    font-size: 0.6rem;
    margin-top: 4px;
}

.star {
    color: rgba(255, 255, 255, 0.25);
}

.star.filled {
    color: var(--hot-metal);
}

.screen-header {
    position: relative;
    z-index: 1;
}

/* ========================================
   BOSS RUSH
   ======================================== */
.menu-btn-boss {
    background: linear-gradient(135deg, #3D1A1A 0%, #1A1A2E 100%) !important;
    border-color: #CC3333 !important;
}
.menu-btn-boss:not(:disabled):hover {
    border-color: #FF4444 !important;
    box-shadow: 0 0 18px rgba(255, 50, 50, 0.4);
}
.menu-btn-boss:not(:disabled) .btn-icon {
    filter: drop-shadow(0 0 6px rgba(255, 50, 50, 0.6));
}

.bossrush-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    overflow-y: auto;
    flex: 1;
    box-sizing: border-box;
}

.boss-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.6rem 0.3rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-height: 90px;
}
.boss-card:hover:not(.locked) {
    transform: scale(1.04);
    border-color: rgba(255, 80, 80, 0.5);
    box-shadow: 0 0 12px rgba(255, 50, 50, 0.25);
}
.boss-card.locked {
    opacity: 0.3;
    cursor: not-allowed;
}
.boss-card.completed {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 255, 136, 0.03) 100%);
    border-color: rgba(0, 255, 136, 0.25);
}

.boss-card-id {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--hot-metal);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}
.boss-card.locked .boss-card-id {
    color: rgba(255, 255, 255, 0.3);
    text-shadow: none;
}

.boss-card-name {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-top: 4px;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boss-card-stars {
    display: flex;
    gap: 2px;
    margin-top: 4px;
    font-size: 0.6rem;
}
.boss-card-stars .star {
    color: rgba(255, 255, 255, 0.2);
}
.boss-card-stars .star.filled {
    color: var(--hot-metal);
}

.boss-card-lock {
    font-size: 1.2rem;
    opacity: 0.5;
}

/* ========================================
   GAME SCREEN
   ======================================== */

#game-screen {
    padding: 0;
    background: transparent;
}

#game-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.game-ui {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.game-ui > * {
    pointer-events: auto;
}

/* Score Display */
.score-display {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2rem;
    text-align: center;
}

.combo-counter, .score-counter {
    display: flex;
    flex-direction: column;
}

.combo-value, .score-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--hot-metal);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.combo-label, .score-label {
    font-size: 0.7rem;
    color: var(--steel-gray);
    letter-spacing: 2px;
}

/* Timing Indicator */
.timing-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 4px;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.timing-indicator.perfect {
    color: var(--perfect-glow);
    text-shadow: 0 0 20px var(--perfect-glow);
}

.timing-indicator.great {
    color: var(--great-glow);
    text-shadow: 0 0 20px var(--great-glow);
}

.timing-indicator.good {
    color: var(--good-glow);
    text-shadow: 0 0 20px var(--good-glow);
}

.timing-indicator.miss {
    color: var(--miss-red);
    text-shadow: 0 0 20px var(--miss-red);
}

/* Tap Zone - Caché car dessiné sur le canvas */
.tap-zone {
    display: none;
}

/* Progress Bar */
.progress-bar {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 400px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--fire-orange), var(--hot-metal));
    border-radius: 4px;
    transition: width 0.1s ease;
}

/* Pause Button */
.pause-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: var(--steel-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pause-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: var(--fire-orange);
}

/* Badge de niveau en jeu */
.game-level-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 20;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    pointer-events: none;
}

/* ========================================
   RESULTS SCREEN
   ======================================== */

.results-content {
    text-align: center;
    padding: 2rem;
    width: 100%;
    max-width: 400px;
}

.results-title {
    font-size: 2rem;
    color: var(--hot-metal);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    margin-bottom: 1.5rem;
}

.results-title.defeat {
    color: var(--miss-red);
    text-shadow: 0 0 20px rgba(255, 71, 87, 0.5);
}

.results-level-badge {
    display: inline-block;
    padding: 0.3rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    margin: 0.3rem auto 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
}

.results-level-badge.hidden {
    display: none;
}

.infinite-level-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.4rem 1.2rem;
    background: linear-gradient(135deg, rgba(138,43,226,0.3), rgba(75,0,130,0.3));
    border: 1px solid rgba(138,43,226,0.5);
    border-radius: 20px;
    margin: 0.3rem auto 0.5rem;
    font-size: 1rem;
    color: #dda0ff;
    width: fit-content;
}

.infinite-icon {
    font-size: 1.3rem;
    color: #c084fc;
}

.infinite-milestone-msg {
    font-size: 0.85rem;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin-bottom: 0.3rem;
    font-weight: 600;
    animation: pulse-glow 1.5s infinite;
}

.weapon-display {
    width: 150px;
    height: 150px;
    margin: 0 auto 1.5rem;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weapon-display img {
    max-width: 80%;
    max-height: 80%;
    filter: drop-shadow(0 0 10px var(--hot-metal));
}

.results-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}

.result-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.result-stat .stat-label {
    font-size: 0.8rem;
    color: var(--steel-gray);
}

.result-stat .stat-value {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--steel-light);
}

.result-stat .stat-value.perfect {
    color: var(--perfect-glow);
}

.result-stat .stat-value.great {
    color: var(--great-glow);
}

.result-stat .stat-value.good {
    color: var(--good-glow);
}

.rewards-display {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem;
    font-weight: bold;
}

.reward-icon {
    font-size: 1.5rem;
}

.results-buttons {
    display: flex;
    gap: 1rem;
}

.results-buttons .menu-btn {
    flex: 1;
}

.results-buttons-secondary {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.6rem;
}

.results-secondary-btn {
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--steel-gray);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.results-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--steel-light);
}

.results-secondary-btn:active {
    transform: scale(0.95);
}

.results-secondary-btn span {
    margin-right: 0.2rem;
}

/* Results Animations */
.results-content .results-title,
.results-content .results-stats,
.results-content .reward-item,
.results-content .rune-drop-display,
.results-content .results-buttons,
.results-content .results-buttons-secondary {
    opacity: 0;
}

.results-content.animated .results-title {
    opacity: 1;
}

.results-content.animated .results-stats {
    animation: fadeInUp 0.4s ease forwards;
    animation-delay: 200ms;
}

.results-content.animated .reward-item {
    animation: rewardPop 0.4s ease forwards;
}

.results-content.animated .reward-item:first-child {
    animation-delay: 500ms;
}

.results-content.animated .reward-item:nth-child(2) {
    animation-delay: 650ms;
}

.results-content.animated .rune-drop-display {
    animation: bounceIn 0.5s ease forwards;
    animation-delay: 900ms;
}

.results-content.animated .results-buttons {
    animation: fadeIn 0.3s ease forwards;
    animation-delay: 1100ms;
}

.results-content.animated .results-buttons-secondary {
    animation: fadeIn 0.3s ease forwards;
    animation-delay: 1300ms;
}

@keyframes rewardPop {
    0% { opacity: 0; transform: scale(0); }
    60% { opacity: 1; transform: scale(1.25); }
    80% { transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.08); }
    70% { transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}

/* ========================================
   MODALS
   ======================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.modal.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: linear-gradient(135deg, var(--dark-forge) 0%, var(--darker-forge) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 2rem;
    width: 90%;
    max-width: 350px;
    text-align: center;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h2 {
    font-size: 1.5rem;
}

.close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: transparent;
    border: none;
    color: var(--steel-gray);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.close-btn:hover {
    color: var(--miss-red);
}

/* Settings */
.settings-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setting-item label {
    font-size: 1rem;
    color: var(--steel-light);
}

.setting-item input[type="range"] {
    width: 120px;
    height: 6px;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    outline: none;
}

.setting-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--fire-orange);
    border-radius: 50%;
    cursor: pointer;
}

.setting-item input[type="checkbox"] {
    width: 24px;
    height: 24px;
    accent-color: var(--fire-orange);
    cursor: pointer;
}

.settings-legal {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.8rem;
}
.settings-legal a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s;
}
.settings-legal a:hover {
    color: var(--hot-metal);
    text-decoration: underline;
}
.legal-sep {
    color: rgba(255, 255, 255, 0.2);
    margin: 0 0.5rem;
}

/* Pause */
.pause-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ========================================
   CONTROLS GUIDE
   ======================================== */

/* ==================== CONTROLS GUIDE MODAL ==================== */

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

.controls-guide {
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    animation: controlsSlideUp 0.4s ease-out;
}

.controls-guide .modal-header h2 {
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}

.controls-content {
    text-align: left;
}

.controls-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(255,107,53,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255,107,53,0.1);
}

.controls-section h3 {
    font-size: 0.95rem;
    color: var(--hot-metal);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Game Explanation Steps */
.game-explanation {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.explanation-step {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.8rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border-radius: 10px;
    border-left: 3px solid var(--fire-orange);
    transition: transform 0.2s ease, background 0.2s ease;
}

.explanation-step:hover {
    transform: translateX(4px);
    background: linear-gradient(135deg, rgba(255,107,53,0.12) 0%, rgba(255,255,255,0.04) 100%);
}

.step-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: rgba(255,107,53,0.15);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(255,107,53,0.2);
}

.step-text {
    flex: 1;
}

.step-text strong {
    display: block;
    font-size: 0.9rem;
    color: var(--hot-metal);
    margin-bottom: 2px;
}

.step-text p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--steel-light);
    line-height: 1.3;
}

/* Controls List */
.controls-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.control-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0.8rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border-radius: 8px;
    border-left: 3px solid rgba(255,107,53,0.4);
}

.control-action {
    color: var(--steel-light);
    font-size: 0.88rem;
    font-weight: 500;
}

.control-keys {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.key-badge {
    padding: 0.2rem 0.55rem;
    background: linear-gradient(135deg, rgba(255,107,53,0.25) 0%, rgba(255,107,53,0.1) 100%);
    border: 1px solid rgba(255,107,53,0.5);
    border-radius: 6px;
    font-size: 0.78rem;
    font-family: monospace;
    color: var(--hot-metal);
    box-shadow: 0 1px 4px rgba(255,107,53,0.15);
}

/* Timing Legend */
.timing-intro {
    font-size: 0.82rem;
    color: var(--steel-gray);
    margin-bottom: 0.6rem;
}

.timing-legend {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.timing-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.15s ease;
}

.timing-item:hover {
    transform: translateX(3px);
}

.timing-icon {
    font-size: 1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.timing-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: bold;
    min-width: 70px;
    text-align: center;
    letter-spacing: 0.5px;
}

.timing-item.perfect .timing-badge {
    background: var(--perfect-glow);
    color: #000;
    box-shadow: 0 0 10px rgba(255,215,0,0.35);
}

.timing-item.great .timing-badge {
    background: var(--great-glow);
    color: #000;
    box-shadow: 0 0 10px rgba(0,200,255,0.3);
}

.timing-item.good .timing-badge {
    background: var(--good-glow);
    color: #000;
    box-shadow: 0 0 10px rgba(0,255,100,0.25);
}

.timing-item.miss .timing-badge {
    background: var(--miss-red);
    color: #fff;
    box-shadow: 0 0 10px rgba(255,50,50,0.3);
}

.timing-desc {
    font-size: 0.82rem;
    color: var(--steel-gray);
    font-weight: 500;
}

.controls-guide .menu-btn {
    width: 100%;
    margin-top: 1rem;
}

/* Quick Controls Hint */
.quick-hint {
    position: fixed;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--fire-orange);
    border-radius: 25px;
    color: var(--hot-metal);
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 50;
    animation: pulse-glow 2s infinite;
    pointer-events: none;
}

.quick-hint.hidden {
    display: none;
}

/* ========================================
   HOW TO PLAY GUIDE
   ======================================== */

.how-to-play-guide {
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
}

.how-to-play-content {
    text-align: left;
}

.game-phase {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border-left: 4px solid var(--fire-orange);
}

.game-phase.objective {
    border-left-color: var(--hot-metal);
    background: rgba(255, 215, 0, 0.05);
}

.game-phase.controls-summary {
    border-left-color: var(--perfect-glow);
    background: rgba(0, 255, 209, 0.05);
}

.phase-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.phase-icon {
    font-size: 1.5rem;
}

.phase-header h3 {
    font-size: 1.1rem;
    color: var(--hot-metal);
    margin: 0;
}

.phase-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--steel-light);
}

.phase-description p {
    margin: 0 0 0.5rem 0;
}

.phase-description strong {
    color: var(--hot-metal);
}

.phase-tips {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
}

.phase-tips li {
    padding: 0.3rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tip-perfect {
    color: var(--perfect-glow);
    font-weight: 600;
}

.tip-great {
    color: var(--great-glow);
    font-weight: 600;
}

.tip-good {
    color: var(--good-glow);
    font-weight: 600;
}

.tip-miss {
    color: var(--miss-red);
    font-weight: 600;
}

.phase-result {
    margin-top: 0.75rem !important;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-style: italic;
}

/* Controls Summary */
.controls-inline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.control-summary-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.platform-label {
    font-weight: 600;
    color: var(--steel-gray);
    min-width: 60px;
}

.control-keys-inline {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 107, 53, 0.15);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--hot-metal);
}

.how-to-play-guide .menu-btn {
    width: 100%;
    margin-top: 1rem;
}

/* ========================================
   COLLECTION
   ======================================== */

.collection-container {
    max-width: 450px;
    max-height: 85vh;
}

.collection-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.collection-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.collection-stat .stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--hot-metal);
}

.collection-stat .stat-label {
    font-size: 0.75rem;
    color: var(--steel-gray);
}

.collection-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.filter-btn {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid transparent;
    border-radius: 20px;
    color: var(--steel-gray);
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.filter-btn.active {
    background: var(--fire-orange);
    color: white;
    border-color: var(--hot-metal);
}

.filter-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.15);
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
}

@media (min-width: 400px) {
    .collection-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.weapon-card {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 0;
}

.weapon-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--fire-orange);
    transform: scale(1.05);
}

.weapon-card.quality-perfect {
    border-color: var(--perfect-glow);
    background: rgba(0, 255, 209, 0.1);
}

.weapon-card.quality-great {
    border-color: var(--great-glow);
    background: rgba(0, 255, 136, 0.08);
}

.weapon-card.quality-good {
    border-color: var(--good-glow);
    background: rgba(255, 221, 0, 0.08);
}

.weapon-icon {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.weapon-name {
    font-size: 0.7rem;
    color: var(--steel-light);
    text-align: center;
    line-height: 1.2;
}

.weapon-quality {
    font-size: 0.6rem;
    font-weight: 600;
    margin-top: 0.25rem;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
}

.weapon-quality.perfect {
    background: var(--perfect-glow);
    color: #000;
}

.weapon-quality.great {
    background: var(--great-glow);
    color: #000;
}

.weapon-quality.good {
    background: var(--good-glow);
    color: #000;
}

.collection-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--steel-gray);
}

.empty-icon {
    font-size: 3rem;
    opacity: 0.5;
    display: block;
    margin-bottom: 1rem;
}

.empty-hint {
    font-size: 0.85rem;
    margin-top: 0.5rem;
    opacity: 0.7;
}

/* ========================================
   LEADERBOARD
   ======================================== */

.leaderboard-container {
    max-width: 400px;
    max-height: 80vh;
}

.leaderboard-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.leaderboard-tab {
    flex: 1;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    border-radius: 8px;
    color: var(--steel-gray);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.leaderboard-tab.active {
    background: var(--fire-orange);
    color: white;
    border-color: var(--hot-metal);
}

.leaderboard-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.15);
}

.level-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.level-selector label {
    font-size: 0.85rem;
    color: var(--steel-gray);
}

.level-selector select {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: var(--steel-light);
    font-size: 0.9rem;
    cursor: pointer;
}

.level-selector select:focus {
    outline: none;
    border-color: var(--fire-orange);
}

.level-selector select option {
    background: var(--dark-forge);
    color: var(--steel-light);
}

.leaderboard-content {
    min-height: 300px;
    max-height: 50vh;
    overflow-y: auto;
}

.leaderboard-loading,
.leaderboard-offline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--steel-gray);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--fire-orange);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.offline-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: all var(--transition-fast);
}

.leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.leaderboard-item.current-player {
    background: rgba(255, 107, 53, 0.15);
    border: 1px solid var(--fire-orange);
}

.leaderboard-rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--steel-gray);
}

.leaderboard-item:nth-child(1) .leaderboard-rank {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333;
}

.leaderboard-item:nth-child(2) .leaderboard-rank {
    background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
    color: #333;
}

.leaderboard-item:nth-child(3) .leaderboard-rank {
    background: linear-gradient(135deg, #CD7F32, #A0522D);
    color: white;
}

.leaderboard-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.leaderboard-pseudo {
    font-weight: 600;
    color: var(--steel-light);
    font-size: 0.95rem;
}

.leaderboard-details {
    font-size: 0.75rem;
    color: var(--steel-gray);
}

.leaderboard-score {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--hot-metal);
}

.leaderboard-empty {
    text-align: center;
    padding: 2rem;
    color: var(--steel-gray);
}

.leaderboard-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* ========================================
   STATISTICS
   ======================================== */

.stats-container {
    max-width: 400px;
    max-height: 85vh;
    overflow-y: auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all var(--transition-fast);
}

.stat-box:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--fire-orange);
}

.stat-box.perfect {
    background: rgba(0, 255, 209, 0.08);
    border-color: rgba(0, 255, 209, 0.3);
}

.stat-box-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.stat-box-value {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--hot-metal);
}

.stat-box-label {
    font-size: 0.7rem;
    color: var(--steel-gray);
    text-align: center;
    margin-top: 0.25rem;
}

.stats-details {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 1rem;
}

.stats-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stats-detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 0.9rem;
    color: var(--steel-gray);
}

.detail-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--steel-light);
}

.detail-value.gold {
    color: var(--hot-metal);
}

/* ========================================
   WEAPON DETAILS
   ======================================== */

.weapon-details-container {
    max-width: 350px;
}

.weapon-detail-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
    border-radius: 16px;
    margin-bottom: 1.5rem;
}

.weapon-detail-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 15px var(--hot-metal));
}

.weapon-detail-quality {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.weapon-detail-quality.perfect {
    background: var(--perfect-glow);
    color: #000;
}

.weapon-detail-quality.great {
    background: var(--great-glow);
    color: #000;
}

.weapon-detail-quality.good {
    background: var(--good-glow);
    color: #000;
}

.weapon-detail-info {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 1rem;
}

.weapon-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.weapon-info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 0.9rem;
    color: var(--steel-gray);
}

.info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--steel-light);
}

/* ========================================
   ACHIEVEMENTS
   ======================================== */

.achievements-container {
    max-width: 420px;
    max-height: 85vh;
}

.achievements-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.achievements-progress-bar {
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.achievements-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--fire-orange), var(--hot-metal));
    border-radius: 5px;
    transition: width var(--transition-normal);
}

.achievements-progress-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hot-metal);
    min-width: 60px;
    text-align: right;
}

.achievements-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.achievement-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all var(--transition-fast);
}

.achievement-item.unlocked {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.3);
}

.achievement-item.locked {
    opacity: 0.5;
}

.achievement-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.achievement-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.achievement-item.unlocked .achievement-icon {
    background: linear-gradient(135deg, var(--fire-orange), var(--hot-metal));
}

.achievement-item.locked .achievement-icon {
    filter: grayscale(1);
}

.achievement-info {
    flex: 1;
    min-width: 0;
}

.achievement-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--steel-light);
    margin-bottom: 0.25rem;
}

.achievement-item.unlocked .achievement-name {
    color: var(--hot-metal);
}

.achievement-desc {
    font-size: 0.8rem;
    color: var(--steel-gray);
    line-height: 1.3;
}

.achievement-reward {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--hot-metal);
    font-weight: 600;
    flex-shrink: 0;
}

.achievement-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--great-glow);
    flex-shrink: 0;
}

/* ========================================
   UTILITIES
   ======================================== */

.hidden {
    display: none !important;
}

.fade-in {
    animation: fadeIn var(--transition-normal) forwards;
}

.fade-out {
    animation: fadeOut var(--transition-normal) forwards;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 480px) {
    .levels-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.35rem;
        padding: 0.5rem;
    }

    .level-btn {
        font-size: 0.85rem;
        border-radius: 8px;
        border-width: 1.5px;
        padding: 0.15rem;
    }

    .level-btn.boss {
        border-width: 2px;
    }

    .level-stars {
        font-size: 0.5rem;
        gap: 1px;
        margin-top: 2px;
    }

    .kingdom-tab {
        padding: 0.4rem 0.75rem;
        font-size: 0.7rem;
    }

    .kingdom-tabs {
        padding: 0.5rem;
        gap: 0.35rem;
    }

    .score-display {
        gap: 1rem;
    }

    .combo-value, .score-value {
        font-size: 1.5rem;
    }

    .tap-zone {
        width: 100px;
        height: 100px;
    }

    .tap-center {
        width: 50px;
        height: 50px;
    }

    /* Statistics responsive */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-box-value {
        font-size: 1.2rem;
    }

    /* Achievements responsive */
    .achievement-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .achievement-icon {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .achievement-name {
        font-size: 0.85rem;
    }

    .achievement-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 360px) {
    .levels-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.25rem;
        padding: 0.4rem;
    }

    .level-btn {
        font-size: 0.75rem;
        border-radius: 6px;
    }
}

@media (min-height: 800px) {
    .tap-zone {
        bottom: 20%;
    }
}

/* ========================================
   SHOP
   ======================================== */

.shop-container {
    max-width: 420px;
    max-height: 85vh;
}

.shop-currency {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--steel-light);
}

.shop-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 58vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.shop-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all var(--transition-fast);
}

.shop-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.shop-item.maxed {
    opacity: 0.5;
    border-color: rgba(0, 255, 136, 0.3);
}

.shop-item-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.shop-item-info {
    flex: 1;
    min-width: 0;
}

.shop-item-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--steel-light);
}

.shop-item-desc {
    font-size: 0.75rem;
    color: var(--steel-gray);
    margin-top: 0.15rem;
}

.shop-item-level {
    font-size: 0.7rem;
    color: var(--hot-metal);
    margin-top: 0.15rem;
}

.shop-buy-btn {
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    background: linear-gradient(135deg, var(--fire-orange), var(--hot-metal));
    color: #FFF;
    white-space: nowrap;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.shop-buy-btn:hover:not(:disabled) {
    transform: scale(1.05);
    filter: brightness(1.15);
}

.shop-buy-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.shop-buy-btn.gem-btn {
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
}

.shop-buy-btn.maxed-btn {
    background: rgba(0, 255, 136, 0.2);
    color: #00FF88;
    cursor: default;
}

/* ========================================
   SHOP TABS
   ======================================== */
.shop-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 3px;
}

.shop-tab {
    flex: 1;
    padding: 8px 4px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.shop-tab.active {
    background: linear-gradient(135deg, var(--fire-orange), #FF8C42);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
}

.shop-tab:not(.active):hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
}

/* ========================================
   GEM PACKS
   ======================================== */
.gem-pack {
    border: 1px solid rgba(155, 89, 182, 0.4) !important;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(142, 68, 173, 0.05)) !important;
}

.gem-pack-icon {
    font-size: 1.5rem !important;
    color: #9B59B6 !important;
    position: relative;
    overflow: visible;
}

.gem-tier-badge {
    position: absolute;
    bottom: -2px;
    right: -4px;
    font-size: 0.55rem;
    font-weight: 800;
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    color: #fff;
    border-radius: 6px;
    padding: 1px 4px;
    line-height: 1.2;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.gem-tier-2 .gem-pack-icon { font-size: 1.5rem !important; }
.gem-tier-3 .gem-pack-icon { font-size: 1.6rem !important; }
.gem-tier-4 .gem-pack-icon { font-size: 1.7rem !important; }

.gem-bonus {
    display: inline-block;
    background: linear-gradient(135deg, #27AE60, #2ECC71);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
}

.iap-btn {
    background: linear-gradient(135deg, #9B59B6, #8E44AD) !important;
    min-width: 70px;
}

.iap-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #8E44AD, #7D3C98) !important;
}

/* ========================================
   SHOP TOAST
   ======================================== */
.shop-toast {
    position: fixed;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2A2A3E, #1A1A2E);
    border: 1px solid var(--fire-orange);
    border-radius: 10px;
    padding: 10px 20px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 10000;
    transition: bottom 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.shop-toast.visible {
    bottom: 30px;
}

/* ========================================
   MONSTER HP ON DEFEAT SCREEN
   ======================================== */
.monster-hp-display {
    width: 100%;
    max-width: 280px;
    margin: 8px auto 4px;
    text-align: center;
}

.monster-hp-display.hidden {
    display: none;
}

.monster-hp-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
    font-weight: 600;
}

.monster-hp-bar-container {
    position: relative;
    width: 100%;
}

.monster-hp-bar-bg {
    width: 100%;
    height: 14px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.monster-hp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #FF4757, #FF6B6B);
    border-radius: 7px;
    transition: width 1s ease;
    min-width: 0;
}

.monster-hp-text {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

/* ========================================
   COMBAT LOG
   ======================================== */
.combat-log-container { margin: 0.6rem 0; }
.combat-log-container.hidden { display: none; }

.combat-log-toggle {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: var(--steel-gray);
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    width: 100%;
    cursor: pointer;
    font-weight: 600;
}

.combat-log {
    max-height: 180px;
    overflow-y: auto;
    margin-top: 0.4rem;
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    padding: 0.4rem;
}
.combat-log.hidden { display: none; }

.log-turn-group {
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.72rem;
}
.log-turn-group:last-child { border-bottom: none; }
.log-turn-group.log-player { color: #4FC3F7; }
.log-turn-group.log-monster { color: #EF5350; }

.log-turn-header {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
    font-weight: 700;
    font-size: 0.68rem;
    opacity: 0.7;
}

.log-icon { font-size: 0.8rem; width: 1.2rem; text-align: center; }
.log-turn { color: var(--steel-gray); }

.log-hit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.12rem 0 0.12rem 1.5rem;
    font-size: 0.72rem;
}

.log-hit-label {
    opacity: 0.85;
}

.log-hit-value {
    font-weight: 700;
    min-width: 2rem;
    text-align: right;
}

.log-crit { color: #FFD700; font-size: 0.65rem; font-weight: 800; }
.log-effect-poison, .log-effect-dot_tick { color: #88FF44; }
.log-effect-double_strike { color: #44CCFF; }
.log-effect-aoe { color: #FF8800; }
.log-effect-stun { color: #FFFF44; }
.log-effect-defense_break { color: #FF8844; }
.log-effect-shield { color: #44AAFF; }
.log-effect-magic_orb { color: #B388FF; }

.results-content.animated .combat-log-container {
    animation: fadeInUp 0.4s ease forwards;
    animation-delay: 0.9s;
    opacity: 0;
}

/* ========================================
   RUNE DELETE BUTTON
   ======================================== */
.rune-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 71, 87, 0.7);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rune-item {
    position: relative;
}

.rune-item:hover .rune-delete-btn,
.rune-item:active .rune-delete-btn {
    opacity: 1;
}

.rune-delete-btn:hover {
    background: rgba(255, 71, 87, 1);
}

/* ========================================
   RUNE PROC FLASH
   ======================================== */
@keyframes runeProc {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 170, 0, 0); }
    30% { transform: scale(1.08); box-shadow: 0 0 20px var(--rune-proc-color, rgba(255, 170, 0, 0.6)); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 170, 0, 0); }
}

/* ========================================
   CONSUMABLE INDICATOR IN COMBAT
   ======================================== */
.consumable-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

/* ========================================
   NOTIFICATION DOT (POINT ROUGE)
   ======================================== */
.notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    background: #FF4444;
    border-radius: 50%;
    border: 2px solid var(--dark-forge);
    box-shadow: 0 0 6px rgba(255, 68, 68, 0.8);
    animation: notifPulse 1.5s ease infinite;
    pointer-events: none;
}

.notif-dot.hidden {
    display: none;
}

@keyframes notifPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/* Shop tab notification dot */
.shop-tab-notif {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: #FF4444;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 68, 68, 0.8);
    animation: notifPulse 1.5s ease infinite;
    pointer-events: none;
}

.shop-tab-notif.hidden {
    display: none;
}

/* ========================================
   SUMMON (INVOCATION) SHOP TAB
   ======================================== */
.summon-header {
    text-align: center;
    padding: 12px 0 8px;
}

.summon-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--hot-metal);
    letter-spacing: 2px;
}

.summon-subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.summon-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    margin: 6px 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.summon-card.free-available {
    border-color: rgba(0, 255, 136, 0.4);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.06), rgba(0, 200, 100, 0.02));
}

.summon-card-icon {
    font-size: 2rem;
    width: 50px;
    text-align: center;
    flex-shrink: 0;
}

.summon-card-info {
    flex: 1;
    min-width: 0;
}

.summon-card-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.summon-card-desc {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}
.summon-card.summon-full {
    opacity: 0.5;
}
.summon-card.summon-full .summon-btn {
    opacity: 0.4;
}
.inv-full-warn {
    color: #f44336;
    font-weight: 600;
}

.summon-card-actions {
    flex-shrink: 0;
}

.summon-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.summon-btn.free-btn {
    background: linear-gradient(135deg, #00CC66, #00AA55);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 204, 102, 0.4);
    animation: notifPulse 2s ease infinite;
}

.summon-btn.free-btn:hover {
    background: linear-gradient(135deg, #00DD77, #00BB66);
    transform: scale(1.05);
}

.summon-btn.gem-cost-btn {
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    color: #fff;
}

.summon-btn.gem-cost-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #AA66CC, #9B55BB);
}

.summon-btn.gem-cost-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.summon-btn.gems-link-btn {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.2), rgba(142, 68, 173, 0.1));
    color: #BB88DD;
    border: 1px solid rgba(155, 89, 182, 0.3);
    width: 100%;
}

.summon-btn.gems-link-btn:hover {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.3), rgba(142, 68, 173, 0.2));
}

.summon-separator {
    text-align: center;
    padding: 12px 0 4px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
}

.summon-gems-link {
    text-align: center;
    padding: 4px 0;
}

/* ========================================
   SUMMON RESULT OVERLAY
   ======================================== */
.summon-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.summon-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.summon-result {
    text-align: center;
    animation: summonReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.summon-result-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--summon-color, #FFD700) 0%, transparent 70%);
    opacity: 0.3;
    animation: summonGlow 1.5s ease infinite;
}

.summon-result-icon {
    font-size: 4rem;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.summon-result-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

.summon-result-rarity {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    position: relative;
    z-index: 1;
}

@keyframes summonReveal {
    0% { transform: scale(0.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes summonGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }
}

/* Safe area for notched devices */
@supports (padding: max(0px)) {
    .screen-header {
        padding-top: max(1rem, env(safe-area-inset-top));
    }

    .progress-bar {
        bottom: max(5%, env(safe-area-inset-bottom) + 1rem);
    }
}

/* ========================================
   Achievement Toast
   ======================================== */
.achievement-toast {
    position: fixed;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2A2A3E, #1A1A2E);
    border: 2px solid var(--hot-metal);
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10000;
    transition: top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
    min-width: 250px;
}

.achievement-toast.show {
    top: 20px;
}

.achievement-toast-icon {
    font-size: 28px;
}

.achievement-toast-title {
    font-size: 10px;
    color: var(--hot-metal);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.achievement-toast-name {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.achievement-toast-reward {
    font-size: 12px;
    color: var(--hot-metal);
}

/* ========================================
   INVENTORY
   ======================================== */

.inventory-container {
    max-height: 85vh;
    padding: 1rem;
    width: 95%;
    max-width: 400px;
}

.inventory-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
}

.inventory-stat .stat-value {
    font-weight: bold;
    color: var(--hot-metal);
}

.inventory-equipped .stat-value {
    color: var(--perfect-glow);
    margin-left: 0.5rem;
}

.inventory-sort-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}
.sort-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    margin-right: 0.2rem;
}
.sort-btn {
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.sort-btn.active {
    background: rgba(255,215,0,0.15);
    border-color: rgba(255,215,0,0.4);
    color: var(--hot-metal);
    font-weight: 600;
}

.inventory-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem;
}

.inventory-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    position: relative;
    transition: all var(--transition-fast);
}

.inventory-item.equipped {
    box-shadow: 0 0 10px var(--perfect-glow);
}

.inventory-item.quality-perfect {
    border-color: var(--perfect-glow);
    background: rgba(0, 255, 209, 0.08);
}

.inventory-item.quality-great {
    border-color: var(--great-glow);
    background: rgba(0, 255, 136, 0.06);
}

.inventory-item.quality-good {
    border-color: var(--good-glow);
    background: rgba(255, 221, 0, 0.06);
}

.inventory-item .weapon-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}

.inventory-item .inv-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.inventory-item .inv-info .weapon-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--steel-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.inventory-item .inv-info .inv-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.inventory-item .weapon-quality {
    font-size: 0.55rem;
    padding: 0.1rem 0.35rem;
    margin: 0;
}

.inventory-item .weapon-damage {
    font-size: 0.65rem;
    color: var(--fire-orange);
    font-weight: bold;
}

.inventory-item .weapon-runes {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
}

.durability-bar {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    margin-top: 0.2rem;
    overflow: hidden;
}
.durability-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.durability-text {
    font-size: 0.55rem;
    display: block;
    margin-top: 0.1rem;
}

/* Bannière de mise à jour PWA */
#update-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: linear-gradient(135deg, #ff6b35, #f7c948);
    padding: 0.6rem 1rem;
    animation: slideDown 0.4s ease;
}
#update-banner .update-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 500px;
    margin: 0 auto;
    color: #1a1a2e;
    font-size: 0.85rem;
    font-weight: 600;
}
#btn-update-now {
    background: #1a1a2e;
    color: #f7c948;
    border: none;
    padding: 0.35rem 0.8rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
}
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.equipped-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: var(--perfect-glow);
    color: var(--dark-forge);
    font-weight: bold;
    font-size: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
}

.inv-btn {
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 5px;
    font-size: 0.6rem;
    font-weight: bold;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    text-align: center;
}

.equip-btn {
    background: var(--perfect-glow);
    color: var(--dark-forge);
}

.unequip-btn {
    background: rgba(255, 255, 255, 0.2);
    color: var(--steel-light);
}

.inv-delete-corner {
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 5px;
    font-size: 0.6rem;
    font-weight: bold;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    text-align: center;
    background: rgba(255, 71, 87, 0.2);
    color: rgba(255, 71, 87, 0.8);
}

.inv-delete-corner:active,
.inv-delete-corner.confirm {
    background: var(--miss-red);
    color: #fff;
}

.inv-btn:active {
    transform: scale(0.95);
    opacity: 0.8;
}

/* ========================================
   WEAPON CHOICE MODAL
   ======================================== */

.weapon-choice-container {
    text-align: center;
}

.weapon-choice-subtitle {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.weapon-choice-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.weapon-choice-card {
    flex: 1;
    max-width: 160px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

.weapon-choice-card:hover {
    border-color: var(--fire-orange);
    transform: scale(1.05);
    background: rgba(255, 107, 53, 0.1);
}

.weapon-choice-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    background: var(--fire-orange);
    color: #fff;
    font-size: 0.65rem;
    font-weight: bold;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.weapon-choice-badge.equipped {
    background: var(--perfect-glow);
    color: var(--dark-forge);
}

.weapon-choice-icon {
    font-size: 2.5rem;
    margin: 0.5rem 0;
}

.weapon-choice-name {
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.weapon-choice-quality {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.weapon-choice-quality.perfect {
    color: var(--perfect-glow);
}

.weapon-choice-quality.great {
    color: var(--great-glow);
}

.weapon-choice-quality.good {
    color: var(--good-glow);
}

.weapon-choice-damage {
    font-size: 0.8rem;
    color: var(--fire-orange);
    font-weight: bold;
}

.weapon-choice-vs {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--miss-red);
    text-shadow: 0 0 10px rgba(255, 71, 87, 0.5);
}

/* ========================================
   RUNES
   ======================================== */

.rune-container {
    max-height: 85vh;
}

.rune-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rune-tab {
    flex: 1;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--steel-light);
    font-weight: bold;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rune-tab.active {
    background: rgba(255, 107, 53, 0.2);
    border-color: var(--fire-orange);
    color: var(--fire-orange);
}

.rune-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    max-height: 50vh;
    overflow-y: auto;
    padding: 0.5rem;
}

.rune-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all var(--transition-fast);
}

.rune-item .rune-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    text-shadow: 0 0 8px currentColor;
}

.rune-item .rune-name {
    font-size: 0.7rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.15rem;
}

.rune-item .rune-effect {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.6);
}

.rune-item .rune-rarity-label {
    font-size: 0.55rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 0.2rem;
}

.rune-item .rune-equipped-label {
    font-size: 0.55rem;
    color: var(--perfect-glow);
    margin-top: 0.1rem;
}

/* Rune rarity colors (border, background, label — icon color is set by type via JS) */
.rarity-common { border-color: #999; }
.rarity-common .rune-rarity-label { color: #999; }

.rarity-rare { border-color: #4488ff; background: rgba(68, 136, 255, 0.08); }
.rarity-rare .rune-rarity-label { color: #4488ff; }

.rarity-epic { border-color: #bb44ff; background: rgba(187, 68, 255, 0.08); }
.rarity-epic .rune-rarity-label { color: #bb44ff; }

.rarity-legendary { border-color: #FFD700; background: rgba(255, 215, 0, 0.1); }
.rarity-legendary .rune-rarity-label { color: #FFD700; }

/* Rune Slots Panel */
.rune-slots-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(180deg, var(--dark-forge) 0%, var(--darker-forge) 100%);
    border-top: 2px solid rgba(255, 107, 53, 0.4);
    border-radius: 16px 16px 0 0;
    z-index: 150;
    animation: slideUp 0.25s ease;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.rune-slots-panel.hidden {
    display: none;
}

.rune-slots-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#rune-slots-weapon-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hot-metal);
}

.rune-slots-close {
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
}

.rune-slots-label {
    font-size: 0.7rem;
    color: var(--steel-gray);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0.5rem 0 0.4rem;
}

.rune-slots-container {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0;
}

.rune-slot-item {
    display: flex;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0.45rem 0.6rem;
    gap: 0.5rem;
}

.rune-slot-item.empty {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    justify-content: center;
    height: 42px;
}

.rune-slot-item.empty:active {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--fire-orange);
}

.rune-slot-plus {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.2);
}

.rune-slot-item.filled {
    border: 2px solid;
    background: rgba(255, 255, 255, 0.06);
}

.rune-slot-item.filled:active {
    transform: scale(0.97);
    opacity: 0.8;
}

.rune-slot-icon {
    font-size: 1.3rem;
    text-shadow: 0 0 10px currentColor;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.rune-slot-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}

.rune-slot-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rune-slot-effect {
    font-size: 0.65rem;
    font-weight: 500;
    opacity: 0.85;
}

.rune-slot-remove {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    transition: color var(--transition-fast);
}

.rune-slot-item.filled:active .rune-slot-remove {
    color: #ff6666;
}

.rune-slots-available {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    max-height: 30vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}

.rune-available-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rune-available-item:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--fire-orange);
}

.rune-avail-icon {
    font-size: 1.1rem;
    text-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}

.rune-avail-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--steel-light);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rune-avail-effect {
    font-size: 0.7rem;
    color: var(--great-glow);
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.rune-slots-full {
    font-size: 0.8rem;
    color: var(--steel-gray);
    text-align: center;
    padding: 0.8rem 0;
}

.inv-btn.rune-btn {
    background: rgba(187, 68, 255, 0.15);
    color: #bb88ff;
    border: 1px solid rgba(187, 68, 255, 0.3);
}

.inv-btn.rune-btn:active {
    background: rgba(187, 68, 255, 0.25);
}

/* Fusion */
.fusion-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-bottom: 1.5rem;
}

.fusion-slots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.fusion-slot {
    width: 60px;
    height: 60px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all var(--transition-fast);
}

.fusion-slot.filled {
    border-style: solid;
    font-size: 1.8rem;
}

.fusion-plus {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.3);
}

.fusion-group-btn {
    display: block;
    width: 100%;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--steel-light);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.fusion-group-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.fusion-none {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    padding: 1rem;
}

/* Rune Drop Display (results screen) */
.rune-drop-display {
    margin: 1rem 0;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    text-align: center;
    animation: runeDropPulse 1.5s ease infinite;
}

@keyframes runeDropPulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); }
}

.rune-drop-label {
    font-size: 0.75rem;
    color: var(--hot-metal);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.rune-drop-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.rune-drop-icon {
    font-size: 1.5rem;
}

.rune-drop-name {
    font-weight: bold;
    font-size: 0.9rem;
}

.rune-drop-rarity {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* ========================================
   DAILY CHALLENGES
   ======================================== */

.daily-challenges {
    width: 100%;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.daily-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.daily-header h3 {
    font-size: 0.9rem;
    color: var(--hot-metal);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.daily-timer {
    font-size: 0.75rem;
    color: var(--steel-gray);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.daily-timer-icon {
    font-size: 0.85rem;
}

.daily-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.daily-challenge-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all var(--transition-fast);
}

.daily-challenge-card.complete {
    border-color: var(--great-glow);
    background: rgba(0, 255, 136, 0.06);
}

.daily-challenge-card.claimed {
    opacity: 0.5;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.daily-challenge-info {
    flex: 1;
    min-width: 0;
}

.daily-challenge-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--steel-light);
}

.daily-challenge-desc {
    font-size: 0.65rem;
    color: var(--steel-gray);
    margin-top: 0.1rem;
}

.daily-challenge-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 60px;
}

.daily-progress-bar {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.daily-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fire-orange), var(--hot-metal));
    border-radius: 3px;
    transition: width var(--transition-normal);
}

.daily-challenge-card.complete .daily-progress-fill {
    background: linear-gradient(90deg, var(--great-glow), var(--perfect-glow));
}

.daily-progress-text {
    font-size: 0.6rem;
    color: var(--steel-gray);
}

.daily-challenge-reward {
    min-width: 55px;
    text-align: center;
}

.daily-claim-btn {
    padding: 0.35rem 0.6rem;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--fire-orange), var(--hot-metal));
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    cursor: pointer;
    transition: all var(--transition-fast);
    animation: pulse-glow 2s infinite;
}

.daily-claim-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.15);
}

.daily-reward-preview {
    font-size: 0.75rem;
    color: var(--steel-gray);
    font-weight: 600;
}

.daily-claimed-label {
    font-size: 0.65rem;
    color: var(--great-glow);
    font-weight: bold;
}

/* ==================== PROGRESSION ==================== */

.progression-container {
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.progression-overview {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.prog-stat {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.prog-bar {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.prog-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fire-orange), var(--hot-metal));
    border-radius: 5px;
    transition: width 0.5s ease;
    min-width: 0;
}

.prog-text {
    font-size: 0.85rem;
    color: var(--steel-light);
    font-weight: 600;
}

/* Kingdom Cards */
.progression-kingdoms {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
    max-height: 45vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
}

.kingdom-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--fire-orange);
    transition: all var(--transition-fast);
}

.kingdom-card.kingdom-locked {
    opacity: 0.45;
    border-left-color: var(--steel-gray);
}

.kingdom-card.kingdom-complete {
    border-left-color: var(--great-glow);
    background: rgba(0, 255, 136, 0.06);
}

.kingdom-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.kingdom-card-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--steel-light);
}

.kingdom-lock {
    font-size: 0.75rem;
    opacity: 0.6;
}

.kingdom-check {
    color: var(--great-glow);
    font-size: 0.85rem;
    font-weight: bold;
}

.kingdom-card-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.kingdom-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.kingdom-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fire-orange), var(--hot-metal));
    border-radius: 3px;
    transition: width 0.4s ease;
}

.kingdom-complete .kingdom-bar-fill {
    background: linear-gradient(90deg, var(--great-glow), var(--perfect-glow));
}

.kingdom-card-stats {
    font-size: 0.7rem;
    color: var(--steel-gray);
    min-width: 28px;
    text-align: right;
}

.kingdom-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
}

.kingdom-stars {
    color: var(--hot-metal);
}

.kingdom-boss {
    opacity: 0.4;
}

.kingdom-boss.defeated {
    opacity: 1;
    color: var(--great-glow);
}

/* Teaser */
.kingdom-teaser {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.8rem;
    border-radius: 8px;
    border: 1.5px dashed rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.04), rgba(255, 215, 0, 0.04));
}

.kingdom-teaser-dots {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 2px;
}

.kingdom-teaser-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--fire-orange);
    opacity: 0.4;
    animation: dotPulse 1.8s ease-in-out infinite;
}

.kingdom-teaser-dots span:nth-child(2) { animation-delay: 0.3s; }
.kingdom-teaser-dots span:nth-child(3) { animation-delay: 0.6s; }

@keyframes dotPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.7; }
}

.kingdom-teaser-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kingdom-teaser-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--steel-gray);
}

.kingdom-teaser-sub {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Summary */
.progression-summary {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 0.8rem;
}

.summary-row {
    display: flex;
    align-items: center;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-row:last-child {
    border-bottom: none;
}

.summary-icon {
    font-size: 1rem;
    width: 28px;
    text-align: center;
}

.summary-label {
    flex: 1;
    font-size: 0.8rem;
    color: var(--steel-gray);
    margin-left: 0.5rem;
}

.summary-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--steel-light);
}

/* ==================== AUTHENTIFICATION ==================== */

/* Pseudo cliquable */
.player-pseudo.clickable {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.player-pseudo.clickable:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: scale(1.03);
}

.player-pseudo.clickable:active {
    transform: scale(0.97);
}

.cloud-status.authenticated {
    color: var(--great-glow);
}

/* Auth Modal */
#auth-modal .modal-content {
    max-width: 360px;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
}

/* Auth Views */
.auth-view {
    animation: fadeIn 0.2s ease;
}

.auth-view.hidden {
    display: none;
}

/* Auth Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.auth-field label {
    font-size: 0.8rem;
    color: var(--steel-gray);
    font-weight: 600;
}

.auth-field input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--steel-light);
    font-size: 0.95rem;
    font-family: var(--font-primary);
    outline: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.auth-field input:focus {
    border-color: var(--fire-orange);
    background: rgba(255, 107, 53, 0.08);
}

.auth-field input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* Auth Buttons */
.auth-btn {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 0.3rem;
}

.auth-btn-primary {
    background: linear-gradient(135deg, var(--fire-orange), #e05520);
    color: white;
}

.auth-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.auth-btn-primary:active {
    transform: translateY(0);
}

.auth-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--steel-light);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
}

.auth-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}

.auth-btn-danger {
    background: rgba(255, 71, 87, 0.15);
    color: var(--miss-red);
    border: 1.5px solid rgba(255, 71, 87, 0.3);
}

.auth-btn-danger:hover {
    background: rgba(255, 71, 87, 0.25);
}

.auth-btn-small {
    padding: 0.5rem 0.8rem;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-primary);
    cursor: pointer;
    background: var(--fire-orange);
    color: white;
    transition: all var(--transition-fast);
}

.auth-btn-small:hover {
    filter: brightness(1.1);
}

/* Auth Link Buttons */
.auth-link-btn {
    background: none;
    border: none;
    color: var(--fire-orange);
    font-size: 0.8rem;
    font-family: var(--font-primary);
    cursor: pointer;
    text-align: center;
    width: 100%;
    padding: 0.4rem 0;
    transition: color var(--transition-fast);
}

.auth-link-btn:hover {
    color: var(--hot-metal);
    text-decoration: underline;
}

/* Auth Separator */
.auth-separator {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0.6rem 0;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
}

.auth-separator::before,
.auth-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

/* Auth Note */
.auth-note {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    line-height: 1.4;
    margin-top: 0.5rem;
}

/* Auth Error / Success */
.auth-error {
    background: rgba(255, 71, 87, 0.12);
    border: 1px solid rgba(255, 71, 87, 0.3);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    font-size: 0.8rem;
    color: var(--miss-red);
    line-height: 1.3;
}

.auth-error.hidden,
.auth-success.hidden {
    display: none;
}

.auth-success {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.25);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    font-size: 0.8rem;
    color: var(--great-glow);
    line-height: 1.3;
}

/* Auth Profile */
.auth-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
}

.auth-profile.hidden {
    display: none;
}

.auth-profile-avatar {
    font-size: 3rem;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    border: 2px solid var(--fire-orange);
}

.auth-profile-info {
    text-align: center;
}

.auth-profile-pseudo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--hot-metal);
}

.auth-profile-email {
    font-size: 0.8rem;
    color: var(--steel-gray);
    margin-top: 0.2rem;
}

.auth-profile-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.auth-edit-pseudo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.auth-edit-pseudo label {
    font-size: 0.8rem;
    color: var(--steel-gray);
    font-weight: 600;
}

.auth-edit-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.auth-edit-row input {
    flex: 1;
    padding: 0.5rem 0.7rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--steel-light);
    font-size: 0.9rem;
    font-family: var(--font-primary);
    outline: none;
    transition: border-color var(--transition-fast);
}

.auth-edit-row input:focus {
    border-color: var(--fire-orange);
}

/* Auth Loading Overlay */
.auth-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 15, 26, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    z-index: 10;
}

.auth-loading.hidden {
    display: none;
}

.auth-loading::after {
    content: '';
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--fire-orange);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* modal-content needs position relative for auth-loading overlay */
#auth-modal .modal-content {
    position: relative;
}

/* ========================================
   ADMIN PANEL
   ======================================== */

.admin-btn {
    background: rgba(255, 160, 64, 0.15) !important;
    border: 1px solid rgba(255, 160, 64, 0.4) !important;
}

.admin-btn .btn-icon {
    color: var(--hot-metal);
}

.admin-container {
    max-width: 95vw;
    width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.admin-tabs {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.admin-tab {
    padding: 0.45rem 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--steel-gray);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.admin-tab:hover {
    background: rgba(255, 255, 255, 0.1);
}

.admin-tab.active {
    background: rgba(255, 107, 53, 0.2);
    border-color: var(--fire-orange);
    color: var(--fire-orange);
}

.admin-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem;
    min-height: 200px;
}

/* Admin Kingdom List */
.admin-kingdom-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.admin-kingdom-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-kingdom-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 107, 53, 0.3);
}

.admin-kingdom-num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--hot-metal);
    flex-shrink: 0;
}

.admin-kingdom-info {
    flex: 1;
    min-width: 0;
}

.admin-kingdom-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--steel-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-kingdom-sub {
    font-size: 0.65rem;
    color: var(--steel-gray);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-kingdom-preview {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.admin-kingdom-arrow {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Admin Editor */
.admin-editor-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.admin-back-btn {
    padding: 0.3rem 0.6rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    color: var(--steel-light);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.admin-editor-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--hot-metal);
    flex: 1;
}

.admin-field {
    margin-bottom: 0.75rem;
}

.admin-field label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--steel-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.admin-field input,
.admin-field select,
.admin-field textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--steel-light);
    font-size: 0.85rem;
    font-family: var(--font-primary);
    transition: border-color var(--transition-fast);
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
    outline: none;
    border-color: var(--fire-orange);
}

.admin-field textarea {
    resize: vertical;
    min-height: 50px;
}

.admin-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* Admin Preview */
.admin-preview {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 100px;
}

.admin-preview-chapter {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 0.3rem;
}

.admin-preview-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 0.3rem;
}

.admin-preview-subtitle {
    font-size: 0.7rem;
    font-style: italic;
}

/* Admin Actions */
.admin-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-actions .menu-btn {
    flex: 1;
    padding: 0.6rem;
    font-size: 0.8rem;
}

/* Admin Placeholder */
.admin-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--steel-gray);
    text-align: center;
    gap: 0.5rem;
}

.admin-placeholder-icon {
    font-size: 2.5rem;
    opacity: 0.3;
}

.admin-placeholder-text {
    font-size: 0.9rem;
}

.admin-placeholder-sub {
    font-size: 0.75rem;
    opacity: 0.6;
}