:root{
  --bg: #000;                
  --neon: #ffd94a;           
  --neon-strong: #ffea80;   
  --max: 1200px;
}

*{ box-sizing: border-box; }
html, body{
  height: 100svh;
  overflow: hidden;
}
body{
  margin:0;
  background: var(--bg);
  color: #e8e8e8;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  display:flex; flex-direction:column;
}

.site-header{
  padding: clamp(16px, 3vw, 28px) 24px 0;
  text-align:center;
}
.neon{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(28px, 7vw, 72px);
  color: var(--neon);
  text-shadow:
    0 0 1px var(--neon),
    0 0 6px var(--neon),
    0 0 14px var(--neon),
    0 0 28px var(--neon-strong),
    0 0 48px var(--neon-strong);
  filter: drop-shadow(0 0 2px #000);
  animation: neonPulse 3.5s ease-in-out infinite;
}
@keyframes neonPulse{
  0%,100%{ opacity: 1; text-shadow:
    0 0 1px var(--neon), 0 0 6px var(--neon), 0 0 14px var(--neon),
    0 0 28px var(--neon-strong), 0 0 48px var(--neon-strong); }
  40%{ opacity:.95; text-shadow:
    0 0 1px var(--neon), 0 0 5px var(--neon), 0 0 12px var(--neon),
    0 0 22px var(--neon-strong), 0 0 40px var(--neon-strong); }
  48%{ opacity:.85; }
  52%{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .neon{ animation: none; }
}

@media (max-width: 900px){
  .site-header .neon{
    font-size: clamp(48px, 12vw, 100px);
    line-height: .95;
  }
}

@media (max-width: 600px){
  .site-header .neon{
    font-size: clamp(64px, 16vw, 110px);
    letter-spacing: 0.5px; 
  }
  .site-header .line-break{ display:block; } 
  .site-header{ padding-top: clamp(20px, 6vh, 48px); }
}

@media (max-width: 380px){
  .site-header .neon{
    font-size: clamp(60px, 18vw, 100px);
  }
}

main{ display:block; }

.desk-stage{
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, var(--max));
  aspect-ratio: 16 / 9;    
  z-index: 0;             
}

.desk-bg{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.item{
  position: absolute;
  z-index: 1;
  transform-origin: center;
  transition: transform .25s ease, filter .25s ease;
}
.item img{ display:block; width:100%; height:auto; pointer-events:none; }
.item:hover{ transform: translateY(-6px) scale(1.03); filter: drop-shadow(0 12px 18px rgba(255,221,128,.25)); }

.item--screen{   width: 36%; left: 30%; bottom: 41%;  filter: drop-shadow(0 12px 18px rgba(255,221,128,.25)); }
.click-hint {
  position: absolute;
  top: 14%;         
  left: 8%;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: bold;
  color: #ffd94a;
  text-shadow: 0 0 6px rgba(255, 217, 74, 0.8);
  animation: hintPulse 1.2s ease-in-out infinite;
  user-select: none;
  pointer-events: none; 
}

@keyframes hintPulse {
  0%,100% { transform: rotate(-12deg) scale(1); opacity: 0.85; }
  50%     { transform: rotate(-10deg) scale(1.15); opacity: 1; }
}


.item--keyboard{ width: 16%; left: 42%; bottom: 38%; transform: translateX(-50%) rotate(-4deg); }
.item--mouse{    width: 7.5%; left: 58%; bottom: 42%; transform: translateX(-50%) rotate(4deg); }
.item--lamp-left{width: 28%; left: 12%; bottom: 45%; }
.item--tower-right{width: 26%; right: 13%; bottom: 45%; }

.item--lamp-left img {
  transform: scaleX(-1);
}


@media (max-width: 800px){
  .desk-stage{ aspect-ratio: 3/4; } 

  .desk-bg{
    width: 120%;
    left: 50%;
    transform: translateX(-50%);
  }

  .item--screen{ width: 60%; left: 18%; bottom: 18%; }
  .item--keyboard{ width: 30%; left: 35%; bottom: 15%; }
  .item--mouse{ width: 14%; left: 60%; bottom: 20%; }
  .item--lamp-left{ width: 30%; left: 2%; bottom: 20%; }
  .item--tower-right{ width: 40%; right: 2%; bottom: 20%; z-index: inherit; }
}

@media (min-width: 900px){
  .item:hover{ transform: translateY(-8px) scale(1.035) rotateZ(.2deg); }
}


.neon{
  font-family: 'Pacifico', cursive;
  font-size: clamp(32px, 9vw, 90px);
  font-weight: 100;
  color: #ddcd92;
  text-align: center;
  text-shadow:
    0 0 2px rgba(221,205,146,0.6),
    0 0 6px rgba(255,217,74,0.6),
    0 0 12px rgba(255,234,128,0.5),
    0 0 22px rgba(255,234,128,0.4);
  animation: neonPulse 3.5s infinite ease-in-out;
  margin: 0;
  line-height: 1.2;
}


@keyframes neonPulse {
  0%,100% { opacity: 1; text-shadow:
    0 0 2px rgba(221,205,146,0.6),
    0 0 6px rgba(255,217,74,0.6),
    0 0 12px rgba(255,234,128,0.5),
    0 0 22px rgba(255,234,128,0.4);
  }
  45% { opacity: .9; text-shadow:
    0 0 1px rgba(221,205,146,0.5),
    0 0 4px rgba(255,217,74,0.5),
    0 0 8px rgba(255,234,128,0.4);
  }
  55% { opacity: .95; }
}
@media (max-width: 600px) {
  .line-break {
    display: block; 
  }
}

.desk-stage{
  transition: transform .6s ease;
  transform-origin: center center;
}

.zooming .desk-stage{
  transform: scale(1.2); 
}

.screen-transition{
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity .6s ease;
  z-index: 9999;
  pointer-events: none;
}
.screen-transition.active{
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 900px) and (max-width: 1600px) and (max-height: 1000px) {
  :root { --max: 1000px; }            
  .desk-stage {
    transform-origin: bottom center;   
    transform: translateX(-50%) scale(0.88);
  }
}