/* XEL widget — iframe-sized diplomacy. loads after tokens/base/hud and
   overrides their full-page assumptions for a 320×420…480×600 world.
   html.embedded  = living inside someone's iframe (the whole viewport is ours)
   html.standalone = a human found widget.html directly → show the embed kit */

html, body { height: 100%; }

html.embedded body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ---------- shared widget frame ---------- */

#widget-main { width: 100%; }

#widget-frame {
  position: relative;
  z-index: var(--z-stage);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  height: 100vh;  /* fallback */
  height: 100svh;
  padding-top: 0.35rem;
}

/* the speech perch: in-flow, small; spare flex slack below absorbs longer
   bubbles so the footer never gets shoved off the bottom of the iframe */
#speech-root {
  min-height: 84px;
  width: 100%;
  padding: 0 0.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.speech-bubble {
  font-size: 0.88rem;
  padding: 0.5rem 0.8rem;
  max-width: 94%;
  margin-bottom: 10px;
}

#xel-stage {
  width: min(74vw, 54vh, 330px);  /* fallback */
  width: min(74vw, 54svh, 330px);
  aspect-ratio: 1;
  flex: none;
  position: relative;
}

#xel-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}

/* ---------- action row ---------- */

#widget-actions {
  flex: none;
  display: flex;
  gap: 0.35rem;
  padding: 0 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.w-act {
  font-size: 0.85rem;
  padding: 0.42rem 0.75rem;
}

.w-act.banned {
  opacity: 0.55;
  filter: saturate(0.5);
}

/* ---------- footer watermark / cta ---------- */

#widget-foot {
  flex: none;
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: rgba(10, 5, 26, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(157, 123, 255, 0.2);
  font-size: 0.74rem;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
}

.foot-text { overflow: hidden; text-overflow: ellipsis; }

#w-name { color: var(--seafoam); font-weight: 700; }

.foot-cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--bg-deep);
  background: linear-gradient(135deg, var(--seafoam), var(--cyan));
  padding: 0.14rem 0.6rem;
  border-radius: var(--r-pill);
  box-shadow: 0 0 14px rgba(125, 249, 224, 0.35);
  transition: transform 0.18s var(--ease-boing), box-shadow 0.18s;
}

.foot-cta:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: var(--glow-seafoam);
}

/* ---------- embed reveal panel (standalone only) ---------- */

#embed-reveal { display: none; }

html.standalone #embed-reveal {
  display: block;
  position: relative;
  z-index: var(--z-stage);
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border: 1px solid var(--panel-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  padding: 1.3rem 1.4rem 1.15rem;
}

.embed-eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--ink-faint);
}

#embed-reveal h1 {
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.embed-sub {
  margin: 0.15rem 0 0.9rem;
  color: var(--ink-dim);
  font-size: 0.95rem;
}

.embed-pre {
  margin: 0 0 0.75rem;
  background: rgba(5, 2, 20, 0.65);
  border: 1px solid rgba(157, 123, 255, 0.25);
  border-radius: var(--r-md);
  padding: 0.75rem 0.9rem;
  overflow-x: auto;
}

.embed-pre code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--seafoam);
  user-select: all;
  -webkit-user-select: all;
  white-space: pre;
}

.embed-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

#copy-embed { font-size: 0.92rem; }

.embed-fine {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.embed-note {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-dim);
}

/* ---------- standalone page layout: the live preview ---------- */

html.standalone #widget-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 2.2rem 1rem 3rem;
}

html.standalone #preview-shell {
  position: relative;
  z-index: var(--z-stage);
  width: 340px;
  height: 440px;
  max-width: 100%;
  margin: 1.4rem auto 0;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(7, 3, 18, 0.5);
  box-shadow: var(--shadow-pop), 0 0 30px rgba(125, 249, 224, 0.12);
}

html.standalone #widget-frame {
  height: 100%;
  padding-top: 0.45rem;
}

/* viewport units measure the page, not the 340px shell — pin sizes inside */
html.standalone #xel-stage { width: 224px; }
html.standalone #speech-root { min-height: 78px; }

/* ---------- noscript ---------- */

.noscript-slim {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 0.55rem 0.8rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--ink);
  background: rgba(10, 5, 26, 0.92);
  border-bottom: 1px solid var(--panel-border);
}

/* ---------- small iframes / phones ---------- */

@media (max-width: 350px) {
  .w-act { font-size: 0.78rem; padding: 0.38rem 0.55rem; }
  #widget-foot { font-size: 0.68rem; gap: 0.3rem; }
  .speech-bubble { font-size: 0.82rem; }
}

@media (max-height: 430px) {
  #speech-root { min-height: 60px; }
  #xel-stage { width: min(70vw, 48vh, 300px); }
  #xel-stage { width: min(70vw, 48svh, 300px); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .foot-cta, .foot-cta:hover { transition: none; transform: none; }
}