/* RollerCodes.com — Arcade theme.  Used by the page template + (later) the helper plugin.
   No web-font dependency: system sans stack. Light body for readability + ad viewability. */

:root{
  --rc-violet:#6C4CE0; --rc-violet-d:#573ec2; --rc-teal:#00C2A8; --rc-teal-d:#00998699;
  --rc-ink:#15131F; --rc-body:#2b2836; --rc-muted:#6b6878; --rc-expired:#8A8698;
  --rc-paper:#ffffff; --rc-wash:#F6F5FB; --rc-violet-wash:#F1EEFC; --rc-teal-wash:#E6FAF6;
  --rc-line:#e7e5ef; --rc-radius:14px;
  --rc-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rc-mono:"SFMono-Regular",ui-monospace,"Cascadia Mono","Consolas","Roboto Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--rc-wash); color:var(--rc-body);
  font-family:var(--rc-sans); font-size:17px; line-height:1.62;
}
a{color:var(--rc-violet-d); text-decoration:none}
img{max-width:100%}
/* underline only body-copy links inside prose, not nav / cards / lists */
.rc-wrap p a,.rc-wrap li a,.rc-side__trust a{text-decoration:underline}
.rc-nav a,.rc-headsearch,.rc-brand,.rc-genregrid a,.rc-side__links a,.rc-footcols a,
.rc-h2row a,.rc-feed__item,.rc-feed__item *,.rc-related a,.rc-gamecards a,
.rc-playlink a,.rc-seeall a,.rc-crumbs a{text-decoration:none}

/* ---- header ---- */
.rc-header{
  background:var(--rc-paper); border-bottom:1px solid var(--rc-line);
  position:sticky; top:0; z-index:20;
}
.rc-header .rc-in{display:flex; align-items:center; gap:22px; max-width:1220px; margin:0 auto; padding:10px 20px}
.rc-brand img{height:44px; width:auto; display:block}
.rc-nav{display:flex; gap:16px; flex-wrap:wrap; font-size:14.5px; font-weight:700; margin-right:auto}
.rc-nav a{color:var(--rc-muted)}
.rc-nav a:hover{color:var(--rc-violet-d); text-decoration:none}
.rc-headsearch{display:flex; gap:0; flex:0 0 auto}
.rc-headsearch input{
  font:inherit; font-size:14px; padding:8px 12px; width:190px;
  border:1.5px solid var(--rc-line); border-right:0; border-radius:9px 0 0 9px; background:var(--rc-wash);
}
.rc-headsearch input:focus{outline:none; border-color:var(--rc-violet)}
.rc-headsearch button{
  font-size:16px; line-height:1; color:#fff; background:var(--rc-violet); cursor:pointer;
  border:1.5px solid var(--rc-violet); border-radius:0 9px 9px 0; padding:0 13px;
}
.rc-headsearch button:hover{background:var(--rc-violet-d)}
@media (max-width:900px){
  .rc-header .rc-in{flex-wrap:wrap; gap:12px 16px}
  .rc-brand{flex:0 0 auto}
  .rc-headsearch{flex:1 1 auto; min-width:0}
  .rc-headsearch input{flex:1 1 auto; width:auto; min-width:0}
  .rc-nav{order:3; width:100%; margin:0; gap:10px 18px}
}

/* ---- shell: content + sidebar ---- */
.rc-shell{
  display:grid; grid-template-columns:minmax(0,1fr) 288px; gap:40px;
  max-width:1220px; margin:0 auto; padding:0 20px;
}
.rc-shell--full{display:block; max-width:960px}
.rc-wrap{min-width:0; padding:0 0 60px}
.rc-crumbs{font-size:13.5px; color:var(--rc-muted); margin:20px 0 6px}
.rc-crumbs a{color:var(--rc-muted)}

.rc-side{padding:28px 0 60px; display:flex; flex-direction:column; gap:18px}
.rc-side__box{
  background:var(--rc-paper); border:1px solid var(--rc-line); border-radius:var(--rc-radius);
  padding:16px 18px; position:sticky; top:74px;
}
.rc-side__box + .rc-side__box{position:static}
.rc-side h3{margin:0 0 10px; font-size:1rem; color:var(--rc-ink)}
.rc-side__links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.rc-side__links a{font-weight:700; font-size:14.5px; color:var(--rc-ink)}
.rc-side__links a:hover{color:var(--rc-violet-d); text-decoration:none}
.rc-side__trust p{font-size:13.5px; color:var(--rc-muted); margin:0; line-height:1.5}
@media (max-width:900px){
  .rc-shell{grid-template-columns:1fr; gap:0}
  .rc-side{padding-top:10px}
  .rc-side__box{position:static}
}

h1{font-size:1.8rem; line-height:1.22; color:var(--rc-ink); margin:.2em 0 .3em; letter-spacing:-.01em}
.rc-h1date{font-size:.6em; font-weight:600; color:var(--rc-muted); white-space:nowrap; letter-spacing:0}
.rc-subtitle{font-size:1.06rem; line-height:1.55; color:var(--rc-muted); margin:0 0 1em; max-width:72ch}
h2{font-size:1.4rem; color:var(--rc-ink); margin:2.2em 0 .6em; letter-spacing:-.01em}
h3{font-size:1.12rem; color:var(--rc-ink); margin:1.6em 0 .4em}

/* ---- update bar ---- */
.rc-updatebar{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  background:var(--rc-paper); border:1px solid var(--rc-line); border-radius:var(--rc-radius);
  padding:12px 16px; font-size:14px; color:var(--rc-muted); margin:.4em 0 1.4em;
}
.rc-updatebar b{color:var(--rc-ink)}
.rc-updatebar .rc-dot{width:4px;height:4px;border-radius:50%;background:var(--rc-line)}
.rc-count{
  background:var(--rc-violet-wash); color:var(--rc-violet-d); font-weight:700;
  padding:2px 10px; border-radius:999px; font-size:13px;
}

/* ---- code feed (homepage + hub) ---- */
.rc-feed{display:flex; flex-direction:column; gap:12px; margin:1.4em 0}
.rc-feed__item{
  display:flex; gap:16px; align-items:stretch;
  background:var(--rc-paper); border:1px solid var(--rc-line); border-radius:14px;
  padding:12px; color:var(--rc-ink); text-decoration:none;
}
.rc-feed__item,.rc-feed__item *{text-decoration:none}
.rc-feed__item:hover{border-color:var(--rc-violet)}
.rc-feed__item:hover .rc-feed__title{color:var(--rc-violet-d)}
.rc-feed__img{
  flex:0 0 auto; width:168px; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  background:var(--rc-wash); display:block;
}
.rc-feed__img img{width:100%; height:100%; object-fit:cover; display:block}   /* 16:9 art in a 16:9 box = no crop */
.rc-feed__body{display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0}
.rc-feed__title{font-size:1.12rem; font-weight:800; line-height:1.25; letter-spacing:-.01em}
.rc-feed__sub{font-size:14px; color:var(--rc-muted); line-height:1.4}
.rc-feed__meta{font-size:12px; color:var(--rc-expired); margin-top:2px}
@media (max-width:480px){
  .rc-feed__img{width:88px; height:88px}
  .rc-feed__title{font-size:1rem}
  .rc-feed__sub{display:none}
}
/* compact feed — sidebar "Recently Updated" */
.rc-feed--compact{gap:2px}
.rc-feed--compact .rc-feed__item{padding:8px; gap:10px; border:0; border-radius:9px}
.rc-feed--compact .rc-feed__item:hover{background:var(--rc-wash)}
.rc-feed--compact .rc-feed__img{width:72px; height:auto; aspect-ratio:16/9; border-radius:6px}
.rc-feed--compact .rc-feed__title{font-size:13.5px; font-weight:700}
.rc-feed--compact .rc-feed__sub{display:none}
.rc-feed--compact .rc-feed__meta{font-size:11px}

/* ---- homepage ---- */
.rc-hero-band{
  background:linear-gradient(135deg, var(--rc-violet) 0%, #4b32b0 55%, var(--rc-ink) 120%);
  color:#fff; border-radius:20px; padding:34px 32px; margin:22px 0 6px;
}
.rc-hero-band h1{color:#fff; margin:0 0 .25em}
.rc-hero-band p{margin:0 0 18px; color:#e4e0f5; font-size:1.06rem; max-width:52ch}
.rc-hero-band .rc-search{margin:0; max-width:560px}
.rc-hero-band .rc-search input{border-color:transparent}
.rc-statline{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin:14px 2px 24px;
  font-size:13.5px; color:var(--rc-muted);
}
.rc-statline b{color:var(--rc-ink)}
.rc-genregrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:12px 0 30px}
.rc-genregrid a{
  display:flex; flex-direction:column; gap:2px; background:var(--rc-paper);
  border:1px solid var(--rc-line); border-radius:14px; padding:16px; color:var(--rc-ink);
  font-weight:800; font-size:15px;
}
.rc-genregrid a:hover{border-color:var(--rc-violet); text-decoration:none; color:var(--rc-violet-d)}
.rc-genregrid a span{font-weight:500; font-size:12.5px; color:var(--rc-muted)}
.rc-h2row{display:flex; align-items:baseline; justify-content:space-between; margin:2em 0 .6em}
.rc-h2row h2{margin:0}
.rc-h2row a{font-size:13.5px; font-weight:700}

.rc-search{display:flex; gap:8px; margin:1.4em 0}
.rc-search input{
  flex:1; min-width:0; font:inherit; font-size:16px; padding:13px 16px;
  border:1.5px solid var(--rc-line); border-radius:12px; background:var(--rc-paper);
}
.rc-search input:focus{outline:none; border-color:var(--rc-violet); box-shadow:0 0 0 3px var(--rc-violet-wash)}
.rc-search button{
  font:inherit; font-weight:700; color:#fff; background:var(--rc-violet);
  border:0; border-radius:12px; padding:0 22px; cursor:pointer;
}
.rc-search button:hover{background:var(--rc-violet-d)}
.rc-gamecards{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin:1.2em 0}
.rc-gamecards a{
  display:block; background:var(--rc-paper); border:1px solid var(--rc-line);
  border-radius:14px; overflow:hidden; color:var(--rc-ink); font-weight:700;
}
.rc-gamecards a:hover{border-color:var(--rc-violet); text-decoration:none}
.rc-gamecards img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.rc-gamecards span{display:block; padding:11px 13px; font-size:14.5px}
.rc-seeall{text-align:center; margin:.4em 0 0; font-weight:700}

/* ---- game art ---- */
.rc-hero{margin:.6em 0 1.2em}
.rc-hero--about{margin:1.3em 0 .4em}
.rc-hero img{
  width:100%; height:auto; display:block;          /* full image, proportional, no crop */
  border-radius:var(--rc-radius); border:1px solid var(--rc-line);
  background:var(--rc-wash);
}
.rc-bodyimg{margin:1.2em 0}
.rc-bodyimg img{
  width:100%; border-radius:12px; border:1px solid var(--rc-line); display:block;
}
.rc-bodyimg figcaption{font-size:12.5px; color:var(--rc-muted); margin-top:6px}
.rc-playlink{margin:-.6em 0 1.2em}
.rc-playlink a{
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14.5px;
  color:var(--rc-violet-d); background:var(--rc-violet-wash);
  padding:8px 14px; border-radius:10px;
}
.rc-playlink a:hover{background:var(--rc-violet); color:#fff; text-decoration:none}

/* ---- code lists ---- */
.rc-codes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.rc-code{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--rc-paper); border:1px solid var(--rc-line);
  border-left:4px solid var(--rc-violet); border-radius:12px; padding:12px 14px;
}
.rc-code__str{
  font-family:var(--rc-mono); font-size:15.5px; font-weight:700; color:var(--rc-ink);
  background:var(--rc-wash); padding:5px 10px; border-radius:7px; letter-spacing:.02em;
}
.rc-code__reward{color:var(--rc-body); font-size:15px; flex:1 1 180px; min-width:160px}
.rc-code__reward .rc-new{
  display:inline-block; background:var(--rc-teal); color:#04322c; font-weight:800;
  font-size:11px; letter-spacing:.04em; padding:2px 7px; border-radius:6px; margin-left:8px;
  vertical-align:2px;
}
.rc-code__date{font-size:12.5px; color:var(--rc-muted); white-space:nowrap}
.rc-code__actions{display:flex; gap:8px; align-items:center}
.rc-copy,.rc-report{
  font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
  border-radius:9px; padding:7px 13px; transition:.14s; background:var(--rc-paper);
}
.rc-copy{color:var(--rc-violet-d); border:1.5px solid var(--rc-violet)}
.rc-copy:hover{background:var(--rc-violet); color:#fff}
.rc-copy.is-done{background:var(--rc-teal); border-color:var(--rc-teal); color:#04322c}
.rc-report{color:var(--rc-muted); border:1.5px solid var(--rc-line); font-size:12.5px; padding:7px 11px}
.rc-report:hover{border-color:var(--rc-expired); color:var(--rc-ink)}
.rc-report.is-done{background:#ffe8b3; border-color:#ffd479; color:#5c4300}

.rc-codes--expired .rc-code{
  border-left-color:var(--rc-expired); opacity:.72;
}
.rc-codes--expired .rc-code__str{color:var(--rc-expired); text-decoration:line-through}
details.rc-expired{margin-top:.6em}
details.rc-expired>summary{
  cursor:pointer; font-weight:700; color:var(--rc-ink); padding:8px 0; list-style:none;
}
details.rc-expired>summary::-webkit-details-marker{display:none}
details.rc-expired>summary::before{content:"▸ "; color:var(--rc-muted)}
details.rc-expired[open]>summary::before{content:"▾ "}

/* ---- callouts / blocks ---- */
.rc-note{
  background:var(--rc-violet-wash); border-radius:12px; padding:14px 16px;
  font-size:15px; margin:1.2em 0;
}
.rc-note--teal{background:var(--rc-teal-wash)}
.rc-note b{color:var(--rc-ink)}

.rc-steps{counter-reset:s; list-style:none; margin:1em 0; padding:0}
.rc-steps li{position:relative; padding:4px 0 14px 44px; margin:0}
.rc-steps li::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:0; top:0; width:30px; height:30px; border-radius:8px;
  background:var(--rc-violet); color:#fff; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}

.rc-changelog{list-style:none; margin:1em 0; padding:0; border-left:2px solid var(--rc-line)}
.rc-changelog li{padding:2px 0 12px 16px; font-size:14.5px; color:var(--rc-body)}
.rc-changelog b{color:var(--rc-ink); font-variant-numeric:tabular-nums}

.rc-meta{
  display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-content:start;
  background:var(--rc-paper); border:1px solid var(--rc-line); border-radius:var(--rc-radius);
  padding:16px 18px; font-size:14.5px; margin:1.2em 0;
}
.rc-aboutgrid{position:relative; margin:1.4em 0 1.6em}
.rc-aboutgrid .rc-meta{margin:0; max-width:60%; position:relative; z-index:1}
.rc-aboutgrid--noimg .rc-meta{max-width:none}   /* no 2nd image -> facts table spans full width */
.rc-aboutimg{position:absolute; right:0; top:-46px; width:47%; margin:0; z-index:3}
.rc-aboutimg img{
  width:100%; height:auto; display:block;               /* whole image, scaled to fit, no crop / no stretch */
  border-radius:14px; border:5px solid var(--rc-wash);
  box-shadow:0 16px 36px -12px rgba(20,19,31,.32);
}
@media (max-width:640px){
  .rc-aboutgrid .rc-meta{max-width:none}
  .rc-aboutimg{position:static; width:100%; margin:14px 0 0}
  .rc-aboutimg img{border:0; box-shadow:none}
}
.rc-meta dt{color:var(--rc-muted)}
.rc-meta dd{margin:0; color:var(--rc-ink); font-weight:600}

.rc-faq h3{margin-bottom:.2em}
.rc-faq p{margin-top:.2em}

.rc-related{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin:1em 0}
.rc-related a{
  display:flex; align-items:center; gap:12px; background:var(--rc-paper);
  border:1px solid var(--rc-line); border-radius:12px; padding:10px;
  font-weight:700; color:var(--rc-ink); text-decoration:none;
}
.rc-related a:hover{border-color:var(--rc-violet)}
.rc-related a:hover .rc-related__t{color:var(--rc-violet-d)}
.rc-related img,.rc-related__ph{
  flex:0 0 auto; width:92px; aspect-ratio:16/9; height:auto; border-radius:9px; object-fit:cover;
  background:var(--rc-wash); display:block;
}
.rc-related__t{font-size:14.5px; line-height:1.25; min-width:0}
.rc-related__t span{display:block; font-weight:500; font-size:12.5px; color:var(--rc-muted); margin-top:2px}

/* ---- footer ---- */
.rc-footer{background:var(--rc-ink); color:#b9b6c6; font-size:14px; margin-top:60px}
.rc-footer .rc-in{max-width:1220px; margin:0 auto; padding:40px 20px 28px}
.rc-footer img{height:34px; width:auto; opacity:1}
.rc-footer a{color:#cfccdb; text-decoration:none}
.rc-footcols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
.rc-footcols h4{margin:0 0 10px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:#8a869a}
.rc-footcols>div a{display:block; padding:3px 0; color:#cfccdb; font-size:13.5px}
.rc-footcols>div a:hover{color:#fff}
.rc-foottag{margin:12px 0 0; color:#8a869a; font-size:13px}
.rc-footer .rc-fineprint{margin:26px 0 0; padding-top:16px; border-top:1px solid #2a2739; font-size:12px; color:#7a7690; max-width:760px}
@media (max-width:640px){ .rc-footcols{grid-template-columns:1fr 1fr; gap:20px} }

.rc-ribbon{
  background:#ffe8b3; color:#5c4300; text-align:center; font-size:13px; font-weight:700;
  padding:7px 12px;
}

@media (max-width:560px){
  body{font-size:16px}
  h1{font-size:1.6rem}
  .rc-header .rc-in{gap:12px 14px}
  .rc-code{gap:10px}
  .rc-hero-band{padding:24px 20px}
  .rc-hero-band .rc-search{flex-wrap:wrap}
  .rc-hero-band .rc-search button{flex:1 1 100%; padding:12px 22px}
}