/* ========== 全局重置 ========== */
* {
    box-sizing: border-box;
    margin:0;
    padding:0;
}
body {
    font-family: Arial, sans-serif;
    line-height:1.6;
    color:#222;
    background:#f8f9fa;
}
.container {
    max-width:1200px;
    margin:0 auto;
    padding:0 16px;
}
.aboutcontainer {
    max-width:1200px;
    margin:0 auto;
    padding:0 16px;
    text-align:left;
}

/* ========== 头部汉堡导航 ========== */
.site-header {
    background:#224;
    color:white;
    padding:14px 0;
}
.nav-wrap {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    position:relative;
}
.logo {
    font-size:22px;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
}
.menu-toggle{
    display:none;
}
.menu-btn{
    display:none;
    font-size:26px;
    cursor:pointer;
    color:#fff;
}
.nav-links {
    display:flex;
    flex-wrap:wrap;
    gap:10px 16px;
}
.nav-links a {
    color:#e8edff;
    text-decoration:none;
}
.nav-links a:hover {
    text-decoration:underline;
}
@media (max-width:768px){
    .menu-btn{
        display:block;
    }
    .nav-links{
        display:none;
        width:100%;
        flex-direction:column;
        margin-top:12px;
    }
    .menu-toggle:checked ~ .nav-links{
        display:flex;
    }
}

/* ========== 首页Hero区域 ========== */
.hero {
    padding:40px 0;
    text-align:center;
}
.hero h1 {
    font-size: clamp(1.8rem,5vw,2.8rem);
    margin-bottom:16px;
}
.hero p {
    font-size:1.1rem;
    color:#444;
}
.ad-banner-top {
    margin-bottom:30px;
    min-height:90px;
}

/* ========== 卡片网格 首页工具卡片 ========== */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:20px;
    margin:30px 0;
}
.tool-card {
    background:#fff;
    padding:24px;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.tool-card h3 {
    margin-bottom:10px;
    color:#224;
}
.tool-card p {
    color:#555;
    margin-bottom:16px;
}

/* ========== 按钮通用样式 ========== */
.btn {
    display:inline-block;
    padding:10px 20px;
    background:#2563eb;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    border:none;
    cursor:pointer;
    font-size:1rem;
}
.btn:hover {
    background:#1d4ed8;
}

/* ========== 区块间距 ========== */
.tools-section,.blog-section {
    margin:50px 0;
    max-width:1200px;
    margin:50px auto;
    padding:0 16px;
    
}
h2 {
    font-size:clamp(1.5rem,4vw,2rem);
    margin-bottom:20px;
    text-align:center;
}

/* ========== Canvas全局适配 所有游戏画布 ========== */
canvas {
    max-width:100%;
    height:auto !important;
}

/* ========== 功能工具页面专用样式 ========== */
.tool-page-header
{
    text-align: center;
    margin: 15px 0 13px 0;
}
.tool-subtitle
{
    color: #555;
    font-size: 1.05rem;
    margin-top: 6px;
}

.control-panel{
    background:#fff;
    padding:1px;
    border-radius:10px;
    box-shadow:0 1px 2px rgba(0,0,0,0.06);
    margin-bottom:24px;
}
.control-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:center;
}
.control-row select{
    padding:8px 10px;
    font-size:1rem;
}

.game-container{
    display:flex;
    justify-content:center;
    margin-bottom:30px;
}
.canvas-wrap{
    width:100%;
    max-width:600px;
}
#gameCanvas{
    width:100%;
    height:auto;
    border:1px solid #ddd;
    background:#fff;
    border-radius:8px;
}

.tool-info{
    background:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
    margin-bottom:30px;
}
.tool-info h2{
    text-align:left;
    margin-bottom:12px;
}
.tool-info p{
    color:#444;
    line-height:1.7;
}
.ad-block{
    margin:30px 0;
    min-height:100px;
}



/* 数独导航链接组 单独样式 */
.sudoku-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}
.sudoku-nav a
{
    display: inline-flex;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    background: #ece7da;
    color: var(--ink);
    text-decoration: none;
    font-size: clamp(14px, 2vw, 16px);
    transition: background 0.2s ease, color 0.2s ease;
}
.sudoku-nav a:hover {
    background: var(--sel);
    color: var(--accent-dark);
}
.sudoku-nav a.active {
    background: var(--accent);
    color: #fff;
}



/* ========== 小屏幕媒体查询优化 ========== */
@media (max-width: 640px){
    .hero {
        padding:24px 0;
    }
    .tool-card {
        padding:18px;
    }
}

/* ========== Footer基础样式（后面footer.html会用到） ========== */
footer {
    margin-top:60px;
    padding:30px 0;
    background:#222;
    color:#fff;
    text-align:center;
}
footer a {
    color:#89cff0;
    text-decoration:none;
}
footer a:hover{
    text-decoration:underline;
}