:root{--trip-ink:#123f38;--trip-sea:#63ccb3;--trip-sea-dark:#188a77;--trip-coral:#dc5b3f;--trip-cream:#fff9ef;--trip-yellow:#ffe781}
.trip-game{width:min(1540px,calc(100% - 32px));margin:24px auto 70px;color:var(--trip-ink)}
.trip-intro,.trip-rules,.trip-setup,.trip-play{border:1px solid #bce2d9;border-radius:36px;background:#fff;box-shadow:0 24px 70px rgba(18,63,56,.08)}
.trip-intro{display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;overflow:hidden;background:linear-gradient(135deg,#effbf8,#fff9eb)}.trip-intro>div{padding:clamp(34px,5vw,76px)}.trip-intro h1{font:700 clamp(3rem,5vw,5.8rem)/.94 Georgia,serif;margin:.18em 0}.trip-intro p:not(.eyebrow){font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.55;color:#55736d}.trip-intro>img{width:100%;height:100%;min-height:520px;object-fit:cover}.trip-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.trip-badges span{padding:10px 16px;border-radius:999px;background:#dff7f0;font-weight:800}
.trip-rules{margin-top:26px;padding:30px 38px;display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center}.trip-rules h2{font:700 clamp(1.8rem,3vw,3rem)/1.05 Georgia,serif;margin:4px 0}.trip-rules ol{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0;padding:0;counter-reset:trip}.trip-rules li{list-style:none;padding:18px;border-radius:20px;background:#eef9f6;line-height:1.45;font-weight:700}.trip-rules li::before{counter-increment:trip;content:counter(trip);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;margin-bottom:10px;background:var(--trip-sea);color:#fff}
.trip-setup{margin-top:26px;padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:1fr 1.2fr;gap:25px 44px}.trip-setup-title h2{font:700 clamp(2.2rem,4vw,4rem)/1 Georgia,serif;margin:7px 0}.trip-name{display:grid;gap:8px;align-self:end;font-weight:850}.trip-name input{border:2px solid #b8ded5;border-radius:18px;padding:16px 18px;font:inherit;font-size:1.12rem}.trip-setup fieldset{grid-column:1/-1;border:0;margin:0;padding:0}.trip-setup legend{font-weight:900;margin-bottom:13px}.trip-vehicle-picker>div{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.trip-vehicle-card{border:2px solid #d0e8e2;border-radius:22px;background:#f7fcfa;padding:15px 10px;display:grid;place-items:center;gap:6px;cursor:pointer;color:var(--trip-ink);font-weight:900}.trip-vehicle-card span{font-size:3rem}.trip-vehicle-card.active{border-color:var(--trip-sea-dark);background:#dff7f0;box-shadow:0 0 0 4px rgba(99,204,179,.2)}.trip-sound-picker>div{display:flex;flex-wrap:wrap;gap:11px}.trip-sound-card{border:2px solid #c2e1da;border-radius:999px;background:#fff;padding:12px 22px;font-weight:900;color:var(--trip-ink);cursor:pointer}.trip-sound-card.active{background:var(--trip-sea-dark);border-color:var(--trip-sea-dark);color:#fff}.trip-sound-choice{border:1px solid #9ed3c7;border-radius:999px;background:#effbf8;padding:12px 18px;color:var(--trip-ink);font-weight:800;cursor:pointer;justify-self:start}.trip-sound-choice[aria-pressed="false"]{background:#fff4ee;border-color:#e9baa9}.trip-primary{border:0;border-radius:999px;background:linear-gradient(135deg,#1b907d,#57ceb3);color:#fff;padding:16px 28px;font:800 1rem inherit;box-shadow:0 12px 28px rgba(27,144,125,.22);cursor:pointer;justify-self:start}.trip-primary:hover{transform:translateY(-2px)}
.trip-play{margin-top:26px;overflow:hidden;background:#eaf7f3}.trip-toolbar{display:grid;grid-template-columns:1fr repeat(3,auto) auto;align-items:center;gap:28px;padding:19px 27px;background:#fff}.trip-toolbar>div{display:grid;text-align:center}.trip-player{display:flex!important;align-items:center;gap:12px;text-align:left!important}.trip-player>span{font-size:3rem}.trip-player p{display:grid;margin:0}.trip-toolbar small,.trip-mission small{font-weight:900;letter-spacing:.15em;color:#5b7771}.trip-toolbar strong{font-size:1.35rem}.trip-toolbar>div:nth-child(2) strong{font:700 2.1rem Georgia,serif;color:var(--trip-coral)}.trip-actions{display:flex!important;gap:8px}.trip-actions button,.trip-mission button{border:1px solid #aad6cc;border-radius:999px;background:#fff;padding:10px 14px;font-weight:800;color:var(--trip-ink);cursor:pointer}
.trip-mission{max-width:1020px;margin:20px auto 12px;padding:14px 20px;border-radius:22px;background:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;box-shadow:0 12px 30px rgba(18,63,56,.1)}.trip-mission>span{font-size:2rem}.trip-mission p{font-weight:850;font-size:1.1rem;margin:0}.trip-mission mark{padding:3px 8px;border-radius:8px;background:#fff1a8;color:#7a431d}
.trip-game-area{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;padding:10px 20px 22px}.trip-world{position:relative;min-height:760px;border:9px solid #af7847;border-radius:30px;overflow:hidden;background-position:center;background-size:cover;box-shadow:inset 0 0 0 4px rgba(255,255,255,.7),0 18px 40px rgba(62,43,24,.22)}.trip-world.world-car{background-image:url('assets/voyage-sons-voiture-v1.png')}.trip-world.world-builder{background-image:url('assets/voyage-sons-chantier-v1.png')}.trip-world.world-rocket{background-image:url('assets/voyage-sons-fusee-v1.png')}.trip-world.world-plane{background-image:url('assets/voyage-sons-avion-v1.png')}.trip-world.world-boat{background-image:url('assets/voyage-sons-bateau-v1.png')}.trip-board{position:absolute;inset:24px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:7px}.trip-cell{position:relative;border:2px solid rgba(255,255,255,.92);border-radius:17px;background:rgba(255,255,255,.83);box-shadow:0 6px 14px rgba(15,46,39,.17);display:grid;place-items:center;padding:3px;color:var(--trip-ink);backdrop-filter:blur(4px);overflow:hidden}.trip-cell .trip-picture{font-size:clamp(1.55rem,3vw,2.7rem);line-height:1}.trip-cell strong{font-size:clamp(.62rem,1.1vw,.9rem);text-align:center}.trip-cell.start,.trip-cell.finish{background:rgba(255,239,166,.94);border-color:#fff}.trip-cell.visited{background:rgba(184,245,226,.94);border-color:#51baa1}.trip-cell.wrong{animation:tripWrong .42s ease;background:rgba(255,202,193,.96)}.trip-vehicle-marker{position:absolute;z-index:3;inset:4px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.68);font-size:clamp(2rem,4vw,3.9rem);filter:drop-shadow(0 5px 4px rgba(0,0,0,.2));animation:tripArrive .28s ease}.trip-sparkles{position:absolute;inset:0;pointer-events:none}.trip-sparkles i{position:absolute;width:14px;height:14px;background:#fff184;clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%);animation:tripSpark 1s ease-out forwards}
.trip-controls{align-self:center;padding:22px 18px;border-radius:26px;background:#fff;text-align:center;box-shadow:0 14px 32px rgba(18,63,56,.12)}.trip-controls h2{font:700 2rem Georgia,serif;margin:0}.trip-controls>p{color:#5b7771}.trip-dpad{display:grid;grid-template-columns:repeat(3,62px);grid-template-rows:repeat(3,62px);gap:7px;justify-content:center;margin:18px auto}.trip-dpad button{border:0;border-radius:18px;background:linear-gradient(145deg,#78d8c2,#188a77);box-shadow:0 7px 0 #116858;color:#fff;font-size:2rem;font-weight:900;cursor:pointer}.trip-dpad button:active{transform:translateY(5px);box-shadow:0 2px 0 #116858}.trip-dpad [data-direction=up]{grid-column:2}.trip-dpad [data-direction=left]{grid-row:2;grid-column:1}.trip-dpad span{grid-row:2;grid-column:2;display:grid;place-items:center;color:#cfebe5}.trip-dpad [data-direction=right]{grid-row:2;grid-column:3}.trip-dpad [data-direction=down]{grid-row:3;grid-column:2}.trip-status{min-height:60px;font-weight:800;color:var(--trip-ink)!important}
.trip-end{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(8,42,36,.75);backdrop-filter:blur(10px);padding:20px}.trip-end[hidden]{display:none}.trip-end canvas{position:absolute;inset:0;width:100%;height:100%}.trip-end-card{position:relative;z-index:2;width:min(560px,100%);padding:42px;text-align:center;border-radius:34px;background:#fffaf0;box-shadow:0 30px 100px rgba(0,0,0,.35)}.trip-end-card>span{display:block;font-size:7rem;animation:tripFloat 1.4s ease-in-out infinite}.trip-end h2{font:700 clamp(2.4rem,6vw,4.6rem)/1 Georgia,serif;margin:9px}.trip-end p:not(.eyebrow){font-size:1.2rem;line-height:1.5}
@keyframes tripWrong{25%,75%{transform:translateX(-7px)}50%{transform:translateX(7px)}}@keyframes tripArrive{from{transform:scale(.55);opacity:.4}}@keyframes tripSpark{to{transform:translate(var(--x),var(--y)) rotate(260deg) scale(0);opacity:0}}@keyframes tripFloat{50%{transform:translateY(-10px) rotate(3deg)}}
@media(max-width:980px){.trip-intro{grid-template-columns:1fr}.trip-intro>img{min-height:340px}.trip-rules{grid-template-columns:1fr}.trip-rules ol{grid-template-columns:1fr}.trip-toolbar{grid-template-columns:1fr 1fr}.trip-actions{justify-content:flex-end}.trip-game-area{grid-template-columns:1fr}.trip-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.trip-dpad{margin:0}.trip-world{min-height:720px}}
@media(max-width:650px){.trip-game{width:min(100% - 16px,1540px)}.trip-intro,.trip-rules,.trip-setup,.trip-play{border-radius:25px}.trip-intro>div{padding:28px 22px}.trip-intro>img{min-height:240px}.trip-rules,.trip-setup{padding:24px 18px}.trip-setup{grid-template-columns:1fr}.trip-vehicle-picker>div{display:flex;overflow-x:auto;padding:4px}.trip-vehicle-card{min-width:120px}.trip-toolbar{padding:13px;gap:11px}.trip-player>span{font-size:2.4rem}.trip-actions{grid-column:1/-1}.trip-actions button{flex:1}.trip-mission{margin:12px 10px 7px;grid-template-columns:auto 1fr}.trip-mission button{grid-column:1/-1}.trip-game-area{padding:7px}.trip-world{min-height:auto;aspect-ratio:1/1.45;border-width:6px}.trip-board{inset:9px;gap:3px}.trip-cell{border-radius:9px;border-width:1px}.trip-cell .trip-picture{font-size:1.45rem}.trip-cell strong{font-size:.55rem}.trip-controls{grid-template-columns:1fr;padding:15px}.trip-dpad{grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px);margin:10px auto}.trip-status{min-height:auto}.trip-end-card{padding:30px 20px}}
@media(prefers-reduced-motion:reduce){.trip-vehicle-marker,.trip-end-card>span{animation:none}}