@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700&family=Frank+Ruhl+Libre:wght@500;600;700&display=swap');

:root {
  --bg: #f5efe6;
  --paper: #fffcf7;
  --brown: #563b30;
  --brown-soft: #75584a;
  --ink: #383431;
  --muted: #756c65;
  --gold-light: #d9c38f;
  --gold-deep: #a87524;
  --gold-bright: #f2d98b;
  --white: #fffdf9;
  --topic: #9b6a50;
  --topic-rgb: 155, 106, 80;
  --shadow: 0 28px 80px rgba(75, 50, 37, .16);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  direction: rtl;
  color: var(--ink);
  font-family: "Assistant", "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 50% -5%, rgba(255, 252, 244, .96) 0 16%, transparent 47%),
    linear-gradient(145deg, #f8f3eb 0%, #f2eadf 54%, #eadfce 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  opacity: .18;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(168, 117, 36, .45); outline-offset: 4px; }

.ambient {
  position: fixed;
  z-index: -2;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .16;
  pointer-events: none;
}
.ambient-one { background: #c39756; top: -18rem; right: -12rem; }
.ambient-two { background: #9f725b; bottom: -22rem; left: -15rem; }

.topbar {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark { display: flex; flex-direction: column; text-decoration: none; color: var(--brown); line-height: 1.05; }
.wordmark strong { font-family: "Frank Ruhl Libre", serif; font-size: 1.18rem; }
.wordmark span { margin-top: 4px; color: var(--gold-deep); font-size: .75rem; letter-spacing: .02em; }
.quiet-button { border: 1px solid rgba(86, 59, 48, .18); background: rgba(255, 253, 249, .5); border-radius: 999px; padding: 9px 18px; cursor: pointer; color: var(--brown-soft); text-decoration:none; }
.quiet-button:hover { background: rgba(255, 253, 249, .9); }

.app-shell { width: min(1160px, calc(100% - 32px)); margin: 0 auto; min-height: calc(100svh - 154px); display: grid; place-items: center; padding: 20px 0 48px; }
.view { display: none; width: 100%; animation: viewIn .5s cubic-bezier(.2,.8,.2,1) both; }
.view.is-active { display: grid; place-items: center; }

@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.landing-view { grid-template-columns: minmax(280px, 420px) minmax(320px, 480px); grid-template-areas: "copy deck" "actions deck"; column-gap: clamp(38px, 8vw, 110px); align-items: center; }
.intro-copy { grid-area: copy; align-self: end; }
.kicker { color: var(--gold-deep); font-weight: 700; letter-spacing: .07em; font-size: .9rem; }
.intro-copy h1, .section-heading h2, .draw-heading h2 { font-family: "Frank Ruhl Libre", serif; color: var(--brown); }
.intro-copy h1 { margin: 8px 0 12px; font-size: clamp(3rem, 6.2vw, 5.7rem); line-height: .94; }
.intro-copy p, .section-heading p { margin: 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.75; }

.deck-button { grid-area: deck; position: relative; width: min(82vw, 360px); aspect-ratio: .69; border: 0; padding: 0; background: transparent; cursor: pointer; perspective: 1100px; }
.deck-shadow, .deck-face { position: absolute; inset: 0; border-radius: 34px; }
.deck-shadow { border: 1px solid rgba(168,117,36,.27); background: rgba(255,252,247,.56); }
.deck-shadow-one { transform: translate(-18px, 12px) rotate(-4deg); }
.deck-shadow-two { transform: translate(16px, 8px) rotate(3deg); }
.deck-face {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 36px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(120deg, #9b6a2e, #f2d98b 30%, #a87524 58%, #f4e2a7 78%, #8d6427) border-box;
  box-shadow: 0 35px 90px rgba(86,59,48,.22), inset 0 0 60px rgba(215,179,107,.08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.deck-face::before { content:""; position:absolute; inset:13px; border:1px solid rgba(168,117,36,.22); border-radius:24px; }
.deck-face::after { content:""; position:absolute; width:160%; height:45%; top:-75%; left:-35%; transform:rotate(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); transition:top .8s ease; }
.deck-button:hover .deck-face { transform: translateY(-7px) rotateX(2deg); box-shadow: 0 42px 100px rgba(86,59,48,.28), inset 0 0 60px rgba(215,179,107,.08); }
.deck-button:hover .deck-face::after { top:115%; }
.deck-orbit { position:absolute; top:34px; left:38px; color:var(--gold-light); font-size:1.2rem; }
.deck-mark { font-family: Georgia, serif; font-size: 5.8rem; font-weight: 300; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px var(--gold-deep); filter: drop-shadow(0 9px 14px rgba(168,117,36,.16)); }
.deck-instruction { margin-top: 26px; color: var(--muted); font-size: .92rem; }
.deck-face strong { margin-top: 4px; color: var(--brown); font-family: "Frank Ruhl Libre", serif; font-size: 1.25rem; }

.landing-actions { grid-area: actions; width: 100%; align-self: start; margin-top: 30px; }
.primary-button, .secondary-button { border: 0; cursor: pointer; min-height: 58px; border-radius: 999px; font-weight: 700; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.primary-button { width: 100%; color: #fffdf9; font-size: 1.07rem; background: linear-gradient(112deg,#8b5a23 0%,#d8b461 42%,#a87524 68%,#7e501f 100%); background-size: 170% 100%; box-shadow: 0 13px 28px rgba(139,90,35,.24); }
.primary-button:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 17px 34px rgba(139,90,35,.31); }
.spark { margin-left: 7px; color: var(--gold-bright); }
.or-divider { display:flex; align-items:center; gap:12px; margin:18px 0; color:#9a9088; font-size:.8rem; }
.or-divider::before,.or-divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(86,59,48,.18),transparent)}
.secondary-button { position:relative; width:100%; padding: 0 50px; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--brown); background:rgba(255,253,249,.62); border:1px solid rgba(168,117,36,.32); box-shadow:0 10px 28px rgba(86,59,48,.07); }
.secondary-button:hover { transform:translateY(-2px); background:rgba(255,253,249,.92); }
.layers-icon { color:var(--gold-deep); font-size:1.3rem; }.secondary-button .arrow{position:absolute;left:22px;margin:0;color:var(--gold-deep)}

.topics-view { max-width: 980px; }
.section-heading, .draw-heading { text-align:center; margin-bottom:30px; }
.section-heading h2, .draw-heading h2 { margin:7px 0 5px; font-size:clamp(2.2rem,5vw,4rem); line-height:1.05; }
.topics-grid { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.topic-choice { position:relative; min-height:112px; overflow:hidden; display:flex; align-items:center; gap:18px; text-align:right; padding:21px 23px; border:1px solid rgba(var(--choice-rgb),.27); border-radius:22px; background:linear-gradient(110deg,rgba(255,253,249,.83),rgba(var(--choice-rgb),.1)); box-shadow:0 13px 34px rgba(86,59,48,.07); cursor:pointer; transition:.25s ease; }
.topic-choice::after{content:"";position:absolute;inset:auto -25px -52px auto;width:130px;height:130px;border-radius:50%;background:rgba(var(--choice-rgb),.09)}
.topic-choice:hover { transform:translateY(-3px); box-shadow:0 18px 42px rgba(86,59,48,.12); border-color:rgba(var(--choice-rgb),.55); }
.topic-index { display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:50%;color:rgb(var(--choice-rgb));border:1px solid rgba(var(--choice-rgb),.35);background:rgba(255,255,255,.44);font-weight:700 }
.topic-label strong { display:block;color:rgb(var(--choice-rgb));font-family:"Frank Ruhl Libre",serif;font-size:1.25rem;margin-bottom:4px }.topic-label span { color:var(--muted);font-size:.9rem;line-height:1.35 }.topic-arrow{margin-right:auto;color:rgb(var(--choice-rgb));font-size:1.35rem}
.text-button { margin:28px auto 0;border:0;background:none;color:var(--brown-soft);text-decoration:underline;text-underline-offset:5px;cursor:pointer;padding:8px 16px }

.draw-view { max-width: 760px; }
.draw-heading { margin-bottom: 18px; }
.draw-heading h2 { font-size:clamp(2rem,4vw,3rem); }
.card-stage { width:100%;display:grid;place-items:center;perspective:1200px; }
.reflection-card { --card-topic:var(--topic); position:relative;width:min(88vw,438px);min-height:min(69svh,640px);overflow:hidden;display:flex;flex-direction:column;padding:28px 30px 22px;border:1px solid transparent;border-radius:34px;background:linear-gradient(145deg,rgba(255,253,249,.98),rgba(248,241,231,.98)) padding-box,linear-gradient(120deg,#8f6126,#f2d98b 28%,#a87524 53%,#f6e7b4 76%,#8f6126) border-box;box-shadow:0 35px 90px rgba(86,59,48,.22),0 0 0 9px rgba(255,253,249,.28);isolation:isolate;transform-style:preserve-3d; }
.reflection-card::before{content:"";position:absolute;inset:-30%;z-index:-1;background:radial-gradient(circle at 70% 20%,rgba(var(--topic-rgb),.20),transparent 32%),radial-gradient(circle at 24% 82%,rgba(242,217,139,.25),transparent 30%)}
.reflection-card::after{content:"";position:absolute;inset:13px;border:1px solid rgba(168,117,36,.20);border-radius:25px;pointer-events:none}
.shine{position:absolute;z-index:5;width:170%;height:40%;left:-45%;top:-70%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transform:rotate(-18deg);pointer-events:none}
.card-meta{display:flex;align-items:center;justify-content:space-between;color:var(--gold-deep);font-size:.82rem;font-weight:700;letter-spacing:.05em}.topic-pill{color:rgb(var(--topic-rgb));border:1px solid rgba(var(--topic-rgb),.3);background:rgba(var(--topic-rgb),.08);padding:7px 12px;border-radius:999px;letter-spacing:0}
.card-content{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:35px 8px 22px}.card-content h3{margin:0;color:var(--brown);font-family:"Frank Ruhl Libre",serif;font-size:clamp(1.65rem,4.3vw,2.18rem);line-height:1.35;font-weight:600;white-space:pre-line}.card-content p{margin:0 auto;max-width:340px;color:#514b47;font-size:clamp(1rem,2.7vw,1.12rem);line-height:1.7;white-space:pre-line}.gold-rule{width:70%;margin:34px auto 28px;display:flex;align-items:center;color:var(--gold-deep)}.gold-rule::before,.gold-rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold-light),transparent)}.gold-rule span{margin:0 10px;font-size:.85rem}.card-signature{text-align:center;color:#8a817a;font-size:.75rem;letter-spacing:.02em}
.reflection-card.is-shuffling { animation:shuffleCard .17s linear infinite; }
.reflection-card.is-revealing { animation:revealCard .75s cubic-bezier(.18,.89,.32,1.28) both; }
.reflection-card.is-revealing .shine { animation:cardShine .95s .12s ease both; }
@keyframes shuffleCard{0%{transform:translateX(-8px) rotateY(-3deg) rotate(-.8deg);filter:blur(.2px)}50%{transform:translateX(9px) rotateY(4deg) rotate(.8deg)}100%{transform:translateX(-8px) rotateY(-3deg) rotate(-.8deg)}}
@keyframes revealCard{0%{opacity:.55;transform:scale(.92) rotateY(12deg)}100%{opacity:1;transform:scale(1) rotateY(0)}}
@keyframes cardShine{0%{top:-70%}100%{top:130%}}
.draw-status{min-height:24px;margin:14px 0 4px;text-align:center;color:var(--muted);font-size:.9rem}
.card-navigation{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}.nav-circle{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(168,117,36,.34);background:rgba(255,253,249,.75);color:var(--brown);cursor:pointer;font-size:1.25rem}.nav-circle:disabled{opacity:.32;cursor:not-allowed}.nav-main{min-height:50px;padding:0 26px;border:0;border-radius:999px;color:#fffdf9;background:linear-gradient(110deg,#8b5a23,#d7b25c,#9b6824);box-shadow:0 11px 25px rgba(139,90,35,.22);font-weight:700;cursor:pointer}.nav-link{border:0;background:none;color:var(--brown-soft);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:12px 16px;width:100%}

footer { width:100%;text-align:center;padding:18px 16px 26px;color:#80766f;font-size:.8rem; }

@media (max-width: 820px) {
  .topbar{min-height:70px}.app-shell{padding-top:8px;min-height:calc(100svh - 126px)}
  .landing-view{grid-template-columns:1fr;grid-template-areas:"copy" "deck" "actions";text-align:center;gap:26px}.intro-copy{align-self:auto}.intro-copy h1{font-size:clamp(3.2rem,15vw,5rem)}.intro-copy p{max-width:390px;margin:auto}.deck-button{width:min(69vw,310px)}.landing-actions{max-width:430px;margin:0 auto}.topics-grid{grid-template-columns:1fr}.section-heading{margin-bottom:22px}.reflection-card{min-height:min(64svh,590px);padding:25px 23px 20px}.card-content{padding-inline:2px}
}

@media (max-width: 430px) {
  .topbar{width:calc(100% - 24px);min-height:60px}.quiet-button{padding:8px 13px;font-size:.86rem}.app-shell{width:calc(100% - 22px);min-height:calc(100svh - 108px);padding:4px 0 22px}.kicker{font-size:.82rem}.intro-copy p{font-size:1rem}.deck-button{width:min(72vw,288px)}.deck-face{border-radius:27px;padding:25px}.deck-shadow,.deck-face{border-radius:27px}.deck-mark{font-size:4.6rem}.deck-face strong{font-size:1.1rem}.topics-grid{gap:11px}.topic-choice{min-height:96px;padding:16px;border-radius:19px}.topic-label strong{font-size:1.13rem}.topics-view .section-heading h2{display:none}.topics-view .section-heading{margin-bottom:14px}.reflection-card{width:calc(100% - 16px);min-height:0;border-radius:27px;padding:18px 20px 16px}.card-content{flex:none;padding:21px 2px 8px}.card-content h3{font-size:clamp(1.42rem,6.7vw,1.76rem);line-height:1.28}.gold-rule{margin-block:18px 15px}.card-content p{font-size:.96rem;line-height:1.55}.card-signature{display:none}.draw-heading{margin-bottom:9px}.draw-view.random-mode .draw-heading h2{display:none}.draw-view.random-mode .draw-heading{margin-bottom:7px}.draw-status{margin:8px 0 2px}.card-navigation{gap:8px;margin-top:7px}.nav-circle{width:44px;height:44px}.nav-main{min-height:46px;padding:0 17px}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}