:root {
  color-scheme: dark;
  --ink: #f5efe3;
  --muted: rgba(245, 239, 227, .68);
  --accent: #d6a45d;
  --shade: rgba(16, 13, 10, .62);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #17130f; }
body { color: var(--ink); font-family: Georgia, "Noto Serif Thai", serif; }

.screensaver { min-height: 100vh; min-height: 100svh; position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #3a2c1e, #17130f 72%); }
.board-stage { width: min(92vw, 92vh, 980px); width: min(92vw, 92svh, 980px); aspect-ratio: 1; filter: drop-shadow(0 24px 46px rgba(0,0,0,.34)); }
.board { position: relative; width: 100%; height: 100%; background: url("assets/igoban.png") center / contain no-repeat; }
.stone { position: absolute; width: 5.5%; height: 5.5%; transform: translate(-50%, -50%); object-fit: contain; }
.stone--black, .stone--white { display: block; visibility: visible; opacity: 1; z-index: 1; }
.stone--new { animation: arrive 900ms cubic-bezier(.2,.75,.25,1) both; }
.last-move-marker { position: absolute; width: 1.15rem; height: 1.15rem; transform: translate(-50%, -50%); border: .18rem solid rgba(255, 244, 232, .92); border-radius: 50%; background: #b3261e; box-shadow: 0 0 .8rem rgba(179, 38, 30, .8); pointer-events: none; z-index: 3; }
@keyframes arrive { from { opacity: 0; transform: translate(-50%, -50%) scale(.55); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.veil { position: absolute; inset: 0; padding: clamp(1.3rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; background: linear-gradient(90deg, rgba(16,13,10,.64), transparent 44%, rgba(16,13,10,.08)); transition: opacity .6s ease; }
.screensaver.idle .veil { opacity: 0; }
.intro, .meta, .controls, .hint { pointer-events: auto; }
.art-kicker { margin: 0 0 .9rem; color: var(--accent); font: 600 .72rem/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.6rem, 7vw, 7rem); font-weight: 400; line-height: .95; letter-spacing: -.04em; }
h1 span { display: block; margin-top: .6rem; color: var(--muted); font: 400 clamp(1rem, 2vw, 1.55rem)/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.poem { margin: 2rem 0 0; color: rgba(245,239,227,.78); font-size: clamp(.98rem, 1.5vw, 1.25rem); line-height: 2; }
.meta { align-self: flex-end; text-align: right; color: var(--muted); font: .76rem/1.7 ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; }
.meta p { margin: 0; }
#game-label { color: var(--ink); }
.controls { display: flex; gap: .5rem; align-self: flex-end; }
button, .art-link { border: 1px solid rgba(245,239,227,.3); border-radius: 999px; padding: .6rem 1rem; color: var(--ink); background: rgba(20,16,12,.46); font: .72rem ui-sans-serif, system-ui, sans-serif; cursor: pointer; backdrop-filter: blur(10px); }
button:hover, button:focus-visible, .art-link:hover, .art-link:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.hint { margin: 0; color: rgba(245,239,227,.42); align-self: flex-end; font: .65rem ui-sans-serif, system-ui, sans-serif; }

.art-index { min-height: 100vh; display: grid; place-items: center; background: #f4ede1; color: #302820; }
.art-index main { max-width: 38rem; padding: 2rem; }
.art-index h1 { font-size: clamp(3rem, 10vw, 7rem); }
.art-index main > p:not(.art-kicker) { max-width: 28rem; margin: 1.5rem 0 2rem; line-height: 1.9; }
.art-index .art-kicker { color: #8d3028; }
.art-link { display: inline-block; color: #302820; background: transparent; text-decoration: none; border-color: rgba(48,40,32,.3); }

@media (max-width: 620px) {
  .board-stage { width: 100vw; width: 100svw; }
  .veil { padding: 1.2rem; }
  .poem { margin-top: 1rem; line-height: 1.75; }
  .meta { margin-bottom: 1rem; }
  .hint { display: none; }
}