/* Game.Tutorial.css — the tutorial "coach" overlay layered over the real Dominion client.
 * Self-contained and namespaced (#tut*, .tut-*) so it never collides with game styles.
 * Loaded via index.html; only visible when a tutorial is running (window.tutorialId set). */

#tutDim{position:fixed; inset:0; z-index:9000; pointer-events:none; display:none}
#tutDim.on{display:block}
#tutSpot{
  position:absolute; border-radius:12px; display:none;
  box-shadow:0 0 0 9999px rgba(6,14,10,.68), 0 0 0 3px #ffd97a, 0 0 26px 6px rgba(255,217,122,.34);
  transition:left .28s cubic-bezier(.2,.7,.2,1), top .28s cubic-bezier(.2,.7,.2,1), width .28s, height .28s;
}
#tutSpot.on{display:block}
/* noDim: keep the gold ring + glow but drop the full-screen dark spread, so a panel the player opens
   from the highlighted control (e.g. an info tab) shows at full brightness instead of faded. */
#tutSpot.nodim{box-shadow:0 0 0 3px #ffd97a, 0 0 26px 6px rgba(255,217,122,.34)}
/* When a beat asks the player to act, let clicks pass through the dim to the highlighted control. */
#tutDim.passthru{pointer-events:none}

#tutCoach{
  position:fixed; z-index:9002; max-width:390px; display:none;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(180deg,#fbf1d8,#f4e7c9); color:#2a2015;
  border:1px solid #d9be82; border-radius:14px; padding:15px 16px 13px;
  box-shadow:0 18px 46px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.4), 0 0 30px rgba(255,217,122,.18);
}
#tutCoach.on{display:block}
#tutCoach .tut-head{display:flex; align-items:center; gap:9px; margin-bottom:8px}
#tutCoach .tut-lantern{font-size:19px; filter:drop-shadow(0 0 6px #ffcf6c)}
#tutCoach .tut-title{font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#9a7016}
#tutCoach .tut-step{margin-left:auto; font-weight:600; font-size:11px; color:rgba(154,112,22,.7); font-variant-numeric:tabular-nums}
#tutCoach .tut-body{font-size:14px; line-height:1.5; color:#3a2e18}
#tutCoach .tut-body b{color:#7a5410}
#tutCoach .tut-body .tut-k{background:#e9d29a; border-radius:4px; padding:1px 6px; font-weight:600; white-space:nowrap}
#tutCoach .tut-act{display:flex; gap:8px; align-items:center; margin-top:13px; flex-wrap:wrap}
#tutCoach .tut-prompt{font-weight:600; font-size:12.5px; line-height:1.35; color:#8a5c12; display:flex; align-items:center; gap:7px}
#tutCoach .tut-arrow{animation:tutNudge 1.1s ease-in-out infinite}
@keyframes tutNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
#tutCoach .tut-btn{font-weight:700; font-size:12.5px; border:none; border-radius:8px; padding:9px 15px; cursor:pointer;
  background:linear-gradient(180deg,#caa24a,#a9823a); color:#2a1e08}
#tutCoach .tut-btn:hover{filter:brightness(1.07)}
#tutCoach .tut-btn.tut-sk{background:rgba(0,0,0,.06); color:#6b5324; font-weight:600}
#tutCoach .tut-act .tut-quit{margin-left:auto}   /* push Quit to the far right, clear of the primary action */
#tutCoach:focus-visible,#tutCoach .tut-btn:focus-visible{outline:2px solid #8a5c12; outline-offset:2px}

/* Sub-highlights: pulsing rings on specific elements within the main spotlight (e.g. the
   Actions / Buys / Coins stats). No dimming (the main spotlight does that) — just emphasis. */
.tut-subspot{position:fixed; z-index:9001; border-radius:8px; pointer-events:none;
  box-shadow:0 0 0 2px #ffd97a, 0 0 12px 3px rgba(255,217,122,.55); animation:tutPulse 1.4s ease-in-out infinite}
@keyframes tutPulse{0%,100%{box-shadow:0 0 0 2px #ffd97a,0 0 10px 2px rgba(255,217,122,.45)}
  50%{box-shadow:0 0 0 3px #ffe9a8,0 0 18px 6px rgba(255,217,122,.85)}}

/* Opponent "what are they thinking" reveal tag */
#tutReveal{position:fixed; z-index:9002; display:none; max-width:260px;
  background:#241a2e; color:#f0e6ff; border:1px solid #8367ad; border-radius:10px; padding:10px 12px;
  font-family:system-ui,sans-serif; font-size:12.5px; line-height:1.45; box-shadow:0 10px 26px rgba(0,0,0,.5)}
#tutReveal.on{display:block}
#tutReveal b{color:#c9aef0}

/* Free-play "Coach tip" — a small card that pops bottom-right when a teachable moment fires. */
#tutTip{position:fixed; right:18px; bottom:18px; z-index:9002; max-width:330px; display:none;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(180deg,#fbf1d8,#f4e7c9); color:#2a2015;
  border:1px solid #d9be82; border-radius:12px; padding:11px 13px 12px;
  box-shadow:0 14px 36px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.4)}
#tutTip.on{display:block; animation:tutTipIn .32s cubic-bezier(.2,.7,.2,1)}
@keyframes tutTipIn{from{transform:translateY(14px); opacity:0}to{transform:none; opacity:1}}
#tutTip .tut-tiphead{display:flex; align-items:center; gap:8px; margin-bottom:6px}
#tutTip .tut-title{font-weight:700; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:#9a7016}
#tutTip .tut-lantern{font-size:16px; filter:drop-shadow(0 0 5px #ffcf6c)}
#tutTip .tut-tipbody{font-size:13.5px; line-height:1.45; color:#3a2e18}
#tutTip .tut-tipbody b{color:#7a5410}
#tutTip .tut-tipx{margin-left:auto; background:none; border:none; font-size:19px; line-height:1; color:#9a7016; cursor:pointer; padding:0 2px}
#tutTip .tut-tipx:hover{color:#6b4e10}

/* A small persistent "Tutorial" ribbon so the player knows guided mode is on */
#tutRibbon{position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:9001; display:none;
  background:linear-gradient(180deg,#caa24a,#a9823a); color:#2a1e08; font:700 11px/1 system-ui,sans-serif;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 14px; border-radius:0 0 8px 8px; box-shadow:0 4px 12px rgba(0,0,0,.4)}
#tutRibbon.on{display:block}

/* ---------- Lobby "Learn to play" onboarding — fills the Tutorial tab panel ----------
   The lobby centre column is a tab strip (main's Lobby.js); #lobbyPanelTutorial owns the box and its
   scrolling, so this styles only the onboarding CONTENT and lets it flow inside the panel. Colours
   are theme-NEUTRAL (inherit the lobby's text colour + translucent surfaces) so it reads on both the
   light and dark grounds Color.css / Color.Dark.css set — no dependency on a lobby theme class. */
.lobbyLearn{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:inherit; padding:4px 2px 8px}
/* The lobby stylesheet mangles arbitrary text (forced padding/indent/floats); neutralise it here. */
.lobbyLearn *::before, .lobbyLearn *::after{ content:none !important; float:none !important; width:auto !important; }
.lobbyLearn h2, .lobbyLearn h3, .lobbyLearn p, .lobbyLearn div{ height:auto !important; min-height:0 !important; }
.lobbyLearn h2, .lobbyLearn h3, .lobbyLearn p, .lobbyLearn span, .lobbyLearn small, .lobbyLearn b{
  padding-left:0 !important; padding-right:0 !important; text-indent:0 !important;
  word-spacing:normal !important; letter-spacing:normal !important; float:none !important; text-align:left !important; background:none !important;}
.lobbyLearn-head{margin-bottom:9px}
/* Title and the "New here?" eyebrow share one row — eyebrow pushed to the right — to save height. */
.lobbyLearn-titlerow{display:flex; align-items:baseline; justify-content:space-between; gap:14px}
.lobbyLearn-eyebrow{font:700 11px/1 system-ui; letter-spacing:.18em; text-transform:uppercase; opacity:.9; white-space:nowrap}
.lobbyLearn-head h2{font-family:Georgia,"Palatino Linotype",serif; font-size:clamp(21px,2.6vw,27px); margin:0; text-wrap:balance}
.lobbyLearn-head p{margin:0; max-width:80ch; line-height:1.5; font-size:13.5px; opacity:.82}
.lobbyLearn-games{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px}
.lobbyLearn-game{padding:0}
.lobbyLearn-game h3{font-family:Georgia,serif; font-size:19px; margin:0 0 6px; display:flex; align-items:center; gap:9px}
.lobbyLearn-dot{width:11px; height:11px; border-radius:50%}
.lobbyLearn-dot.dom{background:#5f9350; color:#5f9350}
.lobbyLearn-dot.mon{background:#c9772f; color:#c9772f}
.lobbyLearn-game > p{margin:0 0 8px; line-height:1.4; font-size:13px; opacity:.8}
.lobbyLearn-tuts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px}
.lobbyLearn-tut{cursor:pointer; text-align:left; border:1px solid; border-radius:10px; padding:8px 11px;
  transition:transform .12s, background .12s}
.lobbyLearn-tut:hover{transform:translateY(-2px)}
.lobbyLearn-tut b{display:block; font:700 13.5px/1.2 system-ui; margin-bottom:2px}
.lobbyLearn-tut small{font-size:12px; line-height:1.3; display:block; opacity:.72}
.lobbyLearn-tut.disabled{opacity:.5; cursor:not-allowed; border-style:dashed}
.lobbyLearn-tut.disabled:hover{transform:none}

/* Theme-neutral surfaces — work on both grounds, no lobby theme class needed. */
.lobbyLearn-eyebrow{color:#4a90d9}
.lobbyLearn-tut{background:rgba(128,128,128,.10); border-color:rgba(128,128,128,.42); color:inherit}
.lobbyLearn-tut:hover{background:rgba(74,144,217,.16); border-color:#4a90d9}

/* Compact layout for the small mobile (landscape) screen — the coach/tip/reveal shrink so they
   don't blanket the tiny 844×390 canvas. Toggled by .tut-mobile when #mobile-game is active. */
#tutCoach.tut-mobile{max-width:250px; padding:9px 11px; border-radius:11px}
#tutCoach.tut-mobile .tut-head{margin-bottom:5px; gap:6px}
#tutCoach.tut-mobile .tut-title{font-size:10px; letter-spacing:.1em}
#tutCoach.tut-mobile .tut-lantern{font-size:15px}
#tutCoach.tut-mobile .tut-step{font-size:10px}
#tutCoach.tut-mobile .tut-body{font-size:11.5px; line-height:1.4}
#tutCoach.tut-mobile .tut-body b{color:#7a5410}
#tutCoach.tut-mobile .tut-act{margin-top:9px; gap:6px}
#tutCoach.tut-mobile .tut-btn{font-size:11px; padding:6px 11px; border-radius:7px}
#tutCoach.tut-mobile .tut-prompt{font-size:11px}
#tutTip.tut-mobile{max-width:230px; right:10px; bottom:10px; padding:8px 10px 9px}
#tutTip.tut-mobile .tut-tipbody{font-size:11.5px; line-height:1.38}
#tutReveal.tut-mobile{max-width:210px; font-size:11px; padding:7px 9px}

@media (prefers-reduced-motion:reduce){#tutSpot,#tutCoach .tut-arrow{transition:none; animation:none}}

/* A card a scripted tutorial beat will not accept right now. Greyed and visibly not-the-move, but
 * still clickable — the click is intercepted so the coach can say WHY, which teaches more than a
 * dead card does. Only ever applied while a Monopoly tutorial beat forces a specific play. */
#monopolyHand .mExpandedContainer.tut-blocked{
  filter:grayscale(1) brightness(.5); opacity:.55; transition:filter .2s ease, opacity .2s ease}
#monopolyHand .mExpandedContainer.tut-blocked:hover{cursor:not-allowed}

/* A Market tile a scripted beat will not accept (e.g. Chance while the lesson is buying Community
 * Chest). Same treatment as a blocked hand card: visibly not-the-move, but still clickable so the
 * coach can say why rather than the tap just doing nothing. */
#mMarketRow .mMarketTile.tut-blocked{
  filter:grayscale(1) brightness(.5); opacity:.55; transition:filter .2s ease, opacity .2s ease}
#mMarketRow .mMarketTile.tut-blocked:hover{cursor:not-allowed}