/* ===== Reelo Game – clean theme ===== */
:root{
  --bg1:#0f2440; --bg2:#0f766e;
  --glass:rgba(255,255,255,.08); --glass-b:rgba(255,255,255,.15);
  --text:#e5e7eb; --muted:#cbd5e1; --brand:#ffd700; --ok:#22c55e; --link:#93c5fd;
}

.r-game{min-height:100vh;padding:120px 0 80px;background:linear-gradient(135deg,var(--bg1),var(--bg2));color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;}
.r-container{max-width:1180px;margin:0 auto;padding:0 20px;}

.r-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;}
.r-back{color:var(--link);text-decoration:none;font-weight:700;opacity:.95}
.r-back:hover{color:var(--brand);}

.r-toast{background:linear-gradient(45deg,#22c55e,#16a34a);color:#fff;border-radius:999px;padding:10px 16px;font-weight:800;box-shadow:0 8px 24px rgba(34,197,94,.35);animation:r-toast .5s ease forwards;}
@keyframes r-toast{from{transform:translateX(120%);opacity:0}to{transform:none;opacity:1}}

.r-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:22px;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(8px);border-radius:20px;padding:22px;margin-bottom:18px;}
.r-meta{display:flex;align-items:center;gap:14px;}
.r-icon{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:1.7rem;background:rgba(255,215,0,.18)}
.r-title{color:var(--brand);font-size:1.7rem;line-height:1.2;margin:.1rem 0 .25rem}
.r-sub{color:#d1d5db;font-size:1rem}

.r-stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:18px;list-style:none;margin:0;padding:0}
.r-stats li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.r-sym{grid-row:1/span 2;opacity:.9}
.r-n{font-size:1.25rem;font-weight:800;color:#fff;line-height:1}
.r-n--text{font-size:1rem;font-weight:700;color:#a7f3d0}
.r-l{font-size:.9rem;color:var(--muted)}
.r-fs{justify-self:end;background:linear-gradient(45deg,#3b82f6,#2563eb);color:#fff;border:0;border-radius:999px;padding:12px 18px;font-weight:800;cursor:pointer;box-shadow:0 12px 28px rgba(59,130,246,.35);display:inline-flex;align-items:center;gap:8px}
.r-fs:hover{transform:translateY(-1px)}

.r-frame{position:relative;background:rgba(0,0,0,.35);border:1px solid var(--glass-b);border-radius:18px;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.35)}
.r-aspect{width:100%;aspect-ratio:16/9;max-height:78vh}
.r-aspect iframe{width:100%;height:100%;border:0;display:block}

.r-loader{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);gap:12px;z-index:3}
.r-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:r-spin .9s linear infinite}
.r-load-t{font-weight:700;letter-spacing:.3px}
@keyframes r-spin{to{transform:rotate(1turn)}}

/* Fullscreen & fallback fullscreen */
.r-frame.is-fs,.r-frame.is-fauxfs{position:fixed;inset:0;z-index:9999;border-radius:0;border:0;background:#000}
.r-frame.is-fs .r-aspect,.r-frame.is-fauxfs .r-aspect{width:100vw;height:100vh;aspect-ratio:auto}
.r-frame.is-fs iframe,.r-frame.is-fauxfs iframe{border-radius:0}

/* Responsive */
@media (max-width:1024px){
  .r-card{grid-template-columns:1fr}
  .r-fs{justify-self:start}
  .r-stats{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .r-title{font-size:1.4rem}
  .r-stats{grid-template-columns:1fr 1fr}
}