/* everything.fumbleupon.com: the v0.14 hub as a live page.
   base.css is the design's own stylesheet; this file only adapts it to a real browser window. */

.fbtn:after, .fu-btn--primary:after { background: #FFF6DA; }

html { background: #DCE8F4; }
body {
  margin: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 45%, #F7FAFE 0, #EDF4FC 60%, #DCE8F4 100%) fixed;
  color: #141A24;
  font-family: 'Nunito', 'Arial Rounded MT Bold', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: #141A24; color: #EDF4FC; padding: 10px 14px; border-radius: 8px; font-weight: 800;
}
.skip:focus { top: 12px; }

/* ---------- desktop: the room is the 1440×1240 stage, scaled to the window ---------- */
.stage { display: flex; justify-content: center; overflow: hidden; }
.room { zoom: var(--z, 1); flex-shrink: 0; }
.shelf { position: absolute; inset: 0; pointer-events: none; }
.shelf .slot { pointer-events: auto; }
.hint {
  position: absolute; left: 64px; bottom: 22px; margin: 0;
  font-size: 17px; z-index: 12; color: #5B6B7A;
}
.wmbtn { border-radius: 10px; }
.wmbtn:focus-visible { outline: 3px dashed #2F6FC4; outline-offset: 6px; }
.tabx { display: block; }
a.tabx { text-decoration: none; display: flex; align-items: center; justify-content: center; }

/* ---------- the card: lives outside the zoomed room, always centred in the window ---------- */
.veil { position: fixed; z-index: 40; }
.card {
  position: fixed; top: 50%; z-index: 41;
  width: min(900px, calc(100vw - 24px));
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  overflow: auto;
}
.card .txt form { display: flex; gap: 10px; flex-wrap: wrap; }
.card .txt form input { min-width: 200px; }
.card a.fu-btn { text-decoration: none; }
.card .err { font-size: 15px; font-weight: 800; color: #B3261E; min-height: 1em; margin: -4px 0 0; }
.card .err:empty { display: none; }
.card .fine { font-size: 14px; color: #5B6B7A; }
.card .joined { color: #2F6FC4; font-size: 26px; margin-top: 6px; }
.card .fu-btn[disabled] { opacity: .6; cursor: progress; }
body.has-card { overflow: hidden; }

/* touch screens cannot hover, so the tabs and the "what it does" line stay out */
@media (hover: none) {
  .tabx { transform: none; }
  .tag em { opacity: .7; transform: none; }
  .tclip { z-index: 3; }
}

/* ---------- narrow windows: the shelf becomes a column of objects ---------- */
@media (max-width: 999px) {
  .stage { display: block; }
  .room { zoom: 1; width: auto; height: auto; padding: 28px 16px 40px; }
  .head { position: relative; left: auto; top: auto; z-index: 12; }
  .head .fu-wordmark { font-size: clamp(46px, 13vw, 96px) !important; }
  .fu-wordmark__row { flex-wrap: wrap; row-gap: .1em; }
  .sub { position: relative; left: auto; top: auto; width: auto; max-width: 620px; margin: 18px 0 8px; font-size: 21px; padding-right: 96px; }
  .dancer { right: 4px; top: 8px; transform: scale(.36); transform-origin: top right; }
  .beat { display: none; }
  .shelf {
    position: static; pointer-events: auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    justify-items: center; gap: 0 12px; margin-top: 8px;
  }
  .shelf .slot { margin: -20px 0 -10px; position: relative; left: auto !important; top: auto !important; zoom: var(--sz, 1); }
  .hint { position: static; text-align: center; margin-top: 18px; font-size: 15px; }
  .card { grid-template-columns: minmax(0, 1fr); }
  .card .pic { min-height: 0; padding: 22px; border-right: 0; border-bottom: 3px solid #141A24; }
  .card .pic img { max-height: 180px; }
  .card .txt { padding: 24px 22px 26px; }
  .ttl { font-size: clamp(34px, 10vw, 58px); flex-wrap: wrap; }
  .hook { font-size: 23px; }
}

/* closed card: invisible to clicks, Tab and screen readers too */
.card { visibility: hidden; }
.card.on { visibility: visible; }