/* ======================================================
   GLOBAL
   ====================================================== */

:root {
  /*
   * Change this one path when your sleeve art
   * is ready.
   */
  --binder-sleeve-image:
    url("assets/binder-sleeve.png");

  /*
   * Binder geometry.
   *
   * The desktop double-page spread has a 14px gap,
   * so the spine sits 7px in from each page edge.
   */
  --binder-spread-gap: 14px;
  --binder-half-spread-gap: 7px;
}


body {
  font-family: Arial, sans-serif;

  margin: 0;
  padding: 20px;

  background-image: repeating-linear-gradient(
    45deg,
    #15151b 0px,
    #15151b 20px,
    #1b1b24 20px,
    #1b1b24 40px
  );
}


header {
  width: 100%;

  display: flex;

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

  margin-top: 20px;

  text-align: center;
}


.site-logo {
  width: 18%;
  max-width: 200%;
  height: auto;
}


h1,
h2 {
  color: white;

  text-align: center;
}


/* ======================================================
   BANNER
   ====================================================== */

.banner {
  position: sticky;

  top: 0;

  z-index: 10;

  width: 80%;

  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;

  padding: 15px;

  background-color: #1a1c2b;

  color: white;

  text-align: center;

  font-size: 18px;
  font-weight: bold;

  border-bottom: 2px solid white;
  border-radius: 8px;

  box-shadow:
    0 4px 6px
    rgba(0, 0, 0, 0.3);
}


.banner span {
  color: #ff9b00;
}


/* ======================================================
   BUTTONS
   ====================================================== */

.back-button,
button,
.button {
  padding: 8px;

  background-color: #1a1c2b;

  color: white;

  font-size: 14px;

  text-decoration: none;

  border: 1px solid white;
  border-radius: 5px;

  cursor: pointer;

  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}


.back-button {
  display: block;

  width: fit-content;

  text-align: center;
}


button:hover,
.button:hover,
.back-button:hover {
  background-color: #3a3a4d;

  border-color: #868686;
}


button:focus,
.button:focus,
.back-button:focus {
  outline: none;
}


button:disabled {
  cursor: default;
}


/* ======================================================
   USER CONTROLS
   ====================================================== */

.user-container {
  display: flex;

  flex-direction: row;
  flex-wrap: wrap;

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

  gap: 10px;

  padding: 20px;
}


/* ======================================================
   GENERIC BINDER CONTAINER
   ====================================================== */

/*
 * public-binder also uses this stylesheet,
 * so keep the base container generic.
 */

.binder-container {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 16px;

  width: 100%;
}


/* ======================================================
   CARD BOX
   ====================================================== */

.card-box {
  position: relative;

  width: 200px;

  box-sizing: border-box;

  padding: 10px;

  background-image: linear-gradient(
    #15151b 10%,
    #2e2e3d 50%
  );

  text-align: center;

  border: 1px solid white;
  border-radius: 10px;

  box-shadow:
    0 40px 50px black;
}


/* ======================================================
   CARD IMAGE WRAPPER
   ====================================================== */

.card-image-wrap {
  position: relative;

  width: 100%;

  line-height: 0;

  border-radius: 8px;
}


.card-box img {
  display: block;

  width: 100%;
  height: auto;

  box-sizing: border-box;

  border: 1px solid #52526d;
  border-radius: 8px;
}


/* ======================================================
   CARDMARKET BUTTON
   ====================================================== */

.card-box button {
  margin-top: 8px;

  padding: 6px 12px;

  background-color: #1a1c2b;

  color: white;

  font-size: 14px;

  border: 1px solid white;
  border-radius: 4px;

  cursor: pointer;

  transition:
    background-color 0.3s ease;
}


/* ======================================================
   QUANTITY / TREATMENT BADGES
   ====================================================== */

.quantity-badge,
.foil-badge {
  position: absolute;

  z-index: 5;

  padding: 4px 8px;

  color: white;

  font-size: 13px;

  border-radius: 8px;
}


.quantity-badge {
  top: 8px;
  right: 8px;

  background-color: #222;
}


.foil-badge {
  top: 8px;
  left: 8px;

  background-color: #0077ccab;
}


.foil-badge::before {
  content: "✨ ";
}


.foil-badge.PRM {
  background-color: #8e3b3b;
}


.foil-badge.TRA {
  background-color: #ff8a3d;
}


.foil-badge.FTV {
  background-color: #9c7c49ab;
}


.foil-badge.FET {
  background-color: #9c7c49ab;
}


.foil-badge.GET {
  background-color: #d4af37ab;
}


.foil-badge.TEX {
  background-color: #0f7b6f;
}


.foil-badge.AMP {
  background-color: #f1c40f;
}


.foil-badge.SIL {
  background-color: #b5b5b5;
}


.foil-badge.NEON {
  background-color: #f5bc00;
}


.foil-badge.GIL {
  background-color: #c2b3f0;
}


.foil-badge.GAL {
  background-color: #6a5acd;
}


.foil-badge.SUR {
  background-color: #4e56f7;
}


.foil-badge.DBR {
  background-color: #ff69b4;
}


.foil-badge.SCT {
  background-color: #d18792;
}


.foil-badge.OSR {
  background-color: #006f52;
}


.foil-badge.HAL {
  background-color: #ffe13d;
}


.foil-badge.RAI {
  background-color: #f404ff;
}


.foil-badge.RIP {
  background-color: #76d1c5;
}


.foil-badge.FRA {
  background-color: #9eac55;
}


.foil-badge.MAN {
  background-color: #ff5f57;
}


.foil-badge.FIR {
  background-color: #ff5f57;
}


/* ======================================================
   COLLECTOR BADGE
   ====================================================== */

.collector-badge {
  position: absolute;

  bottom: 30px;
  left: 12px;

  padding: 2px 6px;

  background-color: #000;

  color: white;

  font-family: monospace;
  font-size: 12px;

  border-radius: 6px;
}


/* ======================================================
   FOOTER
   ====================================================== */

#foot-notes {
  float: right;

  margin-left: 1%;
  margin-top: 1%;

  color: white;
}


#ko-fi-footer {
  float: left;
}


/* ======================================================
   BINDER WORKSPACE
   ====================================================== */

.binder-workspace {
  display: grid;

  grid-template-columns:
    240px
    minmax(0, 1fr);

  align-items: start;

  gap: 22px;

  width: 100%;
  max-width: 1800px;

  box-sizing: border-box;

  margin: 0 auto;

  padding: 22px;

  background: linear-gradient(
    145deg,
    rgba(17, 17, 23, 0.96),
    rgba(37, 37, 50, 0.96)
  );

  border: 1px solid #4f4f64;
  border-radius: 18px;

  box-shadow:
    0 25px 45px
    rgba(0, 0, 0, 0.5);
}


/* ======================================================
   DISABLE INTERACTION DURING PAGE TURN
   ====================================================== */

.binder-workspace.binder-is-turning
.binder-stage,

.binder-workspace.binder-is-turning
.unsorted-panel {
  pointer-events: none;
}


.binder-workspace.binder-is-turning
.card-box {
  cursor: default;
}


/* ======================================================
   CARDS TO PLACE PANEL
   ====================================================== */

.unsorted-panel {
  display: flex;

  flex-direction: column;

  min-width: 0;
  min-height: 0;

  box-sizing: border-box;

  padding: 14px;

  overflow: hidden;

  color: white;

  background: rgba(
    9,
    9,
    14,
    0.45
  );

  border: 1px solid #45455b;
  border-radius: 12px;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}


.unsorted-panel-dragover {
  background: rgba(
    52,
    52,
    70,
    0.7
  );

  border-color: white;
}


/* ======================================================
   CARDS TO PLACE HEADER
   ====================================================== */

.unsorted-header {
  flex: 0 0 auto;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 14px;
}


.unsorted-header h2 {
  margin:
    0 0 6px;

  color: white;

  text-align: left;

  font-size: 18px;
}


.binder-help {
  margin: 0;

  color: #c9c9d3;

  text-align: left;

  font-size: 12px;
  line-height: 1.4;
}


.unsorted-count {
  flex: 0 0 auto;

  min-width: 24px;

  box-sizing: border-box;

  padding: 4px 7px;

  background-color: #1a1c2b;

  color: white;

  text-align: center;

  font-size: 12px;

  border: 1px solid #77778f;
  border-radius: 999px;
}


.return-unsorted-button {
  flex: 0 0 auto;

  width: 100%;

  margin:
    0 0 12px;
}


/* ======================================================
   PHYSICAL CARDS-TO-PLACE STACK
   ====================================================== */

.unsorted-cards {
  position: relative;

  display: block;

  flex: 1 1 auto;

  width: 100%;

  min-height: 0;

  box-sizing: border-box;

  padding:
    4px 0 0;

  overflow: hidden;
}


.unsorted-cards
.card-box {
  width: min(
    175px,
    calc(
      100% - 8px
    )
  );

  box-sizing: border-box;

  margin: 0;

  cursor: grab;

  box-shadow:
    0 14px 20px
    rgba(0, 0, 0, 0.5);

  transition:
    box-shadow 0.15s ease,
    outline 0.15s ease;
}


/*
 * No Cardmarket button in loose cards.
 */

.unsorted-cards
.card-box
button {
  display: none;
}


.unsorted-cards
.card-box:hover {
  z-index:
    10000 !important;

  box-shadow:
    0 20px 35px
    rgba(0, 0, 0, 0.85);
}


.unsorted-cards
.card-box.binder-card-selected {
  z-index:
    10001 !important;
}


/* ======================================================
   UNSORTED EMPTY / LOADING
   ====================================================== */

.unsorted-empty,
.binder-loading {
  width: 100%;

  box-sizing: border-box;

  padding:
    22px 10px;

  color: #c9c9d3;

  text-align: center;

  font-size: 13px;
  line-height: 1.4;

  border:
    1px dashed #52526d;

  border-radius: 8px;
}


/* ======================================================
   BINDER STAGE
   ====================================================== */

.binder-stage {
  min-width: 0;

  box-sizing: border-box;
}


/* ======================================================
   PAGE TOOLBAR
   ====================================================== */

.binder-page-toolbar {
  display: flex;

  flex-wrap: wrap;

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

  gap: 10px;

  margin:
    0 0 16px;
}


.page-indicator {
  min-width: 160px;

  color: white;

  text-align: center;

  font-weight: bold;
}


.binder-page-toolbar
button:disabled,

.delete-binder-page-button:disabled {
  opacity: 0.35;

  cursor: default;
}


/* ======================================================
   OPEN BINDER
   ====================================================== */

.binder-spread {
  position: relative;

  display: grid;

  width: 100%;

  box-sizing: border-box;

  gap: var(--binder-spread-gap);

  padding: 16px;

  background: #0d0d12;

  border: 1px solid #4b4b60;
  border-radius: 18px;

  box-shadow:
    inset 0 0 30px
    rgba(0, 0, 0, 0.75);

  /*
   * Required for the 3D page flip.
   */

  perspective: 2200px;

  transform-style: preserve-3d;

  isolation: isolate;

  overflow: visible;
}


/* ======================================================
   DOUBLE PAGE
   ====================================================== */

.binder-spread-double {
  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  align-items: stretch;
}


/* ======================================================
   BINDER SPINE
   ====================================================== */

.binder-spread-double::before {
  content: "";

  position: absolute;

  top: 14px;
  bottom: 14px;
  left: 50%;

  z-index: 30;

  width: 4px;

  transform:
    translateX(-50%);

  background: linear-gradient(
    to right,
    #050507,
    #444454,
    #050507
  );

  border-radius: 4px;

  box-shadow:
    0 0 12px
    rgba(0, 0, 0, 0.8);

  pointer-events: none;
}


/* ======================================================
   SINGLE PAGE
   ====================================================== */

.binder-spread-single {
  grid-template-columns:
    minmax(
      0,
      680px
    );

  justify-content: center;
}


/* ======================================================
   PAGE SHELL
   ====================================================== */

.binder-page-shell {
  position: relative;

  min-width: 0;

  box-sizing: border-box;

  padding: 12px;

  background: linear-gradient(
    145deg,
    #171720,
    #242431
  );

  border: 1px solid #4c4c61;

  box-shadow:
    0 16px 30px
    rgba(0, 0, 0, 0.45);
}


.binder-page-left {
  border-radius:
    15px 8px 8px 15px;
}


.binder-page-right {
  border-radius:
    8px 15px 15px 8px;
}


.binder-page-single {
  border-radius: 15px;
}


/* ======================================================
   MATCH BOTH DESKTOP PAGE HEIGHTS
   ====================================================== */

.binder-spread-double
.binder-page-shell {
  display: flex;

  flex-direction: column;

  align-self: stretch;
}


.binder-spread-double
.binder-page {
  display: flex;

  flex-direction: column;

  flex: 1 1 auto;

  min-height: 0;
}


.binder-spread-double
.binder-slots {
  flex: 1 1 auto;
}


/* ======================================================
   PAGE HEADER
   ====================================================== */

.binder-page-header {
  display: flex;

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

  gap: 8px;

  margin-bottom: 10px;

  padding:
    0 2px;
}


.binder-page-title {
  color: white;

  font-size: 15px;
  font-weight: bold;
}


.delete-binder-page-button {
  padding:
    5px 7px;

  font-size: 11px;
}


/* ======================================================
   PAGE INNER
   ====================================================== */

.binder-page {
  box-sizing: border-box;

  padding: 9px;

  background: rgba(
    5,
    5,
    8,
    0.65
  );

  border: 1px solid #343445;
  border-radius: 10px;
}


/* ======================================================
   3 x 3 POCKET GRID
   ====================================================== */

.binder-slots {
  display: grid;

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

  grid-template-rows:
    repeat(
      3,
      1fr
    );

  gap: 8px;

  align-items: stretch;
}


/* ======================================================
   POCKET
   ====================================================== */

.binder-slot {
  position: relative;

  display: flex;

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

  min-width: 0;

  /*
   * Empty pockets remain card-sized.
   */

  min-height: 300px;

  box-sizing: border-box;

  padding: 5px;

  overflow: hidden;

  background: rgba(
    255,
    255,
    255,
    0.022
  );

  border:
    1px dashed #55556d;

  border-radius: 9px;

  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}


.binder-slot-filled {
  background: rgba(
    0,
    0,
    0,
    0.16
  );

  border-style: solid;

  border-color: #414155;
}


.binder-slot-dragover {
  background: rgba(
    82,
    82,
    109,
    0.4
  );

  border-color: white;
}


/* ======================================================
   POCKET LABELS
   ====================================================== */

.pocket-number {
  position: absolute;

  top: 5px;
  right: 6px;

  z-index: 2;

  color: #77778f;

  font-size: 9px;

  pointer-events: none;
}


.empty-pocket-label {
  color: #707080;

  text-align: center;

  font-size: 11px;

  pointer-events: none;
}


/* ======================================================
   CARD INSIDE POCKET
   ====================================================== */

.binder-slot
.card-box {
  position: relative;

  width: 100%;
  max-width: 180px;

  box-sizing: border-box;

  padding: 5px;

  cursor: grab;

  box-shadow:
    0 10px 16px
    rgba(0, 0, 0, 0.55);
}


.binder-slot
.card-box
button {
  display: inline-block;

  margin-top: 4px;

  padding:
    4px 7px;

  font-size: 11px;
}


.binder-slot
.quantity-badge,

.binder-slot
.foil-badge {
  padding:
    2px 4px;

  font-size: 9px;
}


/* ======================================================
   PLASTIC SLEEVE OVERLAY
   ====================================================== */

/*
 * Your art goes here:
 *
 * assets/binder-sleeve.png
 *
 * The centre of the image should be transparent.
 *
 * This layer exists ONLY on cards inside
 * binder pockets.
 */

.binder-slot
.card-image-wrap::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 3;

  background-image:
    var(
      --binder-sleeve-image
    );

  background-size:
    100% 100%;

  background-position:
    center;

  background-repeat:
    no-repeat;

  border-radius: 8px;

  pointer-events: none;
}


/* ======================================================
   CARD DRAG / SELECT
   ====================================================== */

.card-box.binder-card-dragging {
  opacity: 0.4;
}


.card-box.binder-card-selected {
  outline:
    3px solid white;

  outline-offset: 3px;
}


.card-box:active {
  cursor: grabbing;
}


/* ======================================================
   EMPTY RIGHT-HAND SIDE
   ====================================================== */

.binder-blank-side {
  display: flex;

  min-width: 0;

  box-sizing: border-box;

  padding: 12px;

  background: linear-gradient(
    145deg,
    #111118,
    #1a1a22
  );

  border: 1px solid #292936;

  border-radius:
    8px 15px 15px 8px;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}


.binder-blank-side-inner {
  display: flex;

  flex: 1 1 auto;

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

  min-height: 0;

  box-sizing: border-box;

  padding: 20px;

  color: #77778b;

  text-align: center;

  border:
    1px dashed #45455b;

  border-radius: 10px;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}


.blank-page-drop-message {
  display: flex;

  flex-direction: column;

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

  gap: 9px;

  max-width: 220px;

  pointer-events: none;
}


.blank-page-drop-message
strong {
  color: #c9c9d3;

  font-size: 15px;
}


.blank-page-drop-message
span:last-child {
  color: #77778b;

  font-size: 12px;
  line-height: 1.4;
}


.blank-page-plus {
  color: #8e8ea3;

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


.binder-blank-side-dragover {
  background: linear-gradient(
    145deg,
    #20202b,
    #292938
  );

  border-color: white;

  box-shadow:
    inset 0 0 25px
    rgba(
      255,
      255,
      255,
      0.05
    );
}


.binder-blank-side-dragover
.binder-blank-side-inner {
  background-color: rgba(
    255,
    255,
    255,
    0.035
  );

  border-color: white;
}


.binder-blank-side-dragover
.blank-page-plus,

.binder-blank-side-dragover
.blank-page-drop-message
strong {
  color: white;
}


/* ======================================================
   STATUS
   ====================================================== */

.binder-status {
  min-height: 18px;

  margin:
    14px 0 0;

  color: #d4d4dc;

  text-align: center;

  font-size: 12px;
}


/* ======================================================
   3D PAGE TURN
   ====================================================== */

/*
 * Old non-turning half of the binder is temporarily
 * cloned above the new spread during an animation.
 */

.binder-static-page-overlay {
  position: absolute !important;

  z-index: 35;

  margin: 0 !important;

  pointer-events: none !important;
}


/*
 * This is the physical sheet being turned.
 */

.binder-page-turner {
  position: absolute;

  z-index: 50;

  margin: 0;

  transform-style: preserve-3d;

  will-change:
    transform,
    box-shadow;

  pointer-events: none;
}


/* ======================================================
   PAGE TURN PIVOTS
   ====================================================== */

/*
 * Single-page mode:
 * pivot from the natural page edge.
 */

.binder-page-turner-next {
  transform-origin:
    left center;
}


.binder-page-turner-previous {
  transform-origin:
    right center;
}


/*
 * Desktop open-binder mode:
 *
 * The visible gap between the two page shells is 14px.
 * The spine sits halfway through that gap.
 *
 * Therefore:
 *
 * RIGHT PAGE turning forward:
 * pivot 7px LEFT of its own left edge.
 *
 * LEFT PAGE turning backward:
 * pivot 7px RIGHT of its own right edge.
 */

@media (min-width: 1180px) {

  .binder-spread-double
  > .binder-page-turner-next {
    transform-origin:
      -7px 50%;
  }


  .binder-spread-double
  > .binder-page-turner-previous {
    transform-origin:
      calc(100% + 7px) 50%;
  }
}


/* ======================================================
   FRONT / BACK OF TURNING SHEET
   ====================================================== */

.binder-page-turn-face {
  position: absolute !important;

  inset: 0;

  width: 100% !important;
  height: 100% !important;

  box-sizing: border-box;

  margin: 0 !important;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  transform-style: preserve-3d;

  pointer-events: none !important;
}


.binder-page-turn-back {
  transform:
    rotateY(180deg);
}


/* ======================================================
   FORWARD TURN
   ====================================================== */

.binder-page-turn-animate-next {
  animation:
    binder-turn-next
    700ms
    cubic-bezier(
      0.35,
      0.05,
      0.2,
      1
    )
    forwards;
}


@keyframes binder-turn-next {

  0% {
    transform:
      rotateY(0deg);

    box-shadow:
      0 0 0
      rgba(0, 0, 0, 0);
  }


  35% {
    box-shadow:
      -16px 3px 25px
      rgba(0, 0, 0, 0.45);
  }


  50% {
    box-shadow:
      -30px 5px 45px
      rgba(0, 0, 0, 0.68);
  }


  75% {
    box-shadow:
      -18px 3px 30px
      rgba(0, 0, 0, 0.5);
  }


  100% {
    transform:
      rotateY(-180deg);

    box-shadow:
      0 0 0
      rgba(0, 0, 0, 0);
  }
}


/* ======================================================
   BACKWARD TURN
   ====================================================== */

.binder-page-turn-animate-previous {
  animation:
    binder-turn-previous
    700ms
    cubic-bezier(
      0.35,
      0.05,
      0.2,
      1
    )
    forwards;
}


@keyframes binder-turn-previous {

  0% {
    transform:
      rotateY(0deg);

    box-shadow:
      0 0 0
      rgba(0, 0, 0, 0);
  }


  35% {
    box-shadow:
      16px 3px 25px
      rgba(0, 0, 0, 0.45);
  }


  50% {
    box-shadow:
      30px 5px 45px
      rgba(0, 0, 0, 0.68);
  }


  75% {
    box-shadow:
      18px 3px 30px
      rgba(0, 0, 0, 0.5);
  }


  100% {
    transform:
      rotateY(180deg);

    box-shadow:
      0 0 0
      rgba(0, 0, 0, 0);
  }
}


/* ======================================================
   SMALL DESKTOP
   ====================================================== */

@media (max-width: 1179px) {

  .binder-workspace {
    grid-template-columns:
      220px
      minmax(
        0,
        1fr
      );

    max-width: 1100px;
  }


  .binder-spread {
    max-width: 700px;

    margin:
      0 auto;
  }


  .binder-slot {
    min-height: 260px;
  }
}


/* ======================================================
   TABLET / MOBILE
   ====================================================== */

@media (max-width: 900px) {

  .binder-workspace {
    grid-template-columns:
      1fr;

    gap: 18px;

    padding: 14px;
  }


  .unsorted-panel {
    display: block;

    width: 100%;

    height:
      auto !important;

    overflow: visible;
  }


  /*
   * Horizontal Cards to Place tray.
   */

  .unsorted-cards {
    position: static;

    display: flex;

    flex-direction: row;

    align-items: stretch;
    justify-content: flex-start;

    width: 100%;

    min-height: 0;

    overflow-x: auto;
    overflow-y: hidden;

    padding:
      4px 2px 12px;

    scroll-snap-type:
      x proximity;
  }


  .unsorted-cards
  .card-box {
    position:
      relative !important;

    top:
      auto !important;

    left:
      auto !important;

    z-index:
      auto !important;

    flex:
      0 0 135px;

    width: 135px;

    margin: 0;

    transform:
      none !important;

    scroll-snap-align:
      start;
  }


  .unsorted-cards
  .card-box:hover,

  .unsorted-cards
  .card-box.binder-card-selected {
    z-index:
      auto !important;
  }


  .binder-page-shell {
    padding: 9px;
  }


  .binder-page {
    padding: 7px;
  }


  .binder-slots {
    gap: 6px;
  }


  .binder-slot {
    min-height: 220px;

    padding: 4px;
  }


  .binder-slot
  .card-box {
    padding: 4px;

    border-radius: 7px;
  }


  .binder-slot
  .card-box
  img {
    border-radius: 5px;
  }


  .binder-slot
  .card-box
  button {
    display: inline-block;

    padding:
      3px 5px;

    font-size: 10px;
  }


  .binder-slot
  .quantity-badge,

  .binder-slot
  .foil-badge {
    padding:
      2px 3px;

    font-size: 8px;
  }
}


/* ======================================================
   PHONE
   ====================================================== */

@media (max-width: 520px) {

  body {
    padding: 10px;
  }


  .site-logo {
    width: 42%;
  }


  .banner {
    width: auto;

    padding: 11px;

    font-size: 15px;
  }


  .user-container {
    padding:
      10px 0 16px;
  }


  .binder-workspace {
    padding: 9px;

    border-radius: 12px;
  }


  /* ==================================================
     CARDS TO PLACE
     ================================================== */

  .unsorted-panel {
    padding: 10px;
  }


  .unsorted-header {
    gap: 8px;

    margin-bottom: 10px;
  }


  .unsorted-header h2 {
    margin-bottom: 4px;

    font-size: 16px;
  }


  .binder-help {
    font-size: 11px;
  }


  .unsorted-count {
    font-size: 11px;
  }


  /* ==================================================
     TOOLBAR
     ================================================== */

  .binder-page-toolbar {
    gap: 6px;
  }


  .binder-page-toolbar
  button {
    padding:
      6px 7px;

    font-size: 11px;
  }


  .page-indicator {
    order: -1;

    width: 100%;

    min-width: 0;
  }


  /* ==================================================
     BINDER
     ================================================== */

  .binder-spread {
    padding: 5px;

    border-radius: 10px;

    /*
     * Slightly stronger perspective on the
     * smaller viewport.
     */

    perspective: 1400px;
  }


  .binder-page-shell {
    padding: 5px;

    border-radius: 8px;
  }


  .binder-page-header {
    margin-bottom: 6px;
  }


  .binder-page-title {
    font-size: 12px;
  }


  .delete-binder-page-button {
    padding:
      4px 5px;

    font-size: 9px;
  }


  .binder-page {
    padding: 4px;
  }


  .binder-slots {
    gap: 3px;
  }


  /* ==================================================
     POCKETS
     ================================================== */

  .binder-slot {
    min-height: 165px;

    padding: 2px;

    border-radius: 6px;
  }


  .binder-slot
  .card-box {
    padding: 2px;

    border-radius: 5px;
  }


  /*
   * Cardmarket becomes magnifying glass
   * inside binder pockets.
   */

  .binder-slot
  .card-box
  button {
    display: inline-block;

    width: 100%;

    margin-top: 2px;

    padding: 2px;

    font-size: 0;
  }


  .binder-slot
  .card-box
  button::after {
    content: "🔍";

    font-size: 12px;
  }


  /* ==================================================
     BADGES
     ================================================== */

  .binder-slot
  .quantity-badge,

  .binder-slot
  .foil-badge {
    top: 3px;

    padding:
      1px 3px;

    font-size: 7px;
  }


  .binder-slot
  .quantity-badge {
    right: 3px;
  }


  .binder-slot
  .foil-badge {
    left: 3px;

    max-width:
      calc(
        100% - 26px
      );

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
  }


  .pocket-number {
    display: none;
  }


  .empty-pocket-label {
    font-size: 9px;
  }


  /* ==================================================
     BLANK ADD-PAGE SIDE
     ================================================== */

  .binder-blank-side {
    padding: 6px;
  }


  .binder-blank-side-inner {
    min-height: 500px;

    padding: 12px;
  }


  .blank-page-drop-message
  strong {
    font-size: 13px;
  }


  .blank-page-drop-message
  span:last-child {
    font-size: 10px;
  }


  .blank-page-plus {
    font-size: 26px;
  }


  /* ==================================================
     FOOTER
     ================================================== */

  #foot-notes {
    float: none;

    margin-left: auto;
    margin-top: 40px;

    text-align: right;

    font-size: 12px;
  }
}


/* ======================================================
   REDUCED MOTION
   ====================================================== */

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

  .binder-page-turner {
    animation-duration:
      1ms !important;
  }
}

/* ======================================================
   PUBLIC BINDER
   ====================================================== */

/*
 * The owner binder has:
 *
 * Cards to Place | Binder
 *
 * The public binder only needs the actual binder,
 * so remove the unused sidebar column.
 */

.public-binder-workspace {
  grid-template-columns:
    minmax(
      0,
      1fr
    );

  width: 100%;

  max-width: 1560px;
}


.public-binder-stage {
  width: 100%;

  min-width: 0;
}


/* ======================================================
   PUBLIC PAGE HEADER
   ====================================================== */

/*
 * No Delete Page button exists publicly.
 */

.public-binder-page-header {
  justify-content:
    flex-start;
}


/* ======================================================
   PUBLIC CARDS
   ====================================================== */

.public-card-box {
  /*
   * Visitors can still use Search, but the card itself
   * should not feel draggable.
   */

  cursor: default;
}


.public-card-box:active {
  cursor: default;
}


/* ======================================================
   END OF BINDER
   ====================================================== */

.public-binder-blank-side {
  cursor: default;
}


.public-binder-blank-side
.blank-page-drop-message {
  pointer-events: none;
}


/* ======================================================
   UNSORTED PUBLIC CARDS
   ====================================================== */

/*
 * If the owner has collection cards that haven't yet
 * been placed in a binder pocket, don't silently hide
 * them from the public collection.
 */

.public-unsorted-section {
  margin-top: 28px;

  padding: 20px;

  box-sizing: border-box;

  background: rgba(
    9,
    9,
    14,
    0.55
  );

  border:
    1px solid #45455b;

  border-radius: 14px;
}


.public-unsorted-section h2 {
  margin:
    0 0 8px;

  color: white;

  text-align: center;
}


.public-unsorted-description {
  margin:
    0 0 18px;

  color: #c9c9d3;

  text-align: center;

  font-size: 12px;

  line-height: 1.4;
}


.public-unsorted-grid {
  display: flex;

  flex-wrap: wrap;

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

  gap: 16px;
}


.public-unsorted-grid
.card-box {
  cursor: default;
}


/*
 * Plastic sleeve is intentionally NOT applied here.
 *
 * The sleeve selector is:
 *
 * .binder-slot .card-image-wrap::after
 *
 * so only cards physically inside binder pockets
 * get the plastic pouch artwork.
 */


/* ======================================================
   PUBLIC MOBILE
   ====================================================== */

@media (max-width: 900px) {

  .public-binder-workspace {
    grid-template-columns:
      1fr;
  }


  .public-unsorted-section {
    margin-top: 20px;

    padding: 14px;
  }


  .public-unsorted-grid {
    gap: 10px;
  }


  .public-unsorted-grid
  .card-box {
    width: 150px;
  }
}


@media (max-width: 520px) {

  .public-unsorted-section {
    padding: 10px;
  }


  .public-unsorted-grid {
    gap: 8px;
  }


  .public-unsorted-grid
  .card-box {
    width: 135px;
  }
}