/* Selected Tabletop footer: a cream game box with the existing game artwork. */
.footer.footer-tabletop {
    margin-top:20px; padding:30px 0 40px;
    background:transparent; color:var(--color-ink); font-family:var(--font-body);
}
.footer-tabletop .gb-footer {
    width:100%; background:var(--color-paper); border:var(--stroke-frame) solid var(--color-ink);
    border-radius:var(--radius-frame); box-shadow:var(--shadow-frame); overflow:hidden;
}
.footer-tabletop h2,.footer-tabletop h3,.footer-tabletop p { margin:0; }
.footer-tabletop h2,.footer-tabletop h3 { font-family:var(--font-display); font-weight:400; letter-spacing:0; text-transform:none; text-align:left; }
.footer-tabletop h2 { font-size:clamp(2.35rem,4.6vw,3.5rem); line-height:1.04; margin:12px 0 22px; }
.footer-tabletop h3 { font-size:1.3rem; line-height:1.2; margin-bottom:10px; }
.footer-tabletop a { color:var(--color-ink); text-underline-offset:4px; overflow-wrap:anywhere; }
.footer-tabletop address { font-style:normal; }
.footer-tabletop .gb-eyebrow { font-size:.75rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.footer-tabletop .gb-chrome {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    border-bottom:var(--stroke-component) solid var(--color-ink); padding:12px 24px; font-size:.75rem;
}
.footer-tabletop .gb-chrome-left { display:flex; gap:12px; align-items:center; }
.footer-tabletop .gb-dots { display:flex; gap:6px; }
.footer-tabletop .gb-dots i { width:9px; height:9px; border:1.5px solid var(--color-ink); border-radius:50%; background:var(--color-teal); }
.footer-tabletop .gb-dots i:nth-child(2) { background:var(--color-coral); }
.footer-tabletop .gb-dots i:nth-child(3) { background:var(--color-yellow); }
.footer-tabletop .gb-hero {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,280px); align-items:center; gap:24px;
    padding:32px 36px; border-bottom:var(--stroke-component) solid var(--color-ink); background:var(--color-teal-soft);
}
.footer-tabletop .gb-copy { position:relative; z-index:1; min-width:0; }
.footer-tabletop .gb-action {
    display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:11px 16px; min-height:44px;
    border:var(--stroke-component) solid var(--color-ink); border-radius:999px; background:var(--color-teal);
    box-shadow:var(--shadow-control); font:600 .9rem/1.5 var(--font-body); text-decoration:none;
}
.footer-tabletop .gb-action:hover { background:var(--color-yellow); }
.footer-tabletop .gb-action:active { transform:translate(2px,2px); box-shadow:none; }
.footer-tabletop .gb-action .ui-icon { width:18px; height:18px; flex:0 0 18px; }
.footer-tabletop .gb-art { position:relative; width:260px; max-width:100%; height:238px; justify-self:center; }
.footer-tabletop .gb-art::before { content:''; width:166px; height:166px; border-radius:50%; background:var(--color-paper); position:absolute; right:19px; top:40px; }
.footer-tabletop .gb-art img, .footer-tabletop .gb-art > svg { display:block; height:auto; object-fit:contain; position:absolute; filter:drop-shadow(0 5px 2px #00000022); user-select:none; pointer-events:none; }
.footer-tabletop .gb-catan { width:146px; left:0; top:27px; transform:rotate(-12deg); z-index:1; }
.footer-tabletop .gb-eldritch { width:101px; right:0; top:16px; transform:rotate(14deg); z-index:2; overflow:hidden; }
.footer-tabletop .gb-kodama { width:145px; right:0; bottom:2px; transform:rotate(7deg); z-index:3; }
.footer-tabletop .gb-info { padding:24px 36px; display:grid; grid-template-columns:1.2fr 1fr; gap:24px; font-size:.95rem; line-height:1.5; }
.footer-tabletop .gb-info > div { min-width:0; }
.footer-tabletop .gb-info p { margin-top:8px; }
.footer-tabletop .gb-social { display:inline-flex; align-items:center; gap:8px; min-height:44px; text-decoration:none; border-bottom:1px solid currentColor; line-height:1.3; }
.footer-tabletop .gb-social:hover { color:var(--color-teal-text); }
.footer-tabletop .gb-social .ui-icon { width:18px; height:18px; flex:0 0 18px; }
.footer-tabletop .gb-bottom { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; grid-column:1/-1; font-size:.75rem; border-top:1px solid var(--color-divider); padding-top:17px; }
.footer-tabletop :focus-visible { outline:3px solid var(--color-ink); outline-offset:4px; }
@media(max-width:800px) {
    .footer.footer-tabletop { padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
    .footer-tabletop .gb-hero { padding:28px; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:14px; }
    .footer-tabletop .gb-info { padding:22px 28px; }
}
@media(max-width:560px) {
    .footer-tabletop .gb-chrome { padding:12px 15px; }
    .footer-tabletop .gb-chrome-end { display:none; }
    .footer-tabletop .gb-hero { grid-template-columns:1fr; gap:0; padding:22px; }
    .footer-tabletop h2 { font-size:2.4rem; }
    .footer-tabletop .gb-art { width:220px; height:162px; margin:19px auto 0; }
    .footer-tabletop .gb-art::before { width:130px; height:130px; top:16px; right:32px; }
    .footer-tabletop .gb-catan { width:117px; top:11px; left:5px; }
    .footer-tabletop .gb-eldritch { width:81px; top:0; right:9px; }
    .footer-tabletop .gb-kodama { width:116px; bottom:0; right:7px; }
    .footer-tabletop .gb-info { grid-template-columns:1fr; gap:20px; padding:22px; }
}