/* Oyun Salonu: tam ekran oyun görünümü (koyu oyun teması; site temasından bağımsız) */
html.arc-lock, html.arc-lock body { overflow: hidden; }
.tb-arcade { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 99px; background: linear-gradient(135deg, #6366f1, #ec4899); color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; white-space: nowrap; transition: transform .1s, filter .15s; }
.tb-arcade:hover { filter: brightness(1.1); } .tb-arcade:active { transform: scale(.97); }
.tb-arcade .ic { font-size: 16px; } .tb-arcade small { font-weight: 800; background: rgba(0,0,0,.25); padding: 0 6px; border-radius: 99px; } .tb-arcade small:empty { display: none; }
.arc-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: arc-pulse 1.4s infinite; }
@keyframes arc-pulse { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@media (max-width: 720px) { .tb-arcade b { display: none; } .tb-arcade { padding: 7px 10px; } }

.arc { --line: rgba(255,255,255,.2); --panel: rgba(255,255,255,.07); --surface: rgba(255,255,255,.1); --accent: #818cf8; position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; color: #e8eaff; background: radial-gradient(1200px 600px at 20% -10%, #312e81 0%, transparent 60%), radial-gradient(900px 500px at 100% 110%, #831843 0%, transparent 55%), #0b0d22; font-family: inherit; }
.arc[hidden] { display: none; }
.arc * { box-sizing: border-box; }
.arc-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.1); }
.arc-title { display: grid; line-height: 1.2; min-width: 0; } .arc-title b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .arc-title small { opacity: .65; font-size: 12px; }
.arc-mid { flex: 1; min-width: 0; display: flex; justify-content: center; }
.arc-timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px; min-width: 52px; text-align: right; } .arc-timer.low { color: #fca5a5; animation: arc-blink 1s steps(1) infinite; }
@keyframes arc-blink { 50% { opacity: .5; } }
.arc-chips { font-weight: 800; white-space: nowrap; }
.arc-ic { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: inherit; font-size: 17px; cursor: pointer; } .arc-ic:hover { background: rgba(255,255,255,.15); }
.arc-ic[hidden] { display: none; }
.arc-goal { position: relative; width: min(420px, 100%); height: 26px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.arc-goal > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #6366f1, #22c55e); transition: width .25s ease-out; } .arc-goal.hit > i { background: #16a34a; }
.arc-goal > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.arc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* salon */
.arc-salon { flex: 1; overflow: auto; padding: 22px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-content: start; }
.arc-tile { display: grid; gap: 6px; text-align: left; padding: 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); color: inherit; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.arc-tile:hover { transform: translateY(-3px); border-color: #a5b4fc; background: linear-gradient(160deg, rgba(129,140,248,.22), rgba(255,255,255,.04)); }
.arc-tile.live { border-color: #34d399; box-shadow: 0 0 0 1px rgba(52,211,153,.35), 0 8px 30px rgba(16,185,129,.18); }
.arc-tile .ic { font-size: 46px; line-height: 1; } .arc-tile b { font-size: 18px; } .arc-tile small { opacity: .75; min-height: 2.6em; font-size: 13px; }
.arc-tile .st { font-size: 12.5px; } .arc-tile .on { color: #6ee7b7; font-weight: 800; } .arc-tile .dim, .arc .dim { opacity: .6; }
.arc-empty { padding: 40px; text-align: center; opacity: .7; }

/* oda */
.arc-room { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 310px; }
.arc-stagewrap { position: relative; min-height: 0; overflow: hidden; background: #060818; }
.arc-stageholder, .arc-scene { position: absolute; inset: 0; }
.tg-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.tg.word .tg-canvas { cursor: default; }
.tg-dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .tg-dock > * { pointer-events: auto; }
.tg-input { width: min(520px, 100%); padding: 14px 18px; border-radius: 16px; border: 2px solid rgba(255,255,255,.35); background: rgba(10,12,40,.82); color: #fff; font-size: 20px; font-weight: 700; text-align: center; outline: none; backdrop-filter: blur(6px); } .tg-input:focus { border-color: #a5b4fc; }
.tg-powers { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tg-pw { padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(10,12,40,.78); color: #fff; font-weight: 800; font-size: 13.5px; cursor: pointer; backdrop-filter: blur(6px); } .tg-pw:hover:not(:disabled) { border-color: #a5b4fc; } .tg-pw:disabled { opacity: .6; border-color: #22c55e; cursor: default; }
.arc-cardwrap { overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 22px 14px; } .arc-cardwrap .mg-card { width: min(640px, 100%); margin: 0; zoom: 1.25; animation: none; background: rgba(255,255,255,.08); }
.arc-idle, .arc-result { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 24px; z-index: 2; }
.arc-idle .ic, .arc-result .ic { font-size: 84px; line-height: 1; animation: arc-bob 2.4s ease-in-out infinite; } .arc-idle h2, .arc-result h2 { margin: 4px 0 0; font-size: 28px; } .arc-idle p, .arc-result p { margin: 0; max-width: 460px; }
.arc-idle[hidden], .arc-result[hidden] { display: none; }
@keyframes arc-bob { 50% { transform: translateY(-8px); } }
.arc-result { background: rgba(6,8,24,.78); backdrop-filter: blur(5px); } .arc-result .arc-row { width: min(320px, 100%); }
.arc-starts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.arc-go { padding: 14px 28px; border-radius: 16px; border: 0; background: linear-gradient(135deg, #6366f1, #ec4899); color: #fff; font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: 0 8px 26px rgba(99,102,241,.4); } .arc-go:hover { filter: brightness(1.1); }
.arc-side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.arc-scores { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.1); display: grid; gap: 4px; } .arc-scores h4 { margin: 0 0 4px; font-size: 13px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.arc-row { display: flex; align-items: center; gap: 8px; font-size: 14px; } .arc-row .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-feed { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px; font-size: 13px; line-height: 1.55; }
.arc-line { padding: 1px 0; word-break: break-word; }
.arc-sayrow { padding: 10px; border-top: 1px solid rgba(255,255,255,.1); } .arc-say { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; font-size: 14px; outline: none; } .arc-say:focus { border-color: #a5b4fc; }

@media (max-width: 860px) {
  .arc-room { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 36%; }
  .arc-side { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .arc-head { gap: 6px; padding: 8px 10px; } .arc-chips { display: none; } .arc-mid { display: none; } .arc-timer { margin-left: auto; }
  .arc-cardwrap .mg-card { zoom: 1; }
  .tg-input { font-size: 17px; padding: 11px 14px; }
}
@media (prefers-reduced-motion: reduce) { .arc-dot, .arc-idle .ic, .arc-result .ic, .arc-timer.low { animation: none; } }

@media (max-width: 520px) { .arc-salon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; } .arc-tile { padding: 12px; gap: 4px; border-radius: 16px; } .arc-tile .ic { font-size: 34px; } .arc-tile b { font-size: 15px; } .arc-tile small { font-size: 11.5px; min-height: 0; } .arc-title b { font-size: 15px; } }

@media (max-width: 860px) { .arc-head { flex-wrap: wrap; } .arc-mid { display: flex; order: 10; flex-basis: 100%; } .arc-mid:empty { display: none; } .arc-goal { width: 100%; height: 22px; } }

/* sohbetsiz oda: sahne tüm alanı kaplar; skor ve olay başlıkları sahnenin üstünde yüzer */
.arc-room { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.arc-hud { position: absolute; top: 10px; right: 10px; z-index: 4; min-width: 150px; max-width: 46%; padding: 8px 12px; border-radius: 14px; background: rgba(8,10,34,.62); backdrop-filter: blur(6px); display: grid; gap: 3px; pointer-events: none; font-size: 13px; }
.arc-hud[hidden] { display: none; }
.arc-caps { position: absolute; top: 10px; left: 10px; z-index: 4; display: grid; gap: 4px; max-width: min(60%, 420px); pointer-events: none; }
.arc-cap { padding: 5px 12px; border-radius: 12px; background: rgba(8,10,34,.62); backdrop-filter: blur(6px); font-size: 13px; animation: arc-cap 6.5s ease-out forwards; }
@keyframes arc-cap { 0% { opacity: 0; transform: translateY(-6px); } 6% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 860px) { .arc-room { grid-template-rows: minmax(0, 1fr); } .arc-hud { top: 6px; right: 6px; min-width: 120px; padding: 5px 9px; font-size: 12px; } .arc-caps { top: 6px; left: 6px; max-width: 58%; } }
/* "Oyun başladı" şeridi (üstte, Katıl düğmeli) */
.arc-invite { position: fixed; z-index: 60; top: calc(env(safe-area-inset-top, 0px) + 58px); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 99px; background: linear-gradient(135deg, #6366f1, #ec4899); color: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.45); animation: arc-inv-in .3s ease-out; }
.arc-invite[hidden] { display: none; }
.arc-invite .ic { font-size: 20px; } .arc-invite b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-invite-go { border: 0; border-radius: 99px; padding: 8px 18px; background: #fff; color: #4338ca; font-weight: 800; font-size: 14px; cursor: pointer; }
.arc-invite-x { border: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.25); color: #fff; cursor: pointer; }
@keyframes arc-inv-in { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Sohbet odaları (tam ekran, Oyun Salonu görünümüyle aynı koyu tema) */
.tb-rooms { background: linear-gradient(135deg, #0d9488, #2563eb); }
.tb-rooms[hidden] { display: none; }
.arc.crm .arc-tile .st { display: flex; flex-wrap: wrap; gap: 0 2px; }
.crm-room { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 270px; position: relative; }
.crm-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.crm-msgs { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain; }
.crm-msg, .crm-sys { display: flex; gap: 8px; align-items: baseline; font-size: 15px; line-height: 1.45; word-break: break-word; }
.crm-msg time, .crm-sys time { font-size: 11px; opacity: .5; flex: none; font-variant-numeric: tabular-nums; }
.crm-msg > span, .crm-sys > span { flex: 1; min-width: 0; }
.crm-sys { opacity: .65; font-style: italic; font-size: 13px; }
.crm-msg .nick { background-color: transparent; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
.crm-msg.mine .nick { color: #7dd3fc; } .crm-msg.action > span { font-style: italic; opacity: .9; }
.crm-del { flex: none; border: 0; background: none; opacity: .35; cursor: pointer; font-size: 13px; } .crm-del:hover { opacity: 1; }
.crm-composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); }
.crm-input { flex: 1; min-width: 0; font-size: 16px; background: rgba(255,255,255,.1) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 14px; padding: 10px 14px; }
.crm-send { width: 46px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #0d9488, #2563eb); color: #fff; font-size: 18px; cursor: pointer; }
.crm-people { border-left: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.crm-ph { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; } .crm-pclose { display: none; }
.crm-person { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; flex-wrap: wrap; } .crm-person:hover { background: rgba(255,255,255,.1); }
.crm-person .who { flex: 1; min-width: 0; display: grid; } .crm-person .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-person .avatar, .crm-pt .avatar { width: 30px; height: 30px; flex: none; }
.crm-owner { background: #f59e0b !important; color: #1f1300 !important; } .crm-mod { background: #38bdf8 !important; color: #04202e !important; }
.crm-b-gold { background: linear-gradient(135deg, #fde68a, #f59e0b) !important; color: #3b2300 !important; } .crm-b-platin { background: linear-gradient(135deg, #f1f5f9, #94a3b8) !important; color: #0f172a !important; }
.crm-b-vip { background: linear-gradient(135deg, #f0abfc, #a855f7) !important; color: #2e0a3f !important; } .crm-b-dj { background: linear-gradient(135deg, #67e8f9, #2563eb) !important; color: #02142f !important; }
.crm-sheet .crm-act { display: grid; gap: 6px; margin: 10px 0; } .crm-pt { display: flex; align-items: center; gap: 12px; } .crm-pb { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.crm-danger { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
.crm-mlist { display: grid; gap: 4px; max-height: 40vh; overflow-y: auto; }
@media (max-width: 760px) {
  .crm-room { grid-template-columns: minmax(0, 1fr); }
  .crm-people { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(105%); transition: transform .2s; background: #12143a; box-shadow: -10px 0 30px rgba(0,0,0,.5); }
  .crm-people.open { transform: none; } .crm-pclose { display: block; }
}
@media (min-width: 761px) { .crm-pbtn { display: none; } }

/* sohbet odası: yanıt, tepki, arama, mesaj menüsü (lobi sohbetiyle aynı davranış; koyu zemin) */
.crm-msg { position: relative; flex-wrap: wrap; }
.crm-msg > span { flex: 1 1 0; }
.crm-msg .msg-acts { display: inline-flex; vertical-align: baseline; }
.crm-msg .msg-act { background: none; border: 0; padding: 0 4px; color: inherit; font-size: .85rem; cursor: pointer; opacity: 0; transition: opacity .12s; line-height: 1; }
.crm-msg:hover .msg-act, .crm-msg .msg-act:focus-visible { opacity: .8; } .crm-msg .msg-act:hover { opacity: 1; color: #a5b4fc; } .crm-msg .msg-act.msg-rep:hover { color: #fca5a5; }
@media (hover: none) { .crm-msg .msg-act { opacity: .6; font-size: 1.05rem; padding: 2px 8px; } }
.crm-msg { -webkit-touch-callout: none; }
.crm-msg.hot { background: rgba(250, 204, 21, .12); border-radius: 8px; box-shadow: -3px 0 0 #facc15; padding-left: 4px; }
.crm-msg.flash { animation: msg-flash 1.4s ease-out; }
.arc .msg-quote { color: rgba(232, 234, 255, .75); background: rgba(255, 255, 255, .08); border-left-color: #818cf8; } .arc .msg-quote b { color: #fff; }
.arc .msg-rx .rx-chip { color: #e8eaff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); } .arc .msg-rx .rx-chip.on { border-color: #818cf8; background: rgba(129, 140, 248, .28); }
.crm-main .reply-bar { margin: 0; border-radius: 0; background: rgba(255, 255, 255, .08); color: rgba(232, 234, 255, .8); } .crm-main .reply-bar b { color: #fff; }
.crm-find { margin: 0; padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); }
.crm-find .crm-find-in { background: rgba(255, 255, 255, .1) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .2) !important; border-radius: 12px; padding: 8px 12px; font-size: 16px; }
.crm-msg.hit time { white-space: nowrap; } .crm-msg.hit mark { background: rgba(250, 204, 21, .55); color: inherit; border-radius: 3px; padding: 0 1px; }
.arc .chat-older, .arc .chat-more { color: rgba(232, 234, 255, .7); }
.crm-findbtn { flex: none; width: 40px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 16px; cursor: pointer; }
html.arc-lock .modal-layer, html.arc-lock .toasts, html.arc-lock .cx-pop, html.arc-lock .msg-menu { z-index: 1000; }