/* R-01 · Fun mode (/fun/). Playful: cream paper, ink outlines, hard offset shadows, sticker colours, chunky
   type (Lilita One for display, Fredoka for text). Same building blocks as Work mode (site.css), retinted.
   The Karhutla memorial and its game stay calm on purpose: no tilt, no bounce. */

@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Lilita"; src: url("/fonts/lilita.woff2") format("woff2"); font-weight: 400; font-display: swap; }

body.fun {
  color-scheme: light;
  --cream: #fff3dc; --paper: #fffaf0; --inkf: #1d1430;
  --ink: var(--inkf); --ink2: var(--inkf); --strong: var(--inkf); --text: #3d3150; --muted: #6a5d7a; --dim: #857a92;
  --line: rgba(29, 20, 48, .14); --line2: var(--inkf); --panel: var(--paper); --bg: var(--cream);
  --accent: #ff4f5e; --accent-bg: #ff4f5e; --accent-ink: #fff; --ok: #12a862; --sel: #ffd23f;
  --sun: #ffd23f; --sky: #4cc3ff; --mint: #3fd68f; --grape: #9d6bff; --tang: #ff8a1f; --bubble: #ff8fc7; --tomato: #ff4f5e;
  --body: "Fredoka", "Quattro fb", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Lilita", "Fredoka", ui-rounded, system-ui, sans-serif;
  --nav-bg: rgba(255, 243, 220, .9); --nav-h: 68px;
  --mode-knob: var(--inkf); --mode-ink: var(--cream);
  --radius: 24px; --pop: 4px 4px 0 var(--inkf); --pop-lg: 7px 7px 0 var(--inkf);
  font: 500 1.06rem/1.55 var(--body);
  background-image: radial-gradient(circle, rgba(29, 20, 48, .09) 1.5px, transparent 2px); background-size: 26px 26px;
}
.fun a { color: var(--inkf); text-decoration-color: var(--tomato); text-decoration-thickness: 2px; }
.fun a:hover { color: var(--tomato); }
.fun :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

/* ---------- Shared parts, retinted ---------- */
.fun .nav { border-bottom: 3px solid var(--inkf); }
.fun .logo .mark { box-shadow: 0 0 0 2px var(--inkf), 3px 3px 0 var(--inkf); }
.fun .nav-links a { font: 600 .96rem/1 var(--body); color: var(--text); }
.fun .nav-links a:hover, .fun .nav-links a.on { background: var(--sun); color: var(--inkf); }
.fun .mode { background: #fff; border: 2.5px solid var(--inkf); box-shadow: 3px 3px 0 var(--inkf); }
.fun .mode a { font: 600 .9rem/1 var(--body); letter-spacing: .02em; text-transform: none; color: var(--muted); }
.fun .mode a[aria-current="page"] { color: var(--mode-ink); }
.fun .nav-cta { font: 600 .95rem/1 var(--body); border: 2.5px solid var(--inkf); box-shadow: 3px 3px 0 var(--inkf); background: var(--sun); color: var(--inkf); }
.fun .nav-cta:hover { background: var(--tomato); color: #fff; }
.fun .btn { border: 3px solid var(--inkf); border-radius: 16px; box-shadow: var(--pop); font: 600 1.06rem/1 var(--body); padding: 15px 22px; color: var(--accent-ink); }
.fun .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--inkf); color: var(--accent-ink); }
.fun .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--inkf); }
.fun .btn--sun { background: var(--sun); color: var(--inkf); }
.fun .btn--sun:hover { background: var(--sun); color: var(--inkf); }
.fun .btn--ghost { background: #fff; color: var(--inkf); }
.fun .btn--ghost:hover { background: #fff; color: var(--inkf); border-color: var(--inkf); }
.fun .pill { border: 2.5px solid var(--inkf); font: 600 .92rem/1 var(--body); background: #fff; color: var(--inkf); box-shadow: 3px 3px 0 var(--inkf); transition: transform .12s, box-shadow .12s, background .2s; }
.fun .pill:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--inkf); color: var(--inkf); border-color: var(--inkf); background: var(--sun); }
.fun .pill:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--inkf); }
.fun .pill--go { background: var(--tomato); color: #fff; }
.fun .pill--go:hover { background: #ff3346; color: #fff; }
.fun .pill--soon { box-shadow: none; border-style: dashed; color: var(--muted); background: transparent; font-weight: 500; }
.fun .pill--soon:hover { transform: none; background: transparent; color: var(--muted); }
.fun .screen { border: 3px solid var(--inkf); border-radius: 20px; box-shadow: var(--pop); }
.fun .play span { border: 3px solid var(--inkf); box-shadow: 3px 3px 0 var(--inkf); background: var(--sun); color: var(--inkf); }
.fun .reel figcaption b { font: 400 1.1rem/1.2 var(--display); letter-spacing: .01em; }
.fun .reel figcaption span { font: 600 .74rem/1.5 var(--body); letter-spacing: .04em; }
.fun .r-bubble { background: #fff; color: var(--inkf); border: 2.5px solid var(--inkf); box-shadow: 4px 4px 0 var(--inkf); font: 600 .92rem/1.35 var(--body); }
.fun .r01:focus-visible { outline-color: var(--sky); }
.fun kbd { border-color: var(--inkf); color: var(--inkf); background: #fff; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--inkf); background: #fff; font: 600 .8rem/1 var(--body); color: var(--inkf); white-space: nowrap; }
.chip--go { background: var(--mint); } .chip--soon { background: var(--sun); } .chip--lab { background: var(--bubble); } .chip--new { background: var(--tomato); color: #fff; }

/* ---------- Sections ---------- */
.fsec { position: relative; padding: clamp(80px, 10vw, 130px) 0; }
.fsec-head { display: grid; gap: 14px; max-width: 760px; }
.sticker { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 2.5px solid var(--inkf); background: var(--sun); box-shadow: 3px 3px 0 var(--inkf);
  font: 600 .86rem/1 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--inkf); transform: rotate(-2deg); }
.ftitle { margin: 0; font: 400 clamp(2.6rem, 6.4vw, 5rem)/.95 var(--display); letter-spacing: .005em; color: var(--inkf); text-wrap: balance; }
.ftitle .hl { display: inline-block; padding: 0 .16em; border-radius: .12em; background: var(--hl, var(--sun)); border: .05em solid var(--inkf); box-shadow: .06em .06em 0 var(--inkf); transform: rotate(-1.5deg); }
.flede { margin: 0; max-width: 58ch; font-size: clamp(1.06rem, 1.5vw, 1.22rem); color: var(--text); }

/* ---------- Hero ---------- */
.fhero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + clamp(40px, 6vw, 80px)) 0 clamp(70px, 8vw, 110px); }
.fhero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.fhero h1 { margin: 22px 0 0; font: 400 clamp(3.3rem, 8.4vw, 7.4rem)/.9 var(--display); color: var(--inkf); letter-spacing: .005em; }
.fhero h1 .l2 { display: block; }
.fhero h1 .punch { display: inline-block; padding: 0 .14em .04em; margin-top: .08em; border-radius: .14em; background: var(--tomato); color: #fff; border: .045em solid var(--inkf); box-shadow: .07em .07em 0 var(--inkf); transform: rotate(-3deg); }
.fhero .flede { margin-top: 26px; }
.fhero .cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.scores { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
.scores li { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--inkf); box-shadow: var(--pop); text-align: center; font: 600 .74rem/1.1 var(--body); color: var(--inkf); }
.scores li b { display: block; font: 400 1.9rem/1 var(--display); }
.scores li:nth-child(1) { background: var(--mint); transform: rotate(-6deg); }
.scores li:nth-child(2) { background: var(--sky); transform: rotate(4deg); }
.scores li:nth-child(3) { background: var(--bubble); transform: rotate(-3deg); }

/* The telly: the studio reel on a chunky TV, game stickers floating around it, R01 peeking out. */
.telly-wrap { position: relative; padding: 40px 20px 60px; }
.telly { position: relative; z-index: 1; padding: 18px 18px 54px; border-radius: 34px; background: var(--grape); border: 3.5px solid var(--inkf); box-shadow: var(--pop-lg); transform: rotate(1.5deg); }
.telly::before, .telly::after { content: ""; position: absolute; top: -58px; width: 5px; height: 70px; border-radius: 4px; background: var(--inkf); transform-origin: bottom center; }
.telly::before { left: 42%; transform: rotate(-24deg); }
.telly::after { left: 54%; transform: rotate(22deg); }
.telly-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #000; border: 3.5px solid var(--inkf); }
.telly-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.telly-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 4px), radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .18), transparent 50%); }
.telly-knobs { position: absolute; left: 22px; right: 22px; bottom: 14px; display: flex; align-items: center; gap: 10px; }
.telly-knobs i { width: 22px; height: 22px; border-radius: 50%; background: var(--sun); border: 3px solid var(--inkf); }
.telly-knobs i:nth-child(2) { background: var(--tomato); }
.telly-knobs span { margin-left: auto; font: 600 .78rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.telly-knobs span::before { content: "● "; color: var(--tomato); }
.r01-wrap.bot--fun { position: absolute; z-index: 2; width: 128px; right: -14px; bottom: -6px; }
.bot--fun .r-bubble { right: 92%; bottom: 72%; max-width: 230px; }
.floaters { position: absolute; inset: 0; pointer-events: none; }
.floaters img { position: absolute; width: 64px; height: 64px; padding: 5px; border-radius: 18px; background: #fff; border: 3px solid var(--inkf); box-shadow: 3px 3px 0 var(--inkf); object-fit: contain; }
.floaters .px { image-rendering: pixelated; }
.floaters img:nth-child(1) { left: -6px; top: 6px; transform: rotate(-12deg); }
.floaters img:nth-child(2) { left: 30%; top: -10px; transform: rotate(8deg); width: 54px; height: 54px; }
.floaters img:nth-child(3) { right: 2px; top: 16px; transform: rotate(10deg); }
.floaters img:nth-child(4) { left: -18px; top: 46%; transform: rotate(6deg); width: 56px; height: 56px; }
.floaters img:nth-child(5) { left: 8%; bottom: 8px; transform: rotate(-8deg); }
.floaters img:nth-child(6) { left: 46%; bottom: 0; transform: rotate(5deg); width: 54px; height: 54px; }
@media (prefers-reduced-motion: no-preference) {
  .floaters img { animation: bob 4.6s ease-in-out infinite; }
  .floaters img:nth-child(2n) { animation-duration: 5.4s; animation-delay: -1.2s; }
  .floaters img:nth-child(3n) { animation-duration: 6.2s; animation-delay: -2.4s; }
  @keyframes bob { 50% { translate: 0 -10px; } }
}
@media (max-width: 920px) {
  .fhero-in { grid-template-columns: 1fr; }
  .telly-wrap { width: 100%; max-width: 560px; margin-inline: auto; }
  .bot--fun .r-bubble { right: 0; bottom: 100%; }
}
@media (max-width: 520px) { .floaters img { width: 48px; height: 48px; border-radius: 14px; } .r01-wrap.bot--fun { width: 96px; } .scores li { width: 82px; height: 82px; } }

/* ---------- The memorial strip (calm) ---------- */
.memorial { background: #1a1112; color: #e9e0d6; border-block: 3px solid var(--inkf); }
.memorial a { display: flex; align-items: center; gap: 14px; padding: 18px 0; color: #e9e0d6; text-decoration: none; font: 500 1rem/1.45 var(--body); }
.memorial a:hover { color: #fff; }
.memorial b { color: #fff; }
.memorial .go { margin-left: auto; color: #b9aea4; }
.ribbon-ico { width: 14px; height: 20px; flex: none; color: #fff8ef; }

/* ---------- Kitty Knight ---------- */
.kk { --storm: #24203a; --heather: #6b4d8a; --moss: #5d7a3a; --ember: #f08a2c;
  color: #f1ecf7; background: var(--storm); border-bottom: 3px solid var(--inkf); overflow: hidden;
  background-image: radial-gradient(ellipse at 80% 0%, rgba(107, 77, 138, .55), transparent 60%), radial-gradient(ellipse at 0% 100%, rgba(93, 122, 58, .35), transparent 55%); }
.kk::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(115deg, transparent 0 46%, rgba(255, 255, 255, .05) 46% 47%, transparent 47% 100%); background-size: 120px 120px; }
@media (prefers-reduced-motion: no-preference) { .kk::before { animation: rain 1.2s linear infinite; } @keyframes rain { to { background-position: -60px 120px; } } }
.kk .wrap { position: relative; }
.kk .ftitle { color: #fff; }
.kk .flede { color: #ddd5ea; }
.kk-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 60px); align-items: center; margin-top: clamp(36px, 5vw, 56px); }
.kk-art { position: relative; margin: 0; }
.kk-art img { display: block; width: 100%; height: auto; border-radius: 22px; border: 3.5px solid var(--inkf); box-shadow: 7px 7px 0 #0e0b1a; image-rendering: pixelated; transform: rotate(-1.2deg); }
.kk-art .burst { position: absolute; z-index: 1; right: -12px; top: -22px; display: grid; place-items: center; width: 96px; height: 96px; transform: rotate(12deg);
  background: var(--sun); color: var(--inkf); font: 400 1.35rem/1 var(--display); border: 3px solid var(--inkf);
  clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 40%, 85% 56%, 96% 76%, 74% 78%, 68% 100%, 50% 86%, 32% 100%, 26% 78%, 4% 76%, 15% 56%, 0 40%, 20% 32%, 18% 10%, 39% 18%); }
.kk-tag { margin: 0; font: 400 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--display); color: var(--ember); }
.kk .feats { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.kk .feats li { position: relative; padding-left: 30px; color: #e7e0f0; }
.kk .feats li::before { content: "⚔"; position: absolute; left: 0; top: -1px; color: var(--ember); font-size: 1.05rem; }
.kk .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.kk .pill:not(.pill--go) { background: #fff; }
/* The moves: the hero sprite, frame by frame (js/fun.js), on a strip of moorland. */
.arena { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; margin-top: clamp(32px, 4vw, 48px); padding: 18px 22px 0; border-radius: 22px; border: 3px solid var(--inkf);
  background: linear-gradient(180deg, #3a3156 0%, #4a3f68 62%, var(--moss) 62%, #4c6830 100%); box-shadow: 6px 6px 0 #0e0b1a; overflow: hidden; }
.arena::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none;
  background-image: radial-gradient(circle at 20% 30%, var(--heather) 0 4px, transparent 5px), radial-gradient(circle at 70% 60%, #8a63b0 0 3px, transparent 4px); background-size: 46px 30px, 34px 24px; opacity: .8; }
.kitten { --w: min(262px, 62vw); position: relative; z-index: 1; width: var(--w); height: calc(var(--w) * 135 / 262); margin: 0 0 6px; background: url("/img/games/kitty-stand.webp") 0 0 / calc(var(--w) * 6) 100% no-repeat; image-rendering: pixelated; }
.arena-ui { position: relative; z-index: 1; display: grid; gap: 10px; padding-bottom: 22px; }
.arena-ui p { margin: 0; font: 600 .82rem/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.moves { display: flex; flex-wrap: wrap; gap: 8px; }
.move { cursor: pointer; padding: 11px 16px; border-radius: 14px; border: 3px solid var(--inkf); background: var(--ember); color: var(--inkf); box-shadow: 3px 3px 0 var(--inkf); font: 400 1.05rem/1 var(--display); letter-spacing: .02em; }
.move:nth-child(2) { background: var(--sun); } .move:nth-child(3) { background: var(--sky); }
.move:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--inkf); }
@media (max-width: 920px) { .kk-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .arena { grid-template-columns: 1fr; justify-items: center; } .arena-ui { justify-items: center; text-align: center; padding-bottom: 18px; } }

/* ---------- Karhutla (calm: the tribute lives here) ---------- */
.feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: var(--radius); overflow: hidden; scroll-margin-top: 90px; color: #e9e0d6;
  border: 3px solid var(--inkf); background: linear-gradient(180deg, #1d120d, #120c0b 60%); box-shadow: 6px 6px 0 var(--inkf); }
.feature a { color: #fff8ef; }
.feature-side { display: flex; flex-direction: column; gap: 26px; padding: clamp(22px, 3.4vw, 44px) 0 clamp(22px, 3.4vw, 44px) clamp(22px, 3.4vw, 44px); }
.feature-art { position: relative; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: #000; }
.feature-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-reel { width: min(100%, 300px); margin-inline: auto; }
.feature .screen { border-color: rgba(255, 255, 255, .2); box-shadow: none; }
.feature .play span { background: #ff8a1f; }
.feature .reel figcaption b { color: #fff8ef; }
.feature .reel figcaption span { color: #b9aea4; }
.feature-body { padding: clamp(22px, 3.4vw, 44px); }
.feature .tag { color: #b9aea4; font-family: var(--body); font-weight: 600; letter-spacing: .06em; }
.feature h3 { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; font: 400 clamp(1.9rem, 3.4vw, 2.7rem)/1.02 var(--display); color: #fff8ef; }
.feature h3 img { width: 42px; height: 42px; border-radius: 10px; }
.feature .genre { margin: 8px 0 0; font: 600 .86rem/1.4 var(--body); color: #ff8a1f; }
.feature p { margin: 14px 0 0; color: #ddd3c9; }
.said { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.said li { padding-left: 14px; border-left: 3px solid #ff5964; color: #b9aea4; font-size: .95rem; }
.said q { display: block; color: #fff8ef; font: 600 1.08rem/1.35 var(--body); font-style: italic; }
.tribute { margin-top: 22px; padding: 18px 20px 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .2); background: #070405; }
.tribute .t-kick { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 .78rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #b9aea4; }
.tribute p { font-size: .97rem; }
.tribute .names { margin-top: 10px; font: italic 600 1.18rem/1.55 var(--body); color: #fff8ef; }
.feature .pill { background: #fff8ef; box-shadow: none; border-color: #fff8ef; }
.feature .pill--go { background: #ff8a1f; border-color: #ff8a1f; color: #140d0c; }
.feature .pill:hover { transform: none; box-shadow: none; }
.sources { font-size: .8rem; color: #8f847b !important; }
.sources a { color: #b9aea4; }
@media (max-width: 900px) {
  .feature { display: flex; flex-direction: column; }
  .feature-side { display: contents; }
  .feature-art { order: 1; border-radius: 0; }
  .feature-body { order: 2; }
  .feature-reel { order: 3; margin-bottom: 28px; }
}

/* ---------- The shelf ---------- */
.shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(40px, 5vw, 60px); }
.game { --c: var(--sun); display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: #fff; border: 3px solid var(--inkf); box-shadow: 5px 5px 0 var(--inkf); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.game:hover { transform: translate(-3px, -3px) rotate(-.6deg); box-shadow: 9px 9px 0 var(--inkf); }
.game:nth-child(even):hover { transform: translate(-3px, -3px) rotate(.6deg); }
.game-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c); border-bottom: 3px solid var(--inkf); }
.game-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.game:hover .game-art img { transform: scale(1.05); }
.game-art .px { image-rendering: pixelated; }
.game-art--p62 { display: grid; place-items: center; background: linear-gradient(180deg, #8fd0ff, #fff1d2); }
.game-art--p62 img { width: 82%; height: auto; object-fit: contain; }
.game-art .chip { position: absolute; left: 12px; top: 12px; box-shadow: 2px 2px 0 var(--inkf); }
.game-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, #fff), #fff 60%); }
.game h3 { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 1.7rem/1.05 var(--display); color: var(--inkf); letter-spacing: .01em; }
.game h3 img { width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--inkf); object-fit: contain; background: #fff; }
.game .genre { margin: 8px 0 0; font: 600 .84rem/1.35 var(--body); color: var(--muted); }
.game .pitch { margin: 10px 0 0; color: var(--text); font-size: .98rem; }
.game .links { margin-top: auto; padding-top: 18px; }
.game--wide { grid-column: span 2; }
.game--wide .game-art { aspect-ratio: 32 / 11; }
@media (max-width: 980px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .shelf { grid-template-columns: 1fr; } .game--wide { grid-column: auto; } .game--wide .game-art { aspect-ratio: 16 / 10; } }
.fine { margin: 18px 0 0; font-size: .86rem; color: var(--muted); }

/* ---------- Screening room: a dark room in a bright house ---------- */
.cinema { background: var(--inkf); color: #efe8f7; border-block: 3px solid var(--inkf); }
.cinema .ftitle { color: #fff; }
.cinema .flede { color: #c9bfd6; }
.cinema .sticker { background: var(--bubble); }
.cinema .screen { border-color: #000; box-shadow: 5px 5px 0 #000; }
.cinema .reel figcaption b { color: #fff; }
.cinema .reel figcaption span { color: #a99fb8; }
.reels { display: grid; gap: 22px; margin-top: 48px; align-items: start; }
.reels--top { grid-template-columns: 1.4fr 1fr; }
.reels--tall { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; }
@media (max-width: 1000px) { .reels--tall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .reels--top { grid-template-columns: 1fr; } .reels--tall { grid-template-columns: 1fr 1fr; } }

/* ---------- Insert coin ---------- */
.coin { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 3vw, 36px); padding: clamp(26px, 4vw, 44px); border-radius: 28px;
  background: var(--sun); border: 3.5px solid var(--inkf); box-shadow: var(--pop-lg); overflow: hidden; }
.coin::before { content: ""; position: absolute; inset: auto 0 0; height: 16px; border-top: 3px solid var(--inkf); background: repeating-linear-gradient(-45deg, var(--inkf) 0 14px, var(--sun) 14px 28px); }
.coin-slot { display: grid; place-items: center; width: 88px; height: 120px; border-radius: 18px; background: var(--tomato); border: 3px solid var(--inkf); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18); }
.coin-slot i { width: 12px; height: 54px; border-radius: 6px; background: var(--inkf); box-shadow: 0 0 0 4px #ffd9b0; }
.coin h2 { margin: 0; font: 400 clamp(2.2rem, 5vw, 3.8rem)/.95 var(--display); color: var(--inkf); }
.coin p { margin: 8px 0 0; font-size: 1.08rem; color: var(--inkf); }
.coin .btn { background: var(--inkf); color: var(--sun); box-shadow: 4px 4px 0 var(--tomato); }
.coin .btn:hover { background: var(--inkf); color: var(--sun); box-shadow: 6px 6px 0 var(--tomato); }
@media (max-width: 760px) { .coin { grid-template-columns: 1fr; padding-bottom: 40px; } .coin-slot { display: none; } }

/* ---------- Play with us ---------- */
.playmail { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.playmail a.big { font: 400 clamp(2rem, 6.4vw, 4.2rem)/1 var(--display); color: var(--inkf); text-decoration: none; overflow-wrap: anywhere; }
.playmail a.big:hover { color: var(--tomato); }
.copy { cursor: pointer; padding: 10px 16px; border-radius: 999px; border: 2.5px solid var(--inkf); background: #fff; color: var(--inkf); box-shadow: 3px 3px 0 var(--inkf); font: 600 .9rem/1 var(--body); }
.copy:hover { background: var(--sun); }
.why { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; padding: 0; }
.why li { padding: 10px 16px; border-radius: 14px; border: 2.5px solid var(--inkf); background: #fff; font-weight: 600; color: var(--inkf); }
.why li:nth-child(1) { background: var(--mint); transform: rotate(-1.5deg); } .why li:nth-child(2) { background: var(--sky); transform: rotate(1deg); }
.why li:nth-child(3) { background: var(--bubble); transform: rotate(-1deg); } .why li:nth-child(4) { background: var(--sun); transform: rotate(1.5deg); }
.workside { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding: 20px 24px; border-radius: 22px; background: #050304; color: #f4ede4; text-decoration: none; border: 3px solid var(--inkf); box-shadow: var(--pop); }
.fun a.workside { color: #f4ede4; }
.workside:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--inkf); }
.workside b { display: block; font: 700 1.2rem/1.2 "Quattro", var(--body); }
.workside span span { font: 400 .92rem/1.4 "Quattro", var(--body); color: #a2948c; }
.workside .go { padding: 11px 16px; border-radius: 999px; background: #d7263d; color: #fff; font: 700 .84rem/1 "Mono", monospace; white-space: nowrap; }

/* ---------- Footer, retinted ---------- */
.fun .footer { border-top: 3px solid var(--inkf); background: var(--paper); color: var(--muted); }
.fun .footer h3 { font: 600 .82rem/1 var(--body); letter-spacing: .1em; color: var(--tomato); }
.fun .footer nav a { color: var(--text); }
.fun .footer nav a:hover { color: var(--tomato); }
.fun .term-open { color: var(--ok); font-family: var(--body); font-weight: 600; }
.fun .disclaimer { border-top: 2px dashed var(--line); }
.fun .copyright { font-family: var(--body); }

/* ---------- Konami: party mode ---------- */
.party .floaters img, .party .scores li { animation: spin .8s linear infinite !important; }
@keyframes spin { to { rotate: 360deg; } }