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

:root {
  --bg:        #0c0a08;
  --bg-warm:   #110e0a;
  --gold:      #f0a830;
  --amber:     #e8912a;
  --solar:     #ff8c00;
  --flare:     #ff5e3a;
  --corona:    #ffd080;
  --cream:     #fff4e0;
  --discord:   #5865F2;
  --twitch:    #9146FF;
  --youtube:   #FF0000;
  --instagram: #E1306C;
  --github:    #c9d1d9;
  --twitter:   #1DA1F2;
}

html { scroll-behavior: smooth; }

html, body {
  height: 100%;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255,140,0,.07) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 80%, rgba(200,100,20,.05) 0%, transparent 45%);
  font-family: 'Space Grotesk', sans-serif;
  color: var(--cream);
  overflow-x: hidden;
}

/* ── CURSOR ── */
body { cursor: none; }
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  #cursor, #cursor-trail { display: none !important; }
}

#cursor {
  position: fixed;
  width: 12px; height: 12px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px 5px rgba(240,168,48,.5), 0 0 40px 8px rgba(255,140,0,.2);
  transition: width .25s cubic-bezier(.34,1.56,.64,1), height .25s cubic-bezier(.34,1.56,.64,1), background .2s;
}
#cursor-trail {
  position: fixed;
  width: 40px; height: 40px;
  border: 1.5px solid rgba(240,168,48,.2);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: border-color .3s;
}

/* ── PAGE LAYOUT — two columns, 100vh ── */
.page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Left column — profile + links, centered vertically */
.col-left {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 28px;
  position: relative;
  border-right: 1px solid rgba(240,168,48,.06);
}

/* Warm glow behind left column */
.col-left::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(240,168,48,.06) 0%, transparent 60%);
  pointer-events: none;
}

/* Right column — portfolio, centered */
.col-right {
  display: flex; align-items: center; justify-content: center;
  padding: 32px 28px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(240,168,48,.2) transparent;
}

/* ── PROFILE ── */
.profile {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeIn .8s cubic-bezier(.16,1,.3,1) .1s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Avatar */
.avatar-outer {
  position: relative;
  margin-bottom: 18px;
}
.avatar-halo {
  position: absolute; inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,168,48,.25) 0%,
    rgba(255,140,0,.1) 40%,
    transparent 70%
  );
  animation: haloPulse 3s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes haloPulse {
  from { transform: scale(.9); opacity: .5; }
  to   { transform: scale(1.12); opacity: 1; }
}
.avatar-ring {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    #ff8c00 0%, #ffd700 20%, #ff6e00 40%,
    #ffaa00 60%, #ff5e3a 80%, #ff8c00 100%
  );
  padding: 3px;
  animation: ringRotate 6s linear infinite;
  position: relative; z-index: 1;
  transition: animation-duration .4s;
}
.avatar-ring:hover { animation-duration: 1.5s; }
@keyframes ringRotate { to { transform: rotate(360deg); } }
.avatar-img-wrap {
  width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden;
  background: var(--bg);
}
.avatar-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.avatar-ring:hover .avatar-img-wrap img { transform: scale(1.08); }

/* Name */
.profile-name {
  font-family: 'Orbitron', monospace;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 900; letter-spacing: 3px;
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 40%, #ff5e3a 70%, #ffd700 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 8px;
  animation: solarShift 6s ease-in-out infinite;
}
@keyframes solarShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(240,168,48,.06);
  border: 1px solid rgba(240,168,48,.15);
  border-radius: 999px; padding: 5px 14px;
  font-family: 'Orbitron', monospace; font-size: .6rem;
  color: var(--corona); letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(240,168,48,.6);
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(.4); opacity: .3; }
}

/* Bio */
.bio {
  font-size: clamp(.75rem, 2vw, .85rem);
  color: rgba(255,244,224,.5);
  text-align: center; max-width: 320px;
  line-height: 1.6; font-weight: 300; min-height: 1.4em;
}
.bio.typing::after {
  content: '▌'; color: var(--gold); font-size: .85em;
  animation: blink .7s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── LINKS ── */
.links {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: 10px;
}

.link-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: rgba(255,200,120,.025);
  border: 1px solid rgba(255,180,80,.06);
  border-radius: 14px;
  text-decoration: none; color: var(--cream);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden; opacity: 0;
  cursor: pointer;
  transition:
    transform .35s cubic-bezier(.34,1.56,.64,1),
    border-color .3s,
    background .3s,
    box-shadow .3s;
  animation: fadeIn .6s cubic-bezier(.16,1,.3,1) forwards;
}
.link-card:nth-child(1) { animation-delay: .15s; }
.link-card:nth-child(2) { animation-delay: .25s; }
.link-card:nth-child(3) { animation-delay: .35s; }
.link-card:nth-child(4) { animation-delay: .45s; }
.link-card:nth-child(5) { animation-delay: .55s; }
.link-card:nth-child(6) { animation-delay: .65s; }

/* Shimmer sweep */
.link-card::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,200,100,.05), transparent);
  transition: left .55s ease; pointer-events: none;
}
.link-card:hover::before { left: 160%; }

/* Hover */
.link-card:hover {
  transform: translateY(-3px) scale(1.015);
  background: rgba(255,200,120,.05);
  border-color: rgba(240,168,48,.2);
  box-shadow: 0 0 24px rgba(240,168,48,.1), 0 12px 36px rgba(0,0,0,.4);
}

/* Per-platform hover */
.link-card.discord:hover   { border-color: var(--discord);   box-shadow: 0 0 24px rgba(88,101,242,.25),  0 12px 36px rgba(0,0,0,.4); }
.link-card.twitch:hover    { border-color: var(--twitch);    box-shadow: 0 0 24px rgba(145,70,255,.25),  0 12px 36px rgba(0,0,0,.4); }
.link-card.youtube:hover   { border-color: var(--youtube);   box-shadow: 0 0 24px rgba(255,0,0,.2),     0 12px 36px rgba(0,0,0,.4); }
.link-card.instagram:hover { border-color: var(--instagram); box-shadow: 0 0 24px rgba(225,48,108,.2),  0 12px 36px rgba(0,0,0,.4); }
.link-card.github:hover    { border-color: rgba(255,200,100,.25); box-shadow: 0 0 24px rgba(255,200,100,.12), 0 12px 36px rgba(0,0,0,.4); }
.link-card.twitter:hover   { border-color: var(--twitter);   box-shadow: 0 0 24px rgba(29,161,242,.2),  0 12px 36px rgba(0,0,0,.4); }

/* Icon */
.link-icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.link-card:hover .link-icon { transform: scale(1.12) rotate(-5deg); }
.link-icon svg { width: 20px; height: 20px; }

.discord  .link-icon { background: rgba(88,101,242,.1); }
.twitch   .link-icon { background: rgba(145,70,255,.1); }
.youtube  .link-icon { background: rgba(255,0,0,.08); }
.instagram .link-icon{ background: rgba(225,48,108,.08); }
.github   .link-icon { background: rgba(255,200,100,.06); }
.twitter  .link-icon { background: rgba(29,161,242,.08); }

/* Title colors */
.discord-color  { color: #5865F2; }
.twitch-color   { color: #9146FF; }
.youtube-color  { color: #FF0000; }
.instagram-color {
  background: linear-gradient(135deg, #F56040, #E1306C, #833AB4);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.github-color   { color: #c9d1d9; }
.twitter-color  { color: #1DA1F2; }

/* Text */
.link-text { flex: 1; min-width: 0; }
.link-title {
  font-family: 'Orbitron', monospace;
  font-size: .72rem; font-weight: 700; letter-spacing: 1px; line-height: 1.3;
}
.link-sub {
  font-size: .65rem; color: rgba(255,244,224,.3);
  font-weight: 300; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.link-arrow {
  font-size: .9rem; color: rgba(255,200,100,.2);
  transition: transform .3s ease, color .3s ease;
  flex-shrink: 0;
}
.copy-icon { font-size: .85rem; opacity: .5; }
.link-card:hover .link-arrow { transform: translateX(4px); color: rgba(255,200,100,.5); }

/* Ripple */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,200,100,.1);
  pointer-events: none; transform: scale(0);
  animation: rippleOut .7s linear forwards;
}
@keyframes rippleOut { to { transform: scale(4.5); opacity: 0; } }

/* ── FOOTER ── */
.footer {
  margin-top: 20px;
  font-family: 'Orbitron', monospace; font-size: .55rem;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(240,168,48,.15);
  opacity: 0;
  animation: fadeIn .8s cubic-bezier(.16,1,.3,1) 1.1s forwards;
}

/* ── PORTFOLIO ── */
.portfolio {
  width: 100%; max-width: 540px;
  opacity: 0;
  animation: fadeIn .8s cubic-bezier(.16,1,.3,1) .6s forwards;
}
.portfolio-heading {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.portfolio-heading h2 {
  font-family: 'Orbitron', monospace;
  font-size: clamp(.75rem, 2vw, .85rem);
  font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.portfolio-heading::before, .portfolio-heading::after {
  content: ''; flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,168,48,.15));
}
.portfolio-heading::after { background: linear-gradient(90deg, rgba(240,168,48,.15), transparent); }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.project-card {
  position: relative;
  background: rgba(255,200,120,.02);
  border: 1px solid rgba(240,168,48,.06);
  border-radius: 14px;
  padding: 16px;
  text-decoration: none; color: var(--cream);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition:
    transform .35s cubic-bezier(.34,1.56,.64,1),
    border-color .3s,
    box-shadow .3s,
    background .3s;
  display: flex; flex-direction: column; gap: 8px;
}
.project-card::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(240,168,48,.04), transparent);
  transition: left .55s ease; pointer-events: none;
}
.project-card:hover::before { left: 160%; }
.project-card:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(240,168,48,.2);
  box-shadow: 0 0 20px rgba(240,168,48,.1), 0 12px 36px rgba(0,0,0,.4);
  background: rgba(255,200,120,.04);
}

.project-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.project-actions { display: flex; align-items: center; gap: 6px; }
.project-name {
  font-family: 'Orbitron', monospace;
  font-size: .7rem; font-weight: 700; letter-spacing: 1px;
  color: var(--corona);
}
.project-arrow {
  font-size: .8rem; color: rgba(255,200,100,.2);
  transition: transform .3s ease, color .3s ease;
  flex-shrink: 0;
}
.project-card:hover .project-arrow { transform: translate(3px,-3px); color: var(--gold); }
.project-desc {
  font-size: .68rem; color: rgba(255,244,224,.3); line-height: 1.5; font-weight: 300; flex: 1;
}
.project-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lang-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .6rem; font-weight: 500; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 999px;
}
.lang-badge.c   { background: rgba(85,170,255,.07); color: #67aeff; border: 1px solid rgba(85,170,255,.12); }
.lang-badge.cpp { background: rgba(243,139,168,.07); color: #f38ba8; border: 1px solid rgba(243,139,168,.12); }
.lang-dot { width: 6px; height: 6px; border-radius: 50%; }
.lang-badge.c .lang-dot   { background: #67aeff; }
.lang-badge.cpp .lang-dot { background: #f38ba8; }
.project-stars { font-size: .6rem; color: rgba(255,244,224,.35); }

/* ── CODE PREVIEW ── */
.code-toggle {
  background: rgba(240,168,48,.06);
  border: 1px solid rgba(240,168,48,.12);
  border-radius: 6px; color: var(--gold);
  font-family: 'Orbitron', monospace; font-size: .52rem; letter-spacing: 1px;
  padding: 3px 8px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  flex-shrink: 0; white-space: nowrap; line-height: 1;
}
.code-toggle:hover {
  background: rgba(240,168,48,.15);
  border-color: rgba(240,168,48,.35);
  color: var(--corona);
  transform: scale(1.05);
}
.code-toggle.active {
  background: rgba(240,168,48,.12);
  border-color: rgba(240,168,48,.4);
  color: var(--cream);
}
.code-preview {
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
  opacity: 0;
}
.code-preview.open { max-height: 350px; opacity: 1; }
.code-window {
  margin-top: 8px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,200,100,.05);
  border-radius: 10px; overflow: hidden;
}
.cw-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(255,200,100,.03);
  border-bottom: 1px solid rgba(255,200,100,.04);
}
.cw-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cw-dot:nth-child(1) { background: #ff5f57; }
.cw-dot:nth-child(2) { background: #ffbd2e; }
.cw-dot:nth-child(3) { background: #28c840; }
.cw-name {
  margin-left: 4px; font-size: .58rem;
  color: rgba(255,200,100,.25);
  font-family: 'Space Grotesk', sans-serif; letter-spacing: .5px;
}
.code-body {
  padding: 10px 14px;
  font-family: 'Courier New', Courier, monospace;
  font-size: .62rem; line-height: 1.7;
  overflow-x: auto; white-space: pre; color: #f8f8f2;
}
.tk-kw  { color: #ff9e64; }
.tk-ty  { color: #7dcfff; }
.tk-fn  { color: #e0af68; }
.tk-str { color: #9ece6a; }
.tk-num { color: #ff9e64; }
.tk-cmt { color: #565f89; font-style: italic; }
.tk-mac { color: #f7768e; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(240,168,48,.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(240,168,48,.35); }

/* ── RESPONSIVE — stack on narrow screens ── */
@media (max-width: 900px) {
  .page {
    grid-template-columns: 1fr;
    max-height: none;
    overflow: auto;
  }
  .col-left {
    border-right: none;
    border-bottom: 1px solid rgba(240,168,48,.06);
    padding: 36px 20px 28px;
  }
  .col-right {
    padding: 28px 20px 40px;
  }
}

@media (max-width: 600px) {
  .col-left { padding: 28px 16px 24px; }
  .col-right { padding: 20px 16px 32px; }
  .avatar-ring { width: 90px; height: 90px; }
  .avatar-halo { inset: -16px; }
  .links { gap: 8px; }
  .link-card { padding: 12px 14px; gap: 12px; border-radius: 12px; }
  .link-icon { width: 34px; height: 34px; border-radius: 10px; }
  .link-icon svg { width: 18px; height: 18px; }
  .profile { margin-bottom: 20px; }
  .projects-grid { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .avatar-ring { width: 80px; height: 80px; }
  .profile-name { letter-spacing: 2px; }
  .badge { padding: 4px 10px; font-size: .55rem; }
  .link-card { padding: 11px 12px; border-radius: 10px; }
  .project-card { padding: 12px; }
}

/* ── SELECTION ── */
::selection {
  background: rgba(240,168,48,.3);
  color: var(--cream);
}

/* ── FOCUS VISIBLE ── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── PLAY BUTTON ── */
.play-btn {
  background: rgba(255,140,0,.2);
  border: 1px solid var(--solar);
  color: var(--solar);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: .75rem;
  cursor: pointer;
  transition: all .2s ease;
}
.play-btn:hover {
  background: var(--solar);
  color: var(--bg);
}

/* ── WASM BADGE ── */
.project-tag.wasm {
  background: rgba(99,79,255,.15);
  color: #a296ff;
  border: 1px solid rgba(99,79,255,.3);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ── CUB3D OVERLAY ── */
.cub3d-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .3s ease;
}
.cub3d-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1000px;
  width: 95%;
}
.cub3d-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.cub3d-header h3 {
  font-family: 'Orbitron', monospace;
  font-size: 1.2rem;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cub3d-badge {
  background: rgba(99,79,255,.2);
  color: #a296ff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .65rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(99,79,255,.3);
}
.cub3d-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cub3d-keys {
  font-size: .75rem;
  color: rgba(255,244,224,.5);
}
.cub3d-keys kbd {
  display: inline-block;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: 'Space Grotesk', monospace;
  font-size: .7rem;
  color: var(--cream);
  margin: 0 2px;
}
.cub3d-close {
  background: rgba(255,94,58,.15);
  border: 1px solid rgba(255,94,58,.3);
  color: var(--flare);
  border-radius: 8px;
  width: 34px; height: 34px;
  font-size: 1rem;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cub3d-close:hover {
  background: var(--flare);
  color: #fff;
}
.cub3d-canvas-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(240,168,48,.2);
  box-shadow: 0 0 40px rgba(255,140,0,.08);
  background: #000;
  aspect-ratio: 960 / 540;
}
.cub3d-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.cub3d-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
  font-size: .9rem;
  z-index: 2;
}
.cub3d-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(240,168,48,.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .cub3d-keys { display: none; }
}
@media (max-width: 600px) {
  .cub3d-canvas-wrap { border-radius: 8px; }
  .cub3d-header h3 { font-size: 1rem; }
}