/* spellbook.css — RUNIVERSE-DARPA-SPELLBOOK-1 (Decision 478A). Book of Magic port. Desktop: centred two-column book. Phone portrait: bottom sheet (thumb zone). Phone landscape: full-height two-column. */
.sb-root[hidden] { display: none !important; }
.sb-root { position: fixed; inset: 0; z-index: 400; font-family:var(--rf-ui); color: #c7dcd0; -webkit-tap-highlight-color: transparent; }
.sb-root * { box-sizing: border-box; }
.sb-backdrop { position: absolute; inset: 0; background: rgba(9,7,27,0.62); }
.sb-sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(920px, 94vw); height: min(620px, 90vh); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head head" "filt dwrap" "list dwrap"; gap: 8px 14px; padding: 12px 14px; background: #120f2b; border: 2px solid #0eaf9b; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.sb-head { grid-area: head; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.sb-book { height: 34px; width: auto; image-rendering: pixelated; }
.sb-title { margin: 0; font-family: var(--rf-title); font-size: var(--rf-fs-title); line-height: var(--rf-lh-title); color: #ffddad; letter-spacing: 0; flex: 1; }
.sb-count { font-size:var(--rf-fs-ui); color: #7f9d93; }
.sb-close { width: 44px; height: 44px; border-radius: 8px; border: 1.5px solid #0eaf9b; background: rgba(14,175,155,0.12); color: #c7dcd0; font-size:var(--rf-fs-ui2); line-height: 1; cursor: pointer; font-family:var(--rf-ui); }
.sb-filters { grid-area: filt; display: flex; gap: 8px; align-items: center; }
.sb-cat { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.sb-arrow { width: 44px; height: 44px; border-radius: 8px; border: 1.5px solid rgba(14,175,155,0.55); background: rgba(14,175,155,0.1); color: #0eaf9b; font-size:var(--rf-fs-ui); cursor: pointer; }
.sb-cat-label { min-width: 104px; text-align: center; font-size:var(--rf-fs-ui); color: #ffe68c; }
.sb-search { flex: 1; min-width: 0; height: 44px; padding: 0 10px; border-radius: 8px; border: 1.5px solid rgba(14,175,155,0.55); background: #09071b; color: #c7dcd0; font-size:var(--rf-fs-ui); font-family:var(--rf-ui); }
.sb-search::placeholder { color: #587a70; letter-spacing:0; }
.sb-list { grid-area: list; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; min-height: 0; }
.sb-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 10px; text-align: left; border-radius: 8px; border: 1.5px solid rgba(14,175,155,0.25); background: rgba(14,175,155,0.05); color: inherit; font-family:var(--rf-ui); cursor: pointer; flex: 0 0 auto; }
.sb-row:hover { background: rgba(14,175,155,0.14); }
.sb-row.is-on { border-color: #ffe68c; background: rgba(255,230,140,0.12); }
.sb-row-text { display: flex; flex-direction: column; min-width: 0; }
.sb-row-name { font-size:var(--rf-fs-ui); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-row-meta { font-size:var(--rf-fs-ui); color: #7f9d93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 6px; background: #09071b; border: 1px solid rgba(14,175,155,0.35); font-size:var(--rf-fs-ui); color: #c7dcd0; }
.sb-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.sb-icon--cantrip, .sb-icon--high_cantrip { border-color: rgba(120,190,255,0.5); }
.sb-icon--basic { border-color: rgba(14,175,155,0.6); }
.sb-icon--high { border-color: rgba(255,200,90,0.6); }
.sb-icon--big { width: 66px; height: 66px; flex-basis: 66px; }
.sb-dwrap { grid-area: dwrap; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.sb-details { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1.5px solid rgba(14,175,155,0.3); border-radius: 8px; padding: 10px; background: rgba(9,7,27,0.55); font-size:var(--rf-fs-ui); line-height: 1.4; }
.sb-details p { margin: 0 0 8px; }
.sb-empty { color: #7f9d93; padding: 10px; }
.sb-d-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sb-d-title { margin: 0; font-family: var(--rf-title); font-size: var(--rf-fs-title); line-height: var(--rf-lh-title); color: #ffddad; }
.sb-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sb-tier { min-width: 64px; height: 40px; padding: 0 10px; border-radius: 8px; border: 1.5px solid rgba(14,175,155,0.5); background: rgba(14,175,155,0.08); color: #c7dcd0; font-family:var(--rf-ui); font-size:var(--rf-fs-ui); cursor: pointer; }
.sb-tier.is-on { border-color: #ffe68c; background: rgba(255,230,140,0.16); color: #ffe68c; }
.sb-ready { color: #0eaf9b; font-size:var(--rf-fs-ui); }
.sb-foot { display: flex; justify-content: flex-end; }
.sb-done { height: 48px; min-width: 140px; padding: 0 22px; border-radius: 10px; border: 2px solid #0eaf9b; background: rgba(14,175,155,0.25); color: #fff; font-size:var(--rf-fs-ui); font-family:var(--rf-ui); cursor: pointer; }
.sb-root :focus-visible { outline: 2px solid #ffe68c; outline-offset: 2px; }
/* BOOK-HUD-1: the Book button (#book-btn) lives in book.css */
/* PHONE PORTRAIT: bottom sheet (list + filters + details all in the lower 80%; Done is the lowest control) */
@media (max-width: 820px) and (orientation: portrait) {
  .sb-sheet { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; height: min(82vh, 760px); border-radius: 14px 14px 0 0; border-width: 2px 0 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "head" "filt" "list" "dwrap"; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .sb-dwrap { max-height: 44vh; }
  .sb-details { max-height: 28vh; }
  .sb-count { display: none; }
  .sb-cat-label { min-width: 84px; }
}
/* PHONE LANDSCAPE: full-height two columns, 44 px controls, details on the right */
@media (max-height: 520px) {
  .sb-sheet { left: 0; right: 0; top: 0; bottom: 0; transform: none; width: 100%; height: 100%; border-radius: 0; border-width: 0; padding: 8px calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left)); gap: 6px 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sb-title { font-size: var(--rf-fs-title); }
  .sb-row { min-height: 52px; }
}
@media (prefers-reduced-motion: no-preference) { .sb-row, .sb-tier { transition: background 0.08s, border-color 0.08s; } }
/* B-WORD-1: the HUD caption (#ui) now carries the scene title, which can be long: keep it clear of the player count */
#ui { max-width: calc(100vw - 120px); line-height: 1.25; }
/* VIEWPORT-1 made #game-canvas position:fixed (later in the DOM), which painted over the HUD caption and the player count; lift them back above the canvas (taps pass through) */
#ui, #players-count { z-index: 20; pointer-events: none; text-shadow: 0 1px 2px #09071b, 0 0 5px #09071b; }
#ui, #players-count { background: rgba(9,7,27,0.62); padding: 3px 7px; border-radius: 5px; }
/* CONTROLS-APPLY-1 (Decision 558): ready-spell chip removed */