:root{color-scheme:dark}*{box-sizing:border-box;touch-action:manipulation}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080c17;color:#fff1d5;font-family:system-ui,'Yu Gothic',sans-serif}#app{width:100%;height:100dvh;display:flex;flex-direction:column;align-items:center;padding:env(safe-area-inset-top) 7px env(safe-area-inset-bottom)}header{flex:none;width:min(100%,1300px);height:42px;display:flex;align-items:center;justify-content:space-between;gap:6px}.logo{font-size:clamp(12px,2.3vw,21px);font-weight:900;color:#ffd78e;text-shadow:1px 2px #85451f;white-space:nowrap}.headright{display:flex;align-items:center;gap:5px}#version{font-size:11px;color:#aeb8cc}button{cursor:pointer;border:2px solid #b8c7dc;border-radius:11px;background:linear-gradient(#334a73,#1c2c4d);color:white;font-weight:900;box-shadow:0 3px 0 #10182b}button:active,.held{transform:translateY(2px);box-shadow:0 1px 0 #10182b!important}header button{height:31px;min-width:35px}#frame{width:min(100%,1300px);flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;background:#060b15;border:2px solid #927553;border-radius:9px;overflow:hidden}canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.overlay{position:absolute;inset:0;background:#050716bc;display:flex;align-items:center;justify-content:center;padding:12px}.overlay.hide{display:none}.panel{max-width:min(690px,96%);max-height:100%;overflow-y:auto;text-align:center;border:3px double #ffcf78;background:linear-gradient(#222e4ded,#0a1025f7);padding:clamp(12px,2vw,26px);border-radius:15px;box-shadow:0 0 50px #000}.panel h1{font-size:clamp(22px,4vw,39px);margin:0 0 8px;color:#ffd887}.panel h2{font-size:clamp(17px,3vw,26px);color:#ffe2a9}.panel p{font-size:clamp(12px,1.75vw,16px);line-height:1.65;margin:8px}.panel button{margin:8px;padding:10px 23px;font-size:17px;background:linear-gradient(#d98c36,#a04c24)}.panel .tiny{font-size:12px;color:#d9d4cd}.modebox{display:flex;gap:12px;justify-content:center;align-items:stretch;flex-wrap:wrap;margin:10px 0}.modebox button{min-width:220px;max-width:280px;line-height:1.4}.modebox small{font-size:11px;color:#f9ead3;font-weight:700}#controls{display:none;width:min(100%,1300px);justify-content:space-between;align-items:center;height:92px;flex:none;padding:5px 9px;gap:12px}.dpad,.actions{display:flex;gap:10px;align-items:center}#controls button{height:67px;min-width:62px;font-size:24px;touch-action:none;user-select:none;-webkit-user-select:none}#controls .use{font-size:15px;min-width:106px;background:linear-gradient(#6e5b96,#393068)}#controls .jump{font-size:17px;min-width:104px;background:linear-gradient(#ab6a3a,#763923)}.foot{width:100%;height:23px;flex:none;text-align:center;font-size:11px;color:#99a4c1;padding-top:5px}@media(pointer:coarse),(max-width:800px){#controls{display:flex}.foot{display:none}header{height:35px}#version{font-size:9px}#controls{height:clamp(66px,17vh,96px)}#controls button{height:clamp(55px,14vh,72px);min-width:clamp(46px,12vw,74px)}}@media(max-width:360px){#controls{gap:4px}.dpad,.actions{gap:4px}#controls .use{min-width:83px;font-size:12px}#controls .jump{min-width:76px;font-size:14px}.logo{font-size:11px}}@media(orientation:portrait) and (max-width:800px){#frame{flex:1}canvas{object-fit:contain}}

#controls .combat{min-width:58px;font-size:13px;background:linear-gradient(#956b50,#60402f)}@media(max-width:800px){#controls{gap:3px;padding:2px}#controls .dpad,#controls .actions{gap:3px}#controls button{min-width:36px;font-size:17px}#controls .combat{min-width:39px;font-size:11px}#controls .jump,#controls .use{min-width:65px;font-size:12px}}

/* v0.8.7: reveal more of the heroine by slimming and lowering the title menu further */
#overlay.title-screen{background:linear-gradient(180deg,rgba(4,8,18,.05),rgba(4,8,18,.28)),url("assets/sprites/title_art.png") center/cover no-repeat;align-items:flex-end;padding:18px 14px 18px;}
#overlay.title-screen .panel{width:min(520px,88%);max-width:min(520px,88%);max-height:76%;background:rgba(9,15,35,.52);backdrop-filter:blur(3px);padding:8px 8px 10px;border-color:#f0c870;box-shadow:0 10px 32px rgba(0,0,0,.38);}
/* v0.8.14: touch-first responsive controller and full-viewport title */
#mobileHud{display:none}
#controls{display:none}
#controls small{display:block;font-size:9px;line-height:1.05;font-weight:700;white-space:nowrap}
@media (pointer:coarse),(max-width:820px){
  html,body{overflow:hidden;overscroll-behavior:none}
  #app{height:100dvh;padding:env(safe-area-inset-top) 2px env(safe-area-inset-bottom)}
  header{height:26px;min-height:26px;width:100%;padding:0 5px}
  header .logo{font-size:clamp(10px,2.2vw,14px)}
  header button{height:25px;min-width:29px;font-size:13px}
  #version{display:none}
  #frame{width:100%;flex:1;min-height:0;border-radius:5px;border-width:1px}
  #game{object-fit:cover;object-position:center center;image-rendering:auto}
  #mobileHud{display:flex;position:absolute;z-index:3;top:3px;left:5px;right:5px;justify-content:space-between;gap:8px;font-size:clamp(10px,2vw,14px);font-weight:900;color:#fff4dd;pointer-events:none;text-shadow:0 1px 4px black,1px 1px black}
  #controls{width:100%;height:clamp(112px,24dvh,172px);padding:4px max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left));gap:8px;align-items:center;justify-content:space-between;flex:none;background:linear-gradient(120deg,#121c34,#090f22)}
  body.game-active #controls{display:flex}
  body:not(.game-active) #controls,body.menu-open #controls{display:none!important}
  .controller-left,.controller-right{display:flex;align-items:center;justify-content:center;min-width:0}
  .controller-right{gap:8px}
  #controls .dpad{display:grid;grid-template-columns:repeat(3,var(--control-size));grid-template-rows:repeat(3,var(--control-size));gap:2px;align-items:center;justify-items:center}
  #controls .dpad button{width:100%;height:100%;min-width:0;min-height:0;border-radius:9px;background:linear-gradient(#556b86,#273750);font-size:clamp(16px,3vw,23px);padding:0}
  #controls .north{grid-area:1/2}#controls .west{grid-area:2/1}#controls .east{grid-area:2/3}#controls .south{grid-area:3/2}
  #controls .pad-center{grid-area:2/2;display:block;width:100%;height:100%;border-radius:7px;background:#25344d}
  #controls .actions{display:grid;grid-template-columns:repeat(3,var(--control-size));grid-template-rows:repeat(3,var(--control-size));gap:2px;align-items:center;justify-items:center}
  #controls .actions button{width:100%;height:100%;min-width:0;min-height:0;border-radius:50%;padding:1px;line-height:1;font-size:clamp(15px,3vw,22px);background:linear-gradient(#5267a2,#263969)}
  #controls .act-y{grid-area:1/2}#controls .act-x{grid-area:2/1}#controls .act-b{grid-area:2/3}#controls .act-a{grid-area:3/2}
  #controls .act-a{background:linear-gradient(#5cbd75,#23683c)!important}
  #controls .act-b{background:linear-gradient(#dc8b62,#833b38)!important}
  #controls .bomb-key{min-width:0;width:clamp(38px,8vw,54px);height:clamp(42px,8vw,54px);border-radius:12px;font-size:18px;padding:1px;background:linear-gradient(#9e744d,#684c32)}
  #controls button{touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none}
  .foot{display:none!important}
  #overlay.title-screen{padding:3px 4px 5px;align-items:flex-end;justify-content:center;background-position:center center}
  #overlay.title-screen .panel{box-sizing:border-box;width:min(98%,440px);max-width:98%;max-height:100%;padding:4px;border-width:1px;overflow:hidden;background:#0c1428bc;backdrop-filter:blur(1px)}
  #overlay.title-screen .panel>div{width:100%!important;padding:5px!important}
  #overlay.title-screen .panel img{width:min(100%,290px)!important;max-height:58px;object-fit:contain;margin:0 auto 1px!important}
  #overlay.title-screen .panel p{font-size:clamp(10px,1.8vw,12px)!important;line-height:1.3!important;margin:3px 0!important}
  #overlay.title-screen .modebox{flex-wrap:nowrap;gap:6px;margin:4px 0}
  #overlay.title-screen .modebox button{min-width:0;flex:1;max-width:none;padding:7px 2px;margin:0;font-size:clamp(11px,1.8vw,14px)}
  #overlay.title-screen .modebox small{font-size:9px}
  #overlay:not(.title-screen) .panel{max-height:100%;overflow:auto}
}
@media (orientation:landscape) and (pointer:coarse),(orientation:landscape) and (max-width:820px){
  #controls{--control-size:clamp(25px,8.0dvh,39px);height:clamp(84px,29dvh,122px);padding-top:1px;padding-bottom:1px}
  #overlay.title-screen .panel{max-width:450px}
  #overlay.title-screen .panel img{max-height:44px}
  #overlay.title-screen .panel p{font-size:10px!important;line-height:1.15!important;margin:2px 0!important}
  #overlay.title-screen .modebox button{padding:4px 2px}
}
@media (orientation:portrait) and (pointer:coarse),(orientation:portrait) and (max-width:820px){
  #controls{--control-size:clamp(30px,9.8vw,48px);height:clamp(130px,19dvh,184px)}
  #overlay.title-screen .panel img{max-height:78px}
  #frame{min-height:0}
}

/* v0.8.15 - match the camera to the actual touch viewport */
@media(pointer:coarse),(max-width:820px){
  #frame{position:relative;isolation:isolate;overflow:hidden}
  #game{object-fit:fill!important;object-position:initial!important;flex:none!important;touch-action:none}
  #mobileHud{z-index:6}
  #controls button{outline:none;touch-action:none;-webkit-touch-callout:none}
  #controls button:focus{outline:none}
  #controls button:focus-visible{outline:2px solid #fff2ad;outline-offset:2px}
  #app{user-select:none;-webkit-user-select:none}
}
@media (orientation:landscape) and (pointer:coarse),(orientation:landscape) and (max-width:820px){
  body.game-active:not(.menu-open) #app{display:grid;grid-template-columns:minmax(108px,19vw) minmax(0,1fr) minmax(162px,26vw);grid-template-rows:27px minmax(0,1fr);column-gap:2px;align-items:stretch}
  body.game-active:not(.menu-open) header{grid-column:1/-1;grid-row:1;width:100%}
  body.game-active:not(.menu-open) #frame{grid-column:2;grid-row:2;width:100%;height:100%;align-self:stretch}
  body.game-active:not(.menu-open) #controls{display:contents!important}
  body.game-active:not(.menu-open) .controller-left{grid-column:1;grid-row:2;align-self:center;justify-self:center;width:100%;height:100%;background:#101a30}
  body.game-active:not(.menu-open) .controller-right{grid-column:3;grid-row:2;align-self:center;justify-self:center;display:flex;gap:4px;width:100%;height:100%;background:#101a30}
  body.game-active:not(.menu-open) #controls{--control-size:clamp(25px,9dvh,48px)}
  body.game-active:not(.menu-open) #controls .dpad,body.game-active:not(.menu-open) #controls .actions{gap:2px}
  body.game-active:not(.menu-open) #controls .bomb-key{width:clamp(34px,8dvh,54px);height:clamp(34px,8dvh,54px)}
}

/* v0.8.16 — larger landscape thumb controls; game stays centered */
@media (orientation:landscape) and (pointer:coarse),
       (orientation:landscape) and (max-width:820px) {
  body.game-active:not(.menu-open) #app {
    grid-template-columns:minmax(126px,21vw) minmax(0,1fr) minmax(190px,30vw);
    column-gap:2px;
  }
  body.game-active:not(.menu-open) #controls {
    --control-size:clamp(38px, min(12.8dvh, 6.4vw), 72px);
  }
  body.game-active:not(.menu-open) .controller-left,
  body.game-active:not(.menu-open) .controller-right {
    box-sizing:border-box;
    padding:3px 2px;
    overflow:visible;
  }
  body.game-active:not(.menu-open) #controls .dpad,
  body.game-active:not(.menu-open) #controls .actions {
    gap:3px;
  }
  body.game-active:not(.menu-open) #controls .dpad button {
    border-radius:12px;
    font-size:clamp(20px,4.5dvh,30px);
  }
  body.game-active:not(.menu-open) #controls .actions button {
    font-size:clamp(18px,4.5dvh,30px);
    border-width:2px;
  }
  body.game-active:not(.menu-open) #controls small {
    font-size:clamp(9px,2.2dvh,13px);
  }
  body.game-active:not(.menu-open) #controls .bomb-key {
    width:clamp(44px, min(13dvh,6.6vw), 72px);
    height:clamp(48px, min(14dvh,7vw), 76px);
    flex-shrink:0;
    font-size:clamp(17px,4dvh,25px);
  }
}

/* v0.8.17: nudge the landscape D-pad and playfield right without shrinking playfield */
@media (orientation:landscape) and (pointer:coarse),
       (orientation:landscape) and (max-width:820px) {
  body.game-active:not(.menu-open) #app {
    grid-template-columns:
      minmax(138px, calc(21vw + 12px))
      minmax(0, 1fr)
      minmax(178px, calc(30vw - 12px));
  }
  body.game-active:not(.menu-open) .controller-left {
    padding-left:12px;
  }
}

/* v0.8.18: further landscape right shift and safer B / bomb separation */
@media (orientation:landscape) and (pointer:coarse),
       (orientation:landscape) and (max-width:820px) {
  body.game-active:not(.menu-open) #app {
    grid-template-columns:
      minmax(148px, calc(21vw + 22px))
      minmax(0, 1fr)
      minmax(168px, calc(30vw - 22px));
  }
  body.game-active:not(.menu-open) .controller-left {
    padding-left:22px;
  }
  body.game-active:not(.menu-open) .controller-right {
    gap:clamp(12px, 2vw, 24px);
  }
  body.game-active:not(.menu-open) #controls .bomb-key {
    margin-left:8px;
  }
}

/* v1.0.0: disable gesture zoom exclusively during active gameplay */
body.game-active:not(.menu-open) #frame,body.game-active:not(.menu-open) #controls,body.game-active:not(.menu-open) #game{touch-action:none!important;-ms-touch-action:none!important;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.game-active:not(.menu-open) #controls button{-webkit-tap-highlight-color:transparent;touch-action:none!important}