/* =====================================================================
   MATHCRAFT - Minecraft Math Game  (v2 - Touch/Tablet/Tug-of-War)
   ===================================================================== */

:root {
  --mc-green:      #5c8a00;
  --mc-green-l:    #7ab800;
  --mc-green-d:    #3d5c00;
  --mc-gold:       #ffd700;
  --mc-diamond:    #00d8d8;
  --mc-sky-top:    #1a3a6e;
  --mc-red:        #c41a1a;
  --p1-color:      #e04040;   /* 玩家1 紅色 */
  --p1-dark:       #8b0000;
  --p1-light:      #ff8888;
  --p2-color:      #3a8be0;   /* 玩家2 藍色 */
  --p2-dark:       #00008b;
  --p2-light:      #88bbff;

  /* Touch-friendly sizing */
  --btn-h:         56px;
  --btn-h-lg:      72px;
  --font-ui:       'Press Start 2P', monospace;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font-ui);
  background: var(--mc-sky-top);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
  touch-action: manipulation;   /* prevent double-tap zoom on buttons */
  -webkit-text-size-adjust: 100%;
}

/* Sky gradient */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: linear-gradient(180deg, #1a3a6e 0%, #2855a0 40%, #5b8dd9 70%, #7abaff 100%);
  z-index: -1;
}

/* Stars */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle, #fff 1px, transparent 1px),
    radial-gradient(circle, #ffffffaa 1px, transparent 1px);
  background-size: 200px 200px, 300px 300px;
  background-position: 0 0, 100px 140px;
  z-index: 0;
  pointer-events: none;
}

/* ===== LAYOUT ===== */
.game-container {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
}

/* ===== SCREENS ===== */
.screen { display: none; width: 100%; max-width: 960px; padding: 12px; animation: fadeIn .3s ease; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

/* ===== GRASS BAR ===== */
.mc-grass {
  height: 24px;
  background: repeating-linear-gradient(90deg, #5c8a00 0,#5c8a00 16px,#4a7200 16px,#4a7200 32px);
  border-top: 4px solid #7ab800; border-bottom: 4px solid #3d5c00;
  width: 100%; margin: 10px 0;
}

/* ===== TITLE ===== */
.title-logo { text-align: center; padding: 28px 16px 14px; }
.title-main {
  font-size: clamp(16px, 4.5vw, 40px);
  color: #ffd700;
  text-shadow: 4px 4px #7a5c00, 6px 6px #000;
  display: block; margin-bottom: 12px;
  animation: titleFloat 3s ease-in-out infinite;
}
@keyframes titleFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.title-sub {
  font-size: clamp(8px, 2vw, 14px);
  color: #00d8d8; text-shadow: 2px 2px #005a5a, 3px 3px #000; display: block;
}

/* ===== PANEL ===== */
.mc-panel {
  background: #3d3d3ddd;
  border: 4px solid; border-color: #7a7a7a #1a1a1a #1a1a1a #7a7a7a;
  padding: 20px; position: relative; backdrop-filter: blur(4px);
  max-width: 880px; margin: 0 auto 16px;
}
.mc-panel::before {
  content:''; position:absolute; inset:4px; border:2px solid #2a2a2a; pointer-events:none;
}

/* ===== SECTION TITLE ===== */
.sec-title {
  font-size: clamp(8px, 1.8vw, 12px);
  color: #ffd700; text-shadow: 2px 2px #000;
  margin: 18px 0 12px; display: flex; align-items: center; gap: 6px;
}
.sec-title:first-child { margin-top: 0; }
.sec-title::before,.sec-title::after { content:'▪'; font-size:8px; color:#7ab800; }

/* ===== OP GRID v2 (A位數 OP B位數) ===== */
.op-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}
@media(max-width: 600px){ .op-grid2 { grid-template-columns: 1fr; } }

/* 每張運算卡 */
.op-card2 {
  background: #222;
  border: 3px solid #444;
  padding: 12px;
  transition: border-color .2s, opacity .2s;
  opacity: .55;           /* OFF 狀態：暗淡 */
  border-radius: 2px;
}
.op-card2.op-card-on {
  opacity: 1;             /* ON 狀態：全亮 */
  border-color: #666;
}

/* 卡片頂部 header：符號 + 名稱 + ON/OFF 開關 */
.op-card2-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.op-name2 {
  flex: 1;
  font-size: clamp(10px, 2vw, 14px);
  color: #fff;
  text-shadow: 2px 2px #000;
}

/* ON/OFF 切換鈕 */
.op-toggle {
  font-family: var(--font-ui);
  font-size: clamp(8px, 1.6vw, 11px);
  padding: 6px 12px;
  border: 3px solid #555;
  background: #333;
  color: #888;
  cursor: pointer;
  min-height: 36px;
  min-width: 52px;
  text-shadow: 1px 1px #000;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.op-toggle.on {
  background: #1a4a00;
  border-color: #5c8a00 #1a3a00 #1a3a00 #5c8a00;
  color: #aaff44;
  text-shadow: 0 0 8px #7ab800;
}
.op-toggle:hover { filter: brightness(1.3); }
.op-toggle:active { transform: translateY(1px); }

/* 運算符號圖示 */
.op-symbol {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #4a4a4a;
  font-size: 20px; font-family: monospace; font-weight: bold; flex-shrink: 0;
}
.op-add { background:#1a2e00; color:#7ab800; border-color:#4a7c00; }
.op-sub { background:#2e0000; color:#ff6666; border-color:#8b0000; }
.op-mul { background:#1a1a2e; color:#6688ff; border-color:#3333cc; }
.op-div { background:#2e1a00; color:#ffaa00; border-color:#cc6600; }

/* 位數選擇列：左群 + 運算符 + 右群 */
.op-digit-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.op-digit-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.op-digit-label {
  font-size: clamp(6px, 1.3vw, 8px);
  color: #888;
  text-align: center;
  letter-spacing: 1px;
}
.op-digit-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

/* 中間大符號 */
.op-mid-sym {
  font-size: clamp(16px, 3vw, 24px);
  font-family: monospace;
  font-weight: bold;
  flex-shrink: 0;
  text-align: center;
  width: 28px;
}

/* 位數按鈕 */
.dg-btn {
  padding: 7px 2px;
  background: #1a1a1a;
  border: 2px solid #3a3a3a;
  color: #666;
  font-family: var(--font-ui);
  font-size: clamp(6px, 1.4vw, 9px);
  cursor: pointer;
  text-align: center;
  min-height: 34px;
  transition: all .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dg-btn:hover { border-color: #8a8a8a; color: #fff; }
.dg-btn:active { transform: scale(.93); }
.dg-btn.active {
  background: #003a5a;
  border-color: #00aaff;
  color: #00ccff;
  text-shadow: 0 0 6px #00aaff;
}

/* ===== SETTING ROW ===== */
.setting-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.setting-label { font-size:clamp(7px,1.5vw,10px); color:#ccc; text-shadow:1px 1px #000; white-space:nowrap; }
.setting-btn {
  padding: 10px 14px; background:#5a5a5a; border:3px solid; border-color:#9a9a9a #2a2a2a #2a2a2a #9a9a9a;
  color:#fff; font-family:var(--font-ui); font-size:clamp(7px,1.5vw,9px); cursor:pointer;
  transition:filter .1s; min-height:42px; -webkit-tap-highlight-color:transparent;
}
.setting-btn:hover { filter:brightness(1.3); }
.setting-btn.selected { background:#5a3a00; border-color:#ffd700 #3a2000 #3a2000 #ffd700; color:#ffd700; }

/* ===== START / BIG BUTTONS ===== */
.start-btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:clamp(11px,2.5vw,15px); padding:18px 40px;
  cursor:pointer; color:#fff; background:#4a7c00;
  border:5px solid; border-color:#7ab800 #1a3a00 #1a3a00 #7ab800;
  text-shadow:3px 3px #000; transition:filter .1s,transform .1s;
  outline:none; min-height:var(--btn-h-lg); -webkit-tap-highlight-color:transparent;
}
.start-btn:hover { filter:brightness(1.3); transform:translateY(-2px); box-shadow:0 6px 0 #1a3a00; }
.start-btn:active { border-color:#1a3a00 #7ab800 #7ab800 #1a3a00; transform:translateY(2px); box-shadow:none; }

.mc-btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:clamp(9px,1.8vw,11px); padding:14px 18px;
  cursor:pointer; color:#fff; border:4px solid; text-shadow:2px 2px #000;
  transition:filter .1s; outline:none; min-height:var(--btn-h); -webkit-tap-highlight-color:transparent;
}
.mc-btn:hover { filter:brightness(1.3); }
.mc-btn:active { transform:translateY(2px); }
.mc-btn-stone { background:#5a5a5a; border-color:#9a9a9a #2a2a2a #2a2a2a #9a9a9a; }
.mc-btn-red   { background:#8b0000; border-color:#cc2222 #3a0000 #3a0000 #cc2222; }
.mc-btn-blue  { background:#003a8b; border-color:#1a6ac4 #000f3a #000f3a #1a6ac4; }
.mc-btn-small {
  padding:8px 14px; background:#3a3a3a; border:3px solid; border-color:#6a6a6a #1a1a1a #1a1a1a #6a6a6a;
  color:#aaa; font-family:var(--font-ui); font-size:clamp(7px,1.5vw,9px); cursor:pointer;
  min-height:38px; -webkit-tap-highlight-color:transparent;
}
.mc-btn-small:hover { filter:brightness(1.3); }

.hint-text { font-size:clamp(7px,1.5vw,9px); color:#88aacc; text-align:center; padding:10px; text-shadow:1px 1px #000; }
.complete-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:10px 0; }

/* ===================================================================
   SINGLE PLAYER - GAME SCREEN
   =================================================================== */
.hud-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; background:#111111ee; border-bottom:4px solid #2a2a2a;
  flex-wrap:wrap; gap:8px; position:sticky; top:0; z-index:50;
}
.hud-item { display:flex; align-items:center; gap:6px; }
.hud-progress { flex:1; min-width:140px; }
.hud-label { font-size:clamp(9px,1.8vw,11px); color:#888; }
.hud-value { font-size:clamp(9px,1.8vw,11px); color:#ffd700; text-shadow:2px 2px #000; }
.health-bar { display:flex; gap:4px; }
.heart { font-size:clamp(16px,3vw,22px); transition:all .3s; filter:drop-shadow(0 0 4px #f00); }
.heart.lost { filter:grayscale(1); opacity:.35; }
.level-bar-container { background:#1a1a1a; border:3px solid #3a3a3a; height:14px; flex:1; overflow:hidden; }
.level-bar-fill {
  height:100%;
  background:repeating-linear-gradient(90deg,#00cc00 0,#00cc00 4px,#009900 4px,#009900 8px);
  transition:width .6s cubic-bezier(.34,1.56,.64,1);
}
.timer-display { font-size:clamp(10px,2vw,13px); color:#fff; text-shadow:2px 2px #000; }
.timer-display.warning { color:#ff4444; animation:timerPulse .5s ease-in-out infinite; }
@keyframes timerPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* ===== QUESTION SCENE (single) ===== */
.question-scene {
  text-align:center; padding:20px 14px 12px; position:relative;
  min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.torch-left,.torch-right {
  position:absolute; top:20px; font-size:clamp(18px,3.5vw,26px);
  filter:drop-shadow(0 0 10px #fa0); animation:torchFlicker .8s ease-in-out infinite;
}
.torch-left{left:14px;} .torch-right{right:14px;}
@keyframes torchFlicker { 0%,100%{filter:drop-shadow(0 0 10px #fa0)} 50%{filter:drop-shadow(0 0 20px #f60)} }

.question-block {
  display:inline-flex; flex-direction:column; align-items:center;
  background:#1e1e0a; border:6px solid; border-color:#ffd700 #7a5c00 #7a5c00 #ffd700;
  padding:22px clamp(16px,4vw,48px); position:relative;
  min-width:min(280px,90vw); box-shadow:0 8px 0 #3a2c00, 0 0 30px #ffd70033;
}
.question-block::before {
  content:'?'; position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  background:#ffd700; color:#3a2c00; font-size:11px; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center; border:3px solid #7a5c00;
}
.question-category { font-size:clamp(7px,1.5vw,10px); color:#888; text-shadow:1px 1px #000; margin-bottom:10px; letter-spacing:2px; }
.question-number {
  font-size:clamp(20px,5vw,44px); color:#fff; text-shadow:3px 3px #000; white-space:nowrap; letter-spacing:3px;
}
.op-color-add{color:#7ab800} .op-color-sub{color:#ff6666} .op-color-mul{color:#6688ff} .op-color-div{color:#ffaa00}
.eq-color{color:#ffd700}

/* Progress dots */
.progress-dots { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:min(400px,90vw); }
.progress-dot { width:14px; height:14px; background:#2a2a2a; border:2px solid #4a4a4a; transition:all .3s; }
.progress-dot.done  { background:#00cc00; border-color:#00ff44; box-shadow:0 0 6px #00cc00; }
.progress-dot.current{ background:#ffd700; border-color:#ffff00; box-shadow:0 0 8px #ffd700; animation:dotPulse 1s ease-in-out infinite; }
.progress-dot.wrong { background:#cc0000; border-color:#ff4444; }
@keyframes dotPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

.wrong-hint { font-size:clamp(7px,1.5vw,10px); color:#ff8888; text-shadow:1px 1px #000; text-align:center; min-height:22px; padding:6px 14px; }

/* ===== ANSWER AREA (single) ===== */
.answer-area { max-width:min(440px,98vw); margin:0 auto; padding:0 12px 14px; }
.answer-row { display:flex; gap:8px; align-items:stretch; margin-bottom:12px; }
#answerInput {
  flex:1; font-family:var(--font-ui); font-size:clamp(20px,4.5vw,28px); padding:14px;
  background:#111; border:4px solid; border-color:#2a2a2a #6a6a6a #6a6a6a #2a2a2a;
  color:#fff; text-align:center; outline:none;
  -moz-appearance:textfield; min-height:var(--btn-h-lg);
}
#answerInput::-webkit-outer-spin-button,
#answerInput::-webkit-inner-spin-button{-webkit-appearance:none;}
#answerInput:focus { border-color:#1a3a8b #5a9aff #5a9aff #1a3a8b; box-shadow:0 0 14px #5a9aff44; }
#answerInput.correct { border-color:#00cc00; background:#002200; animation:flashGreen .5s ease; }
#answerInput.wrong   { border-color:#cc0000; background:#220000; animation:shake .5s ease; }
@keyframes flashGreen { 0%{background:#0f0;color:#000} 100%{background:#002200;color:#fff} }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-10px)} 40%{transform:translateX(10px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }

.submit-btn {
  padding:14px 18px; font-size:clamp(10px,2vw,13px); background:#4a7c00;
  border:4px solid; border-color:#7ab800 #1a3a00 #1a3a00 #7ab800; color:#fff;
  font-family:var(--font-ui); cursor:pointer; text-shadow:2px 2px #000; white-space:nowrap;
  transition:filter .1s; min-height:var(--btn-h-lg); -webkit-tap-highlight-color:transparent;
}
.submit-btn:hover{filter:brightness(1.3);}
.submit-btn:active{border-color:#1a3a00 #7ab800 #7ab800 #1a3a00;transform:translateY(2px);}

/* ===== NUMPAD ===== */
.numpad { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:12px; }
.numpad-btn {
  padding:clamp(14px,2.5vw,18px); background:#5a5a5a;
  border:3px solid; border-color:#9a9a9a #2a2a2a #2a2a2a #9a9a9a;
  color:#fff; font-family:var(--font-ui); font-size:clamp(14px,2.5vw,18px);
  cursor:pointer; text-align:center; text-shadow:2px 2px #000;
  transition:filter .1s; user-select:none; min-height:var(--btn-h);
  -webkit-tap-highlight-color:transparent;
}
.numpad-btn:hover{filter:brightness(1.3);}
.numpad-btn:active{border-color:#2a2a2a #9a9a9a #9a9a9a #2a2a2a;transform:translateY(1px);}
.numpad-btn.del{background:#6a0000;border-color:#cc2222 #2a0000 #2a0000 #cc2222;}
.numpad-btn.zero{grid-column:span 2;}

.hint-box { background:#0a0a2a; border:3px solid #3a3a7a; padding:12px 14px; font-size:clamp(7px,1.5vw,9px); color:#8888cc; text-shadow:1px 1px #000; text-align:center; margin-bottom:10px; }

/* ===== COMPLETE / GAME-OVER ===== */
.stage-title { font-size:clamp(14px,4vw,30px); color:#ffd700; text-shadow:4px 4px #7a5c00,6px 6px #000; text-align:center; padding:20px 0 6px; }
.stars-display { font-size:clamp(32px,7vw,52px); text-align:center; margin:10px 0 18px; animation:starsPop .8s cubic-bezier(.34,1.56,.64,1); }
@keyframes starsPop { 0%{transform:scale(0) rotate(-20deg);opacity:0} 100%{transform:scale(1) rotate(0);opacity:1} }
.stats-box { background:#111; border:4px solid #ffd700; padding:18px 24px; margin:0 auto 16px; max-width:min(420px,95vw); }
.stat-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:2px solid #2a2a2a; gap:12px; }
.stat-row:last-child{border-bottom:none;}
.stat-label{font-size:clamp(8px,1.8vw,10px);color:#888;text-shadow:1px 1px #000;}
.stat-value{font-size:clamp(9px,2vw,12px);color:#ffd700;text-shadow:2px 2px #000;}

.game-over-title { font-size:clamp(20px,5vw,42px); color:#cc0000; text-shadow:4px 4px #5a0000,6px 6px #000; text-align:center; padding:20px 0 6px; animation:gameOverShake .5s ease; }
@keyframes gameOverShake{0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
.game-over-sub{font-size:clamp(8px,2vw,11px);color:#ff8888;text-shadow:2px 2px #000;text-align:center;margin-bottom:18px;}

/* ===================================================================
   MODE SELECTOR SCREEN
   =================================================================== */
.mode-cards {
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
  max-width:700px; margin:0 auto 20px;
}
@media(max-width:500px){ .mode-cards{grid-template-columns:1fr;} }
.mode-card {
  background:#2a2a2a; border:5px solid; border-color:#7a7a7a #1a1a1a #1a1a1a #7a7a7a;
  padding:28px 20px; text-align:center; cursor:pointer;
  transition:filter .15s, transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.mode-card:hover { filter:brightness(1.25); transform:translateY(-4px); }
.mode-card:active{ transform:translateY(2px); }
.mode-icon { font-size:clamp(40px,8vw,64px); display:block; margin-bottom:14px; }
.mode-title { font-size:clamp(10px,2.5vw,15px); color:#ffd700; text-shadow:3px 3px #000; margin-bottom:8px; }
.mode-desc  { font-size:clamp(7px,1.5vw,9px);  color:#aaa; text-shadow:1px 1px #000; line-height:1.8; }
.mode-card.single { border-color:#7ab800 #1a3a00 #1a3a00 #7ab800; }
.mode-card.versus { border-color:#ffd700 #7a5c00 #7a5c00 #ffd700; }

/* ===================================================================
   TUG-OF-WAR (BATTLE) SCREEN
   =================================================================== */
#screen-battle {
  padding: 0;
  max-width: 100%;
}

/* ===== BATTLE LAYOUT - full screen split ===== */
.battle-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

/* ===== QUESTION AREA (center strip) ===== */
.battle-question-bar {
  background: #111111f0;
  border-top: 4px solid #333;
  border-bottom: 4px solid #333;
  padding: 10px 16px;
  text-align: center;
  z-index: 30;
  position: relative;
}
.battle-q-label {
  font-size: clamp(7px,1.5vw,10px); color:#888; margin-bottom:6px; letter-spacing:2px;
}
.battle-q-text {
  font-size: clamp(18px,4.5vw,40px); color:#fff; text-shadow:3px 3px #000; letter-spacing:3px; white-space:nowrap;
}
.battle-status-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 16px 0; gap:8px; flex-wrap:wrap;
}
.battle-status-item { font-size:clamp(8px,1.8vw,11px); color:#ffd700; text-shadow:2px 2px #000; }

/* ===== TUG-OF-WAR ARENA ===== */
.tug-arena {
  background: linear-gradient(180deg, #3a5c1a 0%, #2a4a10 40%, #1a3008 100%);
  border-top: 6px solid #5c8a00; border-bottom: 6px solid #3d5c00;
  padding: 0;
  position: relative;
  height: clamp(110px, 18vh, 180px);
  overflow: hidden;
}

/* Ground texture */
.tug-arena::before {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:30%;
  background: repeating-linear-gradient(90deg,#866043 0,#866043 24px,#6b4c35 24px,#6b4c35 48px);
  border-top:4px solid #a08050;
}
/* Sky in arena */
.tug-arena::after {
  content:'';
  position:absolute; top:0; left:0; right:0; height:50%;
  background: linear-gradient(180deg,#5b8dd9 0%,#7abaff 100%);
  opacity:.5;
}

/* The rope */
.tug-rope-track {
  position:absolute; top:50%; left:8%; right:8%;
  transform:translateY(-50%);
  height:14px; z-index:5;
  display:flex; align-items:center;
}
.tug-rope {
  width:100%; height:10px;
  background: repeating-linear-gradient(
    90deg,
    #c8a050 0,#c8a050 8px,
    #a07830 8px,#a07830 16px
  );
  border-top:2px solid #e0c070; border-bottom:2px solid #806020;
  border-radius:2px;
}
/* Center mark */
.tug-rope-center {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:16px; height:24px; background:#ff2222; border:3px solid #fff;
  z-index:7; box-shadow:0 0 10px #f00;
}

/* Zone lines */
.tug-zone-left,.tug-zone-right {
  position:absolute; top:0; bottom:0; width:3px; background:#ff000066; z-index:6;
}
.tug-zone-left  { left:25%; }
.tug-zone-right { right:25%; }

/* Zone labels */
.tug-zone-label {
  position:absolute; top:6px; font-size:clamp(7px,1.5vw,9px); color:#fff; text-shadow:1px 1px #000; z-index:8;
  opacity:.7;
}
.tug-zone-label.left  { left:calc(25% + 4px); }
.tug-zone-label.right { right:calc(25% + 4px); }

/* Characters */
.tug-char {
  position:absolute; top:50%; transform:translateY(-80%);
  font-size:clamp(28px,6vw,52px); z-index:10;
  transition:left .4s cubic-bezier(.34,1.56,.64,1), right .4s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(2px 2px 0 #000);
  user-select:none; line-height:1;
}
.tug-char-p1 { left: 8%; }
.tug-char-p2 { right: 8%; transform:translateY(-80%) scaleX(-1); }

/* Tug indicator - the position knob */
.tug-knob {
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:22px; height:30px; background:#ffff00; border:3px solid #888800;
  z-index:8; box-shadow:0 0 12px #ff0;
  transition: left .35s cubic-bezier(.34,1.56,.64,1);
}

/* Score tally above arena */
.battle-score-bar {
  display:flex; align-items:center; background:#0a0a0a; border-bottom:3px solid #2a2a2a;
  height:clamp(42px,7vh,60px); overflow:hidden;
}
.p1-score-area {
  flex:1; background:#300000; display:flex; align-items:center; justify-content:flex-start;
  padding:0 14px; gap:10px; border-right:3px solid #660000;
}
.p2-score-area {
  flex:1; background:#00003a; display:flex; align-items:center; justify-content:flex-end;
  padding:0 14px; gap:10px; border-left:3px solid #000066;
}
.p-score-name { font-size:clamp(9px,2vw,13px); text-shadow:2px 2px #000; white-space:nowrap; }
.p1-name-color { color:var(--p1-light); }
.p2-name-color { color:var(--p2-light); }
.p-score-val {
  font-size:clamp(14px,3.5vw,24px); text-shadow:3px 3px #000;
  min-width:40px; text-align:center;
}
.p1-val { color:#ff6666; } .p2-val { color:#6699ff; }
.p-score-pts { font-size:clamp(7px,1.5vw,9px); color:#888; text-shadow:1px 1px #000; }

/* Tug progress bar */
.tug-progress-bar {
  height:clamp(20px,4vh,30px); background:#1a1a1a; border-bottom:3px solid #2a2a2a;
  position:relative; overflow:hidden;
}
.tug-bar-fill-p1 {
  position:absolute; left:0; top:0; bottom:0;
  background:repeating-linear-gradient(90deg,#aa0000 0,#aa0000 6px,#880000 6px,#880000 12px);
  transition:width .4s cubic-bezier(.34,1.56,.64,1);
}
.tug-bar-fill-p2 {
  position:absolute; right:0; top:0; bottom:0;
  background:repeating-linear-gradient(90deg,#0000aa 0,#0000aa 6px,#000088 6px,#000088 12px);
  transition:width .4s cubic-bezier(.34,1.56,.64,1);
}
.tug-bar-center-line {
  position:absolute; left:50%; top:0; bottom:0; width:4px; background:#ffd700;
  transform:translateX(-50%); box-shadow:0 0 8px #ffd700;
  z-index:5;
}
.tug-bar-label-p1,.tug-bar-label-p2 {
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:clamp(8px,1.8vw,11px); text-shadow:2px 2px #000; z-index:6;
}
.tug-bar-label-p1 { left:8px; color:#ffaaaa; }
.tug-bar-label-p2 { right:8px; color:#aabbff; }

/* ===== PLAYERS INPUT SPLIT ===== */
.battle-players {
  display: flex;
  flex: 1;
  gap: 0;
  overflow: hidden;
}

.player-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(8px,2vw,16px) clamp(6px,1.5vw,12px);
  position: relative;
  overflow: hidden;
}
.player-panel.p1-panel { background:#1a0000cc; border-right:3px solid #550000; }
.player-panel.p2-panel { background:#00001acc; border-left:3px solid #000055; }

/* Player header */
.player-header {
  display:flex; align-items:center; gap:8px;
  margin-bottom:clamp(6px,1.5vw,12px); width:100%; justify-content:center;
}
.player-avatar { font-size:clamp(20px,4vw,32px); }
.player-name-badge {
  font-size:clamp(8px,2vw,13px); text-shadow:2px 2px #000;
  padding:6px 12px; border:3px solid;
}
.p1-badge { background:#5a0000; border-color:var(--p1-color); color:var(--p1-light); }
.p2-badge { background:#00005a; border-color:var(--p2-color); color:var(--p2-light); }

/* Player answer display */
.player-answer-display {
  width:100%; background:#111; border:4px solid;
  font-family:var(--font-ui); font-size:clamp(22px,5vw,38px);
  padding:12px 8px; text-align:center; text-shadow:2px 2px #000;
  margin-bottom:clamp(6px,1.5vw,10px); min-height:clamp(56px,8vh,76px);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, background .2s;
  letter-spacing:2px;
}
.p1-answer-display { border-color:var(--p1-dark); color:#fff; }
.p2-answer-display { border-color:var(--p2-dark); color:#fff; }
.player-answer-display.b-correct { animation:flashGreen .5s ease; border-color:#00ff00 !important; }
.player-answer-display.b-wrong   { animation:shake .4s ease;      border-color:#ff0000 !important; }
.player-answer-display.locked    { opacity:.5; }

/* Player numpad */
.player-numpad {
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(4px,1vw,8px); width:100%;
  max-width:min(300px,48vw);
}
.p-numpad-btn {
  font-family:var(--font-ui); font-size:clamp(13px,2.8vw,20px);
  padding:clamp(10px,2vw,16px) 0;
  border:3px solid; text-shadow:2px 2px #000;
  cursor:pointer; text-align:center; user-select:none;
  min-height:clamp(44px,7vh,64px);
  -webkit-tap-highlight-color:transparent;
  touch-action: none;  /* 讓每個鍵獨立處理觸控，不被当手勢取消 */
  transition:filter .1s;
}
.p-numpad-btn:hover{filter:brightness(1.3);}
.p-numpad-btn:active{transform:translateY(1px);}
.p-numpad-btn.zero{grid-column:span 2;}

/* P1 buttons */
.p1-numpad .p-numpad-btn {
  background:#3a0000; color:var(--p1-light); border-color:var(--p1-color) #1a0000 #1a0000 var(--p1-color);
}
.p1-numpad .p-numpad-btn.del {
  background:#5a0000; color:#ff4444; border-color:#ff2222 #2a0000 #2a0000 #ff2222;
}

/* P2 buttons */
.p2-numpad .p-numpad-btn {
  background:#00003a; color:var(--p2-light); border-color:var(--p2-color) #00001a #00001a var(--p2-color);
}
.p2-numpad .p-numpad-btn.del {
  background:#00005a; color:#4488ff; border-color:#2244ff #00002a #00002a #2244ff;
}

/* Submit buttons for players */
.player-submit {
  width:100%; max-width:min(300px,48vw);
  font-family:var(--font-ui); font-size:clamp(10px,2vw,14px);
  padding:clamp(10px,2vh,16px) 8px; border:4px solid;
  cursor:pointer; text-shadow:2px 2px #000; text-align:center;
  margin-top:clamp(4px,1vw,8px); min-height:var(--btn-h);
  -webkit-tap-highlight-color:transparent;
  touch-action: none;  /* 與 numpad 相同，支援不同手同時送出 */
  transition:filter .1s;
}
.player-submit:hover{filter:brightness(1.3);}
.player-submit:active{transform:translateY(2px);}
.p1-submit { background:var(--p1-dark); color:var(--p1-light); border-color:var(--p1-color) var(--p1-dark) var(--p1-dark) var(--p1-color); }
.p2-submit { background:var(--p2-dark); color:var(--p2-light); border-color:var(--p2-color) var(--p2-dark) var(--p2-dark) var(--p2-color); }

/* Correct flash overlay */
.player-flash {
  position:absolute; inset:0; pointer-events:none; z-index:20; opacity:0;
  transition:opacity .2s;
}
.player-flash.show { opacity:1; animation:panelFlash .5s ease forwards; }
.p1-flash { background:#ff000044; }
.p2-flash { background:#0000ff44; }
@keyframes panelFlash { 0%{opacity:.8} 100%{opacity:0} }

/* Scoreboard on right side of each player panel */
.player-score-disp {
  font-size:clamp(9px,2vw,13px); color:#ffd700; text-shadow:2px 2px #000;
  margin-bottom:4px; text-align:center;
}

/* Arena near-win shake */
@keyframes arenaShake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}
.tug-arena.shaking { animation: arenaShake .3s ease infinite !important; }

/* ===== BATTLE WINNER SCREEN ===== */
.winner-screen {
  text-align:center; padding:clamp(20px,4vh,40px) 20px;
}
.winner-title {
  font-size:clamp(18px,5vw,40px); text-shadow:4px 4px #000;
  animation:titleFloat 2s ease-in-out infinite; margin-bottom:16px;
}
.winner-title.p1-wins { color:var(--p1-light); text-shadow:4px 4px var(--p1-dark),6px 6px #000; }
.winner-title.p2-wins { color:var(--p2-light); text-shadow:4px 4px var(--p2-dark),6px 6px #000; }
.winner-title.tie     { color:#ffd700; text-shadow:4px 4px #7a5c00,6px 6px #000; }
.winner-avatar { font-size:clamp(48px,10vw,80px); margin:16px 0; display:block; animation:avatarBounce 1s ease-in-out infinite; }
@keyframes avatarBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

/* ===== ROUND FLASH (Big center text) ===== */
.round-flash {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:200; pointer-events:none; background:#000000aa;
}
.round-flash-text {
  font-size:clamp(36px,10vw,80px); font-family:var(--font-ui);
  text-shadow:6px 6px #000; animation:roundFlashAnim .8s ease forwards;
}
@keyframes roundFlashAnim {
  0%  {transform:scale(.3);opacity:0;}
  40% {transform:scale(1.3);opacity:1;}
  70% {transform:scale(1);opacity:1;}
  100%{transform:scale(1);opacity:1;}
}

/* ===== FEEDBACK OVERLAY ===== */
.feedback-text { font-size:clamp(28px,7vw,48px); font-family:var(--font-ui); text-shadow:4px 4px #000; animation:feedbackPop 1.2s ease forwards; white-space:nowrap; }
@keyframes feedbackPop { 0%{transform:scale(.4) translateY(0);opacity:1} 50%{transform:scale(1.2) translateY(-30px);opacity:1} 100%{transform:scale(1) translateY(-80px);opacity:0} }

/* ===== PARTICLES ===== */
.particle { position:fixed; pointer-events:none; z-index:150; animation:particleFly 1s ease-out forwards; }
@keyframes particleFly { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.2)} }

/* ===== CLOUDS ===== */
.cloud { position:fixed; background:#ffffffcc; border:3px solid #e8e8e8; z-index:0; animation:cloudFloat linear infinite; }
@keyframes cloudFloat { from{transform:translateX(-250px)} to{transform:translateX(calc(100vw + 250px))} }

/* ===== FLOATING BLOCKS ===== */
.floating-block { position:fixed; width:28px; height:28px; border:3px solid; z-index:0; opacity:.5; animation:floatUp linear infinite; }
@keyframes floatUp { 0%{transform:translateY(100vh) rotate(0deg);opacity:.5} 100%{transform:translateY(-120px) rotate(360deg);opacity:0} }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:10px;background:#1a1a1a;}
::-webkit-scrollbar-thumb{background:#5a5a5a;border:2px solid #1a1a1a;}

/* ===== NAME INPUTS ===== */
.name-input {
  font-family:var(--font-ui); font-size:clamp(12px,2.5vw,16px); padding:12px 14px;
  background:#111; border:3px solid; color:#fff; outline:none; width:100%; text-align:center;
}
.p1-name-input { border-color:var(--p1-color); }
.p2-name-input { border-color:var(--p2-color); }
.name-input:focus { box-shadow:0 0 10px currentColor; }

/* ===== RESPONSIVE ===== */
@media(max-width:600px){
  .battle-q-text{font-size:clamp(16px,5vw,28px);}
  .tug-char{font-size:clamp(22px,6vw,40px);}
  .tug-arena{height:clamp(90px,15vh,140px);}
}
@media(max-width:400px){
  .p-numpad-btn{font-size:clamp(12px,4vw,16px);min-height:40px;}
  .player-answer-display{font-size:clamp(18px,5vw,28px);}
}

/* Landscape phone - compact */
@media(max-height:500px) and (orientation:landscape){
  .tug-arena{height:80px;}
  .battle-score-bar{height:38px;}
  .tug-progress-bar{height:16px;}
  .player-numpad{max-width:45vw;}
  .p-numpad-btn{min-height:38px;padding:8px 0;}
}