/* Carrot Crown (/casino/carrot): the 7x7 bed of symbol tiles set into the oak planter of the garden scene, the sideline
   where eaten fruit stand, the spins sign under the logo, the king's feast, golden coins and multiplier badges, the
   wooden win plaques and the growing total sign (js/casino/carrot.js). Art lives in /casino/slots/carrot/. */

.sl-carrot { --f1: #3b2612; --f2: #c98a2b; --f3: #ffe2a8; --cc-gold: #ffd36a; --cc-wood: #6b4420; }

/* ----- the stage: the planter is lined up behind the reels (carrot.js alignBed); the logo sits above the bed */
.sl-carrot .sl-stage { height: clamp(620px, calc(100vh - 290px), 960px); }
@media (min-width: 1100px) {
  .sl.sl-carrot { width: min(calc(100vw - 64px), 1800px); margin-left: calc(50% - min(calc(50vw - 32px), 900px)); }
}
.sl-carrot .sl-bg { inset: 0; animation: none; background-repeat: no-repeat; background-color: #1d1a12; transition: filter .6s; }
.sl-carrot .sl-bg::after { background: linear-gradient(180deg, rgba(10, 8, 4, .22), rgba(10, 8, 4, 0) 16%, rgba(10, 8, 4, 0) 84%, rgba(10, 8, 4, .5)); }
.sl-carrot .sl-stage.bonus .sl-bg { filter: none; }
/* the feast's scene sits under the garden and shows through when the bed is lit for the feast */
.cc-bg2 { position: absolute; inset: 0; z-index: 0; background-repeat: no-repeat; opacity: 0; pointer-events: none; }
.sl-carrot .sl-amb { z-index: 1; }
.sl-carrot .sl-meter { display: none; }
.sl-carrot .sl-top { z-index: 2; padding-top: 10px; }
.sl-carrot .sl-logo { height: clamp(54px, 9.5vh, 96px); max-width: 70%; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .7)); }
.sl-carrot .sl-board { padding: clamp(10px, 2vh, 22px) 16px 12px; z-index: 2; }
/* the frame is the planter itself (part of the picture): the reels sit straight on the soil */
.sl-carrot .sl-frame { padding: 0; border: 0; border-radius: 4px; background: transparent; box-shadow: none; overflow: visible; }
.sl-carrot .sl-stage.bonus .sl-frame { box-shadow: none; }
.sl-carrot .sl-reels { background: transparent; border-radius: 3px; overflow: visible; gap: 0; }
.sl-carrot .sl-reel { overflow: visible; background: transparent; }
.sl-carrot .sl-reel + .sl-reel { box-shadow: none; }
/* every symbol is a whole square tile with a thin dark gap around it */
.sl-carrot .sl-cell { padding: 0; }
.sl-carrot .sl-sym { width: 93%; height: 93%; border-radius: 8%; object-fit: cover; box-shadow: 0 calc(var(--cell) * .03) calc(var(--cell) * .06) rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .35); filter: none; transition: none; background: #2a1c10; }
.sl-carrot .sl-cell.void::after { inset: 3.5%; border-radius: 8%; background: url("/casino/slots/carrot/tile-soil.webp") center / cover; opacity: .55; box-shadow: inset 0 0 calc(var(--cell) * .12) rgba(0, 0, 0, .6); }
.sl-carrot .sl-tag, .sl-carrot .sl-mult { display: none; }
.sl-carrot .sl-cell.hit::before, .sl-carrot .sl-cell.hit2::before { inset: 1.5%; border-radius: 10%; background: none; box-shadow: inset 0 0 0 2px rgba(255, 229, 150, .95), 0 0 calc(var(--cell) * .18) rgba(255, 200, 80, .8); }
.sl-carrot .sl-cell.hit .sl-sym, .sl-carrot .sl-cell.hit2 .sl-sym { animation: sl-throb .6s ease-in-out infinite alternate; filter: brightness(1.12); }
.sl-carrot .sl-reels.dim .sl-cell:not(.hit):not(.hit2) { filter: brightness(.38) saturate(.5); }
.sl-carrot .sl-reels.dim .sl-cell.king { filter: none; }
/* the multiplier badge a golden king drops on a carrot */
.cc-mult { position: absolute; right: 2%; bottom: 2%; z-index: 2; min-width: 44%; padding: 0 6%; height: 34%; display: grid; place-items: center; border-radius: 999px; font: 900 calc(var(--cell) * .2)/1 var(--font-display); letter-spacing: -.02em; color: #4a2a00; background: radial-gradient(circle at 40% 30%, #fff5c4, #ffd25a 45%, #d8961a); box-shadow: 0 2px 4px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(120, 70, 0, .5); pointer-events: none; transform-origin: 50% 50%; }
.cc-mult.big { right: auto; left: 50%; bottom: 50%; transform: translate(-50%, 50%); min-width: 62%; height: 42%; font-size: calc(var(--cell) * .26); }

/* ----- the sideline: eaten fruit stand beside the bed (hidden on narrow screens) */
.cc-side { position: absolute; top: 20%; bottom: 10%; width: clamp(70px, 8vw, 128px); z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; pointer-events: none; }
.cc-side.left { right: calc(50% + var(--half, 300px) + 8px); }
.cc-side.right { left: calc(50% + var(--half, 300px) + 8px); }
.cc-fruit { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6)); transform-origin: 50% 95%; animation: cc-stand 3.6s ease-in-out infinite; }
.cc-fruit:nth-child(2n) { animation-delay: -1.2s; }
.cc-fruit:nth-child(3n) { animation-delay: -2.3s; }
@keyframes cc-stand { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03, .97) translateY(1px); } }

/* the spins sign under the logo during the feast */
.cc-spins { position: relative; width: 100%; max-width: 230px; aspect-ratio: 900 / 463; opacity: 0; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .7)); transition: opacity .35s; pointer-events: none; }
.cc-spins.on { opacity: 1; }
.cc-spins img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cc-sp { position: absolute; left: 10%; right: 10%; top: 20%; bottom: 20%; display: grid; place-items: center; align-content: center; gap: 1px; }
.cc-sp span { font: 800 10px/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #ffe9b8; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); }
.cc-sp b { font: 900 30px/1 var(--font-display); letter-spacing: -.02em; color: #fff6dc; text-shadow: 0 2px 0 #3b2612, 0 0 14px rgba(255, 200, 80, .7); font-variant-numeric: tabular-nums; }
.sl-carrot .sl-top { flex-direction: column; gap: 2px; }

/* ----- the effects layers over the stage */
.sl-carrot .cv-fxc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.sl-carrot .cv-fxl { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.sl-carrot .cv-fxl > * { position: absolute; left: 0; top: 0; }
/* actors: the king out of his cell, the fruit he eats, a coin in flight, a mole, a fruit flying to the sideline */
.cc-actor { object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)); will-change: transform; transform-origin: 50% 50%; }
.cc-actor.king { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(255, 210, 90, .55)); }
.cc-actor.victim { transform-origin: 50% 60%; }
.cc-coin { display: grid; place-items: center; will-change: transform; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(255, 210, 90, .7)); }
.cc-coin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cc-coin b { position: relative; font: 900 var(--fs, 24px)/1 var(--font-display); letter-spacing: -.03em; color: #4a2a00; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
/* numbers in flight and numbers that pop off a spot */
.cc-fnum { font: 900 var(--fs, 24px)/1 var(--font-display); letter-spacing: -.03em; color: #fff7dc; white-space: nowrap; text-shadow: 0 0 12px rgba(255, 190, 70, .95), 0 0 2px #000, 0 2px 0 rgba(60, 30, 0, .8); will-change: transform; transform-origin: 50% 50%; }
.cc-fnum.t-green { color: #eaffe0; text-shadow: 0 0 12px rgba(120, 220, 90, .95), 0 0 2px #000, 0 2px 0 rgba(0, 50, 20, .8); }
.cc-fnum.t-white { color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, .9), 0 0 2px #000, 0 2px 0 rgba(0, 0, 0, .8); }
.cc-fnum.big { --fs: 44px; }
/* a spotlight cone over the king's cell */
.cc-spot { width: var(--s); height: var(--s); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 170, .85) 0%, rgba(255, 220, 120, .35) 35%, rgba(255, 220, 120, 0) 70%); mix-blend-mode: screen; opacity: 0; }
/* rays behind an actor */
.cc-rays { width: var(--s); height: var(--s); transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 220, 120, .7) 0deg 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 64%); mask: radial-gradient(circle, #000 10%, transparent 64%); mix-blend-mode: screen; opacity: 0; }
/* a wooden plaque with the win over a cluster */
.cc-plaque { display: grid; place-items: center; width: var(--w); aspect-ratio: 900 / 463; will-change: transform; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .65)); }
.cc-plaque img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cc-plaque b { position: relative; font: 900 calc(var(--w) * .2)/1 var(--font-display); letter-spacing: -.03em; color: #fff6dc; text-shadow: 0 2px 0 #3b2612, 0 0 10px rgba(255, 200, 80, .6); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-plaque b small { display: block; font-size: 55%; color: #ffe08a; letter-spacing: 0; }
.cc-plaque.gold b { color: #fff; text-shadow: 0 2px 0 #3b2612, 0 0 16px rgba(255, 220, 90, .95); }
/* a mole mound racing under a line of the bed, and the mole at its end */
.cc-mound { width: var(--s); height: calc(var(--s) * .55); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, #6a4426, #3b2412 60%, rgba(40, 24, 10, 0) 72%); opacity: .95; filter: blur(.5px); }
.cc-mole { object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); transform-origin: 50% 100%; }
/* a big title slamming onto the screen */
.cc-slam { width: 100%; top: 44%; display: grid; justify-items: center; gap: 6px; transform: translateY(-50%); text-align: center; }
.cc-slam b { font: 900 clamp(46px, 8.5vw, 124px)/.9 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; background: linear-gradient(180deg, #fff6d6 0%, #ffd56a 38%, #ff9a1f 62%, #b5520a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #3b1d05; filter: drop-shadow(0 5px 0 #3b1d05) drop-shadow(0 16px 26px rgba(0, 0, 0, .75)); }
.cc-slam span { font: 800 clamp(13px, 1.6vw, 19px)/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #fff3d6; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); }
.cc-slam.green b { background-image: linear-gradient(180deg, #f4ffe8 0%, #a9ef6a 40%, #3fae3a 65%, #1b5e22 100%); }
/* the leaves wipe between the garden and the feast */
.cc-wipe { position: absolute; inset: 0; z-index: 8; pointer-events: none; }

/* ----- the feast intro and the summary signs */
.sl-over.cc-intro-over { background: radial-gradient(70% 70% at 50% 45%, rgba(20, 12, 4, .5), rgba(8, 5, 2, .9)); }
.cc-intro { display: grid; justify-items: center; gap: 4px; width: min(760px, 94%); padding: 12px; }
.cc-sign { position: relative; width: min(560px, 92%); aspect-ratio: 900 / 755; display: grid; place-items: center; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .8)); }
.cc-sign img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cc-sign .cc-sign-in { position: absolute; left: 12%; right: 12%; top: 38%; bottom: 14%; display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; }
.cc-huge { font: 900 clamp(40px, 6.2vw, 84px)/.95 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; background: linear-gradient(180deg, #fff6d6 0%, #ffd56a 38%, #ff9a1f 62%, #b5520a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #3b1d05; filter: drop-shadow(0 4px 0 #3b1d05) drop-shadow(0 12px 20px rgba(0, 0, 0, .6)); }
.cc-intro .sl-kick { color: #ffe08a; letter-spacing: .2em; }
.cc-perks { font: 700 14px/1.4 var(--font-display); color: #fff3d6; letter-spacing: .02em; max-width: 520px; text-align: center; text-shadow: 0 2px 4px rgba(0, 0, 0, .8); }
.cc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(560px, 100%); margin: 12px 0 6px; }
.cc-cards > div { display: grid; justify-items: center; gap: 6px; text-align: center; animation: cc-cardin .5s cubic-bezier(.2, .9, .3, 1.25) both; }
.cc-cards > div + div { animation-delay: .1s; }
.cc-cards > div + div + div { animation-delay: .2s; }
@keyframes cc-cardin { from { opacity: 0; transform: translateY(26px) scale(.8); } }
.cc-cards img { width: min(20vw, 110px); height: min(20vw, 110px); object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6)); }
.cc-cards small { font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, .78); }

/* ----- the total: the wide wooden sign, its number in cream, coins and petals firing out of both sides */
.sl-over.cc-tot { background: radial-gradient(70% 70% at 50% 50%, rgba(20, 12, 4, .5), rgba(8, 5, 2, .92)); }
.cc-total { position: relative; width: min(780px, 94%, calc(46vh * 1.78)); display: grid; justify-items: center; gap: 4px; transform-origin: 50% 46%; }
.cc-total .cc-rays2 { position: absolute; left: 50%; top: 48%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 214, 110, .2) 0deg 6deg, rgba(255, 214, 110, 0) 6deg 16deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); mask: radial-gradient(circle, #000 10%, transparent 60%); animation: cc-spin 14s linear infinite; pointer-events: none; }
@keyframes cc-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cc-total[data-tier="2"] .cc-rays2 { animation-duration: 10s; }
.cc-total[data-tier="3"] .cc-rays2 { animation-duration: 7s; filter: brightness(1.35); }
.cc-total[data-tier="4"] .cc-rays2 { animation-duration: 5s; filter: brightness(1.6); }
.cc-total[data-tier="5"] .cc-rays2, .cc-total[data-tier="6"] .cc-rays2 { animation-duration: 3.6s; filter: brightness(1.9); }
.cc-total .cc-kick { position: relative; font: 900 clamp(16px, 2.2vw, 28px)/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: #fff3d6; text-shadow: 0 0 18px rgba(255, 200, 80, .8), 0 3px 0 #3b1d05; }
.cc-plq { position: relative; width: 100%; aspect-ratio: 900 / 314; }
.cc-plq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .8)); }
.cc-glass { position: absolute; left: 10%; right: 10%; top: 14%; bottom: 16%; display: grid; place-items: center; }
.cc-glass b { font: 900 clamp(36px, 7.4vw, 96px)/1 var(--font-display); letter-spacing: -.03em; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 58%) 160% 0 / 250% 100% no-repeat, linear-gradient(180deg, #fffaf0 0%, #ffe9b8 32%, #ffc14a 60%, #c7680c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.5px #3b1d05; filter: drop-shadow(0 4px 0 #3b1d05) drop-shadow(0 0 22px rgba(255, 200, 80, .55)); animation: cc-shine 2.4s ease-in-out infinite; font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes cc-shine { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
.cc-total .cc-tier { position: relative; margin-top: -1%; font: 900 clamp(28px, 4.6vw, 62px)/1 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; background: linear-gradient(180deg, #fff6d6, #ffd56a 50%, #c7680c); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.5px #3b1d05; filter: drop-shadow(0 4px 0 #3b1d05) drop-shadow(0 0 20px rgba(255, 200, 80, .6)); }
.cc-total[data-tier="2"] .cc-tier { background-image: linear-gradient(180deg, #ffffff, #c8ffd9 48%, #1fa864); }
.cc-total[data-tier="3"] .cc-tier { background-image: linear-gradient(180deg, #ffffff, #ffd2f5 48%, #c8268c); }
.cc-total[data-tier="4"] .cc-tier { background-image: linear-gradient(180deg, #ffffff, #e2c8ff 48%, #6a2ac8); }
.cc-total[data-tier="5"] .cc-tier, .cc-total[data-tier="6"] .cc-tier { background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #ffffff, #ffe08a 40%, #ffb000 62%, #8a4a00); background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; animation: cc-shine 1.6s ease-in-out infinite; }
.cc-total .cc-x { position: relative; font: 700 15px/1 var(--font-display); color: rgba(255, 243, 214, .85); }

/* ----- the paytable */
.cc-pt-row { white-space: nowrap; }
.cc-pt-row .sl-pt-img { width: 28px; height: 28px; margin-right: 2px; border-radius: 6px; }
.cc-pt-carrot th, .cc-pt-carrot td { font-size: 11.5px; padding: 4px 5px; }
.cc-pt-carrot .sl-pt-img { border-radius: 6px; }

/* the shared win plate, in oak and brass like the rest */
.sl-carrot .sl-plate { border: 2px solid #c98a2b; background: linear-gradient(180deg, #7a4a1f, #4a2a10); box-shadow: 0 10px 24px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 220, 150, .35); }
.sl-carrot .sl-plate span { color: #ffe9b8; }
.sl-carrot .sl-plate b { color: #fff6dc; text-shadow: 0 2px 0 #3b2612; }

/* ----- the bar under the bed: oak and brass */
.sl-carrot .sl-bar { background: linear-gradient(180deg, #2b1a0c, #160d05); border-top: 1px solid rgba(255, 190, 90, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.sl-carrot .sl-spin { width: 74px; height: 74px; color: #3b1d05; background: radial-gradient(circle at 50% 30%, #fff1c4, #ffb62e 50%, #c7680c); box-shadow: 0 0 0 4px #2b1a0c, 0 0 0 6px rgba(255, 190, 90, .5), 0 12px 26px -8px rgba(0, 0, 0, .8), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 rgba(0, 0, 0, .22); }
.sl-carrot .sl-round { border-color: rgba(255, 190, 90, .3); background: linear-gradient(180deg, #3b2612, #1f1208); }
.sl-carrot .sl-buy { border-color: rgba(255, 200, 90, .7); background: linear-gradient(180deg, #6b4420, #3b2612); color: #fff; box-shadow: 0 0 22px -6px rgba(255, 190, 90, .85), inset 0 1px 0 rgba(255, 255, 255, .18); }
.sl-carrot .sl-buy svg { stroke: #ffe9b8; }
.sl-carrot .sl-buy span { color: rgba(255, 233, 184, .85); }
.sl-carrot .sl-buy span b { color: #fff; text-shadow: 0 0 10px rgba(255, 200, 90, .9); }
.sl-carrot .sl-buy:hover:not(:disabled) { background: linear-gradient(180deg, #86562a, #4a2f16); box-shadow: 0 0 28px -4px rgba(255, 200, 90, 1), inset 0 1px 0 rgba(255, 255, 255, .22); }
.sl-carrot .sl-buy:disabled { opacity: .6; }

@media (max-width: 1100px) {
  .cc-side { display: none; }
  .sl-carrot .sl-top { flex-direction: row; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 0; }
  .cc-spins { width: 150px; }
  .cc-sp b { font-size: 20px; }
  .cc-sp span { font-size: 8px; }
  .sl-carrot .sl-board { padding: 8px 10px 8px; }
}
@media (max-width: 720px) {
  .sl-carrot .sl-stage { height: auto; }
  .cc-spins { width: 118px; }
  .cc-sp b { font-size: 16px; }
  .cc-mult { font-size: max(9px, calc(var(--cell) * .2)); }
  .cc-cards img { width: 76px; height: 76px; }
  .cc-sign { width: 96%; }
}