*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui;color:#202622;background:#f7f8f6}header,main{max-width:1080px;margin:auto;padding:20px}header{display:flex;align-items:center;justify-content:space-between}a{color:#27533b}h1{font-size:clamp(28px,5vw,42px);margin:0}p{color:#647068}#play{margin:24px 0;background:white;border:1px solid #dfe4df;border-radius:8px;padding:16px;display:grid;grid-template-rows:auto auto auto auto auto;gap:12px}.toolbar,.stats,.controls{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}.toolbar{justify-content:space-between}.toolbar h2{margin:0;font-size:20px}.buttons{display:flex;gap:6px;flex-wrap:wrap}button{font:600 13px system-ui;min-height:44px;cursor:pointer;border:1px solid #dfe4df;border-radius:5px;padding:8px 12px}.stats{justify-content:space-around;font-size:13px}.stats strong{display:block;font-size:19px}#progress{width:100%;accent-color:#27533b;height:7px}#status{margin:0;text-align:center;font-size:13px;min-height:20px}.arena{position:relative;min-height:0;display:grid;place-items:center;container-type:size;height:min(70vw,510px)}#board{width:min(100cqw,100cqh);height:min(100cqw,100cqh);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:8px;background:#dfe4df;padding:8px;border-radius:8px;touch-action:none;outline-offset:3px}.tile{display:grid;place-items:center;border-radius:5px;font-size:clamp(18px,5vmin,36px);font-weight:750;background:#f1f3ef;color:#263f30}.tile[data-power="1"]{background:#edf2d8}.tile[data-power="2"]{background:#e4ecc6}.tile[data-power="3"]{background:#f7dfaa}.tile[data-power="4"]{background:#f5bf82}.tile[data-power="5"]{background:#ee9d6b}.tile[data-power="6"]{background:#df7858;color:white}.tile[data-high]{background:#27533b;color:white;font-size:clamp(15px,4vmin,30px)}#board.merged{animation:merge-pop .18s ease-out}@keyframes merge-pop{50%{transform:scale(1.015)}}#overlay{position:absolute;inset:0;background:#fffffff2;display:grid;place-items:center;text-align:center;padding:16px}#overlay h2{margin:0}.controls button{min-width:48px;font-size:20px}.controls small{font-size:11px;color:#647068}#levels{display:flex;gap:8px;flex-wrap:wrap;padding:0;list-style:none}#levels li{border:1px solid #dfe4df;border-radius:5px;padding:8px 12px}#levels li.current{border-color:#27533b;background:#edf2e9}footer{padding:20px 0;font-size:13px}[hidden]{display:none!important}html.merge-full,html.merge-full body{overflow:hidden}#play:is(:fullscreen,:-webkit-full-screen,.expanded){position:fixed;inset:0;width:100%;height:100dvh;z-index:100;margin:0;border:0;border-radius:0;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:6px}#play:is(:fullscreen,:-webkit-full-screen,.expanded) .arena{height:100%;min-height:0}#play:is(:fullscreen,:-webkit-full-screen,.expanded){grid-template-rows:auto auto auto minmax(0,1fr) auto}#play:is(:fullscreen,:-webkit-full-screen,.expanded) .toolbar h2{font-size:14px}@media(max-width:600px){main{padding:12px}#play{padding:10px}.toolbar{justify-content:center}.toolbar h2{display:none}#board{gap:5px;padding:5px}.controls small{width:100%;text-align:center}}@media(max-height:500px){.stats strong{display:inline;font-size:14px;margin-left:4px}.controls small{display:none}button{min-height:36px;padding:5px 10px}#status{min-height:16px;font-size:11px}}@media(prefers-reduced-motion:reduce){#board.merged{animation:none}}
