@charset "UTF-8";
/* CartaNera 3.0 — hesap, bulut kaydı, çevrim içi masalar, lobi, arkadaşlar ve gerçek sıralama ekranları. */

/* Bulut durumu (üst çubuk) */
.cloud-pill{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:1px solid var(--stroke-2,#e6c98d33);border-radius:999px;background:#141d17;color:#c9cdbf;font-size:12px;font-weight:600;white-space:nowrap}
.cloud-pill svg{width:18px;height:18px}
.cloud-pill[data-state="synced"]{color:#9fe0b8;border-color:#8fd0a255}
.cloud-pill[data-state="pending"],.cloud-pill[data-state="syncing"]{color:#f3d598}
.cloud-pill[data-state="offline"],.cloud-pill[data-state="error"]{color:#f0a3a3;border-color:#e48a8a55}
.cloud-pill[data-state="local"]{color:var(--gold-bright);border-style:dashed}
@media(max-width:767px){.cloud-pill span{display:none}.cloud-pill{width:40px;padding:0;justify-content:center}}
.net-banner{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:600;max-width:calc(100vw - 24px);padding:9px 14px;border-radius:12px;background:#4a1d1d;border:1px solid #e48a8a66;color:#ffd9d9;font-size:12.5px;box-shadow:0 8px 24px #0008}
.net-banner[hidden]{display:none}

/* Çevrim içi bölümü (Oyunlar) */
.online-hub{max-width:1040px;margin:0 0 14px;padding:16px;border:1px solid #8fd0a255;border-radius:var(--r,18px);background:linear-gradient(140deg,#13261c,#0f1712 70%)}
.oh-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}
.oh-head .live-dot{margin-top:9px}
.oh-head h3{font:22px/1.2 Georgia,serif;color:var(--gold-bright)}
.oh-head p{margin-top:2px;font-size:13px;color:#b8bdaf}
.oh-actions{display:flex;flex-wrap:wrap;gap:8px}
.oh-actions>button{position:relative;min-height:44px;padding:0 16px;border-radius:12px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.oh-actions svg{width:17px;height:17px}
.oh-actions .tab-badge{top:-6px;left:auto;right:-6px}
@media(max-width:479px){.oh-actions{display:grid;grid-template-columns:1fr 1fr}.oh-actions>button:first-child{grid-column:1/-1}}

/* Giriş / kayıt / hesap */
.auth-tabs{position:static!important;margin:6px 0 12px!important}
.auth-form{display:grid;gap:10px}
.auth-field{display:flex;flex-direction:column;gap:5px}
.auth-field span{font-size:12px;font-weight:600;color:#a3ab9c}
.auth-field input{min-height:48px;padding:0 14px;border:1px solid #e6c98d33;border-radius:12px;background:#0b110d;color:var(--ink);font-size:16px}
.auth-field input:focus{outline:2px solid var(--gold-bright);outline-offset:1px}
.auth-error{min-height:18px;margin-top:8px;font-size:13px;color:#f0a3a3}
.auth-alt{display:grid;gap:6px;margin-top:10px;padding-top:12px;border-top:1px solid #ffffff12}
.auth-alt small{font-size:11.5px;color:#8f9a86;line-height:1.45}
.modal-copy.small{font-size:12px;color:#97a08c}
.account-rows{display:grid;gap:10px;margin:10px 0}
.session-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.session-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:6px 10px;border:1px solid #ffffff12;border-radius:12px}
.session-list li span{display:flex;flex-direction:column}
.session-list small{font-size:11px;color:#8f9a86}
.danger-text{color:#f0a3a3!important}
.modal-actions.vertical{flex-direction:column}
.import-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.import-grid span{display:flex;flex-direction:column;align-items:center;padding:10px 6px;border:1px solid #e6c98d22;border-radius:12px;background:#0f1612}
.import-grid small{font-size:10px;letter-spacing:1px;color:#8e977f}
.import-grid strong{font:20px Georgia,serif;color:var(--gold-bright)}

/* Arkadaşlar */
.friend-list{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:6px}
.friend-row{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 8px 6px 10px;border:1px solid #ffffff12;border-radius:14px;background:#0f1612}
.friend-row .seat-avatar{width:34px;height:34px;font-size:16px}
.friend-name{flex:1;min-width:0;display:flex;flex-direction:column}
.friend-name strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-name small{font-size:11.5px;color:#8f9a86}
.friend-actions{display:flex;gap:6px;flex-shrink:0}
.friend-actions button{min-height:38px;padding:0 12px;border-radius:10px;font-size:12.5px}
.friend-actions .icon-only{width:38px;padding:0}
.dot-on{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8fd0a2;margin-right:3px}
.muted{color:#8f9a86;font-size:12px}

/* Lobi */
.lobby-code-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px dashed #e6c98d55;border-radius:999px;font-size:11px;letter-spacing:1px;color:#a3ab9c}
.lobby-code-chip b{font:700 15px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:3px;color:var(--gold-bright)}
.lobby-card{max-width:720px;margin:0 auto;padding:16px;border:1px solid #e6c98d33;border-radius:20px;background:linear-gradient(160deg,#151f19,#0e1511)}
.lobby-rules{font-size:13px;color:#b8bdaf;margin-bottom:12px}
.lobby-seats{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lobby-seat{display:flex;align-items:center;gap:10px;min-height:62px;padding:8px 10px;border:1px solid #ffffff14;border-radius:14px;background:#0f1612}
.lobby-seat.you{border-color:var(--gold)}
.lobby-seat.empty{border-style:dashed;opacity:.75}
.lobby-seat span:last-child{display:flex;flex-direction:column;min-width:0}
.lobby-seat strong{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lobby-seat small{font-size:11.5px;color:#8f9a86}
.lobby-seat .ok{color:#9fe0b8;font-weight:700}
.seat-avatar.empty{border-style:dashed;color:#8f9a86;background:transparent}
.invite-box{padding:12px;border:1px solid #8fd0a244;border-radius:14px;background:#0c1d14;margin-bottom:12px}
.invite-actions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.invite-actions button{min-height:46px;padding:0 14px;border-radius:12px;font-size:13px;font-weight:600}
.wa-button{display:inline-flex;align-items:center;gap:8px;border:0;background:#1fa855;color:#fff}
.wa-button svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.6}
.lobby-link{display:block;font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#8f9a86;word-break:break-all}
.lobby-wait{margin:6px 0 12px;font-size:14px;color:#e2cf97}
.lobby-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
.lobby-actions button{flex:1;min-height:50px;border-radius:14px;font-size:15px;font-weight:600}
@media(max-width:479px){.lobby-seats{grid-template-columns:1fr}.invite-actions{display:grid;grid-template-columns:1fr 1fr}.invite-actions .wa-button{grid-column:1/-1;justify-content:center}}

/* Sıralama */
.board-tabs{position:static!important;max-width:420px}
.board-filters{display:grid;gap:8px;margin-bottom:12px}
.board-filters .setup-seg{grid-template-columns:repeat(auto-fit,minmax(78px,1fr))}
.board-filters .setup-seg button{min-height:40px;align-items:center;justify-content:center;padding:6px 8px}
.board-filters .setup-seg button strong{font-size:12.5px}
#board-list .leaders-head,#board-list .leader-row{grid-template-columns:42px minmax(0,1fr) 90px 70px}
.leader-avatar{background:color-mix(in srgb,var(--avatar,#d9b36a) 30%,#0b1c13);color:var(--avatar,#d9b36a)}
.board-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 16px;text-align:center;color:#b8bdaf}
.board-empty img{width:64px;height:auto}
.board-me{margin:10px 0 0;text-align:center;font-size:13px;color:var(--gold-bright)}
@media(max-width:479px){#board-list .leaders-head,#board-list .leader-row{grid-template-columns:34px minmax(0,1fr) 74px 54px;font-size:12px}}

/* Çevrim içi masa ayrıntıları */
.room-view.online-mode .bj-mode,.room-view.online-mode [data-action="room-new"]{display:none!important}
.mini-pill.timer-low{background:#4a1d1d;color:#ffd9d9;animation:timer 1s steps(2) infinite}
@keyframes timer{50%{opacity:.6}}
.pisti-seat strong em.off{color:#f0a3a3}
@media(prefers-reduced-motion:reduce){.mini-pill.timer-low{animation:none}}