/* ==================================================================
   LIQUID GLASS - shared by every Launchpad site and app

   Most of the school is on iPhones and Macs, so the Launchpad borrows
   Apple's Liquid Glass: a soft, colourful light behind the page, and
   cards, bars and menus made of frosted glass with a bright edge, so
   the colour glows through them. Buttons become pills.

   Each site keeps its own colours: the glass is mixed from that site's
   --card (or --bar) colour, so light and dark themes both work.
   Game play areas (canvas, iframes, maps) are never made see-through.

   Link it LAST in <head>, after the page's own <style>, so it wins:
   <link rel="stylesheet" href="https://civilinitiatives.org/glass.css?b=1">
   ================================================================== */

:root{
  --lg-blur:22px;
  --lg-sat:185%;
  --lg-tint:62%;                                   /* how much of the card colour stays */
  --lg-edge:rgba(255,255,255,.62);                 /* the bright rim */
  --lg-edge2:rgba(255,255,255,.18);
  --lg-shade:0 10px 30px -12px rgba(20,24,48,.28), 0 2px 6px -2px rgba(20,24,48,.10);
  --lg-shine:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(255,255,255,.12);
  --lg-glow1:rgba(99,132,255,.42);                 /* the light behind the page */
  --lg-glow2:rgba(236,96,180,.32);
  --lg-glow3:rgba(56,210,190,.32);
  --lg-glow4:rgba(255,186,90,.28);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --lg-tint:55%;
    --lg-edge:rgba(255,255,255,.22);
    --lg-edge2:rgba(255,255,255,.06);
    --lg-shade:0 12px 34px -12px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.35);
    --lg-shine:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.04);
    --lg-glow1:rgba(80,110,255,.30); --lg-glow2:rgba(200,70,160,.22);
    --lg-glow3:rgba(30,170,160,.22); --lg-glow4:rgba(230,150,60,.14);
  }
}
:root[data-theme="dark"]{
  --lg-tint:55%;
  --lg-edge:rgba(255,255,255,.22);
  --lg-edge2:rgba(255,255,255,.06);
  --lg-shade:0 12px 34px -12px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.35);
  --lg-shine:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.04);
  --lg-glow1:rgba(80,110,255,.30); --lg-glow2:rgba(200,70,160,.22);
  --lg-glow3:rgba(30,170,160,.22); --lg-glow4:rgba(230,150,60,.14);
}

/* ---- the light behind everything ---- */
body::before{
  content:""; position:fixed; inset:-10vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%,  var(--lg-glow1), transparent 70%),
    radial-gradient(34vmax 34vmax at 92% 18%, var(--lg-glow2), transparent 70%),
    radial-gradient(40vmax 40vmax at 78% 92%, var(--lg-glow3), transparent 70%),
    radial-gradient(30vmax 30vmax at 8% 86%,  var(--lg-glow4), transparent 70%);
  animation:lg-drift 40s ease-in-out infinite alternate;
}
@keyframes lg-drift{ to{ transform:translate3d(3vmax,-2vmax,0) scale(1.06) } }
body.lg-solid::before{ display:none }          /* a page can opt out */

/* ---- glass: cards, panels, tiles ---- */
.card, .panel, .tile, .gate-card, .stat, .modal, .sheet, .menu, .popover, .dialog, dialog{
  background:color-mix(in srgb, var(--card, #fff) var(--lg-tint), transparent) !important;
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  border:1px solid var(--lg-edge) !important;
  box-shadow:var(--lg-shine), var(--lg-shade) !important;
}
.card, .panel, .gate-card, .modal, .sheet, .dialog, dialog{ border-radius:24px !important }
.tile, .stat{ border-radius:18px !important }
.tile{ transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s }
@media (hover:hover){ .tile:hover{ transform:translateY(-2px) } }

/* ---- the top bar: dark glass, floating ---- */
.top{
  background:color-mix(in srgb, var(--bar, #141a33) 70%, transparent) !important;
  -webkit-backdrop-filter:blur(26px) saturate(190%);
  backdrop-filter:blur(26px) saturate(190%);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06), 0 8px 24px -14px rgba(0,0,0,.45);
}

/* ---- buttons: pills with a shine ---- */
.btn, .abtn{
  border-radius:999px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 4px 14px -6px rgba(20,24,48,.35);
  transition:transform .15s cubic-bezier(.2,.8,.2,1), filter .15s, box-shadow .15s;
}
.btn:active, .abtn:active{ transform:scale(.97) }
@media (hover:hover){ .btn:hover, .abtn:hover{ filter:brightness(1.06) } }
.abtn.quiet, .abtn.ghost, .btn.ghost, .btn.quiet{
  background:color-mix(in srgb, var(--card, #fff) 45%, transparent) !important;
  -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%);
  border:1px solid var(--lg-edge) !important;
}

/* ---- inputs: frosted wells ---- */
input[type=text], input[type=search], input[type=email], input[type=number], input:not([type]), textarea, select{
  background-color:color-mix(in srgb, var(--card, #fff) 70%, transparent);
  border-radius:14px;
}

/* ---- keep play areas solid and sharp ---- */
canvas, iframe, video, .stage, .board, .map, .game, #game, #stage{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.card:has(> canvas), .panel:has(> canvas), .card:has(> iframe), .panel:has(> iframe){
  background:var(--card, #fff) !important;
}

/* ---- glass you can't see through ----
   Older browsers, and anyone who asked their device for less
   transparency, get solid cards with the same shapes. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card, .panel, .tile, .gate-card, .stat, .modal, .sheet, .menu, .popover, .dialog, dialog{ background:var(--card, #fff) !important }
  .top{ background:var(--bar, #141a33) !important }
}
@media (prefers-reduced-transparency:reduce){
  .card, .panel, .tile, .gate-card, .stat, .modal, .sheet, .menu, .popover, .dialog, dialog{
    background:var(--card, #fff) !important; -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .top{ background:var(--bar, #141a33) !important; -webkit-backdrop-filter:none; backdrop-filter:none }
  body::before{ display:none }
}
@media (prefers-reduced-motion:reduce){
  body::before{ animation:none }
  .tile, .btn, .abtn{ transition:none }
}

/* ---- phones and tablets: lighter glass so scrolling stays smooth ----
   Blurring what's behind every card on every frame is too much work for most
   phones, and it shows up as blank patches while you scroll. On touch screens
   the light behind the page stays still, cards are mostly solid with a soft
   frost, and small buttons lose their blur altogether. site.js normally picks
   a level (full / smooth / lite) for each device; this is for pages without it. */
@media (pointer:coarse) and (max-width:1024px){
  html:not(.full):not(.smooth):not(.lite) body::before{ animation:none; will-change:auto }
  html:not(.full):not(.smooth):not(.lite) .card, html:not(.full):not(.smooth):not(.lite) .panel, html:not(.full):not(.smooth):not(.lite) .tile, html:not(.full):not(.smooth):not(.lite) .gate-card, html:not(.full):not(.smooth):not(.lite) .stat, html:not(.full):not(.smooth):not(.lite) .modal, html:not(.full):not(.smooth):not(.lite) .sheet, html:not(.full):not(.smooth):not(.lite) .menu, html:not(.full):not(.smooth):not(.lite) .popover, html:not(.full):not(.smooth):not(.lite) .dialog, html:not(.full):not(.smooth):not(.lite) dialog{
    background:color-mix(in srgb, var(--card, #fff) 88%, transparent) !important;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:var(--lg-shine), 0 6px 18px -12px rgba(20,24,48,.3) !important;
  }
  html:not(.full):not(.smooth):not(.lite) .top{ -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); background:color-mix(in srgb, var(--bar, #141a33) 88%, transparent) !important }
  html:not(.full):not(.smooth):not(.lite) .abtn.quiet, html:not(.full):not(.smooth):not(.lite) .abtn.ghost, html:not(.full):not(.smooth):not(.lite) .btn.ghost, html:not(.full):not(.smooth):not(.lite) .btn.quiet{
    background:color-mix(in srgb, var(--card, #fff) 80%, transparent) !important;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  html:not(.full):not(.smooth):not(.lite) .tile{ transition:none }
}