/* CK Labs Lab V3 — Hub Menu (Screen 2) */
/* Tokens sourced from docs/ux/lab-v3-mockup.html — section .hub-* */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#2d333f; --surface:#393f4d; --surface2:#43495a; --surface3:#525a6c;
  --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.11);
  --accent:#7c6cff; --accent2:#34d399; --gold:#f5b851; --pink:#ec4899; --teal:#06b6d4;
  --text:#f1f5f9; --muted:#94a3b8; --muted2:#5e6c84; --danger:#f87171;
}

html,body{height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-y:auto;overflow-x:hidden;max-width:100vw}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* Topbar */
.hub-top{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;box-shadow:0 6px 18px rgba(0,0,0,0.45)}
.hub-logo{font-size:16px;font-weight:900;letter-spacing:-.02em}
.hub-logo em{color:var(--accent);font-style:normal}
.hub-player{display:flex;align-items:center;gap:10px}
.hub-player-info{text-align:right}
.hub-player-name{font-size:13px;font-weight:800}
.hub-player-xp{font-size:11px;color:var(--accent2);font-weight:600}
.hub-level-badge{background:linear-gradient(135deg,var(--accent),var(--pink));color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:5px;margin-left:6px}
.omar,.skilly{display:inline-flex;align-items:center;justify-content:center;flex:none}
.omar svg,.skilly svg{display:block}
.omar.s28,.skilly.s28{width:28px;height:28px}.omar.s36,.skilly.s36{width:36px;height:36px}.omar.s48,.skilly.s48{width:48px;height:48px}.omar.s64,.skilly.s64{width:64px;height:64px}

/* Body */
.hub-body{padding:32px 28px 100px;max-width:1080px;margin:0 auto;width:100%}
.hub-welcome{margin-bottom:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hub-welcome-title{font-size:26px;font-weight:900;margin-bottom:4px;letter-spacing:-.02em}
.hub-welcome-sub{font-size:13px;color:var(--muted)}

/* Streak */
.hub-streak-bar{display:flex;align-items:center;gap:12px;background:rgba(245,184,81,0.06);border:1px solid rgba(245,184,81,0.18);border-radius:4px;padding:8px 14px}
.hub-streak-fire{font-size:18px}
.hub-streak-text{font-size:12px;font-weight:700}
.hub-streak-days{display:flex;gap:3px}
.hub-streak-day{width:20px;height:20px;border-radius:5px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--muted2)}
.hub-streak-day.done{background:rgba(245,184,81,0.18);color:var(--gold)}
.hub-streak-day.today{background:var(--gold);color:#000}

/* Section label */
.hub-menu-label{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted2);margin-bottom:18px;justify-content:center}
.hub-menu-label::before,.hub-menu-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent);max-width:200px}

/* 3 columns */
.hub-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-bottom:28px}
.hub-col{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:22px 18px;display:flex;flex-direction:column;gap:14px;transition:transform .25s,border-color .25s}
.hub-col:hover{border-color:var(--border2);transform:translateY(-2px)}
.hub-col.learn{background:linear-gradient(180deg,rgba(124,108,255,0.06),var(--surface) 60%);border-color:rgba(124,108,255,0.2)}
.hub-col.practice{background:linear-gradient(180deg,rgba(52,211,153,0.05),var(--surface) 60%);border-color:rgba(52,211,153,0.2)}
.hub-col.explore{background:linear-gradient(180deg,rgba(6,182,212,0.05),var(--surface) 60%);border-color:rgba(6,182,212,0.2)}

.hub-col-h{text-align:center;padding-bottom:14px;border-bottom:1px solid var(--border)}
.hub-col-emoji{font-size:36px;line-height:1;margin-bottom:10px;display:block}
.hub-col-title{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.hub-col-sub{font-size:11px;color:var(--muted);line-height:1.5}

.hub-col-card{background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:14px;cursor:pointer;transition:background .15s,border-color .15s,transform .12s;display:flex;align-items:center;gap:11px;text-align:left;width:100%;border:1px solid var(--border);color:inherit}
.hub-col-card:hover{border-color:var(--border2);background:var(--surface3);transform:translateY(-1px)}
.hub-col-card:active{transform:translateY(0)}
.hub-col-card.featured{background:rgba(124,108,255,0.1);border-color:rgba(124,108,255,0.3)}
.hub-col-card.featured:hover{border-color:rgba(124,108,255,0.5)}
.hub-col-card[disabled],.hub-col-card[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.hub-col-card[disabled]:hover,.hub-col-card[aria-disabled="true"]:hover{transform:none;background:var(--surface2);border-color:var(--border)}
.hub-col-card-icon{font-size:20px;line-height:1;flex:none;width:34px;height:34px;border-radius:4px;background:var(--surface);display:flex;align-items:center;justify-content:center}
.hub-col-card-body{flex:1;min-width:0}
.hub-col-card-title{font-size:13px;font-weight:700;margin-bottom:2px;letter-spacing:-.01em}
.hub-col-card-meta{font-size:10px;color:var(--muted)}
.hub-col-card-meta.green{color:var(--accent2)}
.hub-col-card-meta.gold{color:var(--gold)}
.hub-col-card-meta.pink{color:var(--pink)}
.hub-col-card-arrow{color:var(--muted2);font-size:14px;flex:none}

/* Rewards + leaderboard */
.hub-row-extra{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-top:14px}
.hub-rewards,.hub-lb{background:var(--surface);border:1px solid var(--border2);border-radius:5px;padding:18px}
.hub-rewards{border-color:rgba(245,184,81,0.25)}
.hub-rew-h,.hub-lb-h{font-size:13px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.hub-rew-grid{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.hub-rew-item{flex:none;text-align:center;width:84px}
.hub-rew-img{width:64px;height:64px;border-radius:4px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 5px;border:1px solid var(--border2)}
.hub-rew-item.unlocked .hub-rew-img{border-color:rgba(245,184,81,0.5);background:rgba(245,184,81,0.08);box-shadow:0 0 14px rgba(245,184,81,0.15)}
.hub-rew-item.next .hub-rew-img{border-color:rgba(124,108,255,0.5);background:rgba(124,108,255,0.08)}
.hub-rew-label{font-size:10px;color:var(--muted);line-height:1.3}
.hub-rew-xp{font-size:10px;font-weight:800;color:var(--gold);margin-top:2px}
.hub-rew-xp.green{color:var(--accent2)}
.hub-rew-xp.purple{color:var(--accent)}

.hub-lb-row{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--border)}
.hub-lb-row:last-child{border:none}
.hub-lb-rank{font-size:13px;font-weight:800;width:20px;text-align:center;flex:none}
.hub-lb-rank.gold{color:var(--gold)}.hub-lb-rank.silver{color:#94a3b8}.hub-lb-rank.bronze{color:#cd7f32}
.hub-lb-name{font-size:12px;font-weight:600;flex:1}
.hub-lb-xp{font-size:11px;color:var(--accent2);font-weight:700}
.hub-lb-you{background:rgba(124,108,255,0.15);border-radius:99px;padding:1px 6px;font-size:9px;font-weight:800;color:var(--accent);margin-left:4px}
.hub-lb-profile-btn{width:100%;margin-top:10px;background:var(--surface2);border:1px solid var(--border2);color:var(--muted);font-size:11px;padding:8px;border-radius:6px;font-family:inherit;cursor:pointer;font-weight:700}
.hub-lb-profile-btn:hover{border-color:var(--accent);color:var(--text)}

/* Video demo modal */
.hub-video-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.hub-video-modal[hidden]{display:none}
.hub-video-backdrop{position:absolute;inset:0;background:rgba(2,6,15,0.78);backdrop-filter:blur(4px)}
.hub-video-card{position:relative;background:var(--surface);border:1px solid var(--border2);border-radius:6px;width:100%;max-width:680px;padding:22px 24px 24px}
.hub-video-x{position:absolute;top:10px;right:14px;background:transparent;border:none;color:var(--muted);font-size:24px;cursor:pointer;line-height:1;font-weight:600}
.hub-video-x:hover{color:var(--text)}
.hub-video-title{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:14px}
.hub-video-frame{aspect-ratio:16/9;background:var(--surface2);border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:24px}
.hub-video-empty{text-align:center;max-width:340px}
.hub-video-empty-icon{font-size:48px;margin-bottom:10px}
.hub-video-empty-title{font-size:15px;font-weight:700;margin-bottom:6px}
.hub-video-empty-sub{font-size:12px;color:var(--muted);line-height:1.5}

/* Tone refinements — moins "gaming", plus pro */
.hub-welcome-title{font-weight:800}
.hub-col-emoji{font-size:30px;opacity:.92}
.hub-col-title{font-weight:700}
.hub-col-card-title{font-weight:600}
.hub-logo{font-weight:800}
.hub-player-name{font-weight:700}
.hub-rew-h,.hub-lb-h{font-weight:700}

/* Mobile */
@media (max-width:900px){
  .hub-body{padding:20px 14px 80px;max-width:100%}
  .hub-welcome{flex-direction:column;align-items:flex-start;gap:14px}
  .hub-welcome-title{font-size:22px}
  .hub-row-extra{grid-template-columns:1fr;gap:14px}
  .hub-top{padding:12px 14px;flex-wrap:wrap;gap:8px}
  .hub-streak-bar{width:100%;max-width:100%;flex-wrap:wrap}
  /* Rewards grid scrolls inside its own card, never the page */
  .hub-rewards{max-width:100%;overflow:hidden}
  .hub-rew-grid{max-width:100%}
  .hub-player{flex-wrap:wrap;gap:8px}
  .hub-player-info{text-align:left}
}

/* ── Mobile swipe-hint arrows (discrete, subtly glowing) ── */
.hub-cols-wrap{position:relative}
.hub-swipe-arrow{display:none}
@media (max-width:767px){
  .hub-swipe-arrow{
    display:flex;align-items:center;justify-content:center;
    position:absolute;
    top:50%;
    width:32px;height:32px;
    background:rgba(13,20,36,0.72);
    border:1px solid rgba(124,108,255,0.4);
    color:#a594ff;
    font-size:24px;line-height:1;
    border-radius:50%;
    cursor:pointer;font-family:inherit;
    transform:translateY(-50%);
    z-index:5;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    box-shadow:0 0 12px rgba(124,108,255,0.28);
    animation:hub-swipe-pulse 2.4s ease-in-out infinite;
    transition:opacity .25s,transform .15s;
    padding:0;padding-bottom:2px;
  }
  .hub-swipe-prev{left:6px}
  .hub-swipe-next{right:6px}
  .hub-swipe-arrow.is-hidden{opacity:0;pointer-events:none}
  @keyframes hub-swipe-pulse{
    0%,100%{box-shadow:0 0 8px rgba(124,108,255,0.22)}
    50%   {box-shadow:0 0 18px rgba(124,108,255,0.55)}
  }
  .hub-swipe-arrow:active{transform:translateY(-50%) scale(.92)}
}

/* ── Mobile swipable hub cards — native CSS scroll-snap (one card per viewport) ──
 * The earlier JS swiper had width-math issues in mobile Safari that made
 * cards 2/3 disappear after swipe. Native scroll-snap is reliable: each card
 * is exactly the .hub-cols inner width, and `scroll-snap-stop: always`
 * guarantees one card per swipe. */
.hub-cols-dots{display:none}
@media (max-width:767px){
  .hub-cols{
    display:flex;
    grid-template-columns:none;
    flex-wrap:nowrap;
    gap:0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    /* Native momentum can feel mushy mid-snap — switch to default for a
     * decisive land-on-snap feel after a flick. */
    -webkit-overflow-scrolling:auto;
    margin:0;
    padding:4px 0 8px;
    width:100%;
    overscroll-behavior-x:contain;
    touch-action:pan-x pan-y;
  }
  .hub-cols::-webkit-scrollbar{display:none}
  .hub-col{
    flex:0 0 100%;
    width:100%;
    max-width:100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    transform:none !important;
  }
  /* Touch targets: ensure all hub-col-card meets 44x44 min */
  .hub-col-card{min-height:48px}
  .hub-cols-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin:6px 0 22px;
  }
  .hub-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--surface3);
    transition:background .18s,transform .18s,width .18s;
    cursor:pointer;
    display:inline-block;
  }
  .hub-dot.active{
    background:var(--accent);
    width:22px;
    border-radius:99px;
  }
}

/* Extra-small phones — tighten hero + cards padding */
@media (max-width:420px){
  .hub-top{padding:10px 12px}
  .hub-body{padding:16px 12px 70px}
  .hub-col{padding:18px 14px}
  .hub-col-card{padding:12px}
  .hub-rew-item{width:72px}
  .hub-rew-img{width:54px;height:54px;font-size:24px}
}

/* Hide redundant player display in header — auth-ui.js pill replaces it */
.hub-player-info { display: none !important; }