/* The Norse Oracle Deck: a fan of cards on the table, flipped in 3D (CSS only). */
body[data-page="oracle"] .page-head { max-width: 820px; }
.oc-setup { max-width: 640px; padding: 22px; border-radius: 18px; background: rgba(15, 29, 36, 0.8); border: 1px solid rgba(233, 224, 204, 0.1); display: grid; gap: 12px; transition: opacity 0.4s; }
.oc-setup.away { opacity: 0.5; }
.oc-q { width: 100%; font: inherit; font-size: 1.1rem; color: var(--bone); background: rgba(34, 52, 61, 0.55); border: 1px solid rgba(163, 181, 160, 0.3); border-radius: 10px; padding: 0.7rem 0.9rem; resize: vertical; }
.oc-q:focus { outline: none; border-color: var(--neon); }
.oc-spreads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oc-spread { all: unset; box-sizing: border-box; display: grid; gap: 2px; padding: 0.6rem 0.9rem; border-radius: 12px; border: 1px solid rgba(233, 224, 204, 0.18); cursor: pointer; }
.oc-spread[aria-pressed="true"] { border-color: var(--neon); background: rgba(47, 201, 237, 0.1); }
.oc-spread:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.oc-spread .t { font-family: var(--display); font-weight: 600; }
.oc-spread .s { font-size: 0.88rem; color: var(--lichen); }
.oc-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.oc-quota { margin: 0; font-size: 0.9rem; color: var(--lichen); }
.oc-quota a { color: #9fe6f8; }
.oc-hint { text-align: center; font-style: italic; color: var(--jade); min-height: 1.6em; margin: 26px 0 0; font-size: 1.1rem; }

/* The fan */
.oc-fan { position: relative; height: 330px; margin: 10px auto 0; max-width: 980px; width: 100%; margin-bottom: 110px; transition: opacity 0.5s, transform 0.5s; }
.oc-fan:empty { display: none; }
.oc-fan.gone { opacity: 0; transform: translateY(20px); pointer-events: none; height: 0; overflow: hidden; }
.oc-fan-card {
  all: unset;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 120px;
  aspect-ratio: 300 / 480;
  margin-left: -60px;
  cursor: pointer;
  transform-origin: 50% 180%;
  transform: rotate(calc(var(--i) * 5.5deg));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5));
}
.oc-fan-card svg { width: 100%; height: 100%; display: block; }
.oc-fan-card:hover, .oc-fan-card:focus-visible { transform: rotate(calc(var(--i) * 5.5deg)) translateY(-26px); }
.oc-fan-card:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 10px; }
.oc-fan-card.taken { opacity: 0; pointer-events: none; transform: rotate(calc(var(--i) * 5.5deg)) translateY(-120px); }

/* Cards on the table, flipping */
.oc-table { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin: 16px 0 0; }
.oc-slot { display: grid; justify-items: center; gap: 8px; animation: oc-rise 0.45s both; }
@keyframes oc-rise { from { opacity: 0; transform: translateY(-30px) scale(0.9); } }
.oc-card { all: unset; cursor: pointer; width: clamp(150px, 26vw, 220px); aspect-ratio: 300 / 480; perspective: 1100px; }
.oc-card:focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; border-radius: 14px; }
.oc-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1); }
.oc-card.turned .oc-inner { transform: rotateY(180deg); }
.oc-card.turned { cursor: default; }
.oc-side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5); overflow: hidden; }
.oc-side svg { width: 100%; height: 100%; display: block; }
.oc-side.front { transform: rotateY(180deg); }
.oc-card.turned .oc-side.front { box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(47, 201, 237, 0.25); }
.oc-runes { filter: drop-shadow(0 0 6px rgba(47, 201, 237, 0.9)); }
.oc-pos { margin: 0; font-style: italic; color: var(--lichen); font-size: 0.95rem; text-align: center; max-width: 220px; }

/* The reading */
.oc-reading { max-width: 860px; margin: 34px auto 0; padding: clamp(18px, 4vw, 30px); border-radius: 18px; background: rgba(15, 29, 36, 0.85); border: 1px solid rgba(47, 201, 237, 0.25); }
.oc-reading-title { margin: 0 0 16px; font-family: var(--display); font-weight: 600; font-size: 1.4rem; text-align: center; }
.oc-cards-text { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.oc-meaning { padding: 14px 16px; border-radius: 12px; background: rgba(10, 21, 27, 0.6); border: 1px solid rgba(233, 224, 204, 0.08); }
.oc-meaning-pos { margin: 0; font-size: 0.85rem; font-style: italic; color: var(--lichen); }
.oc-meaning h3 { margin: 0.2rem 0 0.4rem; font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.oc-meaning h3 span { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 0.95rem; color: var(--jade); }
.oc-meaning p { margin: 0 0 0.5rem; font-size: 0.97rem; }
.oc-shadow { color: #e3c2b4; }
.oc-offer { color: #bfeefa; }
.oc-more { font-size: 0.9rem; color: #9fe6f8; }
.oc-ai { margin-top: 20px; }
.oc-ai h3 { margin: 0 0 0.5rem; font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.oc-ai p { margin: 0 0 0.8rem; line-height: 1.7; }
.oc-ai p:last-of-type { font-style: italic; color: var(--jade); }
.oc-again { display: flex; justify-content: center; gap: 12px; margin: 22px 0 0; }
.oc-again .btn { text-decoration: none; }
@media (max-width: 640px) {
  .oc-fan { height: 220px; }
  .oc-fan-card { width: 84px; margin-left: -42px; transform: rotate(calc(var(--i) * 4.5deg)); }
  .oc-fan-card:hover { transform: rotate(calc(var(--i) * 4.5deg)) translateY(-18px); }
  .oc-table { gap: 10px; }
  .oc-card { width: 30vw; }
}
@media (prefers-reduced-motion: reduce) { .oc-inner { transition: none; } }