* {box-sizing: border-box;} html,body {margin: 0; min-height: 100%;background: #090b10;color: #f4f4f4; font-family:"Segoe UI","Yu Gothic",sans-serif;} body {display: flex; justify-content: center; padding: 24px 12px;} .wrap {width: min(840px, 100%);} .hud {display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 14px;} h1 {margin: 0;font-size: 24px;letter-spacing: 0.18em;} .hud p {margin: 5px 0 0;color: #62ff32;font-size: 13px;} .stats {display: flex;gap: 18px; text-align: center;} .stats div {min-width: 72px;} .stats span {display: block;color: #65f5ff; font-size: 10px; letter-spacing: 0.14em;} .stats strong {display: block; margin-top: 3px; font-size: 20px;} .game-area {position: relative; width: 840px; height: 630px; max-width: 100%; margin: 0 auto;} .game-canvas {position: absolute; inset: 0; width: 840px; height: 630px; display: grid; grid-template-columns: repeat(20, 42px); grid-template-rows: repeat(15, 42px); overflow: hidden; border: 2px solid #242a34; background-image:url("images/background.jpg"); background-repeat: no-repeat; background-size: 840px 840px; touch-action: none; transform-origin: top left;} .tile {position: relative; width: 42px; height: 42px;cursor: default; touch-action: none;} .tile.can-drag {cursor: grab;} .tile.can-drag:active {cursor: grabbing;} .tile-color {position: absolute;inset: 2px; border-radius: 7px; background:linear-gradient(145deg,rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 25%,rgba(255, 255, 255, 0.02) 45%,rgba(0, 0, 0, 0.28) 100%),var(--tile-color);border:1px solid rgba(255, 255, 255, 0.30); box-shadow:inset 1px 1px 2px rgba(255, 255, 255, 0.55),inset -2px -2px 3px rgba(0, 0, 0, 0.28),2px 3px 5px rgba(0, 0, 0, 0.40); opacity: 1; visibility: visible; transition:transform 0.18s ease,filter 0.18s ease,box-shadow 0.18s ease,opacity 0.18s ease;} .tile.can-drag:not(.cleared):not(.clearing):not(.restoring):hover .tile-color {transform:translateY(-2px)scale(1.04); filter:brightness(1.12); box-shadow:inset 1px 1px 2px rgba(255, 255, 255, 0.60),inset -2px -2px 3px rgba(0, 0, 0, 0.25),3px 6px 10px rgba(0, 0, 0, 0.45);} .tile.dragging {z-index: 1000;} .tile.dragging .tile-color {transform:translate(var(--drag-x, 0px),var(--drag-y, 0px)) scale(1.15) rotate(2deg); filter:brightness(1.18) saturate(1.15); box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.70),inset -3px -3px 5px rgba(0, 0, 0, 0.30),0 10px 18px rgba(0, 0, 0, 0.55);transition: none;} .tile.drop-target .tile-color {transform:scale(1.08); filter:brightness(1.30); box-shadow:0 0 0 2px rgba(255, 255, 255, 0.85),0 0 14px rgba(255, 255, 255, 0.70),inset 1px 1px 3px rgba(255, 255, 255, 0.70),inset -2px -2px 4px rgba(0, 0, 0, 0.25);} .tile.invalid-target .tile-color {filter:grayscale(0.5)brightness(0.8);opacity: 0.75;} .number {position: absolute; z-index: 10;inset: 0; display: grid;place-items: center; font-size: 15px; font-weight: 900; text-shadow:0 2px 5px #000, 0 0 2px #000; opacity: 0; pointer-events: none;transition: opacity 0.15s ease;} .number.show {opacity: 1;} .number.plus {color: #00ff66;} .number.minus {color: #fdb2fd;} .number.zero {color: #ffffff;} .tile.hit .tile-color {animation: hitPulse 0.65s ease;} @keyframes hitPulse {0% {transform: scale(1);filter: brightness(1);}40% {transform: scale(1.16);filter: brightness(1.7);}100% {transform: scale(1);filter: brightness(1);}} .tile.swap-source .tile-color {animation: sourceMove 0.35s ease;} .tile.swap-target .tile-color {animation: targetMove 0.35s ease;} @keyframes sourceMove {0% {transform: scale(1);}50% {transform: scale(0.80);}100% {transform: scale(1);}} @keyframes targetMove {0% {transform: scale(1);}50% {transform: scale(1.12);}100% {transform: scale(1);}} .tile.clearing {pointer-events: none;} .tile.clearing .tile-color {animation:tileDisappear 0.45s cubic-bezier(.4, 0, .2, 1)forwards;} .tile.cleared {pointer-events: none;} .tile.cleared .tile-color {opacity: 0;visibility: hidden;transform:scale(0.55)rotate(-8deg);filter:brightness(1);animation: none;box-shadow: none;} .tile.cleared .number {opacity: 0;visibility: hidden;} @keyframes tileDisappear {0% {opacity: 1; transform:scale(1)rotate(0deg); filter:brightness(1);}40% {opacity: 1; transform:scale(1.12)rotate(0deg); filter:brightness(1.7);} 100% {opacity: 0; transform:scale(0.55)rotate(-8deg);filter:brightness(2);}} .tile.restoring {pointer-events: none;} .tile.restoring .tile-color {visibility: visible;opacity: 1; animation: tileRestore 0.5s cubic-bezier(.2, .8, .3, 1.15)forwards;} .tile.restoring .number {visibility: visible;} @keyframes tileRestore {0% {opacity: 0; transform:scale(0.35)rotate(8deg); filter:brightness(2);}60% {opacity: 1; transform:scale(1.13)rotate(-2deg); filter:brightness(1.35);}100% {opacity: 1; transform:scale(1)rotate(0deg); filter:brightness(1);}} .message {position: absolute; z-index: 50;top: 10px; left: 50%; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: rgba(49, 49, 65, 0.493); border:1px solid#2c3440; color: #ecebeb; font-size: 14px; font-weight: bold; text-shadow: 1px 1px 1px #141414;pointer-events: none; white-space: nowrap;} .controls {display: flex;justify-content: center;gap: 10px; margin-top: 16px;} button {border: 1px solid #343d49;background: #171b22;color: #f4f4f4; padding: 10px 24px; border-radius: 8px; font-weight: 700; letter-spacing: 0.08em; cursor: pointer;} button:hover:not(:disabled) {background: #222936;} button:disabled {opacity: 0.35;cursor: not-allowed;} @media (max-width: 820px) {.hud {align-items: start; flex-direction: column;} .stats {width: 100%; justify-content: space-between; text-align: left;}} .game-end {position: absolute; z-index: 1000;top: 50%;left: 50%;transform:translate(-50%, -50%)scale(0.8); opacity: 0;pointer-events: none; padding: 18px 12px; border-radius: 12px; background:rgba(0, 0, 0, 0.82); border:2px solid rgba(255, 255, 255, 0.75);color: #ffffff;font-size: 20px; font-weight: 900; letter-spacing: 0.18em; text-shadow:0 0 10px rgba(255, 255, 255, .8),0 0 25px rgba(255, 255, 255, .45); transition:opacity 0.4s ease,transform 0.4s ease;} .game-end.show {opacity: 1; transform:translate(-50%, -50%)scale(1);} #timer.danger {color: #ff3b3b; text-shadow:0 0 5px rgba(255, 60, 60, 0.7),0 0 14px rgba(255, 30, 30, 0.45); transition:opacity 0.08s linear;} #timer.danger.blink {opacity: 0.2;} .game-clear {position: absolute;z-index: 1000;top: 50%;left: 50%; transform:translate(-50%, -50%)scale(0.8); opacity: 0; pointer-events: none; padding: 18px 36px; border-radius: 12px; background:rgba(32, 13, 136, 0.26); border:2px solid rgba(255, 255, 255, 0.75); color: #ffffff; font-size: 42px; font-weight: 900; letter-spacing: 0.18em; text-shadow:0 0 10px rgba(255,255,255,.8),0 0 25px rgba(255,255,255,.45); transition:opacity 0.4s ease,transform 0.4s ease;} .game-clear.show {opacity: 1; transform:translate(-50%, -50%)scale(1);} .tile.hint {z-index: 20;} .tile.hint .tile-color {animation:hintBlink 1.8s ease-in-out infinite;border: 4px solid rgba(56, 255, 245, 0.911)} @keyframes hintBlink {0%,100% {transform:scale(1); filter:brightness(1); box-shadow:inset 1px 1px 2px rgba(255, 255, 255, 0.55),inset -2px -2px 3px rgba(0, 0, 0, 0.28),2px 3px 5px rgba(0, 0, 0, 0.40);}50% {transform:scale(1.08); filter:brightness(1.25)saturate(1.1); box-shadow:0 0 0 1px rgba(255, 255, 255, 0.7),0 0 10px rgba(255, 255, 255, 0.45),inset 1px 1px 2px rgba(255, 255, 255, 0.6);}} .game-guide {position: absolute; z-index: 80; top: 50%; left: 50%; width: min(500px, 86%); transform: translate(-50%, -50%); padding: 10px 14px; border-radius: 18px; background: rgba(70, 2, 52, 0.856); border: 8px solid rgba(3, 3, 3, 0.856); box-shadow: 0 0 14px rgb(1, 5, 26); text-align: left; font-weight: bold; pointer-events: auto; transition: opacity 0.5s ease,transform 0.5s ease; cursor: pointer; touch-action: manipulation;} .game-guide-text{color: #c5c5c5; font-size: 14px;} .game-guide-title,.game-guide-start{text-align: center; color: #dfdb00;} .game-guide.hide {opacity: 0; transform:translate(-50%, -50%)scale(0.96);} .game-guide.hidden {opacity: 0; visibility: hidden; pointer-events: none;} .game-canvas,.game-canvas * {touch-action: none !important; -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; -webkit-context-menu: none;} .tile {-webkit-user-drag: none; user-drag: none;} .tile.dragging,.tile.dragging * {touch-action: none; -webkit-user-select: none; user-select: none;} .star-particle {position: absolute;left: 50%;top: 50%; z-index: 200;pointer-events: none; font-size: 14px; line-height: 1; transform:translate(-50%,-50%); animation: starBurst var(--duration) ease-out forwards;} @keyframes starBurst {0% {opacity: 1; transform:translate(-50%,-50%)scale(0.3)rotate(0deg);} 70% {opacity: 1;} 100% {opacity: 0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)))scale(1.2)rotate(var(--rotate));}} .inf{color: #0affad;} .clear-image-effect {position: absolute; z-index: 900; left: 50%; top: 50%; width: 446px; height: 500px; max-width: 80%; max-height: 80%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0)rotate(-360deg);} .clear-image-effect img { display: block; width: 100%; height: 100%; object-fit: contain;} .clear-image-effect.show { animation: clearWinAppear 2.5s cubic-bezier(.15, .8, .25, 1) forwards;} @keyframes clearWinAppear { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0)rotate(-360deg);} 15% {opacity: 1;} 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg);}}