/* shared.css — Pucksonnet rankings mockups */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/press-start-2p-v16-latin.woff2') format('woff2'),
       url('../../fonts/press-start-2p-v16-latin.woff') format('woff');
}
:root {
  --ice-cyan: #96EDF6;
  --ice-light-cyan: #B8F6FA;
  --page-bg: #C8F3F8;
  --header-band: #84E9F4;
  --black: #000000;
  --red: #E2231A;
  --white: #FFFFFF;
  --crease-blue: #2E6FBE;
  --gold: #F0C850;
  --silver: #BFC4CE;
  --bronze: #B87333;
  --move-up: #1AAB5B;
  --move-down: #E2231A;
  --move-flat: #5AC8D6;
  --shadow-drop: rgba(0,0,0,0.35);
  --shadow-drop-deep: rgba(0,0,0,0.55);
  --pixel-shadow: 1.5px 1.5px 0 #fff;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--page-bg);
  font-family: 'Press Start 2P', 'Courier New', monospace;
  color: var(--black);
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}
img { image-rendering: pixelated; }
a { color: inherit; text-decoration: none; }
.mock-gallery-bar {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-band);
  border-bottom: 2px solid var(--black);
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.55rem;
  box-shadow: 0 2px 0 var(--shadow-drop);
}
.mock-gallery-bar .back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--white);
  border: 2px solid var(--black);
  box-shadow: 2px 2px 0 var(--shadow-drop-deep);
  color: var(--black);
}
.mock-gallery-bar .back:hover { background: var(--ice-cyan); }
.mock-gallery-bar .mock-id {
  color: var(--red);
  font-size: 0.5rem;
  letter-spacing: 1px;
}
.mock-gallery-bar .mock-title {
  font-size: 0.6rem;
  color: var(--black);
  text-shadow: var(--pixel-shadow);
}
.mock-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}
.mock-page-header {
  margin-bottom: 22px;
}
.mock-page-header h1 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--red);
  text-shadow: var(--pixel-shadow);
  letter-spacing: 1px;
  line-height: 1.4;
}
.mock-page-header .sub {
  font-size: 0.5rem;
  color: var(--black);
  opacity: 0.78;
  line-height: 1.7;
}
.note {
  font-size: 0.45rem;
  color: var(--black);
  opacity: 0.6;
  margin-top: 4px;
}
/* Pixel utility chips */
.chip {
  display: inline-block;
  padding: 4px 7px;
  background: var(--white);
  border: 1.5px solid var(--black);
  box-shadow: 1.5px 1.5px 0 var(--shadow-drop);
  font-size: 0.42rem;
  color: var(--black);
  letter-spacing: 0.5px;
}
.chip.cyan { background: var(--ice-cyan); }
.chip.red { background: var(--red); color: var(--white); text-shadow: 1px 1px 0 #000; }
.chip.gold { background: var(--gold); }
.chip.crease { background: var(--crease-blue); color: var(--white); text-shadow: 1px 1px 0 #000; }