/* Hub-only play mat background: quiet enough to keep the game cards legible. */
body.hub-page { background: var(--color-bg-dark); }
body.hub-page[data-theme="light"] { background: #edf1fc; }

body.hub-page .app-background {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(74, 95, 161, .07) 1px, transparent 1.3px);
    background-size: 30px 30px;
}

body.hub-page[data-theme="light"] .app-background {
    background-color: #edf1fc;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(56, 77, 145, .07) 1px, transparent 1.3px),
        linear-gradient(180deg, #e4eafb 0, #edf1fc 360px, #edf1fc 100%);
    background-size: 30px 30px, auto;
}

body.hub-page .playmat-ticket {
    position: absolute;
    display: grid;
    place-items: center;
    width: 158px;
    height: 212px;
    border: 3px solid currentColor;
    border-radius: 22px;
    color: var(--accent-purple);
    opacity: .09;
}
body.hub-page .playmat-ticket::before,
body.hub-page .playmat-ticket::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-bg-dark);
    transform: translateX(-50%);
}
body.hub-page[data-theme="light"] .playmat-ticket::before,
body.hub-page[data-theme="light"] .playmat-ticket::after { background: #e4eafb; }
body.hub-page .playmat-ticket::before { top: -10px; }
body.hub-page .playmat-ticket::after { bottom: -10px; }
body.hub-page .ticket-glyph { font: 800 3rem/1 var(--font-display); }
body.hub-page .playmat-ticket-one { top: -108px; left: 4%; transform: rotate(-18deg); color: var(--accent-emerald); }
body.hub-page .playmat-ticket-two { top: -122px; right: 6%; transform: rotate(20deg); color: var(--accent-rose); }

body.hub-page .playmat-dice,
body.hub-page .playmat-ladder {
    position: absolute;
    top: 64px;
    color: var(--accent-blue);
    opacity: .07;
}
body.hub-page .playmat-dice { right: 22%; width: 70px; transform: rotate(16deg); }
body.hub-page .playmat-ladder { left: 19%; width: 128px; transform: rotate(-8deg); }

@media (max-width: 767px) {
    body.hub-page .app-background { background-size: 28px 28px; }
    body.hub-page[data-theme="light"] .app-background { background-size: 28px 28px, auto; }
    body.hub-page .playmat-ticket { width: 118px; height: 160px; }
    body.hub-page .playmat-ticket-one { left: -18px; top: -94px; }
    body.hub-page .playmat-ticket-two { right: -28px; top: -110px; }
    body.hub-page .playmat-dice { right: 12%; top: 70px; width: 52px; }
    body.hub-page .playmat-ladder { left: 6%; top: 66px; width: 88px; }
}

@media (max-width: 400px) {
    body.hub-page .playmat-ticket,
    body.hub-page .playmat-dice,
    body.hub-page .playmat-ladder { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.hub-page .app-background,
    body.hub-page .playmat-ticket,
    body.hub-page .playmat-dice,
    body.hub-page .playmat-ladder { transition: none; }
}