*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: the globe fills the screen; the HUD sits in the four corners with a 16px gutter; the composer docks right on desktop and becomes a bottom sheet on phones */
:root{
  --space:#060a14;
  --ocean:#123055;
  --land:#dfe2d3;
  --land-line:#7d8a78;
  --label:#4b5546;
  --chrome:rgba(12,18,32,.86);
  --chrome-solid:#0d1424;
  --line:rgba(205,220,255,.14);
  --fg:#eef2f8;
  --muted:#97a3ba;
  --accent:#ffd84d;
  --accent-ink:#1f1a05;
  --good:#7ee2a8;
  --dim:#5d6880;
  --danger:#ff7a7a;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --f-hand:"Caveat","Segoe Print","Comic Sans MS",cursive;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--space);color:var(--fg);font:14px/1.45 var(--f-body);overflow:hidden}
#app{position:relative;height:100%;overflow:hidden}
#globe{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none}
#sky{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#globe.dragging{cursor:grabbing}
#globe.hovering{cursor:pointer}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.panel{background:var(--chrome);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.brand{position:absolute;top:16px;left:16px;max-width:min(360px,calc(100% - 32px));pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 14px rgba(0,0,0,.75)}
.brand h1{margin:0;font:800 30px/1 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.brand h1 span{color:var(--accent)}
.brand p{margin:8px 0 0;color:var(--muted);max-width:34ch;text-wrap:balance}

.top-actions{position:absolute;top:16px;right:16px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.select{appearance:none;background:var(--chrome) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2397a3ba'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--line);border-radius:999px;padding:9px 32px 9px 14px;backdrop-filter:blur(10px)}
.select option{background:var(--chrome-solid)}
.btn{border:1px solid var(--line);background:var(--chrome);border-radius:999px;padding:9px 16px;font-weight:600}
.btn:hover{border-color:rgba(205,220,255,.32)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:disabled{background:#3a4256;color:var(--muted);cursor:not-allowed;filter:none}
.btn-ghost{background:transparent}

.legend{position:absolute;left:16px;bottom:16px;width:300px;padding:14px;display:grid;gap:10px}
.legend-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.legend-more{display:none;flex:0 0 auto;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--line);background:transparent;place-items:center}
.legend-more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600}
.span-read{font:600 15px var(--f-display);font-variant-numeric:tabular-nums}
.tier-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tier-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.tier-ico{width:var(--sz);height:calc(var(--sz)*.72);border-radius:2px;background:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.5);justify-self:center}
.tier-ico-wrap{width:26px;display:grid;place-items:center}
.tier-txt{min-width:0}
.tier-name{font-weight:600}
.tier-txt small{font-weight:500;color:var(--muted);margin-left:6px;font-size:12px}
.tier-seen{display:block;color:var(--muted);font-size:12px}
.chip{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.chip.on{color:var(--good)}
.chip.dots{color:var(--accent)}
.chip.off{color:var(--dim)}
.toggle{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;cursor:pointer}
.toggle input{accent-color:var(--accent);width:16px;height:16px}
.status{margin:0;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.status strong{color:var(--fg);font-weight:600}

.zoom{position:absolute;right:16px;bottom:16px;display:grid;gap:6px}
.zoom button{width:42px;height:42px;border-radius:12px;font-size:20px;line-height:1;display:grid;place-items:center}

.crosshair{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;border:2px solid var(--accent);border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.35),inset 0 0 0 2px rgba(0,0,0,.35)}
.crosshair::before,.crosshair::after{content:"";position:absolute;background:var(--accent);left:50%;top:50%}
.crosshair::before{width:2px;height:64px;margin:-32px 0 0 -1px;mask:linear-gradient(#000 0 40%,transparent 40% 60%,#000 60%);-webkit-mask:linear-gradient(#000 0 40%,transparent 40% 60%,#000 60%)}
.crosshair::after{height:2px;width:64px;margin:-1px 0 0 -32px;mask:linear-gradient(90deg,#000 0 40%,transparent 40% 60%,#000 60%);-webkit-mask:linear-gradient(90deg,#000 0 40%,transparent 40% 60%,#000 60%)}

.sheet{position:absolute;top:16px;right:16px;bottom:16px;width:380px;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:16px;background:var(--chrome-solid)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sheet h2{margin:0;font:800 22px var(--f-display);letter-spacing:-.01em}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;font-size:18px;line-height:1;display:grid;place-items:center}
.place{display:grid;gap:4px;padding:10px 12px;border-radius:10px;background:rgba(255,216,77,.08);border:1px dashed rgba(255,216,77,.45)}
.place-coords{font:600 15px var(--f-display);font-variant-numeric:tabular-nums}
.place-hint{color:var(--muted);font-size:12.5px}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;border:1px solid var(--line)}
.seg button{border:0;background:transparent;border-radius:999px;padding:7px;font-weight:600;color:var(--muted)}
.seg button[aria-selected="true"]{background:var(--fg);color:var(--chrome-solid)}
.paper-input{display:block;width:100%;min-height:150px;resize:vertical;border:0;border-radius:3px;padding:14px 16px;font:700 30px/1.05 var(--f-hand);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.paper-input::placeholder{color:currentColor;opacity:.4}
.count{text-align:right;font-size:12px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
#pad{display:block;width:100%;aspect-ratio:400/288;max-width:100%;border-radius:3px;touch-action:none;cursor:crosshair;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.pad-tools{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.pad-tools button{padding:6px 12px;font-size:13px}
fieldset{border:0;margin:0;padding:0;min-width:0}
fieldset legend{padding:0;margin-bottom:8px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:32px;height:32px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);padding:0}
.swatch[aria-pressed="true"]{border-color:var(--fg);box-shadow:0 0 0 2px var(--chrome-solid) inset}
.tiers{display:grid;gap:8px}
.tier-opt{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.tier-opt input{position:absolute;opacity:0;pointer-events:none}
.tier-opt:has(input:checked){border-color:var(--accent);background:rgba(255,216,77,.07)}
.tier-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.tier-opt .price{font:700 16px var(--f-display);font-variant-numeric:tabular-nums}
.fine{margin:0;font-size:12.5px;color:var(--muted)}
.fine.err{color:var(--danger)}
.wide{width:100%;padding:12px 16px;font-size:15px}

.detail{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;padding:16px;display:grid;gap:12px;background:var(--chrome-solid)}
.detail canvas{display:block;width:100%;height:auto;max-width:100%}
.meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:13px}
.meta dt{color:var(--muted)}
.meta dd{margin:0;font-variant-numeric:tabular-nums;min-width:0}
.meta a{color:var(--accent)}
.detail-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn-danger{color:var(--danger);border-color:rgba(255,122,122,.4)}

.toast{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);padding:10px 16px;border-radius:999px;background:var(--fg);color:var(--chrome-solid);font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:calc(100% - 32px);text-align:center}

@media (max-width:700px){
  .brand h1{font-size:24px}
  .brand p{display:none}
  .top-actions{top:56px;left:16px;right:16px;justify-content:space-between;flex-wrap:nowrap}
  .top-actions .select{min-width:0;flex:1 1 auto}
  .top-actions .btn-primary{flex:0 0 auto}
  /* Phones: the legend collapses to a one-line bar; the chevron opens the full panel. */
  .legend{width:auto;right:66px}
  .legend-more{display:grid}
  .tier-seen{display:none}
  .legend .toggle{font-size:12px}
  .legend:not(.open){display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:999px}
  .legend:not(.open) .eyebrow,.legend:not(.open) .toggle,.legend:not(.open) .status,.legend:not(.open) .chip,.legend:not(.open) .tier-txt small{display:none}
  .legend:not(.open) .legend-head{flex:0 0 auto}
  .legend:not(.open) .span-read{font-size:13px;white-space:nowrap}
  /* Closed bar: the sizes are tiny note icons at their relative sizes, no scrolling.
     Bright = visible now, dashed = shown as dots, faded = zoom in. Names stay readable to screen readers. */
  .legend:not(.open) .tier-list{display:flex;align-items:center;justify-content:center;gap:12px;flex:1 1 auto;min-width:0}
  .legend:not(.open) .tier-row{display:block;position:relative}
  .legend:not(.open) .tier-txt,.legend:not(.open) .chip{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .legend:not(.open) .tier-ico-wrap{width:auto;height:18px;display:grid;place-items:center}
  .legend:not(.open) .tier-ico{transition:opacity .2s}
  .legend:not(.open) .tier-row:has(.chip.dots) .tier-ico{background:transparent;outline:1.5px dashed var(--accent);outline-offset:-1.5px;box-shadow:none}
  .legend:not(.open) .tier-row:has(.chip.off) .tier-ico{opacity:.25}
  .legend.open{padding:12px 12px 10px;gap:8px}
  .legend.open .legend-head{padding-right:36px}
  .legend.open .legend-more{position:absolute;top:8px;right:8px}
  .legend.open .legend-more svg{transform:rotate(180deg)}
  .sheet{top:auto;left:0;right:0;bottom:0;width:auto;max-height:62%;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  body.composing .legend,body.composing .zoom{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Production additions */
.tier-opt.locked{opacity:.55;cursor:not-allowed}
.tier-opt.locked .price{font-size:12px;font-weight:600;color:var(--muted);font-family:var(--f-body)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.detail-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.detail-nav .icon-btn{font-size:22px}