:root{
    --bg:#070a14;
    --bg2:#0b0f1e;
    --text:#eef2ff;
    --muted:#7c88a6;
    --cyan:#5eead4;
    --violet:#a78bfa;
    --amber:#ffb454;
    --coral:#ff7a6b;
    --line:rgba(238,242,255,0.12);
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }
  *{ box-sizing:border-box; }
  html,body{
    margin:0; padding:0; width:100%; height:100%; overflow:hidden;
    background:var(--bg); color:var(--text);
    font-family:'Inter', -apple-system, sans-serif;
  }
  h1,h2,h3,.display{ font-family:'Space Grotesk', 'Inter', sans-serif; }

  canvas{ display:block; position:fixed; inset:0; touch-action:none; }

  body.touch-device{ touch-action:none; -webkit-user-select:none; user-select:none; }

  /* ---------- intro overlay ---------- */
  #intro{
    position:fixed; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    background:radial-gradient(ellipse at center, rgba(7,10,20,0.2) 0%, rgba(7,10,20,0.75) 70%);
    pointer-events:none;
    transition:opacity 0.9s ease;
    z-index:20;
  }
  #intro.hide{ opacity:0; }
  #intro h1{
    font-size:clamp(2.4rem, 6vw, 4.2rem);
    font-weight:700;
    margin:0 0 6px 0;
    letter-spacing:-0.02em;
  }
  #intro p{
    color:var(--muted);
    font-size:1.05rem;
    max-width:420px;
    margin:0 auto;
    line-height:1.6;
  }
  #intro .hint{
    margin-top:34px;
    display:flex; gap:10px; align-items:center;
    color:var(--cyan);
    font-size:0.85rem;
    letter-spacing:0.02em;
  }
  .kcap{
    border:1px solid rgba(94,234,212,0.5);
    border-radius:6px;
    padding:3px 9px;
    font-family:'Space Grotesk',sans-serif;
    background:rgba(94,234,212,0.06);
  }

  /* ---------- HUD ---------- */
  #hud{
    position:fixed; top:22px; left:26px;
    z-index:10;
    font-size:0.8rem;
    color:var(--muted);
    line-height:1.5;
  }
  #hud .name{
    font-family:'Space Grotesk',sans-serif;
    font-size:1rem;
    font-weight:600;
    color:var(--text);
  }

  #minimap{
    position:fixed; bottom:22px; left:26px;
    width:150px; height:150px;
    border:1px solid var(--line);
    border-radius:10px;
    background:rgba(11,15,30,0.55);
    backdrop-filter:blur(4px);
    z-index:10;
  }

  #navlist{
    position:fixed; bottom:22px; right:26px;
    display:flex; gap:8px;
    z-index:10;
  }
  .navdot{
    display:flex; align-items:center; gap:7px;
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 13px;
    font-size:0.78rem;
    color:var(--muted);
    background:rgba(11,15,30,0.55);
    backdrop-filter:blur(4px);
    cursor:pointer;
    transition:border-color 0.2s, color 0.2s;
  }
  .navdot:hover{ color:var(--text); border-color:rgba(238,242,255,0.3); }
  .navdot .sw{ width:8px; height:8px; border-radius:50%; }

  /* ---------- panel ---------- */
  #panel{
    position:fixed; top:0; right:0; height:100%;
    width:min(460px, 92vw);
    background:var(--bg2);
    border-left:1px solid var(--line);
    transform:translateX(100%);
    transition:transform 0.5s cubic-bezier(.16,.9,.3,1);
    z-index:15;
    overflow-y:auto;
    padding:56px 40px 40px 40px;
  }
  #panel.open{ transform:translateX(0); }
  #panel .eyebrow{
    color:var(--muted);
    font-size:0.78rem;
    margin-bottom:8px;
  }
  #panel h2{
    font-size:1.9rem;
    margin:0 0 18px 0;
    font-weight:600;
  }
  #panel .body p{
    color:#c3cade;
    line-height:1.7;
    font-size:0.95rem;
  }
  #panel-close{
    position:absolute; top:20px; right:24px;
    width:34px; height:34px;
    border-radius:50%;
    border:1px solid var(--line);
    background:transparent;
    color:var(--text);
    font-size:1.1rem;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  #panel-close:hover{ border-color:rgba(238,242,255,0.4); }

  .proj-card{
    border:1px solid var(--line);
    border-radius:10px;
    padding:16px 18px;
    margin-bottom:12px;
  }
  .proj-card h3{
    margin:0 0 4px 0;
    font-size:1.02rem;
    font-weight:600;
  }
  .proj-card .tag{
    color:var(--muted);
    font-size:0.75rem;
    margin-bottom:8px;
  }
  .proj-card p{
    margin:0;
    color:#c3cade;
    font-size:0.88rem;
    line-height:1.6;
  }
.proj-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 9px 16px;
    border: 1px solid rgba(94,234,212,0.35);
    border-radius: 999px;
    color: var(--cyan);
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    background: rgba(94,234,212,0.06);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
    }

.proj-btn:hover {
    border-color: rgba(94,234,212,0.7);
    background: rgba(94,234,212,0.14);
    transform: translateY(-1px);
    }

  .skill-row{
    display:flex; flex-wrap:wrap; gap:8px;
    margin-top:4px;
  }
  .skill-pill{
    border:1px solid var(--line);
    border-radius:999px;
    padding:6px 13px;
    font-size:0.8rem;
    color:#c3cade;
  }

  .contact-link{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    color:var(--text);
    text-decoration:none;
    font-size:0.95rem;
  }
  .contact-link:hover{ color:var(--cyan); }
  .contact-link span.arrow{ color:var(--muted); }

  ::-webkit-scrollbar{ width:8px; }
  ::-webkit-scrollbar-thumb{ background:rgba(238,242,255,0.15); border-radius:8px; }

  #focus-catch:focus-visible{ outline:2px solid var(--cyan); }
  button:focus-visible, .navdot:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

  /* ---------- touch joystick (hidden unless .touch-device is set) ---------- */
  #touch-controls{
    display:none;
    position:fixed;
    left:26px; bottom:26px;
    z-index:12;
  }
  @media (pointer:coarse), (max-width:700px){
    #touch-controls{ display:block; }
  }

  #joystick-base{
    width:120px; height:120px;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(11,15,30,0.55);
    backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    touch-action:none;
  }
  #joystick-knob{
    width:52px; height:52px;
    border-radius:50%;
    background:rgba(94,234,212,0.16);
    border:1px solid rgba(94,234,212,0.55);
    transition:transform 0.05s linear;
    pointer-events:none;
  }

  /* ---------- mobile layout ---------- */
  @media (max-width:700px), (pointer:coarse){
    #intro h1{ font-size:clamp(2rem, 9vw, 2.8rem); }
    #intro p{ font-size:0.92rem; max-width:80vw; }
    #intro .hint{ margin-top:24px; font-size:0.75rem; flex-wrap:wrap; justify-content:center; max-width:80vw; }

    #minimap{
      top:18px; bottom:auto; left:auto; right:16px;
      width:96px; height:96px;
    }

    #navlist{
      top:18px; bottom:auto; left:16px; right:auto;
      flex-direction:column; gap:6px;
      align-items:flex-start;
    }
    .navdot{ padding:6px 11px; font-size:0.72rem; }

    #panel{
      width:100%;
      padding:56px 22px 28px 22px;
    }
    #panel h2{ font-size:1.55rem; }
    #panel-close{
      width:40px; height:40px;
      top:14px; right:14px;
    }

    #touch-controls{ left:18px; bottom:18px; }
    #joystick-base{ width:104px; height:104px; }
    #joystick-knob{ width:46px; height:46px; }
  }

  @media (max-height:520px) and (pointer:coarse){
    #minimap{ display:none; }
  }