:root{
    /* --bg: #fbf7ee;
    --text: #0b0b0f;
    --text-light: #f8f7f2;
    --muted: rgba(11,11,15,.68);
    --accent: #00d37f;
    --accent-2: #ff3bd4;
    --accent-3: #2f5bff;
    --accent-4: #ffd400;
    --container: min(1160px, 92vw);
    --radius: 18px;
    --radius-pill: 999px;
    --bd: 2px solid var(--text);
    --bd-soft: 2px solid rgba(11,11,15,.16);
    --shadow: 7px 7px 0 rgba(11,11,15,.18);
    --shadow-strong: 10px 10px 0 rgba(11,11,15,.22);
    --card: #fffdf7;
    --card-2: #fff3bf;
    --speed: .18s; */
  }
  
  body{
    /* --page-accent: var(--accent); */
  }
  
  .ludo-arkanoid{
    background: var(--bg);
    color: var(--text);
    padding: clamp(50px, 7vw, 90px) 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  
  .arkanoid-header,
  .arkanoid-card{
    width: var(--container);
    margin-inline: auto;
  }
  
  .arkanoid-header{
    margin-bottom: 28px;
  }
  
  .arkanoid-kicker{
    display: inline-flex;
    border: var(--bd);
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    background: var(--page-accent);
    box-shadow: var(--shadow);
    font-weight: 800;
    text-transform: uppercase;
  }
  
  .arkanoid-header h1{
    font-size: clamp(42px, 8vw, 92px);
    line-height: .9;
    margin: 18px 0 12px;
    letter-spacing: -0.06em;
  }
  
  .arkanoid-header p{
    color: var(--muted);
    font-size: 18px;
  }
  
  
  .arkanoid-topbar{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
    font-weight:900;
  }
  
  .arkanoid-lives{
    justify-self:start;
    display:flex;
    align-items:center;
    gap:8px;
  }
  
  .arkanoid-lives i{
    color:var(--page-accent);
  }
  
  .arkanoid-score-wrap{
    position:relative;
    justify-self:center;
    /* font-size:clamp(28px, 4vw, 52px); */
    line-height:1;
    font-weight:900;
  }
  
  #arkScore{
    display:inline-block;
    transition:transform .18s ease;
  }
  
  #arkScore.is-bumping{
    transform:scale(1.18);
  }
  
  #arkScorePop{
    position:absolute;
    left:calc(100% + 10px);
    top:50%;
    transform:translateY(-50%);
    color:var(--page-accent);
    opacity:0;
    pointer-events:none;
    white-space:nowrap;
  }
  
  #arkScorePop.is-visible{
    animation:scorePop .55s ease forwards;
  }
  
  @keyframes scorePop{
    0%{ opacity:0; transform:translateY(-40%) scale(.8); }
    20%{ opacity:1; transform:translateY(-70%) scale(1.1); }
    100%{ opacity:0; transform:translateY(-130%) scale(1); }
  }
  
  #arkMenu{
    justify-self:end;
    border:0;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-weight:900;
    cursor:pointer;
    padding:0;
  }
  
  #arkMenu:hover{
    color:var(--page-accent);
  }

  
  #arkanoidCanvas{
    display: block;
    width: 100%;
    height: auto;
    background:
      linear-gradient(rgba(11,11,15,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(11,11,15,.04) 1px, transparent 1px),
      var(--bg);
    background-size: 28px 28px;
    border: var(--bd);
    border-radius: calc(var(--radius) - 6px);
    image-rendering:pixelated;
  }
  
  .arkanoid-help{
    margin-top: 12px;
    color: var(--muted);
    font-weight: 700;
    text-align: center;
  }
  
  @media(max-width: 640px){
    .arkanoid-topbar{
      justify-content: center;
    }
  }
  
  @media(max-width: 640px){
  
  .ludo-arkanoid{
    padding: 24px 0;
  }
  
  .arkanoid-card{
    width: min(430px, 94vw);
  }
  
  .arkanoid-help{
    font-size: 13px;
  }
  
  }