/* tobyo-fixes.css — small fixes by tobyo (統括), 2026-10-15. Loaded last. */

/* 1. Reader: tabs sit beside the title, look like tabs (not two buttons) */
.reader-head{align-items:center!important;flex-wrap:wrap;row-gap:10px}
.reader-head>div:first-child{flex:1 1 260px;min-width:0}
.reader-head .reader-tabs{
  flex:0 0 auto;display:inline-flex;gap:2px;margin:0;padding:3px!important;border:0!important;
  background:rgba(128,128,128,.2);border-radius:10px;flex-wrap:nowrap}
.reader-head .reader-tab{
  border:0!important;box-shadow:none!important;background:transparent!important;color:inherit!important;
  opacity:.72;padding:7px 14px!important;border-radius:8px!important;font-weight:700;font-size:13px;
  position:relative;white-space:nowrap;cursor:pointer}
.reader-head .reader-tab:hover{opacity:1}
.reader-head .reader-tab.active{
  opacity:1;background:#e9e7e4!important;color:#111!important;box-shadow:inset 0 -3px 0 #B3303F!important}
.reader-head .reader-close{flex:0 0 auto}
@media(max-width:720px){
  .reader-head .reader-tabs{order:3;flex:1 1 100%;display:flex}
  .reader-head .reader-tab{flex:1 1 0;text-align:center}
}

/* 2. Series banners: no purple L-shadow; a bar in each series colour under the art */
.sl-series-banner{--bar:#888}
.sl-series-banner[data-series="shounen"]{--bar:#165E83}
.sl-series-banner[data-series="shoujo"]{--bar:#BB7EC3}
.sl-series-banner[data-series="seinen"]{--bar:#F8B500}
.sl-series-banner,.sl-series-banner.active{box-shadow:var(--shadow)!important;transform:none!important}
.sl-series-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--bar);z-index:2;opacity:.55;pointer-events:none;transition:height .15s,opacity .15s}
.sl-series-banner:hover::after{opacity:.85}
.sl-series-banner.active::after{height:9px;opacity:1}
.sl-series-banner span{padding-bottom:18px!important}

/* 4+5. Map with island list: PC = list on the left; phone = one row of 7 under the map + info */
.sl-map-wrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:10px;align-items:stretch;margin:12px 0 22px}
.sl-map-wrap .sl-map{grid-column:2;grid-row:1;align-self:start}
.sl-map-wrap .sl-island-cards{
  grid-column:1;grid-row:1;display:grid!important;grid-template-columns:1fr!important;
  grid-auto-rows:minmax(0,1fr);gap:5px!important;margin:0!important;min-height:0}
.sl-map-wrap .sl-island-cards button{
  min-height:0!important;padding:4px 8px!important;display:grid!important;
  grid-template-columns:40px 1fr!important;grid-template-rows:auto auto!important;gap:0 8px!important;align-items:center;text-align:start}
.sl-map-wrap .sl-island-cards i{width:40px!important;height:40px!important}
.sl-map-wrap .sl-island-cards b{font-size:12px;padding:2px 8px!important;margin:0 0 2px!important}
.sl-map-wrap .sl-island-cards span{font-size:11px}
.sl-map-wrap .sl-island-info{display:none}

@media(max-width:720px){
  .sl-map-wrap{grid-template-columns:minmax(0,1fr);gap:6px;margin:10px 0 14px}
  .sl-map-wrap .sl-map{grid-column:1;grid-row:1}
  .sl-map-wrap .sl-island-cards{
    grid-column:1;grid-row:2;grid-template-columns:repeat(7,minmax(0,1fr))!important;grid-auto-rows:auto;gap:3px!important}
  .sl-map-wrap .sl-island-cards button{
    display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:2px!important;padding:4px 2px!important;text-align:center;border-width:2px!important}
  .sl-map-wrap .sl-island-cards i{display:none}
  .sl-map-wrap .sl-island-cards b{font-size:10px;padding:1px 5px!important;border-width:1px!important;margin:0!important;white-space:nowrap}
  .sl-map-wrap .sl-island-cards span{font-size:8.5px;line-height:1.15;overflow-wrap:anywhere;hyphens:auto}
  .sl-map-wrap .sl-island-info{
    grid-column:1;grid-row:3;display:grid;gap:3px;padding:9px 11px;border:2px solid #000;
    background:var(--panel);color:var(--ink);font-size:13px;line-height:1.35;min-height:46px}
  .sl-map-wrap .sl-island-info b{font-size:14px}
  .sl-map-wrap .sl-island-info span{color:var(--muted)}
}

/* ---- QA4 (2026-10-15) ---- */
/* Island buttons: centred, never wider than the screen, names break at the hyphens */
.sl-map-wrap,.sl-map-wrap .sl-island-cards{min-width:0;width:100%}
.sl-map-wrap .sl-island-cards button{min-width:0;overflow:hidden}
@media(max-width:720px){
  .sl-map-wrap .sl-island-cards button{align-items:center!important;text-align:center!important;padding:4px 1px!important}
  .sl-map-wrap .sl-island-cards b,.sl-map-wrap .sl-island-cards span{align-self:center!important;margin-left:auto!important;margin-right:auto!important}
  .sl-map-wrap .sl-island-cards b{font-size:9.5px}
  .sl-map-wrap .sl-island-cards span{display:block;width:100%;text-align:center;font-size:8px;overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance}
}

/* Home entry cards: name and arrow on one line, the description below (no vertical names) */
.sl-flow-mask{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:4px}
.sl-flow-mask strong{word-break:keep-all;overflow-wrap:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sl-flow-mask>span{font-size:22px;line-height:1}
.sl-flow-mask p{grid-column:1 / -1;margin:2px 0 0!important}

/* Today's story: no word painted over the art, and a shorter card */
.sl-hero-word{display:none!important}
.sl-hero{align-items:center}
.sl-hero-art{min-height:0!important;height:auto!important}
.sl-hero-artwork{height:auto!important}
.sl-hero-artwork img,.sl-hero-artwork picture{height:auto!important;max-height:none!important}
.sl-hero-copy{gap:8px!important;padding:18px 22px!important}
.sl-hero-copy h1{font-size:clamp(20px,2.1vw,27px)!important}
.sl-comic-word{display:flex!important;flex-wrap:wrap;align-items:baseline;gap:2px 12px!important;padding:9px 14px!important}
.sl-comic-word b[lang="ja"]{font-size:26px!important}
.sl-comic-word .meaning{flex:1 1 180px;font-size:14px!important}
@media(max-width:720px){
  .sl-hero-copy{padding:14px 16px!important}
  .sl-hero-copy h1{font-size:20px!important}
  .sl-comic-word b[lang="ja"]{font-size:23px!important}
}

/* LEARN: explainers and compilations in two labelled columns */
.sl-video-cols{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px;align-items:start}
.sl-video-col{display:grid;gap:8px;align-content:start;min-width:0}
.sl-video-col h3{margin:0 0 2px!important;font-size:15px}
/* v0.18.1: phones keep the two columns (explainers | compilations) so the list is half as long */
@media(max-width:720px){.sl-video-cols{gap:8px}.sl-video-col h3{font-size:13px}}

/* ---- QA5 (2026-10-15) ---- */
/* Header: the scrumble logo with "Sound Lab"; no tagline, no version number */
.logo .sl-logo{height:44px;width:auto;display:block}
.topnote{display:none!important}
html[data-theme="light"] .logo .sl-logo{background:#0d0d0d;padding:3px 8px;border-radius:6px}
@media(max-width:720px){.logo .sl-logo{height:34px}}
/* PC: the four tabs move up into the header row (no second band) */
@media(min-width:1061px){
  .sl15-tabs{position:fixed!important;top:0!important;left:50%!important;right:auto!important;bottom:auto!important;
    transform:translateX(-50%);height:74px;display:flex!important;align-items:center;gap:6px;margin:0!important;
    padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;z-index:1000;width:auto!important}
  .sl15-tabs button{padding:9px 14px!important;font-size:12px!important}
}

/* Map: no hard outline around the islands; show it only for keyboard focus */
.sl-map-svg polygon{stroke:transparent!important}
.sl-map-svg polygon:focus-visible{stroke:#ffb35a!important;stroke-width:6!important}

/* STORIES: four banners; SCRAMBLE EGGS bar = the three series colours */
.sl-series-banners{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:1060px){.sl-series-banners{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:720px){.sl-series-banners{grid-template-columns:minmax(0,1fr)!important}}
.sl-series-banner[data-series="scramble"]{--bar:linear-gradient(#165E83 0 33.3%,#BB7EC3 33.3% 66.6%,#F8B500 66.6%)}
.sl-series-banner[data-series="scramble"]::after{background:var(--bar)}
.sl-series-banner[data-series="scramble"] img{object-position:center}
/* Vol cards with the YouTube thumbnail */
.sl-group-head{align-items:center}
.sl-vol-thumb{position:relative;display:block;width:150px;padding:0;border:2px solid #000;background:#000;cursor:pointer;box-shadow:3px 3px 0 #000}
.sl-vol-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.sl-vol-thumb span{position:absolute;left:0;bottom:0;padding:3px 8px;background:rgba(0,0,0,.82);color:#fff;font-weight:900;font-size:12px}
@media(max-width:720px){.sl-vol-thumb{width:120px}}

/* LEARN: cards stacked (thumbnail above text), small play mark on the thumbnail only */
.sl-video-col .sl-video-card{display:flex!important;flex-direction:column;align-items:stretch;gap:6px;padding:6px!important;text-align:start;min-width:0}
.sl-video-col .sl-vthumb{position:relative;display:block}
.sl-video-col .sl-vthumb img{display:block;width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover}
.sl-video-col .sl-vthumb::after{content:"▶";position:absolute;right:6px;bottom:6px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;font-size:10px}
.sl-video-col .sl-video-card strong{font-size:14px;line-height:1.25}
.sl-video-col .sl-video-card small{display:block;font-size:11px;line-height:1.3}
.sl-video-col .sl-video-card>b{display:none}

/* ---- next (after QA5) ---- */
/* Reader: the meaning box under each panel had dark text on a dark box (unreadable). Light box, dark text. */
.reader-gloss-meaning{background:#f3f1ec!important;color:#20313d!important;border:2px solid #000!important}
/* Study switches (reader) */
.sl-study-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.sl-study-bar button{border:2px solid #000;background:#e9e7e4;color:#111;border-radius:999px;padding:6px 14px;font-weight:800;font-size:13px;cursor:pointer}
.sl-study-bar button[aria-pressed="true"]{background:#111;color:#fff;box-shadow:inset 0 -3px 0 #B3303F}
.sl-hide-romaji .reader-gloss-romaji:not(.sl-shown),
.sl-hide-meaning .reader-gloss-meaning:not(.sl-shown){position:relative;color:transparent!important;cursor:pointer;user-select:none;
  background:repeating-linear-gradient(135deg,#d9d6cf 0 6px,#cfccc4 6px 12px)!important;border-radius:4px;min-width:4em}
.sl-hide-romaji .reader-gloss-romaji:not(.sl-shown){display:inline-block;min-height:1.2em}
.sl-hide-meaning .reader-gloss-meaning:not(.sl-shown)::after{content:attr(data-hint);position:absolute;inset:0;display:flex;align-items:center;padding:0 12px;color:#4a4f57;font-size:12px;font-weight:700}

/* QA7 (2026-10-15): SOUNDS – the island name next to "All" is a button that returns to every word of that island */
.sl-filter-row .sl-area-all:not(.active){color:#e08a52}

/* v0.18 (2026-10-15): island name signs near the right edge must not shrink and wrap */
.sl-map-title{width:max-content;max-width:none!important}

/* v0.18.1 (2026-10-15): phones — STORIES banners 2 x 2 and lower; LEARN player flashes when a video is chosen */
@media(max-width:600px){
 .sl-series-banners{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 .sl-series-banner{min-height:92px!important}
 .sl-series-banner span{font-size:13px!important;padding:14px 8px 7px!important}
 .sl-video-col .sl-video-card strong{font-size:12.5px}
 .sl-video-col .sl-video-card small{font-size:10px}
}
.sl-learning-screen{scroll-margin-top:84px}
.sl-learning-screen.sl-flash .sl-player{animation:slFlash 1.1s ease-out}
@keyframes slFlash{0%{box-shadow:0 0 0 0 #E7609E}25%{box-shadow:0 0 0 6px #E7609E}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.sl-learning-screen.sl-flash .sl-player{animation:none;outline:4px solid #E7609E}}

/* v0.18.2: panel meanings under the short (languages without a YouTube subtitle track) */
.sl-short-subs{margin:10px auto 0;padding:10px 12px 10px 34px;max-width:560px;background:#f3f1ec;color:#20313d;border:2px solid #000;font-size:14px;line-height:1.45}
.sl-short-subs li{margin:4px 0}.sl-short-subs li::marker{font-weight:800}
.sl-short-subs .sl-sub-entry{display:block}.sl-short-subs b{font-size:1.05em}
.sl-version{margin:18px 0 6px;text-align:center;font-size:11px;opacity:.55}
.reader-video:has(+ .sl-short-subs) iframe{height:min(50dvh,560px)!important;min-height:0!important}
@media(max-width:760px){.reader-video:has(+ .sl-short-subs){min-height:0;padding:8px}.sl-short-subs{font-size:13px;margin-top:8px}}
@media(max-width:760px){.reader-video:has(+ .sl-short-subs) iframe{width:auto!important;height:36dvh!important;aspect-ratio:9/16;max-width:100%}}
/* island name in the filter row: "Part 2 · Gokan-Shokkan" + the meaning in the user's language */
.sl-sound-controls .sl-area-desc{align-self:center;font-size:12px;opacity:.75}
@media(max-width:600px){.sl-sound-controls .sl-area-desc{display:none}}

/* v1.0: first-visit language picker */
.sl-langpick{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(13,13,13,.92);padding:16px}
.sl-langpick-box{width:min(720px,100%);max-height:92dvh;overflow:auto;background:#161616;border:3px solid #000;box-shadow:6px 6px 0 #E7609E;padding:18px}
.sl-langpick-head{font-size:22px;font-weight:900;color:#e9e7e4;margin:0 0 14px}
.sl-langpick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sl-langpick-grid button{padding:12px 8px;border:2px solid #000;border-radius:999px;background:#E9E7E4;color:#111;font-weight:800;font-size:15px}
.sl-langpick-grid button.sl-guess{background:#fff0ca;box-shadow:0 0 0 3px #E7609E}
.sl-langpick-grid button:hover,.sl-langpick-grid button:focus-visible{outline:3px solid #B3303F}
@media(max-width:600px){.sl-langpick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sl-langpick-grid button{font-size:14px;padding:11px 6px}}

/* v1.0.1 footer: link back to the web */
.sl-version .sl-web-link{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.sl-version .sl-web-link:hover,.sl-version .sl-web-link:focus-visible{color:#E7609E}

/* v1.0.1 menu (PC + tablet), after ChatGPT's mock (10/17 Ten): words only, no marks; current tab = soft box + pink line; hover = brighter.
   The mark is a text node before the label span, so the button's font-size is 0 and the span gets the size back. Phones keep the marks. */
@media(min-width:721px){
  .sl15-tabs button{clip-path:none!important;border-radius:12px!important;background:transparent!important;border:1px solid transparent!important;
    box-shadow:none!important;padding:10px 20px 12px!important;font-size:0!important;gap:0!important;position:relative;transition:color .15s,background .15s}
  .sl15-tabs button span{font-size:12.5px;letter-spacing:.12em}
  .sl15-tabs button::after{content:"";position:absolute;left:10px;right:10px;bottom:-5px;height:3px;border-radius:2px;background:transparent}
  .sl15-tabs button[aria-selected="true"]::after{background:#E7609E;box-shadow:0 0 10px rgba(231,96,158,.55)}
}
@media(min-width:1061px){
  /* The menu sits on top of the header. Its old blur (backdrop-filter) smeared the header's bottom line under the menu, so it is off,
     and the menu stops just above that 3px line. */
  .sl15-tabs{gap:6px!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;height:71px!important}
  .sl15-tabs button{color:#b9c0c8!important}
  .sl15-tabs button:hover{color:#fff!important;background:rgba(255,255,255,.05)!important}
  .sl15-tabs button[aria-selected="true"],html[data-theme="light"] .sl15-tabs button[aria-selected="true"]{color:#fff!important;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important}
}
@media(min-width:721px) and (max-width:1060px){
  .sl15-tabs button{color:var(--muted)!important}
  .sl15-tabs button:hover{color:var(--ink)!important;background:rgba(127,127,127,.08)!important}
  .sl15-tabs button[aria-selected="true"],html[data-theme="light"] .sl15-tabs button[aria-selected="true"]{color:var(--ink)!important;background:rgba(127,127,127,.08)!important;border-color:var(--line)!important}
}

/* v1.1 short line that follows the video: one line, a little larger; before panel 1 the box keeps its height (no jump) */
.sl-short-subs.sl-synced{list-style:none;padding:10px 14px;min-height:3.4em;display:flex;align-items:center}
.sl-short-subs.sl-synced li{margin:0}
.sl-short-subs.sl-synced li::marker{content:none}
.sl-short-subs.sl-synced-wait::before{content:"♪";opacity:.4;margin:auto}

/* v1.1.2 2026-10-17: more room for the manga in the reader (Ten).
   1) The box of story links under the manga can be resized: drag the grip up or down (mouse or finger), or use the arrow keys on it.
      Its height is remembered in this browser. It starts small, so the manga gets most of the window.
   2) The chapter buttons at the bottom are lower. All widths. */
.reader-panel{display:flex!important;flex-direction:column!important;overflow:hidden!important}
.reader-content{flex:1 1 auto!important;min-height:120px!important;overflow-y:auto!important}
/* v1.1.3: let the page's own vertical scroll through, but keep the browser's own left/right edge-swipe
   out of the way of the swipe-to-change-chapter gesture (tobyo-fixes.js). */
.reader-content{touch-action:pan-y!important}
.reader-head,.reader-controls{position:relative!important}
.story-routes{flex:0 0 auto!important;height:var(--sl-routes-h,96px);max-height:none!important;overflow-y:auto!important;border-top:0!important}
.sl-routes-grip{flex:0 0 auto;height:18px;display:flex;align-items:center;justify-content:center;cursor:ns-resize;touch-action:none;
  border-top:1px solid rgba(127,127,127,.35);background:inherit;user-select:none;-webkit-user-select:none}
/* two short lines (＝), the usual sign for "drag up / down" — one line alone looks like a sideways scroll bar (Ten) */
.sl-routes-grip::before{content:"";width:36px;height:9px;border-top:3px solid rgba(127,127,127,.6);border-bottom:3px solid rgba(127,127,127,.6);border-radius:1px;box-sizing:border-box}
.sl-routes-grip:hover::before,.sl-routes-grip:focus-visible::before,.sl-routes-grip.is-dragging::before{border-color:#E7609E}
.sl-routes-grip:focus-visible{outline:none}
.reader-controls{padding:6px 16px calc(6px + env(safe-area-inset-bottom))!important}
.reader-controls .btn{padding:6px 14px!important;min-height:0!important;font-size:13px!important;line-height:1.2!important}

/* v1.1.4 2026-10-20 (Ten): the ♫ mark belongs on the word, not the whole panel (a panel can hold more than
   one word). The panel's outline from the app (sl-matching-panel) stays; this replaces the ♫ corner mark,
   which read as a play button. */
.sl-matching-panel::before{content:none!important}
.reader-gloss-sound.sl-current-sound{background:#fbdfb9!important;outline:2px solid #e89b62!important;outline-offset:1px;border-radius:999px!important}

/* v1.1.4: share button next to Hide romaji / Hide meanings. Icon only (no room for a label on a phone). */
.sl-study-bar .sl-share-btn{padding:6px 11px!important;font-size:15px;line-height:1;position:relative}
.sl-study-bar .sl-share-btn.sl-share-done{background:#111!important;color:#fff!important}
/* "Link copied" floats over the top of the panel below, on its own layer — it never changes the layout
   or page height (Ten: don't make the page any taller, even for a moment). Below the button, not above:
   the study bar sits at the very top of the (scrolling) reader content, so a tooltip above it gets clipped
   by that scroll area (seen in testing). */
.sl-share-btn[data-tip].sl-share-done::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:#111;color:#fff;font-size:12px;font-weight:700;white-space:nowrap;padding:5px 10px;border-radius:7px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);pointer-events:none;z-index:5}
.sl-share-btn[data-tip].sl-share-done::before{
  content:"";position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-bottom-color:#111;pointer-events:none;z-index:5}