body[data-page="chain-it"],
body[data-page="chain-it"] main,
body[data-page="chain-it"] footer,
body[data-page="chain-it"] .side-drawer { user-select:text; }
body[data-page="chain-it"] button,
body[data-page="chain-it"] .parameters-panel { user-select:none; }

.parameters-main {
  position:relative;
  z-index:1;
  flex:0 0 auto;
  min-height:0;
  padding:1.15rem 1rem .7rem;
}
.parameters-page { width:min(1080px,100%); margin:0 auto; }
.parameters-page .xp-bar-container { margin:0 auto .9rem; }
.parameters-heading { margin:0 0 .85rem; text-align:center; }
.parameters-heading h1 {
  margin:0;
  color:var(--text-bright,#fff);
  font-family:var(--font-heading,"Teko"),sans-serif;
  font-size:clamp(2.35rem,5vw,3.35rem);
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
}
.parameters-heading .steam-page-intro {
  display:block;
  max-width:760px;
  margin:.42rem auto 0;
  color:#a9b1c7;
  font-size:clamp(.84rem,1.6vw,.94rem);
  line-height:1.55;
  text-wrap:balance;
  -webkit-user-select:text;
  user-select:text;
}


.parameters-panel {
  position:relative;
  overflow:visible;
  min-height:0;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

.parameters-reset--floating {
  position:absolute;
  top:0;
  right:0;
  z-index:14;
  margin:0;
  background:rgba(13,17,36,.92);
  box-shadow:0 9px 24px rgba(0,0,0,.28);
}

[dir="rtl"] .parameters-reset--floating {
  right:auto;
  left:0;
}

.parameters-form input,
.parameters-form textarea {
  -webkit-user-select:text;
  user-select:text;
}
.parameters-statbar {
  display:flex;
  width:max-content;
  max-width:100%;
  min-height:48px;
  align-items:stretch;
  margin:0 0 .65rem auto;
  overflow:hidden;
  border:1px solid rgba(103,232,249,.2);
  border-radius:13px;
  background:rgba(8,10,27,.72);
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
}
.parameters-stat {
  display:flex;
  min-width:118px;
  flex-direction:column;
  justify-content:center;
  gap:.08rem;
  padding:.42rem .9rem;
  border-right:1px solid rgba(103,232,249,.14);
}
.parameters-stat span {
  color:var(--text-muted,#94a3b8);
  font-size:.55rem;
  font-weight:800;
  letter-spacing:.13em;
}
.parameters-stat strong {
  color:var(--text-bright,#fff);
  font:700 .96rem var(--font-main,"Outfit"),sans-serif;
}
.parameters-reset {
  align-self:center;
  width:36px;
  height:36px;
  margin:0 .42rem;
  border:1px solid rgba(103,232,249,.2);
  border-radius:10px;
  color:#b9b4ce;
  background:rgba(103,232,249,.06);
  cursor:pointer;
}
.parameters-reset:hover {
  border-color:rgba(103,232,249,.5);
  color:var(--primary,#22d3ee);
  background:rgba(103,232,249,.13);
}

.parameters-state {
  min-height:310px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem;
  text-align:center;
}
.parameters-state[hidden],
[hidden] { display:none !important; }
.parameters-state p { color:var(--text-muted,#94a3b8); }
.parameters-loader { display:flex; height:38px; align-items:center; gap:.45rem; }
.parameters-loader i {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--primary,#22d3ee);
  animation:parameterBounce 1s infinite ease-in-out;
}
.parameters-loader i:nth-child(2){animation-delay:.13s}
.parameters-loader i:nth-child(3){animation-delay:.26s}
@keyframes parameterBounce {
  0%,60%,100%{transform:translateY(0);opacity:.3}
  30%{transform:translateY(-10px);opacity:1}
}
.parameters-error-icon {
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border:1px solid rgba(248,113,113,.45);
  border-radius:50%;
  color:#f87171;
}

.parameters-game { padding:0; }
.parameters-form { position:relative; z-index:10; margin:0 0 .55rem; padding-inline-end:2.85rem; }
.parameters-form label {
  display:block;
  margin:0 0 .42rem .12rem;
  color:#b9a7ff;
  font-size:.61rem;
  font-weight:800;
  letter-spacing:.14em;
}
.parameters-search-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.55rem;
}
.parameters-search-field { position:relative; min-width:0; }
.parameters-search-field input {
  width:100%;
  height:58px;
  padding:0 1.15rem;
  border:1px solid rgba(103,232,249,.42);
  border-radius:16px;
  outline:0;
  color:var(--text-bright,#fff);
  background:linear-gradient(135deg,rgba(10,12,34,.99),rgba(18,20,52,.96));
  box-shadow:0 18px 42px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035);
  font:500 .9rem var(--font-main,"Outfit"),sans-serif;
}
.parameters-search-field input::placeholder { color:#77758d; }
.parameters-search-field input:focus {
  border-color:var(--primary,#22d3ee);
  box-shadow:0 0 0 3px rgba(103,232,249,.11),0 18px 40px rgba(0,0,0,.28);
}
.parameters-search-row .glow-btn {
  min-width:132px;
  min-height:58px;
  border-radius:15px;
  background:linear-gradient(135deg,#06b6d4,#155e75);
  box-shadow:0 12px 30px rgba(94,66,190,.25);
}
.parameters-search-results {
  position:absolute;
  top:calc(100% + .4rem);
  right:0;
  left:0;
  z-index:30;
  overflow:hidden auto;
  max-height:320px;
  padding:.35rem;
  border:1px solid rgba(103,232,249,.3);
  border-radius:14px;
  background:rgba(8,9,25,.98);
  box-shadow:0 22px 55px rgba(0,0,0,.55);
}
.parameters-search-option {
  display:flex;
  width:100%;
  align-items:center;
  gap:.72rem;
  padding:.52rem;
  border:0;
  border-radius:9px;
  color:var(--text-main,#e2e8f0);
  background:transparent;
  cursor:pointer;
  font:600 .8rem var(--font-main,"Outfit"),sans-serif;
  text-align:left;
}
.parameters-search-option img {
  width:82px;
  aspect-ratio:184/69;
  flex:0 0 auto;
  border-radius:6px;
  object-fit:contain;
  background:#050713;
}
.parameters-search-option:hover,
.parameters-search-option.active { background:rgba(103,232,249,.12); }
.parameters-search-status {
  padding:.85rem;
  color:var(--text-muted,#94a3b8);
  font-size:.76rem;
  text-align:center;
}
.parameters-message {
  min-height:1.1rem;
  margin:.32rem .15rem 0;
  color:var(--text-muted,#94a3b8);
  font-size:.7rem;
}
.parameters-message.error { color:#fb7185; }
.parameters-secondary-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.45rem;
  margin:.1rem .1rem .55rem;
}
.parameters-hint-button,
.parameters-give-up {
  display:flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.48rem .72rem;
  border-radius:9px;
  cursor:pointer;
  font:700 .68rem var(--font-main,"Outfit"),sans-serif;
  transition:border-color .15s,color .15s,background .15s,transform .15s;
}
.parameters-hint-button {
  border:1px solid rgba(103,232,249,.32);
  color:#67e8f9;
  background:rgba(109,40,217,.1);
}
.parameters-give-up {
  border:1px solid rgba(251,113,133,.3);
  color:#fda4af;
  background:rgba(127,29,29,.11);
}
.parameters-hint-button[hidden],
.parameters-give-up[hidden] { display:none; }
.parameters-hint-button:hover:not(:disabled) {
  border-color:rgba(103,232,249,.62);
  color:#f5f3ff;
  background:rgba(109,40,217,.17);
  transform:translateY(-1px);
}
.parameters-give-up:hover:not(:disabled) {
  border-color:rgba(251,113,133,.58);
  color:#ffe4e6;
  background:rgba(190,24,93,.15);
  transform:translateY(-1px);
}
.parameters-hint-button:disabled,
.parameters-give-up:disabled { cursor:wait; opacity:.65; }
.parameters-review-hint {
  margin:.15rem 0 .7rem;
  padding:.8rem .9rem;
  border:1px solid rgba(103,232,249,.34);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(33,29,75,.76),rgba(11,14,36,.92));
  box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.025);
}
.parameters-review-hint[hidden] { display:none; }
.parameters-review-hint-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
}
.parameters-review-hint-head strong {
  color:#ddd6fe;
  font-size:.72rem;
  letter-spacing:.04em;
}
.parameters-review-hint-head span {
  flex:0 0 auto;
  padding:.22rem .42rem;
  border-radius:6px;
  font-size:.52rem;
  font-weight:800;
  text-transform:uppercase;
}
.parameters-review-hint-head span.positive { color:#86efac; background:rgba(34,197,94,.13); }
.parameters-review-hint-head span.negative { color:#fda4af; background:rgba(244,63,94,.13); }
.parameters-review-hint p {
  margin:.58rem 0 .3rem;
  color:#f4f1ff;
  font-size:.78rem;
  line-height:1.55;
}
.parameters-review-hint small { color:#89859f; font-size:.61rem; }
.parameters-directions {
  margin:.05rem .15rem .7rem;
  color:#7d7a91;
  font-size:.66rem;
  text-align:right;
}
.parameters-table-head { display:none; }
.parameters-rows { display:grid; gap:.72rem; }

.parameter-row {
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:.65rem;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  animation:parameterRowIn .24s ease;
}
@keyframes parameterRowIn {
  from{opacity:0;transform:translateY(-8px)}
}
.parameter-title {
  display:grid;
  min-width:0;
  grid-template-rows:34px minmax(0,1fr);
  gap:.4rem;
}
.parameter-title-media {
  position:relative;
  display:grid;
  width:100%;
  min-height:158px;
  aspect-ratio:auto;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(103,232,249,.3);
  border-radius:12px;
  background:radial-gradient(circle at 50% 25%,rgba(14,116,144,.34),rgba(3,5,17,.96));
  box-shadow:0 12px 28px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.025);
}
.parameter-title-media::before {
  content:"";
  position:absolute;
  inset:-14px;
  background-image:var(--parameter-image);
  background-position:center;
  background-size:cover;
  filter:blur(15px) brightness(.36) saturate(.9);
  opacity:.78;
  transform:scale(1.05);
}
.parameter-title-media img {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  padding:.28rem;
  object-fit:contain;
}
.parameter-title-media.image-missing::after {
  content:"WORD";
  color:#77718f;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.18em;
}
.parameter-title-copy {
  display:flex;
  min-width:0;
  align-items:center;
  gap:.55rem;
  padding:.35rem .55rem;
  overflow:hidden;
  border:1px solid rgba(103,232,249,.24);
  border-radius:9px;
  background:linear-gradient(135deg,rgba(24,27,65,.95),rgba(11,14,36,.98));
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.parameter-attempt-badge {
  display:grid;
  min-width:30px;
  height:26px;
  place-items:center;
  border:1px solid rgba(103,232,249,.25);
  border-radius:8px;
  color:#67e8f9;
  background:rgba(103,232,249,.08);
  font-size:.62rem;
  font-weight:800;
}
.parameter-title strong {
  min-width:0;
  overflow:hidden;
  color:var(--text-bright,#fff);
  font:700 .8rem/1.3 var(--font-main,"Outfit"),sans-serif;
  text-overflow:ellipsis;
}
.parameter-comparison-grid {
  display:grid;
  min-width:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem;
}
.parameter-cell {
  position:relative;
  display:flex;
  min-width:0;
  min-height:92px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:.28rem;
  padding:1.35rem .85rem .72rem;
  overflow:hidden;
  border:1px solid rgba(103,232,249,.25);
  border-radius:13px;
  color:var(--text-main,#e2e8f0);
  background:linear-gradient(145deg,rgba(24,29,70,.94),rgba(12,15,42,.97));
  box-shadow:0 10px 26px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.025);
  text-align:left;
}
.parameter-cell::before {
  content:attr(data-label);
  position:absolute;
  top:.48rem;
  left:.7rem;
  color:#817c9d;
  font-size:.52rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.parameter-cell strong {
  max-width:100%;
  overflow-wrap:anywhere;
  color:var(--text-bright,#fff);
  font:700 .82rem/1.3 var(--font-main,"Outfit"),sans-serif;
}
.parameter-cell small {
  display:flex;
  align-items:center;
  gap:.28rem;
  color:#aaa6bd;
  font-size:.59rem;
  line-height:1.2;
}
.parameter-cell small i { color:#67e8f9; }
.parameter-cell.status-match {
  border-color:rgba(74,222,128,.46);
  background:linear-gradient(145deg,rgba(26,82,65,.42),rgba(12,39,38,.52));
}
.parameter-cell.status-partial {
  border-color:rgba(251,191,36,.42);
  background:linear-gradient(145deg,rgba(91,66,23,.38),rgba(44,34,22,.5));
}
.parameter-cell.status-miss {
  border-color:rgba(139,113,225,.3);
  background:linear-gradient(145deg,rgba(27,32,78,.94),rgba(12,15,43,.97));
}
.parameter-tags {
  display:flex;
  max-width:100%;
  flex-wrap:wrap;
  gap:.25rem;
}
.parameter-tags span {
  padding:.22rem .38rem;
  border-radius:6px;
  color:#aaa6bd;
  background:rgba(255,255,255,.045);
  font-size:.58rem;
}
.parameter-tags span.match {
  color:#9bf2b8;
  background:rgba(74,222,128,.13);
}
.parameters-empty {
  padding:2rem 1rem 1rem;
  color:#67647c;
  font-size:.8rem;
  text-align:center;
}

.parameters-result {
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:1rem;
  align-items:center;
  margin-top:.8rem;
  padding:.75rem;
  border:1px solid rgba(74,222,128,.36);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(18,57,52,.55),rgba(8,20,28,.75));
}
.parameters-result.no-image { grid-template-columns:1fr; }
.parameters-result.gave-up {
  border-color:rgba(251,113,133,.34);
  background:linear-gradient(145deg,rgba(89,25,48,.38),rgba(15,14,34,.78));
}
.parameters-result img {
  width:200px;
  aspect-ratio:460/215;
  border-radius:10px;
  object-fit:contain;
  background:#050713;
}
.parameters-result-copy > span {
  color:#66e798;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.15em;
}
.parameters-result.gave-up .parameters-result-copy > span { color:#fda4af; }
.parameters-result-copy h2 {
  margin:.15rem 0;
  color:#fff;
  font:500 2rem/1 var(--font-heading,"Teko"),sans-serif;
}
.parameters-result-copy p {
  margin:0 0 .35rem;
  color:#aaa6bd;
  font-size:.78rem;
}
.parameters-result-copy .parameters-result-xp { color:#66e798; font-weight:700; }
.parameters-result-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; }
.parameters-result-actions a { color:#67e8f9; font-size:.72rem; text-decoration:none; }
.parameters-disclaimer {
  margin:.9rem auto 0;
  color:#67647c;
  font-size:.66rem;
  text-align:center;
}
body[data-page="chain-it"] .seo-section {
  position:relative;
  z-index:1;
  margin-top:0;
  padding:1.65rem 0 3rem;
}
body[data-page="chain-it"] .seo-cards-section {
  margin-top:0;
  gap:1.1rem;
}
body[data-page="chain-it"] .seo-cards-title,
body[data-page="chain-it"] .seo-section-intro {
  width:100%;
  max-width:850px;
  margin-right:auto;
  margin-left:auto;
  text-align:center;
}
body[data-page="chain-it"] .seo-cards-title {
  margin-top:0;
  margin-bottom:0;
  line-height:1.15;
  text-wrap:balance;
}
body[data-page="chain-it"] .seo-section-intro { margin-top:0; }
body[data-page="chain-it"] .seo-card--techniques { cursor:default; }
body[data-page="chain-it"] .seo-card--techniques:active { transform:translateY(-4px); }
[dir="rtl"] .parameters-statbar { margin-right:auto; margin-left:0; }
[dir="rtl"] .parameters-stat { border-right:0; border-left:1px solid rgba(103,232,249,.14); }
[dir="rtl"] .parameters-search-option,
[dir="rtl"] .parameter-cell { text-align:right; }
[dir="rtl"] .parameter-cell { align-items:flex-end; }
[dir="rtl"] .parameter-tags { justify-content:flex-end; }
[dir="rtl"] .parameter-cell::before { right:.7rem; left:auto; }
[dir="rtl"] .parameters-directions { text-align:left; }

.parameters-reset:focus-visible,
.parameters-search-option:focus-visible,
.parameters-search-row .glow-btn:focus-visible,
.parameters-hint-button:focus-visible,
.parameters-give-up:focus-visible,
.parameters-result-actions button:focus-visible,
body[data-page="chain-it"] #faq-toggle:focus-visible,
body[data-page="chain-it"] .faq-question:focus-visible {
  outline:2px solid #67e8f9;
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(6,182,212,.18);
}

@media(max-width:760px) {
  .parameter-row { grid-template-columns:1fr; }
  .parameter-title { grid-template-columns:1fr; grid-template-rows:34px minmax(118px,auto); }
  .parameter-title-media { min-height:118px; }
}
@media(max-width:560px) {
  .parameters-main { padding:.8rem .55rem 2rem; }
  .parameters-heading h1 { font-size:2.45rem; }
  .parameters-statbar { width:100%; margin-bottom:.55rem; }
  .parameters-stat { min-width:0; flex:1; padding:.4rem .62rem; }
  .parameters-search-row { grid-template-columns:1fr; }
  .parameters-search-row .glow-btn { min-height:46px; }
  .parameters-form label { margin-left:.08rem; }
  .parameter-row { gap:.5rem; }
  .parameter-title { grid-template-columns:1fr; }
  .parameter-comparison-grid { gap:.42rem; }
  .parameter-cell { min-height:86px; padding:1.3rem .62rem .62rem; }
  .parameter-cell strong { font-size:.72rem; }
  .parameter-cell::before { top:.42rem; left:.55rem; font-size:.48rem; }
  [dir="rtl"] .parameter-cell::before { right:.55rem; left:auto; }
  .parameter-tags span { font-size:.52rem; }
  .parameters-result { grid-template-columns:105px minmax(0,1fr); gap:.65rem; }
  .parameters-result img { width:105px; }
  .parameters-result-copy h2 { font-size:1.45rem; }
}
@media(max-width:390px) {
  .parameter-title { grid-template-columns:1fr; }
  .parameter-cell { min-height:82px; }
  .parameter-comparison-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) {
  .parameters-loader i,
  .parameter-row { animation:none; }
}


/* reset button docked next to the stat bubbles */
.parameters-statrow { display:flex; align-items:stretch; justify-content:flex-end; gap:.6rem; margin:0 0 .65rem; }
.parameters-statrow .parameters-statbar { margin:0; }
.parameters-reset--statrow {
  position:static;
  width:48px;
  min-height:48px;
  height:auto;
  margin:0;
  flex-shrink:0;
  border-radius:13px;
  background:rgba(8,10,27,.72);
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:640px) {
  .parameters-statrow { width:100%; }
  .parameters-statrow .parameters-statbar { flex:1; }
}

/* ── Chain It ────────────────────────────────────────────────────── */
.chain-panel { padding:1.15rem 1.15rem 1.3rem; }

/* HUD: tabs + stats + reset live inside the game card */
#chain-hud { display:flex; align-items:stretch; gap:.55rem; margin:0 0 1.05rem; flex-wrap:wrap; }
#chain-tabs {
  flex:1 1 300px; display:flex; gap:3px; padding:4px;
  background:rgba(6,8,22,.55); border:1px solid rgba(255,255,255,.07); border-radius:14px;
}
#chain-tabs button {
  flex:1; min-height:44px; border:0; border-radius:10px; cursor:pointer;
  background:transparent; color:#9d99b5; font:700 .74rem var(--font-main,"Outfit"),sans-serif; letter-spacing:.03em;
  transition:background .15s, color .15s, box-shadow .15s;
}
#chain-tabs button:hover { color:#d6d3e6; }
#chain-tabs button.active {
  color:#fff; background:linear-gradient(135deg,#06b6d4,#0e7490);
  box-shadow:0 6px 16px rgba(94,66,190,.4);
}
#chain-stats { display:flex; gap:.45rem; }
.chain-stat {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.14rem;
  min-width:92px; padding:.35rem .8rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.08); background:rgba(6,8,22,.55);
}
.chain-stat span { font-size:.53rem; font-weight:800; letter-spacing:.13em; color:#8b87a0; text-transform:uppercase; white-space:nowrap; }
.chain-stat strong { font-size:1.05rem; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; line-height:1; }
#chain-hud #parameters-reset {
  flex:0 0 46px; width:46px; border-radius:12px; cursor:pointer; margin:0; padding:0;
  border:1px solid rgba(255,255,255,.1); background:rgba(6,8,22,.55); color:#b7b3c9;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  transition:border-color .15s, color .15s;
}
#chain-hud #parameters-reset i { transition:transform .35s; }
#chain-hud #parameters-reset:hover { border-color:rgba(103,232,249,.6); color:#fff; }
#chain-hud #parameters-reset:hover i { transform:rotate(180deg); }

/* the chain itself */
#chain-board { display:flex; flex-direction:column; margin:0 0 1rem; }
.chain-pill {
  display:flex; align-items:center; gap:.55rem; min-height:54px; width:max-content; max-width:100%;
  padding:.5rem 1.05rem; border-radius:14px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  font:800 1.22rem var(--font-main,"Outfit"),sans-serif; letter-spacing:.12em; color:#e7e4f5;
  animation:chainPillIn .28s ease both;
}
@keyframes chainPillIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.chain-pill.solved {
  color:#6ee7b7; border-color:rgba(52,211,153,.38); background:rgba(16,185,129,.09);
  text-shadow:0 0 18px rgba(52,211,153,.3);
}
.chain-pill.locked { opacity:.5; color:#a39fc0; }
.chain-pill.current {
  width:max-content; min-width:min(480px,100%); position:relative; cursor:text; padding:.6rem .8rem;
  border-color:rgba(103,232,249,.55);
  background:linear-gradient(135deg,rgba(6,182,212,.16),rgba(70,51,165,.1));
  box-shadow:0 12px 30px rgba(94,66,190,.24);
}
.chain-pill.current:focus-within { border-color:#22d3ee; box-shadow:0 0 0 3px rgba(103,232,249,.15), 0 12px 30px rgba(94,66,190,.28); }
.chain-pill.shake { animation:chainShake .3s; }
@keyframes chainShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.chain-blank { color:rgba(255,255,255,.35); letter-spacing:.22em; margin-left:.15em; overflow:hidden; }

/* letter tiles inside the current word */
.chain-tiles { display:flex; flex-wrap:wrap; gap:6px; }
.chain-tile {
  width:42px; height:46px; border-radius:11px; position:relative;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.13); background:rgba(6,8,22,.72);
  font-size:1.28rem; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:0;
  transition:border-color .12s, background .12s, box-shadow .12s;
}
.chain-tile.revealed { border-color:rgba(103,232,249,.55); background:rgba(6,182,212,.22); color:#e9d5ff; }
.chain-tile.typed { border-color:rgba(255,255,255,.32); }
.chain-tile.active { border-color:#22d3ee; box-shadow:0 0 0 2px rgba(103,232,249,.25); }
.chain-tile.active::after {
  content:''; position:absolute; bottom:7px; left:50%; transform:translateX(-50%);
  width:16px; height:2px; border-radius:2px; background:#22d3ee; animation:chainCaret 1.1s steps(2,start) infinite;
}
@keyframes chainCaret { 50% { opacity:0; } }
.chain-pill-input,
.chain-pill-input:focus,
.chain-pill-input:focus-visible {
  position:absolute; inset:0; width:100%; height:100%; opacity:0;
  padding:0; margin:0; border:0 !important; outline:0 !important; box-shadow:none !important;
  background:transparent !important; color:transparent; caret-color:transparent; font-size:16px;
}

/* links between words */
.chain-joint { display:flex; flex-direction:column; align-items:center; margin-left:20px; width:26px; padding:2px 0; color:rgba(255,255,255,.18); }
[dir="rtl"] .chain-joint { margin-left:0; margin-right:20px; }
.chain-joint-line { width:2px; height:7px; border-radius:2px; background:currentColor; }
.chain-joint i { font-size:.68rem; transform:rotate(-45deg); margin:2px 0; }
.chain-joint.solved { color:rgba(52,211,153,.7); }
.chain-joint.active { color:#22d3ee; animation:jointPulse 1.5s ease-in-out infinite; }
@keyframes jointPulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* actions */
.chain-row2 { display:flex; gap:.55rem; }
.chain-row2 .glow-btn { flex:1; min-height:54px; border-radius:14px; letter-spacing:.06em; background:linear-gradient(135deg,#06b6d4,#155e75); }
#chain-hint {
  display:flex; align-items:center; gap:.45rem; min-height:54px; padding:0 1rem; border-radius:14px; cursor:pointer;
  border:1px solid rgba(250,204,21,.3); background:rgba(250,204,21,.07); color:#fde68a;
  font:700 .72rem var(--font-main,"Outfit"),sans-serif; white-space:nowrap;
  transition:border-color .15s, background .15s;
}
#chain-hint:hover:not(:disabled) { border-color:rgba(250,204,21,.55); background:rgba(250,204,21,.13); }
.chain-message { min-height:1.1rem; margin:.45rem .15rem 0; color:var(--text-muted,#94a3b8); font-size:.72rem; }
.chain-message.error { color:#fb7185; }

/* sub-panels */
#chain-win, #chain-results, #chain-setup, #chain-handoff {
  margin-top:1rem; padding:1.15rem 1.2rem; border-radius:16px;
  border:1px solid rgba(103,232,249,.24); background:rgba(8,10,27,.72);
  animation:chainPillIn .3s ease both;
}
#chain-win { border-color:rgba(52,211,153,.35); }
#chain-win h2 { color:#6ee7b7; }
#chain-win h2, #chain-results h2, #chain-setup h2, #chain-handoff h2 {
  margin:0 0 .5rem; font-family:var(--font-heading,"Teko"),sans-serif; font-size:1.7rem; letter-spacing:.02em;
}
#chain-results h2, #chain-setup h2, #chain-handoff h2 { color:#fff; }
#chain-win p, .chain-text { margin:.2rem 0; color:#b7b3c9; font-size:.85rem; }
#chain-win-xp { color:#4ade80; font-weight:700; }
.chain-action { min-height:46px; padding:.55rem 1.2rem; border-radius:12px; margin-top:.7rem; margin-right:.5rem; }
.chain-action--ghost {
  border:1px solid rgba(103,232,249,.3); background:rgba(103,232,249,.06); color:#67e8f9; cursor:pointer;
  font:700 .78rem var(--font-main,"Outfit"),sans-serif;
}
.chain-word-row { display:flex; gap:.5rem; margin-bottom:.5rem; }
.chain-word-row input {
  flex:1; height:48px; padding:0 1rem; border:1px solid rgba(103,232,249,.35); border-radius:12px; outline:0;
  color:#fff; background:rgba(10,12,34,.95); font:600 .92rem var(--font-main,"Outfit"),sans-serif; letter-spacing:.06em; text-transform:uppercase;
}
.chain-word-remove {
  width:48px; border-radius:12px; border:1px solid rgba(251,113,133,.25); background:rgba(127,29,29,.1);
  color:#fda4af; cursor:pointer;
}
#chain-add-word {
  min-height:42px; padding:0 1rem; border-radius:11px; cursor:pointer;
  border:1px dashed rgba(103,232,249,.4); background:transparent; color:#67e8f9;
  font:700 .74rem var(--font-main,"Outfit"),sans-serif;
}
#chain-setup-message { min-height:1rem; color:#fb7185; font-size:.74rem; margin:.4rem 0 0; }
#chain-handoff { text-align:center; padding:2rem 1.2rem; }
#chain-handoff-go { min-width:180px; min-height:54px; border-radius:14px; margin-top:.8rem; }
.chain-result-row {
  display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  padding:.55rem .7rem; border-radius:10px; font-size:.84rem; color:#d6d3e6;
}
.chain-result-row:nth-child(odd) { background:rgba(255,255,255,.03); }
.chain-result-row.me { border:1px solid rgba(103,232,249,.4); }
.chain-result-row b { color:#fff; }
.chain-verdict { margin:.6rem 0 0; color:#67e8f9; font-weight:800; font-size:.95rem; }
.chain-link-box {
  margin:.5rem 0; padding:.7rem .9rem; border-radius:11px; border:1px solid rgba(103,232,249,.35);
  background:rgba(10,12,34,.95); color:#67e8f9; font:600 .8rem/1.4 monospace; word-break:break-all;
  -webkit-user-select:text; user-select:text;
}
#chain-challenge-bar { display:flex; gap:.5rem; margin:0 0 .7rem; }
#chain-challenge-bar button { flex:1; }

/* community levels */
.chain-lv-top { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:0 0 .55rem; }
.chain-lv-search {
  flex:1 1 220px; min-width:0; height:44px; padding:0 1rem; outline:0;
  border:1px solid rgba(103,232,249,.35); border-radius:12px;
  color:#fff; background:rgba(6,8,22,.72);
  font:600 .84rem var(--font-main,"Outfit"),sans-serif;
}
.chain-lv-search::placeholder { color:#77758d; }
.chain-lv-search:focus { border-color:var(--primary,#22d3ee); box-shadow:0 0 0 3px rgba(103,232,249,.12); }
.chain-lv-top .chain-sort-row { margin:0; }
#chain-level-name {
  width:100%; height:48px; margin:0 0 .6rem; padding:0 1rem; outline:0;
  border:1px solid rgba(103,232,249,.35); border-radius:12px;
  color:#fff; background:rgba(10,12,34,.95);
  font:700 .95rem var(--font-main,"Outfit"),sans-serif;
}
#chain-level-name::placeholder { color:#77758d; font-weight:500; }
#chain-level-name:focus { border-color:var(--primary,#22d3ee); box-shadow:0 0 0 3px rgba(103,232,249,.12); }
.chain-level-label { display:flex; align-items:baseline; gap:.45rem; min-width:0; flex-wrap:wrap; }
.chain-level-name { font-weight:800; color:#fff; }
.chain-id {
  color:#8b87a0; font:700 .68rem/1 monospace; letter-spacing:.04em;
  padding:.18rem .4rem; border:1px solid rgba(255,255,255,.1); border-radius:7px;
  -webkit-user-select:text; user-select:text;
}
.chain-level-by { color:#9d99b5; font-size:.78rem; white-space:nowrap; }
.chain-level-side { display:flex; align-items:center; gap:.45rem; flex:0 0 auto; }
.chain-share {
  width:34px; height:34px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(103,232,249,.3); background:rgba(103,232,249,.06); color:#67e8f9;
  display:flex; align-items:center; justify-content:center; font-size:.78rem;
  transition:border-color .15s, background .15s;
}
.chain-share:hover { border-color:rgba(103,232,249,.6); background:rgba(103,232,249,.14); }
.chain-sort-row { display:flex; gap:.45rem; margin:0 0 .4rem; }
.chain-sort {
  padding:.45rem 1.05rem; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); background:transparent; color:#b7b3c9;
  font:700 .72rem var(--font-main,"Outfit"),sans-serif; letter-spacing:.04em;
  transition:border-color .15s, background .15s, color .15s;
}
.chain-sort.active { border-color:rgba(103,232,249,.6); color:#fff; background:rgba(6,182,212,.16); }
.chain-level-row { cursor:pointer; transition:background .12s; }
.chain-level-row:hover { background:rgba(103,232,249,.09); }
.chain-level-row b { white-space:nowrap; }
.chain-like {
  border:1px solid rgba(251,113,133,.4); background:rgba(251,113,133,.08); color:#fda4af; cursor:pointer;
  font:700 .78rem var(--font-main,"Outfit"),sans-serif;
}
.chain-like:hover:not(:disabled) { background:rgba(251,113,133,.16); }
.chain-like i { margin-right:.4rem; }
.chain-like:disabled { opacity:.75; cursor:default; }

@media (max-width:640px) {
  .chain-panel { padding:.9rem .8rem 1.1rem; }
  #chain-hud { gap:.45rem; }
  #chain-tabs { flex-basis:100%; order:-1; }
  #chain-stats { flex:1; }
  .chain-stat { flex:1; min-width:0; padding:.3rem .4rem; }
  .chain-tiles { gap:4px; }
  .chain-tile { width:33px; height:38px; font-size:1.05rem; border-radius:8px; }
  .chain-tile.active::after { bottom:5px; width:13px; }
  .chain-pill { min-height:46px; font-size:1rem; padding:.4rem .7rem; }
  .chain-joint { margin-left:14px; }
  [dir="rtl"] .chain-joint { margin-right:14px; }
  #chain-tabs button { min-height:40px; font-size:.66rem; padding:0 .2rem; }
  .chain-row2 .glow-btn { min-width:0; }
  #chain-hint { width:52px; flex:0 0 52px; justify-content:center; padding:0; }
  #chain-hint span { display:none; }
  .chain-lv-search { flex-basis:100%; }
  .chain-level-by { white-space:normal; }
}

/* ── workshop language filter + rename + practice ─────────────────────── */
.chain-lang-select { min-height:44px; padding:0 .7rem; border:1px solid rgba(103,232,249,.28); border-radius:10px; background:rgba(6,10,26,.85); color:var(--text-main,#e2e8f0); font:600 .72rem var(--font-main,"Outfit"),sans-serif; cursor:pointer; }
.chain-lang-select:focus-visible { outline:2px solid rgba(103,232,249,.6); outline-offset:2px; }
.chain-lang-tag { display:inline-grid; place-items:center; min-width:30px; height:18px; padding:0 .3rem; border-radius:6px; background:rgba(103,232,249,.14); color:#67e8f9; font:800 .56rem var(--font-main,"Outfit"),sans-serif; letter-spacing:.06em; }
.chain-level-edit { color:#67e8f9; }
.chain-rename-box { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; width:100%; margin-top:.5rem; padding:.55rem; border:1px solid rgba(103,232,249,.22); border-radius:12px; background:rgba(6,10,26,.65); }
.chain-rename-box input { flex:1; min-width:140px; min-height:42px; padding:0 .7rem; border:1px solid rgba(103,232,249,.3); border-radius:9px; background:rgba(3,6,18,.9); color:#fff; font:600 .8rem var(--font-main,"Outfit"),sans-serif; }
.chain-rename-box .chain-action { min-height:42px; margin:0; }
.chain-rename-note { width:100%; color:#fda4af; font-size:.64rem; min-height:.8rem; }