:root{--bg:#eef4f7;--panel:#e3edf1;--card:#fff;--text:#0f172a;--muted:#64748b;--brand:#0ea5e9;--accent:#22c55e;--ring:#e6edf1;--shadow:0 10px 30px rgba(16,24,40,.06)}
*{box-sizing:border-box}
.qc-strong{font-weight:800}

.qc-wrapper{min-height:100%;display:flex;justify-content:center}
.qc-phone{width:100%;max-width:420px;background:var(--panel);border-inline:1px solid #cdd9df;min-height:80vh;margin:0 auto}

/* Header */
.qc-header{position:sticky;top:0;z-index:30;background:var(--panel);border-bottom:1px solid #cfdce3;padding:10px 14px;display:flex;align-items:center;gap:10px}
.qc-burger{width:28px;height:28px;border-radius:8px;border:1px solid var(--ring);display:grid;place-items:center;background:#fff;cursor:pointer}
.qc-logo{height:26px;font-weight:900}
.qc-coins{margin-left:auto}
.qc-badge{display:inline-flex;gap:6px;align-items:center;background:#fff;border:1px solid var(--ring);border-radius:999px;padding:6px 10px;font-weight:700}
.qc-dot{width:10px;height:10px;border-radius:50%;background:gold;display:inline-block}

/* Ad placeholder */
.qc-ad{margin:10px 14px;background:#fff;border:1px dashed #cbd5e1;border-radius:12px;min-height:70px;display:flex;align-items:center;justify-content:center;color:#64748b;font-size:13px}

/* Filters */
.qc-filters{padding:8px 14px}
.qc-tabs{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px}
.qc-tabs .qc-tab{white-space:nowrap;padding:8px 12px;border-radius:12px;border:1px solid var(--ring);background:#fff;cursor:pointer;font-weight:700}
.qc-tabs .qc-tab.qc-active{background:var(--brand);color:#fff;border-color:transparent}
.qc-subtabs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 14px}
.qc-subtabs .qc-pill{scroll-snap-align:start;white-space:nowrap;display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid var(--ring);background:#fff;cursor:pointer}
.qc-subtabs .qc-pill.qc-active{background:#0ea5e916;border-color:#0ea5e9;color:#0369a1}

/* Cards */
.qc-list{display:flex;flex-direction:column;gap:14px;padding:0 14px 20px}
.qc-card{background:var(--card);border:1px solid var(--ring);border-radius:20px;box-shadow:var(--shadow)}
.qc-card-inner{padding:14px}
.qc-card-top{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.qc-thumb{width:44px;height:44px;border-radius:10px;background:#e2e8f0;display:grid;place-items:center;font-weight:800;color:#334155}
.qc-playearn{color:#ef4444;font-size:12px;font-weight:800;margin-bottom:2px}
.qc-title{font-weight:800;margin:0}
.qc-subtitle{color:#6b7280;margin:2px 0 0;font-size:14px}
.qc-status{display:flex;align-items:center;gap:8px;color:#047857;font-weight:700}
.qc-status .qc-gdot{width:8px;height:8px;border-radius:50%;background:#22c55e}
.qc-divider{height:1px;background:#e9eef2;margin:12px 0}
.qc-card-bottom{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.qc-meta{display:flex;gap:18px;color:#475569;font-size:13px}
.qc-coin{display:inline-flex;align-items:center;gap:4px}
.qc-coin:after{content:"";width:14px;height:14px;border-radius:50%;background:gold;display:inline-block}
.qc-count{font-weight:800;color:#ef4444}
.qc-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:999px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;font-weight:800}
.qc-btn--primary{background:var(--accent);color:#083b24;border-color:transparent}

/* Views */
.qc-view{display:none}
.qc-view.qc-is-active{display:block}

/* Gameplay */
.qc-game{padding:14px}
.qc-progbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.qc-prog{flex:1;height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.qc-prog>span{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#16a34a)}
.qc-qcard{background:#fff;border:1px solid var(--ring);border-radius:16px;padding:16px}
.qc-qtitle{font-weight:900;margin:0 0 10px}
.qc-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qc-opt{display:flex;align-items:center;gap:8px;border:1px solid #e5e7eb;background:#f8fafc;border-radius:999px;padding:12px 14px;cursor:pointer;user-select:none}
.qc-opt.qc-correct{background:#dcfce7;border-color:#16a34a}
.qc-opt.qc-wrong{background:#fee2e2;border-color:#ef4444}
@media (max-width:420px){.qc-opts{grid-template-columns:1fr}}

/* Result */
.qc-result{padding:14px}
.qc-box{background:#fff;border:1px solid var(--ring);border-radius:16px;padding:16px;text-align:center}
.qc-scorebox{display:flex;justify-content:space-between}
.qc-small{font-size:12px;color:#64748b}

/* Drawer shell (works on desktop + mobile) */
.qc-drawer{position:fixed;inset:0;display:none;z-index:2147483647}
.qc-drawer__overlay{position:absolute;inset:0;background:rgba(15,23,42,.55);opacity:0;transition:opacity .25s ease}
.qc-drawer__panel{position:absolute;left:0;top:0;bottom:0;width:min(92vw,360px);background:#275b4b;color:#fff;transform:translateX(-110%);transition:transform .25s ease;overflow:auto;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.qc-drawer.qc-open{display:block}
.qc-drawer.qc-open .qc-drawer__overlay{opacity:1}
.qc-drawer.qc-open .qc-drawer__panel{transform:translateX(0)}
.qc-drawer__close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:#ffffff20;color:#fff;font-size:18px;cursor:pointer}
.qc-drawer__user{display:flex;gap:12px;align-items:center;margin:8px 6px 18px}
.qc-drawer__avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#ffffff20;font-weight:800}
.qc-drawer__menu{display:flex;flex-direction:column;gap:10px}
.qc-drawer__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#ffffff10;color:#fff;text-decoration:none}
.qc-drawer__item:hover{background:#ffffff20}
.qc-locked{overflow:hidden}

/* Info / rules / forms */
.qc-info{padding:14px}
.qc-info__title{font-weight:900;margin:0 0 10px}
.qc-ul{margin:0;padding-left:22px}
.qc-ul>li{margin:8px 0;line-height:1.55;color:#0f172a}
.qc-ol{margin:6px 0 0 18px}
.qc-ol>li{margin:6px 0;line-height:1.5}

/* Contact form */
.qc-form label{display:block;font-weight:700;margin:6px 0 4px}
.qc-form input,.qc-form textarea{width:100%;padding:10px;border:1px solid var(--ring);border-radius:10px;background:#fff;margin:0 0 10px}

/* prevent background scroll when drawer is open */
.qc-noscroll{overflow:hidden}