/* ==========================================================================
   Deux Rives : composants propres au jeu (carnet, fiches, portrait, voyage)
   Se pose par-dessus style.css (repris de CY Hub).
   ========================================================================== */
:root { --sahara: #e8a64a; --sahara2: #b8651f; --france: #4d7fd8; --france2: #243f8a; --mix: #b46be0; }
#game { width: 100%; height: 100%; }
@keyframes bobt { to { transform: translateY(-6px); } }
.title { background: linear-gradient(#241a5e 0%, #5a3ea8 38%, #e0709a 68%, #ffb870 100%); }
.title .logo { font-size: clamp(40px, 11vw, 84px); }
.title .logo .cy { color: #7ee8ff; letter-spacing: .22em; font-size: .4em; }
.title canvas { height: auto; max-height: 40%; object-fit: contain; object-position: bottom; }
.title .hint { position: relative; z-index: 2; margin-top: 14px; padding: 0 16px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .88); text-shadow: 0 2px 0 #1d1633; }
.title .menu .field { margin: 0; }
.title .menu .field input { text-align: center; }
.title .menu .field label { color: #fff; text-shadow: 0 2px 0 #1d1633; text-align: center; }
#pill-zone { max-width: 52vw; overflow: hidden; }
#pill-zone #zone-t { overflow: hidden; text-overflow: ellipsis; font-size: 13px; }

/* ----- carnet ----- */
.c-intro { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 3px solid #1d1633; font-size: 13.5px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.c-intro b { color: var(--ink); }
.seg { display: flex; gap: 4px; height: 16px; margin: 4px 0 6px; }
.seg i { display: block; height: 100%; border-radius: 6px; border: 2px solid #1d1633; min-width: 6px; transition: flex .4s; }
.seg .s { background: var(--sahara); } .seg .f { background: var(--france); } .seg .m { background: var(--mix); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 10px; }
.legend span::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 4px; border: 2px solid #1d1633; margin-right: 5px; vertical-align: -1px; background: var(--c); }
.fiche { position: relative; padding: 10px 12px 10px 18px; margin-bottom: 10px; border-radius: 14px; background: linear-gradient(#332b74, #262058); border: 3px solid #1d1633; box-shadow: 0 4px 0 rgba(0, 0, 0, .32); overflow: hidden; }
.fiche::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--c); }
.fiche h4 { margin: 0 0 2px; font-size: 15px; font-weight: 900; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fiche p { margin: 4px 0 6px; font-size: 13.5px; font-weight: 600; line-height: 1.42; color: #e7e0ff; }
.fiche .tags { display: flex; flex-wrap: wrap; gap: 5px; }
.fiche.locked { opacity: .5; }
.fiche.locked::before { background: #3a3358; }
.fiche.locked h4 { color: var(--muted); }
.fiche.new { animation: glow 1.4s ease-out 1; }
@keyframes glow { 0% { box-shadow: 0 0 0 5px var(--gold); } 100% { box-shadow: 0 4px 0 rgba(0, 0, 0, .32); } }
.chip.s { --c: var(--sahara2); } .chip.f { --c: var(--france2); } .chip.m { --c: #7a3fb0; }
.chip.t { --c: #4a3f8a; font-weight: 700; }
.nvp-h { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 2px; font-weight: 900; font-size: 17px; }
.nvp-h small { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.nvp-def { font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 0 0 8px; line-height: 1.4; }

/* iceberg */
.iceberg { border-radius: 16px; overflow: hidden; border: 4px solid #1d1633; box-shadow: 0 5px 0 rgba(0, 0, 0, .4); }
.iceberg .sky { padding: 12px 12px 24px; background: linear-gradient(#7fcfff, #cdeeff); color: #153a5a; position: relative; }
.iceberg .sea { padding: 18px 12px 14px; background: linear-gradient(#2a78c0, #123a78 70%, #0c2354); position: relative; color: #fff; }
.iceberg .sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: repeating-linear-gradient(90deg, #2a78c0 0 16px, #4a9ae0 16px 24px); }
.iceberg h5 { margin: 0 0 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 900; opacity: .85; }
.iceberg .pills { display: flex; flex-wrap: wrap; gap: 6px; }
.iceberg .pills span { padding: 3px 10px; border-radius: 999px; border: 2px solid #1d1633; font-size: 12.5px; font-weight: 800; background: var(--c); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.iceberg .pills .s { --c: var(--sahara2); } .iceberg .pills .f { --c: var(--france2); } .iceberg .pills .m { --c: #7a3fb0; }
.iceberg .none { font-weight: 700; font-size: 13px; opacity: .7; }

/* agents de socialisation */
.agent { padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: #261f58; border: 3px solid #1d1633; }
.agent b { font-size: 15px; font-weight: 900; }
.agent .ph { float: right; font-size: 11px; font-weight: 900; padding: 2px 9px; border-radius: 999px; border: 2px solid #1d1633; background: #4a3f8a; }
.agent .ph.p1 { background: #2a7a4a; } .agent .ph.p2 { background: #a0661f; } .agent .ph.p3 { background: #7a3fb0; }
.agent ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; font-weight: 600; color: #e0d8ff; }
.agent .nope { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 4px; }

/* portrait final */
.portrait { max-width: 560px; margin: 0 auto; }
.pt-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px 14px; border-radius: 20px; background: radial-gradient(ellipse at 50% 100%, rgba(255, 210, 74, .3), transparent 65%), linear-gradient(#352c78, #231b52); border: 4px solid #1d1633; box-shadow: 0 5px 0 rgba(0, 0, 0, .4); text-align: center; }
.pt-hero canvas { width: 96px; height: 144px; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); animation: bobt 1s ease-in-out infinite alternate; }
.pt-hero h2 { margin: 0; font-size: 24px; font-weight: 900; color: var(--gold); text-shadow: 0 3px 0 #1d1633; }
.pt-hero p { margin: 0; font-weight: 700; color: var(--muted); font-size: 14px; }
.pt-card { margin-top: 12px; }
.pt-card h3 { margin: 0 0 8px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-weight: 900; }
.pt-card p { margin: 6px 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: #e7e0ff; }
.bennett { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 14px 0 8px; }
.bennett i { font-style: normal; text-align: center; font-size: 10px; font-weight: 900; padding: 7px 1px 6px; border-radius: 8px; border: 2px solid #1d1633; background: #3a3358; color: var(--muted); line-height: 1.15; }
.bennett i.eth { background: #6a3a4a; } .bennett i.rel { background: #2a5a6a; }
.bennett i.on { background: var(--gold); color: #4a2e00; transform: translateY(-4px); box-shadow: 0 4px 0 rgba(0, 0, 0, .4); }
.timeline { position: relative; margin: 6px 0 0 8px; padding: 0 0 0 20px; border-left: 4px solid #4a3f8a; }
.timeline li { list-style: none; position: relative; margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: #e7e0ff; line-height: 1.4; }
.timeline li::before { content: ""; position: absolute; left: -31px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 3px solid #1d1633; }
.timeline li b { display: block; color: var(--gold); font-size: 13px; }

/* voyage */
.travel { position: absolute; inset: 0; z-index: 35; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; background: linear-gradient(#14102a, #2a1f6a); color: #fff; padding: 20px; }
.travel .route { font-size: clamp(22px, 6vw, 34px); font-weight: 900; color: var(--gold); text-shadow: 0 3px 0 #1d1633; }
.travel .sub { font-size: 14px; font-weight: 700; color: var(--muted); max-width: 420px; }
.travel .plane { font-size: 44px; animation: fly 1.6s ease-in-out infinite alternate; }
@keyframes fly { from { transform: translate(-40px, 8px) rotate(-6deg); } to { transform: translate(40px, -8px) rotate(-6deg); } }

/* mini-jeu du thé */
.tea { width: min(420px, 100%); }
.tea .glass-row { display: flex; justify-content: center; gap: 12px; margin: 10px 0; }
.tea .glass { width: 46px; height: 58px; border-radius: 4px 4px 14px 14px; border: 3px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.tea .glass i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#e0a43a, #8a4a12); }
.tea .glass.done { border-color: var(--gold); }
.tea .meter { position: relative; height: 28px; margin: 12px 0 6px; border-radius: 14px; background: #14102a; border: 3px solid #1d1633; overflow: hidden; }
.tea .zone { position: absolute; top: 0; bottom: 0; background: rgba(75, 224, 138, .5); border-left: 3px solid var(--green); border-right: 3px solid var(--green); }
.tea .needle { position: absolute; top: 0; bottom: 0; width: 6px; margin-left: -3px; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.tea .say { min-height: 40px; font-weight: 800; font-size: 14.5px; color: #fff; }

/* ----- objectif du parcours ----- */
#goalbar { position: absolute; left: 0; right: 0; top: calc(56px + var(--safe-t)); display: flex; justify-content: center; z-index: 6; pointer-events: none; padding: 0 8px; }
#goalbar .pill.obj { pointer-events: auto; max-width: min(460px, 94vw); background: rgba(33, 26, 74, .92); border-color: #ffd24a; }
#goalbar .pill.obj .pi { color: var(--gold); }
#goalbar.hide { display: none; }
#banner { top: calc(112px + var(--safe-t)); }

/* ----- mini-carte ----- */
#minimap { position: absolute; left: 8px; top: calc(100px + var(--safe-t)); z-index: 6; padding: 0; border: 3px solid #1d1633; border-radius: 12px; background: #14102a; box-shadow: 0 3px 0 rgba(0, 0, 0, .4); overflow: hidden; opacity: .94; line-height: 0; }
#minimap canvas { width: 100%; height: auto; display: block; }
#minimap:active { transform: translateY(2px); }
/* ----- itinéraire ----- */
ol.route { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ol.route li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #261f58; border: 3px solid #1d1633; font-size: 13.5px; font-weight: 700; color: var(--muted); }
ol.route li i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 900; background: #3a3358; border: 2px solid #1d1633; color: #fff; }
ol.route li.done { opacity: .65; text-decoration: line-through; }
ol.route li.done i { background: var(--green); color: #022a18; }
ol.route li.cur { background: linear-gradient(#4a3f9a, #352c78); border-color: #ffd24a; color: #fff; }
ol.route li.cur i { background: var(--gold); color: #4a2e00; }

/* ----- petits écrans ----- */
/* le badge du nom dépasse en haut : pas d'overflow sur #dialog, seules les réponses défilent si l'écran est trop petit */
.dlg-choices { max-height: calc(100vh - 210px); overflow-y: auto; }
#minimap { top: calc(112px + var(--safe-t)); }
@media (max-height: 700px) {
  .dlg-text { font-size: 16px; min-height: 0; }
  .dlg-choices button { font-size: 14px; padding: 8px 12px; }
  #dialog { padding: 14px 16px 12px; min-height: 0; }
}
@media (max-height: 460px) {
  .dlg-text { font-size: 14.5px; }
  .dlg-choices { gap: 5px; margin-top: 6px; }
  .dlg-choices button { font-size: 13px; padding: 6px 10px; }
  #dialog { width: min(720px, calc(100% - 20px)); padding: 10px 14px 8px; }
  .pill.obj { font-size: 11.5px; }
}