/* ==========================================================================
   Retro skin for the Pokémon parts: the DDIA progress box, the Pokédex, Professor Oak's
   dialogue and the My take / Push back bubbles. Loaded after style.css, pokedex.css and
   case-study.css; the rest of the portfolio keeps its normal look.
     - pixel fonts: Press Start 2P for small labels and numbers, VT323 for screen text
     - stepped pixel borders from a 6×6 SVG, scaled 4× (one "pixel" = 4px)
     - Oak as crisp pixel sprites with solid black outlines (1:1, hard edges)
     - faint LCD scanlines on the Pokédex screens
   ========================================================================== */

:root {
  /* 6×6 pixel-art frame: dark outline, one-step rounded corners, filled edge.
     border-image-slice 2 keeps the corner steps; the fill colour must match the box background */
  --px-frame-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%231c1c1c' d='M2 0h2v1H2zM1 1h1v1H1zM4 1h1v1H4zM0 2h1v2H0zM5 2h1v2H5zM1 4h1v1H1zM4 4h1v1H4zM2 5h2v1H2z'/%3E%3Cpath fill='%23fff' d='M2 1h2v1H2zM1 2h4v2H1zM2 4h2v1H2z'/%3E%3C/svg%3E");
  --px-frame-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%231c1c1c' d='M2 0h2v1H2zM1 1h1v1H1zM4 1h1v1H4zM0 2h1v2H0zM5 2h1v2H5zM1 4h1v1H1zM4 4h1v1H4zM2 5h2v1H2z'/%3E%3Cpath fill='%23ecdfbf' d='M2 1h2v1H2zM1 2h4v2H1zM2 4h2v1H2z'/%3E%3C/svg%3E");
  /* 4×7 stepped speech-bubble tail pointing left; its right column opens into the bubble */
  --px-tail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath fill='%231c1c1c' d='M3 0h1v1H3zM2 1h1v1H2zM1 2h1v1H1zM0 3h1v1H0zM1 4h1v1H1zM2 5h1v1H2zM3 6h1v1H3z'/%3E%3Cpath fill='%23fff' d='M3 1h1v5H3zM2 2h1v3H2zM1 3h1v1H1z'/%3E%3C/svg%3E");
}

/* --- DDIA progress box ----------------------------------------------------- */
.hud__box {
  border: 8px solid transparent;
  border-image: var(--px-frame-cream) 2 / 8px stretch;
  background-clip: padding-box;
  box-shadow: none;
  filter: drop-shadow(5px 5px 0 var(--gold));   /* follows the stepped corners */
  padding: 6px 10px 4px;
}
.hud__name { font: 11px/1.4 var(--pixel); letter-spacing: 0; }
.hud__lv { font: 9px/1 var(--pixel); }
.hud__lv b { font-size: 11px; font-weight: 400; }
.hud__hp-label { font: 9px/1 var(--pixel); padding: 3px 4px; }
.hud__xp-label { font: 15px/1 var(--lcd); letter-spacing: 0.04em; }
.hud__foot { font: 18px/1 var(--lcd); }
.hud__count { font: 11px/1 var(--pixel); }
.hud__levelup { font: 9px/1 var(--pixel); }
.hud[data-variant="compact"] .hud__box { box-shadow: none; }

/* --- Professor Oak dialogue ------------------------------------------------ */
.oak__sprite { width: 77px; height: 180px; image-rendering: pixelated; }
.oak__box {
  border: 8px solid transparent;
  border-image: var(--px-frame-white) 2 / 8px stretch;
  background-clip: padding-box;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 36px 12px 14px;
  font: 22px/1.25 var(--lcd);
  /* a <button> centres its content vertically; keep the text at the top like the game */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 5.6em;
}
.oak__speaker { font: 9px/1 var(--pixel); letter-spacing: 0.04em; margin-bottom: 8px; }
.oak__arrow { font: 18px/1 var(--lcd); right: 12px; bottom: 6px; }
.oak__count, .oak__btn { font: 9px/1.2 var(--pixel); letter-spacing: 0.04em; }
.oak__btn { padding: 9px 10px; }

@media (max-width: 480px) {
  .oak__box { font-size: 19px; padding: 8px 30px 10px 12px; }
}

/* --- My take / Push back bubbles ------------------------------------------- */
.take {
  border: 8px solid transparent;
  border-image: var(--px-frame-white) 2 / 8px stretch;
  background-clip: padding-box;
  border-radius: 0;
  box-shadow: none;
  padding: 15px 19px 17px;
}
.take::before {                           /* pixel-sprite Oak, 1:1 */
  left: -101px;
  bottom: -8px;
  width: 59px;
  height: 138px;
  background: url("../img/oak-sprite-sm.png") center bottom / 59px 138px no-repeat;
  image-rendering: pixelated;
}
.take--push::before {
  left: -104px;
  width: 62px;
  background-image: url("../img/oak-point-sprite-sm.png");
  background-size: 62px 138px;
}
.take::after {                            /* stepped tail over the left edge of the frame */
  left: -20px;
  bottom: 22px;
  width: 16px;
  height: 28px;
  background: var(--px-tail) 0 0 / 16px 28px no-repeat;
  border: 0;
  transform: none;
}
.take__label { font: 9px/1.2 var(--pixel); letter-spacing: 0.04em; }

@media (max-width: 560px) {
  .take::before { left: -69px; width: 44px; height: 104px; background-size: 44px 104px; image-rendering: auto; }
  .take--push::before { left: -71px; width: 47px; background-size: 47px 104px; }
}

/* --- Pokédex --------------------------------------------------------------- */
.dex__screen {
  background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px);
}
.dex__info {
  background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
}
.dex__name { font: 11px/1.4 var(--pixel); letter-spacing: 0; }
.dex__page-no { font: 15px/1 var(--lcd); letter-spacing: 0.04em; }
.dex__genus { font: 17px/1.1 var(--lcd); }
.dex__type { font: 15px/1 var(--lcd); letter-spacing: 0.04em; padding: 2px 6px; border-radius: 0; }
.dex__text { font: 19px/1.1 var(--lcd); }
.dex__stats { font: 17px/1.15 var(--lcd); }
.dex__stats b { font-weight: 400; }
.dex__green { font: 12px/1 var(--pixel); letter-spacing: 0; padding: 10px 6px; }
.dex.is-menu .dex__green { font-size: 10px; }
.dex__keys button { font: 11px/1 var(--pixel); }
.dex__whites button { font: 9px/1 var(--pixel); letter-spacing: 0; }
.dex__label { font: 15px/1 var(--lcd); letter-spacing: 0.06em; }
.dex__tab { font: 14px/1 var(--lcd); letter-spacing: 0.08em; height: 18px; }
.dex__bottom output { font: 18px/1 var(--lcd); padding: 7px 6px; }
.dex__menu { font: 19px/1.05 var(--lcd); }
.dex__menu li.is-active::before { top: 5px; }

/* --- Battle box: "A wild DATA ENGINEER appeared!" (contact call-to-action) - */
.contact__cta.battle {
  background: #faf5e8;                     /* warm off-white: softer against the cream section */
  color: var(--on-face);
  border: 4px solid var(--on-face);
  box-shadow: 6px 6px 0 var(--on-face);
}
.contact__cta.battle { padding: clamp(22px, 3vw, 30px) clamp(20px, 2.4vw, 26px); }
.contact__cta.battle .battle__title {   /* beats .contact__cta h3 */
  font: 19px/1.55 var(--pixel);
  letter-spacing: 0;
  color: #34449e;
}
.contact__cta.battle .battle__log { margin-top: 18px; font: 12px/2 var(--pixel); color: var(--on-face); }
.battle__log span { color: var(--red); }
.contact__cta.battle .battle__text { margin-top: 14px; font: 23px/1.15 var(--lcd); color: #52525b; }
.battle__menu { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.pixel-btn {
  position: relative;
  display: inline-block;
  padding: 12px 12px 12px 20px;            /* room on the left for the ▶ cursor */
  font: 10px/1.4 var(--pixel);
  color: var(--on-face);
  text-decoration: none;
  background: #e4e4e7;
  border: 4px solid var(--on-face);
  box-shadow: 6px 6px 0 var(--on-face);
  transition: background 0.15s;
}
.pixel-btn:hover { background: #d4d4d8; }
.pixel-btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--on-face); }
.pixel-btn--red { background: var(--red); color: #fff; }
.pixel-btn--red:hover { background: #b51b25; }
/* the battle-menu cursor */
.pixel-btn::before { content: "▶"; position: absolute; left: 6px; opacity: 0; }   /* takes no space */
.pixel-btn:hover::before, .pixel-btn:focus-visible::before { opacity: 1; }

@media (max-width: 480px) {
  .contact__cta.battle .battle__title { font-size: 15px; }
  .contact__cta.battle .battle__log { font-size: 10px; }
  .contact__cta.battle .battle__text { font-size: 22px; }
  .pixel-btn { font-size: 9px; }
}

/* the battle box reused on the 404 page (outside the Contact section) */
.battle.not-found { max-width: 620px; }
.battle.not-found .battle__title { font: 15px/1.6 var(--pixel); color: #34449e; }
.battle.not-found .battle__log { margin-top: 14px; font: 10px/2 var(--pixel); }
.battle.not-found .battle__text { margin-top: 10px; font: 20px/1.15 var(--lcd); color: #52525b; }

/* --- The failed catch on the "Open to roles" badge (assets/js/catch.js) ---- */
.catch-ball {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform-origin: 50% 85%;
}
.catch-msg {
  position: absolute;
  z-index: 3;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 7px 10px;
  font: 9px/1 var(--pixel);
  color: var(--yellow);
  background: #0e1311;
  border: 2px solid var(--gold);
}