/* ══════════════════════════════════════════════════════════════════════════
   OCCULTON — CLAW MACHINE CSS v2.0
   Заменяет clawmachine.css и предыдущий clawmachine-v2.css
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
#tab-claw1 { display:flex; flex-direction:column; height:auto; overflow-y:auto; }
#clawMachineList1 { display:flex; flex-direction:column; min-height:0; }
#tab-claw { overflow-y:auto; -webkit-overflow-scrolling:touch; }
#clawMachineList { display:flex; flex-direction:column; justify-content:center; flex:1; min-height:0; }

.claw-game-wrap { display:flex; flex-direction:column; align-items:stretch; gap:0; }

/* ── CANVAS WRAPPER ─────────────────────────────────────────────────────── */
.claw-canvas-wrap {
  width:300px; height:360px;
  flex-shrink:0; flex-grow:0; margin:0 auto;
  position:relative; overflow:hidden;
  border-radius:14px;
}

.claw-canvas {
  width:300px !important; height:360px !important;
  display:block; touch-action:none;
  will-change:transform; transform:translateZ(0);
  border-radius:14px;
}

/* ── SCANLINES ──────────────────────────────────────────────────────────── */
.claw-canvas-wrap::after {
  content:''; pointer-events:none; border-radius:14px;
  position:absolute; inset:0; z-index:8;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.055) 2px,rgba(0,0,0,0.055) 4px);
  animation:clawScanRoll 9s linear infinite;
}
@keyframes clawScanRoll { from{background-position-y:0} to{background-position-y:8px} }

/* ── VIGNETTE ───────────────────────────────────────────────────────────── */
.claw-canvas-wrap::before {
  content:''; pointer-events:none; border-radius:14px;
  position:absolute; inset:0; z-index:7;
  background:radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,0.52) 100%);
}

/* ── HUD OVERLAY ────────────────────────────────────────────────────────── */
.claw-hud-overlay {
  position:absolute; top:8px; left:10px; right:10px;
  display:flex; align-items:center; gap:10px;
  pointer-events:none; z-index:10;
}
.claw-health-hud {
  display:flex; align-items:center; gap:5px;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.07); border-radius:8px; padding:4px 8px;
}
.claw-hud-label { font-size:10px; color:#475569; }
.claw-hud-val   { font-size:10px; color:#94a3b8; }
.claw-health-track {
  width:58px; height:5px; background:rgba(255,255,255,0.09);
  border-radius:3px; overflow:hidden;
}
.claw-health-fill { height:100%; border-radius:3px; transition:width .5s,background .5s; }
.claw-rush-badge {
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  border-radius:8px; padding:3px 8px; font-size:11px; font-weight:700;
  animation:clawPulse 1.4s ease-in-out infinite;
}
.claw-spectators-badge {
  margin-left:auto; font-size:11px; color:#64748b;
  background:rgba(0,0,0,0.4); border-radius:8px; padding:3px 8px;
}

/* ── TURN TIMER ─────────────────────────────────────────────────────────── */
.claw-turn-timer {
  position:absolute; bottom:118px; left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.58); border-radius:8px; padding:3px 10px;
  font-size:12px; color:#f59e0b; font-weight:600; pointer-events:none; z-index:10;
  transition:color .3s;
}
.claw-turn-timer--urgent {
  color:#ef4444 !important;
  animation:clawTimerUrgent .5s ease-in-out infinite;
}
@keyframes clawTimerUrgent { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 10px rgba(239,68,68,.55)} }

/* ── MACHINE TABS ───────────────────────────────────────────────────────── */
.claw-tabs-row {
  display:flex; gap:8px; padding:8px 0;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; flex-shrink:0;
  border-top:1px solid rgba(255,255,255,0.06);
}
.claw-tabs-row::-webkit-scrollbar { display:none; }
.claw-machine-tab {
  flex:0 0 auto; min-width:96px; padding:7px 10px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; cursor:pointer; text-align:center; transition:all .22s;
}
.claw-machine-tab.active {
  background:rgba(212,168,81,0.12);
  border-color:rgba(212,168,81,0.45);
  box-shadow:0 0 12px rgba(212,168,81,0.15);
}
.claw-machine-tab.is-broken { opacity:.5; filter:saturate(.4); }
.claw-tab-icon  { display:block; font-size:20px; }
.claw-tab-name  { display:block; font-size:11px; color:#94a3b8; margin-top:2px; white-space:nowrap; }
.claw-tab-cost  { display:block; font-size:11px; color:#f6c90e; }

/* ── CONTROLS BAR ───────────────────────────────────────────────────────── */
.claw-controls-bar {
  position:absolute; bottom:26px; left:16px; right:16px;
  display:flex; flex-direction:column; gap:4px;
  background:transparent; border:none; padding:0; z-index:10;
}
.claw-price-box {
  display:flex; flex-direction:row; align-items:baseline; gap:5px;
  background:none; border:none; padding:0 2px;
  align-self:flex-start;
}
.claw-price-label { font-size:9px; color:rgba(255,255,255,0.32); text-transform:uppercase; letter-spacing:.5px; }
.claw-price-val   { font-size:14px; font-weight:700; color:#f6c90e; }
.claw-btn-row { display:flex; justify-content:space-between; align-items:center; }

/* ── PLAY BUTTON ────────────────────────────────────────────────────────── */
.claw-play-btn {
  width:110px; height:48px; border-radius:12px;
  font-size:15px; font-weight:800; letter-spacing:.5px;
  border:none; cursor:pointer;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--machine-color,#d4a851) 130%,#fff) 0%,
    var(--machine-color,#d4a851) 45%,
    color-mix(in srgb,var(--machine-color,#d4a851) 70%,#000) 100%);
  color:#0a0a12;
  box-shadow:
    0 2px 0 color-mix(in srgb,var(--machine-color,#d4a851) 50%,#000),
    0 4px 14px color-mix(in srgb,var(--machine-color,#d4a851) 40%,transparent),
    inset 0 1px 0 rgba(255,255,255,0.35);
  transition:all .1s ease; transform:translateY(0);
}
.claw-play-btn:active {
  transform:translateY(2px);
  box-shadow:
    0 0 0 color-mix(in srgb,var(--machine-color,#d4a851) 50%,#000),
    0 2px 6px color-mix(in srgb,var(--machine-color,#d4a851) 40%,transparent),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
.claw-play-btn--stop   { background:linear-gradient(135deg,#f59e0b,#ef4444)!important; box-shadow:0 0 22px rgba(239,68,68,.5)!important; animation:clawBtnPulse .55s ease-in-out infinite; }
.claw-play-btn--queue,
.claw-play-btn--wait   { background:rgba(255,255,255,.07)!important; color:#475569!important; box-shadow:none!important; cursor:not-allowed; }
.claw-play-btn--active { animation:clawBtnPulse .9s ease-in-out infinite; }

/* ── SABOTAGE BUTTON ────────────────────────────────────────────────────── */
.claw-sabotage-btn {
  height:48px; padding:0 14px; border:none; border-radius:12px;
  background:linear-gradient(160deg,#ff6b6b 0%,#dc2626 60%,#991b1b 100%);
  color:#fff; font-size:11px; font-weight:700; cursor:pointer;
  text-align:center; line-height:1.3; white-space:nowrap;
  box-shadow:0 2px 0 #7f1d1d,0 4px 12px rgba(220,38,38,0.4),inset 0 1px 0 rgba(255,255,255,0.25);
  transition:all .1s ease; transform:translateY(0);
}
.claw-sabotage-btn:active {
  transform:translateY(2px);
  box-shadow:0 0 0 #7f1d1d,0 2px 6px rgba(220,38,38,0.3);
}

/* ── DIRECTION CONTROLS ─────────────────────────────────────────────────── */
.claw-dir-controls {
  position:absolute; bottom:26px; left:16px; right:16px;
  display:flex; gap:8px; align-items:center; justify-content:space-between;
  background:transparent; border:none; padding:0; z-index:10;
}
.claw-arrows-group { display:flex; gap:10px; }
.claw-arrow-btn {
  width:58px; height:52px; border-radius:10px;
  background:rgba(255,255,255,0.08); border:2px solid rgba(255,255,255,0.20);
  color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; -webkit-user-select:none;
  touch-action:none; transition:background 100ms,transform 80ms;
}
.claw-arrow-btn:active { background:rgba(255,255,255,0.18); transform:scale(0.93); }

.claw-grab-circle {
  width:68px; height:68px; border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#ff6b6b,#dc2626);
  border:3px solid rgba(255,180,180,0.4); cursor:pointer;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
  box-shadow:0 4px 20px rgba(220,38,38,0.55),0 0 0 0 rgba(220,38,38,0.4);
  transition:transform 80ms,box-shadow 80ms;
  animation:clawGrabPulse 2s ease-in-out infinite;
}
.claw-grab-circle:active { transform:scale(0.91); box-shadow:0 2px 8px rgba(220,38,38,0.3); animation:none; }

/* ══════════════════════════════════════════════════════════════════════════
   WIN POPUP — Redesigned in claw-visual-patch-v2.js via JS
   Base structure kept here for initial render; JS overrides content.
   ══════════════════════════════════════════════════════════════════════════ */
.claw-result-popup {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.85); backdrop-filter:blur(16px);
  z-index:200; opacity:0; pointer-events:none; transition:opacity .28s ease;
}
.claw-result-popup.show { opacity:1; pointer-events:all; }
.claw-result-card {
  background:rgba(13,15,30,0.97); border:1.5px solid rgba(212,168,81,0.4);
  border-radius:24px; padding:0;
  text-align:center; min-width:272px;
  box-shadow:0 28px 70px rgba(0,0,0,.75);
}

/* Legacy fallback fields (used if JS patch hasn't run yet) */
.claw-result-emoji  { font-size:60px; display:block; padding:24px 0 8px; }
.claw-result-title  { font-size:20px; font-weight:800; margin-bottom:4px; padding:0 24px; }
.claw-result-sub    { font-size:13px; color:#64748b; margin-bottom:12px; padding:0 24px; }
.claw-result-reward { font-size:26px; font-weight:700; color:#f6c90e; margin-bottom:16px; }
.claw-result-close {
  width:100%; padding:14px;
  background:rgba(212,168,81,0.14)!important; border:1px solid rgba(212,168,81,0.3)!important;
  color:#f5cc70!important; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer;
}
.claw-result-nft-msg {
  font-size:12px; color:#64748b; margin-bottom:14px; padding:8px 12px;
  background:rgba(59,130,246,0.07); border:1px solid rgba(59,130,246,0.18); border-radius:8px;
  display:none;
}

/* ── LOADING / EMPTY / ERROR ────────────────────────────────────────────── */
.claw-loading { display:flex; align-items:center; justify-content:center; gap:8px; padding:40px 16px; color:#64748b; font-size:14px; }
.claw-spin    { display:inline-block; animation:clawSpin 1.2s linear infinite; }
.claw-error,
.claw-empty   { text-align:center; padding:32px 16px; color:#64748b; font-size:13px; }

/* ── ANIMATIONS ─────────────────────────────────────────────────────────── */
@keyframes clawGrabPulse  { 0%,100%{box-shadow:0 4px 20px rgba(220,38,38,.55),0 0 0 0 rgba(220,38,38,.3)} 50%{box-shadow:0 4px 20px rgba(220,38,38,.55),0 0 0 10px rgba(220,38,38,0)} }
@keyframes confettiFall   { 0%{transform:translateY(-10px) rotate(0);opacity:1} 100%{transform:translateY(100vh) rotate(720deg);opacity:0} }
@keyframes clawBtnPulse   { 0%,100%{box-shadow:0 0 18px rgba(239,68,68,.45)} 50%{box-shadow:0 0 34px rgba(239,68,68,.85)} }
@keyframes clawSpin       { to{transform:rotate(360deg)} }
@keyframes clawPulse      { 0%,100%{opacity:1} 50%{opacity:.65} }