/* Vibechine — "the pier": a British seaside amusement arcade on the web. Every game is a lit cabinet.
   Preview stylesheet for index-v2.html / games-v2.html; the live pages still use style.css. */
:root {
  --night: #0b1230; --dusk: #27204f; --glow: #ff8a5c; --sea: #0d3b4f; --sea2: #0a2c3c;
  --bulb: #ffd166; --bulb-off: #6b5a2a; --red: #e63946; --cream: #fff4e0; --mint: #7fd8be;
  --wood: #6b4a2f; --wood2: #57391f; --ink: #fff4e0; --soft: #d8cfe8; --dim: #a69cbf;
  --panel: #1a1636; --panel2: #231d45;
  --sign: "Rye", "Georgia", serif; --neon: "Monoton", "Rye", serif; --hi: "Press Start 2P", ui-monospace, monospace;
  --body: "Nunito", system-ui, sans-serif;
  --gut: clamp(16px, 4vw, 40px); --max: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--bulb); color: var(--night); padding: 8px 12px; border-radius: 8px; z-index: 99; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--bulb); outline-offset: 3px; border-radius: 6px; }

/* ---------- top bar: a painted pier sign ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(11, 18, 48, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 3px solid var(--wood2); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 14px; }
.nav .logo { font: 400 22px/1 var(--sign); letter-spacing: .06em; text-decoration: none; color: var(--bulb); text-shadow: 0 0 12px rgba(255, 209, 102, .55); }
.nav ul { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 28px); list-style: none; margin: 0; padding: 0; }
.nav ul a:not(.btn) { text-decoration: none; font: 700 15px/1 var(--body); color: var(--soft); }  /* ul-scoped so it leaves the logo alone */
.nav ul a:not(.btn):hover, .nav ul a[aria-current="page"] { color: var(--bulb); }
@media (max-width: 640px) { .nav .hide-sm { display: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 800 15px/1 var(--body); text-decoration: none; padding: 13px 20px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .12s; white-space: nowrap; }
.btn.primary { background: var(--bulb); color: #2a1a05; box-shadow: 0 4px 0 #b8862b; }
.btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #b8862b; }
.btn.ghost { border-color: var(--cream); color: var(--cream); background: transparent; }
.btn.ghost:hover { background: rgba(255, 244, 224, .08); }
.btn.sm { padding: 9px 14px; font-size: 14px; }

/* ---------- hero: night sky, sea, the big bulb sign ---------- */
.pier-hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 72px) 0 0;
  background: radial-gradient(60% 45% at 50% 108%, rgba(255, 138, 92, .55), transparent 70%), linear-gradient(180deg, var(--night) 0%, var(--dusk) 62%, #5a2e5e 100%); }
.pier-hero::before { content: ""; position: absolute; inset: 0 0 40% 0; pointer-events: none; opacity: .9;
  background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 36%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 44% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 30%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 71% 16%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 86% 34%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 93% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 40%, #fff 50%, transparent 51%); }
.marquee { position: relative; margin: 0 auto; max-width: 900px; text-align: center; padding: clamp(22px, 3vw, 34px) clamp(18px, 4vw, 48px) clamp(20px, 2.6vw, 30px);
  background: linear-gradient(180deg, #3a1f14, #241208); border: 6px solid #8a5a2c; border-radius: 22px; box-shadow: 0 0 0 4px #2a1508, 0 24px 60px rgba(0, 0, 0, .5), inset 0 0 40px rgba(0, 0, 0, .6); }
/* the chasing bulbs are a dotted border drawn twice, out of phase, and swapped */
.marquee::before, .marquee::after { content: ""; position: absolute; inset: 8px; border-radius: 14px; pointer-events: none;
  background: radial-gradient(circle, var(--bulb) 0 3.5px, transparent 4.5px) 0 0 / 22px 22px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 6px; }
.marquee::before { filter: drop-shadow(0 0 5px var(--bulb)); animation: chase 1s steps(1) infinite; }
.marquee::after { background-position: 11px 11px; background-image: radial-gradient(circle, var(--bulb-off) 0 3.5px, transparent 4.5px); animation: chase 1s steps(1) infinite reverse; }
@keyframes chase { 0% { opacity: 1; } 50% { opacity: .15; } }
.marquee h1 { margin: 0; font: 400 clamp(42px, 8.5vw, 104px)/.95 var(--neon); letter-spacing: .02em; color: var(--cream);
  text-shadow: 0 0 6px #fff, 0 0 18px var(--glow), 0 0 42px var(--red); }
.marquee h1 .sub { display: block; }   /* the strapline sits inside the h1 so it names what the site is */
.marquee .sub { margin: 10px 0 0; font: 400 clamp(16px, 2.2vw, 24px)/1.2 var(--sign); letter-spacing: .28em; color: var(--bulb); text-shadow: 0 0 10px rgba(255, 209, 102, .6); }
.pitch { max-width: 720px; margin: 26px auto 0; text-align: center; color: var(--soft); font-size: clamp(17px, 1.7vw, 19px); }
.pitch strong { color: var(--cream); }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px 0 0; }
.awning { position: relative; height: 30px; margin-top: clamp(30px, 5vw, 50px); background: repeating-linear-gradient(90deg, var(--red) 0 44px, var(--cream) 44px 88px); }
/* scalloped fringe: a half-disc under every stripe, in that stripe's colour */
.awning::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; z-index: 1;
  background: radial-gradient(circle at 22px 0, var(--red) 0 21px, transparent 22px) 0 0 / 88px 16px repeat-x, radial-gradient(circle at 22px 0, var(--cream) 0 21px, transparent 22px) 44px 0 / 88px 16px repeat-x; }
.sea { height: 60px; background: linear-gradient(180deg, var(--sea), var(--sea2)); position: relative; overflow: hidden; }
.sea::before { content: ""; position: absolute; inset: 0 -60px; background: repeating-radial-gradient(ellipse 30px 8px at 30px 12px, rgba(127, 216, 190, .35) 0 2px, transparent 3px 60px); background-size: 60px 30px; animation: waves 6s linear infinite; }
@keyframes waves { to { transform: translateX(60px); } }

/* ---------- the pier boardwalk every section stands on ---------- */
.boards { background: repeating-linear-gradient(90deg, var(--wood) 0 118px, var(--wood2) 118px 122px), var(--wood); position: relative; }
.boards::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 38px); pointer-events: none; }
section.block { position: relative; padding: clamp(40px, 6vw, 76px) 0; }
section.block.dark { background: var(--night); }
.sign-h { display: inline-block; margin: 0 0 8px; padding: 10px 20px 8px; font: 400 clamp(26px, 3.6vw, 42px)/1 var(--sign); color: var(--night); background: var(--cream); border-radius: 8px; box-shadow: 4px 4px 0 var(--red); transform: rotate(-1.2deg); }
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: 30px; }
.head p { margin: 10px 0 0; color: var(--cream); max-width: 40em; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* ---------- filters as fairground tickets ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; font: 800 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 11px 18px; border: 0; cursor: pointer; color: var(--night); background: #f3c9a0;
  -webkit-mask: radial-gradient(7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.chip[aria-pressed="true"] { background: var(--bulb); }

/* ---------- cabinets ---------- */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
.cab { --hue: #e63946; display: flex; flex-direction: column; border-radius: 18px 18px 10px 10px; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 3px solid #0e0b24;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue) 55%, #000), 0 18px 34px rgba(0, 0, 0, .45); transition: transform .18s, box-shadow .18s; }
.cab[hidden] { display: none; }
.cab .mq { position: relative; margin: 10px 10px 0; padding: 12px 10px 10px; text-align: center; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 85%, #fff), var(--hue)); box-shadow: inset 0 0 18px rgba(255, 255, 255, .35), 0 0 22px color-mix(in srgb, var(--hue) 55%, transparent); }
.cab .mq h3 { margin: 0; font: 400 clamp(19px, 1.9vw, 24px)/1.05 var(--sign); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 12px rgba(255, 255, 255, .5); }
.cab .mq h3 a { text-decoration: none; }
.cab .mq .tags { position: absolute; top: -12px; right: 8px; display: flex; gap: 6px; }
.tag { font: 400 9px/1 var(--hi); letter-spacing: .04em; padding: 6px 7px; border-radius: 4px; background: var(--night); color: var(--bulb); border: 2px solid var(--bulb); }
.tag.new { background: var(--mint); color: #062a22; border-color: #062a22; }
.cab .screen { position: relative; display: block; margin: 12px 14px 0; aspect-ratio: 16 / 10; border-radius: 16px / 12px; overflow: hidden; background: #000;
  border: 8px solid #05040f; box-shadow: inset 0 0 0 2px #2c2650;
  /* iOS Safari: composite the frame and its picture as one unit and clip them together, so the picture can't
     drift or jitter inside its rounded frame during momentum scrolling */
  isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); }
/* The picture is pinned to fill the frame rather than sized in the flow. Safari let an in-flow img with height:100%
   feed back into its aspect-ratio frame's automatic minimum height: frame grows, picture grows, repeat on every
   relayout while scrolling ("zooming in more and more" on iPhone). min-height:0 on the frame closes the same loop. */
.cab .screen { min-height: 0; }
.cab .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* no filter/transition here: they put each picture on its own GPU layer on iOS */
.cab .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55)); }
.cab .panel { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.cab .kind { font: 400 9px/1.2 var(--hi); color: var(--dim); letter-spacing: .06em; }
.cab p { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.5; flex: 1; }
.cab .controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 12px; border-top: 2px dashed #3a3366; }
.arcade-btn { text-shadow: 0 1px 2px rgba(0, 0, 0, .7); display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; text-decoration: none; font: 400 10px/1 var(--hi); color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--hue) 60%, #fff), var(--hue) 55%, color-mix(in srgb, var(--hue) 70%, #000)); box-shadow: 0 5px 0 color-mix(in srgb, var(--hue) 55%, #000), 0 0 0 4px #0e0b24; transition: transform .1s, box-shadow .1s; }
.arcade-btn:hover { box-shadow: 0 5px 0 color-mix(in srgb, var(--hue) 55%, #000), 0 0 0 4px #0e0b24, 0 0 20px var(--hue); }
.arcade-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--hue) 55%, #000), 0 0 0 4px #0e0b24; }
.coin { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.coin .slot { font: 400 8px/1 var(--hi); color: var(--bulb); padding: 7px 8px; border: 2px solid #3a3366; border-radius: 4px; background: #0e0b24; }
.coin a { font-size: 14px; color: var(--soft); }
.coin a:hover { color: var(--bulb); }
/* the "want one built?" booth fills the grid's last row */
.booth { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(22px, 3vw, 36px); border-radius: 18px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 12px, transparent 12px 24px), linear-gradient(135deg, #3b1d3f, #1a1636); border: 3px dashed var(--bulb); }
.booth[hidden] { display: none; }
.booth h3 { margin: 0; font: 400 clamp(24px, 2.8vw, 34px)/1.1 var(--sign); color: var(--bulb); }
.booth p { margin: 0; color: var(--soft); max-width: 36em; }
.booth .acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.booth .acts a.more { color: var(--cream); }
@media (max-width: 600px) { .booth { grid-column: auto; } }

/* ---------- hall of fame: a hi-score board ---------- */
.hof { max-width: 820px; margin: 0 auto; padding: clamp(20px, 3vw, 32px); border-radius: 14px; background: #04060f; border: 6px solid #22203d; box-shadow: 0 0 0 3px #0b0a18, inset 0 0 40px rgba(127, 216, 190, .06); }
.hof h2 { margin: 0 0 18px; text-align: center; font: 400 clamp(14px, 2vw, 20px)/1.4 var(--hi); color: var(--mint); text-shadow: 0 0 10px rgba(127, 216, 190, .6); }
.hof ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hof li a { display: grid; grid-template-columns: 34px 88px 1fr auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 8px; text-decoration: none; font: 400 11px/1.4 var(--hi); color: var(--cream); }
.hof li a:hover { background: rgba(255, 209, 102, .08); }
.hof li img { width: 88px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.hof li .rank { color: var(--bulb); }
.hof li .go { color: var(--mint); }

/* ---------- ask the manager ---------- */
.office { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 60px); align-items: start; }
@media (max-width: 900px) { .office { grid-template-columns: 1fr; } }
.office .lead { color: var(--cream); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.office .lead p { margin: 12px 0; }
.offers { display: grid; gap: 12px; }
.offer { display: block; padding: 16px 18px; border-radius: 12px; background: var(--cream); color: var(--night); text-decoration: none; box-shadow: 4px 4px 0 var(--wood2); transition: transform .15s; }
.offer b { display: block; font: 400 20px/1.2 var(--sign); margin-bottom: 2px; color: var(--red); }
.offer span { font-size: 15px; }

/* ---------- prose ---------- */
.prose { max-width: 760px; color: var(--soft); }
.prose h3 { color: var(--bulb); font: 400 22px/1.3 var(--sign); margin: 24px 0 6px; }
.prose p { margin: 0 0 12px; }
.prose a { color: var(--bulb); }

/* ---------- footer: the end of the pier ---------- */
footer.foot { background: var(--sea2); border-top: 6px solid var(--wood2); padding: 28px 0 40px; color: var(--dim); font-size: 14px; }
footer.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; }
footer.foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer.foot a { text-decoration: none; color: var(--soft); }
footer.foot a:hover { color: var(--bulb); }

/* touch screens: keep the vignette, drop the 1px CRT scanlines, which crawl against the retina pixel grid while scrolling */
@media (hover: none) { .cab .screen::after { background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .5)); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Lift and zoom only with a real pointer. On phones :hover fires on the first touch and sticks, so every
   card you touched while scrolling stayed zoomed and lifted. */
@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #b8862b, 0 0 24px rgba(255, 209, 102, .5); }
  .cab:hover { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--hue), 0 0 34px color-mix(in srgb, var(--hue) 45%, transparent), 0 22px 40px rgba(0, 0, 0, .5); }
  .cab .screen img { filter: saturate(1.1) contrast(1.05); transition: transform .4s, filter .3s; }
  .cab:hover .screen img { transform: scale(1.04); filter: saturate(1.25) contrast(1.1) brightness(1.08); }
  .offer:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--wood2); }
}