@import '@/uni.scss';

// =====================================
// 扫雷游戏 - 暗色毛玻璃风格
// 与项目整体设计语言保持一致
// =====================================

.container {
    min-height: 100vh;
    background: $bg-dark;
    color: $text-dark-main;
    font-size: $font-md;
    position: relative;
    overflow: hidden;
}

// 背景装饰 - 使用项目统一的光球效果
.bg-dark-grid {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;

    &::before {
        content: '';
        position: absolute;
        top: -100rpx;
        right: -100rpx;
        width: 600rpx;
        height: 600rpx;
        background: radial-gradient(circle, rgba($brand-primary, 0.2) 0%, transparent 70%);
        filter: blur(60rpx);
        border-radius: 50%;
        animation: float 10s ease-in-out infinite;
    }

    &::after {
        content: '';
        position: absolute;
        bottom: 100rpx;
        left: -150rpx;
        width: 500rpx;
        height: 500rpx;
        background: radial-gradient(circle, rgba($brand-secondary, 0.15) 0%, transparent 70%);
        filter: blur(50rpx);
        border-radius: 50%;
        animation: float 15s ease-in-out infinite reverse;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-30rpx) scale(1.05);
    }
}

// =====================================
// 暗色毛玻璃卡片 - 项目统一风格
// =====================================
.glass-card {
    background: $bg-dark-card;
    backdrop-filter: blur(20rpx);
    border: 1px solid $border-dark;
    box-shadow: $shadow-card;
    border-radius: $radius-lg;
    position: relative;
    z-index: 1;
}

// =====================================
// 加载屏幕
// =====================================
.loading-screen {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    background: rgba(0, 0, 0, 0.9);
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $spacing-lg;
}

.loading-spinner {
    font-size: 80rpx;
    animation: pulse 1.5s ease-in-out infinite;
}

.loading-text {
    color: $text-dark-sub;
    font-size: $font-md;
    letter-spacing: 4rpx;
}

// =====================================
// 匹配大厅
// =====================================
.lobby-screen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50vh;
    background: linear-gradient(180deg, rgba($brand-primary, 0.1) 0%, transparent 100%);
    z-index: -1;
}

.lobby-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: $spacing-xl $spacing-lg;
    padding-top: calc(80rpx + env(safe-area-inset-top));
    z-index: 10;
}

.game-title {
    font-size: $font-xxl + 8rpx;
    font-weight: 900;
    color: $text-dark-main;
    text-shadow: 0 4rpx 20rpx rgba($brand-primary, 0.4);
    margin-bottom: $spacing-xxl;
    letter-spacing: 6rpx;
}

// =====================================
// 匹配卡片
// =====================================
.match-box {
    width: 100%;
    padding: $spacing-xxl $spacing-lg;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: $spacing-lg;
}

// 扫描器动画
.scanner-box {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    margin-bottom: $spacing-xl;
    display: flex;
    justify-content: center;
    align-items: center;

    // 外圈脉冲
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        border: 2rpx solid rgba($brand-primary, 0.4);
        border-radius: 50%;
        animation: pulse-ring 2s ease-out infinite;
    }

    // 内圈旋转
    &::after {
        content: '';
        position: absolute;
        inset: 20rpx;
        border: 3rpx dashed rgba($brand-primary, 0.6);
        border-radius: 50%;
        animation: rotate 6s linear infinite;
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

// 扫描线
.scanner-line {
    position: absolute;
    width: 100%;
    height: 3rpx;
    background: linear-gradient(90deg, transparent, $brand-primary, transparent);
    animation: scan 2s linear infinite;
    top: 0;
}

@keyframes scan {
    0% {
        top: 0%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.match-spinner {
    font-size: 90rpx;
    z-index: 10;
    filter: drop-shadow(0 0 20rpx rgba($brand-primary, 0.4));
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15rpx);
    }
}

.match-status {
    font-size: $font-lg;
    font-weight: 700;
    color: $brand-primary;
    margin-bottom: $spacing-xl;
}

.match-info {
    width: 100%;
}

.timer-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: $spacing-md;
    margin-bottom: $spacing-lg;
}

.timer-label {
    font-size: $font-sm;
    color: $text-dark-sub;
}

.timer-value {
    font-size: 56rpx;
    font-weight: 900;
    color: $text-dark-main;
}

.status-tip {
    text-align: center;
    margin-bottom: $spacing-xl;
    height: 40rpx;

    text {
        font-size: $font-sm;
    }
}

.tip-normal {
    color: $color-success;
}

.tip-warning {
    color: $color-warning;
}

.tip-error {
    color: $color-error;
    animation: blink 1s ease-in-out infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.cancel-btn {
    height: 88rpx;
    font-size: $font-md;
    background: transparent;
    border: 1px solid $border-dark;
    border-radius: $radius-round;
    color: $text-dark-sub;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all $transition-normal $ease-out;

    &:active {
        background: rgba(255, 255, 255, 0.05);
    }
}

// =====================================
// 开始匹配区域
// =====================================
.start-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-intro-card {
    width: 100%;
    padding: $spacing-xl;
    margin-bottom: $spacing-xxl;
    display: flex;
    flex-direction: column;
    gap: $spacing-lg;
}

.intro-item {
    display: flex;
    align-items: center;
    gap: $spacing-lg;
}

.intro-icon {
    font-size: 40rpx;
}

.intro-text {
    font-size: $font-md;
    color: $text-dark-main;
    font-weight: 500;
}

// 按钮使用全局定义
.start-btn {
    width: 380rpx;
    height: 100rpx;
    font-size: $font-lg;
    margin-bottom: $spacing-xxl;
}

.btn-text {
    color: $text-inverse;
}

// =====================================
// 日志区域 - 终端风格
// =====================================
.log-section {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200rpx;
}

.log-header {
    padding: $spacing-md $spacing-lg;
    border-bottom: 1px solid $border-dark;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.log-title {
    font-size: $font-xxs;
    color: $text-dark-sub;
    text-transform: uppercase;
    letter-spacing: 4rpx;
}

.online-indicator {
    width: 12rpx;
    height: 12rpx;
    background: $color-success;
    border-radius: 50%;
    box-shadow: 0 0 10rpx $color-success;
}

.mini-logs {
    flex: 1;
    padding: $spacing-md;
}

.log-item {
    font-size: $font-xs;
    line-height: 1.8;
    margin-bottom: $spacing-xs;
    display: flex;
    gap: $spacing-sm;
}

.log-time {
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.log-content {
    word-break: break-all;
}

.log-system .log-content {
    color: $accent-cyan;
}

.log-effect .log-content {
    color: $brand-primary;
}

.log-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: $font-sm;
    font-style: italic;
}

// =====================================
// 游戏主界面
// =====================================
.game-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $spacing-md $spacing-lg;
    background: $bg-dark-card;
    backdrop-filter: blur(20rpx);
    padding-top: calc($spacing-md + env(safe-area-inset-top));
    border-bottom: 1px solid $border-dark;
}

.header-actions {
    display: flex;
    gap: $spacing-md;
}

.header-title {
    font-size: $font-lg;
    font-weight: 800;
    color: $text-dark-main;
}

.round-badge {
    background: rgba($brand-primary, 0.2);
    color: $brand-primary;
    padding: $spacing-xs $spacing-md;
    border-radius: $radius-round;
    font-size: $font-xs;
    font-weight: bold;
}

.game-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.btn-icon {
    width: 56rpx;
    height: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: $font-lg;
    background: rgba(255, 255, 255, 0.05);
    border-radius: $radius-md;

    &.active {
        background: rgba($brand-primary, 0.2);
    }
}

// =====================================
// 对手栏
// =====================================
.opponents-bar {
    height: 140rpx;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid $border-dark;
}

.opponents-list {
    display: flex;
    padding: $spacing-md;
    gap: $spacing-md;
}

.player-card {
    min-width: 200rpx;
    height: 100rpx;
    background: $bg-dark-card;
    border: 1px solid $border-dark;
    border-radius: $radius-md;
    padding: $spacing-sm $spacing-md;
    display: flex;
    align-items: center;
    position: relative;
    transition: all $transition-normal;

    &.me {
        background: rgba($brand-primary, 0.1);
        border-color: rgba($brand-primary, 0.3);
    }

    &.active-turn {
        border-color: $brand-primary;
        box-shadow: 0 0 20rpx rgba($brand-primary, 0.3);
    }

    &.damaged {
        animation: shake 0.5s ease-in-out;
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5rpx);
    }

    75% {
        transform: translateX(5rpx);
    }
}

.avatar {
    font-size: 44rpx;
    margin-right: $spacing-sm;

    &.lg {
        font-size: 56rpx;
    }
}

.player-info {
    display: flex;
    flex-direction: column;
    gap: 4rpx;
}

.username {
    font-size: $font-sm;
    color: $text-dark-main;
    font-weight: 600;
}

.hp-bar {
    display: flex;
    gap: 2rpx;
}

.heart {
    font-size: 18rpx;
}

.status-icons {
    display: flex;
    gap: 4rpx;

    .icon {
        font-size: 16rpx;
    }
}

// =====================================
// 棋盘区域
// =====================================
.board-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: $spacing-lg;
}

.turn-indicator {
    display: flex;
    gap: $spacing-md;
    margin-bottom: $spacing-md;
}

.turn-badge {
    padding: $spacing-sm $spacing-lg;
    background: $bg-dark-card;
    border: 1px solid $border-dark;
    border-radius: $radius-round;
    font-size: $font-md;
    font-weight: 600;
    color: $text-dark-sub;

    &.my-turn {
        background: rgba($brand-primary, 0.15);
        border-color: $brand-primary;
        color: $brand-primary;
    }
}

.timer-badge {
    padding: $spacing-sm $spacing-md;
    background: $bg-dark-card;
    border-radius: $radius-round;
    font-size: $font-md;
    font-weight: 700;
    color: $text-dark-main;

    &.urgent {
        color: $color-error;
        animation: blink 0.5s ease-in-out infinite;
    }
}

.timer-progress-bg {
    width: 660rpx;
    height: 6rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3rpx;
    margin-bottom: $spacing-md;
    overflow: hidden;
}

.timer-progress-fill {
    height: 100%;
    border-radius: 3rpx;
    transition: width 1s linear;

    &.bg-green {
        background: $color-success;
    }

    &.bg-yellow {
        background: $color-warning;
    }

    &.bg-red {
        background: $color-error;
    }
}

.grid-board {
    display: grid;
    gap: 6rpx;
    width: 660rpx;
    height: 660rpx;
    padding: $spacing-sm;
    background: $bg-dark-card;
    border-radius: $radius-lg;
    border: 1px solid $border-dark;
}

.grid-cell {
    background: rgba(255, 255, 255, 0.08);
    border-radius: $radius-sm;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all $transition-fast;
    position: relative;

    &:active {
        transform: scale(0.95);
    }

    &.revealed {
        background: rgba(0, 0, 0, 0.3);
    }

    &.type-bomb {
        background: rgba($color-error, 0.2);
    }

    &.has-magnifier {
        border: 2rpx dashed rgba($accent-cyan, 0.5);
    }
}

.cell-icon {
    font-size: 32rpx;
}

.cell-num {
    font-size: $font-lg;
    font-weight: 900;
}

.magnifier-mark {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .magnifier-content {
        font-size: 28rpx;
        opacity: 0.8;
    }

    .magnifier-badge {
        position: absolute;
        top: 2rpx;
        right: 2rpx;
        font-size: 16rpx;
    }
}

// =====================================
// 底部面板
// =====================================
.bottom-panel {
    padding: $spacing-md;
    padding-bottom: calc($spacing-md + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    gap: $spacing-md;
    border-top: 1px solid $border-dark;
}

.game-logs {
    flex: 1;
    max-height: 140rpx;
    padding: $spacing-sm;
    background: rgba(0, 0, 0, 0.3);
    border-radius: $radius-md;
}

.log-line {
    font-size: $font-xxs;
    line-height: 1.6;
    color: $text-dark-sub;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &.log-system {
        color: $accent-cyan;
    }

    &.log-effect {
        color: $brand-primary;
    }
}

// =====================================
// 弹窗
// =====================================
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10rpx);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    width: 520rpx;
    padding: $spacing-xxl $spacing-xl;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $spacing-lg;
}

.modal-emoji {
    font-size: 100rpx;
}

.modal-title {
    font-size: 40rpx;
    font-weight: 900;
    color: $text-dark-main;
}

// =====================================
// 玩法说明弹窗
// =====================================
.guide-modal {
    width: 90%;
    max-width: 640rpx;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.guide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $spacing-lg;
    border-bottom: 1px solid $border-dark;
}

.guide-title {
    font-size: $font-lg;
    font-weight: 800;
    color: $text-dark-main;
}

.close-btn {
    width: 56rpx;
    height: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: $font-lg;
    color: $text-dark-sub;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.guide-body {
    padding: $spacing-lg;
    max-height: 60vh;
}

.section-title {
    display: block;
    font-size: $font-md;
    font-weight: 700;
    color: $brand-primary;
    margin-bottom: $spacing-md;
}

.guide-grid {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
}

.guide-item {
    display: flex;
    align-items: flex-start;
    gap: $spacing-md;
    padding: $spacing-sm;
    background: rgba(255, 255, 255, 0.03);
    border-radius: $radius-md;

    .icon {
        font-size: 32rpx;
        flex-shrink: 0;
    }

    .desc {
        display: flex;
        flex-direction: column;
        gap: 4rpx;
    }

    .name {
        font-size: $font-sm;
        font-weight: 600;
        color: $text-dark-main;
    }

    .detail {
        font-size: $font-xs;
        color: $text-dark-sub;
        line-height: 1.5;
    }
}

// =====================================
// 飘字动画
// =====================================
.float-label {
    position: absolute;
    font-size: $font-md;
    font-weight: 900;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    z-index: 100;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.8);

    &.global {
        position: fixed;
    }

    &.text-damage {
        color: $color-error;
    }

    &.text-heal {
        color: $color-success;
    }

    &.text-effect {
        color: $accent-cyan;
    }
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-60rpx) scale(0.8);
    }
}

// =====================================
// 屏幕震动 & 通用动画
// =====================================
.screen-shake {
    animation: screenShake 0.4s ease-in-out;
}

@keyframes screenShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8rpx);
    }

    40% {
        transform: translateX(8rpx);
    }

    60% {
        transform: translateX(-4rpx);
    }

    80% {
        transform: translateX(4rpx);
    }
}

.fadeInUp {
    animation: fadeInUp 0.5s ease-out both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40rpx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.03);
        opacity: 1;
    }
}