diff --git a/2048.css b/2048.css
index 2698a67..f76363c 100644
--- a/2048.css
+++ b/2048.css
@@ -343,13 +343,7 @@ h1 {
z-index: 102 !important;
}
-/* Mobile Responsive */
-@media (max-width: 768px) {
- .sound-controls {
- flex-direction: column;
- gap: clamp(6px, 1.2vw, 10px);
- }
-}
+
.icon-btn {
width: clamp(36px, 6vw, 48px);
height: clamp(36px, 6vw, 48px);
@@ -740,16 +734,6 @@ h1 {
display: none;
}
-@media (max-width: 768px) {
- .pc-controls {
- display: none !important;
- }
-
- .mobile-controls {
- display: block;
- }
-}
-
/* Keys Display */
.keys-container {
display: flex;
@@ -1190,55 +1174,6 @@ h1 {
color: #38bdf8;
}
-/* Responsive Design */
-@media (max-width: 480px) {
- .game-over-modal {
- padding: 45px 35px 38px;
- }
-
- .game-over-buttons {
- gap: 12px;
- }
-
- .btn-game-icon {
- width: clamp(65px, 15vw, 75px);
- height: clamp(65px, 15vw, 75px);
- }
-
- .btn-game-icon svg {
- width: clamp(28px, 6vw, 34px);
- height: clamp(28px, 6vw, 34px);
- }
-}
-
-/* ==========================
- RESPONSIVE DESIGN
-========================== */
-
-/* Touch hint for mobile only */
-.touch-hint {
- display: none;
-}
-
-@media (max-width: 768px) {
- .touch-hint {
- display: block;
- position: fixed;
- right: clamp(10px, 2vw, 16px);
- bottom: clamp(10px, 2vh, 16px);
- background: rgba(0, 0, 0, 0.65);
- backdrop-filter: blur(12px);
- padding: clamp(7px, 1.5vw, 9px) clamp(11px, 2vw, 14px);
- border-radius: 10px;
- font-size: clamp(10px, 1.5vw, 11px);
- z-index: 4;
- color: #cfefff;
- border: 1px solid rgba(0, 217, 255, 0.35);
- box-shadow: 0 5px 18px rgba(0, 0, 0, 0.35);
- font-weight: 500;
- }
-}
-
/* ==========================
ADVANCED SOUND CONTROL
========================== */
@@ -1477,23 +1412,3 @@ h1 {
rgba(255, 255, 255, 0.1) var(--value, 0%),
rgba(255, 255, 255, 0.1) 100%);
}
-
-/* Mobile Responsive */
-@media (max-width: 768px) {
- .volume-panel {
- min-width: clamp(220px, 50vw, 260px);
- padding: 16px 14px;
- }
-
- .volume-item {
- margin-bottom: 14px;
- }
-
- .volume-label {
- font-size: 12px;
- }
-
- .volume-value {
- font-size: 11px;
- }
-}
\ No newline at end of file
diff --git a/2048.html b/2048.html
index dff6c3c..a20eb6a 100644
--- a/2048.html
+++ b/2048.html
@@ -2,11 +2,12 @@
-
+
2048
+
diff --git a/2048_Responsive.css b/2048_Responsive.css
new file mode 100644
index 0000000..bfbbce3
--- /dev/null
+++ b/2048_Responsive.css
@@ -0,0 +1,287 @@
+
+
+@media (max-width: 480px) {
+ /* Body & Container */
+ body {
+ padding: 8px;
+ }
+
+ .game-container {
+ transform: scale(1);
+ }
+
+ /* Header */
+ .game-header {
+ margin-bottom: 16px;
+ }
+
+ h1 {
+ font-size: clamp(38px, 8vw, 50px);
+ margin-bottom: clamp(8px, 1.2vh, 12px);
+ }
+
+ .score-container {
+ gap: clamp(8px, 1.8vw, 12px);
+ margin-bottom: clamp(10px, 1.8vh, 14px);
+ }
+
+ .score-box {
+ padding: clamp(8px, 1.2vh, 10px) clamp(16px, 2.5vw, 22px);
+ min-width: clamp(75px, 10vw, 95px);
+ }
+
+ .score-label {
+ font-size: clamp(9px, 1.2vw, 11px);
+ }
+
+ .score-value {
+ font-size: clamp(20px, 2.8vw, 25px);
+ }
+
+ /* Top Controls */
+ .top-controls {
+ top: clamp(8px, 1.5vh, 14px);
+ right: clamp(8px, 1.5vw, 14px);
+ gap: clamp(6px, 1.2vw, 10px);
+ }
+
+ .sound-controls {
+ top: clamp(8px, 1.5vh, 14px);
+ left: clamp(8px, 1.5vw, 14px);
+ gap: clamp(6px, 1.2vw, 10px);
+ flex-direction: column;
+ }
+
+ .icon-btn {
+ width: clamp(32px, 5.5vw, 42px);
+ height: clamp(32px, 5.5vw, 42px);
+ }
+
+ .icon-btn svg {
+ width: clamp(16px, 2.8vw, 22px);
+ height: clamp(16px, 2.8vw, 22px);
+ }
+
+ .btn-sound {
+ width: clamp(32px, 5.5vw, 42px);
+ height: clamp(32px, 5.5vw, 42px);
+ }
+
+ .btn-sound svg {
+ width: clamp(16px, 2.8vw, 22px);
+ height: clamp(16px, 2.8vw, 22px);
+ }
+
+ /* Board */
+ #board {
+ max-width: min(90vmin, 100%);
+ padding: clamp(8px, 1.8vmin, 14px);
+ gap: clamp(5px, 1vmin, 10px);
+ border-radius: 16px;
+ }
+
+ /* Tiles */
+ .tile {
+ font-size: clamp(18px, 3.2vmin, 28px);
+ border-radius: clamp(6px, 1.5vmin, 12px);
+ }
+
+ /* Touch Hint */
+ .touch-hint {
+ display: block !important;
+ }
+
+ /* Tutorial Modal */
+ .tutorial-modal {
+ padding: 35px 30px;
+ max-width: 90%;
+ }
+
+ .tutorial-title {
+ font-size: 26px;
+ margin-bottom: 25px;
+ }
+
+ .tutorial-content {
+ gap: 25px;
+ }
+
+ .tutorial-section h3 {
+ font-size: 16px;
+ margin-bottom: 12px;
+ }
+
+ /* PC Controls - Hide on Mobile */
+ .pc-controls {
+ display: none !important;
+ }
+
+ /* Mobile Controls - Show on Mobile */
+ .mobile-controls {
+ display: block !important;
+ }
+
+ .keys-container {
+ gap: clamp(15px, 4vw, 30px);
+ }
+
+ .keys-separator {
+ font-size: clamp(12px, 2vw, 16px);
+ }
+
+ .key-box {
+ width: clamp(36px, 6vw, 46px);
+ height: clamp(36px, 6vw, 46px);
+ font-size: clamp(15px, 2.5vw, 20px);
+ }
+
+ .key-empty {
+ width: clamp(36px, 6vw, 46px);
+ height: clamp(36px, 6vw, 46px);
+ }
+
+ .keys-label {
+ font-size: clamp(11px, 1.6vw, 13px);
+ }
+
+ .swipe-icon {
+ font-size: 40px;
+ }
+
+ .swipe-demo p {
+ font-size: 13px;
+ }
+
+ .objective-text {
+ font-size: 14px;
+ }
+
+ .modal-close {
+ width: 32px;
+ height: 32px;
+ top: 12px;
+ right: 12px;
+ }
+
+ .modal-close svg {
+ width: 18px;
+ height: 18px;
+ }
+
+ /* Game Over Modal */
+ .game-over-modal {
+ padding: 40px 28px 35px;
+ max-width: 90%;
+ }
+
+ .game-over-close {
+ width: 34px;
+ height: 34px;
+ top: 14px;
+ right: 14px;
+ }
+
+ .game-over-close svg {
+ width: 18px;
+ height: 18px;
+ }
+
+ .game-over-title {
+ font-size: clamp(28px, 4.5vw, 36px);
+ margin-bottom: 10px;
+ }
+
+ .game-over-subtitle {
+ font-size: 13px;
+ margin-bottom: 30px;
+ }
+
+ .game-over-score {
+ margin-bottom: 32px;
+ }
+
+ .game-over-score-label {
+ font-size: 10px;
+ margin-bottom: 12px;
+ }
+
+ .game-over-score-value {
+ font-size: clamp(46px, 7.5vw, 60px);
+ margin-bottom: 8px;
+ }
+
+ .new-high-score {
+ padding: 10px 22px;
+ font-size: 12px;
+ margin-top: 15px;
+ }
+
+ .high-score-display {
+ margin-top: 24px;
+ padding-top: 24px;
+ }
+
+ .high-score-label {
+ font-size: 10px;
+ margin-bottom: 8px;
+ }
+
+ .high-score-value {
+ font-size: clamp(30px, 4.5vw, 38px);
+ }
+
+ .game-over-buttons {
+ gap: 10px;
+ margin-top: 35px;
+ }
+
+ .btn-game-icon {
+ width: clamp(62px, 14vw, 72px);
+ height: clamp(62px, 14vw, 72px);
+ border-radius: 16px;
+ }
+
+ .btn-game-icon svg {
+ width: clamp(28px, 5.5vw, 34px);
+ height: clamp(28px, 5.5vw, 34px);
+ }
+
+ /* Sound Control */
+ .sound-control-container {
+ top: clamp(8px, 1.5vh, 14px);
+ left: clamp(8px, 1.5vw, 14px);
+ gap: 10px;
+ }
+
+ .btn-sound-main {
+ width: clamp(36px, 6vw, 46px);
+ height: clamp(36px, 6vw, 46px);
+ }
+
+ .btn-sound-main svg {
+ width: clamp(18px, 3.2vw, 24px);
+ height: clamp(18px, 3.2vw, 24px);
+ }
+
+ .volume-panel {
+ min-width: clamp(200px, 45vw, 240px);
+ padding: 16px 14px;
+ }
+
+ .volume-item {
+ margin-bottom: 14px;
+ }
+
+ .volume-label {
+ font-size: 12px;
+ }
+
+ .volume-value {
+ font-size: 11px;
+ }
+
+ .volume-icon {
+ width: 16px;
+ height: 16px;
+ }
+}
\ No newline at end of file