/* Mauritius Guide — közönség-felület (5a). A cheaperdays design-nyelvében,
   igazi Leaflet-térképpel. Minden a #mg-app (.mg-scope) alá van hatókörözve. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Instrument+Sans:wght@400;500;600;700&display=swap');

.mg-scope{
  --paper:#EDF5F6;--card:#FFFFFF;--ink:#08303F;--ink-soft:#436373;--ink-faint:#8AA6B0;--line:#D8E6E9;
  --accent:#0E8F97;--accent-ink:#0A4E63;--accent-bg:#E1F1F1;--brand:#063A4C;
  --hi:#E8804B;--gold:#F2B441;--gold-bg:#FBF0CE;--fav:#F2765E;--radius:16px;
  /* dizájn-jelenet tokenek */
  --ocean:#0E8F97;--ocean-deep:#0A4E63;--ocean-bg:#E2F1F2;--ocean-ink:#0A4E63;--turq:#22C2C7;--coral:#F2765E;
  --sand:#F0E3C6;--sand-bg:#FBF3DF;--glass:rgba(255,255,255,.82);--glass-line:rgba(255,255,255,.6);
  --font-display:'Playfair Display','Georgia',serif;--font-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.5;-webkit-font-smoothing:antialiased;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;
}
.mg-scope *{box-sizing:border-box}
.mg-scope [hidden]{display:none!important}
.mg-scope img{max-width:100%}
.mg-boot{padding:40px;text-align:center;color:var(--ink-faint)}
.mg-pad{padding:clamp(16px,3vw,26px)}

/* top bar */
.mg-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(16px,3vw,26px);border-bottom:1px solid var(--line);background:var(--paper)}
.mg-logo{font-family:var(--font-display);font-weight:600;font-size:calc(1.2 * var(--mg-fs, 1rem));color:var(--brand);display:flex;align-items:center;gap:8px}
.mg-logo .dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,var(--ocean-deep),var(--ocean) 65%,var(--turq));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:calc(.9 * var(--mg-fs, 1rem));box-shadow:0 6px 16px -6px var(--ocean)}
.mg-topright{display:flex;align-items:center;gap:10px}
.mg-lang{position:relative}
.mg-langbtn{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 11px;font:inherit;font-size:calc(.85 * var(--mg-fs, 1rem));font-weight:600;color:var(--ink);cursor:pointer}
.mg-langmenu{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(23,37,43,.18);padding:5px;display:none;z-index:30;min-width:150px}
.mg-langmenu.on{display:block}
.mg-langmenu button{display:flex;width:100%;justify-content:space-between;gap:10px;background:none;border:0;padding:8px 10px;border-radius:7px;cursor:pointer;font:inherit;font-size:calc(.88 * var(--mg-fs, 1rem));color:var(--ink)}
.mg-langmenu button:hover{background:var(--paper)}
.mg-langmenu button.active{color:var(--accent-ink);font-weight:600}
.mg-langmenu .soon{font-size:calc(.7 * var(--mg-fs, 1rem));color:var(--ink-faint);font-weight:600}
.mg-dark{border:0;background:transparent;cursor:pointer;color:var(--ink-soft);padding:5px;line-height:0;border-radius:6px}

/* hero + cards */
.mg-hero{text-align:center;padding:clamp(24px,5vw,44px) clamp(16px,3vw,26px) 6px}
.mg-hero .kicker{font-size:calc(.8 * var(--mg-fs, 1rem));letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);font-weight:600;margin-bottom:12px}
.mg-hero h1{font-family:var(--font-display);font-weight:600;color:var(--brand);font-size:clamp(1.7rem,5vw,2.5rem);line-height:1.06;margin:0 0 12px}
.mg-hero p{margin:0 auto;max-width:40ch;color:var(--ink-soft);font-size:clamp(.98rem,2.2vw,1.08rem)}
.mg-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(16px,3vw,24px);margin:0 clamp(16px,3vw,26px) 18px;box-shadow:0 1px 0 rgba(23,37,43,.02),0 18px 40px -34px rgba(23,37,43,.22)}

/* buttons / tags */
.mg-btn{font:inherit;font-size:calc(.9 * var(--mg-fs, 1rem));font-weight:600;border:0;border-radius:10px;padding:11px 16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none}
.mg-btn.p{background:linear-gradient(135deg,var(--ocean-deep),var(--ocean));color:#fff;box-shadow:0 12px 26px -16px var(--ocean)}.mg-btn.p:hover{filter:brightness(1.05)}
.mg-btn.alt{background:var(--paper);color:var(--ink);border:1px solid var(--line)}.mg-btn.alt:hover{border-color:var(--accent)}
.mg-btn.block{width:100%}
.mg-tag{display:inline-flex;align-items:center;gap:5px;font-size:calc(.74 * var(--mg-fs, 1rem));font-weight:600;padding:3px 9px;border-radius:999px}
.mg-tag.now{background:var(--accent-bg);color:var(--accent-ink)}
.mg-tag.site{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line)}
.mg-sample{display:inline-flex;align-items:center;gap:4px;font-size:calc(.7 * var(--mg-fs, 1rem));font-weight:600;background:var(--accent-bg);color:var(--accent-ink);padding:2px 8px;border-radius:999px;margin-left:8px}

/* gate */
.mg-gate{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
.mg-gate h2{font-family:var(--font-display);font-weight:600;font-size:calc(1.4 * var(--mg-fs, 1rem));margin:0 0 8px}
.mg-gate p{color:var(--ink-soft);font-size:calc(.95 * var(--mg-fs, 1rem));margin:0 0 14px}
.mg-codewrap{display:flex;gap:7px}
.mg-prefix{font-family:ui-monospace,Menlo,monospace;font-size:calc(1 * var(--mg-fs, 1rem));padding:0 12px;display:flex;align-items:center;background:var(--accent-bg);color:var(--accent-ink);border-radius:10px;font-weight:600}
.mg-code{flex:1;font-family:ui-monospace,Menlo,monospace;letter-spacing:.12em;font-size:calc(1 * var(--mg-fs, 1rem));padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);text-transform:uppercase;min-width:0}
.mg-code:focus{outline:2px solid var(--accent);outline-offset:1px}
.mg-err{color:#b3402f;font-size:calc(.84 * var(--mg-fs, 1rem));margin:8px 0 0;display:none}
.mg-consent{border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-top:14px;background:var(--paper);font-size:calc(.84 * var(--mg-fs, 1rem));color:var(--ink-soft);line-height:1.5}
.mg-consent label{display:flex;gap:9px;align-items:flex-start;margin-top:10px;cursor:pointer;color:var(--ink);font-size:calc(.86 * var(--mg-fs, 1rem))}
.mg-consent input{margin-top:3px;flex:none}
.mg-consent a,.mg-link{color:var(--accent-ink);font-weight:600;cursor:pointer;background:none;border:0;font:inherit;text-decoration:underline;padding:0}
.mg-gatebtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.mg-tiers{display:flex;flex-direction:column;gap:10px}
.mg-tier{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.mg-tier .ic{width:38px;height:38px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:calc(1.15 * var(--mg-fs, 1rem));background:var(--accent-bg);color:var(--accent-ink)}
.mg-tier .ic.b{background:var(--paper);color:var(--ink-soft)}
.mg-tier .t{font-size:calc(.94 * var(--mg-fs, 1rem));font-weight:600}.mg-tier .s{font-size:calc(.8 * var(--mg-fs, 1rem));color:var(--ink-faint)}

/* demo bar */
.mg-demobar{display:flex;align-items:center;gap:12px;background:var(--gold-bg);border:1px solid #EBD9A0;border-radius:12px;padding:11px 14px;margin:0 clamp(16px,3vw,26px) 16px;color:#6b571a;font-size:calc(.86 * var(--mg-fs, 1rem))}
.mg-demobar .mg-btn{flex:none;margin-left:auto}

/* tabs */
.mg-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:14px clamp(16px,3vw,26px) 4px}
.mg-tabs button{font:inherit;font-size:calc(.95 * var(--mg-fs, 1rem));font-weight:500;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 20px;cursor:pointer}
.mg-tabs button.on{background:linear-gradient(135deg,var(--ocean-deep),var(--ocean));border-color:transparent;color:#fff;font-weight:600;box-shadow:0 12px 26px -16px var(--ocean)}

/* tiers glance */
.mg-glance{display:grid;grid-template-columns:1fr 1fr;gap:0}
.mg-panel{padding:6px 24px}.mg-panel:first-child{padding-left:0}.mg-panel:not(:first-child){border-left:1px solid var(--line)}
.mg-panel .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-bg);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:calc(1.15 * var(--mg-fs, 1rem));margin-bottom:10px}
.mg-panel h3{font-family:var(--font-display);font-weight:600;font-size:calc(1.05 * var(--mg-fs, 1rem));margin:0 0 6px}
.mg-panel p{color:var(--ink-soft);font-size:calc(.88 * var(--mg-fs, 1rem));margin:0 0 8px}
.mg-panel .where{font-size:calc(.75 * var(--mg-fs, 1rem));font-weight:600;color:var(--accent-ink)}.mg-panel .where.site{color:var(--ink-faint)}

/* chapters */
.mg-introhead{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.mg-introcover{flex:0 0 130px;height:130px;border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.mg-introcover>div{flex:1}
.mg-introhead h2{font-family:var(--font-display);font-weight:600;font-size:calc(1.35 * var(--mg-fs, 1rem));margin:0 0 6px}
.mg-introhead p{color:var(--ink-soft);font-size:calc(.9 * var(--mg-fs, 1rem));margin:0}
.mg-introbanner{position:relative;width:100%;min-height:210px;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;margin-bottom:18px;display:flex;align-items:flex-end}
.mg-introbanner .scrim{width:100%;padding:20px 22px;background:linear-gradient(to top,rgba(12,28,20,.86),rgba(12,28,20,.35) 55%,rgba(12,28,20,0))}
.mg-introbanner h2{font-family:var(--font-display);font-weight:600;font-size:calc(1.55 * var(--mg-fs, 1rem));line-height:1.2;margin:0 0 6px;color:#fff}
.mg-introbanner p{font-size:calc(.95 * var(--mg-fs, 1rem));margin:0;color:rgba(255,255,255,.92);max-width:640px}
@media (max-width:640px){.mg-introbanner{min-height:170px}.mg-introbanner h2{font-size:calc(1.3 * var(--mg-fs, 1rem))}.mg-introbanner p{font-size:calc(.88 * var(--mg-fs, 1rem))}}
.mg-np{display:flex;align-items:center;gap:12px;background:var(--accent-bg);border-radius:12px;padding:11px 13px;margin-bottom:16px}
.mg-np .np-t{font-size:calc(.85 * var(--mg-fs, 1rem));color:var(--accent-ink);font-weight:600}
.mg-chapters{display:flex;flex-direction:column;gap:6px}
.mg-chap{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--card)}
.mg-chap:hover{border-color:var(--accent)}.mg-chap.on{border-color:var(--accent);background:var(--accent-bg)}
.mg-chap .cn{width:30px;height:30px;border-radius:8px;background:var(--paper);color:var(--ink-soft);font-family:var(--font-display);font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.mg-chap.on .cn{background:var(--accent);color:#fff}
.mg-chap .ct{flex:1;min-width:0}.mg-chap .ctt{font-weight:600;font-size:calc(.95 * var(--mg-fs, 1rem))}.mg-chap .cx{font-size:calc(.78 * var(--mg-fs, 1rem));color:var(--ink-faint);white-space:nowrap}

/* map (Leaflet) */
.mg-maprow{display:grid;grid-template-columns:1.25fr .75fr;gap:0;min-height:520px}
.mg-map{width:100%;height:520px;background:#dfe8e5}
.mg-map .leaflet-container{height:100%;font-family:var(--font-body)}
.mg-mapwrap{position:relative;border-radius:14px;overflow:hidden}
.mg-maplegend{position:absolute;left:12px;bottom:12px;z-index:1000;display:flex;gap:13px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-radius:11px;padding:8px 13px;font-size:calc(.72 * var(--mg-fs,1rem));font-weight:600;color:var(--ink-soft);box-shadow:0 6px 18px rgba(6,40,60,.15)}
.mg-maplegend span{display:flex;align-items:center;gap:5px}
.mg-maplegend i{width:11px;height:11px;border-radius:50%;border:2px solid #fff}
.mg-maplegend i.poi{background:var(--ocean);box-shadow:0 0 0 1px var(--ocean)}
.mg-maplegend i.route{background:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.mg-maplegend i.fav{background:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.mg-scope[data-theme=dark] .mg-maplegend{background:rgba(21,32,35,.85);color:var(--ink-soft)}
.mg-pin-marker{width:22px;height:22px;border-radius:50%;background:var(--card);border:2.5px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center}
.mg-pin-marker::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent)}
.mg-pin-marker.sample{border-color:var(--gold)}.mg-pin-marker.sample::after{background:var(--gold)}
.mg-pin-marker.starred{border-color:var(--fav)}.mg-pin-marker.starred::after{background:var(--fav)}
.mg-pin-marker.active{width:28px;height:28px;border-color:var(--gold);box-shadow:0 2px 9px rgba(0,0,0,.35),0 0 0 4px rgba(224,165,0,.22)}
.mg-pin-marker.active::after{width:9px;height:9px;background:var(--gold)}
.mg-pin-marker.route{width:28px;height:28px;background:var(--gold);border-color:#fff}
.mg-pin-marker.route::after{display:none}
.mg-pin-marker.route span{font-family:var(--font-display);font-weight:700;font-size:calc(.8 * var(--mg-fs, 1rem));color:#fff;line-height:1}
.mg-pin-marker.route.active{box-shadow:0 2px 9px rgba(0,0,0,.4),0 0 0 4px rgba(224,165,0,.30)}
.mg-clear-btn{font:inherit;font-size:calc(.78 * var(--mg-fs, 1rem));font-weight:600;color:var(--ink-faint);background:none;border:0;border-radius:999px;padding:4px 9px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;line-height:1;white-space:nowrap}
.mg-clear-btn:hover{color:var(--hi);background:var(--paper)}
.mg-leaflet-pop .leaflet-popup-content-wrapper{border-radius:14px;box-shadow:0 12px 30px rgba(23,37,43,.20);padding:2px}
.mg-leaflet-pop .leaflet-popup-content{margin:10px 12px;font-family:var(--font-body)}
.mg-mappop .nm{font-family:var(--font-display);font-weight:600;font-size:calc(1.02 * var(--mg-fs, 1rem));color:var(--ink);margin-bottom:8px}
.mg-mappop-fav{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:7px 12px;font:inherit;font-size:calc(.82 * var(--mg-fs, 1rem));font-weight:600;color:var(--ink-soft);cursor:pointer}
.mg-mappop-fav:hover{border-color:var(--fav);color:var(--fav)}
.mg-mappop-fav.on{color:#fff;background:var(--fav);border-color:var(--fav)}
.mg-info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--line);color:var(--ink-soft);font-size:calc(.7 * var(--mg-fs, 1rem));font-weight:700;font-style:normal;cursor:help;margin-left:5px;vertical-align:middle;user-select:none}
.mg-info:hover,.mg-info:focus{background:var(--accent);color:#fff;outline:none}
.mg-tipbubble{position:fixed;z-index:100000;max-width:240px;box-sizing:border-box;background:#0A3542;color:#fff;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:calc(.78 * var(--mg-fs, 1rem));font-weight:500;line-height:1.45;padding:9px 11px;border-radius:9px;box-shadow:0 10px 26px rgba(23,37,43,.28);display:none;pointer-events:none;text-align:left;white-space:normal}
.mg-gmaps-loc{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:calc(.85 * var(--mg-fs, 1rem));color:var(--ink-soft);cursor:pointer}
.mg-gmaps-loc input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.mg-side{border-left:1px solid var(--line);padding:16px;overflow:auto;max-height:520px}
.mg-side .empty{color:var(--ink-faint);font-size:calc(.9 * var(--mg-fs, 1rem));padding:20px 4px;text-align:center}
.mg-detail .dn{font-family:var(--font-display);font-weight:600;font-size:calc(1.15 * var(--mg-fs, 1rem));margin:0}
.mg-detail .dd{font-size:calc(.9 * var(--mg-fs, 1rem));color:var(--ink-soft);line-height:1.6;margin:8px 0 12px}
.mg-imgs{display:flex;gap:7px;overflow-x:auto;margin-bottom:12px}
.mg-imgs img{width:120px;height:88px;object-fit:cover;border-radius:8px;flex:none}
.mg-audio-row{display:flex;align-items:center;gap:11px;background:var(--paper);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.mg-audio-row .lbl{font-size:calc(.85 * var(--mg-fs, 1rem));color:var(--ink);font-weight:600}
.mg-audio-row .sub{font-size:calc(.76 * var(--mg-fs, 1rem));color:var(--ink-faint)}
.mg-locked{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px dashed var(--line);border-radius:10px;padding:11px;margin-bottom:10px;color:var(--ink-soft);font-size:calc(.84 * var(--mg-fs, 1rem))}
.mg-play{width:38px;height:38px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;font-size:calc(1 * var(--mg-fs, 1rem))}
.mg-play.sm{width:32px;height:32px}
.mg-play[disabled]{background:var(--line);cursor:not-allowed}

/* now-playing bar */
.mg-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;width:min(560px,92vw);background:linear-gradient(120deg,#0a3542,#0c4b52);color:#fff;border-radius:14px;padding:11px 14px;display:none;align-items:center;gap:12px;z-index:1000;box-shadow:0 14px 34px rgba(0,0,0,.3)}
.mg-bar.on{display:flex}
.mg-bar .bt{flex:1;min-width:0}.mg-bar .bt .n{font-size:calc(.9 * var(--mg-fs, 1rem));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-bar .bt .p{font-size:calc(.75 * var(--mg-fs, 1rem));color:#a9d6dd}
.mg-bar .pbtn{width:40px;height:40px;border-radius:50%;border:0;background:var(--turq);color:#fff;cursor:pointer;flex:none;font-size:calc(1.05 * var(--mg-fs, 1rem))}
.mg-bar .cbtn{background:none;border:0;color:#a9d6dd;cursor:pointer;font-size:calc(1.2 * var(--mg-fs, 1rem));flex:none}
.mg-bprog{height:4px;background:rgba(255,255,255,.2);border-radius:999px;margin-top:6px;overflow:hidden}
.mg-bprog>i{display:block;height:100%;width:0;background:var(--turq);border-radius:999px}

/* modal + toast */
.mg-modal{position:fixed;inset:0;background:rgba(15,37,33,.5);display:none;align-items:center;justify-content:center;z-index:1200;padding:18px}
.mg-modal.on{display:flex}
.mg-modalcard{background:var(--card);border-radius:16px;max-width:560px;width:100%;max-height:82vh;overflow:auto;padding:24px}
.mg-modalcard h2{font-family:var(--font-display);font-weight:600;font-size:calc(1.35 * var(--mg-fs, 1rem));margin:0 0 12px}
.mg-modalcard h3{font-size:calc(1 * var(--mg-fs, 1rem));margin:16px 0 6px}
.mg-modalcard p,.mg-modalcard li{color:var(--ink-soft);font-size:calc(.9 * var(--mg-fs, 1rem));line-height:1.6}
.mg-modalcard ul{padding-left:20px}
.mg-modalclose{float:right;border:0;background:var(--paper);border-radius:8px;width:34px;height:34px;cursor:pointer;color:var(--ink-soft);font-size:calc(1.05 * var(--mg-fs, 1rem))}
.mg-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:14px clamp(16px,3vw,26px);color:var(--ink-faint);font-size:calc(.82 * var(--mg-fs, 1rem));border-top:1px solid var(--line)}
.mg-foot .links{display:flex;gap:14px;flex-wrap:wrap}
.mg-toast{position:fixed;left:50%;bottom:74px;transform:translateX(-50%);background:#0a3542;color:#fff;font-size:calc(.86 * var(--mg-fs, 1rem));padding:10px 16px;border-radius:999px;opacity:0;transition:opacity .25s;z-index:1300;pointer-events:none;max-width:90vw;text-align:center}
.mg-toast.on{opacity:1}

/* dark */
.mg-scope[data-theme=dark]{--paper:#0E1719;--card:#152023;--ink:#E8F0F0;--ink-soft:#9DB4B8;--ink-faint:#6E858A;--line:#243237;--brand:#7FD9DE;--accent:#20B3BA;--accent-ink:#5FD0D6;--accent-bg:#123037;--hi:#E8996A;--gold:#E0B24A;--gold-bg:#2A2412;--fav:#F2765E;--ocean:#20B3BA;--ocean-deep:#0E6B78;--ocean-bg:#12343A;--ocean-ink:#8FE0E4;--turq:#22C2C7;--coral:#F2765E;--sand-bg:#221E14;--glass:rgba(21,32,35,.78);--glass-line:rgba(255,255,255,.08)}

/* responsive */
@media (max-width:820px){
  .mg-gate{grid-template-columns:1fr;gap:16px}
  .mg-glance{grid-template-columns:1fr}.mg-panel{padding:14px 0}.mg-panel:first-child{padding-top:0}.mg-panel:not(:first-child){border-left:0;border-top:1px solid var(--line)}
  .mg-maprow{grid-template-columns:1fr;min-height:0}
  .mg-map{height:340px}
  .mg-side{border-left:0;border-top:1px solid var(--line);max-height:none}
  .mg-introhead{flex-direction:column;align-items:flex-start}.mg-introcover{flex-basis:auto;width:100%;height:110px}
}

/* ===== 5b: tervező + helyszíni ===== */
.mg-seg2{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px;margin:4px 0 14px}
.mg-seg2 button{flex:1;font:inherit;font-size:calc(.84 * var(--mg-fs, 1rem));border:0;background:transparent;color:var(--ink-soft);padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:600}
.mg-seg2 button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(23,37,43,.12)}
.mg-side h3{font-family:var(--font-display);font-weight:600;font-size:calc(1.02 * var(--mg-fs, 1rem));margin:0 0 8px}
.mg-presets{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.mg-chip{font:inherit;font-size:calc(.84 * var(--mg-fs, 1rem));font-weight:500;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer}
.mg-chip:hover{border-color:var(--accent)}
.mg-stops{display:flex;flex-direction:column;margin-bottom:10px}
.mg-stop{display:flex;align-items:center;gap:9px;font-size:calc(.9 * var(--mg-fs, 1rem));padding:7px 0;border-bottom:1px solid var(--line)}
.mg-stop:last-child{border-bottom:0}.mg-stop .nm{flex:1;min-width:0}.mg-stop .tm{font-size:calc(.75 * var(--mg-fs, 1rem));color:var(--ink-faint);white-space:nowrap}
.mg-stop .rm{color:var(--ink-faint);text-decoration:none;font-size:calc(1 * var(--mg-fs, 1rem))}
.mg-num{width:19px;height:19px;border-radius:50%;background:var(--gold);color:#fff;font-size:calc(.68 * var(--mg-fs, 1rem));font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.mg-timesum{font-size:calc(.82 * var(--mg-fs, 1rem));color:var(--ink-soft);background:var(--accent-bg);border-radius:10px;padding:9px 12px;margin-bottom:12px}
.mg-timesum b{color:var(--accent-ink)}
.mg-actions{display:flex;gap:8px;flex-wrap:wrap}
.mg-btn.sm{padding:8px 12px;font-size:calc(.82 * var(--mg-fs, 1rem))}
.mg-empty{color:var(--ink-faint);font-size:calc(.86 * var(--mg-fs, 1rem))}
.mg-starbtn{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:9px 12px;cursor:pointer;font:inherit;font-size:calc(.82 * var(--mg-fs, 1rem));font-weight:600;color:var(--ink-soft);flex:none}
.mg-starbtn .si{color:var(--ink-faint);font-size:calc(1 * var(--mg-fs, 1rem))}
.mg-starbtn.on{color:#8a6d1a;border-color:var(--gold);background:var(--gold-bg)}.mg-starbtn.on .si{color:var(--gold)}
.mg-fav{border:1px solid var(--line);border-radius:16px;padding:15px;margin-top:16px;background:linear-gradient(160deg,var(--ocean-bg),var(--sand-bg))}
.mg-fav h3{margin:0 0 4px}.mg-fav p{font-size:calc(.84 * var(--mg-fs, 1rem));color:var(--ink-soft);margin:0 0 11px}
.mg-reco{border:1px solid var(--accent);border-radius:12px;padding:13px;margin-top:12px;background:var(--card)}
.mg-reco .rh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.mg-reco .rh h3{margin:0;font-size:calc(.98 * var(--mg-fs, 1rem))}
.mg-day{border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin-bottom:9px}
.mg-day .dhd{display:flex;justify-content:space-between;margin-bottom:6px}.mg-day .dn{font-weight:600;font-size:calc(.9 * var(--mg-fs, 1rem))}.mg-day .dt{font-size:calc(.76 * var(--mg-fs, 1rem));color:var(--accent-ink);font-weight:600}
.mg-day .dl{font-size:calc(.84 * var(--mg-fs, 1rem));color:var(--ink-soft)}
.mg-saved{border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin-bottom:9px;display:flex;align-items:center;gap:12px}
.mg-saved .si{width:32px;height:32px;border-radius:9px;background:var(--accent-bg);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex:none;font-family:var(--font-display);font-weight:600}
.mg-saved .sn{font-weight:600;font-size:calc(.94 * var(--mg-fs, 1rem))}.mg-saved .ss{font-size:calc(.77 * var(--mg-fs, 1rem));color:var(--ink-faint)}
.mg-saved .sa{display:flex;gap:4px;flex:none}
.mg-iconbtn{border:1px solid var(--line);background:var(--card);border-radius:8px;width:30px;height:30px;cursor:pointer;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:calc(.9 * var(--mg-fs, 1rem))}
.mg-iconbtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.mg-planlock{position:relative;border:1px solid var(--line);border-radius:16px;padding:24px 18px;text-align:center;background:linear-gradient(160deg,var(--ocean-bg),var(--sand-bg));margin-top:8px}
.mg-planlock .ic{font-size:calc(1.6 * var(--mg-fs, 1rem))}.mg-planlock h4{font-family:var(--font-display);font-weight:600;font-size:calc(1.05 * var(--mg-fs, 1rem));margin:8px 0 6px}
.mg-planlock p{font-size:calc(.85 * var(--mg-fs, 1rem));color:var(--ink-soft);margin:0 0 12px}
.mg-geostatus{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:14px;font-size:calc(.9 * var(--mg-fs, 1rem))}
.mg-toggle2{display:flex;align-items:center;justify-content:space-between;font-size:calc(.92 * var(--mg-fs, 1rem))}
.mg-sw{width:40px;height:23px;border-radius:999px;background:var(--accent);position:relative;cursor:pointer;flex:none;border:0}
.mg-sw::after{content:'';position:absolute;top:2px;left:19px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s}
.mg-sw[aria-pressed=false]{background:var(--line)}.mg-sw[aria-pressed=false]::after{left:2px}
.mg-note2{font-size:calc(.78 * var(--mg-fs, 1rem));color:var(--ink-faint);line-height:1.5;margin-top:14px}

/* ===== fiók-alapú belépés (7b) ===== */
.mg-acct{display:flex;align-items:center;gap:8px;font-size:calc(.82 * var(--mg-fs, 1rem));color:var(--ink-soft)}
.mg-acct .em{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-acct a{color:var(--accent-ink);cursor:pointer;text-decoration:underline}
.mg-authwrap{max-width:440px;margin:0 auto}
.mg-input{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:calc(1 * var(--mg-fs, 1rem));box-sizing:border-box}
.mg-input:focus{outline:2px solid var(--accent);outline-offset:1px}
.mg-oauth{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:6px}
.mg-oauth .mg-oauthbtn{flex:1;min-width:130px}
.mg-oauthbtn{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:11px;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.mg-oauthbtn[disabled]{opacity:.55;cursor:not-allowed}
.mg-oauthbtn .soon{font-size:calc(.7 * var(--mg-fs, 1rem));color:var(--ink-faint);font-weight:600}
.mg-or{display:flex;align-items:center;gap:10px;color:var(--ink-faint);font-size:calc(.8 * var(--mg-fs, 1rem));margin:14px 0}
.mg-or::before,.mg-or::after{content:'';flex:1;height:1px;background:var(--line)}
.mg-swapdev{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:8px}
.mg-swapdev .d{flex:1}.mg-swapdev .dt{font-weight:600;font-size:calc(.9 * var(--mg-fs, 1rem))}.mg-swapdev .ds{font-size:calc(.77 * var(--mg-fs, 1rem));color:var(--ink-faint)}
.mg-authnote{font-size:calc(.82 * var(--mg-fs, 1rem));color:var(--ink-faint);line-height:1.5;margin-top:12px}

.mg-cardtop-t{min-width:0}
.mg-tabview{min-width:0}

/* ===== fejléc telepítés-CTA (fizetés után is jól látható) ===== */
.mg-install-cta{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--accent);background:var(--accent-bg);color:var(--accent-ink);border-radius:999px;padding:6px 13px;font:inherit;font-size:calc(.82 * var(--mg-fs, 1rem));font-weight:600;cursor:pointer;line-height:1}
.mg-install-cta:hover{background:var(--accent);color:#fff}
.mg-install-cta svg{flex:none}
@media (max-width:560px){.mg-install-cta span:last-child{display:none}.mg-install-cta{padding:7px 9px}}

/* ===== Hangoskönyv — playlist nézet (dizájn) ===== */
.mg-pl-hero{position:relative;overflow:hidden;border-radius:22px;padding:clamp(20px,4vw,38px);margin-bottom:18px;background:linear-gradient(120deg,var(--ocean-deep),var(--ocean) 62%,var(--turq));box-shadow:0 26px 60px -34px var(--ocean)}
.mg-pl-ovl{position:absolute;inset:0;opacity:.5;pointer-events:none;background:radial-gradient(220px 100px at 90% 0%,rgba(255,255,255,.16),transparent 70%)}
.mg-pl-palm{position:absolute;right:-16px;bottom:-14px;width:clamp(150px,22vw,215px);z-index:1;pointer-events:none;transform-origin:88% 100%;animation:mgSwaySlow 8s ease-in-out infinite}
.mg-pl-palm img{display:block;width:100%;height:auto;transform:scaleX(-1);filter:brightness(0);opacity:.24}
.mg-pl-row{position:relative;z-index:2;display:flex;gap:clamp(16px,3vw,26px);align-items:flex-end;flex-wrap:wrap}
.mg-pl-cover{flex:0 0 auto;position:relative;width:clamp(116px,22vw,168px);height:clamp(116px,22vw,168px);border-radius:16px;overflow:hidden;box-shadow:0 20px 44px -18px rgba(0,0,0,.6);background:repeating-linear-gradient(45deg,#0c4b45,#0c4b45 10px,#0e5750 10px,#0e5750 20px);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85)}
.mg-pl-cover img{width:100%;height:100%;object-fit:cover;display:block}
.mg-pl-covlabel{position:absolute;top:8px;left:9px;font-size:calc(.62 * var(--mg-fs,1rem));letter-spacing:.06em;color:rgba(255,255,255,.65);font-weight:600}
.mg-pl-grad{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.mg-pl-meta{flex:1;min-width:200px}
.mg-pl-kicker{font-size:calc(.72 * var(--mg-fs, 1rem));letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78);font-weight:700}
.mg-pl-title{font-family:var(--font-display);font-weight:600;color:#fff;font-size:clamp(1.55rem,4.4vw,2.5rem);line-height:1.05;margin:6px 0 8px}
.mg-pl-sub{color:rgba(255,255,255,.86);font-size:calc(.92 * var(--mg-fs, 1rem));line-height:1.5;margin:0 0 14px;max-width:48ch}
.mg-pl-stat{color:rgba(255,255,255,.82);font-size:calc(.82 * var(--mg-fs, 1rem));font-weight:600}
.mg-pl-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.mg-pl-play{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:999px;background:#fff;color:var(--ocean-deep);font:inherit;font-weight:700;font-size:calc(.98 * var(--mg-fs, 1rem));padding:12px 24px 12px 20px;cursor:pointer;box-shadow:0 12px 26px -14px rgba(0,0,0,.5)}
.mg-pl-play:hover{background:#eafbfb}
.mg-pl-play[disabled]{background:rgba(255,255,255,.5);color:var(--ocean-deep);cursor:not-allowed;box-shadow:none}
.mg-pl-play .ic{font-size:calc(.9 * var(--mg-fs, 1rem))}
.mg-pl-ghost{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-weight:600;font-size:calc(.86 * var(--mg-fs,1rem));padding:10px 16px;border-radius:999px;cursor:pointer}
.mg-pl-ghost:hover{background:rgba(255,255,255,.22)}

/* most szól / legutóbb hallgatva */
.mg-np{display:flex;align-items:center;gap:12px;background:var(--ocean-bg);border-radius:14px;padding:12px 15px;margin:0 0 16px}
.mg-np .np-t{font-size:calc(.86 * var(--mg-fs, 1rem));color:var(--ocean-deep);font-weight:600}
.mg-np .np-t b{color:var(--ocean-ink)}
.mg-eq{display:flex;gap:3px;align-items:flex-end;height:22px;flex:none}
.mg-eq i{width:3px;height:100%;background:var(--ocean);border-radius:2px;transform-origin:bottom;display:block;animation:mgEq .9s ease-in-out infinite}
.mg-eq i:nth-child(2){animation-duration:.7s}.mg-eq i:nth-child(3){animation-duration:1.1s}
@keyframes mgEq{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}

/* track lista (dizájn) */
.mg-tracks{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.mg-track{display:flex;align-items:center;gap:13px;padding:13px 15px;cursor:pointer}
.mg-track+.mg-track{border-top:1px solid var(--line)}
.mg-track:hover{background:var(--ocean-bg);border-top-color:transparent}
.mg-track .tr-n{flex:none;width:26px;text-align:center;font-family:var(--font-body);font-weight:600;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.mg-track .tr-play{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink-faint);font-size:calc(.82 * var(--mg-fs,1rem))}
.mg-track.free .tr-play,.mg-track.ok .tr-play,.mg-track.playing .tr-play{background:var(--ocean);color:#fff}
.mg-track .tr-main{flex:1;min-width:0}
.mg-track .tr-title{display:block;font-family:var(--font-display);font-weight:600;font-size:calc(1.02 * var(--mg-fs, 1rem));color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-track .tr-place{display:block;font-size:calc(.8 * var(--mg-fs,1rem));color:var(--ink-faint)}
.mg-track .tr-tag{flex:none;font-size:calc(.72 * var(--mg-fs,1rem));font-weight:700;padding:3px 9px;border-radius:999px;background:var(--ocean-bg);color:var(--ocean-ink)}
.mg-track .tr-tag.free{background:var(--ocean-bg);color:var(--ocean-ink)}
.mg-track .tr-tag.now{background:var(--ocean);color:#fff}
.mg-track .tr-tag.lock{background:var(--gold-bg);color:#8a6a12}
.mg-track .tr-dur{flex:none;font-size:calc(.8 * var(--mg-fs,1rem));color:var(--ink-faint);font-variant-numeric:tabular-nums}
.mg-track.playing,.mg-track.sel{background:var(--ocean-bg)}
.mg-track.playing .tr-title{color:var(--ocean-ink)}
.mg-track.locked .tr-title{color:var(--ink-soft)}
.mg-plnote{font-size:calc(.8 * var(--mg-fs,1rem));color:var(--ink-faint);margin:12px 2px 0}

.mg-dl-area{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.mg-dl-area .mg-bprog{background:var(--line)}
.mg-dl-area .mg-bprog>i{background:var(--accent)}

@media (max-width:640px){
  .mg-pl-row{flex-direction:column;align-items:flex-start;gap:14px}
  .mg-pl-cover{width:118px;height:118px;flex-basis:auto}
  .mg-pl-title{font-size:clamp(1.4rem,7vw,1.85rem)}
}

/* =====================================================================
   NAPSZAK-JELENET (hero) — a dizájnterv „napszak-motorja”, automata
   a készülék órájából vezérelve (nincs kézi kapcsoló). A .mg-scene
   CSS-változóit a app.js scene-logikája állítja be.
   ===================================================================== */
@keyframes mgShimmer{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@keyframes mgShimmer2{from{transform:translateX(0)}to{transform:translateX(-33%)}}
@keyframes mgSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes mgSwaySlow{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.8deg)}}
@keyframes mgGlow{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.05);opacity:1}}
@keyframes mgTwinkle{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes mgFireGlow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.1)}}
@keyframes mgFlame{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(.93,1.09) skewX(-3.5deg)}50%{transform:scale(1.05,.93) skewX(2.5deg)}75%{transform:scale(.97,1.05) skewX(-1.5deg)}}
@keyframes mgFloat{from{transform:translateX(-30px)}to{transform:translateX(60px)}}
@keyframes mgRise{from{transform:translateY(6px);opacity:.9}to{transform:translateY(-46px);opacity:0}}

.mg-scene{
  position:relative;overflow:hidden;
  min-height:clamp(360px,50vh,500px);
  display:flex;flex-direction:column;justify-content:flex-start;
  --hz:36%;--sh:15%;
  /* alapértékek (nappal) — a JS felülírja */
  --sky:linear-gradient(180deg,#5FC4DD 0%,#8FDCE8 40%,#CDEFF2 72%,#E9F7F3 100%);
  --o1:#16ADB6;--o2:#0A6B7C;--oaq:#5FD3D6;--celglow:rgba(255,238,180,.95);--celx:75%;
  --cloud-op:1;--star-op:0;--sand-op:.85;--fire-op:0;--reflect:rgba(255,245,205,.5);--sand:#F0E3C6;--sand-lo:#EAD9B4;
  --palm-bright:none;--bird-op:1;--isle:rgba(48,118,80,.55);--isle-hi:rgba(118,158,132,.42);--isle-lo:rgba(22,76,48,.72);--birdc:#ffffff;--birdtip:rgba(40,52,64,.85);--odeep:#0D5E80;--horizon:rgba(240,252,255,.6);--glit:rgba(255,255,250,.98);--glit-top:22%;--glit-op:.8;--wave-op:1;--reef-op:1;--caustic-op:.8;--celc:78%;--sheen:rgba(255,255,255,.3);--sand-shade:rgba(60,44,24,.10);--cloudc:#ffffff;--sail:#ffffff;--sail-sh:rgba(206,218,226,.95);--hull:#34261c;--boat-op:1;--light-op:0;--haze:rgba(235,250,252,.45);--foam:rgba(255,255,255,.85);
}
.mg-scene .mg-sky{position:absolute;inset:0;background:var(--sky);transition:background 1s ease}
.mg-scene .mg-clouds{position:absolute;top:9%;left:-6%;right:-6%;height:120px;opacity:var(--cloud-op);transition:opacity 1s;pointer-events:none;
  background:var(--cloudc);transition:opacity 1s,background 1s;
  -webkit-mask-image:radial-gradient(64px 17px at 16% 52%,rgba(0,0,0,.80),transparent 72%),
   radial-gradient(42px 22px at 21% 44%,rgba(0,0,0,.72),transparent 72%),
   radial-gradient(34px 15px at 12% 47%,rgba(0,0,0,.60),transparent 74%),
   radial-gradient(78px 18px at 60% 66%,rgba(0,0,0,.62),transparent 74%),
   radial-gradient(48px 24px at 65% 57%,rgba(0,0,0,.55),transparent 74%),
   radial-gradient(56px 14px at 88% 34%,rgba(0,0,0,.58),transparent 74%),
   radial-gradient(34px 18px at 92% 28%,rgba(0,0,0,.48),transparent 74%);
  mask-image:radial-gradient(64px 17px at 16% 52%,rgba(0,0,0,.80),transparent 72%),
   radial-gradient(42px 22px at 21% 44%,rgba(0,0,0,.72),transparent 72%),
   radial-gradient(34px 15px at 12% 47%,rgba(0,0,0,.60),transparent 74%),
   radial-gradient(78px 18px at 60% 66%,rgba(0,0,0,.62),transparent 74%),
   radial-gradient(48px 24px at 65% 57%,rgba(0,0,0,.55),transparent 74%),
   radial-gradient(56px 14px at 88% 34%,rgba(0,0,0,.58),transparent 74%),
   radial-gradient(34px 18px at 92% 28%,rgba(0,0,0,.48),transparent 74%);
  animation:mgFloat 34s ease-in-out infinite alternate;filter:blur(.4px)}
.mg-scene .mg-clouds2{position:absolute;top:4%;left:-8%;right:-8%;height:80px;opacity:calc(var(--cloud-op) * .55);transition:opacity 1s;pointer-events:none;
  background:var(--cloudc);transition:opacity 1s,background 1s;
  -webkit-mask-image:radial-gradient(90px 12px at 34% 50%,rgba(0,0,0,.5),transparent 76%),
   radial-gradient(70px 10px at 74% 40%,rgba(0,0,0,.42),transparent 76%);
  mask-image:radial-gradient(90px 12px at 34% 50%,rgba(0,0,0,.5),transparent 76%),
   radial-gradient(70px 10px at 74% 40%,rgba(0,0,0,.42),transparent 76%);
  animation:mgFloat 58s ease-in-out infinite alternate-reverse;filter:blur(1px)}
.mg-scene .mg-haze{position:absolute;left:0;right:0;bottom:var(--hz);height:70px;background:linear-gradient(180deg,transparent,var(--haze));transition:background 1s;pointer-events:none}
.mg-scene .mg-isle{position:absolute;left:6%;bottom:calc(var(--hz) - .6%);width:clamp(130px,24vw,290px);height:clamp(24px,4.6vw,54px);transition:background 1s;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,var(--isle-hi) 0%,var(--isle) 46%,var(--isle-lo) 100%);
  clip-path:polygon(0 100%,9% 70%,17% 82%,27% 44%,34% 60%,44% 26%,53% 58%,62% 40%,72% 66%,82% 52%,92% 74%,100% 100%)}
.mg-scene .mg-isle::after{content:'';position:absolute;left:-8%;right:-8%;bottom:0;height:72%;pointer-events:none;
  background:
   radial-gradient(circle at 5px 6px,var(--isle-lo) 3.4px,transparent 4.6px) repeat-x,
   radial-gradient(circle at 4px 10px,var(--isle-lo) 2.6px,transparent 3.8px) repeat-x,
   radial-gradient(circle at 8px 14px,var(--isle-lo) 3.1px,transparent 4.4px) repeat-x,
   linear-gradient(180deg,transparent 0,var(--isle-lo) 58%);
  background-size:11px 100%,7px 100%,17px 100%,100% 100%;
  filter:blur(1px);opacity:.9}
.mg-scene .mg-isle::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,rgba(255,255,255,.10) 0 18%,transparent 34% 56%,rgba(0,0,0,.08) 72%,transparent)}
.mg-scene .mg-isle.r{left:auto;right:9%;width:clamp(80px,14vw,170px);height:clamp(14px,2.6vw,30px);opacity:.7;
  clip-path:polygon(0 100%,14% 62%,26% 80%,40% 40%,54% 68%,68% 48%,84% 76%,100% 100%)}
.mg-scene .mg-stars{position:absolute;inset:0;opacity:var(--star-op);transition:opacity 1s}
.mg-scene .mg-shoot{position:absolute;top:7%;left:4%;width:clamp(70px,9vw,120px);height:1.6px;border-radius:2px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));transform-origin:right center;animation:mgShoot 43s linear infinite;animation-delay:-14s}
@keyframes mgShoot{0%,95.4%{opacity:0;transform:translate(0,0) rotate(24deg)}96.2%{opacity:calc(var(--star-op) * .9)}98.6%{opacity:0;transform:translate(210px,94px) rotate(24deg)}100%{opacity:0;transform:translate(210px,94px) rotate(24deg)}}
.mg-scene .mg-stars i{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 4px #fff;display:block}
.mg-scene .mg-celestial{position:absolute;border-radius:50%;transition:left 1s,top 1s,width 1s,height 1s,background 1s,box-shadow 1s;z-index:0}
.mg-scene .mg-celestial span{position:absolute;inset:-34px;border-radius:50%;background:radial-gradient(circle,var(--celglow),transparent 66%);animation:mgGlow 6s ease-in-out infinite;opacity:.7}
.mg-scene .mg-bird{position:absolute;top:18%;left:-120px;width:clamp(30px,4.4vw,56px);color:var(--birdc);z-index:2;opacity:0;pointer-events:none;margin-top:var(--bird-dy,0px);animation:mgBirdPath 54s linear infinite}
.mg-scene .mg-bird svg{display:block;width:100%;filter:drop-shadow(0 1px 1.6px rgba(12,42,62,.34))}
.mg-scene .mg-bird .tip{fill:var(--birdtip)}
.mg-scene .mg-bird .wg{transform-box:fill-box;transform-origin:center;animation:mgBirdFlap 3.6s ease-in-out infinite}
.mg-scene .mg-bird.b{margin-left:-52px;margin-top:calc(var(--bird-dy,0px) + 30px);transform:scale(.82);visibility:hidden}
.mg-scene .mg-bird.b.rtl{margin-left:52px}
.mg-scene .mg-bird.rtl svg{transform:scaleX(-1)}
.mg-scene .mg-bird .bank{transform-box:fill-box;transform-origin:center;animation:mgBank 11s ease-in-out infinite}
@keyframes mgBank{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3.5deg)}}
.mg-scene .mg-bird.b .wg{animation-duration:4.1s;animation-delay:-1.3s}
@keyframes mgBirdFlap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.82)}}
@keyframes mgBirdPath{
  0%{left:-120px;top:26%;opacity:0}
  2%{opacity:var(--bird-op)}
  10%{top:17%}
  18%{top:23%}
  26%{top:14%}
  31%{left:calc(100% + 120px);top:19%;opacity:var(--bird-op)}
  32%{left:calc(100% + 120px);opacity:0}
  100%{left:calc(100% + 120px);top:19%;opacity:0}
}
.mg-scene .mg-ocean{position:absolute;left:0;right:0;bottom:calc(var(--sh) - 1%);height:calc(var(--hz) - var(--sh) + 1%);overflow:hidden;z-index:0;transition:background 1s ease;
  background:linear-gradient(180deg,var(--o2) 0%,var(--odeep) 27%,var(--o1) 37%,var(--oaq) 100%)}
.mg-scene .mg-ocean::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--horizon) 14%,var(--horizon) 86%,transparent);z-index:6}
.mg-scene .mg-ocean::after{content:'';position:absolute;left:0;right:0;top:0;height:30%;pointer-events:none;background:linear-gradient(180deg,rgba(0,14,26,.18),transparent)}
/* hegyek tükörképe a horizont alatt */
.mg-scene .mg-ocean .isleref{position:absolute;top:1px;left:6%;width:clamp(130px,24vw,290px);height:clamp(12px,2.3vw,27px);pointer-events:none;
  background:linear-gradient(180deg,var(--isle-hi),var(--isle-lo));clip-path:polygon(0 100%,9% 70%,17% 82%,27% 44%,34% 60%,44% 26%,53% 58%,62% 40%,72% 66%,82% 52%,92% 74%,100% 100%);transform:scaleY(-1);opacity:.26;
  -webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent);transition:background 1s}
.mg-scene .mg-ocean .isleref.r{left:auto;right:9%;width:clamp(80px,14vw,170px);height:clamp(7px,1.3vw,15px);clip-path:polygon(0 100%,14% 62%,26% 80%,40% 40%,54% 68%,68% 48%,84% 76%,100% 100%);opacity:.18}
/* lágy fényoszlop a nap/hold alatt */
.mg-scene .mg-reflect{position:absolute;top:var(--glit-top);bottom:0;left:var(--celc);width:clamp(120px,19%,230px);transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 50% 70% at 50% 0%,var(--reflect),transparent 74%);filter:blur(8px);opacity:.9;transition:left 1s,top 1s;animation:mgReflPulse 7s ease-in-out infinite}
@keyframes mgReflPulse{0%,100%{opacity:.78}50%{opacity:.95}}
/* zátony: hullámtörés fehér tajtéka */
.mg-scene .mg-ocean .reefglow{position:absolute;left:0;right:0;top:27.5%;height:14px;pointer-events:none;opacity:var(--reef-op);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.3),transparent);filter:blur(3px)}
.mg-scene .mg-ocean .reef{position:absolute;left:0;top:30%;height:10px;width:calc(100% + 140px);pointer-events:none;opacity:calc(var(--reef-op) * .9);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='10'%3E%3Cg fill='white'%3E%3Cellipse cx='9' cy='5.2' rx='7' ry='1.6' opacity='.7'/%3E%3Cellipse cx='22' cy='4.6' rx='4' ry='1.1' opacity='.45'/%3E%3Cellipse cx='41' cy='5' rx='12' ry='1.9' opacity='.75'/%3E%3Cellipse cx='58' cy='5.6' rx='3.5' ry='1' opacity='.4'/%3E%3Cellipse cx='71' cy='4.8' rx='8' ry='1.5' opacity='.6'/%3E%3Cellipse cx='94' cy='5.2' rx='14' ry='2' opacity='.72'/%3E%3Cellipse cx='115' cy='5.6' rx='5' ry='1.2' opacity='.42'/%3E%3Cellipse cx='129' cy='4.9' rx='8' ry='1.6' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") repeat-x;background-size:140px 10px;filter:blur(1.1px);animation:mgReef 28s linear infinite}
.mg-scene .mg-ocean .reef.b{top:32.6%;background-position:66px 0;opacity:calc(var(--reef-op) * .6);animation:mgReef 21s linear infinite reverse,mgBreak 6.5s ease-in-out infinite}
@keyframes mgReef{to{transform:translateX(-140px)}}
@keyframes mgBreak{0%,100%{opacity:calc(var(--reef-op) * .2)}50%{opacity:calc(var(--reef-op) * .75)}}
/* hullámsorok perspektívában (távol: sűrű, apró – közel: nagyobb, ritkább) */
.mg-scene .mg-waves{position:absolute;inset:0;opacity:var(--wave-op);pointer-events:none;transition:opacity 1s}
.mg-scene .mg-waves .wv{position:absolute;left:0;background-repeat:repeat-x;will-change:transform;filter:blur(.35px)}
.mg-scene .mg-waves .a1{top:7%;height:6px;width:calc(100% + 90px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='6'%3E%3Cg fill='none' stroke='white' stroke-linecap='round'%3E%3Cpath d='M6 3.6 Q15 2.6 26 3.6' stroke-width='.9' opacity='.42'/%3E%3Cpath d='M52 3.2 Q58 2.5 66 3.2' stroke-width='.7' opacity='.28'/%3E%3C/g%3E%3C/svg%3E");background-size:90px 6px;animation:mgWvA 16s linear infinite}
.mg-scene .mg-waves .a2{top:18%;height:6px;width:calc(100% + 90px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='6'%3E%3Cg fill='none' stroke='white' stroke-linecap='round'%3E%3Cpath d='M6 3.6 Q15 2.6 26 3.6' stroke-width='.9' opacity='.42'/%3E%3Cpath d='M52 3.2 Q58 2.5 66 3.2' stroke-width='.7' opacity='.28'/%3E%3C/g%3E%3C/svg%3E");background-size:90px 6px;background-position:44px 0;animation:mgWvA 12s linear infinite;opacity:.8}
.mg-scene .mg-waves .b1{top:45%;height:10px;width:calc(100% + 160px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='10'%3E%3Cg fill='none' stroke='white' stroke-linecap='round'%3E%3Cpath d='M8 6 Q26 4.2 46 6' stroke-width='1.2' opacity='.38'/%3E%3Cpath d='M84 5.4 Q97 4 112 5.4' stroke-width='1' opacity='.28'/%3E%3Cpath d='M131 6.6 Q138 5.7 146 6.6' stroke-width='.8' opacity='.22'/%3E%3C/g%3E%3C/svg%3E");background-size:160px 10px;animation:mgWvB 18s linear infinite}
.mg-scene .mg-waves .b2{top:59%;height:10px;width:calc(100% + 160px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='10'%3E%3Cg fill='none' stroke='white' stroke-linecap='round'%3E%3Cpath d='M8 6 Q26 4.2 46 6' stroke-width='1.2' opacity='.38'/%3E%3Cpath d='M84 5.4 Q97 4 112 5.4' stroke-width='1' opacity='.28'/%3E%3Cpath d='M131 6.6 Q138 5.7 146 6.6' stroke-width='.8' opacity='.22'/%3E%3C/g%3E%3C/svg%3E");background-size:160px 10px;background-position:72px 0;animation:mgWvB 14s linear infinite;opacity:.85}
.mg-scene .mg-waves .c1{top:72%;height:16px;width:calc(100% + 260px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='16'%3E%3Cg fill='none' stroke='white' stroke-linecap='round'%3E%3Cpath d='M10 9 Q40 6 74 9' stroke-width='1.6' opacity='.34'/%3E%3Cpath d='M118 8.4 Q140 6.2 164 8.4' stroke-width='1.3' opacity='.27'/%3E%3Cpath d='M198 9.6 Q212 8 228 9.6' stroke-width='1.1' opacity='.22'/%3E%3C/g%3E%3C/svg%3E");background-size:260px 16px;animation:mgWvC 22s linear infinite}
.mg-scene .mg-waves .c2{top:85%;height:16px;width:calc(100% + 260px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='16'%3E%3Cg fill='none' stroke='white' stroke-linecap='round'%3E%3Cpath d='M10 9 Q40 6 74 9' stroke-width='1.6' opacity='.34'/%3E%3Cpath d='M118 8.4 Q140 6.2 164 8.4' stroke-width='1.3' opacity='.27'/%3E%3Cpath d='M198 9.6 Q212 8 228 9.6' stroke-width='1.1' opacity='.22'/%3E%3C/g%3E%3C/svg%3E");background-size:260px 16px;background-position:118px 0;animation:mgWvC 17s linear infinite;opacity:.9}
@keyframes mgWvA{to{transform:translateX(-90px)}}
@keyframes mgWvB{to{transform:translateX(-160px)}}
@keyframes mgWvC{to{transform:translateX(-260px)}}
/* sekély víz fényjátéka (kausztika) a part közelében */
.mg-scene .mg-ocean .caustic{position:absolute;left:-60px;right:-60px;bottom:0;height:52%;pointer-events:none;opacity:var(--caustic-op);transition:opacity 1s;
  background:
   radial-gradient(22px 4.5px at 30% 40%,rgba(255,255,255,.34),transparent 70%),
   radial-gradient(14px 3.5px at 76% 72%,rgba(255,255,255,.28),transparent 70%),
   radial-gradient(18px 4px at 56% 14%,rgba(255,255,255,.26),transparent 70%);
  background-size:120px 36px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%);
  animation:mgCaustic 12s ease-in-out infinite alternate}
.mg-scene .mg-ocean .caustic.b{background-size:86px 26px;opacity:calc(var(--caustic-op) * .7);animation:mgCaustic 9s ease-in-out infinite alternate-reverse}
@keyframes mgCaustic{from{transform:translate(-30px,0)}to{transform:translate(30px,-3px)}}
/* napcsillogás-ösvény: villódzó fénypöttyök a nap/hold alatt */
.mg-scene .mg-glitter{position:absolute;top:var(--glit-top);bottom:4%;left:var(--celc);width:clamp(150px,26%,340px);transform:translateX(-50%);pointer-events:none;opacity:var(--glit-op);transition:left 1s,top 1s,opacity 1s}
.mg-scene .mg-glitter i{position:absolute;display:block;border-radius:50%;background:var(--glit);box-shadow:0 0 5px 1px var(--glit);opacity:0;animation:mgSpark 2.4s ease-in-out infinite}
@keyframes mgSpark{0%,100%{opacity:0;transform:scaleX(.4)}35%{opacity:1;transform:scaleX(1)}62%{opacity:.3;transform:scaleX(.8)}}
/* homok: nedves sáv + ki-be futó hullámszegély */
.mg-scene .mg-sand{position:absolute;left:0;right:0;bottom:0;height:var(--sh);transition:background 1s;
  background:linear-gradient(180deg,transparent 55%,var(--sand-shade) 100%),linear-gradient(180deg,var(--sand-lo) 0%,var(--sand-lo) 16%,var(--sand) 62%,var(--sand) 100%)}
.mg-scene .mg-sand::before{content:'';position:absolute;top:-9px;left:-4%;right:-4%;height:20px;pointer-events:none;
  background:
   radial-gradient(ellipse 22px 5px at 19px 13px,var(--foam),transparent 100%) repeat-x,
   radial-gradient(ellipse 14px 4px at 11px 14px,var(--foam),transparent 100%) repeat-x,
   linear-gradient(180deg,transparent 40%,var(--foam) 70%,transparent 96%);
  background-size:53px 20px,31px 20px,100% 100%;
  filter:blur(2.4px);opacity:.72;animation:mgSwash 8s ease-in-out infinite}
.mg-scene .mg-sand::after{content:'';position:absolute;top:0;left:0;right:0;height:32%;pointer-events:none;transform-origin:top;
  background:linear-gradient(180deg,rgba(30,64,74,.16),var(--sheen) 40%,rgba(255,255,255,0));animation:mgWet 8s ease-in-out infinite}
@keyframes mgSwash{0%,100%{transform:translateY(-3px);opacity:.78}50%{transform:translateY(6px);opacity:.46}}
@keyframes mgWet{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(1.5);opacity:.7}}
.mg-scene .mg-fire{position:absolute;left:19%;bottom:4.5%;width:clamp(62px,7.4vw,96px);opacity:var(--fire-op);transition:opacity .8s;z-index:3;pointer-events:none}
.mg-scene .mg-fire svg{display:block;width:100%;overflow:visible}
.mg-scene .mg-fire .fl{transform-box:fill-box;transform-origin:50% 100%;animation:mgFlick 1.1s ease-in-out infinite}
.mg-scene .mg-fire .fl.f2{animation-duration:.9s;animation-delay:-.3s}
.mg-scene .mg-fire .fl.f3{animation-duration:1.35s;animation-delay:-.6s}
.mg-scene .mg-fire .fl.core{animation:mgCore .75s ease-in-out infinite}
.mg-scene .mg-fire .emb{animation:mgEmber 2.6s ease-in-out infinite}
.mg-scene .mg-fire .emb.e2{animation-duration:3.3s;animation-delay:-1.2s}
.mg-scene .mg-fire .spk{transform-box:fill-box;opacity:0;animation:mgSparkL 2.8s ease-out infinite}
.mg-scene .mg-fire .spk.r{animation-name:mgSparkR;animation-duration:3.4s}
@keyframes mgFlick{0%,100%{transform:scale(1,1) skewX(0)}20%{transform:scale(.94,1.08) skewX(-4deg)}45%{transform:scale(1.04,.9) skewX(3deg)}70%{transform:scale(.97,1.06) skewX(-2deg)}}
@keyframes mgCore{0%,100%{transform:scale(1,1)}50%{transform:scale(.92,1.1)}}
@keyframes mgEmber{0%,100%{opacity:.55}40%{opacity:1}70%{opacity:.7}}
@keyframes mgSparkL{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}100%{opacity:0;transform:translate(-9px,-54px)}}
@keyframes mgSparkR{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}100%{opacity:0;transform:translate(11px,-60px)}}
.mg-scene .mg-fireglow{position:absolute;left:calc(19% + clamp(31px,3.7vw,48px));bottom:0;width:clamp(240px,32vw,420px);height:calc(var(--sh) + 4%);transform:translateX(-50%);opacity:var(--fire-op);transition:opacity .8s;pointer-events:none;z-index:1}
.mg-scene .mg-fireglow::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 58% at 50% 72%,rgba(255,146,64,.42),rgba(255,110,40,.14) 46%,transparent 72%);animation:mgSpill 3.2s ease-in-out infinite}
@keyframes mgSpill{0%,100%{opacity:.85}18%{opacity:1}34%{opacity:.78}52%{opacity:.96}68%{opacity:.8}84%{opacity:1}}
/* feltöltött pálma (a dizájn sziluettje helyett) */
.mg-scene .mg-boat{position:absolute;bottom:calc(var(--hz) - 8px);left:25%;width:clamp(18px,2.1vw,26px);opacity:0;pointer-events:none;animation:mgBoat 180s linear infinite;animation-delay:-40s}
.mg-scene .mg-boat svg{display:block;width:100%;overflow:visible}
.mg-scene .mg-boat .sail{fill:var(--sail);transition:fill 1s}
.mg-scene .mg-boat .sail2{fill:var(--sail-sh);transition:fill 1s}
.mg-scene .mg-boat .hull{fill:var(--hull)}
.mg-scene .mg-boat .mast{stroke:var(--hull)}
@keyframes mgBoat{0%{left:25%;opacity:0}4%{opacity:var(--boat-op)}80%{left:14%;opacity:var(--boat-op)}86%{left:13.3%;opacity:0}100%{left:13.3%;opacity:0}}
.mg-scene .mg-blight{position:absolute;bottom:calc(var(--hz) - 3px);left:21%;width:3px;height:3px;border-radius:50%;background:#FFD9A0;box-shadow:0 0 6px 2px rgba(255,190,110,.75);opacity:var(--light-op);pointer-events:none;animation:mgBlink 4.2s ease-in-out infinite}
.mg-scene .mg-blight::after{content:'';position:absolute;left:50%;top:5px;width:2px;height:16px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,200,130,.55),transparent);filter:blur(.6px)}
@keyframes mgBlink{0%,100%{opacity:var(--light-op)}50%{opacity:calc(var(--light-op) * .5)}}
.mg-scene .mg-palm{position:absolute;bottom:-2px;z-index:2;pointer-events:none;filter:var(--palm-bright) drop-shadow(0 14px 22px rgba(0,0,0,.32));transition:filter 1s ease}
.mg-scene .mg-palm.r{right:-18px;width:clamp(210px,32vw,430px);transform-origin:82.6% 89.3%;animation:mgSwaySlow 7.5s ease-in-out infinite}
.mg-scene .mg-palm.l{left:-26px;width:clamp(150px,22vw,300px);transform-origin:82.6% 89.3%;animation:mgSwaySlow 9s ease-in-out infinite reverse;opacity:.92}
.mg-scene .mg-palm img{display:block;width:100%;height:auto;position:relative;z-index:1;transform:translate(10%,8%)}
.mg-scene .mg-palm::after{content:'';position:absolute;left:52.6%;width:60%;bottom:calc(10.7% - 7px);height:14px;z-index:0;
  background:radial-gradient(ellipse at center,rgba(58,42,22,.30),transparent 72%);filter:blur(4px)}
.mg-scene .mg-scene-in{position:relative;z-index:4;padding:clamp(16px,2.8vw,34px) clamp(18px,4vw,48px) 0;text-align:center}
.mg-scene .mg-scene-in::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,100%);height:150%;background:radial-gradient(ellipse at 50% 55%,rgba(5,22,32,.26),rgba(5,22,32,.08) 48%,transparent 70%);z-index:-1;pointer-events:none;opacity:var(--veil,1);transition:opacity 1s}
.mg-scene .mg-scene-in .kick{font-family:var(--font-body);font-size:calc(.8 * var(--mg-fs,1rem));font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--kick,var(--gold));text-shadow:var(--kick-sh,0 1px 2px rgba(0,22,32,.6),0 0 10px rgba(0,22,32,.4));margin-bottom:12px;transition:color 1s}
.mg-scene .mg-scene-in h1{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.03;color:#fff;margin:0 0 10px;text-shadow:0 1px 3px rgba(0,20,30,.5),0 2px 22px rgba(0,10,20,.4)}
.mg-scene .mg-scene-in h1 em{font-style:italic;font-weight:500}
.mg-scene .mg-scene-in p{max-width:46ch;margin:0 auto;font-family:var(--font-body);font-size:clamp(.98rem,2.2vw,1.16rem);line-height:1.55;color:rgba(255,255,255,.96);text-shadow:0 1px 3px rgba(0,20,30,.55),0 1px 12px rgba(0,15,25,.35)}
@media (min-width:641px) and (max-width:1100px){
  .mg-scene[data-scn=nappal] .mg-celestial,.mg-scene[data-scn=ejjel] .mg-celestial{left:auto !important;right:5%}
  .mg-scene[data-scn=nappal]{--celc:calc(95% - 42px) !important}
  .mg-scene[data-scn=ejjel]{--celc:calc(95% - 37px) !important}
}
@media (max-width:640px){
  .mg-scene{min-height:clamp(400px,56vh,480px);--hz:34%;--sh:14%}
  .mg-scene .mg-isle{left:3%}
  .mg-scene .mg-isle.r{right:4%}
  .mg-scene .mg-ocean .isleref{left:3%}
  .mg-scene .mg-ocean .isleref.r{right:4%}
  .mg-scene .mg-scene-in{padding-top:clamp(18px,5vw,26px)}
  .mg-scene .mg-scene-in p{font-size:.95rem;line-height:1.5}
  .mg-scene .mg-palm.r{width:clamp(170px,48vw,230px)}
  .mg-scene .mg-palm.l{width:clamp(120px,34vw,170px)}
  .mg-scene .mg-bird{width:clamp(28px,7vw,44px)}
  /* nap/hold: kisebb, a felirat alatti szabad égsávban, a fényösvény fölött */
  .mg-scene .mg-celestial{width:64px !important;height:64px !important;left:calc(var(--celc) - 32px) !important}
  .mg-scene[data-scn=nappal] .mg-celestial,.mg-scene[data-scn=ejjel] .mg-celestial{top:47% !important}
  .mg-scene[data-scn=reggel] .mg-celestial,.mg-scene[data-scn=naplemente] .mg-celestial{top:calc(100% - var(--hz) - 42px) !important}
  .mg-scene[data-scn=nappal],.mg-scene[data-scn=ejjel]{--glit-top:3% !important}
  .mg-scene[data-scn=reggel],.mg-scene[data-scn=naplemente]{--celc:56% !important}
}
@media (prefers-reduced-motion:reduce){.mg-scene .mg-palm,.mg-scene .mg-clouds,.mg-scene .mg-ocean .w1,.mg-scene .mg-ocean .w2,.mg-scene .mg-reflect,.mg-scene .mg-celestial span,.mg-scene .mg-bird,.mg-scene .mg-waves .wv,.mg-scene .mg-ocean .reef,.mg-scene .mg-ocean .caustic,.mg-scene .mg-glitter i,.mg-scene .mg-sand::before,.mg-scene .mg-sand::after,.mg-scene .mg-fire *,.mg-scene .mg-fireglow::before,.mg-scene .mg-shoot,.mg-scene .mg-boat,.mg-scene .mg-blight{animation:none}.mg-scene .mg-shoot,.mg-scene .mg-boat{opacity:0}.mg-scene .mg-bird{opacity:0}}


/* ===== Belépő / kód-kapu — üvegkártya (dizájn) ===== */
.mg-gate2{padding:clamp(22px,4vw,44px) clamp(16px,3.5vw,28px) clamp(26px,4vw,44px);background:radial-gradient(130% 90% at 50% -20%,var(--ocean-bg),transparent 62%)}
.mg-gatehead{text-align:center;max-width:660px;margin:0 auto clamp(18px,3vw,28px)}
.mg-gatehead .kicker{font-size:calc(.78 * var(--mg-fs,1rem));letter-spacing:.16em;text-transform:uppercase;color:var(--ocean-ink);font-weight:700;margin-bottom:10px}
.mg-gatehead h1{font-family:var(--font-display);font-weight:600;color:var(--brand);font-size:clamp(1.7rem,4.6vw,2.7rem);line-height:1.05;margin:0 0 8px}
.mg-gatehead p{color:var(--ink-soft);font-size:calc(.98 * var(--mg-fs,1rem));margin:0 auto;max-width:48ch}
.mg-glass{max-width:960px;margin:0 auto;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--glass-line);border-radius:24px;box-shadow:0 30px 70px -40px rgba(6,40,60,.6);padding:clamp(20px,3.5vw,34px);display:grid;grid-template-columns:1fr .92fr;gap:clamp(20px,3vw,32px);align-items:start}
.mg-glass.solo{grid-template-columns:1fr;max-width:540px}
.mg-glass h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,3vw,1.9rem);color:var(--brand);margin:0 0 8px}
.mg-glass .lead{color:var(--ink-soft);font-size:calc(.95 * var(--mg-fs,1rem));line-height:1.55;margin:0 0 16px}
.mg-flabel{display:block;font-size:calc(.78 * var(--mg-fs,1rem));font-weight:600;letter-spacing:.02em;color:var(--ink-soft);margin-bottom:7px}
.mg-btn.grad{background:linear-gradient(135deg,var(--ocean-deep),var(--ocean) 55%,var(--turq));color:#fff;box-shadow:0 14px 30px -16px var(--ocean)}
.mg-btn.grad:hover{filter:brightness(1.05)}
.mg-codepanel{background:linear-gradient(160deg,var(--ocean-bg),var(--sand-bg));border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2.5vw,22px)}
.mg-codebadge{display:inline-flex;align-items:center;gap:6px;background:var(--gold-bg);color:#8a6a12;border-radius:999px;padding:5px 12px;font-weight:700;font-size:calc(.76 * var(--mg-fs,1rem));margin-bottom:12px}
.mg-codepanel h3{font-family:var(--font-display);font-weight:600;font-size:calc(1.2 * var(--mg-fs,1rem));color:var(--brand);margin:0 0 6px}
.mg-codepanel p{color:var(--ink-soft);font-size:calc(.86 * var(--mg-fs,1rem));line-height:1.5;margin:0 0 6px}
.mg-devnote{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:calc(.8 * var(--mg-fs,1rem));color:var(--ink-faint)}
.mg-devnote svg{flex:none}
@media (max-width:720px){.mg-glass{grid-template-columns:1fr;gap:18px}}

.mg-oi{width:16px;height:16px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.mg-oi-g{border-radius:50%;background:conic-gradient(from -45deg,#EA4335,#FBBC05,#34A853,#4285F4,#EA4335)}
.mg-oi-f{border-radius:4px;background:#1877F2;color:#fff;font-weight:800;font-size:12px}

/* ===== Modul-nézetek: kártyás szekciók (Idegenvezető / Eszközök) ===== */
.mg-narrow{max-width:720px;margin:0 auto}
.mg-sect{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(14px,2.5vw,20px);margin-bottom:14px;box-shadow:0 1px 0 rgba(8,48,63,.02),0 18px 40px -34px rgba(8,48,63,.18)}
.mg-sect-h{font-family:var(--font-display);font-weight:600;font-size:calc(1.3 * var(--mg-fs,1rem));color:var(--brand);margin:0 0 4px}
.mg-sect-h.sm{font-size:calc(1.05 * var(--mg-fs,1rem))}
.mg-sect-p{color:var(--ink-soft);font-size:calc(.9 * var(--mg-fs,1rem));margin:0}
.mg-infopanel{background:linear-gradient(160deg,var(--ocean-bg),var(--sand-bg));border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:calc(.84 * var(--mg-fs,1rem));color:var(--ink-soft);line-height:1.55;margin-top:14px}
.mg-infopanel b{color:var(--ink)}

#mg-onsite-detail .mg-pl-sub{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ===== Átnézés utáni finomítások (0.9.33) ===== */
.mg-acct{min-width:0;gap:6px}
.mg-acct .em{display:inline-block;max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.mg-acct a{cursor:pointer;white-space:nowrap}
@media (max-width:640px){.mg-acct .em,.mg-acct .sep{display:none}}
.mg-invite{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.mg-invite .mg-input{flex:1;min-width:200px}
.mg-demobar.expired{background:linear-gradient(160deg,var(--ocean-bg),var(--sand-bg));border-color:var(--line)}

/* ===== Le Morne Brabant (hero) ===== */
.mg-scene .mg-isle.lm{left:3%;width:clamp(170px,26vw,330px);height:auto;aspect-ratio:10/3;background:none;clip-path:none;overflow:visible}
.mg-scene .mg-isle.lm::before,.mg-scene .mg-isle.lm::after{display:none}
.mg-scene .mg-isle.lm svg,.mg-scene .mg-ocean .isleref.lm svg{display:block;width:100%;height:100%}
.mg-scene .mg-ocean .isleref.lm{left:3%;width:clamp(170px,26vw,330px);height:auto;aspect-ratio:10/1.7;background:none;clip-path:none}
.mg-scene{--rock:rgba(84,98,96,.55)}

/* ===== Térkép & tervező — a hangoskönyv-oldal vizuális nyelvén ===== */
.mg-pl-hero.compact{padding:clamp(16px,2.8vw,26px) clamp(18px,3.2vw,32px)}
.mg-pl-hero.compact .mg-pl-cover{width:clamp(78px,11vw,112px);height:clamp(78px,11vw,112px);border-radius:14px}
.mg-pl-hero.compact .mg-pl-title{font-size:clamp(1.35rem,3.4vw,2.05rem)}
.mg-pl-hero.compact .mg-pl-sub{margin-bottom:12px;max-width:58ch}
.mg-pl-hero.compact .mg-pl-palm{width:clamp(120px,16vw,170px)}
.mg-pl-hero.compact .mg-pl-play .ic{font-size:1.05em;line-height:1}
#mg-view-map .mg-maprow{grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr);gap:18px;min-height:0;align-items:stretch}
#mg-view-map .mg-mapwrap{border-radius:20px;border:1px solid var(--line);box-shadow:0 26px 60px -42px rgba(8,48,63,.55)}
#mg-view-map .mg-map{height:clamp(420px,64vh,620px)}
#mg-view-map .mg-side{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(14px,2vw,20px);max-height:clamp(420px,64vh,620px);overflow:auto;box-shadow:0 26px 60px -48px rgba(8,48,63,.45)}
#mg-view-map .mg-side .empty{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 15px;margin:0 0 14px;background:var(--ocean-bg);border-radius:14px;color:var(--ocean-ink);font-weight:500}
#mg-view-map .mg-side .empty::before{content:'';flex:none;width:10px;height:10px;border-radius:50%;background:var(--ocean);box-shadow:0 0 0 5px rgba(14,143,151,.18)}
#mg-view-map .mg-detail{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
@media (max-width:860px){#mg-view-map .mg-maprow{grid-template-columns:1fr}#mg-view-map .mg-map{height:clamp(320px,52vh,440px)}#mg-view-map .mg-side{max-height:none}}