184 lines
3.6 KiB
CSS
184 lines
3.6 KiB
CSS
:root {
|
|
--wood-bg: #f9d8b8;
|
|
--wood-line: rgba(139, 69, 19, 0.08);
|
|
--btn-red: #d35d5d;
|
|
--btn-border: #4e342e;
|
|
--font-main: 'Fredoka', sans-serif;
|
|
--mold-fill: rgba(239, 154, 154, 0.4);
|
|
--mold-border: #5d4037;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #d7ccc8;
|
|
font-family: var(--font-main);
|
|
color: #3e2723;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: none;
|
|
}
|
|
|
|
.game-container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
max-width: 900px;
|
|
background: var(--wood-bg);
|
|
position: relative;
|
|
border: 12px solid #8d6e63;
|
|
box-shadow: inset 0 0 100px rgba(0,0,0,0.15);
|
|
/* Wood Board Texture */
|
|
background-image:
|
|
linear-gradient(var(--wood-line) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--wood-line) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.game-header {
|
|
padding: 15px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
z-index: 20;
|
|
}
|
|
|
|
.icon-btn {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--btn-border);
|
|
background: rgba(255,255,255,0.4);
|
|
color: var(--btn-border);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
|
|
transition: all 0.1s;
|
|
}
|
|
|
|
.icon-btn:active {
|
|
transform: scale(0.92);
|
|
background: rgba(255,255,255,0.6);
|
|
}
|
|
|
|
.icon-btn svg {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
.header-center {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stars-display {
|
|
font-size: 2rem;
|
|
color: #ffb300;
|
|
text-shadow: 2px 2px 0 #3e2723;
|
|
letter-spacing: 4px;
|
|
}
|
|
|
|
.star-gold { color: #ffb300; }
|
|
.star-outline { color: #d7ccc8; opacity: 0.6; }
|
|
|
|
.main-stage {
|
|
flex: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#game-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: crosshair;
|
|
touch-action: none;
|
|
}
|
|
|
|
.game-footer {
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 15px;
|
|
z-index: 20;
|
|
}
|
|
|
|
.drop-trigger {
|
|
background: var(--btn-red);
|
|
color: white;
|
|
border: 3px solid var(--btn-border);
|
|
padding: 14px 45px;
|
|
border-radius: 35px;
|
|
font-family: inherit;
|
|
font-weight: 700;
|
|
font-size: 1.3rem;
|
|
cursor: pointer;
|
|
box-shadow: 0 5px 0 var(--btn-border);
|
|
transition: all 0.1s;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.drop-trigger:active {
|
|
transform: translateY(3px);
|
|
box-shadow: 0 2px 0 var(--btn-border);
|
|
}
|
|
|
|
.drop-trigger:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
box-shadow: 0 5px 0 var(--btn-border);
|
|
}
|
|
|
|
#accuracy-display {
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
color: #3e2723;
|
|
background: rgba(255,255,255,0.5);
|
|
padding: 5px 15px;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
}
|
|
|
|
#toast-container {
|
|
position: fixed;
|
|
top: 40%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.toast {
|
|
background: white;
|
|
padding: 20px 40px;
|
|
border-radius: 40px;
|
|
border: 4px solid var(--btn-border);
|
|
box-shadow: 8px 8px 0 var(--btn-border);
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
animation: pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
|
}
|
|
|
|
@keyframes pop-in {
|
|
0% { transform: scale(0.4) rotate(-15deg); opacity: 0; }
|
|
100% { transform: scale(1) rotate(0deg); opacity: 1; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.game-container { border-width: 6px; }
|
|
.drop-trigger { padding: 12px 35px; font-size: 1.1rem; }
|
|
.stars-display { font-size: 1.6rem; }
|
|
.icon-btn { width: 40px; height: 40px; }
|
|
.icon-btn svg { width: 22px; height: 22px; }
|
|
} |