/* ==========================================================================
   v30.26.0 — "Lær at spille": the coach box, what it points at, the entry points
   ========================================================================== */

/* the coach: top centre of the table (free in the 3-player layout the tutorial uses) */
.tutorial-coach{
  position:fixed;z-index:6000;
  top:calc(env(safe-area-inset-top,0px) + clamp(6px,1.2vh,16px));
  left:50%;translate:-50% 0;
  width:min(54vw,clamp(300px,46vh,560px));
  padding:clamp(8px,1.4vh,16px) clamp(10px,1.8vh,20px);
  border:2px solid #f0c55f;border-radius:clamp(10px,1.6vh,18px);
  background:linear-gradient(180deg,rgba(14,34,54,.96),rgba(7,18,30,.97));
  box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 3px rgba(240,197,95,.15);
  color:#f4ead2;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  pointer-events:none;
}
.tutorial-coach[hidden]{display:none}
.tutorial-coach .tc-kicker{display:block;font-size:clamp(9px,1.3vh,13px);font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#f0c55f;margin-bottom:3px}
.tutorial-coach .tc-text{margin:0;font-size:clamp(11.5px,1.9vh,19px);font-weight:700;line-height:1.3}
.tutorial-coach .tc-hint{margin:5px 0 0;font-size:clamp(10.5px,1.7vh,17px);font-weight:800;line-height:1.3;color:#ffd977}
.tutorial-coach.tc-pop{animation:tcPop .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes tcPop{0%{transform:scale(.92);opacity:.4}100%{transform:scale(1);opacity:1}}

/* what to use now pulses gold */
@keyframes coachPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,214,102,.0),0 0 0 0 rgba(255,214,102,.0)}50%{box-shadow:0 0 0 3px rgba(255,214,102,.95),0 0 22px 6px rgba(255,200,80,.55)}}
body.tutorial-on.coach-focus-dock #decisionDock,
body.tutorial-on.coach-focus-ready #decisionDock{animation:coachPulse 1.4s ease-in-out infinite!important}
body.tutorial-on.coach-focus-hand #hand .handcard[data-revealed="0"],
body.tutorial-on.coach-focus-hand #hand .handcard.legal,
body.tutorial-on.coach-focus-hand #hand .handcard:not(.illegal):not(.disabled){animation:coachPulse 1.4s ease-in-out infinite}

/* the button in "Spil mod bots" */
.tutorial-start{
  display:flex;align-items:center;gap:12px;width:100%;margin:4px 0 14px;padding:12px 14px;text-align:left;
  border:2px solid #f0c55f;border-radius:14px;cursor:pointer;color:#f8eed6;
  background:linear-gradient(180deg,#2b5d36,#173c22);box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.tutorial-start:focus-visible{outline:3px solid #fff;outline-offset:2px}
.tutorial-start .ts-icon{font-size:28px;line-height:1}
.tutorial-start .ts-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.tutorial-start strong{font-size:17px}
.tutorial-start small{font-size:12.5px;opacity:.9}

/* the banner for new players on the front page */
.tutorial-banner{
  display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:7px 8px 7px 12px;
  border:1px solid rgba(240,197,95,.7);border-radius:12px;background:linear-gradient(90deg,rgba(43,93,54,.9),rgba(23,60,34,.9));color:#f8eed6;
}
.tutorial-banner.hidden{display:none}
.tutorial-banner .tb-text{flex:1;min-width:0;font-size:13.5px;line-height:1.25}
.tutorial-banner .tb-btn{flex:0 0 auto;min-height:0;padding:7px 12px;font-size:13px}
.tutorial-banner .tb-close{flex:0 0 auto;border:0;background:transparent;color:#f8eed6;font-size:16px;cursor:pointer;padding:4px 6px}