:root {
  --paper:#f6f1eb;--surface:#fffdf9;--ink:#292421;--muted:#756d67;--wine:#8c2f3d;--wine-dark:#63202d;--gold:#c39a5a;--line:rgba(63,48,40,.13);--board:#9b8e84;--cell:rgba(246,241,235,.3);--serif:"Noto Serif SC","Songti SC",SimSun,serif;--sans:Inter,"PingFang SC","Microsoft YaHei",sans-serif
}
*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.game-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(1180px,calc(100% - 40px));height:76px;margin:auto;border-bottom:1px solid var(--line);font-size:13px}.game-header>p{margin:0;color:#8a8079}.back-home{display:flex;align-items:center;gap:9px;width:max-content;font-weight:650}.back-home span:first-child{font-size:17px}.sound-button{justify-self:end;display:flex;align-items:center;gap:7px;padding:8px 12px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;cursor:pointer}.sound-button[aria-pressed=true]{color:var(--wine);border-color:rgba(140,47,61,.3)}
.game-layout{display:grid;grid-template-columns:minmax(520px,720px) minmax(260px,340px);gap:70px;width:min(1120px,calc(100% - 40px));margin:65px auto 95px}.game-column{min-width:0}.title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}.eyebrow{margin:0 0 10px;color:var(--wine);font-size:10px;font-weight:750;letter-spacing:.19em}.title-row h1{margin:0;font:500 clamp(38px,5vw,58px)/1.08 var(--serif);letter-spacing:-.03em}.title-row h1 strong{color:var(--wine);font-family:var(--sans);font-size:.76em}.subtitle{margin:12px 0 0;color:var(--muted);font-size:14px}.score-group{display:flex;gap:8px}.score-box{position:relative;min-width:84px;padding:10px 13px;text-align:center;color:var(--surface);background:var(--wine);border-radius:5px}.score-box.best{background:#4d4540}.score-box span{display:block;margin-bottom:3px;font-size:9px;letter-spacing:.12em}.score-box strong{font-size:21px}.score-box i{position:absolute;top:-19px;left:50%;color:var(--wine);font-size:14px;font-weight:750;font-style:normal;opacity:0;transform:translateX(-50%)}.score-box i.show{animation:scoreUp .7s ease}@keyframes scoreUp{0%{opacity:1;transform:translate(-50%,8px)}100%{opacity:0;transform:translate(-50%,-8px)}}
.board-wrap{width:100%;max-width:620px}.board{position:relative;width:100%;aspect-ratio:1;padding:12px;overflow:hidden;touch-action:none;user-select:none;background:var(--board);border:0;border-radius:9px;outline:none;box-shadow:0 18px 50px rgba(57,43,36,.16)}.board:focus-visible{outline:3px solid rgba(140,47,61,.35);outline-offset:4px}.grid-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;height:100%}.grid-cells span{background:var(--cell);border-radius:6px}.tile-layer{position:absolute;inset:12px;pointer-events:none}.tile{--x:0;--y:0;--size:calc((100% - 36px)/4);position:absolute;display:grid;place-items:center;width:var(--size);height:var(--size);left:calc(var(--x)*(var(--size) + 12px));top:calc(var(--y)*(var(--size) + 12px));border-radius:6px;font-size:clamp(25px,5vw,52px);font-weight:750;line-height:1;transition:left .12s ease,top .12s ease;box-shadow:0 3px 10px rgba(55,41,34,.06);isolation:isolate;overflow:hidden}.tile::after{content:"";position:absolute;inset:48% 0 0;z-index:-1;background:linear-gradient(transparent,rgba(44,28,24,.12));opacity:0}.tile-value{position:relative}.tile[data-value="2"]{color:#655d57;background:#eee6de}.tile[data-value="4"]{color:#655d57;background:#e8d8c8}.tile[data-value="8"]{color:#fff;background:#d7a078}.tile[data-value="16"]{color:#fff;background:#c98268}.tile[data-value="32"]{color:#fff;background:#b86159}.tile[data-value="64"]{color:#fff;background:#99464c}.tile[data-value="128"]{color:#fff;background:#9f7651;font-size:clamp(22px,4.4vw,43px)}.tile[data-value="256"]{color:#fff;background:#88603d;font-size:clamp(22px,4.4vw,43px)}.tile[data-value="512"]{color:#fff;background:#6f4936;font-size:clamp(22px,4.4vw,43px)}.tile[data-value="1024"]{color:#fff;background:#63303a;font-size:clamp(18px,3.8vw,37px)}.tile[data-value="2048"]{color:#fff;background:linear-gradient(135deg,#c39a5a,#9a653d);font-size:clamp(18px,3.8vw,37px);box-shadow:0 0 28px rgba(195,154,90,.62)}.tile[data-large=true]{color:#fff;background:#362b29;font-size:clamp(15px,3vw,30px)}.tile.new{animation:appear .18s ease}.tile.merged{animation:merge .2s ease}@keyframes appear{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}@keyframes merge{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
.game-overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:30px;text-align:center;background:rgba(246,241,235,.9);backdrop-filter:blur(5px)}.overlay-kicker{margin:0 0 8px;color:var(--wine);font-size:10px;font-weight:750;letter-spacing:.18em}.game-overlay h2{margin:0;font:500 clamp(30px,5vw,48px)/1.2 var(--serif)}.game-overlay p:not(.overlay-kicker){margin:13px 0 24px;color:var(--muted);font-size:14px}.overlay-actions{display:flex;justify-content:center;gap:10px}.overlay-actions button{padding:12px 18px;color:#fff;background:var(--wine);border:0;border-radius:5px;cursor:pointer}.overlay-actions .continue-button{color:var(--ink);background:#ded4cb}
.game-tip{display:flex;align-items:center;gap:9px;max-width:620px;margin:20px 0;color:var(--muted);font-size:13px}.game-tip span{color:var(--wine)}.game-actions{display:flex;flex-wrap:wrap;gap:10px;max-width:620px}.game-actions button,.game-actions a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:45px;padding:0 18px;border-radius:5px;cursor:pointer}.primary-action{color:white;background:var(--wine);border:1px solid var(--wine)}.secondary-action{color:var(--ink);background:transparent;border:1px solid var(--line)}.how-to{max-width:620px;margin-top:18px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:6px}.how-to h2{margin:0 0 12px;font:500 20px/1.2 var(--serif)}.how-to p{margin:7px 0;color:var(--muted);font-size:13px;line-height:1.7}
.side-column{padding-top:94px}.side-quote{position:relative;margin-bottom:38px;padding:27px 24px;color:#f8f1eb;background:var(--wine-dark);border-radius:5px}.side-quote span{position:absolute;right:15px;top:-15px;color:rgba(255,255,255,.14);font:80px/1 var(--serif)}.side-quote p{position:relative;margin:0;font:500 20px/1.7 var(--serif)}.stats-panel,.history-panel{padding:23px;background:rgba(255,253,249,.7);border:1px solid var(--line);border-radius:6px}.history-panel{margin-top:16px}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between}.panel-heading h2{margin:0;font:500 21px/1.2 var(--serif)}.live-dot{color:#66805c;font-size:10px}.live-dot::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;background:#769568;border-radius:50%}.stats-list{margin:22px 0 0}.stats-list div{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line)}.stats-list dt{color:var(--muted);font-size:12px}.stats-list dd{margin:0;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}.panel-heading button{padding:4px;color:var(--muted);background:transparent;border:0;font-size:11px;cursor:pointer}.history-note{margin:15px 0 12px;color:var(--muted);font-size:11px}.history-list{margin:0;padding:0;list-style:none}.history-item,.history-empty{display:grid;grid-template-columns:27px 1fr auto;align-items:center;gap:9px;padding:10px 0;border-top:1px solid var(--line);font-size:12px}.history-rank{display:grid;place-items:center;width:22px;height:22px;color:var(--wine);background:#eee3dc;border-radius:50%;font-size:10px}.history-main strong{display:block}.history-main small,.history-meta{color:var(--muted);font-size:10px}.history-empty{display:block;color:var(--muted);line-height:1.7}
.intro-section{display:grid;grid-template-columns:1fr 1fr;gap:80px;width:min(1120px,calc(100% - 40px));margin:0 auto;padding:80px 0;border-top:1px solid var(--line)}.intro-section h2{margin:0;font:500 clamp(31px,4.5vw,47px)/1.35 var(--serif)}.intro-copy p{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.9}footer{display:grid;grid-template-columns:1fr minmax(320px,2fr) 1fr;align-items:center;gap:24px;width:min(1120px,calc(100% - 40px));min-height:94px;margin:auto;color:#8a8079;border-top:1px solid var(--line);font-size:11px}footer a{color:var(--wine)}footer p{justify-self:center;text-align:center;line-height:1.7}.game-suggestion-link{font-family:var(--serif);font-size:15px;font-weight:650}footer a:last-child{justify-self:end}
dialog{width:min(410px,calc(100% - 32px));padding:0;background:var(--surface);border:0;border-radius:8px;box-shadow:0 25px 90px rgba(38,27,24,.32)}dialog::backdrop{background:rgba(34,27,25,.55);backdrop-filter:blur(3px)}dialog form{padding:32px;text-align:center}.dialog-mark{display:grid;place-items:center;width:45px;height:45px;margin:0 auto 15px;color:var(--wine);background:#f0e3dc;border-radius:50%;font-size:21px}dialog h2{margin:0;font:500 25px/1.3 var(--serif)}dialog form>p:not(.dialog-mark){margin:12px 0 25px;color:var(--muted);font-size:13px;line-height:1.7}dialog form>div{display:flex;gap:9px}dialog button{flex:1;padding:11px;color:var(--ink);background:#eee7e1;border:0;border-radius:5px;cursor:pointer}.danger-button{color:#fff!important;background:var(--wine)!important}
@media(max-width:900px){.game-layout{grid-template-columns:minmax(0,650px);justify-content:center}.side-column{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding-top:0}.side-quote{display:none}.history-panel{margin-top:0}.intro-section{gap:45px}}
@media(max-width:620px){.game-header{grid-template-columns:1fr 1fr;width:calc(100% - 28px);height:64px}.game-header>p{display:none}.game-layout{width:calc(100% - 28px);margin:36px auto 65px}.title-row{display:block}.score-group{margin-top:23px}.score-box{flex:1}.board{padding:8px;border-radius:7px}.grid-cells{gap:8px}.tile-layer{inset:8px}.tile{--size:calc((100% - 24px)/4);left:calc(var(--x)*(var(--size) + 8px));top:calc(var(--y)*(var(--size) + 8px));border-radius:5px}.game-actions>*{flex:1;min-width:calc(50% - 5px);padding-inline:10px!important}.game-actions>*:last-child{flex-basis:100%}.side-column{grid-template-columns:1fr}.intro-section{grid-template-columns:1fr;gap:30px;width:calc(100% - 28px);padding-block:58px}footer{display:grid;grid-template-columns:1fr;gap:8px;width:calc(100% - 28px);padding-block:24px;line-height:1.8}footer p,footer a:last-child{justify-self:start;text-align:left;margin:0}.overlay-actions{flex-direction:column}.overlay-actions button{width:100%}}
@media(max-width:370px){.title-row h1{font-size:34px}.score-box{min-width:0}.game-layout{width:calc(100% - 20px)}.tile{font-size:24px}.tile[data-value="128"],.tile[data-value="256"],.tile[data-value="512"]{font-size:20px}.tile[data-value="1024"],.tile[data-value="2048"]{font-size:16px}}

/* Photo card theme: source order 1–12 maps to tile values 2–4096. */
.tile{
  place-items:initial;
  background-color:#3f3330;
  background-image:var(--tile-photo,none);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.tile::after{
  inset:38% 0 0;
  z-index:0;
  background:linear-gradient(to bottom,rgba(30,20,18,0),rgba(30,20,18,.12) 38%,rgba(23,15,14,.72) 100%);
  opacity:1;
}
.tile-value{
  position:absolute;
  right:10px;
  bottom:9px;
  z-index:1;
  color:#fff8e9;
  font-size:clamp(17px,2.8vw,31px);
  font-weight:800;
  letter-spacing:-.04em;
  text-shadow:0 2px 7px rgba(0,0,0,.92),0 0 2px rgba(0,0,0,.85);
}
.tile[data-value="2"]{--tile-photo:url("./cards/photo/2.webp")}
.tile[data-value="4"]{--tile-photo:url("./cards/photo/4.webp")}
.tile[data-value="8"]{--tile-photo:url("./cards/photo/8.webp")}
.tile[data-value="16"]{--tile-photo:url("./cards/photo/16.webp")}
.tile[data-value="32"]{--tile-photo:url("./cards/photo/32.webp")}
.tile[data-value="64"]{--tile-photo:url("./cards/photo/64.webp")}
.tile[data-value="128"]{--tile-photo:url("./cards/photo/128.webp")}
.tile[data-value="256"]{--tile-photo:url("./cards/photo/256.webp")}
.tile[data-value="512"]{--tile-photo:url("./cards/photo/512.webp")}
.tile[data-value="1024"]{--tile-photo:url("./cards/photo/1024.webp")}
.tile[data-value="2048"]{--tile-photo:url("./cards/photo/2048.webp")}
.tile[data-value="4096"]{--tile-photo:url("./cards/photo/4096.webp")}
.tile[data-value]{
  background-image:var(--tile-photo,none);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.tile[data-value="1024"] .tile-value,
.tile[data-value="2048"] .tile-value,
.tile[data-value="4096"] .tile-value{font-size:clamp(14px,2.25vw,25px)}
.tile[data-large="true"]{background-color:#362b29;background-image:var(--tile-photo,none)}
@media(max-width:620px){
  .tile-value{right:6px;bottom:6px;font-size:clamp(15px,5.2vw,24px)}
  .tile[data-value="1024"] .tile-value,
  .tile[data-value="2048"] .tile-value,
  .tile[data-value="4096"] .tile-value{font-size:clamp(12px,4.2vw,19px)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important}}