/* Games: its own room in the building, livelier than the studios. A dot grid, ink outlines, hard offset
   shadows and Silkscreen pixel labels, in the brand's teal and raspberry, with Germania One for the headlines. */
.arc {
  --a-bg: var(--white); --a-ink: var(--ink); --a-mute: rgba(11, 22, 21, .66); --a-card: var(--white);
  --a-yellow: var(--teal); --a-pink: var(--rasp); --a-blue: var(--deep); --a-mint: var(--teal); --a-orange: var(--rasp-lo);
  --a-line: 3px solid var(--a-ink); --a-shadow: 6px 6px 0 var(--a-ink);
  --a-d: var(--display); --a-pxf: "Silkscreen", "Inter Tight", monospace;
  background: var(--a-bg) radial-gradient(rgba(0, 184, 169, .22) 1.2px, transparent 1.4px) 0 0 / 22px 22px; color: var(--a-ink);
}
.a-d { font-family: var(--a-d); font-weight: 400; line-height: .98; }
.a-d em { font-family: inherit; font-size: 1em; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--a-pink); }
.a-px { font-family: var(--a-pxf); font-size: 12px; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; }
.a-px b { font-weight: 400; color: var(--a-pink); }
.a-tag { display: inline-block; padding: 5px 10px; border: 2px solid var(--a-ink); border-radius: 8px; background: var(--a-yellow); }
.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 26px; border: var(--a-line); border-radius: 14px; background: var(--a-yellow); color: var(--a-ink); font-family: var(--a-d); font-size: 16px; line-height: 1; white-space: nowrap; box-shadow: var(--a-shadow); transition: transform .12s ease, box-shadow .12s ease; }
.a-btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--a-ink); }
.a-btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--a-ink); }
.a-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 3px; border-bottom: 2px solid currentColor; font-size: 15px; font-weight: 600; }
.a-link svg { width: 16px; height: 16px; }

/* the marquee */
.a1 { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: max(calc(100svh - var(--header-h)), 620px); padding: 34px 48px 64px; }
.a-top { display: flex; justify-content: space-between; gap: 24px; }
.a1-main { position: relative; z-index: 1; margin-top: auto; padding-top: 64px; }
.a1-h { font-size: clamp(50px, 8.2vw, 134px); text-shadow: .05em .05em 0 var(--a-pink); }
.a1-h span { display: block; }
.a1-h .o { color: var(--a-bg); -webkit-text-stroke: max(2px, .025em) var(--a-ink); text-shadow: .05em .05em 0 var(--a-blue); }
.a1-p { max-width: 580px; margin-top: 30px; font-size: 19px; line-height: 1.5; color: var(--a-mute); }
.a1-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 36px; }
.a-heart { position: absolute; right: calc(8vw + 126px); top: 19%; width: 14px; height: 14px; animation: hop 1.2s steps(2) infinite; }
@keyframes hop { 50% { transform: translateY(-14px); } }

@keyframes blink { 50% { opacity: 0; } }

/* sections */
.a-sec { padding: 120px 48px; }
.a-head { max-width: 780px; }
.a-head h2 { margin-top: 18px; font-size: clamp(38px, 5.2vw, 82px); }
.a-head p { margin-top: 18px; font-size: 18px; line-height: 1.5; color: var(--a-mute); }

/* the game machine */
.mach { max-width: 1060px; margin-top: 56px; padding: 0 28px 30px; border: var(--a-line); border-radius: 28px; background: var(--a-pink); box-shadow: 10px 10px 0 var(--a-ink); }
.mach-top { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 -28px 26px; padding: 16px; border-bottom: var(--a-line); border-radius: 25px 25px 0 0; background: var(--a-yellow); font-family: var(--a-d); font-size: clamp(18px, 2vw, 26px); text-transform: uppercase; }
.mach-top span { margin: 0 8px; }
.mach-top i { width: 12px; height: 12px; border: 2px solid var(--a-ink); border-radius: 50%; background: #fff; animation: bulb 1s steps(2) infinite; animation-delay: calc(var(--k) * .12s); }
@keyframes bulb { 50% { background: var(--a-orange); } }
.reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.reel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.reel-k { color: #fff; text-shadow: 2px 2px 0 var(--a-ink); }
.reel-win { position: relative; height: 222px; overflow: hidden; border: var(--a-line); border-radius: 16px; background: #fff; cursor: pointer; outline-offset: 4px; }
.reel-win::before, .reel-win::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; height: 72px; pointer-events: none; }
.reel-win::before { top: 0; background: linear-gradient(#fff, rgba(255, 255, 255, .55)); }
.reel-win::after { bottom: 0; background: linear-gradient(rgba(255, 255, 255, .55), #fff); }
.reel-strip { position: absolute; left: 0; right: 0; top: 0; margin: 0; padding: 0; list-style: none; will-change: transform; }
.reel-strip li { display: grid; place-items: center; height: 72px; padding: 0 12px; font-family: var(--a-d); font-size: clamp(15px, 1.7vw, 22px); line-height: 1.05; text-align: center; text-transform: uppercase; }
.reel.spinning .reel-strip { filter: blur(1.2px); }
.pay { position: absolute; left: -3px; right: -3px; top: 72px; z-index: 3; height: 72px; border-top: 3px solid var(--a-ink); border-bottom: 3px solid var(--a-ink); pointer-events: none; }
.pay::before, .pay::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -9px; border: 9px solid transparent; }
.pay::before { left: 0; border-left-color: var(--a-ink); }
.pay::after { right: 0; border-right-color: var(--a-ink); }
.reel.held .reel-win { box-shadow: inset 0 0 0 4px var(--a-yellow); }
.reel-lock { align-self: center; height: 36px; padding: 0 16px; border: var(--a-line); border-radius: 10px; background: #fff; box-shadow: 3px 3px 0 var(--a-ink); transition: background-color .15s, color .15s; }
.reel-lock[aria-pressed="true"] { background: var(--a-ink); color: var(--a-yellow); }
.mach-ctl { display: flex; justify-content: center; margin-top: 26px; }
.a-spin { width: 124px; height: 124px; border: var(--a-line); border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .7) 0 11%, transparent 12%), var(--a-yellow); color: var(--a-ink); font-family: var(--a-d); font-size: 26px; text-transform: uppercase; box-shadow: 0 9px 0 var(--a-ink); transition: transform .1s ease, box-shadow .1s ease; }
.a-spin:hover { transform: translateY(-2px); box-shadow: 0 11px 0 var(--a-ink); }
.a-spin:active { transform: translateY(7px); box-shadow: 0 2px 0 var(--a-ink); }

/* the idea it deals */
.idea { position: relative; max-width: 1060px; margin-top: 40px; padding: 32px; border: var(--a-line); border-radius: 22px; background: var(--a-card); box-shadow: var(--a-shadow); }
.idea h3 { margin-top: 14px; font-family: var(--a-d); font-size: clamp(30px, 3.6vw, 54px); line-height: 1; text-transform: uppercase; }
.idea-how { max-width: 700px; margin-top: 16px; font-size: 20px; line-height: 1.45; }
.idea-gets { max-width: 700px; margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--a-mute); }
.idea-gets b { color: var(--a-ink); }
.idea-built { display: inline-flex; margin-top: 18px; padding: 6px 12px; border: 2px solid var(--a-ink); border-radius: 999px; background: var(--a-mint); }
.idea-built[hidden] { display: none; }
.idea-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }
.idea.pop { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.965); } to { transform: none; } }
.bits { position: absolute; left: 50%; top: 0; z-index: 4; pointer-events: none; }
.bits i { position: absolute; width: 10px; height: 10px; background: var(--c); box-shadow: 0 0 0 2px var(--a-ink); animation: bit .9s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes bit { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

/* the hall of fame: one cabinet per game */

    

/* the pixel game screens */
.sc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; padding: 18px; text-align: center; font-family: var(--a-pxf); background: var(--ink) radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 6px 6px; }
.sc .a-px { color: var(--a-yellow); font-size: 11px; }
.sc b { font-family: var(--a-pxf); font-size: 16px; font-weight: 400; line-height: 1.35; color: #fff; }

/* Myth or Fact */
.mof { max-width: 860px; margin-top: 56px; padding: 26px; border: var(--a-line); border-radius: 26px; background: var(--a-blue); color: #fff; box-shadow: 10px 10px 0 var(--a-ink); }
.mof-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mof-score { padding: 5px 10px; border: 2px solid var(--a-ink); border-radius: 8px; background: var(--a-ink); color: var(--a-yellow); }
.mof-pips { display: flex; gap: 8px; }
.mof-pips i { width: 16px; height: 16px; border: 2px solid var(--a-ink); background: #fff; }
.mof-pips i.ok { background: var(--a-mint); } .mof-pips i.no { background: var(--a-pink); }
.mof-time { height: 14px; margin-top: 16px; overflow: hidden; border: 3px solid var(--a-ink); border-radius: 7px; background: #fff; }
.mof-time i { display: block; height: 100%; background: var(--a-yellow); transform-origin: 0 50%; transform: scaleX(0); }
.mof-time i.run { animation: drain linear forwards; }
.mof-time i.stop { animation-play-state: paused; }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.mof-card { display: grid; place-items: center; min-height: 180px; margin-top: 18px; padding: 26px; border: var(--a-line); border-radius: 18px; background: #fff; color: var(--a-ink); text-align: center; transition: background-color .25s; }
.mof-q { max-width: 620px; font-family: var(--a-d); font-size: clamp(20px, 2.4vw, 32px); line-height: 1.15; text-transform: uppercase; }
.mof.ok .mof-card { background: #d9f6f2; } .mof.no .mof-card { background: #ffe3ec; }
.mof-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.mof-btns[hidden] { display: none; }
.mof-b { height: 76px; border: var(--a-line); border-radius: 16px; color: var(--a-ink); font-family: var(--a-d); font-size: 28px; text-transform: uppercase; box-shadow: 0 7px 0 var(--a-ink); transition: transform .1s, box-shadow .1s; }
.mof-b.m { background: var(--a-pink); } .mof-b.f { background: var(--a-mint); }
.mof-b:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--a-ink); }
.mof-go { display: flex; justify-content: center; margin-top: 18px; }
.mof-go .a-btn[hidden] { display: none; }
.mof-why { min-height: 48px; margin-top: 18px; font-size: 16px; line-height: 1.5; }
.mof-end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 18px; }
.mof-end[hidden] { display: none; }
.mof .a-link { color: #fff; }

/* questions */
.a-faq { max-width: 1060px; margin-top: 56px; }
.a-q { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 26px 0 30px; border-top: 3px solid var(--a-ink); }
.a-q:last-child { border-bottom: 3px solid var(--a-ink); }
.a-q h3 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.a-q p { font-size: 16px; line-height: 1.5; color: var(--a-mute); }

@media (max-width: 899px) {
  .a1 { padding: 22px 16px 56px; }
  .a-top .r { display: none; }
  .a1-h { font-size: clamp(46px, 14.5vw, 72px); }
  .a1-p { font-size: 17px; }
  .a-heart { top: 92px; right: 140px; }
  
  .a-sec { padding: 88px 16px; }
  .mach { padding: 0 14px 22px; box-shadow: 6px 6px 0 var(--a-ink); }
  .mach-top { margin: 0 -14px 18px; }
  .mach-top i:nth-child(n+3):nth-child(-n+4), .mach-top i:nth-last-child(-n+2) { display: none; }
  .reels { gap: 8px; }
  .reel-win { height: 174px; }
  .reel-win::before, .reel-win::after { height: 56px; }
  .reel-strip li { height: 56px; padding: 0 4px; font-size: 12px; }
  .pay { top: 56px; height: 56px; }
  .reel-k { font-size: 10px; }
  .reel-lock { height: 32px; padding: 0 10px; font-size: 11px; }
  .a-spin { width: 104px; height: 104px; font-size: 22px; }
  .idea { padding: 22px; }
  .idea-how { font-size: 17px; }
  
  .mof { padding: 18px; box-shadow: 6px 6px 0 var(--a-ink); }
  .mof-card { min-height: 160px; padding: 18px; }
  .mof-b { height: 64px; font-size: 22px; }
  .a-q { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .a-heart, .mach-top i { animation: none; }
}

/* the real games: four rooms, each with its start screen and the games that ran inside */
.g-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 56px; }
.g-room { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; align-items: start; padding: 20px; border: var(--a-line); border-radius: 22px; background: var(--white); box-shadow: var(--a-shadow); transition: transform .3s var(--ease-out), box-shadow .3s; }
.g-room:hover { transform: translate(-2px, -3px); box-shadow: 9px 10px 0 var(--a-ink); }
.g-room.r0, .g-room.r3 { --c: var(--teal); } .g-room.r1, .g-room.r2 { --c: var(--rasp); }
.g-room-scr { display: block; aspect-ratio: 9 / 16; overflow: hidden; border: 3px solid var(--a-ink); border-radius: 18px; background: var(--c); }
.g-room-scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.g-room-txt h3 { margin-top: 6px; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1; }
.g-room-txt p { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--a-mute); }
.g-room-games { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.g-room-games i { padding: 6px 11px; border: 2px solid var(--a-ink); border-radius: 99px; background: color-mix(in srgb, var(--c) 18%, white); font-style: normal; font-size: 13px; font-weight: 600; }
/* your idea */
.idea-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; align-items: end; padding: 40px; border: var(--a-line); border-radius: 28px; background: var(--white); box-shadow: var(--a-shadow); }
.idea-box .a-head { grid-row: span 2; }
.idea-in { display: grid; gap: 10px; }
.idea-in textarea { width: 100%; padding: 16px; border: var(--a-line); border-radius: 16px; background: #fff; font: 17px/1.5 var(--sans); color: var(--ink); resize: vertical; }
.idea-in textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(0, 184, 169, .3); }
.idea-send { justify-self: start; }
.bonus { margin-top: 120px; }
/* how it works and the rooms we make games for */
.g-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; list-style: none; padding: 0; }
.g-steps li { padding: 26px; border: var(--a-line); border-radius: 20px; background: var(--white); box-shadow: var(--a-shadow); }
.g-steps li:nth-child(2) { background: color-mix(in srgb, var(--teal) 16%, white); } .g-steps li:nth-child(3) { background: color-mix(in srgb, var(--rasp) 12%, white); }
.g-steps h3 { margin-top: 14px; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; }
.g-steps p { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--a-mute); }
.g-events { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; list-style: none; padding: 0; }
.g-events li { display: grid; gap: 6px; padding: 20px; border: 2px solid var(--a-ink); border-radius: 16px; background: var(--white); }
.g-events li:nth-child(4n + 1) { box-shadow: 4px 4px 0 var(--teal); } .g-events li:nth-child(4n + 2) { box-shadow: 4px 4px 0 var(--rasp); } .g-events li:nth-child(4n + 3) { box-shadow: 4px 4px 0 var(--ink); } .g-events li:nth-child(4n) { box-shadow: 4px 4px 0 var(--teal-ink); }
.g-events b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.05; }
.g-events span { font-size: 14px; color: var(--a-mute); }
@media (max-width: 900px) {
  .g-rooms, .g-steps { grid-template-columns: 1fr; }
  .g-events { grid-template-columns: 1fr 1fr; }
  .idea-box { grid-template-columns: 1fr; padding: 24px; }
  .idea-box .a-head { grid-row: auto; }
}
@media (max-width: 560px) { .g-room { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px; } .g-events { grid-template-columns: 1fr; } }