/* ─── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Tokens ─────────────────────────────────────────────────────── */
:root {
  --purple:      #7B5EA7;
  --purple-dark: #5B3F8A;
  --purple-mid:  #9575CD;
  --purple-pale: #F3EFFE;
  --lavender:    #D1C4E9;
  --bg:          #EDEAF8;
  --white:       #FFFFFF;
  --text-dark:   #3D2C6E;
  --text-mid:    #7B6BA0;
  --text-light:  #B0A4CC;
  --border:      rgba(200,185,230,.4);
  --topbar-h:    56px;
  --font: 'Nunito', sans-serif;
}

html, body {
  height: 100%; overflow: hidden;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-dark);
}

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%,  #ece8ff 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, #e4daf8 0%, transparent 60%),
    linear-gradient(150deg, #eae6fb 0%, #ddd3f5 100%);
}

/* ─── Topbar ─────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-logo { font-size: 1.05rem; font-weight: 800; color: var(--text-dark); }
.topbar-tag  {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  background: var(--purple-dark); color: #fff;
  padding: 4px 12px; border-radius: 20px;
}

/* ─── Two-column layout ──────────────────────────────────────────── */
.layout {
  position: fixed;
  top: var(--topbar-h); bottom: 0; left: 0; right: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 0;
}

/* ─── LEFT column ────────────────────────────────────────────────── */
.left-col {
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
  border-right: 1px solid var(--border);
  background: rgba(255,255,255,.25);
}

/* Phone mockup shell */
.phone-frame {
  width: 320px;
  height: 580px;
  background: var(--white);
  border-radius: 44px;
  box-shadow:
    0 0 0 2px rgba(91,63,138,.15),
    0 24px 64px rgba(91,63,138,.22),
    inset 0 0 0 1px rgba(255,255,255,.9);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}

.phone-notch {
  flex-shrink: 0;
  height: 32px;
  background: #f6f4ff;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(200,185,230,.2);
}
.phone-notch::after {
  content: '';
  width: 72px; height: 6px;
  background: var(--lavender);
  border-radius: 10px;
  opacity: .5;
}

.phone-screen {
  /* Match the artboard ratio 360×642 exactly, at the phone frame width (320px) */
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 360 / 642;
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, #f0ecff 0%, #e8e0f8 100%);
}

canvas#rive-canvas {
  /* CSS display size = container size */
  width: 100%;
  height: 100%;
  display: block;
  /* drawing buffer sized by JS via canvas.width/height × devicePixelRatio */
}

.phone-home-bar {
  flex-shrink: 0;
  height: 28px;
  background: #f6f4ff;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid rgba(200,185,230,.2);
}
.phone-home-bar::after {
  content: '';
  width: 100px; height: 4px;
  background: var(--lavender);
  border-radius: 10px;
  opacity: .6;
}

/* ─── RIGHT column ───────────────────────────────────────────────── */
.right-col {
  padding: 28px 32px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}

.panel-title {
  font-size: .65rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-light);
}

/* ─── Control cards ──────────────────────────────────────────────── */
.ctrl-card {
  background: var(--white);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 2px 12px rgba(91,63,138,.07);
  border: 1px solid var(--border);
}

.ctrl-label {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
}
.ctrl-title {
  font-size: .95rem; font-weight: 800; color: var(--text-dark);
  font-family: var(--font);
}
.ctrl-hint { font-size: .72rem; color: var(--text-mid); font-weight: 600; }

.ctrl-row {
  display: flex; align-items: center; gap: 12px;
}

input[type="range"] {
  flex: 1; -webkit-appearance: none;
  height: 6px; border-radius: 10px;
  background: var(--lavender); outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--purple-dark);
  box-shadow: 0 2px 8px rgba(91,63,138,.4);
  cursor: pointer;
  transition: transform .15s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }

.ctrl-value {
  min-width: 32px; text-align: right;
  font-size: 1.1rem; font-weight: 900; color: var(--purple-dark);
}

.ctrl-footer {
  display: flex; align-items: center; justify-content: space-between;
}

.result-pill {
  display: inline-flex; align-items: center;
  padding: 4px 14px; background: var(--purple-pale);
  border-radius: 20px; font-size: .8rem; font-weight: 700;
  color: var(--purple-dark);
  transition: background .35s, color .35s;
}
.result-pill.updated { background: #e8f5e9; color: #2e7d32; }

.btn-set {
  padding: 8px 18px; border: none; border-radius: 20px; cursor: pointer;
  background: var(--purple-dark); color: #fff;
  font-family: var(--font); font-size: .78rem; font-weight: 800;
  letter-spacing: .03em;
  transition: background .2s, transform .1s;
}
.btn-set:hover  { background: var(--purple); }
.btn-set:active { transform: scale(.95); }

/* ─── Action buttons ─────────────────────────────────────────────── */
.action-btns { display: flex; gap: 10px; }
.btn-trigger, .btn-spin {
  flex: 1; padding: 14px 10px;
  border: none; border-radius: 12px; cursor: pointer;
  font-family: var(--font); font-size: .88rem; font-weight: 800;
  letter-spacing: .02em;
  transition: transform .15s, box-shadow .15s;
}
.btn-trigger {
  background: linear-gradient(135deg, #FF9800, #EF6C00);
  color: #fff; box-shadow: 0 4px 14px rgba(239,108,0,.3);
}
.btn-spin {
  background: linear-gradient(135deg, var(--purple-mid), var(--purple-dark));
  color: #fff; box-shadow: 0 4px 14px rgba(91,63,138,.3);
}
.btn-trigger:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(239,108,0,.35); }
.btn-spin:hover    { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(91,63,138,.35); }
.btn-trigger:active, .btn-spin:active { transform: scale(.97); }

/* ─── Log card ───────────────────────────────────────────────────── */
.log-card { flex: 1; min-height: 160px; }
.log-header {
  display: flex; align-items: center; justify-content: space-between;
}
.log-title {
  font-size: .65rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text-light);
}
.log-clear {
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: .68rem; font-weight: 700;
  color: var(--text-light); letter-spacing: .05em;
  padding: 2px 6px; border-radius: 6px;
  transition: color .2s, background .2s;
}
.log-clear:hover { color: var(--purple); background: var(--purple-pale); }

.log-entries {
  background: #16122a;
  border-radius: 10px;
  padding: 10px 14px;
  max-height: 220px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
  font-family: 'Courier New', monospace;
}
.log-entry       { font-size: .73rem; color: #c0b4e0; line-height: 1.6; }
.log-entry.ok    { color: #80cbc4; }
.log-entry.warn  { color: #ffcc80; }
.log-entry.error { color: #ef9a9a; }