/* Présentation du voyage : laisser respirer le décor et les illustrations. */
:root{--ink:#10242b;--gold:#cbb88a;--glass:rgba(11,27,32,.83)}
#hud{padding:25px 32px;background:linear-gradient(180deg,#081b26b8,transparent);height:135px}
#hud h1{font-size:36px;letter-spacing:-.8px;text-shadow:0 2px 20px #0008;color:#fff4dc}
#hud small{font-size:10px;letter-spacing:4px;color:#dbc997}
#hud nav{position:fixed;left:50%;bottom:27px;transform:translateX(-50%);padding:7px;gap:3px;flex-wrap:nowrap;border:1px solid #ddcba33d;border-radius:18px;background:var(--glass);box-shadow:0 12px 40px #0005;backdrop-filter:blur(18px)}
#hud nav button{background:transparent;border:0;border-radius:11px;padding:12px 19px;font-size:12px;letter-spacing:.5px;color:#f0e9db}
#hud nav button:hover{background:#bfa86b2b;color:#ffdfa1}
#objective{top:142px;left:32px;width:255px;padding:16px 19px;border:0;border-left:2px solid #c8af76;border-radius:0 14px 14px 0;background:linear-gradient(100deg,#102b32e8,#102b3299);backdrop-filter:blur(12px);box-shadow:0 8px 30px #00131b26}
#objective small{font-size:9px;letter-spacing:2.5px}#objective strong{font-size:21px;color:#fff1d4}#objective p{font-size:11px;line-height:1.65;color:#d6ddd9}#objective .collars{display:block;margin-top:12px}
#radar{right:28px;bottom:28px;border:1px solid #e2cdaa70;border-radius:20px;box-shadow:0 10px 35px #0005;opacity:.92}
#controls{background:transparent;padding:5px;font-size:9px;letter-spacing:.4px;color:#eee3c9;text-shadow:0 1px 4px #000}
#interact{bottom:102px;background:#102831ed;border-color:#cfba82;border-radius:30px;padding:13px 26px;box-shadow:0 8px 35px #0006;font-size:13px}
#toast{top:38px;border:1px solid #d3bd8640;background:#102831ed;border-radius:30px;font-size:13px;box-shadow:0 8px 30px #0005}
#panel{background:linear-gradient(145deg,#17333c,#0b1b23);border:1px solid #c9b28273;border-radius:24px;box-shadow:0 30px 100px #000a;padding:28px;color:#f4ead4}
#panel::backdrop,#dialogue::backdrop{background:#06141b91;backdrop-filter:blur(7px)}
#panel h2{font:32px Georgia,serif;color:#f6e4bd}#panel .card{background:linear-gradient(150deg,#ffffff0a,#ffffff02);border:1px solid #d9c18f24;border-radius:17px;box-shadow:0 5px 20px #0002}
#panel button{background:#203e46;border-color:#b9a77970;border-radius:11px}#panel button:hover{background:#32525a}
#panel .card img{filter:drop-shadow(0 8px 10px #0005)}
#panel>header{background:#132c35f5;border-bottom:1px solid #ccb88728;margin-bottom:18px;backdrop-filter:blur(16px)}
#panel:has(.hero-card){width:min(1540px,96vw);padding:28px;background:radial-gradient(ellipse at 50% 100%,#31514b80,transparent 65%),linear-gradient(135deg,#19353e,#0c1b27)}
#panel:has(.hero-card) .grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
#panel .hero-card{padding:15px 10px;transition:transform .2s,border-color .2s,background .2s}
#panel .hero-card:hover,#panel .hero-card:focus-within{transform:translateY(-4px);border-color:#dbc18b;background:linear-gradient(#30515666,#1d303b)}
#panel .hero-card img{height:clamp(180px,29vh,330px);width:100%;object-fit:contain}
#panel .hero-card h3{font-size:clamp(17px,1.5vw,24px);min-height:2.5em;text-align:center}
#panel .hero-card button{font-size:12px;padding:12px 8px}
@media(max-width:1100px){#panel:has(.hero-card) .grid{grid-template-columns:repeat(3,minmax(0,1fr))}#panel .hero-card img{height:180px}}
@media(max-width:550px){#panel:has(.hero-card) .grid{grid-template-columns:repeat(2,minmax(0,1fr))}#panel:has(.hero-card){padding:16px}#panel .hero-card img{height:150px}}
#dialogue{background:linear-gradient(130deg,#152f39f5,#091b24f8);border:1px solid #d9bb7966;border-radius:22px;box-shadow:0 20px 70px #0009}
.cx-combat-console{background:linear-gradient(110deg,#0c202bea,#142a33f5)!important;border-color:#ceb57f70!important;backdrop-filter:blur(18px);box-shadow:0 15px 50px #0006!important}
.cx-status{background:linear-gradient(120deg,#112c35ed,#0c1c28cf)!important;border-color:#e1c99070!important;backdrop-filter:blur(14px)}
.cx-combat-actions button{border-radius:12px!important;background:#173a43ed!important;border-color:#beac7859!important}.cx-combat-actions button:hover{background:#28545dee!important}
@media(max-width:1000px){#hud nav button{padding:11px 13px}#objective{width:220px;left:20px}#radar{width:160px;height:142px;right:15px}#hud{padding:20px}#hud h1{font-size:29px}}
@media(max-width:700px){#hud nav{bottom:10px;max-width:96vw;overflow-x:auto;border-radius:13px}#hud nav button{padding:10px;font-size:10px}#hud h1{font-size:25px}#objective{top:112px;width:180px;left:12px;padding:10px}#objective p{font-size:10px}#radar{bottom:70px;width:120px;height:106px}#controls{display:none}#interact{bottom:65px;right:145px;max-width:180px}#toast{top:85px;max-width:85vw}#touch{bottom:70px}#panel{padding:17px}}