/* Partner logos keep their supplied proportions inside the existing tiles. */
/* They are not pixel art: scale them smoothly even inside the pixelated hero (the picks box). */
.logo-tile img { image-rendering: auto; }
.logo-tile[data-brand="betbay"] { background: #fff; }
.logo-tile[data-brand="betbay"] img { object-fit: contain; }
.logo-tile[data-brand="kudosbet"] { background: #1b2c45; }
.logo-tile[data-brand="kudosbet"] img { transform: scale(2.4); }
.welcome-breakdown { grid-column: 1 / -1; }
.welcome-stages { display: grid; gap: 12px; }
.welcome-stages article { min-width: 0; padding: 14px; border: 2px solid var(--menu-line); background: var(--night); }
.welcome-stages strong { display: block; color: #fff; font-size: 16px; }
.welcome-stages article p { margin: 8px 0 0; }
.welcome-game { margin: 16px 0; }
.welcome-notes { display: grid; gap: 8px; }
.campaign-note { margin: 20px 0 0; background: #211b3f; border: 2px solid var(--orange); border-left-width: 6px; }
.campaign-note > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; list-style: none; cursor: pointer; }
.campaign-note > summary::-webkit-details-marker { display: none; }
.campaign-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.campaign-summary strong { color: var(--orange); font-size: 16px; }
.campaign-toggle { color: var(--orange); font: 24px/1 var(--pixel); }
.campaign-note[open] .campaign-toggle { transform: rotate(45deg); }
.campaign-content { padding: 0 16px 16px; }
.campaign-note h4 { margin: 0 0 8px; color: var(--orange); font-size: 17px; line-height: 1.4; }
.campaign-note p { margin: 0 0 10px; font-size: 14px; color: var(--text); }
.campaign-note .campaign-period { color: var(--orange); font-weight: 700; }
.campaign-tiers { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.campaign-tiers span { font-size: 13px; color: var(--muted); }
.campaign-tiers b { color: #fff; }
.campaign-note details { font-size: 13px; }
.campaign-content details { margin-top: 4px; }
.campaign-content details summary { cursor: pointer; color: var(--orange); padding: 4px 0; }
.campaign-content details p { margin-top: 10px; font-size: 13px; }
@media (min-width: 720px) { .welcome-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.logo-tile[data-brand="epicbet"] { background: #06152b; width: 88px; }
.logo-tile[data-brand="epicbet"].big { width: 120px; }
.logo-tile[data-brand="epicbet"] img { object-fit: contain; }
/* Arkadino: thin neon wordmark, so it gets a dark tile to stand on. */
.logo-tile[data-brand="arkadino"] { background: #14081f; }
.logo-tile[data-brand="arkadino"] img { object-fit: contain; padding: 4px; }
/* Slotbox: white wordmark on the brand purple. */
.logo-tile[data-brand="slotbox"] { background: #311261; }
.logo-tile[data-brand="slotbox"] img { object-fit: contain; padding: 8px; }

/* Cut-out logos (rekrutilist-upload, SlottiMonsteri): no tile background, original proportions. */
.logo-tile:is([data-brand="lunaloots"], [data-brand="gamblegorilla"], [data-brand="wagerwhale"], [data-brand="slottimonsteri"], [data-brand="spinboss"], [data-brand="westace"], [data-brand="go4casino"], [data-brand="spinstag"]) { background: transparent; box-shadow: none; }
.logo-tile:is([data-brand="lunaloots"], [data-brand="gamblegorilla"], [data-brand="wagerwhale"], [data-brand="slottimonsteri"], [data-brand="spinboss"], [data-brand="westace"], [data-brand="go4casino"], [data-brand="spinstag"]) img { display: block; height: auto; object-fit: contain; }
.pick .logo-tile:is([data-brand="lunaloots"], [data-brand="gamblegorilla"], [data-brand="wagerwhale"], [data-brand="slottimonsteri"], [data-brand="spinboss"], [data-brand="westace"], [data-brand="go4casino"], [data-brand="spinstag"]) { display: block; height: auto; aspect-ratio: auto; }
/* Square logos: in the hero picks the tile takes the logo's own square size instead of letterboxing it on the camo background. */
.pick .logo-tile:is([data-brand="hypekasino"], [data-brand="kingmaker"], [data-brand="boost-casino"], [data-brand="casinova"], [data-brand="cleobetra"], [data-brand="royalrook"]) { width: var(--pick-logo-height); justify-self: center; }
.welcome-game a { overflow-wrap: anywhere; }
.welcome-stages.single { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------- casino list cards
   Phone: name, bonus box, the three stat boxes and buttons stacked. 600 px+: buttons move to a
   right-hand column. 1024 px+: name | bonus + stats | buttons. Description, pros, cons and facts open under Tiedot; the
   detailed bonus terms open from the Lisätiedot bar at the bottom of that panel.
   Campaign and Tiedot rows are implicit grid rows, so a card without them gets no empty gap. */
.casino-list { gap: 24px; }
/* Filter toggles above the list (Verovapaa, Minimitalletus 10 €); pressed = green, like a selected Vertaa. */
.list-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; }
.list-filters button { min-height: 44px; padding: 10px 14px 8px; font: 20px/1 var(--pixel); text-transform: uppercase;
  color: var(--muted); background: transparent; border: 2px solid var(--menu-line); cursor: pointer; }
.list-filters button:hover { color: #fff; border-color: #fff; }
.list-filters button[aria-pressed="true"] { background: var(--green); color: var(--ink); border-color: var(--ink); }
.filter-count { margin-left: auto; font-size: 14px; color: var(--muted); }
.list-empty { margin: 0; padding: 18px; color: var(--muted); border: 2px dashed var(--menu-line); }
.casino-card {
  display: grid; gap: 12px; padding: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "id" "offer" "stats" "actions";
  box-shadow: 0 0 0 4px var(--ink), 6px 6px 0 4px rgba(0, 0, 0, .55);
}
.casino-card > * { min-width: 0; }

/* Logo sits on top of the name; name and licence badge share a line when there is room. */
.cc-id { grid-area: id; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.casino-card .logo-tile.big { flex: none; width: 88px; height: 58px; font-size: 20px; border-width: 2px; }
.casino-card .logo-tile.big:is([data-brand="lunaloots"], [data-brand="gamblegorilla"], [data-brand="wagerwhale"], [data-brand="slottimonsteri"], [data-brand="spinboss"], [data-brand="westace"], [data-brand="go4casino"], [data-brand="spinstag"]) { border: 0; }
.cc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.cc-name strong { font: 20px/1.1 var(--pixel); font-weight: 400; text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.cc-name .lic { font-size: 10px; padding: 4px 5px 3px; border-width: 1px; }

.cc-offer { grid-area: offer; padding: 10px 12px; background: #0b1235; border: 2px solid var(--menu-line); }
.cc-offer small { display: block; margin-bottom: 6px; font: 20px/1 var(--pixel); text-transform: uppercase; color: var(--green); }
.cc-bonus { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; color: #fff; }
.cc-bonus .hl { color: var(--yellow); }
.cc-terms { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.cc-tags { display: none; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.cc-tags span { font-size: 12px; line-height: 1; padding: 5px 7px 4px; color: var(--muted); background: rgba(255, 255, 255, .06); border: 1px solid var(--menu-line); }

.cc-stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.cc-stats > div { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; padding: 7px 8px 6px; background: #0b1235; border: 2px solid var(--menu-line); }
.cc-stats dt { font-size: 12px; line-height: 1.25; color: var(--muted); }
.cc-stats dd { margin: 0; font: 20px/1.1 var(--pixel); text-transform: uppercase; color: #fff; overflow-wrap: break-word; }
.cc-stats dd.green { color: var(--green); }
.cc-stats dd.orange { color: var(--orange); }
/* Three pixel-font values don't fit side by side on a phone ("CURAÇAO" alone is ~85px), so phones use the body font. */
@media (max-width: 599px) {
  .cc-stats { gap: 6px; }
  .cc-stats dd { font: 700 15px/1.25 var(--sans); text-transform: none; }
}

.cc-actions { grid-area: actions; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.cc-actions .btn { min-height: 44px; padding-inline: 6px; margin-right: 4px; }
.cc-actions button { font: 20px/1 var(--pixel); text-transform: uppercase; background: transparent; color: var(--muted); border: 2px solid var(--menu-line); padding: 8px 6px 6px; min-height: 44px; cursor: pointer; }
.cc-actions button:hover, .cc-actions button[aria-expanded="true"] { color: #fff; border-color: #fff; }
.cc-actions button.selected { background: var(--green); color: var(--ink); border-color: var(--ink); }
@media (max-width: 349px) {
  .cc-actions { grid-template-columns: 1fr 1fr; }
  .cc-actions .btn { grid-column: 1 / -1; }
}

.casino-card .campaign-note { grid-column: 1 / -1; margin: 0; }

.casino-card .card-detail { grid-column: 1 / -1; display: none; gap: 18px; margin: 0; padding: 14px 0 0; border-top: 2px solid var(--menu-line); }
.casino-card.expanded .card-detail { display: grid; grid-template-columns: minmax(0, 1fr); }
.card-detail :is(.cd-about, .cd-facts) { grid-column: 1 / -1; }
.card-detail h4 { font: 20px/1 var(--pixel); font-weight: 400; text-transform: uppercase; color: var(--yellow); margin: 0 0 10px; }
.card-detail p, .card-detail ul { font-size: 14px; color: var(--muted); }
.card-detail ul { margin: 0; padding-left: 18px; }
.cd-about p { margin: 0; font-size: 15px; color: var(--text); }
.cd-about .cd-terms { margin-top: 8px; font-size: 12px; color: var(--muted); }
.card-detail :is(.cd-pros, .cd-cons) { list-style: none; padding: 0; display: grid; gap: 6px; }
.card-detail :is(.cd-pros, .cd-cons) li { display: flex; gap: 8px; }
.card-detail :is(.cd-pros, .cd-cons) li::before { flex: none; width: 1em; font-weight: 700; }
.cd-pros li::before { content: "✓"; color: var(--green); }
.cd-cons li::before { content: "–"; color: var(--orange); }
.cd-facts dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); column-gap: 24px; }
.cd-facts dl > div { display: grid; gap: 2px; padding: 7px 0; border-bottom: 1px solid rgba(90, 106, 200, .45); font-size: 14px; }
.cd-facts dt { color: var(--muted); font-size: 12px; }
@media (min-width: 600px) {
  .cd-facts dl > div { grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; }
  .cd-facts dt { font-size: 14px; }
}
.cd-facts dd { margin: 0; color: #fff; overflow-wrap: anywhere; }
.card-detail .cd-more { grid-column: 1 / -1; }
.cd-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px 6px;
  font: 20px/1 var(--pixel); text-transform: uppercase; color: var(--muted); border: 2px solid var(--menu-line); list-style: none; cursor: pointer; }
.cd-more > summary::-webkit-details-marker { display: none; }
.cd-more > summary:hover, .cd-more[open] > summary { color: #fff; border-color: #fff; }
.cd-more-toggle { color: var(--yellow); }
.cd-more[open] .cd-more-toggle { transform: rotate(45deg); }
.cd-more .welcome-breakdown { margin-top: 16px; }

@media (min-width: 600px) {
  .casino-list { gap: 26px; }
  .casino-card {
    gap: 10px 20px; padding: 16px 18px; align-items: center;
    grid-template-columns: minmax(0, 1fr) 210px;
    grid-template-areas: "id actions" "offer actions" "stats actions";
    box-shadow: 0 0 0 4px var(--ink), 10px 10px 0 4px rgba(0, 0, 0, .55);
  }
  .cc-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cc-actions .btn { grid-column: 1 / -1; margin: 0 7px 7px 0; }
  .cc-tags:not(:empty) { display: flex; }
}
@media (min-width: 720px) {
  .casino-card.expanded .card-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .casino-card {
    gap: 12px 28px; padding: 18px 22px;
    grid-template-columns: 240px minmax(0, 1fr) 210px;
    grid-template-areas: "id offer actions" "id stats actions";
  }
  /* The name column fills its space: big logo, 30px name and a full-size licence badge, centred. */
  .cc-id { gap: 10px; align-items: center; text-align: center; }
  .cc-name { flex-direction: column; align-items: center; gap: 8px; }
  .casino-card .logo-tile.big { width: 180px; height: 120px; }
  .cc-name strong { font-size: 30px; line-height: 1.05; }
  .cc-name .lic { font-size: 20px; padding: 6px 8px 4px; border-width: 2px; }
  .cc-bonus { font-size: 19px; }
}

/* Hero picks on phones: logo and name on one line, bonus full width, key terms beside Pelaa. */
@media (max-width: 599px) {
  .pick {
    --pick-logo-width: 60px; --pick-logo-height: 42px;
    grid-template-columns: var(--pick-logo-width) minmax(0, 1fr) auto;
    grid-template-areas: "logo name name" "bonus bonus bonus" "terms terms btn";
    gap: 8px 10px; padding: 12px 0;
  }
  .pick > div, .pick-body { display: contents; }
  .pick .logo-tile { grid-area: logo; }
  .pick-name { grid-area: name; }
  .pick-bonus { grid-area: bonus; margin: 0; }
  .pick-terms { grid-area: terms; margin: 0; align-self: center; }
  .pick .btn { grid-area: btn; align-self: center; margin: 0 7px 7px 0; }
}

/* ---------------------------------------------------------------- compare tray + dialog
   Desktop: a normal table with the row labels on the left. Phones: each row becomes a label line
   over one value column per casino (--cols, set by casinos.js), so all picks fit without sideways scroll. */
/* Title and note stay put; only the comparison scrolls (the dialog itself never does, so its inner frame stays whole). */
dialog.box[open] { display: flex; flex-direction: column; overflow: hidden; }
#compare-dialog .compare-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding-inline: 3px; }
.compare-table { min-width: 0; font-size: 14px; }
.compare-table thead th { vertical-align: bottom; }
.compare-table thead th .logo-tile { width: 88px; height: 58px; margin-bottom: 8px; border-width: 2px; }
.compare-table thead th span { display: block; }
.compare-table tbody th { width: 9em; font: 20px/1.1 var(--pixel); text-transform: uppercase; color: var(--yellow); }
.compare-table td { color: var(--text); -webkit-hyphens: auto; hyphens: auto; }
.compare-table .cmp-bonus td { font-weight: 700; color: #fff; }
.compare-table .cmp-bonus .hl { color: var(--yellow); }
.compare-table .cmp-small td { font-size: 13px; color: var(--muted); }
.compare-table tfoot td { border-bottom: 0; }
.compare-table tfoot .btn { width: 100%; }
.compare-table tfoot .btn, .compare-table tfoot .btn:hover { box-shadow: 0 0 0 3px var(--ink); transform: none; }

@media (max-width: 719px) {
  dialog.box { max-width: calc(100% - 16px); max-height: calc(100% - 16px); padding: 18px 14px; }
  #compare-dialog .compare-scroll { margin: 8px 0 10px; }
  .compare-table, .compare-table :is(thead, tbody, tfoot) { display: block; }
  .compare-table tr { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: 10px; }
  .compare-table :is(thead, tfoot) td:first-child { display: none; }
  .compare-table :is(th, td) { padding: 0; border: 0; }
  /* Casino names stay on top and the Pelaa buttons at the bottom while the rows scroll between them. */
  .compare-table :is(thead, tfoot) { position: sticky; z-index: 1; background: var(--menu); }
  .compare-table thead { top: 0; }
  .compare-table tfoot { bottom: 0; }
  .compare-table thead tr { padding-bottom: 10px; border-bottom: 2px solid var(--menu-line); }
  .compare-table thead th .logo-tile { width: 100%; max-width: 88px; height: 50px; }
  .compare-table thead th span { font: 700 14px/1.25 var(--sans); text-transform: none; color: #fff; overflow-wrap: anywhere; }
  .compare-table tbody tr { row-gap: 4px; padding: 10px 0; border-bottom: 2px solid var(--menu-line); }
  .compare-table tbody th { grid-column: 1 / -1; width: auto; }
  .compare-table td { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
  .compare-table .cmp-bonus td { font-size: 14px; }
  .compare-table .cmp-small td { font-size: 12px; }
  .compare-table tfoot tr { padding: 12px 0 6px; }
  .compare-table tfoot .btn { min-width: 0; padding-inline: 4px; }
}
@media (max-width: 399px) { .cmp-arrow { display: none; } }

/* Tray on phones: one slim row, names cut with an ellipsis. */
@media (max-width: 599px) {
  .compare-tray { bottom: 10px; width: calc(100% - 20px); flex-wrap: nowrap; gap: 10px; padding: 10px 12px; }
  .compare-tray .names { flex: 1; min-width: 0; font-size: 13px; }
  .compare-tray [data-compare-names] { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .compare-tray .actions { flex: none; gap: 10px; }
  .tray-nyt { display: none; }
}
/* SlotsHammer: near-square emblem on a transparent background; fit it inside the tile instead of letting it grow taller. */
.logo-tile[data-brand="slotshammer"] { background: transparent; box-shadow: none; border: 0; }
.logo-tile[data-brand="slotshammer"] img { object-fit: contain; }