* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#fbfffd;
  color:#203d32;
  font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif
}
.fortune-page {
  max-width:1120px;
  margin:auto;
  padding:12px 20px 24px
}
.crumb {
  font-size:13px;
  margin-bottom:10px
}
.crumb a {
  color:#267358
}
.fortune-frame {
  border:1px solid #cfe5d9;
  background:#fff;
  border-radius:18px;
  padding:20px;
  min-height:430px
}
.fortune-heading {
  text-align:center
}
.fortune-heading #page-title {
  font-size:clamp(22px,3vw,30px);
  margin:0 0 6px
}
.fortune-heading p {
  margin:0 0 16px;
  color:#536b60
}
.hub {
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:center
}
.hero {
  width:43%;
  max-height:270px;
  object-fit:cover;
  border-radius:12px
}
.choices {
  display:grid;
  gap:12px;
  flex:1;
  max-width:540px
}
button {
  font:inherit;
  min-height:44px;
  cursor:pointer;
  border:1px solid #a9cfbb;
  border-radius:10px;
  padding:12px 18px;
  background:#edf8f1;
  color:#244c3b
}
button:hover {
  background:#dff0e5
}
button:focus-visible,a:focus-visible {
  outline:3px solid #b67c20;
  outline-offset:3px
}
button:disabled {
  cursor:default;
  opacity:.65
}
.choices button {
  text-align:left;
  min-height:70px
}
.choices strong {
  display:block;
  font-size:20px
}
.choices span {
  display:block;
  font-size:14px;
  margin-top:4px
}
.mode-top {
  display:flex;
  align-items:center;
  gap:18px
}
.mode-top h2 {
  margin:0;
  font-size:22px
}
.secondary {
  background:#fff;
  font-size:14px;
  padding:8px 12px
}
.help {
  margin:12px 0;
  color:#536b60;
  font-size:14px
}
.stage {
  min-height:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px
}
.ritual {
  font-size:30px;
  letter-spacing:.12em;
  color:#2f8f70;
  padding:14px;
  border:2px solid #b8d8c7;
  border-radius:14px;
  min-width:110px
}
.ritual:empty {
  display:none
}
.result h3 {
  margin:0 0 9px;
  font-size:26px;
  color:#287454
}
.result p {
  margin:7px 0;
  line-height:1.65
}
.result .date {
  font-size:14px;
  color:#536b60
}
.metrics {
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap
}
.metrics span {
  background:#eff8f2;
  border-radius:8px;
  padding:8px 12px
}
.primary {
  display:block;
  background:#2f8f70;
  color:#fff;
  min-width:200px;
  margin:14px auto 0
}
.primary:hover {
  background:#267458
}
.cards {
  display:flex;
  gap:16px;
  justify-content:center;
  width:100%
}
.cards button {
  width:100px;
  height:132px;
  background:#edf6f1;
  border:3px double #5c997d;
  font-size:25px
}
.cards button[aria-pressed=true] {
  background:#d5eddf;
  border-color:#2f8f70
}
.storage-note {
  font-size:12px;
  color:#806123;
  text-align:center;
  margin:10px 0 0
}
.storage-note:empty {
  display:none
}
.disclaimer {
  font-size:12px;
  color:#64766c;
  text-align:center;
  margin:16px 0 0
}
.shake {
  animation:shake .28s ease-in-out
}
@keyframes shake {
  25% {
    transform:rotate(-10deg)
  }
  75% {
    transform:rotate(10deg)
  }
}
[hidden] {
  display:none!important
}
@media(max-width:600px) {
  .fortune-page {
    padding:8px 12px 20px
  }
  .fortune-frame {
    padding:14px;
    min-height:0
  }
  .fortune-heading #page-title {
    font-size:23px
  }
  .fortune-heading p {
    font-size:14px;
    margin-bottom:12px
  }
  .hub {
    flex-direction:column;
    gap:12px
  }
  .hero {
    width:100%;
    height:120px
  }
  .choices {
    width:100%;
    gap:9px
  }
  .choices button {
    min-height:64px;
    padding:9px 14px
  }
  .choices strong {
    font-size:18px
  }
  .choices span {
    font-size:13px
  }
  .mode-top {
    gap:10px
  }
  .mode-top h2 {
    font-size:20px
  }
  .stage {
    min-height:185px
  }
  .metrics {
    gap:6px
  }
  .metrics span {
    padding:7px 9px;
    font-size:14px
  }
  .result h3 {
    font-size:24px
  }
  .result p {
    font-size:15px
  }
  .cards {
    gap:12px
  }
  .cards button {
    width:78px;
    height:105px
  }
  .disclaimer {
    margin-top:12px
  }
}
@media(max-height:480px) and (min-width:601px) {
  .fortune-page {
    padding-top:5px
  }
  .fortune-frame {
    padding:10px 16px;
    min-height:0
  }
  .fortune-heading {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px
  }
  .fortune-heading #page-title {
    font-size:22px;
    margin:0
  }
  .fortune-heading p {
    margin:0;
    font-size:13px
  }
  .hub {
    margin-top:10px
  }
  .hero {
    height:145px;
    width:30%
  }
  .choices {
    grid-template-columns:repeat(3,1fr);
    max-width:none;
    gap:9px
  }
  .choices button {
    padding:10px;
    min-height:112px
  }
  .choices strong {
    font-size:18px
  }
  .choices span {
    font-size:12px
  }
  .experience {
    position:relative
  }
  .mode-top {
    margin-top:8px
  }
  .help {
    margin:6px 0;
    font-size:13px
  }
  .stage {
    min-height:118px;
    max-height:145px;
    overflow-y:auto;
    gap:5px
  }
  .ritual {
    font-size:24px;
    padding:8px
  }
  .result h3 {
    font-size:22px;
    margin-bottom:4px
  }
  .result p {
    font-size:14px;
    margin:4px
  }
  .metrics span {
    padding:4px 10px
  }
  .cards button {
    height:80px;
    width:70px
  }
  .primary {
    margin-top:8px;
    padding:8px
  }
  .disclaimer {
    margin-top:8px;
    font-size:11px
  }
}
@media(prefers-reduced-motion:reduce) {
  .shake {
    animation:none
  }
}
.usage {
  margin: 20px 0;
}
.usage summary {
  min-height: 44px;
  padding: 12px;
  cursor: pointer;
}
.usage h2 {
  font-size: 17px;
}
.cards button.chosen {
  animation: card-reveal .25s ease-out;
}
@keyframes card-reveal {
  from {
    transform: rotateY(35deg);
  }
  to {
    transform: rotateY(0);
  }
}
@media (max-height: 480px) and (min-width: 601px) {
  .stage {
    justify-content: flex-start;
  }
  .result {
    flex-shrink: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cards button.chosen {
    animation: none;
  }
}

/* Keep both navigation and the main action in the available landscape height. */
@media (max-height: 480px) and (min-width: 601px) {
  .fortune-frame {
    height: calc(100dvh - 100px);
    min-height: 260px;
    overflow: hidden;
  }
  .fortune-frame:has(.experience:not([hidden])) .fortune-heading {
    display: none;
  }
  .experience {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-rows: 44px minmax(0, 1fr) 44px;
    gap: 8px 16px;
    height: calc(100% - 26px);
    min-height: 0;
  }
  .mode-top {
    display: contents;
  }
  #back {
    grid-column: 1;
    grid-row: 1;
    min-height: 44px;
  }
  #mode-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    text-align: center;
  }
  .help {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    overflow-y: auto;
    font-size: 14px;
  }
  .stage {
    grid-column: 2;
    grid-row: 2 / 4;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    justify-content: flex-start;
  }
  .primary {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
    width: 100%;
    margin: 0;
    min-height: 44px;
  }
  .result {
    width: 100%;
  }
}

/* Phases change only paint and transforms; the established stage keeps its size. */
.stage { position: relative; }
.ritual {
  position: relative;
  flex: 0 0 112px;
  width: 112px;
  height: 112px;
  min-width: 0;
  padding: 0;
  border: 0;
  display: grid;
  place-items: center;
  letter-spacing: normal;
}
.ritual:empty { display: none; }
.ritual-image { display: none; }
.has-atlas .ritual-image {
  display: block;
  position: absolute;
  inset: 0;
  background-image: var(--ritual-atlas);
  background-size: 200% 200%;
  background-repeat: no-repeat;
}
.has-atlas .ritual-fallback { visibility: hidden; }
.orb { background-position: left top; }
.tube { background-position: right top; }
.has-atlas .slip {
  background-position: left bottom;
  opacity: 0;
  transform: translateY(20px) scale(.7);
}
.has-atlas .card-back:not(.face-up) {
  background-image: var(--ritual-atlas);
  background-size: 200% 200%;
  background-position: right bottom;
  background-repeat: no-repeat;
  color: transparent;
}
.experience[data-phase="entering"] .ritual { animation: ritual-arrive .45s ease-out both; }
.experience[data-mode="daily"][data-phase="working"] .ritual { animation: orb-gather 1s ease-in both; }
.experience[data-mode="omikuji"][data-phase="working"] .ritual { animation: tube-shake .7s ease-in-out both; }
.experience[data-mode="omikuji"][data-phase="revealing"] .slip { animation: slip-rise .6s ease-out both; }
.experience[data-mode="daily"][data-phase="revealing"] .ritual,
.experience[data-mode="daily"][data-phase="result"] .ritual,
.experience[data-mode="omikuji"][data-phase="result"] .ritual { display: none; }
.experience[data-phase="revealing"] .result:not(:empty),
.experience[data-phase="result"] .result:not(:empty) { animation: result-open .3s ease-out both; }
.experience[data-mode="card"][data-phase="entering"] .cards button,
.experience[data-mode="card"][data-phase="working"] .cards button:not(.chosen) {
  animation: card-deal .6s ease-out both;
}
.cards button { flex-shrink: 0; }
.cards button.chosen { animation: selected-turn .7s ease-in-out both; }
.cards button.face-up {
  background: #edf8f1;
  color: #244c3b;
  font-size: 20px;
}
.cards:has(.chosen) button:not(.chosen) { opacity: .35; transform: scale(.9); }
@keyframes ritual-arrive {
  from { opacity: 0; transform: translateY(-16px) rotate(-5deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes orb-gather {
  from { filter: brightness(1); transform: scale(1); }
  to { filter: brightness(1.8) drop-shadow(0 0 14px #e5c783); transform: scale(1.1); }
}
@keyframes tube-shake {
  0%, 100% { transform: rotate(0); }
  20%, 60% { transform: rotate(-12deg) translateX(-5px); }
  40%, 80% { transform: rotate(12deg) translateX(5px); }
}
@keyframes slip-rise {
  from { opacity: 0; transform: translateY(20px) scale(.7); }
  to { opacity: 1; transform: translateY(-24px) scale(.8); }
}
@keyframes result-open {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes card-deal {
  from { opacity: .5; transform: translateX(calc((1 - var(--card-index)) * 90px)) rotate(0deg); }
  to { opacity: 1; transform: translateX(0) rotate(calc((var(--card-index) - 1) * 4deg)); }
}
@keyframes selected-turn {
  0% { transform: rotateY(0); }
  49% { transform: rotateY(90deg); }
  50% { transform: rotateY(-90deg); }
  100% { transform: rotateY(0); }
}
@media (max-height: 480px) and (min-width: 601px) {
  .ritual { flex-basis: 104px; height: 104px; width: 104px; }
  .experience[data-mode="card"] .stage { gap: 5px; }
  .cards button.face-up { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .experience *, .cards button.chosen {
    animation: none !important;
    transition: none !important;
  }
  .experience[data-phase="revealing"] .slip { opacity: 1; transform: none; }
}

/* Reserve the same result viewport before, during and after each ritual. */
.stage { height: 240px; min-height: 0; overflow-y: auto; }
@media (max-width: 600px) {
  .stage { height: 225px; }
}
@media (max-height: 480px) and (min-width: 601px) {
  .stage { height: auto; }
}

/* Prefer the supplied alpha-cropped files; retain the atlas as a fallback. */
.has-sprites .ritual-image {
  display: block;
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.has-sprites .ritual-fallback { visibility: hidden; }
.has-sprites .orb { background-image: url('assets/ritual-orb.webp'); }
.has-sprites .tube { background-image: url('assets/ritual-tube.webp'); }
.has-sprites .slip { background-image: url('assets/ritual-slip.webp'); }
.has-sprites .card-back:not(.face-up) {
  background-image: url('assets/ritual-card.webp');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}
.has-atlas .tube, .has-sprites .tube { z-index: 2; }
.has-atlas .slip, .has-sprites .slip {
  z-index: 1;
  opacity: 0;
  transform: translateY(20px) scale(.7);
}
.has-sprites .slip {
  inset: 0 30%;
  height: 85%;
}
@keyframes slip-rise {
  from { opacity: 0; transform: translateY(20px) scale(.7); }
  to { opacity: 1; transform: translateY(-34px) scale(.85); }
}
@media (prefers-reduced-motion: reduce) {
  .experience[data-phase="revealing"] .slip {
    opacity: 1;
    transform: translateY(-34px) scale(.85);
  }
}

/* Daily working contrast makes the supplied crystal and light visible. */
.experience[data-mode="daily"] .stage {
  background-color: #edf5f2;
  border-radius: 12px;
  transition: background-color .25s ease;
}
.experience[data-mode="daily"][data-phase="working"] .stage {
  background-color: #163e48;
}
.experience[data-mode="daily"][data-phase="working"] .ritual-fallback {
  color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .experience[data-mode="daily"] .stage {
    transition: none;
  }
}

.theme-control { margin: 8px 0 12px; }
.theme-control label { display: block; margin-bottom: 4px; font-size: 14px; }
.theme-control select {
  display: block;
  width: 100%;
  max-width: 320px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #a9cfbb;
  border-radius: 8px;
  background: #fff;
  color: #244c3b;
  font: inherit;
}
.theme-control select:focus-visible { outline: 3px solid #b67c20; outline-offset: 2px; }
.result .theme-caption { font-size: 13px; color: #536b60; margin: 3px 0; }
@media (max-height: 480px) and (min-width: 601px) {
  .controls-help {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    overflow-y: auto;
  }
  .experience[data-mode="card"] .controls-help .help { display: none; }
  .theme-control { margin: 0; }
  .theme-control select { font-size: 14px; padding: 8px 5px; }
}

.experience[data-mode="card"] .stage { justify-content: flex-start; }
.experience[data-mode="card"] .result h3 { display: inline-block; }
.experience[data-mode="card"] .result .theme-caption { display: inline-block; margin-left: 10px; }

/* Card count is tab memory only; selectors share the existing control area. */
.theme-control { display: grid; grid-template-columns: minmax(0, 2fr) minmax(90px, 1fr); gap: 10px; }
.selector-field { min-width: 0; }
.selector-field select { max-width: none; }
.experience[data-spread="three"] .cards { padding-bottom: 23px; }
.experience[data-spread="three"] .cards button { position: relative; overflow: visible; }
.experience[data-spread="three"] .cards button::after {
  content: attr(data-label);
  position: absolute;
  top: calc(100% + 5px);
  left: -8px;
  right: -8px;
  font-size: 13px;
  line-height: 18px;
  color: #244c3b;
  white-space: nowrap;
}
.experience[data-spread="three"] .cards:has(.chosen) button:not(.chosen) { opacity: .75; transform: none; }
.experience[data-spread="three"][data-card-turning="true"] .cards button:not(.chosen) { animation: none; }
.experience[data-spread="three"] .cards button.face-up { animation-fill-mode: none; }
.spread-entry { text-align: left; border-top: 1px solid #d6e6dc; padding-top: 8px; margin-top: 8px; }
.experience[data-spread="three"] .result .spread-entry h3,
.experience[data-spread="three"] .result .spread-summary h3 { display: block; font-size: 17px; }
.spread-summary { text-align: left; background: #edf5f2; padding: 10px; border-radius: 8px; margin-top: 10px; }
@media (max-height: 480px) and (min-width: 601px) {
  .theme-control { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .theme-control label { font-size: 12px; line-height: 15px; margin-bottom: 1px; }
  .theme-control select { min-height: 44px; }
}

/* Journal stays inside the existing frame and never changes the seed store. */
.journal-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.journal-top h2 { margin: 0; font-size: 21px; }
.journal-body { height: 240px; overflow-y: auto; padding: 10px 4px; line-height: 1.65; }
.journal-body h3 { font-size: 19px; margin: 14px 0 6px; }
.journal-body p { margin: 7px 0; }
.journal-entry-button { display: block; width: 100%; min-height: 44px; text-align: left; margin-bottom: 8px; }
@media (max-width: 600px) {
  .choices { gap: 7px; }
  .choices button { min-height: 58px; padding: 7px 14px; }
  .journal-body { height: 225px; }
  .journal-top { gap: 6px; }
  .journal-top h2 { font-size: 18px; }
}
@media (max-height: 480px) and (min-width: 601px) {
  .choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .choices button { min-height: 112px; }
  .fortune-frame:has(.journal:not([hidden])) .fortune-heading { display: none; }
  .journal { height: calc(100% - 26px); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  .journal-body { height: auto; min-height: 0; }
  .journal-top { flex-wrap: nowrap; }
}

.journal-body { overscroll-behavior: contain; }


/* One bounded application viewport. Existing ritual keyframes stay unchanged. */
.fortune-frame { height:var(--frame-height,560px); min-height:0; padding:12px; display:flex; flex-direction:column; gap:8px; overflow:hidden; position:relative; }
.fortune-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; flex:none; text-align:left; }
.fortune-heading #page-title { font-size:22px; margin:0; }
.frame-tools { display:flex; gap:6px; flex:none; }
.frame-tools button { padding:6px 10px; min-width:44px; }
.fortune-frame:has(.experience:not([hidden])) .fortune-heading,.fortune-frame:has(.journal:not([hidden])) .fortune-heading { display:flex; }
.hub { flex:1; min-height:0; position:relative; gap:16px; }
.hero { width:44%; height:100%; max-height:none; object-fit:cover; }
.choices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:100%; max-width:none; }
.choices button { min-height:90px; padding:10px; }
.choices strong { font-size:18px; }
.choices span { font-size:13px; }
.experience { display:grid; flex:1; height:auto; min-height:0; grid-template-columns:minmax(0,1fr); grid-template-rows:44px auto minmax(0,1fr) 44px; gap:8px; }
.mode-top { display:flex; margin:0; gap:12px; }
#back,#mode-title { grid-column:auto; grid-row:auto; }
#mode-title { font-size:20px; text-align:left; }
.controls-help { grid-column:auto; grid-row:auto; overflow:visible; }
.help { margin:0; font-size:14px; }
.theme-control { margin:6px 0 0; grid-template-columns:minmax(0,2fr) minmax(90px,1fr); gap:8px; }
.theme-control label { font-size:13px; margin:0 0 2px; line-height:18px; }
.theme-control select { font-size:14px; padding:6px; }
.stage { grid-column:auto; grid-row:auto; height:auto; max-height:none; min-height:0; overflow:auto; overscroll-behavior:contain; justify-content:center; padding:6px; flex:none; }
.experience[data-mode="card"] .stage { justify-content:flex-start; }
.primary { grid-column:auto; grid-row:auto; min-width:0; width:100%; min-height:44px; padding:8px; margin:0; }
.result { width:100%; flex-shrink:0; }
.cards button { height:100px; width:78px; min-height:44px; padding:5px; }
.journal,.usage { flex:1; display:grid; height:auto; min-height:0; grid-template-rows:auto minmax(0,1fr); gap:8px; margin:0; }
.journal-top,.usage-top { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.journal-top h2,.usage-top h2 { font-size:18px; margin:0; }
.journal-body,.usage-body { height:auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:4px; font-size:15px; line-height:1.65; }
.usage h2 { font-size:18px; }
.disclaimer,.storage-note { flex:none; margin:0; }
.fortune-frame.is-expanded { position:fixed; inset:0; width:auto; height:auto!important; z-index:1000; margin:0; border:0; border-radius:0; }
body.fortune-expanded { overflow:hidden; }
@media(max-width:600px) {
  .fortune-page { padding:8px 10px 20px; }
  .fortune-frame { padding:10px; gap:6px; }
  .fortune-heading #page-title { font-size:18px; }
  .fortune-heading { flex-wrap:wrap; }
  .frame-tools { margin-left:auto; }
  .hub { display:flex; flex-direction:column; gap:8px; }
  .hero { width:100%; height:0; min-height:60px; flex:1; }
  .choices { flex:none; gap:8px; }
  .choices button { min-height:80px; }
  .choices strong { font-size:17px; }
  .choices span { font-size:13px; }
  .mode-top { gap:8px; }
  #mode-title { font-size:18px; }
  .experience { gap:6px; }
  .experience[data-mode="card"] .controls-help .help { display:none; }
  .cards { gap:12px; }
  .cards button { width:74px; height:90px; }
}
@media(max-height:480px) and (min-width:601px) {
  .fortune-frame { padding:8px 12px; gap:5px; }
  .fortune-heading #page-title { font-size:19px; }
  .hub { margin:0; }
  .hero { width:30%; height:100%; }
  .choices { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .choices button { min-height:100px; }
  .experience { grid-template-columns:200px minmax(0,1fr); grid-template-rows:44px minmax(0,1fr) 44px; gap:5px 12px; }
  .mode-top { display:contents; }
  #back { grid-column:1; grid-row:1; }
  #mode-title { grid-column:2; grid-row:1; text-align:center; }
  .controls-help { grid-column:1; grid-row:2; min-height:0; }
  .experience[data-mode="card"] .controls-help .help { display:none; }
  .theme-control { grid-template-columns:minmax(0,1fr); margin:0; gap:3px; }
  .theme-control label { font-size:12px; line-height:14px; margin:0; }
  .stage { grid-column:2; grid-row:2 / 4; justify-content:flex-start; }
  .primary { grid-column:1; grid-row:3; }
  .cards button { height:70px; width:66px; }
  .journal-top { flex-wrap:nowrap; }
}


/* Keep both selectors above the action in the short landscape viewport. */
@media(max-height:480px) and (min-width:601px) {
  .experience { grid-template-columns:240px minmax(0,1fr); }
  .theme-control { grid-template-columns:minmax(0,1fr) 80px; gap:8px; }
}


/* Entrance: the existing room fills the scene behind its menu panel. */
.hub {
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:20px;
  border-radius:12px;
  overflow:hidden;
  background:#dae9df;
}
.hub .hero {
  position:absolute;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  min-height:0;
  max-height:none;
  object-fit:cover;
  object-position:center;
  border-radius:0;
}
.hub .choices {
  flex:none;
  width:min(360px,48%);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  padding:14px;
  border:1px solid #ffffffb3;
  border-radius:14px;
  background:rgba(250,255,251,.88);
  box-shadow:0 4px 20px #173c2729;
}
.hub .choices button {
  min-height:64px;
  padding:8px 12px;
  background:rgba(255,255,255,.86);
}
.hub .choices button:hover { background:#e3f3e9; }
.hub .choices strong { font-size:18px; }
.hub .choices span { font-size:13px; line-height:1.45; margin-top:3px; }
@media(max-width:600px) {
  .hub { flex-direction:row; align-items:flex-end; padding:12px; }
  .hub .hero { object-position:58% center; }
  .hub .choices { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; gap:8px; }
  .hub .choices button { min-height:84px; padding:8px; }
  .hub .choices strong { font-size:17px; }
}
@media(max-height:480px) and (min-width:601px) {
  .hub { padding:10px; }
  .hub .choices { width:min(460px,66%); grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; }
  .hub .choices button { min-height:72px; padding:7px 10px; }
  .hub .choices strong { font-size:17px; }
}


/* On entry only, extend the room beneath the title and frame controls too. */
.fortune-frame:has(#hub:not([hidden])) .hub { position:static; isolation:auto; background:transparent; }
.fortune-frame:has(#hub:not([hidden])) .hub .hero { z-index:0; }
.fortune-frame:has(#hub:not([hidden])) .fortune-heading,
.fortune-frame:has(#hub:not([hidden])) .hub .choices,
.fortune-frame:has(#hub:not([hidden])) .disclaimer,
.fortune-frame:has(#hub:not([hidden])) .storage-note { position:relative; z-index:1; }
.fortune-frame:has(#hub:not([hidden])) .fortune-heading { background:rgba(250,255,251,.9); border-radius:10px; padding:4px 8px; }
.fortune-frame:has(#hub:not([hidden])) .disclaimer,
.fortune-frame:has(#hub:not([hidden])) .storage-note { background:rgba(250,255,251,.9); border-radius:6px; }


/* The visible application is drawn in canvas; semantic controls remain accessible. */
#fortune-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; border-radius:inherit; touch-action:none; }
#fortune-state { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); opacity:0; pointer-events:none; }
#fortune-state * { pointer-events:none!important; }
#canvas-access { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
#canvas-access button { position:absolute; opacity:0; pointer-events:none; min-width:0; padding:0; }
#canvas-access button:focus-visible { opacity:.16; outline:3px solid #b67c20; }

/* Native birth inputs sit inside the canvas frame. */
#bazi-form {position:absolute;z-index:2;display:grid;align-content:start;grid-auto-rows:min-content;grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px;background:#fffefa;border:1px solid #cfdfd4;border-radius:12px;box-sizing:border-box;color:#244c3b;font:16px/1.5 system-ui,sans-serif;overflow:auto;}
#bazi-form[hidden]{display:none;}#bazi-form label{display:flex;flex-direction:column;gap:3px;min-width:0;}#bazi-form input{font:inherit;min-height:44px;min-width:0;width:100%;box-sizing:border-box;border:1px solid #8bab99;border-radius:6px;padding:6px;background:white;color:#244c3b;}#bazi-form .bazi-unknown{grid-column:1/-1;flex-direction:row;align-items:center;min-height:44px;}#bazi-form input[type=checkbox]{width:22px;height:22px;min-height:22px;}#bazi-error{grid-column:1/-1;color:#923b29;margin:0;}#bazi-error:empty{display:none;}

#bazi-form.bazi-landscape{padding:10px;gap:4px 12px;}#bazi-form.bazi-landscape #bazi-error{display:none;}

/* Native astrology inputs remain usable within the chart frame. */
#astrology-form{position:absolute;z-index:2;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:8px 12px;padding:12px;box-sizing:border-box;background:#fffefa;border:1px solid #cfdfd4;border-radius:12px;color:#244c3b;font:16px/1.4 system-ui,sans-serif;overflow:auto;overscroll-behavior:contain;}
#astrology-form[hidden]{display:none}#astrology-form label{display:flex;flex-direction:column;gap:3px;min-width:0}#astrology-form input,#astrology-form select{font:inherit;min-height:44px;min-width:0;width:100%;box-sizing:border-box;border:1px solid #8bab99;border-radius:6px;padding:6px;background:white;color:#244c3b}#astrology-form .astrology-unknown{flex-direction:row;align-items:center;min-height:44px}#astrology-form input[type=checkbox]{width:22px;height:22px;min-height:22px}#astrology-error{grid-column:1/-1;color:#923b29;margin:0}#astrology-error:empty{display:none}#astrology-form.astrology-landscape{padding:8px;gap:4px 12px}#astrology-form.astrology-landscape #astrology-error{display:none}

/* One person's native fields are visible at a time, including on low displays. */
#synastry-form{position:absolute;z-index:2;display:grid;align-content:start;gap:6px;padding:10px;box-sizing:border-box;background:#fffefa;border:1px solid #cfdfd4;border-radius:12px;color:#244c3b;font:16px/1.4 system-ui,sans-serif;overflow:auto;overscroll-behavior:contain}#synastry-form[hidden],#synastry-form .synastry-fields[hidden]{display:none}.synastry-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.synastry-tabs button{font:inherit;min-height:44px;padding:4px;border:1px solid #8bab99;border-radius:6px;background:white;color:#244c3b}.synastry-tabs button[aria-pressed=true]{background:#dfefe6;font-weight:700}.synastry-fields{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.synastry-fields label{display:flex;flex-direction:column;gap:3px;min-width:0}#synastry-form input{font:inherit;min-height:44px;min-width:0;width:100%;box-sizing:border-box;border:1px solid #8bab99;border-radius:6px;padding:6px;background:white;color:#244c3b}#synastry-form .synastry-unknown{grid-column:1/-1;flex-direction:row;align-items:center;min-height:44px}#synastry-form input[type=checkbox]{width:22px;height:22px;min-height:22px}#synastry-error{margin:0;color:#923b29}#synastry-error:empty{display:none}#synastry-form.synastry-landscape{padding:8px;gap:2px}#synastry-form.synastry-landscape .synastry-fields{row-gap:2px}#synastry-form.synastry-landscape #synastry-error{display:none}

/* Single native date entry for numerology. */
#numerology-form{position:absolute;z-index:2;display:grid;align-content:start;gap:8px;padding:12px;box-sizing:border-box;background:#fffefa;border:1px solid #cfdfd4;border-radius:12px;color:#244c3b;font:16px/1.4 system-ui,sans-serif;overflow:auto;overscroll-behavior:contain}#numerology-form[hidden]{display:none}#numerology-form label{display:flex;flex-direction:column;gap:3px;min-width:0}#numerology-form input{font:inherit;min-height:44px;min-width:0;width:100%;box-sizing:border-box;border:1px solid #8bab99;border-radius:6px;padding:6px;background:white;color:#244c3b}#numerology-error{margin:0;color:#923b29}#numerology-error:empty{display:none}

#numerology-form.numerology-landscape #numerology-error{display:none}

/* Per-page guide outside the interactive frame, before comments. */
.fortune-app-guide { margin:24px 0; padding:24px; border:1px solid #cfe5d9; border-radius:18px; background:#fff; line-height:1.8; overflow-wrap:anywhere; }
.fortune-app-guide h2 { margin:0 0 12px; font-size:clamp(21px,3vw,26px); color:#244c3b; }
.fortune-app-guide h3 { margin:20px 0 6px; font-size:18px; }
.fortune-app-guide p { margin:8px 0; }
.fortune-app-guide ol { margin:8px 0; padding-left:1.6em; }
.fortune-app-guide li + li { margin-top:6px; }
.fortune-app-guide details { margin-top:16px; padding:12px 16px; border:1px solid #dcebe1; border-radius:12px; background:#f8fcf9; }
.fortune-app-guide summary { cursor:pointer; min-height:44px; display:list-item; align-content:center; font-weight:600; }
.fortune-app-guide .fortune-guide-note { margin-top:16px; color:#536b60; font-size:14px; }
@media(max-width:600px) { .fortune-app-guide { padding:18px 16px; } }

.fortune-guide-return { margin:16px 0; }
.fortune-guide-return a { display:inline-flex; align-items:center; min-height:44px; color:#267358; }
.fortune-comment-intro { margin:24px 0 12px; line-height:1.8; color:#536b60; }

/* Independent app pages reuse the existing fortune shell and frame. */
.fortune-app-heading { display:flex; align-items:center; gap:16px; margin:16px 0 20px; }
.fortune-app-heading img { width:72px; height:72px; object-fit:contain; flex:none; }
.fortune-app-heading h1 { font-size:clamp(23px,3vw,30px); line-height:1.4; margin:0 0 6px; }
.fortune-app-heading p { margin:0; line-height:1.7; color:#536b60; }
.fortune-app-related { margin:24px 0; }
.fortune-app-related h2 { font-size:21px; }
.fortune-related-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.fortune-related-links a { display:flex; align-items:center; gap:12px; border:1px solid #cfe5d9; border-radius:12px; padding:12px; color:#267358; background:#fff; min-height:72px; }
.fortune-related-links img { object-fit:contain; }
@media(max-width:600px) { .fortune-app-heading { gap:10px; } .fortune-app-heading img { width:54px; height:54px; } .fortune-related-links { grid-template-columns:1fr; } }

/* Ziwei birth inputs reuse the existing native-input layout without changing other works. */
#ziwei-form {position:absolute;z-index:2;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:8px 12px;padding:12px;box-sizing:border-box;background:#fffefa;border:1px solid #cfdfd4;border-radius:12px;color:#244c3b;font:16px/1.4 system-ui,sans-serif;overflow:auto;overscroll-behavior:contain;}
#ziwei-form[hidden] {display:none;}
#ziwei-form label {display:flex;flex-direction:column;gap:3px;min-width:0;}
#ziwei-form input {font:inherit;min-height:44px;min-width:0;width:100%;box-sizing:border-box;border:1px solid #8bab99;border-radius:6px;padding:6px;background:white;color:#244c3b;}
#ziwei-form .ziwei-time-note,#ziwei-error {grid-column:1/-1;margin:0;}
#ziwei-error {color:#923b29;}
#ziwei-error:empty {display:none;}
#ziwei-form.ziwei-landscape {padding:8px;gap:4px 12px;}
#ziwei-form.ziwei-landscape .ziwei-time-note,#ziwei-form.ziwei-landscape #ziwei-error {display:none;}