/* Çanak: sembol, kırılma kutlaması (kıran oyuncuya), masadakilere bant, lobi etiketi. Sembol: js/ui/canak.js */
.cnk-ic { display: block; flex: none; }

/* ---- Kutlama penceresi ---- */
.cnk-ov { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: rgba(6, 10, 20, .62); overflow: hidden; animation: cnk-in .2s ease-out; }
.cnk-ov.out { opacity: 0; transition: opacity .2s; pointer-events: none; }
@keyframes cnk-in { from { opacity: 0; } to { opacity: 1; } }
.cnk-card { position: relative; width: min(310px, 100%); padding: 26px 22px 18px; text-align: center; color: #fff; background: #171c2b; border: 1px solid rgba(255, 255, 255, .1); border-radius: 28px; }
.cnk-ov.big .cnk-card { border-color: rgba(239, 159, 39, .55); }
.cnk-bigtag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 999px; background: #EF9F27; color: #2b1a02; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.cnk-hero { position: relative; width: 112px; height: 112px; margin: 0 auto 10px; }
.cnk-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.cnk-ring-fg { stroke: #EF9F27; stroke-dashoffset: 0; } .cnk-ov.big .cnk-ring-fg { stroke: #FAC775; }
.cnk-sym { position: absolute; inset: 8px; } .cnk-sym svg { width: 96px; height: 96px; }
.cnk-title { font-size: .82rem; font-weight: 600; letter-spacing: .4px; color: #FAC775; }
.cnk-amt { font-size: 2.8rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 2px; }
.cnk-sub { font-size: .82rem; color: #98a2bd; margin: 2px 0 12px; }
.cnk-pills { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.cnk-pill { font-size: .74rem; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #c9d0e4; } .cnk-pill.am { background: rgba(239, 159, 39, .16); color: #FAC775; }
.cnk-bal { margin-top: 12px; font-size: .85rem; color: #98a2bd; } .cnk-bal b { color: #fff; font-variant-numeric: tabular-nums; }
.cnk-go { width: 100%; margin-top: 14px; padding: 11px 0; border: 0; border-radius: 999px; background: #EF9F27; color: #2b1a02; font: inherit; font-weight: 600; cursor: pointer; }
.cnk-go:hover { background: #FAC775; }
.cnk-tm { height: 3px; margin-top: 14px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .1); } .cnk-tm i { display: block; height: 100%; background: #EF9F27; transform-origin: left; }
.cnk-cf { position: absolute; top: -14px; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; }
.cnk-coin { position: fixed; width: 16px; height: 16px; border-radius: 50%; background: #EF9F27; border: 2px solid #FAC775; pointer-events: none; }

/* ---- Masadakilere bant ---- */
.cnk-banner { position: fixed; top: 76px; left: 50%; z-index: 8500; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 16px 8px 8px; border-radius: 999px; color: #fff; background: rgba(23, 28, 43, .95); border: 1px solid rgba(255, 255, 255, .14); animation: cnk-drop .35s ease-out; }
.cnk-banner.big { border-color: #EF9F27; }
.cnk-bn-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(239, 159, 39, .16); }
.cnk-bn-tx { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cnk-bn-tx small { color: #98a2bd; font-size: .8rem; }
.cnk-bn-amt { color: #FAC775; font-size: 1rem; font-variant-numeric: tabular-nums; }
@keyframes cnk-drop { from { transform: translate(-50%, -16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ---- Lobi etiketi (masa listesi) ---- */
.cnk-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border-radius: 999px; font-size: .74rem; font-weight: 600; color: #FAC775; background: rgba(239, 159, 39, .14); border: 1px solid rgba(239, 159, 39, .35); font-variant-numeric: tabular-nums; }
.cnk-tag.big { background: #EF9F27; color: #2b1a02; border-color: #EF9F27; }
.rt-stake .cnk-tag { align-self: flex-start; justify-self: start; width: fit-content; margin-top: 4px; }
.cnk-tag.idle { color: var(--dim, #98a2bd); background: transparent; border-color: var(--line-strong, rgba(255, 255, 255, .14)); font-weight: 500; }

@media (prefers-reduced-motion: reduce) { .cnk-ov, .cnk-banner { animation: none; } .cnk-ov.out { transition: none; } }