/* Common Closet — What's Your Brand, the game (scoped under .cc-brand-game) */
.cc-brand-game{
  --paper:#f4efe9; --ink:#141414; --soft:#3c3a37; --red:#a43135;
  --line:rgba(20,18,16,.20); --cream:#fbf7f1;
  background:var(--paper);color:var(--ink);
  font-family:'GFS Didot','Playfair Display',Georgia,serif;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.cc-brand-game .wrap{max-width:760px;margin:0 auto;padding:56px 26px 90px;}
.cc-brand-game [hidden]{display:none !important;}

.cc-brand-game .eyebrow{text-transform:uppercase;letter-spacing:4px;font-size:11.5px;color:var(--red);font-weight:700;font-family:Arial,sans-serif;}
.cc-brand-game h1{font-weight:700;font-size:clamp(38px,7vw,62px);margin:8px 0 14px;letter-spacing:.5px;}
.cc-brand-game h2{font-weight:700;font-size:clamp(26px,4.4vw,38px);margin:0 0 24px;}
.cc-brand-game .lede{font-style:italic;font-size:19px;color:var(--soft);max-width:52ch;margin:0 0 20px;}

/* buttons — reuse the site's .cc-btn where present, but stand alone if not */
.cc-brand-game .cc-btn{display:inline-block;font-family:Arial,sans-serif;font-size:13px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;padding:14px 26px;border:1px solid var(--red);
  border-radius:3px;cursor:pointer;transition:opacity .2s ease;}
.cc-brand-game .cc-btn-solid{background:var(--red);color:#fff;}
.cc-brand-game .cc-btn-ghost{background:transparent;color:var(--soft);border-color:var(--line);}
.cc-brand-game .cc-btn:hover{opacity:.85;}
.cc-brand-game .cc-btn:disabled{opacity:.4;cursor:default;}
.cc-brand-game .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px;}

/* stage rail */
.cc-brand-game .rail{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:Arial,sans-serif;
  font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(60,58,55,.45);
  padding-bottom:16px;margin-bottom:38px;border-bottom:1px solid var(--line);}
.cc-brand-game .rail .on{color:var(--red);font-weight:700;}
.cc-brand-game .rail .done{color:var(--soft);}

/* progress */
.cc-brand-game .progress{display:flex;align-items:center;gap:14px;margin-bottom:34px;
  font-family:Arial,sans-serif;font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--soft);}
.cc-brand-game .bar{flex:1;height:2px;background:var(--line);overflow:hidden;}
.cc-brand-game .bar span{display:block;height:100%;width:0;background:var(--red);transition:width .35s ease;}

/* question */
.cc-brand-game .label{font-family:Arial,sans-serif;font-size:11px;letter-spacing:3px;
  text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:12px;}
.cc-brand-game .label .tag{color:var(--soft);text-transform:none;letter-spacing:0;
  font-style:italic;font-family:'GFS Didot',Georgia,serif;margin-left:8px;font-weight:400;}
.cc-brand-game .question{font-size:clamp(22px,3.4vw,30px);line-height:1.35;margin:0 0 26px;}

.cc-brand-game textarea{width:100%;padding:16px;font-family:'GFS Didot','Playfair Display',Georgia,serif;
  font-size:17px;line-height:1.5;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:3px;resize:vertical;}
.cc-brand-game textarea:focus{outline:none;border-color:var(--red);}
.cc-brand-game label{display:block;font-family:Arial,sans-serif;font-size:12px;letter-spacing:1px;
  text-transform:uppercase;color:var(--soft);font-weight:700;margin:18px 0 6px;}

/* waiting */
.cc-brand-game .waiting{color:var(--soft);font-style:italic;font-size:16px;margin-top:18px;}
.cc-brand-game .waiting::after{content:'';display:inline-block;width:.7em;text-align:left;
  animation:cc-bg-dots 1.2s steps(4,end) infinite;}
@keyframes cc-bg-dots{0%{content:'';}25%{content:'.';}50%{content:'..';}75%{content:'...';}}

/* results */
.cc-brand-game .slogan{font-size:clamp(24px,4.2vw,38px);line-height:1.3;margin:0 0 38px;
  background:var(--cream);border-left:3px solid var(--red);padding:30px 30px 30px 34px;border-radius:0 4px 4px 0;}
.cc-brand-game .slogan.small{font-size:clamp(19px,2.6vw,23px);line-height:1.5;}

.cc-brand-game .field{margin-bottom:28px;}
.cc-brand-game .field h3{font-family:Arial,sans-serif;font-size:11px;letter-spacing:3px;
  text-transform:uppercase;color:var(--soft);font-weight:700;margin:0 0 8px;}
.cc-brand-game .field p{margin:0;font-size:17.5px;}
.cc-brand-game .field ul{margin:0;padding-left:20px;list-style:disc;}
.cc-brand-game .field li{margin-bottom:8px;font-size:17px;}
.cc-brand-game hr{border:0;border-top:1px solid var(--line);margin:38px 0;}

.cc-brand-game .ev{list-style:none;padding:0;}
.cc-brand-game .ev li{margin-bottom:18px;}
.cc-brand-game .ev b{display:block;font-weight:700;font-size:17.5px;margin-bottom:2px;}
.cc-brand-game .ev span{color:var(--soft);font-style:italic;font-size:16px;}

.cc-brand-game .offer{margin-bottom:18px;}
.cc-brand-game .offer b{display:block;font-weight:700;font-size:18px;}
.cc-brand-game .offer span{color:var(--soft);font-size:16.5px;}

.cc-brand-game .box{background:#fff;border:1px solid var(--line);border-radius:4px;padding:28px;margin-bottom:22px;}
.cc-brand-game .box h3{font-family:Arial,sans-serif;font-size:11px;letter-spacing:3px;
  text-transform:uppercase;color:var(--red);font-weight:700;margin:0 0 10px;}
.cc-brand-game .box p{margin:0;font-size:17px;color:var(--soft);}

/* closing call to action — the handover to a real session */
.cc-brand-game .next-step{background:var(--cream);border-color:var(--red);}
.cc-brand-game .next-step p{color:var(--ink);font-size:17.5px;}
.cc-brand-game .next-step .actions{margin-top:20px;}
.cc-brand-game .next-step .bridge{font-style:italic;margin-bottom:20px;}
.cc-brand-game .box h4{font-size:22px;line-height:1.3;font-weight:700;margin:0 0 10px;color:var(--ink);}
.cc-brand-game .second-step{background:transparent;}
.cc-brand-game .second-step h4{font-size:19px;}
.cc-brand-game .second-step .actions{margin-top:18px;}

.cc-brand-game .changed{background:var(--cream);border-radius:4px;padding:18px 22px;margin-bottom:32px;font-size:16.5px;}
.cc-brand-game .changed b{display:block;font-family:Arial,sans-serif;font-size:10.5px;letter-spacing:3px;
  text-transform:uppercase;color:var(--red);margin-bottom:6px;}

@media (max-width:640px){
  .cc-brand-game .wrap{padding:38px 20px 70px;}
  .cc-brand-game .slogan{padding:22px 22px 22px 24px;}
  .cc-brand-game .box{padding:20px;}
}