/* Vintage comic cover theme. Loaded after base component styles. */
:root {
  --ink: #23281f;
  --night: #23281f;
  --soft-ink: #4c5142;
  --shell: #73918a;
  --cream: #eedca4;
  --paper: #ddca94;
  --pink: #b83e24;
  --mint: #6e8980;
  --mustard: #d9ad3c;
  --orange: #b87632;
  --pet: #90917b;
  --pet-shadow: #646e5e;
}

body { background: #d2be8d; }
body::after {
  position: fixed; inset: 0; z-index: 20; content: ""; pointer-events: none;
  opacity: .16;
  background-image: url("../assets/paper-grain.svg");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}
.stars { width: 100%; opacity: .35; background: repeating-linear-gradient(110deg, transparent 0 44px, #a79570 45px, transparent 46px 90px); }
.stars::before, .stars::after { display: none; }
.start-screen { padding: 24px 18px 38px; }
.game-card {
  width: min(100%, 490px); border: 3px solid var(--ink); border-radius: 3px;
  background: var(--shell); box-shadow: 5px 7px 0 #6d6349, 0 14px 32px #403d3433;
  position: relative;
}
.game-card::after {
  position: absolute; inset: 4px; border: 1px solid #e8d7a25e; content: "";
  box-shadow: inset 0 0 20px #4b452b55; pointer-events: none; z-index: 9;
}
.comic-masthead { display: flex; align-items: stretch; gap: 14px; padding: 13px 16px 0; }
.issue-stamp { width: 68px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 2px solid var(--ink); background: var(--mustard); transform: rotate(-2deg); font: bold 10px 'Courier New', monospace; }
.issue-stamp strong { font: 900 27px Impact, 'Arial Narrow', sans-serif; border-bottom: 1px dashed var(--ink); padding-bottom: 3px; }
.issue-stamp b { font-size: 9px; padding: 5px 0; }
.comic-brand { flex: 1; min-width: 0; text-align: center; }
.comic-brand > span { font: italic bold 13px Georgia, serif; }
.comic-brand > strong {
  display: block; margin: -8px 0 -7px; color: var(--pink); font: italic 900 clamp(66px, 21vw, 104px)/1.15 Impact, 'Arial Black', sans-serif;
  letter-spacing: -6px; -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 5px 0 var(--ink); transform: rotate(-5deg);
}
.comic-brand small { font: 900 10px 'Courier New', monospace; letter-spacing: 2px; }
.game-card__header { padding: 14px 20px 9px; color: var(--ink); font-size: 9px; }
.status-light { border-radius: 0; box-shadow: none; background: var(--pink); }
.icon-button { border-radius: 2px; background: var(--cream); }
.screen-frame { margin: 0 19px; padding: 5px; border: 2px solid var(--ink); border-radius: 0; background: var(--cream); box-shadow: 3px 4px 0 #23281f80; transform: rotate(-1deg); }
.screen { height: 230px; border: 2px solid var(--ink); border-radius: 0; background: #9aaa89; }
.screen__shine { top: 22px; left: 50%; width: 170px; height: 170px; border: 2px solid #ae863b; border-radius: 50%; background: #d9ad3c; transform: translateX(-50%); opacity: .8; }
.screen__shine::after { display: none; }
.screen::before { background: radial-gradient(#26382e40 .6px, transparent .8px); background-size: 4px 4px; opacity: .35; }
.cloud { background: #e9dba888; box-shadow: 10px -8px 0 #e9dba888, 20px 0 0 #e9dba888; }
.ground { height: 30px; border-top: 3px solid var(--ink); background: repeating-linear-gradient(174deg, #7c572f 0 1px, #c69751 2px 13px); }
.picker-arrow { width: 34px; height: 42px; border-width: 2px; border-radius: 2px; background: var(--cream); }
.pet { filter: drop-shadow(3px 4px 0 #33392d40); }
.pet .pet__body {
  border: 0;
  border-radius: 0;
  background: var(--ink);
  box-shadow: none;
  clip-path: polygon(24% 0, 76% 0, 76% 7%, 90% 7%, 90% 21%, 100% 21%, 100% 79%, 90% 79%, 90% 93%, 76% 93%, 76% 100%, 24% 100%, 24% 93%, 10% 93%, 10% 79%, 0 79%, 0 21%, 10% 21%, 10% 7%, 24% 7%);
}
.pet .pet__body::before {
  position: absolute; inset: 6px; content: "";
  background: var(--pet);
  box-shadow: inset -8px -8px 0 var(--pet-shadow);
  clip-path: polygon(24% 0, 76% 0, 76% 7%, 90% 7%, 90% 21%, 100% 21%, 100% 79%, 90% 79%, 90% 93%, 76% 93%, 76% 100%, 24% 100%, 24% 93%, 10% 93%, 10% 79%, 0 79%, 0 21%, 10% 21%, 10% 7%, 24% 7%);
}
.pet .pet__ear {
  border-radius: 0;
  transform: none;
  clip-path: polygon(15% 0, 75% 0, 75% 15%, 100% 15%, 100% 100%, 0 100%, 0 15%, 15% 15%);
}
.pet .pet__ear--right { transform: scaleX(-1); }
.pet .pet__foot { border-radius: 0; }
.pet .pet__mouth {
  top: 74px; width: 6px; height: 6px; border: 0; border-radius: 0;
  background: var(--ink); transform: translateX(-50%);
  box-shadow: -6px -6px 0 var(--ink), 6px -6px 0 var(--ink);
}
.pet .pet__eye { z-index: 1; }
.pet .pet__cheek { z-index: 1; }
.pet .pet__spark { font-size: 0; width: 6px; height: 6px; background: var(--cream); box-shadow: -6px 0 0 var(--cream), 6px 0 0 var(--cream), 0 -6px 0 var(--cream), 0 6px 0 var(--cream); }
.pet--blop { --pet: #c6994d; --pet-shadow: #996b31; }
.pet--spark { --pet: #b95d3c; --pet-shadow: #8e412d; }
.pet__body, .pet__ear, .pet__foot { border-width: 4px; }
.pet__cheek { background: #b9573c; }
.pet__spark { color: #eedca4; }
.intro { padding: 19px 18px 13px; }
.eyebrow { font-size: 10px; letter-spacing: .14em; color: var(--ink); }
.intro h1 { display: inline-block; margin-top: 4px; font: italic 900 54px/1.05 Georgia, serif; letter-spacing: -2px; color: var(--pink); -webkit-text-stroke: 1px var(--ink); text-shadow: 3px 3px 0 var(--ink); transform: rotate(-3deg); }
.tagline { margin: 12px 0 0; font: bold italic 14px/1.4 Georgia, serif; }
.pet-dots { margin-top: 13px; }
.pet-dot { background: var(--cream); }
.pet-dot--active { background: var(--pink); }
.actions { padding: 5px 24px 23px; }
.pixel-button { border-width: 2px; border-radius: 2px; min-height: 48px; font-weight: 900; text-transform: uppercase; }
.pixel-button--primary { color: var(--cream); background: var(--pink); transform: rotate(-1deg); }
.pixel-button--secondary { background: var(--cream); }
.game-card__footer { border-top: 2px solid var(--ink); background: var(--mustard); color: var(--ink); font-size: 8px; }
.modal { border-radius: 2px; }
[hidden] { display: none !important; }
@media (max-width: 450px) {
  .start-screen { padding: 12px 10px 22px; }
  .game-card { min-height: 0; border: 2px solid var(--ink); border-radius: 2px; }
  .comic-masthead { gap: 10px; padding: 12px 12px 0; }
  .comic-brand small { letter-spacing: 1px; font-size: 9px; }
  .screen-frame { margin: 0 13px; }
  .screen { height: 218px; }
  .issue-stamp { width: 59px; }
}