/* Shared chrome of the coding sheets: the floating panels, the glass of beer
 * that carries progress, and the streamers of the finish card. Both sheets link
 * this file, so the furniture stays identical between them.
 */

    /* ── header ─────────────────────────────────────────────────── */
    /* Two panels float over the page instead of a bar across it: the pour on
       the left, who is coding on the right, and the sheet reads between them. */
    .rail {
      position: fixed; left: 22px; top: calc(22px + var(--strip, 0px)); z-index: 40;
      width: 124px; padding: 15px 12px 14px;
      background: var(--card); border: 1px solid var(--line); border-radius: 16px;
      display: flex; flex-direction: column; align-items: center; gap: 14px;
    }
    .rail h1 {
      font-size: 10px; font-weight: 700; color: var(--ink-ghost); text-align: center;
      text-transform: uppercase; letter-spacing: .14em; line-height: 1.5;
    }
    #header-beer .beer { width: 82px; height: 112px; display: block; }
    #progress-text { font-size: 12px; font-weight: 500; color: var(--ink-faint); }
    /* The pour is the receipt for an answer on its way to the server, and a line
       says so when one never lands. */
    .rail .warn { font-size: 11px; font-weight: 700; color: var(--accent); }

    .who {
      position: fixed; right: 22px; top: calc(22px + var(--strip, 0px)); z-index: 40;
    }
    button.coder {
      display: flex; align-items: center; gap: 11px;
      background: var(--card); border: 1px solid var(--line); border-radius: 14px;
      padding: 9px 13px 9px 10px;
    }
    button.coder:hover { border-color: var(--accent); }
    .coder .mark {
      width: 30px; height: 30px; border-radius: 9px; background: var(--chip);
      color: var(--ink); font-size: 13px; font-weight: 700; text-transform: uppercase;
      display: flex; align-items: center; justify-content: center;
    }
    button.coder:hover .mark { background: var(--accent); color: #fff; }
    .coder .names { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
    .coder .role {
      font-size: 9.5px; font-weight: 700; color: var(--ink-ghost);
      text-transform: uppercase; letter-spacing: .12em;
    }
    .coder b { font-size: 13.5px; color: var(--ink); }
    .coder .gear { width: 15px; height: 15px; display: block; margin-left: 2px; }
    .coder .gear path { fill: var(--ink-ghost); }
    button.coder:hover .gear path { fill: var(--accent); }

    /* Below this the margins are too narrow to float in, so the two panels sit
       side by side across the top of the sheet. */
    .panels { display: contents; }
    @media (max-width: 1240px) {
      .panels {
        display: flex; align-items: center; gap: 14px;
        max-width: 900px; margin: 0 auto 20px;
      }
      .rail, .who { position: static; }
      .rail {
        flex: 1; width: auto; flex-direction: row; align-items: center;
        gap: 16px; padding: 10px 18px;
      }
      .rail h1 { margin: 0; font-size: 13px; }
      .rail #progress-text { margin-left: auto; }
      #header-beer .beer { width: 43px; height: 58px; }
    }


    .beer { width: 44px; height: 60px; display: block; }
    .beer.big { width: 98px; height: 133px; margin: 0 auto 4px; }
    .beer .brew {
      transition: y 1.15s cubic-bezier(.25,.9,.35,1), height 1.15s cubic-bezier(.25,.9,.35,1);
    }
    .beer .foam { transition: transform 1.15s cubic-bezier(.25,.9,.35,1); }
    /* The tap opens under the pointer: the beer runs down from the spout and
       the glass livens up, while the level stays where the coding put it. */
    .beer .pouring { opacity: 0; transition: opacity .18s; }
    .beer .flow { animation: flow .55s linear infinite; }
    @keyframes flow { to { stroke-dashoffset: -8 } }
    .beer .splash { animation: splash 1.1s ease-in-out infinite; }
    @keyframes splash { 50% { rx: 5.6; opacity: .55 } }
    .coder-card:hover .beer .pouring, .beer.big:hover .pouring,
    .beer.pouring-now .pouring { opacity: 1; }

    /* The glass is still until it is looked at. The bubbles then rise for as
       long as the pointer stays, and each one finishes the rise it is in before
       the glass goes quiet, so nothing is left frozen mid-air. */
    .beer .bubbles circle {
      /* Invisible while the animation is not running, so a glass at rest, or one
         still inside a bubble's delay, shows no bubble stuck at the bottom. */
      opacity: 0;
      animation: rise 2.6s ease-in infinite;
      animation-play-state: paused;
    }
    @keyframes rise {
      0% { transform: translateY(0); opacity: 0 }
      15% { opacity: .8 }
      100% { transform: translateY(-26px); opacity: 0 }
    }

    .streamers { position: fixed; inset: 0; z-index: 70; pointer-events: none; }

    .finale {
      position: fixed; inset: 0; z-index: 65; background: #2c2018cc;
      display: flex; align-items: center; justify-content: center; padding: 24px;
    }
    .finale-card { max-width: 440px; text-align: center; padding: 34px 36px 30px; }
    .finale-note {
      margin-top: 16px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.55;
    }
    .finale-card h2 { font-size: 19px; margin-bottom: 10px; }
    .finale-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
    .finale-card b { color: var(--ink); }
    .finale-row { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }