/* Critical CSS — 首屏（首屏高度内一定可见的选择器 + 移动端断点） */
/* 从 app.css + vendor.min.css 精简抽取 · 控制 <14KB（刚好一个 TCP 窗口） */

:root{--bg:#f8f7f5;--bg2:#f3efe9;--ink:#252a34;--ink-2:#4b5566;--ink-3:#858fa0;--line:#ebe7e0;--accent:#6dc238;--accent-dark:#59a828}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{position:relative;overflow-x:hidden;font-family:"Rubik",system-ui,-apple-system,Segoe UI,sans-serif;font-display:swap;font-size:16px;line-height:1.25;background:#f8f7f5;background:var(--bg);color:#252a34;color:var(--ink)}
ul,ol,li{display:block;padding:0;margin:0;list-style:none}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;line-height:1.25}
p{margin:0}
b,strong{font-weight:500}
a{display:inline-block;color:#4b5563;text-decoration:none;-webkit-transition:all .25s ease;transition:all .25s ease}
a:hover,a:active{color:#4b5566;text-decoration:none}
button{font-family:inherit}
img,picture{display:block;max-width:100%}

/* ===== Layout ===== */
.wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:100vh}
.wrapper__content{-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}
.container{margin:0 auto;padding:0 20px;max-width:1010px;width:100%}
.section-indent{margin-top:30px;padding-top:30px}
.section-indent-sm{margin-top:15px;padding-top:15px}

/* ===== Header ===== */
.header{position:relative;z-index:1;background:#f3efe9;background:var(--bg2)}
.header__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:6px 0}
.header__btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:9px 10.5px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:15px;color:#252a34;background:#e9e5dc;border:none;border-radius:8px;-webkit-transition:all .25s ease;transition:all .25s ease}
.header__btn>svg{min-width:20px;width:20px;height:20px;color:#252a34}
.header__btn>*+*{margin-left:6px}
.header__btn:focus{outline:none}
.header__btn:hover{opacity:.7}
.header__btn+.header__btn{margin-left:8px}

/* ===== Breadcrumb ===== */
.breadcrumb__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}
.breadcrumb__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.breadcrumb__item:last-child .breadcrumb__link{color:#858fa0}
.breadcrumb__item+.breadcrumb__item::before{content:">";display:block;margin:0 10px;font-size:16px;color:#858fa0}
.breadcrumb__link{display:block;font-size:16px;color:#4b5566}
@media (hover:hover){.breadcrumb__link:hover{color:#54c80b}}
.section-inner__breadcrumb{margin:0 auto;padding:30px 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}
.section-inner__head{margin-bottom:30px}

/* ===== Section Heading (首屏第二块大标题) ===== */
.section-heading{position:relative;z-index:1;margin:0 auto 40px;padding:0 32px 6px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;text-align:center}
.section-heading__title{display:block;margin:0 auto;padding:20px 0;font-size:30px;font-weight:700;color:#252a34}
.section-heading__bg{position:absolute;top:50%;left:50%;z-index:-1;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;color:#ebe7e0;color:var(--line)}

/* ===== Game + Play 预览（首屏最大元素 —— LCP） ===== */
.game{position:relative;z-index:1;min-height:620px;background-repeat:no-repeat;background-size:cover;background-position:center center;background:#f3efe9;background:var(--bg2)}
.game-locked::before{content:"";position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;background:rgba(5,19,40,.1)}
.game.preview-hidden::before{opacity:0;pointer-events:none}
.game.preview-hidden .game__preview{display:none}
.game__preview{position:absolute;top:50%;left:50%;z-index:10;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;max-width:402px;width:100%;padding:45px 35px;text-align:center;background:rgba(5,19,40,.5);border-radius:30px}
.game__preview.is--hidden{display:none}
.game__title{display:block;font-size:60px;font-weight:700;color:#fff}
.game__btn{display:block;margin:20px auto 0;padding:12px;min-width:134px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:28px;font-weight:700;text-align:center;color:#fff;background:#6dc238;background:var(--accent);border:none;border-radius:20px;-webkit-filter:drop-shadow(0 5px 0 #59a828);filter:drop-shadow(0 5px 0 var(--accent-dark));-webkit-transition:all .25s ease;transition:all .25s ease;-webkit-animation:crunch 500ms infinite ease;animation:crunch 500ms infinite ease}
.game__btn:focus{outline:none}
.game__help{display:block;margin-top:16px;font-size:16px;color:#d4dcec}
.game__embed{width:100%;height:620px;min-height:620px}
.game__iframe{width:100%;height:100%;border:0;display:block}
.game>:not(.game__embed):not(.game__help){display:none!important}

/* ===== Language / Mode selectors（首屏内） ===== */
.select-lang__wrapper,.select-mode__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}
.select-lang__item,.select-mode__item{width:100%}
.select-lang__item:nth-child(n+2),.select-mode__item:nth-child(n+2){margin-top:22px}
.select-lang__btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding:12px 18px;width:100%;font-size:18px;color:#252a34;background:#e2f0ed;border:none;border-radius:15px;border-bottom:4px solid #c9deda;cursor:pointer;-webkit-transition:all .25s ease;transition:all .25s ease}
.select-lang__btn>img{display:block;min-width:32px;width:32px;height:32px;object-fit:contain;-o-object-fit:contain}
.select-lang__btn>*+*{margin-left:12px}
.select-lang__btn:focus{outline:none}
.select-lang__btn.is--active,.select-lang__btn:hover{font-weight:700;background:#d1f1ea;border-bottom-color:#b9dfd7}
.select-mode__btn{display:block;padding:15.5px 10px;width:100%;font-size:18px;color:#252a34;background:#edefdd;border:none;border-radius:15px;border-bottom:4px solid #dde0c5;cursor:pointer;-webkit-transition:all .25s ease;transition:all .25s ease}
.select-mode__btn:focus{outline:none}
.select-mode__btn.is--active,.select-mode__btn:hover{font-weight:700;background:#e9edc7;border-bottom-color:#d4d9ae}
.select-mode__play{display:block;margin:22px auto 0;padding:21.5px 20px;min-width:194px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:24px;font-weight:700;color:#fff;background:#6dc238;background:var(--accent);border:none;border-radius:15px;border-bottom:4px solid var(--accent-dark);cursor:pointer;-webkit-transition:all .25s ease;transition:all .25s ease}
.select-mode__play:focus{outline:none}
.select-mode__play:hover{color:#fff}

/* ===== Features（首屏下半部，3 个卡片） ===== */
.features__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
.features__item{display:block;overflow:hidden;padding:20px 25px;background:#f0ebe2;border-radius:15px}
.features__img{display:block;overflow:hidden;margin:0 auto 14px;min-width:68px;width:68px;height:68px}
.features__img img{display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}
.features__body{text-align:center}
.features__title{position:relative;z-index:1;display:block;padding-bottom:10px;margin-bottom:12px;font-size:22px;font-weight:700;color:#252a34}
.features__title::after{content:"";position:absolute;bottom:0;left:50%;z-index:1;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);display:block;width:86px;height:1px;background:#b3afa9}
.features__description{display:block;font-size:18px;color:#4b5566;line-height:1.5}

/* ===== Footer（首屏刚好能看到顶部一点点，包含 footer__wrapper 基础布局即可） ===== */
.footer{position:relative;z-index:1;margin-top:50px;background:#fff}
.footer__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:26px 0}

/* ===== 动画：Play 按钮呼吸感 ===== */
@-webkit-keyframes crunch{0%,100%{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}50%{-webkit-transform:translateY(-2px) scale(1.02);transform:translateY(-2px) scale(1.02)}}
@keyframes crunch{0%,100%{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}50%{-webkit-transform:translateY(-2px) scale(1.02);transform:translateY(-2px) scale(1.02)}}

/* ===============================================================
   响应式断点：移动端 ≤1010px（container 宽）+ ≤767px（手机）
   这两个断点里的首屏关键选择器必须保留
   =============================================================== */

/* ---- Tablet / small desktop（≤1010px） ---- */
@media screen and (max-width:1010px){
  .section-heading__title{font-size:28px}
  .game__preview{max-width:85%}
  .game__title{font-size:45px}
  .game__help{font-size:14px}
  .select-lang__item{width:calc(50% - 11px)}
  .select-lang__item:nth-child(2n){margin-left:22px}
  .select-lang__item:nth-child(n+3){margin-top:22px}
  .select-mode__item{width:calc(50% - 11px)}
  .select-mode__item:nth-child(2n){margin-left:22px}
  .select-mode__item:nth-child(n+3){margin-top:22px}
  .features__item{width:calc(50% - 11px)}
  .features__item:nth-child(2n){margin-left:22px}
  .features__item:nth-child(n+3){margin-top:22px}
  .features__title{font-size:20px}
  .features__description{font-size:16px}
  .select-lang__btn,.select-mode__btn{font-size:18px}
  .select-mode__play{width:100%}
}

/* ---- Mobile（≤767px，Lighthouse 移动端模拟视口，最关键） ---- */
@media screen and (max-width:767px){
  .section-indent{margin-top:25px;padding-top:25px}
  .footer{margin-top:40px}
  .select-lang__item{width:100%}
  .select-lang__item:nth-child(n+2){margin-top:22px;margin-left:0}
  .select-mode__item{width:100%}
  .select-mode__item:nth-child(n+2){margin-top:22px;margin-left:0}
  .features__item{width:100%}
  .features__item:nth-child(n+2){margin-top:22px;margin-left:0}
  .game__preview{padding:36px 22px;max-width:94%}
  .game__title{font-size:40px}
  .game__btn{font-size:24px;padding:14px 18px}
}