/* Rojeh Video Games: built from the pitch deck. Cream paper, iridescent haze, thin display caps, black R-star. */
@font-face { font-family: "TAN Moncheri"; src: url(assets/fonts/TAN-MONCHERI.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "TT Commons Pro"; src: local("TT Commons Pro"), local("TTCommonsPro-Rg"); font-display: swap; }

:root {
  --paper: #f4f0ec; --ink: #141414; --soft: #4a4650; --line: rgba(20, 20, 20, .12);
  --display: "TAN Moncheri", "Italiana", serif;
  --body: "TT Commons Pro", "Figtree", system-ui, sans-serif;
  --pad: clamp(22px, 5vw, 90px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.45 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: #f08bd0; color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
h2 { font-size: clamp(42px, 6.2vw, 104px); line-height: .96; text-transform: uppercase; letter-spacing: -.02em; }
h3 { font-size: clamp(32px, 3.6vw, 56px); line-height: 1.08; }
.center { text-align: center; }
.lead { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.42; margin: 0; }
.kicker, .corner { font: 400 15px/1.2 var(--body); text-transform: uppercase; letter-spacing: .04em; margin: 0; }

/* film grain over everything (static, no blending = cheap) */
.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; background: url(assets/deck/grain.png); opacity: .35; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 20px var(--pad); transition: background .4s, padding .4s, box-shadow .4s; }
.nav.solid { background: rgba(244, 240, 236, .72); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); padding-block: 12px; box-shadow: 0 1px 0 var(--line); }
.nav-logo img { height: 34px; width: auto; transition: transform .5s var(--ease); }
.nav-logo:hover img { transform: rotate(-8deg) scale(1.08); }
.nav nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.nav nav a { font-size: 15px; text-decoration: none; }
.nav nav a:not(.pill) { background: linear-gradient(var(--ink), var(--ink)) left 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.nav nav a:not(.pill):hover { background-size: 100% 1px; }
.pill, .acts a { display: inline-block; padding: 11px 20px; border-radius: 999px; background: var(--ink); color: var(--paper) !important; text-decoration: none; font: 500 15px/1 var(--body); transition: transform .3s var(--ease), background .3s, color .3s; }
.pill:hover, .acts a:hover { transform: translateY(-2px); background: #2c2733; }
.acts a.ghost { background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink); }
.acts a.ghost:hover { background: var(--ink); color: var(--paper) !important; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- haze: the deck's iridescent background ---------- */
.haze { position: relative; overflow: hidden; isolation: isolate; }
.haze > .blob { position: absolute; z-index: -1; width: clamp(420px, 62vw, 1100px); max-width: none; pointer-events: none; opacity: .9; animation: drift 38s ease-in-out infinite alternate; animation-play-state: paused; }
.haze.live > .blob { animation-play-state: running; }
.haze > .cover-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.haze > .cover-art.faint { opacity: .16; }
@keyframes drift { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(4%, -3%) rotate(6deg) scale(1.05); } 100% { transform: translate(-3%, 4%) rotate(-5deg); } }
.b-a { left: -12%; top: -10%; } .b-b { right: -14%; top: 10%; animation-duration: 46s !important; } .b-c { left: 20%; bottom: -40%; animation-duration: 52s !important; }
.b-d { right: -20%; top: -30%; } .b-e { left: -25%; bottom: -35%; animation-duration: 50s !important; }
.b-f { left: -20%; top: -20%; } .b-g { right: -18%; bottom: -30%; animation-duration: 48s !important; }
.b-h { left: -10%; top: -25%; } .b-i { right: -20%; bottom: -30%; animation-duration: 44s !important; }
.b-j { left: 30%; top: -40%; opacity: .55 !important; } .b-k { right: -30%; bottom: -40%; opacity: .6 !important; }
.b-l { left: 10%; top: -20%; } .b-m { right: -20%; bottom: -30%; }
.b-n { left: -40%; bottom: -40%; }
.b-o { left: -15%; top: -20%; } .b-p { right: -10%; bottom: -35%; }
.b-q { left: 10%; top: -20%; } .b-r { right: -25%; top: 0; } .b-s { left: -20%; bottom: -30%; }
.soft > .blob { opacity: .55; }
.rose { background: #f3e6ea; }
.aqua { background: #eee7f0; }

/* ---------- stars (like the deck: little white pixel stars) ---------- */
.stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.stars i { position: absolute; width: 18px; height: 16px; background: url(assets/sprites/star.png) center / contain no-repeat; image-rendering: pixelated; filter: brightness(0) invert(1); opacity: .85; animation: tw var(--t) steps(3, end) var(--d) infinite; }
@keyframes tw { 50% { opacity: .2; } }

/* ---------- 1 cover ---------- */
.cover { min-height: 100svh; display: grid; place-items: center; padding: 100px var(--pad) 70px; background: #d9c9df; }
.corner { position: absolute; z-index: 2; }
.tl { left: var(--pad); top: 96px; } .tc { left: 50%; top: 96px; translate: -50% 0; } .tr { right: var(--pad); top: 96px; }
.bl { left: var(--pad); bottom: 50px; font-size: clamp(16px, 1.6vw, 24px); }
.br { right: var(--pad); bottom: 50px; text-align: left; font-size: 13px; }
.br b { display: block; font-size: clamp(16px, 1.6vw, 24px); font-weight: 700; }
.mark { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.mark-r { height: clamp(96px, 14vw, 230px); width: auto; transition: transform .8s var(--ease); }
.mark:hover .mark-r { transform: rotate(-6deg); }
.mark-word { height: clamp(84px, 12.4vw, 204px); width: auto; }
.glow { position: absolute; z-index: 0; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 140, 220, .55), transparent); pointer-events: none; opacity: 0; transition: opacity .6s; }
.cover:hover .glow { opacity: 1; }
.mark, .corner { animation: rise 1.2s var(--ease) both; }
.corner { animation-delay: .35s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* ---------- slides ---------- */
.slide { padding: clamp(110px, 12vw, 170px) var(--pad); }
.slide > *:not(.blob):not(.cover-art) { max-width: 1400px; margin-left: auto; margin-right: auto; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: start; }
.split.mid { align-items: center; }
.wide { position: relative; margin: clamp(50px, 6vw, 90px) auto 0; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 1; }
.wide img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.wide:hover img { transform: scale(1.03); }
.wide.dark { background: #1a1c2c; }
.wide figcaption { position: absolute; right: 22px; bottom: 16px; z-index: 2; color: #fff; font-style: italic; font-size: clamp(14px, 1.3vw, 20px); text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.wide.banner { aspect-ratio: 3.8 / 1; }
.wide-lead { max-width: 1400px; margin-top: 26px !important; }

/* ---------- 4 games ---------- */
#games h2 { margin-bottom: clamp(40px, 5vw, 70px); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 30px); }
.card { background: rgba(255, 255, 255, .42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 14px; padding: 18px 22px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform .5s var(--ease), background .4s; }
.card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .6); }
.cap { font-style: italic; text-transform: uppercase; font-size: clamp(15px, 1.3vw, 19px); margin: 0 0 14px; }
.card-art { width: 100%; aspect-ratio: 1; border-radius: 4px; overflow: hidden; }
.card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.card:hover .card-art img { transform: scale(1.05); }
.card > p:not(.cap) { margin: 16px 0 20px; font-size: 17px; line-height: 1.38; flex: 1; }
.card .acts { justify-content: center; }
.card .acts a { padding: 9px 14px; font-size: 13px; }

/* ---------- 5 trust ---------- */
.trust { text-align: center; background: #f6efea; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: clamp(50px, 6vw, 80px) auto !important; }
.stats > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.num { font: 400 clamp(84px, 13vw, 210px)/.9 var(--display); letter-spacing: -.03em; }
.stats sup { font: 300 clamp(30px, 3.4vw, 54px)/1 var(--body); margin-top: .3em; }
.stats p { flex-basis: 100%; margin: 14px 0 0; text-transform: uppercase; font-size: clamp(15px, 1.4vw, 21px); }
.trust blockquote { margin: 0 auto; max-width: 900px !important; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.38; }

/* ---------- 6 players ---------- */
.players { background: #efe4ef; }
.split.top { align-items: center; }
.reviews { display: grid; gap: 14px; }
.review { background: rgba(255, 255, 255, .88); border-radius: 14px; padding: 18px 22px; box-shadow: 0 10px 30px rgba(60, 30, 80, .08); transition: transform .5s var(--ease); }
.review:hover { transform: translateX(-6px) rotate(-.4deg); }
.review:nth-child(2) { margin-left: clamp(0px, 3vw, 40px); }
.review .stars5 { margin: 0; letter-spacing: 2px; font-size: 18px; }
.review h4 { margin: 4px 0 0; font: 500 17px var(--body); }
.review .meta { margin: 0 0 8px; color: #8a8590; font-size: 13px; }
.review p:last-child { margin: 0; font-size: 15px; line-height: 1.45; }
.players .kicker { margin-bottom: 30px; }

/* ---------- 7 craft ---------- */
.craft { display: grid; grid-template-columns: .82fr 1fr; min-height: 90vh; }
.craft-text { padding: clamp(110px, 10vw, 150px) var(--pad); display: flex; flex-direction: column; justify-content: space-between; gap: 50px; background: #f6f3f1; }
.craft-text h2 { font-size: clamp(42px, 5.4vw, 92px); }
.craft-text .lead { max-width: 440px; }
.craft-img { overflow: hidden; }
.craft-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease); }
.craft:hover .craft-img img { transform: scale(1.04) rotate(.6deg); }

/* ---------- 8 next ---------- */
.next-row { display: flex; justify-content: space-between; align-items: center; margin-top: 22px !important; gap: 20px; flex-wrap: wrap; }
.year { font: italic 700 20px var(--body); }

/* ---------- 9 friends ---------- */
.friends { padding: clamp(80px, 9vw, 120px) var(--pad); }
.friends .kicker { margin-bottom: 40px; }
.logos { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 34px clamp(34px, 5vw, 70px); }
.logos a { display: flex; align-items: center; gap: 8px; text-decoration: none; opacity: .55; transition: opacity .3s, transform .3s var(--ease); font-size: 13px; }
.logos a:hover { opacity: 1; transform: translateY(-3px); }
.logos img { height: 30px; width: auto; max-width: 150px; filter: brightness(0); }

/* ---------- 10 together ---------- */
.together { min-height: 100svh; padding: clamp(120px, 12vw, 170px) var(--pad) 60px; display: flex; flex-direction: column; justify-content: center; background: #e9c3d9; }
.together > *:not(.blob):not(.cover-art) { width: 100%; max-width: 1400px; margin: 0 auto; }
.together .cover-art { opacity: .32; }
.together h2 { font-size: clamp(50px, 7.4vw, 124px); }
.card-contact { font-size: clamp(18px, 1.7vw, 26px); line-height: 1.3; }
.card-contact p { margin: 0; }
.card-contact a { text-decoration: none; background: linear-gradient(var(--ink), var(--ink)) left 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.card-contact a:hover { background-size: 100% 1px; }
.mini-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.mini-mark img:first-child { height: clamp(56px, 6vw, 90px); width: auto; }
.mini-mark img:last-child { height: clamp(46px, 5vw, 74px); width: auto; }
.card-contact .acts { margin-top: 26px; }
.card-contact .acts a { background: var(--ink); }
.card-contact .acts a.ghost { background: transparent; }
.socials { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: clamp(60px, 8vw, 110px) !important; font-size: 15px; }
.socials a { text-decoration: none; opacity: .75; }
.socials a:hover { opacity: 1; text-decoration: underline; }

.foot { display: flex; justify-content: space-between; padding: 22px var(--pad); font-size: 13px; color: var(--soft); }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.cards .rv:nth-child(2), .stats .rv:nth-child(2), .reviews .rv:nth-child(2) { transition-delay: .12s; }
.cards .rv:nth-child(3), .stats .rv:nth-child(3), .reviews .rv:nth-child(3) { transition-delay: .24s; }
.split .rv:nth-child(2) { transition-delay: .1s; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .split, .craft { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; max-width: 520px; }
  .craft-img { aspect-ratio: 4 / 3; }
  .wide { aspect-ratio: 16 / 7; }
  .wide.banner { aspect-ratio: 3 / 1; }
  .review:nth-child(2) { margin-left: 0; }
}
@media (max-width: 640px) {
  .nav nav a:not(.pill) { display: none; }
  .stats { grid-template-columns: 1fr; }
  .mark { flex-direction: column; text-align: center; }
  .tc { display: none; }
  .br { right: var(--pad); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}

/* cover tuning: more deck-pink haze, art a touch quieter */
.cover { background: linear-gradient(160deg, #b9a3c9 0%, #e7a3d4 45%, #9fd6dc 100%); }
.cover > .cover-art { opacity: .3; mix-blend-mode: luminosity; }

/* ---------- worlds v2: 2x2 cards with living media ---------- */
.hover-hint { margin: -40px auto 46px !important; font-size: 15px; color: var(--soft); }
#games .cards { grid-template-columns: repeat(2, 1fr); max-width: 1240px; gap: clamp(18px, 2.4vw, 34px); }
#games .card { padding: 20px 22px 24px; }
.media { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #1a1c2c; isolation: isolate; }
.media > img, .media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s var(--ease), transform 1.6s var(--ease); }
.card:hover .media > img:first-child, .card:hover .media > video { transform: scale(1.04); }
.media video { image-rendering: pixelated; }
.card[data-media="slides"] .media > img:not(:first-child) { opacity: 0; }
.card[data-media="slides"] .media > img.on { opacity: 1; z-index: 1; }
.badge { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 6px 11px; border-radius: 999px; background: rgba(244, 240, 236, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 500 12px/1 var(--body); letter-spacing: .04em; text-transform: uppercase; transition: opacity .4s; }
.card.playing .badge { opacity: 0; }
.dots { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; z-index: 3; display: flex; gap: 6px; opacity: 0; transition: opacity .4s; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: background .3s, width .3s; }
.dots i.on { width: 18px; border-radius: 3px; background: #fff; }
.card.playing .dots { opacity: 1; }

/* phones fan up out of the panda card */
.phones { position: absolute; inset: 0; z-index: 2; display: flex; justify-content: center; align-items: flex-end; gap: 0; pointer-events: none; }
.phones img { width: 26%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; border: 4px solid #141414; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); margin: 0 -2%; transform: translateY(110%); transition: transform .8s var(--ease); }
.card.playing .phones img { transform: translateY(12%) rotate(var(--r)); }
.phones img:nth-child(1) { --r: -8deg; transition-delay: 0s; }
.phones img:nth-child(2) { --r: 0deg; transform: translateY(115%); transition-delay: .08s; z-index: 1; }
.card.playing .phones img:nth-child(2) { transform: translateY(4%); }
.phones img:nth-child(3) { --r: 8deg; transition-delay: .16s; }
.card[data-media="phones"].playing .media > img:first-child { opacity: .45; filter: blur(2px); }

/* platform logo buttons */
.plats { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.plat { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); transition: transform .35s var(--ease), background .3s; }
.plat img { width: 22px; height: 22px; filter: invert(1); }
.plat:hover { transform: translateY(-4px) scale(1.06); background: #2c2733; }
.plat::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 4px; white-space: nowrap; padding: 6px 10px; border-radius: 6px; background: var(--ink); color: var(--paper); font: 500 12px/1 var(--body); opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s var(--ease); }
.plat:hover::after, .plat:focus-visible::after { opacity: 1; translate: -50% 0; }
.socials { gap: 12px !important; }
.socials .plat { opacity: 1; text-decoration: none; }
.socials .plat:hover { text-decoration: none; }

@media (max-width: 900px) { #games .cards { grid-template-columns: 1fr; max-width: 620px; } }

/* ---------- TAN Mon Cheri is much wider than the fallback: smaller sizes, more air ---------- */
h2 { font-size: clamp(30px, 4vw, 66px); line-height: 1.1; letter-spacing: 0; }
h3 { font-size: clamp(24px, 2.6vw, 42px); line-height: 1.18; }
.craft-text h2 { font-size: clamp(30px, 3.6vw, 60px); }
.together h2 { font-size: clamp(34px, 4.8vw, 80px); line-height: 1.12; }
.num { font-size: clamp(52px, 7.4vw, 124px); letter-spacing: 0; white-space: nowrap; }
.stats > div { flex-wrap: wrap; }
.stats sup { font-size: clamp(22px, 2.4vw, 38px); margin-top: .15em; }
.phones img { border: 0; border-radius: 14px; }

/* platform & social logos: no circles, just black logos with a soft shadow */
.plat { width: auto; height: auto; padding: 4px; border-radius: 0; background: none; }
.plat img { width: 30px; height: 30px; filter: drop-shadow(0 3px 4px rgba(20, 20, 20, .28)); }
.plat:hover { background: none; transform: translateY(-4px) scale(1.12); }
.plat:hover img { filter: drop-shadow(0 7px 8px rgba(20, 20, 20, .3)); }
.plats { gap: 18px; }
.socials { gap: 22px !important; }
h2 { line-height: 1.24; }
.together h2 { line-height: 1.24; }

/* mixed playlist media (Coco): clips + photos */
.card[data-media="mix"] .media > video, .card[data-media="mix"] .media > .mix-img { opacity: 0; }
.card[data-media="mix"] .media > video.on, .card[data-media="mix"] .media > .mix-img.on { opacity: 1; z-index: 1; }

/* ---------- players: two drifting rows of real reviews ---------- */
h3 { font-family: var(--body); font-weight: 400; letter-spacing: -.01em; }
.players { padding-left: 0 !important; padding-right: 0 !important; }
.players-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding: 0 var(--pad); margin-bottom: clamp(40px, 5vw, 64px) !important; flex-wrap: wrap; }
.players-head h3 { max-width: 560px; }
.score { margin: 0; text-align: right; font-size: 18px; letter-spacing: 2px; }
.score b { font: 400 clamp(44px, 5vw, 72px)/1 var(--display); letter-spacing: 0; margin-right: 6px; }
.score span { display: block; letter-spacing: 0; font-size: 14px; color: var(--soft); margin-top: 6px; }
.carousel { display: grid; gap: 18px; max-width: none !important; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.track { display: flex; gap: 18px; width: max-content; animation: marquee 80s linear infinite; animation-play-state: paused; }
.track.rev { animation-direction: reverse; animation-duration: 95s; }
.players.live .track { animation-play-state: running; }
.players.live .track:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.track .review { flex: none; width: clamp(280px, 28vw, 380px); margin: 0 !important; display: flex; flex-direction: column; }
.track .review:hover { transform: translateY(-4px); }
.rv-top { display: flex; justify-content: space-between; align-items: center; }
.rv-top img { width: 18px; height: 18px; opacity: .6; }

/* ---------- events page ---------- */
.nav nav a[aria-current="page"] { background-size: 100% 1px; }
.ev-hero { min-height: 78svh; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(160deg, #c9b3d6, #eab0d8 50%, #a9dbe0); }
.ev-hero > *:not(.blob):not(.stars) { width: 100%; }
.ev-hero h1 { font-size: clamp(40px, 6vw, 100px); line-height: 1.12; text-transform: uppercase; margin: 18px 0 26px; }
.ev-hero .lead { max-width: 640px; margin-left: 0; }
.ev-list { display: grid; gap: clamp(90px, 10vw, 150px); }
.event { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.event.flip .ev-text { order: 2; }
.event .cap { text-align: left; margin-bottom: 16px; }
.event .cap b { margin-left: 6px; }
.event h2 { font-size: clamp(30px, 3.8vw, 62px); margin-bottom: 20px; }
.event .lead { font-size: clamp(17px, 1.4vw, 21px); }
.event .acts { margin-top: 26px; }
.ev-media { position: relative; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: #1a1c2c; }
.ev-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.event:hover .ev-media img { transform: scale(1.04); }
.ev-media.two { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; background: none; }
.ev-media.two img { border-radius: 6px; }
.ev-media.empty { display: grid; place-items: center; background: rgba(255, 255, 255, .45); border: 1px dashed rgba(20, 20, 20, .25); }
.ev-media.empty span, .soon-tag { font-style: italic; text-transform: uppercase; font-size: 15px; color: var(--soft); }
.soon-card { display: grid; place-items: center; background: #e9c3d9; }
.soon-card .blob-in { position: absolute; inset: -20%; width: 140%; height: 140%; object-fit: cover; opacity: .9; animation: drift 30s ease-in-out infinite alternate; }
.soon-card .soon-r { position: relative; width: 26%; height: auto; object-fit: contain; animation: bobR 4s ease-in-out infinite; }
@keyframes bobR { 50% { transform: translateY(-10px) rotate(-4deg); } }
.soon-tag { position: absolute; left: 16px; top: 14px; padding: 7px 13px; border-radius: 999px; background: var(--ink); color: var(--paper); font-style: normal; font-size: 12px; letter-spacing: .08em; }
.page-events .together { min-height: 80svh; }
@media (max-width: 900px) { .event { grid-template-columns: 1fr; } .event.flip .ev-text { order: 0; } }

/* event photo mosaics */
.ev-media.mosaic { display: grid; gap: 10px; background: none; aspect-ratio: auto; overflow: visible; }
.ev-media.mosaic img { border-radius: 6px; min-height: 0; }
.ev-media.m3 { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; height: clamp(320px, 34vw, 520px); }
.ev-media.m3 img:first-child { grid-row: span 2; }
.ev-media.m4 { grid-template-columns: repeat(4, 1fr); height: clamp(260px, 26vw, 420px); }
.ev-media.mosaic img:hover { transform: scale(1.03); }
.event:hover .ev-media.mosaic img { transform: none; }
.event .ev-media.mosaic img:hover { transform: scale(1.03); z-index: 1; position: relative; }
@media (max-width: 640px) { .ev-media.m4 { grid-template-columns: repeat(2, 1fr); height: auto; } .ev-media.m4 img { aspect-ratio: 3 / 4; } }
.ev-media.m3t { grid-template-columns: repeat(3, 1fr); height: clamp(280px, 30vw, 460px); }
@media (max-width: 640px) { .ev-media.m3t { grid-template-columns: repeat(3, 1fr); height: 240px; } }
.ev-media.m3 .hero-shot { object-position: 62% 30%; }
.ev-media.m5 { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: clamp(340px, 36vw, 560px); }
.ev-media.m5 .hero-shot { grid-row: span 2; object-position: 62% 30%; }
@media (max-width: 640px) { .ev-media.m5 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; } .ev-media.m5 img { aspect-ratio: 1; } .ev-media.m5 .hero-shot { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; } }

/* ---------- stickers slapped on the homepage ---------- */
.has-slap { position: relative; }
.slap { position: absolute; z-index: 6; left: var(--x); top: var(--y); width: var(--w); translate: -50% 0; rotate: var(--r); filter: drop-shadow(0 6px 10px rgba(40, 20, 50, .22)); transition: rotate .45s var(--ease), scale .45s var(--ease), filter .45s; animation: slapIn .6s var(--ease) var(--d) both; }
.slap img { width: 100%; height: auto; display: block; pointer-events: none; }
.slap:hover, .slap:focus-visible { rotate: 0deg; scale: 1.14; filter: drop-shadow(0 16px 22px rgba(40, 20, 50, .3)); z-index: 7; }
.slap::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 6px); translate: -50% -4px; white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 12px/1 var(--body); opacity: 0; transition: opacity .25s, translate .25s var(--ease); pointer-events: none; rotate: calc(-1 * var(--r)); }
.slap:hover::after, .slap:focus-visible::after { opacity: 1; translate: -50% 0; }
@keyframes slapIn { from { scale: 1.6; opacity: 0; } 60% { scale: .95; opacity: 1; } }
@media (max-width: 900px) { .slap { width: calc(var(--w) * .66); } .slap.minor { display: none; } }

/* ---------- shop page ---------- */
.shop-hero { min-height: 92svh; display: flex; align-items: center; background: linear-gradient(160deg, #c9b3d6, #eab0d8 50%, #a9dbe0); }
.shop-hero h1 { font-size: clamp(40px, 5.6vw, 92px); line-height: 1.12; text-transform: uppercase; margin: 18px 0 24px; }
.shop-hero .acts { margin-top: 30px; }
.pile { position: relative; aspect-ratio: 1; width: 100%; max-width: 620px; justify-self: center; }
.pile-item { position: absolute; left: var(--x); top: var(--y); width: 21%; translate: -50% -50%; rotate: var(--r); filter: drop-shadow(0 8px 12px rgba(40, 20, 50, .22)); transition: rotate .4s var(--ease), scale .4s var(--ease); animation: slapIn .7s var(--ease) var(--d) both; }
.pile-item img { width: 100%; height: auto; display: block; }
.pile-item:hover { rotate: 0deg; scale: 1.12; z-index: 2; }
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(20px, 3vw, 44px); max-width: 1200px; margin: 40px auto 0 !important; }
.scell { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.scell img { width: 82%; height: 190px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(40, 20, 50, .18)); transition: transform .45s var(--ease); }
.scell:nth-child(odd) img { transform: rotate(-4deg); }
.scell:nth-child(even) img { transform: rotate(4deg); }
.scell:hover img { transform: rotate(0) scale(1.08); }
.scell figcaption { font-style: italic; text-transform: uppercase; font-size: 13px; text-align: center; color: var(--soft); }
.feats { list-style: none; padding: 0; margin: 34px 0; display: grid; gap: 16px; }
.feats li { display: grid; gap: 2px; padding-left: 30px; position: relative; }
.feats li::before { content: "★"; position: absolute; left: 0; top: 0; font-size: 16px; }
.feats b { font-weight: 700; }
.feats span { color: var(--soft); font-size: 16px; }
.pack-media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pack-media figure { margin: 0; border-radius: 8px; overflow: hidden; background: #1a1c2c; position: relative; aspect-ratio: 4 / 3; }
.pack-media figure.key { grid-column: span 2; aspect-ratio: 616 / 353; }
.pack-media img { width: 100%; height: 100%; object-fit: cover; }
.pack-media figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 11px; border-radius: 999px; background: rgba(244, 240, 236, .9); font-size: 12px; }
.together > .slap, .slide > .slap, .cover > .slap { width: var(--w); max-width: none; margin: 0; }
@media (max-width: 900px) { .together > .slap, .slide > .slap, .cover > .slap { width: calc(var(--w) * .66); } }
.stickers-grid .hover-hint { margin: 10px auto 0 !important; }
.sflip { position: relative; width: 100%; height: 210px; display: grid; place-items: center; }
.sflip .face { width: 82%; height: 190px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(40, 20, 50, .18)); transition: opacity .35s, transform .45s var(--ease); }
.scell:nth-child(odd) .face { transform: rotate(-4deg); }
.scell:nth-child(even) .face { transform: rotate(4deg); }
.sflip .irl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; opacity: 0; transform: scale(.94); transition: opacity .35s, transform .45s var(--ease); box-shadow: 0 12px 28px rgba(40, 20, 50, .2); }
.irl-tag { position: absolute; left: 8px; top: 8px; padding: 5px 9px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 11px/1 var(--body); opacity: 0; transition: opacity .3s; }
.scell { cursor: pointer; }
.scell:hover .irl, .scell.show-irl .irl, .scell:focus-visible .irl { opacity: 1; transform: none; }
.scell:hover .irl-tag, .scell.show-irl .irl-tag, .scell:focus-visible .irl-tag { opacity: 1; }
.scell:hover .face, .scell.show-irl .face, .scell:focus-visible .face { opacity: 0; }
.pack-media figure.wide2 { grid-column: span 2; aspect-ratio: 4 / 3; }
.together > .slap:not(.blob):not(.cover-art), .slide > .slap:not(.blob):not(.cover-art) { width: var(--w); max-width: none; margin: 0; }
@media (max-width: 900px) { .together > .slap:not(.blob):not(.cover-art), .slide > .slap:not(.blob):not(.cover-art) { width: calc(var(--w) * .66); } }

/* equal sticker HEIGHTS (widths follow each shape) */
.pile-item { width: auto; height: 27%; }
.pile-item img { width: auto; height: 100%; }
.slap, .together > .slap:not(.blob):not(.cover-art), .slide > .slap:not(.blob):not(.cover-art) { width: auto; height: calc(var(--w) * 1.3); }
.slap img { width: auto; height: 100%; }
@media (max-width: 900px) { .slap, .together > .slap:not(.blob):not(.cover-art), .slide > .slap:not(.blob):not(.cover-art) { width: auto; height: calc(var(--w) * .86); } }
/* fixed boxes + contain: equal heights without any squashing */
.pile-item { width: 24%; height: 27%; }
.pile-item img { width: 100%; height: 100%; object-fit: contain; }
.slap, .together > .slap:not(.blob):not(.cover-art), .slide > .slap:not(.blob):not(.cover-art) { width: calc(var(--w) * 1.25); height: calc(var(--w) * 1.3); }
.slap img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) { .slap, .together > .slap:not(.blob):not(.cover-art), .slide > .slap:not(.blob):not(.cover-art) { width: calc(var(--w) * .82); height: calc(var(--w) * .86); } }
.scell { cursor: default; } .scell:hover .face { opacity: 1; transform: rotate(0) scale(1.08); }
.pile-item[data-n="infinity"] { width: 28%; height: 33%; }
.ev-media.m4x { grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: clamp(360px, 38vw, 600px); }
.ev-media.m4x .hero-shot { grid-row: span 2; object-position: 50% 45%; }
.ev-media.m4x .wide-shot { grid-column: span 2; }
@media (max-width: 640px) { .ev-media.m4x { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; } .ev-media.m4x img { aspect-ratio: 1; } .ev-media.m4x .hero-shot { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 5; } .ev-media.m4x .wide-shot { aspect-ratio: 3 / 2; } }
.ev-media.m4x { grid-template-columns: 1.6fr 1fr 1fr; } .ev-media.m4x .hero-shot { object-position: 30% 50%; }
.ev-media.m3x { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1.25fr; height: clamp(360px, 38vw, 600px); }
.ev-media.m3x .hero-shot { grid-row: span 2; object-position: 30% 50%; }
@media (max-width: 640px) { .ev-media.m3x { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; } .ev-media.m3x img { aspect-ratio: 1; } .ev-media.m3x .hero-shot { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 5; } }

/* cover: bigger, softer haze so the whole area blends */
.cover > .blob { width: clamp(900px, 110vw, 2000px); opacity: .75; }
.cover > .b-a { left: -35%; top: -40%; }
.cover > .b-b { right: -40%; top: -10%; left: auto; }
.cover > .b-c { left: -10%; bottom: -70%; }

/* ---------- shop price ---------- */
.price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 6px 0 22px; }
.price b { font: 400 clamp(46px, 5vw, 76px)/1 var(--display); }
.price s { font-size: clamp(20px, 2vw, 28px); color: var(--soft); }
.price .deal { padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 12px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.price-note { margin: -8px 0 26px; font-size: 14px; color: var(--soft); }
.hero-price { margin-top: 22px; font-size: 18px; }
.hero-price s { color: var(--soft); margin-left: 6px; }
.stars5 .dim { opacity: .22; }
/* stickers are positioned in px by the layout script */
.slap { left: 0; top: 0; }
@media (max-width: 900px) { .slap.minor { display: block; } }

/* value breakdown + country picker */
.value { margin: 6px 0 26px; padding: 18px 22px; border-radius: 14px; background: rgba(255, 255, 255, .55); max-width: 460px; }
.value .kicker { margin-bottom: 10px; font-size: 13px; }
.value ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.value li { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; }
.value li b { font-weight: 500; }
.value li.tot { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; font-weight: 700; }
.value li.tot b { font-weight: 700; text-decoration: line-through; text-decoration-thickness: 1px; }
.ship-to { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--soft); margin-bottom: 8px; }
.ship-to select { font: 500 15px var(--body); color: var(--ink); background: rgba(255, 255, 255, .7); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; }

/* ---------- seamless sections: let the haze flow across section edges ---------- */
.slide.haze, .craft-text.haze { overflow: visible; overflow-x: clip; isolation: auto; }
.slide.haze > .blob, .craft-text.haze > .blob { z-index: -1; }
main { position: relative; z-index: 1; isolation: isolate; }
.rose, .aqua, .trust, .players, .craft-text, .pack { background: transparent; }
.cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(transparent, var(--paper)); pointer-events: none; z-index: 1; }
.together::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; background: linear-gradient(var(--paper), transparent); pointer-events: none; z-index: 0; }
/* price block: keep the picker clear of the big number */
.ship-to { margin-bottom: 22px; }
.price { margin-top: 0; align-items: center; row-gap: 10px; }
.price b { font-size: clamp(40px, 4.2vw, 64px); line-height: 1.05; white-space: nowrap; }
.ship-to select { appearance: none; -webkit-appearance: none; padding: 8px 34px 8px 14px; background: rgba(255,255,255,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23141414'/%3E%3C/svg%3E") no-repeat right 14px center; outline: none; }
.ship-to select:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
.value li.reg b { text-decoration: line-through; color: var(--soft); font-weight: 400; }
.value li.reg span { color: var(--soft); }
.value li.now { font-weight: 700; }
.value li.now b { font-weight: 700; }
.value li.tot b { text-decoration: none; }

/* cover: instead of a fade band on top, the colour layers themselves dissolve into the page */
.cover::after { content: none; }
.cover { background: none; overflow: visible; overflow-x: clip; }
.cover::before { content: ""; position: absolute; inset: 0 0 -18% 0; z-index: -3; background: linear-gradient(160deg, #b9a3c9 0%, #e7a3d4 45%, #9fd6dc 100%);
  -webkit-mask-image: linear-gradient(#000 0%, #000 52%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.18) 90%, transparent 100%);
          mask-image: linear-gradient(#000 0%, #000 52%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.18) 90%, transparent 100%); }
.cover > .cover-art { -webkit-mask-image: linear-gradient(#000 45%, transparent 100%); mask-image: linear-gradient(#000 45%, transparent 100%); }
.cover > .blob { -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
/* tighter rhythm between sections */
.slide { padding-top: clamp(64px, 6.5vw, 104px); padding-bottom: clamp(64px, 6.5vw, 104px); }
.wide { margin-top: clamp(36px, 4vw, 60px); }
.friends { padding-top: clamp(50px, 5vw, 80px); padding-bottom: clamp(50px, 5vw, 80px); }
.slap::after { rotate: 0deg; }   /* the sticker straightens on hover, so the label needs no counter-rotation */

/* ---------- in the wild slideshow ---------- */
.wild .kicker { margin-bottom: 26px; }
.show { position: relative; max-width: 1100px; margin: 0 auto !important; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #1a1c2c; box-shadow: 0 30px 60px rgba(40, 20, 50, .16); }
.show-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s var(--ease); }
.show-slide.on { opacity: 1; z-index: 1; }
.show-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s linear; }
.show-slide.on img { transform: scale(1); }
.show-slide figcaption { position: absolute; left: 16px; bottom: 16px; padding: 7px 12px; border-radius: 999px; background: rgba(244, 240, 236, .9); font-size: 13px; }
.show-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: rgba(244, 240, 236, .85); font-size: 26px; line-height: 1; opacity: 0; transition: opacity .3s; }
.show:hover .show-nav, .show-nav:focus-visible { opacity: 1; }
.show-nav.prev { left: 14px; } .show-nav.next { right: 14px; }
.show-dots { position: absolute; right: 16px; bottom: 20px; z-index: 3; display: flex; gap: 6px; }
.show-dots button { width: 7px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .55); transition: width .3s, background .3s; }
.show-dots button.on { width: 20px; background: #fff; }
.show.single .show-nav, .show.single .show-dots { display: none; }
@media (hover: none) { .show-nav { opacity: 1; } }
.show { max-width: 720px; aspect-ratio: 4 / 3; border-radius: 12px; }
.wild { padding-top: clamp(40px, 4vw, 70px) !important; padding-bottom: clamp(40px, 4vw, 70px) !important; }
.show { aspect-ratio: 381 / 373; max-width: 560px; }
.steam-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; margin-right: .4em; }
.pack-media figcaption { display: inline-flex; align-items: center; }
/* slideshow lives inside the pack photo grid now */
.pack-media .show { grid-column: span 2; max-width: none; width: 100%; aspect-ratio: 4 / 3; margin: 0 !important; border-radius: 8px; box-shadow: none; }
.pack-media .show-slide img { width: 100%; height: 100%; }
/* steam icon must stay text-sized (the photo rule was stretching it) */
.pack-media figcaption .steam-ico, .value .steam-ico, .feats .steam-ico { width: 1em; height: 1em; object-fit: contain; }
/* colour clouds may cross between sections but must not stretch the page past the footer */
main { overflow: clip; }
.page-shop .pack { padding-bottom: clamp(50px, 5vw, 80px); }
/* minimal slideshow: no dot meter, just a hairline progress bar */
.show-dots { left: 0; right: 0; bottom: 0; gap: 0; height: 2px; background: rgba(255, 255, 255, .25); }
.show-dots button { flex: 1; width: auto; height: 2px; border-radius: 0; background: transparent; }
.show-dots button.on { width: auto; background: #fff; }
.show-nav { width: 36px; height: 36px; font-size: 20px; box-shadow: none; border: 0; }
.tagline { margin: 10px 0 22px; font-style: italic; color: var(--soft); font-size: clamp(16px, 1.3vw, 19px); }
/* the photo-tile rule (.pack-media figure) was stacking the slides on top of each other's space */
.pack-media .show-slide { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: none; }

/* ---------- language switch ---------- */
.lang { font: 500 14px/1 var(--body); padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .25); transition: background .25s; }
.lang:hover { background: rgba(20, 20, 20, .06); }
@media (max-width: 640px) { .nav nav .lang { display: inline-block; } }

/* ---------- popular tag ---------- */
.sflip { position: relative; }
.pop { position: absolute; top: 4px; right: 6px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; rotate: 6deg; box-shadow: 0 6px 14px rgba(20, 20, 20, .2); }
.pile-item .pop { top: -6px; right: -10px; font-size: 10px; }

/* ---------- build your own pack ---------- */
.build-sub { max-width: 620px; margin: 14px auto 0 !important; color: var(--soft); }
.stickers-grid h2 { margin-top: 10px; }
.scell { gap: 10px; }
.scell .sflip { cursor: pointer; }
.step { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line); }
.step button { width: 30px; height: 30px; border-radius: 50%; font: 500 18px/1 var(--body); transition: background .2s; }
.step button:hover { background: rgba(20, 20, 20, .08); }
.step output { min-width: 26px; text-align: center; font: 700 15px/1 var(--body); }
.scell.picked .step { background: var(--ink); box-shadow: none; }
.scell.picked .step button, .scell.picked .step output { color: var(--paper); }
.scell.picked .step button:hover { background: rgba(255, 255, 255, .14); }
.scell.picked .face { transform: rotate(0) scale(1.05); }
.bob { position: sticky; bottom: 16px; z-index: 40; max-width: 1100px; margin: 40px auto 0 !important; display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap; padding: 14px 16px 14px 24px; border-radius: 18px; background: rgba(20, 20, 20, .92); color: var(--paper); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 50px rgba(20, 20, 20, .25); opacity: .0; transform: translateY(16px); pointer-events: none; transition: opacity .35s, transform .45s var(--ease); }
.bob.on { opacity: 1; transform: none; pointer-events: auto; }
.bob-l { display: grid; gap: 2px; }
.bob-k { font-size: 12px; opacity: .6; text-transform: uppercase; letter-spacing: .06em; }
.bob-l > b { font-size: 18px; }
.bob-u { font-size: 12px; opacity: .7; }
.bob-tip { flex: 1; min-width: 200px; margin: 0; font-size: 14px; opacity: .8; }
.bob-r { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.bob-total { font: 400 30px/1 var(--display); }
.bob-clear { font-size: 13px; opacity: .7; text-decoration: underline; color: var(--paper); }
.bob-go { padding: 12px 20px; border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font: 500 15px/1 var(--body); transition: transform .25s var(--ease); }
.bob-go:hover { transform: translateY(-2px); }
.bob-go.off { opacity: .4; pointer-events: none; }

/* ---------- Arabic (RTL) ---------- */
html[dir="rtl"] { --display: "Reem Kufi", "TAN Moncheri", serif; --body: "IBM Plex Sans Arabic", "Figtree", system-ui, sans-serif; }
html[dir="rtl"] body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] button, html[dir="rtl"] select { font-family: var(--body); }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] .num, html[dir="rtl"] .price b, html[dir="rtl"] .bob-total, html[dir="rtl"] .score b { font-family: var(--display); }
html[dir="rtl"] * { letter-spacing: 0 !important; }
html[dir="rtl"] h2 { line-height: 1.35; }
html[dir="rtl"] .cap, html[dir="rtl"] .tagline, html[dir="rtl"] .scell figcaption, html[dir="rtl"] .wide figcaption, html[dir="rtl"] .year { font-style: normal; }
html[dir="rtl"] .review, html[dir="rtl"] .track, html[dir="rtl"] .marquee-track, html[dir="rtl"] .logos, html[dir="rtl"] .mark { direction: ltr; }
html[dir="rtl"] .review { text-align: left; }
html[dir="rtl"] .feats li { padding-left: 0; padding-right: 30px; }
html[dir="rtl"] .feats li::before { left: auto; right: 0; }
html[dir="rtl"] .steam-ico { margin-right: 0; margin-left: .4em; }
html[dir="rtl"] .bob-r { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .bob { padding: 14px 24px 14px 16px; }
html[dir="rtl"] .pop { right: auto; left: 6px; rotate: -6deg; }
html[dir="rtl"] .br { text-align: right; }
html[dir="rtl"] .event .cap { text-align: right; }
html[dir="rtl"] .event .cap b { margin-left: 0; margin-right: 6px; }
html[dir="rtl"] .nav nav a:not(.pill) { background-position: right 100%; }
/* button reset (the deck stylesheet had none, so browsers drew grey boxes) */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.lang { padding: 8px 12px; }
.show-nav { background: rgba(244, 240, 236, .85); }
.show-dots button { padding: 0; }

/* ---------- Arabic font: Helvetica Neue Arabic (drop the licensed .woff2 files in assets/fonts to serve it to everyone) ---------- */
@font-face { font-family: "RG Arabic"; font-weight: 300; font-display: swap; src: url(assets/fonts/HelveticaNeueArabic-Light.woff2) format("woff2"), local("Helvetica Neue LT Arabic Light"), local("HelveticaNeueLTArabic-Light"), local("Helvetica Neue Arabic Light"); }
@font-face { font-family: "RG Arabic"; font-weight: 400; font-display: swap; src: url(assets/fonts/HelveticaNeueArabic-Roman.woff2) format("woff2"), local("Helvetica Neue LT Arabic Roman"), local("HelveticaNeueLTArabic-Roman"), local("Helvetica Neue Arabic"); }
@font-face { font-family: "RG Arabic"; font-weight: 700; font-display: swap; src: url(assets/fonts/HelveticaNeueArabic-Bold.woff2) format("woff2"), local("Helvetica Neue LT Arabic Bold"), local("HelveticaNeueLTArabic-Bold"), local("Helvetica Neue Arabic Bold"); }
html[dir="rtl"] { --display: "RG Arabic", "IBM Plex Sans Arabic", sans-serif; --body: "RG Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] .num, html[dir="rtl"] .bob-total, html[dir="rtl"] .price b, html[dir="rtl"] .score b { font-weight: 300; }
html[dir="rtl"] h3 { font-weight: 400; }

/* ---------- Arabic alignment fixes ---------- */
html[dir="rtl"] .mini-mark { direction: ltr; justify-content: flex-end; }
html[dir="rtl"] .card-contact a[href^="mailto"], html[dir="rtl"] .card-contact a[href^="http"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }
html[dir="rtl"] .socials { direction: rtl; }
html[dir="rtl"] .mark { direction: ltr; }
html[dir="rtl"] .players-head .score { text-align: left; }
html[dir="rtl"] .next-row { direction: rtl; }
html[dir="rtl"] .value li b, html[dir="rtl"] .price, html[dir="rtl"] .hero-price { unicode-bidi: plaintext; }
html[dir="rtl"] .stats sup { margin-top: .3em; }
html[dir="rtl"] .wide figcaption { right: auto; left: 22px; }
html[dir="rtl"] .show-slide figcaption, html[dir="rtl"] .pack-media figcaption { left: auto; right: 10px; }
html[dir="rtl"] .show-dots { direction: ltr; }
html[dir="rtl"] .badge { left: auto; right: 12px; }
html[dir="rtl"] .soon-tag { left: auto; right: 16px; }
html[dir="rtl"] .step { direction: ltr; }
html[dir="rtl"] .stats > div, html[dir="rtl"] .score b { direction: ltr; }
html[dir="rtl"] .score { direction: rtl; text-align: left; }
html[dir="rtl"] .hero-price b, html[dir="rtl"] .hero-price s { unicode-bidi: isolate; }
/* bolder Arabic titles */
html[dir="rtl"] h1, html[dir="rtl"] h2 { font-weight: 700; }
html[dir="rtl"] h3 { font-weight: 500; }
/* checkout button while the cart is being made */
#buyBtn.loading, .bob-go.loading { opacity: .6; pointer-events: none; cursor: progress; }

/* ---------- more colour ---------- */
.cover > .cover-art { mix-blend-mode: normal; opacity: .62; filter: saturate(1.25); }
.cover { background: linear-gradient(160deg, #a98fd0 0%, #f08bd0 45%, #7fd3e0 100%); }
.cover > .blob { opacity: .55; filter: saturate(1.5); }
.haze > .blob { filter: saturate(1.45); }
.soft > .blob { opacity: .78; }
.haze > .cover-art { opacity: .55; }
.haze > .cover-art.faint { opacity: .26; }
.together .cover-art { opacity: .5; }

/* glow behind the wordmark + logo so they lift off the busy art */
.mark-word, .mark-r { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)) drop-shadow(0 0 22px rgba(255, 255, 255, .7)) drop-shadow(0 0 60px rgba(255, 190, 235, .65)); }
/* keep the stronger cover colours but let them dissolve into the page (no hard edge) */
.cover { background: none; }
.cover::before { background: linear-gradient(160deg, #a98fd0 0%, #f08bd0 45%, #7fd3e0 100%); }
/* black glow version */
.mark-word, .mark-r { filter: drop-shadow(0 0 8px rgba(0, 0, 0, .35)) drop-shadow(0 0 28px rgba(0, 0, 0, .3)) drop-shadow(0 0 70px rgba(20, 0, 30, .35)); }
.heart-line { margin: 0; max-width: 440px; font: italic 400 clamp(19px, 1.7vw, 25px)/1.35 var(--body); }
.heart-line::before { content: "♥ "; font-style: normal; }
html[dir="rtl"] .heart-line { font-style: normal; font-weight: 500; }
/* Arabic: links on the right, logo on the left */
html[dir="rtl"] .nav { flex-direction: row-reverse; }
.bob-pack { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.bob-pack input { width: 16px; height: 16px; accent-color: var(--paper); }
/* clear cart list inside the bar */
.bob { align-items: flex-start; }
.bob-list { list-style: none; margin: 0; padding: 0; flex-basis: 100%; order: 3; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; max-height: 120px; overflow: auto; border-top: 1px solid rgba(255,255,255,.14); padding-top: 10px; }
.bob-list li { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 8px; font-size: 13px; }
.bob-list img { width: 26px; height: 26px; object-fit: contain; }
.bob-list li img[src*="logo-r"] { filter: invert(1); padding: 3px; }
.bob-list b { opacity: .7; font-weight: 500; }
.bob-list em { font-style: normal; opacity: .85; }
.bob-tip { order: 4; flex-basis: 100%; }
.bob-r, .bob-l, .bob-pack { order: 1; }
.bob-r { order: 2; }
/* keep every +/- stepper on the same line, even when a name wraps to two lines */
.scell figcaption { min-height: 2.9em; display: flex; align-items: flex-start; justify-content: center; line-height: 1.45; }
.scell .step { margin-top: auto; }
.logos img[src*="eigf-mono"] { filter: none; }

/* ---------- mobile polish ---------- */
html { background: var(--paper); }
body { -webkit-tap-highlight-color: transparent; }
img, video { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.media img, .media video, .wide img, .craft-img img, .ev-media img, .show-slide img, .pack-media img, .cover-art, .blob { pointer-events: none; }
.nav { padding-top: max(14px, env(safe-area-inset-top)); padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
.foot { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
.menu-btn { display: none; }
@media (max-width: 640px) {
  .menu-btn { display: grid; gap: 6px; place-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); margin-left: 10px; }
  .menu-btn span { display: block; width: 18px; height: 2px; background: var(--paper); transition: transform .3s var(--ease); }
  .nav.open .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav.open .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav nav .pill { display: none; }
  .nav.open { background: rgba(244, 240, 236, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); flex-wrap: wrap; }
  .nav.open nav { order: 3; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 0 10px; }
  .nav.open nav a:not(.pill), .nav.open nav .pill { display: block; font-size: 22px; padding: 8px 0; }
  .nav.open nav .pill { display: inline-block; font-size: 17px; padding: 12px 22px; margin-top: 8px; }
  .nav nav .lang { display: none; }
  .nav.open nav .lang { display: inline-block; margin-top: 6px; }
  .nav nav { gap: 0; }
  html[dir="rtl"] .nav.open nav { align-items: flex-end; }
  html[dir="rtl"] .menu-btn { margin-left: 0; margin-right: 10px; }

  /* tighter vertical rhythm */
  .slide, .friends { padding-top: 56px !important; padding-bottom: 56px !important; }
  .cover { min-height: 88svh; }
  .craft { min-height: 0; }
  .craft-text { padding: 56px var(--pad); gap: 28px; }
  .together { min-height: 0; padding-top: 80px; padding-bottom: 50px; }
  .stats { margin: 36px auto !important; gap: 28px; }
  .wide { margin-top: 30px; }
  #games h2 { margin-bottom: 18px; }
  .hover-hint { margin: 0 auto 26px !important; }
  .players-head { margin-bottom: 28px !important; }
  .socials { margin-top: 40px !important; }
  .ev-list { gap: 64px; }
  .shop-hero, .ev-hero { min-height: 0; padding-top: 110px !important; }
}

/* ---------- iPhone: let Safari tint the status & home bars with the page colour ---------- */
/* Safari samples fixed elements at the screen edges; the fixed grain/peek layers made it pick black */
@media (hover: none), (max-width: 900px) {
  .grain { position: absolute; height: 100%; min-height: 100vh; }
  body { position: relative; }
  .peek { display: none; }
  .nav { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
}

/* simple icons instead of the round button */
.shop-ico { display: none; }
@media (max-width: 640px) {
  .shop-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; color: var(--ink); }
  .menu-btn { background: none; width: 40px; height: 40px; border-radius: 0; margin-left: 4px; gap: 6px; }
  .menu-btn span { background: var(--ink); width: 22px; height: 1.8px; }
  .nav nav { flex: 0; }
  html[dir="rtl"] .shop-ico { margin-left: 0; margin-right: auto; }
  html[dir="rtl"] .menu-btn { margin-right: 4px; }
}
@media (max-width: 640px) { .cover .bl { bottom: 104px; } .cover .br { bottom: 40px; } }

/* ---------- mobile round 3 ---------- */
.wide .stars i { width: clamp(8px, 1.1vw, 18px); height: clamp(7px, 1vw, 16px); }
@media (max-width: 640px) {
  /* cover: everything centred and stacked */
  .mark { align-items: center; gap: 18px; }
  .mark-r { height: 96px; }
  .mark-word { height: auto; width: min(78vw, 360px); }
  .cover .bl, .cover .br { left: 0; right: 0; text-align: center; }
  .cover .bl { bottom: 92px; font-size: 15px; letter-spacing: .12em; }
  .cover .br { bottom: 34px; }
  html[dir="rtl"] .cover .br { text-align: center; }
  /* tighter sections */
  .slide, .friends { padding-top: 38px !important; padding-bottom: 38px !important; }
  .craft-text { padding: 40px var(--pad); }
  .split { gap: 18px; }
  /* bigger, softer colour clouds so they don't look small and repeated */
  .haze > .blob { width: 175vw; opacity: .5; }
  .soft > .blob { opacity: .38; }
  .cover > .blob { width: 220vw; }
  /* compact cart: one row; tap the left part to see the item list */
  .bob { bottom: 10px; padding: 10px 12px 10px 16px; gap: 8px 12px; border-radius: 16px; }
  .bob-u, .bob-pack span, .bob-clear { display: none; }
  .bob-pack { order: 1; }
  .bob-l { cursor: pointer; }
  .bob-l > b { font-size: 15px; }
  .bob-l > b::after { content: " ▾"; font-size: 11px; opacity: .7; }
  .bob.expanded .bob-l > b::after { content: " ▴"; }
  .bob-total { font-size: 22px; }
  .bob-go { padding: 10px 14px; font-size: 14px; white-space: nowrap; }
  .bob-list { display: none; max-height: 34vh; }
  .bob.expanded .bob-list { display: grid; grid-template-columns: 1fr; }
  .bob-tip { font-size: 12px; min-width: 0; }
}
@media (max-width: 640px) { #cover .slap { display: none !important; } }

/* players: bigger colour haze so it fills the whole section (no flat grey gaps) */
.players > .blob { width: clamp(760px, 110vw, 1900px); opacity: 1; }
.players > .b-l { left: -25%; top: -45%; }
.players > .b-m { right: -35%; bottom: -55%; }
.players > .b-t { left: -40%; bottom: -60%; animation-duration: 54s !important; }
.players > .b-u { right: -40%; top: -50%; animation-duration: 47s !important; }