/* Laboratz official site. The game's identity: thick ink outlines, glossy candy colours on deep lab plum, the
   game's own UI kit (jelly buttons and the parchment panel as 9-slice border images), its fonts. */
@font-face { font-family: "Groboldov"; src: url("fonts/groboldov.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("fonts/cairo-arabic-700.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  --ink: #1a0d26; --plum: #3b1d54; --plum-deep: #241136; --plum-light: #5a2a6e; --parchment: #fff4d6;
  --lime: #9be22d; --pink: #ff4fc8; --gold: #ffd23f; --soft: #e9dcf5; --muted: #bba6cf;
  --mutant: #b45cff; --mecha: #3fb2ff; --radio: #7cdc2a;
  --display: "Groboldov", "Cairo", "Fredoka", system-ui, sans-serif; --body: "Fredoka", "Cairo", system-ui, sans-serif;
  --wrap: 1180px; --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--plum-deep); }
body { margin: 0; color: var(--soft); font: 500 18px/1.55 var(--body); background: var(--plum-deep); overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--lime); }
:focus-visible { outline: 4px solid var(--parchment); outline-offset: 3px; border-radius: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: 8px; top: -80px; z-index: 50; background: var(--parchment); color: var(--ink); padding: 8px 14px; border-radius: 10px; }
.skip:focus { top: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.small { font-size: 15px; color: var(--muted); }

/* ink-stroked display text, as in the game (style rule 1) */
.ink, .title, .panel__title, .jelly span, .labmap a, .evo__name, .tower__floor span {
  font-family: var(--display); letter-spacing: .5px;
  paint-order: stroke fill; -webkit-text-stroke: 6px var(--ink);
  text-shadow: 0 4px 0 var(--ink);
}
.title { font-size: clamp(34px, 5vw, 58px); line-height: 1.05; color: #fff; margin: 0 0 14px; font-weight: 400; }
.title em { font-style: normal; color: var(--lime); }
.title--ink { color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; }
.lede { font-size: 20px; max-width: 760px; color: var(--soft); margin: 0 0 34px; }

/* top bar and the lab-map navigation */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 10px 22px;
  background: linear-gradient(180deg, rgba(26, 13, 38, .92), rgba(26, 13, 38, 0)); transition: background .3s; }
.topbar.is-solid { background: rgba(26, 13, 38, .94); border-bottom: 4px solid var(--ink); }
.topbar__logo img { display: block; width: 150px; }
.topbar__menu { display: none; margin-left: auto; font-size: 28px; color: #fff; background: var(--plum); border: 4px solid var(--ink); border-radius: 14px; width: 54px; height: 50px; cursor: pointer; }
.labmap { margin-left: auto; display: flex; gap: 6px; }
.labmap a { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; font-size: 17px; color: #fff; text-decoration: none;
  -webkit-text-stroke-width: 4px; text-shadow: 0 2px 0 var(--ink); border-radius: 16px; border: 4px solid transparent; transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background .2s; }
.labmap a img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 0 var(--ink)); }
.labmap a:hover, .labmap a.is-here { background: var(--plum); border-color: var(--ink); transform: translateY(-2px) scale(1.04); }

/* jelly buttons: the game's button master as a 9-slice (left 31, top 53, right 30, bottom 59 of 384 x 151) */
.jelly { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 74px; min-width: 260px; padding: 6px 34px 10px;
  border-style: solid; border-width: 22px 14px 25px 14px; border-image-slice: 53 30 59 31 fill; border-image-width: 22px 14px 25px 14px;
  text-decoration: none; cursor: pointer; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), filter .2s; }
.jelly span { color: #fff; font-size: 26px; line-height: 1; margin-top: -6px; }
.jelly--green { border-image-source: url("img/ui/button_green.png"); }
.jelly--pink { border-image-source: url("img/ui/button_pink.png"); }
.jelly--blue { border-image-source: url("img/ui/button_blue.png"); }
.jelly:hover { transform: translateY(-3px) scale(1.04); }
.jelly:active { transform: translateY(1px) scale(.98); }
.jelly.is-off { filter: saturate(.25) brightness(.85); cursor: default; }
.jelly.is-off:hover { transform: none; }
.jelly .badge { position: absolute; top: -26px; right: -20px; font: 600 13px var(--body); letter-spacing: .3px; color: var(--ink); background: var(--gold);
  border: 3px solid var(--ink); border-radius: 10px; padding: 2px 9px; transform: rotate(6deg); }

/* hero: the lab in layers */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.hero__lab, .hero__fore { position: absolute; inset: -4%; z-index: -3; pointer-events: none; }
.hero__lab .layer, .hero__fore { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero__fore { z-index: -1; inset: auto; left: -6%; top: -6%; width: 112%; height: 112%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(ellipse at 30% 45%, rgba(36, 17, 54, .2), rgba(26, 13, 38, .78) 75%), linear-gradient(180deg, rgba(26, 13, 38, 0) 70%, var(--plum-deep)); }
.hero__cast { position: absolute; z-index: -1; right: 2%; bottom: 7%; width: min(52vw, 760px); aspect-ratio: 1.2; pointer-events: none; }
.hero__rat { position: absolute; bottom: 0; filter: drop-shadow(0 14px 0 rgba(18, 7, 26, .55)); transform-origin: 50% 100%; animation: breathe 2.6s ease-in-out infinite; }
.hero__rat--dragon { width: 62%; left: 14%; bottom: 8%; animation-duration: 2.4s; }
.hero__rat--igor { width: 21%; right: 0; animation-delay: .6s; }
.hero__rat--snifire { width: 27%; left: 0; animation-delay: 1.1s; }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.02); } }
.hero__copy { position: relative; max-width: 640px; margin: 90px 0 60px 6vw; }
.hero__logo { width: min(560px, 82vw); filter: drop-shadow(0 8px 0 rgba(26, 13, 38, .7)); }
.hero h1 { margin: 0; line-height: 0; }
.hero__tag { font-size: clamp(26px, 3.2vw, 40px); color: var(--gold); margin: 10px 0 12px; line-height: 1.1; }
.hero__lede { font-size: 20px; max-width: 560px; margin: 0 0 30px; text-shadow: 0 2px 0 var(--ink); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 22px 28px; margin-top: 8px; }
.hero__scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: var(--parchment); font-size: 26px; text-decoration: none;
  width: 54px; height: 54px; display: grid; place-items: center; border: 4px solid var(--ink); border-radius: 50%; background: var(--plum); animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* sections and panels */
.section { position: relative; padding: 110px 0; }
.section--deep { background: linear-gradient(180deg, var(--plum-deep), #1d0e2c 50%, var(--plum-deep)); }
.section--deep::before { content: ""; position: absolute; inset: 0; background: url("img/ui/brick.webp") center / 360px repeat; opacity: .07; pointer-events: none; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.panel { position: relative; padding: 22px 24px 24px; border: 4px solid var(--ink); border-radius: var(--radius);
  background: linear-gradient(180deg, #6b3485 0, #4a2266 38%, var(--plum) 40%, #2f1645 100%); box-shadow: 0 8px 0 var(--ink); }
.panel__title { font-size: 28px; color: #fff; margin: 10px 0 8px; font-weight: 400; -webkit-text-stroke-width: 5px; }
.panel__kicker { margin: 0; font: 600 14px var(--body); text-transform: uppercase; letter-spacing: 1px; color: var(--gold); }
.panel p { margin: 0 0 8px; }
.panel__art { display: block; width: 100%; border: 4px solid var(--ink); border-radius: 14px; }
.panel__art--icons { border: 0; }
.el { padding: 0 6px; border-radius: 8px; border: 2px solid var(--ink); color: var(--ink); }
.el--mutant { background: var(--mutant); } .el--mecha { background: var(--mecha); } .el--radio { background: var(--radio); }
.wheel { position: relative; height: 200px; }
.wheel img { position: absolute; width: 96px; filter: drop-shadow(0 4px 0 var(--ink)); }
.wheel__a { left: 50%; top: 0; transform: translateX(-50%); }
.wheel__b { right: 18%; bottom: 0; }
.wheel__c { left: 18%; bottom: 0; }
.wheel::after { content: ""; position: absolute; inset: 30px 30%; border: 4px dashed rgba(255, 244, 214, .4); border-radius: 50%; animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* evolution line */
.evo { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: evo; }
.evo__step button { width: 100%; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: center; }
.evo__step img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; filter: brightness(.4) saturate(.4) drop-shadow(0 10px 0 rgba(18, 7, 26, .6));
  transition: filter .45s, transform .45s cubic-bezier(.34, 1.56, .64, 1); transform: scale(.9); }
.evo__step.is-on img { filter: drop-shadow(0 10px 0 rgba(18, 7, 26, .6)); transform: scale(1); }
.evo__step { position: relative; }
.evo__step:not(:last-child)::after { content: ""; position: absolute; right: -22px; top: 38%; width: 26px; height: 26px;
  background: var(--lime); border: 4px solid var(--ink); border-radius: 50%; clip-path: polygon(30% 15%, 85% 50%, 30% 85%); z-index: 2; }
.evo__name { display: block; font-size: 30px; color: #fff; margin-top: 6px; }
.evo__line { display: block; color: var(--muted); font-size: 16px; }
.evo__step.is-on .evo__line { color: var(--gold); }

/* rat cards */
.rats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.rat { border: 4px solid var(--ink); border-radius: 20px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #5a2a6e, var(--plum-deep) 75%);
  box-shadow: 0 8px 0 var(--ink); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.rat:hover, .rat:focus-within { transform: translateY(-6px) rotate(-1deg); }
.rat img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; padding: 12px 10px 0; }
.rat div { padding: 8px 12px 14px; background: rgba(26, 13, 38, .7); border-top: 4px solid var(--ink); min-height: 132px; }
.rat h3 { margin: 0; font: 400 22px var(--display); color: #fff; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }
.rat p { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--soft); }
.rat .el { font-size: 12px; font-weight: 600; }

/* splits, shots, tower, gallery */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.split--reverse { grid-template-columns: 1fr .9fr; }
.shot { margin: 0; border: 5px solid var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 0 10px 0 var(--ink); transform: rotate(1.2deg); }
.shot img { display: block; }
.tower { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tower__floor { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; padding: 12px 18px; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); }
.tower__floor span { font-size: 24px; color: #fff; -webkit-text-stroke-width: 4px; }
.tower__floor b { font: 600 14px var(--body); text-transform: uppercase; letter-spacing: 1px; padding: 3px 10px; border-radius: 10px; border: 3px solid var(--ink); }
.tower__lock { width: 54px; height: 54px; object-fit: contain; }
.tower__floor.is-sealed { background: repeating-linear-gradient(135deg, #2b1440 0 18px, #321849 18px 36px); filter: saturate(.7); }
.tower__floor.is-sealed b { background: var(--plum-light); color: var(--soft); }
.tower__floor.is-sealed:hover .tower__lock { animation: rattle .4s; }
.tower__floor.is-open { background: linear-gradient(180deg, #6b3485, #3b1d54); outline: 4px solid var(--lime); outline-offset: -10px; }
.tower__floor.is-open b { background: var(--lime); color: var(--ink); }
@keyframes rattle { 25% { transform: rotate(-12deg); } 50% { transform: rotate(9deg); } 75% { transform: rotate(-5deg); } }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery__item { padding: 0; border: 4px solid var(--ink); border-radius: 18px; overflow: hidden; cursor: zoom-in; background: var(--ink); box-shadow: 0 7px 0 var(--ink);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.gallery__item img { display: block; transition: transform .4s; }
.gallery__item:hover { transform: translateY(-4px); }
.gallery__item:hover img { transform: scale(1.05); }
.lightbox { padding: 0; border: 6px solid var(--ink); border-radius: 18px; background: var(--ink); max-width: min(1600px, 94vw); }
.lightbox::backdrop { background: rgba(18, 7, 26, .88); }
.lightbox img { display: block; width: 100%; }
.lightbox__close { position: absolute; top: 10px; right: 10px; width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--ink); background: var(--pink); color: #fff; font-size: 20px; cursor: pointer; }

/* the parchment panel (the game's popup master as a 9-slice: left 33, top 80, right 104, bottom 76) */
.parchment { color: var(--ink); border-style: solid; border-width: 52px 68px 49px 22px; border-image: url("img/ui/popup_panel.png") 80 104 76 33 fill / 52px 68px 49px 22px; padding: 10px 0 6px 18px; }
.parchment p { margin: 0 0 12px; }
.parchment .small { color: #6b4a7e; }
.ticks { margin: 0 0 14px; padding-left: 0; list-style: none; }
.ticks li { position: relative; padding-left: 32px; margin: 4px 0; font-weight: 600; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; display: grid; place-items: center; font-size: 14px; color: var(--ink); background: var(--lime); border: 3px solid var(--ink); border-radius: 50%; }
.beta__figure { position: relative; justify-self: center; margin: 0; padding-bottom: 14px; }
.beta__figure::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 62%; height: 26px; transform: translateX(-50%); border-radius: 50%; background: rgba(18, 7, 26, .7); z-index: -1; }
.beta__igor { display: block; max-height: 620px; width: auto; }
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.footer { padding: 46px 0 60px; border-top: 4px solid var(--ink); background: #170a22; }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.footer__links { display: flex; gap: 22px; }
.footer__links a { font-weight: 600; }
.footer__legal { flex-basis: 100%; margin: 0; }

/* languages, FAQ, news links, article pages */
.langs { display: flex; gap: 6px; margin-inline-start: 8px; }
.langs a { font: 600 14px var(--body); color: var(--soft); text-decoration: none; padding: 4px 9px; border: 3px solid var(--ink); border-radius: 10px; background: var(--plum); }
.langs a[aria-current] { background: var(--lime); color: var(--ink); }
.faq { display: grid; gap: 14px; max-width: 900px; }
.faq__item { border: 4px solid var(--ink); border-radius: 18px; background: linear-gradient(180deg, #4a2266, var(--plum)); box-shadow: 0 6px 0 var(--ink); padding: 4px 20px; }
.faq__item summary { cursor: pointer; padding: 12px 0; font: 600 20px var(--body); color: #fff; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before { content: "+"; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-inline-end: 12px; color: var(--ink); background: var(--lime); border: 3px solid var(--ink); border-radius: 50%; font-weight: 700; }
.faq__item[open] summary::before { content: "−"; background: var(--gold); }
.faq__item p { margin: 0 0 14px; color: var(--soft); }
.panel__link { color: inherit; text-decoration: none; }
.more { font-weight: 600; text-decoration: none; }
.article-page .topbar { position: sticky; }
.article { max-width: 860px; }
.crumbs { font-size: 15px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.article__body { font-size: 20px; margin-bottom: 30px; }
/* the privacy page: headed sections in the article panel */
.privacy__h { font: 700 21px var(--body); color: var(--gold); margin: 22px 0 6px; }
.privacy__h:first-child { margin-top: 0; }
.privacy .article__body { font-size: 17px; }
.privacy .article__body ul { margin: 0 0 10px; padding-inline-start: 1.3em; }
.privacy .article__body li { margin: 5px 0; }

/* right to left (Arabic): the stage moves to the left, everything else follows the logical direction */
[dir="rtl"] body, [dir="rtl"] { font-family: var(--body); }
[dir="rtl"] .ink, [dir="rtl"] .title, [dir="rtl"] .panel__title, [dir="rtl"] .jelly span, [dir="rtl"] .labmap a, [dir="rtl"] .evo__name, [dir="rtl"] .tower__floor span { font-family: "Cairo", var(--display); font-weight: 700; letter-spacing: 0; }
[dir="rtl"] .labmap { margin-left: 0; margin-right: auto; }
[dir="rtl"] .hero__copy { margin: 90px 6vw 60px 0; }
[dir="rtl"] .hero__cast { right: auto; left: 2%; transform: scaleX(-1); }
[dir="rtl"] .jelly .badge { right: auto; left: -20px; transform: rotate(-6deg); }
/* Cairo's tall letters overlap at line-height 1 when a long label wraps on a phone (the Steam button in Arabic) */
[dir="rtl"] .jelly span { line-height: 1.35; margin-top: -2px; text-align: center; }
[dir="rtl"] .ticks li { padding-left: 0; padding-right: 32px; }
[dir="rtl"] .ticks li::before { left: auto; right: 0; }
[dir="rtl"] .evo__step:not(:last-child)::after { right: auto; left: -22px; transform: scaleX(-1); }
[dir="rtl"] .parchment { border-width: 52px 22px 49px 68px; border-image-width: 52px 22px 49px 68px; padding: 10px 18px 6px 0; }
[dir="rtl"] .shot { transform: rotate(-1.2deg); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s, transform .6s cubic-bezier(.22, 1, .36, 1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .grid3, .news { grid-template-columns: 1fr; }
  .rats { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .split, .split--reverse { grid-template-columns: 1fr; }
  .evo { grid-template-columns: repeat(2, 1fr); }
  .hero__cast { width: 92vw; right: -6vw; bottom: 4%; opacity: .45; }
  .topbar__menu { display: block; }
  .labmap { display: none; position: absolute; top: 72px; right: 14px; flex-direction: column; background: var(--plum-deep); border: 4px solid var(--ink); border-radius: 18px; padding: 8px; }
  .labmap.is-open { display: flex; }
  .beta__igor { max-height: 360px; }
  .evo__step:nth-child(2)::after { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .gallery { grid-template-columns: 1fr; }
  .rats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rat div { min-height: 0; padding: 6px 10px 10px; }
  .rat h3 { font-size: 18px; }
  .rat p { font-size: 13px; }
  .jelly { min-width: 0; width: 100%; }
  .jelly span { font-size: 21px; }
  .hero { display: flex; flex-direction: column; padding: 76px 0 70px; }
  .hero__copy { order: 1; margin: 0; padding: 0 20px; }
  .hero__cast { order: 2; position: relative; right: auto; left: auto; bottom: auto; width: 100%; opacity: 1; margin-top: 18px; }
  [dir="rtl"] .hero__cast { left: auto; }
  [dir="rtl"] .hero__copy { margin: 0; }
  .parchment { border-width: 42px 52px 39px 18px; border-image-width: 42px 52px 39px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}