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

    :root {
        --bg-deep: #1a1033;
        --bg-mid: #2d1b5a;
        --panel: #3d2a6c;
        --panel-dark: #231447;
        --ink: #0a0520;
        --gold: #ffd93d;
        --gold-light: #fff2a0;
        --gold-dark: #b58900;
        --green: #7cfc00;
        --green-dark: #4a8c00;
        --red: #ff4757;
        --red-dark: #b30015;
        --blue: #5fb3ff;
        --pink: #ff6b9d;
        --text: #fff5e1;
        --text-dim: #b8a8d9;
        --text-dark: #7a6aa0;
    }

    html, body { height: 100%; }
    body {
        font-family: 'Press Start 2P', 'ZCOOL KuaiLe', 'VT323', monospace;
        background: var(--bg-deep);
        color: var(--text);
        min-height: 100vh;
        overflow-x: hidden;
        position: relative;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' shape-rendering='crispEdges'><path d='M2 2h2v2H2zm2 2h2v2H4zm2 2h2v2H6zm2 2h2v2H8zm2 2h2v2h-2zm2 2h2v2h-2zm-4 0h2v2H8zm-2-2h2v2H6zm-2-2h2v2H4z' fill='%23fff5e1'/><path d='M2 0h2v2H2zm2 2h2v2H4zm2 2h2v2H6zm2 2h2v2H8zm2 2h2v2h-2zm2 2h2v2h-2zm2 2h2v2h-2z' fill='%230a0520'/></svg>") 0 0, auto;
    }

    /* 像素星空背景 */
    .stars {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
            radial-gradient(2px 2px at 20px 30px, var(--gold-light) 50%, transparent 51%),
            radial-gradient(2px 2px at 40px 70px, #fff 50%, transparent 51%),
            radial-gradient(1px 1px at 90px 40px, var(--pink) 50%, transparent 51%),
            radial-gradient(2px 2px at 130px 80px, var(--gold) 50%, transparent 51%),
            radial-gradient(1px 1px at 160px 20px, #fff 50%, transparent 51%),
            radial-gradient(2px 2px at 210px 60px, var(--blue) 50%, transparent 51%),
            radial-gradient(1px 1px at 250px 110px, #fff 50%, transparent 51%),
            radial-gradient(2px 2px at 290px 35px, var(--gold-light) 50%, transparent 51%);
        background-size: 320px 160px;
        background-repeat: repeat;
        opacity: 0.55;
        animation: starScroll 120s linear infinite;
    }
    @keyframes starScroll {
        from { background-position: 0 0; }
        to { background-position: 320px 160px; }
    }
    /* 渐变地平线 */
    .horizon {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        height: 40%;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(180deg, transparent, rgba(45,27,90,0.7) 60%, var(--bg-mid));
    }
    /* CRT 扫描线 */
    .scanlines {
        position: fixed;
        inset: 0;
        z-index: 9998;
        pointer-events: none;
        background: repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 2px,
            rgba(0, 0, 0, 0.18) 3px,
            rgba(0, 0, 0, 0.18) 4px
        );
        mix-blend-mode: multiply;
    }
    /* 轻微 CRT 屏幕弯曲暗角 */
    .vignette {
        position: fixed;
        inset: 0;
        z-index: 9997;
        pointer-events: none;
        background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.45) 100%);
    }

    /* 容器 */
    .app {
        position: relative;
        z-index: 1;
        max-width: 980px;
        margin: 0 auto;
        padding: 32px 24px 64px;
    }

    /* 像素边框工具类 —— 经典 NES 双层像素边 */
    .pixel-box {
        background: var(--panel);
        position: relative;
        padding: 20px 20px;
        box-shadow:
            0 -4px 0 0 var(--ink),
            0 4px 0 0 var(--ink),
            -4px 0 0 0 var(--ink),
            4px 0 0 0 var(--ink),
            -8px 0 0 0 var(--panel),
            8px 0 0 0 var(--panel),
            0 -8px 0 0 var(--panel),
            0 8px 0 0 var(--panel),
            -8px -4px 0 0 var(--ink),
            8px -4px 0 0 var(--ink),
            -8px 4px 0 0 var(--ink),
            8px 4px 0 0 var(--ink),
            -4px -8px 0 0 var(--ink),
            -4px 8px 0 0 var(--ink),
            4px -8px 0 0 var(--ink),
            4px 8px 0 0 var(--ink),
            inset 2px 2px 0 0 rgba(255,255,255,0.15),
            inset -2px -2px 0 0 rgba(0,0,0,0.35);
        margin: 12px 8px;
    }
    .pixel-box-inner {
        position: relative;
    }

    /* 头部 */
    .header {
        text-align: center;
        margin-bottom: 28px;
    }
    .title {
        font-family: 'Press Start 2P', monospace;
        font-size: 28px;
        color: var(--gold);
        letter-spacing: 2px;
        text-shadow:
            3px 3px 0 var(--ink),
            3px 3px 0 var(--red),
            6px 6px 0 var(--ink);
        margin-bottom: 12px;
        line-height: 1.4;
    }
    .title .cn {
        display: block;
        font-family: 'ZCOOL KuaiLe', 'Press Start 2P', monospace;
        font-size: 36px;
        color: var(--gold-light);
        margin-bottom: 6px;
        text-shadow:
            3px 3px 0 var(--red-dark),
            6px 6px 0 var(--ink);
    }
    .subtitle {
        font-family: 'Press Start 2P', monospace;
        font-size: 10px;
        color: var(--text-dim);
        letter-spacing: 3px;
    }
    .subtitle .star { color: var(--gold); }

    /* 顶栏 HUD */
    .hud {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
        margin-bottom: 28px;
        font-family: 'Press Start 2P', monospace;
        font-size: 10px;
        text-transform: uppercase;
    }
    .hud-item {
        background: var(--panel-dark);
        padding: 10px 14px;
        box-shadow:
            0 -3px 0 0 var(--ink),
            0 3px 0 0 var(--ink),
            -3px 0 0 0 var(--ink),
            3px 0 0 0 var(--ink),
            inset 2px 2px 0 0 rgba(255,255,255,0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
    .hud-item .label { color: var(--text-dim); }
    .hud-item .value { color: var(--gold); }
    .hud-item.status .value { color: var(--green); }
    .hud-item.status.idle .value { color: var(--text-dark); }
    .hud-item.status.done .value { color: var(--blue); }

    /* 主布局 两栏 */
    .main {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: 28px;
        margin-bottom: 28px;
    }
    @media (max-width: 820px) {
        .main { grid-template-columns: 1fr; }
        .hud { grid-template-columns: 1fr; }
        .title { font-size: 20px; }
        .title .cn { font-size: 28px; }
    }

    /* 角色卡 */
    .char-panel { }
    .panel-title {
        font-family: 'Press Start 2P', monospace;
        font-size: 11px;
        color: var(--gold);
        letter-spacing: 2px;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .panel-title::before, .panel-title::after {
        content: '';
        flex: 1;
        height: 2px;
        background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 8px);
    }

    .char-row {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        margin-bottom: 14px;
    }
    .avatar {
        width: 72px;
        height: 72px;
        flex-shrink: 0;
        background: var(--panel-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 44px;
        box-shadow:
            0 -3px 0 0 var(--ink),
            0 3px 0 0 var(--ink),
            -3px 0 0 0 var(--ink),
            3px 0 0 0 var(--ink),
            inset 2px 2px 0 0 rgba(255,255,255,0.1),
            inset -2px -2px 0 0 rgba(0,0,0,0.3);
        line-height: 1;
    }
    .char-info { flex: 1; min-width: 0; }
    .char-name {
        font-family: 'Press Start 2P', monospace;
        font-size: 12px;
        color: var(--text);
        margin-bottom: 8px;
    }
    .char-level {
        color: var(--gold);
        font-family: 'Press Start 2P', monospace;
        font-size: 10px;
        margin-bottom: 8px;
    }

    /* 状态条 HP / XP */
    .bar-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        font-family: 'Press Start 2P', monospace;
        font-size: 9px;
    }
    .bar-label {
        width: 28px;
        color: var(--gold);
    }
    .bar-label.hp { color: var(--red); }
    .bar-label.xp { color: var(--blue); }
    .bar {
        flex: 1;
        height: 14px;
        background: var(--ink);
        position: relative;
        box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px rgba(255,255,255,0.1);
    }
    .bar-fill {
        height: 100%;
        transition: width 0.2s steps(10);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(0,0,0,0.2);
    }
    .bar-fill.hp { background: linear-gradient(180deg, #ff6b6b, var(--red) 40%, var(--red-dark)); }
    .bar-fill.xp { background: linear-gradient(180deg, #8dd6ff, var(--blue) 40%, #2a5f8f); }
    .bar-fill.xp.full, .bar-fill.hp.full { background: linear-gradient(180deg, var(--gold-light), var(--gold) 40%, var(--gold-dark)); }
    .bar-value {
        width: 80px;
        text-align: right;
        color: var(--text-dim);
        font-size: 9px;
    }

    /* 属性列表 */
    .stats-list {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 2px dashed var(--panel-dark);
    }
    .stat-row {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        font-family: 'Press Start 2P', monospace;
        font-size: 10px;
    }
    .stat-row .k { color: var(--text-dim); }
    .stat-row .v { color: var(--gold); }

    /* 金币面板 */
    .coin-panel {
        text-align: center;
    }
    .coin-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 12px 0 20px;
    }
    .coin {
        width: 80px;
        height: 80px;
        background:
            radial-gradient(circle at 32% 28%, var(--gold-light) 0 18%, var(--gold) 19% 55%, var(--gold-dark) 56% 85%, #6b4f00 86% 100%);
        border-radius: 50%;
        position: relative;
        margin-bottom: 16px;
        box-shadow:
            0 0 0 4px var(--ink),
            0 0 24px rgba(255, 217, 61, 0.5),
            inset 0 0 0 6px var(--gold-dark),
            inset 4px 4px 0 rgba(255,255,255,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Press Start 2P', monospace;
        font-size: 28px;
        color: #6b4f00;
        text-shadow: 2px 2px 0 var(--gold-light);
        animation: coinBounce 1.8s steps(1) infinite;
    }
    @keyframes coinBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
    }
    .coin.spin { animation: coinSpin 0.8s steps(4) infinite; }
    @keyframes coinSpin {
        0%   { transform: scaleX(1); }
        25%  { transform: scaleX(0.3); }
        50%  { transform: scaleX(1); }
        75%  { transform: scaleX(0.3); }
        100% { transform: scaleX(1); }
    }

    .gold-amount {
        font-family: 'Press Start 2P', monospace;
        font-size: 44px;
        color: var(--gold);
        text-shadow:
            3px 3px 0 var(--ink),
            3px 3px 0 var(--red-dark),
            6px 6px 0 var(--ink);
        letter-spacing: 2px;
        line-height: 1.1;
        display: inline-block;
    }
    .gold-amount.flash { animation: pop 0.35s steps(3); }
    @keyframes pop {
        0%   { transform: scale(1); color: var(--gold); }
        50%  { transform: scale(1.15); color: var(--gold-light); }
        100% { transform: scale(1); color: var(--gold); }
    }
    .gold-currency {
        font-family: 'Press Start 2P', monospace;
        font-size: 24px;
        color: var(--gold-dark);
        margin-right: 8px;
    }
    .gold-sub {
        margin-top: 14px;
        font-family: 'Press Start 2P', monospace;
        font-size: 9px;
        color: var(--text-dim);
        letter-spacing: 3px;
    }

    /* 进度条 - 今日任务 */
    .quest-progress {
        margin-top: 18px;
        padding-top: 16px;
        border-top: 2px dashed var(--panel-dark);
    }
    .quest-title {
        display: flex;
        justify-content: space-between;
        font-family: 'Press Start 2P', monospace;
        font-size: 10px;
        margin-bottom: 10px;
    }
    .quest-title .left { color: var(--gold); }
    .quest-title .right { color: var(--text-dim); }

    .big-bar {
        height: 18px;
        background: var(--ink);
        position: relative;
        box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px rgba(255,255,255,0.15);
        overflow: hidden;
    }
    .big-bar-fill {
        height: 100%;
        background:
            repeating-linear-gradient(90deg,
                var(--gold-light) 0 8px,
                var(--gold) 8px 16px,
                var(--gold-dark) 16px 24px,
                var(--gold) 24px 32px
            );
        background-size: 32px 18px;
        transition: width 0.25s steps(8);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.25);
        animation: barShine 2s linear infinite;
    }
    @keyframes barShine {
        from { background-position: 0 0; }
        to { background-position: 32px 0; }
    }

    /* 参数配置 */
    .config-panel { margin-top: 0; }
    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 14px;
    }
    .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .field.full { grid-column: 1 / -1; }
    .field label {
        font-family: 'Press Start 2P', monospace;
        font-size: 9px;
        color: var(--gold);
        letter-spacing: 1px;
    }
    .field input {
        font-family: 'VT323', 'Press Start 2P', monospace;
        font-size: 20px;
        color: var(--text);
        background: var(--ink);
        border: 0;
        padding: 8px 12px;
        letter-spacing: 1px;
        box-shadow:
            inset 2px 2px 0 rgba(0,0,0,0.6),
            inset -2px -2px 0 rgba(255,255,255,0.08),
            0 0 0 2px var(--panel-dark);
        outline: none;
    }
    .field input:focus-visible {
        box-shadow:
            inset 2px 2px 0 rgba(0,0,0,0.6),
            inset -2px -2px 0 rgba(255,255,255,0.08),
            0 0 0 2px var(--gold),
            0 0 0 4px var(--ink);
    }
    .field input::placeholder { color: var(--text-dark); }

    /* 按钮 —— 像素 3D 按钮 */
    .controls {
        margin-top: 24px;
        display: flex;
        justify-content: center;
        gap: 18px;
        flex-wrap: wrap;
    }
    .pixel-btn {
        font-family: 'Press Start 2P', 'ZCOOL KuaiLe', monospace;
        font-size: 14px;
        letter-spacing: 2px;
        padding: 16px 32px;
        color: var(--ink);
        background: var(--gold);
        border: 0;
        cursor: inherit;
        position: relative;
        box-shadow:
            inset 3px 3px 0 var(--gold-light),
            inset -3px -3px 0 var(--gold-dark),
            0 -4px 0 0 var(--ink),
            0 4px 0 0 var(--ink),
            -4px 0 0 0 var(--ink),
            4px 0 0 0 var(--ink),
            6px 6px 0 rgba(0,0,0,0.45);
        transition: transform 0.05s steps(1), box-shadow 0.05s steps(1);
        user-select: none;
    }
    .pixel-btn:hover {
        background: var(--gold-light);
    }
    .pixel-btn:active {
        transform: translate(3px, 3px);
        box-shadow:
            inset 3px 3px 0 var(--gold-light),
            inset -3px -3px 0 var(--gold-dark),
            0 -4px 0 0 var(--ink),
            0 4px 0 0 var(--ink),
            -4px 0 0 0 var(--ink),
            4px 0 0 0 var(--ink),
            3px 3px 0 rgba(0,0,0,0.45);
    }
    .pixel-btn.danger {
        background: var(--red);
        color: var(--text);
        box-shadow:
            inset 3px 3px 0 #ff8a95,
            inset -3px -3px 0 var(--red-dark),
            0 -4px 0 0 var(--ink),
            0 4px 0 0 var(--ink),
            -4px 0 0 0 var(--ink),
            4px 0 0 0 var(--ink),
            6px 6px 0 rgba(0,0,0,0.45);
    }
    .pixel-btn.danger:hover { background: #ff6575; }
    .pixel-btn.danger:active {
        transform: translate(3px, 3px);
        box-shadow:
            inset 3px 3px 0 #ff8a95,
            inset -3px -3px 0 var(--red-dark),
            0 -4px 0 0 var(--ink),
            0 4px 0 0 var(--ink),
            -4px 0 0 0 var(--ink),
            4px 0 0 0 var(--ink),
            3px 3px 0 rgba(0,0,0,0.45);
    }
    .pixel-btn.working {
        background: var(--green);
        color: var(--ink);
        box-shadow:
            inset 3px 3px 0 #c0ff80,
            inset -3px -3px 0 var(--green-dark),
            0 -4px 0 0 var(--ink),
            0 4px 0 0 var(--ink),
            -4px 0 0 0 var(--ink),
            4px 0 0 0 var(--ink),
            6px 6px 0 rgba(0,0,0,0.45);
        animation: btnPulse 0.8s steps(2) infinite;
    }
    @keyframes btnPulse {
        0%, 100% { filter: brightness(1); }
        50%      { filter: brightness(1.15); }
    }

    /* 告警 */
    .warn {
        margin-top: 14px;
        padding: 10px 14px;
        background: var(--red-dark);
        color: var(--text);
        font-family: 'Press Start 2P', monospace;
        font-size: 9px;
        letter-spacing: 1px;
        line-height: 1.6;
        box-shadow:
            0 -3px 0 0 var(--ink),
            0 3px 0 0 var(--ink),
            -3px 0 0 0 var(--ink),
            3px 0 0 0 var(--ink),
            inset 2px 2px 0 rgba(255,255,255,0.15);
        display: none;
    }
    .warn.show { display: block; }
    .warn::before { content: '! '; color: var(--gold); }

    /* 底部标语 */
    .footer-tip {
        margin-top: 32px;
        text-align: center;
        font-family: 'Press Start 2P', monospace;
        font-size: 9px;
        color: var(--text-dark);
        letter-spacing: 2px;
    }
    .footer-tip .blink {
        color: var(--gold);
        animation: blink 1s steps(2) infinite;
    }
    @keyframes blink {
        0%, 50%   { opacity: 1; }
        51%, 100% { opacity: 0.2; }
    }

    /* 飞金币特效 */
    .fly-coin {
        position: fixed;
        width: 18px;
        height: 18px;
        pointer-events: none;
        z-index: 9990;
        background:
            radial-gradient(circle at 32% 28%, var(--gold-light) 0 18%, var(--gold) 19% 55%, var(--gold-dark) 56% 100%);
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--ink);
        animation: flyUp 1.4s steps(10) forwards;
    }
    @keyframes flyUp {
        0%   { transform: translate(0, 0) scale(1);   opacity: 1; }
        100% { transform: translate(var(--tx, 0), var(--ty, -260px)) scale(0.3); opacity: 0; }
    }

    /* ===== 视图切换 ===== */
    .view.view-hidden { display: none !important; }

    /* 顶部导航 */
    .nav-tabs {
        position: relative;
        z-index: 2;
        max-width: 980px;
        margin: 24px auto 0;
        padding: 0 24px;
        display: flex;
        justify-content: center;
        gap: 12px;
    }
    .nav-tab {
        font-family: 'Press Start 2P', monospace;
        font-size: 11px;
        letter-spacing: 2px;
        padding: 12px 22px;
        color: var(--text-dim);
        background: var(--panel-dark);
        border: 0;
        cursor: inherit;
        box-shadow:
            inset 2px 2px 0 rgba(255,255,255,0.08),
            inset -2px -2px 0 rgba(0,0,0,0.4),
            0 -3px 0 0 var(--ink),
            0 3px 0 0 var(--ink),
            -3px 0 0 0 var(--ink),
            3px 0 0 0 var(--ink);
        transition: color 0.08s steps(1);
    }
    .nav-tab:hover { color: var(--gold-light); }
    .nav-tab.active {
        color: var(--ink);
        background: var(--gold);
        box-shadow:
            inset 2px 2px 0 var(--gold-light),
            inset -2px -2px 0 var(--gold-dark),
            0 -3px 0 0 var(--ink),
            0 3px 0 0 var(--ink),
            -3px 0 0 0 var(--ink),
            3px 0 0 0 var(--ink),
            3px 3px 0 rgba(0,0,0,0.45);
    }
    .nav-tab.nav-hall {
        color: var(--ink);
        background: var(--green);
        box-shadow:
            inset 2px 2px 0 rgba(255,255,255,0.25),
            inset -2px -2px 0 rgba(0,0,0,0.35),
            0 -3px 0 0 var(--ink),
            0 3px 0 0 var(--ink),
            -3px 0 0 0 var(--ink),
            3px 0 0 0 var(--ink),
            3px 3px 0 rgba(0,0,0,0.45);
    }
    .nav-tab.nav-hall:hover {
        color: var(--ink);
        filter: brightness(1.15);
    }
    /* 右上角静音 FAB */
    .mute-fab {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 9996;
        width: 44px;
        height: 44px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--gold-light);
        background: var(--panel-dark);
        border: 0;
        cursor: inherit;
        box-shadow:
            inset 2px 2px 0 rgba(255,255,255,0.08),
            inset -2px -2px 0 rgba(0,0,0,0.4),
            0 -3px 0 0 var(--ink),
            0 3px 0 0 var(--ink),
            -3px 0 0 0 var(--ink),
            3px 0 0 0 var(--ink),
            3px 3px 0 rgba(0,0,0,0.45);
        transition: color 0.08s steps(1);
    }
    .mute-fab svg {
        width: 24px;
        height: 24px;
        fill: currentColor;
    }
    .mute-fab:hover { color: var(--gold); filter: brightness(1.1); }
    .mute-fab:active { transform: translate(1px, 1px); }
    .mute-fab .strike { display: none; }
    .mute-fab.is-muted { color: #888; }
    .mute-fab.is-muted .waves { display: none; }
    .mute-fab.is-muted .strike { display: block; }
    /* 进游戏视图后 fab 隐藏(HUD 里的按钮接管) */
    body:not([data-view="home"]) .mute-fab { display: none; }

    /* HUD 内嵌静音按钮 —— 外观同 game-hud-item,内部放像素喇叭 SVG */
    .mute-hud {
        border: 0;
        font: inherit;
        cursor: inherit;
        color: var(--gold-light);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mute-hud svg {
        width: 28px;
        height: 28px;
        fill: currentColor;
    }
    .mute-hud .strike { display: none; }
    .mute-hud.is-muted { color: #888; }
    .mute-hud.is-muted .waves { display: none; }
    .mute-hud.is-muted .strike { display: block; }
    .mute-hud:hover { color: var(--gold); filter: brightness(1.15); }
    .mute-hud:active { transform: translate(1px, 1px); }

    /* ===== 游戏视图 ===== */
    .game-stage {
        margin: 18px auto 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .game-canvas-wrap {
        background: var(--ink);
        padding: 4px;
        box-shadow:
            0 -4px 0 0 var(--ink),
            0 4px 0 0 var(--ink),
            -4px 0 0 0 var(--ink),
            4px 0 0 0 var(--ink),
            -8px 0 0 0 var(--panel),
            8px 0 0 0 var(--panel),
            0 -8px 0 0 var(--panel),
            0 8px 0 0 var(--panel),
            -8px -4px 0 0 var(--ink),
            8px -4px 0 0 var(--ink),
            -8px 4px 0 0 var(--ink),
            8px 4px 0 0 var(--ink),
            -4px -8px 0 0 var(--ink),
            -4px 8px 0 0 var(--ink),
            4px -8px 0 0 var(--ink),
            4px 8px 0 0 var(--ink);
        margin: 8px;
    }
    .game-canvas-wrap canvas {
        display: block;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        background: #0e0720;
        touch-action: manipulation;
    }
    /* 仅在游戏实际进行中锁定 canvas 手势,避免用户在 idle 态无法上滑翻页 */
    .game-canvas-wrap canvas.playing { touch-action: none; }
    .game-hud {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        width: 100%;
        max-width: 400px;
    }
    .game-hud-item {
        background: var(--panel-dark);
        padding: 8px 10px;
        font-family: 'Press Start 2P', monospace;
        font-size: 9px;
        text-align: center;
        box-shadow:
            0 -3px 0 0 var(--ink),
            0 3px 0 0 var(--ink),
            -3px 0 0 0 var(--ink),
            3px 0 0 0 var(--ink),
            inset 2px 2px 0 rgba(255,255,255,0.08);
    }
    .game-hud-item .k { color: var(--text-dim); display: block; margin-bottom: 4px; letter-spacing: 1px; }
    .game-hud-item .v { color: var(--gold); font-size: 14px; }
    .game-hud-item.lives .v { color: var(--red); letter-spacing: 2px; }
    .game-hud-item.best .v { color: var(--blue); }

    .game-controls {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 4px;
    }
    .game-controls .pixel-btn { font-size: 12px; padding: 12px 22px; }

    .game-hint {
        margin-top: 6px;
        font-family: 'Press Start 2P', monospace;
        font-size: 8px;
        color: var(--text-dark);
        letter-spacing: 1px;
        text-align: center;
        line-height: 1.7;
    }
    .game-hint .key {
        display: inline-block;
        padding: 2px 6px;
        background: var(--panel-dark);
        color: var(--gold);
        margin: 0 2px;
        box-shadow: 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink);
    }

    /* A11y */
    @media (hover: none), (pointer: coarse) {
        body { cursor: auto; }
    }
    @media (prefers-reduced-motion: reduce) {
        body { cursor: auto; }
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
        .stars { animation: none; }
    }

    /* ===== 游戏大厅卡片 ===== */
    .game-menu {
        margin-top: 18px;
    }
    .game-menu-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 14px;
        margin-top: 14px;
    }
    .game-card {
        background: var(--panel-dark);
        color: var(--text);
        border: 0;
        padding: 18px 10px 14px;
        text-align: center;
        cursor: inherit;
        font-family: inherit;
        position: relative;
        box-shadow:
            inset 2px 2px 0 rgba(255,255,255,0.08),
            inset -2px -2px 0 rgba(0,0,0,0.45),
            0 -3px 0 0 var(--ink),
            0 3px 0 0 var(--ink),
            -3px 0 0 0 var(--ink),
            3px 0 0 0 var(--ink),
            5px 5px 0 rgba(0,0,0,0.45);
        transition: transform 0.05s steps(1), background 0.08s steps(2);
        user-select: none;
    }
    .game-card:hover {
        background: #1f1250;
        transform: translateY(-2px);
    }
    .game-card:active {
        transform: translate(3px, 3px);
        box-shadow:
            inset 2px 2px 0 rgba(255,255,255,0.08),
            inset -2px -2px 0 rgba(0,0,0,0.45),
            0 -3px 0 0 var(--ink),
            0 3px 0 0 var(--ink),
            -3px 0 0 0 var(--ink),
            3px 0 0 0 var(--ink),
            2px 2px 0 rgba(0,0,0,0.45);
    }
    .game-card-icon {
        font-size: 36px;
        line-height: 1;
        margin-bottom: 10px;
        text-shadow: 2px 2px 0 var(--ink), 0 0 10px currentColor;
    }
    .game-card-icon.icon-coin    { color: var(--gold); }
    .game-card-icon.icon-thunder { color: var(--blue); }
    .game-card-icon.icon-brick   { color: var(--pink); }
    .game-card-icon.icon-tetris  { color: var(--green); }
    .game-card-icon.icon-g2048   { color: #b845ff; }
    .game-card-icon.icon-snake   { color: var(--green); }
    .game-card-icon.icon-miner   { color: var(--gold); }
    .game-card-icon.icon-jump    { color: var(--blue); }
    .game-card-name {
        font-family: 'ZCOOL KuaiLe', 'Press Start 2P', monospace;
        font-size: 18px;
        color: var(--text);
        margin-bottom: 4px;
        letter-spacing: 1px;
    }
    .game-card-en {
        font-family: 'Press Start 2P', monospace;
        font-size: 9px;
        color: var(--gold);
        letter-spacing: 1px;
        margin-bottom: 10px;
    }
    .game-card-desc {
        font-family: 'VT323', 'ZCOOL KuaiLe', monospace;
        font-size: 15px;
        color: var(--text-dim);
        line-height: 1.35;
    }

    /* ===== 像素风确认弹窗 ===== */
    .pixel-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(10, 5, 32, 0.78);
        backdrop-filter: blur(2px);
        animation: pixelModalFade 0.12s steps(3);
    }
    .pixel-modal.hidden { display: none; }
    @keyframes pixelModalFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .pixel-modal-box {
        background: var(--panel);
        padding: 28px 26px 22px;
        max-width: 440px;
        width: 100%;
        text-align: center;
        position: relative;
        animation: pixelModalPop 0.16s steps(4);
        box-shadow:
            0 -4px 0 0 var(--ink),
            0 4px 0 0 var(--ink),
            -4px 0 0 0 var(--ink),
            4px 0 0 0 var(--ink),
            -8px 0 0 0 var(--panel),
            8px 0 0 0 var(--panel),
            0 -8px 0 0 var(--panel),
            0 8px 0 0 var(--panel),
            -8px -4px 0 0 var(--ink),
            8px -4px 0 0 var(--ink),
            -8px 4px 0 0 var(--ink),
            8px 4px 0 0 var(--ink),
            -4px -8px 0 0 var(--ink),
            -4px 8px 0 0 var(--ink),
            4px -8px 0 0 var(--ink),
            4px 8px 0 0 var(--ink),
            inset 2px 2px 0 0 rgba(255,255,255,0.15),
            inset -2px -2px 0 0 rgba(0,0,0,0.35);
    }
    @keyframes pixelModalPop {
        from { transform: scale(0.85); }
        to   { transform: scale(1); }
    }
    .pixel-modal-box.hall-box {
        max-width: 640px;
        padding: 28px 22px 22px;
        /* 卡片多时(手机单列 7+ 张)会超出视口,box 自身滚动 */
        max-height: 88vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .pixel-modal-box.hall-box .game-menu-grid {
        margin: 20px 4px 22px;
    }
    .pixel-modal-title {
        font-family: 'Press Start 2P', monospace;
        font-size: 14px;
        color: var(--gold);
        letter-spacing: 2px;
        text-shadow: 2px 2px 0 var(--ink);
        margin-bottom: 8px;
    }
    .pixel-modal-msg {
        font-family: 'VT323', 'ZCOOL KuaiLe', monospace;
        font-size: 22px;
        color: var(--text);
        line-height: 1.5;
        margin: 22px 4px 28px;
        min-height: 48px;
    }
    .pixel-modal-actions {
        display: flex;
        justify-content: center;
        gap: 18px;
        flex-wrap: wrap;
    }
    .pixel-modal-actions .pixel-btn {
        font-size: 12px;
        padding: 12px 22px;
        letter-spacing: 1px;
    }

    /* ============================================================
       响应式 / 触摸适配 —— 纯叠加,PC 端不受影响
       ============================================================ */

    /* canvas 全部自适应容器,内部像素分辨率不变 */
    .game-canvas-wrap canvas {
        max-width: 100%;
        height: auto;
    }

    /* ===== 触屏专用虚拟按键 ===== */
    .touch-pad {
        display: none;
        width: 100%;
        max-width: 420px;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
    }
    .touch-pad-row {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-top: 8px;
    }
    .tbtn {
        flex: 1;
        min-height: 52px;
        font-family: 'Press Start 2P', monospace;
        font-size: 14px;
        color: var(--gold);
        background: var(--panel-dark);
        border: 0;
        cursor: inherit;
        letter-spacing: 2px;
        box-shadow:
            inset 2px 2px 0 rgba(255,255,255,0.1),
            inset -2px -2px 0 rgba(0,0,0,0.4),
            0 -3px 0 0 var(--ink),
            0 3px 0 0 var(--ink),
            -3px 0 0 0 var(--ink),
            3px 0 0 0 var(--ink);
        transition: transform 0.05s steps(1);
    }
    .tbtn:active {
        transform: translateY(2px);
        color: var(--gold-light);
        background: var(--panel);
    }
    .tbtn.wide { flex: 2; }
    .tbtn.accent { color: var(--green); }
    .tbtn.danger { color: var(--red); }

    /* 贪吃蛇专用 3×2 十字键盘(上居中,下一行 左中右) */
    .touch-pad.dpad-grid {
        display: none;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 8px;
        max-width: 320px;
    }
    .touch-pad.dpad-grid .dpad-up    { grid-column: 2; grid-row: 1; }
    .touch-pad.dpad-grid .dpad-left  { grid-column: 1; grid-row: 2; }
    .touch-pad.dpad-grid .dpad-down  { grid-column: 2; grid-row: 2; }
    .touch-pad.dpad-grid .dpad-right { grid-column: 3; grid-row: 2; }
    .touch-pad.dpad-grid .tbtn       { flex: initial; }
    @media (hover: none) and (pointer: coarse) {
        .touch-pad.dpad-grid { display: grid; }
    }

    /* 触屏设备才显示虚拟按键,PC 端永远隐藏 */
    @media (hover: none) and (pointer: coarse) {
        .touch-pad { display: block; }
        /* 手机上键盘提示没意义 */
        .hint-desktop { display: none; }
    }
    /* PC 端默认隐藏"触屏提示",触屏端再显示 */
    .hint-touch { display: none; }
    @media (hover: none) and (pointer: coarse) {
        .hint-touch { display: block; }
    }

    /* ===== 窄屏:820px 以下 ===== */
    @media (max-width: 820px) {
        .app { padding: 20px 14px 48px; }
        .pixel-box { margin: 10px 2px; padding: 16px 14px; }
        .nav-tabs { padding: 0 14px; gap: 8px; }
        .nav-tab { font-size: 9px; padding: 10px 14px; letter-spacing: 1px; }
    }

    /* ===== 超窄屏(手机竖屏):520px 以下 ===== */
    @media (max-width: 520px) {
        .title { font-size: 14px; letter-spacing: 1px; text-shadow: 2px 2px 0 var(--ink), 2px 2px 0 var(--red), 4px 4px 0 var(--ink); }
        .title .cn { font-size: 20px; margin-bottom: 4px; text-shadow: 2px 2px 0 var(--red-dark), 4px 4px 0 var(--ink); }
        .subtitle { font-size: 9px; }
        .header { margin-bottom: 14px; }
        .nav-tabs { margin-top: 14px; }
        .footer-tip { font-size: 8px; margin-top: 12px; }

        /* 游戏大厅弹窗 4 卡片改单列 */
        .pixel-modal-box.hall-box { max-width: 92vw; padding: 22px 16px 18px; }
        .pixel-modal-box.hall-box .game-menu-grid {
            grid-template-columns: 1fr;
            gap: 10px;
            margin: 14px 0 16px;
        }

        /* 配置表单单列,输入框加大点更好戳 */
        .form-grid { grid-template-columns: 1fr; }
        .field input {
            font-size: 22px;
            padding: 12px 12px;
            min-height: 44px;
        }

        /* 游戏 HUD 文字缩小一点,保持 3/4/5 列不换行 */
        .game-hud-item { padding: 6px 4px; font-size: 8px; }
        .game-hud-item .v { font-size: 12px; }
        .game-hud-item .k { margin-bottom: 2px; }
        .game-canvas-wrap { margin: 4px; padding: 2px; }
        .game-hint { font-size: 7px; line-height: 1.5; margin-top: 2px; }

        /* 游戏舞台:手机上把 START/PAUSE 挪到 canvas 之上,避免用户看不到开始按钮 */
        .game-stage { gap: 10px; }
        .game-stage .game-hud       { order: 1; }
        .game-stage .game-controls  { order: 2; }
        .game-stage .game-canvas-wrap { order: 3; }
        .game-stage .touch-pad      { order: 4; }
        .game-stage .game-hint      { order: 5; }

        /* canvas 高度封顶,保证 START 与控件不被挤出视口 */
        .game-canvas-wrap canvas {
            max-width: 100%;
            max-height: 58vh;
            height: auto;
            width: auto;
            margin: 0 auto;
        }

        /* 虚拟按键手机上按钮稍小 */
        .tbtn { min-height: 46px; font-size: 12px; }
        /* 贪吃蛇十字键:手机上加高,更贴合拇指点击 */
        #snakePad .tbtn { min-height: 64px; font-size: 18px; }

        /* pixelConfirm 弹窗自适应 */
        .pixel-modal-box { max-width: 92vw; padding: 22px 18px 18px; }
        .pixel-modal-msg { font-size: 18px; }
    }

    /* iOS 安全区 */
    @supports (padding: max(0px)) {
        body {
            padding-bottom: max(0px, env(safe-area-inset-bottom));
        }
    }

    /* ============================================================
       Leaderboard —— 打榜弹窗 / 提交弹窗 / toast
       ============================================================ */

    /* 提交分数弹窗 */
    .pixel-modal-box.submit-box {
        max-width: 420px;
    }
    .submit-score-big {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 12px;
        margin: 18px 0 10px;
    }
    .submit-score-big .k {
        font-family: 'Press Start 2P', monospace;
        font-size: 10px;
        color: var(--text-dim);
        letter-spacing: 2px;
    }
    .submit-score-big .v {
        font-family: 'Press Start 2P', monospace;
        font-size: 28px;
        color: var(--gold);
        text-shadow: 3px 3px 0 var(--ink);
    }
    .submit-fields {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 14px 6px 6px;
        text-align: left;
    }
    .submit-label {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .submit-label span {
        width: 48px;
        flex-shrink: 0;
        font-family: 'Press Start 2P', monospace;
        font-size: 10px;
        color: var(--gold);
        letter-spacing: 1px;
    }
    .submit-label input {
        flex: 1;
        padding: 10px 10px;
        font-family: 'VT323', 'ZCOOL KuaiLe', monospace;
        font-size: 18px;
        color: var(--text);
        background: var(--panel-dark);
        border: 2px solid var(--ink);
        outline: none;
        letter-spacing: 1px;
    }
    .submit-label input:focus {
        border-color: var(--gold);
    }
    .submit-msg {
        min-height: 22px;
        margin: 10px 4px 4px;
        font-family: 'VT323', 'ZCOOL KuaiLe', monospace;
        font-size: 16px;
        color: var(--text-dim);
        line-height: 1.3;
    }
    .submit-msg.err { color: var(--red); }
    .submit-hint {
        margin: 6px 4px 14px;
        font-family: 'VT323', 'ZCOOL KuaiLe', monospace;
        font-size: 13px;
        color: var(--text-dark);
    }

    /* 排行榜弹窗 */
    .pixel-modal-box.lb-box {
        max-width: 560px;
        padding: 24px 18px 18px;
    }
    .lb-tabs {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
        margin: 14px 0 10px;
    }
    .lb-tab {
        flex: 1 1 0;
        min-width: 80px;
        padding: 8px 6px;
        font-family: 'Press Start 2P', monospace;
        font-size: 9px;
        letter-spacing: 1px;
        color: var(--text-dim);
        background: var(--panel-dark);
        border: 2px solid var(--ink);
        cursor: pointer;
        image-rendering: pixelated;
    }
    .lb-tab:hover { color: var(--text); }
    .lb-tab.active {
        background: var(--gold);
        color: var(--ink);
        border-color: var(--gold-dark);
    }
    .lb-list-wrap {
        background: var(--panel-dark);
        border: 2px solid var(--ink);
        padding: 6px;
        text-align: left;
    }
    .lb-list-head, .lb-row {
        display: grid;
        grid-template-columns: 40px 1fr 100px 92px;
        gap: 6px;
        align-items: center;
        padding: 6px 8px;
        font-family: 'VT323', 'ZCOOL KuaiLe', monospace;
        font-size: 16px;
    }
    .lb-list-head {
        font-family: 'Press Start 2P', monospace;
        font-size: 9px;
        color: var(--gold);
        letter-spacing: 1px;
        border-bottom: 2px solid var(--ink);
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .lb-list {
        max-height: 320px;
        overflow-y: auto;
    }
    .lb-list::-webkit-scrollbar { width: 8px; }
    .lb-list::-webkit-scrollbar-track { background: var(--panel-dark); }
    .lb-list::-webkit-scrollbar-thumb { background: var(--panel); border: 1px solid var(--ink); }
    .lb-row {
        color: var(--text);
        border-top: 1px solid rgba(10,5,32,0.4);
    }
    .lb-row:nth-child(even) { background: rgba(10,5,32,0.25); }
    .lb-row .c1 { color: var(--gold); text-align: center; font-size: 15px; }
    .lb-row .c2 { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lb-row .c3 { color: var(--green); text-align: right; font-weight: bold; }
    .lb-row .c4 { color: var(--text-dim); font-size: 13px; text-align: right; }
    .lb-row.me {
        background: linear-gradient(90deg, rgba(255,217,61,0.18), rgba(255,217,61,0.04));
        outline: 1px dashed var(--gold);
    }
    .lb-row.me .c2 { color: var(--gold-light); }
    .lb-empty {
        padding: 30px 10px;
        text-align: center;
        font-family: 'VT323', 'ZCOOL KuaiLe', monospace;
        font-size: 18px;
        color: var(--text-dim);
    }
    .lb-empty.err { color: var(--red); }
    .lb-me {
        margin: 12px 6px 6px;
        padding: 10px 12px;
        background: rgba(95,179,255,0.10);
        border: 1px dashed var(--blue);
        font-family: 'VT323', 'ZCOOL KuaiLe', monospace;
        font-size: 16px;
        color: var(--text);
        line-height: 1.4;
    }
    .lb-me b { color: var(--gold); font-weight: normal; }

    /* Rankings 按钮样式(复用 pixel-btn,只调次要色) */
    .pixel-btn.ranking {
        background: var(--blue);
        color: var(--ink);
    }
    .pixel-btn.ranking:hover { background: #82c5ff; }
    .pixel-btn.ranking:active { transform: translate(2px, 2px); }

    /* Toast 提示条 */
    .lb-toast {
        position: fixed;
        left: 50%;
        bottom: 40px;
        transform: translateX(-50%) translateY(20px);
        min-width: 220px;
        max-width: 80vw;
        padding: 12px 20px;
        background: var(--ink);
        color: var(--gold);
        font-family: 'VT323', 'ZCOOL KuaiLe', monospace;
        font-size: 18px;
        text-align: center;
        border: 2px solid var(--gold);
        box-shadow: 4px 4px 0 0 rgba(0,0,0,0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s steps(3), transform 0.15s steps(3);
        z-index: 10000;
    }
    .lb-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* 战报分享卡弹窗 */
    .pixel-modal-box.share-card-box {
        max-width: 520px;
        padding: 22px 18px 16px;
        /* 小屏/横屏时允许 box 自身滚动,避免预览图 + 按钮一起把弹窗撑出视口 */
        max-height: 92vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .share-card-preview {
        margin: 12px auto;
        width: 100%;
        max-width: 420px;
        aspect-ratio: 1 / 1;
        background: var(--ink);
        border: 3px solid var(--gold-dark);
        box-shadow: 4px 4px 0 0 rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .share-card-preview canvas,
    .share-card-preview img {
        width: 100%;
        height: 100%;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        display: block;
        /* iOS / 微信:确保长按能弹出"保存图片 / 发送给朋友"菜单 */
        -webkit-touch-callout: default;
        touch-callout: default;
        -webkit-user-select: auto;
        user-select: auto;
    }
    .share-card-msg {
        margin: 8px 0 4px;
        font-family: 'VT323', 'ZCOOL KuaiLe', monospace;
        font-size: 16px;
        color: var(--text-dim);
        min-height: 22px;
        line-height: 1.3;
    }
    .share-card-msg.ok  { color: var(--green); }
    .share-card-msg.err { color: var(--red); }
    .share-card-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .share-card-actions .pixel-btn { font-size: 10px; padding: 10px 14px; }

    /* "生成战报" 入口按钮(打散到 submit modal actions 里) */
    .pixel-btn.share {
        background: var(--pink);
        color: var(--ink);
    }
    .pixel-btn.share:hover { background: #ff8ab0; }
    .pixel-btn.share:active { transform: translate(2px, 2px); }

    @media (max-width: 560px) {
        .mute-fab { width: 36px; height: 36px; top: 8px; right: 8px; }
        .mute-fab svg { width: 20px; height: 20px; }
        .pixel-modal-box.lb-box { max-width: 94vw; padding: 18px 10px 14px; }
        .lb-list-head, .lb-row {
            grid-template-columns: 34px 1fr 78px 70px;
            font-size: 14px;
            padding: 5px 6px;
        }
        .lb-tab { font-size: 8px; min-width: 64px; }
        .lb-row .c4 { font-size: 12px; }
        .submit-label span { width: 40px; font-size: 9px; }
        .submit-label input { font-size: 16px; }
        /* submit 弹窗现在有 3 按钮(SUBMIT/战报/SKIP),手机下缩紧 gap + 让按钮自适应 */
        .pixel-modal-box.submit-box .pixel-modal-actions { gap: 8px; }
        .pixel-modal-box.submit-box .pixel-modal-actions .pixel-btn {
            font-size: 9px;
            padding: 10px 10px;
            letter-spacing: 0.5px;
            flex: 1 1 0;
            min-width: 0;
        }

        .pixel-modal-box.share-card-box {
            max-width: 94vw;
            padding: 18px 12px 14px;
            max-height: 94vh;
        }
        .share-card-preview { max-width: 86vw; }
        .share-card-actions .pixel-btn { font-size: 9px; padding: 9px 10px; flex: 1 1 auto; }
    }