/* Local materials and system fonts keep the table usable offline. */
:root {
  --okey-cuha: #396b5d;
  --okey-ahsap: #94613e;
  --okey-tas: #fffdf4;
  --okey-vurgu: #bd9558;
  --okey-gecis: 150ms ease;
  --okey-mavi: #126695;
  --okey-kirmizi: #b53430;
  --okey-sari: #b9780c;
  --okey-siyah: #282b2b;
  --ahsap-doku: repeating-linear-gradient(2deg, #351a0800 0 5px, #351a0812 6px, #fff0cc0c 7px, #351a0800 10px 17px);
  --yazi: #333b35;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: radial-gradient(ellipse at 50% 30%, #f7f4ec, #e5dfd3);
  color: var(--yazi); font: 14px/1.45 "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ust-bar, .masa, .istaka, .oyun-ipucu {
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
button {
  font: 600 12px/1.45 "Segoe UI", Arial, sans-serif; min-height: 38px;
  padding: 8px 15px; color: #3c4239;
  background: linear-gradient(#fffdf8, #eae3d6);
  border: 1px solid #c6bead; border-radius: 6px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b8af9d, 0 3px 5px #29201412;
  cursor: pointer; transition: background var(--okey-gecis), box-shadow var(--okey-gecis);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
button:hover:not(:disabled) { background: #fffdf7; border-color: #9c8a6a; }
button:active:not(:disabled) { box-shadow: inset 0 2px 4px #39280d20; }
button:disabled { opacity: .45; cursor: default; box-shadow: none; }
button:focus-visible, .tas:focus-visible { outline: 3px solid #d9ae5d; outline-offset: 3px; }
.birincil { color: #fff9e9; border-color: #24493e; background: linear-gradient(#487260, #315547); box-shadow: inset 0 1px 0 #ffffff25, 0 2px 0 #203e33, 0 3px 6px #16281e22; }
.birincil:hover:not(:disabled) { background: #487260; border-color: #24493e; }
.ust-bar { min-height: 76px; max-width: 1440px; margin: auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.marka { display: flex; align-items: center; gap: 12px; }
.marka strong { font: 600 25px Georgia, serif; letter-spacing: -.6px; }
.marka small { display: block; color: #7e8177; font-size: 11px; margin-top: 1px; }
.marka-ikon {
  display: grid; place-items: center; width: 36px; height: 44px;
  font: bold 30px Georgia, serif; color: #34614f;
  background: linear-gradient(125deg, #fffef6, #e2d8bf);
  border: 1px solid #cec4b0; border-bottom: 4px solid #bdb297; border-radius: 6px;
  box-shadow: 2px 3px 5px #514c3420; transform: rotate(-7deg);
}
.ust-bilgi { display: flex; gap: 9px; align-items: center; font-size: 13px; }
.ust-bilgi .etiket { color: #777d71; }
#okey-bilgi { font-weight: 700; }
.ust-eylemler { display: flex; gap: 8px; }
.ust-eylemler button:not(.birincil) { background: transparent; border-color: transparent; box-shadow: none; }
.ust-eylemler button:hover { background: #e3ddcf; }
.etiket, .atik-etiket { font-size: 10px; font-weight: 600; letter-spacing: .9px; text-transform: uppercase; }

/* Broad felt surface, rounded wooden rail, and physical opponent racks. */
.masa {
  position: relative; width: min(980px, calc(100% - 48px)); height: min(760px, 70vh); margin: 24px auto 0;
  padding: 24px; display: grid; place-items: center;
  grid-template-columns: 1fr; grid-template-rows: 1fr; color: #eeeade;
  background: radial-gradient(ellipse at 50% 35%, #ffffff0a, rgba(0,0,0,0.08)), var(--okey-cuha);
  border: 18px solid #d6c6b0; border-radius: 14px; /* outer frame */
  box-shadow: inset 0 6px 20px rgba(0,0,0,0.25), 0 20px 40px rgba(0,0,0,0.35);
}
.masa::before { content: ""; position: absolute; inset: 12px; border: 1px solid #e2d7a729; border-radius: 88px; pointer-events: none; }
.rakip { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; }
.rakip-kuzey { grid-column: 2; grid-row: 1; position: relative; gap: 4px; }
.rakip-bati { grid-column: 1; grid-row: 2; }
.rakip-dogu { grid-column: 3; grid-row: 2; }
.rakip-bilgi { margin: 0; font-size: 11px; color: #eceadebc; letter-spacing: .3px; }
.rakip-bilgi::before { content: ""; display: inline-block; width: 5px; height: 5px; background: #b7c5b5; border-radius: 50%; margin: 0 7px 2px 0; }
.rakip--aktif .rakip-bilgi { color: #fff8df; }
.rakip--aktif .rakip-bilgi::before { background: #ecd291; box-shadow: 0 0 0 3px #ecd29120; }
.rakip-eldeki {
  display: flex; gap: 2px; max-width: 100%; padding: 5px 7px 0;
  background: var(--ahsap-doku), linear-gradient(#ae7f55, #6f482f);
  border-radius: 4px; border-bottom: 7px solid #916442;
  box-shadow: inset 0 1px 0 #e9c28d80, 0 3px 0 #553822, 0 9px 10px #142c2760;
}
.tas-arka { width: 12px; height: 23px; flex: 0 1 12px; border-radius: 3px 3px 1px 1px; background: linear-gradient(110deg, #f8f3e0, #d1c5a8); border: 1px solid #bfb69a; box-shadow: 1px 0 1px #2f221a60; }
.rakip-kuzey .tas-arka { height: 19px; }
.rakip-kuzey .rakip-eldeki { padding-top: 3px; border-bottom-width: 5px; }
.orta { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 17px; }
.deal-overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.08); z-index: 1200; pointer-events: none; }
.deal-table { width: 560px; height: 340px; display: flex; align-items: center; justify-content: center; gap: 18px; position: relative; }
.bale { width: 120px; height: 72px; border-radius: 6px; background: linear-gradient(180deg,#efe8d6,#d8c8aa); box-shadow: 0 6px 12px rgba(0,0,0,0.35); transform: translateY(20px) scale(.9); opacity: 0; transition: transform 260ms var(--delay) ease, opacity 220ms var(--delay) ease, box-shadow 200ms ease; }
.bale--enter { transform: translateY(0) scale(1); opacity: 1; }
.bale--chosen { box-shadow: 0 14px 30px rgba(0,0,0,0.5); transform: scale(1.06) translateY(-6px); border: 2px solid #d9ae5d; }
.deal-dice { display: flex; gap: 12px; margin-left: 12px; align-items: center; }
.die { width: 46px; height: 46px; border-radius: 8px; background: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; box-shadow: 0 6px 12px rgba(0,0,0,0.35); transform: rotate(-10deg); }
.dice--roll .die { animation: diceRoll 650ms linear; }
@keyframes diceRoll { 0%{transform: translateY(-6px) rotate(-10deg)}50%{transform: translateY(6px) rotate(6deg)}100%{transform: translateY(0) rotate(-8deg)} }
.deal-overlay--out { opacity: 0; transform: scale(.98); transition: opacity 420ms ease, transform 420ms ease; }
.orta-ust { display: flex; align-items: center; justify-content: center; gap: 26px; }
.deste { position: relative; display: grid; grid-template-columns: 38px auto; align-items: center; column-gap: 10px; padding: 4px 9px; min-height: 56px; color: #eee8d8; background: transparent; border-color: transparent; box-shadow: none; }
.deste:hover:not(:disabled) { background: #ffffff0a; border-color: #d7c38a60; }
.deste-ikon { grid-row: 1 / 3; width: 32px; height: 45px; border-radius: 5px; border: 1px solid #c2bda8; background: linear-gradient(110deg, #fffceb, #dcd4ba); box-shadow: 3px 3px 0 #b6ac91, 4px 4px 0 #eee4c9, 7px 7px 0 #b0a58a, 8px 8px 0 #e5dbc2, 10px 11px 10px #11291e80; }
#deste-sayi { align-self: end; text-align: left; font-size: 19px; font-weight: 600; }
.deste-yazi { align-self: start; font-size: 10px; font-weight: 400; }
.deste--aktif { border: 1px solid #d9c69480; border-radius: 8px; }
.gosterge-kutu { display: flex; gap: 6px; align-items: center; }
.gosterge-kutu .etiket { font-size: 9px; color: #e0d9be; }
.tas.tas-gosterge { display: block; padding: 0; width: 36px; min-height: 48px; background: transparent; border: 0; box-shadow: none; }
.tas-gosterge > .tas { min-height: 48px; padding: 6px 4px; cursor: default; }
.tas-gosterge .tas-sayi { font-size: 21px; }
.orta-atiklar { display: flex; gap: 12px; width: 100%; justify-content: center; }
.atik-yuva { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.atik-etiket { color: #d7e0d4; font-size: 9px; text-align: center; }
.atik-yuva--al .atik-etiket { color: #eedcb2; }
.atik { width: 70px; min-height: 61px; display: flex; align-items: center; justify-content: center; padding: 3px; border: 1px solid #e9e4c830; border-radius: 8px; background: #173e3212; box-shadow: none; }
button.atik:hover:not(:disabled) { background: #d8dfc814; border-color: #d8c69690; }
.atik[data-bos="evet"]::before { content: ""; width: 27px; height: 38px; border: 1px solid #ede9d426; border-radius: 4px; }
.atik .tas { width: 35px; min-height: 48px; padding: 5px; cursor: inherit; }
.atik .tas-sayi { font-size: 21px; }
.atik .tas-nokta, .tas-gosterge .tas-nokta { width: 6px; height: 6px; }
.kuzey-atigi { position: absolute; right: -79px; bottom: 0; min-height: 46px; width: 46px; border-color: transparent; }
.kuzey-atigi[data-bos="evet"] { visibility: hidden; }
.kuzey-atigi .tas { transform: rotate(7deg); }
.birakma-alani { width: 142px; min-height: 99px; padding: 8px; border: 1px dashed #d8decb65; border-radius: 12px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 3px; background: #183f3217; transition: background var(--okey-gecis), border-color var(--okey-gecis); }
.birakma-alani .atik { border: none; background: transparent; min-height: 48px; padding: 0; }
.birakma-ipucu { font-size: 9px; color: #e2e7d5a6; text-align: center; }
.bitis-isareti { font-size: 29px; font-family: Georgia, serif; color: #dcc492; line-height: 48px; }
.bitis--hazir { border-color: #ebd8a2; background: #e2ce8b12; }
.sira-bilgi { grid-column: 1 / -1; grid-row: 3; margin: 5px 0 0; text-align: center; font-size: 12px; color: #c6d3c7; }
.sira-bilgi--oyuncu { color: #f4e6bc; }
.sira-bilgi--oyuncu::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin: 0 7px 1px 0; background: #e9d39d; }

/* Continuous shelves and a front lip instead of thirty recessed boxes. */
.istaka {
  max-width: 1232px; width: calc(100% - 80px); margin: 20px auto 0; padding: 12px 18px 14px;
  border: 1px solid #6b442c; border-top: 3px solid #bf9364; border-bottom: 7px solid #66412b;
  border-radius: 9px 9px 12px 12px;
  background: var(--ahsap-doku), radial-gradient(ellipse at 30% 0%, #d3a46b66, transparent 65%), linear-gradient(#a8794f, #95653f 60%, #af8054);
  box-shadow: inset 2px 0 3px #edcf9859, inset -3px 0 4px #41271355, 0 3px 0 #c5a580, 0 16px 24px -12px #3b281bac;
}
.istaka-baslik { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
#istaka-sayi { font-size: 12px; font-weight: 600; color: #fff2d2; letter-spacing: .4px; white-space: nowrap; }
.istaka-araclar { display: flex; gap: 7px; flex-wrap: wrap; }
.istaka-araclar button { min-height: 30px; padding: 5px 12px; font-size: 11px; }
#btn-per { background: linear-gradient(#f3e5c3, #dfc99c); color: #624521; border-color: #ac8755; }
.istaka-sira {
  position: relative; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 5px; padding: 9px 8px 10px; min-height: 96px;
  background: var(--ahsap-doku), linear-gradient(#56372370, #9c6b4500 30%, #6b402740);
  border-bottom: 7px solid #b78956; border-radius: 3px;
  box-shadow: inset 0 3px 5px #3c241840, 0 2px 0 #5e3a23, 0 4px 5px #3c251d40;
}
#istaka-alt { margin-top: 23px; }
.istaka-sira::before { position: absolute; top: -13px; left: 8px; font-size: 8px; text-transform: uppercase; letter-spacing: 1.6px; color: #fff1d0b0; }
#istaka-ust::before { content: "Taşlarınız"; }
#istaka-alt::before { content: "Per alanı"; }
.yuva { position: relative; display: flex; min-width: 0; min-height: 76px; border-radius: 4px; }
.yuva:empty { border: 1px solid #fff0cf0b; }
.yuva--per::after { content: ""; position: absolute; bottom: -7px; left: -3px; right: -3px; height: 3px; background: #c5d5b0; pointer-events: none; }
.yuva--per-1::after { background: #ecd39c; }
.yuva--per-ilk::after { left: 3px; border-radius: 3px 0 0 3px; }
.yuva--per-son::after { right: 3px; border-radius: 0 3px 3px 0; }
.yuva--per-preview { outline: 2px dashed rgba(100,255,150,0.9); box-shadow: 0 4px 14px rgba(50,200,100,0.08); }
.istaka-eylemler { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.per-bilgi { flex: 1; margin: 0; color: #fff0d4; font-size: 11px; }
.istaka-eylemler button { min-height: 32px; padding: 5px 18px; font-size: 11px; }
.oyun-ipucu { margin: 15px 20px; text-align: center; font-size: 11px; color: #787c70; }
.oyun-ipucu span { margin-left: 5px; color: #999c90; }

/* Ivory tiles: restrained bevels, inset pigment, and a visible bottom edge. */
.tas {
  position: relative; width: 100%; min-height: 76px; padding: 9px 3px 8px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  color: var(--okey-siyah);
  background: linear-gradient(115deg, #ffffffb3, transparent 40%), linear-gradient(#fffdf4 65%, #efe7d2);
  border: 1px solid #d7cdb4; border-bottom: 4px solid #c5b798; border-radius: 6px;
  box-shadow: inset 1px 1px 0 #fff, inset -1px 0 1px #c6b9975c, 2px 3px 3px #35271860, 0 7px 8px #32231925;
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tas-sayi { font: 700 clamp(22px, 2.3vw, 32px)/1 Arial, sans-serif; letter-spacing: -1px; text-shadow: 0 1px 0 #fff, 0 -1px 1px #00000028; }
.tas-nokta { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .85; box-shadow: inset 0 1px 2px #00000055, 0 1px 0 white; }
.tas--sari { color: var(--okey-sari); }
.tas--mavi { color: var(--okey-mavi); }
.tas--siyah { color: var(--okey-siyah); }
.tas--kirmizi { color: var(--okey-kirmizi); }
.tas--sahte { color: #654b78; }
.tas--secili { transform: translateY(-7px); outline: 2px solid #e8c577; outline-offset: 1px; }
.tas--okey::before { content: "★"; position: absolute; top: 3px; left: 4px; font-size: 8px; color: #a17b33; }
.tas--kilitli::after { content: "▪"; position: absolute; right: 4px; top: 0; color: #816c4a; font-size: 13px; }
.tas--bitirir { outline: 2px solid #99b594; outline-offset: 1px; }
.tas--bitirir.tas--secili { outline-color: #e8c577; }
.tas--surukleniyor { opacity: .2; }
.tas-hayalet { position: fixed; z-index: 1000; margin: 0; pointer-events: none; cursor: grabbing; box-shadow: 6px 18px 19px #1c211a55; }
.tas-surukleniyor, .tas-surukleniyor * { cursor: grabbing !important; }
.birakma--uygun { border-color: #f1d49a !important; opacity: 1 !important; }
.birakma--uzerinde { background: #dcc58c40 !important; outline: 2px solid #ecd4a1; outline-offset: 2px; }

dialog { width: min(92vw, 480px); max-height: 85dvh; padding: 24px; border: 1px solid #d1c7b3; border-radius: 14px; background: #f7f3e9; color: var(--yazi); box-shadow: 0 20px 70px #152b2450; }
dialog::backdrop { background: #17282088; backdrop-filter: blur(3px); }
dialog h2 { margin: 0; font: 600 24px Georgia, serif; }
dialog p { color: #70766b; line-height: 1.65; }
.modal-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-x { width: 32px; min-height: 32px; padding: 0; }
.modal-govde { max-height: 56vh; overflow-y: auto; }
.modal-alt { display: flex; justify-content: flex-end; margin-top: 20px; gap: 8px; }
.ayar-satiri, .skor-satir { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid #dfd8cb; }
.ayar-satiri input[type="number"] { width: 68px; }
.ayar-satiri input, .ayar-satiri select { accent-color: #426b53; padding: 7px; font: inherit; }
#ayarlar-form > button { margin-top: 16px; }
#kurallar-icerik ul { padding-left: 19px; margin: 0; }
#kurallar-icerik li { margin: 0 0 13px; line-height: 1.6; }
.modal--el-sonu { text-align: center; }
.modal--el-sonu .modal-alt { justify-content: center; }

@media (min-width: 1500px) {
  .masa { grid-template-rows: 64px 244px auto; padding-top: 18px; padding-bottom: 22px; }
  .orta { gap: 26px; }
  .birakma-alani { min-height: 112px; width: 164px; }
  .istaka { margin-top: 26px; }
  .yuva, .tas { min-height: 88px; }
}
@media (max-width: 960px) {
  .ust-bar { padding: 12px 22px; }
  .marka small { display: none; }
  .masa { grid-template-columns: 1fr minmax(250px, 1.4fr) 1fr; padding-inline: 22px; gap: 6px 12px; }
  .rakip-eldeki { gap: 1px; padding-inline: 4px; }
  .tas-arka { width: 8px; }
  .istaka { width: calc(100% - 48px); padding-inline: 12px; }
  .istaka-sira { gap: 4px; padding-inline: 5px; }
  .yuva, .tas { min-height: 68px; }
  .tas-sayi { font-size: 23px; }
}
@media (min-width: 721px) and (max-height: 800px) {
  .ust-bar { min-height: 66px; padding-block: 10px; }
  .masa { grid-template-rows: 40px 156px auto; padding-top: 8px; padding-bottom: 12px; }
  .orta { gap: 9px; }
  .istaka { margin-top: 16px; padding-top: 9px; padding-bottom: 10px; }
  .istaka-sira { min-height: 86px; padding-block: 7px; }
  .istaka-sira .tas, .yuva { min-height: 68px; }
  .oyun-ipucu { margin-block: 10px; }
}
@media (max-width: 720px) {
  .ust-bar { gap: 10px; flex-wrap: wrap; padding: 10px 16px 12px; }
  .marka strong { font-size: 22px; }
  .marka-ikon { width: 28px; height: 34px; font-size: 25px; }
  .ust-bilgi { margin-left: auto; font-size: 12px; }
  .ust-eylemler { width: 100%; justify-content: space-between; gap: 4px; }
  .ust-eylemler button { min-height: 34px; padding: 6px 14px; }
  .masa { width: calc(100% - 20px); padding: 10px 12px 13px; grid-template-columns: 1fr 1fr; grid-template-rows: 40px 84px 164px auto; gap: 6px 12px; border-width: 7px; border-radius: 45px; }
  .masa::before { inset: 7px; border-radius: 33px; }
  .rakip-kuzey { grid-column: 1 / -1; }
  .rakip-bati { grid-column: 1; }
  .rakip-dogu { grid-column: 2; }
  .rakip { gap: 5px; }
  .rakip-bilgi { font-size: 10px; }
  .rakip-eldeki { gap: 1px; padding-top: 3px; border-bottom-width: 4px; }
  .tas-arka, .rakip-kuzey .tas-arka { height: 13px; width: 7px; }
  .rakip-bati .atik-yuva, .rakip-dogu .atik-yuva { flex-direction: row; gap: 5px; }
  .rakip-bati .atik-etiket, .rakip-dogu .atik-etiket { max-width: 64px; font-size: 8px; letter-spacing: .3px; }
  .rakip .atik { min-height: 42px; width: 33px; border: none; padding: 0; }
  .rakip .atik .tas { min-height: 37px; width: 27px; padding: 3px; }
  .rakip .atik .tas-sayi { font-size: 17px; }
  .kuzey-atigi { right: 22px; bottom: 0; }
  .orta { grid-column: 1 / -1; grid-row: 3; gap: 9px; }
  .orta-ust { gap: 28px; }
  .birakma-alani { min-height: 92px; width: 131px; padding: 6px; }
  .orta-atiklar { gap: 13px; }
  .sira-bilgi { grid-row: 4; font-size: 10px; margin-top: 2px; }
  .istaka { width: calc(100% - 20px); margin-top: 17px; padding: 10px 8px; border-bottom-width: 5px; }
  .istaka-baslik { flex-wrap: wrap; gap: 8px; margin-bottom: 19px; }
  #istaka-sayi { font-size: 11px; }
  .istaka-araclar { gap: 5px; }
  .istaka-araclar button { min-height: 32px; font-size: 10px; padding: 5px 8px; }
  .istaka-sira { display: flex; overflow-x: auto; min-height: 91px; padding: 7px 5px 8px; gap: 5px; scrollbar-width: thin; scrollbar-color: #d6b681 #67432e; }
  .istaka-sira > .yuva { flex: 0 0 43px; min-height: 65px; }
  .istaka-sira .tas { min-height: 65px; padding: 7px 3px 6px; }
  .istaka-sira::before { display: none; }
  #istaka-alt { margin-top: 14px; }
  .tas-sayi { font-size: 25px; }
  .istaka-eylemler { gap: 7px; margin-top: 10px; }
  .per-bilgi { flex-basis: 100%; font-size: 10px; }
  .istaka-eylemler button { min-height: 36px; }
  .oyun-ipucu { font-size: 10px; margin: 12px 22px; }
  .oyun-ipucu span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}