/* "Přejdi Americkou" — loaded alongside crystal.css, which already
   defines :root palette, html/body basics, #backlink, #corner and the
   shared .game-hidden / .game-switch toggle rules. Only game-specific
   classes live here, all prefixed cx- to avoid clashing with the other
   games on the same page.

   Frogger-style fixed board: a static stack of 7 traffic lanes between
   a start sidewalk (bottom) and a home strip with 5 slots (top). One tap
   crosses one lane; lives + a per-attempt timer replace the old endless
   tap counter. */

.cx-stage{
  position:fixed;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

.cx-hud{
  position:fixed;bottom:22px;left:22px;z-index:5;
  font-family:'SF Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:.72rem;letter-spacing:.03em;color:var(--muted);
  display:flex;flex-direction:column;gap:3px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;padding:12px 14px;
  backdrop-filter:blur(6px);
  min-width:130px;
}
.cx-hud .title{color:#fff;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.66rem;margin-bottom:4px;opacity:.8;}
.cx-hud .cx-timer-title{margin-top:8px;}
.cx-lives{font-size:.9rem;letter-spacing:2px;line-height:1;}
.cx-timer-bar{
  width:100%;height:6px;border-radius:999px;overflow:hidden;margin-top:2px;
  background:rgba(255,255,255,0.08);
}
.cx-timer-fill{
  height:100%;width:100%;
  background:var(--gold);
  transition:width .2s linear, background .2s linear;
}
.cx-timer-fill.warn{background:#e0a030;}
.cx-timer-fill.danger{background:#d9424a;}

.cx-score-box{
  position:fixed;top:22px;right:26px;z-index:5;
  text-align:right;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;padding:12px 16px;
  backdrop-filter:blur(6px);
  min-width:140px;
}
.cx-score-box .title{color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.62rem;margin-bottom:6px;}
.cx-score-box .value{
  font-family:'SF Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:1.7rem;font-weight:700;color:var(--gold);line-height:1;
}
.cx-score-box .best{
  font-family:'SF Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:.68rem;color:var(--muted);margin-top:4px;
}
.cx-score-box .round{
  font-family:'SF Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:.66rem;color:var(--muted);margin-top:4px;
}

.cx-field{
  position:relative;
  width:min(92vw, 420px);
  display:flex;flex-direction:column;
  border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.08);
}

.cx-home{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:clamp(30px, 6vh, 40px);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0 10px, transparent 10px 20px),
    #7fae7a;
}
.cx-home-slot{
  width:20px;height:20px;border-radius:6px;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(0,0,0,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;color:#1c3a1c;
}
.cx-home-slot.filled{
  background:var(--gold);
  border-color:rgba(0,0,0,0.25);
}

.cx-road{
  display:flex;flex-direction:column;
}

.cx-lane{
  position:relative;
  height:clamp(32px, 6.5vh, 44px);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0 18px, transparent 18px 34px) bottom / 100% 3px no-repeat,
    #33363f;
  border-bottom:1px solid rgba(0,0,0,0.25);
  overflow:hidden;
}
.cx-lane:nth-child(even){ background-color:#3a3d47; }
.cx-lane.is-current{
  /* the ONE lane Aleš is actually standing in right now — horizontal
     counterpart to .cx-corridor below. Where the two overlap is the exact
     cell a vehicle has to enter to be dangerous this instant; traffic in
     any other lane, even the one right next to it, can't touch him. */
  box-shadow:inset 0 0 0 1px rgba(255,201,60,0.45);
  background-color:rgba(255,201,60,0.07);
}

.cx-vehicle{
  position:absolute;top:50%;z-index:1;
  transform:translateY(-50%);
  height:60%;
  /* the box below is the ACTUAL hit zone used by the collision check in
     crossing.js (occStart/occEnd = this element's left/width) — it used to
     be invisible (just a centered emoji floating in empty space), so a
     wide vehicle (bus/trolejbus) could clip Aleš well before its icon
     visually reached him. Rendering the box itself as a solid body means
     what you see IS what can hit you, same as the original Frogger's
     sprites always filling their own collision rect. */
  border-radius:7px;
  background:rgba(8,10,16,0.4);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(1.1rem, 4.2vw, 1.5rem);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.4));
  white-space:nowrap;
}
.cx-vehicle.rev{ transform:translateY(-50%) scaleX(-1); }

.cx-sidewalk{
  position:relative;
  height:clamp(34px, 7vh, 46px);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 10px, transparent 10px 20px),
    #c9c2b4;
}

.cx-corridor{
  /* Aleš's own crossing column — always centered, see PLAYER_HIT_HALF in
     crossing.js, which also sets this element's left/width so the two
     never drift apart. Runs behind the vehicles/player, in front of the
     lane backgrounds, so the "real" danger zone in each lane (not just
     the one Aleš is currently on) reads at a glance. */
  position:absolute;top:0;bottom:0;z-index:0;
  background:rgba(255,255,255,0.05);
  border-left:1px dashed rgba(255,255,255,0.2);
  border-right:1px dashed rgba(255,255,255,0.2);
  pointer-events:none;
}

.cx-player-wrap{
  position:absolute;left:50%;bottom:0;z-index:2;
  transform:translateX(-50%);
  width:clamp(28px, 5.8vh, 40px);
  height:clamp(28px, 5.8vh, 40px);
  display:flex;align-items:center;justify-content:center;
  transition:bottom .36s cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-reduced-motion: reduce){
  .cx-player-wrap{transition:none;}
}

.cx-player{
  position:relative;z-index:2;
  font-size:clamp(1.5rem, 5vh, 2.05rem);
}

.cx-splat{
  /* lives in the markup nested inside .cx-player-wrap (so it can be
     positioned "at Aleš"), but that box is small — position:fixed takes
     the multi-line death caption out of that flow entirely and centers
     it on the screen, so it can never spill past the board's edges
     regardless of how big or small the player token is. */
  position:fixed;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;
  opacity:0;pointer-events:none;
  transition:opacity .15s ease;
  text-align:center;padding:0 6px;
}
.cx-splat.show{opacity:1;}
.cx-splat .blob{
  position:absolute;inset:-40px;
  background:
    radial-gradient(circle at 38% 55%, rgba(150,10,20,0.88) 0 16%, transparent 60%),
    radial-gradient(circle at 60% 40%, rgba(120,8,16,0.85) 0 14%, transparent 58%),
    radial-gradient(circle at 50% 65%, rgba(90,6,12,0.8) 0 20%, transparent 62%);
}
.cx-splat .cap{
  position:relative;z-index:1;
  font-weight:700;font-size:.74rem;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,0.7);
  max-width:220px;line-height:1.3;
}
.cx-splat .cap .hint{
  display:block;margin-top:7px;
  font-size:.6rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,0.78);
}

.cx-tapzone{
  position:fixed;inset:0;z-index:2;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}

.cx-startcard, .cx-overcard{
  position:fixed;inset:0;z-index:8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:0 30px;
  background:rgba(11,14,22,0.82);
  transition:opacity .3s ease;
}
.cx-startcard.hidden, .cx-overcard.hidden{opacity:0;pointer-events:none;}
.cx-startcard h1, .cx-overcard h1{font-size:1.2rem;margin:0;}
.cx-startcard .wow{
  font-size:.72rem;letter-spacing:.08em;color:var(--gold);font-weight:700;
  text-transform:uppercase;margin-bottom:2px;
}
.cx-startcard p, .cx-overcard p{color:var(--muted);font-size:.85rem;margin:0;max-width:320px;line-height:1.5;}
.cx-startcard .legend{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:320px;margin-top:4px;
}
.cx-startcard .legend span{
  font-size:.72rem;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;padding:4px 9px;
}
.cx-startcard .tap, .cx-overcard .tap{
  margin-top:14px;font-weight:700;letter-spacing:.03em;font-size:.92rem;
  padding:13px 28px;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg, var(--purple), var(--pink));
}
.cx-overcard .final{
  font-family:'SF Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:2.1rem;font-weight:700;color:var(--gold);
}
.cx-overcard .rank-final{font-size:.85rem;color:#fff;font-weight:600;margin-top:-4px;max-width:300px;}

@media (max-width:420px){
  .cx-hud, .cx-score-box{min-width:110px;padding:10px 12px;}
}

@media (prefers-reduced-motion: reduce){
  .cx-splat, .cx-startcard, .cx-overcard{transition:none;animation:none;}
}