body{background:#FFF9B0 !important;min-height:100vh}
.g-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 18px;background:linear-gradient(90deg,#006B2D 0%,#00A844 50%,#00BFA5 100%);box-shadow:0 4px 16px rgba(0,80,40,.35);border-bottom:5px solid #FFE000}
.g-brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;text-decoration:none;font-size:1.2rem}
.g-brand img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:50%;padding:3px}
.g-back{background:#FFE000;color:#2D3436;font-weight:800;padding:8px 18px;border-radius:30px;text-decoration:none}
.back-link{display:none}

/* ===== Rayna shared game kit (rg-*) ===== */
.rg-wrap{max-width:600px;margin:20px auto;padding:22px;background:#fff;border-radius:24px;border:4px solid #FFE000;box-shadow:0 10px 30px rgba(0,0,0,.08);text-align:center;font-family:"Baloo Bhaijaan 2",Tahoma,sans-serif;color:#2D3436}
.rg-wrap *{font-family:inherit;box-sizing:border-box}
.rg-big{font-size:4.5rem;line-height:1.1}
.rg-help{color:#64748b;margin:.2em 0 1em}
.rg-chips{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.rg-chip{padding:3px 14px;border-radius:99px;background:#e2e8f0;color:#64748b;font-weight:800;font-size:.9rem}
.rg-chip.on{background:#00C853;color:#fff}.rg-chip.ok{background:#B9F6CA;color:#008E3A}
.rg-top{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:#64748b;margin:8px 0}
.rg-bar{height:10px;background:#e2e8f0;border-radius:9px;overflow:hidden;margin-bottom:14px}
.rg-bar i{display:block;height:100%;background:linear-gradient(90deg,#00C853,#FFE000);transition:width .35s}
.rg-q{font-size:1.5rem;font-weight:800;background:#FFF9B0;border-radius:20px;padding:18px 10px;margin-bottom:14px;line-height:1.5}
.rg-q .em{font-size:2.3rem;letter-spacing:4px;display:block;line-height:1.35;word-break:break-word}
.rg-q svg{width:200px;max-width:70%;height:auto}
.rg-say{font-size:1.6rem;background:#fff;border:3px solid #FFE000;border-radius:50%;width:56px;height:56px;cursor:pointer;margin:-4px 0 12px}
.rg-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rg-opt{padding:14px 10px;font-size:1.25rem;font-weight:800;background:#fff;color:#2D3436;border:3px solid #B9F6CA;border-radius:18px;cursor:pointer;box-shadow:0 4px 0 #B9F6CA;transition:transform .12s}
.rg-opt:hover:not(:disabled){transform:translateY(-2px);border-color:#00C853}
.rg-opt:focus-visible,.rg-btn:focus-visible,.rg-say:focus-visible{outline:4px solid #008E3A;outline-offset:2px}
.rg-opt.ok{background:#B9F6CA;border-color:#00C853;animation:rgpop .4s}
.rg-opt.bad{background:#fee2e2;border-color:#ef4444;box-shadow:0 4px 0 #fca5a5;animation:rgshake .4s}
.rg-opt:disabled{cursor:default}
.rg-msg{min-height:2.6em;margin-top:12px;font-weight:800;color:#008E3A;line-height:1.5}
.rg-msg.bad{color:#dc2626}
.rg-btn{border:none;padding:12px 30px;border-radius:30px;font-size:1.05rem;font-weight:800;cursor:pointer;margin:8px 4px 0;background:#00C853;color:#fff;box-shadow:0 4px 0 #008E3A}
.rg-btn.ghost{background:#e2e8f0;color:#2D3436;box-shadow:0 4px 0 #cbd5e1}
.rg-fx{position:fixed;inset:0;pointer-events:none;z-index:999}
@keyframes rgpop{50%{transform:scale(1.08)}}
@keyframes rgshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.rg-opt,.rg-bar i{transition:none}.rg-opt.ok,.rg-opt.bad{animation:none}}
@media (max-width:420px){.rg-wrap{margin:10px;padding:14px}.rg-q{font-size:1.25rem}}

/* ===== level map (rg-map) ===== */
.rg-prog{height:12px;background:#e2e8f0;border-radius:9px;overflow:hidden;margin:6px 0 2px}
.rg-prog i{display:block;height:100%;background:linear-gradient(90deg,#00C853,#FFE000);border-radius:9px}
.rg-tot{margin:2px 0 6px}
.rg-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-top:14px}
.rg-lv{display:flex;flex-direction:column;align-items:center;gap:0;padding:10px 6px;border:3px solid #B9F6CA;border-radius:18px;background:#fff;cursor:pointer;box-shadow:0 4px 0 #B9F6CA;color:#2D3436;transition:transform .12s}
.rg-lv b{font-size:1.5rem;line-height:1.3}.rg-lv small{font-size:.72rem;color:#64748b;line-height:1.3;min-height:2.2em;display:flex;align-items:center}.rg-lv span{font-size:.8rem;min-height:1.2em}
.rg-lv:hover:not(:disabled){transform:translateY(-2px);border-color:#00C853}
.rg-lv.done{background:#f0fdf4;border-color:#00C853}
.rg-lv.lock{background:#f1f5f9;border-color:#e2e8f0;box-shadow:0 4px 0 #e2e8f0;color:#94a3b8;cursor:not-allowed}
.rg-lv:focus-visible{outline:4px solid #008E3A;outline-offset:2px}
.rg-pill{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.rg-pill span{background:#00C853;color:#fff;border-radius:99px;padding:2px 14px;font-weight:800;font-size:.9rem}
.rg-pill b{color:#008E3A}
.rg-mapbtn{border:2px solid #B9F6CA;background:#fff;border-radius:12px;width:38px;height:34px;cursor:pointer;font-size:1.1rem}
.rg-opts.three{grid-template-columns:1fr}

/* ===== Header logo: same look as homepage (.rlogo) ===== */
.g-brand{gap:10px;font-size:1.15rem}
.g-brand .rlogo{position:relative;display:inline-flex;flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,224,0,.6);padding:0;align-items:center;justify-content:center;vertical-align:middle}
.g-brand .rlogo img{width:100%;height:100%;padding:0;background:none;border-radius:50%;object-fit:cover;display:block}
.g-brand .rlogo i{position:absolute;width:16px;height:16px;pointer-events:none;background:radial-gradient(circle,#fff 0 25%,#8BC34A 60%,transparent 72%);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 3px #8BC34A);animation:rtw 1.8s ease-in-out infinite;opacity:0}
.g-brand .rlogo .s1{top:-8px;right:-6px}.g-brand .rlogo .s2{bottom:-4px;left:-8px;width:12px;height:12px;animation-delay:.9s}
.g-brand-txt{font-style:normal;font-weight:900;color:#fff}
.g-brand-txt span{color:#FFE000}
@keyframes rtw{0%,100%{transform:scale(.2) rotate(0);opacity:0}50%{transform:scale(1) rotate(45deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.g-brand .rlogo i{animation:none;opacity:.9}}

/* ===== لوگوی هدر: دقیقاً مثل صفحه‌ی اول (بلوک logo-fix در index.html) ===== */
.g-brand .rlogo{width:auto!important;min-width:60px;height:70px!important;border-radius:14px!important;background:#fff!important;padding:3px!important;box-sizing:border-box;box-shadow:0 0 12px rgba(255,224,0,.6)!important}
.g-brand .rlogo img{width:auto!important;height:100%!important;max-width:100%;object-fit:contain!important;border-radius:10px!important;padding:0;background:none}

/* ===== نوار بالای بازی‌ها: روشن و جذاب، لوگوی بدون کادر (v7) ===== */
.g-top{background:linear-gradient(100deg,#ffffff 0%,#f1fff6 45%,#fff8c9 100%)!important;box-shadow:0 6px 18px rgba(0,120,60,.18)!important;border-bottom:5px solid #FFE000!important;position:relative}
.g-top::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;background:linear-gradient(90deg,#00C853,#FFE000,#00BFA5);opacity:.0}
.g-brand .rlogo{background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important;height:72px!important;min-width:56px}
.g-brand .rlogo img{border-radius:0!important;filter:drop-shadow(0 3px 6px rgba(0,110,50,.35))}
.g-brand-txt{color:#008E3A!important;font-size:1.25rem;text-shadow:0 1px 0 #fff}
.g-back{background:linear-gradient(180deg,#00D45E,#00A844)!important;color:#fff!important;box-shadow:0 4px 0 #007a30,0 6px 14px rgba(0,120,60,.3)!important;border:0!important}
.g-back:hover{filter:brightness(1.06);transform:translateY(-1px)}
