/* ================================================
   TOKENS
   ================================================ */
:root {
  --clr-bg:        #0d0d1a;
  --clr-sidebar:   #111120;
  --clr-taskbar:   #0a0a14;
  --clr-win-bar:   #1e1b4b;
  --clr-win-bar-active: #312e81;
  --clr-win-body:  rgba(13, 13, 30, 0.92);
  --clr-surface:   rgba(255,255,255,0.05);
  --clr-surface-2: rgba(255,255,255,0.08);
  --clr-border:    rgba(255,255,255,0.10);
  --clr-border-active: rgba(139,92,246,0.7);

  --clr-primary:   #7c6af7;
  --clr-primary-glow: rgba(124,106,247,0.5);
  --clr-accent:    #e879a0;
  --clr-text:      #e2e2f0;
  --clr-text-muted:#8888aa;
  --clr-text-faint:#44445a;

  --sidebar-w: 0px;
  --taskbar-h: 44px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
  --font-sans: 'Inter','Noto Sans JP',sans-serif;
  --font-jp:   'Noto Sans JP',sans-serif;
  --font-pixel: 'VT323', monospace;
}

/* ================================================
   RESET
   ================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:var(--font-sans);color:var(--clr-text);background:#000}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;background:none;border:none;color:inherit;font:inherit}

/* Material Symbols */
.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal;font-style:normal;
  font-size:inherit;line-height:1;
  letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;
  direction:ltr;-webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  user-select:none;
}

/* ================================================
   DESKTOP
   ================================================ */
.desktop{
  width:100vw;height:100vh;
  display:grid;
  grid-template-rows: 1fr var(--taskbar-h);
  grid-template-areas:
    "canvas"
    "taskbar";
  background-image: url('wallpaper.png');
  background-size: cover;
  background-position: center bottom;
  position: relative;
}

/* ================================================
   SIDEBAR — Desktop icons overlay
   ================================================ */
.sidebar{
  position: absolute;
  top: 16px;
  left: 16px;
  display:flex;flex-direction:column;
  gap: 8px;
  z-index: 50;
  /* no background, no border — floats on wallpaper */
}


.sidebar__nav{
  display:flex;flex-direction:column;gap:4px;
}

/* Desktop icon button */
.sidebar__btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px;
  width:72px;
  border-radius: var(--radius-sm);
  color:#fff;
  background: transparent;
  transition: background var(--transition);
  cursor: pointer;
}
.sidebar__btn .material-symbols-outlined{
  font-size:2rem;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 40;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
.sidebar__label{
  font-family: var(--font-pixel);
  font-size:0.9rem;font-weight:400;
  letter-spacing:0.06em;line-height:1.2;
  text-align:center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.8);
  color:#fff;
  word-break: break-word;
}
.sidebar__btn:hover{
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
}
.sidebar__btn.is-active{
  background: rgba(124,106,247,0.35);
  outline: 1px solid rgba(124,106,247,0.6);
}
.sidebar__btn.is-active .material-symbols-outlined{
  color: #c4b5fd;
}

.desktop-canvas{
  grid-area: canvas;
  display:grid;
  grid-template-columns: 360px 1fr;
  grid-template-rows: minmax(320px,auto) minmax(260px,auto) auto;
  gap:12px;
  /* leave room for desktop icons on the left */
  padding:16px 16px 16px 104px;
  overflow-y:auto;
  overflow-x:hidden;
  align-content: start;
}
.desktop-canvas::-webkit-scrollbar{width:6px;}
.desktop-canvas::-webkit-scrollbar-track{background:transparent;}
.desktop-canvas::-webkit-scrollbar-thumb{background:rgba(124,106,247,0.3);border-radius:9999px;}

/* Window positioning */
#win-about  { grid-column:1; grid-row:1/3; }
#win-skills { grid-column:2; grid-row:1; }
#win-works  { grid-column:2; grid-row:2; }
#win-contact{ grid-column:1/3; grid-row:3; }

/* ================================================
   WINDOW
   ================================================ */
.window{
  display:flex;flex-direction:column;
  border-radius: var(--radius-md);
  border:1px solid var(--clr-border);
  overflow:hidden;
  backdrop-filter:blur(20px);
  background: var(--clr-win-body);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  transition: border-color var(--transition), box-shadow var(--transition),
              opacity 0.2s ease, visibility 0.2s ease;
  min-height:200px;
}

.window:focus-within,
.window.is-focused{
  border-color: var(--clr-border-active);
  box-shadow: 0 12px 48px rgba(0,0,0,0.7), 0 0 0 1px var(--clr-border-active);
  z-index:10;
}

/* Window minimized — entire window fades out, grid space kept so bg shows through */
.window.is-minimized{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Title bar */
.window-titlebar{
  display:flex;align-items:center;gap:8px;
  padding:0 12px;
  height:32px;
  background: var(--clr-win-bar);
  border-bottom:1px solid rgba(255,255,255,0.08);
  user-select:none;flex-shrink:0;
}

.window.is-focused .window-titlebar{
  background: var(--clr-win-bar-active);
}

.window-icon{
  font-size:0.95rem;
  color:var(--clr-primary);
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 20;
}

.window-title{
  flex:1;
  font-family:var(--font-pixel);
  font-size:1.1rem;
  letter-spacing:0.06em;
  color:var(--clr-text);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}

.window-controls{display:flex;gap:4px;margin-left:auto;}

.win-btn{
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;
  color:var(--clr-text-muted);
  transition:all var(--transition);
}
.win-btn .material-symbols-outlined{font-size:0.85rem;}
.win-btn:hover{background:rgba(255,255,255,0.12);color:var(--clr-text);}
.win-btn[data-action="min"]:hover{background:rgba(251,191,36,0.25);color:#fbbf24;}
.win-btn[data-action="max"]:hover{background:rgba(74,222,128,0.25);color:#4ade80;}

/* Window body */
.window-body{
  flex:1;overflow-y:auto;
  padding:20px;
}
.window-body::-webkit-scrollbar{width:4px;}
.window-body::-webkit-scrollbar-thumb{background:rgba(124,106,247,0.3);border-radius:9999px;}

/* ================================================
   ABOUT WINDOW
   ================================================ */
.about-layout{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:16px;height:100%;justify-content:center;
}

.about-avatar-wrap{position:relative;width:88px;height:88px;flex-shrink:0;}

.about-avatar{
  width:88px;height:88px;border-radius:50%;
  background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent));
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:700;color:#fff;
  position:relative;z-index:1;
}

.about-avatar-ring{
  position:absolute;inset:-5px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--clr-primary),var(--clr-accent),var(--clr-primary));
  z-index:0;
  animation:spin 6s linear infinite;
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#fff calc(100% - 2px));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#fff calc(100% - 2px));
}

@keyframes spin{to{transform:rotate(360deg)}}

.about-name{
  font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;
  background:linear-gradient(135deg,#fff 40%,var(--clr-primary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:-0.01em;
}
.about-tagline{font-size:0.9rem;color:var(--clr-text-muted);font-family:var(--font-jp);line-height:1.7;}

.about-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:9999px;
  font-size:0.75rem;font-weight:500;
  background:var(--clr-surface);border:1px solid var(--clr-border);
  color:var(--clr-text-muted);
}
.badge .material-symbols-outlined{font-size:0.9rem;color:var(--clr-primary);font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 20;}

.about-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 22px;border-radius:var(--radius-sm);
  font-size:0.85rem;font-weight:600;letter-spacing:0.02em;
  transition:all var(--transition);
}
.btn--primary{
  background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent));
  color:#fff;box-shadow:0 0 16px var(--clr-primary-glow);
}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 4px 24px var(--clr-primary-glow);}
.btn--outline{
  background:transparent;color:var(--clr-text);
  border:1px solid var(--clr-border);
}
.btn--outline:hover{border-color:var(--clr-primary);color:var(--clr-primary);}

/* ================================================
   SKILLS WINDOW
   ================================================ */
.skills__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.skill-card{
  background:var(--clr-surface);border:1px solid var(--clr-border);
  border-radius:var(--radius-sm);padding:16px;
  transition:border-color var(--transition);
}
.skill-card:hover{border-color:rgba(124,106,247,0.4);}

.skill-card__icon{
  display:flex;align-items:center;margin-bottom:10px;color:var(--clr-primary);
}
.skill-card__icon .material-symbols-outlined{font-size:1.4rem;font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 32;}

.skill-card__title{font-size:0.85rem;font-weight:600;margin-bottom:12px;}

.skill-chips{display:flex;flex-wrap:wrap;gap:6px;}

.skill-chip{
  padding:3px 10px;border-radius:9999px;
  font-size:0.72rem;font-weight:600;
  background:var(--clr-surface-2);border:1px solid var(--clr-border);
  color:var(--clr-text);
}

.cert-list{display:flex;flex-direction:column;gap:8px;}
.cert-item{display:flex;align-items:center;gap:8px;}
.cert-item__badge{
  padding:2px 8px;border-radius:4px;font-size:0.68rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent));color:#fff;
  flex-shrink:0;
}
.cert-item__name{font-size:0.78rem;color:var(--clr-text-muted);font-family:var(--font-jp);line-height:1.4;}

/* ================================================
   WORKS WINDOW
   ================================================ */
.works__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;
}

.work-card{
  background:var(--clr-surface);border:1px solid var(--clr-border);
  border-radius:var(--radius-sm);overflow:hidden;
  transition:border-color var(--transition),transform var(--transition);
}
.work-card:hover{border-color:rgba(124,106,247,0.4);transform:translateY(-2px);}

.work-card__thumb{
  height:70px;display:flex;align-items:center;justify-content:center;
}
.work-card__thumb-icon{
  font-size:1.6rem;color:rgba(255,255,255,0.9);
  font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 48;
}

.work-card__body{padding:10px;display:flex;flex-direction:column;gap:4px;}
.work-card__tag{font-size:0.62rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--clr-primary);}
.work-card__title{font-size:0.85rem;font-weight:600;font-family:var(--font-jp);}
.work-card__desc{font-size:0.72rem;color:var(--clr-text-muted);font-family:var(--font-jp);line-height:1.5;}
.work-card__tech{display:flex;gap:3px;flex-wrap:wrap;}
.tech-tag{padding:1px 6px;border-radius:4px;font-size:0.62rem;font-weight:600;background:var(--clr-surface-2);border:1px solid var(--clr-border);color:var(--clr-text-muted);}
.work-card__links{display:flex;gap:10px;margin-top:2px;}
.work-card__link{font-size:0.72rem;font-weight:600;color:var(--clr-primary);transition:color var(--transition);}
.work-card__link--secondary{color:var(--clr-text-muted);}
.work-card__link:hover{color:var(--clr-accent);}

.work-card--empty{
  border-style:dashed;display:flex;align-items:center;justify-content:center;min-height:140px;
}
.work-card--empty:hover{border-color:var(--clr-border);transform:none;}
.work-card--empty__inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;}
.work-card--empty__icon{font-size:1.6rem;color:var(--clr-text-faint);font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 40;}
.work-card--empty p{font-family:var(--font-jp);font-size:0.78rem;color:var(--clr-text-muted);}
.work-card--empty__hint{font-size:0.65rem;color:var(--clr-text-faint);max-width:180px;line-height:1.4;}

/* ================================================
   CONTACT WINDOW
   ================================================ */
.contact__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;
}

.contact-card{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:var(--clr-surface);border:1px solid var(--clr-border);
  border-radius:var(--radius-sm);
  transition:all var(--transition);
}
.contact-card:hover{border-color:rgba(124,106,247,0.4);transform:translateY(-1px);}
.contact-card:hover .contact-card__arrow{transform:translateX(3px);color:var(--clr-primary);}

.contact-card__icon{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius-sm);
  background:var(--clr-surface-2);flex-shrink:0;color:var(--clr-primary);
}
.contact-card__icon .material-symbols-outlined{font-size:1.1rem;font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;}

.contact-card__body{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.contact-card__label{font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--clr-text-faint);}
.contact-card__value{font-size:0.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.contact-card__arrow{font-size:1rem;color:var(--clr-text-faint);transition:transform var(--transition),color var(--transition);font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;}

/* ================================================
   TASKBAR
   ================================================ */
.taskbar{
  grid-area: taskbar;
  display:flex;align-items:center;gap:8px;
  padding:0 12px;
  background: rgba(6,6,16,0.92);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--clr-border);
  z-index:50;
}

.taskbar__start{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:28px;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent));
  font-size:0.65rem;font-weight:700;color:#fff;letter-spacing:0.06em;
  flex-shrink:0;margin-right:4px;
}

.taskbar__windows{display:flex;gap:4px;flex:1;}

.taskbar__btn{
  display:flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:var(--radius-sm);
  font-family: var(--font-pixel);
  font-size:1rem;letter-spacing:0.06em;
  color:var(--clr-text-muted);
  border:1px solid transparent;
  transition:all var(--transition);white-space:nowrap;
}
.taskbar__btn .material-symbols-outlined{font-size:0.95rem;font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 20;}
.taskbar__btn:hover{background:var(--clr-surface);color:var(--clr-text);border-color:var(--clr-border);}
.taskbar__btn.is-active{
  background:rgba(124,106,247,0.15);
  color:var(--clr-primary);
  border-color:rgba(124,106,247,0.3);
}
/* minimized = grayed out */
.taskbar__btn.is-minimized{opacity:0.5;}

.taskbar__tray{
  display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;flex-shrink:0;
}
.taskbar__clock{font-family:var(--font-pixel);font-size:1.05rem;color:var(--clr-text);letter-spacing:0.08em;line-height:1;}
.taskbar__date{font-size:0.6rem;color:var(--clr-text-muted);line-height:1.2;}

/* ================================================
   RESPONSIVE (tablet/mobile fallback)
   ================================================ */
@media(max-width:900px){
  html,body{overflow:auto;}
  .desktop{
    display:flex;flex-direction:column;height:auto;min-height:100vh;
    background-attachment:fixed;
  }
  .sidebar{
    position:relative;
    flex-direction:row;
    top:auto;left:auto;
    width:100%;padding:8px 12px;
    background:rgba(8,8,20,0.85);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--clr-border);
    position:sticky;top:0;z-index:50;
  }
  .sidebar__logo{margin-bottom:0;width:36px;height:36px;font-size:0.75rem;}
  .sidebar__nav{flex-direction:row;}
  .sidebar__btn{width:56px;padding:6px 4px;}
  .sidebar__btn .material-symbols-outlined{font-size:1.5rem;}
  .desktop-canvas{
    overflow:visible;padding:12px;gap:12px;
    grid-template-columns:1fr;
  }
  #win-about,#win-skills,#win-works,#win-contact{grid-column:auto;grid-row:auto;}
  .window{min-height:auto;}
  .taskbar{position:sticky;bottom:0;}
  .skills__grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:540px){
  .skills__grid{grid-template-columns:1fr;}
  .works__grid{grid-template-columns:1fr;}
  .contact__grid{grid-template-columns:1fr;}
  .taskbar__btn span:not(.material-symbols-outlined){display:none;}
}