/* Runekin · css/altar.css — Altar · treino (7e): tabuleiro, bandeja.
   Fatia do antigo style.css (linhas 721–750); a ORDEM dos <link> em layout.jsx preserva a cascata. */

/* ============ BUILD · PRACTICE (7e) ============ */
#screen-altar { padding-bottom: 90px; }
.al-head { height: 140px; }
.board-wrap { margin-top: 38px; }
.board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 6px; background: var(--ink); aspect-ratio: 1; touch-action: none; }
.cell { position: relative; aspect-ratio: 1; background: #2a2a2e; box-shadow: inset 0 0 0 2px #444; }
.cell.filled { background: var(--cc, var(--c2)); box-shadow: none; }
.cell .gloss { display: none; }
.cell.ghost-ok { background: var(--cc); opacity: .5; box-shadow: inset 0 0 0 3px #fff; }
.cell.ghost-bad { box-shadow: inset 0 0 0 3px var(--c3); }
.cell.hint { animation: cellHint .5s ease 3; box-shadow: inset 0 0 0 3px var(--c2); }
@keyframes cellHint { 50% { background: var(--c2); } }
#screen-altar .hint { margin-top: 18px; }
.controls { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.controls .btn { --face: var(--ink); color: #fff; }
.controls .btn.ghost { --face: transparent; color: var(--ink); }
.controls .btn[disabled] { opacity: .45; }
.sel-preview { width: 40px; height: 40px; display: grid; place-items: center; }
.sel-preview svg { width: 100%; height: 100%; }
.al-tray-label { margin-top: 24px; }
.tray { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.stone { padding: 4px; background: #fff; border: 3px solid var(--ink); cursor: pointer; transition: transform .08s; }
.stone svg { display: block; width: 64px; height: auto; }
.stone svg rect { rx: 0; }
.stone:nth-child(odd) { transform: rotate(-3deg); }
.stone:nth-child(even) { transform: rotate(2deg); }
.stone.used { opacity: .25; cursor: default; }
.stone.active { transform: rotate(0) scale(1.06); background: var(--c2); }
.al-foot { position: fixed; left: 0; right: 0; bottom: 0; height: 56px; background: var(--ink); clip-path: var(--e-foot); max-width: 520px; margin: 0 auto; z-index: 40; pointer-events: none; }