/* Spawn Point prototype viewer */
:root {
  --crimson: #CB2742; --ocean: #088897; --ivory: #EAEBE4; --ash: #1D1D1D;
  --bg: #0E0E0E; --line: #2C2C2C; --muted: #9C9C95;
  --f-body: "Montserrat", system-ui, sans-serif;
  --f-hud: "Silkscreen", ui-monospace, monospace;
  --f-display: "Unbounded", "Arial Black", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bar: 52px;
  --s: 0.75;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ivory); font: 400 15px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }

/* ---------- toolbar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--bar);
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 16px;
  padding: 0 14px; background: var(--ash); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar__back { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 13px; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow 200ms ease; }
.bar__brand { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 12px/1 var(--f-display); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.bar__wordmark { height: 15px; width: auto; color: var(--ivory); }
.bar__tag { font: 400 10px/1 var(--f-hud); color: var(--crimson); border: 1px solid rgba(203, 39, 66, 0.5); padding: 4px 6px; border-radius: 4px; letter-spacing: 0.05em; }
.bar__title { justify-self: center; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 34px; padding: 0 14px; border-radius: 8px; font-weight: 600; font-size: 13.5px; background: #1A1A1A; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: box-shadow 200ms ease; }
.bar__caret { color: var(--muted); font-size: 11px; }
.bar__actions { display: flex; gap: 8px; }
.bbtn { height: 34px; padding: 0 12px; border-radius: 999px; font: 400 11px/1 var(--f-hud); letter-spacing: 0.05em; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out); }
.bbtn:active { transform: scale(0.97); }
.bbtn--quest { background: var(--crimson); box-shadow: none; }
.bbtn[aria-pressed="true"] { background: var(--ocean); box-shadow: none; }
.bbtn--icon { width: 34px; padding: 0; font: 600 16px/1 var(--f-body); }
@media (hover: hover) and (pointer: fine) {
  .bar__back:hover, .bar__title:hover, .bbtn:not(.bbtn--quest):not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1.5px #555; }
  .bbtn--quest:hover { box-shadow: inset 0 0 0 1.5px var(--ivory); }
}
@media (max-width: 900px) { .bar__tag { display: none; } }
@media (max-width: 640px) {
  .bar { grid-template-columns: auto 1fr auto; gap: 8px; padding: 0 8px; }
  .bar__brand, .bar__back-l { display: none; }
  .bar__title { justify-self: stretch; font-size: 12px; padding: 0 10px; }
  .bbtn:not(.bbtn--quest):not(.bbtn--icon) { display: none; }
}

.narrow { position: fixed; z-index: 19; top: var(--bar); left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--ocean); font-size: 12.5px; font-weight: 600; }
.narrow p { margin: 0; }
.narrow[hidden] { display: none; }

/* ---------- stage & screens ---------- */
.stage { position: relative; max-width: 1920px; margin: 0 auto; padding-top: var(--bar); min-height: 100vh; }
.scr { position: relative; width: 100%; background: #1D1D1D; user-select: none; -webkit-user-select: none; }
.scr.is-entering { position: absolute; left: 0; right: 0; top: var(--bar); z-index: 7; background: transparent; }   /* the arriving screen, over the one it replaces, header included (proto.js transition) */
.scr__head { position: sticky; top: var(--bar); z-index: 6; height: calc(var(--s) * var(--head) * 1px); }
.scr__clip { position: absolute; inset: 0; overflow: hidden; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.8); }
.scr__clip img, .scr__img { width: 100%; height: auto; -webkit-user-drag: none; }
.scr__hl { position: absolute; inset: 0; }
.scr__page { position: relative; margin-top: calc(var(--s) * var(--head) * -1px); }
.scr__hs { position: absolute; inset: 0; }

/* hotspots */
.hs {
  position: absolute;
  left: calc(var(--s) * var(--x) * 1px); top: calc(var(--s) * var(--y) * 1px);
  width: calc(var(--s) * var(--w) * 1px); height: calc(var(--s) * var(--hh) * 1px);
  border-radius: 6px; cursor: pointer; background: transparent; outline-offset: 0;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.hs--block, .hs--dismiss { cursor: default; border-radius: 0; }
.hs--dismiss { cursor: pointer; }
.hs:focus-visible { outline: 2px solid var(--ivory); box-shadow: 0 0 0 4px rgba(203, 39, 66, 0.8); }
@media (hover: hover) and (pointer: fine) { .hs:not(.hs--block):not(.hs--dismiss):hover { background: rgba(234, 235, 228, 0.07); } }
.is-flash .hs:not(.hs--block):not(.hs--dismiss), .show-hs .hs:not(.hs--block):not(.hs--dismiss) { background: rgba(8, 136, 151, 0.22); box-shadow: inset 0 0 0 2px rgba(8, 196, 214, 0.85); }
.is-flash .hs:not(.hs--block):not(.hs--dismiss) { animation: hsflash 900ms ease forwards; }
@keyframes hsflash { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

.hs.is-quest { box-shadow: 0 0 0 3px var(--crimson), 0 0 0 7px rgba(203, 39, 66, 0.25); animation: questpulse 1.6s ease-in-out infinite; z-index: 3; }
@keyframes questpulse { 0%, 100% { box-shadow: 0 0 0 3px var(--crimson), 0 0 0 6px rgba(203, 39, 66, 0.3); } 50% { box-shadow: 0 0 0 3px var(--crimson), 0 0 0 14px rgba(203, 39, 66, 0); } }
@media (prefers-reduced-motion: reduce) { .hs.is-quest { animation: none; } .is-flash .hs { animation: none; } }

/* header overlays */
.ov {
  position: absolute; z-index: 8;
  left: calc(var(--s) * var(--x) * 1px); top: calc(var(--s) * var(--y) * 1px);
  width: calc(var(--s) * var(--w) * 1px); height: calc(var(--s) * var(--hh) * 1px);
  border-radius: calc(var(--s) * 12px); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.8);
}
.ov.is-closing { pointer-events: none; }
.ov img { width: 100%; height: 100%; border-radius: inherit; }
@keyframes ovin { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
.scrim { position: fixed; inset: 0; z-index: 5; }
.scrim[hidden] { display: none; }

/* ---------- quest card ---------- */
.quest {
  position: fixed; z-index: 18; left: 14px; bottom: 14px; width: min(340px, calc(100vw - 28px));
  padding: 14px 16px 14px; border-radius: 12px; background: rgba(18, 18, 18, 0.96); border: 1px solid #333;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.9), inset 3px 0 0 var(--crimson);
  animation: ovin 220ms var(--ease-out);
}
.quest[hidden] { display: none; }
.quest p { margin: 0; }
.quest__k { font: 400 11px/1.4 var(--f-hud); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.quest__k span:first-child { color: var(--crimson); }
.quest__step { font: 400 10px/1 var(--f-hud); color: var(--muted); margin-top: 8px !important; letter-spacing: 0.05em; text-transform: uppercase; }
.quest__tip { font-weight: 600; font-size: 15px; line-height: 1.4; margin-top: 6px !important; }
.quest__btns { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.qbtn { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; box-shadow: inset 0 0 0 1.5px #3A3A3A; transition: box-shadow 200ms ease, transform 160ms var(--ease-out); }
.qbtn:active { transform: scale(0.97); }
.qbtn--go { background: var(--crimson); box-shadow: none; }
.qbtn--quit { margin-left: auto; color: var(--muted); }
.qbtn[hidden] { display: none; }

/* ---------- toasts ---------- */
.ptoasts { position: fixed; z-index: 30; right: 14px; bottom: 14px; display: grid; gap: 8px; justify-items: end; pointer-events: none; width: min(360px, calc(100vw - 28px)); }
.ptoast { display: grid; gap: 3px; padding: 11px 14px; border-radius: 10px; background: #111; border: 1px solid #333; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.9); font-weight: 600; font-size: 13.5px; opacity: 1; transform: none; transition: opacity 400ms ease, transform 560ms cubic-bezier(0.34, 1.45, 0.64, 1); }
@starting-style { .ptoast { opacity: 0; transform: translateY(70%) scale(0.94); } }
.ptoast.is-out { opacity: 0; transform: translateY(100%); }
.ptoast__k { font: 400 10px/1.2 var(--f-hud); letter-spacing: 0.06em; text-transform: uppercase; color: var(--crimson); }
@media (max-width: 640px) { .ptoasts { left: 14px; right: 14px; width: auto; bottom: 150px; } }

/* ---------- dialogs ---------- */
.dlg { border: 0; padding: 0; background: transparent; color: var(--ivory); max-width: min(620px, calc(100vw - 24px)); width: 100%; opacity: 0; transform: scale(0.96); transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), overlay 250ms allow-discrete, display 250ms allow-discrete; }
.dlg[open] { opacity: 1; transform: none; }
@starting-style { .dlg[open] { opacity: 0; transform: scale(0.96); } }
.dlg::backdrop { background: rgba(6, 6, 6, 0.72); backdrop-filter: blur(4px); }
.dlg__in { background: #151515; border: 1px solid #2E2E2E; border-radius: 16px; padding: clamp(20px, 3vw, 32px); max-height: calc(100vh - 40px); overflow: auto; }
.dlg__k { font: 400 11px/1 var(--f-hud); letter-spacing: 0.06em; text-transform: uppercase; color: var(--crimson); margin: 0 0 12px; }
.dlg h1 { font: 800 clamp(2rem, 5vw, 3rem)/1 var(--f-display); margin: 0 0 14px; letter-spacing: -0.02em; }
.dlg h2 { font: 800 1.4rem/1.1 var(--f-display); margin: 0; }
.dlg__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dlg__lede { color: #C9CAC2; margin: 0 0 18px; }
.dlg__lbl { font: 400 11px/1 var(--f-hud); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.dclose { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #333; }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qitem { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 10px; background: #1D1D1D; box-shadow: inset 0 0 0 1px #2C2C2C; transition: box-shadow 200ms ease, background-color 200ms ease; }
.qitem strong { display: block; font-size: 15px; }
.qitem small { display: block; color: var(--muted); font-size: 12.5px; }
.qitem__n { font: 400 11px/1 var(--f-hud); color: var(--crimson); }
.qitem__len { font: 400 10px/1 var(--f-hud); color: var(--muted); text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .qitem:hover { box-shadow: inset 0 0 0 1.5px var(--crimson); background: #221A1B; } }
.dlg__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.dbtn { height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 600; box-shadow: inset 0 0 0 1.5px #444; transition: transform 160ms var(--ease-out); }
.dbtn:active { transform: scale(0.97); }
.dlink { color: var(--muted); font-size: 13px; }
.dlg--screens { max-width: min(980px, calc(100vw - 24px)); }
.slist section + section { margin-top: 18px; }
.slist h3 { font: 400 11px/1 var(--f-hud); letter-spacing: 0.06em; text-transform: uppercase; color: var(--crimson); margin: 0 0 10px; }
.slist ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.sitem { width: 100%; text-align: left; display: grid; gap: 6px; padding: 6px; border-radius: 10px; background: #1B1B1B; box-shadow: inset 0 0 0 1px #2C2C2C; font-size: 12.5px; font-weight: 600; transition: box-shadow 200ms ease; }
.sitem img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 6px; background: #111; }
.sitem span { padding: 0 2px 2px; line-height: 1.3; }
.sitem.is-current { box-shadow: inset 0 0 0 2px var(--crimson); }
@media (hover: hover) and (pointer: fine) { .sitem:hover { box-shadow: inset 0 0 0 1.5px #555; } }

/* ---------- live header labels (drawn over the picture's own, which can highlight the wrong section) ---------- */
.nfx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.nf { position: absolute; left: calc(var(--s) * (var(--x) - 4) * 1px); top: calc(var(--s) * (var(--y) - 4) * 1px); width: calc(var(--s) * (var(--w) + 8) * 1px); height: calc(var(--s) * (var(--h) + 8) * 1px); background: #EAEBE4; color: #353535; }
.nfx__ink { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--s) * var(--lq-r) * 1px) 0 calc(var(--s) * var(--lq-l) * 1px)); }
.nfx__ink .nf { background: none; color: var(--crimson); }   /* the lit label is a crimson copy, seen through the ink's window */
.nf svg { position: absolute; left: calc(var(--s) * 4px); top: calc(var(--s) * 4px); width: calc(var(--s) * var(--w) * 1px); height: calc(var(--s) * var(--h) * 1px); }

/* ---------- live widgets over a screen's picture: design px inside, zoomed to the screen's scale ---------- */
.wg { position: absolute; z-index: 2; left: calc(var(--s) * var(--x) * 1px); top: calc(var(--s) * var(--y) * 1px); width: calc(var(--s) * var(--w) * 1px); height: calc(var(--s) * var(--hh) * 1px); }
.wg__z { position: relative; width: calc(var(--w) * 1px); height: calc(var(--hh) * 1px); zoom: var(--s); }
.wg__back { position: absolute; inset: 0; width: 100%; height: 100%; }
.scr__page > .hs { z-index: 3; }   /* a widget's own arrows and thumbnails sit above it */
.hs--round { border-radius: 50%; }
.dot { position: absolute; width: 35px; height: 8px; border-radius: 20px; background: #272727; }
.dot--sm { width: 27.674px; height: 6.326px; border-radius: 15.8px; }
.dot--light { background: #E0E0E0; }
.dot--on { left: calc(var(--lq-l) * 1px); width: calc((var(--lq-r) - var(--lq-l)) * 1px); background: var(--crimson); transition: var(--lq-tr); }

/* featured gallery */
.gal { position: absolute; inset: 0; overflow: hidden; border-radius: 10px; background: #111; cursor: zoom-in; }
.gal__track { display: flex; width: 100%; height: 100%; transition: transform 640ms var(--ease-out); }
.gal__slide { position: relative; flex: none; width: 100%; height: 100%; overflow: hidden; }
.gal__slide img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.gal__zoom { position: absolute; right: 18px; top: 18px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(17, 17, 17, 0.62); color: var(--ivory); font-size: 22px; opacity: 0; transform: scale(0.9); transition: opacity 200ms ease, transform 200ms ease; }
.gal:hover .gal__zoom, .gal:focus-visible .gal__zoom { opacity: 1; transform: none; }
.gal-thumb { border-radius: 5px; transition: box-shadow 200ms ease; }


/* card strips: the Store home rows, the game page's similar games, the category rows (design px, from the Figma file) */
.strip__clip { position: absolute; overflow: hidden; }
.strip__track { position: absolute; inset: 0; transition: transform 700ms var(--ease-out); }
.strip__track.is-loop { inset: auto; display: flex; align-items: flex-start; transition-duration: 560ms; }
.u { position: absolute; }
.is-loop > .u { position: relative; flex: none; }
.u__frame { position: absolute; left: 0; top: 0; width: 435px; height: 237px; border-radius: 15px; background: #272727; }
.u__art { position: absolute; overflow: hidden; border-radius: 5px; background: #1a1a1a;
  box-shadow: 70px 65px 27px rgba(0, 0, 0, 0.01), 45px 42px 25px rgba(0, 0, 0, 0.08), 25px 24px 21px rgba(0, 0, 0, 0.28), 11px 10px 15px rgba(0, 0, 0, 0.47), 3px 3px 8px rgba(0, 0, 0, 0.54); }
.u__art img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 500ms var(--ease-out); }
.u__art:hover img { transform: scale(1.04); }
.u__name { position: absolute; margin: 0; font: 800 22px/27px var(--f-body); color: var(--ivory); white-space: nowrap; }
.u__btn { position: absolute; width: 46px; height: 44px; border-radius: 3px; background: #353535; color: var(--ivory); display: grid; place-items: center; transition: background-color 160ms ease; }
.u__btn:hover, .u__wish:hover { background: #444; }
.u [aria-pressed="true"] svg { animation: hpop 380ms var(--ease-out); }
@keyframes hpop { 40% { transform: scale(1.35); } }
.u__price { position: absolute; display: flex; align-items: center; gap: 5.45px; font: 800 18px/22px var(--f-body); color: var(--ivory); }
.coin { width: 18.6px; height: 18.6px; display: grid; place-items: center; }
.coin svg { width: 18.6px; height: 18.42px; transform: rotate(-45deg); }   /* the design's coin is 18.6 px, turned 45° */
.u__rent, .u__play, .u__view { position: absolute; color: var(--ivory); transition: background-color 160ms ease, transform 120ms ease; }
.u__rent, .u__play { width: 113px; height: 44px; font: 800 18px/22px var(--f-body); }
.u__rent { border-radius: 3px; background: var(--crimson); }
.u__rent:hover { background: #DA3550; }
.u__rent:active, .u__play:active, .u__view:active { transform: scale(0.97); }

/* rent cards (recommended, new and trending) and special offers */
.u--rent, .u--offer { width: 435px; height: 343px; }
.u--rent .u__art, .u--offer .u__art { left: 15px; top: var(--art-top, 25px); width: 405px; height: 197px; }
.u--rent .u__name, .u--offer .u__name { left: 15px; top: 237px; }
.u--rent .u__btn, .u--offer .u__btn { top: 285px; }
.u__b1 { left: 15px; }
.u__b2 { left: 69px; }
.u--rent .u__price { right: 148px; top: 296px; }
.u--rent .u__rent, .u--offer .u__rent { left: 307px; top: 285px; }
.u__until { position: absolute; right: 15px; top: 247px; font: 600 12px/15px var(--f-body); color: var(--ivory); white-space: nowrap; }
.u__was, .u__now { position: absolute; white-space: nowrap; }
.u__was { left: 175px; top: 282px; font: 800 18px/25px "Nunito Sans", var(--f-body); color: #4E4E4E; }
.u__was s { text-decoration: none; }
.u__was::after { content: ""; position: absolute; left: -24px; top: 12px; width: 60px; height: 1px; background: #4E4E4E; }
.u__now { left: 176px; top: 309px; font: 800 18px/22px var(--f-body); color: var(--ivory); }
.u__was .coin, .u__now .coin { position: absolute; width: 14px; height: 14px; }
.u__was .coin { left: -21.25px; top: 4.75px; }
.u__now .coin { left: -22px; top: 4px; }
.coin--s svg { width: 14.1px; height: 13.96px; }
.u__off { position: absolute; left: 225px; top: 285px; width: 74px; height: 44px; border-radius: 5px; background: #007738; display: grid; place-items: center; font: 800 18px/22px var(--f-body); color: var(--ivory); }

/* the game page's similar games: the same card, smaller */
.u--sm { width: 343.954px; height: 271px; }
.u--sm .u__frame { width: 343.954px; height: 187.395px; border-radius: 11.86px; }
.u--sm .u__art { left: 11.86px; top: 15.82px; width: 320.233px; height: 155.767px; }
.u--sm .u__name { left: 11.86px; top: 187.4px; font-size: 17.395px; line-height: 21.2px; text-transform: capitalize; }
.u--sm .u__btn { top: 225.35px; width: 36.372px; height: 34.791px; border-radius: 3.953px; }
.u--sm .u__b1 { left: 11.86px; }
.u--sm .u__b2 { left: 54.56px; }
.u--sm .u__btn svg { width: 15.8px; height: auto; }
.u--sm .u__price { right: 117.25px; top: 234.05px; gap: 4.35px; font-size: 14.233px; line-height: 17.35px; }
.u--sm .coin { width: 14.69px; height: 14.69px; }
.u--sm .coin svg { width: 14.69px; height: 14.55px; }
.u--sm .u__rent { left: 242.74px; top: 225.35px; width: 89.349px; height: 34.791px; border-radius: 3.953px; font-size: 14.233px; line-height: 17.35px; }

/* most popular */
.u--pop { width: 318px; height: 318px; }
.u--pop .u__art { left: 15px; top: 15px; width: 288px; height: 177px; }
.u--pop .u__name { left: 14px; top: 212px; }
.u--pop .u__btn { left: 14px; top: 260px; }
.u--pop .u__price { display: block; left: 141px; top: 271px; }
.u--pop .u__price .coin { position: absolute; left: -24.05px; top: 1.95px; }
.u--pop .u__rent { left: 190px; top: 260px; border-radius: 5px; }

/* top upcoming */
.u--upc { width: 435px; height: 290px; }
.u--upc .u__art { left: 15px; top: 19px; width: 405px; height: 197px; }
.u--upc .u__name { left: 15px; top: 236px; }
.u__wish { position: absolute; left: 303px; top: 241px; width: 117px; height: 44px; padding-left: 13px; border-radius: 3px; background: #353535; display: flex; align-items: center; gap: 4px; font: 600 16px/20px var(--f-body); color: var(--ivory); transition: background-color 160ms ease; }

/* recently updated */
.u--upd { width: 592px; height: 338px; }
.u__panel { position: absolute; left: 128px; top: 0; width: 464px; height: 338px; border-radius: 15px; background: #272727; }
.u--upd .u__art { left: 0; top: 16px; width: 312px; height: 308px;
  box-shadow: 39px 53px 19px rgba(0, 0, 0, 0.01), 25px 34px 17px rgba(0, 0, 0, 0.04), 14px 19px 14px rgba(0, 0, 0, 0.15), 6px 8px 11px rgba(0, 0, 0, 0.26), 2px 2px 6px rgba(0, 0, 0, 0.29); }
.u--upd .u__name { left: 335px; top: 19px; font-size: 18px; line-height: 22px; }
.u__blurb { position: absolute; left: 335px; top: 54px; width: 234px; margin: 0; font: 300 14px/17.07px var(--f-body); color: var(--ivory); }
.u--upd .u__btn { top: 278px; }
.u--upd .u__b1 { left: 320px; }
.u--upd .u__b2 { left: 374px; }
.u__view { left: 440px; top: 278px; width: 133px; height: 44px; border-radius: 5px; background: var(--ocean); font: 600 16px/20px var(--f-body); }
.u__view:hover { background: #0A9DAD; }

/* free games: a column of three */
.u--free { width: 681px; height: 429px; }
.u__tile { position: absolute; left: 0; width: 681px; height: 131px; border-radius: 5px; background: #202020;
  box-shadow: 39px 17px 17px rgba(0, 0, 0, 0.04), 22px 9px 14px rgba(0, 0, 0, 0.13), 10px 4px 11px rgba(0, 0, 0, 0.21), 2px 1px 6px rgba(0, 0, 0, 0.25); }
.u--free .u__art { left: 15px; top: 15px; width: 285px; height: 101px; box-shadow: none; }
.u--free .u__name { left: 320px; top: 20px; text-transform: capitalize; }
.u--free .u__btn { top: 72px; }
.u--free .u__b1 { left: 320px; }
.u--free .u__b2 { left: 374px; }
.u__free { position: absolute; left: 506px; top: 84px; font: 600 16px/20px var(--f-body); color: var(--ivory); }
.u__play { left: 553px; top: 72px; border-radius: 5px; background: #007738; }
.u__play:hover { background: #008A41; }

/* category rows: Store home's small tiles, Browse's larger ones */
.wg-cat .wg__z { background: #111; }   /* Store home's row has no backing picture; Browse's covers this */
.u--cat { width: 210px; height: 112px; }
.u__cat { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; background: #272727; }
.u__cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; transition: opacity 220ms ease, transform 500ms var(--ease-out); }
.u__cat span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 22px/27px var(--f-body); color: var(--ivory); }
.u__cat:hover img { opacity: 0.45; transform: scale(1.06); }
.u--browse { width: 237px; height: 126px; }
.u--browse .u__cat { border-radius: 5px; box-shadow: 23px 25px 14px rgba(0, 0, 0, 0.04), 13px 14px 12px rgba(0, 0, 0, 0.13), 6px 6px 9px rgba(0, 0, 0, 0.21), 1px 2px 5px rgba(0, 0, 0, 0.25); }
.u--browse .u__cat img { opacity: 0.6; }
.u--browse .u__cat:hover img { opacity: 0.78; }

/* the enlarged view */
.plb { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 8, 8, 0.94); color: var(--ivory); }
.plb::backdrop { background: transparent; }
.plb[open] { animation: plbin 220ms ease both; }
@keyframes plbin { from { opacity: 0; } }
.plb__fig { position: absolute; inset: 70px 100px 50px; margin: 0; display: grid; place-items: center; align-content: center; gap: 14px; }
.plb__fig img { max-width: 100%; max-height: calc(100dvh - 170px); border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); animation: plbimg 320ms var(--ease-out) both; }
@keyframes plbimg { from { opacity: 0; transform: scale(0.97); } }
.plb__cap { font: 600 13px/1.4 var(--f-body); color: var(--muted); }
.plb__close, .plb__nav { position: absolute; display: grid; place-items: center; border-radius: 50%; background: rgba(234, 235, 228, 0.1); color: var(--ivory); transition: background-color 160ms ease; }
.plb__close:hover, .plb__nav:hover { background: rgba(234, 235, 228, 0.2); }
.plb__close { top: 18px; right: 18px; width: 46px; height: 46px; font-size: 20px; }
.plb__nav { top: 50%; width: 56px; height: 56px; margin-top: -28px; font-size: 32px; line-height: 1; }
.plb__prev { left: 24px; }
.plb__next { right: 24px; }
@media (max-width: 700px) { .plb__fig { inset: 64px 12px 40px; } .plb__nav { top: auto; bottom: 18px; margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .gal__track, .strip__track { transition: none; } .plb[open], .plb__fig img { animation: none; } }

/* ---------- smart animate ----------
   Liquid selections: .lq shapes are placed by four registered numbers in design px. When they change, the edge leading
   the move arrives first and the trailing edge follows (proto.js `place`), so a selection stretches towards its new
   place, then settles: the header's ink, the sub-navigation block, the settings row, selection rings and carousel dashes. */
@property --lq-l { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --lq-t { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --lq-r { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --lq-b { syntax: "<number>"; inherits: false; initial-value: 0; }
:root {
  --liquid: cubic-bezier(0.3, 0.75, 0.25, 1);
  --lq-tr: --lq-l var(--dl, 480ms) var(--liquid), --lq-t var(--dt, 480ms) var(--liquid), --lq-r var(--dr, 480ms) var(--liquid), --lq-b var(--db, 480ms) var(--liquid);
}
.lq { transition: var(--lq-tr); }
/* the sub-navigation, drawn live over the picture's: the bar, the lit block, then the tab labels (_dev/play/nav_assets.py) */
.snx { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; left: calc(var(--s) * var(--x0) * 1px); top: calc(var(--s) * var(--y0) * 1px); width: calc(var(--s) * (var(--x1) - var(--x0)) * 1px); height: calc(var(--s) * (var(--y1) - var(--y0)) * 1px); }
.snx__blk { position: absolute; top: 0; bottom: 0; left: calc(var(--s) * (var(--lq-l) - var(--x0)) * 1px); width: calc(var(--s) * max(0, var(--lq-r) - var(--lq-l)) * 1px); background: var(--bc, var(--crimson)); transition: var(--lq-tr), background-color 300ms ease; }
.snx__lbl { position: absolute; inset: 0; width: 100%; height: 100%; }
/* selection rings (rent and session tiles, gallery thumbnails) and the settings row, in page coordinates */
.lqring, .mblk { position: absolute; pointer-events: none; left: calc(var(--s) * var(--lq-l) * 1px); top: calc(var(--s) * var(--lq-t) * 1px); width: calc(var(--s) * max(0, var(--lq-r) - var(--lq-l)) * 1px); height: calc(var(--s) * max(0, var(--lq-b) - var(--lq-t)) * 1px); }
.lqring { z-index: 4; border-radius: 8px; box-shadow: 0 0 0 3px var(--crimson), 0 0 24px rgba(203, 39, 66, 0.6); transition: var(--lq-tr), opacity 220ms ease; }
.lqring--thumb { border-radius: 5px; box-shadow: inset 0 0 0 3px var(--crimson); }
.mblk { z-index: 1; background: #363636; mix-blend-mode: lighten; }   /* the settings row's grey: lightens the dark page, leaves the white labels white */
.mpatch, .cut { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; }
.cut { z-index: 5; border-radius: calc(var(--s) * 10px); }   /* under the sticky header (6) */
.mpatch img, .cut img { position: absolute; max-width: none; height: auto; }
/* selection tiles: the plain sheet over the picture, the selected sheet revealed on the chosen tile (_dev/play/tile_assets.py) */
.tsel { position: absolute; overflow: hidden; pointer-events: none; left: calc(var(--s) * var(--x) * 1px); top: calc(var(--s) * var(--y) * 1px); width: calc(var(--s) * var(--w) * 1px); height: calc(var(--s) * var(--hh) * 1px); }
.tsel__on { position: absolute; inset: 0; }
.tsel img { position: absolute; left: calc(var(--s) * var(--ox) * 1px); top: calc(var(--s) * var(--oy) * 1px); width: calc(var(--s) * var(--rw) * 1px); max-width: none; height: auto; }
/* a press: a soft ivory blob from the pointer */
.rpl { position: absolute; z-index: 5; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  background: radial-gradient(circle, rgba(234, 235, 228, 0.3) 0, rgba(234, 235, 228, 0.12) 45%, rgba(234, 235, 228, 0) 70%); animation: rpl 660ms var(--liquid) forwards; }
@keyframes rpl { from { transform: scale(0) rotate(0deg); opacity: 1; } 55% { opacity: 0.9; } to { transform: scale(1) rotate(50deg); opacity: 0; } }
.hs:not(.hs--block):not(.hs--dismiss), .u__btn, .u__rent, .u__play, .u__view, .u__wish { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lq, .lqring, .snx__blk, .dot--on { transition: none; } .rpl { display: none; } }