/* ════════════════════════════════════════════════════════════════
   KinApps — home page (/ and /<lang>/), on top of site.css.
   Hero "showcase": a phone that launches our apps one by one, while
   the copy on the left follows the app on screen (assets/js/home.js).
   Colours come from the site tokens in site.css; each app adds only
   its own accent (--app) and its own in-app palette inside the phone.
   The header language picker and the footer language links are shared
   with Products / About and live in site.css.
   ════════════════════════════════════════════════════════════════ */
.products-lead { max-width: 640px; margin-top: 8px; }

/* ══ Showcase hero ══ */
.showcase {
  --dwell: 6000ms;
  position: relative; background: var(--c-surface); padding: 48px 0 64px; overflow: hidden;
}
.showcase::before {           /* soft halo behind the phone, in the site's blue and red */
  content: ""; position: absolute; pointer-events: none;
  width: 760px; height: 760px; inset-inline-end: -90px; top: 50%; transform: translateY(-50%);
  background:
    radial-gradient(closest-side at 42% 45%, rgba(22, 84, 240, .17), rgba(22, 84, 240, 0) 72%),
    radial-gradient(closest-side at 64% 70%, rgba(255, 112, 113, .16), rgba(255, 112, 113, 0) 70%);
}
.showcase-inner {
  position: relative; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; column-gap: 48px;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas: ". device" "kicker device" "slides device" "controls device" ". device";
}
.sc-slide[data-app="icleanse"], .sc-tab[data-app="icleanse"] { --app: #8b7aff; }
.sc-slide[data-app="fnt"], .sc-tab[data-app="fnt"] { --app: #2fbf96; }
.sc-slide[data-app="total"], .sc-tab[data-app="total"] { --app: #e02a30; }
.sc-slide[data-app="arrowmaze"], .sc-tab[data-app="arrowmaze"] { --app: #2bb8d8; }

.sc-kicker {
  grid-area: kicker; justify-self: start;
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px;
  font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--c-text); letter-spacing: .01em;
}
.sc-kicker .dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--c-accent-1), var(--c-accent-2)); box-shadow: var(--sh-dot);
}

/* slides share one grid cell, so the block keeps the height of the longest one */
.sc-slides { grid-area: slides; display: grid; }
.sc-slide { grid-area: 1 / 1; min-width: 0; visibility: hidden; transition: visibility 0s linear .5s; }
.sc-slide.is-active, .sc-slide.is-leaving { visibility: visible; transition: none; }
.sc-slide > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .35s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.sc-slide.is-active > * { opacity: 1; transform: none; }
.sc-slide.is-active > :nth-child(1) { transition-delay: .08s; }
.sc-slide.is-active > :nth-child(2) { transition-delay: .14s; }
.sc-slide.is-active > :nth-child(3) { transition-delay: .2s; }
.sc-slide.is-active > :nth-child(4) { transition-delay: .26s; }
.sc-slide.is-leaving > * { opacity: 0; transform: translateY(-14px); transition-delay: 0s; }

.sc-cat {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted);
}
.sc-cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--app); }
.sc-name {
  margin: 10px 0 16px; font-size: 64px; font-weight: 700; line-height: 1.05;
  letter-spacing: -.025em; color: var(--c-text); overflow-wrap: anywhere;
}
.sc-desc { max-width: 520px; font-size: 18px; line-height: 30px; color: var(--c-text-muted); }
.sc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 30px; }
.sc-actions .appstore-btn { height: 68px; padding: 0 22px; gap: 14px; }
.sc-actions .appstore-btn .ico { width: 38px; height: 38px; }
.sc-more { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--c-primary); }
.sc-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.sc-more:hover svg { transform: translateX(4px); }
[dir="rtl"] .sc-more svg { transform: scaleX(-1); }
[dir="rtl"] .sc-more:hover svg { transform: scaleX(-1) translateX(4px); }

/* app picker + pause */
.sc-controls { grid-area: controls; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
html:not(.js) .sc-controls { display: none; }
.sc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-tab {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 10px 8px; border-radius: 16px; overflow: hidden;
  font-size: 14px; font-weight: 600; color: var(--c-text-muted);
  transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}
[dir="rtl"] .sc-tab { padding: 8px 8px 10px 14px; }
.sc-tab img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
.sc-tab:hover { color: var(--c-text-strong); background: rgba(255, 255, 255, .55); }
.sc-tab.is-active { color: var(--c-text); background: var(--c-white); box-shadow: var(--sh-card); }
.sc-prog { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .06); opacity: 0; }
.sc-tab.is-active .sc-prog { opacity: 1; }
.sc-prog i { display: block; height: 100%; border-radius: inherit; background: var(--app); transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .sc-prog i { transform-origin: right center; }
.showcase.is-playing .sc-tab.is-active .sc-prog i { animation: sc-prog var(--dwell) linear forwards; }
.showcase.is-held .sc-prog i, .showcase.is-stopped .sc-prog i { animation-play-state: paused; }
@keyframes sc-prog { to { transform: scaleX(1); } }
.sc-pause {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: inline-grid; place-items: center; color: var(--c-text-strong);
  background: var(--c-white); box-shadow: var(--sh-card); transition: transform .15s ease;
}
.sc-pause:hover { transform: translateY(-1px); }
.sc-pause svg { width: 16px; height: 16px; fill: currentColor; }
.sc-pause .i-play, .showcase.is-stopped .sc-pause .i-pause { display: none; }
.showcase.is-stopped .sc-pause .i-play { display: block; }

/* ══ The phone ══ (fixed 320×664 design; scaled with zoom on small screens) */
.device-wrap { grid-area: device; align-self: center; display: flex; justify-content: center; padding: 8px 0; }
.device {
  position: relative; width: 320px; height: 664px; flex-shrink: 0; padding: 12px; border-radius: 54px;
  background: linear-gradient(150deg, #34353b, #121316 38%, #0b0c0f);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .09),
    inset 0 0 0 7px #0a0a0c,
    0 50px 90px -24px rgba(16, 38, 110, .42),
    0 30px 60px -30px rgba(0, 0, 0, .5);
}
.device::before, .device::after { content: ""; position: absolute; width: 3px; background: #1d1e22; }
.device::before { left: -3px; top: 150px; height: 58px; border-radius: 2px 0 0 2px; box-shadow: 0 74px 0 #1d1e22; }
.device::after { right: -3px; top: 196px; height: 92px; border-radius: 0 2px 2px 0; }
.device-island { position: absolute; z-index: 6; top: 19px; left: 50%; width: 94px; height: 29px; margin-left: -47px; border-radius: 20px; background: #000; }
.device-screen {
  position: relative; width: 296px; height: 640px; border-radius: 42px; overflow: hidden;
  background: #0b0b10; isolation: isolate; transform: translateZ(0);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, var(--font);
}
.scr-status {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 46px; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 0 36px;
  color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .01em;
}
.scr-status .sys { display: flex; align-items: center; gap: 5px; }
.scr-status svg { height: 11px; width: auto; fill: currentColor; }
.scr-homebar { position: absolute; z-index: 5; bottom: 8px; left: 50%; width: 112px; height: 4px; margin-left: -56px; border-radius: 4px; background: rgba(255, 255, 255, .75); pointer-events: none; }

/* home screen */
.scr-home {
  position: absolute; inset: 0; padding: 62px 20px 34px;
  display: flex; flex-direction: column; align-items: center;
  background:
    radial-gradient(120% 55% at 90% 100%, rgba(255, 112, 113, .55), rgba(255, 112, 113, 0) 62%),
    radial-gradient(90% 45% at 0% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%),
    linear-gradient(165deg, #2f6bf6, #1654f0 55%, #0e3fc2);
  transition: transform .6s cubic-bezier(.32, .72, 0, 1), filter .6s ease;
}
.device.is-app .scr-home { transform: scale(1.1); filter: blur(3px) brightness(.8); }
.home-widget {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px;
  border-radius: 24px; color: #fff;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22);
}
.home-widget img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.home-widget b { display: block; font-size: 17px; font-weight: 700; line-height: 1.2; }
.home-widget span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; opacity: .85; }
.home-grid { margin: auto 0; display: grid; grid-template-columns: repeat(2, 92px); justify-content: center; gap: 24px 36px; }
.home-app { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font-size: 12px; font-weight: 500; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.home-app img { width: 74px; height: 74px; border-radius: 18px; box-shadow: 0 10px 24px rgba(4, 20, 80, .35); transition: transform .18s ease, filter .18s ease; }
.home-app.is-tap img { transform: scale(.86); filter: brightness(.75); }
.home-dots { display: flex; gap: 7px; }
.home-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.home-dots i.on { background: #fff; }

/* app layers: open from the tapped icon (transform-origin set by home.js) */
.scr-app {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: 42px;
  opacity: 0; visibility: hidden; transform: scale(.25);
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transition: transform .5s cubic-bezier(.32, .72, 0, 1), opacity .3s ease .12s, visibility 0s linear .5s;
}
.scr-app.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: transform .6s cubic-bezier(.32, .72, 0, 1), opacity .22s ease, visibility 0s;
}
html:not(.js) .scr-app.app-icleanse { opacity: 1; visibility: visible; transform: none; }
html:not(.js) .scr-home { filter: blur(3px); }

/* — iCleanse (dark dashboard; from the iCleanse landing) — */
.app-icleanse { background: #0b0b14; color: #fff; }
.ic-body { height: 100%; padding: 52px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.ic-nav { padding: 2px 4px 4px; font-size: 22px; font-weight: 800; letter-spacing: -.6px; }
.ic-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); }
.ic-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ic-head { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .92); }
.ic-score { font-size: 16px; font-weight: 800; letter-spacing: -.4px; color: #5acba8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ic-score small { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .38); }
.ic-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ic-bar i { display: block; height: 100%; width: 72%; border-radius: inherit; background: linear-gradient(90deg, #f5c26b, #5acba8); transition: width 1.3s cubic-bezier(.2, .8, .2, 1); }
[dir="rtl"] .ic-bar i { background: linear-gradient(270deg, #f5c26b, #5acba8); }
.ic-cap { font-size: 10.5px; line-height: 1.4; color: rgba(255, 255, 255, .42); }
.ic-big {
  font-size: 18px; font-weight: 800; letter-spacing: -.6px; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #b5aaff, #8b7aff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ic-break { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.ic-li { display: flex; align-items: center; gap: 9px; font-size: 11.5px; }
.ic-li .ico { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: inline-grid; place-items: center; color: #b5aaff; background: rgba(139, 122, 255, .14); }
.ic-li .lbl { color: rgba(255, 255, 255, .72); font-weight: 500; }
.ic-li .val { margin-inline-start: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ic-body svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ic-clean { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; margin-top: 2px; }
.ic-link { font-size: 11px; font-weight: 700; color: #b5aaff; }
.ic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ic-tile { display: flex; flex-direction: column; gap: 5px; min-height: 92px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); }
.ic-tile .ico { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; }
.ic-tile .ico svg { width: 16px; height: 16px; stroke-width: 1.5; }
.ic-tile b { font-size: 11.5px; font-weight: 700; line-height: 1.15; }
.ic-tile small { font-size: 9.5px; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, .42); }
.ic-tile .sz { margin-top: auto; font-size: 11.5px; font-weight: 800; color: #b5aaff; font-variant-numeric: tabular-nums; }
.ico-lavender { background: rgba(139, 122, 255, .14); color: #b5aaff; }
.ico-green { background: rgba(90, 203, 168, .14); color: #5acba8; }
.ico-gold { background: rgba(245, 194, 107, .14); color: #f5c26b; }
.ico-blue { background: rgba(79, 176, 255, .14); color: #4fb0ff; }

/* — Fonts & Tags (the app's dark green "Modern" look) — */
.app-fnt { background: #0e1b18; color: #fff; }
.fn-body { height: 100%; padding: 54px 16px 16px; display: flex; flex-direction: column; }
.fn-top { display: flex; align-items: center; gap: 8px; }
.fn-brand { flex: 1; font-size: 13px; font-weight: 700; white-space: nowrap; }
.fn-pen { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #2a3b37; }
.fn-pen svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.fn-pill { height: 30px; padding: 0 12px; border-radius: 15px; display: inline-flex; align-items: center; border: 1px solid #2a3b37; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.fn-title { margin: 16px 0 12px; font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif; font-size: 32px; line-height: 1.1; letter-spacing: -.01em; }
.fn-input {
  height: 42px; border-radius: 13px; background: #7ad9bc; color: #0e1b18;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  font-size: 15px; font-weight: 600;
}
.fn-caret { width: 2px; height: 18px; border-radius: 1px; background: #0e1b18; animation: blink 1s steps(1) infinite; }
.fn-search {
  height: 38px; margin: 10px 0 12px; padding: 0 14px; border-radius: 19px;
  background: rgba(28, 44, 40, .9); display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: rgba(255, 255, 255, .5);
}
.fn-search svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.fn-list { display: flex; flex-direction: column; gap: 7px; }
.fn-row {
  height: 52px; padding: 0 14px; border-radius: 14px; background: #152420;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.app-fnt.is-open .fn-row, html:not(.js) .fn-row { opacity: 1; transform: none; }
.app-fnt.is-open .fn-row:nth-child(2) { transition-delay: .06s; }
.app-fnt.is-open .fn-row:nth-child(3) { transition-delay: .12s; }
.app-fnt.is-open .fn-row:nth-child(4) { transition-delay: .18s; }
.app-fnt.is-open .fn-row:nth-child(5) { transition-delay: .24s; }
.app-fnt.is-open .fn-row:nth-child(6) { transition-delay: .3s; }
.app-fnt.is-open .fn-row:nth-child(7) { transition-delay: .36s; }
.fn-s {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; direction: ltr;
  font-family: 'Apple Symbols', 'Segoe UI Symbol', 'Cambria Math', 'Noto Sans Math', 'STIX Two Math', sans-serif;
  font-size: 20px; line-height: 1.2; letter-spacing: 0;
}
.fn-tg { position: relative; width: 38px; height: 23px; flex-shrink: 0; border-radius: 12px; background: #2b3a37; transition: background .3s ease; }
.fn-tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.fn-tg.on { background: #5fd1ae; }
.fn-tg.on::after { transform: translateX(15px); }
[dir="rtl"] .fn-tg::after { left: auto; right: 2px; }
[dir="rtl"] .fn-tg.on::after { transform: translateX(-15px); }

/* — TOTAL (always-dark workout screen; from the TOTAL landing, scaled to this phone) — */
.app-total {
  --acc: #e02a30; --glow: rgba(224, 42, 48, .18); --dim: rgba(244, 242, 238, .6); --mute: rgba(244, 242, 238, .4);
  --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .15); --goal: #43b581; --last: #e6b53c;
  --disp: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: #0c0c0e; color: #f4f2ee; font-size: 11px; line-height: 1.3;
}
.tt-body { padding: 50px 13px 14px; }
.tt-top { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 8px; }
.tt-btn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #161619; color: var(--dim); font-size: 14px; }
.tt-timer { font-family: var(--mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }
.tt-stepper { display: flex; justify-content: center; gap: 5px; margin: 2px 0 10px; }
.tt-stepper i, .tt-ex .dots i { position: relative; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line2); }
.tt-stepper i.done, .tt-ex .dots i.done { background: var(--goal); border-color: var(--goal); }
.tt-stepper i.cur, .tt-ex .dots i.cur { border-color: var(--acc); box-shadow: 0 0 0 2.5px var(--glow); }
.tt-stepper i.cur::after, .tt-ex .dots i.cur::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: var(--acc); }
.tt-name { font-family: var(--disp); font-size: 32px; line-height: 1.05; letter-spacing: 1px; text-transform: uppercase; text-align: center; }
.tt-sub { margin-top: 2px; font-family: var(--mono); font-size: 9px; color: var(--mute); text-align: center; }
.tt-ctx { display: flex; margin: 11px 0; }
.tt-ctx > div { flex: 1; text-align: center; }
.tt-ctx > div + div { border-inline-start: 1px solid var(--line); }
.tt-ctx .k { font-size: 7.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--mute); }
.tt-ctx .v { margin-top: 2px; font-family: var(--disp); font-size: 17px; color: var(--dim); }
.tt-inputs { display: flex; gap: 8px; }
.tt-field { flex: 1; padding: 10px 8px; border-radius: 12px; text-align: center; background: #161619; border: 1px solid var(--line); }
.tt-field.focus { border-color: var(--acc); box-shadow: 0 0 0 2.5px var(--glow); }
.tt-field .k { font-size: 8px; text-transform: uppercase; letter-spacing: .8px; color: var(--mute); }
.tt-field .big { font-family: var(--disp); font-size: 46px; line-height: 1; font-variant-numeric: tabular-nums; direction: ltr; }
.tt-field .cur { display: inline-block; width: 2.5px; height: 34px; margin-left: 2px; vertical-align: middle; background: var(--acc); animation: blink 1s steps(1) infinite; }
.tt-field .unit { font-family: var(--mono); font-size: 9px; color: var(--mute); }
.tt-chips { display: flex; gap: 5px; margin-top: 10px; direction: ltr; }
.tt-chips span { flex: 1; padding: 6px 0; border-radius: 8px; border: 1px solid var(--line); text-align: center; font-family: var(--mono); font-size: 9.5px; color: var(--dim); }
.tt-chips .on { background: var(--acc); border-color: var(--acc); color: #fff; }
.tt-actions { display: flex; gap: 8px; margin-top: 10px; }
.tt-actions .skip { width: 86px; height: 38px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--line2); color: var(--dim); font-size: 11px; font-weight: 600; }
.tt-actions .log { flex: 1; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--acc); color: #fff; font-family: var(--disp); font-size: 17px; letter-spacing: 1px; box-shadow: 0 6px 16px -8px rgba(224, 42, 48, .7); }
.tt-rest { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--line2); border-radius: 12px; }
.tt-rest .rl { font-size: 9px; text-transform: uppercase; letter-spacing: .8px; color: var(--mute); }
.tt-rest .rv { font-family: var(--disp); font-size: 22px; color: var(--goal); font-variant-numeric: tabular-nums; direction: ltr; }
.tt-card { margin-top: 10px; padding: 10px 12px 4px; border-radius: 14px; background: #161619; border: 1px solid var(--line); }
.tt-lbl { font-size: 8.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); padding-bottom: 4px; }
.tt-ex { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line); }
.tt-ex .tag { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; display: grid; place-items: center; background: #1f1f24; font-family: var(--disp); font-size: 12px; }
.tt-ex .tag.s { color: var(--acc); } .tt-ex .tag.b { color: var(--goal); } .tt-ex .tag.d { color: var(--last); }
.tt-ex .en { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tt-ex .en b { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-ex .en small { font-family: var(--mono); font-size: 8.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-ex .dots { display: flex; gap: 3px; }
.tt-ex .dots i { width: 6px; height: 6px; }

/* — Arrow Maze (real gameplay screenshot) — */
.app-arrowmaze { background: linear-gradient(#211a40, #0d0a1c); }
.app-arrowmaze img { width: 100%; height: 100%; object-fit: cover; }

@keyframes blink { 50% { opacity: 0; } }

/* ══ Layout: tablet & phone ══ */
@media (max-width: 1100px) {
  .sc-name { font-size: 54px; }
  .showcase-inner { column-gap: 32px; }
}
@media (max-width: 900px) {
  .showcase { padding: 32px 0 48px; }
  .showcase::before { inset-inline-end: auto; left: 50%; top: 300px; transform: translateX(-50%); width: 560px; height: 560px; }
  .showcase-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "kicker" "device" "slides" "controls";
    text-align: center;
  }
  .sc-kicker { justify-self: center; margin-bottom: 20px; font-size: 16px; }
  .device-wrap { margin-bottom: 24px; }
  .device { zoom: .82; }
  .sc-name { font-size: 42px; margin: 8px 0 12px; }
  .sc-desc { margin-inline: auto; font-size: 16px; line-height: 27px; }
  .sc-actions { justify-content: center; margin-top: 24px; }
  .sc-controls { justify-content: center; margin-top: 28px; }
  .sc-tabs { justify-content: center; }
}
@media (max-width: 600px) {
  .device { zoom: .7; }
  .sc-name { font-size: 36px; }
  .sc-tab { padding: 6px; gap: 0; }
  [dir="rtl"] .sc-tab { padding: 6px; }
  .sc-tab-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .sc-prog { left: 8px; right: 8px; bottom: 2px; }
  .sc-actions { gap: 14px 22px; }
  .sc-actions .appstore-btn { height: 60px; }
}

/* ══ Reduced motion: no autoplay (home.js), instant switches ══ */
@media (prefers-reduced-motion: reduce) {
  .sc-slide > *, .scr-app, .scr-home, .fn-row, .ic-bar i, .home-app img { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .fn-caret, .tt-field .cur { animation: none; }
  .scr-app { transform: none; }
}