/* ===========================
   About Page — Dark Green Game HUD
   Same palette as skills.html
   =========================== */
:root {
    --bg-dark:       #0A1F13;
    --bg-panel:      #0F2918;
    --bg-card:       #122E1A;
    --bg-card-hover: #163520;
    --bg-ability:    #0D2416;
    --border-green:  rgba(255,255,255,0.08);
    --border-active: rgba(255,87,34,0.45);
    --accent-orange: #FF5722;
    --accent-green:  #4ADE80;
    --accent-yellow: #FACC15;
    --text-white:    #FFFFFF;
    --text-light:    #C8D5CC;
    --text-muted:    #6B8C77;
    --font-retro:   'Press Start 2P', monospace;
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body:    'Inter', sans-serif;
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-xl:    22px;
    --transition:   0.22s cubic-bezier(0.4,0,0.2,1);
    --bounce:       0.35s cubic-bezier(0.34,1.56,0.64,1);
}
/* ===========================
   Reset & Base
   =========================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: var(--text-white);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:var(--font-body); }
/* ===========================
   Navbar (same as skills)
   =========================== */
.navbar {
    position: fixed;
    top:0; left:0; right:0;
    z-index: 1000;
    background: #060F09;
    border-bottom: 1px solid var(--border-green);
}
.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
    display:flex; align-items:center; justify-content:space-between;
}
.nav-logo { display:flex; align-items:center; flex-shrink:0; }
.logo-circle {
    width:36px; height:36px; border-radius:50%;
    border: 2.5px solid var(--accent-orange);
    display:flex; align-items:center; justify-content:center;
    transition: transform var(--bounce);
}
.logo-circle:hover { transform: scale(1.1) rotate(15deg); }
.logo-dot { width:12px; height:12px; border-radius:50%; background:var(--accent-orange); }
.nav-links { display:flex; align-items:center; gap:0.25rem; }
.nav-link {
    padding: 0.5rem 0.85rem;
    font-size: 0.875rem; font-weight:500;
    color: #6B8C77; border-radius: var(--radius-sm);
    transition: all var(--transition); position:relative;
}
.nav-link:hover, .nav-link.active { color:#fff; background:rgba(255,255,255,0.06); }
.nav-link.active::after {
    content:''; position:absolute; bottom:2px; left:50%;
    transform:translateX(-50%);
    width:18px; height:2px;
    background:var(--accent-orange); border-radius:2px;
}
.nav-cta {
    padding: 0.55rem 1.4rem;
    font-size:0.85rem; font-weight:600;
    color:#fff; background:var(--accent-orange);
    border:none; border-radius:9999px;
    transition:all var(--transition); white-space:nowrap;
}
.nav-cta:hover { background:#e64a19; transform:translateY(-1px); box-shadow:0 4px 12px rgba(255,87,34,0.35); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:4px; }
.nav-toggle span { width:24px; height:2px; background:#fff; border-radius:2px; transition:all var(--transition); }
/* ===========================
   About Page Layout
   =========================== */
.about-page {
    min-height: 100vh;
    padding: 96px 2rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: relative;
}
/* subtle background glow */
.about-page::before {
    content:'';
    position:absolute; top:0; left:0; right:0; bottom:0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(255,87,34,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(74,222,128,0.04) 0%, transparent 50%);
    pointer-events:none;
}
/* ===========================
   Header
   =========================== */
.about-header { text-align:center; position:relative; z-index:1; }
.about-title {
    font-family: var(--font-retro);
    font-size: clamp(1.1rem, 3vw, 1.8rem);
    color: var(--text-white);
    letter-spacing: 0.08em;
    line-height: 1.5;
}
.about-title .bullet { color: var(--accent-orange); margin:0 0.6rem; }
.about-subtitle {
    margin-top: 0.65rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}
/* ===========================
   Main Grid
   =========================== */
.about-grid {
    width: 100%;
    max-width: 1280px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
    align-items: start;
    position: relative;
    z-index: 1;
}
/* ===========================
   LEFT COLUMN
   =========================== */
.left-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
/* Generic Card */
.about-card {
    background: var(--bg-panel);
    border: 1.5px solid var(--border-green);
    border-radius: var(--radius-lg);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color var(--transition);
    animation: fadeUp 0.5s ease-out both;
}
.about-card:nth-child(2) { animation-delay: 0.1s; }
.about-card:nth-child(3) { animation-delay: 0.2s; }
.about-card:hover { border-color: rgba(255,255,255,0.14); }
@keyframes fadeUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}
/* Card Header */
.card-label {
    display:flex; align-items:center; gap:0.6rem;
}
.card-icon { font-size:1.1rem; }
.card-title {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-white);
}
/* --- MISSION --- */
.mission-text {
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--text-light);
}
.mission-tags {
    display:flex; flex-wrap:wrap; gap:0.4rem;
}
.mtag {
    padding: 0.28rem 0.75rem;
    font-size: 0.72rem; font-weight:600;
    border: 1.5px solid var(--border-green);
    border-radius: var(--radius-sm);
    color: var(--text-white);
    background: var(--bg-card);
    transition: all var(--transition);
}
.mtag:hover { border-color:var(--accent-orange); color:var(--accent-orange); }
.mission-btns {
    display:flex; gap:0.6rem; flex-wrap:wrap;
}
.mbtn {
    padding: 0.55rem 1.2rem;
    font-size: 0.75rem; font-weight:700;
    letter-spacing: 0.07em;
    border-radius: var(--radius-sm);
    transition: all var(--bounce);
}
.mbtn-primary {
    background: var(--accent-orange);
    color: #fff;
    border: none;
}
.mbtn-primary:hover { background:#e64a19; transform:translateY(-2px); box-shadow:0 6px 18px rgba(255,87,34,0.3); }
.mbtn-outline {
    background: transparent;
    color: var(--text-white);
    border: 1.5px solid var(--border-green);
}
.mbtn-outline:hover { border-color:var(--accent-orange); color:var(--accent-orange); transform:translateY(-2px); }
/* --- CORE ABILITIES --- */
.abilities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}
.ability-item {
    display:flex; align-items:center; gap:0.65rem;
    background: var(--bg-ability);
    border: 1px solid var(--border-green);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.75rem;
    transition: all var(--transition);
}
.ability-item:hover { border-color:rgba(255,255,255,0.15); background:var(--bg-card); }
.ability-icon-wrap {
    width:32px; height:32px;
    border-radius: var(--radius-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; flex-shrink:0;
}
.ability-info { flex:1; min-width:0; }
.ability-name {
    font-size: 0.72rem; font-weight:600;
    color: var(--text-white);
    margin-bottom: 0.35rem;
    white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ability-bar {
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow:hidden;
}
.ability-fill {
    height:100%;
    border-radius:3px;
    width: 0%;
    transition: width 1s cubic-bezier(0.4,0,0.2,1);
}
/* --- PLAYER STATS --- */
.stats-row {
    display:grid; grid-template-columns:repeat(3,1fr); gap:0.65rem;
}
.stat-box {
    background: var(--bg-card);
    border: 1.5px solid var(--border-green);
    border-radius: var(--radius-md);
    padding: 1rem 0.75rem;
    text-align:center;
    transition: all var(--transition);
}
.stat-box:hover { border-color:rgba(255,255,255,0.18); transform:translateY(-2px); }
.stat-box.accent-green { border-color: rgba(74,222,128,0.3); }
.stat-box.accent-yellow { border-color: rgba(250,204,21,0.3); }
.stat-number {
    font-family: var(--font-heading);
    font-size: 2.2rem; font-weight:800;
    color: var(--text-white);
    line-height:1;
    margin-bottom:0.4rem;
}
.stat-box.accent-green  .stat-number { color: var(--accent-green); }
.stat-box.accent-yellow .stat-number { color: var(--accent-yellow); }
.stat-label-txt {
    font-size: 0.58rem; font-weight:600;
    letter-spacing:0.08em; text-transform:uppercase;
    color: var(--text-muted);
    line-height:1.4;
}
/* Achievements */
.achievements {
    display:flex; flex-direction:column; gap:0.55rem;
    border-top: 1px solid var(--border-green);
    padding-top: 0.9rem;
}
.ach-item {
    display:flex; align-items:center; gap:0.65rem;
    background: var(--bg-ability);
    border: 1px solid var(--border-green);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.85rem;
    transition: all var(--transition);
}
.ach-item:hover { border-color:rgba(250,204,21,0.25); background:rgba(250,204,21,0.04); }
.ach-badge { font-size:1.1rem; flex-shrink:0; }
.ach-text { font-size:0.78rem; color:var(--text-light); line-height:1.4; font-weight:500; }
/* ===========================
   RIGHT COLUMN — Player Card
   =========================== */
.right-col {
    display:flex;
    flex-direction:column;
    gap:1rem;
    position: sticky;
    top: 84px;
}
.player-card {
    background: var(--bg-panel);
    border: 1.5px solid var(--border-active);
    border-radius: var(--radius-xl);
    padding: 1.1rem;
    display:flex; flex-direction:column; gap:0.9rem;
    position:relative;
    overflow:hidden;
    animation: fadeUp 0.5s ease-out 0.2s both;
}
.player-card::before {
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(ellipse at top right, rgba(255,87,34,0.07) 0%, transparent 60%);
    pointer-events:none;
}
/* Top tags */
.player-tags {
    display:flex; gap:0.4rem; flex-wrap:wrap;
}
.ptag {
    padding: 0.22rem 0.6rem;
    font-size:0.62rem; font-weight:700;
    letter-spacing:0.07em; text-transform:uppercase;
    border: 1.5px solid var(--border-green);
    border-radius: var(--radius-sm);
    color: var(--text-light);
    background: var(--bg-card);
    transition: all var(--transition);
}
.ptag:hover { border-color:var(--accent-orange); color:var(--accent-orange); }
/* Player Image */
.player-img-wrap {
    width:100%;
    border-radius: var(--radius-lg);
    overflow:hidden;
    background: var(--bg-dark);
    position:relative;
}
.player-img {
    width:100%;
    height: 240px;
    object-fit:cover;
    object-position:center top;
    transition: transform 0.4s ease;
    display:block;
}
.player-card:hover .player-img { transform:scale(1.03); }
/* Available badge */
.available-badge {
    display:inline-flex; align-items:center; gap:0.45rem;
    align-self:center;
    padding: 0.35rem 0.9rem;
    font-size:0.65rem; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase;
    background: rgba(74,222,128,0.15);
    border: 1.5px solid rgba(74,222,128,0.4);
    border-radius: 9999px;
    color: var(--accent-green);
}
.avail-dot {
    width:7px; height:7px; border-radius:50%;
    background: var(--accent-green);
    box-shadow: 0 0 6px rgba(74,222,128,0.7);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity:1; transform:scale(1); }
    50%       { opacity:0.5; transform:scale(1.3); }
}
/* Education Card */
.edu-card {
    display:flex; gap:0.65rem; align-items:flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border-green);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    transition: all var(--transition);
}
.edu-card:hover { border-color:rgba(255,255,255,0.14); }
.edu-icon { font-size:1.3rem; flex-shrink:0; margin-top:1px; }
.edu-name { font-size:0.75rem; font-weight:700; color:var(--text-white); margin-bottom:0.2rem; }
.edu-degree { font-size:0.68rem; color:var(--accent-orange); font-weight:600; margin-bottom:0.2rem; }
.edu-meta { font-size:0.62rem; color:var(--text-muted); }
/* Contact Links */
.contact-links {
    display:flex; flex-direction:column; gap:0.4rem;
}
.clink {
    display:flex; align-items:center; gap:0.5rem;
    padding: 0.4rem 0.65rem;
    background: var(--bg-card);
    border: 1px solid var(--border-green);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    color: var(--text-light);
}
.clink:hover { border-color:var(--accent-orange); color:var(--accent-orange); }
.clink-icon { font-size:0.85rem; flex-shrink:0; }
.clink-text { font-size:0.7rem; font-weight:500; }
.clink-row {
    display:flex; gap:0.4rem;
}
.clink-btn {
    flex:1; text-align:center;
    padding: 0.4rem 0.5rem;
    font-size:0.7rem; font-weight:700;
    border: 1.5px solid var(--border-green);
    border-radius: var(--radius-sm);
    color: var(--text-white);
    background: var(--bg-card);
    transition: all var(--bounce);
}
.clink-btn:hover {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    transform: translateY(-2px);
}
/* Certificates */
.certs-row {
    display:flex; flex-wrap:wrap; gap:0.35rem;
}
.cert-tag {
    padding: 0.25rem 0.6rem;
    font-size:0.62rem; font-weight:600;
    border: 1px solid rgba(250,204,21,0.3);
    border-radius: var(--radius-sm);
    background: rgba(250,204,21,0.07);
    color: var(--accent-yellow);
    cursor:default;
    transition: all var(--transition);
}
.cert-tag:hover { background:rgba(250,204,21,0.15); }
/* ===========================
   Responsive
   =========================== */
@media (max-width: 1024px) {
    .about-grid { grid-template-columns: 1fr; }
    .right-col { position:static; flex-direction:row; flex-wrap:wrap; }
    .player-card { flex:1; min-width:280px; }
}
@media (max-width: 768px) {
    .about-page { padding: 86px 1rem 2rem; }
    .nav-links {
        display:none; position:absolute; top:64px; left:0; right:0;
        background: #060F09; flex-direction:column; padding:1rem 2rem;
        border-bottom: 1px solid var(--border-green);
    }
    .nav-links.active { display:flex; }
    .nav-link { padding:0.75rem 0; width:100%; }
    .nav-cta { display:none; }
    .nav-toggle { display:flex; }
    .abilities-grid { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: repeat(3,1fr); }
    .right-col { flex-direction:column; }
}
@media (max-width: 480px) {
    .about-title { font-size:0.9rem; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .stat-box:last-child { grid-column: span 2; }
}