/* ===== Game of Trognes : carte, écrans de départ et de jeu, cinématiques =====
   Fichier dédié à la saga, chargé après style.css (qui garde le fond, la neige et le trône de la carte).
   Noms parodiques dans le récit ; décors 100 % CSS/emojis, sans image officielle.
   Le style de base décrit l'état final ; les animations partent de l'état initial (fill-mode both). */

/* --- Carte du hub : bannière au loup et yeux bleus dans le blizzard --- */
.saga-trones .vt-banniere { position: absolute; left: 14%; top: 0; width: 34px; height: 64px; background: linear-gradient(180deg, #5d6673, #3b424d); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); box-shadow: inset 0 3px 0 #c9d1dc; transform-origin: 50% 0; animation: vt-flotte 3s ease-in-out infinite alternate; }
.vt-loup { position: absolute; left: 6px; top: 18px; font-size: 1.1rem; filter: grayscale(1) brightness(1.6); }
.saga-trones .vt-yeux { position: absolute; right: 8%; top: 30px; width: 70px; height: 30px; }
.vt-yeux i { position: absolute; width: 12px; height: 4px; background: radial-gradient(circle at 20% 50%, #7fd8ff 0 1.6px, transparent 2.2px), radial-gradient(circle at 80% 50%, #7fd8ff 0 1.6px, transparent 2.2px); filter: drop-shadow(0 0 3px #7fd8ff); animation: vt-yeux 4s ease-in-out infinite; }
.vt-yeux i:nth-child(1) { left: 0; top: 4px; }
.vt-yeux i:nth-child(2) { left: 28px; top: 16px; animation-delay: -1.3s; }
.vt-yeux i:nth-child(3) { left: 54px; top: 2px; animation-delay: -2.6s; }
@keyframes vt-flotte { from { transform: skewX(-3deg); } to { transform: skewX(4deg); } }
@keyframes vt-yeux { 0%, 30%, 100% { opacity: 0; } 45%, 80% { opacity: 1; } }

/* --- Écrans de départ et de jeu : neige, sapins, ciel glacé qui s'assombrit --- */
.tr-decor { display: none; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#hp-scene > .tr-decor, #hi-scene > .tr-decor { position: absolute; z-index: 0; }
[data-theme="trones"] .tr-decor { display: block; }
[data-theme="trones"] .hp-ciel { display: none; }
.tr-decor > span { position: absolute; display: block; }
.td-sapins { left: 0; right: 0; bottom: 0; height: 26%; background: #0a1220; clip-path: polygon(0 100%, 0 40%, 4% 10%, 8% 40%, 12% 20%, 16% 45%, 20% 5%, 24% 40%, 30% 30%, 34% 55%, 66% 55%, 70% 25%, 75% 45%, 80% 8%, 84% 40%, 88% 15%, 93% 42%, 97% 12%, 100% 35%, 100% 100%); opacity: 0.9; }
.td-neige { inset: 0; background-image: radial-gradient(2px 2px at 10% 20%, #fff, transparent), radial-gradient(2px 2px at 30% 60%, #fff, transparent), radial-gradient(3px 3px at 55% 30%, #fff, transparent), radial-gradient(2px 2px at 75% 70%, #fff, transparent), radial-gradient(2px 2px at 90% 15%, #fff, transparent); background-size: 300px 300px; opacity: 0.6; animation: tr-chute-neige 12s linear infinite; }
.td-yeux { left: 6%; right: 6%; bottom: 20%; height: 24px; opacity: 0; background: radial-gradient(circle at 10% 50%, #7fd8ff 0 2px, transparent 3px) 0 0 / 60px 24px repeat-x; filter: drop-shadow(0 0 4px #7fd8ff); }
.hp-scene[data-theme="trones"][data-chapitre="5"] .td-yeux { opacity: 0.8; animation: vt-yeux 5s ease-in-out infinite; }
.hp-scene[data-theme="trones"], .hi-scene[data-theme="trones"] { border-color: #8fa3b8; background: linear-gradient(180deg, #1a2433 0%, #2c3a4d 60%, #151c27 100%); }
.hp-scene[data-theme="trones"][data-chapitre="2"] { background: linear-gradient(180deg, #0c1a2c 0%, #1f3a55 60%, #0c1422 100%); }
.hp-scene[data-theme="trones"][data-chapitre="3"] { background: linear-gradient(180deg, #2a0f0a 0%, #4a1f14 60%, #160c0c 100%); }
.hp-scene[data-theme="trones"][data-chapitre="4"] { background: linear-gradient(180deg, #2a2a3e 0%, #4d4a66 55%, #1a1a28 100%); }
.hp-scene[data-theme="trones"][data-chapitre="5"] { background: linear-gradient(180deg, #02060c 0%, #0c1a2c 60%, #050a12 100%); }
[data-theme="trones"] .hp-parchemin { background: linear-gradient(180deg, #f2efe8, #ddd6c8); border-top: 6px solid #8fa3b8; box-shadow: 0 10px 30px #000a, inset 0 4px 0 #ffffff55; }
[data-theme="trones"] .hp-parchemin input[type="text"] { background: #fbfaf6; border-color: #a9a291; }
[data-theme="trones"] .hp-chapitre { color: #e3ecf5; text-shadow: 0 0 12px #7fd8ff55; }
[data-theme="trones"] .hp-avatar { filter: drop-shadow(0 0 10px #c9d1dc88); }
[data-theme="trones"] .hp-ennemi .hp-avatar { filter: drop-shadow(0 0 14px #7fd8ffcc); }
[data-theme="trones"] .hp-barre > span { background: linear-gradient(90deg, #3d8bff, #bfe9ff); }
[data-theme="trones"] .rayon-joueur { background: linear-gradient(90deg, transparent, #ffd8a8, #ff7a2f); box-shadow: 0 0 18px 4px #ff7a2f99; }
[data-theme="trones"] .rayon-ennemi { background: linear-gradient(270deg, transparent, #7fd8ff, #e6f7ff); box-shadow: 0 0 18px 4px #7fd8ffaa; }
[data-theme="trones"] .hi-chapitres li { background: #0b1430d9; }
[data-theme="trones"] .hi-niveau, [data-theme="trones"] .hi-sur-titre { color: #bfe9ff; }
[data-theme="trones"] .hi-infos, [data-theme="trones"] .hi-retour, [data-theme="trones"] .hp-sauver { color: var(--texte); }

/* --- Cinématiques : base commune --- */
.tr-ciel { inset: 0; background: linear-gradient(180deg, #0c1424, #26364f 70%, #4a5a72); }
.tr-ciel.nuit { background: linear-gradient(180deg, #050a14, #10223a 70%); }
.tr-ciel.braises { background: linear-gradient(180deg, #1a0606, #6b1d0c 55%, #d9542a); }
.tr-ciel.aube-froide { background: linear-gradient(180deg, #2a3050, #8a7aa0 55%, #e7b7a8); }
.tr-ciel.tempete { background: radial-gradient(ellipse at 50% 30%, #1c3550, #02060c 75%); }
.tr-ciel.aube { background: linear-gradient(180deg, #4a3a6a, #e09a6a 50%, #ffe2a0); }
.tr-neige { inset: 0; background-image: radial-gradient(2px 2px at 8% 12%, #fff, transparent), radial-gradient(3px 3px at 22% 40%, #fff, transparent), radial-gradient(2px 2px at 41% 22%, #fff, transparent), radial-gradient(2px 2px at 58% 64%, #fff, transparent), radial-gradient(3px 3px at 72% 30%, #fff, transparent), radial-gradient(2px 2px at 88% 52%, #fff, transparent); background-size: 100% 50%; animation: tr-chute-neige 5s linear infinite; }
.tr-neige.n2 { opacity: 0.6; background-position: 40px 20px; animation-duration: 8s; }
.tr-sol-neige { left: 0; right: 0; bottom: 0; height: 20%; background: linear-gradient(180deg, #dfe8f2, #9fb0c4); }

/* Héritier : manteau de fourrure, épée */
.tr-chevalier { width: 50px; height: 116px; }
.tr-chevalier > span { position: absolute; display: block; }
.tr-chevalier .manteau { left: 2px; top: 20px; width: 46px; height: 82px; background: linear-gradient(180deg, #3b3f48, #22252c); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.tr-chevalier .corps { left: 13px; top: 22px; width: 24px; height: 46px; border-radius: 4px; background: linear-gradient(#5a3e28 0 70%, #2a1c12 70% 76%, #5a3e28 76%); }
.tr-chevalier .col { left: 6px; top: 16px; width: 38px; height: 12px; border-radius: 8px; background: radial-gradient(circle, #e6e2d8 40%, #b8b2a6); }
.tr-chevalier .tete { left: 15px; top: 0; width: 20px; height: 22px; border-radius: 45%; background: #e0b48a; box-shadow: inset 0 6px 0 #2a1a10, inset 0 -6px 0 #3a2616; }
.tr-chevalier .jambe { top: 66px; width: 8px; height: 46px; background: #2a2620; border-bottom: 6px solid #1a140e; }
.tr-chevalier .jambe.g { left: 15px; }
.tr-chevalier .jambe.d { left: 27px; }
.tr-chevalier .epee { left: 40px; top: 30px; width: 5px; height: 60px; background: linear-gradient(90deg, #8a96a8, #eef2f7, #8a96a8); box-shadow: 0 -4px 0 2px #6b4a2e; transform-origin: 50% 0; transform: rotate(-20deg); }
.tr-chevalier.bataille .epee, .tr-chevalier.chef .epee, .tr-chevalier.flamme .epee { top: -40px; transform: rotate(10deg); }
.tr-chevalier.flamme .epee { background: linear-gradient(90deg, #ff7a2f, #ffe08a, #ff7a2f); box-shadow: 0 0 18px 6px #ff7a2fcc; animation: tr-flamme 0.4s ease-in-out infinite alternate; }

/* 1. Fort-d'Hiver : château enneigé, bannière au loup, loup qui hurle */
.tr-lune { right: 14%; top: 10%; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff, #c9d4e2); box-shadow: 0 0 40px #c9d4e288; }
.tr-fort { left: 14%; bottom: 20%; width: 50%; height: 34%; background: linear-gradient(180deg, #5d6673, #3b424d); box-shadow: inset 0 6px 0 #e6edf5; }
.tr-fort > span { position: absolute; display: block; }
.tr-fort .tour { bottom: 100%; width: 14%; height: 60%; background: linear-gradient(180deg, #5d6673, #3b424d); box-shadow: inset 0 5px 0 #e6edf5; }
.tr-fort .t1 { left: 6%; } .tr-fort .t2 { left: 44%; height: 90%; } .tr-fort .t3 { right: 6%; }
.tr-banniere { left: calc(14% + 22%); bottom: calc(20% + 34%); width: 30px; height: 46px; background: #48505c; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); box-shadow: inset 0 3px 0 #c9d1dc; animation: vt-flotte 2.5s ease-in-out infinite alternate; transform-origin: 50% 0; }
.tr-banniere .loup { position: absolute; left: 5px; top: 10px; font-size: 18px; filter: grayscale(1) brightness(1.6); }
.tr-colline { right: 0; bottom: 18%; width: 40%; height: 22%; background: #1a2232; clip-path: polygon(0 100%, 40% 20%, 60% 10%, 100% 30%, 100% 100%); }
.tr-loup-hurle { right: 18%; bottom: 36%; font-size: clamp(1.6rem, 5vw, 2.6rem); filter: grayscale(1) brightness(1.3) drop-shadow(0 0 8px #c9d4e2); transform: scaleX(-1) rotate(-20deg); animation: tr-hurle 3s ease-in-out 1s both; }
.tr-chevalier.depart { left: 48%; bottom: 6%; }

/* 2. Le Mur de Glace et les yeux bleus dans la forêt */
.tr-mur { left: 0; right: 0; top: 14%; bottom: 30%; background: linear-gradient(180deg, #e6f7ff, #9fd2ee 40%, #5a9cc4); box-shadow: inset 0 -20px 40px #1a4a6a; animation: tr-reflet 6s ease-in-out infinite alternate; }
.tr-mur .fissures { position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 60px, #ffffff66 60px 62px, transparent 62px 140px), repeating-linear-gradient(80deg, transparent 0 90px, #1a4a6a33 90px 92px, transparent 92px 180px); }
.tr-torches { left: 4%; right: 4%; top: 12%; height: 8px; background: radial-gradient(circle, #ffcf4a 0 2px, #ff7a2f66 3px, transparent 5px) 0 0 / 50px 8px repeat-x; animation: tr-vacille 0.5s ease-in-out infinite alternate; }
.tr-foret { left: 0; right: 0; bottom: 0; height: 34%; background: #050a12; clip-path: polygon(0 100%, 0 30%, 5% 0, 10% 30%, 15% 10%, 20% 35%, 26% 5%, 32% 30%, 38% 12%, 44% 35%, 50% 0, 56% 30%, 62% 10%, 68% 35%, 74% 5%, 80% 30%, 86% 8%, 92% 32%, 100% 10%, 100% 100%); }
.tr-armee { left: 3%; right: 3%; bottom: 8%; height: 40px; }
.tr-armee i { position: absolute; left: calc(var(--i) * 6.8%); top: 0; width: 16px; height: 5px; background: radial-gradient(circle at 20% 50%, #7fd8ff 0 2px, transparent 3px), radial-gradient(circle at 80% 50%, #7fd8ff 0 2px, transparent 3px); filter: drop-shadow(0 0 4px #7fd8ff); animation: tr-oeil 1.4s ease-out both; animation-delay: calc(1.5s + var(--i) * 0.25s); }
.tr-armee i:nth-child(even) { top: 18px; }
.scene-tr-mur .tr-armee i { left: calc(8% + var(--i) * 15%); }

/* 3. La guerre : dragon, feu et bannières */
.tr-fumee { left: 0; right: 0; bottom: 18%; height: 40%; background: radial-gradient(ellipse at 30% 100%, #3a1a1499, transparent 60%), radial-gradient(ellipse at 75% 100%, #2a141099, transparent 60%); animation: tr-fumee 4s ease-in-out infinite alternate; }
.tr-dragon { left: 62%; top: 10%; font-size: clamp(2.4rem, 8vw, 4.4rem); transform: scaleX(-1); animation: tr-vol 5s ease-in-out both; }
.tr-dragon .feu { position: absolute; left: 70%; top: 60%; width: 140px; height: 50px; background: linear-gradient(90deg, #fff3b0, #ff7a2f 40%, transparent); clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%); transform: rotate(35deg); transform-origin: 0 50%; filter: blur(1px); animation: tr-souffle 0.5s ease-in-out infinite alternate; }
.tr-armees { left: 0; right: 0; bottom: 18%; height: 30%; }
.tr-armees i { position: absolute; bottom: 0; width: 4px; height: 70%; background: #2a1c12; }
.tr-armees i::after { content: ""; position: absolute; left: 4px; top: 0; width: 34px; height: 40px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); background: var(--couleur); animation: vt-flotte 2s ease-in-out infinite alternate; }
.tr-armees .b1 { left: 8%; --couleur: #b3262e; } .tr-armees .b2 { left: 24%; --couleur: #c9961f; }
.tr-armees .b3 { left: 70%; --couleur: #2e5a3a; } .tr-armees .b4 { left: 86%; --couleur: #48505c; }
.tr-sol-boue { left: 0; right: 0; bottom: 0; height: 20%; background: linear-gradient(180deg, #3a2a1c, #1a120c); }
.tr-chevalier.bataille { left: 44%; bottom: 8%; }

/* 4. Ralliement du Nord : torches dans la neige, bannières au loup, cor */
.tr-montagnes { left: 0; right: 0; bottom: 20%; height: 36%; background: linear-gradient(180deg, #e6edf5, #8a98ad); clip-path: polygon(0 100%, 0 50%, 15% 10%, 28% 45%, 40% 0, 55% 40%, 68% 15%, 82% 45%, 100% 20%, 100% 100%); }
.tr-cortege { left: 0; right: 0; bottom: 18%; height: 18%; background: radial-gradient(circle, #ffcf4a 0 2px, #ff7a2f55 3px, transparent 5px) 0 0 / 22px 14px; animation: tr-marche 6s linear both; }
.tr-bannieres { left: 10%; right: 10%; bottom: 30%; height: 60px; display: flex; justify-content: space-between; }
.tr-bannieres i { display: block; width: 26px; height: 44px; background: #48505c; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); box-shadow: inset 0 3px 0 #e6edf5; animation: vt-flotte 2.4s ease-in-out infinite alternate; }
.tr-bannieres i:nth-child(even) { margin-top: 12px; animation-delay: -1.2s; }
.tr-chevalier.chef { left: calc(50% - 25px); bottom: 4%; transform: scale(1.3); transform-origin: bottom; }
.tr-cor { left: 58%; bottom: 26%; font-size: clamp(1.4rem, 4vw, 2.2rem); animation: tr-cor 1s ease-out 0.5s both; }

/* 5. La Longue Nuit : le Roi des Glaces et son armée */
.tr-roi-glaces { left: calc(50% - 40px); top: 12%; width: 80px; height: 62%; animation: tr-surgit 3s ease-out both; }
.tr-roi-glaces > span { position: absolute; display: block; }
.tr-roi-glaces .couronne { left: 20px; top: 0; width: 40px; height: 18px; background: #bfe9ff; clip-path: polygon(0 100%, 10% 0, 25% 70%, 40% 10%, 50% 70%, 60% 10%, 75% 70%, 90% 0, 100% 100%); filter: drop-shadow(0 0 6px #7fd8ff); }
.tr-roi-glaces .tete { left: 24px; top: 14px; width: 32px; height: 38px; border-radius: 45%; background: linear-gradient(#9fb8cc, #6f879c); }
.tr-roi-glaces .oeil { top: 30px; width: 7px; height: 5px; border-radius: 50%; background: #bff0ff; box-shadow: 0 0 10px 4px #3dbfff; z-index: 1; animation: tr-oeil-roi 1.2s ease-in-out infinite alternate; }
.tr-roi-glaces .oeil.g { left: 31px; }
.tr-roi-glaces .oeil.d { right: 31px; }
.tr-roi-glaces .robe { left: 6px; top: 50px; width: 68px; bottom: 0; background: linear-gradient(180deg, #2a3a4d, #0c1422); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.scene-tr-nuit .tr-armee { bottom: 22%; }
.tr-chevalier.flamme { left: 14%; bottom: 4%; transform: scale(1.3); transform-origin: bottom; }

/* 6. Victoire : éclats de glace, Trône de Ferraille, couronne */
.tr-eclats { left: 50%; top: 40%; width: 10px; height: 10px; background: #bfe9ff; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: -120px -60px 0 #bfe9ff, 140px -40px 0 #e6f7ff, -80px 90px 0 #bfe9ff, 110px 80px 0 #e6f7ff, -180px 20px 0 #bfe9ff, 200px 10px 0 #bfe9ff; opacity: 0; animation: tr-eclats 2.5s ease-out both; }
.tr-trone { left: calc(50% - 90px); bottom: 14%; width: 180px; height: 62%; }
.tr-trone i { position: absolute; left: calc(50% - 3px); bottom: 20%; width: 6px; height: 80%; background: linear-gradient(90deg, #6f7a88, #d8dee6, #6f7a88); transform-origin: 50% 100%; transform: rotate(calc(-48deg + var(--i) * 12deg)); }
.tr-trone .siege { position: absolute; left: 30%; right: 30%; bottom: 0; height: 40%; background: linear-gradient(180deg, #4a4f5a, #22252c); border-radius: 6px 6px 0 0; }
.tr-chevalier.roi { left: calc(50% - 25px); bottom: 10%; transform: scale(1.1); transform-origin: bottom; }
.tr-couronne-or { left: calc(50% - 18px); bottom: calc(10% + 118px); font-size: 32px; filter: drop-shadow(0 0 10px #ffe08a); animation: tr-couronne 2.5s ease-out 2.5s both; }
.tr-titre-roi { left: 0; right: 0; bottom: 3%; text-align: center; color: #5a3a08; font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: clamp(0.85rem, 2.8vw, 1.5rem); letter-spacing: 0.08em; text-shadow: 0 0 10px #fff; animation: tr-apparait 1.5s ease-out 4.5s both; }

/* 7. Défaite : le visage se fige, les yeux deviennent bleus */
.tr-visage { left: calc(50% - 70px); top: 10%; width: 140px; height: 170px; }
.tr-visage > span { position: absolute; display: block; }
.tr-visage .cheveux { left: 6px; top: 0; width: 128px; height: 120px; border-radius: 50% 50% 30% 30%; background: #1a1410; }
.tr-visage .peau { left: 18px; top: 22px; width: 104px; height: 140px; border-radius: 45% 45% 48% 48%; background: #9fb3c4; animation: tr-blemit 4s ease-in both; }
.tr-visage .oeil { top: 72px; width: 22px; height: 12px; border-radius: 50%; background: #c9f2ff; box-shadow: 0 0 16px 6px #3dbfff; z-index: 1; animation: tr-yeux-bleus 3s ease-in 2s both; }
.tr-visage .oeil.g { left: 38px; }
.tr-visage .oeil.d { right: 38px; }
.tr-visage .bouche { left: 52px; top: 122px; width: 36px; height: 6px; border-radius: 3px; background: #3a4a5a; z-index: 1; }
.tr-visage .givre-visage { left: 18px; top: 22px; width: 104px; height: 140px; border-radius: 45% 45% 48% 48%; background: repeating-linear-gradient(60deg, transparent 0 14px, #e6f7ff55 14px 16px); animation: tr-apparait 3s ease-in 1.5s both; }
.tr-givre { inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 40%, #e6f7ffcc 85%); animation: tr-apparait 5s ease-in both; }
.tr-nom-mort { left: 0; right: 0; bottom: 5%; text-align: center; color: #bfe9ff; font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: clamp(0.9rem, 3vw, 1.6rem); letter-spacing: 0.12em; text-shadow: 0 0 12px #3dbfff; animation: tr-apparait 1.5s ease-out 4s both; }

/* --- Animations --- */
@keyframes tr-chute-neige { from { background-position-y: -50%; } to { background-position-y: 50%; } }
@keyframes tr-hurle { from { transform: scaleX(-1) rotate(0); opacity: 0; } to { transform: scaleX(-1) rotate(-20deg); opacity: 1; } }
@keyframes tr-reflet { from { filter: brightness(0.9); } to { filter: brightness(1.1); } }
@keyframes tr-vacille { from { opacity: 0.7; } to { opacity: 1; } }
@keyframes tr-oeil { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes tr-fumee { from { transform: translateY(0); opacity: 0.8; } to { transform: translateY(-14px); opacity: 1; } }
@keyframes tr-vol { from { transform: translateX(-70vw) scaleX(-1); } to { transform: scaleX(-1); } }
@keyframes tr-souffle { from { opacity: 0.7; transform: rotate(35deg) scaleX(0.85); } to { opacity: 1; transform: rotate(35deg) scaleX(1.1); } }
@keyframes tr-marche { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tr-cor { from { transform: rotate(-30deg) scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tr-surgit { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tr-oeil-roi { from { opacity: 0.7; } to { opacity: 1; } }
@keyframes tr-flamme { from { box-shadow: 0 0 12px 4px #ff7a2f99; } to { box-shadow: 0 0 22px 8px #ff7a2fdd; } }
@keyframes tr-eclats { 0% { opacity: 1; transform: scale(0.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes tr-couronne { from { transform: translateY(-120px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tr-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes tr-blemit { from { background: #e0b48a; } to { background: #9fb3c4; } }
@keyframes tr-yeux-bleus { from { background: #2a1a10; box-shadow: none; } to { background: #c9f2ff; box-shadow: 0 0 16px 6px #3dbfff; } }

@media (max-width: 560px) {
  .tr-chevalier { transform: scale(0.7); transform-origin: bottom; }
  .tr-chevalier.chef, .tr-chevalier.flamme { transform: scale(0.85); }
  .tr-chevalier.roi { transform: scale(0.75); }
  .tr-couronne-or { bottom: calc(10% + 84px); font-size: 24px; }
  .tr-trone { transform: scale(0.6); transform-origin: bottom; }
  .tr-roi-glaces { transform: scale(0.7); transform-origin: top; }
  .tr-visage { transform: scale(0.55); transform-origin: top; }
  .tr-lune { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .saga-trones .vt-banniere, .vt-yeux i, .tr-decor *, .cine-scene [class^="tr-"], .cine-scene [class^="tr-"] *, [data-theme="trones"] .hp-avatar { animation: none !important; }
  .tr-eclats { display: none; }
  .vt-yeux i { opacity: 1; }
}