/* tutorials (client/js/tutorial.js): the puzzle-mode screen as ONE card — title bar, the board with a speech bubble over it,
   a hint line and two buttons (back / next) */
#tutorialProgress,#tutorialBar,#tutorialMarks,#tutorialBubble,#tutorialFast{display:none}
/* the fast-forward label: the board's top left corner, while the moves between the speeches go by fast */
body[data-mode="puzzle"][data-tutorial="1"] #tutorialFast:not([hidden]){display:block;position:absolute;left:4%;top:3.5%;z-index:4;padding:4px 14px;line-height:1.5;border-radius:999px;background:rgba(30,18,6,.82);color:#f6dc8a;box-shadow:0 0 0 1.5px #7b5a1c;font-size:clamp(14px,3vw,18px);font-weight:700;letter-spacing:.04em;pointer-events:none;animation:tutorialFastBlink 1.1s ease-in-out infinite}
@keyframes tutorialFastBlink{50%{opacity:.7}}
body[data-mode="puzzle"][data-tutorial="1"] #puzzlePanel,
body[data-mode="puzzle"][data-tutorial="1"] #puzzleBoardActions{display:none!important}

/* the card is #app itself (it holds the header, the board and the bar) */
body[data-mode="puzzle"][data-tutorial="1"] #app{display:flex;flex-direction:column;align-items:stretch;gap:14px;box-sizing:border-box;width:calc(var(--S,600px) + 46px);max-width:calc(100% - 24px);min-height:0;margin:20px auto;padding:18px 20px 20px;
  background:linear-gradient(160deg,#4a3320,#1e140c);border:3px solid var(--brass);border-radius:18px;box-shadow:0 0 0 2px #000,0 18px 44px rgba(0,0,0,.7),inset 0 0 0 1px rgba(246,220,138,.18)}
/* a narrow card: the title keeps a few characters' width and moves under the back button (with the progress bar), instead of
   breaking after every character — a column of characters would make the header so tall that the board shrank to its smallest */
body[data-mode="puzzle"][data-tutorial="1"] #puzzleHeader{display:flex;flex-wrap:wrap;row-gap:8px;align-items:center;width:100%;min-height:0;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
body[data-mode="puzzle"][data-tutorial="1"] #puzzleHeader::before,body[data-mode="puzzle"][data-tutorial="1"] #puzzleHeader::after{display:none}
body[data-mode="puzzle"][data-tutorial="1"] #puzzleHeader .backBtn{flex:none}
body[data-mode="puzzle"][data-tutorial="1"] #puzzleTitle{flex:0 1 auto;min-width:min(7em,100% - 48px);margin:0;padding:0 14px;font-size:22px;line-height:1.3;text-align:left}
body[data-mode="puzzle"][data-tutorial="1"] #tutorialProgress{display:block;flex:1;min-width:48px;height:8px;margin:0;border-radius:4px;background:#0006;box-shadow:inset 0 0 0 1px #7b5a1c88;overflow:hidden}
#tutorialProgress i{display:block;height:100%;width:0;border-radius:4px;background:var(--brass);transition:width .3s}

body[data-mode="puzzle"][data-tutorial="1"] #boardWrap{align-self:center;overflow:hidden;border-radius:14px}
body[data-mode="puzzle"][data-tutorial="1"] #board,body[data-mode="puzzle"][data-tutorial="1"] #tutorialMarks{transform-origin:0 0}
body[data-mode="puzzle"][data-tutorial="1"] #tutorialMarks{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
body[data-mode="puzzle"][data-tutorial="1"] #tutorialBubble.strong:not([hidden]){font-size:clamp(16px,3vw,21px);font-weight:900;color:#5a0d06;-webkit-text-stroke:.35px currentColor}
body[data-mode="puzzle"][data-tutorial="1"] #tutorialBubble:not([hidden]){display:block;position:absolute;left:5%;right:5%;z-index:3;padding:10px 14px;border-radius:12px;background:#ecdcb6;color:#2a1a08;box-shadow:0 0 0 2px #7b5a1c,0 4px 12px rgba(0,0,0,.55);line-height:1.7;font-size:clamp(14px,2.6vw,18px);font-weight:700;white-space:pre-line;text-align:left;pointer-events:none;transition:top .2s,bottom .2s}
body[data-mode="puzzle"][data-tutorial="1"] #tutorialBar{display:flex;flex-direction:column;gap:10px;width:100%;line-height:1.6}
#tutorialHint{margin:0;min-height:1.6em;text-align:center;font-size:16px;color:var(--teal)}
#tutorialNav{display:flex;gap:10px}
#tutorialBack{flex:1 1 0;min-height:54px;font-size:18px}
#tutorialNext{flex:2 1 0;min-height:54px;font-size:20px}
#tutorialMenu{flex:1 1 0;min-height:54px;font-size:16px}
#tutorialMenu[hidden]{display:none!important}
/* the last page with メニューへ戻る (#tutorialNav.stacked): もどる on the left; on the right, the next button (「次：工場の連結」 / CPU戦で遊ぶ) above
   メニューへ戻る, both as wide as the column. A long label breaks only after 「次：」 (a zero-width space) or between words */
#tutorialNav.stacked{display:grid;grid-template-columns:1fr 2fr;grid-template-areas:"back next" "back menu";row-gap:6px}
#tutorialNav.stacked #tutorialBack{grid-area:back}
#tutorialNav.stacked #tutorialNext{grid-area:next;min-height:44px;word-break:keep-all;line-height:1.3;padding:5px 10px}
#tutorialNav.stacked #tutorialMenu{grid-area:menu;min-height:34px;padding:4px 10px;font-size:15px}
#tutorialNav button[hidden]{display:flex;visibility:hidden}
#tutorialNav button:disabled{opacity:.5;cursor:default}

/* highlights: they appear with an animation (the arrow is drawn from its tail) and fade away once the player has acted */
#tutorialMarks .mk{transform-box:fill-box;transform-origin:center;animation:tutorialMarkIn .45s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:var(--d,0s)}
#tutorialMarks .pulse{animation:tutorialPulse 1.4s ease-in-out infinite}
#tutorialMarks .arrow{animation:none}
#tutorialMarks .arrow .shaft{stroke-dasharray:var(--len);animation:tutorialArrowDraw .45s ease-out both;animation-delay:var(--d,0s)}
#tutorialMarks .arrow .tip{animation:tutorialFade .2s ease-out both;animation-delay:calc(var(--d,0s) + .3s)}
#tutorialMarks .mk.still,#tutorialMarks .mk.still .shaft,#tutorialMarks .mk.still .tip{animation:none}
#tutorialMarks .mk.out{animation:tutorialMarkOut .3s ease-in both;animation-delay:0s}
@keyframes tutorialMarkIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes tutorialMarkOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.15)}}
@keyframes tutorialArrowDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes tutorialFade{from{opacity:0}to{opacity:1}}
@keyframes tutorialPulse{0%,100%{opacity:.55}50%{opacity:1}}
/* the title modal at the start: the backdrop fades in, the card pops up, then the title and the button follow */
#tutorialIntro[open]{animation:tutorialIntroIn .55s cubic-bezier(.2,.9,.3,1.15) both}
#tutorialIntro[open]::backdrop{animation:tutorialFade .5s ease-out both}
#tutorialIntro[open] h2{animation:tutorialIntroTitle .7s cubic-bezier(.2,.8,.3,1) .25s both}
#tutorialIntro[open] .btn{animation:tutorialIntroBtn .5s ease-out .7s both}
@keyframes tutorialIntroIn{from{opacity:0;transform:translateY(24px) scale(.86)}to{opacity:1;transform:none}}
@keyframes tutorialIntroTitle{from{opacity:0;letter-spacing:.4em;transform:scale(1.12)}to{opacity:1;letter-spacing:normal;transform:none}}
@keyframes tutorialIntroBtn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  #tutorialIntro[open],#tutorialIntro[open]::backdrop,#tutorialIntro[open] h2,#tutorialIntro[open] .btn{animation:none}
  #tutorialMarks .mk,#tutorialMarks .pulse,#tutorialMarks .arrow .shaft,#tutorialMarks .arrow .tip{animation:none}
  #tutorialMarks .mk.out{animation:none;opacity:0}
}
@media(max-width:920px){
  body[data-mode="puzzle"][data-tutorial="1"] #app{width:calc(var(--S,320px) + 30px);margin:12px auto;padding:12px 12px 14px;gap:10px}
  body[data-mode="puzzle"][data-tutorial="1"] #puzzleTitle{font-size:clamp(14px,4vw,18px);padding:0 8px}
  #tutorialBack{font-size:16px}
}
/* 「決着」: the game's own result over the board (its buttons are for real games); 次へ as パス */
body[data-mode="puzzle"][data-tutorial="1"] #banner{display:block!important;pointer-events:none!important;z-index:2}   /* (puzzles hide it) */
body[data-mode="puzzle"][data-tutorial="1"] #banner .bnbtns{display:none!important}