*{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#07070a;
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;
    touch-action:none}
  canvas{display:block}
  #vignette{position:fixed;inset:0;z-index:4;pointer-events:none;
    background:radial-gradient(ellipse 85% 75% at 50% 46%,
      rgba(0,0,0,0) 50%,rgba(0,0,0,0.18) 82%,rgba(0,0,0,0.48) 100%)}
  #loading{position:fixed;inset:0;z-index:30;background:#07070a;
    display:flex;align-items:center;justify-content:center;
    color:#d8b26a;font-size:11px;letter-spacing:6px;text-transform:uppercase;
    transition:opacity .6s ease}
  #loading.hidden{opacity:0;pointer-events:none}
  #loading::after{content:'';width:120px;height:1px;background:#d8b26a;margin-left:20px;
    animation:load 1.4s ease-in-out infinite;transform-origin:left}
  @keyframes load{0%,100%{transform:scaleX(.15)}50%{transform:scaleX(1)}}
  #blocker{position:fixed;inset:0;z-index:20;cursor:pointer;
    display:flex;align-items:center;justify-content:center;background:#070709;
    transition:opacity .45s ease}
  #blocker.hidden{opacity:0;pointer-events:none}
  #blocker::before{content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 90% 80% at 50% 38%,rgba(5,5,8,.30),rgba(5,5,8,.88) 88%)}
  .cine{position:absolute;inset:0;overflow:hidden}
  .cine img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:blur(3px) brightness(.30) saturate(.75);opacity:0;transition:opacity 5s ease}
  .cine img.on{opacity:1}
  .panel{position:relative;z-index:1;text-align:center;color:#ece8de;max-width:600px;
    padding:0 28px}
  /* entrada coreografada: cada elemento sobe em fade, devagar */
  #blocker.play .panel>*, #blocker.play .bbar{
    opacity:0;transform:translateY(18px);filter:blur(6px);
    animation:rise 1.5s cubic-bezier(.16,.84,.28,1) forwards}
  #blocker.play .panel>*:nth-child(2){animation-delay:.28s}
  #blocker.play .panel>*:nth-child(3){animation-delay:.46s}
  #blocker.play .panel>*:nth-child(4){animation-delay:.64s}
  #blocker.play .panel>*:nth-child(5){animation-delay:.9s}
  #blocker.play .panel>*:nth-child(6){animation-delay:1.15s}
  #blocker.play .panel>*:nth-child(7){animation-delay:1.35s}
  #blocker.play .bbar{animation-delay:1.5s}
  #blocker.play .panel>h1{animation:rise 1.5s cubic-bezier(.16,.84,.28,1) forwards,
    tighten 2.4s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes rise{to{opacity:1;transform:none;filter:blur(0)}}
  @keyframes tighten{to{letter-spacing:.30em;padding-left:.30em}}
  .panel h1{position:relative;left:50%;translate:-50% 0;width:max-content;
    max-width:92vw;white-space:nowrap;
    font-size:clamp(54px,11vw,122px);font-weight:200;letter-spacing:.5em;
    padding-left:.5em;margin-bottom:20px;color:#f4f0e6;
    text-shadow:0 2px 44px rgba(0,0,0,.55)}
  .brule{width:54px;height:1px;background:rgba(201,168,106,.85);margin:0 auto 22px}
  .bsub{font-size:10px;letter-spacing:.32em;text-transform:uppercase;
    color:rgba(255,255,255,.58);margin-bottom:28px}
  .panel .about{font-size:13px;line-height:1.85;color:rgba(236,232,222,.72);
    max-width:430px;margin:0 auto 36px;font-weight:300}
  .keys{display:flex;justify-content:center;gap:10px 24px;flex-wrap:wrap;
    margin:0 auto 40px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(255,255,255,.5)}
  .keys b{display:inline-block;color:#ece8de;font-weight:500;letter-spacing:.08em;
    background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
    border-radius:8px;padding:5px 10px;margin-right:8px}
  .enter{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:#e2bc73;
    animation:pulse 3.2s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
  .glink{display:inline-block;margin-top:18px;font-size:9.5px;letter-spacing:.22em;
    text-transform:uppercase;color:rgba(255,255,255,.42);text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:3px;transition:.25s}
  .glink:hover{color:#c9a86a;border-color:rgba(201,168,106,.6)}
  .bbar{position:absolute;left:0;right:0;bottom:0;z-index:1;
    display:flex;justify-content:space-between;padding:20px clamp(18px,4vw,44px);
    font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;
    color:rgba(255,255,255,.4)}
  #crosshair{position:fixed;left:50%;top:50%;width:8px;height:8px;
    margin:-4px 0 0 -4px;border-radius:50%;z-index:10;
    background:rgba(255,255,255,.78);
    box-shadow:0 0 0 1.5px rgba(0,0,0,.45),0 0 10px rgba(255,255,255,.28);
    pointer-events:none;opacity:0;transform:scale(.55);
    transition:opacity .3s ease,transform .3s ease}
  #crosshair.on{opacity:1;transform:scale(1)}
#map{position:fixed;top:18px;right:18px;width:min(20vw,220px);aspect-ratio:1;
  z-index:6;border-radius:50%;
  background:rgba(10,14,19,.88);
  box-shadow:0 16px 44px rgba(0,0,0,.48),0 0 0 1px rgba(127,212,193,.22),0 0 26px rgba(55,229,255,.10);
  pointer-events:none;transition:width .28s ease,box-shadow .28s ease}
#map.expanded{top:50%;right:50%;width:min(72vw,680px);height:min(58vh,390px);aspect-ratio:auto;transform:translate(50%,-50%);border-radius:20px;
  box-shadow:0 28px 90px rgba(0,0,0,.72),0 0 0 1px rgba(127,212,193,.35),0 0 46px rgba(55,229,255,.16)}
@media(max-width:640px){#map{top:10px;right:10px;width:min(44vw,180px);border-radius:50%}
  #map.expanded{width:90vw;height:min(48vw,220px);border-radius:16px}}
#mapclose{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:13;display:none;border:1px solid rgba(127,212,193,.42);border-radius:999px;background:rgba(13,17,26,.94);color:#dfe9ee;padding:9px 14px;font-size:11px;letter-spacing:.08em;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#mapclose.on{display:block}
#mapclose:active{background:#24404c}
@media(pointer:coarse){#map{pointer-events:auto;cursor:pointer;touch-action:none}}

  #info{position:fixed;left:50%;bottom:56px;
    transform:translateX(-50%) translateY(20px) scale(.96);
    z-index:10;pointer-events:none;
    background:linear-gradient(180deg,rgba(22,22,30,.94),rgba(13,13,19,.96));
    border:1px solid rgba(216,178,106,.34);border-radius:16px;
    padding:16px 34px 14px;text-align:center;opacity:0;
    transition:opacity .26s ease,transform .26s cubic-bezier(.2,.9,.3,1);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 22px 56px rgba(0,0,0,.68),0 0 28px rgba(216,178,106,.10);
    max-width:92vw}
  #info.on{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  #info .t{font-size:17px;color:#fff;letter-spacing:.4px;font-weight:300;line-height:1.2}
  #info .a{font-size:10px;color:#e2bc73;margin-top:7px;letter-spacing:3px;text-transform:uppercase}
  #maptip{position:fixed;z-index:12;pointer-events:none;opacity:0;
    transform:translate(-50%,-130%);
    background:rgba(13,17,26,.94);border:1px solid rgba(127,212,193,.4);border-radius:9px;
    padding:7px 11px;font-size:11px;color:#dfe9ee;white-space:nowrap;
    transition:opacity .15s ease}
  #maptip.on{opacity:1}
  #maptip .t{font-size:12px;color:#fff;font-weight:600;letter-spacing:.3px}
  #maptip .a{margin-top:3px;font-size:9.5px;color:#7fd4c1;letter-spacing:1.5px;text-transform:uppercase}
  #map.expanded{cursor:crosshair;pointer-events:auto}
  #maphint{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(14px);
    z-index:12;pointer-events:none;opacity:0;white-space:nowrap;
    background:rgba(13,17,26,.94);border:1px solid rgba(127,212,193,.4);border-radius:9px;
    padding:8px 14px;font-size:11px;color:#dfe9ee;letter-spacing:1px;
    transition:opacity .2s ease,transform .2s ease}
  #maphint.on{opacity:1;transform:translateX(-50%)}
@media(max-width:640px){#maphint{bottom:max(18px,env(safe-area-inset-bottom));font-size:10px;padding:7px 10px;max-width:82vw;text-align:center;white-space:normal}}