/* tangle.css: the Tangle of Wyrd (tangle-of-wyrd.php, tangle.js).
   The page reuses the card pull layout and reading panel (pl- classes in reading.css and
   card-pull.css, so the forest theme's reading-page block covers it); this file adds the
   scattered table (tw-), the row of six places, and the panel's intro. */

/* ---------- the table ---------- */
/* On a desktop the table is the whole browser window: a fixed layer (#twField) under the stage and the reading panel, so the cards are
   scattered everywhere, behind the panel too (tangle.js moves .tw-table in here; on a phone it stays in .tw-tablewrap). The stage and
   the panel sit above it; the stage lets clicks through to the cards, except on its row of places and its hint. */
.tw-field{ display:none; }
@media (min-width:1001px){
  .tw-field{ display:block; position:fixed; inset:0; z-index:0; pointer-events:none; }
  .tw-field .tw-table{ pointer-events:auto; }
  .tw-field.reading{ display:none; }
  .tw-page .tw-stage{ position:relative; z-index:1; pointer-events:none; }
  .tw-page .tw-rail, .tw-page .tw-hint{ pointer-events:auto; }
  .tw-page .pl-panel{ position:relative; z-index:2; }
}
.tw-tablewrap{ position:relative; flex:1; min-height:0; }
/* There is no box behind the cards: the table is invisible and they are thrown straight onto the page's own picture.
   The stage only gives the table, the row of chosen cards and the hint their room (the same top and bottom margin as the
   reading panel, so both end on one line). Once the cards are laid out for reading they sit free in it. */
.tw-stage:not(.reading){ box-sizing:border-box; padding:12px 12px 6px; }
.tw-table{ position:absolute; inset:0; overflow:hidden; border:0; background:none; box-shadow:none;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; transition:opacity .45s ease; }
.tw-table.pannable{ touch-action:none; cursor:grab; }
.tw-table.pannable:active{ cursor:grabbing; }
.tw-inner{ position:absolute; left:0; top:0; will-change:transform; }

.tw-pick{ position:absolute; left:0; top:0;
  transition:transform .85s cubic-bezier(.16,.84,.3,1), opacity .6s ease; }
.tw-table.settled .tw-pick{ transition:opacity .6s ease; }
.tw-face{ display:block; width:100%; height:100%; border-radius:6px; box-sizing:border-box;
  background:var(--tw-back, url('/card_back.png?v=2')) center / cover no-repeat, var(--midnight-2);
  box-shadow:0 1px 0 rgba(var(--gold-rgb),.18), 0 3px 9px rgba(var(--shadow-rgb),.6);
  transition:transform .16s ease, box-shadow .16s ease, opacity .25s ease; }
.tw-table.scattered .tw-pick{ cursor:pointer; }

/* stirring (Shift held, or Stir switched on): cards follow the hand at once, and nothing lifts or is taken */
.tw-table.stirmode{ touch-action:none; cursor:move; }
.tw-table.stirmode .tw-pick{ transition:opacity .6s ease; cursor:move; }

/* the card under the pointer (mouse) or the finger (touch) lifts to the top */
@media (hover:hover){
  .tw-table.scattered:not(.settle):not(.stirmode) .tw-pick:not(.taken):hover{ z-index:9999 !important; }
  .tw-table.scattered:not(.settle):not(.stirmode) .tw-pick:not(.taken):hover .tw-face{ transform:scale(1.12) translateY(-5px);
    box-shadow:0 0 0 1px var(--gold), 0 0 20px rgba(var(--gold-rgb),.45), 0 10px 20px rgba(var(--shadow-rgb),.6); }
}
.tw-pick.lift{ z-index:9999 !important; }
.tw-pick.lift .tw-face{ transform:scale(1.2) translateY(-6px);
  box-shadow:0 0 0 2px var(--gold), 0 0 26px rgba(var(--gold-rgb),.6), 0 12px 22px rgba(var(--shadow-rgb),.65); }

/* a card that has been taken leaves a faint outline where it lay */
.tw-pick.taken{ pointer-events:none; }
.tw-pick.taken .tw-face{ opacity:0; }
.tw-pick.taken::after{ content:''; position:absolute; inset:0; border:1px dashed rgba(var(--gold-rgb),.22); border-radius:6px; }
.tw-pick.returned .tw-face{ animation:tw-returned .9s ease; }
@keyframes tw-returned{ 0%,100%{ box-shadow:0 3px 9px rgba(var(--shadow-rgb),.6); }
  35%{ box-shadow:0 0 0 2px var(--gold), 0 0 28px rgba(var(--gold-rgb),.7); } }

/* five are chosen: the rest fall back, and the tangle keeps one */
.tw-table.settle .tw-pick:not(.taken):not(.kept){ opacity:.25; pointer-events:none; }
.tw-pick.kept{ z-index:9999 !important; }
.tw-pick.kept .tw-face{ transform:scale(1.35); animation:tw-kept 1s ease-in-out infinite; }
@keyframes tw-kept{
  0%,100%{ box-shadow:0 0 0 2px rgba(var(--gold-rgb),.7), 0 0 22px rgba(var(--gold-rgb),.35), 0 12px 24px rgba(var(--shadow-rgb),.6); }
  50%    { box-shadow:0 0 0 2px var(--gold), 0 0 46px rgba(var(--gold-rgb),.8), 0 12px 24px rgba(var(--shadow-rgb),.6); }
}

/* before the scatter */
.tw-veil{ position:absolute; left:0; right:0; bottom:7%; padding:0 16px; text-align:center; pointer-events:none; transition:opacity .5s ease; }
.tw-veil.gone{ opacity:0; }
.tw-veil-rune{ font-family:var(--font-rune); font-size:calc(1.875rem * var(--text-scale)); line-height:1; color:var(--gold); opacity:.65; margin-bottom:8px; }
.tw-veil p{ margin:0; font-style:italic; line-height:1.6; font-size:calc(0.875rem * var(--text-scale)); color:var(--frost); opacity:.8; }

/* "Lift to take this card" above a pressed card on a touch screen */
.tw-tip{ position:absolute; z-index:10000; transform:translateX(-50%); pointer-events:none; white-space:nowrap;
  padding:5px 12px; border-radius:999px; background:rgba(var(--midnight-rgb),.92); border:1px solid rgba(var(--gold-rgb),.55);
  font-family:var(--font-heading); font-size:calc(0.65625rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.tw-tip[hidden]{ display:none; }

/* a card travelling from the table to its place in the row */
.tw-fly{ position:absolute; z-index:60; pointer-events:none;
  transition-property:left, top, width, height, transform; transition-timing-function:cubic-bezier(.22,.8,.25,1); }

/* ---------- the row of six places (the reading's cards, once chosen) ---------- */
.tw-rail{ --cw:56px; --ch:84px; flex:none; display:flex; justify-content:center; align-items:flex-end;
  gap:var(--tw-gap-x, 8px); padding:10px 0 4px; }
.tw-slot{ position:relative; }
.tw-slotbox{ position:relative; box-sizing:border-box; width:var(--cw); height:var(--ch); display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(var(--gold-rgb),.3); border-radius:8px; }
.tw-ph{ font-family:var(--font-heading); font-size:calc(var(--cw) * .34); color:rgba(var(--gold-rgb),.35); }
.tw-slot.filled .tw-slotbox{ border-color:transparent; }
.tw-slot.filled .tw-ph{ display:none; }
.tw-slot.next .tw-slotbox{ border-color:var(--gold); border-style:solid; animation:tw-next 1.6s ease-in-out infinite; }
@keyframes tw-next{ 0%,100%{ box-shadow:0 0 0 1px rgba(var(--gold-rgb),.25), 0 0 8px rgba(var(--gold-rgb),.2); }
                    50%{ box-shadow:0 0 0 1px rgba(var(--gold-rgb),.5), 0 0 18px rgba(var(--gold-rgb),.5); } }
.tw-unchosen{ margin-left:14px; }
.tw-unchosen .tw-slotbox{ border-style:dotted; }
.tw-slot .pl-card{ position:absolute; left:0; top:0; }
.tw-rail .pl-textface{ font-size:calc(var(--cw) / 10); }
.tw-poslabel{ display:none; }

.tw-slot.hoverable:hover{ z-index:30; }
.tw-slot.hoverable:hover .pl-card{ transform:scale(1.08) translateY(-8px); transition:transform .22s cubic-bezier(.2,.8,.3,1); }
.tw-slot.active{ z-index:26; }
.tw-slot.active .pl-tilt{ box-shadow:0 0 0 2px var(--gold), 0 0 28px rgba(var(--gold-rgb),.45), 0 12px 26px rgba(var(--shadow-rgb),.55); }
.tw-slot.active.face-down .pl-tilt{ animation:pl-glow 1.8s ease-in-out infinite; }
.tw-unchosen.filled .pl-tilt{ box-shadow:0 0 0 1px rgba(var(--gold-rgb),.5), 0 12px 26px rgba(var(--shadow-rgb),.55); }

/* reading: the table is gone and the six cards fill the stage */
.tw-stage.reading .tw-tablewrap{ display:none; }
.tw-stage.reading .tw-rail{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(5, var(--cw)); justify-content:center; align-content:center;
  align-items:end; column-gap:var(--tw-gap-x, 26px); row-gap:var(--tw-gap-y, 22px); padding:0; }
.tw-stage.reading .tw-unchosen{ grid-column:1 / -1; justify-self:center; margin-left:0; }
.tw-stage.reading .tw-poslabel{ display:block; text-align:center; max-width:calc(var(--cw) + 24px); margin:0 auto 6px; line-height:1.25;
  font-family:var(--font-body); font-size:calc(0.65625rem * var(--text-scale)); letter-spacing:.06em; text-transform:uppercase; color:var(--gold); opacity:.6; transition:opacity .3s ease; }
.tw-stage.reading .tw-slot.active .tw-poslabel{ opacity:1; }

/* ---------- the reading panel: intro, choosing ---------- */
.tw-intro{ flex:1; min-height:0; overflow-y:auto; padding-right:8px; margin-right:-8px; }
.tw-intro #questionFormSection{ margin-top:6px; }
#twScatterBtn{ margin-bottom:20px; }
.tw-box{ margin:20px 0 0; padding-top:16px; border-top:1px solid rgba(var(--frost-rgb),.12); }
.tw-box:first-child{ margin-top:18px; padding-top:0; border-top:0; }
.tw-h{ font-family:var(--font-heading); font-size:calc(0.6875rem * var(--text-scale)); font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 10px; }
.tw-box p, .tw-box li, .tw-box dd{ font-size:calc(0.84375rem * var(--text-scale)); line-height:1.65; color:var(--frost); opacity:.92; }
.tw-box p{ margin:0 0 10px; }
.tw-box b{ color:var(--bone); font-weight:600; }
.tw-box em{ color:var(--bone); }
.tw-steps{ margin:0; padding-left:22px; }
.tw-steps li{ margin-bottom:7px; padding-left:2px; }
.tw-steps li::marker{ font-family:var(--font-heading); color:var(--gold); }
.tw-places{ margin:0; }
.tw-places dt{ display:flex; align-items:center; gap:10px; margin-top:12px; font-family:var(--font-heading); font-size:calc(0.875rem * var(--text-scale)); color:var(--bone); }
.tw-places dt:first-child{ margin-top:0; }
.tw-places dt span{ flex:none; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(var(--gold-rgb),.5); color:var(--gold); font-size:calc(0.6875rem * var(--text-scale)); }
.tw-places dd{ margin:3px 0 0 32px; }

.tw-pickinfo{ margin:22px 0 14px; padding:18px 18px 16px; border:1px solid rgba(var(--gold-rgb),.25); border-radius:10px;
  background:radial-gradient(ellipse at 50% 0%, rgba(var(--gold-rgb),.09), transparent 70%); }
.tw-pick-count{ font-family:var(--font-heading); font-size:calc(0.6875rem * var(--text-scale)); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.tw-pick-pos{ font-family:var(--font-heading); font-size:calc(1.375rem * var(--text-scale)); line-height:1.25; color:var(--bone); margin-top:6px; }
.tw-pick-sub{ font-style:italic; font-size:calc(0.875rem * var(--text-scale)); line-height:1.55; color:var(--frost); opacity:.8; margin:6px 0 0; }
.tw-pick-sub:empty{ display:none; }
.tw-pick-tip{ font-size:calc(0.8125rem * var(--text-scale)); line-height:1.65; color:var(--frost); opacity:.7; margin:0 0 16px; }
#twPick.is-settling .tw-pick-tip, #twPick.is-settling .tw-stirbox{ display:none; }
#twPick{ overflow-y:auto; padding-right:8px; margin-right:-8px; }
.tw-stirbox{ margin:0 0 16px; }
.tw-stir-btns{ display:flex; gap:10px; }
.tw-stir-btns .pl-nav{ flex:1; }
.tw-stir-btns .pl-nav.on{ background:var(--gold); color:var(--midnight); border-color:var(--gold); }
/* choosing by number (keyboard and screen readers) */
.tw-keypick{ margin:0 0 16px; }
.tw-keypick[hidden]{ display:none; }
.tw-keypick label{ display:block; margin-bottom:6px; font-size:calc(0.8125rem * var(--text-scale)); color:var(--frost); }
.tw-keypick-row{ display:flex; gap:10px; }
.tw-keypick input{ width:6.5em; flex:none; padding:8px 10px; background:var(--field-bg); border: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)); }
.tw-keypick .pl-nav{ flex:1; }
.tw-pick-btns{ display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.tw-pick-btns .pl-nav{ width:100%; }

/* ---------- narrower screens: table above panel, and the table is dragged around ---------- */
@media (max-width:1000px){
  .tw-tablewrap{ flex:none; height:clamp(320px, 58vh, 540px); }
  .tw-stage.reading .tw-rail{ flex:none; grid-template-columns:repeat(3, var(--cw)); padding:6px 0 4px; }
  .tw-stage.reading .tw-unchosen{ grid-column:auto; justify-self:auto; }
  .tw-intro, #twPick{ overflow:visible; margin-right:0; padding-right:0; }
  /* before the scatter, the intro and the question come first; the table is above the panel once it is scattered */
  #twLayout.is-ask{ display:flex; flex-direction:column; }
  #twLayout.is-ask .pl-panel{ order:-1; margin-top:0; margin-bottom:14px; }
  .tw-veil{ bottom:5%; }
}

@media (prefers-reduced-motion: reduce){
  .tw-pick, .tw-table.settled .tw-pick, .tw-face, .tw-fly{ transition:none; }
  .tw-pick.kept .tw-face, .tw-slot.next .tw-slotbox, .tw-pick.returned .tw-face, .tw-slot.active.face-down .pl-tilt{ animation:none; }
}

/* ---------- sharper card backs ----------
   tangle.js draws the back once at the cards' exact on-screen size and hands it over as --tw-back-sm
   (and a larger --tw-back-lg for the card the tangle keeps back), so the browser never shrinks the big
   picture itself. The transparent outline keeps the edges of turned cards smooth. */
.tw-face{ outline:1px solid transparent; backface-visibility:hidden; }
.tw-page.has-sprite .tw-face{ background:var(--tw-back-sm) 0 0 / 100% 100% no-repeat, var(--midnight-2); }
.tw-page.has-sprite .tw-pick.kept .tw-face{ background-image:var(--tw-back-lg); }

/* ---------- kick the table ---------- */
.tw-kickbtn{ width:100%; margin-top:4px; }

/* the six cards that turn over: a back and a front on a flipping card */
.tw-pick.kicked, .tw-pick:has(.tw-flip){ perspective:700px; }
.tw-flip{ position:absolute; inset:0; display:block; transform-style:preserve-3d; transition:transform .85s cubic-bezier(.4,.2,.2,1); }
.tw-flip > *{ position:absolute; inset:0; display:block; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:6px; overflow:hidden; box-sizing:border-box; }
.tw-ffront{ transform:rotateY(180deg); background:var(--midnight); box-shadow:0 0 0 1px rgba(var(--gold-rgb),.5), 0 6px 16px rgba(var(--shadow-rgb),.6); }
.tw-ffront canvas{ width:100%; height:100%; display:block; }
.tw-ffront .pl-textface{ font-size:calc(var(--cw) / 10); }
.tw-pick.kicked .tw-flip{ transform:rotateY(180deg) scale(1.12); }
.tw-pick.kicked{ z-index:9000 !important; }
.tw-pick.reversed .tw-ffront canvas, .tw-pick.reversed .tw-ffront .pl-textface{ transform:rotate(180deg); }

/* every card hops while the table is kicked */
.tw-table.kicking .tw-pick .tw-face, .tw-table.kicking .tw-pick .tw-flip{ animation:tw-hop .8s ease-out both; animation-delay:var(--hop, 0ms); }
@keyframes tw-hop{ 0%{ transform:translateY(0) scale(1); } 35%{ transform:translateY(calc(var(--hopY, 34px) * -1)) scale(var(--hopS, 1.22)); box-shadow:0 26px 30px rgba(var(--shadow-rgb),.45); } 100%{ transform:translateY(0) scale(1); } }
.tw-table.kicking .tw-pick.kicked .tw-flip{ animation:none; }

/* the whole board shakes with each slam */
#twLayout.quake, #twField.quake{ animation:tw-quake .22s linear infinite; }
@keyframes tw-quake{
  0%{ transform:translate(0,0); } 20%{ transform:translate(calc(var(--qk,1) * -6px),calc(var(--qk,1) * 4px)) rotate(calc(var(--qk,1) * -.25deg)); }
  40%{ transform:translate(calc(var(--qk,1) * 5px),calc(var(--qk,1) * -5px)) rotate(calc(var(--qk,1) * .2deg)); }
  60%{ transform:translate(calc(var(--qk,1) * -4px),calc(var(--qk,1) * -3px)); } 80%{ transform:translate(calc(var(--qk,1) * 6px),calc(var(--qk,1) * 3px)) rotate(calc(var(--qk,1) * .25deg)); } 100%{ transform:translate(0,0); }
}

@media (prefers-reduced-motion: reduce){
  #twLayout.quake, #twField.quake,
  .tw-table.kicking .tw-pick .tw-face, .tw-table.kicking .tw-pick .tw-flip{ animation:none; }
  .tw-flip{ transition:none; }
}

/* ---------- slam the table ---------- */
/* the table shakes when it is slammed */
.tw-table.shaking{ animation:tw-tshake .08s linear infinite; }
@keyframes tw-tshake{
  0%{ transform:translate(0,0) rotate(0); } 25%{ transform:translate(-7px,4px) rotate(-.5deg); }
  50%{ transform:translate(6px,-6px) rotate(.45deg); } 75%{ transform:translate(-5px,-3px) rotate(-.3deg); } 100%{ transform:translate(0,0) rotate(0); }
}
@media (prefers-reduced-motion: reduce){ .tw-table.shaking{ animation:none; } }

.tw-tablewrap{ z-index:1; }

/* a card that arrives already turned (the six of a slammed table) is face up at once, with no second flip */
.tw-slot .pl-card.instant .pl-inner{ transition:none; }

/* no frame inside the pane and nothing cuts a card off: cards show whole while they are shuffled and thrown */
.tw-table.free{ overflow:visible; }