/* Páginas dos jogos sociais (/stop, /impostor) e vitrine /galera: jogo grande + como jogar, regras, ranking e FAQ. Só carrega com $page === 'stop'. Cor do jogo em --sc. */
.stp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.stp > * { margin: 0; }
.stp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 18px; }
.stp-kicker { display: inline-block; text-decoration: none; padding: 3px 10px; color: var(--ink); background: var(--lime); border: 2px solid var(--ink); border-radius: 99px; font: 800 11px/1.3 var(--ui); letter-spacing: .1em; }
.stp-title h1 { margin: 6px 0 2px; font: 800 clamp(32px, 6vw, 52px)/1 var(--display); color: var(--ink); letter-spacing: -.02em; }
.stp-title h1 span { color: var(--sc, #FF3B5C); }
.stp-title p { margin: 0; max-width: 620px; color: var(--muted); font-weight: 600; }
.stp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stp-chips span { padding: 5px 12px; background: var(--card); border: 2px solid var(--ink); border-radius: 99px; box-shadow: 0 3px 0 var(--ink); font: 800 13px/1.2 var(--ui); color: var(--ink); white-space: nowrap; }
.stp-invite { padding: 10px 16px; color: var(--ink); background: var(--lime); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); font-weight: 700; }
.stp-stage { position: relative; height: clamp(560px, calc(100vh - 230px), 860px); height: clamp(560px, calc(100dvh - 230px), 860px); overflow: hidden; background: var(--ink); border-radius: 26px; box-shadow: var(--sticker); }
.stp-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.stp-stage.pseudo-fs { position: fixed; inset: 0; z-index: 2147483000; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
.stp-stage:fullscreen, .stp-stage.pseudo-fs { border-radius: 0; }
.stp-stage:fullscreen iframe, .stp-stage.pseudo-fs iframe { height: calc(100% - 44px - env(safe-area-inset-bottom, 0px)); }
.stp-exit { position: absolute; left: 0; right: 0; bottom: 0; height: calc(44px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); color: #fff; background: #120b26; border: 0; font: 800 15px var(--ui); cursor: pointer; }
.stp-stage:fullscreen .stp-exit, .stp-stage.pseudo-fs .stp-exit { display: block !important; }
.stp-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: -4px; }
.stp-ghost { background: var(--card); color: var(--ink); }
.stp h2 { margin: 0 0 12px; font: 800 26px/1.1 var(--display); color: var(--ink); }
.stp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.stp-steps li { position: relative; padding: 18px 16px 16px; background: var(--card); border-radius: 22px; box-shadow: var(--sticker); }
.stp-steps li:nth-child(1) { --c: var(--lime); } .stp-steps li:nth-child(2) { --c: var(--cyan); } .stp-steps li:nth-child(3) { --c: #FF3B5C; } .stp-steps li:nth-child(4) { --c: var(--gold); }
.stp-steps b { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; color: var(--ink); background: var(--c); border: 3px solid var(--ink); border-radius: 14px; font: 800 22px var(--display); transform: rotate(-6deg); }
.stp-steps li:nth-child(3) b { color: #fff; }
.stp-steps h3 { margin: 0 0 4px; font: 800 19px/1.15 var(--display); color: var(--ink); }
.stp-steps p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.stp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stp-card { padding: 18px; background: var(--card); border-radius: 22px; box-shadow: var(--sticker); color: var(--ink); }
.stp-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.stp-card p b { color: var(--ink); }
.stp-note { margin-top: 10px !important; font-size: 14px; }
.stp-pts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-weight: 700; }
.stp-pts li { display: flex; align-items: center; gap: 10px; }
.stp-pts span { display: grid; place-items: center; flex: none; width: 46px; height: 34px; border: 2px solid var(--ink); border-radius: 10px; font: 800 18px var(--display); }
.stp-pts .p10 { background: var(--lime); } .stp-pts .p5 { background: var(--gold); } .stp-pts .p0 { background: var(--soft); }
.stp-packs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stp-packs li { display: flex; align-items: center; gap: 10px; }
.stp-packs i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--soft); border: 2px solid var(--ink); border-radius: 12px; font-style: normal; font-size: 20px; }
.stp-packs b { display: block; } .stp-packs small { color: var(--muted); font-size: 13px; }
.stp-live { background: linear-gradient(135deg, #7C4DFF, #FF4FA3); }
.stp-live h2, .stp-live p, .stp-live p b { color: #fff; }
.stp-top { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.stp-top li { display: grid; grid-template-columns: 28px 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; background: var(--soft); border: 2px solid var(--ink); border-radius: 14px; }
.stp-top img { border: 2px solid var(--ink); border-radius: 50%; background: #fff; }
.stp-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stp-top small { color: var(--muted); font-weight: 700; }
.stp-faq details { margin-bottom: 8px; background: var(--card); border: 2px solid var(--ink); border-radius: 16px; }
.stp-faq summary { padding: 14px 16px; font-weight: 800; color: var(--ink); cursor: pointer; }
.stp-faq details p { margin: 0; padding: 0 16px 14px; color: var(--muted); line-height: 1.45; }
@media (max-width: 900px) { .stp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .stp-grid, .stp-steps { grid-template-columns: minmax(0, 1fr); }
  .stp-stage { height: calc(100dvh - 190px); min-height: 520px; border-radius: 20px; }
  .stp-chips span { font-size: 12px; padding: 4px 10px; }
  .stp-bar .btn { flex: 1 1 auto; }
}

.stp-packs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
/* cartões dos jogos sociais (vitrine /galera e "Mais jogos para jogar com a galera") */
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.gl-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; color: var(--ink); background: var(--card); border-radius: 24px; box-shadow: var(--sticker); text-decoration: none; transition: translate .15s var(--ease-pop), box-shadow .15s; }
.gl-card:hover { translate: 0 -3px; box-shadow: 0 0 0 3px var(--ink), 6px 9px 0 3px var(--sc, var(--violet)); }
.gl-card img { width: 120px; height: 120px; object-fit: cover; border: 3px solid var(--ink); border-radius: 18px; background: var(--soft); }
.gl-card span { display: grid; gap: 4px; min-width: 0; }
.gl-card b { font: 800 21px/1.1 var(--display); }
.gl-card small { color: var(--muted); font-size: 14px; line-height: 1.35; }
.gl-card em { justify-self: start; padding: 2px 10px; font: 800 12px/1.4 var(--ui); font-style: normal; color: #fff; background: var(--sc, var(--violet)); border: 2px solid var(--ink); border-radius: 99px; }
.gl-card .btn { justify-self: start; margin-top: 4px; padding: 8px 14px; font-size: 14px; font-style: normal; pointer-events: none; }
.gl-grid.big .gl-card { grid-template-columns: 180px minmax(0, 1fr); padding: 16px; }
.gl-grid.big .gl-card img { width: 180px; height: 180px; }
.gl-card.soon, .gl-grid.big .gl-card.soon { grid-template-columns: 1fr !important; min-height: 150px; place-content: center; text-align: center; background: repeating-linear-gradient(45deg, var(--card) 0 16px, var(--soft) 16px 32px); box-shadow: 0 0 0 3px var(--ink); }
.gl-card.soon:hover { translate: none; }
.gl-hero { display: grid; justify-items: start; gap: 8px; padding: clamp(18px, 4vw, 34px); color: #fff; border-radius: 28px; box-shadow: var(--sticker);
  background: radial-gradient(circle at 90% 10%, rgb(198 244 50 / .35), transparent 40%), radial-gradient(circle at 0 100%, rgb(255 59 92 / .45), transparent 50%), linear-gradient(135deg, #7C4DFF, #4b23c9); }
.gl-hero h1 { margin: 0; font: 800 clamp(34px, 7vw, 60px)/1 var(--display); letter-spacing: -.02em; }
.gl-hero h1 span { color: var(--lime); }
.gl-hero p { margin: 0; max-width: 680px; font-size: 17px; font-weight: 600; opacity: .95; }
.gl-hero .stp-chips span { box-shadow: 0 3px 0 var(--ink); }
.stp-others h2 { margin-bottom: 12px; }
.gl-grid + .stp-how { margin-top: 10px; }
@media (max-width: 640px) {
  .stp-packs.two { grid-template-columns: minmax(0, 1fr); }
  .gl-card, .gl-grid.big .gl-card { grid-template-columns: 96px minmax(0, 1fr); padding: 10px; }
  .gl-card img, .gl-grid.big .gl-card img { width: 96px; height: 96px; }
  .gl-card b { font-size: 18px; }
}

/* ícones SVG nas páginas dos jogos sociais (v1.76) */
.stp-chips span { display: inline-flex; align-items: center; gap: 5px; }
.stp-chips svg { flex: none; }
.stp-invite { display: flex; align-items: center; gap: 8px; }
.stp-exit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.stp h2 svg { vertical-align: -.12em; }
.stp-live h2 svg { color: var(--lime); }
.gl-card b { display: flex; align-items: center; gap: 6px; }
.gl-card b svg { flex: none; color: var(--sc, var(--violet)); }
.gl-card em { display: inline-flex; align-items: center; gap: 4px; }
.gl-card .btn { display: inline-flex; align-items: center; gap: 6px; }
.stp-packs i svg { display: block; }

/* cartões da vitrine com dois botões (Criar sala / Jogo rápido, v1.82.0) */
.gl-card.gl-act .gl-link { color: inherit; text-decoration: none; }
.gl-card.gl-act .btn { pointer-events: auto; margin-top: 0; }
.gl-btns { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.gl-quick { background: var(--cyan); color: var(--ink); box-shadow: 0 4px 0 var(--ink); }

/* ---------- Jogos da galera em "modo app" (Configurações > Funções do site > social_app_page) ----------
   O cabeçalho do site vira a barra do jogo (layout.php com $app: .app-dock) e o jogo ocupa o resto da tela.
   As abas abrem janelinhas (.sapp-panel) por cima do jogo; fechadas ficam com visibility: hidden (o texto continua no HTML para o Google). */
body.app-mode { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
body.app-mode main { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; }
body.app-mode .flash { flex: none; }
.app-dock { position: relative; top: auto; flex: none; width: 100%; }
.app-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; padding-left: 12px; border-left: 2px solid var(--soft); }
.app-id img { width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 12px; object-fit: cover; flex: none; }
.app-name { margin: 0; font: 800 19px/1.1 var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.app-tabs { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.app-tabs::-webkit-scrollbar { display: none; }
.app-tab { flex: none; padding: 9px 14px; border: 0; border-radius: 99px; background: none; color: var(--ink); font: 700 15px var(--ui); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.app-tab:hover { background: var(--bg); }
.app-tab[aria-expanded="true"] { background: var(--ink); color: #fff; }
.app-dock .dock-nav { gap: 8px; margin-left: 0; }
.app-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: transform .12s, background .15s; }
.app-btn:hover { background: var(--lime); }
.app-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.sapp { position: relative; flex: 1 1 auto; min-height: 0; display: flex; max-width: 1600px; margin: 0 auto; width: 100%; }
.sapp .sapp-stage { flex: 1 1 auto; height: auto; min-height: 0; border-radius: 24px; }
.sapp .sapp-stage.pseudo-fs { height: 100vh; height: 100dvh; border-radius: 0; }
.sapp-shade { position: fixed; inset: 0; z-index: 38; background: rgb(30 19 56 / .45); }
.sapp-shade[hidden] { display: none; }
.sapp-panel { position: fixed; z-index: 39; top: var(--app-top, 96px); right: clamp(10px, 2vw, 24px); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: min(460px, calc(100vw - 20px)); display: flex; flex-direction: column; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 24px; box-shadow: -6px 6px 0 var(--ink); visibility: hidden; opacity: 0; transform: translateX(28px); transition: opacity .2s, transform .25s var(--ease-pop), visibility 0s .25s; }
.sapp-panel.open { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .25s var(--ease-pop), visibility 0s; }
.sapp-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 12px 20px; border-bottom: 2px solid var(--soft); }
.sapp-panel h2 { margin: 0; font: 800 24px/1.1 var(--display); color: var(--ink); }
.sapp-x { display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; color: var(--ink); background: var(--bg); border: 2px solid var(--ink); border-radius: 12px; cursor: pointer; }
.sapp-x:hover { background: var(--lime); }
.sapp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 20px; display: grid; gap: 14px; align-content: start; }
.sapp-body p { margin: 0; }
.sapp-lead { color: var(--ink); font-weight: 700; line-height: 1.45; }
.sapp-note { color: var(--muted); font-size: 14px; line-height: 1.45; }
.sapp-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sapp-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: var(--bg); border: 2px solid var(--ink); border-radius: 16px; }
.sapp-steps b { display: grid; place-items: center; flex: none; width: 38px; height: 38px; color: var(--ink); background: var(--c, var(--lime)); border: 2px solid var(--ink); border-radius: 12px; font: 800 19px var(--display); transform: rotate(-6deg); }
.sapp-steps li:nth-child(2) { --c: var(--cyan); } .sapp-steps li:nth-child(3) { --c: var(--pink); } .sapp-steps li:nth-child(4) { --c: var(--gold, #FFD45C); }
.sapp-steps h3 { margin: 0 0 2px; font: 800 17px/1.2 var(--display); color: var(--ink); }
.sapp-steps p { color: var(--muted); font-size: 14px; line-height: 1.4; }
.sapp-live { padding: 14px 16px; color: #fff; background: var(--ink); border-radius: 16px; }
.sapp-live h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 800 17px var(--display); color: #fff; }
.sapp-live p { color: #E9E2FF; font-size: 14px; line-height: 1.45; } .sapp-live b { color: var(--lime); }
.sapp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sapp-chips span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 99px; font: 800 12px/1.2 var(--ui); }
.sapp-body.stp-faq details { margin: 0; }
.sapp-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sapp-more a { display: flex; align-items: center; gap: 10px; padding: 8px; text-decoration: none; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 var(--sc, var(--ink)); transition: transform .12s; }
.sapp-more a:hover { transform: translateY(-2px); }
.sapp-more img { width: 52px; height: 52px; flex: none; border-radius: 12px; border: 2px solid var(--ink); object-fit: cover; }
.sapp-more span { display: grid; min-width: 0; } .sapp-more b { font-size: 14px; line-height: 1.2; } .sapp-more small { color: var(--muted); font-size: 12px; font-weight: 700; }
.sapp-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sapp-links .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 1320px) { .app-name { display: none; } .app-tab { padding: 9px 11px; font-size: 14px; } }
@media (max-width: 1000px) { .app-dock .dock-nav > [data-stop-share] { display: none; } }
@media (max-width: 760px) {
  body.app-mode { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .app-dock { flex-wrap: wrap; row-gap: 6px; margin-bottom: 8px; }
  .app-id { flex: 1 1 0; padding-left: 8px; }
  .app-id img { display: none; }
  .app-dock .brand-logo { width: 34px; height: 32px; object-fit: cover; object-position: left center; }   /* só o bichinho do logo: sobra lugar para o nome do jogo */
  .app-mode .account-tools .me .lvl { display: none; }
  .app-name { display: block; font-size: 16px; }
  .app-tabs { order: 9; flex: 1 0 100%; justify-content: flex-start; margin: 0 -2px; }
  .app-tab { padding: 7px 12px; font-size: 14px; border: 2px solid var(--soft); }
  .app-tab[aria-expanded="true"] { border-color: var(--ink); }
  .app-dock .dock-nav { gap: 6px; }
  .app-dock .dock-nav > .app-btn[data-stop-fs] { display: grid !important; width: 40px; height: 40px; border-radius: 12px; }
  .app-dock .dock-nav > a.login { display: flex !important; padding: 6px 10px; }
  .app-mode .account-tools { width: auto; }
  .app-mode .account-tools .me-wrap { display: flex; }
  .app-mode .account-tools .me { height: 40px; padding: 2px 6px 2px 4px; }
  .app-mode .account-tools .me .streak, .app-mode .account-tools .me .me-caret { display: none; }
  .app-mode .account-tools .me .ava { width: 32px; height: 32px; }
  .app-mode .notif-btn { border-right: 2px solid var(--soft); border-radius: 12px 0 0 12px; }
  .app-mode .notif-pop { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .sapp .sapp-stage { border-radius: 18px; min-height: 0; }
  .sapp-panel { top: auto; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: min(78dvh, calc(100dvh - 90px)); border-radius: 22px; box-shadow: 0 -4px 0 var(--ink), 0 6px 0 var(--ink); transform: translateY(40px); }
}
@media (max-height: 500px) and (orientation: landscape) {             /* celular deitado: uma linha só e bem baixinha */
  .app-dock { flex-wrap: nowrap; margin-top: calc(4px + env(safe-area-inset-top, 0px)); margin-bottom: 6px; padding: 4px 8px; gap: 8px; border-radius: 16px; }
  .app-dock .brand-logo { height: 28px; }
  .app-id { display: none; }
  .app-tabs { order: 0; flex: 1 1 auto; justify-content: flex-start; margin: 0; }
  .app-tab { padding: 5px 10px; font-size: 13px; }
  .app-dock .dock-nav > [data-stop-share] { display: none !important; }
  .app-btn, .app-dock .dock-nav > .app-btn[data-stop-fs] { width: 36px; height: 36px; border-radius: 11px; }
  .app-mode .account-tools { height: 38px; }
  .app-mode .notif-btn { width: 38px; height: 34px; }
  .app-mode .account-tools .me { height: 34px; }
  .app-mode .account-tools .me .lvl { display: none; }
  .sapp-panel { top: var(--app-top, 64px); bottom: 6px; left: auto; right: 8px; width: min(440px, 70vw); max-height: none; transform: translateX(28px); }
  body.app-mode { padding-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { .sapp-panel, .sapp-panel.open { transition: none; transform: none; } }

/* Topo da página antiga dos jogos da galera (v1.124.1): cartão na cor do jogo (--sc), capa como figurinha e etiquetas coloridas */
.stp-head { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 18px; padding: 12px 18px; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 5px 0 var(--ink);
  background: radial-gradient(color-mix(in srgb, var(--sc, var(--violet)) 30%, transparent) 1.4px, transparent 1.6px) 0 0 / 18px 18px, color-mix(in srgb, var(--sc, var(--violet)) 14%, #fff); }
.stp-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stp-deco i { position: absolute; border-radius: 50%; }
.stp-deco i:nth-child(1) { width: 160px; height: 160px; right: -50px; top: -90px; background: color-mix(in srgb, var(--sc, var(--violet)) 30%, transparent); }
.stp-deco i:nth-child(2) { width: 64px; height: 64px; right: 30%; bottom: -42px; background: color-mix(in srgb, var(--lime) 70%, transparent); }
.stp-deco i:nth-child(3) { width: 18px; height: 18px; right: 34%; top: 18px; background: var(--pink); border: 2px solid var(--ink); }
.stp-deco i:nth-child(4) { width: 10px; height: 10px; left: 104px; bottom: 10px; background: var(--cyan); border: 2px solid var(--ink); }
.stp-cover { width: 84px; height: 84px; object-fit: cover; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 4px 0 var(--ink); transform: rotate(-5deg); background: var(--ink); }
.stp-head .stp-title { min-width: 0; }
.stp-head .stp-kicker { display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 2px 0 var(--ink); }
.stp-head .stp-title h1 { margin: 6px 0 2px; font-size: clamp(26px, 3.2vw, 38px); }
.stp-head .stp-title h1 span { color: var(--sc, var(--violet)); background: linear-gradient(transparent 68%, color-mix(in srgb, var(--lime) 85%, transparent) 68%, color-mix(in srgb, var(--lime) 85%, transparent) 92%, transparent 92%); padding: 0 4px; margin: 0 -4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.stp-head .stp-title p { color: var(--ink); opacity: .8; font-size: 15px; line-height: 1.4; max-width: 720px; }
.stp-head .stp-chips { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; margin: 0; padding: 0; list-style: none; }
.stp-head .stp-chips li { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; background: #fff; border: 2px solid var(--ink); border-radius: 99px; box-shadow: 0 2px 0 var(--ink); font: 800 13px/1.2 var(--ui); color: var(--ink); white-space: nowrap; }
.stp-head .stp-chips i { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; background: var(--c); font-style: normal; }
.stp-head .stp-chips .c1 { --c: var(--lime); } .stp-head .stp-chips .c2 { --c: var(--cyan); } .stp-head .stp-chips .c3 { --c: #FFD45C; } .stp-head .stp-chips .c4 { --c: var(--pink); }
.stp-head .stp-chips .c4 i { color: #fff; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .stp-cover { transition: transform .35s var(--ease-pop); } .stp-head:hover .stp-cover { transform: rotate(3deg) scale(1.04); }
  .stp-head .stp-chips li { transition: transform .15s; } .stp-head .stp-chips li:hover { transform: translateY(-2px) rotate(-2deg); }
}
@media (max-width: 1100px) { .stp-head { grid-template-columns: auto minmax(0, 1fr); } .stp-head .stp-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; } }
@media (max-width: 640px) {
  .stp-head { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 12px; border-radius: 18px; }
  .stp-cover { width: 58px; height: 58px; border-radius: 14px; align-self: start; }
  .stp-head .stp-title h1 { margin: 4px 0 2px; font-size: 24px; }
  .stp-head .stp-kicker { font-size: 10px; letter-spacing: .06em; }
  .stp-head .stp-title p { font-size: 14px; }
  .stp-head .stp-chips li { font-size: 12px; padding: 2px 9px 2px 2px; gap: 5px; }
  .stp-head .stp-chips i { width: 20px; height: 20px; }
  .stp-deco i:nth-child(4) { display: none; }
}