/* Shared room: quiet surfaces over a geographic dot field. */
:root {
  --paper: #181818;
  --ink: #ededed;
  --mute: #ababab;
  --soft: #878787;
  --accent: #d1d1d1;
  --line: #e6e6e612;
  --surface: linear-gradient(145deg, #2a2a2a, #252525);
  --display: Georgia, 'Times New Roman', serif;
}
body.home-page, body.play-page { background: var(--paper); min-height: 100svh; isolation: isolate; }
body.home-page::before, body.play-page::before {
  content: ''; display: block; position: fixed; z-index: -1;
  inset: 0; pointer-events: none;
  background: url('./world-map.svg') center 64px / max(1160px, 112vw) auto no-repeat;
  opacity: .27;
  mask-image: linear-gradient(transparent, #000 15%, #000 65%, transparent 98%);
}
body.play-page::before { opacity: .18; background-position: center 120px; }
.shell, .page-shell { max-width: 1280px; padding: 0 clamp(22px, 5vw, 64px); margin: auto; }
.header, .site-header {
  height: 96px; display: flex; align-items: center; justify-content: space-between;
  border: 0; position: relative; z-index: 20; gap: 20px;
}
.brand, .wordmark { font-size: 24px; font-weight: 600; letter-spacing: -1.2px; white-space: nowrap; }
.brand span, .wordmark-light { color: #b5b5b5; font-weight: 300; }
.header-label { font: 10px var(--mono); color: var(--soft); letter-spacing: .17em; }
.quiet-button, .small-button, .sound-button {
  min-width: 40px; height: 38px; border: 1px solid #e8e8e812; border-radius: 50px;
  padding: 0 13px; font-size: 12px; background: #ffffff03; box-shadow: none;
  transition: background .2s, border-color .2s;
}
.quiet-button:hover, .small-button:hover, .sound-button:hover { background: #e8e8e80b; border-color: #e8e8e830; }
.header-actions { align-items: center; }
footer { border-top: 1px solid var(--line); color: var(--soft); font: 10px var(--mono); letter-spacing: .1em; padding: 26px 0; }

/* A four-object collection, with the map left visible around it. */
.portal-main { padding: 0 0 64px; }
.welcome { text-align: center; padding: 50px 0 48px; }
.welcome .eyebrow { justify-content: center; gap: 9px; margin: 0 0 22px; font-size: 10px; letter-spacing: .2em; color: #b8b8b8; }
.welcome-dot { width: 5px; height: 5px; border-radius: 50%; background: #cecece; box-shadow: 0 0 12px #d6d6d633; }
.welcome h1 { font: 400 clamp(64px, 7.4vw, 102px)/1.08 var(--display); letter-spacing: -.055em; margin: 0; color: #ededed; }
.welcome h1 em { color: #c5c5c5; font-weight: 400; }
.welcome-note { margin: 24px 0 0; font-size: 14px; line-height: 1.5; letter-spacing: .08em; color: #b1b1b1; }
.section-bar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 18px; padding: 0 2px; border: 0; }
.section-bar h2 { margin: 0; font-size: 12px; font-weight: 400; color: #b6b6b6; letter-spacing: .04em; }
.collection-count { font: 10px var(--mono); color: #8e8e8e; letter-spacing: .09em; }
.game-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.game-card {
  position: relative; overflow: hidden; min-width: 0; border: 1px solid #e8e8e813; border-radius: 18px;
  background: linear-gradient(145deg, #282828ee, #212121ee); box-shadow: 0 12px 32px #00000018;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s, background .3s;
  animation: room-arrive .6s backwards;
}
.game-card:nth-child(2) { animation-delay: .07s; }.game-card:nth-child(3) { animation-delay: .14s; }.game-card:nth-child(4) { animation-delay: .21s; }
.card-index { position: absolute; top: 20px; left: 22px; font: 10px var(--mono); color: #949494; letter-spacing: .06em; }
.card-art { height: 200px; display: flex; align-items: center; justify-content: center; padding: 38px 20px 12px; }
.card-art>div { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 22px 25px; }
.card-caption h3 { margin: 0; font-size: 23px; letter-spacing: -.045em; font-weight: 400; }
.card-caption p { margin: 8px 0 0; font-size: 11px; color: #aaaaaa; letter-spacing: .02em; }
.card-arrow { width: 31px; height: 31px; border: 1px solid #e8e8e81a; border-radius: 50%; display: grid; place-items: center; color: #cfcfcf; font-size: 18px; transition: color .3s, background .3s, transform .3s; }
.preview-blocks, .preview-snake { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; width: 132px; aspect-ratio: 1; }
.preview-blocks i, .preview-snake i { background: #dadada03; border-radius: 3px; }
.preview-blocks i.filled { background: #bebebe; box-shadow: inset 0 1px #ffffff25, 0 3px 5px #0003; }
.preview-blocks i.falling { background: #e0e0e0; }
.preview-snake i.segment { background: #aeaeae; box-shadow: inset 0 1px #ffffff19; }
.preview-snake i.head { background: #e4e4e4; position: relative; }
.preview-snake i.head::after { content: ''; width: 2px; height: 2px; border-radius: 50%; background: #3c3c3c; position: absolute; top: 4px; right: 3px; }
.preview-snake i.food { border-radius: 50%; background: #c4c4c4; transform: scale(.63); box-shadow: 0 0 12px #c4c4c425; }
.preview-merge { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; width: 117px; aspect-ratio: 1; transform: rotate(-8deg); }
.preview-merge i { display: grid; place-items: center; border-radius: 9px; background: #858585; color: #f0f0f0; font: 400 25px var(--sans); box-shadow: inset 0 1px #ffffff26, 0 3px 8px #0002; }
.preview-merge i:nth-child(2) { background: #9a9a9a; }.preview-merge i:nth-child(3) { background: #afafaf; color: #2e2e2e; }.preview-merge i:nth-child(4) { background: #d0d0d0; color: #2e2e2e; }
.preview-chroma { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 121px; aspect-ratio: 1; transform: rotate(6deg); }
.preview-chroma i { border-radius: 6px; background: #919191; box-shadow: inset 0 1px #ffffff20, 0 2px 4px #0002; }
.preview-chroma i:nth-child(5) { background: #c5c5c5; }
.home-page footer { margin-top: 0; }
@media(hover:hover) {
  .game-card:hover { transform: translateY(-6px); border-color: #d9d9d944; background: linear-gradient(145deg, #2f2f2f, #282828); }
  .game-card:hover .card-arrow { background: #cfcfcf; color: #2d2d2d; transform: rotate(5deg); }
  .game-card:hover .card-art>div { transform: translateY(-4px) rotate(0); }
}
.game-card:focus-visible { outline: 2px solid #d1d1d1; outline-offset: 5px; }
@keyframes room-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* The same room carries through to play, with an opaque board for focus. */
.play-page main { padding-top: 30px; }
.game-switcher { justify-content: center; position: relative; background: none; backdrop-filter: none; gap: 4px; padding: 2px 0 24px; border: 0; }
.switcher-label { display: none; }
.game-switcher a { font-size: 12px; padding: 9px 14px; border-radius: 30px; color: #adadad; }
.game-switcher a:hover { background: #dedede0b; box-shadow: none; }
.game-switcher a[aria-current='page'] { color: #e4e4e4; background: #dedede0e; border: 1px solid #dedede14; box-shadow: none; }
.back-link, .arcade-back { display: none; }
.play-layout, .game-layout { max-width: 1030px; gap: clamp(50px, 7vw, 100px); }
.game-intro h1, .intro h1 { font: 400 clamp(68px, 6.5vw, 90px)/1.1 var(--display); letter-spacing: -.05em; margin: 22px 0 18px; }
.game-intro .eyebrow, .intro .eyebrow { font-size: 10px; letter-spacing: .14em; color: #adadad; }
.game-subtitle { font-size: 15px; font-weight: 400; color: #c5c5c5; margin-bottom: 14px; }
.game-intro>p:not(.eyebrow), .intro-description { max-width: 290px; font-size: 14px; line-height: 1.8; color: #adadad; }
.game-help { margin-top: 30px; max-width: 340px; }
.game-help summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 20px; color: #bfbfbf; font-size: 12px; padding: 8px 0; }
.game-help summary::-webkit-details-marker { display: none; }
.game-help summary::after { content: '+'; font-size: 17px; font-weight: 300; }
.game-help[open] summary::after { content: '−'; }
.game-help summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 5px; }
.game-help .rules-list { display: block; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.game-help .rules-list li, .game-help .blocks-note { font-size: 12px; line-height: 1.8; color: #adadad; }
.game-panel, .console { background: linear-gradient(145deg, #2c2c2c, #262626); border: 1px solid #e8e8e813; border-radius: 18px; box-shadow: 0 20px 70px #00000029, inset 0 1px #ffffff03; }
.game-panel { padding: 24px; }.console { padding: 0 24px; }
.stat-label, .metric-label, .next-piece p, .console-title { color: #adadad; }
.stat-value, .metric-number { color: #e8e8e8; }
.board-container, .board-wrap, .blocks-board-wrap { background: #1c1c1c; box-shadow: inset 0 1px 4px #0006; }
.next-piece { background: #242424; }
.game-overlay, .board-overlay { background: #242424ee; }.blocks-overlay { background: #232323ee; }
.game-overlay h2, .overlay-content h2 { color: #e8e8e8; }
.game-overlay>.eyebrow, .overlay-content>.eyebrow { display: none; }
.solid-button, .primary-button { border: 1px solid #e8e8e840; background: #d3d3d3; color: #2d2d2d; box-shadow: inset 0 1px #ffffff30, 0 2px 5px #0002; border-radius: 50px; }
.direction-button, .blocks-controls button { border: 1px solid #e8e8e814; background: #292929; box-shadow: inset 0 1px #ffffff04; border-radius: 10px; color: #c9c9c9; }
.game-status, .blocks-status, .control-hint, .blocks-control-hint, .console-footnote, .console-bottom { color: #adadad; }
.game-footnote { margin-top: 32px; padding-top: 16px; font-size: 12px; }.game-footnote .mono { display: none; }
.play-page footer { margin-top: 38px; }.play-page footer>span:last-child { display: none; }
.sound-panel { background: linear-gradient(155deg, #333333, #282828); border-color: #e3e3e31c; }
.sound-option, .sound-volume-label { color: #bfbfbf; }
dialog { background: #2c2c2c; border: 1px solid #e8e8e81a; border-radius: 18px; box-shadow: 0 24px 80px #0008; }

@media(min-width:1450px) { .welcome { padding: 82px 0 82px; }.card-art { height: 250px; }.portal-main { padding-bottom: 88px; } }
@media(max-width:1000px) {
  .game-cards { gap: 12px; }.card-art { height: 195px; padding-inline: 12px; }.card-caption { padding: 12px 17px 22px; }.card-caption h3 { font-size: 21px; }
  .card-index { left: 17px; }.card-arrow { width: 27px; height: 27px; }
  .play-layout, .game-layout { gap: 42px; }
}
@media(max-width:760px) {
  .shell, .page-shell { padding: 0 24px; }.header, .site-header { height: 78px; gap: 12px; }
  .brand, .wordmark { font-size: 22px; }.site-header .wordmark { display: block; }
  .header-label { font-size: 9px; letter-spacing: .12em; }
  body.home-page::before { background-size: 1120px auto; background-position: center 68px; opacity: .22; }
  body.play-page::before { background-size: 1080px auto; background-position: center 80px; opacity: .15; }
  .welcome { padding: 56px 0 55px; }.welcome h1 { font-size: clamp(59px, 10.5vw, 77px); }
  .welcome .eyebrow { font-size: 9px; margin-bottom: 20px; }.welcome-note { margin-top: 20px; font-size: 13px; }
  .game-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .card-art { height: 200px; }.card-caption { padding: 12px 20px 22px; }.card-index { left: 20px; }
  .portal-main { padding-bottom: 44px; }.home-page footer>span:last-child { display: inline; }
  .game-switcher { justify-content: flex-start; padding: 4px 0 14px; gap: 2px; scrollbar-width: none; }.game-switcher::-webkit-scrollbar { display: none; }
  .game-switcher a { padding: 9px 11px; font-size: 12px; }
  .play-page main { padding-top: 16px; }.play-layout, .game-layout { gap: 22px; }
  .game-intro, .intro { display: block; padding: 0; }
  .game-intro h1, .intro h1 { font-size: 56px; margin: 13px 0 10px; }
  .game-subtitle { font-size: 13px; margin: 0 0 8px; }
  .game-intro>p:not(.eyebrow), .intro-description { font-size: 13px; max-width: none; margin: 0; }
  .game-help { margin-top: 9px; }.game-help .blocks-note { display: block; }
  .game-panel { padding: 18px; }.blocks-panel { padding: 16px; }.console { padding: 0 18px; }
  .game-actions { margin-top: 18px; align-items: flex-start; }.game-actions .primary-button { min-width: 168px; }
  .play-page footer { margin-top: 26px; }.sound-button { padding: 0; }
}
@media(max-width:480px) {
  .shell, .page-shell { padding: 0 20px; }.header-label { display: none; }
  .welcome { padding: 45px 0 47px; }.welcome h1 { max-width: 340px; margin: auto; font-size: 67px; line-height: 1.03; }
  .welcome h1 em { display: block; }.welcome-note { margin-top: 21px; }
  .game-cards { gap: 12px; }.game-card { border-radius: 14px; }.card-art { height: 156px; padding: 33px 10px 6px; }
  .card-index { top: 15px; left: 15px; font-size: 9px; }.card-caption { padding: 13px 15px 18px; gap: 5px; }.card-caption h3 { font-size: 21px; }.card-caption p { font-size: 10px; margin-top: 7px; }
  .card-arrow { width: 25px; height: 25px; font-size: 16px; flex-shrink: 0; }
  .preview-blocks, .preview-snake { width: 103px; gap: 3px; }.preview-merge { width: 90px; gap: 5px; }.preview-merge i { font-size: 22px; border-radius: 7px; }.preview-chroma { width: 93px; gap: 4px; }
  footer { font-size: 8px; padding: 22px 0; letter-spacing: .06em; }
  .site-header .header-actions { gap: 5px; }.site-header .small-button { padding: 0 11px; }
  .game-actions .primary-button { min-height: 44px; }
}
@media(max-width:360px) {
  .shell, .page-shell { padding: 0 16px; }.card-caption { padding-inline: 12px; }.card-caption h3 { font-size: 19px; }.card-arrow { width: 21px; height: 21px; font-size: 14px; }
  .card-art { height: 144px; }.preview-blocks, .preview-snake { width: 93px; }.preview-merge { width: 82px; }.preview-chroma { width: 83px; }
  .site-header .wordmark { font-size: 20px; }.site-header .small-button { min-width: 35px; padding: 0 9px; }
}
@media(prefers-reduced-motion:reduce) { .game-card, .card-art>div, .card-arrow { animation: none!important; transition: none!important; transform: none!important; } }