/* AnomicFlip — Coinflip (/coinflip) */
.cf, .cf * { box-sizing: border-box; }
.cf { max-width: 1640px; margin: 0 auto; padding: 24px 40px 80px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #fff; }
.cf[hidden] { display: none; }
.cf-coin-ic { display: inline-block; flex: none; width: 15px; height: 20px; background: url('/coin.png') center / contain no-repeat; vertical-align: -3px; }

/* top strip */
.cf-top { display: flex; gap: 10px; align-items: stretch; }
.cf-recent { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 14px; height: 46px; border-radius: 8px; background: #1a1d20; overflow: hidden; color: #6b7078; font-size: 15px; }
.cf-chip { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #1a1300; }
.cf-chip.h { background: #f5c84a; } .cf-chip.t { background: #5ea2f7; color: #06142a; }
.cf-chip.lost { opacity: .35; }
.cf-tbtn { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border: 0; border-radius: 8px; background: #1a1d20; color: #c9ccd1; font: 600 16px 'Archivo', system-ui, sans-serif; cursor: pointer; }
.cf-tbtn:hover { background: #24272c; color: #fff; }

/* game box */
.cf-game { display: grid; grid-template-columns: 440px minmax(0, 1fr); border-radius: 14px; overflow: hidden; background: #1e2125; }
.cf-side > * { min-width: 0; }
.cf-side { padding: 22px; background: #1a1d20; display: flex; flex-direction: column; gap: 18px; }
.cf-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 6px; border-radius: 99px; background: #111315; }
.cf-tab { height: 54px; border: 0; border-radius: 99px; background: none; color: #fff; font: 700 19px 'Archivo', system-ui, sans-serif; cursor: pointer; }
.cf-tab.on { background: #3a3f48; }
.cf-label { font-size: 18px; font-weight: 600; color: #c9ccd1; margin-bottom: -8px; }
.cf-amt { display: flex; height: 60px; border-radius: 8px; overflow: hidden; background: #2a2d33; border: 2px solid #2a2d33; }
.cf-amt:focus-within { border-color: #3fd68f; }
.cf-amt label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: #111315; }
.cf-amt input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font: 600 19px 'Archivo', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.cf-amt button { flex: none; width: 54px; border: 0; border-left: 1px solid #1e2125; background: #2a2d33; color: #fff; font: 800 17px 'Archivo', system-ui, sans-serif; cursor: pointer; }
.cf-amt button:hover { background: #33373e; }
.cf-amt button.max { width: 64px; }
.cf-random { height: 58px; border: 0; border-radius: 8px; background: #2a2d33; color: #c9ccd1; font: 600 18px 'Archivo', system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.cf-random:hover { background: #30343b; color: #fff; }
.cf-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cf-pick button {
  height: 150px; border: 2px solid transparent; border-radius: 10px; background: #2a2d33; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #8b8f97; font: 600 16px 'Archivo', system-ui, sans-serif;
}
.cf-pick button:hover { background: #30343b; }
.cf-pick button.on { border-color: #3fd68f; background: #263129; color: #fff; }
.cf-face { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 800; }
.cf-face.h { background: #f5c84a; color: #1a1300; } .cf-face.t { background: #5ea2f7; color: #06142a; }
.cf-auto { display: grid; gap: 12px; }
.cf-auto[hidden] { display: none; }
.cf-field { display: grid; gap: 8px; }
.cf-field span { font-size: 15px; color: #a7abb2; }
.cf-field input { width: 100%; min-width: 0; height: 52px; padding: 0 14px; border-radius: 8px; border: 2px solid #2a2d33; background: #111315; color: #fff; font: 600 17px 'Archivo', system-ui, sans-serif; outline: none; }
.cf-field input:focus { border-color: #3fd68f; }
.cf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cf-go {
  height: 70px; border: 0; border-radius: 8px; background: #3fbf7f; color: #0d1f16; font: 800 21px 'Archivo', system-ui, sans-serif; cursor: pointer; transition: background .15s, opacity .15s;
}
.cf-go:hover:not(:disabled) { background: #46cc8a; }
.cf-go:disabled { opacity: .5; cursor: not-allowed; }
.cf-go.stop { background: #e05561; color: #fff; }
.cf-err { margin-top: -6px; font-size: 15px; color: #ff8b97; text-align: center; }
.cf-err:empty { display: none; }

/* stage */
.cf-stage { position: relative; min-height: 640px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 40px 20px; perspective: 1200px; }
.cf-big { position: relative; width: 300px; height: 300px; transform-style: preserve-3d; }
.cf-big .f {
  position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: grid; place-items: center;
  font-size: 120px; font-weight: 900; box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.cf-big .f.h { background: #f5c84a; color: #1a1300; border: 12px solid #e0a92a; }
.cf-big .f.t { background: #5ea2f7; color: #06142a; border: 12px solid #2156d9; transform: rotateY(180deg); }
.cf-big.idle { animation: cf-idle var(--idle, 3.2s) linear infinite; }
@keyframes cf-idle { from { transform: rotateY(var(--from, 0deg)); } to { transform: rotateY(calc(var(--from, 0deg) + 360deg)); } }
.cf-big.spin { animation: cf-spin var(--dur, 1.2s) cubic-bezier(.2,.75,.2,1) forwards; }
@keyframes cf-spin { from { transform: rotateY(var(--from, 0deg)); } to { transform: rotateY(var(--to, 1800deg)); } }
.cf-pay { font-size: 26px; font-weight: 700; color: #a7abb2; }
/* win popup over the coin */
.cf-win { position: absolute; left: 50%; top: calc(50% - 40px); z-index: 5; box-sizing: border-box; width: 300px; max-width: calc(100% - 32px); padding: 22px 22px 18px; display: grid; gap: 14px; justify-items: center;
  background: linear-gradient(160deg, #1f3a2e, #17261f); border: 3px solid #3fd68f; border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 30px rgba(63,214,143,.25);
  transform: translate(-50%, 0) scale(.85); opacity: 0; transition: transform .18s ease, opacity .18s ease; pointer-events: none; }
.cf-win.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.cf-win-x { box-sizing: border-box; width: 100%; padding: 12px 10px; text-align: center; font-size: 48px; font-weight: 800; line-height: 1; color: #3fd68f; border: 2px solid rgba(63,214,143,.55); border-radius: 10px; background: rgba(63,214,143,.08); font-variant-numeric: tabular-nums; }
.cf-win-amt { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 700; color: #3fd68f; font-variant-numeric: tabular-nums; }
.cf-win-amt .cf-coin-ic { width: 18px; height: 24px; vertical-align: 0; }
.cf-win.demo .cf-coin-ic { display: none; } /* 0-coin demo bets */
@media (prefers-reduced-motion: reduce) { .cf-win { transition: none; } }
.cf-result { min-height: 34px; font-size: 26px; font-weight: 800; }
.cf-result.win { color: #3fd68f; } .cf-result.lose { color: #ff6b79; }
.cf-mini { display: flex; gap: 60px; }
.cf-mini div { display: grid; justify-items: center; gap: 10px; color: #8b8f97; font-size: 17px; }
.cf-mini .cf-face { width: 84px; height: 84px; font-size: 32px; opacity: .45; transition: opacity .2s, transform .2s; }
.cf-mini .cf-face.on { opacity: 1; transform: scale(1.06); }

/* footer bar */
.cf-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 18px; background: #191c1f; border-top: 1px solid #23272c; grid-column: 1 / -1; }
.cf-bar-l { display: flex; gap: 6px; }
.cf-iw { position: relative; }
.cf-icon { position: relative; width: 46px; height: 46px; border: 0; border-radius: 8px; background: none; color: #a7abb2; cursor: pointer; display: grid; place-items: center; }
.cf-icon:hover, .cf-icon.on { background: #24272c; color: #fff; }
.cf-logo { width: 200px; height: 36px; background: url('/logo.png') center / contain no-repeat; image-rendering: pixelated; user-select: none; -webkit-user-drag: none; }
.cf-fair { justify-self: end; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; border: 0; border-radius: 8px; background: #2a2d33; color: #fff; font: 800 17px 'Archivo', system-ui, sans-serif; cursor: pointer; }
.cf-fair:hover { background: #33373e; }
.cf-pop {
  position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 20; width: 340px; padding: 16px; border-radius: 14px;
  background: #24272c; border: 1px solid #33373e; box-shadow: 0 22px 50px rgba(0,0,0,.55); text-align: left; cursor: default;
  display: grid; gap: 8px; animation: cf-pop-in .14s ease-out;
}
@keyframes cf-pop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cf-pop::after { content: ''; position: absolute; left: 16px; bottom: -7px; width: 12px; height: 12px; background: #24272c; border-right: 1px solid #33373e; border-bottom: 1px solid #33373e; transform: rotate(45deg); }
.cf-pop[hidden] { display: none; }
.cf-pop h4 { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #8b8f97; }
.cf-opt { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px; background: #1a1d20; cursor: pointer; transition: background .12s; }
.cf-opt:hover { background: #1e2226; }
.cf-opt-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(63,214,143,.12); color: #3fd68f; }
.cf-opt-t { flex: 1; min-width: 0; }
.cf-opt-t b { display: block; font-size: 16px; color: #fff; }
.cf-opt-t small { display: block; margin-top: 3px; font-size: 13px; color: #8b8f97; }
/* toggle switch */
.cf-tog {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 48px; height: 28px; margin: 0;
  border-radius: 99px; background: #3a3f46; cursor: pointer; transition: background .18s;
}
.cf-tog::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .18s; }
.cf-tog:checked { background: #3fd68f; }
.cf-tog:checked::after { transform: translateX(20px); }
.cf-tog:focus-visible { outline: 2px solid #3fd68f; outline-offset: 2px; }
.cf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-stats div { padding: 10px; border-radius: 8px; background: #1a1d20; }
.cf-stats span { display: block; font-size: 12px; color: #8b8f97; text-transform: uppercase; letter-spacing: .5px; }
.cf-stats b { display: block; margin-top: 4px; font-size: 17px; font-variant-numeric: tabular-nums; }

/* info */
.cf-info { padding: 30px; border-radius: 14px; background: #1e2125; }
.cf-info-t { width: 200px; max-width: 100%; height: 36px; background: url('/logo.png') left center / contain no-repeat; image-rendering: pixelated; display: inline-block; vertical-align: middle; }
.cf-info h1 { margin: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 32px; font-weight: 800; }
.cf-info h1 span { color: #3fd68f; }
.cf-info-row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 16px; font-size: 18px; color: #8b8f97; }
.cf-info-row b { color: #fff; } .cf-info-row b.g { color: #3fd68f; }
.cf-info p { margin: 14px 0 0; font-size: 18px; line-height: 1.6; color: #9a9ea6; max-width: 1100px; }

/* live plays + FAQ */
.cf-lower { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 30px; margin-top: 30px; }
.cf-lp-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cf-lp-h h2 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 22px; }
.cf-lp-h h2::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,.7); }
.cf-lp-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.cf-lp-tabs button { height: 42px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: #8b8f97; font: 600 15px 'Archivo', system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.cf-lp-tabs button:hover { color: #fff; }
.cf-lp-tabs button.on { background: #2a2d33; color: #fff; }
.cf-lp { display: grid; gap: 8px; }
.cf-lp[hidden] { display: none; }
.cf-lp-row {
  display: grid; grid-template-columns: 1.1fr 1.3fr 1fr 1fr 1fr; align-items: center; gap: 10px;
  height: 56px; padding: 0 18px; border-radius: 8px; background: #1e2125; font-size: 16px; color: #c9ccd1; font-variant-numeric: tabular-nums;
  animation: cf-row-in .3s ease-out;
}
@keyframes cf-row-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cf-lp-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.cf-lp-row button { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.cf-lp-row button:hover { color: #fff; text-decoration: underline; }
.cf-lp-row .hid { color: #6b7078; font-style: italic; }
.cf-lp-row .mult.w { color: #3fd68f; }
.cf-lp-row .pro { justify-content: flex-end; }
.cf-lp-row .pro.w { color: #3fd68f; }
.cf-lp-empty { padding: 30px; text-align: center; color: #6b7078; border-radius: 8px; background: #1e2125; }
.cf-faq h2 { margin: 0 0 14px; font-size: 22px; line-height: 42px; }
.cf-faq details { margin-bottom: 10px; border-radius: 10px; background: #1e2125; }
.cf-faq summary { list-style: none; cursor: pointer; padding: 20px 22px; font-size: 17px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
.cf-faq summary::-webkit-details-marker { display: none; }
.cf-faq summary::after { content: '+'; color: #8b8f97; font-size: 22px; line-height: 1; }
.cf-faq details[open] summary::after { content: '–'; }
.cf-faq p { margin: 0; padding: 0 22px 20px; font-size: 16px; line-height: 1.6; color: #9a9ea6; }

/* fairness modal */
.cfm-overlay, .cfm-overlay * { box-sizing: border-box; }
.cfm-overlay { position: fixed; inset: 0; z-index: 1000; padding: 16px; display: none; align-items: center; justify-content: center; background: rgba(8,10,12,.7); backdrop-filter: blur(3px); font-family: 'Archivo', system-ui, sans-serif; color: #fff; }
.cfm-overlay.open { display: flex; }
.cfm { position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 32px; border-radius: 16px; background: #1e2125; border: 1px solid #2e3238; }
.cfm h2 { margin: 0 0 6px; font-size: 26px; }
.cfm > p { margin: 0 0 20px; color: #9a9ea6; font-size: 16px; line-height: 1.5; }
.cfm label { display: block; margin: 14px 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #a7abb2; }
.cfm code, .cfm input { display: block; width: 100%; padding: 14px; border-radius: 8px; background: #111315; border: 1px solid #2a2d33; color: #e6e8eb; font: 500 14px ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.cfm input { outline: none; }
.cfm input:focus { border-color: #3fd68f; }
.cfm-prev { margin-top: 20px; padding: 16px; border-radius: 10px; background: #24272c; }
.cfm-prev b { display: block; margin-bottom: 4px; }
.cfm-btn { width: 100%; height: 58px; margin-top: 22px; border: 0; border-radius: 8px; background: #3fbf7f; color: #0d1f16; font: 800 18px 'Archivo', system-ui, sans-serif; cursor: pointer; }
.cfm-btn:hover { background: #46cc8a; }
.cfm-x { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: #a7abb2; cursor: pointer; font-size: 22px; }
.cfm-x:hover { background: #2a2d33; color: #fff; }
.cfm-how { margin-top: 18px; font-size: 14px; line-height: 1.6; color: #8b8f97; }
.cfm-how code { display: inline; padding: 2px 6px; width: auto; }

.cf button:focus-visible, .cfm button:focus-visible { outline: 2px solid #3fd68f; outline-offset: 2px; }

@media (max-width: 1100px) {
  .cf-game { grid-template-columns: minmax(0, 1fr); }
  .cf-stage { min-height: 420px; order: -1; }
  .cf-lower { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .cf { padding: 16px 16px 56px; }
  .cf-big { width: 200px; height: 200px; }
  .cf-big .f { font-size: 80px; border-width: 8px !important; }
  .cf-recent { display: none; }
  .cf-top { justify-content: flex-end; }
  .cf-logo { width: 120px; }
  .cf-lp-row { grid-template-columns: 1fr 1fr 1fr; font-size: 14px; }
  .cf-lp-row .gm, .cf-lp-row .mult { display: none; }
  .cf-info h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .cf-big.spin { animation-duration: .01s; } .cf-big.idle { animation: none; } .cf-lp-row { animation: none; } }