/* Rare Mob Guide visual redesign · 2026-10-28
 * Premium Minecraft field-guide look. Probabilities are highlighted without
 * making unknown/conditional rates look mathematically comparable.
 * Fully scoped so other Minecraft pages are unaffected.
 */
.st-body,.rare-body{--rare-ink:#162a22;--rare-deep:#0c261e;--rare-green:#246845;--rare-mint:#b4f2c2;--rare-gold:#f7d86b;--rare-gold2:#ffe7a0;--rare-outline:#c9d6c6;overflow-wrap:anywhere}
.st-body{background:#f2f5ef!important;color:var(--rare-ink)}
.st-body .st-main{width:min(1140px,calc(100% - 36px));margin:20px auto 58px;min-width:0}
.st-body .st-hero{
 position:relative;isolation:isolate;overflow:hidden;padding:34px 38px 36px;
 background:linear-gradient(114deg,#092319 0%,#154632 62%,#23664b 100%);
 border:1px solid #1b503b;border-radius:19px;
 box-shadow:0 17px 40px rgba(11,48,32,.18);
}
.st-body .st-hero::after{
 content:"";z-index:-1;position:absolute;right:-38px;top:-64px;
 width:370px;height:260px;opacity:.17;transform:rotate(-12deg);
 background:linear-gradient(90deg,transparent 50%,#b0ffc1 50%) 0 0/42px 42px,
 linear-gradient(transparent 50%,#a4e9b1 50%) 0 0/42px 42px;
 mask-image:radial-gradient(ellipse,black 15%,transparent 75%);
}
.st-body .st-hero>span{font:900 11px/1.4 system-ui,sans-serif;letter-spacing:.18em;color:#b9ecc1}
.st-body .st-hero h1{font-size:clamp(29px,4.4vw,47px);font-weight:950;letter-spacing:-.055em;color:#fff!important;margin:7px 0 11px;line-height:1.2}
.st-body .st-hero p{font-size:14px;line-height:1.8;color:#dcefe0;max-width:730px}
.st-body .st-hero-highlight{display:flex;flex-wrap:wrap;align-items:center;gap:8px 17px;margin:18px 0 0}
.st-body .st-hero-highlight strong{
 font:950 clamp(26px,3.6vw,39px)/1 system-ui,sans-serif;
 color:var(--rare-gold2);letter-spacing:-.06em;text-shadow:0 2px 20px #f5c94d38;
 font-variant-numeric:tabular-nums;
}
.st-body .st-hero-highlight span{font-size:12px;line-height:1.5;color:#dcf5e4;font-weight:720}
.st-body .st-content{margin:25px auto;max-width:1120px;min-width:0}
.st-body .st-content h2{font-size:clamp(19px,2.4vw,25px);color:#183d2e;font-weight:920}
.st-body .st-notice{
 background:#ebf2e8;border:1px solid #c4d9c4;border-left:4px solid #568b64;
 border-radius:10px;color:#3f5c48;font-size:12px;line-height:1.8;
 padding:12px 15px;margin:16px 0;
}
.st-body .st-search{font-size:13px;gap:14px;margin:22px 0 17px;color:#284d36}
.st-body .st-search input{
 flex:0 1 470px;width:min(100%,470px);height:46px;
 background:#fff;border:1.5px solid #a2bfa7;border-radius:11px;
 padding:10px 14px;font:inherit;font-size:14px;outline:none;
 box-shadow:0 3px 10px #26573909;
}
.st-body .st-search input:focus{border-color:#27864f;box-shadow:0 0 0 3px #63c08026}
.st-body .st-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;align-items:stretch}
.st-body .st-card{
 display:flex!important;flex-direction:column!important;position:relative;isolation:isolate;
 min-width:0;max-width:100%;height:100%;overflow:hidden;
 background:#fff;border:1px solid #c6d8c8;border-radius:14px;
 color:var(--rare-ink)!important;text-decoration:none!important;
 box-shadow:0 4px 16px #173b2310;
 transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.st-body .st-card[hidden]{display:none!important}
.st-body .st-card:hover{transform:translateY(-3px);border-color:#2e8554;box-shadow:0 13px 26px #183d2824}
.st-body .st-card:focus-visible{outline:3px solid #dfa92e;outline-offset:3px}
.st-body .st-picture{
 position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
 flex:none!important;width:100%!important;height:145px!important;min-height:0!important;
 background:radial-gradient(circle at 50% 54%,#e8f1df 1%,#c9dfc6 85%)!important;
 border-bottom:1px solid #d4e3d2;overflow:hidden!important;
}
.st-body .st-picture::before{
 content:"";position:absolute;inset:12px;
 border:1px solid #ffffffa8;border-radius:9px;pointer-events:none;
}
.st-body .st-picture img{
 display:block!important;position:relative!important;inset:auto!important;transform:none!important;
 width:auto!important;height:auto!important;max-width:calc(100% - 22px)!important;
 max-height:calc(100% - 20px)!important;object-fit:contain!important;
 object-position:center!important;margin:auto!important;padding:0!important;flex:none!important;
 filter:drop-shadow(0 8px 6px #17391b26);
}
.st-body .st-picture.st-failed img{display:none!important}
.st-body .st-fallback{display:none;align-items:center;justify-content:center;text-align:center;font-weight:850;font-size:15px;color:#3b6848}
.st-body .st-failed .st-fallback{display:flex}
.st-body .st-card-body{
 display:flex!important;flex-direction:column!important;align-items:stretch!important;
 flex:1!important;gap:0!important;min-width:0!important;padding:12px!important;
 background:#fff;
}
.st-body .st-tag{
 display:block;width:max-content;max-width:100%;font-size:10px;font-weight:850;
 color:#386b4a;background:#eaf3e8;border-radius:5px;padding:3px 7px;line-height:1.5;
 margin:0 0 6px;white-space:normal;
}
.st-body .st-card-body>strong{display:block;min-height:45px;font-size:15px;line-height:1.45;font-weight:950;letter-spacing:-.035em;color:#173c28}
.st-body .st-card-odds{
 display:flex;flex-direction:column;justify-content:center;gap:3px;
 min-width:0;min-height:78px;margin-top:8px;padding:10px 11px 11px;
 border:1px solid #294537;border-radius:9px;
 background:linear-gradient(125deg,#112d23,#244632);
}
.st-body .st-odds-label{color:#d6e3d6;font-size:9px;font-weight:850;letter-spacing:.05em;line-height:1.5}
.st-body .st-odds-value{
 display:block;line-height:1.3;font-size:clamp(15px,1.65vw,21px);
 font-weight:950;color:#ffe393;letter-spacing:-.045em;
 overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
 text-shadow:0 0 14px #f7d76523;
}
.st-body .st-odds-value.is-unknown{color:#d6f1dc;font-size:14px;letter-spacing:0}
.st-body .st-odds-note{color:#d8ebdc;font-size:10px;font-weight:650;line-height:1.45}
.st-body .st-card-body>small{
 display:flex;align-items:center;justify-content:space-between;gap:5px;
 width:100%;color:#276645;font-size:11px;line-height:1.5;
 padding-top:9px;margin-top:auto;font-weight:850;
}
.st-body .st-card-body>small::after{content:"↗";font-size:15px;font-weight:900}
.st-body .st-card-odds+.st-rarity{display:none}
.st-body .st-feature{
 background:linear-gradient(110deg,#fff,#f0f8ef);
 border:1.5px solid #b2d2b4;border-left:6px solid #2e8253;
 box-shadow:0 8px 24px #173b2314;
}
.st-body .st-detail-head{
 min-height:unset;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
 background:linear-gradient(115deg,#0d3022,#205a3e);
 border:1px solid #174632;border-radius:17px;
 box-shadow:0 14px 30px #173b231c;
}
.st-body .st-detail-image{
 position:relative;isolation:isolate;min-height:315px;
 background:radial-gradient(ellipse at 50% 65%,#92bd8d,#336e4f);
 overflow:hidden!important;
}
.st-body .st-detail-image img{
 display:block!important;width:auto!important;height:auto!important;
 position:relative!important;max-width:calc(100% - 35px)!important;
 max-height:310px!important;object-fit:contain!important;
 padding:12px!important;margin:auto!important;
 transform:none!important;filter:drop-shadow(0 12px 12px #10322070);
}
.st-body .st-detail-intro{min-width:0;padding:26px 30px}
.st-body .st-detail-intro h1{font-size:clamp(25px,3.8vw,42px);letter-spacing:-.055em}
.st-body .st-detail-intro p{font-size:13px;color:#dcefe0}
.st-body .st-hero-odds{
 display:flex;flex-direction:column;align-items:flex-start;gap:3px;
 padding:13px 16px;margin-top:17px;width:100%;
 border:1px solid #ffdc8370;border-radius:12px;
 background:linear-gradient(105deg,#132b20,#274834);
}
.st-body .st-hero-odds span{font-size:11px;color:#e3efe3;letter-spacing:.08em;font-weight:850}
.st-body .st-hero-odds strong{
 color:#ffe38e;font:950 clamp(20px,3.4vw,34px)/1.28 system-ui,sans-serif;
 letter-spacing:-.04em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
}
.st-body .st-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:16px 0 23px}
.st-body .st-facts>div{border:1px solid #c7daca;border-radius:11px;padding:14px;background:#fff;min-width:0}
.st-body .st-facts>div:first-child{background:#fff7dc;border-color:#e6c56a}
.st-body .st-facts>div:first-child strong{color:#795217;font-size:19px;font-weight:950}
.st-body .st-facts small{font-size:11px}
.st-body .st-facts strong{font-size:15px;line-height:1.45}
.st-body .st-steps{gap:8px}
.st-body .st-steps li{border-radius:10px;background:#fff;border:1px solid #d6e5d7;min-width:0}
.st-body .st-steps b{background:#1d6641;font-variant-numeric:tabular-nums}
.st-body .st-back{background:#185d3c;color:#fff!important;border-radius:10px}
.st-body .st-inline-ad{padding:6px 0}
.rare-body{background:#f2f5ef}
.rare-body .rare-hero{
 background:linear-gradient(120deg,#09271d,#245b3d);
 position:relative;overflow:hidden;
}
.rare-body .rare-hero h1{font-size:clamp(30px,4vw,47px);color:#fff;font-weight:950}
.rare-body .rare-feature{
 display:block!important;position:relative;overflow:hidden;max-width:830px;
 background:linear-gradient(120deg,#fff,#e7f5e8);
 border:2px solid #bddabe;border-left:6px solid #31905c;border-radius:16px;
 box-shadow:0 10px 30px #163a241a;text-decoration:none!important;
 padding:28px;
}
.rare-body .rare-feature strong{display:inline-flex;padding:8px 12px;background:#215c3b;color:white;border-radius:8px;margin-top:10px}
.rare-body .rare-eyebrow{color:#75c78a}
.rare-body .rare-hero .rare-eyebrow{color:#bcf0c9}
.rare-body .rare-stat>div:first-child{
 grid-column:span 2;background:#14392a;
 border:1px solid #3b7555;border-radius:12px;
}
.rare-body .rare-stat>div:first-child small{color:#d8e9d9}
.rare-body .rare-stat>div:first-child strong{
 color:#ffe196;font:950 clamp(23px,3.4vw,33px)/1.3 system-ui,sans-serif;
 letter-spacing:-.05em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
}
.rare-body .rare-figure{min-height:330px;border-radius:17px;overflow:hidden}
.rare-body .rare-figure img{
 display:block!important;position:relative!important;object-fit:contain!important;
 width:auto!important;height:auto!important;max-width:calc(100% - 35px)!important;
 max-height:335px!important;margin:auto!important;padding:14px!important;
 transform:none!important;
}
.rare-body .rare-figure figcaption{font-size:10px;color:#325542}
.rare-body .rare-highlight{
 display:block;font:950 clamp(25px,3.7vw,36px)/1.32 system-ui,sans-serif;
 letter-spacing:-.05em;color:#85540b;background:#fff3c7;border:1px solid #e7c46b;
 padding:13px 17px;border-radius:11px;overflow-wrap:anywhere;
}
.rare-body .rare-panel{border-radius:13px;box-shadow:0 2px 10px #193f2508}
.rare-body .rare-back{background:#185c3c}
.rare-body .rare-feature .rare-eyebrow{color:#448059}
.st-body .st-main>.as-mosaic,.st-body .st-main>.as-slot,.rare-body main>.as-slot,.rare-body main>.as-mosaic{max-width:100%}
@media(max-width:1000px){
 .st-body .st-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
 .st-body .st-main{width:min(100% - 26px,680px)}
 .st-body .st-hero{padding:26px 22px;border-radius:14px}
 .st-body .st-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .st-body .st-detail-head{grid-template-columns:1fr}
 .st-body .st-detail-image{min-height:230px}
 .st-body .st-detail-image img{max-height:255px!important}
 .st-body .st-detail-intro{padding:23px 20px}
 .st-body .st-facts{grid-template-columns:1fr 1fr}
 .st-body .st-facts>div:first-child{grid-column:span 2}
 .rare-body .rare-detail-top{grid-template-columns:1fr}
 .rare-body .rare-stat{grid-template-columns:1fr 1fr}
 .rare-body .rare-stat>div:first-child{grid-column:span 2}
 .rare-body .rare-figure img{max-height:270px!important}
}
@media(max-width:470px){
 .st-body .st-main{width:calc(100% - 20px)}
 .st-body .st-hero{padding:22px 18px}
 .st-body .st-picture{height:116px!important}
 .st-body .st-picture img{max-width:calc(100% - 20px)!important;max-height:calc(100% - 14px)!important}
 .st-body .st-card-body{padding:9px!important}
 .st-body .st-card-body>strong{font-size:13px;min-height:39px}
 .st-body .st-tag{font-size:9px}
 .st-body .st-card-odds{min-height:74px;padding:8px}
 .st-body .st-odds-value{font-size:17px}
 .st-body .st-odds-value.is-unknown{font-size:12px}
 .st-body .st-odds-note{font-size:9px}
 .st-body .st-search input{min-width:0;width:100%}
 .st-body .st-detail-image{min-height:190px}
 .st-body .st-detail-image img{max-height:230px!important}
 .st-body .st-hero-odds strong{font-size:24px}
 .rare-body .rare-stat{grid-template-columns:1fr 1fr}
 .rare-body .rare-figure img{max-height:260px!important}
}
@media(prefers-reduced-motion:reduce){
 .st-body .st-card{transition:none}
 .st-body .st-card:hover{transform:none}
}

/* If an external render fails, show the name fallback rather than a broken image. */
.st-body .st-detail-image.st-failed img,
.rare-body .rare-figure.image-missing img{display:none!important}
.st-body .st-detail-image.st-failed .st-fallback{display:flex;align-items:center;justify-content:center;min-height:220px;color:#fff}