/* Scoped to the plugin's own wrapper - deliberately does not touch <body> or
   other page-wide styles, since this renders inside an existing WP page. */
.rr-mkn-wrap {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

.rr-mkn-wrap .cabinet {
  width: 100%;
  max-width: 640px;
  background: linear-gradient(#141417, #0d0d0f);
  border: 6px solid #2a2a2e;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 0 40px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.6);
  color: #e8e2d0;
  font-family: 'Segoe UI', Arial, sans-serif;
  box-sizing: border-box;
}
.rr-mkn-wrap .cabinet * { box-sizing: border-box; }

.cabinet-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2160 / 3800;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 4px;
}
.cabinet-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}

.disp-slot {
  position: absolute;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* slot-bonus is drawn as "spelen" and slot-spelen as "uitbetalen" on the new
   layout artwork - only the printed word changed, ids/behavior did not. */
#slot-credit    { left: 87.2%; top: 15.6%; width: 7.9%; height: 2.5%; }
#slot-bonus     { left: 87.2%; top: 31.3%; width: 7.9%; height: 2.5%; }
#slot-gewonnen  { left: 87.2%; top: 34.5%; width: 7.9%; height: 2.5%; }
#slot-spelen    { left: 87.2%; top: 38.7%; width: 7.9%; height: 2.5%; }

.vfd {
  font-family: 'Consolas', 'Courier New', monospace;
  font-weight: bold;
  color: #ff3b30;
  text-shadow: 0 0 6px #ff3b30, 0 0 10px #b3140c;
  font-size: 2.4cqw;
  letter-spacing: 0.3cqw;
  line-height: 1;
}

.reelbank { display: contents; }

.reel-window { position: absolute; z-index: 1; }
#reels-top .reel-window[data-reel="0"] { left: 13.9%; top: 32.6%; width: 11.9%; height: 11.3%; }
#reels-top .reel-window[data-reel="1"] { left: 32.5%; top: 32.6%; width: 11.9%; height: 11.3%; }
#reels-top .reel-window[data-reel="2"] { left: 51.0%; top: 32.6%; width: 11.9%; height: 11.3%; }
#reels-bottom .reel-window[data-reel="0"] { left: 16.7%; top: 69.4%; width: 11.9%; height: 11.8%; }
#reels-bottom .reel-window[data-reel="1"] { left: 34.8%; top: 69.4%; width: 11.9%; height: 11.8%; }
#reels-bottom .reel-window[data-reel="2"] { left: 52.8%; top: 69.4%; width: 11.9%; height: 11.8%; }

.reel-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050506;
}
.static-cells {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cell {
  height: 33.334%;
  flex: 0 0 33.334%;
  box-sizing: border-box;
  background-color: #050506;
  border-bottom: 1px solid #1c1c1e;
  background-size: 72%;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0.5) saturate(0.7);
  transition: filter 0.3s ease;
}
.static-cells .cell:last-child { border-bottom: none; }
.cell.winline { box-shadow: 0 0 0 1px #4a3018 inset; }

/* Backlight: dark at rest, lit while a reel is spinning, held bright+glowing
   on a winning symbol until its points finish counting. */
.reel-window.lit .cell,
.cell.lit-cell {
  filter: brightness(1.15) saturate(1.3) drop-shadow(0 0 5px rgba(255, 205, 110, 0.75));
}
.reel-window .cell.win-flash {
  animation: lampwin 0.4s steps(2, jump-none) infinite;
}
@keyframes lampwin {
  0%, 100% { filter: brightness(1.8) saturate(1.5) drop-shadow(0 0 8px #ffd35c) drop-shadow(0 0 18px #ffb400); }
  50% { filter: brightness(0.5) saturate(0.7); }
}

.reel-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
  transform: translateY(var(--ry-start));
}
/* Constant-speed spin, then an abrupt stop with a small overshoot bounce
   instead of easing smoothly into rest. */
.reel-strip.spin-bounce {
  animation-name: reel-bounce;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes reel-bounce {
  0%   { transform: translateY(var(--ry-start)); animation-timing-function: linear; }
  88%  { transform: translateY(var(--ry-final)); animation-timing-function: ease-out; }
  94%  { transform: translateY(var(--ry-over)); animation-timing-function: ease-in; }
  100% { transform: translateY(var(--ry-final)); }
}

/* The photo's own win-lines/frame, cropped to this window and layered back on
   top of the rendered symbols so the artwork's red lines stay visible. */
.reel-line-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.reel-window.held .cell { box-shadow: 0 0 0 2px #ffb400 inset; }

/* Every control is an invisible hit-area over the button art already drawn
   into the cabinet photo. `backdrop-filter` brightens whatever shows through
   (the photo's button art) since these elements draw nothing themselves. */
.photo-btn {
  position: absolute;
  background: transparent;
  border: none;
  border-radius: 6%;
  padding: 0;
  margin: 0;
  cursor: pointer;
  backdrop-filter: brightness(0.4) saturate(0.35);
  -webkit-backdrop-filter: brightness(0.4) saturate(0.35);
  transition: backdrop-filter 0.2s ease, box-shadow 0.2s ease, transform 0.05s ease;
}
.photo-btn:active { transform: translateY(1px); }
.photo-btn:disabled { cursor: not-allowed; }
.photo-btn.active-pulse { animation: photobtnpulse 1s ease-in-out infinite; }
@keyframes photobtnpulse {
  0%, 100% {
    backdrop-filter: brightness(1.4) saturate(1.4);
    -webkit-backdrop-filter: brightness(1.4) saturate(1.4);
    box-shadow: 0 0 10px 3px rgba(255,255,255,0.6);
  }
  50% {
    backdrop-filter: brightness(0.85) saturate(0.95);
    -webkit-backdrop-filter: brightness(0.85) saturate(0.95);
    box-shadow: none;
  }
}
/* Wins over .active-pulse (declared after it, same specificity) so a held
   hold-button always shows its own steady gold pulse, never the generic one. */
.photo-btn.held { animation: heldglow 1s ease-in-out infinite; }
@keyframes heldglow {
  0%, 100% {
    backdrop-filter: brightness(1.6) saturate(1.4);
    -webkit-backdrop-filter: brightness(1.6) saturate(1.4);
    box-shadow: 0 0 14px 4px rgba(255,211,92,0.9);
  }
  50% {
    backdrop-filter: brightness(1.0) saturate(1.05);
    -webkit-backdrop-filter: brightness(1.0) saturate(1.05);
    box-shadow: 0 0 4px 1px rgba(255,211,92,0.4);
  }
}

/* Real "lit" button/lamp artwork, cropped from the same source as the
   layout's baked-in "off" art. Sits inside its .photo-btn/.photo-lamp and
   fades in exactly when that control's existing active/held/lit class is
   toggled by game.js - no JS changes needed for this. */
.btn-on-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.photo-btn.active-pulse .btn-on-art,
.photo-btn.held .btn-on-art,
.photo-lamp.lit .btn-on-art { opacity: 1; }

.photo-lamp {
  position: absolute;
  border-radius: 6%;
  backdrop-filter: brightness(0.32) saturate(0.3);
  -webkit-backdrop-filter: brightness(0.32) saturate(0.3);
  transition: backdrop-filter 0.15s ease, box-shadow 0.15s ease;
  pointer-events: none;
}
.photo-lamp.blink { animation: lampblink 0.15s steps(1, jump-none) infinite; }
.photo-lamp.blink .btn-on-art { animation: btnonartblink 0.15s steps(1, jump-none) infinite; }
@keyframes btnonartblink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.photo-lamp.lit {
  backdrop-filter: brightness(1.6) saturate(1.4);
  -webkit-backdrop-filter: brightness(1.6) saturate(1.4);
  box-shadow: 0 0 14px 4px rgba(255,255,255,0.75);
}
@keyframes lampblink {
  0%, 100% {
    backdrop-filter: brightness(1.6) saturate(1.4);
    -webkit-backdrop-filter: brightness(1.6) saturate(1.4);
    box-shadow: 0 0 14px 4px rgba(255,255,255,0.75);
  }
  50% {
    backdrop-filter: brightness(0.32) saturate(0.3);
    -webkit-backdrop-filter: brightness(0.32) saturate(0.3);
    box-shadow: none;
  }
}

/* Row under the top reel bank (no coin-slot button - no coin insert in the WP
   version). btn-win-spel ("gewonnen naar spel") sits in this row on the new
   artwork, relabeled "winst naar beneden" - the old bottom row only draws 5
   button slots now, one fewer than before, matching the move. */
#btn-payout      { left: 4.7%;  top: 53.5%; width: 7.2%; height: 4.1%; }
#btn-spel-credit { left: 18.4%; top: 53.5%; width: 7.2%; height: 4.1%; }
#btn-win-spel    { left: 32.1%; top: 53.5%; width: 7.2%; height: 4.1%; }
#lamp-win4       { left: 45.8%; top: 53.5%; width: 7.2%; height: 4.1%; }
#lamp-verlies    { left: 59.5%; top: 53.5%; width: 7.2%; height: 4.1%; }
#btn-bonus-down  { left: 73.2%; top: 53.5%; width: 7.2%; height: 4.1%; }
#btn-win-bonus   { left: 86.9%; top: 53.5%; width: 7.4%; height: 4.1%; }

/* Row under the bottom reel bank */
#btn-cancel   { left: 5.3%;  top: 84.5%; width: 7.2%; height: 4.1%; }
#btn-hold0    { left: 19.1%; top: 84.5%; width: 7.2%; height: 4.1%; }
#btn-hold1    { left: 36.9%; top: 84.5%; width: 7.2%; height: 4.1%; }
#btn-hold2    { left: 54.6%; top: 84.5%; width: 7.2%; height: 4.1%; }
#btn-start    { left: 82.9%; top: 84.5%; width: 7.2%; height: 4.1%; }

.rr-mkn-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}
.rr-mkn-overlay.show { display: flex; }
.voucher-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#1c1c20, #0e0e10);
  border: 2px solid #ffd35c;
  border-radius: 12px;
  padding: 30px 46px;
  text-align: center;
  box-shadow: 0 0 40px rgba(255, 211, 92, 0.35);
  color: #e8e2d0;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.voucher-title { letter-spacing: 3px; color: #ffd35c; font-size: 0.9rem; margin-bottom: 8px; }
.voucher-amount { font-family: 'Consolas', monospace; font-size: 2.6rem; font-weight: bold; color: #fff6dd; text-shadow: 0 0 10px #ffd35c; }
.voucher-sub { font-size: 0.75rem; color: #cfcfd6; margin-bottom: 14px; }
#rr-voucher-close {
  background: #ffd35c; border: none; border-radius: 6px; padding: 6px 18px;
  font-weight: bold; cursor: pointer;
}
.confetti-layer { position: absolute; inset: 0; pointer-events: none; }
.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px; height: 8px;
  opacity: 0.9;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(340px) rotate(360deg); opacity: 0; }
}

.rr-mkn-toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1c1c20;
  border: 1px solid #ffd35c;
  color: #ffd35c;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100001;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.rr-mkn-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Hi-score leaderboard shortcodes ([randomrunner_hiscore] and the compact
   [randomrunner_hiscore_sidebar]). An explicit font-size here matters - with
   none, the table inherits the theme's own (often large) widget/paragraph
   size, which is what made "Credits" wrap onto two lines in a narrow sidebar. */
.rr-mkn-hiscore {
  border-collapse: collapse;
  width: 100%;
  max-width: 480px;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 0.95rem;
}
.rr-mkn-hiscore th, .rr-mkn-hiscore td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.rr-mkn-hiscore th { font-weight: 600; }
.rr-mkn-hiscore tr:first-child td { font-weight: bold; color: #b8860b; }

/* Compact variant: smaller text and tighter padding for a narrow sidebar
   column, and a non-wrapping header so "Credits" stays on one line. */
.rr-mkn-hiscore-compact {
  max-width: 100%;
  font-size: 0.75rem;
}
.rr-mkn-hiscore-compact th,
.rr-mkn-hiscore-compact td {
  padding: 4px 6px;
}
.rr-mkn-hiscore-compact th { white-space: nowrap; }