/* The type pages of the ドパガキ診断 (/dopagaki/types/<slug>/), written by build.py from the data in app.html.
   They look like the quiz's result: the same colors, fonts and boxes as app.html (copied here, keep them the same), but nothing moves. */
@font-face{font-family:"Mochiy Pop One";src:url(fonts/mochiy-pop-one.woff2) format("woff2");font-display:swap}
@font-face{font-family:"M PLUS Rounded 1c";src:url(fonts/m-plus-rounded-1c-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"M PLUS Rounded 1c";src:url(fonts/m-plus-rounded-1c-extrabold.woff2) format("woff2");font-weight:800 900;font-display:swap}
:root{
  --ink:#0A0A0A; --paper:#FFFFFF; --yel:#FFE600; --red:#FF1F1F; --pink:#FF2E93; --cyan:#00E5FF; --soft:#D6D6D6;
  --f0:#FFC928; --f1:#FF7F5E; --f2:#3FCDBE; --f3:#A891FF;
  --display:"Mochiy Pop One","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --body:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);font-weight:700;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
p{margin:0}
img{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

.tp{max-width:30rem;margin-inline:auto;padding:1rem 1.1rem 1rem;display:flex;flex-direction:column;gap:1.6rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.2rem .5rem;font-size:.75rem;line-height:1.6;color:var(--soft)}
.crumbs a{text-underline-offset:.2em}
.crumbs a::after{content:"›";display:inline-block;margin-left:.5rem;text-decoration:none}

/* the card, the name and the one line under it, as in the result */
.hero{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.frame{align-self:stretch;padding:.5rem;border-radius:1.1rem;background:repeating-linear-gradient(45deg,var(--red) 0 14px,var(--yel) 14px 28px,var(--cyan) 28px 42px,var(--pink) 42px 56px)}
.face{position:relative;background:var(--paper);border-radius:.75rem;display:flex;justify-content:center;padding:.6rem 0}
.face img{width:72%;height:auto;aspect-ratio:2/3;object-fit:cover}
.cardno{position:absolute;top:.7rem;right:.75rem;color:var(--ink);font-family:var(--display);font-size:.85rem}
.brand{position:absolute;left:.55rem;bottom:.55rem;background:var(--ink);color:var(--yel);font-family:var(--display);font-size:.78rem;line-height:1.5;padding:0 .5rem;transform:rotate(-3deg)}
.fam{border:2px solid var(--ink);box-shadow:0 0 0 2px var(--paper);background:var(--fc);color:var(--ink);font-size:.78rem;font-weight:900;padding:.05rem .6rem}
.nm{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,7.4vw,2rem);line-height:1.25;color:var(--yel);text-shadow:3px 3px 0 var(--red);overflow-wrap:anywhere}
.who{font-weight:900;font-size:.9rem}
.hito{font-family:var(--display);font-size:1.05rem;line-height:1.55;word-break:auto-phrase}

.sec{display:flex;flex-direction:column;gap:.75rem}
.sec>h2{margin:0;font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.35;color:var(--yel)}
.lead{font-size:.95rem;line-height:1.85}
.box{background:var(--paper);color:var(--ink);border:4px solid var(--yel);box-shadow:5px 5px 0 var(--pink);padding:.9rem 1rem 1rem}
.ana p{font-size:.92rem;line-height:1.9}
.ana h3{margin:1.15rem 0 .3rem;font-family:var(--display);font-weight:400;font-size:1.08rem;line-height:1.4;color:var(--red)}
.ana h3+p{text-indent:1em}
.facts{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem .8rem;font-size:.92rem}
.facts dt{background:var(--ink);color:var(--yel);padding:.1rem .4rem;align-self:start;white-space:nowrap;font-weight:900;font-size:.7rem}
.facts dd{margin:0;font-weight:700;line-height:1.55}
.facts ul{margin:0;padding-left:1.1rem}

/* the accomplice and the nemesis */
.mates{display:flex;flex-direction:column;gap:.8rem}
.mate{background:var(--paper);color:var(--ink);border:4px solid var(--cyan);padding:.8rem .85rem .9rem;display:flex;flex-direction:column;gap:.65rem}
.mate.foe{border-color:var(--red)}
.m-head{display:flex;gap:.75rem;align-items:center}
.m-head img{flex:none;width:3.4rem;height:5.1rem;object-fit:cover;border:3px solid var(--ink);background:var(--paper)}
.m-id{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;min-width:0}
.role{font-family:var(--display);font-size:.78rem;background:var(--cyan);color:var(--ink);padding:0 .45rem}
.foe .role{background:var(--red);color:var(--paper)}
.mn{font-family:var(--display);font-size:1.02rem;line-height:1.3;text-underline-offset:.2em}
.m-who{font-size:.76rem;font-weight:900;color:#4a4a4a;line-height:1.4}
.why{font-family:var(--display);font-size:.95rem;line-height:1.6}
.mts{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem}
.mt{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:900}
.mt-b{display:inline-flex;gap:2px}
.mt-b i{width:15px;height:11px;background:#DCDCDC}
.mt-b i.on{background:var(--ink)}
.foe .mt-b i.on{background:var(--red)}
.mate .facts{font-size:.86rem}

/* the lesson */
.lesson{display:flex;flex-direction:column;gap:.75rem;padding:1.15rem 1rem 1.25rem}
.ls-q{font-family:var(--display);font-size:1.2rem;line-height:1.65;word-break:auto-phrase;text-wrap:balance}
.ls-q::before{content:"";display:block;width:2.2rem;height:.45rem;background:var(--red);margin-bottom:.8rem}
.ls-b,.ls-to{font-size:.9rem;line-height:1.9}
.ls-to{border-top:2px solid var(--ink);padding-top:.75rem}

/* back to the quiz */
.go{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center}
.go-k{font-family:var(--display);font-size:1.3rem;line-height:1.3;color:var(--yel)}
.cta{display:flex;justify-content:center;align-items:center;width:100%;min-height:4.4rem;background:var(--red);color:var(--paper);border:4px solid var(--paper);box-shadow:6px 6px 0 var(--yel);font-family:var(--display);font-size:1.35rem;line-height:1.3;padding:.4rem 1rem;text-decoration:none}
.cta:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--yel)}
.go-s{font-size:.8rem;font-weight:800;color:var(--soft)}

/* all 16 types */
.all{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.all a{display:flex;flex-direction:column;align-items:center;gap:.3rem;height:100%;border:2px solid var(--paper);padding:.4rem .15rem;font-size:.62rem;font-weight:900;line-height:1.3;text-align:center;text-decoration:none;text-wrap:balance;word-break:auto-phrase;overflow-wrap:anywhere}
.all a[aria-current="page"]{background:var(--yel);color:var(--ink);border-color:var(--yel)}
.all img{width:2.6rem;height:3.9rem;object-fit:cover;background:var(--paper);border:2px solid var(--ink)}
.note{font-size:.78rem;line-height:1.7;color:#9a9a9a}

.dg-foot{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 1.2rem;padding:1.4rem 1rem 2.2rem;font:700 .75rem/1.6 var(--body)}
.dg-foot a{opacity:.7}
@media (prefers-reduced-motion:reduce){.cta:active{transform:none}}