/* Collection and full-screen reader. All pictograms reuse the Aseprite library. */
#kanji-library,.dex-device{--dex-red:#d77970;--dex-green:#bcd6b8;--dex-paper:#dfebd1;--dex-print:#203930}
#vocabulary-dialog .dex-overview{margin:0 0 20px}
#vocabulary-dialog #discovery-percent{font-size:20px;color:var(--dex-green)}
#vocabulary-dialog .dex-overview .collection-note{font-size:16px;line-height:1.4;margin:10px 0 0}
#vocabulary-dialog .discovery-meter{display:flex;align-items:center;gap:16px;margin:0}
#vocabulary-dialog #discovery-percent{flex:none;min-width:54px;text-align:right}
#discovery-progress{appearance:none;width:100%;height:8px;border:0;border-radius:0;overflow:hidden;background:var(--raised)}
#discovery-progress::-webkit-progress-bar{background:var(--raised)}
#discovery-progress::-webkit-progress-value{background:var(--dex-green)}
#discovery-progress::-moz-progress-bar{background:var(--dex-green)}
#vocabulary-dialog .discovery-filters{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:12px;margin:22px 0 18px}
#vocabulary-dialog .discovery-filters input,#vocabulary-dialog .discovery-filters select{width:100%;min-width:0;min-height:44px;padding:8px 10px;font-family:inherit;font-size:17px;color:var(--ink);background:var(--read-bg);border:1px solid var(--edge);border-radius:0}
#vocabulary-dialog .discovery-filters input::placeholder{color:var(--muted);opacity:.85}
#vocabulary-dialog .discovery-filters.fc-library-filters{grid-template-columns:minmax(0,1fr) minmax(120px,.45fr)}
#vocabulary-dialog #kanji-word-list{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;margin:0;scroll-margin:12px}
#vocabulary-dialog #kanji-word-list>li{min-width:0;padding:0;border:0;background:none;opacity:1}
#vocabulary-dialog .dex-tile{position:relative;display:grid;grid-template-rows:24px minmax(82px,1fr) 48px;gap:0;width:100%;min-width:0;padding:10px 10px 0;overflow:hidden;border:2px solid var(--edge);background:var(--read-bg);color:var(--ink);text-align:center;cursor:pointer;box-shadow:2px 2px 0 var(--shadow);transition:border-color .12s,transform .12s;touch-action:manipulation}
#vocabulary-dialog .dex-tile-number{display:block;text-align:left;font-family:inherit;font-size:14px;line-height:20px;letter-spacing:.6px;color:var(--muted)}
#vocabulary-dialog .discovery-entry:not(.is-locked) .dex-tile-number:after{content:"";position:absolute;right:10px;top:15px;width:6px;height:6px;background:var(--dex-green)}
#vocabulary-dialog .dex-tile-character{display:grid;align-items:center;font-family:"Yu Gothic",Meiryo,system-ui,sans-serif;font-weight:500;font-size:56px;line-height:1.3;color:var(--dex-paper);overflow-wrap:anywhere;padding:4px 0 10px}
#vocabulary-dialog .dex-tile-meaning{display:-webkit-box;align-self:center;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:17px;line-height:20px;padding-top:5px;border-top:1px solid var(--edge);height:45px}
#vocabulary-dialog .is-word-grid .dex-tile-character{font-family:inherit;font-size:26px;line-height:1.2}
#vocabulary-dialog .is-locked .dex-tile{border-style:dashed;box-shadow:none}
#vocabulary-dialog .is-locked .dex-tile-character{font-family:inherit;font-size:36px;letter-spacing:5px;color:var(--edge-light)}
#vocabulary-dialog .is-locked .dex-tile-meaning{color:var(--muted);border-top-color:transparent;font-size:16px}
#vocabulary-dialog .dex-tile:hover,#vocabulary-dialog .dex-tile:focus-visible{border-color:var(--dex-green);transform:translateY(-2px)}
#vocabulary-dialog .dex-tile:active{transform:translateY(1px)}
#vocabulary-dialog .discovery-pagination{margin:22px 0 0;font-size:17px;gap:8px}
#vocabulary-dialog .discovery-pagination button{font-size:18px;min-height:44px;padding:8px 12px}
#vocabulary-dialog .dex-credits{font-size:14px;line-height:1.6;margin-top:24px}

#discovery-detail{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--bg);color:var(--ink);overflow:hidden;overscroll-behavior:contain}
#discovery-detail::backdrop{background:var(--bg)}
#discovery-detail *{box-sizing:border-box}
.dex-device{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-top:8px solid var(--dex-red);font-size:18px;line-height:1.5}
.dex-topbar{display:flex;align-items:center;gap:20px;padding:max(10px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left));border-bottom:2px solid var(--edge);background:var(--surface)}
.dex-top-label{font-size:16px;letter-spacing:3px;color:var(--muted)}
/* The standalone onboarding Dex already identifies itself through its content.
   Its former fixed library heading otherwise floats over the scrolling cards. */
html body #vocabulary-dialog[data-onboarding-dex=true][data-view=dictionary] #study-section-title{display:none!important}
.dex-number{margin-left:auto;color:var(--dex-red);font-size:24px;white-space:nowrap;letter-spacing:1px}
.dex-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:44px;padding:8px 12px;border:1px solid var(--edge);border-radius:0;background:var(--raised);font:inherit;font-size:18px;line-height:1.3;color:var(--ink);cursor:pointer;touch-action:manipulation}
.dex-button svg,.dex-edge svg{width:18px;height:18px;fill:currentColor;flex:none;image-rendering:pixelated;shape-rendering:crispEdges}
.dex-button:hover{border-color:var(--accent);color:var(--accent)}
.dex-button:disabled{opacity:.35;cursor:default}
.dex-button:focus-visible,.dex-edge:focus-visible,#vocabulary-dialog .dex-tile:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.dex-scroll{overflow-y:auto;overflow-x:hidden;min-height:0;overscroll-behavior:contain;touch-action:pan-y}
.dex-content{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.3fr);align-items:start;gap:40px;max-width:1152px;padding:36px 64px 48px;margin:0 auto}
.dex-hero{min-width:0;position:sticky;top:32px}
.dex-character-screen{position:relative;display:grid;grid-template-rows:auto minmax(140px,1fr) auto;align-items:center;min-height:270px;aspect-ratio:1/1;padding:16px 20px;background:var(--dex-paper);border:6px solid var(--edge);box-shadow:4px 4px 0 var(--shadow);color:var(--dex-print);text-align:center}
.dex-entry-status{font-size:14px;letter-spacing:2px;min-height:32px;display:flex;align-items:center;padding-right:44px;margin:0;text-align:left;opacity:.75}
#discovery-detail .dex-character{font-family:"Yu Gothic",Meiryo,system-ui,sans-serif;font-size:clamp(120px,14vw,180px);font-weight:500;line-height:1.3;margin:8px 0;overflow-wrap:anywhere;color:inherit}
.dex-screen-footer{display:flex;justify-content:space-between;align-items:end;gap:8px;opacity:.75}
.dex-screen-category{font-size:12px;line-height:1.4;text-align:left;letter-spacing:.4px}
.dex-screen-number{font-size:13px;letter-spacing:.8px;text-align:right;white-space:nowrap}
.dex-hero-audio{position:absolute;top:10px;right:10px;background:transparent;border-color:color-mix(in srgb,var(--dex-print) 35%,transparent);color:var(--dex-print)}
.dex-hero-audio:hover,.dex-hero-audio:focus-visible{background:color-mix(in srgb,var(--dex-print) 12%,var(--dex-paper));color:var(--dex-print);border-color:var(--dex-print)}
.dex-caption{padding:24px 4px 0}
.dex-meaning{font-size:30px;line-height:1.35;margin:0 0 18px;overflow-wrap:anywhere}
.dex-information,.dex-details{display:grid;gap:20px;min-width:0}
.dex-panel{min-width:0;background:var(--surface);border:1px solid var(--edge);padding:20px 22px}
#discovery-detail .dex-section-title{display:flex;align-items:baseline;gap:12px;font-size:23px;line-height:1.35;color:var(--ink);font-weight:400;margin:0 0 18px}
.dex-section-index{font-size:14px;color:var(--dex-red)}
.dex-found-form{margin:0 0 14px;font-size:17px;line-height:1.6;color:var(--muted)}
.dex-found-form strong{font-family:"Yu Gothic",Meiryo,system-ui,sans-serif;color:var(--dex-green);font-weight:500;overflow-wrap:anywhere}
.dex-encounter{padding:2px 0 2px 16px;margin:0 0 16px;border-left:3px solid var(--dex-green)}
.dex-source{font-family:"Yu Gothic",Meiryo,system-ui,sans-serif;font-size:19px;line-height:1.7;margin:0 0 10px;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.dex-french{font-size:18px;line-height:1.45;margin:0;overflow-wrap:anywhere}
.dex-encounter .dex-french{color:var(--muted)}
.dex-muted{font-size:15px;line-height:1.6;color:var(--muted);margin:0}
.dex-reading-group+.dex-reading-group{margin-top:18px}
#discovery-detail .dex-reading-label{color:var(--muted);font-size:15px;line-height:1.5;font-weight:400;margin:0 0 8px}
.dex-reading-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.dex-reading-chip{font-family:"Yu Gothic",Meiryo,system-ui,sans-serif;font-size:20px;background:var(--read-bg);color:var(--dex-green)}
.dex-attack-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%}
#discovery-detail .dex-attack-type-icon{display:block;width:22px;height:22px;flex:none;object-fit:contain;image-rendering:pixelated}
.dex-attack-text{min-width:0;overflow-wrap:anywhere}
.dex-translation-attack{display:inline-flex;align-items:center;gap:7px;max-width:100%;vertical-align:middle;overflow-wrap:anywhere}
.dex-combat-translations+.dex-reading-group{margin-top:18px}
.dex-reading-chip svg{width:14px;height:14px;opacity:.6}
.dex-reading-chip .dex-romaji{display:block;font-family:system-ui,sans-serif;font-size:12px;font-weight:400;color:var(--muted);line-height:1.5}
.dex-vocab-reading .dex-romaji{display:inline-block;margin-left:10px;font-family:system-ui,sans-serif;font-size:13px}
.dex-form-chip{background:var(--read-bg);color:var(--dex-green);overflow-wrap:anywhere;max-width:100%}
.dex-facts{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:17px;color:var(--muted);margin-bottom:16px}
.dex-facts p{margin:0}
.dex-writing{display:flex;flex-direction:column;align-items:center;gap:12px}
.dex-stroke-canvas{display:block;width:160px;height:160px;max-width:100%;padding:8px;background:var(--dex-paper);border:2px solid var(--edge-light);image-rendering:pixelated}
.dex-stroke-count{font-size:16px;color:var(--muted);margin:0}
.dex-stroke-controls{display:flex;align-items:center;gap:10px}
.dex-stroke-next svg{transform:rotate(180deg)}
.dex-vocabulary{list-style:none;padding:0;margin:12px 0 0}
.dex-vocabulary>li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--edge)}
.dex-vocabulary>li:first-child{border-top:0;padding-top:0}
.dex-vocabulary>li:last-child{padding-bottom:0}
.dex-vocabulary>li>div{min-width:0}
.dex-vocab-word{font-family:"Yu Gothic",Meiryo,system-ui,sans-serif;font-size:25px;line-height:1.5;color:var(--dex-green);margin:0 0 4px;overflow-wrap:anywhere}
.dex-vocab-reading{font-family:"Yu Gothic",Meiryo,system-ui,sans-serif;font-size:15px;line-height:1.6;color:var(--muted);margin:0 0 6px}
.dex-audio-only{flex:none;padding:10px}
.dex-audio-only span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dex-detail-credits{font-size:14px;line-height:1.6;color:var(--muted);margin:0}
.dex-detail-credits a{color:inherit}
.dex-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:2px solid var(--edge);background:var(--surface);padding:12px max(24px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
.dex-navigation>div{text-align:center}
#dex-position{margin:0;font-size:18px;color:var(--ink)}
#dex-speech-status{color:var(--error);font-size:14px;line-height:1.3;max-width:480px;margin:4px 0 0}
.dex-nav-hint{margin:2px 0 0;font-size:14px;color:var(--muted)}
.dex-touch-hint{display:none}
.dex-arrow-prev{transform:rotate(90deg)}
.dex-arrow-next{transform:rotate(-90deg)}
.dex-edge{position:fixed;top:92px;bottom:90px;width:56px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--dex-green);cursor:pointer}
.dex-edge-left{left:0}.dex-edge-right{right:0}
.dex-edge svg{width:24px;height:24px;opacity:0;transition:opacity .15s}
.dex-edge:hover svg,.dex-edge:focus-visible svg{opacity:1}
.dex-edge:disabled{visibility:hidden}
#discovery-detail .is-word .dex-character{font-family:inherit;font-size:clamp(32px,5vw,64px);line-height:1.2}
#discovery-detail .is-locked{max-width:640px;grid-template-columns:1fr}
#discovery-detail .is-locked .dex-hero{position:static;max-width:360px;margin:0 auto;text-align:center}
#discovery-detail .is-locked .dex-character-screen{background:var(--raised);color:var(--edge-light);border-style:dashed;box-shadow:none}
#discovery-detail .is-locked .dex-character{font-family:inherit;font-size:100px;letter-spacing:12px}
@media(max-width:700px){
 .dex-content{grid-template-columns:1fr;gap:28px;padding:22px 20px 32px;max-width:560px}
 .dex-hero{position:static;display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}
 .dex-character-screen{width:min(100%,300px);min-height:0;aspect-ratio:1;grid-template-rows:auto minmax(148px,1fr) auto;padding:16px;border-width:4px;margin-inline:auto}
 #discovery-detail .dex-character{font-size:clamp(144px,44vw,180px);margin:2px 0;line-height:1.1}
 .dex-entry-status{font-size:13px;letter-spacing:1px}
 .dex-caption{padding:0;width:100%}
 .dex-meaning{font-size:27px;margin:0 0 8px}
 .dex-topbar{padding-left:16px;padding-right:16px;gap:10px}.dex-top-label{display:none}.dex-number{font-size:20px}
 .dex-panel{padding:18px}.dex-information,.dex-details{gap:16px}
 .dex-navigation{padding-left:12px;padding-right:12px;gap:8px}.dex-navigation .dex-button{padding:8px;gap:6px;font-size:16px}
 .dex-nav-hint{font-size:12px}.dex-key-hint{display:none}.dex-touch-hint{display:inline}
 .dex-edge{display:none}
 #discovery-detail .is-word .dex-character-screen{aspect-ratio:auto;min-height:220px}
 #discovery-detail .is-word .dex-character{font-size:40px;line-height:1.2}
 #discovery-detail .is-locked .dex-hero{display:block}.is-locked .dex-caption{padding-top:24px}
}
@media(max-width:600px){
 #vocabulary-dialog .discovery-filters{grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
 #vocabulary-dialog .dex-search{grid-column:1/-1}
 #vocabulary-dialog #kana-tab{grid-column:1/-1}
 #vocabulary-dialog #kanji-word-list{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
 #vocabulary-dialog .dex-tile{grid-template-rows:22px minmax(74px,1fr) 46px}
 #vocabulary-dialog .dex-tile-character{font-size:52px}
 #vocabulary-dialog .is-word-grid .dex-tile-character{font-size:27px}
 #vocabulary-dialog .is-locked .dex-tile-character{font-size:34px}
}
@media(min-width:601px) and (max-width:899px){#vocabulary-dialog[data-has-kana="true"] .screen-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:370px){.dex-content{padding:18px 12px 28px}.dex-hero{gap:12px}.dex-panel{padding:16px}.dex-navigation .dex-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.dex-meaning{font-size:23px}}
@media(hover:none),(pointer:coarse){.dex-edge{display:none}.dex-key-hint{display:none}.dex-touch-hint{display:inline}}
@media(prefers-reduced-motion:reduce){#vocabulary-dialog .dex-tile,.dex-edge svg{transition:none}}

#vocabulary-dialog #kanji-word-list{touch-action:pan-y}