@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#fafafa}

/* ========== LOADING ========== */
#loading-screen{
  position:fixed;inset:0;z-index:9999;background:#fafafa;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;transition:opacity 1s ease;
}
#loading-screen.hidden{opacity:0;pointer-events:none}
#loading-screen h1{font-size:2.2rem;font-weight:300;color:#1a1a1a;letter-spacing:.18em;margin-bottom:.2rem}
#loading-screen p{font-family:'Noto Sans JP',sans-serif;font-size:.8rem;font-weight:300;color:#999;letter-spacing:.08em}
.loader{width:56px;height:1.5px;background:#e0e0e0;margin-top:2rem;position:relative;overflow:hidden;border-radius:1px}
.loader::after{content:'';position:absolute;width:24px;height:1.5px;background:#1a1a1a;border-radius:1px;animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{left:-24px}100%{left:56px}}

/* ========== ROOM INDICATOR ========== */
#room-indicator{
  position:fixed;top:max(16px,env(safe-area-inset-top,16px));left:50%;transform:translateX(-50%);z-index:100;
  font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:400;color:#1a1a1a;
  letter-spacing:.22em;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:8px 28px;border-radius:4px;border:1px solid rgba(0,0,0,.05);
  white-space:nowrap;max-width:calc(100vw - 90px);overflow:hidden;text-overflow:ellipsis;
}

/* ========== ARTWORK LABEL ========== */
#artwork-label{
  position:fixed;bottom:68px;left:50%;transform:translateX(-50%);z-index:100;
  font-family:'Noto Sans JP',sans-serif;font-size:.8rem;font-weight:400;color:#1a1a1a;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:10px 26px;border-radius:6px;border:1px solid rgba(0,0,0,.05);
  opacity:0;transition:opacity .3s;pointer-events:none;text-align:center;
  max-width:min(360px,calc(100vw - 40px));word-break:break-word;
}
#artwork-label.visible{opacity:1}
#artwork-label .art-desc{color:#888;font-size:.68rem;margin-top:2px}

/* ========== INFO PANEL ========== */
#info-panel{
  position:fixed;bottom:max(14px,env(safe-area-inset-bottom,14px));left:50%;transform:translateX(-50%);z-index:100;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.06);padding:10px 20px;border-radius:6px;
  font-family:'Noto Sans JP',sans-serif;font-size:.7rem;font-weight:300;color:#777;
  letter-spacing:.04em;pointer-events:none;max-width:calc(100vw - 32px);text-align:center;line-height:1.5;
}
.mobile-info{display:none}
.desktop-info{display:inline}

/* ========== NAV — Desktop sidebar ========== */
#nav-menu{
  position:fixed;top:max(16px,env(safe-area-inset-top,16px));right:max(16px,env(safe-area-inset-right,16px));
  z-index:200;display:flex;flex-direction:column;gap:6px;
}
.nav-btn{
  font-family:'Noto Sans JP',sans-serif;font-size:.68rem;font-weight:400;color:#555;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.07);padding:7px 14px;border-radius:5px;cursor:pointer;
  letter-spacing:.04em;transition:all .2s;text-decoration:none;text-align:left;display:block;white-space:nowrap;
}
.nav-btn:hover{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.nav-btn.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a;pointer-events:none}

#nav-toggle{display:none}
#nav-overlay{display:none}

/* ========== VIRTUAL JOYSTICK (mobile only) ========== */
#joystick-zone{
  display:none;
  position:fixed;
  bottom:max(24px,env(safe-area-inset-bottom,24px));
  left:max(20px,env(safe-area-inset-left,20px));
  z-index:150;
  width:120px;
  height:120px;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
#joystick-base{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:rgba(0,0,0,.08);
  border:2px solid rgba(0,0,0,.12);
}
#joystick-thumb{
  position:absolute;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(0,0,0,.2);
  border:2px solid rgba(0,0,0,.25);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  transition:background .15s;
}
#joystick-thumb.active{
  background:rgba(0,0,0,.35);
}

/* ========================================
   MOBILE ≤ 768px
   ======================================== */
@media(max-width:768px){
  .desktop-info{display:none}
  .mobile-info{display:inline}

  #joystick-zone{display:block}

  #info-panel{
    bottom:max(10px,env(safe-area-inset-bottom,10px));
    left:auto;
    right:max(12px,env(safe-area-inset-right,12px));
    transform:none;
    max-width:calc(100vw - 160px);
    font-size:.6rem;
    padding:8px 14px;
  }

  #artwork-label{
    bottom:auto;
    top:max(52px,calc(env(safe-area-inset-top,16px) + 44px));
    font-size:.72rem;
    padding:8px 18px;
  }

  #nav-toggle{
    display:flex;align-items:center;justify-content:center;
    position:fixed;top:max(12px,env(safe-area-inset-top,12px));right:max(12px,env(safe-area-inset-right,12px));
    z-index:300;width:42px;height:42px;
    background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(0,0,0,.08);border-radius:8px;cursor:pointer;
    font-size:1.2rem;color:#333;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;line-height:1;
  }
  #nav-toggle:active{background:#1a1a1a;color:#fff}

  #nav-menu{
    position:fixed;top:0;right:0;
    width:min(220px,70vw);height:100dvh;
    padding:max(64px,calc(env(safe-area-inset-top,16px) + 56px)) 12px max(20px,env(safe-area-inset-bottom,20px)) 12px;
    background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-left:1px solid rgba(0,0,0,.06);
    transform:translateX(100%);transition:transform .28s ease;
    overflow-y:auto;-webkit-overflow-scrolling:touch;gap:4px;
  }
  #nav-menu.open{transform:translateX(0)}

  .nav-btn{font-size:.72rem;padding:10px 12px;border-radius:6px;min-height:44px;display:flex;align-items:center}

  #nav-overlay.visible{display:block;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:190}

  #room-indicator{font-size:.78rem;padding:6px 16px;letter-spacing:.12em;max-width:calc(100vw - 72px)}
}

/* ========== SMALL PHONES ≤ 389px ========== */
@media(max-width:389px){
  #loading-screen h1{font-size:1.4rem;letter-spacing:.12em}
  #loading-screen p{font-size:.65rem}
  #room-indicator{font-size:.6rem;padding:4px 10px;letter-spacing:.08em;max-width:calc(100vw - 60px)}
  #artwork-label{font-size:.65rem;padding:6px 10px}
  #artwork-label .art-desc{font-size:.55rem}
  #info-panel{font-size:.5rem;padding:5px 8px;max-width:calc(100vw - 145px)}

  #nav-toggle{width:36px;height:36px;font-size:1rem}
  #nav-menu{width:min(175px,78vw)}
  .nav-btn{font-size:.62rem;padding:8px 8px;min-height:40px}

  #joystick-zone{width:100px;height:100px;bottom:max(16px,env(safe-area-inset-bottom,16px));left:max(12px,env(safe-area-inset-left,12px))}
  #joystick-thumb{width:38px;height:38px}
}

/* ========== MEDIUM PHONES 390-430px ========== */
@media(min-width:390px) and (max-width:430px){
  #loading-screen h1{font-size:1.6rem}
  #loading-screen p{font-size:.7rem}
  #room-indicator{font-size:.72rem;padding:5px 14px}
  #artwork-label{font-size:.7rem;padding:8px 14px}
  #info-panel{font-size:.58rem;padding:7px 12px}
}

/* ========== LARGE PHONES 431-768px ========== */
@media(min-width:431px) and (max-width:768px){
  #loading-screen h1{font-size:1.8rem}
  #room-indicator{font-size:.82rem;padding:6px 18px}
  #artwork-label{font-size:.75rem}
  #info-panel{font-size:.62rem}
  #nav-menu{width:min(240px,60vw)}
  .nav-btn{font-size:.72rem;padding:10px 14px;min-height:44px}
  #joystick-zone{width:130px;height:130px}
  #joystick-thumb{width:48px;height:48px}
}

/* ========== TABLET 769-1024px ========== */
@media(min-width:769px) and (max-width:1024px){
  #room-indicator{font-size:.9rem;padding:7px 22px}
  .nav-btn{font-size:.66rem;padding:6px 12px}
  #info-panel{font-size:.65rem}
}

/* ========== LANDSCAPE PHONE ========== */
@media(max-height:440px) and (orientation:landscape){
  #room-indicator{font-size:.62rem;padding:3px 10px;top:6px}
  #info-panel{font-size:.48rem;padding:3px 8px;bottom:4px;right:4px;max-width:calc(100vw - 140px)}
  #artwork-label{font-size:.58rem;padding:4px 10px;top:32px}
  #nav-toggle{width:32px;height:32px;font-size:.9rem;top:4px;right:4px}
  #nav-menu{padding-top:40px}
  .nav-btn{font-size:.58rem;padding:5px 8px;min-height:32px}
  #joystick-zone{width:90px;height:90px;bottom:8px;left:8px}
  #joystick-thumb{width:34px;height:34px}
}

/* ========== Desktop override ========== */
@media(min-width:769px){
  #nav-overlay{display:none!important}
  .mobile-info{display:none!important}
  .desktop-info{display:inline!important}
  #joystick-zone{display:none!important}
}