/* Omikuji: a paper fortune drawn by chance. Logic is in js/omikuji.js.
   Uses the page tokens only, plus the wood tones the ema plaque already uses. The section has no background
   of its own, so the ambient sakura drift across it like the open sky. No motion here is gated on the OS
   reduced motion setting (owner decision). */
.omikuji {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start;
  /* gold leaf scattered on a great blessing slip */
  --kuji-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='200'%3E%3Cg fill='%23E3A857'%3E%3Cpath d='M22 18l9-3 4 7-8 5z' fill-opacity='.8'/%3E%3Cpath d='M168 30l6-4 5 5-6 3z' fill-opacity='.6'/%3E%3Cpath d='M96 74l12-2 2 8-11 3z' fill-opacity='.7'/%3E%3Cpath d='M210 96l5-6 6 4-4 6z' fill-opacity='.55'/%3E%3Cpath d='M40 138l8 1-2 7-7-2z' fill-opacity='.7'/%3E%3Cpath d='M138 156l10-4 3 6-9 4z' fill-opacity='.8'/%3E%3Cpath d='M74 186l5-3 3 5-5 2z' fill-opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
}
/* .btn sets display: inline-flex, which would otherwise beat the hidden attribute */
.omikuji [hidden] { display: none !important; }
.omikuji-intro { max-width: 56ch; color: rgba(243, 241, 236, .85); }
@media (max-width: 640px) {
  .omikuji { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- the stage: one scene ----------
   Two wooden posts frame it, the straw rope is strung between them overhead, and the box and the slip
   stand side by side beneath it, so drawing and tying read as one place. */
.kuji-stage {
  --kuji-inset: clamp(30px, 4.5vw, 46px); /* room between a post and what stands inside the frame */
  --kuji-post: 14px;
  position: relative; isolation: isolate;
  max-width: 820px;
  margin-top: clamp(32px, 5vw, 56px);
  padding: 0 var(--kuji-inset) 16px;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  grid-template-areas: "rack rack" "side paper";
  column-gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
/* turned wooden posts with a dark cap and the rope wound round them where it is tied */
.kuji-stage::before, .kuji-stage::after {
  content: ""; position: absolute; z-index: 0; top: 4px; bottom: 0; width: var(--kuji-post);
  border-radius: 3px 3px 1px 1px;
  background:
    linear-gradient(#3A2010 0 4px, transparent 4px),
    linear-gradient(transparent 10px, #8E6A35 10px, #C9A56A 13px, #B08A50 18px, #8E6A35 22px, transparent 22px),
    repeating-linear-gradient(90deg, rgba(42, 22, 6, 0) 0 2px, rgba(42, 22, 6, .14) 2px 3px, rgba(42, 22, 6, 0) 3px 5px),
    linear-gradient(90deg, #5A3418, #A8723E 28%, #D2A06A 52%, #A8723E 76%, #5A3418);
  box-shadow: 0 10px 12px -6px rgba(3, 5, 26, .7);
}
.kuji-stage::before { left: 0; }
.kuji-stage::after { right: 0; }

.kuji-side { grid-area: side; display: grid; justify-items: center; gap: 20px; width: 100%; }
.kuji-actions { display: grid; gap: 10px; width: 100%; }
/* both labels stay on one line: "Tie it to the rope" needs about 190px at this padding */
.kuji-actions .btn { width: 100%; padding-inline: 16px; white-space: nowrap; }
/* the rope and the paper are placed straight onto the stage grid */
.kuji-result { display: contents; }

/* ---------- the hexagonal box ---------- */
.kuji-box {
  display: grid; justify-items: center;
  cursor: pointer; user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.kuji-box svg {
  width: min(180px, 40vw); height: auto; overflow: visible;
  transition: translate .2s var(--ease-out), scale .12s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .kuji-box:hover svg { translate: 0 -3px; }
}
.kuji-box:active svg { scale: .97; transition-duration: .1s; }
.kuji-body { transform-box: view-box; transform-origin: 100px 300px; }
/* the numbered stick slides up out of the mouth once the shaking stops */
.kuji-stick { transition: translate .18s var(--ease-out); }
.kuji-box.is-out .kuji-stick { translate: 0 -78px; transition-duration: .42s; }
.kuji-label { font: 30px var(--brush); fill: var(--shu-ink); text-anchor: middle; dominant-baseline: middle; }

/* ---------- the rope, from post centre to post centre ---------- */
.kuji-rack {
  grid-area: rack; position: relative; z-index: 1;
  height: 96px;
  margin: 0 calc(var(--kuji-post) / 2 - var(--kuji-inset));
}
.kuji-rack > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kuji-rope-base { fill: none; stroke: #6E5126; stroke-width: 11; stroke-linecap: round; }
.kuji-rope { fill: none; stroke: #C9A56A; stroke-width: 8; stroke-linecap: round; }
.kuji-rope-twist { fill: none; stroke: #8E6A35; stroke-width: 8; stroke-dasharray: 2.5 6; opacity: .75; }
.kuji-rope-shine { fill: none; stroke: #F0DCAE; stroke-width: 1.6; stroke-dasharray: 4 4.5; opacity: .55; }
.kuji-knot {
  position: absolute; width: 22px; translate: -50% 0; transform-origin: 50% 0;
  filter: drop-shadow(0 3px 2px rgba(3, 5, 26, .45));
}
.kuji-knot svg { display: block; width: 100%; height: auto; }

/* ---------- the paper: the hint until a slip is drawn, then the slip in the same place ---------- */
.kuji-paper { grid-area: paper; display: grid; width: min(100%, 420px); margin-top: 30px; }
.kuji-paper > * { grid-area: 1 / 1; }
.kuji-hint { max-width: 40ch; font-size: var(--t-16); color: rgba(243, 241, 236, .72); }
/* before the first draw: two folded slips wait where yours will open */
.kuji-rest { display: block; width: min(150px, 46%); height: auto; margin: 0 0 18px 8px; overflow: visible; }
.kuji-unfold { width: 100%; }
.kuji-slip {
  background-color: var(--gofun); background-image: var(--washi-grain);
  color: var(--ink);
  padding: 26px 28px 30px;
  clip-path: polygon(0 1.2%, 3% 0, 97% 1%, 100% 0, 100% 98.8%, 96% 100%, 4% 99%, 0 100%);
}
.kuji-slip[data-rank="daikichi"] { background-image: var(--kuji-gold), var(--washi-grain); }
.kuji-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.kuji-rank { font: 400 clamp(3.5rem, 7vw, 4.75rem)/1 var(--brush); color: var(--shu-ink); letter-spacing: .04em; }
.kuji-seal { font-size: 15px; padding: 9px 7px; letter-spacing: .06em; transform: rotate(4deg); }
.kuji-name { margin-top: 10px; font: 500 var(--t-18)/1.35 var(--body); }
.kuji-name b { font-weight: 700; color: var(--shu-ink); }
.kuji-lines {
  list-style: none; margin: 20px 0 0; padding: 18px 0 0;
  border-top: 2px solid var(--shu);
  display: grid; gap: 12px;
}
.kuji-lines li {
  display: grid; grid-template-columns: 6.5em minmax(0, 1fr); column-gap: 12px;
  font-size: var(--t-16); line-height: 1.5; color: rgba(21, 24, 46, .86);
}
.kuji-lines b { font: 700 var(--t-14)/1.6 var(--body); color: var(--shu-ink); }

/* the tie button keeps its place in the column while a new slip is being drawn */
#kuji-tie.is-away { visibility: hidden; }

/* ---------- narrower screens: rope, then box, then slip, still inside the posts ---------- */
@media (max-width: 900px) {
  .kuji-stage {
    max-width: 560px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rack" "side" "paper";
  }
  .kuji-side { width: min(240px, 100%); justify-self: center; }
  .kuji-paper { justify-self: center; margin-top: 24px; }
}
@media (max-width: 480px) {
  .kuji-stage { --kuji-inset: 22px; --kuji-post: 11px; }
  .kuji-slip { padding: 22px 20px 24px; }
  /* labels sit above their line so the fortune keeps a readable measure */
  .kuji-lines li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}