01Bookmaker tile assets

Every operator tile the component can render. The V2 and V3 variants (§02) place one of these beneath the odd; V1 uses none. Only the rectangle type is used here. Logos are exported from Figma page «🧩 Logos» → bookmakers-logos into logo-assets/. Click any asset name to open the SVG. Colours are listed so the .bk-* class can be verified against the artwork.

Operator	Tile	Asset	Class	Background
Stoiximan		rectangle/stoiximan.svg	bk-stoiximan	#0055FF
bet365		rectangle/bet365.svg	bk-bet365	#005440
Fonbet		rectangle/fonbet.svg	bk-fonbet	#D42B28
Betsson		rectangle/betsson.svg	bk-betsson	#F26722
Interwetten		rectangle/interwetten.svg	bk-interwetten	#FFD200
Sportingbet		rectangle/sportingbet.svg	bk-sportingbet	#1E87C9
Vistabet		rectangle/vistabet.svg	bk-vistabet	#F05722
Novibet		rectangle/novibet.svg	bk-novibet	#303540 charcoal, not the DS teal — follow the artwork
NetBet		rectangle/netbet.svg	bk-netbet	#333743
N1 Casino		rectangle/n1casino.svg	bk-n1casino	#212121
bwin		rectangle/bwin.svg	bk-bwin	#000000
Elabet		rectangle/elabet.svg	bk-elabet	#11143E → #172B89 gradient — .bk-elabet sets background directly, not --bk
Pamestoixima (long)		rectangle/pamestoixima-long.svg	bk-pamestoixima-long is-tall	#B92128 — mark fills the tile, so it scales rather than crops (§03)
Pamestoixima		rectangle/pamestoixima.svg	modd-bk is-lt	#FFFFFF
Winmasters		rectangle/winmasters.svg	modd-bk is-lt	#FFFFFF
Winmasters 2		rectangle/winmasters-2.svg	modd-bk is-lt	#FFFFFF

The full library — all five types per brand (rectangle, circle-large, circle-small, plain-dark, plain-light) — is in logo-assets/. This component uses rectangle only.

02Variant map

Five variants in two families. data-variant sits on the row container for tracking and compliance — no CSS branches on it. Neutral family (V1–V3): .modd* classes, rectangle logos, approved. Brand family (V4–V5): .bodd* classes scoped under .bo, plain-light logos, new and under review. The two families share no CSS — that is deliberate, so a change to one can never move the other.

03V2 / V3 — the two-part card

Each selection is one link containing two stacked parts: a white top block with the selection label and the odd side by side, and beneath it the operator's rectangle logo tile.

Total card height is always 26 + 26 — two equal halves — so cards of different widths line up top and bottom. That is the rule that lets widths vary at all.

3AV4 / V5 — the brand-fill CTA new · for review

Source of truth: Figma page «Odds CTA» node 8328:283129. Both new variants are the same construction in two directions, so this section specifies the shared anatomy once and §3B covers the two layouts. The operator's colour is the entire surface; there is no neutral card and no tile.

Two nested boxes, and both are load-bearing. They carry the same fill — the only thing separating them is the inner box's drop-shadow, which is what reads as an engraved edge. Collapse them into one box and the control goes visually flat.

3A·1Per-operator fill

One declaration per operator, on the shell. The inner box inherits it.

3A·2Light fills — .is-lt

Four operators have a fill that white ink cannot sit on. .is-lt handles all of it in one class: --bo-ink:#1A1A1A, --bo-hair:rgba(26,26,26,.18), and an inset 0 0 0 1px #E6E6E6 added to the bevel so the control still has an edge against a white page. The wordmark must also be swapped to the plain-dark export — the class cannot do that for you, it is a different file.

3A·3Open — three fills fail the odd's contrast

3A·4States

The fill is the operator's colour, so hover cannot tint it. There is no #FFEBE6 surface to shift the way V1/V2/V3 have. Affordance comes from the bevel instead: the shell's flat shadow grows and the inner box brightens.

3BV4 vs V5 — the two layouts new · for review

Same anatomy (§3A), two flex directions. Everything below is the only difference between them.

04V1 — the standalone card

No bookmaker is named, so there is no tile: one light block holding the selection and the odd. Neutral editorial contexts.

05Markets & widths

All three variants carry the same betting options.

• Width is a property of the market, not the card. Every card inside one market carries the same width class, picked from that market's longest label. A mobile slide is therefore always uniform, and a desktop row only ever steps width at a .modd-div.
• Correct-score labels are 1-0 / 2-1. The market group is labelled above the row, so the prefix is redundant. The full string goes in title / aria-label, so nothing is lost for screen readers.
• Use the full O 2.5 / U 2.5, never bare O / U.
• Desktop minimum width: V1 8 × 100 + 7 × 8 gaps + 2 × 9 dividers = 874px. V2/V3 (5 × 72 + 2 × 92) + 7 × 6 + 2 × 9 = 604px. Both fit the analysis column; a narrower container scrolls horizontally rather than compressing.
• An ellipsis on a label means the container is too narrow or the wrong width class was picked. Treat it as a bug, not a state.
• Markets beyond these three follow the same rules — see the market-coverage stage above for the 72 / 92 / 112px sets. Markets carrying a name rather than a code (first scorer, scorecast, exact minute, player props) do not fit at any width and need a stacked list row instead; keep them out of this component.

06States

All three variants share one set of states, so hover behaves identically whether or not a tile is present.

07Design tokens

08Responsible gaming & regulatory

• V2 / V3 — render <span class="modd-rg">21+ · ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ</span> once below the grid; 10px/600 uppercase in --mut. Required — both name an operator.
• V1 — no inline line. No bookmaker is named, so the block is neutral editorial content.
• The full ΕΕΕΠ row stays in the page footer as shipped — see handover-footer-eeep.html. It is not duplicated inside the component.
• If the component is ever syndicated outside a page carrying the ΕΕΕΠ footer, the inline line becomes mandatory for V1 too.

09Accessibility

V4 / V5 — the brand-fill family. Full per-operator ratios are in §3A·1; the summary and the two blockers are here.

10Markup — copy/paste

<!-- V2 / V3 — v2 repeats one operator, v3 varies it per selection -->
<div class="oddswrap">
  <div class="moddgrid" data-variant="v3">

    <!-- market 1: 1X2 — base 72px, 1-char labels -->
    <div class="modd-slide">
      <a class="modd" href="{deeplink}" target="_blank" rel="noopener"
         title="Ολλανδία — καλύτερη απόδοση: Stoiximan">
        <span class="modd-card">
          <span class="modd-lbl">1</span><span class="od">2.00</span>
        </span>
        <!-- .bk-* MUST match the src; add .is-lt for white-bg tiles -->
        <span class="modd-bk bk-stoiximan">
          <img src="logo-assets/rectangle/stoiximan.svg" alt="Stoiximan">
        </span>
      </a>
      <!-- X and 2 identical, each with its own operator tile -->
    </div>

    <span class="modd-div" aria-hidden="true"></span>

    <!-- market 2: O 2.5 / U 2.5 — .is-w (92px), 5-char label -->
    <div class="modd-slide">
      <a class="modd is-w" href="{deeplink}" title="Over 2.5 — …">
        <span class="modd-card">
          <span class="modd-lbl">O 2.5</span><span class="od">1.85</span>
        </span>
        <span class="modd-bk bk-bet365"> … </span>
      </a>
    </div>

    <span class="modd-div" aria-hidden="true"></span>

    <!-- market 3: Ακριβές σκορ — base 72px -->
    <div class="modd-slide"> … </div>

    <!-- market 4: G/G — .is-w, mobile carousel only -->
    <div class="modd-slide only-m"> … </div>
  </div>
  <button class="modd-swipe" type="button" aria-label="Επόμενη αγορά">›</button>
</div>
<span class="modd-rg">21+ · ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ</span>

<!-- V1 — no tile, no 21+ line, uniform 100px cards -->
<div class="moddgrid" data-variant="v1">
  <a class="modd" href="{deeplink}" title="Ολλανδία">
    <span class="modd-card">
      <span class="modd-sel"><span class="modd-lbl">1</span></span>
      <span class="od">2.00</span>
    </span>
  </a>
</div>

<!-- loading -->   <a class="modd is-loading" aria-busy="true" …>
<!-- suspended --> <a class="modd is-susp" aria-disabled="true"
                  title="Η αγορά δεν είναι διαθέσιμη" …> <!-- odd renders as — -->

V4 / V5 — the brand-fill family (§3A, §3B). Separate classes, separate scope, no shared CSS with the above.

<!-- everything lives under .bo so it cannot collide with .modd rules -->
<div class="bo">

  <!-- the market MUST be named outside the control — there is no label slot -->
  <span class="odds-mkt">Over / Under 2.5</span>  <!-- your caption class -->

  <!-- V4 — inline pill, 40px tall, fluid width -->
  <div data-variant="v4">
    <a class="bodd bodd--row bo-stoiximan" href="{deeplink}"
       target="_blank" rel="noopener"
       title="Over 2.5 — Stoiximan">
      <span class="bodd-in">
        <span class="bodd-od">1.85</span>
        <span class="bodd-sep" aria-hidden="true"></span>
        <!-- plain-light, NOT rectangle. bo-* must match the filename -->
        <span class="bodd-bk">
          <img src="logo-assets/plain-light/stoiximan.svg" alt="Stoiximan">
        </span>
      </span>
    </a>
  </div>

  <!-- V5 — stacked block, 100×68px fixed. Identical children, --col instead -->
  <div data-variant="v5" style="display:flex;gap:6px">
    <a class="bodd bodd--col bo-bet365" href="{deeplink}" title="Over 2.5 — bet365">
      <span class="bodd-in">
        <span class="bodd-od">1.85</span>
        <span class="bodd-sep" aria-hidden="true"></span>
        <span class="bodd-bk">
          <img src="logo-assets/plain-light/bet365.svg" alt="bet365">
        </span>
      </span>
    </a>
  </div>

  <span class="modd-rg">21+ · ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ</span>
</div>

<!-- light fills — interwetten · winmasters · winmasters-2 · pamestoixima.
     .is-lt flips the ink; the plain-DARK wordmark must be swapped by hand. -->
<a class="bodd bodd--col bo-interwetten is-lt" …>
  … <img src="logo-assets/plain-dark/interwetten.svg" alt="Interwetten"> …

<!-- loading -->   <a class="bodd bodd--col bo-bet365 is-loading" aria-busy="true" …>
<!-- suspended --> <a class="bodd bodd--col bo-bet365 is-susp" aria-disabled="true" …>

11Build checklist

• Markup per selection (V2/V3): .modd → .modd-card (.modd-lbl + .od) then .modd-bk → <img>. The tile is the anchor's second child, a sibling of the top block — not inside it.
• Point each <img src> at logo-assets/rectangle/<operator>.svg, give it the operator name as alt, and put the matching .bk-<operator> on the same .modd-bk. Add .is-lt for the white-background tiles.
• V3: feed the tile from the best-odds field per selection, so a row mixes operators. V2: feed the same sponsor to every card. Same markup either way.
• Keep the tile at a hard height:26px — never aspect-ratio. Widening a card must not make its tile taller.
• Keep the logo at height:36px inside that 26px band — the overflow crop is intentional and is what keeps the wordmark full-size. Setting it to height:100% shrinks every logo by 28%. Add .is-tall only for assets whose mark fills more than ~72% of the tile (currently just pamestoixima-long).
• Keep overflow:hidden on .modd, or the tile's square corners punch through the 6px radius.
• Pick the width class from the market's longest label and apply it to every card in that market: base 72px for 1 X 2 1-0 2-1, .is-w 92px for O 2.5 U 2.5 G/G Ναι G/G Όχι.
• Group each market in a .modd-slide; tag G/G .only-m; put a .modd-div between markets on desktop. Verify scroll-snap and the .modd-swipe chevron at 360px.
• Hover must be identical in all three variants: gradient on .modd-card from the top, shadow on the shell, border untouched, no transform, tile never tinted.
• Render the 21+ · ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ line (.modd-rg) for V2 and V3.
• Wire the suspended-state click guard on [aria-disabled="true"].
• Mirror the identical change into foxbet-responsive-live.html — the odds CTA is the same in both; the only difference on the live page is the countdown versus the live score/clock elsewhere in the banner.

V4 / V5 — do not start until signed off. When they are:

• Markup per selection: .bodd → .bodd-in → (.bodd-od + .bodd-sep + .bodd-bk → <img>). Keep both boxes. The inner one carries the drop-shadow that reads as the engraved edge; merging them into one flattens the control.
• Keep the hairline at zero layout size (flex:0 0 0 + absolute ::after). A real 1px makes every V5 69px instead of 68px.
• Point each <img src> at logo-assets/plain-light/<operator>.svg — never rectangle/, which would draw a second box inside the fill — and put the matching .bo-<operator> on the .bodd.
• For the four light fills (interwetten, winmasters, winmasters-2, pamestoixima) add .is-lt and swap the src to plain-dark/. The class cannot change the file for you.
• Add .is-icon to the .bodd-bk of any mark whose aspect ratio is below ~2.5 — currently interwetten and pamestoixima. Measure the export; don't judge by eye.
• Declare the fill once, on the shell — .bodd-in uses background:inherit. Only bo-elabet needs a second declaration, because a gradient cannot be inherited.
• V5 stays at a fixed 100px with flex:0 0 auto. V4 stays fluid with the logo cell taking the leftover width.
• Pressed uses translateY(1px) + a collapsed bevel, not the scale() of V1/V2/V3.
• Render the 21+ · ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ line and name the market in a caption above the control — neither variant has a label slot.
• Give every control a title / aria-label: the only text inside is a bare number.