:root{
  --bg:#1a1712; --panel:#241f18; --line:#4a3f2e;
  --gold:#f5c542; --red:#c8503a; --text:#f3ecdd; --dim:#b0a288; --danger:#ff5555;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;}
html,body{margin:0;padding:0;background:#0d0b08;color:var(--text);
  font-family:"Segoe UI","Hiragino Sans","Yu Gothic UI",sans-serif;overflow:hidden;
  height:100%;touch-action:none;overscroll-behavior:none;}
#wrap{position:relative;width:100vw;height:100vh;max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;background:#0d0b08;}
#game{position:relative;flex:1;overflow:hidden;background:#2f4a2a;}
canvas{display:block;position:absolute;top:0;left:0;}

/* HUD */
#hud{position:absolute;top:0;left:0;right:0;padding:8px 10px;pointer-events:none;z-index:5;}
#timeWrap{background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:10px;
  height:22px;overflow:hidden;position:relative;}
#timeBar{height:100%;width:100%;background:linear-gradient(90deg,#e0a92e,#f5c542);
  transition:width .15s linear;}
#timeBar.warn{background:linear-gradient(90deg,#c8503a,#ff7a5a);}
#timeTxt{position:absolute;top:0;left:0;right:0;line-height:22px;text-align:center;
  font-size:13px;font-weight:bold;text-shadow:0 1px 2px #000;}
#questLine{margin-top:5px;font-size:12.5px;text-align:center;color:#ffe9b0;
  text-shadow:0 1px 3px #000;min-height:17px;font-weight:600;}
#questLine .mod{color:#ff9a7a;}
#hudRow{display:flex;justify-content:space-between;margin-top:3px;font-size:13px;
  text-shadow:0 1px 3px #000;}
#score{font-weight:bold;}
#combo{color:var(--gold);font-weight:bold;}
#deliv{color:var(--dim);}

/* 依頼バナー（セリフ）— 下部配置で矢印と干渉しない。表示中は世界が止まる */
#banner{position:absolute;bottom:128px;left:50%;transform:translateX(-50%);z-index:8;
  background:rgba(20,15,8,.94);border:2px solid #7a5a12;border-radius:12px;
  padding:9px 14px;max-width:86%;min-width:240px;pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,.5);transition:opacity .3s,transform .3s;
  display:flex;align-items:center;gap:10px;}
#banner.hidden{opacity:0;transform:translateX(-50%) translateY(8px);}
#banner .bport{flex:0 0 auto;width:54px;height:54px;border-radius:9px;overflow:hidden;
  border:1.5px solid #7a5a12;background:#0d0b08;box-shadow:0 2px 6px rgba(0,0,0,.5);}
#banner .bport img{width:100%;height:100%;object-fit:cover;display:block;}
#banner .btext{flex:1;min-width:0;}
#banner .who{font-size:11.5px;color:var(--gold);font-weight:bold;margin-bottom:2px;}
#banner .say{font-size:13.5px;line-height:1.55;}
#banner .gain{color:#8fe07a;font-weight:bold;}

#comboPop{position:absolute;top:44%;left:50%;transform:translateX(-50%);
  font-size:34px;font-weight:900;color:var(--gold);text-shadow:0 2px 8px #000;
  pointer-events:none;opacity:0;z-index:6;white-space:nowrap;}

/* controls */
#dash{position:absolute;right:18px;bottom:24px;width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#f5c542,#c8880f);border:3px solid #7a5a12;
  color:#3a2a05;font-size:15px;font-weight:900;z-index:7;display:flex;align-items:center;
  justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.5);touch-action:none;}
#dash:active{transform:scale(.94);}
#dash.cd{filter:grayscale(.7) brightness(.6);}
.itemBtn{position:absolute;right:112px;bottom:24px;width:58px;height:58px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#b08ae0,#6a4a9a);border:3px solid #4a2f6b;
  color:#fff;font-size:15px;font-weight:900;z-index:7;display:flex;align-items:center;
  justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.5);touch-action:none;}
#btnFire{right:112px;bottom:96px;background:radial-gradient(circle at 40% 35%,#ff9a5a,#c8503a);
  border-color:#7a2f1a;}
#btnDodge{right:112px;bottom:168px;background:radial-gradient(circle at 40% 35%,#8fe0ff,#3f86ce);
  border-color:#2f6fb0;}
#btnDodge.active{box-shadow:0 0 14px 4px rgba(143,224,255,.8);border-color:#bfeeff;}
.itemBtn:active{transform:scale(.92);}
#pauseBtn{position:absolute;top:64px;right:12px;width:40px;height:40px;border-radius:10px;
  background:rgba(20,15,8,.7);border:1.5px solid var(--line);color:var(--text);
  font-size:16px;z-index:7;display:flex;align-items:center;justify-content:center;cursor:pointer;}
#pauseBtn:active{transform:scale(.92);}
#mapBtn{position:absolute;top:64px;right:60px;width:40px;height:40px;border-radius:10px;
  background:rgba(20,15,8,.7);border:1.5px solid var(--line);color:var(--text);
  font-size:16px;z-index:7;display:flex;align-items:center;justify-content:center;cursor:pointer;}
#mapBtn:active{transform:scale(.92);}
#mapBtn.off{opacity:.5;filter:grayscale(.7);}

/* よろず屋 */
.shopRow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;margin:5px 0;width:min(340px,86vw);text-align:left;}
.shopRow .si{flex:1;font-size:14px;line-height:1.4;}
.shopRow .si small{display:block;color:var(--dim);font-size:11.5px;}
.shopRow button{background:linear-gradient(180deg,#e0a92e,#c8880f);border:none;color:#2a1f05;
  font-weight:900;font-size:14px;padding:9px 14px;border-radius:9px;cursor:pointer;
  white-space:nowrap;box-shadow:0 2px 0 #7a5a12;}
.shopRow button:disabled{filter:grayscale(.8) brightness(.6);cursor:default;}

/* overlays */
.screen{position:absolute;inset:0;z-index:20;background:rgba(13,11,8,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;gap:13px;}
.screen.hidden{display:none;}
.screen h1{font-size:30px;margin:0;color:var(--gold);letter-spacing:2px;
  text-shadow:0 3px 0 #7a5a12;}
#titleArt{width:min(430px,92%);border-radius:14px;overflow:hidden;
  border:2px solid #7a5a12;box-shadow:0 6px 20px rgba(0,0,0,.6);margin-bottom:2px;}
#titleArt svg{display:block;width:100%;height:auto;}
#titleArt img.titleImg{display:block;width:100%;height:auto;}
/* 100区完全クリア記念 */
#congratsScreen{z-index:40;gap:18px;background:rgba(13,11,8,.96);}
#congratsImg{width:min(600px,94vw);border-radius:14px;border:2px solid #7a5a12;
  box-shadow:0 8px 30px rgba(0,0,0,.7);}
.btnRow2{display:flex;gap:10px;margin-top:2px;}
.btnRow2 button{background:var(--panel);border:1.5px solid var(--line);color:var(--text);
  font-size:14px;font-weight:700;padding:11px 20px;border-radius:11px;cursor:pointer;}
.btnRow2 button:active{transform:translateY(2px);}
#shareXBtn{border-color:#5a7a9a;color:#a8cff0;}
.btnRow2 button.langbtn{border-color:#6a7a5a;color:#cfe0b8;flex:0 0 auto;}
/* 結果画面: 内容が増えたのでスクロール可能に */
#overScreen{overflow-y:auto;align-items:stretch;}
#overScroll{margin:auto;display:flex;flex-direction:column;align-items:center;gap:12px;
  width:100%;max-width:400px;padding:8px 0;}
#runStats{font-size:12.5px;color:#c9b79a;line-height:1.7;}
#rankReg{width:100%;background:rgba(36,31,24,.7);border:1px solid var(--line);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:8px;}
#rankReg .regTitle{color:var(--gold);font-weight:900;font-size:15px;}
#rankReg input{background:#1a1712;border:1px solid var(--line);border-radius:8px;color:var(--text);
  font-size:15px;padding:10px 12px;width:100%;}
#rankReg input:focus{outline:none;border-color:var(--gold);}
#rankReg .idRow{display:flex;align-items:center;gap:6px;}
#rankReg .idRow .at{color:var(--dim);font-size:16px;font-weight:bold;}
#regBtn{background:linear-gradient(180deg,#e0a92e,#c8880f);border:none;color:#2a1f05;
  font-weight:900;font-size:15px;padding:11px;border-radius:9px;cursor:pointer;box-shadow:0 3px 0 #7a5a12;}
#regBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #7a5a12;}
#regBtn:disabled{filter:grayscale(.7) brightness(.7);cursor:default;}
#regMsg{font-size:13px;min-height:16px;}
#regMsg.ok{color:var(--safe);}#regMsg.err{color:var(--danger);}
#rankReg .note{font-size:10.5px;color:#8a7f68;line-height:1.6;margin:2px 0 0;text-align:left;}
#rankReg .note b{color:#a8cff0;}
.useNote{font-size:11.5px;color:#9a8f78;line-height:1.7;max-width:400px;margin:6px auto 0;text-align:center;}
.useNote b{color:#8fe07a;}
.useNote a{color:#a8cff0;text-decoration:none;}
.respect{font-size:11px;color:#8a7f68;margin:4px 0 0;letter-spacing:.5px;}
#rankLink,#titleRankLink{background:var(--panel);border:1.5px solid var(--line);color:var(--gold);
  font-size:14px;font-weight:700;padding:11px 18px;border-radius:11px;text-decoration:none;
  display:flex;align-items:center;justify-content:center;}
.btnRow2 a{flex:1;text-align:center;}

/* 設定画面（他のオーバーレイより前面に） */
#settingsScreen{z-index:30;}
.setBlock{width:min(360px,90vw);background:rgba(36,31,24,.7);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;margin:2px 0;text-align:left;}
.setLabel{color:var(--gold);font-weight:900;font-size:14px;margin-bottom:8px;}
.setOpts{display:flex;gap:8px;}
.setOpts button{flex:1;background:#1a1712;border:1.5px solid var(--line);color:var(--dim);
  font-size:13px;font-weight:700;padding:11px 8px;border-radius:9px;cursor:pointer;line-height:1.3;}
.setOpts button.on{background:var(--gold);color:#2a1f05;border-color:var(--gold);}
.setHint{font-size:11px;color:#8a7f68;margin:8px 0 0;line-height:1.6;}

/* 操作の左右反転（スマホ）: ボタン群を左へ */
body.swap #dash{left:18px;right:auto;}
body.swap .itemBtn{left:112px;right:auto;}
body.swap #btnFire{left:112px;right:auto;}
body.swap #btnDodge{left:112px;right:auto;}
body.swap #pauseBtn{left:12px;right:auto;}
body.swap #mapBtn{left:60px;right:auto;}
.screen h1 small{display:block;font-size:13px;color:var(--dim);letter-spacing:1px;
  margin-top:6px;text-shadow:none;}
.screen p{font-size:14px;line-height:1.8;color:var(--text);margin:2px 0;max-width:360px;}
.screen .big{font-size:44px;font-weight:900;color:var(--gold);margin:4px;}
.screen .sub{font-size:13px;color:var(--dim);line-height:1.7;}
button.main{background:linear-gradient(180deg,#e0a92e,#c8880f);border:none;
  color:#2a1f05;font-size:20px;font-weight:900;padding:15px 40px;border-radius:14px;
  cursor:pointer;box-shadow:0 4px 0 #7a5a12;letter-spacing:1px;}
button.main:active{transform:translateY(3px);box-shadow:0 1px 0 #7a5a12;}
.keyhint{font-size:12px;color:var(--dim);margin-top:4px;}
#shareBox{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;font-size:13px;font-family:monospace;white-space:pre-wrap;line-height:1.5;
  max-width:330px;}
#footer{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:10px;
  color:#6a5f4a;z-index:21;}
#footer a{color:#8a7a55;text-decoration:none;}