:root{--ink:#123148;--blue:#164e70;--blue2:#0f354d;--gold:#f4b942;--paper:#f6e5bd;--sand:#e8c98b;--white:#fff;--shadow:0 12px 30px #09223540}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#0e334b;color:#183044}body{display:flex;justify-content:center}button{font:inherit}#app{width:min(100%,620px);min-height:100dvh;background:linear-gradient(#dff4ff,#f7e6bf 65%,#d9b56f);position:relative;padding-bottom:80px;overflow:hidden}.topbar{height:72px;position:sticky;top:0;z-index:20;padding:env(safe-area-inset-top) 12px 0;background:linear-gradient(180deg,#123f5d,#0f3148);color:white;display:flex;align-items:center;gap:12px;box-shadow:0 4px 18px #0004}.brand{flex:1;text-align:center}.brand strong{display:block;font-family:Georgia,serif;font-size:18px;letter-spacing:.4px}.brand span{font-size:11px;color:#ffd987}.icon-btn,.back{border:0;background:#ffffff18;color:white;width:42px;height:42px;border-radius:50%;font-size:24px}.screen{display:none;padding:14px}.screen.active{display:block}.hero{position:relative;height:390px;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);border:3px solid #fff7}.hero-bg{width:100%;height:100%;object-fit:cover}.hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,#092b43ed 0%,transparent 62%)}.hero-copy{position:absolute;left:20px;right:20px;bottom:22px;color:white}.eyebrow,.section-title span,.grand-hero span{color:#ffe19b;text-transform:uppercase;font-weight:800;letter-spacing:1px;font-size:12px}.hero h1{font-family:Georgia,serif;font-size:46px;margin:0 0 6px}.hero p{margin:0 0 14px;line-height:1.4}.primary,.secondary{border:0;border-radius:16px;padding:14px 18px;font-weight:800;cursor:pointer}.primary{background:linear-gradient(#ffc95c,#e9a424);color:#493008;box-shadow:0 5px 0 #a86e10}.secondary{background:linear-gradient(#1c6389,#124664);color:white;box-shadow:0 5px 0 #0b2e43;margin-top:10px}.secondary:disabled{opacity:.45}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.stat{background:#fff9;border:1px solid #fff;border-radius:18px;padding:12px 6px;text-align:center;box-shadow:0 4px 14px #1232}.stat b{display:block;font-size:22px;color:#134c6c}.stat span{font-size:11px}.panel{background:linear-gradient(#fff7e5,#efd29d);border:2px solid #fff8;border-radius:22px;padding:14px;box-shadow:var(--shadow)}.panel-head{display:flex;align-items:center;justify-content:space-between}.panel h2{margin:0 0 12px;font-family:Georgia,serif}.panel-head span,.badge{background:#143e58;color:#ffe2a1;border-radius:999px;padding:6px 10px;font-weight:800;font-size:12px}.game-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.game-card{background:linear-gradient(#1a5c82,#103b56);color:white;border:2px solid #ffffff28;border-radius:18px;padding:12px 6px}.game-icon{display:block;font-size:30px}.game-card small{display:block;color:#ffd988;margin-top:4px}.map-wrap{height:470px;position:relative;border-radius:26px;overflow:hidden;border:3px solid white;box-shadow:var(--shadow);background:#85cbe6}.map-bg{width:100%;height:100%;object-fit:cover;filter:saturate(1.15)}.route{position:absolute;left:17%;top:22%;width:67%;height:53%;border:4px dashed #fff;transform:rotate(16deg);border-radius:50%;opacity:.85}.node{position:absolute;border:2px solid #fff;border-radius:50%;width:78px;height:78px;background:#1b5d80;color:white;box-shadow:0 5px 14px #0005}.node b,.node small{display:block}.node small{font-size:9px;color:#ffe5a0}.node.locked{filter:grayscale(1);opacity:.58}.n1{left:6%;top:9%}.n2{left:34%;top:29%}.n3{left:67%;top:54%}.n4{left:43%;top:70%}.n5{right:5%;bottom:7%}.story-panel{margin-top:14px}.progress{height:14px;background:#193c4b30;border-radius:99px;overflow:hidden;margin:12px 0}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#f8c34e,#ee8f2a)}.section-title{padding:6px 4px 14px}.section-title span{color:#8c5700}.section-title h2{font-family:Georgia,serif;font-size:30px;margin:3px 0}.select-stack{display:grid;gap:12px}.select-card{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:12px;background:#fff8;border:2px solid #fff;border-radius:22px;padding:8px;text-align:left;box-shadow:var(--shadow)}.select-card img{width:118px;height:92px;object-fit:cover;border-radius:15px}.select-card b{display:block;font-size:18px;color:#153f58}.select-card span{font-size:13px}.game-head{display:flex;align-items:center;gap:12px;background:#133c55;color:white;border-radius:20px;padding:10px}.game-head>div:nth-child(2){flex:1}.game-head span{font-size:11px;color:#ffd989;text-transform:uppercase}.game-head h2{font-size:20px;margin:2px 0}.game-zone{min-height:430px;margin-top:14px;background:#fff9;border:2px solid white;border-radius:24px;padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center}.game-help{background:#0e344b;color:#fff;border-radius:18px;padding:12px;margin-top:12px;text-align:center}.puzzle-grid{display:grid;grid-template-columns:repeat(3,1fr);width:min(100%,390px);aspect-ratio:1;border-radius:16px;overflow:hidden;border:5px solid #6f4318;background:#6f4318;gap:2px}.tile{border:0;background-image:url('../img/phocee_port.png');background-size:300% 300%;font-size:0}.tile.blank{background:#173d56}.memory-board,.observe-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,380px)}.memory-card,.obs-card{aspect-ratio:1;border:3px solid #fff;border-radius:18px;background:linear-gradient(#1c648b,#113f5c);color:white;font-size:40px;box-shadow:0 6px 12px #1234}.memory-card.hidden{color:transparent}.obs-card{background:linear-gradient(#f8e2af,#e8bc6c);font-size:48px}.museum-intro{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;background:#fff8;padding:10px;border-radius:20px}.museum-intro img{width:140px;height:100px;object-fit:cover;border-radius:14px}.museum-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}.museum-item{background:linear-gradient(#f9e8bf,#dcb26d);border:2px solid white;border-radius:20px;padding:14px;text-align:center;box-shadow:0 5px 15px #1233}.museum-item.locked{filter:grayscale(1);opacity:.42}.museum-item .emoji{font-size:42px;display:block}.museum-item b{display:block}.museum-item small{display:block;margin-top:4px}.grand-hero{display:grid;grid-template-columns:160px 1fr;gap:10px;align-items:center;background:#103d58;color:white;border-radius:24px;padding:10px}.grand-hero img{width:160px;height:150px;object-fit:cover;border-radius:18px}.grand-hero h2{font-family:Georgia,serif;font-size:27px;margin:3px 0}.grand-steps{display:grid;gap:12px;margin-top:14px}.grand-step{background:#fff9;border:2px solid white;border-radius:22px;padding:14px;box-shadow:var(--shadow)}.grand-step h3{margin-top:0}.choices{display:grid;gap:8px}.choice{padding:12px;border-radius:14px;border:2px solid #13506d;background:#e8f7ff;font-weight:700}.choice.good{background:#d9f4d9}.bottomnav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,620px);height:70px;background:#102f43;color:#fff;display:grid;grid-template-columns:repeat(3,1fr);z-index:30;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 18px #0004}.bottomnav button{border:0;background:transparent;color:#d9effa;font-size:20px}.bottomnav button span{display:block;font-size:10px}.bottomnav button.active{color:#ffd56c}.modal{display:none;position:fixed;inset:0;background:#041521c9;z-index:50;align-items:center;justify-content:center;padding:20px}.modal.show{display:flex}.modal-card{width:min(100%,420px);background:linear-gradient(#fff7df,#e8c689);border:3px solid white;border-radius:28px;padding:24px;text-align:center;box-shadow:0 20px 50px #0007}.modal-icon{font-size:60px}.modal-card h3{font-family:Georgia,serif;font-size:28px;margin:4px}.modal-card p{line-height:1.45}@media(max-width:390px){.hero{height:350px}.hero h1{font-size:38px}.game-card{padding:9px 4px}.game-icon{font-size:26px}.node{width:68px;height:68px}.select-card{grid-template-columns:96px 1fr}.select-card img{width:96px;height:82px}.grand-hero{grid-template-columns:120px 1fr}.grand-hero img{width:120px}.museum-intro{grid-template-columns:110px 1fr}.museum-intro img{width:110px}}

/* V2 — Les signes de Phocée + Codex */
.game-cards.four{grid-template-columns:repeat(2,1fr)}
.greek-card{background:linear-gradient(#6c3f87,#342350)}
.greek-card .game-icon{font-family:Georgia,"Times New Roman",serif;font-weight:900;color:#ffe29a;letter-spacing:-3px}
.greek-select{grid-template-columns:118px 1fr}
.greek-thumb{width:118px;height:92px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:2px;background:linear-gradient(145deg,#6f4389,#27344f);color:#ffe5a1;font:900 48px/1 Georgia,serif;border:2px solid #fff7;box-shadow:inset 0 0 30px #fff2}
.greek-thumb small{font-size:25px;color:#fff}
.greek-lesson{width:min(100%,430px);text-align:center}
.greek-symbol,.greek-word-big{font-family:Georgia,"Times New Roman",serif;color:#50316e;text-shadow:0 2px 0 #fff;font-weight:800}
.greek-symbol{font-size:132px;line-height:1}
.greek-word-big{font-size:64px;line-height:1.15;margin-bottom:5px}
.transcription{display:inline-block;background:#173e58;color:#ffe3a1;padding:7px 14px;border-radius:999px;font-weight:800;margin-bottom:8px}
.greek-choices,.word-choices{display:grid;gap:10px;margin-top:14px}
.word-choices{grid-template-columns:repeat(3,1fr)}
.word-choice{min-height:100px;border:2px solid #78558f;border-radius:18px;background:linear-gradient(#fff4d9,#ebd1a0);color:#2f2740;font-weight:800;padding:10px}
.word-choice span{display:block;font-size:36px;margin-bottom:5px}
.choice.good,.word-choice.good{background:#d9f4d9;border-color:#4f8a54}
.codex-head{display:flex;align-items:center;justify-content:space-between;margin:24px 2px 6px;padding-top:18px;border-top:2px solid #9b6d3633}
.codex-head span{color:#8c5700;text-transform:uppercase;font-weight:800;font-size:11px;letter-spacing:1px}
.codex-head h2{font-family:Georgia,serif;margin:2px 0;font-size:28px}
.secondary.compact{margin:0;padding:10px 15px}
.codex-intro{margin:0 2px 12px;font-size:13px}
.codex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.codex-item{background:linear-gradient(#fff5d9,#dec18b);border:2px solid #fff;border-radius:18px;padding:13px;text-align:center;box-shadow:0 5px 15px #1233}
.codex-item.locked{filter:grayscale(1);opacity:.45}
.greek-word{display:block;font:800 30px Georgia,"Times New Roman",serif;color:#5e386e}
.codex-item b,.codex-item small{display:block}.codex-item small{margin-top:4px}
.grand-step.greek-step{border-color:#9d75af;background:linear-gradient(#fff8eb,#ead8ef)}
@media(max-width:390px){.greek-select{grid-template-columns:96px 1fr}.greek-thumb{width:96px;height:82px}.greek-word-big{font-size:52px}.greek-symbol{font-size:110px}.word-choices{grid-template-columns:1fr}}


/* V3 — intégration pwa-install */
.top-actions{display:flex;align-items:center;gap:8px}
.install-top-btn{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.12);color:#fff;border-radius:14px;min-height:42px;padding:8px 11px;display:flex;align-items:center;gap:6px;font:inherit;font-weight:800;cursor:pointer;backdrop-filter:blur(8px)}
.install-top-btn span{font-size:.78rem}
.install-top-btn[hidden]{display:none!important}
pwa-install{--tint-color:#d59b43}
@media (max-width:390px){.install-top-btn span{display:none}.install-top-btn{min-width:42px;justify-content:center;padding:8px}}

/* V4 — Mémoire basé sur les sprites de la planche graphique */
.memory-reveal{display:grid;place-items:center;gap:12px;min-height:330px;padding:20px}.memory-target{position:relative;width:min(72vw,260px);aspect-ratio:1/1;border-radius:28px;background:linear-gradient(180deg,#fff7dc,#e8cf91);border:5px solid #efc463;box-shadow:0 16px 30px #07152566,inset 0 0 0 3px #fff8;display:grid;place-items:center;overflow:hidden}.memory-target::after{content:"";position:absolute;inset:10px;border-radius:20px;border:2px solid #7c531c55;pointer-events:none}.memory-target img{width:72%;height:72%;object-fit:contain;border-radius:18px}.memory-target span{position:absolute;left:14px;right:14px;bottom:12px;padding:7px 10px;border-radius:14px;background:#102d4ee6;color:#fff7d5;font-weight:900;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}.memory-countdown{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#102d4e;color:#fff1bd;border:3px solid #efc463;font-weight:900;font-size:1.25rem;box-shadow:0 8px 18px #07152555}.sprite-memory-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sprite-card{min-height:145px;padding:8px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;overflow:hidden}.sprite-card img{width:88px;height:88px;max-width:78%;object-fit:contain;border-radius:13px}.sprite-card span{font-size:.72rem;font-weight:800;line-height:1.05;color:#f8edcf}.sprite-card.good{outline:4px solid #65dc8e;box-shadow:0 0 25px #65dc8e99}.sprite-card.bad{outline:4px solid #ff6b6b}.sprite-card.bad img{filter:grayscale(.45)}
@media (min-width:540px){.sprite-memory-board{grid-template-columns:repeat(3,minmax(0,1fr))}.sprite-card{min-height:155px}}

/* V5 — bibliothèque de sprites commune + Marchand à contraintes */
.merchant-card{background:linear-gradient(#8a5a27,#4d3017)}
.merchant-game{width:100%;display:grid;gap:12px}
.merchant-order{width:100%;background:linear-gradient(#fff5d9,#e8c37e);border:2px solid #fff;border-radius:18px;padding:12px 14px;box-shadow:0 6px 16px #1233}
.merchant-order-title{font-family:Georgia,serif;font-size:18px;font-weight:900;color:#67400f;margin-bottom:5px}
.merchant-order ul{margin:5px 0 0;padding-left:20px;font-size:13px;line-height:1.45}
.merchant-stock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
.merchant-good{min-width:0;border:2px solid #fff;border-radius:16px;background:linear-gradient(#174f70,#0e354d);color:white;padding:7px 4px;box-shadow:0 5px 12px #1234;touch-action:manipulation}
.merchant-good img{display:block;width:62px;height:62px;max-width:100%;object-fit:contain;margin:auto}
.merchant-good b,.merchant-good small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.merchant-good b{font-size:11px;margin-top:2px}.merchant-good small{font-size:9px;color:#ffe1a0}
.merchant-ship{width:100%;min-height:170px;border:3px dashed #2c7395;border-radius:22px;background:linear-gradient(#e8f7ff,#cce8f2);padding:10px;transition:.18s}
.merchant-ship.dragover{transform:scale(1.015);background:#d7f4df;border-color:#4b9b62}
.ship-label{font-weight:900;color:#153e57;text-align:center;margin-bottom:8px}
.ship-items{min-height:90px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.empty-cart{font-size:12px;color:#547484;font-style:italic}
.cart-good{position:relative;width:68px;height:68px;border:2px solid white;border-radius:14px;background:#fff9;padding:2px;box-shadow:0 3px 8px #1233}
.cart-good img{width:100%;height:100%;object-fit:contain}.cart-good span{position:absolute;right:-4px;top:-6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#a7372f;color:white;font-weight:900;font-size:12px}
.ship-totals{display:flex;justify-content:space-between;gap:8px;background:#123d55;color:white;border-radius:12px;padding:7px 10px;font-size:12px}.ship-totals b.ok{color:#6ff09b}.ship-totals b.badtotal{color:#ff8e86}
.merchant-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}.merchant-actions .secondary{margin-top:0}
.merchant-feedback{min-height:42px;border-radius:14px;padding:10px;text-align:center;font-size:12px;font-weight:800;background:#ffffff80}.merchant-feedback.good{background:#d7f1d8;color:#285e34}.merchant-feedback.bad{background:#f5d4cf;color:#7a2924}
@media(max-width:420px){.merchant-stock{grid-template-columns:repeat(3,minmax(0,1fr))}.merchant-good img{width:58px;height:58px}.merchant-actions{grid-template-columns:1fr}.merchant-game{gap:9px}}