/* Finitions de tous les écrans restants : même langage que le Hub (bannière en dégradé, cartes en verre,
   une couleur par écran). Jeux, Missions, Passeport, Réglages, Notifications, Boutique, Panier, Kontact, Profil. */

#hubV2GamesView { --screen: #ff6a3d; --screen-2: #8b3dff; }
#hubMissionsView { --screen: #53e6a5; --screen-2: #2bc0ff; }
#hubPassportView { --screen: #ffd32e; --screen-2: #ff6a3d; }
#appSettingsView { --screen: #8fa2ff; --screen-2: #5ec8ff; }
#appNotificationsView { --screen: #ff5c8a; --screen-2: #ff9f1c; }
#hubStoreView, #hubCartView { --screen: #ff9f1c; --screen-2: #ff5c8a; }
#hubContactView { --screen: #5ec8ff; --screen-2: #8b3dff; }
#appProfileView { --screen: var(--profile-accent, #ffd32e); --screen-2: #8b3dff; }

/* ---------- Bannière d'en-tête commune ---------- */
:is(#hubMissionsView, #hubPassportView) > .hub-preview-screen-heading,
:is(#appSettingsView, #hubStoreView, #hubCartView, #hubContactView) > .app-view-heading,
#appNotificationsView > .app-screen-heading {
  position: relative; margin: 12px 12px 14px; padding: 18px 16px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--screen) 35%, transparent); border-radius: 18px;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--screen-2) 30%, transparent), transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--screen) 22%, #111018), #111018 70%);
}
:is(#hubMissionsView, #hubPassportView, #appSettingsView, #hubStoreView, #hubCartView, #hubContactView, #appNotificationsView) :is(.app-kicker, .hub-preview-screen-heading small) { color: var(--screen); }
:is(#hubMissionsView, #hubPassportView, #appSettingsView, #hubStoreView, #hubCartView, #hubContactView, #appNotificationsView) > :is(.app-view-heading, .app-screen-heading, .hub-preview-screen-heading) h1 { font-size: 1.6rem; }
:is(#hubMissionsView, #hubPassportView, #appSettingsView, #hubStoreView, #hubCartView, #hubContactView, #appNotificationsView) > :is(.app-view-heading, .app-screen-heading, .hub-preview-screen-heading)::after {
  position: absolute; right: 14px; bottom: -16px; font-size: 4.2rem; opacity: .16; transform: rotate(-10deg); pointer-events: none;
}
#hubMissionsView > .hub-preview-screen-heading::after { content: "🎯"; right: 64px; }
#hubPassportView > .hub-preview-screen-heading::after { content: "🪪"; right: 64px; }
#appSettingsView > .app-view-heading::after { content: "⚙️"; }
#hubStoreView > .app-view-heading::after { content: "🛍️"; right: 90px; }
#hubCartView > .app-view-heading::after { content: "🛒"; right: 70px; }
#hubContactView > .app-view-heading::after { content: "✉️"; }
#appNotificationsView > .app-screen-heading::after { content: "🔔"; right: 60px; }

/* ---------- Jeux : vraies affiches avec bouton Jouer ---------- */
#hubV2GamesView .hub-v2-games-hero img { filter: drop-shadow(0 0 24px rgba(255, 200, 90, .35)); animation: polish-float 5s ease-in-out infinite; }
#hubV2GamesView .hub-v2-game-list { display: grid; gap: 14px; }
#hubV2GamesView .hub-v2-game-list > button { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 18px 40px -18px var(--game-glow, #ff6a3d); transition: transform .2s ease, box-shadow .2s ease; }
#hubV2GamesView .hub-v2-game-list > button:active { transform: scale(.97); }
#hubV2GamesView .hub-v2-game-list > button.is-kafmillion { --game-glow: #5b8cff; }
#hubV2GamesView .hub-v2-game-list > button.is-blindtest { --game-glow: #c34dff; }
#hubV2GamesView .hub-v2-game-list > button.is-daily { --game-glow: #ff6a3d; }
#hubV2GamesView .hub-v2-game-list > button.is-almarj { --game-glow: #ffb347; }
#hubV2GamesView .hub-v2-game-list > button::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .65)); pointer-events: none; }
#hubV2GamesView .hub-v2-game-list > button::after { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 8px 16px; content: "JOUER ▶"; border-radius: 999px; background: linear-gradient(90deg, #ff6a3d, #ffb347); color: #1d0a00; font-size: .72rem; font-weight: 900; letter-spacing: .08em; box-shadow: 0 8px 22px rgba(255, 106, 61, .5); }
#hubV2GamesView .hub-v2-game-list > button.is-daily::after { content: "ÉCOUTER ▶"; }
#hubV2GamesView .hub-v2-game-list > button > img { transition: transform .5s ease; }
#hubV2GamesView .hub-v2-game-list > button:hover > img { transform: scale(1.04); }

/* ---------- Missions ---------- */
#hubMissionsView .hub-missions-board,
#hubMissionsView .hub-missions-week { border-color: rgba(255, 255, 255, .08); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), #121118; }
#hubMissionsView .hub-all-mission { border-radius: 14px; transition: transform .15s ease; }
#hubMissionsView .hub-all-mission:active { transform: scale(.98); }

/* ---------- Passeport ---------- */
#hubPassportView :is(.hub-passport-series, .hub-passport-signature, .hub-passport-generated) { border-color: rgba(255, 211, 46, .2); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 211, 46, .05), rgba(255, 255, 255, .01)), #121118; }
#hubPassportView .hub-passport-series-option { border-radius: 14px; transition: transform .2s ease, box-shadow .2s ease; }
#hubPassportView .hub-passport-series-option:active { transform: scale(.97); }
#hubPassportView .hub-passport-signature-pad { border-radius: 14px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 28px), #0e0d13; }

/* ---------- Réglages ---------- */
#appSettingsView .app-settings-menu,
#appSettingsView .app-settings-card { border-color: rgba(255, 255, 255, .08); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), #121118; overflow: hidden; }
#appSettingsView .app-settings-row { transition: background .2s ease; }
#appSettingsView .app-settings-row:active { background: rgba(255, 255, 255, .05); }
#appSettingsView .app-settings-menu > button:nth-child(1) { --row: #a06bff; }
#appSettingsView .app-settings-menu > button:nth-child(2) { --row: #ffb347; }
#appSettingsView .app-settings-menu > button:nth-child(3) { --row: #ff6a3d; }
#appSettingsView .app-settings-menu > button:nth-child(4) { --row: #5ec8ff; }
#appSettingsView .app-settings-menu > button:nth-child(5) { --row: #ff5c8a; }
#appSettingsView .app-settings-menu > button:nth-child(6) { --row: #53e6a5; }
#appSettingsView .app-settings-menu > button > span:first-child { border-radius: 12px; background: linear-gradient(135deg, var(--row, #8fa2ff), color-mix(in srgb, var(--row, #8fa2ff) 40%, #111)); box-shadow: 0 6px 16px -6px var(--row, #8fa2ff); }

/* ---------- Notifications ---------- */
#appNotificationsView .app-notification-filters { border-radius: 999px; background: rgba(255, 255, 255, .03); }
#appNotificationsView .app-notification-filters button { border-radius: 999px; }
#appNotificationsView .app-notification-filters button.is-active { background: linear-gradient(90deg, var(--screen), var(--screen-2)); color: #200510; }
#appNotificationsView .app-notification { border-radius: 16px; transition: transform .15s ease, background .2s ease; }
#appNotificationsView .app-notification:active { transform: scale(.98); }
#appNotificationsView .app-notification.is-unread { background: linear-gradient(90deg, color-mix(in srgb, var(--screen) 12%, transparent), transparent 80%); box-shadow: inset 3px 0 0 var(--screen); }
#appNotificationsView .app-notification-dot { background: var(--screen); box-shadow: 0 0 8px var(--screen); }
#appNotificationsView .app-notification-preview { border-left: 2px solid color-mix(in srgb, var(--screen) 50%, transparent); }

/* ---------- Boutique et panier ---------- */
#hubStoreView .hub-cart-shortcut { border-radius: 999px; background: linear-gradient(90deg, var(--screen), var(--screen-2)); color: #1d0a00; font-weight: 900; box-shadow: 0 6px 18px rgba(255, 140, 50, .4); }
#hubStoreView .hub-store-card { overflow: hidden; border-color: rgba(255, 255, 255, .08); border-radius: 18px; background: #121118; transition: transform .2s ease, box-shadow .2s ease; }
#hubStoreView .hub-store-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px var(--screen); }
#hubStoreView .hub-store-card > img { transition: transform .5s ease; }
#hubStoreView .hub-store-card:hover > img { transform: scale(1.05); }
#hubStoreView .hub-store-card small { color: var(--screen); }
#hubStoreView .hub-store-card em { color: #ffd46a; font-size: .95rem; font-style: normal; font-weight: 900; }
#hubStoreView .hub-store-card button { border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--screen), var(--screen-2)); color: #1d0a00; font-weight: 900; }
#hubCartView .hub-cart-total { border: 1px solid transparent; border-radius: 18px; background: linear-gradient(#15121b, #15121b) padding-box, linear-gradient(135deg, var(--screen), var(--screen-2)) border-box; }
#hubCartView .hub-cart-total strong { background: linear-gradient(90deg, #fff, #ffd46a); -webkit-background-clip: text; background-clip: text; color: transparent; }
#hubCartView .app-empty-state { padding: 26px 16px; border: 1px dashed rgba(255, 255, 255, .15); border-radius: 18px; text-align: center; }
#hubCartView .app-empty-state::before { display: block; margin-bottom: 6px; content: "🛒"; font-size: 2.2rem; }
:is(#hubCartView, #hubContactView) .hub-primary-button { border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--screen), var(--screen-2)); color: #160a00; font-weight: 900; box-shadow: 0 10px 24px -10px var(--screen); }
#hubContactView .hub-primary-button { color: #fff; }

/* ---------- Kontact ---------- */
#hubContactView .hub-contact-form { border-color: rgba(94, 200, 255, .2); border-radius: 18px; background: linear-gradient(180deg, rgba(94, 200, 255, .05), rgba(255, 255, 255, .01)), #121118; }
#hubContactView .hub-contact-form :is(input, textarea) { border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
#hubContactView .hub-contact-form :is(input, textarea):focus { border-color: var(--screen); box-shadow: 0 0 0 3px color-mix(in srgb, var(--screen) 22%, transparent); outline: 0; }
#hubContactView .hub-contact-address { border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--screen) 14%, transparent), transparent); }

/* ---------- Profil ---------- */
#appProfileView .app-profile-summary { border-radius: 22px; overflow: hidden; box-shadow: 0 20px 44px -24px var(--screen); }
#appProfileView .app-profile-avatar-wrap .app-profile-avatar { box-shadow: 0 0 0 3px #0f0e14, 0 0 0 5px var(--screen), 0 10px 26px -8px var(--screen); }
#appProfileView .app-profile-metrics { border-radius: 16px; background: rgba(255, 255, 255, .035); }
#appProfileView .app-profile-metrics strong { background: linear-gradient(180deg, #fff, var(--screen)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.2rem; }
#appProfileView .app-profile-tabs { border-radius: 999px; background: rgba(255, 255, 255, .03); }
#appProfileView .app-profile-tabs button { border-radius: 999px; }
#appProfileView .app-profile-tabs button.is-active { background: linear-gradient(90deg, var(--screen), var(--screen-2)); color: #140a00; }
#appProfileView .app-profile-edit-button { border-radius: 999px; }
#appProfileView .app-profile-kafprogress i i { background: linear-gradient(90deg, #8b3dff, #c86bff, #ffd32e); box-shadow: 0 0 12px rgba(200, 107, 255, .6); }

@keyframes polish-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { #hubV2GamesView .hub-v2-games-hero img { animation: none; } }

/* ---------- Musique : Albums, Radio, Klips ---------- */
#hubMusicView .hub-album-card { position: relative; overflow: hidden; border-radius: 18px; transition: transform .2s ease, box-shadow .2s ease; }
#hubMusicView .hub-album-card:active { transform: scale(.98); }
#hubMusicView .hub-album-card img { border-radius: 12px; box-shadow: 8px 0 0 -2px #0d0c12, 14px 0 0 -2px #222, 0 10px 22px -8px rgba(0, 0, 0, .8); transition: transform .3s ease; }
#hubMusicView .hub-album-card:hover img { transform: rotate(-3deg) scale(1.03); }
#hubMusicView .hub-radio-card { position: relative; overflow: hidden; border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgba(255, 106, 61, .25), transparent 55%), linear-gradient(160deg, #1b1420, #111016); }
#hubMusicView .hub-radio-card > span { display: inline-flex; align-items: center; gap: 6px; }
#hubMusicView .hub-radio-card > span::before { width: 7px; height: 7px; content: ""; border-radius: 50%; background: #ff3b4e; box-shadow: 0 0 8px #ff3b4e; animation: polish-onair 1.4s ease-in-out infinite; }
#hubMusicView .hub-radio-art { position: relative; overflow: hidden; border-radius: 16px; background: radial-gradient(circle, rgba(255, 106, 61, .35), transparent 70%), #1a1215; }
#hubMusicView .hub-radio-art::after { position: absolute; right: 18%; bottom: 14%; left: 18%; height: 34%; content: ""; background: repeating-linear-gradient(90deg, #ff6a3d 0 5px, transparent 5px 10px); -webkit-mask: linear-gradient(0deg, #000 20%, transparent); mask: linear-gradient(0deg, #000 20%, transparent); opacity: .55; animation: polish-eq 1.1s ease-in-out infinite alternate; transform-origin: bottom; }
#hubMusicView .hub-radio-art-green { background: radial-gradient(circle, rgba(83, 230, 165, .3), transparent 70%), #111a16; }
#hubMusicView .hub-radio-art-green::after { background: repeating-linear-gradient(90deg, #53e6a5 0 5px, transparent 5px 10px); }
#hubMusicView .hub-radio-card .hub-primary-button { border: 0; border-radius: 999px; background: linear-gradient(90deg, #ff6a3d, #ffb347); color: #1d0a00; font-weight: 900; box-shadow: 0 10px 24px -10px #ff6a3d; }
#hubMusicView .hub-clip-card { overflow: hidden; border-radius: 20px; background: #121118; box-shadow: 0 16px 34px -20px rgba(255, 60, 60, .5); }
#hubMusicView .hub-clip-copy small { color: #ff4d5e; }
#hubMusicView .hub-clip-youtube { border-radius: 999px; background: #ff0033; color: #fff; border: 0; font-weight: 900; }

/* ---------- Lecteur plein écran : halo à la couleur de la pochette ---------- */
#hubPlayerScreen::before { position: absolute; inset: 0; z-index: 0; content: ""; background: radial-gradient(ellipse at 50% 22%, color-mix(in srgb, var(--hub-track-accent, #ff6a3d) 32%, transparent), transparent 60%), radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--hub-track-accent, #ff6a3d) 14%, transparent), transparent 55%); pointer-events: none; }
#hubPlayerScreen .hub-player-art { border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8), 0 0 60px -10px color-mix(in srgb, var(--hub-track-accent, #ff6a3d) 55%, transparent); }
#hubPlayerScreen .hub-player-controls .hub-main-play { background: var(--hub-track-accent, var(--app-orange)); box-shadow: 0 12px 30px -8px var(--hub-track-accent, var(--app-orange)); }
#hubPlayerScreen .hub-player-chip,
#hubPlayerScreen .hub-player-share { border-color: color-mix(in srgb, var(--hub-track-accent, #ff6a3d) 40%, rgba(255, 255, 255, .15)); background: color-mix(in srgb, var(--hub-track-accent, #ff6a3d) 10%, rgba(255, 255, 255, .04)); }

/* ---------- Fenêtres (publication, connexion, édition…) ---------- */
.app-sheet { border-top: 1px solid rgba(255, 255, 255, .1); background: radial-gradient(ellipse at 50% 0%, rgba(255, 106, 61, .14), transparent 45%), var(--app-surface, #15161b); }
.app-sheet .app-sheet-handle { width: 44px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .25); }
.app-sheet :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) { border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.app-sheet :is(input, textarea, select):focus { border-color: var(--app-orange, #ff6a3d); box-shadow: 0 0 0 3px rgba(255, 106, 61, .2); outline: 0; }
.app-sheet .app-button:not(.app-button-small) { border: 0; border-radius: 999px; background: linear-gradient(90deg, #ff6a3d, #ffb347); color: #1d0a00; font-weight: 900; box-shadow: 0 10px 26px -10px #ff6a3d; }
#appComposeSheet .app-compose-tools > * { border-radius: 999px; }
#appComposeSheet #appComposeBody { border-radius: 18px; }
.app-auth-sheet .app-sheet-heading h2 { background: linear-gradient(90deg, #fff, #ffb347); -webkit-background-clip: text; background-clip: text; color: transparent; }
.app-auth-sheet .app-sheet-heading .app-kicker { color: #53e6a5; }

/* ---------- Détail d'un post ---------- */
.app-post-detail-panel { border-radius: 22px 22px 0 0; background: radial-gradient(ellipse at 50% 0%, rgba(255, 106, 61, .12), transparent 45%), var(--app-surface, #15161b); }
.app-post-detail-heading { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.app-post-detail-heading button { border-radius: 50%; background: rgba(255, 255, 255, .06); }
.app-post-detail .app-post-highlight { box-shadow: 0 0 0 2px rgba(255, 106, 61, .5), 0 16px 40px -18px #ff6a3d; }

/* ---------- Création de Kapsule ---------- */
.kapsule-composer-panel { border-top: 1px solid rgba(255, 255, 255, .1); background: radial-gradient(ellipse at 50% 0%, rgba(255, 92, 138, .18), transparent 50%), var(--app-surface, #181a1f); }
.kapsule-composer-panel header strong { background: linear-gradient(90deg, #fff, #ff8fb0); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.15rem; }
.kapsule-composer-preview { border-style: solid; border-color: rgba(255, 92, 138, .25); background: radial-gradient(circle, rgba(255, 92, 138, .1), transparent 70%), #0b0c0f; }
.kapsule-tool { border-radius: 999px; transition: transform .15s ease, border-color .2s ease; }
.kapsule-tool:active { transform: scale(.96); }
.kapsule-caption { border-radius: 999px; }
.kapsule-publish:not(:disabled) { background: linear-gradient(90deg, #ff6a3d, #ff5c8a) !important; color: #fff !important; }

@keyframes polish-onair { 50% { opacity: .3; } }
@keyframes polish-eq { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { #hubMusicView .hub-radio-card > span::before, #hubMusicView .hub-radio-art::after { animation: none; } }

/* ---------- Retour au doigt : bulle « ‹ » sur le bord gauche ---------- */
.app-back-hint { --back-progress: 0; position: fixed; top: 50%; left: 8px; z-index: 300; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: rgba(20, 20, 26, .9); color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 1; box-shadow: 0 6px 20px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .12); opacity: var(--back-progress); transform: translate(calc(-60px + var(--back-progress) * 60px), -50%) scale(calc(.6 + var(--back-progress) * .4)); pointer-events: none; transition: background .2s ease, box-shadow .2s ease; }
.app-back-hint span { margin-top: -3px; }
.app-back-hint.is-ready { background: var(--app-orange, #ff6a3d); color: #1d0a00; box-shadow: 0 6px 22px rgba(255, 106, 61, .6); }
.app-view.is-back-dragging { will-change: transform; }