@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

@font-face {
    font-family: "UltraTileNumbers";
    src: url("fonts/UltraTileNumbers.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: block;
}

:root {
    font-family: "DM Sans", sans-serif;
    color: #f5f0e6;
    background: #071b17;
    /*
     * Telefonu ters yana çevirince çentik payı soldan sağa geçiyor ve oyun
     * ekranı bir tarafa yanaşıyordu. Yan kenarlara bağlı bütün oyun ögeleri
     * iki taraftaki payın büyüğünü kullanır; böylece iki yatay yönde de aynı
     * oran korunur.
     */
    --safe-side: max(env(safe-area-inset-left), env(safe-area-inset-right));
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #071b17; }
html,
body,
#app {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}
button, input, select { font: inherit; }
.lobby-shell {
    min-height: 100vh; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(330px, 480px);
    gap: clamp(2rem, 7vw, 8rem); align-items: center; padding: clamp(2rem, 6vw, 6rem);
    background: radial-gradient(circle at 14% 18%, #2896683d, transparent 31%),
        radial-gradient(circle at 90% 85%, #daa2451f, transparent 30%),
        linear-gradient(135deg, #0b3026 0%, #071b17 55%, #05120f 100%);
}
.brand-panel { max-width: 580px; }
.eyebrow { color: #d5a548; letter-spacing: .2em; font-size: .72rem; font-weight: 700; }
.brand-panel h1 { font: 700 clamp(4.5rem, 12vw, 9rem)/.76 "Playfair Display", serif; letter-spacing: -.07em; margin: .3em 0 .25em; }
.brand-panel h1 em { color: #d5a548; font-weight: 700; }
.brand-panel p { color: #adc1b9; max-width: 430px; font-size: 1.08rem; line-height: 1.7; }
.tile-row { display: flex; gap: .6rem; margin-top: 2.5rem; transform: rotate(-3deg); }
.tile { display: grid; place-items: center; width: 54px; height: 74px; border-radius: 8px; background: #f4edda; box-shadow: 0 8px 20px #0006, inset 0 0 0 3px #d5cbb4; font: 700 1.65rem "Playfair Display", serif; }
.tile.red { color: #c84236; }.tile.blue { color: #2878aa; }.tile.black { color: #202724; }.tile.yellow { color: #d8ad00; text-shadow: 0 1px #6b5200; }
.lobby-card { width: 100%; padding: clamp(1.6rem, 4vw, 2.7rem); border: 1px solid #ffffff19; border-radius: 24px; background: #102d26dd; box-shadow: 0 30px 70px #0007; backdrop-filter: blur(18px); }
.card-heading { display: flex; align-items: center; gap: .65rem; margin-bottom: 2rem; font-weight: 700; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #4bd28a; box-shadow: 0 0 0 5px #4bd28a20; }
label { display: block; margin: 1rem 0 .45rem; color: #b9c9c3; font-size: .82rem; font-weight: 600; }
input, select { width: 100%; color: white; background: #061b16; border: 1px solid #ffffff18; border-radius: 12px; padding: .95rem 1rem; outline: none; }
input:focus, select:focus { border-color: #d5a548; box-shadow: 0 0 0 3px #d5a54818; }
button { border: 0; border-radius: 12px; padding: .95rem 1.2rem; cursor: pointer; font-weight: 700; }
button:disabled { opacity: .55; cursor: progress; }
.primary { width: 100%; margin-top: 1.2rem; color: #142019; background: #d5a548; }
.primary:hover:not(:disabled) { background: #e5b95e; transform: translateY(-1px); }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: .7rem; }
.join-row button { color: #f4edda; background: #235b49; }
.divider { display: flex; align-items: center; gap: .8rem; margin: 1.5rem 0 .5rem; color: #72877f; font-size: .75rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #ffffff12; }
.room-header { display: flex; justify-content: space-between; align-items: center; }
.room-header h2 { margin: .2rem 0 1.5rem; font: 700 2.8rem "Playfair Display", serif; letter-spacing: .15em; }
.player-count { flex: 0 0 58px; display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 1px solid #d8bd5e55; border-radius: 50%; color: #e9f4ef; background: #071b17; box-shadow: inset 0 1px #ffffff16, 0 5px 14px #00150e66; font-size: .9rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.players { display: grid; gap: .65rem; }
.player-slot { min-height: 58px; display: flex; align-items: center; gap: .8rem; padding: .65rem; border-radius: 12px; }
.player-slot.occupied { background: #ffffff0a; }.player-slot.empty { justify-content: center; border: 1px dashed #ffffff1b; color: #6f887e; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #235b49; color: #e9c778; font-weight: 700; }
.player-slot strong { margin-left: auto; font-size: .72rem; }.ready { color: #4bd28a; }.waiting { color: #879b93; }
.player-score { color: #e8c765; font-size: .64rem; white-space: nowrap; }
.hand-result { margin: .7rem 0 0; padding: .7rem .8rem; border: 1px solid #e8c76566; border-radius: 10px; color: #fff0b4; background: #071f35cc; font-size: .72rem; line-height: 1.45; }
.score-board {
    margin: .75rem 0 .35rem;
    padding: .75rem;
    overflow: hidden;
    border: 1px solid #e9c85f99;
    border-radius: 16px;
    color: #ecf8fb;
    background: radial-gradient(circle at 90% 0, #e5bd4930, transparent 34%), linear-gradient(145deg, #0b3a55f2, #061d32f7);
    box-shadow: 0 12px 28px #00131f80, inset 0 1px #ffffff24;
}
.score-board-header { display: flex; align-items: center; justify-content: space-between; }
.score-board-header > div { display: grid; gap: 1px; }
.score-board-header span { color: #e9cb69; font-size: .5rem; font-weight: 900; letter-spacing: .16em; }
.score-board-header strong { color: #fff8d2; font-size: 1rem; }
.score-cup { font-size: 1.55rem !important; filter: drop-shadow(0 3px 5px #0008); }
.score-result-message { margin: .45rem 0 .55rem; color: #bcd8e1; font-size: .62rem; line-height: 1.35; }
.score-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.score-row {
    display: grid;
    grid-template-columns: 23px 31px minmax(0, 1fr) 45px 66px;
    align-items: center;
    min-height: 38px;
    padding: 3px 7px;
    border: 1px solid #79aabd38;
    border-radius: 9px;
    background: #0d405a99;
}
.score-row.self { border-color: #f4d66d; background: linear-gradient(90deg, #725c227d, #12465c99); box-shadow: inset 3px 0 #f2d15c; }
.score-row.leader .score-rank { color: #4e3600; background: linear-gradient(#ffe993, #d6a522); }
.score-rank { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #c9e3ea; background: #17344d; font-size: .58rem; font-weight: 900; }
.score-avatar { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #91cadb; border-radius: 7px; color: #fff3b4; background: linear-gradient(#28799a, #103851); font-size: .68rem; font-weight: 900; }
.score-player-name { overflow: hidden; font-size: .67rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.score-player-name small { padding: 1px 3px; border-radius: 4px; color: #d9f2f7; background: #28637b; font-size: .38rem; }
.score-change { justify-self: end; font-size: .67rem; font-weight: 900; }
.score-change.gain { color: #79ee9e; }
.score-change.penalty { color: #ff8b7d; }
.score-change.neutral { color: #a9c4cd; }
.score-total { justify-self: end; color: #fff2b4; font-size: .76rem; }
.score-total small { color: #9bbac5; font-size: .42rem; font-weight: 700; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.hand-result-modal-backdrop { position: fixed; z-index: 180; inset: 0; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: #00101fc4; backdrop-filter: blur(4px); }
.hand-result-modal-card { width: min(680px, 96vw); max-height: calc(100dvh - 20px); overflow: hidden; padding: 12px; border: 1px solid #efd06ea6; border-radius: 19px; color: #ecf8fb; background: radial-gradient(circle at 90% 0, #e5bd4938, transparent 35%), linear-gradient(145deg, #0b3a55fa, #061d32fc); box-shadow: 0 22px 55px #000c, inset 0 1px #ffffff2b; }
.hand-result-modal-card.winner { animation: victory-card-arrive .62s cubic-bezier(.2,.9,.25,1.2) both; border-color: #ffe175; box-shadow: 0 0 38px #f5c83e69, 0 24px 65px #000d, inset 0 1px #fff7; }
.hand-result-modal-card.winner-800 { background: radial-gradient(circle at 50% -10%, #fff09b55, transparent 43%), radial-gradient(circle at 90% 0, #ff9f2e4f, transparent 38%), linear-gradient(145deg, #55250bfa, #16102dfc); animation: victory-800-card 1s cubic-bezier(.15,.8,.2,1.15) both; border-width: 2px; box-shadow: 0 0 65px #ffca49b0, 0 0 115px #ff6b356b, 0 25px 75px #000e, inset 0 1px #fff9; }
.victory-banner { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; margin: -3px -3px 9px; padding: 8px 12px; overflow: hidden; border: 1px solid #ffe27d9e; border-radius: 14px; text-align: center; background: linear-gradient(120deg, #9d5a18e8, #e4b739e8 48%, #8f4a14e8); box-shadow: inset 0 1px #fff9, 0 8px 24px #0007; }
.victory-banner::after { content:""; position:absolute; inset:-80% -30%; background:linear-gradient(105deg,transparent 42%,#fff9 49%,transparent 56%); animation:victory-shine 2s ease-in-out infinite; pointer-events:none; }
.victory-banner > div { display:grid; gap:1px; z-index:1; }
.victory-banner small { color:#532707; font-size:.53rem; font-weight:1000; letter-spacing:.15em; }
.victory-banner strong { color:#fffbe2; font-size:1.16rem; line-height:1.05; text-shadow:0 2px 3px #6b2700; }
.victory-banner b { color:#3c2208; font-size:.66rem; }
.victory-crown,.victory-cup { z-index:1; font-size:2rem; filter:drop-shadow(0 4px 4px #4b1b00aa); animation:victory-icon-bounce .85s ease-in-out infinite alternate; }
.victory-cup { animation-delay:-.42s; }
.victory-particles { position:fixed; z-index:181; inset:0; overflow:hidden; pointer-events:none; }
.victory-particles i { position:absolute; top:-24px; width:9px; height:15px; border-radius:2px; background:#ffd754; animation:victory-confetti 2.7s linear infinite; animation-delay:calc(var(--particle-index) * -.11s); }
.victory-particles i:nth-child(3n) { background:#59ddf2; animation-duration:2.35s; }
.victory-particles i:nth-child(3n + 1) { background:#ff5e6c; animation-duration:2.95s; }
.victory-particles i:nth-child(even) { animation-name:victory-confetti-left; }
.victory-800 .victory-particles i { width:11px; height:18px; box-shadow:0 0 8px currentColor; }
.score-podium { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 8px; margin: 0; padding: 2px 0 4px; list-style: none; }
.score-podium-player { position: relative; display: grid; justify-items: center; min-width: 0; padding: 4px 3px 6px; border: 1px solid #6d9eb15c; border-radius: 13px; background: linear-gradient(180deg, #164b63c7, #092b40d9); }
.score-podium-player.self { border-color: #f4d66d; background: linear-gradient(180deg, #705c25b8, #12394ed9); box-shadow: inset 0 0 14px #f6d7661f; }
.score-podium-player.leader { border-color: #ffe47e; }
.score-podium-rank { position: absolute; z-index: 2; top: 1px; left: 3px; display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #d5ecf3; border-radius: 50%; color: #fff; background: #17384d; font-size: .62rem; font-weight: 950; }
.score-podium-player.leader .score-podium-rank { border-color: #fff0a1; color: #533600; background: linear-gradient(#ffe985, #d6a41f); }
.score-podium-avatar { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border: 2px solid #8bc7d8; border-radius: 50%; color: #fff2b5; background: linear-gradient(#277b9b, #10384e); box-shadow: 0 4px 10px #0008, inset 0 1px #fff7; font-size: 1rem; font-weight: 950; }
.score-podium-player.leader .score-podium-avatar { border-color: #ffe06b; box-shadow: 0 0 12px #f5d65769, 0 4px 10px #0008; }
.score-podium-avatar img { width: 100%; height: 100%; object-fit: cover; }
.score-podium-name { max-width: 100%; margin-top: 3px; overflow: hidden; color: #edf9fc; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.score-podium-points { color: #ffe9a1; font-size: .58rem; font-weight: 850; white-space: nowrap; }
@keyframes victory-card-arrive { from { opacity:0; transform:translateY(28px) scale(.84) rotate(-1deg); } to { opacity:1; transform:none; } }
@keyframes victory-800-card { 0% { opacity:0; transform:scale(.65) rotate(-3deg); } 55% { opacity:1; transform:scale(1.06) rotate(1deg); } 75% { transform:scale(.98) rotate(-.4deg); } 100% { transform:none; } }
@keyframes victory-shine { 0%,35% { transform:translateX(-65%) rotate(8deg); } 75%,100% { transform:translateX(65%) rotate(8deg); } }
@keyframes victory-icon-bounce { to { transform:translateY(-5px) rotate(5deg) scale(1.08); } }
@keyframes victory-confetti { to { transform:translate3d(70px,110vh,0) rotate(780deg); } }
@keyframes victory-confetti-left { to { transform:translate3d(-70px,110vh,0) rotate(-780deg); } }
@media (prefers-reduced-motion:reduce) { .hand-result-modal-card.winner,.hand-result-modal-card.winner-800,.victory-banner::after,.victory-crown,.victory-cup,.victory-particles i { animation-duration:.01ms !important; animation-iteration-count:1 !important; } }
.hand-result-ready-state { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px 10px; margin-top: 10px; padding: 8px 10px; border: 1px solid #efcb6470; border-radius: 12px; background: #061a2bc7; }
.hand-result-ready-state span { color: #fff2b5; font-size: .72rem; font-weight: 900; }
.hand-result-ready-state strong { grid-row: 1 / 3; grid-column: 2; display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid #f0cb61; border-radius: 50%; color: #fff7cc; background: #17364a; }
.hand-result-ready-state small { color: #a9c5cf; font-size: .55rem; }
.hand-result-ready-state.confirmed { border-color: #58d79688; background: #0b3b35c7; }
.hand-result-ready-state.confirmed strong { border-color: #62e09e; color: #a8f8c8; }
.hand-result-ready-state.rematch { margin-top: 12px; }
.rematch-voters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.rematch-voter { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; padding: 7px 9px; border: 1px solid #7a94a65c; border-radius: 10px; color: #b8cad2; background: #071a2ab8; }
.rematch-voter b { min-width: 0; overflow: hidden; color: #e4eef2; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.rematch-voter small { flex: 0 0 auto; color: #91a7b2; font-size: .5rem; font-weight: 800; }
.rematch-voter.ready { border-color: #57d8938f; background: #0b3a31d9; box-shadow: inset 0 0 13px #4be49a19; }
.rematch-voter.ready small { color: #8df1b9; }
.hand-result-modal-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.hand-result-modal-actions button { min-width: 0; min-height: 42px; padding: 5px 7px; border-radius: 11px; font-size: .72rem; font-weight: 900; }
.hand-result-modal-actions .ready-next-hand { color: #17300f; background: linear-gradient(#f9df72, #dca91c); }
.hand-result-modal-actions .ready-next-hand:disabled { color: #c8ffe0; background: linear-gradient(#2d8b61, #196044); opacity: 1; }
.hand-result-modal-actions .leave-after-hand { border: 1px solid #ff9d9190; color: #ffeae7; background: linear-gradient(#b84d45, #782825); }
.hand-result-modal-actions .hand-action-log-open { grid-column: auto; border: 1px solid #73c7df91; color: #eafaff; background: linear-gradient(#216681, #123e59); }
.hand-result-modal-card .hand-result-ready-state { margin-top: 7px; padding: 5px 8px; }
.hand-result-modal-card .hand-result-ready-state strong { width: 34px; height: 34px; font-size: .76rem; }
.hand-result-modal-card .rematch-voters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 5px; }
.hand-result-modal-card .rematch-voter { display: grid; justify-items: center; gap: 0; padding: 4px 5px; }
@media (orientation: landscape) and (max-height: 420px) {
    .hand-result-modal-card { padding: 8px 10px; }
    .victory-banner { margin-bottom: 6px; padding-block: 5px; }
    .victory-banner strong { font-size: .92rem; }
    .victory-crown, .victory-cup { font-size: 1.45rem; }
    .score-podium { gap: 5px; }
    .score-podium-avatar { width: 42px; height: 42px; }
    .score-podium-player { padding-block: 3px 4px; }
    .hand-result-modal-actions { margin-top: 5px; }
    .hand-result-modal-actions button { min-height: 35px; font-size: .62rem; }
}
.hand-action-log-backdrop { position: fixed; z-index: 205; inset: 0; display: grid; place-items: center; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: #00101fe8; backdrop-filter: blur(6px); }
.hand-action-log-card { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); width: min(720px, 96vw); max-height: 94dvh; padding: 14px; overflow: hidden; border: 1px solid #e9ce6c99; border-radius: 18px; color: #edf9fc; background: radial-gradient(circle at 90% 0, #e4bc4130, transparent 36%), linear-gradient(145deg, #0c3e55fc, #061b2cfc); box-shadow: 0 24px 65px #000d, inset 0 1px #ffffff29; }
.hand-action-log-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hand-action-log-card > header div { display: grid; }
.hand-action-log-card h2 { margin: 1px 0 0; color: #fff3af; font-size: 1.08rem; }
.hand-action-log-card > header small { color: #7fc4d4; font-size: .48rem; font-weight: 900; letter-spacing: .13em; }
.hand-action-log-card > header button { width: 34px; height: 34px; padding: 0; border: 1px solid #ffada183; border-radius: 50%; color: #fff; background: #8f332f; font-size: 1.2rem; }
.hand-action-log-card > p { margin: 5px 0 9px; color: #a8cbd4; font-size: .58rem; }
.hand-action-log-tabs { display: flex; gap: 5px; margin-bottom: 8px; overflow-x: auto; }
.hand-action-log-tabs button { flex: 0 0 auto; padding: 5px 9px; border: 1px solid #77b9cb66; border-radius: 8px; color: #cbe6ec; background: #123a50; font-size: .55rem; font-weight: 850; }
.hand-action-log-tabs button.active { border-color: #f0d46d; color: #342a08; background: #f0d46d; }
.hand-action-log-list { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 6px; padding-right: 3px; }
.hand-action-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 7px 8px; border: 1px solid #79aabd34; border-radius: 10px; background: #0a2e43b8; }
.hand-action-row.action-discarded { border-left: 3px solid #ee786e; }
.hand-action-row.action-drewfromstock, .hand-action-row.action-tookdiscard { border-left: 3px solid #58bddd; }
.hand-action-row.action-openedseries, .hand-action-row.action-openedpairs, .hand-action-row.action-laidoff { border-left: 3px solid #65d397; }
.hand-action-row.action-penalty { border-left: 3px solid #ff695e; background: #56242499; }
/* Okeyi geri alma hamleleri kayitta one ciksin. */
.hand-action-row.action-recoveredokey { border-left: 3px solid #ffd86e; background: #4a3a1099; }
.hand-action-sequence { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #ffe995; background: #173d54; font-size: .55rem; font-weight: 900; }
.hand-action-row > div { min-width: 0; }
.hand-action-row > div > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hand-action-row strong { overflow: hidden; color: #f2fbfd; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.hand-action-row time { color: #7faab6; font-size: .48rem; font-variant-numeric: tabular-nums; }
.hand-action-row p { margin: 2px 0 0; color: #bdd5dc; font-size: .58rem; line-height: 1.3; }
.hand-action-tiles { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.hand-action-tile { display: grid; place-items: center; width: 24px; height: 31px; border: 1px solid #d7d5ca; border-radius: 3px; background: linear-gradient(110deg, #fff, #deddd5); box-shadow: inset 1px 1px #fff, 0 2px 2px #0007; font: 900 .72rem/1 Arial; font-style: normal; }
.hand-action-tile.red { color: #ce2e2e; }.hand-action-tile.blue { color: #2070ba; }.hand-action-tile.black { color: #161616; }.hand-action-tile.yellow { color: #bd8b08; }.hand-action-tile.fake { color: #b49112; }
.hand-result-history { margin-top: 10px; padding-top: 9px; border-top: 1px solid #e8c7654d; }
.hand-result-history > strong { display: block; margin-bottom: 6px; color: #ffe892; font-size: .72rem; letter-spacing: .04em; }
.score-history-backdrop { position: fixed; z-index: 184; inset: 0; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: #00101fd4; backdrop-filter: blur(5px); }
.score-history-card { width: min(720px, 94vw); max-height: 90vh; overflow: hidden; padding: 15px; border: 1px solid #efd06e9c; border-radius: 18px; color: #edf9fc; background: radial-gradient(circle at 88% 0, #dbb84435, transparent 35%), linear-gradient(145deg, #0b3a55fc, #061c30fc); box-shadow: 0 22px 58px #000c, inset 0 1px #ffffff29; }
.score-history-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.score-history-card h2 { margin: 1px 0 0; color: #fff4bd; font-size: 1.12rem; }
.score-history-card header small { color: #8fc8d5; font-size: .57rem; font-weight: 900; letter-spacing: .16em; }
.score-history-card header button { width: 34px; height: 34px; border: 1px solid #ffb2a58a; border-radius: 50%; color: #fff; background: #8e332e; font-size: 1.25rem; line-height: 1; }
.score-history-card > p { margin: 5px 0 11px; color: #a9cbd4; font-size: .65rem; }
.score-history-card > p.score-history-empty { margin: 13px 0 3px; padding: 16px; border: 1px dashed #8cb9c855; border-radius: 11px; color: #c2d8de; text-align: center; background: #0419279c; }
.series-score-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid #8cb9c83d; border-radius: 11px; background: #031725ad; }
.series-score-table { width: 100%; min-width: 390px; border-collapse: collapse; font-size: .66rem; font-variant-numeric: tabular-nums; }
.series-score-table th, .series-score-table td { padding: 8px 9px; border-bottom: 1px solid #8cb9c829; text-align: center; white-space: nowrap; }
.series-score-table thead th { color: #ffe68f; background: #12384ba8; font-size: .59rem; letter-spacing: .03em; }
.series-score-table tbody th { max-width: 180px; overflow: hidden; color: #eef9fb; text-align: left; text-overflow: ellipsis; }
.series-score-table tbody th small { margin-left: 3px; color: #7eb8c7; font-size: .48rem; }
.series-score-table tbody tr.self { background: #e5bc3120; }
.series-score-table tbody tr:last-child th, .series-score-table tbody tr:last-child td { border-bottom: 0; }
.series-score-table td.gain { color: #76e9a9; }
.series-score-table td.penalty { color: #ff9c91; }
.series-score-table td.neutral { color: #a9c3cb; }
.series-score-table td:last-child { color: #fff2ad; }
.meld-area.new-series-drop-target.drag-over {
    outline: 2px solid #61e58a;
    outline-offset: -4px;
    background: linear-gradient(#35c87516, #35c8750b), var(--meld-area-background, transparent);
    box-shadow: inset 0 0 20px #35df7950;
}
.next-hand-ready-countdown { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px .6rem; margin-top: .65rem; padding: .55rem .7rem; border: 1px solid #f1cc6480; border-radius: 11px; background: #061a2bc7; }
.next-hand-ready-countdown span { color: #fff2b5; font-size: .7rem; font-weight: 900; }
.next-hand-ready-countdown strong { grid-row: 1 / 3; grid-column: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid #f0cb61; border-radius: 50%; color: #fff7cc; background: #17364a; font-size: 1rem; box-shadow: 0 0 14px #e9c44a3d; }
.next-hand-ready-countdown small { color: #a9c5cf; font-size: .55rem; }
.next-hand-ready-countdown.confirmed { border-color: #58d79688; background: #0b3b35b8; }
.next-hand-ready-countdown.confirmed strong { border-color: #62e09e; color: #a8f8c8; }
.text-button { width: 100%; color: #9bb0a8; background: transparent; font-weight: 600; }
.leave-room-button { width: 100%; min-height: 46px; margin-top: .65rem; border: 1px solid #ff9a8d88; border-radius: 13px; color: #ffe8e4; background: linear-gradient(180deg, #bd5147, #7e2826); box-shadow: inset 0 1px #ffc1b777, 0 6px 15px #3d090966; font-weight: 900; }
.leave-room-button:hover:not(:disabled), .leave-room-button:active:not(:disabled) { background: linear-gradient(180deg, #d45b4f, #932e29); transform: translateY(-1px); }
.test-bots { width: 100%; margin-top: 1rem; color: #bfe8d7; border: 1px solid #4bd28a55; background: #163f33; }
.bot-badge { margin-left: .35rem; padding: .12rem .3rem; border-radius: 4px; color: #102d26; background: #7ad9aa; font-size: .52rem; font-weight: 700; }
/* Bekleme ekranindaki AI etiketi. Masadaki .ai-player-badge ile ayni mavi;
   oyuncu ayni seyi iki ekranda ayni renkte gorsun. */
.ai-badge { margin-left: .35rem; padding: .12rem .3rem; border-radius: 4px; color: #03202e; background: #63c8f5; font-size: .52rem; font-weight: 800; letter-spacing: .04em; }
.robot-player-badge { display:inline-block; margin-left:.28rem; padding:.1rem .28rem; border:1px solid #ffcf57; border-radius:4px; color:#211600; background:#ffb52e; box-shadow:0 0 8px #ff9c3066; font-size:.43rem; font-weight:950; letter-spacing:.06em; vertical-align:middle; }
/* Yapay zeka oyuncu rozeti. "BILGISAYAR"dan ayri bir renk: o masayi dolduran
   sade robot, bu ise adi ve profili olan, gercek oyuncu gibi gorunen AI. */
.ai-player-badge { display:inline-block; margin-left:.28rem; padding:.1rem .28rem; border:1px solid #8fd7ff; border-radius:4px; color:#03202e; background:#63c8f5; box-shadow:0 0 8px #49b6e866; font-size:.43rem; font-weight:950; letter-spacing:.08em; vertical-align:middle; }
.error-message, .success-message { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 10px; font-size: .84rem; }
.error-message { color: #ffc4bc; background: #9d332633; animation: toast-in .16s ease-out; }.success-message { color: #8aefb8; background: #2e8b5733; }
#blazor-error-ui { display: none; }
@media (max-width: 780px) {
    .lobby-shell { grid-template-columns: 1fr; padding: 1.2rem; gap: 1.5rem; align-content: center; }
    .brand-panel h1 { font-size: 4.6rem; }.brand-panel p, .tile-row { display: none; }.lobby-card { padding: 1.4rem; }
}

.game-shell { min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1rem; padding: 1.2rem clamp(1rem, 3vw, 3rem); background: radial-gradient(circle at center, #176448 0%, #0b3d2d 42%, #061d17 100%); }
.game-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.game-header > div:first-child { display: flex; gap: .7rem; align-items: baseline; }.game-header strong { letter-spacing: .14em; }
.turn-label { padding: .65rem 1.2rem; border-radius: 99px; color: #f3d58e; background: #061c16aa; text-align: center; font-weight: 700; }
.leave-game { justify-self: end; padding: .6rem .8rem; color: #a9beb5; background: transparent; font-size: .78rem; }
.opponents { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: .7rem; max-width: 860px; width: 100%; margin: auto; }
.opponent { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .55rem .7rem; border: 1px solid #ffffff12; border-radius: 14px; background: #061d1788; }
.opponent .avatar { width: 32px; height: 32px; flex: 0 0 auto; }.opponent div { display: grid; min-width: 0; }.opponent strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }.opponent small { color: #829d92; font-size: .7rem; }
.opponent i { margin-left: auto; color: #4bd28a; font-size: .66rem; font-style: normal; }.opponent.active-player { border-color: #4bd28a66; box-shadow: 0 0 0 2px #4bd28a12; }
.opponent { position: relative; }
.opponent-opening {
    flex: 0 0 auto;
    display: grid;
    justify-items: center;
    padding: 2px 5px;
    border: 1px solid #ffd96d;
    border-radius: 7px;
    color: #fff4bb;
    background: linear-gradient(180deg, #8d1b2f, #4d0716);
    font-size: .52rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 2px 5px #00182799;
}
.opponent-opening small { color: #ffcf8a; font-size: .34rem; letter-spacing: .06em; line-height: 1; }
.opponent-opening b { line-height: 1; }
.table-center { align-self: center; display: flex; justify-content: center; align-items: end; gap: clamp(.8rem, 4vw, 3rem); }
.meld-area { width: min(1100px, 100%); margin: auto; padding: .5rem .7rem; border: 1px solid #ffffff14; border-radius: 13px; background: #06271e99; }
.meld-heading { display: flex; justify-content: space-between; margin-bottom: .35rem; color: #b9d1c6; font-size: .68rem; }.meld-heading span { color: #e1bd68; }
.table-melds { display: flex; gap: .45rem; overflow-x: auto; min-height: 54px; align-items: center; }
.meld { flex: 0 0 auto; display: flex; gap: 2px; align-items: center; padding: .25rem; color: #b8cec5; background: #ffffff08; border: 1px solid transparent; }
.meld .table-tile { width: 31px; height: 43px; font-size: 1rem; box-shadow: inset 0 0 0 2px #d6cdb9; }.meld small { margin-left: .25rem; font-size: .55rem; }
.meld.selected-meld { border-color: #e0b455; background: #e0b4551c; }
.indicator-block { display: grid; justify-items: center; gap: .45rem; color: #8eaa9e; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.show-indicator-button { min-width: 48px; padding: 3px 7px; border: 1px solid #ffe273; border-radius: 999px; color: #fff6bf; background: linear-gradient(#537f38, #244d2d); font-size: .5rem; font-weight: 900; }
.indicator-shown-label { max-width: 72px; color: #ffe88b; font-size: .42rem; line-height: 1.15; text-align: center; text-transform: none; letter-spacing: 0; }
.table-tile { display: grid; place-items: center; width: 52px; height: 70px; border: 1px solid #b9aa8c; border-radius: 8px; color: #151918; background: linear-gradient(145deg, #fffdf4 0%, #f4ead3 72%, #dfd1b5 100%); box-shadow: 0 7px 16px #0007, inset 0 0 0 3px #eee4ce, inset 0 -3px 5px #9d8b682e; font: 900 1.65rem "Arial Black", Arial, sans-serif; letter-spacing: -.06em; text-shadow: 0 1px #fff, 0 0 1px currentColor; }
/* Masaya sonradan islenen tas sari cerceveyle isaretlenir; acilista konan
   taslar isaretsiz kalir. */
.meld .table-tile.laid-off-tile { box-shadow: inset 0 0 0 1px #ffc93c, 0 0 0 1px #8a651299; }
.meld .table-tile { position: relative; }
.table-tile.red, .rack-tile.red { color: #d51f18; }.table-tile.blue, .rack-tile.blue { color: #0068cf; }.table-tile.black, .rack-tile.black { color: #111615; }.table-tile.yellow, .rack-tile.yellow { color: #d4aa00; text-shadow: 0 1px 0 #6f5700; }
.stock-pile, .discard-pile { display: grid; justify-items: center; align-content: center; min-width: 82px; min-height: 98px; color: #e6c87f; background: #09251d; border: 1px solid #ffffff18; box-shadow: 0 8px 20px #0005; }
.stock-pile span { font: 700 1.8rem Georgia, serif; }.stock-pile small, .discard-pile small { margin-top: .35rem; color: #8ca59a; font-size: .62rem; }.discard-pile { padding: .4rem; background: #ffffff08; }.discard-pile .table-tile { width: 45px; height: 60px; font-size: 1.35rem; }.empty-discard { font-size: 2rem; color: #547066; }
.rack-area { align-self: end; width: min(1100px, 100%); margin: auto; padding: .7rem .8rem 1rem; border-radius: 17px 17px 5px 5px; background: linear-gradient(#5c311e, #351b11); box-shadow: 0 14px 30px #0008, inset 0 2px #9b5f3a; }
.rack-heading { display: flex; justify-content: space-between; padding: 0 .2rem .55rem; color: #d6af91; font-size: .68rem; }
.rack-sort-actions { display: flex; gap: .35rem; margin: -.25rem auto; }
.rack-sort-actions button { padding: .35rem .8rem; border: 1px solid #c9905770; color: #f2d3a8; background: #442417; font-size: .65rem; font-weight: 800; }
.rack-sort-actions button:active { background: #704027; }
.rack-sort-actions .auto-sort { border-color: #72d5a077; color: #bdf2d1; background: #174a35; }
.rack-board { display: grid; gap: 4px; overflow-x: auto; min-height: 154px; padding: .2rem .15rem .35rem; scrollbar-color: #9b5f3a transparent; touch-action: pan-x; }
.rack-row { display: grid; grid-template-columns: repeat(18, 49px); gap: 3px; width: max-content; min-height: 72px; padding: 0 .2rem; border-bottom: 2px solid #8a4e2e; }
.rack-slot { width: 49px; height: 72px; border-radius: 5px; background: #25130d24; }
.rack-tile { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 0; border: 1px solid #b9aa8c; border-radius: 7px; background: linear-gradient(145deg, #fffdf4 0%, #f4ead3 72%, #dfd1b5 100%); box-shadow: inset 0 0 0 3px #eee4ce, inset 0 -3px 5px #9d8b6838, 0 3px 5px #0006; font: 900 1.58rem "Arial Black", Arial, sans-serif; letter-spacing: -.06em; text-shadow: 0 1px #fff, 0 0 1px currentColor; transition: transform .12s ease; }
.rack-tile > span { font-weight: 900; -webkit-text-stroke: .25px currentColor; }
.rack-tile small { position: absolute; bottom: 5px; font: 700 .42rem "DM Sans", sans-serif; letter-spacing: .07em; }.rack-tile.selected { transform: translateY(-11px); box-shadow: inset 0 0 0 3px #d5cbb5, 0 0 0 3px #e7c163, 0 8px 12px #0007; }.rack-tile.okey-tile::after { display: none; }
.rack-tile { touch-action: none; user-select: none; -webkit-user-select: none; }.rack-tile.dragging { z-index: 20; transform: translate3d(var(--drag-x, 0), var(--drag-y, -8px), 0) scale(1.08); opacity: .88; box-shadow: 0 12px 20px #0009, 0 0 0 3px #e7c163; }.rack-tile.discarding { opacity: 0; }
.discard-undo-action {
    position:absolute; right:8px; top:-30px; z-index:115; display:flex; align-items:center; justify-content:center;
    gap:5px; min-width:94px; height:27px; padding:3px 11px; overflow:hidden;
    border:1px solid #ffe68b; border-radius:11px; color:#fff8cf;
    background:linear-gradient(#81552c,#482914); box-shadow:0 4px 10px #0009, inset 0 1px #fff4a866;
    font-size:.56rem; font-weight:950;
}
.discard-undo-action::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background:#ffe35d; animation:discardUndoWindow 2s linear forwards; }
.discard-undo-action span { font-size:.9rem; line-height:1; }
.discard-undo-action small { padding-left:5px; border-left:1px solid #ffe68b66; color:#ffe36b; font-size:.48rem; font-weight:900; }
@keyframes discardUndoWindow { to { width:0; } }
.rack-tile.dragging.discard-ready { opacity: 1; box-shadow: 0 14px 24px #0009, 0 0 0 4px #ffe36b, 0 0 18px #ffe36b; }
.rack-tile.group-dragging { box-shadow: 0 10px 18px #0009, 0 0 0 3px #62dfa0; }
.rack-tile.editing-group-tile { transform: translateY(-8px) scale(1.04); box-shadow: inset 0 0 0 3px #d5cbb5, 0 0 0 3px #62dfa0, 0 0 18px #43d58b; }
.flying-tile { position: fixed !important; z-index: 100; margin: 0 !important; pointer-events: none; }
.table-motion-tile {
    z-index: 260 !important;
    transform-origin: center;
    filter: drop-shadow(0 7px 7px #00131bbd);
    will-change: transform, opacity;
}
.table-action-arriving { opacity: 0 !important; }
.discard-pile.incoming-discard { animation: receive-discard .32s cubic-bezier(.2,.8,.2,1); }
@keyframes receive-discard { from { transform: translateY(-16px) rotate(-5deg) scale(.82); opacity: .3; } to { transform: none; opacity: 1; } }
.discard-action { display: block; margin: .4rem auto 0; padding: .65rem 2.2rem; color: #1a261f; background: #e0b455; }.discard-action:disabled { background: #765d36; color: #b6a98c; }
.meld-builder { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.meld-builder button { padding: .48rem .7rem; color: #e4d7bc; background: #44281a; font-size: .67rem; }.meld-builder .open-action { color: #17231d; background: #65c792; }
.meld-builder .open-101-action { position: sticky; right: 0; z-index: 4; flex: 0 0 auto; margin-left: auto; min-width: 128px; padding: .7rem 1.35rem; border: 1px solid #b9f2cf; font-size: .82rem; font-weight: 900; box-shadow: -10px 0 16px #351b11, 0 5px 12px #0005; }
.meld-builder .open-101-action:disabled { border-color: #617769; background: #4a6556; color: #aebdb5; box-shadow: -10px 0 16px #351b11; }
.meld-builder .pending-group { color: #f0cf84; border: 1px solid #d5a54866; }
.meld-builder .pending-group.active-group { color: #10251c; background: #e9c45f; box-shadow: 0 0 0 2px #fff4a955; }
.meld-builder .update-group { color: #10251c; background: #64d59a; }.meld-builder .cancel-group { color: #ffd1c9; background: #7b2f27; }
.game-error { position: fixed; top: 4.5rem; left: 50%; transform: translateX(-50%); z-index: 5; margin: 0; padding: .7rem 1rem; border-radius: 10px; color: #ffc4bc; background: #6e211beF; box-shadow: 0 8px 24px #0006; font-size: .8rem; animation: toast-in .16s ease-out; }
.game-notice { position: fixed; top: 4.5rem; left: 50%; transform: translateX(-50%); z-index: 6; max-width: min(90vw, 42rem); margin: 0; padding: .7rem 1rem; border: 1px solid #f1c84c; border-radius: 10px; color: #fff2ad; background: #31561af2; box-shadow: 0 8px 24px #0006; font-size: .8rem; text-align: center; animation: toast-in .16s ease-out; }
.network-wait-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: #00131f70;
    backdrop-filter: blur(2px);
    animation: toast-in .16s ease-out;
}
.network-wait-modal {
    display: grid;
    align-items: center;
    gap: .8rem;
    min-width: min(88vw, 290px);
    padding: .9rem 1rem;
    border: 1px solid #eccf6f;
    border-radius: 14px;
    color: #fff8d7;
    background: linear-gradient(145deg, #124b66f7, #061f35fa);
    box-shadow: 0 18px 45px #000a, inset 0 1px #ffffff2e;
}
.network-wait-modal > div { display: grid; gap: 3px; }
.network-wait-modal strong { font-size: .84rem; }
.network-wait-modal small { color: #bcd6df; font-size: .58rem; }
.network-spinner {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 3px solid #ffffff38;
    border-top-color: #f5d45f;
    border-radius: 50%;
    animation: network-spin .72s linear infinite;
}
@keyframes network-spin { to { transform: rotate(360deg); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; } }
.error-message { position: relative; left: 50%; transform: translateX(-50%); }

@media (max-width: 780px) {
    .game-shell { padding: .65rem; gap: .6rem; min-height: 100svh; }
    .game-header { grid-template-columns: 1fr auto; }.turn-label { grid-column: 1 / -1; grid-row: 2; padding: .45rem; font-size: .78rem; }.leave-game { grid-column: 2; grid-row: 1; }
    .opponents { gap: .3rem; }.opponent { padding: .4rem; justify-content: center; }.opponent .avatar { width: 28px; height: 28px; }.opponent div, .opponent i { display: none; }
    .table-center { gap: .55rem; }.table-tile { width: 43px; height: 58px; font-size: 1.3rem; }.stock-pile, .discard-pile { min-width: 66px; min-height: 82px; padding: .3rem; }.indicator-block { font-size: .58rem; }
    .meld-area { padding: .35rem; }.table-melds { min-height: 45px; }.meld .table-tile { width: 27px; height: 37px; font-size: .9rem; }
    .rack-area { padding: .55rem .4rem .7rem; }.rack-row { grid-template-columns: repeat(18, 43px); }.rack-slot { width: 43px; height: 64px; }.rack-tile { font-size: 1.3rem; }.discard-action { width: 100%; }
}

/* Fiziksel telefonların yatay ve kısa ekranları (örn. 800×360 / 915×412). */
@media (orientation: landscape) and (max-height: 500px) {
    .lobby-shell { min-height: 100dvh; grid-template-columns: minmax(0, 540px); justify-content: center; padding: .35rem; }
    .brand-panel { display: none; }
    .lobby-card { max-height: calc(100dvh - .7rem); overflow-y: auto; padding: .7rem 1rem; border-radius: 16px; }
    .card-heading { margin-bottom: .35rem; }
    label { margin: .35rem 0 .2rem; }
    input, select { padding: .55rem .7rem; border-radius: 9px; }
    button { padding: .58rem .8rem; border-radius: 9px; }
    .primary { margin-top: .55rem; }
    .divider { margin: .45rem 0 .15rem; }
    .room-header h2 { margin: .1rem 0 .35rem; font-size: 2rem; }
    .players { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
    .player-slot { min-height: 42px; padding: .3rem .45rem; }
    .player-slot .avatar { width: 30px; height: 30px; }
    .test-bots { margin-top: .4rem; }

    .game-shell { height: 100dvh; min-height: 0; overflow: hidden; grid-template-rows: auto auto minmax(54px, 1fr) auto auto; gap: .25rem; padding: .3rem .5rem; }
    .game-header { display: grid; grid-template-columns: 1fr auto 1fr; gap: .35rem; min-height: 25px; }
    .game-header > div:first-child { gap: .4rem; }.game-header .eyebrow { font-size: .58rem; }
    .turn-label { grid-column: 2; grid-row: 1; padding: .25rem .65rem; font-size: .68rem; }
    .leave-game { grid-column: 3; grid-row: 1; padding: .2rem .4rem; font-size: .65rem; }
    .opponents { max-width: 760px; gap: .25rem; }
    .opponent { min-height: 30px; padding: .2rem .4rem; border-radius: 9px; }
    .opponent .avatar { width: 25px; height: 25px; font-size: .7rem; }.opponent small { display: none; }
    .table-center { align-self: center; gap: 1rem; }
    .table-tile { width: 36px; height: 48px; font-size: 1.1rem; border-radius: 6px; }
    .stock-pile, .discard-pile { min-width: 56px; min-height: 60px; padding: .2rem; border-radius: 8px; }
    .stock-pile span { font-size: 1.25rem; }.stock-pile small, .discard-pile small { margin-top: .1rem; font-size: .5rem; }
    .discard-pile .table-tile { width: 32px; height: 42px; font-size: 1rem; }
    .indicator-block { gap: .15rem; font-size: .5rem; }
    .meld-area { padding: .2rem .35rem; border-radius: 8px; }
    .meld-heading { margin-bottom: .15rem; font-size: .55rem; }
    .table-melds { min-height: 35px; }
    .meld { padding: .12rem; }.meld .table-tile { width: 24px; height: 32px; font-size: .78rem; }
    .rack-area { padding: .25rem .35rem .3rem; border-radius: 10px 10px 3px 3px; }
    .rack-heading { min-height: 22px; padding: 0 0 .12rem; }
    .rack-heading > span { display: none; }
    .rack-sort-actions { margin: 0; }
    .rack-sort-actions button { padding: .22rem .6rem; font-size: .55rem; }
    .rack-board { min-height: 84px; padding: .08rem .1rem .12rem; gap: 2px; }
    .rack-row { grid-template-columns: repeat(18, 40px); min-height: 54px; height: 54px; gap: 2px; padding: 0 .1rem; border-bottom-width: 1px; }
    .rack-slot { width: 28px; height: 39px; }.rack-tile { font-size: .9rem; border-radius: 6px; }
    .rack-tile small { bottom: 3px; font-size: .34rem; }.rack-tile.selected { transform: translateY(-5px); }
    .meld-builder { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-top: .1rem; }
    .meld-builder button { flex: 0 0 auto; padding: .3rem .48rem; font-size: .57rem; }
    .meld-builder .open-101-action { min-width: 112px; padding: .48rem .9rem; font-size: .7rem; }
    .discard-action { width: auto; margin: .15rem auto 0; padding: .32rem 1.3rem; font-size: .62rem; }
    .game-error, .game-notice { top: 2.2rem; padding: .4rem .65rem; }
}

/* Mavi salon teması: referanstaki masa, yan oyuncular ve altın renkli ıstaka. */
:root { background: #064661; }
body {
    background-color: #064661;
    background-image:
        radial-gradient(circle at 15% 25%, #38a5c51f 0 2px, transparent 3px),
        radial-gradient(circle at 78% 66%, #02364d66 0 3px, transparent 4px),
        repeating-radial-gradient(circle at 20% 20%, transparent 0 15px, #50bdd70c 16px 18px);
    background-size: 70px 70px, 95px 95px, 130px 130px;
}
.game-shell {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(90px, 145px) minmax(0, 1fr) minmax(90px, 145px);
    grid-template-rows: auto minmax(210px, 1fr) auto;
    gap: .55rem 1rem;
    overflow: hidden;
    padding: .45rem 1rem .25rem;
    background:
        radial-gradient(ellipse at center, #1590b24d 0%, transparent 58%),
        repeating-radial-gradient(circle at 10% 20%, transparent 0 18px, #57c5df0b 19px 21px),
        linear-gradient(135deg, #08789a, #064d70 48%, #043c59);
}
.game-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .35;
    background-image:
        linear-gradient(45deg, transparent 46%, #7cd5e414 48% 52%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, #012f461f 48% 52%, transparent 54%);
    background-size: 36px 36px;
}
.game-header {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 36px;
    padding: .22rem .65rem;
    border: 1px solid #61b8d45c;
    border-radius: 7px;
    background: linear-gradient(#123f60e8, #062d48e8);
    box-shadow: 0 3px 8px #001c2d99, inset 0 1px #8bd7ea42;
}
.game-header .eyebrow { color: #ffe165; }
.turn-label {
    border: 1px solid #67bfe25c;
    border-radius: 6px;
    color: #f6fbff;
    background: linear-gradient(#164c70, #082d48);
    box-shadow: inset 0 1px #8bd7ea33;
}
.leave-game { color: #e7f6fb; }
.opponents { display: contents; }
.opponent {
    z-index: 4;
    border: 1px solid #75bcd56e;
    border-radius: 7px;
    color: white;
    background: linear-gradient(155deg, #163d5a, #061d31);
    box-shadow: 0 5px 12px #001523b8, inset 0 1px #9ad5e733;
}
.opponent .avatar {
    border: 2px solid #d8b64c;
    border-radius: 5px;
    color: #ffe36b;
    background: linear-gradient(#376b80, #12384f);
}
.opponent small { color: #b8d5df; }
.opponent.active-player { border-color: #f2cf55; box-shadow: 0 0 0 2px #f2cf553d, 0 5px 12px #001523b8; }
.opponent.active-player i { color: #ffe25f; }
/* Balon kartin KENDI katmaninda kaliyordu. Kart "z-index: 4 + position:
   relative" ile bir yigin baglami aciyor; balonun z-index 70'i o baglamin
   ICINDE gecerli, disaridaki masa taslarinin/perlerinin altina dusuyordu.
   Bu yuzden mesaj bazen gorunuyor (altinda tas yoksa), cogu zaman
   gorunmuyordu. Balonu tasiyan kart, balon varken yukari alinir. */
.opponent:has(> .player-chat-bubble) { z-index: 71; }

.player-chat-bubble {
    position: absolute;
    z-index: 70;
    display: -webkit-box;
    width: max-content;
    max-width: 145px;
    overflow: hidden;
    padding: 4px 7px;
    border: 1px solid #bceef5;
    border-radius: 9px;
    color: #092d3a;
    background: #eefeff;
    box-shadow: 0 4px 10px #00182499;
    font-size: .54rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    pointer-events: none;
    animation: chat-bubble-in .18s ease-out;
}
.opponent:nth-child(1) > .player-chat-bubble {
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
}
.opponent:nth-child(2) > .player-chat-bubble {
    top: 50%;
    left: calc(100% + 6px);
    transform: translateY(-50%);
}
.opponent:nth-child(3) > .player-chat-bubble {
    top: 50%;
    right: calc(100% + 6px);
    transform: translateY(-50%);
}
.self-chat-bubble {
    position: fixed;
    right: max(49px, calc(var(--safe-side) + 49px));
    bottom: max(9px, env(safe-area-inset-bottom));
    z-index: 76;
}
.self-chat-bubble::after {
    position: absolute;
    right: -5px;
    bottom: 7px;
    width: 9px;
    height: 9px;
    border-top: 1px solid #bceef5;
    border-right: 1px solid #bceef5;
    background: #eefeff;
    content: "";
    transform: rotate(45deg);
}
@keyframes chat-bubble-in {
    from { opacity: 0; scale: .88; }
    to { opacity: 1; scale: 1; }
}
.opponent:nth-child(1) { grid-column: 2; grid-row: 2; align-self: start; justify-self: center; min-width: 190px; }
.opponent:nth-child(2) { grid-column: 1; grid-row: 2; align-self: center; justify-self: stretch; flex-direction: column; text-align: center; }
.opponent:nth-child(3) { grid-column: 3; grid-row: 2; align-self: center; justify-self: stretch; flex-direction: column; text-align: center; }
/* İzleyicide dördüncü oyuncu: alt ortada, üstteki kart gibi yatay. */
.opponent:nth-child(4) { grid-column: 2; grid-row: 2; align-self: end; justify-self: center; min-width: 190px; }
/* Alt koltuk 'yancısın' şeridinin altında kalıyordu; şeridin üstüne çıkarıldı. */
.game-shell.spectating .opponent:nth-child(4) {
    position: relative;
    z-index: 61;
    margin-bottom: max(66px, calc(env(safe-area-inset-bottom) + 66px));
}
.table-center {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    width: 100%;
    min-height: 210px;
    padding: 3.2rem 1rem 1rem;
    border: 2px solid #4d87a1;
    border-radius: 4px;
    background-color: #062a40;
    background-image:
        linear-gradient(#2e61783f 1px, transparent 1px),
        linear-gradient(90deg, #2e61783f 1px, transparent 1px),
        radial-gradient(ellipse at center, #0d4864, #041f33 75%);
    background-size: 28px 28px, 28px 28px, 100% 100%;
    box-shadow: inset 0 0 38px #001421c7, 0 8px 18px #0022389c;
}
.discard-pile {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 5;
}
.player-discard-pile {
    position: absolute;
    z-index: 7;
    display: grid;
    grid-template-rows: 12px 1fr;
    width: 52px;
    min-height: 50px;
    padding: 2px 5px 3px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #d9edf3;
    background: #061f3366;
    box-shadow: none;
}
.player-discard-pile:disabled { opacity: 1; cursor: default; }
.player-discard-pile.seat-self { top: 5.2rem; right: .45rem; }
.player-discard-pile.seat-bottom-left { top: 5.2rem; left: .45rem; }
.player-discard-pile.seat-top-left { top: 2.1rem; left: .45rem; }
.player-discard-pile.seat-top-right { top: 2.1rem; right: .45rem; }
/* Renkli cerceveler kaldirildi; yalniz dokunma davranisi kalir. */
.player-discard-pile.takeable {
    border-color: transparent;
    box-shadow: none;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.player-discard-pile.staged-own-discard {
    border-color: transparent;
    box-shadow: none;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.discard-corner-slot.seat-bottom-left.return-taken-hover {
    border-color: #8ff5bd;
    background: #35d58235;
    box-shadow: inset 0 0 12px #7affb055, 0 0 12px #46ec9077;
}
.rack-tile.return-taken-ready {
    opacity: 1;
    box-shadow: 0 12px 20px #0009, 0 0 0 4px #7cf4ad, 0 0 18px #45e58a;
}
.discard-owner {
    overflow: hidden;
    color: #b9d5de;
    font-size: .48rem;
    font-weight: 800;
    line-height: 11px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.discard-history {
    display: flex;
    justify-content: center;
    align-items: end;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.discard-history::-webkit-scrollbar { display: none; }
.discard-history > i { margin: auto; color: #668897; font-style: normal; }
.discard-history-tile { flex: 0 0 auto; }
.discard-history-tile + .discard-history-tile { margin-left: -13px; }
.player-discard-pile .table-tile {
    width: 25px;
    height: 34px;
    padding-bottom: 5px;
    border-radius: 3px;
    font-size: .72rem;
    box-shadow: inset 1px 1px #fff, inset -2px -2px #b7b7af, 0 2px 3px #00131f99;
}
.player-discard-pile .table-tile::before { bottom: 2px; width: 5px; height: 5px; }
.discard-drop-zone {
    position: absolute;
    top: 2.7rem;
    right: 0;
    bottom: 190px;
    z-index: 4;
    display: grid;
    width: 38%;
    place-items: center;
    border: 2px dashed transparent;
    border-radius: 12px;
    color: transparent;
    background: transparent;
    pointer-events: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body.rack-drag-active .discard-drop-zone.enabled {
    border-color: #ffe36b88;
    color: #fff1a5;
    background: #f3b91a14;
}
body.rack-drag-active .discard-drop-zone.enabled.drag-over {
    border-color: #ffe36b;
    color: white;
    background: #f3b91a35;
    box-shadow: inset 0 0 25px #ffdc4e24, 0 0 15px #ffdc4e55;
}
body.rack-drag-active .rack-board { overflow: visible; }
.discard-drop-zone span {
    padding: .28rem .55rem;
    border-radius: 12px;
    background: #08283edb;
    font-size: .65rem;
    font-weight: 900;
}
.stock-pile, .discard-pile {
    border: 1px solid #5f9bb7;
    border-radius: 7px;
    color: #f9df65;
    background: linear-gradient(#123e5d, #051e33);
    box-shadow: 0 5px 12px #00131f, inset 0 1px #a5dded38;
}
.stock-pile { position: relative; z-index: 8; touch-action: manipulation; }
.stock-pile.draw-required {
    border-color: #ffe875;
    animation: draw-required-pulse .85s ease-in-out infinite alternate;
}
@keyframes draw-required-pulse {
    from { filter: brightness(1); box-shadow: 0 5px 12px #00131f, inset 0 1px #a5dded38, 0 0 0 0 #ffe66a66; }
    to { filter: brightness(1.28); box-shadow: 0 5px 12px #00131f, inset 0 1px #fff6b0aa, 0 0 0 7px #ffe66a22, 0 0 18px 5px #ffe66a99; transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
    .stock-pile.draw-required {
    animation: stockBreath 1.5s ease-in-out infinite;
    box-shadow: 0 0 0 4px #ffe66a55, 0 0 15px #ffe66aaa;
}
@keyframes stockBreath {
    0%, 100% { box-shadow: 0 0 0 3px #ffe66a3d, 0 0 10px #ffe66a70; transform: scale(1); }
    50% { box-shadow: 0 0 0 5px #ffe66a7a, 0 0 20px #ffe66ae0; transform: scale(1.06); }
}
}

/* Per alanının gerçek alt sınırı göstergenin üstü değil ıstakanın üstüdür.
   Sol seri ve sağ çift şeritleri bu yüksekliğin tamamını kullanır. */
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] {
    padding-top: 58px;
    padding-bottom: 5px;
}
.game-shell .meld-area.meld-density-roomy {
    --opened-series-rows: 6;
    --opened-pair-rows: 6;
}
.game-shell .meld-area.meld-density-standard {
    --opened-series-rows: 7;
    --opened-pair-rows: 7;
}
.game-shell .meld-area.meld-density-compact {
    --opened-series-rows: 9;
    --opened-pair-rows: 9;
}
.game-shell .meld-area.meld-density-dense {
    --opened-series-rows: 11;
    --opened-pair-rows: 11;
}
.game-shell .meld-area.meld-density-ultra {
    --opened-series-rows: 14;
    --opened-pair-rows: 14;
}
@media (orientation: landscape) and (max-height: 500px) {
    .game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] {
        padding-top: 46px;
        padding-bottom: 4px;
    }
    .game-shell .meld-area.meld-density-roomy {
        --opened-series-rows: 6;
        --opened-pair-rows: 6;
    }
    .game-shell .meld-area.meld-density-standard {
        --opened-series-rows: 7;
        --opened-pair-rows: 7;
    }
    .game-shell .meld-area.meld-density-compact {
        --opened-series-rows: 9;
        --opened-pair-rows: 9;
    }
    .game-shell .meld-area.meld-density-dense {
        --opened-series-rows: 11;
        --opened-pair-rows: 11;
    }
    .game-shell .meld-area.meld-density-ultra {
        --opened-series-rows: 14;
        --opened-pair-rows: 14;
    }
}

/* İşleme henüz taş atılarak onaylanmadığında masadaki önizlemeyi ayırt et. */
.game-shell .staged-processing-meld {
    border-color: #ffd86a;
    box-shadow: inset 0 0 0 1px #fff2a766, 0 0 8px #ffca4470;
}

.game-shell .staged-processing-actions button {
    border-color: #ffca67;
    color: #fff7d1;
    background: linear-gradient(180deg, #a75b20, #71300f);
    box-shadow: 0 0 9px #ffb13f66;
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] {
        padding-top: 42px;
        padding-bottom: 3px;
    }
    .game-shell .meld-area.meld-density-roomy {
        --opened-series-rows: 5;
        --opened-pair-rows: 5;
    }
    .game-shell .meld-area.meld-density-standard {
        --opened-series-rows: 6;
        --opened-pair-rows: 6;
    }
    .game-shell .meld-area.meld-density-compact {
        --opened-series-rows: 8;
        --opened-pair-rows: 8;
    }
    .game-shell .meld-area.meld-density-dense {
        --opened-series-rows: 10;
        --opened-pair-rows: 10;
    }
    .game-shell .meld-area.meld-density-ultra {
        --opened-series-rows: 12;
        --opened-pair-rows: 12;
    }
}

/* Ortadaki deste gerçek bir kapalı taş gibi görünür. Dokunma mevcut çekme
   davranışını, ıstakaya sürükleme ise aynı işlemin hareketli biçimini kullanır. */
.game-shell .stock-pile {
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    min-width: 42px;
    min-height: 58px;
    padding: 2px 3px 3px;
    touch-action: none;
    overflow: visible;
}
.stock-tile-back {
    position: relative;
    display: grid;
    place-items: center;
    width: 31px;
    height: 42px;
    border: 1px solid #c7c1ad;
    border-radius: 3px;
    color: transparent;
    background:
        linear-gradient(100deg, #fffef8 0%, #f5f1e4 55%, #e5dfcc 100%);
    box-shadow: inset 1px 1px 0 #fff, inset -2px -2px 0 #d4ceba, 0 3px 0 #aaa38f, 0 5px 7px #00131f70;
    font: 900 .52rem/1 Arial, sans-serif;
    letter-spacing: -.04em;
    user-select: none;
}
.stock-tile-back::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid #ded8c5;
    border-radius: 1px;
    background: linear-gradient(135deg, #ffffff88, transparent 55%);
}
.stock-count {
    position: absolute;
    top: -6px;
    right: -7px;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    border: 1px solid #f5dd79;
    border-radius: 999px;
    color: #fff6bd;
    background: #0a3c55;
    box-shadow: 0 2px 5px #00131f;
    font-size: .5rem;
}
.game-shell .stock-pile small { margin-top: 2px; font-size: .36rem; white-space: nowrap; }
.stock-pile.stock-dragging { filter: brightness(1.12); }
.stock-drag-ghost {
    position: fixed;
    z-index: 260;
    width: 38px;
    height: 52px;
    transform: translate(-50%, -50%) rotate(5deg) scale(1.08);
    pointer-events: none;
    opacity: .94;
    filter: drop-shadow(0 10px 8px #00131faa);
}
.rack-board.stock-draw-over {
    box-shadow: inset 0 0 0 3px #7af3a0, inset 0 0 20px #46dc7c55;
}
@media (orientation: landscape) and (max-height: 420px) {
    .stock-tile-back { width: 28px; height: 38px; }
    .game-shell .stock-pile { min-width: 38px; min-height: 52px; }
}
/*
 * Yatay ekranda deste kutusunun altındaki "Dokun veya sürükle" yazısı kutuyu
 * gereksiz genişletiyordu; masada yer açmak için gizlendi (düğmenin erişilebilirlik
 * etiketi aynı bilgiyi taşıyor).
 */
@media (orientation: landscape) {
    .game-shell .stock-pile small { display: none; }
}
.stock-pile small, .discard-pile small { color: #c8e0e8; }
.indicator-block { color: #d4e8ee; }
.meld-area {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    margin: 0;
    padding: .35rem;
    border: 0;
    background: transparent;
    pointer-events: none;
}
.meld-heading { color: #d7edf3; text-shadow: 0 1px #001822; }
.table-melds { pointer-events: none; }
.meld { pointer-events: auto; background: #08283ee8; border-radius: 5px; }
.rack-area {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 3;
    z-index: 5;
    width: min(960px, 100%);
    padding: .35rem .55rem 2.8rem;
    border: 2px solid #f0cc58;
    border-bottom-color: #684000;
    border-radius: 8px 8px 2px 2px;
    background:
        linear-gradient(90deg, #6f4308 0 8px, transparent 18px calc(100% - 18px), #6f4308 calc(100% - 8px)),
        repeating-linear-gradient(0deg, #ffffff0a 0 1px, transparent 2px 9px),
        linear-gradient(180deg, #f2b820 0%, #d58d0b 45%, #ecaa16 49%, #b96e05 100%);
    box-shadow: 0 8px 18px #001521c2, inset 0 2px #ffe889, inset 0 -5px #744300;
}
.rack-heading { color: #fff0b4; text-shadow: 0 1px #684000; }
.rack-sort-actions button {
    border: 1px solid #80c7e1;
    border-radius: 5px;
    color: white;
    background: linear-gradient(#28698e, #0a3859);
    box-shadow: inset 0 1px #a6d9e8, 0 2px 4px #4f3000a8;
}
.rack-sort-actions .auto-sort { border-color: #f5d461; color: #fff6bf; background: linear-gradient(#6ca743, #315f25); }
.rack-board { scrollbar-color: #f1c64c #845004; }
.rack-row {
    border-bottom: 2px solid #7a4700;
    background: linear-gradient(#d9970d2e, #7540001f);
    box-shadow: inset 0 -1px #ffdc61;
}
.rack-slot { position: relative; border-radius: 3px; background: #6c3b001f; }
.rack-slot:not(:has(.rack-tile)):has(+ .rack-slot .rack-tile)::after {
    content: "";
    position: absolute;
    top: 18%;
    left: 50%;
    width: 2px;
    height: 64%;
    border-radius: 2px;
    background: #7041008c;
    box-shadow: 1px 0 #ffd95c75;
}
.rack-tile, .table-tile {
    overflow: hidden;
    padding-bottom: 9px;
    border-color: #b9b7ad;
    /* Taş köşeleri hafif yuvarlatıldı; gerçek okey taşı gibi dursun diye az. */
    border-radius: 6px;
    background:
        linear-gradient(105deg, #ffffff 0 14%, #f8f8f3 38%, #e8e8e1 78%, #c8c8c1 100%);
    box-shadow:
        inset 2px 2px 1px #ffffff,
        inset -3px -4px 2px #b7b7af,
        inset 0 0 0 3px #eeeeea,
        0 4px 0 #8e8e87,
        0 6px 7px #2d2100a8;
    text-shadow: 0 1px #fff, 1px 1px 0 #ffffff, 0 0 1px currentColor;
}
.rack-tile::before, .table-tile::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 9px;
    height: 9px;
    box-sizing: border-box;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #fafaf6 0 20%, #d2d2cb 48%, #a9aaa4 70%, #ededE8 74%);
    box-shadow: inset 1px 1px 2px #8e8e89, 0 1px #fff;
}
.rack-tile.red::before, .table-tile.red::before {
    border: 1px solid #780b08;
    background: radial-gradient(circle at 58% 62%, #d82b22 0 34%, #a91410 62%, #620806 100%);
    box-shadow: inset 2px 2px 3px #4f0505cc, inset -1px -1px 2px #ff8e84aa, 0 1px 1px #fff;
}
.rack-tile.blue::before, .table-tile.blue::before {
    border: 1px solid #043971;
    background: radial-gradient(circle at 58% 62%, #1479ce 0 34%, #075ca8 62%, #022f62 100%);
    box-shadow: inset 2px 2px 3px #01274fcc, inset -1px -1px 2px #79c5ffaa, 0 1px 1px #fff;
}
.rack-tile.black::before, .table-tile.black::before {
    border: 1px solid #080b0b;
    background: radial-gradient(circle at 58% 62%, #303a3a 0 34%, #182020 62%, #030505 100%);
    box-shadow: inset 2px 2px 3px #000e, inset -1px -1px 2px #95a2a2aa, 0 1px 1px #fff;
}
.rack-tile.yellow::before, .table-tile.yellow::before {
    border: 1px solid #795500;
    background: radial-gradient(circle at 58% 62%, #dbab0a 0 34%, #aa7d00 62%, #654600 100%);
    box-shadow: inset 2px 2px 3px #594000cc, inset -1px -1px 2px #ffe477bb, 0 1px 1px #fff;
}
.table-tile { position: relative; }
.rack-tile > span { position: relative; z-index: 1; transform: translateY(-1px); }
.rack-tile small { z-index: 2; padding: 0 2px; border-radius: 2px; background: #f5f4edcc; }
.rack-tile.dragging {
    box-shadow: inset 2px 2px 1px #fff, inset -3px -4px 2px #b7b7af, 0 7px 0 #797972, 0 15px 18px #00121dbd;
}
.rack-tile.recently-drawn {
    z-index: 12;
    animation: recently-drawn-tile 3s ease-in-out 1 forwards;
}
.rack-tile.recently-drawn.dragging { animation: none; }
@keyframes recently-drawn-tile {
    0%, 24%, 48%, 72% {
        transform: translateY(-3px) scale(1.04);
        filter: brightness(1.08);
        box-shadow: inset 2px 2px 1px #fff, inset -3px -4px 2px #b7b7af, 0 4px 0 #85857e, 0 0 8px 3px #ffe56e;
        outline: 3px solid #fff09a;
        outline-offset: 1px;
    }
    12%, 36%, 60%, 84% {
        transform: translateY(-8px) scale(1.11);
        filter: brightness(1.2);
        box-shadow: inset 2px 2px 1px #fff, inset -3px -4px 2px #b7b7af, 0 6px 0 #85857e, 0 0 16px 7px #fff29c;
        outline: 3px solid #fff09a;
        outline-offset: 1px;
    }
    100% {
        transform: none;
        filter: none;
        box-shadow: inset 2px 2px 1px #fff, inset -3px -4px 2px #b7b7af, 0 4px 0 #85857e;
        outline: 0 solid transparent;
        outline-offset: 0;
    }
}
.meld-builder button { border-radius: 5px; background: linear-gradient(#7b4b12, #4f2b06); }
.rack-area > .meld-builder {
    position: absolute;
    left: .55rem;
    right: .55rem;
    bottom: .35rem;
    z-index: 5;
    height: 34px;
    margin: 0;
    align-items: center;
    justify-content: flex-start;
}
.meld-builder .open-action { background: linear-gradient(#90c73c, #477d1d); }
.meld-builder .open-101-action { box-shadow: -10px 0 16px #8b5209, 0 4px 8px #4e2e00; }
.discard-action {
    position: absolute;
    left: 50%;
    bottom: .35rem;
    z-index: 7;
    transform: translateX(-50%);
    margin: 0;
    border: 1px solid #ffe17b;
    border-radius: 5px;
    color: #fff9d8;
    background: linear-gradient(#d04935, #8f211b);
    box-shadow: inset 0 1px #ff9e8c, 0 3px 7px #5a3300;
}

.lobby-shell {
    background:
        repeating-radial-gradient(circle at 15% 30%, transparent 0 18px, #52c8e20c 19px 21px),
        linear-gradient(135deg, #087b9d, #074b6c 52%, #042e46);
}
.lobby-card { border-color: #6dbbd45e; background: #082e49e8; }
.primary { background: linear-gradient(#f4cf4f, #c68711); }

@media (orientation: landscape) and (max-height: 500px) {
    .game-shell {
        grid-template-columns: 58px minmax(0, 1fr) 58px;
        grid-template-rows: 27px minmax(0, 1fr) auto;
        gap: .2rem .3rem;
        padding: .15rem .3rem .12rem;
    }
    .game-header { min-height: 27px; padding: .08rem .35rem; }
    .opponents { display: contents; }
    .opponent:nth-child(1) { grid-column: 2; grid-row: 2; min-width: 130px; max-width: 175px; min-height: 27px; padding: .12rem .3rem; }
    .opponent:nth-child(2), .opponent:nth-child(3) { grid-row: 2; width: 55px; min-height: 98px; align-self: center; padding: .2rem; }
    .opponent:nth-child(2) { grid-column: 1; }
    .opponent:nth-child(3) { grid-column: 3; }
    .opponent:nth-child(1) div { display: grid; }
    .opponent:nth-child(1) strong { font-size: .62rem; }
    .opponent:nth-child(2) div, .opponent:nth-child(3) div { display: none; }
    .table-center {
        grid-column: 2;
        grid-row: 2;
        min-height: 0;
        padding: 2rem .3rem .3rem;
        gap: .65rem;
        background-size: 18px 18px, 18px 18px, 100% 100%;
    }
    .discard-pile { right: .45rem; bottom: .35rem; }
    .discard-drop-zone { top: 1.8rem; bottom: 116px; width: 40%; }
    .player-discard-pile { width: 48px; min-height: 45px; grid-template-rows: 10px 1fr; }
    .player-discard-pile.seat-top-left, .player-discard-pile.seat-top-right { top: 1.8rem; }
    .player-discard-pile.seat-self, .player-discard-pile.seat-bottom-left { top: 5rem; }
    .discard-owner { font-size: .42rem; line-height: 9px; }
    .player-discard-pile .table-tile { width: 22px; height: 30px; font-size: .65rem; }
    .discard-history-tile + .discard-history-tile { margin-left: -12px; }
    .meld-area { grid-column: 2; grid-row: 2; padding: .2rem; }
    .rack-area { grid-column: 1 / -1; grid-row: 3; width: min(960px, calc(100vw - 10px)); padding: .15rem .25rem .18rem; }
    .rack-heading { min-height: 25px; padding-bottom: .12rem; }
    .rack-sort-actions button { padding: .18rem .5rem; }
    .rack-board { min-height: 110px; height: 110px; padding: 0 .1rem; }
    .rack-row { grid-template-columns: repeat(18, clamp(40px, 3.9vw, 50px)); min-height: 54px; height: 54px; gap: 3px; }
    .rack-slot { width: clamp(40px, 3.9vw, 50px); height: 52px; }
    .rack-tile { font-size: 1.18rem; }
    .rack-tile, .table-tile { padding-bottom: 7px; box-shadow: inset 1px 1px #fff, inset -3px -4px 2px #b7b7af, inset 0 0 0 2px #eeeeea, 0 3px 0 #85857e, 0 5px 6px #2d2100a8; }
    .rack-tile::before, .table-tile::before { bottom: 4px; width: 8px; height: 8px; }
    .rack-area > .meld-builder {
        top: .12rem;
        right: .3rem;
        bottom: auto;
        left: auto;
        width: 245px;
        height: 24px;
        overflow: visible;
        justify-content: flex-end;
    }
    .rack-area > .meld-builder button { height: 24px; padding: .12rem .48rem; }
    .rack-area > .meld-builder .open-101-action { min-width: 112px; padding: .15rem .8rem; }
    .discard-action { top: .12rem; bottom: auto; height: 24px; padding: .12rem 1.15rem; }
    .meld-builder .open-101-action { box-shadow: -8px 0 12px #8b5209, 0 3px 6px #4e2e00; }
}

/* Compact, free-position rack and centered opened melds. */
.rack-board {
    gap: 0;
    padding-right: 0;
    padding-left: 0;
}
.rack-row {
    gap: 0;
    padding-right: 0;
    padding-left: 0;
    background: linear-gradient(#e3a21524, #8b4e0014);
}
.rack-slot {
    border-radius: 0;
    background: transparent;
}
.rack-slot:not(:has(.rack-tile)):has(+ .rack-slot .rack-tile)::after { display: none; }
.rack-tile {
    border-radius: 4px;
    transition: transform .08s ease;
}

.table-melds {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    align-items: start;
    gap: .25rem .55rem;
    overflow-x: hidden;
    overflow-y: auto;
}
.series-meld-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    min-width: 0;
}
.series-meld {
    gap: 0;
    padding: .12rem;
}
.series-meld .table-tile + .table-tile { margin-left: -1px; }
.pair-meld-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(38px, 1fr));
    gap: .25rem;
    min-height: 100%;
}
.pair-meld-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    min-width: 38px;
    padding: .2rem .12rem;
    border-right: 2px solid #6593a533;
    border-left: 2px solid #163f5266;
    border-radius: 3px;
    background: #06233770;
}
.pair-meld {
    flex-direction: column;
    gap: 0;
    padding: .08rem;
}
.pair-meld .table-tile + .table-tile { margin-top: -1px; }
.pair-meld small { margin: .08rem 0 0; font-size: .42rem; }

@media (orientation: landscape) and (max-height: 500px) {
    .rack-row { gap: 0; }
    .meld-area { padding: 3rem 5.6rem .25rem; }
    .table-melds { width: 100%; min-height: 0; max-height: calc(100% - 16px); gap: .15rem .3rem; }
    .series-meld-list { gap: .12rem; }
    .pair-meld-columns { gap: .12rem; }
    .pair-meld-column { min-width: 31px; padding: .08rem .05rem; }
    .pair-meld .table-tile { width: 22px; height: 29px; }
}

/* Açılan perler kısa telefon ekranında kesilmeden, üçlü dikey sıralar halinde yayılır. */
.series-meld-list {
    display: grid;
    grid-template-rows: repeat(3, max-content);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-content: end;
    align-items: start;
    gap: .2rem .65rem;
    padding: .15rem .2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.meld.own-meld {
    border-color: #ffe36b;
    background: #69531fdd;
    box-shadow: 0 0 0 1px #ffe36b55, 0 3px 8px #00131f99;
}

/* Referans oyundaki oranlar: geniş masa, ince üst şerit ve iki sıralık kompakt ıstaka. */
@media (orientation: landscape) {
    .game-shell {
        --game-rack-height: 170px;
        height: 100dvh;
        min-height: 0;
        grid-template-columns: 52px minmax(0, 1fr) 52px;
        grid-template-rows: 30px minmax(0, 1fr) 150px;
        gap: 4px 6px;
        overflow: hidden;
        padding: 3px max(5px, var(--safe-side)) 3px max(5px, var(--safe-side));
    }

    .game-header {
        min-height: 30px;
        padding: 2px 9px;
        border-radius: 6px;
    }
    .game-header .eyebrow { font-size: .58rem; }
    .game-header > div:first-child { gap: .45rem; }
    .turn-label { padding: 3px 12px; font-size: .68rem; }
    .leave-game { padding: 2px 6px; font-size: .62rem; }

    .opponent:nth-child(1) {
        min-width: 155px;
        max-width: 190px;
        min-height: 28px;
        padding: 2px 6px;
    }
    .opponent:nth-child(2),
    .opponent:nth-child(3) {
        width: 50px;
        min-width: 50px;
        min-height: 112px;
        padding: 4px 2px;
    }
    .opponent .avatar { width: 27px; height: 27px; font-size: .7rem; }
    .opponent:nth-child(2) div,
    .opponent:nth-child(3) div,
    .opponent:nth-child(2) i,
    .opponent:nth-child(3) i { display: none; }

    .table-center {
        min-height: 0;
        padding: 35px 5px 6px;
        border-width: 2px;
        background-size: 24px 24px, 24px 24px, 100% 100%;
    }
    .stock-pile,
    .discard-pile { min-width: 54px; min-height: 62px; padding: 2px; }
    .stock-pile span { font-size: 1.25rem; }
    .stock-pile small,
    .discard-pile small { margin-top: 1px; font-size: .48rem; }
    .indicator-block { gap: 2px; font-size: .48rem; }
    .table-center > .indicator-block .table-tile,
    .discard-pile .table-tile { width: 34px; height: 46px; padding-bottom: 6px; font-size: 1rem; }

    .player-discard-pile {
        width: 42px;
        min-height: 39px;
        grid-template-rows: 9px 1fr;
        padding: 1px 3px 2px;
    }
    .player-discard-pile.seat-top-left,
    .player-discard-pile.seat-top-right { top: 32px; }
    .player-discard-pile.seat-self,
    .player-discard-pile.seat-bottom-left { top: 76px; }
    .discard-owner { font-size: .38rem; line-height: 8px; }
    .player-discard-pile .table-tile { width: 19px; height: 27px; padding-bottom: 4px; font-size: .58rem; }
    .discard-history-tile + .discard-history-tile { margin-left: -10px; }

    .meld-area {
        position: relative;
        min-height: 0;
        padding: 47px clamp(66px, 9.5vw, 122px) 7px;
    }
    .meld-heading {
        position: absolute;
        top: 32px;
        right: clamp(68px, 9.7vw, 124px);
        left: clamp(68px, 9.7vw, 124px);
        height: 12px;
        margin: 0;
        justify-content: flex-end;
        pointer-events: none;
    }
    .meld-heading strong { display: none; }
    .meld-heading span {
        padding: 1px 5px;
        border-radius: 7px;
        background: #062238b8;
        font-size: .46rem;
    }
    .table-melds {
        width: 100%;
        min-height: 0;
        max-height: none;
        align-self: stretch;
        align-content: center;
        gap: 3px 8px;
        overflow: auto;
    }
    .series-meld-list {
        grid-template-rows: repeat(3, max-content);
        align-content: center;
        gap: 3px 8px;
        padding: 2px;
    }
    .meld { padding: 1px; border-radius: 3px; }
    .meld .table-tile { width: 23px; height: 31px; padding-bottom: 5px; font-size: .72rem; }
    .meld small { margin-left: 2px; font-size: .42rem; }
    .pair-meld-columns { gap: 3px; }
    .pair-meld-column { min-width: 29px; padding: 2px 1px; gap: 2px; }
    .pair-meld .table-tile { width: 21px; height: 28px; }

    .rack-area {
        grid-column: 2;
        grid-row: 3;
        align-self: end;
        width: min(900px, 96%);
        height: 150px;
        padding: 26px 5px 3px;
        border-radius: 7px 7px 2px 2px;
    }
    .rack-heading {
        position: absolute;
        top: 2px;
        right: 6px;
        left: 6px;
        z-index: 8;
        min-height: 22px;
        height: 22px;
        padding: 0;
        pointer-events: none;
    }
    .rack-heading > span { display: none; }
    .rack-sort-actions {
        margin: 0;
        gap: 3px;
        pointer-events: auto;
    }
    .rack-sort-actions button {
        height: 22px;
        padding: 1px 8px;
        font-size: .53rem;
    }
    .rack-board {
        width: 100%;
        height: 120px;
        min-height: 120px;
        gap: 2px;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .rack-row {
        grid-template-columns: repeat(18, clamp(38px, 3.5vw, 46px));
        width: max-content;
        min-height: 59px;
        height: 59px;
        gap: 0;
        padding: 0;
    }
    .rack-slot {
        width: clamp(38px, 3.5vw, 46px);
        height: 58px;
    }
    .rack-tile { font-size: 1.12rem; }
    .rack-tile small { bottom: 3px; font-size: .31rem; }
    .rack-tile::before { bottom: 3px; width: 7px; height: 7px; }
    .rack-tile.selected { transform: translateY(-4px); }

    .rack-area > .meld-builder {
        top: 2px;
        right: 6px;
        bottom: auto;
        left: auto;
        width: auto;
        max-width: 255px;
        height: 22px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 3px;
    }
    .rack-area > .meld-builder button,
    .rack-area > .meld-builder .open-101-action {
        flex: 0 0 auto;
        min-width: 0;
        height: 22px;
        margin: 0;
        padding: 1px 7px;
        font-size: .52rem;
        box-shadow: none;
    }
    .discard-action {
        top: 2px;
        bottom: auto;
        height: 22px;
        padding: 1px 13px;
        font-size: .54rem;
    }
    .discard-drop-zone { top: 34px; bottom: 156px; width: 33%; }
}

/* Oyun üst bandı kaldırıldı; orta alan ilk satırı, ıstaka ikinci satırı kullanır. */
.game-shell { grid-template-rows: minmax(0, 1fr) auto; }
.game-shell .opponent:nth-child(1),
.game-shell .opponent:nth-child(2),
.game-shell .opponent:nth-child(3),
.game-shell .table-center,
.game-shell .meld-area,
.game-shell > .player-discard-pile { grid-row: 1; }
.game-shell .rack-area { grid-row: 2; }

/* Son atılan taşlar, yan oyuncu kartlarının üst ve altındaki dört sabit noktada. */
.game-shell {
    --discard-side-column: clamp(90px, 11vw, 145px);
    --discard-shell-padding: 1rem;
}

.game-shell > .player-discard-pile {
    position: absolute;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 46px;
    min-height: 46px;
    margin: 0;
}
.game-shell > .player-discard-pile.seat-top-left,
.game-shell > .player-discard-pile.seat-bottom-left {
    left: calc(var(--discard-shell-padding) + (var(--discard-side-column) - 46px) / 2);
}
.game-shell > .player-discard-pile.seat-top-right,
.game-shell > .player-discard-pile.seat-self {
    right: calc(var(--discard-shell-padding) + (var(--discard-side-column) - 46px) / 2);
}
.game-shell > .player-discard-pile.seat-top-left,
.game-shell > .player-discard-pile.seat-top-right { top: 7px; }
.game-shell > .player-discard-pile.seat-bottom-left,
.game-shell > .player-discard-pile.seat-self { bottom: 190px; }

@media (orientation: landscape) and (max-height: 500px) {
    .game-shell {
        --discard-side-column: 58px;
        --discard-shell-padding: .3rem;
    }
    .game-shell > .player-discard-pile.seat-bottom-left,
    .game-shell > .player-discard-pile.seat-self { bottom: 124px; }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell > .player-discard-pile.seat-bottom-left,
    .game-shell > .player-discard-pile.seat-self { bottom: 113px; }
}

.direct-message-request-card { display:flex; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid rgba(255,255,255,.12); background:rgba(17,36,57,.96); }
.direct-message-request-card > div { flex:1; display:flex; flex-direction:column; gap:2px; }
.direct-message-request-card small { color:#a9bfd1; }
.direct-message-request-card button { border:0; border-radius:10px; padding:9px 13px; background:#3f9f62; color:#fff; font-weight:800; }
.direct-message-request-card button.danger { background:#8e3e45; }
.direct-message-request-card.waiting,.direct-message-request-card.rejected { justify-content:center; }
.direct-message-request-card.waiting > span,.direct-message-request-card.rejected > span { font-size:1.4rem; }
.direct-conversation-row.message-request { box-shadow:inset 3px 0 #e9b848; }
.direct-conversation-meta em { border-radius:999px; padding:3px 7px; background:#e9b848; color:#182331; font-size:.66rem; font-style:normal; font-weight:900; }

.table-treat-fab { position:fixed; z-index:84; left:72px; bottom:12px; width:48px; height:48px; border-radius:50%; border:2px solid rgba(255,222,119,.8); background:linear-gradient(145deg,#214d67,#102b42); color:#fff; font-size:1.35rem; box-shadow:0 5px 15px #0008; }
.table-treat-fab.open { background:linear-gradient(145deg,#b77922,#754311); }
.game-tools-menu-fab {
    position: fixed;
    left: 1px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 87;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #d9ecf2;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(180deg, #386a80, #12384b);
    box-shadow: 0 4px 12px #001625b8, inset 0 1px #d7f6ff88;
    font: 900 1rem/1 Arial, sans-serif;
}
.game-tools-menu-fab.open { background: linear-gradient(180deg, #3ab28d, #17634f); }
.game-tools-menu {
    position: fixed;
    left: 40px;
    bottom: max(7px, env(safe-area-inset-bottom));
    z-index: 86;
    display: flex;
    gap: 5px;
    padding: 5px;
    border: 1px solid #79bfd0aa;
    border-radius: 11px;
    background: #06283bed;
    box-shadow: 0 7px 20px #00131dcc;
    backdrop-filter: blur(5px);
}
.game-tools-menu button {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid #62a9bd88;
    border-radius: 8px;
    color: #f2fbff;
    background: linear-gradient(#27677e, #113e55);
    font-size: .52rem;
    font-weight: 800;
    white-space: nowrap;
}
.game-tools-menu button span { font-size: .78rem; }
.game-tools-menu button.voice-menu-item { border-color:#6ee6c5aa; background:linear-gradient(#217e70,#0d5049); }
.game-tools-menu button.voice-menu-item.active { border-color:#ff9e94; background:linear-gradient(#a9433d,#702520); box-shadow:0 0 10px #ff5b4b55; }
.game-tools-menu button.voice-menu-item.unavailable { opacity:.72; border-color:#7798a688; background:linear-gradient(#314d5b,#1d3541); }
.game-tools-menu button.voice-leave-item { border-color:#91a9b599; background:linear-gradient(#405a68,#263d49); }
.game-tools-menu button.danger { border-color: #ef887c99; background: linear-gradient(#a84d3c, #6b241d); }
.table-treat-panel { position:fixed; z-index:92; left:auto; right:max(52px, calc(env(safe-area-inset-right) + 52px)); bottom:66px; width:min(390px,calc(100vw - 90px)); padding:12px; border:1px solid rgba(255,220,127,.65); border-radius:16px; color:#fff; background:linear-gradient(160deg,rgba(16,48,70,.98),rgba(8,25,42,.99)); box-shadow:0 14px 35px #000b; }
.table-treat-panel header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.table-treat-panel header div { display:flex; flex-direction:column; }
.table-treat-panel header small { color:#a9bfd1; }
/* Seçili ikram: oyuncu başına yalnız bir tane olabilir. */
.table-treat-options button.selected {
    border-color: #ffe08a;
    background: linear-gradient(180deg, #7a5a12, #3a2a06);
    box-shadow: inset 0 0 0 1px #ffe08a66, 0 0 12px #ffcf5a44;
}
.table-treat-options button.selected .treat-price { color: #fff3c7; }

/*
 * Ana ekranda geri tuşunda çıkış onayı. Oyunun kimliğine yakın dursun diye
 * arma, altın saat çizgisi ve masa yeşili/lacivert degrade kullanılıyor.
 */
.exit-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20050;
    display: grid;
    place-items: center;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
        max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    background: radial-gradient(circle at 50% 42%, #063b4a99, #000a12ee 70%);
    backdrop-filter: blur(7px);
    animation: exitConfirmFade .16s ease-out;
}
.exit-confirm-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 9px;
    width: min(340px, 100%);
    padding: 20px 20px 16px;
    overflow: hidden;
    border: 1px solid #ffd86e9e;
    border-radius: 22px;
    color: #eefbff;
    text-align: center;
    background:
        radial-gradient(circle at 50% -10%, #ffd86e1f, transparent 58%),
        linear-gradient(165deg, #0d4a56f7, #05202ffb 62%, #071726fc);
    box-shadow: 0 24px 60px #000d, inset 0 1px #ffffff2e, 0 0 26px #ffcf5a26;
    animation: exitConfirmPop .2s cubic-bezier(.2, .9, .3, 1.2);
}
.exit-confirm-card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 62%;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #ffd86e, transparent);
}
.exit-confirm-glow {
    position: absolute;
    left: 50%;
    top: -58px;
    width: 190px;
    height: 120px;
    transform: translateX(-50%);
    background: radial-gradient(circle, #ffd86e33, transparent 68%);
    pointer-events: none;
}
.exit-confirm-logo {
    position: relative;
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px #00131fa8);
}
.exit-confirm-card > strong {
    color: #ffe89a;
    font-size: .95rem;
    line-height: 1.3;
    letter-spacing: .01em;
}
.exit-confirm-card > p {
    margin: 0;
    max-width: 260px;
    color: #a7cbd6;
    font-size: .62rem;
    line-height: 1.5;
}
.exit-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    width: 100%;
    margin-top: 6px;
}
.exit-confirm-actions button {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 13px;
    font-size: .7rem;
    font-weight: 900;
}
.exit-confirm-stay {
    border: 1px solid #ffe79a;
    color: #2a2103;
    background: linear-gradient(180deg, #ffe783, #f0b528);
    box-shadow: inset 0 1px #fffbe0, 0 5px 14px #00131f80;
}
.exit-confirm-quit {
    border: 1px solid #ff9f8c7a;
    color: #ffd8cf;
    background: linear-gradient(180deg, #5d2220, #2c0f0f);
    box-shadow: inset 0 1px #ffffff1f, 0 5px 14px #00131f80;
}
.exit-confirm-actions button:active { transform: translateY(1px); }
@keyframes exitConfirmFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes exitConfirmPop {
    from { opacity: 0; transform: translateY(10px) scale(.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* İkram sepeti: seçilenler onaylanana kadar burada bekler. */
.treat-basket {
    display: grid;
    gap: 5px;
    margin-top: 10px;
    padding: 9px 10px 10px;
    border: 1px solid #ffdc7f5c;
    border-radius: 12px;
    background: #06202fd9;
}
.treat-basket > strong { color: #ffe08a; font-size: .68rem; letter-spacing: .06em; }
.treat-basket-line {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto auto;
    align-items: center;
    gap: 6px;
    font-size: .58rem;
}
.treat-basket-line > span { color: #cfe6ef; font-weight: 800; }
.treat-basket-line > b { color: #fff3c7; font-weight: 700; }
.treat-basket-line > i { color: #ffd98a; font-style: normal; font-weight: 900; }
.treat-basket-line > button {
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 6px;
    color: #ffd8cf;
    background: #7a2a26;
    font-size: .62rem;
    line-height: 1;
}
.treat-basket-total {
    display: flex;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid #ffffff22;
    color: #dff4fa;
    font-size: .64rem;
    font-weight: 800;
}
.treat-basket-total b { color: #ffe08a; }
.treat-basket-actions { display: flex; gap: 6px; margin-top: 3px; }
.treat-basket-actions button { flex: 1; padding: 7px 9px; border-radius: 10px; font-size: .6rem; font-weight: 900; }
.treat-basket-clear { color: #ffd8cf; background: #5c2320; }
.treat-basket-send { color: #10240f; background: linear-gradient(180deg, #ffe783, #f0b528); }

/* Sepet onay penceresi. */
.treat-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    place-items: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: #00131ed6;
    backdrop-filter: blur(5px);
}
.treat-confirm-card {
    display: grid;
    gap: 9px;
    width: min(340px, 100%);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    padding: 14px;
    border: 1px solid #ffdc7f7a;
    border-radius: 16px;
    color: #eefbff;
    background: linear-gradient(160deg, #0f4460f7, #06202ffa);
    box-shadow: 0 18px 45px #000c;
}
.treat-confirm-card > strong { color: #ffe89a; font-size: .86rem; }
.treat-confirm-lines { display: grid; gap: 4px; }
.treat-confirm-lines > div {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto;
    gap: 6px;
    font-size: .6rem;
}
.treat-confirm-lines span { color: #cfe6ef; font-weight: 800; }
.treat-confirm-lines b { color: #fff3c7; font-weight: 700; }
.treat-confirm-lines i { color: #ffd98a; font-style: normal; font-weight: 900; }
.treat-confirm-total { margin: 0; color: #cfe6ef; font-size: .64rem; }
.treat-confirm-total b { color: #ffe08a; }
.treat-confirm-warning { margin: 0; color: #ffb2a5; font-size: .6rem; font-weight: 800; }
.treat-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.treat-confirm-actions .primary { width: auto; margin: 0; padding: 8px 14px; border-radius: 11px; font-size: .64rem; }
.treat-confirm-actions .text-button { padding: 8px 12px; color: #bcd7e0; background: transparent; font-size: .64rem; }

/* İkram düğmesinin altındaki puan etiketi. */
.table-treat-options .treat-price {
    display: block;
    margin-top: 1px;
    color: #ffd98a;
    font-size: .52rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .02em;
}
.table-treat-options button:disabled .treat-price { color: #c4b79a; }
.table-treat-panel header button { border:0; background:transparent; color:#fff; font-size:1.5rem; }
.table-treat-players { display:flex; gap:7px; overflow-x:auto; padding-bottom:8px; }
.table-treat-players button { min-width:95px; display:flex; align-items:center; gap:5px; padding:8px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:#163c57; color:#fff; }
.table-treat-players button.selected { border-color:#ffd66f; box-shadow:0 0 0 2px rgba(255,214,111,.18); }
.table-treat-options { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.table-treat-options button { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 3px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:#102f47; color:#fff; }
.table-treat-options button b { font-size:1.4rem; }
.table-treat-options button span { font-size:.68rem; font-weight:800; }
.player-table-treat { position:absolute; z-index:25; top:100%; left:50%; transform:translate(-50%,3px); min-width:76px; display:flex; align-items:center; gap:4px; padding:3px 6px; border:1px solid rgba(255,219,121,.7); border-radius:10px; background:rgba(28,39,45,.94); color:#fff; box-shadow:0 4px 12px #0008; pointer-events:none; }
.player-table-treat b { font-size:1.2rem; }
.player-table-treat small { max-width:76px; font-size:.52rem; line-height:1.05; }
.rack-own-treats {
    position: absolute; z-index: 28; top: -47px; right: 8px;
    display: flex; flex-direction: row-reverse; align-items: flex-end;
    min-height: 43px; padding: 2px 4px; pointer-events: none;
}
.rack-own-treat {
    position: relative; display: grid; grid-template-columns: 28px minmax(0, 52px);
    align-items: center; gap: 2px; min-width: 58px; height: 39px;
    margin-left: -8px; padding: 3px 6px 3px 3px;
    border: 1px solid #f5d878c7; border-radius: 12px 12px 7px 7px;
    color: #fff; background: linear-gradient(150deg,#23475aee,#0a2737f5);
    box-shadow: 0 5px 13px #00131fbb, inset 0 1px #ffffff30;
    animation: rackTreatArrive .45s cubic-bezier(.18,.88,.3,1.22);
}
.rack-own-treat:nth-last-child(n+2) { transform: translateY(3px) scale(.94); }
.rack-own-treat b { font-size: 1.38rem; line-height: 1; filter: drop-shadow(0 2px 2px #0008); }
.rack-own-treat small { overflow: hidden; color: #fff0b2; font-size: .45rem; font-weight: 800; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }
@keyframes rackTreatArrive { from { opacity: 0; transform: translateY(17px) scale(.55) rotate(-8deg); } to { opacity: 1; } }

/* Sürükleyerek taş atma hedefi çalışır, fakat hiçbir durumda görünmez. */
.discard-drop-zone,
body.rack-drag-active .discard-drop-zone.enabled,
body.rack-drag-active .discard-drop-zone.enabled.drag-over {
    border-color: transparent;
    color: transparent;
    background: transparent;
    box-shadow: none;
}
.discard-drop-zone span { display: none; }

/* Sürükleyerek taş atma hedefi çalışır, fakat hiçbir durumda görünmez. */
.discard-drop-zone,
body.rack-drag-active .discard-drop-zone.enabled,
body.rack-drag-active .discard-drop-zone.enabled.drag-over {
    border-color: transparent;
    color: transparent;
    background: transparent;
    box-shadow: none;
}
.discard-drop-zone span { display: none; }

.game-turn-chip {
    position: absolute;
    top: 4px;
    right: auto;
    left: calc(50% + 110px);
    z-index: 30;
    transform: none;
    padding: 3px 12px;
    border: 1px solid #6bbbd288;
    border-radius: 999px;
    color: #f2fbff;
    background: #062c45d9;
    box-shadow: 0 2px 7px #001a2ba8;
    font-size: .58rem;
    font-weight: 800;
    pointer-events: none;
    overflow: hidden;
}
.turn-time-fill {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(90deg, #25a9cbb8, #3adf9ba8);
    /* Sayac saniyede bir guncelleniyor; gecis suresi bir saniye olunca cubuk
       yine akici gorunur ve her karede yeniden cizim gerekmez. */
    transition: width 1s linear, background-color .3s;
}
.turn-time-text {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}
/*
 * Bütün modal kapatma düğmeleri aynı görünür: yuvarlak koyu zemin, ortalanmış
 * çarpı. Çarpı yazı tipiyle değil iki çubukla çizilir; yazı tipi metriği yüzünden
 * her düğmede farklı miktarda yukarı kaçıyordu. Eski panel kurallarını ezmek için
 * !important gerekiyor; her modalin kendi ölçüsü/rengi vardı.
 */
.modal-close {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto;
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid #ffffff33 !important;
    border-radius: 50% !important;
    color: #eaf6fb !important;
    background: #12374bd9 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-shadow: inset 0 1px #ffffff1f;
}
.modal-close:active { transform: scale(.94); }
.modal-close::before,
.modal-close::after,
.leave-game-fab::before,
.leave-game-fab::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    pointer-events: none;
}
.modal-close::before,
.leave-game-fab::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close::after,
.leave-game-fab::after { transform: translate(-50%, -50%) rotate(-45deg); }
.leave-game-fab {
    position: relative;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 0;
    line-height: 0;
}
.leave-game-fab::before,
.leave-game-fab::after { width: 15px; }

/* Oyun sürerken bot koltuğuna arkadaş çağırma paneli. */
.seat-invite-panel {
    position: fixed;
    right: max(52px, calc(env(safe-area-inset-right) + 52px));
    bottom: max(52px, calc(env(safe-area-inset-bottom) + 52px));
    z-index: 140;
    display: grid;
    gap: 8px;
    width: min(320px, calc(100vw - 96px));
    max-height: min(60dvh, 340px);
    overflow: auto;
    padding: 11px 12px 12px;
    border: 1px solid #7fc4d59c;
    border-radius: 15px;
    color: #eefbff;
    background: linear-gradient(160deg, #0d3f57f5, #05202fF5);
    box-shadow: 0 16px 40px #000b, inset 0 1px #ffffff26;
}
.seat-invite-panel > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.seat-invite-panel > header strong { display: block; color: #ffe89a; font-size: .8rem; }
.seat-invite-panel > header small { color: #a7cbd6; font-size: .56rem; line-height: 1.35; }
.seat-invite-panel > header button {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 8px;
    color: #dff4fa;
    background: #123f56;
    font-size: .9rem;
    font-weight: 900;
}
.seat-invite-seats { display: flex; flex-wrap: wrap; gap: 6px; }
.seat-invite-seats button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid #ffffff2e;
    border-radius: 999px;
    color: #dff4fa;
    background: #0b2f42;
    font-size: .6rem;
    font-weight: 800;
}
.seat-invite-seats button.selected {
    border-color: #ffe89a;
    color: #2a2103;
    background: linear-gradient(180deg, #ffe783, #f0b528);
}
.seat-invite-friends { display: grid; gap: 5px; }
.seat-invite-friend {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border: 1px solid #ffffff1c;
    border-radius: 11px;
    background: #0a2c3ecc;
}
.seat-invite-friend .friend-invite-avatar { width: 28px; height: 28px; }
.seat-invite-friend .friend-invite-details strong { display: block; font-size: .66rem; }
.seat-invite-friend .friend-invite-details small { color: #9dc3ce; font-size: .52rem; }
.seat-invite-friend button {
    padding: 5px 10px;
    border-radius: 9px;
    color: #10240f;
    background: linear-gradient(180deg, #8ce8b0, #34955f);
    font-size: .58rem;
    font-weight: 900;
}
.seat-invite-empty { margin: 0; color: #a7cbd6; font-size: .6rem; }
.table-invite-seat { color: #ffe08a; font-weight: 700; }

/*
 * Sağ alt sütun: oyun menüsünün içindeki her şey buraya simge olarak taşındı
 * (çıkış, radyo, ikram, hamle kayıtları, skorlar, ayarlar, sesli sohbet);
 * menünün kendisi kaldırıldı. Soldaki sütunun aynası.
 */
.game-radio-fab,
.game-treat-fab,
.game-log-fab,
.game-score-fab,
.game-settings-fab,
.game-voice-fab,
.game-invite-fab,
.game-audio-route-fab {
    position: fixed;
    left: auto;
    right: 1px;
    z-index: 75;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #f7df87;
    border-radius: 50%;
    color: white;
    background: linear-gradient(180deg, #4d8294, #183d50);
    box-shadow: 0 4px 12px #001625b8, inset 0 1px #e9fbff80;
}
.game-radio-fab { bottom: max(48px, calc(env(safe-area-inset-bottom) + 48px)); }
.game-treat-fab { bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px)); }
.game-log-fab { bottom: max(128px, calc(env(safe-area-inset-bottom) + 128px)); }
.game-score-fab { bottom: max(168px, calc(env(safe-area-inset-bottom) + 168px)); }
.game-settings-fab { bottom: max(208px, calc(env(safe-area-inset-bottom) + 208px)); }
.game-voice-fab { bottom: max(248px, calc(env(safe-area-inset-bottom) + 248px)); }
.game-invite-fab { bottom: max(288px, calc(env(safe-area-inset-bottom) + 288px)); }
.game-audio-route-fab { bottom: max(328px, calc(env(safe-area-inset-bottom) + 328px)); }
.game-audio-route-fab.open { border-color: #9ff5c6; background: linear-gradient(180deg, #3ab28d, #17634f); }
.game-invite-fab.open { border-color: #9ff5c6; background: linear-gradient(180deg, #3ab28d, #17634f); }
.game-voice-fab.active { border-color: #ffb3a8; background: linear-gradient(180deg, #b5453c, #5f1b18); }
.game-voice-fab:disabled { opacity: .7; }
.game-radio-fab > span,
.game-treat-fab > span,
.game-log-fab > span,
.game-score-fab > span,
.game-settings-fab > span,
.game-voice-fab > span,
.game-invite-fab > span,
.game-audio-route-fab > span { font-size: .88rem; line-height: 1; }
.leave-game-fab {
    position: fixed;
    left: auto;
    right: 1px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 75;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid #ffd2ca;
    border-radius: 50%;
    color: white;
    background: radial-gradient(circle at 35% 25%, #f46655, #a9201b 72%);
    box-shadow: 0 4px 12px #001625b8, inset 0 1px #ffb3a8;
    /* Çarpı iki çubukla çiziliyor; metin çarpısı görünmesin diye yazı gizli. */
    font-family: Arial, sans-serif;
    font-weight: 900;
    font-size: 0;
    line-height: 0;
}
/* Sol alt dugme sutunu asagidan yukariya: sesli yazma, mesajlasma, ses,
   bilgi. Sesli yazma en altta cunku oyun sirasinda en cok kullanilan,
   basparmaga en yakin durmasi gereken dugme. */
.voice-write-fab {
    position: fixed;
    right: auto;
    left: 1px;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 75;
}
.table-chat-fab {
    position: fixed;
    right: auto;
    left: 1px;
    bottom: max(50px, calc(env(safe-area-inset-bottom) + 50px));
    z-index: 75;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #a7eaf3;
    border-radius: 50%;
    color: white;
    background: linear-gradient(180deg, #258cb0, #0b4c6a);
    box-shadow: 0 4px 12px #001625b8, inset 0 1px #b9f4ff88;
}
.table-chat-fab.open { background: linear-gradient(180deg, #3ab28d, #17634f); }
.table-chat-fab.disabled,
.table-chat-fab:disabled { opacity: .72; border-color: #8ca1a7; background: linear-gradient(180deg, #596a70, #293b42); cursor: not-allowed; }
.table-chat-fab > span { font-size: .9rem; }
.table-chat-fab > b {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border: 1px solid white;
    border-radius: 999px;
    color: white;
    background: #d8382e;
    font: 800 .46rem/14px Arial, sans-serif;
}
.game-sound-fab {
    position: fixed;
    right: auto;
    left: 1px;
    bottom: max(90px, calc(env(safe-area-inset-bottom) + 90px));
    z-index: 75;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #f7df87;
    border-radius: 50%;
    color: white;
    background: linear-gradient(180deg, #4d8294, #183d50);
    box-shadow: 0 4px 12px #001625b8, inset 0 1px #e9fbff80;
}
.game-sound-fab.active {
    border-color: #fff1a7;
    background: linear-gradient(180deg, #3ca97f, #17624e);
}
.game-sound-fab.muted {
    border-color: #d58b82;
    background: linear-gradient(180deg, #81504e, #422a2b);
}
.game-sound-fab > span {
    font-size: .88rem;
    line-height: 1;
}
.game-guide-fab {
    position: fixed;
    left: 1px;
    bottom: max(130px, calc(env(safe-area-inset-bottom) + 130px));
    z-index: 88;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0 0 1px;
    border: 2px solid #ffe899;
    border-radius: 50%;
    color: #fff8cf;
    background: linear-gradient(180deg, #397f9a, #153f57);
    box-shadow: 0 4px 12px #001625b8, inset 0 1px #e8fbff99;
    font: 950 1rem/1 Georgia, serif;
}
.game-guide-fab.open { background: linear-gradient(180deg, #d5a32e, #805719); }
.game-guide-backdrop {
    position: fixed;
    inset: 0;
    z-index: 205;
    display: grid;
    place-items: center;
    padding: 10px;
    background: #00131ed6;
    backdrop-filter: blur(5px);
}
.game-guide-card {
    width: min(760px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    overflow: hidden;
    border: 1px solid #8bd2df;
    border-radius: 16px;
    color: #edfaff;
    background: linear-gradient(155deg, #0b415a, #041f31 68%);
    box-shadow: 0 18px 55px #000d, inset 0 1px #c9f7ff30;
}
.game-guide-card > header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-bottom: 1px solid #7fc9d855;
    background: linear-gradient(90deg, #155b74, #0a394f);
}
.game-guide-info {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid #ffe690;
    border-radius: 50%;
    color: #fff3b4;
    background: #0b3045;
    font: 950 1.1rem/1 Georgia, serif;
}
.game-guide-card > header div { display: grid; gap: 2px; }
.game-guide-card > header strong { color: #fff5c5; font-size: 1.08rem; }
.game-guide-card > header small { color: #b6dce5; font-size: .72rem; line-height: 1.3; }
.game-guide-card > header button {
    width: 28px;
    height: 28px;
    padding: 0 0 2px;
    border: 1px solid #a9dce6;
    border-radius: 50%;
    color: #fff;
    background: #ffffff12;
    font-size: 1rem;
}
.game-guide-content {
    counter-reset: guide-step;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: calc(100dvh - 86px);
    padding: 9px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.game-guide-content article {
    counter-increment: guide-step;
    position: relative;
    min-width: 0;
    padding: 8px 9px 8px 35px;
    border: 1px solid #5e9caf70;
    border-radius: 11px;
    background: #061f2dbd;
    box-shadow: inset 0 1px #ffffff0d;
}
.game-guide-content article::before {
    content: counter(guide-step);
    position: absolute;
    top: 8px;
    left: 8px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid #f3d875;
    border-radius: 50%;
    color: #fff2a8;
    background: #174b61;
    font: 900 .53rem/1 Arial, sans-serif;
}
.game-guide-content h3 { margin: 1px 0 7px; color: #ffe99b; font-size: .92rem; line-height: 1.2; }
.game-guide-content ul { display: grid; gap: 5px; margin: 0; padding-left: 16px; }
.game-guide-content li { color: #d7edf2; font-size: .72rem; line-height: 1.42; }
@media (max-width: 660px), (orientation: portrait) {
    .game-guide-content { grid-template-columns: 1fr; }
}
.game-settings-fab {
    position: fixed;
    right: 3px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 75;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #d9ecf2;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(180deg, #386a80, #12384b);
    box-shadow: 0 4px 12px #001625b8, inset 0 1px #d7f6ff88;
    font: 900 1rem/1 Arial, sans-serif;
}
.game-settings-fab.open { background: linear-gradient(180deg, #3ab28d, #17634f); }
.rack-settings-button {
    align-self: center;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-height: 34px !important;
    padding: 0 !important;
    border: 1px solid #d9ecf2 !important;
    border-radius: 50% !important;
    color: #fff;
    background: linear-gradient(180deg, #386a80, #12384b) !important;
    box-shadow: 0 3px 9px #001625b8, inset 0 1px #d7f6ff88 !important;
    font: 900 1rem/1 Arial, sans-serif !important;
}
.rack-settings-button.open { background: linear-gradient(180deg, #3ab28d, #17634f) !important; }
.game-settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: grid;
    place-items: center;
    padding: 12px;
    background: #00131eb5;
    backdrop-filter: blur(4px);
}
.game-settings-card {
    /* Dar ekranda 390 piksel; genis ekranda (yatay telefon, masaustu)
       paneller iki sutuna acilabilsin diye genisler. */
    width: min(760px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #7fc9d8;
    border-radius: 14px;
    color: #eefbff;
    background: linear-gradient(160deg, #0c435d, #06283b);
    box-shadow: 0 16px 42px #000c, inset 0 1px #c9f7ff2e;
}
.game-settings-card > header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-bottom: 1px solid #75bfd044;
    background: #0d4b67;
}
.game-settings-card > header div { display: grid; gap: 1px; }
.game-settings-card > header strong { font-size: .8rem; }
.game-settings-card > header small { color: #aed2dc; font-size: .5rem; }
.game-settings-card > header button {
    width: 26px;
    height: 26px;
    padding: 0 0 2px;
    border: 1px solid #91cad7;
    border-radius: 50%;
    color: white;
    background: #ffffff12;
    font-size: 1rem;
}
.settings-gear { font-size: 1.15rem; }
.accessibility-setting {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: calc(100% - 18px);
    margin: 9px;
    padding: 9px 10px;
    border: 1px solid #6c9eac;
    border-radius: 10px;
    color: #eaf8fb;
    text-align: left;
    background: #061f2d91;
}
.accessibility-setting > span { display: grid; gap: 2px; }
.accessibility-setting b { font-size: .68rem; }
.accessibility-setting small { color: #acc9d0; font-size: .48rem; }
.accessibility-setting > i {
    min-width: 42px;
    padding: 5px 6px;
    border-radius: 999px;
    color: #d6e6ea;
    background: #263f48;
    font: 800 .5rem Arial, sans-serif;
    font-style: normal;
    text-align: center;
}
.accessibility-setting.active { border-color: #77e5b4; background: #0a513b99; }
.accessibility-setting.active > i { color: #062a1d; background: #72e4af; }
.game-sound-setting > i {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 38px;
    min-width: 38px;
    height: 20px;
    padding: 0;
    border-radius: 999px;
    background: #53636b;
    box-shadow: inset 0 1px 4px #0008;
    transition: background .18s ease;
}
.game-sound-setting > i > b {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e8eef0;
    box-shadow: 0 1px 3px #0009;
    transition: transform .18s ease;
}
.game-sound-setting.active > i { background: #35c67b; }
.game-sound-setting.active > i > b { transform: translateX(18px); }
.sound-volume-setting { grid-template-columns: minmax(0, 1fr) minmax(112px, 42%); }
.sound-volume-setting > div { display: grid; grid-template-columns: minmax(78px, 1fr) 32px; align-items: center; gap: 6px; }
.sound-volume-setting input {
    width: 100%;
    min-width: 0;
    height: 7px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(to right, #42d795 0 var(--sound-level), #53636b var(--sound-level) 100%);
    box-shadow: inset 0 1px 3px #0009;
}
.sound-volume-setting input::-webkit-slider-thumb {
    width: 17px;
    height: 17px;
    border: 2px solid #e9d36b;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: #f5fbfc;
    box-shadow: 0 2px 5px #000a;
}
.sound-volume-setting input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid #e9d36b;
    border-radius: 50%;
    background: #f5fbfc;
    box-shadow: 0 2px 5px #000a;
}
.sound-volume-setting > div > b { color: #e9d36b; font-size: .55rem; text-align: right; }
.tile-size-setting { grid-template-columns: 1fr; gap: 8px; }
.tile-size-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.tile-size-options > button {
    min-height: 30px;
    padding: 5px 4px;
    border: 1px solid #7296a0;
    border-radius: 8px;
    color: #d7e8ec;
    background: #142f3a;
    font-size: .5rem;
    font-weight: 800;
}
.tile-size-options > button.selected {
    border-color: #ffe16e;
    color: #082b27;
    background: linear-gradient(#fff09a, #e7bd45);
    box-shadow: 0 0 0 1px #fff2a744, 0 3px 8px #00151e88;
}

/* Sade ana sayfa: oyun, çevrimdışı erişim, hikâyeler ve arkadaşlar ayrı bölümlerdedir. */
.lobby-main-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    margin: 9px 0 12px;
    padding: 4px;
    border: 1px solid #6ebbc944;
    border-radius: 13px;
    background: #041f31a8;
}
.lobby-main-tabs button { display: grid; place-items: center; gap: 3px; min-width: 0; padding: 8px 3px; border-radius: 12px; color: #aac8d1; background: transparent; font-size: .52rem; font-weight: 800; }
.lobby-main-tabs button span { display:grid; place-items:center; width:34px; height:34px; border:2px solid #86d4df55; border-radius:50%; color:#dffaff; background:linear-gradient(#174e68,#082c42); box-shadow:inset 0 1px #ffffff35,0 4px 8px #00141e99; font-size:1rem; }
.lobby-main-tabs button.active { color: #071e28; background: linear-gradient(#f6d669, #d7aa2e); box-shadow: 0 3px 8px #00141e99; }
.lobby-main-tabs button.active span { border-color:#fff2a2; color:#12302c; background:linear-gradient(#fff296,#d6a62c); }
.lobby-main-tabs .direct-message-tab { position: relative; }
.lobby-main-tabs .direct-message-tab > b { position: absolute; top: 3px; right: 12%; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border: 2px solid #061e2c; border-radius: 999px; color: #fff; background: #e64d48; font-size: .42rem; }
.lobby-main-tabs .radiowin-tab.playing { color:#fff2a2; background:linear-gradient(#226e5c,#104637); box-shadow:inset 0 1px #b8ffe26b,0 3px 8px #00141e99; }
.lobby-main-tabs .radiowin-tab.playing span { position:relative; border-color:#ffe981; background:linear-gradient(#2b826c,#0c4b3a); }
.lobby-main-tabs .radiowin-tab.playing span::after { content:""; position:absolute; right:0; top:0; width:8px; height:8px; border:2px solid #08392e; border-radius:50%; background:#45ec8a; box-shadow:0 0 8px #50f49f; }

.radiowin-player-backdrop { position:fixed; inset:0; z-index:320; display:grid; place-items:center; padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom)); background:#00131dc9; backdrop-filter:blur(7px); }
.radiowin-player-card { width:min(390px,calc(100vw - 28px)); overflow:hidden; border:1px solid #ebcd658c; border-radius:22px; color:#edfaff; background:radial-gradient(circle at 85% 0,#1e705d66,transparent 38%),linear-gradient(150deg,#0b3d51,#041e2d 70%); box-shadow:0 20px 65px #000d,inset 0 1px #fff3a733; animation:radiowin-card-in .18s ease-out both; }
.radiowin-player-card>header { display:grid; grid-template-columns:48px minmax(0,1fr) 34px; align-items:center; gap:10px; padding:13px 14px; border-bottom:1px solid #e6cf7136; background:linear-gradient(90deg,#103f52,#092a3b); }
.radiowin-player-logo { display:grid; place-items:center; width:46px; height:46px; border:2px solid #ffe47d; border-radius:15px; background:linear-gradient(145deg,#eac94f,#7d5316); box-shadow:inset 0 1px #fff7c7,0 5px 12px #0008; font-size:1.45rem; }
.radiowin-player-card>header div { display:grid; gap:2px; min-width:0; }
.radiowin-player-card>header small { display:flex; align-items:center; gap:5px; color:#e8cb6b; font-size:.48rem; font-weight:900; letter-spacing:.11em; }
.radiowin-player-card>header small i { width:8px; height:8px; border-radius:50%; background:#6c7d82; }
.radiowin-player-card>header small i.live { background:#41ec89; box-shadow:0 0 9px #41ec89; animation:radiowin-live 1.2s ease-in-out infinite; }
.radiowin-player-card>header strong { overflow:hidden; font-size:.88rem; text-overflow:ellipsis; white-space:nowrap; }
.radiowin-player-card>header button { width:32px; height:32px; padding:0; border:1px solid #99cbd66b; border-radius:50%; color:#eefcff; background:#143e4e; font-size:1.15rem; line-height:1; }
.radiowin-now-playing { display:grid; grid-template-columns:88px minmax(0,1fr); align-items:center; gap:15px; padding:20px 18px 15px; }
.radiowin-disc { position:relative; display:grid; place-items:center; width:84px; height:84px; border:4px solid #071218; border-radius:50%; background:repeating-radial-gradient(circle,#15252d 0 3px,#071116 4px 7px); box-shadow:0 8px 18px #000a,inset 0 0 0 2px #ffffff14; }
.radiowin-disc::before { content:""; position:absolute; width:36px; height:36px; border-radius:50%; background:linear-gradient(145deg,#f6d967,#bd7c21); box-shadow:inset 0 1px #fff5ae; }
.radiowin-disc b { position:relative; z-index:1; color:#173134; font-size:.52rem; letter-spacing:-.04em; }
.radiowin-disc.playing { animation:radiowin-spin 3.8s linear infinite; }
.radiowin-now-playing>div { display:grid; gap:5px; min-width:0; }
.radiowin-now-playing small { color:#e9c95c; font-size:.46rem; font-weight:900; letter-spacing:.1em; }
.radiowin-now-playing strong { display:-webkit-box; overflow:hidden; color:#fff4be; font-size:.82rem; line-height:1.25; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.radiowin-now-playing span { color:#9fc5ce; font-size:.53rem; }
.radiowin-player-error { margin:0 16px 10px; padding:8px 10px; border:1px solid #f1847870; border-radius:10px; color:#ffd8d3; background:#6729217a; font-size:.52rem; }
.radiowin-player-controls { display:grid; gap:13px; padding:0 18px 15px; }
.radiowin-play-button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:48px; border:1px solid #ffec9f; border-radius:15px; color:#243118; background:linear-gradient(#ffe879,#d7a52d); box-shadow:inset 0 1px #fffbd1,0 6px 14px #0007; }
.radiowin-play-button>span:not(.network-spinner) { font-size:1rem; }
.radiowin-play-button b { font-size:.7rem; }
.radiowin-play-button .network-spinner { width:18px; height:18px; border-width:2px; }
.radiowin-volume { display:grid; grid-template-columns:24px minmax(0,1fr) 38px; align-items:center; gap:7px; color:#bdd9df; }
.radiowin-volume input {
    width:100%; height:7px; margin:0; border:0; border-radius:999px; outline:0;
    appearance:none; -webkit-appearance:none;
    background:linear-gradient(to right,#f2ce55 0 var(--sound-level),#53636b var(--sound-level) 100%);
    box-shadow:inset 0 1px 3px #0009;
}
.radiowin-volume input::-webkit-slider-thumb {
    width:17px; height:17px; border:2px solid #f2ce55; border-radius:50%;
    appearance:none; -webkit-appearance:none; background:#f5fbfc; box-shadow:0 2px 5px #000a;
}
.radiowin-volume input::-moz-range-thumb {
    width:14px; height:14px; border:2px solid #f2ce55; border-radius:50%;
    background:#f5fbfc; box-shadow:0 2px 5px #000a;
}
.radiowin-volume b { color:#ffe98e; text-align:right; font-size:.53rem; font-variant-numeric:tabular-nums; }
.radiowin-background-note { display:block; padding:10px 15px; border-top:1px solid #ffffff12; color:#88abb5; background:#03172366; text-align:center; font-size:.46rem; }
@keyframes radiowin-spin { to { transform:rotate(360deg); } }
@keyframes radiowin-live { 50% { opacity:.45; transform:scale(.78); } }
@keyframes radiowin-card-in { from { opacity:0; transform:translateY(10px) scale(.97); } }
.leaderboard-panel { overflow: hidden; border: 1px solid #d6b84977; border-radius: 18px; color: #eefbff; background: linear-gradient(155deg, #0a3547, #031923); box-shadow: 0 12px 30px #0006; }
.leaderboard-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #f3d26933; background: linear-gradient(90deg, #123f50, #082839); }
.leaderboard-panel > header div { display: grid; gap: 2px; }.leaderboard-panel > header strong { color: #ffe88a; font-size: .82rem; }.leaderboard-panel > header small { color: #a8c8d1; font-size: .48rem; }
.leaderboard-panel > header button { width: 32px; height: 32px; padding: 0; border: 1px solid #e8ce6f77; border-radius: 50%; color: #ffe98d; background: #0a2b39; font-size: .85rem; }
.leaderboard-list { max-height: min(560px, calc(100dvh - 285px)); overflow-y: auto; padding: 7px; }
.leaderboard-row { display: grid; grid-template-columns: 44px 42px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 54px; padding: 6px 10px; border-bottom: 1px solid #ffffff0d; border-radius: 11px; }
.leaderboard-row { cursor: pointer; transition: transform .12s ease, background-color .12s ease; }.leaderboard-row:active { transform: scale(.985); }.leaderboard-row:focus-visible { outline: 2px solid #ffe16b; outline-offset: -2px; }
.leaderboard-row:nth-child(odd) { background: #ffffff05; }.leaderboard-row.current { border: 1px solid #f3d35c99; background: linear-gradient(90deg, #705b1f66, #183c4366); box-shadow: inset 0 0 12px #f2d55a18; }
.leaderboard-rank { color: #c7dce1; text-align: center; font-size: .7rem; }.leaderboard-rank.rank-1,.leaderboard-rank.rank-2,.leaderboard-rank.rank-3 { font-size: 1.25rem; }
.leaderboard-avatar { width: 38px; height: 38px; overflow: hidden; display: grid; place-items: center; border: 2px solid #70bbc966; border-radius: 50%; background: #10394a; }.leaderboard-avatar img { width:100%; height:100%; object-fit:cover; }.leaderboard-avatar > span { font-size: 1rem; }
.leaderboard-name { min-width: 0; display: flex; align-items: center; gap: 6px; }.leaderboard-name strong { overflow:hidden; color:#f0f9fb; font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }.leaderboard-name small { padding:2px 5px; border-radius:99px; color:#19312e; background:#f1d260; font-size:.4rem; font-weight:900; }
.leaderboard-points { color:#ffe27a; font-size:.65rem; white-space:nowrap; }.leaderboard-points small { color:#9fc1c9; font-size:.42rem; }
.leaderboard-loading { min-height: 180px; display:grid; place-items:center; align-content:center; gap:9px; color:#a9c9d1; }.leaderboard-loading > span:not(.network-spinner) { font-size:2rem; }.leaderboard-loading small { font-size:.55rem; }
.leaderboard-panel > footer { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid #efd26855; color:#d8eef2; background:#0c3040; font-size:.55rem; }.leaderboard-panel > footer b { color:#ffe270; font-size:.78rem; }.leaderboard-panel > footer strong { color:#fff2ae; }
.offline-lobby-panel, .story-hub, .social-panel-page { padding: 12px; border: 1px solid #6ccbd344; border-radius: 13px; color: #eafaff; background: #052a3db8; }
.offline-lobby-panel .card-heading { margin-bottom: 4px; }
.offline-lobby-panel p { margin: 5px 0 9px; color: #a8c8d1; font-size: .62rem; line-height: 1.45; }
.offline-bot-start { margin-top: 4px; }
.status-dot.offline { background: #efc954; box-shadow: 0 0 0 5px #efc95420; }
.social-panel-page > header, .story-hub > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.social-panel-page > header strong, .story-hub > header strong { color: #fff3b5; font-size: .86rem; }
.social-panel-page > header span, .story-hub > header small { color: #9fc3cd; font-size: .52rem; }
.story-hub > header div { display: grid; gap: 1px; }
.story-add { padding: 7px 10px; color: #122229; background: #f0c94f; font-size: .57rem; }
.story-strip { display: flex; gap: 9px; padding: 5px 0 10px; overflow-x: auto; scrollbar-width: none; }
.story-strip::-webkit-scrollbar { display: none; }
.story-bubble { flex: 0 0 58px; display: grid; place-items: center; gap: 3px; padding: 0; color: #d8edf2; background: transparent; }
.story-bubble small { width: 58px; overflow: hidden; font-size: .45rem; text-overflow: ellipsis; white-space: nowrap; }
.story-ring { display: block; width: 48px; height: 48px; padding: 2px; border-radius: 50%; background: linear-gradient(135deg, #ffe16b, #ef4f80, #4e91ff); }
.story-ring img { width: 100%; height: 100%; object-fit: cover; border: 2px solid #073044; border-radius: 50%; }
.story-bubble-add > span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px dashed #83c9d6; border-radius: 50%; color: #062534; background: #f1cc55; font-size: 1.25rem; }
.home-story-strip { margin: 0 0 8px; padding: 3px 7px 0; overflow: hidden; border: 1px solid #6ebbc933; border-radius: 13px; background: #041f3180; }
.home-story-strip .story-strip { margin: 0; padding-bottom: 6px; }
.profile-avatar-button.has-story { padding: 3px; border: 0; background: conic-gradient(#ffcf45, #ff4f89, #8b5cff, #30c9d8, #ffcf45); box-shadow: 0 0 9px #d75dca66; }
.profile-avatar-button.has-story img, .profile-avatar-button.has-story .profile-placeholder { border: 2px solid #062737; border-radius: 50%; }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.story-grid button { position: relative; aspect-ratio: .72; overflow: hidden; padding: 0; border: 1px solid #82bfd066; border-radius: 10px; background: #061c28; }
.story-grid img { width: 100%; height: 100%; object-fit: cover; }
.story-grid button > span { position: absolute; inset: auto 0 0; display: grid; padding: 18px 6px 6px; color: white; text-align: left; background: linear-gradient(transparent, #00131deb); }
.story-grid b { overflow: hidden; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.story-grid small { color: #c0dce3; font-size: .4rem; }
.story-empty { margin: 12px 0 3px; color: #9fbfc8; font-size: .62rem; text-align: center; }
.story-modal-backdrop { position: fixed; inset: 0; z-index: 10040; display: grid; place-items: start center; box-sizing: border-box; width: 100%; height: 100dvh; max-width: 100vw; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: #00111dd6; backdrop-filter: blur(6px); }
.story-composer, .story-viewer { box-sizing: border-box; width: min(420px, 100%); min-width: 0; max-width: 100%; max-height: calc(100dvh - 20px); overflow: auto; border: 1px solid #7bc5d4; border-radius: 16px; color: #eefbff; background: linear-gradient(155deg, #0b425d, #041f31); box-shadow: 0 18px 55px #000d; }
.story-composer *, .story-viewer * { box-sizing: border-box; min-width: 0; }
.story-composer > header, .story-viewer > header { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid #6cb3c544; }
.story-composer > header div, .story-viewer > header div { display: grid; flex: 1; }
.story-composer > header strong, .story-viewer > header strong { font-size: .72rem; }
.story-composer > header small, .story-viewer > header small { color: #a8c9d2; font-size: .46rem; }
.story-composer > header button, .story-close { padding: 2px 7px; color: white; background: transparent; font-size: 1rem; }
.story-image-picker { display: grid; place-items: center; min-height: 180px; margin: 10px; overflow: hidden; border: 1px dashed #77bdca; border-radius: 12px; color: #d6edf2; background: #031b298c; cursor: pointer; }
.story-image-picker > span { font-size: 1.6rem; }.story-image-picker b { font-size: .68rem; }.story-image-picker small { color: #8fb4be; font-size: .45rem; }
.story-image-picker img { width: 100%; max-height: 260px; object-fit: contain; }
.story-image-picker input { display: none; }
.story-composer textarea { width: calc(100% - 20px); min-height: 68px; margin: 0 10px 8px; padding: 9px; resize: none; border: 1px solid #6aa6b455; border-radius: 10px; color: white; background: #041b29; font: 600 .62rem "DM Sans", sans-serif; }
.story-location-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 5px; margin: 0 10px 8px; }
.story-location-row input { width: 100%; padding: 8px; font-size: .58rem; }.story-location-row button { max-width: 92px; padding: 8px 6px; color: #08212c; background: #abd9e2; font-size: .5rem; }
.story-status { display: block; margin: 0 11px 5px; color: #f4d878; font-size: .5rem; }
.story-share { width: calc(100% - 20px); margin: 5px 10px 11px; }
.story-viewer { overflow: hidden; background: #020b11; }
.story-viewer .profile-avatar { width: 30px; height: 30px; flex: 0 0 auto; }
.story-delete { padding: 5px 7px; color: #ffd3ce; background: #8e2926; font-size: .48rem; }
.story-delete-confirm-backdrop{position:fixed;inset:0;z-index:10100;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:#001018c7;backdrop-filter:blur(6px)}
.story-delete-confirm-card{width:min(92vw,390px);display:grid;justify-items:center;gap:9px;padding:20px;border:1px solid #e590906e;border-radius:20px;color:#eefbff;text-align:center;background:linear-gradient(155deg,#143b48,#071d28);box-shadow:0 20px 55px #000c}.story-delete-confirm-card>span{font-size:1.8rem}.story-delete-confirm-card h3{margin:0;color:#fff1b4;font-size:.82rem;line-height:1.35}.story-delete-confirm-card p{margin:0;color:#b8d1d7;font-size:.55rem;line-height:1.5}.story-delete-confirm-card>div{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:5px}.story-delete-confirm-card button{padding:10px;border:1px solid #72adbb66;border-radius:10px;color:#e8f8fb;background:#103747;font-size:.55rem;font-weight:850}.story-delete-confirm-card button.danger{border-color:#ed888877;color:#fff;background:linear-gradient(#c64f59,#8f2731)}
.story-viewer-image { display: block; width: 100%; max-height: calc(100dvh - 150px); object-fit: contain; background: #000; }
.story-viewer footer { padding: 9px 11px; background: #062231; }
.story-viewer footer a, .story-viewer footer span { color: #f3d76e; font-size: .52rem; text-decoration: none; }
.story-viewer footer p { margin: 5px 0 0; color: #edf8fb; font-size: .62rem; line-height: 1.4; }
@media (max-width: 430px) {
    .lobby-main-tabs button { font-size: .48rem; }
    .story-grid { grid-template-columns: repeat(2, 1fr); }
}
.direct-messages-panel { min-height: min(590px, calc(100dvh - 230px)); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid #6ccbd355; border-radius: 18px; color: #eafaff; background: linear-gradient(155deg, #082e40, #031923); box-shadow: 0 12px 30px #0006; }
.direct-conversation-heading, .direct-chat-header { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 12px; border-bottom: 1px solid #ffffff16; background: #0a3549e8; }
.direct-conversation-heading { justify-content: space-between; }
.direct-conversation-heading > div, .direct-chat-header > div { display: grid; gap: 2px; }
.direct-conversation-heading strong, .direct-chat-header strong { color: #fff2a9; font-size: .78rem; }
.direct-conversation-heading small, .direct-chat-header small { color: #9ec5ce; font-size: .48rem; }
.direct-conversation-heading > span { padding: 5px 8px; border-radius: 99px; color: #a6e8d0; background: #0c513f; font-size: .48rem; }
.direct-chat-header > button { width: 32px; height: 32px; padding: 0; border: 1px solid #77bdcc66; border-radius: 50%; color: #e8fbff; background: #082536; font-size: 1.3rem; }
.direct-chat-header > div { flex: 1 1 auto; min-width: 0; }
.direct-chat-header > button.direct-chat-delete { flex: 0 0 auto; margin-left: auto; border-color: #e8919166; color: #ffd7d7; background: #5b2029; font-size: .76rem; }
.direct-chat-header > button.direct-chat-block { flex: 0 0 auto; margin-left: auto; border-color: #efbd646e; color: #ffe3a5; background: #59421e; font-size: .76rem; }
.direct-chat-header > button.direct-chat-block + button.direct-chat-delete { margin-left: 0; }
.direct-delete-backdrop { position: fixed; inset: 0; z-index: 520; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: #001018b8; backdrop-filter: blur(5px); }
.direct-delete-card { width: min(92vw, 390px); display: grid; justify-items: center; gap: 9px; padding: 20px; border: 1px solid #e5909066; border-radius: 20px; color: #eefbff; text-align: center; background: linear-gradient(155deg, #143b48, #071d28); box-shadow: 0 20px 55px #000b; }
.direct-delete-card > span { font-size: 1.75rem; }
.direct-delete-card h3 { margin: 0; color: #fff1b4; font-size: .85rem; }
.direct-delete-card p { margin: 0; color: #b8d1d7; font-size: .56rem; line-height: 1.5; }
.direct-delete-card > div { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 5px; }
.direct-delete-card button { padding: 9px 10px; border: 1px solid #72adbb66; border-radius: 10px; color: #e8f8fb; background: #103747; font-size: .55rem; font-weight: 800; }
.direct-delete-card button.danger { border-color: #ed888866; color: #fff; background: linear-gradient(#c64f59, #8f2731); }
.direct-chat-header .profile-avatar, .direct-conversation-row .profile-avatar { flex: 0 0 auto; width: 42px; height: 42px; }
.direct-conversation-list { min-height: 230px; overflow-y: auto; }
.direct-conversation-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-bottom: 1px solid #ffffff12; border-radius: 0; color: #eafaff; text-align: left; background: transparent; }
.direct-conversation-row:active { background: #ffffff0d; }
.direct-conversation-copy { min-width: 0; display: grid; gap: 3px; }
.direct-conversation-copy strong { color: #f3fbfd; font-size: .65rem; }
.direct-conversation-copy small { overflow: hidden; color: #91b3bd; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.direct-conversation-meta { display: grid; justify-items: end; gap: 5px; }
.direct-conversation-meta time { color: #789ba6; font-size: .43rem; }
.direct-conversation-meta b { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 99px; color: #08291d; background: #66d9a4; font-size: .44rem; }
.direct-new-chat-list { display: flex; gap: 6px; padding: 9px 10px; overflow-x: auto; border-top: 1px solid #ffffff14; scrollbar-width: none; }
.direct-new-chat-list > strong { flex: 0 0 auto; align-self: center; color: #8db3be; font-size: .48rem; }
.direct-new-chat-list button { flex: 0 0 auto; padding: 6px 9px; border: 1px solid #71b5c355; border-radius: 99px; color: #dff6fa; background: #0b3a4e; font-size: .5rem; }
.direct-chat-messages { min-height: 280px; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 6px; padding: 12px; background-color: #071c25; background-image: radial-gradient(#ffffff08 1px, transparent 1px); background-size: 14px 14px; }
.direct-message-bubble { align-self: flex-start; max-width: min(82%, 420px); padding: 8px 10px 5px; border-radius: 5px 14px 14px 14px; color: #eef9fb; background: #174358; box-shadow: 0 2px 5px #0005; }
.direct-message-bubble.mine { align-self: flex-end; border-radius: 14px 5px 14px 14px; background: #176149; }
.direct-message-bubble > header { display: flex; align-items: center; min-height: 12px; margin-bottom: 2px; }
.direct-message-bubble > header strong { color: #79dfec; font-size: .46rem; font-weight: 900; }
.direct-message-bubble.mine > header strong { color: #9af0c2; }
.direct-message-bubble p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: .61rem; line-height: 1.42; }
.direct-message-bubble time { display: block; margin-top: 3px; color: #a7c5cc; font-size: .4rem; text-align: right; }
.direct-message-bubble time span { color: #85d7ff; font-weight: 900; letter-spacing: -.14em; }
.direct-message-date-label { align-self: center; padding: 4px 9px; border: 1px solid #6ba9b744; border-radius: 999px; color: #b9d8df; background: #0b3140e8; box-shadow: 0 2px 5px #0004; font-size: .43rem; font-weight: 800; }
.direct-message-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 9px; border-top: 1px solid #ffffff16; background: #092b3b; }
.direct-message-compose input { min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid #72b8c755; border-radius: 999px; color: #eefcff; background: #061c29; font-size: .6rem; }
.direct-message-compose button { width: 39px; height: 39px; padding: 0; border-radius: 50%; color: #09251b; background: linear-gradient(#75e1ae, #43b985); font-size: .8rem; }
.direct-message-empty { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 6px; color: #8fb1ba; text-align: center; }
.direct-message-empty > span:not(.network-spinner) { font-size: 2rem; }
.direct-message-empty strong { color: #e5f6f9; font-size: .68rem; }
.direct-message-empty small { font-size: .5rem; }
.friend-row-actions .friend-message-button, .friend-profile-message { color: #09271d; background: linear-gradient(#7be3b2, #43b783); }
.friend-profile-message { width: calc(100% - 24px); margin: 0 12px 9px; padding: 8px 11px; border-radius: 10px; font-size: .58rem; font-weight: 800; }
.table-chat-panel {
    position: fixed;
    right: auto;
    left: 40px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 150;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    width: min(310px, calc(100vw - 64px));
    height: min(360px, calc(100vh - 24px));
    overflow: hidden;
    border: 1px solid #70c6d8aa;
    border-radius: 13px;
    color: #ecfbff;
    background: #052c42f2;
    box-shadow: 0 10px 30px #00121ed9;
    backdrop-filter: blur(8px);
}
.table-chat-panel.has-voice-row {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
}
.table-chat-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid #6ebed044;
    background: #0b4965;
}
.table-chat-panel > header div { display: grid; }
.table-chat-panel > header strong { font-size: .72rem; }
.table-chat-panel > header small { color: #9fd4df; font-size: .5rem; }
.table-chat-panel > header button {
    width: 25px;
    height: 25px;
    padding: 0 0 2px;
    border-radius: 50%;
    font-size: 1rem;
}
.table-chat-voice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border-bottom: 1px solid #5fd9c755;
    color: #efffff;
    background: linear-gradient(90deg, #126457, #0b453f);
}
.table-chat-voice.microphone-on {
    border-bottom-color: #ff9186aa;
    background: linear-gradient(90deg, #77352f, #4f2928);
    box-shadow: inset 0 0 12px #ff514229;
}
.table-chat-voice.unavailable { opacity: .76; background: #173b49; border-bottom-color: #6d94a044; }
.table-chat-voice-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #041f2bbb; font-size: .82rem; }
.table-chat-voice > div { display: grid; min-width: 0; }
.table-chat-voice strong { font-size: .61rem; }
.table-chat-voice small { overflow: hidden; color: #bde7e1; font-size: .44rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.table-chat-voice button { min-height: 27px; padding: 4px 8px; border: 1px solid #9df3dc77; border-radius: 8px; color: #fff; background: linear-gradient(#38a78f,#19735f); font-size: .48rem; font-weight: 900; white-space: nowrap; }
.table-chat-voice button.table-chat-voice-leave { width: 25px; padding: 0; border-color: #e69a9299; background: #743832; font-size: .8rem; }
.table-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    padding: 8px;
}
.table-chat-empty { margin: auto; color: #9cbac3; font-size: .62rem; }
.table-chat-messages article {
    align-self: flex-start;
    max-width: 86%;
    padding: 5px 7px;
    border-radius: 9px 9px 9px 3px;
    background: #174e65;
}
.table-chat-messages article.self {
    align-self: flex-end;
    border-radius: 9px 9px 3px 9px;
    background: #1d705e;
}
.table-chat-messages article > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.table-chat-messages article strong { color: #bceaf2; font-size: .5rem; }
.table-chat-messages article time { color: #8eb4be; font-size: .42rem; }
.table-chat-messages article p {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
    font-size: .62rem;
    line-height: 1.25;
}
.table-chat-quick {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    max-width: 100%;
    padding: 6px 7px;
    border-top: 1px solid #6ebed033;
    background: #06283b;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #55a8bd #082f42;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}
.table-chat-quick button {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    min-height: 27px;
    max-height: 27px;
    padding: 3px 9px;
    border-color: #69bfd077;
    border-radius: 999px;
    color: #dffaff;
    background: #15536b;
    font-size: .52rem;
    line-height: 1;
    white-space: nowrap;
}
.table-chat-quick::-webkit-scrollbar { height: 4px; }
.table-chat-quick::-webkit-scrollbar-track { background: #082f42; }
.table-chat-quick::-webkit-scrollbar-thumb { border-radius: 999px; background: #55a8bd; }
.table-chat-emojis {
    padding-block: 4px;
    border-top-color: #e0b94b44;
    background: #082f42;
    scrollbar-color: #d6b84e #082f42;
}
.table-chat-emojis button {
    display: grid;
    place-items: center;
    min-width: 31px;
    width: 31px;
    padding: 2px;
    border-color: #d8c16d77;
    background: #19485c;
    font-family: "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1rem;
}
.table-chat-emojis::-webkit-scrollbar-thumb { background: #d6b84e; }
.table-chat-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    padding: 7px;
    border-top: 1px solid #6ebed044;
    background: #06283b;
}
.table-chat-compose input { min-width: 0; height: 32px; padding: 5px 8px; font-size: .6rem; }
.table-chat-compose button { min-height: 32px; padding: 4px 9px; font-size: .56rem; }
.leave-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 160;
    display: grid;
    place-items: center;
    padding: 16px;
    background: #00131fc7;
    backdrop-filter: blur(3px);
}
.leave-confirm-card {
    display: grid;
    justify-items: center;
    width: min(88vw, 330px);
    padding: 16px;
    border: 1px solid #e5c05c99;
    border-radius: 15px;
    color: #f4fbfd;
    background: linear-gradient(155deg, #10445f, #061f34);
    box-shadow: 0 18px 45px #000a, inset 0 1px #ffffff2b;
    text-align: center;
}
.leave-confirm-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
    border-radius: 50%;
    color: white;
    background: #b72d24;
    font: 900 1.35rem/1 Arial, sans-serif;
}
.leave-confirm-card strong { font-size: .82rem; }
.leave-confirm-card small { margin-top: 5px; color: #b9d2db; font-size: .56rem; }
.leave-confirm-actions { display: flex; gap: 8px; margin-top: 14px; }
.leave-confirm-actions button { padding: 7px 13px; border: 1px solid #6f9fb2; border-radius: 8px; color: #eaf6fa; background: #173d55; font-size: .62rem; }
.leave-confirm-actions .confirm-leave { border-color: #f28e80; background: linear-gradient(#ce4b3e, #92231d); }
/* "Sectigin lobide masa yok, sunu buldum" teklifi. Uyari degil bir oneri,
   o yuzden sari degil lobi mavisi. */
.lobi-teklif-card {
    border-color: #7fc9f0b8;
    box-shadow: 0 18px 45px #000a, 0 0 22px #4aa8e035, inset 0 1px #ffffff2b;
}
.lobi-teklif-icon {
    color: #042033;
    background: linear-gradient(#9fdcff, #3f9fd8);
    box-shadow: 0 0 0 4px #4aa8e024;
}
.leave-confirm-actions .confirm-lobi-teklif {
    border-color: #6fc1ec;
    background: linear-gradient(#2f87bd, #1d5f8c);
    color: #f2fbff;
}

.playable-discard-confirm-card {
    border-color: #f2c24db8;
    box-shadow: 0 18px 45px #000a, 0 0 22px #efb83235, inset 0 1px #ffffff2b;
}
.playable-discard-confirm-icon {
    color: #241700;
    background: linear-gradient(#ffd95d, #e89e18);
    box-shadow: 0 0 0 4px #f4c44324;
}
.leave-confirm-actions .confirm-playable-discard {
    border-color: #f3c552;
    color: #251900;
    background: linear-gradient(#ffdc68, #d99b24);
    font-weight: 900;
}

.table-friend-invites {
    display: grid;
    gap: .55rem;
    margin: .7rem 0;
    padding: .75rem;
    border: 1px solid #56c9a055;
    border-radius: 12px;
    background: #052b2dcc;
}
.table-friend-invites > div:first-child { display: flex; justify-content: space-between; gap: .5rem; }
.table-friend-invites small { color: #9fc9c0; }
.invite-friend-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.invite-friend-list button { display: flex; align-items: center; gap: .35rem; border: 1px solid #4f8f87; background: #0a4043; }
.invite-friend-list button.selected { border-color: #efcf63; background: #75621f; box-shadow: 0 0 0 2px #efcf6344; }
.friend-invite-modal { max-height: min(86vh, 620px); overflow: hidden; }
.friend-invite-search { display: grid; gap: 5px; }
.friend-invite-search span { color: #d9eff2; font-size: .61rem; font-weight: 800; }
.friend-invite-search input { width: 100%; box-sizing: border-box; margin: 0; padding: 11px 13px; border: 1px solid #71becd77; border-radius: 11px; color: #fff; background: #021f28; font-size: .72rem; outline: none; }
.friend-invite-search input:focus { border-color: #efd268; box-shadow: 0 0 0 2px #efd26828; }
.friend-invite-list { display: grid; gap: 5px; max-height: 39vh; overflow-y: auto; padding: 2px 4px 2px 2px; scrollbar-width: thin; }
.friend-invite-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 48px; padding: 6px 7px; border: 1px solid #39777c; border-radius: 11px; background: #042a35; }
.friend-invite-row.selected { border-color: #efd268; background: #4a431d; }
.friend-invite-avatar { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #0b4652; }
.friend-invite-avatar img { width: 100%; height: 100%; object-fit: cover; }
.friend-invite-details { display: grid; min-width: 0; gap: 2px; }
.friend-invite-details strong { overflow: hidden; color: #f3fbfc; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.friend-invite-details small { color: #8fb8bc; font-size: .52rem; }
.friend-invite-row > button { min-width: 68px; padding: 7px 9px; border: 1px solid #68aab0; border-radius: 9px; color: #e9fbfc; background: #0a4b55; font-size: .58rem; font-weight: 900; }
.friend-invite-row.selected > button { border-color: #efd268; color: #18231d; background: #efd268; }
.friend-invite-empty { padding: 18px 12px; border: 1px dashed #6ba59c; border-radius: 12px; color: #b9dcd7; background: #03272aaa; text-align: center; font-size: .66rem; }
.manual-seat-fill {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    margin: .65rem 0;
    padding: 9px 10px;
    border: 1px solid #57b7a866;
    border-radius: 11px;
    background: #052b2dcc;
}
.manual-seat-fill span { grid-column: 1 / -1; color: #b9dcd7; font-size: .6rem; }
.manual-seat-fill button { display: grid; place-items: center; box-sizing: border-box; width: 100%; min-width: 0; height: 42px; margin: 0; padding: 8px 11px; font-size: .58rem; line-height: 1.1; white-space: nowrap; }
.manual-seat-fill .friend-invite-later { grid-column:1/-1; border:1px solid #69ced1; color:#eaffff; background:linear-gradient(180deg,#17738a,#0b4d61); font-size:.64rem; font-weight:900; }
.manual-seat-fill .robot-seat-fill { grid-column:1/-1; border:1px solid #d4dce0; color:#17242a; background:linear-gradient(180deg,#fff,#d8e0e4); font-weight:900; }
.table-invite-backdrop {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: #001015c7;
}
.table-invite-card {
    width: min(440px, 94vw);
    padding: 1.2rem;
    border: 1px solid #e4c45288;
    border-radius: 18px;
    background: linear-gradient(145deg, #0b3b43, #061f2b);
    box-shadow: 0 18px 55px #000b;
    text-align: center;
}
.table-invite-card h2 { margin: .45rem 0; color: #f4d35e; }
.table-invite-actions { display: grid; gap: .45rem; margin-top: 1rem; }

@media (orientation: landscape) and (max-height: 420px) {
    .game-shell { grid-template-rows: 27px minmax(0, 1fr) 132px; }
    .game-header { min-height: 27px; }
    .rack-area { height: 132px; padding-top: 24px; }
    .rack-board { height: 105px; min-height: 105px; }
    .rack-row { min-height: 52px; height: 52px; }
    .rack-slot { height: 51px; }
    .rack-tile { font-size: 1rem; }
    .meld-area { padding-top: 42px; padding-bottom: 4px; }
    .meld-heading { top: 29px; }
    .discard-drop-zone { bottom: 138px; }
}

/* Masada per açıldıktan sonra orta alan iki yönde parmakla kaydırılabilir. */
.meld-area.scrollable-meld-area {
    justify-content: flex-start;
    overflow: auto;
    pointer-events: auto;
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #6f9daf88 transparent;
    -webkit-overflow-scrolling: touch;
}
.meld-area.scrollable-meld-area .table-melds {
    width: max-content;
    min-width: 100%;
    min-height: 100%;
    max-height: none;
    overflow: visible;
    pointer-events: auto;
}
.meld-area.scrollable-meld-area .series-meld-list {
    width: max-content;
    min-width: max-content;
    overflow: visible;
}

/* Yardımlı oyun ve daha geniş masa/kompakt ıstaka düzeni. */
.rack-edge-tools {
    position: absolute;
    z-index: 12;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 62px;
}
.rack-undo-action {
    position: absolute;
    top: -28px;
    left: 4px;
    z-index: 14;
    height: 24px;
    padding: 1px 8px;
    border: 1px solid #ffe485;
    border-radius: 7px;
    color: #fff4bb;
    background: linear-gradient(#7357a5, #382763);
    box-shadow: inset 0 1px #d9c7ff, 0 2px 5px #00182799;
    font-size: .54rem;
}
/* Sutun istakanin altina sabitlenir ve yukari dogru buyur. Eskiden
   istakanin yuksekligine gore ortalaniyordu; sigmayinca tasma alttan
   oluyor ve ekran son dugmeyi kesiyordu. Yukarisi masa, orada yer var. */
.rack-left-tools { right: calc(100% + 5px); top: auto; bottom: 0; }
.rack-right-tools { left: calc(100% + 5px); top: auto; bottom: 0; }
.rack-edge-tools button {
    min-height: 28px;
    padding: 3px 4px;
    border: 1px solid #83cce3;
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(#28759b, #0b3b5d);
    font-size: .55rem;
    line-height: 1.05;
    box-shadow: inset 0 1px #b8e7f3, 0 2px 4px #00263c99;
}
/* Dugme artik hem ceza hem odul tasiyor: kirmizi degil notr zemin.
   Rakamlar kendi renginde - ceza turuncu, odul yesil. */
/* Ceza/odul dugmesi DUZ ve DAR. Oteki serit dugmelerinden devraldigi
   yuvarlak kose, ic parlama ve golge iki satirli halde sismis bir balon
   gibi duruyordu. Burada hepsi geri aliniyor: ince cerceve, duz zemin,
   neredeyse kosesiz. Genislik de seritten dar; serit 62 piksel ama
   dugmenin o kadar yere ihtiyaci yok. */
.rack-edge-tools .own-penalty-trigger {
    display: grid;
    gap: 0;
    justify-self: center;
    width: 52px;
    padding: 2px 2px;
    border: 1px solid #5e8292;
    border-radius: 3px;
    color: #cfe6ee;
    background: #102a36;
    box-shadow: none;
    line-height: 1;
}
/* Serit 62 piksel: iki satirin da sigmasi icin olculer kucuk ve
   harf araligi siki. Olculdu: "Odul -1250" en uzun satir. */
.rack-edge-tools .own-penalty-trigger span {
    display: block;
    font-size: .38rem;
    letter-spacing: -.03em;
    white-space: nowrap;
}
/* Dort haneli odul (-1250) de sigsin diye rakamlar da siki. */
.rack-edge-tools .own-penalty-trigger b { font-size: .5rem; letter-spacing: -.04em; }
/* DIKKAT: ".odul-satiri" app.css icinde BASKA bir sey icin kullaniliyor
   (odul listesi satiri) ve 13 piksel yuvarlak bir hap ciziyor. Ayni adi
   burada kullanmak dugmenin icinde yuvarlak bir kutu belirmesine yol
   aciyordu; bu yuzden adlar "cp-" onekiyle tekil. */
.rack-edge-tools .own-penalty-trigger .cp-ceza b { color: #ffc46a; }
.rack-edge-tools .own-penalty-trigger .cp-odul b { color: #7ae8bd; }
/* Genislik: .rack-score-penalty-stack .own-penalty-trigger kurali width:100%
   diyor ve ayni ozgullukte oldugu icin sonra geliyordu. Uc secicili kural
   onu gecer. */
.rack-edge-tools .rack-score-penalty-stack .own-penalty-trigger { width: 52px; }
.rack-edge-tools .assist-toggle.active,
.rack-edge-tools .auto-layoff.active {
    border-color: #c9f47d;
    color: #fff;
    background: linear-gradient(#79ae39, #386a20);
    box-shadow: inset 0 1px #ecffc5, 0 2px 5px #002b14aa, 0 0 9px #73e25daa;
}
.assist-control {
    position: relative;
    width: 100%;
}
.rack-edge-tools .assist-control > .assist-toggle { width: 100%; }
.rack-edge-tools .assist-legend-trigger {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 3;
    width: 15px;
    min-height: 15px;
    height: 15px;
    padding: 0;
    border: 1px solid #fff0a3;
    border-radius: 50%;
    color: #102c42;
    background: #ffe36e;
    box-shadow: 0 1px 4px #001725;
    font: 900 .52rem/13px Arial, sans-serif;
}
.assist-legend-popover {
    position: fixed;
    left: max(68px, calc(var(--safe-side) + 68px));
    bottom: max(122px, calc(env(safe-area-inset-bottom) + 122px));
    z-index: 145;
    display: grid;
    gap: 5px;
    width: min(230px, calc(100vw - 140px));
    padding: 9px 25px 9px 10px;
    border: 1px solid #8fc7da;
    border-radius: 10px;
    color: #f3fbff;
    background: #082b40f2;
    box-shadow: 0 8px 22px #00131dcc, inset 0 1px #ffffff24;
    font-size: .55rem;
}
.assist-legend-popover strong { color: #fff1a6; font-size: .62rem; }
.assist-legend-popover span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.assist-legend-popover span > i {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 3px;
    box-shadow: 0 0 6px currentColor;
}
.assist-legend-popover .series-dot { color: #70ef76; }
.assist-legend-popover .pair-dot { color: #d879ff; }
.assist-legend-popover .both-dot { color: #ffd84d; }
.assist-legend-popover .unopened-playable-dot { color: #ff493f; }
.assist-legend-popover .opened-playable-dot { color: #5af06d; }
.assist-legend-popover .assist-legend-close {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: white;
    background: #9e302b;
    font: 900 .8rem/17px Arial, sans-serif;
}
.player-profile-trigger {
    display: grid;
    min-width: 0;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
}
.player-profile-trigger:active strong { color: #ffe477; }
.game-player-profile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: grid;
    place-items: center;
    padding: 12px;
    background: #00131f99;
    backdrop-filter: blur(2px);
}
.game-player-profile-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    width: min(82vw, 290px);
    max-height: min(88vh, 430px);
    overflow-y: auto;
    padding: 9px 13px 13px;
    border: 1px solid #8fc7da;
    border-radius: 15px;
    color: #eefaff;
    background: linear-gradient(155deg, #10445f, #061f34);
    box-shadow: 0 15px 38px #000b, inset 0 1px #ffffff2b;
}
.game-player-profile-avatar {
    /* Bu alan dugme oldugu icin tarayicinin varsayilan ic boslugu
       resmi iceri itiyor ve daire icinde kucuk bir dikdortgen gibi
       gorunuyordu. Boslugu sifirla ve olculeri cerceveye dahil et. */
    box-sizing: border-box;
    padding: 0;
    appearance: none;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    overflow: hidden;
    border: 2px solid #f1d66a;
    border-radius: 50%;
    background: #173e54;
    box-shadow: 0 3px 11px #001520;
    font-size: 1.45rem;
}
.game-player-profile-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.game-player-profile-card > strong { color: #fff2b2; font-size: .85rem; }
.game-player-profile-card > small { color: #a8c7d2; font-size: .52rem; }
.game-player-profile-card > p { margin: 3px 0 0; color: #9bb8c3; font-size: .52rem; }
.game-player-score-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 4px;
    padding: 7px 9px;
    border: 1px solid #76b4c9;
    border-radius: 9px;
    background: #0b3248;
    font-size: .6rem;
}
.game-player-score-total b { color: #fff0a5; font-size: .9rem; }
.game-player-score-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    width: 100%;
}
.game-player-score-breakdown > div {
    display: grid;
    gap: 1px;
    padding: 7px;
    border-radius: 9px;
    font-size: .5rem;
}
.game-player-score-breakdown b { font-size: .78rem; }
.game-player-score-breakdown .reward { border: 1px solid #62d990; color: #bfffd4; background: #123e2b; }

/*
 * Profil penceresindeki "oyundan cikarilmasini iste" butonu. Varsayilan beyaz
 * buton koyu modalda sirittigi ve uc satira tasip alttaki butonlari ekran
 * disina ittigi icin kendi stili var: kirmizi uyari tonu, tek satir baslik.
 */
.game-player-kick-vote {
    display: grid;
    gap: 2px;
    width: 100%;
    margin-top: 7px;
    padding: 8px 10px;
    border: 1px solid #ff9f8c7a;
    border-radius: 10px;
    color: #ffd8cf;
    text-align: center;
    background: linear-gradient(180deg, #5d2220, #2c0f0f);
    box-shadow: inset 0 1px #ffffff1f;
    font-size: .6rem;
    font-weight: 800;
    line-height: 1.2;
}
.game-player-kick-vote small {
    color: #e2b3a8;
    font-size: .46rem;
    font-weight: 600;
    line-height: 1.35;
}
.game-player-kick-vote:active { transform: translateY(1px); }
.game-player-kick-vote:disabled { opacity: .55; }

/*
 * Oyuncu cikarma oyu penceresi. Stili hic yoktu: icerik oyun tahtasinin
 * akisinda kalip sol altta devasa beyaz yazi olarak birikiyordu. Artik
 * diger onay pencereleriyle ayni ekran ortasi kart.
 */
.kick-vote-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20040;
    display: grid;
    place-items: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: #00101ad9;
    backdrop-filter: blur(5px);
}
.kick-vote-card {
    display: grid;
    justify-items: center;
    gap: 7px;
    width: min(330px, 100%);
    max-height: min(88vh, 400px);
    overflow-y: auto;
    padding: 15px 16px 13px;
    border: 1px solid #ff9f8c7a;
    border-radius: 16px;
    color: #ffeae4;
    text-align: center;
    background: linear-gradient(160deg, #4a1e1cf7, #1c0c10fa);
    box-shadow: 0 18px 45px #000c;
}
.kick-vote-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #6b2622;
    font-size: 1rem;
}
.kick-vote-card > strong { color: #ffd0a6; font-size: .86rem; line-height: 1.2; }
.kick-vote-card > p { margin: 0; color: #e3bdb4; font-size: .58rem; line-height: 1.45; }
.kick-vote-card > p b { color: #fff0e6; }
.kick-vote-count {
    padding: 5px 11px;
    border: 1px solid #ffffff24;
    border-radius: 999px;
    color: #f0c9bf;
    background: #ffffff12;
    font-size: .56rem;
}
.kick-vote-count b { color: #ffe0a6; }
.kick-vote-actions { display: flex; gap: 8px; justify-content: center; width: 100%; margin-top: 3px; }
.kick-vote-actions .text-button { padding: 9px 14px; color: #d9b8b0; background: transparent; font-size: .64rem; }
.kick-vote-confirm {
    padding: 9px 16px;
    border: 1px solid #ffd0c2;
    border-radius: 11px;
    color: #2a0b09;
    background: linear-gradient(180deg, #ffb3a5, #e2503c);
    font-size: .64rem;
    font-weight: 900;
}
.kick-vote-confirm:active { transform: translateY(1px); }
.kick-vote-confirm:disabled { opacity: .55; }
.game-player-score-breakdown .penalty { border: 1px solid #f18479; color: #ffd0ca; background: #53231f; }
.game-player-profile-close {
    position: absolute !important;
    top: 7px;
    right: 7px;
    z-index: 2;
    width: 26px !important;
    height: 26px !important;
    padding: 0;
    border-radius: 50%;
    color: white;
}
.rack-score {
    align-self: center;
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border: 2px solid #ffe88a;
    border-radius: 50%;
    color: #fff7c7;
    background: radial-gradient(circle, #326e9a, #102d56);
    box-shadow: 0 2px 8px #001b31, inset 0 1px #aee7ff;
    font: 900 1.02rem/1 "Arial Black", sans-serif;
}
.rack-tile.playable-series-hint:not(.selected),
.rack-tile.playable-pair-hint:not(.selected),
.rack-tile.playable-both-hint:not(.selected) {
    z-index: 10;
    outline-offset: -2px;
}
.rack-tile.playable-series-hint:not(.selected) {
    outline: 3px solid #70ef76;
    animation: playable-series-hint 1.15s ease-in-out infinite;
}
.rack-tile.playable-pair-hint:not(.selected) {
    outline: 3px solid #d879ff;
    animation: playable-pair-hint 1.15s ease-in-out infinite;
}

/* Masaya açılmış taşlar ve masadan yeni çekilip ıstakaya gelen taşlar,
   normal ıstaka taşlarıyla aynı canlı renkleri korur. Disabled düğme stili
   veya kısa çekme animasyonu taşı gri/soluk göstermez. */
.game-shell .meld-area .meld,
.game-shell .meld-area .meld:disabled,
.game-shell .meld-area .meld .table-tile,
.game-shell .rack-tile.recently-drawn {
    opacity: 1 !important;
    mix-blend-mode: normal;
    -webkit-filter: none;
    filter: none;
}
.game-shell .meld-area .meld .table-tile.red { color: #d51f18 !important; }
.game-shell .meld-area .meld .table-tile.blue { color: #0068cf !important; }
.game-shell .meld-area .meld .table-tile.black { color: #111615 !important; }
.game-shell .meld-area .meld .table-tile.yellow {
    color: #d4aa00 !important;
    text-shadow: 0 1px 0 #6f5700;
}
.rack-tile.playable-both-hint:not(.selected) {
    outline: 3px solid #ffd84d;
    animation: playable-both-hint 1.15s ease-in-out infinite;
}
@keyframes playable-series-hint {
    50% { filter: brightness(1.18); box-shadow: inset 0 0 0 3px #efffea, 0 0 13px 4px #56ed70; }
}
@keyframes playable-pair-hint {
    50% { filter: brightness(1.18); box-shadow: inset 0 0 0 3px #fff0ff, 0 0 13px 4px #c75cf0; }
}
@keyframes playable-both-hint {
    50% { filter: brightness(1.2); box-shadow: inset 0 0 0 3px #fff8d7, 0 0 13px 4px #ffc928; }
}
.rack-tile.playable-unopened-hint:not(.selected) {
    z-index: 30;
    outline: 2px solid #e43a32 !important;
    outline-offset: 0;
    isolation: isolate;
    animation: playable-unopened-hint .9s ease-in-out infinite;
}
.rack-tile.playable-opened-hint:not(.selected) {
    z-index: 30;
    outline: 2px solid #3dcc54 !important;
    outline-offset: 0;
    isolation: isolate;
    animation: playable-opened-hint 1.05s ease-in-out infinite;
}
.rack-slot:has(> .rack-tile.playable-unopened-hint:not(.selected)),
.rack-slot:has(> .rack-tile.playable-opened-hint:not(.selected)) {
    z-index: 30 !important;
}
@keyframes playable-unopened-hint {
    0%, 100% {
        filter: brightness(1);
        outline-color: #d92d26;
        box-shadow: 0 0 2px #ff493f55;
    }
    50% {
        filter: brightness(1.08);
        outline-color: #ff655d;
        box-shadow: 0 0 7px 1px #ff302877;
    }
}

@keyframes playable-opened-hint {
    0%, 100% {
        filter: brightness(1);
        outline-color: #35bd49;
        box-shadow: 0 0 2px #5af06d55;
    }
    50% {
        filter: brightness(1.08);
        outline-color: #6df080;
        box-shadow: 0 0 7px 1px #43df5877;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .game-shell { grid-template-rows: 30px minmax(0, 1fr) 116px; }
    .table-center { padding-top: 29px; padding-bottom: 3px; }
    .meld-area { padding-top: 31px; padding-bottom: 3px; }
    .rack-area {
        width: min(900px, 96%);
        height: 116px;
        padding: 3px 4px;
    }
    .rack-board { height: 106px; min-height: 106px; }
    .rack-row { min-height: 52px; height: 52px; }
    .rack-slot { height: 51px; }
    .rack-tile { font-size: 1rem; }
    .discard-action { top: -27px; bottom: auto; height: 23px; }
    .discard-drop-zone { bottom: 122px; }
    .rack-edge-tools { width: 59px; gap: 3px; }
    .rack-left-tools { right: calc(100% + 4px); }
    .rack-right-tools { left: calc(100% + 4px); }
    .rack-edge-tools button { min-height: 25px; font-size: .51rem; }
    .rack-score { width: 39px; height: 39px; font-size: 1.02rem; }
    .opponent-opening {
        position: absolute;
        right: 2px;
        bottom: -12px;
        z-index: 15;
        padding: 1px 3px;
        font-size: .42rem;
    }
    .opponent:nth-child(2) .opponent-opening,
    .opponent:nth-child(3) .opponent-opening {
        right: 50%;
        bottom: 2px;
        transform: translateX(50%);
        max-width: 52px;
        white-space: normal;
        text-align: center;
    }
}

@media (orientation: landscape) and (max-height: 420px) {
    .game-shell { grid-template-rows: 27px minmax(0, 1fr) 106px; }
    .rack-area { height: 106px; }
    .rack-board { height: 98px; min-height: 98px; }
    .rack-row { min-height: 48px; height: 48px; }
    .rack-slot { height: 47px; }
    .meld-area { padding-top: 28px; }
    .discard-drop-zone { bottom: 112px; }
    .rack-edge-tools button { min-height: 23px; }
    .rack-score { width: 39px; height: 39px; font-size: 1.02rem; }
}

@media (orientation: landscape) and (max-height: 500px) {
    .score-board { margin: .35rem 0 .2rem; padding: .45rem; border-radius: 11px; }
    .score-board-header strong { font-size: .78rem; }
    .score-cup { font-size: 1.1rem !important; }
    .score-result-message { margin: .25rem 0 .3rem; font-size: .5rem; }
    .score-list { gap: 3px; }
    .score-row { grid-template-columns: 20px 26px minmax(0, 1fr) 38px 57px; min-height: 29px; padding: 2px 5px; }
    .score-avatar { width: 22px; height: 22px; }
    .score-player-name, .score-change { font-size: .56rem; }
    .score-total { font-size: .63rem; }
}

/* Oyun bildirimleri ıstakanın hemen üzerinde konuşma balonu olarak görünür. */
.game-notice {
    z-index: 320;
    top: auto;
    bottom: calc(156px + env(safe-area-inset-bottom));
    max-width: min(86vw, 520px);
    padding: .38rem .7rem;
    border: 1px solid #f4d567;
    border-radius: 18px;
    background: linear-gradient(#3f7028f7, #244b18fa);
    box-shadow: 0 7px 18px #00131f99, inset 0 1px #efffbf55;
    font-size: .62rem;
    line-height: 1.25;
}
.game-error {
    z-index: 321;
}
.game-notice::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #244b18fa;
}
.game-notice.notice-from-self {
    right: max(74px, var(--safe-side));
    left: auto;
    transform: none;
}
.game-notice.notice-from-self::after {
    right: 28px;
    left: auto;
    transform: none;
}
@media (orientation: landscape) and (max-height: 500px) {
    .game-notice { top: auto; bottom: calc(121px + env(safe-area-inset-bottom)); padding: .3rem .58rem; font-size: .55rem; }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-notice { bottom: calc(111px + env(safe-area-inset-bottom)); }
}
.game-notice.notice-from-top {
    top: 48px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
}
.game-notice.notice-from-top::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #3f7028f7;
}
.game-notice.notice-from-left,
.game-notice.notice-from-right {
    top: 50%;
    bottom: auto;
    max-width: min(58vw, 360px);
}
.game-notice.notice-from-left {
    right: auto;
    left: 68px;
    transform: translateY(-50%);
}
.game-notice.notice-from-left::after {
    top: 50%;
    right: 100%;
    left: auto;
    transform: translateY(-50%);
    border-top-color: transparent;
    border-right-color: #315e20f9;
}
.game-notice.notice-from-right {
    right: 68px;
    left: auto;
    transform: translateY(-50%);
}
.game-notice.notice-from-right::after {
    top: 50%;
    right: auto;
    left: 100%;
    transform: translateY(-50%);
    border-top-color: transparent;
    border-left-color: #315e20f9;
}

/* Profil fotoğrafı alanı: fotoğraf yoksa nötr kullanıcı simgesi gösterilir. */
.profile-avatar { overflow: hidden; background: linear-gradient(#2a657b, #12384f); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-placeholder { display: grid; place-items: center; width: 100%; height: 100%; font-size: .82em; line-height: 1; }

.team-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    margin: .65rem 0;
    padding: .65rem;
    border: 1px solid #78d7e455;
    border-radius: 12px;
    background: #072d3b99;
}
.team-picker > span { grid-column: 1 / -1; color: #bcebf0; font-size: .72rem; text-align: center; }
.team-picker button.active { border-color: #f6cf50; background: linear-gradient(#4d8b36, #285c24); color: white; box-shadow: 0 0 0 2px #f6cf5033; }

/* Uctan uca ekranda giris karti durum/gezinme cubugunun altinda kalmasin. */
/* Giris ve acilis ekraninin zemini: kiraathane fotografi. Fotograf ZATEN
   bulanik kaydedildi, uzerine ayrica CSS blur uygulanmiyor; blur her cizimde
   islemciyi mesgul eder ve zayif telefonlarda acilisi yavaslatirdi.
   Ustteki koyu katman yazilarin okunmasi icin; en alttaki eski degisim ise
   gorsel yuklenemezse devreye giren yedek zemin. */
.auth-shell {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background:
        linear-gradient(180deg, #02182c8c, #021820d6),
        url("images/giris-arkaplan.jpg") center / cover no-repeat,
        radial-gradient(circle at 50% 10%, #147491, #052936 65%, #021820);
}
.auth-card { width: min(92vw, 420px); display: grid; gap: .65rem; padding: 1.35rem; border: 1px solid #67d7e766; border-radius: 20px; background: #062b3bed; box-shadow: 0 20px 55px #0009; color: #e9fbff; }
.auth-card h1 { margin: 0; color: #f7cf52; }

/* ---- Acilis ekrani: logo + gercek ilerleme cubugu ----------------------
   Cubuk dolgusu uydurma degil; AccountClient.InitializeAsync icindeki asil
   adimlar bittikce ilerliyor. Sunucu cevabi beklenirken dolgu YERINDE kalir,
   uzerinden gecen parilti isin surdugunu anlatir. */
.acilis-karti { justify-items: center; text-align: center; gap: .9rem; padding: 1.9rem 1.5rem 1.5rem; }
.acilis-logo {
    width: min(42vw, 148px);
    height: auto;
    border-radius: 22px;
    box-shadow: 0 14px 38px #0009, 0 0 26px #ffd96a33;
    animation: acilisLogo 2.4s ease-in-out infinite alternate;
}
@keyframes acilisLogo {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-5px) scale(1.015); }
}
.acilis-cubuk {
    position: relative;
    width: min(78vw, 290px);
    height: 11px;
    border: 1px solid #67d7e766;
    border-radius: 999px;
    background: #03202cdd;
    overflow: hidden;
    box-shadow: inset 0 2px 6px #0008;
}
.acilis-dolgu {
    position: relative;   /* parilti dolgunun ICINDE kalsin: bos kisim parlamaz */
    display: block;
    overflow: hidden;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3fc9e6, #7ff0c6 55%, #ffe17a);
    box-shadow: 0 0 14px #4fe0d699;
    /* Gecis dolgu oranina: adim bitince cubuk sicramaz, akar. */
    transition: width .45s cubic-bezier(.25,.85,.35,1);
}
/* Bekleme pariltisi: dolgunun kendisi ilerlemez, uzerinden isik gecer. */
.acilis-dolgu.bekliyor::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, #fff0 35%, #ffffff5e 50%, #fff0 65%);
    animation: acilisParilti 1.25s linear infinite;
}
@keyframes acilisParilti {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
.acilis-durum {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    justify-content: center;
    margin: 0;
    color: #b9dce3;
    font-size: .76rem;
}
.acilis-durum b { color: #ffe17a; font-size: .8rem; font-variant-numeric: tabular-nums; }
html.low-perf .acilis-logo,
html.low-perf .acilis-dolgu.bekliyor::after { animation: none; }
.auth-card p { margin: 0 0 .25rem; color: #b9dce3; font-size: .84rem; }
.auth-card input { width: 100%; }
.google-signin-button {
    width: 100%;
    display: grid;
    grid-template-columns: 30px 1fr 30px;
    align-items: center;
    min-height: 46px;
    padding: .45rem .7rem;
    border: 1px solid #d7dde3;
    border-radius: 10px;
    color: #263238;
    background: #fff;
    box-shadow: 0 3px 10px #0003;
}
.google-signin-button > .google-logo {
    grid-column: 1;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px #0002;
}
.google-signin-button .google-logo svg { width: 21px; height: 21px; display: block; }
.google-signin-button > strong { grid-column: 2; font-size: .82rem; }
.google-signin-button:disabled { opacity: .65; }
.auth-field-error { margin-top: -.4rem; color: #ffb1a8; font-size: .72rem; }
.auth-card input[aria-invalid="true"] { border-color: #ff766d; box-shadow: 0 0 0 2px #ff766d33; }
.password-input-wrap { position:relative; width:100%; }
.password-input-wrap > input { width:100%; padding-right:42px; }
.password-input-wrap > button { position:absolute; top:50%; right:5px; transform:translateY(-50%); display:grid; place-items:center; width:34px; height:34px; min-height:0; margin:0; padding:0; border:0; border-radius:9px; color:#e8fbff; background:#0b4150; box-shadow:none; font-size:.9rem; }
.password-input-wrap > button:active { transform:translateY(-50%) scale(.94); }
/* Iki satir: ust satirda bildirim/menu dugmeleri, alt satirda profil fotosu ve
   puan. Hepsi tek satirdayken isim de puan da yariya kesiliyordu. */
.account-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "bosluk bildirim menu"
        "profil profil   surum";
    align-items: center;
    gap: .45rem .5rem;
    margin: 0 0 .7rem;
    padding: .45rem;
    border-radius: 12px;
    /* Arka planda Acemi lobisinin gorseli, uzerinde koyu bir ortu: masa
       dokusu hissedilsin ama kullanici adi, puan ve dugmeler okunakli
       kalsin. Ortu gorselin USTUNDE yazildigi icin once o geliyor. */
    background:
        linear-gradient(180deg, #052b389e, #03202ccc),
        url("images/lobbies/acemi.png") center / cover no-repeat;
    border: 1px solid #6ebbc92e;
    overflow: hidden;
}

.account-strip .account-profile-trigger { grid-area: profil; }
.account-strip .system-notification-toggle { grid-area: bildirim; }
.account-strip .profile-edit-button { grid-area: menu; }
.account-strip .avatar { width: 40px; height: 40px; }
.account-strip div { display: grid; min-width: 0; }
.account-strip strong { overflow: hidden; text-overflow: ellipsis; }
.account-strip small { color: #a9d7df; font-size: .65rem; }
.account-profile-trigger { min-width:0; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:.5rem; margin:0; padding:0; border:0; color:inherit; background:transparent; box-shadow:none; text-align:left; }
.account-profile-trigger > span:last-child { min-width:0; display:grid; }
.account-profile-trigger strong, .account-profile-trigger small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-profile-trigger:active { transform:scale(.99); }

/* === Puan rozeti ve madeni para === */
.points-chip { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #f2e6c4; transform-origin: center; }

/* Altin madeni para: sari metal gradyani, kalin kenar cemberi, ust isik ve
   ortasinda para simgesi. Ucan paralar da ayni gorunumu kullaniyor (.coin-fly). */
.coin-icon,
.coin-fly {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 10px;
    border-radius: 50%;
    font-style: normal;
    background:
        radial-gradient(circle at 34% 26%, #fffaf0 0%, #ffeaa6 15%, #f6c945 45%, #dd9f21 70%, #a86e0d 100%);
    box-shadow:
        inset 0 0 0 1.5px #b8811a,
        inset 0 1px 1px #fff6d0d6,
        inset 0 -1px 1.6px #8a5a08a8,
        0 1px 3px #00121ab8;
}

.coin-icon::after,
.coin-fly::after {
    content: "$";
    font-weight: 900;
    line-height: 1;
    color: #8a5c0d;
    text-shadow: 0 1px 0 #ffeaa8b0;
}

.coin-fly {
    position: fixed;
    z-index: 12000;
    width: 30px;
    height: 30px;
    font-size: 18px;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Son para dustugunde puan rozetinin ziplamasi rack.js icinde Web Animations ile
   yapiliyor; Blazor yeniden cizdiginde sinif silinmesin diye CSS sinifi kullanilmadi. */

@media (prefers-reduced-motion: reduce) {
    .coin-fly { display: none; }
}
.profile-upload { position: relative; overflow: hidden; padding: .38rem .5rem; border-radius: 8px; background: #225d71; color: white; cursor: pointer; font-size: .68rem; }
.profile-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.profile-edit-button { display: grid; place-items: center; box-sizing: border-box; min-width: 62px; height: 40px; align-self: center; margin: 0; padding: 4px 8px; border-radius: 12px; color: #f8e8a0; background: #225d71; font-size: .68rem; line-height: 1; }
.profile-feedback-button { width:100%; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px 10px; border:1px solid #67bfd055; border-radius:12px; color:#e9fbff; background:linear-gradient(110deg,#0b4255,#082b3b); text-align:left; text-decoration:none; font:inherit; }
.profile-feedback-button>span:first-child { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:#082b36; background:linear-gradient(#ffe478,#d7ae38); font-size:1rem; }
.profile-feedback-button>span:nth-child(2) { display:grid; min-width:0; gap:2px; }
.profile-feedback-button small { color:#a9d6df; font-size:.58rem; }
.profile-feedback-button>b { color:#f4d86b; font-size:1.25rem; }
.system-notification-toggle { display: grid; grid-template-columns: auto 31px; grid-template-rows: auto auto; align-items: center; justify-content: center; box-sizing: border-box; column-gap: 4px; min-width: 62px; height: 40px; align-self: center; margin: 0; padding: 4px 6px; border: 1px solid #7bb6c75c; border-radius: 12px; color: #cce8ed; background: #082d3a; }
.system-notification-toggle > span { grid-row: 1 / 3; font-size: .82rem; }
.system-notification-toggle > i { position: relative; display: block; width: 29px; height: 15px; border-radius: 999px; background: #53636b; box-shadow: inset 0 1px 4px #0008; transition: background .18s ease; }
.system-notification-toggle > i > b { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #e8eef0; box-shadow: 0 1px 3px #0009; transition: transform .18s ease; }
.system-notification-toggle > small { color: #a9c7ce; font-size: .43rem; line-height: 1; }
.system-notification-toggle.enabled { border-color: #60d99d85; background: #0a463a; }
.system-notification-toggle.enabled > i { background: #35c67b; }
.system-notification-toggle.enabled > i > b { transform: translateX(14px); }
.social-panel { margin: 0 0 .7rem; padding: .55rem; border: 1px solid #6ccbd344; border-radius: 10px; background: #052a3799; color: #e9fbff; }
.social-panel summary { cursor: pointer; color: #f7cf52; font-weight: 800; }
.social-panel > small { display: block; margin: .35rem 0; color: #a9ced5; font-size: .62rem; }
.friend-add-row, .social-row { display: flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.friend-add-row input { flex: 1; min-width: 0; }
.social-row { justify-content: space-between; padding: .3rem; border-radius: 7px; background: #ffffff0a; }
.social-row span { flex: 1; min-width: 0; }
.social-row button { padding: .32rem .45rem; font-size: .62rem; }
.social-row button.danger { background: #7f2929; }
.friend-candidate-row { display: grid; grid-template-columns: 34px 1fr auto; }
.friend-candidate-row .avatar { width: 32px; height: 32px; border-radius: 50%; }
.friend-candidate-row > span:nth-child(2) { display: grid; }
.friend-candidate-row small { color: #9fc7cf; font-size: .58rem; }
.friend-empty { display: block; margin-top: .35rem; color: #a9ced5; }
.social-section-title { display: block; margin-top: .65rem; color: #f6d66a; font-size: .68rem; }
.friend-suggestions-section { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid #77cbd344; }
.friend-suggestions-section > .social-section-title { margin-top: 0; color: #fff3b5; font-size: .76rem; }
.social-search-title { display: block; margin-top: .55rem; color: #aee7ee; font-size: .62rem; }
.blocked-section-title { margin-top: .9rem; padding-top: .65rem; border-top: 1px solid #c96e6e33; color: #eaa4a4; }
.friend-list-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; }
/* Arkadaşlar sayfası: yazılar bir tık büyük */
.social-panel-page > header strong { font-size: .98rem; }
.social-panel-page > header span { font-size: .6rem; }
.social-panel-page > small { font-size: .7rem; }
.social-panel-page .social-section-title { font-size: .78rem; }
.social-panel-page .friend-suggestions-section > .social-section-title { font-size: .88rem; }
.social-panel-page .social-search-title { font-size: .7rem; }
.social-panel-page .social-row { padding: .4rem; font-size: .78rem; }
.social-panel-page .social-row button { padding: .38rem .6rem; font-size: .7rem; }
.social-panel-page .friend-profile-name b { font-size: .82rem; }
.social-panel-page .friend-profile-name small { font-size: .64rem; }
.social-panel-page .friend-candidate-row b { font-size: .78rem; }
.social-panel-page .friend-candidate-row small { font-size: .64rem; }
.social-panel-page .friend-empty { font-size: .7rem; }
.social-panel-page .friend-add-row input { font-size: .74rem; }
/* Arkadaşlık istekleri: ayrı bölüm */
.friend-requests-section { margin: .7rem 0 .85rem; padding: .55rem .55rem .65rem; border: 1px solid #f6d66a5c; border-radius: 12px; background: linear-gradient(160deg, #0c405480, #05253599); box-shadow: 0 4px 14px #00121c55; }
.friend-requests-section > .social-section-title { display: flex; align-items: center; gap: .4rem; margin-top: 0; color: #ffe694; font-size: .86rem; }
.friend-requests-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; color: #06283a; background: #ffd75e; font-size: .62rem; font-weight: 900; }
.friend-request-row { gap: .45rem; }
.friend-request-name { flex: 1; min-width: 0; overflow: hidden; font-size: .82rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.friend-request-row .friend-request-actions { display: flex; flex: none; gap: .35rem; }
.social-panel-page .friend-accept-button { border: 1px solid #2ee87e8c; color: #052d1a; background: linear-gradient(180deg, #4ce68e, #1da95f); box-shadow: inset 0 1px #ffffff5c; font-weight: 900; }
.social-panel-page .friend-reject-button { border: 1px solid #ff80808c; color: #fff1ef; background: linear-gradient(180deg, #ef5a5e, #bd2a2f); box-shadow: inset 0 1px #ffffff3d; font-weight: 900; }
.social-panel-page .friend-accept-button:active:not(:disabled) { background: linear-gradient(180deg, #3bd47e, #158d4f); }
.social-panel-page .friend-reject-button:active:not(:disabled) { background: linear-gradient(180deg, #dc4a4e, #a02226); }
.social-panel-page .friend-list-title { color: #fff3b5; }
/* Önerilen arkadaşlıklar: arama satırı ve aday satırları */
.social-panel-page .friend-add-row { gap: .45rem; margin-top: .5rem; }
.social-panel-page .friend-add-row input { padding: .5rem .7rem; border-radius: 10px; font-size: .74rem; }
.social-panel-page .friend-add-row button { flex: none; padding: .5rem .95rem; border: 1px solid #7fd8e2aa; border-radius: 10px; color: #062a38; background: linear-gradient(180deg, #8fe6ef, #46b3c4); font-size: .74rem; font-weight: 800; }
.social-panel-page .friend-candidate-row { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: .45rem; }
.social-panel-page .friend-candidate-actions { align-items: center; flex-wrap: nowrap; }
.social-panel-page .friend-candidate-row > span:nth-child(2) { gap: 1px; }
.social-panel-page .friend-add-button { border: 1px solid #ffd97a99; color: #35270a; background: linear-gradient(180deg, #ffe58e, #e0b23f); font-weight: 900; }
.social-panel-page .friend-relation-status { border: 1px solid #ffffff26; color: #cfe7ee; background: #ffffff12; font-weight: 700; white-space: nowrap; }
.social-panel-page .friend-candidate-actions .friend-message-button { color: #09271d; background: linear-gradient(#7be3b2, #43b783); }
/* Avatarlar: grid hucresinde esnemesin, hep tam daire kalsin */
.social-panel-page .friend-list-row { grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; }
.social-panel-page .friend-candidate-row { align-items: center; }
.social-panel-page .friend-list-row .friend-profile-avatar { align-self: center; justify-self: center; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; }
.social-panel-page .friend-list-row .friend-profile-avatar .avatar { width: 36px; height: 36px; }
.social-panel-page .friend-candidate-row > .avatar { align-self: center; justify-self: center; flex: none; }
/* Istek ve oneri satirlarindaki avatarlar arkadas satiriyla ayni olculerde. */
.social-panel-page .friend-outgoing-row .friend-profile-avatar,
.social-panel-page .friend-candidate-row .friend-profile-avatar {
    align-self: center;
    justify-self: center;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
}
.social-panel-page .friend-outgoing-row .friend-profile-avatar .avatar,
.social-panel-page .friend-candidate-row .friend-profile-avatar .avatar {
    width: 36px;
    height: 36px;
}
.social-panel-page .friend-outgoing-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
.social-panel-page .friend-row-actions { align-items: center; }
/* Gönderdiğim istekler: bekleyenler ve reddedilenler */
.friend-outgoing-section { margin: 0 0 .85rem; padding: .55rem .55rem .65rem; border: 1px solid #8fb6c45c; border-radius: 12px; background: linear-gradient(160deg, #0a35487a, #05222f99); }
.friend-outgoing-section > .social-section-title { display: flex; align-items: center; gap: .4rem; margin-top: 0; color: #cfe9f2; font-size: .86rem; }
.friend-outgoing-section .friend-requests-count { color: #06283a; background: #9fd2e2; }
.social-panel-page .friend-outgoing-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: .45rem; }
.social-panel-page .friend-outgoing-row > .avatar { width: 32px; height: 32px; align-self: center; justify-self: center; border-radius: 50%; }
.friend-outgoing-details { display: grid; min-width: 0; gap: 1px; }
.friend-outgoing-details b { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.friend-outgoing-status { font-size: .64rem; font-weight: 700; }
.friend-outgoing-row.pending .friend-outgoing-status { color: #ffd98a; }
.friend-outgoing-row.rejected .friend-outgoing-status { color: #ff9a9a; }
.social-panel-page .friend-outgoing-cancel { border: 1px solid #ffffff2e; color: #d9ecf3; background: #ffffff14; font-weight: 700; }
.social-panel-page .friend-outgoing-row.rejected .friend-outgoing-cancel { border-color: #ff8b8b52; color: #ffdedd; background: #7a2c2f66; }
.friend-profile-avatar, .friend-profile-large-avatar { position: relative; overflow: visible; padding: 2px; border: 0; border-radius: 50%; background: #315a68; }
.friend-profile-avatar .avatar { width: 34px; height: 34px; border-radius: 50%; }
.friend-profile-avatar.online::after { content: ''; position: absolute; right: 0; bottom: 1px; z-index: 3; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid #062737; border-radius: 50%; background: #2ee879; box-shadow: 0 0 7px #2ee879cc; }
.friend-profile-avatar.has-story, .friend-profile-large-avatar.has-story { padding: 3px; background: conic-gradient(#ffcf45, #ff4f89, #8b5cff, #30c9d8, #ffcf45); box-shadow: 0 0 9px #d75dca66; }
.friend-profile-avatar.has-story .avatar, .friend-profile-large-avatar.has-story .avatar { border: 2px solid #062737; }
.friend-profile-name { display: grid; justify-items: start; gap: 1px; padding: 3px 5px; color: #f2fbfd; background: transparent; text-align: left; }
.friend-profile-name small { color: #9fc7cf; font-size: .56rem; }
.friend-row-actions { display: flex; flex: none; gap: 4px; }
.friend-profile-backdrop { position: fixed; inset: 0; z-index: 10030; display: grid; place-items: center; box-sizing: border-box; width: 100%; max-width: 100vw; overflow: hidden; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: #00131edb; backdrop-filter: blur(5px); }
.friend-profile-modal { position: relative; box-sizing: border-box; width: min(560px, 100%); min-width: 0; max-width: 100%; max-height: calc(100dvh - 20px); overflow-x: hidden; overflow-y: auto; padding: 18px; border: 1px solid #68d6df66; border-radius: 19px; color: #edfaff; background: linear-gradient(155deg, #08364c, #041e30 70%); box-shadow: 0 18px 55px #000b; }
.friend-profile-modal * { box-sizing: border-box; min-width: 0; }
.friend-profile-close { position: absolute; top: 9px; right: 10px; z-index: 2; width: 30px; height: 30px; padding: 0; border-radius: 50%; color: #fff; background: #ffffff17; }
.friend-profile-modal > header { display: flex; align-items: center; gap: 13px; padding-right: 30px; }
.friend-profile-modal > header > div { display: grid; gap: 2px; }
.friend-profile-modal h3 { margin: 0; color: #fff2b3; font-size: 1rem; }
.friend-profile-modal header strong { color: #76dfe5; font-size: .73rem; }
.friend-profile-modal header small, .friend-profile-columns section > small { color: #9fc4cd; font-size: .57rem; }
.friend-profile-large-avatar { flex: none; width: 76px; height: 76px; }
.friend-profile-large-avatar .avatar { width: 100%; height: 100%; border-radius: 50%; }
.friend-profile-avatar-wrap { position: relative; flex: none; width: 76px; height: 76px; }
.friend-profile-story-shortcut { position: absolute; right: -2px; bottom: -2px; z-index: 4; display: grid; place-items: center; width: 25px; height: 25px; padding: 0 0 0 2px; border: 2px solid #062737; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #ffca3a, #ff4f88 52%, #7d5cff); box-shadow: 0 2px 8px #0009; font-size: .55rem; }
.friend-profile-image-backdrop { position: fixed; inset: 0; z-index: 10045; display: grid; place-items: center; box-sizing: border-box; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: #001019c9; backdrop-filter: blur(7px); }
.friend-profile-image-preview { position: relative; display: grid; justify-items: center; gap: 9px; width: min(380px, 82vw); max-width: 82vw; padding: 10px 10px 12px; border: 1px solid #f3d66c8c; border-radius: 18px; color: #fff3bd; background: linear-gradient(150deg, #0b4154, #041d2c); box-shadow: 0 18px 54px #000c; }
.friend-profile-image-preview > button { position: absolute; top: 7px; right: 7px; z-index: 2; width: 31px; height: 31px; padding: 0; border: 1px solid #ffffff52; border-radius: 50%; color: #fff; background: #001923c7; font-size: 1.2rem; line-height: 1; }
.friend-profile-image-preview > img { display: block; width: 100%; max-height: min(58dvh, 440px); border-radius: 12px; object-fit: contain; background: #02121b; }
.friend-profile-image-preview > strong { max-width: 100%; overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.friend-profile-loading { min-height: 160px; display: grid; place-items: center; align-content: center; gap: 10px; }
.friend-profile-stories { margin-top: 14px; }
.friend-profile-stories > strong, .friend-profile-columns section > strong { color: #f3d66c; font-size: .65rem; }
.friend-profile-stories > div { display: flex; gap: 8px; margin-top: 6px; overflow-x: auto; }
.friend-profile-stories button { position: relative; flex: 0 0 82px; height: 105px; overflow: hidden; padding: 0; border: 2px solid #dc6cce; border-radius: 11px; background: #082232; }
.friend-profile-stories img { width: 100%; height: 100%; object-fit: cover; }
.friend-profile-stories small { position: absolute; right: 3px; bottom: 3px; padding: 2px 4px; border-radius: 6px; color: #fff; background: #001923c9; font-size: .46rem; }
.friend-profile-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.friend-profile-columns.rewards-only { grid-template-columns: minmax(0, 1fr); }
.friend-profile-columns section { padding: 10px; border: 1px solid #76d2da2c; border-radius: 11px; background: #02192380; }
.profile-activity { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 5px; margin-top: 5px; padding: 5px; border-radius: 7px; background: #ffffff0a; }
.profile-activity > span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; font-size: .55rem; font-weight: 900; }
.profile-activity.reward > span { color: #173323; background: #75dfa0; }
.profile-activity.penalty > span { color: #401616; background: #f08c86; }
.profile-activity b { overflow: hidden; color: #e9f8fa; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-activity small { color: #a9cbd2; font-size: .48rem; }
@media (max-width: 520px) {
    .friend-profile-columns { grid-template-columns: 1fr; }
    .friend-row-actions button { padding: .3rem .35rem; font-size: .55rem; }
}

.profile-crop-backdrop {
    position: fixed; inset: 0; z-index: 10060; display: grid; place-items: center;
    padding: max(.7rem, env(safe-area-inset-top)) max(.7rem, env(safe-area-inset-right))
        max(.7rem, env(safe-area-inset-bottom)) max(.7rem, env(safe-area-inset-left));
    background: #020d12db; backdrop-filter: blur(7px);
}
.profile-crop-card {
    width: min(92vw, 430px); max-height: 96dvh; overflow: auto; display: grid; gap: .65rem;
    padding: .85rem; border: 1px solid #73d7e788; border-radius: 18px;
    background: linear-gradient(160deg, #0a3d4c, #052530); color: #effcff;
    box-shadow: 0 20px 60px #000b;
}
.profile-crop-heading { display: flex; align-items: start; justify-content: space-between; gap: .7rem; }
.profile-crop-heading > div { display: grid; }
.profile-crop-heading strong { color: #f6cf53; }
.profile-crop-heading small, .profile-crop-note { color: #afd4dc; font-size: .68rem; }
.profile-crop-frame {
    width: min(74vw, 320px); aspect-ratio: 1; justify-self: center; overflow: hidden;
    border: 3px solid #f6cf53; border-radius: 50%; background: #021116;
    box-shadow: 0 0 0 5px #f6cf5322, inset 0 0 25px #0008;
}
.profile-crop-frame canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.profile-crop-frame canvas.dragging { cursor: grabbing; }
.profile-zoom { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .7rem; font-size: .72rem; }
.profile-zoom input { width: 100%; }
.profile-crop-note { text-align: center; }

.profile-avatar-button {
    min-width: 0; padding: 0; border: 1px solid #79c9d866; cursor: pointer;
    appearance: none; -webkit-appearance: none;
}
.profile-preview-backdrop {
    position: fixed; inset: 0; z-index: 10030; display: grid; place-items: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: #01090edb; backdrop-filter: blur(9px);
}
.profile-preview-card {
    display: grid; justify-items: center; gap: .65rem; width: min(82vw, 520px);
    padding: .85rem; border: 1px solid #f5cf5b88; border-radius: 20px;
    background: linear-gradient(155deg, #0b4150, #041e29); box-shadow: 0 22px 65px #000c;
}
.profile-preview-card img {
    display: block; width: min(72vw, 430px); max-height: 70dvh; aspect-ratio: 1;
    object-fit: cover; border: 3px solid #f5cf5b; border-radius: 18px; background: #021116;
}
.profile-preview-card strong { color: #f5cf5b; }

.profile-editor-backdrop {
    position: fixed; inset: 0; z-index: 10025; display: grid; place-items: center;
    padding: max(.7rem, env(safe-area-inset-top)) max(.7rem, env(safe-area-inset-right))
        max(.7rem, env(safe-area-inset-bottom)) max(.7rem, env(safe-area-inset-left));
    background: #020d12db; backdrop-filter: blur(7px);
}
.profile-editor-card {
    width: min(94vw, 460px); max-height: calc(100dvh - 1.4rem); overflow: auto;
    display: grid; justify-items: center; gap: .7rem; padding: .9rem;
    border: 1px solid #73d7e788; border-radius: 18px;
    color: #effcff;
    /* Ust bandla ayni dil: arkada Acemi lobisinin masa gorseli, uzerinde
       ayni koyulukta ortu. Kart uzun ve kaydirilabilir oldugu icin gorsel
       kartla birlikte kaymaz, sabit durur. */
    background:
        linear-gradient(160deg, #0a3d4c9e, #052530cc),
        url("images/lobbies/acemi.png") center / cover no-repeat;
    box-shadow: 0 20px 60px #000b;
}
.profile-editor-card > header { width: 100%; display: flex; align-items: start; justify-content: space-between; gap: .7rem; }
.profile-editor-card > header div { display: grid; }
.profile-editor-card > header strong { color: #f6cf53; }
.profile-editor-card > header small, .profile-editor-card > small { color: #afd4dc; font-size: .62rem; text-align: center; }
.profile-editor-card > header button { width: 28px; height: 28px; padding: 0; border-radius: 50%; color: white; background: #ffffff17; font-size: 1rem; }
.profile-editor-avatar { position:relative; width:92px; height:92px; min-height:92px; margin:0; padding:0; border:3px solid #f6cf53; border-radius:50%; overflow:hidden; background:#062530; }
.profile-editor-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-trigger > i { position:absolute; right:3px; bottom:3px; display:grid; place-items:center; width:25px; height:25px; border:2px solid #07303d; border-radius:50%; color:#092832; background:#f6cf53; font-size:.7rem; font-style:normal; }
.profile-photo-settings-button { width:100%; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px 10px; border:1px solid #67bfd055; border-radius:12px; color:#e9fbff; background:linear-gradient(110deg,#0b4255,#082b3b); text-align:left; }
.profile-photo-settings-button>span:first-child { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:#ffffff12; font-size:1rem; }
.profile-photo-settings-button>span:nth-child(2) { display:grid; min-width:0; gap:2px; }
.profile-photo-settings-button small { color:#a9d6df; font-size:.58rem; }
.profile-photo-settings-button>b { color:#f4d86b; font-size:1.25rem; }
.profile-image-editor-card { max-height:min(720px,calc(100dvh - 1.4rem)); }
.main-menu-card { align-content:start; }
.info-page-card {
    width: min(96vw, 560px); height: calc(100dvh - 1.4rem);
    grid-template-rows: auto minmax(0, 1fr); align-content: stretch; overflow: hidden;
}
.info-page-frame {
    width: 100%; height: 100%; min-height: 0;
    border: 1px solid #67bfd044; border-radius: 12px; background: #f7fbfc;
}
.profile-editor-upload { padding: .55rem .85rem; background: linear-gradient(#397f94, #185166); }
.avatar-catalog-heading {
    width: 100%; display: flex; align-items: end; justify-content: space-between; gap: .5rem;
    padding-top: .25rem; border-top: 1px solid #ffffff18;
}
.avatar-catalog-heading div { display: grid; }
.avatar-catalog-heading strong { color: #f6cf53; font-size: .72rem; }
.avatar-catalog-heading small, .avatar-catalog-heading > span { color: #9fc9d2; font-size: .53rem; }
.avatar-catalog-grid {
    width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .42rem;
}
.avatar-catalog-item {
    min-width: 0; display: grid; justify-items: center; gap: .18rem; padding: .35rem .18rem;
    border: 1px solid #72cbd244; border-radius: 12px; color: #eafaff;
    background: linear-gradient(155deg, #135063, #092e3b); box-shadow: none;
}
.avatar-catalog-item img {
    width: clamp(50px, 15vw, 76px); aspect-ratio: 1; object-fit: cover;
    border: 2px solid #8bcbd1; border-radius: 50%; background: #062530;
}
.avatar-catalog-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .55rem; font-weight: 800; }
.avatar-catalog-item small { color: #9dc4ca; font-size: .48rem; }
.avatar-catalog-item.selected { border-color: #f6cf53; background: linear-gradient(155deg, #386f60, #164b46); }
.avatar-catalog-item.selected img { border-color: #f6cf53; box-shadow: 0 0 12px #f6cf5370; }
.avatar-catalog-item:disabled { opacity: .5; filter: grayscale(.7); }
/* Hesaptan cikis basligin SOL USTUNDE, kucuk ve sakin. Nadir ve geri donusu
   zahmetli bir is; sayfanin dibinde kocaman kirmizi bir dugme olarak durmasi
   onu yanlislikla en kolay basilacak sey yapiyordu. */
/* Secici basligin icindeki genel "yuvarlak 28x28 simge dugmesi" kuralini
   asmak zorunda: o kural carpi ve disli icin yazilmisti, metin tasiyan bu
   dugmeyi de 28x28'e sikistiriyordu. */
.profile-editor-card > header .profile-logout-mini {
    flex: 0 0 auto; align-self: start;
    width: auto; height: auto;
    padding: .3rem .55rem;
    border: 1px solid #ff8f8f55; border-radius: 8px;
    color: #ffcfcf; background: #5f1d2966;
    font-size: .62rem; font-weight: 800; line-height: 1.15; white-space: nowrap;
}
.profile-editor-card > header .profile-logout-mini:disabled { opacity: .5; }
/* Paneli kapatip ana ekrana donen dugme; kaldirilan kapatma carpisinin yerine
   gecti. Ayar listesinin sonundaki dogal cikis noktasi. */
.profile-home-button { width: 100%; margin-top: .2rem; padding: .58rem .85rem; border: 1px solid #7ad9aa55; border-radius: 11px; color: #e4fff0; background: linear-gradient(#1e5c38, #123c25); font-weight: 800; }
.profile-account-delete-setting { border-color: #ff747477; color: #ffd7d7; background: linear-gradient(110deg,#66232d,#3d1720); }
.profile-account-delete-setting > span:first-child { background: #ff8b8b22; }
.profile-account-delete-setting > span:nth-child(2) > strong { color: #ffd1d1; }
.profile-account-delete-setting:disabled { opacity: .58; }
/* Onay penceresi profil penceresinin (z-index 10025) uzerinde durmali; paylasilan
   .direct-delete-backdrop sinifi 520'de kaliyor ve altta gizleniyordu. */
.account-delete-backdrop { z-index: 10040; }
.account-delete-card { border-color: #ff747488; }
.account-delete-card h3 { color: #ffd2d2; }
.friend-profile-manage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 12px 10px; }
.friend-profile-manage-actions button { padding: 8px 10px; border-radius: 10px; font-size: .58rem; font-weight: 800; }
.friend-profile-manage-actions .danger { color: #ffe5e5; background: linear-gradient(#8b3039, #5f1d29); }

/* Ana lobi artık marka sütunu ayırmadan ekranın tamamını kullanılabilir menüye verir. */
.lobby-shell {
    display: block;
    min-height: 100dvh;
    padding: 0;
}
.lobby-card {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    max-height: none;
    padding: max(.7rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-right))
        max(.8rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left));
    overflow-y: auto;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
}
.lobby-how-to-icon {
    position: absolute;
    top: max(.85rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    z-index: 30;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 2px solid #e9d477;
    border-radius: 50%;
    color: #fff3b1;
    background: linear-gradient(180deg, #1d5d78, #083047);
    box-shadow: inset 0 1px #ffffff55, 0 3px 9px #001520aa;
    font-size: .9rem;
    font-weight: 950;
    line-height: 1;
}
.lobby-how-to-icon:active { transform: scale(.94); }
/* Sag taraftaki 45 piksel, sag ust kosedeki "?" egitim dugmesine
   ayrilmisti. Dugme gizlendigi icin o bosluk olu kaldi ve Menu ile
   Bildirim dugmelerini bos yere sola itiyordu. Sol kenarla ayni
   bosluga indirildi; dugmeler sag kenara yaslandi. Egitim geri
   acilirsa (EgitimAcik = true) bu deger de 45px e dondurulmeli. */
.lobby-card > .account-strip { padding-right: .45rem; }

.feedback-backdrop { position:fixed; inset:0; z-index:10035; display:grid; place-items:center; padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); background:#001019e8; backdrop-filter:blur(7px); }
.feedback-card { width:min(760px,calc(100vw - 20px)); max-height:calc(100dvh - 20px); overflow:auto; display:grid; grid-template-columns:minmax(250px,.9fr) minmax(280px,1.1fr); gap:12px; padding:14px; border:1px solid #e7ca675f; border-radius:20px; color:#effcff; background:radial-gradient(circle at 95% 0,#1b6b6066,transparent 32%),linear-gradient(145deg,#0a3b50,#041e2d 72%); box-shadow:0 25px 75px #000d,inset 0 1px #fff3a733; }
.feedback-card>header { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid #ffffff18; }
.feedback-card>header>div { display:grid; gap:2px; }
.feedback-card>header strong { color:#f6d96e; font-size:1rem; }
.feedback-card>header small { color:#9bc8d1; }
.feedback-card>header>button { width:32px; height:32px; padding:0; border-radius:50%; color:#fff; background:#ffffff14; font-size:1.25rem; }
.feedback-form { align-content:start; display:grid; gap:9px; padding:12px; border:1px solid #64b6c644; border-radius:15px; background:#031923a8; }
.feedback-form label:not(.feedback-file-picker) { display:grid; gap:4px; color:#b8dce2; font-size:.65rem; font-weight:800; }
.feedback-form input,.feedback-form select,.feedback-form textarea { width:100%; min-width:0; padding:9px 10px; border:1px solid #578d9a; border-radius:9px; color:#f5fdff; background:#031822; resize:vertical; }
.feedback-file-picker { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:42px; padding:9px; border:1px dashed #e8cc68a8; border-radius:11px; color:#f5dc7a; background:#d1a52b12; cursor:pointer; font-size:.68rem; font-weight:900; }
.feedback-file-picker input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.feedback-file-note { color:#86afb8; font-size:.54rem; text-align:center; }
.feedback-selected-files { display:grid; gap:5px; }
.feedback-selected-files>span { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:6px; min-width:0; padding:6px 8px; border-radius:8px; color:#dff5f8; background:#ffffff0b; font-size:.58rem; }
.feedback-selected-files>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feedback-selected-files small { color:#8fb9c1; }
.feedback-error { margin:0; padding:8px; border-radius:9px; color:#ffd1cc; background:#8f2e2e55; font-size:.6rem; }
.feedback-submit { min-height:42px; color:#08242a; background:linear-gradient(#ffe16c,#d7aa2e); font-weight:950; }
.feedback-history { min-height:260px; display:grid; align-content:start; gap:8px; }
.feedback-history>header { display:flex; align-items:center; justify-content:space-between; }
.feedback-history>header>button { width:30px; height:30px; padding:0; border-radius:50%; color:#f4dc82; background:#ffffff12; }
.feedback-empty { min-height:180px; display:grid; place-items:center; align-content:center; gap:8px; color:#8eb4bc; border:1px dashed #5a8a9566; border-radius:14px; }
.feedback-empty>span:not(.network-spinner) { font-size:1.5rem; }
.feedback-history-item { display:grid; gap:7px; padding:10px; border:1px solid #5c8d9860; border-radius:13px; background:#031923b8; }
.feedback-history-item.answered { border-color:#59c68188; }
.feedback-history-summary { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:0; color:inherit; background:transparent; text-align:left; }
.feedback-history-summary>span { display:grid; min-width:0; gap:2px; }
.feedback-history-summary strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f5e69b; }
.feedback-history-summary small { color:#8fb9c1; font-size:.52rem; }
.feedback-history-summary>b { padding:3px 6px; border-radius:999px; color:#ffd98a; background:#9d6c2138; font-size:.48rem; white-space:nowrap; }
.feedback-history-item.answered .feedback-history-summary>b { color:#b8f7ce; background:#24794755; }
.feedback-history-summary>i { color:#9ed9e2; font-style:normal; font-size:.8rem; }
.feedback-history-detail { display:grid; gap:7px; padding-top:8px; border-top:1px solid #ffffff12; }
.feedback-history-detail>p { margin:0; color:#d8edf1; font-size:.62rem; line-height:1.45; white-space:pre-wrap; }
.feedback-awaiting-reply { padding:8px; border-radius:8px; color:#d9c787; background:#9d6c211f; font-size:.55rem; text-align:center; }
.feedback-history-files { display:flex; flex-wrap:wrap; gap:5px; }
.feedback-history-files a { padding:4px 7px; border-radius:7px; color:#bcebf3; background:#ffffff0c; font-size:.52rem; text-decoration:none; }
.feedback-history-item blockquote { margin:2px 0 0; padding:9px; border-left:3px solid #68d494; border-radius:0 9px 9px 0; color:#dff8e8; background:#1b68402c; }
.feedback-history-item blockquote strong { color:#8af0b0; font-size:.58rem; }
.feedback-history-item blockquote p { margin:4px 0; font-size:.62rem; white-space:pre-wrap; }
.feedback-history-item blockquote small { color:#87b89a; font-size:.5rem; }
@media(max-width:650px){.feedback-card{grid-template-columns:1fr}.feedback-card>header{grid-column:1}.feedback-history{min-height:0}.feedback-empty{min-height:100px}}

/* Gerçek oyun bileşenlerini kullanan etkileşimli Nasıl Oynanır rehberi. */
.how-to-backdrop { position:fixed; inset:0; z-index:13000; display:grid; place-items:center; padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); background:#001019ed; backdrop-filter:blur(8px); }
.how-to-card { width:min(96vw,850px); max-height:96dvh; overflow:auto; display:grid; gap:10px; padding:12px; border:2px solid #68c8d9; border-radius:22px; color:#edfaff; background:linear-gradient(145deg,#0a4761,#05283c 45%,#031a2a); box-shadow:0 24px 75px #000e,inset 0 1px #ffffff35,0 0 35px #46c6db35; }
.how-to-card>header { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; }
.how-to-brand { display:flex; align-items:center; gap:8px; }.how-to-brand b { display:grid; place-items:center; width:46px; height:34px; border:2px solid #ffdf66; border-radius:9px; color:#6f270c; background:linear-gradient(#fff7cb,#e5b238); font:950 1rem/1 Arial; box-shadow:0 4px 9px #0008; }.how-to-brand small { color:#ffe482; font-size:.56rem; font-weight:950; letter-spacing:.13em; }
.how-to-progress { padding:5px 9px; border:1px solid #8bdae466; border-radius:99px; color:#bfeaf0; background:#001a29aa; font-size:.55rem; font-weight:900; }.how-to-card>header>button { width:36px; height:36px; padding:0; border:2px solid #ffffff55; border-radius:8px; color:#fff; background:linear-gradient(#6f7d83,#303b42); box-shadow:0 4px 8px #0008; font-size:1.45rem; line-height:1; }
.how-to-game { position:relative; min-height:300px; overflow:hidden; display:grid; grid-template-rows:42px minmax(135px,1fr) 98px; border:2px solid #357d9b; border-radius:17px; background:linear-gradient(135deg,#087e9e,#075573 40%,#063b58); box-shadow:inset 0 0 40px #001822aa; user-select:none; -webkit-user-select:none; }
.tutorial-opponents { display:grid; grid-template-columns:repeat(3,1fr); align-items:center; gap:8px; padding:5px 12%; }.tutorial-opponents span { display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; padding:4px 8px; border:1px solid #78c5d458; border-radius:8px; color:#d8f2f6; background:#072b40d9; font-size:.48rem; }.tutorial-opponents i { font-style:normal; }
.tutorial-real-table { position:relative; margin:0 5%; border:2px solid #29718c; border-radius:10px; background:linear-gradient(#062b40de,#052438ec),linear-gradient(90deg,#ffffff09 1px,transparent 1px),linear-gradient(#ffffff09 1px,transparent 1px); background-size:auto,24px 24px,24px 24px; box-shadow:inset 0 0 35px #00131dcc; }
.tutorial-indicator { position:absolute; left:calc(50% - 88px); bottom:8px; display:grid; justify-items:center; gap:2px; }.tutorial-indicator small { color:#b9dce3; font-size:.42rem; }.tutorial-indicator b,.tutorial-game-tile { position:relative; display:grid; place-items:center; width:44px; height:58px; border:1px solid #d7d6ca; border-radius:4px; color:#c92727; background:linear-gradient(110deg,#fff,#e8e6dc); box-shadow:inset 2px 2px #fff,inset -4px -5px 3px #bcbab1,0 4px 3px #00182099; font:950 1.15rem/1 Arial; }
.tutorial-stock-real { position:absolute; left:50%; bottom:8px; width:62px; height:72px; margin:0; padding:4px; border:2px solid #6294a7; border-radius:10px; color:#f7df72; background:linear-gradient(#143e54,#082b42); }.tutorial-stock-real>span { position:absolute; inset:5px; border:1px solid #b8d7df45; border-radius:5px; background:repeating-linear-gradient(45deg,#163d50 0 4px,#0b2e40 4px 8px); }.tutorial-stock-real b,.tutorial-stock-real small { position:relative; z-index:1; display:block; }.tutorial-stock-real b { font-size:1rem; }.tutorial-stock-real small { color:#bddbe2; font-size:.38rem; }
.tutorial-discard-zone { position:absolute; right:3%; bottom:10px; display:grid; place-items:center; width:70px; height:64px; border:2px dashed #86d4de80; border-radius:10px; color:#c8ebef; background:#09354a88; }.tutorial-discard-zone small { font-size:.42rem; font-weight:900; }.tutorial-discard-zone b { font-size:1.4rem; }
.tutorial-open-101 { position:absolute; right:3%; bottom:18px; min-width:92px; padding:10px; border:2px solid #b9f17e; border-radius:11px; color:#102a09; background:linear-gradient(#9aef54,#419519); font-size:.62rem; font-weight:950; }
.tutorial-rack-real { position:relative; display:flex; align-items:center; justify-content:center; gap:4px; padding:8px 22px; background:linear-gradient(#f7c22e,#c88308 55%,#e6a719); box-shadow:inset 0 5px 9px #fff17055,inset 0 -7px 10px #75440077; }.tutorial-rack-line { position:absolute; left:2%; right:2%; top:50%; height:2px; background:#fff2a8; box-shadow:0 2px #7e4a08; }
.tutorial-game-tile { z-index:1; flex:0 0 44px; padding:0 0 9px; cursor:pointer; }.tutorial-game-tile::after { content:""; position:absolute; bottom:4px; width:11px; height:11px; border-radius:50%; background:currentColor; box-shadow:inset 2px 2px 3px #fff8,inset -2px -2px 3px #0005; }.tutorial-game-tile.red{color:#cf2525}.tutorial-game-tile.blue{color:#1875ca}.tutorial-game-tile.black{color:#19272b}.tutorial-game-tile.gold{color:#c69806}.tutorial-game-tile.okey{color:#d39e02}.tutorial-game-tile i{display:none}.tutorial-game-tile.selected{transform:translateY(-8px); outline:3px solid #6eff8a; box-shadow:0 0 16px #3cff77,inset 2px 2px #fff,inset -4px -5px 3px #bcbab1,0 4px 3px #00182099;}
.tutorial-focus { animation:tutorialFocus .8s ease-in-out infinite alternate; }.tutorial-success { position:absolute; top:8px; left:50%; transform:translateX(-50%); padding:6px 12px; border:1px solid #8affaf; border-radius:99px; color:#dfffe8; background:#176a36e8; box-shadow:0 0 15px #45ff7c88; font-size:.53rem; font-weight:900; white-space:nowrap; }.tutorial-action-hint { position:absolute; left:50%; bottom:103px; z-index:3; transform:translateX(-50%); display:flex; align-items:center; gap:6px; max-width:86%; padding:6px 11px; border:1px solid #ffe681; border-radius:99px; color:#fff6c9; background:#102b3ce8; box-shadow:0 5px 14px #0009; font-size:.5rem; white-space:nowrap; }.tutorial-action-hint span{font-size:.85rem}.tutorial-action-hint b{overflow:hidden;text-overflow:ellipsis;}
.how-to-copy { position:relative; display:grid; gap:3px; padding:10px 13px; border:1px solid #ffffff22; border-radius:13px; background:#061e2dc9; }.how-to-copy>small{color:#f1cc55;font-size:.48rem;font-weight:950;letter-spacing:.12em}.how-to-copy h2{margin:0;color:#fff2ad;font-size:1rem}.how-to-copy p{margin:2px 0;color:#c5e0e5;font-size:.62rem;line-height:1.45}.how-to-copy strong{color:#8ee0eb;font-size:.55rem}.how-to-dots{display:flex;justify-content:center;gap:5px}.how-to-dots i{width:16px;height:4px;border-radius:99px;background:#86c9d344}.how-to-dots i.active{width:28px;background:#f4d156;box-shadow:0 0 8px #f4d15688}.how-to-card>footer{display:grid;grid-template-columns:1fr 2fr;gap:8px}.how-to-card>footer button{min-height:42px;margin:0;font-weight:900}.how-to-card>footer button:disabled{opacity:.38}.how-to-card>footer .primary{background:linear-gradient(#8de94c,#3d9719);}
@keyframes tutorialFocus { from{box-shadow:0 0 0 2px #ffe46b55,0 0 8px #ffe46b66} to{box-shadow:0 0 0 5px #ffe46b99,0 0 22px #ffe46bdd} }
@media (orientation:landscape) and (max-height:600px){.how-to-card{width:min(97vw,960px);grid-template-columns:minmax(0,1.45fr) minmax(240px,.75fr);grid-template-rows:auto 1fr auto;gap:8px;padding:8px}.how-to-card>header{grid-column:1/-1}.how-to-game{grid-row:2/4;min-height:0;height:calc(100dvh - 82px)}.how-to-copy{align-self:start}.how-to-dots{align-self:end}.how-to-card>footer{grid-column:2}.tutorial-action-hint{bottom:101px}.tutorial-rack-real{padding-block:5px}}
@media (max-width:560px) and (orientation:portrait){.how-to-card{width:96vw;padding:9px}.how-to-game{min-height:285px}.tutorial-opponents{padding-inline:4%}.tutorial-real-table{margin-inline:3%}.tutorial-game-tile{width:39px;height:54px;flex-basis:39px}.tutorial-action-hint{max-width:94%;font-size:.46rem}.how-to-copy p{font-size:.58rem}}

/* Gerçek oyun motorunu kullanan etkileşimli eğitim. Balon masayı kapatmaz;
   yalnız o adımda kullanılacak gerçek kontrol vurgulanır. */
.tutorial-loading{position:fixed;inset:0;z-index:14000;display:grid;place-content:center;justify-items:center;gap:14px;color:#fff4b0;background:#00131ef2;font-weight:900}.tutorial-loading .network-spinner{width:42px;height:42px}
.live-tutorial-coach{position:fixed;left:50%;top:max(58px,calc(env(safe-area-inset-top) + 8px));z-index:12500;transform:translateX(-50%);width:min(620px,58vw);padding:11px 14px 12px;border:2px solid #ffe36b;border-radius:18px;color:#f1fbff;background:linear-gradient(145deg,#0a4057f7,#031d2df7);box-shadow:0 9px 26px #000c,0 0 18px #ffd83d66;pointer-events:auto}
.live-tutorial-coach::after{content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);border:7px solid transparent;border-top-color:#ffe36b;filter:drop-shadow(0 3px 2px #0008)}
.live-tutorial-coach header{display:flex;align-items:center;gap:8px;color:#ffd958;font-size:.68rem}.live-tutorial-coach header span{margin-left:auto;padding:3px 8px;border:1px solid #6fb4c4;border-radius:99px}.live-tutorial-coach header button{width:28px;height:28px;padding:0;border:1px solid #a9c7ce;border-radius:8px;color:white;background:#6e2323;font-size:1.1rem;font-weight:900}.live-tutorial-coach>strong{display:block;margin-top:4px;color:#fff2a0;font-size:.92rem}.live-tutorial-coach>p{margin:4px 0 0;color:#d4edf2;font-size:.70rem;line-height:1.4}.tutorial-next-live{position:absolute;right:-118px;top:50%;transform:translateY(-50%);min-width:106px;padding:9px;border:2px solid #dfff92;border-radius:12px;color:#123506;background:linear-gradient(#a7ed5d,#58a727);font-size:.68rem;font-weight:950;box-shadow:0 0 15px #70ff4780}
.tutorial-direct-exit{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:12600;display:flex;align-items:center;gap:6px;min-height:36px;padding:5px 11px 5px 6px;border:2px solid #ffaaa3;border-radius:11px;color:#fff;background:linear-gradient(#d94c4c,#8e2026);box-shadow:0 6px 18px #000a,0 0 12px #ff4f4f55;font-size:.54rem;font-weight:950}.tutorial-direct-exit span{display:grid;place-items:center;width:24px;height:24px;border:1px solid #ffd2ce88;border-radius:7px;background:#64161b;font-size:1.1rem;line-height:1}.tutorial-direct-exit b{white-space:nowrap}.tutorial-direct-exit:active{transform:scale(.96)}
.live-tutorial.tutorial-step-0 .rack-board,.live-tutorial.tutorial-step-1 .discard-corner-slot.seat-self,.live-tutorial.tutorial-step-2 .stock-pile,.live-tutorial.tutorial-step-3 .discard-corner-slot.seat-self,.live-tutorial.tutorial-step-4 .rack-left-tools button:first-child,.live-tutorial.tutorial-step-5 .rack-left-tools button:nth-child(2),.live-tutorial.tutorial-step-6 .discard-corner-slot.seat-bottom-left,.live-tutorial.tutorial-step-7 .open-101-orb,.live-tutorial.tutorial-step-8 .pair-open-action,.live-tutorial.tutorial-step-9 .meld-area,.live-tutorial.tutorial-step-10 .meld-area,.live-tutorial.tutorial-step-11 .meld-area{animation:liveTutorialTarget .72s ease-in-out infinite alternate}
.live-tutorial.tutorial-step-0 .live-tutorial-coach,.live-tutorial.tutorial-step-4 .live-tutorial-coach,.live-tutorial.tutorial-step-5 .live-tutorial-coach{top:auto;bottom:155px}
.live-tutorial.tutorial-step-1 .live-tutorial-coach,.live-tutorial.tutorial-step-3 .live-tutorial-coach{left:50%;right:auto;top:max(62px,calc(env(safe-area-inset-top) + 8px));bottom:auto;transform:translateX(-50%);width:min(560px,54vw)}
.live-tutorial.tutorial-step-2 .live-tutorial-coach{top:42%;width:min(460px,48vw)}
.live-tutorial.tutorial-step-6 .live-tutorial-coach{left:115px;top:31%;transform:none;width:min(430px,46vw)}
.live-tutorial.tutorial-step-7 .live-tutorial-coach,.live-tutorial.tutorial-step-8 .live-tutorial-coach{left:auto;right:105px;top:auto;bottom:125px;transform:none;width:min(430px,46vw)}
.live-tutorial.tutorial-step-9 .live-tutorial-coach,.live-tutorial.tutorial-step-10 .live-tutorial-coach,.live-tutorial.tutorial-step-11 .live-tutorial-coach{top:72px}
@keyframes liveTutorialTarget{from{filter:brightness(1);box-shadow:0 0 0 2px #ffe05566}to{filter:brightness(1.18);box-shadow:0 0 0 5px #ffe055cc,0 0 25px #ffcf32}}
.live-tutorial-dimmer{position:fixed;inset:0;z-index:10400;background:#00101872;pointer-events:none}
.live-tutorial.tutorial-step-0 .rack-board,.live-tutorial.tutorial-step-1 .discard-corner-slot.seat-self,.live-tutorial.tutorial-step-2 .stock-pile,.live-tutorial.tutorial-step-3 .discard-corner-slot.seat-self,.live-tutorial.tutorial-step-4 .rack-left-tools button:first-child,.live-tutorial.tutorial-step-5 .rack-left-tools button:nth-child(2),.live-tutorial.tutorial-step-6 .discard-corner-slot.seat-bottom-left,.live-tutorial.tutorial-step-7 .open-101-orb,.live-tutorial.tutorial-step-8 .pair-open-action,.live-tutorial.tutorial-step-9 .meld-area,.live-tutorial.tutorial-step-10 .meld-area,.live-tutorial.tutorial-step-11 .meld-area,.live-tutorial.tutorial-step-12 .game-menu-trigger,.live-tutorial.tutorial-step-13 .rack-board{z-index:11200!important;isolation:isolate;filter:none!important}
/* Eğitim vurgusu köşe alanlarının absolute yerleşimini değiştirmemeli.
   Aksi halde boş sağ atma alanı normal akışa girip sol sütunda görünür. */
.live-tutorial.tutorial-step-1 .discard-corner-slot.seat-self,
.live-tutorial.tutorial-step-3 .discard-corner-slot.seat-self,
.live-tutorial .discard-corner-slot.seat-self.tutorial-active-target {
    position:absolute !important;
    left:auto !important;
    right:calc(max(var(--discard-shell-padding, 1rem), var(--safe-side)) + (var(--discard-side-column, 145px) - 62px) / 2) !important;
    bottom:var(--lower-discard-offset, 177px) !important;
}
.live-tutorial-coach{display:grid;grid-template-columns:145px minmax(0,1fr);align-items:end;gap:6px;width:min(760px,72vw);padding:0;border:0;background:transparent;box-shadow:none}
.live-tutorial-coach::after{display:none}.tutorial-coach-avatar{align-self:end;width:145px;height:218px;object-fit:contain;object-position:center bottom;border:0;border-radius:0;background:transparent;filter:drop-shadow(0 10px 8px #000b);box-shadow:none}
.tutorial-speech-copy{position:relative;padding:12px 15px;border:3px solid #e8e8e8;border-radius:17px;color:#172027;background:linear-gradient(145deg,#fff,#d8d8d8);box-shadow:0 9px 22px #000c,inset 0 1px #fff}.tutorial-speech-copy::before{content:"";position:absolute;left:-18px;bottom:24px;border:9px solid transparent;border-right-color:#e8e8e8}
.live-tutorial-coach header{color:#9a1d1d}.live-tutorial-coach header span{border-color:#6f7c82;color:#30464e}.tutorial-speech-copy>strong{display:block;margin-top:5px;color:#173c4b;font-size:.92rem}.tutorial-speech-copy>p{margin:5px 0 0;color:#172027;font-size:.72rem;font-weight:750;line-height:1.38}.tutorial-speech-copy .tutorial-next-live{right:-116px}.tutorial-next-live:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.58;box-shadow:none}
.tutorial-hand-pointer{position:fixed;z-index:12400;display:grid;place-items:center;width:82px;height:96px;color:#fff;filter:drop-shadow(0 8px 5px #000c) drop-shadow(0 0 3px #fff8c0);animation:tutorialHandTap 1.05s ease-in-out infinite;pointer-events:none;transform-origin:50% 85%}
.tutorial-hand-pointer::before{display:none}
.tutorial-hand-pointer::after{content:"DOKUN";position:absolute;left:50%;top:91px;transform:translateX(-50%);padding:3px 8px;border:1px solid #fff0a7;border-radius:99px;color:#fff8c7;background:#062a3eea;box-shadow:0 3px 9px #000a;font-size:.46rem;font-weight:950;letter-spacing:.08em;white-space:nowrap}
.tutorial-hand-icon{display:block;font-family:"Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:4.9rem;line-height:1;filter:grayscale(.06) brightness(1.12) drop-shadow(0 4px 2px #001b2dcc)}
.tutorial-hand-direction{display:none;position:absolute;top:50%;width:34px;height:4px;border-radius:99px;background:#fff4a8;box-shadow:0 2px 5px #0008}
.tutorial-hand-direction::after{content:"";position:absolute;top:50%;width:12px;height:12px;border-top:4px solid #fff4a8;border-right:4px solid #fff4a8}
.tutorial-step-0 .tutorial-hand-pointer{left:48%;bottom:16%;animation-name:tutorialHandRackDrag}.tutorial-step-0 .tutorial-hand-pointer::after{content:"SÜRÜKLE"}.tutorial-step-1 .tutorial-hand-pointer,.tutorial-step-3 .tutorial-hand-pointer{right:6%;bottom:20%;animation-name:tutorialHandDiscardDrag}.tutorial-step-1 .tutorial-hand-pointer::after,.tutorial-step-3 .tutorial-hand-pointer::after{content:"SÜRÜKLE"}.tutorial-step-1 .tutorial-hand-direction,.tutorial-step-3 .tutorial-hand-direction{display:block;right:-30px;transform:translateY(-50%)}.tutorial-step-1 .tutorial-hand-direction::after,.tutorial-step-3 .tutorial-hand-direction::after{right:-1px;transform:translateY(-50%) rotate(45deg)}.tutorial-step-2 .tutorial-hand-pointer{left:52%;bottom:27%}.tutorial-step-4 .tutorial-hand-pointer{left:8%;bottom:26%}.tutorial-step-5 .tutorial-hand-pointer{left:8%;bottom:17%}.tutorial-step-6 .tutorial-hand-pointer{left:5%;bottom:35%;animation-name:tutorialHandSideDraw}.tutorial-step-6 .tutorial-hand-pointer::after{content:"SÜRÜKLE"}.tutorial-step-6 .tutorial-hand-direction{display:block;left:-30px;transform:translateY(-50%)}.tutorial-step-6 .tutorial-hand-direction::after{left:-1px;transform:translateY(-50%) rotate(-135deg)}.tutorial-step-7 .tutorial-hand-pointer,.tutorial-step-8 .tutorial-hand-pointer{right:5%;bottom:24%}.tutorial-step-9 .tutorial-hand-pointer,.tutorial-step-10 .tutorial-hand-pointer,.tutorial-step-11 .tutorial-hand-pointer{left:51%;top:29%;animation-name:tutorialHandMeldDrag}.tutorial-step-9 .tutorial-hand-pointer::after,.tutorial-step-10 .tutorial-hand-pointer::after,.tutorial-step-11 .tutorial-hand-pointer::after{content:"SÜRÜKLE"}.tutorial-step-12 .tutorial-hand-pointer{left:4%;bottom:8%}.tutorial-step-13 .tutorial-hand-pointer{left:50%;bottom:17%}
@keyframes tutorialHandTap{0%,100%{translate:0 0;scale:.94}42%{translate:0 7px;scale:.88}58%{translate:0 7px;scale:.88}75%{translate:0 0;scale:1.04}}
@keyframes tutorialHandRackDrag{0%,15%{translate:-95px 0;scale:.96}34%{translate:-95px 7px;scale:.88}76%{translate:65px 7px;scale:.9}88%,100%{translate:65px 0;scale:1}}
@keyframes tutorialHandDiscardDrag{0%,14%{translate:-190px 82px;scale:.96}32%{translate:-190px 88px;scale:.88}78%{translate:0 0;scale:.9}90%,100%{translate:0 0;scale:1}}
@keyframes tutorialHandSideDraw{0%,14%{translate:0 0;scale:.96}32%{translate:0 7px;scale:.88}78%{translate:190px 95px;scale:.9}90%,100%{translate:190px 95px;scale:1}}
@keyframes tutorialHandMeldDrag{0%,14%{translate:130px 185px;scale:.96}32%{translate:130px 191px;scale:.88}78%{translate:0 0;scale:.9}90%,100%{translate:0 0;scale:1}}
/* Bilgi balonu öğretilen kontrolü örtmez: alt kontrollerde üstte, masa işlemlerinde altta durur. */
.live-tutorial.tutorial-step-0 .live-tutorial-coach,
.live-tutorial.tutorial-step-1 .live-tutorial-coach,
.live-tutorial.tutorial-step-2 .live-tutorial-coach,
.live-tutorial.tutorial-step-3 .live-tutorial-coach,
.live-tutorial.tutorial-step-4 .live-tutorial-coach,
.live-tutorial.tutorial-step-5 .live-tutorial-coach,
.live-tutorial.tutorial-step-6 .live-tutorial-coach,
.live-tutorial.tutorial-step-7 .live-tutorial-coach,
.live-tutorial.tutorial-step-8 .live-tutorial-coach,
.live-tutorial.tutorial-step-12 .live-tutorial-coach,
.live-tutorial.tutorial-step-13 .live-tutorial-coach{left:50%;right:auto;top:max(58px,calc(env(safe-area-inset-top) + 8px));bottom:auto;transform:translateX(-50%);width:min(650px,62vw)}
.live-tutorial.tutorial-step-9 .live-tutorial-coach,
.live-tutorial.tutorial-step-10 .live-tutorial-coach,
.live-tutorial.tutorial-step-11 .live-tutorial-coach{left:50%;right:auto;top:auto;bottom:12px;transform:translateX(-50%);width:min(650px,62vw)}
@media (orientation:portrait){.live-tutorial-coach,.live-tutorial[class*="tutorial-step-"] .live-tutorial-coach{left:50%;right:auto;top:max(70px,env(safe-area-inset-top));bottom:auto;transform:translateX(-50%);width:94vw;grid-template-columns:82px minmax(0,1fr)}.tutorial-coach-avatar{width:82px;height:128px}.tutorial-next-live{position:static;transform:none;display:block;width:100%;margin-top:8px}.tutorial-speech-copy>p{font-size:.76rem}.tutorial-direct-exit{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right))}}

/* Eğitim eli artık gerçek kaynak/hedef koordinatlarını rack.js'den alır. Eski
   sabit piksel hareketleri farklı telefonlarda eli ekran dışına taşıyordu. */
.tutorial-hand-pointer[data-motion="tap"] {
    animation: tutorialHandTargetTap .95s ease-in-out infinite !important;
}
.tutorial-hand-pointer[data-motion="drag"] {
    animation: tutorialHandTargetDrag 1.45s ease-in-out infinite !important;
}
.live-tutorial .rack-tile.tutorial-recommended-discard {
    position: relative;
    z-index: 12320 !important;
    animation: tutorialDiscardTilePulse .52s ease-in-out infinite alternate !important;
    outline: 3px solid #ffef5b;
    outline-offset: 2px;
}
.live-tutorial .tutorial-active-target {
    z-index: 11220 !important;
    animation: tutorialDiscardZonePulse .58s ease-in-out infinite alternate !important;
}
@keyframes tutorialDiscardTilePulse {
    from { transform:translateY(0) scale(1); filter:brightness(1); box-shadow:0 0 0 2px #ffdc3c99,0 0 10px #ffbf00aa; }
    to { transform:translateY(-5px) scale(1.06); filter:brightness(1.22); box-shadow:0 0 0 4px #fff17ddd,0 0 25px #ffcb24; }
}
@keyframes tutorialDiscardZonePulse {
    from { box-shadow:inset 0 0 0 2px #61ff8c99,0 0 8px #39ed78aa; }
    to { box-shadow:inset 0 0 0 4px #aaffbddd,0 0 24px #39ff78; }
}
.tutorial-hand-pointer .tutorial-hand-direction { display:none !important; }
@keyframes tutorialHandTargetTap {
    0%,100% { translate:0 0; scale:.96; }
    42%,60% { translate:0 8px; scale:.88; }
    78% { translate:0 0; scale:1.03; }
}
@keyframes tutorialHandTargetDrag {
    0%,16% { translate:var(--tutorial-from-x,0) var(--tutorial-from-y,0); scale:.96; }
    30% { translate:var(--tutorial-from-x,0) calc(var(--tutorial-from-y,0) + 7px); scale:.88; }
    76% { translate:0 7px; scale:.90; }
    88%,100% { translate:0 0; scale:1; }
}
@media (orientation:landscape) {
    .live-tutorial-coach {
        grid-template-columns:108px minmax(0,1fr);
        width:min(540px,52vw) !important;
    }
    .tutorial-coach-avatar {
        width:108px;
        height:170px;
        mix-blend-mode:normal;
    }
    .tutorial-speech-copy { padding:10px 12px; }
    .tutorial-speech-copy>p { font-size:.66rem; line-height:1.32; }
    /* Açıklama kartı üstte dar tutulur; ıstaka, hedef taş ve sağ atma
       alanının üzerine taşmaz. Konumun sağ/sol tarafını rack.js seçer. */
    .live-tutorial-coach { max-height:42vh; }
}

/* === Rehber sunumu: koç masanın kenarında ayakta durur, açıklama onun
   ağzından çıkan bir konuşma balonunda görünür. === */
.live-tutorial-dimmer { background:#00101840; }
/* Koç kutusu ekranın tamamı kadar uzar: karakter zemine oturur, balon ise
   tepeye sabitlenir. Böylece balon ıstakanın, destenin ve atma alanının
   üzerine binmez; oyuncu anlatılan hamleyi hep görür. */
.live-tutorial-coach { align-items:stretch; }
/* Kutu artık ekran boyunca uzadığı için tıklamaları yutmamalı. Yalnızca
   balonun kendisi tıklanabilir kalır; masanın tamamı altından erişilebilir
   olur (taş sürükleme, ortadan çekme, yandan alma, yana atma). */
.live-tutorial-coach { pointer-events:none; }
.tutorial-coach-avatar { pointer-events:none; }
.tutorial-speech-copy { align-self:start; pointer-events:auto; }
/* Tam boy görsel yerine göğüs planı gösterilir; yüz büyük ve okunur olur. */
.tutorial-coach-avatar { align-self:end; object-fit:cover; object-position:50% 0%; filter:drop-shadow(0 12px 10px #000c); }
.live-tutorial-coach.coach-right .tutorial-coach-avatar { order:2; transform:scaleX(-1); }
.tutorial-speech-copy { padding:13px 16px; border:0; border-radius:22px; background:linear-gradient(150deg,#fff,#e7edf1); box-shadow:0 13px 32px #000d,inset 0 2px #fff; }
/* Balon yukarıda, koç aşağıda durduğu için kuyruk aşağı doğru bakar. */
.tutorial-speech-copy::before { left:26px; right:auto; top:auto; bottom:-15px; border-width:11px; border-style:solid; border-color:#e7edf1 transparent transparent transparent; }
.live-tutorial-coach.coach-right .tutorial-speech-copy::before { left:auto; right:26px; }
/* Anlatılan hedef ekranın üst yarısındaysa (masaya taş işleme, ortadan çekme)
   balon aşağı iner; aksi halde oyuncunun yapacağı hamlenin üstünü kapatıyor.
   Bu durumda kuyruk yana, koça doğru bakar. */
.live-tutorial-coach.bubble-bottom .tutorial-speech-copy { align-self:end; }
.live-tutorial-coach.bubble-bottom .tutorial-speech-copy::before { left:-15px; right:auto; top:auto; bottom:26px; border-color:transparent #e7edf1 transparent transparent; }
.live-tutorial-coach.bubble-bottom.coach-right .tutorial-speech-copy::before { left:auto; right:-15px; border-color:transparent transparent transparent #e7edf1; }
.tutorial-speech-copy > strong { display:block; margin:0; color:#123745; font-size:1rem; font-weight:900; }
.tutorial-speech-copy > p { margin:6px 0 0; color:#1c2933; font-size:.8rem; font-weight:700; line-height:1.45; }
.tutorial-key { color:#c62828; font-style:normal; font-weight:900; }
.tutorial-speech-copy > footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.tutorial-step-count { flex:none; padding:3px 9px; border:1px solid #b6c4ca; border-radius:99px; color:#46606b; font-size:.58rem; font-weight:800; }
.tutorial-speech-copy .tutorial-next-live { position:static; right:auto; top:auto; transform:none; min-width:116px; padding:9px 14px; }
/* Emoji yerine çizilmiş eldiven: referans oyunlardaki gibi belirgin ve
   hedefin üstünde dokunuş dalgasıyla birlikte durur. */
/* Parçalar konturzuz çizilir; tek siluet olarak birleşsinler diye dış çizgi
   drop-shadow ile veriliyor. Aksi halde parçaların birleşme yerlerinde
   iç çizgiler kalıyor ve el dağınık görünüyor. */
.tutorial-hand-icon { display:block; width:100%; height:100%; filter:drop-shadow(0 0 1.4px #16252d) drop-shadow(0 0 1.4px #16252d) drop-shadow(0 7px 5px #000b); }
.tutorial-hand-shape path { fill:#fcfdfd; stroke:none; }
.tutorial-hand-lines path { fill:none; stroke:#c2ced5; stroke-width:2.2; stroke-linecap:round; }
/* Halka parmak ucunun hizasında durur: işaret parmağı kutunun %35'inde. */
.tutorial-hand-ring { position:absolute; left:35%; top:9%; width:52px; height:52px; margin:-26px 0 0 -26px; border:3px solid #ffe973; border-radius:50%; box-shadow:0 0 14px #ffd54a88; animation:tutorialHandRipple 1.05s ease-out infinite; pointer-events:none; }
@keyframes tutorialHandRipple { 0% { scale:.28; opacity:.9; } 70% { opacity:.2; } 100% { scale:1.55; opacity:0; } }
/* Hedefin çevresindeki halka referanstaki gibi net görünür. */
@keyframes liveTutorialTarget {
    from { filter:brightness(1.05); box-shadow:0 0 0 3px #fff3a0cc,0 0 13px #ffcf32aa; }
    to { filter:brightness(1.3); box-shadow:0 0 0 6px #fffbe0,0 0 34px #ffc61e; }
}
@media (orientation:landscape) {
    /* Referanstaki gibi koç ekranın neredeyse tamamı kadar uzun durur ve
       kalçadan kırpılır. Kutu genişliği yüksekliğin ~0.8'i olduğu için
       object-fit:cover görselin üst %60'ını gösterir: yüz büyük kalır. */
    .live-tutorial-coach { grid-template-columns:min(320px,27vw) minmax(0,1fr); width:min(830px,74vw)!important; max-height:none; }
    .live-tutorial-coach.coach-right { grid-template-columns:minmax(0,1fr) min(320px,27vw); }
    .tutorial-coach-avatar { width:min(320px,27vw); height:min(390px,74vh); }
    .tutorial-speech-copy { padding:13px 16px; }
    .tutorial-speech-copy > strong { font-size:.92rem; }
    .tutorial-speech-copy > p { font-size:.72rem; line-height:1.42; }
}
@media (orientation:portrait) {
    .live-tutorial-coach, .live-tutorial[class*="tutorial-step-"] .live-tutorial-coach { grid-template-columns:112px minmax(0,1fr); }
    .live-tutorial-coach.coach-right, .live-tutorial[class*="tutorial-step-"] .live-tutorial-coach.coach-right { grid-template-columns:minmax(0,1fr) 112px; }
    .tutorial-coach-avatar { width:112px; height:168px; }
    .tutorial-speech-copy > p { font-size:.78rem; }
    .tutorial-speech-copy > footer { margin-top:9px; }
    .tutorial-speech-copy .tutorial-next-live { width:auto; margin-top:0; }
}

.ranked-game-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 8px 0; }
.ranked-game-options label { margin: 0; color: #a9d6de; font-size: .5rem; }
.ranked-game-options select { width: 100%; margin-top: 3px; padding: 7px 6px; font-size: .56rem; }
.ranked-lobby-picker { margin: 8px 0 11px; padding: 10px; overflow: hidden; border: 1px solid #71cad955; border-radius: 16px; background: linear-gradient(145deg, #062c3de8, #02151fe8); box-shadow: inset 0 1px #ffffff12, 0 10px 28px #0005; }
.ranked-lobby-picker > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.ranked-lobby-picker > header div { display: grid; gap: 1px; }
.ranked-lobby-picker > header strong { color: #fff0a5; font-size: .78rem; }
.ranked-lobby-picker > header small { color: #82bdc8; font-size: .48rem; }
.ranked-lobby-picker > header > b { padding: 6px 9px; border: 1px solid #f0d06066; border-radius: 10px; color: #ffe36d; background: #001722aa; font-size: .58rem; white-space: nowrap; }
.ad-reward-button { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 11px; padding: 14px 15px; border: 2px solid #ffd35c; border-radius: 16px; background: linear-gradient(135deg, #1c7a4d, #0d4d33 55%, #0a3a28); color: inherit; text-align: left; cursor: pointer; box-shadow: 0 0 0 1px #00000055, 0 8px 22px #00000066, inset 0 1px #ffffff22; animation: adRewardPulse 2.4s ease-in-out infinite; }
.ad-reward-button:disabled { opacity: .55; cursor: default; animation: none; border-color: #7fe0a055; }
.ad-reward-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #00000038; font-size: 1.5rem; }
.ad-reward-text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.ad-reward-text b { color: #fff3c4; font-size: .96rem; letter-spacing: .2px; }
.ad-reward-text small { color: #b9e6cf; font-size: .62rem; }
.ad-reward-go { flex: none; padding: 8px 13px; border-radius: 10px; background: linear-gradient(180deg, #ffdf7a, #f0b93c); color: #3a2503; font-size: .68rem; font-weight: 800; letter-spacing: .6px; }
.ad-reward-button:disabled .ad-reward-go { background: #ffffff1f; color: #cfe9dd; }
@keyframes adRewardPulse {
    0%, 100% { box-shadow: 0 0 0 1px #00000055, 0 8px 22px #00000066, inset 0 1px #ffffff22; }
    50% { box-shadow: 0 0 0 1px #00000055, 0 8px 26px #000000aa, 0 0 18px #ffd35c66, inset 0 1px #ffffff22; }
}
@media (prefers-reduced-motion: reduce) { .ad-reward-button { animation: none; } }
.ranked-lobby-track { display: flex; gap: 10px; overflow-x: auto; overflow-y: visible; padding: 3px 4% 8px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; }
.ranked-lobby-card { touch-action: pan-x pan-y; }
.ranked-lobby-track::-webkit-scrollbar { display: none; }
.ranked-lobby-card { position: relative; isolation: isolate; flex: 0 0 92%; min-height: 210px; overflow: hidden; display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr auto; align-items: center; gap: 8px 14px; padding: 16px; scroll-snap-align: center; border: 2px solid var(--lobby-accent, #87d9df); border-radius: 22px; color: #effcff; text-align: left; background:#071d2b; box-shadow: 0 14px 28px #0008, inset 0 1px #ffffff33; }
.ranked-lobby-background { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:left center; opacity:.82; pointer-events:none; }
.ranked-lobby-card::before { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; background:linear-gradient(90deg,#02131e17 0%,#02131e70 55%,#020d15d6 100%); pointer-events:none; }
.ranked-lobby-card > :not(.ranked-lobby-background) { z-index:2; }
.ranked-lobby-level { position: absolute; top: 12px; right: 13px; padding: 4px 7px; border: 1px solid #ffffff35; border-radius: 999px; color: #dffcff; background: #00152188; font: 800 .46rem/1 Arial; letter-spacing: .08em; }
.ranked-lobby-art { grid-row: 1 / 3; display: grid; place-items: center; width: 92px; height: 92px; border: 2px solid color-mix(in srgb, var(--lobby-accent, #ffe36e) 75%, white); border-radius: 28px; background: #03121dc4; box-shadow: 0 9px 20px #0008, 0 0 26px color-mix(in srgb, var(--lobby-accent, #ffe36e) 35%, transparent); font-size: 3.1rem; transform: rotate(-3deg); backdrop-filter: blur(4px); }
.ranked-lobby-copy { display: grid; align-self: end; gap: 5px; padding-top: 20px; }
.ranked-lobby-copy strong { color: #fff0a3; font: 900 1.08rem/1.05 Arial, sans-serif; text-shadow: 0 2px 6px #000b; }
.ranked-lobby-copy small { max-width: 280px; color: #d0e8ed; font-size: .57rem; line-height: 1.4; }
.ranked-lobby-range { align-self: start; color: #a9dce3; font-size: .53rem; font-weight: 700; }
.ranked-lobby-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; border-top: 1px solid #ffffff2b; }
.ranked-lobby-footer b { color: #85f0bd; font-size: .62rem; }
.ranked-lobby-footer em { padding: 7px 11px; border-radius: 10px; color: #13200b; background: linear-gradient(#ffe674, #d9a928); box-shadow: 0 3px 8px #0007; font-size: .58rem; font-style: normal; font-weight: 900; }
.ranked-lobby-card.selected { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lobby-accent, #ffe36e) 38%, transparent), 0 14px 30px #0009; }
/* Kilitli lobi kartinin sag ortasindaki iri kilit. Daha once kilit yalniz
   kartin altindaki kucuk "Kilitli" yazisinda vardi; kartlar yana kaydirilarak
   gezildigi icin oyuncu hangisinin kapali oldugunu bir bakista goremiyordu. */
.lobby-lock-badge {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 2px solid #ffffff42;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #0c2a3ae8, #02101af2);
    box-shadow: 0 10px 24px #000b, inset 0 1px #ffffff30;
    font-size: 2rem;
    line-height: 1;
    /* Kart kilitliyken soluklastiriliyor; kilidin kendisi okunur kalsin. */
    filter: saturate(1.9) brightness(1.15);
    pointer-events: none;
}

.ranked-lobby-card.locked { opacity: .78; filter: saturate(.55); }
.ranked-lobby-card.locked .ranked-lobby-footer em { color: #c4d2d5; background: #263d47; }
.ranked-swipe-dots { display: flex; justify-content: center; gap: 5px; margin: 1px 0 5px; }
.ranked-swipe-dots button { width:18px; height:4px; min-height:0; padding:0; border:0; border-radius:99px; background:#75c6d255; transition:width .2s ease,background .2s ease; }
.ranked-swipe-dots button.active { width:27px; background:#f0d45f; box-shadow:0 0 8px #f0d45f66; }
.ranked-lobby-picker > p { margin: 7px 0 0; color: #9dc5cd; font-size: .48rem; line-height: 1.45; text-align: center; }
.ranked-lobby-picker > p b { color: #f3d66a; }
.ranked-lobby-create { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 13px; padding:10px 12px; border:1px solid #f0d06066; border-radius:14px; background:linear-gradient(135deg,#073348,#041e2d); box-shadow:0 8px 20px #0005; }
.ranked-lobby-create > div { display:grid; gap:2px; }
.ranked-lobby-create small { color:#8fc4cf; font-size:.5rem; }
.ranked-lobby-create strong { color:#fff0a5; font-size:.72rem; }
.ranked-lobby-create > button { min-width:112px; margin:0; padding:10px 14px; font-weight:900; }

.entered-ranked-lobby { position:relative; isolation:isolate; min-height:285px; overflow:hidden; display:grid; align-content:space-between; gap:18px; margin:8px 0 10px; padding:16px; border:2px solid var(--lobby-accent,#87d9df); border-radius:22px; color:#fff; background:#071d2b; box-shadow:0 15px 34px #0009; }
.entered-ranked-lobby > img { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; object-position:left center; }
.entered-ranked-lobby-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,#00121b20,#00121b9c 58%,#00121be8); }
.entered-ranked-lobby > header { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; }
.entered-ranked-lobby > header div { display:grid; }
.entered-ranked-lobby > header small { color:#9ce7e3; font-size:.5rem; font-weight:900; }
.entered-ranked-lobby > header strong { color:#fff0a3; font-size:1rem; }
.entered-ranked-lobby > header > b { padding:6px 8px; border:1px solid #f0d06066; border-radius:10px; color:#ffe36d; background:#001722bb; font-size:.58rem; }
.entered-lobby-status-corner { display:grid; justify-items:end; gap:5px; }
.entered-lobby-status-corner > b { padding:4px 8px; border:1px solid #f0d06066; border-radius:9px; color:#ffe36d; background:#001722bb; font-size:.54rem; }
.entered-ranked-lobby-copy { display:flex; align-items:center; gap:12px; max-width:72%; }
.entered-ranked-lobby-copy > span { display:grid; place-items:center; width:64px; height:64px; flex:0 0 64px; border:2px solid var(--lobby-accent,#87d9df); border-radius:20px; background:#001722bb; font-size:2rem; }
.entered-ranked-lobby-copy p { margin:0; color:#e0f2f4; font-size:.68rem; line-height:1.45; text-shadow:0 2px 5px #000; }
.entered-ranked-lobby-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid #ffffff36; }
.entered-ranked-lobby-actions > div { display:grid; }
.entered-ranked-lobby-actions small { color:#a9d2d8; font-size:.5rem; }
.entered-ranked-lobby-actions strong { color:#85f0bd; font-size:.72rem; }
.lobby-payout-note { margin:9px 0 0; color:#b7d9df; font-size:.55rem; line-height:1.5; text-align:left; }
.entered-ranked-lobby-buttons { display:flex; gap:7px; }
.entered-ranked-lobby-buttons button { min-height:38px; margin:0; padding:8px 12px; font-size:.64rem; font-weight:900; }
.entered-ranked-lobby-buttons .quick-play { border:1px solid #ffe272; color:#201a04; background:linear-gradient(#ffe77d,#dcae2d); }
.entered-lobby-bottom-back { width:100%; min-height:46px; display:flex; align-items:center; justify-content:center; gap:9px; margin:0 0 12px; padding:10px 14px; border:2px solid #ffe477; border-radius:14px; color:#18220b; background:linear-gradient(180deg,#ffe982,#d9aa29); box-shadow:inset 0 1px #fff9bd,0 6px 15px #0007; font-size:.72rem; font-weight:950; }
.entered-lobby-bottom-back > span:first-child { font-size:1.15rem; line-height:1; }
.entered-lobby-bottom-back:active { transform:translateY(1px) scale(.995); }
.ranked-open-tables { margin:0 0 10px; padding:11px; border:1px solid #6bc7d14d; border-radius:14px; background:#052b3a99; }
.ranked-open-tables header { display:grid; gap:2px; }
.ranked-open-tables header strong { color:#eafcff; font-size:.73rem; }
.ranked-open-tables header small,.ranked-open-tables p { color:#9fc8cf; font-size:.54rem; }
.ranked-open-tables p { margin:9px 0 0; padding:9px; border-radius:9px; background:#00172277; line-height:1.45; }

.create-table-backdrop { position:fixed; inset:0; z-index:12050; display:grid; place-items:center; box-sizing:border-box; padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background:#00131ee8; backdrop-filter:blur(7px); }
.create-table-card { width:min(92vw,430px); max-height:86vh; display:grid; gap:11px; align-content:start; overflow-y:auto; padding:18px; border:2px solid #efd268; border-radius:22px; color:#effcff; background:linear-gradient(155deg,#0b4255,#052839 58%,#031b29); box-shadow:0 24px 70px #000d,inset 0 1px #ffffff24; }
.create-table-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.create-table-card header > div { display:grid; gap:3px; }
.create-table-card header small { color:#83ddd9; font-size:.52rem; font-weight:900; letter-spacing:.12em; }
.create-table-card header strong { color:#ffe477; font-size:1.15rem; }
.create-table-card header button { width:31px; height:31px; padding:0; border:0; border-radius:50%; color:#fff; background:#ffffff18; font-size:1.25rem; }
.create-table-card > p { margin:0; color:#b7d9df; font-size:.65rem; line-height:1.45; }
.create-table-card label { display:grid; gap:5px; margin:0; color:#d9eff2; font-size:.62rem; font-weight:800; }
.create-table-card select { width:100%; margin:0; padding:11px 10px; border:1px solid #71becd55; border-radius:11px; color:#fff; background:#05291f; font-size:.72rem; }
.create-table-card input { width:100%; margin:0; padding:11px 10px; border:1px solid #71becd55; border-radius:11px; color:#fff; background:#05291f; font-size:.72rem; }
.nearby-table-name-hint { margin:-6px 0 0; color:#8fc6cf; font-size:.55rem; line-height:1.4; }
.nearby-howto {
    display: grid;
    gap: .45rem;
    padding: .7rem .8rem;
    border: 1px solid #71e4e559;
    border-radius: 14px;
    text-align: left;
    background: #04222fb8;
}
.nearby-howto strong { color: #7df5ed; font-size: .72rem; letter-spacing: .04em; }
.nearby-howto p { margin: 0; color: #cfe9ee; font-size: .63rem; line-height: 1.5; }
.nearby-howto b { color: #ffe477; font-weight: 800; }
.nearby-howto ol { margin: 0; padding-left: 1.05rem; display: grid; gap: .32rem; color: #cfe9ee; font-size: .63rem; line-height: 1.5; }
.nearby-howto ol::marker, .nearby-howto li::marker { color: #7df5ed; font-weight: 800; }
.nearby-howto small { color: #93c4cd; font-size: .55rem; line-height: 1.45; }
.nearby-intro { margin: .6rem 0 0; color: #b7d9df; font-size: .6rem; line-height: 1.5; text-align: left; }
.voice-table-option { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; width:100%; padding:10px 11px; border:1px solid #71becd66; border-radius:12px; color:#eafcff; text-align:left; background:linear-gradient(145deg,#0b3548,#072638); box-shadow:inset 0 1px #ffffff17; }
.voice-table-option .voice-table-icon { display:grid; place-items:center; width:34px; height:34px; border:1px solid #8bcbd788; border-radius:10px; background:#062333; font-size:1.05rem; }
.voice-table-option > span:nth-child(2) { display:grid; gap:2px; }
.voice-table-option b { font-size:.68rem; }
.voice-table-option small { color:#9fcbd3; font-size:.52rem; font-weight:600; }
.voice-table-option i { min-width:45px; padding:5px 7px; border-radius:999px; color:#afc6cd; background:#ffffff12; font-size:.52rem; font-style:normal; font-weight:900; text-align:center; }
.voice-table-option.active { border-color:#65e2b7; background:linear-gradient(145deg,#12604f,#073d3e); box-shadow:inset 0 1px #bfffe855,0 0 12px #3bd0a429; }
.voice-table-option.active i { color:#062b25; background:#74e7bd; }
.create-table-stake { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid #f0d06055; border-radius:11px; background:#00172299; }
.create-table-stake span { color:#a9cbd2; font-size:.58rem; }
.create-table-stake b { color:#ffe36d; font-size:.75rem; }
.create-table-confirm { width:100%; min-height:44px; margin:2px 0 0; }

.tournament-reward-backdrop { position:fixed; inset:0; z-index:11250; display:grid; place-items:center; padding:14px; overflow:hidden; background:radial-gradient(circle at 50% 28%,#725817e8,#061a2af7 70%); backdrop-filter:blur(9px); }
.tournament-reward-card { position:relative; isolation:isolate; width:min(92vw,440px); overflow:hidden; display:grid; justify-items:center; gap:9px; padding:27px 22px 22px; border:2px solid #ffe578; border-radius:28px; color:#f8fdff; text-align:center; background:radial-gradient(circle at 50% 8%,#9c741f 0,#153d48 39%,#061b2b 78%); box-shadow:0 28px 90px #000e,0 0 48px #ffd84a66,inset 0 0 50px #fff2a817; animation:dailyCardIn .55s cubic-bezier(.18,.88,.26,1.2); }
.tournament-reward-card > *:not(.tournament-reward-rays):not(.reward-confetti) { position:relative; z-index:2; }
.tournament-reward-rays { position:absolute; inset:-45%; z-index:0; opacity:.32; background:repeating-conic-gradient(from 0deg,#ffe98b 0 8deg,transparent 8deg 19deg); animation:dailyRays 16s linear infinite; }
.tournament-reward-crown { display:grid; place-items:center; width:94px; height:94px; border:2px solid #fff0a1; border-radius:28px; background:linear-gradient(145deg,#72500f,#182634); box-shadow:inset 0 1px #fff6b5aa,0 0 30px #ffd7499c,0 12px 28px #0008; font-size:3.1rem; animation:rewardCup 1.25s ease-in-out infinite alternate; }
.tournament-reward-card > small { color:#fff0a0; font-size:.62rem; font-weight:950; letter-spacing:.22em; }
.tournament-reward-card h2 { margin:0; color:#ffe36b; font:950 1.85rem/1 Arial,sans-serif; text-shadow:0 3px 10px #0009; }
.tournament-reward-card > strong { font-size:.92rem; }
.tournament-reward-rank { display:grid; place-items:center; width:78px; height:78px; border:2px solid #ffe476; border-radius:50%; color:#ffe77d; background:#071d2ccc; box-shadow:inset 0 0 18px #ffdc4938,0 0 18px #ffd84a42; }
.tournament-reward-rank span { font:950 2rem/1 Arial,sans-serif; }
.tournament-reward-rank em { color:#b8d9df; font-size:.43rem; font-style:normal; }
.tournament-reward-points { display:grid; min-width:220px; padding:11px 20px; border:1px solid #ffe68199; border-radius:15px; background:#001824b8; }
.tournament-reward-points b { color:#ffe36d; font:950 1.65rem/1 Arial,sans-serif; }
.tournament-reward-points span { margin-top:3px; color:#abd9df; font-size:.54rem; }
.tournament-reward-card p { max-width:350px; margin:1px 0 4px; color:#c0dce1; font-size:.67rem; line-height:1.45; }
.tournament-reward-card > button { width:100%; min-height:46px; font-weight:950; }

.first-game-reward-backdrop { position: fixed; inset: 0; z-index: 11000; display: grid; place-items: center; padding: 14px; overflow: hidden; background: radial-gradient(circle, #0a6172e8, #00131ff2 68%); backdrop-filter: blur(7px); }
.first-game-reward-card { position: relative; isolation: isolate; width: min(92vw, 430px); overflow: hidden; display: grid; justify-items: center; gap: 7px; padding: 25px 20px 20px; border: 2px solid #f8d960; border-radius: 24px; color: #effcff; text-align: center; background: radial-gradient(circle at 50% 5%, #177a83, #07364a 55%, #031d2e); box-shadow: 0 24px 70px #000d, inset 0 0 34px #55e5d522; animation: rewardCardIn .55s cubic-bezier(.2,.9,.25,1.18); }
.first-game-cup { display: grid; place-items: center; width: 82px; height: 82px; border: 2px solid #ffe785; border-radius: 50%; background: radial-gradient(circle, #fff2a6, #d39519); box-shadow: 0 0 28px #ffd84b99; font-size: 2.7rem; animation: rewardCup 1.3s ease-in-out infinite alternate; }
.first-game-reward-card > small { color: #84e7e2; font-size: .58rem; font-weight: 900; letter-spacing: .22em; }
.first-game-reward-card h2 { margin: 0; color: #ffe36d; font: 900 1.7rem/1 Arial, sans-serif; text-shadow: 0 3px 9px #0008; }
.first-game-reward-card > strong { font-size: .86rem; }
.first-game-points { display: grid; min-width: 180px; padding: 9px 18px; border: 1px solid #ffe68188; border-radius: 14px; background: #001b2a99; }
.first-game-points b { color: #ffe56e; font: 900 1.55rem/1 Arial, sans-serif; }
.first-game-points span { color: #a8dbe1; font-size: .52rem; }
.first-game-reward-card p { max-width: 330px; margin: 1px 0 4px; color: #b8dbe1; font-size: .65rem; line-height: 1.45; }
.first-game-reward-card > button { width: 100%; min-height: 44px; font-weight: 900; }

/* Günlük bonus ve dokununca titreyerek açılan sürpriz sandık. */
.daily-reward-backdrop { position: fixed; inset: 0; z-index: 11150; display: grid; place-items: center; padding: 14px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #285c72ee, #020c1af7 72%); backdrop-filter: blur(9px); }
.daily-reward-card { position: relative; isolation: isolate; width: min(92vw, 430px); min-height: 500px; overflow: hidden; display: grid; justify-items: center; align-content: center; gap: 10px; padding: 25px 22px 22px; border: 2px solid #ffe477; border-radius: 28px; color: #f5fdff; text-align: center; background: radial-gradient(circle at 50% 18%, #236f7c 0, #073950 45%, #021a2c 82%); box-shadow: 0 28px 90px #000e, 0 0 40px #ffd84a44, inset 0 0 45px #4effec1d; animation: dailyCardIn .55s cubic-bezier(.18,.88,.26,1.2); }
.daily-reward-card > *:not(.daily-reward-rays):not(.reward-confetti) { position: relative; z-index: 2; }
.daily-reward-card > small { color: #90f4eb; font-size: .62rem; font-weight: 900; letter-spacing: .22em; }
.daily-reward-card h2 { margin: 0; color: #ffe66f; font: 900 1.65rem/1.05 Arial,sans-serif; text-shadow: 0 4px 13px #0009; }
.daily-reward-card p { max-width: 340px; margin: 3px 0 0; color: #c5e5e9; font-size: .72rem; line-height: 1.45; }
.daily-reward-card p strong { color: #ffe879; }
.daily-reward-rays { position: absolute; z-index: 0; width: 480px; height: 480px; border-radius: 50%; opacity: .26; background: repeating-conic-gradient(from 0deg, #ffe573 0 7deg, transparent 7deg 18deg); animation: dailyRays 18s linear infinite; }
.daily-login-prize { display: flex; align-items: center; gap: 10px; min-width: 230px; padding: 10px 20px; border: 1px solid #ffe47c99; border-radius: 18px; background: linear-gradient(135deg,#3b330fc9,#102d37dd); box-shadow: inset 0 0 18px #ffe76e22; }
.daily-login-prize > span { font-size: 2rem; filter: drop-shadow(0 4px 5px #0008); animation: dailyCoin 1.1s ease-in-out infinite alternate; }
.daily-login-prize div { display: grid; text-align: left; }
.daily-login-prize b { color: #ffe56d; font: 900 1.5rem/1 Arial,sans-serif; }
.daily-login-prize em { color: #b9d8dc; font: 700 .58rem/1.3 Arial,sans-serif; }
.daily-chest { position: relative; width: 230px; height: 190px; margin: -5px 0 -7px; padding: 0; border: 0; background: transparent; overflow: visible; cursor: pointer; filter: drop-shadow(0 18px 16px #000b); touch-action: manipulation; }
.daily-chest:disabled { opacity: 1; }
.daily-chest-art { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.chest-shine { position: absolute; z-index: 1; inset: -15px; border-radius: 50%; background: radial-gradient(circle,#fff7a78a 0,#ffd33335 38%,transparent 70%); animation: chestGlow 1s ease-in-out infinite alternate; }
.chest-lock-glow { position: absolute; z-index: 3; left: 50%; top: 59%; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle,#fffbd1 0,#ffdc4c70 30%,transparent 70%); transform: translate(-50%,-50%); animation: chestLockPulse .85s ease-in-out infinite alternate; pointer-events: none; }
.daily-chest-hint { color: #fff1a0; font-size: .68rem; animation: chestHint 1s ease-in-out infinite alternate; }
.daily-reward-card.opening .daily-chest,
.kampanya-karti.opening .daily-chest { animation: chestShake .105s linear 7, chestJump .28s .74s ease-out forwards; }
.daily-reward-card.opening .daily-chest-art,
.kampanya-karti.opening .daily-chest-art { animation: chestClosedFlash .28s .66s ease-out forwards; }
.daily-reward-card.opening .chest-shine,
.kampanya-karti.opening .chest-shine { animation: chestOpeningGlow .9s ease-out forwards; }
.daily-chest-open { cursor: default; animation: chestOpenArrive .62s cubic-bezier(.15,.9,.25,1.2); }
.daily-chest-open .chest-shine { opacity: 1; transform: scale(1.3); background: radial-gradient(circle,#fffbd6c7 0,#ffe24470 38%,transparent 72%); animation: chestOpenGlow 1.1s ease-in-out infinite alternate; }
.daily-chest-burst { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.daily-chest-burst i { --angle: calc(var(--i) * 30deg); position: absolute; left: 50%; top: 45%; width: 7px; height: 7px; border-radius: 50%; background: #fff7a2; box-shadow: 0 0 12px #ffe34f; animation: chestSparkle 1.35s ease-out infinite; animation-delay: calc(var(--i) * -.09s); }
.daily-chest-result { display: grid; gap: 3px; min-width: 265px; padding: 16px 20px; border: 2px solid #fff09a; border-radius: 18px; background: radial-gradient(circle,#725a0ee8,#152f35ee); box-shadow: 0 0 35px #ffe45d70,inset 0 0 25px #fff49a25; animation: rewardResultIn .55s cubic-bezier(.15,.9,.3,1.25); }
.daily-chest-result span { color: #a9eee7; font-size: .58rem; font-weight: 900; letter-spacing: .2em; }
.daily-chest-result b { color: #fff074; font: 900 2rem/1 Arial,sans-serif; text-shadow: 0 3px 8px #000a; }
.daily-chest-result em { color: #fff9d0; font: 700 .66rem Arial,sans-serif; }
/* Sandik kampanya kartinda da kullaniliyor. Gunluk odul karti bir izgara ve
   icindekileri kendiliginden ortaliyor; kampanya karti duz bir blok, bu yuzden
   blok seviyesindeki parcalar burada elle ortalanir. */
.kampanya-karti .daily-chest { margin: 8px 0 -4px; }
.kampanya-karti .daily-chest-open { margin-inline: auto; }
.kampanya-karti .daily-chest-hint { display: block; margin-top: 8px; }
.kampanya-karti .daily-chest-result { max-width: 100%; margin: 14px auto 0; }
.kampanya-karti .daily-chest-result + .kampanya-al { margin-top: 14px; }
.daily-reward-continue { width: 100%; min-height: 45px; font-weight: 900; }
@keyframes dailyCardIn { from { opacity: 0; transform: scale(.72) translateY(35px); } to { opacity: 1; transform: none; } }
@keyframes dailyRays { to { transform: rotate(360deg); } }
@keyframes dailyCoin { to { transform: translateY(-4px) rotate(8deg) scale(1.06); } }
@keyframes chestGlow { to { opacity: .55; transform: scale(1.1); } }
@keyframes chestLockPulse { to { opacity: .45; transform: translate(-50%,-50%) scale(1.5); } }
@keyframes chestHint { to { opacity: .55; } }
@keyframes chestShake { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-7px) rotate(-4deg); } 75% { transform: translateX(7px) rotate(4deg); } }
@keyframes chestJump { 50% { transform: translateY(-17px) scale(1.08); } 100% { transform: translateY(0) scale(1.03); } }
@keyframes chestClosedFlash { to { opacity: .15; filter: brightness(2.2); transform: scale(1.08); } }
@keyframes chestOpeningGlow { 70%,100% { opacity: 1; transform: scale(1.55); background: radial-gradient(circle,#fffbd6 0,#ffe2449c 35%,transparent 70%); } }
@keyframes chestOpenArrive { from { opacity: 0; transform: translateY(22px) scale(.65); filter: brightness(2); } to { opacity: 1; transform: none; filter: none; } }
@keyframes chestOpenGlow { to { opacity: .62; transform: scale(1.5); } }
@keyframes chestSparkle { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(.2); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(-100px) scale(1.35); } }
@keyframes rewardResultIn { from { opacity: 0; transform: scale(.55) translateY(25px); } to { opacity: 1; transform: none; } }
@media (max-height: 600px) and (orientation: landscape) { .daily-reward-card { min-height: 0; width: min(86vw,520px); grid-template-columns: 1fr 1fr; padding: 14px 20px; } .daily-reward-card h2,.daily-reward-card > small,.daily-reward-card > p,.daily-chest-hint { grid-column: 1/-1; } .daily-login-prize { min-width: 210px; } .daily-chest { transform: scale(.8); margin: -20px 0; } .daily-chest-result,.daily-reward-continue { grid-column: 1/-1; } }
.reward-confetti { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Dagilim degerleri (--x konum, --g gecikme, --s sure, --h renk, --r donus)
   Razor tarafindan taneye TEK TEK yaziliyor (bkz. Home.KonfetiStili).
   Eskiden hepsi sira numarasinin katiydi (left: i*3.4%, delay: i*-.14s,
   sure: 2.3s + i*.03s); ucu de dogrusal oldugu icin taneler esit aralikli ve
   ayni yonde ilerleyen bir dizi gibi akiyordu - yagmur degil, yuruyen sira.
   CSS'te rastgelelik yok ve calc icinde modulo da yok, bu yuzden dagilim
   disaridan veriliyor. */
.reward-confetti i { position: absolute; top: -15%; left: var(--x); width: 7px; height: 13px; border-radius: 2px; background: hsl(var(--h) 90% 62%); animation: rewardConfetti var(--s) linear infinite; animation-delay: var(--g); }
@keyframes rewardCardIn { from { opacity: 0; transform: scale(.72) translateY(25px); } to { opacity: 1; transform: none; } }
@keyframes rewardCup { to { transform: translateY(-5px) rotate(3deg) scale(1.04); } }
@keyframes rewardConfetti { to { top: 115%; transform: rotate(var(--r)); } }
.level-up-backdrop { position: fixed; inset: 0; z-index: 11020; display: grid; place-items: center; padding: 14px; overflow: hidden; background: radial-gradient(circle, color-mix(in srgb, var(--level-accent, #63d6da) 38%, #073245e8), #00131ff4 70%); backdrop-filter: blur(8px); }
.level-up-card { --level-accent: #63d6da; position: relative; isolation: isolate; width: min(92vw, 440px); overflow: hidden; display: grid; justify-items: center; gap: 7px; padding: 24px 20px 20px; border: 2px solid var(--level-accent); border-radius: 24px; color: #effcff; text-align: center; background: radial-gradient(circle at 50% 2%, color-mix(in srgb, var(--level-accent) 30%, #123f50), #073246 55%, #031b2b); box-shadow: 0 24px 70px #000d, 0 0 35px color-mix(in srgb, var(--level-accent) 35%, transparent), inset 0 0 34px color-mix(in srgb, var(--level-accent) 15%, transparent); animation: rewardCardIn .55s cubic-bezier(.2,.9,.25,1.18); }
.level-up-art { display: grid; place-items: center; width: 92px; height: 92px; overflow: hidden; border: 3px solid var(--level-accent); border-radius: 27px; background: #061f2e; box-shadow: 0 0 28px color-mix(in srgb, var(--level-accent) 60%, transparent); animation: rewardCup 1.3s ease-in-out infinite alternate; }
.level-up-art img { width: 100%; height: 100%; object-fit: cover; }
.level-up-card > small { color: var(--level-accent); font-size: .58rem; font-weight: 900; letter-spacing: .2em; }
.level-up-card h2 { margin: 0; color: #ffe36d; font: 900 1.7rem/1 Arial, sans-serif; text-shadow: 0 3px 9px #0008; }
.level-up-card > strong { font-size: .9rem; }
.level-up-points { display: grid; min-width: 180px; padding: 9px 18px; border: 1px solid color-mix(in srgb, var(--level-accent) 70%, #ffe681); border-radius: 14px; background: #001b2aaa; }
.level-up-points b { color: #ffe56e; font: 900 1.55rem/1 Arial, sans-serif; }
.level-up-points span { color: #a8dbe1; font-size: .52rem; }
.level-up-card p { max-width: 340px; margin: 1px 0 4px; color: #b8dbe1; font-size: .65rem; line-height: 1.45; }
.level-up-card > button { width: 100%; min-height: 44px; border-color: var(--level-accent); font-weight: 900; }
@media (max-width: 560px) {
    .ranked-game-options { grid-template-columns: 1fr; }
    .ranked-lobby-card { flex-basis: 94%; grid-template-columns: 78px 1fr; min-height: 190px; padding: 13px; }
    .ranked-lobby-art { width: 76px; height: 76px; border-radius: 22px; font-size: 2.5rem; }
    .ranked-lobby-copy strong { font-size: .9rem; }
}

/* 101 Ultra masa kimliği: oyun alanında soluk arma, ıstakada ahşaba kazınmış isim. */
.game-shell::before {
    content: none;
    position: absolute;
    left: 50%;
    top: 42%;
    z-index: -1;
    width: clamp(130px, 19vw, 235px);
    aspect-ratio: 1;
    /* Yol stil dosyasina GORE cozuluyor: "_content/OkeyOnline.Shared/" oneki
       bir daha eklenince adres iki kez tekrarlanip 404 veriyordu. Dosyadaki
       diger gorseller gibi dogrudan images/ ile yaziliyor. */
    background: url("images/game-brand-small.png") center / contain no-repeat;
    opacity: .055;
    filter: grayscale(.2) saturate(.55) contrast(.85);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.table-brand-watermark {
    position: relative;
    top: auto;
    z-index: 1;
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    width: clamp(105px, 14vw, 185px);
    height: auto;
    margin-top: 54px;
    opacity: .12;
    filter: grayscale(.12) saturate(.68) contrast(.86);
    transform: none;
    pointer-events: none;
    user-select: none;
}
.table-brand-watermark-left {
    left: auto;
    justify-self: start;
    margin-left: 30px;
}
.table-brand-watermark-center {
    left: auto;
    justify-self: center;
    margin-inline: 0;
}
.table-brand-watermark-right {
    right: auto;
    left: auto;
    justify-self: end;
    margin-right: 30px;
}
/*
 * Saat ve pil en solda, soldaki atık taşı kolonunun da solundaki boşlukta, alt
 * alta duran dar bir sütun. O kolon kendini max(padding, safe-area-inset-left)
 * ile konumlandırdığı için kenarda kullanılmayan bir şerit kalıyor; sütun oraya
 * oturur. Bu yüzden burada bilerek safe-area payı EKLENMEZ, yoksa sütun kolonun
 * üstüne biner. Taş atma alanı ve kendi atık taşı köşemiz sağda kalır.
 */
.game-device-status {
    position: absolute;
    top: max(4px, env(safe-area-inset-top));
    right: auto;
    left: 3px;
    z-index: 47;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 33px;
    height: auto;
    padding: 4px 3px 5px;
    border: 1px solid #7fc4d56b;
    border-radius: 13px;
    color: #eefbff;
    background: linear-gradient(#123f59e8, #071f32e8);
    box-shadow: inset 0 1px #ffffff2e, 0 2px 6px #0016228c;
    /* Saat artik DUGME: dokununca masadaki butun dugmeler ve ust band
       gizlenir. Eskiden dokunuslari geciriyordu (pointer-events: none).
       Ayri bir gizleme dugmesi de denendi ama ekranda bir dugme daha
       demekti; amac tam tersiydi. */
    pointer-events: auto;
    appearance: none;
    cursor: pointer;
    /* Dugme olunca yazi tipi sistem yazisina dusuyordu; saat oyunun
       yazisiyla ayni kalsin. */
    font-family: inherit;
}
/* Kosedeki goz: saatin yalniz saat olmadigini, dokununca gorunurlugu
   degistirdigini anlatir. */
/* Goz, kutunun KOSESINDE degil ICINDE en altta: kose rozeti pil
   gostergesinin uzerine biniyor ve sarj durumu okunmuyordu. Simdi saat ve
   pilin altinda kendi satirinda duruyor, hicbir seyi ortmuyor. */
.game-device-status::after {
    content: "👁";
    margin-top: 1px;
    font-size: .5rem;
    line-height: 1;
    opacity: .9;
}
/* Gizliyken rozet SOLUKLASIR; amac temiz sayfa, parlak duran tek isaret
   masadan daha cok goze batiyordu. Saatin kendisi okunur kalir. */
.game-device-status.sade-acik::after { content: "🙈"; opacity: .45; }
.game-device-status:active { transform: scale(.96); }

/* Dokunulabilir oldugu BELLI OLSUN: kutu yavasca nefes alir. Saat kosede
   duran sade bir bilgi gibi duruyordu, dokunmak akla gelmezdi. Ritim
   bilerek yavas (2.6 sn) ve yalniz kenarda/parlamada: rakamlarin kendisi
   oynarsa saat okunmaz olurdu. */
@keyframes saatNabzi {
    0%, 100% {
        border-color: #7fc4d56b;
        box-shadow: inset 0 1px #ffffff2e, 0 2px 6px #0016228c;
    }
    50% {
        border-color: #bfeeffe0;
        box-shadow: inset 0 1px #ffffff2e, 0 2px 6px #0016228c, 0 0 11px #6fd8ef85;
    }
}
.game-device-status { animation: saatNabzi 2.6s ease-in-out infinite; }
/* Gizliyken nabiz da yavaslar ve soner: amac temiz sayfa. */
.game-device-status.sade-acik { animation-duration: 4.2s; opacity: .72; }
@media (prefers-reduced-motion: reduce) {
    .game-device-status { animation: none; }
}
.game-device-status time { font-size: .56rem; font-weight: 900; letter-spacing: .03em; }
.device-battery {
    position: relative;
    display: block;
    width: 23px;
    height: 11px;
    padding: 2px;
    border: 1.5px solid #dff7fc;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px #001b28a8;
}
.device-battery > i { display: block; height: 100%; border-radius: 1px; background: #62df7d; box-shadow: 0 0 5px #62df7d85; }
.device-battery.medium > i { background: #f2cd4f; box-shadow: 0 0 5px #f2cd4f85; }
.device-battery.low > i { background: #f05e58; box-shadow: 0 0 6px #f05e5899; }
.device-battery.unknown::after { content: "?"; position: absolute; inset: -2px 0 0; color: #b9d3da; text-align: center; font-size: .48rem; }
.device-battery > b { position: absolute; top: 50%; right: -4px; width: 3px; height: 5px; border-radius: 0 2px 2px 0; background: #dff7fc; transform: translateY(-50%); }
.device-battery > em { position: absolute; inset: -5px 0 0; color: #fff7a5; text-align: center; font-size: .82rem; font-style: normal; font-weight: 950; text-shadow: 0 1px 2px #6c5100; }
.game-shell .rack-board {
    position: relative;
}
.game-shell .rack-board::before { content: none; }
.game-shell .rack-engraving {
    position: absolute;
    left: 50%;
    top: 24%;
    z-index: 0;
    width: 94%;
    height: 40%;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    background: url("images/rack-engraving.svg") center / contain no-repeat;
    opacity: .22;
    mix-blend-mode: normal;
    transform: translate(-50%, -50%);
    pointer-events: none;
    white-space: nowrap;
    isolation: isolate;
}
.game-shell .rack-engraving::before,
.game-shell .rack-engraving::after {
    content: none;
}
.game-shell .rack-row {
    position: relative;
    z-index: 1;
}
/* Masa rozeti dokunulabilir olduğunu belli etsin: bilgi simgesi, ok ucu ve
   masa açılırken birkaç kez tekrarlanan yumuşak parlama. */
.game-lobby-badge {
    position: absolute;
    top: 7px;
    left: calc(max(var(--discard-shell-padding, 1rem), var(--safe-side, 0px)) + var(--discard-side-column, 145px));
    z-index: 46;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 190px;
    min-height: 20px;
    overflow: hidden;
    padding: 3px 6px 3px 4px;
    border: 1px solid #f2d581;
    border-radius: 999px;
    color: #ffeeb4;
    background: linear-gradient(180deg, #0d4257e0, #05253ae8);
    box-shadow: inset 0 1px #ffffff26, 0 2px 6px #00131f88;
    font-size: .46rem;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1.15;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    appearance: none;
    animation: lobbyBadgeTapHint 2.6s ease-in-out 3;
}
.game-lobby-badge > i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    color: #08283a;
    background: linear-gradient(180deg, #ffe9a4, #edc65f);
    font-size: .44rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0;
}
.game-lobby-badge > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.game-lobby-badge > b {
    flex: 0 0 auto;
    color: #ffd977;
    font-size: .68rem;
    line-height: 1;
}
.game-lobby-badge:active {
    background: linear-gradient(180deg, #14607de8, #093548f2);
    transform: scale(.96);
}
@keyframes lobbyBadgeTapHint {
    0%, 100% { box-shadow: inset 0 1px #ffffff26, 0 2px 6px #00131f88; }
    50% { box-shadow: inset 0 1px #ffffff33, 0 0 13px #ffd97a85; }
}
.game-lobby-status {
    position: absolute;
    top: 6px;
    left: calc(max(var(--discard-shell-padding, 1rem), var(--safe-side, 0px)) + var(--discard-side-column, 145px));
    z-index: 48;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
}
.game-lobby-status .game-lobby-badge { pointer-events: auto; }

/* Masa rozetinden açılan, oyunun bütün temel kurallarını tek bakışta gösteren kart. */
.game-info-backdrop {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: grid;
    place-items: center;
    padding: 18px;
    background: #00141fc7;
    backdrop-filter: blur(4px);
}
.game-info-card {
    width: min(520px, 92vw);
    max-height: 88vh;
    overflow: auto;
    padding: 18px;
    border: 1px solid #e8ce72;
    border-radius: 20px;
    color: #f6fbff;
    background: linear-gradient(145deg, #0c3d52, #061f2d 72%);
    box-shadow: 0 18px 55px #000a, inset 0 1px #ffffff24;
}
.game-info-card header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.game-info-card header div { display: grid; gap: 3px; }
.game-info-card header small { color: #e8ce72; font-size: .67rem; font-weight: 900; letter-spacing: .15em; }
.game-info-card header strong { font-size: 1.28rem; }
.game-info-card header button { width: 38px; height: 38px; border: 0; border-radius: 50%; font-size: 1.5rem; font-weight: 900; }
.game-info-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.game-info-card dl div { min-width: 0; padding: 10px 12px; border: 1px solid #ffffff18; border-radius: 12px; background: #ffffff0b; }
.game-info-card dt { color: #9fc2cf; font-size: .7rem; font-weight: 800; }
.game-info-card dd { margin: 3px 0 0; color: #fff6c7; font-size: .9rem; font-weight: 900; }
.game-info-close { width: 100%; min-height: 42px; border: 0; border-radius: 12px; color: #14200b; background: linear-gradient(#ffe467, #eebf25); font-weight: 950; }

/* Taş altındaki büyük halka/kalp yerine gerçek taşlardaki küçük renk noktası. */
.game-shell.hole-dot-mode :is(.rack-tile, .table-tile)::before,
.game-shell.extra-large-tile-mode.hole-dot-mode :is(.rack-tile, .table-tile)::before {
    width: 10px;
    height: 10px;
    aspect-ratio: 1;
    bottom: 6px;
    border: 1px solid #0006;
    border-radius: 50%;
    background-image: none;
    box-shadow: inset 1px 1px 1px #ffffff55, inset -1px -1px 1px #0005;
}
.game-shell.hole-dot-mode :is(.rack-tile, .table-tile).red::before { background: #d92720; }
.game-shell.hole-dot-mode :is(.rack-tile, .table-tile).blue::before { background: #147bd1; }
.game-shell.hole-dot-mode :is(.rack-tile, .table-tile).black::before { background: #252b2c; }
.game-shell.hole-dot-mode :is(.rack-tile, .table-tile).yellow::before { background: #d8a600; }
.game-shell.extra-large-tile-mode.hole-dot-mode .rack-tile > span { transform: translateY(-4px); }

@media (orientation: landscape) and (max-height: 500px) {
    .game-info-card { width: min(620px, 84vw); padding: 12px 16px; }
    .game-info-card header { margin-bottom: 8px; }
    .game-info-card dl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 9px; }
    .game-info-card dl div { padding: 7px 9px; }
    .game-info-close { min-height: 34px; }
}
.game-lobby-status .game-lobby-badge,
.game-lobby-status .risk-multiplier-badge {
    position: static;
}
.risk-multiplier-badge {
    position: absolute;
    top: 6px;
    left: calc(50% - 158px);
    z-index: 48;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 70px;
    padding: 3px 9px;
    border: 1px solid #ffd96d;
    border-radius: 999px;
    color: #fff4bb;
    background: linear-gradient(180deg, #8d1b2ff2, #4d0716f2);
    box-shadow: inset 0 1px #ffffff42, 0 0 10px #ff405b70;
    line-height: 1;
    pointer-events: none;
}
.risk-multiplier-badge small {
    font-size: .42rem;
    font-weight: 900;
    letter-spacing: .08em;
}
.risk-multiplier-badge b {
    color: #ffe15f;
    font-size: .72rem;
    text-shadow: 0 1px 2px #260006;
}
@media (orientation: landscape) and (max-width: 900px) {
    .game-lobby-badge { left: calc(max(var(--discard-shell-padding, 1rem), var(--safe-side, 0px)) + var(--discard-side-column, 145px)); max-width: 140px; }
    .game-lobby-status { left: calc(max(var(--discard-shell-padding, 1rem), var(--safe-side, 0px)) + var(--discard-side-column, 145px)); }
    .game-lobby-status .game-lobby-badge { max-width: 140px; }
}

/* El toplamı taş çekme destesinin yanında, per toplamı ıstakanın sağındadır. */
.table-center .table-center-totals {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    justify-content: stretch;
    gap: 1px;
    width: 58px;
    min-width: 0;
    min-height: 30px;
    padding: 4px 3px;
    overflow: hidden;
    border: 1px solid #8ee9d1;
    border-radius: 6px;
    color: #dffff5;
    background: linear-gradient(180deg, #267a70, #124b50);
    box-shadow: inset 0 1px #d9fff288, 0 3px 8px #001523b8;
    font: 800 .44rem/1 Arial, sans-serif;
    white-space: nowrap;
}
.table-center .table-center-totals > span {
    display: block;
    min-width: 0;
    letter-spacing: .01em;
}
.table-center .table-center-totals b {
    display: block;
    font-size: .68rem;
    font-weight: 950;
}
@media (orientation: landscape) and (max-height: 500px) {
    .table-center .table-center-totals {
        width: 56px;
        min-height: 28px;
        padding-block: 3px;
    }
}
.rack-right-tools .rack-score-penalty-stack .rack-hand-total,
.rack-right-tools .rack-score-penalty-stack .rack-score {
    box-sizing: border-box;
    width: 62px;
    min-height: 22px;
    padding: 2px 4px;
    border-radius: 7px;
    font: 800 .68rem/1.15 Arial, sans-serif;
    white-space: nowrap;
}
.rack-right-tools .rack-score-penalty-stack .rack-hand-total {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #8ee9d1;
    color: #dffff5;
    background: linear-gradient(180deg, #267a70, #124b50);
    box-shadow: inset 0 1px #d9fff288, 0 3px 8px #001523b8;
}
.rack-right-tools .rack-score-penalty-stack .rack-hand-total b,
.rack-right-tools .rack-score-penalty-stack .rack-score b {
    font-size: .78rem;
    font-weight: 950;
}
.rack-right-tools .rack-score-penalty-stack .rack-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: auto;
    line-height: 1.15;
}

.forfeit-result-backdrop { position: fixed; inset: 0; z-index: 11100; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle, #572820dd, #07121aed 70%); backdrop-filter: blur(7px); }
.forfeit-result-card { width: min(92vw, 430px); display: grid; justify-items: center; gap: 9px; padding: 24px 20px 20px; border: 2px solid #f09a72; border-radius: 24px; color: #f8fcff; text-align: center; background: radial-gradient(circle at top, #783c32, #301f25 55%, #121923); box-shadow: 0 24px 70px #000d, inset 0 0 30px #ff8e5520; animation: rewardCardIn .45s ease-out; }
.forfeit-result-icon { display: grid; place-items: center; width: 74px; height: 74px; border: 2px solid #ffbc91; border-radius: 50%; background: #241319aa; box-shadow: 0 0 25px #ff855755; font-size: 2.4rem; }
.forfeit-result-card > small { color: #ffba93; font-size: .55rem; font-weight: 900; letter-spacing: .18em; }
.forfeit-result-card h2 { margin: 0; color: #fff0e5; font-size: 1.18rem; }
.forfeit-penalty { display: grid; min-width: 210px; gap: 2px; padding: 10px 17px; border: 1px solid #ff9d7588; border-radius: 14px; background: #190e13aa; }
.forfeit-penalty span { color: #d9b7ac; font-size: .52rem; }
.forfeit-penalty b { color: #ff846c; font-size: 1.22rem; }
.forfeit-result-card p { margin: 2px 0 5px; color: #d8c8c5; font-size: .63rem; line-height: 1.5; }
.forfeit-result-card p strong { color: #8ff0bd; }
.forfeit-result-card > button { width: 100%; min-height: 42px; }

/* On sekiz taş her ekran genişliğine tam oturur; son taş sağdan veya alttan kaybolmaz. */
.game-shell .rack-area { box-sizing: border-box; overflow: visible; }
.game-shell .rack-area.turn-warning-active { z-index: 12550; }
.rack-turn-warning {
    position: absolute;
    left: 50%;
    top: -39px;
    z-index: 12560;
    display: flex;
    align-items: center;
    gap: 7px;
    transform: translateX(-50%);
    padding: 7px 14px 8px 9px;
    border: 2px solid #ffb09f;
    border-radius: 18px;
    color: #fff8ef;
    background: linear-gradient(180deg, #bd4438, #76231f);
    box-shadow: 0 6px 18px #00131dcc, 0 0 13px #ff4f3f66, inset 0 1px #ffe2d899;
    font-size: .72rem;
    white-space: nowrap;
    pointer-events: none;
    animation: rackTurnWarningIn .18s ease-out;
}
.rack-turn-warning::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #76231f;
}
.rack-turn-warning span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid #ffe0d7aa;
    border-radius: 50%;
    background: #5c1715;
    font-weight: 950;
}
/*
 * "Sıra sizde" kalıcı görsel sistemi. Ortadaki uyarı birkaç saniyede kaybolduğu
 * için sıra oyuncudayken iki katman sürekli açık kalır: oyun alanını saran altın
 * çerçeve ve ıstakanın kendi parlaması. Üstteki sıra rozeti de büyüyüp altın
 * olur. Son 5 saniyede hepsi kırmızıya döner ve nabız hızlanır.
 *
 * Çerçeve bilerek ayrı bir eleman: .game-shell::before masa filigranına ait ve
 * oradan width/aspect-ratio/transform miras alınca çerçeve köşeye kayıyordu.
 */
.own-turn-frame {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    border-radius: 4px;
    box-shadow: inset 0 0 0 3px #ffd75e, inset 0 0 30px #ffc83d4d;
    animation: ownTurnFrame 2.1s ease-in-out infinite;
}
.own-turn-frame.urgent {
    box-shadow: inset 0 0 0 4px #ff6a52, inset 0 0 38px #ff432570;
    animation-duration: .7s;
}
@keyframes ownTurnFrame {
    0%, 100% { opacity: .5; }
    50% { opacity: 1; }
}

.game-shell .rack-area.own-turn {
    box-shadow: 0 14px 30px #0008, inset 0 2px #9b5f3a, 0 0 0 2px #ffd75eaa, 0 0 22px #ffc83d55;
}
.game-shell .rack-area.own-turn.turn-warning-active { box-shadow: 0 14px 30px #0008, inset 0 2px #9b5f3a; }

/* Sıra bizdeyken üstteki rozet büyür, altın olur ve nabız gibi atar. */
.game-turn-chip.own-turn {
    padding: 5px 15px;
    border-width: 2px;
    font-size: .74rem;
    letter-spacing: .02em;
    animation: ownTurnChip 2.1s ease-in-out infinite;
}
.game-turn-chip.own-turn.turn-urgent {
    border-color: #ff9f8c;
    box-shadow: 0 0 0 2px #ff6a5255, 0 0 17px #ff5b3f99;
    animation-duration: .7s;
}
@keyframes ownTurnChip {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes rackTurnWarningIn {
    from { opacity: 0; transform: translate(-50%, 8px) scale(.94); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.game-shell .rack-board { box-sizing: border-box; width: 100%; overflow-x: hidden; overflow-y: visible; }
.game-shell .rack-row {
    box-sizing: border-box; width: 100%; min-width: 0;
    grid-template-columns: repeat(18, minmax(0, 1fr));
}
.game-shell .rack-slot { box-sizing: border-box; width: 100%; min-width: 0; }
.game-shell .rack-tile { box-sizing: border-box; width: 100%; min-width: 0; }
.game-shell.large-tile-mode .rack-row {
    width: 96%;
    margin-inline: auto;
}
.game-shell.large-tile-mode .rack-slot {
    z-index: 1;
    transform: scaleX(1.08);
    transform-origin: center bottom;
}
.game-shell.large-tile-mode .rack-tile { font-size: 1.12em; }
.game-shell.large-tile-mode .rack-slot:has(.rack-tile.dragging) { z-index: 40; }
.game-shell.extra-large-tile-mode .rack-row {
    width: 100%;
    height: 78px;
    min-height: 78px;
    margin-inline: 0;
}
.game-shell.extra-large-tile-mode .rack-slot {
    z-index: 1;
    height: 75px;
    transform: scaleX(1.09);
    transform-origin: center bottom;
}
.game-shell.extra-large-tile-mode .rack-tile { font-size: 1.3rem; }
.game-shell.extra-large-tile-mode .rack-slot:has(.rack-tile.dragging) { z-index: 40; }
.game-shell.extra-large-tile-mode .rack-area {
    height: 166px;
}
.game-shell.extra-large-tile-mode .rack-board {
    height: 156px;
    min-height: 156px;
    grid-template-rows: repeat(2, 78px);
}
@media (orientation: landscape) and (max-height: 500px) {
    .game-shell.extra-large-tile-mode .rack-area { height: 138px; }
    .game-shell.extra-large-tile-mode .rack-board {
        height: 128px;
        min-height: 128px;
        grid-template-rows: repeat(2, 64px);
    }
    .game-shell.extra-large-tile-mode .rack-row {
        height: 64px;
        min-height: 64px;
    }
    .game-shell.extra-large-tile-mode .rack-slot { height: 62px; }
    .game-shell.extra-large-tile-mode .rack-tile { font-size: 1.24rem; }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell.extra-large-tile-mode .rack-area { height: 130px; }
    .game-shell.extra-large-tile-mode .rack-board {
        height: 120px;
        min-height: 120px;
        grid-template-rows: repeat(2, 60px);
    }
    .game-shell.extra-large-tile-mode .rack-row {
        height: 60px;
        min-height: 60px;
    }
    .game-shell.extra-large-tile-mode .rack-slot { height: 58px; }
    .game-shell.extra-large-tile-mode .rack-tile { font-size: 1.18rem; }
}

/*
 * Keep the scaled tiles inside the wooden frame.  The board has a fixed visual
 * height, while the rack also needs room for its heading, border and the tile
 * depth/shadow.  Reserving that room on the outer grid row prevents the frame
 * from being painted over the bottom/side of the tiles at every size setting.
 */
@media (orientation: landscape) {
    .game-shell {
        /* The table geometry must not jump when the rack tile size changes. */
        grid-template-rows: 30px minmax(0, 1fr) 170px;
    }
    .game-shell .rack-area {
        height: 160px;
        padding-inline: 16px;
        border: 0;
        border-radius: 8px 8px 3px 3px;
        box-shadow:
            0 8px 18px #001521c2,
            inset 0 2px #9b6a31,
            inset 0 -5px #744300;
    }
    .game-shell .rack-area::before,
    .game-shell .rack-area::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 6;
        width: 14px;
        border-radius: 1px;
        background:
            radial-gradient(circle at 50% 24%, #f2f4f4 0 1px, #8d969c 1.5px 2.5px, #242c31 3px 4px, transparent 4.5px),
            radial-gradient(circle at 50% 76%, #f2f4f4 0 1px, #8d969c 1.5px 2.5px, #242c31 3px 4px, transparent 4.5px),
            linear-gradient(to bottom,
                transparent 0 calc(50% - 2px),
                #080d11 calc(50% - 2px) calc(50% - 1px),
                #65727a calc(50% - 1px) calc(50% + 1px),
                #080d11 calc(50% + 1px) calc(50% + 2px),
                transparent calc(50% + 2px) 100%),
            repeating-linear-gradient(0deg, transparent 0 11px, #ffffff0a 12px, transparent 13px),
            linear-gradient(90deg, #101820 0%, #48545c 23%, #242f36 55%, #0c1318 100%);
        box-shadow:
            inset 2px 0 2px #82909a66,
            inset -3px 0 3px #020609aa,
            2px 0 4px #2d1a0080;
        pointer-events: none;
    }
    .game-shell .rack-area::before { left: 0; }
    .game-shell .rack-area::after {
        right: 0;
        transform: scaleX(-1);
    }
    .game-shell .rack-board {
        width: calc(100% - 4px);
        margin-inline: auto;
        overflow: visible;
    }
    .game-shell .rack-slot,
    .game-shell.large-tile-mode .rack-slot,
    .game-shell.extra-large-tile-mode .rack-slot {
        height: calc(100% - 3px);
        align-self: start;
    }
    .game-shell.large-tile-mode .rack-board {
        height: 130px;
        min-height: 130px;
        grid-template-rows: repeat(2, 64px);
    }
    .game-shell.large-tile-mode .rack-row {
        height: 64px;
        min-height: 64px;
    }
    .game-shell.extra-large-tile-mode .rack-area {
        height: 170px;
        padding: 4px 16px 6px;
    }
    .game-shell.extra-large-tile-mode .rack-row {
        width: calc(100% - 14px);
        height: 77px;
        min-height: 77px;
        margin-inline: auto;
    }
}
@media (orientation: landscape) and (max-height: 500px) {
    .game-shell {
        grid-template-rows: 30px minmax(0, 1fr) 144px;
    }
    .game-shell .rack-area {
        height: 122px;
    }
    .game-shell.extra-large-tile-mode .rack-area {
        height: 144px;
    }
    .game-shell.large-tile-mode .rack-board {
        height: 114px;
        min-height: 114px;
        grid-template-rows: repeat(2, 56px);
    }
    .game-shell.large-tile-mode .rack-row {
        height: 56px;
        min-height: 56px;
    }
    .game-shell.extra-large-tile-mode .rack-row {
        height: 63px;
        min-height: 63px;
    }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell {
        grid-template-rows: 27px minmax(0, 1fr) 136px;
    }
    .game-shell .rack-area {
        height: 114px;
    }
    .game-shell.extra-large-tile-mode .rack-area {
        height: 136px;
    }
    .game-shell.large-tile-mode .rack-board {
        height: 106px;
        min-height: 106px;
        grid-template-rows: repeat(2, 52px);
    }
    .game-shell.large-tile-mode .rack-row {
        height: 52px;
        min-height: 52px;
    }
    .game-shell.extra-large-tile-mode .rack-row {
        height: 59px;
        min-height: 59px;
    }
}
.return-taken-tile { border-color: #f0b34f !important; background: linear-gradient(#a85b24, #733217) !important; }

/* Yetersiz yardımsız açılış yalnız hamleyi yapan oyuncunun ekranında görünür. */
.game-shell .rejected-opening-actions {
    position: absolute;
    right: 7px;
    bottom: 5px;
    left: auto;
    z-index: 18;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    transform: none;
    pointer-events: auto;
}
.game-shell .rejected-opening-actions button {
    min-height: 25px;
    padding: 2px 9px;
    border-color: #ffe08b;
    background: linear-gradient(#d58a28, #8e451b);
    color: white;
    font-weight: 900;
}
.game-shell .rejected-opening-preview {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: .18rem .55rem;
    max-width: 100%;
    pointer-events: none;
}
.game-shell .rejected-opening-preview.pair-preview {
    flex-direction: column;
    max-height: 100%;
}
.game-shell .rejected-opening-meld {
    border: 1px dashed #ffb85c !important;
    background: #51211ccc !important;
    box-shadow: 0 0 8px #ff7b3666;
    pointer-events: none;
}
.return-taken-at-source {
    position: static;
    z-index: 35;
    width: 62px;
    flex: 0 0 62px;
    min-height: 25px;
    padding: 3px 4px;
    border-radius: 6px;
    color: #fff4d2;
    font-size: .48rem;
    font-weight: 900;
    line-height: 1.05;
    box-shadow: 0 0 0 1px #ffd26d, 0 0 12px #ff9e35cc, 0 3px 8px #00131f99;
    animation: return-taken-pulse .78s ease-in-out infinite alternate;
}
.discard-source-cluster {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    transform: translate(-30px, -50%);
}
@keyframes return-taken-pulse {
    from { filter: brightness(.92); box-shadow: 0 0 0 1px #ffd26d, 0 0 5px #ff9e3588, 0 3px 8px #00131f99; }
    to { filter: brightness(1.35); box-shadow: 0 0 0 2px #fff0a5, 0 0 18px #ffb13ee8, 0 3px 8px #00131f99; }
}
@media (prefers-reduced-motion: reduce) {
    .return-taken-at-source { animation: none; }
}
.offline-auth-divider { display: flex; align-items: center; gap: .55rem; color: #718f83; font-size: .68rem; }
.offline-auth-divider::before, .offline-auth-divider::after { content: ""; flex: 1; height: 1px; background: #ffffff1c; }
.offline-play-button {
    border: 1px solid #d8ad48;
    color: #fff3c5;
    background: linear-gradient(180deg, #92631d, #60400f);
    box-shadow: inset 0 1px #ffe59a66, 0 5px 12px #0005;
}
.offline-play-note { color: #85a197; text-align: center; font-size: .62rem; }
.nearby-name-field { display: grid; gap: .3rem; margin-top: .65rem; text-align: left; }
.nearby-name-field label { margin: 0; color: #a9d8dc; font-size: .68rem; }
.nearby-name-field input { width: 100%; }
.nearby-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .55rem; }
.nearby-actions button { min-height: 42px; }
.nearby-actions .nearby-primary { color: #092f3a; border-color: #78e6e8; background: linear-gradient(180deg, #a4f4ef, #49bfc4); font-weight: 800; }
.nearby-table-list { display: grid; gap: .4rem; margin-top: .55rem; }
.nearby-table-list > button { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .55rem .7rem; border: 1px solid #66dbe366; border-radius: 10px; color: #ecffff; background: #073d4fb8; text-align: left; }
.nearby-table-list span { display: grid; }
.nearby-table-list small { color: #8ed4d8; font-size: .62rem; letter-spacing: .14em; }
.nearby-guest-strip { grid-template-columns: 42px 1fr; }
.nearby-search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: #02131dcc;
    backdrop-filter: blur(5px);
}
.nearby-search-card {
    width: min(88vw, 360px);
    display: grid;
    justify-items: center;
    gap: .55rem;
    padding: 1.35rem 1.1rem 1rem;
    border: 1px solid #71e4e59c;
    border-radius: 18px;
    color: #f3ffff;
    text-align: center;
    background: linear-gradient(155deg, #0b5366f2, #052937fa 68%);
    box-shadow: inset 0 1px #ffffff24, 0 18px 48px #000a, 0 0 28px #4be4e52e;
}
.nearby-search-card strong { font-size: 1.05rem; }
.nearby-search-card small { color: #acd9dd; line-height: 1.4; }
.nearby-search-card button {
    margin-top: .25rem;
    padding: .48rem .85rem;
    border: 1px solid #8bdde06b;
    border-radius: 999px;
    color: #dfffff;
    background: #073b4a;
}
.nearby-search-radar {
    position: relative;
    width: 64px;
    aspect-ratio: 1;
    border: 2px solid #7df5ed;
    border-radius: 50%;
    background: radial-gradient(circle, #7df5ed 0 4px, transparent 5px 15px, #7df5ed40 16px 17px, transparent 18px 26px, #7df5ed28 27px 28px, transparent 29px);
    box-shadow: 0 0 24px #59f3e875;
    overflow: hidden;
}
.nearby-search-radar i {
    position: absolute;
    inset: 50% 50% 0 0;
    transform-origin: 100% 0;
    background: linear-gradient(35deg, transparent 38%, #7df5edb8);
    animation: nearby-radar-spin 1.15s linear infinite;
}
.nearby-search-result {
    display: grid;
    place-items: center;
    width: 58px;
    aspect-ratio: 1;
    border-radius: 50%;
    color: #07382f;
    font-size: 1.65rem;
    font-weight: 900;
    background: #71efc2;
    box-shadow: 0 0 24px #71efc27a;
}
.nearby-search-result.empty { color: #e8f9fa; background: #54727b; box-shadow: none; }
@keyframes nearby-radar-spin { to { transform: rotate(360deg); } }
.nearby-tables-open {
    width: 100%;
    min-height: 42px;
    margin-top: .55rem;
    border: 1px solid #78e6e88c;
    border-radius: 12px;
    color: #eaffff;
    background: #07465a;
    font-weight: 800;
}
.nearby-tables-backdrop {
    position: fixed;
    inset: 0;
    z-index: 12100;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    background: #00131ee8;
    backdrop-filter: blur(7px);
}
.nearby-tables-card {
    width: min(92vw, 400px);
    max-height: 82vh;
    display: grid;
    gap: .6rem;
    align-content: start;
    overflow-y: auto;
    padding: 18px;
    border: 2px solid #71e4e5;
    border-radius: 22px;
    color: #effcff;
    background: linear-gradient(155deg, #0b4255, #052839 58%, #031b29);
    box-shadow: 0 24px 70px #000d, inset 0 1px #ffffff24;
}
.nearby-tables-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nearby-tables-card header > div { display: grid; gap: 3px; }
.nearby-tables-card header small { color: #83ddd9; font-size: .52rem; font-weight: 900; letter-spacing: .12em; }
.nearby-tables-card header strong { color: #ffe477; font-size: 1.15rem; }
.nearby-tables-card header button { width: 31px; height: 31px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: #ffffff18; font-size: 1.25rem; }
.nearby-tables-hint, .nearby-tables-empty { margin: 0; color: #b7d9df; font-size: .65rem; line-height: 1.45; }
.nearby-tables-card .nearby-table-list { margin-top: 0; }
.nearby-tables-card .nearby-table-list > button { min-height: 52px; }
.nearby-tables-research {
    width: 100%;
    min-height: 42px;
    margin-top: .15rem;
    border: 1px solid #8bdde06b;
    border-radius: 12px;
    color: #dfffff;
    background: #073b4a;
    font-weight: 700;
}
.room-table-name { color: #ffe477; font-size: .95rem; }
.nearby-serving-panel { display: grid; gap: .6rem; padding: 1rem; border: 1px solid #71e4e559; border-radius: 16px; background: #04222fb8; }
.nearby-serving-panel h2 { margin: 0; color: #ffe477; font-size: 1.05rem; }
.nearby-serving-panel > p { margin: 0; color: #cfe9ee; font-size: .66rem; line-height: 1.55; }
.nearby-serving-panel b { color: #7df5ed; }
.nearby-serving-players { display: grid; gap: .35rem; }
.nearby-serving-players > span { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem .65rem; border: 1px solid #66dbe33d; border-radius: 10px; background: #073d4f80; }
.nearby-serving-players b { color: #ecffff; font-size: .68rem; }
.nearby-serving-players small { color: #8ed4d8; font-size: .56rem; }
.nearby-serving-players > span.bot small { color: #e8c765; }
.nearby-serving-note { color: #f0b6a8; font-size: .56rem; }
.nearby-invite-backdrop {
    position: fixed;
    inset: 0;
    z-index: 12300;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: #00131ee8;
    backdrop-filter: blur(6px);
}
.nearby-invite-card {
    width: min(90vw, 340px);
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 1.25rem 1.1rem 1rem;
    border: 2px solid #71e4e5;
    border-radius: 20px;
    color: #f3ffff;
    text-align: center;
    background: linear-gradient(155deg, #0b5366f2, #052937fa 68%);
    box-shadow: inset 0 1px #ffffff24, 0 18px 48px #000a, 0 0 28px #4be4e52e;
}
.nearby-invite-icon {
    display: grid;
    place-items: center;
    width: 54px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #0a3f52;
    box-shadow: 0 0 22px #4be4e54d;
    font-size: 1.5rem;
}
.nearby-invite-card strong { color: #ffe477; font-size: 1.05rem; }
.nearby-invite-card p { margin: 0; color: #dff4f7; font-size: .7rem; line-height: 1.5; }
.nearby-invite-card b { color: #7df5ed; }
.nearby-invite-card small { color: #93c4cd; font-size: .56rem; }
.nearby-invite-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; margin-top: .3rem; }
.nearby-invite-actions button { min-height: 42px; margin: 0; border: 1px solid #8bdde06b; border-radius: 12px; color: #dfffff; background: #073b4a; font-weight: 700; }
.nearby-invite-actions .primary { border-color: #78e6e8; color: #092f3a; background: linear-gradient(180deg, #a4f4ef, #49bfc4); font-weight: 800; }
body.rack-drag-active .meld.layoff-drop-target {
    outline: 2px dashed #e8c85988;
    outline-offset: 3px;
    transition: outline-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
body.rack-drag-active .meld.layoff-drop-target.drag-over {
    z-index: 12;
    outline: 3px solid #ffe36b;
    box-shadow: 0 0 0 4px #47d68d55, 0 0 20px #ffe36b99;
    transform: translateY(-2px) scale(1.04);
}
.rack-tile.dragging.layoff-ready { box-shadow: 0 0 0 4px #47d68d, 0 0 18px #ffe36b; }

/* Istaka üzerinde taşlar sessizce yer açar; sürüklenen taş parmağı gecikmesiz izler. */
body.rack-drag-active .rack-slot > .rack-tile:not(.dragging) {
    transition: translate .15s cubic-bezier(.2, .8, .2, 1), box-shadow .12s ease;
}
body.rack-drag-active .rack-slot.rack-gap-left > .rack-tile:not(.dragging) { translate: -18% 0; }
body.rack-drag-active .rack-slot.rack-gap-right > .rack-tile:not(.dragging) { translate: 18% 0; }
body.rack-drag-active .rack-slot > .rack-tile.dragging {
    translate: none;
    transition: none !important;
    will-change: transform;
}

/* Her oyuncunun yalnız son attığı taşı, orta oyun alanını daraltmadan
   iki yan sütunun üst/alt boşluklarında göster. */
.game-shell > .player-discard-pile {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    align-self: start;
    justify-self: center;
    width: 46px;
    min-height: 46px;
    margin: 2px;
}
.game-shell > .player-discard-pile.seat-top-left {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
}
.game-shell > .player-discard-pile.seat-bottom-left {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
}
.game-shell > .player-discard-pile.seat-top-right {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
}
.game-shell > .player-discard-pile.seat-self {
    grid-column: 3;
    grid-row: 2;
    align-self: end;
}

@media (orientation: landscape) and (max-height: 620px) {
    .profile-crop-card { width: min(88vw, 650px); grid-template-columns: minmax(190px, 280px) 1fr; align-items: center; }
    .profile-crop-heading { grid-column: 1 / -1; }
    .profile-crop-frame { grid-row: 2 / span 3; width: min(52vh, 280px); }
    .profile-crop-note { text-align: left; }
}

@media (orientation: landscape) {
    .opponent:nth-child(2) .opponent-identity,
    .opponent:nth-child(3) .opponent-identity {
        display: flex !important;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        min-height: 46px;
        overflow: visible;
    }
    .opponent:nth-child(2) .opponent-identity strong,
    .opponent:nth-child(3) .opponent-identity strong {
        display: block;
        max-height: 62px;
        overflow: hidden;
        color: #e9f5f8;
        font-size: .54rem;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
    .opponent:nth-child(2) .opponent-identity strong { transform: rotate(180deg); }
    .opponent:nth-child(2) .opponent-identity small,
    .opponent:nth-child(3) .opponent-identity small { display: none; }
    .opponent:nth-child(2) .profile-avatar,
    .opponent:nth-child(3) .profile-avatar {
        display: grid;
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
    }
}

/* Son yerleşim kuralları: üst menü için ayrılmış satırı tamamen geri kazan. */
.discard-corner-slot {
    position: absolute;
    z-index: 24;
    display: grid;
    place-items: center;
    width: 62px;
    min-height: 48px;
}
.discard-corner-slot.seat-top-left,
.discard-corner-slot.seat-bottom-left {
    left: calc(max(var(--discard-shell-padding, 1rem), var(--safe-side)) + (var(--discard-side-column, 145px) - 62px) / 2);
}
.discard-corner-slot.seat-top-right,
.discard-corner-slot.seat-self {
    right: calc(max(var(--discard-shell-padding, 1rem), var(--safe-side)) + (var(--discard-side-column, 145px) - 62px) / 2);
}
.discard-corner-slot.seat-top-left,
.discard-corner-slot.seat-top-right { top: 7px; }
.discard-corner-slot.seat-bottom-left,
.discard-corner-slot.seat-self { bottom: 225px; }
.discard-corner-slot .discard-source-cluster > .player-discard-pile {
    position: static;
    inset: auto;
    width: 60px;
    height: 54px;
    min-height: 54px;
    margin: 0;
    padding: 2px;
    overflow: visible;
    grid-template-rows: 9px 1fr;
}
.discard-corner-slot .discard-owner {
    width: 100%;
    font-size: .4rem;
    line-height: 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.discard-corner-slot .discard-history {
    overflow: visible;
    align-items: center;
}
.discard-corner-slot .player-discard-pile .table-tile {
    width: 28px;
    height: 38px;
    font-size: .82rem;
}
@media (orientation: landscape) and (max-height: 500px) {
    .discard-corner-slot.seat-bottom-left,
    .discard-corner-slot.seat-self { bottom: 159px; }
}
@media (orientation: landscape) and (max-height: 420px) {
    .discard-corner-slot.seat-bottom-left,
    .discard-corner-slot.seat-self { bottom: 148px; }
}
/* Alt köşe taşlarının alt kenarı, her taş boyutunda masanın alt sınırına oturur. */
.game-shell,
.game-shell.large-tile-mode,
.game-shell.extra-large-tile-mode { --lower-discard-offset: 180px; }
.game-shell .discard-corner-slot.seat-bottom-left,
.game-shell .discard-corner-slot.seat-self { bottom: var(--lower-discard-offset); }
.game-shell .rack-tile::before { width: 14px; height: 14px; }
.game-shell.large-tile-mode .rack-tile::before { width: 16px; height: 16px; }
.game-shell.extra-large-tile-mode .rack-tile::before { width: 19px; height: 19px; }
main.game-shell:is(.hole-ring-mode, .hole-filled-mode) .rack-tile::before {
    width: 13px;
    height: 13px;
    aspect-ratio: 1;
}
main.game-shell.large-tile-mode:is(.hole-ring-mode, .hole-filled-mode) .rack-tile::before {
    width: 15px;
    height: 15px;
}
main.game-shell.extra-large-tile-mode:is(.hole-ring-mode, .hole-filled-mode) .rack-tile::before {
    width: 18px;
    height: 18px;
}
main.game-shell:is(.hole-ring-mode, .hole-filled-mode) .table-tile::before {
    width: 28%;
    height: auto;
    aspect-ratio: 1;
}
.game-shell.hole-heart-mode :is(.rack-tile, .table-tile)::before {
    border: 1px solid #b9aa8c;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 56% 70%, 100% 100%;
    box-shadow: inset 2px 2px 3px #8f8169, inset -1px -1px 2px #fffdf4, 0 1px 1px #fff;
}
.game-shell.hole-heart-mode :is(.rack-tile, .table-tile).red::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 19C6.8 16.7 1.4 12 1.4 6.7C1.4 3.5 3.2 1.5 5.4 1.5C6.7 1.5 7.6 2.3 8 3.5C8.4 2.3 9.3 1.5 10.6 1.5C12.8 1.5 14.6 3.5 14.6 6.7C14.6 12 9.2 16.7 8 19Z' fill='%23d72720' stroke='%23740906' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(circle at 38% 32%, #fffdf4 0 17%, #f4ead3 53%, #c4b79e 72%, #eee4ce 77%); }
.game-shell.hole-heart-mode :is(.rack-tile, .table-tile).blue::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 19C6.8 16.7 1.4 12 1.4 6.7C1.4 3.5 3.2 1.5 5.4 1.5C6.7 1.5 7.6 2.3 8 3.5C8.4 2.3 9.3 1.5 10.6 1.5C12.8 1.5 14.6 3.5 14.6 6.7C14.6 12 9.2 16.7 8 19Z' fill='%231478d0' stroke='%2304366d' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(circle at 38% 32%, #fffdf4 0 17%, #f4ead3 53%, #c4b79e 72%, #eee4ce 77%); }
.game-shell.hole-heart-mode :is(.rack-tile, .table-tile).black::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 19C6.8 16.7 1.4 12 1.4 6.7C1.4 3.5 3.2 1.5 5.4 1.5C6.7 1.5 7.6 2.3 8 3.5C8.4 2.3 9.3 1.5 10.6 1.5C12.8 1.5 14.6 3.5 14.6 6.7C14.6 12 9.2 16.7 8 19Z' fill='%23303b3b' stroke='%23050707' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(circle at 38% 32%, #fffdf4 0 17%, #f4ead3 53%, #c4b79e 72%, #eee4ce 77%); }
.game-shell.hole-heart-mode :is(.rack-tile, .table-tile).yellow::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 19C6.8 16.7 1.4 12 1.4 6.7C1.4 3.5 3.2 1.5 5.4 1.5C6.7 1.5 7.6 2.3 8 3.5C8.4 2.3 9.3 1.5 10.6 1.5C12.8 1.5 14.6 3.5 14.6 6.7C14.6 12 9.2 16.7 8 19Z' fill='%23d5a300' stroke='%236b4a00' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(circle at 38% 32%, #fffdf4 0 17%, #f4ead3 53%, #c4b79e 72%, #eee4ce 77%); }
.game-shell.hole-ring-mode :is(.rack-tile, .table-tile)::before {
    border: 0;
    box-shadow: inset 1px 1px 2px #5c5a55b8, inset -1px -1px 1px #fff, 0 1px 1px #fff;
}
.game-shell.hole-ring-mode :is(.rack-tile, .table-tile).red::before { background: radial-gradient(circle, #f4ead3 0 35%, #fff8e9 39%, #d92a22 44% 76%, #780b08 80% 87%, #eee4ce 91%); }
.game-shell.hole-ring-mode :is(.rack-tile, .table-tile).blue::before { background: radial-gradient(circle, #f4ead3 0 35%, #fff8e9 39%, #1479ce 44% 76%, #043971 80% 87%, #eee4ce 91%); }
.game-shell.hole-ring-mode :is(.rack-tile, .table-tile).black::before { background: radial-gradient(circle, #f4ead3 0 35%, #fff8e9 39%, #303a3a 44% 76%, #080b0b 80% 87%, #eee4ce 91%); }
.game-shell.hole-ring-mode :is(.rack-tile, .table-tile).yellow::before { background: radial-gradient(circle, #f4ead3 0 35%, #fff8e9 39%, #dbab0a 44% 76%, #795500 80% 87%, #eee4ce 91%); }
.game-shell.hole-filled-mode :is(.rack-tile, .table-tile)::before { filter: saturate(1.08); }
.game-shell .rack-tile,
.game-shell .table-tile {
    /* Köşeler hafif yuvarlak: 1px düz, 6px fazla yuvarlak duruyordu. */
    border-radius: 4px;
    /* En alttaki düşen gölge katmanı kaldırıldı: taşların altı gereğinden uzun
       görünüyordu. Kalan 2 piksellik kalınlık çizgisi hacmi veriyor. */
    box-shadow:
        inset 1px 1px 0 #fff,
        inset -2px -3px 0 #b7b7af,
        inset 0 0 0 2px #eeeeea,
        0 2px 0 #85857e;
}
.game-shell .table-tile::before {
    width: 31%;
    height: auto;
    aspect-ratio: 1;
}
.hole-style-options button { gap: 5px; }
.hole-preview { display: inline-block; width: 12px; height: 12px; flex: 0 0 12px; background: #d32620; box-shadow: inset 1px 1px 2px #650704, inset -1px -1px 1px #ff958d; }
.hole-preview.heart { position: relative; border: 1px solid #b9aa8c; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fffdf4, #f4ead3 52%, #c4b79e 72%, #eee4ce 77%); box-shadow: inset 1px 1px 2px #8f8169; }
.hole-preview.heart::after { content: "♥"; position: absolute; inset: 0; display: grid; place-items: center; color: #d32620; font: 900 8px/1 Arial, sans-serif; transform: scaleX(.76) scaleY(1.04); text-shadow: 0 1px #700; }
.hole-preview.ring { box-sizing: border-box; border: 3px solid #d32620; border-radius: 50%; background: #eee9dc; box-shadow: inset 1px 1px 2px #777; }
.hole-preview.filled { border-radius: 50%; }
.game-shell .rack-tile > span { transform: translateY(-7px); }
.game-shell.large-tile-mode .rack-tile > span { transform: translateY(-8px); }
.game-shell.extra-large-tile-mode .rack-tile > span { transform: translateY(-10px); }
@media (orientation: landscape) and (max-height: 500px) {
    .game-shell,
    .game-shell.large-tile-mode,
    .game-shell.extra-large-tile-mode { --lower-discard-offset: 151px; }
    .game-shell.large-tile-mode .rack-tile::before { width: 16px; height: 16px; }
    .game-shell.extra-large-tile-mode .rack-tile::before { width: 19px; height: 19px; }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell,
    .game-shell.large-tile-mode,
    .game-shell.extra-large-tile-mode { --lower-discard-offset: 143px; }
    .game-shell.large-tile-mode .rack-tile::before { width: 16px; height: 16px; }
    .game-shell.extra-large-tile-mode .rack-tile::before { width: 19px; height: 19px; }
}
.discard-drop-zone,
body.rack-drag-active .discard-drop-zone.enabled,
body.rack-drag-active .discard-drop-zone.enabled.drag-over {
    border-color: transparent;
    color: transparent;
    background: transparent;
    box-shadow: none;
}
.discard-drop-zone span { display: none; }
.game-shell { grid-template-rows: minmax(0, 1fr) auto; }
.game-shell .opponent:nth-child(1),
.game-shell .opponent:nth-child(2),
.game-shell .opponent:nth-child(3),
.game-shell .table-center,
.game-shell .meld-area,
.game-shell > .player-discard-pile { grid-row: 1; }
.game-shell .rack-area { grid-row: 2; }

/* Son atılan taşlar, yan oyuncu kartlarının üst ve altındaki dört sabit noktada. */
.game-shell {
    --discard-side-column: clamp(90px, 11vw, 145px);
    --discard-shell-padding: 1rem;
}
.game-shell > .player-discard-pile {
    position: absolute;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 46px;
    min-height: 46px;
    margin: 0;
}
.game-shell > .player-discard-pile.seat-top-left,
.game-shell > .player-discard-pile.seat-bottom-left {
    left: calc(var(--discard-shell-padding) + (var(--discard-side-column) - 46px) / 2);
}
.game-shell > .player-discard-pile.seat-top-right,
.game-shell > .player-discard-pile.seat-self {
    right: calc(var(--discard-shell-padding) + (var(--discard-side-column) - 46px) / 2);
}
.game-shell > .player-discard-pile.seat-top-left,
.game-shell > .player-discard-pile.seat-top-right { top: 7px; }
.game-shell > .player-discard-pile.seat-bottom-left,
.game-shell > .player-discard-pile.seat-self { bottom: 190px; }

@media (orientation: landscape) and (max-height: 500px) {
    .game-shell {
        --discard-side-column: 58px;
        --discard-shell-padding: .3rem;
    }
    .game-shell > .player-discard-pile.seat-bottom-left,
    .game-shell > .player-discard-pile.seat-self { bottom: 124px; }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell > .player-discard-pile.seat-bottom-left,
    .game-shell > .player-discard-pile.seat-self { bottom: 113px; }
}
.app-update-backdrop { position: fixed; inset: 0; z-index: 20000; display: grid; place-items: center; box-sizing: border-box; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: #00111ded; backdrop-filter: blur(10px); }
.app-update-card { width: min(390px, 100%); box-sizing: border-box; display: grid; justify-items: center; gap: 12px; padding: 28px 22px 22px; border: 1px solid #75e1df77; border-radius: 24px; text-align: center; color: #efffff; background: linear-gradient(155deg, #0a4960, #052738 68%, #061d29); box-shadow: 0 24px 80px #000c, inset 0 1px #ffffff1c; }
.app-update-card .app-update-icon { display: grid; place-items: center; width: 66px; height: 66px; border: 2px solid #ffe070; border-radius: 50%; color: #052738; background: linear-gradient(145deg, #fff08a, #eeb72c); box-shadow: 0 0 28px #ffd95b55; font-size: 2rem; font-weight: 900; }
.app-update-card > small { color: #ffe178; font-size: .65rem; font-weight: 900; letter-spacing: .18em; }
.app-update-card h2 { margin: 0; color: white; font-size: 1.32rem; }
.app-update-card p { margin: 0; max-width: 290px; color: #c6e0e7; font-size: .78rem; line-height: 1.5; }
.app-update-versions { display: flex; width: 100%; justify-content: center; gap: 9px; }
.app-update-versions span { min-width: 105px; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid #76dce344; border-radius: 12px; color: #9fcbd3; background: #001b29aa; font-size: .62rem; }
.app-update-versions b { color: #fff2ae; font-size: .78rem; }
.app-update-card .primary { width: 100%; margin-top: 3px; padding: 12px 16px; border-radius: 13px; }
.app-update-actions { width: 100%; display: grid; gap: 8px; }
.app-update-card .app-update-later { width: 100%; padding: 10px 16px; border: 1px solid #8acbd655; border-radius: 13px; color: #d7edf1; background: #082d3c; font-weight: 800; }
.app-update-reminder { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: 8px 0 2px; padding: 9px 11px; border: 1px solid #f5d55c88; border-radius: 14px; color: #f5fbff; text-align: left; background: linear-gradient(105deg, #0a4d5f, #073445); box-shadow: 0 8px 20px #00131e55; }
.app-update-reminder > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #082b38; background: linear-gradient(145deg, #fff08a, #eeb72c); font-size: 1.2rem; font-weight: 900; }
.app-update-reminder > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.app-update-reminder strong { font-size: .75rem; }
.app-update-reminder small { color: #afd1d8; font-size: .58rem; }
.app-update-reminder b { padding: 7px 10px; border-radius: 9px; color: #082b38; background: #f5d35d; font-size: .66rem; }
/* Sırası gelen oyuncuyu masada bir bakışta gösterir. */
.game-shell .opponent.active-player {
    position: relative;
    isolation: isolate;
    /* Açılış/per rozeti kartın masa tarafına taşar. Aktif oyuncunun yeşil
       süre dolgusu rozeti kırpmasın; dolgunun kendisi aşağıda sınırlandırılır. */
    overflow: visible;
    border-color: #ffe263;
    background: linear-gradient(145deg, #183f4c, #0b293a);
    box-shadow: 0 0 0 2px #ffe2639c, 0 0 20px #ffe26399, inset 0 1px #fff5b899;
    animation: active-player-glow 1.15s ease-in-out infinite alternate;
}
.game-shell .opponent.active-player::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,
        hsl(var(--turn-hue, 120) 78% 30%),
        hsl(var(--turn-hue, 120) 78% 49%) 76%,
        hsl(var(--turn-hue, 120) 88% 63%));
    box-shadow: inset -2px 0 #d8ff9caa;
    clip-path: inset(0 calc(100% - var(--turn-progress, 100%)) 0 0);
    transition: clip-path 1s linear, background 1s linear;
}
.game-shell .opponent.active-player > * {
    position: relative;
    z-index: 1;
}
.game-shell .opponent.active-player .opponent-identity strong,
.game-shell .opponent.active-player i { color: #fff7bd; text-shadow: 0 1px 3px #241700; }
.game-turn-chip.own-turn {
    isolation: isolate;
    border-color: #ffe263;
    background: linear-gradient(145deg, #183f4c, #0b293a);
    box-shadow: 0 0 0 2px #ffe26355, 0 0 15px #ffe26370;
}
.game-turn-chip.own-turn::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: -1;
    width: var(--turn-progress, 100%);
    border-radius: inherit;
    background: linear-gradient(90deg,
        hsl(var(--turn-hue, 120) 78% 30%),
        hsl(var(--turn-hue, 120) 78% 49%) 76%,
        hsl(var(--turn-hue, 120) 88% 63%));
    box-shadow: inset -2px 0 #fff3a0aa;
    transition: width 1s linear, background 1s linear;
}

/* Yan koltuklarda zaman dolgusu kart yönüne uyar: süre azaldıkça renkli alan
   üst kenardan aşağı doğru çekilir. */
.game-shell .opponent:nth-child(2).active-player::before,
.game-shell .opponent:nth-child(3).active-player::before {
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(calc(100% - var(--turn-progress, 100%)) 0 0 0);
    writing-mode: horizontal-tb;
    transform: none;
}
.your-turn-flash {
    position: fixed;
    top: max(54px, calc(env(safe-area-inset-top) + 42px));
    left: 50%;
    z-index: 180;
    display: grid;
    min-width: min(72vw, 410px);
    padding: 13px 30px 16px;
    transform: translate(-50%, 0);
    border: 2px solid #ffe36c;
    border-radius: 18px;
    color: #fffbe0;
    text-align: center;
    background: linear-gradient(135deg, #0a5067ed, #157648f2 55%, #8e6900ed);
    box-shadow: 0 0 0 5px #ffe36c26, 0 12px 45px #001824d9, 0 0 38px #ffe36c82;
    pointer-events: none;
    /* Eski animasyon 1.6 saniyede opacity:0 ile bitiyordu ve "both" yüzünden
       rozet görünmez kalıyordu. Artık yalnız giriş oynuyor, rozet ekranda
       duruyor; dokununca kapanıyor. */
    animation: your-turn-in .26s ease-out both;
}
.your-turn-flash small { font-size: .72rem; font-weight: 800; letter-spacing: .32em; }
.your-turn-flash strong { font-size: clamp(1.8rem, 5vw, 3.15rem); line-height: 1.05; letter-spacing: .09em; }
/* Rozet dokunusu yutmasin: ekranin her yerine dokunmak onu kapatir ve
   dokunus altindaki tasa/masaya gecer (rack.js dinliyor). */
.your-turn-flash { pointer-events: none; }
.your-turn-flash em { margin-top: 4px; color: #ffeaa7c2; font-size: .58rem; font-style: normal; font-weight: 800; letter-spacing: .12em; }


/* Açılmış eller taş sayısına göre masaya sığacak biçimde dinamik ölçeklenir. */
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] {
    --opened-tile-width: 25px;
    --opened-tile-height: 34px;
    --opened-tile-font: .78rem;
    --opened-meld-gap-x: 7px;
    --opened-meld-gap-y: 3px;
    --opened-series-rows: 4;
    min-width: 0;
    overflow: hidden;
}
.game-shell .meld-area.meld-density-roomy {
    --opened-tile-width: 30px;
    --opened-tile-height: 40px;
    --opened-tile-font: .94rem;
    --opened-meld-gap-x: 10px;
    --opened-meld-gap-y: 5px;
    --opened-series-rows: 3;
}
.game-shell .meld-area.meld-density-compact {
    --opened-tile-width: 21px;
    --opened-tile-height: 29px;
    --opened-tile-font: .68rem;
    --opened-meld-gap-x: 5px;
    --opened-meld-gap-y: 2px;
    --opened-series-rows: 5;
}
.game-shell .meld-area.meld-density-dense {
    --opened-tile-width: 18px;
    --opened-tile-height: 25px;
    --opened-tile-font: .58rem;
    --opened-meld-gap-x: 3px;
    --opened-meld-gap-y: 1px;
    --opened-series-rows: 6;
}
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .table-melds {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    gap: var(--opened-meld-gap-y) var(--opened-meld-gap-x);
    overflow: hidden;
}
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .series-meld-list {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-rows: repeat(var(--opened-series-rows), max-content);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-content: center;
    gap: var(--opened-meld-gap-y) var(--opened-meld-gap-x);
    padding: 1px;
    overflow: visible;
}
.game-shell .meld-area[class*="meld-density-"] .meld {
    min-width: 0;
    padding: 1px;
}
.game-shell .meld-area[class*="meld-density-"] .meld .table-tile {
    width: var(--opened-tile-width);
    height: var(--opened-tile-height);
    padding-bottom: calc(var(--opened-tile-height) * .16);
    font-size: var(--opened-tile-font);
}
.game-shell .meld-area[class*="meld-density-"] .meld small {
    max-width: 38px;
    margin-left: 2px;
    overflow: hidden;
    font-size: clamp(.32rem, calc(var(--opened-tile-font) * .52), .46rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.game-shell .meld-area[class*="meld-density-"] .pair-meld-columns {
    min-width: 0;
    gap: var(--opened-meld-gap-x);
}
.game-shell .meld-area[class*="meld-density-"] .pair-meld-column {
    min-width: calc(var(--opened-tile-width) + 3px);
    gap: var(--opened-meld-gap-y);
    padding: 1px;
}
.game-shell .meld-area[class*="meld-density-"] .pair-meld small {
    max-width: var(--opened-tile-width);
    margin: 1px 0 0;
}

@media (orientation: landscape) and (max-height: 420px) {
    .game-shell .meld-area.meld-density-roomy {
        --opened-tile-width: 27px;
        --opened-tile-height: 36px;
        --opened-tile-font: .84rem;
    }
    .game-shell .meld-area.meld-density-standard {
        --opened-tile-width: 23px;
        --opened-tile-height: 31px;
        --opened-tile-font: .72rem;
    }
    .game-shell .meld-area.meld-density-compact {
        --opened-tile-width: 19px;
        --opened-tile-height: 26px;
        --opened-tile-font: .61rem;
    }
    .game-shell .meld-area.meld-density-dense {
        --opened-tile-width: 16px;
        --opened-tile-height: 22px;
        --opened-tile-font: .52rem;
    }
}
@keyframes active-player-glow {
    from { filter: brightness(.95); }
    to { filter: brightness(1.18); }
}
@keyframes your-turn-in {
    0% { opacity: 0; transform: translate(-50%, 0) scale(.78); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Oyuncu kartları sabit boyutta kalır; açılış sayısı ve ikramlar masa tarafında gösterilir. */
.game-shell .opponent { position: relative; }
/* Açılış rozeti yalnız bir sayı olduğunda neyi anlattığı belirsizdi; artık
   üstünde "AÇILIŞ"/"ÇİFT" etiketi olan, sayısı büyük bir hap şeklinde. */
.game-shell .opponent .opponent-opening {
    position: absolute;
    z-index: 26;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1px;
    width: auto;
    min-width: 32px;
    height: auto;
    min-height: 26px;
    padding: 2px 5px;
    border: 1px solid #ffd96d;
    border-radius: 9px;
    color: #fff4bb;
    /* "Per toplamı" rozetiyle aynı görünüm: bordo zemin, altın çerçeve. */
    background: linear-gradient(180deg, #8d1b2f, #4d0716);
    box-shadow: inset 0 1px #ffffff42, 0 3px 8px #230008c7, 0 0 9px #ff405b55;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    transform: none;
}
.game-shell .opponent .opponent-opening small {
    color: #ffcf8a;
    font-size: .32rem;
    letter-spacing: .07em;
}
.game-shell .opponent .opponent-opening b {
    color: #fffbe2;
    font-size: .66rem;
    text-shadow: 0 1px 2px #00121d;
}
/* Çiftle açılış farklı bir kural; rengi de ayrışsın. */
.game-shell .opponent .opponent-opening.opened-with-pairs {
    border-color: #ffd96d;
    background: linear-gradient(180deg, #8d1b2f, #4d0716);
}
.game-shell .opponent .opponent-opening.opened-with-pairs small { color: #ffcf8a; }
.game-shell .opponent:nth-child(1) .opponent-opening {
    top: 50%;
    right: -13px;
    bottom: auto;
    transform: translateY(-50%);
}
.game-shell .opponent:nth-child(2) .opponent-opening {
    top: auto;
    right: -12px;
    bottom: 4px;
    left: auto;
    transform: none;
}
.game-shell .opponent:nth-child(3) .opponent-opening {
    top: auto;
    right: auto;
    bottom: 4px;
    left: -12px;
    transform: none;
}
.game-shell .opponent .player-table-treat {
    z-index: 27;
    display: grid;
    grid-template-columns: 27px minmax(0, 42px);
    align-items: center;
    gap: 2px;
    width: max-content;
    min-width: 44px;
    height: 36px;
    padding: 3px 5px 3px 3px;
    border-radius: 11px;
    pointer-events: none;
}
.game-shell .opponent .player-table-treat b {
    font-size: 1.32rem;
    line-height: 1;
}
.game-shell .opponent .player-table-treat small {
    overflow: hidden;
    max-width: 42px;
    font-size: .44rem;
    font-weight: 800;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.game-shell .opponent:nth-child(1) .player-table-treat {
    top: calc(100% + 6px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
.game-shell .opponent:nth-child(2) .player-table-treat {
    top: 50%;
    right: auto;
    bottom: auto;
    left: calc(100% + 11px);
    transform: translateY(-50%);
}
.game-shell .opponent:nth-child(3) .player-table-treat {
    top: 50%;
    right: calc(100% + 11px);
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
}

/* İkramlar masada doğrudan ürün olarak görünür; kart, etiket ve çerçeve kullanılmaz. */
.game-shell .opponent .player-table-treat,
.game-shell .rack-own-treat {
    display: block;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 4px 4px #00131fb0);
}
.game-shell .opponent .player-table-treat b,
.game-shell .rack-own-treat b {
    display: block;
    font-size: 2rem;
    line-height: 1;
}
.game-shell .opponent .player-table-treat small,
.game-shell .rack-own-treat small { display: none; }
.game-shell .rack-own-treats {
    top: -38px;
    right: 10px;
    min-height: 34px;
    padding: 0;
    gap: 4px;
}
.game-shell .rack-own-treat {
    margin-left: -3px;
    animation: rackTreatArrive .45s cubic-bezier(.18,.88,.3,1.22);
}
.game-shell .opponent .player-table-treats {
    position: absolute;
    z-index: 27;
    display: flex;
    align-items: center;
    gap: 3px;
    width: max-content;
}
.game-shell .opponent:nth-child(1) .player-table-treats {
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
}
.game-shell .opponent:nth-child(2) .player-table-treats {
    top: 50%;
    left: calc(100% + 11px);
    transform: translateY(-50%);
}
.game-shell .opponent:nth-child(3) .player-table-treats {
    top: 50%;
    right: calc(100% + 11px);
    transform: translateY(-50%);
}
.game-shell .opponent .player-table-treats .player-table-treat,
.game-shell .rack-own-treat {
    position: static;
    inset: auto;
    margin: 0;
    padding: 0;
    border: 0;
    appearance: none;
    background: transparent;
    transform: none;
    cursor: pointer;
    pointer-events: auto;
}
.game-shell .opponent .player-table-treats .player-table-treat:active,
.game-shell .rack-own-treat:active { transform: scale(.88); }

.game-player-social-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    width: 100%;
    margin-top: 3px;
}
.game-player-social-actions button {
    min-height: 38px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #fff;
    font-size: .73rem;
    font-weight: 800;
    cursor: pointer;
}
.game-player-social-actions .message { background: linear-gradient(145deg,#147e9c,#07546f); }
.game-player-social-actions .friend { background: linear-gradient(145deg,#77a72a,#3e741b); }
.game-player-social-actions .relation,
.game-player-social-actions button:disabled { opacity: .72; cursor: default; }

.game-direct-message-backdrop {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: center;
    padding: 14px;
    background: rgba(0,12,22,.68);
    backdrop-filter: blur(3px);
}
.game-direct-message-card {
    width: min(88vw,350px);
    padding: 14px;
    border: 1px solid rgba(113,222,238,.42);
    border-radius: 18px;
    background: linear-gradient(155deg,#0b4359,#062a3c 72%);
    box-shadow: 0 18px 52px rgba(0,0,0,.46);
    color: #fff;
}
.game-direct-message-card header,
.game-direct-message-card header div,
.game-direct-message-card form > div { display: flex; align-items: center; }
.game-direct-message-card header { justify-content: space-between; margin-bottom: 3px; }
.game-direct-message-card header div { gap: 8px; }
.game-direct-message-card header span { font-size: 1.15rem; }
.game-direct-message-card header button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 1.25rem;
}
.game-direct-message-card > small {
    display: block;
    margin-bottom: 10px;
    color: #a9cbd6;
    font-size: .7rem;
}
.game-direct-message-card textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 76px;
    resize: none;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    outline: none;
    background: rgba(0,16,27,.55);
    color: #fff;
    font: inherit;
    font-size: .82rem;
}
.game-direct-message-card form > div {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 9px;
}
.game-direct-message-card form button {
    min-width: 88px;
    min-height: 36px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-weight: 800;
}
.game-direct-message-card .cancel { background: rgba(255,255,255,.1); }
.game-direct-message-card .send { background: linear-gradient(145deg,#77a72a,#3e741b); }
.game-direct-message-card .send:disabled { opacity: .55; }

.auth-error-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0, 12, 20, .74);
    backdrop-filter: blur(4px);
    animation: authErrorFadeIn .16s ease-out;
}
.auth-error-modal {
    width: min(86vw, 340px);
    display: grid;
    justify-items: center;
    gap: 9px;
    padding: 22px 20px 18px;
    border: 1px solid rgba(255, 133, 112, .6);
    border-radius: 20px;
    background: linear-gradient(155deg, #123c4a, #071f2b 72%);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .55), inset 0 1px rgba(255,255,255,.08);
    color: #fff;
    text-align: center;
    animation: authErrorPopIn .2s cubic-bezier(.2,.8,.25,1.15);
}
.auth-error-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 2px solid #ff9a88;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #d85b4c, #932e2a);
    box-shadow: 0 0 22px rgba(255, 93, 72, .38);
    font-size: 1.55rem;
    font-weight: 900;
}
.auth-error-modal h2 { margin: 1px 0 0; color: #fff2ee; font-size: 1.15rem; }
.auth-error-modal p { margin: 0; color: #cce2e7; font-size: .83rem; line-height: 1.45; }
.auth-error-modal button {
    width: 100%;
    min-height: 42px;
    margin-top: 5px;
    border: 0;
    border-radius: 12px;
    color: #092630;
    background: linear-gradient(180deg, #f8d55d, #d9a928);
    box-shadow: inset 0 1px rgba(255,255,255,.6), 0 7px 17px rgba(0,0,0,.25);
    font-weight: 900;
}
@keyframes authErrorFadeIn { from { opacity: 0; } }
@keyframes authErrorPopIn { from { opacity: 0; transform: translateY(10px) scale(.95); } }

.game-player-social-actions button:only-child { grid-column: 1 / -1; }
.game-profile-locked-note {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid rgba(246,207,80,.3);
    border-radius: 11px;
    color: #f5df9a;
    background: rgba(44,35,7,.35);
    font-size: .7rem;
    text-align: center;
}
.profile-privacy-setting {
    width: 100%;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(111,213,226,.28);
    border-radius: 13px;
    color: #e7faff;
    background: rgba(3,30,41,.66);
    text-align: left;
}
.profile-privacy-setting.locked {
    border-color: rgba(247,201,77,.55);
    background: linear-gradient(135deg,rgba(75,59,11,.68),rgba(17,43,48,.75));
}
.profile-privacy-icon { font-size: 1.35rem; text-align: center; }
.profile-privacy-setting > span:nth-child(2) { display: grid; gap: 2px; }
.profile-privacy-setting strong { font-size: .8rem; }
.profile-privacy-setting small { color: #9fc3cb; font-size: .63rem; }
.profile-privacy-setting i {
    min-width: 48px;
    padding: 5px 7px;
    border-radius: 999px;
    color: #d5edf2;
    background: rgba(255,255,255,.08);
    font-size: .66rem;
    font-style: normal;
    font-weight: 800;
    text-align: center;
}
.profile-privacy-setting.locked i { color: #142c2e; background: #f3cb4f; }

.direct-message-typing {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 2px;
    color: #9ec8d0;
    font-size: .67rem;
}
.direct-message-typing > span { display: flex; gap: 3px; }
.direct-message-typing i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #72d9e7;
    animation: directTypingDot .9s infinite ease-in-out;
}
.direct-message-typing i:nth-child(2) { animation-delay: .14s; }
.direct-message-typing i:nth-child(3) { animation-delay: .28s; }
@keyframes directTypingDot { 0%,60%,100% { transform: translateY(0); opacity:.45; } 30% { transform: translateY(-3px); opacity:1; } }

/* Gerçek okeye dokununca taş yükselir, arka yüzünü gösterip aynı göze oturur. */
.game-shell .rack-tile.okey-tap-flip {
    z-index: 90;
    transform-origin: 50% 82%;
    transform-style: preserve-3d;
    will-change: transform;
    pointer-events: none;
}
.game-shell .rack-tile.okey-flip-to-back {
    animation: okeyFlipToBack .68s cubic-bezier(.22,.72,.24,1) both !important;
}
.game-shell .rack-tile.okey-flip-to-front {
    animation: okeyFlipToFront .68s cubic-bezier(.22,.72,.24,1) both !important;
}
.game-shell .rack-tile.okey-face-down {
    transform: rotateY(180deg);
    transform-style: preserve-3d;
}
.game-shell .rack-tile.okey-face-down.dragging {
    transform: translate3d(var(--drag-x, 0), var(--drag-y, -8px), 0) rotateY(180deg) scale(1.08);
}
.game-shell .rack-tile:is(.okey-tap-flip, .okey-face-down) > span,
.game-shell .rack-tile:is(.okey-tap-flip, .okey-face-down) > small,
.game-shell .rack-tile:is(.okey-tap-flip, .okey-face-down)::before {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.game-shell .rack-tile:is(.okey-tap-flip, .okey-face-down)::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: 8;
    display: grid;
    place-items: center;
    border: 1px solid #b9b7ad;
    border-radius: 1px;
    background: #f1f1ec;
    box-shadow: none;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.game-shell .rack-tile.okey-face-down:not(.okey-tap-flip) {
    transform: none;
    background: #f1f1ec;
    box-shadow: none;
}
.game-shell .rack-tile.okey-face-down.dragging:not(.okey-tap-flip) {
    z-index: 90;
    transform: translate3d(var(--drag-x, 0), var(--drag-y, -8px), 0) scale(1.08);
    opacity: .88;
}
.game-shell .rack-tile.okey-face-down:not(.okey-tap-flip) > span,
.game-shell .rack-tile.okey-face-down:not(.okey-tap-flip) > small,
.game-shell .rack-tile.okey-face-down:not(.okey-tap-flip)::before {
    opacity: 0 !important;
    visibility: hidden !important;
}
.game-shell .rack-tile.okey-face-down:not(.okey-tap-flip)::after {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.game-shell .rack-tile.okey-face-down.okey-tap-flip > span,
.game-shell .rack-tile.okey-face-down.okey-tap-flip > small,
.game-shell .rack-tile.okey-face-down.okey-tap-flip::before {
    opacity: 1 !important;
    visibility: visible !important;
}
.game-shell .rack-tile.okey-flip-to-back > span,
.game-shell .rack-tile.okey-flip-to-back > small,
.game-shell .rack-tile.okey-flip-to-back::before {
    opacity: 0 !important;
    visibility: hidden !important;
}
.game-shell .rack-tile.okey-flip-to-back::after {
    opacity: 1;
    visibility: visible;
    transform: none;
}
@keyframes okeyFlipToBack {
    0% { transform: translateY(0) rotateY(0deg) scale(1); }
    50% { transform: translateY(-19px) rotateY(90deg) scale(1.07); }
    100% { transform: translateY(0) rotateY(180deg) scale(1); }
}
@keyframes okeyFlipToFront {
    0% { transform: translateY(0) rotateY(180deg) scale(1); }
    50% { transform: translateY(-19px) rotateY(270deg) scale(1.07); }
    100% { transform: translateY(0) rotateY(360deg) scale(1); }
}

.game-shell .rack-tile.group-armed:not(.dragging) {
    z-index: 75;
    outline: 2px solid #72e9d0;
    outline-offset: 1px;
    animation: rackGroupArmed .2s ease-in-out 2 !important;
}
@keyframes rackGroupArmed {
    0%, 100% { translate: 0 0; }
    35% { translate: -2px 0; }
    70% { translate: 2px 0; }
}

/* Taş gövdelerini büyütmeden tüm oyun taşlarının rakamlarını biraz belirginleştir. */
.game-shell .rack-tile > span,
.game-shell .table-tile > .tile-number {
    font-size: 1.18em;
    line-height: 1;
}
.game-shell .table-tile > .tile-number {
    position: relative;
    z-index: 1;
    transform: translateY(-1px);
}

/* Varsayılan en büyük görünümü bir kademe daha iri tut. */
.game-shell.extra-large-tile-mode .rack-slot {
    transform: scaleX(1.14);
}
.game-shell.extra-large-tile-mode .table-center > .indicator-block .table-tile {
    width: 37px;
    height: 50px;
    font-size: 1.06rem;
}
.game-shell.extra-large-tile-mode .discard-corner-slot .player-discard-pile .table-tile {
    width: 31px;
    height: 41px;
    font-size: .88rem;
}

/* Akıcı ıstaka etkileşimi: parmak hareketi yalnız compositor katmanında
   işlenir; taş ve komşuları yeniden layout üretmeden kayar. */
.game-shell .rack-board {
    touch-action: none;
    overscroll-behavior: contain;
}
.game-shell .rack-slot {
    contain: layout style;
}
.game-shell .rack-tile {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
body.rack-drag-active .game-shell .rack-tile.dragging {
    transform: translate3d(var(--drag-x, 0), var(--drag-y, -8px), 0) scale(1.08) !important;
    transition: none !important;
    will-change: transform;
    pointer-events: none;
}
body.rack-drag-active .game-shell .rack-slot > .rack-tile:not(.dragging) {
    transition: translate 140ms cubic-bezier(.22,.78,.22,1), box-shadow 90ms linear;
}
@media (prefers-reduced-motion: reduce) {
    body.rack-drag-active .game-shell .rack-slot > .rack-tile:not(.dragging) {
        transition-duration: 1ms;
    }
}

/* Taş yalnız oyuncunun sağındaki son-atılan-taş kutusuna bırakılarak atılır. */
.discard-corner-slot.seat-self.discard-target-enabled {
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 7px;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease, transform .12s ease;
}
body.rack-drag-active .discard-corner-slot.seat-self.discard-target-enabled {
    border-color: #72e99a;
    background: linear-gradient(145deg, #1bc96a2e, #087c4a3d);
    box-shadow: inset 0 0 12px #57ff9b22, 0 0 8px #26e97f55;
}
body.rack-drag-active .discard-corner-slot.seat-self.discard-target-enabled::after {
    content: "BIRAK";
    position: absolute;
    left: 50%;
    bottom: -11px;
    transform: translateX(-50%);
    color: #baffcf;
    font-size: .4rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-shadow: 0 1px 2px #001b0d;
    pointer-events: none;
}
body.rack-drag-active .discard-corner-slot.seat-self.discard-target-enabled.discard-target-hover {
    border-color: #eaff87;
    background: linear-gradient(145deg, #4ff58e75, #0aae607a);
    box-shadow: inset 0 0 16px #d5ff9f55, 0 0 15px #66ff9dcc;
    transform: scale(1.06);
}
body.rack-drag-active .discard-corner-slot.seat-self.discard-target-enabled.discard-target-hover::after {
    content: "TAŞI BIRAK";
    color: #f1ffd5;
}
.discard-corner-slot.seat-self.discard-target-not-turn {
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 7px;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease, transform .12s ease;
}
body.rack-drag-active .discard-corner-slot.seat-self.discard-target-not-turn.discard-target-forbidden {
    z-index: 80;
    border-color: #ff776f;
    background: linear-gradient(145deg, #e52e3a70, #74131a8c);
    box-shadow: inset 0 0 15px #ff9b9155, 0 0 17px #ff3f4aaa;
    transform: scale(1.06);
}
body.rack-drag-active .discard-corner-slot.seat-self.discard-target-not-turn.discard-target-forbidden::before {
    content: "×";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 2px solid #fff4ef;
    border-radius: 50%;
    color: #fff;
    background: #b51520e8;
    box-shadow: 0 2px 8px #2e0000cc;
    font-size: 1.25rem;
    font-weight: 950;
    line-height: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
body.rack-drag-active .discard-corner-slot.seat-self.discard-target-not-turn.discard-target-forbidden::after {
    content: "SIRA SİZDE DEĞİL";
    position: absolute;
    right: 0;
    bottom: -14px;
    z-index: 6;
    width: max-content;
    padding: 2px 6px;
    border: 1px solid #ff9a94;
    border-radius: 6px;
    color: #fff;
    background: #7f1319f2;
    box-shadow: 0 2px 7px #210000aa;
    font-size: .42rem;
    font-weight: 950;
    letter-spacing: .03em;
    pointer-events: none;
}
.rack-tile.discard-blocked {
    outline: 2px solid #ff625b;
    outline-offset: -2px;
    filter: drop-shadow(0 0 5px #ff332dcc);
}
.discard-corner-slot.discard-target-denied {
    animation: discardTargetDenied .3s ease-in-out;
}
@keyframes discardTargetDenied {
    0%, 100% { translate: 0 0; }
    25% { translate: -5px 0; }
    55% { translate: 5px 0; }
    80% { translate: -3px 0; }
}
.game-shell.extra-large-tile-mode .meld-area.meld-density-roomy {
    --opened-tile-width: 32px;
    --opened-tile-height: 42px;
    --opened-tile-font: 1.02rem;
}
.game-shell.extra-large-tile-mode .meld-area.meld-density-standard {
    --opened-tile-width: 27px;
    --opened-tile-height: 36px;
    --opened-tile-font: .84rem;
}
.game-shell.extra-large-tile-mode .meld-area.meld-density-compact {
    --opened-tile-width: 22px;
    --opened-tile-height: 30px;
    --opened-tile-font: .73rem;
}
.game-shell.extra-large-tile-mode .meld-area.meld-density-dense {
    --opened-tile-width: 19px;
    --opened-tile-height: 26px;
    --opened-tile-font: .63rem;
}
@media (orientation: landscape) {
    .game-shell {
        grid-template-rows: minmax(0, 1fr) 170px;
    }
    .game-shell.extra-large-tile-mode .rack-area {
        height: 170px;
    }
    .game-shell.extra-large-tile-mode .rack-board {
        height: 160px;
        min-height: 160px;
        grid-template-rows: repeat(2, 79px);
    }
    .game-shell.extra-large-tile-mode .rack-row {
        height: 79px;
        min-height: 79px;
    }
}
@media (orientation: landscape) and (max-height: 500px) {
    .game-shell {
        grid-template-rows: minmax(0, 1fr) 144px;
    }
    .game-shell.extra-large-tile-mode .rack-area {
        height: 144px;
    }
    .game-shell.extra-large-tile-mode .rack-board {
        height: 132px;
        min-height: 132px;
        grid-template-rows: repeat(2, 65px);
    }
    .game-shell.extra-large-tile-mode .rack-row {
        height: 65px;
        min-height: 65px;
    }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell {
        grid-template-rows: minmax(0, 1fr) 136px;
    }
    .game-shell.extra-large-tile-mode .rack-area {
        height: 136px;
    }
    .game-shell.extra-large-tile-mode .rack-board {
        height: 124px;
        min-height: 124px;
        grid-template-rows: repeat(2, 61px);
    }
    .game-shell.extra-large-tile-mode .rack-row {
        height: 61px;
        min-height: 61px;
    }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-roomy {
        --opened-tile-width: 29px;
        --opened-tile-height: 38px;
        --opened-tile-font: .91rem;
    }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-standard {
        --opened-tile-width: 25px;
        --opened-tile-height: 33px;
        --opened-tile-font: .78rem;
    }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-compact {
        --opened-tile-width: 20px;
        --opened-tile-height: 27px;
        --opened-tile-font: .66rem;
    }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-dense {
        --opened-tile-width: 17px;
        --opened-tile-height: 23px;
        --opened-tile-font: .57rem;
    }
}

/* Açılan eller masanın sol üstünden başlar; alt orta çekme alanı daima boş kalır. */
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] {
    justify-content: flex-start;
    padding: 58px 10px 106px;
}
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .table-melds {
    align-content: start;
    justify-content: start;
    justify-items: start;
    position: relative;
    overflow: visible;
}
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .series-meld-list {
    align-content: start;
    justify-content: start;
    justify-items: start;
}
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .pair-meld-columns {
    align-self: start;
    max-height: none;
    overflow: visible;
}
@media (orientation: landscape) and (max-height: 500px) {
    .game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] {
        padding: 46px 8px 76px;
    }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] {
        padding: 42px 7px 68px;
    }
}

/* Büyük taş modlarında yuvaları genişletmek komşu taşların üstüne bindiriyordu. */
.game-shell.large-tile-mode .rack-row,
.game-shell.extra-large-tile-mode .rack-row {
    width: 100%;
    margin-inline: 0;
}
.game-shell.large-tile-mode .rack-slot,
.game-shell.extra-large-tile-mode .rack-slot {
    transform: none;
}

/* Masadaki ikramlar için küçük, okunabilir bardak ve şişe çizimleri. */
.table-treat-options { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.treat-visual {
    position: relative;
    display: inline-block !important;
    flex: 0 0 auto;
    width: 30px;
    height: 36px;
    font-size: 0 !important;
    filter: drop-shadow(0 3px 2px #00131f99);
}
.treat-visual::before,
.treat-visual::after { content: ""; position: absolute; display: block; }

/* İnce belli, tabaklı çay ve sarı oralet bardağı. */
.treat-visual:is(.treat-tea, .treat-oralet)::before {
    top: 2px;
    left: 7px;
    width: 16px;
    height: 26px;
    box-sizing: border-box;
    border: 1px solid #e8fbffcc;
    border-top-color: #ffffff;
    clip-path: polygon(5% 0, 95% 0, 78% 42%, 88% 100%, 12% 100%, 22% 42%);
    background: linear-gradient(90deg, #fff7 0 12%, transparent 22% 72%, #fff5 82%), linear-gradient(to bottom, #f4d9a5 0 12%, #a6430b 15% 100%);
    box-shadow: inset 1px 0 #fff7, inset -1px 0 #6c270788;
}
.treat-visual:is(.treat-tea, .treat-oralet)::after {
    left: 3px;
    bottom: 3px;
    width: 24px;
    height: 6px;
    border: 1px solid #b8cbd0;
    border-radius: 50%;
    background: radial-gradient(ellipse, #dce8e8 0 35%, #f8ffff 39% 58%, #a9bec2 62% 70%, transparent 72%);
}
.treat-visual.treat-oralet::before {
    background: linear-gradient(90deg, #fff8 0 12%, transparent 22% 72%, #fff5 82%), linear-gradient(to bottom, #fff1a1 0 12%, #f2b600 15% 100%);
    box-shadow: inset 1px 0 #fff9, inset -1px 0 #9c650077;
}

/* Soda ve kırmızı etiketli klasik kola şişesi. */
.treat-visual:is(.treat-soda, .treat-cola) {
    width: 22px;
    border: 1px solid #d7f7ffcc;
    border-radius: 4px 4px 7px 7px;
    clip-path: polygon(34% 0, 66% 0, 67% 13%, 82% 24%, 88% 92%, 76% 100%, 24% 100%, 12% 92%, 18% 24%, 33% 13%);
    background: linear-gradient(90deg, #fff8 0 12%, transparent 25% 72%, #fff5 86%), linear-gradient(#b8f4ff 0 20%, #73d5df 22% 100%);
    box-shadow: inset 2px 0 #fff6, inset -2px 0 #16778366;
}
.treat-visual:is(.treat-soda, .treat-cola)::after {
    top: 0;
    left: 7px;
    width: 8px;
    height: 3px;
    border-radius: 2px;
    background: #d9edf0;
    box-shadow: inset 0 -1px #70898e;
}
.treat-visual.treat-soda::before {
    top: 16px;
    left: 3px;
    width: 14px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(#1aa9cf, #08779e);
    box-shadow: inset 0 1px #bdf4ff88;
}
.treat-visual.treat-cola {
    border-color: #d7b697;
    background: linear-gradient(90deg, #fff5 0 10%, transparent 24% 72%, #e8b87955 86%), linear-gradient(#5d2415 0 18%, #32120b 22% 100%);
}
.treat-visual.treat-cola::before {
    content: "Coca";
    top: 15px;
    left: 2px;
    width: 16px;
    height: 11px;
    border-radius: 2px;
    color: #fff;
    background: #d71920;
    font: italic 700 5px/11px Georgia, serif;
    text-align: center;
    letter-spacing: -.25px;
}
.treat-visual.treat-cola::after { background: #d71920; box-shadow: inset 0 -1px #76080c; }

/* Türk kahvesi: köpüklü küçük fincan ve tabağı. */
.treat-visual.treat-coffee::before {
    top: 8px;
    left: 4px;
    width: 20px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid #f7f4e9;
    border-radius: 3px 3px 8px 8px;
    background: radial-gradient(ellipse at 50% 12%, #d6ad75 0 22%, #5c2d16 25% 41%, #fffdf5 44%);
    box-shadow: inset 0 -3px #d9d2c1;
}
.treat-visual.treat-coffee::after {
    left: 2px;
    bottom: 4px;
    width: 26px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(ellipse, #d6cdbb 0 36%, #fffdf5 40% 67%, #bdb5a7 70% 76%, transparent 78%);
}
.treat-visual.treat-coffee { background: radial-gradient(circle at 26px 17px, transparent 0 4px, #f7f4e9 4.5px 6px, transparent 6.5px); }

.treat-visual.treat-toast::before {
    content: "🥪";
    inset: 0;
    font: 28px/36px "Segoe UI Emoji", sans-serif;
    text-align: center;
}
.game-shell .opponent .player-table-treat .treat-visual,
.game-shell .rack-own-treat .treat-visual {
    width: 30px;
    height: 36px;
    font-size: 0 !important;
}

/* Üretilmiş gerçekçi ikram görselleri; önceki CSS şekillerini tamamen geçersiz kılar. */
.treat-visual,
.treat-visual.treat-soda,
.treat-visual.treat-cola,
.treat-visual.treat-coffee {
    width: 42px;
    height: 44px;
    border: 0;
    border-radius: 0;
    clip-path: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: none;
    filter: drop-shadow(0 3px 3px #00131faa);
}
.treat-visual:not(.treat-toast)::before,
.treat-visual:not(.treat-toast)::after { display: none !important; }
.treat-visual.treat-tea { background-image: url("images/treats/tea.png"); }
.treat-visual.treat-oralet { background-image: url("images/treats/oralet.png"); }
.treat-visual.treat-soda { background-image: url("images/treats/soda.png"); }
.treat-visual.treat-cola { background-image: url("images/treats/cola.png"); }
.treat-visual.treat-coffee { background-image: url("images/treats/turkish-coffee.png"); }
.treat-visual.treat-toast { background: transparent; }
.treat-visual.treat-toast::before { display: block !important; }
.game-shell .opponent .player-table-treat .treat-visual,
.game-shell .rack-own-treat .treat-visual {
    width: 38px;
    height: 42px;
}

.treat-action-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11250;
    display: grid;
    place-items: center;
    padding: 14px;
    background: #00121d99;
    backdrop-filter: blur(3px);
}
.treat-action-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 8px 13px;
    width: min(92vw, 390px);
    padding: 17px;
    border: 1px solid #e8c86b99;
    border-radius: 18px;
    color: #f7fbff;
    background: linear-gradient(155deg, #173f58, #071e31 70%);
    box-shadow: 0 20px 55px #000c, inset 0 1px #ffffff26;
}
.treat-action-card > .treat-visual { width: 72px; height: 72px; grid-row: 1 / span 2; }
.treat-action-card > div:not(.treat-action-buttons) { display: grid; gap: 3px; }
.treat-action-card strong { color: #ffe58d; font-size: 1rem; }
.treat-action-card small { color: #b9d1df; font-size: .68rem; }
.treat-action-card p { grid-column: 1 / -1; margin: 2px 0; color: #d4e3ea; font-size: .68rem; line-height: 1.45; }
.treat-action-buttons { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.treat-action-buttons button { min-height: 38px; border: 1px solid #76a5bb77; border-radius: 10px; color: #eefaff; background: #17435d; font-weight: 800; }
.treat-action-buttons button.danger { border-color: #ee7c7099; background: linear-gradient(#aa493f, #6f2522); }
.treat-action-buttons button:disabled { opacity: .55; }

/* Yan oyuncu ikramları açılan taş alanına değil, oyuncu kartının içine yerleşir. */
.game-shell .opponent:nth-child(2) .player-table-treats,
.game-shell .opponent:nth-child(3) .player-table-treats {
    top: auto;
    right: auto;
    bottom: 5px;
    left: 50%;
    justify-content: center;
    width: calc(100% - 8px);
    gap: 0;
    transform: translateX(-50%);
}
.game-shell .opponent:nth-child(2) .player-table-treat .treat-visual,
.game-shell .opponent:nth-child(3) .player-table-treat .treat-visual {
    width: 30px;
    height: 34px;
}

/* Yan kartların adı ve açılış puanı boş kalır; ikramlar masa kenarındaki dikey şeritte durur. */
.game-shell .opponent:nth-child(2) .player-table-treats,
.game-shell .opponent:nth-child(3) .player-table-treats {
    top: 50%;
    bottom: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 34px;
    gap: 2px;
    transform: translateY(-50%);
}
.game-shell .opponent:nth-child(2) .player-table-treats {
    right: auto;
    left: calc(100% + 5px);
}
.game-shell .opponent:nth-child(3) .player-table-treats {
    right: calc(100% + 5px);
    left: auto;
}
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] {
    padding-right: 48px;
    padding-left: 48px;
}
@media (orientation: landscape) and (max-height: 500px) {
    .game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] {
        padding-right: 42px;
        padding-left: 42px;
    }
}

/* Üst oyuncunun ikramları kartın solunda, küçük ve yatay görünür. */
.game-shell .opponent:nth-child(1) .player-table-treats {
    top: 50%;
    right: calc(100% + 6px);
    left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    width: max-content;
    transform: translateY(-50%);
}
.game-shell .opponent:nth-child(1) .player-table-treat .treat-visual {
    width: 30px;
    height: 34px;
}

/* Istakanın sağındaki açma kontrolleri: küçük toplam rozeti, büyük eylemler. */
.rack-right-tools {
    width: 70px;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 4px;
    padding-top: 3px;
}
.rack-per-score-badge {
    position: absolute;
    top: -27px;
    right: 6px;
    z-index: 16;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 54px;
    min-height: 25px;
    padding: 3px 6px;
    border: 1px solid #a4f2d8;
    border-radius: 8px;
    color: #eafff8;
    background: linear-gradient(180deg, #27877b, #10505a);
    box-shadow: inset 0 1px #e4fff57a, 0 2px 6px #001a28b8;
    font-family: Arial, sans-serif;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.rack-per-score-badge small {
    font-size: .48rem;
    font-weight: 950;
    letter-spacing: .04em;
}
.rack-per-score-badge b {
    color: #fff6a8;
    font-size: .74rem;
    font-weight: 950;
    text-shadow: 0 1px 2px #002a27;
}
.rack-right-tools .rack-score {
    position: static;
    width: 29px;
    height: 29px;
    border-width: 1px;
    box-shadow: 0 2px 5px #001b31, inset 0 1px #aee7ff;
    font-size: .73rem;
}
.rack-score-penalty-stack {
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 100%;
}
.rack-score-penalty-stack .own-penalty-trigger {
    width: 100%;
}
.rack-score-penalty-stack .own-opening-summary {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 27px;
    padding: 2px 3px;
    overflow: hidden;
    border: 1px solid #ffd96d;
    border-radius: 6px;
    color: #fff4bb;
    background: linear-gradient(180deg, #8d1b2f, #4d0716);
    box-shadow: inset 0 1px #ffffff42, 0 2px 6px #230008c7;
    font: 900 .47rem/1 Arial, sans-serif;
    text-align: center;
    white-space: normal;
}
.rack-score-penalty-stack .own-opening-summary b,
.rack-score-penalty-stack .own-opening-summary small { display: block; line-height: 1; }
.rack-score-penalty-stack .own-opening-summary small { color: #ffcf8a; font-size: .36rem; letter-spacing: .07em; }
.rack-score-penalty-stack .own-opening-summary b { margin-top: 2px; color: #fff4bb; font-size: .74rem; text-shadow: 0 1px 2px #1b1200; }
.rack-score-penalty-stack .own-opening-summary.opened-with-pairs {
    border-color: #ffd96d;
    background: linear-gradient(180deg, #8d1b2f, #4d0716);
}
.rack-score-penalty-stack .own-opening-summary.opened-with-pairs small { color: #ffcf8a; }
.rack-right-tools .rack-open-action {
    width: 100%;
    min-height: 38px;
    padding: 4px 3px;
    border-width: 2px;
    font-size: .63rem;
    font-weight: 900;
    line-height: 1.08;
}
.rack-right-tools .rack-open-action.ready-to-open {
    border-color: #d9ff9e;
    color: #fff;
    background: linear-gradient(#77ca45, #287b25);
    animation: rack-open-ready-pulse .72s ease-in-out infinite alternate;
}
@keyframes rack-open-ready-pulse {
    from {
        filter: brightness(1);
        box-shadow: inset 0 1px #eaffc5, 0 2px 5px #002b14aa, 0 0 0 #69ef75;
    }
    to {
        filter: brightness(1.28);
        box-shadow: inset 0 1px #fff, 0 2px 5px #002b14aa, 0 0 10px 3px #69ef75cc;
    }
}
@media (orientation: landscape) and (max-height: 500px) {
    .rack-right-tools { width: 68px; gap: 3px; }
    .rack-right-tools .rack-score { width: 27px; height: 27px; font-size: .68rem; }
    .rack-right-tools .rack-open-action { min-height: 34px; font-size: .59rem; }
}
@media (prefers-reduced-motion: reduce) {
    .rack-right-tools .rack-open-action.ready-to-open {
        animation: none;
        box-shadow: 0 0 9px 3px #69ef75aa;
    }
}

/* Sol ıstaka araçları mevcut dikey boşluğu eşit ve daha yüksek kullanır. */
.rack-left-tools {
    justify-content: stretch;
}
.rack-left-tools > button,
.rack-left-tools > .assist-control {
    flex: 1 1 0;
    min-height: 0;
}
.rack-left-tools > .assist-control > .assist-toggle {
    height: 100%;
    min-height: 0;
}

/* Sag istaka araclarinin ucu de ayni yukseklikte: Ceza, Perler, Cifler.
   Sutunda sonradan acilan gizli bir dugme yok - el acilmadan once
   "Perleri ac / Cifleri ac", acildiktan sonra "Perleri isle / Cifleri isle"
   gelir, sayi her zaman uctur - bu yuzden ortak bir yukseklik verilebiliyor.
   Onceden Ceza dugmesi 28px, digerleri 38px idi ve sutun sol sutuna gore
   kirik duruyordu.

   Burada soldaki gibi "flex: 1 1 0" ile bolusum yapilamiyor: sutunun
   yuksekligi icerikten geliyor ve ilk oge duz bir dugme degil, Ceza
   dugmesini saran bir kutu. Basis sifirlaninca ucu birden cokuyor ve
   ust uste biniyordu. Bu yuzden ortak sabit yukseklik kullaniliyor. */
.rack-right-tools > .rack-open-action,
.rack-right-tools .own-penalty-trigger {
    min-height: 38px;
}
@media (orientation: landscape) and (max-height: 500px) {
    .rack-right-tools > .rack-open-action,
    .rack-right-tools .own-penalty-trigger {
        min-height: 34px;
    }
}

/* Masa ile ıstaka tek çizgide birleşir; taş boyutu değişince arada boşluk oluşmaz. */
@media (orientation: landscape) {
    .game-shell {
        row-gap: 0;
    }
    .game-shell .rack-area {
        align-self: stretch;
        height: 100%;
        margin-block: 0;
        margin-inline: auto;
    }
}

/* Tek sabit taş boyutu: her ıstaka yuvası yatayda 3px daha geniştir. */
@media (orientation: landscape) {
    .game-shell .rack-area {
        width: min(1014px, calc(100% - 4px));
    }
}
.game-shell.extra-large-tile-mode .table-center > .indicator-block .table-tile {
    width: 40px;
}
.game-shell.extra-large-tile-mode .discard-corner-slot .player-discard-pile .table-tile {
    width: 34px;
}
.game-shell.extra-large-tile-mode .meld-area.meld-density-roomy { --opened-tile-width: 35px; }
.game-shell.extra-large-tile-mode .meld-area.meld-density-standard { --opened-tile-width: 30px; }
.game-shell.extra-large-tile-mode .meld-area.meld-density-compact { --opened-tile-width: 25px; }
.game-shell.extra-large-tile-mode .meld-area.meld-density-dense { --opened-tile-width: 22px; }
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell.extra-large-tile-mode .meld-area.meld-density-roomy { --opened-tile-width: 32px; }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-standard { --opened-tile-width: 28px; }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-compact { --opened-tile-width: 23px; }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-dense { --opened-tile-width: 20px; }
}

/* Masa kurulumunun ilk adımı: arkadaş masası veya rastgele eşleşme. */
.table-audience-card { gap: 9px; }
.table-audience-choice {
    position: relative;
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 3px 10px;
    min-height: 78px;
    padding: 11px 12px;
    border: 1px solid #75c8d878;
    border-radius: 15px;
    color: #effcff;
    text-align: left;
    background: linear-gradient(135deg, #0b4055, #062b3c);
    box-shadow: inset 0 1px #ffffff20, 0 5px 14px #00131f66;
}
.table-audience-choice > span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background: #ffffff12;
    font-size: 1.45rem;
}
.table-audience-choice > b { align-self: end; color: #fff1a4; font-size: .76rem; }
.table-audience-choice > small { align-self: start; color: #b7d7df; font-size: .54rem; line-height: 1.35; }
.table-audience-choice > i {
    grid-column: 3;
    grid-row: 1 / 3;
    color: #92e9d3;
    font-size: .55rem;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}
.table-audience-choice.friend-choice {
    border-color: #f1d768;
    background: linear-gradient(135deg, #315c45, #0b433c 55%, #073140);
    box-shadow: inset 0 1px #fff3a544, 0 0 14px #f1d76825;
}
.table-audience-choice:active { transform: scale(.985); filter: brightness(1.15); }

.game-shell.extra-large-tile-mode .table-center > .indicator-block .table-tile {
    width: 40px;
    height: 50px;
}
.game-shell.extra-large-tile-mode .meld-area.meld-density-roomy {
    --opened-tile-width: calc(35px + var(--tile-width-adjust));
    --opened-tile-height: calc(42px + var(--tile-height-adjust));
}
.game-shell.extra-large-tile-mode .meld-area.meld-density-standard {
    --opened-tile-width: calc(30px + var(--tile-width-adjust));
    --opened-tile-height: calc(36px + var(--tile-height-adjust));
}
.game-shell.extra-large-tile-mode .meld-area.meld-density-compact {
    --opened-tile-width: calc(25px + var(--tile-width-adjust));
    --opened-tile-height: calc(30px + var(--tile-height-adjust));
}
.game-shell.extra-large-tile-mode .meld-area.meld-density-dense {
    --opened-tile-width: calc(22px + var(--tile-width-adjust));
    --opened-tile-height: calc(26px + var(--tile-height-adjust));
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell.extra-large-tile-mode .meld-area.meld-density-roomy {
        --opened-tile-width: calc(32px + var(--tile-width-adjust));
        --opened-tile-height: calc(38px + var(--tile-height-adjust));
    }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-standard {
        --opened-tile-width: calc(28px + var(--tile-width-adjust));
        --opened-tile-height: calc(33px + var(--tile-height-adjust));
    }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-compact {
        --opened-tile-width: calc(23px + var(--tile-width-adjust));
        --opened-tile-height: calc(27px + var(--tile-height-adjust));
    }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-dense {
        --opened-tile-width: calc(20px + var(--tile-width-adjust));
        --opened-tile-height: calc(23px + var(--tile-height-adjust));
    }
}

/* Açılmış taşlar yalnız masadaki taş sayısına göre ölçeklenir ve bütün
   yoğunluklarda 3:4 oranı korunur. */
.game-shell.extra-large-tile-mode .meld-area.meld-density-roomy {
    --opened-tile-width: 33px;
    --opened-tile-height: 44px;
    --opened-tile-font: 1.02rem;
}
.game-shell.extra-large-tile-mode .meld-area.meld-density-standard {
    --opened-tile-width: 28.5px;
    --opened-tile-height: 38px;
    --opened-tile-font: .84rem;
}
.game-shell.extra-large-tile-mode .meld-area.meld-density-compact {
    --opened-tile-width: 24px;
    --opened-tile-height: 32px;
    --opened-tile-font: .73rem;
}
.game-shell.extra-large-tile-mode .meld-area.meld-density-dense {
    --opened-tile-width: 19.5px;
    --opened-tile-height: 26px;
    --opened-tile-font: .63rem;
}
@media (orientation: landscape) and (max-height: 500px) {
    .game-shell.extra-large-tile-mode .meld-area.meld-density-roomy {
        --opened-tile-width: 29px;
        --opened-tile-height: 38.6667px;
        --opened-tile-font: .91rem;
    }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-standard {
        --opened-tile-width: 25px;
        --opened-tile-height: 33.3333px;
        --opened-tile-font: .78rem;
    }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-compact {
        --opened-tile-width: 20px;
        --opened-tile-height: 26.6667px;
        --opened-tile-font: .66rem;
    }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-dense {
        --opened-tile-width: 17px;
        --opened-tile-height: 22.6667px;
        --opened-tile-font: .57rem;
    }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell.extra-large-tile-mode .meld-area.meld-density-roomy {
        --opened-tile-width: 27px;
        --opened-tile-height: 36px;
    }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-standard {
        --opened-tile-width: 23.25px;
        --opened-tile-height: 31px;
    }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-compact {
        --opened-tile-width: 19.5px;
        --opened-tile-height: 26px;
    }
    .game-shell.extra-large-tile-mode .meld-area.meld-density-dense {
        --opened-tile-width: 16.5px;
        --opened-tile-height: 22px;
    }
}

/* Sabit oyun taşı ölçü dengesi: ıstaka biraz daha iri, masa göstergeleri ve
   yanlara atılan son taşlar daha kompakt. Açılmış per taşları etkilenmez. */
.game-shell.extra-large-tile-mode .rack-slot {
    height: calc(100% - 1px);
    transform: scaleX(1.17);
}
.game-shell.extra-large-tile-mode .rack-tile {
    font-size: 1.34rem;
}
.game-shell.extra-large-tile-mode .table-center > .indicator-block .table-tile {
    width: 30px;
    height: 40px;
    font-size: .84rem;
}
.game-shell.extra-large-tile-mode .discard-corner-slot .player-discard-pile .table-tile {
    width: 24px;
    height: 32px;
    font-size: .64rem;
}
@media (orientation: landscape) and (max-height: 500px) {
    .game-shell.extra-large-tile-mode .rack-tile { font-size: 1.28rem; }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell.extra-large-tile-mode .rack-tile { font-size: 1.22rem; }
}

/* Açılan eller masa sınırlarının içinde kalır. Seriler solda alt alta; her
   çiftin iki taşı yan yana ve çift grupları sağda alt alta sıralanır. */
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] {
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
}
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .table-melds {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-rows: max-content;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    max-height: none;
    gap: var(--opened-meld-gap-y) var(--opened-meld-gap-x);
    overflow: visible;
}
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .series-meld-list {
    box-sizing: border-box;
    display: flex;
    grid-column: 1;
    grid-row: 1;
    flex-flow: column nowrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    gap: var(--opened-meld-gap-y);
    overflow: visible;
}
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .pair-meld-columns {
    box-sizing: border-box;
    display: flex;
    grid-column: 2;
    grid-row: 1;
    flex-flow: column nowrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    justify-self: end;
    width: max-content;
    min-width: 0;
    max-width: 45%;
    min-height: 0;
    max-height: none;
    gap: var(--opened-meld-gap-y);
    padding: 1px;
    overflow: visible;
}
.game-shell .meld-area[class*="meld-density-"] .pair-meld {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0;
}
.game-shell .meld-area[class*="meld-density-"] .pair-meld .table-tile + .table-tile {
    margin-top: 0;
    margin-left: -1px;
}
.game-shell .meld-area[class*="meld-density-"] .pair-meld small {
    max-width: 34px;
    margin: 0 0 0 2px;
}

/* Istaka taşları birbirine yapışmadan, sürükleme yuvalarıyla aynı hizada kalır. */
.game-shell.extra-large-tile-mode .rack-row {
    column-gap: 2px;
}
.game-shell.extra-large-tile-mode .rack-slot {
    transform: scaleX(1.02);
}

/* Oyun kontrollerinde uzun basınca metin seçimi/kopyalama menüsü açılmasın. */
.game-shell button,
.game-shell [role="button"],
.game-shell .rack-score,
.game-shell .stock-pile,
.game-shell .player-card,
.game-shell .opponent {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Istaka taşı dikeyde 4px daha kısa; alt raya oturmaya devam eder. */
.game-shell.extra-large-tile-mode .rack-slot {
    height: calc(100% - 5px);
    align-self: end;
    transform-origin: center bottom;
}

/* Açılan seri/çift sütunu çok uzadığında ek bir yoğunluk kademesi kullanılır. */
.game-shell .meld-area.meld-density-ultra {
    --opened-tile-width: 15px;
    --opened-tile-height: 20px;
    --opened-tile-font: .49rem;
    --opened-meld-gap-x: 2px;
    --opened-meld-gap-y: 1px;
}
@media (orientation: landscape) and (max-height: 500px) {
    .game-shell .meld-area.meld-density-ultra {
        --opened-tile-width: 13.5px;
        --opened-tile-height: 18px;
        --opened-tile-font: .44rem;
    }
}

/* Çiftler sağ sütunun yüksekliği dolunca aşağı taşmak yerine sola sarar. */
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .table-melds {
    height: 100%;
    max-height: 100%;
}
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .pair-meld-columns {
    height: 100%;
    max-height: 100%;
    flex-flow: column wrap;
    align-content: flex-start;
    direction: rtl;
    gap: var(--opened-meld-gap-y) var(--opened-meld-gap-x);
}
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .pair-meld {
    direction: ltr;
}

/* Çiftler belirli sayıda satırdan sonra aşağı sarkmak yerine sağdan sola
   yeni sütuna geçer. Satır kapasitesi taş yoğunluğuyla birlikte değişir. */
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .pair-meld-columns {
    --opened-pair-rows: 5;
    display: grid;
    grid-template-rows: repeat(var(--opened-pair-rows), max-content);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-content: start;
    justify-content: end;
    height: max-content;
    max-height: 100%;
    direction: rtl;
}
.game-shell .meld-area.meld-density-roomy .pair-meld-columns { --opened-pair-rows: 3; }
.game-shell .meld-area.meld-density-standard .pair-meld-columns { --opened-pair-rows: 5; }
.game-shell .meld-area.meld-density-compact .pair-meld-columns { --opened-pair-rows: 7; }
.game-shell .meld-area.meld-density-dense .pair-meld-columns { --opened-pair-rows: 9; }
.game-shell .meld-area.meld-density-ultra .pair-meld-columns { --opened-pair-rows: 11; }

/* Açılan per butonları işlem yapılamadığı durumda disabled olsa da taşların
   gerçek renkleri solmaz. */
.game-shell .meld-area .meld:disabled,
.game-shell .meld-area .meld:disabled .table-tile {
    opacity: 1;
    filter: none;
}

@media (orientation: landscape) and (max-height: 500px) {
    .game-shell .meld-area.meld-density-standard .pair-meld-columns { --opened-pair-rows: 4; }
    .game-shell .meld-area.meld-density-compact .pair-meld-columns { --opened-pair-rows: 6; }
    .game-shell .meld-area.meld-density-dense .pair-meld-columns { --opened-pair-rows: 8; }
    .game-shell .meld-area.meld-density-ultra .pair-meld-columns { --opened-pair-rows: 10; }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell .meld-area.meld-density-roomy .pair-meld-columns { --opened-pair-rows: 2; }
    .game-shell .meld-area.meld-density-compact .pair-meld-columns { --opened-pair-rows: 5; }
    .game-shell .meld-area.meld-density-dense .pair-meld-columns { --opened-pair-rows: 7; }
    .game-shell .meld-area.meld-density-ultra .pair-meld-columns { --opened-pair-rows: 9; }
}

/* Seri perler, ıstakanın üstünde kalan gerçek masa yüksekliğini aşmadan
   yukarıdan aşağı dolar; kapasite bitince sağdaki yeni sütuna devam eder. */
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] {
    min-height: 0;
    overflow: hidden;
}
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .table-melds {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .series-meld-list {
    display: grid;
    grid-template-rows: repeat(var(--opened-series-rows), max-content);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-content: start;
    justify-content: start;
    width: max-content;
    height: max-content;
    max-height: 100%;
    overflow: visible;
}
.game-shell .meld-area.meld-density-roomy { --opened-series-rows: 3; }
.game-shell .meld-area.meld-density-standard { --opened-series-rows: 5; }
.game-shell .meld-area.meld-density-compact { --opened-series-rows: 7; }
.game-shell .meld-area.meld-density-dense { --opened-series-rows: 9; }
.game-shell .meld-area.meld-density-ultra { --opened-series-rows: 11; }

@media (orientation: landscape) and (max-height: 500px) {
    .game-shell .meld-area.meld-density-standard { --opened-series-rows: 4; }
    .game-shell .meld-area.meld-density-compact { --opened-series-rows: 6; }
    .game-shell .meld-area.meld-density-dense { --opened-series-rows: 8; }
    .game-shell .meld-area.meld-density-ultra { --opened-series-rows: 10; }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell .meld-area.meld-density-roomy { --opened-series-rows: 2; }
    .game-shell .meld-area.meld-density-standard { --opened-series-rows: 4; }
    .game-shell .meld-area.meld-density-compact { --opened-series-rows: 5; }
    .game-shell .meld-area.meld-density-dense { --opened-series-rows: 7; }
    .game-shell .meld-area.meld-density-ultra { --opened-series-rows: 9; }
}

/* Kısa telefon ekranında gösterge hattının üstü gerçek dikey kapasitedir. */
@media (orientation: landscape) and (max-height: 500px) {
    .game-shell .meld-area.meld-density-roomy { --opened-series-rows: 3; }
    .game-shell .meld-area.meld-density-standard { --opened-series-rows: 4; }
    .game-shell .meld-area.meld-density-compact { --opened-series-rows: 5; }
    .game-shell .meld-area.meld-density-dense { --opened-series-rows: 7; }
    .game-shell .meld-area.meld-density-ultra { --opened-series-rows: 9; }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell .meld-area.meld-density-roomy,
    .game-shell .meld-area.meld-density-standard { --opened-series-rows: 3; }
    .game-shell .meld-area.meld-density-compact { --opened-series-rows: 4; }
    .game-shell .meld-area.meld-density-dense { --opened-series-rows: 5; }
    .game-shell .meld-area.meld-density-ultra { --opened-series-rows: 7; }
}

/* Çift sütununu yüzdeyle ezme; her çift iki tam taş genişliğini korur. */
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] .pair-meld-columns {
    min-width: max-content;
    max-width: none;
    overflow: visible;
}
.game-shell .meld-area[class*="meld-density-"] .pair-meld .table-tile {
    flex: 0 0 var(--opened-tile-width);
    min-width: var(--opened-tile-width);
}

/* Yandaki son taşla el açılabiliyorsa oyuncuya açık bir görsel ipucu ver. */
.player-discard-pile.opens-hand {
    border-color: #a9ff72;
    animation: discard-opens-hand  .72s ease-in-out infinite alternate;
}
.player-discard-pile.opens-hand .table-tile {
    box-shadow: inset 1px 1px #fff, inset -2px -2px #b7b7af,
        0 0 0 2px #baff76, 0 0 13px #78ff74;
}
@keyframes discard-opens-hand {
    from {
        background: #0a4939d9;
        box-shadow: 0 0 0 1px #75e57a55, 0 0 5px #5aff6570;
        filter: brightness(1);
    }
    to {
        background: #25753fe8;
        box-shadow: 0 0 0 3px #dfff7977, 0 0 18px #85ff76e0;
        filter: brightness(1.28);
    }
}
@media (prefers-reduced-motion: reduce) {
    .player-discard-pile.opens-hand {
        animation: none;
        box-shadow: 0 0 0 3px #dfff7977, 0 0 15px #85ff76bb;
    }
}

/* Son yerleşim önceliği: yanlardaki per alanı ıstakaya kadar kullanılır. */
.game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] { padding-top: 58px; padding-bottom: 5px; }
.game-shell .meld-area.meld-density-roomy { --opened-series-rows: 6; --opened-pair-rows: 6; }
.game-shell .meld-area.meld-density-standard { --opened-series-rows: 7; --opened-pair-rows: 7; }
.game-shell .meld-area.meld-density-compact { --opened-series-rows: 9; --opened-pair-rows: 9; }
.game-shell .meld-area.meld-density-dense { --opened-series-rows: 11; --opened-pair-rows: 11; }
.game-shell .meld-area.meld-density-ultra { --opened-series-rows: 14; --opened-pair-rows: 14; }
@media (orientation: landscape) and (max-height: 500px) {
    .game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] { padding-top: 46px; padding-bottom: 4px; }
    .game-shell .meld-area.meld-density-roomy { --opened-series-rows: 6; --opened-pair-rows: 6; }
    .game-shell .meld-area.meld-density-standard { --opened-series-rows: 7; --opened-pair-rows: 7; }
    .game-shell .meld-area.meld-density-compact { --opened-series-rows: 9; --opened-pair-rows: 9; }
    .game-shell .meld-area.meld-density-dense { --opened-series-rows: 11; --opened-pair-rows: 11; }
    .game-shell .meld-area.meld-density-ultra { --opened-series-rows: 14; --opened-pair-rows: 14; }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell .meld-area.scrollable-meld-area[class*="meld-density-"] { padding-top: 42px; padding-bottom: 3px; }
    .game-shell .meld-area.meld-density-roomy { --opened-series-rows: 5; --opened-pair-rows: 5; }
    .game-shell .meld-area.meld-density-standard { --opened-series-rows: 6; --opened-pair-rows: 6; }
    .game-shell .meld-area.meld-density-compact { --opened-series-rows: 8; --opened-pair-rows: 8; }
    .game-shell .meld-area.meld-density-dense { --opened-series-rows: 10; --opened-pair-rows: 10; }
    .game-shell .meld-area.meld-density-ultra { --opened-series-rows: 12; --opened-pair-rows: 12; }
}

/* Geç tanımlanan kompakt masa kurallarının kapalı deste görselini ezmesini önle. */
.game-shell .stock-pile .stock-tile-back {
    width: 34px;
    height: 46px;
    font-size: .52rem;
}
.game-shell .stock-pile .stock-tile-back i { font-size: .52rem; }
.game-shell .stock-pile .stock-count { font-size: .58rem; }
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell .stock-pile .stock-tile-back { width: 30px; height: 40px; }
}

/* Farklı Android ekran oranlarında oyun bütün fiziksel yüzeyi boyar. Sohbet ve
   menü düğmeleri ıstaka araçlarının üstünde ayrı bir güvenli sütunda kalır. */
@media (orientation: landscape) {
    html,
    body,
    #app {
        width: 100dvw;
        min-width: 100dvw;
        height: 100dvh;
        min-height: 100dvh;
        margin: 0;
        padding-top: 0;
        background-color: #064661;
        overflow: hidden;
    }
    .game-shell {
        position: fixed;
        /* Ust band kadar asagidan baslar; yoksa band masanin ustune biner. */
        inset: var(--ust-band-yuksekligi) 0 0 0;
        width: 100dvw;
        max-width: none;
        min-width: 0;
        margin: 0;
    }
    .game-tools-menu-fab,
    .voice-write-fab,
    .table-chat-fab {
        /* Android bazı yatay cihazlarda çentik payını 60-70px bildirebiliyor.
           Oyun zaten uçtan uca çizildiği için bu düğmeleri ikinci kez inset ile
           kaydırmak sol oyuncu alanının üstüne getiriyordu. */
        left: 3px;
        right: auto;
    }
    .game-tools-menu-fab {
        bottom: calc(var(--game-rack-height, 170px) + max(5px, env(safe-area-inset-bottom)));
    }
    .voice-write-fab {
        bottom: calc(var(--game-rack-height, 170px) + max(5px, env(safe-area-inset-bottom)));
    }
    .table-chat-fab {
        bottom: calc(var(--game-rack-height, 170px) + max(45px, calc(env(safe-area-inset-bottom) + 40px)));
    }
    .game-tools-menu {
        left: 42px;
        bottom: calc(var(--game-rack-height, 170px) + max(4px, env(safe-area-inset-bottom)));
    }
}
@media (orientation: landscape) and (max-height: 500px) {
    .game-shell { --game-rack-height: 144px; }
}
@media (orientation: landscape) and (max-height: 420px) {
    .game-shell { --game-rack-height: 136px; }
}

/* Istakayı iki yandan içeri al; yan araçlar ve sol alt hızlı düğmeler için
   gerçek bir güvenli boşluk bırak. Bu blok dosyanın sonundadır ve önceki
   cihaz/taş-boyutu uyarlamalarının yalnız yatay konumunu kesinleştirir. */
@media (orientation: landscape) {
    .game-shell .rack-area,
    .game-shell.extra-large-tile-mode .rack-area {
        width: min(1080px, calc(100% - 56px));
        max-width: calc(100% - 56px);
        margin-inline: auto;
    }

    .game-tools-menu-fab,
    .voice-write-fab,
    .table-chat-fab,
    .game-sound-fab,
    .game-guide-fab {
        left: max(8px, var(--safe-side));
        right: auto;
    }
    .game-tools-menu-fab,
    .voice-write-fab,
    .table-chat-fab,
    .game-sound-fab,
    .game-guide-fab {
        /* Menü, mesaj, ses ve bilgi düğmeleri 5 piksel daha sola alındı. */
        transform: translateX(-15px);
    }
    .game-tools-menu-fab {
        bottom: max(8px, env(safe-area-inset-bottom));
    }
    .voice-write-fab {
        bottom: max(8px, env(safe-area-inset-bottom));
    }
    .table-chat-fab {
        bottom: max(48px, calc(env(safe-area-inset-bottom) + 48px));
    }
    .game-sound-fab {
        bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px));
    }
    .game-guide-fab {
        bottom: max(128px, calc(env(safe-area-inset-bottom) + 128px));
    }
    /* Sağ alt sütun soldakinin aynası. */
    .leave-game-fab,
    .game-radio-fab,
    .game-treat-fab,
    .game-log-fab,
    .game-score-fab,
    .game-settings-fab,
    .game-voice-fab,
    .game-invite-fab,
    .game-audio-route-fab {
        left: auto;
        right: max(8px, var(--safe-side));
        transform: translateX(15px);
    }
    .leave-game-fab { bottom: max(8px, env(safe-area-inset-bottom)); }
    .game-radio-fab { bottom: max(48px, calc(env(safe-area-inset-bottom) + 48px)); }
    .game-treat-fab { bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px)); }
    .game-log-fab { bottom: max(128px, calc(env(safe-area-inset-bottom) + 128px)); }
    .game-score-fab { bottom: max(168px, calc(env(safe-area-inset-bottom) + 168px)); }
    .game-settings-fab { bottom: max(208px, calc(env(safe-area-inset-bottom) + 208px)); }
    .game-voice-fab { bottom: max(248px, calc(env(safe-area-inset-bottom) + 248px)); }
    .game-invite-fab { bottom: max(288px, calc(env(safe-area-inset-bottom) + 288px)); }
    .game-audio-route-fab { bottom: max(328px, calc(env(safe-area-inset-bottom) + 328px)); }
    .game-tools-menu {
        left: max(48px, calc(var(--safe-side) + 48px));
        bottom: max(7px, env(safe-area-inset-bottom));
    }
}

@media (orientation: landscape) and (max-width: 900px) {
    .game-shell .rack-area,
    .game-shell.extra-large-tile-mode .rack-area {
        /* Eskiden 40 piksel kirpiliyordu. Olculdu: istaka alani orta
           sutunun 595 pikselinden 555 piksele dusuyordu ve 15 yuva 34
           pikselde kaliyordu. 16. yuva eklenince taslarin daralmamasi
           icin o kirpma 6 piksele indirildi; yanlardaki oyuncu sutunlari
           (52 piksel + 52 piksel aralik) zaten ayri, buraya dokunmuyor. */
        width: calc(100% - 6px);
        max-width: calc(100% - 6px);
    }
}

/* Oyun sahnesini fiziksel ekranın ortasında 25'er piksel içeri al. */
@media (orientation: landscape) {
    .game-shell {
        /* Ust band kadar asagidan baslar. Bu kural onceki blokta
           verilen ust bosluğu sifirliyor ve band masanin uzerine
           biniyordu. */
        inset: var(--ust-band-yuksekligi) 25px 0;
        /* Yukseklik de banddan dusulmeli. Baska bir blokta verilen
           100dvh, alt kenari ezip istakanin alt sirasini ekran
           disina tasiriyordu. */
        height: calc(100dvh - var(--ust-band-yuksekligi));
        width: calc(100dvw - 50px);
        min-width: 0;
        max-width: calc(100dvw - 50px);
        margin-inline: auto;
    }

    /* Istaka taşları mevcut yüksekliği koruyup yatayda yaklaşık 8px genişler. */
    .game-shell.extra-large-tile-mode .rack-slot {
        z-index: 2;
        transform: scaleX(1.005);
        transform-origin: center bottom;
    }
    .game-shell.extra-large-tile-mode .rack-row {
        /* 16 sutun: bir satira 3+3+3+4 per ve aralarina birer bosluk
           sigsin. Sutunlar akiskan (1fr), yani sayi degisince tas
           genisligi kendiliginden uyar. */
        grid-template-columns: repeat(16, minmax(0, 1fr));
        column-gap: 0;
    }
    .game-shell.extra-large-tile-mode .rack-slot:has(.rack-tile.dragging) {
        z-index: 40;
    }

    /* Per toplamı sağ araç sütununda doğrudan Ceza düğmesinin üstündedir. */
    .rack-right-tools .rack-score-penalty-stack .rack-score {
        position: static;
        width: 62px;
        height: 24px;
        border: 1px solid #ffe39a;
        border-radius: 7px;
        color: #fff6bf;
        background: linear-gradient(180deg, #386d87, #123a55);
        box-shadow: inset 0 1px #bcecff88, 0 3px 8px #001523b8;
        font-size: .78rem;
        font-weight: 900;
        line-height: 22px;
    }

    /* Sıralama düğmeleri daha canlı, daha büyük ve birbirinden ayırt edilir. */
    .rack-left-tools > button {
        min-height: 38px;
        border-width: 2px;
        font-size: .68rem;
        font-weight: 900;
        line-height: 1.08;
        letter-spacing: .01em;
        text-shadow: 0 1px 2px #00131f;
    }
    .rack-left-tools > button:first-child {
        border-color: #8edcff;
        background: linear-gradient(180deg, #328fc0, #174f83);
        box-shadow: inset 0 1px #d7f5ff99, 0 3px 7px #001b31a8;
    }
    .rack-left-tools > button:nth-child(2) {
        border-color: #e7d58b;
        background: linear-gradient(180deg, #9b7730, #5d431b);
        box-shadow: inset 0 1px #fff0b099, 0 3px 7px #201400a8;
    }
}

/* Yardımlı işlek türleri birbirine karışmaz: seri, çift ve her ikisi ayrı renktir.
   Dosyanın sonunda yer alarak genel durum çerçevelerini kesin biçimde ezer. */
.rack-tile.playable-series-hint.playable-opened-hint:not(.selected) {
    outline-color: #35d85a !important;
    animation: playable-opened-hint 1.05s ease-in-out infinite;
}
.rack-tile.playable-series-hint.playable-unopened-hint:not(.selected) {
    outline-color: #f0443c !important;
    animation: playable-unopened-hint .9s ease-in-out infinite;
}
.rack-tile.playable-pair-hint:not(.selected) {
    outline-color: #d879ff !important;
    animation: playable-pair-hint 1.15s ease-in-out infinite;
}
.rack-tile.playable-both-hint:not(.selected) {
    outline-color: #ffd84d !important;
    animation: playable-both-hint 1.15s ease-in-out infinite;
}

/* Ana ekrandaki ayrı katlamalı giriş, seçili seviye lobisinin puan kurallarını kullanır. */
.folded-lobby-entry {
    width: 100%;
    min-height: 116px;
    margin: .45rem 0 .85rem;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    overflow: hidden;
    position: relative;
    border: 2px solid #ffb552;
    border-radius: 20px;
    color: #fff8e9;
    text-align: left;
    background:
        radial-gradient(circle at 14% 20%, #ffca6a42, transparent 30%),
        linear-gradient(125deg, #6b1322 0%, #321020 54%, #102c3d 100%);
    box-shadow: inset 0 1px #fff5c879, 0 14px 28px #0008, 0 0 22px #e96c2940;
}
.folded-lobby-entry::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(135deg, transparent 0 18px, #fff 19px 20px);
    opacity: .025;
}
.special-lobby-background { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:left center; pointer-events:none; }
.special-lobby-shade { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#020b0d08 0%,#020b0d66 42%,#020b0de8 78%,#020b0df2 100%); }
.folded-lobby-entry > :not(.special-lobby-background):not(.special-lobby-shade) { position:relative; z-index:2; }
.folded-lobby-entry::after { z-index:1; }
.risky-lobby-entry .special-lobby-shade { background:linear-gradient(90deg,#10000210 0%,#16000470 42%,#080106e8 78%,#050005f4 100%); }
.voice-lobby-entry { border-color:#62e9ff; background:linear-gradient(125deg,#063f53,#132759 52%,#211444); box-shadow:inset 0 1px #d2fbff9c,0 14px 28px #0008,0 0 25px #35d9ff4d; }
.voice-lobby-entry .special-lobby-shade { background:linear-gradient(90deg,#00152218 0%,#03192c8a 42%,#0a153ee8 78%,#180e35f5 100%); }
.voice-lobby-entry .folded-lobby-entry-copy small { color:#79f2ff; }
.voice-lobby-entry .folded-lobby-entry-action b { color:#071c2c; background:linear-gradient(#8df7ff,#42bddf); box-shadow:inset 0 1px #eaffff,0 4px 10px #0008,0 0 15px #4ee8ff55; }
.voice-lobby-art { position:relative; display:grid; place-items:center; width:92px; height:76px; border:2px solid #82efff; border-radius:22px; background:linear-gradient(145deg,#14445fdd,#14152edd); box-shadow:inset 0 1px #e5fdff88,0 7px 16px #0009,0 0 18px #39e7ff55; }
.voice-lobby-art i { font-size:2.35rem; font-style:normal; filter:drop-shadow(0 4px 5px #0008); }
.voice-lobby-art b { position:absolute; right:-9px; bottom:-7px; padding:4px 7px; border:1px solid #9cf7ff; border-radius:999px; color:#d9feff; background:#08677d; font-size:.62rem; letter-spacing:.08em; box-shadow:0 3px 8px #0009; }
.lightning-lobby-entry { border-color:#ffd75e; background:radial-gradient(circle at 15% 20%,#fff2a83d,transparent 31%),linear-gradient(125deg,#5a4a09 0%,#2c2b10 48%,#101426 100%); box-shadow:inset 0 1px #fff6c078,0 14px 28px #0008,0 0 24px #ffd23f40; }
.lightning-lobby-entry .special-lobby-shade { background:linear-gradient(90deg,#1a140018 0%,#241c027a 42%,#0d0f1ee8 78%,#080a18f5 100%); }
.lightning-lobby-entry .folded-lobby-entry-copy small { color:#ffe27a; }
.lightning-lobby-entry .folded-lobby-entry-action b { color:#2b2205; background:linear-gradient(#ffef9c,#f2bc2e); box-shadow:inset 0 1px #fffbe0,0 4px 10px #0008,0 0 15px #ffd23f55; }
.lightning-lobby-art { position:relative; display:grid; place-items:center; width:92px; height:76px; border:2px solid #ffe06a; border-radius:22px; background:linear-gradient(145deg,#5f4a12dd,#1b1a2edd); box-shadow:inset 0 1px #fff8cf88,0 7px 16px #0009,0 0 18px #ffd53f55; }
.lightning-lobby-art i { font-size:2.35rem; font-style:normal; filter:drop-shadow(0 4px 5px #0008); }
.lightning-lobby-art b { position:absolute; right:-9px; bottom:-7px; padding:4px 7px; border:1px solid #ffeb9c; border-radius:999px; color:#fff8d8; background:#8a6208; font-size:.62rem; letter-spacing:.08em; box-shadow:0 3px 8px #0009; }
.tournament-lobby-entry .special-lobby-shade { background:linear-gradient(90deg,#00101b0d 0%,#00101b68 43%,#00101be5 76%,#00101bf2 100%); }
.folded-lobby-entry:active:not(:disabled) { transform: translateY(1px) scale(.997); }
.folded-lobby-entry:disabled { filter: grayscale(.45); opacity: .66; }
.folded-lobby-tiles { display: flex; align-items: center; position: relative; min-width: 105px; }
.folded-lobby-tiles i {
    width: 39px;
    height: 57px;
    margin-right: -8px;
    display: grid;
    place-items: center;
    border: 2px solid #e4d6b5;
    border-radius: 5px;
    color: #c92931;
    font: 900 1.45rem/1 Georgia, serif;
    font-style: normal;
    background: linear-gradient(150deg, #fffef6, #d9cfb8);
    box-shadow: 3px 5px 5px #0008, inset -2px -3px #8e856f42;
}
.folded-lobby-tiles b {
    position: absolute;
    right: -3px;
    bottom: -7px;
    min-width: 42px;
    padding: 4px 6px;
    border: 2px solid #ffe495;
    border-radius: 20px;
    color: #fff4b8;
    text-align: center;
    background: #9e1f29;
    box-shadow: 0 3px 6px #0008;
}
.folded-lobby-entry-copy { display: grid; gap: 3px; min-width: 0; }
.folded-lobby-entry-copy small { color: #ffd889; font-weight: 850; letter-spacing: .09em; }
.folded-lobby-entry-copy strong { font-size: clamp(1.15rem, 3.4vw, 1.55rem); color: #fff3c7; }
.folded-lobby-entry-copy em { color: #e9dfe2; font-size: .82rem; font-style: normal; line-height: 1.25; }
.folded-lobby-entry-action { display: grid; justify-items: end; gap: 7px; white-space: nowrap; }
.folded-lobby-entry-action small { color: #f5d9b8; font-weight: 700; }
.folded-lobby-entry-action b { padding: 9px 13px; border-radius: 14px; color: #381311; background: linear-gradient(#ffe37a, #e9a52d); box-shadow: inset 0 1px #fff8c8, 0 4px 9px #0007; }
/* Lobi başlığında anlık online oyuncu özeti. */
.lobby-online-total { display:inline-flex; align-items:center; gap:5px; margin-left:auto; padding:3px 10px; border:1px solid #6ff0a855; border-radius:999px; color:#9cf5c4; background:#04231a9c; font-size:.58rem; font-weight:800; white-space:nowrap; }
.account-online-chip { grid-area: bosluk; justify-self: start; margin-left: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lobby-online-total::before { content:""; width:7px; height:7px; border-radius:50%; background:#57e58f; box-shadow:0 0 7px #57e58fcc; }

/* Lobi kartlarında o an açık olan masa sayısı. */
.lobby-table-chip { display:inline-flex; align-items:center; gap:5px; justify-self:end; width:max-content; margin-top:4px; padding:3px 9px; border:1px solid #6ff0a855; border-radius:999px; color:#9cf5c4; background:#04231a9c; font-size:.62rem; font-style:normal; font-weight:800; }
.tournament-lobby-entry-copy .lobby-table-chip { justify-self:end; margin-top:0; }
.lobby-table-chip::before { content:""; width:7px; height:7px; border-radius:50%; background:#57e58f; box-shadow:0 0 7px #57e58fcc; }
.lobby-table-chip.empty { color:#c3cdd2; border-color:#ffffff2e; background:#0a1a2299; }
.lobby-table-chip.empty::before { background:#8fa2ab; box-shadow:none; }
.ranked-lobby-footer .lobby-table-chip { margin:0; font-size:.55rem; padding:3px 8px; }

/* Masa kurulum modallarindaki secim serileri: acilir liste yerine yana
   kaydirilabilen dugmeler. Dokunmatik ekranda tek dokunusla secim yapiliyor ve
   secenekler tek bakista gorunuyor. */
.choice-row { display: grid; gap: 5px; margin: 0 0 .1rem; }
.choice-row-label { color: #d9eff2; font-size: .62rem; font-weight: 800; letter-spacing: .02em; }
.choice-chips {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 4px;
    margin: -2px -2px -4px;
}
.choice-chips::-webkit-scrollbar { display: none; }
.choice-chip {
    flex: 1 1 auto;
    min-width: 8.5rem;
    scroll-snap-align: start;
    display: grid;
    gap: 1px;
    justify-items: start;
    text-align: left;
    padding: 8px 11px;
    border: 1.5px solid #2f5566;
    border-radius: 13px;
    background: #0d2634;
    color: #cfe7ec;
    transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.choice-chip b { font-size: .74rem; font-weight: 850; line-height: 1.15; white-space: nowrap; }
.choice-chip small { font-size: .56rem; font-weight: 650; opacity: .72; line-height: 1.2; }
.choice-chip.active {
    border-color: #ffd75e;
    background: linear-gradient(180deg, #1d4356, #123243);
    color: #fff4d2;
    box-shadow: 0 0 0 1px #ffd75e55, 0 4px 12px #0007;
}
.choice-chip.active small { opacity: .85; }
.choice-row.disabled .choice-chips { opacity: .58; }
.choice-row.disabled .choice-chip { pointer-events: none; }

/* Islemeye henuz izin olmayan per: uzerine surukleyince kirmizi cerceve
   verir ve birakilinca nedeni yazilir. Sessizce geri donmesi, ozellikle
   yardim kapaliyken, oyuncuya "surukleme calismiyor" hissi veriyordu. */
.game-shell .meld.layoff-blocked.drag-over { outline: 2px dashed #ff8f8f; outline-offset: 2px; }
.game-shell .rack-tile.layoff-blocked { box-shadow: 0 10px 18px #0009, 0 0 0 3px #ff6b6b; }

/* Atılan taşların tamamı: yığına dokununca o oyuncunun bütün taşları
   açılır. Üst koltuklarda aşağı, alt koltuklarda yukarı açılır ki masanın
   dışına taşmasın. */
.player-discard-pile.expandable,
.discard-corner-slot .discard-source-cluster > .player-discard-pile.expandable {
    position: relative; cursor: pointer; overflow: visible;
}
/* Açık panel masadaki diğer katmanların altında kalmasın. */
.discard-corner-slot:has(.discard-history.expanded) { z-index: 140; }
.discard-source-cluster:has(.discard-history.expanded) { position: relative; z-index: 140; }
.player-discard-pile .discard-history-count {
    position: absolute; right: 2px; top: 2px;
    min-width: 13px; padding: 0 3px;
    border-radius: 7px; background: #0b2f42; color: #9fc4d2;
    font: 700 .46rem "DM Sans", sans-serif; font-style: normal; text-align: center;
}
.player-discard-pile .discard-history.expanded {
    position: absolute; left: 50%; transform: translateX(-50%);
    z-index: 70;
    display: flex; flex-wrap: wrap; justify-content: flex-start;
    gap: 3px; padding: 6px;
    max-width: min(58vw, 340px); max-height: 34vh; overflow: auto;
    background: #f9c98af2; border: 1px solid #d3934a; border-radius: 11px;
    box-shadow: 0 12px 26px #000a;
}
.player-discard-pile .discard-history.expanded .discard-history-tile + .discard-history-tile { margin-left: 0; }
.seat-top-left .discard-history.expanded, .seat-top-right .discard-history.expanded { top: calc(100% + 4px); }
.seat-bottom-left .discard-history.expanded, .seat-self .discard-history.expanded { bottom: calc(100% + 4px); }

/* Sinyali kesilen oyuncu: adının yanında yanıp sönen işaret. Oyuncu geri
   dönünce işaret kendiliğinden kalkar. */
.signal-lost-badge {
    display: inline-grid; place-items: center;
    width: 13px; height: 13px; margin-left: 3px;
    border-radius: 50%; background: #c0392b; color: #fff;
    font-size: .5rem; font-weight: 900; line-height: 1;
    vertical-align: middle;
    animation: signalLostBlink 1s ease-in-out infinite alternate;
}
@keyframes signalLostBlink { from { opacity: .25; } to { opacity: 1; } }

/* Profildeki ödül ve puan kartları: yana kaydırılabilen büyük kutular. */
.profile-header-actions { display: flex; align-items: center; gap: 6px; }
.profile-settings-gear {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border: 1px solid #2f5566; border-radius: 50%;
    background: #0d2634; color: #cfe7ec; font-size: .95rem; line-height: 1;
}
.profile-settings-back {
    align-self: start;
    padding: 6px 10px; margin-bottom: 2px;
    border: 1px solid #2f5566; border-radius: 10px;
    background: #0d2634; color: #cfe7ec;
    font-size: .68rem; font-weight: 800;
}
.profile-points-summary {
    display: flex; align-items: center; gap: 6px;
    color: #ffd75e; font-size: .8rem; font-weight: 850;
}
.profile-points-summary span { color: #9fc4d2; font-size: .62rem; font-weight: 700; }

.profile-showcase { display: grid; gap: 6px; width: 100%; }
.profile-showcase > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.profile-showcase > header strong { color: #e8f6fa; font-size: .74rem; font-weight: 850; }
.profile-showcase > header small { color: #7fa3b3; font-size: .58rem; font-weight: 700; }
.profile-showcase-empty { color: #7fa3b3; font-size: .62rem; }
.profile-showcase-track {
    display: flex; gap: 9px;
    overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 2px 2px 6px; margin: -2px -2px -6px;
}
.profile-showcase-track::-webkit-scrollbar { display: none; }
/* Oduller ve puan hareketleri kartlari kucultuldu: 118 piksel genislikte
   ve 62 piksel simgeyle ekranin cogunu kapliyorlardi, profil sayfasinda
   iki sira halinde devasa duruyordu. Artik bir ekrana dort kart siğiyor. */
.profile-showcase-card {
    flex: 0 0 auto; width: 86px;
    scroll-snap-align: start;
    display: grid; gap: 2px; justify-items: center; text-align: center;
    padding: 8px 6px 7px;
    border: 1.5px solid #2f5566; border-radius: 12px;
    background: linear-gradient(180deg, #123243, #0a2331);
    box-shadow: 0 4px 10px #0007;
}
.profile-showcase-card strong {
    color: #e8f6fa; font-size: .55rem; font-weight: 800; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.profile-showcase-card small { color: #7fa3b3; font-size: .46rem; font-weight: 700; }
.profile-showcase-card b { font-size: .68rem; font-weight: 900; }
.profile-showcase-art {
    display: grid; place-items: center;
    width: 42px; height: 42px; margin-bottom: 2px;
    border-radius: 50%;
    background: #08202d; border: 1px solid #2f5566;
    font-size: 1.15rem; overflow: hidden;
}
.profile-showcase-art img { width: 100%; height: 100%; object-fit: cover; }
.profile-showcase-card.reward-card { border-color: #d3a44a; }
.profile-showcase-card.point-card.gain b { color: #7ee2a8; }
.profile-showcase-card.point-card.loss b { color: #ff8f8f; }
.profile-showcase-card.point-card.gain { border-color: #2f6f52; }
.profile-showcase-card.point-card.loss { border-color: #7a3a3a; }

/* Modal açıkken arkadaki sayfa kaymasın. Modalin içinde kaydırılacak bir
   şey yoksa — ya da kaydırılabilir içerik sınırına geldiyse — tarayıcı
   kaydırmayı en yakın kaydırılabilir ataya, yani sayfanın kendisine devrediyor;
   oyuncu modal içinde parmak gezdirirken arkadaki lobi kayıyordu.
   Kural iki kademeli: sayfanın kendi kaydırması kapatılıyor ve modal içindeki
   kaydırılabilir alanlar sınıra geldiklerinde devretmiyor. */
html:has([class*="-backdrop"]),
body:has([class*="-backdrop"]) { overflow: hidden; }
[class*="-backdrop"] { overscroll-behavior: contain; }

/* Elde son tas kaldiginda yan atma alani devre disidir: tas ortadaki
   gostergeye atilir. Alan sonuk gorunur ve nereye atilacagini soyler. */
.discard-corner-slot.seat-self.finish-required .player-discard-pile { opacity: .45; filter: grayscale(.6); }
.discard-corner-slot.seat-self.finish-required::after {
    content: "ORTAYA AT";
    position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
    color: #ffd75e; font-size: .4rem; font-weight: 900; letter-spacing: .08em;
    white-space: nowrap; text-shadow: 0 1px 3px #000;
}

/* Atilan tas sayisi rozeti: oyuncu adinin uzerine binmesin diye alt kosede
   durur ve cerceveyle ayrilir. */
.player-discard-pile .discard-history-count {
    position: absolute; right: 2px; top: auto; bottom: 2px;
    min-width: 14px; padding: 0 3px;
    border: 1px solid #7fd7ff; border-radius: 7px;
    background: #06202ee8; color: #cdeefb;
    font: 800 .46rem "DM Sans", sans-serif; font-style: normal; text-align: center;
    box-shadow: 0 1px 3px #000a;
}

/* Bildirim ayari satiri. Anahtar, lobideki bildirim dugmesiyle ayni
   kaydirmali tasarimi kullanir; ayni is icin iki farkli gorunum olmasin. */
.notify-setting {
    display: grid; grid-template-columns: 26px 1fr 29px; align-items: center; gap: 10px;
    width: 100%; padding: 10px 12px;
    border: 1.5px solid #2f5566; border-radius: 13px;
    background: #0d2634; color: #cfe7ec; text-align: left;
    transition: border-color .15s ease, background-color .15s ease;
}
.notify-setting .notify-icon { font-size: 1.05rem; line-height: 1; text-align: center; }
.notify-setting .notify-text { display: grid; gap: 1px; min-width: 0; }
.notify-setting .notify-text strong { font-size: .72rem; font-weight: 800; }
.notify-setting .notify-text small { color: #8fb3c2; font-size: .56rem; line-height: 1.25; }
.notify-setting > i {
    position: relative; display: block; width: 29px; height: 15px;
    border-radius: 999px; background: #53636b;
    box-shadow: inset 0 1px 4px #0008; transition: background .18s ease;
}
.notify-setting > i > b {
    position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
    border-radius: 50%; background: #e8eef0;
    box-shadow: 0 1px 3px #0009; transition: transform .18s ease;
}
.notify-setting.enabled { border-color: #60d99d85; background: #0a3d34; }
.notify-setting.enabled > i { background: #35c67b; }
.notify-setting.enabled > i > b { transform: translateX(14px); }

/* Sohbet kutusundaki mikrofon dugmesi. Dinlerken kirmizi yanip soner ve
   simgesi "durdur"a doner; oyuncu klavye acmadan konusarak yazar. */
.table-chat-compose .chat-mic {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border: 1px solid #2f5566; border-radius: 50%;
    background: #0d2634; color: #cfe7ec; font-size: .9rem; line-height: 1;
}
.table-chat-compose .chat-mic.listening {
    border-color: #ff6b6b; background: #4a1414; color: #ffd9d9;
    animation: chatMicPulse 1s ease-in-out infinite alternate;
}
/* Izin/kurulum beklenirken: soluk yanip soner, dinlemeye gecince kirmizi. */
.table-chat-compose .chat-mic.preparing,
.voice-message-mic.preparing {
    border-color: #ffd75e;
    background: #3d3410;
    color: #ffeeb4;
    animation: chatMicWait .9s ease-in-out infinite alternate;
}
@keyframes chatMicWait { from { opacity: .55; } to { opacity: 1; } }
@keyframes chatMicPulse { from { box-shadow: 0 0 0 0 #ff6b6b00; } to { box-shadow: 0 0 0 4px #ff6b6b4d; } }

/* Masadaki sesli yazma dugmesi. Mikrofon simgesi sesli sohbette kullanildigi
   icin burada konusan kafa simgesi var; ikisi karismasin. */
.voice-write-fab {
    display: grid; place-items: center;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid #a7eacd; border-radius: 50%;
    background: linear-gradient(180deg, #2fa07c, #0e4d3c);
    color: #eafff7; font-size: .9rem;
    box-shadow: 0 4px 12px #001625b8, inset 0 1px #c8ffe988;
}
.voice-write-fab.open { border-color: #ffd75e; background: #123243; }

/* Sesli mesaj penceresi: sohbet panelini acmadan konusup gondermek icin. */
.voice-message-backdrop {
    position: fixed; inset: 0; z-index: 10050;
    display: grid; place-items: center;
    padding: 16px; background: #02131ccc;
}
.voice-message-card {
    display: grid; gap: 10px;
    width: min(340px, 92vw); padding: 14px 16px 16px;
    border: 1.5px solid #2f5566; border-radius: 18px;
    background: linear-gradient(180deg, #123243, #0a2331);
    box-shadow: 0 16px 34px #000a;
}
.voice-message-card > header { display: flex; align-items: center; gap: 9px; }
.voice-message-card > header strong { flex: 1; color: #e8f6fa; font-size: .82rem; }
.voice-message-mic {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: #08202d; border: 1px solid #2f5566; font-size: .95rem;
}
.voice-message-mic.listening {
    border-color: #ff6b6b; background: #4a1414;
    animation: chatMicPulse 1s ease-in-out infinite alternate;
}
.voice-message-hint {
    margin: -4px 0 0;
    color: #8fb6c6;
    font-size: .68rem;
    letter-spacing: .01em;
}
.voice-message-text {
    margin: 0; min-height: 52px; padding: 10px 12px;
    border: 1px solid #23485c; border-radius: 12px;
    background: #08202d; color: #e8f6fa;
    font-size: .8rem; line-height: 1.45; word-break: break-word;
}
.voice-message-text.empty { color: #6f95a6; font-style: italic; }
.voice-message-actions { display: flex; align-items: center; gap: 9px; }
.voice-message-retry {
    flex: 1; padding: 9px 10px;
    border: 1px solid #2f5566; border-radius: 12px;
    background: #0d2634; color: #cfe7ec; font-size: .7rem; font-weight: 800;
}
.voice-message-send {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 46px; height: 38px; border: none; border-radius: 12px;
    background: linear-gradient(#ffe674, #d9a928); color: #13200b;
    font-size: 1rem; font-weight: 900;
}
.voice-message-send:disabled { background: #263d47; color: #7fa3b3; }

/* Ust band: kullanici adi, lobi ve puan. Yerlesimi kaydirmaz (fixed) ve
   dokunuslari gecirir; oyun masasinin siki duzeni oldugu gibi kalsin diye
   boyle. Puan akis animasyonunun hedefi de buradaki rozettir. */
:root {
    --ust-band-yuksekligi: 20px;
    /* Banddaki butun rozetlerin yazi boyu tek yerden. */
    --ust-band-yazi: .76rem;
}

.ust-band {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--ust-band-yuksekligi);
    /* Yatay cihazlarda centik/yuvarlak kose bandin ucunu yiyordu; kenar
       bosluklari guvenli alana gore verilir. Tasma yerine kisaltilir.
       Sol bosluk 100'den 70'e cekildi: odul rozeti banddan asagi sarktigi
       icin ust ortadaki rakip kartinin uzerine biniyordu. 70 hala durum
       cubugundaki saati gecer (telefonda saat ~56 pikselde bitiyor). */
    padding-left: max(70px, env(safe-area-inset-left));
    padding-right: max(100px, env(safe-area-inset-right));
    /* Odul rozeti banddan ASAGI tasabilsin diye kirpma kalkti. Ad ve lobi
       rozetleri zaten kendi iclerinde kirpiyor (overflow+ellipsis), yani
       yatayda tasma riski yok. */
    overflow: visible;
    border-bottom: 1px solid #2f5566;
    background: linear-gradient(180deg, #0d2c3df2, #082331f2);
    box-shadow: 0 2px 8px #00131ea8;
    color: #dceef5;
    font-size: var(--ust-band-yazi);
    line-height: 1.2;
    white-space: nowrap;
}

/* Band yalniz oyun masasinda gorunur; ana sayfaya bosluk birakilmaz.
   Masada yer kapmasi oyun kabugunun ust/yukseklik kurallariyla saglanir. */
/* Butun rozetler ayni olcude: ayni yazi boyu, ayni cerceve, ayni yukseklik.
   Foto ile ad TEK rozetin icindedir. */
.ust-band-rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    height: calc(var(--ust-band-yuksekligi) - 7px);
    padding: 0 9px;
    border: 1px solid #6d5a1f;
    border-radius: 999px;
    background: linear-gradient(180deg, #33290b, #201a06);
    color: #ffe9a3;
    font-size: inherit;
    line-height: 1;
    white-space: nowrap;
}
.ust-band-kisi { max-width: 42vw; }
.ust-band-foto {
    /* Rozetin icinde, sol kenara yapisik yuvarlak foto. */
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    width: calc(var(--ust-band-yuksekligi) - 4px);
    height: calc(var(--ust-band-yuksekligi) - 4px);
    margin-left: -7px;
    border: 1px solid #f2c75c;
    border-radius: 50%;
    background: #2a2409;
    font-size: .55rem;
}
.ust-band-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ust-band-ad {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
}
.ust-band-lobi {
    /* Sag uca yaslanir. Band genelinde dokunuslar gecer; bu dugmede acilir. */
    margin-left: auto;
    /* Dar ekranda "Cirak Lobisi" kirpiliyordu. Yatay oyunda zaten bol yer var;
       dar/dikey durumda da sigsin diye pay artirildi. */
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    pointer-events: auto;
    cursor: pointer;
    font-family: inherit;
}

.ust-band-puan {
    flex: 0 0 auto;
    font-weight: 900;
}

/* El rozeti: "2/4 el". Kirpilmaz ve daralmaz, cunku iki haneden uzun olamaz;
   yer sikisirsa ad ve lobi rozetleri kendi iclerinde kisalir. */
/* Acik masa listesinde ARKADAS koltugu. Yesil ve kalin: oyuncunun listede
   aradigi ilk sey tanidik bir isim. Robot koltugu zaten soluk; arkadas onun
   tersi olsun diye one cikariliyor. */
/* Gorunen ad ekrani. Google ile ilk giriste ve menuden "Adini degistir"
   ile ayni kart acilir. Dar telefonda da sigsin diye kart genisligi
   gorunum genisligine bagli ve icerik kaydirilabilir. */
.ad-secim-fon {
    position: fixed;
    inset: 0;
    /* Profil penceresi 10030 kullaniyor; ad ekrani onun da USTUNDE olmali,
       yoksa profilden acildiginda arkada kaliyordu. */
    z-index: 10060;
    display: grid;
    place-items: center;
    padding: 16px;
    background: #04141ce8;
}
.ad-secim-karti {
    display: grid;
    gap: 9px;
    width: min(360px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 18px 16px;
    border: 1px solid #2f5566;
    border-radius: 16px;
    background: linear-gradient(180deg, #0d2c3d, #082331);
    box-shadow: 0 18px 40px #00131ea8;
    color: #dceef5;
}
.ad-secim-karti h3 { margin: 0; color: #ffe9a3; font-size: 1rem; }
.ad-secim-aciklama { margin: 0; color: #9bb8c3; font-size: .72rem; line-height: 1.45; }

/* "Ayni isimle devam et": Google adi buyuk ve okunur yazilir, cunku
   oyuncunun karar verecegi sey o ad. */
.ad-secim-aynen {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #4ea87a;
    border-radius: 11px;
    background: #103326;
    color: #9ff0c4;
    text-align: left;
    font-family: inherit;
}
.ad-secim-aynen span { font-size: .68rem; opacity: .85; }
.ad-secim-aynen b { font-size: .95rem; font-weight: 800; }

.ad-secim-ayirac {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    color: #6f95a6;
    font-size: .62rem;
}
.ad-secim-ayirac::before,
.ad-secim-ayirac::after {
    content: "";
    height: 1px;
    background: #22485c;
}

.ad-secim-karti label { color: #9bb8c3; font-size: .66rem; }
.ad-secim-karti input {
    width: 100%;
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid #3c6a80;
    border-radius: 10px;
    background: #071f2b;
    color: #eaf7fc;
    font-family: inherit;
    font-size: .85rem;
}
.ad-secim-sayac { justify-self: end; color: #6f95a6; font-size: .6rem; }
.ad-secim-hata { margin: 0; color: #ff9f9f; font-size: .7rem; }

.ad-secim-dugmeler { display: flex; gap: 8px; margin-top: 4px; }
.ad-secim-dugmeler button {
    flex: 1 1 0;
    min-height: 40px;
    border-radius: 10px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 800;
}
.ad-secim-vazgec { border: 1px solid #8fc7da; color: #e8f8ff; background: #10455f; }
.ad-secim-kaydet {
    border: 1px solid #ffe79a;
    color: #2a2103;
    background: linear-gradient(180deg, #ffe783, #f0b528);
}
.ad-secim-kaydet:disabled { opacity: .45; }

/* Profilde degismeyen giris adi. Ayni gorunen ada sahip iki kisiyi
   birbirinden ayirmanin kesin yolu; soluk ve kucuk, asil adi golgelemesin. */
.profil-giris-adi {
    color: #7fa6b6;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.open-table-seat.arkadas {
    border-color: #4ea87a;
    background: #103326;
    color: #9ff0c4;
    font-weight: 800;
}

/* Masa basligindaki arkadas rozeti. Siralama arkadasli masalari basa aliyor;
   rozet de bunun SEBEBINI soyluyor, yoksa sira keyfi gorunuyordu. */
.open-table-friend-badge {
    flex: 0 0 auto;
    padding: 1px 8px;
    border: 1px solid #4ea87a;
    border-radius: 999px;
    background: #103326;
    color: #9ff0c4;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.ust-band-el {
    flex: 0 0 auto;
    /* Rozetlerin ortak 5 piksellik araligi burada ISTENMEZ: <b> ayri bir flex
       ogesi oldugu icin aralik rakamla egik cizginin arasina giriyor ve
       "2 /4 el" gibi gorunuyordu. */
    gap: 0;
    padding: 0 7px;
    font-weight: 700;
}
.ust-band-el b {
    font-weight: 900;
    color: #fff3c4;
}

/* Telefon yatayda CSS olarak ~393 piksel yuksek goruldugu icin bu blok
   oyun masasinda HER ZAMAN devreye girer. Eskiden burada padding ve
   font-size yeniden veriliyordu ve bandin asil kurallarindaki kenar
   boslugunu ve yazi boyunu eziyordu; disaridan yapilan her ayar etkisiz
   kaliyordu. Yalniz araligi daraltir, olculere dokunmaz. */
@media (orientation: landscape) and (max-height: 560px) {
    .ust-band { gap: 8px; }
}

/* Puan akisi: bedel kesilirken rozetten dagilan kirmizi, odul kazanilirken
   rozete toplanan yesil cipler. Akisin iki ucu da PUAN ROZETININ cevresinde;
   konumlar puan-akisi.js tarafindan piksel olarak yazilir. Katman tiklamayi
   engellemez. */
.puan-akis-katmani {
    position: fixed;
    inset: 0;
    /* Odul pencerelerinin USTUNDE olmali. 10090'dayken gunluk odul (11150),
       turnuva odulu (11250) ve kampanya penceresi (12000) ciplerin onune
       geciyordu: puan degisiyor ama akis pencerenin arkasinda kaliyordu.
       Katman zaten pointer-events: none, yani hicbir dokunusu engellemez. */
    z-index: 13500;
    pointer-events: none;
    overflow: hidden;
}
/* Tutar yazisi: rozetin hemen altinda buyuk, yukari suzulerek soner. Buradaki
   top/left yalnizca yedek: olagan durumda ikisini de js rozete gore yazar. */
.puan-tutar {
    position: absolute;
    top: 34%;
    left: 50%;
    font: 900 2.1rem/1 "Arial Black", Arial, sans-serif;
    letter-spacing: .01em;
    white-space: nowrap;
    will-change: transform, opacity;
}
/* Tutar yazisi ciplerin dogdugu yerde, yani ekranin ortasinda duruyor.
   Arkasi masa ya da kart olabildigi icin koyu bir cerceve sart: duz golge
   ile yazi acik zeminde okunmuyordu. */
.puan-tutar.kazanc {
    color: #ffe77a;
    text-shadow:
        -2px -2px 0 #3a2000, 2px -2px 0 #3a2000, -2px 2px 0 #3a2000, 2px 2px 0 #3a2000,
        0 3px 12px #000000b3, 0 0 22px #ffc83c80;
}
.puan-tutar.kayip {
    color: #ff8f78;
    text-shadow:
        -2px -2px 0 #380d04, 2px -2px 0 #380d04, -2px 2px 0 #380d04, 2px 2px 0 #380d04,
        0 3px 12px #000000b3, 0 0 22px #ff5a3a80;
}

/* Kaynaktaki patlama: isinlari olan bir yildiz parlamasi. Cipler bos bir
   noktadan degil, bu parlamadan cikiyormus gibi gorunsun. */
.puan-patlama {
    position: absolute;
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    will-change: transform, opacity;
}
.puan-patlama::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* Isinlar disa dogru sonsun diye maskelenir; maskesiz hali keskin
       kenarli bir disk gibi duruyordu. */
    -webkit-mask-image: radial-gradient(circle, #000 10%, #00000070 42%, #0000 70%);
    mask-image: radial-gradient(circle, #000 10%, #00000070 42%, #0000 70%);
}
.puan-patlama::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
}
.puan-patlama.kazanc::before {
    background: repeating-conic-gradient(from 0deg, #ffeeb0e6 0deg 4deg, #ffeeb000 4deg 22deg);
}
.puan-patlama.kazanc::after {
    background: radial-gradient(circle, #fffbe8 0%, #ffd75aad 38%, #ffb02400 72%);
}
.puan-patlama.kayip::before {
    background: repeating-conic-gradient(from 0deg, #ffd4c6e6 0deg 4deg, #ffd4c600 4deg 22deg);
}
.puan-patlama.kayip::after {
    background: radial-gradient(circle, #fff0ea 0%, #ff7d5aad 38%, #ff3c1400 72%);
}

/* Cip hedefe girerken kucuk kivilcim. */
.puan-varis {
    position: absolute;
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    will-change: transform, opacity;
}
.puan-varis.kazanc { background: radial-gradient(circle, #fff8d9 0%, #ffd34f80 42%, #ffc83c00 70%); }
.puan-varis.kayip  { background: radial-gradient(circle, #ffeae2 0%, #ff8a6b80 42%, #ff5a3a00 70%); }

/* Cipler artik poker fisi degil madeni para: ic halka, ust kose parlamasi
   ve kenar isigi. Olculeri js yazar (her cip biraz baska boyda). */
.puan-cipi {
    position: absolute;
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
.puan-cipi::after {
    content: "";
    position: absolute;
    inset: 17%;
    border-radius: 50%;
    border: 1px solid #00000033;
    box-shadow: inset 0 1px 1px #ffffff5c;
}
.puan-cipi::before {
    content: "";
    position: absolute;
    left: 20%;
    top: 14%;
    width: 34%;
    height: 23%;
    border-radius: 50%;
    background: #ffffffa6;
}
.puan-cipi.kayip {
    border: 1.5px solid #ffc3b4;
    background: radial-gradient(circle at 34% 28%, #ffd3c6, #ff7a5e 42%, #c43418 74%, #7d1c08);
    box-shadow: 0 0 10px #ff5c3fa6, 0 1px 3px #00000059;
}
.puan-cipi.kazanc {
    border: 1.5px solid #ffe9a0;
    background: radial-gradient(circle at 34% 28%, #fff6c8, #ffd54f 40%, #f0a913 72%, #b06b06);
    box-shadow: 0 0 10px #ffc83ca6, 0 1px 3px #00000059;
}

/* ---- Sade kip: masadaki butun dugmeler ve ust band gizlenir -------------
   Masa ekraninin her kenarinda dugme var; tas atarken goz masayi bunlarin
   arasindan secmek zorunda kaliyordu. Sinif GOVDEYE yaziliyor cunku
   gizlenecek ogeler ayni agacta degil: band masa kabugunun kardesi,
   dugmeler sayfanin en ust duzeyinde.

   Gizleme "display: none" ile: gorunmez birakmak (opacity/visibility) tas
   dokunuslarini yutmaya devam ederdi. Sade kip dugmesinin kendisi listede
   YOK, yoksa geri donulemezdi. */
body.masa-sade .ust-band,
body.masa-sade .game-guide-fab,
body.masa-sade .game-sound-fab,
body.masa-sade .voice-write-fab,
body.masa-sade .table-chat-fab,
body.masa-sade .leave-game-fab,
body.masa-sade .game-radio-fab,
body.masa-sade .game-treat-fab,
body.masa-sade .game-log-fab,
body.masa-sade .game-score-fab,
body.masa-sade .game-settings-fab,
body.masa-sade .istaka-buyutec-fab,
body.masa-sade .game-invite-fab,
body.masa-sade .game-audio-route-fab,
body.masa-sade .game-voice-fab,
body.masa-sade .game-tools-menu-fab,
/* Bu ikisi "-fab" adini tasimadigi icin ilk listede atlanmisti ve sade
   kipte sol kenarda tek baslarina kaliyorlardi. */
body.masa-sade .hidden-table-badge,
body.masa-sade .spectator-count-badge { display: none !important; }

/* Band kalkinca masa onun yerini de kullanir. Degisken masa kabuguna
   yaziliyor: kabugun kendi "inset" ve "height" hesaplari bu degiskenden
   okundugu icin tek satir butun yerlesimi yeniden olcekliyor. */
body.masa-sade .game-shell { --ust-band-yuksekligi: 0px; }


/* ---- Bekleme masasi ------------------------------------------------------
   Masaya oturulduktan sonra ekran bir "sayfa" degil: arka plan masanin
   kecesi, ortasinda DAR UZUN bir pencere - oyun bitiminde cikan puan
   penceresinin aynisi. Oyuncu masanin acildigini gorur, beklemeyi orada
   yapar. Eskiden lobi karti gibi genis bir sayfaydi ve masaya oturmus
   olmak hic hissedilmiyordu. */
.lobby-shell.bekleme-masasi {
    /* Kabuk dar ekranda "block"a dusuyor; pencereyi ortalayabilmek icin
       burada yeniden izgara yapiliyor. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100dvh;
    place-items: center;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    background:
        radial-gradient(ellipse at center, #1590b24d 0%, transparent 58%),
        repeating-radial-gradient(circle at 10% 20%, transparent 0 18px, #57c5df0b 19px 21px),
        linear-gradient(135deg, #08789a, #064d70 48%, #043c59);
}
/* Pencere MASANIN USTUNDE duruyor, lobi kartinin icinde degil; bu yuzden
   kural tek basina ".bekleme-penceresi"ne yazilir. (Lobi karti yolu artik
   kullanilmiyor ama kuralin orada da calismasi icin asagida ayrica eziliyor.) */
.bekleme-penceresi {
    /* GENIS ve YATAY: masa yatay acildigi icin pencere de mac sonu siralama
       ekrani gibi enine uzanir. */
    min-height: 0;
    height: auto;
    align-self: center;
    width: min(720px, 96vw);
    max-width: min(720px, 96vw);
    max-height: calc(100dvh - 14px);
    overflow-y: auto;
    display: grid;
    gap: 5px;
    align-content: start;
    padding: 8px 12px 9px;
    border: 2px solid #efd268;
    border-radius: 20px;
    background: radial-gradient(circle at 90% 0, #e5bd4938, transparent 35%),
                linear-gradient(145deg, #0b3a55fa, #061d32fc);
    box-shadow: 0 22px 55px #000c, inset 0 1px #ffffff2b;
}
/* Eski lobi yolunda kart ekrani kapliyordu (min-height 100dvh). */
.lobby-card.bekleme-penceresi { min-height: 0; height: auto; }

/* Koltuk listesi: alt alta dort satir. Dar pencerede yan yana dort kart
   okunmuyordu; dikeyde fotograf da ad da rahat siginiyor. */
/* ---- Masa acik, oyun baslamadi --------------------------------------------
   Masa GERCEKTEN aciliyor (oyun ekraninin kendisi), yalniz taslar dagitilmamis.
   Tasa bagli ne varsa gizlenir: gosterge, deste, istaka araclari, hamle
   dugmeleri. Geriye masanin kendisi, koltuklar ve bos istaka kalir. */
.game-shell.bekleme .indicator-block,
.game-shell.bekleme .stock-pile,
.game-shell.bekleme .classic-finish-zone,
.game-shell.bekleme .rack-sort-actions,
.game-shell.bekleme .meld-area,
.game-shell.bekleme .turn-label,
.game-shell.bekleme .game-action-bar,
.game-shell.bekleme .rack-heading { visibility: hidden; }
/* Bekleme suresince masadaki dugmelerin isi yok; yalnizca pencere islesin. */
.game-shell.bekleme .game-guide-fab,
.game-shell.bekleme .game-sound-fab,
.game-shell.bekleme .voice-write-fab,
.game-shell.bekleme .table-chat-fab,
.game-shell.bekleme .game-treat-fab,
.game-shell.bekleme .game-log-fab,
.game-shell.bekleme .game-score-fab,
.game-shell.bekleme .istaka-buyutec-fab,
.game-shell.bekleme .leave-game-fab { display: none; }

/* Pencere masanin TAM ORTASINDA, mac sonu penceresinin yerinde. */
.bekleme-ortu {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: grid;
    place-items: center;
    padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
    background: #02141c66;
}

/* Sakinler lobisi karti: simsegin tersi, sakin bir yesil-mavi. */
.calm-lobby-entry { border-color: #7fd6b48c; }
.calm-lobby-art {
    position: absolute;
    top: 8px;
    right: 10px;
    display: grid;
    justify-items: center;
    gap: 1px;
    color: #cdfbe4;
    text-shadow: 0 2px 8px #04231a;
}
.calm-lobby-art i { font-size: 1.5rem; font-style: normal; line-height: 1; }
/* Sure rozeti: lobinin varlik sebebi, aciklamanin icinde kaybolmasin. */
.calm-lobby-sure-rozeti {
    justify-self: start;
    margin: 2px 0 1px;
    padding: 3px 9px;
    border: 1px solid #9ff5c6;
    border-radius: 999px;
    color: #052a1e;
    background: linear-gradient(180deg, #a8f7cf, #46c08c);
    font-size: .56rem;
    font-weight: 950;
    font-style: normal;
    letter-spacing: .06em;
    white-space: nowrap;
    box-shadow: 0 2px 8px #04231a7a, inset 0 1px #ffffffa6;
}
.calm-lobby-art b { font-size: .52rem; font-weight: 900; letter-spacing: .1em; }

/* Masa dolu ve oyuncu hazir degil: "Hazirim" dugmesi yesillenip parildar.
   Artik masada tek bekleyen odur; sari dugme otekilerle ayni gorunuyor ve
   gozden kaciyordu. */
.bekleme-alt .primary.hazir-cagri {
    border-color: #9ff5c6;
    color: #04271b;
    background: linear-gradient(180deg, #7ef0ad, #2fa772);
    animation: hazirCagri 1.15s ease-in-out infinite;
}
@keyframes hazirCagri {
    0%, 100% {
        box-shadow: 0 6px 16px #0b3c2a66, inset 0 1px #ffffff80, 0 0 0 0 #7ef0ad00;
        filter: none;
    }
    50% {
        box-shadow: 0 6px 18px #0b3c2a80, inset 0 1px #ffffff99, 0 0 18px 3px #7ef0ad7a;
        filter: brightness(1.12);
    }
}
@media (prefers-reduced-motion: reduce) {
    .bekleme-alt .primary.hazir-cagri { animation: none; box-shadow: 0 0 16px 2px #7ef0ad66; }
}

/* Bos koltuklari tamamlama satiri: ince ve ortali, asil dugmelerin onune
   gecmesin. Yalniz bos koltuk varken cizilir. */
.bekleme-doldur { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.bekleme-doldur button {
    padding: 6px 14px;
    border: 1px solid #71becd8c;
    border-radius: 11px;
    color: #dff3f8;
    background: #0d3346;
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
}
.bekleme-doldur button:active { transform: scale(.98); }
.bekleme-doldur button:disabled { opacity: .55; }

/* Alt sira: solda ayril, ortada bedel, sagda hazir. Ucu alt alta dizilince
   pencere yatay ekrana sigmiyordu. */
/* Bekleme ekranindaki sure sayaci. Masa dolu ve tek bir oyuncu hazir
   degilken gorunur; hazir olanlara neden beklediklerini, hazir olmayana
   ne kadar vakti kaldigini soyler. */
/* El aralarinda "yeni el dagitiliyor" geri sayimi. Hazir dugmesinin yerini
   aliyor: el aralarinda onay sorulmuyor. */
.yeni-el-sayaci {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid #7fd6c044;
    border-radius: 999px;
    color: #d6f4ee;
    background: #06283099;
    font-size: .64rem;
}
.yeni-el-sayaci strong {
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 999px;
    color: #042c22;
    background: #7ae8bd;
    font: 900 .82rem/1 Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.bekleme-sayac {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 5px 12px;
    border: 1px solid #7fd6c044;
    border-radius: 999px;
    color: #cfeef0;
    background: #06283099;
    font-size: .62rem;
    text-align: left;
}
.bekleme-sayac strong {
    min-width: 26px;
    padding: 2px 7px;
    border-radius: 999px;
    color: #042c22;
    background: #7ae8bd;
    font: 900 .78rem/1 Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
/* Sure kendisi icin isliyorsa uyari rengi: gozden kacmasin. */
.bekleme-sayac.uyari { border-color: #ffb36a66; color: #ffe2c4; background: #3a200899; }
.bekleme-sayac.uyari strong { color: #3a1a02; background: #ffc46a; animation: hazirCagri 1s ease-in-out infinite; }

.bekleme-alt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 1px;
}
.bekleme-alt .leave-room-button { justify-self: start; width: 100%; max-width: 190px; margin: 0; }
.bekleme-alt .primary { justify-self: end; width: 100%; max-width: 190px; margin: 0; }
.bekleme-alt .giris-bedeli-karti { margin: 0; }
/* Cevrimici test dugmesi uc sutunluk siranin altina tam genislikte gecer. */
.bekleme-alt .okey-test-start { grid-column: 1 / -1; justify-self: stretch; margin: 6px 0 0; }

/* Yatay telefonda ekran 360 piksel kadar: pencerenin TAMAMI sigmali, yoksa
   "Masadan ayril" dugmesi alt kenarin disinda kaliyor ve pencere kaydiriliyor.
   Olculerek kisildi (icerik 393 -> 341 piksel). */
.bekleme-penceresi .room-header { gap: 8px; align-items: center; margin: 0; }
.bekleme-penceresi .room-header > div { display: grid; gap: 0; }
.bekleme-penceresi .eyebrow { font-size: .58rem; letter-spacing: .1em; line-height: 1.5; }
.bekleme-penceresi .player-count { width: 42px; height: 42px; font-size: .78rem; }
.bekleme-penceresi .primary,
.bekleme-penceresi .leave-room-button { padding: 8px 14px; font-size: .84rem; }

/* Dort koltuk YAN YANA: masa yatay, pencere genis. Alt alta dizmek yatay
   ekranda pencereyi ekrandan tasiriyordu. */
.bekleme-listesi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bekleme-satiri {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    gap: 3px;
    padding: 6px 5px 7px;
    text-align: center;
    border: 1px solid #6d9eb15c;
    border-radius: 14px;
    background: linear-gradient(180deg, #164b63c7, #092b40d9);
}
.bekleme-satiri.kendisi {
    border-color: #f4d66d;
    background: linear-gradient(180deg, #705c25b8, #12394ed9);
    box-shadow: inset 0 0 14px #f6d7661f;
}
.bekleme-satiri.hazir { border-color: #3ab28d88; }
/* Bos koltuk: ayni satir, kesik cizgi. Dort koltuk her zaman cizilir ki
   masa doldukca liste yerinden oynamasin. */
.bekleme-satiri.bos {
    border-style: dashed;
    border-color: #6d9eb14d;
    background: #0a2a3c6b;
}
.bekleme-foto {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 2px solid #8bc7d8;
    border-radius: 50%;
    color: #fff2b5;
    background: linear-gradient(#277b9b, #10384e);
    box-shadow: 0 4px 10px #0008, inset 0 1px #fff7;
    font-size: 1.15rem;
    font-weight: 950;
}
.bekleme-foto img { width: 100%; height: 100%; object-fit: cover; }
.bekleme-foto.bos {
    border-style: dashed;
    border-color: #6d9eb173;
    color: #7fb3c4;
    background: #0a2838;
    box-shadow: none;
}
.bekleme-kimlik { display: grid; justify-items: center; gap: 1px; min-width: 0; width: 100%; }
.bekleme-kimlik strong {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    color: #edf9fc;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bekleme-kimlik small { color: #ffe9a1; font-size: .64rem; font-weight: 850; }
.bekleme-satiri.bos .bekleme-kimlik strong { color: #8fb6c6; font-weight: 700; }
.bekleme-durum { color: #8fb6c6; font-size: .64rem; white-space: nowrap; }
.bekleme-satiri.hazir .bekleme-durum { color: #7ef0ad; font-weight: 800; }

/* Giris bedeli: bekleme odasinin en belirleyici bilgisi, bu yuzden iri ve
   kendi kartinda. Altindaki cumle NE ZAMAN kesildigini soyler; oyuncu
   "simdi cikarsam puanim gider mi" diye tereddut etmesin. */
.giris-bedeli-karti {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 0 11px;
    margin: 1px 0 0;
    padding: 6px 13px;
    border: 1.5px solid #efd26899;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 0, #6b561c66, transparent 62%), linear-gradient(180deg, #123243, #09283a);
    text-align: center;
}
.giris-bedeli-karti small {
    color: #ffe08a;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .16em;
}
.giris-bedeli-karti strong {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff6cf;
    font-size: 1.5rem;
    font-weight: 950;
    line-height: 1.1;
    text-shadow: 0 2px 10px #00000080;
}
.giris-bedeli-karti span { grid-column: 1 / -1; color: #a9c9d4; font-size: .56rem; line-height: 1.35; }
.giris-bedeli-karti strong { font-size: 1.15rem; }

/* Uzun pencerelerin altindaki kirmizi kapat dugmesi. Yakin masa kurulumu
   ekrana sigmiyor; vazgecen oyuncu kapatmak icin ta yukaridaki carpiya
   donmek zorunda kaliyordu. */
.pencere-kapat-dugmesi {
    width: 100%;
    padding: 11px 18px;
    border: 1px solid #ff9f8c;
    border-radius: 13px;
    color: #fff1ed;
    background: linear-gradient(180deg, #b8402f, #7a1f16);
    font-size: .82rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 16px #3d0a0666, inset 0 1px #ffffff2e;
}
.pencere-kapat-dugmesi:active { transform: scale(.98); }

/* Acik masa listesinde "suren oyun" ile "doldurulmayi bekleyen masa" ayrimi.
   Ikisi de tek tip listeleniyordu; oyuncu bos sandigi masada yarim kalmis bir
   eli devraliyordu. Kirmizi ton suren oyunu, yesil ton bos koltugu anlatir. */
.open-table-tags i.open-table-live {
    border-color: #ffab8f80;
    color: #ffcdb8;
    background: #4a1c128f;
}
.open-table-tags i.open-table-free {
    border-color: #8ff0b980;
    color: #c6ffdd;
    background: #0d402b8f;
}

/* ---- Acilis duyurusu -----------------------------------------------------
   Mavi tonlar bilerek: odul, kutlama ve kampanya pencereleri sari/yesil ve
   "kazandin" diyor. Duyuru onlarla karismamali, "oku" demeli.

   Katman kampanya penceresinin (12000) USTUNDE ama cip akisinin (13500)
   altinda: duyuru acilista her seyin onunde cikar, puan akisi yine gorunur. */
.duyuru-ortu {
    position: fixed;
    inset: 0;
    z-index: 12400;
    display: grid;
    place-items: center;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    background: #021a2ccc;
    backdrop-filter: blur(3px);
}
.duyuru-kutusu {
    display: grid;
    gap: 12px;
    width: min(460px, 94vw);
    max-height: 88dvh;
    overflow: auto;
    padding: 16px 18px 18px;
    border: 1.5px solid #6fc8ea;
    border-radius: 20px;
    color: #eaf8ff;
    background:
        radial-gradient(circle at 92% 0, #3aa7d84d, transparent 42%),
        linear-gradient(160deg, #0d4a6b, #072c42 62%, #04202f);
    box-shadow: 0 22px 60px #000c, inset 0 1px #bfeaff4d;
}
.duyuru-kutusu > header { display: flex; align-items: center; gap: 12px; }
.duyuru-simge {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid #8fdcff80;
    border-radius: 50%;
    background: linear-gradient(180deg, #1b7fae, #0a4766);
    font-size: 1.3rem;
    box-shadow: 0 0 16px #4fc3f055, inset 0 1px #ffffff40;
}
.duyuru-kutusu > header small {
    display: block;
    color: #8fd4f0;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .14em;
}
.duyuru-kutusu > header strong { display: block; color: #f2fbff; font-size: 1.02rem; line-height: 1.25; }
/* Gorsel istege bagli. "contain" bilerek: yonetici her olcude resim
   yukleyebilir, kirpmak yazinin ustundeki basligi kesebilirdi. */
.duyuru-gorsel {
    display: block;
    width: 100%;
    max-height: 38dvh;
    object-fit: contain;
    border: 1px solid #6fc8ea4d;
    border-radius: 13px;
    background: #04202f;
}

/* Yoneticinin yazdigi satir sonlari korunur: duyuru cogu zaman madde madde
   yaziliyor ve tek paragrafa sikisinca okunmuyordu. */
.duyuru-metin {
    margin: 0;
    color: #d4edf8;
    font-size: .84rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.duyuru-tamam {
    justify-self: stretch;
    padding: 11px 18px;
    border: 1px solid #9fe4ff;
    border-radius: 13px;
    color: #042536;
    background: linear-gradient(180deg, #8fdcff, #3fa8d8);
    font-size: .88rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 18px #0b3c5680, inset 0 1px #ffffff80;
}
.duyuru-tamam:active { transform: scale(.98); }

/* Rakamin degistigi an gozden kacmasin diye rozet renkli bir nabiz atar. */
@keyframes puanNabziKayip {
    0%   { transform: scale(1);    filter: none; }
    22%  { transform: scale(1.16); filter: drop-shadow(0 0 8px #ff6a4d); }
    100% { transform: scale(1);    filter: none; }
}
@keyframes puanNabziKazanc {
    0%   { transform: scale(1);    filter: none; }
    22%  { transform: scale(1.16); filter: drop-shadow(0 0 8px #49e08d); }
    100% { transform: scale(1);    filter: none; }
}
.puan-nabzi-kayip  { animation: puanNabziKayip .95s ease-out; }
.puan-nabzi-kazanc { animation: puanNabziKazanc .95s ease-out; }

/* Masadaki lobi yazisi gizlendi: ayni bilgi ust bandda duruyor ve masa
   bilgileri oradaki rozetten aciliyor. Riziko carpani rozeti kalir. */
.game-lobby-badge { display: none !important; }

/* Band rozetleri tiklanabilir: ucunda ok, dokununca hafif bastirilir. */
.ust-band-ok {
    flex: 0 0 auto;
    margin-left: 1px;
    opacity: .65;
    font-weight: 900;
}
button.ust-band-rozet {
    pointer-events: auto;
    cursor: pointer;
    font-family: inherit;
    /* Tiklanabilir olanlarin cercevesi bir tik parlak. */
    border-color: #a98c2c;
    box-shadow: 0 0 0 1px #ffd97a26;
}
button.ust-band-rozet:active {
    transform: translateY(1px);
    filter: brightness(1.15);
}

/* Buyutulmus profil fotografi. */
.buyuk-foto-katmani {
    position: fixed;
    inset: 0;
    z-index: 10080;
    display: grid;
    place-items: center;
    padding: 22px;
    background: #02131ce8;
}
.buyuk-foto-katmani img {
    max-width: min(92vw, 520px);
    max-height: 82vh;
    border: 2px solid #f2c75c;
    border-radius: 16px;
    box-shadow: 0 18px 40px #000b;
    object-fit: contain;
}
.buyuk-foto-katmani .modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
}
.game-player-profile-avatar { cursor: pointer; }

/* Profil kartindan arkadas daveti. */
.game-profile-invite {
    margin: 6px auto 0;
    padding: 7px 14px;
    border: 1px solid #a7eacd;
    border-radius: 999px;
    background: linear-gradient(180deg, #2fa07c, #0e4d3c);
    color: #eafff7;
    font-size: .72rem;
    font-weight: 800;
}

/* Son puan hareketleri penceresi. */
/* Ceza listesinde sebep tam cumledir; kirpilmak yerine alta sarar. */
.ceza-listesi .puan-hareket-metin strong {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.25;
}

/* Guncellemeden sonraki ilk acilista gorunen "Yenilikler" karti. */
.yenilik-karti {
    display: grid;
    gap: 10px;
    width: min(420px, 94vw);
    max-height: 84vh;
    padding: 14px 16px 16px;
    overflow: auto;
    border: 1.5px solid #4e8aa6;
    border-radius: 20px;
    background: linear-gradient(180deg, #14394c, #0a2330);
    box-shadow: 0 18px 38px #000b;
}
.yenilik-karti > header { display: flex; align-items: center; gap: 10px; }
.yenilik-rozet {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(180deg, #f0d46d, #c79a29);
    font-size: 1.05rem;
}
.yenilik-karti > header strong { min-width: 0; color: #f4e9a8; font-size: .95rem; }
.yenilik-listesi { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.yenilik-listesi li {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid #23485c;
    border-left: 3px solid #f0d46d;
    border-radius: 10px;
    background: #08202d;
}
.yenilik-listesi strong { color: #e8f6fa; font-size: .76rem; }
.yenilik-listesi small { color: #a9c8d4; font-size: .68rem; line-height: 1.3; }
.yenilik-tamam {
    padding: 10px;
    border: none;
    border-radius: 12px;
    color: #34290a;
    background: linear-gradient(180deg, #f0d46d, #c79a29);
    font-size: .82rem;
    font-weight: 900;
}

/* Gozu zor gorenler icin buyutulmus istaka. Istakanin bos bir yuvasina cift
   dokununca acilir.

   Olcu YUKSEKLIKTEN degil GENISLIKTEN turetilir. Bir satirda 15 yuva var ve
   ekran genisligi sabit; yuksekligi tek basina buyutunce taslar uzun ve dar
   kaliyor, iki haneli rakamlar tasin disina tasiyordu. Once bir tasin
   genisligi hesaplanir (ekran genisliginin 15'te biri), yukseklik de gercek
   okey tasinin oraniyla (1:1.47) ondan cikarilir. Boylece taslar orantili
   buyur ve istaka kendiliginden ekranin yaklasik yarisini kaplar. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk,
    .game-shell.extra-large-tile-mode.istaka-buyuk {
        --istaka-tas-genislik: calc(100vw / 15);
        --istaka-tas-yukseklik: calc(var(--istaka-tas-genislik) * 1.47);
        --rack-tile-height: var(--istaka-tas-yukseklik);
        --rack-row-height: calc(var(--istaka-tas-yukseklik) + 2px);
        --rack-board-height: calc(var(--rack-row-height) * 2);
        --game-rack-height: calc(var(--rack-board-height) + 1.6dvh);
    }

    /* Kenarlara tam yaslanir: istaka ekranin iki yanina kadar uzanir ve
       yandaki dugmelerin uzerini kapatir. */
    .game-shell.istaka-buyuk .rack-area,
    .game-shell.extra-large-tile-mode.istaka-buyuk .rack-area {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        /* Yandaki yuvarlak ayar/menu dugmeleri 75'te; istaka onlarin da
           ustune cikar ki buyutulmus taslar kesilmesin. */
        z-index: 90;
        width: auto;
        max-width: none;
        margin: 0;
        padding-right: 0;
        padding-left: 0;
        border-right: none;
        border-left: none;
        border-radius: 0;
    }

    /* Bir tasin genisligi tam olarak ekran genisliginin 15'te biri olsun
       diye satir ve tahtadaki yan bosluklar sifirlanir. */
    .game-shell.istaka-buyuk .rack-board,
    .game-shell.extra-large-tile-mode.istaka-buyuk .rack-board {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    /* Istakanin iki ucundaki metal barlar kaldirilir: taslarin uzerinde
       duruyorlar ve istaka ekranin iki yanina kadar uzadigi icin ilk ve
       son tasin kenarini kirpiyorlardi. */
    .game-shell.istaka-buyuk .rack-area::before,
    .game-shell.istaka-buyuk .rack-area::after {
        display: none;
    }
    .game-shell.istaka-buyuk .rack-row,
    .game-shell.extra-large-tile-mode.istaka-buyuk .rack-row {
        width: 100%;
        margin-inline: 0;
        padding-right: 0;
        padding-left: 0;
    }

    /* Rakam da tasin genisligine gore olculur: yuksekligi izleseydi iki
       haneli sayilar tasin disina tasardi. */
    .game-shell.istaka-buyuk .rack-tile,
    .game-shell.extra-large-tile-mode.istaka-buyuk .rack-tile {
        font-size: calc(var(--istaka-tas-genislik) * .5);
    }
    .game-shell.extra-large-tile-mode.istaka-buyuk .rack-tile::before {
        width: calc(var(--istaka-tas-yukseklik) * .26);
        height: calc(var(--istaka-tas-yukseklik) * .26);
    }
    .game-shell.extra-large-tile-mode.istaka-buyuk .rack-tile > span {
        transform: translateY(calc(var(--istaka-tas-yukseklik) * -.115));
    }

    /* Masa GIZLENMEZ: istaka one cikar, masa arkasinda gorunmeye devam eder.
       Yalniz istakanin sag yanindaki arac sutunu gizlenir; istaka ekranin
       iki yanina kadar uzadigi icin o sutuna yer kalmiyor. */
    .game-shell.istaka-buyuk .rack-heading {
        display: none;
    }

    /* Kendi atik tasimizin kutusu buyutulmus istakanin altinda kalmasin:
       tasi oraya surukleyip atabilmek icin istakanin hemen ustune alinir. */
    .game-shell.istaka-buyuk {
        --lower-discard-offset: calc(var(--game-rack-height) + 10px);
    }

    /* "Seri diz", "Cift diz" ve "Otomatik isle" buyutulmus istakada da
       gerekiyor: oyuncu taslari asil orada diziyor. Sutun normalde
       istakanin solunda, tahtanin disinda duruyor; istaka ekranin iki
       yanina kadar uzadigi icin orada yer kalmiyor. Bu yuzden istakanin
       hemen ustune, yatay bir seride alinir. */
    .game-shell.istaka-buyuk .rack-left-tools {
        position: fixed;
        /* X düğmesine yer kalır: şerit onun solunda biter. */
        right: 64px;
        bottom: calc(var(--game-rack-height) + 8px);
        left: auto;
        z-index: 91;
        flex-direction: row;
        width: auto;
        transform: none;
    }
    /* "Otomatik isle" seritten ayrilip sola, masanin uzerine alinir:
       sagda "Seri diz" ve "Cift diz" ile X kaliyor. */
    .game-shell.istaka-buyuk .rack-left-tools > .auto-layoff {
        position: fixed;
        right: auto;
        bottom: calc(var(--game-rack-height) + 8px);
        left: 8px;
        z-index: 91;
        /* Yanina gelen acma dugmeleri ona binmesin diye genislik sabit. */
        width: 96px;
        min-width: 96px;
    }

    /* "Perleri ac / Cifleri ac" (el acildiktan sonra "Perleri isle /
       Cifleri isle") de solda, "Otomatik isle"nin yaninda durur. Bu
       dugmeler normalde istakanin sag yaninda dikey bir sutunda; istaka
       ekranin iki yanina kadar uzadigi icin orada yer kalmiyor.
       Sutundaki "Ceza" rozeti disarida: burada islem dugmeleri gerekiyor,
       rozet degil. */
    .game-shell.istaka-buyuk .rack-right-tools {
        position: fixed;
        right: auto;
        bottom: calc(var(--game-rack-height) + 8px);
        left: 110px;
        z-index: 91;
        flex-direction: row;
        justify-content: flex-start;
        width: auto;
    }
    .game-shell.istaka-buyuk .rack-right-tools > .rack-score-penalty-stack {
        display: none;
    }
    .game-shell.istaka-buyuk .rack-right-tools > .rack-open-action {
        flex: 0 0 auto;
        width: 96px;
        min-width: 96px;
        min-height: 46px;
        padding: 6px 10px;
        font-size: .82rem;
    }

    .game-shell.istaka-buyuk .rack-left-tools > button,
    .game-shell.istaka-buyuk .rack-left-tools > .assist-control {
        flex: 0 0 auto;
        min-width: 96px;
        min-height: 46px;
        padding: 6px 14px;
        font-size: .82rem;
    }
}
/* Buyutmeyi kapatan kirmizi X. Istakanin USTUNDE, sag kosede durur:
   istakanin icinde dururken en sagdaki tasin uzerine biniyordu. */
.istaka-kucult {
    position: absolute;
    top: auto;
    right: 8px;
    bottom: calc(100% + 8px);
    z-index: 30;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid #ffc3b6;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(#e2503c, #8d1a10);
    box-shadow: 0 4px 12px #000a, inset 0 1px #ffd6cd88;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
}

/* Favori oyun karti: ana ekranda lobi listesinin ustunde durur. */
/* Secenek penceresindeki "Favorime ekle" isareti. */
.favoriye-ekle {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 9px;
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #4c6b78;
    border-radius: 12px;
    color: #cfe6ef;
    background: #0c2532;
    text-align: left;
}
.favoriye-ekle > span:first-child { grid-row: 1 / 3; color: #f0d46d; font-size: 1.2rem; }
.favoriye-ekle > span:nth-child(2) { font-size: .78rem; font-weight: 800; }
.favoriye-ekle > small { color: #8fb6c6; font-size: .62rem; }
.favoriye-ekle.secili {
    border-color: #f0d46d;
    color: #fff6d8;
    background: linear-gradient(120deg, #3c2b06, #15303c 62%);
}

.favori-oyun-karti {
    position: relative;
    margin: 0 0 11px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #f0d46d;
    border-radius: 16px;
    color: #fff6d8;
    background: linear-gradient(120deg, #3c2b06, #1d2b33 62%);
    box-shadow: 0 8px 20px #0008, inset 0 1px #ffe9a366;
    text-align: left;
}
.favori-oyun-karti:disabled { opacity: .6; }

/* Sik oynadiklarin karti favoriyle karismasin: ayni olcu, farkli vurgu.
   Favori altin, bu teal; ikisi ayni anda cikmiyor ama oyuncu hangisinin
   kendi secimi oldugunu renkten de ayirt edebilmeli. */
.favori-oyun-karti.sik-oynanan-karti {
    border-color: #64c9c0;
    background: linear-gradient(120deg, #0c3733, #1d2b33 62%);
    box-shadow: 0 8px 20px #0008, inset 0 1px #9ff0e766;
}
.sik-oynanan-karti .favori-yildiz {
    color: #0b2f2b;
    background: linear-gradient(180deg, #8ef0e4, #35aba0);
}
.sik-oynanan-karti .favori-metin small { color: #8fd8d0; }
.sik-oynanan-karti > b { color: #b6f0e8; }
.favori-yildiz {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #43320a;
    background: linear-gradient(180deg, #ffe07a, #d0a323);
    font-size: 1.15rem;
}
.favori-metin { display: grid; flex: 1; min-width: 0; gap: 2px; }
.favori-metin small { color: #e2c477; font-size: .54rem; font-weight: 900; letter-spacing: .09em; }
.favori-metin strong { color: #fff6d8; font-size: .92rem; }
.favori-metin em { color: #b9cdd6; font-size: .66rem; font-style: normal; }
.favori-oyun-karti > b { flex: 0 0 auto; color: #ffe9a3; font-size: .72rem; font-weight: 900; }

.puan-hareket-karti {
    display: grid;
    gap: 8px;
    width: min(380px, 94vw);
    max-height: 78vh;
    padding: 12px 14px 14px;
    overflow: auto;
    border: 1.5px solid #2f5566;
    border-radius: 18px;
    background: linear-gradient(180deg, #123243, #0a2331);
    box-shadow: 0 16px 34px #000a;
}
.puan-hareket-karti > header { display: flex; align-items: center; gap: 8px; }
.puan-hareket-karti > header strong { flex: 1; color: #e8f6fa; font-size: .84rem; }
.puan-hareket-sayisi { flex: 0 0 auto; color: #7fa3b3; font-size: .62rem; white-space: nowrap; }
/* Baslik kaydirilirken kaybolmasin: liste uzadi, kart kaydiriliyor. */
.puan-hareket-karti > header {
    position: sticky;
    top: -12px;
    z-index: 1;
    margin: -12px -14px 0;
    padding: 12px 14px 8px;
    background: linear-gradient(180deg, #123243 70%, #12324300);
}
.puan-hareket-bos { margin: 10px 0; color: #8fb6c6; font-size: .74rem; text-align: center; }
.puan-hareket-listesi { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.puan-hareket-listesi li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid #23485c;
    border-radius: 12px;
    background: #08202d;
}
.puan-hareket-simge { flex: 0 0 auto; font-size: 1rem; }
.puan-hareket-metin { flex: 1; display: grid; min-width: 0; }
.puan-hareket-metin strong {
    color: #dceef5;
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.puan-hareket-metin small { color: #7fa3b3; font-size: .62rem; }
.puan-hareket-listesi li > b { flex: 0 0 auto; font-size: .8rem; font-weight: 900; }
.puan-hareket-listesi li.kazanc > b { color: #7ef0ad; }
.puan-hareket-listesi li.kayip > b { color: #ff8f78; }

/* El sonu ekrani sadelestirildi: bedel tek satirda, katilim durumu
   oyuncunun kendi kartinin altinda. */
.rematch-cost-line {
    margin: 4px 0 2px;
    color: #ffe9a3;
    font-size: .74rem;
    text-align: center;
}
.rematch-cost-line .coin-icon { vertical-align: -2px; }
.score-podium-rematch {
    display: block;
    margin-top: 2px;
    color: #8fb6c6;
    font-size: .62rem;
}
.score-podium-player.rematch-ready .score-podium-rematch { color: #7ef0ad; font-weight: 800; }
.score-podium-player.rematch-ready { border-color: #3ab28d88; }

/* Ozel mesaj kutusundaki sesli yazma dugmesi masadakiyle ayni gorunur. */
.direct-message-compose .chat-mic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #2f5566;
    border-radius: 50%;
    background: #0d2634;
    color: #cfe7ec;
    font-size: .95rem;
    line-height: 1;
}
.direct-message-compose .chat-mic.listening {
    border-color: #ff6b6b;
    background: #4a1414;
    color: #ffd9d9;
    animation: chatMicPulse 1s ease-in-out infinite alternate;
}
.direct-message-compose .chat-mic.preparing {
    border-color: #ffd75e;
    background: #3d3410;
    color: #ffeeb4;
    animation: chatMicWait .9s ease-in-out infinite alternate;
}

/* Mesaj yazma alanlari cok satirli: uc satira kadar buyur, sonra kaydirilir.
   Yukseklik JavaScript tarafinda hesaplanir (metin-alani.js). */
.table-chat-compose textarea,
.direct-message-compose textarea {
    flex: 1;
    min-width: 0;
    min-height: 34px;
    max-height: 96px;
    padding: 8px 10px;
    overflow-y: hidden;
    border: 1px solid #2f5566;
    border-radius: 12px;
    background: #08202d;
    color: #e8f6fa;
    font: inherit;
    line-height: 1.35;
    resize: none;
}
.table-chat-compose textarea::placeholder,
.direct-message-compose textarea::placeholder { color: #6f95a6; }

/* Sesli mesaj penceresindeki metin de uc satiri gecince kaydirilir. */
.voice-message-text {
    max-height: 4.4em;
    overflow-y: auto;
}

.folded-rule-lock { display: block; margin: -.4rem 0 .45rem; color: #ffd16f; font-weight: 750; }
.voice-lobby-control { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; margin:-5px 0 12px; padding:10px 12px; border:1px solid #61dff888; border-radius:15px; color:#e8fdff; background:linear-gradient(135deg,#0c4058e8,#111b3de8); box-shadow:inset 0 1px #d9fbff33,0 7px 18px #0005; }
.voice-lobby-control.connected { border-color:#6de1a7; background:linear-gradient(135deg,#0c5147e8,#112f3de8); }
.voice-lobby-control > span { font-size:1.55rem; }
.voice-lobby-control > div { display:grid; min-width:0; }
.voice-lobby-control strong { color:#9cf5ff; font-size:.78rem; }
.voice-lobby-control small { overflow:hidden; color:#b7d7df; font-size:.56rem; text-overflow:ellipsis; white-space:nowrap; }
.voice-lobby-control button { min-height:34px; margin:0; padding:7px 10px; border:1px solid #9af1ff; border-radius:11px; color:#092236; background:linear-gradient(#a8f8ff,#4bc2dc); font-size:.58rem; font-weight:900; white-space:nowrap; }
.risky-lobby-entry {
    border-color: #ff596b;
    background: radial-gradient(circle at 15% 20%, #ffcd5c3d, transparent 31%), linear-gradient(125deg, #751419 0%, #410b16 48%, #161122 100%);
    box-shadow: inset 0 1px #ffd4b878, 0 14px 28px #0008, 0 0 24px #ff2e4240;
}
.tournament-lobby-entry{grid-template-columns:94px minmax(0,1fr) auto;padding-top:58px;border-color:#f7d65a;background:radial-gradient(circle at 12% 18%,#ffe8734d,transparent 30%),linear-gradient(125deg,#59400d 0%,#182a35 55%,#071d2b 100%);box-shadow:inset 0 1px #fff5b088,0 14px 28px #0008,0 0 26px #f3c83242}.tournament-lobby-cup{display:grid;place-items:center;width:82px;height:82px;border:2px solid #ffe577;border-radius:24px;background:linear-gradient(145deg,#6e501a,#181f28);box-shadow:inset 0 1px #fff5a477,0 7px 16px #0009,0 0 18px #ffd94b4d;font-size:2.65rem}.tournament-lobby-entry-copy{align-content:center}.tournament-title-corner{position:absolute;top:9px;right:12px;display:grid;justify-items:end;max-width:62%;line-height:1.08;text-align:right}.tournament-title-corner small{font-size:.62rem}.tournament-title-corner strong{font-size:clamp(1.02rem,3vw,1.38rem);white-space:nowrap}.tournament-countdown-badge{display:grid;justify-items:center;gap:1px;min-width:112px;padding:6px 10px;border:1px solid #ffe478;border-radius:11px;color:#fff1a2;background:linear-gradient(180deg,#213c48ed,#081e2aed);box-shadow:inset 0 1px #fff8b65c,0 4px 12px #0009,0 0 13px #ffd84a38;font-variant-numeric:tabular-nums}.tournament-countdown-badge small{color:#e7c95f;font-size:.46rem;font-weight:950;letter-spacing:.1em}.tournament-countdown-badge strong{color:#fff4a9;font-size:.88rem;font-weight:950;line-height:1;text-shadow:0 2px 5px #000}.tournament-countdown-corner{position:absolute;z-index:2;top:8px;left:10px;right:auto}.tournament-prizes{position:absolute;left:12px;right:12px;bottom:7px;display:flex;justify-content:center;gap:7px;pointer-events:none}.tournament-prizes i{padding:2px 7px;border:1px solid #efd26055;border-radius:99px;color:#ffec9f;background:#071923cc;font-size:.54rem;font-style:normal;font-weight:900}.tournament-mini-board{margin:8px 0 11px;overflow:hidden;border:1px solid #e9cd6266;border-radius:16px;color:#eaf8fb;background:linear-gradient(145deg,#0c3442,#041b27);box-shadow:0 10px 25px #0006}.tournament-mini-board>header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #efd26338;background:#153f48}.tournament-mini-board>header div{display:grid}.tournament-mini-board>header strong{color:#ffe886;font-size:.75rem}.tournament-mini-board>header small{color:#b7d3d9;font-size:.48rem;font-variant-numeric:tabular-nums}.tournament-mini-board>header button{width:30px;height:30px;padding:0;border:1px solid #ebd16a77;border-radius:50%;color:#ffe983;background:#082532}.tournament-mini-board>div{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid #ffffff0b;font-size:.58rem}.tournament-mini-board>div.current{color:#2c2606;background:#f0d15c}.tournament-mini-board>div>b{color:#ffe16d}.tournament-mini-board>div.current>b{color:#493d08}.tournament-mini-board>div>strong{color:#a8eccd}.tournament-mini-board>div.current>strong{color:#214c3b}.tournament-mini-board>p{margin:0;padding:15px;color:#a9c8cf;text-align:center;font-size:.55rem}
.tournament-lobby-entry-copy { position: static !important; }
.tournament-title-corner { z-index: 3; }
.tournament-lobby-entry .tournament-countdown-corner {
    position: absolute !important;
    top: 50px;
    right: 12px;
    left: auto;
}
.tournament-lobby-entry .tournament-entry-action {
    position: absolute !important;
    right: 12px;
    bottom: 10px;
    width: auto;
    display: block;
}
.tournament-lobby-entry .tournament-prizes {
    position: absolute !important;
    left: auto;
    right: 165px;
    width: 220px;
    bottom: 12px;
    justify-content: flex-end;
}
.folded-lobby-entry:not(.tournament-lobby-entry) .folded-lobby-entry-copy {
    justify-items: end;
    padding-left: 0;
    text-align: right;
}
.risky-lobby-tiles i { color: #151525; }
.risky-lobby-tiles b { right: -12px; min-width: 55px; border-color: #ffcc5c; background: #c5162d; font-size: .7rem; }
.ranked-lobby-card.locked .ranked-lobby-art { opacity: .42; filter: grayscale(1); }
.lobby-entry-locked .folded-lobby-entry-action b {
    color: #fff3b5;
    border: 1px solid #ffe39a;
    background: linear-gradient(160deg, #59636e, #202833 65%, #121820);
    box-shadow: inset 0 1px #ffffff44, 0 4px 9px #0008;
}

@media (max-width: 560px) {
    .folded-lobby-entry { grid-template-columns: 82px 1fr; min-height: 106px; padding: 11px; gap: 10px; }
    .folded-lobby-tiles { min-width: 78px; transform: scale(.82); transform-origin: left center; }
    .voice-lobby-art { width:70px; height:62px; border-radius:18px; }
    .voice-lobby-art i { font-size:1.85rem; }
    .lightning-lobby-art { width:70px; height:62px; border-radius:18px; }
    .lightning-lobby-art i { font-size:1.85rem; }
    .folded-lobby-entry-action { grid-column: 1 / -1; grid-row: 2; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
    .folded-lobby-entry-action small { min-width: 0; white-space: normal; font-size: .69rem; line-height: 1.15; }
    .folded-lobby-entry-action b { flex: 0 0 auto; padding: 6px 10px; font-size: .72rem; white-space: nowrap; }
    .folded-lobby-entry-copy em { display: none; }
    .tournament-lobby-entry{grid-template-columns:70px 1fr;padding-top:58px;padding-bottom:30px}.tournament-lobby-cup{width:64px;height:64px;border-radius:19px;font-size:2rem}.tournament-title-corner{right:9px;max-width:61%}.tournament-title-corner small{font-size:.49rem}.tournament-title-corner strong{font-size:.9rem}.tournament-countdown-corner{left:8px}.tournament-countdown-badge{min-width:96px;padding:5px 7px}.tournament-countdown-badge strong{font-size:.72rem}.tournament-prizes{gap:3px}.tournament-prizes i{padding-inline:5px;font-size:.48rem}
    .tournament-lobby-entry .tournament-countdown-corner { position: absolute !important; top: 47px; right: 9px; left: auto; }
    .tournament-lobby-entry .tournament-entry-action { right: 9px; bottom: 9px; }
    .tournament-lobby-entry .tournament-prizes { position: absolute !important; left: auto; right: 180px; width: 210px; bottom: 11px; justify-content: flex-end; }
    .folded-lobby-entry:not(.tournament-lobby-entry) .folded-lobby-entry-copy { justify-items: end; padding-left: 0; text-align: right; }
}

/*
 * Son cihaz bağımsız ıstaka geometrisi. Android WebView CSS pikselini cihaz
 * yoğunluğuna göre değiştirebildiği için eski 420/500px eşikleri aynı fiziksel
 * çözünürlükte farklı görünüm oluşturuyordu. Istaka ve eldeki taşlar ekran
 * yüksekliğinin sabit oranını kullanır; bu blok tüm eski ölçüleri son kez ezer.
 */
@media (orientation: landscape) {
    .game-shell,
    .game-shell.extra-large-tile-mode {
        /* Istaka 10 piksel alcaltildi. Olculer ekran yuksekliginin orani
           oldugu icin tek bir carpan kullanilir: boylece tahta, satir ve
           taslar ayni oranda kuculur, biri digerinden ayri kalmaz.
           Yatay ekranda 34dvh yaklasik 134 piksel; .926 carpani 10 piksel
           eksiltir. */
        --istaka-olcek: .926;
        --game-rack-height: calc(34dvh * var(--istaka-olcek));
        --rack-board-height: calc(32dvh * var(--istaka-olcek));
        --rack-row-height: calc(16dvh * var(--istaka-olcek));
        --rack-tile-height: calc(14.7dvh * var(--istaka-olcek));
        /* Alt iki oyuncunun atık taşı alanı 3 piksel yukarı alındı. */
        --lower-discard-offset: calc(35.2dvh * var(--istaka-olcek) + 3px);
        grid-template-rows: minmax(0, 1fr) var(--game-rack-height);
    }

    .game-shell .rack-area,
    .game-shell.extra-large-tile-mode .rack-area {
        box-sizing: border-box;
        height: var(--game-rack-height);
        min-height: var(--game-rack-height);
        max-height: var(--game-rack-height);
        padding-top: .7dvh;
        padding-bottom: 1.3dvh;
    }

    .game-shell .rack-board,
    .game-shell.extra-large-tile-mode .rack-board {
        height: var(--rack-board-height);
        min-height: var(--rack-board-height);
        max-height: var(--rack-board-height);
        grid-template-rows: repeat(2, var(--rack-row-height));
        gap: 0;
    }

    .game-shell .rack-row,
    .game-shell.extra-large-tile-mode .rack-row {
        width: calc(100% - 1.1dvw);
        height: var(--rack-row-height);
        min-height: var(--rack-row-height);
        max-height: var(--rack-row-height);
        margin-inline: auto;
        grid-template-columns: repeat(16, minmax(0, 1fr));
        column-gap: 0;
    }

    .game-shell .rack-slot,
    .game-shell.extra-large-tile-mode .rack-slot {
        height: var(--rack-tile-height);
        min-height: var(--rack-tile-height);
        max-height: var(--rack-tile-height);
        align-self: end;
        transform: scaleX(1.005);
        transform-origin: center bottom;
    }

    .game-shell .rack-tile,
    .game-shell.extra-large-tile-mode .rack-tile {
        height: 100%;
        font-size: 4.9dvh;
    }

    .game-shell.extra-large-tile-mode .rack-tile::before {
        width: 4.15dvh;
        height: 4.15dvh;
    }

    .game-shell.extra-large-tile-mode .rack-tile > span {
        transform: translateY(-1.7dvh);
    }
}

/* Bütün cihazlarda ve tüm taş türlerinde tek rakam fontu kullanılır. Bu kural
   dosyanın sonunda kalarak ıstaka, açılan per, gösterge ve yan taş kurallarını ezer. */
@media (orientation: landscape) {
    .game-shell .rack-tile,
    .game-shell .table-tile,
    .game-shell .rack-tile > span,
    .game-shell .table-tile > .tile-number {
        font-family: "UltraTileNumbers", sans-serif !important;
        font-weight: 900 !important;
        font-synthesis: weight;
        -webkit-text-stroke: 2px currentColor;
        text-shadow:
            0 -1px 0 rgba(0, 0, 0, .38),
            0 1px 0 rgba(255, 255, 255, .52);
    }

    .game-shell .discard-corner-slot .player-discard-pile .table-tile,
    .game-shell .discard-corner-slot .player-discard-pile .table-tile > .tile-number,
    .game-shell .meld-area .meld .table-tile,
    .game-shell .meld-area .meld .table-tile > .tile-number {
        font-family: "UltraTileNumbers", sans-serif !important;
        font-weight: 900 !important;
        -webkit-text-stroke: 1px currentColor;
        text-shadow:
            0 -.5px 0 rgba(0, 0, 0, .3),
            0 .5px 0 rgba(255, 255, 255, .42);
    }

    /* Yalnız oyuncuların yanındaki son atılan taşların rakamını büyütür. */
    .game-shell .discard-corner-slot .player-discard-pile .table-tile > .tile-number {
        font-size: 1.32em;
        line-height: 1;
    }
}

/* El açılmadan önceki işlekler yanıp sönen çerçeve kullanmaz; işaretleri
   aşağıdaki kırmızı halkalardır. Çift işareti bunun dışında: o kendi mor
   çerçevesini korur, çünkü "atarsan ceza" değil "bunları işleyebilirsin"
   demektir. */
.game-shell .rack-tile.playable-unopened-hint:not(.playable-pair-hint):not(.selected) {
    outline: none !important;
    animation: none !important;
    filter: none !important;
}
.game-shell .rack-tile.playable-unopened-hint:not(.playable-pair-hint):not(.selected):not(.okey-face-down):not(.okey-tap-flip)::after {
    content: "";
    display: block !important;
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: auto;
    left: auto;
    width: 6px;
    height: 6px;
    border: 0;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .72), 0 1px 2px rgba(0, 0, 0, .58);
    opacity: 1;
    visibility: visible;
    transform: none;
    z-index: 8;
    pointer-events: none;
}
.game-shell .rack-tile.playable-unopened-hint:not(.playable-pair-hint):not(.selected) > span {
    translate: 0 3px;
}

/* Taş toplamı ıstakanın sol üst kenarında; per toplamı taş destesinin yanında. */
@media (orientation: landscape) {
    .game-shell .rack-tile-total-badge {
        position: absolute;
        top: -28px;
        left: 7px;
        z-index: 18;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 78px;
        min-height: 26px;
        padding: 3px 9px;
        border: 1px solid #8ee9d1;
        border-radius: 8px;
        color: #dffff5;
        background: linear-gradient(180deg, #267a70, #124b50);
        box-shadow: inset 0 1px #d9fff288, 0 3px 8px #001523b8;
        font-family: Arial, sans-serif;
        line-height: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .game-shell .rack-tile-total-badge small {
        font-size: .46rem;
        font-weight: 850;
    }

    .game-shell .rack-tile-total-badge b {
        color: #fff6a8;
        font-size: .76rem;
        font-weight: 950;
    }

    .game-shell .table-center .table-center-totals.per-total-badge {
        width: 70px;
        min-height: 34px;
        padding: 4px 7px;
        border: 1px solid #ffd96d;
        border-radius: 10px;
        color: #fff4bb;
        background: linear-gradient(180deg, #8d1b2f, #4d0716);
        box-shadow: inset 0 1px #ffffff42, 0 3px 8px #230008c7, 0 0 9px #ff405b55;
        font-family: Arial, sans-serif;
    }

    .game-shell .table-center .table-center-totals.per-total-badge > span {
        font-size: .48rem;
        font-weight: 900;
        letter-spacing: .02em;
    }

    .game-shell .table-center .table-center-totals.per-total-badge b {
        color: #ffe15f;
        font-size: .9rem;
        font-weight: 950;
        text-shadow: 0 1px 2px #260006;
    }

    .game-shell .table-center .table-center-totals.per-total-badge.ready-to-open {
        border-color: #baff8d;
        animation: per-total-ready-pulse .72s ease-in-out infinite alternate;
    }
}

@keyframes per-total-ready-pulse {
    from {
        filter: brightness(1);
        box-shadow: inset 0 1px #eaffc566, 0 3px 8px #002b14aa, 0 0 3px 1px #42e66b88;
    }
    to {
        filter: brightness(1.22);
        box-shadow: inset 0 1px #ffffffaa, 0 3px 8px #002b14aa, 0 0 13px 4px #69ef75e6;
    }
}

@media (orientation: landscape) and (max-height: 420px) {
    .game-shell .rack-tile-total-badge {
        top: -25px;
        min-height: 23px;
        padding-block: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .game-shell .table-center .table-center-totals.per-total-badge.ready-to-open {
        animation: none;
        box-shadow: inset 0 1px #ffffff88, 0 3px 8px #002b14aa, 0 0 11px 3px #69ef75cc;
    }
}

/* Okey ele geldiğinde: merkezde büyük göster, döndür ve gerçek ıstaka yuvasına indir. */
.okey-acquired-celebration {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    pointer-events: none;
    perspective: 900px;
    overflow: hidden;
}

.okey-acquired-celebration::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 48%, #fff6a42b 0 9%, #ffc21b17 23%, transparent 48%);
    animation: okey-acquired-flash 1.05s ease-out both;
}

.okey-acquired-rays {
    position: absolute;
    width: min(52vmin, 340px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    background: repeating-conic-gradient(from 8deg, #ffe77f00 0 8deg, #ffe77f9c 9deg 11deg, #ffe77f00 12deg 23deg);
    filter: drop-shadow(0 0 10px #ffd84b);
    animation: okey-acquired-rays 1.05s ease-out both;
}

.okey-acquired-tile {
    --okey-land-x: 0px;
    --okey-land-y: 32vh;
    --okey-land-scale-x: .34;
    --okey-land-scale-y: .34;
    position: relative;
    display: grid;
    grid-template-rows: 1fr 28px;
    place-items: center;
    width: clamp(88px, 12vw, 118px);
    height: clamp(122px, 17vw, 164px);
    box-sizing: border-box;
    padding: 11px 9px 8px;
    border: 2px solid #fffdf1;
    border-radius: 8px;
    color: #121716;
    background:
        linear-gradient(155deg, #ffffff 0 34%, #eeeade 35% 58%, #fffef8 59% 100%);
    box-shadow:
        inset 3px 3px 4px #ffffff,
        inset -4px -5px 6px #b8b4aa,
        0 8px 0 #aaa69b,
        0 16px 24px #00121ccc,
        0 0 28px #ffdc51cc;
    transform-style: preserve-3d;
    opacity: 0;
}

.okey-acquired-celebration.landing-ready .okey-acquired-tile {
    animation: okey-acquired-spin-and-land 1.35s cubic-bezier(.2,.74,.18,1) both;
}

.okey-acquired-tile strong {
    font-family: "UltraTileNumbers", Arial, sans-serif;
    font-size: clamp(58px, 8vw, 82px);
    font-weight: 950;
    line-height: .95;
    text-shadow: 0 2px 0 #ffffff, 0 4px 3px #0003;
}

.okey-acquired-tile.red strong { color: #d3231d; }
.okey-acquired-tile.blue strong { color: #0873d1; }
.okey-acquired-tile.yellow strong { color: #c79500; }
.okey-acquired-tile.black strong { color: #151a19; }

.okey-acquired-tile i {
    position: absolute;
    left: 50%;
    bottom: 31px;
    width: 21px;
    height: 21px;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 36%, #fff 0 8%, currentColor 10% 50%, #ffffff55 52% 61%, #777 63% 100%);
    box-shadow: inset 0 2px 4px #0007, 0 1px 1px #fff;
}

.okey-acquired-tile.red i { color: #d3231d; }
.okey-acquired-tile.blue i { color: #0873d1; }
.okey-acquired-tile.yellow i { color: #d2a000; }
.okey-acquired-tile.black i { color: #151a19; }

.okey-acquired-tile small {
    align-self: end;
    font: 950 13px/1 Arial, sans-serif;
    letter-spacing: .13em;
    color: #9b6a00;
    text-shadow: 0 1px #fff;
}

.okey-acquired-spark {
    position: absolute;
    color: #fff4a0;
    font-size: clamp(22px, 4vw, 42px);
    opacity: 0;
    filter: drop-shadow(0 0 5px #ffbe16);
    animation: okey-acquired-spark 1s ease-out both;
}
.okey-acquired-spark.spark-one { translate: -105px -70px; animation-delay: .08s; }
.okey-acquired-spark.spark-two { translate: 106px -45px; animation-delay: .18s; }
.okey-acquired-spark.spark-three { translate: 78px 82px; animation-delay: .27s; }

@keyframes okey-acquired-spin-and-land {
    0% { opacity: 0; transform: translate3d(0,-20px,0) rotateY(-540deg) rotateZ(-8deg) scale(.25); }
    18% { opacity: 1; transform: translate3d(0,0,70px) rotateY(-300deg) rotateZ(5deg) scale(1.18); }
    48% { opacity: 1; transform: translate3d(0,0,80px) rotateY(0deg) rotateZ(0deg) scale(1.08); }
    66% { opacity: 1; transform: translate3d(0,0,20px) rotateY(360deg) scale(1); }
    100% {
        opacity: .08;
        transform: translate3d(var(--okey-land-x),var(--okey-land-y),0)
                   rotateY(720deg) scale(var(--okey-land-scale-x),var(--okey-land-scale-y));
    }
}

@keyframes okey-acquired-flash {
    0% { opacity: 0; }
    20% { opacity: 1; }
    75% { opacity: .8; }
    100% { opacity: 0; }
}

@keyframes okey-acquired-rays {
    0% { opacity: 0; transform: rotate(-30deg) scale(.35); }
    24% { opacity: .85; }
    100% { opacity: 0; transform: rotate(45deg) scale(1.35); }
}

@keyframes okey-acquired-spark {
    0% { opacity: 0; transform: scale(.25) rotate(0); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.45) rotate(120deg); }
}

@media (prefers-reduced-motion: reduce) {
    .okey-acquired-celebration.landing-ready .okey-acquired-tile {
        animation-duration: .75s;
    }
}

/* ---------------------------------------------------------------------------
   Göstergeye atarak bitirme: ıstakada tek taş kalınca gösterge kutusu bitirme
   hedefine dönüşür, taş oraya bırakılınca zafer animasyonu oynar.
   --------------------------------------------------------------------------- */

.indicator-block.finish-drop-target {
    position: relative;
    z-index: 4;
    border-radius: 14px;
    outline: 2px dashed #ffd75199;
    outline-offset: 5px;
    animation: finish-target-breathe 1.25s ease-in-out infinite;
}

.indicator-block.finish-drop-target::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -14px -18px;
    border-radius: 20px;
    background: radial-gradient(circle at 50% 45%, #ffd75136 0 44%, #ffd7510f 66%, transparent 78%);
    pointer-events: none;
}

.indicator-block.finish-drop-target .table-tile {
    box-shadow: 0 0 0 2px #ffe27f, 0 0 18px #ffc73bb3;
}

/* Ipucu balonu masa yerlesimini kaydirmasin diye mutlak konumlanir. */
.finish-drop-hint {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: 3px 8px;
    border: 1px solid #ffd75173;
    border-radius: 999px;
    background: #10314ae6;
    line-height: 1.05;
    white-space: nowrap;
    translate: -50% 0;
    pointer-events: none;
}

.finish-drop-hint small { color: #ffe9a8; font-size: .48rem; letter-spacing: .12em; }
.finish-drop-hint b { color: #fff6d3; font-size: .56rem; letter-spacing: .04em; text-transform: none; }

.indicator-block.finish-target-hover {
    outline-style: solid;
    outline-color: #ffe27f;
    outline-offset: 8px;
    animation: none;
    scale: 1.08;
}

.indicator-block.finish-target-hover::before {
    background: radial-gradient(circle at 50% 45%, #ffe27f5c 0 50%, #ffd75124 72%, transparent 84%);
}

.indicator-block.finish-target-hover .table-tile {
    box-shadow: 0 0 0 3px #fff3c0, 0 0 30px #ffce46;
}

.indicator-block.finish-target-landed {
    outline-color: #fff3c0;
    animation: finish-target-slam .55s cubic-bezier(.2,.78,.24,1) both;
}

.rack-tile.finish-ready {
    box-shadow: 0 0 0 2px #ffe27f, 0 10px 22px #00121ccc, 0 0 26px #ffc73bcc !important;
    filter: brightness(1.08);
}

@keyframes finish-target-breathe {
    0%, 100% { outline-offset: 5px; outline-color: #ffd75182; }
    50% { outline-offset: 9px; outline-color: #ffe9a8; }
}

@keyframes finish-target-slam {
    0% { scale: 1.16; }
    40% { scale: .93; }
    70% { scale: 1.05; }
    100% { scale: 1; }
}

.indicator-finish-celebration {
    position: fixed;
    inset: 0;
    z-index: 30001;
    display: grid;
    grid-auto-rows: min-content;
    align-content: center;
    justify-items: center;
    gap: clamp(14px, 3vh, 30px);
    overflow: hidden;
    pointer-events: none;
    perspective: 1000px;
    /* Carpma vurgusu titreme degil, cok kisa ve tek yonlu bir yakinlasmadir. */
    animation: indicator-finish-punch .36s cubic-bezier(.2,.82,.3,1) .46s both;
}

/* Sarsinti sirasinda kenarlarda bosluk acilmasin diye karartma tasar. */
.indicator-finish-celebration::before {
    content: "";
    position: absolute;
    inset: -32px;
    background: radial-gradient(circle at 50% 46%, #06253aeb 0 34%, #041724d6 62%, #010d16f2 100%);
    animation: indicator-finish-dim .42s ease-out both;
}

.indicator-finish-flash {
    position: absolute;
    inset: -32px;
    opacity: 0;
    background: radial-gradient(circle at 50% 44%, #fffdf2 0 4%, #ffe27fd9 13%, #ffbe1633 27%, transparent 46%);
    animation: indicator-finish-flash .55s ease-out .46s both;
}

.indicator-finish-rays {
    position: absolute;
    width: min(120vmin, 900px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    background: repeating-conic-gradient(from 4deg, #ffe77f00 0 7deg, #ffe77f7a 8deg 10deg, #ffe77f00 11deg 21deg);
    filter: drop-shadow(0 0 14px #ffd84b);
    animation: indicator-finish-rays 2.6s cubic-bezier(.12,.7,.28,1) both;
}

.indicator-finish-shock {
    position: absolute;
    width: 22vmin;
    aspect-ratio: 1;
    border: 4px solid #fff3c0;
    border-radius: 50%;
    opacity: 0;
    animation: indicator-finish-shock .9s cubic-bezier(.1,.72,.24,1) .46s both;
}

/* Ikinci halka ve yere yayilan toz dalgasi. */
.indicator-finish-shock::before,
.indicator-finish-shock::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 3px solid #ffd75199;
    border-radius: 50%;
    opacity: 0;
    animation: indicator-finish-shock 1.05s cubic-bezier(.1,.72,.24,1) .58s both;
}

.indicator-finish-shock::after {
    inset: -4px -22%;
    border-color: #ffe9a866;
    border-radius: 50%;
    animation-delay: .52s;
    animation-duration: 1.25s;
}

.indicator-finish-cracks {
    position: absolute;
    left: 58%;
    top: 50%;
    width: 0;
    height: 0;
    z-index: 0;
}

.indicator-finish-cracks i {
    position: absolute;
    left: -2px;
    top: 0;
    width: 4px;
    height: 0;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(#fff3c0 0 18%, #ffb42ecc 55%, #ffb42e00 100%);
    transform: rotate(var(--a));
    transform-origin: 50% 0;
    filter: drop-shadow(0 0 5px #ffc73b);
    animation: indicator-finish-crack .6s cubic-bezier(.08,.85,.2,1) .46s both;
}

.indicator-finish-debris {
    position: absolute;
    left: 58%;
    top: 48%;
    width: 0;
    height: 0;
    z-index: 3;
}

.indicator-finish-debris i {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    opacity: 0;
    background: linear-gradient(140deg, #fffdf4, #cdc6b2);
    box-shadow: 0 1px 3px #00000073;
    animation: indicator-finish-debris .9s cubic-bezier(.12,.74,.26,1) .46s both;
}

.indicator-finish-debris i:nth-child(3n) { width: 6px; height: 6px; background: linear-gradient(140deg, #ffe9a8, #c79500); }
.indicator-finish-debris i:nth-child(4n + 1) { width: 13px; height: 7px; }

.indicator-finish-confetti { position: absolute; inset: 0; pointer-events: none; }

.indicator-finish-confetti i {
    position: absolute;
    top: -12%;
    width: 9px;
    height: 16px;
    border-radius: 2px;
    background: hsl(calc(var(--i) * 43 + 34) 92% 63%);
    box-shadow: 0 0 7px #0004;
    animation: indicator-finish-confetti 2.35s linear both;
    animation-delay: calc(.18s + var(--i) * .035s);
}

.indicator-finish-confetti i:nth-child(even) { animation-name: indicator-finish-confetti-left; }
.indicator-finish-confetti i:nth-child(3n) { width: 7px; height: 13px; animation-duration: 2.05s; }
.indicator-finish-confetti i:nth-child(4n + 1) { width: 11px; height: 19px; animation-duration: 2.7s; }

.indicator-finish-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(150px, 34vmin, 250px);
    height: clamp(150px, 26vmin, 210px);
}

.indicator-finish-tile {
    position: absolute;
    display: grid;
    grid-template-rows: 1fr 20px;
    place-items: center;
    box-sizing: border-box;
    width: clamp(74px, 11vmin, 104px);
    height: clamp(104px, 15.5vmin, 146px);
    padding: 9px 8px 6px;
    border: 2px solid #fffdf1;
    border-radius: 9px;
    color: #121716;
    background: linear-gradient(155deg, #ffffff 0 34%, #eeeade 35% 58%, #fffef8 59% 100%);
    box-shadow: inset 3px 3px 4px #ffffff, inset -4px -5px 6px #b8b4aa, 0 7px 0 #aaa69b, 0 14px 22px #00121ccc;
}

.indicator-finish-tile strong {
    font-family: "UltraTileNumbers", Arial, sans-serif;
    font-size: clamp(46px, 7vmin, 68px);
    font-weight: 950;
    line-height: .95;
    text-shadow: 0 2px 0 #ffffff, 0 4px 3px #0003;
}

.indicator-finish-tile small {
    align-self: end;
    color: #8d6300;
    font: 950 10px/1 Arial, sans-serif;
    letter-spacing: .12em;
}

.indicator-finish-tile.red strong { color: #d3231d; }
.indicator-finish-tile.blue strong { color: #0873d1; }
.indicator-finish-tile.yellow strong { color: #c79500; }
.indicator-finish-tile.black strong { color: #151a19; }

/* Gosterge, tas gelmeden once yerine oturur; carpma ani onun uzerinde olur. */
.indicator-finish-tile.base {
    animation: indicator-finish-base .5s cubic-bezier(.2,.74,.18,1) both;
}

.indicator-finish-tile.thrown {
    z-index: 2;
    box-shadow: inset 3px 3px 4px #ffffff, inset -4px -5px 6px #b8b4aa, 0 7px 0 #aaa69b, 0 16px 26px #00121ce6, 0 0 30px #ffdc51cc;
    animation: indicator-finish-throw 1.15s cubic-bezier(.32,.02,.28,1) both;
}

.indicator-finish-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(10px, 3vw, 22px);
    max-width: 92vw;
    padding: 10px clamp(14px, 4vw, 30px);
    border: 2px solid #ffe27f;
    border-radius: 18px;
    background: linear-gradient(180deg, #12507099, #062333e8);
    box-shadow: 0 12px 32px #000a, inset 0 1px #ffffff33;
    text-align: center;
    animation: indicator-finish-banner .62s cubic-bezier(.16,.9,.28,1) .7s both;
}

.indicator-finish-banner small {
    display: block;
    color: #ffe9a8;
    font-size: clamp(.6rem, 2.1vw, .82rem);
    font-weight: 900;
    letter-spacing: .2em;
}

.indicator-finish-banner strong {
    display: block;
    margin-top: 2px;
    color: #fffbe9;
    font-size: clamp(1.15rem, 5.4vw, 2.1rem);
    font-weight: 950;
    letter-spacing: .04em;
    text-shadow: 0 2px 0 #7a5400, 0 5px 16px #ffb70066;
}

.indicator-finish-cup,
.indicator-finish-crown {
    font-size: clamp(1.5rem, 6vw, 2.6rem);
    filter: drop-shadow(0 3px 6px #0009);
    animation: indicator-finish-icon .9s ease-in-out .95s infinite alternate;
}

.indicator-finish-crown { animation-delay: 1.15s; }

@keyframes indicator-finish-dim {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes indicator-finish-rays {
    0% { opacity: 0; transform: rotate(-24deg) scale(.3); }
    18% { opacity: .9; }
    70% { opacity: .5; }
    100% { opacity: 0; transform: rotate(52deg) scale(1.25); }
}

@keyframes indicator-finish-shock {
    0% { opacity: .95; transform: scale(.15); }
    100% { opacity: 0; transform: scale(5.4); }
}

@keyframes indicator-finish-flash {
    0% { opacity: 0; }
    8% { opacity: 1; }
    38% { opacity: .55; }
    100% { opacity: 0; }
}

/* Carpma vurgusu: kaymadan, donmeden, tek bir kisa yakinlasma. */
@keyframes indicator-finish-punch {
    0% { transform: scale(1); }
    26% { transform: scale(1.016); }
    64% { transform: scale(.9975); }
    100% { transform: scale(1); }
}

@keyframes indicator-finish-crack {
    0% { height: 0; opacity: 1; }
    40% { height: var(--len); opacity: .95; }
    100% { height: calc(var(--len) * 1.25); opacity: 0; }
}

@keyframes indicator-finish-debris {
    0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.3); }
    10% { opacity: 1; }
    70% { opacity: .9; }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(160deg) scale(calc(var(--s) / 100)); }
}

@keyframes indicator-finish-confetti {
    0% { opacity: 0; transform: translate3d(0,0,0) rotate(0); }
    8% { opacity: 1; }
    100% { opacity: .9; transform: translate3d(70px, 118vh, 0) rotate(760deg); }
}

@keyframes indicator-finish-confetti-left {
    0% { opacity: 0; transform: translate3d(0,0,0) rotate(0); }
    8% { opacity: 1; }
    100% { opacity: .9; transform: translate3d(-70px, 118vh, 0) rotate(-760deg); }
}

@keyframes indicator-finish-base {
    0% { opacity: 0; transform: translate3d(0,0,0) rotate(0) scale(.4); }
    100% { opacity: 1; transform: translate3d(-26%, 12%, 0) rotate(-9deg) scale(1); }
}

/* Tas once ekrana dogru buyuyerek gelir, bir an asili kalir, sonra bir anda
   masanin ortasina cakilir; ezilir, bir kez seker ve oturur. */
@keyframes indicator-finish-throw {
    0% { opacity: 0; transform: translate3d(10%, 6%, 0) rotateZ(-16deg) scale(.16); }
    10% { opacity: 1; transform: translate3d(14%, 2%, 0) rotateZ(-8deg) scale(1.15); }
    24% { transform: translate3d(16%, -2%, 0) rotateZ(4deg) scale(3.1); }
    33% { transform: translate3d(16%, -3%, 0) rotateZ(2deg) scale(3.6); }
    40% { transform: translate3d(22%, -4%, 0) rotateZ(7deg) scale(1.02); }
    44% { transform: translate3d(22%, -2%, 0) rotateZ(6deg) scale(1.26, .7); }
    53% { transform: translate3d(22%, -28%, 0) rotateZ(13deg) scale(.9, 1.14); }
    65% { transform: translate3d(22%, -3%, 0) rotateZ(7deg) scale(1.1, .92); }
    78% { transform: translate3d(22%, -15%, 0) rotateZ(9deg) scale(.99, 1.03); }
    90% { transform: translate3d(22%, -6%, 0) rotateZ(8deg) scale(1.02, .99); }
    100% { opacity: 1; transform: translate3d(22%, -8%, 0) rotateZ(8deg) scale(1); }
}

@keyframes indicator-finish-banner {
    0% { opacity: 0; transform: translateY(26px) scale(.82); }
    62% { opacity: 1; transform: translateY(0) scale(1.06); }
    100% { opacity: 1; transform: none; }
}

@keyframes indicator-finish-icon {
    from { transform: translateY(0) rotate(-6deg) scale(1); }
    to { transform: translateY(-6px) rotate(6deg) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .indicator-block.finish-drop-target,
    .indicator-finish-celebration,
    .indicator-finish-confetti i,
    .indicator-finish-cracks i,
    .indicator-finish-debris i,
    .indicator-finish-cup,
    .indicator-finish-crown {
        animation: none;
    }

    .indicator-finish-rays,
    .indicator-finish-shock,
    .indicator-finish-shock::before,
    .indicator-finish-shock::after,
    .indicator-finish-flash,
    .indicator-finish-tile.base,
    .indicator-finish-tile.thrown,
    .indicator-finish-banner {
        animation-duration: .3s;
        animation-delay: 0s;
    }
}

/* Bildirim izni kapalıyken lobide gösterilen uyarı. Sunucu bildirimi gönderip
   FCM kabul etse bile izin kapalıysa kullanıcı hiçbir şey görmüyor; sorunun
   nerede olduğunu tek dokunuşla çözebilsin diye ayar ekranına götürüyoruz. */
.notification-blocked-reminder { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: 8px 0 2px; padding: 9px 11px; border: 1px solid #ff8f6f88; border-radius: 14px; color: #fff4ef; text-align: left; background: linear-gradient(105deg, #5f2a1c, #3a1710); box-shadow: 0 8px 20px #1e060055; }
.notification-blocked-reminder > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(145deg, #ffb08a, #ee6c2c); font-size: 1.1rem; }
.notification-blocked-reminder > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.notification-blocked-reminder strong { font-size: .75rem; }
.notification-blocked-reminder small { color: #e8c0b1; font-size: .58rem; }
.notification-blocked-reminder b { padding: 7px 10px; border-radius: 9px; color: #3a1710; background: #ffb98a; font-size: .66rem; }


/* Eslesme secenegi "farketmez" satiri. */
.any-option-row {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: -4px 0 2px;
    color: #a7cbd6;
    font-size: .58rem;
}
.any-option-row input { width: 16px; height: 16px; accent-color: #f0b528; }

/*
 * "Acik masalar": oynanan masalari izleme ve bos bilgisayar koltuguna oturma.
 */
.open-tables-entry {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin: 0 0 11px;
    padding: 13px 14px;
    border: 1px solid #7fc4d58a;
    border-radius: 16px;
    color: #eefaff;
    text-align: left;
    background: linear-gradient(135deg, #10506b, #072536 62%, #061d2c);
    box-shadow: 0 8px 22px #00000066, inset 0 1px #ffffff22;
}
.open-tables-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #0a3346;
    font-size: 1.1rem;
}
.open-tables-copy { display: grid; gap: 2px; flex: 1; }
.open-tables-copy strong { color: #ffe89a; font-size: .8rem; }
.open-tables-copy em { color: #a7cbd6; font-size: .55rem; font-style: normal; line-height: 1.35; }
.open-tables-count {
    padding: 4px 9px;
    border-radius: 999px;
    color: #06202f;
    background: linear-gradient(180deg, #ffe783, #f0b528);
    font-size: .6rem;
    font-style: normal;
    font-weight: 900;
}
.open-tables-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20030;
    display: grid;
    place-items: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: #00101ad9;
    backdrop-filter: blur(5px);
}
.open-tables-card {
    display: grid;
    gap: 9px;
    width: min(380px, 100%);
    max-height: min(88vh, 520px);
    padding: 14px;
    border: 1px solid #7fc4d58a;
    border-radius: 17px;
    color: #eefaff;
    background: linear-gradient(160deg, #0f4460f7, #06202ffa);
    box-shadow: 0 18px 45px #000c;
}
.open-tables-card > header { display: flex; align-items: center; gap: 9px; }
.open-tables-card > header > div { display: grid; flex: 1; }
.open-tables-card > header small { color: #8fb9c6; font-size: .5rem; letter-spacing: .08em; }
.open-tables-card > header strong { color: #ffe89a; font-size: .86rem; }
.open-tables-empty { margin: 14px 0; color: #9bb8c3; font-size: .62rem; text-align: center; }
.open-tables-list { display: grid; gap: 9px; overflow-y: auto; padding-right: 2px; }
.open-table-row {
    display: grid;
    gap: 6px;
    padding: 10px 11px;
    border: 1px solid #ffffff1f;
    border-radius: 13px;
    background: #ffffff0e;
}
.open-table-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.open-table-head strong { color: #fff2b2; font-size: .72rem; }
.open-table-stake { color: #9fd7b4; font-size: .58rem; font-weight: 800; }
.open-table-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.open-table-tags i {
    padding: 3px 7px;
    border-radius: 999px;
    color: #cfe7ef;
    background: #ffffff14;
    font-size: .5rem;
    font-style: normal;
}
.open-table-watchers { color: #ffd98f !important; background: #ffd98f24 !important; }
.open-table-seats { display: flex; flex-wrap: wrap; gap: 5px; }
.open-table-seat {
    padding: 3px 8px;
    border: 1px solid #ffffff1c;
    border-radius: 999px;
    color: #dff1f7;
    background: #0b2c3f;
    font-size: .52rem;
}
.open-table-seat.robot { color: #b8c9d1; border-style: dashed; }
.open-table-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 2px; }
.open-table-actions button { min-height: 36px; border-radius: 10px; font-size: .62rem; font-weight: 800; }
.open-table-watch { border: 1px solid #8fc7da; color: #e8f8ff; background: #10455f; }
.open-table-sit {
    border: 1px solid #ffe79a;
    color: #2a2103;
    background: linear-gradient(180deg, #ffe783, #f0b528);
}
.open-table-sit:disabled { opacity: .45; }
.open-table-note { color: #9bb8c3; font-size: .5rem; }
.open-tables-refresh {
    min-height: 36px;
    border: 1px solid #ffffff2e;
    border-radius: 11px;
    color: #cfe7ef;
    background: #ffffff10;
    font-size: .62rem;
}

/*
 * Izleyici kipi: istaka ve hamle duğmeleri gizlenir. Sunucu zaten izleyiciden
 * gelen hamleyi kabul etmez; buradaki gizleme arayuzun karismamasi icindir.
 */
/*
 * Izleyicide: istaka, istaka araclari ve koltuk gerektiren dugmeler gizlenir.
 * Sohbet, ikram ve "oyundan cik" masada oturmayi gerektirir; sunucu zaten
 * reddeder, burada da gorunmesinler. Radyo, skor ve hamle kaydi salt okunur
 * oldugu icin acik kalir; ayarlar, kilavuz, sesli yazma ve istaka buyutec
 * kapalidir.
 *
 * Buyutec: yancinin istakasi yok, buyutecek bir sey de yok.
 * Sesli yazma: masaya mesaj gonderir, sunucu yancidan kabul etmez.
 * Kilavuz (i): yancida ayni yuvada duran yanci rozetinin ustune biniyordu;
 * gizlenince rozet gorunur hale gelir.
 */
.game-shell.spectating .rack-area,
.game-shell.spectating .rack-edge-tools,
.game-shell.spectating .table-chat-fab,
.game-shell.spectating .game-treat-fab,
.game-shell.spectating .game-voice-fab,
.game-shell.spectating .game-settings-fab,
.game-shell.spectating .istaka-buyutec-fab,
.game-shell.spectating .voice-write-fab,
.game-shell.spectating .game-guide-fab,
.game-shell.spectating .leave-game-fab { display: none !important; }
/* Izleyici masaya dokunamasin: tas secme, suruklemenin hepsi kapali. */
.game-shell.spectating .table-tile,
.game-shell.spectating .meld-area,
.game-shell.spectating .stock-pile,
.game-shell.spectating .discard-corner-slot { pointer-events: none !important; }
/* Masadakilerin gordugu yanci rozeti ve listesi. */
.spectator-count-badge {
    /* Sol dugme sutununda, kilavuz (i) dugmesinin hemen ustunde durur.
       Onceden sol oyuncunun kartinin uzerine biniyordu. */
    position: fixed;
    left: 1px;
    bottom: max(130px, calc(env(safe-area-inset-bottom) + 130px));
    z-index: 88;
    display: grid;
    place-items: center;
    gap: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid #ffd86e;
    border-radius: 50%;
    color: #ffe89a;
    background: linear-gradient(180deg, #397f9a, #153f57);
    box-shadow: 0 4px 12px #001625b8, inset 0 1px #e8fbff99;
    font-size: .62rem;
    font-weight: 900;
    line-height: 1;
}
.hidden-table-badge {
    position: fixed;
    left: 1px;
    bottom: max(170px, calc(env(safe-area-inset-bottom) + 170px));
    z-index: 88;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2px solid #ffd86e;
    border-radius: 50%;
    color: #ffe89a;
    background: linear-gradient(180deg, #5b4a1f, #2c2410);
    box-shadow: 0 4px 12px #001625b8, inset 0 1px #ffeec099;
    /* Emoji buton icinde tabana oturup kayiyordu; kutuyu tam ortala. */
    padding: 0;
    font-size: .8rem;
    line-height: 1;
    text-align: center;
    text-indent: 0;
}
/* Masa acikken rozet sonuk durur; kilitliyken vurgulanir. */
.hidden-table-badge.open {
    border-color: #ffffff2e;
    color: #8fb9c6;
    background: #0a2c3dbf;
    opacity: .6;
}
.hidden-table-badge:active { transform: translateX(-15px) scale(.94); }
.hidden-table-badge:disabled { opacity: .45; }
.spectator-count-badge > span { font-size: .62rem; }
.spectator-count-badge b { margin-top: -2px; color: #fff; font-size: .5rem; }
.spectator-count-badge b { color: #fff; font-size: .62rem; }
/* Yanci yokken rozet sonuk durur ve tiklanmaz. */
.spectator-count-badge.idle {
    border-color: #ffffff24;
    color: #8fb9c6;
    background: #0a2c3dbf;
    opacity: .6;
}
.spectator-count-badge.idle b { color: #8fb9c6; }
.spectator-list-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20035;
    display: grid;
    place-items: center;
    padding: 14px;
    background: #00101ad9;
    backdrop-filter: blur(5px);
}
.spectator-list-card {
    display: grid;
    gap: 8px;
    width: min(300px, 100%);
    max-height: min(80vh, 380px);
    padding: 13px;
    border: 1px solid #7fc4d58a;
    border-radius: 16px;
    color: #eefaff;
    background: linear-gradient(160deg, #0f4460f7, #06202ffa);
    box-shadow: 0 18px 45px #000c;
}
.spectator-list-card > header { display: flex; align-items: center; gap: 9px; }
.spectator-list-card > header strong { flex: 1; color: #ffe89a; font-size: .8rem; }
.spectator-list-card > p { margin: 0; color: #9bb8c3; font-size: .52rem; line-height: 1.4; }
.spectator-list-card ul { display: grid; gap: 6px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.spectator-list-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 10px;
    background: #ffffff10;
    font-size: .62rem;
}
.spectator-avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    overflow: hidden;
    border-radius: 50%;
    background: #12374b;
    font-size: .6rem;
    font-weight: 900;
}
.spectator-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Hesabi kapatilan oyuncuya giris ekraninda gosterilen uyari. */
.auth-banned-notice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    margin: 0 0 10px;
    padding: 11px 34px 11px 12px;
    border: 1px solid #ff9f8c7a;
    border-radius: 13px;
    color: #ffd8cf;
    background: linear-gradient(180deg, #5d2220, #2c0f0f);
    text-align: left;
}
.auth-banned-notice > span { font-size: 1rem; }
.auth-banned-notice > p { margin: 0; font-size: .6rem; line-height: 1.45; }
.auth-banned-notice > .modal-close { position: absolute !important; top: 7px; right: 7px; }

/* Profildeki turnuva dereceleri. */
.profile-trophies {
    display: grid;
    gap: 7px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 11px;
    border: 1px solid #ffd86e5c;
    border-radius: 13px;
    background: #ffd86e12;
}
.profile-trophies > strong { color: #ffe89a; font-size: .72rem; }
.profile-trophy-summary { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-trophy-count {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid #ffffff1f;
    border-radius: 999px;
    background: #ffffff10;
}
.profile-trophy-count b { font-size: .85rem; }
.profile-trophy-count i { color: #ffe89a; font-size: .68rem; font-style: normal; font-weight: 900; }
.profile-trophy-list { display: grid; gap: 5px; }
.profile-activity.trophy { display: flex; align-items: center; gap: 8px; font-size: .62rem; }
.profile-activity.trophy b { color: #fff2b2; }
.profile-activity.trophy small { margin-left: auto; color: #9bb8c3; font-size: .52rem; }

/* Dizilisi geri alma dugmesi: diz dugmelerinin hemen altinda. */
.rack-arrange-undo { color: #cfe7ef; }
.rack-arrange-undo:disabled { opacity: .4; }

/* Okey kurallarini denemek icin hazir masa (cevrimdisi antrenman penceresi). */
.okey-test-start {
    width: 100%;
    min-height: 42px;
    margin-top: 8px;
    border: 1px dashed #8fc7da;
    border-radius: 12px;
    color: #cfe7ef;
    background: #ffffff10;
    font-size: .68rem;
    font-weight: 800;
}
.okey-test-hint { display: block; margin-top: 5px; color: #9bb8c3; font-size: .52rem; line-height: 1.45; }

/* El bittiginde puan penceresinden once gosterilen geri sayim. */
.hand-end-countdown {
    position: fixed;
    left: 50%;
    top: max(54px, calc(env(safe-area-inset-top) + 42px));
    z-index: 170;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
    padding: 9px 16px;
    border: 2px solid #ffe36c;
    border-radius: 999px;
    color: #fffbe0;
    background: linear-gradient(135deg, #0a5067f2, #157648f5 60%, #8e6900f2);
    box-shadow: 0 10px 34px #001824cc, 0 0 24px #ffe36c5c;
    pointer-events: none;
}
.hand-end-countdown strong { font-size: .78rem; letter-spacing: .06em; }
.hand-end-countdown span { color: #ffeaa7d9; font-size: .6rem; }
.hand-end-countdown b {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #2a2103;
    background: linear-gradient(180deg, #ffe783, #f0b528);
    font-size: .72rem;
    line-height: 1;
}

/* Dogrulanmis 101 Ultra destek hesabi rozeti ve aciklamasi. */
.verified-badge {
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    border-radius: 50%;
    color: #06202f;
    background: linear-gradient(180deg, #7fe0ff, #2f9fd0);
    box-shadow: 0 0 0 1px #ffffff33;
    font-size: .5rem;
    font-weight: 900;
    vertical-align: middle;
}
.verified-account-line { color: #7fe0ff !important; }
.verified-support-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 8px;
    padding: 9px 11px;
    border: 1px solid #7fe0ff5c;
    border-radius: 11px;
    background: #7fe0ff14;
}
.verified-support-notice > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    color: #06202f;
    background: linear-gradient(180deg, #7fe0ff, #2f9fd0);
    font-size: .54rem;
    font-weight: 900;
}
.verified-support-notice > p { margin: 0; color: #cfeffb; font-size: .55rem; line-height: 1.45; }

/* Profil fotografi da isim gibi profil penceresini acar. */
.profile-photo-trigger { cursor: pointer; }
/* Avatar ve ad artik <button>; varsayilan buton gorunumu sizmasin. */
button.profile-photo-trigger {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
}
button.friend-request-name { flex: 1; min-width: 0; }
button.friend-outgoing-details, button.candidate-identity {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 1px;
}
.profile-photo-trigger:active { transform: scale(.96); }

/* Yanci satiri ve yanci profili/ikram penceresi. */
.spectator-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
}
.spectator-row > span:nth-child(2) { flex: 1; }
.spectator-row > i { color: #8fb9c6; font-style: normal; font-size: .8rem; }
.spectator-profile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20045;
    display: grid;
    place-items: center;
    padding: 14px;
    background: #00101ae0;
    backdrop-filter: blur(6px);
}
.spectator-profile-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 7px;
    width: min(320px, 100%);
    max-height: min(88vh, 440px);
    overflow-y: auto;
    padding: 12px 14px 14px;
    border: 1px solid #8fc7da;
    border-radius: 16px;
    color: #eefaff;
    text-align: center;
    background: linear-gradient(155deg, #10445f, #061f34);
    box-shadow: 0 18px 45px #000c;
}
.spectator-profile-close { position: absolute !important; top: 7px; right: 7px; }
.spectator-profile-avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border: 2px solid #ffe08a;
    border-radius: 50%;
    background: #12374b;
    font-size: 1.1rem;
    font-weight: 900;
}
.spectator-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.spectator-profile-card > strong { color: #fff2b2; font-size: .84rem; }
.spectator-profile-card > small { color: #a8c7d2; font-size: .52rem; }
.spectator-treat-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    margin-top: 4px;
}
.spectator-treat-options button {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 8px 4px;
    border: 1px solid #ffffff1f;
    border-radius: 11px;
    color: #e6f6fd;
    background: #ffffff10;
    font-size: .5rem;
}
.spectator-treat-options button.selected { border-color: #ffe08a; background: #ffd86e26; }
.spectator-treat-options .treat-price { color: #9fd7b4; font-size: .45rem; font-style: normal; }
.spectator-treat-send {
    width: 100%;
    min-height: 38px;
    margin-top: 4px;
    border: 1px solid #ffe79a;
    border-radius: 11px;
    color: #2a2103;
    background: linear-gradient(180deg, #ffe783, #f0b528);
    font-size: .66rem;
    font-weight: 900;
}
.spectator-treat-send:disabled { opacity: .5; }
.spectator-treat-locked { color: #e0b9a8 !important; }

.spectator-room-note {
    display: grid;
    justify-items: center;
    gap: 5px;
    margin: 10px 0 4px;
    padding: 11px 13px;
    border: 1px solid #ffd86e6b;
    border-radius: 13px;
    color: #eefbff;
    text-align: center;
    background: #0d4a5666;
}
.spectator-room-note > span { color: #ffe89a; font-size: .7rem; font-weight: 800; }
.spectator-room-note > small { color: #a7cbd6; font-size: .55rem; }
.spectator-room-note .spectator-sit { min-height: 34px; padding: 7px 14px; border-radius: 10px; }
.spectator-bar {
    position: absolute;
    left: 50%;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Serit ortalanir ve genisligi sinirsizdi: "Koltuga otur" dugmesi
       eklenince iki yandan ekranin disina tasiyor, son dugme
       ("Izlemeyi birak") kesiliyordu. Artik ekrana sigar ve gerekirse
       alt satira sarar. */
    flex-wrap: wrap;
    max-width: min(96vw, 680px);
    gap: 7px 9px;
    transform: translateX(-50%);
    padding: 7px 11px;
    border: 1px solid #ffd86e9e;
    border-radius: 999px;
    color: #eefbff;
    background: linear-gradient(180deg, #0d4a56f2, #05202ffa);
    box-shadow: 0 10px 26px #000a;
}
/* Yanciya gelen ikram: serit icinde, kartlarin uzerine binmeden durur. */
.spectator-treat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 5px;
    border: 1px solid #ffd86e8a;
    border-radius: 999px;
    color: #ffe89a;
    background: #ffd86e24;
    font-size: .5rem;
}
.spectator-treat .treat-visual { width: 20px; height: 20px; }
.spectator-treat small { color: #ffeec0; font-size: .5rem; font-weight: 800; }

.spectator-badge { color: #ffe89a; font-size: .58rem; font-weight: 900; letter-spacing: .04em; }
.spectator-bar small { color: #a7cbd6; font-size: .5rem; }
/* Dar ekranda aciklama metni dugmelere yer acmak icin gizlenir; rozet
   ("YANCISIN") zaten durumu anlatiyor. */
@media (max-width: 760px) { .spectator-bar > small { display: none; } }
.spectator-bar button { min-height: 30px; padding: 6px 12px; border-radius: 999px; font-size: .58rem; font-weight: 800; }
.spectator-sit { border: 1px solid #ffe79a; color: #2a2103; background: linear-gradient(180deg, #ffe783, #f0b528); }
.spectator-leave { border: 1px solid #ff9f8c7a; color: #ffd8cf; background: #5d2220; }

/*
 * Dusuk seviyeli cihazlarda performans modu (html.low-perf html.low-perf).
 * rack.js cihazin cekirdek/bellek bilgisine ve olculen kare hizina bakip bu
 * sinifi ekler. Amac: her karede yeniden boyama gerektiren surekli
 * animasyonlari (box-shadow/filter donguleri) ve pencere arkasi bulaniklastirmayi
 * kapatmak. Taslarin yeri,
html.low-perf rengi ve vurgulari ayni kalir; sadece nabiz atmazlar.
 */
html.low-perf .ad-reward-button,
html.low-perf .game-shell .opponent.active-player,
html.low-perf .game-shell .table-center .table-center-totals.per-total-badge.ready-to-open,
html.low-perf .indicator-block.finish-drop-target,
html.low-perf .player-discard-pile.opens-hand,
html.low-perf .rack-right-tools .rack-open-action.ready-to-open,
html.low-perf .rack-tile.playable-both-hint:not(.selected),
html.low-perf .rack-tile.playable-opened-hint:not(.selected),
html.low-perf .rack-tile.playable-pair-hint:not(.selected),
html.low-perf .rack-tile.playable-series-hint.playable-opened-hint:not(.selected),
html.low-perf .rack-tile.playable-series-hint.playable-unopened-hint:not(.selected),
html.low-perf .rack-tile.playable-series-hint:not(.selected),
html.low-perf .rack-tile.playable-unopened-hint:not(.selected),
html.low-perf .return-taken-at-source,
html.low-perf .stock-pile.draw-required {
    animation: none !important;
}
html.low-perf .app-update-backdrop,
html.low-perf .auth-error-backdrop,
html.low-perf .create-table-backdrop,
html.low-perf .daily-reward-backdrop,
html.low-perf .direct-delete-backdrop,
html.low-perf .exit-confirm-backdrop,
html.low-perf .feedback-backdrop,
html.low-perf .first-game-reward-backdrop,
html.low-perf .forfeit-result-backdrop,
html.low-perf .friend-profile-backdrop,
html.low-perf .friend-profile-image-backdrop,
html.low-perf .game-direct-message-backdrop,
html.low-perf .game-guide-backdrop,
html.low-perf .game-info-backdrop,
html.low-perf .game-player-profile-backdrop,
html.low-perf .game-settings-backdrop,
html.low-perf .game-tools-menu,
html.low-perf .hand-action-log-backdrop,
html.low-perf .hand-result-modal-backdrop,
html.low-perf .how-to-backdrop,
html.low-perf .kick-vote-backdrop,
html.low-perf .leave-confirm-backdrop,
html.low-perf .level-up-backdrop,
html.low-perf .lobby-card,
html.low-perf .nearby-invite-backdrop,
html.low-perf .nearby-search-backdrop,
html.low-perf .nearby-tables-backdrop,
html.low-perf .network-wait-backdrop,
html.low-perf .profile-crop-backdrop,
html.low-perf .profile-editor-backdrop,
html.low-perf .profile-preview-backdrop,
html.low-perf .radiowin-player-backdrop,
html.low-perf .ranked-lobby-art,
html.low-perf .score-history-backdrop,
html.low-perf .story-delete-confirm-backdrop,
html.low-perf .story-modal-backdrop,
html.low-perf .table-chat-panel,
html.low-perf .tournament-reward-backdrop,
html.low-perf .treat-action-backdrop,
html.low-perf .treat-confirm-backdrop {
    backdrop-filter: none !important;
}
/* Bulaniklik kalkinca arka plan yeterince koyu kalsin. */
html.low-perf .lobby-card { background-color: #0b2a3ff2; }
/* Surukleme sirasinda istaka satirlari disina tasan is yuku olmasin. */
html.low-perf .rack-row { contain: layout paint; }

/*
 * Yanci rozetinin konumu dosyanin en sonunda: kendi temel kurali yatay ekran
 * media query'sinden sonra geldigi icin oncekiler eziliyordu. Bilgi (i)
 * dugmesiyle ayni sol hizada ve onun tam ustunde durur.
 */
@media (orientation: landscape) {
    /* Sol sutun asagidan yukari: kilavuz (i) 128, yanci 168, gizli masa 208.
       Yanci rozeti 128'deydi ve kilavuz dugmesiyle TAM UST USTE biniyordu;
       masayi izleyen olsa bile rozet (i) dugmesinin altinda kaliyor,
       oyuncu yancilari hic goremiyordu. */
    .spectator-count-badge {
        left: max(8px, var(--safe-side));
        right: auto;
        bottom: max(168px, calc(env(safe-area-inset-bottom) + 168px));
        transform: translateX(-15px);
    }
    .hidden-table-badge {
        left: max(8px, var(--safe-side));
        right: auto;
        bottom: max(208px, calc(env(safe-area-inset-bottom) + 208px));
        transform: translateX(-15px);
    }
}

/* Gecmis oyun izleme: masanin ustunde butun dokunuslari yutan panel. */
.replay-shield { position: fixed; inset: 0; z-index: 90; pointer-events: auto; background: transparent; }
.replay-panel { display: flex; flex-direction: column; gap: .25rem; padding: .3rem .5rem .4rem; background: linear-gradient(180deg, #04120ef5 0%, #04120edd 70%, #04120e00 100%); }
.replay-topbar { display: flex; align-items: center; gap: .6rem; padding-right: 44px; }
.replay-title { display: flex; flex-direction: column; line-height: 1.1; color: #eafaf3; white-space: nowrap; }
.replay-title b { font-size: .78rem; }
.replay-title small { font-size: .64rem; opacity: .6; font-variant-numeric: tabular-nums; }
.replay-note { flex: 1; min-width: 0; padding: .22rem .6rem; border-radius: 999px; background: #ffffff14; color: #dff7ec; font-size: .74rem; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replay-close { position: absolute; top: .3rem; right: .5rem; z-index: 2; flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #d8433a; color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px #0007; }
.replay-controls { display: flex; align-items: center; gap: .3rem; }
.replay-controls button { flex: none; min-width: 38px; height: 30px; border: 1px solid #ffffff2a; border-radius: 8px; background: #ffffff12; color: #eafaf3; font-size: .82rem; cursor: pointer; }
.replay-controls button:active { background: #ffffff26; }
.replay-controls .replay-play { min-width: 46px; background: #2fbf71; border-color: #2fbf71; color: #04231a; font-weight: 700; }
.replay-controls .replay-speed { min-width: 42px; font-size: .74rem; font-weight: 700; }
.replay-controls input[type="range"] { flex: 1; min-width: 60px; accent-color: #4fd1a5; }
.replay-score { font-size: .72rem; }
.replay-score.good { color: #4fd1a5; }
.replay-score.bad { color: #ffb4a8; }

/* Tekrar izlerken rakiplerin istakasi acik gorunur. */
.opponent-rack { display: grid; grid-template-columns: repeat(11, 22px); gap: 2px; margin-top: .2rem; justify-content: center; }
.opponent-rack .table-tile { width: 22px; height: 30px; min-width: 22px; font-size: .74rem; border-radius: 4px; box-shadow: inset 0 0 0 1px #e7dcc2; }

/* Tekrar izleme duzeni: menuler gizlenir, rakip istakalari acik durur.
 *
 * Tekrar izlerken ekranin ustunde seffaf bir kalkan (.replay-shield) durur;
 * masadaki dugmelerin hicbiri tiklanamaz. Gorunup islemeyen dugme birakmak
 * yanlis: gizlenirler.
 *   .voice-write-fab   -> eski eli izlerken mesaj gonderilecek masa yok.
 *   .istaka-buyutec-fab -> olu dugmeydi ve kirmizi kapatma (x) dugmesiyle
 *                          sag ustte ust uste biniyordu.
 *   .spectator-count-badge -> buradaki gizleme eskiden .table-spectators-badge
 *                          yaziyordu; boyle bir sinif projede hic yok, bu
 *                          yuzden sonuk bir "goz 0" rozeti ekranda kaliyordu.
 */
.game-shell.replay-mode .game-settings-fab,
.game-shell.replay-mode .game-score-fab,
.game-shell.replay-mode .game-log-fab,
.game-shell.replay-mode .game-treat-fab,
.game-shell.replay-mode .game-radio-fab,
.game-shell.replay-mode .game-guide-fab,
.game-shell.replay-mode .game-sound-fab,
.game-shell.replay-mode .game-invite-fab,
.game-shell.replay-mode .table-chat-fab,
.game-shell.replay-mode .leave-game-fab,
.game-shell.replay-mode .hidden-table-badge,
.game-shell.replay-mode .rack-edge-tools,
.game-shell.replay-mode .voice-write-fab,
.game-shell.replay-mode .istaka-buyutec-fab,
.game-shell.replay-mode .spectator-count-badge { display: none !important; }

/* Ustteki oyuncu en tepede dursun; serit zaten kendiliginden gizleniyor. */
.game-shell.replay-mode .opponent:nth-child(1) { min-width: 210px; max-width: 292px; align-self: start; }
.game-shell.replay-mode .opponent:nth-child(2),
.game-shell.replay-mode .opponent:nth-child(3) { width: 78px; min-width: 78px; max-width: 78px; min-height: 0; overflow: visible; }

/* Kontroller birkac saniye sonra silinir; ekrana dokununca geri gelir. */
.replay-panel { transition: opacity .25s ease, transform .25s ease; }
.replay-panel.hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.replay-close { position: absolute; top: .3rem; right: .5rem; z-index: 2; }
/* Yan koltuklarda butun div'ler gizli; tekrar izlerken istaka gorunmeli. */
/* Yan koltuklarda butun div'ler gizli; izlerken istaka gorunmeli ve taslar
   gercek istakadaki gibi yan durmali. */
.game-shell.replay-mode .opponent:nth-child(2) .opponent-rack,
.game-shell.replay-mode .opponent:nth-child(3) .opponent-rack {
    display: grid;
    grid-template-columns: repeat(2, 32px);
    grid-auto-rows: 23px;
    gap: 2px;
}
.game-shell.replay-mode .opponent:nth-child(2) .opponent-rack .table-tile,
.game-shell.replay-mode .opponent:nth-child(3) .opponent-rack .table-tile {
    transform: rotate(90deg);
    place-self: center;
}
/* Gruplar arasindaki bos yuva: gercek istakadaki bosluk. */
.opponent-rack-gap { display: block; width: 100%; height: 100%; }
/* Masadaki perler cerceve ve oyuncu adi olmadan, yalniz taslar halinde durur.
   Surukleme sirasindaki hedef vurgusu korunur. */
.meld-area .meld,
.meld-area .meld.own-meld {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
.meld-area .meld.selected-meld { border-color: #e0b455; background: #e0b4551c; }
/* Taslarin dis cercevesindeki uc boyutlu efekt kaldirildi: degrade zemin duz
   renge, ic pah ve dis golge kapali. Ortadaki renk damlasi (::before) ve
   secili/suruklenen tas vurgulari oldugu gibi kalir. */
.table-tile,
.rack-tile,
.meld .table-tile {
    background: #f6eedc;
    box-shadow: none;
}

/* Gostergeli cift lobisi karti. */
.indicator-pairs-lobby-entry { border-color: #9a7bd8aa; }
.indicator-pairs-lobby-art { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: grid; justify-items: center; gap: 2px; color: #e7dcff; text-shadow: 0 2px 6px #00000099; }
.indicator-pairs-lobby-art i { font-size: 1.7rem; font-style: normal; }
.indicator-pairs-lobby-art b { font-size: .58rem; letter-spacing: .12em; }

/* Butun taslar masadakilerle ayni goruntude: golge yok, duz zemin. Secili,
   suruklenen ve gruplanan taslarda yalniz renkli halka kalir; halka golge
   degil, dokunulan tasi ayirt etmek icin gerekli. */
.tile,
.hand-action-tile,
.tutorial-game-tile,
.tutorial-indicator b { background: #f6eedc; box-shadow: none; }
.rack-tile.selected { box-shadow: 0 0 0 3px #e7c163; }
.rack-tile.dragging { box-shadow: 0 0 0 3px #e7c163; }
.rack-tile.dragging.discard-ready { box-shadow: 0 0 0 4px #ffe36b; }
.rack-tile.dragging.layoff-ready { box-shadow: 0 0 0 4px #47d68d; }
.rack-tile.group-dragging { box-shadow: 0 0 0 3px #62dfa0; }
.rack-tile.editing-group-tile { box-shadow: 0 0 0 3px #62dfa0; }
.tutorial-game-tile.selected { box-shadow: 0 0 0 3px #6eff8a; }

/* Liste kendi icinde kaydirilir; sonuna gelince arkadaki ana ekran kaymaz. */
.open-tables-list,
.open-tables-card { overscroll-behavior: contain; }
/* Arka plana touch-action: none konmamali: ust ogedeki bu deger alttaki
   listenin parmakla kaydirilmasini da kapatiyor. */
.open-tables-list { touch-action: pan-y; }

/* Kart yuksekligi sinirli ama liste izgara icinde kuculemedigi icin disari
   tasiyor ve sayfa kayiyordu. min-height: 0 listeyi kart icinde kaydirir. */
.open-tables-card { overflow: hidden; }
.open-tables-list { min-height: 0; -webkit-overflow-scrolling: touch; }

/* Kart izgara oldugu icin liste satiri icerigi kadar buyuyor, kart da onu
   kirpiyordu: kaydirilacak tasma listede degil kartta olusuyordu. Kart esnek
   sutuna alinip listeye flex: 1 verilince tasma listenin kendisinde olusur ve
   parmakla kaydirilir. */
.open-tables-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.open-tables-card > .open-tables-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Lobideki kalici masa daveti karti: bildirim kacirilsa da burada durur. */
.lobby-invite-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem .7rem;
    margin-bottom: .6rem;
    padding: .7rem .8rem;
    border: 1px solid #ffe36b8c;
    border-radius: 14px;
    background: linear-gradient(150deg, #4a3c0ef2, #1d2a17f2);
    box-shadow: 0 8px 20px #0007;
}
.lobby-invite-icon { grid-row: 1 / span 2; align-self: center; font-size: 1.9rem; }
.lobby-invite-copy { display: grid; gap: .1rem; min-width: 0; }
.lobby-invite-copy small { color: #ffe36b; font-size: .5rem; letter-spacing: .12em; }
.lobby-invite-copy strong { color: #fff8dd; font-size: .86rem; }
.lobby-invite-copy em { color: #d8e6c9; font-size: .66rem; font-style: normal; }
.lobby-invite-seat { color: #ffd38a !important; }
.lobby-invite-actions { grid-column: 2; display: flex; gap: .5rem; margin-top: .45rem; }
.lobby-invite-actions .primary { padding: .4rem 1rem; font-size: .78rem; }
.lobby-invite-actions .text-button { font-size: .74rem; }

/* Tas duruyorsa arkasindaki yuva zemini gorunmesin: tasin cevresinde koyu bir
   hale birakip golge izlenimi veriyordu. Bos yuvalarda zemin kalir, oyuncu
   bosluklari gorebilsin. */
.rack-slot:has(.rack-tile) { background: transparent; }

/* app.css:5607'deki ".game-shell .rack-tile" kurali iki sinifli oldugu icin
   yukaridaki duzlestirmeyi geciyordu; ayni guclu secici ile kapatiyoruz.
   Vurgu halkalari (secili/suruklenen/ipucu) ayri kurallarda korunur. */
.game-shell .rack-tile,
.game-shell .table-tile,
.game-shell .meld .table-tile {
    background: #f6eedc;
    box-shadow: none;
}
.game-shell .rack-tile.selected { box-shadow: 0 0 0 3px #e7c163; }
.game-shell .rack-tile.dragging { box-shadow: 0 0 0 3px #e7c163; }
.game-shell .rack-tile.dragging.discard-ready { box-shadow: 0 0 0 4px #ffe36b; }
.game-shell .rack-tile.dragging.layoff-ready { box-shadow: 0 0 0 4px #47d68d; }
.game-shell .rack-tile.group-dragging { box-shadow: 0 0 0 3px #62dfa0; }
.game-shell .rack-tile.editing-group-tile { box-shadow: 0 0 0 3px #62dfa0; }

/* Suruklenen tas parmagin altinda kaybolmasin. Eskiden yari saydamdi, 8 piksel
   kalkiyor ve cok az buyuyordu; istakanin icine gomulu duruyor, oyuncu tasin
   nereye gidecegini gozle takip edemiyordu. Artik tam opak, belirgin sekilde
   havada ve altinda yumusak bir golge var: golge yalnizca surukleme sirasinda,
   tasin havada oldugunu anlatmak icin. */
.game-shell .rack-tile.dragging,
body.rack-drag-active .game-shell .rack-tile.dragging {
    opacity: 1;
    transform: translate3d(var(--drag-x, 0), var(--drag-y, -26px), 0) !important;
    box-shadow: 0 14px 22px #00000073, 0 0 0 3px #e7c163;
}
body.rack-drag-active .game-shell .rack-tile.dragging.discard-ready {
    box-shadow: 0 14px 22px #00000073, 0 0 0 4px #ffe36b, 0 0 18px #ffe36b;
}
body.rack-drag-active .game-shell .rack-tile.dragging.layoff-ready {
    box-shadow: 0 14px 22px #00000073, 0 0 0 4px #47d68d;
}
body.rack-drag-active .game-shell .rack-tile.group-dragging {
    box-shadow: 0 14px 22px #00000073, 0 0 0 3px #62dfa0;
}

/* Suruklenen tas satirlar arasindaki cizgide kesiliyordu. Uc ayri sebep vardi:
   1) Dusuk seviyeli cihaz kipinde satirlara verilen "contain: paint" cizimi
      satirin kutusuna hapsediyor. Surukleme sirasinda kaldirilir.
   2) Iki satir da z-index 1 oldugu icin alt satir ustte cizilir; ust satirdan
      asagi tasinan tas alt satirin arkasinda kaliyordu. Suruklenen tasin
      bulundugu satir one alinir.
   3) Istaka tahtasinin yatay kirpmasi, dikey tasmayi da kesiyordu. */
html body.rack-drag-active .rack-row { contain: none; }
body.rack-drag-active .game-shell .rack-row:has(.rack-tile.dragging) { z-index: 50; }
body.rack-drag-active .game-shell .rack-board,
body.rack-drag-active .game-shell .rack-area { overflow: visible; }

/* Devri teslim bekleyen tas: hedef dilimine dogru suzulurken ustte durmali ve
   satir sinirinda kirpilmamali. Surukleme bittigi icin "rack-drag-active"
   kurallari artik gecerli degil, bu yuzden ayni muafiyetler burada tekrarlanir. */
.game-shell .rack-tile.rack-handoff { z-index: 30; pointer-events: none; }
.game-shell .rack-row:has(.rack-tile.rack-handoff) { z-index: 50; contain: none; }
.game-shell .rack-board:has(.rack-tile.rack-handoff),
.game-shell .rack-area:has(.rack-tile.rack-handoff) { overflow: visible; }

/* Sira sende cercevesi ekranin tamamini kapliyor ve 30 piksellik ic bulaniklik
   tasiyordu. Akici modda yalnizca bu bulaniklik kaldirilir; animasyon calismaya
   devam eder. Animasyonu tamamen kapatmak sayfayi bosa dusuruyor, tarayici
   katmanlari birakiyor ve her yeni guncelleme soguk yuzeyi bastan hazirlamak
   zorunda kaldigi icin olcumde daha pahaliya geliyordu. */
html.low-perf .own-turn-frame { box-shadow: inset 0 0 0 3px #ffd75e; }
html.low-perf .own-turn-frame.urgent { box-shadow: inset 0 0 0 4px #ff6a52; }

/* Klasik okeyde eli bitirme alani: masanin ortasinda, gosterge ile taş destesi
   arasinda durur. Elin kazanan dizilime bolunup bolunemedigi oyun durumu
   degistiginde hesaplanir; bolunuyorsa alan aktiflesir ve son tas buraya
   birakilarak el bitirilir. Aktif degilken yerini belli eden soluk bir cerceve
   olarak durur, oyuncu alanin varligini ogrensin. */
.classic-finish-zone {
    display: grid;
    place-items: center;
    min-width: 92px;
    min-height: 62px;
    padding: .3rem .5rem;
    border: 2px dashed #ffffff2e;
    border-radius: 12px;
    background: #0a2a3a4d;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.classic-finish-zone .classic-finish-hint { display: grid; gap: 1px; line-height: 1.1; }
.classic-finish-zone small {
    color: #8fb3c4;
    font-size: .46rem;
    font-weight: 900;
    letter-spacing: .14em;
}
.classic-finish-zone b { color: #b9d3e0; font-size: .58rem; font-weight: 700; }
.classic-finish-zone.finish-drop-target {
    border-style: solid;
    border-color: #7ce9a0;
    background: linear-gradient(160deg, #10543ae6, #0b3b2ae6);
    box-shadow: 0 0 0 2px #7ce9a04d, 0 6px 16px #00170fa8;
}
.classic-finish-zone.finish-drop-target small { color: #a9ffc9; }
.classic-finish-zone.finish-drop-target b { color: #eafff2; font-weight: 900; }
.classic-finish-zone.finish-target-hover {
    border-color: #eafff2;
    background: linear-gradient(160deg, #18795be6, #0e5540e6);
    box-shadow: 0 0 0 3px #a9ffc9, 0 0 20px #7ce9a0;
}

/* Ayarlarin altindaki kucuk isim yazisi: yedi kez dokununca sunucu adresi
   alanini acar. Oyuncu icin sade bir etiket gibi gorunur. */
.settings-footer {
    display: block;
    margin: .6rem auto .2rem;
    color: #ffffff2e;
    font-size: .58rem;
    letter-spacing: .18em;
    text-align: center;
    user-select: none;
    cursor: default;
}
.server-address-setting { display: grid; gap: .4rem; }
.server-address-fields { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.server-address-fields input {
    flex: 1 1 200px;
    min-width: 0;
    padding: .4rem .6rem;
    border: 1px solid #ffffff38;
    border-radius: 8px;
    color: #eaf6ff;
    background: #05253ac9;
    font-size: .78rem;
}
.server-address-current { color: #8fb3c4; font-size: .6rem; word-break: break-all; }

/* Lobideki surum yazisi sunucu adresi panelinin gizli anahtaridir: yedi kez
   dokununca acilir. Gorunumu degismez, yalnizca dokunulabilir olur. */
.lobby-version-tap { font-weight: inherit; cursor: default; user-select: none; }

/* Ses cikisi menusu: kulaklik dugmesinin hemen solunda acilir. Daha once hic
   stili yoktu, bu yuzden akista nereye denk gelirse orada -sol altta, istaka
   dugmelerinin arkasinda- cikiyordu. Dugme sag kenarda sabit oldugu icin menu
   de sabit konumlanir ve onun ustunde durur. */
.voice-route-panel {
    position: fixed;
    right: 44px;
    /* Yatay ekranda yukseklik az: alttan hizalanirsa panel yukari dogru buyuyup
       ekranin disina tasiyordu. Ustten hizalanir ve sigmazsa kendi icinde kayar. */
    top: max(6px, env(safe-area-inset-top));
    bottom: auto;
    z-index: 80;
    display: grid;
    gap: 2px;
    min-width: 168px;
    max-width: min(240px, calc(100vw - 60px));
    max-height: calc(100vh - 12px);
    overflow-y: auto;
    padding: .4rem;
    border: 1px solid #7fd9b4a8;
    border-radius: 12px;
    background: linear-gradient(165deg, #0d4257f2, #05253af7);
    box-shadow: 0 10px 24px #00131fbf, inset 0 1px #ffffff1f;
}
.voice-route-panel header {
    padding: .1rem .35rem .3rem;
    border-bottom: 1px solid #ffffff1f;
    color: #9ff5c6;
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.voice-route-panel button {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .4rem;
    align-items: center;
    padding: .38rem .45rem;
    border: 0;
    border-radius: 8px;
    color: #eaf6ff;
    background: transparent;
    font-size: .72rem;
    text-align: left;
}
.voice-route-panel button:disabled { opacity: .45; }
.voice-route-panel button.selected { background: #17634f; color: #eafff4; }
.voice-route-panel button.selected i { color: #9ff5c6; font-style: normal; }

/* Ses cikisi menusunde bagli cihazin adi etiketin altinda kucuk yazar.
   Bluetooth simgesi emoji setinde olmadigi icin logonun turedigi rune
   kullanilir; mavi yuvarlak icinde gercek simge gibi durur. */
.voice-route-text { display: grid; gap: 1px; min-width: 0; }
.voice-route-text small {
    color: #9bc2d4;
    font-size: .58rem;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.voice-route-panel button.selected .voice-route-text small { color: #bfeed8; }
.voice-route-icon.bluetooth {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #ffffff;
    background: #0a6ed1;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}


/* Masadaki yazilar yalniz okunur. Basili tutunca tarayici yaziyi seciyor,
   secim tutamaclari ve "kopyala" balonu cikip oyunu engelliyordu; ozellikle
   "Tas toplami" gibi rozetlerde. Ayni sorun buyutulmus istakada masaya
   basili tutma hareketinde de cikiyor. Yazi alanlari disarida birakildi:
   oraya yazip metni duzeltmek gerekiyor. */
.game-shell,
.ust-band {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.game-shell input,
.game-shell textarea,
.game-shell [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}


/* "Tas toplami" rozeti istakanin sag ust kenarina alindi; solda dizme
   dugmelerinin hemen ustune denk gelip masanin sol alt kosesini
   kapatiyordu. */
@media (orientation: landscape) {
    .game-shell .rack-tile-total-badge {
        right: 7px;
        left: auto;
    }

    /* Buyutulmus istakada iki yan da dolu: solda "Otomatik isle",
       "Perleri ac" ve "Cifleri ac", sagda "Seri diz", "Cift diz" ve X.
       Rozet tam ortada "Per toplami" rozetinin uzerine biniyordu; sagdaki
       grubun hemen soluna, "Per toplami" ile "Seri diz" arasindaki
       bosluga alindi. 268px = X (8 + 46) + serit (64 + 196) + bosluk.
       Dar bir yer oldugu icin rozet burada biraz kucultuluyor. */
    .game-shell.istaka-buyuk .rack-tile-total-badge {
        top: auto;
        right: 270px;
        bottom: calc(100% + 18px);
        left: auto;
        transform: none;
        gap: 2px;
        min-width: 0;
        padding: 2px 5px;
    }

    /* Dar aralikta sigsin diye yazi da bir tik kucultuluyor. */
    .game-shell.istaka-buyuk .rack-tile-total-badge small { font-size: .40rem; }
    .game-shell.istaka-buyuk .rack-tile-total-badge b { font-size: .64rem; }
}


/* Buyutulmus istakada yana atilan taslar gorunsun.

   Alt iki atik kutusu (kendi tasimiz ve sol alttaki oyuncunun tasi)
   istakanin hemen ustunde duruyor; istaka ekranin yarisini kaplayinca
   once dugme seridinin, sonra istakanin altinda kaliyor ve hic
   gorunmuyorlardi.

   Dordu de ekranin ust kenarina, yan isim kartlarinin iki yanina
   alindi: ustteki oyuncunun tasi kartin DIS yaninda (eski yerinde),
   alttakinin tasi kartin IC yaninda, masanin kenarinda. Yan sutun bu
   ekranda 58px, atik kutusu 62px oldugu icin ikisi ayni sutuna yan yana
   sigmiyor; bu yuzden ic taraftaki masanin uzerine tasiyor.

   Tasin dusme noktasi ayri ayarlanmiyor: atma koridoru kutunun o anki
   ekran olcusunden hesaplandigi icin kutu nereye giderse hedef de
   oraya gidiyor. */
@media (orientation: landscape) {
    /* Yan oyuncu kartlari yatay durur: ad dik yazilmaz, avatar ile yan
       yana gelir ve kart sutunun en ustune cekilir. Boylece altinda
       atik kutulari icin yer acilir. */
    .game-shell.istaka-buyuk .opponent:nth-child(2),
    .game-shell.istaka-buyuk .opponent:nth-child(3) {
        align-self: start;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 3px 4px;
    }
    .game-shell.istaka-buyuk .opponent:nth-child(2) .opponent-identity,
    .game-shell.istaka-buyuk .opponent:nth-child(3) .opponent-identity {
        min-height: 0;
    }
    .game-shell.istaka-buyuk .opponent:nth-child(2) .opponent-identity strong,
    .game-shell.istaka-buyuk .opponent:nth-child(3) .opponent-identity strong {
        max-height: none;
        writing-mode: horizontal-tb;
        transform: none;
    }

    /* Atik kutulari kartin altina, alt alta dizilir. Yan sutun bu ekranda
       58 piksel, kutu 62 piksel; yan yana sigmadiklari icin stoklaniyorlar. */
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-left,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-right {
        top: 66px;
        bottom: auto;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        top: 118px;
        bottom: auto;
        right: auto;
        left: auto;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left {
        left: calc(max(var(--discard-shell-padding, 1rem), var(--safe-side)) + (var(--discard-side-column, 145px) - 62px) / 2);
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        right: calc(max(var(--discard-shell-padding, 1rem), var(--safe-side)) + (var(--discard-side-column, 145px) - 62px) / 2);
    }

    /* Atik kutusunun cercevesi ve zemini kaldirilir: ustte oyuncu adi,
       altinda tas, arada baska bir sey yok. */
    .game-shell.istaka-buyuk .discard-corner-slot .player-discard-pile {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }
}


/* "Otomatik isle", "Perleri ac" ve "Cifleri ac" (el acildiktan sonra
   "Perleri isle / Cifleri isle") yalniz kullanilabilir durumdayken
   gorunur. Pasif hallerinde ekranda yer kaplamalari gereksiz; ozellikle
   istaka buyutuldugunde masanin uzerinde duruyorlar.
   "Seri diz" ve "Cift diz" kapsam disi: onlar her zaman kullanilabilir. */
.rack-edge-tools .auto-layoff:disabled,
.rack-right-tools .rack-open-action:disabled {
    display: none;
}


/* Buyutulmus istakada dugmeler kendi taraflarina doner ve ekranin en
   soluna / en sagina alt alta dizilir.

   Solda "Seri diz", "Cift diz" ve "Otomatik isle" (normalde istakanin
   sol yanindaki sutun), sagda "Perleri ac" ve "Cifleri ac" (normalde sag
   yandaki sutun) ile buyutmeyi kapatan kirmizi X. Ikisi de istakanin
   hemen ustunden yukari dogru buyur.

   Atik kutulari bu sutunlarin icine alinir: dugmeler ekranin iki
   kenarindaki 76 pikseli kapladigi icin kutular onlarin ic tarafina,
   yan oyuncu kartinin altina, yan yana konur. Yan sutun 58 piksel
   oldugu icin kutular masanin uzerine tasiyor; ekranda bu alan bos. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk .rack-left-tools {
        position: fixed;
        right: auto;
        bottom: calc(var(--game-rack-height) + 6px);
        left: 2px;
        z-index: 91;
        flex-direction: column;
        justify-content: flex-end;
        width: 74px;
        gap: 4px;
        transform: none;
    }

    /* "Otomatik isle" ayri konumlandirilmisti; yeniden kendi sutununa doner. */
    .game-shell.istaka-buyuk .rack-left-tools > .auto-layoff {
        position: static;
        width: auto;
        min-width: 0;
    }

    .game-shell.istaka-buyuk .rack-right-tools {
        position: fixed;
        /* Alttaki X dugmesine yer birakir. */
        right: 2px;
        bottom: calc(var(--game-rack-height) + 54px);
        left: auto;
        z-index: 91;
        flex-direction: column;
        justify-content: flex-end;
        width: 74px;
        gap: 4px;
    }

    .game-shell.istaka-buyuk .rack-left-tools > button,
    .game-shell.istaka-buyuk .rack-left-tools > .assist-control,
    .game-shell.istaka-buyuk .rack-right-tools > .rack-open-action {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        min-height: 34px;
        padding: 4px 5px;
        font-size: .62rem;
    }

    /* Kapatma dugmesi sag sutunun en altinda, istakanin hemen ustunde. */
    .game-shell.istaka-buyuk .istaka-kucult {
        position: fixed;
        top: auto;
        right: 2px;
        bottom: calc(var(--game-rack-height) + 6px);
        z-index: 92;
        width: 42px;
        height: 42px;
        margin-inline: 16px;
    }

    /* Atik kutulari dugme sutunlarinin ic tarafinda, kartin altinda. */
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-left,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-right,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        top: 62px;
        bottom: auto;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-left {
        right: auto;
        left: 84px;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left {
        right: auto;
        left: 150px;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-right {
        right: 84px;
        left: auto;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        right: 150px;
        left: auto;
    }
}


/* Buyutulmus istakada yan oyuncu kartlari GERCEKTEN yatay olsun.

   Ad yatay yazilmasina ragmen kartin cercevesi dikey kaliyordu: kart
   izgaradaki dar yan sutuna yerlesiyor ve yuksekligini oradan aliyor
   (olculen 54x107 piksel). Bu yuzden kart bu modda izgaradan cikarilip
   ekranin ust kosesine, 150x40 olarak konumlandiriliyor.

   Atik kutulari kartin altina alt alta diziliyor. Sola/saga tam
   dayanmiyorlar: ekranin iki kenarindaki 76 piksel dugme sutunlarina
   ait, o yuzden kutular 84 pikselden basliyor. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk .opponent:nth-child(2),
    .game-shell.istaka-buyuk .opponent:nth-child(3) {
        position: absolute;
        top: 6px;
        z-index: 26;
        box-sizing: border-box;
        width: 150px;
        min-width: 0;
        height: 40px;
        min-height: 0;
        max-height: 40px;
        margin: 0;
    }
    .game-shell.istaka-buyuk .opponent:nth-child(2) {
        right: auto;
        left: 6px;
    }
    .game-shell.istaka-buyuk .opponent:nth-child(3) {
        right: 6px;
        left: auto;
    }
    .game-shell.istaka-buyuk .opponent:nth-child(2) .opponent-identity strong,
    .game-shell.istaka-buyuk .opponent:nth-child(3) .opponent-identity strong {
        overflow: hidden;
        font-size: .58rem;
        text-overflow: ellipsis;
    }

    /* Kartin altinda, ustteki kutu once. */
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-left,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-right {
        top: 52px;
        bottom: auto;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        top: 104px;
        bottom: auto;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-left,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left {
        right: auto;
        left: 84px;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-right,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        right: 84px;
        left: auto;
    }
}


/* Buyutulmus istakada son yerlesim.

   Ust iki atik kutusu (seat-top-left / seat-top-right) hic oynatilmaz:
   normal oyundaki yerinde, ekranin ust kosesinde kalir.

   Yan oyuncu kartlari dar yan sutuna sigmadigi icin masanin ortasina
   alinir: soldaki kart ekran ortasinin 100 piksel soluna, sagdaki 100
   piksel sagina. Masanin ortasi bu modda bos.

   Her kartin kendi atik kutusu da kartin altina, ayni eksene oturur. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-left,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-right {
        top: 7px;
        bottom: auto;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-left {
        right: auto;
        left: calc(max(var(--discard-shell-padding, 1rem), var(--safe-side)) + (var(--discard-side-column, 145px) - 62px) / 2);
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-top-right {
        right: calc(max(var(--discard-shell-padding, 1rem), var(--safe-side)) + (var(--discard-side-column, 145px) - 62px) / 2);
        left: auto;
    }

    /* Kartlar: 150 piksel genis, ortanin 100 piksel sagi ve solu. */
    .game-shell.istaka-buyuk .opponent:nth-child(2) {
        top: 58px;
        right: auto;
        left: calc(50% - 175px);
    }
    /* Sag kart da SOLDAN olculuyor: "right" ile verilince yerine
       oturmadi (kart ekranin sag kenarina yapisip disari tasti). */
    .game-shell.istaka-buyuk .opponent:nth-child(3) {
        top: 58px;
        right: auto;
        left: calc(50% + 25px);
    }

    /* Kartlarin kendi atik kutulari hemen altlarinda, ayni eksende. */
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        top: 102px;
        bottom: auto;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left {
        right: auto;
        left: calc(50% - 131px);
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        right: auto;
        left: calc(50% + 69px);
    }
}


/* Buyutulmus istakada yan oyuncu kartlari, kendi taraflarindaki UST atik
   kutusunun hemen altinda durur ve masanin uzerine tasmaz.

   Konum "fixed" verildi: kart normalde izgaranin icinde yasiyor ve
   "right" ile konumlandirildiginda dogru yere oturmuyordu (sag kart
   ekranin sag kenarina yapisip disari tasti). Fixed ile olcu dogrudan
   ekrana gore aliniyor, iki taraf da ayni sekilde hesaplaniyor.

   Genislik 104 piksel: masanin sol kenari ekranin 133. pikselinde
   basliyor, kart 6..110 arasinda kaliyor ve masaya degmiyor.

   Dugme sutunlari da bu yuzden bir tik alcaltildi (dugme yuksekligi 34
   yerine 28) ki kartin altinda kalsinlar. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk .opponent:nth-child(2),
    .game-shell.istaka-buyuk .opponent:nth-child(3) {
        position: fixed;
        top: 78px;
        z-index: 26;
        box-sizing: border-box;
        width: 104px;
        min-width: 0;
        height: 34px;
        min-height: 0;
        max-height: 34px;
        padding: 2px 4px;
        gap: 4px;
    }
    .game-shell.istaka-buyuk .opponent:nth-child(2) {
        right: auto;
        left: 6px;
    }
    .game-shell.istaka-buyuk .opponent:nth-child(3) {
        right: 6px;
        left: auto;
    }
    .game-shell.istaka-buyuk .opponent:nth-child(2) .profile-avatar,
    .game-shell.istaka-buyuk .opponent:nth-child(3) .profile-avatar {
        width: 22px;
        height: 22px;
    }
    .game-shell.istaka-buyuk .opponent:nth-child(2) .opponent-identity strong,
    .game-shell.istaka-buyuk .opponent:nth-child(3) .opponent-identity strong {
        font-size: .5rem;
    }

    /* Dugmeler kartin altinda kalsin. */
    .game-shell.istaka-buyuk .rack-left-tools > button,
    .game-shell.istaka-buyuk .rack-left-tools > .assist-control,
    .game-shell.istaka-buyuk .rack-right-tools > .rack-open-action {
        min-height: 28px;
        font-size: .58rem;
    }
}


/* Buyutulmus istakada yan sutunun son hali.

   Sutunda yukaridan asagi: ust atik kutusu, oyuncu karti, o oyuncunun
   atik kutusu. Ucu de ayni eksende hizali. Kartlar masaya 20 piksel
   yaklastirildi.

   Dugme sutunlari 96 piksel ice kaydirildi. Sebep: kart ve iki atik
   kutusu ekranin kenarindaki sutunu bastan asagi dolduruyor; dugmeler
   de orada kalsa alt kutunun uzerine biniyorlardi. Dugmeler hala kendi
   taraflarinda ve alt alta, yalniz kenardan bir kutu genisligi kadar
   iceride. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk .opponent:nth-child(2),
    .game-shell.istaka-buyuk .opponent:nth-child(3) {
        top: 72px;
    }
    .game-shell.istaka-buyuk .opponent:nth-child(2) {
        right: auto;
        left: 26px;
    }
    .game-shell.istaka-buyuk .opponent:nth-child(3) {
        right: 26px;
        left: auto;
    }

    /* Oyuncunun kendi atik kutusu kartin tam altinda, ust kutuyla ayni
       eksende. Olcu ekrana gore alinir ki ust kutuyla birebir hizalansin. */
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        position: fixed;
        top: 110px;
        bottom: auto;
        min-height: 42px;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left {
        right: auto;
        left: 28px;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        right: 28px;
        left: auto;
    }

    .game-shell.istaka-buyuk .rack-left-tools {
        left: 96px;
    }
    .game-shell.istaka-buyuk .rack-right-tools,
    .game-shell.istaka-buyuk .istaka-kucult {
        right: 96px;
    }
}


/* Buyutulmus istaka: son duzeltmeler. */
@media (orientation: landscape) {
    /* "Seri diz" ve "Cift diz" yan yana. */
    .game-shell.istaka-buyuk .rack-left-tools {
        flex-direction: row;
        width: auto;
    }
    .game-shell.istaka-buyuk .rack-left-tools > button,
    .game-shell.istaka-buyuk .rack-left-tools > .assist-control {
        width: 72px;
    }

    /* Alt atik kutulari ust kutularla birebir ayni eksende dursun.
       "fixed" ile ekrandan olculuyordu ve masaya uzakliklari ustteki
       kutularinkinden farkli cikiyordu (olculen fark ~43 piksel). Artik
       ikisi de ayni kapsayiciya gore ve AYNI hesapla konumlaniyor. */
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        position: absolute;
        top: 90px;
        bottom: auto;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left {
        right: auto;
        left: calc(max(var(--discard-shell-padding, 1rem), var(--safe-side)) + (var(--discard-side-column, 145px) - 62px) / 2);
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        right: calc(max(var(--discard-shell-padding, 1rem), var(--safe-side)) + (var(--discard-side-column, 145px) - 62px) / 2);
        left: auto;
    }

    /* Ayarlar, skor tablosu ve masayi gizleme dugmeleri bu modda gizli:
       istaka buyukken masada yer kalmiyor, ucu de oyun menusunden
       ulasilabiliyor. */
    .game-shell.istaka-buyuk .game-settings-fab,
    .game-shell.istaka-buyuk .game-score-fab,
    .game-shell.istaka-buyuk .hidden-table-badge {
        display: none;
    }
}


/* Buyutulmus istaka: kutular biraz asagi, dugmeler kenarlara. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        top: 110px;
    }

    /* Iki dugme grubu da tek sirada ve kenarlara dayali. X kaldirildigi
       icin sag grup da istakanin hemen ustune inebiliyor. */
    .game-shell.istaka-buyuk .rack-left-tools {
        left: 8px;
    }
    .game-shell.istaka-buyuk .rack-right-tools {
        right: 8px;
        bottom: calc(var(--game-rack-height) + 6px);
        flex-direction: row;
        width: auto;
    }
    .game-shell.istaka-buyuk .rack-right-tools > .rack-open-action {
        width: 72px;
    }
}


/* Buyutulmus istaka: kart 5 piksel asagi, alt atik kutulari 5 piksel yukari. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk .opponent:nth-child(2),
    .game-shell.istaka-buyuk .opponent:nth-child(3) {
        top: 77px;
    }
    .game-shell.istaka-buyuk .discard-corner-slot.seat-bottom-left,
    .game-shell.istaka-buyuk .discard-corner-slot.seat-self {
        top: 105px;
    }
}


/* "Tas toplami" rozeti gostergenin soluna alindi. Gosterge masanin
   ortasinda duruyor; rozetin sag kenari onun sol kenarinda bitsin diye
   olcu ekran ortasina gore veriliyor (gostergenin sol kenari ortanin
   yaklasik 79 piksel solunda). */
@media (orientation: landscape) {
    .game-shell .rack-tile-total-badge,
    .game-shell.istaka-buyuk .rack-tile-total-badge {
        right: calc(50% + 83px);
        left: auto;
    }
}


/* Buyutulmus istakada masaya acilan perler istakanin altinda kaliyordu.
   Sebep: per alani masanin ALT kenarina hizali; istaka ekranin yarisini
   kaplayinca sigmayan kisim sabit istakanin arkasina gidiyor ve
   gorunmuyordu. Bu modda perler yukaridan asagi diziliyor (ust ortadaki
   sira rozetinin altindan baslayarak) ve taslar kucultuluyor ki kalan
   alana sigsinlar. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk .meld-area {
        justify-content: flex-start;
        min-height: 0;
        padding: 58px 4px 4px;
        overflow: hidden;
    }
    .game-shell.extra-large-tile-mode.istaka-buyuk .meld-area.meld-density-roomy,
    .game-shell.extra-large-tile-mode.istaka-buyuk .meld-area.meld-density-standard,
    .game-shell.extra-large-tile-mode.istaka-buyuk .meld-area.meld-density-compact,
    .game-shell.extra-large-tile-mode.istaka-buyuk .meld-area.meld-density-dense {
        --opened-tile-width: 17px;
    }
}


/* Buyutulmus istakada acilan perler: olcunun UCU birden ayarlanir.
   Onceki denemede yalniz genislik kucultulmustu; yukseklik ve yazi ayri
   degiskenlerden geldigi icin taslar uzun-dar kaldi ve dorduncu per
   istakanin altinda kaldi. Simdi gercek tas orani korunuyor (20x28) ve
   per alaninin ust/alt bosluklari bu moda gore veriliyor; sigmayan
   perler saga, yeni sutuna akiyor. */
@media (orientation: landscape) {
    .game-shell.extra-large-tile-mode.istaka-buyuk .meld-area[class*="meld-density-"] {
        --opened-tile-width: 20px;
        --opened-tile-height: 28px;
        --opened-tile-font: .62rem;
    }
    .game-shell.istaka-buyuk .meld-area.scrollable-meld-area[class*="meld-density-"] {
        padding-top: 52px;
        padding-bottom: 6px;
    }
}


/* Buyutulmus istaka: son yerlesim duzenlemeleri. */
@media (orientation: landscape) {
    /* Perler yukari cekildi ve taslar biraz daha kucultuldu ki daha cok
       per sigsin. Ust sinir, ortadaki sira rozetinin hemen altidir. */
    .game-shell.istaka-buyuk .meld-area.scrollable-meld-area[class*="meld-density-"] {
        padding-top: 38px;
        padding-bottom: 4px;
    }
    .game-shell.extra-large-tile-mode.istaka-buyuk .meld-area[class*="meld-density-"] {
        --opened-tile-width: 18px;
        --opened-tile-height: 25px;
        --opened-tile-font: .56rem;
    }

    /* "Tas toplami" rozeti istakanin ust kenarina biner; arada bosluk
       kalmasin diye asagi cekildi. */
    .game-shell.istaka-buyuk .rack-tile-total-badge {
        bottom: calc(100% - 2px);
    }

    /* Mesajlasma ve sesli yazma dugmeleri "Seri diz"in hemen ustunde. */
    .game-shell.istaka-buyuk .table-chat-fab,
    .game-shell.istaka-buyuk .voice-write-fab {
        position: fixed;
        top: auto;
        right: auto;
        bottom: calc(var(--game-rack-height) + 44px);
        z-index: 91;
        width: 40px;
        height: 40px;
    }
    .game-shell.istaka-buyuk .table-chat-fab { left: 8px; }
    .game-shell.istaka-buyuk .voice-write-fab { left: 54px; }

    /* Ikram dugmesi en ustte, sagdaki atik kutusunun yaninda durur. */
    .game-shell.istaka-buyuk .game-treat-fab {
        position: fixed;
        top: 32px;
        right: 30px;
        bottom: auto;
        left: auto;
        z-index: 95;
        width: 38px;
        height: 38px;
    }
}


/* Buyutulmus istakada ustteki oyuncunun karti, masanin ustundeki bandin
   ortasindaki bos alana alinir. Masada yer kazanmak icin: kart normalde
   ust ortada duruyor ve sira rozetiyle ayni seride sikisiyordu. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk .opponent:nth-child(1) {
        position: fixed;
        top: 1px;
        right: auto;
        left: 50%;
        z-index: 120;
        box-sizing: border-box;
        width: 150px;
        min-width: 0;
        height: 22px;
        min-height: 0;
        max-height: 22px;
        margin: 0;
        padding: 1px 6px;
        gap: 4px;
        transform: translateX(-50%);
    }
    .game-shell.istaka-buyuk .opponent:nth-child(1) .profile-avatar {
        width: 16px;
        height: 16px;
    }
    .game-shell.istaka-buyuk .opponent:nth-child(1) .opponent-identity strong {
        font-size: .48rem;
    }
}


/* Bandaki kullanici adi ve puan rozeti 50 piksel sola cekildi; ortadaki
   oyuncu kartina yer acilir. Sag taraftaki lobi rozeti yerinde kalir. */
.ust-band .ust-band-kisi {
    margin-left: -50px;
}


/* Ustteki oyuncunun karti gercekten bandin uzerinde gorunsun ve masaya
   acilan perler masanin EN USTUNDEN dizilmeye baslasin.

   Kart banda tasinmisti ama bandin arkasinda kaliyordu: oyun alani
   "isolation: isolate" ile kendi katman baglamini kuruyor, icindeki
   hicbir oge disaridaki bandin (60) ustune cikamiyor. Bu modda oyun
   alanina 61 verilerek kart bandin uzerine cikiyor. Oyun alaninin
   kutusu zaten bandin altinda basladigi icin bandin geri kalani
   kapanmiyor; yalnizca ortadaki kart oraya tasiyor.

   Perlerin ust boslugu da kaldirildi: kart artik masada yer kaplamadigi
   icin perler en ustten baslayabiliyor. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk {
        z-index: 61;
    }
    .game-shell.istaka-buyuk .meld-area.scrollable-meld-area[class*="meld-density-"] {
        padding-top: 4px;
    }
}


/* Buyutec dugmesi: sag kenarin en ustunde, digerlerinin uzerinde bos
   kalan yerde. Alt taraftaki sira dolu (radyo, ikram, kayit, skor,
   ayarlar) ve sesli lobide uzerine daha da eklendigi icin bu dugme
   asagidan degil YUKARIDAN olculuyor. */
.istaka-buyutec-fab {
    position: fixed;
    top: max(26px, calc(env(safe-area-inset-top) + 26px));
    right: 1px;
    bottom: auto;
    left: auto;
    z-index: 76;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #f7df87;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(180deg, #4d8294, #183d50);
    box-shadow: 0 4px 12px #001625b8, inset 0 1px #e9fbff80;
    font-size: .9rem;
}
.istaka-buyutec-fab.active {
    border-color: #c9f47d;
    background: linear-gradient(180deg, #79ae39, #386a20);
}

/* Buyutulmus istakada ikram dugmesi buyutecin soluna cekilir ki
   birbirlerinin uzerine binmesinler. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk .game-treat-fab {
        right: 44px;
    }
}


/* Buyutulmus istakada buyutec dugmesi, sagdaki oyuncu kartinin altina ve
   o taraftaki atik kutusunun sagina alinir. Kart 111. pikselde bitiyor,
   atik kutusu 808. pikselde; dugme ikisinin de disinda kaliyor. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk .istaka-buyutec-fab {
        top: 126px;
        right: 4px;
        bottom: auto;
        left: auto;
    }
}


/* Buyutulmus istakada: ikram dugmesi sagdaki oyuncu kartinin altina ve o
   taraftaki atik kutusunun sagina alinir (kart 111. pikselde bitiyor,
   kutu 808. pikselde). Buyutec ise sag ust kosedeki yerinde kalir,
   yalnizca 20 piksel sola cekilir. */
@media (orientation: landscape) {
    /* Buyutecle ayni dusey eksende: ikisi de sagdan 21 piksel iceride. */
    .game-shell.istaka-buyuk .game-treat-fab {
        top: 126px;
        right: 21px;
        bottom: auto;
        left: auto;
    }
    .game-shell.istaka-buyuk .istaka-buyutec-fab {
        top: max(26px, calc(env(safe-area-inset-top) + 26px));
        right: 21px;
        bottom: auto;
        left: auto;
    }
}


/* Istaka kucukken buyutec, sag kenardaki diger menu dugmeleriyle ayni
   dusey eksende dursun. Onlar yatay ekranda ayri bir kurala tabi
   (sagdan 8 piksel + 15 piksel kaydirma); buyutec bu kurala dahil
   degildi ve daha saga dusuyordu. Buyutulmus moddaki kendi yeri
   ayrica veriliyor, oraya dokunulmuyor. */
@media (orientation: landscape) {
    .game-shell:not(.istaka-buyuk) .istaka-buyutec-fab {
        right: max(8px, var(--safe-side));
        transform: translateX(15px);
    }
}


/* "Sira sende - tas cek" rozeti buyutulmus istakada gizlenir: perler
   masanin en ustunden dizildigi icin onlarin onune geliyordu. Sira
   bilgisi zaten oyuncu kartlarindaki vurgudan ve buyuk "SIRA SIZDE"
   uyarisindan anlasiliyor. */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk .game-turn-chip {
        display: none;
    }
}


/* Buyutec istaka buyuyunce de yerini degistirmez: kucuk moddaki gibi sag
   kenardaki menu dugmeleriyle ayni eksende kalir. Ikram dugmesi de ayni
   eksene oturur; yalnizca yuksekligi farklidir (sagdaki oyuncu kartinin
   ve atik kutusunun altinda). */
@media (orientation: landscape) {
    .game-shell.istaka-buyuk .istaka-buyutec-fab,
    .game-shell.istaka-buyuk .game-treat-fab {
        right: max(8px, var(--safe-side));
        transform: translateX(15px);
    }
}


/* Islek tas isareti: sag ust kosedeki nokta kaldirildi, yerine
   tasin altindaki renk cemberi kirmizi cerceveyle belirtiliyor. Nokta
   tasin rakamiyla ayni koseyi paylasip kalabalik yapiyordu; cember
   zaten her tasta var ve goz oraya aliskin.
   Ayni isaret el acildiktan sonra da kullanilir: orada da islek tasi
   atmak +101 cezadir, yani uyarinin anlami degismiyor. Eskiden acilis
   sonrasi yesil bir vurgu vardi ve iki durum farkli gorunuyordu. */
.game-shell .rack-tile:is(.playable-unopened-hint, .playable-opened-hint):not(.playable-pair-hint):not(.selected):not(.okey-face-down):not(.okey-tap-flip)::after {
    content: none !important;
    display: none !important;
}
.game-shell .rack-tile:is(.playable-unopened-hint, .playable-opened-hint):not(.playable-pair-hint):not(.selected):not(.okey-face-down):not(.okey-tap-flip)::before {
    /* Ic halka cemberin kendi cercevesi; disinda ince bir beyaz aralik ve
       ikinci bir kirmizi halka var. Cizgiler ince tutuldu ki tasin
       rakamini bogmasin. */
    border: 1px solid #e01f16;
    box-shadow:
        inset 0 0 0 1px #fff,
        inset 0 0 0 2px #e01f16,
        inset 0 0 0 3px #fff,
        inset 0 0 0 4px #e01f16,
        inset 1px 1px 2px #8e8e89,
        0 0 6px #e01f1699;
    /* Islek tasta ortadaki renk sekli (kalp) yerine sade kirmizi bir
       nokta durur: halkalarin icinde kalp okunmuyordu. */
    background:
        radial-gradient(circle, #e01f16 0 22%, transparent 25%),
        radial-gradient(circle at 38% 32%, #fffdf4 0 17%, #f4ead3 53%, #c4b79e 72%, #eee4ce 77%);
}
/* Rakam nokta icin asagi kaydirilmisti; nokta gidince yerine doner. */
.game-shell .rack-tile:is(.playable-unopened-hint, .playable-opened-hint):not(.playable-pair-hint):not(.selected) > span {
    translate: none;
}

/* Surukleme suresince taslarin katmani sabit kalir. Taslarin kaydirma
   animasyonu transform ile yapiliyor; will-change olmadan tarayici her
   0,08 saniyelik gecis icin katman olusturup yikiyor ve dusuk seviyeli
   cihazlarda bu churn hissedilir takilma yapiyor. Kural YALNIZ suruklenen
   tasa veriliyor: her karede hareket eden tek oge o. Istakadaki butun taslara
   verilince dusuk seviyeli cihazda 30 ayri compositor katmani olusuyor ve
   taslarin coklu golgeleri yuzunden kazanctan cok yuk getiriyordu. */
body.rack-drag-active .rack-board .rack-tile.dragging {
    will-change: transform;
}

/* ======================================================================
   OZELLIK TANITIMI
   Acilista oynayan tanitim. Sahneler video ya da GIF degil: oyun ekraninin
   olculu bir maketi CSS ile cizilir ve parmak, yakinlasma, acilan panel,
   yaziya donen ses gibi adimlar oynatilir. APK buyumez, her ekranda net
   gorunur, arayuz degisince yalnizca sahne guncellenir.

   Konum ve oranlar CALISAN oyundan olculup yuzdeye cevrildi (823x373):
     per alani %7,7/%0,8  %84,7x%65,2   | atik kutulari %7,5x%12,9
     istaka tahtasi %12,3/%66,8 %75,5x%31,2 (2 satir)
     bir tas %5x%14,3 (41x53, oran 0,77) | deste %45,3/%53,4
   Tas govdesi, rakam fontu ve renk cemberi .rack-tile kuralindan alindi.
   ====================================================================== */

.tanitim-karti {
    width: min(94vw, 420px);
    display: grid;
    gap: .55rem;
    padding: .9rem .9rem 1rem;
    border: 1px solid #ffffff1f;
    border-radius: 20px;
    background: linear-gradient(160deg, #0f2d3f 0%, #08202e 60%, #061722 100%);
    box-shadow: 0 24px 60px #000a;
    text-align: center;
}
.tanitim-karti > header {
    display: flex; align-items: center; gap: .45rem;
    color: #f3d58e; font-weight: 800; letter-spacing: .06em; font-size: .8rem;
}
.tanitim-rozet { font-size: 1rem; }
.tanitim-kapat {
    margin-left: auto; width: 28px; height: 28px; padding: 0;
    border: 1px solid #ffffff1f; border-radius: 50%;
    color: #cfe3da; background: #ffffff0d; font-size: .8rem; line-height: 1;
}
.tanitim-ozellik-adi { color: #fff; font-size: 1.02rem; }
.tanitim-aciklama { margin: 0; color: #a9c3bb; font-size: .78rem; line-height: 1.45; }
.tanitim-noktalar { display: flex; justify-content: center; gap: .32rem; }
.tanitim-noktalar span {
    width: 7px; height: 7px; border-radius: 50%; background: #ffffff2e;
    transition: background .2s ease, width .2s ease;
}
.tanitim-noktalar span.secili { width: 18px; border-radius: 99px; background: #e7c163; }
.tanitim-alt { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.tanitim-bir-daha { display: flex; align-items: center; gap: .4rem; color: #90a9a1; font-size: .72rem; cursor: pointer; }
.tanitim-bir-daha input { width: 15px; height: 15px; accent-color: #e7c163; }
.tanitim-ileri {
    min-width: 92px; padding: .5rem 1rem; border: none; border-radius: 11px;
    color: #06231a; background: linear-gradient(#ffe08a, #e7c163); font-weight: 900; font-size: .8rem;
}

/* ---- Sahne govdesi --------------------------------------------------- */
/* cqw birimi sahnenin kendi genisligine gore olculur: kart ister 420 px
   ister 900 px olsun taslarin rakami ayni oranda buyur. */
.tanitim-sahne {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 823 / 373;
    overflow: hidden;
    border: 1px solid #ffffff14;
    border-radius: 14px;
    background: #061d17;
}
.tanitim-sahne .sahne-masa {
    position: absolute; inset: 0; display: block;
    background: radial-gradient(circle at center, #176448 0%, #0b3d2d 42%, #061d17 100%);
    transform-origin: 50% 50%;
}
.tanitim-sahne span { position: absolute; display: block; }

/* ---- Okey tasi: oyunun KENDI kurallari -------------------------------
   Gercek tasta gradyan ve golge yok (app.css'in sonundaki duzlestirme
   kurallari zemini duz #f6eedc yapiyor), rakamin altindaki isaret ise daire
   degil KALP (varsayilan hole-heart-mode). Ikisi de buraya birebir alindi;
   yalniz olculer sahne genisligine cevrildi.
   -------------------------------------------------------------------- */
.tanitim-sahne .st {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding-bottom: 13%;
    border: 1px solid #b9b7ad;
    border-radius: .46cqw;
    background: #f6eedc;
    box-shadow: none;
    font: 900 2.2cqw/1 "UltraTileNumbers", "Arial Black", Arial, sans-serif;
    letter-spacing: -.06em;
    -webkit-text-stroke: .07em currentColor;
    text-shadow: 0 -1px 0 #00000061, 0 1px 0 #ffffff85;
}
.tanitim-sahne .st::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5.6%;
    width: 40%;
    aspect-ratio: 1;
    border: 1px solid #b9aa8c;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 56% 70%, 100% 100%;
    box-shadow: inset .12cqw .12cqw .2cqw #8f8169, inset -.06cqw -.06cqw .1cqw #fffdf4, 0 .06cqw .1cqw #fff;
    transform: translateX(-50%);
}
.tanitim-sahne .st-kirmizi { color: #d51f18; }
.tanitim-sahne .st-kirmizi::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 19C6.8 16.7 1.4 12 1.4 6.7C1.4 3.5 3.2 1.5 5.4 1.5C6.7 1.5 7.6 2.3 8 3.5C8.4 2.3 9.3 1.5 10.6 1.5C12.8 1.5 14.6 3.5 14.6 6.7C14.6 12 9.2 16.7 8 19Z' fill='%23d72720' stroke='%23740906' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(circle at 38% 32%, #fffdf4 0 17%, #f4ead3 53%, #c4b79e 72%, #eee4ce 77%); }
.tanitim-sahne .st-mavi { color: #0068cf; }
.tanitim-sahne .st-mavi::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 19C6.8 16.7 1.4 12 1.4 6.7C1.4 3.5 3.2 1.5 5.4 1.5C6.7 1.5 7.6 2.3 8 3.5C8.4 2.3 9.3 1.5 10.6 1.5C12.8 1.5 14.6 3.5 14.6 6.7C14.6 12 9.2 16.7 8 19Z' fill='%231478d0' stroke='%2304366d' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(circle at 38% 32%, #fffdf4 0 17%, #f4ead3 53%, #c4b79e 72%, #eee4ce 77%); }
.tanitim-sahne .st-siyah { color: #111615; }
.tanitim-sahne .st-siyah::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 19C6.8 16.7 1.4 12 1.4 6.7C1.4 3.5 3.2 1.5 5.4 1.5C6.7 1.5 7.6 2.3 8 3.5C8.4 2.3 9.3 1.5 10.6 1.5C12.8 1.5 14.6 3.5 14.6 6.7C14.6 12 9.2 16.7 8 19Z' fill='%23303b3b' stroke='%23050707' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(circle at 38% 32%, #fffdf4 0 17%, #f4ead3 53%, #c4b79e 72%, #eee4ce 77%); }
.tanitim-sahne .st-sari { color: #d4aa00; }
.tanitim-sahne .st-sari::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 19C6.8 16.7 1.4 12 1.4 6.7C1.4 3.5 3.2 1.5 5.4 1.5C6.7 1.5 7.6 2.3 8 3.5C8.4 2.3 9.3 1.5 10.6 1.5C12.8 1.5 14.6 3.5 14.6 6.7C14.6 12 9.2 16.7 8 19Z' fill='%23d5a300' stroke='%236b4a00' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(circle at 38% 32%, #fffdf4 0 17%, #f4ead3 53%, #c4b79e 72%, #eee4ce 77%); }
.tanitim-sahne .st-bos {
    border-style: dashed;
    border-color: #ffffff2e;
    background: #00000026;
    box-shadow: none;
}
.tanitim-sahne .st-bos::after { display: none; }

/* ---- Masadaki ogeler (olculer gercek oyundan) ------------------------ */
.sahne-rakip {
    display: flex !important;
    align-items: center;
    gap: 4%;
    padding: .6% 1%;
    border: 1px solid #ffffff14;
    border-radius: 1.4cqw;
    background: #061d1788;
}
.sahne-rakip i {
    width: 2.2cqw; aspect-ratio: 1; border-radius: 50%;
    background: linear-gradient(#5b7f72, #2d4a40);
}
.sahne-rakip b { height: .9cqw; flex: 1; border-radius: 99px; background: #ffffff2e; }
.sahne-rakip-ust { left: 40.6%; top: .8%; width: 18.8%; height: 8.8%; }
.sahne-rakip-sol { left: 2.2%; top: 33%; width: 12%; height: 8.8%; }
.sahne-rakip-sag { left: 85.8%; top: 33%; width: 12%; height: 8.8%; }

.sahne-atik {
    width: 7.5%; height: 12.9%;
    border: 1px solid #ffffff1a;
    border-radius: .9cqw;
    background: #061f3366;
}
.sahne-atik-ust-sol { left: .3%; top: 1.9%; }
.sahne-atik-ust-sag { left: 92.1%; top: 1.9%; }
.sahne-atik-alt-sol { left: .3%; top: 52%; }
.sahne-atik-self {
    left: 92.1%; top: 52%;
    border-color: #72e99a66;
    background: linear-gradient(145deg, #1bc96a2e, #087c4a3d);
}

.sahne-deste {
    left: 45.3%; top: 53.4%; width: 4.6%; height: 13.9%;
    border: 1px solid #5f9bb7;
    border-radius: .9cqw;
    background: linear-gradient(#123e5d, #0a2740);
    box-shadow: 0 .3cqw .5cqw #0007;
}
.sahne-gosterge {
    left: 40.3%; top: 56.6%; width: 3.6%; height: 10.7%;
    display: flex !important;
}

/* Masadaki perler: taslar yan yana, istakadakinden biraz kucuk. */
.sahne-per {
    display: flex !important;
    gap: .4%;
    height: 11.5%;
}
.sahne-per-1 { left: 23%; top: 16%; width: 15.5%; }
.sahne-per-2 { left: 52%; top: 30%; width: 15.5%; }

/* Sol alttaki acma dugmeleri ve sag alttaki ceza rozeti. */
.sahne-dugme, .sahne-rozet-ceza {
    display: grid !important;
    place-items: center;
    border-radius: .9cqw;
    color: #eaf7f1;
    font-size: 1.15cqw;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
}
.sahne-dugme-seri {
    left: 1.6%; top: 79.5%; width: 9.2%; height: 9.6%;
    border: 1px solid #8edcff;
    background: linear-gradient(#328fc0, #1d5d82);
}
.sahne-dugme-cift {
    left: 1.6%; top: 90%; width: 9.2%; height: 9.6%;
    border: 1px solid #e7d58b;
    background: linear-gradient(#9b7730, #6a4f1d);
}
.sahne-rozet-ceza {
    left: 88.6%; top: 90.5%; width: 9.6%; height: 9.1%;
    border: 1px solid #f09a86;
    background: linear-gradient(#a84d3c, #712f23);
    font-size: 1.2cqw;
}
.sahne-sohbet-dugmesi {
    left: 91.4%; top: 41.5%; width: 6.4%; aspect-ratio: 1;
    display: grid !important;
    place-items: center;
    border-radius: 50%;
    background: #0a2c3dbf;
    box-shadow: 0 0 0 1px #ffffff2e, 0 .3cqw .5cqw #0007;
    font-size: 2.2cqw;
}

/* ---- Istaka ---------------------------------------------------------- */
/* Istaka: oyundaki altin govde ve iki ucundaki koyu kelepce (app.css:960). */
.sahne-istaka {
    left: 12.3%; top: 66.8%; width: 75.5%; height: 31.2%;
    display: grid !important;
    grid-template-rows: 1fr 1fr;
    gap: 1.2%;
    padding: 1% 1.1%;
    border-radius: .6cqw;
    background:
        linear-gradient(90deg, #6f4308 0 .92cqw, transparent 2.06cqw calc(100% - 2.06cqw), #6f4308 calc(100% - .92cqw)),
        repeating-linear-gradient(0deg, #ffffff0a 0 1px, transparent 2px 9px),
        linear-gradient(180deg, #f2b820 0%, #d58d0b 45%, #ecaa16 49%, #b96e05 100%);
    box-shadow: 0 .9cqw 2cqw #001521c2, inset 0 2px #ffe889, inset 0 -.5cqw #744300;
    transform-origin: 50% 100%;
}
.sahne-istaka .sahne-satir {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    gap: 0;
    min-height: 0;
}

/* ---- Sohbet paneli, balon, ipucu ------------------------------------- */
.sahne-panel {
    left: 60%; right: 2%; bottom: 0;
    display: grid !important;
    gap: 4%;
    padding: 2.5% 2.5%;
    border-radius: 1.2cqw 1.2cqw 0 0;
    background: linear-gradient(#0d3b2b, #07251c);
    box-shadow: 0 -.6cqw 1.8cqw #0008, inset 0 1px #ffffff1f;
    opacity: 0;
    transform: translateY(100%);
}
.sahne-panel-baslik { position: static !important; color: #8fb3a6; font-size: 1.2cqw; letter-spacing: .06em; }
.sahne-dalga { position: static !important; display: flex !important; align-items: center; justify-content: center; gap: 3%; height: 22%; }
.sahne-dalga i { width: 3.5%; height: 22%; border-radius: 99px; background: #4bd28a; opacity: .85; }
.sahne-yazi { position: static !important; overflow: hidden; height: 1.1em; color: #eaf7f1; font-size: 1.3cqw; text-align: left; white-space: nowrap; }
.sahne-yazi b { display: inline-block; font-weight: 600; }
.sahne-gonder {
    position: static !important; justify-self: end;
    padding: 2% 7%; border-radius: 99px;
    color: #06231a; background: linear-gradient(#ffe08a, #e7c163);
    font-size: 1.2cqw; font-weight: 900;
}
.sahne-balon {
    left: 62%; top: 44%; max-width: 34%;
    padding: 1.2% 2%;
    border-radius: 1cqw 1cqw 1cqw .2cqw;
    color: #eaf7f1; background: #0f4a36;
    box-shadow: 0 .3cqw .8cqw #0007;
    font-size: 1.3cqw;
    opacity: 0;
}
.sahne-ipucu {
    left: 50%; top: 58%;
    padding: 1% 2.4%;
    border-radius: 99px;
    color: #06231a; background: #ffe08ae6;
    font-size: 1.5cqw; font-weight: 800; white-space: nowrap;
    transform: translateX(-50%);
    opacity: 0;
}

/* ---- Parmak ---------------------------------------------------------- */
.sahne-parmak {
    position: absolute;
    left: 0; top: 0;
    width: 5.5%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffffee, #ffffff55 55%, #ffffff00 70%);
    box-shadow: 0 0 0 1px #ffffff40;
    opacity: 0;
    pointer-events: none;
}
.sahne-parmak::after {
    content: ""; position: absolute; inset: -40%;
    border: .3cqw solid #ffe08a; border-radius: 50%; opacity: 0;
}

/* ---- Sahne 1: sesle yazma -------------------------------------------
   0.0-1.0 masanin tamami | 1.0-2.2 sohbet dugmesine yakinlasma, parmak gelir
   2.2-2.6 dokunus | 2.6-3.4 panel acilir | 3.4-5.2 dalga ve yaziya donen ses
   5.2-6.0 Gonder'e dokunus | 6.0-7.0 mesaj balonu | 7.0-8.0 uzaklasma
   -------------------------------------------------------------------- */
.tanitim-sahne-sesle-yazma .sahne-ipucu { display: none; }
.tanitim-sahne-sesle-yazma .sahne-masa { animation: sahneSesYakinlas 8s ease-in-out infinite; }
.tanitim-sahne-sesle-yazma .sahne-parmak { animation: sahneSesParmak 8s ease-in-out infinite; }
.tanitim-sahne-sesle-yazma .sahne-parmak::after { animation: sahneDokunusHalkasi 8s ease-out infinite; }
.tanitim-sahne-sesle-yazma .sahne-panel { animation: sahneSesPanel 8s ease-in-out infinite; }
.tanitim-sahne-sesle-yazma .sahne-yazi b { animation: sahneSesYazi 8s steps(20, end) infinite; }
.tanitim-sahne-sesle-yazma .sahne-balon { animation: sahneSesBalon 8s ease-out infinite; }
.tanitim-sahne-sesle-yazma .sahne-dalga i { animation: sahneSesDalga 8s ease-in-out infinite; }
.tanitim-sahne-sesle-yazma .sahne-dalga i:nth-child(2) { animation-delay: -.12s; }
.tanitim-sahne-sesle-yazma .sahne-dalga i:nth-child(3) { animation-delay: -.24s; }
.tanitim-sahne-sesle-yazma .sahne-dalga i:nth-child(4) { animation-delay: -.36s; }
.tanitim-sahne-sesle-yazma .sahne-dalga i:nth-child(5) { animation-delay: -.48s; }
.tanitim-sahne-sesle-yazma .sahne-dalga i:nth-child(6) { animation-delay: -.6s; }
.tanitim-sahne-sesle-yazma .sahne-dalga i:nth-child(7) { animation-delay: -.72s; }

/* Yakinlasma olculu: 1,45 kat. Daha fazlasi masayi tanimsiz hale getiriyor. */
@keyframes sahneSesYakinlas {
    0%, 12% { transform: scale(1); transform-origin: 78% 46%; }
    27%, 75% { transform: scale(1.45); transform-origin: 78% 46%; }
    88%, 100% { transform: scale(1); transform-origin: 78% 46%; }
}
@keyframes sahneSesParmak {
    0%, 8% { left: 72%; top: 88%; opacity: 0; }
    14% { left: 72%; top: 88%; opacity: 1; }
    26%, 60% { left: 90%; top: 36%; opacity: 1; }
    66%, 72% { left: 88%; top: 76%; opacity: 1; }
    80%, 100% { left: 88%; top: 76%; opacity: 0; }
}
@keyframes sahneDokunusHalkasi {
    0%, 27% { opacity: 0; transform: scale(.4); }
    30% { opacity: .9; transform: scale(.5); }
    38% { opacity: 0; transform: scale(1.5); }
    66% { opacity: 0; transform: scale(.4); }
    69% { opacity: .9; transform: scale(.5); }
    77%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes sahneSesPanel {
    0%, 30% { opacity: 0; transform: translateY(100%); }
    38%, 74% { opacity: 1; transform: translateY(0); }
    82%, 100% { opacity: 0; transform: translateY(100%); }
}
@keyframes sahneSesYazi {
    0%, 42% { width: 0; }
    62%, 100% { width: 100%; }
}
@keyframes sahneSesBalon {
    0%, 74% { opacity: 0; transform: translateY(6px) scale(.92); }
    80%, 90% { opacity: 1; transform: translateY(0) scale(1); }
    96%, 100% { opacity: 0; transform: translateY(-4px) scale(1); }
}
@keyframes sahneSesDalga {
    0%, 40%, 70%, 100% { height: 18%; }
    46% { height: 70%; }
    52% { height: 32%; }
    58% { height: 86%; }
    64% { height: 40%; }
}

/* ---- Sahne 2: istakayi buyutme ---------------------------------------
   0.0-1.2 masa | 1.2-2.4 parmak bos yuvada BASILI tutar | 2.4-3.6 istaka
   buyur, ipucu cikar | 3.6-6.0 bekler | 6.0-7.0 eski boyuna doner
   -------------------------------------------------------------------- */
.tanitim-sahne-istaka-buyutme .sahne-panel,
.tanitim-sahne-istaka-buyutme .sahne-balon { display: none; }
.tanitim-sahne-istaka-buyutme .sahne-istaka { animation: sahneIstakaBuyu 7s ease-in-out infinite; }
.tanitim-sahne-istaka-buyutme .sahne-parmak { animation: sahneIstakaParmak 7s ease-in-out infinite; }
.tanitim-sahne-istaka-buyutme .sahne-parmak::after { animation: sahneBasiliTutmaHalkasi 7s ease-out infinite; }
.tanitim-sahne-istaka-buyutme .sahne-ipucu { animation: sahneIpucu 7s ease-out infinite; }

@keyframes sahneIstakaBuyu {
    0%, 34% { transform: scale(1); }
    51%, 86% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
@keyframes sahneIstakaParmak {
    0%, 6% { left: 40%; top: 95%; opacity: 0; }
    13% { left: 40%; top: 95%; opacity: 1; }
    30%, 86% { left: 40.5%; top: 72%; opacity: 1; }
    95%, 100% { left: 40.5%; top: 72%; opacity: 0; }
}
@keyframes sahneBasiliTutmaHalkasi {
    0%, 30% { opacity: 0; transform: scale(.4); }
    33% { opacity: .95; transform: scale(.5); }
    48% { opacity: .35; transform: scale(1.35); }
    54%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes sahneIpucu {
    0%, 30% { opacity: 0; }
    40%, 80% { opacity: 1; }
    90%, 100% { opacity: 0; }
}

/* Hareket azaltma tercihi: sahneler son durumda durur. */
@media (prefers-reduced-motion: reduce) {
    .tanitim-sahne * { animation: none !important; }
    .tanitim-sahne .sahne-panel { opacity: 1; transform: none; }
    .tanitim-sahne .sahne-parmak { opacity: 1; left: 88%; top: 40%; }
    .tanitim-sahne .sahne-yazi b { width: 100%; }
    .tanitim-sahne .sahne-ipucu { opacity: 1; }
}

/* ---- Sahne 3: favori oyun (ana ekran) --------------------------------
   Kart ve yildiz dugmesi oyunun kendi kurallarindan alindi
   (app.css: .favori-oyun-karti, .favori-yildiz, .favori-metin, .favoriye-ekle).
   0.0-1.2 secenekler penceresi acik | 1.2-2.4 parmak yildiza gider, dokunur
   2.4-3.2 yildiz dolar | 3.2-4.2 pencere kapanir | 4.2-5.4 favori karti
   en ustte belirir | 5.4-6.6 parmak karta dokunur | 6.6-7.8 eslesme aranir
   -------------------------------------------------------------------- */
.tanitim-sahne .sahne-anaekran { display: none; }
.tanitim-sahne-favori-oyun .sahne-masa { display: none; }
.tanitim-sahne-favori-oyun .sahne-anaekran {
    position: absolute;
    inset: 0;
    display: block;
    padding: 2.5% 3%;
    background: linear-gradient(170deg, #0d2433 0%, #081b27 55%, #05131c 100%);
}
.sahne-anaekran span { position: absolute; display: block; }

.ae-profil {
    left: 3%; top: 3.5%; width: 94%; height: 13%;
    display: flex !important;
    align-items: center;
    gap: 2%;
    padding: 0 2%;
    border: 1px solid #ffffff14;
    border-radius: 1.4cqw;
    background: #0b2231;
}
.ae-profil i { width: 3.4cqw; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(#4a6d7e, #22323d); }
.ae-profil b { width: 34%; height: 1cqw; border-radius: 99px; background: #ffffff26; }

/* Favori karti: gercek kuralin olculeri sahneye cevrilmis hali. */
.ae-favori {
    left: 3%; top: 19.5%; width: 94%; height: 20%;
    display: flex !important;
    align-items: center;
    gap: 1.6%;
    padding: 0 2%;
    border: 1.5px solid #f0d46d;
    border-radius: 1.8cqw;
    color: #fff6d8;
    background: linear-gradient(120deg, #3c2b06, #1d2b33 62%);
    box-shadow: 0 .9cqw 2.2cqw #0008, inset 0 1px #ffe9a366;
    text-align: left;
    opacity: 0;
    transform: translateY(-10%);
}
.ae-yildiz {
    position: static !important;
    display: grid !important;
    place-items: center;
    flex: 0 0 auto;
    width: 4.4cqw; aspect-ratio: 1;
    border-radius: 50%;
    color: #43320a;
    background: linear-gradient(180deg, #ffe07a, #d0a323);
    font-size: 2.4cqw;
    font-style: normal;
}
.ae-metin { position: static !important; display: grid !important; flex: 1; min-width: 0; gap: .2cqw; }
.ae-metin small { color: #e2c477; font-size: 1.1cqw; font-weight: 900; letter-spacing: .09em; }
.ae-metin strong { color: #fff6d8; font-size: 1.9cqw; }
.ae-metin em { color: #b9cdd6; font-size: 1.35cqw; font-style: normal; }
.ae-favori > b { position: static !important; flex: 0 0 auto; color: #ffe9a3; font-size: 1.45cqw; font-weight: 900; }

.ae-satir { left: 3%; width: 94%; height: 13%; border: 1px solid #ffffff12; border-radius: 1.4cqw; background: #0a2130; }
.ae-satir-1 { top: 42%; }
.ae-satir-2 { top: 57%; }

/* Eslesme secenekleri penceresi (alttan acilir). */
.ae-pencere {
    left: 14%; right: 14%; bottom: 0;
    display: grid !important;
    gap: 4%;
    padding: 2.5% 3%;
    border-radius: 1.8cqw 1.8cqw 0 0;
    background: linear-gradient(#12303f, #0a1e2a);
    box-shadow: 0 -.6cqw 2cqw #000a, inset 0 1px #ffffff1f;
}
.ae-pencere-baslik { position: static !important; color: #8fb6c6; font-size: 1.2cqw; letter-spacing: .06em; text-align: left; }
.ae-yildiz-dugme {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 2.5%;
    padding: 1.6% 2.5%;
    border: 1.5px solid #4c6b78;
    border-radius: 1.4cqw;
    color: #cfe6ef;
    background: #0c2532;
    font-size: 1.35cqw;
    font-weight: 800;
}
.ae-yildiz-dugme i { position: static !important; color: #f0d46d; font-size: 2.1cqw; font-style: normal; }
.ae-yildiz-dugme .ae-dolu { display: none; }
.ae-ara {
    position: static !important;
    justify-self: center;
    padding: 1.4% 6%;
    border-radius: 99px;
    color: #06231a;
    background: linear-gradient(#ffe08a, #e7c163);
    font-size: 1.3cqw;
    font-weight: 900;
}
.ae-araniyor {
    left: 50%; top: 78%;
    padding: 1.2% 3%;
    border-radius: 99px;
    color: #cfe6ef;
    background: #0c2532e6;
    box-shadow: 0 0 0 1px #4c6b78;
    font-size: 1.4cqw;
    font-weight: 800;
    white-space: nowrap;
    transform: translateX(-50%);
    opacity: 0;
}

.tanitim-sahne-favori-oyun .ae-pencere { animation: aePencere 8s ease-in-out infinite; }
.tanitim-sahne-favori-oyun .ae-yildiz-dugme { animation: aeYildizDugme 8s ease-out infinite; }
.tanitim-sahne-favori-oyun .ae-yildiz-dugme .ae-bos { animation: aeYildizBos 8s steps(1, end) infinite; }
.tanitim-sahne-favori-oyun .ae-yildiz-dugme .ae-dolu { animation: aeYildizDolu 8s steps(1, end) infinite; }
.tanitim-sahne-favori-oyun .ae-favori { animation: aeFavoriKart 8s ease-out infinite; }
.tanitim-sahne-favori-oyun .ae-araniyor { animation: aeAraniyor 8s ease-out infinite; }
.tanitim-sahne-favori-oyun .sahne-parmak { animation: aeParmak 8s ease-in-out infinite; }
.tanitim-sahne-favori-oyun .sahne-parmak::after { animation: sahneDokunusHalkasi 8s ease-out infinite; }

@keyframes aePencere {
    0%, 38% { opacity: 1; transform: translateY(0); }
    46%, 92% { opacity: 0; transform: translateY(100%); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes aeYildizBos {
    0%, 29% { opacity: 1; }
    30%, 100% { opacity: 0; }
}
@keyframes aeYildizDolu {
    0%, 29% { display: none; }
    30%, 100% { display: inline; }
}
@keyframes aeYildizDugme {
    0%, 29% { border-color: #4c6b78; background: #0c2532; }
    32%, 100% { border-color: #f0d46d; background: linear-gradient(120deg, #3c2b06, #15303c 62%); }
}
@keyframes aeFavoriKart {
    0%, 50% { opacity: 0; transform: translateY(-10%); }
    58%, 94% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10%); }
}
@keyframes aeAraniyor {
    0%, 84% { opacity: 0; }
    88%, 96% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes aeParmak {
    0%, 8% { left: 46%; top: 94%; opacity: 0; }
    14% { left: 46%; top: 94%; opacity: 1; }
    26%, 40% { left: 24%; top: 74%; opacity: 1; }
    56% { left: 24%; top: 74%; opacity: 0; }
    62% { left: 70%; top: 48%; opacity: 0; }
    68%, 84% { left: 70%; top: 24%; opacity: 1; }
    92%, 100% { left: 70%; top: 24%; opacity: 0; }
}

/* Hemen Oyna: ana ekranin en ustunde duran tek dokunusluk yesil dugme.
   Lobi sectirmeden musait masaya oturtur. Dikkat cekmesi istendigi icin
   nefes alir gibi yanip soner; animasyonu kapali tutan cihazlarda
   (prefers-reduced-motion) sabit kalir, yaniltici bicimde pasif gorunmez. */
/* Iki katmanli dugme: disi lacivert cerceve, ici parlak yesil yuz.
   Tek renk bir dikdortgen ekranda sade duruyordu; cerceve dugmeyi
   kabartip oyun icindeki diger ogelerden ayiriyor. */
.hemen-oyna-dugmesi {
    position: relative;
    display: block;
    width: 100%;
    padding: 6px;
    border: 2px solid #5f78c4;
    border-radius: 22px;
    background: linear-gradient(180deg, #38498a, #1d2750 70%, #141c3c);
    box-shadow: 0 10px 26px #00112b99, inset 0 1px #ffffff40;
    animation: hemenOynaNefes 1.6s ease-in-out infinite;
}
.hemen-oyna-yuz {
    position: relative;
    overflow: hidden;
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: 11px 14px 12px;
    border: 1px solid #0a4a26;
    border-radius: 17px;
    color: #ffffff;
    /* Ustte acik, altta koyu yesil: yuzey kabarik gorunsun. */
    background: linear-gradient(180deg, #7ae06a, #3fb63f 48%, #1f8f2f);
    box-shadow: inset 0 1px #ffffffb0, inset 0 -8px 16px #00000026;
    text-align: center;
}
/* Yuzeyin ustunden gecen cam parlakligi. */
.hemen-oyna-parlak {
    position: absolute;
    inset: 0 0 52% 0;
    border-radius: 17px 17px 50% 50% / 17px 17px 22px 22px;
    background: linear-gradient(180deg, #ffffff5e, #ffffff12);
    pointer-events: none;
}
.hemen-oyna-yuz b {
    font-size: 1.12rem;
    font-weight: 950;
    letter-spacing: .055em;
    text-shadow: 0 2px 0 #0c5c23, 0 0 10px #0a3d1a66;
}
.hemen-oyna-yuz small {
    color: #e8ffe2;
    font-size: .72rem;
    font-weight: 700;
    text-shadow: 0 1px 2px #0a3d1a99;
}
.hemen-oyna-dugmesi:disabled { opacity: .6; animation: none; }
.hemen-oyna-dugmesi:active .hemen-oyna-yuz { transform: translateY(1px); }

/* Nefes artik lacivert cercevenin disinda parliyor: ic yuzun kabarik
   govlesi bozulmasin diye yalniz dis golge degisiyor. */
@keyframes hemenOynaNefes {
    0%, 100% { box-shadow: 0 10px 26px #00112b99, inset 0 1px #ffffff40, 0 0 16px #22ff8f33, 0 0 0 0 #3bff9600; }
    50% { box-shadow: 0 10px 26px #00112b99, inset 0 1px #ffffff40, 0 0 30px #22ff8f85, 0 0 0 7px #3bff9640; }
}

@media (prefers-reduced-motion: reduce) {
    .hemen-oyna-dugmesi { animation: none; }
}

/* Oklarla donen secim satiri. Referans tasarimdaki gibi: solda baslik, saginda
   [<] [deger] [>]. Deger kutusu sabit genislikte degil, satiri doldurur ki
   uzun secenek adlari ("Katlamali 51") kirpilmasin. */
.ok-satiri {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 0;
}
.ok-satiri.disabled { opacity: .45; }
.ok-satiri-baslik {
    /* Baslik esner; dar ekranda yer deger kutusuna birakilir. */
    flex: 1 1 auto;
    min-width: 0;
    font-size: .82rem;
    letter-spacing: .02em;
    opacity: .9;
}
.ok-satiri-secim {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.ok-dugmesi {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1.5px solid #ffffff2e;
    border-radius: 10px;
    color: #eaf4ff;
    background: linear-gradient(180deg, #2a4f72, #1b3550);
    box-shadow: inset 0 1px #ffffff26, 0 3px 8px #0006;
    font-size: .9rem;
    line-height: 1;
}
.ok-dugmesi:active { transform: translateY(1px); }
.ok-dugmesi:disabled { opacity: .5; }
.ok-satiri-deger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Sabit genislik: "Fark etmez", "Katlamali", "101 Okey" kirpilmadan sigar.
       Eskiden esneyip daraliyor ve yazilar ucnokta ile kesiliyordu. */
    flex: 0 0 auto;
    min-width: 128px;
    min-height: 36px;
    padding: 4px 8px;
    border: 1.5px solid #ffffff22;
    border-radius: 10px;
    background: #0e1f33cc;
    text-align: center;
}
.ok-satiri-deger b {
    font-size: .88rem;
    white-space: nowrap;
    max-width: 100%;
}
.ok-satiri-deger small { font-size: .68rem; opacity: .7; }

/* Oklu ayar satirlarinin panelı: referans tasarimdaki cerceveli kutu. */
.ok-ayar-paneli {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1.5px solid #ffffff1f;
    border-radius: 14px;
    background: #0b1a2bb3;
    box-shadow: inset 0 1px #ffffff14;
}
.ok-ayar-paneli .ok-satiri + .ok-satiri { border-top: 1px solid #ffffff12; }

/* Butonun altindaki anlik cevrimici sayisi. */
.hemen-oyna-sayac {
    margin-top: 2px;
    font-weight: 700;
    opacity: .9;
    font-size: .72rem;
}

/* Masadaki oyuncu kartinda hesap ozeti: puan, ne zamandan beri oynuyor,
   kac odul. Uc kutu yan yana; dar ekranda da tasmaz cunku esit paylasirlar. */
.oyuncu-karti-ozet {
    display: flex;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
}
.oyuncu-karti-ozet span {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 4px;
    border: 1px solid #ffffff1f;
    border-radius: 10px;
    background: #0e1f33b3;
}
.oyuncu-karti-ozet b { font-size: .86rem; line-height: 1.1; }
.oyuncu-karti-ozet small { font-size: .62rem; opacity: .72; }
.oyuncu-karti-yukleniyor { opacity: .7; }
.oyuncu-karti-oduller {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
}
.oyuncu-karti-odul {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    padding: 3px 7px;
    border: 1px solid #f0d46d55;
    border-radius: 999px;
    background: #3c2b0666;
    color: #ffe9a3;
    font-size: .66rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oyuncu-karti-odul b { color: #ffd45e; }

/* Oyuncu kartindaki cip rozeti. Ust banttaki rozetin aynisi kullanilir;
   yalniz yuksekligi banttaki degiskene bagli olmasin diye sabitlenir. */
.oyuncu-karti-cip-satiri {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}
.oyuncu-karti-cip {
    height: 32px;
    padding: 0 14px;
    font-size: .95rem;
    cursor: default;
}

/* Ayarlar ekrani: baslikli paneller. Yedi ayar duz liste halindeydi; artik
   Gorunum / Ses / Cihaz basliklari altinda gruplu duruyor. Genis ekranda
   (yatay telefon ve masaustu) iki sutuna aciliyor, dar ekranda alt alta. */
.ayar-paneller {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
}
.ayar-paneli {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1.5px solid #ffffff1f;
    border-radius: 14px;
    background: #0b1a2b8c;
    box-shadow: inset 0 1px #ffffff14;
}
.ayar-paneli > h4 {
    margin: 0 0 2px;
    color: #9fd7ff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
/* Panel icindeki satirlar kendi cercevesini birakir; cerceve artik panelde. */
.ayar-paneli .accessibility-setting {
    border-color: #ffffff14;
    background: #0e1f3366;
}

/* KISA EKRAN (yatay telefon): ayarlar penceresi ekrana sigsin.
   Olculdu: 853x384 gorunumde kart 360 piksele sigiyor ama icerik 410 piksel
   tutuyordu; CIHAZ bolumu ve ses seviyesi satiri ekranin altinda kaliyor,
   oyuncu gormek icin kaydirmak zorunda kaliyordu. Burada icerik SILINMIYOR,
   yalnizca bosluklar ve yazi olculeri daraltiliyor. */
@media (max-height: 460px) {
    .game-settings-backdrop { padding: 6px; }
    .game-settings-card { max-height: calc(100dvh - 12px); border-radius: 12px; }
    .game-settings-card > header { gap: 7px; padding: 6px 10px; }
    .game-settings-card > header strong { font-size: .72rem; }
    .game-settings-card > header small { font-size: .44rem; }
    .game-settings-card > header button { width: 22px; height: 22px; font-size: .85rem; }
    .settings-gear { font-size: .95rem; }
    .ayar-paneller { gap: 7px; }
    .ayar-paneli { gap: 3px; padding: 6px 7px; border-radius: 11px; }
    .ayar-paneli > h4 { margin: 0; font-size: .58rem; letter-spacing: .1em; }
    .accessibility-setting {
        width: calc(100% - 8px);
        margin: 4px;
        padding: 5px 8px;
        border-radius: 9px;
    }
    .accessibility-setting b { font-size: .6rem; }
    .accessibility-setting small { font-size: .42rem; line-height: 1.25; }
    .accessibility-setting > span { gap: 1px; }
}

@media (min-width: 720px) {
    .ayar-paneller { grid-template-columns: 1fr 1fr; align-items: start; }
    /* Ses paneli dort satirla en uzunu; tek basina sag sutunu kaplasin. */
    .ayar-paneller > .ayar-paneli:nth-child(2) { grid-row: span 2; grid-column: 2; }
    .ayar-paneller > .ayar-paneli:nth-child(1) { grid-column: 1; }
    .ayar-paneller > .ayar-paneli:nth-child(3) { grid-column: 1; }
}

/* HEMEN OYNA satiri: dugme ve sagindaki cark. Cark ayni yukseklikte durur,
   dugmenin genisligini daraltmaz. */
/* HEMEN OYNA satirin TAMAMINI kaplar; ayar carki kendi sutununda degil,
   dugmenin sag alt kosesinde kucuk bir rozet gibi durur. Eskiden cark
   92 piksellik ayri bir sutundaydi ve ana dugmeyle neredeyse esit
   agirlikta goruntu veriyordu. */
.hemen-oyna-satiri {
    position: relative;
    width: 100%;
    /* Asagidaki kartlarla ayni bosluk. */
    margin: 0 0 11px;
}
.hemen-oyna-satiri .hemen-oyna-dugmesi { width: 100%; }
/* Cark, HEMEN OYNA ile ayni satirda duruyor. Ikisi de parlak yesil olunca
   satir iki esit agirlikta blok gibi goruntu veriyordu; cark artik ayni
   lacivert cerceveyi kullaniyor ve yesil yalniz ana dugmede kaliyor. */
/* Ayar carki: HEMEN OYNA'nin sag alt kosesinde kucuk bir rozet. Dugmenin
   USTUNDE durur (z-index), ama ana dugmeye basmayi engellemeyecek kadar
   kucuktur ve yazinin uzerine gelmez. */
.hemen-oyna-cark {
    position: absolute;
    right: 9px;
    bottom: 9px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1.5px solid #ffffff5c;
    border-radius: 11px;
    color: #eafff2;
    background: #0a3a1dc4;
    box-shadow: 0 3px 8px #00230f80, inset 0 1px #ffffff3d;
    line-height: 1;
}
.hemen-oyna-cark:active { transform: translateY(1px); }
.hemen-oyna-cark svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 1px #00230f80);
}

/* Uygulama surumu: kullanici adi satirinin sag ucunda, kendi hucresinde. */
.account-version {
    grid-area: surum;
    justify-self: end;
    align-self: end;
    padding-right: 2px;
    color: #9fd7ff;
    font-size: .62rem;
    font-weight: 700;
    opacity: .75;
    white-space: nowrap;
}


/* ============================================================
   PUAN KAMPANYASI ODUL PENCERESI
   Yoneticinin hazirladigi temali odul. Sahne kismi temaya gore
   degisir (ramazan: hilal ve cami, yilbasi: kar ve agac...),
   kartin govdesi her temada ayni kalir ki yeni tema eklemek
   yalniz renk ve sahne isi olsun.
   ============================================================ */
.kampanya-fon {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: #02121bdd;
    backdrop-filter: blur(6px);
}
.kampanya-karti {
    position: relative;
    width: min(420px, 92vw);
    max-height: 92vh;
    overflow: hidden auto;
    padding: 0 20px 20px;
    border: 2px solid var(--kampanya-kenar, #ffd96a);
    border-radius: 22px;
    color: #f2fbff;
    background: linear-gradient(180deg, var(--kampanya-ust, #0d3449), var(--kampanya-alt, #041824));
    box-shadow: 0 22px 60px #000b, 0 0 32px var(--kampanya-isik, #ffd96a55);
    text-align: center;
}
.kampanya-karti > small {
    display: block;
    margin-top: 14px;
    color: var(--kampanya-kenar, #ffd96a);
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .14em;
}
.kampanya-karti h2 {
    margin: 6px 0 0;
    color: #fff;
    font-size: 1.12rem;
    font-weight: 950;
}
.kampanya-metin {
    margin: 8px 0 0;
    color: #cfe7f2;
    font-size: .74rem;
    line-height: 1.45;
}
/* Bilgilendirme metni uzun olabilir. Kendi icinde kayar ki "Anladim"
   dugmesi ekranin disinda kalmasin; satir sonlari da korunur, yonetici
   paragraf yazabilsin. */
.kampanya-duyuru-metin {
    max-height: 38vh;
    overflow-y: auto;
    padding-right: 4px;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* Sahne kartin tam genisligini kaplar; kartin ust kosesine oturur. */
.kampanya-sahne {
    margin: 0 -20px;
    line-height: 0;
}
.kampanya-sahne svg { width: 100%; height: auto; display: block; }
/* Yuklenen gorsel: 2:1 bir pencereye oturtulur ve kirpilir, boylece her
   boyuttaki fotograf kartin ustunde ayni yeri kaplar.
   Zemin temanin rengiyle dolu: gorsel bir sebeple gec gelirse bos beyaz
   kutu degil, kartla uyumlu bir alan gorunur ve yerlesim hic oynamaz. */
.kampanya-sahne-gorsel {
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: linear-gradient(160deg, var(--kampanya-ust, #0d3449), var(--kampanya-alt, #041824));
}
.kampanya-sahne-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: kampanyaGorselAcilis .32s ease-out;
}
@keyframes kampanyaGorselAcilis { from { opacity: 0; } to { opacity: 1; } }
/* Pencere acilmadan indirmeyi baslatan gorunmez resim. */
.kampanya-onyukleme {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Isik huzmesi: diger odul pencereleriyle ayni dil. */
.kampanya-isinlar {
    position: absolute;
    inset: -40% -40% auto -40%;
    height: 180%;
    /* TEKRARLAYAN gradyan: duz conic-gradient tek bir dilim ciziyordu ve
       kartin arkasinda tek uzun bir carkifelek kolu donuyor gibi duruyordu.
       Acilar gunluk bonusun .daily-reward-rays kuralindakiyle ayni (7/18
       derece), yani iki pencerede de ayni gunes isini goruluyor. Renk tema
       degiskeninden geliyor ki kampanya kendi rengini korusun. */
    background: repeating-conic-gradient(from 0deg, var(--kampanya-isik, #ffd96a33) 0 7deg, transparent 7deg 18deg);
    animation: kampanyaIsin 16s linear infinite;
    pointer-events: none;
    opacity: .28;
}
@keyframes kampanyaIsin { to { transform: rotate(360deg); } }

.kampanya-odul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
    padding: 10px 14px;
    border: 1px solid #ffffff2b;
    border-radius: 14px;
    background: #ffffff12;
}
.kampanya-odul span { font-size: 1.5rem; }
.kampanya-odul b { color: #ffe9a6; font-size: 1.5rem; font-weight: 950; }
.kampanya-odul em { color: #bcd9e6; font-size: .7rem; font-style: normal; }

.kampanya-al {
    width: 100%;
    margin-top: 14px;
    min-height: 46px;
    border-radius: 14px;
    font-size: .82rem;
    font-weight: 950;
}
.kampanya-not {
    display: block;
    margin-top: 8px;
    color: #a9c9d6;
    font-size: .62rem;
}
.kampanya-sonuc {
    margin-top: 14px;
    padding: 10px;
    border: 1px solid #8ef0b6aa;
    border-radius: 12px;
    color: #c9ffe2;
    background: #0f4d35a8;
    font-size: .76rem;
}

/* --- Temalar: yalnizca renk degiskenleri --- */
.kampanya-ramazan { --kampanya-kenar: #ffd96a; --kampanya-ust: #0d2d46; --kampanya-alt: #04161f; --kampanya-isik: #ffd96a44; }
.kampanya-bayram  { --kampanya-kenar: #ff9f8c; --kampanya-ust: #123b57; --kampanya-alt: #06202e; --kampanya-isik: #ff9f8c44; }
.kampanya-yilbasi { --kampanya-kenar: #9ef0ff; --kampanya-ust: #0c3449; --kampanya-alt: #041a26; --kampanya-isik: #9ef0ff44; }
.kampanya-aksam   { --kampanya-kenar: #ffb46a; --kampanya-ust: #3a2550; --kampanya-alt: #180e26; --kampanya-isik: #ffb46a44; }
.kampanya-kahvehane { --kampanya-kenar: #e0bc63; --kampanya-ust: #3a2819; --kampanya-alt: #1b110b; --kampanya-isik: #e0bc6344; }
.kampanya-kutlama { --kampanya-kenar: #ffd96a; --kampanya-ust: #123b57; --kampanya-alt: #06202e; --kampanya-isik: #ffd96a44; }
.kampanya-hosgeldin { --kampanya-kenar: #9effc4; --kampanya-ust: #0f4034; --kampanya-alt: #052019; --kampanya-isik: #9effc444; }

/* --- Sahne hareketleri. Hepsi kisa ve dusuk maliyetli: eski
       telefonlarda da pencere acilirken takilmasin. --- */
.kampanya-yildiz { animation: kampanyaYildiz 2.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * .17s); }
@keyframes kampanyaYildiz { from { opacity: .25; } to { opacity: 1; } }
.kampanya-hilal { animation: kampanyaHilal 4.5s ease-in-out infinite alternate; transform-origin: 181px 39px; }
@keyframes kampanyaHilal { from { filter: drop-shadow(0 0 2px #ffd96a88); } to { filter: drop-shadow(0 0 9px #ffd96a); } }
.kampanya-balon { animation: kampanyaBalon 3.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * .22s); }
@keyframes kampanyaBalon { from { transform: translateY(3px); } to { transform: translateY(-7px); } }
.kampanya-kar { animation: kampanyaKar 3s linear infinite; animation-delay: calc(var(--i) * .19s); }
@keyframes kampanyaKar { from { transform: translateY(-8px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(14px); opacity: 0; } }
.kampanya-sus { animation: kampanyaSus 1.9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * .13s); }
@keyframes kampanyaSus { from { opacity: .45; } to { opacity: 1; } }
/* Aksam: gunes usul usul parlar, pencereler sirayla yanar, kuslar suzulur. */
.kampanya-gunes { animation: kampanyaGunes 5s ease-in-out infinite alternate; }
@keyframes kampanyaGunes { from { filter: drop-shadow(0 0 4px #ffd98a66); } to { filter: drop-shadow(0 0 14px #ffd98a); } }
.kampanya-pencere { animation: kampanyaPencere 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * .11s); }
@keyframes kampanyaPencere { from { opacity: .3; } to { opacity: 1; } }
.kampanya-kus { animation: kampanyaKus 7s ease-in-out infinite alternate; }
@keyframes kampanyaKus { from { transform: translateX(-6px); } to { transform: translateX(6px); } }

/* Dusuk performans kipinde sahne durur; pencere yine acilir. */
html.low-perf .kampanya-isinlar,
html.low-perf .kampanya-yildiz,
html.low-perf .kampanya-hilal,
html.low-perf .kampanya-balon,
html.low-perf .kampanya-kar,
html.low-perf .kampanya-sus,
html.low-perf .kampanya-gunes,
html.low-perf .kampanya-pencere,
html.low-perf .kampanya-kus { animation: none; }


/* ============================================================
   ODULLER DUGMESI VE BEKLEYEN ODUL LISTESI
   ============================================================ */
/* Ana ekranda, HEMEN OYNA'nin hemen altinda. Yalniz alinacak bir
   sey varken ciziliyor; bos dugme yer kaplamasin. */
.oduller-dugmesi {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    border: 2px solid #ffd96a;
    border-radius: 16px;
    color: #fff8df;
    background: linear-gradient(135deg, #6b4a12, #b4821f 45%, #6b4a12);
    box-shadow: 0 8px 22px #0007, inset 0 1px #fff4;
    text-align: left;
}
/* Yuzeyden gecen parilti: "burada alinacak bir sey var" demek icin. */
.oduller-parilti {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, #fff6 48%, transparent 58%);
    transform: translateX(-120%);
    animation: odulParilti 2.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes odulParilti { 0%,55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Dugmenin solunda ucusan cipler. */
.oduller-cipler { position: relative; flex: 0 0 42px; height: 38px; }
.oduller-cipler i {
    position: absolute;
    bottom: 4px;
    left: calc(var(--i) * 7px);
    width: 16px;
    height: 16px;
    border: 2px solid #fff3b0;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ffe9a6, #d99b16 62%, #a86f09);
    box-shadow: 0 2px 5px #0006;
    animation: odulCip 2.2s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * .13s);
}
@keyframes odulCip { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-7px) rotate(6deg); } }

.oduller-metin { flex: 1 1 auto; display: grid; gap: 1px; min-width: 0; }
.oduller-metin b { font-size: .86rem; font-weight: 950; letter-spacing: .04em; }
.oduller-metin small { color: #ffeeb8; font-size: .6rem; }
.oduller-rozet {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    color: #fff;
    background: #d8382e;
    box-shadow: 0 0 0 2px #ffffff55;
    font: 950 .72rem/1 Arial, sans-serif;
}

/* Liste penceresi. */
.odul-listesi-fon {
    position: fixed;
    inset: 0;
    z-index: 11900;
    display: grid;
    place-items: center;
    padding: 16px;
    background: #02121bdd;
    backdrop-filter: blur(5px);
}
.odul-listesi-karti {
    width: min(420px, 94vw);
    max-height: 86vh;
    overflow-y: auto;
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 2px solid #ffd96a;
    border-radius: 18px;
    color: #eafaff;
    background: linear-gradient(170deg, #0d3449, #041824);
    box-shadow: 0 20px 56px #000b;
}
.odul-listesi-karti > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.odul-listesi-karti > header strong { color: #ffe9a6; font-size: .95rem; }
.odul-listesi-bos { margin: 6px 0; color: #9fc5d0; font-size: .74rem; }
.odul-satiri {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 11px;
    border: 1px solid #ffffff2b;
    border-radius: 13px;
    color: #eafaff;
    background: #ffffff10;
    text-align: left;
}
.odul-satiri:active { transform: scale(.985); }
.odul-satiri-simge { flex: 0 0 auto; font-size: 1.35rem; }
.odul-satiri-metin { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.odul-satiri-metin b { font-size: .8rem; overflow-wrap: anywhere; }
.odul-satiri-metin small { color: #9fc5d0; font-size: .6rem; }
.odul-satiri-tutar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #14250a;
    background: linear-gradient(180deg, #ffe07a, #d9a21c);
    font-size: .74rem;
    font-weight: 950;
}
.odul-satiri-tutar.duyuru { color: #eafaff; background: linear-gradient(180deg, #3a7f9a, #16455a); }

/* Odul alindiginda: konfeti ve parilti. */
.kampanya-karti > *:not(.kampanya-isinlar):not(.kampanya-konfeti):not(.kampanya-parilti) {
    position: relative;
    z-index: 2;
}
/* DIKKAT: CSS calc icinde "%" MODULO DEGIL, yuzde birimidir.
   "calc((var(--i) * 37) % 100)" gibi bir yazim gecersizdir; tarayici
   tum bildirimi atar ve oge konumsuz, animasyonsuz kalir. Bu yuzden
   dagilim modulo olmadan, dogrudan --i ile olculuyor. */
.kampanya-konfeti { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
/* Dagilim Razor tarafindan taneye yaziliyor; bkz. .reward-confetti i. */
.kampanya-konfeti i {
    position: absolute;
    top: -16%;
    left: var(--x);
    width: 7px;
    height: 13px;
    border-radius: 2px;
    background: hsl(var(--h) 90% 62%);
    animation: kampanyaKonfeti var(--s) linear infinite;
    animation-delay: var(--g);
}
@keyframes kampanyaKonfeti {
    from { transform: translateY(0) rotate(0deg); opacity: 1; }
    to { transform: translateY(620px) rotate(var(--r)); opacity: .8; }
}
.kampanya-parilti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kampanya-parilti i {
    position: absolute;
    left: calc(7% + var(--i) * 9%);
    top: calc(16% + var(--i) * 6%);
    width: 11px;
    height: 11px;
    background: #fff6c9;
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    animation: kampanyaIsilti 1.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * .17s);
}
/* Tek/cift sirayla asagi-yukari dagilsin, hepsi tek capraz uzerinde durmasin. */
.kampanya-parilti i:nth-child(even) { top: calc(70% - var(--i) * 4%); }
@keyframes kampanyaIsilti {
    0%, 100% { opacity: 0; transform: scale(.4); }
    45% { opacity: 1; transform: scale(1); }
}
html.low-perf .oduller-parilti,
html.low-perf .oduller-cipler i,
html.low-perf .kampanya-konfeti i,
html.low-perf .kampanya-parilti i { animation: none; }


/* ============================================================
   ODUL ALINDIGINDA KUTLAMA
   Konfeti kartin disina, tum ekrana saciliyor; kart kendi
   icinde ayrica parliyor. Hepsi yalniz "alindi" aninda cizilir.
   ============================================================ */
/* Tum ekran konfetisi. Kartin ARKASINDA (z-index 1 < kart 2) durur ki
   yazilarin onune gecip okumayi zorlastirmasin. */
.kampanya-konfeti-tam {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.kampanya-konfeti-tam i {
    position: absolute;
    top: -10%;
    left: calc(var(--i) * 1.7%);
    width: 8px;
    height: 14px;
    border-radius: 2px;
    background: hsl(calc(var(--i) * 37) 92% 62%);
    box-shadow: 0 0 6px #ffffff4d;
    /* Gecikme adimi (.37s) sure (~2.6s) ile kucuk bir tam katsayi
       olusturmaz: yan yana duran iki konfeti dikeyde birbirinden cok uzak
       dusuyor ve yagmur tek bir capraz hat olmaktan cikip daginik goruneyor.
       Sure de taneden taneye degistigi icin dizilim zamanla hic tekrarlamaz. */
    animation: kampanyaKonfetiTam calc(2.4s + var(--i) * .035s) linear infinite;
    animation-delay: calc(var(--i) * -.37s);
}
/* Sekil ve boy cesitlensin: hepsi ayni dikdortgen olmasin. */
.kampanya-konfeti-tam i:nth-child(3n) { width: 11px; height: 11px; border-radius: 50%; }
.kampanya-konfeti-tam i:nth-child(4n) { height: 19px; }
.kampanya-konfeti-tam i:nth-child(5n) { width: 6px; height: 6px; border-radius: 50%; }
@keyframes kampanyaKonfetiTam {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(112vh) rotate(720deg); }
}

/* Alindigi anda ekranin ortasindan yayilan isik halkasi. */
.kampanya-patlama {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6c9cc, #ffd96a55 45%, transparent 70%);
    animation: kampanyaPatlama .9s ease-out forwards;
    pointer-events: none;
}
@keyframes kampanyaPatlama {
    from { opacity: .95; transform: scale(.3); }
    to { opacity: 0; transform: scale(7); }
}

/* Kart konfetinin ONUNDE dursun. */
.kampanya-karti { z-index: 2; }

/* Kutlamada fon biraz isinir. */
.kampanya-fon.kutlama { background: radial-gradient(circle at 50% 42%, #4a3a12e8, #02121bee 68%); }

/* Alindiginda kart: kisa bir ziplama, kenarda nabiz gibi isik ve
   yuzeyden gecen parilti. */
.kampanya-karti.alindi { animation: kampanyaKartCanlan .55s cubic-bezier(.2, .9, .25, 1.2); }
@keyframes kampanyaKartCanlan {
    from { transform: scale(.94); }
    60% { transform: scale(1.025); }
    to { transform: scale(1); }
}
.kampanya-karti.alindi::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(104deg, transparent 36%, #ffffff5e 47%, transparent 58%);
    transform: translateX(-120%);
    animation: kampanyaYuzeyParilti 2.6s ease-in-out .35s infinite;
    pointer-events: none;
}
@keyframes kampanyaYuzeyParilti {
    0%, 52% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}
.kampanya-karti.alindi {
    box-shadow: 0 22px 60px #000b, 0 0 32px var(--kampanya-isik, #ffd96a55),
                0 0 0 1px var(--kampanya-kenar, #ffd96a);
    animation-name: kampanyaKartCanlan, kampanyaKenarNabiz;
    animation-duration: .55s, 1.9s;
    animation-timing-function: cubic-bezier(.2, .9, .25, 1.2), ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-direction: normal, alternate;
}
@keyframes kampanyaKenarNabiz {
    from { box-shadow: 0 22px 60px #000b, 0 0 20px var(--kampanya-isik, #ffd96a55), 0 0 0 1px var(--kampanya-kenar, #ffd96a); }
    to { box-shadow: 0 22px 60px #000b, 0 0 46px var(--kampanya-kenar, #ffd96a), 0 0 0 3px var(--kampanya-kenar, #ffd96a); }
}
/* Alindiginda isinlar belirginlesir. */
.kampanya-karti.alindi .kampanya-isinlar { opacity: .95; animation-duration: 7s; }

html.low-perf .kampanya-konfeti-tam i,
html.low-perf .kampanya-patlama,
html.low-perf .kampanya-karti.alindi,
html.low-perf .kampanya-karti.alindi::before { animation: none; }


/* ============================================================
   ODUL MERKEZI SEKMESI
   Radyo kapatilinca sekme cubugunda bosalan yuvada duruyor.
   Reklam izleyip puan kazanilan yer; hak varken yanip soner.
   ============================================================ */
/* Sekme cubugundaki digerleri koyu mavi; odul merkezi ALTIN zeminle
   ayrisiyor ki goze ilk o carpsin. */
.lobby-main-tabs .odul-merkezi-tab {
    position: relative;
    color: #2d1d02;
    background: linear-gradient(180deg, #ffd960, #e0a51d 62%, #b87f10);
    box-shadow: 0 3px 10px #00141e99, inset 0 1px #fff9;
    text-shadow: 0 1px 0 #ffeeb6;
}
.lobby-main-tabs .odul-merkezi-tab .odul-merkezi-simge {
    /* Sekme simgeleri yuvarlak; bu kare cunku icinde klaket var.
       Altin zeminde koyu kutu: klaket ve cipler secilsin. */
    width: 34px;
    height: 34px;
    border: 2px solid #7a5208;
    border-radius: 10px;
    background: linear-gradient(180deg, #123e55, #06202e);
    box-shadow: inset 0 1px #ffffff35, 0 3px 7px #00000066;
}
.lobby-main-tabs .odul-merkezi-tab .odul-merkezi-simge svg { width: 26px; height: 26px; display: block; }
/* Hak varken: altin kenar, nabiz gibi isik ve saliniyan cipler. */
.lobby-main-tabs .odul-merkezi-tab.hazir {
    animation: odulMerkeziNefes 1.5s ease-in-out infinite;
}
.lobby-main-tabs .odul-merkezi-tab.hazir .odul-merkezi-simge {
    border-color: #fff0b8;
    box-shadow: inset 0 1px #ffffff45, 0 0 10px #fff2bf99;
}
.odul-merkezi-cip { animation: odulMerkeziCip 1.5s ease-in-out infinite alternate; transform-origin: 25px 24px; }
@keyframes odulMerkeziCip { from { transform: translateY(1px) rotate(-6deg); } to { transform: translateY(-2px) rotate(6deg); } }
/* Altin zeminde altin halka gorunmez; nabiz beyaz isikla atiyor. */
@keyframes odulMerkeziNefes {
    0%, 100% { box-shadow: 0 3px 10px #00141e99, inset 0 1px #fff9, 0 0 0 0 #ffffff00; }
    50% { box-shadow: 0 3px 10px #00141e99, inset 0 1px #fff9, 0 0 0 4px #ffffff6b, 0 0 16px #ffd96acc; }
}
/* Sonuk hali YOK: odul merkezi kalici bir yer ve her zaman basilabiliyor.
   Daha once icerik bosken yariya soluyordu; oyuncu dugmenin kapali
   oldugunu sanip hic dokunmuyordu. */
/* Kalan hak sayisi: arkadas/mesaj sekmelerindeki rozetin aynisi. */
.lobby-main-tabs .odul-merkezi-tab > b {
    position: absolute;
    top: -3px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 1px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: #d8382e;
    font: 800 .46rem/14px Arial, sans-serif;
}
html.low-perf .lobby-main-tabs .odul-merkezi-tab.hazir,
html.low-perf .odul-merkezi-cip { animation: none; }
/* Odul merkezindeki reklam satiri: digerlerinden ayrilsin diye yesil. */
.odul-satiri-reklam { border-color: #8ef0b655; background: linear-gradient(135deg, #14563a66, #0b3a2866); }
.odul-satiri-reklam:disabled { opacity: .6; }
/* Lobi kartinda gecis sarti: puan yetse bile alt lobide yeterince mac
   oynanmadiysa burasi cikar. */
.ranked-lobby-sart {
    display: block;
    margin: 4px 0 0;
    padding: 5px 8px;
    border: 1px solid #ffd96a66;
    border-radius: 9px;
    color: #ffe9a6;
    background: #00000059;
    font-size: .54rem;
    font-weight: 800;
    line-height: 1.35;
}
/* Giris ekraninda "Yeni hesap olustur": sifre alaninin hemen altinda ve
   saga yasli. Kartin digerleri tam genislikte oldugu icin kendi satirinda
   duruyor; boylece hizasi sifre kutusunun sag kenariyla ayni. */
.auth-alt-row {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 2px;
}
.auth-alt-row .text-button {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 2px 0;
    font-size: .72rem;
    text-decoration: underline;
}
/* Acik masalar listesinde "daha fazla goster": liste yirmiser geliyor. */
.open-tables-more {
    width: 100%;
    min-height: 40px;
    margin-top: 2px;
    border: 1px solid #ffd86e66;
    border-radius: 11px;
    color: #ffe89a;
    background: #ffd86e1a;
    font-size: .66rem;
    font-weight: 800;
}
.open-tables-more:disabled { opacity: .6; }


/* ============================================================
   ANA EKRANDAKI UCLU KISAYOL SATIRI
   Favori oyun, Acik masalar, Gecmis oyunlar yan yana. Eskiden
   her biri tam genislikte ayri bir kartti ve ana ekranin
   yarisini kapliyordu.
   ============================================================ */
.ucluk-satiri {
    /* grid-auto-flow: column -> kac kart varsa satiri esit paylasirlar.
       Favori oyun yoksa kalan ikisi genisler, bosluk kalmaz. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    width: 100%;
    margin: 0 0 11px;
}
.ucluk-karti {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 3px;
    min-width: 0;
    padding: 11px 6px 10px;
    border: 1px solid #6ebbc966;
    border-radius: 14px;
    color: #dff1f7;
    background: linear-gradient(180deg, #0f4357, #072a3b);
    box-shadow: 0 5px 14px #00131e7a, inset 0 1px #ffffff26;
    text-align: center;
}
.ucluk-karti:active { transform: translateY(1px); }
.ucluk-karti:disabled { opacity: .55; }
.ucluk-simge { font-size: 1.35rem; line-height: 1; }
.ucluk-karti strong {
    font-size: .64rem;
    font-weight: 900;
    line-height: 1.2;
    /* Dar sutunda baslik iki satira sarabilsin, kesilmesin. */
    overflow-wrap: anywhere;
}
.ucluk-karti small {
    color: #9fc5d0;
    font-size: .5rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
/* Favori kart ayrisiyor: altin kenar ve yildiz rengi. */
.ucluk-favori { border-color: #ffd86e99; background: linear-gradient(180deg, #4a3a12, #22200c); }
.ucluk-favori .ucluk-simge { color: #ffd96a; }
.ucluk-favori strong { color: #ffe9a6; }
/* Acik masa sayisi rozeti. */
.ucluk-rozet {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: #d8382e;
    font: 800 .5rem/16px Arial, sans-serif;
    font-style: normal;
}


/* ============================================================
   BAGLANTI UYARISI
   Uygulama arka plana alininca baglanti kopabiliyor. Serit her
   ekranin ustunde durur (oyun icinde de lobide de) ve elle
   yeniden baglanma dugmesi verir.
   ============================================================ */
.baglanti-uyarisi {
    position: fixed;
    top: max(6px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    /* Odul pencerelerinin ve kilavuz turunun bile ustunde: baglanti yoksa
       o pencerelerdeki dugmeler zaten ise yaramiyor. */
    z-index: 14000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #ffb86b8c;
    border-radius: 13px;
    color: #fff3e2;
    background: linear-gradient(180deg, #6b2f18f2, #3d1a0df7);
    box-shadow: 0 10px 26px #000a;
}
.baglanti-nokta {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6a52;
    box-shadow: 0 0 0 0 #ff6a5280;
    animation: baglantiNabiz 1.4s ease-out infinite;
}
/* Deneniyorken sari ve daha hizli: "bir sey oluyor" hissi versin. */
.baglanti-uyarisi.deneniyor { border-color: #ffd96a8c; background: linear-gradient(180deg, #6b5518f2, #3d310df7); }
.baglanti-uyarisi.deneniyor .baglanti-nokta { background: #ffd96a; animation-duration: .8s; }
@keyframes baglantiNabiz {
    from { box-shadow: 0 0 0 0 #ff6a5285; }
    to { box-shadow: 0 0 0 9px #ff6a5200; }
}
.baglanti-metin { flex: 1 1 auto; display: grid; gap: 1px; min-width: 0; }
.baglanti-metin b { font-size: .72rem; font-weight: 900; }
.baglanti-metin small { color: #ffd9bd; font-size: .56rem; }
/* Masadan dusmeye kalan sure. Serit zaten uyari rengi; sayac ondan da
   belirgin olsun diye kendi hapinda ve yanip sonuyor. */
.baglanti-dusme-sayaci {
    justify-self: start;
    margin-top: 3px;
    padding: 2px 9px;
    border-radius: 999px;
    color: #2a0f02;
    background: #ffc46a;
    font: 900 .56rem/1.25 Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    animation: hazirCagri 1s ease-in-out infinite;
}
html.low-perf .baglanti-dusme-sayaci { animation: none; }
.baglanti-uyarisi button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #ffffff5c;
    border-radius: 10px;
    color: #2a1403;
    background: linear-gradient(180deg, #ffd27a, #f0a93c);
    font-size: .64rem;
    font-weight: 900;
}
.baglanti-uyarisi button:disabled { opacity: .65; }
html.low-perf .baglanti-nokta { animation: none; }
/* Yeni lobi kutlamasinda ikincil yol: oyuncu simdi gitmek istemiyorsa. */
.level-up-sonra {
    width: 100%;
    min-height: 36px;
    margin-top: 6px;
    border: 1px solid #ffffff33;
    border-radius: 11px;
    color: #cfe7f2;
    background: #ffffff12;
    font-size: .68rem;
    font-weight: 700;
}

/* Asagi cekip yenileme gostergesi. Ekranin ustunde, ortada; parmakla
   birlikte iner, esigi gecince yazi degisir, birakilinca doner. */
.asagi-cek-gosterge {
    position: fixed;
    top: calc(max(6px, env(safe-area-inset-top)) + 2px);
    left: 50%;
    z-index: 14500;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #7fd8e866;
    border-radius: 50%;
    background: linear-gradient(#0c3346f2, #06202ef2);
    box-shadow: 0 8px 22px #0009;
    opacity: 0;
    transform: translate(-50%, 0);
    pointer-events: none;
}
.asagi-cek-halka {
    width: 17px;
    height: 17px;
    border: 2px solid #5f93a4;
    border-top-color: transparent;
    border-radius: 50%;
    transition: border-color .15s ease;
}
/* Esik gecildi: birakilinca yenilenecek. Yazi yerine renk soyluyor. */
.asagi-cek-gosterge.hazir { border-color: #7fd8e8cc; }
.asagi-cek-gosterge.hazir .asagi-cek-halka { border-color: #8df0ff; border-top-color: transparent; }

/* Yenileme bitti. Halka kapanip onay isaretine donuyor; tazeleme cok hizli
   bitip degerler ayni geldiginde oyuncu "oldu mu" diye emin olamiyordu. */
.asagi-cek-gosterge.bitti { border-color: #7ce8a5cc; }
.asagi-cek-gosterge.bitti .asagi-cek-halka {
    width: 10px;
    height: 17px;
    border: 3px solid #8df3b4;
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 2px;
    transform: rotate(45deg) translate(-1px, -2px);
    animation: none;
}

/* Tazeleme OLMADI (ornegin internet yok). Oyuncunun "yenilendi" sanmamasi
   icin ayri bir isaret: kirmizi carpi. */
.asagi-cek-gosterge.olmadi { border-color: #f09a9acc; }
.asagi-cek-gosterge.olmadi .asagi-cek-halka {
    position: relative;
    width: 17px;
    height: 17px;
    border: 0;
    border-radius: 0;
    animation: none;
}
.asagi-cek-gosterge.olmadi .asagi-cek-halka::before,
.asagi-cek-gosterge.olmadi .asagi-cek-halka::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 17px;
    height: 3px;
    border-radius: 2px;
    background: #ffa8a8;
}
.asagi-cek-gosterge.olmadi .asagi-cek-halka::before { transform: rotate(45deg); }
.asagi-cek-gosterge.olmadi .asagi-cek-halka::after { transform: rotate(-45deg); }

/* Ard arda cok yenilendi, hareket bir sure kilitli. Hata degil bir bekletme,
   o yuzden kirmizi degil kehribar ve carpi degil duz cizgi. */
.asagi-cek-gosterge.kilitli { border-color: #f0cf7acc; }
.asagi-cek-gosterge.kilitli .asagi-cek-halka {
    width: 16px;
    height: 3px;
    border: 0;
    border-radius: 2px;
    background: #ffd98a;
    animation: none;
}
.asagi-cek-gosterge.doniyor .asagi-cek-halka { animation: asagi-cek-don .7s linear infinite; }
@keyframes asagi-cek-don { to { transform: rotate(360deg); } }

/* Yenileme kilidi seridi. Ana ekranda ShowNotice gorunmedigi icin kilit
   uyarisi kendi seridinde duruyor ve geri sayiyor. Hata degil bir bekletme:
   kirmizi degil kehribar. */
.yenileme-kilidi {
    position: fixed;
    /* Kamera kesigi ve durum cubugunun altinda kalsin: aksi halde delik
       yazinin uzerine denk gelip metni kapatabiliyor. */
    top: calc(max(8px, env(safe-area-inset-top)) + 4px);
    left: 50%;
    z-index: 14600;
    padding: 9px 16px;
    border: 1px solid #f0cf7a9e;
    border-radius: 999px;
    background: linear-gradient(#3a2f12f5, #1d1708f5);
    box-shadow: 0 10px 26px #000a, inset 0 1px #ffffff1f;
    color: #ffe6ad;
    font: 700 .74rem/1 Arial, sans-serif;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Ana ekrandaki bildirim. Oyun icindeki .game-notice masanin ustune denk
   gelmesin diye 4.5rem'de duruyor; ana ekranda ise ust band ve kamera
   kesigi var, bu yuzden guvenli alanin altina alindi. */
.game-notice.ana-ekran-bildirimi {
    /* top VE bottom birlikte verilirse oge ikisi arasinda gerilir; oyun ici
       kural bottom veriyor, bu yuzden top acikca auto yapiliyor. */
    top: auto;
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 22px);
    /* notice-from-self sinifi bildirimi saga yaslayip konusma kuyrugu
       ciziyor; ana ekranda isaret edilecek bir oyuncu yok, ortalaniyor. */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 14400;
    max-width: min(92vw, 30rem);
    font-size: .72rem;
}
.game-notice.ana-ekran-bildirimi::after { display: none; }

/* METIN SECIMI KAPALI.
   Oyun bir uygulama, metin belgesi degil. Tasa ya da bir yaziya uzun basinca
   secim tutamaklari ve "Kopyala / Paylas / Web'de ara" menusu cikiyordu;
   hem amator duruyor hem de surukleme hareketini boluyordu.
   Secim body'den miras aliniyor; gercekten yazi yazilan alanlar geri aciliyor
   ki oyuncu kullanici adini, sifresini ve geri bildirim metnini
   duzenleyebilsin, yapistirabilsin. */
body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
input,
textarea,
[contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
}

/* Bakim uyarisi. Sunucu birazdan yeniden baslayacak; oyun masasinda da ana
   ekranda da gorunur cunku asil magdur masadaki oyuncu. Baglanti seridinin
   ustunde durur: kesinti baslayinca ikisi ust uste gelmesin diye degil, bu
   uyari SEBEBI acikladigi icin once okunmali. */
.bakim-uyarisi {
    position: fixed;
    top: calc(max(6px, env(safe-area-inset-top)) + 2px);
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    z-index: 14800;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    border: 1px solid #f0cf7aa8;
    border-radius: 14px;
    background: linear-gradient(#3c2f10f5, #1b1407f5);
    box-shadow: 0 12px 30px #000a, inset 0 1px #ffffff22;
    color: #ffe6ad;
    pointer-events: none;
}
.bakim-uyarisi > span:last-child { display: grid; gap: 2px; min-width: 0; }
.bakim-uyarisi b { font: 900 .78rem/1.1 Arial, sans-serif; }
.bakim-uyarisi small { color: #e8cf9e; font-size: .64rem; line-height: 1.35; }
.bakim-nokta {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffd98a;
    box-shadow: 0 0 0 4px #ffd98a28;
    animation: bakim-nabiz 1.1s ease-in-out infinite;
}
@keyframes bakim-nabiz { 50% { opacity: .35; } }
/* Iade bilgisi uyarinin icinde ayri satirda ve vurgulu: masadaki oyuncunun
   kacirmamasi gereken kisim bu. */
.bakim-iade { display: block; margin-top: 3px; color: #a8f0bd; font-size: .64rem; font-weight: 800; }

/* Giris bedeli iade seridi. Bakim uyarisi "olacak"i, bu "oldu"yu anlatiyor:
   renk de ona gore yesil. Kendiliginden kaybolmaz, oyuncu kapatir - kesintiden
   donen oyuncu birkac saniyelik bir bildirimi kacirabilir. pointer-events
   aciktir cunku kapatma dugmesi var (bakim seridinde yok). */
.iade-seridi {
    position: fixed;
    top: calc(max(6px, env(safe-area-inset-top)) + 2px);
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    z-index: 14850;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    border: 1px solid #7ce6a2a8;
    border-radius: 14px;
    background: linear-gradient(#10321df5, #07180ef5);
    box-shadow: 0 12px 30px #000a, inset 0 1px #ffffff22;
    color: #c8f7d8;
}
.iade-seridi-ikon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1e5c38;
    box-shadow: 0 0 0 3px #7ce6a228;
    color: #b6ffd0;
    font: 900 .9rem/1 Arial, sans-serif;
}
.iade-seridi-metin { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.iade-seridi-metin > b { font: 900 .78rem/1.1 Arial, sans-serif; color: #e4fff0; }
.iade-seridi-metin small { color: #a9ddbd; font-size: .64rem; line-height: 1.35; }
.iade-seridi-metin small b { color: #9affc0; font-size: .66rem; font-weight: 900; }
.iade-seridi-kapat {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid #7ce6a24d;
    border-radius: 9px;
    background: #0d2a19;
    color: #a9ddbd;
    font: 900 1rem/1 Arial, sans-serif;
    cursor: pointer;
}
.iade-seridi-kapat:disabled { opacity: .5; cursor: default; }

/* Sozlesme onay ekrani. Kabul edilmeden oyuna girilemez; bu yuzden tam ekran
   ortu, kapatma carpisi yok ve disariya dokunmak kapatmiyor. Z-index en ustte:
   bakim seridi ve iade seridi dahil her seyin onunde durmali. */
.sozlesme-ortu {
    position: fixed; inset: 0; z-index: 2147483000;
    display: grid; place-items: center;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    background: #03151fef; backdrop-filter: blur(3px);
    overflow-y: auto;
}
.sozlesme-karti {
    width: min(460px, 100%);
    padding: 18px 18px 16px;
    border: 1px solid #2b7186; border-radius: 18px;
    background: linear-gradient(#0b4059, #06293a);
    box-shadow: 0 18px 55px #00141f99;
    color: #f4f8fa;
}
.sozlesme-karti h2 { margin: 0 0 6px; color: #f4cd55; font-size: 1.1rem; }
.sozlesme-tarih { margin: 0 0 8px; color: #9fc2cf; font-size: .66rem; }
.sozlesme-giris { margin: 0 0 10px; color: #cfe6ee; font-size: .78rem; line-height: 1.5; }
.sozlesme-maddeler { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 7px; }
.sozlesme-maddeler li { color: #dcecf2; font-size: .74rem; line-height: 1.5; }
.sozlesme-maddeler b { color: #fff; }
.sozlesme-baglanti { margin: 0 0 12px; color: #9fc2cf; font-size: .72rem; }
.sozlesme-baglanti a { color: #7ee7ff; }
.sozlesme-hata { margin: 0 0 10px; padding: 8px 10px; border-radius: 9px; background: #8b303959; color: #ffd7d7; font-size: .72rem; }
.sozlesme-dugmeler { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.sozlesme-ret { padding: .62rem .6rem; border: 1px solid #ffffff2e; border-radius: 11px; background: #0c2f41; color: #c9dde5; font-size: .76rem; font-weight: 700; }
.sozlesme-kabul { padding: .62rem .6rem; border: 1px solid #7ad9aa66; border-radius: 11px; background: linear-gradient(#1e5c38, #123c25); color: #e4fff0; font-size: .78rem; font-weight: 800; }
.sozlesme-ret:disabled, .sozlesme-kabul:disabled { opacity: .55; }
.sozlesme-not { display: block; margin-top: 9px; color: #8fb2bb; font-size: .66rem; text-align: center; }

/* Masadaki sohbet seridi. Arkasi SAYDAM ama yazi okunakli: koyu yari saydam
   zemin + hafif bulaniklik + yazi golgesi. pointer-events kapali, yani masayi
   ne gizler ne de dokunmaya engel olur. Balonlar iki saniye durup kaybolur;
   animasyon tam o surede bitiyor ki yok olmadan once sonsun. */
/* Serit SOL ALTTA, sohbet dugmesinin hemen ustunde: mesajin geldigi yerle
   ayni koseye bakiyor. Sohbet dugmesi 50px'te ve 34px boyunda, yani ustu
   84px; serit 92px'ten basliyor.
   pointer-events KAPALI - serit tasin ustune denk gelse bile dokunus altindaki
   tasa gider, oyun hic engellenmez. */
.sohbet-seridi {
    position: fixed;
    left: 6px;
    bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px));
    z-index: 72;
    display: grid; gap: 6px; justify-items: start;
    width: min(62vw, 22rem);
    pointer-events: none;
}
.sohbet-balonu {
    position: relative;
    max-width: 100%;
    padding: .42rem .82rem .46rem;
    border: 1px solid #ffffff2e;
    /* Sol ALT kose kare: kuyruk oradan ciktigi icin yuvarlak kalirsa
       kuyrukla govde arasinda bosluk goruluyordu. */
    border-radius: 15px 15px 15px 0;
    background: #04202cb8;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: #eaf7fb;
    font-size: .76rem; line-height: 1.38;
    text-shadow: 0 1px 2px #000b;
    box-shadow: 0 6px 18px #00000073;
    overflow-wrap: anywhere;
    animation: sohbet-balonu-omru 4s ease-out forwards;
}
.sohbet-balonu > b { margin-right: .34rem; color: #9be7ff; font-weight: 800; }
/* Balonun SOL ALT kosesinden asagiya sarkan kuyruk: konusma balonu seklini
   veren sey. Ucgenin hipotenusu 45 derece, yani kuyruk sola-asagiya yatik.
   Tek renk kullaniliyor; yari saydam zeminde ikinci bir cizgi koymak kuyrugu
   govdeden koyu gosteriyordu. */
.sohbet-balonu::after {
    content: ""; position: absolute;
    left: 0; bottom: -10px;
    width: 0; height: 0;
    border-top: 10px solid #04202cb8;
    border-right: 10px solid transparent;
}
@keyframes sohbet-balonu-omru {
    0%   { opacity: 0; transform: translateY(6px); }
    6%   { opacity: 1; transform: none; }
    88%  { opacity: 1; }
    100% { opacity: 0; }
}


/* "@" yazilinca cikan masadaki oyuncu listesi. Yazi alaninin hemen ustunde
   durur; tek dokunusla ad metne eklenir. */
.etiket-onerileri { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 8px 0; }
.etiket-onerileri button {
    display: inline-flex; align-items: center; gap: 5px;
    padding: .26rem .6rem;
    border: 1px solid #7ee7ff4d; border-radius: 999px;
    background: #0d3344; color: #d6f1fa;
    font-size: .7rem; font-weight: 700;
}
.etiket-onerileri button small {
    padding: 0 4px; border-radius: 4px;
    background: #63c8f5; color: #03202e;
    font-size: .55rem; font-weight: 900;
}




/* Masadaki odul listesi. Kucuk ve ustte: masayi kapatmasin, oyuncu bakip
   dokunup devam etsin. */
.masa-odul-ortu {
    position: fixed; inset: 0; z-index: 11050;
    display: grid; justify-items: center; align-content: start;
    padding: calc(var(--ust-band-yuksekligi) + 10px) 10px 10px;
    background: #02141cb0;
}
.masa-odul-kutusu {
    width: min(94vw, 330px);
    display: grid; gap: 5px;
    padding: 10px 10px 11px;
    border: 1px solid #ffd98a7a; border-radius: 16px;
    background: linear-gradient(#123244, #07202e);
    box-shadow: 0 16px 44px #000b;
    color: #eaf7fb;
}
.masa-odul-kutusu > header { display: flex; align-items: center; justify-content: space-between; }
.masa-odul-kutusu > header strong { color: #ffd96a; font-size: .84rem; }
.masa-odul-kapat {
    width: 26px; height: 26px; padding: 0;
    border: 1px solid #ffffff2e; border-radius: 50%;
    background: #0b2a39; color: #cfe6ee; font: 800 .9rem/1 Arial, sans-serif;
}
.masa-odul-ipucu { margin: 0 0 2px; color: #9fc2cf; font-size: .62rem; }
.masa-odul-satiri {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
    padding: .46rem .6rem;
    border: 1px solid #ffffff1f; border-radius: 11px;
    background: #0d2b3a; color: #eaf7fb;
    font-size: .72rem; text-align: left;
}
.masa-odul-satiri:disabled { opacity: .55; }
.masa-odul-satiri.duyuru { border-color: #7ee7ff3d; }
.masa-odul-simge { font-size: 1.1rem; }
.masa-odul-metin b { font-weight: 800; }
.masa-odul-tutar {
    display: inline-flex; align-items: center; gap: 4px;
    padding: .18rem .5rem;
    border-radius: 999px; background: #3a2a07; color: #ffe08a;
    font-size: .68rem; font-weight: 900; white-space: nowrap;
}

/* Kazanc aninda puan rozeti buyuyup eski boyuna doner ve bir an parlar.
   Cip akisi ekranin ortasindan geciyor, kazancin NEREYE gittigi belirsizdi;
   rozetin kendisi tepki verince goz oraya gidiyor. Yalniz KAZANCTA oynar. */
.ust-band-puan.kazanc {
    animation: ust-band-puan-kazanc .76s ease-out;
}
@keyframes ust-band-puan-kazanc {
    0%   { transform: scale(1);    border-color: #6d5a1f; box-shadow: none; }
    28%  { transform: scale(1.22); border-color: #9affc0; box-shadow: 0 0 16px #7ad9aa9e; }
    55%  { transform: scale(1.04); border-color: #9affc0; box-shadow: 0 0 10px #7ad9aa7a; }
    78%  { transform: scale(1.13); border-color: #9affc0; box-shadow: 0 0 14px #7ad9aa8a; }
    100% { transform: scale(1);    border-color: #6d5a1f; box-shadow: none; }
}

/* Odul rozeti puan rozetinin TAM ALTINDA. Sarmal yalnizca konumlandirma
   icin var; banda satir olarak eklendiginde rozet saga kayiyor ve asagi
   sarktigi icin ust ortadaki rakip kartinin uzerine biniyordu. */
/* Puan rozetinin sarmali DARALMAZ. Eskiden min-width: 0 vardi ve daralmasi
   da engellenmemisti: dar bantta sarmal icerigin altina cokuyor, icindeki puan
   rozeti kendi genisligini korudugu icin sarmaldan tasip komsu rozetin uzerine
   biniyordu (dikeyde dokuz haneli puanla olculdu: sarmal 51 piksel, rozet 115).
   Sikisma, zaten uc nokta ile kirpabilen ad ve lobi rozetlerine dusmeli. */
.ust-band-puan-sarmal { position: relative; display: inline-flex; flex: 0 0 auto; }
.ust-band-odul {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    z-index: 3;
    /* Band dokunuslari gecirir; rozetin kendisi acilmali. */
    pointer-events: auto;
    display: inline-flex; align-items: center; gap: 5px;
    overflow: hidden;
    height: calc(var(--ust-band-yuksekligi) + 2px);
    padding: 0 10px;
    border: 2px solid #ffd98a; border-radius: 999px;
    background: linear-gradient(180deg, #c78a16, #5c3e09);
    color: #fff3c4;
    font-size: calc(var(--ust-band-yazi) + .06rem);
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 5px 16px #00131ea8, 0 0 12px #ffcf6a5c;
    /* Nefes alir gibi: surekli ve belirgin, ama goz yormayacak hizda. */
    animation: ust-band-odul-nefes 1.7s ease-in-out infinite;
}
.ust-band-odul > span[aria-hidden]:not(.ust-band-odul-parilti) { font-size: 1.15em; }
.ust-band-odul > b { color: #fff8dd; font-weight: 900; }
.ust-band-odul:disabled { opacity: .6; animation: none; }
/* Uzerinden gecen isik. */
.ust-band-odul-parilti {
    position: absolute; top: 0; bottom: 0; left: -60%;
    width: 55%;
    background: linear-gradient(100deg, transparent, #fff8d9a1, transparent);
    animation: ust-band-odul-isik 2.4s ease-in-out infinite;
}
@keyframes ust-band-odul-nefes {
    0%, 100% { transform: translateX(-50%) scale(1);    box-shadow: 0 5px 16px #00131ea8, 0 0 10px #ffcf6a52; }
    50%      { transform: translateX(-50%) scale(1.11); box-shadow: 0 6px 20px #00131ea8, 0 0 22px #ffcf6ad1; }
}
@keyframes ust-band-odul-isik {
    0%, 55% { left: -60%; }
    100% { left: 115%; }
}

/* Perin sag ucundaki tastan TEK tas ayrilmak uzere secildi. Grup secimiyle
   karismasin diye farkli renk: yesil = tam per, kehribar = tek tas. */
.game-shell .rack-tile.single-armed:not(.dragging) {
    z-index: 75;
    outline: 2px solid #f0b350;
    outline-offset: 1px;
    animation: rackGroupArmed .2s ease-in-out 2 !important;
}

/* ---- Cikista geri bildirim penceresi -------------------------------------
   Cikis onayiyla ayni yerde ve ayni dilde durur ama kendi penceresidir.
   Gorsel ustte tam genislikte: pencere bir uyari degil, bir davet gibi
   gorunsun. "Oyuna don" en altta ve sade; oyuncu kapana kisildigini
   hissetmesin. */
.cikis-geri-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20050;
    display: grid;
    place-items: center;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
        max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    background: radial-gradient(circle at 50% 42%, #063b4a99, #000a12ee 70%);
    backdrop-filter: blur(7px);
    animation: exitConfirmFade .16s ease-out;
    overflow-y: auto;
}
.cikis-geri-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: min(360px, 100%);
    padding: 0 18px 16px;
    overflow: hidden;
    border: 1px solid #ffd86e9e;
    border-radius: 22px;
    color: #eefbff;
    text-align: center;
    background:
        radial-gradient(circle at 50% -6%, #ffd86e1f, transparent 58%),
        linear-gradient(165deg, #0d4a56f7, #05202ffb 62%, #071726fc);
    box-shadow: 0 20px 48px #000b, inset 0 1px #ffffff1f;
}
/* Gorsel kartin ust kenarina yapisir: yan bosluklari kart dolgusunu asar. */
.cikis-geri-gorsel {
    width: calc(100% + 36px);
    margin: 0 -18px 2px;
    display: block;
    aspect-ratio: 834 / 374;
    object-fit: cover;
    border-radius: 21px 21px 0 0;
}
.cikis-geri-card strong {
    font-size: 1.02rem;
    line-height: 1.3;
    color: #ffe9a8;
}
.cikis-geri-card p {
    margin: 0;
    font-size: .8rem;
    line-height: 1.5;
    color: #cfe7ef;
}
.cikis-geri-kutu {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #4a8796;
    border-radius: 12px;
    color: #eafaff;
    font: inherit;
    font-size: .84rem;
    line-height: 1.45;
    background: #02131bcc;
    resize: none;
}
.cikis-geri-kutu::placeholder { color: #7ea4b2; }
.cikis-geri-kutu:focus { outline: none; border-color: #ffd86e; }
.cikis-geri-hata { color: #ff9d94 !important; font-weight: 700; }
.cikis-geri-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    width: 100%;
    margin-top: 2px;
}
.cikis-geri-actions button {
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 13px;
    font: inherit;
    font-weight: 800;
    font-size: .86rem;
}
.cikis-geri-gonder {
    color: #06281c;
    background: linear-gradient(180deg, #7ef0ad, #2fa772);
    box-shadow: 0 6px 16px #0b3c2a66, inset 0 1px #ffffff80;
}
.cikis-geri-cik {
    color: #dff2f8;
    background: #ffffff16;
    box-shadow: inset 0 0 0 1px #ffffff2b;
}
.cikis-geri-actions button:disabled { opacity: .6; }
/* Oyuna donus bir dugme degil, bir cikis yolu gibi dursun. */
.cikis-geri-kal {
    margin-top: 2px;
    padding: 6px 10px;
    border: 0;
    border-radius: 10px;
    color: #9fc5d0;
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    background: transparent;
    text-decoration: underline;
}

/* ---- Ana ekranda geri bildirim ve degerlendirme -------------------------- */
.ana-ekran-destek {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px .45rem 0 0;
}
.ana-ekran-destek-dugme {
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    color: #dff2f8;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    background: #ffffff12;
    box-shadow: inset 0 0 0 1px #ffffff26;
}
/* Yildiz zaten sari: sari zeminde kayboluyordu. Zemin yesil, yildiz sari. */
.ana-ekran-destek-dugme.degerlendir {
    color: #06281c;
    background: linear-gradient(180deg, #7ef0ad, #2fa772);
    box-shadow: 0 4px 12px #0b3c2a4d, inset 0 1px #ffffff80;
}
.ana-ekran-destek-dugme.degerlendir span { color: #ffd34d; text-shadow: 0 1px 1px #00000040; }
.ana-ekran-destek-dugme:disabled { opacity: .6; }

/* ---- Yildiz derecelendirme ----------------------------------------------
   Iki pencerede de ayni gorunur: cikis geri bildirimi ve destek formu. */
.yildiz-satiri {
    display: grid;
    justify-items: center;
    gap: 4px;
    width: 100%;
}
.yildiz-satiri > small { color: #9fc5d0; font-size: .72rem; }
.yildiz-satiri.destek { margin: 2px 0 4px; }
.yildizlar { display: flex; gap: 4px; }
.yildizlar .yildiz {
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    /* Bos yildiz sonuk ama secilebilir oldugu belli olacak kadar gorunur. */
    color: #44636f;
    font-size: 1.6rem;
    line-height: 1;
    background: transparent;
    transition: transform .1s ease-out, color .1s ease-out;
}
.yildizlar .yildiz.dolu { color: #ffd34d; text-shadow: 0 0 10px #ffd34d55; }
.yildizlar .yildiz:active { transform: scale(.88); }
.yildizlar .yildiz:disabled { opacity: .7; }

/* ---- Sesle yazma --------------------------------------------------------
   Kutunun sag alt kosesine oturur; yaziyi ortmesin diye kucuk ve yarim
   saydam, dokununca belirginlesir. */
.cikis-geri-kutu-sarmal { position: relative; width: 100%; }
.cikis-geri-kutu-sarmal textarea { width: 100%; padding-right: 46px; }
.sesli-yaz {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    background: #ffffff1c;
    box-shadow: inset 0 0 0 1px #ffffff33;
}
.sesli-yaz:active { background: #ffffff33; }
.sesli-yaz.dinliyor {
    background: #e2574c;
    box-shadow: 0 0 0 0 #e2574c80;
    animation: sesliYazNabiz 1.1s ease-out infinite;
}
@keyframes sesliYazNabiz {
    0% { box-shadow: 0 0 0 0 #e2574c80; }
    100% { box-shadow: 0 0 0 11px #e2574c00; }
}

/* Tesekkur ekranindaki magaza daveti. */
.cikis-geri-magaza-not { font-size: .76rem !important; }
.cikis-geri-gonder.magaza { width: 100%; min-height: 44px; border-radius: 13px; font-weight: 800; }

/* ---- Ipucu balonu --------------------------------------------------------
   Oyunu DURDURMAZ: arka plani karartmaz, dokunmayi engellemez. Oyuncu
   gormezden gelirse dokuz saniyede kendiliginden kaybolur. Bu yuzden
   pointer-events yalnizca dugmelerde acik. */
.ipucu-balon {
    position: fixed;
    z-index: 20040;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "simge metin" "dugme dugme";
    align-items: start;
    gap: 7px 10px;
    width: min(330px, calc(100vw - 28px));
    padding: 11px 13px;
    border: 1px solid #ffd86e73;
    border-radius: 15px;
    color: #eefbff;
    background: linear-gradient(165deg, #0e4f5df5, #06232ffa);
    box-shadow: 0 14px 34px #000a, inset 0 1px #ffffff1f;
    pointer-events: none;
    animation: ipucuGir .2s ease-out;
}
@keyframes ipucuGir {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ipucu-balon .ipucu-simge { grid-area: simge; font-size: 1.15rem; line-height: 1.2; }
.ipucu-balon p {
    grid-area: metin;
    margin: 0;
    font-size: .8rem;
    line-height: 1.45;
    color: #dff2f8;
}
.ipucu-dugmeler {
    grid-area: dugme;
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    pointer-events: auto;
}
.ipucu-dugmeler button {
    min-height: 32px;
    padding: 6px 11px;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: .74rem;
    font-weight: 800;
}
.ipucu-tamam {
    color: #06281c;
    background: linear-gradient(180deg, #7ef0ad, #2fa772);
}
.ipucu-bir-daha {
    color: #9fc5d0;
    background: #ffffff14;
    box-shadow: inset 0 0 0 1px #ffffff26;
}

/* Yerlesimler: anlattigi seyin yanina otursun, eli kapatmasin. */
.ipucu-balon.ipucu-alt {
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + 118px);
    transform: translateX(-50%);
    animation: ipucuGirOrta .2s ease-out;
}
@keyframes ipucuGirOrta {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.ipucu-balon.ipucu-sag {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(env(safe-area-inset-bottom) + 118px);
}
.ipucu-balon.ipucu-ust {
    left: 50%;
    top: calc(env(safe-area-inset-top) + 58px);
    transform: translateX(-50%);
    animation: ipucuGirOrta .2s ease-out;
}

/* Rozetin ne anlama geldigi; adiyla tarihi arasinda. */
.reward-card .reward-aciklama {
    display: block;
    margin: 2px 0 1px;
    color: #9fc5d0;
    font-size: .62rem;
    font-style: normal;
    line-height: 1.35;
}

/* Odul merkezinde suren reklam kampanyasinin seridi. */
.reklam-kampanya-serit{
    display:flex;align-items:center;gap:9px;
    margin:0 0 8px;padding:9px 11px;
    border:1px solid #ffd86e73;border-radius:12px;
    background:linear-gradient(140deg,#f4cd5122,#0e4f5d00 70%);
}
.reklam-kampanya-serit>span:first-child{font-size:1.1rem}
.reklam-kampanya-serit b{display:block;color:#ffe9a8;font-size:.84rem}
.reklam-kampanya-serit small{display:block;color:#cfe7ef;font-size:.7rem;line-height:1.4}