*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;color:#e9edf2;font-family:"Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.hidden{display:none!important}
#game{position:fixed;inset:0}
#game canvas{display:block}
#vignette{position:fixed;inset:0;pointer-events:none;--v:0;background:radial-gradient(ellipse at center,transparent calc(55% - var(--v)*25%),rgba(0,0,0,calc(.55 + var(--v)*.3)) 100%)}
#vignette.danger{animation:pulse .5s infinite}
@keyframes pulse{0%,100%{box-shadow:inset 0 0 0 0 rgba(170,0,0,0)}20%{box-shadow:inset 0 0 120px 20px rgba(170,0,0,.5)}}
#crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-55%);font-size:22px;color:#fff8;pointer-events:none}
#zoomframe{position:fixed;inset:12% 18%;pointer-events:none}
.corner{position:absolute;width:40px;height:40px;border:3px solid #fff}
.tl{left:0;top:0;border-right:0;border-bottom:0}.tr{right:0;top:0;border-left:0;border-bottom:0}
.bl{left:0;bottom:0;border-right:0;border-top:0}.br{right:0;bottom:0;border-left:0;border-top:0}
#zoomhint{position:absolute;left:0;right:0;bottom:-34px;text-align:center;font-size:14px;color:#f0a640;text-shadow:0 0 4px #000}

#hud{position:fixed;left:0;right:0;top:0;padding:12px 14px;pointer-events:none;background:linear-gradient(#000a,#0000)}
#obj{font-size:14px;color:#f0a640;border-left:3px solid #f0a640;padding-left:8px;text-shadow:0 0 6px #000}
#track{margin-top:8px;display:flex;align-items:center;gap:10px;font-size:13px;text-shadow:0 0 4px #000}
.sus{width:120px;height:7px;background:#222;border:1px solid #555}
.sus i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f0a640,#d8352a)}
#trackState{color:#9fb0c2}
#prompt{position:fixed;left:50%;bottom:22%;transform:translateX(-50%);background:#000c;border:1px solid #f0a640;color:#f0a640;padding:7px 14px;border-radius:3px;font-size:14px;white-space:nowrap}

#card{position:fixed;inset:0;background:#000;z-index:20;display:flex;flex-direction:column}
#cardImg{flex:1;min-height:0;width:100%;object-fit:cover;animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.cardBody{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 22px;background:linear-gradient(transparent,#000e 20%,#000);min-height:34%}
@media (min-aspect-ratio:1/1){#card{align-items:center}#cardImg{position:absolute;inset:0;height:100%;filter:blur(18px) brightness(.4)}#card::after{content:"";position:absolute;inset:0;background:var(--img) center/contain no-repeat}.cardBody{z-index:2;max-width:760px;margin:0 auto}}
.who{display:flex;align-items:center;gap:10px;margin-bottom:6px;min-height:22px;position:relative;z-index:2}
#cardPor{width:64px;height:64px;object-fit:cover;object-position:center 22%;border:1px solid #555;border-radius:4px}
#cardWho{font-weight:700;color:#f0a640}
#cardTxt{font-size:17px;line-height:1.75;white-space:pre-wrap;position:relative;z-index:2}
#cardTxt .inner{color:#b9c3cf;font-style:italic}
#cardNext{text-align:right;color:#8d97a5;font-size:12px;margin-top:8px;animation:blink 1s infinite;position:relative;z-index:2}
@keyframes blink{50%{opacity:.25}}

#touch{position:fixed;inset:0;pointer-events:none}
#stick{position:fixed;left:24px;bottom:28px;width:130px;height:130px;border-radius:50%;background:#ffffff14;border:1px solid #fff3;pointer-events:auto}
#knob{position:absolute;left:40px;top:40px;width:50px;height:50px;border-radius:50%;background:#ffffff44}
#tbtns{position:fixed;right:18px;bottom:28px;display:flex;flex-direction:column;gap:12px;pointer-events:auto}
#tbtns button{width:72px;height:56px;border-radius:12px;background:#000a;border:1px solid #fff5;color:#fff;font-size:15px}
#tbtns button.on{background:#f0a640;color:#000}

#title{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 24px 12vh;background:linear-gradient(#0000 25%,#000d 70%),url(../game/img/s_alley.jpg) center/cover}
.tlogo{font-size:52px;font-weight:900;letter-spacing:10px;text-shadow:0 0 24px #d8352a88,0 3px 0 #000}
.ttag{color:#c9d1db;margin:6px 0 26px;letter-spacing:2px}
.tbtn{width:220px;padding:13px;background:#d8352a;border:0;border-radius:3px;font-size:18px;font-weight:700;letter-spacing:4px;color:#fff;cursor:pointer}
.tkeys{color:#8d97a5;font-size:12px;margin-top:16px;text-align:center;line-height:1.8}
.tcredit{position:absolute;bottom:16px;text-align:center;color:#8d97a5;font-size:12px;line-height:1.7}
.tcredit span{font-size:10px;opacity:.7}
#toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:#000d;border:1px solid #f0a640;color:#f0a640;padding:6px 14px;border-radius:3px;font-size:13px;z-index:25;white-space:nowrap;pointer-events:none}

#btnSet{position:fixed;right:12px;top:10px;z-index:40;width:40px;height:40px;border-radius:50%;background:#000a;border:1px solid #fff4;color:#fff;font-size:20px;cursor:pointer}
#settings{position:fixed;inset:0;z-index:50;background:#000b;display:flex;align-items:center;justify-content:center;padding:20px}
.sbox{background:#0d1117;border:1px solid #2f3742;border-radius:6px;padding:18px 20px;width:min(360px,100%)}
.stitle{font-weight:700;color:#f0a640;margin-bottom:12px;letter-spacing:2px}
.sbox label{display:grid;grid-template-columns:88px 1fr 38px;align-items:center;gap:10px;font-size:14px;margin:10px 0}
.sbox input{width:100%;accent-color:#d8352a}
.sbox span{text-align:right;color:#8d97a5;font-size:12px}
.sbox .tbtn{width:100%;margin-top:12px}

.tbtn.ghost{background:#0009;border:1px solid #fff5;margin-top:10px;font-size:15px;letter-spacing:1px}

#stam{position:fixed;left:50%;bottom:12%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:12px;color:#c9d1db;text-shadow:0 0 4px #000;transition:opacity .4s}
#stam .sbar{width:160px;height:6px;background:#0008;border:1px solid #fff4}
#stam i{display:block;height:100%;width:100%;background:#7fd38a;transition:background .3s}
#stam.tired i{background:#d8352a}
#stam.tired span{color:#ff7a70}

#osm{position:fixed;right:8px;bottom:4px;font-size:10px;color:#ffffff66;pointer-events:none;z-index:5}

#loc{margin-top:6px;font-size:13px;color:#dfe6ee;text-shadow:0 0 4px #000,0 0 2px #000}
#loc b{color:#7fb6ff;font-weight:700}
#mini{position:fixed;right:12px;top:58px;width:150px;height:150px;border-radius:50%;border:2px solid #ffffff55;background:#0a0d12cc;z-index:6;pointer-events:none}

/* 裝備列 */
#gear { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 6; pointer-events: none; }
#gear span { background: rgba(10,12,16,.72); border: 1px solid rgba(255,255,255,.18); color: #e8e2d0; font-size: 13px; padding: 5px 10px; border-radius: 6px; white-space: nowrap; }
/* 章節完成畫面 */
#reward { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: pointer; }
#reward .rwBox { max-width: 420px; width: 100%; color: #eee; text-align: center; animation: rwIn .5s ease-out; }
#reward .rwT { font-size: 26px; font-weight: 800; letter-spacing: 4px; white-space: pre-line; line-height: 1.6; }
#reward .rwS { margin: 18px 0 10px; color: #c9a24a; font-size: 14px; letter-spacing: 3px; }
#reward .rwI { display: flex; gap: 14px; align-items: center; text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(201,162,74,.45); border-radius: 8px; padding: 12px 14px; margin: 8px 0; }
#reward .rwI b { font-size: 30px; }
#reward .rwN { font-weight: 700; font-size: 17px; }
#reward .rwD { font-size: 13px; color: #b8b2a2; margin-top: 3px; }
#reward .rwC { margin-top: 22px; font-size: 13px; color: #888; }
@keyframes rwIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#reward .rwF { font-size: 12px; color: #c9a24a; margin-top: 5px; font-style: italic; }
#speedo{position:fixed;right:18px;bottom:64px;z-index:6;font:700 26px/1 "Segoe UI",sans-serif;color:#e8f4ff;text-shadow:0 0 8px #3a8fd8,0 2px 4px #000;letter-spacing:1px;pointer-events:none}
#pick{position:fixed;left:50%;top:58%;transform:translate(-50%,-50%);z-index:30;width:min(420px,calc(100vw - 32px));background:rgba(8,10,14,.86);border:1px solid #555;border-radius:8px;padding:16px;color:#ddd;text-align:center;cursor:pointer}
#pick .pkT{font-weight:700;letter-spacing:2px;margin-bottom:12px}
#pick .pkBar{position:relative;height:22px;background:#222;border-radius:11px;overflow:hidden}
#pick .pkZone{position:absolute;top:0;bottom:0;background:#2f8f4a}
#pick .pkCur{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;background:#ffd84a;box-shadow:0 0 8px #ffd84a}
#pick .pkH{margin-top:10px;font-size:13px;color:#999}
#choice{position:fixed;left:50%;bottom:8%;transform:translateX(-50%);z-index:35;width:min(560px,calc(100vw - 32px));background:rgba(8,10,14,.9);border:1px solid #555;border-radius:8px;padding:16px;color:#ddd}
#choice .chQ{margin-bottom:12px;color:#c9a24a;font-size:15px}
#choice button{display:block;width:100%;text-align:left;margin:8px 0 0;padding:12px 14px;background:#1b1f27;border:1px solid #3a3f4a;border-radius:6px;color:#eee;font-size:15px;cursor:pointer;font-family:inherit}
#choice button:hover{background:#2a303c;border-color:#c9a24a}
#nvfx{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(60,255,90,.18),rgba(0,40,10,.75) 75%);mix-blend-mode:multiply}
#nvfx::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 4px);mix-blend-mode:normal}
#gear span{pointer-events:auto;cursor:help}

/* 手機按鈕：打鬥時藏起跑／蹲，換成擋／換 */
#tbtns .fonly{display:none}
#touch.fight #tbtns .fonly{display:block}
#touch.fight #tbtns .fonly.hidden{display:none}
#touch.fight #tRun,#touch.fight #tCrouch{display:none}
#touch.fight #tCam{background:#c0392bcc;height:68px;font-weight:700}
#touch.fight #tBlock{background:#1f4e7acc}
#ticons{position:fixed;left:24px;bottom:176px;display:flex;flex-direction:column;gap:10px;pointer-events:auto}
#ticons button{width:48px;height:48px;border-radius:50%;background:#000a;border:1px solid #fff5;color:#fff;font-size:22px;padding:0}
#ticons button.on{background:#3a8f4a}
#ticons button.hidden{display:none}
#tbtns button,#ticons button{touch-action:none;user-select:none;-webkit-user-select:none}
/* 矮螢幕（手機橫放）：標題頁縮小、不重疊 */
@media (max-height:520px){
  #title{justify-content:center;padding:8px 24px 40px;overflow:auto}
  .tlogo{font-size:34px;letter-spacing:6px}
  .ttag{margin:2px 0 10px}
  #title .tbtn{padding:9px;font-size:16px}
  #title .tbtn+.tbtn{margin-top:6px}
  .tkeys{display:none}
  .tcredit{bottom:6px;line-height:1.4}
}
@media (pointer:coarse){#toast{white-space:normal;max-width:86vw;text-align:center}}
/* 對話框／圖卡開著時藏起觸控按鈕 */
#touch.card #stick,#touch.card #tbtns,#touch.card #ticons{display:none}
/* 矮螢幕：右邊按鈕排兩欄，小按鈕橫排在搖桿上方 */
@media (pointer:coarse) and (max-height:520px){
  #stick{left:16px;bottom:14px;width:112px;height:112px}
  #ticons{left:16px;bottom:136px;flex-direction:row;gap:8px}
  #ticons button{width:42px;height:42px;font-size:19px}
  #tbtns{right:12px;bottom:14px;display:grid;grid-template-columns:repeat(2,64px);gap:8px;direction:rtl}
  #tbtns button{width:64px;height:50px;direction:ltr}
  #touch.fight #tCam{height:50px}
}
/* 手機直拿：蓋一層「請轉橫」 */
#rotate{display:none}
@media (pointer:coarse) and (orientation:portrait){
  #rotate{display:flex;position:fixed;inset:0;z-index:200;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#05070a;color:#fff;font-size:20px;font-weight:700;text-align:center}
  #rotate .rotIcon{font-size:56px;animation:rotHint 1.6s ease-in-out infinite}
  #rotate .rotSub{font-size:13px;font-weight:400;color:#8d97a5}
}
@keyframes rotHint{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (pointer:coarse) and (max-height:520px){
  #gear{left:144px;right:156px;transform:none;justify-content:center;flex-wrap:wrap;gap:4px;bottom:8px}
  #gear span{font-size:11px;padding:3px 6px}
}

/* iPhone 加入主畫面提示 */
#iosTip{margin-top:10px;padding:6px 12px;border:1px solid #ffd84a66;border-radius:8px;color:#ffd84a;font-size:12px;text-align:center;max-width:90vw}
/* 瀏海／圓角：按鈕避開安全區 */
@media (pointer:coarse){
  #stick{left:calc(16px + env(safe-area-inset-left))}
  #ticons{left:calc(16px + env(safe-area-inset-left))}
  #tbtns{right:calc(12px + env(safe-area-inset-right))}
  #btnSet{right:calc(12px + env(safe-area-inset-right))}
  #mini{right:calc(12px + env(safe-area-inset-right))}
  #hud{padding-left:calc(14px + env(safe-area-inset-left))}
}

/* 標題畫面：提示點一下開聲音 */
#sndHint{color:#c9d1db;font-size:13px;margin:-14px 0 14px;opacity:.85;animation:sndBlink 1.8s ease-in-out infinite}
@keyframes sndBlink{50%{opacity:.35}}
@media (max-height:520px){#sndHint{margin:-4px 0 8px}}

/* 道具檢視（惡靈古堡式） */
#reward{background:radial-gradient(ellipse at 38% 50%,#1a1712 0%,#060606 62%,#000 100%)}
#reward .ivBox{width:min(980px,96vw);color:#eee;animation:rwIn .45s ease-out}
#reward .ivTop{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #c9a24a55;padding-bottom:8px;margin-bottom:14px}
#reward .ivTag{color:#c9a24a;font-size:14px;letter-spacing:4px;font-weight:700}
#reward .ivCnt{color:#8d8574;font-size:13px;letter-spacing:2px}
#reward .ivMain{display:flex;flex-direction:column;align-items:center;gap:16px}
#reward .ivPic{position:relative;width:min(52vh,78vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
#reward .ivPic img{position:relative;width:100%;height:100%;object-fit:contain;animation:ivTurn 7s ease-in-out infinite alternate;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%);mask-image:radial-gradient(circle,#000 52%,transparent 71%)}
#reward .ivGlow{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,#c9a24a33 0%,#c9a24a10 45%,transparent 70%);animation:ivPulse 2.6s ease-in-out infinite}
#reward .ivEmoji{display:none;font-size:120px;align-items:center;justify-content:center}
#reward .ivTxt{max-width:520px;text-align:center}
#reward .ivGot{color:#c9a24a;font-size:12px;letter-spacing:5px;margin-bottom:6px}
#reward .ivN{font-size:30px;font-weight:900;letter-spacing:3px;text-shadow:0 2px 12px #000}
#reward .ivLine{height:1px;margin:12px auto;width:70%;background:linear-gradient(90deg,transparent,#c9a24a,transparent)}
#reward .ivD{font-size:15px;line-height:1.8;color:#d8d2c2}
#reward .ivF{font-size:13px;color:#c9a24a;margin-top:10px;font-style:italic;line-height:1.7}
#reward .ivC{text-align:center;margin-top:16px;font-size:13px;color:#7a7466;animation:sndBlink 1.8s ease-in-out infinite}
@keyframes ivTurn{0%{transform:scale(1) rotate(-2deg)}100%{transform:scale(1.06) rotate(2deg)}}
@keyframes ivPulse{50%{opacity:.55;transform:scale(1.08)}}
/* 橫的螢幕：圖在左、字在右 */
@media (min-aspect-ratio:4/3){
  #reward .ivMain{flex-direction:row;justify-content:center;gap:40px}
  #reward .ivPic{width:min(62vh,46vw)}
  #reward .ivTxt{text-align:left;flex:1}
  #reward .ivLine{margin:14px 0;background:linear-gradient(90deg,#c9a24a,transparent)}
}
@media (max-height:520px){
  #reward .ivTop{margin-bottom:6px;padding-bottom:4px}
  #reward .ivPic{width:min(70vh,44vw)}
  #reward .ivN{font-size:24px}
  #reward .ivD{font-size:13px;line-height:1.6}
  #reward .ivC{margin-top:6px}
}