/* ===============================
   RollerCoin – közös arany theme
   V: 2 (mobile svh/dvh + slim)
   =============================== */

:root{
  --gold-1:#f2d889; --gold-2:#d9b65a; --gold-ink:#13201e;
  --txt:#e9eaee; --muted:#b7bcc6;
  --bg:#0f1014; --panel-1:#12151b; --panel-2:#1a1f2a; --line-1:rgba(255,255,255,.07);

  /* keret méretek (index3) */
  --headH: 64px;
  --footH: 92px;
}

/* alap */
html,body{height:100%}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
     font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
     letter-spacing:.1px}

/* kártyák/boxok – slim */
.card,.box,.head{
  background:linear-gradient(to top,var(--panel-1),var(--panel-2))!important;
  border:1px solid var(--line-1)!important;border-radius:12px!important;padding:12px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),0 10px 20px rgba(0,0,0,.25)!important;
}

/* táblázat */
tbody tr{background:linear-gradient(to top,#12161f,#181e2a)!important;border-color:var(--line-1)!important}
th,td{padding:8px 10px!important;font-size:14px}

/* CTA gombok – arany */
.btn,.primary,button.copy,.pill.cta{
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2))!important;
  color:var(--gold-ink)!important;border:1px solid rgba(255,255,255,.18)!important;font-weight:800!important
}
.btn:hover,.primary:hover,button.copy:hover{filter:brightness(1.05)}
.go{background:linear-gradient(to top,#151922,#1c2230)!important;border-color:var(--line-1)!important;border-radius:10px!important;padding:8px!important}

/* home top menü */
.topmenu .btn{
  min-height:60px!important;border-radius:14px!important;gap:4px!important;
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2))!important;
  color:var(--gold-ink)!important;border:1px solid rgba(255,255,255,.18)!important
}
.topmenu .btn small{font-size:12px;color:#273136!important}

/* lábléc tabs (index3) */
.tab{
  background:linear-gradient(to top,#141923,#1a202c)!important;border:1px solid var(--line-1)!important;
  border-radius:12px!important;padding:10px 12px!important;font-weight:800;color:#e6e8ee;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:8px
}
.tab:hover{filter:brightness(1.06)}
.tab.active{
  color:#111!important;background:linear-gradient(135deg,var(--gold-1),var(--gold-2))!important;
  border-color:#e9cf7a!important;box-shadow:0 8px 16px rgba(0,0,0,.35)
}

/* fejléc/lábléc keret */
header{background:linear-gradient(to top,#151a23,#202737)!important;border-bottom:1px solid var(--line-1)!important}
footer{background:linear-gradient(to top,#141820,#1a2030)!important;border-top:1px solid var(--line-1)!important}

/* kör logó */
.brand img{width:34px;height:34px;object-fit:cover;border-radius:50%;
  -webkit-mask-image:radial-gradient(circle 17px at center,#000 98%,transparent);mask-image:radial-gradient(circle 17px at center,#000 98%,transparent);
  background:#0f1116}

/* kijelentkezés */
.logout{padding:8px 10px;border-radius:10px;text-decoration:none;font-weight:800;
  background:linear-gradient(135deg,#ff9b9b,#ff4b4b);color:#111;border:1px solid rgba(255,255,255,.22)}
.logout:hover{filter:brightness(1.05)}

/* === IFRAME MAGASSÁG FIX – hogy mindig látszon a lábléc === */
.layout{min-height:100svh;display:flex;flex-direction:column} /* svh = safe viewport height */
main{flex:1 1 auto;min-height:0}
.viewport{height:100%;padding:0 16px}
.frameWrap{
  /* elsődlegesen dvh/svh, fallback vh */
  height:calc(100svh - var(--headH) - var(--footH) - 24px);
  background:linear-gradient(to top,#12161e,#1a2030);border:1px solid rgba(255,255,255,.06);
  border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 10px 24px rgba(0,0,0,.35)
}
@supports not (height: 100svh){
  .frameWrap{height:calc(100vh - var(--headH) - var(--footH) - 24px)}
}
iframe{width:100%;height:100%;border:0;display:block;background:#0f1014}

/* === MOBIL SLIM === */
@media (max-width:720px){
  :root{ --headH: 60px; --footH: 116px; } /* kicsit magasabb tab-sor */
  .title{font-size:16px!important}
  .hello h2{font-size:20px!important}
  .slogan{font-size:13px!important}
  .topmenu{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .topmenu .btn{min-height:56px!important}
  .grid4{grid-template-columns:1fr!important}
  .tabs{grid-template-columns:repeat(2,1fr)!important}
}

/* === Feladatok lista – egységes === */
.item{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 12px;border-radius:14px;margin-bottom:10px;background:linear-gradient(to top,#12151a,#181c24);border:1px solid var(--line-1)}
.title{font-weight:800}.desc{font-size:12px;color:#9fa5b0;margin-top:3px}
.rc{font-weight:900;color:var(--gold-2)}.badge{font-size:12px;color:#cbd1db}
.right{display:flex;align-items:center;gap:10px}
.pill{border:1px solid #3a3a3a;padding:8px 16px;border-radius:999px}
.pill.progress{color:#cdd2da;background:#151820}.pill.claimed{color:#95d4a1;background:#122017;border-color:#1f3a2a}
@media (max-width:640px){.item{flex-direction:column;align-items:flex-start}.right{width:100%;justify-content:space-between}}