/* ========== 全局基础 ========== */
:root{
    --gap:1px;               /* 宫格间隙 */
    --cell:min(52px, calc((100vw - 36px) / 9));  /* 单元格宽高：小屏自适应不溢出 */
    --main:#0f172a;          /* 主色调（站点文字色） */
    --accent:#0d9488;        /* 高亮（站点 teal 主色） */
    --accent-dark:#0f766e;   /* hover 加深 */
    --error:#dc2626;         /* 冲突 */
    --fixed-bg:#f1f5f9;      /* 固定数字背景 */
    --body-bg:#f1f5f9;       /* 页面背景 */
    --border:#e2e8f0;        /* 站点描边色 */
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    background:var(--body-bg);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:30px 20px;
    min-height:100vh;
    color:var(--main);
}

h1{
    margin-bottom:20px;
    font-size:2rem;
    letter-spacing:2px;
    color:var(--main);
}

/* ========== 站点统一顶部导航条 ========== */
.site-topbar{
    align-self:stretch;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 18px;
    margin:-30px -20px 24px;   /* 抵消 body 内边距，通栏贴顶 */
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--border);
}
.site-topbar-back{
    color:var(--accent);
    text-decoration:none;
    font-size:14px;
    font-weight:600;
}
.site-topbar-back:hover{ color:var(--accent-dark); }
.site-topbar-brand{
    color:var(--main);
    font-weight:700;
    font-size:14px;
    letter-spacing:1px;
}

/* ========== Google 广告位（导航条下方，预留高度防跳动） ========== */
#ad-strip{
    align-self:stretch;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:68px;
    padding:0 14px;
    margin-bottom:8px;
}
#ad-strip ins{ width:100%; }

/* ========== 控制栏 ========== */
.controls{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:25px;
    flex-wrap:wrap;
    justify-content:center;
}

select,button{
    padding:8px 16px;
    font-size:16px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    transition:all .2s;
}

select{
    background:#fff;
    color:var(--main);
}

button{
    background:var(--accent);
    color:#fff;
}

button:hover{
    background:var(--accent-dark);
}

/* ========== 游戏板 ========== */
#board{
    display:grid;
    grid-template-columns:repeat(9,var(--cell));
    grid-template-rows:repeat(9,var(--cell));
    gap:var(--gap);
    background:var(--main);
    padding:var(--gap);
    border-radius:8px;
    box-shadow:0 4px 20px rgba(0,0,0,.15);
}

.cell{
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:600;
    cursor:pointer;
    user-select:none;
    transition:background .25s;
}

.cell:hover{
    background:#f1f2f6;
}

/* 3×3 粗边框 */
.cell:nth-child(3n){
    border-right:calc(var(--gap)*2) solid var(--main);
}
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54){
    border-bottom:calc(var(--gap)*2) solid var(--main);
}

/* ========== 状态高亮 ========== */
.cell.fixed{
    background:var(--fixed-bg);
    color:var(--main);
    cursor:default;
}

.cell.selected{
    background:var(--accent);
    color:#fff;
}

.cell.highlight{
    background:#fffacd;
}

/* 与选中数字相同的格：teal 描边圈出 */
.cell.same{
    box-shadow:inset 0 0 0 2px var(--accent);
}

.cell.error{
    background:var(--error);
    color:#fff;
}

/* 提示填入的数字：teal 标色区分 */
.cell.hinted .cell-value{
    color:var(--accent);
}

/* ---------- 格内结构：正式值 / 备注九宫格 ---------- */
.cell-value{
    line-height:1;
}

.cell-notes{
    display:none;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    width:100%;
    height:100%;
    padding:2px;
}
.cell-notes span{
    font-size:calc(var(--cell) * 0.21);
    font-weight:500;
    color:#64748b;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

/* ---------- 完成庆祝：波浪弹跳 ---------- */
#board.celebrate .cell{
    animation:cellPop .5s ease both;
}
@keyframes cellPop{
    0%{ transform:scale(1); }
    40%{ transform:scale(.82); background:var(--accent); color:#fff; }
    100%{ transform:scale(1); }
}

/* ========== 数字键盘 ========== */
.number-pad{
    margin-top:25px;
    display:flex;               /* 改为弹性布局 */
    flex-wrap:wrap;             /* 允许换行 */
    justify-content:center;
    gap:8px;
    max-width:100%;             /* 不让它超出屏幕 */
}

.num,#clearBtn{
    flex: 1 1 44px;
    height:44px;
    font-size:18px;
    font-weight:600;
    border:none;
    border-radius:6px;
    background:#fff;
    color:var(--main);
    cursor:pointer;
    transition:all .2s;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
}

.num:hover,#clearBtn:hover{
    background:var(--accent);
    color:#fff;
}

#clearBtn{
    flex:1 1 96px;
}

/* ========== 工具栏（备注/撤销/重做/提示） ========== */
.toolbar{
    display:flex;
    gap:8px;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.toolbar button{
    padding:7px 14px;
    font-size:14px;
    background:#fff;
    color:var(--main);
    border:1px solid var(--border);
    box-shadow:0 2px 4px rgba(0,0,0,.08);
}

.toolbar button:hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}

/* 备注模式开启态 */
.toolbar button.active{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}

.toolbar button:disabled{
    background:#e2e8f0;
    color:#94a3b8;
    cursor:not-allowed;
    box-shadow:none;
    border-color:var(--border);
}

/* 每日一题按钮 */
button.daily{
    background:var(--main);
}
button.daily:hover{
    background:#1e293b;
}

/* ========== 计时器 & 提示 ========== */
/* ========== 信息栏（时间/错误/最佳/连击） ========== */
.infobar{
    margin-top:20px;
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    justify-content:center;
    font-size:15px;
    color:#475569;
}
.infobar b{
    color:var(--main);
    font-variant-numeric:tabular-nums;
}

.message{
    margin-top:10px;
    height:24px;
    font-size:16px;
    font-weight:500;
}

/* ========== 响应式 ========== */
@media(max-width:600px){
    h1{font-size:1.5rem;}
    body{padding:20px 10px;}
    .site-topbar{margin:-20px -10px 16px;}
    .controls{gap:8px;margin-bottom:16px;}
    select,button{padding:8px 12px;font-size:14px;}
    .toolbar button{padding:8px 12px;font-size:13px;}   /* 触控目标 ≥40px */
    .num,#clearBtn{height:48px;}                        /* 手机上加大触控面积 */
    .infobar{gap:12px;font-size:13px;}
}

.num:disabled,
.num.disabled{
    background:#bdc3c7;
    color:#7f8c8d;
    cursor:not-allowed;
    box-shadow:none;
}

.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
}
.modal.show{display:flex;}

.modal-content{
    background:#fff;
    padding:30px 40px;
    border-radius:10px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,.2);
}
.modal-content h2{margin-bottom:12px;}
.modal-content button{margin-top:15px;padding:8px 20px;font-size:16px;}

/* 完成弹窗内的成绩行 */
.win-line{margin:4px 0;color:#475569;}
.win-line b{color:var(--main);font-size:1.2em;}
.win-record{
    margin:10px 0 2px;
    color:var(--accent-dark);
    font-weight:700;
    font-size:1.1em;
}
.win-streak{margin:10px 0 2px;color:#ea580c;font-weight:600;}