*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#070710;font-family:'Exo 2','Microsoft JhengHei','PingFang TC',sans-serif;color:#e0e0e8;touch-action:none;-webkit-user-select:none;user-select:none;font-size:clamp(12px,1.6vw,16px)}
.dark html,.dark body{background:#070710}

/* ============================================================
   GAME WRAPPER — aspect-ratio locked container
   ============================================================
   #game-wrapper is the master container that locks to a target
   aspect ratio (9:16 portrait or 16:9 landscape) and centers
   itself within the viewport. All UI elements live inside it.
   ============================================================ */
#game-wrapper{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
  background:#070710;
  /* Ver 2.0.0 修正：CSS fallback 尺寸，在 JS 未載入或初始化前先以視窗尺寸為基準，
     並利用 aspect-ratio 維持 9/16 比例，避免初始載入時變形或溢出。
     updateLayoutMode() 會以精確計算的尺寸覆蓋這些值。 */
  width:100vw;
  height:100vh;
  max-width:100vw;
  max-height:100vh;
  aspect-ratio:9/16;
  object-fit:contain;
}

/* ===== Portrait mode (9:16) — phones & small tablets =====
   Wrapper dimensions are set explicitly by updateLayoutMode() in JS.
   CSS only controls padding and internal layout. */
#game-wrapper.portrait{
  padding:clamp(4px,1vw,8px) clamp(4px,1vw,8px) 1px;
}

/* ===== Landscape mode (16:9) — large tablets & desktops =====
   Wrapper dimensions are set explicitly by updateLayoutMode() in JS. */
#game-wrapper.landscape{
  padding:clamp(4px,0.8vw,10px) clamp(8px,1.2vw,16px);
}

/* ============================================================
   TOP BAR — HUD + pause/sound buttons
   ============================================================ */
#top-bar{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
  gap:4px;
}
#hud{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:clamp(6px,1.5vw,10px) clamp(8px,2vw,14px);
  font-family:'Russo One',sans-serif;
  flex-shrink:0;
}
.hud-score{display:flex;align-items:center;gap:clamp(4px,1vw,8px);font-size:clamp(18px,5vw,26px)}
.hud-score .label{font-size:clamp(10px,2.5vw,13px);opacity:0.7;font-family:'Exo 2',sans-serif}
.hud-score.player-side{color:#00E5FF}
.hud-score.enemy-side{color:#FF3366}
.hud-timer{font-size:clamp(18px,5vw,24px);color:#FFD700;letter-spacing:2px;text-shadow:0 0 10px rgba(255,215,0,0.4)}

#pause-row{
  width:100%;
  display:none;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  padding:0 0 2px;
  flex-shrink:0;
  gap:6px;
}
.pause-btn{font-family:'Exo 2',sans-serif;font-size:15px;padding:6px 22px;border:1.5px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.65);cursor:pointer;border-radius:6px;letter-spacing:0.5px;transition:all 0.15s;-webkit-tap-highlight-color:transparent;min-height:36px}
.pause-btn:hover,.pause-btn:active{background:rgba(255,255,255,0.14);color:#fff;border-color:rgba(255,255,255,0.45)}
.pause-btn[disabled]{opacity:0.3;pointer-events:none}
.sound-btn{font-family:'Exo 2',sans-serif;font-size:15px;padding:6px 18px;border:1.5px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.65);cursor:pointer;border-radius:6px;letter-spacing:0.5px;transition:all 0.15s;-webkit-tap-highlight-color:transparent;min-height:36px;display:inline-flex;align-items:center;gap:6px}
.sound-btn:hover,.sound-btn:active{background:rgba(255,255,255,0.14);color:#fff;border-color:rgba(255,255,255,0.45)}
.sound-btn.muted{color:#FF3366;border-color:rgba(255,51,102,0.45);background:rgba(255,51,102,0.08)}
.sound-btn.muted:hover,.sound-btn.muted:active{background:rgba(255,51,102,0.18);color:#ff6688;border-color:rgba(255,51,102,0.65)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.blink{animation:pulse 0.5s infinite}

/* ============================================================
   MAIN AREA — contains left-panel, canvas-area, right-panel
   ============================================================ */
#main-area{
  flex:1 1 auto;
  width:100%;
  min-height:0;
  display:flex;
  flex-direction:column; /* Default to portrait (vertical) before JS sets mode */
  align-items:stretch;
  justify-content:center;
  overflow:hidden;
}
/* Default ordering (portrait-like) before JS assigns portrait/landscape class */
#left-panel{order:3;flex:0 0 auto;width:100%;display:flex;flex-direction:column;flex-shrink:0}
#canvas-area{order:1;flex:1 1 auto}
#right-panel{order:2;flex:0 0 auto;width:100%;display:flex;flex-direction:column;flex-shrink:0}

/* ===== Portrait: vertical stack (canvas center, controls below) ===== */
#game-wrapper.portrait #main-area{
  flex-direction:column;
}
#game-wrapper.portrait #left-panel{
  order:3;
  flex:0 0 auto;
}
#game-wrapper.portrait #canvas-area{
  order:1;
  flex:1 1 auto;
}
#game-wrapper.portrait #right-panel{
  order:2;
  flex:0 0 auto;
}

/* ===== Landscape: horizontal layout (controls left, canvas center, info right) ===== */
#game-wrapper.landscape #main-area{
  flex-direction:row;
}
#game-wrapper.landscape #left-panel{
  order:1;
  flex:0 0 auto;
  width:0;
  min-width:0;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
#game-wrapper.landscape #canvas-area{
  order:2;
  flex:1 1 auto;
}
#game-wrapper.landscape #right-panel{
  order:3;
  flex:0 0 auto;
  width:0;
  min-width:0;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
/* Show side panels when they have content:
   - Left panel: visible on touch devices (coarse pointer) when controls are in-game
   - Right panel: visible when game is active (non-menu states) */
@media(pointer:coarse){
  #game-wrapper.landscape #left-panel{
    width:auto;
    min-width:150px;
    padding:0 8px;
  }
}
#game-wrapper.landscape.game-active #right-panel{
  width:auto;
  min-width:140px;
  max-width:200px;
  padding:0 8px;
}

/* ============================================================
   CANVAS AREA
   ============================================================ */
#canvas-area{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  min-width:0;
  overflow:hidden;
}
#canvas-wrapper{position:relative;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;background:#070710}
canvas{display:block;border-radius:6px;border:1px solid #1a1a40;background:#070710}

/* ============================================================
   SCREENS (start, gameover, pause overlays)
   ============================================================ */
.screen{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(7,7,16,0.94);z-index:20;border-radius:6px;padding:20px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
/* 遊戲首頁：標題至版本及協作者資訊全部置中顯示（水平 + 垂直置中）。
   修正（Ver 2.0.0）：#start-screen 若沿用 .screen 的 absolute 定位，會被侷限在
   JS（resizeCanvas）強制設定的正方形 #canvas-wrapper 內，而該正方形在
   #canvas-area 中會被左右面板推偏，導致首頁看起來不置中。
   改用 position:fixed + inset:0：由於 #game-wrapper 具有 transform，
   fixed 的包含區塊即是 #game-wrapper 本身（wrapper 已於視窗正中），
   因此首頁會完整覆蓋整個 wrapper 並以其中心（= 視窗中心）置中，
   不再受 canvas 正方形與左右面板影響。
   justify-content / align-items 皆為 center，確保水平 + 垂直置中；
   overflow-y:auto（繼承自 .screen）確保內容溢出時仍可捲動。*/
#start-screen{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  justify-content:center;
  align-items:center;
  background:#070710;
  z-index:25;
  border-radius:0;
}
#start-screen h1{margin-top:0;flex-shrink:0}
.screen h1{font-family:'Russo One',sans-serif;font-size:clamp(28px,6vw,42px);margin-bottom:16px;color:#FFD700;text-shadow:0 0 20px rgba(255,215,0,0.3);flex-shrink:0;text-align:center}
.screen p{font-size:clamp(13px,3vw,15px);margin-bottom:8px;text-align:center;max-width:380px;line-height:1.6;color:#b0b0c0;flex-shrink:0}
.screen .key-hint{display:inline-block;background:#1a1a40;border:1px solid #3a3a70;border-radius:4px;padding:1px 7px;font-size:12px;font-family:'Russo One',sans-serif;color:#FFD700;margin:0 2px}
.btn{font-family:'Russo One',sans-serif;font-size:16px;padding:12px 36px;border:2px solid #FFD700;background:transparent;color:#FFD700;cursor:pointer;border-radius:6px;margin-top:18px;transition:all 0.2s;letter-spacing:1px}
.btn:hover,.btn:active{background:#FFD700;color:#070710}
.rules-box{background:rgba(20,20,50,0.6);border:1px solid #2a2a60;border-radius:8px;padding:14px 18px;margin:10px 0 4px;max-width:400px;text-align:center;list-style-position:inside;max-height:45%;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;flex-shrink:1}
.rules-box li{margin:4px 0;font-size:clamp(12px,2.8vw,14px);line-height:1.5}
.rules-box::-webkit-scrollbar{width:4px}
.rules-box::-webkit-scrollbar-track{background:rgba(255,255,255,0.05);border-radius:2px}
.rules-box::-webkit-scrollbar-thumb{background:rgba(255,215,0,0.3);border-radius:2px}
.rules-box::-webkit-scrollbar-thumb:hover{background:rgba(255,215,0,0.5)}
.rules-box{scrollbar-width:thin;scrollbar-color:rgba(255,215,0,0.3) rgba(255,255,255,0.05)}

/* ============================================================
   DIFFICULTY SELECTION
   ============================================================ */
.diff-label{font-family:'Russo One',sans-serif;font-size:15px;color:#FFD700;margin:14px 0 4px;letter-spacing:1px;flex-shrink:0;text-align:center}
.diff-btns{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap;justify-content:center;flex-shrink:0}
.diff-btn{padding:10px 16px;font-size:14px;min-width:78px}
.diff-btn.easy{border-color:#4CAF50;color:#4CAF50}
.diff-btn.easy:hover,.diff-btn.easy:active{background:#4CAF50;color:#070710}
.diff-btn.normal{border-color:#FFD700;color:#FFD700}
.diff-btn.normal:hover,.diff-btn.normal:active{background:#FFD700;color:#070710}
.diff-btn.hard{border-color:#FF3366;color:#FF3366}
.diff-btn.hard:hover,.diff-btn.hard:active{background:#FF3366;color:#070710}
.version-credit{text-align:center;color:#aaaaaa;font-size:12px;margin-top:10px;line-height:1.5;flex-shrink:0}

/* ============================================================
   GAME OVER & PAUSE
   ============================================================ */
.gameover-btns{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap;justify-content:center}
.btn-secondary{border-color:#8888aa;color:#8888aa}
.btn-secondary:hover,.btn-secondary:active{background:#8888aa;color:#070710}

.pause-overlay{display:none}
.pause-overlay h1{font-size:clamp(36px,8vw,54px);margin-bottom:20px}
.pause-btns{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:6px}
.pause-btns .btn{min-width:180px;text-align:center}

/* ============================================================
   TOUCH CONTROLS (virtual joystick + action/sprint buttons)
   ============================================================ */
#touch-controls{
  display:none;
  width:100%;
  padding:clamp(4px,1.5vw,10px) clamp(12px,4vw,20px);
  justify-content:space-between;
  align-items:center;
  flex-shrink:0;
  position:relative;
}
.joy-zone{position:relative;width:130px;height:130px;-webkit-tap-highlight-color:transparent}
.joy-base{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 50% 55%,rgba(10,10,35,0.95) 40%,rgba(20,20,60,0.85) 70%,rgba(30,30,80,0.6) 100%);border:2.5px solid rgba(0,229,255,0.3);box-shadow:inset 0 2px 12px rgba(0,0,0,0.6),0 0 18px rgba(0,229,255,0.08)}
.joy-base::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:rgba(0,229,255,0.06);border:1px solid rgba(0,229,255,0.12)}
.joy-knob{position:absolute;top:50%;left:50%;width:52px;height:52px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 42% 38%,rgba(0,229,255,0.45) 0%,rgba(0,160,200,0.3) 35%,rgba(0,80,120,0.5) 70%,rgba(5,20,50,0.8) 100%);border:2px solid rgba(0,229,255,0.55);box-shadow:0 3px 10px rgba(0,0,0,0.5),inset 0 1px 3px rgba(255,255,255,0.12),0 0 14px rgba(0,229,255,0.15);transition:box-shadow 0.15s;pointer-events:none;will-change:transform}
.joy-knob.active{box-shadow:0 2px 6px rgba(0,0,0,0.6),inset 0 1px 2px rgba(255,255,255,0.08),0 0 22px rgba(0,229,255,0.35);border-color:rgba(0,229,255,0.8)}
.joy-dir{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(0,229,255,0.15)}
.joy-dir-n{top:10px;left:50%;transform:translateX(-50%)}
.joy-dir-s{bottom:10px;left:50%;transform:translateX(-50%)}
.joy-dir-w{left:10px;top:50%;transform:translateY(-50%)}
.joy-dir-e{right:10px;top:50%;transform:translateY(-50%)}
.action-btn{width:72px;height:72px;border-radius:50%;border:3px solid rgba(255,215,0,0.6);background:rgba(255,215,0,0.1);cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;position:relative}
.action-btn:active{background:rgba(255,215,0,0.3);border-color:#FFD700}
.action-dot{width:20px;height:20px;border-radius:50%;background:#FFD700;box-shadow:0 0 8px rgba(255,215,0,0.4);pointer-events:none;transition:opacity 0.06s}
@keyframes dot-flash{0%{opacity:1;transform:scale(1)}30%{opacity:0.2;transform:scale(0.7)}100%{opacity:1;transform:scale(1)}}
.action-dot.flash{animation:dot-flash 0.25s ease-out}
.sprint-btn{width:72px;height:72px;border-radius:50%;border:3px solid rgba(76,175,80,0.6);background:rgba(76,175,80,0.1);cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;position:relative}
.sprint-btn:active,.sprint-btn.held{background:rgba(76,175,80,0.35);border-color:#4CAF50}
.sprint-dot{width:20px;height:20px;border-radius:50%;background:#4CAF50;box-shadow:0 0 8px rgba(76,175,80,0.4);pointer-events:none;transition:opacity 0.06s}
.sprint-dot.flash{animation:dot-flash 0.25s ease-out}
.right-btns{display:flex;gap:14px;align-items:center}

/* ===== Touch controls: show on coarse-pointer devices when in-game ===== */
@media(pointer:coarse){#touch-controls.in-game{display:flex}}

/* ============================================================
   STATUS BAR
   ============================================================ */
#status-bar{
  width:100%;
  display:none;
  justify-content:center;
  align-items:center;
  padding:clamp(3px,1vw,6px) 0;
  font-size:clamp(11px,2.8vw,14px);
  min-height:28px;
  flex-shrink:0;
  gap:12px;
  font-family:'Exo 2',sans-serif;
  position:relative;
}
/* Show status bar during active game states */
#game-wrapper.game-active #status-bar{display:flex}
.status-item{display:flex;align-items:center;gap:4px;opacity:0.85}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ============================================================
   STAMINA BAR
   ============================================================ */
#stamina-row{
  width:100%;
  display:none;
  flex-direction:column;
  padding:2px clamp(12px,4vw,20px) 2px;
  flex-shrink:0;
  position:relative;
}
.stamina-wrap{width:100%;height:10px;background:rgba(255,255,255,0.08);border-radius:5px;overflow:hidden;position:relative}
.stamina-fill{height:100%;background:linear-gradient(90deg,#4CAF50,#66BB6A);border-radius:5px;transition:width 0.08s linear;width:100%}
.stamina-fill.exhausted{background:linear-gradient(90deg,#FF3333,#FF6644)}
.stamina-label{font-family:'Exo 2',sans-serif;font-size:11px;color:rgba(255,255,255,0.5);text-align:center;margin-bottom:1px}

/* ============================================================
   THROW POWER GAUGE
   ============================================================ */
#power-row{
  width:100%;
  padding:2px clamp(12px,4vw,20px) 4px;
  flex-shrink:0;
  flex-direction:column;
  visibility:hidden;
  display:none;
  position:relative;
}
#power-row.charging{visibility:visible}
.power-wrap{width:100%;height:12px;background:rgba(255,255,255,0.08);border-radius:6px;overflow:hidden;position:relative;border:1px solid rgba(255,215,0,0.3);box-shadow:0 0 8px rgba(255,215,0,0.15)}
.power-fill{height:100%;background:linear-gradient(90deg,#FFD700,#FF8800,#FF3333);border-radius:6px;width:0%;transition:width 0.05s linear;box-shadow:0 0 10px rgba(255,215,0,0.5)}
.power-label{font-family:'Russo One',sans-serif;font-size:11px;color:#FFD700;text-align:center;margin-bottom:2px;letter-spacing:1.5px;text-shadow:0 0 6px rgba(255,215,0,0.4)}

/* ============================================================
   PORTRAIT MODE LAYOUT (9:16) — phones & small tablets
   Elements stack vertically: top-bar → canvas → status/bars → controls
   ============================================================ */
#game-wrapper.portrait #left-panel{
  width:100%;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
}
#game-wrapper.portrait #right-panel{
  width:100%;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
}
#game-wrapper.portrait #touch-controls{
  padding:clamp(4px,1.5vw,10px) clamp(12px,4vw,20px);
}

/* ============================================================
   LANDSCAPE MODE LAYOUT (16:9) — large tablets & desktops
   Elements arrange horizontally: controls(left) → canvas(center) → info(right)
   Side panel widths are controlled by the conditional rules above
   (left-panel visible on touch devices, right-panel visible when game-active).
   ============================================================ */
#game-wrapper.landscape #touch-controls{
  flex-direction:column;
  gap:16px;
  padding:10px 8px;
  height:100%;
  justify-content:center;
}
#game-wrapper.landscape .right-btns{
  flex-direction:column;
  gap:16px;
}
#game-wrapper.landscape #status-bar{
  padding:4px 0;
}
#game-wrapper.landscape #stamina-row{
  padding:2px 0;
}
#game-wrapper.landscape #power-row{
  padding:2px 0 4px;
}

/* ============================================================
   RESPONSIVE TWEAKS — Portrait mode breakpoints
   ============================================================ */

/* 平板直向 / 小型熒幕 (<=768px) */
@media(max-width:768px){
  #hud{padding:clamp(4px,1.2vw,8px) clamp(6px,1.5vw,10px)}
  .hud-score{font-size:clamp(16px,4.5vw,22px)}
  .hud-timer{font-size:clamp(16px,4.5vw,20px)}
  .screen h1{font-size:clamp(24px,5vw,36px)}
  .screen p{font-size:clamp(11px,2.5vw,14px)}
  .rules-box li{font-size:clamp(11px,2.5vw,13px)}
  .btn{font-size:14px;padding:10px 28px}
  .diff-btn{padding:8px 14px;font-size:13px;min-width:68px}
  .pause-btn,.sound-btn{font-size:13px;padding:5px 16px;min-height:32px}
  #pause-row{gap:5px}
  #status-bar{font-size:clamp(10px,2.5vw,13px);min-height:24px}
  .joy-zone{width:120px;height:120px}
  .joy-base{width:110px;height:110px}
  .joy-knob{width:48px;height:48px}
  .action-btn,.sprint-btn{width:66px;height:66px}
  #touch-controls{padding:clamp(3px,1vw,6px) clamp(10px,3vw,16px)}
  .right-btns{gap:12px}
}

/* 行動電話直向 (<=480px) */
@media(max-width:480px){
  #hud{padding:3px 6px}
  .hud-score{font-size:clamp(14px,5vw,20px)}
  .hud-score .label{font-size:clamp(9px,2.2vw,11px)}
  .hud-timer{font-size:clamp(14px,4.5vw,18px)}
  .screen{padding:12px}
  .screen h1{font-size:clamp(22px,5.5vw,32px);margin-bottom:10px}
  .screen p{font-size:clamp(10px,2.5vw,13px);margin-bottom:4px;max-width:300px}
  .rules-box{padding:10px 12px;max-width:320px}
  .rules-box li{margin:2px 0;font-size:clamp(10px,2.5vw,12px)}
  .btn{font-size:13px;padding:10px 24px;margin-top:12px}
  .diff-btn{padding:7px 10px;font-size:12px;min-width:62px}
  .diff-btns{gap:6px}
  .pause-btn,.sound-btn{font-size:12px;padding:5px 14px;min-height:30px}
  #pause-row{gap:4px}
  #status-bar{font-size:clamp(9px,2.5vw,12px);min-height:22px}
  #stamina-row{padding:1px clamp(8px,3vw,12px) 1px}
  #power-row{padding:1px clamp(8px,3vw,12px) 2px}
  .stamina-wrap{height:8px}
  .power-wrap{height:10px}
  .joy-zone{width:105px;height:105px}
  .joy-base{width:96px;height:96px}
  .joy-knob{width:42px;height:42px}
  .action-btn,.sprint-btn{width:58px;height:58px}
  .action-dot,.sprint-dot{width:16px;height:16px}
  #touch-controls{padding:clamp(2px,0.8vw,5px) clamp(8px,3vw,14px)}
  .right-btns{gap:10px}
}

/* 小型行動電話 (<=380px) */
@media(max-width:380px){
  .hud-score{font-size:clamp(12px,4.5vw,16px)}
  .hud-timer{font-size:clamp(12px,4vw,16px)}
  .screen h1{font-size:clamp(20px,5vw,28px)}
  .screen p{font-size:clamp(10px,2.5vw,12px)}
  .btn{font-size:12px;padding:8px 18px}
  .diff-btn{padding:6px 8px;font-size:11px;min-width:54px}
  .diff-btns{gap:4px}
  .pause-btn,.sound-btn{font-size:11px;padding:4px 10px;min-height:28px}
  .joy-zone{width:92px;height:92px}
  .joy-base{width:84px;height:84px}
  .joy-knob{width:36px;height:36px}
  .action-btn,.sprint-btn{width:50px;height:50px}
  .action-dot,.sprint-dot{width:14px;height:14px}
  #touch-controls{padding:2px clamp(6px,2vw,10px)}
  .right-btns{gap:8px}
}

/* ============================================================
   RESPONSIVE TWEAKS — Landscape mode / short height
   ============================================================ */

/* 行動電話橫向 / 超矮熒幕 (高度 <=500px) */
@media(max-height:500px){
  #game-wrapper{padding:clamp(1px,0.5vw,3px) clamp(2px,0.5vw,4px) 0}
  #hud{padding:clamp(2px,0.8vw,4px) clamp(4px,1vw,6px)}
  .hud-score{font-size:clamp(12px,3.5vw,18px)}
  .hud-timer{font-size:clamp(12px,3.5vw,16px)}
  .screen{padding:8px}
  .screen h1{font-size:clamp(18px,4vw,26px);margin-bottom:6px}
  .screen p{font-size:clamp(9px,2vw,12px);margin-bottom:2px}
  .rules-box{padding:6px 10px;margin:4px 0 2px;max-width:300px;max-height:35%}
  .rules-box li{margin:1px 0;font-size:clamp(9px,2vw,11px)}
  .btn{font-size:11px;padding:6px 16px;margin-top:6px}
  .diff-btn{padding:6px 8px;font-size:11px;min-width:52px}
  .diff-btns{gap:4px;margin-top:3px}
  .pause-btn,.sound-btn{font-size:11px;padding:3px 10px;min-height:26px}
  #pause-row{gap:3px}
  #status-bar{font-size:clamp(8px,2vw,11px);min-height:18px}
  #stamina-row{padding:1px clamp(6px,2vw,10px) 0}
  #power-row{padding:0 clamp(6px,2vw,10px) 2px}
  .stamina-wrap{height:6px;border-radius:3px}
  .power-wrap{height:8px;border-radius:4px}
  .joy-zone{width:80px;height:80px}
  .joy-base{width:72px;height:72px}
  .joy-knob{width:32px;height:32px}
  .action-btn,.sprint-btn{width:46px;height:46px}
  .action-dot,.sprint-dot{width:12px;height:12px}
  #touch-controls{padding:1px clamp(4px,1.5vw,8px)}
  .right-btns{gap:6px}
  /* Landscape-specific: smaller side panels */
  #game-wrapper.landscape #left-panel{min-width:110px}
  #game-wrapper.landscape #right-panel{min-width:100px;max-width:150px}
}

/* 超矮熒幕 (高度 <=360px)：極簡模式 */
@media(max-height:360px){
  #hud{padding:1px 4px}
  .hud-score{font-size:clamp(10px,3vw,14px)}
  .hud-timer{font-size:clamp(10px,3vw,14px)}
  .screen h1{font-size:clamp(16px,3.5vw,22px);margin-bottom:4px}
  .screen p{font-size:clamp(8px,1.8vw,10px)}
  .btn{padding:4px 12px;font-size:10px;margin-top:4px}
  .diff-btn{padding:4px 6px;font-size:10px;min-width:46px}
  .pause-btn,.sound-btn{padding:2px 8px;font-size:10px;min-height:24px}
  .joy-zone{width:64px;height:64px}
  .joy-base{width:56px;height:56px}
  .joy-knob{width:26px;height:26px}
  .action-btn,.sprint-btn{width:38px;height:38px;border-width:2px}
  .action-dot,.sprint-dot{width:10px;height:10px}
  .right-btns{gap:4px}
  #touch-controls{padding:0 clamp(2px,1vw,6px)}
  #status-bar{min-height:14px;font-size:clamp(7px,1.8vw,10px)}
  /* Landscape-specific: minimal side panels */
  #game-wrapper.landscape #left-panel{min-width:80px}
  #game-wrapper.landscape #right-panel{min-width:80px;max-width:120px}
}
/* Show touch controls on touch devices in portrait when game is active */
@media(pointer:coarse){
  #game-wrapper.portrait.game-active #touch-controls{display:flex}
  #game-wrapper.portrait #touch-controls.in-game{display:flex}
}

/* ============================================================
   SETTINGS PAGE
   ============================================================ */
/* 修正（Ver 2.0.0）：.page 改為全螢幕不透明覆蓋層（移除容器本身的
   max-width，避免兩側露出底下的遊戲畫面造成不對稱的視覺偏移），
   內容寬度改由子元素（.intro / .sound-setting）的 max-width 限制，
   並以 align-items:center 水平置中所有子元素。 */
.page{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100vh;
  max-height:100vh;
  background:#070710;
  border:none;
  border-radius:0;
  padding:clamp(16px,4vw,28px);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  z-index:30;
  box-shadow:none;
  display:none;
  flex-direction:column;
  align-items:center;
  box-sizing:border-box;
}
/* 垂直置中（安全式）：內容總高度小於視窗時，首尾子元素的 auto margin
   會平分剩餘空間達成垂直置中；內容超出視窗時 auto margin 歸零，
   仍可從頂部正常捲動，避免 justify-content:center 造成頂部內容被裁切。 */
.settings-page > :first-child{margin-top:auto}
.settings-page > :last-child{margin-bottom:auto}
.settings-page h1{
  font-family:'Russo One',sans-serif;
  font-size:clamp(24px,5vw,36px);
  color:#FFD700;
  text-align:center;
  margin-bottom:18px;
  text-shadow:0 0 18px rgba(255,215,0,0.3);
  flex-shrink:0;
  align-self:center;
}
.settings-page h2{
  font-family:'Russo One',sans-serif;
  font-size:clamp(16px,3.5vw,20px);
  color:#00E5FF;
  margin:14px 0 8px;
  text-shadow:0 0 10px rgba(0,229,255,0.25);
  flex-shrink:0;
}
.settings-page p{
  font-size:clamp(12px,2.8vw,14px);
  line-height:1.6;
  color:#b0b0c0;
  margin-bottom:8px;
  flex-shrink:0;
}

/* ===== Intro section (migrated from homepage) ===== */
.intro{
  width:100%;
  max-width:600px;
  margin-bottom:16px;
  flex-shrink:0;
}
.intro .rules-box{
  background:rgba(20,20,50,0.6);
  border:1px solid #2a2a60;
  border-radius:8px;
  padding:14px 18px;
  margin:8px 0 4px;
  text-align:left;
  list-style-position:inside;
  max-height:none;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  flex-shrink:0;
}
.intro .rules-box li{
  margin:4px 0;
  font-size:clamp(12px,2.8vw,14px);
  line-height:1.5;
}

/* ===== Language setting ===== */
.lang-setting{
  width:100%;
  max-width:600px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  margin:16px 0;
  flex-shrink:0;
}
.lang-setting h2{
  margin:0;
  flex:1;
  font-size:clamp(15px,3vw,18px);
}
.lang-btns{
  display:flex;
  gap:10px;
  flex-shrink:0;
}
.lang-btn{
  font-family:'Exo 2',sans-serif;
  font-size:clamp(13px,2.8vw,15px);
  font-weight:600;
  padding:10px 20px;
  border:2px solid rgba(255,215,0,0.4);
  border-radius:8px;
  background:rgba(255,215,0,0.08);
  color:rgba(255,215,0,0.7);
  cursor:pointer;
  transition:all 0.25s ease;
  flex-shrink:0;
  min-width:100px;
  text-align:center;
}
.lang-btn:hover{
  background:rgba(255,215,0,0.15);
  border-color:rgba(255,215,0,0.6);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(255,215,0,0.2);
}
.lang-btn.active{
  background:rgba(255,215,0,0.25);
  border-color:#FFD700;
  color:#FFD700;
  box-shadow:0 0 12px rgba(255,215,0,0.3);
}
.lang-btn.active:hover{
  background:rgba(255,215,0,0.3);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(255,215,0,0.4);
}

/* ===== Sound toggle setting ===== */
.sound-setting{
  width:100%;
  max-width:600px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  margin:16px 0;
  flex-shrink:0;
}
.sound-setting h2{
  margin:0;
  flex:1;
  font-size:clamp(15px,3vw,18px);
}

/* ===== Sound toggle button ===== */
.sound-toggle-btn{
  font-family:'Exo 2',sans-serif;
  font-size:clamp(13px,3vw,15px);
  font-weight:600;
  padding:10px 20px;
  border:2px solid rgba(76,175,80,0.6);
  border-radius:8px;
  background:rgba(76,175,80,0.15);
  color:#4CAF50;
  cursor:pointer;
  transition:all 0.25s ease;
  flex-shrink:0;
  min-width:140px;
  text-align:center;
}
.sound-toggle-btn:hover{
  background:rgba(76,175,80,0.25);
  border-color:rgba(76,175,80,0.8);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(76,175,80,0.3);
}
.sound-toggle-btn.muted{
  background:rgba(255,51,102,0.15);
  border-color:rgba(255,51,102,0.6);
  color:#FF3366;
}
.sound-toggle-btn.muted:hover{
  background:rgba(255,51,102,0.25);
  border-color:rgba(255,51,102,0.8);
  box-shadow:0 2px 8px rgba(255,51,102,0.3);
}

/* ===== Back button ===== */
.button-group{
  display:flex;
  justify-content:center;
  margin-top:18px;
  flex-shrink:0;
  align-self:center;
}
.btn-back{
  border-color:#8888aa;
  color:#8888aa;
  min-width:160px;
}
.btn-back:hover,.btn-back:active{
  background:#8888aa;
  color:#070710;
}

/* ============================================================
   加密成績記錄系統 (Encrypted Score Record)
   ============================================================ */

/* 成績明文資訊區塊 */
#score-info{
  margin-top:14px;
  padding:12px 20px;
  background:rgba(20,20,50,0.5);
  border:1px solid #2a2a60;
  border-radius:8px;
  max-width:360px;
  width:100%;
  flex-shrink:0;
  text-align:left;
  font-family:'Exo 2','Microsoft JhengHei',sans-serif;
}
.score-info-line{
  font-size:14px;
  line-height:1.8;
  color:#e0e0e8;
}
.score-info-label{
  color:#8888aa;
  font-weight:600;
}
.score-info-value{
  color:#FFD700;
}

/* QR 碼圖片 */
#qr-code{
  width:160px;
  height:160px;
  margin-top:14px;
  border-radius:6px;
  border:2px solid rgba(255,215,0,0.2);
  flex-shrink:0;
  background:#fff;
  object-fit:contain;
}

/* Base64 密文區塊 */
#encrypted-text{
  font-size:18px;
  color:#CCCCCC;
  word-wrap:break-word;
  word-break:break-all;
  white-space:pre-wrap;
  max-width:380px;
  width:100%;
  margin-top:14px;
  padding:10px 14px;
  background:rgba(10,10,30,0.6);
  border:1px solid #1a1a40;
  border-radius:6px;
  font-family:'Consolas','Courier New',monospace;
  line-height:1.5;
  user-select:text;
  -webkit-user-select:text;
  flex-shrink:0;
  overflow-wrap:break-word;
}

/* 響應式設計：小螢幕調整 */
@media(max-width:480px){
  #score-info{
    padding:10px 14px;
    max-width:100%;
  }
  .score-info-line{
    font-size:13px;
  }
  #qr-code{
    width:130px;
    height:130px;
  }
  #encrypted-text{
    font-size:16px;
    max-width:100%;
    padding:8px 10px;
  }
}

/* ============================================================
   管理員記錄系統 (Admin Record System)
   ============================================================ */

/* 管理員設定區塊 */
.admin-setting{
  width:100%;
  max-width:600px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  margin:16px 0;
  flex-shrink:0;
}
.admin-setting h2{
  margin:0 0 10px 0;
  font-size:clamp(15px,3vw,18px);
  font-family:'Russo One',sans-serif;
  color:#00E5FF;
  text-shadow:0 0 10px rgba(0,229,255,0.25);
}

/* 管理員入口按鈕 */
.admin-access-btn{
  font-family:'Exo 2',sans-serif;
  font-size:clamp(13px,3vw,15px);
  font-weight:600;
  padding:10px 24px;
  border:2px solid rgba(0,229,255,0.4);
  border-radius:8px;
  background:rgba(0,229,255,0.08);
  color:rgba(0,229,255,0.8);
  cursor:pointer;
  transition:all 0.25s ease;
  min-width:160px;
  text-align:center;
}
.admin-access-btn:hover{
  background:rgba(0,229,255,0.15);
  border-color:rgba(0,229,255,0.7);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,229,255,0.2);
}

/* 管理員面板 */
.admin-panel{
  width:100%;
  max-width:560px;
  margin-top:12px;
  background:rgba(20,20,50,0.6);
  border:1px solid #2a2a60;
  border-radius:8px;
  padding:16px;
  box-sizing:border-box;
}

/* 密碼輸入區 */
.admin-password-row{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-password-row label{
  font-size:clamp(12px,2.8vw,14px);
  color:#b0b0c0;
}
.admin-password-input{
  width:100%;
  padding:10px 14px;
  border:2px solid rgba(255,215,0,0.3);
  border-radius:6px;
  background:rgba(7,7,16,0.8);
  color:#e0e0e8;
  font-size:clamp(13px,3vw,15px);
  font-family:'Consolas','Courier New',monospace;
  box-sizing:border-box;
  outline:none;
  transition:border-color 0.25s ease;
}
.admin-password-input:focus{
  border-color:rgba(255,215,0,0.6);
}

/* 按鈕列 */
.admin-btn-row{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.admin-verify-btn{
  font-family:'Exo 2',sans-serif;
  font-size:clamp(12px,2.8vw,14px);
  font-weight:600;
  padding:8px 20px;
  border:2px solid rgba(76,175,80,0.6);
  border-radius:6px;
  background:rgba(76,175,80,0.15);
  color:#4CAF50;
  cursor:pointer;
  transition:all 0.25s ease;
}
.admin-verify-btn:hover{
  background:rgba(76,175,80,0.25);
  border-color:rgba(76,175,80,0.8);
}
.admin-cancel-btn{
  font-family:'Exo 2',sans-serif;
  font-size:clamp(12px,2.8vw,14px);
  font-weight:600;
  padding:8px 20px;
  border:2px solid rgba(136,136,170,0.5);
  border-radius:6px;
  background:rgba(136,136,170,0.1);
  color:#8888aa;
  cursor:pointer;
  transition:all 0.25s ease;
}
.admin-cancel-btn:hover{
  background:rgba(136,136,170,0.2);
  border-color:rgba(136,136,170,0.7);
}

/* 錯誤提示 */
.admin-error{
  color:#FF3366;
  font-size:clamp(12px,2.8vw,14px);
  padding:6px 0;
  text-align:center;
}

/* 記錄列表 */
.admin-records{
  margin-top:14px;
  max-height:400px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* 記錄列表標頭 */
.admin-records-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0 12px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  margin-bottom:10px;
  font-size:clamp(12px,2.8vw,14px);
  color:#b0b0c0;
}
.admin-clear-btn{
  font-family:'Exo 2',sans-serif;
  font-size:clamp(11px,2.5vw,13px);
  font-weight:600;
  padding:6px 14px;
  border:2px solid rgba(255,51,102,0.5);
  border-radius:6px;
  background:rgba(255,51,102,0.1);
  color:#FF3366;
  cursor:pointer;
  transition:all 0.25s ease;
}
.admin-clear-btn:hover{
  background:rgba(255,51,102,0.2);
  border-color:rgba(255,51,102,0.7);
}

/* 無記錄提示 */
.admin-no-records{
  text-align:center;
  padding:24px 0;
  color:#8888aa;
  font-size:clamp(13px,3vw,15px);
}

/* 單筆記錄卡片 */
.admin-record-card{
  background:rgba(10,10,30,0.6);
  border:1px solid #1a1a40;
  border-radius:6px;
  padding:12px 14px;
  margin-bottom:10px;
}
.admin-record-time{
  font-size:clamp(11px,2.5vw,13px);
  color:#FFD700;
  margin-bottom:8px;
  font-family:'Consolas','Courier New',monospace;
}
.admin-record-field{
  font-size:clamp(11px,2.5vw,13px);
  line-height:1.6;
  margin:4px 0;
  word-wrap:break-word;
  word-break:break-all;
}
.admin-field-label{
  color:#00E5FF;
  font-weight:600;
  flex-shrink:0;
}
.admin-field-value{
  color:#e0e0e8;
  font-family:'Consolas','Courier New',monospace;
}
.admin-password-value{
  color:#4CAF50;
  font-weight:600;
}
.admin-cipher-value{
  color:#CCCCCC;
  font-size:clamp(10px,2.2vw,12px);
}

/* 響應式設計：小螢幕調整管理員面板 */
@media(max-width:480px){
  .admin-panel{
    padding:12px;
  }
  .admin-records{
    max-height:300px;
  }
  .admin-record-card{
    padding:10px 12px;
  }
}

/* ============================================================
   上傳狀態橫幅 (Upload Status Banner)
   ============================================================ */
.upload-status-banner{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  margin-top:10px;
  border-radius:8px;
  font-size:14px;
  text-align:center;
  justify-content:center;
  flex-shrink:0;
}
.upload-status-icon{font-size:18px}
.upload-status-text{font-size:14px}

.banner-uploading{
  background:rgba(255,193,7,0.15);
  border:1px solid rgba(255,193,7,0.4);
  color:#FFC107;
}
.banner-online{
  background:rgba(76,175,80,0.15);
  border:1px solid rgba(76,175,80,0.4);
  color:#4CAF50;
}
.banner-offline{
  background:rgba(255,87,34,0.15);
  border:1px solid rgba(255,87,34,0.4);
  color:#FF5722;
}

/* ============================================================
   Toast 提示 (Toast Notification)
   ============================================================ */
.toast-container{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  pointer-events:none;
}
.toast{
  padding:12px 24px;
  border-radius:8px;
  font-size:14px;
  color:#fff;
  opacity:0;
  transform:translateY(-20px);
  transition:opacity 0.3s ease, transform 0.3s ease;
  margin-bottom:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  max-width:90vw;
  text-align:center;
}
.toast-show{
  opacity:1;
  transform:translateY(0);
}
.toast-success{
  background:rgba(76,175,80,0.9);
}
.toast-error{
  background:rgba(244,67,54,0.9);
}
.toast-info{
  background:rgba(33,150,243,0.9);
}