/* =========================================================
   NINZY CORE — extras12.css  (batch 17, fitur Premium 379–455)
   Selector berawalan x12- agar tidak bentrok.
   ========================================================= */
.x12-modal .x12-h{margin:14px 0 4px;font-size:13.5px;color:var(--brass);}
.x12-set{display:flex;flex-direction:column;gap:10px;margin:8px 0;}
.x12-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;}
.x12-rng{flex-direction:column;align-items:stretch;gap:4px;}
.x12-rng input[type=range]{width:100%;accent-color:var(--brass,#a78bfa);}
.x12-sel .filter-select{max-width:55%;}
.x12-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.x12-big{font-size:34px;font-weight:800;text-align:center;margin:12px 0;font-variant-numeric:tabular-nums;}
.x12-big small{font-size:14px;font-weight:600;color:var(--paper-dim);}
.x12-kana{font-size:72px;line-height:1.1;}
.x12-out{min-height:56px;padding:10px;border-radius:10px;background:rgba(255,255,255,.05);font-size:20px;word-break:break-all;}
.x12-acts{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;}
.x12-acts button,.x12-it>button[data-rm]{min-width:30px;height:30px;border-radius:8px;border:1px solid var(--line-soft,rgba(255,255,255,.12));background:rgba(255,255,255,.06);color:inherit;cursor:pointer;}
.x12-val{min-width:34px;text-align:center;font-variant-numeric:tabular-nums;}
.x12-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.x12-chip{padding:4px 10px;border-radius:999px;border:1px solid var(--line-soft,rgba(255,255,255,.14));background:rgba(255,255,255,.06);color:inherit;font-size:12px;cursor:pointer;}
.x12-chip.on{background:var(--brass,#a78bfa);color:#14120f;border-color:transparent;}
.x12-it.is-lead b{color:var(--brass);}
.x12-thumb{width:100%;max-width:200px;max-height:110px;object-fit:cover;border-radius:8px;display:block;margin-bottom:4px;}
.x12-bars{display:flex;align-items:flex-end;gap:2px;height:110px;margin:10px 0 4px;}
.x12-bars>div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0;}
.x12-bars i{display:block;width:100%;border-radius:3px 3px 0 0;background:var(--grad,var(--seal));min-height:2px;}
.x12-bars span{font-size:8px;color:var(--paper-dim);margin-top:2px;}
.x12-league,.x12-pet{display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px 0 10px;}
.x12-league span{font-size:54px;}.x12-league b{font-size:20px;}.x12-league small,.x12-pet small{color:var(--paper-dim);}
.x12-pet__f{font-size:76px;line-height:1.1;}.x12-pet__f.happy{animation:x12bob 1.6s ease-in-out infinite;}
@keyframes x12bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.x12-chest{display:flex;flex-direction:column;align-items:center;gap:6px;}
.x12-chest__b{font-size:84px;line-height:1;background:none;border:0;cursor:pointer;transition:transform .2s;}
.x12-chest__b:active{transform:scale(.9);}.x12-chest__b.is-open{opacity:.55;}
.x12-q{padding:10px 0;border-top:1px solid var(--line-soft);}.x12-q__h{display:flex;justify-content:space-between;gap:8px;}.x12-q.done b{color:var(--brass);}
.x12-kan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px;}
.x12-kan__c{background:rgba(255,255,255,.04);border-radius:10px;padding:8px;min-width:0;}.x12-kan__c h4{margin:0 0 6px;font-size:12.5px;}
.x12-kan__k{display:flex;flex-direction:column;gap:4px;padding:6px;margin-bottom:6px;border-radius:8px;background:rgba(255,255,255,.07);font-size:12px;word-break:break-word;}
.x12-qz__q{font-size:15px;margin:12px 0;text-align:center;}.x12-qz__o{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.x12-qz__o .is-ok{background:#16a34a !important;color:#fff;}.x12-qz__o .is-bad{background:#dc2626 !important;color:#fff;}
.x12-graph{width:100%;max-height:300px;color:var(--paper,#eee);margin:8px 0;}
.x12-ck{padding:8px 0;border-top:1px solid var(--line-soft);}.x12-ck__h{display:flex;align-items:center;gap:8px;justify-content:space-between;}
.x12-ck__i{padding:3px 0;}.x12-ck__add{display:flex;gap:6px;margin-top:6px;}.x12-ck__add input{flex:1;}
.x12-diff{font:12px/1.5 var(--font-mono,monospace);margin-top:8px;border-radius:8px;overflow:auto;max-height:300px;background:rgba(0,0,0,.25);}
.x12-d{padding:1px 8px;white-space:pre-wrap;}.x12-d span{display:inline-block;width:14px;opacity:.7;}.x12-d.add{background:rgba(34,197,94,.18);}.x12-d.del{background:rgba(239,68,68,.18);}
.x12-sw{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}.x12-sw button{flex:1 1 30%;min-height:44px;border:0;border-radius:10px;font-weight:700;font-size:12px;cursor:pointer;}
.x12-wpm{margin:10px 0;padding:12px;border-radius:10px;background:rgba(255,255,255,.05);line-height:1.8;font-size:15px;white-space:pre-wrap;}
.x12-bk{max-height:260px;overflow:auto;margin:6px 0;}
/* ---- reader ---- */
body.x12-hue .reader__pages{filter:hue-rotate(var(--x12-hue,0deg));}
body.x12-rad .reader__page{border-radius:var(--x12-rad,12px);overflow:hidden;box-shadow:var(--x12-shadow,none);}
body.x12-rad .reader__page img{border-radius:inherit;}
html.x12-smooth{scroll-behavior:smooth;}
body.x12-nox .reader,body.x12-nox .reader__pages{overflow-x:hidden;touch-action:pan-y;}
html.x12-nox,html.x12-nox body{overscroll-behavior-x:none;}
html.x12-snap{scroll-snap-type:y proximity;}
body.x12-snap .reader__page{scroll-snap-align:start;display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;}
body.x12-snap .reader__page img{max-height:100vh;max-height:100dvh;width:auto;max-width:100%;object-fit:contain;}
body.x12-lensmode .reader__pages{touch-action:none;-webkit-user-select:none;user-select:none;}
.reader__page.x12-zoom{overflow:hidden;}.reader__page.x12-zoom img{transition:transform .22s ease;}
#x12vig{position:fixed;inset:0;pointer-events:none;z-index:40;}
.x12-dock{position:fixed;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 150px);z-index:60;display:flex;flex-direction:column;gap:8px;}
.x12-dock button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-soft,rgba(255,255,255,.18));background:rgba(var(--ink-rgb,20,16,31),.82);color:var(--paper,#fff);font-size:20px;cursor:pointer;backdrop-filter:blur(6px);}
.x12-dock button.on{background:var(--brass,#a78bfa);color:#14120f;}
.x12-hud{position:fixed;left:8px;right:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);z-index:45;display:flex;gap:8px;align-items:center;justify-content:space-between;pointer-events:none;}
.x12-hud span{padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:11.5px;font-weight:600;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.x12-map{position:fixed;right:2px;top:calc(var(--x12-top,0px) + 14px);height:calc(100% - var(--x12-top,0px) - 120px);width:12px;z-index:55;border-radius:6px;background:rgba(255,255,255,.1);touch-action:none;cursor:pointer;}
.x12-map b{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.35);}
.x12-map__thumb{position:absolute;left:0;right:0;border-radius:6px;background:var(--brass,#a78bfa);opacity:.85;pointer-events:none;}
.x12-lens{position:fixed;width:130px;height:130px;border-radius:50%;border:3px solid var(--brass,#a78bfa);box-shadow:0 6px 24px rgba(0,0,0,.6);background-repeat:no-repeat;background-color:#111;pointer-events:none;z-index:70;display:none;}
.x12-flash{position:fixed;left:50%;top:calc(var(--x12-top,0px) + 12px);transform:translate(-50%,-12px);padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.78);color:#fff;font-size:13px;z-index:80;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:90%;text-align:center;}
.x12-flash.on{opacity:1;transform:translate(-50%,0);}
/* ---- tampilan ---- */
.x12-scr{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center;padding:18px;cursor:pointer;}.x12-scr span{font-size:12px;opacity:.7;}
.x12-wx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:35;}
.x12-rib{display:flex;align-items:center;justify-content:center;gap:10px;padding:5px 34px 5px 12px;font-size:12.5px;font-weight:600;text-align:center;position:relative;color:#fff;background:#7c3aed;}
.x12-rib button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;opacity:.8;cursor:pointer;font-size:14px;}
.x12-rib--rose{background:#e11d48;}.x12-rib--green{background:#15803d;}.x12-rib--blue{background:#1d4ed8;}.x12-rib--amber{background:#f59e0b;color:#1c1400;}.x12-rib--dark{background:#18181b;}
body.x12-cover .card__cover{aspect-ratio:var(--x12-cover,2/3);}
body.x12-av-squircle .profile__avatar,body.x12-av-squircle #authArea .avatar-btn,body.x12-av-squircle .leaderboard-avatar{border-radius:32%;}
body.x12-av-rounded .profile__avatar,body.x12-av-rounded #authArea .avatar-btn,body.x12-av-rounded .leaderboard-avatar{border-radius:16%;}
body.x12-av-square .profile__avatar,body.x12-av-square #authArea .avatar-btn,body.x12-av-square .leaderboard-avatar{border-radius:0;}
body.x12-av-hex .profile__avatar,body.x12-av-hex #authArea .avatar-btn,body.x12-av-hex .leaderboard-avatar{border-radius:0;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);}
body.x12-av-diamond .profile__avatar,body.x12-av-diamond #authArea .avatar-btn,body.x12-av-diamond .leaderboard-avatar{border-radius:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
@keyframes x12in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
body.x12-anim .card{animation:x12in .4s ease both;}
body.x12-anim .card:nth-child(2){animation-delay:.04s}body.x12-anim .card:nth-child(3){animation-delay:.08s}body.x12-anim .card:nth-child(4){animation-delay:.12s}
body.x12-anim .card:nth-child(5){animation-delay:.16s}body.x12-anim .card:nth-child(6){animation-delay:.2s}body.x12-anim .card:nth-child(n+7){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){body.x12-anim .card{animation:none}.x12-pet__f.happy{animation:none}}

/* header global jangan tembus pandang di atas halaman manga saat membaca */
body:has(#pagesWrap) .topbar{background:rgb(var(--ink-rgb,20,16,31));backdrop-filter:none;-webkit-backdrop-filter:none;}
/* ---- suara baca (456) ---- */
::highlight(x12-tts){background-color:rgba(250,204,21,.38);color:inherit;}
.x12-tts-cur{background:rgba(250,204,21,.22);border-radius:6px;}
.x12-ttsbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 50px);z-index:66;width:min(94vw,440px);padding:8px 10px;border-radius:16px;background:rgba(var(--ink-rgb,20,16,31),.94);border:1px solid var(--line-soft,rgba(255,255,255,.16));box-shadow:0 10px 30px rgba(0,0,0,.5);color:var(--paper,#fff);}
.x12-ttsbar__r{display:flex;align-items:center;justify-content:center;gap:8px;}
.x12-ttsbar button{min-width:40px;height:40px;border-radius:12px;border:1px solid var(--line-soft,rgba(255,255,255,.16));background:rgba(255,255,255,.07);color:inherit;font-size:17px;cursor:pointer;}
.x12-ttsbar button.main{min-width:54px;background:var(--brass,#a78bfa);color:#14120f;border-color:transparent;font-size:20px;}
.x12-ttsbar__v{font-size:20px;opacity:.35;transition:opacity .2s,transform .2s;}.x12-ttsbar__v.on{opacity:1;transform:scale(1.25);}
.x12-ttsbar__s{margin-top:6px;text-align:center;font-size:11.5px;color:var(--paper-dim,#bbb);}