/* ===== 游戏页通用（青铜罗盘风格）===== */
.play-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 20px 72px;
}
.play-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: #d4a853;
    text-align: center;
    margin-bottom: 8px;
    text-shadow: 0 0 18px rgba(212,168,83,0.25);
    letter-spacing: 0.06em;
}
.play-intro {
    color: #8a7a5a;
    max-width: 58ch;
    margin: 0 auto 8px;
    text-align: center;
    line-height: 1.7;
    font-size: 0.9rem;
}
.game-frame {
    position: relative;
    width: min(320px, 92vw);
    margin: 22px auto 16px;
    border: 2px solid #5a4a2a;
    border-radius: 10px;
    background: radial-gradient(ellipse at 50% 30%, #1a1508 0%, #0d0b06 100%);
    box-shadow: inset 0 0 40px rgba(90,74,42,0.15), 0 4px 24px rgba(0,0,0,0.5);
    padding: 6px;
}
.game-frame.grid-frame {
    width: min(380px, 92vw);
}
#merge-canvas {
    display: block;
    width: 100%;
    aspect-ratio: 320 / 520;
    border-radius: 8px;
    background: transparent;
    touch-action: none;
    cursor: crosshair;
}

/* 结算浮层 */
.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13,11,6,0.92);
    border-radius: 8px;
    z-index: 20;
}
.overlay[hidden] { display: none; }
.overlay-panel { text-align: center; padding: 24px; }
.ov-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.14em;
    color: #c44;
    margin-bottom: 8px;
}
.ov-cause {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: #8a7a5a;
    margin: 0 0 12px;
}
.ov-score {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
    color: #d4a853;
}
.ov-best {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: #6a5a3a;
    margin: 8px 0 20px;
}
.ov-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ov-btn {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    color: #8a7a5a;
    background: transparent;
    border: 1px solid #3a3020;
    border-radius: 4px;
    padding: 9px 13px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}
.ov-btn:hover { color: #d4a853; border-color: #d4a853; }
.ov-btn.primary { color: #0d0b06; background: #d4a853; border-color: #d4a853; font-weight: 700; }
.ov-btn.primary:hover { background: #e8c060; border-color: #e8c060; }

/* 说明与链接 */
.play-how {
    max-width: 540px;
    margin: 0 auto;
    color: #6a5a3a;
    font-size: 0.85rem;
    line-height: 1.7;
    text-align: center;
}
.play-how strong { color: #d4a853; }
.play-links {
    text-align: center;
    margin-top: 22px;
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.play-links a {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: #6a5a3a;
    text-decoration: none;
    border-bottom: 1px solid #3a3020;
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}
.play-links a:hover { color: #d4a853; border-color: #d4a853; }

/* ===== 方格版 ===== */
.g-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 380px;
    margin: 0 auto;
    padding: 0 4px;
}
.g-stat { display: flex; flex-direction: column; }
.g-stat.right { align-items: flex-end; }
.g-stat-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; color: #6a5a3a; }
.g-stat-val { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: #d4a853; line-height: 1; }

.grid-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.cell {
    background: #1a1508;
    border: 1px solid #3a3020;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1;
    transition: border-color 0.15s, box-shadow 0.15s;
    overflow: visible;
}
.cell.selected { border-color: #d4a853; box-shadow: 0 0 0 2px rgba(212,168,83,0.4); }
.cell.tool-on { border-color: #c44; border-style: dashed; }
.cell-orb {
    width: 92%; height: 92%; border-radius: 7px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 1px 3px rgba(255,255,255,0.12);
    position: relative;
}
.cell-orb .co-n { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 5vw, 1.5rem); line-height: 1; }
.cell-orb .co-glyph { font-family: serif; font-size: clamp(0.55rem, 2.5vw, 0.75rem); opacity: 0.65; margin-top: 1px; line-height: 1; }
.cell-orb .co-glyph.big { font-family: serif; font-weight: 700; font-size: clamp(1.5rem, 7vw, 2.2rem); opacity: 1; margin-top: 0; }
.cell-orb .co-name { font-size: clamp(0.45rem, 2vw, 0.55rem); font-family: var(--font-mono); opacity: 0.5; line-height: 1; }
.cell-orb.pop { animation: orbpop 0.28s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes orbpop { 0% { transform: scale(0.3); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }

/* 合并特效：闪光环 */
.cell-orb.merge-flash::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 10px;
    border: 2px solid #d4a853;
    animation: merge-ring 0.4s ease-out forwards;
    pointer-events: none;
}
@keyframes merge-ring {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

100% { transform: none; } }

/* 道具栏 */
.tool-bar { display: flex; justify-content: center; gap: 12px; margin: 14px 0 4px; }
.tool-btn {
    position: relative; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
    color: #8a7a5a; background: #1a1508; border: 1px solid #3a3020;
    border-radius: 5px; padding: 8px 14px; cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.tool-btn:hover { color: #d4a853; border-color: #d4a853; }
.tool-btn.active { color: #0d0b06; background: #d4a853; border-color: #d4a853; }
.tool-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tool-count { display: block; font-size: 0.58rem; color: #d4a853; margin-top: 2px; }
.tool-btn.active .tool-count { color: #0d0b06; }
#tool-hint { text-align: center; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; color: #d4a853; min-height: 1em; opacity: 0; transition: opacity 0.3s; }
#tool-hint.show { opacity: 1; }

/* 横幅 */
.g-banner {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em;
    color: #d4a853; background: rgba(13,11,6,0.85); padding: 5px 12px; border-radius: 4px;
    border: 1px solid #5a4a2a; opacity: 0; pointer-events: none; transition: opacity 0.3s; white-space: nowrap;
}
.g-banner.show { opacity: 1; }
/* ===== 落子版 HUD（HTML 元素，不在 canvas 内）===== */
.merge-hud {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 320px;
    margin: 0 auto 6px;
    padding: 0 8px;
}
.merge-hud-left, .merge-hud-right { display: flex; flex-direction: column; }
.merge-hud-right { align-items: flex-end; }
.merge-hud-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; color: #6a5a3a; }
.merge-hud-val { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: #d4a853; line-height: 1; }

/* ===== 方格版金属质感球 ===== */
.cell-orb {
    background: linear-gradient(145deg, rgba(255,255,255,0.18) 0%, transparent 40%, rgba(0,0,0,0.25) 100%) !important;
    border: 1.5px solid rgba(212,168,83,0.3);
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.2), inset 0 -2px 5px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.4) !important;
}
/* 各阶底色用 CSS 变量覆盖（保留 JS inline 的 background 作为底色，渐变叠在上面）*/
.cell-orb.t1 { background: linear-gradient(145deg, rgba(255,255,255,0.22) 0%, #b8a882 35%, #8a7a5a 100%) !important; }
.cell-orb.t2 { background: linear-gradient(145deg, rgba(255,255,255,0.12) 0%, #5a4a3a 35%, #3a2a1a 100%) !important; }
.cell-orb.t3 { background: linear-gradient(145deg, rgba(255,255,255,0.15) 0%, #6a9a7a 35%, #3a6a4a 100%) !important; }
.cell-orb.t4 { background: linear-gradient(145deg, rgba(255,255,255,0.15) 0%, #4a8a5a 35%, #2a5a3a 100%) !important; }
.cell-orb.t5 { background: linear-gradient(145deg, rgba(255,255,255,0.2) 0%, #d4a853 35%, #9a7a33 100%) !important; }
.cell-orb.t6 { background: linear-gradient(145deg, rgba(255,255,255,0.25) 0%, #e8dcc0 35%, #b8a882 100%) !important; }
.cell-orb.t7 { background: linear-gradient(145deg, rgba(255,255,255,0.15) 0%, #c44a3a 35%, #8a2a1a 100%) !important; }
.cell-orb.t8 { background: linear-gradient(145deg, rgba(255,255,255,0.3) 0%, #f0e8d0 35%, #c8b890 100%) !important; }
.cell-orb.t9 { background: linear-gradient(145deg, rgba(255,255,255,0.15) 0%, #8a4aaa 35%, #5a2a7a 100%) !important; box-shadow: inset 0 1px 3px rgba(255,255,255,0.2), inset 0 -2px 5px rgba(0,0,0,0.35), 0 0 18px rgba(138,74,170,0.5) !important; }
.cell-orb.t10 { background: linear-gradient(145deg, rgba(255,255,255,0.3) 0%, #e8d44d 35%, #b8a030 100%) !important; box-shadow: inset 0 1px 3px rgba(255,255,255,0.3), inset 0 -2px 5px rgba(0,0,0,0.3), 0 0 24px rgba(232,212,77,0.6) !important; }
/* 落子版消除按钮提示 */
.tool-hint-text {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    color: #d4a853;
    min-height: 1em;
    margin: 4px 0 0;
}
/* 方格版文字颜色：按底色明暗配字色（浅色底用深字，深色底用浅字）*/
.cell-orb.t1, .cell-orb.t5, .cell-orb.t6, .cell-orb.t8, .cell-orb.t10 { color: #1a1f2e; }
.cell-orb.t2, .cell-orb.t3, .cell-orb.t4, .cell-orb.t7, .cell-orb.t9 { color: #f5f0e0; }
/* 滑动中的球提到最上层，不被其他格子背景遮住 */
.cell-orb.moved { position: relative; z-index: 10; }
/* 续命按钮 */
#ov-remove-btn, #ov-clear-btn, #ov-swap-btn, #ov-upgrade-btn {
    background: transparent;
    color: #d4a853;
    border: 1px solid #d4a853;
}
#ov-remove-btn:hover, #ov-clear-btn:hover, #ov-swap-btn:hover, #ov-upgrade-btn:hover {
    background: rgba(212,168,83,0.15);
}
.badge-count {
    display: inline-block;
    background: #d4a853;
    color: #0d0b06;
    border-radius: 3px;
    padding: 0 5px;
    font-size: 0.6rem;
    margin-left: 4px;
}
/* 1-9 阶差异化形状（圆/方/菱/六/五/双圈星/八/光环/紫极）*/
.cell-orb.t1 { border-radius: 50%; }
.cell-orb.t2 { border-radius: 3px; }
.cell-orb.t3 { clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%); }
.cell-orb.t4 { clip-path: polygon(50% 0%,88% 25%,88% 75%,50% 100%,12% 75%,12% 25%); }
.cell-orb.t5 { clip-path: polygon(50% 0%,100% 38%,85% 100%,15% 100%,0% 38%); }
.cell-orb.t6 { border-radius: 50%; border: 2px double rgba(255,255,255,0.6); }
.cell-orb.t7 { clip-path: polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%); border: 1px dashed rgba(255,92,77,0.5); }
.cell-orb.t8 { border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35), 0 0 0 2px rgba(255,255,255,0.25) !important; }
.cell-orb.t9 { border-radius: 50%; box-shadow: inset 0 1px 3px rgba(255,255,255,0.2), inset 0 -2px 5px rgba(0,0,0,0.35), 0 0 18px rgba(168,85,247,0.5) !important; }/* 多边形阶一体感：cell 边框透明，orb 撑满 */
.cell:has(.cell-orb.t3), .cell:has(.cell-orb.t4), .cell:has(.cell-orb.t5), .cell:has(.cell-orb.t7) { border-color: transparent; background: transparent; }