/* ============================================================
   THE FIRST-TIME INTRO (js/intro.js) · the INTRO button on the main menu,
   the sky with the five cards and Koro's box, and Koro's box over the sunny
   training ring. Comic like the rest of the game: cream paper, 3px ink,
   hard shadows, Comic lettering, and the yellow narration caption with its
   "· KORO ·" chip (the story box's narration, comic-ui.css).
   No rule here sets display on #scr-intro: a screen shows only through
   .screen.active (style.css).
   ============================================================ */

/* ---------- the INTRO button, right of the round friends button ---------- */
#intro-btn{position:relative;flex:0 0 auto;height:52px;padding:0 18px 0 8px;display:flex;align-items:center;gap:9px;cursor:pointer;
  border-radius:26px;color:#f3ece1;background:rgba(243,236,225,.06);border:1px solid rgba(232,176,75,.45);box-shadow:0 4px 16px rgba(0,0,0,.35);
  font-family:var(--k-comic,'Comic Sans MS','Comic Neue',cursive);transition:transform .12s,border-color .15s,color .15s}
#intro-btn i{width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;
  font-weight:900;font-size:19px;line-height:1;color:#14120f;background:linear-gradient(180deg,#f2cb70,#d99a38)}
#intro-btn b{font-size:14px;font-weight:900;letter-spacing:.2em}
#intro-btn:hover,#intro-btn:focus{border-color:#e8b04b;color:#e8b04b;outline:none;transform:scale(1.05)}
body.menu-comic #intro-btn{color:#14120f;border-radius:2px;border:3px solid #14120f;box-shadow:4px 4px 0 rgba(20,18,15,.6);
  background:radial-gradient(rgba(20,18,15,.13) 1.1px,transparent 1.3px) 0 0/6px 6px,linear-gradient(180deg,#fdf6e3,#efe2c2)}
body.menu-comic #intro-btn i{color:#fdf6e3;background:#c8382f;border:2px solid #14120f}
body.menu-comic #intro-btn:hover,body.menu-comic #intro-btn:focus{color:#7c1f17;transform:translate(-1px,-1px)}

/* the corner buttons that would open other screens stay out of the intro
   (and off the story's WELCOME TO KORO sky, js/story.js StoryWelcome) */
body.koro-intro #gear-btn,body.koro-intro #about-btn,body.koro-intro #grid-btn,body.koro-intro #style-btn,body.koro-intro #color-btn,
body.koro-welcome #gear-btn,body.koro-welcome #about-btn,body.koro-welcome #grid-btn,body.koro-welcome #style-btn,body.koro-welcome #color-btn{visibility:hidden !important}

/* ---------- THE SKY ---------- (#scr-welcome: the same sky opens every story road) */
#scr-intro,#scr-welcome{flex-direction:column;align-items:center;justify-content:center;overflow:hidden;z-index:70;color:#14120f;
  background:linear-gradient(180deg,#1b6fd6 0%,#3f95ea 34%,#86c8f4 68%,#dff2fd 100%)}
#scr-intro.itr-enter,#scr-welcome.itr-enter{animation:itrIn 1s ease both}
#scr-welcome{cursor:pointer}
@keyframes itrIn{from{opacity:0}to{opacity:1}}
.itr-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* the sun, top right, and its rays turning slowly */
.itr-sun{position:absolute;right:9vw;top:6vh;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,#fffdf2 0 46%,#fff3b8 58%,rgba(255,240,170,0) 71%);box-shadow:0 0 110px 50px rgba(255,246,196,.5)}
.itr-rays{position:absolute;right:calc(9vw + 75px - 70vmax);top:calc(6vh + 75px - 70vmax);width:140vmax;height:140vmax;
  background:repeating-conic-gradient(from 0deg,rgba(255,250,214,.24) 0deg 6deg,rgba(255,250,214,0) 6deg 22.5deg);
  -webkit-mask:radial-gradient(circle,#000 0 10%,rgba(0,0,0,.45) 28%,transparent 60%);mask:radial-gradient(circle,#000 0 10%,rgba(0,0,0,.45) 28%,transparent 60%);
  animation:itrSpin 120s linear infinite}
@keyframes itrSpin{to{transform:rotate(360deg)}}
/* soft clouds drifting left to right at their own speeds */
.itr-cloud{position:absolute;left:0;top:var(--y,10vh);width:230px;height:66px;border-radius:66px;background:#fff;opacity:var(--o,.95);
  filter:drop-shadow(0 7px 0 rgba(96,146,196,.22));animation:itrDrift var(--d,70s) linear infinite;animation-delay:var(--dl,0s)}
.itr-cloud::before,.itr-cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
.itr-cloud::before{width:104px;height:104px;left:30px;top:-54px}
.itr-cloud::after{width:78px;height:78px;left:116px;top:-34px}
.itr-cloud.c1{--y:9vh;--s:1.15;--d:78s;--dl:-12s}
.itr-cloud.c2{--y:24vh;--s:.7;--d:56s;--dl:-40s;--o:.85}
.itr-cloud.c3{--y:52vh;--s:1.35;--d:96s;--dl:-70s;--o:.9}
.itr-cloud.c4{--y:36vh;--s:.85;--d:64s;--dl:-5s}
.itr-cloud.c5{--y:70vh;--s:1.05;--d:84s;--dl:-55s;--o:.8}
.itr-cloud.c6{--y:16vh;--s:.55;--d:48s;--dl:-28s;--o:.75}
@keyframes itrDrift{from{transform:translateX(-32vw) scale(var(--s,1))}to{transform:translateX(118vw) scale(var(--s,1))}}

/* the KORO title floating in the sky while Koro says hello */
.itr-logo{position:absolute;top:15vh;left:50%;font-family:var(--k-comic,'Comic Sans MS',cursive);font-weight:900;font-size:clamp(64px,13vh,150px);
  letter-spacing:.1em;line-height:1;color:#fdf6e3;-webkit-text-stroke:4px #14120f;paint-order:stroke fill;
  text-shadow:6px 6px 0 #c8382f,12px 12px 0 rgba(20,18,15,.7);transform:translateX(-50%) rotate(-2deg);animation:itrBob 3.6s ease-in-out infinite}
.itr-logo[hidden]{display:none}
@keyframes itrBob{0%,100%{transform:translateX(-50%) rotate(-2deg) translateY(0)}50%{transform:translateX(-50%) rotate(-1deg) translateY(-10px)}}

/* the five cards */
.itr-cast{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);width:min(1180px,95vw);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.6vw,24px)}
.itr-cast[hidden]{display:none}
.itr-fighter{--rot:-1.2deg;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px 14px;cursor:pointer;
  font-family:var(--k-comic,'Comic Sans MS',cursive);color:#14120f;text-align:center;border:3px solid #14120f;border-radius:2px;
  background:radial-gradient(rgba(20,18,15,.12) 1.1px,transparent 1.3px) 0 0/6px 6px,linear-gradient(180deg,#fffaf0,#f1e4c4);
  box-shadow:6px 6px 0 rgba(20,18,15,.55);transform:rotate(var(--rot));transition:transform .14s,box-shadow .14s,opacity .3s,filter .3s;
  animation:itrCard .6s cubic-bezier(.2,.9,.3,1.25) backwards;animation-delay:calc(var(--i,0) * 80ms)}
.itr-fighter:nth-child(even){--rot:1.2deg}
.itr-fighter::before{content:'';position:absolute;left:0;right:0;top:0;height:9px;background:var(--sc,#e8b04b);border-bottom:3px solid #14120f}
.itr-face{display:block;width:100%;aspect-ratio:4/5;margin-top:6px;border:3px solid #14120f;background:#cfe0ea;overflow:hidden}
.itr-face canvas{display:block;width:100%;height:100%}
.itr-name{font-size:clamp(14px,1.55vw,21px);font-weight:900;letter-spacing:.08em;margin-top:3px}
.itr-type{font-size:11px;font-weight:900;letter-spacing:.2em;line-height:1.3;color:#fdf6e3;background:var(--sc,#14120f);padding:2px 9px;
  border:2px solid #14120f;transform:rotate(-1.5deg);text-shadow:0 1px 0 rgba(0,0,0,.45)}
.itr-line{font-size:clamp(11.5px,1.05vw,14px);font-weight:700;line-height:1.3;color:#3a3226;min-height:3.9em}
.itr-fighter:hover,.itr-fighter:focus{outline:none;transform:translateY(-10px) rotate(0deg);box-shadow:10px 13px 0 rgba(20,18,15,.6);
  background:radial-gradient(rgba(20,18,15,.14) 1.1px,transparent 1.3px) 0 0/6px 6px,linear-gradient(180deg,#f2cb70,#d99a38)}
.itr-fighter:focus .itr-line,.itr-fighter:hover .itr-line{color:#14120f}
.itr-cast.picked .itr-fighter{pointer-events:none}
.itr-cast.picked .itr-fighter:not(.chosen){opacity:.22;filter:grayscale(.7);transform:scale(.93)}
.itr-fighter.chosen{transform:translateY(-16px) scale(1.07) rotate(-1deg);box-shadow:12px 15px 0 rgba(20,18,15,.62);
  background:radial-gradient(rgba(20,18,15,.14) 1.1px,transparent 1.3px) 0 0/6px 6px,linear-gradient(180deg,#f2cb70,#d99a38)}
@keyframes itrCard{from{opacity:0;transform:translateY(46px) rotate(var(--rot))}to{opacity:1;transform:rotate(var(--rot))}}

/* Koro's box: the story's yellow narration caption */
.itr-box{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);width:min(820px,92vw);padding:28px 30px 14px;color:#14120f;
  background:radial-gradient(rgba(20,18,15,.13) 1.1px,transparent 1.3px) 0 0/6px 6px,linear-gradient(180deg,#f8dd8e,#efc86d);
  border:3px solid #14120f;border-radius:2px;box-shadow:8px 8px 0 rgba(20,18,15,.35)}
.itr-speaker{position:absolute;top:-17px;left:22px;display:flex;align-items:center;margin:0;padding:4px 12px;background:#fdf6e3;border:2px solid #14120f;
  transform:rotate(-1.5deg);font-family:var(--k-comic,'Comic Sans MS',cursive);font-size:14px;font-weight:900;letter-spacing:.18em;color:#14120f;
  box-shadow:3px 3px 0 rgba(20,18,15,.25);white-space:nowrap}
.itr-speaker .narr{color:#14120f}
.itr-text{font-family:var(--k-comic,'Comic Sans MS',cursive);font-size:clamp(18px,2.6vh,25px);font-weight:700;line-height:1.5;min-height:1.5em}
.itr-text.in,.itr-ctext.in{animation:itrSay .32s ease both}
@keyframes itrSay{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.itr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;min-height:36px}
.itr-hint{font-size:10.5px;font-weight:900;letter-spacing:.18em;color:#5a4a2c}
.itr-next,.itr-skip,.itr-cbtn,.itr-pbtn{font-family:var(--k-comic,'Comic Sans MS',cursive);font-weight:900;letter-spacing:.14em;cursor:pointer;color:#14120f;
  background:#fffaf0;border:3px solid #14120f;border-radius:2px;box-shadow:3px 3px 0 rgba(20,18,15,.38);transition:transform .08s}
.itr-next{font-size:15px;padding:8px 18px;background:#c8382f;color:#fdf6e3}
.itr-next[hidden]{display:none}
.itr-next:hover,.itr-next:focus,.itr-skip:hover,.itr-skip:focus,.itr-cbtn:hover,.itr-cbtn:focus,.itr-pbtn:hover,.itr-pbtn:focus{outline:none;color:#14120f;
  background:linear-gradient(180deg,#f2cb70,#d99a38);transform:translate(-1px,-1px)}
.itr-skip{position:absolute;left:18px;top:16px;font-size:12px;padding:7px 14px;z-index:2}
/* the pause button on the sky (a tap on a phone, a click anywhere) */
.itr-spause{position:absolute;right:18px;top:16px;width:44px;height:40px;padding:0;font-size:17px;letter-spacing:-.1em;z-index:2;cursor:pointer;
  font-family:'Segoe UI Symbol','DejaVu Sans',sans-serif;font-size:17px;color:#14120f;background:#fffaf0;border:3px solid #14120f;border-radius:2px;box-shadow:3px 3px 0 rgba(20,18,15,.38)}
.itr-spause:hover,.itr-spause:focus{outline:none;background:linear-gradient(180deg,#f2cb70,#d99a38)}
/* how to leave, under Koro's first line */
.itr-sub{font-family:var(--k-comic,'Comic Sans MS',cursive);font-size:clamp(13px,1.8vh,16px);font-weight:900;color:#7c1f17;margin-top:4px}
.itr-sub[hidden]{display:none}

/* ---------- THE SUNNY RING · Koro's box over the fight ---------- */
.itr-coach{position:absolute;inset:0;pointer-events:none;z-index:75}
.itr-coach[hidden]{display:none}
.itr-cbox{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:min(800px,74vw);padding:24px 22px 10px;pointer-events:auto;color:#14120f;
  font-family:var(--k-comic,'Comic Sans MS',cursive);border:3px solid #14120f;border-radius:2px;box-shadow:7px 7px 0 rgba(20,18,15,.4);
  background:radial-gradient(rgba(20,18,15,.13) 1.1px,transparent 1.3px) 0 0/6px 6px,linear-gradient(180deg,#f8dd8e,#efc86d);
  transition:background .2s,border-color .2s,box-shadow .2s}
.itr-cbox .itr-speaker em{font-style:normal;margin-left:10px;padding-left:10px;border-left:2px solid #14120f;letter-spacing:.14em;color:#7c1f17}
.itr-cbox .itr-speaker em:empty{display:none}
.itr-ctext{font-size:clamp(15px,2.3vh,21px);font-weight:700;line-height:1.45}
.itr-ctext kbd,.itr-text kbd,.itr-csub kbd{display:inline-block;min-width:1.55em;padding:0 .38em;margin:0 .06em;text-align:center;font:900 .9em/1.5 var(--k-comic,'Comic Sans MS',cursive);
  color:#fdf6e3;background:#14120f;border-radius:3px;box-shadow:0 2px 0 #c8382f;transform:translateY(-1px);letter-spacing:.02em}
.itr-ctext kbd.g,.itr-text kbd.g,.itr-csub kbd.g{font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols 2','DejaVu Sans',sans-serif;font-size:1em;font-weight:700}
.itr-csub{font-size:13.5px;font-weight:900;color:#7c1f17;margin-top:3px}
.itr-csub[hidden]{display:none}
.itr-crow{display:flex;align-items:center;gap:8px;margin-top:8px}
.itr-chips{flex:1;display:flex;flex-wrap:wrap;gap:6px;min-height:22px}
.itr-chips i{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.14em;padding:2px 9px;border:2px solid #14120f;background:#fdf6e3;color:#5a4a2c}
.itr-chips i.on{background:#2f8a57;color:#fdf6e3}
.itr-ckeys{font-size:9.5px;font-weight:900;letter-spacing:.14em;color:#5a4a2c;white-space:pre}
.itr-ckeys:empty{display:none}
.itr-cbtn{font-size:11px;padding:5px 11px;border-width:2px;box-shadow:2px 2px 0 rgba(20,18,15,.35)}
.itr-cbtn.ghost{background:transparent;box-shadow:none;border-style:dashed;color:#5a4a2c}
.itr-cbtn.big{font-size:15px;padding:9px 18px;border-width:3px;background:#c8382f;color:#fdf6e3}
/* done: the box turns green for a moment */
.itr-cbox.ok{border-color:#14120f;box-shadow:7px 7px 0 rgba(31,107,64,.6);
  background:radial-gradient(rgba(20,18,15,.12) 1.1px,transparent 1.3px) 0 0/6px 6px,linear-gradient(180deg,#cdeec6,#9bd892)}
.itr-cbox.ok::after{content:'✓ NICE';position:absolute;right:-14px;top:-22px;padding:4px 12px;font-size:15px;font-weight:900;letter-spacing:.14em;
  color:#fdf6e3;background:#2f8a57;border:3px solid #14120f;transform:rotate(4deg);box-shadow:3px 3px 0 rgba(20,18,15,.4);animation:itrStamp .3s cubic-bezier(.2,1.4,.4,1) both}
@keyframes itrStamp{from{transform:rotate(4deg) scale(1.8);opacity:0}to{transform:rotate(4deg) scale(1);opacity:1}}
.itr-cbox.round .itr-ctext{font-size:clamp(14px,2vh,18px)}
/* a line that moves on by itself shows how long it stays */
.itr-cbar{position:absolute;left:0;right:0;bottom:0;height:5px;background:#14120f;transform-origin:left center;transform:scaleX(0)}
.itr-cbar[hidden]{display:none}

/* the pause panel and the card after each round */
.itr-pbox,.itr-rcard{color:#14120f;font-family:var(--k-comic,'Comic Sans MS',cursive);border:3px solid #14120f;border-radius:2px;
  background:radial-gradient(rgba(20,18,15,.12) 1.1px,transparent 1.3px) 0 0/6px 6px,linear-gradient(180deg,#fdf6e3,#f0e3c4)}
.itr-rcard{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);pointer-events:auto;box-shadow:9px 9px 0 rgba(20,18,15,.45),0 0 0 100vmax rgba(6,4,8,.35)}
.itr-rcard[hidden]{display:none}
/* the pause covers the whole screen (nothing behind it takes a click) and
   sits over the sky (z 70), Koro's box and the round card (z 75) */
.itr-pause{position:absolute;inset:0;z-index:78;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:rgba(6,4,8,.38)}
.itr-pause[hidden]{display:none}
.itr-pbox{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:20px 26px 22px;min-width:min(320px,80vw);box-shadow:9px 9px 0 rgba(20,18,15,.45)}
.itr-pbtn[hidden]{display:none}
.itr-pause b{font-size:24px;font-weight:900;letter-spacing:.2em;text-align:center;margin-bottom:4px}
.itr-pbtn{font-size:14px;padding:9px 16px}
.itr-rcard{width:min(560px,86vw);padding:30px 26px 20px;background:radial-gradient(rgba(20,18,15,.13) 1.1px,transparent 1.3px) 0 0/6px 6px,linear-gradient(180deg,#f8dd8e,#efc86d)}
.itr-rcard-text{font-size:clamp(19px,3vh,26px);font-weight:700;line-height:1.4;min-height:1.4em}
.itr-rcard-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}

/* the phone's hint strip under the fight repeats the buttons: Koro's box says them in the intro */
body.koro-intro-ring .touch-hint{visibility:hidden}

/* the veil between the sky and the ring, and between two fights */
#itr-veil{position:fixed;inset:0;z-index:9998;opacity:0;pointer-events:none;background:#000}

/* ---------- THE WALK-IN (js/story.js StoryWelcome) · a fighter's road opens
   with that fighter walking into the arena: the season small over the
   fighter's name in the bottom bar of the story's cutscene screen ---------- */
#scr-dialogue.cine.koro-walkin .dlg-text{font-family:var(--k-comic,'Comic Sans MS','Comic Neue',cursive);font-size:clamp(26px,4.6vh,46px);
  font-weight:900;letter-spacing:.14em;line-height:1.1;text-shadow:0 3px 0 #000}
#scr-dialogue.cine.koro-walkin .dlg-speaker{font-size:12px}
/* no talk is on yet: the cards of the last talk's people stay out of the shot */
#scr-dialogue.koro-walkin .dlg-cast{visibility:hidden}

/* ---------- touch screens: Koro's box goes up top, clear of the pad ---------- */
body.touch .itr-cbox{top:calc(62px + env(safe-area-inset-top,0px));bottom:auto;width:min(620px,62vw);padding:16px 14px 7px}
body.touch .itr-ctext{font-size:14px;line-height:1.35}
body.touch .itr-csub{font-size:11.5px}
body.touch .itr-cbox .itr-speaker{font-size:11px;top:-14px;padding:3px 9px}

/* ---------- short screens (a phone held sideways) ---------- */
@media (max-height:560px){
  .itr-cast{top:38%;width:min(860px,96vw);gap:8px}
  .itr-fighter{padding:9px 6px 8px;gap:3px}
  .itr-face{width:72%;margin-top:4px}
  .itr-name{font-size:13px}
  .itr-type{font-size:9px;padding:1px 6px}
  .itr-line{display:none}
  .itr-logo{font-size:56px;top:12vh;-webkit-text-stroke:3px #14120f}
  .itr-box{bottom:3vh;padding:20px 18px 8px;width:min(640px,86vw)}
  .itr-text{font-size:16px}
  .itr-row{min-height:28px;margin-top:4px}
  .itr-next{font-size:12px;padding:6px 12px}
  .itr-skip{font-size:10px;padding:5px 10px;top:10px;left:10px}
  .itr-spause{top:10px;right:10px;width:36px;height:32px;font-size:13px}
  .itr-sub{font-size:12px;margin-top:2px}
  .itr-cbox{width:min(640px,66vw);padding:16px 14px 7px}
  .itr-ctext{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .itr-cloud,.itr-rays,.itr-logo{animation:none}
}