/* Art Haiku. A Swiss (Helvetica) design after the Kunstmuseum St.Gallen identity:
   white ground, black Helvetica, a connected handwritten word mark, the house name in serif
   capitals always at the bottom edge, one red accent.
   Contrast: --ink on --paper 21:1; --muted 6.7:1; --red #e00000 4.9:1. */
:root {
  --paper: #ffffff; --ink: #000000; --muted: #5c5c5c; --grey: #c7c7c8; --red: #e00000;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hand: "Cedarville Cursive", "Snell Roundhand", "Segoe Script", cursive;
  --serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --foot: calc(3.25rem + env(safe-area-inset-bottom));
}
@media (prefers-color-scheme: dark) {
  .kmsg, .house img { filter: invert(1); }
  :root { --paper: #0c0c0c; --ink: #f4f4f4; --muted: #a8a8a8; --grey: #3a3a3a; --red: #ff5a4f; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 400 1rem/1.45 var(--sans); -webkit-text-size-adjust: 100%; }
h1, h2, p, figure { margin: 0; }
a { color: inherit; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ah { max-width: 32rem; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) var(--foot) max(16px, env(safe-area-inset-left)); }

/* The house name, always at the bottom edge */
.house { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; background: var(--paper);
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  text-align: center; line-height: 0; }
.house img { display: inline-block; width: min(300px, 80%); height: auto; }
.on-cover .house img { width: 100%; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: max(0.5rem, env(safe-area-inset-top)); min-height: 3rem; }
.home { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.95rem; }
.langs { display: flex; gap: 0.25rem; }
.langs button, .link { font: 400 0.95rem var(--sans); color: var(--ink); background: none; border: 0; min-height: 44px; min-width: 44px; padding: 0.4rem 0.6rem; cursor: pointer; }
.langs button[aria-pressed="true"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.link { text-decoration: underline; text-underline-offset: 0.2em; padding-inline: 0; }

/* Cover: no picture, the word mark very large and centred */
.cover { min-height: calc(var(--screen, 100svh) - var(--foot)); display: flex; flex-direction: column; }
.cover-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.1rem; padding-block: 1rem 2rem; }
.kmsg { display: block; width: auto; height: min(40svh, 26rem); max-width: 100%; margin-bottom: 0.25rem; }
.mark { font: 400 clamp(2.6rem, 12vw, 3.6rem)/1 var(--hand); color: var(--ink); -webkit-text-stroke: 0.035em currentColor; letter-spacing: 0; }
.claim { font-size: clamp(1.5rem, 6.6vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-top: 0.4rem; }
.intro { font-size: 1.05rem; line-height: 1.4; max-width: 22rem; }
.start { font: 700 1.3rem var(--sans); letter-spacing: -0.01em; color: var(--ink); background: none; border: 0; min-height: 48px; padding: 0.5rem 1rem; cursor: pointer; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 0.3em; }

/* Game */
.game { min-height: calc(var(--screen, 100svh) - var(--foot)); display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 0.5rem; }
.game[hidden], .cover[hidden] { display: none; }
.mini-mark { font: 400 1.9rem/1 var(--hand); -webkit-text-stroke: 0.03em currentColor; }
.stage { position: relative; flex: 1; min-height: 16rem; max-height: 30rem; overflow: hidden; touch-action: pan-y; }
.haiku { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  font-size: clamp(1.45rem, 6.6vw, 2.05rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; padding: 0 0.25rem; }
.pic { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.pic img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.pic.fit-cover img { object-fit: cover; }
.is-picture .pic { opacity: 1; visibility: visible; }
.is-picture .haiku { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .haiku { transition: opacity 0.9s ease; }
  .pic { transition: opacity 0.9s ease, visibility 0s; }
  .is-lines .pic, .cut .pic, .cut .haiku { transition: none; }
}
.label { text-align: center; }
.no { font-size: 0.82rem; font-weight: 700; color: var(--red); letter-spacing: 0.02em; }
.who { font-size: 1rem; margin-top: 0.15rem; }
.artist { font-weight: 700; }
.who cite { font-style: italic; }
.note { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; }
.is-lines .label .who, .is-lines .label .note { visibility: hidden; }  /* no spoilers while guessing */

/* Simple double arrows instead of buttons with a black ground */
.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.arrow { justify-self: center; font: 400 3rem/1 var(--sans); color: var(--ink); background: none; border: 0; min-width: 64px; min-height: 64px; padding: 0 0.5rem 0.35rem; cursor: pointer; }
.arrow:disabled { color: var(--grey); cursor: default; }
.counter { text-align: center; color: var(--red); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.more { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.credit { font-size: 0.72rem; color: var(--muted); text-align: center; max-width: 22rem; margin-top: 1.5rem; }
.nojs { padding: 2rem 0; }

/* Cover: the house name as wide as possible (size set by the script to fit the screen). */
.on-cover .house { padding-block: 0.9rem calc(1rem + env(safe-area-inset-bottom)); }

/* On a computer screen: show Art Haiku inside an iPhone 14 Pro (drawn in CSS: Dynamic Island,
   black bezel, Space Black steel band, mute switch, volume and side button). On a phone nothing changes. */
.device { display: contents; }
.btn { display: none; }
@media (min-width: 48rem) and (min-height: 36rem) {
  html, body { background: #e9e9eb; }
  body { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
  .device { display: block; position: relative; padding: 4px; border-radius: 72px;
    background: linear-gradient(145deg, #5a5a5f, #2a2a2d 30%, #46464a 55%, #1f1f22 80%, #4b4b50);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25), 0 12px 24px rgba(0, 0, 0, 0.15); }
  .phone {
    --screen: min(852px, calc(100vh - 4rem - 36px));
    position: relative; width: calc(393px + 28px); height: calc(var(--screen) + 28px);
    border: 14px solid #000; border-radius: 68px; background: var(--paper);
    overflow: hidden;
    transform: translateZ(0);   /* keeps the house name fixed to the phone, not to the window */
  }
  .phone::before {             /* Dynamic Island */
    content: ""; position: absolute; top: 11px; left: 50%; width: 124px; height: 36px; translate: -50% 0;
    background: #000; border-radius: 20px; z-index: 3; pointer-events: none;
  }
  .btn { display: block; position: absolute; width: 4px; background: linear-gradient(90deg, #2a2a2d, #5d5d62 50%, #2a2a2d); }
  .btn.mute { left: -3px; top: 168px; height: 32px; border-radius: 2px 0 0 2px; }
  .btn.vol-up { left: -3px; top: 228px; height: 64px; border-radius: 2px 0 0 2px; }
  .btn.vol-down { left: -3px; top: 306px; height: 64px; border-radius: 2px 0 0 2px; }
  .btn.power { right: -3px; top: 260px; height: 100px; border-radius: 0 2px 2px 0; }
  .ah { height: 100%; overflow-y: auto; max-width: none; padding-inline: 18px; scrollbar-width: none; }
  .ah::-webkit-scrollbar { display: none; }
  .ah .topbar { padding-top: 50px; }
  .kmsg { height: calc(var(--screen) * 0.42); }
  .cover-center { min-height: 0; }
  .mark { font-size: 3.4rem; }
  .haiku { font-size: 1.6rem; }
  .claim { font-size: 1.75rem; }
  .house { position: absolute; padding-bottom: 1.1rem; }
}
@media (min-width: 48rem) and (min-height: 36rem) and (prefers-color-scheme: dark) {
  html, body { background: #1c1c1c; }
}
@media (max-height: 700px) and (max-width: 47.99rem) {
  .kmsg { height: 33svh; }
  .cover-center { gap: 0.6rem; padding-block: 0.25rem 0.75rem; }
  .claim { font-size: 1.4rem; }
  .intro { font-size: 0.95rem; }
  .credit { margin-top: 0.5rem; }
}

/* Poster cover, after the museum's exhibition posters: a full-bleed photo, the KM SG letters
   drawn huge across it in black, the title in white handwriting, the house name in white.
   The photo is darkened behind the white text so it stays readable (4.5:1 or more). */
.poster { position: relative; isolation: isolate; color: #fff; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left))); padding-inline: max(16px, env(safe-area-inset-left)); min-height: 100svh; overflow: hidden; }
.poster-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.poster::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.72) 100%); }
.poster-kmsg { position: absolute; inset: 3% 4% 8% 2%; width: 94%; height: 89%; z-index: -1; color: #000; pointer-events: none; }
.poster-kmsg path { stroke: #000; stroke-width: 26; stroke-linejoin: round; vector-effect: none; }
.poster .topbar { position: relative; color: #fff; }
.poster .home, .poster .langs button { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.poster-text { position: relative; margin-top: auto; padding-bottom: calc(var(--foot) + 1.75rem); display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.poster .mark { font: 400 clamp(3rem, 14vw, 4.2rem)/0.95 var(--hand); color: #fff; -webkit-text-stroke: 0.02em #fff; }
.poster .claim { font: 400 clamp(1.9rem, 9vw, 2.6rem)/1.05 var(--hand); color: #fff; letter-spacing: 0; -webkit-text-stroke: 0.015em #fff; margin-top: 0; }
.poster .intro { font-size: 1rem; color: #fff; max-width: 20rem; }
.poster .start { color: #fff; text-decoration-color: #fff; padding-left: 0; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.poster .pic-credit { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--foot) + 0.4rem); font-size: 0.68rem; color: #fff; opacity: 0.9; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.poster :focus-visible { outline-color: #fff; }
/* The house name sits on the poster in white, as on the posters. */
.on-cover .house { background: transparent; }
.on-cover .house img { filter: invert(1); }
@media (min-width: 48rem) and (min-height: 36rem) {
  .poster { min-height: var(--screen); margin-inline: -18px; padding-inline: 18px; }
  .poster .mark { font-size: 4.2rem; }
  .poster .claim { font-size: 2.5rem; }
}
.poster .pic-credit { top: calc(max(0.5rem, env(safe-area-inset-top)) + 3rem); bottom: auto; }
.poster-text { padding-bottom: calc(var(--foot) + 2.25rem); }
@media (min-width: 48rem) and (min-height: 36rem) { .poster .pic-credit { top: 96px; } }