:root {
  --ink: #061713;
  --ink-soft: #0e3129;
  --gold: #c8a24b;
  --gold-bright: #edcf77;
  --paper: #f2e8cb;
  --paper-soft: #fff8e4;
  --emerald: #1e5b4c;
  color-scheme: dark;
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; }
body {
  min-height: 100dvh;
  color: var(--paper);
  background: linear-gradient(rgba(3,18,15,.86), rgba(3,18,15,.93)), url("integer-bg.png") center / cover no-repeat fixed, var(--ink);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
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(200,162,75,.72); }
.screen::before { inset: clamp(10px,2vw,26px); }
.screen::after { inset: clamp(16px,2.6vw,38px); border-color: rgba(200,162,75,.28); }

.eyebrow { margin: 0 0 16px; color: var(--gold-bright); font-size: clamp(.7rem,1vw,.92rem); font-weight: 700; letter-spacing: .32em; text-transform: uppercase; }
.brand { margin: 0; color: var(--paper-soft); font-family: Georgia,"Times New Roman",serif; font-size: clamp(4.3rem,12vw,10rem); font-weight: 400; letter-spacing: .18em; line-height: .86; text-indent: .18em; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.title { margin: 22px 0 10px; font-family: Georgia,"Times New Roman",serif; font-size: clamp(2rem,5vw,4.7rem); font-weight: 400; line-height: 1.03; text-wrap: balance; }
.subtitle, .spread-status { margin: 0; color: rgba(242,232,203,.72); font-size: clamp(.9rem,1.4vw,1.18rem); }
.release-marker { margin: 18px 0 0; color: var(--gold-bright); font-size: .72rem; font-weight: 700; 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: 32px; }

.deco-line { display: flex; align-items: center; gap: 22px; width: min(660px,84%); margin: 32px auto; color: var(--gold); }
.deco-line::before, .deco-line::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.deco-line span { width: 14px; height: 14px; border: 1px solid currentColor; transform: rotate(45deg); }

.primary, .secondary, .back-button, .reshuffle {
  border: 1px solid var(--gold); color: var(--paper-soft); background: rgba(8,34,28,.8); cursor: pointer;
  transition: transform 260ms cubic-bezier(.32,.72,0,1), background 260ms cubic-bezier(.32,.72,0,1), opacity 260ms ease;
}
.primary:hover, .secondary:hover, .back-button:hover, .reshuffle:hover { background: rgba(30,91,76,.9); transform: translateY(-2px); }
.primary:focus-visible, .back-button:focus-visible, .task-link:focus-visible, .closed-card:focus-visible, .reshuffle:focus-visible { outline: 3px solid var(--paper-soft); outline-offset: 4px; }
.primary { padding: 15px 32px; letter-spacing: .15em; text-transform: uppercase; }
.secondary { padding: 13px 26px; letter-spacing: .1em; text-transform: uppercase; }

/* Fully designed INTEGER/Gatsby card back. */
.gatsby-back, .gatsby-front {
  position: absolute; inset: 0; display: block; overflow: hidden; border: 1px solid var(--gold); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.42), inset 0 0 0 5px #071b17, inset 0 0 0 6px rgba(200,162,75,.6);
  backface-visibility: hidden;
}
.gatsby-back { padding: 10px; background: linear-gradient(145deg,#05130f,#0d332a); }
.back-frame {
  position: relative; display: grid; place-items: center; height: 100%; overflow: hidden; border: 1px solid rgba(237,207,119,.88); border-radius: 8px;
  background: repeating-conic-gradient(from 45deg,rgba(200,162,75,.12) 0 8deg,transparent 8deg 16deg), radial-gradient(circle at center,#174a3d 0 12%,transparent 12.5%), linear-gradient(135deg,#061713,#123a31);
}
.back-frame::before, .back-frame::after { content: ""; position: absolute; border: 1px solid rgba(237,207,119,.62); transform: rotate(45deg); }
.back-frame::before { inset: 12%; }
.back-frame::after { inset: 25%; border-width: 2px; box-shadow: 0 0 32px rgba(237,207,119,.22); }
.back-fan { position: absolute; inset: 8%; border-radius: 50%; opacity: .62; background: repeating-conic-gradient(from 0deg,var(--gold) 0 1deg,transparent 1deg 12deg); mask: radial-gradient(circle,transparent 0 37%,#000 38% 39%,transparent 40% 50%,#000 51% 52%,transparent 53%); }
.back-monogram { position: relative; z-index: 2; display: grid; place-items: center; width: 27%; aspect-ratio: 1; border: 2px solid var(--gold-bright); color: var(--gold-bright); background: #0a2821; font-family: Georgia,serif; font-size: clamp(1.8rem,3vw,3.5rem); transform: rotate(45deg); box-shadow: 0 0 0 5px #0a2821,0 0 0 6px rgba(237,207,119,.55); }
.back-monogram { text-shadow: 1px 1px 0 rgba(0,0,0,.3); }
.back-brand { position: absolute; z-index: 2; bottom: 12%; color: var(--gold-bright); font-family: Georgia,serif; font-size: clamp(.52rem,.72vw,.78rem); letter-spacing: .26em; text-indent: .26em; }

/* Shuffle is six real closed cards, JS-driven fast card-change (no smooth loop). */
.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: 2/3.05; transform: translate(-50%,-50%); transition: transform 90ms cubic-bezier(.3,.7,.4,1); will-change: transform; }
.shuffle-piece .gatsby-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.45rem); }
.card-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: clamp(10px,1.5vw,22px); }
.closed-card { position: relative; aspect-ratio: 2/3.05; 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.12); }
.reshuffle { display: block; margin: clamp(16px,2.5vh,28px) auto 0; padding: 9px 16px; border-color: rgba(200,162,75,.42); color: rgba(242,232,203,.7); font-size: .76rem; letter-spacing: .08em; }

/* 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; }
.gatsby-front { display: flex; 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% 34%,rgba(255,255,255,.58),transparent 42%), linear-gradient(145deg,#fff9e8,#dfcfa3); box-shadow: 0 26px 70px rgba(0,0,0,.48),inset 0 0 0 6px #efe2bd,inset 0 0 0 7px var(--emerald),inset 0 0 0 13px #efe2bd,inset 0 0 0 14px rgba(30,91,76,.42); animation: showRevealFront 1.15s cubic-bezier(.2,.76,.16,1) both; }
.gatsby-front::before, .gatsby-front::after { content: ""; position: absolute; width: 25%; aspect-ratio: 1; border: 1px solid rgba(30,91,76,.46); transform: rotate(45deg); }
.gatsby-front::before { top: -13%; left: -13%; }
.gatsby-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(--emerald); font-family: Georgia,serif; font-size: clamp(.72rem,1vw,1rem); letter-spacing: .26em; }
.front-sigil { display: grid; place-items: center; width: clamp(56px,7vw,84px); aspect-ratio: 1; border: 1px solid var(--emerald); border-radius: 50%; color: var(--emerald); font-family: Georgia,serif; font-size: clamp(1.7rem,3vw,2.8rem); box-shadow: inset 0 0 0 5px #efe2bd,inset 0 0 0 6px rgba(30,91,76,.35); }
.front-corner { position: absolute; z-index: 2; color: var(--emerald); font-family: Georgia,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(--emerald); }
.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: Georgia,"Times New Roman",serif; font-size: clamp(1.25rem,2.2vw,2.15rem); line-height: 1.08; text-wrap: balance; }
.condition { font-size: clamp(.82rem,1.15vw,1.1rem); line-height: 1.35; text-wrap: balance; }
.task-link { position: relative; z-index: 3; display: inline; border: 0; padding: 0; color: var(--emerald); background: transparent; font: inherit; font-weight: 800; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.task-link:hover { color: #0b3027; 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-bright); font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; }
.detail-task { margin: 18px auto; max-width: 1000px; font-family: Georgia,serif; font-size: clamp(2.5rem,6.5vw,6.6rem); font-weight: 400; line-height: 1.03; text-wrap: balance; }
.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(--paper-soft); font-family: Georgia,serif; font-size: clamp(7rem,24vw,17rem); font-variant-numeric: tabular-nums; line-height: .8; text-shadow: 0 0 50px rgba(200,162,75,.18); }
.timer-value.done { color: var(--gold-bright); 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(200,162,75,.54); border-radius: 50%; color: var(--gold-bright); background: rgba(7,26,23,.72); 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); }
}

@media (max-width: 600px) {
  html, body { overflow: auto; }
  .screen { min-height: 100svh; padding: 62px 28px 34px; }
  .brand { font-size: clamp(2.8rem,15vw,4.4rem); letter-spacing: .1em; text-indent: .1em; }
  .shuffle-stage { width: 100%; height: 390px; }
  .shuffle-piece { width: 138px; }
  .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .reveal-card { width: min(76vw,calc((100svh - 210px) * .655),330px); }
  .prediction { font-size: clamp(1.1rem,5vw,1.55rem); }
  .condition { font-size: clamp(.72rem,3.1vw,.9rem); }
  .gatsby-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; }
}