/* RuangKitha v2.0.0a53a — Ruang Cerita Mood Picker + Editorial Polish V1 */
.story-app {
  --story-accent: #7f9b87;
  --story-accent-strong: #56775f;
  --story-soft: #e7eee9;
  min-height: 100dvh;
  padding-bottom: 46px;
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--story-accent) 9%, transparent) 0 0, transparent 34%),
    var(--rk-bg, var(--color-background));
  color: var(--rk-text, var(--color-text));
  transition: background .35s ease;
}

.story-app[data-mood="fun"] { --story-accent:#d48a58; --story-accent-strong:#a55f35; --story-soft:#f6e5d8; }
.story-app[data-mood="memories"] { --story-accent:#b18e68; --story-accent-strong:#816447; --story-soft:#eee3d5; }
.story-app[data-mood="about_us"] { --story-accent:#7e9b78; --story-accent-strong:#557451; --story-soft:#e2ece0; }
.story-app[data-mood="closer"] { --story-accent:#6f9994; --story-accent-strong:#4d7470; --story-soft:#deecea; }
.story-app[data-mood="dreams"] { --story-accent:#8d86ad; --story-accent-strong:#686188; --story-soft:#e9e5f2; }
.story-app[data-mood="heart"] { --story-accent:#a77b88; --story-accent-strong:#7f5966; --story-soft:#f0e0e5; }
.story-app[data-mood="random"] { --story-accent:#748e86; --story-accent-strong:#526d65; --story-soft:#e2ebe8; }

.story-header {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:10px;
}
.story-header h1 { margin:0; font-size:18px; text-align:center; }
.story-back {
  min-height:38px;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  border:1px solid var(--rk-border);
  border-radius:999px;
  background:var(--rk-surface);
  color:var(--rk-text-secondary);
  box-shadow:var(--rk-shadow-sm);
  text-decoration:none;
  font-size:11px;
  font-weight:700;
}
.story-back ion-icon { font-size:17px; }
.story-header-spacer { width:38px; justify-self:end; }

.story-main {
  width:min(100% - 28px, 430px);
  margin:0 auto;
  padding:18px 0 0;
}

.story-intro {
  padding:15px 16px;
  border:1px solid var(--rk-border);
  border-radius:var(--rk-radius-xl, 22px);
  background:linear-gradient(135deg, color-mix(in srgb, var(--story-accent) 8%, var(--rk-surface)) 0%, var(--rk-surface) 72%);
  box-shadow:var(--rk-shadow-sm);
}
.story-intro small {
  display:block;
  color:var(--story-accent-strong);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.story-intro strong { display:block; margin-top:4px; font-size:15px; line-height:1.3; color:var(--rk-text); }
.story-intro p { margin:6px 0 0; color:var(--rk-text-secondary); font-size:10px; line-height:1.55; }

.story-selector { margin-top:16px; }
.story-selector-label {
  display:block;
  margin:0 0 7px 2px;
  color:var(--rk-text-secondary);
  font-size:10px;
  font-weight:700;
}
.story-mood-trigger {
  width:100%;
  min-height:58px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 20px;
  align-items:center;
  gap:10px;
  padding:9px 13px 9px 10px;
  border:1px solid var(--rk-border);
  border-radius:18px;
  background:var(--rk-surface);
  color:var(--rk-text);
  box-shadow:var(--rk-shadow-sm);
  font:inherit;
  text-align:left;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.story-mood-trigger:not(:disabled) { cursor:pointer; }
.story-mood-trigger:not(:disabled):active { transform:translateY(1px); }
.story-mood-trigger:focus-visible {
  border-color:var(--story-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--story-accent) 16%, transparent), var(--rk-shadow-sm);
}
.story-mood-trigger:disabled { opacity:.58; }
.story-mood-trigger-icon {
  width:38px;
  height:38px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--story-accent) 12%, var(--rk-surface));
  color:var(--story-accent-strong);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--story-accent) 16%, transparent);
}
.story-mood-trigger-icon ion-icon { font-size:20px; }
.story-mood-trigger-copy { min-width:0; display:block; }
.story-mood-trigger-copy strong,
.story-mood-trigger-copy small { display:block; }
.story-mood-trigger-copy strong {
  color:var(--rk-text);
  font-size:12px;
  font-weight:800;
  line-height:1.25;
}
.story-mood-trigger-copy small {
  margin-top:3px;
  color:var(--rk-text-secondary);
  font-size:9px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.story-mood-trigger-chevron {
  justify-self:end;
  color:var(--story-accent-strong);
  font-size:18px;
  transition:transform .2s ease;
}
.story-mood-trigger[aria-expanded="true"] .story-mood-trigger-chevron { transform:rotate(180deg); }

.story-mood-layer {
  z-index:360;
  padding-top:env(safe-area-inset-top, 0px);
}
.story-mood-sheet {
  width:min(100%, 430px);
  max-height:min(82vh, 690px);
  padding:10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius:24px 24px 0 0;
  overscroll-behavior:contain;
}
.story-mood-sheet .sheet-handle { margin-bottom:12px; }
.story-mood-sheet-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.story-mood-sheet-head small {
  display:block;
  color:var(--story-accent-strong);
  font-size:8px;
  font-weight:800;
  letter-spacing:.1em;
}
.story-mood-sheet-head h2 {
  margin:3px 0 0;
  color:var(--rk-text);
  font-size:17px;
  letter-spacing:-.02em;
}
.story-mood-close {
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--rk-border);
  border-radius:13px;
  background:var(--rk-surface-soft);
  color:var(--rk-text-secondary);
  font:inherit;
}
.story-mood-close ion-icon { font-size:20px; }
.story-mood-sheet-copy {
  margin:8px 0 12px;
  color:var(--rk-text-secondary);
  font-size:9px;
  line-height:1.45;
}
.story-mood-options { display:grid; gap:8px; }
.story-mood-option {
  --option-accent:#748e86;
  --option-accent-strong:#526d65;
  width:100%;
  min-height:64px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 22px;
  align-items:center;
  gap:11px;
  padding:9px 11px;
  border:1px solid var(--rk-border);
  border-radius:17px;
  background:var(--rk-surface);
  color:var(--rk-text);
  font:inherit;
  text-align:left;
  outline:none;
  transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.story-mood-option[data-story-mood-option="fun"] { --option-accent:#d48a58; --option-accent-strong:#a55f35; }
.story-mood-option[data-story-mood-option="memories"] { --option-accent:#b18e68; --option-accent-strong:#816447; }
.story-mood-option[data-story-mood-option="about_us"] { --option-accent:#7e9b78; --option-accent-strong:#557451; }
.story-mood-option[data-story-mood-option="closer"] { --option-accent:#6f9994; --option-accent-strong:#4d7470; }
.story-mood-option[data-story-mood-option="dreams"] { --option-accent:#8d86ad; --option-accent-strong:#686188; }
.story-mood-option[data-story-mood-option="heart"] { --option-accent:#a77b88; --option-accent-strong:#7f5966; }
.story-mood-option[data-story-mood-option="random"] { --option-accent:#748e86; --option-accent-strong:#526d65; }
.story-mood-option:active { transform:translateY(1px); }
.story-mood-option:focus-visible {
  border-color:var(--option-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--option-accent) 14%, transparent);
}
.story-mood-option[aria-checked="true"] {
  border-color:color-mix(in srgb, var(--option-accent) 56%, var(--rk-border));
  background:color-mix(in srgb, var(--option-accent) 8%, var(--rk-surface));
}
.story-mood-option-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:color-mix(in srgb, var(--option-accent) 13%, var(--rk-surface));
  color:var(--option-accent-strong);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--option-accent) 18%, transparent);
}
.story-mood-option-icon ion-icon { font-size:21px; }
.story-mood-option-copy { min-width:0; }
.story-mood-option-copy strong,
.story-mood-option-copy small { display:block; }
.story-mood-option-copy strong { font-size:11px; font-weight:800; line-height:1.25; }
.story-mood-option-copy small { margin-top:3px; color:var(--rk-text-secondary); font-size:8.5px; line-height:1.35; }
.story-mood-option-check {
  justify-self:end;
  color:var(--option-accent-strong);
  font-size:20px;
  opacity:0;
  transform:scale(.78);
  transition:opacity .16s ease, transform .16s ease;
}
.story-mood-option[aria-checked="true"] .story-mood-option-check { opacity:1; transform:scale(1); }

html.story-picker-open,
html.story-picker-open body { overflow:hidden; }

.story-stage {
  min-height:470px;
  display:grid;
  place-items:center;
  padding:20px 0 8px;
}
.story-empty,
.story-loading {
  width:100%;
  min-height:300px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:9px;
  text-align:center;
  color:var(--rk-text-secondary);
}
.story-empty > span,
.story-loading > span {
  width:48px; height:48px; border-radius:16px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--story-accent) 12%, var(--rk-surface));
  color:var(--story-accent-strong);
  font-size:23px;
}
.story-empty strong,.story-loading strong { color:var(--rk-text); font-size:13px; }
.story-empty p,.story-loading p { max-width:270px; margin:0; font-size:10px; line-height:1.55; }
.story-loading > span { animation:storyPulse 1.25s ease-in-out infinite; }
@keyframes storyPulse { 50% { transform:scale(.92); opacity:.65; } }

.story-card-wrap { width:100%; }
.story-card {
  --card-accent:var(--story-accent);
  --card-accent-strong:var(--story-accent-strong);
  width:min(82vw, 330px);
  aspect-ratio:3 / 4;
  margin:0 auto;
  padding:0;
  border:0;
  background:transparent;
  perspective:1200px;
  display:block;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.story-card[data-card-mood="fun"] { --card-accent:#d48a58; --card-accent-strong:#a55f35; }
.story-card[data-card-mood="memories"] { --card-accent:#b18e68; --card-accent-strong:#816447; }
.story-card[data-card-mood="about_us"] { --card-accent:#7e9b78; --card-accent-strong:#557451; }
.story-card[data-card-mood="closer"] { --card-accent:#6f9994; --card-accent-strong:#4d7470; }
.story-card[data-card-mood="dreams"] { --card-accent:#8d86ad; --card-accent-strong:#686188; }
.story-card[data-card-mood="heart"] { --card-accent:#a77b88; --card-accent-strong:#7f5966; }
.story-card-inner {
  position:relative;
  display:block;
  width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .48s cubic-bezier(.2,.72,.2,1);
}
.story-card.is-revealed .story-card-inner { transform:rotateY(180deg); }
.story-card:focus-visible { outline:3px solid color-mix(in srgb, var(--story-accent) 42%, transparent); outline-offset:6px; border-radius:30px; }
.story-card:not(.is-revealed):active .story-card-inner { transform:scale(.985) rotateZ(-.4deg); }

.story-card-face {
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--card-accent) 28%, var(--rk-border));
  border-radius:30px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 22px 50px rgba(16,24,19,.14), 0 4px 14px rgba(16,24,19,.08);
}
.story-card-back {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:
    radial-gradient(circle at 12px 12px, color-mix(in srgb, var(--story-accent) 20%, transparent) 0 1.4px, transparent 1.7px) 0 0 / 24px 24px,
    linear-gradient(145deg, color-mix(in srgb, var(--story-accent) 16%, var(--rk-surface)) 0%, color-mix(in srgb, var(--story-accent) 5%, var(--rk-surface)) 60%, var(--rk-surface) 100%);
  color:var(--rk-text);
}
.story-card-back::before,.story-card-back::after {
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid color-mix(in srgb, var(--story-accent) 34%, transparent);
  border-radius:22px;
  pointer-events:none;
}
.story-card-back::after { inset:20px; border-style:dashed; opacity:.58; }
.story-card-mark {
  position:relative;
  z-index:1;
  width:62px; height:62px;
  display:grid; place-items:center;
  border-radius:22px;
  background:color-mix(in srgb, var(--story-accent) 18%, var(--rk-surface));
  color:var(--story-accent-strong);
  font-size:30px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--story-accent) 24%, transparent);
}
.story-card-back small { position:relative; z-index:1; margin-top:19px; color:var(--story-accent-strong); font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.story-card-back strong { position:relative; z-index:1; margin-top:5px; font-size:25px; letter-spacing:-.035em; }
.story-card-back em { position:relative; z-index:1; margin-top:20px; color:var(--rk-text-secondary); font-size:10px; font-style:normal; }
.story-card-back em ion-icon { vertical-align:-2px; margin-right:4px; }

.story-card-front {
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:28px 25px 24px;
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--card-accent) 20%, transparent), transparent 30%),
    linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 9%, var(--rk-surface)) 0%, var(--rk-surface) 58%);
  color:var(--rk-text);
}
.story-card-front::before { content:""; position:absolute; inset:14px; border:1px solid color-mix(in srgb, var(--card-accent) 24%, transparent); border-radius:22px; pointer-events:none; }
.story-card-front-head { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.story-card-front-head span { color:var(--card-accent-strong); font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.story-card-front-head ion-icon { color:var(--card-accent-strong); font-size:19px; }
.story-prompt {
  position:relative;
  z-index:1;
  margin:auto 0;
  padding:22px 2px;
  color:var(--rk-text);
  font-size:clamp(20px, 5.7vw, 27px);
  font-weight:700;
  line-height:1.32;
  letter-spacing:-.035em;
  text-align:left;
}
.story-card-front-foot { position:relative; z-index:1; color:var(--rk-text-secondary); font-size:9px; line-height:1.45; }

.story-next {
  min-height:44px;
  margin:15px auto 0;
  padding:0 18px;
  border:1px solid color-mix(in srgb, var(--story-accent) 32%, var(--rk-border));
  border-radius:999px;
  background:color-mix(in srgb, var(--story-accent) 10%, var(--rk-surface));
  color:var(--story-accent-strong);
  display:flex;
  align-items:center;
  gap:7px;
  font:inherit;
  font-size:11px;
  font-weight:800;
}
.story-next ion-icon { font-size:17px; }

.story-message {
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--rk-border);
  border-radius:14px;
  background:var(--rk-surface-soft);
  color:var(--rk-text-secondary);
  font-size:10px;
  line-height:1.5;
}
.story-message[data-tone="error"] { border-color:color-mix(in srgb, var(--rk-danger, #d65f5f) 36%, var(--rk-border)); color:var(--rk-danger, #d65f5f); }
.story-message button { margin-left:6px; }

html[data-theme="dark"] .story-app {
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--story-accent) 10%, transparent), transparent 32%),
    var(--rk-bg, var(--color-background));
}
html[data-theme="dark"] .story-card-face { box-shadow:0 24px 54px rgba(0,0,0,.34), 0 4px 14px rgba(0,0,0,.26); }
html[data-theme="dark"] .story-card-back {
  background:
    radial-gradient(circle at 12px 12px, color-mix(in srgb, var(--story-accent) 24%, transparent) 0 1.4px, transparent 1.7px) 0 0 / 24px 24px,
    linear-gradient(145deg, color-mix(in srgb, var(--story-accent) 20%, #1b1d1c) 0%, #1b1d1c 70%);
}
html[data-theme="dark"] .story-card-front { background:radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--card-accent) 18%, transparent), transparent 32%), #1b1d1c; }

@media (max-width:360px) {
  .story-card { width:min(86vw, 310px); }
  .story-prompt { font-size:20px; }
}
@media (prefers-reduced-motion:reduce) {
  .story-card-inner,.story-app { transition:none!important; }
  .story-loading > span { animation:none!important; }
}