.gt-page--tutorial{height:100vh;min-height:0;padding-bottom:0;overflow:hidden;}
.tutorialShell{width:min(1460px,calc(100vw - 24px));height:min(800px,calc(100vh - 140px));min-height:580px;margin:0 auto;padding:0 0 8px;}
.tutorialFrame{height:100%;display:flex;flex-direction:column;background:linear-gradient(var(--gt-frame-top),var(--gt-frame-bot));border:3px solid var(--gt-frame-border);border-radius:26px;box-shadow:0 18px 34px rgba(0,0,0,.18);overflow:hidden;}
.tutorialTopbar{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:linear-gradient(var(--gt-sky-top),var(--gt-sky-bot));border-bottom:3px solid var(--gt-frame-border);}
.tutorialTitle{font-size:30px;font-weight:900;font-style:italic;letter-spacing:.6px;color:#f6c744;text-shadow:1px 1px 0 #7e5f0a,2px 2px 0 rgba(255,255,255,.2);}
.tutorialStatus{display:flex;align-items:center;gap:14px;font-weight:900;color:#25475d;}
.tutorialBadge{background:#fff4bb;border:1px solid #c49b20;border-radius:999px;padding:6px 12px;color:#664800;font-size:13px;}
.tutorialClock{font-size:20px;min-width:64px;text-align:right;}
.tutorialGrid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(650px,1fr) 390px;gap:14px;padding:14px;align-items:stretch;}
.tutorialSceneCard,.tiffanyCard,.lessonCard{min-height:0;background:linear-gradient(#f9f9fc,#dfdfe7);border:3px solid var(--gt-panel-border);border-radius:18px;overflow:hidden;box-shadow:0 10px 18px rgba(0,0,0,.10);}
.tutorialVenueBar{height:47px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:linear-gradient(#333a44,#13171f);color:#f6c744;font-weight:950;letter-spacing:.1em;text-shadow:0 2px #000;}
.tutorialTimer{font-size:26px;line-height:1;color:#fff;border-radius:50%;min-width:38px;text-align:center;background:#d42d2d;padding:6px;}
.tutorialSceneCard{display:flex;flex-direction:column;}.tutorialScene{position:relative;flex:1;min-height:0;overflow:hidden;background:#0d1014;}
.tutorialBackground{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.08) brightness(.86);transition:filter .28s ease;}
.tutorialScene.is-intro .tutorialBackground{filter:saturate(.98) brightness(.76);}
.tutorialScene.is-intro::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 80%,rgba(255,220,93,.20),transparent 28%);}

/* Instruction banner */
.tutorialInstruction{position:absolute;z-index:12;top:13px;left:50%;transform:translateX(-50%);max-width:min(560px,88%);padding:11px 18px;background:rgba(5,8,12,.86);border:1px solid rgba(255,255,255,.38);border-radius:16px;color:#fff;font-size:16px;font-weight:850;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.52);line-height:1.4;}

/* ── Sprites: BIGGER ── */
.tutorialPlayer{appearance:none;position:absolute;z-index:5;width:240px;height:420px;border:0;background:transparent;padding:0;cursor:pointer;transition:left .35s ease,right .35s ease,filter .15s,transform .15s;}
.tutorialPlayer:hover:not(.is-locked),.tutorialPlayer.is-prompt{filter:drop-shadow(0 0 12px rgba(255,222,69,.98));}
.tutorialPlayer.is-prompt{animation:tutorialPulse 1.1s ease-in-out infinite;}
.tutorialPlayer.is-locked{cursor:default;}
.tutorialPlayer.is-hidden{display:none;}
/* Position 4-up: distribute evenly */
.tutorialPlayer--1{left:1%;bottom:14px;}
.tutorialPlayer--2{left:26%;bottom:14px;}
.tutorialPlayer--3{right:26%;bottom:14px;}
.tutorialPlayer--4{right:1%;bottom:14px;}
/* Intro: single large hero sprite */
.tutorialScene.is-intro .tutorialPlayer--1{left:50%;transform:translateX(-50%);width:280px;height:490px;bottom:14px;}
.tutorialScene.is-intro .tutorialAvatar{height:400px;max-width:278px;}
.tutorialScene.is-intro .tutorialPlate{box-shadow:0 6px 18px rgba(0,0,0,.24);}
/* Avatar image */
.tutorialAvatar{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);width:auto;height:342px;max-width:234px;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.54));transition:filter .16s ease,transform .16s ease;}
.tutorialAvatar.is-performing{animation:tutorialActionPop .8s ease-in-out;}
.tutorialAvatar.is-hit{animation:tutorialHit .82s ease-in-out;filter:drop-shadow(0 0 16px rgba(255,85,68,.9));}
.tutorialAvatar.is-gifting{animation:tutorialGift 1s ease-in-out;filter:drop-shadow(0 0 16px rgba(255,217,88,.92));}
/* Name plate */
.tutorialPlate{position:absolute;bottom:0;left:0;right:0;min-height:56px;border:2px solid #697383;border-radius:12px;background:linear-gradient(#f1f2f6,#babfca);display:flex;flex-direction:column;justify-content:center;padding:4px 8px;color:#172331;text-shadow:0 1px #fff;font-size:13px;font-weight:850;}
.tutorialPlate strong{color:#153c67;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.tutorialPlate span{font-size:12px;}.tutorialPlate b{font-size:15px;color:#a32d19;margin-left:4px;}
/* Speech bubble */
.tutorialBubble{position:absolute;z-index:8;left:50%;bottom:398px;transform:translateX(-50%);min-width:120px;max-width:178px;padding:9px 10px;border-radius:14px;background:#fff;border:2px solid #7b8090;color:#202a34;font-size:12px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.24);}
.tutorialBubble:after{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);border-width:10px 8px 0;border-style:solid;border-color:#fff transparent transparent;}
/* Mojo pop */
.mojoChange{position:absolute;z-index:10;right:12px;bottom:46px;background:#19a45b;color:#fff;border-radius:999px;padding:5px 8px;font-weight:950;font-size:16px;text-shadow:0 1px rgba(0,0,0,.2);animation:mojoRise 1.65s ease-out forwards;}
.mojoChange.minus{background:#c92e38;}

/* Move picker */
.tutorialMovePicker{position:absolute;z-index:25;top:74px;left:50%;transform:translateX(-50%);width:min(590px,93%);padding:14px;border:2px solid #8a8d98;border-radius:20px;background:rgba(225,226,233,.98);box-shadow:0 20px 40px rgba(0,0,0,.5);color:#131820;}
.pickerHeader{display:flex;align-items:center;justify-content:space-between;font-size:18px;font-weight:950;margin-bottom:10px;}.pickerHeader button{border:0;background:transparent;font-size:28px;font-weight:900;cursor:pointer;line-height:1;color:#3a3e48;}
.moveColumns{display:grid;grid-template-columns:1fr 1fr;gap:14px;}.moveColumns h3{font-size:14px;margin:0 0 8px;color:#33465c;text-align:center;font-weight:900;}
.moveColumns button,.defendButton{display:block;width:100%;padding:9px 7px;margin:5px 0;border-radius:10px;border:1px solid #8a8f9c;background:linear-gradient(#fff,#c9ccd4);font-weight:850;cursor:pointer;color:#18202c;font-size:13px;transition:filter .12s;}.moveColumns button:hover,.defendButton:hover{filter:brightness(1.06);}.moveColumns button[disabled]{opacity:.3;cursor:not-allowed;filter:none;}
.defendButton{width:50%;margin:10px auto 1px;background:linear-gradient(#fff8ce,#ecd572);}

/* Right rail */
.tutorialRail{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0;overflow:hidden;}.railHeading{background:linear-gradient(var(--gt-menu-top),var(--gt-menu-bot));border-bottom:2px solid var(--gt-frame-border);padding:10px 14px;font-size:19px;font-weight:950;color:#163244;}
.tiffanyPortraitBox{height:210px;margin:12px;border-radius:17px;border:1px solid rgba(0,0,0,.13);background:radial-gradient(circle at 50% 18%,#ffffff 0%,#eef2f6 56%,#d9dde6 100%);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -12px 22px rgba(0,0,0,.04);}
#tiffanyPortraitWrap{position:relative;width:100%;height:100%;display:block;overflow:hidden;}
#tiffanyPortraitStage{position:relative;width:391px;height:391px;transform-origin:top left;}
#tiffanyPortraitStage .tiffLayer{position:absolute;left:0;top:0;transform-origin:top left;image-rendering:auto;}
.tiffanyReaction{min-height:46px;margin:0 13px 13px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #d4d6dd;text-align:center;font-weight:800;color:#344252;font-size:14px;line-height:1.35;}
/* Tutorial chat log */
.lessonCard{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.tutorialLog{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;background:linear-gradient(#fff,#f8f9fc);margin:12px;padding:10px;border:1px solid #d4d5dc;border-radius:12px;display:flex;flex-direction:column;gap:8px;box-shadow:inset 0 2px 5px rgba(0,0,0,.04);}
.tutorialMessage{padding:9px 11px;border-radius:10px;background:#eef1f6;color:#253242;font-size:14px;line-height:1.4;}.tutorialMessage strong{color:#143b6b;}.tutorialMessage.system{background:#fff4c8;color:#665000;font-weight:850;border:1px solid rgba(176,134,24,.15);}

/* Buttons */
.tutorialButtons{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:0 12px 13px;}
.tutorialBtn{appearance:none;text-decoration:none;border:2px solid var(--gt-btn-border);border-radius:12px;padding:11px 15px;background:linear-gradient(var(--gt-btn-top),var(--gt-btn-bot));color:#1b2834;font-weight:900;cursor:pointer;font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 4px 10px rgba(0,0,0,.08);transition:filter .12s;}
.tutorialBtn:hover{filter:brightness(1.05);color:#111;}
.tutorialBtn--gold{background:linear-gradient(#ffe982,#e9bd2f);border-color:#a87d14;}
#startTutorial{flex:1;min-width:180px;font-size:15px;}
.tutorialBtn--secondary{margin-left:auto;}
.tutorialBtn--skip{background:transparent;border-color:#aaa;color:#555;font-size:13px;padding:8px 12px;}
.tutorialBtn--skip:hover{background:rgba(0,0,0,.04);color:#222;}
.hidden{display:none!important;}

/* Animations */
@keyframes tutorialPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes tutorialActionPop{0%,100%{transform:translateX(-50%) scale(1)}30%{transform:translateX(-50%) scale(1.09)}58%{transform:translateX(-50%) scale(1.03)}}
@keyframes tutorialHit{0%,100%{transform:translateX(-50%) rotate(0)}18%{transform:translateX(calc(-50% - 9px)) rotate(-4deg)}38%{transform:translateX(calc(-50% + 10px)) rotate(5deg)}58%{transform:translateX(calc(-50% - 5px)) rotate(-2deg)}}
@keyframes tutorialGift{0%,100%{transform:translateX(-50%) scale(1)}38%{transform:translateX(-50%) scale(1.1)}64%{transform:translateX(-50%) scale(1.04)}}
@keyframes mojoRise{0%{opacity:0;transform:translateY(10px) scale(.8)}18%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-46px) scale(1)}}

/* Tablet breakpoint */
@media(max-width:1080px){
  .gt-page--tutorial{height:auto;min-height:100vh;overflow:auto}
  .tutorialShell{height:auto;min-height:0}
  .tutorialFrame{height:auto}
  .tutorialGrid{display:block}
  /* flex:none — with flex:1 the 0 flex-basis beat height:600px and the scene collapsed to 0px on 701-1080px screens */
  .tutorialScene{flex:none;height:600px;min-height:0}
  .tutorialRail{display:grid;grid-template-columns:320px 1fr;height:auto;overflow:visible;margin-top:10px}
  .tiffanyCard{height:max-content}
  .lessonCard{min-height:340px}
}

/* Mobile breakpoint */
@media(max-width:700px){
  .tutorialShell{width:calc(100vw - 10px);height:auto;padding:0 0 12px}
  .tutorialTopbar{height:52px;padding:0 13px}
  .tutorialTitle{font-size:25px}
  .tutorialBadge{display:none}
  .tutorialGrid{display:block;padding:7px}
  .tutorialScene{flex:none;height:min(65vh,500px);min-height:400px}
  /* Intro hero on mobile */
  .tutorialScene.is-intro .tutorialPlayer--1{width:34%;height:300px;bottom:20px}
  .tutorialScene.is-intro .tutorialAvatar{height:230px;max-width:100%}
  /* 4-up sprites on mobile */
  .tutorialPlayer{width:24%;height:270px}
  .tutorialAvatar{height:200px;max-width:100%}
  .tutorialBubble{bottom:248px}
  .tutorialPlayer--1{left:1%}.tutorialPlayer--2{left:25.5%}.tutorialPlayer--3{right:25.5%}.tutorialPlayer--4{right:1%}
  .tutorialPlate strong{font-size:12px}
  .tutorialBubble{display:none!important}
  .tutorialRail{display:flex;margin-top:9px}
  .tiffanyPortraitBox{height:196px}
  .lessonCard{min-height:260px}
  .moveColumns button,.defendButton{padding:8px 4px;font-size:12px}
}