/* ============================================================
   BOOM EVENT PORTAL V2
   Native Portal shell community event.
   ============================================================ */

.portal-event-v2 {
  --event-red:#ff4057;
  --event-red-deep:#8f1830;
  --event-gold:#ffd76a;
  --event-cyan:#4de8ff;
  --event-green:#55f29a;
  --event-panel:rgba(7,18,29,.86);
  --event-panel-2:rgba(10,27,42,.92);
  --event-line:rgba(104,224,255,.16);

  width:100%;
  max-width:1580px;
  margin:0 auto;
  padding:0 0 48px;

  color:#eefaff;
}


.portal-event-v2 *,
.portal-event-v2 *::before,
.portal-event-v2 *::after {
  box-sizing:border-box;
}


.event-command-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;

  margin:0 0 18px;
}


.event-kicker,
.event-command-head > div > .event-kicker {
  color:var(--event-cyan);

  font-size:11px;
  line-height:1.2;

  font-weight:950;
  letter-spacing:.16em;

  text-transform:uppercase;
}


.event-command-head h1 {
  margin:7px 0 5px;

  font-size:
    clamp(
      32px,
      4.3vw,
      62px
    );

  line-height:.88;

  font-weight:1000;
  letter-spacing:-.055em;

  color:#ffffff;
}


.event-command-head h1 span {
  display:block;

  color:#95b7c9;

  font-size:.43em;
  line-height:1.1;

  letter-spacing:.08em;
}


.event-command-head p {
  margin:9px 0 0;

  max-width:720px;

  color:#8ea8b8;

  font-size:14px;
}


.event-back {
  flex:0 0 auto;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:42px;

  padding:0 16px;

  border:
    1px solid
    rgba(77,232,255,.26);

  border-radius:10px;

  background:
    rgba(5,17,28,.72);

  color:
    var(--event-cyan);

  text-decoration:none;

  font-size:11px;
  font-weight:950;

  letter-spacing:.08em;
}


.event-back:hover {
  border-color:
    rgba(77,232,255,.62);

  background:
    rgba(16,47,66,.82);
}


/* HERO */

.event-hero {
  position:relative;

  min-height:480px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,82,104,.24);

  border-radius:24px;

  background:
    radial-gradient(
      circle at 80% 24%,
      rgba(255,211,87,.15),
      transparent 29%
    ),
    radial-gradient(
      circle at 62% 76%,
      rgba(255,63,84,.20),
      transparent 36%
    ),
    linear-gradient(
      120deg,
      #07121d 0%,
      #101b29 43%,
      #481429 72%,
      #991f37 100%
    );

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.34),
    inset 0 0 0 1px
    rgba(255,255,255,.018);
}


.event-hero__grid {
  position:absolute;
  inset:0;

  opacity:.2;

  background-image:
    linear-gradient(
      rgba(255,255,255,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.045) 1px,
      transparent 1px
    );

  background-size:
    34px 34px;

  mask-image:
    linear-gradient(
      90deg,
      #000,
      transparent
    );
}


.event-hero::before {
  content:"KANTO";

  position:absolute;

  left:34px;
  bottom:-31px;

  color:
    rgba(255,255,255,.035);

  font-size:
    clamp(
      100px,
      16vw,
      230px
    );

  line-height:.8;

  font-weight:1000;

  letter-spacing:-.07em;
}


.event-hero::after {
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  right:-80px;
  top:-120px;

  border:
    58px solid
    rgba(255,255,255,.025);

  border-radius:50%;
}


.event-hero__copy {
  position:relative;
  z-index:4;

  width:56%;

  min-height:480px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:
    42px 22px 42px 46px;
}


.event-hero__live {
  display:inline-flex;
  align-items:center;

  width:max-content;

  gap:9px;

  margin-bottom:18px;

  padding:
    8px 12px;

  border:
    1px solid
    rgba(255,82,104,.42);

  border-radius:999px;

  background:
    rgba(79,13,28,.58);

  color:#ff9bac;

  font-size:10px;
  font-weight:1000;

  letter-spacing:.13em;
}


.event-hero__live span {
  width:8px;
  height:8px;

  border-radius:50%;

  background:
    #ff465d;

  box-shadow:
    0 0 18px
    #ff465d;

  animation:
    eventPulse
    1.2s
    infinite;
}


.event-hero__region {
  color:
    var(--event-gold);

  font-size:12px;

  font-weight:950;

  letter-spacing:.13em;
}


.event-hero h2 {
  margin:
    9px 0 14px;

  color:#fff;

  font-size:
    clamp(
      38px,
      5vw,
      70px
    );

  line-height:.91;

  letter-spacing:-.055em;

  font-weight:1000;
}


.event-hero h2 em {
  color:
    var(--event-red);

  font-style:normal;
}


.event-hero__copy > p {
  max-width:600px;

  margin:0;

  color:#9eb4c1;

  font-size:14px;
  line-height:1.65;
}


.event-hero__progress {
  width:min(610px,100%);

  margin-top:26px;
}


.event-hero__progress > div:first-child {
  display:flex;
  align-items:flex-end;
  gap:14px;
}


.event-hero__progress strong {
  color:#fff;

  font-size:35px;
  line-height:1;

  font-weight:1000;
}


.event-hero__progress span {
  color:#9bb2bf;

  font-size:10px;
  font-weight:900;

  letter-spacing:.12em;
}


.event-hero__progress small {
  display:block;

  margin-top:8px;

  color:
    var(--event-cyan);

  font-size:10px;

  font-weight:900;

  letter-spacing:.09em;
}


.event-progress {
  position:relative;

  width:100%;
  height:9px;

  overflow:hidden;

  margin-top:13px;

  border-radius:999px;

  background:
    rgba(255,255,255,.075);

  box-shadow:
    inset 0 1px 4px
    rgba(0,0,0,.4);
}


.event-progress span {
  position:absolute;
  inset:
    0 auto 0 0;

  display:block;

  min-width:0;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #ff334f,
      #ff805a,
      #ffd769
    );

  box-shadow:
    0 0 18px
    rgba(255,70,88,.45);

  transition:
    width .45s ease;
}


.event-progress.is-hero {
  height:14px;
}


.event-hero__pokemon {
  position:absolute;
  z-index:3;

  right:0;
  top:0;

  width:49%;
  height:100%;

  pointer-events:none;
}


.event-mon {
  position:absolute;

  object-fit:contain;

  filter:
    drop-shadow(
      0 26px 26px
      rgba(0,0,0,.45)
    );

  user-select:none;
}


.event-mon--charizard {
  z-index:4;

  width:48%;
  height:62%;

  right:25%;
  top:4%;

  transform:
    rotate(-3deg);
}


.event-mon--blastoise {
  z-index:3;

  width:40%;
  height:52%;

  right:2%;
  bottom:1%;

  transform:
    rotate(3deg);
}


.event-mon--venusaur {
  z-index:2;

  width:40%;
  height:48%;

  left:1%;
  bottom:-1%;

  transform:
    rotate(-4deg);
}


.event-mon--pikachu {
  z-index:6;

  width:27%;
  height:36%;

  right:39%;
  bottom:-1%;

  filter:
    drop-shadow(
      0 20px 20px
      rgba(0,0,0,.45)
    )
    drop-shadow(
      0 0 18px
      rgba(255,216,73,.22)
    );
}


.event-hero__pokeball {
  position:absolute;

  z-index:1;

  width:300px;
  height:300px;

  right:12%;
  top:18%;

  border:
    20px solid
    rgba(255,255,255,.035);

  border-radius:50%;
}


.event-hero__pokeball::before {
  content:"";

  position:absolute;

  left:-20px;
  right:-20px;
  top:50%;

  height:20px;

  transform:
    translateY(-50%);

  background:
    rgba(255,255,255,.035);
}


.event-hero__pokeball i {
  position:absolute;

  width:66px;
  height:66px;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  border:
    16px solid
    rgba(255,255,255,.035);

  border-radius:50%;
}


.event-hero__sparks {
  position:absolute;
  inset:0;

  z-index:2;

  pointer-events:none;
}


.event-hero__sparks i {
  position:absolute;

  width:5px;
  height:5px;

  border-radius:50%;

  background:
    var(--event-gold);

  box-shadow:
    0 0 14px
    var(--event-gold);

  animation:
    eventSpark
    4s
    infinite ease-in-out;
}


.event-hero__sparks i:nth-child(1) {
  left:58%;
  top:18%;
}


.event-hero__sparks i:nth-child(2) {
  left:72%;
  top:13%;
  animation-delay:-1s;
}


.event-hero__sparks i:nth-child(3) {
  left:91%;
  top:47%;
  animation-delay:-2s;
}


.event-hero__sparks i:nth-child(4) {
  left:64%;
  top:69%;
  animation-delay:-.4s;
}


.event-hero__sparks i:nth-child(5) {
  left:82%;
  top:78%;
  animation-delay:-2.8s;
}


.event-hero__sparks i:nth-child(6) {
  left:54%;
  top:41%;
  animation-delay:-1.8s;
}


/* FINAL VAULT */

.event-vault {
  position:relative;

  min-height:230px;

  display:grid;

  grid-template-columns:
    1fr 210px;

  gap:28px;

  overflow:hidden;

  margin-top:20px;

  padding:
    30px 32px;

  border:
    1px solid
    rgba(255,214,101,.24);

  border-radius:20px;

  background:
    linear-gradient(
      105deg,
      rgba(32,26,10,.94),
      rgba(12,20,28,.96) 55%,
      rgba(54,33,12,.94)
    );

  box-shadow:
    inset 0 0 60px
    rgba(255,207,77,.04);
}


.event-vault.is-open {
  border-color:
    rgba(255,218,103,.68);

  box-shadow:
    0 0 42px
    rgba(255,204,72,.12),
    inset 0 0 70px
    rgba(255,207,77,.08);
}


.event-vault__copy {
  position:relative;
  z-index:2;
}


.event-vault h2 {
  margin:
    7px 0 8px;

  color:
    #fff2b2;

  font-size:
    clamp(
      26px,
      3vw,
      42px
    );

  letter-spacing:-.04em;
}


.event-vault p {
  max-width:780px;

  margin:0 0 18px;

  color:#b4aa82;

  font-size:13px;
  line-height:1.55;
}


.event-vault__rewards,
.event-reward-pills {
  display:flex;
  flex-wrap:wrap;

  gap:7px;
}


.event-reward-pill {
  display:inline-flex;
  align-items:center;

  min-height:31px;

  padding:0 10px;

  border:
    1px solid
    rgba(255,214,101,.19);

  border-radius:999px;

  background:
    rgba(255,209,78,.075);

  color:
    #ffe89a;

  font-size:10px;
  font-weight:900;

  letter-spacing:.035em;
}


.event-vault__chest {
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:8px;

  border-left:
    1px solid
    rgba(255,215,105,.12);
}


.event-vault__orb {
  width:116px;
  height:116px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(255,223,133,.35);

  border-radius:28px;

  background:
    radial-gradient(
      circle,
      rgba(255,223,123,.17),
      rgba(52,35,10,.16)
    );

  font-size:48px;

  box-shadow:
    0 0 34px
    rgba(255,207,79,.09);
}


.event-vault__chest span {
  color:
    var(--event-gold);

  font-size:10px;

  font-weight:1000;

  letter-spacing:.18em;
}


.event-vault__flare {
  position:absolute;

  width:420px;
  height:420px;

  right:-100px;
  top:-170px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,208,72,.10),
      transparent 65%
    );
}


/* SECTIONS */

.event-section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin:
    36px 0 15px;
}


.event-section-head span,
.event-panel header span,
.event-champion-banner span {
  color:
    var(--event-cyan);

  font-size:10px;

  font-weight:950;

  letter-spacing:.14em;
}


.event-section-head h2,
.event-panel h2 {
  margin:5px 0 0;

  color:#fff;

  font-size:
    clamp(
      22px,
      2.4vw,
      34px
    );

  letter-spacing:-.035em;
}


.event-section-head__status {
  text-align:right;
}


.event-section-head__status b {
  display:block;

  margin-top:3px;

  color:#fff;

  font-size:12px;
}


/* OBJECTIVES */

.event-objective-grid {
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:13px;
}


.event-objective {
  position:relative;

  min-height:335px;

  overflow:hidden;

  display:flex;
  flex-direction:column;

  border:
    1px solid
    var(--event-line);

  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(12,29,43,.96),
      rgba(5,16,26,.96)
    );

  box-shadow:
    0 18px 35px
    rgba(0,0,0,.19);
}


.event-objective.is-complete {
  border-color:
    rgba(84,241,155,.48);

  box-shadow:
    0 0 34px
    rgba(70,240,150,.07);
}


.event-objective__glow {
  position:absolute;

  width:190px;
  height:190px;

  right:-85px;
  top:-90px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(76,225,255,.10),
      transparent 68%
    );
}


.event-objective.is-complete
.event-objective__glow {
  background:
    radial-gradient(
      circle,
      rgba(77,245,147,.14),
      transparent 68%
    );
}


.event-objective__head {
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:
    18px 18px 0;
}


.event-objective__icon {
  width:45px;
  height:45px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:13px;

  background:
    rgba(255,255,255,.035);

  font-size:23px;
}


.event-objective__state {
  padding:
    6px 8px;

  border:
    1px solid
    rgba(255,89,109,.20);

  border-radius:999px;

  color:#ff8496;

  background:
    rgba(255,60,84,.06);

  font-size:8px;

  font-weight:1000;

  letter-spacing:.12em;
}


.event-objective__state.is-complete {
  color:
    var(--event-green);

  border-color:
    rgba(83,244,150,.22);

  background:
    rgba(83,244,150,.06);
}


.event-objective__body {
  position:relative;
  z-index:2;

  padding:
    18px;
}


.event-objective__body > small,
.event-objective__reward > small {
  color:#708c9b;

  font-size:8px;

  font-weight:950;

  letter-spacing:.13em;
}


.event-objective h3 {
  margin:
    5px 0 12px;

  color:#fff;

  font-size:17px;

  letter-spacing:-.02em;
}


.event-objective__score {
  display:flex;
  align-items:baseline;

  gap:6px;
}


.event-objective__score strong {
  color:#fff;

  font-size:
    clamp(
      24px,
      2vw,
      32px
    );

  line-height:1;

  letter-spacing:-.045em;
}


.event-objective__score span {
  color:#6f8b9b;

  font-size:11px;
}


.event-objective__meta {
  display:flex;
  justify-content:space-between;

  gap:10px;

  margin-top:9px;

  color:#6f8a98;

  font-size:8px;

  font-weight:900;

  letter-spacing:.06em;
}


.event-objective__reward {
  position:relative;
  z-index:2;

  margin-top:auto;

  padding:
    0 18px 18px;
}


.event-objective__reward
.event-reward-pills {
  min-height:70px;

  align-content:flex-start;

  margin-top:7px;
}


/* CLAIM */

.event-claim-button {
  width:100%;

  min-height:40px;

  margin-top:12px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:10px;

  background:
    rgba(255,255,255,.035);

  color:#748c98;

  font-size:9px;

  font-weight:1000;

  letter-spacing:.095em;

  cursor:not-allowed;
}


.event-claim-button.is-ready {
  border-color:
    rgba(255,216,102,.44);

  background:
    linear-gradient(
      135deg,
      #8b5b0b,
      #d99d22
    );

  color:#fff8cf;

  cursor:pointer;

  box-shadow:
    0 0 22px
    rgba(255,194,50,.10);
}


.event-claim-button.is-ready:hover {
  filter:brightness(1.12);
}


.event-claim-button.is-claimed {
  border-color:
    rgba(83,243,150,.22);

  background:
    rgba(83,243,150,.06);

  color:
    var(--event-green);
}


/* LOWER */

.event-lower-grid {
  display:grid;

  grid-template-columns:
    minmax(0,.9fr)
    minmax(0,1.1fr);

  gap:14px;

  margin-top:18px;
}


.event-panel {
  min-height:300px;

  padding:20px;

  border:
    1px solid
    var(--event-line);

  border-radius:18px;

  background:
    var(--event-panel);

  box-shadow:
    0 18px 35px
    rgba(0,0,0,.16);
}


.event-panel header {
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding-bottom:14px;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);
}


.event-panel header > b {
  color:
    #ff7187;

  font-size:9px;

  letter-spacing:.14em;
}


.event-signal-list,
.event-history-list {
  display:grid;

  gap:8px;

  margin-top:13px;
}


.event-signal-row {
  display:grid;

  grid-template-columns:
    35px 1fr;

  align-items:center;

  gap:10px;

  padding:
    10px 11px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:11px;

  background:
    rgba(255,255,255,.025);
}


.event-signal-row > span {
  font-size:19px;
}


.event-signal-row strong,
.event-history-row strong {
  display:block;

  color:#eefdff;

  font-size:10px;

  letter-spacing:.05em;
}


.event-signal-row small,
.event-history-row span {
  display:block;

  margin-top:2px;

  color:#728b99;

  font-size:9px;
}


.event-signal-empty,
.event-history-empty {
  min-height:180px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:6px;

  color:#6e8795;

  text-align:center;

  font-size:10px;
}


.event-history-empty > div {
  font-size:32px;
}


.event-history-empty strong {
  color:#c7dbe4;

  font-size:11px;
}


.event-history-row {
  display:grid;

  grid-template-columns:
    42px 1fr auto;

  align-items:center;

  gap:12px;

  padding:
    11px 12px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:11px;

  background:
    rgba(255,255,255,.025);
}


.event-history-row__medal {
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:
    rgba(255,214,94,.08);
}


.event-history-row__meta {
  text-align:right;
}


.event-history-row__meta b {
  display:block;

  color:
    var(--event-gold);

  font-size:13px;
}


.event-history-row__meta small {
  color:#657d89;

  font-size:8px;
}


/* CHAMPION */

.event-champion-banner {
  position:relative;

  min-height:220px;

  display:grid;

  grid-template-columns:
    190px 1fr 120px;

  align-items:center;

  gap:25px;

  overflow:hidden;

  margin-top:18px;

  padding:
    10px 28px;

  border:
    1px solid
    rgba(187,100,255,.22);

  border-radius:19px;

  background:
    radial-gradient(
      circle at 12% 40%,
      rgba(150,68,255,.17),
      transparent 32%
    ),
    linear-gradient(
      105deg,
      #091421,
      #15152b 58%,
      #26123b
    );
}


.event-champion-banner::after {
  content:"";

  position:absolute;

  width:320px;
  height:320px;

  right:-140px;
  top:-150px;

  border:
    34px solid
    rgba(206,130,255,.04);

  border-radius:50%;
}


.event-champion-banner__mon {
  position:relative;

  height:200px;
}


.event-champion-mewtwo {
  position:absolute;

  width:190px;
  height:210px;

  object-fit:contain;

  left:-8px;
  bottom:-12px;

  filter:
    drop-shadow(
      0 20px 24px
      rgba(0,0,0,.42)
    )
    drop-shadow(
      0 0 20px
      rgba(179,93,255,.13)
    );
}


.event-champion-banner h2 {
  margin:
    5px 0 6px;

  color:#fff;

  font-size:
    clamp(
      25px,
      3vw,
      42px
    );

  letter-spacing:-.045em;
}


.event-champion-banner p {
  max-width:640px;

  margin:0;

  color:#908ca7;

  font-size:12px;
}


.event-champion-banner__badge {
  position:relative;
  z-index:2;

  width:94px;
  height:94px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(218,166,255,.28);

  border-radius:50%;

  background:
    rgba(143,73,202,.08);

  color:#bb96d7;

  font-size:9px;

  font-weight:1000;

  letter-spacing:.13em;
}


.event-champion-banner__badge strong {
  display:block;

  color:#fff;

  font-size:33px;
  line-height:1;
}


/* LOADING / ERROR */

.event-loading,
.event-empty-state {
  min-height:
    min(
      670px,
      calc(100vh - 170px)
    );

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:10px;

  border:
    1px solid
    var(--event-line);

  border-radius:20px;

  background:
    rgba(5,17,28,.82);

  color:#7f9aa8;

  text-align:center;
}


.event-loading strong,
.event-empty-state h1 {
  margin:0;

  color:#e8f8ff;

  font-size:15px;

  letter-spacing:.08em;
}


.event-loading span,
.event-empty-state p {
  color:#688391;

  font-size:10px;

  letter-spacing:.08em;
}


.event-loading__ball {
  position:relative;

  width:52px;
  height:52px;

  overflow:hidden;

  border:
    4px solid #071019;

  border-radius:50%;

  background:
    linear-gradient(
      #ef4155 0 45%,
      #071019 45% 56%,
      #f4fbff 56%
    );

  animation:
    eventBallSpin
    1.7s
    infinite ease-in-out;
}


.event-loading__ball::after {
  content:"";

  position:absolute;

  width:12px;
  height:12px;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  border:
    4px solid #071019;

  border-radius:50%;

  background:#fff;
}


.event-empty-state > div {
  font-size:38px;
}


.event-empty-state a,
.event-empty-state button {
  margin-top:8px;

  padding:
    10px 14px;

  border:
    1px solid
    rgba(77,232,255,.24);

  border-radius:9px;

  background:
    rgba(77,232,255,.05);

  color:
    var(--event-cyan);

  text-decoration:none;

  font-size:10px;

  font-weight:900;
}


/* MOTION */

@keyframes eventPulse {
  0%,
  100% {
    opacity:.55;
    transform:scale(.82);
  }

  50% {
    opacity:1;
    transform:scale(1.14);
  }
}


@keyframes eventSpark {
  0%,
  100% {
    opacity:.2;
    transform:
      translateY(0)
      scale(.7);
  }

  50% {
    opacity:1;
    transform:
      translateY(-16px)
      scale(1.35);
  }
}


@keyframes eventBallSpin {
  0%,
  100% {
    transform:rotate(-8deg);
  }

  50% {
    transform:rotate(8deg);
  }
}


/* RESPONSIVE */

@media (max-width:1100px) {

  .event-objective-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .event-hero__copy {
    width:58%;
  }


  .event-hero__pokemon {
    width:51%;
    opacity:.86;
  }

}


@media (max-width:800px) {

  .event-command-head {
    align-items:flex-start;
  }


  .event-hero {
    min-height:650px;
  }


  .event-hero__copy {
    width:100%;
    min-height:650px;

    justify-content:flex-start;

    padding:
      34px 24px 270px;
  }


  .event-hero__pokemon {
    top:auto;
    bottom:0;

    width:100%;
    height:310px;

    opacity:.92;
  }


  .event-mon--charizard {
    width:38%;
    height:72%;

    right:31%;
    top:0;
  }


  .event-mon--venusaur {
    width:32%;
    height:55%;
  }


  .event-mon--blastoise {
    width:32%;
    height:57%;
  }


  .event-mon--pikachu {
    width:24%;
    height:43%;

    right:39%;
  }


  .event-vault {
    grid-template-columns:
      1fr;
  }


  .event-vault__chest {
    min-height:130px;

    border-left:0;

    border-top:
      1px solid
      rgba(255,215,105,.12);
  }


  .event-lower-grid {
    grid-template-columns:1fr;
  }


  .event-champion-banner {
    grid-template-columns:
      130px 1fr;
  }


  .event-champion-banner__badge {
    display:none;
  }


  .event-champion-banner__mon {
    height:170px;
  }


  .event-champion-mewtwo {
    width:150px;
    height:180px;
  }

}


@media (max-width:560px) {

  .portal-event-v2 {
    padding-bottom:85px;
  }


  .event-command-head {
    display:block;
  }


  .event-command-head h1 {
    font-size:36px;
  }


  .event-back {
    margin-top:12px;
  }


  .event-hero {
    min-height:620px;

    border-radius:16px;
  }


  .event-hero__copy {
    min-height:620px;

    padding:
      26px 18px 245px;
  }


  .event-hero h2 {
    font-size:37px;
  }


  .event-hero__pokemon {
    height:270px;
  }


  .event-objective-grid {
    grid-template-columns:1fr;
  }


  .event-objective {
    min-height:315px;
  }


  .event-section-head {
    display:block;
  }


  .event-section-head__status {
    margin-top:9px;

    text-align:left;
  }


  .event-vault {
    padding:
      23px 18px;
  }


  .event-champion-banner {
    grid-template-columns:1fr;

    padding:
      20px;

    text-align:center;
  }


  .event-champion-banner__mon {
    height:155px;
  }


  .event-champion-mewtwo {
    left:50%;

    transform:
      translateX(-50%);
  }


  .event-history-row {
    grid-template-columns:
      36px 1fr;
  }


  .event-history-row__meta {
    grid-column:2;

    text-align:left;
  }

}


@media (prefers-reduced-motion: reduce) {

  .portal-event-v2 * {
    animation:none !important;
    transition:none !important;
  }

}