/* ============================================================
   Cockfight v2 — light, compact, mobile-first
   ============================================================ */
.cf-page{padding:12px 12px 20px;max-width:560px;margin:0 auto;color:#1b2a4a;-webkit-tap-highlight-color:transparent}
.cf-page *,.cf-page *:before,.cf-page *:after{box-sizing:border-box}
.cf-page button{font-family:inherit;line-height:1;-webkit-appearance:none;appearance:none}

/* ---------- arena ---------- */
.cf-arena{position:relative;border-radius:18px;overflow:hidden;background:#0f1530;box-shadow:0 10px 30px rgba(20,30,60,.18)}
.cf-arena:before{content:"";display:block;padding-top:66%}
.cf-ring{position:absolute;left:0;top:0;right:0;bottom:0;background:radial-gradient(120% 80% at 50% 0%,#2b3670 0%,#151b3e 45%,#0d1128 100%)}
.cf-floor{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,#7c4b27 0%,#5b351a 55%,#3f220f 100%)}
.cf-floor:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#b98a3e,#f0d38b 50%,#b98a3e);opacity:.9}
.cf-floor:after{content:"";position:absolute;left:0;right:0;bottom:0;height:65%;background:radial-gradient(60% 90% at 50% 100%,rgba(0,0,0,.5),rgba(0,0,0,0) 70%)}
.cf-rope{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.32) 50%,rgba(255,255,255,.08))}
.cf-rope--1{bottom:52%}.cf-rope--2{bottom:58%}

/* HUD */
.cf-hud{position:absolute;left:10px;right:10px;top:10px;display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start;z-index:5;transition:opacity .3s}
.cf-arena--over .cf-hud{opacity:.15}
.cf-hp{min-width:0;padding-top:4px}
.cf-hp--foe{text-align:right}
.cf-hp__name{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.cf-hp__bar{height:6px;border-radius:6px;background:rgba(255,255,255,.14);overflow:hidden}
.cf-hp__bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#37d67a,#a8f26b);transition:width .5s ease}
.cf-hp__bar--foe i{background:linear-gradient(90deg,#ff8a5b,#ff4d4d);margin-left:auto}
.cf-coef{text-align:center;padding:6px 12px 7px;min-width:88px;border-radius:12px;background:rgba(8,12,30,.6);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.cf-coef small{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1}
.cf-coef b{display:block;font-size:21px;line-height:1.15;color:#fff;font-weight:800;letter-spacing:-.01em;margin-top:2px;transition:color .3s}
.cf-coef em{display:flex;align-items:center;justify-content:center;gap:4px;font-style:normal;font-size:11px;font-weight:700;color:#ffd66e;margin-top:2px;white-space:nowrap}
.cf-coef.is-pop{transform:scale(1.14)}
.cf-coef.is-win b{color:#6ff0a3}
.cf-coef.is-lose b{color:#ff7b7b}
.cf-coin{width:12px;height:12px;border-radius:50%;vertical-align:middle}

/* fighters */
.cf-fighter{position:absolute;bottom:9%;width:42%;z-index:3;transform-origin:50% 92%;will-change:transform}
.cf-fighter--me{left:4%}
.cf-fighter--foe{right:4%}
.cf-fighter--foe .cf-body-wrap{transform:scaleX(-1)}
.cf-shadow{position:absolute;left:16%;right:16%;bottom:-3%;height:11%;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 72%)}
.cf-body-wrap{position:relative;width:100%}
.cf-svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}

/* fighter states */
@keyframes cf-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes cf-tailsway{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
.cf-fighter.is-idle{animation:cf-idle 1.8s ease-in-out infinite}
.cf-fighter--foe.is-idle{animation-delay:-.9s}
.cf-fighter.is-idle .cf-tail{animation:cf-tailsway 2.6s ease-in-out infinite;transform-origin:72px 118px}
@keyframes cf-ready{0%{transform:translateY(0)}40%{transform:translateY(-12px)}70%{transform:translateY(0)}85%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.cf-fighter.is-ready{animation:cf-ready .6s ease-out}
@keyframes cf-attack-me{0%{transform:translateX(0) rotate(0)}45%{transform:translateX(38%) rotate(-8deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes cf-attack-foe{0%{transform:translateX(0) rotate(0)}45%{transform:translateX(-38%) rotate(8deg)}100%{transform:translateX(0) rotate(0)}}
.cf-fighter--me.is-attack{animation:cf-attack-me .5s cubic-bezier(.3,1.4,.5,1)}
.cf-fighter--foe.is-attack{animation:cf-attack-foe .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes cf-miss{0%{transform:translateX(0) rotate(0)}50%{transform:translateX(34%) translateY(4%) rotate(14deg)}100%{transform:translateX(0) rotate(0)}}
.cf-fighter--me.is-miss{animation:cf-miss .55s ease-in-out}
@keyframes cf-dodge{0%{transform:translate(0,0)}40%{transform:translate(18%,-10%)}100%{transform:translate(0,0)}}
.cf-fighter--foe.is-dodge{animation:cf-dodge .45s ease-out}
@keyframes cf-hit-me{0%{transform:translateX(0)}20%{transform:translateX(-8%) rotate(-6deg)}40%{transform:translateX(6%) rotate(4deg)}60%{transform:translateX(-3%)}100%{transform:translateX(0)}}
@keyframes cf-hit-foe{0%{transform:translateX(0)}20%{transform:translateX(8%) rotate(6deg)}40%{transform:translateX(-6%) rotate(-4deg)}60%{transform:translateX(3%)}100%{transform:translateX(0)}}
@keyframes cf-flash{0%,100%{filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}30%{filter:drop-shadow(0 6px 8px rgba(0,0,0,.35)) brightness(1.9) saturate(.3)}}
@keyframes cf-headshake{0%{transform:rotate(0)}30%{transform:rotate(-16deg)}60%{transform:rotate(9deg)}100%{transform:rotate(0)}}
.cf-fighter--me.is-hit-head,.cf-fighter--me.is-hit-body{animation:cf-hit-me .55s ease-out}
.cf-fighter--foe.is-hit-head,.cf-fighter--foe.is-hit-body{animation:cf-hit-foe .55s ease-out}
.cf-fighter.is-hit-head .cf-svg,.cf-fighter.is-hit-body .cf-svg{animation:cf-flash .45s ease-out}
.cf-fighter.is-hit-head .cf-head{animation:cf-headshake .5s ease-out;transform-origin:150px 92px}
@keyframes cf-down-me{to{transform:rotate(-78deg) translate(-8%,24%);opacity:.9}}
@keyframes cf-down-foe{to{transform:rotate(78deg) translate(8%,24%);opacity:.9}}
.cf-fighter--me.is-down{animation:cf-down-me .6s cubic-bezier(.5,1.5,.5,1) forwards}
.cf-fighter--foe.is-down{animation:cf-down-foe .6s cubic-bezier(.5,1.5,.5,1) forwards}
@keyframes cf-win{0%,100%{transform:translateY(0)}30%{transform:translateY(-16%) rotate(-4deg)}60%{transform:translateY(0)}80%{transform:translateY(-8%) rotate(3deg)}}
@keyframes cf-flap{from{transform:rotate(0)}to{transform:rotate(-22deg)}}
.cf-fighter.is-win{animation:cf-win .9s ease-in-out infinite}
.cf-fighter.is-win .cf-wing{animation:cf-flap .35s ease-in-out infinite alternate;transform-origin:100px 118px}

/* impact text */
.cf-impact{position:absolute;left:50%;top:40%;z-index:6;font-size:26px;font-weight:900;letter-spacing:.02em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.55);pointer-events:none;white-space:nowrap;animation:cf-impact .9s ease-out forwards}
.cf-impact--hit{color:#ffe08a}.cf-impact--miss{color:#ff8a8a}.cf-impact--ko{color:#ff5c5c}
@keyframes cf-impact{0%{transform:translate(-50%,-50%) scale(.4) rotate(-8deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15) rotate(2deg);opacity:1}70%{transform:translate(-50%,-60%) scale(1);opacity:1}100%{transform:translate(-50%,-85%) scale(.95);opacity:0}}

/* feathers */
.cf-feather{position:absolute;width:10px;height:5px;border-radius:5px;z-index:4;opacity:0;pointer-events:none;animation:cf-feather 1s ease-out forwards}
@keyframes cf-feather{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

/* result card */
.cf-result{position:absolute;left:50%;top:50%;z-index:8;min-width:196px;padding:14px 22px 16px;border-radius:18px;text-align:center;background:rgba(10,14,34,.88);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 16px 40px rgba(0,0,0,.45);animation:cf-result .45s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes cf-result{from{transform:translate(-50%,-50%) scale(.6);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.cf-result__t{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.cf-result__x{font-size:38px;line-height:1.1;font-weight:900;color:#fff;margin:4px 0 3px}
.cf-result--win .cf-result__x{color:#6ff0a3}.cf-result--lose .cf-result__x{color:#ff7b7b}
.cf-result__m{display:flex;align-items:center;justify-content:center;gap:5px;font-size:14px;font-weight:700;color:#ffd66e}
.cf-result--lose .cf-result__m{color:rgba(255,255,255,.6);font-weight:500;font-size:12px}

/* ---------- hint + ladder ---------- */
.cf-hint{margin:12px 4px 10px;font-size:13px;line-height:1.45;color:#5c6b8a}
.cf-hint b{color:#1b2a4a;font-weight:700}
.cf-ladder{display:flex;gap:6px;overflow-x:auto;padding:0 2px 6px;margin-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cf-ladder::-webkit-scrollbar{display:none}
.cf-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;min-width:64px;padding:6px 10px;border-radius:10px;background:#fff;border:1px solid #e3e8f2}
.cf-chip small{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#7c8aa5;line-height:1;white-space:nowrap}
.cf-chip b{font-size:14px;font-weight:800;color:#1b2a4a;margin-top:3px}
.cf-chip--done{background:#1b2a4a;border-color:#1b2a4a}.cf-chip--done small{color:rgba(255,255,255,.6)}.cf-chip--done b{color:#fff}
.cf-chip--next{border-style:dashed;border-color:#9cb3ff;background:#f3f6ff}.cf-chip--next b{color:#3b63f0}

/* ---------- panel ---------- */
.cf-panel{background:#fff;border-radius:18px;padding:14px;box-shadow:0 6px 24px rgba(20,30,60,.08)}
.cf-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7c8aa5;margin:0 2px 8px}
.cf-lvl{text-transform:none;letter-spacing:0;font-size:12px;font-weight:700;color:#3b63f0;background:#eef2ff;padding:3px 9px;border-radius:8px}
.cf-betrow{display:flex;gap:6px;margin-bottom:14px}
.cf-field{flex:1;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:12px;background:#f2f4f9;min-width:0}
.cf-field img{width:22px;height:22px;border-radius:50%;flex:0 0 auto}
.cf-field input{flex:1;min-width:0;width:100%;height:100%;margin:0;border:0;background:transparent;font-size:17px;font-weight:700;color:#1b2a4a;outline:0;padding:0;box-shadow:none;font-family:inherit}
.cf-field input:disabled{opacity:.6}
.cf-q{flex:0 0 auto;width:46px;height:44px;border:0;border-radius:12px;background:#f2f4f9;font-size:13px;font-weight:700;color:#3b4a6b;cursor:pointer;transition:background .15s}
.cf-q:active{background:#e2e7f2}
.cf-q:disabled{opacity:.5;cursor:default}
.cf-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.cf-level{height:38px;border:0;border-radius:10px;background:#f2f4f9;font-size:13px;font-weight:700;color:#3b4a6b;cursor:pointer;transition:background .15s,color .15s}
.cf-level.is-on{background:#1b2a4a;color:#fff}
.cf-level:disabled{opacity:.6;cursor:default}
.cf-lvlinfo{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:#7c8aa5;margin-bottom:14px}
.cf-lvlinfo span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.cf-lvlinfo b{color:#1b2a4a;font-weight:700}
.cf-dot{display:inline-block;width:7px;height:7px;border-radius:50%}
.cf-dot--head{background:#e03131}.cf-dot--body{background:#1c7ed6}
.cf-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;border:0;border-radius:12px;font-size:15px;font-weight:700;color:#fff;cursor:pointer;transition:transform .1s,opacity .2s,box-shadow .2s}
.cf-btn:active{transform:scale(.985)}
.cf-btn:disabled{opacity:.55;cursor:default}
.cf-btn--play{background:linear-gradient(135deg,#5b8cff,#2f5bea);box-shadow:0 8px 20px rgba(59,99,240,.3)}
.cf-btn--take{height:44px;margin-top:8px;background:linear-gradient(135deg,#34c77b,#1f9d5a);box-shadow:0 8px 20px rgba(31,157,90,.28)}
.cf-btn--take:disabled{background:#eef1f7;color:#9aa6bf;box-shadow:none;opacity:1}
.cf-hits{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cf-hit{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:10px 12px;min-height:60px;border:0;border-radius:12px;color:#fff;text-align:left;cursor:pointer;transition:transform .1s,filter .2s,opacity .2s}
.cf-hit:active{transform:scale(.98)}
.cf-hit:disabled{filter:grayscale(.35);opacity:.6;cursor:default}
.cf-hit--head{background:linear-gradient(135deg,#ff6b6b,#d92d2d);box-shadow:0 8px 18px rgba(217,45,45,.25)}
.cf-hit--body{background:linear-gradient(135deg,#4dabf7,#1c6fd6);box-shadow:0 8px 18px rgba(28,111,214,.25)}
.cf-hit__row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.cf-hit__t{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:800;white-space:nowrap}
.cf-hit__t i{font-size:13px;opacity:.9}
.cf-hit__n{font-size:12px;font-weight:800;padding:3px 7px;border-radius:8px;background:rgba(0,0,0,.22);white-space:nowrap}
.cf-hit__s{font-size:11px;font-weight:600;opacity:.85;white-space:nowrap}
.cf-fair{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:10px;color:#9aa6bf}
.cf-fair code{font-family:ui-monospace,Menlo,Consolas,monospace;background:#f2f4f9;padding:2px 6px;border-radius:6px;color:#5c6b8a}

@media (max-width:359px){
  .cf-hit__t i{display:none}
  .cf-q{width:40px}
  .cf-coef{min-width:76px;padding:5px 9px 6px}.cf-coef b{font-size:18px}
}
/* v2.1 text fix */ .cf-hp__name{color:rgba(255,255,255,.88)!important} .cf-coef small{color:rgba(255,255,255,.6)!important} .cf-coef b{color:#fff!important} .cf-coef.is-win b{color:#6ff0a3!important} .cf-coef.is-lose b{color:#ff7b7b!important} .cf-coef em{color:#ffd66e!important} .cf-result__t{color:rgba(255,255,255,.75)!important} .cf-result__x{color:#fff!important} .cf-result--win .cf-result__x{color:#6ff0a3!important} .cf-result--lose .cf-result__x{color:#ff7b7b!important} .cf-result__m{color:#ffd66e!important} .cf-result--lose .cf-result__m{color:rgba(255,255,255,.7)!important} .cf-impact{color:#fff!important} .cf-impact--hit{color:#ffe08a!important} .cf-impact--miss{color:#ff8a8a!important} .cf-impact--ko{color:#ff5c5c!important} .cf-hit,.cf-hit span,.cf-hit i{color:#fff!important} .cf-btn,.cf-btn span,.cf-btn i{color:#fff!important} .cf-btn--take:disabled,.cf-btn--take:disabled span,.cf-btn--take:disabled i{color:#9aa6bf!important} .cf-level.is-on{color:#fff!important;background:#1b2a4a!important} .cf-chip--done small{color:rgba(255,255,255,.6)!important} .cf-chip--done b{color:#fff!important} .cf-arena--over .cf-hud{opacity:0}
/* v2.2 card+flat */ .cf-page{background:#fff;border-radius:24px;padding:12px 12px 16px;box-shadow:0 6px 24px rgba(20,30,60,.08);margin:0 auto 16px} .cf-arena{box-shadow:none} .cf-hint{margin:12px 2px 10px} .cf-chip{background:#f2f4f9;border-color:#e3e8f2} .cf-chip--next{background:#eef2ff;border-color:#9cb3ff} .cf-chip--done{background:#1b2a4a;border-color:#1b2a4a} .cf-panel{background:transparent;box-shadow:none;padding:0;margin-top:6px} .cf-btn--play{background:#3b63f0;box-shadow:none} .cf-btn--take{background:#22b06b;box-shadow:none} .cf-btn--take:disabled{background:#eef1f7} .cf-hit--head{background:#e03131;box-shadow:none} .cf-hit--body{background:#1c7ed6;box-shadow:none} .cf-fair{margin-top:12px}
/* v2.3 hint */ .cf-hint{font-size:12px!important;line-height:1.4!important;color:#7c8aa5!important;margin:10px 2px 8px} .cf-hint b{font-size:12px!important;color:#1b2a4a!important}
/* v2.4 dark */ body:not(.light-theme) .cf-page{background:#232a3b;box-shadow:0 6px 24px rgba(0,0,0,.35);color:#e8ecf7} body:not(.light-theme) .cf-hint{color:#9aa6bf!important} body:not(.light-theme) .cf-hint b{color:#e8ecf7!important} body:not(.light-theme) .cf-chip{background:#2c3447;border-color:#3a4358} body:not(.light-theme) .cf-chip small{color:#9aa6bf} body:not(.light-theme) .cf-chip b{color:#e8ecf7} body:not(.light-theme) .cf-chip--next{background:#26304a;border-color:#4a6cf7} body:not(.light-theme) .cf-chip--next b{color:#8fa8ff} body:not(.light-theme) .cf-chip--done{background:#3b63f0;border-color:#3b63f0} body:not(.light-theme) .cf-label{color:#9aa6bf} body:not(.light-theme) .cf-lvl{background:#26304a;color:#8fa8ff} body:not(.light-theme) .cf-field{background:#2c3447} body:not(.light-theme) .cf-field input{color:#e8ecf7} body:not(.light-theme) .cf-q{background:#2c3447;color:#c7cfe0} body:not(.light-theme) .cf-q:active{background:#37405a} body:not(.light-theme) .cf-level{background:#2c3447;color:#c7cfe0} body:not(.light-theme) .cf-level.is-on{background:#3b63f0!important;color:#fff!important} body:not(.light-theme) .cf-lvlinfo{color:#9aa6bf} body:not(.light-theme) .cf-lvlinfo b{color:#e8ecf7} body:not(.light-theme) .cf-btn--take:disabled{background:#2c3447} body:not(.light-theme) .cf-btn--take:disabled,body:not(.light-theme) .cf-btn--take:disabled span,body:not(.light-theme) .cf-btn--take:disabled i{color:#6b778f!important} body:not(.light-theme) .cf-fair{color:#6b778f} body:not(.light-theme) .cf-fair code{background:#2c3447;color:#9aa6bf}
/* v2.5 dark match */ body:not(.light-theme) .cf-page{background:#1b2130;box-shadow:none} body:not(.light-theme) .cf-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.06)} body:not(.light-theme) .cf-chip--next{background:rgba(59,99,240,.14);border-color:rgba(120,150,255,.55)} body:not(.light-theme) .cf-field{background:rgba(255,255,255,.06)} body:not(.light-theme) .cf-q{background:rgba(255,255,255,.06)} body:not(.light-theme) .cf-q:active{background:rgba(255,255,255,.12)} body:not(.light-theme) .cf-level{background:rgba(255,255,255,.06)} body:not(.light-theme) .cf-lvl{background:rgba(59,99,240,.16)} body:not(.light-theme) .cf-btn--take:disabled{background:rgba(255,255,255,.06)} body:not(.light-theme) .cf-fair code{background:rgba(255,255,255,.06)}
/* v2.6 dice-like fields */ body:not(.light-theme) .cf-field{background:#151a26} body:not(.light-theme) .cf-q{background:#252b3c;color:#c7cfe0} body:not(.light-theme) .cf-level{background:#252b3c} body:not(.light-theme) .cf-chip{background:#151a26;border-color:#151a26} body:not(.light-theme) .cf-chip--next{background:#151a26;border-color:rgba(120,150,255,.5)} body:not(.light-theme) .cf-btn--take:disabled{background:#252b3c} body:not(.light-theme) .cf-fair code{background:#151a26}
/* v2.7 exact history color */ body:not(.light-theme) .cf-page{background:#1a1d29} body:not(.light-theme) .cf-field{background:#222a3d} body:not(.light-theme) .cf-q{background:#222a3d} body:not(.light-theme) .cf-q:active{background:#2b344a} body:not(.light-theme) .cf-level{background:#222a3d} body:not(.light-theme) .cf-chip{background:#222a3d;border-color:#222a3d} body:not(.light-theme) .cf-chip--next{background:#222a3d;border-color:rgba(120,150,255,.5)} body:not(.light-theme) .cf-btn--take:disabled{background:#222a3d} body:not(.light-theme) .cf-fair code{background:#222a3d} body:not(.light-theme) .cf-lvl{background:#222a3d}
/* v2.8 light chips + dodge */ .cf-chip--done{background:#e6ecff!important;border-color:#c9d6ff!important} .cf-chip--done small{color:#5b7bd6!important} .cf-chip--done b{color:#3b63f0!important} .cf-level.is-on{background:#3b63f0!important} body:not(.light-theme) .cf-chip--done{background:#3b63f0!important;border-color:#3b63f0!important} body:not(.light-theme) .cf-chip--done small{color:rgba(255,255,255,.7)!important} body:not(.light-theme) .cf-chip--done b{color:#fff!important} @keyframes cf-dodge-me{0%{transform:translate(0,0)}40%{transform:translate(-18%,-10%)}100%{transform:translate(0,0)}} .cf-fighter--me.is-dodge{animation:cf-dodge-me .45s ease-out} .cf-impact--dodge{color:#8fd3ff!important}
/* v2.9 keno-like */ .cf-page{padding:14px 14px 18px;border-radius:28px} .cf-arena{border-radius:20px} .cf-hint{display:block;background:#fff;border-radius:16px;padding:10px 14px;box-shadow:0 4px 16px rgba(20,30,60,.08);text-align:center;font-size:13px!important;line-height:1.45!important;color:#5c6b8a!important;margin:12px 0 10px!important} .cf-hint b{color:#1b2a4a!important;font-size:13px!important} .cf-ladder{gap:8px;margin-bottom:6px} .cf-chip{border-radius:14px;min-width:72px;padding:8px 12px} .cf-panel{background:#fff;border-radius:24px;padding:16px;box-shadow:0 4px 18px rgba(20,30,60,.07);border:1px solid #eef1f6;margin-top:10px} .cf-label{text-transform:none;letter-spacing:0;font-size:16px;font-weight:500;color:#8a97b0;margin:0 2px 10px} .cf-lvl{font-size:13px} .cf-betrow{display:flex;gap:8px;margin-bottom:16px;width:100%;max-width:100%} .cf-field{flex:1 1 38%;min-width:0;overflow:hidden;height:52px;border-radius:14px;padding:0 14px} .cf-field img{width:26px;height:26px} .cf-field input{font-size:18px;min-width:0!important;width:100%!important;max-width:100%} .cf-q{flex:1 1 0!important;width:auto!important;min-width:0!important;height:52px!important;padding:0!important;margin:0!important;border-radius:14px!important;font-size:15px!important;font-weight:600!important;color:#5c6b8a!important} .cf-levels{gap:8px;margin-bottom:10px} .cf-level{height:48px;border-radius:14px;font-size:15px;padding:0!important} .cf-lvlinfo{font-size:13px;margin-bottom:16px} .cf-btn{height:56px;border-radius:18px;font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.02em} .cf-btn--play{background:#3b7cf7!important} .cf-btn--take{height:52px;font-size:16px} .cf-hits{gap:8px} .cf-hit{border-radius:14px;min-height:64px;padding:12px 14px} body:not(.light-theme) .cf-panel{background:#20263a;border-color:#20263a;box-shadow:none} body:not(.light-theme) .cf-hint{background:#20263a;box-shadow:none;color:#9aa6bf!important} body:not(.light-theme) .cf-field,body:not(.light-theme) .cf-q,body:not(.light-theme) .cf-level{background:#151a26} body:not(.light-theme) .cf-q{color:#c7cfe0!important}
/* v3.0 kick + peck */ @keyframes cf-kick-me{0%{transform:translate(0,0) rotate(0)}30%{transform:translate(8%,-18%) rotate(-14deg)}55%{transform:translate(34%,-12%) rotate(-20deg)}100%{transform:translate(0,0) rotate(0)}} @keyframes cf-kick-foe{0%{transform:translate(0,0) rotate(0)}30%{transform:translate(-8%,-18%) rotate(14deg)}55%{transform:translate(-34%,-12%) rotate(20deg)}100%{transform:translate(0,0) rotate(0)}} .cf-fighter--me.is-kick{animation:cf-kick-me .6s cubic-bezier(.3,1.2,.5,1)} .cf-fighter--foe.is-kick{animation:cf-kick-foe .6s cubic-bezier(.3,1.2,.5,1)} @keyframes cf-legkick{0%{transform:rotate(0)}25%{transform:rotate(35deg)}55%{transform:rotate(-95deg)}100%{transform:rotate(0)}} @keyframes cf-legtuck{0%{transform:rotate(0)}50%{transform:rotate(45deg)}100%{transform:rotate(0)}} .cf-fighter.is-kick .cf-leg--f{animation:cf-legkick .6s ease-out;transform-origin:128px 164px} .cf-fighter.is-kick .cf-leg--b{animation:cf-legtuck .6s ease-out;transform-origin:102px 164px} @keyframes cf-peck{0%{transform:rotate(0)}40%{transform:rotate(22deg) translate(8px,6px)}100%{transform:rotate(0)}} .cf-fighter.is-attack .cf-head{animation:cf-peck .5s ease-out;transform-origin:130px 96px}