/* ---------- Dev Lab (/dev-lab): tiles Game / Discord / Telegram and a block per direction ---------- */
.list-page main:has(.lab-tiles) { --game: #ff5bd6; --game2: #5ef0ff; --discord: #5865f2; --telegram: #2aabee; --lua: #8ea2ff; }
.lab-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(28px, 4vw, 48px); }

.tile {
  --acc: var(--electric);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; gap: 20px;
  min-height: 360px; padding: clamp(22px, 2.6vw, 34px); border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--acc) 38%, transparent);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01) 60%), var(--glass-solid);
  transition: transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease);
}
.tile:hover, .tile:focus-visible { transform: translateY(-5px); border-color: color-mix(in srgb, var(--acc) 75%, transparent); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--acc) 70%, transparent); }
.tile:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.tile__body { display: grid; align-content: start; gap: 12px; }
.tile__kicker { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--body); letter-spacing: .28em; color: color-mix(in srgb, var(--acc) 55%, #fff); }
.tile__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--acc); box-shadow: 0 0 24px -4px var(--acc); }
.tile__icon svg { width: 24px; height: 24px; }
.tile__title { font: 600 clamp(34px, 4vw, 54px)/1 var(--display); letter-spacing: -.035em; color: #fff; }
.tile__text { max-width: 46ch; color: var(--muted); font-size: 15px; }
.tile__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tile__tags li { padding: 5px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; color: #fff; border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.tile__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; font: 600 14px/1 var(--body); color: #fff; }
.tile__arr { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--acc) 30%, transparent); transition: transform .35s var(--ease), background .3s; }
.tile:hover .tile__arr { transform: translateX(4px); background: var(--acc); }
[dir="rtl"] .tile__arr, [dir="rtl"] .lab-strip .tile__arr { transform: scaleX(-1); }
[dir="rtl"] .tile:hover .tile__arr { transform: scaleX(-1) translateX(4px); }
.tile__art { position: relative; align-self: end; }

/* Game: the wide tile on top, a little arcade screen drawn from pixel sprites */
.tile--game { --acc: var(--game); grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: none; align-items: stretch; min-height: 380px;
  background:
    radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--game2) 22%, transparent), transparent 60%),
    radial-gradient(80% 90% at 0% 0%, color-mix(in srgb, var(--game) 26%, transparent), transparent 60%), var(--glass-solid); }
.tile--game .tile__title { background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--game) 70%, #fff), var(--game2)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--game) 45%, transparent)); }
.pixscene {
  position: relative; height: 100%; min-height: 260px; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  background: radial-gradient(120% 80% at 50% 0%, #1a0f4d, #070a26 70%);
  font: 700 12px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .14em; color: #fff;
}
.pixscene::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent), radial-gradient(1px 1px at 68% 14%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 84% 38%, #9fd8ff 50%, transparent), radial-gradient(1px 1px at 32% 46%, #fff 50%, transparent), radial-gradient(1px 1px at 52% 30%, #ffd1f3 50%, transparent); opacity: .8; }
.pixscene::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); pointer-events: none; }
.pixscene__hud { position: absolute; inset: 14px 16px auto; display: flex; justify-content: space-between; align-items: center; color: var(--game2); text-shadow: 0 0 10px color-mix(in srgb, var(--game2) 70%, transparent); z-index: 2; }
.pixscene__hp { display: flex; gap: 5px; color: var(--game); }
.pix { position: absolute; display: block; image-rendering: pixelated; z-index: 1; }
.pix--hp { position: static; width: 16px; height: auto; }
.pix--slime { width: 70px; left: 14%; bottom: 31%; color: #7cff6b; filter: drop-shadow(0 0 10px rgba(124, 255, 107, .55)); animation: pix-hop 1.6s steps(6) infinite; }
.pix--ship { width: 64px; right: 16%; bottom: 40%; color: var(--game2); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--game2) 70%, transparent)); animation: pix-float 3.2s ease-in-out infinite; }
.pix--coin { width: 26px; left: 46%; top: 30%; filter: drop-shadow(0 0 10px rgba(255, 211, 77, .7)); animation: pix-spin 1.2s steps(4) infinite; }
.pix--coin2 { width: 20px; left: 60%; top: 46%; filter: drop-shadow(0 0 10px rgba(255, 211, 77, .7)); animation: pix-spin 1.2s steps(4) .4s infinite; }
.pixscene__floor { position: absolute; left: -20%; right: -20%; bottom: 0; height: 32%;
  background: linear-gradient(transparent 0 calc(100% - 1px), color-mix(in srgb, var(--game) 80%, transparent) 0) 0 0 / 100% 18px, linear-gradient(90deg, transparent 0 calc(100% - 1px), color-mix(in srgb, var(--game) 80%, transparent) 0) 0 0 / 42px 100%;
  transform: perspective(240px) rotateX(58deg); transform-origin: 50% 100%; opacity: .55; mask-image: linear-gradient(transparent, #000 55%); -webkit-mask-image: linear-gradient(transparent, #000 55%); animation: pix-floor 1.2s linear infinite; }
.pixscene__start { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: #fff; text-shadow: 0 0 12px var(--game); animation: pix-blink 1.1s steps(2) infinite; z-index: 2; }
@keyframes pix-hop { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-18px) } }
@keyframes pix-float { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-10px, -12px) } }
@keyframes pix-spin { 0%, 100% { transform: scaleX(1) } 50% { transform: scaleX(.25) } }
@keyframes pix-blink { 50% { opacity: 0 } }
@keyframes pix-floor { to { background-position: 0 18px, 0 0 } }

/* Discord: a bot reply with an embed, as in the app */
.tile--discord { --acc: var(--discord); }
.dcmock { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: #313338; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7); font-size: 14px; }
.dcmock__cmd { justify-self: start; padding: 6px 10px; border-radius: 8px; background: #383a40; color: #dbdee1; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.dcmock__cmd span { color: #949cf7; margin-inline-end: 2px; }
.dcmock__msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.dcmock__av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--discord); color: #fff; }
.dcmock__av svg { width: 24px; height: 24px; }
.dcmock__name { font-weight: 700; color: #fff; }
.dcmock__name i { margin-inline-start: 4px; padding: 1px 5px; border-radius: 4px; font: 700 10px/1.4 var(--body); font-style: normal; background: var(--discord); vertical-align: 2px; }
.dcmock__embed { margin-top: 6px; padding: 10px 12px; border-radius: 6px; background: #2b2d31; border-inline-start: 4px solid var(--discord); }
.dcmock__embed b { color: #fff; }
.dcmock__embed p { color: #b5bac1; font-size: 13px; margin-top: 2px; }

/* Telegram: a booking chat with inline buttons */
.tile--telegram { --acc: var(--telegram); }
.tgmock { display: grid; gap: 8px; padding: 16px; border-radius: 18px; font-size: 14px; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7);
  background: radial-gradient(80% 60% at 20% 0%, rgba(42, 171, 238, .25), transparent 70%), #17212b; }
.tgmock__in, .tgmock__out { max-width: 82%; padding: 8px 12px; border-radius: 14px; color: #fff; }
.tgmock__in { justify-self: end; background: #2b5278; border-end-end-radius: 4px; }
.tgmock__out { justify-self: start; background: #182533; border: 1px solid rgba(255, 255, 255, .06); border-end-start-radius: 4px; }
.tgmock__btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 82%; }
.tgmock__btns span { padding: 7px 0; border-radius: 10px; text-align: center; font-weight: 600; color: #fff; background: rgba(42, 171, 238, .35); }

/* Lua for developers: a slim strip under the tiles */
.lab-strip { --acc: var(--lua); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 16px 20px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); background: var(--glass-solid); transition: border-color .3s, transform .35s var(--ease); }
.lab-strip:hover { border-color: color-mix(in srgb, var(--acc) 70%, transparent); transform: translateY(-2px); }
.lab-strip__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, transparent); }
.lab-strip__icon svg { width: 22px; height: 22px; }
.lab-strip b { font: 600 16px/1.2 var(--display); color: #fff; }
.lab-strip > span:not([class]) { color: var(--muted); font-size: 14px; }
.lab-strip .tile__arr { margin-inline-start: auto; }

/* Blocks with services */
.lab-sec { --acc: var(--electric); margin-top: clamp(56px, 7vw, 96px); scroll-margin-top: 96px; }
.lab-sec--game { --acc: var(--game); } .lab-sec--discord { --acc: var(--discord); } .lab-sec--telegram { --acc: var(--telegram); } .lab-sec--lua { --acc: var(--lua); }
.lab-sec__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 26px; }
.lab-sec__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: #fff; background: var(--acc); box-shadow: 0 0 30px -6px var(--acc); }
.lab-sec__icon svg { width: 30px; height: 30px; }
.lab-sec .eyebrow { margin-bottom: 8px; color: color-mix(in srgb, var(--acc) 50%, #fff); }
.lab-sec .h3 sup { font-size: 13px; opacity: .55; margin-inline-start: 6px; }
.lab-sec__text { max-width: 70ch; margin-top: 8px; color: var(--muted); }
.lab-sec .svc { border-color: color-mix(in srgb, var(--acc) 22%, rgba(150, 172, 255, .2)); background: linear-gradient(170deg, color-mix(in srgb, var(--acc) 12%, transparent), transparent 45%), var(--glass-solid); }
.lab-sec .svc:hover { border-color: color-mix(in srgb, var(--acc) 65%, transparent); box-shadow: 0 18px 44px -26px var(--acc); }
.lab-sec .svc footer { border-top-color: color-mix(in srgb, var(--acc) 22%, transparent); }

@media (max-width: 1100px) { .lab-sec .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .lab-tiles { grid-template-columns: 1fr; }
  .tile--game { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
  .pixscene { min-height: 220px; }
}
@media (max-width: 640px) {
  .lab-sec .svc__grid { grid-template-columns: 1fr; }
  .lab-sec__head { grid-template-columns: 1fr; }
  .lab-sec__icon { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .pix, .pixscene__floor, .pixscene__start { animation: none; }
  .tile, .tile__arr, .lab-strip { transition: none; }
}

/* Tools strip and block (green), several strips stack under the tiles */
.list-page main:has(.lab-tiles) { --tools: #3ddc97; }
.lab-strip--tools { --acc: var(--tools); }
.lab-sec--tools { --acc: var(--tools); }
.lab-strip + .lab-strip { margin-top: 10px; }
.lab-strip__n { margin-inline-start: auto; padding: 3px 9px; border-radius: 99px; font: 600 12px/1.4 var(--body); color: #fff; background: color-mix(in srgb, var(--acc) 22%, transparent); }
.lab-strip__n + .tile__arr { margin-inline-start: 0; }

/* ---------- Lua and Tools as full tiles (27.10): an editor with an OBS script and an extension popup ---------- */
.tile--lua { --acc: var(--lua); }
.tile--tools { --acc: var(--tools); }
.codemock { border-radius: 18px; overflow: hidden; background: #0d1117; border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7); text-align: left; }
.codemock__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #161b22; border-bottom: 1px solid rgba(255, 255, 255, .06); font: 600 12px/1 ui-monospace, Consolas, monospace; color: #8b949e; }
.codemock__bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3f47; }
.codemock__bar i:nth-child(1) { background: #ff5f57; } .codemock__bar i:nth-child(2) { background: #febc2e; } .codemock__bar i:nth-child(3) { background: #28c840; }
.codemock__bar span { margin-inline-start: 8px; }
.codemock__rec { margin-inline-start: auto; color: #ff5f57; font-weight: 700; animation: lab-rec 1.4s steps(2) infinite; }
.codemock__code { margin: 0; padding: 14px 16px 16px; font: 500 13px/1.6 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #c9d1d9; white-space: pre; overflow: hidden; }
.codemock__code .k { color: #ff7b72; } .codemock__code .f { color: #d2a8ff; } .codemock__code .s { color: #a5d6ff; } .codemock__code .n { color: #79c0ff; }
.codemock__cursor { display: inline-block; width: 8px; height: 15px; margin-inline-start: 4px; vertical-align: -2px; background: var(--lua); animation: lab-rec 1s steps(2) infinite; }
.toolmock { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7);
  background: radial-gradient(80% 70% at 85% 0%, color-mix(in srgb, var(--tools) 22%, transparent), transparent 70%), #121826; min-height: 180px; }
.toolmock__bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.toolmock__url { flex: 1; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, .08); }
.toolmock__ext { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #0b1a14; background: var(--tools); box-shadow: 0 0 16px -2px var(--tools); }
.toolmock__ext svg { width: 15px; height: 15px; }
.toolmock__pop { position: absolute; inset-inline-end: 12px; top: 46px; width: min(260px, calc(100% - 24px)); padding: 12px; border-radius: 14px; background: #1b2232; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .8); animation: lab-pop .6s var(--ease) both; }
.toolmock__title { font: 700 13px/1.2 var(--display); color: #fff; margin-bottom: 8px; }
.toolmock__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; color: #c9d4e8; border-top: 1px solid rgba(255, 255, 255, .06); }
.toolmock__sw { position: relative; flex: none; width: 32px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, .16); transition: background .3s; }
.toolmock__sw::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .3s; }
.toolmock__row--0 .toolmock__sw, .toolmock__row--1 .toolmock__sw { background: var(--tools); }
.toolmock__row--0 .toolmock__sw::after, .toolmock__row--1 .toolmock__sw::after { transform: translateX(14px); }
[dir="rtl"] .toolmock__row--0 .toolmock__sw::after, [dir="rtl"] .toolmock__row--1 .toolmock__sw::after { transform: translateX(-14px); }
.toolmock__row--2 .toolmock__sw { animation: lab-sw-bg 3.2s steps(1) infinite; }
.toolmock__row--2 .toolmock__sw::after { animation: lab-sw 3.2s steps(1) infinite; }
.toolmock__row--2 span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 7px; border-radius: 50%; background: #3a4256; vertical-align: 1px; animation: lab-bulb 3.2s steps(1) infinite; }
@keyframes lab-rec { 50% { opacity: .25 } }
@keyframes lab-pop { from { opacity: 0; transform: translateY(8px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes lab-sw { 0% { transform: none } 50% { transform: translateX(14px) } }
@keyframes lab-sw-bg { 0% { background: rgba(255, 255, 255, .16) } 50% { background: var(--tools) } }
@keyframes lab-bulb { 0% { background: #3a4256; box-shadow: none } 50% { background: #ffd34d; box-shadow: 0 0 10px #ffd34d } }
[dir="rtl"] .toolmock__row--2 .toolmock__sw::after { animation-name: lab-sw-rtl; }
@keyframes lab-sw-rtl { 0% { transform: none } 50% { transform: translateX(-14px) } }
@media (max-width: 860px) { .toolmock { min-height: 190px; } }
@media (prefers-reduced-motion: reduce) { .codemock__rec, .codemock__cursor, .toolmock__pop, .toolmock__row--2 .toolmock__sw, .toolmock__row--2 .toolmock__sw::after, .toolmock__row--2 span::before { animation: none; } }
@media (max-width: 640px) { .codemock__code { font-size: 11px; padding: 12px; } }
/* The popup sits in the flow so the mock grows with it (no overflow at any width) */
.toolmock { min-height: 0; }
.toolmock__pop { position: relative; inset: auto; top: auto; margin: 12px 12px 14px auto; }
[dir="rtl"] .toolmock__pop { margin: 12px auto 14px 12px; }