:root { color-scheme: dark; font-family: Georgia, "Times New Roman", serif; background:#090a12; color:#f2eddf; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 70% 10%,#31234d 0,transparent 28rem),radial-gradient(circle at 5% 90%,#182441 0,transparent 30rem),#090a12; }
button,textarea { font:inherit; } button:focus-visible,textarea:focus-visible { outline:3px solid #e5ba63; outline-offset:3px; } #app { min-height:100vh; padding:clamp(1.25rem,4vw,4rem); }
.support-wrap { position:fixed; z-index:3; right:1rem; top:1rem; display:flex; align-items:center; gap:.55rem; }.support { border:1px solid #aa7c2c; color:#edce85; background:#13101ae8; border-radius:99px; padding:.55rem .9rem; cursor:pointer; }.support-wrap a { color:#edce85; font-size:.85rem; }
.audio-control { position:fixed; z-index:3; left:1rem; top:1rem; display:flex; gap:.45rem; align-items:center; padding:.35rem .55rem; border:1px solid #5d4b30; border-radius:99px; background:#13101ae8; }.audio-control button { border:0; background:transparent; color:#edce85; cursor:pointer; }.audio-control input { width:4.5rem; accent-color:#d6ad55; }
.opening,.game { max-width:1280px; margin:auto; display:grid; gap:clamp(1.5rem,4vw,4rem); align-items:center; }.opening { grid-template-columns:minmax(16rem,.65fr) minmax(0,1.35fr); }.opening-copy { max-width:34rem; }.eyebrow { letter-spacing:.16em; text-transform:uppercase; color:#cfad64; font-size:.74rem; }.opening h1,.panel h1 { font-size:clamp(2.5rem,7vw,6rem); font-weight:normal; margin:.1em 0; }.opening p { font-size:1.2rem; line-height:1.55; color:#d4cec2; }
.board { margin:0; border:1px solid #aa7c2c; background:#05060b; box-shadow:0 0 3rem #0009; overflow:hidden; }.board img { display:block; width:100%; height:auto; object-fit:contain; aspect-ratio:1 / 1; }.opening-board { max-height:none; }.gold-button { border:1px solid #e4bd69; background:linear-gradient(135deg,#9a6c22,#e1bc64,#765014); color:#171009; padding:.8rem 1.25rem; border-radius:.25rem; cursor:pointer; font-weight:bold; }.gold-button:disabled { opacity:.55; cursor:wait; }
.panel { background:linear-gradient(145deg,#141525e8,#0d0d15e8); border:1px solid #5d4b30; border-radius:.75rem; padding:clamp(1.25rem,3vw,2.5rem); box-shadow:0 1rem 3rem #0008; }.ritual { width:min(100%,42rem); margin:10vh auto; }.ritual h1 { font-size:clamp(2rem,5vw,3.5rem); }.ritual label { display:block; margin:1.4rem 0 .45rem; color:#e6cb88; }
textarea { display:block; width:100%; border:1px solid #6a5a41; border-radius:.4rem; padding:.75rem; background:#0b0c13; color:#fffaf0; resize:vertical; }.ritual .gold-button { margin-top:1rem; }.error { min-height:1.25rem; color:#ffb1a5; }.leela-game { grid-template-columns:minmax(0,.9fr) minmax(20rem,1.1fr); align-items:start; }.game-board { position:sticky; top:2rem; width:100%; }.dialogue { position:relative; isolation:isolate; min-width:0; overflow:hidden; }.dialogue::before { content:""; position:absolute; z-index:-1; inset:0; background-image:linear-gradient(145deg,#141525f2,#0d0d15ed),var(--cell-image); background-position:center; background-size:cover; opacity:.96; }.cell-background-source { display:none; }.dialogue h1 { font-size:clamp(2rem,4vw,3.7rem); }.cell-label { color:#e2c176; margin:.25rem 0 1rem; }.messages { max-height:43vh; overflow:auto; padding-right:.5rem; }.message { border-left:2px solid #80632e; padding:.3rem .8rem; margin:1rem 0; }.message.user { border-left-color:#6e5e9b; }.message.assistant.is-arriving { animation:assistant-arrival .5s ease-out both; }.message span { color:#d6b66d; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }.message p { white-space:pre-wrap; line-height:1.5; margin:.35rem 0; }.roll-status { color:#c7bdab; }.actions { display:grid; gap:.75rem; align-items:end; }.actions .gold-button { justify-self:start; }.message-form { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.75rem; align-items:end; }.message-form textarea { min-width:0; }.message-form button { min-height:3rem; border:1px solid #e4bd69; border-radius:.4rem; background:#181522e8; color:#f3cb72; cursor:pointer; }.message-form button[type="submit"] { padding:.6rem 1rem; }.message-form [data-speech-toggle] { display:grid; place-items:center; width:3rem; padding:.55rem; }.message-form [data-speech-toggle][aria-pressed="true"] { background:#60471a; color:#fff2c5; }.message-form [data-speech-toggle]:disabled { cursor:not-allowed; opacity:.55; }.message-form svg { width:1.35rem; height:1.35rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes assistant-arrival { from { opacity:0; transform:translateY(.75rem); } to { opacity:1; transform:translateY(0); } }
@media (max-width:800px) { #app { padding:1rem; padding-top:4.5rem; }.opening,.leela-game { grid-template-columns:minmax(0,1fr); }.opening-board { order:-1; }.game-board { position:static; }.messages { max-height:36vh; }.message-form { grid-template-columns:auto minmax(0,1fr); }.message-form button[type="submit"] { grid-column:2; justify-self:start; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }.message.assistant.is-arriving { animation:assistant-arrival-reduced .01ms ease-out both; } } @keyframes assistant-arrival-reduced { from { opacity:.55; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .dice.is-requesting { animation:none; } }
button.dice-wrap { width:100%; padding:0; border:0; background:transparent; cursor:pointer; } button.dice-wrap:disabled { cursor:not-allowed; }

/* Game motion is intentionally local: visual effects never choose the result. */
.board { position:relative; }.board-marker { position:absolute; width:1.8%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:#f0ca73; box-shadow:0 0 0 2px #38240c,0 0 1rem #f3c45d; transition:left .42s ease-in-out,top .42s ease-in-out; }
.dice-wrap { height:8rem; display:grid; place-items:center; perspective:600px; }.dice { --final-transform:rotateX(0deg); position:relative; width:4.6rem; aspect-ratio:1; transform-style:preserve-3d; transform:var(--final-transform); }.dice[data-final-face="1"] { --final-transform:rotateX(0deg) rotateY(0deg); }.dice[data-final-face="2"] { --final-transform:rotateY(-90deg); }.dice[data-final-face="3"] { --final-transform:rotateX(-90deg); }.dice[data-final-face="4"] { --final-transform:rotateX(90deg); }.dice[data-final-face="5"] { --final-transform:rotateY(90deg); }.dice[data-final-face="6"] { --final-transform:rotateY(180deg); }.face { position:absolute; inset:0; display:grid; place-items:center; border:1px solid #d6ad55; border-radius:.35rem; color:#f3cb72; font-size:3rem; font-weight:bold; text-shadow:0 0 .5rem #d8972c; background:linear-gradient(135deg,#030306,#20162b 54%,#07070b); box-shadow:inset 0 0 1rem #7854a633; }.one { transform:translateZ(2.3rem); }.six { transform:rotateY(180deg) translateZ(2.3rem); }.two { transform:rotateY(90deg) translateZ(2.3rem); }.five { transform:rotateY(-90deg) translateZ(2.3rem); }.three { transform:rotateX(90deg) translateZ(2.3rem); }.four { transform:rotateX(-90deg) translateZ(2.3rem); }.dice.is-requesting { animation:dice-request .65s linear infinite; }.dice.is-revealing { animation:dice-tumble .85s cubic-bezier(.2,.8,.3,1) forwards,dice-bounce .2s .85s ease-out forwards; }.dice[data-motion="reduced"].is-revealing { animation:dice-dissolve .2s ease-out forwards; } @keyframes dice-request { to { transform:rotateX(360deg) rotateY(360deg); } } @keyframes dice-tumble { 0% { transform:rotateX(0) rotateY(0); } 70% { transform:rotateX(720deg) rotateY(540deg); } 100% { transform:var(--final-transform); } } @keyframes dice-bounce { 0% { transform:var(--final-transform) scale(1); } 45% { transform:var(--final-transform) scale(1.08); } 100% { transform:var(--final-transform) scale(1); } } @keyframes dice-dissolve { 0% { opacity:.15; } 100% { opacity:1; transform:var(--final-transform); } }