/* app.css — the haunted ground layout shell + Tarro screen styles.
   Everything inside a window comes from /ds/bevel.css. The size tokens are re-tuned here for phones
   (base 16px) and laptops (base 18px); the bevel recipes and colours are untouched. */

html, body { margin: 0; min-height: 100%; }
body { background: #241509; overflow-x: hidden; }

/* ---------- type and control scale ---------- */
.os-root { --size-ui: 13px; --size-caption: 14px; --size-welcome: 15px; --leading-ui: 1.4; --measure-dialog: 62ch;
  --h-button: 30px; --w-button-min: 84px; --h-field: 28px; --sz-glyph: 15px; --h-title: 30px; --sz-caption-btn: 22px; --h-status: 24px;
  --margin-dialog: 11px; --gap-unrelated: 7px; --gap-group: 11px; --pad-group: 9px; --gap-button: 7px; }
@media (min-width: 900px) {
  .os-root { --size-ui: 18px; --size-caption: 18px; --size-welcome: 20px;
    --h-button: 38px; --w-button-min: 100px; --h-field: 36px; --sz-glyph: 18px; --h-title: 36px; --sz-caption-btn: 26px; --h-status: 28px;
    --margin-dialog: 16px; --gap-unrelated: 10px; --gap-group: 14px; --pad-group: 13px; }
  .os-root .ico { width: 18px; height: 18px; }
  .os-root .ico--24 { width: 26px; height: 26px; }
  .os-root .ico--32 { width: 32px; height: 32px; }
  .os-root .os-progress { height: 22px; }
}
/* bevel.css sets body, buttons and fields with the --text-ui shorthand, which :root computes once with
   11px baked in, so a bigger --size-ui on the body never reached the content. Set the font from the
   size token directly. */
.os-root, .os-root button, .os-root input, .os-root select, .os-root textarea { font: var(--size-ui)/var(--leading-ui) var(--font-ui); }
.os-root kbd { font: calc(var(--size-ui) + 1px)/var(--leading-ui) var(--font-mono); }
/* fixed pixel metrics in bevel.css that have to follow the larger type */
.os-root .os-btn { padding: 0 14px; }
.os-root .os-list__head { height: calc(var(--size-ui) + 12px); }
.os-root .os-list__row { height: auto; min-height: calc(var(--size-ui) + 12px); }
.os-root .os-list__cell { padding: 2px 8px; }
.os-root .os-statusbar { padding: 3px; }
.os-root .os-statusbar__cell { height: calc(var(--h-status) - 6px); }
.os-root .os-group { margin-top: calc(var(--size-ui) * .6); }
.os-root .os-group__label { top: calc(var(--size-ui) * -0.65); padding: 0 4px; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-root .os-progress { height: 22px; }
.os-root .os-check__tick { width: 6px; height: 11px; }
.os-root .os-check__dot { width: 8px; height: 8px; }
.os-root .os-balloon { max-width: none; padding: 10px 12px; }
.os-root .os-balloon__close { width: 20px; height: 20px; font-size: 14px; }
.os-root .os-msgbox__text { padding-top: 4px; }
/* bevel.css widens every button's touch target by reshaping its ::after box, which is the same box that
   draws the default-button ring, so phones showed a small blue square in the middle of the default button.
   Buttons are 36px tall here, so the ring gets its full box back. */
@media (pointer: coarse) { .os-root .os-btn::after { inset: 0; width: auto; height: auto; transform: none; } }

/* ---------- haunted ground ---------- */
.ground { position: relative; overflow: hidden; overflow: clip; min-height: 100vh; min-height: 100dvh; background: #241509;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.ground > .g-planks, .ground > .g-grain, .ground > .g-moon, .ground > .g-vignette, .ground > .g-fog, .ground > .g-stone, .ground > .g-web, .ground > .g-thread, .ground > .g-decal { position: absolute; pointer-events: none; }
.g-planks { inset: 0; background: repeating-linear-gradient(90deg, #3E2817 0 76px, #2C1B0F 76px 79px, #472E1B 79px 155px, #22140A 155px 158px); }
.g-grain { inset: 0; background: repeating-linear-gradient(180deg, rgba(0,0,0,.13) 0 2px, rgba(0,0,0,0) 2px 7px); }
.g-moon { inset: 0; background: radial-gradient(circle 150px at 82% 11%, rgba(253,218,114,.26) 0%, rgba(253,218,114,.07) 55%, rgba(253,218,114,0) 72%); }
.g-vignette { inset: 0; background: radial-gradient(118% 82% at 50% 40%, rgba(0,0,0,0) 22%, rgba(0,0,0,.52) 60%, rgba(0,0,0,.88) 100%); }
.g-fog { left: 0; right: 0; bottom: 0; height: 130px; background: linear-gradient(0deg, rgba(126,116,98,.26) 0%, rgba(126,116,98,.10) 45%, rgba(126,116,98,0) 100%); }
.g-stone { top: 0; bottom: 0; width: 22px; }
.g-stone--l { left: 0; background: repeating-linear-gradient(180deg, #6A6A6A 0 24px, #3F3F3F 24px 26px, #585858 26px 50px, #3F3F3F 50px 52px); box-shadow: inset -2px 0 0 rgba(0,0,0,.55), 2px 0 6px rgba(0,0,0,.6); }
.g-stone--r { right: 0; background: repeating-linear-gradient(180deg, #585858 0 24px, #3F3F3F 24px 26px, #6A6A6A 26px 50px, #3F3F3F 50px 52px); box-shadow: inset 2px 0 0 rgba(0,0,0,.55), -2px 0 6px rgba(0,0,0,.6); }
.g-web--l { left: 22px; top: 0; width: 170px; height: 170px; background: repeating-radial-gradient(circle at 0 0, rgba(0,0,0,0) 0 15px, rgba(226,226,222,.20) 15px 16px), repeating-conic-gradient(from 0deg at 0 0, rgba(226,226,222,.17) 0 .7deg, rgba(0,0,0,0) .7deg 11deg); }
.g-web--r { right: 22px; top: 0; width: 150px; height: 150px; background: repeating-radial-gradient(circle at 100% 0, rgba(0,0,0,0) 0 15px, rgba(226,226,222,.16) 15px 16px), repeating-conic-gradient(from 90deg at 100% 0, rgba(226,226,222,.14) 0 .7deg, rgba(0,0,0,0) .7deg 11deg); }
.g-thread { left: 24px; top: 4px; width: 1px; height: 104px; background: rgba(226,226,222,.28); }
.g-decal { display: block; background-color: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.g-decal--moon { right: 30px; top: 24px; width: 32px; height: 32px; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 2h-4v2H9v2H7v2H5v2H3v6h2v2h2v2h2v2h2v2h6v-2h-2v-2H9v-2H7V8h2V6h2V4h2V2h2zm2 18h4v-2h-4v2zm0-2v-2h2v2h-2zm0-10h2v2h-2V8zm4 0V6h-4v2h4z'/%3E%3C/svg%3E"); }
.g-decal--star { left: 18px; top: 104px; width: 16px; height: 16px; opacity: .9; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v5h5v2h-2v2h2v2h-2v2h2v5h-2v-2h-2v-2h-2v2h-2v2H9v2H7v-2h2v-5H7v-2h2v-2H7V9h2V7h2z'/%3E%3C/svg%3E"); }
.g-decal--eye { right: 120px; top: 96px; width: 16px; height: 16px; opacity: .6; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6h8v2h2v2h2v2h2v2h-2v2h-2v2h-2v2H8v-2H6v-2H4v-2H2v-2h2v-2h2V8h2zm2 4h4v4h-4z'/%3E%3C/svg%3E"); }
.g-decal--music { left: 32px; bottom: 104px; width: 24px; height: 24px; opacity: .72; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h10v2h-2v12h-2v2h-4v2H8v-2H6v-2h2v-2h4V4h-2zM6 14h2v2H6zm-2 4h2v2H4z'/%3E%3C/svg%3E"); }
.g-decal--key { right: 34px; bottom: 128px; width: 24px; height: 24px; opacity: .72; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8v2h2v8h-2v2h-2v2h-2v2H8v2H6v2H2v-4h2v-2h2v-2h2v-2H6v-2H4V4h2zm0 4v4h4V6H6z'/%3E%3C/svg%3E"); }

/* masthead: the site name, pixel type, on every screen */
.g-mast { position: relative; z-index: 1; text-align: center; padding: 178px 30px 8px; }
.os-root .g-mast__title, .os-root .g-mast__title:visited, .os-root .g-mast__title:hover { display: inline-block; color: #D8402A; text-decoration: none;
  font: 400 60px/1 "MedievalSharp", "Trebuchet MS", serif; text-shadow: 3px 3px 0 #3A0A04, 0 0 22px rgba(216,64,42,.5); }
.os-root .g-mast__title:focus-visible { outline: 2px dotted #FDDA72; outline-offset: 8px; }

/* the slot: windows centre in the space left under the masthead, and the page scrolls when they are taller */
.g-slot { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 24px 30px 96px; }
.g-slot > * { margin-top: auto; margin-bottom: auto; }
.g-footer { position: relative; z-index: 1; padding: 0 30px 16px; text-align: center; font: 12px/1.4 var(--font-ui); }
.g-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.g-footer__links a { color: #FFFFFF; text-decoration: underline; }
.os-root .g-footer__note { margin: 5px 0 0; color: #E3DDD0; text-shadow: 1px 1px 0 rgba(0,0,0,.8); max-width: none; }
@media (min-width: 900px) {
  .g-mast { padding: 48px 40px 18px; }
  .os-root .g-mast__title, .os-root .g-mast__title:visited, .os-root .g-mast__title:hover { font-size: 104px; text-shadow: 5px 5px 0 #3A0A04, 0 0 38px rgba(216,64,42,.5); }
  .g-web--l { width: 340px; height: 340px; background: repeating-radial-gradient(circle at 0 0, rgba(0,0,0,0) 0 21px, rgba(226,226,222,.20) 21px 22px), repeating-conic-gradient(from 0deg at 0 0, rgba(226,226,222,.17) 0 .5deg, rgba(0,0,0,0) .5deg 9deg); }
  .g-web--r { width: 300px; height: 300px; background: repeating-radial-gradient(circle at 100% 0, rgba(0,0,0,0) 0 21px, rgba(226,226,222,.16) 21px 22px), repeating-conic-gradient(from 90deg at 100% 0, rgba(226,226,222,.14) 0 .5deg, rgba(0,0,0,0) .5deg 9deg); }
  .g-thread { height: 210px; }
  .g-decal--star { left: 26px; top: 220px; width: 22px; height: 22px; }
  .g-decal--eye { right: 240px; top: 200px; width: 22px; height: 22px; }
  .g-slot { padding: 24px 40px 110px; }
  .g-footer { padding: 0 40px 18px; font-size: 13px; }
  .g-footer__links { gap: 16px; }
}

/* ---------- windows ---------- */
.win { width: 100%; max-width: 290px; }
.win--compact { max-width: 260px; }
.win .os-window__content { padding: var(--margin-dialog); display: flex; flex-direction: column; gap: var(--gap-unrelated); }
.win .os-window__content > p, .win .os-group > p { margin: 0; }
.win .os-group { display: flex; flex-direction: column; gap: var(--gap-unrelated); }
.win .os-group--related { gap: 5px; }
.win .os-group > .os-buttonrow { margin-top: 4px; }
.muted { color: var(--dk-shadow-3d); }
.disabled-text { color: var(--text-disabled); }
.os-root .welcome { margin: 0; font: 700 var(--size-welcome)/1.3 var(--font-welcome); }
.btn-full { width: 100%; }
.btn-pair { display: flex; gap: var(--gap-button); }
.btn-pair .os-btn { flex: 1; min-width: 0; }
.centered { justify-content: center; text-align: center; }
.iconrow { display: flex; align-items: flex-start; gap: 8px; }
.iconrow--center { align-items: center; flex-wrap: wrap; }
.iconrow--center > a { white-space: nowrap; margin-left: auto; }
.iconrow__grow { flex: 1 1 auto; white-space: nowrap; }
.iconrow p { margin: 0; }
.label { margin-bottom: -4px; }
.field-row { display: flex; gap: 6px; }
.field-row .os-field { flex: 1; width: 100%; }
.stack { display: flex; flex-direction: column; gap: 3px; }
.radios { display: flex; gap: 14px; flex-wrap: wrap; }
.os-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.os-check input:not(:checked) + .os-check__glyph > * { display: none; }
.os-list--plain .os-list__cell:first-child { flex: 1; }
.os-list__cell--artist { width: 104px; color: var(--dk-shadow-3d); }
.os-list__head .os-list__col:first-child { flex: 1; }
.os-list__head .os-list__col--artist { width: 104px; border-right: 0; }
.list-scroll { max-height: 200px; }
.os-msgbox__text p { margin: 0 0 var(--gap-unrelated); }
.os-msgbox__text p:last-child { margin: 0; }
.msg-steps { margin: 0; padding: 0; }
.msg-steps li { list-style: none; }

/* landing: the note, written straight on the ground */
.landing { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: calc(100% - 100px); text-align: center; }
.os-root .landing__spot { margin: 0; font: 700 21px/1.3 var(--font-ui); color: #E8A82E; text-shadow: 1px 1px 0 #2A1608; }
.landing__prose { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.os-root .landing__prose p { margin: 0; max-width: none; font: 18px/1.5 var(--font-ui); color: #FFFFFF; text-shadow: 1px 1px 0 rgba(0,0,0,.9); text-align: center; }
.os-root .landing .os-btn { margin-top: 6px; font-size: 18px; height: auto; min-height: 40px; padding: 4px 20px; }
@media (min-width: 900px) {
  .landing { max-width: 660px; gap: 18px; }
  .os-root .landing__spot { font-size: 26px; }
  .os-root .landing__prose p { font-size: 22px; line-height: 1.55; }
  .os-root .landing .os-btn { font-size: 22px; min-height: 48px; padding: 6px 26px; }
}

/* portraits */
.portraits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.portrait { width: 100%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--window); overflow: hidden; }
.portrait--locked { background: #716F64; color: #fff; }
.portrait img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.portrait__cap { font-weight: 700; text-align: center; margin-top: 4px; }
.portrait__sub { text-align: center; }
.match-head { display: flex; gap: 12px; align-items: flex-start; }
.match-head .portrait { width: 104px; height: 104px; flex: none; }
.match-head__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.match-head__text .etched-h { margin: 3px 0; }
.desc p { margin: 0; white-space: pre-line; }
.result-card { display: flex; flex-direction: column; }
.result-card__name { font-weight: 700; font-size: calc(var(--size-ui) * 1.27); line-height: 1.25; }
.result-card__show { line-height: 1.35; }
.os-root .result-card__desc { margin: 5px 0 0; max-width: none; line-height: 1.3; white-space: pre-line; text-wrap: wrap; }

/* icons drawn inline (the design system's icon SVG assets are not shipped) */
.ico { display: inline-block; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.ico--24 { width: 24px; height: 24px; }
.ico--32 { width: 32px; height: 32px; }
.ico--lock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v2h2v6h2v12H5V10h2V4h2zm0 4v4h6V6H9zm2 8v4h2v-4z'/%3E%3C/svg%3E"); }
.ico--check { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h2v2h-2v2h-2v2h-2v2h-2v2h-2v2h-2v-2H8v-2H6v-2H4v-2h2v2h2v2h2v-2h2v-2h2v-2h2V8h2V6z'/%3E%3C/svg%3E"); }
.ico--close { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h2v2h2v2h2v2h2V9h2V7h2V5h2v2h-2v2h-2v2h-2v2h2v2h2v2h2v2h-2v-2h-2v-2h-2v-2h-2v2H9v2H7v2H5v-2h2v-2h2v-2h2v-2H9V9H7V7H5z'/%3E%3C/svg%3E"); }
.ico--music { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h10v2h-2v12h-2v2h-4v2H8v-2H6v-2h2v-2h4V4h-2zM6 14h2v2H6zm-2 4h2v2H4z'/%3E%3C/svg%3E"); }
.ico--info { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18v18H3zm2 2v14h14V5zm6 2h2v2h-2zm0 4h2v6h-2z'/%3E%3C/svg%3E"); }
.ico--image { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18v18H3zm2 2v10h2v-2h2v-2h2v2h2v-2h2v-2h2v2h2V5zm0 12v2h14v-2h-2v-2h-2v2h-2v2h-2v-2H9v-2H7v2zM7 7h4v4H7z'/%3E%3C/svg%3E"); }
.ico--warn { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v2h2v4h2v4h2v4h2v4h2v2H2v-2h2v-4h2v-4h2V8h2V4h2zm0 6v6h2V8zm0 8v2h2v-2z'/%3E%3C/svg%3E"); }
.ico--error { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v2h2v2h2v10h-2v2h-2v2H7v-2H5v-2H3V7h2V5h2zm2 4h2v2h2V7h2v2h-2v2h2v2h-2v2h2v2h-2v-2h-2v2H9v-2h2v-2H9v-2h2V9H9z'/%3E%3C/svg%3E"); }
.ico--blue { color: var(--icon-blue); } .ico--green { color: var(--icon-green); } .ico--red { color: var(--icon-red); }
.ico--folder { color: var(--icon-folder-b); } .ico--chrome { color: #fff; } .ico--warncol { color: var(--icon-folder-b); }

/* balloon under the connect window */
.balloon-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 290px; }
.balloon-wrap .os-balloon { margin-left: auto; margin-right: auto; }
.os-balloon ol { margin: 0; }

/* progress marquee frozen under reduced motion */
@media (prefers-reduced-motion: reduce) { .os-progress--marquee .os-progress__fill { animation: none; width: 40%; left: 30%; } }

/* legal pages */
.doc-page { width: 100%; max-width: 290px; }
.doc-page .os-window__content { padding: var(--margin-dialog); max-height: 70vh; }
.doc-page h2 { margin: 7px 0 3px; }

/* laptop: roomier windows */
@media (min-width: 900px) {
  .win, .balloon-wrap, .doc-page { max-width: 608px; }
  .os-list__cell--artist, .os-list__head .os-list__col--artist { width: 180px; }
  .match-head .portrait { width: 140px; height: 140px; }
  .list-scroll { max-height: 240px; }
}

/* ---------- results page ---------- */
.results { display: flex; flex-direction: column; gap: var(--gap-group); }
.results > * { min-width: 0; }
.results .os-group { margin: 0; }
@media (min-width: 900px) {
  .win--wide { max-width: 608px; }
  .win--compact { max-width: 450px; }
  .results { flex-direction: row; align-items: stretch; }
  .results > * { flex: 1; }
  .btn-pair { justify-content: flex-end; }
  .btn-pair .os-btn { flex: 0 0 auto; }
}
/* "blast" card, used when PHOTOS = "on" */
.blast { background: #FFFFFF; color: #1a1a1a; border-radius: 14px; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.blast__label { font: calc(var(--size-ui) - 3px)/1.2 var(--font-ui); color: #6a6a6a; text-transform: uppercase; letter-spacing: .06em; }
.blast__title { font: 700 calc(var(--size-ui) + 6px)/1.2 var(--font-welcome); text-align: center; }
.blast__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: #eee; display: block; }
.blast__img--empty { display: flex; align-items: center; justify-content: center; }
.blast__source { text-align: center; color: #555; }
.blast__text { margin: 0; white-space: pre-line; }
.blast__sig { align-self: flex-end; font: 700 calc(var(--size-ui) - 2px)/1.2 var(--font-welcome); color: #1BA8B4; }