/* Decorative motifs are limited to the guest view and party screen. */
body:is(.party-screen,[data-role="guest"])[data-theme="halloween"]{--motto-art:url('/assets/themes/halloween.svg');--motto-label:"Halloween Night";--motto-outline:#ffad45;--motto-soft:#ffad4530;--motto-shape:12px 27px 13px 24px}
body:is(.party-screen,[data-role="guest"])[data-theme="christmas"]{--motto-art:url('/assets/themes/christmas.svg');--motto-label:"Weihnachtsfeier";--motto-outline:#e77777;--motto-soft:#e777772b;--motto-shape:26px}
body:is(.party-screen,[data-role="guest"])[data-theme="st-patricks"]{--motto-art:url('/assets/themes/st-patricks.svg');--motto-label:"St. Patrick’s Day";--motto-outline:#eac968;--motto-soft:#eac9682b;--motto-shape:26px 13px 26px 13px}
body:is(.party-screen,[data-role="guest"])[data-theme="new-year"]{--motto-art:url('/assets/themes/new-year.svg');--motto-label:"Silvester";--motto-outline:#f8db91;--motto-soft:#f8db912b;--motto-shape:8px 28px 8px 28px}
body:is(.party-screen,[data-role="guest"])[data-theme="birthday"]{--motto-art:url('/assets/themes/birthday.svg');--motto-label:"Geburtstag";--motto-outline:#fa8ebc;--motto-soft:#fa8ebc2b;--motto-shape:30px}
body:is(.party-screen,[data-role="guest"])[data-theme="summer"]{--motto-art:url('/assets/themes/summer.svg');--motto-label:"Sommerparty";--motto-outline:#66ddd2;--motto-soft:#66ddd22b;--motto-shape:30px 12px 30px 12px}

body:is(.party-screen,[data-role="guest"]):is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"])::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:var(--motto-art);
  background-size:clamp(190px,18vw,280px);background-repeat:repeat;opacity:.065;
}
body[data-role="guest"] .shell{position:relative;z-index:1}
body[data-role="guest"] .topbar{z-index:5}
body[data-role="guest"]:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) .room-head h1::after,
body.party-screen:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) .party-title::after{
  content:var(--motto-label);display:block;width:max-content;max-width:100%;margin-top:7px;padding:4px 10px;
  border:1px solid var(--motto-outline);border-radius:999px;background:var(--motto-soft);
  color:var(--text);font:800 clamp(.62rem,.8vw,.8rem) ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;white-space:normal;
}
body.party-screen .party-title::after{margin-left:auto}

body[data-role="guest"]:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) :is(.panel,.song,.choice),
body.party-screen:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) :is(.screen-head,.now,.game,.queue,.stats,.join-card,.side-carousel,.screen-photo-vote,.screen-photo-card){
  border-radius:var(--motto-shape);border-color:color-mix(in srgb,var(--motto-outline) 35%,transparent);
  box-shadow:0 16px 50px #0007,0 0 0 1px var(--motto-soft);
}
body[data-role="guest"]:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) :is(.panel,.song),
body.party-screen:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) :is(.screen-head,.now,.queue,.join-card){position:relative;isolation:isolate}
body[data-role="guest"]:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) :is(.panel,.song)::before,
body.party-screen:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) :is(.screen-head,.now,.queue,.join-card)::before{
  content:"";position:absolute;right:-18px;top:-24px;width:clamp(80px,9vw,150px);aspect-ratio:1;
  background:var(--motto-art) center/contain no-repeat;opacity:.12;pointer-events:none;z-index:-1;
}
body.party-screen .join-card::before{right:auto;left:-28px;top:auto;bottom:-30px;opacity:.09}

/* Raised corner ornaments sit in front of cards but stay away from text and the QR code. */
body[data-role="guest"]:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) :is(.panel,.song:first-child),
body.party-screen:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) :is(.now,.queue,.join-card){
  overflow:visible;box-shadow:inset 0 2px 0 #ffffff2c,inset 0 -7px 14px #0005,0 18px 52px #0009,0 0 0 1px var(--motto-soft);
}
body[data-role="guest"]:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) :is(.panel,.song:first-child)::after,
body.party-screen:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) :is(.now,.queue,.join-card)::after{
  content:"";position:absolute;z-index:3;right:-17px;top:-25px;width:clamp(78px,8vw,128px);aspect-ratio:1;
  background:var(--motto-art) center/contain no-repeat;opacity:.94;pointer-events:none;
  filter:drop-shadow(0 10px 6px #000a) drop-shadow(0 1px 3px var(--motto-outline));
}
body.party-screen .join-card::after{left:-20px;right:auto;top:-24px;width:clamp(74px,7vw,108px)}
body[data-role="guest"] .song:first-child::after{width:74px;right:-10px;top:-22px}
body[data-role="guest"]:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) .now-playing{
  position:relative;overflow:visible;border:1px solid var(--motto-outline);
  box-shadow:inset 0 2px 0 #ffffff2c,0 18px 52px #0009,0 0 0 1px var(--motto-soft);
}
body[data-role="guest"]:is([data-theme="halloween"],[data-theme="christmas"],[data-theme="st-patricks"],[data-theme="new-year"],[data-theme="birthday"],[data-theme="summer"]) .now-playing::after{
  content:"";position:absolute;z-index:2;right:-11px;top:-23px;width:78px;aspect-ratio:1;
  background:var(--motto-art) center/contain no-repeat;pointer-events:none;
  filter:drop-shadow(0 10px 6px #000a) drop-shadow(0 1px 3px var(--motto-outline));
}
body:is(.party-screen,[data-role="guest"])[data-theme="halloween"] :is(.panel,.song:first-child,.now,.queue,.join-card)::after{transform:rotate(-11deg)}
body:is(.party-screen,[data-role="guest"])[data-theme="birthday"] :is(.panel,.song:first-child,.now,.queue,.join-card)::after{transform:rotate(9deg)}
@media(max-width:700px){body.party-screen :is(.now,.queue,.join-card)::after{width:76px;right:-9px;top:-19px}body.party-screen .join-card::after{left:-10px;right:auto}body[data-role="guest"] .panel::after{width:70px;right:-8px;top:-16px}}

/* The frame and geometry change as well as the colors. */
body:is(.party-screen,[data-role="guest"])[data-theme="halloween"] :is(.panel,.song,.now,.queue,.join-card,.screen-head){border-style:solid;border-width:2px}
body:is(.party-screen,[data-role="guest"])[data-theme="christmas"] :is(.panel,.song,.now,.queue,.join-card,.screen-head){border-top:4px solid #e77777}
body:is(.party-screen,[data-role="guest"])[data-theme="st-patricks"] :is(.panel,.song,.now,.queue,.join-card,.screen-head){border-style:dashed;border-width:2px}
body:is(.party-screen,[data-role="guest"])[data-theme="new-year"] :is(.panel,.song,.now,.queue,.join-card,.screen-head){outline:1px solid color-mix(in srgb,var(--motto-outline) 50%,transparent);outline-offset:3px}
body:is(.party-screen,[data-role="guest"])[data-theme="birthday"] :is(.panel,.song,.now,.queue,.join-card,.screen-head){border-top:4px solid #fa8ebc;border-bottom:4px solid #ffd889}
body:is(.party-screen,[data-role="guest"])[data-theme="summer"] :is(.panel,.song,.now,.queue,.join-card,.screen-head){border-bottom:4px solid #66ddd2}

@media(max-width:700px){body.party-screen .party-title::after{font-size:.58rem}body[data-role="guest"] .room-head h1::after{font-size:.65rem}}
.theme-preview{display:flex;align-items:center;gap:16px;min-height:100px;padding:12px 18px;border:2px solid var(--preview-accent);border-radius:var(--preview-shape);background:linear-gradient(125deg,var(--preview-panel),var(--preview-bg));color:#fff}
.theme-preview[hidden]{display:none}.theme-preview img{width:76px;height:76px;flex:none;object-fit:contain}.theme-preview strong,.theme-preview small{display:block}.theme-preview strong{font-size:1.15rem}.theme-preview small{margin-top:4px;color:#ffffffbd;line-height:1.35}