/* Orðheimar: "coming soon" tile (soon.js): gift on top, live countdown below, colour per upcoming game.
   Sizes follow the tile's own width (container units), so it fits the small phone tiles too. */
.soon-tile[data-soon] { /* attribute raises specificity over .home-tile / .g-tile */
  container-type: inline-size;
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 0 4%; /* % of the tile width; container units here would follow the window, not the tile */
  background: var(--soon-bg, #ffc452); color: var(--soon-fg, #003449);
  text-align: center; overflow: hidden;
}
.soon-tile[data-soon] .soon-gift { flex: none; display: block; width: auto; height: 44cqw; max-width: 78%; aspect-ratio: auto; object-fit: contain; } /* tile is 75cqw tall; overrides the 4:3 crop on tile images */
.soon-time { margin: 3cqw 0 0; font-size: 10.5cqw; line-height: 1; font-weight: 300; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.soon-label { margin: 2.5cqw 0 0; font-size: 6.5cqw; line-height: 1; font-weight: 500; letter-spacing: .02em; }
.soon-label + .soon-time { margin-top: 1.5cqw; }
.soon-time b { font-size: 1.5em; font-weight: 900; margin-right: .04em; } /* numbers bigger than the letters */
/* without JavaScript (or after the last release) the old text placeholder shows */
.soon-tile:not(:has(.soon-gift)) { background: #ffc452; color: #003449; font-size: clamp(16px, 2.2vw, 24px); font-weight: 500; line-height: 1.2; }
@supports not (font-size: 1cqw) { .soon-time { font-size: clamp(13px, 2.2vw, 26px); } }