:root {
    --bg: #0f1222;
    --accent: #00ffd5;
    --accent-2: #7afcff;
    --text: #e9f1ff;
    --muted: #8fa6c6;
  
    --row-width: 80vw;
    --gap: 5px;
    --frame: 32px;
    --innerPad: 5px;
  
    --font-adj: 40px;
    --font-role: 40px;
    --font-num: 40px;
  }
  
  * {
    box-sizing: border-box;
  }
  
  html,
  body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
      Apple Color Emoji, Segoe UI Emoji;
    background: radial-gradient(1200px 800px at 70% -10%, #1a2150 10%, var(--bg) 55%) no-repeat,
      var(--bg);
    color: var(--text);
  }
  
  .wrap {
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 32px 16px;
  }
  
  .app {
    width: 100%;
    max-width: 1400px;
    display: grid;
    gap: 20px;
    justify-items: center;
    margin-inline: auto;
  }
  
  h1 {
    margin: 0 0 10px;
    font-size: clamp(20px, 4vw, 28px);
    letter-spacing: 0.3px;
    color: var(--text);
    text-align: center;
    font-weight: 700;
  }
  
  button#go {
    appearance: none;
    border: 0;
    padding: 14px 22px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #05121a;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    box-shadow:
      0 8px 20px rgba(0, 255, 213, 0.25),
      inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 120ms ease, filter 120ms ease;
    will-change: transform;
  }
  
  button#go:disabled {
    filter: grayscale(0.25) brightness(0.9);
    cursor: not-allowed;
  }
  
  button#go:active {
    transform: translateY(1px) scale(0.99);
  }
  
  .slots {
    width: var(--row-width);
    max-width: 95vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(var(--gap) * 4); 
    margin-top: 10px;
    margin-inline: auto;
    flex-wrap: nowrap;
  }
  
  .slot {
    flex: 0 0 calc((var(--row-width) - (2 * var(--gap))) / 3);
    display: grid;
    align-content: center;
    justify-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #1a1f4a, #0f1333);
    border-radius: 18px;
    padding: calc(var(--frame) / 2);
    box-shadow:
      0 0 0 1px rgba(122, 252, 255, 0.06),
      0 10px 30px rgba(0, 0, 0, 0.35),
      0 0 0 6px rgba(0, 255, 213, 0.03);
  }
  
  .window {
    height: 74px;
    width: calc(
      ((var(--row-width) - (2 * var(--gap))) / 3) - var(--frame) - (2 * var(--innerPad))
    );
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #0b0f2a, #0b0e25);
    box-shadow:
      inset 0 0 0 1px rgba(122, 252, 255, 0.08),
      inset 0 -6px 12px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    position: relative;
    contain: content;
  }
  
  .tape {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }
  
  .value {
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    padding: 0 var(--innerPad);
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25));
  }
  
  .value.adj {
    color: #7afcff;
    font-size: var(--font-adj);
  }
  
  .value.role {
    color: #a8ff9e;
    font-size: var(--font-role);
  }
  
  .value.num {
    color: #ffd67a;
    font-size: var(--font-num);
  }
  
  .username {
    margin-top: 6px;
    font-weight: 700;
    font-size: 18px;
    color: var(--text);
    text-align: center;
    opacity: 0.9;
  }
  
  @media (max-width: 700px) {
    .slots {
      flex-wrap: wrap;
    }
    .slot {
      flex: 1 1 100%;
    }
    .window {
      width: calc(100% - var(--frame) - (2 * var(--innerPad)));
    }
  }