/**
 * Device team look: the green poly field and type become shades of the
 * phone's team. With no team class the brand green stays as it is.
 */

html.team-square {
  --turn-primary: #c62828;
  --turn-primary-deep: #8e0000;
  --turn-accent: #ef5350;
  --turn-teal-deep: #b71c1c;
  --turn-mint: #ff8a80;
  --turn-lime: #ffcdd2;
  --turn-olive: #8e0000;
  --turn-bg-soft: #fdecea;
  --question-gradient-start: #c62828;
  --question-gradient-end: #ef5350;
  --spot-wash: #e53935;
  --spot-ink: #ffffff;
}

html.team-circle {
  --turn-primary: #1a237e;
  --turn-primary-deep: #0d47a1;
  --turn-accent: #5c6bc0;
  --turn-teal-deep: #15155c;
  --turn-mint: #7db6fc;
  --turn-lime: #bbdefb;
  --turn-olive: #0d47a1;
  --turn-bg-soft: #e8eaf6;
  --question-gradient-start: #1a237e;
  --question-gradient-end: #5c6bc0;
  --spot-wash: #2c2cbb;
  --spot-ink: #ffffff;
}

html.team-triangle {
  --turn-primary: #6b5500;
  --turn-primary-deep: #1d1d1b;
  --turn-accent: #f5c518;
  --turn-teal-deep: #8a6d00;
  --turn-mint: #ffe082;
  --turn-lime: #fff59d;
  --turn-olive: #8a6d00;
  --turn-bg-soft: #fff8e1;
  --question-gradient-start: #c79100;
  --question-gradient-end: #f5c518;
  --spot-wash: #f5c518;
  --spot-ink: #1d1d1b;
}

html.team-square,
html.team-circle,
html.team-triangle {
  background-color: var(--turn-bg-soft);
}

html.team-square body::before {
  background-color: #fdecea;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpolygon fill='%23c62828' fill-opacity='0.18' points='0,0 420,0 180,320'/%3E%3Cpolygon fill='%23ef5350' fill-opacity='0.26' points='380,40 760,0 620,280 300,220'/%3E%3Cpolygon fill='%238e0000' fill-opacity='0.16' points='700,0 1600,0 1600,180 980,260'/%3E%3Cpolygon fill='%23ffcdd2' fill-opacity='0.32' points='1200,80 1600,220 1480,480 1080,360'/%3E%3Cpolygon fill='%23ef5350' fill-opacity='0.2' points='0,280 360,200 520,520 80,620'/%3E%3Cpolygon fill='%23c62828' fill-opacity='0.22' points='480,360 860,240 980,560 540,640'/%3E%3Cpolygon fill='%23ff8a80' fill-opacity='0.18' points='900,300 1300,220 1420,560 1020,620'/%3E%3Cpolygon fill='%23b71c1c' fill-opacity='0.14' points='0,640 280,560 360,900 0,900'/%3E%3Cpolygon fill='%23ef5350' fill-opacity='0.24' points='300,700 720,580 860,900 420,900'/%3E%3Cpolygon fill='%23c62828' fill-opacity='0.2' points='780,640 1180,520 1360,900 820,900'/%3E%3Cpolygon fill='%23ffcdd2' fill-opacity='0.28' points='1200,620 1600,540 1600,900 1280,900'/%3E%3C/svg%3E");
}

html.team-square body::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpolygon fill='%23ef5350' fill-opacity='0.2' points='200,100 480,20 560,300 160,340'/%3E%3Cpolygon fill='%23c62828' fill-opacity='0.15' points='900,40 1280,120 1100,400 780,280'/%3E%3Cpolygon fill='%238e0000' fill-opacity='0.14' points='40,420 340,380 280,720 0,680'/%3E%3Cpolygon fill='%23ffcdd2' fill-opacity='0.22' points='600,500 980,420 1120,780 640,820'/%3E%3Cpolygon fill='%23ff8a80' fill-opacity='0.16' points='1180,360 1520,300 1580,700 1220,740'/%3E%3Cpolygon fill='%23ef5350' fill-opacity='0.18' points='440,720 760,640 820,900 380,900'/%3E%3C/svg%3E");
}

html.team-circle body::before {
  background-color: #e8eaf6;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpolygon fill='%231a237e' fill-opacity='0.18' points='0,0 420,0 180,320'/%3E%3Cpolygon fill='%235c6bc0' fill-opacity='0.26' points='380,40 760,0 620,280 300,220'/%3E%3Cpolygon fill='%230d47a1' fill-opacity='0.16' points='700,0 1600,0 1600,180 980,260'/%3E%3Cpolygon fill='%23bbdefb' fill-opacity='0.32' points='1200,80 1600,220 1480,480 1080,360'/%3E%3Cpolygon fill='%235c6bc0' fill-opacity='0.2' points='0,280 360,200 520,520 80,620'/%3E%3Cpolygon fill='%231a237e' fill-opacity='0.22' points='480,360 860,240 980,560 540,640'/%3E%3Cpolygon fill='%237db6fc' fill-opacity='0.18' points='900,300 1300,220 1420,560 1020,620'/%3E%3Cpolygon fill='%2315155c' fill-opacity='0.14' points='0,640 280,560 360,900 0,900'/%3E%3Cpolygon fill='%235c6bc0' fill-opacity='0.24' points='300,700 720,580 860,900 420,900'/%3E%3Cpolygon fill='%231a237e' fill-opacity='0.2' points='780,640 1180,520 1360,900 820,900'/%3E%3Cpolygon fill='%23bbdefb' fill-opacity='0.28' points='1200,620 1600,540 1600,900 1280,900'/%3E%3C/svg%3E");
}

html.team-circle body::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpolygon fill='%235c6bc0' fill-opacity='0.2' points='200,100 480,20 560,300 160,340'/%3E%3Cpolygon fill='%231a237e' fill-opacity='0.15' points='900,40 1280,120 1100,400 780,280'/%3E%3Cpolygon fill='%230d47a1' fill-opacity='0.14' points='40,420 340,380 280,720 0,680'/%3E%3Cpolygon fill='%23bbdefb' fill-opacity='0.22' points='600,500 980,420 1120,780 640,820'/%3E%3Cpolygon fill='%237db6fc' fill-opacity='0.16' points='1180,360 1520,300 1580,700 1220,740'/%3E%3Cpolygon fill='%235c6bc0' fill-opacity='0.18' points='440,720 760,640 820,900 380,900'/%3E%3C/svg%3E");
}

html.team-triangle body::before {
  background-color: #fff8e1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpolygon fill='%23c79100' fill-opacity='0.18' points='0,0 420,0 180,320'/%3E%3Cpolygon fill='%23fdd835' fill-opacity='0.26' points='380,40 760,0 620,280 300,220'/%3E%3Cpolygon fill='%23f9a825' fill-opacity='0.16' points='700,0 1600,0 1600,180 980,260'/%3E%3Cpolygon fill='%23fff59d' fill-opacity='0.32' points='1200,80 1600,220 1480,480 1080,360'/%3E%3Cpolygon fill='%23fdd835' fill-opacity='0.2' points='0,280 360,200 520,520 80,620'/%3E%3Cpolygon fill='%23c79100' fill-opacity='0.22' points='480,360 860,240 980,560 540,640'/%3E%3Cpolygon fill='%23ffe082' fill-opacity='0.18' points='900,300 1300,220 1420,560 1020,620'/%3E%3Cpolygon fill='%238a6d00' fill-opacity='0.14' points='0,640 280,560 360,900 0,900'/%3E%3Cpolygon fill='%23fdd835' fill-opacity='0.24' points='300,700 720,580 860,900 420,900'/%3E%3Cpolygon fill='%23c79100' fill-opacity='0.2' points='780,640 1180,520 1360,900 820,900'/%3E%3Cpolygon fill='%23fff59d' fill-opacity='0.28' points='1200,620 1600,540 1600,900 1280,900'/%3E%3C/svg%3E");
}

html.team-triangle body::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpolygon fill='%23fdd835' fill-opacity='0.2' points='200,100 480,20 560,300 160,340'/%3E%3Cpolygon fill='%23c79100' fill-opacity='0.15' points='900,40 1280,120 1100,400 780,280'/%3E%3Cpolygon fill='%23f9a825' fill-opacity='0.14' points='40,420 340,380 280,720 0,680'/%3E%3Cpolygon fill='%23fff59d' fill-opacity='0.22' points='600,500 980,420 1120,780 640,820'/%3E%3Cpolygon fill='%23ffe082' fill-opacity='0.16' points='1180,360 1520,300 1580,700 1220,740'/%3E%3Cpolygon fill='%23fdd835' fill-opacity='0.18' points='440,720 760,640 820,900 380,900'/%3E%3C/svg%3E");
}