/* Round 3: slim in-run HUD on phones, power-up chips with ring timers, the flying pick-up icon, toast. */
/* Phone: one compact bar instead of a top row + a tall word card (~22% of the screen down to ~11%).
   Left column: pause over the feathers; middle: the word card; right column: score over stars. */
@media (max-width: 719px) {
  .hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 4px;
    align-items: center; padding: calc(6px + var(--safe-t)) 8px 0; }
  .hud .hud-top { display: contents; }
  .hud .hud-spacer { display: none; }
  #pauseBtn { grid-area: 1 / 1; width: 36px; height: 36px; border-radius: 12px; justify-self: center; }
  #pauseBtn svg { width: 18px; height: 18px; }
  .hud .feathers { grid-area: 2 / 1; gap: 0; justify-content: center; }
  .hud .feathers img { width: 19px; height: 24px; }
  .hud .score { grid-area: 1 / 3; min-width: 62px; height: 34px; padding: 0 10px; border-radius: 12px; font-size: 20px; }
  .hud .hud-top .chip { grid-area: 2 / 3; height: 30px; padding: 0 10px 0 6px; gap: 4px; font-size: 18px; justify-self: center; }
  .hud .hud-top .chip img { width: 18px; height: 18px; }
  .word-card { grid-area: 1 / 2 / 3 / 3; margin: 0; max-width: none; gap: 7px; padding: 5px 8px 6px 5px; border-radius: 18px; min-width: 0; }
  .word-card .pic { width: 48px; height: 48px; border-radius: 14px; }
  .word-card .pic img { width: 36px; height: 36px; }
  .slots { gap: 3px; container-type: inline-size; }
  .slot { width: min(34px, calc((100% - (var(--n, 4) - 1) * 3px) / var(--n, 4))); height: auto; aspect-ratio: 0.86; border-radius: 10px;
    font-size: min(24px, calc(62cqw / var(--n, 4))); }
  .joined { font-size: 18px; margin-top: 2px; }
  .meter { height: 7px; margin-top: 4px; }
  .meter span { top: -8px; font-size: 18px; }
  .sprint { grid-column: 1 / 4; margin-top: 2px; }
  .toast { grid-column: 1 / 4; }
}
@media (max-width: 380px) { .hud .feathers img { width: 17px; height: 22px; } .word-card .pic { width: 42px; height: 42px; } }

/* Power chips: icon inside a coloured ring that empties with the timer; the seconds sit in a little badge. */
.powers { gap: 10px; }
.powers .pw { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--c) var(--p, 360deg), rgba(255,255,255,.14) 0) border-box; box-shadow: 0 6px 16px rgba(0,0,0,.3), 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.powers .pw::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3c2a86, #1d1250); }
.powers .pw img { position: relative; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.powers .pw b { position: absolute; right: -4px; bottom: -4px; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 13px; display: grid; place-items: center;
  font: 700 18px/1 Plex, sans-serif; color: #1d1250; background: var(--c); box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.powers .pw.ending { animation: pw-end .4s ease-in-out infinite alternate; }
@keyframes pw-end { to { transform: scale(.88); opacity: .7; } }
.pw-fly { position: fixed; left: 0; top: 0; width: 56px; height: 56px; object-fit: contain; z-index: 30; pointer-events: none; filter: drop-shadow(0 0 12px rgba(255,240,180,.9)); }
.toast { justify-self: center; margin: 8px auto 0; width: max-content; max-width: 90vw; padding: 5px 16px; border-radius: 999px; opacity: 0; pointer-events: none;
  font: 700 18px/1.3 Plex, sans-serif; color: #1d1250; background: var(--c, #fff); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
@media (min-width: 720px) { .toast { display: block; } .powers .pw { width: 60px; height: 60px; } .powers .pw img { width: 38px; height: 38px; } }
/* Desktop: the same card, a size smaller (the old 80 px picture and 58 px slots made the header ~16% of a laptop screen). */
@media (min-width: 720px) {
  .word-card { padding: 6px 10px 8px 6px; gap: 10px; }
  .word-card .pic { width: 62px; height: 62px; }
  .word-card .pic img { width: 46px; height: 46px; }
  .slot { width: 46px; height: 50px; font-size: 32px; }
  .joined { font-size: 19px; margin-top: 4px; }
  .meter { margin-top: 6px; height: 10px; }
}

/* R9: drawn UI icons (js/gicons.js) */
.gi { display: inline-block; width: 1.08em; height: 1.08em; vertical-align: -.17em; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; flex: none; overflow: visible; }
.gi + * { margin-inline-start: .08em; }
.gi-gold { color: #f6b81f; filter: drop-shadow(0 1px 0 rgba(120, 70, 0, .35)); } .gi-gold path { stroke: #c98a06; stroke-width: 1.2; }
.gi-flame { color: #ff7a2f; } .gi-flame path:first-child { stroke: #d9541a; stroke-width: 1.2; }
.gi-amber { color: #f0a020; } .gi-ok { color: #1f9d63; } .gi-no { color: #d9463e; } .gi-heart { color: #e5484d; stroke-width: 1.2; }
.gi-run { display: contents; }