* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 禁止雙擊放大（iOS Safari double-tap zoom） */
    touch-action: manipulation;
}

body {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Noto Sans TC', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* 文字清晰度優化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

#game-container {
    width: 100vw;
    height: 100vh;
    position: relative;
}

/* 題目 HTML overlay 定位：跟 Phaser canvas 對齊 */
#question-overlay {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

#question-card {
    font-family: 'Noto Sans TC', Arial, sans-serif;
}

#q-prompt {
    font-size: 16px;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 0.5px;
}

#q-text {
    font-size: 38px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 3px;
}

#q-buttons button {
    font-family: 'Noto Sans TC', Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

canvas {
    display: block;
    touch-action: none;  /* iOS Safari: prevent scroll hijack */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

#game-container canvas {
    touch-action: none;
}

/* ===== 攻擊動畫：局部斜線（以目標為中心）===== */
@keyframes slash-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scaleX(0.05); }
    20%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scaleX(1); }
    65%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scaleX(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scaleX(1); }
}

.slash-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 96;
    overflow: hidden;
}

/* 斜線以 (--cx, --cy) 為中心，寬度由等級決定 */
.slash-line {
    position: fixed;
    /* 用 CSS var 定義寬度（JS 注入），left/top 移到 JS */
    width: var(--sw, 140px);
    height: 8px;
    background: linear-gradient(90deg, transparent 0%, #ff4444 20%, #ffaa44 40%, #ffffff 50%, #ffaa44 60%, #ff4444 80%, transparent 100%);
    border-radius: 4px;
    box-shadow: 0 0 10px #ff6600, 0 0 22px #ff4400;
    transform-origin: center center;
    animation: slash-in 0.55s ease-out forwards;
}
.slash-line.heavy {
    height: 13px;
    width: var(--sw, 220px);
    background: linear-gradient(90deg, transparent 0%, #ff2200 15%, #ff8800 35%, #ffffff 50%, #ff8800 65%, #ff2200 85%, transparent 100%);
    box-shadow: 0 0 16px #ff6600, 0 0 40px #ff3300, 0 0 8px #fff;
}
.slash-line.fatal {
    height: 18px;
    width: var(--sw, 300px);
    background: linear-gradient(90deg, transparent 0%, #ff0000 10%, #ff6600 30%, #ffffff 50%, #ff6600 70%, #ff0000 90%, transparent 100%);
    box-shadow: 0 0 22px #ff4400, 0 0 55px #ff2200, 0 0 12px #fff;
}

/* ===== 局部閃光（以目標為中心的圓形光暈）===== */
@keyframes local-flash {
    0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(0.3); }
    40%  { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.3); }
}

.local-flash {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 94;
    animation: local-flash 0.4s ease-out forwards;
}

/* ===== 畫面抖動（重擊）===== */
@keyframes screen-shake {
    0%   { transform: translate(0, 0); }
    15%  { transform: translate(-6px, -3px); }
    30%  { transform: translate(6px, 5px); }
    50%  { transform: translate(-4px, 2px); }
    70%  { transform: translate(4px, -3px); }
    100% { transform: translate(0, 0); }
}
.screen-shake {
    animation: screen-shake 0.35s ease-out;
}

/* ===== 爆炸波紋（局部，以目標為中心）===== */
@keyframes shockwave {
    0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(3);   opacity: 0; }
}
.shockwave {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 95;
    animation: shockwave 0.5s ease-out forwards;
}

/* ===== 致命一擊：破碎粒子 ===== */
@keyframes shard-fly {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(0.2); }
}
.shard {
    position: fixed;
    pointer-events: none;
    z-index: 97;
    border-radius: 2px;
    animation: shard-fly 0.65s ease-out forwards;
}

/* 重擊白閃 */
.screen-flash.white {
    background: rgba(255, 255, 255, 0.6);
}

/* ===== 畫面抖動（重擊）===== */
@keyframes screen-shake {
    0%   { transform: translate(0, 0); }
    15%  { transform: translate(-8px, -4px); }
    30%  { transform: translate(8px, 6px); }
    45%  { transform: translate(-6px, 2px); }
    60%  { transform: translate(6px, -4px); }
    75%  { transform: translate(-3px, 2px); }
    100% { transform: translate(0, 0); }
}

.screen-shake {
    animation: screen-shake 0.4s ease-out;
}

/* ===== 爆炸波紋（法術/重擊）===== */
@keyframes shockwave {
    0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(3);   opacity: 0; }
}

.shockwave {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 95;
    animation: shockwave 0.5s ease-out forwards;
}

/* ===== 致命一擊：破碎粒子 ===== */
@keyframes shard-fly {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(0.2); }
}

.shard {
    position: fixed;
    pointer-events: none;
    z-index: 97;
    border-radius: 2px;
    animation: shard-fly 0.7s ease-out forwards;
}

/* Prevent text selection */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}