/* 1:1 schedule template master layout and variants. */

.schedule.ratio-1-1 {
  width: 2160px;
  height: 2160px;
}

.ratio-1-1 { font-family: var(--template-blue-font); }

.ratio-1-1.variant-blue .background-layer { background-image: url("assets/template-1x1-blue/background.png"); }
.ratio-1-1.variant-blue {
  --template-main-text: #202024;
  --template-sub-text: #164a76;
  --template-date-text: #194d84;
  --template-day-text: #1e1f25;
  --template-light-text: #ffffff;
  --template-social-text: #1d4e83;
  --template-week-arrow: #6da9de;
  --template-week-month-bg: url("assets/template-1x1-blue/week-month.png");
  --template-week-date-bg: url("assets/template-1x1-blue/week-date.png");
  --template-social-x-bg: url("assets/template-1x1-blue/social-x.png");
  --template-social-youtube-bg: url("assets/template-1x1-blue/social-youtube.png");
  --template-social-twitch-bg: url("assets/template-1x1-blue/social-twitch.png");
  --template-social-instagram-bg: url("assets/template-1x1-blue/social-instagram.png");
  --template-social-hashtag-bg: url("assets/template-1x1-blue/social-hashtag.png");
}

.ratio-1-1.variant-pink .background-layer { background-image: url("assets/template-1x1-pink/background.png"); }
.ratio-1-1.variant-pink {
  --template-main-text: #552938;
  --template-sub-text: #e86a80;
  --template-date-text: #552938;
  --template-day-text: #e86a80;
  --template-light-text: #ffffff;
  --template-social-text: #552938;
  --template-week-arrow: #e86a80;
  --template-week-month-bg: url("assets/template-1x1-pink/week-month.png");
  --template-week-date-bg: url("assets/template-1x1-pink/week-date.png");
  --template-social-x-bg: url("assets/template-1x1-pink/social-x.png");
  --template-social-youtube-bg: url("assets/template-1x1-pink/social-youtube.png");
  --template-social-twitch-bg: url("assets/template-1x1-pink/social-twitch.png");
  --template-social-instagram-bg: url("assets/template-1x1-pink/social-instagram.png");
  --template-social-hashtag-bg: url("assets/template-1x1-pink/social-hashtag.png");
}

.ratio-1-1.variant-green .background-layer { background-image: url("assets/template-1x1-green/background.png"); }
.ratio-1-1.variant-green {
  --template-main-text: #2e2e2c;
  --template-sub-text: #586224;
  --template-date-text: #586224;
  --template-day-text: #2e2e2c;
  --template-light-text: #ffffff;
  --template-social-text: #586224;
  --template-week-arrow: #586224;
  --template-week-month-bg: url("assets/template-1x1-green/week-month.png");
  --template-week-date-bg: url("assets/template-1x1-green/week-date.png");
  --template-social-x-bg: url("assets/template-1x1-green/social-x.png");
  --template-social-youtube-bg: url("assets/template-1x1-green/social-youtube.png");
  --template-social-twitch-bg: url("assets/template-1x1-green/social-twitch.png");
  --template-social-instagram-bg: url("assets/template-1x1-green/social-instagram.png");
  --template-social-hashtag-bg: url("assets/template-1x1-green/social-hashtag.png");
}

.ratio-1-1.variant-brown .background-layer { background-image: url("assets/template-1x1-brown/background.png"); }
.ratio-1-1.variant-brown {
  --template-main-text: #702e17;
  --template-sub-text: #b5632e;
  --template-date-text: #9b4c3b;
  --template-day-text: #702e17;
  --template-light-text: #ffffff;
  --template-social-text: #9b4c3b;
  --template-week-arrow: #b5632e;
  --template-week-month-bg: url("assets/template-1x1-brown/week-month.png");
  --template-week-date-bg: url("assets/template-1x1-brown/week-date.png");
  --template-social-x-bg: url("assets/template-1x1-brown/social-x.png");
  --template-social-youtube-bg: url("assets/template-1x1-brown/social-youtube.png");
  --template-social-twitch-bg: url("assets/template-1x1-brown/social-twitch.png");
  --template-social-instagram-bg: url("assets/template-1x1-brown/social-instagram.png");
  --template-social-hashtag-bg: url("assets/template-1x1-brown/social-hashtag.png");
}

.ratio-1-1.variant-red .background-layer { background-image: url("assets/template-1x1-red/background.png"); }
.ratio-1-1.variant-red {
  --template-main-text: #5a1f1b;
  --template-sub-text: #cf3217;
  --template-date-text: #8f2418;
  --template-day-text: #5a1f1b;
  --template-light-text: #ffffff;
  --template-social-text: #8f2418;
  --template-week-arrow: #cf3217;
  --template-week-month-bg: url("assets/template-1x1-red/week-month.png");
  --template-week-date-bg: url("assets/template-1x1-red/week-date.png");
  --template-social-x-bg: url("assets/template-1x1-red/social-x.png");
  --template-social-youtube-bg: url("assets/template-1x1-red/social-youtube.png");
  --template-social-twitch-bg: url("assets/template-1x1-red/social-twitch.png");
  --template-social-instagram-bg: url("assets/template-1x1-red/social-instagram.png");
  --template-social-hashtag-bg: url("assets/template-1x1-red/social-hashtag.png");
}

.ratio-1-1.variant-purple .background-layer { background-image: url("assets/template-1x1-purple/background.png"); }
.ratio-1-1.variant-purple {
  --template-main-text: #4b254f;
  --template-sub-text: #b25bd0;
  --template-date-text: #6b3d84;
  --template-day-text: #4b254f;
  --template-light-text: #ffffff;
  --template-social-text: #6b3d84;
  --template-week-arrow: #b25bd0;
  --template-week-month-bg: url("assets/template-1x1-purple/week-month.png");
  --template-week-date-bg: url("assets/template-1x1-purple/week-date.png");
  --template-social-x-bg: url("assets/template-1x1-purple/social-x.png");
  --template-social-youtube-bg: url("assets/template-1x1-purple/social-youtube.png");
  --template-social-twitch-bg: url("assets/template-1x1-purple/social-twitch.png");
  --template-social-instagram-bg: url("assets/template-1x1-purple/social-instagram.png");
  --template-social-hashtag-bg: url("assets/template-1x1-purple/social-hashtag.png");
}

.ratio-1-1 .stream-card { background-image: var(--template-stream-card-bg); }
.ratio-1-1.variant-blue .stream-card { background-image: url("assets/template-1x1-blue/stream-card.png"); }
.ratio-1-1.variant-pink .stream-card { background-image: url("assets/template-1x1-pink/stream-card.png"); }
.ratio-1-1.variant-green .stream-card { background-image: url("assets/template-1x1-green/stream-card.png"); }
.ratio-1-1.variant-brown .stream-card { background-image: url("assets/template-1x1-brown/stream-card.png"); }
.ratio-1-1.variant-red .stream-card { background-image: url("assets/template-1x1-red/stream-card.png"); }
.ratio-1-1.variant-purple .stream-card { background-image: url("assets/template-1x1-purple/stream-card.png"); }

.ratio-1-1.variant-blue .stream-card.offline { background-image: url("assets/template-1x1-blue/offline-card.png"); }
.ratio-1-1.variant-pink .stream-card.offline { background-image: url("assets/template-1x1-pink/offline-card.png"); }
.ratio-1-1.variant-green .stream-card.offline { background-image: url("assets/template-1x1-green/offline-card.png"); }
.ratio-1-1.variant-brown .stream-card.offline { background-image: url("assets/template-1x1-brown/offline-card.png"); }
.ratio-1-1.variant-red .stream-card.offline { background-image: url("assets/template-1x1-red/offline-card.png"); }
.ratio-1-1.variant-purple .stream-card.offline { background-image: url("assets/template-1x1-purple/offline-card.png"); }

.ratio-1-1.variant-blue .date-box { background-image: url("assets/template-1x1-blue/date-box.png"); }
.ratio-1-1.variant-pink .date-box { background-image: url("assets/template-1x1-pink/date-box.png"); }
.ratio-1-1.variant-green .date-box { background-image: url("assets/template-1x1-green/date-box.png"); }
.ratio-1-1.variant-brown .date-box { background-image: url("assets/template-1x1-brown/date-box.png"); }
.ratio-1-1.variant-red .date-box { background-image: url("assets/template-1x1-red/date-box.png"); }
.ratio-1-1.variant-purple .date-box { background-image: url("assets/template-1x1-purple/date-box.png"); }

.ratio-1-1.variant-blue .time { background-image: url("assets/template-1x1-blue/time-box.png"); }
.ratio-1-1.variant-pink .time { background-image: url("assets/template-1x1-pink/time-box.png"); }
.ratio-1-1.variant-green .time { background-image: url("assets/template-1x1-green/time-box.png"); }
.ratio-1-1.variant-brown .time { background-image: url("assets/template-1x1-brown/time-box.png"); }
.ratio-1-1.variant-red .time { background-image: url("assets/template-1x1-red/time-box.png"); }
.ratio-1-1.variant-purple .time { background-image: url("assets/template-1x1-purple/time-box.png"); }

.ratio-1-1.variant-blue .credit { background-image: url("assets/template-1x1-blue/credit-box.png"); }
.ratio-1-1.variant-pink .credit { background-image: url("assets/template-1x1-pink/credit-box.png"); }
.ratio-1-1.variant-green .credit { background-image: url("assets/template-1x1-green/credit-box.png"); }
.ratio-1-1.variant-brown .credit { background-image: url("assets/template-1x1-brown/credit-box.png"); }
.ratio-1-1.variant-red .credit { background-image: url("assets/template-1x1-red/credit-box.png"); }
.ratio-1-1.variant-purple .credit { background-image: url("assets/template-1x1-purple/credit-box.png"); }

.ratio-1-1 .illustration {
  inset: 0;
  width: 2160px;
  height: 2160px;
  right: auto;
  top: 0;
}

.ratio-1-1 .left-list {
  width: 1040px;
  padding-top: 108px;
  padding-left: 0;
}

.ratio-1-1 .stream-card {
  width: 902px;
  height: 193px;
  margin: 0 0 68px 100px;
  padding-left: 110px;
  align-items: center;
  color: var(--template-main-text);
}

.ratio-1-1 .date-box {
  left: -72px;
  top: 18px;
  width: 152px;
  height: 151px;
  font-family: var(--template-blue-display-font);
}

.ratio-1-1 .date-box .day {
  font-size: 70px;
  line-height: 62px;
  font-weight: 700;
  color: var(--template-date-text);
}

.ratio-1-1 .date-box .mon {
  margin-top: 4px;
  font-size: 34px;
  line-height: 34px;
  font-weight: 600;
  color: var(--template-day-text);
  text-transform: lowercase;
}

.ratio-1-1 .title {
  max-width: 720px;
  font-size: 48px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--template-main-text);
}

.ratio-1-1 .subtitle {
  max-width: 660px;
  margin-top: 8px;
  font-size: 36px;
  line-height: 1.05;
  font-weight: 700;
  color: var(--template-sub-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ratio-1-1 .time {
  right: 58px;
  bottom: -19px;
  width: 243px;
  height: 60px;
  padding: 0 24px;
  justify-content: flex-start;
  gap: 24px;
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  color: var(--template-light-text);
}

.ratio-1-1 .time-zone {
  width: 76px;
  text-align: center;
}

.ratio-1-1 .time-zone.is-long { font-size: 28px; }
.ratio-1-1 .time-value { width: 94px; text-align: center; }

.ratio-1-1 .offline {
  justify-content: center;
  padding-left: 0;
  font-size: 82px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
  color: var(--template-light-text);
}

.ratio-1-1 .week {
  right: auto;
  left: 1120px;
  bottom: 290px;
  width: 510px;
  height: 260px;
  display: grid;
  grid-template-columns: 215px 64px 215px;
  grid-template-rows: 195px;
  gap: 0 8px;
  align-items: start;
  font-weight: 900;
}

.ratio-1-1 .week .label { display: none; }

.ratio-1-1 .week .date-range {
  min-width: 0;
  min-height: 0;
  width: 215px;
  height: 195px;
  padding: 0;
  position: relative;
  display: block;
  background-image: none;
  color: var(--template-date-text);
}

.ratio-1-1 .week-month {
  order: 0;
  position: absolute;
  left: -16px;
  top: 16px;
  z-index: 2;
  width: 105px;
  height: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--template-week-month-bg) center / 100% 100% no-repeat;
  color: var(--template-light-text);
  font-family: var(--template-blue-font);
  font-size: 32px;
  line-height: 0;
  font-weight: 900;
}

.ratio-1-1 .week-day {
  order: 0;
  position: absolute;
  left: -2px;
  top: 46px;
  z-index: 1;
  width: 215px;
  height: 149px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--template-week-date-bg) center / 100% 100% no-repeat;
  color: var(--template-date-text);
  font-family: var(--template-blue-display-font);
  font-size: 128px;
  line-height: 0;
  font-weight: 600;
}

.ratio-1-1 #weekStart {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.ratio-1-1 .week .arrow {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: center;
  justify-self: center;
  margin-top: 46px;
  color: var(--template-week-arrow);
  font-size: 55px;
  line-height: 1;
}

.ratio-1-1 #weekEnd {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

.ratio-1-1 .credit {
  left: 1365px;
  top: 2026px;
  right: auto;
  bottom: auto;
  width: 777px;
  height: 108px;
  padding: 0 36px 0 196px;
  gap: 0;
  font-size: 36px;
  font-weight: 800;
  color: var(--template-social-text);
}

.ratio-1-1 .credit span { display: none; }

.ratio-1-1 .credit div {
  min-width: 0;
  color: var(--template-social-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ratio-1-1 .socials {
  left: 32px;
  bottom: 40px;
  gap: 16px;
}

.ratio-1-1 .social-item {
  width: 314px;
  height: 65px;
  padding: 0 28px 0 108px;
  display: flex;
  align-items: center;
  color: var(--template-social-text);
  font-size: 22px;
  font-weight: 900;
}

.ratio-1-1 .social-item.platform-x { background-image: var(--template-social-x-bg); }
.ratio-1-1 .social-item.platform-youtube { background-image: var(--template-social-youtube-bg); }
.ratio-1-1 .social-item.platform-twitch { background-image: var(--template-social-twitch-bg); }
.ratio-1-1 .social-item.platform-instagram { background-image: var(--template-social-instagram-bg); }
.ratio-1-1 .social-item.platform-hashtag { background-image: var(--template-social-hashtag-bg); }
.ratio-1-1 .social-item .social-icon { display: none; }

.ratio-1-1 .social-item strong {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule.custom-template-active.ratio-1-1 .stream-card {
  width: var(--custom-stream-card-width);
  height: var(--custom-stream-card-height);
  margin: 0 0 var(--custom-stream-card-gap) var(--custom-stream-card-x);
  padding-left: var(--custom-stream-text-x);
  align-items: flex-start;
  transform: rotate(var(--custom-stream-card-rotate, 0deg));
  transform-origin: center center;
}

.schedule.custom-template-active.ratio-1-1 .stream-text { margin-top: var(--custom-stream-text-y); }

.schedule.custom-template-active.ratio-1-1 .stream-card.has-empty-subtitle .stream-text {
  height: auto;
  margin-top: var(--custom-empty-subtitle-text-y, var(--custom-stream-text-y));
  display: block;
}

.schedule.custom-template-active.ratio-1-1 .title {
  max-width: var(--custom-title-max-width);
  height: calc(var(--custom-title-size) * var(--custom-title-line-height));
  font-size: calc(var(--custom-title-size) * var(--title-scale, 1));
  line-height: var(--custom-title-line-height);
  font-weight: var(--custom-title-weight);
}

.schedule.custom-template-active.ratio-1-1 .subtitle {
  max-width: var(--custom-subtitle-max-width);
  margin-top: var(--custom-subtitle-margin-top);
  font-size: calc(var(--custom-subtitle-size) * var(--subtitle-scale, 1));
  line-height: var(--custom-subtitle-line-height);
  font-weight: var(--custom-subtitle-weight);
}

.schedule.custom-template-active.ratio-1-1 .stream-card.has-empty-subtitle .subtitle { display: none; }

.schedule.custom-template-active.ratio-1-1 .date-box {
  left: var(--custom-date-x);
  top: var(--custom-date-y);
  width: var(--custom-date-width);
  height: var(--custom-date-height);
  transform: rotate(var(--custom-date-rotate, 0deg));
  transform-origin: center center;
}

.schedule.custom-template-active.ratio-1-1 .date-box .day {
  font-size: var(--custom-date-day-size);
  line-height: var(--custom-date-day-line-height);
  font-weight: var(--custom-date-day-weight);
}

.schedule.custom-template-active.ratio-1-1 .date-box .mon {
  margin-top: var(--custom-date-name-margin-top);
  font-size: var(--custom-date-name-size);
  line-height: var(--custom-date-name-line-height);
  font-weight: var(--custom-date-name-weight);
}

.schedule.custom-template-active.ratio-1-1 .time {
  left: var(--custom-time-x);
  top: var(--custom-time-y);
  right: auto;
  bottom: auto;
  width: var(--custom-time-width);
  height: var(--custom-time-height);
  transform: rotate(var(--custom-time-rotate, 0deg));
  transform-origin: center center;
  padding: 0 var(--custom-time-padding-right) 0 var(--custom-time-padding-left);
  gap: var(--custom-time-gap);
  font-size: var(--custom-time-size);
  line-height: var(--custom-time-line-height);
  font-weight: var(--custom-time-weight);
}

.schedule.custom-template-active.ratio-1-1 .time-zone { width: var(--custom-timezone-width); }
.schedule.custom-template-active.ratio-1-1 .time-zone.is-long { font-size: var(--custom-timezone-long-size); }
.schedule.custom-template-active.ratio-1-1 .time-value { width: var(--custom-time-value-width); }

.schedule.custom-template-active.ratio-1-1 .offline {
  align-items: center;
  justify-content: center;
  padding-left: 0;
  font-size: var(--custom-offline-size);
  line-height: var(--custom-offline-line-height);
  font-weight: var(--custom-offline-weight);
  letter-spacing: var(--custom-offline-letter-spacing);
}

.schedule.custom-template-active.ratio-1-1 .week {
  left: var(--custom-week-x);
  top: var(--custom-week-y);
  right: auto;
  bottom: auto;
  width: var(--custom-week-width);
  height: var(--custom-week-height);
  transform: rotate(var(--custom-week-rotate, 0deg));
  transform-origin: center center;
  grid-template-columns: var(--custom-week-columns);
  gap: 0 var(--custom-week-gap);
}

.schedule.custom-template-active.ratio-1-1 .week .date-range {
  width: var(--custom-week-date-width);
  height: var(--custom-week-date-height);
  transform: rotate(var(--custom-week-date-rotate, 0deg));
  transform-origin: center center;
}

.schedule.custom-template-active.ratio-1-1 .week-month {
  left: var(--custom-week-month-x);
  top: var(--custom-week-month-y);
  width: var(--custom-week-month-width);
  height: var(--custom-week-month-height);
  transform: rotate(var(--custom-week-month-rotate, 0deg));
  transform-origin: center center;
  font-size: var(--custom-week-month-size);
  line-height: var(--custom-week-month-line-height);
  font-weight: var(--custom-week-month-weight);
}

.schedule.custom-template-active.ratio-1-1 .week-day {
  left: var(--custom-week-day-x);
  top: var(--custom-week-day-y);
  width: var(--custom-week-day-width);
  height: var(--custom-week-day-height);
  transform: rotate(var(--custom-week-day-rotate, 0deg));
  transform-origin: center center;
  font-size: var(--custom-week-day-size);
  line-height: var(--custom-week-day-line-height);
  font-weight: var(--custom-week-day-weight);
}

.schedule.custom-template-active.ratio-1-1 .week-month .week-text {
  transform:
    translate(var(--custom-week-month-text-x, 0), var(--custom-week-month-text-y, 0))
    rotate(var(--custom-week-month-text-rotate, 0deg));
  transform-origin: center center;
}

.schedule.custom-template-active.ratio-1-1 .week-day .week-text {
  transform:
    translate(var(--custom-week-day-text-x, 0), var(--custom-week-day-text-y, 0))
    rotate(var(--custom-week-day-text-rotate, 0deg));
  transform-origin: center center;
}

.schedule.custom-template-active.ratio-1-1 .week .arrow {
  position: absolute;
  left: var(--custom-week-arrow-x, 50%);
  top: var(--custom-week-arrow-y, 50%);
  width: var(--custom-week-arrow-width, auto);
  height: var(--custom-week-arrow-height, auto);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--custom-week-arrow-rotate, 0deg))
    rotate(var(--custom-week-arrow-text-rotate, 0deg));
  transform-origin: center center;
  font-size: var(--custom-week-arrow-size);
  line-height: var(--custom-week-arrow-line-height);
}

.schedule.custom-template-active.ratio-1-1 .socials {
  left: var(--custom-social-x);
  top: var(--custom-social-y);
  right: auto;
  bottom: auto;
  transform: rotate(var(--custom-social-rotate, 0deg));
  transform-origin: center center;
  gap: var(--custom-social-gap);
}

.schedule.custom-template-active.ratio-1-1 .social-item {
  width: var(--custom-social-item-width);
  height: var(--custom-social-item-height);
  transform: rotate(var(--custom-social-item-rotate, 0deg));
  transform-origin: center center;
  padding: 0 var(--custom-social-padding-right) 0 var(--custom-social-padding-left);
  font-size: var(--custom-social-size);
  font-weight: var(--custom-social-weight);
}

.schedule.custom-template-active.ratio-1-1 .credit {
  left: var(--custom-credit-x);
  top: var(--custom-credit-y);
  right: auto;
  bottom: auto;
  width: var(--custom-credit-width);
  height: var(--custom-credit-height);
  transform: rotate(var(--custom-credit-rotate, 0deg));
  transform-origin: center center;
  padding: 0 var(--custom-credit-padding-right) 0 var(--custom-credit-padding-left);
  font-size: var(--custom-credit-size);
  font-weight: var(--custom-credit-weight);
}