From 11606eeea707a4a182b64ae5d238b5ada598df42 Mon Sep 17 00:00:00 2001
From: Daria Grudzien <hello@dariagrudzien.com>
Date: Tue, 23 Jun 2026 14:06:24 -0700
Subject: [PATCH 1/7] draft of bingo card

---
 src/components/island/BingoCard.svelte | 399 +++++++++++++++++++++++++
 src/components/sections/bingo.astro    |  41 +++
 src/layouts/Layout.astro               |   5 +-
 src/pages/bingo.astro                  |  54 ++++
 src/pages/index.astro                  |   2 +
 5 files changed, 499 insertions(+), 2 deletions(-)
 create mode 100644 src/components/island/BingoCard.svelte
 create mode 100644 src/components/sections/bingo.astro
 create mode 100644 src/pages/bingo.astro

diff --git a/src/components/island/BingoCard.svelte b/src/components/island/BingoCard.svelte
new file mode 100644
index 000000000..23766338b
--- /dev/null
+++ b/src/components/island/BingoCard.svelte
@@ -0,0 +1,399 @@
+<script>
+  const STORAGE_KEY = 'ep-bingo-checked';
+
+  const editions = [
+    { year: 2002, city: 'Charleroi' },
+    { year: 2003, city: 'Charleroi' },
+    { year: 2004, city: 'Gothenburg' },
+    { year: 2005, city: 'Gothenburg' },
+    { year: 2006, city: 'CERN, Geneva' },
+    { year: 2007, city: 'Vilnius' },
+    { year: 2008, city: 'Vilnius' },
+    { year: 2009, city: 'Birmingham' },
+    { year: 2010, city: 'Birmingham' },
+    { year: 2011, city: 'Florence' },
+    { year: 2012, city: 'Florence' },
+    { year: 2013, city: 'Florence' },
+    { year: 2014, city: 'Berlin' },
+    { year: 2015, city: 'Bilbao' },
+    { year: 2016, city: 'Bilbao' },
+    { year: 2017, city: 'Rimini' },
+    { year: 2018, city: 'Edinburgh' },
+    { year: 2019, city: 'Basel' },
+    { year: 2020, city: 'Online' },
+    { year: 2021, city: 'Online' },
+    { year: 2022, city: 'Dublin' },
+    { year: 2023, city: 'Prague' },
+    { year: 2024, city: 'Prague' },
+    { year: 2025, city: 'Prague' },
+    { year: 2026, city: 'Kraków' },
+  ];
+
+  function loadChecked() {
+    if (typeof localStorage === 'undefined') return new Array(25).fill(false);
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) return JSON.parse(saved);
+    } catch {}
+    return new Array(25).fill(false);
+  }
+
+  let checked = $state(loadChecked());
+  let checkedCount = $derived(checked.filter(Boolean).length);
+
+  function toggle(i) {
+    checked[i] = !checked[i];
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify([...checked]));
+    } catch {}
+  }
+
+  function buildShareText() {
+    const attended = editions.filter((_, i) => checked[i]).map(e => `${e.year} ${e.city}`);
+    const count = attended.length;
+    const base = `I've attended ${count} EuroPython conference${count !== 1 ? 's' : ''}! 🐍`;
+    return count > 0 ? `${base}\n${attended.join(' · ')}` : base;
+  }
+
+  const PAGE_URL = 'https://ep2026.europython.eu/#bingo';
+  const BINGO_PAGE_URL = 'https://ep2026.europython.eu/bingo';
+
+  function shareLinkedIn() {
+    window.open(
+      `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(BINGO_PAGE_URL)}`,
+      '_blank', 'noopener,noreferrer'
+    );
+  }
+
+  function shareX() {
+    const text = buildShareText() + '\n#EuroPython #Python';
+    window.open(
+      `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(PAGE_URL)}`,
+      '_blank', 'noopener,noreferrer'
+    );
+  }
+
+  function shareBlueSky() {
+    const text = `${buildShareText()}\n#EuroPython #Python\n${PAGE_URL}`;
+    window.open(
+      `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`,
+      '_blank', 'noopener,noreferrer'
+    );
+  }
+
+  function shareMastodon() {
+    const text = `${buildShareText()}\n#EuroPython #Python\n${PAGE_URL}`;
+    window.open(
+      `https://shareopenly.org/share/?url=${encodeURIComponent(PAGE_URL)}&text=${encodeURIComponent(text)}`,
+      '_blank', 'noopener,noreferrer'
+    );
+  }
+
+  function downloadImage() {
+    const COLS = 5;
+    const CELL = 130;
+    const PAD = 28;
+    const HEADER_H = 100;
+    const W = COLS * CELL + PAD * 2;
+    const H = COLS * CELL + PAD * 2 + HEADER_H;
+
+    const canvas = document.createElement('canvas');
+    canvas.width = W;
+    canvas.height = H;
+    const ctx = canvas.getContext('2d');
+
+    /* background */
+    ctx.fillStyle = '#0b1121';
+    ctx.fillRect(0, 0, W, H);
+
+    /* title */
+    ctx.fillStyle = '#f0c040';
+    ctx.font = 'bold 30px system-ui, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('EuroPython Bingo', W / 2, PAD + 34);
+
+    ctx.fillStyle = 'rgba(255,255,255,0.4)';
+    ctx.font = '13px system-ui, sans-serif';
+    ctx.fillText(
+      `${checkedCount} of 25 editions attended · ep2026.europython.eu/#bingo`,
+      W / 2, PAD + 60
+    );
+
+    editions.forEach((ed, i) => {
+      const col = i % COLS;
+      const row = Math.floor(i / COLS);
+      const x = PAD + col * CELL;
+      const y = HEADER_H + PAD + row * CELL;
+      const isChecked = checked[i];
+      const isCurrent = ed.year === 2026;
+
+      /* cell bg */
+      ctx.fillStyle = isChecked ? '#f0c040' : isCurrent ? '#111d36' : '#0d1520';
+      roundRect(ctx, x + 3, y + 3, CELL - 6, CELL - 6, 2);
+      ctx.fill();
+
+      /* cell border — dashed approximation via dotted segments */
+      ctx.strokeStyle = isChecked ? '#d4a830' : isCurrent ? '#2a4a80' : 'rgba(255,255,255,0.12)';
+      ctx.lineWidth = 1;
+      ctx.setLineDash([4, 4]);
+      roundRect(ctx, x + 3, y + 3, CELL - 6, CELL - 6, 2);
+      ctx.stroke();
+      ctx.setLineDash([]);
+
+      /* year */
+      ctx.fillStyle = isChecked ? '#0b1121' : '#ffffff';
+      ctx.font = `bold 21px system-ui, sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.fillText(ed.year.toString(), x + CELL / 2, y + CELL * 0.46);
+
+      /* city */
+      ctx.fillStyle = isChecked ? 'rgba(11,17,33,0.65)' : 'rgba(255,255,255,0.55)';
+      ctx.font = `12px system-ui, sans-serif`;
+      ctx.fillText(ed.city, x + CELL / 2, y + CELL * 0.68);
+    });
+
+    const link = document.createElement('a');
+    link.download = 'europython-bingo.png';
+    link.href = canvas.toDataURL('image/png');
+    link.click();
+  }
+
+  function roundRect(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    ctx.lineTo(x + r, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
+  }
+</script>
+
+<div class="bingo-wrapper">
+  <p class="bingo-tally">
+    {checkedCount === 0
+      ? "Click each edition you’ve attended"
+      : checkedCount === 25
+        ? '🎉 You attended all 25 editions!'
+        : `${checkedCount} of 25 attended`}
+  </p>
+
+  <div class="bingo-grid" role="grid" aria-label="EuroPython Bingo card — tick each edition you attended">
+    {#each editions as edition, i}
+      <button
+        class="bingo-cell"
+        class:checked={checked[i]}
+        class:current={edition.year === 2026}
+        onclick={() => toggle(i)}
+        aria-pressed={checked[i]}
+        aria-label={`${edition.year} ${edition.city}${checked[i] ? ' — attended' : ''}`}
+        role="gridcell"
+      >
+        <span class="cell-year">{edition.year}</span>
+        <span class="cell-city">{edition.city}</span>
+        {#if edition.year === 2026}
+          <span class="cell-now">Now!</span>
+        {/if}
+      </button>
+    {/each}
+  </div>
+
+  <div class="share-wrap">
+    <p class="share-heading">Share your card</p>
+    <div class="share-row">
+      <button class="share-btn" onclick={shareLinkedIn} aria-label="Share on LinkedIn">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+      </button>
+      <button class="share-btn" onclick={shareX} aria-label="Share on X">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+      </button>
+      <button class="share-btn" onclick={shareBlueSky} aria-label="Share on BlueSky">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.204-.659-.3-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z"/></svg>
+      </button>
+      <button class="share-btn" onclick={shareMastodon} aria-label="Share on Mastodon">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
+      </button>
+      <button class="share-btn share-btn--ig" onclick={downloadImage} aria-label="Save image for Instagram">
+        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .bingo-wrapper {
+    width: 100%;
+  }
+
+  /* ── tally ── */
+  .bingo-tally {
+    text-align: center;
+    font-size: 1rem;
+    color: var(--color-text-muted);
+    margin: 0 0 1.5rem;
+    min-height: 1.5em;
+  }
+
+  /* ── grid ── */
+  .bingo-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 8px;
+    max-width: 780px;
+    margin: 0 auto 2.5rem;
+  }
+
+  /* ── cell ── */
+  .bingo-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    border: 1px dashed var(--color-border);
+    border-radius: 2px;
+    background: var(--color-surface-faint);
+    cursor: pointer;
+    transition: border-color 0.15s, background 0.15s, transform 0.15s;
+    padding: 8px 6px;
+    gap: 3px;
+    text-align: center;
+    font-family: inherit;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .bingo-cell:hover {
+    border-color: var(--color-accent);
+    background: var(--color-surface-subtle);
+    transform: translateY(-3px);
+    z-index: 1;
+  }
+
+  .bingo-cell:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  /* current year — slightly highlighted border */
+  .bingo-cell.current {
+    border-color: var(--color-border-bright);
+  }
+
+  /* checked state */
+  .bingo-cell.checked {
+    background: var(--color-accent);
+    border-style: solid;
+    border-color: var(--color-accent-hover);
+  }
+
+  .bingo-cell.checked:hover {
+    border-color: var(--color-accent-hover);
+    background: var(--color-accent-hover);
+    transform: translateY(-3px);
+  }
+
+  /* ── cell text ── */
+  .cell-year {
+    font-size: clamp(1rem, 2.5vw, 1.35rem);
+    font-weight: 800;
+    letter-spacing: -0.02em;
+    color: var(--color-text-primary);
+    line-height: 1;
+  }
+
+  .bingo-cell.checked .cell-year {
+    color: var(--color-on-accent);
+  }
+
+  .cell-city {
+    font-size: clamp(0.6rem, 1.4vw, 0.75rem);
+    color: var(--color-text-faint);
+    line-height: 1.1;
+  }
+
+  .bingo-cell.checked .cell-city {
+    color: var(--color-on-accent);
+    opacity: 0.7;
+  }
+
+.cell-now {
+    font-size: clamp(0.45rem, 1vw, 0.6rem);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-accent);
+    line-height: 1;
+    margin-top: 1px;
+  }
+
+  .bingo-cell.checked .cell-now {
+    color: var(--color-on-accent);
+    opacity: 0.6;
+  }
+
+  /* ── share ── */
+  .share-wrap {
+    text-align: center;
+  }
+
+  .share-heading {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--color-text-faint);
+    margin: 0 0 0.875rem;
+  }
+
+  .share-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: center;
+  }
+
+  .share-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 1px dashed var(--color-border-strong);
+    border-radius: 2px;
+    background: transparent;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    transition: border-color 0.15s, color 0.15s, background 0.15s;
+  }
+
+  .share-btn svg {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+  }
+
+  .share-btn:hover {
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+    background: var(--color-surface-subtle);
+  }
+
+  .share-btn--ig:hover {
+    border-color: oklch(0.6 0.23 10);
+    color: oklch(0.6 0.23 10);
+  }
+
+  /* ── responsive ── */
+  @media (max-width: 540px) {
+    .bingo-grid { gap: 5px; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .bingo-cell { transition: border-color 0.15s, background 0.15s; }
+    .bingo-cell:hover { transform: none; }
+  }
+</style>
diff --git a/src/components/sections/bingo.astro b/src/components/sections/bingo.astro
new file mode 100644
index 000000000..e7afcbaa1
--- /dev/null
+++ b/src/components/sections/bingo.astro
@@ -0,0 +1,41 @@
+---
+import Section2 from "@ui/Section2.astro";
+import Display from "@ui/Display.astro";
+import BingoCard from "@components/island/BingoCard.svelte";
+---
+
+<Section2 variant="bg-dark" id="bingo" className="bingo-section">
+  <div class="bingo-header">
+    <Display
+      id="bingo"
+      span="25 EDITIONS · 13 CITIES"
+      spanColor="var(--color-accent)"
+      subtitle="Check off every EuroPython you've been to, then share your card."
+    >
+      Have you<br />been there?
+    </Display>
+  </div>
+
+  <BingoCard client:load />
+</Section2>
+
+<style>
+  :global(.bingo-section) {
+    background: var(--color-bg-dark);
+    scroll-margin-top: 60px;
+  }
+
+  .bingo-header {
+    text-align: center;
+    margin-bottom: 2.5rem;
+  }
+
+  :global(.bingo-section .display-header) {
+    text-align: center;
+  }
+
+  :global(.bingo-section .display-subtitle) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index bf9196832..60ed1dd01 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -30,13 +30,14 @@ import "@styles/light-theme.css";
 export interface Props {
   title: string;
   description: string;
+  image?: string;
   hideHeader?: boolean;
   hideFooter?: boolean;
 }
 
 const currentPath = Astro.url.pathname;
 
-const { title, description } = Astro.props;
+const { title, description, image } = Astro.props;
 
 if (!title || !description) {
 throw new Error(`${Astro.url.pathname} Both 'title' and 'description' must be set.`);
@@ -51,7 +52,7 @@ const hideFooter = Astro.props.hideFooter ?? false;
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <BaseHead title={title} description={description} />
+    <BaseHead title={title} description={description} image={image} />
     <slot name="head" />
 
     </Fragment>
diff --git a/src/pages/bingo.astro b/src/pages/bingo.astro
new file mode 100644
index 000000000..350469ea7
--- /dev/null
+++ b/src/pages/bingo.astro
@@ -0,0 +1,54 @@
+---
+import Layout from "@layouts/Layout.astro";
+import Section2 from "@ui/Section2.astro";
+import BingoCard from "@components/island/BingoCard.svelte";
+---
+
+<Layout
+  title="EuroPython Bingo | How many have you attended?"
+  description="25 editions, 13 cities, one community. Check off every EuroPython conference you've been to and share your card!"
+  image="/social-card-bingo.png"
+>
+  <Section2 variant="dark" id="bingo">
+    <div class="bingo-page">
+      <div class="bingo-header">
+        <h1 class="bingo-title">EuroPython<br />Bingo</h1>
+        <p class="bingo-lead">
+          25 editions. 13 cities. One community.<br />
+          How many have you attended?
+        </p>
+      </div>
+
+      <BingoCard client:load />
+    </div>
+  </Section2>
+</Layout>
+
+<style>
+  .bingo-page {
+    padding: 3rem 0 4rem;
+  }
+
+  .bingo-header {
+    text-align: center;
+    margin-bottom: 2.5rem;
+  }
+
+  .bingo-title {
+    font-size: clamp(3rem, 8vw, 6rem);
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: -0.03em;
+    color: var(--color-accent);
+    margin: 0 0 1.25rem;
+    line-height: 0.95;
+  }
+
+  .bingo-lead {
+    font-size: 1.15rem;
+    color: var(--color-text-secondary);
+    max-width: 440px;
+    margin: 0 auto;
+    line-height: 1.6;
+  }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7b338812f..2d0f76a65 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -15,6 +15,7 @@ import EuroSciPy from "@sections/euroscipy.astro";
 import CommunityPartners from "@sections/community-partners.astro";
 import MediaPartners from "@sections/media-partners.astro";
 import Connect from "@sections/connect.astro";
+import Bingo from "@sections/bingo.astro";
 ---
 
 <Layout
@@ -28,6 +29,7 @@ import Connect from "@sections/connect.astro";
   <Programme />
   <Krakow />
   <IceVenue />
+  <Bingo />
   <Testimonials />
   <Speakers />
   <!-- <City /> -->

From 58c56fa85fa5954027238592a65688a75684f916 Mon Sep 17 00:00:00 2001
From: Daria Grudzien <hello@dariagrudzien.com>
Date: Tue, 23 Jun 2026 14:29:21 -0700
Subject: [PATCH 2/7] fix linkedin sharing

---
 src/components/island/BingoCard.svelte | 34 ++++++++++++++++----------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/island/BingoCard.svelte b/src/components/island/BingoCard.svelte
index 23766338b..fd75ad743 100644
--- a/src/components/island/BingoCard.svelte
+++ b/src/components/island/BingoCard.svelte
@@ -59,14 +59,15 @@
   const BINGO_PAGE_URL = 'https://ep2026.europython.eu/bingo';
 
   function shareLinkedIn() {
+    const text = buildShareText() + '\n\n' + BINGO_PAGE_URL;
     window.open(
-      `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(BINGO_PAGE_URL)}`,
+      `https://www.linkedin.com/feed/?shareActive=true&text=${encodeURIComponent(text)}`,
       '_blank', 'noopener,noreferrer'
     );
   }
 
   function shareX() {
-    const text = buildShareText() + '\n#EuroPython #Python';
+    const text = buildShareText();
     window.open(
       `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(PAGE_URL)}`,
       '_blank', 'noopener,noreferrer'
@@ -74,7 +75,7 @@
   }
 
   function shareBlueSky() {
-    const text = `${buildShareText()}\n#EuroPython #Python\n${PAGE_URL}`;
+    const text = `${buildShareText()}\n\n${PAGE_URL}`;
     window.open(
       `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`,
       '_blank', 'noopener,noreferrer'
@@ -82,7 +83,7 @@
   }
 
   function shareMastodon() {
-    const text = `${buildShareText()}\n#EuroPython #Python\n${PAGE_URL}`;
+    const text = `${buildShareText()}\n\n${PAGE_URL}`;
     window.open(
       `https://shareopenly.org/share/?url=${encodeURIComponent(PAGE_URL)}&text=${encodeURIComponent(text)}`,
       '_blank', 'noopener,noreferrer'
@@ -102,11 +103,9 @@
     canvas.height = H;
     const ctx = canvas.getContext('2d');
 
-    /* background */
     ctx.fillStyle = '#0b1121';
     ctx.fillRect(0, 0, W, H);
 
-    /* title */
     ctx.fillStyle = '#f0c040';
     ctx.font = 'bold 30px system-ui, sans-serif';
     ctx.textAlign = 'center';
@@ -127,12 +126,10 @@
       const isChecked = checked[i];
       const isCurrent = ed.year === 2026;
 
-      /* cell bg */
       ctx.fillStyle = isChecked ? '#f0c040' : isCurrent ? '#111d36' : '#0d1520';
       roundRect(ctx, x + 3, y + 3, CELL - 6, CELL - 6, 2);
       ctx.fill();
 
-      /* cell border — dashed approximation via dotted segments */
       ctx.strokeStyle = isChecked ? '#d4a830' : isCurrent ? '#2a4a80' : 'rgba(255,255,255,0.12)';
       ctx.lineWidth = 1;
       ctx.setLineDash([4, 4]);
@@ -140,13 +137,11 @@
       ctx.stroke();
       ctx.setLineDash([]);
 
-      /* year */
       ctx.fillStyle = isChecked ? '#0b1121' : '#ffffff';
       ctx.font = `bold 21px system-ui, sans-serif`;
       ctx.textAlign = 'center';
       ctx.fillText(ed.year.toString(), x + CELL / 2, y + CELL * 0.46);
 
-      /* city */
       ctx.fillStyle = isChecked ? 'rgba(11,17,33,0.65)' : 'rgba(255,255,255,0.55)';
       ctx.font = `12px system-ui, sans-serif`;
       ctx.fillText(ed.city, x + CELL / 2, y + CELL * 0.68);
@@ -176,7 +171,7 @@
 <div class="bingo-wrapper">
   <p class="bingo-tally">
     {checkedCount === 0
-      ? "Click each edition you’ve attended"
+      ? "Click each edition you've attended"
       : checkedCount === 25
         ? '🎉 You attended all 25 editions!'
         : `${checkedCount} of 25 attended`}
@@ -217,9 +212,12 @@
       <button class="share-btn" onclick={shareMastodon} aria-label="Share on Mastodon">
         <svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
       </button>
-      <button class="share-btn share-btn--ig" onclick={downloadImage} aria-label="Save image for Instagram">
+      <button class="share-btn share-btn--ig" onclick={downloadImage} aria-label="Share on Instagram">
         <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
       </button>
+      <button class="share-btn share-btn--save" onclick={downloadImage} aria-label="Save image">
+        Save image
+      </button>
     </div>
   </div>
 </div>
@@ -320,7 +318,7 @@
     opacity: 0.7;
   }
 
-.cell-now {
+  .cell-now {
     font-size: clamp(0.45rem, 1vw, 0.6rem);
     font-weight: 700;
     text-transform: uppercase;
@@ -354,6 +352,7 @@
     flex-wrap: wrap;
     gap: 0.5rem;
     justify-content: center;
+    align-items: center;
   }
 
   .share-btn {
@@ -387,6 +386,15 @@
     color: oklch(0.6 0.23 10);
   }
 
+  .share-btn--save {
+    width: auto;
+    padding: 0 0.875rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    font-family: inherit;
+    letter-spacing: 0.02em;
+  }
+
   /* ── responsive ── */
   @media (max-width: 540px) {
     .bingo-grid { gap: 5px; }

From 088291ee1887aeac0f15a95edc75b555b5665632 Mon Sep 17 00:00:00 2001
From: Daria Grudzien <hello@dariagrudzien.com>
Date: Thu, 25 Jun 2026 15:35:17 -0700
Subject: [PATCH 3/7] wip

---
 public/media/bingo/basel-2.svg         |  21 ++++
 public/media/bingo/basel.svg           |  21 ++++
 public/media/bingo/berlin-2.svg        |  19 ++++
 public/media/bingo/berlin.svg          |  19 ++++
 public/media/bingo/bilbao-2.svg        |  13 +++
 public/media/bingo/bilbao.svg          |  13 +++
 public/media/bingo/birmingham-2.svg    |  15 +++
 public/media/bingo/birmingham.svg      |  15 +++
 public/media/bingo/charleroi-2.svg     |  19 ++++
 public/media/bingo/charleroi.svg       |  19 ++++
 public/media/bingo/dublin-2.svg        |  20 ++++
 public/media/bingo/dublin.svg          |  20 ++++
 public/media/bingo/edinburgh.svg       |  24 +++++
 public/media/bingo/florence-2.svg      |  23 +++++
 public/media/bingo/florence-3.svg      |  23 +++++
 public/media/bingo/florence.svg        |  23 +++++
 public/media/bingo/geneva-2.svg        |  21 ++++
 public/media/bingo/geneva.svg          |  21 ++++
 public/media/bingo/gothenburg-2.svg    |  17 ++++
 public/media/bingo/gothenburg.svg      |  17 ++++
 public/media/bingo/krakow-2.svg        |  21 ++++
 public/media/bingo/krakow.svg          |  21 ++++
 public/media/bingo/online.svg          |  12 +++
 public/media/bingo/prague-2.svg        |  22 +++++
 public/media/bingo/prague-3.svg        |  22 +++++
 public/media/bingo/prague.svg          |  22 +++++
 public/media/bingo/rimini-2.svg        |  16 +++
 public/media/bingo/rimini.svg          |  16 +++
 public/media/bingo/vilnius-2.svg       |  19 ++++
 public/media/bingo/vilnius.svg         |  19 ++++
 src/components/island/BingoCard.svelte | 129 +++++++++++++++++--------
 31 files changed, 661 insertions(+), 41 deletions(-)
 create mode 100644 public/media/bingo/basel-2.svg
 create mode 100644 public/media/bingo/basel.svg
 create mode 100644 public/media/bingo/berlin-2.svg
 create mode 100644 public/media/bingo/berlin.svg
 create mode 100644 public/media/bingo/bilbao-2.svg
 create mode 100644 public/media/bingo/bilbao.svg
 create mode 100644 public/media/bingo/birmingham-2.svg
 create mode 100644 public/media/bingo/birmingham.svg
 create mode 100644 public/media/bingo/charleroi-2.svg
 create mode 100644 public/media/bingo/charleroi.svg
 create mode 100644 public/media/bingo/dublin-2.svg
 create mode 100644 public/media/bingo/dublin.svg
 create mode 100644 public/media/bingo/edinburgh.svg
 create mode 100644 public/media/bingo/florence-2.svg
 create mode 100644 public/media/bingo/florence-3.svg
 create mode 100644 public/media/bingo/florence.svg
 create mode 100644 public/media/bingo/geneva-2.svg
 create mode 100644 public/media/bingo/geneva.svg
 create mode 100644 public/media/bingo/gothenburg-2.svg
 create mode 100644 public/media/bingo/gothenburg.svg
 create mode 100644 public/media/bingo/krakow-2.svg
 create mode 100644 public/media/bingo/krakow.svg
 create mode 100644 public/media/bingo/online.svg
 create mode 100644 public/media/bingo/prague-2.svg
 create mode 100644 public/media/bingo/prague-3.svg
 create mode 100644 public/media/bingo/prague.svg
 create mode 100644 public/media/bingo/rimini-2.svg
 create mode 100644 public/media/bingo/rimini.svg
 create mode 100644 public/media/bingo/vilnius-2.svg
 create mode 100644 public/media/bingo/vilnius.svg

diff --git a/public/media/bingo/basel-2.svg b/public/media/bingo/basel-2.svg
new file mode 100644
index 000000000..226608124
--- /dev/null
+++ b/public/media/bingo/basel-2.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <rect x="42" y="58" width="36" height="46" fill="#ffffff"></rect>
+        <polygon points="42,58 60,40 78,58" fill="#ffffff"></polygon>
+        <line x1="48" y1="54" x2="56" y2="44" stroke="#FB471F" stroke-width="1.6"></line>
+        <line x1="56" y1="56" x2="66" y2="44" stroke="#FB471F" stroke-width="1.6"></line>
+        <line x1="64" y1="56" x2="72" y2="48" stroke="#FB471F" stroke-width="1.6"></line>
+        <path d="M54,104 V90 a6 6 0 0 1 12 0 V104 Z" fill="#FB471F"></path>
+        <circle cx="60" cy="72" r="6" fill="#FB471F"></circle>
+        <circle cx="60" cy="72" r="2" fill="#ffffff"></circle>
+        <rect x="31" y="44" width="14" height="60" fill="#ffffff"></rect>
+        <polygon points="31,44 38,16 45,44" fill="#ffffff"></polygon>
+        <rect x="37" y="9" width="2" height="9" fill="#ffffff"></rect>
+        <rect x="75" y="42" width="14" height="62" fill="#ffffff"></rect>
+        <polygon points="75,42 82,12 89,42" fill="#ffffff"></polygon>
+        <rect x="81" y="5" width="2" height="9" fill="#ffffff"></rect>
+        <path d="M35,60 V52 a3 3 0 0 1 6 0 V60 Z" fill="#FB471F"></path>
+        <path d="M79,58 V50 a3 3 0 0 1 6 0 V58 Z" fill="#FB471F"></path>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/basel.svg b/public/media/bingo/basel.svg
new file mode 100644
index 000000000..553fc0e30
--- /dev/null
+++ b/public/media/bingo/basel.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <rect x="42" y="58" width="36" height="46" fill="#ffffff"></rect>
+        <polygon points="42,58 60,40 78,58" fill="#ffffff"></polygon>
+        <line x1="48" y1="54" x2="56" y2="44" stroke="#1003A3" stroke-width="1.6"></line>
+        <line x1="56" y1="56" x2="66" y2="44" stroke="#1003A3" stroke-width="1.6"></line>
+        <line x1="64" y1="56" x2="72" y2="48" stroke="#1003A3" stroke-width="1.6"></line>
+        <path d="M54,104 V90 a6 6 0 0 1 12 0 V104 Z" fill="#1003A3"></path>
+        <circle cx="60" cy="72" r="6" fill="#1003A3"></circle>
+        <circle cx="60" cy="72" r="2" fill="#ffffff"></circle>
+        <rect x="31" y="44" width="14" height="60" fill="#ffffff"></rect>
+        <polygon points="31,44 38,16 45,44" fill="#ffffff"></polygon>
+        <rect x="37" y="9" width="2" height="9" fill="#ffffff"></rect>
+        <rect x="75" y="42" width="14" height="62" fill="#ffffff"></rect>
+        <polygon points="75,42 82,12 89,42" fill="#ffffff"></polygon>
+        <rect x="81" y="5" width="2" height="9" fill="#ffffff"></rect>
+        <path d="M35,60 V52 a3 3 0 0 1 6 0 V60 Z" fill="#1003A3"></path>
+        <path d="M79,58 V50 a3 3 0 0 1 6 0 V58 Z" fill="#1003A3"></path>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/berlin-2.svg b/public/media/bingo/berlin-2.svg
new file mode 100644
index 000000000..19430054d
--- /dev/null
+++ b/public/media/bingo/berlin-2.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <rect x="26" y="98" width="68" height="6" fill="#ffffff"></rect>
+        <rect x="28" y="56" width="64" height="42" fill="#ffffff"></rect>
+        <rect x="35" y="62" width="6" height="36" fill="#FB471F"></rect>
+        <rect x="47" y="62" width="6" height="36" fill="#FB471F"></rect>
+        <path d="M57,98 V70 a6.5 6.5 0 0 1 13 0 V98 Z" fill="#FB471F"></path>
+        <rect x="74" y="62" width="6" height="36" fill="#FB471F"></rect>
+        <rect x="86" y="62" width="6" height="36" fill="#FB471F"></rect>
+        <rect x="24" y="48" width="72" height="9" fill="#ffffff"></rect>
+        <rect x="48" y="42" width="24" height="6" fill="#ffffff"></rect>
+        <path d="M44,42 C44,30 52,28 58,30 C62,27 70,29 73,38 L73,42 Z" fill="#ffffff"></path>
+        <polygon points="44,40 37,44 43,33" fill="#ffffff"></polygon>
+        <polygon points="50,38 44,42 49,32" fill="#ffffff"></polygon>
+        <rect x="68" y="22" width="2.4" height="20" fill="#ffffff"></rect>
+        <rect x="63" y="26" width="3" height="16" fill="#ffffff"></rect>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/berlin.svg b/public/media/bingo/berlin.svg
new file mode 100644
index 000000000..b062ad972
--- /dev/null
+++ b/public/media/bingo/berlin.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <rect x="26" y="98" width="68" height="6" fill="#ffffff"></rect>
+        <rect x="28" y="56" width="64" height="42" fill="#ffffff"></rect>
+        <rect x="35" y="62" width="6" height="36" fill="#1003A3"></rect>
+        <rect x="47" y="62" width="6" height="36" fill="#1003A3"></rect>
+        <path d="M57,98 V70 a6.5 6.5 0 0 1 13 0 V98 Z" fill="#1003A3"></path>
+        <rect x="74" y="62" width="6" height="36" fill="#1003A3"></rect>
+        <rect x="86" y="62" width="6" height="36" fill="#1003A3"></rect>
+        <rect x="24" y="48" width="72" height="9" fill="#ffffff"></rect>
+        <rect x="48" y="42" width="24" height="6" fill="#ffffff"></rect>
+        <path d="M44,42 C44,30 52,28 58,30 C62,27 70,29 73,38 L73,42 Z" fill="#ffffff"></path>
+        <polygon points="44,40 37,44 43,33" fill="#ffffff"></polygon>
+        <polygon points="50,38 44,42 49,32" fill="#ffffff"></polygon>
+        <rect x="68" y="22" width="2.4" height="20" fill="#ffffff"></rect>
+        <rect x="63" y="26" width="3" height="16" fill="#ffffff"></rect>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/bilbao-2.svg b/public/media/bingo/bilbao-2.svg
new file mode 100644
index 000000000..4d7e712aa
--- /dev/null
+++ b/public/media/bingo/bilbao-2.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <path d="M16,100 C16,84 30,80 46,82 C70,84 92,82 104,100 Z" fill="#ffffff"></path>
+        <path d="M30,100 C28,74 36,58 46,50 C52,64 50,84 52,100 Z" fill="#ffffff"></path>
+        <path d="M50,100 C48,56 58,34 68,24 C74,40 72,74 72,100 Z" fill="#ffffff"></path>
+        <path d="M70,100 C72,72 82,60 94,62 C98,76 94,90 100,100 Z" fill="#ffffff"></path>
+        <path d="M52,99 C50,60 58,38 67,27" fill="none" stroke="#FB471F" stroke-width="1.8"></path>
+        <path d="M51,99 C49,76 56,60 66,52" fill="none" stroke="#FB471F" stroke-width="1.8"></path>
+        <path d="M71,99 C73,74 82,63 93,63" fill="none" stroke="#FB471F" stroke-width="1.8"></path>
+        <rect x="16" y="100" width="88" height="4" fill="#ffffff"></rect>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/bilbao.svg b/public/media/bingo/bilbao.svg
new file mode 100644
index 000000000..dbdc1a734
--- /dev/null
+++ b/public/media/bingo/bilbao.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <path d="M16,100 C16,84 30,80 46,82 C70,84 92,82 104,100 Z" fill="#ffffff"></path>
+        <path d="M30,100 C28,74 36,58 46,50 C52,64 50,84 52,100 Z" fill="#ffffff"></path>
+        <path d="M50,100 C48,56 58,34 68,24 C74,40 72,74 72,100 Z" fill="#ffffff"></path>
+        <path d="M70,100 C72,72 82,60 94,62 C98,76 94,90 100,100 Z" fill="#ffffff"></path>
+        <path d="M52,99 C50,60 58,38 67,27" fill="none" stroke="#1003A3" stroke-width="1.8"></path>
+        <path d="M51,99 C49,76 56,60 66,52" fill="none" stroke="#1003A3" stroke-width="1.8"></path>
+        <path d="M71,99 C73,74 82,63 93,63" fill="none" stroke="#1003A3" stroke-width="1.8"></path>
+        <rect x="16" y="100" width="88" height="4" fill="#ffffff"></rect>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/birmingham-2.svg b/public/media/bingo/birmingham-2.svg
new file mode 100644
index 000000000..8cf64d760
--- /dev/null
+++ b/public/media/bingo/birmingham-2.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <rect x="40" y="96" width="40" height="8" fill="#ffffff"></rect>
+        <ellipse cx="60" cy="60" rx="42" ry="33" fill="#ffffff"></ellipse>
+        <ellipse cx="44" cy="42" rx="16" ry="12" fill="#ffffff"></ellipse>
+        <g fill="#FB471F">
+          <circle cx="52" cy="38" r="2.3"></circle><circle cx="62" cy="36" r="2.3"></circle><circle cx="72" cy="40" r="2.3"></circle>
+          <circle cx="40" cy="46" r="2.3"></circle><circle cx="50" cy="48" r="2.3"></circle><circle cx="60" cy="46" r="2.3"></circle><circle cx="70" cy="48" r="2.3"></circle><circle cx="80" cy="48" r="2.3"></circle>
+          <circle cx="34" cy="56" r="2.3"></circle><circle cx="44" cy="58" r="2.3"></circle><circle cx="54" cy="56" r="2.3"></circle><circle cx="64" cy="58" r="2.3"></circle><circle cx="74" cy="56" r="2.3"></circle><circle cx="84" cy="58" r="2.3"></circle>
+          <circle cx="38" cy="68" r="2.3"></circle><circle cx="48" cy="66" r="2.3"></circle><circle cx="58" cy="68" r="2.3"></circle><circle cx="68" cy="66" r="2.3"></circle><circle cx="78" cy="68" r="2.3"></circle>
+          <circle cx="46" cy="78" r="2.3"></circle><circle cx="56" cy="78" r="2.3"></circle><circle cx="66" cy="78" r="2.3"></circle><circle cx="76" cy="78" r="2.3"></circle>
+        </g>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/birmingham.svg b/public/media/bingo/birmingham.svg
new file mode 100644
index 000000000..adbff9edf
--- /dev/null
+++ b/public/media/bingo/birmingham.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <rect x="40" y="96" width="40" height="8" fill="#ffffff"></rect>
+        <ellipse cx="60" cy="60" rx="42" ry="33" fill="#ffffff"></ellipse>
+        <ellipse cx="44" cy="42" rx="16" ry="12" fill="#ffffff"></ellipse>
+        <g fill="#1003A3">
+          <circle cx="52" cy="38" r="2.3"></circle><circle cx="62" cy="36" r="2.3"></circle><circle cx="72" cy="40" r="2.3"></circle>
+          <circle cx="40" cy="46" r="2.3"></circle><circle cx="50" cy="48" r="2.3"></circle><circle cx="60" cy="46" r="2.3"></circle><circle cx="70" cy="48" r="2.3"></circle><circle cx="80" cy="48" r="2.3"></circle>
+          <circle cx="34" cy="56" r="2.3"></circle><circle cx="44" cy="58" r="2.3"></circle><circle cx="54" cy="56" r="2.3"></circle><circle cx="64" cy="58" r="2.3"></circle><circle cx="74" cy="56" r="2.3"></circle><circle cx="84" cy="58" r="2.3"></circle>
+          <circle cx="38" cy="68" r="2.3"></circle><circle cx="48" cy="66" r="2.3"></circle><circle cx="58" cy="68" r="2.3"></circle><circle cx="68" cy="66" r="2.3"></circle><circle cx="78" cy="68" r="2.3"></circle>
+          <circle cx="46" cy="78" r="2.3"></circle><circle cx="56" cy="78" r="2.3"></circle><circle cx="66" cy="78" r="2.3"></circle><circle cx="76" cy="78" r="2.3"></circle>
+        </g>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/charleroi-2.svg b/public/media/bingo/charleroi-2.svg
new file mode 100644
index 000000000..9ac634a07
--- /dev/null
+++ b/public/media/bingo/charleroi-2.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <rect x="40" y="104" width="40" height="6" fill="#ffffff"></rect>
+        <rect x="44" y="98" width="32" height="6" fill="#ffffff"></rect>
+        <polygon points="49,98 51,48 69,48 71,98" fill="#ffffff"></polygon>
+        <rect x="54" y="54" width="1.6" height="40" fill="#FB471F"></rect>
+        <rect x="64.4" y="54" width="1.6" height="40" fill="#FB471F"></rect>
+        <rect x="46" y="42" width="28" height="6" fill="#ffffff"></rect>
+        <circle cx="60" cy="36" r="5" fill="#ffffff"></circle>
+        <circle cx="60" cy="36" r="3.4" fill="#FB471F"></circle>
+        <rect x="59.3" y="33" width="1.2" height="4" fill="#ffffff"></rect>
+        <rect x="60" y="35.3" width="3" height="1.2" fill="#ffffff"></rect>
+        <rect x="51" y="30" width="18" height="6" fill="#ffffff"></rect>
+        <polygon points="51,30 60,12 69,30" fill="#ffffff"></polygon>
+        <rect x="58.8" y="4" width="2.4" height="9" fill="#ffffff"></rect>
+        <circle cx="60" cy="4" r="2.4" fill="#ffffff"></circle>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/charleroi.svg b/public/media/bingo/charleroi.svg
new file mode 100644
index 000000000..49708a315
--- /dev/null
+++ b/public/media/bingo/charleroi.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <rect x="40" y="104" width="40" height="6" fill="#ffffff"></rect>
+        <rect x="44" y="98" width="32" height="6" fill="#ffffff"></rect>
+        <polygon points="49,98 51,48 69,48 71,98" fill="#ffffff"></polygon>
+        <rect x="54" y="54" width="1.6" height="40" fill="#1003A3"></rect>
+        <rect x="64.4" y="54" width="1.6" height="40" fill="#1003A3"></rect>
+        <rect x="46" y="42" width="28" height="6" fill="#ffffff"></rect>
+        <circle cx="60" cy="36" r="5" fill="#ffffff"></circle>
+        <circle cx="60" cy="36" r="3.4" fill="#1003A3"></circle>
+        <rect x="59.3" y="33" width="1.2" height="4" fill="#ffffff"></rect>
+        <rect x="60" y="35.3" width="3" height="1.2" fill="#ffffff"></rect>
+        <rect x="51" y="30" width="18" height="6" fill="#ffffff"></rect>
+        <polygon points="51,30 60,12 69,30" fill="#ffffff"></polygon>
+        <rect x="58.8" y="4" width="2.4" height="9" fill="#ffffff"></rect>
+        <circle cx="60" cy="4" r="2.4" fill="#ffffff"></circle>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/dublin-2.svg b/public/media/bingo/dublin-2.svg
new file mode 100644
index 000000000..72259ef24
--- /dev/null
+++ b/public/media/bingo/dublin-2.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <rect x="38" y="98" width="44" height="6" fill="#ffffff"></rect>
+        <rect x="42" y="92" width="36" height="6" fill="#ffffff"></rect>
+        <rect x="44" y="64" width="6" height="28" fill="#ffffff"></rect>
+        <rect x="70" y="64" width="6" height="28" fill="#ffffff"></rect>
+        <path d="M52,92 V74 a8 8 0 0 1 16 0 V92 Z" fill="#FB471F"></path>
+        <rect x="40" y="58" width="40" height="6" fill="#ffffff"></rect>
+        <circle cx="45" cy="55" r="2.4" fill="#ffffff"></circle>
+        <circle cx="75" cy="55" r="2.4" fill="#ffffff"></circle>
+        <path d="M47,58 Q47,46 60,46 Q73,46 73,58 Z" fill="#ffffff"></path>
+        <rect x="52" y="34" width="16" height="12" fill="#ffffff"></rect>
+        <path d="M55,46 V40 a4 4 0 0 1 10 0 V46 Z" fill="#FB471F"></path>
+        <path d="M52,34 Q52,24 60,24 Q68,24 68,34 Z" fill="#ffffff"></path>
+        <rect x="56" y="16" width="8" height="8" fill="#ffffff"></rect>
+        <rect x="59" y="8" width="2" height="9" fill="#ffffff"></rect>
+        <circle cx="60" cy="8" r="2" fill="#ffffff"></circle>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/dublin.svg b/public/media/bingo/dublin.svg
new file mode 100644
index 000000000..0cb4a403f
--- /dev/null
+++ b/public/media/bingo/dublin.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <rect x="38" y="98" width="44" height="6" fill="#ffffff"></rect>
+        <rect x="42" y="92" width="36" height="6" fill="#ffffff"></rect>
+        <rect x="44" y="64" width="6" height="28" fill="#ffffff"></rect>
+        <rect x="70" y="64" width="6" height="28" fill="#ffffff"></rect>
+        <path d="M52,92 V74 a8 8 0 0 1 16 0 V92 Z" fill="#1003A3"></path>
+        <rect x="40" y="58" width="40" height="6" fill="#ffffff"></rect>
+        <circle cx="45" cy="55" r="2.4" fill="#ffffff"></circle>
+        <circle cx="75" cy="55" r="2.4" fill="#ffffff"></circle>
+        <path d="M47,58 Q47,46 60,46 Q73,46 73,58 Z" fill="#ffffff"></path>
+        <rect x="52" y="34" width="16" height="12" fill="#ffffff"></rect>
+        <path d="M55,46 V40 a4 4 0 0 1 10 0 V46 Z" fill="#1003A3"></path>
+        <path d="M52,34 Q52,24 60,24 Q68,24 68,34 Z" fill="#ffffff"></path>
+        <rect x="56" y="16" width="8" height="8" fill="#ffffff"></rect>
+        <rect x="59" y="8" width="2" height="9" fill="#ffffff"></rect>
+        <circle cx="60" cy="8" r="2" fill="#ffffff"></circle>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/edinburgh.svg b/public/media/bingo/edinburgh.svg
new file mode 100644
index 000000000..8de469018
--- /dev/null
+++ b/public/media/bingo/edinburgh.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <polygon points="14,108 14,98 26,88 38,94 50,86 64,92 78,84 92,92 106,94 106,108" fill="#ffffff"></polygon>
+        <rect x="34" y="62" width="52" height="24" fill="#ffffff"></rect>
+        <rect x="34" y="58" width="5" height="4" fill="#ffffff"></rect>
+        <rect x="44" y="58" width="5" height="4" fill="#ffffff"></rect>
+        <rect x="54" y="58" width="5" height="4" fill="#ffffff"></rect>
+        <rect x="64" y="58" width="5" height="4" fill="#ffffff"></rect>
+        <rect x="74" y="58" width="5" height="4" fill="#ffffff"></rect>
+        <rect x="33" y="46" width="14" height="40" fill="#ffffff"></rect>
+        <rect x="33" y="42" width="4" height="4" fill="#ffffff"></rect>
+        <rect x="40" y="42" width="4" height="4" fill="#ffffff"></rect>
+        <rect x="68" y="40" width="16" height="46" fill="#ffffff"></rect>
+        <rect x="68" y="36" width="4.5" height="4" fill="#ffffff"></rect>
+        <rect x="79.5" y="36" width="4.5" height="4" fill="#ffffff"></rect>
+        <rect x="38" y="52" width="3.5" height="8" rx="1.5" fill="#1003A3"></rect>
+        <rect x="52" y="68" width="3.5" height="9" rx="1.5" fill="#1003A3"></rect>
+        <rect x="63" y="68" width="3.5" height="9" rx="1.5" fill="#1003A3"></rect>
+        <rect x="74" y="50" width="3.5" height="9" rx="1.5" fill="#1003A3"></rect>
+        <rect x="83" y="22" width="1.6" height="14" fill="#ffffff"></rect>
+        <polygon points="84.6,22 94,25.5 84.6,29" fill="#ffffff"></polygon>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/florence-2.svg b/public/media/bingo/florence-2.svg
new file mode 100644
index 000000000..3f8dee76f
--- /dev/null
+++ b/public/media/bingo/florence-2.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <rect x="38" y="86" width="68" height="18" fill="#ffffff"></rect>
+        <rect x="46" y="92" width="6" height="12" fill="#FB471F"></rect>
+        <rect x="92" y="92" width="6" height="12" fill="#FB471F"></rect>
+        <rect x="22" y="38" width="16" height="48" fill="#ffffff"></rect>
+        <rect x="19" y="33" width="22" height="5" fill="#ffffff"></rect>
+        <rect x="27" y="46" width="6" height="7" rx="1" fill="#FB471F"></rect>
+        <rect x="27" y="58" width="6" height="7" rx="1" fill="#FB471F"></rect>
+        <rect x="27" y="70" width="6" height="7" rx="1" fill="#FB471F"></rect>
+        <rect x="56" y="60" width="42" height="26" fill="#ffffff"></rect>
+        <circle cx="65" cy="71" r="3" fill="#FB471F"></circle>
+        <circle cx="77" cy="71" r="3" fill="#FB471F"></circle>
+        <circle cx="89" cy="71" r="3" fill="#FB471F"></circle>
+        <path d="M56,60 Q56,36 77,26 Q98,36 98,60 Z" fill="#ffffff"></path>
+        <rect x="66" y="33" width="1.8" height="27" fill="#FB471F"></rect>
+        <rect x="76.2" y="29" width="1.8" height="31" fill="#FB471F"></rect>
+        <rect x="86.4" y="33" width="1.8" height="27" fill="#FB471F"></rect>
+        <rect x="72" y="18" width="10" height="10" fill="#ffffff"></rect>
+        <circle cx="77" cy="15" r="3" fill="#ffffff"></circle>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/florence-3.svg b/public/media/bingo/florence-3.svg
new file mode 100644
index 000000000..a10073640
--- /dev/null
+++ b/public/media/bingo/florence-3.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#008624"></rect>
+  <g>
+        <rect x="38" y="86" width="68" height="18" fill="#ffffff"></rect>
+        <rect x="46" y="92" width="6" height="12" fill="#008624"></rect>
+        <rect x="92" y="92" width="6" height="12" fill="#008624"></rect>
+        <rect x="22" y="38" width="16" height="48" fill="#ffffff"></rect>
+        <rect x="19" y="33" width="22" height="5" fill="#ffffff"></rect>
+        <rect x="27" y="46" width="6" height="7" rx="1" fill="#008624"></rect>
+        <rect x="27" y="58" width="6" height="7" rx="1" fill="#008624"></rect>
+        <rect x="27" y="70" width="6" height="7" rx="1" fill="#008624"></rect>
+        <rect x="56" y="60" width="42" height="26" fill="#ffffff"></rect>
+        <circle cx="65" cy="71" r="3" fill="#008624"></circle>
+        <circle cx="77" cy="71" r="3" fill="#008624"></circle>
+        <circle cx="89" cy="71" r="3" fill="#008624"></circle>
+        <path d="M56,60 Q56,36 77,26 Q98,36 98,60 Z" fill="#ffffff"></path>
+        <rect x="66" y="33" width="1.8" height="27" fill="#008624"></rect>
+        <rect x="76.2" y="29" width="1.8" height="31" fill="#008624"></rect>
+        <rect x="86.4" y="33" width="1.8" height="27" fill="#008624"></rect>
+        <rect x="72" y="18" width="10" height="10" fill="#ffffff"></rect>
+        <circle cx="77" cy="15" r="3" fill="#ffffff"></circle>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/florence.svg b/public/media/bingo/florence.svg
new file mode 100644
index 000000000..dbb199691
--- /dev/null
+++ b/public/media/bingo/florence.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <rect x="38" y="86" width="68" height="18" fill="#ffffff"></rect>
+        <rect x="46" y="92" width="6" height="12" fill="#1003A3"></rect>
+        <rect x="92" y="92" width="6" height="12" fill="#1003A3"></rect>
+        <rect x="22" y="38" width="16" height="48" fill="#ffffff"></rect>
+        <rect x="19" y="33" width="22" height="5" fill="#ffffff"></rect>
+        <rect x="27" y="46" width="6" height="7" rx="1" fill="#1003A3"></rect>
+        <rect x="27" y="58" width="6" height="7" rx="1" fill="#1003A3"></rect>
+        <rect x="27" y="70" width="6" height="7" rx="1" fill="#1003A3"></rect>
+        <rect x="56" y="60" width="42" height="26" fill="#ffffff"></rect>
+        <circle cx="65" cy="71" r="3" fill="#1003A3"></circle>
+        <circle cx="77" cy="71" r="3" fill="#1003A3"></circle>
+        <circle cx="89" cy="71" r="3" fill="#1003A3"></circle>
+        <path d="M56,60 Q56,36 77,26 Q98,36 98,60 Z" fill="#ffffff"></path>
+        <rect x="66" y="33" width="1.8" height="27" fill="#1003A3"></rect>
+        <rect x="76.2" y="29" width="1.8" height="31" fill="#1003A3"></rect>
+        <rect x="86.4" y="33" width="1.8" height="27" fill="#1003A3"></rect>
+        <rect x="72" y="18" width="10" height="10" fill="#ffffff"></rect>
+        <circle cx="77" cy="15" r="3" fill="#ffffff"></circle>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/geneva-2.svg b/public/media/bingo/geneva-2.svg
new file mode 100644
index 000000000..00c79fe53
--- /dev/null
+++ b/public/media/bingo/geneva-2.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <rect x="34" y="102" width="52" height="6" fill="#ffffff"></rect>
+        <rect x="39" y="96" width="42" height="6" fill="#ffffff"></rect>
+        <rect x="44" y="90" width="32" height="6" fill="#ffffff"></rect>
+        <rect x="45" y="64" width="4" height="26" fill="#ffffff"></rect>
+        <rect x="55" y="64" width="4" height="26" fill="#ffffff"></rect>
+        <rect x="61" y="64" width="4" height="26" fill="#ffffff"></rect>
+        <rect x="71" y="64" width="4" height="26" fill="#ffffff"></rect>
+        <path d="M49,90 V72 Q52,66 55,72 V90 Z" fill="#FB471F"></path>
+        <path d="M65,90 V72 Q68,66 71,72 V90 Z" fill="#FB471F"></path>
+        <rect x="43" y="58" width="34" height="6" fill="#ffffff"></rect>
+        <polygon points="43,58 60,32 77,58" fill="#ffffff"></polygon>
+        <polygon points="40,58 44,46 48,58" fill="#ffffff"></polygon>
+        <polygon points="72,58 76,46 80,58" fill="#ffffff"></polygon>
+        <polygon points="54,42 60,14 66,42" fill="#ffffff"></polygon>
+        <rect x="58.8" y="9" width="2.4" height="7" fill="#ffffff"></rect>
+        <circle cx="60" cy="9" r="2.2" fill="#ffffff"></circle>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/geneva.svg b/public/media/bingo/geneva.svg
new file mode 100644
index 000000000..df381867c
--- /dev/null
+++ b/public/media/bingo/geneva.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <rect x="34" y="102" width="52" height="6" fill="#ffffff"></rect>
+        <rect x="39" y="96" width="42" height="6" fill="#ffffff"></rect>
+        <rect x="44" y="90" width="32" height="6" fill="#ffffff"></rect>
+        <rect x="45" y="64" width="4" height="26" fill="#ffffff"></rect>
+        <rect x="55" y="64" width="4" height="26" fill="#ffffff"></rect>
+        <rect x="61" y="64" width="4" height="26" fill="#ffffff"></rect>
+        <rect x="71" y="64" width="4" height="26" fill="#ffffff"></rect>
+        <path d="M49,90 V72 Q52,66 55,72 V90 Z" fill="#1003A3"></path>
+        <path d="M65,90 V72 Q68,66 71,72 V90 Z" fill="#1003A3"></path>
+        <rect x="43" y="58" width="34" height="6" fill="#ffffff"></rect>
+        <polygon points="43,58 60,32 77,58" fill="#ffffff"></polygon>
+        <polygon points="40,58 44,46 48,58" fill="#ffffff"></polygon>
+        <polygon points="72,58 76,46 80,58" fill="#ffffff"></polygon>
+        <polygon points="54,42 60,14 66,42" fill="#ffffff"></polygon>
+        <rect x="58.8" y="9" width="2.4" height="7" fill="#ffffff"></rect>
+        <circle cx="60" cy="9" r="2.2" fill="#ffffff"></circle>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/gothenburg-2.svg b/public/media/bingo/gothenburg-2.svg
new file mode 100644
index 000000000..b6e6a5958
--- /dev/null
+++ b/public/media/bingo/gothenburg-2.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <polygon points="42,104 42,42 68,32 68,104" fill="#ffffff"></polygon>
+        <rect x="42" y="50" width="26" height="2.4" fill="#FB471F"></rect>
+        <rect x="42" y="62" width="26" height="2.4" fill="#FB471F"></rect>
+        <rect x="42" y="74" width="26" height="2.4" fill="#FB471F"></rect>
+        <rect x="42" y="86" width="26" height="2.4" fill="#FB471F"></rect>
+        <rect x="50" y="94" width="10" height="10" fill="#FB471F"></rect>
+        <rect x="80" y="16" width="2.6" height="88" fill="#ffffff"></rect>
+        <rect x="68" y="40" width="14" height="2.4" fill="#ffffff"></rect>
+        <rect x="74" y="24" width="8.6" height="2.2" fill="#ffffff"></rect>
+        <rect x="74" y="58" width="8.6" height="2.2" fill="#ffffff"></rect>
+        <rect x="74" y="78" width="8.6" height="2.2" fill="#ffffff"></rect>
+        <polygon points="80,16 86,28 80,28" fill="#ffffff"></polygon>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/gothenburg.svg b/public/media/bingo/gothenburg.svg
new file mode 100644
index 000000000..86601934b
--- /dev/null
+++ b/public/media/bingo/gothenburg.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <polygon points="42,104 42,42 68,32 68,104" fill="#ffffff"></polygon>
+        <rect x="42" y="50" width="26" height="2.4" fill="#1003A3"></rect>
+        <rect x="42" y="62" width="26" height="2.4" fill="#1003A3"></rect>
+        <rect x="42" y="74" width="26" height="2.4" fill="#1003A3"></rect>
+        <rect x="42" y="86" width="26" height="2.4" fill="#1003A3"></rect>
+        <rect x="50" y="94" width="10" height="10" fill="#1003A3"></rect>
+        <rect x="80" y="16" width="2.6" height="88" fill="#ffffff"></rect>
+        <rect x="68" y="40" width="14" height="2.4" fill="#ffffff"></rect>
+        <rect x="74" y="24" width="8.6" height="2.2" fill="#ffffff"></rect>
+        <rect x="74" y="58" width="8.6" height="2.2" fill="#ffffff"></rect>
+        <rect x="74" y="78" width="8.6" height="2.2" fill="#ffffff"></rect>
+        <polygon points="80,16 86,28 80,28" fill="#ffffff"></polygon>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/krakow-2.svg b/public/media/bingo/krakow-2.svg
new file mode 100644
index 000000000..2ab445c6c
--- /dev/null
+++ b/public/media/bingo/krakow-2.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <path d="M26,92 C16,90 12,80 18,72 C22,67 28,68 29,74 C25,73 23,79 30,80 C28,84 31,88 38,88 Z" fill="#ffffff"></path>
+        <path d="M30,90 C24,74 30,60 48,58 C62,56 70,60 74,66 C78,72 76,82 70,86 C66,89 60,90 52,90 Z" fill="#ffffff"></path>
+        <path d="M52,64 C54,52 62,44 78,42 C82,41 86,42 88,44 L86,52 C74,52 66,58 64,70 Z" fill="#ffffff"></path>
+        <path d="M84,40 C88,33 96,30 104,32 C108,33 108,38 105,42 C108,44 107,49 102,49 C99,53 92,54 86,51 C83,49 82,44 84,40 Z" fill="#ffffff"></path>
+        <polygon points="86,40 82,30 92,37" fill="#ffffff"></polygon>
+        <polygon points="92,38 90,28 98,35" fill="#ffffff"></polygon>
+        <circle cx="96" cy="40" r="1.8" fill="#FB471F"></circle>
+        <path d="M101,47 C106,47 110,49 110,52 C107,52 109,55 113,55 C110,58 105,57 102,54 Z" fill="#ffffff"></path>
+        <path d="M44,58 C46,42 58,32 72,32 L64,46 L76,44 L66,54 C58,57 50,58 44,58 Z" fill="#ffffff"></path>
+        <polygon points="40,56 43,49 47,56" fill="#ffffff"></polygon>
+        <polygon points="47,57 50,50 54,57" fill="#ffffff"></polygon>
+        <polygon points="54,60 57,54 61,60" fill="#ffffff"></polygon>
+        <path d="M40,86 L42,100 L49,100 L47,86 Z" fill="#ffffff"></path>
+        <path d="M58,86 L60,100 L67,100 L65,86 Z" fill="#ffffff"></path>
+        <polygon points="42,100 49,100 50,104 41,104" fill="#ffffff"></polygon>
+        <polygon points="60,100 67,100 68,104 59,104" fill="#ffffff"></polygon>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/krakow.svg b/public/media/bingo/krakow.svg
new file mode 100644
index 000000000..055dd455f
--- /dev/null
+++ b/public/media/bingo/krakow.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <path d="M26,92 C16,90 12,80 18,72 C22,67 28,68 29,74 C25,73 23,79 30,80 C28,84 31,88 38,88 Z" fill="#ffffff"></path>
+        <path d="M30,90 C24,74 30,60 48,58 C62,56 70,60 74,66 C78,72 76,82 70,86 C66,89 60,90 52,90 Z" fill="#ffffff"></path>
+        <path d="M52,64 C54,52 62,44 78,42 C82,41 86,42 88,44 L86,52 C74,52 66,58 64,70 Z" fill="#ffffff"></path>
+        <path d="M84,40 C88,33 96,30 104,32 C108,33 108,38 105,42 C108,44 107,49 102,49 C99,53 92,54 86,51 C83,49 82,44 84,40 Z" fill="#ffffff"></path>
+        <polygon points="86,40 82,30 92,37" fill="#ffffff"></polygon>
+        <polygon points="92,38 90,28 98,35" fill="#ffffff"></polygon>
+        <circle cx="96" cy="40" r="1.8" fill="#1003A3"></circle>
+        <path d="M101,47 C106,47 110,49 110,52 C107,52 109,55 113,55 C110,58 105,57 102,54 Z" fill="#ffffff"></path>
+        <path d="M44,58 C46,42 58,32 72,32 L64,46 L76,44 L66,54 C58,57 50,58 44,58 Z" fill="#ffffff"></path>
+        <polygon points="40,56 43,49 47,56" fill="#ffffff"></polygon>
+        <polygon points="47,57 50,50 54,57" fill="#ffffff"></polygon>
+        <polygon points="54,60 57,54 61,60" fill="#ffffff"></polygon>
+        <path d="M40,86 L42,100 L49,100 L47,86 Z" fill="#ffffff"></path>
+        <path d="M58,86 L60,100 L67,100 L65,86 Z" fill="#ffffff"></path>
+        <polygon points="42,100 49,100 50,104 41,104" fill="#ffffff"></polygon>
+        <polygon points="60,100 67,100 68,104 59,104" fill="#ffffff"></polygon>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/online.svg b/public/media/bingo/online.svg
new file mode 100644
index 000000000..2dcd1f9ae
--- /dev/null
+++ b/public/media/bingo/online.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <rect x="28" y="28" width="64" height="48" rx="3" fill="#ffffff"></rect>
+        <rect x="33" y="33" width="54" height="38" rx="1.5" fill="#1003A3"></rect>
+        <circle cx="60" cy="46" r="6.5" fill="#ffffff"></circle>
+        <path d="M51,66 a9 9 0 0 1 18 0 Z" fill="#ffffff"></path>
+        <rect x="40" y="76" width="40" height="4" fill="#ffffff"></rect>
+        <polygon points="20,80 100,80 106,90 14,90" fill="#ffffff"></polygon>
+        <rect x="53" y="81.5" width="14" height="2.4" rx="1.2" fill="#1003A3"></rect>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/prague-2.svg b/public/media/bingo/prague-2.svg
new file mode 100644
index 000000000..aa500454d
--- /dev/null
+++ b/public/media/bingo/prague-2.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <circle cx="60" cy="60" r="50" fill="#ffffff"></circle>
+        <circle cx="60" cy="60" r="44" fill="#FB471F"></circle>
+        <rect x="58.4" y="4" width="3.2" height="9" fill="#ffffff"></rect>
+        <rect x="58.4" y="107" width="3.2" height="9" fill="#ffffff"></rect>
+        <rect x="4" y="58.4" width="9" height="3.2" fill="#ffffff"></rect>
+        <rect x="107" y="58.4" width="9" height="3.2" fill="#ffffff"></rect>
+        <circle cx="60" cy="60" r="40" fill="#ffffff"></circle>
+        <circle cx="60" cy="60" r="36" fill="#FB471F"></circle>
+        <circle cx="58" cy="62" r="21" fill="#ffffff"></circle>
+        <circle cx="58" cy="62" r="17" fill="#FB471F"></circle>
+        <rect x="58.5" y="38" width="3" height="22" rx="1.5" fill="#ffffff"></rect>
+        <g transform="rotate(48 60 60)">
+          <rect x="59" y="36" width="2" height="24" fill="#ffffff"></rect>
+          <circle cx="60" cy="34" r="4" fill="#ffffff"></circle>
+          <circle cx="60" cy="34" r="1.6" fill="#FB471F"></circle>
+        </g>
+        <circle cx="60" cy="60" r="3.6" fill="#ffffff"></circle>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/prague-3.svg b/public/media/bingo/prague-3.svg
new file mode 100644
index 000000000..209131ea3
--- /dev/null
+++ b/public/media/bingo/prague-3.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#008624"></rect>
+  <g>
+        <circle cx="60" cy="60" r="50" fill="#ffffff"></circle>
+        <circle cx="60" cy="60" r="44" fill="#008624"></circle>
+        <rect x="58.4" y="4" width="3.2" height="9" fill="#ffffff"></rect>
+        <rect x="58.4" y="107" width="3.2" height="9" fill="#ffffff"></rect>
+        <rect x="4" y="58.4" width="9" height="3.2" fill="#ffffff"></rect>
+        <rect x="107" y="58.4" width="9" height="3.2" fill="#ffffff"></rect>
+        <circle cx="60" cy="60" r="40" fill="#ffffff"></circle>
+        <circle cx="60" cy="60" r="36" fill="#008624"></circle>
+        <circle cx="58" cy="62" r="21" fill="#ffffff"></circle>
+        <circle cx="58" cy="62" r="17" fill="#008624"></circle>
+        <rect x="58.5" y="38" width="3" height="22" rx="1.5" fill="#ffffff"></rect>
+        <g transform="rotate(48 60 60)">
+          <rect x="59" y="36" width="2" height="24" fill="#ffffff"></rect>
+          <circle cx="60" cy="34" r="4" fill="#ffffff"></circle>
+          <circle cx="60" cy="34" r="1.6" fill="#008624"></circle>
+        </g>
+        <circle cx="60" cy="60" r="3.6" fill="#ffffff"></circle>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/prague.svg b/public/media/bingo/prague.svg
new file mode 100644
index 000000000..a8f9e92b0
--- /dev/null
+++ b/public/media/bingo/prague.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <circle cx="60" cy="60" r="50" fill="#ffffff"></circle>
+        <circle cx="60" cy="60" r="44" fill="#1003A3"></circle>
+        <rect x="58.4" y="4" width="3.2" height="9" fill="#ffffff"></rect>
+        <rect x="58.4" y="107" width="3.2" height="9" fill="#ffffff"></rect>
+        <rect x="4" y="58.4" width="9" height="3.2" fill="#ffffff"></rect>
+        <rect x="107" y="58.4" width="9" height="3.2" fill="#ffffff"></rect>
+        <circle cx="60" cy="60" r="40" fill="#ffffff"></circle>
+        <circle cx="60" cy="60" r="36" fill="#1003A3"></circle>
+        <circle cx="58" cy="62" r="21" fill="#ffffff"></circle>
+        <circle cx="58" cy="62" r="17" fill="#1003A3"></circle>
+        <rect x="58.5" y="38" width="3" height="22" rx="1.5" fill="#ffffff"></rect>
+        <g transform="rotate(48 60 60)">
+          <rect x="59" y="36" width="2" height="24" fill="#ffffff"></rect>
+          <circle cx="60" cy="34" r="4" fill="#ffffff"></circle>
+          <circle cx="60" cy="34" r="1.6" fill="#1003A3"></circle>
+        </g>
+        <circle cx="60" cy="60" r="3.6" fill="#ffffff"></circle>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/rimini-2.svg b/public/media/bingo/rimini-2.svg
new file mode 100644
index 000000000..cecf9f69b
--- /dev/null
+++ b/public/media/bingo/rimini-2.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <rect x="32" y="64" width="56" height="40" fill="#ffffff"></rect>
+        <path d="M48,104 V80 a12 12 0 0 1 24 0 V104 Z" fill="#FB471F"></path>
+        <rect x="38" y="70" width="2" height="32" fill="#FB471F"></rect>
+        <rect x="43" y="70" width="2" height="32" fill="#FB471F"></rect>
+        <rect x="75" y="70" width="2" height="32" fill="#FB471F"></rect>
+        <rect x="80" y="70" width="2" height="32" fill="#FB471F"></rect>
+        <circle cx="44" cy="74" r="4" fill="#FB471F"></circle>
+        <circle cx="76" cy="74" r="4" fill="#FB471F"></circle>
+        <rect x="30" y="56" width="60" height="8" fill="#ffffff"></rect>
+        <polygon points="42,56 60,40 78,56" fill="#ffffff"></polygon>
+        <rect x="58" y="32" width="4" height="9" fill="#ffffff"></rect>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/rimini.svg b/public/media/bingo/rimini.svg
new file mode 100644
index 000000000..ce86db339
--- /dev/null
+++ b/public/media/bingo/rimini.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <rect x="32" y="64" width="56" height="40" fill="#ffffff"></rect>
+        <path d="M48,104 V80 a12 12 0 0 1 24 0 V104 Z" fill="#1003A3"></path>
+        <rect x="38" y="70" width="2" height="32" fill="#1003A3"></rect>
+        <rect x="43" y="70" width="2" height="32" fill="#1003A3"></rect>
+        <rect x="75" y="70" width="2" height="32" fill="#1003A3"></rect>
+        <rect x="80" y="70" width="2" height="32" fill="#1003A3"></rect>
+        <circle cx="44" cy="74" r="4" fill="#1003A3"></circle>
+        <circle cx="76" cy="74" r="4" fill="#1003A3"></circle>
+        <rect x="30" y="56" width="60" height="8" fill="#ffffff"></rect>
+        <polygon points="42,56 60,40 78,56" fill="#ffffff"></polygon>
+        <rect x="58" y="32" width="4" height="9" fill="#ffffff"></rect>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/vilnius-2.svg b/public/media/bingo/vilnius-2.svg
new file mode 100644
index 000000000..cf3b49d39
--- /dev/null
+++ b/public/media/bingo/vilnius-2.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <rect x="44" y="100" width="32" height="8" fill="#ffffff"></rect>
+        <rect x="47" y="62" width="26" height="40" fill="#ffffff"></rect>
+        <path d="M54,102 V90 a6 6 0 0 1 12 0 V102 Z" fill="#FB471F"></path>
+        <rect x="45" y="56" width="30" height="6" fill="#ffffff"></rect>
+        <rect x="50" y="40" width="20" height="16" fill="#ffffff"></rect>
+        <circle cx="60" cy="48" r="5" fill="#FB471F"></circle>
+        <circle cx="60" cy="48" r="1.6" fill="#ffffff"></circle>
+        <rect x="49" y="36" width="22" height="4" fill="#ffffff"></rect>
+        <rect x="53" y="26" width="14" height="10" fill="#ffffff"></rect>
+        <path d="M55,26 V20 a5 5 0 0 1 10 0 V26 Z" fill="#FB471F"></path>
+        <path d="M53,26 Q53,16 60,16 Q67,16 67,26 Z" fill="#ffffff"></path>
+        <rect x="58" y="9" width="4" height="7" fill="#ffffff"></rect>
+        <rect x="59" y="2" width="2" height="9" fill="#ffffff"></rect>
+        <rect x="56" y="4.5" width="8" height="2" fill="#ffffff"></rect>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/public/media/bingo/vilnius.svg b/public/media/bingo/vilnius.svg
new file mode 100644
index 000000000..7a92eb016
--- /dev/null
+++ b/public/media/bingo/vilnius.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#1003A3"></rect>
+  <g>
+        <rect x="44" y="100" width="32" height="8" fill="#ffffff"></rect>
+        <rect x="47" y="62" width="26" height="40" fill="#ffffff"></rect>
+        <path d="M54,102 V90 a6 6 0 0 1 12 0 V102 Z" fill="#1003A3"></path>
+        <rect x="45" y="56" width="30" height="6" fill="#ffffff"></rect>
+        <rect x="50" y="40" width="20" height="16" fill="#ffffff"></rect>
+        <circle cx="60" cy="48" r="5" fill="#1003A3"></circle>
+        <circle cx="60" cy="48" r="1.6" fill="#ffffff"></circle>
+        <rect x="49" y="36" width="22" height="4" fill="#ffffff"></rect>
+        <rect x="53" y="26" width="14" height="10" fill="#ffffff"></rect>
+        <path d="M55,26 V20 a5 5 0 0 1 10 0 V26 Z" fill="#1003A3"></path>
+        <path d="M53,26 Q53,16 60,16 Q67,16 67,26 Z" fill="#ffffff"></path>
+        <rect x="58" y="9" width="4" height="7" fill="#ffffff"></rect>
+        <rect x="59" y="2" width="2" height="9" fill="#ffffff"></rect>
+        <rect x="56" y="4.5" width="8" height="2" fill="#ffffff"></rect>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/island/BingoCard.svelte b/src/components/island/BingoCard.svelte
index fd75ad743..b3018f337 100644
--- a/src/components/island/BingoCard.svelte
+++ b/src/components/island/BingoCard.svelte
@@ -2,31 +2,31 @@
   const STORAGE_KEY = 'ep-bingo-checked';
 
   const editions = [
-    { year: 2002, city: 'Charleroi' },
-    { year: 2003, city: 'Charleroi' },
-    { year: 2004, city: 'Gothenburg' },
-    { year: 2005, city: 'Gothenburg' },
-    { year: 2006, city: 'CERN, Geneva' },
-    { year: 2007, city: 'Vilnius' },
-    { year: 2008, city: 'Vilnius' },
-    { year: 2009, city: 'Birmingham' },
-    { year: 2010, city: 'Birmingham' },
-    { year: 2011, city: 'Florence' },
-    { year: 2012, city: 'Florence' },
-    { year: 2013, city: 'Florence' },
-    { year: 2014, city: 'Berlin' },
-    { year: 2015, city: 'Bilbao' },
-    { year: 2016, city: 'Bilbao' },
-    { year: 2017, city: 'Rimini' },
-    { year: 2018, city: 'Edinburgh' },
-    { year: 2019, city: 'Basel' },
-    { year: 2020, city: 'Online' },
-    { year: 2021, city: 'Online' },
-    { year: 2022, city: 'Dublin' },
-    { year: 2023, city: 'Prague' },
-    { year: 2024, city: 'Prague' },
-    { year: 2025, city: 'Prague' },
-    { year: 2026, city: 'Kraków' },
+    { year: 2002, city: 'Charleroi',   icon: '/media/bingo/charleroi.svg' },
+    { year: 2003, city: 'Charleroi',   icon: '/media/bingo/charleroi-2.svg' },
+    { year: 2004, city: 'Gothenburg',  icon: '/media/bingo/gothenburg.svg' },
+    { year: 2005, city: 'Gothenburg',  icon: '/media/bingo/gothenburg-2.svg' },
+    { year: 2006, city: 'CERN, Geneva',icon: '/media/bingo/geneva.svg' },
+    { year: 2007, city: 'Vilnius',     icon: '/media/bingo/vilnius.svg' },
+    { year: 2008, city: 'Vilnius',     icon: '/media/bingo/vilnius-2.svg' },
+    { year: 2009, city: 'Birmingham',  icon: '/media/bingo/birmingham.svg' },
+    { year: 2010, city: 'Birmingham',  icon: '/media/bingo/birmingham-2.svg' },
+    { year: 2011, city: 'Florence',    icon: '/media/bingo/florence.svg' },
+    { year: 2012, city: 'Florence',    icon: '/media/bingo/florence-2.svg' },
+    { year: 2013, city: 'Florence',    icon: '/media/bingo/florence-3.svg' },
+    { year: 2014, city: 'Berlin',      icon: '/media/bingo/berlin.svg' },
+    { year: 2015, city: 'Bilbao',      icon: '/media/bingo/bilbao.svg' },
+    { year: 2016, city: 'Bilbao',      icon: '/media/bingo/bilbao-2.svg' },
+    { year: 2017, city: 'Rimini',      icon: '/media/bingo/rimini.svg' },
+    { year: 2018, city: 'Edinburgh',   icon: '/media/bingo/edinburgh.svg' },
+    { year: 2019, city: 'Basel',       icon: '/media/bingo/basel.svg' },
+    { year: 2020, city: 'Online',      icon: '/media/bingo/online.svg' },
+    { year: 2021, city: 'Online',      icon: '/media/bingo/online.svg' },
+    { year: 2022, city: 'Dublin',      icon: '/media/bingo/dublin.svg' },
+    { year: 2023, city: 'Prague',      icon: '/media/bingo/prague.svg' },
+    { year: 2024, city: 'Prague',      icon: '/media/bingo/prague-2.svg' },
+    { year: 2025, city: 'Prague',      icon: '/media/bingo/prague-3.svg' },
+    { year: 2026, city: 'Kraków',      icon: '/media/bingo/krakow.svg' },
   ];
 
   function loadChecked() {
@@ -188,11 +188,18 @@
         aria-label={`${edition.year} ${edition.city}${checked[i] ? ' — attended' : ''}`}
         role="gridcell"
       >
-        <span class="cell-year">{edition.year}</span>
-        <span class="cell-city">{edition.city}</span>
-        {#if edition.year === 2026}
-          <span class="cell-now">Now!</span>
-        {/if}
+        <div class="card-inner" class:flipped={checked[i]}>
+          <div class="card-face card-front">
+            <span class="cell-year">{edition.year}</span>
+            <span class="cell-city">{edition.city}</span>
+            {#if edition.year === 2026}
+              <span class="cell-now">Now!</span>
+            {/if}
+          </div>
+          <div class="card-face card-back">
+            <img src={edition.icon} alt="" aria-hidden="true" class="cell-icon" />
+          </div>
+        </div>
       </button>
     {/each}
   </div>
@@ -247,21 +254,53 @@
 
   /* ── cell ── */
   .bingo-cell {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
     aspect-ratio: 1;
     border: 1px dashed var(--color-border);
     border-radius: 2px;
     background: var(--color-surface-faint);
     cursor: pointer;
     transition: border-color 0.15s, background 0.15s, transform 0.15s;
-    padding: 8px 6px;
-    gap: 3px;
     text-align: center;
     font-family: inherit;
     -webkit-tap-highlight-color: transparent;
+    perspective: 600px;
+  }
+
+  .card-inner {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform-style: preserve-3d;
+    transition: transform 0.45s ease;
+  }
+
+  .card-inner.flipped {
+    transform: rotateY(180deg);
+  }
+
+  .card-face {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    padding: 8px 6px;
+    gap: 3px;
+  }
+
+  .card-back {
+    transform: rotateY(180deg);
+    padding: 0;
+    background: var(--color-surface-faint);
+  }
+
+  .cell-icon {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
 
   .bingo-cell:hover {
@@ -281,19 +320,26 @@
     border-color: var(--color-border-bright);
   }
 
-  /* checked state */
+  /* checked state — background lives on the front face only, not the button */
   .bingo-cell.checked {
-    background: var(--color-accent);
     border-style: solid;
-    border-color: var(--color-accent-hover);
+    border-color: var(--color-border);
+  }
+
+  .bingo-cell.checked .card-front {
+    background: var(--color-accent);
   }
 
   .bingo-cell.checked:hover {
-    border-color: var(--color-accent-hover);
-    background: var(--color-accent-hover);
+    border-color: var(--color-border);
+    background: var(--color-surface-faint);
     transform: translateY(-3px);
   }
 
+  .bingo-cell.checked:hover .card-front {
+    background: var(--color-accent-hover);
+  }
+
   /* ── cell text ── */
   .cell-year {
     font-size: clamp(1rem, 2.5vw, 1.35rem);
@@ -403,5 +449,6 @@
   @media (prefers-reduced-motion: reduce) {
     .bingo-cell { transition: border-color 0.15s, background 0.15s; }
     .bingo-cell:hover { transform: none; }
+    .card-inner { transition: none; }
   }
 </style>

From d37fd72ca373ea73dbdaa9226a4c9fe9d919fb91 Mon Sep 17 00:00:00 2001
From: Daria Grudzien <hello@dariagrudzien.com>
Date: Thu, 25 Jun 2026 16:20:41 -0700
Subject: [PATCH 4/7] add city icons

---
 public/media/bingo/berlin-2.svg        |  19 -----
 public/media/bingo/berlin.svg          |  45 ++++++----
 public/media/bingo/online-2.svg        |  12 +++
 src/components/island/BingoCard.svelte | 113 +++++++++++++++++++------
 src/pages/bingo.astro                  |   1 -
 5 files changed, 130 insertions(+), 60 deletions(-)
 delete mode 100644 public/media/bingo/berlin-2.svg
 create mode 100644 public/media/bingo/online-2.svg

diff --git a/public/media/bingo/berlin-2.svg b/public/media/bingo/berlin-2.svg
deleted file mode 100644
index 19430054d..000000000
--- a/public/media/bingo/berlin-2.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
-  <g>
-        <rect x="26" y="98" width="68" height="6" fill="#ffffff"></rect>
-        <rect x="28" y="56" width="64" height="42" fill="#ffffff"></rect>
-        <rect x="35" y="62" width="6" height="36" fill="#FB471F"></rect>
-        <rect x="47" y="62" width="6" height="36" fill="#FB471F"></rect>
-        <path d="M57,98 V70 a6.5 6.5 0 0 1 13 0 V98 Z" fill="#FB471F"></path>
-        <rect x="74" y="62" width="6" height="36" fill="#FB471F"></rect>
-        <rect x="86" y="62" width="6" height="36" fill="#FB471F"></rect>
-        <rect x="24" y="48" width="72" height="9" fill="#ffffff"></rect>
-        <rect x="48" y="42" width="24" height="6" fill="#ffffff"></rect>
-        <path d="M44,42 C44,30 52,28 58,30 C62,27 70,29 73,38 L73,42 Z" fill="#ffffff"></path>
-        <polygon points="44,40 37,44 43,33" fill="#ffffff"></polygon>
-        <polygon points="50,38 44,42 49,32" fill="#ffffff"></polygon>
-        <rect x="68" y="22" width="2.4" height="20" fill="#ffffff"></rect>
-        <rect x="63" y="26" width="3" height="16" fill="#ffffff"></rect>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/berlin.svg b/public/media/bingo/berlin.svg
index b062ad972..be6767d8a 100644
--- a/public/media/bingo/berlin.svg
+++ b/public/media/bingo/berlin.svg
@@ -1,19 +1,34 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
   <rect width="120" height="120" fill="#1003A3"></rect>
   <g>
-        <rect x="26" y="98" width="68" height="6" fill="#ffffff"></rect>
-        <rect x="28" y="56" width="64" height="42" fill="#ffffff"></rect>
-        <rect x="35" y="62" width="6" height="36" fill="#1003A3"></rect>
-        <rect x="47" y="62" width="6" height="36" fill="#1003A3"></rect>
-        <path d="M57,98 V70 a6.5 6.5 0 0 1 13 0 V98 Z" fill="#1003A3"></path>
-        <rect x="74" y="62" width="6" height="36" fill="#1003A3"></rect>
-        <rect x="86" y="62" width="6" height="36" fill="#1003A3"></rect>
-        <rect x="24" y="48" width="72" height="9" fill="#ffffff"></rect>
-        <rect x="48" y="42" width="24" height="6" fill="#ffffff"></rect>
-        <path d="M44,42 C44,30 52,28 58,30 C62,27 70,29 73,38 L73,42 Z" fill="#ffffff"></path>
-        <polygon points="44,40 37,44 43,33" fill="#ffffff"></polygon>
-        <polygon points="50,38 44,42 49,32" fill="#ffffff"></polygon>
-        <rect x="68" y="22" width="2.4" height="20" fill="#ffffff"></rect>
-        <rect x="63" y="26" width="3" height="16" fill="#ffffff"></rect>
-      </g>
+    
+    <rect x="20" y="98" width="80" height="6" fill="#ffffff"></rect>
+    
+    <rect x="24" y="52" width="72" height="46" fill="#ffffff"></rect>
+    
+    <rect x="20" y="44" width="80" height="9" fill="#ffffff"></rect>
+    
+    <rect x="30" y="58" width="6" height="40" fill="#1003A3"></rect>
+    <rect x="42" y="58" width="6" height="40" fill="#1003A3"></rect>
+    <path d="M54,98 V70 a6 6 0 0 1 12 0 V98 Z" fill="#1003A3"></path>
+    <rect x="72" y="58" width="6" height="40" fill="#1003A3"></rect>
+    <rect x="84" y="58" width="6" height="40" fill="#1003A3"></rect>
+    
+    <rect x="44" y="38" width="32" height="6" fill="#ffffff"></rect>
+    
+    <circle cx="52" cy="34.5" r="4" fill="#ffffff"></circle>
+    <circle cx="52" cy="34.5" r="1.6" fill="#1003A3"></circle>
+    
+    <rect x="49.8" y="24" width="2.8" height="7" fill="#ffffff"></rect>
+    <circle cx="51.2" cy="22" r="2" fill="#ffffff"></circle>
+    <polygon points="52,23 56.5,22 56.5,24 52,25" fill="#ffffff"></polygon>
+    
+    <rect x="55" y="28" width="17" height="5.5" rx="2" fill="#ffffff"></rect>
+    <rect x="56.5" y="33" width="2.6" height="5" fill="#ffffff"></rect>
+    <rect x="60" y="33" width="2.6" height="5" fill="#ffffff"></rect>
+    <rect x="66" y="33" width="2.6" height="5" fill="#ffffff"></rect>
+    <rect x="69.5" y="33" width="2.6" height="5" fill="#ffffff"></rect>
+    <polygon points="67,29 68.5,21.5 74,23 75,26 71,27 69,29" fill="#ffffff"></polygon>
+    <polygon points="70,29 72,23 78,25 79,28 75,28 73,29" fill="#ffffff"></polygon>
+  </g>
 </svg>
\ No newline at end of file
diff --git a/public/media/bingo/online-2.svg b/public/media/bingo/online-2.svg
new file mode 100644
index 000000000..2ebc30ebe
--- /dev/null
+++ b/public/media/bingo/online-2.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+  <rect width="120" height="120" fill="#FB471F"></rect>
+  <g>
+        <rect x="28" y="28" width="64" height="48" rx="3" fill="#ffffff"></rect>
+        <rect x="33" y="33" width="54" height="38" rx="1.5" fill="#FB471F"></rect>
+        <circle cx="60" cy="46" r="6.5" fill="#ffffff"></circle>
+        <path d="M51,66 a9 9 0 0 1 18 0 Z" fill="#ffffff"></path>
+        <rect x="40" y="76" width="40" height="4" fill="#ffffff"></rect>
+        <polygon points="20,80 100,80 106,90 14,90" fill="#ffffff"></polygon>
+        <rect x="53" y="81.5" width="14" height="2.4" rx="1.2" fill="#FB471F"></rect>
+      </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/island/BingoCard.svelte b/src/components/island/BingoCard.svelte
index b3018f337..1405a41da 100644
--- a/src/components/island/BingoCard.svelte
+++ b/src/components/island/BingoCard.svelte
@@ -21,7 +21,7 @@
     { year: 2018, city: 'Edinburgh',   icon: '/media/bingo/edinburgh.svg' },
     { year: 2019, city: 'Basel',       icon: '/media/bingo/basel.svg' },
     { year: 2020, city: 'Online',      icon: '/media/bingo/online.svg' },
-    { year: 2021, city: 'Online',      icon: '/media/bingo/online.svg' },
+    { year: 2021, city: 'Online',      icon: '/media/bingo/online-2.svg' },
     { year: 2022, city: 'Dublin',      icon: '/media/bingo/dublin.svg' },
     { year: 2023, city: 'Prague',      icon: '/media/bingo/prague.svg' },
     { year: 2024, city: 'Prague',      icon: '/media/bingo/prague-2.svg' },
@@ -90,7 +90,7 @@
     );
   }
 
-  function downloadImage() {
+  async function downloadImage() {
     const COLS = 5;
     const CELL = 130;
     const PAD = 28;
@@ -98,12 +98,46 @@
     const W = COLS * CELL + PAD * 2;
     const H = COLS * CELL + PAD * 2 + HEADER_H;
 
+    // Resolve actual CSS variables from the page so the export matches the current theme
+    const style = getComputedStyle(document.documentElement);
+    const resolve = (v) => style.getPropertyValue(v).trim();
+
+    // Background colour: use the section background from the live theme
+    const sectionBgRaw = resolve('--color-section-bg');
+    const bgColor = sectionBgRaw || '#f0f1f4';
+
+    // Detect whether we are in light mode (section-bg is light)
+    // so we can pick appropriately contrasting cell colours.
+    const isLight = document.documentElement.classList.contains('light');
+
+    const cellFill       = isLight ? 'rgba(0,0,0,0.025)' : '#0d1520';
+    const cellFillCur    = isLight ? 'rgba(0,0,0,0.04)'  : '#111d36';
+    const cellBorder     = isLight ? 'rgba(0,0,0,0.1)'   : 'rgba(255,255,255,0.12)';
+    const cellBorderCur  = isLight ? 'rgba(0,0,0,0.22)'  : '#2a4a80';
+    const cellBorderChk  = isLight ? 'rgba(0,0,0,0.1)'   : '#f0c040';
+    const yearColor      = isLight ? 'rgba(0,0,0,0.87)'  : 'rgba(255,255,255,0.93)';
+    const cityColor      = isLight ? 'rgba(0,0,0,0.4)'   : 'rgba(255,255,255,0.6)';
+    const subtitleColor  = isLight ? 'rgba(0,0,0,0.4)'   : 'rgba(255,255,255,0.4)';
+
+    // Preload SVG icons for checked cells (matches the flipped card-back shown on screen)
+    const images = await Promise.all(
+      editions.map((ed, i) => {
+        if (!checked[i]) return Promise.resolve(null);
+        return new Promise((resolve) => {
+          const img = new Image();
+          img.onload = () => resolve(img);
+          img.onerror = () => resolve(null);
+          img.src = ed.icon;
+        });
+      })
+    );
+
     const canvas = document.createElement('canvas');
     canvas.width = W;
     canvas.height = H;
     const ctx = canvas.getContext('2d');
 
-    ctx.fillStyle = '#0b1121';
+    ctx.fillStyle = bgColor;
     ctx.fillRect(0, 0, W, H);
 
     ctx.fillStyle = '#f0c040';
@@ -111,10 +145,10 @@
     ctx.textAlign = 'center';
     ctx.fillText('EuroPython Bingo', W / 2, PAD + 34);
 
-    ctx.fillStyle = 'rgba(255,255,255,0.4)';
+    ctx.fillStyle = subtitleColor;
     ctx.font = '13px system-ui, sans-serif';
     ctx.fillText(
-      `${checkedCount} of 25 editions attended · ep2026.europython.eu/#bingo`,
+      `${checkedCount} of 25 editions attended · ep2026.europython.eu/bingo`,
       W / 2, PAD + 60
     );
 
@@ -125,26 +159,53 @@
       const y = HEADER_H + PAD + row * CELL;
       const isChecked = checked[i];
       const isCurrent = ed.year === 2026;
-
-      ctx.fillStyle = isChecked ? '#f0c040' : isCurrent ? '#111d36' : '#0d1520';
-      roundRect(ctx, x + 3, y + 3, CELL - 6, CELL - 6, 2);
-      ctx.fill();
-
-      ctx.strokeStyle = isChecked ? '#d4a830' : isCurrent ? '#2a4a80' : 'rgba(255,255,255,0.12)';
-      ctx.lineWidth = 1;
-      ctx.setLineDash([4, 4]);
-      roundRect(ctx, x + 3, y + 3, CELL - 6, CELL - 6, 2);
-      ctx.stroke();
-      ctx.setLineDash([]);
-
-      ctx.fillStyle = isChecked ? '#0b1121' : '#ffffff';
-      ctx.font = `bold 21px system-ui, sans-serif`;
-      ctx.textAlign = 'center';
-      ctx.fillText(ed.year.toString(), x + CELL / 2, y + CELL * 0.46);
-
-      ctx.fillStyle = isChecked ? 'rgba(11,17,33,0.65)' : 'rgba(255,255,255,0.55)';
-      ctx.font = `12px system-ui, sans-serif`;
-      ctx.fillText(ed.city, x + CELL / 2, y + CELL * 0.68);
+      const cx = x + 3, cy = y + 3, cw = CELL - 6, ch = CELL - 6;
+
+      if (isChecked && images[i]) {
+        // Checked: show SVG city icon (matches the flipped card-back on screen)
+        ctx.fillStyle = cellFill;
+        roundRect(ctx, cx, cy, cw, ch, 2);
+        ctx.fill();
+
+        ctx.strokeStyle = cellBorderChk;
+        ctx.lineWidth = 1.5;
+        ctx.setLineDash([]);
+        roundRect(ctx, cx, cy, cw, ch, 2);
+        ctx.stroke();
+
+        ctx.save();
+        roundRect(ctx, cx, cy, cw, ch, 2);
+        ctx.clip();
+        ctx.drawImage(images[i], cx, cy, cw, ch);
+        ctx.restore();
+      } else {
+        // Unchecked: text card (matches the card-front on screen)
+        ctx.fillStyle = isCurrent ? cellFillCur : cellFill;
+        roundRect(ctx, cx, cy, cw, ch, 2);
+        ctx.fill();
+
+        ctx.strokeStyle = isCurrent ? cellBorderCur : cellBorder;
+        ctx.lineWidth = 1;
+        ctx.setLineDash([4, 4]);
+        roundRect(ctx, cx, cy, cw, ch, 2);
+        ctx.stroke();
+        ctx.setLineDash([]);
+
+        ctx.fillStyle = yearColor;
+        ctx.font = `bold 21px system-ui, sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.fillText(ed.year.toString(), x + CELL / 2, y + CELL * 0.46);
+
+        ctx.fillStyle = cityColor;
+        ctx.font = `12px system-ui, sans-serif`;
+        ctx.fillText(ed.city, x + CELL / 2, y + CELL * 0.65);
+
+        if (isCurrent) {
+          ctx.fillStyle = '#f0c040';
+          ctx.font = `bold 9px system-ui, sans-serif`;
+          ctx.fillText('NOW!', x + CELL / 2, y + CELL * 0.82);
+        }
+      }
     });
 
     const link = document.createElement('a');
@@ -223,6 +284,7 @@
         <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
       </button>
       <button class="share-btn share-btn--save" onclick={downloadImage} aria-label="Save image">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v13M7 11l5 5 5-5"/><path d="M5 21h14"/></svg>
         Save image
       </button>
     </div>
@@ -434,6 +496,7 @@
 
   .share-btn--save {
     width: auto;
+    gap: 0.375rem;
     padding: 0 0.875rem;
     font-size: 0.8rem;
     font-weight: 600;
diff --git a/src/pages/bingo.astro b/src/pages/bingo.astro
index 350469ea7..a579b7b93 100644
--- a/src/pages/bingo.astro
+++ b/src/pages/bingo.astro
@@ -7,7 +7,6 @@ import BingoCard from "@components/island/BingoCard.svelte";
 <Layout
   title="EuroPython Bingo | How many have you attended?"
   description="25 editions, 13 cities, one community. Check off every EuroPython conference you've been to and share your card!"
-  image="/social-card-bingo.png"
 >
   <Section2 variant="dark" id="bingo">
     <div class="bingo-page">

From ac7486f2cab02ffcec8cf90abad2a5970d5a8233 Mon Sep 17 00:00:00 2001
From: Daria Grudzien <hello@dariagrudzien.com>
Date: Thu, 25 Jun 2026 16:26:36 -0700
Subject: [PATCH 5/7] add date and city to icons

---
 src/components/island/BingoCard.svelte | 70 ++++++++++++++------------
 1 file changed, 39 insertions(+), 31 deletions(-)

diff --git a/src/components/island/BingoCard.svelte b/src/components/island/BingoCard.svelte
index 1405a41da..2cac60c6e 100644
--- a/src/components/island/BingoCard.svelte
+++ b/src/components/island/BingoCard.svelte
@@ -2,31 +2,31 @@
   const STORAGE_KEY = 'ep-bingo-checked';
 
   const editions = [
-    { year: 2002, city: 'Charleroi',   icon: '/media/bingo/charleroi.svg' },
-    { year: 2003, city: 'Charleroi',   icon: '/media/bingo/charleroi-2.svg' },
-    { year: 2004, city: 'Gothenburg',  icon: '/media/bingo/gothenburg.svg' },
-    { year: 2005, city: 'Gothenburg',  icon: '/media/bingo/gothenburg-2.svg' },
-    { year: 2006, city: 'CERN, Geneva',icon: '/media/bingo/geneva.svg' },
-    { year: 2007, city: 'Vilnius',     icon: '/media/bingo/vilnius.svg' },
-    { year: 2008, city: 'Vilnius',     icon: '/media/bingo/vilnius-2.svg' },
-    { year: 2009, city: 'Birmingham',  icon: '/media/bingo/birmingham.svg' },
-    { year: 2010, city: 'Birmingham',  icon: '/media/bingo/birmingham-2.svg' },
-    { year: 2011, city: 'Florence',    icon: '/media/bingo/florence.svg' },
-    { year: 2012, city: 'Florence',    icon: '/media/bingo/florence-2.svg' },
-    { year: 2013, city: 'Florence',    icon: '/media/bingo/florence-3.svg' },
-    { year: 2014, city: 'Berlin',      icon: '/media/bingo/berlin.svg' },
-    { year: 2015, city: 'Bilbao',      icon: '/media/bingo/bilbao.svg' },
-    { year: 2016, city: 'Bilbao',      icon: '/media/bingo/bilbao-2.svg' },
-    { year: 2017, city: 'Rimini',      icon: '/media/bingo/rimini.svg' },
-    { year: 2018, city: 'Edinburgh',   icon: '/media/bingo/edinburgh.svg' },
-    { year: 2019, city: 'Basel',       icon: '/media/bingo/basel.svg' },
-    { year: 2020, city: 'Online',      icon: '/media/bingo/online.svg' },
-    { year: 2021, city: 'Online',      icon: '/media/bingo/online-2.svg' },
-    { year: 2022, city: 'Dublin',      icon: '/media/bingo/dublin.svg' },
-    { year: 2023, city: 'Prague',      icon: '/media/bingo/prague.svg' },
-    { year: 2024, city: 'Prague',      icon: '/media/bingo/prague-2.svg' },
-    { year: 2025, city: 'Prague',      icon: '/media/bingo/prague-3.svg' },
-    { year: 2026, city: 'Kraków',      icon: '/media/bingo/krakow.svg' },
+    { year: 2002, city: 'Charleroi',   icon: '/media/bingo/charleroi.svg',    bg: '#1003A3' },
+    { year: 2003, city: 'Charleroi',   icon: '/media/bingo/charleroi-2.svg',  bg: '#FB471F' },
+    { year: 2004, city: 'Gothenburg',  icon: '/media/bingo/gothenburg.svg',   bg: '#1003A3' },
+    { year: 2005, city: 'Gothenburg',  icon: '/media/bingo/gothenburg-2.svg', bg: '#FB471F' },
+    { year: 2006, city: 'CERN, Geneva',icon: '/media/bingo/geneva.svg',       bg: '#1003A3' },
+    { year: 2007, city: 'Vilnius',     icon: '/media/bingo/vilnius.svg',      bg: '#1003A3' },
+    { year: 2008, city: 'Vilnius',     icon: '/media/bingo/vilnius-2.svg',    bg: '#FB471F' },
+    { year: 2009, city: 'Birmingham',  icon: '/media/bingo/birmingham.svg',   bg: '#1003A3' },
+    { year: 2010, city: 'Birmingham',  icon: '/media/bingo/birmingham-2.svg', bg: '#FB471F' },
+    { year: 2011, city: 'Florence',    icon: '/media/bingo/florence.svg',     bg: '#1003A3' },
+    { year: 2012, city: 'Florence',    icon: '/media/bingo/florence-2.svg',   bg: '#FB471F' },
+    { year: 2013, city: 'Florence',    icon: '/media/bingo/florence-3.svg',   bg: '#008624' },
+    { year: 2014, city: 'Berlin',      icon: '/media/bingo/berlin.svg',       bg: '#1003A3' },
+    { year: 2015, city: 'Bilbao',      icon: '/media/bingo/bilbao.svg',       bg: '#1003A3' },
+    { year: 2016, city: 'Bilbao',      icon: '/media/bingo/bilbao-2.svg',     bg: '#FB471F' },
+    { year: 2017, city: 'Rimini',      icon: '/media/bingo/rimini.svg',       bg: '#1003A3' },
+    { year: 2018, city: 'Edinburgh',   icon: '/media/bingo/edinburgh.svg',    bg: '#1003A3' },
+    { year: 2019, city: 'Basel',       icon: '/media/bingo/basel.svg',        bg: '#1003A3' },
+    { year: 2020, city: 'Online',      icon: '/media/bingo/online.svg',       bg: '#1003A3' },
+    { year: 2021, city: 'Online',      icon: '/media/bingo/online-2.svg',     bg: '#FB471F' },
+    { year: 2022, city: 'Dublin',      icon: '/media/bingo/dublin.svg',       bg: '#1003A3' },
+    { year: 2023, city: 'Prague',      icon: '/media/bingo/prague.svg',       bg: '#1003A3' },
+    { year: 2024, city: 'Prague',      icon: '/media/bingo/prague-2.svg',     bg: '#FB471F' },
+    { year: 2025, city: 'Prague',      icon: '/media/bingo/prague-3.svg',     bg: '#008624' },
+    { year: 2026, city: 'Kraków',      icon: '/media/bingo/krakow.svg',       bg: '#1003A3' },
   ];
 
   function loadChecked() {
@@ -257,8 +257,10 @@
               <span class="cell-now">Now!</span>
             {/if}
           </div>
-          <div class="card-face card-back">
+          <div class="card-face card-back" style="background:{edition.bg}">
             <img src={edition.icon} alt="" aria-hidden="true" class="cell-icon" />
+            <span class="cell-year">{edition.year}</span>
+            <span class="cell-city">{edition.city}</span>
           </div>
         </div>
       </button>
@@ -355,14 +357,20 @@
 
   .card-back {
     transform: rotateY(180deg);
-    padding: 0;
-    background: var(--color-surface-faint);
   }
 
   .cell-icon {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+    width: 50%;
+    aspect-ratio: 1;
+    object-fit: contain;
+  }
+
+  .card-back .cell-year {
+    color: white;
+  }
+
+  .card-back .cell-city {
+    color: rgba(255, 255, 255, 0.7);
   }
 
   .bingo-cell:hover {

From 6c6fc85b4e0634eaae79ce06d13d3c952ef8d5a2 Mon Sep 17 00:00:00 2001
From: Daria Grudzien <hello@dariagrudzien.com>
Date: Thu, 25 Jun 2026 17:20:24 -0700
Subject: [PATCH 6/7] fix sharing button

---
 src/components/island/BingoCard.svelte | 35 ++++++++++++++++++--------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/island/BingoCard.svelte b/src/components/island/BingoCard.svelte
index 2cac60c6e..81fa95367 100644
--- a/src/components/island/BingoCard.svelte
+++ b/src/components/island/BingoCard.svelte
@@ -52,14 +52,14 @@
     const attended = editions.filter((_, i) => checked[i]).map(e => `${e.year} ${e.city}`);
     const count = attended.length;
     const base = `I've attended ${count} EuroPython conference${count !== 1 ? 's' : ''}! 🐍`;
-    return count > 0 ? `${base}\n${attended.join(' · ')}` : base;
+    const body = count > 0 ? `${base}\n\n${attended.join(' · ')}` : base;
+    return `${body}\n\nWhat about you: ${BINGO_PAGE_URL}`;
   }
 
-  const PAGE_URL = 'https://ep2026.europython.eu/#bingo';
-  const BINGO_PAGE_URL = 'https://ep2026.europython.eu/bingo';
+  const BINGO_PAGE_URL = 'https://ep2026.europython.eu/#bingo';
 
   function shareLinkedIn() {
-    const text = buildShareText() + '\n\n' + BINGO_PAGE_URL;
+    const text = buildShareText();
     window.open(
       `https://www.linkedin.com/feed/?shareActive=true&text=${encodeURIComponent(text)}`,
       '_blank', 'noopener,noreferrer'
@@ -69,13 +69,13 @@
   function shareX() {
     const text = buildShareText();
     window.open(
-      `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(PAGE_URL)}`,
+      `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`,
       '_blank', 'noopener,noreferrer'
     );
   }
 
   function shareBlueSky() {
-    const text = `${buildShareText()}\n\n${PAGE_URL}`;
+    const text = buildShareText();
     window.open(
       `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`,
       '_blank', 'noopener,noreferrer'
@@ -83,9 +83,9 @@
   }
 
   function shareMastodon() {
-    const text = `${buildShareText()}\n\n${PAGE_URL}`;
+    const text = buildShareText();
     window.open(
-      `https://shareopenly.org/share/?url=${encodeURIComponent(PAGE_URL)}&text=${encodeURIComponent(text)}`,
+      `https://shareopenly.org/share/?url=${encodeURIComponent(BINGO_PAGE_URL)}&text=${encodeURIComponent(text)}`,
       '_blank', 'noopener,noreferrer'
     );
   }
@@ -162,8 +162,8 @@
       const cx = x + 3, cy = y + 3, cw = CELL - 6, ch = CELL - 6;
 
       if (isChecked && images[i]) {
-        // Checked: show SVG city icon (matches the flipped card-back on screen)
-        ctx.fillStyle = cellFill;
+        // Checked: bg colour + icon at 50% + year + city (matches card-back on screen)
+        ctx.fillStyle = ed.bg;
         roundRect(ctx, cx, cy, cw, ch, 2);
         ctx.fill();
 
@@ -173,11 +173,24 @@
         roundRect(ctx, cx, cy, cw, ch, 2);
         ctx.stroke();
 
+        const iconSize = Math.round(cw * 0.5);
+        const ix = cx + Math.round((cw - iconSize) / 2);
+        const iy = cy + Math.round(ch * 0.08);
         ctx.save();
         roundRect(ctx, cx, cy, cw, ch, 2);
         ctx.clip();
-        ctx.drawImage(images[i], cx, cy, cw, ch);
+        ctx.drawImage(images[i], ix, iy, iconSize, iconSize);
         ctx.restore();
+
+        const yearY = iy + iconSize + Math.round(ch * 0.12);
+        ctx.fillStyle = 'white';
+        ctx.font = `bold 18px system-ui, sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.fillText(ed.year.toString(), x + CELL / 2, yearY);
+
+        ctx.fillStyle = 'rgba(255,255,255,0.7)';
+        ctx.font = `11px system-ui, sans-serif`;
+        ctx.fillText(ed.city, x + CELL / 2, yearY + Math.round(ch * 0.13));
       } else {
         // Unchecked: text card (matches the card-front on screen)
         ctx.fillStyle = isCurrent ? cellFillCur : cellFill;

From de5fd27ceb1ab4f19a0d1497972e4588153b21d3 Mon Sep 17 00:00:00 2001
From: Daria Grudzien <hello@dariagrudzien.com>
Date: Fri, 26 Jun 2026 19:03:23 -0700
Subject: [PATCH 7/7] updated icons

---
 public/media/bingo/basel-2.svg                |  21 ---
 public/media/bingo/basel.svg                  |  91 ++++++++++---
 public/media/bingo/bilbao-2.svg               |  13 --
 public/media/bingo/bilbao.svg                 |  25 ++--
 public/media/bingo/birmingham-2.svg           |  15 ---
 public/media/bingo/birmingham.svg             |  42 ++++--
 public/media/bingo/charleroi-2.svg            |  19 ---
 public/media/bingo/dublin-2.svg               |  20 ---
 public/media/bingo/dublin.svg                 |  63 ++++++---
 public/media/bingo/edinburgh.svg              |  86 +++++++++---
 public/media/bingo/florence-2.svg             |  23 ----
 public/media/bingo/florence-3.svg             |  23 ----
 public/media/bingo/florence.svg               |  16 ++-
 public/media/bingo/geneva-2.svg               |  21 ---
 public/media/bingo/geneva.svg                 |  33 ++---
 public/media/bingo/gothenburg-2.svg           |  17 ---
 public/media/bingo/gothenburg.svg             |  18 +--
 public/media/bingo/krakow-2.svg               |  21 ---
 public/media/bingo/krakow.svg                 |  23 +---
 public/media/bingo/prague-2.svg               |  22 ---
 public/media/bingo/prague-3.svg               |  22 ---
 public/media/bingo/prague.svg                 |  37 +++---
 .../media/bingo/{online-2.svg => remote.svg}  |   6 +-
 public/media/bingo/rimini-2.svg               |  16 ---
 public/media/bingo/rimini.svg                 |  17 +--
 public/media/bingo/vilnius-2.svg              |  19 ---
 public/media/bingo/vilnius.svg                |  21 +--
 src/components/island/BingoCard.svelte        | 125 ++++++++----------
 28 files changed, 344 insertions(+), 531 deletions(-)
 delete mode 100644 public/media/bingo/basel-2.svg
 delete mode 100644 public/media/bingo/bilbao-2.svg
 delete mode 100644 public/media/bingo/birmingham-2.svg
 delete mode 100644 public/media/bingo/charleroi-2.svg
 delete mode 100644 public/media/bingo/dublin-2.svg
 delete mode 100644 public/media/bingo/florence-2.svg
 delete mode 100644 public/media/bingo/florence-3.svg
 delete mode 100644 public/media/bingo/geneva-2.svg
 delete mode 100644 public/media/bingo/gothenburg-2.svg
 delete mode 100644 public/media/bingo/krakow-2.svg
 delete mode 100644 public/media/bingo/prague-2.svg
 delete mode 100644 public/media/bingo/prague-3.svg
 rename public/media/bingo/{online-2.svg => remote.svg} (86%)
 delete mode 100644 public/media/bingo/rimini-2.svg
 delete mode 100644 public/media/bingo/vilnius-2.svg

diff --git a/public/media/bingo/basel-2.svg b/public/media/bingo/basel-2.svg
deleted file mode 100644
index 226608124..000000000
--- a/public/media/bingo/basel-2.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
-  <g>
-        <rect x="42" y="58" width="36" height="46" fill="#ffffff"></rect>
-        <polygon points="42,58 60,40 78,58" fill="#ffffff"></polygon>
-        <line x1="48" y1="54" x2="56" y2="44" stroke="#FB471F" stroke-width="1.6"></line>
-        <line x1="56" y1="56" x2="66" y2="44" stroke="#FB471F" stroke-width="1.6"></line>
-        <line x1="64" y1="56" x2="72" y2="48" stroke="#FB471F" stroke-width="1.6"></line>
-        <path d="M54,104 V90 a6 6 0 0 1 12 0 V104 Z" fill="#FB471F"></path>
-        <circle cx="60" cy="72" r="6" fill="#FB471F"></circle>
-        <circle cx="60" cy="72" r="2" fill="#ffffff"></circle>
-        <rect x="31" y="44" width="14" height="60" fill="#ffffff"></rect>
-        <polygon points="31,44 38,16 45,44" fill="#ffffff"></polygon>
-        <rect x="37" y="9" width="2" height="9" fill="#ffffff"></rect>
-        <rect x="75" y="42" width="14" height="62" fill="#ffffff"></rect>
-        <polygon points="75,42 82,12 89,42" fill="#ffffff"></polygon>
-        <rect x="81" y="5" width="2" height="9" fill="#ffffff"></rect>
-        <path d="M35,60 V52 a3 3 0 0 1 6 0 V60 Z" fill="#FB471F"></path>
-        <path d="M79,58 V50 a3 3 0 0 1 6 0 V58 Z" fill="#FB471F"></path>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/basel.svg b/public/media/bingo/basel.svg
index 553fc0e30..45ad33fea 100644
--- a/public/media/bingo/basel.svg
+++ b/public/media/bingo/basel.svg
@@ -1,21 +1,76 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
   <rect width="120" height="120" fill="#1003A3"></rect>
-  <g>
-        <rect x="42" y="58" width="36" height="46" fill="#ffffff"></rect>
-        <polygon points="42,58 60,40 78,58" fill="#ffffff"></polygon>
-        <line x1="48" y1="54" x2="56" y2="44" stroke="#1003A3" stroke-width="1.6"></line>
-        <line x1="56" y1="56" x2="66" y2="44" stroke="#1003A3" stroke-width="1.6"></line>
-        <line x1="64" y1="56" x2="72" y2="48" stroke="#1003A3" stroke-width="1.6"></line>
-        <path d="M54,104 V90 a6 6 0 0 1 12 0 V104 Z" fill="#1003A3"></path>
-        <circle cx="60" cy="72" r="6" fill="#1003A3"></circle>
-        <circle cx="60" cy="72" r="2" fill="#ffffff"></circle>
-        <rect x="31" y="44" width="14" height="60" fill="#ffffff"></rect>
-        <polygon points="31,44 38,16 45,44" fill="#ffffff"></polygon>
-        <rect x="37" y="9" width="2" height="9" fill="#ffffff"></rect>
-        <rect x="75" y="42" width="14" height="62" fill="#ffffff"></rect>
-        <polygon points="75,42 82,12 89,42" fill="#ffffff"></polygon>
-        <rect x="81" y="5" width="2" height="9" fill="#ffffff"></rect>
-        <path d="M35,60 V52 a3 3 0 0 1 6 0 V60 Z" fill="#1003A3"></path>
-        <path d="M79,58 V50 a3 3 0 0 1 6 0 V58 Z" fill="#1003A3"></path>
-      </g>
+
+  
+  <rect x="44" y="82" width="32" height="38" fill="#ffffff"></rect>
+
+  
+  <polygon points="48,66 72,66 74,82 46,82" fill="#ffffff"></polygon>
+  <rect x="45" y="62.5" width="30" height="3.8" fill="#ffffff"></rect>
+
+  
+  
+  <rect x="41" y="58" width="4" height="14" fill="#ffffff"></rect>
+  <polygon points="39,64 43,49 47,64" fill="#ffffff"></polygon>
+  <rect x="42.3" y="45" width="1.4" height="5" fill="#ffffff"></rect>
+  <polygon points="40.1,58 38,57 40.1,55.4" fill="#ffffff"></polygon>
+  <polygon points="45.9,58 48,57 45.9,55.4" fill="#ffffff"></polygon>
+  
+  <rect x="75" y="56" width="4" height="16" fill="#ffffff"></rect>
+  <polygon points="73,64 77,46 81,64" fill="#ffffff"></polygon>
+  <rect x="76.3" y="42" width="1.4" height="5" fill="#ffffff"></rect>
+  <polygon points="74.1,57 72,56 74.1,54.4" fill="#ffffff"></polygon>
+  <polygon points="79.9,57 82,56 79.9,54.4" fill="#ffffff"></polygon>
+
+  
+  <polygon points="49,66 60,12 71,66" fill="#ffffff"></polygon>
+  
+  <polygon points="50.2,60 47,58.5 50.2,56.5" fill="#ffffff"></polygon>
+  <polygon points="51.85,52 48.65,50.5 51.85,48.5" fill="#ffffff"></polygon>
+  <polygon points="53.5,44 50.3,42.5 53.5,40.5" fill="#ffffff"></polygon>
+  <polygon points="55.1,36 51.9,34.5 55.1,32.5" fill="#ffffff"></polygon>
+  <polygon points="56.7,28 53.5,26.5 56.7,24.5" fill="#ffffff"></polygon>
+  <polygon points="58.4,20 55.2,18.5 58.4,16.5" fill="#ffffff"></polygon>
+  
+  <polygon points="69.78,60 73,58.5 69.78,56.5" fill="#ffffff"></polygon>
+  <polygon points="68.15,52 71.35,50.5 68.15,48.5" fill="#ffffff"></polygon>
+  <polygon points="66.52,44 69.72,42.5 66.52,40.5" fill="#ffffff"></polygon>
+  <polygon points="64.89,36 68.09,34.5 64.89,32.5" fill="#ffffff"></polygon>
+  <polygon points="63.26,28 66.46,26.5 63.26,24.5" fill="#ffffff"></polygon>
+  <polygon points="61.63,20 64.83,18.5 61.63,16.5" fill="#ffffff"></polygon>
+
+  
+  <rect x="59" y="4" width="2" height="9" fill="#ffffff"></rect>
+  <rect x="56" y="7" width="8" height="1.6" fill="#ffffff"></rect>
+  <polygon points="60,1.5 62,4 60,6.5 58,4" fill="#ffffff"></polygon>
+
+  
+  
+  <polygon points="60,55.4 62.6,58 60,60.6 57.4,58" fill="#1003A3"></polygon>
+  <polygon points="60,47.8 62.2,50 60,52.2 57.8,50" fill="#1003A3"></polygon>
+  <polygon points="60,40.1 61.9,42 60,43.9 58.1,42" fill="#1003A3"></polygon>
+  <polygon points="60,32.5 61.5,34 60,35.5 58.5,34" fill="#1003A3"></polygon>
+  <polygon points="60,24.8 61.2,26 60,27.2 58.8,26" fill="#1003A3"></polygon>
+
+  
+  <path d="M52,81 L52,73 L54,70 L56,73 L56,81 Z" fill="#1003A3"></path>
+  <path d="M58,81 L58,72 L60,69 L62,72 L62,81 Z" fill="#1003A3"></path>
+  <path d="M64,81 L64,73 L66,70 L68,73 L68,81 Z" fill="#1003A3"></path>
+
+  
+  <rect x="47" y="63" width="1.5" height="2.6" fill="#1003A3"></rect>
+  <rect x="51" y="63" width="1.5" height="2.6" fill="#1003A3"></rect>
+  <rect x="55" y="63" width="1.5" height="2.6" fill="#1003A3"></rect>
+  <rect x="59" y="63" width="1.5" height="2.6" fill="#1003A3"></rect>
+  <rect x="63" y="63" width="1.5" height="2.6" fill="#1003A3"></rect>
+  <rect x="67" y="63" width="1.5" height="2.6" fill="#1003A3"></rect>
+  <rect x="71" y="63" width="1.5" height="2.6" fill="#1003A3"></rect>
+
+  
+  <path d="M53,120 L53,93 L60,85 L67,93 L67,120 Z" fill="#1003A3"></path>
+  <rect x="59.2" y="93" width="1.6" height="27" fill="#ffffff"></rect>
+  <rect x="53" y="104" width="14" height="1.6" fill="#ffffff"></rect>
+  
+  <rect x="46.5" y="97" width="2.5" height="20" fill="#1003A3"></rect>
+  <rect x="71" y="97" width="2.5" height="20" fill="#1003A3"></rect>
 </svg>
\ No newline at end of file
diff --git a/public/media/bingo/bilbao-2.svg b/public/media/bingo/bilbao-2.svg
deleted file mode 100644
index 4d7e712aa..000000000
--- a/public/media/bingo/bilbao-2.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
-  <g>
-        <path d="M16,100 C16,84 30,80 46,82 C70,84 92,82 104,100 Z" fill="#ffffff"></path>
-        <path d="M30,100 C28,74 36,58 46,50 C52,64 50,84 52,100 Z" fill="#ffffff"></path>
-        <path d="M50,100 C48,56 58,34 68,24 C74,40 72,74 72,100 Z" fill="#ffffff"></path>
-        <path d="M70,100 C72,72 82,60 94,62 C98,76 94,90 100,100 Z" fill="#ffffff"></path>
-        <path d="M52,99 C50,60 58,38 67,27" fill="none" stroke="#FB471F" stroke-width="1.8"></path>
-        <path d="M51,99 C49,76 56,60 66,52" fill="none" stroke="#FB471F" stroke-width="1.8"></path>
-        <path d="M71,99 C73,74 82,63 93,63" fill="none" stroke="#FB471F" stroke-width="1.8"></path>
-        <rect x="16" y="100" width="88" height="4" fill="#ffffff"></rect>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/bilbao.svg b/public/media/bingo/bilbao.svg
index dbdc1a734..150581ce3 100644
--- a/public/media/bingo/bilbao.svg
+++ b/public/media/bingo/bilbao.svg
@@ -1,13 +1,18 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
   <rect width="120" height="120" fill="#1003A3"></rect>
-  <g>
-        <path d="M16,100 C16,84 30,80 46,82 C70,84 92,82 104,100 Z" fill="#ffffff"></path>
-        <path d="M30,100 C28,74 36,58 46,50 C52,64 50,84 52,100 Z" fill="#ffffff"></path>
-        <path d="M50,100 C48,56 58,34 68,24 C74,40 72,74 72,100 Z" fill="#ffffff"></path>
-        <path d="M70,100 C72,72 82,60 94,62 C98,76 94,90 100,100 Z" fill="#ffffff"></path>
-        <path d="M52,99 C50,60 58,38 67,27" fill="none" stroke="#1003A3" stroke-width="1.8"></path>
-        <path d="M51,99 C49,76 56,60 66,52" fill="none" stroke="#1003A3" stroke-width="1.8"></path>
-        <path d="M71,99 C73,74 82,63 93,63" fill="none" stroke="#1003A3" stroke-width="1.8"></path>
-        <rect x="16" y="100" width="88" height="4" fill="#ffffff"></rect>
-      </g>
+  <g fill="#FFFFFF">
+    <path d="M 13 80 C 13 72, 13 64, 16 61 C 25 58, 35 60, 45 63 C 49 65, 52 65, 54 64 C 55 55, 58 46, 63 43 C 67 41, 71 42, 74 45 C 76 47, 78 48, 80 49 C 82 47, 85 47, 88 49 C 89 51, 90 53, 91 54 C 93 53, 96 53, 98 55 C 100 57, 101 59, 102 60 C 103 62, 105 65, 105 72 L 105 80 L 13 80 Z"></path>
+    <rect x="15" y="80" width="90" height="4.2" rx="0.6"></rect>
+    <rect x="9" y="88" width="102" height="1.8" rx="0.9"></rect>
+  </g>
+  <g fill="none" stroke="#1003A3" stroke-width="1.3" stroke-linecap="round">
+    <path d="M 19 65 C 29 63, 40 65, 51 68"></path>
+    <path d="M 57 53 C 63 50, 70 51, 76 54"></path>
+    <path d="M 84 52 C 89 52, 94 54, 99 57"></path>
+  </g>
+  <g fill="#1003A3">
+    <rect x="62" y="67" width="1.4" height="13"></rect>
+    <rect x="68" y="67" width="1.4" height="13"></rect>
+    <rect x="74" y="67" width="1.4" height="13"></rect>
+  </g>
 </svg>
\ No newline at end of file
diff --git a/public/media/bingo/birmingham-2.svg b/public/media/bingo/birmingham-2.svg
deleted file mode 100644
index 8cf64d760..000000000
--- a/public/media/bingo/birmingham-2.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
-  <g>
-        <rect x="40" y="96" width="40" height="8" fill="#ffffff"></rect>
-        <ellipse cx="60" cy="60" rx="42" ry="33" fill="#ffffff"></ellipse>
-        <ellipse cx="44" cy="42" rx="16" ry="12" fill="#ffffff"></ellipse>
-        <g fill="#FB471F">
-          <circle cx="52" cy="38" r="2.3"></circle><circle cx="62" cy="36" r="2.3"></circle><circle cx="72" cy="40" r="2.3"></circle>
-          <circle cx="40" cy="46" r="2.3"></circle><circle cx="50" cy="48" r="2.3"></circle><circle cx="60" cy="46" r="2.3"></circle><circle cx="70" cy="48" r="2.3"></circle><circle cx="80" cy="48" r="2.3"></circle>
-          <circle cx="34" cy="56" r="2.3"></circle><circle cx="44" cy="58" r="2.3"></circle><circle cx="54" cy="56" r="2.3"></circle><circle cx="64" cy="58" r="2.3"></circle><circle cx="74" cy="56" r="2.3"></circle><circle cx="84" cy="58" r="2.3"></circle>
-          <circle cx="38" cy="68" r="2.3"></circle><circle cx="48" cy="66" r="2.3"></circle><circle cx="58" cy="68" r="2.3"></circle><circle cx="68" cy="66" r="2.3"></circle><circle cx="78" cy="68" r="2.3"></circle>
-          <circle cx="46" cy="78" r="2.3"></circle><circle cx="56" cy="78" r="2.3"></circle><circle cx="66" cy="78" r="2.3"></circle><circle cx="76" cy="78" r="2.3"></circle>
-        </g>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/birmingham.svg b/public/media/bingo/birmingham.svg
index adbff9edf..37afb06f9 100644
--- a/public/media/bingo/birmingham.svg
+++ b/public/media/bingo/birmingham.svg
@@ -1,15 +1,33 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
   <rect width="120" height="120" fill="#1003A3"></rect>
-  <g>
-        <rect x="40" y="96" width="40" height="8" fill="#ffffff"></rect>
-        <ellipse cx="60" cy="60" rx="42" ry="33" fill="#ffffff"></ellipse>
-        <ellipse cx="44" cy="42" rx="16" ry="12" fill="#ffffff"></ellipse>
-        <g fill="#1003A3">
-          <circle cx="52" cy="38" r="2.3"></circle><circle cx="62" cy="36" r="2.3"></circle><circle cx="72" cy="40" r="2.3"></circle>
-          <circle cx="40" cy="46" r="2.3"></circle><circle cx="50" cy="48" r="2.3"></circle><circle cx="60" cy="46" r="2.3"></circle><circle cx="70" cy="48" r="2.3"></circle><circle cx="80" cy="48" r="2.3"></circle>
-          <circle cx="34" cy="56" r="2.3"></circle><circle cx="44" cy="58" r="2.3"></circle><circle cx="54" cy="56" r="2.3"></circle><circle cx="64" cy="58" r="2.3"></circle><circle cx="74" cy="56" r="2.3"></circle><circle cx="84" cy="58" r="2.3"></circle>
-          <circle cx="38" cy="68" r="2.3"></circle><circle cx="48" cy="66" r="2.3"></circle><circle cx="58" cy="68" r="2.3"></circle><circle cx="68" cy="66" r="2.3"></circle><circle cx="78" cy="68" r="2.3"></circle>
-          <circle cx="46" cy="78" r="2.3"></circle><circle cx="56" cy="78" r="2.3"></circle><circle cx="66" cy="78" r="2.3"></circle><circle cx="76" cy="78" r="2.3"></circle>
-        </g>
-      </g>
+
+  <defs>
+    
+    <pattern id="discs" width="5" height="8.66" patternUnits="userSpaceOnUse">
+      <circle cx="2.5" cy="2.16" r="1.95" fill="#ffffff"></circle>
+      <circle cx="0" cy="6.49" r="1.95" fill="#ffffff"></circle>
+      <circle cx="5" cy="6.49" r="1.95" fill="#ffffff"></circle>
+    </pattern>
+    
+    <clipPath id="blob">
+      <path d="M42,23 C64,13 90,19 101,38 C112,51 113,71 105,86 C99,98 84,104 69,104 C60,104 53,105 45,102 C33,98 23,92 19,82 C14,70 12,54 20,44 C27,34 31,29 42,23 Z"></path>
+    </clipPath>
+  </defs>
+
+  
+  <path d="M0,50 C25,44 50,46 76,56" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round"></path>
+  <path d="M0,45 C25,39 50,41 78,51" fill="none" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-dasharray="0.1 3.4"></path>
+
+  
+  <g clip-path="url(#blob)">
+    <rect x="12" y="10" width="102" height="98" fill="url(#discs)"></rect>
+  </g>
+
+  
+  
+  <ellipse cx="70" cy="42" rx="9" ry="6.5" fill="#1003A3" stroke="#ffffff" stroke-width="1.6"></ellipse>
+  
+  <ellipse cx="62" cy="74" rx="24" ry="7.5" fill="#1003A3" stroke="#ffffff" stroke-width="1.8"></ellipse>
+  
+  <ellipse cx="58" cy="99" rx="15" ry="5.5" fill="#1003A3" stroke="#ffffff" stroke-width="1.6"></ellipse>
 </svg>
\ No newline at end of file
diff --git a/public/media/bingo/charleroi-2.svg b/public/media/bingo/charleroi-2.svg
deleted file mode 100644
index 9ac634a07..000000000
--- a/public/media/bingo/charleroi-2.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
-  <g>
-        <rect x="40" y="104" width="40" height="6" fill="#ffffff"></rect>
-        <rect x="44" y="98" width="32" height="6" fill="#ffffff"></rect>
-        <polygon points="49,98 51,48 69,48 71,98" fill="#ffffff"></polygon>
-        <rect x="54" y="54" width="1.6" height="40" fill="#FB471F"></rect>
-        <rect x="64.4" y="54" width="1.6" height="40" fill="#FB471F"></rect>
-        <rect x="46" y="42" width="28" height="6" fill="#ffffff"></rect>
-        <circle cx="60" cy="36" r="5" fill="#ffffff"></circle>
-        <circle cx="60" cy="36" r="3.4" fill="#FB471F"></circle>
-        <rect x="59.3" y="33" width="1.2" height="4" fill="#ffffff"></rect>
-        <rect x="60" y="35.3" width="3" height="1.2" fill="#ffffff"></rect>
-        <rect x="51" y="30" width="18" height="6" fill="#ffffff"></rect>
-        <polygon points="51,30 60,12 69,30" fill="#ffffff"></polygon>
-        <rect x="58.8" y="4" width="2.4" height="9" fill="#ffffff"></rect>
-        <circle cx="60" cy="4" r="2.4" fill="#ffffff"></circle>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/dublin-2.svg b/public/media/bingo/dublin-2.svg
deleted file mode 100644
index 72259ef24..000000000
--- a/public/media/bingo/dublin-2.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
-  <g>
-        <rect x="38" y="98" width="44" height="6" fill="#ffffff"></rect>
-        <rect x="42" y="92" width="36" height="6" fill="#ffffff"></rect>
-        <rect x="44" y="64" width="6" height="28" fill="#ffffff"></rect>
-        <rect x="70" y="64" width="6" height="28" fill="#ffffff"></rect>
-        <path d="M52,92 V74 a8 8 0 0 1 16 0 V92 Z" fill="#FB471F"></path>
-        <rect x="40" y="58" width="40" height="6" fill="#ffffff"></rect>
-        <circle cx="45" cy="55" r="2.4" fill="#ffffff"></circle>
-        <circle cx="75" cy="55" r="2.4" fill="#ffffff"></circle>
-        <path d="M47,58 Q47,46 60,46 Q73,46 73,58 Z" fill="#ffffff"></path>
-        <rect x="52" y="34" width="16" height="12" fill="#ffffff"></rect>
-        <path d="M55,46 V40 a4 4 0 0 1 10 0 V46 Z" fill="#FB471F"></path>
-        <path d="M52,34 Q52,24 60,24 Q68,24 68,34 Z" fill="#ffffff"></path>
-        <rect x="56" y="16" width="8" height="8" fill="#ffffff"></rect>
-        <rect x="59" y="8" width="2" height="9" fill="#ffffff"></rect>
-        <circle cx="60" cy="8" r="2" fill="#ffffff"></circle>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/dublin.svg b/public/media/bingo/dublin.svg
index 0cb4a403f..fd258b5af 100644
--- a/public/media/bingo/dublin.svg
+++ b/public/media/bingo/dublin.svg
@@ -1,20 +1,49 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
   <rect width="120" height="120" fill="#1003A3"></rect>
-  <g>
-        <rect x="38" y="98" width="44" height="6" fill="#ffffff"></rect>
-        <rect x="42" y="92" width="36" height="6" fill="#ffffff"></rect>
-        <rect x="44" y="64" width="6" height="28" fill="#ffffff"></rect>
-        <rect x="70" y="64" width="6" height="28" fill="#ffffff"></rect>
-        <path d="M52,92 V74 a8 8 0 0 1 16 0 V92 Z" fill="#1003A3"></path>
-        <rect x="40" y="58" width="40" height="6" fill="#ffffff"></rect>
-        <circle cx="45" cy="55" r="2.4" fill="#ffffff"></circle>
-        <circle cx="75" cy="55" r="2.4" fill="#ffffff"></circle>
-        <path d="M47,58 Q47,46 60,46 Q73,46 73,58 Z" fill="#ffffff"></path>
-        <rect x="52" y="34" width="16" height="12" fill="#ffffff"></rect>
-        <path d="M55,46 V40 a4 4 0 0 1 10 0 V46 Z" fill="#1003A3"></path>
-        <path d="M52,34 Q52,24 60,24 Q68,24 68,34 Z" fill="#ffffff"></path>
-        <rect x="56" y="16" width="8" height="8" fill="#ffffff"></rect>
-        <rect x="59" y="8" width="2" height="9" fill="#ffffff"></rect>
-        <circle cx="60" cy="8" r="2" fill="#ffffff"></circle>
-      </g>
+  <g fill="#ffffff" stroke="none">
+    
+    <path d="M59.1,6 h1.8 v2.6 h2.2 v1.6 h-2.2 v6 h-1.8 v-6 h-2.2 v-1.6 h2.2 Z"></path>
+    <circle cx="60" cy="16.2" r="1.5"></circle>
+    
+    <path d="M47,40 C44,32 49,21 60,18.5 C71,21 76,32 73,40 Z"></path>
+    
+    <path d="M49.5,37 Q60,32.5 70.5,37" fill="none" stroke="#1003A3" stroke-width="1"></path>
+    <path d="M51.5,32 Q60,28 68.5,32" fill="none" stroke="#1003A3" stroke-width="1"></path>
+    <path d="M54,27 Q60,24 66,27" fill="none" stroke="#1003A3" stroke-width="1"></path>
+    
+    <rect x="45" y="40" width="30" height="2.5"></rect>
+    
+    <rect x="45.5" y="42.5" width="29" height="8"></rect>
+    <path d="M48,50.5 V48 a2,2 0 0 1 4,0 V50.5 Z" fill="#1003A3"></path>
+    <path d="M58,50.5 V48 a2,2 0 0 1 4,0 V50.5 Z" fill="#1003A3"></path>
+    <path d="M68,50.5 V48 a2,2 0 0 1 4,0 V50.5 Z" fill="#1003A3"></path>
+    
+    <rect x="42.5" y="52.5" width="35" height="2.5"></rect>
+    
+    <path d="M47,78 L47,57 L51,54.5 L69,54.5 L73,57 L73,78 Z"></path>
+    
+    <path d="M50.5,76 V62 Q50.5,56.5 53.5,56.5 Q56.5,56.5 56.5,62 V76 Z" fill="#1003A3"></path>
+    <path d="M63.5,76 V62 Q63.5,56.5 66.5,56.5 Q69.5,56.5 69.5,62 V76 Z" fill="#1003A3"></path>
+    <rect x="47.8" y="55.5" width="0.9" height="22.5" fill="#1003A3"></rect>
+    <rect x="71.3" y="55.5" width="0.9" height="22.5" fill="#1003A3"></rect>
+    
+    <rect x="42" y="78" width="36" height="3.5"></rect>
+    
+    <path d="M38.5,90 V83 Q38.5,80 41,80 Q43.5,80 43.5,83 V90 Z"></path>
+    <path d="M76.5,90 V83 Q76.5,80 79,80 Q81.5,80 81.5,83 V90 Z"></path>
+    
+    <path d="M44,90 C44,82 50,80 60,80 C70,80 76,82 76,90 Z"></path>
+    
+    <rect x="38" y="90" width="44" height="2.5"></rect>
+    
+    <rect x="35" y="92" width="50" height="3"></rect>
+    
+    <rect x="37" y="95" width="46" height="15"></rect>
+    <rect x="44" y="96" width="0.9" height="12" fill="#1003A3"></rect>
+    <rect x="75.1" y="96" width="0.9" height="12" fill="#1003A3"></rect>
+    
+    <path d="M53,110 V102 Q53,94.5 60,94.5 Q67,94.5 67,102 V110 Z" fill="#1003A3"></path>
+    
+    <rect x="34" y="108" width="52" height="4"></rect>
+  </g>
 </svg>
\ No newline at end of file
diff --git a/public/media/bingo/edinburgh.svg b/public/media/bingo/edinburgh.svg
index 8de469018..431f8443c 100644
--- a/public/media/bingo/edinburgh.svg
+++ b/public/media/bingo/edinburgh.svg
@@ -1,24 +1,68 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
   <rect width="120" height="120" fill="#1003A3"></rect>
-  <g>
-        <polygon points="14,108 14,98 26,88 38,94 50,86 64,92 78,84 92,92 106,94 106,108" fill="#ffffff"></polygon>
-        <rect x="34" y="62" width="52" height="24" fill="#ffffff"></rect>
-        <rect x="34" y="58" width="5" height="4" fill="#ffffff"></rect>
-        <rect x="44" y="58" width="5" height="4" fill="#ffffff"></rect>
-        <rect x="54" y="58" width="5" height="4" fill="#ffffff"></rect>
-        <rect x="64" y="58" width="5" height="4" fill="#ffffff"></rect>
-        <rect x="74" y="58" width="5" height="4" fill="#ffffff"></rect>
-        <rect x="33" y="46" width="14" height="40" fill="#ffffff"></rect>
-        <rect x="33" y="42" width="4" height="4" fill="#ffffff"></rect>
-        <rect x="40" y="42" width="4" height="4" fill="#ffffff"></rect>
-        <rect x="68" y="40" width="16" height="46" fill="#ffffff"></rect>
-        <rect x="68" y="36" width="4.5" height="4" fill="#ffffff"></rect>
-        <rect x="79.5" y="36" width="4.5" height="4" fill="#ffffff"></rect>
-        <rect x="38" y="52" width="3.5" height="8" rx="1.5" fill="#1003A3"></rect>
-        <rect x="52" y="68" width="3.5" height="9" rx="1.5" fill="#1003A3"></rect>
-        <rect x="63" y="68" width="3.5" height="9" rx="1.5" fill="#1003A3"></rect>
-        <rect x="74" y="50" width="3.5" height="9" rx="1.5" fill="#1003A3"></rect>
-        <rect x="83" y="22" width="1.6" height="14" fill="#ffffff"></rect>
-        <polygon points="84.6,22 94,25.5 84.6,29" fill="#ffffff"></polygon>
-      </g>
+
+  
+  <polygon fill="#ffffff" points="15,66 92,66 92,73 110,73 117,96 3,96 8,66"></polygon>
+
+  
+  <polygon fill="#ffffff" points="0,120 0,103 10,99 30,99 36,94 64,94 70,99 108,99 120,103 120,120"></polygon>
+
+  
+  <rect x="14" y="44" width="24" height="22" fill="#ffffff"></rect>
+  <polygon fill="#ffffff" points="11,45 26,27 41,45"></polygon>
+  <rect x="22" y="31" width="3" height="6" fill="#ffffff"></rect>
+
+  
+  <rect x="38" y="48" width="32" height="18" fill="#ffffff"></rect>
+  <polygon fill="#ffffff" points="39,49 43,40 47,49"></polygon>
+  <polygon fill="#ffffff" points="47,49 51,40 55,49"></polygon>
+  <polygon fill="#ffffff" points="55,49 59,40 63,49"></polygon>
+  <polygon fill="#ffffff" points="63,49 67,40 71,49"></polygon>
+
+  
+  <rect x="70" y="40" width="22" height="26" fill="#ffffff"></rect>
+  <polygon fill="#ffffff" points="67,41 81,26 95,41"></polygon>
+  <rect x="76" y="19" width="3" height="11" fill="#ffffff"></rect>
+  <rect x="83" y="19" width="3" height="11" fill="#ffffff"></rect>
+
+  
+  <rect x="94" y="56" width="14" height="17" fill="#ffffff"></rect>
+  <polygon fill="#ffffff" points="91,57 101,46 111,57"></polygon>
+  <rect x="103" y="49" width="3" height="6" fill="#ffffff"></rect>
+
+  
+  
+  <rect x="18" y="50" width="3" height="5" fill="#1003A3"></rect>
+  <rect x="24" y="50" width="3" height="5" fill="#1003A3"></rect>
+  <rect x="30" y="50" width="3" height="5" fill="#1003A3"></rect>
+  <rect x="18" y="58" width="3" height="5" fill="#1003A3"></rect>
+  <rect x="24" y="58" width="3" height="5" fill="#1003A3"></rect>
+  <rect x="30" y="58" width="3" height="5" fill="#1003A3"></rect>
+
+  
+  <rect x="41" y="53" width="3" height="4" fill="#1003A3"></rect>
+  <rect x="47" y="53" width="3" height="4" fill="#1003A3"></rect>
+  <rect x="53" y="53" width="3" height="4" fill="#1003A3"></rect>
+  <rect x="59" y="53" width="3" height="4" fill="#1003A3"></rect>
+  <rect x="65" y="53" width="3" height="4" fill="#1003A3"></rect>
+  <rect x="41" y="60" width="3" height="4" fill="#1003A3"></rect>
+  <rect x="47" y="60" width="3" height="4" fill="#1003A3"></rect>
+  <rect x="53" y="60" width="3" height="4" fill="#1003A3"></rect>
+  <rect x="59" y="60" width="3" height="4" fill="#1003A3"></rect>
+  <rect x="65" y="60" width="3" height="4" fill="#1003A3"></rect>
+
+  
+  <rect x="73" y="45" width="3" height="5" fill="#1003A3"></rect>
+  <rect x="80" y="45" width="3" height="5" fill="#1003A3"></rect>
+  <rect x="87" y="45" width="3" height="5" fill="#1003A3"></rect>
+  <rect x="73" y="54" width="3" height="5" fill="#1003A3"></rect>
+  <rect x="87" y="54" width="3" height="5" fill="#1003A3"></rect>
+  
+  <path fill="#1003A3" d="M78,66 V62 a4,4 0 0 1 8,0 V66 Z"></path>
+
+  
+  <rect x="97" y="60" width="3" height="4" fill="#1003A3"></rect>
+  <rect x="102" y="60" width="3" height="4" fill="#1003A3"></rect>
+  <rect x="97" y="66" width="3" height="4" fill="#1003A3"></rect>
+  <rect x="102" y="66" width="3" height="4" fill="#1003A3"></rect>
 </svg>
\ No newline at end of file
diff --git a/public/media/bingo/florence-2.svg b/public/media/bingo/florence-2.svg
deleted file mode 100644
index 3f8dee76f..000000000
--- a/public/media/bingo/florence-2.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
-  <g>
-        <rect x="38" y="86" width="68" height="18" fill="#ffffff"></rect>
-        <rect x="46" y="92" width="6" height="12" fill="#FB471F"></rect>
-        <rect x="92" y="92" width="6" height="12" fill="#FB471F"></rect>
-        <rect x="22" y="38" width="16" height="48" fill="#ffffff"></rect>
-        <rect x="19" y="33" width="22" height="5" fill="#ffffff"></rect>
-        <rect x="27" y="46" width="6" height="7" rx="1" fill="#FB471F"></rect>
-        <rect x="27" y="58" width="6" height="7" rx="1" fill="#FB471F"></rect>
-        <rect x="27" y="70" width="6" height="7" rx="1" fill="#FB471F"></rect>
-        <rect x="56" y="60" width="42" height="26" fill="#ffffff"></rect>
-        <circle cx="65" cy="71" r="3" fill="#FB471F"></circle>
-        <circle cx="77" cy="71" r="3" fill="#FB471F"></circle>
-        <circle cx="89" cy="71" r="3" fill="#FB471F"></circle>
-        <path d="M56,60 Q56,36 77,26 Q98,36 98,60 Z" fill="#ffffff"></path>
-        <rect x="66" y="33" width="1.8" height="27" fill="#FB471F"></rect>
-        <rect x="76.2" y="29" width="1.8" height="31" fill="#FB471F"></rect>
-        <rect x="86.4" y="33" width="1.8" height="27" fill="#FB471F"></rect>
-        <rect x="72" y="18" width="10" height="10" fill="#ffffff"></rect>
-        <circle cx="77" cy="15" r="3" fill="#ffffff"></circle>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/florence-3.svg b/public/media/bingo/florence-3.svg
deleted file mode 100644
index a10073640..000000000
--- a/public/media/bingo/florence-3.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#008624"></rect>
-  <g>
-        <rect x="38" y="86" width="68" height="18" fill="#ffffff"></rect>
-        <rect x="46" y="92" width="6" height="12" fill="#008624"></rect>
-        <rect x="92" y="92" width="6" height="12" fill="#008624"></rect>
-        <rect x="22" y="38" width="16" height="48" fill="#ffffff"></rect>
-        <rect x="19" y="33" width="22" height="5" fill="#ffffff"></rect>
-        <rect x="27" y="46" width="6" height="7" rx="1" fill="#008624"></rect>
-        <rect x="27" y="58" width="6" height="7" rx="1" fill="#008624"></rect>
-        <rect x="27" y="70" width="6" height="7" rx="1" fill="#008624"></rect>
-        <rect x="56" y="60" width="42" height="26" fill="#ffffff"></rect>
-        <circle cx="65" cy="71" r="3" fill="#008624"></circle>
-        <circle cx="77" cy="71" r="3" fill="#008624"></circle>
-        <circle cx="89" cy="71" r="3" fill="#008624"></circle>
-        <path d="M56,60 Q56,36 77,26 Q98,36 98,60 Z" fill="#ffffff"></path>
-        <rect x="66" y="33" width="1.8" height="27" fill="#008624"></rect>
-        <rect x="76.2" y="29" width="1.8" height="31" fill="#008624"></rect>
-        <rect x="86.4" y="33" width="1.8" height="27" fill="#008624"></rect>
-        <rect x="72" y="18" width="10" height="10" fill="#ffffff"></rect>
-        <circle cx="77" cy="15" r="3" fill="#ffffff"></circle>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/florence.svg b/public/media/bingo/florence.svg
index dbb199691..2cf2f11e0 100644
--- a/public/media/bingo/florence.svg
+++ b/public/media/bingo/florence.svg
@@ -13,11 +13,15 @@
         <circle cx="65" cy="71" r="3" fill="#1003A3"></circle>
         <circle cx="77" cy="71" r="3" fill="#1003A3"></circle>
         <circle cx="89" cy="71" r="3" fill="#1003A3"></circle>
-        <path d="M56,60 Q56,36 77,26 Q98,36 98,60 Z" fill="#ffffff"></path>
-        <rect x="66" y="33" width="1.8" height="27" fill="#1003A3"></rect>
-        <rect x="76.2" y="29" width="1.8" height="31" fill="#1003A3"></rect>
-        <rect x="86.4" y="33" width="1.8" height="27" fill="#1003A3"></rect>
-        <rect x="72" y="18" width="10" height="10" fill="#ffffff"></rect>
-        <circle cx="77" cy="15" r="3" fill="#ffffff"></circle>
+        <path d="M56,60 C57,44 73,33 77,26 C81,33 97,44 98,60 Z" fill="#ffffff"></path>
+        <rect x="76.1" y="28" width="1.8" height="32" fill="#1003A3"></rect>
+        <line x1="65" y1="59" x2="73.5" y2="31" stroke="#1003A3" stroke-width="1.8"></line>
+        <line x1="89" y1="59" x2="80.5" y2="31" stroke="#1003A3" stroke-width="1.8"></line>
+        <rect x="73" y="18" width="8" height="8" fill="#ffffff"></rect>
+        <rect x="76.4" y="19.5" width="1.2" height="6.5" fill="#1003A3"></rect>
+        <path d="M71.5,18 L82.5,18 L77,11 Z" fill="#ffffff"></path>
+        <circle cx="77" cy="9.3" r="1.7" fill="#ffffff"></circle>
+        <rect x="76.4" y="4.8" width="1.2" height="4.5" fill="#ffffff"></rect>
+        <rect x="74.6" y="6.2" width="4.8" height="1.2" fill="#ffffff"></rect>
       </g>
 </svg>
\ No newline at end of file
diff --git a/public/media/bingo/geneva-2.svg b/public/media/bingo/geneva-2.svg
deleted file mode 100644
index 00c79fe53..000000000
--- a/public/media/bingo/geneva-2.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
-  <g>
-        <rect x="34" y="102" width="52" height="6" fill="#ffffff"></rect>
-        <rect x="39" y="96" width="42" height="6" fill="#ffffff"></rect>
-        <rect x="44" y="90" width="32" height="6" fill="#ffffff"></rect>
-        <rect x="45" y="64" width="4" height="26" fill="#ffffff"></rect>
-        <rect x="55" y="64" width="4" height="26" fill="#ffffff"></rect>
-        <rect x="61" y="64" width="4" height="26" fill="#ffffff"></rect>
-        <rect x="71" y="64" width="4" height="26" fill="#ffffff"></rect>
-        <path d="M49,90 V72 Q52,66 55,72 V90 Z" fill="#FB471F"></path>
-        <path d="M65,90 V72 Q68,66 71,72 V90 Z" fill="#FB471F"></path>
-        <rect x="43" y="58" width="34" height="6" fill="#ffffff"></rect>
-        <polygon points="43,58 60,32 77,58" fill="#ffffff"></polygon>
-        <polygon points="40,58 44,46 48,58" fill="#ffffff"></polygon>
-        <polygon points="72,58 76,46 80,58" fill="#ffffff"></polygon>
-        <polygon points="54,42 60,14 66,42" fill="#ffffff"></polygon>
-        <rect x="58.8" y="9" width="2.4" height="7" fill="#ffffff"></rect>
-        <circle cx="60" cy="9" r="2.2" fill="#ffffff"></circle>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/geneva.svg b/public/media/bingo/geneva.svg
index df381867c..af78fff58 100644
--- a/public/media/bingo/geneva.svg
+++ b/public/media/bingo/geneva.svg
@@ -1,21 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#1003A3"></rect>
-  <g>
-        <rect x="34" y="102" width="52" height="6" fill="#ffffff"></rect>
-        <rect x="39" y="96" width="42" height="6" fill="#ffffff"></rect>
-        <rect x="44" y="90" width="32" height="6" fill="#ffffff"></rect>
-        <rect x="45" y="64" width="4" height="26" fill="#ffffff"></rect>
-        <rect x="55" y="64" width="4" height="26" fill="#ffffff"></rect>
-        <rect x="61" y="64" width="4" height="26" fill="#ffffff"></rect>
-        <rect x="71" y="64" width="4" height="26" fill="#ffffff"></rect>
-        <path d="M49,90 V72 Q52,66 55,72 V90 Z" fill="#1003A3"></path>
-        <path d="M65,90 V72 Q68,66 71,72 V90 Z" fill="#1003A3"></path>
-        <rect x="43" y="58" width="34" height="6" fill="#ffffff"></rect>
-        <polygon points="43,58 60,32 77,58" fill="#ffffff"></polygon>
-        <polygon points="40,58 44,46 48,58" fill="#ffffff"></polygon>
-        <polygon points="72,58 76,46 80,58" fill="#ffffff"></polygon>
-        <polygon points="54,42 60,14 66,42" fill="#ffffff"></polygon>
-        <rect x="58.8" y="9" width="2.4" height="7" fill="#ffffff"></rect>
-        <circle cx="60" cy="9" r="2.2" fill="#ffffff"></circle>
-      </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 120 120" shape-rendering="geometricPrecision">
+  <defs>
+    <clipPath id="domeClip" clipPathUnits="userSpaceOnUse">
+      <rect x="0" y="0" width="120" height="99.69"></rect>
+    </clipPath>
+  </defs>
+  <rect x="0" y="0" width="120" height="120" fill="#1003A3"></rect>
+  <g clip-path="url(#domeClip)">
+    <ellipse cx="60" cy="77.01" rx="54" ry="56.7" fill="#ffffff"></ellipse>
+    <ellipse cx="60" cy="77.01" rx="39.96" ry="56.7" fill="none" stroke="#1003A3" stroke-width="5"></ellipse>
+    <ellipse cx="60" cy="77.01" rx="21.6" ry="56.7" fill="none" stroke="#1003A3" stroke-width="5"></ellipse>
+    <line x1="60" y1="20.31" x2="60" y2="133.71" stroke="#1003A3" stroke-width="5"></line>
+  </g>
 </svg>
\ No newline at end of file
diff --git a/public/media/bingo/gothenburg-2.svg b/public/media/bingo/gothenburg-2.svg
deleted file mode 100644
index b6e6a5958..000000000
--- a/public/media/bingo/gothenburg-2.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
-  <g>
-        <polygon points="42,104 42,42 68,32 68,104" fill="#ffffff"></polygon>
-        <rect x="42" y="50" width="26" height="2.4" fill="#FB471F"></rect>
-        <rect x="42" y="62" width="26" height="2.4" fill="#FB471F"></rect>
-        <rect x="42" y="74" width="26" height="2.4" fill="#FB471F"></rect>
-        <rect x="42" y="86" width="26" height="2.4" fill="#FB471F"></rect>
-        <rect x="50" y="94" width="10" height="10" fill="#FB471F"></rect>
-        <rect x="80" y="16" width="2.6" height="88" fill="#ffffff"></rect>
-        <rect x="68" y="40" width="14" height="2.4" fill="#ffffff"></rect>
-        <rect x="74" y="24" width="8.6" height="2.2" fill="#ffffff"></rect>
-        <rect x="74" y="58" width="8.6" height="2.2" fill="#ffffff"></rect>
-        <rect x="74" y="78" width="8.6" height="2.2" fill="#ffffff"></rect>
-        <polygon points="80,16 86,28 80,28" fill="#ffffff"></polygon>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/gothenburg.svg b/public/media/bingo/gothenburg.svg
index 86601934b..8e7c56a89 100644
--- a/public/media/bingo/gothenburg.svg
+++ b/public/media/bingo/gothenburg.svg
@@ -1,17 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 120 120" role="img" aria-label="Feskekôrka — Gothenburg Fish Church">
+  <title>Feskekôrka</title>
   <rect width="120" height="120" fill="#1003A3"></rect>
-  <g>
-        <polygon points="42,104 42,42 68,32 68,104" fill="#ffffff"></polygon>
-        <rect x="42" y="50" width="26" height="2.4" fill="#1003A3"></rect>
-        <rect x="42" y="62" width="26" height="2.4" fill="#1003A3"></rect>
-        <rect x="42" y="74" width="26" height="2.4" fill="#1003A3"></rect>
-        <rect x="42" y="86" width="26" height="2.4" fill="#1003A3"></rect>
-        <rect x="50" y="94" width="10" height="10" fill="#1003A3"></rect>
-        <rect x="80" y="16" width="2.6" height="88" fill="#ffffff"></rect>
-        <rect x="68" y="40" width="14" height="2.4" fill="#ffffff"></rect>
-        <rect x="74" y="24" width="8.6" height="2.2" fill="#ffffff"></rect>
-        <rect x="74" y="58" width="8.6" height="2.2" fill="#ffffff"></rect>
-        <rect x="74" y="78" width="8.6" height="2.2" fill="#ffffff"></rect>
-        <polygon points="80,16 86,28 80,28" fill="#ffffff"></polygon>
-      </g>
+  <path d="M14 43L23.2 25L32.4 43L41.6 25L50.8 43L60 25L69.2 43L78.4 25L87.6 43L96.8 25L106 43L106 95L14 95ZM19.2 87L19.2 63A8 8 0 0 1 23.2 56.07A8 8 0 0 1 27.2 63L27.2 87ZM37.6 87L37.6 63A8 8 0 0 1 41.6 56.07A8 8 0 0 1 45.6 63L45.6 87ZM56 87L56 63A8 8 0 0 1 60 56.07A8 8 0 0 1 64 63L64 87ZM74.4 87L74.4 63A8 8 0 0 1 78.4 56.07A8 8 0 0 1 82.4 63L82.4 87ZM92.8 87L92.8 63A8 8 0 0 1 96.8 56.07A8 8 0 0 1 100.8 63L100.8 87Z" fill="#ffffff" fill-rule="evenodd"></path>
 </svg>
\ No newline at end of file
diff --git a/public/media/bingo/krakow-2.svg b/public/media/bingo/krakow-2.svg
deleted file mode 100644
index 2ab445c6c..000000000
--- a/public/media/bingo/krakow-2.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
-  <g>
-        <path d="M26,92 C16,90 12,80 18,72 C22,67 28,68 29,74 C25,73 23,79 30,80 C28,84 31,88 38,88 Z" fill="#ffffff"></path>
-        <path d="M30,90 C24,74 30,60 48,58 C62,56 70,60 74,66 C78,72 76,82 70,86 C66,89 60,90 52,90 Z" fill="#ffffff"></path>
-        <path d="M52,64 C54,52 62,44 78,42 C82,41 86,42 88,44 L86,52 C74,52 66,58 64,70 Z" fill="#ffffff"></path>
-        <path d="M84,40 C88,33 96,30 104,32 C108,33 108,38 105,42 C108,44 107,49 102,49 C99,53 92,54 86,51 C83,49 82,44 84,40 Z" fill="#ffffff"></path>
-        <polygon points="86,40 82,30 92,37" fill="#ffffff"></polygon>
-        <polygon points="92,38 90,28 98,35" fill="#ffffff"></polygon>
-        <circle cx="96" cy="40" r="1.8" fill="#FB471F"></circle>
-        <path d="M101,47 C106,47 110,49 110,52 C107,52 109,55 113,55 C110,58 105,57 102,54 Z" fill="#ffffff"></path>
-        <path d="M44,58 C46,42 58,32 72,32 L64,46 L76,44 L66,54 C58,57 50,58 44,58 Z" fill="#ffffff"></path>
-        <polygon points="40,56 43,49 47,56" fill="#ffffff"></polygon>
-        <polygon points="47,57 50,50 54,57" fill="#ffffff"></polygon>
-        <polygon points="54,60 57,54 61,60" fill="#ffffff"></polygon>
-        <path d="M40,86 L42,100 L49,100 L47,86 Z" fill="#ffffff"></path>
-        <path d="M58,86 L60,100 L67,100 L65,86 Z" fill="#ffffff"></path>
-        <polygon points="42,100 49,100 50,104 41,104" fill="#ffffff"></polygon>
-        <polygon points="60,100 67,100 68,104 59,104" fill="#ffffff"></polygon>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/krakow.svg b/public/media/bingo/krakow.svg
index 055dd455f..480bed6d6 100644
--- a/public/media/bingo/krakow.svg
+++ b/public/media/bingo/krakow.svg
@@ -1,21 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 120 120">
   <rect width="120" height="120" fill="#1003A3"></rect>
-  <g>
-        <path d="M26,92 C16,90 12,80 18,72 C22,67 28,68 29,74 C25,73 23,79 30,80 C28,84 31,88 38,88 Z" fill="#ffffff"></path>
-        <path d="M30,90 C24,74 30,60 48,58 C62,56 70,60 74,66 C78,72 76,82 70,86 C66,89 60,90 52,90 Z" fill="#ffffff"></path>
-        <path d="M52,64 C54,52 62,44 78,42 C82,41 86,42 88,44 L86,52 C74,52 66,58 64,70 Z" fill="#ffffff"></path>
-        <path d="M84,40 C88,33 96,30 104,32 C108,33 108,38 105,42 C108,44 107,49 102,49 C99,53 92,54 86,51 C83,49 82,44 84,40 Z" fill="#ffffff"></path>
-        <polygon points="86,40 82,30 92,37" fill="#ffffff"></polygon>
-        <polygon points="92,38 90,28 98,35" fill="#ffffff"></polygon>
-        <circle cx="96" cy="40" r="1.8" fill="#1003A3"></circle>
-        <path d="M101,47 C106,47 110,49 110,52 C107,52 109,55 113,55 C110,58 105,57 102,54 Z" fill="#ffffff"></path>
-        <path d="M44,58 C46,42 58,32 72,32 L64,46 L76,44 L66,54 C58,57 50,58 44,58 Z" fill="#ffffff"></path>
-        <polygon points="40,56 43,49 47,56" fill="#ffffff"></polygon>
-        <polygon points="47,57 50,50 54,57" fill="#ffffff"></polygon>
-        <polygon points="54,60 57,54 61,60" fill="#ffffff"></polygon>
-        <path d="M40,86 L42,100 L49,100 L47,86 Z" fill="#ffffff"></path>
-        <path d="M58,86 L60,100 L67,100 L65,86 Z" fill="#ffffff"></path>
-        <polygon points="42,100 49,100 50,104 41,104" fill="#ffffff"></polygon>
-        <polygon points="60,100 67,100 68,104 59,104" fill="#ffffff"></polygon>
-      </g>
+  <g transform="translate(35.7,10) scale(0.254) translate(-158.45,-42.75)">
+    <path d="m 158.45,434.06 4.31,-8.88 4.14,-8.01 h 6.9 l -2.76,-11.59 -4.69,-15.73 1.93,-17.11 3.04,-10.77 v -7.73 l 5.55,-9.11 v -10.77 l 1.9,-9.39 3.59,-2.21 1.66,-2.48 4.14,-4.14 6.07,-20.98 h 6.07 l 3.31,-1.38 2.21,-13.53 v -4.14 l -11.32,-8.56 c 0,0 0.28,-2.76 0.28,-3.31 0,-0.55 9.66,-4.69 9.66,-4.69 l 1.38,-2.48 v -6.51 l -1.43,-4.7 c 0,0 -1.18,0.2 -1.96,0 -0.78,-0.2 -5.88,-2.15 -5.88,-2.15 h -10.27 l -6.77,-8.06 -3.44,-11.33 h 5.6 l 3.72,-2.94 1.18,-5.09 -1.96,-2.94 -4.9,-5.29 6.07,-1.76 2.74,-4.31 1.57,-1.18 -0.98,-6.07 -6.75,-4.11 -6.96,-4.5 -0.2,-1.76 4.11,-1.57 3.04,0.98 6.36,-4.31 1.76,-2.35 2.55,2.94 h 4.31 l 3.92,-3.92 4.57,-7.05 2.68,6.46 h 10.77 l -1.57,-6.46 0.39,-6.66 -2.55,-23.9 -4.31,-2.35 -0.78,-5.29 -2.94,-2.74 -2.55,-2.94 1.57,-4.5 -4.5,-5.68 -2.55,-3.33 2.74,-8.62 -2.94,-4.5 -5.48,-1.37 -2.96,-2.94 4.14,-3.92 5.09,-1.37 -1.57,-2.74 0.59,-4.5 4.11,-1.18 h 4.31 l 1.96,-2.74 -0.2,-4.31 2.15,-2.55 2.74,-4.5 0.59,-1.76 h 2.35 l 0.98,-2.55 -1.96,-11.56 1.96,-3.33 1.96,-1.57 3.53,3.92 c 0,0 1.37,1.57 2.35,1.37 0.98,-0.2 4.11,-0.98 4.11,-0.98 l 3.72,-0.98 c 0,0 1.18,-1.37 1.96,-1.76 0.78,-0.39 3.33,-1.57 3.33,-1.57 h 3.92 l 1.57,-1.57 1.57,-1.37 1.37,3.92 2.35,3.72 v 5.68 l 2.55,5.68 v 2.74 l -5.88,-4.31 -3.33,-0.39 -0.98,1.57 -3.53,-1.96 -3.33,0.78 -1.57,3.92 -0.78,5.29 0.39,1.37 -2.74,1.76 1.37,4.5 1.18,3.72 10.58,0.2 1.57,-1.37 3.53,-0.78 3.53,0.78 1.37,1.57 3.33,-5.29 1.96,-2.55 3.53,-1.76 v 6.27 l -2.74,5.29 -1.37,2.55 0.59,3.53 -1.57,4.5 -2.35,3.33 -1.96,3.72 -3.72,-0.98 c 0,0 -1.37,0.59 -1.96,0.98 -0.59,0.39 -2.74,0.78 -2.74,0.78 l -2.15,-1.37 c 0,0 -2.55,0.59 -3.13,0.78 -0.58,0.19 -2.55,1.57 -2.55,1.57 0,0 -2.94,2.35 -3.72,2.55 -0.78,0.2 -3.53,1.76 -4.11,2.15 -0.58,0.39 0,-1.37 -0.59,0.39 -0.59,1.76 -1.18,4.5 -1.18,4.5 v 4.7 l 3.13,2.35 0.2,5.09 3.13,3.72 3.33,2.94 0.98,2.15 -2.15,2.15 2.94,5.68 2.74,2.35 c 0,0 0.78,2.74 0.98,3.33 0.2,0.59 1.57,4.9 1.57,4.9 l 4.7,5.68 3.72,5.09 3.13,2.94 1.18,0.98 3.13,-3.13 7.05,-1.18 1.76,-2.35 2.15,-1.57 2.15,0.2 v 3.13 l -1.96,7.64 -1.37,3.72 1.57,1.37 9.74,-1.18 7.51,-1.18 3.65,-2.55 2.23,-1.37 1.22,-1.18 6.49,5.09 c 0,0 5.68,5.88 5.88,6.46 0.2,0.58 3.04,2.74 3.04,2.74 l 6.7,6.66 c 0,0 2.84,1.18 3.45,1.18 0.61,0 4.87,0.98 4.87,0.98 l 1.83,4.9 v 5.48 l 5.68,1.37 3.25,-1.37 3.25,2.15 1.62,2.15 2.84,1.57 2.03,6.07 -1.83,2.15 h -2.43 l -1.42,1.18 -2.4,2.69 -2.87,-2.69 h -2.03 l -0.61,1.96 -2.43,0.2 -4.87,-2.94 -5.88,-7.64 -4.06,-6.27 -8.12,-8.03 -5.48,-4.7 -10.75,-1.57 -6.29,-0.78 c 0,0 -1.42,2.55 -2.03,2.55 -0.61,0 -10.01,3.72 -10.01,3.72 l -0.2,5.29 2.94,4.31 c 0,0 2.74,2.55 3.33,2.55 0.59,0 3.92,1.76 3.92,1.76 l 2.35,0.59 5.29,-0.78 5.09,0.98 0.2,7.44 1.76,20.76 2.94,7.95 4.31,5.76 1.97,9.71 4.04,8.08 3.23,2.16 c 0,0 1.08,1.35 1.35,1.75 0.27,0.4 -0.67,5.66 -0.67,5.66 l 1.48,7.14 2.56,5.12 2.29,-0.4 4.45,-0.94 3.64,1.75 1.48,4.04 1.08,5.79 -4.85,-1.08 0.81,5.66 -4.04,-1.48 -4.18,1.35 -4.71,0.94 -4.85,-5.39 -3.91,-3.5 -3.77,-4.45 -0.94,-1.62 2.02,-1.62 1.35,-0.94 c 0,0 -2.83,-12.26 -2.96,-12.8 -0.13,-0.54 -4.18,-7.95 -4.45,-8.35 -0.27,-0.4 -2.29,-4.45 -2.29,-4.45 0,0 -1.18,1.48 -1.72,1.62 -0.54,0.14 -5.66,1.35 -5.66,1.35 l -3.1,-0.13 -0.81,-3.91 c 0,0 -1.35,-0.94 -1.62,-1.21 -0.27,-0.27 -1.35,-2.16 -1.35,-2.16 l -1.08,1.62 v 4.18 l 0.27,4.18 2.56,4.58 2.16,1.35 -2.83,3.37 -0.27,5.66 1.62,3.64 1.75,3.91 c 0,0 2.83,9.97 2.96,10.37 0.13,0.4 2.96,7.14 2.96,7.14 h 8.89 l 1.89,6.74 v 7.41 l 1.48,9.03 5.25,9.29 c 0,0 5.52,4.71 6.06,4.98 0.54,0.27 1.62,2.69 1.62,3.1 0,0.41 -0.54,2.42 -0.94,3.23 -0.4,0.81 -1.08,3.64 -1.08,3.64 0,0 1.21,4.18 1.08,4.58 -0.13,0.4 -1.35,5.93 -1.35,5.93 l -1.89,6.33 c 0,0 1.89,2.96 2.02,3.77 0.13,0.81 2.29,6.2 2.29,6.2 l 1.75,5.66 2.29,2.56 -0.54,4.71 1.21,4.98 4.31,2.96 c 0,0 3.77,-0.13 4.31,-0.27 0.54,-0.14 5.09,0.13 4.55,0.13 -0.54,0 2.29,-2.69 2.29,-2.69 l 3.77,2.96 c 0,0 2.83,3.5 3.1,3.91 0.27,0.41 2.42,2.83 2.42,2.83 l 2.69,7.41 2.39,2.83 2.18,2.31 v 14.04 c 0,0 -12.79,0 -12.79,0 l -2.69,-9.88 -3.77,-3.1 c 0,0 -1.48,1.21 -2.02,1.48 -0.54,0.27 -5.36,3.37 -5.36,3.37 l -6.33,0.54 -3.77,0.27 -1.08,2.16 -1.18,4.62 h -15.49 l -17.17,1.21 -1.69,-14.85 c 0,0 2.93,-7.95 3.6,-8.76 0.67,-0.81 2.96,-2.42 2.96,-2.42 l 2.83,-0.67 c 0,0 2.69,-3.23 2.83,-3.64 0.14,-0.41 1.89,-2.16 1.89,-2.16 l 2.16,-3.37 -2.42,-13.34 -2.42,-7.41 -5.52,-10.78 2.29,-8.22 -2.56,-7.14 -3.64,-6.6 -0.54,-4.85 -10.51,-17.11 c 0,0 -5.52,-1.08 -5.93,-1.62 -0.41,-0.54 -7.67,-3.77 -7.67,-3.77 l -7.14,-0.81 -0.94,2.42 -3.1,0.4 -2.83,1.75 -2.29,3.64 -3.5,-0.4 -3.1,-0.54 -7.14,6.87 -5.12,4.98 -6.6,5.79 -4.45,1.89 -0.4,4.18 0.94,5.66 0.27,3.5 -3.1,0.54 -1.35,4.85 -4.71,6.87 -1.35,3.77 -1.48,9.56 0.94,4.98 1.62,2.83 -1.21,8.62 -0.54,3.37 0.27,6.6 3.37,3.37 6.87,-3.23 5.39,5.52 c 0,0 3.37,2.56 4.31,2.83 0.94,0.27 3.5,2.29 3.91,2.96 0.41,0.67 3.23,1.48 3.23,1.48 0,0 3.77,-5.12 4.18,-5.12 0.41,0 4.58,0.13 4.58,0.13 l 4.98,4.04 c 0,0 5.93,1.35 6.6,1.62 0.67,0.27 3.64,4.04 3.64,4.04 l -0.4,6.47 c 0,0 -19.67,-2.56 -20.34,-2.56 -0.67,0 -13.34,1.35 -13.34,1.35 l -11.45,-0.54 -15.4,2.98 -11.72,1.35 -5.93,-0.52 -14.81,-2.06 z" fill="#ffffff"></path>
+  </g>
 </svg>
\ No newline at end of file
diff --git a/public/media/bingo/prague-2.svg b/public/media/bingo/prague-2.svg
deleted file mode 100644
index aa500454d..000000000
--- a/public/media/bingo/prague-2.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
-  <g>
-        <circle cx="60" cy="60" r="50" fill="#ffffff"></circle>
-        <circle cx="60" cy="60" r="44" fill="#FB471F"></circle>
-        <rect x="58.4" y="4" width="3.2" height="9" fill="#ffffff"></rect>
-        <rect x="58.4" y="107" width="3.2" height="9" fill="#ffffff"></rect>
-        <rect x="4" y="58.4" width="9" height="3.2" fill="#ffffff"></rect>
-        <rect x="107" y="58.4" width="9" height="3.2" fill="#ffffff"></rect>
-        <circle cx="60" cy="60" r="40" fill="#ffffff"></circle>
-        <circle cx="60" cy="60" r="36" fill="#FB471F"></circle>
-        <circle cx="58" cy="62" r="21" fill="#ffffff"></circle>
-        <circle cx="58" cy="62" r="17" fill="#FB471F"></circle>
-        <rect x="58.5" y="38" width="3" height="22" rx="1.5" fill="#ffffff"></rect>
-        <g transform="rotate(48 60 60)">
-          <rect x="59" y="36" width="2" height="24" fill="#ffffff"></rect>
-          <circle cx="60" cy="34" r="4" fill="#ffffff"></circle>
-          <circle cx="60" cy="34" r="1.6" fill="#FB471F"></circle>
-        </g>
-        <circle cx="60" cy="60" r="3.6" fill="#ffffff"></circle>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/prague-3.svg b/public/media/bingo/prague-3.svg
deleted file mode 100644
index 209131ea3..000000000
--- a/public/media/bingo/prague-3.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#008624"></rect>
-  <g>
-        <circle cx="60" cy="60" r="50" fill="#ffffff"></circle>
-        <circle cx="60" cy="60" r="44" fill="#008624"></circle>
-        <rect x="58.4" y="4" width="3.2" height="9" fill="#ffffff"></rect>
-        <rect x="58.4" y="107" width="3.2" height="9" fill="#ffffff"></rect>
-        <rect x="4" y="58.4" width="9" height="3.2" fill="#ffffff"></rect>
-        <rect x="107" y="58.4" width="9" height="3.2" fill="#ffffff"></rect>
-        <circle cx="60" cy="60" r="40" fill="#ffffff"></circle>
-        <circle cx="60" cy="60" r="36" fill="#008624"></circle>
-        <circle cx="58" cy="62" r="21" fill="#ffffff"></circle>
-        <circle cx="58" cy="62" r="17" fill="#008624"></circle>
-        <rect x="58.5" y="38" width="3" height="22" rx="1.5" fill="#ffffff"></rect>
-        <g transform="rotate(48 60 60)">
-          <rect x="59" y="36" width="2" height="24" fill="#ffffff"></rect>
-          <circle cx="60" cy="34" r="4" fill="#ffffff"></circle>
-          <circle cx="60" cy="34" r="1.6" fill="#008624"></circle>
-        </g>
-        <circle cx="60" cy="60" r="3.6" fill="#ffffff"></circle>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/prague.svg b/public/media/bingo/prague.svg
index a8f9e92b0..91f9af2f7 100644
--- a/public/media/bingo/prague.svg
+++ b/public/media/bingo/prague.svg
@@ -1,22 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 120 120" role="img" aria-label="Prague Astronomical Clock">
+  <title>Prague Astronomical Clock</title>
   <rect width="120" height="120" fill="#1003A3"></rect>
-  <g>
-        <circle cx="60" cy="60" r="50" fill="#ffffff"></circle>
-        <circle cx="60" cy="60" r="44" fill="#1003A3"></circle>
-        <rect x="58.4" y="4" width="3.2" height="9" fill="#ffffff"></rect>
-        <rect x="58.4" y="107" width="3.2" height="9" fill="#ffffff"></rect>
-        <rect x="4" y="58.4" width="9" height="3.2" fill="#ffffff"></rect>
-        <rect x="107" y="58.4" width="9" height="3.2" fill="#ffffff"></rect>
-        <circle cx="60" cy="60" r="40" fill="#ffffff"></circle>
-        <circle cx="60" cy="60" r="36" fill="#1003A3"></circle>
-        <circle cx="58" cy="62" r="21" fill="#ffffff"></circle>
-        <circle cx="58" cy="62" r="17" fill="#1003A3"></circle>
-        <rect x="58.5" y="38" width="3" height="22" rx="1.5" fill="#ffffff"></rect>
-        <g transform="rotate(48 60 60)">
-          <rect x="59" y="36" width="2" height="24" fill="#ffffff"></rect>
-          <circle cx="60" cy="34" r="4" fill="#ffffff"></circle>
-          <circle cx="60" cy="34" r="1.6" fill="#1003A3"></circle>
-        </g>
-        <circle cx="60" cy="60" r="3.6" fill="#ffffff"></circle>
-      </g>
+  <g fill="none" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="60" cy="60" r="53"></circle>
+    <circle cx="60" cy="60" r="44" stroke-width="1.4"></circle>
+    <circle cx="56" cy="50" r="23" stroke-width="1.8"></circle>
+    <circle cx="63" cy="71" r="22" stroke-width="1.8"></circle>
+    <circle cx="60" cy="60" r="7" stroke-width="1.6"></circle>
+    <circle cx="50" cy="57" r="6" stroke-width="1.4"></circle>
+    <path d="M50 51 A 4 6 0 0 0 50 63" stroke-width="1.2"></path>
+    <line x1="30" y1="82" x2="93" y2="37"></line>
+    <line x1="57" y1="25" x2="65" y2="95"></line>
+    <line x1="60" y1="60" x2="31" y2="70" stroke-width="1.8"></line>
+  </g>
+  <path d="M93 37L89.34 43.92L85.27 38.22Z" fill="#ffffff"></path>
+  <path d="M65 95L60.73 88.44L67.68 87.65Z" fill="#ffffff"></path>
+  <path d="M26 63.5L26.99 67.6L30.6 65.4L28.4 69.01L32.5 70L28.4 70.99L30.6 74.6L26.99 72.4L26 76.5L25.01 72.4L21.4 74.6L23.6 70.99L19.5 70L23.6 69.01L21.4 65.4L25.01 67.6Z" fill="#ffffff"></path>
 </svg>
\ No newline at end of file
diff --git a/public/media/bingo/online-2.svg b/public/media/bingo/remote.svg
similarity index 86%
rename from public/media/bingo/online-2.svg
rename to public/media/bingo/remote.svg
index 2ebc30ebe..2dcd1f9ae 100644
--- a/public/media/bingo/online-2.svg
+++ b/public/media/bingo/remote.svg
@@ -1,12 +1,12 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
+  <rect width="120" height="120" fill="#1003A3"></rect>
   <g>
         <rect x="28" y="28" width="64" height="48" rx="3" fill="#ffffff"></rect>
-        <rect x="33" y="33" width="54" height="38" rx="1.5" fill="#FB471F"></rect>
+        <rect x="33" y="33" width="54" height="38" rx="1.5" fill="#1003A3"></rect>
         <circle cx="60" cy="46" r="6.5" fill="#ffffff"></circle>
         <path d="M51,66 a9 9 0 0 1 18 0 Z" fill="#ffffff"></path>
         <rect x="40" y="76" width="40" height="4" fill="#ffffff"></rect>
         <polygon points="20,80 100,80 106,90 14,90" fill="#ffffff"></polygon>
-        <rect x="53" y="81.5" width="14" height="2.4" rx="1.2" fill="#FB471F"></rect>
+        <rect x="53" y="81.5" width="14" height="2.4" rx="1.2" fill="#1003A3"></rect>
       </g>
 </svg>
\ No newline at end of file
diff --git a/public/media/bingo/rimini-2.svg b/public/media/bingo/rimini-2.svg
deleted file mode 100644
index cecf9f69b..000000000
--- a/public/media/bingo/rimini-2.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
-  <g>
-        <rect x="32" y="64" width="56" height="40" fill="#ffffff"></rect>
-        <path d="M48,104 V80 a12 12 0 0 1 24 0 V104 Z" fill="#FB471F"></path>
-        <rect x="38" y="70" width="2" height="32" fill="#FB471F"></rect>
-        <rect x="43" y="70" width="2" height="32" fill="#FB471F"></rect>
-        <rect x="75" y="70" width="2" height="32" fill="#FB471F"></rect>
-        <rect x="80" y="70" width="2" height="32" fill="#FB471F"></rect>
-        <circle cx="44" cy="74" r="4" fill="#FB471F"></circle>
-        <circle cx="76" cy="74" r="4" fill="#FB471F"></circle>
-        <rect x="30" y="56" width="60" height="8" fill="#ffffff"></rect>
-        <polygon points="42,56 60,40 78,56" fill="#ffffff"></polygon>
-        <rect x="58" y="32" width="4" height="9" fill="#ffffff"></rect>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/rimini.svg b/public/media/bingo/rimini.svg
index ce86db339..5e67f4682 100644
--- a/public/media/bingo/rimini.svg
+++ b/public/media/bingo/rimini.svg
@@ -1,16 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 120 120" role="img" aria-label="Arco d&#39;Augusto, Rimini">
+  <title>Arco d&#39;Augusto</title>
   <rect width="120" height="120" fill="#1003A3"></rect>
-  <g>
-        <rect x="32" y="64" width="56" height="40" fill="#ffffff"></rect>
-        <path d="M48,104 V80 a12 12 0 0 1 24 0 V104 Z" fill="#1003A3"></path>
-        <rect x="38" y="70" width="2" height="32" fill="#1003A3"></rect>
-        <rect x="43" y="70" width="2" height="32" fill="#1003A3"></rect>
-        <rect x="75" y="70" width="2" height="32" fill="#1003A3"></rect>
-        <rect x="80" y="70" width="2" height="32" fill="#1003A3"></rect>
-        <circle cx="44" cy="74" r="4" fill="#1003A3"></circle>
-        <circle cx="76" cy="74" r="4" fill="#1003A3"></circle>
-        <rect x="30" y="56" width="60" height="8" fill="#ffffff"></rect>
-        <polygon points="42,56 60,40 78,56" fill="#ffffff"></polygon>
-        <rect x="58" y="32" width="4" height="9" fill="#ffffff"></rect>
-      </g>
+  <path d="M24 14L96 14L96 104L24 104Z M30.51 14L34.91 14L34.91 26L30.51 26ZM41.43 14L45.83 14L45.83 26L41.43 26ZM52.34 14L56.74 14L56.74 26L52.34 26ZM63.26 14L67.66 14L67.66 26L63.26 26ZM74.17 14L78.57 14L78.57 26L74.17 26ZM85.09 14L89.49 14L89.49 26L85.09 26Z M46 100L46 66A14 14 0 0 1 74 66L74 100Z M26 42L94 42L94 43.6L26 43.6Z M60 30.5L43 40.5L77 40.5Z M60 33.2L45.5 38.8L74.5 38.8Z M28 47.45L44 47.45L44 48.95L28 48.95Z M76 47.45L92 47.45L92 48.95L76 48.95Z M28 93.85L44 93.85L44 95.35L28 95.35Z M76 93.85L92 93.85L92 95.35L76 95.35Z M32.5 52L33.5 52L33.5 93L32.5 93Z M38.5 52L39.5 52L39.5 93L38.5 93Z M86.5 52L87.5 52L87.5 93L86.5 93Z M80.5 52L81.5 52L81.5 93L80.5 93Z" fill="#ffffff" fill-rule="evenodd"></path>
 </svg>
\ No newline at end of file
diff --git a/public/media/bingo/vilnius-2.svg b/public/media/bingo/vilnius-2.svg
deleted file mode 100644
index cf3b49d39..000000000
--- a/public/media/bingo/vilnius-2.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
-  <rect width="120" height="120" fill="#FB471F"></rect>
-  <g>
-        <rect x="44" y="100" width="32" height="8" fill="#ffffff"></rect>
-        <rect x="47" y="62" width="26" height="40" fill="#ffffff"></rect>
-        <path d="M54,102 V90 a6 6 0 0 1 12 0 V102 Z" fill="#FB471F"></path>
-        <rect x="45" y="56" width="30" height="6" fill="#ffffff"></rect>
-        <rect x="50" y="40" width="20" height="16" fill="#ffffff"></rect>
-        <circle cx="60" cy="48" r="5" fill="#FB471F"></circle>
-        <circle cx="60" cy="48" r="1.6" fill="#ffffff"></circle>
-        <rect x="49" y="36" width="22" height="4" fill="#ffffff"></rect>
-        <rect x="53" y="26" width="14" height="10" fill="#ffffff"></rect>
-        <path d="M55,26 V20 a5 5 0 0 1 10 0 V26 Z" fill="#FB471F"></path>
-        <path d="M53,26 Q53,16 60,16 Q67,16 67,26 Z" fill="#ffffff"></path>
-        <rect x="58" y="9" width="4" height="7" fill="#ffffff"></rect>
-        <rect x="59" y="2" width="2" height="9" fill="#ffffff"></rect>
-        <rect x="56" y="4.5" width="8" height="2" fill="#ffffff"></rect>
-      </g>
-</svg>
\ No newline at end of file
diff --git a/public/media/bingo/vilnius.svg b/public/media/bingo/vilnius.svg
index 7a92eb016..779e82125 100644
--- a/public/media/bingo/vilnius.svg
+++ b/public/media/bingo/vilnius.svg
@@ -1,19 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="512" height="512">
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 120 120" role="img" aria-label="Bell Tower of Vilnius Cathedral">
+  <title>Vilnius Cathedral Bell Tower</title>
   <rect width="120" height="120" fill="#1003A3"></rect>
-  <g>
-        <rect x="44" y="100" width="32" height="8" fill="#ffffff"></rect>
-        <rect x="47" y="62" width="26" height="40" fill="#ffffff"></rect>
-        <path d="M54,102 V90 a6 6 0 0 1 12 0 V102 Z" fill="#1003A3"></path>
-        <rect x="45" y="56" width="30" height="6" fill="#ffffff"></rect>
-        <rect x="50" y="40" width="20" height="16" fill="#ffffff"></rect>
-        <circle cx="60" cy="48" r="5" fill="#1003A3"></circle>
-        <circle cx="60" cy="48" r="1.6" fill="#ffffff"></circle>
-        <rect x="49" y="36" width="22" height="4" fill="#ffffff"></rect>
-        <rect x="53" y="26" width="14" height="10" fill="#ffffff"></rect>
-        <path d="M55,26 V20 a5 5 0 0 1 10 0 V26 Z" fill="#1003A3"></path>
-        <path d="M53,26 Q53,16 60,16 Q67,16 67,26 Z" fill="#ffffff"></path>
-        <rect x="58" y="9" width="4" height="7" fill="#ffffff"></rect>
-        <rect x="59" y="2" width="2" height="9" fill="#ffffff"></rect>
-        <rect x="56" y="4.5" width="8" height="2" fill="#ffffff"></rect>
-      </g>
+  <path d="M38 110 Q40 95 45 80 L46 62 L46.5 46 L45.5 45 Q45 40 50 36 Q54 33.5 57 33 L60 12 L63 33 Q66 33.5 70 36 Q75 40 74.5 45 L73.5 46 L74 62 L75 80 Q80 95 82 110 Z M56.6 52 A3.4 3.4 0 1 0 63.4 52 A3.4 3.4 0 1 0 56.6 52 Z M51 76 L51 70 A2 2 0 0 1 55 70 L55 76 Z M58 76 L58 70 A2 2 0 0 1 62 70 L62 76 Z M65 76 L65 70 A2 2 0 0 1 69 70 L69 76 Z M58.9 90 L61.1 90 L61.1 99 L58.9 99 Z M45.5 44.3 L74.5 44.3 L74.5 45.6 L45.5 45.6 Z M46 61.3 L74 61.3 L74 62.6 L46 62.6 Z M45 79.2 L75 79.2 L75 80.6 L45 80.6 Z" fill="#ffffff" fill-rule="evenodd"></path>
+  <path d="M59.2 8 L60.8 8 L60.8 11.5 L63.4 11.5 L63.4 13 L60.8 13 L60.8 19 L59.2 19 L59.2 13 L56.6 13 L56.6 11.5 L59.2 11.5 Z" fill="#ffffff"></path>
 </svg>
\ No newline at end of file
diff --git a/src/components/island/BingoCard.svelte b/src/components/island/BingoCard.svelte
index 81fa95367..a6d7f2cf2 100644
--- a/src/components/island/BingoCard.svelte
+++ b/src/components/island/BingoCard.svelte
@@ -2,31 +2,31 @@
   const STORAGE_KEY = 'ep-bingo-checked';
 
   const editions = [
-    { year: 2002, city: 'Charleroi',   icon: '/media/bingo/charleroi.svg',    bg: '#1003A3' },
-    { year: 2003, city: 'Charleroi',   icon: '/media/bingo/charleroi-2.svg',  bg: '#FB471F' },
-    { year: 2004, city: 'Gothenburg',  icon: '/media/bingo/gothenburg.svg',   bg: '#1003A3' },
-    { year: 2005, city: 'Gothenburg',  icon: '/media/bingo/gothenburg-2.svg', bg: '#FB471F' },
-    { year: 2006, city: 'CERN, Geneva',icon: '/media/bingo/geneva.svg',       bg: '#1003A3' },
-    { year: 2007, city: 'Vilnius',     icon: '/media/bingo/vilnius.svg',      bg: '#1003A3' },
-    { year: 2008, city: 'Vilnius',     icon: '/media/bingo/vilnius-2.svg',    bg: '#FB471F' },
-    { year: 2009, city: 'Birmingham',  icon: '/media/bingo/birmingham.svg',   bg: '#1003A3' },
-    { year: 2010, city: 'Birmingham',  icon: '/media/bingo/birmingham-2.svg', bg: '#FB471F' },
-    { year: 2011, city: 'Florence',    icon: '/media/bingo/florence.svg',     bg: '#1003A3' },
-    { year: 2012, city: 'Florence',    icon: '/media/bingo/florence-2.svg',   bg: '#FB471F' },
-    { year: 2013, city: 'Florence',    icon: '/media/bingo/florence-3.svg',   bg: '#008624' },
-    { year: 2014, city: 'Berlin',      icon: '/media/bingo/berlin.svg',       bg: '#1003A3' },
-    { year: 2015, city: 'Bilbao',      icon: '/media/bingo/bilbao.svg',       bg: '#1003A3' },
-    { year: 2016, city: 'Bilbao',      icon: '/media/bingo/bilbao-2.svg',     bg: '#FB471F' },
-    { year: 2017, city: 'Rimini',      icon: '/media/bingo/rimini.svg',       bg: '#1003A3' },
-    { year: 2018, city: 'Edinburgh',   icon: '/media/bingo/edinburgh.svg',    bg: '#1003A3' },
-    { year: 2019, city: 'Basel',       icon: '/media/bingo/basel.svg',        bg: '#1003A3' },
-    { year: 2020, city: 'Online',      icon: '/media/bingo/online.svg',       bg: '#1003A3' },
-    { year: 2021, city: 'Online',      icon: '/media/bingo/online-2.svg',     bg: '#FB471F' },
-    { year: 2022, city: 'Dublin',      icon: '/media/bingo/dublin.svg',       bg: '#1003A3' },
-    { year: 2023, city: 'Prague',      icon: '/media/bingo/prague.svg',       bg: '#1003A3' },
-    { year: 2024, city: 'Prague',      icon: '/media/bingo/prague-2.svg',     bg: '#FB471F' },
-    { year: 2025, city: 'Prague',      icon: '/media/bingo/prague-3.svg',     bg: '#008624' },
-    { year: 2026, city: 'Kraków',      icon: '/media/bingo/krakow.svg',       bg: '#1003A3' },
+    { year: 2002, city: 'Charleroi',   icon: '/media/bingo/charleroi.svg',   bg: '#1003A3' },
+    { year: 2003, city: 'Charleroi',   icon: '/media/bingo/charleroi.svg',   bg: '#1003A3' },
+    { year: 2004, city: 'Gothenburg',  icon: '/media/bingo/gothenburg.svg',  bg: '#1003A3' },
+    { year: 2005, city: 'Gothenburg',  icon: '/media/bingo/gothenburg.svg',  bg: '#1003A3' },
+    { year: 2006, city: 'CERN, Geneva',icon: '/media/bingo/geneva.svg',      bg: '#1003A3' },
+    { year: 2007, city: 'Vilnius',     icon: '/media/bingo/vilnius.svg',     bg: '#1003A3' },
+    { year: 2008, city: 'Vilnius',     icon: '/media/bingo/vilnius.svg',     bg: '#1003A3' },
+    { year: 2009, city: 'Birmingham',  icon: '/media/bingo/birmingham.svg',  bg: '#1003A3' },
+    { year: 2010, city: 'Birmingham',  icon: '/media/bingo/birmingham.svg',  bg: '#1003A3' },
+    { year: 2011, city: 'Florence',    icon: '/media/bingo/florence.svg',    bg: '#1003A3' },
+    { year: 2012, city: 'Florence',    icon: '/media/bingo/florence.svg',    bg: '#1003A3' },
+    { year: 2013, city: 'Florence',    icon: '/media/bingo/florence.svg',    bg: '#1003A3' },
+    { year: 2014, city: 'Berlin',      icon: '/media/bingo/berlin.svg',      bg: '#1003A3' },
+    { year: 2015, city: 'Bilbao',      icon: '/media/bingo/bilbao.svg',      bg: '#1003A3' },
+    { year: 2016, city: 'Bilbao',      icon: '/media/bingo/bilbao.svg',      bg: '#1003A3' },
+    { year: 2017, city: 'Rimini',      icon: '/media/bingo/rimini.svg',      bg: '#1003A3' },
+    { year: 2018, city: 'Edinburgh',   icon: '/media/bingo/edinburgh.svg',   bg: '#1003A3' },
+    { year: 2019, city: 'Basel',       icon: '/media/bingo/basel.svg',       bg: '#1003A3' },
+    { year: 2020, city: 'Online',      icon: '/media/bingo/online.svg',      bg: '#1003A3' },
+    { year: 2021, city: 'Online',      icon: '/media/bingo/online.svg',      bg: '#1003A3' },
+    { year: 2022, city: 'Dublin',      icon: '/media/bingo/dublin.svg',      bg: '#1003A3' },
+    { year: 2023, city: 'Prague',      icon: '/media/bingo/prague.svg',      bg: '#1003A3' },
+    { year: 2024, city: 'Prague',      icon: '/media/bingo/prague.svg',      bg: '#1003A3' },
+    { year: 2025, city: 'Prague',      icon: '/media/bingo/prague.svg',      bg: '#1003A3' },
+    { year: 2026, city: 'Kraków',      icon: '/media/bingo/krakow.svg',      bg: '#1003A3' },
   ];
 
   function loadChecked() {
@@ -182,15 +182,15 @@
         ctx.drawImage(images[i], ix, iy, iconSize, iconSize);
         ctx.restore();
 
-        const yearY = iy + iconSize + Math.round(ch * 0.12);
+        const cityY = iy + iconSize + Math.round(ch * 0.12);
         ctx.fillStyle = 'white';
-        ctx.font = `bold 18px system-ui, sans-serif`;
+        ctx.font = `bold 13px system-ui, sans-serif`;
         ctx.textAlign = 'center';
-        ctx.fillText(ed.year.toString(), x + CELL / 2, yearY);
+        ctx.fillText(ed.city, x + CELL / 2, cityY);
 
         ctx.fillStyle = 'rgba(255,255,255,0.7)';
-        ctx.font = `11px system-ui, sans-serif`;
-        ctx.fillText(ed.city, x + CELL / 2, yearY + Math.round(ch * 0.13));
+        ctx.font = `12px system-ui, sans-serif`;
+        ctx.fillText(ed.year.toString(), x + CELL / 2, cityY + Math.round(ch * 0.14));
       } else {
         // Unchecked: text card (matches the card-front on screen)
         ctx.fillStyle = isCurrent ? cellFillCur : cellFill;
@@ -204,14 +204,14 @@
         ctx.stroke();
         ctx.setLineDash([]);
 
-        ctx.fillStyle = yearColor;
-        ctx.font = `bold 21px system-ui, sans-serif`;
+        ctx.fillStyle = cityColor;
+        ctx.font = `bold 14px system-ui, sans-serif`;
         ctx.textAlign = 'center';
-        ctx.fillText(ed.year.toString(), x + CELL / 2, y + CELL * 0.46);
+        ctx.fillText(ed.city, x + CELL / 2, y + CELL * 0.44);
 
-        ctx.fillStyle = cityColor;
-        ctx.font = `12px system-ui, sans-serif`;
-        ctx.fillText(ed.city, x + CELL / 2, y + CELL * 0.65);
+        ctx.fillStyle = yearColor;
+        ctx.font = `13px system-ui, sans-serif`;
+        ctx.fillText(ed.year.toString(), x + CELL / 2, y + CELL * 0.62);
 
         if (isCurrent) {
           ctx.fillStyle = '#f0c040';
@@ -263,17 +263,17 @@
         role="gridcell"
       >
         <div class="card-inner" class:flipped={checked[i]}>
-          <div class="card-face card-front">
-            <span class="cell-year">{edition.year}</span>
+          <div class="card-face card-front" style={checked[i] ? `background:${edition.bg}` : ''}>
             <span class="cell-city">{edition.city}</span>
+            <span class="cell-year">{edition.year}</span>
             {#if edition.year === 2026}
               <span class="cell-now">Now!</span>
             {/if}
           </div>
           <div class="card-face card-back" style="background:{edition.bg}">
             <img src={edition.icon} alt="" aria-hidden="true" class="cell-icon" />
-            <span class="cell-year">{edition.year}</span>
             <span class="cell-city">{edition.city}</span>
+            <span class="cell-year">{edition.year}</span>
           </div>
         </div>
       </button>
@@ -378,11 +378,11 @@
     object-fit: contain;
   }
 
-  .card-back .cell-year {
+  .card-back .cell-city {
     color: white;
   }
 
-  .card-back .cell-city {
+  .card-back .cell-year {
     color: rgba(255, 255, 255, 0.7);
   }
 
@@ -403,48 +403,40 @@
     border-color: var(--color-border-bright);
   }
 
-  /* checked state — background lives on the front face only, not the button */
+  /* checked state */
   .bingo-cell.checked {
     border-style: solid;
     border-color: var(--color-border);
   }
 
-  .bingo-cell.checked .card-front {
-    background: var(--color-accent);
-  }
-
   .bingo-cell.checked:hover {
     border-color: var(--color-border);
     background: var(--color-surface-faint);
     transform: translateY(-3px);
   }
 
-  .bingo-cell.checked:hover .card-front {
-    background: var(--color-accent-hover);
-  }
-
   /* ── cell text ── */
-  .cell-year {
-    font-size: clamp(1rem, 2.5vw, 1.35rem);
-    font-weight: 800;
-    letter-spacing: -0.02em;
+  .cell-city {
+    font-size: clamp(0.75rem, 1.9vw, 1.05rem);
+    font-weight: 700;
     color: var(--color-text-primary);
-    line-height: 1;
+    line-height: 1.1;
   }
 
-  .bingo-cell.checked .cell-year {
-    color: var(--color-on-accent);
+  .cell-year {
+    font-size: clamp(0.65rem, 1.5vw, 0.85rem);
+    font-weight: 500;
+    letter-spacing: -0.01em;
+    color: var(--color-text-faint);
+    line-height: 1;
   }
 
-  .cell-city {
-    font-size: clamp(0.6rem, 1.4vw, 0.75rem);
-    color: var(--color-text-faint);
-    line-height: 1.1;
+  .bingo-cell.checked .card-front .cell-city {
+    color: white;
   }
 
-  .bingo-cell.checked .cell-city {
-    color: var(--color-on-accent);
-    opacity: 0.7;
+  .bingo-cell.checked .card-front .cell-year {
+    color: rgba(255, 255, 255, 0.7);
   }
 
   .cell-now {
@@ -457,9 +449,8 @@
     margin-top: 1px;
   }
 
-  .bingo-cell.checked .cell-now {
-    color: var(--color-on-accent);
-    opacity: 0.6;
+  .bingo-cell.checked .card-front .cell-now {
+    color: rgba(255, 255, 255, 0.6);
   }
 
   /* ── share ── */