/* ========== mada party hub ========== */
.hub { width: min(560px, 100%); display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 1; padding-bottom: 24px; }
.hub-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cred-chip.big { padding: 9px 16px; font-size: 1.05rem; border: 1px solid #a64dff88; }
.hub-logo { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hub-mark { width: 88px; height: 88px; border-radius: 28px; display: grid; place-items: center; transform: rotate(-8deg);
  background: linear-gradient(135deg, #ff3d8b, #7b5cff 55%, #2ee6c9); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); animation: hubMark 3.2s ease-in-out infinite; }
.hub-mark span { font-size: 50px; transform: rotate(8deg); }
@keyframes hubMark { 50% { transform: rotate(6deg) scale(1.05); } }
.hub-logo h1 { margin: 6px 0 0; font-family: var(--disp); font-size: clamp(2.6rem, 10vw, 3.8rem); line-height: 1; letter-spacing: .5px;
  background: linear-gradient(135deg, #fff, #ffc83d 40%, #ff3d8b 70%, #7b5cff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 10px rgba(0,0,0,.3)); }
.hub-logo p { margin: 0; color: var(--muted); font-weight: 700; }
.hub-me .pcard { width: 100%; }
.hub-lbl { margin-bottom: -8px; }
.hub-games { display: flex; flex-direction: column; gap: 14px; }
.game-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 24px; text-decoration: none; color: var(--text); overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--g1) 26%, transparent), color-mix(in srgb, var(--g2) 26%, transparent)); border: 1px solid color-mix(in srgb, var(--g1) 50%, transparent);
  box-shadow: none; transition: transform .2s var(--ease), box-shadow .2s; }
.game-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: none; }
.game-card:active { transform: scale(.98); }

.gc-art { width: 78px; height: 78px; border-radius: 20px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: inset 0 -5px 0 rgba(0,0,0,.18); }
.gc-art span { font-size: 44px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.game-card:hover .gc-art span { animation: bdgWig .8s ease-in-out infinite; }
.gc-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gc-txt b { font-size: 1.3rem; font-family: var(--disp); font-weight: 400; }
.gc-txt small { color: var(--muted); font-weight: 600; line-height: 1.35; }
.gc-txt em { font-style: normal; font-size: .82rem; font-weight: 800; opacity: .85; }
.gc-play { flex: none; padding: 9px 14px; border-radius: 14px; font-weight: 900; background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.hub-acct-line { text-align: center; } .hub-acct-line a { color: var(--acc); font-weight: 800; }
.acct { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; text-align: center; }
.acct h3 { margin: 0; word-break: break-all; }
.acct-msg { min-height: 1.2em; margin: 0; font-weight: 800; } .acct-msg.bad { color: var(--bad); } .acct-msg.good { color: var(--good); }
@media (max-width: 420px) { .gc-play { display: none; } .gc-art { width: 64px; height: 64px; } .gc-art span { font-size: 36px; } }

/* ---------- layout: phones get one column (the wrappers vanish); wide screens get games + a sidebar ---------- */
.hub-cols, .hub-main, .hub-side { display: contents; }
.hub-me { order: 1; } .hub-lbl { order: 2; } .hub-gwrap { order: 3; } .hub .lb-card { order: 4; } .hub .menu-sub { order: 5; } .hub-acct-line { order: 6; }
@media (min-width: 980px) {
  .hub { width: min(1240px, 100%); gap: 22px; }
  .hub-logo { margin: 4px 0 6px; }
  .hub-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); grid-template-rows: auto 1fr; gap: 22px 26px; align-items: start; }
  .hub-main { display: flex; flex-direction: column; gap: 16px; grid-column: 1; grid-row: 1 / span 2; }
  .hub-side { display: flex; flex-direction: column; gap: 18px; grid-column: 2; }
  .hub-side2 { grid-row: 2; }
  .hub-lbl { margin: 0; }
  .hub-games { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .game-card { padding: 18px; }
}
@media (min-width: 1180px) {
  .hub-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-card { flex-direction: column; align-items: flex-start; text-align: start; gap: 12px; min-height: 230px; }
  .game-card .gc-txt { flex: 1; }
  .game-card .gc-play { align-self: stretch; text-align: center; }
}
@media (min-width: 980px) {
  .hub > .hub-logo { flex-direction: row; justify-content: center; gap: 20px; text-align: start; }
  .hub > .hub-logo .hub-mark { width: 80px; height: 80px; border-radius: 24px; flex: none; }
  .hub > .hub-logo h1 { margin: 0 0 4px; font-size: 3.2rem; }
}
@media (min-width: 1180px) {
  /* an odd card out at the end spans both columns as a wide card */
  .game-card:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; }
  .game-card:last-child:nth-child(odd) .gc-play { align-self: center; }
}

/* the logo mark is the site icon */
.hub-ttl { display: flex; flex-direction: column; align-items: inherit; gap: 6px; }
.hub-logo .hub-ttl { align-items: center; }
@media (min-width: 980px) { .hub > .hub-logo .hub-ttl { align-items: flex-start; } }
.hub-mark.img { background: none; padding: 0; overflow: hidden; box-shadow: none; }
.hub-mark.img img { width: 100%; height: 100%; display: block; }
.hub-logo p, .logo-tag, .ph-sub, .muted.center-t { text-wrap: balance; }

.hub-lbl { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qr-mini { padding: 6px 12px; font-size: .82rem; border-radius: 99px; }

/* phones: a tap leaves :hover stuck on, and the stuck wiggle keeps running under the scroll */
@media (hover: none) { .game-card:hover { transform: none; } .game-card:hover .gc-art span { animation: none; } }

/* the games, in two groups: big screen and phone */
.hub-gwrap { display: flex; flex-direction: column; gap: 20px; }
.hub-group { display: flex; flex-direction: column; gap: 10px; }
.hub-gtitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0 4px; }
.hub-gtitle h3 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 1.25rem; }
.hub-gtitle small { color: var(--muted); font-weight: 700; }

/* foldable home sections: tap the title (hub.js Hub.folds) */
.fold-head { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.fold-arrow { display: inline-block; margin-inline-start: 6px; font-size: 1.1rem; opacity: .75; transition: transform .2s; }
.is-folded .fold-arrow { transform: rotate(-90deg); }
html[dir=rtl] .is-folded .fold-arrow { transform: rotate(90deg); }
.hub-lbl.fold-head > span:first-child { flex: 1; }
.hub-gwrap.folded { display: none; }
.hub-group.folded .hub-games { display: none; }
.hub-gtitle.fold-head { align-items: center; }
.hub-gtitle .fold-arrow { margin-inline-start: auto; }
.lb-card.folded .lb-head-tabs, .lb-card.folded .lb-list, .lb-card.folded .lb-me { display: none; }
.lb-head.fold-head h3 { flex: 1; }