/* ================================================================
   colorwood-sort.css  —  sortpuzzlehelp.com
   Matches Magic Sort sph- aesthetic — cws- prefix only
   ================================================================ */

/* ── Page wrapper ─────────────────────────────────────────────── */
.cws-page {
  font-family : "Inter", "Segoe UI", sans-serif;
  color       : #1a1a3e;
  max-width   : 860px;
  margin      : 0 auto;
}

/* ── Hero  (warm wood gradient — unique to Colorwood) ─────────── */
.cws-hero {
  background    : linear-gradient(135deg, #7a4620 0%, #b87040 55%, #d4a060 100%);
  border-radius : 14px;
  padding       : 2.5rem 2rem 2rem;
  margin-bottom : 1.5rem;
  color         : #fff;
  box-shadow    : 0 4px 24px rgba(120,60,10,.18);
}
.cws-eyebrow {
  font-size      : .72rem;
  font-weight    : 700;
  letter-spacing : .14em;
  text-transform : uppercase;
  opacity        : .85;
  margin         : 0 0 .55rem;
}
.cws-intro {
  font-size   : 1rem;
  line-height : 1.7;
  margin      : 0 0 1.2rem;
}
.cws-meta-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.cws-pill {
  background    : rgba(255,255,255,.2);
  border        : 1px solid rgba(255,255,255,.4);
  color         : #fff;
  border-radius : 999px;
  padding       : .28rem .85rem;
  font-size     : .8rem;
  font-weight   : 600;
}
.cws-pill-key    { background: rgba(255,210,0,.28); border-color: rgba(255,210,0,.6); }
.cws-pill-hidden { background: rgba(160,80,255,.25); border-color: rgba(160,80,255,.5); }

/* ── Cards (white — same as sph-card) ────────────────────────── */
.cws-card {
  background    : #fff;
  border        : 1px solid #e8eaf0;
  border-radius : 14px;
  padding       : 2rem;
  margin-bottom : 1.5rem;
  color         : #3a3a5c;
  box-shadow    : 0 2px 12px rgba(0,0,0,.05);
}
.cws-eyebrow-sm {
  display        : inline-block;
  font-size      : .68rem;
  font-weight    : 700;
  letter-spacing : .14em;
  text-transform : uppercase;
  color          : #5b6af0;
  background     : rgba(91,106,240,.08);
  border         : 1px solid rgba(91,106,240,.18);
  border-radius  : 6px;
  padding        : .18rem .6rem;
  margin         : 0 0 .75rem;
}
.cws-card-title {
  font-size   : 1.4rem;
  font-weight : 700;
  color       : #1a1a3e;
  margin      : 0 0 .75rem;
}
.cws-card-desc {
  font-size   : .95rem;
  line-height : 1.7;
  color       : #5a5a7a;
  margin      : 0 0 .75rem;
}
.cws-card-desc:last-child { margin-bottom: 0; }

/* ── Visual card (dark — same feel as sph-visual-card) ───────── */
.cws-visual-card {
  background   : #dcd5cc;
  border-color : rgba(180,140,100,.3);
}
.cws-visual-card .cws-eyebrow-sm {
  color      : #7a4a20;
  background : rgba(120,70,20,.1);
  border-color: rgba(120,70,20,.2);
}
.cws-visual-card .cws-card-title { color: #2a1208; }
.cws-visual-card .cws-card-desc  { color: #5a3a20; }

/* ── Mechanic cards ───────────────────────────────────────────── */
.cws-mechanic-key {
  background   : #fffdf0;
  border-color : rgba(200,160,0,.2);
}
.cws-mechanic-key .cws-eyebrow-sm {
  color: #a07010; background: rgba(200,160,0,.1); border-color: rgba(200,160,0,.25);
}
.cws-mechanic-hidden {
  background   : #f8f5ff;
  border-color : rgba(130,80,220,.18);
}
.cws-mechanic-hidden .cws-eyebrow-sm {
  color: #6830c0; background: rgba(130,80,220,.08); border-color: rgba(130,80,220,.2);
}

/* ── Board controls ───────────────────────────────────────────── */
.cws-board-controls {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex-wrap       : wrap;
  gap             : .75rem;
  margin-bottom   : 1.25rem;
}
.cws-status-text { font-size: .9rem; font-weight: 600; color: #5a3a20; }
.cws-status-text strong { color: #b86020; }
.cws-btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.cws-btn {
  background    : rgba(120,70,20,.1);
  border        : 1px solid rgba(120,70,20,.25);
  color         : #5a3a20;
  border-radius : 8px;
  padding       : .45rem 1.1rem;
  font-size     : .84rem;
  font-weight   : 600;
  cursor        : pointer;
  transition    : background .18s, border-color .18s;
  font-family   : inherit;
}
.cws-btn:hover  { background: rgba(120,70,20,.18); border-color: #b86020; }
.cws-btn:active { transform: scale(.96); }
.cws-btn-play   { background: #c8721a; border-color: #c8721a; color: #fff; }
.cws-btn-play:hover { background: #a85e10; border-color: #a85e10; }
.cws-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* ── Board ────────────────────────────────────────────────────── */
.cws-board {
  display         : flex;
  flex-wrap       : wrap;
  justify-content : center;
  gap             : .65rem;
  padding         : .5rem 0 .75rem;
}
.cws-tube-wrap { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.cws-tube {
  width         : 52px;
  border        : 2px solid rgba(120,70,20,.45);
  border-top    : none;
  border-radius : 0 0 26px 26px;
  background    : rgb(145 125 112 / 0%);
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  position      : relative;
  transition    : border-color .2s, box-shadow .2s;
}
.cws-tube-bonus    { border-color: rgba(220,180,0,.6); }
.cws-tube-locked   { border-color: rgba(120,70,30,.35); }
.cws-tube-complete { border-color: rgba(80,220,120,.6); box-shadow: 0 0 14px rgba(80,220,120,.2); }

/* ── Blocks ───────────────────────────────────────────────────── */
.cws-block {
  width: 100%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700;
  border-radius: 3px; position: relative;
}
.cws-block::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 55%,rgba(0,0,0,.15) 100%);
  border-radius: 3px; pointer-events: none;
}
.cws-block-hidden {
  background: #2a2030 !important;
  border: 1px dashed rgba(160,100,255,.45);
  color: rgba(180,130,255,.9); font-size: .88rem;
}
.cws-slot-empty { width: 100%; flex-shrink: 0; background: transparent; }

/* ── Lock overlay ─────────────────────────────────────────────── */
.cws-lock-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; background: rgba(10,5,0,.65);
  z-index: 2; border-radius: 0 0 24px 24px;
}
.cws-lock-icon  { font-size: 1.3rem; }
.cws-lock-label { font-size: .58rem; font-weight: 700; color: rgba(255,195,80,.9); text-align: center; line-height: 1.25; }
.cws-tube-label { font-size: .7rem; font-weight: 600; color: #8a6040; }

/* ── Key flash ────────────────────────────────────────────────── */
@keyframes cws-key-flash {
  0%   { box-shadow: 0 0 0   rgba(255,210,0,0);   }
  40%  { box-shadow: 0 0 22px rgba(255,210,0,.75); }
  100% { box-shadow: 0 0 0   rgba(255,210,0,0);   }
}
.cws-tube-key-flash { animation: cws-key-flash .7s ease-out; }
.cws-board-caption  { font-size: .78rem; color: #9a7050; text-align: center; margin-top: .4rem; }

/* ── Detail list (same 2-col feel as Magic Sort) ──────────────── */
.cws-detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cws-detail-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: .55rem .9rem;
  background: #f8f9fc;
  border: 1px solid #e8eaf0;
  border-radius: 8px;
}
.cws-detail-key { font-size: .84rem; color: #6a6a8a; }
.cws-detail-val { font-size: .84rem; font-weight: 700; color: #1a1a3e; }

/* ── Navigation ───────────────────────────────────────────────── */
.cws-level-nav {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: .6rem; margin-bottom: 1.5rem;
}
.cws-nav-card {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .75rem .9rem;
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 8px; text-decoration: none;
  transition: border-color .18s, box-shadow .18s;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.cws-nav-card:hover {
  border-color : #5b6af0;
  box-shadow   : 0 3px 14px rgba(91,106,240,.12);
}
.cws-nav-label  { font-size: .7rem; color: #9a9ab8; }
.cws-nav-card strong { font-size: .84rem; color: #1a1a3e; }
.cws-nav-prev   { text-align: left; }
.cws-nav-master { text-align: center; }
.cws-nav-next   { text-align: right; }

/* ── Walkthrough ──────────────────────────────────────────────── */
.cws-solution-data { display: none; }

/* ── Tips (same colored-dot style as Magic Sort) ─────────────── */
.cws-tips-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cws-tips-list li {
  display      : flex;
  align-items  : center;
  gap          : .85rem;
  padding      : .7rem 1rem;
  background   : #fff;
  border       : 1px solid #e8eaf0;
  border-radius: 10px;
  font-size    : .92rem;
  line-height  : 1.6;
  color        : #3a3a5c;
  box-shadow   : 0 1px 4px rgba(0,0,0,.04);
}
.cws-tips-list li::before {
  content       : '';
  width         : 10px;
  height        : 10px;
  border-radius : 50%;
  flex-shrink   : 0;
  background    : #5b6af0;
}
.cws-tips-list li:nth-child(2)::before { background: #e84040; }
.cws-tips-list li:nth-child(3)::before { background: #3cb558; }
.cws-tips-list li:nth-child(4)::before { background: #f5c518; }
.cws-tips-list li:nth-child(5)::before { background: #e84895; }
.cws-tips-list li:nth-child(6)::before { background: #f07020; }

/* ── FAQ (same left-border style as Magic Sort) ───────────────── */
.cws-faq-list { display: grid; gap: 1.25rem; }
.cws-faq-item {
  border-left  : 3px solid #5b6af0;
  padding-left : 1rem;
}
.cws-faq-item h3 {
  font-size: .95rem; font-weight: 700; color: #1a1a3e; margin: 0 0 .3rem;
}
.cws-faq-item p {
  font-size: .9rem; color: #5a5a7a; margin: 0; line-height: 1.65;
}

/* ── Block colors — all 14 game colors ───────────────────────── */
.cws-color-blue    { background: #4488ee; }
.cws-color-red     { background: #e84040; }
.cws-color-yellow  { background: #f5c518; }
.cws-color-green   { background: #3cb558; }
.cws-color-orange  { background: #f07020; }
.cws-color-purple  { background: #9055d4; }
.cws-color-cyan    { background: #18b8d8; }
.cws-color-pink    { background: #e84895; }
.cws-color-white   { background: #d8d8e8; color: #444 !important; }
.cws-color-emerald { background: #2ecc80; }
.cws-color-dark    { background: #3a3a52; }
.cws-color-lemon   { background: #d8e840; color: #444 !important; }
.cws-color-brown   { background: #8b5530; }
.cws-color-salmon  { background: #e8806a; }

/* ── Semantic aliases ─────────────────────────────────────────── */
.cws-details-card, .cws-walkthrough, .cws-tips, .cws-faq { /* inherits .cws-card */ }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cws-card { padding: 1.25rem; }
  .cws-hero { padding: 1.5rem 1.25rem 1.25rem; }
  .cws-level-nav { display: flex; flex-direction: column; }
  .cws-nav-card  { text-align: left !important; }
  .cws-tube { width: 42px; }
}

/* ── Hub page extras ──────────────────────────────────────────── */

/* Color strip */
.cws-color-strip {
  display       : flex;
  gap           : .35rem;
  margin        : 1.1rem 0 1.25rem;
  flex-wrap     : wrap;
}
.cws-color-strip span {
  width         : 28px;
  height        : 28px;
  border-radius : 6px;
  flex-shrink   : 0;
  box-shadow    : 0 2px 6px rgba(0,0,0,.18);
}

/* Hero action buttons */
.cws-hero-actions {
  display   : flex;
  flex-wrap : wrap;
  gap       : .65rem;
  margin-top: 1.4rem;
}
.cws-main-btn {
  background    : rgba(255,255,255,.22);
  border        : 1.5px solid rgba(255,255,255,.5);
  color         : #fff;
  border-radius : 8px;
  padding       : .6rem 1.3rem;
  font-size     : .88rem;
  font-weight   : 700;
  text-decoration: none;
  transition    : background .18s;
}
.cws-main-btn:hover { background: rgba(255,255,255,.32); color: #fff; }
.cws-secondary-btn {
  background    : transparent;
  border        : 1.5px solid rgba(255,255,255,.35);
  color         : rgba(255,255,255,.85);
  border-radius : 8px;
  padding       : .6rem 1.3rem;
  font-size     : .88rem;
  font-weight   : 600;
  text-decoration: none;
  transition    : border-color .18s, color .18s;
}
.cws-secondary-btn:hover { border-color: #fff; color: #fff; }

/* Feature grid */
.cws-feature-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(220px, 1fr));
  gap                   : 1rem;
  margin-top            : 1.25rem;
}
.cws-feature-box {
  background    : #f8f9fc;
  border        : 1px solid #e8eaf0;
  border-radius : 10px;
  padding       : 1.1rem 1rem;
}
.cws-feature-icon {
  display       : inline-flex;
  align-items   : center;
  justify-content: center;
  width         : 40px;
  height        : 40px;
  border-radius : 10px;
  font-size     : 1.2rem;
  margin-bottom : .65rem;
}
.cws-feature-box h3 {
  font-size   : .9rem;
  font-weight : 700;
  color       : #1a1a3e;
  margin      : 0 0 .3rem;
}
.cws-feature-box p {
  font-size   : .84rem;
  color       : #6a6a8a;
  margin      : 0;
  line-height : 1.55;
}

/* Level index grid */
.cws-level-index-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(240px, 1fr));
  gap                   : .65rem;
  margin-top            : 1rem;
}
.cws-level-link-card {
  display        : flex;
  flex-direction : column;
  gap            : .18rem;
  padding        : .85rem 1rem;
  background     : #f8f9fc;
  border         : 1px solid #e8eaf0;
  border-radius  : 10px;
  text-decoration: none;
  transition     : border-color .18s, box-shadow .18s;
}
.cws-level-link-card:hover {
  border-color : #5b6af0;
  box-shadow   : 0 3px 14px rgba(91,106,240,.1);
}
.cws-level-link-number {
  font-size   : .7rem;
  font-weight : 700;
  color       : #b86020;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cws-level-link-card strong {
  font-size : .88rem;
  color     : #1a1a3e;
  line-height: 1.3;
}
.cws-level-link-card span {
  font-size : .78rem;
  color     : #9a9ab8;
}

@media (max-width: 600px) {
  .cws-feature-grid      { grid-template-columns: 1fr; }
  .cws-level-index-grid  { grid-template-columns: 1fr; }
  .cws-hero-actions      { flex-direction: column; }
  .cws-main-btn,
  .cws-secondary-btn     { text-align: center; }
}

/* ── How-to-Play steps ────────────────────────────────────────── */
.cws-how-list {
  display        : flex;
  flex-direction : column;
  gap            : .85rem;
  margin-top     : 1.1rem;
}
.cws-how-step {
  display     : flex;
  align-items : flex-start;
  gap         : 1rem;
  padding     : .9rem 1rem;
  background  : #f8f9fc;
  border      : 1px solid #e8eaf0;
  border-radius: 10px;
}
.cws-how-num {
  width         : 32px;
  height        : 32px;
  border-radius : 50%;
  background    : #b86020;
  color         : #fff;
  font-size     : .88rem;
  font-weight   : 700;
  display       : flex;
  align-items   : center;
  justify-content: center;
  flex-shrink   : 0;
}
.cws-how-step strong {
  display     : block;
  font-size   : .9rem;
  color       : #1a1a3e;
  margin-bottom: .2rem;
}
.cws-how-step p {
  font-size  : .84rem;
  color      : #6a6a8a;
  margin     : 0;
  line-height: 1.55;
}