/* hub/css/hub.css - THE GAME HUB (/hub/, hub/index.html), on top of the World's world.css: every game on one screen.
 *
 * THE SPOTLIGHT AND THE SHELVES (Goliath, 2026-10-18: "The doors concept was good when we only had a few games. I need
 * a one page way of getting folks the ability to see their options ... optimized for each device", "I want the art on The
 * Hub to be something special and kick ass and well organized. Make this the "Oh shit what is all this" center of
 * SOTC"). The doors of 2026-10-08 became painted tiles on four SHELVES, each named for a kind of play (Battle &
 * Strategy, Nights Out, Arcade, Cozy & Clever), and THE SPOTLIGHT, one game at a time in its own painting with its name,
 * its line and a gold Play, stands beside them on a computer or an iPad held sideways and above them on an iPad held
 * upright (from 820 x 1180). js/hub-main.js turns the spotlight to the game under the pointer or the focus, and
 * through every game in turn while nobody points. A phone or a Duo has no room for it: there the shelves are the whole stage.
 *
 * ONE SCREEN, NO SCROLLING (Goliath, 2026-10-08: "a one screen look that the player can go into and see all the options
 * and not scroll"). The page is exactly the window's height: the bar, the title, THE STAGE, the links and the footer, and
 * the stage takes whatever height is left. The stage is a size container: its shape decides where the spotlight goes,
 * and THE WALL (the shelves' box, a size container too) lays the shelves as rows, one under the other, or as columns,
 * side by side on a short wide wall (a phone held sideways, a Duo part folded), whichever gives the tiles the better
 * shape. Every tile on a shelf shares its row (or column) evenly, and a tile lays out its icon and its name by its own
 * size (a size container as well): the icon beside the name on a wide tile, over it on a narrow one. Short windows drop
 * the kicker and the line under the title. A browser without container queries gets a page that scrolls, as before.
 *
 * No inline style. js/hub-main.js fills the bar's Sign in or Profile button, THE CURRENCIES strip, the ribbons and the
 * spotlight; js/hub-films.js THE FILM LIBRARY (the tab on the right edge and its sheet). Less motion: nothing drifts,
 * turns or swings, and the spotlight stays on its game.
 */

/* ---------------------------------------------------------------------------------------------- one screen */
body.hub { height: 100vh; height: 100svh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.hub .bar { position: relative; flex: none; background: rgba(7, 11, 30, 0.72); }
.bar__back {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 231, 160, .35); background: rgba(10, 14, 40, .55); color: #fff; text-decoration: none; font-size: 14px; font-weight: bold; white-space: nowrap;
  transition: border-color .2s, background .2s;
}
.bar__back:hover { border-color: var(--gold); background: rgba(30, 36, 80, .7); }
.bar__back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------------------------------------- the currencies */
/* THE CURRENCIES (Goliath, 2026-10-08: "I want the currency to show at the top for the player they have ... In a icon way
   with mouse over if they want to get the names ... make it clean looking and cool with something like "Currencies" at
   the top"): a glass pill in the bar, its gold label and four coins, each an icon and a number; the name and the whole
   number come up in a gold tag under the pointer, the keyboard's focus or a tap. On a narrow window it takes a row of
   its own under the bar. The gilt is a drawn chip (the casino draws its own in code too). */
.hub .bar { flex-wrap: wrap; row-gap: 6px; }
.purse {
  display: flex; align-items: center; gap: 8px; margin: 0 auto; padding: 3px 5px 3px 14px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(28, 34, 80, .78), rgba(10, 14, 40, .78)); border: 1px solid rgba(255, 231, 160, .3);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.purse__label { font-size: 16px; font-weight: bold; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); white-space: nowrap; }
.purse__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.purse__item {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 3px 10px 3px 4px; border-radius: 999px;
  cursor: default; outline: none; transition: background .2s;
}
.purse__item:hover, .purse__item:focus-visible { background: rgba(255, 231, 160, .14); }
.purse__item:focus-visible { box-shadow: 0 0 0 2px var(--gold-hi); }
.purse__icon { flex: none; width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); transition: transform .2s var(--ease); }
.purse__item:hover .purse__icon, .purse__item:focus .purse__icon { transform: translateY(-2px) rotate(-6deg) scale(1.08); }
.purse__n { font-size: 17px; font-weight: bold; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.purse__item::after {
  content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); z-index: 40; transform: translate(-50%, -4px);
  padding: 5px 10px; border-radius: 8px; white-space: nowrap; font-size: 16px; font-weight: bold; letter-spacing: .03em;
  color: #1a1204; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.purse__item:hover::after, .purse__item:focus::after { opacity: 1; transform: translate(-50%, 0); }
.purse__chip-rim { fill: #D49A22; stroke: #FFE7A0; stroke-width: 1.5; }
.purse__chip-notch { fill: none; stroke: #FFF3C9; stroke-width: 3.2; }
.purse__chip-face { fill: #7A1F2B; stroke: #FFE7A0; stroke-width: 1.2; }
.purse__chip-mark { fill: #FFE7A0; }
/* the World's chip sits at the far right, after The World */
.hub .bar__who { margin-left: 10px; }
/* THE STRIP IN THE MIDDLE (Goliath, 2026-10-12, with a PC screenshot: the Currencies pill sat left of centre): the bar's
   right end is one box (.bar__end), and on a window wide enough for the bar's one row the bar is three columns, the
   brand's and the end's each a share of what is left, so the strip stands on the screen's middle line. The bar's sides
   are padded alike (the wider of the two safe areas, so a phone's camera side moves the strip off neither). Narrower
   than 1140 (a phone held sideways, a tablet upright, a small laptop: the strip's words are 16px since 2026-10-18, so it
   is wider) the three do not fit on one row, so the strip takes a centred row of its own under the brand and the end,
   as on a phone held upright. */
.bar__end { display: flex; align-items: center; margin-left: auto; min-width: 0; }
.hub .bar {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}
@media (min-width: 1140px) {
  .hub .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 14px; }
  .hub .bar__brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .hub .purse { grid-column: 2; grid-row: 1; margin: 0; }
  .hub .bar__end { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
}
@media (max-width: 1139px) {
  .purse { order: 5; flex-basis: 100%; max-width: 100%; justify-content: center; margin: 0; padding: 2px 4px 2px 10px; gap: 4px; }
  .purse__list { flex-wrap: wrap; justify-content: center; }
  .purse__label { letter-spacing: .14em; }
  .purse__item { min-height: 30px; padding: 2px 6px 2px 2px; gap: 4px; }
  .purse__icon { width: 24px; height: 24px; }
  .purse__n { font-size: 16px; }
}
/* a phone held upright: the brand is its icon alone, so The World and the one button share its row, and the label is a
   caption over the coins, so the four keep their room (every word at 16px, as on every screen of the game: UI-5); a
   short phone (up to 760 tall) gives the caption's line to the tiles, the coins say what they are under a tap */
@media (max-width: 479px) {
  .hub .bar__brand span { display: none; }
  .purse { flex-wrap: wrap; row-gap: 0; padding: 2px 6px 2px; border-radius: 16px; }
  .purse__label { flex-basis: 100%; text-align: center; letter-spacing: .24em; line-height: 1.2; }
  .purse__item { padding: 1px 5px 1px 2px; gap: 3px; }
  .purse__icon { width: 22px; height: 22px; }
}
@media (max-width: 479px) and (max-height: 760px) { .purse__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (max-width: 340px) { .purse__icon { width: 20px; height: 20px; } .purse__item { padding: 1px 3px 1px 1px; } }

/* ---------------------------------------------------------------------------------------------- the night */
.hub__main {
  position: relative; isolation: isolate; flex: 1 1 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(6px, 2.2svh, 24px) max(var(--gutter), env(safe-area-inset-right, 0px), calc(var(--sotc-edge-r, env(safe-area-inset-right, 0px)) + 42px)) clamp(4px, 1.4svh, 14px) max(var(--gutter), env(safe-area-inset-left, 0px), calc(var(--sotc-edge-l, env(safe-area-inset-left, 0px)) + 42px));
}
/* THE ROOM FOR THE TAB: FRIENDS on the left and FILM LIBRARY on the right stand at --sotc-edge-l/-r (in past an iPhone's
   island on its side, js/friends.js THE ISLAND'S SIDE), so the doors keep a tab's width (36px) and 6px more clear of
   each, on every screen, or a tab would stand over the first or last door (Goliath, 2026-10-11: "the friend tab on the
   game is overlapping pieces"; an Android phone held sideways had both tabs over the end doors). */
/* THE SKY (hub/art/, tools/hub-art.mjs, 2026-10-18): the whole world at once from a hill over the corn, every game
   lit at the same moment: the village, the chess tower, the Hush's gilded door, the racetrack, the tavern, Tenderfoot's
   crooked house, the Lands' islands overhead and the gods on the horizon. Its wonder is in its upper half, behind the
   title; the shade deepens down the page so the tiles read. A phone held upright (or any screen taller than 4:3 wide)
   has it painted tall. */
.hub__sky {
  --sky: url("../art/sky-wide.jpg?v=dab894b2dd");
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(7, 11, 30, .2) 0%, rgba(7, 11, 30, .42) 30%, rgba(7, 11, 30, .8) 58%, var(--ink) 100%),
    var(--sky) 50% 22% / cover no-repeat;
  filter: saturate(1.05);
}
@media (max-aspect-ratio: 3/4) { .hub__sky { --sky: url("../art/sky-tall.jpg?v=eb4a4553f8"); } }
.hub__fog {
  position: absolute; inset: auto -10% -6% -10%; height: 46%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 25% 100%, rgba(150, 140, 220, .16), transparent 70%),
    radial-gradient(55% 60% at 80% 100%, rgba(245, 194, 66, .10), transparent 70%);
  animation: hub-fog 18s ease-in-out infinite alternate;
}
@keyframes hub-fog { from { transform: translateX(-2%); } to { transform: translateX(2%); } }

.hub__head { flex: none; text-align: center; max-width: 760px; margin: 0 0 clamp(6px, 2svh, 18px); }
/* the World's kicker, centred with both rules (the World's hero sets it flush left on a desktop) */
.hub__head .hero__kicker { justify-content: center; font-size: 16px; letter-spacing: .24em; }
.hub__head .hero__kicker .rule:first-child { display: block; }
@media (max-width: 380px) { .hub__head .hero__kicker { letter-spacing: .18em; gap: 8px; } .hub__head .hero__kicker .rule { width: 14px; } }
.hub__title {
  margin: 4px 0 2px; font-family: var(--title-font); font-weight: bold; letter-spacing: .06em; line-height: 1.02;
  font-size: clamp(28px, min(5.4vw, 7svh), 58px); text-transform: uppercase;
  background: linear-gradient(180deg, #FFF3C9 8%, var(--gold) 52%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .65));
}
/* the narrowest phones (320px): THE GAME HUB at 28px is 241px, a few more than the 236px between the side tabs; at 26px
   it keeps to one line, and the doors keep the line it would have taken */
@media (max-width: 339px) { .hub__title { font-size: 26px; } }
.hub__sub { margin: 0; color: #E4DCF7; font-size: clamp(16px, 1.4vw, 18px); }
/* the sky's moon stands behind the title: the lines under it wear a dark glow, so they read on the moon too */
.hub__sub, .hub__war { text-shadow: 0 0 4px #070B1E, 0 0 10px #070B1E, 0 0 18px rgba(7, 11, 30, .9), 0 1px 2px #000; }
/* THE NOTE (2026-10-13): one line in the sub line's place, a gold pill that is the way to it (a new account's welcome
   draw). It stays on a short window, where the sub line goes. */
.hub__note { margin: 4px 0 0; }
.hub__head.has-note .hub__sub { display: none; }
.hub__gift {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 18px 5px 8px; border-radius: 999px;
  border: 1px solid var(--gold); background: linear-gradient(180deg, rgba(60, 44, 10, .82), rgba(24, 16, 4, .82));
  color: var(--gold-hi); font-size: clamp(15px, 1.6vw, 17px); font-weight: bold; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45), 0 0 18px rgba(245, 194, 66, .25); transition: background .2s, transform .2s var(--ease);
}
.hub__gift:hover, .hub__gift:focus-visible { background: linear-gradient(180deg, rgba(92, 66, 14, .9), rgba(40, 26, 6, .9)); transform: translateY(-1px); }
.hub__gift:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.hub__gift img { flex: none; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
@media (max-width: 520px) { .hub__gift { font-size: 16px; padding-right: 12px; } }
/* a short window (a phone held sideways, a small laptop): the title alone, so the doors keep the height */
@media (max-height: 820px), (max-width: 520px) { .hub__head .hero__kicker { display: none; } }
@media (max-height: 520px) { .hub__sub { display: none; } .hub__title { font-size: clamp(22px, 7svh, 34px); margin: 0; } }

/* THE WAR (2026-10-13): one line under the title, a bar in the two sides' colours and the words beside it */
.hub__war { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 0; font-size: clamp(16px, 1.3vw, 17px); line-height: 1.25; color: #E4DCF7; }
.hub__war-words { min-width: 0; }
.hub__war[hidden] { display: none; }
.hub__war-bar { flex: none; position: relative; width: clamp(60px, 10vw, 120px); height: 8px; border-radius: 999px; overflow: hidden; background: #6BE04A; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.hub__war-herd { position: absolute; inset: 0 auto 0 0; width: var(--herd, 50%); background: linear-gradient(90deg, #FF8FC7, #F5C242); }
@media (max-height: 520px) { .hub__war { display: none; } }
/* a short phone upright (up to 520 x 720: an iPhone SE, a Duo closed) gives the war's line and the line under the title
   to the eleven tiles: with them there, a Duo's outer screen had to scroll its shelves */
@media (max-width: 520px) and (max-height: 720px) { .hub__war, .hub__sub { display: none; } .hub__head { margin-bottom: 6px; } }
.hub__head.has-note .hub__war { display: none; }   /* the welcome gift's line comes first */

/* a phone held upright: the title block and the links take the width the side tabs keep clear for the tiles (the tabs
   stand at the middle of the screen, the title above them and the links below) */
@media (max-width: 520px) and (orientation: portrait) {
  .hub__head, .hub__main .hub__more { margin-left: calc(var(--gutter) - 42px); margin-right: calc(var(--gutter) - 42px); max-width: none; }
  html:not([data-friends-tab]) .hub__head, html:not([data-friends-tab]) .hub__more { margin-left: 0; }   /* a guest: no tab room to take */
  .hub__title { font-size: clamp(26px, 8vw, 34px); }
  .hub__foot { font-size: 10.5px; padding-top: 4px; }
}
/* a phone held upright gives the shelves the height: the links are one line (the guide's other door, Every game in
   more words, opens the same page) and a smaller phone drops the line under the title */
@media (max-width: 440px) { .hub__guide { display: none; } }
@media (max-width: 520px) and (max-height: 760px) { .hub__sub { display: none; } }
/* a phone held upright says the Season's war on one line: "Season: Herd 54%, Horde 46%, 12 days left", and on a phone up
   to 420 wide "Herd 54%, Horde 46%, 12 days left" beside the bar (the whole line is its label for a screen reader) */
@media (max-width: 520px) { .hub__war-name { display: none; } .hub__war { gap: 8px; } }
@media (max-width: 420px) { .hub__war-season, .hub__war-lead { display: none; } .hub__war-bar { width: 44px; } }
/* the smallest phones (320 x 568): the title stays for a screen reader alone, and the war line goes, so eleven tiles keep a
   readable size */
@media (max-width: 360px) and (max-height: 600px) {
  .hub__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hub__war { display: none; }
  .hub__head { margin-bottom: 4px; }
}
/* NO FRIENDS TAB (a guest: the tab is for accounts only, js/friends.js sets <html data-friends-tab> while it shows): the
   left keeps only its gutter and the safe area, and the shelves take the room */
html:not([data-friends-tab]) .hub__main { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); }
/* a phone held sideways: the bar already says Shadows of the Corn, so the title stays for a screen reader alone and the
   shelves take its row */
@media (max-height: 430px) {
  .hub__head { margin: 0; }
  .hub__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* THE FIREFLIES: fourteen lights rising slowly over the corn, behind the tiles */
.hub__motes { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hub__motes i {
  position: absolute; width: 5px; height: 5px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #FFF6C8 0 35%, rgba(255, 214, 110, .9) 60%, transparent 72%);
  box-shadow: 0 0 10px 3px rgba(255, 210, 110, .55); animation: hub-mote 10s ease-in-out infinite;
}
.hub__motes i:nth-child(1) { left: 4%; top: 82%; animation-duration: 11s; animation-delay: -2s; }
.hub__motes i:nth-child(2) { left: 13%; top: 64%; animation-duration: 9s; animation-delay: -6s; }
.hub__motes i:nth-child(3) { left: 21%; top: 90%; animation-duration: 13s; animation-delay: -1s; }
.hub__motes i:nth-child(4) { left: 30%; top: 72%; animation-duration: 10s; animation-delay: -8s; }
.hub__motes i:nth-child(5) { left: 38%; top: 94%; animation-duration: 12s; animation-delay: -4s; }
.hub__motes i:nth-child(6) { left: 47%; top: 60%; animation-duration: 14s; animation-delay: -10s; }
.hub__motes i:nth-child(7) { left: 55%; top: 86%; animation-duration: 9.5s; animation-delay: -3s; }
.hub__motes i:nth-child(8) { left: 63%; top: 70%; animation-duration: 11.5s; animation-delay: -7s; }
.hub__motes i:nth-child(9) { left: 71%; top: 92%; animation-duration: 10.5s; animation-delay: -5s; }
.hub__motes i:nth-child(10) { left: 79%; top: 66%; animation-duration: 13.5s; animation-delay: -9s; }
.hub__motes i:nth-child(11) { left: 86%; top: 84%; animation-duration: 12.5s; animation-delay: -1.5s; }
.hub__motes i:nth-child(12) { left: 93%; top: 74%; animation-duration: 9s; animation-delay: -4.5s; }
.hub__motes i:nth-child(13) { left: 9%; top: 40%; animation-duration: 15s; animation-delay: -11s; width: 4px; height: 4px; }
.hub__motes i:nth-child(14) { left: 90%; top: 36%; animation-duration: 15s; animation-delay: -6.5s; width: 4px; height: 4px; }
@keyframes hub-mote {
  0% { opacity: 0; transform: translate(0, 0) scale(.7); }
  18% { opacity: .95; }
  50% { transform: translate(22px, -9vh) scale(1); opacity: .55; }
  72% { opacity: .9; }
  100% { opacity: 0; transform: translate(-14px, -20vh) scale(.6); }
}
/* the sky breathes: the painting drifts a little closer and back */
.hub__sky { animation: hub-sky 40s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes hub-sky { from { transform: scale(1.02); } to { transform: scale(1.09) translateY(-1%); } }
/* the title catches the light once as the page opens */
.hub__title { background-size: 100% 100%, 250% 100%; background-image: linear-gradient(180deg, #FFF3C9 8%, var(--gold) 52%, var(--gold-deep) 100%), linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%); background-position: 0 0, 120% 0; background-repeat: no-repeat; animation: hub-shine 2.4s .5s var(--ease) both; }
@keyframes hub-shine { from { background-position: 0 0, 120% 0; } to { background-position: 0 0, -30% 0; } }

/* ---------------------------------------------------------------------------------------------- the stage */
/* The stage is the size container the spotlight and the wall are placed in; they are placed by its shape, so the spotlight
   and the wall stand at fixed places inside it (absolutely), never pushing the page longer. */
.hub__stage { position: relative; flex: 1 1 0; min-height: 0; width: 100%; container-type: size; container-name: stage; }
.spot, .doors { position: absolute; inset: 0; }
.spot { display: none; --sg: clamp(12px, 1.6cqw, 26px); }
/* THE WALL: the four shelves as rows, one under the other (the nav is the wall's size container, its .wall the box the
   shelves stand in, since a container's own query cannot restyle the container) */
.doors { --sg: clamp(12px, 1.6cqw, 26px); --tg: clamp(8px, 1.1cqw, 16px); container-type: size; container-name: wall; margin: 0; padding: 0; }
.wall { position: absolute; inset: 0; display: flex; flex-direction: column; gap: clamp(6px, 1.6cqh, 16px); }
/* THE SPOTLIGHT BESIDE THE WALL: a computer, an iPad held sideways (a phone and a Duo show the shelves alone) */
@container stage (min-width: 800px) and (min-height: 380px) and (min-aspect-ratio: 6/5) {
  .spot { display: block; inset: 0 auto 0 0; width: clamp(280px, 38cqw, 760px); }
  .doors { inset: 0 0 0 calc(clamp(280px, 38cqw, 760px) + var(--sg)); }
}
/* THE SPOTLIGHT ABOVE THE WALL: an iPad held upright, from the 820 x 1180 iPad up */
@container stage (min-width: 480px) and (min-height: 700px) and (max-aspect-ratio: 6/5) {
  .spot { display: block; inset: 0 0 auto 0; height: clamp(220px, 34cqh, 440px); }
  .doors { inset: calc(clamp(220px, 34cqh, 440px) + var(--sg)) 0 0 0; }
}

/* ---------------------------------------------------------------------------------------------- the shelves */
.shelf { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(3px, .9cqh, 8px); }
.shelf__name {
  flex: none; display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0;
  font: bold 16px/1.25 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
}
.shelf__name::after { content: ""; flex: 1 1 auto; min-width: 12px; height: 1px; background: linear-gradient(90deg, rgba(245, 194, 66, .7), rgba(245, 194, 66, 0)); }
.shelf__name svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.shelf--nights .shelf__name svg circle { fill: var(--gold); stroke: none; }
.shelf__row { flex: 1 1 0; min-height: 0; display: flex; gap: var(--tg); }
/* A SHORT WIDE WALL (a phone held sideways, a Duo part folded, a very wide screen): the shelves stand side by side as
   columns and each one stacks its tiles, which keeps the tiles from coming out as thin strips (a tile's shape: rows give
   it about 4/3 of the wall's shape, columns 3/4 of it, and they meet at 3:2) */
@container wall (min-aspect-ratio: 3/2) and (min-width: 520px) {
  .wall { flex-direction: row; gap: var(--sg); }
  .shelf__row { flex-direction: column; }
}
/* A SHELF'S SHORT NAME (Battle, Cozy) where its whole name would not fit at 16px: a narrow wall, or the columns of a
   wall up to 1100px wide; a screen reader still reads the whole name */
@container wall (max-width: 339px) {
  .shelf__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@container wall (min-aspect-ratio: 3/2) and (min-width: 520px) and (max-width: 1099px) {
  .shelf__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .shelf__name { letter-spacing: .08em; gap: 6px; }
}
@container wall (min-aspect-ratio: 3/2) and (min-width: 520px) and (max-width: 640px) { .shelf__name svg { display: none; } .shelf__name { letter-spacing: .06em; } }
/* NOT ENOUGH ROOM FOR 16PX WORDS (a 320 x 568 phone, a Duo part folded): the wall keeps the height its tiles need and
   scrolls inside the stage, as the Duo spec asks of a part-folded screen (bounded scrolling to every tile), never
   shrinking a word; on every other screen this minimum is below the wall's own height and nothing scrolls */
.wall { min-height: 340px; }
@container wall (min-aspect-ratio: 3/2) and (min-width: 520px) { .wall { min-height: 180px; } }
@container wall (max-width: 280px) { .wall { min-height: 420px; } }   /* a 320 or 360px phone: names of three lines, or four */
/* TENDERFOOT'S, the longest word on any tile, stays whole on a phone held upright: since the Sweet Shop made Cozy & Clever
   a shelf of three (2026-10-18), Tenderfoot's Folly's tile keeps 112px (the word in Android's Noto Serif, 103px, and
   the tile's own edges) and its two neighbours share the rest. On the narrowest wall (a 320 phone signed in) that
   would leave them too little for Continue, so there the shelf takes two lines, Tenderfoot's Folly across the first,
   and the wall, which scrolls inside the stage there already, keeps the height for the extra line */
.shelf--cozy .door--tenderfoot { min-width: min(112px, 100%); }
@container wall (max-width: 250px) {
  .wall { min-height: 470px; }
  .shelf--cozy { flex-grow: 1.6; }
  .shelf--cozy .shelf__row { flex-wrap: wrap; }
  .shelf--cozy .door--tenderfoot { flex-basis: 100%; }
}
/* THE FOUR OF BATTLE & STRATEGY (since The Blight made it a shelf of four, 2026-10-18), and of NIGHTS OUT (since Last
   Call, 2026-10-19; the wall a little taller for the second shelf of two lines): where four across would break
   Shadows or Gambit in two (a phone held upright: a wall under 400px) or four down would leave a tile too short for a
   name and Continue (a phone held sideways, a Duo part folded: a wall of columns under 330px tall), the shelf stands
   its four two by two and takes the room of the extra line. On the arcade shelf of three, NIGHTFALL's tile keeps 107px
   and Mirelight's 86px (each word in Android's Noto Serif and the tile's own edges, 2026-10-19: signed in, a 375 phone's
   wall is 291px and Mirelight broke in two), and Across the Corn the rest; on the narrowest wall Across the Corn takes
   the shelf's first line and NIGHTFALL and Mirelight share the second. A short wall of columns calls Nights Out
   Nights, as it calls the others Battle and Cozy, and keeps Cozy's and Arcade's columns 112px wide, so Tenderfoot's
   and NIGHTFALL stay whole beside the wider Battle (2026-10-19, a Duo closed and held sideways, signed in) */
@container wall (max-width: 399px) {
  .wall { min-height: 460px; }
  .shelf--battle, .shelf--nights { flex-grow: 1.8; }
  .shelf--battle .shelf__row, .shelf--nights .shelf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .shelf--arcade .door--nightfall { min-width: min(107px, 100%); }
  .shelf--arcade .door--mirelight { min-width: min(86px, 100%); }
}
@container wall (min-aspect-ratio: 3/2) and (min-width: 520px) and (max-height: 329px) {
  .shelf--battle, .shelf--nights { flex-grow: 1.6; }
  .shelf--battle .shelf__row, .shelf--nights .shelf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .shelf__out { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* Nights (Out) */
  .shelf--cozy, .shelf--arcade { min-width: 112px; }
}
/* signed in, a phone's shorter stage would leave a name of three lines (The Gilded Hush on a 375 phone) past its tile:
   the wall keeps the height for it and scrolls in the stage (below) */
@container wall (min-width: 281px) and (max-width: 330px) { html[data-friends-tab] .wall { min-height: 424px; } }
@container wall (max-width: 280px) {
  .wall { min-height: 470px; }
  .shelf--arcade { flex-grow: 1.6; }
  .shelf--arcade .shelf__row { flex-wrap: wrap; }
  .shelf--arcade .door--across { flex-basis: 100%; }
}
@container wall (max-width: 270px) { .wall { min-height: 540px; } }   /* a 320 phone: longer names, and signed in Cozy's two lines */
/* the wall scrolls inside a short stage, and inside a phone's upright one, where thirteen tiles can need more height
   than the stage has (a 360 or 375 phone signed in: the Currencies strip, the FRIENDS tab's room and the links' second
   line, Bring a friend, 2026-10-19); it never runs over the links */
@container stage (max-height: 400px) or (max-width: 399px) {
  .doors { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(245, 194, 66, .5) transparent; }
}

/* ---------------------------------------------------------------------------------------------- the tiles */
.door {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 0; display: block; border-radius: 14px; color: #fff; text-decoration: none;
  container-type: size; container-name: tile; -webkit-tap-highlight-color: transparent; outline: none;
  --glow: 255, 200, 110; --trim: rgba(255, 231, 160, .3); --ic: clamp(36px, 30cqh, 64px);
  box-shadow: 0 0 0 1px var(--trim), 0 10px 26px rgba(0, 0, 0, .55);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  animation: hub-tile-in .7s var(--ease) backwards;
}
.door--main { --trim: rgba(245, 194, 66, .9); --glow: 255, 205, 110; }
.door--gate { --glow: 120, 230, 190; }
.door--chess { --glow: 210, 160, 255; }
.door--casino { --glow: 255, 170, 90; }
.door--racing { --glow: 255, 205, 120; }
.door--tavern { --glow: 255, 160, 80; }
.door--across { --glow: 140, 225, 120; }
.door--nightfall { --glow: 170, 150, 255; }
.door--tenderfoot { --glow: 255, 214, 140; }
.door--lands { --glow: 255, 214, 120; }
.door--hustle { --glow: 255, 196, 120; }
.door--blight { --glow: 255, 220, 120; }
.door--mirelight { --glow: 110, 235, 215; }
.door--lastcall { --glow: 255, 120, 150; }
/* the painting, and a shade so the words read on any painting */
.door__frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #05070F; isolation: isolate; }
.door__art {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: 0;
  transform: scale(1.02); filter: brightness(.86) saturate(1.05); transition: transform .8s var(--ease), filter .5s var(--ease);
}
.door__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 11, 30, 0) 30%, rgba(7, 11, 30, .55) 62%, rgba(7, 11, 30, .92) 100%),
    radial-gradient(90% 70% at 50% 110%, rgba(var(--glow), .28), transparent 70%);
}
/* a sheen that sweeps the tile under the pointer */
.door__frame::before {
  content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-12deg);
}
/* the game's own home screen icon */
.door__icon {
  position: absolute; z-index: 3; left: 10px; bottom: 10px; width: var(--ic); height: var(--ic); max-width: none; border-radius: 22%;
  box-shadow: 0 0 0 2px #1B1A30, 0 0 0 3px var(--trim), 0 6px 16px rgba(0, 0, 0, .7); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.door--main .door__icon { box-shadow: 0 0 0 2px #1B1A30, 0 0 0 3px var(--gold), 0 6px 16px rgba(0, 0, 0, .7); }
/* its name and its kind, beside the icon */
.door__plate {
  position: absolute; z-index: 3; left: calc(var(--ic) + 20px); right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 2px;
  min-height: var(--ic); justify-content: flex-end;
}
.door__name {
  font-family: var(--title-font); font-weight: bold; font-size: clamp(16px, min(6.4cqw, 15cqh), 28px); line-height: 1.12; color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9); transition: color .25s;
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
}
.door__kind {
  font-size: clamp(16px, min(4cqw, 9cqh), 18px); font-weight: bold; letter-spacing: .03em; line-height: 1.2;
  color: rgb(var(--glow)); text-shadow: 0 1px 6px rgba(0, 0, 0, .95); white-space: nowrap;
}
/* the line the spotlight shows; a tile keeps it for the spotlight only */
.door__pitch { display: none; }
/* the short name under the icon on a phone (THE PHONE'S ICONS, below); a tile shows the whole name */
.door__short { display: none; }
.door[hidden] { display: none; }
/* A MIDDLING TILE (a small computer, an iPad): the icon at the top left, the name and the kind across the bottom */
@container tile (min-width: 150px) and (max-width: 259px) and (min-height: 130px) {
  .door__icon { left: 10px; top: 10px; bottom: auto; }
  .door__plate { left: 10px; right: 8px; min-height: 0; }
  .door__name { font-size: clamp(16px, min(10cqw, 15cqh), 22px); }
}
/* a kind line that would not fit its tile at 16px is left to the spotlight: a narrow tile's, a flat tile's under 240px,
   and a middling tile's under 190px (Merge the harvest is 151px, and more in a wider sans) */
@container tile (max-width: 149px) { .door__kind { display: none; } }
@container tile (max-width: 239px) and (max-height: 129px) { .door__kind { display: none; } }
@container tile (max-width: 189px) { .door__kind { display: none; } }
/* A NARROW TILE (a phone held upright): the icon at the top left over the painting, the name across the bottom */
@container tile (max-width: 149px) {
  .door__icon { left: 6px; top: 6px; bottom: auto; }
  .door__plate { inset: 0; padding: 0 4px 6px 5px; min-height: 0; }
  .door__name { font-size: clamp(16px, 13cqw, 18px); line-height: 1.1; }
  .door__more { display: none; }   /* The Weasel Racing (Club) */
}
/* A FLAT TILE (a short wall, or a middling tile under 130px tall): the icon and the name side by side down its middle,
   the painting darker behind them */
@container tile ((min-width: 150px) and (max-height: 95px)) or ((min-width: 150px) and (max-width: 259px) and (max-height: 129px)) {
  .door > * { --ic: max(30px, min(clamp(36px, 30cqh, 64px), 100cqw - 138px)); }   /* set on the tile's children: a tile's
     query reaches what is inside it, never the tile. The name keeps 112px, so NIGHTFALL and Tenderfoot's stay whole */
  .door__icon { top: 50%; bottom: auto; left: 9px; transform: translateY(-50%); }
  .door__plate { top: 50%; bottom: auto; left: calc(var(--ic) + 18px); right: 8px; min-height: 0; transform: translateY(-50%); }
  .door__name { font-size: clamp(16px, min(9.6cqw, 28cqh), 20px); }
  .door__frame::after { background: linear-gradient(90deg, rgba(7, 11, 30, .9) 0%, rgba(7, 11, 30, .62) 55%, rgba(7, 11, 30, .25) 100%); }
}
@container tile (min-width: 150px) and (max-height: 69px) { .door__kind { display: none; } }
/* a flat tile under 168px wide (a phone held upright): the name alone across the bottom, as on the narrow tiles above
   it, its longest word kept whole, and the painting as bright as theirs */
@container tile (min-width: 150px) and (max-width: 167px) and (max-height: 129px) {
  .door__icon { display: none; }
  .door__plate { top: auto; bottom: 8px; left: 10px; transform: none; }
  .door__frame::after {
    background: linear-gradient(180deg, rgba(7, 11, 30, 0) 30%, rgba(7, 11, 30, .55) 62%, rgba(7, 11, 30, .92) 100%),
      radial-gradient(90% 70% at 50% 110%, rgba(var(--glow), .28), transparent 70%);
  }
}
/* a narrow tile under 110px tall (a phone held upright or sideways): the name alone, the icon would sit on it */
@container tile (max-width: 149px) and (max-height: 109px) { .door__icon { display: none; } }
/* THE RIBBONS (js/hub-main.js, 2026-10-13, the growth list's item 8): New here on the tavern and the Gate for a first-timer,
   Continue on the game a signed-in player played last. A pill in the tile's plate, over its name, in three parts (New,
   here?, Start here): a flat tile wears the first two in its kind line's place, a narrow tile the first alone, across
   its top in its icon's place */
.door__ribbon {
  order: -1; align-self: flex-start; max-width: 100%; margin-bottom: 3px; padding: 2px 10px; border-radius: 999px;
  font-family: var(--font); font-size: 16px; font-weight: bold; letter-spacing: .02em; line-height: 1.2; pointer-events: none;
  color: #06231F; background: linear-gradient(180deg, #A6F0E8, #5FD3C6); box-shadow: 0 3px 10px rgba(0, 0, 0, .6);
}
.door__ribbon--next { color: #1A1204; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
@container tile (max-width: 149px) {
  .door__ribbon { align-self: stretch; max-width: none; margin: 0 -4px auto -5px; padding: 0 2px; line-height: 1.05; border-radius: 14px 14px 0 0; text-align: center; white-space: nowrap; letter-spacing: 0; }
  .door__ribbon-mid, .door__ribbon-more { display: none; }
  .door:has(.door__ribbon) .door__icon { display: none; }
  .door:has(.door__ribbon) .door__plate { gap: 0; padding-bottom: 4px; overflow: hidden; border-radius: inherit; }
  .door:has(.door__ribbon) .door__name { font-size: 16px; line-height: 1.05; }
  /* and with Continue its name drops The (Weasel Racing, Sweet Shop), so the name and the ribbon fit a short tile in
     Android's wider Noto Serif (a 360 x 640 phone, 2026-10-18, when The Blight and Mirelight made thirteen) */
  .door:has(.door__ribbon--next) .door__the { display: none; }
}
/* a middling tile wears it at the top, beside the icon */
@container tile (min-width: 150px) and (max-width: 259px) and (min-height: 130px) {
  .door:has(.door__ribbon) .door__plate { top: 10px; }
  .door__ribbon { margin: 0 0 auto calc(var(--ic) + 10px); max-width: calc(100% - var(--ic) - 10px); border-radius: 12px; }
}
/* under 240px wide the room beside the icon takes New here? on a line or two, never the rest (four lines of it ran over
   the tile's top with a two-line name under it, in the Palatino of a Linux computer, 2026-10-18) */
@container tile (min-width: 150px) and (max-width: 239px) and (min-height: 130px) { .door__ribbon-more { display: none; } }
@container tile ((min-width: 150px) and (max-height: 95px)) or ((min-width: 150px) and (max-width: 259px) and (max-height: 129px)) {
  .door__ribbon { order: 2; margin: 2px 0 0; padding: 0 8px; white-space: nowrap; }
  .door__ribbon-more { display: none; }
  .door:has(.door__ribbon) .door__kind { display: none; }
  /* the icon gives its room to the name, so the name and the ribbon keep a line each */
  .door:has(.door__ribbon) .door__icon { display: none; }
  .door:has(.door__ribbon) .door__plate { left: 10px; gap: 1px; }
  .door:has(.door__ribbon) .door__name { line-height: 1.05; }
  .door__ribbon { line-height: 1.1; margin-top: 0; }
}

/* UNDER THE POINTER OR THE FOCUS: the tile lifts, glows in its game's colour, the painting leans in and a sheen crosses it */
.door:hover, .door:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 2px rgba(var(--glow), .95), 0 0 30px rgba(var(--glow), .4), 0 16px 34px rgba(0, 0, 0, .65); }
.door:hover .door__art, .door:focus-visible .door__art { transform: scale(1.09); filter: brightness(1.04) saturate(1.12); }
.door:hover .door__frame::before, .door:focus-visible .door__frame::before { animation: hub-sheen .9s var(--ease); }
.door:hover .door__icon, .door:focus-visible .door__icon { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 0 2px #1B1A30, 0 0 0 3px var(--gold), 0 0 20px rgba(var(--glow), .6); }
@container tile ((min-width: 150px) and (max-height: 95px)) or ((min-width: 150px) and (max-width: 259px) and (max-height: 129px)) {
  .door:hover .door__icon, .door:focus-visible .door__icon { transform: translateY(-50%) scale(1.06); }
}
.door:hover .door__name, .door:focus-visible .door__name { color: var(--gold-hi); }
.door:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
.door:active { transform: translateY(-1px) scale(.985); }
/* the tile the spotlight is showing wears a gold edge */
.door.is-spot { box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(245, 194, 66, .35), 0 10px 26px rgba(0, 0, 0, .55); }
@keyframes hub-sheen { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }
/* the tiles rise into place shelf by shelf as the page opens */
@keyframes hub-tile-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.shelf:nth-child(1) .door:nth-child(2) { animation-delay: .06s; }
.shelf:nth-child(1) .door:nth-child(3) { animation-delay: .12s; }
.shelf:nth-child(1) .door:nth-child(4) { animation-delay: .18s; }
.shelf:nth-child(2) .door:nth-child(1) { animation-delay: .1s; }
.shelf:nth-child(2) .door:nth-child(2) { animation-delay: .16s; }
.shelf:nth-child(2) .door:nth-child(3) { animation-delay: .22s; }
.shelf:nth-child(3) .door:nth-child(1) { animation-delay: .2s; }
.shelf:nth-child(3) .door:nth-child(2) { animation-delay: .26s; }
.shelf:nth-child(3) .door:nth-child(3) { animation-delay: .32s; }
.shelf:nth-child(4) .door:nth-child(1) { animation-delay: .3s; }
.shelf:nth-child(4) .door:nth-child(2) { animation-delay: .36s; }
.shelf:nth-child(4) .door:nth-child(3) { animation-delay: .42s; }
/* a touch screen: the paintings a little brighter (no pointer to wake them); a press shows the glow */
@media (hover: none) {
  .door__art { filter: brightness(.94) saturate(1.08); }
  .door:hover { transform: none; box-shadow: 0 0 0 1px var(--trim), 0 10px 26px rgba(0, 0, 0, .55); }
  .door:hover .door__art { transform: scale(1.02); filter: brightness(.94) saturate(1.08); }
  .door:hover .door__frame::before { animation: none; }
  .door:hover .door__icon { transform: none; }
  .door:hover .door__name { color: #fff; }
  .door:active { transform: scale(.98); box-shadow: 0 0 0 2px rgba(var(--glow), .95), 0 0 26px rgba(var(--glow), .45); }
}

/* ---------------------------------------------------------------------------------------------- the phone's icons */
/* THE PHONE'S ICONS (Goliath, 2026-10-19: "my thought on a phone is the Hub should be looking like icons like an iPhone
   with the box icons. Can we adapt the Hub by device and have icons with subtitles (short) and the on PC it is the tiles?
   Also, on iPad and Duo leave it as tiles. Only phones do we go to icons."). On a phone every game is its own home screen
   icon with its short name under it, and every shelf is a glass box with its name over its icons, as an iPhone's App
   Library groups its apps: the four boxes two by two on a phone held upright, side by side on one held sideways. A box
   of three stands its third game alone on the second line, with the box's whole width for its name (so NIGHTFALL and
   Tenderfoot keep one line); a box of four (Battle, and Nights Out since Last Call, 2026-10-19) two by two. A computer,
   an iPad and a Duo keep the tiles above.
   A PHONE IS A WINDOW'S SIZE AND SHAPE, never the device's name (DUO-1): upright up to 450 x 1000 (the widest iPhone is
   440 wide; a Duo closed is 466 wide and part folded 456; an iPad's Slide Over is taller than 1000), and sideways up to
   1000 x 450 and no longer than 29 to 10 (a Duo closed is 466 tall; a Duo part folded, 951 x 310, is 3.07 to 1).
   The icons share one size, the largest that lets every box keep two lines of icons with names of two lines, from 40 to
   64px; where even 40px will not fit (a 320 phone signed in), the boxes keep it and scroll inside the stage, as the tiles
   do there. Every word is 16px (UI-5), and a name breaks only at its soft hyphen (Mire-light on the narrowest phones);
   each icon with its name is one link, the size of its share of the box. The game a signed in player played last wears
   a gold ring and reads Continue in its name's place; New here? is a New tag on the icon's corner. */
@supports (container-type: size) {
  @media (orientation: portrait) and (max-width: 450px) and (max-height: 1000px), (orientation: landscape) and (max-height: 450px) and (max-width: 1000px) and (max-aspect-ratio: 29/10) {
    .hub .doors { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(245, 194, 66, .5) transparent; }
    .hub .wall {
      bottom: auto; min-height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: 8px;
    }
    html[data-friends-tab] .hub .wall { min-height: 100%; }   /* the tiles' taller wall signed in is not the boxes' */
    .hub .shelf {
      min-width: 0; min-height: auto; gap: 2px; padding: 4px 2px 2px; border-radius: 20px;
      background: linear-gradient(180deg, rgba(30, 36, 84, .66), rgba(10, 14, 40, .78));
      box-shadow: 0 0 0 1px rgba(255, 231, 160, .26), 0 12px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .hub .shelf__name { justify-content: center; gap: 6px; padding: 0 4px; letter-spacing: .1em; }
    .hub .shelf__name::after { display: none; }
    .hub .shelf__more, .hub .shelf__out { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* Battle, Nights, Cozy */
    .hub .shelf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); align-content: space-evenly; gap: 0 6px; flex: 1 0 auto; min-height: auto; }
    .hub .shelf--arcade .door--nightfall, .hub .shelf--cozy .door--tenderfoot { order: 1; grid-column: 1 / -1; }
    /* an icon and its name, one link, the icon the size the wall allows (THE WALL's own size: a box's share of its width
       and its height, less the names and the box's edges) */
    .hub .door {
      --ic: clamp(40px, min(25cqw - 24px, 25cqh - 59px), 64px);
      container-type: normal; min-width: 0; min-height: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px;
      padding: 2px 0; border-radius: 16px; box-shadow: none;
    }
    .hub .door__frame, .hub .door__kind { display: none; }
    .hub .door__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the link's name for a screen reader */
    .hub .door__plate { display: contents; }
    .hub .door__icon { position: static; flex: none; width: var(--ic); height: var(--ic); border-radius: 23%; }
    .hub .door__short {
      display: block; max-width: 100%; font: 16px/1.05 var(--title-font); text-align: center; color: #fff;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 2px #000; -webkit-hyphens: manual; hyphens: manual;
    }
    /* CONTINUE: a gold ring, and the word in the name's place */
    .hub .door:has(.door__ribbon--next) .door__icon { box-shadow: 0 0 0 2px #1B1A30, 0 0 0 4px var(--gold), 0 0 20px rgba(245, 194, 66, .7); }
    .hub .door:has(.door__ribbon--next) .door__short { display: none; }
    .hub .door__ribbon--next {
      order: 2; align-self: auto; max-width: 100%; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none;
      font: 16px/1.05 var(--title-font); letter-spacing: 0; color: var(--gold-hi); text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 2px #000;
    }
    /* NEW HERE?: a New tag on the icon's top right corner */
    .hub .door__ribbon--new { position: absolute; z-index: 4; top: 0; right: max(0px, 50% - var(--ic) / 2 - 12px); margin: 0; padding: 0 7px; line-height: 1.25; }
    .hub .door__ribbon--new .door__ribbon-mid, .hub .door__ribbon--new .door__ribbon-more { display: none; }
    /* under the pointer, the focus or a finger: the icon lifts and glows in its game's colour */
    .hub .door:hover, .hub .door:focus-visible, .hub .door:active { transform: none; box-shadow: none; }
    .hub .door:hover .door__icon, .hub .door:focus-visible .door__icon { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 0 2px #1B1A30, 0 0 0 3px var(--gold), 0 0 20px rgba(var(--glow), .7); }
    .hub .door:active .door__icon { transform: scale(.94); box-shadow: 0 0 0 2px #1B1A30, 0 0 0 3px rgba(var(--glow), .95), 0 0 22px rgba(var(--glow), .7); }
    .hub .door:hover .door__short, .hub .door:focus-visible .door__short { color: var(--gold-hi); }
    .hub .door:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: -1px; }
    /* A PHONE HELD SIDEWAYS: the four boxes side by side, each still two by two */
    @container wall (min-aspect-ratio: 3/2) {
      .hub .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; }
      .hub .door { --ic: clamp(40px, min(12.5cqw - 25px, 50cqh - 57px), 64px); }
    }
    /* a share too narrow for the word Continue in the phone's font (js/hub-main.js measures it and marks the door
       is-tight) keeps the game's name, in gold, under the gold ring; a screen reader still hears Continue */
    .hub .door.is-tight .door__short { display: block; color: var(--gold-hi); }
    .hub .door.is-tight .door__ribbon--next { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
}

/* ---------------------------------------------------------------------------------------------- the spotlight */
.spot {
  border-radius: 20px; overflow: hidden; isolation: isolate; background: #05070F; container-type: size; container-name: spot;
  --glow: 255, 205, 110;
  box-shadow: 0 0 0 1px rgba(255, 231, 160, .55), 0 0 0 6px rgba(7, 11, 30, .55), 0 0 0 7px rgba(var(--glow), .45),
    0 0 70px rgba(var(--glow), .22), 0 30px 60px rgba(0, 0, 0, .6);
  transition: box-shadow .8s var(--ease);
  animation: hub-spot-in .9s var(--ease) backwards;
}
@keyframes hub-spot-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.spot__art { position: absolute; inset: 0; z-index: 0; }
.spot__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.spot__img.is-on { opacity: 1; animation: hub-spot-drift 18s ease-in-out infinite alternate; }
@keyframes hub-spot-drift { from { transform: scale(1.03); } to { transform: scale(1.14) translate(-1.6%, -1.2%); } }
.spot__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 11, 30, .28) 0%, rgba(7, 11, 30, 0) 24%, rgba(7, 11, 30, 0) 40%, rgba(7, 11, 30, .7) 66%, rgba(7, 11, 30, .96) 100%),
    radial-gradient(70% 50% at 20% 100%, rgba(var(--glow), .25), transparent 70%);
}
.spot__words {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(4px, 1.2cqh, 10px);
  padding: clamp(16px, 4.5cqh, 40px) clamp(18px, 6cqw, 44px) clamp(18px, 5cqh, 42px);
}
.spot__icon {
  width: clamp(52px, 11cqh, 88px); height: auto; aspect-ratio: 1; max-width: none; border-radius: 22%; margin-bottom: 4px;
  box-shadow: 0 0 0 2px #1B1A30, 0 0 0 3px var(--gold), 0 10px 26px rgba(0, 0, 0, .7), 0 0 34px rgba(var(--glow), .55);
}
.spot__kind { font-size: clamp(16px, 2.2cqh, 18px); font-weight: bold; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--glow)); text-shadow: 0 1px 8px rgba(0, 0, 0, .95); }
.spot__name {
  font-family: var(--title-font); font-weight: bold; text-transform: uppercase; letter-spacing: .03em; line-height: 1.02;
  font-size: clamp(28px, min(8.6cqw, 8cqh), 66px); max-width: 100%; overflow-wrap: break-word;
  background: linear-gradient(180deg, #FFF8DE 6%, var(--gold-hi) 40%, var(--gold) 70%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .85));
}
.spot__pitch { max-width: 34em; font-size: clamp(16px, min(3.6cqw, 2.9cqh), 20px); line-height: 1.4; color: #EEE8FF; text-shadow: 0 1px 8px rgba(0, 0, 0, .95); }
.spot__play {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; margin-top: clamp(4px, 1.6cqh, 14px); padding: 0 26px 0 30px; border-radius: 999px;
  font: bold 18px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: #1A1204;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #D99A22); box-shadow: 0 10px 28px rgba(245, 194, 66, .4), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.spot__play:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(245, 194, 66, .55), inset 0 1px 0 rgba(255, 255, 255, .7); }
.spot__play svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.spot__play:hover svg { transform: translateX(4px); }
/* the turn's clock: a gold line along the bottom that fills while the spotlight waits to turn to the next game */
.spot__clock { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--gold), rgb(var(--glow))); }
.spot.is-turning .spot__clock { animation: hub-spot-clock 7s linear forwards; }
@keyframes hub-spot-clock { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* a wide short spotlight (above the wall on an iPad held upright): the icon at the left, the words beside it, Play at
   the right, and the line under the name only where it fits */
@container spot (min-aspect-ratio: 8/5) {
  .spot__words { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon kind play" "icon name play" "icon pitch play"; column-gap: clamp(14px, 3cqw, 28px); row-gap: 4px; align-items: end; }
  .spot__icon { grid-area: icon; align-self: end; margin: 0; width: clamp(52px, 26cqh, 96px); }
  .spot__kind { grid-area: kind; }
  .spot__name { grid-area: name; font-size: clamp(26px, min(5.2cqw, 15cqh), 56px); }
  .spot__pitch { grid-area: pitch; }
  .spot__play { grid-area: play; align-self: end; margin: 0; }
  .spot__shade { background: linear-gradient(180deg, rgba(7, 11, 30, .1) 0%, rgba(7, 11, 30, 0) 30%, rgba(7, 11, 30, .82) 72%, rgba(7, 11, 30, .96) 100%); }
}
@container spot (min-aspect-ratio: 8/5) and (max-height: 300px) { .spot__pitch { display: none; } }
@container spot (max-height: 470px) and (max-aspect-ratio: 8/5) { .spot__pitch { display: none; } }

/* no container queries: no spotlight, the shelves in the page's flow, and the page scrolls as any other page */
@supports not (container-type: size) {
  body.hub { height: auto; min-height: 100vh; overflow: visible; display: block; }
  .hub__main { overflow: visible; }
  .spot { display: none; }
  .doors, .wall { position: static; }
  .shelf__row { min-height: 150px; flex-wrap: wrap; }
  .door { flex: 1 1 200px; min-height: 140px; }
}

/* less motion: nothing drifts, rises, sweeps or turns; the glow and the focus ring still show */
@media (prefers-reduced-motion: reduce) {
  .hub__fog, .hub__sky, .hub__title, .door, .spot, .spot__img.is-on { animation: none; }
  .hub__motes { display: none; }
  .door, .door__art, .door__icon, .spot__img, .spot, .spot__play { transition: none; }
  .door:hover, .door:focus-visible, .door:active { transform: none; }
  .door:hover .door__art, .door:focus-visible .door__art { transform: scale(1.02); }
  .door:hover .door__frame::before, .door:focus-visible .door__frame::before { animation: none; }
  .door:hover .door__icon, .door:focus-visible .door__icon { transform: none; }
  .purse__icon, .purse__item::after { transition: none; }
  .purse__item:hover .purse__icon, .purse__item:focus .purse__icon { transform: none; }
}

.hub__more { flex: none; margin: clamp(4px, 1.4svh, 14px) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 16px; line-height: 1.3; color: var(--dim); }
@media (max-width: 420px) { .hub__more { gap: 2px 10px; } }
.hub__more a { color: var(--muted); text-underline-offset: 3px; }
.hub__more a:hover { color: #fff; }
.hub__install[hidden] { display: none; }
.hub__install-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hub__install-btn:hover, .hub__install-btn:focus-visible { color: #fff; }
.hub__foot { flex: none; padding: 6px var(--gutter) calc(6px + env(safe-area-inset-bottom, 0px)); text-align: center; color: var(--dim); font-size: 11px; line-height: 1.35; background: var(--ink); }
.hub__foot p { margin: 0; }
@media print { .hub__fog, .hub__motes, .films-tab, .films, .bar__news, .news, .spot__clock { display: none; } .door__art, .spot__img { filter: none; transform: none; } }


/* ---------------------------------------------------------------------------------------------- the film library */
/* THE FILM LIBRARY (Goliath, 2026-10-08: "Or a side menu that pops out on The Game Hub that lists all the films"): a tab
 * on the right edge, the Friends tab's twin (js/friends.js puts that one on the left), and a sheet that slides out from
 * the right with every film in three groups (js/hub-films.js). The sheet scrolls inside itself on a short window; the
 * page under it never does. It sits under the films' own player (js/intro-film.js), which covers everything. Like the
 * Friends tab it steps in from an iPhone's island on its side and sits flush on the other (--sotc-edge-r, js/friends.js
 * THE ISLAND'S SIDE, 2026-10-09). */
.films-tab { position: fixed; right: var(--sotc-edge-r, env(safe-area-inset-right, 0px)); top: 46%; z-index: 42; transform: translateY(-50%); display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 12px 6px 12px 7px; border: 1px solid rgba(245, 194, 66, .75); border-right: 0;
  border-radius: 14px 0 0 14px; background: linear-gradient(200deg, #2A1F4E 0%, #131B45 55%, #0B1233 100%); color: var(--gold-hi); cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 231, 160, .25), 0 0 18px rgba(245, 194, 66, .18);
  opacity: .9; transition: opacity .2s, box-shadow .25s; }
.films-tab[hidden] { display: none; }
.films-tab:hover, .films-tab:focus-visible, .films-tab[aria-expanded="true"] { opacity: 1; box-shadow: 0 10px 26px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 231, 160, .35), 0 0 26px rgba(245, 194, 66, .45); }
.films-tab:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.films-tab svg { width: 22px; height: 22px; fill: var(--gold); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.films-tab__word { writing-mode: vertical-rl; font: bold 11px/1 var(--title-font); letter-spacing: .22em; color: var(--gold-hi); text-shadow: 0 1px 2px #000; }

.films { position: fixed; inset: 0; z-index: 950; }
.films[hidden] { display: none; }
.films__scrim { position: absolute; inset: 0; background: rgba(4, 6, 18, .55); opacity: 0; transition: opacity .3s ease; }
.films__sheet { position: absolute; right: 0; top: 0; bottom: 0; width: min(400px, 100vw); display: flex; flex-direction: column;
  background: radial-gradient(120% 60% at 100% 0%, rgba(255, 143, 199, .10), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(245, 194, 66, .10), transparent 60%),
    linear-gradient(190deg, #1B1440 0%, #0E1538 45%, #070B1E 100%);
  border-left: 1px solid rgba(245, 194, 66, .6); box-shadow: -18px 0 40px rgba(0, 0, 0, .6);
  transform: translateX(104%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.films.is-open .films__scrim { opacity: 1; }
.films.is-open .films__sheet { transform: none; }
.films__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px 18px; border-bottom: 1px solid rgba(245, 194, 66, .25); }
.films__title { margin: 0; font: bold 20px/1.2 var(--title-font); letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.films__close { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 231, 160, .35); background: rgba(10, 14, 40, .55); color: #fff; }
.films__close:hover { border-color: var(--gold); }
.films__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.films__groups { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) 18px; }
.films__group-title { margin: 14px 0 2px; font: bold 13px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; color: #C9A8F5; }
.films__group-sub { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.films__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.films__film { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 6px 10px 6px 6px; border-radius: 10px;
  cursor: pointer; text-align: left; color: inherit; font: inherit; background: rgba(26, 18, 48, .85); border: 1px solid #4A3D6E; transition: background .2s, border-color .2s; }
.films__film:hover { background: #2A1F48; border-color: var(--gold); }
.films__film:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.films__pic { flex: none; width: 112px; height: 63px; border-radius: 6px; object-fit: cover; background: #0B0814; }
.films__words { display: grid; gap: 2px; min-width: 0; }
.films__kicker { font-size: 12px; letter-spacing: .03em; color: #C9A8F5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.films__name { font-weight: bold; font-size: 15px; color: #FBF3E7; }
.films__line { font-size: 13px; color: #BFB0DA; }
.films__len { font-size: 12px; color: var(--gold); }
@media (max-width: 420px) { .films__pic { width: 88px; height: 50px; } .films__line { display: none; } }
@media (max-height: 520px) { .films-tab { padding: 8px 5px 8px 6px; } .films-tab__word { font-size: 10px; letter-spacing: .16em; } }
@media (prefers-reduced-motion: reduce) { .films__sheet, .films__scrim, .films-tab { transition: none; } }


/* ---------------------------------------------------------------------------------------------- what's new */
/* WHAT'S NEW (Goliath, 2026-10-20: "we need a what's new as a part of the hub ... so when people log in, they know what's
 * new"): a round sparkle at the start of the bar's end, beside The World, the bar's pills' height to the eye and 44 px to a
 * finger (its box reaches 4 px past its row each way, so the bar is no taller), with a gold dot and a slow glow while a line
 * waits unseen; and its sheet, the Film Library's twin from the right (js/hub-news.js). Each line: its game's icon at the
 * left, the game's name and New beside it, a round gold Play at the right, and the line's words under the name. Every word
 * 16 px or more and every button 44 px (48 on a touch screen), UI-5; the sheet scrolls inside itself, the page never does;
 * its edges step in from an iPhone's camera and home bar (UI-36). */
.bar__news { position: relative; flex: none; width: 44px; height: 44px; margin: -4px 8px -4px 0; padding: 0; border: 0; background: none; color: var(--gold);
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bar__news[hidden] { display: none; }
.bar__news::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(255, 231, 160, .35); background: rgba(10, 14, 40, .55);
  transition: border-color .2s, background .2s, box-shadow .25s; }
.bar__news:hover::before, .bar__news[aria-expanded="true"]::before { border-color: var(--gold); background: rgba(30, 36, 80, .7); }
.bar__news:focus-visible { outline: none; }
.bar__news:focus-visible::before { box-shadow: 0 0 0 3px var(--gold-hi); }
.bar__news svg { position: relative; width: 20px; height: 20px; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.bar__news-dot { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%; display: none;
  background: var(--gold-hi); box-shadow: 0 0 0 2px #0B1233, 0 0 10px rgba(245, 194, 66, .9); }
.bar__news.has-new .bar__news-dot { display: block; }
.bar__news.has-new::before { border-color: rgba(245, 194, 66, .85); animation: news-call 2.4s ease-in-out infinite; }
/* a narrow window has no room for the brand's words beside the sparkle, The World and the one button on one row (from 480
   to 599 wide, the words measured in P052 as on the CI runner), and a narrow phone none for the brand at all: the brand, a
   second way to the World page, gives up its words and then itself while the sparkle shows (else the bar takes a second
   row from the shelves). A guest's gold Sign in is wider than Profile, so a guest's brand steps out a little sooner. */
@media (max-width: 599px) { .hub .bar:has(.bar__news:not([hidden])) .bar__brand span { display: none; } }
@media (max-width: 359px) { .hub .bar:has(.bar__news:not([hidden])) .bar__brand { display: none; } }
@media (max-width: 374px) { .hub .bar:has(.bar__news:not([hidden])):has(.bar__who:not(.is-in)) .bar__brand { display: none; } }
@keyframes news-call { 0%, 100% { box-shadow: 0 0 8px rgba(245, 194, 66, .25); } 50% { box-shadow: 0 0 20px rgba(255, 190, 70, .8); } }

.news { position: fixed; inset: 0; z-index: 950; }
.news[hidden] { display: none; }
.news__scrim { position: absolute; inset: 0; background: rgba(4, 6, 18, .55); opacity: 0; transition: opacity .3s ease; }
.news__sheet { position: absolute; right: 0; top: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column;
  background: radial-gradient(120% 60% at 100% 0%, rgba(255, 143, 199, .10), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(245, 194, 66, .10), transparent 60%),
    linear-gradient(190deg, #1B1440 0%, #0E1538 45%, #070B1E 100%);
  border-left: 1px solid rgba(245, 194, 66, .6); box-shadow: -18px 0 40px rgba(0, 0, 0, .6);
  transform: translateX(104%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.news.is-open .news__scrim { opacity: 1; }
.news.is-open .news__sheet { transform: none; }
.news__top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px 18px; border-bottom: 1px solid rgba(245, 194, 66, .25); }
.news__title { margin: 0; font: bold 20px/1.2 var(--title-font); letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.news__close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 231, 160, .35); background: rgba(10, 14, 40, .55); color: #fff; }
.news__close:hover { border-color: var(--gold); }
.news__close:focus-visible, .news__play:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.news__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.news__days { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) 18px; }
.news__date { margin: 16px 0 8px; font: bold 16px/1.25 var(--font); letter-spacing: .06em; color: #C9A8F5; }
.news__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.news__item { display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; grid-template-areas: "icon head play" "icon text text";
  column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 10px 12px; border-radius: 12px;
  background: rgba(19, 27, 69, .72); border: 1px solid rgba(255, 231, 160, .16); }
.news__item.is-new { border-color: rgba(245, 194, 66, .7); background: linear-gradient(180deg, rgba(58, 44, 22, .55), rgba(19, 27, 69, .72) 70%); }
.news__icon { grid-area: icon; align-self: start; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: #0B0814;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.news__head { grid-area: head; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.news__game { font: bold 18px/1.25 var(--title-font); color: var(--gold-hi); overflow-wrap: anywhere; }
.news__new { flex: none; padding: 2px 9px; border-radius: 999px; font: bold 16px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase;
  color: #1a1204; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.news__text { grid-area: text; margin: 0; font-size: 16px; line-height: 1.45; color: #E9E2F7; }
.news__play { grid-area: play; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; text-decoration: none;
  color: #1a1204; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 4px 14px rgba(245, 194, 66, .3); }
.news__play:hover { background: linear-gradient(180deg, #fff3c9, var(--gold-hi)); }
.news__play svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse) {
  .news__item { grid-template-columns: 48px minmax(0, 1fr) 48px; }
  .news__close, .news__play { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .news__sheet, .news__scrim { transition: none; } .bar__news.has-new::before { animation: none; box-shadow: 0 0 14px rgba(245, 194, 66, .55); } }