| :root { |
| --primary: hsl(25, 90%, 55%); |
| --primary-dark: hsl(25, 90%, 40%); |
| --secondary: hsl(140, 50%, 40%); |
| --accent: hsl(45, 100%, 50%); |
| --background: hsl(20, 20%, 5%); |
| --surface: hsla(20, 20%, 15%, 0.8); |
| --text: #ffffff; |
| --text-muted: hsla(0, 0%, 100%, 0.6); |
| --glass: hsla(0, 0%, 100%, 0.05); |
| --glass-border: hsla(0, 0%, 100%, 0.1); |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| background-color: var(--background); |
| color: var(--text); |
| margin: 0; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| height: 100vh; |
| width: 100vw; |
| overflow: hidden; |
| user-select: none; |
| } |
|
|
| #root { |
| width: 100%; |
| height: 100%; |
| } |
|
|
| .app-container { |
| max-width: 500px; |
| width: 100%; |
| height: 100%; |
| margin: 0 auto; |
| position: relative; |
| background: radial-gradient(circle at top, hsl(25, 50%, 15%), var(--background)); |
| padding: 20px; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .header { |
| text-align: center; |
| margin-bottom: 30px; |
| animation: fadeInDown 0.8s ease-out; |
| } |
|
|
| .header h1 { |
| font-size: 2.5rem; |
| margin: 0; |
| background: linear-gradient(135deg, var(--accent), var(--primary)); |
| -webkit-background-clip: text; |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| font-weight: 800; |
| letter-spacing: -1px; |
| } |
|
|
| .header p { |
| color: var(--text-muted); |
| margin: 5px 0; |
| font-size: 0.9rem; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| } |
|
|
| .lobby-grid { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 15px; |
| flex: 1; |
| } |
|
|
| .game-card { |
| background: var(--glass); |
| border: 1px solid var(--glass-border); |
| backdrop-filter: blur(10px); |
| border-radius: 20px; |
| padding: 20px; |
| display: flex; |
| align-items: center; |
| gap: 20px; |
| cursor: pointer; |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .game-card:hover { |
| background: var(--surface); |
| border-color: var(--primary); |
| transform: translateY(-5px); |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); |
| } |
|
|
| .game-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 2px; |
| background: linear-gradient(90deg, transparent, var(--primary), transparent); |
| opacity: 0; |
| transition: 0.3s; |
| } |
|
|
| .game-card:hover::before { |
| opacity: 1; |
| } |
|
|
| .game-icon { |
| width: 60px; |
| height: 60px; |
| background: var(--primary); |
| border-radius: 15px; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| font-size: 1.8rem; |
| box-shadow: 0 4px 15px rgba(235, 126, 31, 0.3); |
| } |
|
|
| .game-info h3 { |
| margin: 0; |
| font-size: 1.2rem; |
| font-weight: 600; |
| } |
|
|
| .game-info p { |
| margin: 5px 0 0; |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| } |
|
|
| |
| .game-view { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| animation: fadeIn 0.5s ease-out; |
| } |
|
|
| .back-btn { |
| background: none; |
| border: none; |
| color: var(--text-muted); |
| font-size: 1rem; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| margin-bottom: 20px; |
| padding: 0; |
| } |
|
|
| .kamba-game { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| position: relative; |
| } |
|
|
| .rope-container { |
| width: 100%; |
| height: 60px; |
| background: rgba(0, 0, 0, 0.3); |
| border-radius: 30px; |
| position: relative; |
| display: flex; |
| align-items: center; |
| margin: 50px 0; |
| overflow: hidden; |
| } |
|
|
| .rope { |
| height: 8px; |
| background: #d4a373; |
| width: 200%; |
| position: absolute; |
| transition: transform 0.1s linear; |
| box-shadow: 0 0 10px rgba(212, 163, 115, 0.5); |
| } |
|
|
| .rope-center { |
| width: 20px; |
| height: 40px; |
| background: var(--primary); |
| position: absolute; |
| left: 50%; |
| transform: translateX(-50%); |
| z-index: 2; |
| border-radius: 4px; |
| } |
|
|
| .mash-btn { |
| width: 120px; |
| height: 120px; |
| border-radius: 50%; |
| border: none; |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); |
| color: white; |
| font-size: 1.2rem; |
| font-weight: 800; |
| cursor: pointer; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 4px 10px rgba(255, 255, 255, 0.2); |
| transition: transform 0.1s; |
| user-select: none; |
| touch-action: manipulation; |
| } |
|
|
| .mash-btn:active { |
| transform: scale(0.9); |
| } |
|
|
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| } |
|
|
| to { |
| opacity: 1; |
| } |
| } |
|
|
| @keyframes fadeInDown { |
| from { |
| opacity: 0; |
| transform: translateY(-20px); |
| } |
|
|
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
