@font-face{font-family:Manrope;src:url('/assets/fonts/manrope-normal-400-17.woff2') format('woff2');font-display:swap}
:root{color-scheme:dark;--ink:#eae2d1;--gold:#d9bc83;--bg:#0b0918}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#39274688,transparent 65%),var(--bg);color:var(--ink);font:15px/1.65 Manrope,system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.oracle-header{padding:22px clamp(18px,4vw,64px);border-bottom:1px solid #d9bc8330;display:flex;gap:24px;align-items:center;justify-content:space-between}.oracle-brand{font:27px Georgia,serif;color:var(--gold);white-space:nowrap}.oracle-header nav{display:flex;flex-wrap:wrap;gap:18px;font-size:13px}.oracle-header nav a[aria-current]{color:var(--gold);border-bottom:1px solid var(--gold)}
.oracle-lobby{max-width:1240px;margin:auto;padding:54px 28px 32px}.oracle-kicker{font-size:11px;letter-spacing:.2em;color:var(--gold);text-align:center}.oracle-lobby h1{font:clamp(36px,5vw,64px)/1.12 Georgia,serif;text-align:center;margin:20px 0}.oracle-intro{max-width:640px;text-align:center;margin:0 auto 35px;color:#b9c2d1;font-size:16px}.oracle-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.oracle-choice{position:relative;display:block;padding:20px 24px 26px;border:1px solid #bfa46c55;border-radius:18px;background:linear-gradient(140deg,#33223faa,#130d20cc);text-align:center;transition:transform .3s,border-color .3s}.oracle-choice:hover{transform:translateY(-6px);border-color:var(--gold)}.oracle-number{position:absolute;top:18px;left:20px;color:#ab9164;font:16px Georgia,serif}.oracle-choice img{display:block;width:100%;height:240px;object-fit:contain;filter:drop-shadow(0 18px 24px #0007)}.oracle-choice h2{font:29px/1.2 Georgia,serif;color:var(--gold);margin:12px 0}.oracle-choice p{min-height:50px;color:#b7c1d0;font-size:14px}.oracle-enter{display:inline-block;border-top:1px solid #bfa46c45;padding-top:14px;color:var(--gold);font-size:13px}
.oracle-tarot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px;margin-top:28px;border:1px solid #bfa46c35;border-radius:12px;background:#d9bc8308}.oracle-tarot strong{font:25px Georgia,serif;color:var(--gold)}.oracle-tarot span{font-size:13px;color:#bec6d1}.oracle-note{color:#8f9aab;font-size:12px;text-align:center;margin-top:24px}
.oracle-game{max-width:1500px;margin:auto}.oracle-game-tools{display:flex;justify-content:space-between;gap:16px;padding:14px 28px;font-size:12px;color:#c5b998}.oracle-game-tools span{color:#9aa5b6}.oracle-loading{padding:60px;text-align:center;color:var(--gold)}.oracle-save{display:flex;align-items:center;justify-content:center;gap:18px;padding:22px}.oracle-save button{background:#d9bc831a;border:1px solid #bda16b;border-radius:24px;color:var(--ink);padding:10px 20px;cursor:pointer}.oracle-save button:disabled{opacity:.4;cursor:default}.oracle-save p{font-size:12px;color:#a8b1bf}.oracle-footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #d9bc8325;padding:22px 28px;font-size:12px;color:#a9b2c1}
/* Preserve Claude's measured scene geometry while matching the host site. */
.oracle-game .sr,.oracle-game .oh2,.oracle-game .tz{background:transparent;padding-top:18px}.oracle-game .sr-sub,.oracle-game .oh2-sub,.oracle-game .tz-sub{font-size:14px;max-width:75ch}.oracle-game .sr-grid,.oracle-game .oh2-grid,.oracle-game .tz-grid{margin-top:20px}.oracle-game .sr-cuerpo,.oracle-game .oh2-cuerpo,.oracle-game .tz-cuerpo{max-height:660px;overflow:auto;overscroll-behavior:contain}.oracle-game .sr-mesa,.oracle-game .oh2-mesa,.oracle-game .tz-mesa{max-width:540px;margin:auto}
@media(max-width:700px){.oracle-header{align-items:flex-start;flex-direction:column;padding:18px;gap:12px}.oracle-header nav{gap:14px;font-size:12px}.oracle-lobby{padding:30px 18px}.oracle-cards{grid-template-columns:1fr}.oracle-choice img{height:210px}.oracle-choice p{min-height:0}.oracle-tarot{flex-direction:column;text-align:center}.oracle-game-tools{padding:12px 16px;flex-direction:column;gap:4px}.oracle-save{flex-direction:column;gap:4px}.oracle-footer{flex-direction:column}.oracle-game .sr,.oracle-game .oh2,.oracle-game .tz{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){.oracle-choice{transition:none}.oracle-choice:hover{transform:none}}

.oracle-brand img{display:block;width:217px;height:73px;object-fit:contain}

/* Keep the bowl and its controls together in the first screen. */
body:has([data-game="huesos"]) .oracle-header{padding-top:8px;padding-bottom:8px;gap:8px}
body:has([data-game="huesos"]) .oracle-brand img{width:160px;height:46px}
[data-game="huesos"] .oracle-game-tools{padding-top:6px;padding-bottom:6px}
.oracle-game .oh2{padding-top:4px}
.oracle-game .oh2-kicker{margin:0 0 4px;font-size:10px}
.oracle-game .oh2-titulo{font-size:clamp(25px,3vw,34px)}
.oracle-game .oh2-sub{font-size:12px;line-height:1.45;margin-top:6px}
.oracle-game .oh2-grid{margin-top:10px;align-items:start}
.oracle-game .oh2-mesa{max-width:min(100%,540px,calc(100svh - 405px));min-width:150px}
.oracle-game .oh2-controles{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;max-width:540px;margin:8px auto 0;padding:10px;border:1px solid #d9bc8335;border-radius:16px;background:#191226}
.oracle-game .oh2-cubilete{width:44px;max-height:90px;object-fit:contain;grid-column:1;grid-row:1 / 3}
.oracle-game .oh2-input{grid-column:2;max-width:none;padding:8px 10px;font-size:13px;min-width:0}
.oracle-game .oh2-btn{grid-column:2;min-height:44px;padding:10px 12px;letter-spacing:.12em}
.oracle-game .oh2-eco{grid-column:1 / -1;font-size:12px;overflow-wrap:anywhere}
@media(max-width:700px){
 body:has([data-game="huesos"]) .oracle-header{padding:8px 12px}
 body:has([data-game="huesos"]) .oracle-header nav{gap:12px;font-size:11px}
 [data-game="huesos"] .oracle-game-tools span{display:none}
 .oracle-game .oh2-sub{max-width:48ch;font-size:11px}
 .oracle-game .oh2-mesa{max-width:min(100%,calc(100svh - 405px))}
}

