/* A guided spotlight on the real table. Card lives over the existing dialogue,
   leaving the board itself visible at every step. */
.tutorial-overlay {position:fixed;inset:0;z-index:76;pointer-events:none;isolation:isolate;}
.tutorial-shield {position:absolute;inset:0;pointer-events:auto;}
.tutorial-overlay[data-tutorial-step="7"] .tutorial-shield,
.tutorial-overlay[data-tutorial-step="8"] .tutorial-shield {pointer-events:none;}
.tutorial-spotlight {
  position:fixed;pointer-events:none;z-index:1;
  border:2px solid #ffdc86;border-radius:12px;
  box-shadow:0 0 0 200vmax #04100dc4,0 0 0 5px #f4c98344,0 0 34px 8px #ffdf895e;
  transition:left .3s ease,top .3s ease,width .3s ease,height .3s ease;
}
.tutorial-overlay[data-tutorial-step="7"] .tutorial-spotlight,
.tutorial-overlay[data-tutorial-step="8"] .tutorial-spotlight {
  box-shadow:0 0 0 200vmax #04100d91,0 0 0 5px #f4c98355,0 0 36px 8px #ffdf895e;
}
.tutorial-card {
  position:absolute;z-index:3;pointer-events:auto;
  bottom:max(7px,env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%);width:min(calc(100vw - 14px),550px);
  max-height:48dvh;overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(120deg,#375c47,#214134 85%);
  border:1.5px solid #e9cd8c;border-radius:12px;
  box-shadow:0 10px 35px #020e0a8a,0 0 0 3px #fff1bf22;
  color:#fff1d8;
}
.tutorial-head {display:flex;align-items:center;gap:7px;min-height:30px;padding:5px 10px 4px;
  border-bottom:1px solid #839f7e8a;}
.tutorial-head>span {font-size:11px;font-weight:850;letter-spacing:.07em;color:#ffe5ab;}
.tutorial-count {font-size:10px;color:#c2d8c1;margin-left:auto;font-variant-numeric:tabular-nums;}
.tutorial-head button {
  color:#fff0c5;background:#365f47;border:1px solid #c7b789;
  border-radius:16px;min-height:28px;padding:3px 10px;font-size:11px;font-weight:750;
  touch-action:manipulation;
}
.tutorial-progress {height:3px;background:#19372d;}
.tutorial-progress i {display:block;height:100%;background:#f2d487;transition:width .3s ease;}
.tutorial-story {display:flex;align-items:center;gap:8px;padding:6px 10px 2px 4px;min-height:104px;}
.tutorial-face-frame {position:relative;align-self:stretch;overflow:hidden;flex:0 0 89px;max-height:116px;}
.tutorial-face-frame img {
  width:150%;max-width:none;height:auto;position:absolute;left:50%;top:-1px;
  transform:translateX(-50%);filter:drop-shadow(0 2px 4px #0009);
}
.tutorial-dialogue {min-width:0;flex:1;}
.tutorial-dialogue strong {font-size:11px;color:#ffdf9c;}
.tutorial-dialogue h2 {font-size:15px;color:#fff2c7;line-height:1.35;margin:3px 0;}
.tutorial-dialogue p {font-size:12px;line-height:1.6;margin:3px 0 0;color:#f4f1e6;}
.tutorial-foot {display:flex;justify-content:flex-end;padding:5px 10px 10px;min-height:42px;}
.tutorial-foot button {
  background:#e8bd6d;color:#182d24;border:1px solid #ffe2a9;
  border-radius:8px;min-height:37px;width:min(100%,225px);
  font-size:13px;font-weight:850;touch-action:manipulation;
}
.tutorial-do {width:100%;display:flex;justify-content:center;align-items:center;
  min-height:32px;color:#ffdc90;font-size:12px;font-weight:850;letter-spacing:.03em;
  animation:tutorial-prompt-pulse 1.5s ease-in-out infinite alternate;}
@keyframes tutorial-prompt-pulse{to{filter:brightness(1.5);transform:scale(1.035);}}
.game-shell.tutorial-predeal .hand .tile,
.game-shell.tutorial-predeal .opponent .tile-backs,
.game-shell.tutorial-predeal .river .discard-tile,
.game-shell.tutorial-predeal .river .riichi-stick,
.game-shell.tutorial-predeal .coach-waiting-tiles {visibility:hidden;}
.game-shell.tutorial-predeal .center-mark .table-last-move {visibility:hidden;}
/* Genuine tile examples: one glance beats memorizing a sentence about sets. */
.tutorial-example {margin:1px 8px 3px;padding:5px 4px 4px;background:#142e25c7;border:1px solid #b8a47770;border-radius:7px;}
.tutorial-example-groups {display:flex;justify-content:center;align-items:flex-start;gap:5px;min-width:0;}
.tutorial-tile-group {flex:0 1 auto;min-width:0;text-align:center;animation:tutorial-group-reveal .32s ease-out both;animation-delay:calc(var(--group-order,0) * 55ms);}
.tutorial-tile-group-tiles {display:flex;justify-content:center;gap:1px;margin:0 auto 2px;}
.tutorial-tile-group .discard-tile {width:18px;height:25px;font-size:14px;flex:0 0 18px;box-shadow:0 2px 0 #99b3a3;}
.tutorial-tile-group .discard-tile .sub {font-size:7px;margin-top:1px;}
.tutorial-tile-group small {display:block;font-size:8px;white-space:nowrap;line-height:1.2;color:#f4deab;}
.tutorial-example-caption {text-align:center;font-size:9px;line-height:1.4;color:#c4d3bf;margin-top:4px;}
@keyframes tutorial-group-reveal {from{opacity:0;transform:translateY(-6px) scale(.92)}to{opacity:1;transform:none}}
@media(max-width:390px) {
 .tutorial-card {width:calc(100vw - 10px);}
 .tutorial-story {gap:5px;min-height:104px;padding:5px 7px 3px 2px;}
 .tutorial-face-frame {flex-basis:74px;max-height:105px;}
 .tutorial-dialogue h2 {font-size:14px;}
 .tutorial-dialogue p {font-size:11.5px;line-height:1.56;}
 .tutorial-head {padding:4px 7px;}
 .tutorial-example {margin:1px 6px 2px;padding:4px 2px;}
 .tutorial-example-groups {gap:3px;}
 .tutorial-tile-group .discard-tile {width:16px;height:23px;font-size:12px;flex-basis:16px;}
 .tutorial-tile-group .discard-tile .sub {font-size:6px;}
 .tutorial-tile-group small {font-size:7px;}
 .tutorial-foot {padding:4px 8px 8px;}
 .tutorial-foot button {min-height:34px;font-size:12px;}
}
@media(max-height:610px) {
 .tutorial-card {max-height:48dvh;}
 .tutorial-story {min-height:80px;}
 .tutorial-dialogue h2 {font-size:13px;}
 .tutorial-dialogue p {font-size:11px;line-height:1.42;}
 .tutorial-face-frame {flex-basis:66px;max-height:92px;}
 .tutorial-head {min-height:27px;}
 .tutorial-foot {min-height:34px;padding-bottom:6px;}
 .tutorial-example {padding:2px 3px;}
 .tutorial-tile-group .discard-tile {height:19px;}
 .tutorial-example-caption {margin-top:2px;}
 .tutorial-foot button {min-height:30px;}
}
@media(prefers-reduced-motion:reduce){
 .tutorial-spotlight,.tutorial-progress i {transition:none;}
 .tutorial-do,.tutorial-tile-group {animation:none;}
}