/* Sandık açma gösterisi: site ve istemci ortak */
#cfx { position: fixed; inset: 0; z-index: 9800; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; background: radial-gradient(circle at 50% 40%, rgba(26,28,38,.96), rgba(4,5,8,.985) 70%); color: #eceef2; font: 14px/1.5 "Segoe UI Variable Text", Inter, "Segoe UI", system-ui, sans-serif; overflow: hidden; }
.cfx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.cfx-stage { position: relative; z-index: 2; width: min(1000px, 100%); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.cfx-stage h3 { margin: 0; font: 600 16px "Segoe UI Variable Display", Inter, "Segoe UI", sans-serif; color: #b9bdc7; letter-spacing: .02em; }

/* Sandık */
.cfx-chest { --a: #8d5a26; --b: #5d3a14; --m: #caa24d; position: relative; width: 210px; height: 170px; animation: cfxShake .16s linear infinite; }
.cfx-chest.t-tahta { --a: #8d5a26; --b: #5d3a14; --m: #a8824a; }
.cfx-chest.t-demir { --a: #6f7682; --b: #3f444e; --m: #c6ccd6; }
.cfx-chest.t-altin { --a: #d39f2f; --b: #8a6212; --m: #fff0b8; }
.cfx-chest .box { position: absolute; left: 10px; right: 10px; bottom: 0; height: 96px; border-radius: 6px 6px 14px 14px; background: linear-gradient(var(--a), var(--b)); border: 4px solid rgba(0,0,0,.55); box-shadow: inset 0 0 0 4px rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.6); }
.cfx-chest .box::before, .cfx-chest .box::after { content: ''; position: absolute; top: 0; bottom: 0; width: 14px; background: var(--m); opacity: .55; }
.cfx-chest .box::before { left: 26px; }
.cfx-chest .box::after { right: 26px; }
.cfx-chest .lock { position: absolute; left: 50%; top: -14px; width: 30px; height: 36px; margin-left: -15px; border-radius: 6px; background: var(--m); border: 3px solid rgba(0,0,0,.55); z-index: 3; }
.cfx-chest .lid { position: absolute; left: 4px; right: 4px; top: 8px; height: 72px; border-radius: 34px 34px 6px 6px; background: linear-gradient(var(--a), var(--b)); border: 4px solid rgba(0,0,0,.55); transform-origin: 50% 100%; z-index: 2; transition: transform .5s cubic-bezier(.3,1.5,.6,1); }
.cfx-chest .lid i { position: absolute; top: 0; bottom: 0; left: 30px; right: 30px; border-left: 14px solid color-mix(in srgb, var(--m) 55%, transparent); border-right: 14px solid color-mix(in srgb, var(--m) 55%, transparent); }
.cfx-chest .glow { position: absolute; left: 50%; bottom: 40px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: #fff; opacity: 0; filter: blur(14px); z-index: 1; transition: transform .5s, opacity .5s; }
.cfx-chest.open { animation: none; }
.cfx-chest.open .lid { transform: translateY(-36px) rotateX(70deg) scale(.95); }
.cfx-chest.open .glow { opacity: 1; transform: scale(5); }
@keyframes cfxShake { 25% { transform: rotate(-2.4deg) translateY(1px); } 75% { transform: rotate(2.4deg) translateY(-1px); } }

/* Şerit */
.cfx-reel { position: relative; width: 100%; height: 190px; overflow: hidden; border-radius: 14px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.1); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.cfx-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 2; background: #fff; box-shadow: 0 0 14px #fff; }
.cfx-mark::before, .cfx-mark::after { content: ''; position: absolute; left: -7px; border: 8px solid transparent; }
.cfx-mark::before { top: 0; border-top-color: #fff; }
.cfx-mark::after { bottom: 0; border-bottom-color: #fff; }
.cfx-strip { display: flex; height: 100%; align-items: center; will-change: transform; width: max-content; }
.cfx-card { flex: none; width: 142px; height: 166px; margin: 0 4px; padding: 8px; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; border-radius: 11px; background: linear-gradient(180deg, #1a1c22, #121318); border: 1px solid #2a2d36; border-bottom: 4px solid var(--c); }
.cfx-card b { font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center; }
.cfx-pv { display: grid; place-items: center; width: 200px; height: 130px; border-radius: 12px; background: #101116; overflow: hidden; }
.cfx-pv.sm { width: 112px; height: 96px; }
.cfx-pv.sm .sh-av, .cfx-pv.sm .av { transform: scale(.82); }
.cfx-pv svg { max-width: 100%; }

/* Sonuç */
.cfx-rays { position: absolute; left: 50%; top: 42%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; background: conic-gradient(from 0deg, transparent 0 8%, color-mix(in srgb, var(--c) 26%, transparent) 8% 12%, transparent 12% 25%, color-mix(in srgb, var(--c) 26%, transparent) 25% 29%, transparent 29% 42%, color-mix(in srgb, var(--c) 26%, transparent) 42% 46%, transparent 46% 58%, color-mix(in srgb, var(--c) 26%, transparent) 58% 62%, transparent 62% 75%, color-mix(in srgb, var(--c) 26%, transparent) 75% 79%, transparent 79% 92%, color-mix(in srgb, var(--c) 26%, transparent) 92% 96%, transparent 96%); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 62%); mask-image: radial-gradient(circle, #000 0, transparent 62%); animation: cfxSpin 16s linear infinite; pointer-events: none; }
@keyframes cfxSpin { to { transform: rotate(360deg); } }
.cfx-win { position: relative; width: min(380px, 100%); padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 7px; background: #15161c; border: 2px solid var(--c); border-radius: 18px; box-shadow: 0 0 70px color-mix(in srgb, var(--c) 45%, transparent); animation: cfxPop .55s cubic-bezier(.2,1.5,.4,1); }
@keyframes cfxPop { from { transform: scale(.45); opacity: 0; } }
.cfx-win small { color: var(--c); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cfx-win h2 { margin: 2px 0 0; font: 700 25px "Segoe UI Variable Display", Inter, "Segoe UI", sans-serif; color: #fff; }
.cfx-win p { margin: 0; color: #a8acb6; }
.cfx-acts { position: relative; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cfx-acts[hidden] { display: none; }
.cfx-btn { padding: 9px 18px; border: 1px solid #3a3d47; border-radius: 10px; background: #1b1d24; color: #eceef2; font: 600 13.5px "Segoe UI", Inter, sans-serif; cursor: pointer; }
.cfx-btn:hover { background: #272a33; }
.cfx-btn.pri { background: #f2efe8; border-color: #f2efe8; color: #111; }
.cfx-btn.pri:hover { background: #fff; }
.cfx-btn.ghost { background: transparent; color: #8d919b; border-color: transparent; }

/* 5'li */
.cfx-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: 100%; perspective: 1200px; }
.cfx-flip { height: 232px; }
.cfx-flip .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,1.3,.6,1); }
.cfx-flip.on .in { transform: rotateY(180deg); }
.cfx-flip .back, .cfx-flip .front { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; }
.cfx-flip .back { background: linear-gradient(145deg, #23252e, #14151a); border: 1px solid #383b45; }
.cfx-flip .back span { font: 800 40px "Segoe UI", sans-serif; color: #3f434e; }
.cfx-flip .front { transform: rotateY(180deg); background: #15161c; border: 2px solid var(--c); box-shadow: 0 0 26px color-mix(in srgb, var(--c) 38%, transparent); }
.cfx-flip small { color: var(--c); font-size: 11px; font-weight: 700; }
.cfx-flip b { font-size: 13px; text-align: center; line-height: 1.25; }
.cfx-flip em { font-style: normal; font-size: 11.5px; color: #a8acb6; }
.cfx-flip em.new { color: #86efac; font-weight: 600; }
@media (max-width: 720px) { .cfx-five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cfx-flip { height: 190px; } .cfx-chest { transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .cfx-rays, .cfx-win, .cfx-chest { animation: none; } }