/* MY WORLD — Visual redesign branch for v1.7.7 PRE-DESIGN
   Visual layer only. No JS logic, data model, IDs or flows are changed. */

:root{
  --mw-space-0:#05070A;
  --mw-space-1:#080D14;
  --mw-space-2:#0B1320;
  --mw-panel:rgba(12,18,26,.86);
  --mw-panel-strong:rgba(12,18,26,.96);
  --mw-panel-soft:rgba(18,26,36,.72);
  --mw-text:#F6F1E7;
  --mw-muted:#C7C4BE;
  --mw-muted-2:#929AA4;
  --mw-gold:#E5BC65;
  --mw-gold-hi:#F5D995;
  --mw-gold-low:#A56E27;
  --mw-blue:#7FA8C2;
  --mw-line:rgba(229,188,101,.22);
  --mw-line-soft:rgba(255,255,255,.08);
  --mw-radius-sm:14px;
  --mw-radius-md:18px;
  --mw-radius-lg:24px;
  --mw-shadow:0 18px 56px rgba(0,0,0,.34);
  --mw-glow:0 0 30px rgba(229,188,101,.10);
  --mw-font:"Manrope","Segoe UI",Arial,sans-serif;
}

html,body{
  background:var(--mw-space-0);
  color:var(--mw-text);
  font-family:var(--mw-font);
}

body{letter-spacing:.005em}

.space{
  background:
    radial-gradient(ellipse at 68% 10%,rgba(57,86,130,.24) 0,rgba(30,46,72,.10) 26%,transparent 52%),
    radial-gradient(ellipse at 16% 78%,rgba(36,58,86,.12),transparent 42%),
    linear-gradient(180deg,var(--mw-space-1) 0%,var(--mw-space-0) 58%,#030507 100%);
}
.space:after{
  background-image:
    radial-gradient(circle,rgba(255,255,255,.82) .6px,transparent .8px),
    radial-gradient(circle,rgba(168,195,222,.52) .45px,transparent .65px);
  background-size:47px 47px,83px 83px;
  background-position:0 0,23px 19px;
  opacity:.19;
  mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.78) 52%,transparent 100%);
}

/* Brand / header */
.brand,.brand-small{
  color:var(--mw-gold);
  text-shadow:0 0 18px rgba(229,188,101,.08);
}
.brand-small{letter-spacing:.15em;font-weight:500}
.topbar{padding:12px 4px 8px}
.owner{font-size:20px;line-height:1.35;color:var(--mw-muted)}
.menu-btn,.close,.zoom-controls button{
  border:1px solid rgba(229,188,101,.30);
  background:linear-gradient(180deg,rgba(24,31,40,.92),rgba(10,15,22,.94));
  color:var(--mw-gold);
  box-shadow:inset 0 1px rgba(255,255,255,.03),0 8px 24px rgba(0,0,0,.18);
}
.menu-btn{width:48px;height:48px}

/* Main content */
.app{max-width:820px;padding:10px 16px 24px}
.hero{margin:10px 4px 10px}
.hero h2{font-size:30px;line-height:1.16;font-weight:500;letter-spacing:-.02em;margin-bottom:8px}
.hero p{font-size:20px;line-height:1.42;color:var(--mw-muted)}

.stats{gap:8px;margin:12px 0 14px}
.stat{
  background:linear-gradient(180deg,rgba(18,26,36,.82),rgba(10,15,22,.78));
  border:1px solid var(--mw-line);
  border-radius:var(--mw-radius-md);
  padding:10px 6px;
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 8px 24px rgba(0,0,0,.12);
}
.stat b{font-size:24px;line-height:1.15;font-weight:650;color:var(--mw-gold)}
.stat.wish b{color:#95BDD4}
.stat span{font-size:20px;line-height:1.25;min-height:0;color:var(--mw-muted)}

/* Existing SVG globe renderer: visual upgrade only */
.globe-wrap{
  width:min(calc(100vw - 32px),520px);
  overflow:visible;
  isolation:isolate;
}
.globe-wrap:before{
  content:"";
  position:absolute;
  inset:4%;
  border-radius:50%;
  background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.07),transparent 25%),radial-gradient(circle at 58% 65%,rgba(68,126,165,.10),transparent 58%);
  box-shadow:0 0 44px rgba(92,158,203,.16),0 0 90px rgba(37,83,123,.10);
  pointer-events:none;
  z-index:-1;
}
.globe-svg{
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.40)) drop-shadow(0 0 22px rgba(100,166,210,.16));
}
.globe-shell{stroke:#85B4D0;stroke-width:1;filter:drop-shadow(0 0 5px rgba(124,190,230,.24))}
.globe-grid{stroke:#A7CEE3;stroke-opacity:.12;stroke-width:.55}
.land{fill:#56665B;stroke:#D1C18C;stroke-opacity:.28;stroke-width:.5}
.marker-label-bg{fill:rgba(5,9,14,.88);stroke:rgba(229,188,101,.32)}
.marker-label{fill:var(--mw-text);font-size:20px;font-weight:650;stroke:#05070A;stroke-width:2.4}
.globe-hint{
  bottom:3%;
  background:rgba(5,9,14,.72);
  border:1px solid rgba(255,255,255,.06);
  color:var(--mw-muted);
  font-size:20px;
  padding:8px 12px;
  backdrop-filter:blur(10px);
}
.zoom-controls{right:3px;gap:8px}
.zoom-controls button{width:46px;height:46px;font-size:24px}

/* Filters + actions */
.filters{gap:8px;padding:10px 1px 8px}
.filter{
  min-height:46px;
  border-radius:999px;
  border:1px solid rgba(216,199,168,.20);
  background:rgba(13,20,28,.82);
  color:#E4E0D8;
  padding:0 15px;
  font-weight:600;
  font-size:20px;
  transition:background .18s,border-color .18s,transform .18s;
}
.filter.active{
  background:linear-gradient(180deg,var(--mw-gold-hi),var(--mw-gold));
  border-color:rgba(245,217,149,.9);
  color:#17130D;
  box-shadow:0 8px 24px rgba(229,188,101,.14),inset 0 1px rgba(255,255,255,.38);
}
.filter:active{transform:translateY(1px)}
.actions{gap:10px;margin-top:8px}
.actions .btn{min-height:52px;font-size:20px;padding:0 14px}
.note{font-size:20px;line-height:1.4;color:var(--mw-muted-2);margin-top:10px}

/* Buttons */
.btn{
  min-height:52px;
  border-radius:999px;
  padding:0 20px;
  font-weight:650;
  font-size:20px;
  letter-spacing:.005em;
  transition:transform .18s,filter .18s,box-shadow .18s;
}
.btn-gold{
  background:linear-gradient(180deg,#F4D894 0%,#E5BC65 46%,#C9943E 100%);
  color:#16120C;
  box-shadow:inset 0 1px rgba(255,255,255,.46),inset 0 -1px rgba(92,53,12,.24),0 12px 30px rgba(166,112,35,.20);
}
.btn-gold:hover{filter:brightness(1.035)}
.btn:active{transform:translateY(1px)}
.btn-dark{
  background:linear-gradient(180deg,rgba(24,32,42,.94),rgba(13,19,27,.94));
  color:var(--mw-text);
  border:1px solid rgba(229,188,101,.28);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.text-link{font-size:20px;color:var(--mw-gold)}

/* Overlays, cards and form system */
.overlay{background:rgba(1,4,7,.68);backdrop-filter:blur(5px)}
.sheet,.drawer{
  background:linear-gradient(180deg,rgba(16,23,32,.985),rgba(8,13,19,.99));
  border-color:var(--mw-line);
  box-shadow:var(--mw-shadow),var(--mw-glow);
}
.sheet{border-radius:28px 28px 0 0;padding:16px 18px 30px}
.drawer{padding:24px 20px}
.handle{background:linear-gradient(90deg,rgba(229,188,101,.15),rgba(229,188,101,.6),rgba(229,188,101,.15));height:3px}
.sheet h3,.drawer h3{font-size:28px;line-height:1.2;font-weight:600;letter-spacing:-.015em}
.label{font-size:20px;line-height:1.35;margin:16px 0 7px}
.input{
  min-height:54px;
  border-radius:var(--mw-radius-sm);
  border:1px solid rgba(216,199,168,.20);
  background:rgba(20,28,38,.86);
  color:var(--mw-text);
  padding:12px 14px;
  font-size:20px;
}
.input::placeholder{color:#8E969E}
.input:focus{border-color:rgba(229,188,101,.62);box-shadow:0 0 0 3px rgba(229,188,101,.07)}
textarea.input{height:106px}
.helper{font-size:20px;line-height:1.42;color:var(--mw-muted)}

.type-grid,.city-grid{gap:9px}
.type-btn,.city-btn{
  border-radius:var(--mw-radius-sm);
  border:1px solid var(--mw-line-soft);
  background:rgba(20,28,38,.82);
  color:var(--mw-text);
  font-size:20px;
}
.type-btn{min-height:68px;padding:10px 14px}
.type-btn small,.city-btn small{font-size:20px;line-height:1.3;color:var(--mw-muted)}
.type-btn.active{border-color:rgba(229,188,101,.68);background:rgba(229,188,101,.08);box-shadow:0 0 0 1px rgba(229,188,101,.06) inset}
.city-btn{min-height:58px;padding:9px 11px}

.section-title,.menu-section-label{font-size:20px;line-height:1.35;color:var(--mw-gold);letter-spacing:.06em}
.place-row{
  grid-template-columns:48px 1fr auto;
  gap:12px;
  background:rgba(19,27,37,.80);
  border:1px solid var(--mw-line-soft);
  border-radius:var(--mw-radius-md);
  padding:12px;
}
.place-icon{width:48px;height:48px;background:rgba(229,188,101,.09);font-size:22px}
.place-row b,.place-row small{font-size:20px;line-height:1.35}
.place-row small{color:var(--mw-muted)}
.place-row button{font-size:26px}
.trip-chip,.route-chip{font-size:20px;padding:8px 11px;background:rgba(17,25,34,.84)}
.menu-row{min-height:62px;font-size:20px;line-height:1.3;border-bottom-color:rgba(255,255,255,.065)}
.toast{font-size:20px;border-color:var(--mw-line);background:rgba(18,26,36,.96);box-shadow:0 14px 34px rgba(0,0,0,.30)}
.empty{font-size:20px;line-height:1.45;color:var(--mw-muted)}

/* Reveal/activation - only visual normalization */
.reveal p{font-size:20px;line-height:1.5;color:var(--mw-muted)}
.rule{background:linear-gradient(90deg,transparent 0%,rgba(229,188,101,.18) 12%,var(--mw-gold) 50%,rgba(229,188,101,.18) 88%,transparent 100%)}

/* Mobile master */
@media(max-width:767px){
  .app{max-width:100%;padding:8px 14px 22px}
  .topbar{padding-top:10px}
  .brand-small{font-size:20px}
  .hero h2{font-size:28px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:11px 8px}
  .globe-wrap{width:min(calc(100vw - 28px),440px)}
  .actions{grid-template-columns:1fr}
  .city-grid,.type-grid{grid-template-columns:1fr}
  .sheet{max-height:94%}
  .drawer{width:min(94%,440px)}
}

/* Desktop: same product, spatially recomposed */
@media(min-width:900px){
  .app{max-width:1180px;padding:18px 28px 36px}
  .topbar{padding:14px 6px 10px}
  .hero{max-width:760px;margin:14px auto 16px;text-align:center}
  .hero h2{font-size:36px}
  .stats{max-width:900px;margin:14px auto 16px;gap:12px}
  .stat{padding:14px 12px}
  .globe-wrap{width:min(52vw,600px)}
  .filters{justify-content:center;max-width:940px;margin:8px auto}
  .actions{max-width:700px;margin:12px auto 0}
  .sheet{left:50%;right:auto;width:min(760px,calc(100vw - 48px));transform:translateX(-50%);border:1px solid var(--mw-line);border-bottom:0}
  .drawer{width:min(520px,42vw)}
  .type-grid{grid-template-columns:repeat(3,1fr)}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* Readability + desktop correction pass */
.participant-title,.top-year-title,.owner-note,.owner-tag,.mode-label,.family-helper,.member-color-name,.member-color-note,
.world-name-preview,.setup-note,.license-info,.activation-status,.upgrade-status,.menu-mode-summary,.license-meta,
.check-row,.inline-link,.simple-content,.eula-copy,.share-status,.share-hint,.share-option-label{
  font-size:20px!important;
  line-height:1.4;
}
.year-chip,.participant-chip,.owner-chip,.mode-select{font-size:20px!important;min-height:44px}

@media(min-width:900px){
  #world .app,
  body.mode-personal #world .app{
    grid-template-columns:minmax(260px,320px) minmax(520px,700px) minmax(280px,330px);
    grid-template-rows:auto auto 1fr auto;
    column-gap:28px;
    row-gap:14px;
    padding:18px 26px 22px;
  }
  #world .topbar,body.mode-personal #world .topbar{grid-column:1/-1;grid-row:1}
  #world .hero,body.mode-personal #world .hero{grid-column:1;grid-row:2;margin:0;align-self:start;text-align:left}
  #world .hero h2,body.mode-personal #world .hero h2{font-size:32px}
  #world .hero p,body.mode-personal #world .hero p{font-size:20px;line-height:1.45;max-width:320px}

  #world .participant-panel,body.mode-personal #world .participant-panel{
    grid-column:1;grid-row:3;margin:0;padding:14px;
    border:1px solid var(--mw-line-soft);border-radius:var(--mw-radius-md);
    background:rgba(14,21,30,.62);align-self:start
  }
  #world .participant-filters{display:grid;grid-template-columns:1fr;gap:8px}
  #world .participant-chip{width:100%;text-align:left}

  #world .stats,body.mode-personal #world .stats{
    grid-column:2;grid-row:2;width:100%;max-width:700px;justify-self:center;
    grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0
  }
  #world .stat,body.mode-personal #world .stat{padding:10px 8px}
  #world .stat b{font-size:24px}
  #world .stat span{font-size:20px;line-height:1.2;min-height:0}

  #world .globe-wrap,body.mode-personal #world .globe-wrap{
    grid-column:2;grid-row:3/5;align-self:center;justify-self:center;
    width:min(100%,620px);max-width:620px;margin:0 auto
  }
  #world .globe-hint{font-size:20px}

  #world .top-year-filter,body.mode-personal #world .top-year-filter{
    grid-column:3;grid-row:2;margin:0;padding:14px;
    border:1px solid var(--mw-line-soft);border-radius:var(--mw-radius-md);
    background:rgba(14,21,30,.62);align-self:start
  }
  #world .filters,body.mode-personal #world .filters{
    grid-column:3;grid-row:3;margin:0;padding:14px;display:grid;grid-template-columns:1fr;gap:9px;
    border:1px solid var(--mw-line-soft);border-radius:var(--mw-radius-md);
    background:rgba(14,21,30,.62);align-self:start
  }
  #world .filter,body.mode-personal #world .filter{width:100%;min-height:48px;text-align:left;padding:0 15px;font-size:20px}
  #world .actions,body.mode-personal #world .actions{
    grid-column:3;grid-row:4;margin:0;align-self:end;display:grid;grid-template-columns:1fr;gap:9px
  }
  #world .actions .btn,body.mode-personal #world .actions .btn{min-height:52px;font-size:20px}
  #world .note{display:none}
}

/* Stage 2 — component normalization and accessibility/readability pass.
   Visual only: no selectors alter DOM state or functional behaviour. */

/* Hard project rule: interface text is >= 20px unless separately approved. */
.reveal p,.owner,.hero p,.stat span,.marker-label,.globe-hint,.filter,.actions .btn,.note,
.label,.input,.type-btn,.type-btn small,.city-btn,.city-btn small,.helper,.section-title,
.trip-chip,.route-chip,.menu-row,.top-year-title,.year-chip,.menu-toggle-row,.year-filter label,
.year-filter select,.visit-chip,.muted-small,.future-year-warning strong,.future-year-warning p,
.future-year-actions .btn,.participant-title,.participant-chip,.owner-chip,.owner-note,.owner-tag,
.mode-label,.mode-select,.combined-icons,.family-helper,.member-color-name,.member-color-note,
.setup-back,.setup-lead,.setup-name,.setup-member-label,.color-title,.setup-note,.menu-member-preview,
.menu-member-dot,.world-name-preview,#world .hero p,#world .stat span,#world .actions .btn,#world .note,
#world .globe-hint,body.mode-personal #world .hero p,body.mode-personal #world .actions .btn,
.share-globe-control.auto,.share-dream-choice,.share-dream-choice small,.share-privacy,.share-status,
#addOverlay .type-btn,#addOverlay .type-btn small,.activation-card p,.license-info,.check-row,
.activation-status,.simple-content,.tech-note,.menu-section-label,.menu-mode-summary,.license-meta,
.simple-content h4,.simple-content .subtle,.upgrade-block p,.upgrade-status,.core-error{
  font-size:20px!important;
  line-height:1.4;
}

/* Brand treatment stays editable until the final wordmark asset is DESIGN LOCK. */
.brand{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:.18em;
  color:var(--mw-gold);
  text-shadow:0 0 14px rgba(229,188,101,.12);
}
.brand-small{font-size:22px;line-height:1.2}
.brand-o{
  box-shadow:inset -3px -4px 8px rgba(0,0,0,.42),inset 2px 2px 4px rgba(255,247,210,.18),0 0 13px rgba(229,188,101,.26);
}

/* Globe: richer volume, still the exact same SVG renderer and interactions. */
.globe-wrap{background:transparent}
.globe-wrap:after{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  pointer-events:none;
  z-index:4;
  box-shadow:
    inset -34px -24px 60px rgba(0,0,0,.33),
    inset 18px 12px 42px rgba(174,220,244,.055),
    inset 0 0 0 1px rgba(178,222,245,.08);
}
.globe-svg{position:relative;z-index:2}
.zoom-controls{z-index:6}
.globe-hint{z-index:6}
.land{
  fill:#5D6B5D;
  stroke:#D8C79B;
  stroke-opacity:.34;
  stroke-width:.55;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
.marker-halo{filter:drop-shadow(0 0 6px currentColor)}

/* Activation / setup screens */
.activation-screen,.setup{
  background:linear-gradient(180deg,rgba(5,8,12,.12),rgba(3,5,8,.38));
}
.activation-card,.setup-inner{
  border:1px solid var(--mw-line);
  background:linear-gradient(180deg,rgba(15,22,31,.94),rgba(7,12,18,.96));
  box-shadow:var(--mw-shadow),var(--mw-glow);
}
.activation-card{border-radius:28px;padding:28px 24px}
.activation-card h1,.setup h1{font-weight:550;letter-spacing:-.025em;color:var(--mw-text)}
.activation-card .btn,.setup .btn{font-size:20px;min-height:54px}
.license-picker{display:flex;align-items:center;justify-content:center}
.check-row{
  border:1px solid var(--mw-line-soft);
  border-radius:var(--mw-radius-md);
  background:rgba(18,26,36,.68);
  padding:14px;
}
.check-row input{width:22px;height:22px;accent-color:var(--mw-gold)}
.inline-link{font-size:20px!important;color:var(--mw-gold)}

.setup-inner{border-radius:28px;padding:22px}
.setup-card,.upgrade-block,.setup-world-name{
  border:1px solid var(--mw-line-soft);
  border-radius:var(--mw-radius-md);
  background:rgba(17,25,34,.72);
}
.setup-card{padding:16px;margin:10px 0}
.upgrade-block,.setup-world-name{padding:16px}
.setup-name{min-height:52px;border-radius:var(--mw-radius-sm);background:rgba(10,16,23,.82);color:var(--mw-text)}
.color-swatch{width:38px;height:38px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.custom-color{width:42px;height:42px}

/* Drawers/sheets and menu */
.sheet-head{align-items:center}
.menu-toggle-row{
  min-height:62px;
  border-bottom:1px solid rgba(255,255,255,.065);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.menu-toggle-row input{width:22px;height:22px;accent-color:var(--mw-gold)}
.menu-section-label{margin-top:20px;color:var(--mw-gold);text-transform:uppercase;letter-spacing:.08em}
.menu-row{padding:10px 0}
.menu-row:hover{color:var(--mw-gold)}

/* Share UI */
.share-card,.share-preview,.share-controls,.share-option,
.share-dream-choice,.share-privacy{
  border-color:var(--mw-line-soft)!important;
}
.share-dream-choice,.share-option{
  background:rgba(18,26,36,.76)!important;
  border-radius:var(--mw-radius-sm)!important;
}
.share-dream-choice.active,.share-option.active{
  border-color:rgba(229,188,101,.60)!important;
  background:rgba(229,188,101,.08)!important;
}
.share-actions .btn{font-size:20px;min-height:52px}

/* Narrow devices: preserve content and readability; scrolling is allowed in core. */
@media(max-width:430px){
  .app{padding-left:14px;padding-right:14px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat{min-height:102px;display:grid;align-content:center}
  .filters{display:grid;grid-template-columns:1fr;gap:8px}
  .filter-break{display:none}
  .filter{width:100%;text-align:left;min-height:48px}
  .actions{grid-template-columns:1fr;gap:9px}
  .globe-wrap{width:min(calc(100vw - 28px),400px)}
  .zoom-controls{right:0}
  .type-grid,.city-grid,.coord-grid,.plan-row{grid-template-columns:1fr!important}
  .sheet{padding-left:16px;padding-right:16px}
  .activation-card,.setup-inner{margin:14px;padding:20px 16px}
}

/* Tablet: single product system, not a stretched phone. */
@media(min-width:768px) and (max-width:899px){
  .app{max-width:820px;padding:18px 28px 30px}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .globe-wrap{width:min(66vw,560px)}
  .filters{justify-content:center}
  .actions{grid-template-columns:repeat(3,1fr)}
  .sheet{left:50%;right:auto;width:min(720px,calc(100vw - 40px));transform:translateX(-50%);border:1px solid var(--mw-line);border-bottom:0}
}

/* Desktop polish */
@media(min-width:900px){
  #world .app,body.mode-personal #world .app{max-width:1440px;width:100%;margin:0 auto}
  #world .topbar,body.mode-personal #world .topbar{padding-bottom:4px}
  #world .hero,body.mode-personal #world .hero{
    border:1px solid var(--mw-line-soft);
    border-radius:var(--mw-radius-md);
    background:rgba(14,21,30,.42);
    padding:18px;
  }
  #world .globe-wrap,body.mode-personal #world .globe-wrap{width:min(42vw,620px)}
  .drawer{border-radius:28px 0 0 28px}
  .activation-card{width:min(620px,calc(100vw - 48px))}
  .setup-inner{width:min(760px,calc(100vw - 48px));margin:36px auto}
}

/* Stage 3 — main world polish. Visual-only overrides; v1.7.7 behavior remains untouched. */

/* More cinematic depth without replacing the existing renderer. */
.space{
  background:
    radial-gradient(ellipse at 67% 13%,rgba(72,105,151,.20) 0,rgba(32,49,75,.08) 30%,transparent 58%),
    radial-gradient(ellipse at 20% 82%,rgba(27,52,78,.10),transparent 46%),
    linear-gradient(180deg,#080D14 0%,#05080C 52%,#020406 100%);
}
.space:after{
  background-image:
    radial-gradient(circle,rgba(255,255,255,.82) .55px,transparent .8px),
    radial-gradient(circle,rgba(185,207,229,.55) .45px,transparent .7px),
    radial-gradient(circle,rgba(229,188,101,.35) .4px,transparent .65px);
  background-size:53px 53px,89px 89px,137px 137px;
  background-position:0 0,31px 21px,67px 49px;
  opacity:.17;
}

/* Main screen surfaces */
#world .hero,
#world .participant-panel,
#world .top-year-filter,
#world .filters{
  box-shadow:inset 0 1px rgba(255,255,255,.022),0 14px 42px rgba(0,0,0,.12);
}
.stat{
  background:
    linear-gradient(180deg,rgba(18,27,38,.88),rgba(8,13,19,.82));
  border-color:rgba(229,188,101,.20);
}
.stat b{letter-spacing:-.02em}
.stat.wish{border-color:rgba(126,171,199,.18)}

/* Globe optical treatment. Same SVG nodes, projection, markers and controls. */
.globe-wrap{
  filter:saturate(1.02);
}
.globe-wrap:before{
  inset:2.5%;
  background:
    radial-gradient(circle at 31% 24%,rgba(221,241,250,.11) 0,rgba(144,200,228,.035) 18%,transparent 32%),
    radial-gradient(circle at 62% 68%,rgba(40,105,142,.11),transparent 58%);
  box-shadow:
    0 0 0 1px rgba(148,206,237,.035),
    0 0 32px rgba(111,183,222,.16),
    0 0 86px rgba(31,91,130,.13),
    0 26px 70px rgba(0,0,0,.34);
}
.globe-wrap:after{
  inset:7.5%;
  box-shadow:
    inset -42px -30px 70px rgba(0,0,0,.38),
    inset 24px 15px 48px rgba(185,226,246,.055),
    inset 0 0 0 1px rgba(177,222,244,.085);
}
.globe-shell{
  stroke:#8FC6E3;
  stroke-width:1.05;
  filter:drop-shadow(0 0 5px rgba(120,192,230,.34));
}
.globe-grid{stroke:#B5DAEC;stroke-opacity:.105;stroke-width:.48}
.land{
  fill:#5C6D61;
  stroke:#DCCB9E;
  stroke-opacity:.30;
  stroke-width:.48;
  filter:drop-shadow(0 1px 1.2px rgba(0,0,0,.22));
}
.marker-label-bg{fill:rgba(4,8,12,.90);stroke:rgba(229,188,101,.40);stroke-width:.8}
.marker-label{font-weight:650;letter-spacing:.005em}
.zoom-controls button{
  background:linear-gradient(180deg,rgba(20,28,38,.94),rgba(7,12,18,.94));
  border-color:rgba(229,188,101,.34);
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 7px 18px rgba(0,0,0,.20);
}
.zoom-controls button:hover{border-color:rgba(229,188,101,.58);background:rgba(26,35,46,.96)}
.globe-hint{box-shadow:0 8px 24px rgba(0,0,0,.18)}
.globe-wrap.map-mode:before,.globe-wrap.map-mode:after{display:none}
.globe-wrap.map-mode{filter:none;box-shadow:inset 0 1px rgba(255,255,255,.025)}

/* Functional controls: same semantics, stronger hierarchy. */
.filter,.participant-chip,.year-chip,.owner-chip{
  transition:border-color .18s,background .18s,color .18s,transform .18s,box-shadow .18s;
}
.filter:hover,.participant-chip:hover,.year-chip:hover,.owner-chip:hover{
  border-color:rgba(229,188,101,.42);
}
.filter.active{
  box-shadow:inset 0 1px rgba(255,255,255,.42),0 8px 24px rgba(197,139,54,.15);
}
.btn-gold{
  border:0;
  background:linear-gradient(180deg,#F7DEA0 0%,#E9C36D 40%,#D09B42 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.54),
    inset 0 -2px rgba(105,63,13,.20),
    0 10px 28px rgba(190,131,43,.20),
    0 1px 0 rgba(0,0,0,.26);
}
.btn-gold:hover{filter:brightness(1.035);box-shadow:inset 0 1px rgba(255,255,255,.58),inset 0 -2px rgba(105,63,13,.18),0 13px 32px rgba(190,131,43,.24)}
.btn-dark:hover{border-color:rgba(229,188,101,.46);background:linear-gradient(180deg,rgba(29,38,49,.96),rgba(14,21,30,.96))}

/* Modal hierarchy */
.sheet,.drawer{
  background:
    linear-gradient(180deg,rgba(17,25,35,.985),rgba(7,12,18,.995));
}
.sheet:before,.drawer:before{
  content:"";
  position:absolute;
  pointer-events:none;
  inset:0;
  background:radial-gradient(circle at 50% 0,rgba(229,188,101,.035),transparent 32%);
}
.sheet>* ,.drawer>*{position:relative;z-index:1}
.sheet h3,.drawer h3{color:#FAF6EC}
.input:hover{border-color:rgba(216,199,168,.34)}
.type-btn:hover,.city-btn:hover{border-color:rgba(229,188,101,.34);background:rgba(24,33,44,.88)}
.place-row:hover{border-color:rgba(229,188,101,.24)}
.menu-row{transition:color .16s,background .16s,padding-left .16s}
.menu-row:hover{background:rgba(229,188,101,.035);padding-left:6px}

/* Share preview/control polish */
.share-option,.share-dream-choice{transition:border-color .18s,background .18s,transform .18s}
.share-option:active,.share-dream-choice:active{transform:translateY(1px)}
.share-privacy{background:rgba(10,17,24,.62)!important;border-radius:var(--mw-radius-sm)!important;padding:13px!important}

/* Mobile visual rhythm: preserve 20px rule, avoid accidental edge collisions. */
@media(max-width:430px){
  .topbar{gap:12px}
  .owner{max-width:calc(100vw - 112px);overflow-wrap:anywhere}
  .hero{margin-top:12px;margin-bottom:12px}
  .hero h2{margin-bottom:10px}
  .stats{margin-bottom:16px}
  .globe-wrap{margin-top:6px;margin-bottom:10px}
  .zoom-controls{right:2px}
  .filters{margin-top:4px}
  .actions{margin-top:14px}
  .note{padding:0 10px;margin-top:12px}
  .sheet h3,.drawer h3{font-size:26px}
}

/* Desktop composition refinement */
@media(min-width:900px){
  #world .app,body.mode-personal #world .app{
    min-height:100dvh;
    align-content:center;
  }
  #world .hero,body.mode-personal #world .hero{padding:20px}
  #world .participant-panel,#world .top-year-filter,#world .filters{backdrop-filter:blur(10px)}
  #world .globe-wrap,body.mode-personal #world .globe-wrap{width:min(43vw,640px)}
  #world .actions,body.mode-personal #world .actions{padding-bottom:8px}
  .sheet{max-height:min(90dvh,860px)}
}

/* Stage 4 — production-facing polish. Visual only; no DOM/JS behavior changes. */
#runtimeModeLabel{display:none!important}
#world .topbar>div:first-child{display:flex;align-items:center;min-height:48px}
#world .brand-small{font-size:24px;letter-spacing:.18em}
.globe-shell{
  stroke:#76AFCB;
  stroke-width:.82;
  filter:drop-shadow(0 0 4px rgba(112,179,214,.24));
}
.land{
  fill:#506157;
  stroke:#C5B581;
  stroke-opacity:.22;
  stroke-width:.40;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.24));
}
@media(max-width:430px){
  #world .brand-small{font-size:22px}
}