/* ---------- Layout grid ---------- */
.columns {
    display: grid;
    grid-template-columns: 50% 50%;
}

.columns_one {
    display: grid;
    grid-template-columns: 100%;
}

.column {
    width: 100%;
}

/* ---------- Card animation ---------- */

@keyframes peekFlip {
  0%   { transform: rotateY(0deg); }
  45%  { transform: rotateY(-32deg); }
  100% { transform: rotateY(0deg); }
}
.card-cartoonist.peek,
.card-finalists.peek {
  animation: peekFlip 1.6s ease-in-out 0.5s 1;
}


/* ---------- Card window (.content) — shared ---------- */

.content-cartoonist .content,
.content-finalists  .content {
    border: 4px solid #349FF0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 450px;
    background-color: white;
    color: #222;                 /* was #FFFFFF — that hid the caption */
    font-family: 'CCLegendaryLegerdemain-Reg', Georgia, serif;
    font-size: 1.25em;
    margin: auto;
    margin-bottom: 50px;
}

/* only the height differs */
/*.content-cartoonist .content { min-height: 365px; }   
.content-finalists  .content { min-height: 395px; }  */ 

/* only the height differs */
.content-cartoonist .content { height: 365px; }
.content-finalists  .content { height: 395px; }

/* ---------- Card title bar (.title) — shared ---------- */

.content-cartoonist .title,
.content-finalists  .title {
    display: block;
    width: 450px;
    height: 70px;                /* was 85px */
    line-height: 1.15;           /* was 20px fixed */
    border: 4px solid #349FF0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #349FF0;
    color: #FFFFFF;
    font-family: 'CCLegendaryLegerdemain-Reg', Georgia, serif;  /* was verdana */
    font-weight: normal;
    font-size: 1.1em;
    margin: auto;
    margin-top: 8px;
}


/* ---------- Flip stage ---------- */
#scene {
    height: 768px;
    width: 1024px;
    perspective: 1300px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/* ---------- The flipping card — shared ---------- */
.card-cartoonist,
.card-finalists {
    position: absolute;
    width: 450px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition-property: transform;
    transition-duration: 1.5s;
    -webkit-transition-property: transform;
    -webkit-transition-duration: 1.5s;
}

/*.card-cartoonist { min-height: 365px; }   
.card-finalists  { min-height: 395px; }   */

.card-cartoonist { height: 365px; }
.card-finalists  { height: 395px; }


.card-cartoonist.flipped,
.card-finalists.flipped {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

/* ---------- Front / back faces ---------- */

.side {
    position: absolute;
    height: inherit;
    width: inherit;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/*.side {
    position: absolute;
    height: inherit;
    width: inherit;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}*/

.front {
  background: #fff;
}

.back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    color: #FFFFFF;
}

.flip-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: #20639B; color: #fff;
  font-family: 'CCLegendaryLegerdemain-Reg', sans-serif;
  font-size: 14px; font-weight: bold;
  padding: 4px 11px; border-radius: 14px;
  pointer-events: none;
}

.flop-badge {
  position: absolute; top: -2px; right: 8px; z-index: 2;
  background: #ff9999; color: #1e3a8a;
  font-family: 'CCLegendaryLegerdemain-Reg', sans-serif;
  font-size: 14px; font-weight: bold;
  padding: 4px 11px; border-radius: 14px;
  pointer-events: none;
}


.hideGalleryBtn {
  display:inline-flex; align-items:center; gap:8px;
  background:#20639B; color:#fff;
  font-family:'CCLegendaryLegerdemain-Reg', sans-serif;
  font-size:15px; font-weight:bold; letter-spacing:0.5px;
  border:none; border-radius:24px;
  padding:10px 24px; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
  transition:background 0.2s, transform 0.1s;
}
.hideGalleryBtn:hover  { background:#2a7bbf; }
.hideGalleryBtn:active  { transform:translateY(1px); }