/* The Ninefold Oracle — flagship game surface */

.oracle{
  --card-w: 150px;
  padding:clamp(34px,5vw,54px) 0 clamp(40px,6vw,64px);
}

.oracle__shell{
  display:grid; gap:clamp(24px,3.4vw,42px);
  grid-template-columns:minmax(0,1fr) 300px;
  align-items:start;
}
@media (max-width:940px){
  .oracle__shell{ grid-template-columns:1fr; }
  /* Controls come first on narrow screens so Draw is never below the fold. */
  .oracle__shell > .panel{ order:-1; }
  .panel{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel__box.purse{ grid-column:1 / -1; }
  .panel__box:last-child{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .panel{ grid-template-columns:1fr; }
}

/* ---- board ---- */
.board-frame{
  position:relative;
  padding:clamp(20px,3vw,34px);
  border:1px solid var(--line-soft); border-radius:var(--r-card);
  background:
    radial-gradient(760px 500px at 50% 0%, rgba(138,99,176,.2), transparent 66%),
    linear-gradient(170deg, rgba(23,30,70,.92), rgba(9,12,32,.96));
}
.board-frame::before,
.board-frame::after{
  content:""; position:absolute; width:20px; height:20px; pointer-events:none;
  border:1px solid var(--gold); opacity:.6;
}
.board-frame::before{ top:9px; left:9px; border-right:0; border-bottom:0; }
.board-frame::after{ bottom:9px; right:9px; border-left:0; border-top:0; }

.board{
  display:grid; gap:clamp(9px,1.4vw,16px);
  grid-template-columns:repeat(3, minmax(0,1fr));
  max-width:520px; margin-inline:auto;
}

.slot{
  all:unset;
  position:relative; display:block; cursor:pointer;
  aspect-ratio:2/3; perspective:1000px;
  border-radius:4px;
}
.slot:focus-visible{ outline:2px solid var(--opal); outline-offset:4px; }
.slot[disabled],
.slot[aria-disabled="true"]{ cursor:default; }

.slot__inner{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.22,.8,.26,1);
}
.slot[data-face="up"] .slot__inner{ transform:rotateY(180deg); }

.slot__front,
.slot__back{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:4px; display:grid; place-items:center;
  border:1px solid var(--line-soft);
}

/* face-down */
.slot__back{
  background:
    repeating-linear-gradient(45deg, rgba(217,169,76,.07) 0 6px, transparent 6px 12px),
    linear-gradient(165deg,#1d2555,#0d1232);
}
.slot__back span{
  font-family:var(--display); font-size:1.5rem; color:rgba(240,209,140,.55);
}
.slot:not([disabled]):not([aria-disabled="true"]):hover .slot__back{ border-color:var(--gold); }

/* face-up */
.slot__front{
  transform:rotateY(180deg);
  background:linear-gradient(168deg,#f6f1e4,#ddd2ba);
  color:#1c1630; border-color:var(--gold);
  flex-direction:column; text-align:center; padding:8px;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.5);
}
.slot__glyph{ font-size:clamp(1.8rem,5vw,2.5rem); line-height:1; }
.slot__name{
  font-family:var(--body); font-size:.55rem; letter-spacing:.18em;
  text-transform:uppercase; margin-top:7px; color:#4a3f63;
}
.slot__mult{
  font-family:var(--display); font-size:1rem; font-weight:700;
  color:#6b4a14; margin-top:2px;
}

.slot[data-winning="true"] .slot__front{
  box-shadow:0 0 0 2px var(--gold-lt), 0 0 26px rgba(240,209,140,.65);
  animation:pulse-foil 1.1s ease-in-out 2;
}
@keyframes pulse-foil{
  50%{ box-shadow:0 0 0 3px #fff3d4, 0 0 40px rgba(240,209,140,.9); }
}

/* ---- readout ---- */
.readout{
  margin-top:26px; text-align:center; min-height:96px;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.readout__verdict{
  font-family:var(--display); font-size:clamp(1.5rem,3.6vw,2.1rem);
  color:var(--gold-lt); margin:0;
}
.readout__verdict[data-tone="loss"]{ color:var(--muted); }
.readout__verdict[data-tone="win"]{ color:var(--gold-lt); text-shadow:0 0 22px rgba(240,209,140,.45); }
.readout__detail{ margin:0; color:var(--muted); font-size:.93rem; }
.readout__gain{
  font-family:var(--display); font-size:1.5rem; color:var(--opal); margin:0;
}

/* ---- side panel ---- */
.panel{ display:grid; gap:18px; }
.panel__box{
  border:1px solid var(--line-soft); border-radius:var(--r-card);
  background:linear-gradient(170deg, rgba(23,30,70,.8), rgba(10,14,36,.9));
  padding:22px 20px;
}
.panel__box h3{ font-size:1.05rem; margin-bottom:.6em; }
.panel__box h4{
  font-family:var(--body); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); margin:0 0 .9em;
}

.purse{ text-align:center; }
.purse__value{
  font-family:var(--display); font-size:2.9rem; line-height:1;
  color:var(--gold-lt); display:block;
}
.purse__label{
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted-dim); display:block; margin-top:8px;
}
.purse__note{ font-size:.76rem; color:var(--muted-dim); margin:12px 0 0; line-height:1.5; }

.stakes{ display:flex; gap:8px; }
.stake{
  all:unset; flex:1 1 0; text-align:center; cursor:pointer;
  border:1px solid var(--line-soft); border-radius:2px; padding:11px 4px;
  font-size:.82rem; color:var(--muted); transition:all .18s ease;
}
.stake:hover{ border-color:var(--gold); color:var(--gold-lt); }
.stake:focus-visible{ outline:2px solid var(--opal); outline-offset:2px; }
.stake[aria-pressed="true"]{
  background:rgba(217,169,76,.16); border-color:var(--gold); color:var(--gold-lt);
}

.panel__actions{ display:grid; gap:10px; }
.panel__actions .btn{ justify-content:center; width:100%; }

.picks{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-dim);
  margin-top:14px;
}
.picks__pips{ display:flex; gap:7px; }
.picks__pips i{
  width:9px; height:9px; border-radius:50%; display:block;
  border:1px solid var(--gold); opacity:.45;
}
.picks__pips i[data-on="true"]{ background:var(--gold); opacity:1; box-shadow:0 0 10px rgba(240,209,140,.6); }

/* ---- sign table ---- */
.signs{ list-style:none; margin:0; padding:0; }
.signs li{
  display:flex; align-items:center; gap:12px;
  padding:8px 0; border-top:1px solid var(--line-soft);
  font-size:.85rem; color:var(--muted);
}
.signs li:first-child{ border-top:0; }
.signs b{ font-family:var(--display); font-size:1.25rem; color:var(--gold-lt); width:24px; text-align:center; }
.signs span{ flex:1; }
.signs em{ font-style:normal; color:var(--parchment); font-size:.8rem; }

/* ---- how to play ---- */
.howto{ display:grid; gap:20px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:760px){ .howto{ grid-template-columns:1fr; } }
.howto__step h3{ font-size:1.1rem; }
.howto__step p{ color:var(--muted); font-size:.93rem; margin:0; }
.howto__num{
  font-family:var(--display); font-size:1.8rem; color:var(--gold);
  display:block; line-height:1; margin-bottom:10px;
}

@media (prefers-reduced-motion:reduce){
  .slot__inner{ transition:none; }
  .slot[data-winning="true"] .slot__front{ animation:none; }
}

/* ---- credit / bet / win meter (casino readout) ---- */
.meter{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; margin:26px auto 0; max-width:520px;
  border:1px solid var(--line); border-radius:2px;
  background:var(--line-soft); overflow:hidden;
}
.meter__cell{
  background:linear-gradient(180deg,#0a0e26,#070a1c);
  padding:12px 8px; text-align:center;
}
.meter__label{
  display:block; font-size:.58rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted-dim); margin-bottom:5px;
}
.meter__cell b{
  display:block; font-family:var(--display); font-size:1.5rem; line-height:1;
  color:var(--gold-lt); font-weight:600;
}
.meter__cell b[data-flash="true"]{
  color:#fff6de; text-shadow:0 0 18px rgba(240,209,140,.85);
  transition:none;
}
.meter__cell b{ transition:color .5s ease, text-shadow .5s ease; }

.paytable__note{
  font-size:.75rem; color:var(--muted-dim); margin:12px 0 0; line-height:1.5;
}