.tGameHold * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.tGameHold {
position:relative;
overflow: hidden;
height: 100%;
width: 100%;
background-color: #55b2e8;
background-image:
radial-gradient(ellipse at top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 80%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='173.205'%3E%3Cg stroke='rgba(255,255,255,0.25)' stroke-width='2' fill='none'%3E%3Cpath d='M50,0 L100,28.867 L100,86.602 L50,115.47 L0,86.602 L0,28.867 Z'/%3E%3Cpath d='M100,86.602 L150,115.47 L150,173.205 L100,202.072 L50,173.205 L50,115.47 Z'/%3E%3Cpath d='M0,86.602 L50,115.47 L50,173.205 L0,202.072 L-50,173.205 L-50,115.47 Z'/%3E%3C/g%3E%3C/svg%3E");
background-size: 100% 100%, 100px 173.205px;
animation: bgFlow 60s linear infinite;
touch-action: none;
user-select: none;
}

@keyframes bgFlow {
from {
background-position: 0px 0px, 0px 0px;
}

to {
background-position: 0px 0px, 100px 173.205px;
}
}

#game-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

#ui-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 30px;
}

#ui-layer button,
.level-indicator,
.popup-screen {
pointer-events: auto;
}

#top-ui {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.level-indicator {
color: white;
font-size: 24px;
font-weight: 800;
letter-spacing: 2px;
padding: 0 25px;
}

.icon-btn {
width: 56px;
height: 56px;
background-color: #e74c3c;
border: 3px solid #c0392b;
border-radius: 12px;
box-shadow: 0 4px 0 #c0392b, 0 6px 10px rgba(0, 0, 0, 0.2);
color: white;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.1s, box-shadow 0.1s;
}

.icon-btn:hover {
background-color: #ff6b6b;
}

.icon-btn:active {
box-shadow: 0 0 0 #c0392b, 0 2px 4px rgba(0, 0, 0, 0.2);
transform: translateY(4px);
}

.popup-screen {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ecf0f1;
padding: 40px;
border-radius: 20px;
border: 4px solid #bdc3c7;
box-shadow: 0 10px 0 #bdc3c7, 0 20px 40px rgba(0, 0, 0, 0.5);
text-align: center;
color: #2c3e50;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}

.popup-screen h2 {
font-size: 36px;
font-weight: 800;
margin-bottom: 5px;
color: #2c3e50;
}

#btn-next-level,
#btn-retry {
padding: 16px 36px;
font-size: 20px;
background-color: #2ecc71;
color: white;
border: 3px solid #27ae60;
border-radius: 12px;
cursor: pointer;
font-weight: 800;
box-shadow: 0 5px 0 #27ae60, 0 8px 15px rgba(0, 0, 0, 0.2);
transition: transform 0.1s, box-shadow 0.1s;
}

#btn-next-level:hover,
#btn-retry:hover {
background-color: #2fd677;
}

#btn-next-level:active,
#btn-retry:active {
box-shadow: 0 0 0 #27ae60, 0 2px 4px rgba(0, 0, 0, 0.2);
transform: translateY(5px);
}

.hidden {
display: none !important;
}

/* Tactile UI panels */
.tactile-panel {
background-color: #34495e;
border: 3px solid #2c3e50;
border-radius: 20px;
box-shadow: 0 4px 0 #2c3e50, 0 6px 10px rgba(0, 0, 0, 0.2);
color: white;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
}

/* Coin UI */
.coin-container {
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px;
font-size: 22px;
font-weight: 800;
}

.coin-svg {
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

.coin-svg-small {
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* Powerups UI */
#powerups-container {
display: flex;
justify-content: center;
gap: 20px;
width: 100%;
pointer-events: auto;
}

.tactile-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
background-color: #ecf0f1;
border: 3px solid #bdc3c7;
border-radius: 16px;
box-shadow: 0 6px 0 #bdc3c7, 0 10px 15px rgba(0, 0, 0, 0.3);
color: #2c3e50;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s;
}

.tactile-btn:hover {
background-color: #ffffff;
}

.tactile-btn:active {
box-shadow: 0 0 0 #bdc3c7, 0 4px 6px rgba(0, 0, 0, 0.3);
transform: translateY(6px);
}

.tactile-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
filter: grayscale(100%);
box-shadow: 0 6px 0 #bdc3c7, 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tactile-btn:disabled:active {
transform: none;
/* Disabled buttons don't push down */
box-shadow: 0 6px 0 #bdc3c7, 0 4px 6px rgba(0, 0, 0, 0.1);
}

.powerup-icon {
display: flex;
margin-bottom: 2px;
color: #3498db;
}

.powerup-cost {
font-size: 15px;
font-weight: 800;
display: flex;
align-items: center;
gap: 4px;
}

/* Coin particles for animation */
.coin-particle {
position: absolute;
pointer-events: none;
z-index: 1000;
transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease-out;
}

/* Responsiveness for portrait/mobile */
@media (max-width: 500px) {
#ui-layer {
padding: 15px 15px 40px 15px;
}

#top-ui {
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}

.level-indicator {
font-size: 18px;
padding: 0 15px;
}

.coin-container {
font-size: 18px;
padding: 0 12px;
}

.icon-btn {
width: 44px;
height: 44px;
}

.tactile-panel {
height: 44px;
}

.coin-svg {
width: 20px;
height: 20px;
}

#powerups-container {
gap: 12px;
}

.tactile-btn {
width: 65px;
height: 65px;
}

.popup-screen {
width: 90%;
padding: 24px;
}

.popup-screen h2 {
font-size: 28px;
}
}
/* Mobile Performance Fixes */
.tGameHold {
touch-action: none !important;
user-select: none !important;
-webkit-user-select: none !important;
overscroll-behavior: none !important;
}
* {
-webkit-tap-highlight-color: transparent !important;
}
canvas, .game-container {
transform: translateZ(0);
}

/* ---- Level indicator (clickable) ---- */
.level-indicator {
cursor: pointer;
gap: 10px;
transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
}
.level-indicator::after {
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid rgba(255, 255, 255, 0.85);
}
.level-indicator:hover { background-color: #3d566e; }
.level-indicator:active {
transform: translateY(4px);
box-shadow: 0 0 0 #2c3e50, 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ---- Level select overlay ---- */
#level-overlay {
position: fixed;
inset: 0;
z-index: 2003;
background: rgba(20, 30, 45, 0.65);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.level-panel {
background: #ecf0f1;
border: 4px solid #bdc3c7;
border-radius: 20px;
box-shadow: 0 10px 0 #bdc3c7, 0 20px 40px rgba(0, 0, 0, 0.5);
width: min(560px, 100%);
max-height: min(80%, 640px);
display: flex;
flex-direction: column;
color: #2c3e50;
overflow: hidden;
}
.level-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 3px solid #d5dbdd;
}
.level-panel-head h2 { font-size: 26px; font-weight: 800; }
#level-sub { font-size: 13px; font-weight: 700; opacity: 0.65; }
#btn-close-levels { width: 44px; height: 44px; flex: 0 0 auto; }
#level-grid {
overflow-y: auto;
touch-action: pan-y;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 18px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 12px;
}
.level-cell {
aspect-ratio: 1;
border-radius: 14px;
border: 3px solid;
font-size: 20px;
font-weight: 800;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s;
}
.level-cell.done  { background: #2ecc71; border-color: #27ae60; color: #fff; box-shadow: 0 4px 0 #27ae60; }
.level-cell.next  { background: #f39c12; border-color: #d68910; color: #fff; box-shadow: 0 4px 0 #d68910; }
.level-cell.done:active, .level-cell.next:active { transform: translateY(4px); box-shadow: none; }
.level-cell.locked {
background: #d5dbdd; border-color: #bdc3c7; color: #95a5a6;
cursor: not-allowed; position: relative;
}
.level-cell.locked::after { content: '\1F512'; position: absolute; right: 4px; bottom: 2px; font-size: 12px; }
.level-cell.current { outline: 4px solid #2c3e50; outline-offset: 2px; }

/* ---- Reset zoom button ---- */
#btn-reset-zoom {
position: absolute;
right: 16px;
bottom: 150px;
z-index: 15;
width: 48px;
height: 48px;
background-color: #34495e;
border-color: #2c3e50;
box-shadow: 0 4px 0 #2c3e50, 0 6px 10px rgba(0, 0, 0, 0.2);
}
#btn-reset-zoom:hover { background-color: #3d566e; }
canvas { touch-action: none; }
.iframe_fs_back{z-index:1999;top:16px;}
.iframeoverlay{z-index:2000;}
.contentLoader{z-index:2001;}
.gameStrip_in{z-index:2002;}