:root {
      --bg:#07131c;
      --panel:rgba(255,255,255,.05);
      --panel2:rgba(255,255,255,.035);
      --ink:#eef6ff;
      --muted:#a9bfd2;
      --rule:rgba(255,255,255,.10);

      --brand:#00d0ff;
      --brand2:#22e3b1;
      --purple:#a855f7; /* Games */

      --max:1200px;
      --r:16px;
      --shadow:0 18px 70px rgba(0,0,0,.55);
    }

    *{box-sizing:border-box}
    html, body { min-height: 100%; }

    body {
      margin:0;
      font:16px/1.6 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;
      color:var(--ink);
      background-color: #07101a;
      background-image:
        radial-gradient(900px 520px at 20% 0%, rgba(34,227,177,.14), transparent 55%),
        radial-gradient(900px 520px at 85% 10%, rgba(0,208,255,.12), transparent 55%),
        linear-gradient(180deg, #061018 0%, #07131c 55%, #07101a 100%);
      background-repeat: no-repeat;
      background-attachment: scroll;
    }

    /* Layout Utility */
    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 24px;
    }

      /* Global Navbar Styles */
        .global-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #0b131a; /* Very dark background from the screenshot */
            padding: 15px 30px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .brand-container { 
            display: flex; 
            align-items: center; 
            gap: 15px; 
            font-size: 1.3rem; 
            font-weight: 900; 
        }
        
        .brand-logo { height: 35px; }

        .user-badge {
            display: flex;
            align-items: center;
            gap: 15px;
            background-color: rgba(255,255,255,0.05);
            padding: 8px 15px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.1);
            font-weight: 700;
        }

        .logout-btn { 
            color: #ef4444; 
            cursor: pointer; 
            transition: opacity 0.2s; 
        }
        
        .logout-btn:hover { opacity: 0.8; }
        
        /* Back to Dashboard Breadcrumb */
        .breadcrumb { 
            margin: 20px 0; 
            text-align: left; 
        }
        
        .back-link {
            color: var(--brand2); /* Uses the cyan from your root variables */
            text-decoration: none;
            font-weight: 900;
            font-size: 1.1rem;
            transition: opacity 0.2s;
        }
        
        .back-link:hover { opacity: 0.8; }


    /* Header */
    header {
      position:sticky; top:0; z-index:50;
      backdrop-filter:saturate(150%) blur(10px);
      background:rgba(7,19,28,.72);
      border-bottom:1px solid var(--rule);
    }
    .nav { display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; }
    .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
    .brand img { height:32px; width:auto; border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.45); }
    .brand span { font-weight:900; letter-spacing:.2px; }

    .links { display:flex; gap:12px; align-items:center; }
    .links a {
      padding:8px 16px; border-radius:12px;
      border:1px solid var(--rule);
      color:var(--muted);
      font-weight:700; font-size:.95rem;
      background:rgba(255,255,255,.02);
      text-decoration: none;
      transition: all 0.2s;
    }
    .links a:hover { color:var(--ink); background:rgba(255,255,255,.05); }
    .links a.primary {
      background: linear-gradient(90deg, var(--brand), var(--brand2));
      border-color: transparent;
      color: #001016;
    }

    /* Split Dashboard Layout */
    .dashboard-layout {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 32px;
      margin-top: 40px;
    }

    @media (max-width: 960px) {
      .dashboard-layout { grid-template-columns: 1fr; }
    }

    /* Netflix Rows styling */
    .netflix-section { margin-bottom: 40px; }
    .netflix-section h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 16px; color: var(--ink); }
    .netflix-row {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 16px;
    }

    .portrait-card {
      position: relative;
      aspect-ratio: 2 / 3;
      border-radius: var(--r);
      border: 1px solid var(--rule);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 16px;
      text-decoration: none;
      color: var(--ink);
      box-shadow: var(--shadow);
      transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.2s;
    }
    .portrait-card:hover {
      transform: translateY(-6px);
      border-color: var(--brand);
    }
    .portrait-card .card-bg-icon {
      position: absolute;
      top: 25%; left: 50%;
      transform: translate(-50%, -50%);
      font-size: 4rem;
      opacity: 0.2;
    }
    .portrait-card .card-details {
      position: relative;
      z-index: 2;
      background: linear-gradient(0deg, rgba(7,16,26,0.95) 0%, rgba(7,16,26,0.4) 70%, transparent 100%);
      margin: -16px;
      padding: 24px 16px 16px;
    }
    .portrait-card h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; }
    .portrait-card p { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.3; }

    /* Achievements Sidebar (Kongregate Model) */
    .achievements-panel {
      background: rgba(255,255,255,.03);
      border: 1px solid var(--rule);
      border-radius: var(--r);
      padding: 20px;
      height: fit-content;
    }
    .achievements-panel h2 { font-size: 1.2rem; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
    .user-progress { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
    .xp-bar { background: rgba(255,255,255,0.1); border-radius: 99px; height: 8px; overflow: hidden; margin-top: 6px; }
    .xp-fill { background: linear-gradient(90deg, var(--brand), var(--brand2)); height: 100%; width: 65%; }
    
    .achievement-list { display: flex; flex-direction: column; gap: 12px; }
    .achievement-item {
      display: flex; align-items: center; gap: 12px;
      background: rgba(255,255,255,.02);
      border: 1px solid var(--rule);
      padding: 10px; border-radius: 12px;
    }
    .achievement-item.locked { opacity: 0.5; filter: grayscale(1); }
    .achievement-badge { font-size: 1.5rem; background: rgba(255,255,255,0.05); padding: 6px; border-radius: 8px; }
    .achievement-info { flex: 1; }
    .achievement-info h4 { margin: 0; font-size: 0.9rem; font-weight: 700; }
    .achievement-info p { margin: 0; font-size: 0.75rem; color: var(--muted); }
    .achievement-points { font-size: 0.75rem; font-weight: 900; color: var(--brand2); background: rgba(34,227,177,.1); padding: 2px 6px; border-radius: 4px; }

    /* Info grids */
    .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin: 40px 0; }
    @media (max-width:980px){ .grid{grid-template-columns:1fr} }
    .mini { border:1px solid var(--rule); border-radius:var(--r); background:rgba(255,255,255,.03); padding:24px; color:var(--muted); }
    .mini h3 { margin:0 0 8px; color:var(--ink); font-size: 1rem; }

    footer { margin-top: 80px; border-top: 1px solid var(--rule); padding: 40px 0; background: rgba(5, 12, 18, 0.4); }
    .footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 0.9rem; }
    .footer-links { display: flex; gap: 20px; }
    .footer-links a { color: var(--muted); text-decoration: none; }
    .footer-links a:hover { color: var(--ink); }

/* =========================================
   PIZZA FRACTIONS GAME STYLES 
   ========================================= */

#start-screen {
    text-align: center;
    margin-top: 15vh;
}

#start-screen h1 {
    font-size: 3.5rem;
    color: var(--ink);
    margin-bottom: 2rem;
    text-shadow: 0 0 20px rgba(0, 208, 255, 0.3);
}

#game-container {
    background: var(--panel);
    border: 1px solid var(--rule);
    padding: 3rem 2rem;
    border-radius: var(--r);
    box-shadow: var(--shadow);
    text-align: center;
    max-width: 800px;
    margin: 40px auto;
}

#question-text {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 2rem;
    color: var(--ink);
}

#visual-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.math-symbol {
    font-size: 3rem;
    font-weight: 900;
    color: var(--muted);
}

#choices-area {
    display: flex;
    justify-content: center;
    gap: 20px;
}

button.choice-btn {
    font-size: 1.5rem;
    padding: 12px 30px;
    cursor: pointer;
    border: 2px solid var(--brand);
    background: rgba(255,255,255,0.02);
    color: var(--brand);
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-weight: 800;
}

button.choice-btn:hover {
    background: linear-gradient(90deg, var(--brand), var(--brand2));
    border-color: transparent;
    color: #001016;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 208, 255, 0.3);
}

#score-board {
    margin-top: 40px;
    font-size: 1.2rem;
    color: var(--muted);
    font-weight: 700;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
}

#score {
    color: var(--brand2);
    font-weight: 900;
    font-size: 1.5rem;
}