/* Fauji Funk v2: the sketchbook. Everything visible is drawn by rough.js at runtime;
   this file only places things and sets the paper, ink and handwriting. */

:root {
  --paper: #fbf8f1;
  --dot: #e4ddcc;
  --ink: #24221f;
  --pencil: #69645a;
  --army: #6b7a3a;
  --navy: #1f3a68;
  --air: #3f86bf;
  --tape: rgba(236, 228, 204, .78);
  --placeholder: #767064;
  --dash: #c6bfae;
  --hl: #f3dd7a;
  --track: #4a4842;
  --sticker: #fbf6e6;
  --doodles: url("../img/doodles-ink.svg");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .13 0 0 0 0 .12 .5 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-a: .6;
  --hand: 'Caveat', 'Segoe Print', cursive;
  --print: 'Patrick Hand', 'Comic Sans MS', cursive;
}
/* night: chalk on slate (same palette as css/sketch.css) */
:root[data-theme="dark"] {
  --paper: #2a2e29; --dot: #3d433b; --ink: #f3eee2; --pencil: #bcb6a6;
  --army: #a9ba6e; --navy: #8fb0e6; --air: #7fbbe8;
  --tape: rgba(200, 190, 160, .45); --placeholder: #aaa496; --dash: #5a6056; --hl: #f3dd7a; --track: #a19e94; --sticker: #e9e2cd;
  --doodles: url("../img/doodles-chalk.svg");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 .45 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-a: .5;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #2a2e29; --dot: #3d433b; --ink: #f3eee2; --pencil: #bcb6a6;
    --army: #a9ba6e; --navy: #8fb0e6; --air: #7fbbe8;
    --tape: rgba(200, 190, 160, .45); --placeholder: #aaa496; --dash: #5a6056; --hl: #f3dd7a; --track: #a19e94; --sticker: #e9e2cd;
    --doodles: url("../img/doodles-chalk.svg");
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 .45 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-a: .5;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background-color: var(--paper);
  /* the paper itself (rules, margin, holes, doodles, grain) is css/notebook.css */
  color: var(--ink);
  transition: background-color .4s, color .4s;
  font-family: var(--print);
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

/* rough.js strokes follow the theme: theme-ink / theme-paper are set by js/sketch.js and js/soldiers.js */
.theme-ink { stroke: var(--ink); }
.theme-ink-fill { fill: var(--ink); }
.theme-paper { fill: var(--paper); }
.theme-navy { stroke: var(--navy); }
.theme-army { stroke: var(--army); }
.theme-track { stroke: var(--track); }
.theme-paper-stroke { stroke: var(--paper); }
/* stickers stay light paper with dark ink, day or night */
.theme-sticker { fill: var(--sticker); }
.sticker { color: #24221f; }
/* ink on yellow, day or night */
.mark.lit, .go:hover span { color: #24221f; }

/* the day / night toggle (js/mode.js draws the sun and moon), up top under the Bag sticker */
.mode-btn {
  position: absolute;
  z-index: 3;
  top: 108px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.mode-btn:hover { transform: rotate(-14deg) scale(1.1); }
.mode-btn:focus-visible { outline: 2px dashed var(--pencil); outline-offset: 3px; }
.mode-ico { width: 30px; height: 30px; overflow: visible; }
.mode-ico .mode-sun { display: none; }
:root[data-theme="dark"] .mode-ico .mode-sun { display: inline; }
:root[data-theme="dark"] .mode-ico .mode-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mode-ico .mode-sun { display: inline; }
  :root:not([data-theme="light"]) .mode-ico .mode-moon { display: none; }
}

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* every rough-drawn frame sits behind its element and ignores the pointer */
.sk {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}

.page { padding: 30px 16px 0; }
/* room on the left for the punched holes and the red margin */
@media (min-width: 761px) { .page { padding-left: 64px; } }

/* ---------- the card: the whole first screen ---------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - 46px);
  min-height: calc(100svh - 46px);
  padding: 34px clamp(18px, 4vw, 72px) 18px;
  text-align: center;
}

.brand {
  margin: 0;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(30px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: 0.5px;
}
.brand small {
  display: block;
  margin-top: 4px;
  font-family: var(--print);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--pencil);
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 26px 0 18px;
}

.ask {
  margin: 0 0 24px;
  font-family: var(--hand);
  font-weight: 500;
  font-size: clamp(34px, 4.8vw, 74px);
  line-height: 1.05;
}
.mark { white-space: nowrap; }

/* ---------- stickers (the header) ---------- */

.sticker {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 124px;
  padding: 15px 26px 13px;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1;
  text-decoration: none;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.sticker span { position: relative; }
.sticker:hover, .sticker:focus-visible {
  transform: rotate(calc(var(--tilt, 0deg) * -0.4)) translateY(-4px) scale(1.06);
}
.sticker:focus-visible span { text-decoration: underline wavy; }

.tape {
  position: absolute;
  top: -11px; left: 50%;
  width: 54px; height: 20px;
  margin-left: -27px;
  background: var(--tape);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
  transform: rotate(-4deg);
  clip-path: polygon(3% 0, 97% 8%, 100% 92%, 0 100%, 4% 50%);
}

.sticker-home  { top: 26px;  left: -10px; }
.sticker-shop  { top: -18px; left: 22%; }
.sticker-track { top: -14px; right: 22%; }
.sticker-bag   { top: 32px;  right: -10px; }
.bag-n { font-weight: 700; }
.bag-n::before { content: '· '; }
.sticker-shop .tape  { transform: rotate(5deg); }
.sticker-bag .tape { left: 18%; transform: rotate(-12deg); }

/* ---------- search ---------- */

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 920px;
  height: clamp(68px, 9.5vh, 96px);
  margin: 0 auto;
  padding: 0 14px 0 24px;
}

/* the glass and the typing sit above the box, whose paper fill on focus would cover them */
.glass { position: relative; width: 38px; height: 38px; flex: none; overflow: visible; }

.search input {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--print);
  font-size: clamp(22px, 2.2vw, 32px);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.search input::placeholder { color: var(--placeholder); }
.search input::-webkit-search-cancel-button { display: none; }

.go {
  position: relative;
  flex: none;
  height: 60%;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(26px, 2.2vw, 34px);
  cursor: pointer;
}
.go span { position: relative; }
.go:focus-visible { outline: 2px dashed var(--pencil); outline-offset: 4px; }

.hints {
  margin: 16px 0 0;
  font-size: 17px;
  color: var(--pencil);
}
.hints a {
  text-decoration: none;
  border-bottom: 1.5px dashed var(--dash);
}
.hints a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- the troops: one unit per service, across the full width ---------- */

.troops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 36px);
  align-items: end;
  width: 100%;
}

.soldier {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.soldier svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 40vh;
  overflow: visible;
}
.tag {
  margin-top: 2px;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.2;
}
.soldier[data-kind="army"] .tag { color: var(--army); }
.soldier[data-kind="navy"] .tag { color: var(--navy); }
.soldier[data-kind="air"]  .tag { color: var(--air); }
.soldier:focus-visible .tag { text-decoration: underline wavy; }

/* ---------- footer: v1's pixel battlefield, in a pencilled frame ---------- */

.foot {
  padding: 72px 0 30px;
  text-align: center;
}
.foot-note {
  margin: 0 0 16px;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
}
.screen {
  position: relative;
  padding: clamp(10px, 1.3vw, 18px);
}
.lcd {
  position: relative;
  height: clamp(220px, 32vw, 540px);
  border-radius: 12px;
  overflow: hidden;
  background: #e8e9e0;
}
.lcd canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  image-rendering: pixelated;
}
.lcd::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), inset 0 0 50px rgba(0, 0, 0, .28);
  pointer-events: none;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 26px;
  margin-top: 24px;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(24px, 2vw, 30px);
}
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline wavy; text-underline-offset: 4px; }
.foot-small {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--pencil);
}

/* sketch-in on load: sketch.js sets the dash lengths, this animates them */
.drawing path { transition: stroke-dashoffset .7s cubic-bezier(.6, .1, .3, 1), opacity .5s; }

/* ---------- small screens ---------- */

@media (max-width: 760px) {
  .troops { grid-template-columns: 1fr; gap: 18px; }
  .soldier svg { max-height: none; }
}

@media (max-width: 640px) {
  .page { padding-top: 92px; }
  .card { min-height: 0; padding: 50px 16px 18px; }
  .hero { padding: 22px 0 26px; }
  .sticker { min-width: 0; padding: 10px 12px 8px; font-size: 23px; }
  .sticker-home  { top: -50px; left: 2px; }
  .sticker-shop  { top: -62px; left: 22%; }
  .sticker-track { top: -56px; right: 31%; }
  .sticker-bag   { top: -48px; right: 2px; }
  .mode-btn { top: 4px; right: 4px; }
  .search { height: 62px; padding: 0 6px 0 12px; gap: 6px; }
  .glass { width: 26px; height: 26px; }
  .search input { font-size: 20px; }
  .go { height: 44px; min-height: 0; padding: 0 12px; font-size: 24px; }
  .hints { font-size: 15px; }
  .foot { padding-top: 48px; }
  /* thumb-sized footer links */
  .foot-links { gap: 0 22px; }
  .foot-links a { display: inline-block; padding-block: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .sticker, .drawing path { transition: none; }
}

/* keyboard focus: a dashed pencil ring */
:focus-visible { outline: 2.5px dashed var(--ink); outline-offset: 3px; }