/* ===== 超级马里奥页面样式 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
[v-cloak] { display: none !important; }
html, body {
    height: 100%;
    background: linear-gradient(160deg, #0d2b1a, #0a1f14 55%, #071710);
    color: #eafff0;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }

#mario-app {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
}

/* ===== 加载 ===== */
.mario-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 24px;
}
.mario-loading h2 { color: #ffd700; font-size: 26px; }
.mario-loading p { color: rgba(234,255,240,0.7); font-size: 15px; line-height: 1.8; }
.mario-spinner {
    width: 44px; height: 44px;
    border: 4px solid rgba(255,255,255,0.1);
    border-top-color: #ffd700;
    border-radius: 50%;
    animation: marioSpin 0.8s linear infinite;
}
@keyframes marioSpin { to { transform: rotate(360deg); } }

/* ===== 通用按钮 ===== */
.mario-btn {
    padding: 10px 22px;
    border-radius: 12px;
    border: 1px solid rgba(255,215,0,0.4);
    background: rgba(255,215,0,0.12);
    color: #ffd700;
    font-size: 15px;
    font-weight: 700;
    transition: transform .1s, background .2s;
}
.mario-btn:active { transform: scale(0.95); }
.mario-btn.small { padding: 6px 14px; font-size: 13px; }

/* ===== 地图页 ===== */
.mario-map {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    overflow-y: auto;
}
.mario-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0 14px;
}
.mario-header h1 { font-size: 26px; color: #ffd700; letter-spacing: 2px; }
.mario-user { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avatar-circle {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    border: 2px solid rgba(255,215,0,0.5);
}
.username { font-weight: 700; }
.lvl-badge {
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(255,215,0,0.12);
    border: 1px solid rgba(255,215,0,0.35);
    color: #ffd700;
    font-size: 12px;
    white-space: nowrap;
}
.gold-display {
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(255,180,40,0.12);
    color: #ffcf5c;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.mario-tip { color: rgba(234,255,240,0.55); font-size: 13px; margin: 4px 0 16px; }

.mario-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.mario-theme-card {
    position: relative;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(30,70,45,0.6), rgba(15,40,28,0.7));
    border: 1px solid rgba(90,200,140,0.3);
    text-align: center;
    transition: transform .15s, box-shadow .2s;
    cursor: pointer;
}
.mario-theme-card:hover:not(.locked) {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(50,180,120,0.15);
}
.mario-theme-card.locked { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }
.mario-theme-icon { font-size: 52px; margin-bottom: 8px; }
.mario-theme-card h3 { color: #7CFFB0; font-size: 19px; margin-bottom: 12px; }
.progress-text { color: rgba(234,255,240,0.6); font-size: 13px; margin-top: 10px; }
.lock-icon {
    position: absolute;
    top: 10px; right: 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    background: rgba(0,0,0,0.35);
    padding: 3px 8px;
    border-radius: 10px;
}

.mario-level-dots { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.mario-level-dot {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    color: rgba(234,255,240,0.6);
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.12);
}
.mario-level-dot.done { background: rgba(124,255,176,0.2); color: #7CFFB0; border-color: rgba(124,255,176,0.4); }

.mario-map-footer {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    padding-bottom: 16px;
    flex-wrap: wrap;
}

/* ===== 关卡选择 ===== */
.mario-level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
}
.mario-level-btn {
    padding: 18px 12px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(40,90,60,0.55), rgba(20,55,38,0.65));
    border: 1px solid rgba(90,200,140,0.3);
    text-align: center;
    cursor: pointer;
    transition: transform .1s;
}
.mario-level-btn:active:not(.locked) { transform: scale(0.95); }
.mario-level-btn.locked { opacity: 0.4; cursor: not-allowed; }
.mario-level-num { font-size: 30px; font-weight: 900; color: #7CFFB0; margin-bottom: 6px; }
.mario-level-tag { font-size: 12px; color: rgba(234,255,240,0.65); }

/* ===== 游戏页 ===== */
.mario-game-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100vh;
}
.mario-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    gap: 8px;
    background: rgba(0,0,0,0.25);
    font-size: 15px;
    font-weight: 700;
    flex-wrap: wrap;
}
.mario-hud-item { color: #fff; font-variant-numeric: tabular-nums; }
.mario-hearts { letter-spacing: 2px; }
.mario-canvas-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 4px;
}
#mario-canvas {
    width: 100%;
    max-width: calc(100vh - 150px);
    max-height: calc(100vh - 150px);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    touch-action: none;
}
.mario-game-top {
    position: absolute;
    top: 46px;
    right: 12px;
    z-index: 5;
}

/* 触摸控制 */
.mario-touch {
    position: absolute;
    bottom: 12px;
    left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    pointer-events: none;
    z-index: 10;
}
.mario-touch-left, .mario-touch-right {
    display: flex;
    gap: 10px;
    pointer-events: auto;
}
.mario-touch-btn {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.mario-touch-btn:active { background: rgba(124,255,176,0.3); }
.mario-touch-btn.small { width: 46px; height: 46px; font-size: 14px; }
.mario-touch-btn.jump { background: rgba(255,215,0,0.25); border-color: #ffd700; color: #ffd700; }

/* ===== 结算层 ===== */
.mario-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(5, 15, 10, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mario-overlay-card {
    text-align: center;
    padding: 34px 40px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(20,45,30,0.96), rgba(10,25,18,0.96));
    border: 1px solid rgba(90,200,140,0.35);
    max-width: 90vw;
}
.mario-overlay-card h2 { color: #ffd700; font-size: 28px; margin-bottom: 12px; }
.mario-overlay-card p { color: rgba(234,255,240,0.8); font-size: 15px; line-height: 1.8; margin-bottom: 18px; }
.mario-overlay-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ===== 护眼强制休息锁定层（与 PvZ 页共用） ===== */
.eye-rest-lock {
    position: fixed;
    inset: 0;
    z-index: 9600;
    background: rgba(5, 15, 10, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
}
.eye-rest-card {
    text-align: center;
    padding: 40px 44px;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(20,45,30,0.95), rgba(10,25,18,0.95));
    border: 1px solid rgba(80,200,130,0.35);
    box-shadow: 0 0 60px rgba(40,180,110,0.15);
    max-width: 90vw;
}
.eye-rest-icon { font-size: 56px; margin-bottom: 10px; }
.eye-rest-card h2 { color: #ffd700; font-size: 26px; margin: 0 0 14px; letter-spacing: 2px; }
.eye-rest-card p { color: rgba(235,255,240,0.75); font-size: 15px; line-height: 1.9; margin: 0 0 16px; }
.eye-rest-card p b { color: #ffd700; }
.eye-rest-countdown {
    font-size: 64px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #7CFFB0;
    text-shadow: 0 0 24px rgba(60,255,160,0.35);
    margin: 6px 0 18px;
    animation: marioRestPulse 1.2s ease-in-out infinite;
}
.eye-rest-tip { font-size: 13px !important; color: rgba(200,240,215,0.5) !important; margin: 0 !important; }
@keyframes marioRestPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }

/* ===== 移动端适配 ===== */
@media (max-width: 700px) {
    .mario-map { padding: 14px; }
    .mario-header h1 { font-size: 20px; }
    .mario-theme-grid { grid-template-columns: 1fr; }
    .mario-level-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}

/* ===== 操作说明卡片 ===== */
.mario-help {
    max-width: 900px; margin: 0 auto 14px; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(120,220,160,0.28); border-radius: 12px; overflow: hidden;
}
.mario-help-head {
    padding: 10px 16px; font-size: 15px; font-weight: 700; color: #b8f0c8;
    cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center;
}
.mario-help-head:hover { background: rgba(120,220,160,0.10); }
.mario-help-arrow { font-size: 12px; color: rgba(184,240,200,0.6); }
.mario-help-body {
    padding: 4px 16px 14px; display: grid; gap: 12px;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(120,220,160,0.18);
}
.mario-help-col h4 {
    margin: 10px 0 6px; font-size: 13px; color: #8fe0ad; font-weight: 700;
}
.mario-help-col p {
    margin: 3px 0; font-size: 12.5px; line-height: 1.65; color: rgba(235,255,240,0.78);
}
.mario-help-col p b { color: #ffe08a; }
.mario-help-note { color: rgba(200,235,215,0.55) !important; font-size: 11.5px !important; }

/* 竖屏 / 窄屏：操作说明改为单列堆叠 */
@media (max-width: 700px) {
    .mario-help-body { grid-template-columns: 1fr; gap: 2px; }
    .mario-help-col h4 { margin-top: 8px; }
}
@media (orientation: portrait) and (max-width: 900px) {
    .mario-help-body { grid-template-columns: 1fr; }
}
/* ===== 技术支持署名 ===== */
.mario-footer {
    margin: 22px auto 10px; padding-top: 12px; max-width: 900px;
    border-top: 1px solid rgba(120, 220, 160, 0.14);
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center; justify-content: center;
    font-size: 12.5px; color: rgba(200, 240, 215, 0.5);
}
.mario-footer .sep { color: rgba(200, 240, 215, 0.25); }
/* ===== 竖屏适配（手机不转屏也能玩） ===== */
@media (orientation: portrait) {
    /* 触摸键从覆盖层改成独立一行，避免压在画面上；按钮也放大一点好按 */
    .mario-touch {
        position: static;
        flex: 0 0 auto;
        padding: 10px 16px 18px;
        background: rgba(0,0,0,0.32);
    }
    .mario-touch-btn { width: 66px; height: 66px; font-size: 22px; }
    .mario-touch-btn.small { width: 52px; height: 52px; font-size: 15px; }

    /* 退出按钮从绝对定位改成一行，用 order:-1 提到最上面，不占画面高度也不压住画面 */
    .mario-game-top {
        position: static;
        order: -1;
        display: flex; justify-content: flex-end;
        padding: 6px 12px 0;
    }
    .mario-canvas-wrap { padding: 6px 4px; min-height: 0; }
    #mario-canvas {
        width: 100%;
        max-width: 100%;
        max-height: none;      /* 高度由 flex 剩余空间 + aspect-ratio 决定 */
        aspect-ratio: 16 / 9;
    }
    .mario-hud { padding: 8px 12px; font-size: 13px; gap: 6px; }
    .mario-map-footer { flex-wrap: wrap; justify-content: center; }
}
/* ==================================================================
   过渡与动效（与主站同款；马里奥页只加载本文件，所以这里单独写一份）
   ================================================================== */
@keyframes viewIn {
    from { opacity: 0; transform: translateY(12px) scale(0.994); }
    to   { opacity: 1; transform: none; }
}
.view-enter { animation: viewIn 0.30s cubic-bezier(0.22, 0.8, 0.36, 1) both; }

.enter-mask {
    position: fixed; inset: 0; z-index: 9900;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 45%, rgba(30, 60, 35, 0.96), rgba(8, 16, 10, 0.99));
}
.enter-box { text-align: center; padding: 24px; }
.enter-icon { font-size: 64px; animation: enterPop 0.5s cubic-bezier(0.22, 1.4, 0.4, 1) both; }
.enter-box h2 { font-size: 22px; margin: 10px 0 6px; color: #fff; letter-spacing: 1px; }
.enter-box p { font-size: 13.5px; color: rgba(240, 255, 240, 0.55); }
.enter-bar {
    width: 180px; height: 4px; margin: 18px auto 0;
    border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden;
}
.enter-bar span {
    display: block; width: 40%; height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, #4CAF50, #FFD700);
    animation: enterSlide 0.9s ease-in-out infinite;
}
@keyframes enterPop { from { opacity: 0; transform: scale(0.5) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes enterSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
.enter-fade-enter-active, .enter-fade-leave-active { transition: opacity 0.26s ease; }
.enter-fade-enter-from, .enter-fade-leave-to { opacity: 0; }

/* 主题卡 / 关卡按钮点击手感 */
.mario-theme-card {
    transition: transform 0.22s cubic-bezier(0.22, 0.8, 0.36, 1), box-shadow 0.22s ease;
}
.mario-theme-card:not(.locked):hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4); }
.mario-theme-card:not(.locked):active { transform: translateY(-2px) scale(0.99); }
.mario-level-btn {
    transition: transform 0.18s cubic-bezier(0.22, 0.8, 0.36, 1), box-shadow 0.18s ease;
}
.mario-level-btn:not(.locked):hover { transform: translateY(-4px) scale(1.05); }
.mario-level-btn:not(.locked):active { transform: scale(0.97); }

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
    .view-enter, .enter-icon, .enter-bar span { animation: none !important; }
    .mario-theme-card, .mario-level-btn { transition: none !important; }
    .enter-fade-enter-active, .enter-fade-leave-active { transition: opacity 0.01s linear; }
}