/* Under construction: a small isometric city put up by a crew of builders.
   Self-hosted fonts (the shell blocks Google Fonts). Everything scoped under .uc-stage because the shell styles body. */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/bigshoulders-900.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/jbmono-400.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/cinzel-var.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/intertight-400.woff2) format('woff2')}

html,body{margin:0;background:#1b2a4a}
.uc-stage{
  --ink:#172033;
  --ink-2:#4a5568;
  --paper:rgba(255,252,246,.92);
  --line:rgba(23,32,51,.12);
  --teal:#1f9e8f;
  --teal-ink:#0d5f55;
  --orange:#ff7a1a;
  --yellow:#ffd23f;
  --sky:#a9dbf5;
  --display:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --body:'Inter Tight',Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  box-sizing:border-box;position:relative;min-height:100svh;overflow:hidden;
  font-family:var(--body);color:var(--ink);background:var(--sky);
  -webkit-font-smoothing:antialiased;
}
.uc-stage *,.uc-stage *::before,.uc-stage *::after{box-sizing:inherit}

/* ---- the world ---- */
.uc-world{position:absolute;inset:0;overflow:hidden;perspective:1400px;perspective-origin:50% 40%}
.uc-world canvas{
  display:block;width:100%;height:100%;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--px,0px),var(--py,0px),0);
  transform-origin:50% 60%;will-change:transform;transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.uc-stage[data-grabbing] .uc-world canvas{transition:none}
.uc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tooltip over a building */
.uc-tip{
  position:absolute;z-index:4;pointer-events:none;transform:translate(-50%,calc(-100% - 14px));
  background:var(--ink);color:#fff;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.3;
  box-shadow:0 10px 30px rgba(23,32,51,.25);white-space:nowrap;
}
.uc-tip strong{display:block;font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.uc-tip span{font-family:var(--mono);color:#cbd5e1}
.uc-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--ink)}
.uc-tip[hidden]{display:none}

/* ---- brand bar ---- */
.uc-brand{position:absolute;z-index:3;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.uc-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.01em;font-size:15px;padding:8px 12px;border-radius:999px;background:var(--paper);box-shadow:0 2px 10px rgba(23,32,51,.12)}
.uc-logo svg{color:var(--teal)}
.uc-stamp{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--yellow);padding:8px 12px;border-radius:999px;box-shadow:0 2px 10px rgba(23,32,51,.12)}
.uc-stamp i{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(255,122,26,.6);animation:uc-pulse 1.6s ease-out infinite}
.uc-stage[data-state="done"] .uc-stamp{background:var(--teal);color:#fff}
.uc-stage[data-state="done"] .uc-stamp i{background:#fff;animation:none}
@keyframes uc-pulse{0%{box-shadow:0 0 0 0 rgba(255,122,26,.6)}100%{box-shadow:0 0 0 10px rgba(255,122,26,0)}}

/* ---- the card ---- */
.uc-card{
  position:absolute;z-index:3;left:24px;top:50%;transform:translateY(-50%);width:min(400px,calc(100% - 48px));
  background:var(--paper);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:18px;padding:26px 26px 22px;box-shadow:0 24px 60px rgba(23,32,51,.22),0 1px 0 rgba(255,255,255,.6) inset;
}
.uc-eyebrow{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink)}
.uc-h1{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(34px,4.2vw,52px);line-height:.95;letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
.uc-host{color:var(--teal);overflow-wrap:anywhere}
.uc-caret{display:inline-block;width:.08em;height:.8em;margin-left:.08em;background:var(--orange);vertical-align:-.08em;animation:uc-blink 1s steps(1) infinite}
@keyframes uc-blink{50%{opacity:0}}
.uc-lede{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}

.uc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.uc-stats div{margin:0}
.uc-stats dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.uc-stats dd{margin:2px 0 0;font-family:var(--display);font-weight:900;font-size:30px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.uc-stats dd small{font-size:14px;color:var(--ink-2);font-family:var(--mono);margin-left:2px}

.uc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.uc-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;font:600 14px/1 var(--body);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .15s ease,background .15s ease}
.uc-btn:active{transform:translateY(1px)}
.uc-btn--primary{background:var(--ink);color:#fff}
.uc-btn--primary:hover{background:#0f1626}
.uc-btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.uc-btn--ghost:hover{background:#f1f5f9}
.uc-btn.is-copied{background:var(--teal);color:#fff;border-color:var(--teal)}
.uc-btn:focus-visible,.uc-logo:focus-visible,.uc-foot a:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.uc-hint{margin:14px 0 0;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-2)}

/* ---- foot ---- */
.uc-foot{position:absolute;z-index:3;left:24px;right:24px;bottom:16px;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ink)}
.uc-foot span,.uc-foot>a{background:var(--paper);padding:6px 10px;border-radius:999px}
.uc-foot a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--teal);text-underline-offset:2px}

/* ---- phones and short screens: card becomes a bottom sheet, city uses the top ---- */
@media (max-width:860px){
  .uc-card{left:12px;right:12px;top:auto;bottom:12px;transform:none;width:auto;padding:18px 18px 16px;border-radius:16px;max-height:62svh;overflow:auto}
  .uc-h1{font-size:clamp(28px,8.4vw,40px)}
  .uc-lede{font-size:14px;margin-top:10px}
  .uc-stats{margin-top:12px;padding-top:10px}
  .uc-stats dd{font-size:24px}
  .uc-actions{margin-top:12px}
  .uc-btn{padding:10px 12px;font-size:13px}
  .uc-hint{margin-top:10px}
  .uc-brand{top:12px;left:12px;right:12px}
  .uc-foot{display:none}
  .uc-world{perspective:none}
  .uc-world canvas{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .uc-stamp i,.uc-caret{animation:none}
  .uc-world canvas{transition:none;transform:none}
}


/* ======================================================================= world switching */
.uc-stage[data-world="city"] .for-castle,.uc-stage[data-world="castle"] .for-city{display:none !important}
.uc-foot__right{display:flex;gap:8px}
.uc-foot__right a{background:var(--paper);padding:6px 10px;border-radius:999px}

/* ======================================================================= the realm */
.uc-stage[data-world="castle"]{
  --paper:rgba(246,236,214,.94);
  --ink:#2b1d12;
  --ink-2:#5c4632;
  --line:rgba(43,29,18,.14);
  --teal:#8a2f2a;
  --teal-ink:#6d2420;
  --orange:#c98a1b;
  --yellow:#e7c466;
  --sky:#1b2a4a;
  --display:'Cinzel',Georgia,'Times New Roman',serif;
  background:#2b4f7a;
}
.uc-stage[data-world="castle"] .uc-world{perspective:none}
.uc-stage[data-world="castle"] .uc-world canvas{transform:none;transition:none;cursor:grab}
.uc-stage[data-world="castle"][data-grabbing] .uc-world canvas{cursor:grabbing}
.uc-stage[data-world="castle"] .uc-logo{background:var(--paper)}
.uc-stage[data-world="castle"] .uc-stamp{background:var(--yellow);color:var(--ink)}
.uc-stage[data-world="castle"] .uc-stamp i{background:var(--teal);box-shadow:0 0 0 0 rgba(138,47,42,.5);animation-name:uc-pulse-red}
@keyframes uc-pulse-red{0%{box-shadow:0 0 0 0 rgba(138,47,42,.5)}100%{box-shadow:0 0 0 10px rgba(138,47,42,0)}}
.uc-stage[data-world="castle"][data-state="done"] .uc-stamp{background:var(--teal);color:#fff}

.uc-card--castle{
  top:auto;bottom:56px;transform:none;width:min(380px,calc(100% - 48px));padding:24px 24px 20px;
  border-radius:6px;background:var(--paper);
  box-shadow:0 24px 60px rgba(20,10,0,.35),0 0 0 1px rgba(90,60,30,.25),inset 0 0 0 6px rgba(246,236,214,1),inset 0 0 0 7px rgba(138,47,42,.35);
}
.uc-card--castle::before{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;background:
  radial-gradient(120% 60% at 0% 0%,rgba(120,80,30,.10),transparent 60%),radial-gradient(90% 60% at 100% 100%,rgba(120,80,30,.12),transparent 60%)}
.uc-card--castle .uc-eyebrow{color:var(--teal-ink);letter-spacing:.22em;padding-right:130px}
.uc-card--castle .uc-h1{font-family:var(--display);font-weight:800;text-transform:none;font-size:clamp(26px,2.6vw,34px);line-height:1.08;letter-spacing:.01em}
.uc-card--castle .uc-host{color:var(--teal);overflow-wrap:anywhere}
.uc-card--castle .uc-caret{background:var(--orange)}
.uc-card--castle .uc-lede{font-size:14px}
.uc-card--castle .uc-stats dd{font-family:var(--display);font-weight:700;font-size:26px}
.uc-card--castle .uc-btn--primary{background:var(--teal);color:#fff}
.uc-card--castle .uc-btn--primary:hover{background:#6d2420}
.uc-card--castle .uc-btn--ghost{background:rgba(255,250,240,.9)}
.uc-card--castle .uc-btn.is-copied{background:#3f6b3a;border-color:#3f6b3a;color:#fff}
.uc-seal{position:absolute;top:-18px;right:18px;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c4433c,#7a1f1b 70%);box-shadow:0 6px 14px rgba(0,0,0,.3),inset 0 0 0 3px rgba(255,255,255,.12),inset 0 0 0 9px rgba(0,0,0,.08);display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:26px;color:#f7e3c6;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.uc-fold{position:absolute;top:10px;right:84px;border:0;background:transparent;color:var(--ink-2);font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px;cursor:pointer;border-radius:6px}
.uc-fold:hover{background:rgba(43,29,18,.08)}
.uc-unfold{position:absolute;z-index:3;left:24px;bottom:56px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);font:600 13px/1 var(--body);padding:10px 14px;cursor:pointer;box-shadow:0 10px 30px rgba(20,10,0,.3)}
.uc-unfold[hidden]{display:none}
.uc-stage[data-fold] .uc-card--castle{display:none}

.uc-cam{position:absolute;z-index:3;right:24px;bottom:56px;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;border-radius:14px;background:var(--paper);box-shadow:0 10px 30px rgba(20,10,0,.3)}
.uc-cam button{width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,250,240,.9);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.uc-cam button:hover{background:#fff}
.uc-cam button:focus-visible{outline:3px solid var(--orange);outline-offset:1px}
.uc-cam button[data-cam="home"]{grid-column:1 / -1;width:auto}

@media (max-width:860px){
  .uc-card--castle{left:12px;right:12px;bottom:12px;width:auto;padding:16px 16px 14px;max-height:52svh;overflow:auto}
  .uc-card--castle .uc-h1{font-size:clamp(20px,5.6vw,26px)}
  .uc-seal{width:44px;height:44px;font-size:20px;top:-14px;right:12px}
  .uc-unfold{left:12px;bottom:12px}
  .uc-cam{right:12px;bottom:auto;top:64px;grid-template-columns:1fr;padding:4px;gap:4px;border-radius:12px}
  .uc-cam button{width:36px;height:36px}
  .uc-cam button[data-cam="home"]{grid-column:auto;width:36px}
  .uc-stage[data-world="castle"] .uc-foot{display:none}
}