/* Set for Class says what it gives (Ken, 2026-10-27), as on the golf pages (css/mini-golf.css): "Set for Class · Watch your
   class live", and resting the mouse on it drops a picture of the live class dashboard, like a tooltip. Touch screens never
   show the picture. Painter Pete and Money Shop: at the bottom right of the banner, on its own row under the subtitle
   (moved down, not across). Sum Pyramid and Linear Crossword have no banner (the game fills the page), so it stays in their
   top bar. Loaded only by those four pages. */
.sfc-tip { position: relative; display: inline-flex; }
.sfc-tip .set-for-class-btn { white-space: nowrap; }
.sfc-tip-why { font-weight: 500; opacity: .8; }
@media (max-width: 420px) { .sfc-tip.sfc-bottom .set-for-class-btn { padding: .5rem .85rem; gap: .4rem; font-size: .8rem; } }
@media (max-width: 349px) { .sfc-tip-why { display: none; } }
/* A phone has no room for the words in a game's top bar (back link, title, buttons): there the button stays as it was */
@media (max-width: 600px) { .version-top-row .sfc-tip-why, .stage-select-nav .sfc-tip-why, .cw-header .sfc-tip-why { display: none; } }
/* Sum Pyramid's stage bar shares its row with the centred "Select Stage" heading: the words fit beside it from 1000px */
@media (max-width: 999px) { .stage-select-nav .sfc-tip-why { display: none; } }
.sfc-tip-peek { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 400px; max-width: calc(100vw - 32px); padding: 8px;
    box-sizing: border-box; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
    text-align: left; opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s, visibility .15s; }
.sfc-tip .set-for-class-btn:hover + .sfc-tip-peek, .sfc-tip .set-for-class-btn:focus-visible + .sfc-tip-peek { opacity: 1; visibility: visible; transform: none; }
.sfc-tip-peek img { display: block; width: 100%; height: auto; border-radius: 9px; }
.sfc-tip-cap { margin: 7px 4px 2px; font: 500 .8rem/1.35 'Poppins', sans-serif; color: #475569; }
@media (hover: none) { .sfc-tip-peek { display: none; } }
html[data-classroom] .sfc-tip { display: none !important; }

/* Banner pages: the button's own row under the subtitle, on the right. The banner keeps less padding below it, so it grows
   only a little, and it sits a layer above the game so the picture can drop over it. Painter's banner used to clip its paint
   splashes; their own layer does that now. */
.sfc-tip.sfc-bottom { display: flex; justify-content: flex-end; margin-top: 10px; }
.painter-page-header, .bestbuy-page-header { position: relative; z-index: 90; }   /* over the games' own floating buttons (skip, full screen); under the site header's 100 */
.painter-page-header .sfc-tip .set-for-class-btn { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }   /* a paint splash can sit behind it */
.painter-page-header .sfc-tip .set-for-class-btn:hover { background: #fff; }
html:not([data-classroom]) .painter-page-header, html:not([data-classroom]) .bestbuy-page-header { padding-bottom: 14px; }
section.painter-page-header { overflow: visible; }   /* "section." outranks painter.css, which loads after this file */
.painter-header-splashes { overflow: hidden; }

/* Sum Pyramid's stage bar pushed the button right with its own margin; the wrapper takes that now */
.stage-select-nav .sfc-tip { margin-left: auto; }