/* 2048 · 灵感便签小程序 */

* { box-sizing: border-box; }

:root {
    --anyini-bg: #e9e9e7;
    --anyini-bg-soft: #e1e1de;
    --anyini-text: #2a2a2a;
    --anyini-muted: rgba(42, 42, 42, 0.65);
    --anyini-line: rgba(42, 42, 42, 0.9);
    /* 得分/最佳统计框与排行榜宽度联动：排行榜 = 两个框 + 间距 */
    --stats-w: 86px;
    --stats-gap: 10px;
}

body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
    margin: 0;
    min-height: 100vh;
    font-family: "Inter", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--anyini-text);
    background: var(--anyini-bg);
}

html { overscroll-behavior: none; -webkit-overscroll-behavior: none; }

/* 禁用双击缩放（double-tap zoom）：viewport 的 user-scalable=no 在 iOS 10+
   会被无视，touch-action: manipulation 才是标准做法——保留平移/捏合，
   只干掉双击放大。快速连点按钮（疯狂模式）时页面不会突然缩放跳动 */
html,
body {
    touch-action: manipulation;
}

.game-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 24px 40px;
}

/* 独立页面顶部返回灵感便签的链接 */
.back-link {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 0.82rem;
    color: var(--anyini-muted);
    text-decoration: none;
    border-bottom: 1px solid rgba(42, 42, 42, 0.4);
    padding-bottom: 1px;
}
.back-link:hover { opacity: 0.8; }

/* ---------- header ---------- */
.game-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.game-title h1 {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--anyini-text);
}

.game-sub { margin: 6px 0 0; font-size: 0.85rem; color: var(--anyini-muted); }

.game-stats { display: flex; gap: var(--stats-gap); }

.stat {
    min-width: var(--stats-w);
    padding: 8px 14px;
    border: 1px solid var(--anyini-line);
    background: var(--anyini-bg-soft);
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--anyini-muted);
}

.stat-value {
    display: block;
    margin-top: 2px;
    font-size: 1.25rem;
    font-weight: 600;
}

/* ---------- body layout ---------- */
/* 单列布局：棋盘居中，下方控制行（重开 | 迷你排行榜 | 求助） */
.game-body { }

.game-left { position: relative; }

/* ---------- grid ---------- */
/* 棋盘元素必须用 content-box：JS 按原版算法定位方块（容器 460 内容宽 +
   padding 20，方块算到 480 恰好贴合内容边缘），全局 border-box 会把内容
   区压成 420 导致第 4 行/列方块溢出棕色边界 */
#grid-container,
.grid-cell,
.number-cell {
    box-sizing: content-box;
}

#grid-container {
    width: 460px;
    height: 460px;
    padding: 20px;
    background-color: #bbada0;
    border-radius: 10px;
    position: relative;
    margin: 0 auto;
    /* JS 执行前格子还没定位（堆在左上角），先隐藏棋盘避免首帧闪出叠在一起的浅棕色格子；
       main2048.js 在 prepareForMobile() 定位完成后立即恢复显示 */
    visibility: hidden;
}

.grid-cell {
    width: 100px;
    height: 100px;
    border-radius: 6px;
    background-color: #ccc0b3;
    position: absolute;
}

.number-cell {
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 60px;
    line-height: 100px;
    text-align: center;
    position: absolute;
}

/* 小管家建议：棋盘中央方向箭头（放在 #grid-container 内，inset:0 跟随容器尺寸） */
.suggest-arrow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.suggest-arrow[hidden] {
    display: none;
}

.suggest-arrow span {
    font-size: 72px;
    color: #fff;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
    animation: suggest-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes suggest-pulse {
    from { transform: translateY(0) scale(1); opacity: 0.9; }
    to { transform: translateY(-6px) scale(1.15); opacity: 1; }
}

/* ---------- controls ----------
 * 一行三块：重新开局 | 迷你排行榜（前两名）| 向小管家求助。
 * 布局整体压缩到一个屏幕（手机端），上划手势不会被页面滚动抢走。
 */
.game-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
    flex-wrap: wrap;
}

#newgamebutton,
.help-btn {
    font-family: inherit;
    border: 1px solid var(--anyini-line);
    color: var(--anyini-text);
    cursor: pointer;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: background 0.15s ease;
}

/* 重新开局按钮：圆圈箭头图标 + 醒目琥珀色，区别于普通灰按钮 */
#newgamebutton {
    padding: 8px 14px;
    background: #c9a227;
    border-color: #c9a227;
    color: #fff;
    font-weight: 600;
}

#newgamebutton:hover { background: #b08f1f; border-color: #b08f1f; }

/* 迷你排行榜：重新开局右侧，只显示前两名，右下角放得下的紧凑面板 */
.board-mini {
    border: 1px solid var(--anyini-line);
    background: var(--anyini-bg-soft);
    padding: 5px 10px 6px;
    min-width: 0;
}

.board-mini-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}

.board-mini-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.board-mini-list { display: flex; flex-direction: column; gap: 2px; }

.board-empty { margin: 0; font-size: 0.68rem; color: var(--anyini-muted); }

.rank-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.rank-pos { flex: 0 0 auto; }

.rank-name {
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.rank-me { font-style: normal; color: #8f7a66; }

.rank-score { margin-left: auto; font-weight: 600; }

.rules-btn {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--anyini-line);
    border-radius: 50%;
    background: transparent;
    color: var(--anyini-muted);
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rules-btn:hover { background: #d9d9d6; }

/* 向小管家求助；已求助提示简化为按钮下方一行小字 */
.help-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.help-btn {
    padding: 8px 14px;
    background: #fff;
}

.help-btn:hover { background: #f3f1ec; }

.help-banner {
    font-size: 0.66rem;
    color: #7a5c00;
    text-align: center;
}

.help-status {
    min-height: 1.3em;
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--anyini-muted);
    text-align: center;
}

/* 规则弹窗 */
.rules-box { text-align: left; }
.rules-box h2 { text-align: center; }
.rules-box ul { margin: 0 0 16px; padding: 0 0 0 18px; font-size: 0.85rem; line-height: 1.9; }

/* ---------- game over modal ---------- */
/* .modal 的 display:flex 会压过 UA 的 [hidden]{display:none}，
   必须显式写 [hidden] 状态，否则弹窗常驻关不掉 */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(42, 42, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.modal[hidden] {
    display: none;
}

.modal-box {
    background: #fff;
    border: 1px solid var(--anyini-line);
    padding: 28px 36px;
    text-align: center;
    min-width: 280px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.modal-box h2 { margin: 0 0 10px; font-size: 1.3rem; }

.modal-score { margin: 0 0 8px; font-size: 0.95rem; }
.modal-score b { font-size: 1.5rem; }

.modal-msg { margin: 0 0 18px; font-size: 0.85rem; color: var(--anyini-muted); }

.again-btn {
    padding: 10px 28px;
    border: 0;
    border-radius: 6px;
    background: #8f7a66;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.again-btn:hover { background: #9f8b77; }

/* 确认弹窗按钮排 */
.confirm-actions { display: flex; justify-content: center; gap: 10px; margin-top: 4px; }

/* 取消 = 幽灵按钮，弱化；确定 = 实心 */
.ghost-btn {
    background: transparent;
    border: 1px solid var(--anyini-line);
    color: var(--anyini-text);
}

.ghost-btn:hover { background: var(--anyini-bg-soft); }

/* ---------- mobile ----------
 * 注意：棋盘与方块的尺寸完全由 JS 按屏幕宽度计算（原版算法），CSS 媒体查询
 * 只负责布局换行，绝不能覆盖 grid/cell 尺寸，否则和 JS 定位打架导致溢出。
 */
@media (max-width: 640px) {
    .suggest-arrow span { font-size: 56px; }
    /* 棋盘 = 0.92×屏宽，左右留白收窄避免横向溢出（0.92w + 48 > w）；
       其余元素压缩，保证整页一个屏幕放得下（手势上划不触发页面滚动） */
    .game-wrap { padding: 12px 12px 18px; }
    .back-link { margin-bottom: 8px; }
    .game-head { margin-bottom: 8px; }
    .game-title h1 { font-size: 26px; }
    /* 小屏藏副标题省一行 */
    .game-sub { display: none; }
    .stat { padding: 4px 8px; min-width: 72px; }
    .stat-value { font-size: 1.05rem; }
    .game-ctrl { gap: 10px; margin-top: 10px; }
    .board-mini { padding: 4px 8px 5px; }
    .help-status { margin-top: 4px; }
}