/* ===========================
   Contact Page - Retro Cream/Yellow
   =========================== */
:root {
    --bg-hardcream:#FFF3AF;
    --bg:        #FFF9E6;
    --bg-panel:  #FFFFFF;
    --bg-light:  #FFFDE7;
    --border:    #1A1A1A;
    --accent-o:  #FF8C00;
    --accent-y:  #FFCC00;
    --accent-r:  #E53935;
    --accent-g:  #43A047;
    --accent-b:  #1E88E5;
    --text:      #1A1A1A;
    --text-mid:  #4A4A4A;
    --text-mute: #9A9A9A;
    --shadow:    4px 4px 0 #1A1A1A;
    --shadow-sm: 2px 2px 0 #1A1A1A;
    --font-ret:  'Press Start 2P', monospace;
    --font-h:    'Space Grotesk', sans-serif;
    --font-b:    'Inter', sans-serif;
    --radius:    8px;
    --trans:     0.22s cubic-bezier(0.4,0,0.2,1);
    --bounce:    0.35s cubic-bezier(0.34,1.56,0.64,1);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family: var(--font-b);
    background: var(--bg-hardcream);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; font-family:var(--font-b); }

/* ===========================
   Navbar
   =========================== */
.navbar {
    position: fixed; top:0; left:0; right:0; z-index:1000;
    background: #1A1A1A;
    border-bottom: 2px solid rgba(255,255,255,0.06);
}
.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; }
.logo-circle {
    width:36px; height:36px; border-radius:50%;
    border:2.5px solid #FF5722;
    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:#FF5722; }
.nav-links { display:flex; align-items:center; gap:.2rem; }
.nav-link {
    padding:.5rem .85rem; font-size:.875rem; font-weight:500;
    color:#CCCCCC; border-radius:6px; transition:all var(--trans); position:relative;
}
.nav-link:hover, .nav-link.active { color:#fff; background:rgba(255,255,255,.08); }
.nav-link.active::after {
    content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
    width:18px; height:2px; background:#FF5722; border-radius:2px;
}
.nav-cta {
    padding:.55rem 1.4rem; font-size:.85rem; font-weight:600;
    color:#fff; background:#FF5722; border:none; border-radius:9999px;
    transition:all var(--trans); white-space:nowrap;
}
.nav-cta:hover { background:#e64a19; transform:translateY(-1px); }
.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; }

/* ===========================
   Page
   =========================== */
.page {
    padding: 76px 2rem 0;
    min-height: 100vh;
    display:flex; flex-direction:column; align-items:center;
    gap: 1.25rem;
}

/* ===========================
   Status Bar
   =========================== */
.status-bar {
    width:100%; max-width:960px;
    display:flex; align-items:center; justify-content:space-between;
    padding: .5rem .85rem;
    background: var(--bg-panel);
    border: 2.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.status-left { display:flex; align-items:center; gap:.55rem; }
.status-tag {
    font-family: var(--font-h); font-size:.72rem; font-weight:800;
    letter-spacing:.1em; background: var(--accent-y);
    border:2px solid var(--border); padding:.18rem .6rem; border-radius:4px;
    box-shadow:var(--shadow-sm);
}
.status-slash { font-size:.78rem; color: var(--text-mute); font-style:italic; }
.status-right { display:flex; align-items:center; gap:.35rem; }
.status-label { font-size:.72rem; color:var(--text-mute); }
.status-dot {
    width:14px; height:14px; border-radius:50%;
    border:2px solid var(--border); box-shadow:var(--shadow-sm);
}
.status-dot.green  { background:#28C840; }
.status-dot.orange { background:var(--accent-o); }
.status-dot.red    { background:var(--accent-r); }

/* ===========================
   Grid
   =========================== */
.contact-grid {
    width:100%; max-width:960px;
    display:grid; grid-template-columns:1fr 320px; gap:1.1rem;
    align-items:start;
}

/* ===========================
   LEFT: Form Panel
   =========================== */
.form-panel {
    background: var(--bg-panel);
    border: 2.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem;
    box-shadow: var(--shadow);
}
.field-group { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.field-label {
    font-family:var(--font-h); font-size:.65rem; font-weight:800;
    letter-spacing:.1em; text-transform:uppercase; color:var(--text);
}
.field-input {
    width:100%; padding:.6rem .75rem;
    font-size:.85rem; font-family:var(--font-b);
    background:var(--bg-light);
    border:2px solid var(--border);
    border-radius:5px;
    outline:none;
    transition: border-color var(--trans), box-shadow var(--trans);
    color:var(--text);
}
.field-input::placeholder { color:#b0b0b0; }
.field-input:focus {
    border-color: var(--accent-o);
    box-shadow: 0 0 0 3px rgba(255,140,0,.18);
}
.field-textarea {
    resize:vertical; min-height:130px; max-height:250px;
}

/* Messages */
.form-msg {
    display:none; padding:.55rem .85rem; border-radius:5px;
    font-size:.8rem; font-weight:600; margin-bottom:.75rem;
    border:2px solid;
}
.form-msg.success { background:#E8F5E9; border-color:#43A047; color:#2E7D32; }
.form-msg.error   { background:#FFEBEE; border-color:#E53935; color:#B71C1C; }
.form-msg.show    { display:block; }

/* Button Row */
.btn-row {
    display:flex; align-items:center; justify-content:space-between; gap:.6rem;
    flex-wrap:wrap;
}
.btn-left-group { display:flex; gap:.5rem; }
.btn-right-group { display:flex; gap:.5rem; }

.form-btn {
    padding:.5rem 1.1rem; font-size:.78rem; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase;
    border:2.5px solid var(--border); border-radius:5px;
    box-shadow:var(--shadow-sm); transition:all var(--bounce);
}
.send-btn { background:var(--accent-o); color:#fff; }
.send-btn:hover { background:#e07000; transform:translateY(-2px); box-shadow:3px 3px 0 var(--border); }
.send-btn:active { transform:translateY(0); box-shadow:var(--shadow-sm); }
.send-btn:disabled { opacity:.6; cursor:not-allowed; }
.reset-btn { background:#fff; color:var(--text); }
.reset-btn:hover { background:var(--bg-light); transform:translateY(-2px); }

.link-btn {
    padding:.45rem .9rem; font-size:.72rem; font-weight:700;
    border:2px solid var(--border); border-radius:5px;
    background:#fff; box-shadow:var(--shadow-sm);
    transition:all var(--bounce); display:inline-block;
}
.link-btn:hover { background:var(--accent-y); transform:translateY(-2px); }

/* ===========================
   RIGHT COLUMN
   =========================== */
.right-col { display:flex; flex-direction:column; gap:1rem; }

/* Profile Card */
.profile-card {
    background:var(--bg-panel);
    border:2.5px solid var(--border); border-radius:var(--radius);
    padding:1rem; box-shadow:var(--shadow);
    display:flex; gap:.85rem; align-items:flex-start;
}
.profile-avatar-wrap {
    width:64px; height:64px; flex-shrink:0;
    border:2.5px solid var(--border); border-radius:10px;
    overflow:hidden; background:var(--bg-light);
    box-shadow:var(--shadow-sm);
}
.profile-avatar { width:100%; height:100%; object-fit:cover; object-position:top; }
.profile-info { flex:1; min-width:0; }
.profile-name { font-family:var(--font-h); font-size:.95rem; font-weight:800; margin-bottom:.15rem; }
.profile-role { font-size:.7rem; color:var(--text-mute); margin-bottom:.5rem; }
.profile-bio { font-size:.75rem; line-height:1.55; color:var(--text-mid); margin-bottom:.65rem; }
.profile-btns { display:flex; gap:.4rem; flex-wrap:wrap; }
.profile-btn {
    padding:.32rem .75rem; font-size:.68rem; font-weight:700;
    border:2px solid var(--border); border-radius:5px;
    background:var(--bg-panel); box-shadow:var(--shadow-sm);
    transition:all var(--bounce);
}
.profile-btn:hover { background:var(--accent-y); transform:translateY(-2px); }

/* Connect Panel */
.connect-panel {
    background:var(--bg-panel);
    border:2.5px solid var(--border); border-radius:var(--radius);
    padding:1rem; box-shadow:var(--shadow);
}
.connect-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; }
.connect-title { font-family:var(--font-h); font-size:.72rem; font-weight:800; letter-spacing:.1em; }
.connect-dots { display:flex; gap:.3rem; }
.cdot {
    width:14px; height:14px; border-radius:50%;
    border:2px solid var(--border);
}
.cdot.orange { background:var(--accent-o); }
.cdot.red    { background:var(--accent-r); }
.connect-bars { display:flex; flex-direction:column; gap:.65rem; }
.bar-row { display:flex; align-items:center; gap:.6rem; }
.bar-label { font-size:.68rem; font-weight:600; width:56px; flex-shrink:0; }
.bar-track {
    flex:1; height:10px; background:#EEEEEE;
    border:2px solid var(--border); border-radius:4px; overflow:hidden;
}
.bar-fill {
    height:100%; border-radius:2px;
    transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
}
.bar-fill.orange { background:var(--accent-o); }
.bar-fill.yellow { background:var(--accent-y); }
.bar-fill.green  { background:var(--accent-g); }
.bar-fill.blue   { background:var(--accent-b); }

/* ===========================
   Floating Stat Cards
   =========================== */
.float-cards {
    display:flex; gap:.75rem; justify-content:flex-end;
    width:100%; max-width:960px;
}
.stat-card {
    background:var(--bg-panel);
    border:2.5px solid var(--border); border-radius:var(--radius);
    padding:.65rem .9rem; box-shadow:var(--shadow);
    display:flex; flex-direction:column; align-items:center; gap:.15rem;
    min-width:70px; text-align:center;
    animation: floatCard 3s ease-in-out infinite;
}
#stat-xp { animation-delay:1.5s; }
@keyframes floatCard {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-5px); }
}
.stat-key { font-family:var(--font-ret); font-size:.45rem; color:var(--text-mute); letter-spacing:.08em; }
.stat-val { font-family:var(--font-h); font-size:1.1rem; font-weight:900; }
.green-txt  { color:var(--accent-g); }
.orange-txt { color:var(--accent-o); }

/* ===========================
   Hero Footer Text
   =========================== */
.hero-footer {
    width:100%; max-width:960px;
    overflow:hidden; padding:.5rem 0 0;
}
.hero-text {
    font-family:var(--font-ret);
    font-size:clamp(2rem, 7vw, 5rem);
    color:var(--text);
    letter-spacing:-.02em;
    line-height:1;
    opacity:.08;
    user-select:none;
    text-align:center;
}

/* ===========================
   Bottom Bar
   =========================== */
.bottom-bar {
    width:100%; max-width:960px;
    display:flex; justify-content:space-between; align-items:center;
    padding:.55rem 0 1.5rem;
    border-top:1px solid rgba(0,0,0,.08);
}
.online-dot { display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:var(--text-mute); }
.pulse-dot {
    width:8px; height:8px; border-radius:50%; background:var(--accent-g);
    display:inline-block; animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }
.local-time { font-size:.72rem; color:var(--text-mute); font-family:var(--font-ret); font-size:.45rem; }

/* ===========================
   Responsive
   =========================== */
@media (max-width:880px) {
    .contact-grid { grid-template-columns:1fr; }
    .right-col { flex-direction:row; flex-wrap:wrap; }
    .profile-card, .connect-panel { flex:1; min-width:260px; }
    .float-cards { justify-content:center; }
}
@media (max-width:640px) {
    .page { padding:76px 1rem 0; }
    .nav-links {
        display:none; position:absolute; top:64px; left:0; right:0;
        background:#1A1A1A; flex-direction:column; padding:1rem 2rem;
        border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav-links.active { display:flex; }
    .nav-link { padding:.75rem 0; width:100%; }
    .nav-cta { display:none; }
    .nav-toggle { display:flex; }
    .btn-row { flex-direction:column; align-items:stretch; }
    .btn-left-group, .btn-right-group { justify-content:center; }
    .right-col { flex-direction:column; }
}