:root{
 --abyss:#062029; --deep:#0b3540; --deep2:#0e2f39; --surf:#13586b;
 --panel:rgba(15,55,66,.62); --panel2:rgba(11,44,54,.78);
 --ink:#F3ECDC; --mut:#9FBBC1; --soft:#C9DDE0;
 --aqua:#74D3C6; --sea:#3FB893; --sea-d:#2E9E7C;
 --coral:#EC6A4E; --coral-d:#C9512F;
 --sand:#E7C7A0; --foam:#F4ECDA; --gold:#E8B45C;
 --line:rgba(160,205,210,.18); --line2:rgba(160,205,210,.30);
 --shadow:0 8px 22px rgba(2,14,18,.45);
 --r:20px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
 font-family:Inter,system-ui,sans-serif;color:var(--ink);
 background:
  radial-gradient(150% 95% at 50% -25%, #14617a 0%, #0c3e4c 34%, #072530 70%, var(--abyss) 100%) fixed;
 min-height:100vh;min-height:100dvh;overflow-x:hidden;
 text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
/* soft grain for depth */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
/* gentle caustic light from the surface */
body::before{content:"";position:fixed;left:50%;top:-12%;width:130vw;height:55vh;transform:translateX(-50%);
 pointer-events:none;z-index:0;opacity:.35;
 background:radial-gradient(closest-side, rgba(150,230,225,.16), transparent 70%);
 filter:blur(6px)}
.wrap{max-width:560px;margin:0 auto;padding:14px 16px 130px;position:relative;z-index:1}

/* ---------- header ---------- */
header{display:flex;align-items:center;gap:12px;padding:8px 2px 6px}
.logo{width:44px;height:44px;flex:0 0 auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
h1{font-family:Fraunces,serif;font-weight:600;font-size:1.42rem;margin:0;line-height:1;letter-spacing:.2px}
.sub{color:var(--mut);font-size:.74rem;margin-top:3px;font-style:italic}
/* foam wave under header */
.wave{display:block;width:100%;height:20px;margin:6px 0 14px;opacity:.55}

/* ---------- diver card ---------- */
.diver{position:relative;border-radius:22px;padding:16px 17px;margin-bottom:16px;overflow:hidden;
 background:linear-gradient(160deg, rgba(24,82,98,.72), rgba(10,42,52,.86));
 border:1px solid var(--line2);box-shadow:var(--shadow)}
.diver::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
 background:linear-gradient(90deg,var(--gold),var(--aqua),var(--sea))}
.diver .row1{display:flex;align-items:center;gap:13px}
.badge-mask{width:50px;height:62px;flex:0 0 auto;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:2px;
 background:radial-gradient(80% 70% at 50% 25%, rgba(116,211,198,.22), rgba(8,40,50,.55));border:1px solid var(--line2)}
.badge-mask svg{width:100%;height:100%}
.diver .rank{font-family:Fraunces,serif;font-size:1.16rem;font-weight:600;line-height:1.05}
.diver .lvl{color:var(--gold);font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-top:2px}
.xpbar{height:9px;border-radius:6px;background:rgba(4,22,28,.6);margin:13px 0 4px;overflow:hidden;border:1px solid rgba(0,0,0,.25)}
.xpfill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--sea),var(--aqua));box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:width .5s cubic-bezier(.2,.9,.3,1)}
.xpmeta{display:flex;justify-content:space-between;font-size:.72rem;color:var(--mut)}
.xpmeta b{color:var(--ink)}
.dstats{display:flex;gap:10px;margin-top:14px}
.dstat{flex:1;text-align:center;background:rgba(6,32,40,.45);border:1px solid var(--line);border-radius:13px;padding:9px 6px}
.dstat .n{font-family:Fraunces,serif;font-size:1.16rem;font-weight:600;color:var(--aqua)}
.dstat .l{font-size:.62rem;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;margin-top:1px}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.tile{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:17px 16px 16px;cursor:pointer;
 background:linear-gradient(170deg, rgba(26,84,100,.50), rgba(10,40,52,.66));
 box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.10);
 transition:transform .13s ease, box-shadow .13s ease, border-color .13s;min-height:120px;display:flex;flex-direction:column}
.tile:active{transform:translateY(3px);box-shadow:0 3px 10px rgba(2,14,18,.4), inset 0 2px 6px rgba(0,0,0,.25);border-color:var(--line2)}
.tile .ic{width:36px;height:36px;margin-bottom:10px}
.tile h3{margin:0;font-family:Fraunces,serif;font-weight:600;font-size:1.1rem;letter-spacing:.2px}
.tile p{margin:5px 0 0;color:var(--soft);font-size:.78rem;line-height:1.34;opacity:.92}
.tile .go{position:absolute;right:14px;bottom:13px;color:var(--aqua);font-size:1.15rem;opacity:.7}
.tile.full{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;gap:14px;padding:15px 17px}
.tile.full .ic{margin:0}
.tile.full>div{flex:1}

/* ---------- generic screen ---------- */
.screen{display:none;animation:rise .26s ease}
.screen.on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.topbar{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.back{border:1px solid var(--line2);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.06)) rgba(11,44,54,.6);
 color:var(--ink);border-radius:13px;padding:10px 13px;font-size:.86rem;cursor:pointer;font-weight:600;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.back:active{transform:translateY(2px)}
.mode-name{font-family:Fraunces,serif;font-size:1.12rem}
.zonechip{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--sand);
 background:rgba(231,199,160,.12);border:1px solid rgba(231,199,160,.32);padding:6px 10px;border-radius:11px}

/* ---------- zone select ---------- */
.zone{border:1px solid var(--line2);border-radius:var(--r);padding:18px;margin-bottom:14px;cursor:pointer;position:relative;overflow:hidden;
 background:linear-gradient(165deg, rgba(26,84,100,.55), rgba(10,40,52,.72));box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.1)}
.zone:active{transform:translateY(3px)}
.zone h3{font-family:Fraunces,serif;font-weight:600;font-size:1.18rem;margin:0 0 4px;display:flex;align-items:center;gap:9px}
.zone .desc{color:var(--soft);font-size:.86rem;line-height:1.45}
.zone .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.ztag{font-size:.68rem;font-weight:700;padding:5px 9px;border-radius:9px;background:rgba(116,211,198,.14);color:var(--aqua);border:1px solid rgba(116,211,198,.3)}
.ztag.warm{background:rgba(231,199,160,.13);color:var(--sand);border-color:rgba(231,199,160,.32)}
.zone .play{position:absolute;right:16px;bottom:16px;color:var(--sea);font-weight:700;font-size:.9rem}

/* ---------- stage / quiz ---------- */
.stage{border:1px solid var(--line2);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);
 background:linear-gradient(180deg, #0f4254 0%, #0b313d 70%, #08272f 100%);position:relative}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(85% 70% at 50% 0%, rgba(140,225,220,.12), transparent 65%)}
.silho{display:flex;align-items:center;justify-content:center;height:176px;position:relative}
.silho svg{width:240px;max-width:86%;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.silho img.ph{max-width:92%;max-height:160px;object-fit:contain;border-radius:14px;box-shadow:0 10px 22px rgba(0,0,0,.55)}
/* measuring tape */
.tape{margin:0 16px 14px;background:linear-gradient(180deg,#f3ead6,#e6d4af);border-radius:10px;padding:8px 12px;
 display:flex;align-items:center;gap:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px rgba(0,0,0,.3);position:relative}
.tape .cm{font-family:Fraunces,serif;font-weight:600;color:#3a2c12;font-size:1.18rem;white-space:nowrap}
.tape .ruler{flex:1;height:22px;position:relative;border-radius:4px;overflow:hidden;
 background:repeating-linear-gradient(90deg, transparent 0 9px, rgba(90,60,20,.45) 9px 10px)}
.tape .ruler::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--fillw,40%);background:rgba(63,184,147,.32);border-right:2px solid var(--sea-d)}
.clue{padding:14px 18px 17px;border-top:1px solid var(--line)}
.clue .lab{font-size:.64rem;text-transform:uppercase;letter-spacing:1.4px;color:var(--aqua);opacity:.85;font-weight:700}
.clue .txt{font-family:Fraunces,serif;font-size:1.08rem;line-height:1.4;margin-top:5px}

.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}
.opt{border:1px solid var(--line2);border-radius:15px;padding:16px 12px;font-size:.96rem;font-weight:600;cursor:pointer;min-height:56px;
 color:var(--ink);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.05)) rgba(13,52,62,.7);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 4px 10px rgba(0,0,0,.25);transition:transform .1s, background .15s, border-color .15s}
.opt:active{transform:translateY(2px)}
.opt.good{background:rgba(63,184,147,.26);border-color:var(--sea);color:#e7fff4}
.opt.bad{background:rgba(236,106,78,.22);border-color:var(--coral);color:#ffe2da}
.opt.dim{opacity:.4}

.decide{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:17px}
.dbtn{border-radius:18px;padding:19px 12px;font-size:1.12rem;font-weight:700;cursor:pointer;border:1.5px solid;letter-spacing:.5px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px rgba(0,0,0,.3)}
.dbtn:active{transform:translateY(3px);box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
.dbtn.shoot{background:linear-gradient(180deg,#46c79e,#2e9e7c);border-color:#2a8e6f;color:#04261b}
.dbtn.leave{background:linear-gradient(180deg,#f07a5f,#cf5232);border-color:#b8492c;color:#3a0f06}

/* verdict */
.verdict{margin-top:16px;border-radius:18px;padding:16px 17px;border:1px solid var(--line2);
 background:linear-gradient(165deg, rgba(18,62,76,.85), rgba(9,40,50,.92));animation:slam .32s cubic-bezier(.2,1.4,.4,1);box-shadow:var(--shadow)}
@keyframes slam{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
.stamp{display:inline-block;font-weight:800;font-size:.74rem;padding:5px 11px;border-radius:9px;letter-spacing:.7px;text-transform:uppercase;margin-bottom:9px}
.stamp.ok{background:var(--sea);color:#04281c}
.stamp.no{background:var(--coral);color:#3a0d06}
.stamp.warn{background:var(--sand);color:#3d2c10}
.verdict .title{font-family:Fraunces,serif;font-size:1.16rem;margin:0 0 4px}
.verdict .why{color:var(--soft);font-size:.92rem;line-height:1.42}
.verdict .quota{margin-top:9px;font-size:.82rem;color:var(--sand);font-weight:600}
.verdict .danger{margin-top:8px;font-size:.84rem;color:#ffd0c6}
.next{margin-top:14px;width:100%;border:none;border-radius:15px;padding:16px;cursor:pointer;font-weight:700;font-size:1rem;
 background:linear-gradient(180deg,#7ad9cc,#3aa99d);color:#042b2a;box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px rgba(0,0,0,.3)}
.next:active{transform:translateY(2px)}

/* floating points + combo */
.fx{position:absolute;left:50%;top:40%;transform:translateX(-50%);pointer-events:none;z-index:5;
 font-family:Fraunces,serif;font-weight:700;font-size:1.5rem;color:var(--foam);text-shadow:0 2px 8px rgba(0,0,0,.5);
 animation:floatup 1s ease forwards}
.fx .mult{color:var(--gold);font-size:1.05rem}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-46px) scale(1.1)}}
.combo-flash{animation:cflash .5s ease}
@keyframes cflash{0%,100%{box-shadow:var(--shadow)}40%{box-shadow:0 0 0 3px var(--gold), var(--shadow)}}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);top:auto;transform:translateX(-50%) translateY(14px);opacity:0;visibility:hidden;pointer-events:none;z-index:300;
 display:flex;align-items:center;gap:11px;max-width:90%;
 background:linear-gradient(160deg,#1a5262,#0b2c36);border:1px solid var(--gold);border-radius:15px;padding:12px 16px;
 box-shadow:0 12px 34px rgba(0,0,0,.55);transition:opacity .3s ease,transform .4s cubic-bezier(.2,1.2,.4,1),visibility 0s linear .4s}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .3s ease,transform .4s cubic-bezier(.2,1.2,.4,1)}
.toast .tic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:rgba(232,180,92,.18);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.toast .tt{font-family:Fraunces,serif;font-weight:600;font-size:.98rem;line-height:1.1}
.toast .ts{font-size:.74rem;color:var(--mut);margin-top:1px}

/* ---------- search / tabs ---------- */
.searchbar{width:100%;border:1px solid var(--line2);border-radius:14px;padding:13px 15px;font-size:.92rem;margin-bottom:8px;font-family:inherit;color:var(--ink);
 background:rgba(8,38,46,.6);box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
.searchbar::placeholder{color:var(--mut)}
.famtabs{display:flex;gap:8px;overflow-x:auto;padding:9px 0 13px;scrollbar-width:none}
.famtabs::-webkit-scrollbar{display:none}
.famtab{flex:0 0 auto;border:1px solid var(--line);border-radius:20px;padding:8px 14px;font-size:.78rem;cursor:pointer;white-space:nowrap;font-weight:600;
 color:var(--mut);background:rgba(8,38,46,.5)}
.famtab.on{background:rgba(116,211,198,.16);border-color:var(--aqua);color:var(--aqua)}
.medtoggle{margin-left:auto;display:flex;gap:6px}
.medtoggle button{border:1px solid var(--line);background:rgba(8,38,46,.5);color:var(--mut);border-radius:10px;padding:7px 11px;font-size:.74rem;font-weight:600;cursor:pointer}
.medtoggle button.on{background:rgba(116,211,198,.14);border-color:var(--aqua);color:var(--aqua)}

/* ---------- carnet grid ---------- */
.progress-wrap{margin:2px 0 14px}
.progress-line{display:flex;justify-content:space-between;font-size:.78rem;color:var(--mut);margin-bottom:6px}
.progress-line b{color:var(--ink)}
.pbar{height:10px;border-radius:6px;background:rgba(4,22,28,.6);overflow:hidden;border:1px solid rgba(0,0,0,.25)}
.pfill{height:100%;background:linear-gradient(90deg,var(--sea),var(--aqua));box-shadow:inset 0 1px 0 rgba(255,255,255,.3);transition:width .5s}
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.cell{border:1px solid var(--line);border-radius:15px;overflow:hidden;cursor:pointer;background:linear-gradient(165deg,rgba(20,68,82,.4),rgba(9,38,50,.6));
 box-shadow:0 4px 10px rgba(0,0,0,.25);transition:transform .12s}
.cell:active{transform:translateY(2px)}
.cell .ph-wrap{height:84px;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(70% 110% at 50% 25%,rgba(116,211,198,.10),rgba(7,33,46,.5))}
.cell .ph-wrap img{width:100%;height:100%;object-fit:contain;padding:4px}
.cell .ph-wrap svg{width:96%;height:78px}
.cell.locked .ph-wrap svg{filter:grayscale(.7) brightness(.6);opacity:.55}
.cell.locked::after{content:"?";position:absolute;top:6px;right:9px;font-family:Fraunces,serif;font-weight:700;color:var(--mut);font-size:1rem}
.cell .nm{font-size:.72rem;padding:7px 8px;line-height:1.2;color:var(--soft);font-weight:600;text-align:center;min-height:34px;display:flex;align-items:center;justify-content:center}
.cell .seen-dot{position:absolute;top:6px;left:8px;width:9px;height:9px;border-radius:50%;background:var(--sea);box-shadow:0 0 0 2px rgba(4,30,24,.5)}

/* ---------- detail ---------- */
.detail-hero{border:1px solid var(--line2);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:14px;
 background:linear-gradient(180deg,#0f4254,#08272f)}
.detail-hero .img{height:210px;display:flex;align-items:center;justify-content:center;background:radial-gradient(80% 80% at 50% 20%,rgba(140,225,220,.12),transparent 60%)}
.detail-hero .img img{max-width:94%;max-height:194px;object-fit:contain;border-radius:13px;box-shadow:0 10px 22px rgba(0,0,0,.5)}
.detail-hero .img svg{width:90%;height:190px}
.dh-body{padding:15px 17px}
.dh-body .nm{font-family:Fraunces,serif;font-size:1.4rem;font-weight:600;line-height:1.05}
.dh-body .sci{font-style:italic;color:var(--mut);font-size:.86rem;margin-top:2px}
.dh-body .fam{display:inline-block;margin-top:9px;font-size:.68rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--aqua);
 background:rgba(116,211,198,.12);border:1px solid rgba(116,211,198,.3);padding:4px 9px;border-radius:9px}
.dh-body .rep{color:var(--soft);font-size:.95rem;line-height:1.5;margin-top:13px}
.dblock{border:1px solid var(--line);border-radius:15px;padding:13px 15px;margin-bottom:12px;background:rgba(10,42,52,.5)}
.dblock h4{margin:0 0 8px;font-family:Fraunces,serif;font-size:.96rem;font-weight:600;padding-left:10px;border-left:3px solid var(--aqua)}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:.7rem;padding:5px 9px;border-radius:8px;font-weight:700}
.tag.size{background:rgba(116,211,198,.14);color:var(--aqua);border:1px solid rgba(116,211,198,.3)}
.tag.free{background:rgba(159,187,193,.14);color:var(--soft);border:1px solid rgba(159,187,193,.3)}
.tag.prot{background:rgba(236,106,78,.16);color:#ffc7bd;border:1px solid rgba(236,106,78,.4)}
.tag.clos{background:rgba(231,199,160,.15);color:var(--sand);border:1px solid rgba(231,199,160,.4)}
.tag.cdp{background:rgba(63,184,147,.14);color:#bfeed6;border:1px solid rgba(63,184,147,.34)}
.tag.dgr{background:rgba(150,90,200,.18);color:#e7c7ff;border:1px solid rgba(160,100,200,.4)}
.tag.zone{background:rgba(232,180,92,.12);color:var(--sand);border:1px solid rgba(232,180,92,.3)}

/* ---------- règles ---------- */
.region-switch{display:flex;gap:9px;margin-bottom:13px}
.rbtn{flex:1;border:1px solid var(--line2);border-radius:13px;padding:12px 8px;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--mut);
 background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.05)) rgba(8,38,46,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.rbtn.on{background:rgba(116,211,198,.16);border-color:var(--aqua);color:var(--aqua)}
.rbtn:active{transform:translateY(2px)}
.reg{border:1px solid var(--line);border-radius:16px;padding:4px 17px 15px;margin-bottom:13px;
 background:linear-gradient(165deg,rgba(20,68,82,.4),rgba(9,38,50,.58))}
.reg h3{font-family:Fraunces,serif;font-weight:600;font-size:1.04rem;margin:15px 0 8px;padding-left:11px;border-left:3px solid var(--aqua)}
.reg ul{margin:0;padding-left:19px}
.reg li{font-size:.87rem;line-height:1.52;color:var(--soft);margin-bottom:5px}
.reg li b{color:var(--ink)}
.reg .q{font-size:.84rem;color:var(--sand);line-height:1.7;font-weight:600}
.reg .warnbox{background:rgba(236,106,78,.1);border:1px solid rgba(236,106,78,.34);border-radius:12px;padding:11px 14px;margin:10px 0}
.reg .warnbox b{color:#ffc7bd}

.disclaimer{color:var(--mut);font-size:.73rem;line-height:1.5;text-align:center;padding:8px 12px 0}
footer{text-align:center;color:var(--mut);font-size:.68rem;margin-top:22px;line-height:1.5;opacity:.85}
.tap-hint{font-style:italic}