/* [îles] Les Terres lointaines : styles des écrans d'île (carte, fiche, en partie, fin, énigme).
   v1.57 [carte] : comme la maquette (docs/terres-lointaines/scenes/) : les dessins sont en pixels d'art dans des canvas agrandis sans
   lissage (js/iles-carte.js) ; les textes courts sont des images en police pixel (.tl-px) ; les cadres sont ceux de la maquette
   (papier #F1E3C2 bordé d'encre, bois #845A36). Les boutons posés sur les dessins sont transparents (îles, tuiles de l'énigme). */
.tl-screen { background: #2F74C0; color: var(--cream, #F8EED6); font-family: var(--font); }
.tl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
.tl-px { image-rendering: pixelated; image-rendering: crisp-edges; display: inline-block; vertical-align: top; max-width: none; }
.tl-star { width: 15px; height: 15px; fill: #6E5A44; opacity: .55; flex: 0 0 auto; }
.tl-star.on { fill: #E8B640; opacity: 1; filter: drop-shadow(0 1px 0 #6A4210); }
/* cadre de la maquette (k.panel) : papier, bord d'encre, reflet en haut, ombre en bas */
.tl-carton, .tl-pop, .tl-annonce {
  background: #F1E3C2; color: #2B1D14;
  box-shadow: 0 -2px 0 #2B1D14, 0 2px 0 #2B1D14, -2px 0 0 #2B1D14, 2px 0 0 #2B1D14, inset 0 2px 0 #F8EED6, inset 0 -2px 0 #D9C49A, 3px 6px 0 2px rgba(20,10,4,.35);
}

/* ---------- la carte de la mer (canvas collé en haut d'une vue qui défile ; boutons transparents sur les îles) ---------- */
#tl-mer { background: #2F74C0; }
.tl-mer-col { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; } /* sur ordinateur : une colonne comme un téléphone */
.tl-vue { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
.tl-vue::-webkit-scrollbar { display: none; }
.tl-monde { position: relative; }
#tl-mer-cv { position: sticky; top: 0; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
#tl-iles { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; }
.tl-ile { position: absolute; padding: 0; border: 0; margin: 0; background: transparent; border-radius: 40%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tl-ile:focus-visible { outline: 2px dashed #F6DC86; outline-offset: -2px; }
.tl-retour { position: absolute; z-index: 3; left: 8px; top: 6px; width: 28px; height: 28px; border: 0; padding: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tl-retour:focus-visible { outline: 2px solid #F6DC86; }

/* ---------- la fiche d'une île : la scène d'arrivée derrière, le carton de la règle devant (maquette ile-regle.js) ---------- */
.tl-fiche { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 12px; overflow: hidden; background: #0A0610; }
.tl-arr-cv { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.tl-carton { position: relative; z-index: 1; width: min(100%, 400px); max-height: calc(100% - 8px); overflow-y: auto; padding: 12px 14px 14px; text-align: center; animation: tlMonte .35s steps(5) both; scrollbar-width: thin; }
@keyframes tlMonte { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.tl-c-sur { margin: 2px 0 4px; line-height: 0; }
.tl-c-titre { margin: 4px 0 4px; line-height: 0; font-weight: 400; }
.tl-c-titre .tl-px, .tl-regle .tl-px, .tl-c-sur .tl-px, .tl-sous .tl-px { margin: 2px auto; }
.tl-c-ico { display: block; margin: 4px auto 6px; image-rendering: pixelated; image-rendering: crisp-edges; box-shadow: 0 0 0 2px #2B1D14, 0 0 0 4px #D9C49A; }
.tl-regle { margin: 8px 0 4px; line-height: 0; }
.tl-astuce { font-size: 16px; line-height: 1.2; color: #6E5A44; margin: 6px 4px; }
.tl-c-sep { height: 2px; background: #D9C49A; margin: 8px 10px; }
.tl-obj { list-style: none; margin: 4px 0; padding: 0 2px; display: grid; gap: 7px; text-align: left; }
.tl-obj li { display: flex; align-items: flex-start; gap: 8px; line-height: 0; }
.tl-obj li .tl-et { flex: none; margin-top: 0; }
.tl-obj li span { line-height: 0; min-width: 0; }
.tl-obj li em { margin-left: auto; font: 14px/1 var(--font); color: #8A5A10; font-style: normal; white-space: nowrap; align-self: center; padding-left: 6px; }
.tl-obj li.neuve .tl-et { animation: tlPop .6s steps(4) var(--d, 0s) both; }
@keyframes tlPop { 0% { transform: scale(.2); } 60% { transform: scale(1.6); } 100% { transform: scale(1); } }
.tl-garde { margin: 8px 0 2px; line-height: 0; }
.tl-aide { font-size: 14px; line-height: 1.2; margin: 6px 4px; color: #3E2716; opacity: .85; } /* v1.56 : règle des indices de l'île */
.tl-maitrise { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; margin: 6px 0 2px; cursor: pointer; position: relative; }
.tl-maitrise input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tl-maitrise i { flex: none; width: 20px; height: 20px; background: #F8EED6; box-shadow: 0 0 0 2px #2B1D14, inset 0 -2px 0 #D9C49A; position: relative; }
.tl-maitrise input:checked + i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; background: #C8322E; box-shadow: inset 0 2px 0 #E2604F; }
.tl-maitrise input:focus-visible + i { outline: 2px solid #2A4FBF; outline-offset: 3px; }
.tl-verrou { font-size: 16px; color: #5E1515; margin: 8px 0 2px; }
.tl-f-act { display: flex; gap: 10px; margin-top: 12px; } .tl-f-act > * { flex: 1; min-height: 46px; }
/* le bouton vert de la maquette (« JOUER ») */
.tl-jouer { min-height: 46px; border: 0; margin: 0; cursor: pointer; background: #7CC25A; color: #1E3A14; display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px 9px;
  box-shadow: 0 0 0 2px #2B1D14, inset 0 2px 0 #A8DC7C, inset 0 -4px 0 #2E6A22, 0 4px 0 1px rgba(20,10,4,.4); font: 20px var(--font); }
.tl-jouer:active { transform: translateY(2px); box-shadow: 0 0 0 2px #2B1D14, inset 0 2px 0 #A8DC7C, inset 0 -2px 0 #2E6A22; }
.tl-jouer[disabled] { filter: grayscale(.85) brightness(.85); cursor: default; transform: none; }
.tl-jouer:focus-visible, .tl-badge:focus-visible, .tl-boss:focus-visible { outline: 2px solid #F6DC86; outline-offset: 3px; }

/* ---------- en partie : la règle en badge et la barre du boss, en haut à gauche (maquette ile-regle.js, leviathan.js) ---------- */
#battle.tl-ile-on .hud .foe { display: none; }
.tl-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; pointer-events: auto; }
.tl-badge { border: 0; margin: 0; cursor: pointer; padding: 4px 7px 3px; line-height: 0; background: #F6DC86;
  box-shadow: 0 0 0 2px #2B1D14, inset 0 2px 0 #FFF4C0, inset 0 -2px 0 #E8B640, 0 3px 0 1px rgba(20,10,4,.45); }
.tl-boss { border: 0; margin: 0; cursor: pointer; width: min(60vw, 240px); padding: 2px 6px 5px; background: #845A36; color: #F6DC86;
  box-shadow: 0 0 0 2px #2B1D14, inset 0 2px 0 #A0744A, inset 0 -2px 0 #5A3A22, 0 3px 0 1px rgba(20,10,4,.45);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 6px; align-items: center; }
.tl-boss-n { grid-column: 1 / 3; line-height: 0; text-align: center; margin: -3px 0 -4px; }
.tl-boss-bar { grid-column: 1; position: relative; height: 10px; background: #3A0C0C; box-shadow: 0 0 0 2px #1A0E0A; overflow: hidden; }
.tl-boss-bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.tl-boss-g { background: #F8EED6; }
.tl-boss-f { background: #7A52B0; box-shadow: inset 0 2px 0 #B892FF, inset 0 -2px 0 rgba(0,0,0,.3); }
.tl-boss-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), #1A0E0A calc(10% - 2px) 10%); }
.tl-boss-p { grid-column: 2; font: 14px/1 var(--font); color: #F6DC86; text-shadow: 0 1px 0 #2B1D14; min-width: 50px; text-align: right; }
.tl-boss.dehors .tl-boss-f { background: #9A6AD0; }
.tl-boss.ombre { animation: tlBlink .4s steps(2) infinite; }
@keyframes tlBlink { 50% { background: #5E1515; } }
.tl-hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.tl-pop { position: absolute; left: 6px; top: 58px; width: min(310px, calc(100% - 12px)); pointer-events: auto; padding: 10px 12px 12px; text-align: left; animation: tlIn .2s steps(3) both; }
.tl-pop-n { line-height: 0; margin-bottom: 6px; }
.tl-pop-r { font-size: 17px; line-height: 1.2; margin: 4px 0; }
.tl-pop-g { font-size: 15px; color: #6E5A44; margin: 4px 0 8px; }
.tl-pop-act { display: flex; gap: 8px; } .tl-pop-act > * { flex: 1; min-height: 40px; }
.tl-quit { border: 0; cursor: pointer; font: 17px var(--font); background: #E2604F; color: #fff; padding: 4px 8px; box-shadow: 0 0 0 2px #5E1515, inset 0 2px 0 #F4A898, inset 0 -3px 0 #C8322E; }
.tl-annonce { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-size: 22px; padding: 5px 14px 7px; white-space: nowrap; }
.tl-annonce.go { animation: tlIn .25s steps(3) both; }
@keyframes tlIn { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.tl-pop.tl-pop { animation-name: tlPopIn; } @keyframes tlPopIn { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- fin d'une île : même scène d'arrivée, le carton du bilan ---------- */
#tl-fin { background: #0A0610; align-items: center; justify-content: center; overflow: hidden; }
.tl-fin-col { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: min(100%, 400px); max-height: 100%; overflow-y: auto; padding: 12px; }
.tl-c-fin { width: 100%; max-height: none; }
.tl-sous { margin: 4px 0; line-height: 0; }
.tl-cr { margin: 6px 0 0; line-height: 0; }
.tl-nb { font-size: 17px; color: #8A5A10; margin: 8px 0 0; }
#tl-fin .end-actions { width: 100%; display: grid; gap: 8px; } #tl-fin .row2 { display: flex; gap: 8px; } #tl-fin .row2 .btn { flex: 1; min-height: 46px; }
.tl-jouer.big { min-height: 58px; width: 100%; }

/* ---------- l'énigme, jouée dans l'arène (maquette enigme.js) : canvas + boutons transparents sur les tuiles ---------- */
#tl-enigme { background: #24150C; }
.tl-e-scene { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; width: 100%; max-width: 480px; margin: 0 auto; }
#tl-e-cv { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.tl-e-rack, .tl-e-word { position: absolute; inset: 0; pointer-events: none; }
.tl-e-t { position: absolute; pointer-events: auto; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; font-size: 1px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tl-e-t[disabled] { cursor: default; }
.tl-e-t:focus-visible { outline: 2px solid #F6DC86; outline-offset: -1px; }
.tl-e-sans { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font: 14px/1 var(--font); color: #C0A880; pointer-events: none; } /* v1.56 : pas d'indice au Phare */
.tl-e-act { flex: none; box-sizing: border-box; height: calc(66px + env(safe-area-inset-bottom)); display: flex; gap: 8px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); background: #24150C; box-shadow: inset 0 2px 0 #3E2716; }
.tl-e-act > * { flex: 1; min-height: 46px; padding: 0 6px; }
@media (min-width: 520px) { .tl-e-act { padding-left: calc(50% - 230px); padding-right: calc(50% - 230px); } }
.tl-e-act .tl-jouer { flex: 1.25; }
.tl-e-act .tl-e-carte { flex: 0 0 52px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- v1.55 : fiche (exemples), fin (plumes), accueil (bouton de la mer) ---------- */
.tl-home { margin-top: 2px; } .tl-home .btn { width: 100%; --pxbg: #4F8FC0; --pxhl: #9DC8EA; --pxsh: #2B6A99; color: #F8EED6; }
.tl-ex { margin: 2px 0 8px; } .tl-ex small { font-size: 14px; color: var(--ink-muted, #6E5A44); }
.tl-ex-l { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 3px; }
.tl-ex-l .chip { font-size: 13px; padding: 1px 5px; --pxbg: #CFE6F2; background: #CFE6F2; color: #16255E; }
.tl-plumes { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; font-size: 18px; }
.tl-plumes b { font-size: 26px; font-weight: 400; color: #9A6A10; } .tl-plumes .mon-ico { width: 22px; height: 22px; }
.tl-plumes.tl-res { margin-top: 2px; } .tl-res-ico { width: 22px; height: auto; image-rendering: pixelated; } /* v1.57 : la ressource gagnée (coquillages, crocs…) sous les plumes */
.tl-ico { width: 1.1em; height: 1.1em; vertical-align: -.15em; flex: none; }
.tl-home .tl-home-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
html.px .tl-home .btn.primary.tl-home-btn, .tl-home .btn.primary.tl-home-btn { --pxbg: #2A4FBF; --pxhl: #4F78E0; --pxsh: #16255E; color: #F8EED6; }
.tl-home .tl-home-btn .tl-ico { width: 24px; height: 24px; }
.tl-home .tl-home-btn small { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; } .tl-home .tl-home-btn .tl-star { width: 13px; height: 13px; }
.ferme .fe-mer { position: absolute; right: 12px; top: calc(58px + env(safe-area-inset-top)); --pxbg: #2A4FBF; --pxhl: #4F78E0; --pxsh: #16255E; } .ferme .fe-mer svg { width: 24px; height: 24px; }

/* ---------- v1.55 : la porte dans la boutique ---------- */
.tl-tout-card { justify-items: center; text-align: center; padding: 22px 12px 18px !important; }
.tl-tout { margin: 0; font: 400 34px/1.05 var(--font); color: var(--inkc, #2B1D14); position: relative; display: inline-block; }
.tl-tout .tl-pt { display: inline-block; position: relative; }
.tl-tout .tl-q, .tl-tout .tl-q0 { display: none; color: #1F1A2E; font-size: 1.2em; line-height: .8; }
.tl-tout.goutte .tl-pt { animation: tlTrem .12s steps(2) 4; }
.tl-tout.goutte .tl-pt::before { content: ""; position: absolute; left: 30%; top: -60px; width: 5px; height: 8px; background: #1F1A2E; animation: tlGoutte .3s cubic-bezier(.5,0,1,1) forwards; }
.tl-tout.encre .tl-pt { display: none; }
.tl-tout.encre .tl-q, .tl-tout.encre .tl-q0 { display: inline-block; animation: tlEncre .9s steps(9) both; text-shadow: 0 0 1px #1F1A2E, 1px 1px 0 rgba(31,26,46,.35); }
.tl-tout.encre .tl-q::after { content: ""; position: absolute; width: 3px; height: 0; background: #1F1A2E; margin: 30px 0 0 -11px; animation: tlCoule 1.6s steps(6) .9s forwards; }
.tl-tout-carte { font-size: 46px; margin: 4px auto 0; }
@keyframes tlGoutte { 0% { transform: translateY(0); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(58px); opacity: 0; } }
@keyframes tlEncre { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tlCoule { to { height: 7px; } }
@keyframes tlTrem { 50% { transform: translateX(1px); } }
.tl-tremble { animation: tlTrem .08s steps(2) 10; }
.tl-ponton-btn { margin-top: 12px; min-width: 180px; }
.tl-carte-card { position: relative; --pxbg: #EBD9AE; }
.tl-carte-card .tl-neuf { display: block; font: 400 11px var(--font-s, monospace); color: #C8322E; text-transform: uppercase; margin-bottom: -4px; }
.tl-carte-l { display: flex; gap: 10px; align-items: center; }
.tl-carte-l b { font: 400 22px/1 var(--font); }
.tl-carte-cv { width: 120px; height: 64px; image-rendering: pixelated; flex: none; box-shadow: 0 0 0 2px #24150C; }
.tl-carte-card .mon-buy { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; border: 0; background: #E8B640; color: #2B1D14; font: 400 21px var(--font); cursor: pointer; box-shadow: 0 0 0 2px var(--wood-0, #24150C), inset 0 2px 0 0 #F6DC86, inset 0 -3px 0 0 #B8862A; }
.tl-carte-card .mon-buy[disabled] { background: var(--paper-2, #D9C49A); color: var(--ink-muted, #6E5A44); box-shadow: 0 0 0 2px var(--paper-edge, #A88650); cursor: default; }
.tl-voile { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0); transition: background 0.9s steps(6); }
.tl-voile.noir { background: rgba(0,0,0,1); }
.tl-passer { position: fixed; z-index: 92; right: calc(12px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); opacity: .9; }

/* ---------- v1.55 : la scène du bateau, plein écran ---------- */
.tl-scene { position: fixed; inset: 0; z-index: 90; background: #000; display: grid; place-items: center; }
.tl-scene canvas { image-rendering: pixelated; image-rendering: crisp-edges; height: min(100vh, calc(100vw * 320 / 180)); width: auto; aspect-ratio: 180 / 320; max-width: 100vw; display: block; }

/* v1.57 (intégration) : les cadres partagés de la v1.56, que le chantier naval, l'équipage et la haute mer utilisent encore
   (la carte de la v1.57 n'en a plus besoin) : bandeau du haut (.tl-top, .tl-titre), panneau (.tl-panel, .tl-f-head) */
.tl-panel, .tl-top {
  background-color: var(--pxbg, #F1E3C2); color: var(--inkc, #2B1D14);
  box-shadow: 0 calc(-1 * var(--u, 2px)) 0 0 var(--pxo, #24150C), 0 var(--u, 2px) 0 0 var(--pxo, #24150C), calc(-1 * var(--u, 2px)) 0 0 0 var(--pxo, #24150C), var(--u, 2px) 0 0 0 var(--pxo, #24150C),
    0 calc(3 * var(--u, 2px)) 0 calc(-1 * var(--u, 2px)) rgba(20,10,4,.5), inset 0 var(--u, 2px) 0 0 var(--pxhl, #F8EED6), inset 0 calc(-2 * var(--u, 2px)) 0 0 var(--pxsh, #D9C49A);
}
.tl-top { display: flex; align-items: center; gap: 10px; margin: 8px 8px 6px; padding: 6px 8px; min-height: 52px; }
.tl-top .btn.small { min-height: 34px; padding: 0 10px; }
.tl-titre { flex: 1; display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.tl-titre b { font-size: 24px; font-weight: 400; }
.tl-titre small { font-size: 15px; color: var(--ink-muted, #6E5A44); margin-top: 2px; }
.tl-panel { width: 100%; max-width: 440px; padding: 12px 14px 14px; }
.tl-f-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tl-f-head h2 { margin: 0; font-size: 30px; font-weight: 400; line-height: 1; }