:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:#08111d;color:#eff8ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0%,#19324c 0,#0b1726 50%,#08111d 100%);min-height:100vh}.app{max-width:1150px;margin:auto;padding:32px 20px 42px}header{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:26px}.eyebrow{font-size:11px;letter-spacing:.24em;color:#7dbfe4;font-weight:800}h1{font-size:clamp(35px,6vw,67px);letter-spacing:-.07em;line-height:1;margin:10px 0}h1 span{color:#6bd3ff}header p{color:#a8c2d3;margin:0}.stats{text-align:right;flex-shrink:0}.stats strong{font-size:clamp(28px,5vw,48px);display:block;font-variant-numeric:tabular-nums}.stats small{color:#8cb0c6;letter-spacing:.1em;font-size:10px}.toolbar{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:#15283a;border:1px solid #28445b;padding:13px 18px;border-radius:16px;margin-bottom:18px}.toolbar label{display:flex;align-items:center;gap:10px;font-size:13px;color:#c7dbe9}.toolbar input{accent-color:#6bd3ff}.toolbar input[type=range]{width:110px}.toolbar button{margin-left:auto;background:#29445a;color:#f2fbff;border:1px solid #41617b;border-radius:10px;padding:9px 14px;font-weight:700;cursor:pointer}.toolbar button:hover{background:#345a75}.sheet-frame{border:1px solid #6d91a0;border-radius:20px;overflow:hidden;box-shadow:0 25px 80px #0008,inset 0 0 0 1px #fff3;background:#a9c3d0}.sheet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(4px,.85vw,10px);padding:clamp(10px,1.8vw,22px);background:repeating-linear-gradient(105deg,#fff2 0px,#fff0 2px,#628c9d0d 3px,transparent 9px),linear-gradient(125deg,#d9ebef,#afc9d2 43%,#d8e9ec 73%,#9fbfc9);box-shadow:inset 0 0 50px #62859a77}/* Clear plastic air pockets: transparent centers reveal the continuous backing sheet. */
.bubble{position:relative;isolation:isolate;aspect-ratio:1;border:0;padding:0;border-radius:50%;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;background:radial-gradient(ellipse 40% 32% at 28% 19%,rgba(255,255,255,.66),transparent 92%),radial-gradient(ellipse 83% 78% at 51% 48%,rgba(255,255,255,.035) 0%,rgba(255,255,255,.045) 52%,rgba(230,250,255,.17) 70%,rgba(245,254,255,.58) 83%,rgba(100,149,169,.24) 93%,rgba(255,255,255,.42) 100%);box-shadow:inset 2px 3px 4px rgba(255,255,255,.76),inset -4px -6px 7px rgba(67,105,121,.24),inset 0 0 0 1px rgba(255,255,255,.72),2px 5px 6px rgba(47,78,90,.24),0 0 0 1px rgba(116,161,177,.28);transition:transform 110ms ease,box-shadow 170ms ease,background 170ms ease;}
.bubble:before{content:"";position:absolute;left:16%;top:11%;width:47%;height:19%;border-radius:50%;background:radial-gradient(ellipse at 45% 42%,rgba(255,255,255,.88),rgba(255,255,255,.24) 53%,transparent 79%);transform:rotate(-29deg);filter:blur(.7px);pointer-events:none}
.bubble:after{content:"";position:absolute;inset:7%;border-radius:50%;border-top:1.6px solid rgba(255,255,255,.88);border-left:1px solid rgba(255,255,255,.37);border-right:1px solid rgba(76,118,135,.13);border-bottom:1.3px solid rgba(67,106,120,.33);pointer-events:none}
.bubble:not(.popped):hover{filter:brightness(1.045)}.bubble:not(.popped):active{transform:scale(.84)}.bubble:focus-visible{outline:3px solid #1672a9;outline-offset:2px;z-index:2}
.bubble.popped{cursor:default;transform:scale(.95);background:radial-gradient(ellipse 75% 64% at 48% 49%,rgba(255,255,255,.03) 0%,rgba(85,126,143,.09) 67%,rgba(255,255,255,.23) 89%,rgba(71,117,135,.21) 100%);box-shadow:inset 1px 2px 3px rgba(59,94,106,.18),inset -2px -2px 3px rgba(255,255,255,.43),0 0 0 1px rgba(255,255,255,.54)}
.bubble.popped:before{left:20%;top:41%;width:60%;height:8%;transform:rotate(-16deg);background:linear-gradient(transparent,rgba(255,255,255,.5),transparent);filter:blur(.5px)}
.bubble.popped:after{inset:13%;border:0;border-radius:38%;background:linear-gradient(23deg,transparent 24%,rgba(255,255,255,.48) 26%,transparent 29%,transparent 65%,rgba(75,114,131,.27) 68%,transparent 70%),linear-gradient(110deg,transparent 45%,rgba(255,255,255,.4) 47%,transparent 51%)}
.bubble.burst{animation:burst .22s cubic-bezier(.16,.7,.2,1)}@keyframes burst{0%{transform:scale(1)}27%{transform:scale(.73)}63%{transform:scale(.98)}100%{transform:scale(.95)}}footer{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:#91adbe}@media(max-width:700px){.app{padding:22px 12px}header{align-items:start}.stats{padding-top:20px}.sheet{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;padding:10px}.toolbar{gap:12px}.toolbar button{margin-left:0}}@media(prefers-reduced-motion:reduce){.bubble,.bubble.burst{animation:none;transition:none}}

/* V6: the flat plastic web AND the raised air pockets transmit the backdrop.
   A high-contrast test surface makes the transparency obvious. */
.sheet-frame{
 background-color:#f5f0e7;
 background-image:linear-gradient(115deg,transparent 0 44%,rgba(36,119,143,.20) 44% 56%,transparent 56%),repeating-linear-gradient(0deg,rgba(29,82,97,.17) 0 2px,transparent 2px 68px),repeating-linear-gradient(90deg,rgba(29,82,97,.17) 0 2px,transparent 2px 68px),linear-gradient(135deg,#f8f3e7,#e1ebd8 54%,#e9dfd7);
}
.sheet{
 background:linear-gradient(112deg,rgba(255,255,255,.16),rgba(198,231,242,.045) 48%,rgba(255,255,255,.12)),repeating-linear-gradient(105deg,rgba(255,255,255,.12) 0 1px,transparent 1px 17px);
 box-shadow:inset 0 0 30px rgba(91,132,143,.12);
}
.bubble{
 background:radial-gradient(ellipse 48% 31% at 31% 20%,rgba(255,255,255,.60),transparent 85%),radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.025) 0 49%,rgba(212,239,247,.09) 64%,rgba(245,253,255,.36) 80%,rgba(110,160,174,.18) 93%,rgba(255,255,255,.32) 100%);
 box-shadow:inset 2px 3px 3px rgba(255,255,255,.65),inset -4px -5px 6px rgba(50,100,122,.18),0 3px 5px rgba(42,79,90,.21),0 0 0 1px rgba(255,255,255,.55);
}
.bubble.popped{
 background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.015) 0 72%,rgba(255,255,255,.18) 88%,rgba(80,125,145,.12) 100%);
 box-shadow:inset 1px 2px 2px rgba(50,100,122,.12),0 0 0 1px rgba(255,255,255,.48);
}

/* V7 surgical visual refinement: thin thermoformed clear-plastic domes.
   Preserve V6's translucent sheet and see-through base. */
.bubble:not(.popped){
  border-radius:49% 51% 50% 50%;
  background:
    radial-gradient(ellipse 27% 13% at 31% 20%,rgba(255,255,255,.74) 0%,rgba(255,255,255,.37) 48%,transparent 100%),
    radial-gradient(ellipse 43% 20% at 74% 79%,rgba(31,79,102,.14),transparent 100%),
    radial-gradient(ellipse 65% 64% at 46% 44%,transparent 0 58%,rgba(226,247,251,.09) 69%,rgba(246,253,255,.38) 83%,rgba(101,155,173,.17) 93%,rgba(255,255,255,.39) 100%);
  box-shadow:
    inset 1px 2px 2px rgba(255,255,255,.66),
    inset -3px -4px 5px rgba(51,101,121,.15),
    inset 0 0 0 1px rgba(255,255,255,.37),
    1px 3px 3px rgba(33,75,95,.20),
    2px 6px 7px rgba(36,76,90,.10),
    -1px -1px 2px rgba(255,255,255,.23);
}
.bubble:not(.popped)::before{
  left:13%;top:10%;width:48%;height:23%;
  transform:rotate(-31deg);
  background:radial-gradient(ellipse at 44% 43%,rgba(255,255,255,.78),rgba(255,255,255,.21) 48%,transparent 78%);
  filter:blur(.45px);
}
.bubble:not(.popped)::after{
  inset:5%;border-radius:50%;
  border-top:1.3px solid rgba(255,255,255,.72);
  border-left:1px solid rgba(255,255,255,.26);
  border-right:1px solid rgba(49,106,132,.12);
  border-bottom:1.5px solid rgba(54,105,125,.23);
  box-shadow:inset -1px -2px 2px rgba(52,99,119,.06);
}
.bubble:not(.popped):hover{filter:brightness(1.025)}
/* Collapsed membrane stays transparent; thin creases indicate burst plastic. */
.bubble.popped{
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.01) 0 65%,rgba(230,249,255,.13) 84%,rgba(65,119,141,.11) 100%);
  box-shadow:inset 1px 1px 2px rgba(51,101,121,.13),0 0 0 1px rgba(255,255,255,.37),1px 1px 2px rgba(40,83,101,.07);
}
.bubble.popped::after{
  inset:11%;border:0;border-radius:50%;
  background:linear-gradient(22deg,transparent 35%,rgba(255,255,255,.37) 36%,transparent 39%),linear-gradient(116deg,transparent 53%,rgba(56,110,131,.15) 54%,transparent 57%),linear-gradient(160deg,transparent 60%,rgba(255,255,255,.31) 61%,transparent 64%);
}

/* Map controls — keep V7 plastic and bubble rendering unchanged */
.map-tools{display:flex;gap:12px;align-items:end;justify-content:space-between;flex-wrap:wrap;background:#122335;border:1px solid #29445a;padding:14px;border-radius:14px;margin-bottom:12px}.map-tools label{display:flex;flex-direction:column;gap:5px;color:#bcd4e4;font-size:12px}.map-tools input:not([type=color]){background:#0b1825;color:#fff;border:1px solid #47657b;border-radius:8px;padding:9px;max-width:205px}.identity,.navigate,.jump{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.map-tools button{background:#284a63;color:#fff;border:1px solid #4e7891;border-radius:9px;padding:10px 12px;cursor:pointer}.map-tools button:hover{background:#356682}.map-tools input[type=color]{height:36px;width:46px;border:0;background:transparent;cursor:pointer}.location-bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#c9e5f2;font-size:12px;margin:10px 3px}.location-bar strong{color:#fff}.sheet{grid-template-columns:repeat(12,minmax(0,1fr));}.bubble{min-width:0}.bubble.popped{--claimed:#38bdf8;background:radial-gradient(ellipse at 46% 42%,color-mix(in srgb,var(--claimed) 65%,transparent) 0 55%,color-mix(in srgb,var(--claimed) 42%,transparent) 74%,rgba(255,255,255,.15) 95%);}.bubble.popped::after{background:linear-gradient(22deg,transparent 35%,rgba(255,255,255,.37) 36%,transparent 39%),linear-gradient(116deg,transparent 53%,rgba(56,110,131,.15) 54%,transparent 57%)}.zoom-label{white-space:nowrap}.sheet-frame{min-height:350px}@media(max-width:700px){.sheet{grid-template-columns:repeat(8,minmax(0,1fr))}.map-tools{align-items:stretch}.identity,.navigate,.jump{width:100%}.location-bar{font-size:11px}}

/* V15: zoomable world canvas; preserve the approved V7 bubble CSS above. */
.sheet-frame{position:relative;height:min(69vh,710px);min-height:420px;overflow:hidden;touch-action:none;cursor:grab;background:#e9e6dd}.sheet-frame.dragging{cursor:grabbing}#map{position:absolute;inset:0;width:100%;height:100%;display:block}#bubble-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}#bubble-layer .bubble{position:absolute;pointer-events:auto;display:block;min-width:0;touch-action:none}.map-overlay{position:absolute;inset:14px 14px auto 14px;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-start}.map-actions{display:flex;gap:6px;pointer-events:auto}.map-actions button{border:1px solid #55788b;background:#102c3de8;color:white;padding:9px 12px;border-radius:9px;font-size:16px;cursor:pointer}.map-actions #fit{font-size:12px}.mini-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;background:#112a3ddd;padding:6px;border-radius:12px;color:#fff;pointer-events:auto}.mini-wrap canvas{width:112px;height:112px;border:1px solid #92aeb8;cursor:crosshair}.mini-wrap small{font-size:9px;letter-spacing:.09em}.scale-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);border-radius:20px;padding:7px 12px;color:#fff;background:#112b3ddc;font-size:12px;pointer-events:none;white-space:nowrap}.bottomline{display:flex;justify-content:space-between;gap:12px;margin:10px 4px;color:#c4dce8;font-size:12px}.map-tools button,.toolbar button{cursor:pointer}@media(max-width:700px){.sheet-frame{height:62vh;min-height:380px}.mini-wrap canvas{width:76px;height:76px}.map-overlay{inset:8px 8px auto 8px}.map-actions button{padding:7px 9px}.bottomline{flex-wrap:wrap}}

/* V20: detailed bubbles rendered entirely on canvas, not in HTML. */
#bubble-layer{display:none!important}

/* Stripe sandbox purchase panel — isolated from canvas/map styles */
.shop-panel{margin:12px 0;padding:14px;border:1px solid #334155;border-radius:14px;background:#111c30;color:#e2e8f0}.shop-heading{display:flex;gap:10px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}.shop-heading small,.shop-panel>small{color:#94a3b8}.shop-packages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}.shop-packages button{padding:11px 8px;background:#1e293b;color:#f8fafc;border:1px solid #38bdf8;border-radius:9px;cursor:pointer;font:inherit}.shop-packages b{display:block;color:#38bdf8}.shop-packages button:disabled{opacity:.5;cursor:wait}@media(max-width:640px){.shop-packages{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Stage 3: small email-access panel. Does not affect the map/canvas styles. */
.access-panel{margin:12px 0;padding:14px;background:#11283b;border:1px solid #335b75;border-radius:14px;color:#e2e8f0}
.access-heading{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.access-heading small,.access-panel>small{color:#afc6d5}
.access-panel form{margin:12px 0 9px}
.access-panel label{font-size:12px;display:block;margin-bottom:5px;color:#b7d4e7}
.access-inputs{display:flex;gap:8px;flex-wrap:wrap}
.access-inputs input{flex:1 1 190px;min-width:0;padding:10px 12px;border-radius:9px;color:#fff;border:1px solid #47657b;background:#091b2b;font:inherit}
.access-panel button{background:#2563eb;color:#fff;border:1px solid #60a5fa;border-radius:9px;padding:10px 13px;cursor:pointer;font:inherit;font-weight:650}
.access-panel button:disabled{opacity:.55;cursor:wait}
#guest-signed-in:not([hidden]){display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:13px 0;color:#d1eaff;font-size:13px}
#guest-credits{font-size:18px;color:#7dd3fc}#guest-signed-email{overflow-wrap:anywhere}
[hidden]{display:none!important}