/* ===== AR SHOWCASE — Ember Design System (vanilla) ===== */
:root{
  --warm-950:#080604; --warm-900:#0e0b07; --warm-850:#131009; --warm-800:#19150e;
  --warm-750:#201b12; --warm-700:#282217; --warm-600:#33291d;
  --amber-300:#fcd34d; --amber-400:#fbbf24; --amber-500:#f59e0b;
  --stone-100:#faf6ef; --stone-300:#d6cfc4; --stone-400:#a8a097; --stone-500:#7c756c;
  --accent:var(--amber-400);                 /* 体験側で上書き可 */
  --font-sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;width:100%}
body{background:var(--warm-900);color:var(--stone-100);font-family:var(--font-sans);
  -webkit-text-size-adjust:100%;scrollbar-color:rgba(251,191,36,.2) transparent}

/* labels / numbers */
.ds-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.22em;
  font-size:11px;color:var(--stone-400)}
.ds-num{font-family:var(--font-mono);color:var(--accent);font-variant-numeric:tabular-nums}

/* buttons */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:15px;color:var(--stone-100);background:transparent;
  border:1px solid var(--accent);border-radius:12px;padding:12px 22px;cursor:pointer;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;text-decoration:none}
.ds-btn:active{background:rgba(251,191,36,.14)}
.ds-btn[disabled]{opacity:.4;border-color:var(--stone-500);pointer-events:none}
.ds-btn--solid{background:var(--accent);color:var(--warm-950);border-color:var(--accent)}

/* cards */
.ds-card{background:var(--warm-850);border:1px solid var(--warm-700);border-radius:16px;
  padding:16px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s}
.ds-card:active{transform:scale(.985)}
.ds-card[aria-disabled="true"]{opacity:.45}
.ds-card .ds-icon{font-size:30px;line-height:1}
.ds-card .ds-title{font-weight:700;font-size:15px}
.ds-card .ds-desc{font-size:12px;color:var(--stone-400);line-height:1.5}

/* start overlay (体験ページ共通の起動画面) */
.ds-overlay{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:24px;
  background:radial-gradient(circle at 50% 32%, var(--warm-800), var(--warm-950) 72%)}
.ds-overlay.hidden{display:none}
.ds-overlay h1{font-size:20px;margin:0 0 10px;letter-spacing:.04em}
.ds-overlay p{font-size:13px;line-height:1.8;color:var(--stone-300);margin:4px 0;max-width:320px}

/* top toolbar (FPS / capture) */
.ds-topbar{position:fixed;top:calc(8px + env(safe-area-inset-top));right:8px;z-index:16;
  display:none;gap:6px;align-items:center}
.ds-topbar.show{display:flex}
.ds-chip{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--stone-100);
  background:rgba(8,6,4,.6);border:1px solid var(--warm-700);padding:6px 10px;border-radius:999px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* loader */
.ds-loader{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;gap:18px;
  align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%, var(--warm-850), var(--warm-950) 74%)}
.ds-loader.hidden{display:none}
.ds-loader .spin{width:34px;height:34px;border-radius:50%;
  border:3px solid var(--warm-700);border-top-color:var(--accent);animation:ds-spin .9s linear infinite}
.ds-loader .ds-loader-text{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;
  color:var(--stone-300);min-height:1.2em;text-align:center;transition:opacity .25s}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* attribution (Niantic) — SLAM/顔体験で必須 */
.ds-attrib{position:fixed;left:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:16;
  display:flex;align-items:center;gap:6px;font-size:10px;color:var(--stone-500);
  background:rgba(8,6,4,.5);padding:4px 8px;border-radius:8px}
.ds-attrib img{height:14px;opacity:.85}

/* toast */
.ds-toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:18;background:rgba(8,6,4,.82);color:var(--stone-100);font-size:13px;padding:9px 16px;
  border-radius:999px;border:1px solid var(--warm-700);opacity:0;transition:opacity .2s;pointer-events:none}
.ds-toast.show{opacity:1}