/* KORO · THE YOU! SCHOOL'S TRAINING SCREEN (js/you-train.js) and the YOU!
   editor's CONTINUE. Comic paper like the editor. Nothing here sets display
   on a screen itself: .screen and .active own that. */

/* ---------- the page: the school's live spar shows behind the panels ---------- */
.yt-body{position:absolute;top:64px;left:0;right:0;bottom:70px;display:flex;flex-direction:column;gap:12px;padding:16px 22px 8px;min-height:0;overflow:hidden;
  font-family:'Comic Sans MS','Comic Neue',cursive;color:#14120f}
.yt-note{flex:0 0 auto;align-self:flex-start;max-width:min(1100px,100%);padding:9px 16px;font-size:14px;font-weight:700;line-height:1.4;
  background:#ffe9a3;border:3px solid #14120f;box-shadow:4px 4px 0 rgba(20,18,15,.45);transform:rotate(-.4deg)}
.yt-note[hidden]{display:none}
.yt-note b{display:inline-block;margin-right:8px;padding:1px 8px;font-size:12px;letter-spacing:.14em;color:#fdf6e3;background:#14120f}
.yt-cols{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(300px,340px) minmax(0,1.15fr) minmax(0,1fr);gap:18px}
.yt-panel{min-height:0;overflow-y:auto;padding:14px 16px 16px;border:3px solid #14120f;border-radius:2px;
  background:radial-gradient(rgba(20,18,15,.13) 1.1px,transparent 1.3px) 0 0/7px 7px,linear-gradient(180deg,#fdf6e3,#f0e3c4);
  box-shadow:6px 6px 0 rgba(0,0,0,.42)}
.yt-panel::-webkit-scrollbar{width:10px}
.yt-panel::-webkit-scrollbar-thumb{background:#14120f;border:2px solid #f0e3c4}
.yt-me{transform:rotate(-.25deg)}
.yt-pool{transform:rotate(.2deg)}
.yt-h{font-size:15px;font-weight:900;letter-spacing:.14em;display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.yt-h span{font-size:12px;letter-spacing:.1em;padding:1px 8px;color:#fdf6e3;background:#c8382f;border:2px solid #14120f}
.yt-h.small{font-size:12.5px;margin-top:14px}
.yt-sub{font-size:12px;line-height:1.45;color:#4a4234;margin:0 0 10px}

/* ---------- the student ---------- */
.yt-who{position:relative}
.yt-who canvas{display:block;width:100%;height:190px;border:3px solid #14120f;background:#0c0a10;box-shadow:3px 3px 0 rgba(20,18,15,.3)}
.yt-id{position:absolute;left:10px;top:8px;display:flex;flex-direction:column;gap:2px;pointer-events:none}
.yt-id b{font-size:22px;letter-spacing:.06em;color:#fdf6e3;-webkit-text-stroke:2px #14120f;paint-order:stroke fill;text-shadow:3px 3px 0 #14120f}
.yt-id i{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.16em;text-shadow:1px 1px 0 #14120f}
.yt-mv{margin:8px 0 2px;padding:5px 10px 6px;border:2px solid #14120f;background:#fffaf0;min-height:52px}
.yt-mv-k{font-size:10px;font-weight:900;letter-spacing:.16em;color:#7c1f17}
.yt-mv .yt-mn{display:block;font-size:15px;line-height:1.2}
.yt-ms{display:block;font-size:11px;line-height:1.35;color:#4a4234;margin-top:2px}
.yt-ms b{font-weight:900;color:#14120f}
.yt-earn{margin:8px 0 2px;padding:7px 12px;text-align:center;border:3px solid #14120f;transform:rotate(-1.2deg);box-shadow:4px 4px 0 rgba(20,18,15,.35);
  background:radial-gradient(rgba(20,18,15,.1) 1px,transparent 1.2px) 0 0/5px 5px,repeating-linear-gradient(45deg,#ffd95e 0 12px,#f2b63d 12px 24px);
  animation:ytPop .5s ease-out}
.yt-earn b{display:block;font-size:16px;letter-spacing:.06em}
.yt-earn span{display:block;font-size:12px;font-weight:900;margin-top:2px}
.yt-earn.calm{background:#fdf6e3;transform:none;animation:none}
@keyframes ytPop{0%{transform:scale(.6) rotate(-6deg);opacity:0}70%{transform:scale(1.06) rotate(-1deg);opacity:1}100%{transform:rotate(-1.2deg)}}
.yt-pts{margin-top:8px;padding:8px 10px;border:2px solid #14120f;background:#fdf6e3}
.yt-pts-h{display:flex;align-items:baseline;gap:6px;font-size:12px;font-weight:900;letter-spacing:.12em;margin-bottom:6px}
.yt-pts-h b{font-size:18px}
.yt-pts-h span{margin-left:auto;font-size:11px;padding:1px 7px;border:2px solid #14120f;background:#eee3c6;color:#4a4234}
.yt-pts-h span.some{background:#c8382f;color:#fdf6e3;animation:ytBlink 1.4s ease-in-out infinite}
@keyframes ytBlink{50%{filter:brightness(1.25)}}
.yt-stat{display:grid;grid-template-columns:62px 26px 1fr 26px 18px;align-items:center;gap:5px;margin:3px 0}
.yt-sk{font-size:10px;font-weight:900;letter-spacing:.12em}
.yt-arw{font:inherit;font-size:11px;font-weight:900;height:24px;padding:0;cursor:pointer;color:#14120f;background:#fffaf0;border:2px solid #14120f;box-shadow:2px 2px 0 rgba(20,18,15,.3)}
.yt-arw:disabled{opacity:.3;cursor:default;box-shadow:none}
.yt-arw:not(:disabled):hover,.yt-arw:focus-visible{background:#14120f;color:#fdf6e3;outline:none}
.yt-pips{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.yt-pips i{height:12px;border:1.5px solid #14120f;background:#eee3c6}
.yt-pips i.on{background:#c8382f}
.yt-sv{font-size:14px;text-align:right}
.yt-spend{font:inherit;width:100%;margin-top:8px;padding:7px;font-size:12px;font-weight:900;letter-spacing:.12em;cursor:pointer;color:#14120f;
  background:linear-gradient(180deg,#f0c86d,#d9a038);border:2px solid #14120f;box-shadow:3px 3px 0 rgba(20,18,15,.3)}
.yt-spend:disabled{opacity:.4;cursor:default}
.yt-small{font-size:11px;line-height:1.4;color:#4a4234;margin-top:7px}

/* ---------- the student's 21 buttons ---------- */
.yt-dir{margin:0 0 8px}
.yt-dirh{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:900;letter-spacing:.14em;margin-bottom:4px;padding-bottom:3px;border-bottom:2px dashed rgba(20,18,15,.3)}
.yt-dirh b{padding:1px 7px;font-size:11px;color:#fdf6e3;background:#14120f}
.yt-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.yt-row.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.yt-row.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.yt-slot{font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:52px;padding:5px 8px 6px;color:#14120f;
  background:#fffaf0;border:2px solid #14120f;border-top:6px solid #c8382f;box-shadow:3px 3px 0 rgba(20,18,15,.25);transition:transform .08s}
.yt-slot.kick{border-top-color:#2f8a6e}
.yt-slot.special{border-top-color:#6a4fb0}
.yt-slot:hover,.yt-slot:focus-visible{transform:translate(-1px,-1px);outline:none;box-shadow:4px 4px 0 rgba(20,18,15,.35)}
.yt-slot.on{background:#14120f;color:#fdf6e3;box-shadow:4px 4px 0 #e8b04b}
.yt-key{font-size:10px;font-weight:900;letter-spacing:.1em;color:#7c1f17}
.yt-slot.on .yt-key{color:#e8b04b}
.yt-nm{font-size:12px;font-weight:700;line-height:1.2}
.yt-bal{margin-top:10px;padding:8px 10px;border:2px solid #14120f;background:#fdf6e3;font-size:11.5px;line-height:1.45}
.yt-bal b{display:block;font-size:12px;letter-spacing:.12em}
.yt-bal span{display:block}
.yt-bal .good{color:#1f6b45}
.yt-bal .bad{color:#9a2418}

/* ---------- the new moves ---------- */
.yt-cats{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.yt-cat{font:inherit;font-size:11px;font-weight:900;letter-spacing:.1em;cursor:pointer;padding:5px 10px;color:#14120f;background:#fffaf0;border:2px solid #14120f;box-shadow:2px 2px 0 rgba(20,18,15,.25)}
.yt-cat i{font-style:normal;padding:0 5px;margin-left:3px;background:#eee3c6;border:1px solid #14120f}
.yt-cat.on{background:#14120f;color:#fdf6e3}
.yt-cat.on i{background:#c8382f;color:#fdf6e3}
.yt-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:7px}
.yt-move{font:inherit;position:relative;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:6px 9px 7px;color:#14120f;
  background:#fffaf0;border:2px solid #14120f;border-left:6px solid #c8382f;box-shadow:3px 3px 0 rgba(20,18,15,.25);transition:transform .08s}
.yt-move.kick{border-left-color:#2f8a6e}
.yt-move.special{border-left-color:#6a4fb0}
.yt-move:hover,.yt-move:focus-visible{transform:translate(-1px,-1px);outline:none;box-shadow:4px 4px 0 #e8b04b}
.yt-move .yt-mn{font-size:12.5px;line-height:1.2;padding-right:40px}
.yt-move .yt-ms{font-size:10.5px;margin-top:0}
.yt-move em{position:absolute;top:-8px;right:6px;font-style:normal;font-size:10px;font-weight:900;letter-spacing:.1em;padding:1px 6px;color:#14120f;
  background:#ffd95e;border:2px solid #14120f;transform:rotate(4deg)}
.yt-move u{text-decoration:none;font-size:10px;font-weight:900;letter-spacing:.08em;color:#7c1f17}
.yt-move.use{background:#efe4c8}
.yt-move.here{background:#14120f;color:#fdf6e3}
.yt-move.here .yt-ms,.yt-move.here .yt-ms b{color:#e8d9b0}
.yt-move.here u{color:#e8b04b}
.yt-list.own .yt-move{border-left-style:dashed}
.yt-empty{font-size:12px;color:#4a4234;padding:8px 0}
.yt-locked{margin-top:12px;padding:8px 10px;font-size:12px;font-weight:700;color:#4a4234;border:2px dashed rgba(20,18,15,.45);
  background:repeating-linear-gradient(-45deg,rgba(20,18,15,.05) 0 8px,transparent 8px 16px)}
.yt-locked.all{border-style:solid;color:#1f6b45}

/* ---------- the students at the top, the buttons at the foot ---------- */
.yt-tabs{display:flex;gap:8px;margin-left:auto;margin-right:118px;min-width:0;overflow-x:auto;padding:8px 6px 4px}
.yt-tabs2{margin:0;padding:6px 2px 2px;flex:0 0 auto}
.yt-tabs2[hidden],.yt-tabs:empty{display:none}
.yt-tabs.yt-tabs2{display:none}
.yt-tab{font:inherit;position:relative;display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;cursor:pointer;color:#14120f;
  background:#fffaf0;border:2px solid #14120f;box-shadow:2px 2px 0 rgba(20,18,15,.3);white-space:nowrap}
.yt-tab canvas{width:36px;height:36px;border:1.5px solid #14120f;background:#fdf6e3}
.yt-tab b{font-size:11px;letter-spacing:.08em}
.yt-tab i{position:absolute;top:-8px;right:-6px;font-style:normal;font-size:10px;font-weight:900;padding:0 5px;color:#fdf6e3;background:#c8382f;border:2px solid #14120f}
.yt-tab.on{background:#14120f;color:#fdf6e3;box-shadow:3px 3px 0 #e8b04b}
.yt-foot{position:absolute;left:0;right:0;bottom:0;height:70px;display:flex;align-items:center;gap:14px;padding:0 92px 0 22px;
  background:radial-gradient(rgba(20,18,15,.14) 1.1px,transparent 1.3px) 0 0/7px 7px,linear-gradient(180deg,#f0e2c2,#fffaf0);
  border-top:4px solid #14120f;font-family:'Comic Sans MS','Comic Neue',cursive}
.yt-gap{flex:1}
.yt-test,.yt-done{font:inherit;font-weight:900;letter-spacing:.14em;cursor:pointer;color:#14120f;border:3px solid #14120f;box-shadow:4px 4px 0 #14120f;transition:transform .08s,box-shadow .08s}
.yt-test{font-size:14px;padding:10px 20px;background:#fffaf0}
.yt-done{font-size:16px;padding:11px 26px;color:#fdf6e3;background:linear-gradient(180deg,#e2553f,#a8261a)}
.yt-test:hover,.yt-done:hover,.yt-test:focus-visible,.yt-done:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #14120f;outline:none}
.yt-test:active,.yt-done:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #14120f}

/* ---------- a phone: one column that scrolls ---------- */
@media (max-width:900px){
  .yt-body{overflow-y:auto;padding:12px 12px 16px}
  .yt-cols{grid-template-columns:1fr;flex:0 0 auto}
  .yt-panel{overflow:visible;transform:none}
  .yt-who canvas{height:200px}
  .yt-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yt-list{grid-template-columns:1fr 1fr}
  .yt-tabs{display:none}
  .yt-tabs.yt-tabs2:not([hidden]){display:flex}
  .yt-tab b{display:none}
  .yt-tab{padding:3px}
  .yt-foot{height:64px;padding:0 70px 0 12px;gap:10px}
  .screen > header.bar #yt-title{font-size:17px;letter-spacing:.12em}
  #yt-title .yt-tw{display:none}
  .yt-body{bottom:64px}
  .yt-test{font-size:12px;padding:9px 12px}
  .yt-done{font-size:13px;padding:10px 14px}
}
@media (max-width:420px){
  .yt-list{grid-template-columns:1fr}
}

/* ---------- ARC COMPLETE between acts: the students and TRAIN ---------- */
.yt-endrow{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:4px;cursor:default;font-family:'Comic Sans MS','Comic Neue',cursive}
.yt-endrow-h{font-size:12px;font-weight:900;letter-spacing:.3em;color:#fdf6e3;background:#14120f;padding:3px 14px;transform:rotate(-1deg)}
.yt-endrow-list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.yt-endcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:124px;padding:8px 8px 10px;color:#14120f;
  background:#fdf6e3;border:3px solid #14120f;box-shadow:4px 4px 0 rgba(20,18,15,.35)}
.yt-endcard:nth-child(2n){transform:rotate(1.2deg)}
.yt-endcard:nth-child(2n+1){transform:rotate(-1deg)}
.yt-endcard canvas{width:72px;height:72px;border:2px solid #14120f;background:#fffaf0}
.yt-endcard b{font-size:11.5px;letter-spacing:.06em;text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yt-endcard i{position:absolute;top:-10px;right:-8px;font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.06em;padding:1px 6px;color:#14120f;background:#ffd95e;border:2px solid #14120f;transform:rotate(5deg)}
.yt-endcard button{font:inherit;font-size:12px;font-weight:900;letter-spacing:.12em;cursor:pointer;padding:5px 12px;color:#fdf6e3;
  background:linear-gradient(180deg,#e2553f,#a8261a);border:2px solid #14120f;box-shadow:2px 2px 0 #14120f}
.yt-endcard button:hover,.yt-endcard button:focus-visible{filter:brightness(1.12);outline:none}
@media (max-width:600px){
  .yt-endcard{width:96px;padding:6px}
  .yt-endcard canvas{width:56px;height:56px}
}

/* ---------- THE YOU! EDITOR'S CONTINUE (owner, 2026-10-17: "theres no
   continue button for the YOU! screen") · the red button of the row, and on
   a narrow screen the same button waits at the foot of the screen ---------- */
.you-mode .ed-tools #ed-you-story.ed-tool{padding:10px 26px;font-size:13px;letter-spacing:.16em;color:#fdf6e3;
  background:linear-gradient(180deg,#e2553f,#a8261a);border:2px solid #14120f;box-shadow:3px 3px 0 #14120f}
.you-mode .ed-tools #ed-you-story.ed-tool::after{content:'▶';margin-left:8px}
.you-mode .ed-tools #ed-you-story.ed-tool:hover,.you-mode .ed-tools #ed-you-story.ed-tool:focus-visible{filter:brightness(1.12)}
.yt-continue{display:none}
@media (max-width:760px){
  /* (an id here: comic-online.css puts every child of the editor in the flow) */
  .you-mode > #yt-continue:not([hidden]){display:inline-flex;align-items:center;justify-content:center;position:absolute;z-index:40;left:50%;bottom:14px;transform:translateX(-50%);width:auto;
    font-family:'Comic Sans MS','Comic Neue',cursive;font-weight:900;font-size:16px;letter-spacing:.16em;padding:12px 30px;cursor:pointer;color:#fdf6e3;
    background:linear-gradient(180deg,#e2553f,#a8261a);border:3px solid #14120f;box-shadow:4px 4px 0 #14120f;white-space:nowrap}
}

/* the info, settings and fullscreen buttons over this screen's paper bar are
   inked rings, as on the other comic screens (comic-online.css paints them
   cream for the editor, which sits just before this screen in the page) */
#scr-youtrain.active ~ #gear-btn,#scr-youtrain.active ~ #about-btn,#scr-youtrain.active ~ #fs-btn{
  color:#14120f;background:#fffaf0;border:3px solid #14120f;opacity:1;box-shadow:3px 3px 0 rgba(20,18,15,.35)}
/* on a phone held upright the body carries .portrait, and style.css's
   .portrait canvas (the fighter cards) would lift these canvases out of
   their boxes */
.yt-panel .yt-who canvas,.yt-tabs .yt-tab canvas,.yt-endrow .yt-endcard canvas{position:static;inset:auto}
/* the ARC COMPLETE card's own bust on a phone held upright: the same
   .portrait canvas rule lifted it over the whole card, students row and all */
.end-stage canvas#end-bust{position:static;inset:auto;height:auto}
@media (max-width:600px){ .yt-endcard button{white-space:nowrap;letter-spacing:.06em;padding:5px 8px} }

/* the keys as keycaps, like the MOVELIST; the row's hint; moves from the
   other students; the points above the budget; the archetype */
.yt-key kbd,.yt-mv-k kbd,.yt-sub kbd,.yt-move u kbd{display:inline-block;min-width:16px;padding:0 4px;margin:0 1px;text-align:center;font-family:inherit;font-size:10px;font-weight:900;line-height:14px;
  color:#14120f;background:#fffaf0;border:1.5px solid #14120f;border-radius:2px;box-shadow:1px 1px 0 rgba(20,18,15,.4)}
.yt-slot.on .yt-key kbd{background:#e8b04b}
.yt-dirh i{margin-left:6px;font-style:italic;font-weight:700;letter-spacing:.02em;text-transform:none;color:#5a4f3c}
.yt-move .yt-from{display:inline-block;align-self:flex-start;font-size:9.5px;font-weight:900;letter-spacing:.08em;padding:0 6px;color:#fdf6e3;background:#2f6b8a;border:1.5px solid #14120f}
.yt-list.from .yt-move{border-left-color:#2f6b8a}
.yt-pts-h i{font-style:normal;font-size:10px;letter-spacing:.06em;padding:0 5px;color:#1f6b45;border:1.5px solid #1f6b45}
.yt-arch{margin-top:6px;font-size:11px;font-weight:900;letter-spacing:.12em;color:#4a4234}
.yt-arch b{color:#7c1f17}

/* ---------- YOUR STORY (js/you-train.js YouStory): the seasons along the
   top (picture and name), and under them the school itself: the live school
   map with the teacher and the students standing in it, a name plate and
   TRAIN under each. RESET SCHOOL waits small in the corner of the footer ---------- */
.ys-body{position:absolute;top:64px;left:0;right:0;bottom:70px;display:flex;flex-direction:column;gap:14px;padding:14px 22px 12px;min-height:0;
  font-family:'Comic Sans MS','Comic Neue',cursive;color:#14120f;background:linear-gradient(180deg,#2c2621,#1d1a16)}
.ys-list{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ys-season{font:inherit;position:relative;display:flex;flex-direction:column;align-items:stretch;gap:1px;padding:5px 5px 6px;cursor:pointer;text-align:left;color:#14120f;
  background:#fffaf0;border:3px solid #14120f;box-shadow:4px 4px 0 rgba(20,18,15,.35);transition:transform .08s}
.ys-season:nth-child(2n){transform:rotate(.5deg)}
.ys-season:nth-child(2n+1){transform:rotate(-.4deg)}
.ys-season canvas{display:block;width:100%;height:auto;aspect-ratio:36/11;border:2px solid #14120f;background:#1d1822}
.ys-season b{font-size:14px;letter-spacing:.12em;margin-top:3px;line-height:1.15}
.ys-season i{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.08em;color:#7c1f17;line-height:1.15}
.ys-season em{position:absolute;top:-9px;left:-9px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:14px;font-weight:900;
  color:#fdf6e3;background:#14120f;border:2px solid #fdf6e3;border-radius:50%;box-shadow:2px 2px 0 rgba(20,18,15,.4)}
.ys-season.done em{background:#1f6b45}
.ys-season.now em{background:#c8382f}
.ys-season.now{box-shadow:5px 5px 0 #e8b04b;border-color:#14120f}
.ys-season.shut{cursor:default;filter:grayscale(.7);opacity:.72}
.ys-season.shut em{background:#6a6150;font-size:12px}
.ys-season:not(.shut):hover,.ys-season:not(.shut):focus-visible{transform:translate(-2px,-2px);outline:none;box-shadow:6px 6px 0 #e8b04b}
/* the school: the map fills the panel, the plates ride on it */
.ys-school{flex:1 1 auto;min-height:240px;position:relative;overflow:hidden;border:4px solid #14120f;box-shadow:6px 6px 0 rgba(0,0,0,.42);background:#4c4239}
.ys-school canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ys-cast{position:absolute;inset:0;pointer-events:none}
.ys-plate{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:auto;white-space:nowrap}
.ys-plate b{font-size:12px;letter-spacing:.08em;padding:2px 9px;color:#fdf6e3;background:#14120f;border:2px solid #fdf6e3;box-shadow:2px 2px 0 rgba(0,0,0,.45)}
.ys-plate i{font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.16em;padding:0 6px;color:#14120f;background:#e8b04b;border:1.5px solid #14120f}
.ys-plate.you b{background:#c8382f}
.ys-plate button{font:inherit;font-size:11px;font-weight:900;letter-spacing:.12em;cursor:pointer;padding:4px 11px;color:#fdf6e3;
  background:linear-gradient(180deg,#e2553f,#a8261a);border:2px solid #14120f;box-shadow:2px 2px 0 #14120f}
.ys-plate button:hover,.ys-plate button:focus-visible{filter:brightness(1.12);outline:none;transform:translate(-1px,-1px)}
.ys-plate em{position:absolute;top:-14px;right:-18px;font-style:normal;font-size:9px;font-weight:900;letter-spacing:.08em;padding:0 5px;color:#14120f;background:#ffd95e;border:1.5px solid #14120f;transform:rotate(6deg)}
.ys-wait{position:absolute;top:14px;right:14px;max-width:min(320px,60%);padding:7px 12px;font-size:13px;font-weight:700;line-height:1.35;
  background:#ffe9a3;border:3px solid #14120f;box-shadow:4px 4px 0 rgba(20,18,15,.45);transform:rotate(-.6deg)}
/* RESET SCHOOL, small and out of the way */
.ys-reset-btn{font:inherit;font-size:10.5px;font-weight:900;letter-spacing:.12em;cursor:pointer;padding:5px 10px;color:#9a2418;background:transparent;border:1.5px dashed #9a2418;opacity:.85}
.ys-reset-btn:hover,.ys-reset-btn:focus-visible{background:#9a2418;color:#fdf6e3;outline:none;opacity:1}
.ys-reset-btn:disabled{opacity:.35;cursor:default}
.yt-done:disabled{opacity:.45;cursor:default;transform:none}
#scr-youstory.active ~ #gear-btn,#scr-youstory.active ~ #about-btn,#scr-youstory.active ~ #fs-btn{
  color:#14120f;background:#fffaf0;border:3px solid #14120f;opacity:1;box-shadow:3px 3px 0 rgba(20,18,15,.35)}
/* the season pictures stay in their cards on a phone held upright (style.css .portrait canvas) */
.ys-list .ys-season canvas{position:static;inset:auto;height:auto}
@media (max-width:900px){
  .ys-body{padding:10px 10px 12px;bottom:64px;gap:12px}
  .ys-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ys-season b{font-size:12px}
  .ys-season i{font-size:10px}
  .ys-plate b{font-size:10.5px;padding:1px 6px;max-width:34vw;overflow:hidden;text-overflow:ellipsis}
  .ys-plate button{font-size:10px;padding:3px 7px}
  .ys-plate em{right:-12px}
  .ys-wait{left:12px;right:12px;max-width:none;text-align:center}
  .screen > header.bar #ys-title{font-size:15px;letter-spacing:.1em}
}
@media (max-width:900px){ .ys-reset-btn{font-size:9.5px;padding:4px 7px;letter-spacing:.08em} }
/* a phone on its side: the four seasons in one low row, and the school
   scrolls into view under them */
@media (max-height:520px) and (min-aspect-ratio:1/1){
  .ys-body{overflow-y:auto}
  .ys-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .ys-season canvas{aspect-ratio:36/8}
  .ys-season b{font-size:11px;letter-spacing:.08em}
  .ys-season i{font-size:9.5px}
}
/* a narrow phone: the title stays clear of the round buttons on the right */
@media (max-width:375px){ .screen > header.bar #ys-title{font-size:12px;letter-spacing:.05em} }