/* 配色取自安卓端 Theme.kt 的 Light/Dark Scheme，深浅由 切换。 */
:root[data-theme="light"] {
--bg: #faf7f0;
--surface: #fffdf8;
--surface-variant: #ede8dc;
--on-bg: #23211c;
--on-variant: #4c4842;
--primary: #5f7f68;
--on-primary: #ffffff;
--primary-container: #d3e3d7;
--error: #b3402f;
--panel: #edeae3;
}
:root[data-theme="dark"] {
--bg: #14161a;
--surface: #1d2025;
--surface-variant: #2c2f34;
--on-bg: #e6e2da;
--on-variant: #bfbbb3;
--primary: #8fb39a;
--on-primary: #11291b;
--primary-container: #2f4738;
--error: #e58a78;
--panel: #23262b;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--on-bg);
font: 16px/1.5 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
-webkit-text-size-adjust: 100%;
}
#app {
max-width: 560px;
margin: 0 auto;
min-height: 100dvh;
}
.screen {
padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
h1 {
font-size: 30px;
margin: 24px 0 12px;
}
h2 {
font-size: 20px;
margin: 0;
}
h3 {
font-size: 15px;
margin: 18px 0 8px;
}
p {
margin: 8px 0;
}
.muted {
color: var(--on-variant);
}
.small {
font-size: 13px;
}
.head {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 12px;
}
.link {
background: none;
border: 0;
color: var(--primary);
font: inherit;
cursor: pointer;
padding: 6px 8px;
}
.stack {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.btn {
display: block;
width: 100%;
padding: 12px 16px;
border-radius: 22px;
border: 1px solid var(--primary);
background: transparent;
color: var(--primary);
font: inherit;
cursor: pointer;
}
.btn.primary {
background: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
}
.btn.danger {
border-color: var(--error);
color: var(--error);
margin-top: 16px;
}
.card {
background: var(--surface);
border-radius: 14px;
}
.card.pad {
padding: 12px;
}
.list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
cursor: pointer;
}
.row-title {
font-weight: 600;
}
.count {
color: var(--on-variant);
font-weight: 600;
}
.count.done {
color: var(--primary);
}
.level-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.level {
aspect-ratio: 1;
border: 0;
border-radius: 10px;
background: var(--surface-variant);
color: inherit;
font: inherit;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
.level.solved {
background: var(--primary-container);
}
.level.solved .num {
font-weight: 700;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
padding: 7px 14px;
border-radius: 18px;
border: 1px solid var(--surface-variant);
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
}
.chip.on {
background: var(--primary-container);
border-color: var(--primary);
}
.setting {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 0;
}
.setting input {
width: 20px;
height: 20px;
accent-color: var(--primary);
}
/* ── 对局 ─────────────────────────────────────────────── */
.play {
display: flex;
flex-direction: column;
min-height: 100dvh;
padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
gap: 6px;
}
.play-head {
display: flex;
align-items: center;
gap: 4px;
}
.play-title {
flex: 1;
}
.timer {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.hearts {
align-self: center;
background: var(--surface-variant);
border-radius: 999px;
padding: 3px 18px;
display: flex;
gap: 6px;
font-size: 20px;
line-height: 1.2;
color: var(--on-variant);
}
.heart.on {
color: var(--error);
}
.rules {
display: flex;
background: var(--surface);
border-radius: 14px;
height: 46px;
align-items: center;
color: var(--on-variant);
font-size: 11px;
line-height: 13px;
text-align: center;
}
.rules span {
flex: 1;
}
.rules span + span {
border-left: 1px solid var(--surface-variant);
}
.remaining {
align-self: center;
background: var(--surface);
border-radius: 999px;
padding: 5px 14px;
font-size: 13px;
}
.remaining b {
color: var(--error);
font-size: 14px;
}
/* 棋盘吃掉中间的剩余空间，并且始终是正方形 —— 小屏上也不会把下面的按钮挤出去 */
.board-panel {
flex: 1;
min-height: 0;
aspect-ratio: 1;
max-width: min(100%, calc(100dvh - 320px));
align-self: center;
background: var(--panel);
border-radius: 16px;
padding: 6px;
}
.board {
width: 100%;
height: 100%;
display: block;
touch-action: none;
cursor: pointer;
}
.tools {
display: flex;
gap: 6px;
}
.tool {
flex: 1;
border: 0;
border-radius: 12px;
background: var(--surface-variant);
color: var(--on-variant);
font: inherit;
cursor: pointer;
padding: 6px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
.tool b {
font-size: 17px;
font-weight: 400;
}
.tool span {
font-size: 11px;
}
.tool:disabled {
opacity: 0.4;
cursor: default;
}
.tool.on {
background: var(--primary-container);
}
/* 高度固定：通关提示走弹窗，不会因为多一行字把棋盘往上挤 */
.hint-slot {
min-height: 64px;
}
.hint-slot p {
margin: 0 4px;
}
/* ── 弹窗与加载 ─────────────────────────────────────────── */
.scrim {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: grid;
place-items: center;
padding: 24px;
}
.dialog {
background: var(--surface);
color: var(--on-bg);
border-radius: 20px;
padding: 22px;
max-width: 340px;
width: 100%;
}
.dialog h3 {
margin: 0 0 8px;
font-size: 18px;
}
.dialog-actions {
display: flex;
gap: 8px;
margin-top: 18px;
}
.dialog-actions .btn {
width: auto;
flex: 1;
}
.loading {
display: grid;
place-items: center;
min-height: 60dvh;
gap: 12px;
color: var(--on-variant);
}
.spinner {
width: 30px;
height: 30px;
border: 3px solid var(--surface-variant);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 0.9s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}