/**
 * 像素猪冒险 - 样式表
 * Pixel Pig Adventure - Stylesheet
 * 
 * 功能：
 * - 像素风格主题样式
 * - 响应式布局（媒体查询）
 * - 动画效果
 * - UI 组件样式
 */

/* ==================== 
   CSS 变量定义
   ==================== */

:root {
    /* 颜色变量 - 与游戏配色保持一致 */
    --color-sky: #87CEEB;           /* 天空蓝 */
    --color-sky-dark: #4169E1;      /* 深蓝 */
    --color-ground: #228B22;        /* 草地绿 */
    --color-ground-dark: #1a6b1a;   /* 深绿 */
    --color-pig: #FFB6C1;           /* 猪粉色 */
    --color-wood: #8B4513;          /* 木桩棕 */
    --color-coin: #FFD700;          /* 金币金 */
    --color-text: #FFFFFF;          /* 文字白 */
    --color-text-shadow: #000000;   /* 文字阴影 */
    --color-bg: #1a1a2e;            /* 背景深色 */
    --color-overlay: rgba(0, 0, 0, 0.7); /* 遮罩层 */
    
    /* 字体变量 */
    --font-pixel: 'Press Start 2P', 'Courier New', monospace;
    --font-fallback: 'Courier New', monospace;
    
    /* 尺寸变量 */
    --game-width: 800px;
    --game-height: 600px;
    --border-radius: 8px;
    --pixel-border: 4px;
    
    /* 动画时间 */
    --transition-fast: 0.15s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;
}

/* ==================== 
   基础样式重置
   ==================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-pixel);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
    background: linear-gradient(180deg, var(--color-sky) 0%, var(--color-sky-dark) 100%);
    background-attachment: fixed;
}

/* 防止文本选择 */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 防止触摸高亮 */
* {
    -webkit-tap-highlight-color: transparent;
}

/* ==================== 
   游戏包装器
   ==================== */

.game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(180deg, var(--color-sky) 0%, var(--color-sky-dark) 100%);
}

/* ==================== 
   游戏标题区域
   ==================== */

.game-header {
    text-align: center;
    margin-bottom: 20px;
}

.game-title {
    font-family: var(--font-pixel);
    font-size: 32px;
    color: var(--color-text);
    text-shadow: 
        3px 3px 0 var(--color-wood),
        -1px -1px 0 var(--color-text-shadow),
        1px -1px 0 var(--color-text-shadow),
        -1px 1px 0 var(--color-text-shadow),
        1px 1px 0 var(--color-text-shadow);
    animation: titleBounce 2s ease-in-out infinite;
}

.title-emoji {
    display: inline-block;
    animation: emojiWiggle 1s ease-in-out infinite;
}

.title-text {
    margin: 0 10px;
}

/* 标题弹跳动画 */
@keyframes titleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Emoji 摇摆动画 */
@keyframes emojiWiggle {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* ==================== 
   游戏主区域
   ==================== */

.game-main {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================== 
   游戏容器
   ==================== */

.game-container {
    position: relative;
    width: var(--game-width);
    height: var(--game-height);
    border: var(--pixel-border) solid var(--color-wood);
    border-radius: var(--border-radius);
    box-shadow: 
        0 0 0 4px var(--color-text),
        0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    background: var(--color-sky);
}

/* ==================== 
   Canvas 画布
   ==================== */

#gameCanvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* ==================== 
   UI 覆盖层
   ==================== */

.ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 屏幕基础样式 */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    pointer-events: auto;
}

/* 激活状态 */
.screen.active {
    opacity: 1;
    visibility: visible;
}

/* 屏幕内容 */
.screen-content {
    text-align: center;
    padding: 40px;
    background: rgba(26, 26, 46, 0.95);
    border: var(--pixel-border) solid var(--color-coin);
    border-radius: var(--border-radius);
    box-shadow: 
        0 0 0 4px var(--color-text),
        0 10px 40px rgba(0, 0, 0, 0.8);
    animation: screenAppear 0.5s ease-out;
}

@keyframes screenAppear {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 屏幕标题 */
.screen-title {
    font-family: var(--font-pixel);
    font-size: 28px;
    color: var(--color-coin);
    text-shadow: 2px 2px 0 var(--color-text-shadow);
    margin-bottom: 15px;
}

.screen-subtitle {
    font-size: 12px;
    color: var(--color-text);
    opacity: 0.7;
    margin-bottom: 25px;
}

/* 游戏结束标题特殊样式 */
.game-over-title {
    color: #FF6B6B;
    animation: gameOverPulse 1s ease-in-out infinite;
}

@keyframes gameOverPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ==================== 
   开始界面
   ==================== */

.start-screen .screen-content {
    min-width: 400px;
}

/* 游戏说明 */
.game-instructions {
    text-align: left;
    font-size: 12px;
    line-height: 2;
    margin-bottom: 30px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--border-radius);
}

.game-instructions p {
    margin: 5px 0;
}

/* 最高分显示 */
.high-score-display,
.total-coins-display {
    font-size: 14px;
    margin-top: 15px;
    color: var(--color-coin);
}

.high-score-display .label,
.total-coins-display .label {
    margin-right: 10px;
}

.high-score-display .value,
.total-coins-display .value {
    font-size: 18px;
    text-shadow: 2px 2px 0 var(--color-text-shadow);
}

/* ==================== 
   结束界面
   ==================== */

.end-screen .screen-content {
    min-width: 350px;
}

/* 得分统计 */
.score-stats {
    margin: 25px 0;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin: 10px 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--border-radius);
    font-size: 12px;
}

.stat-item.highlight {
    background: rgba(255, 215, 0, 0.2);
    border: 2px solid var(--color-coin);
}

.stat-label {
    color: var(--color-text);
    opacity: 0.8;
}

.stat-value {
    font-size: 18px;
    color: var(--color-coin);
    text-shadow: 2px 2px 0 var(--color-text-shadow);
}

/* 新纪录提示 */
.new-record {
    font-size: 16px;
    color: var(--color-coin);
    margin: 15px 0;
    animation: newRecordBounce 0.5s ease-in-out infinite;
}

.new-record.hidden {
    display: none;
}

@keyframes newRecordBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ==================== 
   暂停界面
   ==================== */

.pause-screen .screen-content {
    min-width: 300px;
}

.pause-hint {
    font-size: 12px;
    color: var(--color-text);
    opacity: 0.7;
    margin-bottom: 20px;
}

/* ==================== 
   像素风格按钮
   ==================== */

.pixel-btn {
    font-family: var(--font-pixel);
    font-size: 14px;
    padding: 15px 30px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    outline: none;
}

/* 按钮像素边框效果 */
.pixel-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid transparent;
    border-radius: var(--border-radius);
    transition: border-color var(--transition-fast);
}

.pixel-btn:hover::before {
    border-color: var(--color-text);
}

.pixel-btn:active {
    transform: translateY(2px);
}

/* 开始按钮 */
.start-btn {
    background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
    color: var(--color-text);
    box-shadow: 
        0 4px 0 #1B5E20,
        0 6px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

.start-btn:hover {
    background: linear-gradient(180deg, #66BB6A 0%, #43A047 100%);
}

.start-btn:active {
    box-shadow: 
        0 2px 0 #1B5E20,
        0 3px 5px rgba(0, 0, 0, 0.3);
}

/* 重新开始按钮 */
.restart-btn {
    background: linear-gradient(180deg, #FF9800 0%, #F57C00 100%);
    color: var(--color-text);
    box-shadow: 
        0 4px 0 #E65100,
        0 6px 10px rgba(0, 0, 0, 0.3);
}

.restart-btn:hover {
    background: linear-gradient(180deg, #FFB74D 0%, #FF9800 100%);
}

.restart-btn:active {
    box-shadow: 
        0 2px 0 #E65100,
        0 3px 5px rgba(0, 0, 0, 0.3);
}

/* 继续按钮 */
.resume-btn {
    background: linear-gradient(180deg, #2196F3 0%, #1976D2 100%);
    color: var(--color-text);
    box-shadow: 
        0 4px 0 #0D47A1,
        0 6px 10px rgba(0, 0, 0, 0.3);
}

.resume-btn:hover {
    background: linear-gradient(180deg, #42A5F5 0%, #2196F3 100%);
}

.resume-btn:active {
    box-shadow: 
        0 2px 0 #0D47A1,
        0 3px 5px rgba(0, 0, 0, 0.3);
}

/* ==================== 
   游戏 HUD
   ==================== */

.game-hud {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 20px;
    pointer-events: none;
    z-index: 10;
}

.game-hud.hidden {
    display: none;
}

.hud-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: var(--border-radius);
    border: 2px solid var(--color-coin);
}

.hud-label {
    font-size: 10px;
    color: var(--color-text);
    opacity: 0.8;
}

.hud-value {
    font-size: 16px;
    color: var(--color-coin);
    text-shadow: 2px 2px 0 var(--color-text-shadow);
    min-width: 40px;
}

/* ==================== 
   游戏页脚
   ==================== */

.game-footer {
    margin-top: 20px;
    text-align: center;
}

.footer-text {
    font-size: 10px;
    color: var(--color-text);
    opacity: 0.7;
}

.footer-text .separator {
    margin: 0 10px;
}

/* ==================== 
   错误提示
   ==================== */

.error-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    background: var(--color-bg);
    color: var(--color-text);
}

.error-message h2 {
    font-size: 24px;
    color: #FF6B6B;
    margin-bottom: 15px;
}

.error-message p {
    font-size: 12px;
    margin: 10px 0;
}

.error-detail {
    color: #FF6B6B;
    font-size: 10px;
    opacity: 0.7;
}

/* ==================== 
   响应式设计 - 媒体查询
   ==================== */

/* 大屏幕（> 900px） */
@media screen and (min-width: 900px) {
    .game-wrapper {
        padding: 30px;
    }
    
    .game-title {
        font-size: 36px;
    }
    
    .screen-content {
        padding: 50px;
    }
}

/* 平板设备（768px - 899px） */
@media screen and (max-width: 899px) and (min-width: 768px) {
    :root {
        --game-width: 700px;
        --game-height: 525px;
    }
    
    .game-title {
        font-size: 28px;
    }
    
    .screen-title {
        font-size: 24px;
    }
}

/* 小平板和大手机（600px - 767px） */
@media screen and (max-width: 767px) and (min-width: 600px) {
    :root {
        --game-width: 90vw;
        --game-height: 67.5vw;
    }
    
    .game-wrapper {
        padding: 15px;
    }
    
    .game-header {
        margin-bottom: 15px;
    }
    
    .game-title {
        font-size: 24px;
    }
    
    .screen-content {
        padding: 30px;
        min-width: auto !important;
    }
    
    .screen-title {
        font-size: 22px;
    }
    
    .pixel-btn {
        font-size: 12px;
        padding: 12px 25px;
    }
}

/* 手机设备（< 600px） */
@media screen and (max-width: 599px) {
    :root {
        --game-width: 95vw;
        --game-height: 71.25vw;
        --border-radius: 4px;
        --pixel-border: 2px;
    }
    
    .game-wrapper {
        padding: 10px;
        min-height: auto;
        padding-top: 15px;
    }
    
    .game-header {
        margin-bottom: 10px;
    }
    
    .game-title {
        font-size: 18px;
    }
    
    .title-emoji {
        font-size: 20px;
    }
    
    .game-container {
        border-width: 2px;
        box-shadow: 
            0 0 0 2px var(--color-text),
            0 5px 15px rgba(0, 0, 0, 0.4);
    }
    
    .screen-content {
        padding: 20px;
        min-width: auto !important;
        margin: 10px;
    }
    
    .screen-title {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .screen-subtitle {
        font-size: 10px;
        margin-bottom: 15px;
    }
    
    .game-instructions {
        font-size: 10px;
        padding: 10px;
        margin-bottom: 20px;
    }
    
    .pixel-btn {
        font-size: 11px;
        padding: 10px 20px;
    }
    
    .start-screen .screen-content {
        padding: 25px 20px;
    }
    
    .high-score-display,
    .total-coins-display {
        font-size: 11px;
    }
    
    .high-score-display .value,
    .total-coins-display .value {
        font-size: 14px;
    }
    
    .score-stats {
        margin: 15px 0;
    }
    
    .stat-item {
        padding: 10px 12px;
        font-size: 10px;
    }
    
    .stat-value {
        font-size: 14px;
    }
    
    .new-record {
        font-size: 12px;
    }
    
    .game-hud {
        top: 10px;
        left: 10px;
        gap: 10px;
    }
    
    .hud-item {
        padding: 6px 10px;
    }
    
    .hud-label {
        font-size: 8px;
    }
    
    .hud-value {
        font-size: 12px;
        min-width: 30px;
    }
    
    .game-footer {
        margin-top: 15px;
    }
    
    .footer-text {
        font-size: 8px;
    }
}

/* 超小屏幕（< 360px） */
@media screen and (max-width: 359px) {
    .game-title {
        font-size: 14px;
    }
    
    .screen-title {
        font-size: 16px;
    }
    
    .pixel-btn {
        font-size: 10px;
        padding: 8px 15px;
    }
}

/* 横屏模式 */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .game-wrapper {
        padding: 10px;
    }
    
    .game-header {
        margin-bottom: 5px;
    }
    
    .game-title {
        font-size: 16px;
    }
    
    .game-footer {
        margin-top: 5px;
    }
    
    .screen-content {
        padding: 15px 20px;
    }
    
    .screen-title {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .game-instructions {
        margin-bottom: 10px;
    }
    
    .score-stats {
        margin: 10px 0;
    }
}

/* 高分辨率屏幕 */
@media screen and (min-resolution: 2dppx) {
    .game-container {
        border-width: 3px;
    }
    
    .pixel-btn::before {
        border-width: 2px;
    }
}

/* 打印样式 */
@media print {
    .game-wrapper {
        display: none;
    }
}

/* 减少动画（无障碍） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0d0d1a;
        --color-overlay: rgba(0, 0, 0, 0.85);
    }
}

/* ==================== 
   旋转提示覆盖层
   ==================== */

.rotate-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rotate-overlay.active {
    display: flex;
    opacity: 1;
}

.rotate-content {
    text-align: center;
    padding: 40px;
}

.rotate-icon {
    font-size: 80px;
    margin-bottom: 30px;
    animation: rotatePhone 2s ease-in-out infinite;
}

@keyframes rotatePhone {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(90deg); }
    75% { transform: rotate(0deg); }
}

.rotate-text {
    font-family: var(--font-pixel);
    font-size: 18px;
    color: var(--color-text);
    margin-bottom: 15px;
    text-shadow: 2px 2px 0 var(--color-text-shadow);
}

.rotate-subtext {
    font-family: var(--font-fallback);
    font-size: 14px;
    color: var(--color-text);
    opacity: 0.6;
}

/* ==================== 
   触摸区域优化
   ==================== */

/* 增大按钮触摸区域 */
.pixel-btn {
    min-height: 48px; /* iOS 推荐最小触摸区域 44pt */
    min-width: 120px;
    padding: 15px 30px;
}

/* 为按钮添加额外的触摸扩展区域 */
.pixel-btn::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
}

/* 移动端按钮优化 */
@media screen and (max-width: 767px) {
    .pixel-btn {
        min-height: 52px;
        min-width: 140px;
        padding: 14px 28px;
        font-size: 13px;
    }
    
    .pixel-btn::after {
        top: -15px;
        left: -15px;
        right: -15px;
        bottom: -15px;
    }
}

/* HUD 触摸区域优化 */
.hud-item {
    min-height: 40px;
    padding: 10px 15px;
}

@media screen and (max-width: 767px) {
    .hud-item {
        min-height: 44px;
        padding: 8px 12px;
    }
}