942 lines
24 KiB
CSS
942 lines
24 KiB
CSS
/* ==========================================================================
|
||
Okey — Modern Masa Görünümü
|
||
========================================================================== */
|
||
:root {
|
||
/* ---- Renk sistemi (tek kaynak) ---- */
|
||
--bg: #0c1a13;
|
||
--felt: #1b5e3a;
|
||
--felt-dark: #123b26;
|
||
--felt-light: #24784c;
|
||
--wood: #7a4a1e;
|
||
--wood-hi: #a9713a;
|
||
--wood-dark: #4a2a10;
|
||
|
||
--tile-bg: #fdfbf4;
|
||
--tile-edge: #cfc8b2;
|
||
--tile-shadow: rgba(0, 0, 0, 0.38);
|
||
|
||
--kirmizi: #d92b2b;
|
||
--siyah: #26292e;
|
||
--mavi: #1e64d9;
|
||
--sari: #8a5a00; /* beyaz taş zemininde WCAG uyumlu koyu sarı (rakam/ikon) */
|
||
--sari-dot: #e8a615; /* dolgu noktaları için canlı sarı */
|
||
|
||
--gold: #ffcc33;
|
||
--gold-deep: #c99a12;
|
||
|
||
--text: #eef4ef;
|
||
--muted: #9fb8a8;
|
||
--panel: rgba(0, 0, 0, 0.28);
|
||
|
||
/* ---- Yükselti (elevation) ölçeği ---- */
|
||
--el-1: 0 1px 2px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.22);
|
||
--el-2: 0 2px 4px rgba(0,0,0,.30), 0 6px 16px rgba(0,0,0,.28);
|
||
--el-3: 0 4px 10px rgba(0,0,0,.34), 0 14px 34px rgba(0,0,0,.34);
|
||
--el-4: 0 10px 24px rgba(0,0,0,.40), 0 28px 64px rgba(0,0,0,.42);
|
||
|
||
/* ---- Geometri & hareket ---- */
|
||
--r-sm: 8px;
|
||
--r-md: 12px;
|
||
--r-lg: 18px;
|
||
--r-xl: 24px;
|
||
--ease: cubic-bezier(.22, .61, .36, 1);
|
||
--dur: .2s;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html, body {
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
|
||
background:
|
||
radial-gradient(circle at 50% 30%, #276f4a 0%, #0e2419 62%, #071310 100%),
|
||
var(--bg);
|
||
color: var(--text);
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
/* Hareket azaltma tercihine saygı (erişilebilirlik) */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: .001ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: .001ms !important;
|
||
}
|
||
}
|
||
|
||
#app {
|
||
display: grid;
|
||
grid-template-columns: 1fr 260px;
|
||
grid-template-rows: auto 1fr;
|
||
gap: 10px;
|
||
padding: 10px;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ------------------------------- TOPBAR ------------------------------- */
|
||
#topbar {
|
||
grid-column: 1 / -1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
background:
|
||
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
|
||
linear-gradient(180deg, rgba(6,18,12,.72), rgba(6,18,12,.42));
|
||
border: 1px solid rgba(255,255,255,.10);
|
||
border-radius: var(--r-lg);
|
||
padding: 12px 18px;
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: var(--el-2);
|
||
}
|
||
|
||
.brand { display: flex; align-items: center; gap: 13px; }
|
||
.brand .logo {
|
||
font-size: 32px;
|
||
line-height: 1;
|
||
filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
|
||
}
|
||
.brand h1 {
|
||
font-size: 21px;
|
||
font-weight: 800;
|
||
letter-spacing: .4px;
|
||
line-height: 1.1;
|
||
background: linear-gradient(180deg, #fff 20%, #ffe9a8 105%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.brand .sub {
|
||
font-size: 10.5px;
|
||
color: var(--muted);
|
||
letter-spacing: 1.4px;
|
||
text-transform: uppercase;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
||
|
||
.info-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 3px;
|
||
background: rgba(0,0,0,.3);
|
||
border: 1px solid rgba(255,255,255,.1);
|
||
border-radius: 10px;
|
||
padding: 5px 10px;
|
||
min-width: 74px;
|
||
}
|
||
.info-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
|
||
.mini-tile-wrap { display: flex; }
|
||
|
||
/* ------------------------------- BUTONLAR ----------------------------- */
|
||
.btn {
|
||
border: none;
|
||
border-radius: 10px;
|
||
padding: 12px 18px;
|
||
min-height: 44px; /* WCAG 2.5.5 dokunma hedefi */
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
letter-spacing: .2px;
|
||
cursor: pointer;
|
||
transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
|
||
font-family: inherit;
|
||
}
|
||
.btn:active { transform: translateY(1px) scale(.99); }
|
||
.btn-primary {
|
||
/* Düz opak zemin: gradient yarı saydam katmanlarda kontrast ölçümünü
|
||
güvenilmez kılıyordu → ölçülebilir, WCAG uyumlu tek ton. */
|
||
background: linear-gradient(180deg, #f7c62a, #e0a800);
|
||
color: #241700; /* kontrast ≈9:1 */
|
||
border: 1px solid #b98a00;
|
||
box-shadow: 0 3px 0 #a97c00, var(--el-1);
|
||
}
|
||
.btn-primary:hover {
|
||
filter: brightness(1.06);
|
||
box-shadow: 0 5px 16px rgba(255, 204, 51, .42), 0 3px 0 #a97c00;
|
||
}
|
||
.btn-danger {
|
||
background: linear-gradient(180deg, #ef5350, #c62828);
|
||
color: #fff;
|
||
box-shadow: 0 3px 0 #8e1c1c, var(--el-1);
|
||
}
|
||
.btn-danger:hover:not(:disabled) {
|
||
filter: brightness(1.06);
|
||
box-shadow: 0 5px 16px rgba(239, 83, 80, .48), 0 3px 0 #8e1c1c;
|
||
}
|
||
.btn-ghost {
|
||
background: rgba(255,255,255,.07);
|
||
color: var(--text);
|
||
border: 1px solid rgba(255,255,255,.14);
|
||
box-shadow: none;
|
||
}
|
||
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.13); }
|
||
.btn:disabled {
|
||
opacity: .38;
|
||
cursor: not-allowed;
|
||
box-shadow: none;
|
||
filter: none;
|
||
}
|
||
|
||
/* ------------------------------- MASA --------------------------------- */
|
||
#table {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
position: relative;
|
||
border-radius: var(--r-xl);
|
||
padding: 14px;
|
||
min-height: 640px;
|
||
background:
|
||
/* ince çuha dokusu */
|
||
repeating-linear-gradient(45deg,
|
||
rgba(255,255,255,.014) 0 2px,
|
||
rgba(0,0,0,.014) 2px 4px),
|
||
radial-gradient(ellipse at 50% 45%, var(--felt-light) 0%, var(--felt) 48%, var(--felt-dark) 100%);
|
||
border: 10px solid transparent;
|
||
border-image: none;
|
||
box-shadow:
|
||
inset 0 0 90px rgba(0,0,0,.55),
|
||
inset 0 2px 0 rgba(255,255,255,.10),
|
||
0 18px 48px rgba(0,0,0,.58);
|
||
}
|
||
|
||
/* Ahşap kenar: gerçek bir masaya derinlik veren çift çerçeve */
|
||
#table::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -10px;
|
||
border-radius: var(--r-xl);
|
||
pointer-events: none;
|
||
background: transparent;
|
||
border: 10px solid transparent;
|
||
background-image: linear-gradient(160deg, var(--wood-hi), var(--wood) 42%, var(--wood-dark));
|
||
background-origin: border-box;
|
||
background-clip: border-box;
|
||
-webkit-mask:
|
||
linear-gradient(#000 0 0) content-box,
|
||
linear-gradient(#000 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask:
|
||
linear-gradient(#000 0 0) content-box,
|
||
linear-gradient(#000 0 0);
|
||
mask-composite: exclude;
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(255,255,255,.10),
|
||
0 14px 36px rgba(0,0,0,.5);
|
||
}
|
||
|
||
.mid-row {
|
||
display: grid;
|
||
grid-template-columns: 96px 1fr 96px;
|
||
gap: 8px;
|
||
align-items: stretch;
|
||
flex: 1;
|
||
}
|
||
|
||
/* ------------------------------ OTURMA -------------------------------- */
|
||
.seat {
|
||
border-radius: var(--r-md);
|
||
padding: 8px 10px;
|
||
background: linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.14));
|
||
border: 1px solid rgba(255,255,255,.07);
|
||
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
|
||
transition: box-shadow .3s var(--ease), border-color .3s var(--ease),
|
||
background .3s var(--ease), transform .3s var(--ease);
|
||
}
|
||
.seat.active {
|
||
border-color: rgba(255,204,51,.75);
|
||
background: linear-gradient(180deg, rgba(255,204,51,.16), rgba(255,204,51,.06));
|
||
box-shadow:
|
||
0 0 0 1px rgba(255,204,51,.42),
|
||
0 0 26px rgba(255,204,51,.24),
|
||
inset 0 1px 0 rgba(255,255,255,.10);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* Aktif oyuncu nabzı — "sıra kimde" sorusunu bir bakışta yanıtlar */
|
||
.seat.active .seat-avatar::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -3px;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(255,204,51,.9);
|
||
animation: turnPulse 1.6s var(--ease) infinite;
|
||
}
|
||
@keyframes turnPulse {
|
||
0% { transform: scale(1); opacity: .9; }
|
||
70% { transform: scale(1.35); opacity: 0; }
|
||
100% { transform: scale(1.35); opacity: 0; }
|
||
}
|
||
|
||
.seat-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.seat-name {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: .3px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Avatar rozeti */
|
||
.seat-avatar {
|
||
position: relative;
|
||
width: 24px;
|
||
height: 24px;
|
||
flex: none;
|
||
border-radius: 50%;
|
||
display: grid;
|
||
place-items: center;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
background: linear-gradient(180deg, #2f8a5c, #1d5c3d);
|
||
border: 1px solid rgba(255,255,255,.18);
|
||
box-shadow: var(--el-1);
|
||
}
|
||
.seat.active .seat-avatar {
|
||
background: linear-gradient(180deg, #ffd95e, #d9a300);
|
||
border-color: rgba(255,255,255,.4);
|
||
}
|
||
.seat-avatar svg { width: 13px; height: 13px; display: block; }
|
||
|
||
/* İsim + taş sayısı dikey grubu (avatarın yanında) */
|
||
.seat-meta {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.seat-count {
|
||
font-size: 10.5px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
background: rgba(0,0,0,.42);
|
||
border: 1px solid rgba(255,255,255,.10);
|
||
padding: 2px 7px;
|
||
border-radius: 999px;
|
||
white-space: nowrap;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* Taş sayısı barı — 14 taş = tam dolu */
|
||
.seat-bar {
|
||
height: 4px;
|
||
border-radius: 999px;
|
||
background: rgba(0,0,0,.42);
|
||
overflow: hidden;
|
||
margin-top: 6px;
|
||
}
|
||
.seat-bar > i {
|
||
display: block;
|
||
height: 100%;
|
||
border-radius: 999px;
|
||
background: linear-gradient(90deg, #2f9e63, #7fe0a5);
|
||
transition: width .35s var(--ease);
|
||
}
|
||
.seat.active .seat-bar > i {
|
||
background: linear-gradient(90deg, var(--gold-deep), var(--gold));
|
||
}
|
||
|
||
.you-badge {
|
||
background: linear-gradient(180deg, #ffd95e, #e0a800);
|
||
color: #241700;
|
||
font-size: 9px;
|
||
font-weight: 800;
|
||
padding: 1px 6px;
|
||
border-radius: 999px;
|
||
letter-spacing: .6px;
|
||
}
|
||
.seat-top { order: 0; }
|
||
.seat-bottom { order: 2; }
|
||
|
||
.opp-hand { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; min-height: 40px; }
|
||
.opp-hand.vertical {
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
min-height: 200px;
|
||
gap: 2px;
|
||
}
|
||
.seat-left, .seat-right { display: flex; flex-direction: column; }
|
||
|
||
/* Kapalı (arka yüz) mini taş */
|
||
.tile-back {
|
||
width: 24px;
|
||
height: 34px;
|
||
border-radius: 4px;
|
||
background:
|
||
linear-gradient(135deg, #2e6b4a 0%, #1d4a32 100%);
|
||
border: 1px solid rgba(255,255,255,.15);
|
||
box-shadow: inset 0 0 6px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.4);
|
||
position: relative;
|
||
flex: none;
|
||
}
|
||
.tile-back::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 3px;
|
||
border-radius: 2px;
|
||
border: 1px dashed rgba(255,255,255,.18);
|
||
}
|
||
.opp-hand.vertical .tile-back { width: 34px; height: 15px; }
|
||
|
||
/* ------------------------------ MERKEZ -------------------------------- */
|
||
#center-area {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 6px;
|
||
}
|
||
.center-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 22px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.pile-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||
.pile-label {
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.4px;
|
||
color: var(--muted);
|
||
}
|
||
/* Tıklanabilir yığınlara hafif davet halkası */
|
||
.deck-pile::before,
|
||
.discard-pile::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -6px;
|
||
border-radius: inherit;
|
||
border: 1px dashed rgba(255,255,255,.12);
|
||
opacity: 0;
|
||
transition: opacity .2s var(--ease);
|
||
pointer-events: none;
|
||
}
|
||
.deck-pile:not(.disabled):hover::before,
|
||
.discard-pile:not(.empty-disabled):hover::before { opacity: 1; }
|
||
|
||
.deck-pile {
|
||
width: 62px;
|
||
height: 88px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
border-radius: 8px;
|
||
transition: transform .15s ease;
|
||
}
|
||
.deck-pile:hover { transform: translateY(-4px); }
|
||
.deck-pile.disabled { cursor: default; opacity: .55; }
|
||
.deck-pile.disabled:hover { transform: none; }
|
||
.deck-stack {
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 8px;
|
||
background: linear-gradient(145deg, #2e7d55, #17512f);
|
||
border: 2px solid rgba(255,255,255,.22);
|
||
box-shadow: 0 3px 6px rgba(0,0,0,.5);
|
||
}
|
||
.deck-stack:nth-child(1) { transform: translate(-6px, 6px); opacity: .5; }
|
||
.deck-stack:nth-child(2) { transform: translate(-3px, 3px); opacity: .75; }
|
||
.deck-stack:nth-child(3) {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-image:
|
||
repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 6px, transparent 6px 12px);
|
||
}
|
||
.deck-count {
|
||
position: absolute;
|
||
bottom: -20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
font-variant-numeric: tabular-nums;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.discard-pile {
|
||
width: 74px;
|
||
height: 96px;
|
||
border-radius: 10px;
|
||
border: 2px dashed rgba(255,255,255,.22);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
background: rgba(0,0,0,.18);
|
||
transition: border-color .15s ease, background .15s ease;
|
||
}
|
||
.discard-pile:hover:not(.empty-disabled) {
|
||
border-color: var(--gold);
|
||
background: rgba(255,204,51,.08);
|
||
}
|
||
.discard-pile.empty-disabled { cursor: default; }
|
||
.discard-pile .empty-hint { font-size: 10px; color: var(--muted); text-align: center; padding: 4px; }
|
||
|
||
/* --------------------------- SIRA GÖSTERGESİ --------------------------- */
|
||
.turn-indicator {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 3px;
|
||
position: relative;
|
||
background:
|
||
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 60%),
|
||
rgba(0,0,0,.42);
|
||
border: 1px solid rgba(255,204,51,.45);
|
||
border-radius: var(--r-lg);
|
||
padding: 11px 24px;
|
||
min-width: 140px;
|
||
box-shadow:
|
||
0 0 22px rgba(255,204,51,.18),
|
||
var(--el-2);
|
||
}
|
||
/* Üstte durum çizgisi */
|
||
.turn-indicator::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -1px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 44%;
|
||
height: 2px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(90deg, transparent, var(--gold), transparent);
|
||
}
|
||
.turn-label {
|
||
font-size: 9px;
|
||
letter-spacing: 2.2px;
|
||
color: var(--muted);
|
||
text-transform: uppercase;
|
||
font-weight: 700;
|
||
}
|
||
.turn-name { font-size: 17px; font-weight: 800; color: var(--gold); }
|
||
.turn-phase {
|
||
font-size: 11px;
|
||
color: #cfe6d8;
|
||
background: rgba(255,255,255,.08);
|
||
padding: 2px 9px;
|
||
border-radius: 10px;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
/* ------------------------------- TAŞLAR ------------------------------- */
|
||
.tile {
|
||
width: 46px;
|
||
height: 64px;
|
||
border-radius: var(--r-sm);
|
||
background:
|
||
linear-gradient(170deg, #ffffff 0%, var(--tile-bg) 55%, #efe9d8 100%);
|
||
border: 1px solid var(--tile-edge);
|
||
box-shadow:
|
||
0 3px 5px var(--tile-shadow),
|
||
0 1px 0 rgba(255,255,255,.9) inset,
|
||
inset 0 -3px 0 rgba(0,0,0,.09);
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
transition: transform .15s var(--ease), box-shadow .15s var(--ease);
|
||
flex: none;
|
||
}
|
||
/* Üst kenarda ışık çizgisi (seramik / kemik dokusu hissi) */
|
||
.tile::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 1px;
|
||
left: 6px;
|
||
right: 6px;
|
||
height: 1px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
|
||
pointer-events: none;
|
||
}
|
||
.tile:hover {
|
||
transform: translateY(-7px);
|
||
box-shadow:
|
||
0 10px 18px rgba(0,0,0,.5),
|
||
0 1px 0 rgba(255,255,255,.9) inset;
|
||
}
|
||
.tile.selected {
|
||
transform: translateY(-9px);
|
||
box-shadow:
|
||
0 12px 20px rgba(0,0,0,.55),
|
||
0 0 0 2px var(--gold),
|
||
0 0 18px rgba(255,204,51,.55);
|
||
}
|
||
.tile.selected::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: inherit;
|
||
background: linear-gradient(180deg, rgba(255,204,51,.22), rgba(255,204,51,.04));
|
||
pointer-events: none;
|
||
}
|
||
.tile .tile-rank {
|
||
font-size: 21px;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.tile .tile-color-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
margin-top: 4px;
|
||
}
|
||
.tile .tile-corner {
|
||
position: absolute;
|
||
font-size: 8px;
|
||
font-weight: 700;
|
||
opacity: .75;
|
||
}
|
||
.tile .tile-corner.tl { top: 3px; left: 4px; }
|
||
.tile .tile-corner.br { bottom: 3px; right: 4px; transform: rotate(180deg); }
|
||
|
||
.tile.c-kirmizi .tile-rank, .tile.c-kirmizi .tile-corner { color: var(--kirmizi); }
|
||
.tile.c-siyah .tile-rank, .tile.c-siyah .tile-corner { color: var(--siyah); }
|
||
.tile.c-mavi .tile-rank, .tile.c-mavi .tile-corner { color: var(--mavi); }
|
||
.tile.c-sari .tile-rank, .tile.c-sari .tile-corner { color: var(--sari); }
|
||
.tile .dot-kirmizi { background: var(--kirmizi); }
|
||
.tile .dot-siyah { background: var(--siyah); }
|
||
.tile .dot-mavi { background: var(--mavi); }
|
||
.tile .dot-sari { background: var(--sari-dot); }
|
||
|
||
/* Gerçek okey */
|
||
.tile.okey {
|
||
background: linear-gradient(170deg, #fff8dc 0%, #ffe9a8 60%, #f7d97a 100%);
|
||
border: 2px solid var(--gold);
|
||
box-shadow: 0 0 12px rgba(255,204,51,.7), 0 3px 6px var(--tile-shadow);
|
||
}
|
||
.tile.okey::before {
|
||
content: '★';
|
||
position: absolute;
|
||
top: 1px;
|
||
right: 3px;
|
||
font-size: 9px;
|
||
color: #b8860b;
|
||
}
|
||
/* Sahte okey */
|
||
.tile.fake-okey {
|
||
background: linear-gradient(170deg, #f3e5ff 0%, #e2c6ff 60%, #cf9dff 100%);
|
||
border: 2px solid #9b51e0;
|
||
box-shadow: 0 0 12px rgba(155,81,224,.65), 0 3px 6px var(--tile-shadow);
|
||
}
|
||
.tile.fake-okey .tile-rank { color: #6b2fae; }
|
||
.tile.fake-okey::before {
|
||
content: '◆';
|
||
position: absolute;
|
||
top: 1px;
|
||
right: 3px;
|
||
font-size: 9px;
|
||
color: #6b2fae;
|
||
}
|
||
|
||
/* Küçük taş (gösterge/okey/atılan) */
|
||
.tile.mini {
|
||
width: 34px;
|
||
height: 48px;
|
||
border-radius: 5px;
|
||
}
|
||
.tile.mini .tile-rank { font-size: 15px; }
|
||
.tile.mini .tile-color-dot { width: 6px; height: 6px; margin-top: 2px; }
|
||
.tile.mini .tile-corner { font-size: 6px; }
|
||
|
||
/* --------------------------- OYUNCU ELİ ------------------------------- */
|
||
.player-hand {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
min-height: 86px;
|
||
padding: 16px 10px 10px;
|
||
/* El rafı: taşların önünde durduğu ahşap kenar hissi */
|
||
border-radius: var(--r-lg) var(--r-lg) var(--r-md) var(--r-md);
|
||
background:
|
||
linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.10)),
|
||
linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));
|
||
border: 1px solid rgba(255,255,255,.07);
|
||
box-shadow: inset 0 2px 10px rgba(0,0,0,.35);
|
||
}
|
||
|
||
.player-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
margin-top: 8px;
|
||
padding-top: 10px;
|
||
border-top: 1px solid rgba(255,255,255,.09);
|
||
}
|
||
.status-msg {
|
||
font-size: 12.5px;
|
||
color: #cfe6d8;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
/* Durum mesajının başında küçük bir gösterge noktası */
|
||
.status-msg::before {
|
||
content: '';
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
flex: none;
|
||
background: var(--gold);
|
||
box-shadow: 0 0 8px rgba(255,204,51,.7);
|
||
}
|
||
|
||
/* ------------------------------- GÜNLÜK ------------------------------- */
|
||
#log-panel {
|
||
background:
|
||
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 120px),
|
||
rgba(0,0,0,.36);
|
||
border: 1px solid rgba(255,255,255,.09);
|
||
border-radius: var(--r-lg);
|
||
padding: 14px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
max-height: calc(100vh - 40px);
|
||
box-shadow: var(--el-2);
|
||
}
|
||
#log-panel h2 {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.6px;
|
||
color: var(--muted);
|
||
margin-bottom: 10px;
|
||
padding-bottom: 9px;
|
||
border-bottom: 1px solid rgba(255,255,255,.08);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
}
|
||
#log-panel h2::before {
|
||
content: '';
|
||
width: 3px;
|
||
height: 12px;
|
||
border-radius: 2px;
|
||
background: var(--gold);
|
||
box-shadow: 0 0 8px rgba(255,204,51,.6);
|
||
}
|
||
#log-list {
|
||
list-style: none;
|
||
overflow-y: auto;
|
||
font-size: 11.5px;
|
||
line-height: 1.5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
padding-right: 3px;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: rgba(255,255,255,.18) transparent;
|
||
}
|
||
#log-list::-webkit-scrollbar { width: 6px; }
|
||
#log-list::-webkit-scrollbar-thumb {
|
||
background: rgba(255,255,255,.16);
|
||
border-radius: 999px;
|
||
}
|
||
#log-list::-webkit-scrollbar-track { background: transparent; }
|
||
|
||
#log-list li {
|
||
padding: 7px 10px;
|
||
border-radius: var(--r-sm);
|
||
background: rgba(255,255,255,.045);
|
||
border-left: 2px solid rgba(255,204,51,.35);
|
||
color: #d5e6da;
|
||
animation: logIn .18s var(--ease);
|
||
}
|
||
@keyframes logIn {
|
||
from { opacity: 0; transform: translateX(-4px); }
|
||
to { opacity: 1; transform: translateX(0); }
|
||
}
|
||
#log-list li:first-child {
|
||
background: rgba(255,204,51,.13);
|
||
border-left-color: var(--gold);
|
||
box-shadow: inset 0 0 0 1px rgba(255,204,51,.16);
|
||
}
|
||
|
||
/* Günlük olay türleri — renk kodlu kenar + hafif zemin */
|
||
#log-list li.log-draw { border-left-color: #4fa3e3; }
|
||
#log-list li.log-discard{ border-left-color: #e38b4f; }
|
||
#log-list li.log-okey { border-left-color: #b06fe0; background: rgba(176,111,224,.10); }
|
||
#log-list li.log-win { border-left-color: var(--gold); background: rgba(255,204,51,.14); }
|
||
#log-list li.log-skip { border-left-color: #7d8f85; }
|
||
|
||
/* ------------------------------ OVERLAY ------------------------------ */
|
||
.overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0,0,0,.74);
|
||
backdrop-filter: blur(6px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 100;
|
||
animation: fadeIn .22s ease;
|
||
padding: 20px;
|
||
}
|
||
.overlay.hidden { display: none; }
|
||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||
|
||
.overlay-card {
|
||
position: relative;
|
||
background:
|
||
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 45%),
|
||
linear-gradient(170deg, #1f6b47, #0e3624);
|
||
border: 2px solid var(--gold);
|
||
border-radius: var(--r-xl);
|
||
padding: 38px 48px 34px;
|
||
text-align: center;
|
||
max-width: 420px;
|
||
box-shadow:
|
||
0 24px 70px rgba(0,0,0,.72),
|
||
0 0 46px rgba(255,204,51,.25),
|
||
inset 0 1px 0 rgba(255,255,255,.14);
|
||
animation: popIn .34s cubic-bezier(.2,1.4,.6,1);
|
||
}
|
||
@keyframes popIn {
|
||
from { transform: scale(.82) translateY(10px); opacity: 0; }
|
||
to { transform: scale(1) translateY(0); opacity: 1; }
|
||
}
|
||
.overlay-emoji {
|
||
font-size: 56px;
|
||
line-height: 1;
|
||
margin-bottom: 10px;
|
||
filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
|
||
animation: trophyIn .5s cubic-bezier(.2,1.5,.5,1) .08s both;
|
||
}
|
||
@keyframes trophyIn {
|
||
from { transform: scale(.5) rotate(-12deg); opacity: 0; }
|
||
to { transform: scale(1) rotate(0); opacity: 1; }
|
||
}
|
||
.overlay-card h2 {
|
||
font-size: 27px;
|
||
font-weight: 800;
|
||
letter-spacing: .3px;
|
||
color: var(--gold);
|
||
margin-bottom: 8px;
|
||
text-shadow: 0 2px 10px rgba(255,204,51,.35);
|
||
}
|
||
.overlay-card p {
|
||
font-size: 13.5px;
|
||
line-height: 1.6;
|
||
color: #cfe6d8;
|
||
margin-bottom: 22px;
|
||
max-width: 320px;
|
||
margin-inline: auto;
|
||
}
|
||
.overlay-card .btn { min-width: 168px; }
|
||
|
||
/* Per gösterimi — kazanan elin açıklaması */
|
||
.overlay-per {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
margin-bottom: 22px;
|
||
padding: 12px;
|
||
border-radius: var(--r-md);
|
||
background: rgba(0,0,0,.28);
|
||
border: 1px solid rgba(255,255,255,.08);
|
||
min-height: 20px;
|
||
}
|
||
.per-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 5px 8px;
|
||
border-radius: var(--r-sm);
|
||
background: rgba(255,255,255,.05);
|
||
border: 1px solid rgba(255,255,255,.08);
|
||
}
|
||
.per-chip {
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
padding: 2px 6px;
|
||
border-radius: 5px;
|
||
background: #fdfbf4;
|
||
color: var(--siyah);
|
||
border: 1px solid var(--tile-edge);
|
||
font-variant-numeric: tabular-nums;
|
||
white-space: nowrap;
|
||
}
|
||
.per-chip.c-kirmizi { color: var(--kirmizi); }
|
||
.per-chip.c-siyah { color: var(--siyah); }
|
||
.per-chip.c-mavi { color: var(--mavi); }
|
||
.per-chip.c-sari { color: var(--sari); }
|
||
|
||
/* Konfeti katmanı (kazanma anı) */
|
||
.confetti-layer {
|
||
position: absolute;
|
||
inset: 0;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
border-radius: var(--r-xl);
|
||
}
|
||
.confetti-layer i {
|
||
position: absolute;
|
||
top: -14px;
|
||
width: 8px;
|
||
height: 12px;
|
||
border-radius: 2px;
|
||
opacity: .92;
|
||
animation: confettiFall linear forwards;
|
||
}
|
||
@keyframes confettiFall {
|
||
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
|
||
100% { transform: translateY(560px) rotate(620deg); opacity: 0; }
|
||
}
|
||
|
||
/* ---------------------------- RESPONSIVE ----------------------------- */
|
||
@media (max-width: 1080px) {
|
||
#app { grid-template-columns: 1fr; }
|
||
#log-panel { max-height: 160px; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.mid-row { grid-template-columns: 70px 1fr 70px; }
|
||
.tile { width: 38px; height: 54px; }
|
||
.tile .tile-rank { font-size: 17px; }
|
||
.player-hand { gap: 3px; }
|
||
.turn-indicator { min-width: 100px; padding: 8px 12px; }
|
||
.turn-name { font-size: 15px; }
|
||
.center-row { gap: 12px; }
|
||
.deck-pile { width: 52px; height: 74px; }
|
||
.discard-pile { width: 62px; height: 80px; }
|
||
}
|
||
@media (max-width: 520px) {
|
||
.tile { width: 31px; height: 45px; border-radius: 5px; }
|
||
.tile .tile-rank { font-size: 14px; }
|
||
.tile .tile-corner { display: none; }
|
||
.brand .sub { display: none; }
|
||
.info-box { min-width: 58px; padding: 4px 7px; }
|
||
}
|