/* The window every page lives in: grass, clover verges, the card, its title
   bar and buttons, the menu strip and the footer. Shared by the homepage,
   about and portfolio so moving between them feels like one site. Each page
   keeps only its own content styles inline. */

@font-face {
  font-family: 'PixelOperator';
  src: url('fonts/PixelOperator8.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'W95FA';
  src: url('fonts/w95fa.woff2') format('woff2'),
       url('fonts/w95fa.woff') format('woff'),
       url('fonts/W95F.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Silkscreen';
  src: url('fonts/slkscr.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cream:        #526734;   /* card body (slightly lighter than backdrop) */
  --cream-warm:   #6c8146;   /* raised boxes inside the card */
  --cream-shade:  #7d9054;   /* dividers / borders */
  --sage:         #8b9b5a;   /* mid accent */
  --sage-deep:    #a0b870;   /* pills */
  --sage-dark:    #4a5a2e;
  --sage-tint:    #c8d8a0;   /* bright highlight */
  --ink:          #f5e6d0;   /* primary cream text */
  --leaf-ink:     #e2f0bc;   /* pale green text, high contrast on the greens */
  --ink-soft:     #d4c4a0;   /* secondary cream text */
  --ink-faint:    #a8b088;   /* tertiary / muted */
  --chrome-light: rgba(255, 255, 255, 0.18);
  --chrome-dark:  #2f3a1f;
  --line:         rgba(200, 216, 160, 0.45);   /* light green dividers and image outlines */
  --backdrop:     #3a4a2a;   /* outer page bg */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html, body { overflow-x: hidden; }

body {
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  /* the clover game's lawn */
  background-color: #445634;
  background-image: url('images/clover/grass-tile.jpg');
  background-size: 1024px 1024px;
  background-attachment: fixed;
  padding: 1.25rem 0.75rem 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;   /* the card ends where its content does */
}

/* ====== CARD (window) ====== */
.card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: rgba(82, 103, 52, 0.88);   /* --cream, turned down so the grass shows through */
  border: 1px solid var(--chrome-dark);
  box-shadow:
    inset 0 0 0 1px var(--chrome-light),
    0 2px 0 rgba(0, 0, 0, 0.25),
    0 10px 28px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  transition: max-width 0.32s ease;
}

/* a roomier card on desktop, where there is grass to spare either side */
@media (min-width: 900px) {
  .card { max-width: 540px; }
}

/* ====== TITLE BAR ====== */
.title-bar {
  background: var(--chrome-dark);
  color: var(--leaf-ink);
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #1f2813;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-family: 'PixelOperator', monospace;
  font-size: 14px;
  letter-spacing: 1px;
}

.title-bar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.title-bar-right {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--leaf-ink);
}

/* the clock sits sunk into the bar like the time in an old taskbar tray,
   with its colon ticking over every second */
.tray-clock {
  margin-right: 10px;
  padding: 2px 7px 1px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.55), inset -1px -1px 0 rgba(200, 216, 160, 0.22);
  font-family: 'PixelOperator', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  white-space: nowrap;
  color: var(--ink-faint);
}
.tray-clock .tick { animation: tray-tick 2s ease-in-out infinite; }
@keyframes tray-tick {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* the page's address, shown where there is no room for the clover switch.
   On a phone the path stands alone so it never runs into the clock. */
.site-name {
  font-family: 'W95FA', 'Segoe UI', Tahoma, sans-serif;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--sage-tint);
  text-shadow: 0 0 8px rgba(200, 216, 160, 0.35);
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .tb-domain { display: none; }
}

/* ====== WINDOW BUTTONS ======
   Set in the same hand as "feeling lucky?": no boxes, just soft glowing
   glyphs in the title bar, with a faint square of light behind the one
   under your pointer. */
.win-btn {
  width: 26px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'W95FA', 'Segoe UI', Tahoma, sans-serif;
  font-size: 19px;
  line-height: 1;
  color: var(--sage-tint);
  text-shadow: 0 0 8px rgba(200, 216, 160, 0.35);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s;
}
.win-btn:hover {
  background: rgba(200, 216, 160, 0.12);
  color: #f6fce6;
}
.win-btn:active { transform: scale(0.9); }
.win-btn[aria-pressed="true"] { background: rgba(200, 216, 160, 0.16); }
.win-btn:focus-visible { outline: 1px dotted var(--sage-tint); outline-offset: 1px; }

/* the shamrock and envelope, drawn from the system's symbol font in plain
   text form (the FE0E after each asks for text, not the colour emoji) */
.luck-clover,
.win-sym span,
.tab-clover {
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'DejaVu Sans', 'Apple Symbols', sans-serif;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1;
  color: var(--sage-tint);
}

/* symbol buttons (the envelope) */
.win-sym span {
  display: block;
  font-size: 18px;
  color: inherit;
  transition: transform 0.35s ease;
}
.win-sym:hover span { transform: translateY(-1px); }

/* big enough for a thumb on touch screens */
@media (pointer: coarse) {
  .win-btn { width: 30px; height: 28px; font-size: 21px; }
  .win-sym span { font-size: 20px; }
}

/* ====== "feeling lucky?" — the switch for the clover verges ====== */
.luck-toggle {
  font: inherit;
  letter-spacing: inherit;
  color: var(--leaf-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.luck-toggle { position: relative; }
.luck-toggle[hidden] { display: none; }   /* its inline-flex would otherwise win */
.luck-toggle:hover,
.luck-toggle:focus-visible { color: #f6fce6; }
/* under the pointer it lights right up */
.luck-toggle:hover .luck-label,
.luck-toggle:focus-visible .luck-label {
  color: #fbfff0;
  text-shadow: 0 0 4px rgba(251, 255, 240, 0.9), 0 0 12px rgba(226, 240, 188, 0.75), 0 0 22px rgba(200, 216, 160, 0.5);
}

/* the sparkles it throws off while you hover (made in site.js) */
.luck-spark {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  color: #fbfff0;
  text-shadow: 0 0 6px rgba(251, 255, 240, 0.9);
  line-height: 1;
  transform: translate(-50%, -50%) scale(0);
  animation: luck-spark 0.8s ease-out forwards;
}
@keyframes luck-spark {
  30%  { transform: translate(-50%, -80%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -150%) scale(0.4); opacity: 0; }
}
.luck-toggle:focus-visible { outline: 1px dotted var(--sage-tint); outline-offset: 2px; }

/* set like the clover chaos title, and flickered the same way from site.js */
.luck-label {
  font-family: 'W95FA', 'Segoe UI', Tahoma, sans-serif;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: var(--sage-tint);
  text-shadow: 0 0 8px rgba(200, 216, 160, 0.35);
  white-space: pre;
  transition: color 0.2s, text-shadow 0.2s;
}

.luck-clover {
  display: block;
  font-size: 24px;
  margin: -4px 0;   /* bigger than the text, without making the title bar taller */
  animation: luck-spin 6s linear infinite;
}
@keyframes luck-spin { to { transform: rotate(360deg); } }

/* hover and it goes full rainbow: the colours race round the leaves while
   it spins faster and throbs in and out */
.luck-toggle:hover .luck-clover,
.luck-toggle:focus-visible .luck-clover {
  color: transparent;
  background: conic-gradient(#ff5f6d, #ffb347, #ffe66d, #7ee081, #4fc3f7, #9d7bff, #ff6ec7, #ff5f6d);
  -webkit-background-clip: text;
          background-clip: text;
  animation:
    luck-spin 1.5s linear infinite,
    luck-hue 1.2s linear infinite,
    luck-pulse 0.7s ease-in-out infinite;
}
@keyframes luck-hue {
  from { filter: hue-rotate(0deg) brightness(1.15) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)); }
  to   { filter: hue-rotate(360deg) brightness(1.15) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)); }
}
@keyframes luck-pulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.28; }
}

/* ====== MENU STRIP — an old-school browser's link bar, kept soft ======
   A shade up from the card rather than a bright band, with underlined links
   in the same pixel face as "feeling lucky?": sage until you have been there,
   a duller green once you have, and a bright flash for the moment you click. */
.menu-strip {
  background: rgba(200, 216, 160, 0.13);   /* a soft lift off the card's green */
  border-bottom: 1px solid rgba(200, 216, 160, 0.22);
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  row-gap: 4px;
  flex-wrap: wrap;
  white-space: nowrap;
  font-family: 'W95FA', 'Segoe UI', Tahoma, sans-serif;
  font-size: 16px;
}

.menu-strip a {
  color: var(--sage-tint);
  text-decoration: underline;
  text-decoration-color: rgba(200, 216, 160, 0.3);
  text-underline-offset: 3px;
  padding: 0 1px;
  flex-shrink: 0;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.menu-strip a:visited { color: #a9b98a; }   /* a duller green once you have been there */
.menu-strip a:hover { color: var(--leaf-ink); text-decoration-color: currentColor; }
.menu-strip a:active { color: #f6fce6; }

/* the page you are on: plain bold text, as a browser shows where you are */
.menu-strip .menu-current {
  color: var(--leaf-ink);
  font-weight: bold;
  cursor: default;
  flex-shrink: 0;
}

/* pushes the page links to the far end, socials stay on the left */
.menu-strip .menu-gap { flex: 1 1 auto; }

/* on a phone the two groups get a row each: socials, then the pages,
   still sitting at the right-hand end */
@media (max-width: 480px) {
  .menu-strip .menu-gap { flex-basis: 100%; height: 0; }
  .menu-strip .menu-gap + * { margin-left: auto; }
}

@media (max-width: 400px) {
  .menu-strip { font-size: 15px; gap: 8px; row-gap: 2px; padding: 5px 8px; }
}

/* ====== CARD BODY ====== */
.card-body {
  display: flex;
  flex-direction: column;
}

.panel {
  padding: 18px 16px 16px;
  position: relative;
}

/* divider row between panels */
.section-divider {
  height: 0;
  margin: 0 16px;
  border-top: 1px solid var(--line);
}

.section-divider.divider-lg { margin-top: 14px; margin-bottom: 14px; }

/* section heading */
.chip {
  display: block;
  text-align: center;
  font-family: 'Gaegu', cursive;
  font-weight: 700;
  font-size: 22px;
  color: var(--sage-tint);
  letter-spacing: 0;
  margin-bottom: 8px;
}

/* ====== FOOTER ====== */
.card-footer {
  padding: 14px 16px 16px;
  text-align: center;
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-faint);
  background: transparent;
  letter-spacing: 0.5px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.footer-links a {
  color: var(--ink-faint);
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: lowercase;
}

.footer-links a:hover { color: var(--sage-tint); }

/* ====== VERY SMALL SCREENS (iPhone SE 375 / iPhone 390) ====== */
@media (max-width: 400px) {
  body { padding: 0.75rem 0.5rem 1.5rem; }
}

/* ====== CLOVER VERGES (the clover game's field, down both sides) ====== */
#side-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* the same soft vignette the game lays over its grass */
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(20, 28, 12, 0.34) 100%);
}

.side-clover {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%) rotate(var(--r)) scaleX(var(--flip, 1));
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.6s ease;
  opacity: 0;
  -webkit-user-drag: none;
  user-select: none;
}
#side-field.grown .side-clover { opacity: 1; }
#side-field.clean .side-clover { opacity: 0; pointer-events: none; }

@media (hover: hover) {
  .side-clover:hover {
    transform: translate(-50%, -50%) rotate(var(--r)) scaleX(var(--flip, 1)) scale(1.25);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
    z-index: 500 !important;
  }
}

/* every plant pushes up out of the grass on its own beat */
#side-field.sprouting .side-clover {
  animation: clover-sprout 0.5s cubic-bezier(.2, .8, .3, 1.35) backwards;
  animation-delay: var(--d, 0s);
}
@keyframes clover-sprout {
  from { transform: translate(-50%, -50%) rotate(var(--r)) scaleX(var(--flip, 1)) scale(0); }
}

.side-clover.nope { animation: clover-nope 0.4s ease; }
@keyframes clover-nope {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--r)) scaleX(var(--flip, 1)); }
  30%      { transform: translate(-50%, -50%) rotate(calc(var(--r) + 14deg)) scaleX(var(--flip, 1)); }
  65%      { transform: translate(-50%, -50%) rotate(calc(var(--r) - 9deg)) scaleX(var(--flip, 1)); }
}

.side-clover.found {
  z-index: 600 !important;
  animation: clover-bloom 1.4s cubic-bezier(.2, .75, .3, 1) forwards;
}
@keyframes clover-bloom {
  0%   { transform: translate(-50%, -50%) rotate(var(--r)) scaleX(var(--flip, 1)) scale(1);
         filter: drop-shadow(0 0 0 rgba(234, 255, 176, 0)); }
  55%  { transform: translate(-50%, -50%) rotate(calc(var(--r) + 20deg)) scaleX(var(--flip, 1)) scale(1.9);
         filter: drop-shadow(0 0 20px rgba(234, 255, 176, 0.95)) brightness(1.22); }
  100% { transform: translate(-50%, -50%) rotate(calc(var(--r) + 20deg)) scaleX(var(--flip, 1)) scale(1.6);
         filter: drop-shadow(0 0 12px rgba(234, 255, 176, 0.6)) brightness(1.1); }
}

/* the note for whoever finds the four-leaf: small, and it tidies itself away */
#lucky-note {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 38px 12px 18px;
  background: var(--cream);
  border: 1px solid var(--chrome-dark);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--chrome-light), 0 10px 28px rgba(0, 0, 0, 0.4);
  text-align: center;
}
#lucky-note[hidden] { display: none; }
#lucky-note.show { opacity: 1; transform: translate(-50%, 0); }
#lucky-note h2 {
  font-family: 'Gaegu', cursive;
  font-size: 22px;
  line-height: 1.1;
  color: var(--sage-tint);
  margin: 0;
}
#lucky-note p {
  font-family: 'PixelOperator', monospace;
  font-size: 11px;
  color: var(--ink-soft);
  margin: 4px 0 0;
}
#lucky-note a { color: var(--sage-tint); }
.lucky-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: 0;
  color: var(--ink-faint);
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
.lucky-close:hover { color: var(--ink); }

/* ====== PUTTING THE CARD AWAY (×) ======
   It sinks to a taskbar tab in the corner, and the clover takes the lawn. */
.card.away { display: none; }
.card.leaving {
  transform-origin: 0 100%;
  animation: card-min 0.32s ease-in forwards;
}
.card.coming-back { animation: card-open 0.3s ease-out; }
@keyframes card-min {
  to { transform: translate(-30vw, 60vh) scale(0.08); opacity: 0; }
}
@keyframes card-open {
  from { transform: scale(0.94); opacity: 0; }
}

.taskbar-tab {
  position: fixed;
  z-index: 900;
  left: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  cursor: pointer;
  font-family: 'PixelOperator', monospace;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--leaf-ink);
  background: var(--chrome-dark);
  border: 1px solid #1f2813;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.18), inset -1px -1px 0 rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.4);
  animation: back-in 0.3s ease-out;
}
.taskbar-tab[hidden] { display: none; }
.taskbar-tab:hover { background: #3b4927; }
.tab-clover { font-size: 16px; }
@keyframes back-in { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .luck-clover, .tray-clock .tick,
  .luck-toggle:hover .luck-clover,
  .luck-toggle:focus-visible .luck-clover { animation: none; }
  .win-sym span { transition: none; }
  .luck-spark { display: none; }
  .card, .card.leaving, .card.coming-back { animation: none; transition: none; }
  #side-field.sprouting .side-clover { animation: none; }
  .side-clover.nope { animation: none; }
  .side-clover.found { animation: none; filter: drop-shadow(0 0 12px rgba(234, 255, 176, 0.6)) brightness(1.1); }
  #lucky-note { transition: opacity 0.2s; transform: translate(-50%, 0); }
  .taskbar-tab { animation: none; }
}