/* Oyun Salonu: Çarkıfelek, soru (Emoji/Takım) ve Refleks sahneleri */
/* ---- Çarkıfelek ---- */
.ws { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; padding: 12px 14px; overflow: auto; align-content: start; }
.ws-chips, .qs-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; font-weight: 800; font-size: 13px; }
.ws-chips span, .qs-chips span { padding: 3px 12px; border-radius: 99px; background: rgba(255,255,255,.14); } .ws-chips .cat, .qs-chips .cat { background: rgba(129,140,248,.35); } .ws-chips .x2 { background: #ef9f27; color: #412402; }
.ws-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.ws-word { display: flex; gap: 5px; }
.ws-t { width: clamp(24px, 4.4vmin, 44px); height: clamp(32px, 5.8vmin, 58px); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: clamp(16px, 3.2vmin, 32px); font-weight: 900; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); }
.ws-t.on { background: linear-gradient(160deg, #6366f1, #4338ca); border-color: #a5b4fc; color: #fff; }
.ws-t.new { background: #16a34a; border-color: #86efac; animation: ws-flip .5s ease-out; }
@keyframes ws-flip { from { transform: rotateX(90deg) scale(.8); } to { transform: none; } }
.ws-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 14px; align-items: center; min-height: 0; }
.ws-wheel { position: relative; justify-self: center; width: min(100%, 52vh); aspect-ratio: 1; padding-top: 14px; }
.ws-svg svg { display: block; width: 100%; height: auto; }
.ws-ptr { position: absolute; left: 50%; top: 0; width: 38px; height: 48px; margin-left: -19px; z-index: 3; transform-origin: 50% 10%; } .ws-ptr svg { width: 100%; height: 100%; display: block; }
.ws-ptr.sp { animation: ws-tick .14s linear infinite; }
@keyframes ws-tick { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
.ws-svg .cfa { animation: ws-blink 1s steps(1) infinite; } .ws-svg .cfb { animation: ws-blink 1s steps(1) infinite reverse; }
@keyframes ws-blink { 50% { opacity: .25; } }
.ws-side { display: grid; gap: 10px; align-content: center; text-align: center; }
.ws-status { font-weight: 800; font-size: 16px; min-height: 24px; } .ws-status.mine { color: #fbbf24; animation: arc-blink 1.2s ease-in-out infinite; }
.ws-spin { font-size: 20px; padding: 16px 30px; } .ws-spin.pulse { animation: ws-pulse 1.2s ease-in-out infinite; } .ws-spin[hidden] { display: none; }
@keyframes ws-pulse { 50% { transform: scale(1.05); } }
.ws-scores { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ws-p { min-width: 84px; padding: 6px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.22); display: grid; line-height: 1.25; } .ws-p small { font-size: 12px; opacity: .8; } .ws-p b { font-size: 18px; } .ws-p i { font-style: normal; font-size: 12px; color: #86efac; }
.ws-p.on { border: 2px solid #a5b4fc; background: rgba(129,140,248,.2); } .ws-p.me small { font-weight: 800; opacity: 1; } .ws-p.out { opacity: .4; }
.ws-hint { font-size: 12.5px; opacity: .75; min-height: 16px; }
.ws-bottom { display: grid; gap: 8px; }
.ws-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.ws-k { width: clamp(30px, 4.6vmin, 46px); height: clamp(34px, 5.2vmin, 50px); border-radius: 10px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.09); color: #fff; font-weight: 800; font-size: clamp(13px, 2.2vmin, 18px); cursor: pointer; } .ws-k.v { border-color: #ef9f27; }
.ws-k:disabled { opacity: .3; cursor: default; } .ws-k.u { text-decoration: line-through; } .ws-k:not(:disabled):hover { background: rgba(129,140,248,.4); }
.ws-solverow { display: flex; gap: 8px; max-width: 640px; width: 100%; margin: 0 auto; } .ws-solve { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 2px solid rgba(255,255,255,.3); background: rgba(10,12,40,.7); color: #fff; font-size: 16px; font-weight: 700; outline: none; } .ws-solve:focus { border-color: #a5b4fc; }
.ws-solvebtn { padding: 12px 22px; font-size: 16px; }
.ws-err { min-height: 14px; font-size: 12px; color: #fca5a5; text-align: center; }
.ws-join, .ws-done, .qs-result, .rf-result { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; background: rgba(6,8,24,.82); backdrop-filter: blur(5px); }
.ws-join[hidden], .ws-done[hidden], .qs-result[hidden], .rf-result[hidden] { display: none; }
.ws-join .ic, .ws-done .ic, .qs-result .ic, .rf-result .ic { font-size: 80px; line-height: 1; animation: arc-bob 2.4s ease-in-out infinite; } .ws-join h2, .ws-done h2, .qs-result h2, .rf-result h2 { margin: 0; font-size: 28px; } .ws-join p, .ws-done p, .qs-result p, .rf-result p { margin: 0; }
.ws-done .arc-row { width: min(320px, 100%); }

/* ---- Soru (Emoji / Takım) ---- */
.qs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px 18px; overflow: auto; }
.qs-prompt { font-size: clamp(72px, 20vmin, 190px); line-height: 1.1; letter-spacing: .06em; text-align: center; font-weight: 800; word-break: break-word; animation: qs-in .45s cubic-bezier(.2, .9, .3, 1.3); }
.qs-prompt.text { font-size: clamp(24px, 5vmin, 52px); letter-spacing: 0; line-height: 1.3; max-width: 900px; }
@keyframes qs-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.qs-sub { opacity: .75; font-size: 15px; text-align: center; } .qs-hint { min-height: 28px; font-size: 22px; letter-spacing: .25em; font-weight: 800; color: #fde68a; }
.qs-barrow { display: flex; align-items: center; gap: 10px; width: min(640px, 100%); } .qs-bar { flex: 1; height: 14px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; } .qs-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22c55e, #eab308); transition: width .25s linear; } .qs-bar.low > i { background: #ef4444; }
.qs-time { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.qs-form { width: min(640px, 100%); } .qs-form[hidden], .qs-teams[hidden], .qs-join[hidden] { display: none; }
.qs-input { width: 100%; padding: 16px 20px; border-radius: 18px; border: 2px solid rgba(255,255,255,.35); background: rgba(10,12,40,.75); color: #fff; font-size: 22px; font-weight: 800; text-align: center; outline: none; transition: transform .1s, border-color .1s; } .qs-input:focus { border-color: #a5b4fc; } .qs-input.sent { transform: scale(.98); border-color: #fbbf24; }
.qs-teams { display: grid; gap: 6px; text-align: center; width: min(640px, 100%); } .qs-score { display: flex; justify-content: center; align-items: center; gap: 18px; font-size: 38px; font-weight: 900; } .qs-score b { font-size: 18px; opacity: .6; }
.qs-teams .red, .qs-score .red { color: #f87171; } .qs-teams .blue, .qs-score .blue { color: #60a5fa; } .qs-rosters { display: grid; gap: 2px; font-size: 14px; }
.qs-join { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .qs-tb { padding: 16px 34px; border-radius: 18px; border: 0; color: #fff; font-size: 20px; font-weight: 900; cursor: pointer; } .qs-tb.red { background: #dc2626; } .qs-tb.blue { background: #2563eb; } .qs-tb:hover { filter: brightness(1.12); }

/* ---- Refleks ---- */
.rf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; user-select: none; touch-action: manipulation; transition: background .08s; text-align: center; }
.rf.wait { background: radial-gradient(circle at 50% 40%, #7f1d1d, #1c0a0a); } .rf.wait .rf-big { animation: arc-blink 1.1s ease-in-out infinite; }
.rf.go { background: radial-gradient(circle at 50% 40%, #22c55e, #052e16); } .rf.go .rf-big { animation: rf-pop .25s ease-out; }
.rf.early { background: radial-gradient(circle at 50% 40%, #451a03, #0a0a0a); } .rf.done { cursor: default; }
.rf-big { font-size: clamp(48px, 14vmin, 150px); font-weight: 900; letter-spacing: .04em; } .rf-small { font-size: clamp(14px, 2.4vmin, 22px); opacity: .85; } .rf-note { min-height: 24px; font-size: 20px; font-weight: 800; color: #fca5a5; }
@keyframes rf-pop { from { transform: scale(.5); } to { transform: scale(1); } }

@media (max-width: 860px) {
  .ws-mid { grid-template-columns: 1fr; gap: 6px; } .ws-wheel { width: min(70vw, 34vh); } .ws-side { gap: 6px; } .ws-spin { padding: 12px 22px; font-size: 17px; }
  .qs-prompt { font-size: clamp(64px, 24vw, 130px); } .qs-input { font-size: 18px; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .ws-ptr.sp, .ws-svg .cfa, .ws-svg .cfb, .ws-status.mine, .ws-spin.pulse, .rf.wait .rf-big, .qs-prompt, .ws-t.new { animation: none; } }

/* ---- İhale ---- */
.as { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; text-align: center; overflow: auto; background: radial-gradient(circle at 50% 30%, rgba(251,191,36,.18), transparent 60%); }
.as-box { font-size: clamp(90px, 22vmin, 200px); line-height: 1; filter: drop-shadow(0 14px 24px rgba(0,0,0,.5)); animation: arc-bob 2.6s ease-in-out infinite; } .as-box.shake { animation: as-shake .45s ease-out; }
@keyframes as-shake { 0%, 100% { transform: none; } 25% { transform: rotate(-8deg) scale(1.12); } 60% { transform: rotate(6deg) scale(1.08); } }
.as-tier { font-weight: 900; font-size: 20px; } .as-range { opacity: .75; font-size: 14px; min-height: 18px; }
.as-bid { font-size: clamp(36px, 9vmin, 84px); font-weight: 900; color: #fde68a; font-variant-numeric: tabular-nums; } .as-bid.flash { animation: as-flash .5s ease-out; }
@keyframes as-flash { 0% { transform: scale(1.25); color: #fff; } 100% { transform: scale(1); } }
.as-leader { font-size: 18px; font-weight: 800; } .as-note { min-height: 22px; font-size: 14px; opacity: .85; } .as-note.mine { color: #86efac; font-weight: 800; opacity: 1; }
.as-barrow { display: flex; align-items: center; gap: 10px; width: min(560px, 100%); } .as-bar { flex: 1; height: 12px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; } .as-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22c55e, #eab308); transition: width .25s linear; } .as-bar.low > i { background: #ef4444; } .as-time { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.as-controls { display: grid; gap: 8px; width: min(560px, 100%); } .as-controls[hidden] { display: none; }
.as-quick { display: flex; gap: 8px; justify-content: center; } .as-q { flex: 1; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-size: 17px; font-weight: 900; cursor: pointer; } .as-q:hover { background: rgba(251,191,36,.3); }
.as-row { display: flex; gap: 8px; } .as-amount { flex: 1; min-width: 0; padding: 14px 16px; border-radius: 14px; border: 2px solid rgba(255,255,255,.3); background: rgba(10,12,40,.7); color: #fff; font-size: 20px; font-weight: 800; text-align: center; outline: none; } .as-amount:focus { border-color: #fbbf24; } .as-send { padding: 14px 24px; font-size: 18px; }
.as-result { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; background: rgba(6,8,24,.85); backdrop-filter: blur(5px); } .as-result[hidden] { display: none; }
.as-result .ic { font-size: 84px; animation: arc-bob 2.4s ease-in-out infinite; } .as-result h2 { margin: 0; font-size: 28px; } .as-result p { margin: 0; } .as-profit { font-size: 34px; font-weight: 900; } .as-profit.up { color: #86efac; } .as-profit.down { color: #fca5a5; }

/* ---- Katil Kim ---- */
.ks { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; overflow: auto; transition: background .6s; }
.ks.join { background: radial-gradient(circle at 50% 0%, rgba(99,102,241,.25), transparent 60%); }
.ks.night { background: radial-gradient(circle at 80% 8%, rgba(250,250,210,.25), transparent 22%), linear-gradient(180deg, #0a0f2e, #1e1b4b); }
.ks.day { background: radial-gradient(circle at 18% 8%, rgba(253,224,71,.5), transparent 24%), linear-gradient(180deg, #7dd3fc55, #fde68a33); }
.ks.vote { background: linear-gradient(180deg, rgba(217,119,6,.28), rgba(127,29,29,.22)); }
.ks.over { background: rgba(255,255,255,.04); }
.ks-phase { font-size: clamp(28px, 6vmin, 56px); font-weight: 900; } .ks-sub { opacity: .8; font-size: 15px; text-align: center; min-height: 20px; }
.ks-barrow { display: flex; align-items: center; gap: 10px; width: min(560px, 100%); } .ks-bar { flex: 1; height: 12px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; } .ks-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #818cf8, #f472b6); transition: width .25s linear; } .ks-bar.low > i { background: #ef4444; } .ks-time { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.ks-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); width: min(820px, 100%); }
.ks-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 16px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: inherit; font: inherit; } .ks-card .av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 900; background: linear-gradient(135deg, #6366f1, #ec4899); } .ks-card.me { border-color: #a5b4fc; }
.ks-card.pick { cursor: pointer; border-color: #fbbf24; animation: ws-pulse 1.4s ease-in-out infinite; } .ks-card.pick:hover { background: rgba(251,191,36,.25); }
.ks-me { display: grid; gap: 6px; width: min(640px, 100%); padding: 12px 14px; border-radius: 16px; border: 1px dashed #a5b4fc; background: rgba(129,140,248,.14); text-align: center; } .ks-me[hidden] { display: none; } .ks-role { display: grid; gap: 2px; } .ks-role b { font-size: 18px; } .ks-info { font-weight: 800; }
.ks-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; } .ks-skip { padding: 10px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-weight: 800; cursor: pointer; }
.ks-dead { font-size: 13px; opacity: .8; text-align: center; min-height: 16px; }
.ks-result { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; background: rgba(6,8,24,.85); backdrop-filter: blur(5px); } .ks-result[hidden] { display: none; } .ks-result .ic { font-size: 84px; animation: arc-bob 2.4s ease-in-out infinite; } .ks-result h2 { margin: 0; font-size: 28px; } .ks-result .arc-row { width: min(320px, 100%); }
@media (max-width: 860px) { .ks-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .as-box, .as-box.shake, .as-bid.flash, .ks-card.pick, .as-result .ic, .ks-result .ic { animation: none; } }

.ks-grid { justify-content: center; }

.as-kind { font-size: 22px; font-weight: 900; padding: 6px 16px; border-radius: 12px; background: rgba(255,255,255,.12); } .as-kind.trap { background: rgba(239,68,68,.3); } .as-kind.jackpot { background: linear-gradient(135deg, #f59e0b, #ec4899); } .as-kind.good, .as-kind.small { background: rgba(34,197,94,.25); }
.as-cheer { font-size: 18px; font-weight: 800; color: #fde68a; } .as-cheer.mine { font-size: 22px; }

/* çark oyuncu şeridi: tek satır, sığmazsa yatay kayar (6 oyuncuya kadar rahat) */
.ws-scores { flex-wrap: nowrap; overflow-x: auto; justify-content: safe center; gap: 5px; padding: 2px 0; scrollbar-width: none; } .ws-scores::-webkit-scrollbar { display: none; }
.ws-p { flex: 1 1 0; min-width: 50px; max-width: 124px; padding: 4px 8px; text-align: center; } .ws-p small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-p b { font-size: 16px; }
.ws-joined { padding: 10px 18px; border-radius: 14px; background: rgba(34,197,94,.2); border: 1px solid #22c55e; color: #bbf7d0; font-weight: 800; }
.qs-tb.chosen { outline: 3px solid #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); }

/* çark yerleşimi (oyuncu şeridi eklenince): satırlar chips / oyuncular / tahta / çark+yan / klavye; çark kalan yüksekliğe sığar, tahtanın üstüne binmez */
.ws { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.ws-mid { align-items: stretch; min-height: 0; }
.ws-wheel { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; }
.ws-svg, .ws-svg svg { width: 100%; height: 100%; }
.ws-side { align-self: center; }
@media (max-width: 860px) { .ws-wheel { height: 100%; width: auto; max-width: 70vw; } }
/* Çarkıfelek harf penceresi (telefon): alttan açılır, harfe dokununca kapanır */
.ws-sheet-bk, .ws-sheet-panel { display: none; }
@media (max-width: 860px) {
  .ws-sheet { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: flex-end; } .ws-sheet[hidden] { display: none; }
  .ws-sheet-bk { display: block; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
  .ws-sheet-panel { display: block; position: relative; background: #12143a; border-top: 1px solid rgba(255,255,255,.22); border-radius: 20px 20px 0 0; padding: 10px 10px 16px; animation: ws-up .22s ease-out; }
  .ws-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 15px; }
  .ws-sheet-x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 16px; cursor: pointer; }
  .ws-sheet .ws-keys { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; } .ws-sheet .ws-k { width: auto; height: 42px; font-size: 17px; }
  .ws-pickbtn { font-size: 18px; padding: 12px 26px; } .ws-pickbtn[hidden], .ws-vowelbtn[hidden] { display: none; }
  .ws-vowelbtn { padding: 10px 18px; border-radius: 14px; border: 1px solid #ef9f27; background: rgba(239,159,39,.15); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; }
}
@keyframes ws-up { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 861px) { .ws-sheet, .ws-pickbtn, .ws-vowelbtn { display: none !important; } }

@media (max-width: 860px) { .ws-hint { display: none; } .ws-side { gap: 8px; } }