/* RCgames "cool" layer — remove the rc-cool.css + rc-cool.js lines from a page to undo */
/* side-to-side gradient: red → orange → yellow → orange → red */
html:not(.rc-neon) { background: linear-gradient(90deg, #c8180a, #e8590c, #ffb703, #e8590c, #c8180a) fixed; background-size: 300% 300%; animation: bgShift 32s ease infinite; min-height: 100%; }
html:not(.rc-neon) body { background: transparent !important; }
/* glass nav */
.nav { position: sticky; top: 10px; z-index: 100; margin: 10px 12px 0; border-radius: 22px;
  background: rgba(255,255,255,.28); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.55); box-shadow: 0 8px 30px rgba(120,20,0,.18); transition: background .25s ease, box-shadow .25s ease; }
.nav.rc-scrolled { background: rgba(255,255,255,.62); box-shadow: 0 12px 34px rgba(120,20,0,.28); }
.nav .btn-ghost { border-radius: 999px; }
.nav .btn-ghost:hover { background: rgba(255,255,255,.6); color: var(--color-text); }
.nav .btn-ghost[aria-current='page'] { background: #201e1d; color: #fff; }
.nav .nav-brand { letter-spacing: .02em; }

/* glass cards */
.grid3 > div, .card, .rc-yellow, #streakBox, #streakReminder p {
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.6) !important; box-shadow: 0 10px 30px rgba(120,20,0,.16); }
html:not(.rc-neon) .grid3 > div { background: rgba(255,255,255,.4) !important; }
html:not(.rc-neon) .card { background: rgba(255,255,255,.62) !important; }
html:not(.rc-neon) .rc-yellow, html:not(.rc-neon) #streakBox, html:not(.rc-neon) #streakReminder p { background: rgba(255,255,255,.4) !important; }
.card { border-radius: 20px; overflow: hidden; }
footer.rc-yellow { border-radius: 24px 24px 0 0; }

/* tiles: lift, tilt, glow, shine */
.tile { border-radius: 16px !important; box-shadow: 0 4px 14px rgba(90,15,0,.25); will-change: transform;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.3), box-shadow .25s ease !important; }
.tile:hover { box-shadow: 0 0 0 3px #fff, 0 0 26px 4px rgba(255,209,102,.9), 0 20px 40px rgba(90,15,0,.45) !important; }
.tile::after, .card::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); background-size: 250% 100%; background-position: 150% 0; opacity: 0; }
.card { position: relative; }
.tile:hover::after, .card:hover::after { opacity: 1; animation: rcShine .8s ease forwards; }
@keyframes rcShine { from { background-position: 150% 0; } to { background-position: -60% 0; } }
.card:hover { box-shadow: 0 0 0 3px #fff, 0 0 24px 2px rgba(255,209,102,.8), 0 20px 40px rgba(90,15,0,.35) !important; }

/* page transitions: seamless vertical scroll between pages */
@view-transition { navigation: auto; }
body, html.leaving body { opacity: 1 !important; animation: none !important; }
::view-transition-group(root) { animation-duration: .55s; }
::view-transition-old(root) { animation: rcVtOutUp .55s cubic-bezier(.65,0,.25,1) both; }
::view-transition-new(root) { animation: rcVtInUp .55s cubic-bezier(.65,0,.25,1) both; }
html.rc-in-up::view-transition-old(root) { animation-name: rcVtOutDown; }
html.rc-in-up::view-transition-new(root) { animation-name: rcVtInDown; }
@keyframes rcVtOutUp { to { transform: translateY(-100%); } }
@keyframes rcVtInUp { from { transform: translateY(100%); } }
@keyframes rcVtOutDown { to { transform: translateY(100%); } }
@keyframes rcVtInDown { from { transform: translateY(-100%); } }
/* fallback for browsers without view transitions */
html:not(.rc-vt) body > *:not(.rc-float-bg):not(.dialog-backdrop):not(script) { animation: rcFromBelow .45s cubic-bezier(.2,.8,.2,1) backwards; }
html:not(.rc-vt).rc-in-up body > *:not(.rc-float-bg):not(.dialog-backdrop):not(script) { animation-name: rcFromAbove; }
@keyframes rcFromBelow { from { transform: translateY(40vh); } }
@keyframes rcFromAbove { from { transform: translateY(-40vh); } }
html.leaving body > *:not(.rc-float-bg):not(script) { animation: rcToAbove .2s cubic-bezier(.5,0,.9,.5) forwards !important; }
html.leaving.rc-out-down body > *:not(.rc-float-bg):not(script) { animation-name: rcToBelow !important; }
@keyframes rcToAbove { to { transform: translateY(-40vh); } }
@keyframes rcToBelow { to { transform: translateY(40vh); } }
@media (prefers-reduced-motion: reduce) {
  .rc-blobs i, body > * { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
@media (max-width: 700px) { .nav { margin: 8px 8px 0; top: 8px; } }

/* glass sort dropdown */
label[for='sortSelect'] { color: #000 !important; }
#sortSelect { background: rgba(255,255,255,.3) !important; color: #000; font-weight: 700; border: 1px solid rgba(255,255,255,.6) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 8px 24px rgba(120,20,0,.2) !important; cursor: pointer; transition: background .2s ease; }
#sortSelect:hover, #sortSelect:focus { background: rgba(255,255,255,.5) !important; }
#sortSelect option { color: #201e1d; background: #fff; }

/* ===== MOBILE (phones) ===== */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  html, body { overflow-x: clip; max-width: 100vw; }
  /* static gradient: fixed/300% backgrounds glitch on iOS */
  html:not(.rc-neon) { background: linear-gradient(160deg, #c8180a 0%, #e8590c 40%, #ffb703 70%, #e8590c 100%) !important; background-attachment: scroll !important; background-size: 100% 100% !important; animation: none !important; }
  /* no page-slide transition on phones (caused colour blocks) */
  @view-transition { navigation: none; }
  html:not(.rc-vt) body > * { animation: none !important; }
  /* lighter glass */
  .nav, .grid3 > div, .card, .rc-yellow, #streakBox, #streakReminder p { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .nav { background: rgba(255,255,255,.85) !important; }
  .grid3 > div, .rc-yellow, #streakBox, #streakReminder p { background: rgba(255,255,255,.7) !important; }
  .rc-float-bg { display: none; }

  /* nav: fits on one row, no scrolling */
  .nav { gap: 3px !important; padding: 6px 8px !important; overflow: visible; flex-wrap: nowrap; border-radius: 18px; justify-content: space-between; }
  .nav img { height: 30px !important; margin: 0 !important; flex: 0 0 auto; }
  .nav .nav-brand { display: none; }
  .nav .btn { font-size: 13px !important; padding: 8px 7px !important; min-height: 38px; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
  .nav #play-now-btn { margin-left: 2px !important; padding: 8px 10px !important; box-shadow: none !important; }

  /* headers */
  header.wrap { padding-left: 16px !important; padding-right: 16px !important; padding-top: 24px !important; padding-bottom: 24px !important; }
  header.wrap > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 20px !important; }
  header.wrap img { width: 100% !important; height: auto !important; }
  h1 { font-size: 38px !important; max-width: none !important; line-height: 1.05; }
  h2 { font-size: 26px !important; }
  header.wrap > div[style*="grid-template-columns"] > div > div[style*="display:flex"] { flex-wrap: wrap; }
  header.wrap[style*="flex"] { flex-direction: column; align-items: stretch !important; gap: 14px; }
  header.wrap input, header.wrap select { max-width: 100% !important; width: 100% !important; min-width: 0; font-size: 16px; }

  /* sections */
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .grid3 { grid-template-columns: 1fr !important; padding-left: 12px !important; padding-right: 12px !important; }
  .grid3 > div { padding: 18px !important; }
  div[style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
  .card .card-title { font-size: 16px; }
  .card .card-body { font-size: 13px; }
  #streakBox { width: auto !important; margin-left: 12px; margin-right: 12px; }
  footer.wrap { flex-direction: column; align-items: flex-start !important; gap: 8px; }

  /* games grid */
  .tile-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; grid-auto-rows: calc((100vw - 32px - 16px) / 3) !important; gap: 8px !important; }
  .tile { aspect-ratio: auto !important; }
  .tile.big { grid-column: span 2 !important; grid-row: span 2 !important; }
  .tile.wide { grid-column: span 3 !important; grid-row: span 1 !important; }
  .tile-label { font-size: 11px !important; padding: 4px 5px !important; }
  .tile-kicker, .tile-hot, .tile-kicker-mp { font-size: 8px !important; padding: 1px 4px !important; }
  .tile-kicker-mp { top: 24px !important; }
  .btn:hover { transform: none; }
}
@media (max-width: 400px) { .tile-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; grid-auto-rows: calc((100vw - 32px - 8px) / 2) !important; } .tile.big, .tile.wide { grid-column: span 2 !important; } .tile.big { grid-row: span 2 !important; } }

@media (max-width: 360px) { .nav .btn { font-size: 12px !important; padding: 8px 5px !important; } .nav img { height: 26px !important; } }