/* Flow layout keeps cultural explanations and the map clear on small screens. */
.city-djerba{height:auto;min-height:100svh;background:#15352e;padding-bottom:1px}
.city-djerba .chapter-world{position:relative;inset:auto;padding:190px 16px 24px;background-position:center 43%}
.world-djerba-market{background-image:url('assets/djerba-market.webp')}
.world-djerba-courtyard{background-image:url('assets/djerba-courtyard.webp')}
.world-djerba-coast{background-image:url('assets/djerba-coast.webp')}
.city-djerba .chapter-shade{background:linear-gradient(#12332dd9,#12332d20 40%,#15352e55 80%,#15352e)}
.city-djerba .chapter-task{position:relative;bottom:auto;left:auto;right:auto;margin:0 14px 14px}
.island-scene{position:relative;z-index:4;min-height:170px}
.island-answers{position:relative;left:auto;right:auto;top:auto;gap:9px}
.island-answers .world-answer{min-height:130px;border-radius:18px 18px 7px 7px;font-size:11px;gap:10px;line-height:1.45;padding:14px 8px;background:linear-gradient(145deg,#f0dfb8,#cbb380)}
.island-emblem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;min-height:230px;color:#fff2d4;text-shadow:0 2px 7px #17392c}
.island-emblem svg{width:95px;height:95px;filter:drop-shadow(0 0 22px #ffeea7)}
.island-emblem strong{font:500 25px var(--serif)}
.island-emblem span{font-size:11px;background:#15352ece;border:1px solid #e4c58a80;border-radius:15px;padding:8px 12px}
.expression-player{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:390px;margin:0 auto 17px}
.expression-player button{min-height:44px;padding:10px 8px;font-size:11px}
.expression-player .secondary{background:#173a32e8;color:#ffe7b3;border-color:#dbc58b}
.expression-player p{grid-column:1/-1;text-align:center;color:#fff4d9;margin:0;background:#173a32e8;border-radius:7px;padding:6px}
.expression-script{font-size:23px;line-height:1.8}.expression-transliteration{font-size:13px}
.island-wait{text-align:center;color:#fff1d0;background:#173a32dc;border-radius:9px;padding:20px;font-size:12px;line-height:1.7}
.island-map{width:230px;max-width:100%;margin:-8px auto 15px;padding:12px;background:#174743ec;border:1px solid #edd7a1a0;border-radius:13px;color:#f2dfb3}
.island-map>svg{display:block;width:100%;height:auto}.island-map small{display:block;text-align:center;font-size:8px;line-height:1.5}
.tunisia-land{fill:#e2cf9f;stroke:#857545;stroke-width:.9}.map-callout{fill:none;stroke:#f4dca2;stroke-width:1.5}.map-dot{fill:#17473d;stroke:#ffecb6;stroke-width:1.5}.map-djerba{fill:#a8d083}
.map-label{fill:#12342e;stroke:#eac57d;stroke-width:1.8}.map-letter{fill:#ffeab9;font-size:16px;font-weight:700}.map-north{fill:#f9e4b5;font-size:12px}.map-sea{fill:#c5ddd3;font-size:9px}
.map-answers .world-answer{min-height:74px;font-size:12px;padding:10px 5px;gap:5px}.map-answers svg{height:20px;width:20px}
.island-locations{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.island-location{min-height:94px;border:1px solid #e3c690;border-radius:11px;background:#173b31eb;color:#fff0c9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;font-size:12px}
.island-location svg{height:30px;width:30px;color:#edcf91}.island-location small{font-size:9px;color:#c2dfa8}.island-location.visited{opacity:.65;border-color:#adc893}
.island-location-title{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;margin-bottom:15px;background:#15382eef;border:1px solid #dbc48780;border-radius:10px;color:#ffe8b4;font-size:13px}.island-location-title svg{height:24px;width:24px}
.island-relic{height:260px;position:relative}.island-relic .take-relic{top:50%}.pearl-relic svg{height:100px;width:100px}.pearl-relic{width:210px;height:210px}
.island-complete{background:linear-gradient(#123b35b0,#102b29f5),url('assets/djerba-coast.webp') center/cover}
@media(max-width:350px){.city-djerba .chapter-world{padding-inline:12px}.island-answers{gap:6px}.island-answers .world-answer{font-size:10px;padding-inline:5px}.expression-player button{font-size:10px}}
/* Chemtou entry: supplied ruins, closed/open door and three real objects on the path. */
.world-djerba-market:has(.cq-scene){container-type:size;overflow:hidden;background:#b48a5a}
.cq-scene{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100cqw,calc(100cqh*1072/1920));aspect-ratio:1072/1920;z-index:1;pointer-events:none}
.cq-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cq-scene .cq-open{opacity:0;transition:opacity 1.1s ease}
.cq-scene.is-open .cq-open{opacity:1}
.cq-objects{position:absolute;inset:0;z-index:3;pointer-events:none}
.cq-objects .dq-object{bottom:30%}
.cq-amphora{left:20%;width:13%}
.cq-marble{left:50%;bottom:27%!important;width:14%}
.cq-moai{left:80%;width:11%}
.city-djerba.carthage-leaving .cq-scene{transition:transform .9s ease-in;transform:translate(-50%,-50%) scale(2.6)}
.chapter-root:has(.cq-scene) .chapter-heading{display:none}
.chapter-root.city-djerba:has(.cq-scene){position:relative;height:100svh;min-height:577px;overflow:hidden;background:#b48a5a}
.city-djerba:has(.cq-scene) .chapter-world{position:absolute;inset:0;min-height:0;padding:0}
.city-djerba:has(.cq-scene) .chapter-shade{display:none}
.city-djerba:has(.cq-scene) .chapter-task{position:absolute;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));margin:0;z-index:5}
/* Chemtou QCM: supplied ruins per question, stone answer plaques, no decorative headings. */
.city-djerba.question-scenic .chapter-heading h1,.city-djerba.question-scenic .chapter-heading span{display:none}
.city-djerba .chemtou-task .chapter-steps{display:flex}
.city-djerba.question-scenic .world-answer>span{color:#3b2412;text-shadow:0 1px 0 rgba(255,236,190,.55);font-weight:700}
/* Chemtou reward keeps the supplied chest photographs at their original proportions. */
.city-djerba:has(.cr-scene){--chemtou-reward-ground:#b48a5a;position:relative;height:100svh;min-height:577px;overflow:hidden;background:var(--chemtou-reward-ground)}
.city-djerba:has(.cr-scene) .chapter-world{position:absolute;inset:0;padding:0;background:none}
.city-djerba:has(.cr-scene) .chapter-shade,.city-djerba:has(.cr-scene) .chapter-heading,.city-djerba:has(.cr-scene) .chapter-steps{display:none}
.city-djerba:has(.cr-scene) .chapter-task{position:absolute;left:14px;right:14px;top:62%;bottom:auto;margin:0;z-index:5}
.city-djerba:has(.cr-scene) .chapter-task{display:block}
.cr-scene{position:absolute;inset:0;overflow:hidden}
.cr-frame{position:absolute;left:0;top:0;height:100%;width:100%;max-width:none;object-fit:cover;transform:none;opacity:0;transition:opacity .5s ease;pointer-events:none}
.cr-frame.cr-visible{opacity:1}
.cr-chest{position:absolute;left:50%;top:29%;width:min(72%,430px);height:30%;transform:translateX(-50%);background:none;border:0;cursor:pointer;z-index:2}
.cr-chest:disabled{pointer-events:none}
.cr-cup{position:absolute;left:50%;top:40%;width:clamp(110px,36%,200px);aspect-ratio:1.05;transform:translate(-50%,10%) scale(.35);transform-origin:center bottom;opacity:0;background:none;border:0;padding:0;z-index:3;transition:transform 1.2s ease,opacity .7s ease;pointer-events:none}
.cr-cup img{width:100%;height:100%;object-fit:contain}
.cr-revealed .cr-cup{opacity:1;transform:translate(-50%,-75%) scale(1)}
.cr-revealed .cr-cup:not(:disabled){pointer-events:auto;cursor:pointer}
.cr-cup:focus-visible,.cr-chest:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.island-complete .completion-eye-img{width:140px;height:140px;object-fit:contain}
@media(prefers-reduced-motion:reduce){.cr-frame,.cr-cup{transition:none}}