/* Dorothy Dice — white pages, blush silk surfaces, rose accents, candy
   gold coins. Main page is a chat with the dice; her page is a colorful
   nurture dashboard. One file styles both. */

:root {
  --bg: #FFFFFF;
  --stage: #FFF9FC;
  --blush: linear-gradient(180deg, #FFF9FC, #FFF0F6);
  --card: #FFFFFF;
  --rose: #C2405C;
  --rose-soft: #D96479;
  --rose-deep: #A63350;
  --text: #4A2C2A;
  --dim: #A78D87;
  --gold: #C9821B;
  --coin-ink: #B25E04;
  --violet: #8B6CD9;
  --sky: #5B9BD5;
  --leaf: #58B98C;
  --amber: #E8930C;
  --line: rgba(194, 64, 92, .16);
  --radius: 20px;
  --shadow: 0 6px 18px rgba(74, 44, 42, .08);
  --font-brand: ui-serif, Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --peony: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg fill='none' stroke='%23C2405C' stroke-opacity='.08' stroke-width='1.1'%3E%3Ccircle cx='44' cy='44' r='27'/%3E%3Ccircle cx='44' cy='44' r='17.5'/%3E%3Ccircle cx='44' cy='44' r='8'/%3E%3Ccircle cx='126' cy='118' r='31'/%3E%3Ccircle cx='126' cy='118' r='20'/%3E%3Ccircle cx='126' cy='118' r='9'/%3E%3C/g%3E%3Cg fill='%23C2405C' fill-opacity='.1'%3E%3Ccircle cx='78' cy='128' r='2.4'/%3E%3Ccircle cx='132' cy='38' r='1.9'/%3E%3Ccircle cx='16' cy='100' r='1.9'/%3E%3Ccircle cx='96' cy='72' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 40% at 50% -4%, rgba(249, 228, 228, .5), rgba(255, 255, 255, 0) 60%),
    #FFFFFF;
}

/* ---- shared top bar ---- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 10px;
}

.brand {
  font-family: var(--font-brand);
  font-size: 21px;
  letter-spacing: 0.06em;
  color: var(--rose);
}

.topbar-right { display: flex; align-items: center; gap: 10px; }

.wallet { display: inline-flex; align-items: center; gap: 8px; }

.coin { display: inline-flex; filter: drop-shadow(0 2px 3px rgba(178, 94, 4, .35)); }

#coinCount {
  font-size: 16px;
  font-weight: 700;
  color: var(--coin-ink);
  min-width: 18px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.wallet.bump #coinCount { animation: bump 0.5s ease; }

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); color: #E8930C; }
  100% { transform: scale(1); }
}

.topup {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(194, 64, 92, .4);
  background: rgba(255, 252, 250, .8);
  color: var(--rose);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.12s ease;
}

.topup:hover { background: #FFE9E4; }
.topup:active { transform: scale(0.92); }

/* ---- the stage: blush-white silk (the source chat panel's #fff9fc→#fff0f6) ---- */

.stage-wrap {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: min(100%, calc(46dvh * 4 / 3), 640px);
  aspect-ratio: 4 / 3;
  margin: 2px auto 4px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 18px 44px rgba(74, 44, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
  background:
    radial-gradient(90% 90% at 50% 112%, rgba(217, 100, 121, .10), transparent 62%),
    var(--peony),
    var(--blush);
  overflow: hidden;
}

#diceStage {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  touch-action: manipulation;
}

/* Rainbow / amethyst dice skin switch — a split pill on the stage corner. */
.skin-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(194, 64, 92, .35);
  background: linear-gradient(90deg,
    linear-gradient(160deg, #9CC0F6, #F0B0C5 55%, #F8E4A0) 50%,
    #171020 50%);
  box-shadow: 0 2px 6px rgba(74, 44, 42, .14);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.skin-toggle:active { transform: scale(0.9) rotate(180deg); }

/* ---- chat page ---- */

.msg { display: flex; gap: 10px; animation: rise 0.3s ease; }

.msg.user { justify-content: flex-end; }

.msg.user .bubble {
  max-width: 78%;
  background: linear-gradient(135deg, var(--rose-soft), var(--rose));
  color: #FFF6F0;
  border-radius: 18px 18px 6px 18px;
  padding: 11px 15px;
  font-size: 15px;
  line-height: 1.5;
}

.avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 130, 27, .45);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 226, 138, .35), transparent 55%),
    linear-gradient(160deg, rgba(217, 100, 121, .25), rgba(249, 228, 228, .6));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--rose-deep);
}

.msg.dorothy .bubble {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(138, 50, 103, .12);
  border-radius: 6px 18px 18px 18px;
  padding: 14px;
  background: #FFFFFF;
  box-shadow: 0 10px 27px rgba(78, 22, 62, .07);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  border: 1px solid var(--line);
  background: rgba(255, 252, 250, .85);
  border-radius: 12px;
  padding: 7px 12px;
}

.chip .glyph { font-size: 18px; color: var(--rose); }
.chip .meta { font-size: 11px; color: var(--dim); display: block; letter-spacing: 0.08em; }
.chip .name { font-size: 14px; font-weight: 600; }

.asked {
  font-size: 13px;
  color: var(--dim);
  margin: 0 0 8px;
  font-style: italic;
}

.oracle-line {
  font-family: var(--font-brand);
  font-size: 18px;
  line-height: 1.5;
  color: var(--rose);
  margin: 0 0 8px;
}

.ai-reading {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 8px;
  white-space: pre-wrap;
}

.caret {
  display: inline-block;
  width: 8px;
  height: 16px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--rose-soft);
  animation: blink 0.9s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.share-link {
  border: none;
  background: none;
  color: var(--rose);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
}

.share-link:hover { text-decoration: underline; }

/* ---- ask row (right under the stage) ---- */

.ask-row {
  display: flex;
  gap: 10px;
  align-items: center;
  width: min(100%, calc(46dvh * 4 / 3), 640px);
  margin: 0 auto;
}

#questionInput {
  flex: 1;
  background: #FFF6F3;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 16px;
  padding: 12px 18px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#questionInput::placeholder { color: var(--dim); }
#questionInput:focus {
  border-color: var(--rose-soft);
  box-shadow: 0 0 0 3px rgba(217, 100, 121, .12);
  background: #FFFFFF;
}

#rollBtn {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--rose-soft), var(--rose) 60%, var(--rose-deep));
  box-shadow: 0 6px 18px rgba(194, 64, 92, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform 0.12s ease, filter 0.2s ease;
}

#rollBtn:active { transform: scale(0.94); }
#rollBtn[disabled] { filter: saturate(0.25) brightness(1.1); cursor: wait; }

/* ---- live reply slot + records log ---- */

.latest-reply { width: min(100%, calc(46dvh * 4 / 3), 640px); margin: 12px auto 0; }

#records {
  width: min(100%, calc(46dvh * 4 / 3), 640px);
  margin: 0 auto;
  /* Clear the fixed bottom nav so nothing is clipped behind it. */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
}

.records-label {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin: 14px 0 8px;
}

#chatLog {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
}

/* ---- bottom navigation ---- */

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 8px 24px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(194, 64, 92, .08);
  z-index: 10;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 86px;
  padding: 6px 18px;
  border-radius: 16px;
  color: var(--dim);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-item.active {
  color: var(--rose);
  background: rgba(194, 64, 92, .08);
}

/* ---- dialogs ---- */

dialog {
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 24px;
  background:
    radial-gradient(90% 70% at 50% 115%, rgba(217, 100, 121, .08), transparent 65%),
    var(--peony),
    var(--blush);
  box-shadow: 0 24px 60px rgba(74, 44, 42, .18);
  color: var(--text);
  padding: 20px;
  width: min(420px, calc(100vw - 36px));
}

dialog::backdrop { background: rgba(74, 44, 42, .40); backdrop-filter: blur(3px); }

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 10px;
  color: var(--rose-deep);
}

.dialog-close {
  border: none;
  background: none;
  color: var(--dim);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 2px;
}

.dialog-close:hover { color: var(--rose); }

/* ---- sticker card ---- */

.sticker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 4px 4px;
}

.sticker-emblem {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 130, 27, .55);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 226, 138, .5), transparent 55%),
    linear-gradient(160deg, rgba(217, 100, 121, .30), rgba(249, 228, 228, .5));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--rose-deep);
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(194, 64, 92, .22);
  animation: emblem-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes emblem-in {
  from { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.sticker-kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.sticker-title {
  font-family: var(--font-brand);
  font-size: 24px;
  color: var(--rose-deep);
  margin-bottom: 10px;
}

.sticker-summary {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 16px;
}

.sticker-card .primary {
  border: none;
  border-radius: 12px;
  padding: 11px 34px;
  font-size: 14px;
  font-weight: 700;
  color: #FFF6F0;
  background: linear-gradient(135deg, var(--rose-soft), var(--rose));
  cursor: pointer;
}

/* ---- coin shop ---- */

.shop-context {
  font-family: var(--font-brand);
  font-size: 15px;
  line-height: 1.5;
  color: var(--rose-deep);
  margin: 0 0 12px;
}

.pack-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.pack {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 252, 250, .8);
  border-radius: 14px;
  padding: 13px 14px;
}

.pack .pack-coins {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--coin-ink);
  min-width: 86px;
}

.pack .pack-price { font-size: 14px; color: var(--text); }
.pack .pack-tag { font-size: 11px; color: var(--rose); }

.pack button {
  margin-left: auto;
  border: 1px solid #B25E04;
  border-radius: 11px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #6B4004;
  background: linear-gradient(180deg, #FFD75E, #F0A81F);
  cursor: pointer;
  transition: filter 0.2s ease;
}

.pack button:active { filter: brightness(0.92); }
.pack button.added { background: none; border: 1px solid var(--line); color: var(--rose); }

.shop-note { font-size: 12px; color: #8A6A64; margin: 0; text-align: center; }

/* ---- toast ---- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  transform: translateX(-50%);
  background: rgba(74, 44, 42, .94);
  color: #FBF0EA;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 999px;
  pointer-events: none;
  animation: toast-in 0.25s ease;
  z-index: 20;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- dorothy's page: white dashboard with colorful icon tiles ---- */

.pet-page {
  flex: 1;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 6px 18px calc(env(safe-area-inset-bottom, 0px) + 88px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pet-hero {
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
}

.pet-avatar {
  width: 84px;
  height: 84px;
  border-radius: 28px;
  border: 1.5px solid rgba(201, 130, 27, .45);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 226, 138, .4), transparent 55%),
    linear-gradient(160deg, rgba(217, 100, 121, .25), rgba(249, 228, 228, .6));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: var(--rose-deep);
  box-shadow: var(--shadow);
}

.white-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.card-title .tile {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.tile.rose { background: linear-gradient(150deg, var(--rose-soft), var(--rose)); }
.tile.violet { background: linear-gradient(150deg, #A98CE8, var(--violet)); }
.tile.sky { background: linear-gradient(150deg, #7FB3E4, var(--sky)); }
.tile.amber { background: linear-gradient(150deg, #F5B04C, var(--amber)); }
.tile.leaf { background: linear-gradient(150deg, #7ED0A8, var(--leaf)); }

/* stat tiles: 2×2 colorful blocks with big numbers */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.stat-tile {
  border-radius: 16px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFF9F7;
  border: 1px solid var(--line);
}

.stat-tile .tile { width: 42px; height: 42px; border-radius: 13px; }

.stat-tile .stat-value { font-size: 21px; font-weight: 800; color: var(--text); line-height: 1.1; }
.stat-tile .stat-label { font-size: 12px; color: var(--dim); margin-top: 2px; }

/* bond */
.bond-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.bond-level { font-size: 14px; font-weight: 700; color: var(--rose-deep); }
.bond-next { font-size: 12px; color: var(--dim); }

.bond-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(194, 64, 92, .10);
  overflow: hidden;
}

.bond-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rose-soft), var(--gold));
  transition: width 0.5s ease;
}

.bond-perk {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--rose-deep);
  background: rgba(194, 64, 92, .07);
  border-radius: 10px;
  padding: 8px 12px;
}

/* tendency ledger */
.tendency-list { display: flex; flex-direction: column; gap: 9px; }

.tendency-row { display: flex; align-items: center; gap: 10px; }

.tendency-row .t-kw {
  min-width: 104px;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tendency-row .t-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(194, 64, 92, .08);
  overflow: hidden;
}

.tendency-row .t-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rose-soft), var(--rose));
  transition: width 0.5s ease;
}

.tendency-row .t-score {
  min-width: 26px;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  color: var(--rose-deep);
  font-variant-numeric: tabular-nums;
}

.tendency-empty { font-size: 13px; color: var(--dim); }
.tendency-today { font-size: 12px; color: var(--dim); margin: 10px 0 0; }

/* glyphs collection */
.collection-grid { display: flex; flex-direction: column; gap: 8px; }

.collection-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }

.collection-cell {
  border: 1px solid rgba(194, 64, 92, .10);
  background: #FFF9F7;
  border-radius: 10px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: rgba(167, 141, 135, .38);
}

.collection-cell.found {
  color: var(--rose);
  border-color: var(--line);
  background: var(--stage);
}

/* the chart board */
.board-grid {
  display: grid;
  grid-template-columns: auto repeat(12, 1fr);
  gap: 2px;
}

.board-grid .board-label {
  font-size: 10px;
  color: #C4A3AC;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
}

.board-grid .board-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(194, 64, 92, .08);
}

.board-grid .board-cell.lit { background: rgba(194, 64, 92, .45); }
.board-grid .board-cell.deep { background: rgba(201, 130, 27, .75); }

.board-sub { font-size: 12.5px; color: var(--dim); margin: 8px 0 12px; }

/* where you stand — the personal status summary under the chart */
.status-summary {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(194, 64, 92, .14);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.sticker-shelf { display: flex; flex-wrap: wrap; gap: 8px; }

.shelf-sticker {
  border: 1px solid var(--line);
  background: #FFF9F7;
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 12px;
  color: var(--rose-deep);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.shelf-locked {
  border: 1px dashed rgba(167, 141, 135, .35);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 12px;
  color: rgba(167, 141, 135, .7);
}

@media (prefers-reduced-motion: reduce) {
  .msg, .caret, .wallet.bump #coinCount, .sticker-emblem { animation: none; }
}