Template:RequirementBox/styles.css

/* =========================
   Requirements System
   ========================= */

.vp-requirements {
  margin: 0 0 1em 0;
  padding: 0;
}

/* Category block */
.vp-requirements-category {
  margin: -0.4em 0 1.1em 0;
  padding: 0;
}

/* Category header */
.requirements-header {
  display: inline-block;
  margin: 0.3em 0 0 0;
  padding: 0 12px;

  background: var(--vp-journal-text);
  color: #000;
  border: 2px solid #000;
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);


  font-size: large;
  font-family: 'VPTIP';
}

/* Requirement list */
.vp-requirements-category ul {
  list-style: none;
  margin: -0.1em 0 0 0;
  padding-left: 0;
}

/* Individual requirement (blue journal box) */
.vp-requirements-category ul > li {
  position: relative;
  display: block;

  background: var(--vp-journal-bg);
  color: var(--vp-journal-text);

  margin: 0.6em 0 0.6em 65px;
  padding: 0.5em 1em;

  border-radius: 8px;
  border: 3px solid var(--vp-journal-border);

  font-weight: 600;
  line-height: 1.3;
  text-shadow: 1px 1px 2px #003366;
}

/* Pull first item closer to header */
.vp-requirements-category ul > li:first-child {
  margin-top: 0.6em;
}

/* Icon badge (MediaWiki file wrapper) */
.vp-requirements-category ul > li > span[typeof="mw:File"] {
  position: absolute;
  left: -55px;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
}

/* Icon badge (MediaWiki file wrapper) */
.vp-requirements-category span[typeof="mw:File"] img {
  width: 45px !important;
  height: 45px !important;
  display: block;
  object-fit: contain;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4));
}


/* =========================
   Requirement Links
   ========================= */

.vp-requirements-category ul > li a:not(.new):not(.mw-new) {
  color: #ffe680;
}

.vp-requirements-category ul > li a:not(.new):not(.mw-new):visited {
  color: #dbaf39;
}

.vp-requirements-category ul > li a:not(.new):not(.mw-new):hover,
.vp-requirements-category ul > li a:not(.new):not(.mw-new):focus {
  color: #fff;
  text-decoration: underline;
}


/* =========================
   Mobile Tweaks
   ========================= */

@media (max-width: 700px) {

  .vp-requirements-category ul > li {
    margin-left: 40px;
    padding: 0.4em 0.8em;
    font-size: 0.95em;
  }

  .vp-requirements-category ul > li > span[typeof="mw:File"] {
    left: -45px;
    width: 40px;
    height: 40px;
  }
}



/* =========================
   Game Requirement Boxes
   ========================= */

.vp-gamebox {
  border-radius: 8px;
  margin: 1em 0;
  overflow: hidden;
  border: 2px solid #bbb;
}

.vp-gamebox > summary {
  list-style: none;
  cursor: pointer;
}

.vp-gamebox > summary::before {
  content: "▸";
  margin-right: 0.5em;
  transition: transform 0.15s ease;
}

.vp-gamebox[open] > summary::before {
  transform: rotate(90deg);
}


/* Entire header is clickable */
.vp-gamebox-header {
  font-weight: 700;
  padding: 0.7em 1em;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Trebuchet MS', 'Verdana', sans-serif;
}

.vp-gamebox-content {
  padding: 0.75em 1em;
}

/* Kill stray <p><br> spacing from templates */
.vp-gamebox-content > p {
  display: none;
}

/* =========================
   Game Color Variants
   ========================= */

/* VP1 — Green */
.vp-gamebox[data-game="vp1"] {
  background: #eef7f0;
  border-color: #6fb98f;
}
.vp-gamebox[data-game="vp1"] .vp-gamebox-header {
  background: #d6eee0;
}

/* Trouble in Paradise — Blue-Purple */
.vp-gamebox[data-game="vp2"] {
  background: #f0f1fb;
  border-color: #8a8fe0;
}
.vp-gamebox[data-game="vp2"] .vp-gamebox-header {
  background: #dde0f7;
}

.vp-gamebox[data-game="tip"] {
  background: #f0f1fb;
  border-color: #8a8fe0;
}
.vp-gamebox[data-game="tip"] .vp-gamebox-header {
  background: #dde0f7;
}

/* Pocket Paradise — Yellow */
.vp-gamebox[data-game="pp"] {
  background: #fff8e6;
  border-color: #e6c75f;
}
.vp-gamebox[data-game="pp"] .vp-gamebox-header {
  background: #fff0c9;
}

/* All Games — Pale Red / Pink */
.vp-gamebox[data-game="all"] {
  background: #fbeff1;
  border-color: #e39aa3;
}
.vp-gamebox[data-game="all"] .vp-gamebox-header {
  background: #f6d9dd;
}



/* =========================
   Mobile Tweaks
   ========================= */

@media (max-width: 700px) {
  .vp-requirements-category ul > li {
    margin-left: 40px;
    font-size: 0.95em;
  }

  .vp-requirements-category ul > li > span[typeof="mw:File"] {
    left: -45px;
  }
}

/* Position the [expand]/[collapse] toggle in the top right corner */
.vp-gamebox {
    position: relative; /* needed for absolute positioning inside */
}

/* Style the default MediaWiki collapsible toggle */
.vp-gamebox > summary .mw-collapsible-toggle {
    position: absolute;
    top: 0.25em;
    right: 0.5em;
    text-decoration: none;
    color: inherit !important;
    font-size: 0.85em;
    float: right;
}

/* Optional: remove default hover color change */
.vp-gamebox > summary .mw-collapsible-toggle:hover {
    color: rgba(0, 0, 0, 0.7); /* slightly darker on hover */
    text-decoration: none;
}

/* Make the expand/collapse link match the box text */
.vp-gamebox > summary .mw-collapsible-toggle,
.vp-gamebox > summary .mw-collapsible-toggle a {
    color: inherit !important;
}

/* =========================
   AND/OR Requirements
   ========================= */

/* AND/OR container */
.vp-requirement-and-or {
  padding: 0;
}

/* OR option rows */
.vp-requirement-and-or-option {
  position: relative;
}

/* OR icons: center vertically like normal requirements */
.vp-requirement-and-or-option > span[typeof="mw:File"] {
  position: absolute;
  left: -65px;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
}

/* Divider */
.vp-requirement-and-or-divider {
  text-align: center;
  font-weight: 700;
  color: #ffe680;
  text-shadow: 1px 1px 2px #003366;
  margin: 0.2em 0;
}