max-width: 1000px;
margin-top: 10px;
border-radius: 25px;
padding: 20px;
background: linear-gradient(45deg, var(--wood-dark), var(--wood-light), var(--wood-dark));
box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 20px 50px rgba(0,0,0,0.6);
}
.canvas-container {
position: relative;
width: 100%;
padding-top: 50%;
background: #0f5e38;
border-radius: 8px;
box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
overflow: hidden;
}
canvas {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
cursor: crosshair;
}
/* UI Overlay */
.ui-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 15px;
}
.hud-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.player-badge {
background: var(--bg-panel);
backdrop-filter: blur(8px);
padding: 10px 20px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.1);
text-align: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
transition: transform 0.3s, border-color 0.3s;
min-width: 120px;
}
.player-badge.active {
border-color: var(--accent-gold);
transform: scale(1.05);
box-shadow: 0 0 15px rgba(251, 191, 36, 0.3);
}
.p-name { font-weight: 800; color: var(--accent-gold); font-size: 1.1em; }
.p-group { font-size: 0.85em; color: #cbd5e1; margin-top: 2px; }
.p-score { font-size: 1.4em; font-weight: bold; color: white; margin-top: 5px; }
.game-message {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.85);
padding: 15px 40px;
border-radius: 50px;
font-size: 1.8em;
font-weight: bold;
color: var(--accent-gold);
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
pointer-events: none;
text-align: center;
white-space: nowrap;
border: 1px solid var(--accent-gold);
box-shadow: 0 0 30px rgba(251, 191, 36, 0.2);
}
.game-message.show { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
/* Controls Area */
.controls-bar {
width: 100%;
max-width: 1000px;
margin-top: 20px;
background: var(--bg-panel);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid rgba(255,255,255,0.1);
flex-wrap: wrap;
gap: 15px;
}
.control-group { display: flex; gap: 15px; align-items: center; }
/* Spin Control */
.spin-control {
width: 60px; height: 60px;
background: radial-gradient(circle at 30% 30%, #fff, #ccc);
border-radius: 50%;
position: relative;
cursor: pointer;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.spin-dot {
width: 8px; height: 8px;
background: red;
border-radius: 50%;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.spin-label { font-size: 0.8em; color: #94a3b8; text-align: center; margin-top: 5px; }
select {
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.2);
color: white;
padding: 10px;
border-radius: 8px;
font-family: inherit;
outline: none;
}
button {
background: var(--accent-green);
border: none;
padding: 12px 24px;
border-radius: 8px;
color: white;
font-weight: bold;
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 1px;
}
button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4); }
.ai-indicator {
width: 12px; height: 12px;
background: var(--accent-gold);
border-radius: 50%;
display: inline-block;
margin-right: 8px;
animation: pulse 1s infinite;
display: none;
}
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }
@media (max-width: 600px) {
.game-wrapper { padding: 10px; margin-top: 5px; }
.hud-top { font-size: 0.8em; }
.controls-bar { justify-content: center; }
.spin-wrapper { display: none; } /* Hide spin on small mobile for simplicity */
}
AI hamleleri ve ipuclari icin giris yapin. Normal oyun modu ucretsizdir.
Uye Girisi
AI ozellikleri aylik UyeLimitChat bakiyenizi kullanir. Bakiye ucretsiz ve ucretli uyeler icin aylik yenilenir.
AI Modeli (kullanim bakiyeden duser)