/* 🏏 NUGGET CRICKET — the layer (js/cricket.js + js/cricketGL.js). Same school as blitz.css: a fixed
   fullscreen world div that only exists while body.cricket-mode is on, the polygon canvas under a 2D
   HUD canvas, smoothed up on purpose (the N64 smear is the look). The phone pad below is Blitz's pad
   under cricket names (.crkp*). */
#cricketWorld { position: fixed; inset: 0; display: none; z-index: 9990; background: #05060c; }
body.cricket-mode #cricketWorld { display: block; }
#cricketWorld canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; touch-action: none; cursor: crosshair; }
#cricketWorld canvas.crk-gl { pointer-events: none; }

/* ---- 📱 the phone pad (js/cricket.js crkPad*, ported from Blitz) -----------------------------
   Real buttons over the canvas: a floating stick on the left, a thumb arc of context buttons on
   the right (P0 the big one, P1–P3 around it, R0–R2 the receivers in screen order). Sizes are
   thumb-sized (66–88px; Apple's 44pt is a floor, not a target), clear of the screen's corner
   gesture zones via the safe-area insets. The arcade's top bar is hidden on a phone: Quit is in
   the pause sheet. */
body.cricket-mode.crk-touch .storm-hud { display: none !important; }
body.crk-touch #cricketWorld { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.crkp { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  --safeR: env(safe-area-inset-right, 0px); --safeL: env(safe-area-inset-left, 0px); --safeB: env(safe-area-inset-bottom, 0px);
  font-family: Impact, "Arial Black", sans-serif; }
.crkp button { font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: none; }
.crkp-b { position: absolute; pointer-events: auto; border-radius: 50%; border: 3px solid rgba(255,255,255,0.75);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c, #c8321f) 70%, white), var(--c, #c8321f) 55%, color-mix(in srgb, var(--c, #c8321f) 70%, black));
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0;
  box-shadow: 0 4px 0 rgba(0,0,0,0.45), 0 0 0 2px rgba(0,0,0,0.35); opacity: 0.86;
  font-style: italic; letter-spacing: 0.02em; text-shadow: 0 2px 0 rgba(0,0,0,0.55); transition: transform 0.06s, opacity 0.06s; }
.crkp-b.on { transform: translateY(3px) scale(0.94); box-shadow: 0 1px 0 rgba(0,0,0,0.45); opacity: 1; }
.crkp-l { font-size: 15px; line-height: 1; max-width: 92%; text-align: center; }
.crkp-s { font-size: 8px; line-height: 1; font-family: system-ui, sans-serif; font-weight: 800; font-style: normal; opacity: 0.85; }
.crkp-s:empty { display: none; }
.crkp-b[data-slot="P0"] { width: 88px; height: 88px; right: calc(26px + var(--safeR)); bottom: calc(22px + var(--safeB)); }
.crkp-b[data-slot="P0"] .crkp-l { font-size: 19px; }
.crkp-b[data-slot="P1"] { width: 68px; height: 68px; right: calc(128px + var(--safeR)); bottom: calc(16px + var(--safeB)); }
.crkp-b[data-slot="P2"] { width: 66px; height: 66px; right: calc(112px + var(--safeR)); bottom: calc(100px + var(--safeB)); }
.crkp-b[data-slot="P3"] { width: 66px; height: 66px; right: calc(34px + var(--safeR)); bottom: calc(122px + var(--safeB)); }
/* the receivers: a row in screen order, the icon's letter on each */
.crkp-b.rcv { width: 74px; height: 74px; }
.crkp-b[data-slot="R2"] { right: calc(22px + var(--safeR)); bottom: calc(22px + var(--safeB)); }
.crkp-b[data-slot="R1"] { right: calc(106px + var(--safeR)); bottom: calc(22px + var(--safeB)); }
.crkp-b[data-slot="R0"] { right: calc(190px + var(--safeR)); bottom: calc(22px + var(--safeB)); }
.crkp-b.rcv::before { content: attr(data-icon); font-size: 22px; line-height: 0.9; }
.crkp-b.rcv .crkp-l { font-size: 10px; font-family: system-ui, sans-serif; font-weight: 900; font-style: normal; }
/* the stick: a resting ghost, then wherever the thumb lands */
.crkp-stick { position: absolute; left: calc(34px + var(--safeL)); bottom: calc(26px + var(--safeB)); width: 108px; height: 108px;
  border-radius: 50%; border: 3px solid rgba(255,255,255,0.35); background: rgba(10,16,34,0.28);
  opacity: 0.55; transition: opacity 0.15s, border-color 0.1s, box-shadow 0.1s; }
/* live: centred on the thumb (js sets left/top to the touch point) */
.crkp-stick.live { transform: translate(-50%, -50%); opacity: 0.9; }
.crkp-stick.turbo { border-color: #ffd23a; box-shadow: 0 0 18px rgba(255,190,40,0.85), inset 0 0 14px rgba(255,190,40,0.5); }
.crkp-knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c9d2e8 60%, #8a94b0); box-shadow: 0 3px 0 rgba(0,0,0,0.4); }
.crkp-stick.turbo .crkp-knob { background: radial-gradient(circle at 35% 30%, #fff8d0, #ffd23a 60%, #c88a10); }
.crkp-stick::after { content: 'AIM: SHOTS · THE BOWLING MARKER'; position: absolute; left: 0; bottom: 100%; margin-bottom: 6px;
  white-space: nowrap; font: 800 9px system-ui, sans-serif; color: rgba(255,255,255,0.75); text-shadow: 0 1px 2px #000; }
.crkp-stick.live::after { content: none; }
.crkp-menu { position: absolute; pointer-events: auto; top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(10px + var(--safeR));
  width: 44px; height: 44px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.6); background: rgba(8,14,32,0.72); color: #fff; font-size: 16px; }
/* the sheets: pause, and "turn it sideways" */
.crkp-sheet, .crkp-rotate { position: absolute; inset: 0; pointer-events: auto; display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,14,0.78); backdrop-filter: blur(4px); padding: 16px; }
.crkp-sheet[hidden], .crkp-rotate[hidden], .crkp-b[hidden], .crkp-stick[hidden], .crkp-menu[hidden] { display: none; }
.crkp-card { display: flex; flex-direction: column; gap: 8px; width: min(320px, 100%); max-height: 100%; overflow: auto; text-align: center; color: #fff; }
.crkp-kick { font: 800 10px system-ui, sans-serif; letter-spacing: 0.2em; color: #ffd23a; }
.crkp-h { font-size: 30px; font-style: italic; line-height: 1; margin-bottom: 4px; }
.crkp-card p { font: 600 13px/1.4 system-ui, sans-serif; color: #c8d0e8; margin: 0 0 6px; }
.crkp-phone { font-size: 44px; line-height: 1; align-self: center; width: fit-content; pointer-events: none; animation: crkp-turn 1.6s ease-in-out infinite; }
@keyframes crkp-turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .crkp-phone { animation: none; } }
.crkp-card button { min-height: 46px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.25); background: #1a2340; color: #fff;
  font-size: 16px; font-style: italic; letter-spacing: 0.03em; }
.crkp-card .crkp-go { background: #c8321f; border-color: #ff8a6a; font-size: 20px; }
.crkp-card .crkp-quit { background: transparent; color: #ff9a8a; border-color: rgba(255,120,100,0.5); }
/* standing up: the arc shrinks a touch and sits higher off the home bar */
.crkp.tall .crkp-b[data-slot="P0"] { width: 80px; height: 80px; bottom: calc(34px + var(--safeB)); }
.crkp.tall .crkp-b.rcv { width: 66px; height: 66px; bottom: calc(34px + var(--safeB)); }
.crkp.tall .crkp-b[data-slot="R1"] { right: calc(96px + var(--safeR)); }
.crkp.tall .crkp-b[data-slot="R0"] { right: calc(170px + var(--safeR)); }
.crkp.tall .crkp-b[data-slot="P1"] { right: calc(116px + var(--safeR)); bottom: calc(28px + var(--safeB)); }
.crkp.tall .crkp-stick { left: calc(22px + var(--safeL)); bottom: calc(40px + var(--safeB)); }
/* a controller's highlight on the opponent cards (crkTierPadMove) */
#cricketWorld .ak-tier-card.crk-padsel { outline: 3px solid #ffd23a; outline-offset: 4px; transform: translateY(-4px) scale(1.03); }