* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #fff; color: #000; }
body { font-family: Arial, sans-serif; }
main { min-height: 100svh; display: grid; place-items: center; padding: 32px; }
.logo { width: min(62vw, 760px); }
.logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.ink { stroke-dasharray: 1; stroke-dashoffset: 1; animation: write var(--duration) linear var(--delay) forwards; }
.descriptor { opacity: 0; animation: appear .65s ease 4.7s forwards; }
.replay { position: fixed; bottom: 25px; right: 28px; padding: 10px 4px; border: 0; background: transparent; color: #777; font: 11px Arial, sans-serif; letter-spacing: .04em; cursor: pointer; }
.replay span { margin-left: 5px; font-size: 15px; }
.replay:hover { color: #000; }
.replay:focus-visible { outline: 1px solid #000; outline-offset: 5px; }
@keyframes write { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@media (max-width: 600px) { main { padding: 24px; } .logo { width: 86vw; } .replay { bottom: 18px; right: 20px; } }
@media (prefers-reduced-motion: reduce) { .ink { animation: none; stroke-dashoffset: 0; } .descriptor { animation: none; opacity: 1; } .replay { display: none; } }
.logo { position: relative; will-change: transform; }
.water { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.descriptor { animation-delay: 2.8s; }
.pixel-ready .descriptor { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .water { display: none; } .pixel-ready .descriptor { visibility: visible; } }
.logo { width: min(28.08vw, 345.6px); }
.music { position: fixed; left: 28px; bottom: 25px; border: 0; background: transparent; color: #777; padding: 10px 4px; font: 11px Arial, sans-serif; letter-spacing: .04em; cursor: pointer; }
.music:hover, .music[aria-pressed="true"] { color: #000; }
.music:focus-visible { outline: 1px solid #000; outline-offset: 5px; }
@media (max-width: 600px) { .logo { width: 41.76vw; } .music { left: 20px; bottom: 18px; } }
.logo svg { position: relative; }
.game-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.game-start { position: absolute; top: 28%; left: 25%; width: 44%; height: 54%; border: 0; background: transparent; cursor: pointer; border-radius: 40%; color: transparent; touch-action: none; }
.game-start:focus-visible { outline: 1px dashed #777; outline-offset: 3px; }
.game-status { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%); width: 260px; text-align: center; font: 10px Arial, sans-serif; letter-spacing: .05em; color: #888; }
.game-exit { border: 0; background: transparent; color: #777; font: inherit; cursor: pointer; padding: 8px; }
.game-active { touch-action: none; }
.architecture-column { position: absolute; left: 48.9%; top: 85.2%; display: flex; flex-direction: column; align-items: center; font: bold clamp(7px, 1.05vw, 13px)/1.45 Arial, sans-serif; pointer-events: none; }
.architecture-column span { display: block; opacity: var(--reveal, 0); transform: translate(calc((1 - var(--reveal, 0)) * 10px), calc((1 - var(--reveal, 0)) * var(--i) * -5px)); filter: blur(calc((1 - var(--reveal, 0)) * 3px)); }

@media (max-width: 600px) { .architecture-column { font-size: clamp(7px, 1.55vw, 10px); } }
.architecture-column canvas { width: clamp(10px, 1.4vw, 17px); height: auto; image-rendering: pixelated; opacity: var(--reveal, 0); }

.architecture-column { left: -11.416%; top: -26.738%; width: 122.831%; height: 294.118%; display: block; pointer-events: none; }
.architecture-column canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; opacity: var(--reveal, 0); }
@media (prefers-reduced-motion: reduce) { .architecture-column { display: none; } }

.game-status { position: fixed; top: auto; bottom: 35px; left: 50%; transform: translateX(-50%); width: auto; white-space: nowrap; }
@media (max-width: 600px) { .game-status { bottom: 28px; font-size: 9px; } }

.descriptor { stroke: white; stroke-width: .7; stroke-linejoin: round; paint-order: fill stroke; }

.architecture-column { height: 374.332%; }
.letter-nav { position: absolute; inset: 0; pointer-events: none; }
.nav-letter { position: absolute; top: 82%; width: 5%; height: 19%; transform: translateX(-50%); border: 0; background: transparent; color: transparent; padding: 0; cursor: pointer; pointer-events: auto; }
.nav-letter:focus-visible { outline: 1px solid #777; outline-offset: 5px; }
.menu-hint { position: absolute; width: 180px; left: 50%; top: calc(100% + 22px); transform: translateX(-50%); text-align: center; font-size: 9px; color: #aaa; opacity: 0; animation: appear .6s ease 5s forwards; pointer-events: none; }
.menu-discovered .menu-hint { display: none; }
.explore { display: none; }
.section-panel { width: min(760px, calc(100vw - 40px)); max-height: 85svh; padding: 55px; border: 1px solid #ddd; background: #fff; color: #000; }
.section-panel::backdrop { background: rgba(255,255,255,.88); backdrop-filter: blur(8px); }
.panel-close { position: absolute; right: 22px; top: 18px; padding: 8px; background: none; border: 0; font-size: 11px; cursor: pointer; }
.panel-kicker { font-size: 10px; letter-spacing: .12em; color: #777; }
.panel-kicker span { margin-left: 12px; color: #aaa; }
.section-panel h1 { font-weight: 400; font-size: clamp(28px, 5vw, 48px); letter-spacing: -.04em; margin: 28px 0; }
.section-content { font-size: 14px; line-height: 1.7; color: #777; }
.project-slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 30px; }
.project-slot { aspect-ratio: 4 / 5; display: grid; place-items: center; background: #f6f6f6; border: 1px solid #eee; font-size: 10px; color: #aaa; }
@media (max-width: 600px) {
  .explore { display: block; position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); border: 0; background: #fff; padding: 12px; color: #777; font-size: 10px; }
  .menu-hint { display: none; }
  .letter-nav { display: none; }
  .mobile-menu-open .letter-nav { display: grid; position: fixed; inset: auto 20px 112px; padding: 14px; gap: 4px; background: #fff; border: 1px solid #ddd; z-index: 5; grid-template-columns: 1fr 1fr; pointer-events: auto; }
  .mobile-menu-open .nav-letter { position: static; width: auto; height: 44px; transform: none; color: #222; font-size: 11px; }
  .logo.game-active { width: 80vw; }
  .game-active .explore { display: none; }
  .section-panel { padding: 42px 24px; }
  .project-slots { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .explore { position: absolute; top: calc(100% + 20px); bottom: auto; white-space: nowrap; }
  .mobile-menu-open .letter-nav { position: absolute; inset: auto; top: calc(100% + 65px); left: 50%; width: min(300px, 86vw); transform: translateX(-50%); }
}

.game-status { transition: opacity .5s ease, filter .5s ease, transform .5s ease; transform-origin: center; }
.label-visible .game-status { opacity: 0; filter: blur(4px); transform: translateX(-50%) scale(.85) translateY(4px); pointer-events: none; }
.menu-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .game-status { transition: none; } }