/* around YOU : l'écran qui rassemble les jeux. */
.hub { gap: 14px; }
.hub-head { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; }
.hub-logo { display: flex; flex-direction: column; gap: 4px; }
.hub-brand { font: 800 2.3rem/1 var(--display); color: var(--text); }
.hub-edition { font: 600 .78rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.hub-edition b { color: var(--sun); font-weight: 800; }
.hub-around { font: 600 1.2rem/1 var(--body); letter-spacing: .22em; color: var(--text-dim); }
.hub-you { font: 800 2.6rem/1 var(--display); background: linear-gradient(90deg, var(--sun), var(--coral), #B388EB, var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hub-hello { margin: -6px 0 0; font: 800 1.4rem/1.2 var(--display); }
.hub-filters { display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.hchip { flex: none; padding: 9px 14px; border-radius: 999px; background: var(--night-2); color: var(--text-dim); font: 800 .95rem/1 var(--display); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.hchip small { display: block; margin-top: 3px; font: 700 .7rem/1 var(--body); opacity: .8; }
.hchip.on { background: var(--sun); color: var(--card-ink); box-shadow: inset 0 -3px 0 var(--sun-d); }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gcard { display: flex; flex-direction: column; text-align: left; border-radius: 22px; overflow: hidden; background: var(--night-2); box-shadow: inset 0 -5px 0 rgba(0,0,0,.25); animation: screen-in .45s both; animation-delay: calc(var(--i) * 40ms); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.gcard:active { transform: scale(.97); }
.gcard.opening { transform: scale(1.08); z-index: 5; }
.gcard-art { height: 108px; padding-top: 8px; background: radial-gradient(circle at 50% 115%, color-mix(in srgb, var(--gc) 70%, transparent), transparent 72%), color-mix(in srgb, var(--gc) 18%, var(--night-2)); }
.gcard-art .char { width: 100%; height: 100%; }
.gcard-info { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.gcard-info b { font: 800 1.05rem/1.12 var(--display); text-wrap: balance; }
.gcard-info small { color: var(--text-dim); font-size: .76rem; line-height: 1.25; }
.gcard-meta { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.gcard-meta .age { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--gc) 35%, var(--night)); font: 800 .75rem/1.2 var(--display); }
.gcard-meta .st { color: var(--sun); font: 800 .8rem/1.4 var(--display); }
@media (min-width: 520px) { .hub-grid { grid-template-columns: repeat(3, 1fr); } }
.hub-tools { display: flex; gap: 8px; }
.gcard-meta { flex-wrap: wrap; }
.gcard-meta .lic { padding: 3px 8px; border-radius: 999px; font: 800 .72rem/1.2 var(--display); white-space: nowrap; }
.lic.free { background: color-mix(in srgb, var(--mint) 30%, var(--night)); color: #C9F7E2; }
.lic.trial { background: color-mix(in srgb, var(--sun) 25%, var(--night)); color: var(--sun); }
.lic.lock { background: color-mix(in srgb, var(--coral) 30%, var(--night)); color: #FFD3DC; }
.lic.own { background: color-mix(in srgb, var(--mint) 45%, var(--night)); color: #fff; }
.shop-how { padding: 14px 16px; border-radius: 18px; background: var(--night-2); line-height: 1.45; display: flex; flex-direction: column; gap: 6px; }
.shop-how p { margin: 0; }
.shop-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.shop-pack { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 18px; text-align: left;
  background: var(--night-2); box-shadow: inset 0 -5px 0 rgba(0,0,0,.25); }
.shop-pack b { display: block; font: 800 1.15rem/1.1 var(--display); }
.shop-pack small { color: var(--text-dim); font-weight: 700; }
.shop-price { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--sun); color: var(--card-ink); font: 800 1rem/1 var(--display); }
.shop-pack.own { opacity: .75; }
.shop-pack.own .shop-price { background: var(--mint); }