/* ===========================================================================
 * jolt8 — Chicken Road styles
 * ======================================================================== */
.chk { max-width: 760px; margin: 0 auto; padding-bottom: 30px; }
/* the [hidden] attribute must beat the display rules below */
.chk [hidden] { display: none !important; }

/* top bar */
.chk-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.chk-bal-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--surface, #181b34); border: 1px solid var(--line, #2a2e50);
  border-radius: 99px; padding: 7px 14px; font-weight: 700; color: #ffe8a3; white-space: nowrap; }
.chk-bal-pill svg { color: #ffd23f; }
.chk-history { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: none; padding: 2px; }
.chk-history::-webkit-scrollbar { display: none; }
.chk-hp { font-size: 12.5px; font-weight: 800; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.05); white-space: nowrap; }
.chk-hp.h-blue { color: #34b3f1; } .chk-hp.h-purple { color: #b07bff; } .chk-hp.h-pink { color: #ff5dc8; }
.chk-hp.h-dead { color: #ff5d6e; background: rgba(255,93,110,.10); }

/* stage */
.chk-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 460px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line, #2a2e50); box-shadow: 0 18px 50px rgba(0,0,0,.45); background: #2b3450; }
.chk-stage canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
.chk-overlay { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: flex-start; justify-content: center; }
.chk-cash { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(8,10,24,.62); backdrop-filter: blur(4px); padding: 9px 22px; border-radius: 16px; border: 1px solid rgba(33,208,122,.4); }
.chk-cash-x { font-size: 30px; font-weight: 900; color: #4dffa0; line-height: 1; text-shadow: 0 0 16px rgba(33,208,122,.6); }
.chk-cash-amt { font-size: 14px; font-weight: 700; color: #cfeede; }
.chk-flash { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); font-size: 30px; font-weight: 900;
  padding: 12px 26px; border-radius: 16px; animation: chkPop .35s cubic-bezier(.2,1.4,.4,1); }
.chk-flash.win { color: #08210f; background: linear-gradient(180deg,#5dffa0,#21d07a); box-shadow: 0 10px 40px rgba(33,208,122,.5); }
.chk-flash.dead { color: #fff; background: linear-gradient(180deg,#ff6d7e,#e02744); box-shadow: 0 10px 40px rgba(224,39,68,.5); }
@keyframes chkPop { from { transform: translate(-50%,-50%) scale(.4); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
.chk-watermark { position: absolute; right: 12px; bottom: 8px; font-size: 12px; font-weight: 800; color: rgba(255,190,140,.35); pointer-events: none; }

/* cash-out WIN card */
.chk-win { position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  background: rgba(22,30,52,.82); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 18px 40px;
  box-shadow: 0 20px 55px rgba(0,0,0,.55); animation: chkWinPop .35s cubic-bezier(.2,1.45,.4,1); }
.chk-win-title { font-size: 19px; font-weight: 900; letter-spacing: 1.5px; color: #fff; }
.chk-win-mult { font-size: 42px; font-weight: 900; line-height: 1; color: #ffb01e; text-shadow: 0 2px 14px rgba(255,176,30,.45); }
.chk-win-amt { display: inline-flex; align-items: center; gap: 5px; font-size: 17px; font-weight: 800; color: #2fd877; }
.chk-win-amt .coin-ic { vertical-align: middle; }
@keyframes chkWinPop { from { transform: translate(-50%,-50%) scale(.5); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }

/* panel */
.chk-panel { margin-top: 14px; background: var(--surface, #181b34); border: 1px solid var(--line, #2a2e50); border-radius: 16px; padding: 14px; }
.chk-diff { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
.chk-diff-btn { padding: 10px 6px; border-radius: 11px; border: 1px solid var(--line, #2a2e50); background: var(--bg-3, #14172e);
  color: var(--muted, #8a8fc0); font-weight: 800; font-size: 13.5px; cursor: pointer; transition: .14s; }
.chk-diff-btn[data-diff=easy].active     { border-color: #21d07a; color: #21d07a; box-shadow: 0 0 0 1px #21d07a inset; }
.chk-diff-btn[data-diff=medium].active   { border-color: #ffd23f; color: #ffd23f; box-shadow: 0 0 0 1px #ffd23f inset; }
.chk-diff-btn[data-diff=hard].active     { border-color: #ff9f43; color: #ff9f43; box-shadow: 0 0 0 1px #ff9f43 inset; }
.chk-diff-btn[data-diff=hardcore].active { border-color: #ff5d6e; color: #ff5d6e; box-shadow: 0 0 0 1px #ff5d6e inset; }
.chk-diff.locked { opacity: .5; pointer-events: none; }

.chk-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; transition: opacity .2s; }
.chk-amt-box { display: flex; align-items: center; background: var(--bg-3, #14172e); border: 1px solid var(--line, #2a2e50); border-radius: 11px; overflow: hidden; }
.chk-amt-pm { width: 40px; height: 44px; border: 0; background: transparent; color: var(--text, #e8eaff); font-size: 22px; cursor: pointer; }
.chk-amt-pm:hover { background: rgba(255,255,255,.06); }
.chk-amt-input { width: 92px; height: 44px; border: 0; background: transparent; color: var(--text, #fff); text-align: center; font-size: 17px; font-weight: 800; }
.chk-amt-input::-webkit-outer-spin-button, .chk-amt-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.chk-quick { display: flex; gap: 7px; flex-wrap: wrap; }
.chk-quick button { padding: 9px 13px; border-radius: 9px; border: 1px solid var(--line, #2a2e50); background: var(--bg-3, #14172e); color: var(--muted, #aeb2e0); font-weight: 700; font-size: 13px; cursor: pointer; }
.chk-quick button:hover { color: #fff; border-color: var(--line-2, #3a3f6a); }
.chk-q-mul { color: #ffd23f !important; }

.chk-actions { margin-top: 14px; }
.chk-bigbtn { width: 100%; border: 0; border-radius: 13px; padding: 13px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: transform .08s, filter .15s; }
.chk-bigbtn:active { transform: scale(.985); }
.chk-bb-main { font-size: 17px; font-weight: 900; letter-spacing: .5px; }
.chk-bb-sub { font-size: 13px; font-weight: 700; opacity: .85; }
.chk-bigbtn.bet { background: linear-gradient(180deg, #3DC55B, #229A46); color: #fff; }
.chk-bigbtn.bet .chk-bb-sub { display: none; }
.chk-bigbtn.bet:disabled { filter: grayscale(.5) brightness(.7); cursor: not-allowed; }
.chk-play-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.chk-bigbtn.cash { background: linear-gradient(180deg,#ffd23f,#f5a623); color: #2a1800; }
.chk-bigbtn.cash.dim { filter: grayscale(.6) brightness(.7); }
.chk-bigbtn.go { background: linear-gradient(180deg, #3DC55B, #229A46); color: #fff; }
.chk-bigbtn.go .chk-bb-sub { display: none; }

.chk-msg { min-height: 0; text-align: center; margin-top: 10px; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .2s; }
.chk-msg.show { opacity: 1; }
.chk-msg.ok { color: #4dffa0; } .chk-msg.err { color: #ff6d7e; }

.chk-rule-note { color: var(--muted, #8a8fc0); font-size: 13px; margin: 8px 0 0; }

@media (max-width: 560px) {
  .chk-diff { gap: 6px; }
  .chk-diff-btn { font-size: 12px; padding: 9px 4px; }
  .chk-controls { gap: 8px; }
  .chk-quick button { padding: 8px 10px; }
  .chk-stage { aspect-ratio: 4 / 3; }
}