/* Songbird's Rest, the tavern page. Linked from tavern/index.html only.
   The room is drawn as an early-1980s computer game: clean VGA-style pixel art in the site's grimdark palette,
   with the nine houses' banners in their colors, darkened. A ruled screen holds the view and the terse text below it.
   Everything is the site's bone on its ink. VT323 sets only the screen text.
   A few flames move in stepped frames, and they hold still for anyone who asks for less motion. */
@font-face { font-family:"VT323"; src:url(../fonts/vt323-latin-400-normal.woff2) format("woff2"); font-display:swap; }
:root { --dos:"VT323","Courier New",monospace; --line:var(--b); --crt:#0b0908; }

.px { image-rendering:crisp-edges; image-rendering:pixelated; }

/* ---------- The screen: panels of ink ruled apart by bone lines, as on the old games ---------- */
.screen { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; padding:0; background:var(--line); border:3px solid var(--line); box-shadow:0 0 0 5px var(--crt), 0 0 0 7px var(--line); margin:7px; }
.screen > * { background:var(--crt); }
.term { padding:.85rem 1.1rem .95rem; color:var(--b); font:400 1.6rem/1.15 var(--dos); }
.term p { margin:0; }
.term h2 { margin:0; font:inherit; color:inherit; }

/* ---------- The scene. One scene pixel is --u wide, so the moving parts stay in place at every size. ---------- */
.scene { position:relative; container-type:inline-size; aspect-ratio:320 / 200; --u:calc(100cqw / 320); }
.scene > img { position:absolute; inset:0; width:100%; height:100%; }
.scene > span { position:absolute; display:block; pointer-events:none; image-rendering:pixelated; left:calc(var(--x) * var(--u)); top:calc(var(--y) * var(--u)); background-repeat:no-repeat; background-position:0 0; }

/* ---------- The tavern: the view, a chalked line, and the notice board as a numbered menu ---------- */
.town { padding:1.75rem var(--pad) 2.5rem; }
.say .hint { margin-top:.5rem; text-transform:uppercase; letter-spacing:.04em; }

.notice { padding-bottom:1.1rem; }
.notice:focus { outline:none; }
.notice h2 { margin-bottom:.5rem; text-transform:uppercase; letter-spacing:.04em; }
.menu-list { margin:0 -.5rem; padding:0; list-style:none; }
.menu-list a { display:grid; grid-template-columns:2.2ch minmax(0,1fr); gap:0 .6ch; min-height:44px; padding:.3rem .5rem .4rem; color:var(--b); text-decoration:none; }
.menu-list .k { grid-row:span 2; }
.menu-list .t { text-transform:uppercase; letter-spacing:.02em; }
.menu-list .d { font-size:.82em; line-height:1.05; }
.menu-list a:focus-visible { outline:2px solid var(--line); outline-offset:2px; background:var(--b); color:var(--crt); }
.menu-list a:active { background:var(--b); color:var(--crt); }
@media (hover:hover) { .menu-list a:hover { background:var(--b); color:var(--crt); } }

@container broad (min-width:900px) {
  .screen.inn-screen { grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); grid-template-areas:"scene notice" "say notice"; grid-template-rows:auto 1fr; }
  .inn-screen .scene { grid-area:scene; }
  .inn-screen .say { grid-area:say; }
  .inn-screen .notice { grid-area:notice; }
}
@container broad (max-width:640px) {
  .town { padding:1rem .6rem 1.75rem; }
  .term { font-size:1.4rem; padding:.7rem .8rem .8rem; }
}

/* The room is 320 by 200 scene pixels. Its moving parts: the hearth fire, three candle flames, and the songbird. */
.rfire { --x:59; --y:143; width:calc(18 * var(--u)); height:calc(20 * var(--u)); background-image:url(../img/tavern/rfire.svg); background-size:400% 100%; animation:frames .8s step-end infinite; }
.rcandle { width:calc(3 * var(--u) * var(--s, 1)); height:calc(5 * var(--u) * var(--s, 1)); background-image:url(../img/tavern/rcandle.svg); background-size:300% 100%; animation:candle 1.4s step-end infinite; }
.rc-counter { --x:238; --y:114; }
.rc-table { --x:130.1; --y:128; --s:1.6; } /* drawn a size up, so the table candle reads at phone widths */
.c2 { animation-duration:1.7s; animation-delay:-.6s; }
.c3 { animation-duration:1.2s; animation-delay:-.3s; }
.rbird { --x:221; --y:86; width:calc(17 * var(--u)); height:calc(7 * var(--u)); background-image:url(../img/tavern/rbird.svg); background-size:400% 100%; animation:hop 7s step-end infinite; }

@keyframes frames {
  0% { background-position:0 0; } 18% { background-position:33.333% 0; } 34% { background-position:66.667% 0; }
  52% { background-position:100% 0; } 66% { background-position:33.333% 0; } 82% { background-position:66.667% 0; }
}
@keyframes candle { 0% { background-position:0 0; } 30% { background-position:50% 0; } 45% { background-position:0 0; } 70% { background-position:100% 0; } 80% { background-position:0 0; } }
@keyframes hop { 0% { background-position:0 0; } 44% { background-position:33.333% 0; } 47% { background-position:66.667% 0; } 86% { background-position:100% 0; } 89% { background-position:0 0; } }

/* ---------- The portal: four things in the room are links. Each sits over its object in scene percentages,
   and is never smaller than 44px. Hover, a first tap, or focus shows a small label plaque; only keyboard focus
   also gets a thin bone outline, so a mouse or a finger never draws a frame round the object. ---------- */
.hs { position:absolute; z-index:2; left:var(--cx); top:var(--cy); width:var(--w); height:var(--h); min-width:44px; min-height:44px; transform:translate(-50%, -50%); color:var(--b); text-decoration:none; }
.hs-world { --cx:5%; --cy:44.25%; --w:10.63%; --h:19.5%; }
.hs-photos { --cx:37.2%; --cy:43.75%; --w:12.5%; --h:12%; }
.hs-writings { --cx:34.69%; --cy:66%; --w:13.13%; --h:21%; }
.hs-chronicle { --cx:78.44%; --cy:62.25%; --w:11.25%; --h:9.5%; }
.hs-art { --cx:49.8%; --cy:44.25%; --w:10%; --h:20.5%; }
.hs-label { position:absolute; display:none; width:max-content; max-width:15rem; padding:.3rem .55rem .35rem; background:var(--crt); border:2px solid var(--b); font:400 1.15rem/1.1 var(--dos); color:var(--b); text-align:left; }
.hs-label > span { display:block; }
.hs-t { text-transform:uppercase; letter-spacing:.04em; }
.hs-go { margin-top:.2rem; color:#b8913f; }
.lb-below .hs-label { top:calc(100% + 4px); left:50%; transform:translateX(-50%); }
.lb-right .hs-label { top:0; left:calc(100% + 4px); }
.lb-left .hs-label { top:calc(100% + 4px); right:0; }
.hs:focus { outline:none; }
.hs:focus-visible { outline:2px solid var(--b); outline-offset:2px; }
.hs:focus-visible .hs-label, .hs.open .hs-label { display:block; z-index:3; }
@media (hover:hover) {
  .hs:hover .hs-label { display:block; z-index:3; }
}
@container broad (max-width:640px) { .hs-label { max-width:11rem; font-size:1.05rem; } }

/* ---------- Still frames for anyone who asks for less motion ---------- */
@media (prefers-reduced-motion:reduce) {
  .rfire, .rcandle, .rbird { animation:none !important; }
}