/* STABLE WORLD — Apple-grade design system. One typeface system, frosted glass, restraint. */
:root{
  --ink:#1d1d1f; --grey:#6e6e73; --faint:#86868b; --hair:#d2d2d7;
  --glass:rgba(255,255,255,.72); --glass-dark:rgba(20,20,22,.72);
  --accent:#b25f00; --blue:#0071e3; --green:#248a3d; --red:#d70015;
  --radius:18px; --shadow:0 12px 40px rgba(0,0,0,.12);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);background:linear-gradient(180deg,#fbfbfd 0%,#f5f5f7 60%,#ececf0 100%);-webkit-font-smoothing:antialiased;padding-bottom:86px}
.glass{background:var(--glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6)}
.topbar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid rgba(0,0,0,.06)}
.brand{font-size:19px;font-weight:700;letter-spacing:-.4px}
.brand-mark{color:var(--accent)}
.topbar-right{display:flex;gap:10px;align-items:center}
.badge{font-size:10px;font-weight:700;letter-spacing:1.2px;padding:5px 10px;border-radius:999px;background:#1d1d1f;color:#fff}
.badge.live{background:var(--green)}
.trough{font-size:14px;background:#fff;border:1px solid var(--hair);padding:5px 12px;border-radius:999px}
#stage{max-width:1060px;margin:0 auto;padding:26px 18px 10px}
.view{display:none}.view.active{display:block;animation:viewIn .35s ease}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.view-head h1{font-size:38px;letter-spacing:-1.2px;font-weight:700}
.view-head p{color:var(--grey);font-size:16px;margin:4px 0 18px}
.mount{min-height:300px}
.world-loading{color:var(--faint);font-size:15px;padding:38px 0;text-align:center}
.connect-mount{margin-top:22px}
/* tab bar — iOS style */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:60;display:flex;gap:2px;padding:6px;border-radius:26px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.05)}
.tabbar button{border:0;background:transparent;font-family:var(--font);font-size:10.5px;font-weight:600;color:var(--grey);padding:7px 12px 5px;border-radius:20px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:64px}
.tabbar button span{font-size:19px}
.tabbar button.active{background:#1d1d1f;color:#fff}
/* oration bar */
.oration-bar{position:sticky;bottom:96px;display:flex;gap:8px;align-items:center;padding:8px;border-radius:999px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.05);margin-top:16px}
.oration-bar input{flex:1;border:0;background:transparent;font-family:var(--font);font-size:16px;padding:10px 6px;outline:none;color:var(--ink)}
.mic{width:44px;height:44px;border-radius:50%;border:0;background:#1d1d1f;color:#fff;font-size:18px;cursor:pointer}
.mic.listening{background:var(--red);animation:pulse 1.1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(215,0,21,.4)}70%{box-shadow:0 0 0 14px rgba(215,0,21,0)}100%{box-shadow:0 0 0 0 rgba(215,0,21,0)}}
.send{border:0;background:var(--blue);color:#fff;font-family:var(--font);font-weight:600;font-size:15px;padding:11px 20px;border-radius:999px;cursor:pointer}
.oration-live{color:var(--grey);font-size:13.5px;min-height:20px;padding:8px 6px 0}
/* shared components for module UIs */
.card{background:#fff;border-radius:var(--radius);box-shadow:0 4px 24px rgba(0,0,0,.06);padding:16px}
.btn{border:0;border-radius:999px;padding:9px 16px;font-family:var(--font);font-weight:600;font-size:14px;cursor:pointer;background:#1d1d1f;color:#fff}
.btn.secondary{background:#e8e8ed;color:var(--ink)}
.btn.blue{background:var(--blue)} .btn.red{background:var(--red)} .btn.green{background:var(--green)}
.chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;padding:3px 9px;border-radius:999px;background:#f5f5f7;border:1px solid var(--hair);color:var(--grey)}
/* THE DANCE — canonical happy-dance animation. One rig, every body. */
@keyframes happyDance{0%,100%{transform:translateY(0) rotate(-3deg)}20%{transform:translateY(-14px) rotate(3deg)}40%{transform:translateY(0) rotate(-4deg) scale(1.04)}60%{transform:translateY(-11px) rotate(4deg)}80%{transform:translateY(-3px) rotate(-2deg)}}
.dancing{animation:happyDance .72s ease-in-out infinite;transform-origin:50% 90%}
@keyframes grazeSway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.state-IDLE{animation:grazeSway 3.4s ease-in-out infinite}
@keyframes canterBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.state-ACTIVE{animation:canterBob 0.9s ease-in-out infinite}
@keyframes gallopBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-11px) scale(1.02)}}
.state-BUSY{animation:gallopBob .42s ease-in-out infinite;filter:saturate(1.15)}
.state-HAPPY{animation:happyDance .72s ease-in-out infinite}
/* FaceTime modal */
.facetime{position:fixed;inset:0;z-index:100;background:var(--glass-dark);backdrop-filter:blur(24px);display:flex;align-items:center;justify-content:center}
.facetime .call-card{background:#1c1c1e;color:#fff;border-radius:28px;padding:34px 30px;text-align:center;max-width:360px;width:92%;box-shadow:var(--shadow)}
.facetime .avatar{font-size:56px;width:96px;height:96px;line-height:96px;border-radius:50%;background:#2c2c2e;margin:0 auto 14px;animation:pulse 1.2s infinite}
.facetime h2{font-size:24px;letter-spacing:-.5px}
.facetime p{color:#a1a1a6;margin:8px 0 20px;font-size:15px}
.facetime .row{display:flex;gap:12px;justify-content:center}
/* toast */
#toast-root{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:#1d1d1f;color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:var(--shadow);animation:viewIn .25s ease}
@media (max-width:640px){.view-head h1{font-size:30px}.tabbar button{min-width:52px;padding:7px 8px 5px}}

/* ——— STRICT APPLE PASS (UI & CX Standards, binding) ——— */
html{ -webkit-tap-highlight-color: transparent; }
::selection{ background:#f5a623; color:#000; }
.tabbar{ bottom:max(14px, env(safe-area-inset-bottom)); }
.tabbar button{ min-height:44px; }
.btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.mic{ flex:0 0 44px; }
.send{ min-height:44px; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2.5px solid var(--blue); outline-offset:2px; border-radius:8px;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .dancing, .state-HAPPY{ animation:happyDance .72s ease-in-out 1 !important; }
}

/* ——— v2 GAME LAYER: the Open World ——— */
.world-scene{ position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow); }
.world-scene > img{ width:100%; display:block; aspect-ratio:16/10; object-fit:cover; }
.world-title{ position:absolute; left:22px; bottom:20px; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.55); pointer-events:none; }
.world-kicker{ font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#ffd9a0; }
.world-title h1{ font-size:clamp(26px,4.6vw,44px); letter-spacing:-1.2px; line-height:1.02; margin:4px 0 5px; }
.world-title p{ font-size:15px; color:rgba(255,255,255,.92); }
.hotspot{ position:absolute; border:1px solid rgba(255,255,255,.55); background:rgba(15,15,18,.55); backdrop-filter:blur(10px) saturate(1.4); color:#fff; font-family:var(--font); font-weight:700; font-size:14.5px; padding:10px 14px; border-radius:999px; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; box-shadow:0 8px 26px rgba(0,0,0,.35); transition:transform .18s ease, background .18s ease; min-height:44px; }
.hotspot span{ font-weight:500; font-size:11.5px; color:rgba(255,255,255,.78); }
.hotspot:hover, .hotspot:focus-visible{ transform:scale(1.06); background:rgba(178,95,0,.82); }
.hs-coffee{ left:6%; bottom:34%; }
.hs-track{ right:5%; top:16%; }
.hs-war{ right:16%; top:38%; }
.hs-games{ left:38%; bottom:6%; }
.world-oration{ bottom:18px; margin-top:14px; }
.world-pulse{ color:var(--grey); font-size:13.5px; min-height:20px; padding:8px 6px 0; }
.scene-banner{ position:relative; border-radius:20px; overflow:hidden; margin-bottom:16px; box-shadow:0 8px 30px rgba(0,0,0,.14); }
.scene-banner img{ width:100%; display:block; aspect-ratio:16/7; object-fit:cover; }
.scene-banner-title{ position:absolute; left:20px; bottom:14px; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.6); }
.scene-banner-title h1{ font-size:clamp(26px,4vw,38px); letter-spacing:-1.1px; }
.scene-banner-title p{ color:rgba(255,255,255,.92); font-size:14.5px; margin-top:2px; }
.dance-overlay{ position:fixed; inset:0; z-index:200; background:#000; display:flex; align-items:center; justify-content:center; }
.dance-overlay[hidden]{ display:none; }
.dance-overlay video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dance-caption{ position:relative; text-align:center; color:#fff; text-shadow:0 3px 24px rgba(0,0,0,.75); padding:20px; }
.dance-kicker{ font-size:12px; letter-spacing:3.5px; text-transform:uppercase; color:#ffd9a0; font-weight:700; }
.dance-title{ font-size:clamp(38px,8vw,72px); font-weight:800; letter-spacing:-1.5px; margin:6px 0; }
.dance-sub{ font-size:16.5px; color:rgba(255,255,255,.92); }
@media (max-width:640px){ .hs-games{ left:auto; right:6%; bottom:24%; } .hs-coffee{ bottom:44%; } }

/* v2.1 hotspot polish — smaller, spread to their places, title on top */
.world-title{ top:18px; bottom:auto; }
.hotspot{ font-size:13.5px; padding:8px 13px; }
.hs-coffee{ left:5%; top:54%; bottom:auto; }
.hs-track{ right:6%; top:11%; }
.hs-war{ right:23%; top:33%; }
.hs-games{ left:41%; bottom:5%; }
@media (max-width:640px){ .hotspot span{ display:none; } .hs-war{ right:8%; top:30%; } .hs-games{ left:auto; right:6%; bottom:5%; } .hs-coffee{ top:auto; bottom:26%; } }
.world-title{ max-width:54%; }
.world-title p{ max-width:88%; }

/* ——— THE LEASH — executive tracker, in the world's own design language ——— */
.leash-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.leash-kpi{ background:#fff; border-radius:14px; box-shadow:0 4px 24px rgba(0,0,0,.06); padding:13px 15px; }
.leash-kpi-v{ font-size:23px; font-weight:700; letter-spacing:-.6px; }
.leash-kpi-l{ font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#86868b; margin-top:2px; }
.leash-card{ margin-bottom:14px; }
.leash-h{ font-size:19px; letter-spacing:-.5px; margin-bottom:12px; }
.leash-row{ display:grid; grid-template-columns:170px 1fr auto auto; gap:12px; align-items:center; padding:10px 0; border-top:1px solid #eeeef0; }
.leash-row:first-of-type{ border-top:0; }
.leash-who b{ display:block; font-size:15px; }
.leash-who span{ font-size:10.5px; font-weight:700; letter-spacing:1px; color:#86868b; }
.leash-task{ font-size:14.5px; }
.leash-call{ display:flex; gap:10px; align-items:center; padding:10px 0; border-top:1px solid #eeeef0; }
.leash-call:first-of-type{ border-top:0; }
.leash-intake{ display:flex; gap:8px; flex-wrap:wrap; }
.leash-intake input{ flex:1; min-width:210px; padding:11px 13px; border:1px solid #d2d2d7; border-radius:10px; font-family:inherit; font-size:14.5px; }
.leash-event{ display:flex; gap:10px; align-items:center; padding:7px 0; border-top:1px solid #eeeef0; font-size:14px; }
.leash-event:first-of-type{ border-top:0; }
.leash-ts{ color:#86868b; font-size:12.5px; min-width:64px; }
@media (max-width:640px){ .leash-kpis{ grid-template-columns:repeat(2,1fr); } .leash-row{ grid-template-columns:1fr auto; } .leash-task{ grid-column:1/-1; } }

/* ——— POLISH PASS (Apple-dev alignment, 2026-10-24) ——— */
/* Tab bar: one centered bar, eight equal cells, icons on one baseline,
   labels single-line — nothing clipped at any width. */
.tabbar{ width:min(680px, calc(100vw - 20px)); }
.tabbar button{ flex:1 1 0; min-width:0; height:56px; justify-content:center; padding:6px 2px 5px; gap:2px; font-size:9.5px; letter-spacing:.1px; white-space:nowrap; }
.tabbar button span{ font-size:20px; height:24px; display:flex; align-items:center; justify-content:center; line-height:1; }
/* World oration clears the tab bar instead of hiding behind it. */
.world-oration{ bottom:96px; }
/* Legibility scrims: title type never fights the artwork. */
.world-scene::before{ content:""; position:absolute; inset:0 0 auto 0; height:42%; background:linear-gradient(180deg, rgba(10,10,20,.34), rgba(10,10,20,0)); pointer-events:none; z-index:1; }
.world-title, .hotspot{ z-index:2; }
.scene-banner::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:58%; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.46)); pointer-events:none; }
.scene-banner-title{ z-index:1; }
/* Brand lockup optically centered. */
.brand{ display:flex; align-items:center; gap:7px; }
.brand-mark{ line-height:1; font-size:15px; }
@media (max-width:640px){
  /* Taller scene; the headline owns the top, the four places form a
     balanced 2x2 grid in the lower half — no pill ever covers type. */
  .world-scene > img{ aspect-ratio:4/5; }
  .world-title{ top:14px; left:16px; right:16px; max-width:100%; }
  .world-title h1{ font-size:31px; }
  .world-title p{ max-width:100%; }
  .hotspot{ width:43%; align-items:center; text-align:center; }
  .hs-coffee{ left:5%; top:56%; bottom:auto; }
  .hs-track{ right:5%; top:56%; }
  .hs-war{ left:5%; right:auto; top:76%; }
  .hs-games{ right:5%; left:auto; top:76%; bottom:auto; }
  .scene-banner img{ aspect-ratio:16/9; }
}
/* Polish pass 2: the world oration docks under the scene in flow —
   it never floats over the artwork or the Games Yard pill. */
.world-oration{ position:static; margin-top:14px; }
@media (min-width:641px){
  .world-scene > img{ aspect-ratio:auto; height:min(600px, calc(100vh - 260px)); }
}

/* ——— POLISH PASS 3 — iOS 1% tweaks (2026-10-24) ——— */
* { -webkit-tap-highlight-color: transparent; }
/* Glass navigation bars, iOS-style: translucent, blurred, hairline edge. */
.topbar{ background:rgba(245,245,247,.82); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:.5px solid rgba(0,0,0,.08); }
.tabbar{ background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border:.5px solid rgba(0,0,0,.07); height:60px; }
.tabbar button{ height:50px; border-radius:13px; font-weight:500; }
.tabbar button.active{ border-radius:15px; }
/* Grouped cards: iOS sheet radius + hairline. */
.card, .horse-card{ border-radius:20px; border-color:rgba(0,0,0,.05); }
/* Real iOS segmented control for the Games toggle. */
.seg{ background:#e9e9ee; border:none; border-radius:11px; padding:2px; gap:2px; }
.seg button{ border-radius:9px; padding:7px 16px; font-size:13.5px; font-weight:500; color:#1d1d1f; }
.seg button.active{ background:#fff; color:#1d1d1f; box-shadow:0 1px 4px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.05); }
/* Card CTAs read as iOS buttons (14pt radius), oration Yap stays a pill. */
.cast-card .yap-btn, .btn{ border-radius:14px; }
/* Press feedback: the 0.98 dip every iOS button has. */
.tabbar button:active, .yap-go:active, .btn:active, .seg button:active, .hotspot:active{ transform:scale(.97); }
.tabbar button, .yap-go, .btn, .seg button, .hotspot{ transition:transform .12s ease, background .15s ease, box-shadow .15s ease; }
/* Numbers sit on a grid like iOS (tabular figures). */
.kpi b, .trough-pill, .chip, .leash-kpis b{ font-variant-numeric:tabular-nums; }
/* Toast: iOS sheet material. */
.toast{ border-radius:16px; -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); background:rgba(28,28,30,.92); }

/* ——— POLISH PASS 4 — shader grade (2026-10-24): the Minecraft-shader
   treatment — warm sun bloom, tonemapped art, soft vignette depth. ——— */
.world-scene > img, .scene-banner img{ filter:saturate(1.07) contrast(1.03) brightness(1.01); }
.world-scene::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:
    radial-gradient(90% 62% at 79% 2%, rgba(255,176,102,.16), rgba(255,176,102,0) 56%),
    radial-gradient(118% 102% at 50% 42%, rgba(0,0,0,0) 64%, rgba(24,12,0,.13) 100%); }
.scene-banner::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(80% 90% at 80% 0%, rgba(255,176,102,.10), rgba(255,176,102,0) 55%); }
.scene-banner-title{ z-index:2; }
/* Pass 3b: the Games module injects its own styles after this sheet —
   win on specificity, not order. */
#view-games .seg{ background:#e9e9ee; border:none; border-radius:11px; padding:2px; gap:2px; }
#view-games .seg button{ border-radius:9px; padding:7px 16px; font-size:13.5px; font-weight:500; color:#1d1d1f; background:transparent; }
#view-games .seg button.active{ background:#fff; color:#1d1d1f; box-shadow:0 1px 4px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.05); }
/* Cost watch rows (Leash) — priced-agent icons integrated 2026-10-24 */
.cost-row{ display:flex; align-items:center; gap:13px; padding:10px 0; border-bottom:.5px solid rgba(0,0,0,.06); }
.cost-row:last-of-type{ border-bottom:none; }
.cost-ico{ width:46px; height:46px; border-radius:13px; object-fit:cover; flex:none; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.cost-main{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.cost-main b{ font-size:15.5px; }
.cost-main span{ font-size:12.5px; color:#6e6e73; line-height:1.35; }
.cost-price{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }