/* ============================================================
   绿色终端主题 — 经典黑底绿字 + CRT 扫描线质感
   ============================================================ */
:root {
    --term-bg: #050805;
    --term-green: #4de07a;
    --term-green-dim: #1c8f3f;
    --term-green-faint: #0f4d22;
    --term-amber: #b8ff9e;
    --term-text: #2bd45a;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000;
}

body {
    font-family: "Source Code Pro", Consolas, "Courier New", monospace;
    color: var(--term-text);
    -webkit-font-smoothing: antialiased;
}

.term-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 14px 14px 0;
}

/* ---------- 窗口 ---------- */
.term-window {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--term-bg);
    border: 1px solid #0f3d1e;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 0 24px rgba(51, 255, 102, 0.08), inset 0 0 60px rgba(0, 0, 0, 0.9);
    overflow: hidden;
}

.term-titlebar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #0c130d;
    border-bottom: 1px solid #0f3d1e;
    user-select: none;
}

.term-dots {
    display: inline-flex;
    gap: 6px;
}

.term-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

.term-dot-close { background: #ff5f56; }
.term-dot-min   { background: #ffbd2e; }
.term-dot-max   { background: #27c93f; }

.term-title {
    color: #3faf5f;
    font-size: 12px;
    letter-spacing: 0.04em;
}

/* 标题栏右侧：切换到简约模式（网页）图标 */
.term-web-toggle {
    margin-left: auto;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    color: #3faf5f;
    opacity: 0.8;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.term-web-toggle:hover {
    opacity: 1;
    color: #6fcf8f;
}

/* ---------- 屏幕 ---------- */
.term-screen {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow-y: auto;
    padding: 14px 16px 20px;
    font-size: 14px;
    line-height: 1.55;
    scrollbar-width: thin;
    scrollbar-color: #145a2a transparent;
}

.term-screen::-webkit-scrollbar {
    width: 8px;
}

.term-screen::-webkit-scrollbar-thumb {
    background: #145a2a;
    border-radius: 4px;
}

.term-screen::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- 输出 ---------- */
.term-output {
    white-space: pre-wrap;
    word-break: break-all;
    min-height: 1em;
    color: var(--term-text);
}

.term-line {
    margin-bottom: 2px;
    color: var(--term-text);
}

/* 交互工具提示前缀 (calc) */
.term-line .dim {
    color: #4dd673;
}

.term-line .term-prompt {
    color: var(--term-green);
}

.term-line .term-prompt .u { color: #7dffa8; }
.term-line .term-prompt .h { color: #4de07a; }
.term-line .term-prompt .d { color: #4de07a; }

.term-out {
    margin-bottom: 8px;
}

.term-out .dim {
    color: #4dd673;
}

.term-out .bright {
    color: #8ee6a0;
    font-weight: 600;
}

.term-out .warn {
    color: #ffd97a;
}

.term-out .err {
    color: #ff6b5e;
}

.term-out .hl {
    color: #7edf92;
}

.term-out .sep {
    color: #3dbb5f;
}

/* 启动字符画：禁止自动换行（等宽对齐），超出容器时横向滚动，避免折断变形 */
.term-banner {
    display: block;
    white-space: pre;
    overflow-x: auto;
    padding-bottom: 6px;
    font-family: "Source Code Pro", Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.3;
    scrollbar-width: thin;
    scrollbar-color: #145a2a transparent;
}

.term-out table {
    border-collapse: collapse;
    width: auto;
    max-width: 100%;
    table-layout: auto;
}

.term-out th,
.term-out td {
    text-align: left;
    vertical-align: top;
    padding: 1px 10px 1px 0;
    border: none;
}

.term-out a {
    color: #7dffa8;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-style: dotted;
}

.term-out a:hover {
    color: #d4ffe0;
    text-decoration-style: solid;
}

.term-out .qr-wrap {
    display: inline-block;
    border: 1px solid #145a2a;
    border-radius: 6px;
    background: #000;
    padding: 6px;
    box-shadow: 0 0 12px rgba(51, 255, 102, 0.12);
}

.term-out img.qr {
    width: 320px;
    height: auto;
    max-width: 100%;
    display: block;
    image-rendering: pixelated;
    /* 终端风格滤镜：去色统一后反相染成终端绿（黑底绿码），悬停恢复原图便于扫码 */
    filter: grayscale(1) invert(1) sepia(1) saturate(5) hue-rotate(90deg) brightness(1.05);
    transition: filter 0.15s ease;
}

/* 联系方式二维码：比赞助码小一号 */
.term-out img.qr.qr-sm {
    width: 180px;
}

.term-out .qr-wrap:hover img.qr {
    filter: none;
}

.term-out .indent {
    padding-left: 2ch;
}

/* ---------- 输入行 ---------- */
.term-inputline {
    display: flex;
    align-items: center;
    padding-bottom: 6px;
    white-space: nowrap;
}

/* 程序前缀（如 (starship)）：暗红色 */
.tool-prefix {
    color: #c05656;
    font-weight: 600;
}

/* 输入行提示符：显式绿色（首页内嵌终端 body 被覆盖为深灰，需独立设色） */
.term-inputline .term-prompt {
    color: var(--term-green);
}

.term-cmd {
    white-space: pre;
    color: #f0c860;
}

.term-cursor {
    display: inline-block;
    width: 9px;
    height: 17px;
    margin-left: 2px;
    background: var(--term-green);
    box-shadow: 0 0 8px rgba(77, 224, 122, 0.8);
    animation: term-blink 1s steps(1) infinite;
}

@keyframes term-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* 隐藏的真实输入框：覆盖在输入行上，光标透明 */
.term-input {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    border: 0;
    padding: 0;
    outline: none;
    background: transparent;
}

/* ---------- 页脚 ---------- */
.term-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 8px 4px 10px;
    font-size: 12px;
    color: #126627;
}

.term-footer a {
    color: #126627;
    text-decoration: none;
}

.term-footer a:hover {
    color: #7dffa8;
    text-decoration: underline;
}

/* ---------- 响应式 ---------- */
@media (max-width: 600px) {
    .term-page {
        padding: 6px 6px 0;
    }

    .term-screen {
        font-size: 12.5px;
        padding: 10px 10px 16px;
    }

    .term-out img.qr {
        width: 240px;
        height: auto;
    }

    .term-out img.qr.qr-sm {
        width: 140px;
    }

    .term-title {
        font-size: 11px;
    }
}

/* 星际方舟状态表：CSS 固定宽度标签列，精确对齐（不依赖中文字符宽度） */
.term-out .term-stat-sep {
    display: block;
    color: #4dd673;
}
.term-out .term-stat-row {
    display: block;
    white-space: pre;
}
.term-out .term-stat-label {
    display: inline-block;
    width: 7em;
}

/* 笑傲江湖（及文字RPG）高亮样式 */
.term-out .npc-name { color: #ffd966; }
.term-out .shop-item { color: #7ee787; }
.term-out .gold { color: #ffd700; }
.term-out .dmg { color: #ff7b72; }
.term-out .hl { color: #79c0ff; font-weight: bold; }
.term-out .prefix { color: #4dd673; }
.term-out .system { color: #ffa657; }
.term-out .combat { color: #ff7b72; }
.term-out .title-line { color: #b6ffcb; }

/* ---------- 窗口拖拽调高度（宽度不变） ---------- */
.term-resizer {
    flex: 0 0 auto;
    height: 8px;
    cursor: row-resize;
    position: relative;
    touch-action: none;
    background: transparent;
}

.term-resizer::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: #145a2a;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.term-resizer:hover::after,
body.term-resizing .term-resizer::after {
    opacity: 1;
    background: var(--term-green);
    box-shadow: 0 0 8px rgba(77, 224, 122, 0.6);
}

body.term-resizing {
    cursor: row-resize;
    user-select: none;
    -webkit-user-select: none;
}

body.term-resizing .term-screen {
    pointer-events: none; /* 拖拽期间禁用屏幕滚动/聚焦，避免干扰 */
}