/* ========================================
   Pixel Breakout - 主样式表
   复古FC像素风 + 现代UI
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #0a0a15;
    font-family: 'VT323', 'Courier New', monospace;
    color: #fff;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, #1a1a3e 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, #2e1a3e 0%, transparent 50%),
        #0a0a15;
}

#game-wrapper {
    position: relative;
    /* 宽度：手机100vw占满 / PC和大屏限定最大480px；再按2/3比例限制高度防溢出 */
    width: min(480px, 100vw, calc(100vh * 2 / 3));
    /* dvh适配移动端动态工具栏 */
    width: min(480px, 100vw, calc(100dvh * 2 / 3));
    aspect-ratio: 2 / 3;
    background: #000;
    border: 4px solid #2a2a4a;
    border-radius: 8px;
    box-shadow:
        0 0 40px rgba(0, 198, 255, 0.2),
        0 0 80px rgba(114, 0, 255, 0.1),
        inset 0 0 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* 我的世界模式单独放宽 wrapper 让整体更好看 —— 只在该屏幕激活时生效，而且保持横纵比防拉伸 */
body.has-minecraft-active #game-wrapper {
    width: min(620px, 96vw, calc(100dvh * 1.1));
    aspect-ratio: auto;
    height: min(820px, 96dvh);
}

/* 当屏幕比 wrapper 还小：强制 wrapper 占满视口，绝不溢出 */
@media (max-width: 560px), (max-height: 740px) {
    #game-wrapper {
        width: 100vw;
        width: 100dvw;
        height: 100vh;
        height: 100dvh;
        aspect-ratio: auto;
        border-radius: 0;
        border: none;
    }
    body.has-minecraft-active #game-wrapper {
        width: 100vw;
        width: 100dvw;
        height: 100vh;
        height: 100dvh;
    }
}

#game-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 9998;
}

#game-canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background: #0f0f1f;
    touch-action: none;
}

/* ========================================
   屏幕/面板通用
   ======================================== */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 10, 21, 0.95);
    z-index: 100;
    backdrop-filter: blur(4px);
}

.screen.active {
    display: flex;
}

.screen.overlay {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.screen-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #2a2a4a;
}

.screen-header h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 16px;
    color: #00c6ff;
    text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
    letter-spacing: 1px;
}

/* ========================================
   像素风按钮
   ======================================== */
.btn-pixel {
    display: inline-block;
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #fff;
    background: #2a2a4a;
    border: 3px solid #4a4a6a;
    border-radius: 2px;
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.1s;
    position: relative;
    box-shadow:
        inset -3px -3px 0 0 rgba(0, 0, 0, 0.3),
        inset 3px 3px 0 0 rgba(255, 255, 255, 0.1);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.btn-pixel:hover {
    background: #3a3a5a;
    border-color: #6a6a8a;
    transform: translateY(-1px);
    box-shadow:
        inset -3px -3px 0 0 rgba(0, 0, 0, 0.3),
        inset 3px 3px 0 0 rgba(255, 255, 255, 0.15),
        0 4px 12px rgba(0, 198, 255, 0.2);
}

.btn-pixel:active {
    transform: translateY(1px);
    box-shadow:
        inset 3px 3px 0 0 rgba(0, 0, 0, 0.3),
        inset -3px -3px 0 0 rgba(255, 255, 255, 0.05);
}

.btn-pixel.btn-primary {
    background: linear-gradient(180deg, #00a6ff 0%, #0066cc 100%);
    border-color: #00c6ff;
    box-shadow:
        inset -3px -3px 0 0 rgba(0, 0, 0, 0.3),
        inset 3px 3px 0 0 rgba(255, 255, 255, 0.2),
        0 0 20px rgba(0, 198, 255, 0.4);
}

.btn-pixel.btn-primary:hover {
    background: linear-gradient(180deg, #00c6ff 0%, #0088ee 100%);
    box-shadow:
        inset -3px -3px 0 0 rgba(0, 0, 0, 0.3),
        inset 3px 3px 0 0 rgba(255, 255, 255, 0.25),
        0 0 30px rgba(0, 198, 255, 0.6);
}

.btn-pixel.btn-small {
    font-size: 9px;
    padding: 8px 12px;
}

.btn-pixel.btn-back {
    background: #1a1a2e;
    border-color: #3a3a4a;
}

.btn-pixel.btn-danger {
    background: linear-gradient(180deg, #ff4444 0%, #cc0000 100%);
    border-color: #ff6666;
}

.btn-pixel.btn-toggle {
    padding: 8px 16px;
    min-width: 60px;
}

.btn-pixel.btn-toggle[data-on="true"] {
    background: linear-gradient(180deg, #22cc66 0%, #118844 100%);
    border-color: #44ee88;
}

.btn-pixel.btn-toggle[data-on="false"] {
    background: #442222;
    border-color: #664444;
    color: #aa8888;
}

/* ========================================
   主菜单
   ======================================== */
.menu-title {
    text-align: center;
    margin-bottom: 40px;
}

.title-pixel {
    display: block;
    font-family: 'Press Start 2P', monospace;
    font-size: 28px;
    background: linear-gradient(180deg, #ffee44 0%, #ff8800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 10px rgba(255, 200, 0, 0.5));
    margin-bottom: 4px;
    letter-spacing: 2px;
}

.title-break {
    display: block;
    font-family: 'Press Start 2P', monospace;
    font-size: 32px;
    background: linear-gradient(180deg, #00eeff 0%, #0088ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(0, 198, 255, 0.5));
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.title-sub {
    font-family: 'VT323', monospace;
    font-size: 24px;
    color: #aaaacc;
    letter-spacing: 4px;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 320px;
}

.menu-highscore {
    margin-top: 30px;
    padding: 14px 28px;
    background: rgba(42, 42, 74, 0.6);
    border: 2px solid #4a4a6a;
    border-radius: 4px;
    text-align: center;
}

.menu-highscore .label {
    display: block;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #8888aa;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.menu-highscore .value {
    font-family: 'Press Start 2P', monospace;
    font-size: 20px;
    color: #ffee44;
    text-shadow: 0 0 8px rgba(255, 200, 0, 0.5);
}

/* ========================================
   关卡选择
   ======================================== */
#screen-levelselect {
    justify-content: flex-start;
    padding-top: 20px;
}

.level-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    width: 100%;
    max-height: 580px;
    overflow-y: auto;
    padding: 10px;
}

.level-btn {
    aspect-ratio: 1;
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    color: #fff;
    background: #2a2a4a;
    border: 3px solid #4a4a6a;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
    position: relative;
}

.level-btn:hover:not(:disabled) {
    background: #3a3a6a;
    border-color: #00c6ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 198, 255, 0.3);
}

.level-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #1a1a2a;
}

.level-btn.cleared {
    background: linear-gradient(180deg, #226633 0%, #114422 100%);
    border-color: #44aa66;
}

.level-btn.boss {
    background: linear-gradient(180deg, #662233 0%, #441122 100%);
    border-color: #aa4466;
}

.level-btn .level-stars {
    position: absolute;
    bottom: 4px;
    font-size: 8px;
    color: #ffcc00;
    letter-spacing: -1px;
}

.level-btn .level-lock {
    font-size: 16px;
}

/* ========================================
   操作说明
   ======================================== */
#screen-howto {
    justify-content: flex-start;
    padding-top: 20px;
}

.howto-content {
    width: 100%;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 10px;
}

.howto-section {
    margin-bottom: 24px;
    padding: 14px;
    background: rgba(42, 42, 74, 0.5);
    border: 2px solid #3a3a5a;
    border-radius: 4px;
}

.howto-section h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #00c6ff;
    margin-bottom: 12px;
}

.howto-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
    font-family: 'VT323', monospace;
    font-size: 18px;
    color: #ccccdd;
}

.key {
    display: inline-block;
    min-width: 60px;
    padding: 4px 10px;
    background: #1a1a2e;
    border: 2px solid #4a4a6a;
    border-radius: 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: #ffee44;
    text-align: center;
}

/* 道具图例 */
.powerup-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.pu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    font-family: 'VT323', monospace;
    font-size: 16px;
}

.pu-item.pu-good { background: rgba(34, 102, 51, 0.3); }
.pu-item.pu-bad { background: rgba(102, 34, 51, 0.3); }

.pu-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    border-radius: 4px;
    font-weight: bold;
}

.pu-good .pu-icon { background: linear-gradient(180deg, #44cc88, #228844); color: #fff; }
.pu-bad .pu-icon { background: linear-gradient(180deg, #cc4466, #882244); color: #fff; }

/* 砖块图例 */
.brick-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.br-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: #ccccdd;
}

.br-icon {
    display: inline-block;
    width: 40px;
    height: 20px;
    border-radius: 2px;
    border: 2px solid rgba(255,255,255,0.3);
}

.br-icon.br-normal { background: linear-gradient(180deg, #dd4444, #aa2222); }
.br-icon.br-metal { background: linear-gradient(180deg, #888888, #555555); border-color: #aaaaaa; }
.br-icon.br-explosive { background: linear-gradient(180deg, #ff8800, #cc4400); box-shadow: 0 0 8px #ff6600; }
.br-icon.br-power { background: linear-gradient(180deg, #aa44ff, #6622cc); box-shadow: 0 0 8px #aa44ff; }
.br-icon.br-boss { background: linear-gradient(180deg, #ff0066, #aa0044); box-shadow: 0 0 8px #ff0066; }

/* ========================================
   设置界面
   ======================================== */
#screen-settings {
    justify-content: flex-start;
    padding-top: 20px;
}

.settings-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    background: rgba(42, 42, 74, 0.5);
    border: 2px solid #3a3a5a;
    border-radius: 4px;
    margin-bottom: 8px;
}

.setting-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: #ccccdd;
}

.setting-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.setting-control input[type="range"] {
    width: 120px;
    height: 8px;
    accent-color: #00c6ff;
}

.setting-control select {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
}

.danger-zone {
    border-color: #663333;
    background: rgba(74, 32, 32, 0.3);
}

/* ========================================
   暂停 / 结算面板
   ======================================== */
.pause-panel, .result-panel {
    background: #1a1a2e;
    border: 4px solid #4a4a6a;
    border-radius: 8px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}

.pause-panel h2, .result-panel h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 20px;
    text-align: center;
    margin-bottom: 24px;
    color: #00c6ff;
    text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
}

.gameover-panel h2.gameover-title {
    color: #ff4466;
    text-shadow: 0 0 10px rgba(255, 68, 102, 0.5);
    animation: gameover-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes gameover-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

.result-stats {
    margin-bottom: 20px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-family: 'VT323', monospace;
    font-size: 18px;
    color: #aaaacc;
}

.stat-row span:last-child {
    color: #ffee44;
    font-weight: bold;
}

.stat-row.stat-total {
    border-top: 2px dashed #4a4a6a;
    margin-top: 8px;
    padding-top: 12px;
    font-size: 22px;
}

.stat-row.stat-total span:last-child {
    color: #00ffaa;
    font-size: 24px;
}

.result-stars {
    text-align: center;
    font-size: 36px;
    margin-bottom: 20px;
    color: #ffcc00;
    text-shadow: 0 0 15px rgba(255, 200, 0, 0.8);
    letter-spacing: 4px;
}

/* ========================================
   响应式 / 移动端
   ======================================== */
@media (max-width: 520px) {
    #game-wrapper {
        border-radius: 0;
        border: none;
    }

    .menu-buttons {
        max-width: 90%;
    }

    .level-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .title-pixel { font-size: 20px; }
    .title-break { font-size: 24px; }
    .title-sub { font-size: 18px; }

    .powerup-legend {
        grid-template-columns: 1fr;
    }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #4a4a6a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6a6a8a;
}

/* ========================================
   🧱 我的世界模式 (Minecraft Mode)
   ======================================== */
.minecraft-screen {
    flex-direction: column;
    padding: 10px 10px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, #101827 0%, #0c1220 100%);
    display: none;
    /* 保证在任何屏幕高度都能完整看到，并可平滑下滑 */
    max-height: 100%;
    height: 100%;
}
.minecraft-screen.active {
    display: flex;
}
.mc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.mc-header h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: #00e5ff;
    text-shadow: 0 0 8px rgba(0,229,255,0.55);
}
.btn-mc {
    background: linear-gradient(180deg, #3b7a2a, #2e6023) !important;
    border-color: #6fbf4b !important;
    color: #e8ffe0 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.btn-mc:hover {
    background: linear-gradient(180deg, #4c9636, #377527) !important;
}

/* 工具栏画笔按钮 */
.mc-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    padding: 6px 6px;
    background: rgba(0,0,0,0.35);
    border: 2px solid #2a2a4a;
    border-radius: 6px;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.mc-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #a0aacc;
    margin-right: 4px;
}
.mc-brush {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #1a1a2e;
    border: 2px solid #2a2a4a;
    border-radius: 4px;
    color: #ecf0f1;
    padding: 4px 3px;
    min-width: 42px;
    cursor: pointer;
    transition: all .12s;
}
.mc-brush span:last-child {
    font-family: 'Press Start 2P', monospace;
    font-size: 6.5px;
    color: #c0cce0;
}
.mc-brush:hover {
    transform: translateY(-1px);
    border-color: #4a4a6a;
}
.mc-brush.active {
    border-color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    background: #0e2a3a;
}
.br-swatch {
    display: inline-block;
    width: 22px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.25);
    line-height: 14px;
    text-align: center;
    font-size: 10px;
    color: #fff;
    text-shadow: 0 1px 0 #000;
}
.sw-erase {
    background: repeating-linear-gradient(45deg, #222 0 3px, #111 3px 6px);
    color: #e74c3c;
    font-weight: 900;
}
.sw-1 { background: #e94560; }
.sw-2 { background: #f39c12; }
.sw-3 { background: #f1c40f; }
.sw-4 { background: #2ecc71; }
.sw-5 { background: #3498db; }
.sw-metal {
    background: repeating-linear-gradient(90deg, #7f8c8d 0 4px, #95a5a6 4px 8px);
}
.sw-explode { background: #ff6b35; }
.sw-item { background: #9b59b6; }
.sw-boss {
    background: linear-gradient(180deg, #e74c3c 0%, #962d22 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
}

/* 编辑器主体 */
.mc-body {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    align-items: flex-start;
}
.mc-editor-wrap {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
#mc-editor-canvas {
    width: 100%;
    /* 画布改成 2:3 竖向比例（和真实游戏画面完全一致），让玩家一眼知道效果 */
    max-width: 360px;
    aspect-ratio: 2 / 3;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 40px),
        #0a0f1e;
    border: 3px solid #2a2a4a;
    border-radius: 6px;
    image-rendering: pixelated;
    touch-action: none;
}
/* 砖块类型图例：告诉玩家"画的每种砖会产生什么效果" */
.mc-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 10px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.3);
    border: 2px solid #2a2a4a;
    border-radius: 5px;
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
}
.mc-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 13px;
    color: #dce3f2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-legend-dot {
    width: 12px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.35);
    flex-shrink: 0;
}
@media (max-width: 400px) {
    .mc-legend { grid-template-columns: 1fr; }
    .mc-legend-item { font-size: 12px; }
}
.mc-editor-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

/* 右侧难度选项 */
.mc-options {
    flex: 1 1 42%;
    min-width: 0;
    background: rgba(0,0,0,0.35);
    border: 2px solid #2a2a4a;
    border-radius: 6px;
    padding: 8px 10px 10px;
    overflow-y: auto;
    max-height: 100%;
}
.mc-options h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    margin-bottom: 8px;
    color: #f1c40f;
    text-align: center;
    text-shadow: 0 0 6px rgba(241,196,15,0.45);
}
.mc-slider-row {
    margin-bottom: 8px;
}
.mc-slider-row > label {
    display: block;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #c0cce0;
    margin-bottom: 3px;
}
.mc-slider-body {
    display: flex;
    gap: 5px;
    align-items: center;
}
.mc-slider-body input[type="range"] {
    flex: 1;
    accent-color: #00c6ff;
    min-width: 0;
}
.mc-val {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #00e5ff;
    min-width: 40px;
    text-align: right;
    flex-shrink: 0;
}
.mc-toggle-row {
    margin-bottom: 6px;
}
.mc-toggle-row > label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 15px;
    color: #dce3f2;
    cursor: pointer;
}
.mc-toggle-row input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: #00c6ff;
    flex-shrink: 0;
}
.mc-sleep-mode {
    margin-top: 10px;
}
.btn-sleep {
    width: 100%;
    padding: 8px 8px 10px !important;
    font-size: 10px !important;
    background: linear-gradient(180deg, #4a3a7a, #2a1f4a) !important;
    border-color: #8a6fe0 !important;
    color: #ffeaff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    box-shadow: 0 0 12px rgba(138,111,224,0.4) inset;
    line-height: 1.35 !important;
    flex-direction: column;
    display: flex !important;
    align-items: center;
    gap: 2px;
}
.btn-sleep small {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 13px;
    opacity: 0.85;
    color: #ffeaff;
    font-weight: 400;
}

/* 我的世界模式在竖屏/小屏手机上自动堆叠：编辑器在上方，难度选项在下方，canvas 略小让整体更少滚动 */
@media (max-aspect-ratio: 4/3), (max-width: 680px) {
    .mc-body {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .mc-editor-wrap {
        flex: 0 0 auto;
        width: 100%;
    }
    #mc-editor-canvas {
        max-width: 320px;
    }
    .mc-options {
        flex: 1 1 auto;
        width: 100%;
        max-height: none;
    }
}

/* 更窄的屏（<380px 老手机）：canvas 再收一点 + 按钮高度更小，防边缘看不到 */
@media (max-width: 400px) {
    .minecraft-screen {
        padding: 8px 8px 10px;
    }
    .mc-header h2 {
        font-size: 9.5px;
    }
    #mc-editor-canvas {
        max-width: 260px;
    }
    .mc-brush {
        min-width: 38px;
        padding: 3px 2px;
    }
    .mc-brush .br-swatch {
        width: 20px;
        height: 12px;
    }
    .mc-brush span:last-child {
        font-size: 6px;
    }
    .btn-sleep {
        padding: 7px 6px 9px !important;
        font-size: 9px !important;
    }
    .btn-sleep small {
        font-size: 12px;
    }
}

/* PC大屏保护：防止wrapper横向过宽导致画面巨大，canvas 仍最大360 */
@media (min-width: 800px) {
    #mc-editor-canvas {
        max-width: 360px;
    }
}

/* 我的世界模式：游戏中浮动编辑按钮 */
.mc-floating-btn {
    position: absolute;
    top: 42px;
    right: 8px;
    z-index: 50;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    padding: 5px 7px;
    background: linear-gradient(180deg, #3b7a2a, #2e6023);
    border: 2px solid #6fbf4b;
    color: #e8ffe0;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
    user-select: none;
}
.mc-floating-btn:hover {
    background: linear-gradient(180deg, #4c9636, #377527);
}
.mc-floating-btn:active {
    transform: translateY(1px);
}

/* 我的世界模式：保存/加载地图列表 */
.mc-maps-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #2a2a4a;
}
.mc-maps-section h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    margin-bottom: 6px;
    color: #ffb347;
    text-align: center;
    text-shadow: 0 0 4px rgba(255,179,71,0.4);
}
.mc-map-save-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}
.mc-map-save-row input {
    flex: 1;
    min-width: 0;
    padding: 5px 6px;
    font-family: 'VT323', monospace;
    font-size: 15px;
    background: #101024;
    color: #f0f0ff;
    border: 2px solid #2a2a4a;
    border-radius: 3px;
    outline: none;
}
.mc-map-save-row input:focus {
    border-color: #6fbf4b;
}
.mc-map-list {
    max-height: 150px;
    overflow-y: auto;
    background: rgba(0,0,0,0.3);
    border: 1px solid #2a2a4a;
    border-radius: 4px;
    padding: 3px;
}
.mc-map-empty {
    text-align: center;
    color: #667;
    font-family: 'VT323', monospace;
    font-size: 14px;
    padding: 10px 2px;
}
.mc-map-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 5px;
    margin-bottom: 3px;
    background: rgba(255,255,255,0.04);
    border: 1px solid #2a2a4a;
    border-radius: 3px;
}
.mc-map-item:last-child {
    margin-bottom: 0;
}
.mc-map-name {
    flex: 1;
    min-width: 0;
    font-family: 'VT323', monospace;
    font-size: 16px;
    color: #d0e0ff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-map-date {
    font-family: 'VT323', monospace;
    font-size: 12px;
    color: #8888aa;
    flex-shrink: 0;
    margin-right: 4px;
}
.mc-map-btns {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.mc-map-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    padding: 3px 5px;
    border: 2px solid #3a3a5a;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    background: #1a1a2e;
}
.mc-map-btn.load {
    border-color: #6fbf4b;
    background: linear-gradient(180deg, #3b7a2a, #2e6023);
}
.mc-map-btn.del {
    border-color: #c0392b;
    background: linear-gradient(180deg, #922b21, #641e16);
}
.mc-map-btn:hover {
    filter: brightness(1.2);
}