:root {
--bg-color: #060913;
--grid-bg: rgba(9, 13, 29, 0.7);
--panel-bg: rgba(20, 26, 51, 0.45);
--panel-border: rgba(255, 255, 255, 0.07);
--neon-blue: #00f0ff;
--neon-blue-glow: rgba(0, 240, 255, 0.4);
--neon-pink: #ff007f;
--neon-pink-glow: rgba(255, 0, 127, 0.4);
--neon-purple: #bc00dd;
--neon-yellow: #ffea00;
--text-primary: #f0f2f7;
--text-secondary: #8f9bb3;
--font-ui: 'Outfit', sans-serif;
--font-digital: 'Orbitron', sans-serif;
--canvas-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 240, 255, 0.15);
--transition-speed: 0.3s;
} body.standalone-game-body *,
.blox-tetris-wp-container,
.blox-tetris-wp-container * {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
-webkit-user-select: none;
}
body.standalone-game-body {
background-color: var(--bg-color);
color: var(--text-primary);
font-family: var(--font-ui);
overflow-x: hidden;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
} .blox-tetris-wp-container {
background-color: var(--bg-color);
color: var(--text-primary);
font-family: var(--font-ui);
position: relative;
width: 100%;
min-height: auto; display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
} .stars-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background-image: 
radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0,0,0,0)),
radial-gradient(1.5px 1.5px at 150px 70px, #ffffff, rgba(0,0,0,0)),
radial-gradient(1px 1px at 80px 200px, rgba(255,255,255,0.7), rgba(0,0,0,0)),
radial-gradient(2px 2px at 250px 320px, #ffffff, rgba(0,0,0,0)),
radial-gradient(1px 1px at 320px 120px, rgba(255,255,255,0.8), rgba(0,0,0,0)),
radial-gradient(1.5px 1.5px at 450px 400px, #ffffff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 550px 180px, rgba(0, 240, 255, 0.5), rgba(0,0,0,0)),
radial-gradient(1.5px 1.5px at 700px 300px, #ffffff, rgba(0,0,0,0)),
radial-gradient(1px 1px at 820px 80px, rgba(255, 0, 127, 0.4), rgba(0,0,0,0)),
radial-gradient(2.5px 2.5px at 900px 480px, #ffffff, rgba(0,0,0,0));
background-repeat: repeat;
background-size: 950px 550px;
opacity: 0.35;
animation: backgroundTwinkle 20s infinite linear;
}
.glow-bg {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70vw;
height: 70vh;
background: radial-gradient(circle, rgba(0, 240, 255, 0.04) 0%, rgba(188, 0, 221, 0.03) 50%, transparent 100%);
z-index: -1;
pointer-events: none;
}
@keyframes backgroundTwinkle {
0% { transform: translateY(0); }
100% { transform: translateY(-550px); }
} .game-wrapper {
display: flex;
flex-direction: column;
width: 100%;
max-width: 950px;
padding: 24px;
align-items: center;
} .game-header {
text-align: center;
margin-bottom: 12px;
position: relative;
}
.game-title {
font-family: var(--font-digital);
font-weight: 900;
font-size: 2rem;
letter-spacing: 5px;
color: var(--text-primary);
text-shadow: 0 0 10px rgba(255,255,255,0.1), 0 0 20px var(--neon-blue-glow);
margin-bottom: 4px;
}
.game-title .accent {
color: var(--neon-blue);
text-shadow: 0 0 10px var(--neon-blue-glow), 0 0 20px var(--neon-blue-glow);
}
.grid-spec {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 3px;
color: var(--text-secondary);
display: inline-block;
padding: 2px 8px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
} .game-container {
display: grid;
grid-template-columns: 200px 1fr 200px;
gap: 30px;
width: 100%;
align-items: start;
justify-content: center;
} .glass-panel {
background: var(--panel-bg);
border: 1px solid var(--panel-border);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 16px;
padding: 15px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.glass-panel:hover {
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
} .sidebar {
display: flex;
flex-direction: column;
gap: 15px;
}
.stat-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.stat-label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 2px;
color: var(--text-secondary);
margin-bottom: 8px;
text-transform: uppercase;
}
.stat-value {
font-family: var(--font-digital);
font-size: 1.8rem;
font-weight: 700;
color: var(--text-primary);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}
#score-val {
color: var(--neon-blue);
text-shadow: 0 0 10px var(--neon-blue-glow);
}
#level-val {
color: var(--neon-pink);
text-shadow: 0 0 10px var(--neon-pink-glow);
} .preview-box {
display: flex;
flex-direction: column;
align-items: center;
min-height: 180px;
}
.next-preview-container {
width: 120px;
height: 120px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
#next-block-img {
max-width: 90px;
max-height: 90px;
object-fit: contain;
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
transition: opacity 0.2s ease;
}
#next-block-img.hidden {
opacity: 0;
display: none;
}
.placeholder-text {
font-size: 0.75rem;
color: var(--text-secondary);
text-align: center;
}
.next-size-badge {
font-size: 0.75rem;
font-weight: 700;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.06);
padding: 2px 8px;
border-radius: 10px;
font-family: var(--font-digital);
} .game-screen-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.canvas-container {
position: relative;
border-radius: 20px;
overflow: hidden;
background: var(--grid-bg);
border: 2px solid rgba(255, 255, 255, 0.08);
box-shadow: var(--canvas-shadow);
line-height: 0;
} #game-canvas {
display: block;
width: 100%;
max-width: 400px;
aspect-ratio: 420 / 725;
background: transparent;
} .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(5, 7, 17, 0.82);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 10;
line-height: 1.5; }
.overlay.active {
opacity: 1;
pointer-events: auto;
}
.overlay-content {
text-align: center;
padding: 32px 24px;
width: 90%;
max-width: 350px;
background: rgba(12, 17, 36, 0.94);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 240, 255, 0.08);
display: flex;
flex-direction: column;
align-items: center;
max-height: 94%;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--panel-border) transparent;
}
.neon-text {
font-family: var(--font-digital) !important;
font-style: normal !important;
text-transform: uppercase !important;
font-size: 1.5rem !important;
font-weight: 900 !important;
letter-spacing: 3px;
margin-bottom: 10px;
color: var(--neon-blue) !important;
text-shadow: 0 0 10px var(--neon-blue-glow) !important;
}
.neon-text.critical {
color: var(--neon-pink);
text-shadow: 0 0 15px var(--neon-pink-glow);
}
.overlay-desc {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.5;
margin-bottom: 28px;
}
.final-stats {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 16px 24px;
margin-bottom: 28px;
width: 100%;
}
.final-stats p {
font-size: 0.95rem;
margin: 8px 0;
color: var(--text-secondary);
}
.final-stats p span {
font-family: var(--font-digital);
font-weight: 700;
font-size: 1.2rem;
}
.final-stats .accent {
color: var(--neon-blue);
text-shadow: 0 0 5px var(--neon-blue-glow);
} .btn {
font-family: var(--font-ui);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 2px;
padding: 14px 36px;
border: none;
border-radius: 30px;
cursor: pointer;
transition: all 0.25s ease;
outline: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn-primary {
background: linear-gradient(135deg, var(--neon-blue) 0%, #00a8ff 100%);
color: #030611;
box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 30px rgba(0, 240, 255, 0.6);
}
.btn-primary:active {
transform: translateY(1px);
} .game-footer {
width: 100%;
margin-top: 30px;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 20px;
}
.keyboard-legend {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px 25px;
font-size: 0.8rem;
color: var(--text-secondary);
}
kbd {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 4px;
box-shadow: 0 2px 0 rgba(0,0,0,0.5);
color: var(--text-primary);
display: inline-block;
font-family: monospace;
font-size: 0.75rem;
padding: 2px 6px;
margin: 0 2px;
vertical-align: middle;
} .virtual-controls {
display: none;
width: 100%;
max-width: 480px;
flex-direction: column;
gap: 16px;
margin-top: 24px;
}
.dpad {
display: grid;
grid-template-columns: 80px 80px 80px;
justify-content: center;
align-items: center;
gap: 12px;
}
.dpad-vertical {
display: flex;
flex-direction: column;
gap: 12px;
}
.ctrl-btn {
background: var(--panel-bg);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text-primary);
border-radius: 16px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
transition: all 0.1s ease;
backdrop-filter: blur(10px);
}
.ctrl-btn svg {
width: 28px;
height: 28px;
fill: currentColor;
}
.ctrl-btn:active {
background: rgba(0, 240, 255, 0.15);
border-color: var(--neon-blue);
color: var(--neon-blue);
transform: scale(0.95);
box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}
.ctrl-btn-action {
background: rgba(188, 0, 221, 0.15);
border-color: rgba(188, 0, 221, 0.25);
color: #e566ff;
height: 64px;
}
.ctrl-btn-action:active {
background: rgba(188, 0, 221, 0.35);
border-color: #bc00dd;
color: #f7b3ff;
}
.action-buttons {
display: flex;
gap: 12px;
width: 100%;
}
.ctrl-btn-wide {
flex: 2;
height: 52px;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 1px;
border-radius: 12px;
}
.ctrl-btn-secondary {
flex: 1;
height: 52px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 1px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
}  @media (max-width: 900px) {
.game-wrapper {
padding: 16px;
}
.game-title {
font-size: 2.2rem;
letter-spacing: 4px;
}
.game-container {
grid-template-columns: 1fr;
gap: 16px;
justify-items: center;
}
.sidebar {
flex-direction: row;
width: 100%;
max-width: 360px;
justify-content: space-between;
}
.left-sidebar .stat-box {
flex: 1;
padding: 12px;
}
.right-sidebar {
order: -1; margin-bottom: 4px;
}
.preview-box {
flex: 1.3;
min-height: auto;
flex-direction: row;
gap: 12px;
align-items: center;
padding: 12px 16px;
}
.next-preview-container {
width: 70px;
height: 70px;
margin-bottom: 0;
}
#next-block-img {
max-width: 55px;
max-height: 55px;
}
.record-box {
flex: 1;
padding: 12px;
justify-content: center;
}
.stat-label {
font-size: 0.65rem;
margin-bottom: 4px;
}
.stat-value {
font-size: 1.3rem;
}
.canvas-container {
border-radius: 16px;
}
#game-canvas {
max-width: 330px;
}
.game-footer {
display: none; } .virtual-controls {
display: flex;
}
} @media (max-width: 600px) {
.blox-tetris-wp-container {
padding: 4px 0 !important;
min-height: 100vh !important;
height: 100vh !important;
width: 100vw !important;
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
.game-wrapper {
padding: 4px 8px !important;
height: 100% !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-evenly !important;
align-items: center !important;
}
.game-header {
display: none !important; }
.game-container {
gap: 6px !important;
}
.sidebar {
flex-direction: row !important;
gap: 6px !important;
width: 100% !important;
max-width: 320px !important;
justify-content: center !important;
margin-bottom: 0 !important;
}
.left-sidebar {
margin-bottom: 0 !important;
}
.right-sidebar {
order: -1 !important;
margin-bottom: 0 !important;
}
.glass-panel {
padding: 6px 10px !important;
border-radius: 10px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}
.stat-box {
flex: 1 !important;
flex-direction: row !important;
gap: 4px !important;
align-items: center !important;
justify-content: center !important;
}
.preview-box {
flex: 1.3 !important;
flex-direction: row !important;
gap: 6px !important;
align-items: center !important;
justify-content: center !important;
min-height: auto !important;
}
.record-box {
flex: 1 !important;
flex-direction: row !important;
gap: 4px !important;
align-items: center !important;
justify-content: center !important;
}
.stat-label {
font-size: 0.55rem !important;
margin-bottom: 0 !important;
margin-right: 4px !important;
letter-spacing: 1px !important;
}
.stat-value {
font-size: 0.95rem !important;
}
.next-preview-container {
width: 32px !important;
height: 32px !important;
border-radius: 6px !important;
margin-bottom: 0 !important;
margin-right: 4px !important;
}
#next-block-img {
max-width: 24px !important;
max-height: 24px !important;
}
.next-size-badge {
font-size: 0.6rem !important;
padding: 1px 4px !important;
}
.canvas-container {
border-radius: 12px !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
#game-canvas {
max-width: 324px !important; }
.desktop-only-controls {
display: none !important; }
.mobile-only-controls-hint {
display: block !important; font-size: 0.82rem !important;
font-weight: 800 !important;
color: var(--neon-pink) !important;
text-shadow: 0 0 5px var(--neon-pink-glow) !important;
text-align: center !important;
margin: 14px 0 !important;
letter-spacing: 1px !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
.virtual-controls {
display: flex !important;
width: 100% !important;
max-width: 320px !important;
flex-direction: column !important;
gap: 6px !important;
margin-top: 2px !important;
}
.dpad {
display: flex !important;
grid-template-columns: none !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
}
.dpad-vertical {
display: flex !important;
flex-direction: row !important; gap: 8px !important;
}
.ctrl-btn {
width: 56px !important; height: 56px !important;
border-radius: 14px !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35) !important;
}
.ctrl-btn svg {
width: 24px !important; height: 24px !important;
}
.action-buttons {
display: flex !important;
flex-direction: row !important;
gap: 8px !important;
width: 100% !important;
}
.ctrl-btn-wide {
height: 44px !important; font-size: 0.75rem !important;
border-radius: 10px !important;
}
.ctrl-btn-secondary {
height: 44px !important; font-size: 0.72rem !important;
border-radius: 10px !important;
}
} .info-section {
width: 100%;
margin-bottom: 12px; text-align: left;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 8px; }
.mobile-only-controls-hint {
display: none !important;
}
.info-title {
font-size: 0.78rem !important;
font-weight: 800 !important;
font-style: normal !important;
text-transform: uppercase !important;
letter-spacing: 1.5px;
color: var(--neon-pink) !important;
margin-bottom: 6px;
text-shadow: 0 0 6px var(--neon-pink-glow) !important;
}
.info-title-ctrl {
color: var(--neon-pink);
text-shadow: 0 0 5px var(--neon-pink-glow);
}
.info-list {
list-style: none;
font-size: 0.72rem;
color: var(--text-secondary);
line-height: 1.6;
}
.info-list li {
margin-bottom: 6px;
position: relative;
padding-left: 14px;
}
.info-list li::before {
content: "•";
position: absolute;
left: 0;
color: rgba(255, 255, 255, 0.3);
} .controls-grid {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
margin-top: 5px;
}
.control-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 4px 8px;
transition: all 0.25s ease;
width: 100%;
}
.control-row:hover {
background: rgba(0, 240, 255, 0.05);
border-color: rgba(0, 240, 255, 0.25);
box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
}
.control-keys {
display: flex;
gap: 6px;
align-items: center;
justify-content: center;
}
.control-keys kbd {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
color: var(--neon-blue);
text-shadow: 0 0 4px var(--neon-blue-glow);
font-size: 0.65rem;
padding: 2px 5px;
border-radius: 5px;
font-family: var(--font-digital);
text-transform: uppercase;
}
.control-desc {
font-size: 0.68rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0.8px;
text-align: center;
} #btn-start, #btn-restart, #btn-resume {
font-size: 1.05rem; padding: 12px 40px; letter-spacing: 2px;
font-weight: 800;
box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
transition: all 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#btn-start:hover, #btn-restart:hover, #btn-resume:hover {
transform: scale(1.05) translateY(-2px);
box-shadow: 0 0 30px rgba(0, 240, 255, 0.6);
}
#btn-start:active, #btn-restart:active, #btn-resume:active {
transform: scale(0.98) translateY(1px);
} @media (max-height: 1050px) {
.game-wrapper {
padding: 8px 16px;
}
.game-header {
margin-bottom: 8px;
}
.game-title {
font-size: 1.8rem;
letter-spacing: 4px;
}
.grid-spec {
font-size: 0.7rem;
padding: 2px 6px;
}
#game-canvas {
max-width: 360px; }
.glass-panel {
padding: 12px;
}
.sidebar {
gap: 10px;
}
.stat-value {
font-size: 1.4rem;
}
.preview-box {
min-height: auto;
}
.next-preview-container {
width: 80px;
height: 80px;
margin-bottom: 4px;
}
#next-block-img {
max-width: 60px;
max-height: 60px;
}
.controls-grid {
gap: 4px;
margin-top: 4px;
}
.control-row {
padding: 4px 8px;
}
.control-keys kbd {
font-size: 0.6rem;
padding: 1px 4px;
}
.control-desc {
font-size: 0.62rem;
}
.overlay-content {
padding: 12px 10px;
border-radius: 16px;
}
.neon-text {
font-size: 1.3rem !important;
}
.info-title {
font-size: 0.72rem !important;
}
#btn-start, #btn-restart, #btn-resume {
font-size: 0.95rem;
padding: 10px 30px;
}
}
@media (max-height: 880px) {
#game-canvas {
max-width: 320px; }
.game-title {
font-size: 1.6rem;
}
.grid-spec {
font-size: 0.65rem;
padding: 1px 6px;
}
.glass-panel {
padding: 10px;
}
.stat-value {
font-size: 1.2rem;
}
.next-preview-container {
width: 70px;
height: 70px;
}
#next-block-img {
max-width: 50px;
max-height: 50px;
}
.controls-grid {
gap: 3px;
}
.control-row {
padding: 3px 6px;
}
.control-keys kbd {
font-size: 0.56rem;
padding: 1px 3px;
}
.control-desc {
font-size: 0.58rem;
}
.neon-text {
font-size: 1.2rem !important;
}
.info-title {
font-size: 0.68rem !important;
}
}
@media (max-height: 750px) {
#game-canvas {
max-width: 280px; }
.sidebar {
gap: 8px;
}
.stat-label {
font-size: 0.65rem;
margin-bottom: 2px;
}
.stat-value {
font-size: 1.05rem;
}
.overlay-content {
padding: 10px 8px;
}
#btn-start, #btn-restart, #btn-resume {
font-size: 0.85rem;
padding: 8px 24px;
}
.control-desc {
font-size: 0.54rem;
}
.neon-text {
font-size: 1.1rem !important;
}
.info-title {
font-size: 0.64rem !important;
}
}
@media (max-height: 640px) {
.game-header {
display: none;
}
#game-canvas {
max-width: 240px; }
}