/* 主题规则层：全部颜色/贴图来自 theme-adventure.css / theme-space.css 的 CSS 变量，
   切换 html[data-theme] 即整站换肤。布局、尺寸、动画与交互逻辑不变。 */

body {
    color: var(--txt);
    background: var(--page-bg);
    padding: 110px 10px 10px; /* 顶部固定留白：宠物向上生长，主容器不动 */
}

h1 {
    color: var(--txt);
    text-shadow: none;
}

.sheet-head h2, .win-title { color: var(--txt); }

.overlay { background: var(--overlay); }

/* —— 通用：9-slice 面板 —— */
.game-wrapper,
.home-card,
.sheet,
.win-sheet {
    position: relative;
    border: 22px solid transparent;
    border-image-source: var(--panel-img);
    border-image-slice: var(--panel-slice) fill;
    border-image-repeat: stretch;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 10px 26px var(--shadow);
    background-clip: padding-box;
}

/* —— 3D 宠物（无容器，脚踩面板顶部边框线，纯装饰不挡操作） —— */

#petRow .pet-line {
    display: flex;
    align-items: center;
    gap: 10px;
}
#petRow .pet-pick-btn { margin-left: auto; }
#petRow .switch { margin-left: 12px; }
#petRow .set-mini {
    font-size: 12px;
    font-weight: 600;
    color: var(--txt2);
}
.pet-size { flex: 1; accent-color: var(--switch-on); cursor: pointer; }
.set-col.dim { opacity: 0.5; }
.pet-widget {
    position: absolute;
    top: -128px;
    left: 0;
    right: 0;
    width: auto;
    height: 128px;
    pointer-events: none;
    z-index: 5;
}

/* —— 首页模式瓷片 —— */
.mode-tile, .extra-tile {
    border: 12px solid transparent;
    border-image-source: var(--panel-img);
    border-image-slice: var(--panel-slice) fill;
    border-image-repeat: stretch;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 5px 14px var(--shadow);
    background: none;
    color: var(--txt);
}
.extra-tile svg circle { fill: var(--bar-a); }
.extra-tile.disabled, .mode-tile.disabled {
    border-image-source: var(--panel-dark-img);
    color: var(--txt2);
    opacity: 1;
}
.extra-tile.disabled .badge { color: var(--txt2); }

/* —— 难度行 / 经典关卡行 —— */
.size-row {
    border: 12px solid transparent;
    border-image-source: var(--panel-img);
    border-image-slice: var(--panel-slice) fill;
    border-image-repeat: stretch;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    background: none;
}
.size-row.current {
    border-image-source: var(--btn-accent-img);
    border-image-slice: var(--accent-slice) fill;
    color: #ffffff;
}
.size-row.cleared { color: var(--ok); }
.size-row.cleared .size-stage { color: var(--ok); }
.size-row.locked {
    border-image-source: var(--panel-dark-img);
    color: var(--txt2);
    opacity: 1;
}
.size-stage { color: var(--txt); }
.size-pct { color: var(--txt2); }
.size-row.current .size-pct { color: #ffffff; }
.size-row.locked .size-stage { color: var(--txt2); }
.size-idx { color: var(--txt2); }
.size-row.current .size-idx { color: #ffffff; opacity: 0.85; }
.size-row.locked .size-idx { color: var(--txt2); opacity: 0.8; }
.bar { background: var(--bar-track); }
.bar-fill { background: linear-gradient(90deg, var(--bar-a), var(--bar-b)); }

/* —— 数字模式关卡芯片 —— */
.level-chip {
    border: 10px solid transparent;
    border-image-source: var(--panel-img);
    border-image-slice: var(--panel-slice) fill;
    border-image-repeat: stretch;
    border-radius: 0;
    background: none;
    color: var(--txt);
    box-shadow: none;
}
.level-chip.cleared {
    background: none;
    color: var(--ok);
}
.level-chip.current {
    border: 10px solid transparent;
    border-image-source: var(--btn-accent-img);
    border-image-slice: var(--accent-slice) fill;
    background: none;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: 0 5px 14px var(--shadow);
}
.level-chip.current:hover { background: none; filter: brightness(1.08); }
.level-chip.locked {
    border-image-source: var(--panel-dark-img);
    color: var(--txt2);
    opacity: 1;
}
.level-chip.cleared::after { background: var(--ok); }

/* —— 按钮 —— */
.btn {
    border: 12px solid transparent;
    border-image-source: var(--btn-img);
    border-image-slice: var(--btn-slice) fill;
    border-image-repeat: stretch;
    border-radius: 0;
    background: none;
    color: var(--txt);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.btn:hover { background: none; filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.start-btn {
    border: 14px solid transparent;
    border-image-source: var(--btn-accent-img);
    border-image-slice: var(--accent-slice) fill;
    border-radius: 0;
    background: none;
    color: #ffffff;
    box-shadow: 0 6px 16px var(--shadow);
}
.start-btn:hover { background: none; filter: brightness(1.08); }
.btn-primary {
    border: 12px solid transparent;
    border-image-source: var(--btn-accent-img);
    border-image-slice: var(--accent-slice) fill;
    border-radius: 0;
    background: none;
    color: #ffffff;
    box-shadow: 0 6px 16px var(--shadow);
}
.btn-primary:hover { background: none; filter: brightness(1.08); }
.back-btn {
    background: var(--input-bg);
    border: 2px solid var(--board-ring);
    box-shadow: 0 4px 10px var(--shadow);
    color: var(--txt2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.set-save {
    border: 10px solid transparent;
    border-image-source: var(--btn-img);
    border-image-slice: var(--btn-slice) fill;
    border-radius: 0;
    background: none;
    color: var(--txt);
    box-shadow: none;
    padding: 6px 0;
}
.set-save:hover { background: none; filter: brightness(1.08); }

/* —— 统计栏 —— */
.stat {
    background: none;
    border: 10px solid transparent;
    border-image-source: var(--panel-img);
    border-image-slice: var(--panel-slice) fill;
    border-radius: 0;
    box-shadow: none;
    background-clip: padding-box;
}
.stat .label { color: var(--txt2); }
.stat .value { color: var(--txt); }

/* —— 状态行 —— */
.status { color: var(--txt2); }
.status.win { color: var(--ok); text-shadow: 0 0 12px var(--board-glow); }

/* —— 徽标 —— */
.badge { color: var(--txt2); background: var(--bar-track); }

/* —— 设置 —— */
.set-row, .set-col {
    border: 10px solid transparent;
    border-image-source: var(--panel-img);
    border-image-slice: var(--panel-slice) fill;
    border-radius: 0;
    background: none;
    box-shadow: none;
    background-clip: padding-box;
}
.set-label { color: var(--txt); white-space: nowrap; }
.set-input {
    background: var(--input-bg);
    color: var(--txt);
    box-shadow: inset 0 0 0 1.5px var(--bar-track);
}
.set-input:focus { box-shadow: inset 0 0 0 2px var(--bar-b); }
.switch { background: var(--bar-track); }
.switch.on { background: var(--switch-on); }
.seg { background: var(--bar-track); box-shadow: inset 0 0 0 1px var(--bar-track); }
.seg button {
            white-space: nowrap; color: var(--txt2); }
.seg button.on { background: var(--switch-on); color: #ffffff; }
.set-note { color: var(--ok); }

/* —— 棋盘容器 —— */
#gameCanvas {
    background: var(--board-fill);
    box-shadow: 0 8px 20px var(--shadow), inset 0 0 0 2px var(--board-ring);
}

/* 宠物画布必须全透明（只有宠物本身） */
.pet-widget canvas {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}