:root {
  --ink: #2b2926;
  --ink-soft: #5a5650;
  --paper: #fbf6ec;
  --paper-deep: #f3e8d2;
  --paper-card: #fffdf7;
  --garnet: #7c1026;
  --garnet-deep: #55081a;
  --gold: #b8862c;
  --gold-bright: #d8ab52;
  --gold-line: #c9a227;
  color-scheme: light;
  font-family: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; }
body {
  min-height: 100dvh;
  color: var(--ink);
  font-family: "Montserrat", "Segoe UI", sans-serif;
  background:
    radial-gradient(ellipse at 12% -6%, rgba(184,134,44,.14), transparent 46%),
    radial-gradient(ellipse at 92% 108%, rgba(124,16,38,.10), transparent 50%),
    linear-gradient(180deg, #fffefb 0%, var(--paper) 55%, #f6ecd8 100%);
  background-attachment: fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .55; z-index: 0;
  background-image:
    radial-gradient(circle, rgba(184,134,44,.35) 1px, transparent 1.6px);
  background-size: 46px 46px;
}
button { font: inherit; }

.screen {
  position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center;
  padding: clamp(22px, 4vw, 64px); isolation: isolate;
}
.screen::before, .screen::after { content: ""; position: absolute; pointer-events: none; border: 1px solid rgba(184,134,44,.55); }
.screen::before { inset: clamp(10px,2vw,26px); }
.screen::after { inset: clamp(16px,2.6vw,38px); border-color: rgba(124,16,38,.16); }

.eyebrow { margin: 0 0 clamp(6px,1.4vh,16px); color: var(--garnet); font-size: clamp(.7rem,1vw,.92rem); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.brand {
  margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.6rem,8.6vw,6.2rem); font-weight: 600; letter-spacing: .04em; line-height: .98; text-wrap: balance;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(184,134,44,.18);
}
.title { margin: clamp(10px,2vh,22px) 0 10px; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(2rem,5vw,4.4rem); line-height: 1.05; text-wrap: balance; color: var(--ink); }
.subtitle, .spread-status { margin: 0; color: var(--ink-soft); font-size: clamp(.9rem,1.4vw,1.18rem); }
.release-marker { margin: clamp(8px,1.6vh,18px) 0 0; color: var(--gold); font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.release-marker span { margin: 0 .35em; }
.intro, .shuffle-layout, .reveal-layout { width: min(1200px,100%); text-align: center; }
.intro-action { margin-top: clamp(14px,2.6vh,32px); }

.hero-banner { width: min(760px, 92%); max-height: clamp(110px, 27vh, 260px); margin: 0 auto clamp(8px,1.6vh,16px); border-radius: 16px; overflow: hidden; background: #fffefb; box-shadow: 0 18px 44px rgba(90,60,10,.16); border: 1px solid rgba(184,134,44,.35); }
.hero-banner img { display: block; width: 100%; height: 100%; object-fit: contain; }

.deco-line { display: flex; align-items: center; gap: 22px; width: min(660px,84%); margin: clamp(14px,2.6vh,32px) auto; color: var(--gold); }
.deco-line::before, .deco-line::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.deco-line span { width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--paper); }

.primary, .secondary, .back-button, .reshuffle {
  border: 1px solid var(--gold); color: var(--garnet-deep); background: var(--paper-card); cursor: pointer;
  transition: transform 260ms cubic-bezier(.32,.72,0,1), background 260ms cubic-bezier(.32,.72,0,1), opacity 260ms ease, box-shadow 260ms ease, color 260ms ease;
  box-shadow: 0 4px 14px rgba(124,16,38,.08);
}
.primary:hover, .secondary:hover, .back-button:hover, .reshuffle:hover { background: var(--garnet); border-color: var(--garnet); color: #fff8ec; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(124,16,38,.24); }
.primary:focus-visible, .back-button:focus-visible, .task-link:focus-visible, .closed-card:focus-visible, .reshuffle:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 4px; }
.primary { padding: 15px 32px; letter-spacing: .15em; text-transform: uppercase; font-size: .86rem; font-weight: 600; border-radius: 2px; }
.secondary { padding: 13px 26px; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; font-weight: 600; border-radius: 2px; }

/* Card back is pure inline SVG line-art on a uniform cream+gold frame — no
   external image files, so nothing can 404 or arrive late; all six always render. */
.rh-back, .rh-front {
  position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(90,60,10,.22);
  backface-visibility: hidden;
  align-items: center; justify-content: center;
}
.rh-back {
  border: 1px solid var(--gold);
  background: linear-gradient(160deg, #fffdf7, #f6ead0 70%, #f0dfb8 100%);
}
.rh-back-frame { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 82%; height: 82%; border: 1px solid var(--gold-line); border-radius: 10px; }
.rh-back-frame::before, .rh-back-frame::after { content: ""; position: absolute; width: 22%; aspect-ratio: 1; border: 1px solid var(--gold-line); transform: rotate(45deg); }
.rh-back-frame::before { top: -11%; left: -11%; }
.rh-back-frame::after { right: -11%; bottom: -11%; }
.rh-back-symbol { display: block; width: clamp(2.2rem, 5.4vw, 3.3rem); color: var(--garnet); }
.rh-back-symbol svg { display: block; width: 100%; height: 100%; }
.rh-back-numeral { font-family: "Cormorant Garamond", Georgia, serif; font-size: .82rem; letter-spacing: .32em; color: var(--gold); text-transform: uppercase; }

/* Shuffle is six real closed cards; JS swaps only innerHTML of the icon span
   and text of the numeral on persistent nodes (no per-tick DOM recreation,
   no network fetch) — identical guarantee as before, new visuals only. */
.shuffle-screen { overflow: hidden; }
.shuffle-layout .title { margin-top: 0; }
.shuffle-stage { position: relative; width: min(700px,80vw); height: min(52vh,470px); margin: clamp(8px,2vh,24px) auto clamp(18px,3vh,34px); perspective: 1100px; }
.shuffle-piece { position: absolute; top: 50%; left: 50%; width: clamp(150px,17vw,220px); aspect-ratio: 1/1; transform: translate(-50%,-50%); transition: transform 90ms cubic-bezier(.3,.7,.4,1); will-change: transform; }
.shuffle-piece .rh-back { inset: 0; }

.spread-screen { align-content: center; }
.spread { width: min(1500px,100%); }
.spread-header { margin: 0 auto clamp(16px,2.8vh,30px); text-align: center; }
.spread-header .title { margin: 0 0 8px; font-size: clamp(1.8rem,3.4vw,3.3rem); }
.card-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: clamp(10px,1.5vw,22px); }
.closed-card { position: relative; aspect-ratio: 1/1; border: 0; padding: 0; color: inherit; background: transparent; cursor: pointer; transition: transform 300ms cubic-bezier(.32,.72,0,1), filter 300ms ease; }
.closed-card:hover:not(:disabled) { z-index: 2; transform: translateY(-12px) rotate(-.5deg); filter: brightness(1.04) drop-shadow(0 10px 22px rgba(124,16,38,.22)); }
.reshuffle { display: block; margin: clamp(16px,2.5vh,28px) auto 0; padding: 9px 16px; border-color: rgba(184,134,44,.5); color: var(--ink-soft); font-size: .76rem; letter-spacing: .08em; background: transparent; box-shadow: none; }

/* One cinematic reveal card; content exists only after selection. */
.reveal-screen { overflow: hidden; }
.reveal-layout .eyebrow { margin-bottom: clamp(10px,2vh,20px); }
.reveal-card { position: relative; width: clamp(250px,min(31vw,calc((100dvh - 230px) * .655)),455px); aspect-ratio: 2/3.05; margin: 0 auto; perspective: 1600px; }
.reveal-inner { position: absolute; inset: 0; display: block; transform-style: preserve-3d; animation: revealLift 1.15s cubic-bezier(.2,.76,.16,1) both; }
.reveal-card .reveal-back { transform: rotateY(0deg); animation: hideRevealBack 1.15s cubic-bezier(.2,.76,.16,1) both; }
.rh-front { flex-direction: column; justify-content: center; align-items: center; padding: clamp(24px,3vw,44px); transform: rotateY(-180deg); color: var(--ink); text-align: center; background: radial-gradient(circle at 50% 30%,rgba(255,255,255,.85),transparent 46%), linear-gradient(150deg,#fffefb,#f7ecd6); box-shadow: 0 24px 64px rgba(90,60,10,.24), inset 0 0 0 6px #fffdf7, inset 0 0 0 7px var(--gold-line), inset 0 0 0 13px #fffdf7, inset 0 0 0 14px rgba(124,16,38,.28); animation: showRevealFront 1.15s cubic-bezier(.2,.76,.16,1) both; }
.rh-front::before, .rh-front::after { content: ""; position: absolute; width: 25%; aspect-ratio: 1; border: 1px solid rgba(124,16,38,.35); transform: rotate(45deg); }
.rh-front::before { top: -13%; left: -13%; }
.rh-front::after { right: -13%; bottom: -13%; }
.front-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px,1.7vh,18px); height: 100%; }
.front-roman { color: var(--gold); font-family: "Cormorant Garamond", serif; font-size: clamp(.72rem,1vw,1rem); letter-spacing: .3em; }
.front-sigil { display: grid; place-items: center; width: clamp(56px,7vw,84px); aspect-ratio: 1; border: 1px solid var(--garnet); border-radius: 50%; color: var(--garnet); font-family: "Cormorant Garamond", serif; font-size: clamp(1.7rem,3vw,2.8rem); background: #fffdf7; box-shadow: inset 0 0 0 5px #fffdf7, inset 0 0 0 6px rgba(184,134,44,.4); }
.front-corner { position: absolute; z-index: 2; color: var(--gold); font-family: "Cormorant Garamond", serif; font-size: clamp(.68rem,1vw,.9rem); }
.front-corner-top { top: 5%; left: 7%; }
.front-corner-bottom { right: 7%; bottom: 5%; transform: rotate(180deg); }
.front-divider { display: flex; align-items: center; width: 68%; gap: 10px; color: var(--gold); }
.front-divider::before, .front-divider::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.front-divider i { width: 9px; height: 9px; border: 1px solid currentColor; transform: rotate(45deg); }
.prediction { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(1.3rem,2.2vw,2.15rem); line-height: 1.1; text-wrap: balance; color: var(--garnet-deep); }
.condition { font-size: clamp(.86rem,1.15vw,1.1rem); line-height: 1.4; text-wrap: balance; color: var(--ink-soft); }
.task-link { position: relative; z-index: 3; display: inline; border: 0; padding: 0; color: var(--garnet); background: transparent; font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.task-link:hover { color: var(--garnet-deep); text-decoration-thickness: 3px; }
.complete-card { margin-top: clamp(14px,2.2vh,24px); }

.detail { width: min(1120px,100%); text-align: center; }
.detail-index { color: var(--gold); font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; }
.detail-task { margin: 18px auto; max-width: 1000px; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(2.3rem,6.5vw,6rem); line-height: 1.06; text-wrap: balance; color: var(--ink); }
.detail-hint { margin: 0 auto; max-width: 640px; color: var(--ink-soft); font-size: clamp(.85rem,1.3vw,1.05rem); letter-spacing: .02em; }
.back-button { position: fixed; z-index: 10; left: max(24px,env(safe-area-inset-left)); top: max(24px,env(safe-area-inset-top)); width: 44px; height: 44px; border-radius: 50%; font-size: 1.25rem; }
.timer-panel { width: min(820px,100%); text-align: center; }
.timer-value { margin: 16px 0 26px; color: var(--garnet); font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: clamp(7rem,24vw,16rem); font-variant-numeric: tabular-nums; line-height: .8; text-shadow: 0 2px 0 rgba(184,134,44,.2); }
.timer-value.done { color: var(--gold); animation: donePulse 700ms cubic-bezier(.32,.72,0,1) both; }
.timer-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.fullscreen { position: fixed; z-index: 20; right: max(18px,env(safe-area-inset-right)); top: max(18px,env(safe-area-inset-top)); width: 42px; height: 42px; border: 1px solid rgba(184,134,44,.6); border-radius: 50%; color: var(--garnet); background: var(--paper-card); cursor: pointer; }

.enter { animation: enter 620ms cubic-bezier(.32,.72,0,1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes revealLift { 0% { transform: translateY(20px) scale(.88); opacity: .4; } 45% { transform: translateY(-8px) scale(1.04); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hideRevealBack { 0%,42% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } }
@keyframes showRevealFront { 0%,42% { transform: rotateY(-180deg); } 100% { transform: rotateY(0deg); } }
@keyframes donePulse { 0% { transform: scale(.88); opacity: .3; } 65% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }

@media (max-width: 1050px) {
  html, body { overflow: auto; }
  .card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 760px; margin: auto; }
  .spread-screen { overflow-y: auto; align-content: start; }
  .spread { padding: 34px 0; }
  .shuffle-stage { width: min(620px,88vw); }
  .hero-banner { width: min(720px, 92%); }
}

@media (max-width: 600px) {
  html, body { overflow: auto; }
  .screen { min-height: 100svh; padding: 62px 20px 34px; }
  .brand { font-size: clamp(2.2rem,12vw,3.4rem); letter-spacing: .02em; }
  .hero-banner { width: 100%; border-radius: 12px; margin-bottom: 14px; }
  .shuffle-stage { width: 100%; height: 390px; }
  .shuffle-piece { width: 138px; }
  .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .rh-back-symbol { width: 1.8rem; }
  .reveal-card { width: min(76vw,calc((100svh - 210px) * .655),330px); }
  .prediction { font-size: clamp(1.1rem,5vw,1.55rem); }
  .condition { font-size: clamp(.74rem,3.1vw,.9rem); }
  .rh-front { padding: 25px 22px; }
  .detail-task { font-size: clamp(2rem,10.5vw,4rem); }
  .fullscreen { top: 10px; right: 10px; }
  .back-button { top: 10px; left: 10px; }
}

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