/* ============================================================================
   TUILES DE JEUX — ACCUEIL (refonte du 26/10/2026)
   ----------------------------------------------------------------------------
   Une tuile = deux zones, aucune superposition de texte sur du texte :

     ┌───────────────────────┬──────────────────────────────────┐
     │  visuel               │  logo            [3-8 joueurs]   │
     │  (fond flouté +       │  accroche                        │
     │   éventail de cartes) │  BUT · phrase d'objectif         │
     │                       │  [60 cartes]   [Voir les règles] │
     └───────────────────────┴──────────────────────────────────┘

   Le fond du visuel est l'artwork du jeu, flouté et assombri : il donne
   l'identité chromatique de la tuile sans jamais gêner la lecture.
   L'éventail est composé à partir des VRAIES planches de cartes du jeu
   (assets/images/tiles/<jeu>_fan.webp).

   Chargée uniquement par index.php, APRÈS style.css : les overrides de
   coque ci-dessous n'ont donc aucun effet sur les autres pages.
   ========================================================================== */

:root {
    /* Logotype des jeux qui n'ont pas d'image de logo (Traîtres à bord).
       Seule police display du site, cantonnée aux wordmarks. */
    --font-wordmark: 'Bricolage Grotesque', var(--font-display);
    --tile-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --tile-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ============================================================================
   1. GRILLE
   ========================================================================== */

.games-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

/* La rangée des dés reste un bloc à part, sur une seule ligne, dans son
   format d'origine (demande explicite : Yams et Yahtzee sont deux versions
   du même jeu, elles restent côte à côte). */
.dice-games-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    grid-column: 1 / -1;
}

/* ============================================================================
   2. LA TUILE
   ========================================================================== */

.gh-tile {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 200px auto;
    min-width: 0;
    overflow: hidden;
    border-radius: 24px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;

    /* Matière : surface opaque + fine arête claire en haut (lumière iOS) */
    background:
        linear-gradient(158deg,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.012) 46%,
            rgba(0, 0, 0, 0.16) 100%),
        var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 20px 44px -24px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);

    transition:
        transform 220ms var(--tile-ease),
        border-color 220ms var(--tile-ease),
        box-shadow 220ms var(--tile-ease);
}

.gh-tile:focus-visible {
    outline: 2px solid rgb(var(--tile-accent, 99, 102, 241));
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .gh-tile:hover {
        transform: translateY(-4px);
        border-color: rgba(var(--tile-accent, 99, 102, 241), 0.42);
        box-shadow:
            0 28px 60px -26px rgba(0, 0, 0, 0.95),
            0 0 0 1px rgba(var(--tile-accent, 99, 102, 241), 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.09);
    }
}

.gh-tile:active {
    transform: scale(0.992);
    transition-duration: 90ms;
}

/* ---- 2a. Zone visuelle ------------------------------------------------- */

.gh-tile-visual {
    position: relative;
    overflow: hidden;
    grid-row: 1;
    isolation: isolate;
}

.gh-tile-art {
    position: absolute;
    inset: -12%;
    background-image: var(--tile-art);
    background-size: cover;
    background-position: center;
    filter: blur(18px) saturate(1.5) brightness(0.52);
    transform: scale(1.06);
    transition: transform 620ms var(--tile-ease-io), filter 620ms var(--tile-ease-io);
    z-index: -2;
}

@media (hover: hover) and (pointer: fine) {
    .gh-tile:hover .gh-tile-art {
        transform: scale(1.13);
        filter: blur(15px) saturate(1.7) brightness(0.6);
    }
}

/* Voile : halo de la couleur du jeu + assombrissement bas, pour que
   l'éventail reste l'élément le plus lumineux. */
.gh-tile-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(78% 74% at 50% 26%,
            rgba(var(--tile-accent, 99, 102, 241), 0.34) 0%,
            rgba(var(--tile-accent, 99, 102, 241), 0.06) 52%,
            transparent 78%),
        linear-gradient(180deg,
            rgba(8, 12, 24, 0.30) 0%,
            rgba(8, 12, 24, 0.10) 40%,
            rgba(8, 12, 24, 0.72) 100%);
}

/* Fondu vers la surface de la tuile : la zone visuelle et le texte
   appartiennent au même objet, ce n'est pas une vignette collée. */
.gh-tile-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
            transparent 58%,
            rgba(18, 24, 44, 0.55) 82%,
            var(--bg-surface) 100%);
}

.gh-tile-fan {
    position: absolute;
    inset: 0;
    margin: auto;
    display: block;
    /* Dimension explicite : une image `lazy` pas encore chargée n'a pas de
       taille intrinsèque, et `width:auto` la laissait à 0 px. On impose la
       largeur, la hauteur suit le ratio déclaré par les attributs
       width/height du <img>. */
    width: 94%;
    height: auto;
    max-height: 90%;
    object-fit: contain;
    transition: transform 260ms var(--tile-ease);
    /* la tuile se soulève déjà : l'éventail suit avec un léger retard */
}

@media (hover: hover) and (pointer: fine) {
    .gh-tile:hover .gh-tile-fan {
        transform: translateY(-5px) rotate(-1.2deg);
    }
}

/* ---- 2b. Zone de contenu ----------------------------------------------- */

.gh-tile-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 2px 20px 18px;
}

.gh-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
}

.gh-tile-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 138px;
    max-height: 46px;
    object-fit: contain;
    /* les logos sont des PNG transparents clairs : une ombre douce les
       décolle du fond sans les cerner */
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
}

/* Logotype typographique (jeu sans image de logo) */
.gh-tile-wordmark {
    display: block;
    font-family: var(--font-wordmark);
    font-weight: 800;
    font-size: 27px;
    line-height: 0.94;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.65);
}

.gh-tile-wordmark em {
    display: block;
    font-style: normal;
    font-size: 0.46em;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-top: 5px;
    color: rgba(var(--tile-accent, 99, 102, 241), 1);
}

.gh-tile-tagline {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--text-secondary);
}

.gh-tile-goal {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--text-color);
    font-weight: 500;
}

.gh-tile-goal-label {
    flex: 0 0 auto;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--tile-accent, 99, 102, 241));
    padding: 3px 7px;
    border-radius: 5px;
    background: rgba(var(--tile-accent, 99, 102, 241), 0.14);
    border: 1px solid rgba(var(--tile-accent, 99, 102, 241), 0.24);
    transform: translateY(-1px);
}

.gh-tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
}

/* ---- 2c. Pastilles ----------------------------------------------------- */

.gh-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.gh-chip svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    opacity: 0.75;
}

.gh-chip--players {
    background: rgba(var(--tile-accent, 99, 102, 241), 0.16);
    border-color: rgba(var(--tile-accent, 99, 102, 241), 0.32);
    color: #fff;
}

.gh-chip--players svg {
    opacity: 0.95;
}

/* ---- 2d. Bouton règles ------------------------------------------------ */

.gh-tile-rules {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 160ms var(--tile-ease),
        border-color 160ms var(--tile-ease),
        transform 160ms var(--tile-ease);
}

.gh-tile-rules svg {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

.gh-tile-rules:active {
    transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
    .gh-tile-rules:hover {
        background: rgba(var(--tile-accent, 99, 102, 241), 0.9);
        border-color: rgba(var(--tile-accent, 99, 102, 241), 1);
    }
    .gh-tile-rules:hover svg {
        opacity: 1;
    }
}

/* ============================================================================
   3. ÉCRAN LARGE — la page cesse d'être une vue mobile étirée
   ----------------------------------------------------------------------------
   La coque (navigation de bureau, largeur du conteneur, bouton de langue) est
   désormais définie pour TOUTES les pages dans la section « COQUE DESKTOP »
   en fin de style.css. Ne pas la redéfinir ici : ce fichier n'est chargé que
   par index.php, une règle posée ici ne suivrait pas sur les autres pages.
   ========================================================================== */

/* --- 3a. Bandeau d'accueil : accroche + appel à l'action côte à côte ----- */

.home-intro {
    display: block;
}

@media (min-width: 900px) {
    .home-intro:has(.login-box) {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        gap: 20px;
        align-items: stretch;
        margin-bottom: 30px;
    }

    /* Le hero ne perd sa marge basse QUE lorsqu'il partage la ligne avec le
       panneau de connexion. Auparavant la règle s'appliquait toujours : pour
       un joueur connecté (pas de panneau), le hero collait le bloc suivant. */
    .home-intro:has(.login-box) .hero-section {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .home-intro:has(.login-box) .login-box {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

@media (min-width: 900px) {
    /* La largeur du conteneur et la navigation de bureau sont définies dans
       style.css (section « COQUE DESKTOP »). NE PAS les redéfinir ici :
       home_tiles.css est chargé APRÈS game_shell.css, donc une règle
       `body.has-desktop-nav .container { max-width }` posée ici écrasait
       `body.in-game > .container { max-width: none }` et le plateau de jeu
       ne remplissait plus l'écran. */

    .games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .dice-games-row {
        gap: 20px;
    }

    /* Tuile horizontale : visuel à gauche, contenu à droite.
       La largeur du visuel est bornée pour que la colonne de texte garde
       toujours au moins 300 px (au-delà, les accroches passent à la ligne). */
    .gh-tile {
        grid-template-columns: clamp(190px, 36%, 240px) minmax(0, 1fr);
        grid-template-rows: auto;
        min-height: 246px;
    }

    .gh-tile-visual {
        grid-row: auto;
        grid-column: 1;
    }

    /* Fondu latéral : la zone visuelle se fond vers le contenu */
    .gh-tile-visual::after {
        background:
            linear-gradient(90deg,
                transparent 62%,
                rgba(18, 24, 44, 0.72) 86%,
                var(--bg-surface) 100%),
            linear-gradient(180deg, transparent 70%, rgba(18, 24, 44, 0.5) 100%);
    }

    .gh-tile-fan {
        width: 92%;
        max-height: 92%;
    }

    .gh-tile-body {
        grid-column: 2;
        padding: 18px 20px 18px 8px;
        gap: 10px;
    }

    .gh-tile-head {
        min-height: 46px;
    }

    .gh-tile-logo {
        max-width: 156px;
        max-height: 50px;
    }

    .gh-tile-tagline {
        font-size: 14.5px;
    }

    /* La rangée des dés : deux tuiles de même format, même ligne */
    .dice-games-row .game-card-compact {
        height: 260px !important;
    }
}

@media (min-width: 1240px) {
    .gh-tile {
        grid-template-columns: 250px minmax(0, 1fr);
        min-height: 258px;
    }
    .gh-tile-tagline {
        font-size: 15px;
    }
    .gh-tile-goal {
        font-size: 14px;
    }
}

/* ============================================================================
   4. HERO ET EN-TÊTE DE SECTION — respiration sur grand écran
   ========================================================================== */

@media (min-width: 900px) {
    .hero-section {
        padding: 54px 48px 58px;
        margin: -8px 0 30px;
        border-radius: 32px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        overflow: hidden;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .hero-title {
        font-size: clamp(44px, 5vw, 64px);
        letter-spacing: -0.03em;
        line-height: 1;
    }

    .hero-subtitle {
        font-size: 17px;
        margin-top: 12px;
    }

    .section-header {
        margin: 34px 0 18px;
        display: flex;
        align-items: baseline;
        gap: 14px;
    }

    .section-title {
        font-size: 12.5px;
        letter-spacing: 0.2em;
        opacity: 0.62;
    }

    .section-header::after {
        content: '';
        flex: 1 1 auto;
        height: 1px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent);
    }

    .upcoming-section {
        padding: 0;
        margin-top: 44px;
    }

    .upcoming-grid {
        gap: 20px;
    }
}

/* ============================================================================
   5. PRÉFÉRENCES SYSTÈME
   ========================================================================== */

@media (prefers-reduced-transparency: reduce) {
    .gh-tile {
        background: var(--bg-surface);
        backdrop-filter: none;
    }
    .gh-chip,
    .gh-tile-rules {
        background: #1a2138;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gh-tile,
    .gh-tile-art,
    .gh-tile-fan,
    .gh-tile-rules {
        transition-duration: 1ms;
    }
    .gh-tile:hover,
    .gh-tile:hover .gh-tile-fan,
    .gh-tile:hover .gh-tile-art {
        transform: none;
    }
    .gh-tile:hover .gh-tile-art {
        filter: blur(18px) saturate(1.5) brightness(0.52);
    }
}

/* ============================================================================
   6. REPRISE DE PARTIE (« Ma partie en cours »)
   ----------------------------------------------------------------------------
   Le bloc vivait tout en bas de l'accueil : un joueur qui revenait sur le site
   après avoir quitté un salon ne le voyait pas et croyait sa partie perdue.
   Il est désormais juste sous le bandeau d'accueil, avant la liste des jeux,
   avec une identité forte (artwork + accent du jeu).
   ========================================================================== */

.gh-resume-wrap {
    /* Marge haute explicite : la section suit le hero, dont la marge basse
       vaut 0 quand il partage sa ligne avec le panneau de connexion. */
    margin: 30px 0 26px;
    padding: 10px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(16, 185, 129, 0.13) 0%, rgba(16, 185, 129, 0.02) 60%),
        var(--bg-surface);
    border: 1px solid rgba(16, 185, 129, 0.30);
    box-shadow: 0 18px 40px -26px rgba(16, 185, 129, 0.55);
}

.gh-resume-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 2px 6px 10px;
}

.gh-resume-head h3 {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6ee7b7;
}

.gh-resume-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: ghResumePulse 1.9s ease-out infinite;
}

@keyframes ghResumePulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.gh-resume {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 12px 14px 12px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    cursor: pointer;
    transition: transform 200ms var(--tile-ease), border-color 200ms var(--tile-ease), background 200ms var(--tile-ease);
}

.gh-resume:active {
    transform: scale(0.994);
}

@media (hover: hover) and (pointer: fine) {
    .gh-resume:hover {
        transform: translateY(-2px);
        border-color: rgba(var(--tile-accent, 99, 102, 241), 0.45);
        background: rgba(255, 255, 255, 0.075);
    }
}

/* Vignette : cadre au format paysage, parce que les logos des jeux le sont.
   Elle porte la couleur du jeu derrière le logo, ce qui l'identifie d'un coup
   d'œil sans reprendre l'ancienne bannière (dont le titre était cuit dans
   l'image et se retrouvait tronqué au recadrage). */
.gh-resume-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 80px;
    padding: 10px;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(130% 130% at 26% 18%,
            rgba(var(--tile-accent, 99, 102, 241), 0.42) 0%,
            rgba(var(--tile-accent, 99, 102, 241), 0.10) 58%,
            rgba(255, 255, 255, 0.02) 100%),
        rgba(255, 255, 255, 0.04);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 8px 20px -14px rgba(0, 0, 0, 0.9);
}

.gh-resume-thumb img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.65));
}

/* Variante « artwork » pour les jeux sans logo (Yams, Yahtzee, Traîtres) */
.gh-resume-thumb--art {
    padding: 0;
    background-size: cover;
    background-position: center;
}

.gh-resume-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 12px;
    min-width: 0;
}

.gh-resume-name {
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.15;
}

.gh-resume-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gh-resume-state.is-playing {
    background: rgba(16, 185, 129, 0.20);
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #6ee7b7;
}

.gh-resume-state.is-waiting {
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #fcd34d;
}

/* Salon + effectif sur une seule ligne : deux lignes suffisent pour toute
   l'information, la carte reste compacte malgré sa largeur. */
.gh-resume-line {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
}

.gh-resume-room {
    min-width: 0;
    font-weight: 600;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gh-resume-meta {
    flex: 0 0 auto;
    color: var(--text-muted);
    white-space: nowrap;
}

.gh-resume-meta::before {
    content: '·';
    margin-right: 8px;
    opacity: 0.55;
}

.gh-resume-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #10b981, #059669);
    color: #052e1c;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 24px -12px rgba(16, 185, 129, 0.9);
}

.gh-resume-btn svg {
    width: 15px;
    height: 15px;
}

@media (max-width: 620px) {
    .gh-resume {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }
    .gh-resume-thumb {
        width: 96px;
        height: 72px;
        padding: 7px;
        border-radius: 12px;
    }
    .gh-resume-thumb--art {
        padding: 0;
    }
    .gh-resume-btn {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }
    .gh-resume-name {
        font-size: 16.5px;
    }
}

/* ============================================================================
   7. « PROCHAINEMENT » — même langage, mais visiblement pas jouable
   ========================================================================== */

.upcoming-section {
    margin-top: 34px;
}

.gh-soon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 899px) {
    .gh-soon-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gh-soon {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    min-height: 106px;
    border-radius: 20px;
    overflow: hidden;
    /* Bordure en pointillés : le code visuel du « pas encore disponible » */
    border: 1px dashed rgba(255, 255, 255, 0.17);
    background: rgba(255, 255, 255, 0.022);
}

.gh-soon-visual {
    position: relative;
    overflow: hidden;
}

.gh-soon-art {
    position: absolute;
    inset: -10%;
    background-image: var(--tile-art);
    background-size: cover;
    background-position: center;
    filter: blur(1.5px) grayscale(0.4) brightness(0.75) contrast(1.05);
}

/* Fondu vers la surface : l'artwork reste reconnaissable mais ne concurrence
   pas les tuiles jouables. */
.gh-soon-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(18, 24, 44, 0.05) 0%,
        rgba(18, 24, 44, 0.25) 62%,
        rgba(18, 24, 44, 0.85) 100%);
}

.gh-soon-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 14px 18px;
    min-width: 0;
}

.gh-soon-badge {
    align-self: flex-start;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.20);
    padding: 3px 8px;
    border-radius: 5px;
}

.gh-soon-name {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.86);
}

.gh-soon-tagline {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text-muted);
}

@media (prefers-reduced-transparency: reduce) {
    .gh-resume-wrap,
    .gh-soon {
        background: var(--bg-surface);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gh-resume {
        transition-duration: 1ms;
    }
    .gh-resume-pulse {
        animation: none;
    }
    .gh-resume:hover {
        transform: none;
    }
}