/* タイトル画面の「チュートリアル」ボタンと、そこから開くポップアップ（title-tutorial.js）。
   ゲームを始めたら title-tutorial.js がこのファイルの <link> ごと消す。スマホ表示（ブラウザ版）の調整も最後にまとめて置く。 */

/* ---------- タイトルのボタン（「ゲームスタート」と同じく、辞書の準備ができてから出す） ---------- */
.ld-tutorial{
  display:none; align-items:center; justify-content:center; gap:10px;
  min-width:300px; min-height:58px; margin:0 auto 13px; padding:8px 32px 9px;
  border:3px solid #fff; border-radius:999px;
  background:linear-gradient(180deg,#fff 0%,#ffeef4 100%);
  color:#c65d86;
  box-shadow:0 0 0 2px #eeb0c6,0 4px 0 #e6a3bd,0 8px 14px #b575452e;
  font:900 26px/1.2 'M PLUS Rounded 1c',sans-serif; letter-spacing:2px;
  cursor:pointer; transition:transform .15s;
}
#loadOv.ld-ready .ld-tutorial{ display:flex; }
.ld-tutorial:hover{ transform:translateY(-2px); }
.ld-tutorial:active{ transform:translateY(2px); box-shadow:0 0 0 2px #eeb0c6,0 2px 0 #e6a3bd; }
.ld-tutorial:focus-visible{ outline:3px solid #ab689b; outline-offset:5px; }
.ld-tutorial-icon{ flex:none; width:30px; height:30px; }

/* ---------- ポップアップ（タイトルのカードと同じ位置に重ねる） ---------- */
.tutOv{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:inherit;
}
.tutCard{
  position:relative; display:flex; flex-direction:column;
  width:960px; min-height:810px; margin:0 25px; padding:24px 36px 30px;
  background:#fff9ef; border:6px solid #fff; border-radius:34px;
  box-shadow:0 0 0 3px #efb4c9,0 12px 0 #e6a5bd40,0 22px 45px #97665540;
  color:#855635; text-align:center; font-family:'M PLUS Rounded 1c',sans-serif;
  outline:none;
}
.tutCard::after{
  content:''; position:absolute; inset:8px; pointer-events:none;
  border:2px dashed #e4b1ba66; border-radius:24px;
}
.tutOv button:focus-visible{ outline:3px solid #b165aa; outline-offset:4px; }

.tutHead{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; min-height:54px; }
.tutTitle{
  justify-self:start; padding:6px 20px; border-radius:999px; white-space:nowrap;
  background:#fbe1ea; color:#c65d86; font:900 22px/1.3 'M PLUS Rounded 1c',sans-serif; letter-spacing:2px;
}
.tutSteps{ display:flex; gap:10px; margin:0; padding:0; list-style:none; }
.tutSteps li{
  display:grid; place-items:center; width:38px; height:38px;
  border:3px solid #f0cbd9; border-radius:50%; background:#fff;
  color:#d7a3b9; font:900 18px/1 'M PLUS Rounded 1c',sans-serif;
}
.tutSteps li.done{ border-color:#eeb0c6; background:#fbe1ea; color:#c65d86; }
.tutSteps li.cur{
  border-color:#fff; background:linear-gradient(180deg,#ffb1c8,#e2537e); color:#fff;
  box-shadow:0 0 0 2px #e2537e; transform:scale(1.12);
}
.tutClose{
  justify-self:end; display:grid; place-items:center; width:52px; height:52px; padding:0 0 3px;
  border:3px solid #fff; border-radius:50%; background:#fff; color:#c65d86;
  box-shadow:0 0 0 2px #eeb0c6,0 3px 0 #e6a3bd;
  font:900 30px/1 'M PLUS Rounded 1c',sans-serif; cursor:pointer;
}
.tutClose:hover{ background:#fff3f7; }
.tutClose:active{ transform:translateY(2px); box-shadow:0 0 0 2px #eeb0c6,0 1px 0 #e6a3bd; }

.tutSoundControls{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 28px; margin-top:14px; }
.tutSoundRow{ display:flex; align-items:center; gap:10px; color:#966342; font:800 18px/1.4 'M PLUS Rounded 1c',sans-serif; }
.tutSoundRow input{ width:150px; min-width:0; margin:0; accent-color:#d96791; cursor:pointer; }
.tutSoundRow input:focus-visible{ outline:3px solid #b165aa; outline-offset:4px; }
.tutSoundRow output{ min-width:4ch; text-align:right; font-variant-numeric:tabular-nums; }

.tutBody{ flex:1 1 auto; display:flex; flex-direction:column; }
.tutMission{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:16px;
  padding: 16px 3px 16px 22px;
  border:3px solid #f3d3df;
  border-radius:24px;
  background:#fff;
  box-shadow:0 4px 0 #f3d3df80;
  text-align:left;
}
.tutNum{
  flex:none; display:grid; place-items:center; width:58px; height:58px;
  border-radius:50%; background:linear-gradient(180deg,#ffdc59,#ffaa21);
  box-shadow:0 0 0 3px #fff,0 0 0 5px #e9a866;
  color:#fffdf4; font:400 32px/1 'Mochiy Pop One',sans-serif;
  -webkit-text-stroke:5px #b66b29; paint-order:stroke fill; text-shadow:none;
}
.tutMissionText{ min-width:0; }
/* PCでは1行に収まる大きさ。スマホなどで折り返すときは、語の切れ目で折り返して行の長さをそろえる。 */
.tutLead,.tutGoal,.tutStatus,.tutDoneText{ word-break:auto-phrase; text-wrap:balance; }
.tutLead{color:#966342;font: 800 26px/1.5 'M PLUS Rounded 1c',sans-serif;}
.tutGoal{margin-top:2px;color:#c0507c;font: 900 27px/1.45 'M PLUS Rounded 1c',sans-serif;}

.tutPlay{ position:relative; align-self:center; margin-top:26px; }
.tutStamp{
  position:absolute; right:-78px; top:-20px; z-index:8;
  display:grid; place-items:center; width:150px; height:150px;
  border:7px double #e2537e; border-radius:50%; background:#fffdf6e6;
  box-shadow:0 6px 14px #b575454d;
  color:#e2537e; font:400 50px/1 'Mochiy Pop One',sans-serif;
  transform:rotate(-14deg); pointer-events:none;
}
.tutStamp[hidden]{ display:none; }
.tutStamp.pop{ animation:tutStampPop .5s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes tutStampPop{
  0%{ opacity:0; transform:rotate(-14deg) scale(2.2); }
  60%{ opacity:1; transform:rotate(-14deg) scale(.9); }
  100%{ opacity:1; transform:rotate(-14deg) scale(1); }
}
.tutNote{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:32px; margin-top:12px; color:#8a6a55; font:800 20px/1.5 'M PLUS Rounded 1c',sans-serif; }
.tutSwatch{ flex:none; width:22px; height:22px; border:2px solid #fff; border-radius:6px; background:var(--c-lis); box-shadow:0 0 0 1px #0000001f; }
.tutStatus{ min-height:40px; margin-top:4px; color:#966342; font:900 24px/1.6 'M PLUS Rounded 1c',sans-serif; }
.tutStatus.ng{ color:#d0485f; }
.tutStatus.ok{ color:#e2537e; }
.tutActions{ display:flex; align-items:center; justify-content:center; gap:22px; min-height:76px; margin-top:auto; padding-top:12px; }

.tutBtn{
  min-width:220px; min-height:64px; padding:8px 34px;
  border:4px solid #fff; border-radius:999px; background:#fff; color:#c65d86;
  box-shadow:0 0 0 2px #eeb0c6,0 5px 0 #e6a3bd;
  font:900 28px/1.2 'M PLUS Rounded 1c',sans-serif; letter-spacing:2px;
  cursor:pointer; transition:transform .15s;
}
.tutBtn:hover{ transform:translateY(-2px); }
.tutBtn:active{ transform:translateY(2px); box-shadow:0 0 0 2px #eeb0c6,0 2px 0 #e6a3bd; }
.tutBtn.primary{
  background:linear-gradient(180deg,#ffb1c8,#e2537e); color:#fff;
  box-shadow:0 0 0 2px #e2537e,0 5px 0 #b33a5e; text-shadow:0 2px 0 #b33a5e80;
}
.tutBtn.primary:active{ box-shadow:0 0 0 2px #e2537e,0 2px 0 #b33a5e; }
.tutNext::after{
  content:''; display:inline-block; margin-left:12px; vertical-align:1px;
  border-left:15px solid currentColor; border-top:10px solid transparent; border-bottom:10px solid transparent;
}
.tutActions .tutStart{ width:500px; min-height:88px; margin:0; font-size:40px; }

/* 完了ページ */
.tutDone{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:10px 0; }
.tutTiles{ display:flex; gap:10px; --cell:100px; margin-bottom:10px; }
.tutDoneTitle{
  display:flex; align-items:center; gap:18px;
  color:#e2537e; font:400 54px/1.3 'Mochiy Pop One',sans-serif; text-shadow:0 4px 0 #f7c5d6;
}
.tutDoneText{ color:#966342; font:800 30px/1.65 'M PLUS Rounded 1c',sans-serif; }

/* ---------- パネル（ゲームの #board と同じ見た目。panel-design.css の指定を盤面の外でも使う） ---------- */
.tutPanels{ --cellFont:calc(var(--cell) * var(--tut-font-ratio,.61)); }
.tutBoard{
  --cell:110px;
  position:relative; display:grid; grid-template-columns:repeat(5,var(--cell)); gap:8px;
  touch-action:none; user-select:none; -webkit-user-select:none; cursor:pointer;
}
.tutBoard.tutLocked{ cursor:default; }
.tutPanels .cell{ --panel-base:var(--tile); }
.tutPanels .cell.lite{ --panel-base:var(--tile-lite); }
.tutPanels .cell.f-s{ --panel-base:var(--c-str); }
.tutPanels .cell.f-l{ --panel-base:var(--c-lis); }
.tutPanels .cell.sel{ --panel-base:var(--sel); }
.tutPanels[data-panel-design="current"] .cell{ background:var(--panel-base); }
.tutPanels[data-panel-design="current"] .panelSurface{ display:none; }
.tutPanels[data-panel-design]:not([data-panel-design="current"]) .cell{ background:transparent; box-shadow:none; isolation:isolate; }
.tutPanels[data-panel-design]:not([data-panel-design="current"]) .cell.sel{ background:transparent !important; }
.tutPanels[data-panel-design]:not([data-panel-design="current"]) .cell > span{ position:relative; z-index:2; }
.tutPanels[data-panel-design="drawing"] .cell:not(.sel) > span{ text-shadow:0 2px 1px #51412133; }
.tutPanels .cell.ng .panelSurface{ visibility:hidden; }
body.lightMode .tutPanels .panelSurface{ box-shadow:inset 0 -4px 0 #783c0029,0 2px 0 #8c5a8b29; }
body.lightMode .tutPanels .panelSurface::after{ filter:none; }
.tutPanels .cell.longFindGlow::before{
  content:''; position:absolute; inset:0; z-index:4; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 8px 2px #ffe75a,0 0 18px 5px #ffd630b3;
  animation:longFindGlow var(--find-duration) ease-in-out both; animation-delay:var(--find-delay,0ms);
}
.tutSelRect{
  position:absolute; display:none; z-index:5; pointer-events:none;
  border:4px solid rgba(44,110,117,.9); border-radius:10px; background:rgba(70,160,170,.25);
}

body.lightMode .tutStamp.pop{ animation:none; }
@media (prefers-reduced-motion:reduce){
  .ld-tutorial,.tutBtn{ transition:none; }
  .tutStamp.pop,.tutPanels .cell.longFindGlow::before{ animation:none; }
}

/* ---------- スマホ表示（ブラウザ版） ---------- */
html[data-device="mobile"] .ld-tutorial{
  width:72%; min-width:0; min-height:44px; margin-bottom:4px; padding:6px 16px;
  border-width:2px; font-size:17px; letter-spacing:1px;
}
html[data-device="mobile"] .ld-tutorial-icon{ width:22px; height:22px; }
html[data-device="mobile"] .tutOv{ padding:10px; justify-content:center; }
html[data-device="mobile"] .tutCard{
  width:100%; min-height:0; max-height:100%; margin:0; padding:12px 12px 14px;
  border-width:4px; border-radius:22px; overflow-y:auto; overscroll-behavior:contain;
}
html[data-device="mobile"] .tutCard::after{ inset:5px; border-radius:16px; }
html[data-device="mobile"] .tutHead{ grid-template-columns:auto 1fr auto; gap:6px; min-height:36px; }
html[data-device="mobile"] .tutTitle{ padding:3px 10px; font-size:13px; letter-spacing:1px; }
html[data-device="mobile"] .tutSteps{ gap:5px; }
html[data-device="mobile"] .tutSteps li{ width:24px; height:24px; border-width:2px; font-size:12px; }
html[data-device="mobile"] .tutClose{ width:34px; height:34px; border-width:2px; font-size:21px; }
html[data-device="mobile"] .tutSoundControls{ gap:4px 14px; margin-top:10px; }
html[data-device="mobile"] .tutSoundRow{ gap:6px; font-size:12px; }
html[data-device="mobile"] .tutSoundRow input{ width:80px; }
html[data-device="mobile"] .tutMission{ gap:10px; margin-top:10px; padding:10px 12px; border-width:2px; border-radius:16px; }
html[data-device="mobile"] .tutNum{ width:36px; height:36px; font-size:20px; -webkit-text-stroke-width:3px; box-shadow:0 0 0 2px #fff,0 0 0 4px #e9a866; }
html[data-device="mobile"] .tutLead{ font-size:13px; }
html[data-device="mobile"] .tutGoal{ font-size:15px; }
html[data-device="mobile"] .tutPlay{ margin-top:16px; }
html[data-device="mobile"] .tutBoard{ --cell:min(76px,calc((100vw - 78px) / 5)); gap:5px; }
html[data-device="mobile"] .tutStamp{ right:-10px; top:-24px; width:82px; height:82px; border-width:5px; font-size:27px; }
html[data-device="mobile"] .tutNote{ gap:6px; min-height:22px; margin-top:8px; font-size:12px; }
html[data-device="mobile"] .tutSwatch{ width:15px; height:15px; border-radius:4px; }
html[data-device="mobile"] .tutStatus{ min-height:44px; margin-top:2px; font-size:14px; line-height:1.55; }
html[data-device="mobile"] .tutActions{ flex-wrap:wrap; gap:10px; min-height:54px; padding-top:8px; }
html[data-device="mobile"] .tutBtn{ flex:1 1 0; min-width:0; min-height:46px; padding:6px 12px; border-width:3px; font-size:17px; letter-spacing:1px; }
html[data-device="mobile"] .tutNext::after{ margin-left:8px; border-left-width:10px; border-top-width:7px; border-bottom-width:7px; }
html[data-device="mobile"] .tutActions .tutStart{ flex:1 1 100%; width:100%; min-height:58px; font-size:22px; }
html[data-device="mobile"] .tutDone{ gap:10px; padding:18px 0 8px; }
html[data-device="mobile"] .tutTiles{ --cell:56px; gap:6px; margin-bottom:6px; }
html[data-device="mobile"] .tutDoneTitle{ gap:10px; font-size:24px; text-shadow:0 2px 0 #f7c5d6; }
html[data-device="mobile"] .tutDoneText{ font-size:16px; }