@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
  
  :root {
    --w: 750px; /* banner width */
    --h: 100px; /* banner height */
    --gap: 4px; /* tile gap */
    --flash-scale: 1.0; /* no smooth scaling */
    --tile-radius: 0px; /* square tiles */
    --pixel-font: 'VT323', monospace;
  }
  
  /* Create pixelated text effect */
  body, .hud .pill, .status, .cta button {
    font-weight: normal;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
  }
  * { 
    box-sizing: border-box; 
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
  }
  body { 
    margin: 0; 
    display: grid; 
    place-items: center; 
    min-height: 100vh; 
    background: #0a0a0a; 
    font-family: var(--pixel-font); 
    overflow: hidden;
    background-image: 
      linear-gradient(0deg, #111111 50%, transparent 50%),
      linear-gradient(90deg, #111111 50%, transparent 50%);
    background-size: 2px 2px;
  }

  .banner { width: var(--w); height: var(--h); position: relative; }
  .frame { 
    position: absolute; 
    inset: 0; 
    border: 2px solid #333333; 
    background: #1a1a1a; 
    overflow: hidden; 
    transition: none;
    box-shadow: 
      inset 2px 2px 0 #444444,
      inset -2px -2px 0 #000000;
  }
  .title {
    position: absolute;
    top: 14px;
    left: 21px;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 143px;
	}
	.title * {
		margin: 0;
	}
  .frame.success-pulse { 
    background: #2a4a2a !important;
    border-color: #4a8a4a !important;
  }

  .hud { 
    position: absolute; 
    inset: 8px 8px auto auto; 
    display: flex; 
    gap: 4px; 
    z-index: 10; 
  }
  .hud .pill { 
    background: #333333; 
    color: #ffffff; 
    padding: 4px 6px; 
    font-size: 14px; 
    letter-spacing: 0px; 
    border: 1px solid #555555;
    box-shadow: 
      inset 1px 1px 0 #555555,
      inset -1px -1px 0 #111111;
  }

  /* Life lost animation */
  .hud .pill.life-lost {
    background: #ff3333;
    color: #ffffff !important;
    border-color: #ff6666 !important;
    animation: lifeLostFlash 600ms infinite;
  }

  .status { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 4px; 
    color: #cccccc; 
    font-size: 8px; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    width: max-content; 
    text-align: center; 
    bottom: 10px; 
    pointer-events: none; 
    z-index: 9; 
    transition: none;
	font-size: 25px;
  }
  .status strong { color: #ffffff; }
  .status.countdown { 
    color: #ff3333; 
    font-weight: normal;
    animation: pixelPulse 500ms step-end infinite; 
  }
  .status.game-over {
    color: #ff3333;
    font-weight: normal;
    animation: pixelPulse 1000ms step-end infinite;
  }
  .frame.playing .status { display: none; }
  .frame.playing .status.countdown { display: flex; }

  .tiles { 
    position: absolute; 
    inset: 8px; 
    display: grid; 
    gap: var(--gap); 
    grid-template-columns: repeat(var(--n), 1fr); 
  }
  .tile { 
    border: 2px solid #444444; 
    cursor: pointer; 
    position: relative; 
    outline: none; 
    background: #222222;
    transform: translateZ(0); 
    transition: none;
    overflow: hidden;
    box-shadow: 
      inset 1px 1px 0 #666666,
      inset -1px -1px 0 #000000;
  }
  .tile:hover:not([data-disabled="true"]) { 
    border-color: #666666;
    box-shadow: 
      inset 1px 1px 0 #888888,
      inset -1px -1px 0 #222222;
  }
  .tile:active { 
    box-shadow: 
      inset 1px 1px 0 #222222,
      inset -1px -1px 0 #666666;
  }
  .tile[data-disabled="true"] { pointer-events: none; }
  .tile.flash { 
    border-color: #ffffff !important;
    box-shadow: 
      inset 2px 2px 0 #ffffff,
      inset -2px -2px 0 #ffffff,
      0 0 0 2px #ffffff;
  }
  .tile, .cta button { touch-action: manipulation; }
  
  .badge { 
    position: absolute; 
    inset: 2px auto auto 2px; 
    background: #000000; 
    color: #ffffff; 
    font-size: 6px; 
    padding: 1px 3px; 
    opacity: 0; 
    transition: none;
    pointer-events: none; 
    border: 1px solid #333333;
  }
  .tile.show-badge .badge { opacity: 1; }

  .cta { position: absolute; inset: -20px 0 0 0; display: grid; place-items: center; }
  .cta button { 
    all: unset; 
    padding: 8px 12px; 
    font-size:25px; 
    cursor: pointer; 
    color: #000000; 
    background: #44dd44; 
    border: 2px solid #66ff66;
    font-family: var(--pixel-font);
    transition: none;
    position: relative;
    overflow: hidden;
    box-shadow: 
      inset 1px 1px 0 #66ff66,
      inset -1px -1px 0 #228822;
	font-weight: 900;
  }
  .cta button:hover { 
    background: #55ee55;
    border-color: #77ff77;
  }
  .cta button:active { 
    box-shadow: 
      inset 1px 1px 0 #228822,
      inset -1px -1px 0 #66ff66;
  }

  /* 8-bit Particles */
  .particle { 
    position: absolute; 
    pointer-events: none; 
    z-index: 20;
  }
  .particle-diamond {
    width: 4px; 
    height: 4px; 
    background: #44dd44;
    border: 1px solid #66ff66;
  }
  .particle-square {
    width: 3px; 
    height: 3px; 
    background: #2299ff;
    border: 1px solid #44bbff;
  }
  .particle-triangle {
    width: 0; 
    height: 0; 
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: 4px solid #ff4444;
  }

  /* 8-bit Color Palette */
  .color-red { background: #ff3333 !important; }
  .color-orange { background: #ff8833 !important; }
  .color-amber { background: #ffbb33 !important; }
  .color-yellow { background: #ffff33 !important; }
  .color-green { background: #33ff33 !important; }
  .color-teal { background: #33ffdd !important; }
  .color-blue { background: #3366ff !important; }
  .color-indigo { background: #6633ff !important; }
  .color-purple { background: #bb33ff !important; }
  .color-pink { background: #ff33bb !important; }

  /* Attract mode cycling colors */
  .frame.attract-mode .tile {
    animation: pixelColorCycle 2s step-end infinite;
    animation-delay: calc(var(--tile-index) * 300ms);
  }

  @keyframes pixelColorCycle {
    0% { filter: brightness(0.7); }
    50% { filter: brightness(1.3); }
    100% { filter: brightness(0.7); }
  }

  @keyframes pixelPulse {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes lifeLostFlash {
    0% { 
      background: #333333;
      border-color: #555555;
    }
    16% { 
      background: #ff3333;
      border-color: #ff6666;
    }
    33% { 
      background: #333333;
      border-color: #555555;
    }
    50% { 
      background: #ff3333;
      border-color: #ff6666;
    }
    66% { 
      background: #333333;
      border-color: #555555;
    }
    83% { 
      background: #ff3333;
      border-color: #ff6666;
    }
    100% { 
      background: #333333;
      border-color: #555555;
    }
  }

  @keyframes shake { 
    0% { transform: translateX(0); } 
    25% { transform: translateX(-2px); } 
    50% { transform: translateX(2px); } 
    75% { transform: translateX(-2px); } 
    100% { transform: translateX(0); } 
  }
  .shake { animation: shake 200ms step-end 3; }

  @keyframes pixelExplode {
    0% { 
      transform: translate(0, 0);
      opacity: 1;
    }
    100% { 
      transform: translate(var(--dx), var(--dy));
      opacity: 0;
    }
  }

  @keyframes flash {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}
.flash-text { animation: flash 800ms step-end infinite; }

  @media (max-width: 780px) { 
    :root { --w: 100vw; } 

  }