/* Setup screen: answer-time slider on the left, "How to play" stone button on the right,
   both lined up with the edges of the hero cards. */
.screen-setup .setup-controls{max-width:none;width:100%;justify-content:space-between;gap:24px}
.screen-setup .setup-controls>div:first-child{flex:0 1 820px}

/* stone frame (howto-frame.svg) with the purple "?" block, title and arrow on the slab */
.howto-tab{position:relative;flex:0 0 auto;width:clamp(320px,27vw,400px)}
.howto-card{position:relative;display:flex;align-items:center;gap:4%;width:100%;aspect-ratio:400/120;
  padding:0 10% 0 9%;background:url(howto-frame.svg) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;
  color:#f1ecff;text-align:left;cursor:pointer;filter:drop-shadow(0 8px 12px #0009);
  transition:transform .15s ease,filter .15s ease}
.howto-card:hover,.howto-card:focus-visible{transform:translateY(-2px);outline:none;
  filter:drop-shadow(0 8px 12px #0009) drop-shadow(0 0 10px #b36bff66) brightness(1.08)}

/* "NEW HERE?" as a tilted purple stone tag on the top-left corner */
.howto-tab .eyebrow{position:absolute;z-index:2;left:6%;top:-9%;margin:0;padding:5px 12px 4px;transform:rotate(-4deg);
  font:400 clamp(13px,1.15vw,17px)/1 Impact,"Arial Black",sans-serif;letter-spacing:1px;color:#f3e9ff;
  text-shadow:0 2px 0 #3a1f6b;background:linear-gradient(180deg,#9b5cf0,#6a32c9);
  clip-path:polygon(3% 8%,96% 0,100% 88%,4% 100%,0 55%);pointer-events:none}

.howto-badge{flex:0 0 auto;display:grid;place-items:center;height:56%;aspect-ratio:1;
  clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%);
  background:radial-gradient(circle at 35% 30%,#c79bff,#8a47ec 55%,#5e2bb5);
  box-shadow:inset 0 0 0 3px #3f1e7a;font:400 clamp(26px,2.4vw,38px)/1 Impact,"Arial Black",sans-serif;
  color:#fff;text-shadow:0 3px 0 #3a1f6b,0 0 10px #e3c8ff}
.howto-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.howto-text b{font:400 clamp(21px,2vw,31px)/1 Impact,"Arial Black",sans-serif;letter-spacing:1px;white-space:nowrap;
  color:#f4efff;background:linear-gradient(180deg,#ffffff 30%,#cdb6ff);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 #1a1230)}
.howto-text small{font:700 clamp(11px,.95vw,14px)/1.2 "Exo 2",Arial,sans-serif;color:#d9d2f3;white-space:nowrap}
.howto-arrow{font-size:clamp(18px,1.6vw,24px);color:#e2c8ff;text-shadow:0 0 8px #b36bff,0 0 2px #fff;transition:transform .15s ease}
.howto-card:hover .howto-arrow{transform:translateX(3px)}

@media (max-width:760px){
  .screen-setup .setup-controls{flex-direction:column;align-items:stretch;gap:18px}
  .screen-setup .setup-controls>div:first-child{flex:none}
  .howto-tab{width:100%;max-width:440px;margin:6px auto 0}
  .howto-text b{font-size:clamp(18px,5.4vw,26px)}
  .howto-text small{font-size:clamp(10px,3vw,13px)}
}