/* ============================================================================
Order of the Tile - CANONICAL BACKDROP SYSTEM (shared by every /app/ game)
----------------------------------------------------------------------------
Include in each game:
in (after theme.css)
in the Settings sheet
before
Do NOT fork this per game. Add a season/design ONCE here (and its art in
/app/backdrops/) and every game that includes this file updates automatically.
Depends only on /app/theme.css anchors (--theme-main-strong / --theme-main-ink)
plus a few OOTT neutrals, all with fallbacks, so it is safe stand-alone.
============================================================================ */
:root{
--bg-paper:#F3EADc;
--bg-felt:radial-gradient(1200px 820px at 50% -8%, #EAF5F2 0%, #CFE8E2 62%, #B7DAD2 100%);
--bg-sunrise:linear-gradient(165deg, #FBEEDD 0%, #F6E1CC 58%, #EFD0B4 100%);
--bg-blossom:linear-gradient(165deg, #F6ECF1 0%, #ECD9E6 60%, #E3C9DC 100%);
--bg-dusk:linear-gradient(165deg, #EAECF4 0%, #D7DCEA 60%, #C3CCDE 100%);
--bg-dots:radial-gradient(circle, #E3D8C5 1.6px, transparent 1.8px) 0 0/22px 22px, #F3EADc;
--backdrop:var(--bg-paper);
}
/* solids / gradients */
body[data-bg="felt"]{ --backdrop:var(--bg-felt); }
body[data-bg="sunrise"]{ --backdrop:var(--bg-sunrise); }
body[data-bg="blossom"]{ --backdrop:var(--bg-blossom); }
body[data-bg="dusk"]{ --backdrop:var(--bg-dusk); }
body[data-bg="dots"]{ --backdrop:var(--bg-dots); }
/* accent-following motifs: masked in the season accent, so they always complement */
body[data-bg="leaves"]{ --backdrop:var(--bg-paper); --scene:url(/app/backdrops/leaves.svg); --scene-size:150px; }
body[data-bg="bamboo"]{ --backdrop:var(--bg-felt); --scene:url(/app/backdrops/bamboo.svg); --scene-size:120px; }
body[data-bg="petals"]{ --backdrop:var(--bg-blossom); --scene:url(/app/backdrops/petals.svg); --scene-size:140px; }
/* rich illustrated scenes: tiled at large-but-native sizes = big motifs, minimal repeat, crisp */
body[data-bg="tropical"]{ --backdrop:url(/app/backdrops/scene-tropical.jpg) center/440px; }
body[data-bg="magnolia"]{ --backdrop:url(/app/backdrops/scene-magnolia.jpg) center/700px; }
body[data-bg="jewel"]{ --backdrop:url(/app/backdrops/scene-jewel.jpg) center/720px; }
/* ---- picker UI (rendered by backdrops.js into #ottBackdrop) ---- */
.ott-bgrow{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:2px 2px 2px; }
.ott-bgsw{ width:40px; height:40px; border-radius:50%; border:2px solid var(--line,#E2D6C4); cursor:pointer; padding:0;
box-shadow:0 1px 3px rgba(43,38,34,.2); background-size:cover; display:flex; align-items:center; justify-content:center; font-size:19px; line-height:1; }
.ott-bgsw.k-paper{ background:var(--bg-paper); } .ott-bgsw.k-felt{ background:var(--bg-felt); } .ott-bgsw.k-sunrise{ background:var(--bg-sunrise); }
.ott-bgsw.k-blossom{ background:var(--bg-blossom); } .ott-bgsw.k-dusk{ background:var(--bg-dusk); } .ott-bgsw.k-dots{ background:var(--bg-dots); }
.ott-bgsw.k-leaves{ background:var(--bg-paper); } .ott-bgsw.k-bamboo{ background:var(--bg-felt); } .ott-bgsw.k-petals{ background:var(--bg-blossom); }
.ott-bgsw.k-tropical{ background:url(/app/backdrops/scene-tropical_thumb.jpeg) center/cover; }
.ott-bgsw.k-magnolia{ background:url(/app/backdrops/scene-magnolia_thumb.jpeg) center/cover; }
.ott-bgsw.k-jewel{ background:url(/app/backdrops/scene-jewel_thumb.jpeg) center/cover; }
.ott-bgsw[aria-pressed="true"]{ border-color:var(--theme-main-ink,#0B5651); box-shadow:0 0 0 2px var(--paper,#FBF6EE), 0 0 0 4px var(--theme-main-ink,#0B5651); }
.ott-bgname{ text-align:center; font-family:"Crimson Text",serif; font-style:italic; color:var(--ink-soft,#4E453C); font-size:.9rem; margin:9px 0 2px; min-height:1.1em; }
/* The backdrop paints as TWO dedicated fixed layers (injected by backdrops.js) rather than
on html/body or a ::before, so it never fights a game's own background CSS and never
collides with other injected pseudo-elements (e.g. the back-button badge).
#ottBg = the tint / gradient / illustrated scene (z-index -2)
#ottBgScene = the accent-masked motif for the leaf/bamboo/petal designs (z-index -1)
Both sit behind the game card. They show only in the framed (tablet/desktop) view; on a
phone the full-screen card covers everything, so we simply hide them below 760x600.
760x600 is the canonical frame breakpoint - keep each game's own frame media query in sync. */
#ottBg, #ottBgScene{ position:fixed; inset:0; pointer-events:none; display:none; }
@media (min-width:760px) and (min-height:600px){
body[data-bg]{ background:transparent !important; } /* fix: a game's opaque body{background} hid #ottBg on the framed desktop view; keep */
#ottBg{ display:block; z-index:-2; background:var(--backdrop); background-attachment:fixed; }
#ottBgScene{ z-index:-1; background-color:var(--theme-main-strong,#148F87);
-webkit-mask:var(--scene) center/var(--scene-size,150px) repeat; mask:var(--scene) center/var(--scene-size,150px) repeat; opacity:.14; }
body[data-bg="leaves"] #ottBgScene, body[data-bg="bamboo"] #ottBgScene, body[data-bg="petals"] #ottBgScene{ display:block; }
}