/* Jang Globe 3D — presentation layer for the WebGL planet. Removing this file only loses polish, not function. */
.jg-boot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:300px;color:#b9d2d0;font-size:12px}
.jg-boot i{width:30px;height:30px;border-radius:50%;border:2px solid #36525a;border-top-color:#e6c16d;animation:jgspin .9s linear infinite}

.jg3{background:radial-gradient(120% 90% at 85% -10%,#142b38 0%,#0a161f 48%,#060d13 100%);border-color:#3c5b66}
.jg3 .jg-kicker{letter-spacing:2.2px;color:#7fd0d6}
.jg3-stage.jg-stage{height:clamp(380px,118vw,660px);border:1px solid #3b6670;border-radius:18px;
  background:
    radial-gradient(60% 55% at 28% 26%,rgba(255,226,170,.10),transparent 62%),
    radial-gradient(90% 80% at 50% 50%,#0b1a26 0%,#050b11 70%,#02060a 100%);
  box-shadow:inset 0 0 70px #000c,inset 0 0 0 1px #ffffff07,0 14px 40px #0008}
.jg3-stage::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit;
  background:radial-gradient(120% 120% at 50% 50%,transparent 58%,rgba(0,0,0,.55) 100%)}
.jg3-stage .jg-canvas{position:absolute;inset:0;z-index:1;outline:none}
.jg3-stage.is-grabbing .jg-canvas{cursor:grabbing}
.jg3-stage:focus-visible{outline:2px solid #e6c16d;outline-offset:2px}

.jg3-readout{position:absolute;z-index:4;top:10px;inset-inline-start:10px;display:flex;gap:6px;pointer-events:none;direction:rtl}
.jg3-readout span{font:700 10px/1 inherit;font-variant-numeric:tabular-nums;color:#cfe6e3;background:linear-gradient(180deg,#0b1a22d9,#07121aea);
  border:1px solid #4f7b83aa;border-radius:7px;padding:6px 8px;letter-spacing:.2px;box-shadow:0 2px 10px #0006}
.jg3-readout span:last-child{color:#f2dfb5}
.jg3-stage .jg-hint{z-index:4;inset-inline-end:10px;inset-inline-start:auto;left:auto;right:auto;bottom:10px;opacity:.85}
.jg3-stage .jg-load{z-index:6;background:radial-gradient(circle,#0a1822f2,#04090eff);transition:opacity .6s ease,visibility .6s}
.jg3-stage .jg-load.is-done{opacity:0;visibility:hidden}
.jg3-prog{font-variant-numeric:tabular-nums;letter-spacing:.5px;color:#e6c16d!important}

.jg3-labels{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.jg3-label{position:absolute;left:0;top:0;white-space:nowrap;font:700 10px/1 inherit;color:#eaf4ef;opacity:.78;
  text-shadow:0 0 4px #000,0 0 8px #000c,0 1px 2px #000;padding:2px 4px;will-change:transform}
.jg3-label.is-game{color:#ffe7a8;opacity:.96;font-size:10.5px}
.jg3-tag{position:absolute;left:0;top:0;z-index:5;pointer-events:none;min-width:96px;max-width:210px;text-align:center;direction:rtl;
  padding:7px 11px 8px;border-radius:10px;border:1px solid color-mix(in srgb,var(--tag-c,#e6c16d) 70%,#fff 0%);
  background:linear-gradient(180deg,#0e202bef,#07131bf5);box-shadow:0 8px 22px #000a,0 0 0 1px #00000066,0 0 22px -4px var(--tag-c,#e6c16d);will-change:transform}
.jg3-tag::after{content:'';position:absolute;left:50%;bottom:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);
  background:#07131b;border-right:1px solid var(--tag-c,#e6c16d);border-bottom:1px solid var(--tag-c,#e6c16d)}
.jg3-tag b{display:block;font-size:12px;color:#fff4d4;line-height:1.5}
.jg3-tag small{display:block;font-size:9.5px;color:var(--tag-c,#e6c16d);margin-top:2px;letter-spacing:.3px}

.jg3 .jg-zoom button{background:linear-gradient(180deg,#1b3340,#102430);border:1px solid #2f5360;transition:transform .15s,background .2s,box-shadow .2s}
.jg3 .jg-zoom button:active{transform:scale(.9)}
.jg3 .jg-zoom button:hover{box-shadow:0 0 12px -2px #e6c16d88}
.jg3 .jg-inspector{border-color:#3b5d68;background:linear-gradient(155deg,#16303b,#0a1820);position:relative;overflow:hidden}
.jg3 .jg-inspector::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--sel-c,#e6c16d);opacity:.9;box-shadow:0 0 14px var(--sel-c,#e6c16d)}
.jg3 .jg-selected{animation:jg3in .35s cubic-bezier(.2,.8,.2,1) both}
.jg3 .jg-selected b{font-size:16px}
.jg3 .jg3-dist{margin-top:6px;padding:6px 8px;border-radius:7px;background:#0a161d;border:1px dashed #3d6370;color:#bcd4d1}
.jg3 .jg3-dist b{display:inline;font-size:11px;color:#f2c969}
@keyframes jg3in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (min-width:720px){.jg3-stage.jg-stage{height:clamp(480px,64vh,660px)}}
@media (max-width:719px){
  .jg3 .jg-layout{grid-template-columns:1fr}
  .jg3-readout span{font-size:9px;padding:5px 7px}
  .jg3-tag{max-width:170px}
}
@media (prefers-reduced-motion:reduce){
  .jg3 .jg-selected,.jg-boot i{animation:none!important}
  .jg3-stage .jg-load{transition:none}
}