/* OCEARA ROGUE - HUD de plongée : PV chiffrés, compteur de dégâts, boss (mécaniques), affixes, fin de plongée */

.affix-chip,
.depth-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 110, 80, 0.12);
    border: 1px solid rgba(255, 110, 80, 0.35);
    color: #ffc2b0;
}

.depth-chip {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: rgb(var(--accent-rgb));
}


/* ---------- HUD : PV chiffrés ---------- */

#health {
    position: relative;
    width: 250px;
    height: 24px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 90, 120, 0.4);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

#health-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background: linear-gradient(90deg, #ff3355, #ff6f8a);
    box-shadow: 0 0 14px rgba(255, 51, 85, 0.7);
    transition: width 0.18s ease;
}

#health-shield {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: repeating-linear-gradient(45deg, rgba(220, 245, 255, 0.75) 0 6px, rgba(160, 220, 255, 0.5) 6px 12px);
    transition: width 0.18s ease;
}

#health-text {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

#health.healed {
    animation: healed 0.4s ease;
}

@keyframes healed {
    50% { box-shadow: 0 0 22px rgba(109, 255, 176, 0.8); border-color: rgba(109, 255, 176, 0.8); }
}

.hud-left {
    flex-wrap: wrap;
    align-content: flex-start;
}

#affixes {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex-basis: 100%;
}

#affixes .affix-chip,
#affixes .depth-chip {
    font-size: 11px;
    padding: 3px 8px;
    backdrop-filter: blur(8px);
}

/* Meute : sous les affixes, allumée tant que des alliés sont assez près */
.pack-chip {
    font-size: 11px;
    padding: 3px 8px;
    backdrop-filter: blur(8px);
}

.pack-chip b {
    font-weight: 800;
}

.mate .mini-hp {
    display: block;
    width: 70px;
    height: 5px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    margin-top: 3px;
}

.mate .mini-hp i {
    display: block;
    height: 100%;
    background: var(--heart);
}

/* Compteur de dégâts */

.hud-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.hud-stats {
    display: flex;
    gap: 16px;
}

#meter,
.end-team {
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#meter:empty {
    display: none;
}

.meter-title {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 2px;
}

.meter-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    font-size: 12px;
    overflow: hidden;
}

.meter-row i {
    position: absolute;
    inset: 0 auto 0 0;
    background: color-mix(in srgb, var(--f) 38%, transparent);
    transition: width 0.4s ease;
}

.meter-row span,
.meter-row b {
    position: relative;
}

.meter-row b small {
    color: var(--muted);
    font-weight: 500;
}

.meter-row.me span {
    font-weight: 800;
}

/* Boss : incantation, bouclier, phases, enrage, alertes */

#boss-bar {
    width: min(520px, 62vw);
}

.boss-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 8px;
    margin-bottom: 4px;
}

.boss-head .boss-name {
    margin: 0;
}

.boss-tags {
    font-size: 11px;
    color: var(--muted);
    text-align: left;
}

.tag-protect {
    color: #b98cff;
    font-weight: 700;
}

.tag-vuln {
    color: #ffd35c;
    font-weight: 700;
}

.tag-immune {
    color: #9fdcff;
    font-weight: 700;
}

/* Boss sous bouclier : barre délavée, contour bleu */
#boss-bar.immune #boss-fill {
    filter: saturate(0.2) brightness(1.3);
}

#boss-bar.immune .boss-track {
    border-color: rgba(140, 210, 255, 0.85);
    box-shadow: 0 0 14px rgba(110, 200, 255, 0.5);
}

.boss-enrage {
    justify-self: end;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.boss-enrage.danger {
    color: #ff5a6e;
    animation: pulse 0.8s ease-in-out infinite;
}

.boss-track {
    position: relative;
    height: 12px;
}

#boss-shield {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: repeating-linear-gradient(45deg, rgba(110, 200, 255, 0.95) 0 8px, rgba(180, 230, 255, 0.8) 8px 16px);
    box-shadow: 0 0 14px rgba(110, 200, 255, 0.9);
    transition: width 0.15s ease;
}

#boss-marks i {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 6px #ffffff;
}

#boss-bar.shielded .boss-track {
    border-color: rgba(110, 200, 255, 0.7);
}

.boss-cast {
    position: relative;
    height: 22px;
    margin: 6px auto 0;
    width: 80%;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 201, 77, 0.45);
    overflow: hidden;
}

#boss-cast-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, rgba(255, 170, 60, 0.6), rgba(255, 220, 110, 0.85));
}

#boss-cast-name {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 13.5px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.boss-cast.interruptible {
    border-color: rgba(120, 220, 255, 0.8);
    box-shadow: 0 0 16px rgba(95, 212, 255, 0.55);
}

.boss-cast.interruptible #boss-cast-fill {
    background: linear-gradient(90deg, rgba(60, 170, 255, 0.6), rgba(140, 230, 255, 0.9));
}

/* Événements de vague : une couleur par événement (cyan = interruptible, comme les incantations de boss) */
#event-bar {
    --ev: 127, 227, 255;
    width: min(340px, 70vw);
    margin: 6px auto 0;
}

#event-bar.theme-banner { --ev: 255, 194, 77; }
#event-bar.theme-rift { --ev: 190, 130, 255; }
#event-bar.theme-linked { --ev: 255, 95, 210; }
#event-bar.theme-orage { --ev: 255, 228, 90; }

.event-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--ev));
    text-shadow: 0 0 10px rgba(var(--ev), 0.6), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.event-sigil {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px dashed rgb(var(--ev));
    box-shadow: 0 0 8px rgba(var(--ev), 0.8);
    animation: event-spin 3s linear infinite;
}

#event-tag {
    font-size: 10.5px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #fff4d6;
    opacity: 0.85;
}

.event-tracks {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.event-track {
    position: relative;
    flex: 1;
    height: 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(var(--ev), 0.35);
    overflow: hidden;
}

.event-track i {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, rgba(var(--ev), 0.55), rgb(var(--ev)));
    transition: width 0.15s ease;
}

.event-cast {
    position: relative;
    height: 18px;
    margin-top: 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(var(--ev), 0.8);
    box-shadow: 0 0 16px rgba(var(--ev), 0.5);
    overflow: hidden;
}

#event-cast-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, rgba(var(--ev), 0.45), rgba(var(--ev), 0.9));
}

#event-cast-name {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

#event-bar.casting .event-head {
    animation: pulse 0.8s ease-in-out infinite;
}

#event-bar.theme-defense { --ev: 150, 230, 255; }
#event-bar.theme-chasse { --ev: 255, 100, 84; }
#event-bar.theme-arene { --ev: 255, 160, 70; }
#event-bar.theme-effondrement { --ev: 200, 120, 255; }

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

/* Consigne du boss : ce qu'il faut faire, lisible d'un coup d'œil en plein combat
   (bandeau sombre bordé d'or, plus large que la barre du boss si besoin) */
.boss-alert {
    position: relative;
    left: 50%;
    translate: -50% 0;
    width: max-content;
    max-width: min(660px, 92vw);
    margin-top: 10px;
    padding: 8px 20px 9px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(44, 26, 6, 0.88), rgba(22, 12, 2, 0.88));
    border: 1px solid rgba(255, 214, 120, 0.6);
    box-shadow: 0 0 26px rgba(255, 180, 60, 0.32), 0 6px 18px rgba(0, 0, 0, 0.55);
    text-align: center;
    font-size: clamp(17px, 1.7vw, 23px);
    font-weight: 800;
    line-height: 1.25;
    color: #ffe9a8;
    text-shadow: 0 0 12px rgba(255, 180, 60, 0.55), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.boss-alert::before {
    content: '⚠';
    margin-right: 9px;
    color: #ffc94d;
}

.boss-pill {
    display: none;
}

.boss-alert.pop {
    animation: alertPop 0.45s ease, alertGlow 1.6s ease-out;
}

@keyframes alertPop {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes alertGlow {
    from { box-shadow: 0 0 46px rgba(255, 200, 80, 0.9), 0 6px 18px rgba(0, 0, 0, 0.55); }
}

/* Textes flottants supplémentaires */

.float-text.poison {
    font-size: 13px;
    color: #9dff6a;
}

.float-text.poison.burn {
    color: #ffae6a;
}

.float-text.stun {
    font-size: 13px;
    color: #ffe98a;
}

.float-text.absorb {
    font-size: 12px;
    color: #9fd8ff;
}

/* Relance des cartes */

.reroll {
    margin: 14px auto 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reroll small {
    color: var(--faint);
}

/* Fin d'expédition : bilan à gauche, récompenses à droite. La carte ne dépasse jamais l'écran : seul
   son corps défile si besoin, les boutons restent visibles */

/* Ancrée en haut : quand les récompenses arrivent, le titre et le bilan restent en place */
#screen-end {
    align-items: start;
    padding-top: clamp(20px, 7vh, 72px);
}

.end-card {
    width: min(980px, 100%);
    max-height: calc(100vh - clamp(20px, 7vh, 72px) - 20px);
    max-height: calc(100dvh - clamp(20px, 7vh, 72px) - 20px);
    display: flex;
    flex-direction: column;
    padding: 24px 28px 22px;
}

.end-card h2 {
    margin-bottom: 14px;
}

.end-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 26px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: left;
}

.end-section {
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--faint);
}

/* Place réservée : les récompenses arrivent du serveur un peu après (la carte saute moins) ;
   le message d'attente occupe cette place */
.end-rewards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px;
}

.end-rewards .reward.pending {
    flex: 1;
    display: grid;
    place-items: center;
    text-align: center;
}

.reward {
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--stroke);
    font-size: 14px;
    color: var(--muted);
}

.reward-gains {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
}

.gain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 10px 8px 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--stroke);
    text-align: center;
}

.gain span {
    font-size: 15px;
    line-height: 1;
}

.gain b {
    font-size: 21px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.gain small {
    font-size: 11px;
    color: var(--muted);
}

.reward-highlights,
.reward-guardians {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.highlight {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 201, 77, 0.5);
    background: rgba(255, 201, 77, 0.08);
    color: #ffe38a;
    font-size: 13.5px;
    font-weight: 700;
}

.highlight small {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
}

.reward-guardians {
    gap: 4px;
}

.guardian-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--stroke);
    font-size: 13px;
    color: var(--muted);
}

.guardian-line em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--epic);
}

.guardian-line b {
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guardian-line span {
    font-variant-numeric: tabular-nums;
}

.end-team {
    width: 100%;
    margin-top: 12px;
}

.end-team:empty {
    display: none;
}

/* Conseil quand on tombe (ui.js takenAdvice) */
.end-advice {
    margin: 2px 0 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
}

/* Détail de ses dégâts (ui.js damageSplit) : une barre partagée par source, puis la légende */
.damage-split {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
}

.split-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.45);
}

.split-bar i {
    background: var(--c);
    opacity: 0.85;
}

.split-bar i + i {
    border-left: 1px solid rgba(0, 0, 0, 0.5);
}

.split-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
    font-size: 12px;
    color: var(--muted);
}

.split-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.split-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c);
}

.split-legend b {
    color: var(--text);
    font-weight: 700;
}

.end-buttons {
    flex-shrink: 0;
    margin-top: 18px;
}

@media (max-width: 760px) {
    .end-card {
        padding: 20px 16px 16px;
    }

    .end-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-height: 640px) {
    .end-card h2 {
        font-size: 28px;
        margin-bottom: 8px;
    }
}


/* ---------- Écrans de plongée : même typographie que le sanctuaire ---------- */

.panel-card h2,
.levelup h2,
.evolve-name {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.end-kicker,
.levelup-kicker {
    letter-spacing: 0.24em;
}

/* ---------- Arrivée sur une île ---------- */

#island-card {
    position: fixed;
    left: 50%;
    top: 12vh;
    z-index: 6;
    width: min(460px, 80vw);
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    opacity: 0;
}

#island-card.show {
    animation: island-in 3.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#island-emblem alandys-emblem {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto -4px;
}

.island-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgb(var(--accent-rgb));
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.island-name {
    font-family: var(--serif);
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 600;
    line-height: 1.05;
    color: #fff;
    text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.6), 0 3px 12px rgba(0, 0, 0, 0.8);
}

.island-tagline {
    margin-top: 4px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    color: rgba(234, 247, 255, 0.85);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

@keyframes island-in {
    0% { opacity: 0; transform: translate(-50%, 24px) scale(0.92); }
    14% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -16px) scale(0.98); }
}

@keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ---------- Ambiance Alandys dans les écrans de jeu ---------- */

.banner-title,
.evolve-name,
#end-title,
.levelup h2,
.island-name {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.02em;
}

#screen-end .btn-primary,
#screen-pause .btn-primary {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #2b1206;
    background: linear-gradient(180deg, #ffe46c 0%, #ffb53d 55%, #f07a2e 100%);
    box-shadow: 0 12px 30px -12px rgba(255, 140, 60, 0.9), inset 0 -3px 0 rgba(140, 40, 10, 0.35);
}

/* ---------- Commandes tactiles (mobile) ---------- */

#touch-controls {
    position: fixed;
    inset: 0;
    z-index: 4;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.touch-stick {
    position: absolute;
    width: 124px;
    height: 124px;
    margin: -62px 0 0 -62px;
    border-radius: 50%;
    border: 2px solid rgba(255, 236, 210, 0.3);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
}

.touch-stick.active {
    opacity: 1;
}

.touch-stick i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 236, 210, 0.38);
    box-shadow: 0 0 18px rgba(255, 200, 120, 0.4);
    transform: translate(-50%, -50%);
}

.touch-stick.aim {
    border-color: rgba(255, 150, 80, 0.4);
}

.touch-stick.aim i {
    background: rgba(255, 150, 80, 0.45);
}

/* Boutons tactiles : mêmes états que les boutons du clavier (UI.cooldown) — voile de recharge,
   secondes au centre, onde au retour, anneau doré pendant l'incantation */
.touch-btn {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff7ea;
    background:
        radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb), 0.18), transparent 70%),
        rgba(12, 24, 54, 0.66);
    border: 2px solid rgba(255, 228, 190, 0.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: var(--display);
    transition: transform 0.08s, border-color 0.15s, box-shadow 0.2s;
}

.touch-btn span {
    position: relative;
    line-height: 1;
    color: rgb(var(--accent-rgb));
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.45);
    transition: opacity 0.15s, filter 0.15s;
}

.touch-btn.dash {
    right: calc(22px + env(safe-area-inset-right));
    bottom: calc(30px + env(safe-area-inset-bottom));
    width: 92px;
    height: 92px;
    font-size: 34px;
}

.touch-btn.nova {
    right: calc(128px + env(safe-area-inset-right));
    bottom: calc(50px + env(safe-area-inset-bottom));
    width: 78px;
    height: 78px;
    font-size: 28px;
}

.touch-btn.pause {
    right: calc(14px + env(safe-area-inset-right));
    top: 34%;
    width: 44px;
    height: 44px;
    font-size: 12px;
    font-family: var(--font);
}

.touch-btn small {
    position: absolute;
    bottom: -18px;
    font-family: var(--font);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.touch-cd {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(rgba(var(--accent-rgb), 0.95) calc(var(--p, 1) * 360deg), rgba(255, 255, 255, 0.1) 0);
    -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%);
    mask: radial-gradient(circle, transparent 64%, #000 66%);
    pointer-events: none;
}

.touch-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(transparent calc(var(--p, 1) * 360deg), rgba(2, 7, 13, 0.66) 0);
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
}

.touch-btn .ab-cd {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font);
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

.touch-btn.cooling .touch-sweep {
    opacity: 1;
}

.touch-btn.cooling span {
    opacity: 0.35;
    filter: saturate(0.25);
}

.touch-btn.ready {
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 0 22px -6px rgba(var(--accent-rgb), 0.9);
}

.touch-btn.casting {
    border-color: rgba(255, 220, 140, 0.9);
    box-shadow: 0 0 20px rgba(255, 210, 120, 0.55);
}

.touch-btn.casting .touch-cd {
    background: conic-gradient(rgba(255, 214, 120, 0.95) calc(var(--p, 1) * 360deg), rgba(255, 255, 255, 0.1) 0);
}

.touch-btn.back::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgb(var(--accent-rgb));
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.9);
    animation: ab-back 0.6s ease-out forwards;
    pointer-events: none;
}

.touch-btn.back span {
    animation: ab-pop 0.4s ease-out;
}

.touch-pips {
    position: absolute;
    top: -14px;
    display: flex;
    gap: 4px;
}

.touch-pips i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.touch-pips i.on {
    background: rgb(var(--accent-rgb));
    border-color: transparent;
    box-shadow: 0 0 7px rgb(var(--accent-rgb));
}

.touch-btn.pressed {
    transform: scale(0.9);
}

/* Repère de visée, tant que le joueur n'a pas encore visé (la visée est manuelle sur mobile) */
.touch-hint {
    position: absolute;
    right: calc(26% + env(safe-area-inset-right));
    top: 30%;
    width: 124px;
    height: 124px;
    display: grid;
    place-items: center;
    padding: 18px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 150, 80, 0.45);
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    color: rgba(255, 220, 190, 0.85);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

#touch-controls.aim-hint .touch-hint {
    opacity: 1;
    animation: hint-pulse 2.4s ease-in-out infinite;
}

@keyframes hint-pulse {
    50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .touch-btn.back::after,
    .touch-btn.back span,
    #touch-controls.aim-hint .touch-hint {
        animation: none;
    }
}

/* En tactile : les aides clavier et les jauges du bas laissent la place aux boutons */
body.touch .hud-hint,
body.touch .abilities,
body.touch #downed-hint kbd {
    display: none;
}

body.touch #build {
    max-width: 45vw;
}

@media (max-width: 760px) {
    #meter,
    .hud-stats .stat:not(#ping-stat) span {
        display: none;
    }

    /* Écran étroit : la vie et le niveau à gauche, la zone et le chrono à droite, puis sur toute la
       largeur la barre du boss, sa consigne et les événements (dans la colonne du centre, ils
       débordaient de l'écran et le nom de la zone se coupait mot à mot) */
    .hud-top {
        top: 10px;
        left: 10px;
        right: 10px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 8px;
    }

    .hud-center {
        display: contents;
    }

    .hud-left {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .zone {
        grid-column: 2;
        grid-row: 1;
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
        font-size: 13px;
        text-align: right;
    }

    #zone-name,
    .zone-sub {
        max-width: 44vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .zone-sub {
        font-size: 11px;
    }

    .zone-timer {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        font-size: 22px;
    }

    .zone-terrain,
    #boss-bar,
    #event-bar {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    #health {
        width: min(46vw, 250px);
    }

    #island-card {
        top: 18vh;
    }
}

.level-chip {
    white-space: nowrap;
}

/* Téléphone à l'horizontale : peu de hauteur, l'essentiel seulement en haut (les statistiques et le
   compteur de dégâts sortaient de l'écran) */
@media (max-height: 520px) and (orientation: landscape) {
    #meter,
    .hud-stats .stat:not(#ping-stat) span {
        display: none;
    }

    .hud-top {
        top: 8px;
        left: 12px;
        right: 12px;
    }

    .zone-timer {
        font-size: 22px;
    }
}

/* ---------- Écrans de partie : carnet d'aventure ----------
   Même habillage pour les choix (améliorations, voies, pactes), la pause et la fin d'expédition : fond de
   nuit grainé, filets et clous dorés, médaillons cerclés d'or, rubans, titres en Fraunces, sceaux de cire.
   La couleur d'une carte (--k) suit sa rareté (améliorations) ou sa nature (voies) */

#screen-levelup,
#screen-pause,
#screen-end {
    background: radial-gradient(ellipse at 50% 38%, rgba(10, 18, 36, 0.8), rgba(2, 5, 11, 0.96) 72%);
}

#screen-levelup .levelup { width: min(980px, 100%); }
#screen-levelup .levelup h2 { margin-bottom: 14px; }

/* Titre d'écran : un filet doré et son losange sous le titre */
#screen-levelup .levelup h2::after,
#screen-pause .panel-card h2::after,
#screen-end .end-card h2::after {
    content: '◆';
    display: block;
    width: 150px;
    margin: 6px auto 0;
    font: 9px/10px 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    letter-spacing: 0;
    color: rgba(255, 214, 130, 0.9);
    text-shadow: 0 0 8px rgba(255, 196, 90, 0.7);
    background: linear-gradient(90deg, transparent, rgba(255, 214, 130, 0.7) 44%, transparent 44%, transparent 56%, rgba(255, 214, 130, 0.7) 56%, transparent) center / 100% 1px no-repeat;
}

/* Chemin de l'île : quatre étapes reliées par un sentier (plein jusqu'ici, en pointillés ensuite) */
.route-map {
    margin: 0 auto 20px;
    max-width: 600px;
}

.route-trail {
    --dot: 42px;
    list-style: none;
    display: flex;
    justify-content: space-between;
}

.trail-step {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.trail-step + .trail-step::before {
    content: '';
    position: absolute;
    top: calc(var(--dot) / 2 - 1px);
    left: calc(-50% + var(--dot) / 2 + 6px);
    right: calc(50% + var(--dot) / 2 + 6px);
    border-top: 2px dashed rgba(255, 222, 160, 0.22);
}

.trail-step.done + .trail-step::before {
    border-top-style: solid;
    border-top-color: rgba(255, 210, 120, 0.75);
    box-shadow: 0 0 8px rgba(255, 196, 90, 0.4);
}

.trail-dot {
    width: var(--dot);
    height: var(--dot);
    display: grid;
    place-items: center;
    border-radius: 50%;
    font: 18px 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    color: rgba(236, 226, 205, 0.6);
    background: radial-gradient(circle at 50% 35%, #1c2742, #0b1222 70%);
    border: 2px solid rgba(255, 222, 160, 0.28);
    box-shadow: 0 0 0 3px rgba(4, 8, 16, 0.9), 0 0 0 4px rgba(255, 222, 160, 0.12);
}

.trail-step.done .trail-dot {
    color: #ffd98a;
    border-color: rgba(255, 210, 120, 0.8);
    background: radial-gradient(circle at 50% 35%, rgba(255, 196, 90, 0.3), #141a2c 72%);
}

.trail-step.now .trail-dot {
    color: #fff2cf;
    border-color: #ffd98a;
    background: radial-gradient(circle at 50% 35%, rgba(255, 210, 120, 0.45), #1b1a26 72%);
    animation: trail-now 1.6s ease-in-out infinite;
}

.trail-step.kind-boss .trail-dot {
    color: #ff8a80;
    border-color: rgba(255, 110, 100, 0.7);
    background: radial-gradient(circle at 50% 35%, rgba(255, 80, 70, 0.3), #1a1016 72%);
    box-shadow: 0 0 0 3px rgba(4, 8, 16, 0.9), 0 0 0 4px rgba(255, 110, 100, 0.2), 0 0 18px -4px rgba(255, 80, 70, 0.7);
}

.trail-caption {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 226, 170, 0.5);
}

.trail-step.now .trail-caption { color: #ffd98a; }

.trail-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--serif);
    font-style: italic;
    font-size: 12.5px;
    color: rgba(226, 232, 245, 0.62);
}

.trail-step.kind-boss .trail-name {
    font-style: normal;
    font-weight: 600;
    color: #ff9a90;
}

@keyframes trail-now {
    0%, 100% { box-shadow: 0 0 0 3px rgba(4, 8, 16, 0.9), 0 0 0 4px rgba(255, 222, 160, 0.3), 0 0 10px -2px rgba(255, 200, 100, 0.5); }
    50% { box-shadow: 0 0 0 3px rgba(4, 8, 16, 0.9), 0 0 0 4px rgba(255, 222, 160, 0.5), 0 0 22px 0 rgba(255, 200, 100, 0.75); }
}

/* Cartes de choix : fond de nuit grainé, cadre intérieur doré et clous d'angle, médaillon qui déborde du
   haut, ruban, sceau de cire pour la touche. Toujours sur une rangée (310 px au plus, elles rétrécissent
   sur une tablette) ; deux cartes (l'épreuve) : centrées */
#cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 310px);
    justify-content: center;
    gap: 18px;
}

.card {
    --k: 159, 216, 255;
    --r: rgb(var(--k));
    margin-top: 34px;
    padding: 46px 18px 16px;
    gap: 7px;
    border-radius: 22px 22px 14px 14px;
    border: 1px solid rgba(var(--k), 0.42);
    background:
        radial-gradient(120% 50% at 50% 0%, rgba(var(--k), 0.16), transparent 70%),
        radial-gradient(rgba(255, 238, 205, 0.04) 1px, transparent 1.4px) 0 0 / 13px 13px,
        linear-gradient(180deg, #17213b 0%, #0d1528 58%, #0a1120 100%);
    box-shadow: 0 20px 40px -28px rgba(0, 0, 0, 0.95);
}

.card::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 16px 16px 9px 9px;
    border: 1px solid rgba(255, 222, 160, 0.13);
    pointer-events: none;
}

.card::after {
    --stud: radial-gradient(circle, rgba(var(--k), 0.95) 1.7px, rgba(var(--k), 0.25) 2.6px, transparent 3.2px);
    content: '';
    position: absolute;
    inset: 9px;
    pointer-events: none;
    background:
        var(--stud) left top / 12px 12px no-repeat,
        var(--stud) right top / 12px 12px no-repeat,
        var(--stud) left bottom / 12px 12px no-repeat,
        var(--stud) right bottom / 12px 12px no-repeat;
}

.card:hover,
.card:focus-visible {
    border-color: rgba(var(--k), 0.9);
    box-shadow: 0 0 0 1px rgba(var(--k), 0.3), 0 24px 46px -24px rgba(var(--k), 0.75);
}

/* Médaillon : l'icône de l'amélioration ou de la voie */
.card-icon,
.route-crest {
    position: absolute;
    top: -34px;
    left: 50%;
    width: 68px;
    height: 68px;
    margin: 0;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    border-radius: 50%;
    font: 28px 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    color: rgb(var(--k));
    text-shadow: 0 0 14px rgba(var(--k), 0.85);
    background: radial-gradient(circle at 50% 38%, rgba(var(--k), 0.32), #0d1528 70%);
    border: 2px solid rgba(var(--k), 0.8);
    box-shadow: 0 0 0 4px #0a1120, 0 0 0 5px rgba(255, 222, 160, 0.28), 0 0 24px -6px rgba(var(--k), 0.8);
    transition: box-shadow 0.2s;
}

.card:hover .card-icon,
.card:focus-visible .card-icon,
.card:hover .route-crest,
.card:focus-visible .route-crest {
    box-shadow: 0 0 0 4px #0a1120, 0 0 0 5px rgba(255, 222, 160, 0.45), 0 0 34px -2px rgba(var(--k), 0.95);
}

/* Ruban : rareté ou nature */
.card-rarity,
.route-kind {
    padding: 3px 18px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgb(var(--k));
    background: linear-gradient(90deg, transparent, rgba(var(--k), 0.16) 18%, rgba(var(--k), 0.16) 82%, transparent);
}

.card-name,
.route-name {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
    color: #fff4df;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

/* Description en italique ; elle s'étire pour que le bas des cartes s'aligne d'une carte à l'autre */
.card-desc,
.route-desc {
    flex: 1 0 auto;
    min-height: 2.9em;
    font-family: var(--serif);
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(226, 232, 245, 0.72);
}

.card-desc em,
.route-desc .card-terrain {
    font-family: var(--font);
    font-style: normal;
}

/* Rang de l'amélioration (Nouveau, Niveau 1 → 2, Fusion) : une étiquette au pied de la carte */
.card-level {
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: rgb(var(--k));
    background: rgba(var(--k), 0.1);
    border: 1px solid rgba(var(--k), 0.3);
}

/* Le sceau (touche) et la marque de style se posent sur les clous du haut */
.card kbd {
    top: 9px;
    left: 9px;
    z-index: 1;
    min-width: 22px;
    height: 22px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 11px;
    color: #ffe9d8;
    background: radial-gradient(circle at 38% 32%, #c7423a, #6e1713 75%);
    border: 1px solid rgba(255, 150, 130, 0.6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Carte de style : l'icône de l'attaque dans un petit médaillon, en haut à droite */
.card-style {
    top: 8px;
    right: 8px;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, rgba(var(--k), 0.3), #0d1528 70%);
    border-color: rgba(var(--k), 0.6);
}

/* Carte de style : un reflet de sa rareté plus marqué en haut */
.card.style-card {
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(var(--k), 0.24), transparent 70%),
        radial-gradient(rgba(255, 238, 205, 0.04) 1px, transparent 1.4px) 0 0 / 13px 13px,
        linear-gradient(180deg, #17213b 0%, #0d1528 58%, #0a1120 100%);
}

/* Raretés des améliorations */
.card.common { --k: 159, 216, 255; }
.card.rare { --k: 185, 140, 255; }
.card.epic { --k: 255, 201, 77; }
.card.legendary { --k: 255, 138, 61; }
.card.evolution { --k: 127, 240, 255; }

.card.legendary {
    border-width: 2px;
    box-shadow: 0 0 34px -10px rgba(255, 138, 61, 0.9), inset 0 0 26px -14px rgba(255, 138, 61, 0.9);
}

/* Évolution : fusion de deux cartes, reflets prismatiques sur le fond de nuit */
.card.evolution {
    border-width: 2px;
    background:
        linear-gradient(135deg, rgba(127, 240, 255, 0.14), rgba(185, 140, 255, 0.12) 45%, rgba(255, 201, 77, 0.1)),
        radial-gradient(rgba(255, 238, 205, 0.04) 1px, transparent 1.4px) 0 0 / 13px 13px,
        linear-gradient(180deg, #17213b 0%, #0d1528 58%, #0a1120 100%);
}

.card.evolution .card-icon {
    background: radial-gradient(circle at 50% 38%, rgba(185, 140, 255, 0.35), rgba(127, 240, 255, 0.2) 45%, #0d1528 72%);
}

.card.favored {
    box-shadow: 0 0 0 1px rgba(255, 196, 90, 0.4), 0 18px 40px -22px rgba(255, 196, 90, 0.75);
}

/* Voies : couleur de la nature, gains en étiquettes, danger en crânes, la suite du chemin au pied */
.route-card { --k: 255, 190, 100; }
.route-card.kind-combat { --k: 255, 184, 96; }
.route-card.kind-elite { --k: 198, 130, 255; }
.route-card.kind-tresor { --k: 255, 214, 104; }
.route-card.kind-repos { --k: 112, 228, 150; }
.route-card.kind-pacte { --k: 255, 104, 132; }
.route-card.kind-epreuve { --k: 255, 152, 78; }

.route-gains {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.route-gains small {
    flex-basis: 100%;
    font-family: var(--serif);
    font-style: italic;
    font-size: 11.5px;
    color: rgba(255, 226, 170, 0.6);
}

.route-gain {
    --g: 255, 214, 104;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: rgb(var(--g));
    background: rgba(var(--g), 0.1);
    border: 1px solid rgba(var(--g), 0.32);
}

.route-gain::before {
    content: '◆';
    margin-right: 5px;
    font-size: 8px;
    vertical-align: 2px;
}

.route-gain.pick { --g: 196, 160, 255; }
.route-gain.heal { --g: 130, 236, 170; }
.route-gain.pact { --g: 255, 150, 170; }
.route-gain.misc { --g: 210, 222, 240; }
/* Perles (◍, leur couleur) et XP de créature (✦, la couleur de l'XP de l'écran de fin) : une bulle dit ce qu'elles comptent */
.route-gain.loot::before { content: '◍'; font-size: 11px; vertical-align: 0; }
.route-gain.xp { --g: 109, 255, 176; }
.route-gain.xp::before { content: '✦'; font-size: 10px; vertical-align: 1px; }
.route-gain[data-tip] { cursor: help; }

.route-danger {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 180, 160, 0.55);
}

.route-danger i {
    font-style: normal;
    font-size: 14px;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.12);
}

.route-danger i.on {
    color: #ff7466;
    text-shadow: 0 0 8px rgba(255, 90, 70, 0.65);
}

.route-danger.calm { color: rgba(140, 236, 175, 0.75); }

.route-next {
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3px 8px;
    margin-top: 4px;
    padding-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(236, 240, 250, 0.86);
    background: linear-gradient(90deg, transparent, rgba(255, 222, 160, 0.3), transparent) top / 100% 1px no-repeat;
}

.route-next small {
    flex-basis: 100%;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 222, 160, 0.5);
}

.route-next b {
    font-weight: 600;
    white-space: nowrap;
}

.route-next b i {
    margin-right: 4px;
    font: 13px 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    color: rgba(255, 190, 120, 0.9);
}

.route-next b.kind-boss { color: #ff9a90; }
.route-next b.kind-boss i { color: #ff7466; }

.route-next em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: rgba(226, 232, 245, 0.5);
}

/* Coop : les voies proposées par l'hôte, en retrait le temps qu'il choisisse */
.route-card.readonly {
    cursor: default;
    filter: saturate(0.55) brightness(0.82);
}

.route-card.readonly:hover {
    transform: none;
    box-shadow: 0 20px 40px -28px rgba(0, 0, 0, 0.95);
}

/* Boutons des écrans de partie : le principal en or (plus haut), les autres cerclés d'or sur la nuit */
#screen-levelup .btn-ghost,
#screen-pause .btn-ghost,
#screen-end .btn-ghost {
    border: 1px solid rgba(255, 214, 140, 0.34);
    color: #f1e3c4;
    background: linear-gradient(180deg, rgba(40, 46, 70, 0.6), rgba(14, 20, 36, 0.75));
    box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.08), 0 8px 20px -14px rgba(0, 0, 0, 0.9);
}

#screen-levelup .btn-ghost:hover,
#screen-pause .btn-ghost:hover,
#screen-end .btn-ghost:hover {
    color: #fff6e0;
    border-color: rgba(255, 214, 140, 0.7);
    background: linear-gradient(180deg, rgba(58, 60, 84, 0.7), rgba(20, 26, 44, 0.8));
    box-shadow: 0 0 0 1px rgba(255, 214, 140, 0.18), 0 10px 26px -12px rgba(255, 196, 90, 0.5);
}

#screen-pause .btn-primary,
#screen-end .btn-primary {
    border: 1px solid rgba(255, 244, 200, 0.55);
}

/* Touches de l'aide et de la relance : de petits sceaux, comme sur les cartes */
#levelup-hint .pad-hide kbd,
#btn-reroll kbd,
#btn-lu-build .pad-hide kbd {
    min-width: 19px;
    height: 19px;
    margin: 0 2px;
    padding: 0 4px;
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    color: #ffe9d8;
    background: radial-gradient(circle at 38% 32%, #c7423a, #6e1713 75%);
    border: 1px solid rgba(255, 150, 130, 0.6);
}

/* Pause et fin d'expédition : le même cadre que les cartes */
#screen-pause .panel-card,
#screen-end .end-card {
    position: relative;
    border-radius: 24px;
    border: 1px solid rgba(255, 214, 140, 0.3);
    background:
        radial-gradient(120% 40% at 50% 0%, rgba(255, 200, 110, 0.08), transparent 70%),
        radial-gradient(rgba(255, 238, 205, 0.035) 1px, transparent 1.4px) 0 0 / 13px 13px,
        linear-gradient(180deg, #151e36 0%, #0c1426 60%, #0a1020 100%);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95);
}

#screen-pause .panel-card::before,
#screen-end .end-card::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 18px;
    border: 1px solid rgba(255, 222, 160, 0.12);
    pointer-events: none;
}

#screen-pause .panel-card::after,
#screen-end .end-card::after {
    --stud: radial-gradient(circle, rgba(255, 214, 130, 0.9) 1.8px, rgba(255, 214, 130, 0.22) 2.8px, transparent 3.4px);
    content: '';
    position: absolute;
    inset: 10px;
    pointer-events: none;
    background:
        var(--stud) left top / 12px 12px no-repeat,
        var(--stud) right top / 12px 12px no-repeat,
        var(--stud) left bottom / 12px 12px no-repeat,
        var(--stud) right bottom / 12px 12px no-repeat;
}

/* Assez large pour la page Partie en deux colonnes (et les trois boutons sur une ligne) */
#screen-pause .panel-card { width: min(1000px, 100%); }

/* Écran peu haut (1536 × 730, 1280 × 720) : la carte se resserre, la page Partie et les boutons tiennent sans défiler,
   en équipe aussi (onglets des joueurs, « la partie continue »). Les téléphones ont leurs règles (max-height: 520px) */
@media (min-height: 521px) and (max-height: 820px) {
    #screen-pause .panel-card { padding: 18px 26px 16px; }
    #screen-pause .panel-card h2 { font-size: 30px; margin-bottom: 12px; }
    #screen-pause .pause-tabs { margin-bottom: 10px; }
    #screen-pause .buttons { margin-top: 12px; }
    #screen-pause .build-view { gap: 8px; }
}

#screen-pause .panel-card h2 {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Intertitres : entre deux filets dorés */
.build-view h3,
.pause-group h3,
.end-section {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 214, 140, 0.75);
}

.build-view h3::before,
.build-view h3::after,
.pause-group h3::before,
.pause-group h3::after,
.end-section::before,
.end-section::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 214, 140, 0.4));
}

.build-view h3::after,
.pause-group h3::after,
.end-section::after {
    background: linear-gradient(90deg, rgba(255, 214, 140, 0.4), transparent);
}

/* Tuiles (recettes d'évolution, bilan, gains, gardiens) : panneaux sombres cerclés d'un filet doré */
.evo-row,
.end-stats div,
.gain,
.reward,
.guardian-line {
    background: linear-gradient(180deg, rgba(24, 32, 56, 0.55), rgba(10, 16, 30, 0.6));
    border: 1px solid rgba(255, 222, 160, 0.12);
}

.end-stats b,
.gain b {
    font-family: var(--serif);
    font-weight: 600;
}

.end-stats .record { border-color: rgba(255, 201, 77, 0.42); }
.end-team .meter-title { color: rgba(255, 214, 140, 0.6); }

/* Titre de fin à la largeur du mot : le dégradé de la victoire le traverse en entier */
#screen-end .end-card h2 { display: inline-block; }

.highlight {
    border-color: rgba(255, 201, 77, 0.45);
    background: linear-gradient(180deg, rgba(255, 201, 77, 0.12), rgba(255, 201, 77, 0.05));
}

/* Infobulle des écrans de jeu (choix, pause) : celle du hub (hub.css .hub-tip), au-dessus des écrans */
.game-tip { z-index: 1000; }

/* Cartes de la page Partie : de petits médaillons cerclés de leur rareté */
.bv-card .build-icon {
    border-radius: 50%;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;   /* ⚡ en symbole, comme sur les cartes */
    background: radial-gradient(circle at 50% 38%, #1f2a48, #0b1222 72%);
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(4, 8, 16, 0.9);
}

.bv-card .build-icon b { font-family: var(--font); }

/* Au doigt, pas de touche à rappeler sur la relance (à la manette, elle montre son bouton) */
body.touch:not(.pad) #btn-reroll kbd,
body.touch:not(.pad) #btn-lu-build kbd { display: none; }

/* Barres de défilement fines et dorées */
.evo-list,
.end-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 214, 140, 0.4) transparent;
}

.evo-list::-webkit-scrollbar,
.end-body::-webkit-scrollbar { width: 6px; }

.evo-list::-webkit-scrollbar-thumb,
.end-body::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(255, 214, 140, 0.4);
}

/* ---------- Menu pause : onglets Partie, Réglages, Commandes ----------
   Les trois pages partagent la même case : la carte garde la hauteur de la plus haute, rien ne saute d'un
   onglet à l'autre. Curseurs, interrupteurs et choix : theme.css (les mêmes que dans le hub) */
.pause-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 0 16px;
}

.pause-tab {
    padding: 7px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 214, 140, 0.18);
    background: rgba(10, 16, 30, 0.55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(236, 226, 205, 0.6);
    transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.pause-tab:hover {
    color: #f1e3c4;
    border-color: rgba(255, 214, 140, 0.45);
}

.pause-tab.active {
    color: #ffe7b0;
    border-color: rgba(255, 214, 140, 0.7);
    background: linear-gradient(180deg, rgba(255, 196, 90, 0.22), rgba(255, 196, 90, 0.06));
    box-shadow: 0 0 16px -6px rgba(255, 196, 90, 0.75);
}

.pause-pages {
    display: grid;
    min-height: min(330px, 44vh);
}

.pause-page {
    grid-area: 1 / 1;
    min-width: 0;
    visibility: hidden;
}

.pause-page.active {
    visibility: visible;
}

/* Commandes : la liste reste à sa largeur, au milieu de la carte élargie pour la page Partie */
#pause-controls {
    width: 100%;
    max-width: 720px;
    justify-self: center;
}

/* Réglages : le son et le jeu côte à côte */
#pause-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 12px 26px;
    text-align: left;
}

.pause-group {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
}

.pause-group h3 {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.pause-group .field {
    gap: 4px;
    font-size: 12.5px;
    color: rgba(226, 232, 245, 0.78);
}

.pause-group .toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.3;
    color: rgba(226, 232, 245, 0.78);
}

.pause-group .toggle kbd {
    margin-left: 4px;
    padding: 0 6px;
    font-size: 10.5px;
    color: #e9dcc0;
    border-color: rgba(255, 214, 140, 0.3);
}

.pause-group .segmented button {
    padding: 6px 2px;
    font-size: 12px;
}

/* Commandes : une ligne par action, les touches en capuchons dorés ; celles qu'on peut changer sont des
   boutons (la touche attendue clignote) */
.controls-schemes {
    margin-bottom: 10px;
}

/* Terrain d'entraînement (training.js) : le panneau à droite, qui ne gêne pas le tir */
.training-panel {
    position: fixed;
    top: 72px;
    right: 14px;
    bottom: 14px;
    z-index: 40;
    width: min(340px, 42vw);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    overflow-y: auto;
    border-radius: 14px;
    border: 1px solid rgba(var(--gold-rgb), 0.28);
    background: rgba(6, 14, 24, 0.86);
    backdrop-filter: blur(6px);
    color: var(--text);
    font-size: 12.5px;
    cursor: default;
}

.training-panel header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.training-panel header b {
    font-size: 15px;
    color: rgb(var(--gold-rgb));
}

.training-panel small {
    color: var(--muted);
}

.tp-dps b {
    display: block;
    font-size: 30px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tp-total {
    color: var(--muted);
    margin-top: 2px;
}

.tp-split,
.tp-defense {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 6px;
}

.tp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tp-row > span {
    min-width: 76px;
    color: var(--muted);
}

.tp-cards h4 {
    margin: 6px 0 4px;
    font-size: 12.5px;
}

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

.tp-card {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 11.5px;
    text-align: left;
    cursor: pointer;
}

.tp-card span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-card:hover:not(.off) {
    border-color: rgba(var(--gold-rgb), 0.5);
}

.tp-card.off {
    opacity: 0.45;
    cursor: default;
}

.training-panel footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

/* Hub : le départ vers le terrain, en pastille dans l'en-tête « Partir » */
.training-btn {
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px dashed rgba(var(--gold-rgb), 0.35);
    background: rgba(var(--gold-rgb), 0.06);
    color: rgba(var(--gold-rgb), 0.95);
    font-family: inherit;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}

.training-btn:hover:not(:disabled) {
    border-style: solid;
}

/* Écran de choix : les cartes déjà prises (ui.js renderOwnedCards) */
.lu-owned {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px auto 0;
    max-width: 720px;
}

.lu-owned small {
    color: var(--muted);
    font-size: 12px;
    margin-right: 4px;
}

.lu-owned.hidden {
    display: none;
}

.controls-list {
    display: none;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.controls-list.active {
    display: flex;
}

/* Écran large : les commandes sur deux colonnes (la carte reste basse) */
@media (min-width: 761px) {
    .controls-list.active {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 8px;
    }

    .controls-foot {
        grid-column: 1 / -1;
    }
}

.control-row {
    display: grid;
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 4px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 222, 160, 0.1);
    background: linear-gradient(180deg, rgba(24, 32, 56, 0.5), rgba(10, 16, 30, 0.55));
}

.control-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #f1e3c4;
}

.control-row.fixed .control-name {
    color: rgba(241, 227, 196, 0.66);
}

.control-keys {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: rgba(226, 232, 245, 0.72);
}

.control-keys em {
    margin: 0 2px;
    font-family: var(--serif);
    font-style: italic;
    color: rgba(226, 232, 245, 0.5);
}

.control-keys kbd {
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255, 214, 140, 0.28);
    background: linear-gradient(180deg, #1b2440, #0d1528);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
    font-size: 11.5px;
    font-weight: 700;
    color: #e9dcc0;
}

.key-btn {
    padding: 0;
    border-radius: 7px;
}

.key-btn kbd {
    border-color: rgba(255, 214, 140, 0.6);
    color: #ffe7b0;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.key-btn:hover kbd,
.key-btn:focus-visible kbd {
    border-color: #ffd98a;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 12px -2px rgba(255, 196, 90, 0.75);
}

.key-btn.listening kbd {
    min-width: 34px;
    color: #fff4d6;
    border-color: #ffd98a;
    animation: key-listen 0.9s ease-in-out infinite;
}

@keyframes key-listen {
    0%, 100% { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 6px -2px rgba(255, 196, 90, 0.5); }
    50% { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 18px 0 rgba(255, 196, 90, 0.9); }
}

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

.controls-hint {
    font-family: var(--serif);
    font-style: italic;
    font-size: 12px;
    color: rgba(255, 214, 140, 0.68);
}

#screen-pause .btn-ghost.small {
    padding: 6px 13px;
    font-size: 12px;
}

/* Téléphone : les cartes l'une sous l'autre, médaillon à gauche, nature (et crânes) en haut, la suite
   sur une ligne ; on touche la carte pour choisir (pas de sceau numéroté) */
@media (max-width: 760px) {
    #cards { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; gap: 10px; }
    #pause-settings { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    /* Onglets sur une ligne, boutons sur deux (Reprendre en large) : la pause tient à l'écran */
    .pause-tabs { flex-wrap: nowrap; gap: 5px; margin-bottom: 12px; }
    .pause-tab { flex: 1 1 auto; min-width: 0; padding: 7px 6px; font-size: 10px; letter-spacing: 0.1em; }
    #screen-pause .buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
    #screen-pause .buttons .btn-primary,
    #screen-pause .buttons .hidden + .btn-ghost { grid-column: 1 / -1; }   /* en ligne, sans Recommencer */
    #screen-pause .buttons button { min-width: 0; padding: 11px 10px; }
    #screen-pause .buttons .btn-ghost { font-size: 14px; }
    .control-row { grid-template-columns: minmax(84px, 36%) minmax(0, 1fr); padding: 4px 8px; }
    .controls-foot { flex-direction: column; align-items: stretch; text-align: center; }
    .route-map { margin-bottom: 10px; }
    .route-trail { --dot: 32px; }
    .trail-dot { font-size: 14px; }
    .trail-name { font-size: 11px; }
    .card {
        margin-top: 0;
        padding: 10px 12px;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        column-gap: 10px;
        row-gap: 3px;
        text-align: left;
        border-radius: 16px;
    }
    .card kbd,
    .card::after { display: none; }
    .card-icon,
    .route-crest {
        position: static;
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 44px;
        height: 44px;
        transform: none;
        font-size: 20px;
        border-radius: 50%;
        box-shadow: 0 0 0 3px #0a1120, 0 0 0 4px rgba(255, 222, 160, 0.24), 0 0 16px -6px rgba(var(--k), 0.8);
    }
    .card-rarity,
    .route-kind { grid-column: 2; grid-row: 1; justify-self: start; padding: 0; background: none; }
    .route-danger { grid-column: 3; grid-row: 1; gap: 2px; font-size: 0; }
    .route-danger i { font-size: 12px; }
    .route-danger.calm { font-size: 9.5px; }
    .card-name,
    .route-name { grid-column: 2 / -1; grid-row: 2; font-size: 17px; }
    .card-desc,
    .route-desc { grid-column: 1 / -1; grid-row: auto; min-height: 0; margin-top: 2px; font-size: 12.5px; line-height: 1.35; }
    .card-level { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 2px; }
    .route-gains { grid-column: 1 / -1; justify-content: flex-start; }
    .route-gain { padding: 2px 8px 2px 6px; font-size: 11.5px; }
    .route-next { grid-column: 1 / -1; justify-content: flex-start; margin-top: 2px; padding-top: 6px; font-size: 12px; }
    .route-next small { flex-basis: auto; margin-right: 2px; }
    #screen-levelup .levelup h2::after,
    #screen-pause .panel-card h2::after,
    #screen-end .end-card h2::after { width: 110px; margin-top: 5px; }
}

/* Téléphone à l'horizontale : le chemin en bandeau court, les cartes côte à côte, compactes (médaillon
   dans la carte) */
@media (max-height: 520px) and (orientation: landscape) {
    #screen-levelup { padding-top: 6px; padding-bottom: 6px; }
    #screen-levelup .route-map { margin: 0 auto 4px; max-width: 520px; }
    #screen-levelup .route-trail { --dot: 28px; }
    #screen-levelup .trail-step { gap: 1px; }
    /* Au doigt, l'aide sous les cartes va de soi : sa place revient aux cartes (le message d'attente reste) */
    body.touch #screen-levelup .levelup-hint:not(.waiting) { display: none; }
    #screen-levelup .trail-dot { font-size: 13px; }
    #screen-levelup .trail-name { display: none; }
    #screen-levelup #cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 260px); gap: 10px; }
    /* En colonne même quand la requête téléphone s'applique aussi (paysage de moins de 760 px) */
    #screen-levelup .card { display: flex; margin-top: 0; padding: 9px 10px 8px; gap: 3px; text-align: center; }
    #screen-levelup .card-rarity,
    #screen-levelup .route-kind {
        padding: 2px 14px;
        background: linear-gradient(90deg, transparent, rgba(var(--k), 0.16) 18%, rgba(var(--k), 0.16) 82%, transparent);
    }
    #screen-levelup .route-gains,
    #screen-levelup .route-next { justify-content: center; }
    #screen-levelup .card kbd { display: none; }
    #screen-levelup .card-icon,
    #screen-levelup .route-crest {
        position: static;
        width: 36px;
        height: 36px;
        transform: none;
        font-size: 17px;
        box-shadow: 0 0 0 2px #0a1120, 0 0 0 3px rgba(255, 222, 160, 0.22);
    }
    #screen-levelup .card-icon { order: -1; }   /* le médaillon avant le ruban, comme sur les voies */
    #screen-levelup .card-name,
    #screen-levelup .route-name { font-size: 15px; }
    #screen-levelup .card-desc,
    #screen-levelup .route-desc { min-height: 0; font-size: 11.5px; line-height: 1.3; }
    #screen-levelup .route-next { margin-top: 2px; padding-top: 5px; font-size: 11px; }
    #screen-levelup .levelup h2 { margin-bottom: 6px; }
    #screen-pause .panel-card { width: min(1000px, 100%); }
    .pause-tabs { margin-bottom: 8px; }
    .pause-tab { padding: 5px 14px; }
    .pause-pages { min-height: 0; max-height: calc(100dvh - 176px); overflow-y: auto; padding-right: 4px; }
    /* Les trois boutons sur une ligne, même sous 760 px de large (la grille du portrait prenait deux lignes et
       poussait « Retour au hub » sous le bord) */
    #screen-pause .buttons { display: flex; flex-wrap: nowrap; margin-top: 8px; }
    #screen-pause .buttons button { flex: 1 1 0; padding: 9px 10px; }
    #screen-levelup .levelup h2::after,
    #screen-pause .panel-card h2::after,
    #screen-end .end-card h2::after { display: none; }
}

/* ---------- HUD de combat : le même habillage, sans charger l'écran ----------
   Cadres fins cerclés d'or, médaillons, nom du boss entre deux losanges. Les couleurs qui renseignent
   (vie, bouclier, recharge, couleur de la lignée) ne changent pas : la lisibilité d'abord */

/* Vie : une rainure sombre cerclée d'or */
#health {
    border-radius: 10px;
    border: 1px solid rgba(255, 214, 140, 0.5);
    background: linear-gradient(180deg, #070b16, #121a2e);
    box-shadow: 0 0 0 2px rgba(4, 8, 16, 0.85), 0 0 0 3px rgba(255, 214, 140, 0.14), 0 4px 20px rgba(0, 0, 0, 0.45);
}

/* Niveau : une pastille dorée, le chiffre en Fraunces */
.level-chip {
    border-color: rgba(255, 214, 140, 0.42);
    background: radial-gradient(circle at 50% 30%, rgba(255, 214, 140, 0.12), rgba(10, 16, 30, 0.85));
    color: rgba(241, 227, 196, 0.8);
}

.level-chip b {
    font-family: var(--serif);
    font-weight: 600;
}

/* Barre d'expérience : un filet doré dessous */
#xp-bar {
    border-bottom: 1px solid rgba(255, 214, 140, 0.22);
}

/* Île en Fraunces, minuteur en Lilita */
#zone-name {
    font-family: var(--serif);
    font-size: 1.07em;
    font-weight: 600;
}

.zone-timer {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0.05em;
}

.stat b {
    font-family: var(--serif);
    font-weight: 600;
}

/* Boss : son nom entre deux losanges, la jauge cerclée d'or (bouclier et immunité gardent leur bleu) */
.boss-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--serif);
    font-size: 15px;
    letter-spacing: 0.14em;
    color: #ffd9c7;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.boss-name::before,
.boss-name::after {
    content: '◆';
    font: 8px/1 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    letter-spacing: 0;
    color: rgba(255, 214, 140, 0.85);
    text-shadow: 0 0 8px rgba(255, 196, 90, 0.7);
}

.boss-head .boss-name {
    justify-self: center;
}

.boss-track {
    height: 12px;
    border: 1px solid rgba(255, 214, 140, 0.45);
    background: linear-gradient(180deg, #070b16, #121a2e);
    box-shadow: 0 0 0 2px rgba(4, 8, 16, 0.85), 0 0 0 3px rgba(255, 214, 140, 0.12);
}

.boss-cast {
    border-color: rgba(255, 214, 140, 0.5);
    background: linear-gradient(180deg, rgba(7, 11, 22, 0.8), rgba(18, 26, 46, 0.8));
    box-shadow: 0 0 0 2px rgba(4, 8, 16, 0.7);
}

/* Capacités : médaillons de nuit cerclés d'or ; l'anneau de recharge garde la couleur de la lignée */
.ability {
    border-color: rgba(255, 214, 140, 0.34);
    background:
        radial-gradient(circle at 50% 28%, rgba(var(--accent-rgb), 0.16), transparent 68%),
        radial-gradient(circle at 50% 50%, #141d35, #080d1a 72%);
}

.ability.cooling {
    border-color: rgba(255, 214, 140, 0.16);
}

.ability-small.on {
    border-color: rgba(255, 214, 140, 0.5);
}

.ability kbd,
.hud-hint kbd {
    border-color: rgba(255, 214, 140, 0.4);
    background: linear-gradient(180deg, #1b2440, #0d1528);
    color: #f1e3c4;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}

/* Améliorations acquises (bas de l'écran) : de petits médaillons, comme dans la pause */
#build .build-icon {
    border-radius: 50%;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    background: radial-gradient(circle at 50% 38%, #1f2a48, #0b1222 72%);
    border-width: 1.5px;
    box-shadow: 0 0 0 2px rgba(4, 8, 16, 0.8);
}

#build .build-icon:not(.rare, .epic, .legendary, .evolution) {
    border-color: rgba(255, 214, 140, 0.3);
}

#build .build-icon b {
    font-family: var(--font);
}

/* Bannière d'une salle : un filet doré et son losange sous le titre */
.banner-title::after {
    content: '◆';
    display: block;
    width: 170px;
    margin: 6px auto 0;
    font: 9px/10px 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    color: rgba(255, 214, 130, 0.9);
    text-shadow: 0 0 8px rgba(255, 196, 90, 0.7);
    background: linear-gradient(90deg, transparent, rgba(255, 214, 130, 0.7) 44%, transparent 44%, transparent 56%, rgba(255, 214, 130, 0.7) 56%, transparent) center / 100% 1px no-repeat;
}

/* Messages et chargement : le cadre de nuit cerclé d'or */
#notice,
#loading-chip {
    border-color: rgba(255, 214, 140, 0.4);
    background:
        radial-gradient(rgba(255, 238, 205, 0.035) 1px, transparent 1.4px) 0 0 / 13px 13px,
        linear-gradient(180deg, rgba(20, 29, 52, 0.95), rgba(10, 16, 31, 0.96));
    color: #f1e3c4;
    box-shadow: 0 0 0 2px rgba(4, 8, 16, 0.7), 0 14px 30px -14px rgba(0, 0, 0, 0.9);
}

/* Téléphone : le nom de l'île reste en Outfit (la place manque à côté de la vie) ; le nom du spécial sous
   son bouton tient sur une ligne (« Raz-de-marée » se coupait sur le bouton) */
@media (max-width: 760px) {
    #zone-name {
        font-family: var(--font);
        font-size: 1em;
    }
}

.touch-btn small {
    white-space: nowrap;
}

/* ---------- Bords de l'écran : la couleur de la mécanique du boss (rogue/edge-alert.js) ----------
   Or : partagez, tenez la zone · violet : écartez-vous · orange : esquivez · cyan : interromps, brise ·
   vert : la voie sûre · argent : cessez le feu. Deux pulsations à l'annonce, puis une lueur douce ; le
   côté de la zone à rejoindre plus fort (--x, --y : point du bord, --dir : force). Le centre reste libre */
#edge-alert {
    --c: 255, 201, 77;
    --x: 50%;
    --y: 50%;
    --dir: 0;
    --strength: 0.9;
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

#edge-alert.on { opacity: var(--strength); }
#edge-alert[data-level="strong"] { --strength: 1; }

#edge-alert[data-kind="share"] { --c: 255, 201, 77; }
#edge-alert[data-kind="spread"] { --c: 190, 120, 255; }
#edge-alert[data-kind="dodge"] { --c: 255, 112, 60; }
#edge-alert[data-kind="break"] { --c: 90, 220, 255; }
#edge-alert[data-kind="path"] { --c: 110, 232, 140; }
#edge-alert[data-kind="hold"] { --c: 225, 235, 250; }

/* Lueur tout autour */
#edge-alert::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px 22px rgba(var(--c), 0.42), inset 0 0 0 3px rgba(var(--c), 0.62);
}

#edge-alert[data-level="strong"]::before {
    box-shadow: inset 0 0 120px 34px rgba(var(--c), 0.55), inset 0 0 0 4px rgba(var(--c), 0.85);
}

#edge-alert.pulse::before {
    animation: edge-pulse 0.55s ease-in-out 2;
}

@keyframes edge-pulse {
    50% { box-shadow: inset 0 0 140px 44px rgba(var(--c), 0.65), inset 0 0 0 5px rgba(var(--c), 0.95); }
}

/* Côté de ce qu'il faut rejoindre : une nappe plus vive, gardée sur les bords */
#edge-alert::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: var(--dir);
    background: radial-gradient(42% 52% at var(--x) var(--y), rgba(var(--c), 0.7), transparent 72%);
    -webkit-mask: radial-gradient(ellipse 60% 62% at 50% 50%, transparent 64%, #000 100%);
    mask: radial-gradient(ellipse 60% 62% at 50% 50%, transparent 64%, #000 100%);
    transition: opacity 0.25s;
}

/* La consigne du boss prend la même couleur, et son signe (la pastille du téléphone aussi) */
.boss-alert[data-kind="share"], .boss-pill[data-kind="share"] { --kc: 255, 201, 77; --ki: '◎'; }
.boss-alert[data-kind="spread"], .boss-pill[data-kind="spread"] { --kc: 190, 120, 255; --ki: '✦'; }
.boss-alert[data-kind="dodge"], .boss-pill[data-kind="dodge"] { --kc: 255, 112, 60; --ki: '⚠'; }
.boss-alert[data-kind="break"], .boss-pill[data-kind="break"] { --kc: 90, 220, 255; --ki: '⚡'; }
.boss-alert[data-kind="path"], .boss-pill[data-kind="path"] { --kc: 110, 232, 140; --ki: '➜'; }
.boss-alert[data-kind="hold"], .boss-pill[data-kind="hold"] { --kc: 225, 235, 250; --ki: '⊘'; }

.boss-alert[data-kind]:not([data-kind=""]) {
    border-color: rgba(var(--kc), 0.7);
    background: linear-gradient(180deg, rgba(14, 20, 38, 0.9), rgba(6, 10, 22, 0.9));
    box-shadow: 0 0 26px rgba(var(--kc), 0.35), 0 6px 18px rgba(0, 0, 0, 0.55);
    color: #fff3dc;
    text-shadow: 0 0 12px rgba(var(--kc), 0.5), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.boss-alert[data-kind]:not([data-kind=""])::before {
    content: var(--ki);
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    color: rgb(var(--kc));
}

/* ---------- Départ en expédition (ui.showRunLoading) ----------
   Le bandeau de la première île en fond (un lent travelling), l'archipel en grand, sa première île, la barre de
   chargement dorée et un conseil. Au-dessus du fondu au noir et des écrans, sous « Tourne ton téléphone » */
#run-loading {
    position: fixed;
    inset: 0;
    z-index: 7;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(24px, 7vh, 72px) clamp(20px, 6vw, 88px);
    overflow: hidden;
    background: #02070d;
    color: var(--text);
    transition: opacity 0.45s ease;
    animation: run-loading-in 0.35s ease both;
}

#run-loading.hidden {
    display: none;
}

#run-loading.is-out {
    opacity: 0;
    pointer-events: none;
}

#run-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2, 7, 13, 0.15) 0%, rgba(2, 7, 13, 0.5) 50%, #02070d 92%);
}

.run-loading-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: run-loading-pan 16s ease-out both;
}

.run-loading-art[hidden] {
    display: none;
}

.run-loading-body,
.run-loading-tip {
    position: relative;
    z-index: 1;
}

.run-loading-body {
    max-width: 620px;
}

.run-loading-kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(var(--gold-rgb, 255, 214, 140));
}

.run-loading-title {
    margin: 6px 0 4px;
    font-family: var(--display, 'Lilita One', 'Outfit', sans-serif);
    font-size: clamp(34px, 5.6vw, 66px);
    font-weight: 400;
    line-height: 1.02;
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.75);
}

.run-loading-sub {
    margin: 0;
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-size: clamp(15px, 1.6vw, 19px);
    font-style: italic;
    color: rgba(234, 247, 255, 0.82);
}

.run-loading-bar {
    height: 6px;
    margin-top: 22px;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 214, 140, 0.18);
}

.run-loading-bar i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffb04a, #ffe2a0);
    box-shadow: 0 0 14px rgba(255, 200, 110, 0.7);
    transition: width 0.3s ease;
}

.run-loading-status {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: rgba(234, 247, 255, 0.6);
}

.run-loading-tip {
    max-width: 660px;
    margin: clamp(18px, 4vh, 36px) 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(234, 247, 255, 0.78);
}

.run-loading-tip::before {
    content: '✦  ';
    color: rgb(var(--gold-rgb, 255, 214, 140));
}

@keyframes run-loading-in {
    from { opacity: 0; }
}

@keyframes run-loading-pan {
    from { transform: scale(1.14) translateX(2%); }
    to { transform: scale(1.03); }
}

/* Téléphone en paysage : tout plus serré, le conseil garde sa ligne */
@media (max-height: 520px) and (orientation: landscape) {
    #run-loading {
        padding: 16px 28px 18px;
    }

    .run-loading-title {
        font-size: 36px;
    }

    .run-loading-bar {
        margin-top: 12px;
    }

    .run-loading-tip {
        margin-top: 12px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #run-loading,
    .run-loading-art {
        animation: none;
    }
}

/* Choix de carte en équipe : temps restant avant le choix automatique (ui.startLevelUpTimer) */
.lu-timer {
    width: min(320px, 80%);
    margin: 12px auto 0;
    text-align: center;
}

.lu-timer i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: var(--accent);
    transform-origin: 0 50%;
    transition: transform 0.25s linear, background-color 0.3s;
}

.lu-timer span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.lu-timer.urgent i {
    background: var(--heart);
}

.lu-timer.urgent span {
    color: var(--heart);
}

/* Reprise après le choix de carte : 3, 2, 1 au centre (ui.resumeCountdown), un chiffre par --step */
#resume-count {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    pointer-events: none;
    font-family: var(--display, 'Lilita One', sans-serif);
    font-size: clamp(64px, 14vh, 140px);
    color: var(--text);
    text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.8), 0 4px 18px rgba(0, 0, 0, 0.7);
    opacity: 0;
}

#resume-count.show {
    animation: resume-pop var(--step, 500ms) ease-out both;
}

@keyframes resume-pop {
    0% { opacity: 0; transform: scale(1.6); }
    25% { opacity: 1; transform: scale(1); }
    75% { opacity: 1; transform: scale(0.94); }
    100% { opacity: 0; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
    #resume-count.show {
        animation: none;
        opacity: 1;
    }
}

/* Effets de combat dans les descriptions (shared/keywords.js) : en gras, à la couleur de l'effet */
.kw {
    font-weight: 700;
}
/* Survol (ou touche) : une bulle explique l'effet (shared/keyword-tip.js) */
.kw[data-kw] {
    cursor: help;
    text-decoration: underline dotted rgba(255, 255, 255, 0.35);
    text-underline-offset: 3px;
}

.kw-burn { color: #ff9a52; }
.kw-poison { color: #8fe36a; }
.kw-shock { color: #ffe066; }
.kw-stun { color: #ffd08a; }
.kw-slow { color: #8fdcff; }
.kw-vuln { color: #ff8fb0; }
.kw-crit { color: #ffd35c; }
.kw-push { color: #c9b8ff; }
.kw-break { color: #5adcff; }
/* Types de dégâts subis (data/damage.js) : mêmes couleurs sur les chiffres reçus (rogue.css .float-text.hurt) */
.kw-phys { color: #ff8a66; }
.kw-special { color: #d99bff; }
.kw-true { color: #eef2f8; }

#kw-tip {
    position: fixed;
    z-index: 10000;
    max-width: min(300px, calc(100vw - 16px));
    padding: 8px 11px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(10, 14, 28, 0.96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: #dfe6f5;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
}
#kw-tip.show { opacity: 1; }
#kw-tip b {
    display: block;
    margin-bottom: 2px;
    font-size: 13.5px;
    color: #fff;
}
#kw-tip.kw-burn b { color: #ff9a52; }
#kw-tip.kw-poison b { color: #8fe36a; }
#kw-tip.kw-shock b { color: #ffe066; }
#kw-tip.kw-stun b { color: #ffd08a; }
#kw-tip.kw-slow b { color: #8fdcff; }
#kw-tip.kw-vuln b { color: #ff8fb0; }
#kw-tip.kw-crit b { color: #ffd35c; }
#kw-tip.kw-push b { color: #c9b8ff; }
#kw-tip.kw-break b { color: #5adcff; }
#kw-tip.kw-phys b { color: #ff8a66; }
#kw-tip.kw-special b { color: #d99bff; }
#kw-tip.kw-true b { color: #eef2f8; }

/* ---------- Téléphone à l'horizontale (html.phone, index.html) ----------
   Une seule mise en page pour tous les téléphones, dessinée pour 360 px de haut : les grands éléments suivent
   --phone-k (hauteur visible / 360, entre 0,84 et 1,2), le reste garde sa taille (le texte est aussi lisible sur
   chaque téléphone). Le centre de l'écran reste au combat, le haut à la barre du gardien et aux événements : annonces,
   carte d'île et titres de gardien passent en bas au centre, entre les deux pouces, en plus petit */
html.phone .hud-top {
    top: calc(6px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
    right: calc(10px + env(safe-area-inset-right));
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
}

html.phone .hud-center {
    display: contents;
}

html.phone .hud-left {
    grid-column: 1;
    grid-row: 1 / span 2;
    gap: 8px;
}

html.phone .hud-right,
html.phone #meter {
    display: none;
}

html.phone .zone {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    font-size: 12.5px;
    text-align: right;
}

html.phone #zone-name,
html.phone .zone-sub {
    max-width: 30vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.phone .zone-sub {
    font-size: 10.5px;
}

html.phone .zone-timer {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    font-size: 20px;
    line-height: 1;
}

/* Barre du gardien, événements, terrain : sous la ligne du haut, au centre, sans barrer tout l'écran */
html.phone .zone-terrain,
html.phone #boss-bar,
html.phone #event-bar {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(520px, 62vw);
    max-width: none;
    margin: 2px 0 0;
}

html.phone .zone-terrain {
    width: auto;
    max-width: 62vw;
    font-size: 11px;
}

html.phone .boss-name {
    font-size: 12px;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Les losanges autour du nom : la place manque sur les petits téléphones */
html.phone .boss-name::before,
html.phone .boss-name::after {
    display: none;
}

/* Pendant un boss (retour du propriétaire, 2026-09-29 : « illisible, on ne voit plus rien ») : tout le texte en haut,
   le centre à l'arène. La zone et son chrono s'effacent (l'enrage est sur la barre) ; le boss prend la ligne du haut,
   entre la barre de vie et la pause : une ligne (phase et état, nom, enrage), une jauge fine, puis une seule pastille
   à la place de l'incantation et de l'encadré (ui.js setBoss : « Averse d'araignées · Suis la bande verte », remplie
   comme l'incantation, de la couleur de la mécanique). Les annonces passent en une ligne dessous */
html.phone #hud.boss-on .zone,
html.phone #hud.boss-on .zone-timer {
    display: none;
}

html.phone #hud.boss-on #boss-bar {
    grid-row: 1;
    width: min(460px, calc(100vw - 2 * (180px * var(--phone-k) + 30px)));   /* entre la barre de vie et le bord droit */
    margin: 0;
}

html.phone .boss-head {
    gap: 6px;
    margin-bottom: 2px;
}

html.phone .boss-tags,
html.phone .boss-enrage {
    font-size: 10.5px;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.phone .boss-track {
    height: 7px;
}

html.phone .boss-cast,
html.phone .boss-alert {
    display: none;
}

html.phone .boss-pill:not(.hidden) {
    display: block;
}

html.phone .boss-pill {
    position: relative;
    left: 50%;
    translate: -50% 0;
    width: max-content;
    min-width: 60%;
    max-width: 64vw;   /* plus large que la barre : sous la barre de vie, la place est libre */
    height: 24px;
    margin: 5px 0 0;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(var(--kc, 255, 214, 140), 0.75);
    background: rgba(6, 10, 22, 0.84);
    box-shadow: 0 0 14px rgba(var(--kc, 255, 180, 60), 0.3), 0 4px 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

html.phone .boss-pill.pop {
    animation: alertPop 0.45s ease;
}

#boss-pill-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: rgba(var(--kc, 255, 190, 80), 0.3);
    transition: width 0.15s linear;
}

#boss-pill-text {
    position: relative;
    display: block;
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff3dc;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

#boss-pill-text::before {
    content: var(--ki, '⚠');
    margin-right: 6px;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    color: rgb(var(--kc, 255, 201, 77));
}

html.phone #health {
    width: calc(180px * var(--phone-k));
    height: 20px;
}

html.phone #health-text {
    font-size: 11px;
}

html.phone .hud-bottom {
    left: calc(10px + env(safe-area-inset-left));
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(6px + env(safe-area-inset-bottom));
}

/* Barre de cartes (sous le pouce gauche) et affixes : hors du HUD, la page Partie du menu les montre ; le niveau
   passe dans la barre de vie (« 5 · 395 / 407 », ui.js setLevel) */
html.phone #build,
html.phone #affixes,
html.phone .level-chip {
    display: none;
}

html.phone #health-text[data-level] {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

html.phone #health-text[data-level]::before {
    content: attr(data-level) ' · ';
}

/* Annonces : en bas au centre (la bannière au-dessus des cartes : « Zone du boss » précède la carte du gardien) */
html.phone #banner {
    top: auto;
    bottom: calc(92px * var(--phone-k) + env(safe-area-inset-bottom));
    width: 52vw;
}

html.phone .banner-kicker {
    font-size: 10px;
    letter-spacing: 0.3em;
}

html.phone .banner-title {
    font-size: calc(19px * var(--phone-k));
    line-height: 1.15;
}

html.phone #hud.boss-on #banner {
    top: calc(66px + env(safe-area-inset-top));
    bottom: auto;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    width: max-content;
    max-width: 60vw;
    padding: 3px 14px;
    border-radius: 999px;
    background: rgba(6, 10, 22, 0.72);
}

html.phone #hud.boss-on .banner-kicker {
    flex: none;
    font-size: 9.5px;
    letter-spacing: 0.2em;
}

html.phone #hud.boss-on .banner-title::after {
    display: none;
}

html.phone #hud.boss-on .banner-title {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.phone #island-card {
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(400px, 50vw);
}

html.phone #island-emblem alandys-emblem {
    width: calc(58px * var(--phone-k));
    height: calc(58px * var(--phone-k));
}

html.phone .island-kicker {
    font-size: 10px;
    letter-spacing: 0.24em;
}

html.phone .island-name {
    font-size: calc(26px * var(--phone-k));
}

html.phone .island-tagline {
    margin-top: 2px;
    font-size: 12px;
}

html.phone #boss-card {
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(460px, 50vw);
}

html.phone .bc-kicker {
    font-size: 10px;
    letter-spacing: 0.32em;
}

html.phone .bc-title {
    margin-top: 2px;
    font-size: calc(28px * var(--phone-k));
}

html.phone .bc-look {
    font-size: 12px;
    gap: 8px;
}

html.phone .bc-hint {
    font-size: 11px;
}

html.phone #evolve-toast {
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 50vw;
}

html.phone .evolve-kicker {
    font-size: 10px;
    letter-spacing: 0.3em;
}

html.phone .evolve-name {
    font-size: calc(30px * var(--phone-k));
}

html.phone #letterbox i {
    height: calc(22px * var(--phone-k));
}

html.phone #downed-hint {
    bottom: calc(96px * var(--phone-k));
    font-size: 12px;
}

/* Alertes sur les bords : une lueur à l'échelle de l'écran (en px fixes, le haut et le bas se rejoignaient) */
html.phone #edge-alert::before {
    box-shadow: inset 0 0 calc(40px * var(--phone-k)) calc(10px * var(--phone-k)) rgba(var(--c), 0.42), inset 0 0 0 2px rgba(var(--c), 0.62);
}

html.phone #edge-alert[data-level="strong"]::before {
    box-shadow: inset 0 0 calc(58px * var(--phone-k)) calc(16px * var(--phone-k)) rgba(var(--c), 0.55), inset 0 0 0 3px rgba(var(--c), 0.85);
}

/* Commandes tactiles : dans les coins, à la taille du pouce */
html.phone .touch-btn.dash {
    right: calc(18px + env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: calc(80px * var(--phone-k));
    height: calc(80px * var(--phone-k));
    font-size: 30px;
}

html.phone .touch-btn.nova {
    right: calc(18px + 90px * var(--phone-k) + env(safe-area-inset-right));
    bottom: calc(34px + env(safe-area-inset-bottom));
    width: calc(66px * var(--phone-k));
    height: calc(66px * var(--phone-k));
    font-size: 24px;
}

html.phone .touch-btn.pause {
    top: calc(64px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    width: 40px;
    height: 40px;
}

html.phone .touch-stick {
    width: calc(112px * var(--phone-k));
    height: calc(112px * var(--phone-k));
    margin: calc(-56px * var(--phone-k)) 0 0 calc(-56px * var(--phone-k));
}

html.phone .touch-hint {
    right: calc(22% + env(safe-area-inset-right));
    top: 34%;
    width: calc(96px * var(--phone-k));
    height: calc(96px * var(--phone-k));
    padding: 12px;
    font-size: 10px;
}

html.phone #resume-count {
    font-size: calc(64px * var(--phone-k));
}

/* Page Partie : le médaillon qu'on regarde cerclé d'or, la carte prise à l'instant (attente des autres) en cyan ; son
   effet se lit dans le zoom */
.bv-card .build-icon { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.bv-card:hover .build-icon,
.bv-card:focus-visible .build-icon,
.bv-card.on .build-icon {
    transform: scale(1.12);
    box-shadow: 0 0 0 2px rgba(4, 8, 16, 0.9), 0 0 0 3px rgba(255, 214, 107, 0.75);
}
.bv-card:focus-visible { outline: none; }
.bv-card.is-new .build-icon { box-shadow: 0 0 0 2px rgba(4, 8, 16, 0.9), 0 0 0 3px var(--evolution), 0 0 14px -2px var(--evolution); }
.pause-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 58px;
    margin: 10px auto 0;
    max-width: 440px;
    padding: 8px 12px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: rgba(8, 14, 28, 0.55);
    text-align: left;
}
.pause-card-hint {
    margin: auto;
    font-size: 12px;
    color: var(--faint);
}
.pause-card .pause-card-icon { flex: none; width: 34px; height: 34px; font-size: 17px; }
.pause-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.pause-card-text b { font-size: 14px; color: var(--text); }
.pause-card-text small { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }

/* Bonus en cours (Fournaise, Élan, Frénésie…) sous la barre de vie : l'anneau doré se vide avec le temps restant */
#buffs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
#buffs:empty { display: none; }
.buff {
    position: relative;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #2a2340, #0b1222 72%);
    box-shadow: 0 0 0 1px rgba(4, 8, 16, 0.9), 0 0 10px -3px rgba(255, 190, 90, 0.7);
    animation: buff-in 0.25s ease-out;
}
.buff-ring {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(#ffd66b calc(var(--left, 1) * 360deg), rgba(255, 255, 255, 0.12) 0);
    -webkit-mask: radial-gradient(circle, transparent 14px, #000 15px);
    mask: radial-gradient(circle, transparent 14px, #000 15px);
}
.buff-icon {
    position: relative;
    font-size: 15px;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
    color: #ffe3a3;
}
.buff b {
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    padding: 0 4px;
    border-radius: 99px;
    background: #140f06;
    border: 1px solid rgba(255, 214, 107, 0.55);
    font-size: 9.5px;
    line-height: 13px;
    font-weight: 800;
    color: #ffd66b;
    white-space: nowrap;
}
.buff b:empty { display: none; }
.buff.fading { animation: buff-fade 0.4s ease-in-out infinite alternate; }
/* Effets des monstres (afflictions.js) : cerclés de rouge */
.buff.debuff { box-shadow: 0 0 0 1px rgba(4, 8, 16, 0.9), 0 0 10px -3px rgba(255, 80, 80, 0.8); }
.buff.debuff .buff-ring { background: conic-gradient(#ff6b6b calc(var(--left, 1) * 360deg), rgba(255, 255, 255, 0.12) 0); }
.buff.debuff .buff-icon { color: #ffb3a8; }
.buff.debuff b { color: #ff9b8f; border-color: rgba(255, 107, 107, 0.55); }
.buff.debuff.fading { animation: none; }
.buff.spent { filter: grayscale(1); opacity: 0.45; }
.buff.spent b { color: #ff8a7a; border-color: rgba(255, 138, 122, 0.5); }
@keyframes buff-in { from { transform: scale(0.4); opacity: 0; } }
@keyframes buff-fade { to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
    .buff, .buff.fading { animation: none; }
}
html.phone #buffs { margin-top: calc(4px * var(--phone-k, 1)); gap: calc(5px * var(--phone-k, 1)); }
html.phone .buff { width: calc(26px * var(--phone-k, 1)); height: calc(26px * var(--phone-k, 1)); }
html.phone .buff-ring {
    -webkit-mask: radial-gradient(circle, transparent calc(11px * var(--phone-k, 1)), #000 calc(12px * var(--phone-k, 1)));
    mask: radial-gradient(circle, transparent calc(11px * var(--phone-k, 1)), #000 calc(12px * var(--phone-k, 1)));
}
html.phone .buff-icon { font-size: calc(12px * var(--phone-k, 1)); }

/* Écran de fin : gains réduits par le plafond du jour (data/meta.js DAILY_SHARE) */
.reward-cap {
    margin: 0 0 10px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 179, 107, 0.45);
    background: rgba(255, 179, 107, 0.08);
    color: #ffcf9e;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}
.reward-cap small { display: block; margin-top: 3px; font-weight: 500; color: var(--muted); }

/* Relique gagnée (écran de fin) : le portrait de son gardien dans un médaillon, cerclé d'or pour un Seigneur */
.end-relic {
    display: flex;
    align-items: center;
    gap: 12px;
}

.end-relic-face {
    flex: none;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid rgba(255, 201, 77, 0.55);
    background: radial-gradient(circle at 50% 38%, rgba(255, 201, 77, 0.35), rgba(6, 10, 22, 0.9));
}

.end-relic-face img {
    width: 125%;
    height: 125%;
    max-width: none;
    object-fit: contain;
    transform: translateY(2%);
}

.end-relic.lord .end-relic-face {
    border-color: #ffd27a;
    box-shadow: 0 0 12px rgba(255, 210, 122, 0.5);
}

/* Page Partie : les reliques portées, sous la fiche en expédition (portrait du gardien, nom, effet à son rang) */
.bv-relics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 10px;
}

.bv-relic {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 201, 77, 0.3);
    background: rgba(255, 201, 77, 0.05);
}

.bv-relic .end-relic-face {
    width: 34px;
    height: 34px;
    border-width: 1.5px;
}

.bv-relic.lord .end-relic-face {
    border-color: #ffd27a;
}

.bv-relic > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bv-relic b {
    font-size: 12px;
    line-height: 1.2;
    color: #ffe38a;
}

.bv-relic small {
    font-size: 11px;
    line-height: 1.25;
    color: var(--muted);
}

/* ---------- Journal de bord à l'écran de fin (ui.js journalEndHtml) ---------- */

.reward-journal {
    display: grid;
    gap: 4px;
    margin-top: 8px;
}
.journal-line {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 8px;
    align-items: baseline;
    font-size: 12.5px;
}
.journal-line > span {
    grid-row: span 2;
    font-weight: 800;
    color: rgb(255, 214, 140);
    font-variant-numeric: tabular-nums;
}
.journal-line.done > span {
    color: rgb(109, 255, 176);
}
.journal-line small {
    font-size: 11px;
    opacity: 0.6;
}

/* Compteur d'images par seconde (Réglages → « Afficher les images par seconde »), main.js showFps : en bas à droite, au-dessus
   de tout, sans jamais prendre un clic ; orange quand le jeu passe sous 48 images par seconde */
#fps-meter {
    position: fixed;
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 10000;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(4, 10, 18, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #bfe9ff;
    font: 600 11px/1.3 ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    user-select: none;
}

#fps-meter:empty {
    display: none;
}

#fps-meter.slow {
    color: #ffb45e;
    border-color: rgba(255, 180, 94, 0.45);
}

/* ---------- File en ligne (matchmaking.js) : la pastille « en file » et la fenêtre « Groupe trouvé » ----------
   Au hub (hors de l'onglet Partir) comme en jeu : on peut jouer seul en attendant. Le cadre de nuit cerclé d'or des
   messages ; au-dessus des écrans et des invitations, sous les infobulles */

.queue-pill {
    position: fixed;
    z-index: 65;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
    padding: 5px 6px 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 214, 140, 0.4);
    background: linear-gradient(180deg, rgba(20, 29, 52, 0.94), rgba(10, 16, 31, 0.95));
    box-shadow: 0 0 0 2px rgba(4, 8, 16, 0.6), 0 10px 24px -12px rgba(0, 0, 0, 0.9);
    color: #f1e3c4;
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
}
/* En expédition : sous la barre du haut (vie, île), plus discrète */
.queue-pill.in-run {
    top: auto;
    bottom: 14px;
    left: 14px;
    transform: none;
    opacity: 0.88;
    cursor: default;
}
.queue-pill-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.queue-pill-text b { color: #ffd98c; font-weight: 700; }
.queue-pill-spin {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 214, 140, 0.25);
    border-top-color: #ffd98c;
    animation: spin 0.9s linear infinite;
}
.queue-pill-x {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 214, 140, 0.3);
    background: rgba(255, 214, 140, 0.08);
    color: #f1e3c4;
    font: 700 14px/1 var(--font, 'Outfit', sans-serif);
    cursor: pointer;
}
.queue-pill-x:hover { background: rgba(255, 214, 140, 0.2); }

.match-popup {
    position: fixed;
    z-index: 72;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 32px));
    padding: 12px 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 214, 140, 0.6);
    background:
        radial-gradient(rgba(255, 238, 205, 0.035) 1px, transparent 1.4px) 0 0 / 13px 13px,
        linear-gradient(180deg, rgb(22, 32, 58), rgb(10, 16, 31));
    box-shadow: 0 0 0 2px rgba(4, 8, 16, 0.7), 0 18px 50px -12px rgba(0, 0, 0, 0.85), 0 0 34px -10px rgba(255, 196, 90, 0.75);
    color: #f1e3c4;
    overflow: hidden;
    animation: match-in 0.35s ease-out;
}
/* Sans transparence : une animation se fige dans un onglet en arrière-plan (la fenêtre restait à moitié vue) */
@keyframes match-in { from { transform: translate(-50%, -14px) scale(0.97); } }
.match-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.match-head b {
    font: 400 20px/1.1 var(--display, 'Lilita One', sans-serif);
    letter-spacing: 0.02em;
    color: #ffd98c;
    text-shadow: 0 0 12px rgba(255, 196, 90, 0.45);
}
.match-clock {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #f1e3c4;
}
.match-where { margin: 4px 0 10px; font-size: 13.5px; color: rgba(241, 227, 196, 0.85); }
.match-members { display: flex; flex-wrap: wrap; gap: 8px; }
.match-member {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 110px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 214, 140, 0.18);
    background: rgba(255, 255, 255, 0.03);
}
.match-member.ok { border-color: rgba(140, 230, 160, 0.55); background: rgba(120, 220, 150, 0.08); }
.match-member .egg { width: 20px; height: 27px; flex: none; }
.match-member > span { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; }
.match-member b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-member small { font-size: 11px; color: rgba(241, 227, 196, 0.6); }
.match-member i { margin-left: auto; font-style: normal; font-weight: 800; color: #8de6a0; }
.match-note { margin: 10px 0 0; font-size: 12px; color: rgba(241, 227, 196, 0.72); }
.match-wait { margin: 12px 0 2px; font-size: 13px; color: #8de6a0; }
.match-actions { display: flex; gap: 8px; margin-top: 12px; }
.match-actions .btn-primary,
.match-actions .btn-ghost {
    flex: 1;
    min-width: 0;
    padding: 9px 14px;
    font-size: 14px;
}
.match-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 214, 140, 0.12);
}
.match-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ffb45e, #ffd98c);
    transform-origin: left;
    transition: transform 0.25s linear;
}

/* Options de la file, sous la recherche (onglet Partir du hub) */
.queue-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.queue-opt {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted, rgba(205, 228, 244, 0.66));
    font: 600 11.5px/1.3 var(--font, 'Outfit', sans-serif);
    cursor: pointer;
}
.queue-opt.on {
    border-color: rgba(255, 214, 140, 0.55);
    background: rgba(255, 214, 140, 0.12);
    color: #f1e3c4;
}

html.phone .match-popup { top: 8px; padding: 9px 11px 11px; width: min(380px, calc(100vw - 24px)); }
html.phone .match-head b { font-size: 17px; }
html.phone .match-where { margin: 2px 0 6px; }
html.phone .match-actions { margin-top: 8px; }
html.phone .queue-pill.in-run { bottom: auto; top: calc(56px * var(--phone-k, 1)); left: 50%; transform: translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
    .match-popup, .queue-pill-spin { animation: none; }
}