.nav-burger{
  display:none;
  position:relative;
  width:42px;height:34px;
  background:none;border:1px solid rgba(69,68,60,.45);
  padding:0;margin-left:14px;
  flex-shrink:0;
}
.nav-burger i{
  position:absolute;left:9px;right:9px;height:1.5px;
  background:var(--ink);
  transition:transform .3s cubic-bezier(.76,0,.22,1),opacity .2s,top .3s;
}
.nav-burger i:nth-child(1){top:11px}
.nav-burger i:nth-child(2){top:16px}
.nav-burger i:nth-child(3){top:21px}
.nav-burger.is-open i:nth-child(1){top:16px;transform:rotate(45deg)}
.nav-burger.is-open i:nth-child(2){opacity:0}
.nav-burger.is-open i:nth-child(3){top:16px;transform:rotate(-45deg)}

.m-drawer{
  position:fixed;inset:0;z-index:790;
  background:linear-gradient(160deg,#d1cdb7f7,#c8c4aef7);
  backdrop-filter:blur(2px);
  display:flex;flex-direction:column;
  align-items:stretch;justify-content:center;
  padding:14vh 10vw;
  opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s;
  pointer-events:none;
}
.m-drawer.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.m-drawer-head{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.34em;
  opacity:.55;margin-bottom:26px;color:var(--ink);
}
.m-drawer-head:before{
  content:"";display:inline-block;width:9px;height:9px;
  background:currentColor;transform:rotate(45deg) translateY(-1px);margin-right:12px;
}
.m-drawer a{
  display:flex;align-items:center;gap:14px;
  color:var(--ink);text-decoration:none;
  font-family:var(--font-serif);font-size:20px;letter-spacing:.24em;
  padding:15px 6px;border-bottom:1px solid rgba(69,68,60,.16);
  transition:background-color .18s,color .18s,padding-left .2s;
}
.m-drawer a i{
  width:8px;height:8px;background:var(--ink);
  transform:rotate(45deg);transition:background-color .18s;flex-shrink:0;
}
.m-drawer a .m-en{
  margin-left:auto;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.22em;opacity:.5;
}
.m-drawer a:active,.m-drawer a.is-active{
  background:var(--ink);color:var(--sand);padding-left:16px;
}
.m-drawer a:active i,.m-drawer a.is-active i{background:var(--sand)}
body.m-drawer-open{overflow:hidden}

@media (max-width:900px){
  .nav{padding:14px 18px}
  .nav-burger{display:block}

  .sec-head{padding:96px 0 44px}
  .sec-head:after{font-size:clamp(84px,20vw,150px);top:74px;right:0}
  .sec-sub{max-width:none}

  .hero{min-height:560px}
  .hero-over{margin-bottom:22px}

  .prologue-pin{padding:0 7vw}
  .prologue .sec-index{margin-bottom:38px}

  .timeline{padding-left:44px}
  .tl-item:before{left:-30px;width:22px}
  .tl-node{left:-36px}
  .tl-ghost{font-size:clamp(40px,12vw,64px)}

  .end-item{gap:20px;padding:26px 6px}
  .end-letter{width:56px;font-size:clamp(38px,11vw,56px)}

  .ost-track{grid-template-columns:40px 1fr;gap:12px;padding:14px 12px}
  .ot-tag{display:none}
  .ost-track.is-active:after{display:none}
  .ost-now{padding:26px 22px}

  .db-tab{padding:11px 16px;font-size:11px}
  .db-panel{padding-top:26px}

  .footer{padding:90px 7vw 54px}
  .term{padding:28px 4px 26px}

  .emil-stage{gap:6vh;padding:8vh 8vw}

  .hacking{padding:80px 6vw 90px}
}

@media (max-width:600px){
  .hero-title{font-size:clamp(46px,15vw,72px)}
  .hero-jp{letter-spacing:.7em;text-indent:.7em}
  .hero-side{display:none}

  .sec-title{font-size:clamp(30px,8.5vw,44px)}
  .pl-line{font-size:clamp(17px,5.2vw,26px);letter-spacing:.12em;margin-bottom:20px}

  .route-card{padding:28px 22px 34px}
  .route-card:after{font-size:92px}

  .wp-card{padding:28px 22px 26px}
  .wp-names{padding-right:0}
  .wp-blade{display:none}

  .mc-card{padding:22px 20px 24px}

  .cp-info{width:88vw;padding:24px 22px 26px}
  .cp-name{font-size:clamp(40px,13vw,64px)}

  .glory-txt{font-size:clamp(40px,13vw,88px)}
  .glory-oath p{font-size:13px;letter-spacing:.16em}

  .db-tabs{gap:6px}
  .db-tab{flex:1;justify-content:center;padding:11px 8px;letter-spacing:.12em}

  .footer-btns{flex-direction:column;align-items:center}
  .footer-btns .destruct,.footer-btns .emil-btn{width:min(280px,80vw);justify-content:center}
}

@media (hover:none),(pointer:coarse){

  .wp-lv4 p{filter:none;opacity:.9}
  .wp-lv4 b{color:var(--blood);opacity:1}

  .loc-access{opacity:.7;transform:none}

  .endaz-view .ev-desc{opacity:1}

  .hack-btn.is-desktop-only{opacity:.5;border-style:dashed}
}

@media (max-width:900px){
  html,body{overflow-x:hidden;max-width:100%}

  .fx-grain{top:0;right:0;bottom:0;left:0}

  #boot{overflow:hidden;max-width:100vw}
  .boot-frame{max-width:100%}
  .boot-cols{min-width:0}
  .boot-head,.boot-log,.boot-hex{min-width:0;max-width:100%;overflow:hidden}
  .boot-log p{min-width:0}
}

.m-game-toast{
  position:fixed;left:50%;bottom:44px;z-index:9700;transform:translate(-50%);
  background:var(--ink);color:var(--sand);
  font-size:12px;letter-spacing:.18em;line-height:1.7;
  padding:14px 24px;border:1px solid rgba(209,205,183,.3);
  max-width:86vw;text-align:center;
  opacity:0;transition:opacity .3s ease;
}
.m-game-toast.is-show{opacity:1}

@media (max-width:900px){
  .char-panel{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:88px 0 4vh !important;
    gap:2vh;
  }

  .cp-fig,
  .char-panel[data-id] .cp-fig{
    height:auto !important;
    flex:1 1 auto;
    min-height:0;
    width:100%;
    align-items:center;
    justify-content:center;
    gap:4vw;
  }
  .cp-fig img{
    height:100%;
    max-height:100%;
    width:auto;
    max-width:88vw;
    object-fit:contain;
    object-position:center;
  }

  .char-panel[data-id=pods] .cp-fig img:last-child{transform:none}

  .cp-info{
    flex:0 0 auto;
    width:86vw;
    max-width:420px;
    margin:0;
    padding:20px 22px 22px;
  }
  .cp-codename{
    margin-bottom:8px;
    letter-spacing:.24em;
    line-height:1.4;
    height:2.8em;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  .cp-name{
    font-size:clamp(30px,8vw,42px);
    line-height:1.08;
    height:2.16em;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  .cp-cn{
    margin-top:8px;
    line-height:1.4;
    height:1.4em;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .cp-rule{margin:14px 0}
  .cp-desc{
    font-size:12.5px;
    line-height:1.8;
    height:calc(1.8em * 3);
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
  }
  .cp-meta{margin-top:14px;padding-top:12px}
  .cp-meta-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .cp-stats{margin-top:14px;gap:8px}
}

@media (max-width:900px){
  .hero,.prologue-pin,.chars-pin,.char-panel,.glory-pin{height:100svh}
}

@supports (padding:env(safe-area-inset-bottom)){
  @media (max-width:900px){
    .chars-hud{bottom:calc(40px + env(safe-area-inset-bottom))}
    .hero-scroll{bottom:calc(38px + env(safe-area-inset-bottom))}
    .m-game-toast{bottom:calc(44px + env(safe-area-inset-bottom))}
  }
}

.m-drawer{justify-content:safe center;overflow-y:auto}
@media (max-height:640px){
  .m-drawer{padding-top:6vh;padding-bottom:6vh}
  .m-drawer-head{margin-bottom:14px}
  .m-drawer a{font-size:17px;padding:11px 6px}
}

@media (max-width:900px) and (max-height:600px){
  .char-panel{padding:56px 0 3vh !important;gap:1vh}
  .cp-info{padding:14px 18px 16px}
  .cp-codename{height:1.4em;-webkit-line-clamp:1;margin-bottom:5px;letter-spacing:.2em}
  .cp-name{font-size:26px;line-height:1.1;height:1.2em;-webkit-line-clamp:1}
  .cp-cn{margin-top:5px;font-size:14px}
  .cp-rule{margin:9px 0}
  .cp-desc{font-size:12px;line-height:1.65;height:calc(1.65em * 2);-webkit-line-clamp:2}
  .cp-meta{margin-top:9px;padding-top:8px}
  .cp-stats{margin-top:9px;gap:6px}

  #boot{align-items:flex-start;overflow-y:auto}
  .boot-frame{margin:5vh 0}
  .boot-log,.boot-hex{height:200px}
}