/* rewards.css — YOUR REWARDS, the row high on every home (rewards.js), and a home that fits one screen in a wide, short
   window (Teddy, 2026-10-19: "it doenst fit on the page"). */
.yr { margin: 8px 0 10px; }
.yr h3 { margin: 0 0 6px; font: 900 15px var(--font, ui-rounded, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow, #FFC93C); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.yr-row { display: grid; gap: 8px; }
.yr-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 4px 9px; border: 0; border-radius: 18px; background: var(--paper, #FFFDF7); color: var(--ink, #15172B);
  box-shadow: 0 5px 0 var(--tile-edge, #C9A86A), 0 8px 16px rgba(0, 0, 0, 0.25); cursor: pointer; font: inherit; }
.yr-tile:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--tile-edge, #C9A86A); }
.yr-tile.red { --tile-edge: #A3161B; } .yr-tile.orange { --tile-edge: #C25E1C; } .yr-tile.green { --tile-edge: #1E8F55; } .yr-tile.grape { --tile-edge: #5A43B8; } .yr-tile.yellow { --tile-edge: #B98A10; }
.yr-tile.is-hot { outline: 3px solid #FF4FD8; outline-offset: 2px; animation: yr-glow 1.6s ease-in-out infinite; }
.yr-pic svg { width: 48px; height: 48px; display: block; }
.yr-tile b { font: 900 14px/1.1 var(--font, ui-rounded, system-ui); text-align: center; }
.yr-tile small { font: 700 11.5px/1.15 var(--font, ui-rounded, system-ui); color: #5B5F80; text-align: center; }
.yr-badge { position: absolute; top: -6px; right: -4px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: radial-gradient(circle at 35% 30%, #FFB070, #FF8A3D 55%, #C4561C); color: #fff; font: 900 13px/24px var(--font, ui-rounded, system-ui); text-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
@keyframes yr-glow { 50% { outline-color: #FFC93C; } }
@media (prefers-reduced-motion: reduce) { .yr-tile.is-hot { animation: none; } }
@media (max-width: 380px) { .yr-pic svg { width: 38px; height: 38px; } .yr-tile b { font-size: 12.5px; } .yr-tile small { display: none; } .yr-row { gap: 5px; } }
/* the round's end: Hoop Drop first, the Shootout under it (ui.js rewardRow) */
.rw-btnpic svg { width: 30px; height: 30px; vertical-align: middle; margin-right: 6px; }
.reward .rw-shoot { margin-top: 8px; }
/* a wide window (his laptop browser): use the width, smaller pictures, more doors per row — one screen, no hunting */
@media (min-width: 700px) {
  .screen.yr-home { max-width: 980px; }
  .yr-home .floor { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .yr-home .floor .door { min-height: 0; padding: 8px 6px; }
  .yr-home .floor .door-art svg { max-height: 64px; }
  .yr-home .play-big { max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (max-height: 640px) {
  .yr-home .say-row .swish.big { width: 72px; height: 72px; flex-basis: 72px; }
  .yr-home .say-row { margin: 2px 0 6px; }
  .yr-home .play-big { min-height: 54px; }
  .yr-home .league-ribbon { margin: 2px auto; }
}
/* a short window (his laptop browser, 2026-10-19: "it doenst fit on the page"): YOUR REWARDS stays on the first screen —
   smaller pictures, one line per tile, a tighter greeting */
@media (max-height: 560px) {
  .yr { margin: 4px 0 6px; }
  .yr h3 { margin: 0 0 3px; font-size: 13px; }
  .yr-tile { padding: 5px 3px 6px; border-radius: 14px; }
  .yr-pic svg { width: 34px; height: 34px; }
  .yr-tile b { font-size: 12.5px; }
  .yr-tile small { display: none; }
  .yr-home .say-row .swish.big { width: 56px; height: 56px; flex-basis: 56px; }
  .yr-home .say-row .bubble { padding: 6px 10px; }
  .yr-home .say-row .bubble p { font-size: 15px; line-height: 1.25; }
  .yr-home .play-big { min-height: 48px; }
}