/* AMIDA SHOOTER — game-020. Self-hosted subsets of Noto Sans JP (SIL OFL 1.1, see FONT-LICENSE.txt). */
@font-face{font-family:"AS Noto";src:url("fonts/NotoSansJP-700.woff2") format("woff2");font-weight:500 800;font-display:swap;}
@font-face{font-family:"AS Noto";src:url("fonts/NotoSansJP-900.woff2") format("woff2");font-weight:900;font-display:swap;}

:root{
  --ink:#26232e;--paper:#f7f1e1;--red:#e2423b;--blue:#2f6fe0;--yellow:#ffd84d;--desk:#3b3f4a;
  --font:"AS Noto","Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;
}
html,body{margin:0;height:100%;overflow:hidden;background:var(--desk);overscroll-behavior:none;}
body{
  font-family:var(--font);color:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  touch-action:none;
}
#view{position:fixed;left:0;top:0;display:block;touch-action:none;}
[hidden]{display:none !important;}
/* the home link only on the title and the run result */
body:not([data-scene="title"]):not([data-scene="result"]):not([data-scene="worlds"]) .game-home-link{display:none;}

/* the 360×640 frame (set by game.js); --u is one logical unit in CSS px */
#frame{position:fixed;pointer-events:none;--u:1px;}
#frame>*{pointer-events:auto;}

/* ---------- buttons */
.btn{
  display:flex;align-items:center;justify-content:center;
  min-height:max(44px,calc(var(--u)*48));padding:0 calc(var(--u)*18);
  border:calc(var(--u)*2.5) solid var(--ink);border-radius:calc(var(--u)*12);
  background:#fff;color:var(--ink);
  font:900 max(14px,calc(var(--u)*16))/1 var(--font);letter-spacing:0.02em;
  cursor:pointer;touch-action:manipulation;
  box-shadow:0 calc(var(--u)*4) 0 var(--ink);
  transition:transform 90ms ease,box-shadow 90ms ease,filter 120ms;
}
.btn:hover{filter:brightness(0.97);}
.btn:active{transform:translateY(calc(var(--u)*3));box-shadow:0 calc(var(--u)*1) 0 var(--ink);}
.btn:focus-visible{outline:calc(var(--u)*3) solid var(--blue);outline-offset:calc(var(--u)*3);}
.btn.primary{background:var(--yellow);}
.btn.ghost{background:transparent;box-shadow:none;border-style:dashed;}
.row{display:flex;gap:calc(var(--u)*10);}
.row>.btn{flex:1;}
.chip{
  min-height:36px;padding:0 calc(var(--u)*14);border-radius:999px;border:2px solid var(--ink);
  background:rgba(255,252,244,0.92);color:var(--ink);font:900 max(12px,calc(var(--u)*13))/1 var(--font);cursor:pointer;touch-action:manipulation;
}
.chip:hover{background:#fff;}
.chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

.title-ui{position:absolute;right:calc(var(--u)*12);top:calc(var(--u)*12);display:flex;gap:calc(var(--u)*8);}

.pause-btn{
  position:absolute;left:calc(var(--u)*106);top:calc(var(--u)*6);
  width:max(34px,calc(var(--u)*30));height:max(30px,calc(var(--u)*28));border-radius:999px;
  border:2px solid var(--ink);background:rgba(255,252,244,0.9);cursor:pointer;display:grid;place-items:center;touch-action:manipulation;padding:0;
}
.pause-btn span{width:9px;height:10px;border-left:3px solid var(--ink);border-right:3px solid var(--ink);box-sizing:border-box;}
.pause-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* ---------- panels */
.panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(38,35,46,0.55);}
.panel-box{
  width:min(calc(var(--u)*310),92%);max-height:92%;overflow:auto;box-sizing:border-box;
  background:var(--paper);border:calc(var(--u)*2.5) solid var(--ink);border-radius:calc(var(--u)*14);
  padding:calc(var(--u)*18);display:flex;flex-direction:column;gap:calc(var(--u)*12);
  background-image:linear-gradient(rgba(90,150,210,0.14) 1px,transparent 1px),linear-gradient(90deg,rgba(90,150,210,0.14) 1px,transparent 1px);
  background-size:calc(var(--u)*20) calc(var(--u)*20);
}
.panel h2{margin:0;font:900 max(18px,calc(var(--u)*22))/1.2 var(--font);text-align:center;}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font:800 max(13px,calc(var(--u)*14))/1.3 var(--font);}
.set-row small{display:block;font-weight:700;font-size:0.78em;color:#666;}
.seg{display:flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden;}
.seg button{border:0;background:transparent;padding:8px 12px;font:900 13px/1 var(--font);cursor:pointer;color:var(--ink);}
.seg button.on{background:var(--ink);color:#fff;}
.toggle{min-width:64px;min-height:34px;border:2px solid var(--ink);border-radius:999px;background:#fff;font:900 13px/1 var(--font);cursor:pointer;color:var(--ink);}
.toggle.on{background:var(--blue);color:#fff;}
.toggle:disabled{opacity:0.55;cursor:not-allowed;background:#eee;}
.set-rewards{display:flex;flex-direction:column;gap:calc(var(--u)*8);border-top:2px dashed rgba(38,35,46,0.2);padding-top:calc(var(--u)*8);}
.set-rewards>small{font:800 max(11px,calc(var(--u)*11))/1 var(--font);color:#666;}
.zukan-box{gap:calc(var(--u)*8);}
#zukan-list{display:flex;flex-direction:column;gap:6px;}
.zk{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,0.75);border-radius:8px;padding:4px 6px;}
.zk canvas{width:44px;height:44px;flex:none;}
.zk b{display:block;font:900 max(12px,calc(var(--u)*12.5))/1.2 var(--font);}
.zk span{display:block;font:700 max(10px,calc(var(--u)*10.5))/1.35 var(--font);color:#555;}
.zk .w{font-size:0.8em;color:#999;}
input[type=range]{width:50%;accent-color:var(--blue);}
.set-best{display:flex;justify-content:space-between;align-items:baseline;font:900 15px/1.2 var(--font);}
.set-best small,.set-keys small{font-weight:800;color:#666;}
.set-keys p{margin:4px 0 0;font:700 12px/1.6 var(--font);white-space:pre-line;}
#pv video{width:min(92%,calc(var(--u)*330));max-height:78%;border:3px solid var(--ink);border-radius:10px;background:#000;}

/* ---------- the run result */
.result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*16);background:rgba(38,35,46,0.45);padding:calc(var(--u)*16);box-sizing:border-box;}
.res-card{
  width:min(calc(var(--u)*320),94%);box-sizing:border-box;background:var(--paper);border:calc(var(--u)*2.5) solid var(--ink);border-radius:calc(var(--u)*14);
  padding:calc(var(--u)*16);display:flex;flex-direction:column;gap:calc(var(--u)*10);text-align:center;
  background-image:linear-gradient(rgba(90,150,210,0.14) 1px,transparent 1px),linear-gradient(90deg,rgba(90,150,210,0.14) 1px,transparent 1px);
  background-size:calc(var(--u)*20) calc(var(--u)*20);
}
.res-head{font:900 max(20px,calc(var(--u)*26))/1.1 var(--font);}
.res-head.win{color:var(--red);}
.res-score{font:900 max(30px,calc(var(--u)*40))/1 var(--font);}
.res-best{font:900 max(13px,calc(var(--u)*14))/1 var(--font);color:var(--red);}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*8);}
.res-grid div{background:rgba(255,255,255,0.7);border:1.5px solid rgba(38,35,46,0.3);border-radius:10px;padding:calc(var(--u)*8) 4px;display:flex;flex-direction:column;gap:4px;}
.res-grid small,.res-ups small{font:800 max(11px,calc(var(--u)*11))/1 var(--font);color:#666;}
.res-grid b{font:900 max(17px,calc(var(--u)*20))/1 var(--font);}
.res-ups{display:flex;flex-direction:column;gap:6px;}
#res-ups{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;}
#res-ups span{font:800 max(11px,calc(var(--u)*11))/1 var(--font);padding:5px 8px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;}
#res-ups span.r1{background:#dff0ff;}
#res-ups span.r2{background:#fff1c2;}
.res-btns{width:min(calc(var(--u)*320),94%);display:flex;flex-direction:column;gap:calc(var(--u)*10);}

/* ---------- the notebooks (world select) and a notebook's contents */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*12);
  padding:calc(var(--u)*14);box-sizing:border-box;background:rgba(38,35,46,0.35);}
.screen-title{margin:0;padding:6px 16px;background:var(--paper);border:calc(var(--u)*2.5) solid var(--ink);border-radius:999px;font:900 max(17px,calc(var(--u)*20))/1.2 var(--font);}
.w-total{font:900 max(13px,calc(var(--u)*14))/1 var(--font);color:#fff;text-shadow:0 1px 0 var(--ink);}
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*10);width:min(calc(var(--u)*336),100%);}
.book{position:relative;aspect-ratio:3/4.2;border:calc(var(--u)*2.5) solid var(--ink);border-radius:calc(var(--u)*6) calc(var(--u)*10) calc(var(--u)*10) calc(var(--u)*6);
  background:var(--c,#ddd);cursor:pointer;padding:calc(var(--u)*7) calc(var(--u)*5) calc(var(--u)*5) calc(var(--u)*11);box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:space-between;text-align:left;color:var(--ink);font-family:var(--font);
  box-shadow:0 calc(var(--u)*4) 0 var(--ink);touch-action:manipulation;transition:transform 90ms ease;}
.book::before{content:"";position:absolute;left:calc(var(--u)*4);top:0;bottom:0;width:calc(var(--u)*3);background:rgba(38,35,46,0.25);}
.book:hover{transform:translateY(calc(var(--u)*-2));}
.book:focus-visible{outline:calc(var(--u)*3) solid var(--blue);outline-offset:2px;}
.book .no{font:900 max(18px,calc(var(--u)*22))/1 var(--font);}
.book .nm{font:900 max(10px,calc(var(--u)*10.5))/1.25 var(--font);background:rgba(255,255,255,0.85);border-radius:4px;padding:3px 4px;}
.book .st{font:800 max(10px,calc(var(--u)*10))/1 var(--font);}
.book .clr{position:absolute;right:calc(var(--u)*4);top:calc(var(--u)*4);color:var(--red);font:900 max(14px,calc(var(--u)*15))/1 var(--font);transform:rotate(12deg);}
.book.locked{filter:grayscale(1) brightness(0.8);cursor:not-allowed;box-shadow:none;}
.book.locked .no::after{content:" 🔒";font-size:0.7em;}
.toc-card{width:min(calc(var(--u)*320),100%);background:var(--paper);border:calc(var(--u)*2.5) solid var(--ink);border-radius:calc(var(--u)*14);padding:calc(var(--u)*14);box-sizing:border-box;
  background-image:linear-gradient(rgba(90,150,210,0.14) 1px,transparent 1px),linear-gradient(90deg,rgba(90,150,210,0.14) 1px,transparent 1px);background-size:calc(var(--u)*20) calc(var(--u)*20);}
.toc-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:calc(var(--u)*8);border-bottom:3px solid var(--c,var(--ink));padding-bottom:6px;}
.toc-head b{font:900 max(17px,calc(var(--u)*20))/1.2 var(--font);}
.toc-head small{font:900 max(12px,calc(var(--u)*13))/1 var(--font);}
.toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(var(--u)*4);}
.toc-list li{display:flex;align-items:center;gap:8px;font:800 max(12px,calc(var(--u)*13))/1.3 var(--font);padding:calc(var(--u)*5) calc(var(--u)*6);border-radius:8px;}
.toc-list li .n{font-weight:900;min-width:2.4em;}
.toc-list li .t{flex:1;}
.toc-list li .tag{font-size:0.75em;padding:2px 6px;border-radius:999px;background:var(--ink);color:#fff;}
.toc-list li .s{color:#c08a00;letter-spacing:1px;white-space:nowrap;}
.toc-list li.done{cursor:pointer;background:rgba(255,255,255,0.7);}
.toc-list li.done:hover{background:#fff;}
.toc-list li.mark{box-shadow:inset 3px 0 0 var(--red);}
.toc-note{display:block;margin-top:8px;font:700 max(10px,calc(var(--u)*10.5))/1.4 var(--font);color:#666;}
.toc-btns{width:min(calc(var(--u)*320),100%);display:flex;flex-direction:column;gap:calc(var(--u)*8);}
.diff-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);border:calc(var(--u)*2.5) solid var(--ink);border-radius:calc(var(--u)*12);padding:calc(var(--u)*6) calc(var(--u)*10);font:900 max(13px,calc(var(--u)*14))/1.2 var(--font);}
.diff-note{display:block;text-align:center;font:700 max(11px,calc(var(--u)*11))/1.3 var(--font);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.6);}
.toc-btns .btn small,.res-btns .btn small{display:block;font-size:0.7em;font-weight:700;margin-top:4px;}
#btn-retry{flex-direction:column;padding-top:6px;padding-bottom:6px;}
#btn-retry small{display:block;font-weight:700;font-size:0.62em;opacity:0.8;}

.loading{position:absolute;inset:0;display:grid;place-items:center;font:900 32px/1 var(--font);color:var(--paper);}
/* PV capture: only the canvas */
body.capture .game-home-link,body.capture #frame{display:none !important;}
body:not([data-scene="loading"]) .loading{display:none;}
/* gamepad: the focused item always shows (browsers hide focus rings after a mouse click) */
body.pad :focus{outline:3px solid var(--blue);outline-offset:2px;}