:root{--container-max-width:640px;--game-size:520px;--tile-size:112px;--tile-gap:8px;--game-padding:12px;--bg-overlay:rgba(0,0,0,0.22);--board-bg:rgba(128,128,128,0.30)}
html,body{margin:0;padding:0;font-family:"Clear Sans","Helvetica Neue",Arial,sans-serif;color:#333;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f2f2f2;background-image:url("img/bg.webp");background-size:cover;background-position:center center;background-repeat:no-repeat;background-attachment:fixed}
.container{max-width:var(--container-max-width);margin:24px auto;padding:0 12px;box-sizing:border-box}
.heading{display:flex;justify-content:space-between;align-items:center}
.title{font-size:40px;font-weight:800;color:#ffffff;margin:0}
.game-area{display:flex;flex-direction:column;align-items:center;position:relative;width:100%;z-index:1}
.game-container{position:relative;width:var(--game-size);height:var(--game-size);background:var(--board-bg);border-radius:8px;padding:var(--game-padding);box-sizing:border-box;margin-top:18px;box-shadow:0 6px 18px rgba(0,0,0,0.20);z-index:1}
.grid-container{position:absolute;z-index:2;left:var(--game-padding);top:var(--game-padding)}
.grid-row{display:flex}
.grid-cell{width:var(--tile-size);height:var(--tile-size);background:#6a6a6a;border-radius:6px;margin:var(--tile-gap);box-sizing:border-box}
.tile-container{position:absolute;z-index:3;left:var(--game-padding);top:var(--game-padding);width:calc(var(--tile-size) * 4 + var(--tile-gap) * 6);height:calc(var(--tile-size) * 4 + var(--tile-gap) * 6);pointer-events:none}
.tile{position:absolute;width:var(--tile-size);height:var(--tile-size);border-radius:6px;background-size:cover;background-position:center;transition:left 0.14s cubic-bezier(.22,.9,.3,1), top 0.14s cubic-bezier(.22,.9,.3,1), transform 0.12s ease, opacity 0.12s ease;will-change:left, top, transform, opacity;display:flex;align-items:center;justify-content:center;font-weight:700;color:#222;box-shadow:0 2px 6px rgba(0,0,0,0.18)}
.tile-new{animation:pop 0.10s ease-out}
@keyframes pop{0%{transform:scale(0.96);opacity:0}60%{transform:scale(1.02);opacity:1}100%{transform:scale(1);opacity:1}}
.tile-merged{animation:merge 0.14s ease-out}
@keyframes merge{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.info{margin:12px 0 6px 0;font-size:14px;color:#ffffff;text-align:center;max-width:var(--game-size);line-height:1.3;z-index:2}
.opel-says{position:absolute;right:12px;top:12px;background:rgba(255,255,255);padding:8px 10px;border-radius:4px;z-index:5;font-size:13px}
.katkoviesti{position:absolute;right:12px;top:56px;background:rgba(255,255,255);padding:8px 10px;border-radius:4px;z-index:5;font-size:13px;color:#a33}
.game-message{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255);border-radius:8px;display:none;flex-direction:column;justify-content:center;align-items:center;z-index:10}
.game-message p{font-size:36px;font-weight:800;color:#000;margin-bottom:18px}
.lower a{display:inline-block;background:#fff;color:#000;padding:10px 18px;border-radius:4px;margin:6px;text-decoration:none;font-size:16px}
.lower-container{width:100%;margin-top:6px;display:flex;justify-content:center;z-index:2}
.go-turbo{display:inline-block;background:#4a90e2;color:#fff;padding:12px 26px;border-radius:6px;font-size:18px;font-weight:700;text-decoration:none;transition:background 0.18s}
.go-turbo:hover{background:#357ab8}
@media (max-width:640px){:root{--game-size:92vw}.game-container{width:var(--game-size);height:var(--game-size);padding:10px}.grid-cell,.tile{width:calc((92vw - 10px*2 - var(--tile-gap)*6) / 4);height:calc((92vw - 10px*2 - var(--tile-gap)*6) / 4)}.tile-container{left:10px;top:10px;width:calc(92vw - 10px*2);height:calc(92vw - 10px*2)}.game-message{width:92vw;height:92vw;border-radius:6px}.info{max-width:92vw;font-size:13px}body{background-attachment:scroll}}