/* ===========================================
   SURREAL LEXICON — styles.css (no JS needed)
   =========================================== */

:root {
  --pri: #D94A42;
  --acc: #569B89;
  --blk: #111111;
  --wht: #ffffff;
  --cream: #EEDDBD;
  --dark: #1A1D20;
  --g4: #9ca3af;
  --g5: #6b7280;
  --g8: #1f2937;
  --ff-d: 'Bangers', cursive;
  --ff-b: 'Space Grotesk', sans-serif;
  --bdr: 3px solid var(--blk);
  --shd: 3px 3px 0 var(--blk);
  --spd: 0.3s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-b);
  background: var(--cream);
  color: var(--blk);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background var(--spd), color var(--spd);
}
body.dark { background: var(--dark); color: var(--cream); }

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input { font-family: inherit; border: none; outline: none; background: transparent; }

/* ---------- Grain ---------- */
body::after {
  content: "";
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMc8mCAAAABnRSTlMAAAAAAABupgeOAAABG0lEQVQ4y2NgQAX8DIxg0s/AAMamZ2Bgl2NgYJRhYGCWY2BglmNgEGRgEGBg4GNg4GNj4GNh4GNgEGBgEGBgYGJgYGFiYGDiY2Dg4mNg4OVjYODnY2DgExBg4BMUYOAXYGDgl2Fg4JdhYOBXYGDg12Fg4NdhYODXY2DgN2Bg4DdiYOA3ZmDgN2Fg4DdlYOA3Z2DgN2Bg4DdiYOA3ZmDgN2Fg4DdlYOA3Z2DgN2Bg4DdiYOA3ZmDgN2Fg4DdlYOA3Z2DgN2Bg4DdiYOA3ZmDgN2Fg4DdlYOA3Z2DgN2Bg4DdiYOA3ZmDgN2Fg4DdlYOA3Z2DgN2Bg4DdiYOA3ZmDgN2Fg4DdlYOA3Z2DgN2Bg4DdiYOA3ZmDgN2Fg4DdlYOA3Z2Dg1wEAKuJDB8/aK5kAAAAASUVORK5CYII=') repeat;
  opacity: 0.12;
  pointer-events: none;
  z-index: 200;
}

/* ---------- Halftone ---------- */
.bg-pattern {
  position: fixed; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='1' fill='%23000' fill-opacity='.08'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0;
}
body.dark .bg-pattern {
  background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='1' fill='%23fff' fill-opacity='.04'/%3E%3C/svg%3E");
}

/* =====================
   LOADER
   ===================== */
.loader {
  position: fixed; inset: 0;
  background: var(--cream);
  z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity .5s, visibility .5s;
}
body.dark .loader { background: var(--dark); }
.loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.loader__eye { width: 100px; height: 100px; }

.loader__eye-ball {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid var(--blk);
  background: var(--wht);
  position: relative; overflow: hidden;
  animation: lPulse 2s ease-in-out infinite;
}
body.dark .loader__eye-ball { border-color: var(--cream); background: var(--g8); }

.loader__iris {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--acc);
  border: 3px solid var(--blk);
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  display: flex; align-items: center; justify-content: center;
  animation: lLook 3s ease-in-out infinite;
}
body.dark .loader__iris { border-color: var(--cream); }

.loader__pupil {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--blk);
  position: relative;
}
body.dark .loader__pupil { background: var(--dark); }

.loader__glint {
  display: block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--wht);
  position: absolute; top: 2px; left: 2px;
}

.loader__lid {
  position: absolute; left: -3px; right: -3px;
  height: 50%; background: var(--cream);
  z-index: 2; border: 3px solid var(--blk);
}
body.dark .loader__lid { background: var(--dark); border-color: var(--cream); }

.loader__lid--top {
  top: -3px; border-radius: 50px 50px 0 0;
  transform-origin: bottom; animation: lBlink 3s ease-in-out infinite;
}
.loader__lid--bottom {
  bottom: -3px; border-radius: 0 0 50px 50px;
  transform-origin: top; animation: lBlink 3s ease-in-out infinite;
}

.loader__text {
  font-family: var(--ff-d);
  font-size: 1.3rem; letter-spacing: .25em;
  margin-top: 1.5rem; text-transform: uppercase;
}
body.dark .loader__text { color: var(--cream); }

.loader__dots::after { content: ''; animation: lDots 1.5s steps(4,end) infinite; }

@keyframes lDots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }
@keyframes lPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes lLook {
  0%,100%{transform:translate(-50%,-50%)}
  25%{transform:translate(-35%,-60%)}
  50%{transform:translate(-65%,-45%)}
  75%{transform:translate(-45%,-55%)}
}
@keyframes lBlink { 0%,42%,48%,100%{transform:scaleY(0)} 45%{transform:scaleY(1)} }

/* =====================
   NAV
   ===================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  width: 100%;
  padding: .8rem 1rem;
  display: flex; align-items: center;
  gap: .8rem;
  border-bottom: 3px solid var(--blk);
  background: var(--cream);
  transition: background var(--spd), border-color var(--spd);
  max-width: 100vw;
  box-sizing: border-box;
}
@media(max-width:400px) {
  .nav {
    padding: .5rem;
    gap: .4rem;
  }
  
  .nav__search {
    flex: 1;
    min-width: 0;  /* allows it to shrink */
    max-width: none;
  }
  
  .nav__search-box {
    width: 100%;
  }
  
  .nav__search-input {
    padding: .4rem .3rem;
    font-size: .8rem;
  }
  
  .nav__search-btn {
    padding: .4rem .5rem;
    font-size: .9rem;
  }
  
  .nav__theme {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
  }
  
  .nav__theme .material-icons {
    font-size: 1rem;
  }
}
body.dark .nav { background: var(--dark); border-bottom-color: var(--cream); }

.nav__logo {
  display: flex; align-items: center; gap: .4rem;
  flex-shrink: 0; cursor: pointer;
}
.nav__logo-icon { font-size: 1.8rem; color: var(--pri); }
.nav__logo-text { font-family: var(--ff-d); font-size: 1.4rem; letter-spacing: .1em; }

.nav__search {
  flex: 1; max-width: 32rem;
  display: none;
}
.nav__search.show { display: block; }

.nav__search-box {
  display: flex; align-items: center;
  border: var(--bdr); background: var(--wht);
  transition: background var(--spd), border-color var(--spd);
}
body.dark .nav__search-box { background: var(--g8); border-color: var(--cream); }

.nav__search-icon { padding: 0 .6rem; font-size: 1.3rem; color: var(--blk); display: flex; }
body.dark .nav__search-icon { color: var(--cream); }

.nav__search-input {
  flex: 1; padding: .55rem .4rem;
  font-weight: 700; font-size: .9rem; color: var(--blk);
  min-width: 0;
}
.nav__search-input::placeholder { color: var(--g4); }
body.dark .nav__search-input { color: var(--cream); }
body.dark .nav__search-input::placeholder { color: var(--g5); }

.nav__search-btn {
  background: var(--acc); color: var(--blk);
  border-left: 3px solid var(--blk);
  font-family: var(--ff-d); font-size: 1.1rem;
  padding: .55rem 1rem;
  transition: background var(--spd), color var(--spd);
  white-space: nowrap;
}
.nav__search-btn:hover { background: var(--pri); color: var(--wht); }
body.dark .nav__search-btn { border-left-color: var(--cream); color: var(--dark); }

.nav__actions { margin-left: auto; flex-shrink: 0; }

.nav__theme {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%; border: var(--bdr);
  background: var(--wht);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--spd);
}
body.dark .nav__theme { border-color: var(--cream); background: var(--g8); }
.nav__theme:hover { background: var(--acc); }
.nav__theme .material-icons { color: var(--blk); font-size: 1.3rem; transition: color var(--spd); }
body.dark .nav__theme .material-icons { color: var(--cream); }
.nav__theme:hover .material-icons { color: var(--wht); }

/* =====================
   PAGES
   ===================== */
.page { display: none; position: relative; z-index: 1; flex-grow: 1; }
.page.active { display: flex; }

/* =====================
   LANDING
   ===================== */
.page--landing {
  flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem 1rem;
  max-width: 72rem; margin: 0 auto; width: 100%;
}

.landing__eyes { position: relative; width: 100%; height: 0; }

.eye-float {
  position: absolute; border-radius: 50%;
  border: var(--bdr); background: var(--wht);
  box-shadow: var(--shd);
  display: flex; align-items: center; justify-content: center;
}
body.dark .eye-float { border-color: var(--cream); }

.eye-float--big {
  width: 5rem; height: 5rem;
  top: -1rem; left: .5rem;
  animation: bFloat 4s ease-in-out infinite;
}
.eye-float--small {
  width: 3.5rem; height: 3.5rem;
  top: -1rem; right: .5rem;
  animation: bFloat 3s ease-in-out infinite .5s;
}

.eye-float__pupil {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%; background: var(--blk);
  position: relative;
}
.eye-float__iris {
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%; background: var(--pri);
  position: relative;
}
.eye-float__glint {
  display: block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--wht);
  position: absolute; top: 2px; left: 2px;
}
.eye-float__glint--alt { top: 2px; right: 2px; left: auto; }

/* Hero */
.hero {
  position: relative; width: 100%;
  display: flex; justify-content: center;
  margin: 2rem 0 2.5rem;
}

.hero__card {
  position: relative; z-index: 2;
  background: var(--acc);
  border: var(--bdr);
  box-shadow: 6px 6px 0 var(--blk);
  padding: .8rem 1.5rem;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--spd);
}
body.dark .hero__card { border-color: var(--cream); box-shadow: 6px 6px 0 var(--cream); }

.hero__inner {
  border: 2px solid var(--blk);
  padding: .4rem .8rem;
}
body.dark .hero__inner { border-color: var(--cream); }

.hero__title {
  font-family: var(--ff-d);
  font-size: clamp(3rem, 12vw, 9rem);
  letter-spacing: .12em;
  color: var(--blk);
  line-height: 1;
}
body.dark .hero__title { color: var(--dark); }

.hero__blob {
  position: absolute;
  top: -2.5rem; right: -1rem;
  width: 5rem; height: 5rem;
  background: var(--blk);
  border-radius: 50% 50% 0 50%;
  z-index: 1;
  border: 3px solid var(--wht);
}
body.dark .hero__blob { background: var(--cream); border-color: var(--dark); }

@media(min-width:640px) {
  .hero__card { padding: 1.2rem 2.5rem; }
  .hero__inner { padding: .6rem 1.5rem; }
  .hero__blob { width: 6rem; height: 6rem; top: -3rem; right: 15%; }
}

/* Landing search */
.search-box { width: 100%; max-width: 40rem; margin: 1rem auto 0; }
.search-box__form { position: relative; }

.search-box__shadow {
  position: absolute; inset: 0;
  background: var(--pri);
  border: var(--bdr);
  transform: translate(3px,3px);
}
body.dark .search-box__shadow { border-color: var(--cream); }

.search-box__main {
  position: relative;
  display: flex; align-items: center;
  border: var(--bdr); background: var(--wht);
}
body.dark .search-box__main { border-color: var(--cream); background: var(--g8); }

.search-box__icon { padding: 0 .8rem; font-size: 1.6rem; color: var(--blk); display: flex; }
body.dark .search-box__icon { color: var(--cream); }

.search-box__input {
  flex: 1; padding: 1.1rem .5rem;
  font-weight: 700; font-size: clamp(1rem, 3vw, 1.4rem);
  color: var(--blk); min-width: 0;
}
.search-box__input::placeholder { color: var(--g4); }
body.dark .search-box__input { color: var(--cream); }
body.dark .search-box__input::placeholder { color: var(--g5); }

.search-box__btn {
  background: var(--acc); color: var(--blk);
  border-left: 3px solid var(--blk);
  font-family: var(--ff-d); font-size: 1.3rem;
  padding: 1.1rem 1.5rem;
  transition: background var(--spd), color var(--spd);
  white-space: nowrap;
}
.search-box__btn:hover { background: var(--pri); color: var(--wht); }
body.dark .search-box__btn { border-left-color: var(--cream); color: var(--dark); }

.search-box__hint {
  text-align: center; margin-top: .8rem;
  font-weight: 700; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; opacity: .7;
}

/* Landing bottom bar */
.landing__bar {
  width: 100%; max-width: 44rem;
  height: 5rem; margin-top: 3rem;
  border: var(--bdr); background: var(--blk);
  position: relative; overflow: hidden;
}
body.dark .landing__bar { border-color: var(--cream); background: var(--cream); }

.landing__bar-inner {
  position: absolute; bottom: 0; left: 20%; width: 60%; height: 4rem;
  background: var(--wht);
  border-top: 3px solid var(--blk);
  border-left: 3px solid var(--blk);
  border-right: 3px solid var(--blk);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: .3rem;
}
body.dark .landing__bar-inner { border-color: var(--dark); }

.landing__bar-text {
  font-family: var(--ff-d);
  font-size: 1.8rem; color: var(--blk);
}
body.dark .landing__bar-text { color: var(--dark); }

/* =====================
   RESULTS
   ===================== */
.page--results {
  flex-direction: column;
  max-width: 80rem; margin: 0 auto; width: 100%;
  padding: 1.5rem 1rem;
}

.results {
  display: flex; flex-direction: column; gap: 1.5rem;
  width: 100%;
}
@media(min-width:1024px) { .results { flex-direction: row; } }

.results__main {
  flex: 1; display: flex; flex-direction: column; gap: 1.5rem;
  min-width: 0;
}

/* Word card */
.word-card {
  position: relative;
  background: var(--pri);
  padding: 1.5rem;
  border: var(--bdr);
  box-shadow: var(--shd);
}

.word-card__badge {
  position: absolute; top: -.8rem; right: -.8rem;
  width: 2.5rem; height: 2.5rem;
  background: var(--cream); border-radius: 50%;
  border: var(--bdr);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shd);
  animation: bFloat 3s ease-in-out infinite;
}
.word-card__badge .material-icons { color: var(--blk); font-size: 1.2rem; }

.word-card__word {
  font-family: var(--ff-d);
  font-size: clamp(2.5rem, 10vw, 6rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 2px 2px 0 var(--blk);
  word-break: break-word;
}

.word-card__meta {
  display: flex; align-items: center; gap: .8rem;
  margin-top: .8rem; flex-wrap: wrap;
}

.word-card__phonetic {
  font-size: 1.1rem; font-weight: 700;
  background: var(--blk); color: var(--cream);
  padding: .2rem .6rem; border: var(--bdr);
}

.word-card__audio {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: var(--cream);
  border: var(--bdr);
  display: flex; align-items: center; justify-content: center;
  color: var(--blk); box-shadow: var(--shd);
  transition: background var(--spd), color var(--spd);
}
.word-card__audio:hover { background: var(--acc); color: var(--wht); }

/* Definitions */
.defs { display: flex; flex-direction: column; gap: 1.2rem; }

.def-card {
  background: var(--cream); padding: 1.2rem;
  border: var(--bdr); box-shadow: var(--shd);
  position: relative; transition: transform var(--spd);
}
body.dark .def-card { background: var(--dark); }
.def-card:hover { transform: translateY(-3px); }
.def-card--indent { margin-left: .8rem; }

.def-card__label {
  position: absolute; left: -.5rem; top: -.5rem;
  background: var(--acc); color: var(--cream);
  padding: .15rem .8rem;
  border: var(--bdr);
  font-family: var(--ff-d); font-size: 1.1rem;
  z-index: 2;
}

.def-card__body {
  margin-top: .8rem; padding-left: .8rem;
  border-left: 3px solid var(--pri);
  display: flex; flex-direction: column; gap: .8rem;
}
.def-card__body--green { border-left-color: var(--acc); }

.def-card__text { font-size: 1rem; font-weight: 700; line-height: 1.6; }
@media(min-width:768px) { .def-card__text { font-size: 1.1rem; } }

.def-card__ex {
  padding: .8rem; border: var(--bdr);
  font-style: italic; font-size: .95rem;
}
.def-card__ex--red { background: rgba(217,74,66,.15); }
body.dark .def-card__ex--red { background: rgba(217,74,66,.08); }
.def-card__ex--green { background: rgba(86,155,137,.15); }
body.dark .def-card__ex--green { background: rgba(86,155,137,.08); }

.hl-red { font-weight: 700; text-decoration: underline wavy var(--pri); }
.hl-green { font-weight: 700; text-decoration: underline wavy var(--acc); }

/* Related */
.related {
  display: grid; grid-template-columns: 1fr; gap: 1.2rem;
  padding-top: 1.2rem;
  border-top: 3px dashed var(--blk);
}
body.dark .related { border-top-color: rgba(238,221,189,.25); }
@media(min-width:640px) { .related { grid-template-columns: 1fr 1fr; } }

.related__title {
  font-family: var(--ff-d); font-size: 1.5rem;
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .8rem;
}
.related__title--green { color: var(--acc); }
.related__title--red { color: var(--pri); }

.related__tags { display: flex; flex-wrap: wrap; gap: .5rem; }

.tag {
  padding: .4rem .8rem;
  background: var(--cream); border: var(--bdr);
  box-shadow: var(--shd);
  font-weight: 700; font-size: .8rem;
  transition: background var(--spd), color var(--spd), transform var(--spd);
  cursor: pointer; display: inline-block;
}
body.dark .tag { background: var(--dark); }
.tag--syn:hover { background: var(--acc); color: var(--wht); transform: translateY(-2px); }
.tag--ant:hover { background: var(--pri); color: var(--wht); transform: translateY(-2px); }
.tag--none { opacity: .5; cursor: default; box-shadow: none; }

/* Sidebar */
.sidebar {
  display: flex; flex-direction: column; gap: 1.5rem;
}
@media(min-width:1024px) { .sidebar { width: 20rem; flex-shrink: 0; } }

.side-title {
  font-family: var(--ff-d); font-size: 1.3rem;
  border-bottom: 2px solid var(--blk);
  padding-bottom: .4rem; margin-bottom: .8rem;
  display: flex; align-items: center; gap: .4rem;
}
body.dark .side-title { border-bottom-color: rgba(238,221,189,.25); }

/* Bookmarks */
.bmarks { position: relative; }

.bmarks__layer {
  position: absolute; inset: 0; border: var(--bdr);
}
.bmarks__layer--red { background: var(--pri); transform: rotate(2deg) translate(2px,2px); }
.bmarks__layer--green { background: var(--acc); transform: rotate(-1.5deg) translate(-1px,1px); }

.bmarks__body {
  position: relative;
  background: var(--cream); border: var(--bdr);
  padding: 1.2rem; box-shadow: var(--shd);
}
body.dark .bmarks__body { background: var(--dark); }

.bmarks__badge {
  position: absolute; top: -1rem; right: .8rem;
  background: var(--cream); border: var(--bdr);
  padding: .15rem .6rem; box-shadow: var(--shd);
  font-family: var(--ff-d); font-size: 1.2rem;
  color: var(--blk); z-index: 2;
}

.bmarks__list { display: flex; flex-direction: column; gap: .6rem; font-weight: 700; }

.bmarks__item {
  display: flex; justify-content: space-between; align-items: center;
  text-transform: uppercase;
}
.bmarks__item span:first-child {
  text-decoration: underline; text-decoration-color: transparent;
  transition: color var(--spd), text-decoration-color var(--spd);
}
.bmarks__item:hover span:first-child { color: var(--pri); text-decoration-color: var(--pri); }
.bmarks__arrow { font-size: .8rem; opacity: .4; }

/* Recent */
.recent {
  background: var(--cream); border: var(--bdr);
  padding: 1.2rem; box-shadow: var(--shd);
  position: relative; overflow: hidden;
}
body.dark .recent { background: var(--dark); }

.recent__watermark {
  position: absolute; bottom: -2rem; right: -2rem;
  font-size: 8rem; opacity: .04; pointer-events: none;
  transform: rotate(-12deg);
}

.recent__list {
  display: flex; flex-direction: column; gap: .4rem;
  font-size: .85rem; position: relative; z-index: 1;
}

.recent__item {
  display: flex; align-items: center; gap: .4rem;
  padding: .2rem .4rem; margin: 0 -.4rem;
  border-radius: .2rem; cursor: pointer;
  transition: background var(--spd);
}
.recent__item:hover { background: rgba(86,155,137,.15); }
body.dark .recent__item:hover { background: rgba(86,155,137,.08); }
.recent__item .material-icons { font-size: .7rem; }
.recent__item a {
  text-decoration: line-through;
  text-decoration-color: rgba(17,17,17,.4);
}
body.dark .recent__item a { text-decoration-color: rgba(238,221,189,.4); }
.recent__item a:hover { text-decoration: none; }

/* =====================
   ERROR
   ===================== */
.page--error {
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 1rem;
  overflow: hidden;
}

.err-dots {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 4px 4px; opacity: .15;
}

.err-deco { position: absolute; z-index: 0; pointer-events: none; }
.err-deco--left {
  top: 2rem; left: 2rem;
  width: 6rem; height: 12rem;
  background: var(--acc); opacity: .15;
  transform: skewX(-12deg);
}
.err-deco--right {
  bottom: 2rem; right: 2rem;
  width: 12rem; height: 6rem;
  background: var(--pri); opacity: .08;
  transform: skewY(12deg);
}

.err {
  z-index: 1; width: 100%; max-width: 36rem;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}

.err__banner {
  background: var(--acc);
  padding: 1.2rem; border: var(--bdr);
  box-shadow: var(--shd);
  margin-bottom: 2rem;
  width: 100%; max-width: 28rem;
  position: relative; overflow: hidden;
}
body.dark .err__banner { border-color: var(--cream); box-shadow: 3px 3px 0 var(--cream); }

.err__dash {
  position: absolute; inset: .4rem;
  border: 2px dashed var(--cream); opacity: .4;
  display: block;
}

.err__corner {
  position: absolute; width: .6rem; height: .6rem;
  background: var(--blk); display: block;
}
body.dark .err__corner { background: var(--cream); }
.err__corner--tl { top: 0; left: 0; }
.err__corner--tr { top: 0; right: 0; }
.err__corner--bl { bottom: 0; left: 0; }
.err__corner--br { bottom: 0; right: 0; }

.err__title {
  font-family: var(--ff-d);
  font-size: clamp(2.5rem, 10vw, 5rem);
  color: var(--pri); text-transform: uppercase;
  letter-spacing: -.03em; line-height: 1;
  position: relative; z-index: 1;
  filter: drop-shadow(2px 2px 0 var(--blk));
}
body.dark .err__title { filter: drop-shadow(2px 2px 0 var(--cream)); }

/* Error scene */
.err__scene {
  position: relative; width: 100%;
  height: 16rem;
  display: flex; justify-content: center; align-items: center;
  margin-bottom: 2rem;
}

.err__figure {
  position: absolute; bottom: 0;
  width: 9rem; height: 13rem;
  background: var(--blk); border: var(--bdr);
  display: flex; flex-direction: column;
  align-items: center; padding-top: .8rem;
  transform: translateX(-1.5rem);
}

.err__hat {
  width: 3rem; height: 1.5rem;
  background: var(--cream);
  border-bottom: 3px solid var(--blk);
  position: relative; z-index: 2;
  display: flex; justify-content: center;
}
.err__hat-top {
  width: .8rem; height: 5rem;
  background: var(--pri);
  border: 3px solid var(--blk);
  position: absolute; top: .8rem; z-index: 3;
  transform: rotate(3deg);
}
body.dark .err__hat-top { border-color: var(--cream); }
.err__hat-line {
  display: block; width: 100%; height: 1px;
  background: var(--blk); margin-top: .4rem;
  transform: skewY(-10deg);
}
body.dark .err__hat-line { background: var(--cream); }

.err__ribs {
  position: absolute; top: 1.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; width: 4.5rem; justify-content: space-between;
  z-index: 1;
}
.err__rib { display: block; width: 2rem; height: 6rem; }
.err__rib--l { border-right: 3px solid var(--cream); border-bottom: 3px solid var(--cream); transform: skewX(-12deg); }
.err__rib--r { border-left: 3px solid var(--cream); border-bottom: 3px solid var(--cream); transform: skewX(12deg); }
body.dark .err__rib--l, body.dark .err__rib--r { border-color: rgba(238,221,189,.15); }

.err__fig-badge {
  position: absolute; top: -1.2rem;
  width: 2.5rem; height: 1.2rem;
  background: var(--pri); border: 3px solid var(--blk);
  border-radius: 50%; z-index: 1; display: block;
}
body.dark .err__fig-badge { border-color: var(--cream); }

.err__arm {
  position: absolute; bottom: 3rem; right: -2.5rem;
  width: 5rem; height: 1.5rem;
  background: var(--blk); border: 3px solid var(--blk);
  transform: rotate(12deg); z-index: 2; display: block;
}
body.dark .err__arm { border-color: var(--cream); }

.err__hand {
  position: absolute; bottom: 2.5rem; right: -3.5rem;
  width: 2rem; height: 1.5rem;
  background: var(--cream); border: 3px solid var(--blk);
  border-radius: 50%; z-index: 3; display: block;
}
body.dark .err__hand { border-color: var(--cream); }

.err__clipboard {
  position: absolute; bottom: 3rem; right: -6.5rem;
  width: 6rem; height: 2.5rem;
  background: var(--cream); border: var(--bdr);
  box-shadow: var(--shd);
  transform: rotate(-12deg); z-index: 1;
  display: flex; align-items: center; padding: .3rem;
}
body.dark .err__clipboard { border-color: var(--cream); box-shadow: 3px 3px 0 var(--cream); }
.err__clip-inner {
  width: 100%; height: 100%;
  border: 2px dashed rgba(17,17,17,.25);
  display: block;
}
body.dark .err__clip-inner { border-color: rgba(238,221,189,.25); }

/* Error eyes */
.err__eye {
  position: absolute; background: var(--cream);
  border: var(--bdr); box-shadow: var(--shd);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
body.dark .err__eye { border-color: var(--cream); box-shadow: 3px 3px 0 var(--cream); }

.err__eye--lg { width: 6rem; height: 6rem; top: 0; right: 15%; z-index: 3; animation: eFloat 6s ease-in-out infinite; }
.err__eye--md { width: 3rem; height: 3rem; top: 2rem; left: 20%; z-index: 2; animation: eFloat 6s ease-in-out infinite 1s; }
.err__eye--sm { width: 2.5rem; height: 2.5rem; bottom: 2rem; left: 2rem; z-index: 2; animation: eFloat 7s ease-in-out infinite 2s; }

.err__eye-veins { position: absolute; inset: 0; opacity: .3; }
.err__eye-veins svg { width: 100%; height: 100%; }

.err__iris { border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.err__iris--lg { width: 3rem; height: 3rem; background: var(--acc); border: 3px solid var(--blk); }
.err__iris--md { width: 1.5rem; height: 1.5rem; background: var(--blk); border: 2px solid var(--blk); }
.err__iris--sm { width: 1.2rem; height: 1.2rem; background: var(--pri); border: 2px solid var(--blk); }
body.dark .err__iris { border-color: var(--cream); }

.err__pupil { border-radius: 50%; background: var(--blk); position: relative; }
body.dark .err__pupil { background: var(--dark); }
.err__pupil--lg { width: 1.5rem; height: 1.5rem; }
.err__pupil--md { width: .8rem; height: .8rem; background: var(--cream); }
.err__pupil--sm { width: .6rem; height: .6rem; }

.err__glint {
  display: block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--wht);
  position: absolute; top: 2px; left: 2px;
}

/* Error message */
.err__msg {
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 700; margin-bottom: 1.5rem;
  max-width: 24rem; line-height: 1.6;
  background: var(--cream); padding: 1rem;
  border: 2px dashed var(--blk);
}
body.dark .err__msg { background: var(--dark); border-color: var(--cream); }

.err__highlight { color: var(--pri); }

/* Retry */
.err__retry {
  background: var(--cream); color: var(--blk);
  border: 3px solid var(--blk);
  box-shadow: 3px 3px 0 var(--pri);
  font-family: var(--ff-d);
  font-size: clamp(1.5rem, 4vw, 2rem);
  text-transform: uppercase;
  padding: .8rem 1.5rem;
  display: flex; align-items: center; gap: .6rem;
  transition: background var(--spd), color var(--spd), transform .1s, box-shadow .1s;
}
body.dark .err__retry { border-color: var(--cream); }
.err__retry:hover { background: var(--pri); color: var(--cream); }
.err__retry:active { transform: translate(3px,3px); box-shadow: none; }
.err__retry-icon { transition: transform .5s; }
.err__retry:hover .err__retry-icon { transform: rotate(180deg); }

/* =====================
   FOOTER
   ===================== */
.foot {
  width: 100%;
  padding: 1.5rem 1rem;
  margin-top: auto;
  position: relative; z-index: 10;
  border-top: 3px solid var(--blk);
  background: var(--clear);
  color: var(--spd);
  transition: background var(--spd), color var(--cream), border-color var(--cream);
}

body.dark .foot {
  background: var(--dark);
  color: var(--cream);
  border-top-color: var(--cream);
}

.foot__inner {
  max-width: 72rem; margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center; gap: .8rem;
  text-align: center;
}
@media(min-width:768px) {
  .foot__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

.foot__brand { display: flex; align-items: center; gap: .4rem; }
.foot__brand .material-icons { color: var(--pri); }
.foot__name { font-family: var(--ff-d); letter-spacing: .1em; font-size: 1.1rem; }

.foot__links { display: flex; gap: 1.2rem; font-weight: 700; font-size: .8rem; }
.foot__links a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: color var(--spd);
}
.foot__links a:hover { color: var(--pri); }

body.dark .foot__links a { color: var(--cream); }
body.dark .foot__links a:hover { color: var(--pri); }

.foot__copy { font-size: .7rem; font-family: monospace; opacity: .6; }

/* =====================
   ANIMATIONS
   ===================== */
@keyframes bFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes eFloat {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(-12px) rotate(4deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* =====================
   RESPONSIVE
   ===================== */
@media(max-width:480px) {
  .nav { padding: .6rem .8rem; }
  .nav__logo-text { display: none; }
  .nav__search-btn { padding: .55rem .6rem; font-size: 1rem; }
  .search-box__btn { padding: 1.1rem .8rem; font-size: 1.1rem; }

  .hero__blob { width: 3.5rem; height: 3.5rem; top: -1.8rem; right: -.5rem; }
  .eye-float--big { width: 3.5rem; height: 3.5rem; }
  .eye-float--big .eye-float__pupil { width: 1.2rem; height: 1.2rem; }
  .eye-float--small { width: 2.5rem; height: 2.5rem; }

  .word-card { padding: 1rem; }

  .err__scene { height: 12rem; }
  .err__figure { width: 7rem; height: 10rem; transform: translateX(-1rem); }
  .err__eye--lg { width: 4rem; height: 4rem; }
  .err__iris--lg { width: 2rem; height: 2rem; }
  .err__pupil--lg { width: 1rem; height: 1rem; }
  .err__clipboard { right: -4rem; width: 4rem; height: 2rem; }
  .err__arm { width: 3.5rem; right: -1.8rem; }
  .err__hand { right: -2.5rem; }
}

@media(max-width:350px) {
  .search-box__input { font-size: .9rem; padding: .8rem .3rem; }
  .search-box__btn { padding: .8rem .5rem; font-size: 1rem; }
}

/* fixes */
html {
  scrollbar-width: none;          /* Firefox */
}

html::-webkit-scrollbar {
  display: none;                  /* Chrome, Safari, Edge */
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}