/* waites-oracle.css: Waite's Oracle (waites-oracle.php). The page uses the shared reading layout (pl- classes from
   reading.css and card-pull.css, so the forest READING PAGES block applies); wo- rules here are the board, the
   replay of the deal, the form and the panel's card lists. Tokens only. */

/* ---------- the stage ---------- */
.wo-stage{ min-height:0; }
.wo-fit{ position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }

/* before the deal: the pack, face down */
.wo-deck{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; margin:auto; }
.wo-deck[hidden]{ display:none; }
.wo-deckstack{ position:relative; width:120px; height:180px; }
.wo-deckline{ margin:0; font-style:italic; color:var(--frost); opacity:.7; font-size:calc(0.84375rem * var(--text-scale)); }
.wo-deckstack span{ position:absolute; inset:0; border-radius:9px; background:var(--midnight-2) center / cover no-repeat;
  box-shadow:0 2px 0 rgba(var(--shadow-rgb),.35), 0 10px 24px rgba(var(--shadow-rgb),.5); border:1px solid rgba(var(--gold-rgb),.25); }
.wo-deckstack span:nth-child(2){ transform:translate(3px,-3px); }
.wo-deckstack span:nth-child(3){ transform:translate(6px,-6px); }

/* the board: all the cards, as dealt (grid columns are set per card by waites-oracle.js) */
.wo-board{ --cw:80px; --gap:calc(var(--cw) * .12); display:grid; gap:var(--gap); align-items:center; margin:auto; }
.wo-board[hidden]{ display:none; }
.wo-board.is-oracle{ grid-template-columns:repeat(7, var(--cw)) calc(var(--cw) * 1.3); }
.wo-board.is-continuation{ grid-template-columns:repeat(11, var(--cw)); }
.wo-board .wo-card.in-part .wo-cardin{ box-shadow:0 0 0 2px var(--gold), 0 0 18px rgba(var(--gold-rgb),.4); }
.wo-board:has(.in-part) .wo-card:not(.in-part) .wo-cardin{ opacity:.35; }
.wo-caption{ margin:8px auto 0; max-width:560px; text-align:center; font-style:italic; color:var(--frost); opacity:.8; font-size:calc(0.8125rem * var(--text-scale)); line-height:1.5; }
.wo-caption[hidden]{ display:none; }
.wo-card{ position:relative; width:var(--cw); height:calc(var(--cw) * 1.5); padding:0; border:0; background:none; cursor:pointer;
  border-radius:calc(var(--cw) * .07); perspective:600px; }
.wo-card.querent{ justify-self:end; }
.wo-cardin{ position:absolute; inset:0; display:block; border-radius:inherit; overflow:hidden; background:var(--midnight-2);
  box-shadow:0 1px 0 rgba(var(--gold-rgb),.18), 0 6px 14px rgba(var(--shadow-rgb),.45); transition:transform .45s ease, box-shadow .25s ease, opacity .3s ease; }
.wo-cardin img{ width:100%; height:100%; object-fit:cover; display:block; }
.wo-card.rev .wo-cardin img, .wo-card.rev .wo-textface{ transform:rotate(180deg); }
.wo-card:not(.up) .wo-cardin{ opacity:0; transform:translateY(-8px); }
.wo-card:hover .wo-cardin{ box-shadow:0 0 0 1px rgba(var(--gold-rgb),.5), 0 10px 22px rgba(var(--shadow-rgb),.55); }
.wo-card.in-part .wo-cardin{ box-shadow:0 0 0 1px rgba(var(--gold-rgb),.7), 0 8px 18px rgba(var(--shadow-rgb),.5); }
.wo-card.active .wo-cardin{ box-shadow:0 0 0 2px var(--gold), 0 0 22px rgba(var(--gold-rgb),.45); }
.wo-card:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }
.wo-textface{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:4px; box-sizing:border-box;
  text-align:center; font-family:var(--font-heading); font-size:calc(var(--cw) * .13); line-height:1.2; color:var(--bone);
  background:radial-gradient(ellipse at 50% 35%, var(--cardface-hi) 0%, var(--cardface-lo) 70%); border:1px solid rgba(var(--gold-rgb),.35); border-radius:inherit; }

/* ---------- one part zoomed in: its cards large, numbered in reading order ---------- */
.wo-focus{ --cw:120px; --cols:7; display:flex; flex-direction:column; align-items:center; gap:18px; margin:auto; padding:8px; max-width:100%; }
.wo-focus[hidden]{ display:none; }
.wo-fhead{ text-align:center; max-width:640px; }
.wo-fkick{ font-family:var(--font-heading); font-size:calc(0.6875rem * var(--text-scale)); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); opacity:.85; }
.wo-ftitle{ margin:4px 0 6px; font-family:var(--font-display); font-size:calc(1.625rem * var(--text-scale)); line-height:1.25; color:var(--bone); }
.wo-fdesc{ margin:0; font-style:italic; font-size:calc(0.9375rem * var(--text-scale)); line-height:1.55; color:var(--frost); }
.wo-fgrid{ display:grid; grid-template-columns:repeat(var(--cols), var(--cw)); gap:calc(var(--cw) * .14); justify-content:center; }
.wo-fgrid.rtl{ direction:rtl; }   /* Waite's first reading: card 1 at the right, so the row reads 7 6 5 4 3 2 1 */
.wo-fcard{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; border:0; background:none; cursor:pointer; direction:ltr; }
.wo-fface{ position:relative; display:block; width:var(--cw); height:calc(var(--cw) * 1.5); border-radius:calc(var(--cw) * .06);
  transform-origin:0 0; transition:transform .65s cubic-bezier(.2,.75,.25,1); }
.wo-fface .wo-cardin{ box-shadow:0 2px 0 rgba(var(--gold-rgb),.18), 0 12px 26px rgba(var(--shadow-rgb),.55); }
.wo-fcard.rev .wo-cardin img, .wo-fcard.rev .wo-textface{ transform:rotate(180deg); }
.wo-fcard.trump .wo-cardin{ box-shadow:0 0 0 1px rgba(var(--gold-rgb),.6), 0 12px 26px rgba(var(--shadow-rgb),.55); }
.wo-fcard.active .wo-cardin{ box-shadow:0 0 0 2px var(--gold), 0 0 26px rgba(var(--gold-rgb),.5); }
.wo-fcard:hover .wo-cardin{ box-shadow:0 0 0 1px rgba(var(--gold-rgb),.6), 0 14px 28px rgba(var(--shadow-rgb),.6); }
.wo-fcard:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:4px; }
.wo-fnum{ height:20px; font-family:var(--font-heading); font-size:calc(0.75rem * var(--text-scale)); color:var(--gold); opacity:.8; transition:opacity .3s ease; }
.wo-focus.zooming .wo-fnum{ opacity:0; }

/* ---------- the end: the whole story in place of the cards ---------- */
/* the box is the reading panel's size (--story-h/-w from sizeStory()) and scrolls inside; text sized as the About page */
.wo-story{ align-self:stretch; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-height:0; animation:wo-fadein .7s ease both; }
.wo-nextread{ flex:none; text-align:center; }
.wo-nextread .draw-btn{ display:inline-block; min-width:280px; text-decoration:none; }
.wo-story[hidden]{ display:none; }
.wo-story-in{ box-sizing:border-box; width:100%; max-width:720px; height:var(--story-h, auto); max-height:100%; overflow-y:auto;
  padding:26px 40px 30px; background:var(--panel-bg); border:var(--panel-border); border-radius:var(--panel-radius); box-shadow:var(--popup-shadow); }
.wo-story-kick{ margin:0 0 4px; font-family:var(--font-heading); font-size:calc(0.6875rem * var(--text-scale)); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); opacity:.8; text-align:center; }
.wo-story-h{ margin:0 0 18px; font-family:var(--font-heading); font-weight:400; font-size:calc(1.0625rem * var(--text-scale)); letter-spacing:.04em; color:var(--bone); text-align:center; }
.wo-story-in > p:not(.wo-story-kick){ margin:0 0 14px; font-size:calc(1rem * var(--text-scale)); line-height:1.85; color:var(--frost); }
@keyframes wo-fadein{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---------- the cut: the face-down pack as one stack (layer 0 = the top card; waites-oracle.js places each layer) ---------- */
.wo-ribbon{ --rcw:130px; --t:.6px; position:relative; margin:auto; padding:60px 0 20px; }
.wo-ribbon[hidden]{ display:none; }
.wo-cutstack{ position:relative; width:var(--rcw); height:calc(var(--rcw) * 1.5); margin-right:calc(var(--rcw) * 1.3); left:calc(var(--rcw) * .65); }
.wo-layer{ position:absolute; inset:0; border-radius:7px; background-color:var(--midnight-2); background-size:cover; background-position:center;
  border:1px solid rgba(var(--gold-rgb),.28); box-shadow:0 1px 2px rgba(var(--shadow-rgb),.35); transition:transform .55s cubic-bezier(.3,.7,.25,1); }
.wo-ribbon.shuffling .wo-cutstack{ animation:wo-jostle .3s ease-in-out 3 alternate; }
@keyframes wo-jostle{ from{ transform:translateX(-3px) rotate(-1deg); } to{ transform:translateX(3px) rotate(1deg); } }
.wo-range{ width:100%; margin:6px 0 4px; accent-color:var(--gold); min-height:44px; }
.wo-label output{ color:var(--gold); font-weight:600; }

/* ---------- the replay of the deal ---------- */
.wo-board.dealing{ visibility:hidden; }
.wo-replay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; z-index:5; text-align:center; }
.wo-replay[hidden]{ display:none; }
.wo-replay-art{ display:flex; gap:14px; align-items:flex-end; justify-content:center; min-height:130px; }
.wo-stack{ position:relative; width:56px; height:84px; border-radius:6px; background-image:var(--back); background-size:cover; background-position:center;
  box-shadow:2px -2px 0 rgba(var(--shadow-rgb),.5), 4px -4px 0 rgba(var(--gold-rgb),.25), 0 8px 18px rgba(var(--shadow-rgb),.5);
  animation:wo-drop .35s ease both; animation-delay:calc(var(--k, 0) * 110ms); }
.wo-stack.big{ width:96px; height:144px; animation:wo-shuffle .55s ease-in-out 2 alternate; }
.wo-replay-text{ max-width:440px; margin:18px 0 0; font-style:italic; color:var(--bone); font-size:calc(0.9375rem * var(--text-scale)); line-height:1.6; }
@keyframes wo-drop{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:none; } }
@keyframes wo-shuffle{ from{ transform:rotate(-4deg) translateX(-6px); } to{ transform:rotate(4deg) translateX(6px); } }

/* ---------- the panel ---------- */
.wo-intro{ flex:1; min-height:0; overflow-y:auto; padding-right:8px; margin-right:-8px; }
.wo-box{ margin:18px 0 0; }
.wo-h{ font-family:var(--font-heading); font-weight:400; font-size:calc(0.75rem * var(--text-scale)); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 8px; }
.wo-box p{ font-size:calc(0.875rem * var(--text-scale)); line-height:1.65; color:var(--frost); opacity:.9; margin:0 0 8px; }

.wo-form{ margin:20px 0 0; display:flex; flex-direction:column; }
.wo-field{ border:0; margin:0 0 6px; padding:0; }
.wo-label{ font-family:var(--font-heading); font-size:calc(0.75rem * var(--text-scale)); letter-spacing:.12em; text-transform:uppercase; color:var(--bone); margin:14px 0 4px; padding:0; }
.wo-opt{ text-transform:none; letter-spacing:0; font-family:var(--font-body); font-style:italic; color:var(--frost); opacity:.6; }
.wo-note{ font-size:calc(0.78125rem * var(--text-scale)); font-style:italic; color:var(--frost); opacity:.65; line-height:1.5; margin:0 0 8px; }
.wo-choice{ display:flex; flex-wrap:wrap; gap:8px; }
.wo-choice label{ display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1px solid rgba(var(--gold-rgb),.3);
  border-radius:var(--btn-radius); cursor:pointer; color:var(--bone); font-size:calc(0.875rem * var(--text-scale)); }
.wo-choice label span{ color:var(--frost); opacity:.6; font-style:italic; }
.wo-choice label:has(input:checked){ border-color:var(--gold); background:rgba(var(--gold-rgb),.12); }
.wo-choice input{ accent-color:var(--gold); }
.wo-input{ width:100%; box-sizing:border-box; padding:10px 12px; background:var(--field-bg); border:1px solid var(--field-border);
  border-radius:var(--field-radius); color:var(--field-text); font-family:var(--font-body); font-size:calc(0.875rem * var(--text-scale)); }
textarea.wo-input{ border-radius:var(--field-radius-lg); resize:vertical; }
.wo-input:focus{ outline:none; border-color:var(--field-focus); box-shadow:0 0 0 3px var(--field-focus-soft); }
.wo-form .draw-btn{ margin-top:20px; }
.wo-form-msg{ min-height:1.2em; margin:8px 0 0; color:var(--red-soft); font-size:calc(0.8125rem * var(--text-scale)); }

.wo-lead{ font-size:calc(0.875rem * var(--text-scale)); line-height:1.65; color:var(--frost); opacity:.9; margin:10px 0; }
.wo-quick{ display:flex; flex-direction:column; border-top:1px solid rgba(var(--frost-rgb),.12); margin:10px 0 0; }
.wo-qline{ display:flex; flex-direction:column; gap:3px; text-align:left; background:none; border:0; border-bottom:1px solid rgba(var(--frost-rgb),.12);
  padding:10px 4px; cursor:pointer; color:var(--frost); font-family:var(--font-body); font-size:calc(0.84375rem * var(--text-scale)); line-height:1.55; }
.wo-qline:hover{ background:rgba(var(--gold-rgb),.06); }
.wo-qline b{ font-family:var(--font-heading); font-weight:400; font-size:calc(0.6875rem * var(--text-scale)); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.wo-qline i{ opacity:.6; }
.wo-qline .q-trump{ color:var(--gold-light); }
.wo-further{ padding:14px 16px; border:1px solid rgba(var(--gold-rgb),.25); border-radius:var(--card-radius-sm); }
.wo-further .pl-nav{ display:inline-block; text-decoration:none; }

.wo-list{ display:flex; flex-direction:column; gap:14px; margin:14px 0 0; }
.wo-item{ display:grid; grid-template-columns:54px 1fr; gap:14px; padding:10px; border-radius:var(--card-radius-sm); border:1px solid transparent; }
.wo-item.focus{ border-color:rgba(var(--gold-rgb),.5); background:rgba(var(--gold-rgb),.06); }
.wo-item.trump .wo-iname{ color:var(--gold-light); }
.wo-thumb{ --cw:54px; position:relative; width:54px; height:81px; padding:0; border:0; border-radius:5px; overflow:hidden; cursor:pointer; background:var(--midnight-2); }
.wo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.wo-thumb.rev img, .wo-thumb.rev .wo-textface{ transform:rotate(180deg); }
.wo-iname{ font-family:var(--font-heading); font-size:calc(0.9375rem * var(--text-scale)); color:var(--bone); line-height:1.3; }
.wo-iplace{ display:inline-block; min-width:1.6em; margin-right:6px; color:var(--gold); opacity:.8; font-size:.85em; }
.wo-tag{ display:inline-block; margin-left:6px; padding:1px 6px; border:1px solid rgba(var(--gold-rgb),.4); border-radius:var(--btn-radius-sm);
  font-family:var(--font-body); font-size:calc(0.625rem * var(--text-scale)); letter-spacing:.08em; text-transform:uppercase; color:var(--gold); vertical-align:2px; }
.wo-tag.rev{ color:var(--red-soft); border-color:rgba(var(--red-soft-rgb),.4); }
.wo-ifig{ font-size:calc(0.78125rem * var(--text-scale)); font-style:italic; color:var(--frost); opacity:.6; margin-top:2px; }
.wo-kw{ margin:4px 0 0; font-size:calc(0.78125rem * var(--text-scale)); font-style:italic; color:var(--gold); opacity:.85; }
.wo-mean{ font-size:calc(0.875rem * var(--text-scale)); line-height:1.65; color:var(--frost); margin:6px 0 0; }
.wo-also{ font-size:calc(0.8125rem * var(--text-scale)); line-height:1.6; color:var(--frost); opacity:.75; margin:6px 0 0; }
.wo-also span{ font-style:italic; color:var(--gold); opacity:.85; }
.wo-rep{ padding:10px 0; border-bottom:1px solid rgba(var(--frost-rgb),.12); color:var(--bone); font-size:calc(0.875rem * var(--text-scale)); }
.wo-rep span{ color:var(--frost); opacity:.65; font-size:.9em; }
.wo-rep p{ margin:4px 0 0; color:var(--frost); line-height:1.6; }
.wo-linemeaning{ color:var(--bone); }
.wo-how{ font-size:calc(0.875rem * var(--text-scale)); line-height:1.65; color:var(--frost); }
.wo-how p, .wo-how ol{ margin:0 0 10px; }
.wo-how b{ color:var(--bone); font-weight:600; }
.wo-how ol{ padding-left:20px; }
.wo-how li{ margin-bottom:6px; }
.wo-asktabs{ margin-top:4px; }
.wo-page .v-pos.wo-linetitle{ text-transform:none; letter-spacing:0; font-weight:400; font-family:var(--font-display); font-size:calc(1.375rem * var(--text-scale)); line-height:1.3; color:var(--bone); margin:0 0 8px; }
.wo-kick{ margin:6px 0 2px; font-family:var(--font-heading); font-size:calc(0.6875rem * var(--text-scale)); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); opacity:.75; }
.wo-linetext p{ font-size:calc(0.9375rem * var(--text-scale)); line-height:1.75; }
.wo-cardsh{ margin-top:20px; }
.wo-page .pl-chip.wo-num{ min-width:36px; justify-content:center; }
.wo-source{ margin:18px 0 0; font-size:calc(0.75rem * var(--text-scale)); font-style:italic; color:var(--frost); opacity:.55; }
.wo-page .pl-chip.ov{ height:auto; min-height:30px; }

/* ---------- narrower screens: the board above the panel, sized by width ---------- */
@media (max-width:1000px){
  .wo-fit{ flex:none; padding:8px 0 10px; overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; }
  .wo-fit:has(.wo-deck:not([hidden])), .wo-fit:has(.wo-replay:not([hidden])){ justify-content:center; }
  .wo-board{ margin:0 auto; }
  .wo-deck{ margin:10px auto 20px; }
  .wo-replay{ position:relative; inset:auto; min-height:300px; }
  .wo-replay-art{ flex-wrap:wrap; gap:26px 10px; padding-top:20px; }
  .wo-stack:not(.big){ width:44px; height:66px; }
  .wo-fit:has(.wo-ribbon:not([hidden])){ justify-content:center; overflow-x:visible; }
  .wo-intro{ overflow:visible; margin-right:0; padding-right:0; }
  .wo-fit:has(.wo-story:not([hidden])){ justify-content:center; overflow-x:visible; }
  .wo-fit:has(.wo-focus:not([hidden])){ justify-content:flex-start; }
  .wo-focus{ margin:0 auto; }
  .wo-fhead{ padding:0 8px; }
  .wo-ftitle{ font-size:calc(1.375rem * var(--text-scale)); }
  .wo-story-in{ padding:18px 16px 20px; max-height:none; }
}
@media (prefers-reduced-motion: reduce){
  .wo-cardin, .wo-stack, .wo-stack.big, .wo-layer, .wo-cutstack, .wo-fface, .wo-story{ transition:none; animation:none; }
}