/* The keeper of the fire: an RPG text box. Night panel, RVLS Thorn chrome text at OS size, JetBrains-style
   reading text for the line itself so it stays legible. Sits above the taskbar, never covers the whole desktop. */
.guide-hot { position: absolute; z-index: 6; background: transparent; border: 0; padding: 0; cursor: help; border-radius: 40% 40% 12% 12%; }
.guide-hot:hover, .guide-hot:focus-visible { box-shadow: 0 0 0 2px var(--rvls-color-fire-violet, #b58cff), 0 0 26px 6px rgba(181, 140, 255, .35); outline: none; }

.guide { position: absolute; z-index: 9500; right: 18px; bottom: calc(var(--bar, 44px) + 96px); transform: translate(0, 14px);
  width: min(500px, calc(100% - 24px)); display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: start;
  padding: 14px 44px 14px 14px; background: rgba(12, 10, 22, .94); color: var(--rvls-color-bone, #e9e3f2);
  border: 2px solid var(--rvls-color-fire-violet, #8f6bd6); box-shadow: 0 0 0 1px #000, 0 18px 40px rgba(0, 0, 0, .55), 0 0 30px rgba(143, 107, 214, .25);
  opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.guide.on { opacity: 1; transform: none; }
#os .guide { background: rgba(12, 10, 22, .95); color: var(--rvls-color-bone, #e9e3f2); }
.guide[hidden] { display: none; }
.guide-face { width: 90px; height: 120px; object-fit: cover; image-rendering: pixelated; border: 1px solid rgba(233, 227, 242, .25); background: #000; }
.guide-name { margin: 0 0 6px; font: 400 13px/1.15 "RVLS Thorn", monospace; text-transform: lowercase; color: var(--rvls-color-fire-violet, #b58cff); -webkit-font-smoothing: none; }
.guide-text { margin: 0 0 10px; min-height: 2.6em; font: 15px/1.5 "JetBrains Mono", ui-monospace, monospace; }
.guide-opts { display: grid; gap: 4px; }
.guide-opt { all: unset; cursor: pointer; padding: 3px 8px; font: 400 13px/1.3 "RVLS Thorn", monospace; text-transform: lowercase; -webkit-font-smoothing: none; color: var(--rvls-color-bone, #e9e3f2); }
.guide-opt:hover, .guide-opt:focus-visible { background: var(--rvls-color-fire-violet, #8f6bd6); color: #0c0a16; }
.guide-ask { display: flex; gap: 6px; }
.guide-ask input { flex: 1; min-width: 0; font: 14px/1.4 "JetBrains Mono", ui-monospace, monospace; padding: 5px 8px; color: var(--rvls-color-bone, #e9e3f2);
  background: rgba(0, 0, 0, .5); border: 1px solid rgba(233, 227, 242, .35); }
.guide-ask input:focus-visible { outline: 2px solid var(--rvls-color-fire-violet, #b58cff); }
.guide-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer; font-size: 13px; }

html[data-mode="phone"] .guide { right: 50%; transform: translate(50%, 14px); bottom: 12px; grid-template-columns: 60px 1fr; padding-right: 40px; }
html[data-mode="phone"] .guide-face { width: 60px; height: 80px; }
html[data-mode="phone"] .guide.on { transform: translate(50%, 0); }
@media (prefers-reduced-motion: reduce) { .guide { transition: none; } }
html[data-motion="still"] .guide { transition: none; }

/* Start menu: a description pane under the list (hover descriptions; focus shows them too). */
.startmenu { flex-wrap: wrap; width: 300px; }
.startmenu ul { flex: 1; }
.startmenu .menu-desc { flex-basis: 100%; margin: 0; padding: 8px 10px 10px 40px; min-height: 3.4em; border-top: 2px solid var(--mid, #888);
  font: 400 13px/1.3 "RVLS Thorn", monospace; text-transform: lowercase; -webkit-font-smoothing: none; color: inherit; }

/* Desk sound panel: icons you click to cross out. */
.sndpanel-btn { font-size: 14px; line-height: 1; padding: 0 4px; background: none; border: 0; cursor: pointer; color: inherit; }
.sndpanel { position: absolute; right: 6px; bottom: calc(var(--bar, 44px) + 4px); z-index: 9600; width: 300px; padding: 10px; }
.sndpanel[hidden] { display: none; }
.sndpanel .sp-head { margin: 0 0 8px; font: 400 13px/1.15 "RVLS Thorn", monospace; text-transform: lowercase; -webkit-font-smoothing: none; }
.sndpanel .sp-row { display: flex; gap: 6px; margin-bottom: 8px; }
.sndpanel .sp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sndpanel .sp-role { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; cursor: pointer; background: rgb(255 255 255 / .35); border: 1px solid rgb(0 0 0 / .25); color: inherit; }
.sndpanel .sp-role span { font-size: 18px; line-height: 1; }
.sndpanel .sp-role i { font: 400 11px/1.1 "RVLS Thorn", monospace; font-style: normal; text-transform: lowercase; -webkit-font-smoothing: none; }
.sndpanel .sp-role.muted { opacity: .45; }
.sndpanel .sp-role.muted::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; border-top: 2px solid #c0392b; transform: rotate(-24deg); }
.sndpanel .sp-grid.all-off .sp-role { opacity: .35; }
.sndpanel .sp-foot { margin: 8px 0 0; font-size: 12px; }
.sndpanel :focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* Settings (the display app): wrap the eight tabs; make the chosen option unmistakable in every panel. */
.win[data-app-id="display"] .tabs { flex-wrap: wrap; }
.win[data-app-id="display"] :is(.display, .chromedial) button.opt[aria-pressed="true"] { border: 2px solid var(--lo, #333); font-weight: 700; box-shadow: inset 0 0 0 1px var(--hi, #fff); }
.win[data-app-id="display"] :is(.display, .chromedial) button.opt[aria-pressed="true"]::before { content: "● "; }
.win[data-app-id="display"] .chromedial .grp { margin: 10px 0 4px; }
.win[data-app-id="display"] .effective { margin-top: 8px; font-size: 13px; }

/* Gallery cards */
.gallery2 { padding: 10px; }
.gallery2 .grp { margin: 4px 0 8px; font: 400 13px/1.15 "RVLS Thorn", monospace; text-transform: lowercase; -webkit-font-smoothing: none; }
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.gcard { margin: 0; display: grid; gap: 6px; }
.gcard .gview { padding: 0; border: 1px solid rgb(0 0 0 / .35); cursor: zoom-in; background: #000; }
.gcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gcard figcaption { font-size: 13px; }
.gcard .gnote { font: 400 12px/1 "RVLS Thorn", monospace; opacity: .6; }

/* Skip link (dissection §3.11): first tab stop, visible only on focus. */
.skip { position: absolute; left: -9999px; top: 6px; z-index: 10000; padding: 6px 10px; background: #0c0a16; color: #e9e3f2; font: 400 13px/1 "RVLS Thorn", monospace; text-transform: lowercase; }
.skip:focus { left: 6px; }