/* fix4: result / modal overlays always fit & scroll on phones (iOS Safari toolbar safe) */
:root{--nl-safe:0px}
body:has(#nl-badge-frame),body:has(iframe[src*="netlify"]){--nl-safe:52px}
#story>.result{position:fixed;inset:0;z-index:50;margin:0!important;max-width:none!important;width:auto!important;
  height:100vh;height:100dvh;max-height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:max(14px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));
  background:rgba(10,24,30,.55)}
#story>.result>*{max-width:640px;width:100%}
#story>.result>h2:first-child{margin-top:auto}
#story>.result h2{margin:8px 0 4px;font-size:clamp(22px,6vw,30px)}
#story>.result p{margin:6px 0}
#story>.result .star-list,#story>.result .cc-rewards{margin:6px auto}
#story>.result>.row{position:sticky;bottom:0;margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  padding:10px 4px calc(10px + max(env(safe-area-inset-bottom),0px) + var(--nl-safe));
  background:linear-gradient(to bottom,rgba(10,24,30,0),rgba(10,24,30,.92) 22%);z-index:2}
#story>.result>.row .btn{flex:1 1 140px;max-width:260px;margin:0}
@media (max-height:760px){#story>.result p{font-size:15px;margin:4px 0}#story>.result h2{font-size:22px}
  #story>.result .star-list li,#story>.result .cc-rewards li{font-size:14px;padding-top:4px;padding-bottom:4px}
  #story>.result>.row .btn{min-height:44px;padding-top:8px;padding-bottom:8px;font-size:16px}}
/* other full-screen modals */
body:has(#story) .puz{overflow-y:auto;-webkit-overflow-scrolling:touch;align-items:safe center;padding-bottom:calc(10px + env(safe-area-inset-bottom) + var(--nl-safe))}
body:has(#story) .pz{max-height:none}
body:has(#story) .sh{max-height:calc(100dvh - 20px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(max(14px,env(safe-area-inset-bottom)) + var(--nl-safe))}
body:has(#story) .dlg .inter{max-height:min(78vh,calc(100dvh - 40px - var(--nl-safe)));bottom:calc(12px + var(--nl-safe))}
/* Netlify Drop badge: never intercept UI; keep it small */
#nl-badge-frame,iframe[src*="netlify"][style*="fixed"]{pointer-events:none!important;opacity:.55;transform:scale(.8);transform-origin:right bottom}
/* fix4 #5: bottom formula/tag chip on cards: allow 2 lines, smaller font (non-battle) */
html body:not(.ptcg-battle) .ptcg-card .ptcg-fx{white-space:normal!important;text-overflow:clip!important;font-size:9.5px!important;line-height:1.15!important;
  display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
/* fix4 #6: detail title keeps ✦ with last word; zh name under big formula never sits naked on art */
#dialog-title .nowrap{white-space:nowrap}
html body .card.style-c .top.glass-chip{position:relative;z-index:3}
html body .card.style-c .top .left .nm.mnm.hasf{padding-bottom:2px}
html body .card.style-c .top .left .nm.mnm.hasf .fzh{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.9));line-height:1.15}
html body dialog .card.style-c .top.glass-chip,html body .ptcg-sheet .card.style-c .top.glass-chip{background:linear-gradient(180deg,rgba(6,10,24,.72),rgba(6,10,24,.38))!important;border-radius:12px}
/* fix4: neutralisation FX (H⁺+OH⁻→H₂O; Na⁺/Cl⁻ spectators; universal indicator red→green, icons for colour-blind) */
.neut-fx{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0}
.neut-ions{display:flex;align-items:center;gap:6px;font-weight:900;font-size:18px}
.neut-ions .ion{padding:2px 8px;border-radius:999px;background:#24384a;color:#fff}
.neut-ions .ion.h{background:#b53a3a;animation:nH 1.4s ease-out both}.neut-ions .ion.oh{background:#3a55b5;animation:nOH 1.4s ease-out both}
.neut-ions .ion.w{background:#2a7f9a;animation:nW 1.6s ease-out both}
@keyframes nH{0%{transform:translateX(-24px);opacity:0}60%{transform:none;opacity:1}}@keyframes nOH{0%{transform:translateX(24px);opacity:0}60%{transform:none;opacity:1}}
@keyframes nW{0%,55%{transform:scale(.4);opacity:0}75%{transform:scale(1.25);opacity:1;box-shadow:0 0 18px #9fe3ff}100%{transform:none}}
.neut-spect{display:flex;gap:8px;align-items:center;font-weight:800}.neut-spect span{padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.12);animation:nF 2.4s ease-in-out infinite}
.neut-spect .cl{animation-delay:.6s}.neut-spect small{opacity:.8}@keyframes nF{50%{transform:translateY(-4px)}}
.neut-ind{display:flex;align-items:center;gap:8px;font-size:13px}.neut-ind .ui-sw{display:flex;align-items:center;gap:4px}
.neut-ind .sw{display:inline-block;width:22px;height:22px;border-radius:6px;border:2px solid #fff}
.neut-ind .sw.r{background:#d8342c}.neut-ind .sw.g{background:#d8342c;animation:nG 2.2s .8s ease-in-out forwards}@keyframes nG{to{background:#2fae4a}}
.neut-note{font-size:13px;margin:2px 0;text-align:center}
@media (prefers-reduced-motion:reduce){.neut-fx *{animation:none!important}.neut-ind .sw.g{background:#2fae4a}}
/* fix4 battle UX (display only) */
html body.ptcg-battle .ptcg-scrim:not(.ptcg-show3d){background:rgba(4,8,18,.62)!important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
html body.ptcg-battle #toast{top:calc(env(safe-area-inset-top,0px) + 118px)!important}
html body.ptcg-battle .ptcg-hand.cc-more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),rgba(0,0,0,.25));mask-image:linear-gradient(to right,#000 calc(100% - 34px),rgba(0,0,0,.25))}
html body.ptcg-battle .ptcg-hand.cc-more-r.cc-more-l{-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.25),#000 26px,#000 calc(100% - 34px),rgba(0,0,0,.25));mask-image:linear-gradient(to right,rgba(0,0,0,.25),#000 26px,#000 calc(100% - 34px),rgba(0,0,0,.25))}
/* board card: KO+2 tag sits above the card, HP drops to 2nd row when name has a state symbol → name readable at original size */
html body.ptcg-battle .ptcg-board .ptcg-card .ko2{top:-15px!important;right:50%!important;transform:translateX(50%);white-space:nowrap}
html body.ptcg-battle .ptcg-board .ptcg-card .ptcg-top:has(.fstate){flex-wrap:wrap!important;row-gap:0!important}
html body.ptcg-battle .ptcg-board .ptcg-card .ptcg-top:has(.fstate) .nm,html body.ptcg-battle .ptcg-board .ptcg-card .ptcg-top:has(.fstate) .nm .fbig{flex:1 0 100%!important;max-width:none!important;width:auto!important;overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important}
html body.ptcg-battle .ptcg-board .ptcg-card .ptcg-top:has(.fstate) .hp{margin-left:auto!important}
/* detail views: keep the +2 tag inside the sheet */
html body .ptcg-detail-sheet .card.style-c,html body dialog .card.style-c{margin-top:14px!important;overflow:visible}
html body .ptcg-detail-sheet .card.style-c .ko2,html body dialog .card.style-c .ko2{top:-10px!important}
/* dialog head (KO modal etc.): title beside ← without crowding */
.ptcg-dialog-head{display:flex;align-items:center;gap:10px}
.ptcg-dialog-head h2{flex:1;min-width:0;margin:0;font-size:clamp(15px,4.3vw,19px);line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
/* fix5: long battle names shrink-to-fit only on overflow (JS fit), never centre-clipped */
html body.ptcg-battle .ptcg-card .ptcg-top .nm.long{text-overflow:clip!important;white-space:nowrap!important;overflow:hidden!important;text-align:left!important;justify-content:flex-start!important;min-width:0}
.c6-sample i.neutral{background:#8a96a3!important;color:#fff;font-size:11px;font-weight:900;text-align:center;line-height:16px;font-style:normal}
/* fix5: tablet dialogue/quiz larger and raised off the bottom edge */
@media (min-width:768px) and (min-height:900px){
  .dlg .box{margin-bottom:max(9vh,env(safe-area-inset-bottom))!important;padding:16px 20px}
  .dlg .box p{font-size:22px!important;line-height:1.6}
  .dlg .choice button{font-size:19px!important;min-height:54px;padding:10px 16px}
  .dlg .choice .fb{font-size:17px}
  .dlg .inter{font-size:17px;bottom:calc(9vh + var(--nl-safe))!important}
  .dlg .inter .lead{font-size:16px}}
/* fix5: silver small Chinese subtitle readable on bright art */
html body:not(.ptcg-battle) .nm .fzh,html body .card.style-c .nm.mnm .fzh{filter:drop-shadow(0 1px 1px rgba(0,0,0,.95)) drop-shadow(0 0 2px rgba(0,0,0,.7))}
/* fix5: a stale result panel never shows through a later dialogue / puzzle */
body:has(.dlg) #story>.result,body:has(.puz) #story>.result{display:none!important}
@media (min-width:768px) and (min-height:900px){.dlg .inter h3{font-size:22px}.dlg .inter .lead{font-size:17px!important}.dlg .inter button,.dlg .inter .c6-sample,.dlg .inter .c6-step{font-size:17px!important;min-height:48px}.dlg .inter{width:min(680px,92vw)!important}}