:root { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; color:#293229; background:#f6f5ee; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-width:290px; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible { outline:3px solid #829773; outline-offset:3px; }
a { color:inherit; text-decoration:none; }
.page { min-height:100dvh; max-width:1380px; margin:auto; padding:0 clamp(18px,5vw,70px); display:flex; flex-direction:column; }
.site-header { height:100px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e1e5d8; }
.home-brand { display:inline-flex; align-items:center; gap:11px; font-family:Georgia,"Times New Roman",serif; font-size:25px; line-height:1; letter-spacing:-1px; }
.home-brand small { display:block; margin-top:6px; color:#8d9886; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; font-size:9px; letter-spacing:1px; }
.brand-symbol { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; position:relative; overflow:hidden; padding:0 3px 5px 0; border-radius:12px; background:#526447; color:#fff; box-shadow:0 5px 13px #29322918; font-size:31px; font-style:italic; }
.brand-symbol i { position:absolute; top:8px; right:8px; width:6px; height:6px; border-radius:50%; background:#d69b77; }
.back-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:8px 4px; color:#526447; font-size:13px; font-weight:600; }
.back-link:hover { text-decoration:underline; }
main { flex:1; }
.intro { padding:47px 0 36px; }
.eyebrow,.panel-label { color:#899a7d; font-size:10px; font-weight:700; letter-spacing:2px; }
.intro h1 { margin:14px 0 10px; font-size:clamp(31px,4vw,52px); font-weight:560; letter-spacing:1px; line-height:1.25; }
.intro h1 span { color:#a96949; }
.intro p { margin:0; color:#899185; font-size:13px; line-height:1.8; }
.game-layout { display:grid; grid-template-columns:minmax(0,620px) minmax(270px,340px); align-items:start; justify-content:center; gap:clamp(20px,4vw,48px); }
.board-card { min-width:0; padding:23px 23px 18px; border:1px solid #e5e8dd; border-radius:22px; background:#fff; box-shadow:0 18px 55px #2932290b; }
.board-topline { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; color:#6d8062; font-size:12px; font-weight:700; letter-spacing:.3px; }
.board-topline span:last-child { color:#9aa695; font-size:11px; font-weight:500; }
.mini-board-wrap { position:relative; width:100%; max-width:570px; margin:auto; }
.number-board,.puzzle-board { display:grid; width:100%; max-width:570px; aspect-ratio:1; margin:auto; padding:10px; gap:10px; border-radius:14px; user-select:none; -webkit-user-select:none; overflow-anchor:none; }
.number-board { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); background:#b7ad9b; touch-action:none; }
.number-cell { display:grid; min-width:0; min-height:0; place-items:center; border-radius:9px; background:#cbc3b5; color:#746b5d; font-size:clamp(22px,5vw,42px); font-weight:800; font-variant-numeric:tabular-nums; }
.number-cell[data-value="2"] { background:#eee9de; }
.number-cell[data-value="4"] { background:#ece1c9; }
.number-cell[data-value="8"] { background:#efb87f; color:#fffaf0; }
.number-cell[data-value="16"] { background:#eaa671; color:#fffaf0; }
.number-cell[data-value="32"] { background:#df8e6b; color:#fffaf0; }
.number-cell[data-value="64"] { background:#d8795b; color:#fffaf0; }
.number-cell[data-value="128"],.number-cell[data-value="256"],.number-cell[data-value="512"] { background:#d5bc74; color:#fff; font-size:clamp(20px,4.5vw,36px); }
.number-cell[data-value="1024"],.number-cell[data-value="2048"] { background:#b59d57; color:#fff; font-size:clamp(17px,4vw,32px); }
.number-cell[data-value="4096"],.number-cell[data-value="8192"] { background:#6f8a60; color:#fff; font-size:clamp(17px,4vw,32px); }
.puzzle-board { grid-template-columns:repeat(var(--size),minmax(0,1fr)); grid-template-rows:repeat(var(--size),minmax(0,1fr)); background:#dfc695; }
.puzzle-tile { display:grid; min-width:0; min-height:0; place-items:center; padding:0; border:1px solid #e9e6d8; border-radius:10px; background:#fffaf0; color:#58684c; box-shadow:0 3px 0 #b9a681; font-size:clamp(25px,6vw,48px); font-weight:750; font-variant-numeric:tabular-nums; touch-action:manipulation; }
.puzzle-board[data-size="4"] .puzzle-tile { font-size:clamp(20px,5vw,38px); }
.puzzle-tile:not(:disabled):active { transform:translateY(2px); box-shadow:0 1px 0 #b9a681; }
.puzzle-tile:disabled { cursor:default; }
.puzzle-tile.empty { border:0; background:transparent; box-shadow:none; }
.puzzle-tile.movable { border-color:#a5b795; background:#f3f7ec; }
.board-hint { margin:16px 0 0; text-align:center; color:#9aa293; font-size:11px; line-height:1.7; }
.game-sidebar { display:flex; flex-direction:column; gap:18px; }
.panel { padding:24px; border:1px solid #e5e8dd; border-radius:18px; background:#fff; box-shadow:0 10px 35px #29322906; }
.panel h2 { margin:12px 0 20px; font-size:19px; font-weight:600; }
.score-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.score-row > div { min-width:0; padding:13px 15px; border-radius:11px; background:#f2f5ed; }
.score-row small { display:block; color:#8c9a84; font-size:11px; }
.score-row strong { display:block; margin-top:6px; color:#526447; font-size:27px; font-weight:750; font-variant-numeric:tabular-nums; }
.game-status { display:flex; align-items:center; min-height:64px; margin:16px 0; padding:12px 13px; border-radius:10px; background:#f5f6f0; color:#566b4b; font-size:12px; font-weight:600; line-height:1.6; }
.game-status.finished { background:#faeee5; color:#a45e3c; }
.primary-button { width:100%; min-height:44px; padding:10px; border:1px solid #526447; border-radius:10px; background:#526447; color:#fff; font-size:13px; font-weight:700; }
.primary-button:hover { background:#3b4f34; }
.size-switch { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.size-switch button { min-height:65px; padding:10px 13px; border:1px solid #e4e8de; border-radius:11px; background:#fafbf8; color:#53624e; font-size:15px; font-weight:700; text-align:left; }
.size-switch button small { display:block; margin-top:5px; color:#9ba698; font-size:11px; font-weight:400; }
.size-switch button.active { border-color:#a6b99c; background:#edf3e8; color:#435a38; box-shadow:inset 3px 0 #6f8a60; }
.little-note { margin:0; padding:6px 14px; color:#9ba58f; font-family:Georgia,"Songti SC",serif; font-size:13px; line-height:1.8; }
.mini-celebration { position:absolute; inset:0; z-index:4; overflow:hidden; border-radius:12px; pointer-events:none; }
.mini-celebration[hidden] { display:none; }
.mini-confetti { position:absolute; inset:0; overflow:hidden; }
.mini-confetti-piece { position:absolute; top:-20px; width:8px; height:14px; border-radius:2px; background:#d69b77; opacity:0; animation:mini-confetti-fall 4.5s linear both; animation-delay:var(--delay,0ms); }
.mini-confetti-piece:nth-child(4n+2) { background:#8daa77; }
.mini-confetti-piece:nth-child(4n+3) { background:#f0d584; }
.mini-confetti-piece:nth-child(4n+4) { background:#fff4dc; }
.mini-win-badge { position:absolute; top:9%; left:50%; display:flex; align-items:center; justify-content:center; min-width:178px; padding:12px 21px 11px; border:1px solid #f8e0be; border-radius:15px; background:#fffaf0ed; box-shadow:0 10px 28px #6545233b; color:#6a4e2f; text-align:center; transform:translateX(-50%); animation:mini-badge-pop .7s cubic-bezier(.2,1.35,.4,1) both; }
.mini-win-badge>span { position:absolute; top:-16px; right:-10px; color:#d69b77; font-size:26px; }
.mini-win-badge strong { font-size:17px; white-space:nowrap; }
.game-over-overlay { position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:18px; border-radius:14px; background:#293229ac; }
.game-over-overlay[hidden] { display:none; }
.game-over-card { width:min(100%,290px); padding:22px 20px; border:1px solid #f4e1c5; border-radius:19px; background:#fffaf0; box-shadow:0 16px 42px #18221869; color:#514432; text-align:center; animation:game-over-pop .55s cubic-bezier(.2,1.25,.4,1) both; }
.game-over-symbol { display:grid; width:40px; height:40px; place-items:center; margin:0 auto 8px; border-radius:50%; background:#f2e4cc; color:#a86d4b; font-size:27px; line-height:1; }
.game-over-card h2 { margin:0; font-size:23px; font-weight:700; }
.game-over-card p { margin:9px 0 17px; color:#8d806e; font-size:13px; }
.game-over-card p strong { color:#a86d4b; font-size:21px; font-variant-numeric:tabular-nums; }
.game-over-card button { min-height:42px; width:100%; padding:9px 14px; border:0; border-radius:10px; background:#526447; color:#fff; font-size:13px; font-weight:700; }
.game-over-card button:hover { background:#3b4f34; }
.board-card.victory .number-board,.board-card.victory .puzzle-board,.board-card.victory .xiangqi-board,.board-card.victory .jump-board { animation:mini-board-victory 1.35s ease-out; }
@keyframes mini-board-victory { 0%,100% { filter:brightness(1); } 45% { filter:brightness(1.12); } }
@keyframes mini-badge-pop { 0% { opacity:0; transform:translate(-50%,-15px) scale(.72); } 65% { opacity:1; transform:translate(-50%,3px) scale(1.06); } 100% { opacity:1; transform:translate(-50%,0) scale(1); } }
@keyframes game-over-pop { 0% { opacity:0; transform:translateY(-15px) scale(.82); } 65% { opacity:1; transform:translateY(3px) scale(1.04); } 100% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes mini-confetti-fall { 0% { opacity:0; transform:translate3d(0,-20px,0) rotate(0); } 8% { opacity:1; } 85% { opacity:1; } 100% { opacity:0; transform:translate3d(var(--drift,0px),var(--fall-distance,650px),0) rotate(var(--spin,540deg)); } }
footer { padding:36px 0 22px; text-align:center; color:#afb5aa; font-size:10px; }
@media(max-width:920px) { .game-layout { grid-template-columns:minmax(0,620px); } .intro { padding:34px 0 28px; } }
@media(max-width:640px) { .page { padding:0 15px; } .site-header { height:76px; } .home-brand { font-size:21px; } .brand-symbol { width:36px; height:36px; font-size:27px; } .back-link { font-size:12px; } .intro { padding:26px 3px 23px; } .intro h1 { font-size:32px; } .intro p { font-size:12px; } .game-layout { gap:12px; } .board-card { padding:12px 10px 11px; border-radius:15px; } .board-topline { margin:2px 5px 11px; } .number-board,.puzzle-board { padding:7px; gap:7px; border-radius:10px; } .number-cell { border-radius:6px; } .puzzle-tile { border-radius:7px; } .board-hint { margin-top:10px; font-size:10px; } .game-sidebar { gap:12px; } .panel { padding:18px; border-radius:14px; } .score-row strong { font-size:24px; } .little-note { display:none; } footer { padding-top:26px; } }
@media(max-width:640px) { .mini-celebration,.game-over-overlay { border-radius:9px; } .mini-win-badge { top:7%; min-width:148px; padding:9px 14px; } .mini-win-badge strong { font-size:15px; } .game-over-card { width:min(100%,260px); padding:18px 16px; } }
@media(prefers-reduced-motion:reduce) { .board-card.victory .number-board,.board-card.victory .puzzle-board,.board-card.victory .xiangqi-board,.board-card.victory .jump-board,.mini-win-badge,.game-over-card { animation:none!important; } }