/* Background classes. Apply on AND on .ww-player-frame so :fullscreen on the embed shows the same texture. SVG inline / CSS gradients as data URIs to avoid network round-trips. */ body.bg-none { /* default; nothing */ } body.bg-notebook, .ww-player-frame.bg-notebook { background: linear-gradient(to right, transparent 0, transparent 60px, rgba(220,38,38,.5) 60px, rgba(220,38,38,.5) 62px, transparent 62px), repeating-linear-gradient(to bottom, #fdfcf6 0, #fdfcf6 31px, rgba(99,102,241,.25) 31px, rgba(99,102,241,.25) 32px); } body.bg-notebook { background-attachment: fixed; } body.bg-blackboard, .ww-player-frame.bg-blackboard { background: #2d3a2e; color: #f5f5dc; background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px); background-size: 4px 4px, 7px 7px; background-position: 0 0, 2px 3px; } body.bg-blackboard { background-attachment: fixed; } body.bg-blackboard .card { background: rgba(245,245,220,.95); color: #1f2937; } /* Green school chalkboard — distinct from the dark slate blackboard above. */ body.bg-greenboard, .ww-player-frame.bg-greenboard { background: #1f5135; color: #f5f5dc; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 4px 4px, 7px 7px; background-position: 0 0, 2px 3px; } body.bg-greenboard { background-attachment: fixed; } body.bg-greenboard .card { background: rgba(245,245,220,.95); color: #1f2937; } body.bg-paper, .ww-player-frame.bg-paper { background: #f5f1e6; background-image: radial-gradient(rgba(180, 150, 90, .15) 1px, transparent 1px); background-size: 6px 6px; } body.bg-paper { background-attachment: fixed; } body.bg-grid, .ww-player-frame.bg-grid { background: linear-gradient(to right, rgba(99,102,241,.15) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(to bottom, rgba(99,102,241,.15) 1px, transparent 1px) 0 0/24px 24px, #fafafa; } body.bg-grid { background-attachment: fixed; } body.bg-corkboard, .ww-player-frame.bg-corkboard { background: #c8985a; background-image: radial-gradient(rgba(80,50,20,.25) 1.5px, transparent 1.5px), radial-gradient(rgba(120,80,40,.18) 1px, transparent 1px); background-size: 5px 5px, 8px 8px; background-position: 0 0, 3px 4px; } body.bg-corkboard { background-attachment: fixed; } /* Classroom — warm soft wall, light enough for any skin. */ body.bg-classroom, .ww-player-frame.bg-classroom { background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,255,255,.5), transparent 60%), linear-gradient(180deg, #fbf3df 0%, #efe2c4 100%); background-image: radial-gradient(rgba(180,150,90,.10) 1px, transparent 1px); background-size: 7px 7px; } body.bg-classroom { background-attachment: fixed; } /* Arena — game-show / sports stage. Deep blue with team spotlights; pairs with the Colegios skin's floating panels (which show through over it). */ body.bg-arena, .ww-player-frame.bg-arena { background: radial-gradient(ellipse 70% 55% at 50% -10%, rgba(120,140,255,.28), transparent 60%), radial-gradient(circle at 14% 92%, rgba(37,99,235,.22), transparent 46%), radial-gradient(circle at 86% 92%, rgba(220,38,38,.18), transparent 46%), repeating-linear-gradient(135deg, transparent 0 30px, rgba(255,255,255,.016) 30px 31px), linear-gradient(180deg, #0c1530 0%, #070a16 100%); color: #e2e8f0; } body.bg-arena { background-attachment: fixed; } body.bg-arena .card { background: rgba(20, 28, 56, .85); color: #e2e8f0; border-color: #334155; } /* Custom — teacher-uploaded photo, painted from the --ww-bg-image inline var. */ body.bg-custom, .ww-player-frame.bg-custom { background-image: var(--ww-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; } body.bg-custom { background-attachment: fixed; } body.bg-stars, .ww-player-frame.bg-stars { background: radial-gradient(ellipse at top, #1e1b4b 0%, #0c0a1f 70%); color: #e0e7ff; background-image: radial-gradient(white 0.5px, transparent 0.5px), radial-gradient(rgba(200,220,255,.5) 1px, transparent 1px); background-size: 80px 80px, 120px 120px; background-position: 0 0, 40px 60px; } body.bg-stars { background-attachment: fixed; } body.bg-stars .card { background: rgba(30, 27, 75, .85); color: #e0e7ff; border-color: #6366f1; } /* Preview tiles (editor picker) — same backgrounds but contained. */ .ww-bg-preview.bg-notebook { background: linear-gradient(to right, transparent 0, transparent 12px, rgba(220,38,38,.5) 12px, rgba(220,38,38,.5) 13px, transparent 13px), repeating-linear-gradient(to bottom, #fdfcf6 0, #fdfcf6 7px, rgba(99,102,241,.25) 7px, rgba(99,102,241,.25) 8px); } .ww-bg-preview.bg-blackboard { background: #2d3a2e; } .ww-bg-preview.bg-greenboard { background: #1f5135; } .ww-bg-preview.bg-paper { background: #f5f1e6; } .ww-bg-preview.bg-grid { background: linear-gradient(to right, rgba(99,102,241,.3) 1px, transparent 1px) 0 0/8px 8px, linear-gradient(to bottom, rgba(99,102,241,.3) 1px, transparent 1px) 0 0/8px 8px, #fafafa; } .ww-bg-preview.bg-corkboard { background: #c8985a; } .ww-bg-preview.bg-classroom { background: linear-gradient(180deg, #fbf3df, #efe2c4); } .ww-bg-preview.bg-arena { background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(120,140,255,.5), transparent 60%), linear-gradient(180deg, #0c1530, #070a16); } .ww-bg-preview.bg-stars { background: radial-gradient(ellipse at top, #1e1b4b, #0c0a1f); } .ww-bg-preview.bg-none { background: repeating-linear-gradient(45deg, #f3f4f6 0 6px, #e5e7eb 6px 12px); }